Backporting changes from github

scss/_alerts.scss

@@ -1,106 +1,92 @@
-.flash-messages {
+// Default flash
-  margin-top: 15px;
+.flash {
-  margin-bottom: 15px;
-}
-
-.flash,
-.flash-global {
   position: relative;
+  padding: 15px;
   font-size: 14px;
-  line-height: 1.6;
+  line-height: 1.5;
   color: #246;
   background-color: #e2eef9;
-  border: solid 1px #bac6d3;
+  border: 1px solid #bac6d3;
-
+  border-radius: 3px;
-  &.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;
-    }
-  }
 
   p:last-child {
     margin-bottom: 0;
   }
+}
 
-  // Flashes can have an action button instead of the cross.
+// Contain the flash messages
-  .flash-action {
+.flash-messages {
+  margin-bottom: 20px;
+}
+
+// Close button
+.flash-close {
+  float: right;
+  width: 34px;
+  height: 44px;
+  margin: -11px;
+  color: inherit;
+  line-height: 40px;
+  text-align: center;
+  cursor: pointer;
+  opacity: 0.6;
+  // Undo `<button>` styles
+  background: none;
+  border: 0;
+  -webkit-appearance: none;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+// Action button
+.flash-action {
   float: right;
   margin-top: -4px;
   margin-left: 20px;
-  }
-
-  // Make links stand out
-  a {
-    font-weight: bold;
-  }
 }
 
-.flash {
-  padding: 15px;
-  border-radius: 3px;
 
-  + .flash { margin-top: 5px; }
+//
+// 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 {
+  .container {
     padding-left: 40px;
+  }
 
-  > .octicon {
+  .flash-icon {
     float: left;
     margin-top: 3px;
     margin-left: -25px;
   }
 }
 
-
+// Content within
-// Global notices
 //
-// Useful for site-wide banners and global notifications.
+// Reset margins on headings and paragraphs within alerts.
-
+.flash-content {
-.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.5;
-    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;
 }

scss/_buttons.scss

@@ -328,12 +328,12 @@
       border-radius: 0;
     }
 
-    &:first-child {
+    &:first-child:not(:last-child) {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
 
-    &:last-child {
+    &:last-child:not(:first-child) {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }