Revamp alerts

scss/_alerts.scss

@@ -1,106 +1,77 @@
-.flash-messages {
-  margin-top: 15px;
-  margin-bottom: 15px;
-}
-
-.flash,
-.flash-global {
+// Default flash
+.flash {
   position: relative;
+  padding: 15px;
   font-size: 14px;
   line-height: 1.6;
   color: #246;
   background-color: #e2eef9;
-  border: solid 1px #bac6d3;
-
-  &.flash-warn {
-    color: #4c4a42;
-    background-color: #fff9ea;
-    border-color: #dfd8c2;
-  }
-
-  &.flash-error {
-    color: #911;
-    background-color: #fcdede;
-    border-color: #d2b2b2;
-  }
-
-  .flash-close {
-    float: right;
-    padding: 17px;     // bigger hit area
-    margin-top: -15px; // negative margins to account for bigger padding
-    margin-right: -15px;
-    margin-left: 20px;
-    color: inherit;
-    text-decoration: none;
-    cursor: pointer;
-    opacity: 0.6;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
+  border: 1px solid #bac6d3;
+  border-radius: 3px;
 
   p:last-child {
     margin-bottom: 0;
   }
+}
 
-  // Flashes can have an action button instead of the cross.
-  .flash-action {
-    float: right;
-    margin-top: -4px;
-    margin-left: 20px;
-  }
+// Close button
+.flash-close {
+  float: right;
+  width: 44px;
+  height: 44px;
+  margin: -11px;
+  color: inherit;
+  line-height: 40px;
+  cursor: pointer;
+  opacity: 0.6;
+  // Undo `<button>` styles
+  background: none;
+  border: 0;
+  -webkit-appearance: none;
 
-  // Make links stand out
-  a {
-    font-weight: bold;
+  &:hover {
+    opacity: 1;
   }
 }
 
-.flash {
-  padding: 15px;
-  border-radius: 3px;
-
-  + .flash { margin-top: 5px; }
+// Action button
+.flash-action {
+  float: right;
+  margin-top: -4px;
+  margin-left: 20px;
+}
+
+
+//
+// Variations
+//
+
+.flash-warn {
+  color: #4c4a42;
+  background-color: #fff9ea;
+  border-color: #dfd8c2;
+}
+
+.flash-error {
+  color: #911;
+  background-color: #fcdede;
+  border-color: #d2b2b2;
+}
+
+.flash-full {
+  margin-top: -1px;
+  border-width: 1px 0;
+  border-radius: 0;
 }
 
-// Add an icon
 .flash-with-icon {
-  padding-left: 40px;
+  .container {
+    padding-left: 40px;
+  }
 
-  > .octicon {
+  .flash-icon {
     float: left;
     margin-top: 3px;
     margin-left: -25px;
   }
 }
-
-
-// Global notices
-//
-// Useful for site-wide banners and global notifications.
-
-.flash-global {
-  padding: 10px;
-  margin-top: -1px;
-  border-width: 1px 0;
-
-  h2,
-  p {
-    margin-top: 0;
-    margin-bottom: 0;
-    font-size: 14px;
-    line-height: 1.4;
-  }
-
-  // Global flashes can have an action buttons too.
-  .flash-action {
-    margin-top: 5px;
-  }
-}
-
-// Content within flash messages.
-.flash-title {
-  margin-top: 0;
-  margin-bottom: 5px;
-}