Update Patterns Sass Formatting

Continues on from #4342

- Reformats the Sass to match our new style (property order, comments, & white space)

core/client/assets/sass/patterns/_shame.scss

@@ -1,3 +1,15 @@
+// ------------------------------------------------------------
+// Shame
+//
+// A home for Styles that need to die in a fire, but are used
+// in lots of places.
+//
+// * Utilities
+// * Floating Header
+// * Scroll Shadows
+// ------------------------------------------------------------
+
+
 //
 // Utilities
 // --------------------------------------------------
@@ -44,10 +56,8 @@
     font-size: 1.3rem;
     text-transform: uppercase;
     color: $brown;
-    //Transparent gradient to make bg fade out as it goes out the top.
-    background: linear-gradient(to bottom, white 0%, white 25%, rgba(255,255,255,0.9) 100%);
+    background: linear-gradient(to bottom, white 0%, white 25%, rgba(255,255,255,0.9) 100%); //Transparent gradient to make bg fade out as it goes out the top
 
-    // button,
     .button {
         display: inline-block;
         font-size: 10px;
@@ -76,7 +86,7 @@
                 display: inline-block;
             }
         }
-    }
+    }//.button
 
     small {
         font-size: 0.85em;
@@ -85,11 +95,11 @@
     a,
     button {
         color: $brown;
+
         &:hover {
             color: $darkgrey;
         }
     }
-
 } // .floatingheader
 
 
@@ -115,7 +125,5 @@
             background-size: 100% 200%;
             z-index: -1;
         }
-
-    } // .floatingheader
-
-}//.scrolling
+    }
+}

core/client/assets/sass/patterns/buttons.scss

@@ -1,29 +1,42 @@
-//
+// ------------------------------------------------------------
 // Buttons
-// --------------------------------------------------
+//
+// Default button Styles, including sizes & colours
+//
+// * Default styles
+// * Coloured buttons
+// * Link buttons
+// * Minor buttons
+// * Button Sizes
+// * Block button
+// ------------------------------------------------------------
 
 
-// Base styles
+//
+// Default styles
 // --------------------------------------------------
 
-%button {
+.btn {
     display: inline-block;
-    margin-bottom: 0; // For input.btn
+    margin-bottom: 0;
     padding: 9px 14px;
+
     font-size: 1.1rem;
     line-height: 1.428571429;
     font-weight: 300;
     text-align: center;
     text-transform: uppercase;
     text-shadow: none;
     letter-spacing: 1px;
-    vertical-align: middle;
-    cursor: pointer;
+    white-space: nowrap;
+
     background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+
     border: 1px solid transparent;
-    white-space: nowrap;
     border-radius: $border-radius;
+
     user-select: none;
+    cursor: pointer;
 
     &,
     &:active,
@@ -54,13 +67,11 @@
         opacity: 0.65;
         box-shadow: none;
     }
-}
-.btn {
-    @extend %button;
-}
+}//.btn
 
 
-// Alternate buttons
+//
+// Coloured buttons
 // --------------------------------------------------
 
 @mixin button-style($color, $background, $border) {
@@ -78,14 +89,17 @@
         background-color: darken($background, 10%);
         border-color: darken($border, 12%);
     }
+
     &:active,
     &.active,
     .open > &.dropdown-toggle {
         background-image: none;
     }
+
     &.disabled,
     &[disabled],
     fieldset[disabled] & {
+
         &,
         &:hover,
         &:focus,
@@ -101,28 +115,31 @@
         background-color: $color;
         box-shadow: 0 0 0 1px $color;
     }
-}
+}//@mixin button-style
 
 .btn-default {
-    font-weight: normal;
+    font-weight: normal; // Increases the font-weight to make text more legible for white BG button
     @include button-style(#666, #fff, lighten($midgrey, 40%));
 }
+
 .btn-alt {
     @include button-style(#fff, #A1ADB3, darken(#A1ADB3, 5%));
 }
+
 .btn-blue {
     @include button-style(#fff, $blue, darken($blue, 5%));
 }
-// Success appears as green
+
 .btn-green {
     @include button-style(#fff, $green, darken($green, 5%));
 }
-// Danger and error appear as red
+
 .btn-red {
     @include button-style(#fff, $red, darken($red, 5%));
 }
 
 
+//
 // Link buttons
 // -------------------------
 
@@ -140,29 +157,34 @@
         background-color: transparent;
         box-shadow: none;
     }
+
     &,
     &:hover,
     &:focus,
     &:active {
         color: $blue;
         border-color: transparent;
     }
+
     &:hover,
     &:focus {
         text-decoration: underline;
         background-color: transparent;
     }
+
     &[disabled],
     fieldset[disabled] & {
+
         &:hover,
         &:focus {
             color: $midgrey;
             text-decoration: none;
         }
     }
-}
+}//.btn-link
 
 
+//
 // Minor buttons
 // -------------------------
 
@@ -175,6 +197,7 @@
     padding: 8px 14px;
 }
 
+//
 // Button Sizes
 // --------------------------------------------------
 
@@ -193,6 +216,7 @@
 }
 
 
+//
 // Block button
 // --------------------------------------------------
 
@@ -210,6 +234,7 @@
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
+
     &.btn-block {
         width: 100%;
     }