Fixing basic alert stuff.

dist/ratchet.css

@@ -1003,6 +1003,21 @@ input[type="button"] {
   border-radius: 3px;
   z-index: 10;
 }
+.alert .close {
+  position: relative;
+  top: -2px;
+  float: right;
+  cursor: pointer;
+  -webkit-transition: opacity;
+  transition: opacity;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -webkit-transition-timing-function: linear;
+  transition-timing-function: linear;
+}
+.alert .close:active {
+  opacity: .6;
+}
 
 .alert-positive {
   background-color: rgba(76, 217, 100, 0.97);
@@ -1013,7 +1028,11 @@ input[type="button"] {
 }
 
 .alert-inline {
-  position: static;
+  position: relative;
+  top: auto;
+  bottom: auto;
+  left: auto;
+  right: auto;
   margin: 15px;
 }
 

examples/app-default/index.html

@@ -20,6 +20,7 @@
 
     <!-- Alert -->
     <div class="alert alert-negative">
+      <span class="icon icon-share close"></span>
       <strong>This</strong> is an alert.
     </div>
 
@@ -71,8 +72,8 @@
       </div>
 
       <div class="alert alert-positive alert-inline">
+        <span class="icon icon-share close"></span>
         <strong>This</strong> is an inline alert.
-        <button>x</button>
       </div>
 
       <ul class="table-view">

lib/sass/alerts.scss

@@ -15,8 +15,15 @@
   .close {
     position: relative;
     top: -2px;
-    right: -21px;
+    float: right;
-    color: inherit;
+    cursor: pointer;
+    @include transition(opacity);
+    @include transition-duration(.2s);
+    @include transition-timing-function(linear);
+
+    &:active {
+      opacity: .6;
+    }
   }
 }
 
@@ -32,6 +39,10 @@
 
 // Inline alert
 .alert-inline {
-  position: static;
+  position: relative;
+  top: auto;
+  bottom: auto;
+  left: auto;
+  right: auto;
   margin: 15px;
 }