From: Nicolas Coden <nicolas@ncoden.fr>
Date: Tue, 8 Nov 2016 02:55:00 +0000 (+0100)
Subject: Sass lint: Sort components properties
X-Git-Tag: v6.3-rc1~18^2~4
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ec1ae0a00833c0ce5733874bfab133678f851e35;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Sass lint: Sort components properties

Sort components properties following the Specific property sort order.
But keep for `position`/`margin`/`padding` `left` before `right` for
now.

See : https://gist.github.com/ncoden/d42f55df7c7970f548a02cd3468f9c86
---

diff --git a/scss/components/_accordion-menu.scss b/scss/components/_accordion-menu.scss
index 186abee11..eb02e7bd2 100644
--- a/scss/components/_accordion-menu.scss
+++ b/scss/components/_accordion-menu.scss
@@ -23,8 +23,8 @@ $accordionmenu-arrow-color: $primary-color !default;
     .is-accordion-submenu-parent > span {
       position: relative;
       display: block;
-      cursor: pointer;
       color: $anchor-color;
+      cursor: pointer;
 
       &:hover {
         color: $anchor-color-hover;
@@ -34,8 +34,8 @@ $accordionmenu-arrow-color: $primary-color !default;
         @include css-triangle(6px, $accordionmenu-arrow-color, down);
         position: absolute;
         top: 50%;
-        margin-top: -4px;
-        #{$global-right}: 1rem;
+        right: 1rem;
+        #{$global-right}: -4px;
       }
 
     }
diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
index d5352e096..cfc96ab0d 100644
--- a/scss/components/_accordion.scss
+++ b/scss/components/_accordion.scss
@@ -48,9 +48,9 @@ $accordion-content-padding: 1rem !default;
 
 /// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
 @mixin accordion-container {
-  list-style-type: none;
-  background: $accordion-background;
   margin-#{$global-left}: 0;
+  background: $accordion-background;
+  list-style-type: none;
 }
 
 /// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
@@ -66,15 +66,17 @@ $accordion-content-padding: 1rem !default;
 
 /// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
 @mixin accordion-title {
+  position: relative;
   display: block;
   padding: $accordion-item-padding;
-  line-height: 1;
-  font-size: $accordion-title-font-size;
-  color: $accordion-item-color;
-  position: relative;
+
   border: $accordion-content-border;
   border-bottom: 0;
 
+  font-size: $accordion-title-font-size;
+  line-height: 1;
+  color: $accordion-item-color;
+
   :last-child:not(.is-active) > & {
     border-radius: 0 0 $global-radius $global-radius;
     border-bottom: $accordion-content-border;
@@ -102,11 +104,13 @@ $accordion-content-padding: 1rem !default;
 
 /// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
 @mixin accordion-content {
-  padding: $accordion-content-padding;
   display: none;
+  padding: $accordion-content-padding;
+
   border: $accordion-content-border;
   border-bottom: 0;
   background-color: $accordion-content-background;
+
   color: $accordion-content-color;
 
   :last-child > &:last-child {
diff --git a/scss/components/_badge.scss b/scss/components/_badge.scss
index c3c0112d2..487f0d769 100644
--- a/scss/components/_badge.scss
+++ b/scss/components/_badge.scss
@@ -29,11 +29,13 @@ $badge-font-size: 0.6rem !default;
 /// Generates the base styles for a badge.
 @mixin badge {
   display: inline-block;
-  padding: $badge-padding;
   min-width: $badge-minwidth;
+  padding: $badge-padding;
+
+  border-radius: 50%;
+
   font-size: $badge-font-size;
   text-align: center;
-  border-radius: 50%;
 }
 
 @mixin foundation-badge {
diff --git a/scss/components/_breadcrumbs.scss b/scss/components/_breadcrumbs.scss
index a02f7c261..ccaa39938 100644
--- a/scss/components/_breadcrumbs.scss
+++ b/scss/components/_breadcrumbs.scss
@@ -41,14 +41,15 @@ $breadcrumbs-item-slash: true !default;
 /// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
 @mixin breadcrumbs-container {
   @include clearfix;
-  list-style: none;
   margin: $breadcrumbs-margin;
+  list-style: none;
 
   // Item wrapper
   li {
     float: #{$global-left};
-    color: $breadcrumbs-item-color-current;
+
     font-size: $breadcrumbs-item-font-size;
+    color: $breadcrumbs-item-color-current;
     cursor: default;
 
     @if $breadcrumbs-item-uppercase {
@@ -60,12 +61,13 @@ $breadcrumbs-item-slash: true !default;
       $slash: if($global-text-direction == 'ltr', '/', '\\');
 
       &:not(:last-child)::after {
-        color: $medium-gray;
-        content: $slash;
-        margin: 0 $breadcrumbs-item-margin;
         position: relative;
         top: 1px;
+        margin: 0 $breadcrumbs-item-margin;
+
         opacity: 1;
+        content: $slash;
+        color: $medium-gray;
       }
     }
     @else {
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 3ee01e80e..e3bc413a7 100644
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -72,17 +72,19 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 @mixin button-base {
   @include disable-mouse-outline;
   display: inline-block;
-  text-align: center;
-  line-height: 1;
-  cursor: pointer;
-  -webkit-appearance: none;
-  transition: $button-transition;
   vertical-align: middle;
-  border: 1px solid transparent;
-  border-radius: $button-radius;
   padding: $button-padding;
   margin: $button-margin;
+
+  -webkit-appearance: none;
+  border: 1px solid transparent;
+  border-radius: $button-radius;
+  transition: $button-transition;
+
   font-size: map-get($button-sizes, default);
+  text-align: center;
+  line-height: 1;
+  cursor: pointer;
 }
 
 /// Expands a button to make it full-width.
@@ -175,9 +177,10 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
     @include css-triangle($size, $color, down);
     position: relative;
     top: 0.4em; // Aligns the arrow with the text of the button
+
+    display: inline-block;
     float: #{$global-right};
     margin-#{$global-left}: get-side($button-padding, right);
-    display: inline-block;
   }
 }
 
@@ -279,9 +282,9 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 
     // Button with dropdown arrow only
     &.arrow-only::after {
-      margin-#{$global-left}: 0;
-      float: none;
       top: -0.1em;
+      float: none;
+      margin-#{$global-left}: 0;
     }
   }
 }
diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
index cb4665116..37a202248 100644
--- a/scss/components/_callout.scss
+++ b/scss/components/_callout.scss
@@ -44,11 +44,13 @@ $callout-link-tint: 30% !default;
 
 /// Adds basic styles for a callout, including padding and margin.
 @mixin callout-base() {
+  position: relative;
   margin: $callout-margin;
   padding: $callout-padding;
+
   border: $callout-border;
   border-radius: $callout-radius;
-  position: relative;
+
   color: $callout-font-color;
 
   // Respect the padding, fool.
diff --git a/scss/components/_drilldown.scss b/scss/components/_drilldown.scss
index a9d2d906f..85e9fbf23 100644
--- a/scss/components/_drilldown.scss
+++ b/scss/components/_drilldown.scss
@@ -43,6 +43,7 @@ $drilldown-background: $white !default;
     top: 0;
     #{$global-left}: 100%;
     z-index: -1;
+
     // height: 100%;
     width: 100%;
     background: $drilldown-background;
@@ -67,17 +68,18 @@ $drilldown-background: $white !default;
         @include css-triangle(6px, $drilldown-arrow-color, $global-right);
         position: absolute;
         top: 50%;
-        margin-top: -6px;
         #{$global-right}: 1rem;
+        margin-top: -6px;
       }
     }
 
     .js-drilldown-back > a::before {
       @include css-triangle(6px, $drilldown-arrow-color, $global-left);
-      border-#{$global-left}-width: 0;
       display: inline-block;
       vertical-align: middle;
       margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
+
+      border-#{$global-left}-width: 0;
     }
   }
 }
diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 376c28111..1a0f6142c 100644
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -66,8 +66,8 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
     @if $dropdownmenu-arrows {
       > li.is-dropdown-submenu-parent > a {
-        padding-#{$global-right}: 1.5rem;
         position: relative;
+        padding-#{$global-right}: 1.5rem;
       }
 
       > li.is-dropdown-submenu-parent > a::after {
@@ -186,12 +186,14 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
   }
 
   .is-dropdown-submenu {
-    display: none;
     position: absolute;
     top: 0;
     #{$global-left}: 100%;
-    min-width: $dropdownmenu-min-width;
     z-index: 1;
+
+    display: none;
+    min-width: $dropdownmenu-min-width;
+
     background: $dropdownmenu-background;
     border: $dropdownmenu-border;
 
diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss
index b41809f05..7c791a733 100644
--- a/scss/components/_dropdown.scss
+++ b/scss/components/_dropdown.scss
@@ -40,16 +40,19 @@ $dropdown-sizes: (
 
 /// Applies styles for a basic dropdown.
 @mixin dropdown-container {
-  background-color: $dropdown-background;
-  border: $dropdown-border;
-  border-radius: $dropdown-radius;
+  position: absolute;
+  z-index: 10;
+
   display: block;
-  font-size: $dropdown-font-size;
+  width: $dropdown-width;
   padding: $dropdown-padding;
-  position: absolute;
+
   visibility: hidden;
-  width: $dropdown-width;
-  z-index: 10;
+  border: $dropdown-border;
+  border-radius: $dropdown-radius;
+  background-color: $dropdown-background;
+
+  font-size: $dropdown-font-size;
 
   &.is-open {
     visibility: visible;
diff --git a/scss/components/_label.scss b/scss/components/_label.scss
index 6fb1864a8..28bbc0ba2 100644
--- a/scss/components/_label.scss
+++ b/scss/components/_label.scss
@@ -30,11 +30,13 @@ $label-radius: $global-radius !default;
 @mixin label {
   display: inline-block;
   padding: $label-padding;
+
+  border-radius: $label-radius;
+
   font-size: $label-font-size;
   line-height: 1;
   white-space: nowrap;
   cursor: default;
-  border-radius: $label-radius;
 }
 
 @mixin foundation-label {
diff --git a/scss/components/_media-object.scss b/scss/components/_media-object.scss
index a7c74c8e7..c8222f61a 100644
--- a/scss/components/_media-object.scss
+++ b/scss/components/_media-object.scss
@@ -20,8 +20,8 @@ $mediaobject-image-width-stacked: 100% !default;
 
 /// Adds styles for a media object container.
 @mixin media-object-container {
-  margin-bottom: $mediaobject-margin-bottom;
   display: if($global-flexbox, flex, block);
+  margin-bottom: $mediaobject-margin-bottom;
 
   @if $global-flexbox {
     flex-wrap: nowrap;
diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index 544345ce0..3176935a6 100644
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -44,10 +44,10 @@ $menu-border: $light-gray !default;
   list-style-type: none;
 
   @if $global-flexbox {
-    width: 100%;
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
+    width: 100%;
   }
 
   // List items are table cell to allow for vertical alignment
@@ -89,8 +89,8 @@ $menu-border: $light-gray !default;
     }
   }
   @else {
-    width: 100%;
     display: table;
+    width: 100%;
     table-layout: fixed;
   }
 }
@@ -140,9 +140,9 @@ $menu-border: $light-gray !default;
 /// Creates a simple Menu, which has no padding or hover state.
 @mixin menu-simple {
   li {
-    line-height: 1;
     display: inline-block;
     margin-#{$global-right}: get-side($menu-item-padding, $global-right);
+    line-height: 1;
   }
 
   a {
@@ -216,8 +216,8 @@ $menu-border: $light-gray !default;
         }
         @else {
           align-self: stretch;
-          text-align: center;
           margin-bottom: $menu-icon-spacing;
+          text-align: center;
         }
       }
     }
@@ -225,12 +225,13 @@ $menu-border: $light-gray !default;
 }
 
 @mixin menu-text {
-  font-weight: bold;
-  color: inherit;
-  line-height: 1;
   padding-top: 0;
   padding-bottom: 0;
   padding: $menu-item-padding;
+
+  font-weight: bold;
+  line-height: 1;
+  color: inherit;
 }
 
 @mixin foundation-menu {
diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index 6bf5b92f6..c282b1df7 100644
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -53,10 +53,11 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
   }
 
   .off-canvas-wrapper {
+    position: relative;
     width: 100%;
+
     overflow-x: hidden;
     overflow-y: hidden;
-    position: relative;
     backface-visibility: hidden;
     -webkit-overflow-scrolling: auto;
   }
@@ -66,18 +67,20 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
     position: relative;
     width: 100%;
     min-height: 100%; 
+
     transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
   }
 
   // Container for page content
   .off-canvas-content,
   .#{$maincontent-class} {
+    z-index: 1;
     min-height: 100%;
+    padding-bottom: 0.1px; // Prevents margin collapsing, which would reveal the box shadow of the wrapper
+
     background: $body-background;
     transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
     backface-visibility: hidden;
-    z-index: 1;
-    padding-bottom: 0.1px; // Prevents margin collapsing, which would reveal the box shadow of the wrapper
 
     @if has-value($maincontent-shadow) {
       box-shadow: $maincontent-shadow;
@@ -86,15 +89,16 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
 
   // Click-to-exit overlay (generated by JavaScript)
   .js-off-canvas-exit {
-    display: none;
     position: absolute;
     top: 0;
     left: 0;
+    display: none;
     width: 100%;
     height: 100%;
+
     background: $offcanvas-exit-background;
-    cursor: pointer;
     transition: background $offcanvas-transition-length $offcanvas-transition-timing;
+    cursor: pointer;
   }
 }
 
@@ -102,10 +106,11 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
 @mixin off-canvas-base {
   @include disable-mouse-outline;
   position: absolute;
-  background: $offcanvas-background;
   z-index: $offcanvas-zindex;
   max-height: 100%;
+
   overflow-y: auto;
+  background: $offcanvas-background;
   transform: translateX(0) translateY(0);
 }
 
diff --git a/scss/components/_orbit.scss b/scss/components/_orbit.scss
index 32ee22208..b8a341c47 100644
--- a/scss/components/_orbit.scss
+++ b/scss/components/_orbit.scss
@@ -92,10 +92,11 @@ $orbit-control-zindex: 10 !default;
   position: absolute;
   bottom: 0;
   width: 100%;
-  padding: $orbit-caption-padding;
   margin-bottom: 0;
-  color: foreground($orbit-caption-background);
+  padding: $orbit-caption-padding;
+
   background-color: $orbit-caption-background;
+  color: foreground($orbit-caption-background);
 }
 
 /// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS.
@@ -136,8 +137,9 @@ $orbit-control-zindex: 10 !default;
     width: $orbit-bullet-diameter;
     height: $orbit-bullet-diameter;
     margin: $orbit-bullet-margin;
-    background-color: $orbit-bullet-background;
+
     border-radius: 50%;
+    background-color: $orbit-bullet-background;
 
     &:hover {
       background-color: $orbit-bullet-background-active;
diff --git a/scss/components/_pagination.scss b/scss/components/_pagination.scss
index 7acbc9fed..288041f70 100644
--- a/scss/components/_pagination.scss
+++ b/scss/components/_pagination.scss
@@ -73,9 +73,9 @@ $pagination-arrows: true !default;
 
   // List item
   li {
-    font-size: $pagination-font-size;
     margin-#{$global-right}: $pagination-item-spacing;
     border-radius: $pagination-radius;
+    font-size: $pagination-font-size;
 
     @if $pagination-mobile-items {
       display: inline-block;
@@ -103,10 +103,10 @@ $pagination-arrows: true !default;
   // Page links
   a,
   button {
-    color: $pagination-item-color;
     display: block;
     padding: $pagination-item-padding;
     border-radius: $global-radius;
+    color: $pagination-item-color;
 
     &:hover {
       background: $pagination-item-background-hover;
@@ -135,8 +135,8 @@ $pagination-arrows: true !default;
 
 /// Adds styles for an ellipsis for use in a pagination list.
 @mixin pagination-ellipsis {
-  content: '\2026';
   padding: $pagination-item-padding;
+  content: '\2026';
   color: $pagination-ellipsis-color;
 }
 
@@ -160,16 +160,16 @@ $pagination-arrows: true !default;
   @if $pagination-arrows {
     .pagination-previous a::before,
     .pagination-previous.disabled::before {
-      content: '\00ab';
       display: inline-block;
       margin-#{$global-right}: 0.5rem;
+      content: '\00ab';
     }
 
     .pagination-next a::after,
     .pagination-next.disabled::after {
-      content: '\00bb';
       display: inline-block;
       margin-#{$global-left}: 0.5rem;
+      content: '\00bb';
     }
   }
 }
diff --git a/scss/components/_progress-bar.scss b/scss/components/_progress-bar.scss
index e74a0c1f2..cd7b066f5 100644
--- a/scss/components/_progress-bar.scss
+++ b/scss/components/_progress-bar.scss
@@ -4,9 +4,9 @@
 
 /// Adds styles for a progress bar container.
 @mixin progress-container {
-  background-color: $progress-background;
   height: $progress-height;
   margin-bottom: $progress-margin-bottom;
+  background-color: $progress-background;
   border-radius: $progress-radius;
 }
 
diff --git a/scss/components/_responsive-embed.scss b/scss/components/_responsive-embed.scss
index fb80bd337..719d01998 100644
--- a/scss/components/_responsive-embed.scss
+++ b/scss/components/_responsive-embed.scss
@@ -67,8 +67,8 @@ $responsive-embed-ratio-widescreen: 16 by 9 !default;
   @warn 'This mixin is being replaced by responsive-embed(). flex-video() will be removed in Foundation 6.4.';
   position: relative;
   height: 0;
-  padding-bottom: responsive-embed($ratio);
   margin-bottom: $responsive-embed-margin-bottom;
+  padding-bottom: responsive-embed($ratio);
   overflow: hidden;
 
   iframe,
diff --git a/scss/components/_reveal.scss b/scss/components/_reveal.scss
index b53a1f4ec..71f125e1e 100644
--- a/scss/components/_reveal.scss
+++ b/scss/components/_reveal.scss
@@ -41,13 +41,14 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 /// Adds styles for a modal overlay.
 /// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay.
 @mixin reveal-overlay($background: $reveal-overlay-background) {
-  display: none;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: $reveal-zindex;
+
+  display: none;
   background-color: $background;
   overflow-y: scroll;
 }
@@ -55,12 +56,14 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 /// Adds base styles for a modal.
 @mixin reveal-modal-base {
   @include disable-mouse-outline;
-  display: none;
   z-index: $reveal-zindex + 1;
+
+  display: none;
   padding: $reveal-padding;
+
   border: $reveal-border;
-  background-color: $reveal-background;
   border-radius: $reveal-radius;
+  background-color: $reveal-background;
 
   @include breakpoint(medium) {
     min-height: 0;
@@ -97,12 +100,14 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   // scss-lint:disable DuplicateProperty
   top: 0;
   left: 0;
+
   width: 100%;
+  max-width: none;
   height: 100%;
   height: 100vh;
   min-height: 100vh;
-  max-width: none;
   margin-left: 0;
+
   border: 0;
   border-radius: 0;
 }
diff --git a/scss/components/_slider.scss b/scss/components/_slider.scss
index 7813e97fd..25b28d447 100644
--- a/scss/components/_slider.scss
+++ b/scss/components/_slider.scss
@@ -23,6 +23,7 @@ $slider-transition: all 0.2s ease-in-out !default;
   height: $slider-height;
   margin-top: 1.25rem;
   margin-bottom: 2.25rem;
+
   background-color: $slider-background;
   cursor: pointer;
   user-select: none;
@@ -34,9 +35,11 @@ $slider-transition: all 0.2s ease-in-out !default;
   position: absolute;
   top: 0;
   left: 0;
+
   display: inline-block;
   max-width: 100%;
   height: $slider-height;
+
   background-color: $slider-fill-background;
   transition: $slider-transition;
 
@@ -52,13 +55,15 @@ $slider-transition: all 0.2s ease-in-out !default;
   position: absolute;
   left: 0;
   z-index: 1;
+
   display: inline-block;
   width: $slider-handle-width;
   height: $slider-handle-height;
+
+  border-radius: $slider-radius;
   background-color: $slider-handle-background;
   transition: $slider-transition;
   touch-action: manipulation;
-  border-radius: $slider-radius;
 
   &:hover {
     background-color: scale-color($slider-handle-background, $lightness: -15%);
diff --git a/scss/components/_switch.scss b/scss/components/_switch.scss
index f31fff6d3..44b430b15 100644
--- a/scss/components/_switch.scss
+++ b/scss/components/_switch.scss
@@ -60,43 +60,46 @@ $switch-paddle-transition: all 0.25s ease-out !default;
 
 /// Adds styles for a switch container. Apply this to a container class.
 @mixin switch-container {
+  position: relative;
   margin-bottom: $switch-margin;
   outline: 0;
-  position: relative;
-  user-select: none;
 
   // These properties cascade down to the switch text
-  color: $white;
-  font-weight: bold;
   font-size: rem-calc(14);
+  font-weight: bold;
+  color: $white;
+
+  user-select: none;
 }
 
 /// Adds styles for a switch input. Apply this to an `<input>` within a switch.
 @mixin switch-input {
-  opacity: 0;
   position: absolute;
   margin-bottom: 0;
+  opacity: 0;
 }
 
 /// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.
 @mixin switch-paddle {
+<<<<<<< HEAD
   $switch-width: $switch-height * 2;
   $paddle-height: $switch-height - ($switch-paddle-offset * 2);
   $paddle-width: $switch-height - ($switch-paddle-offset * 2);
   $paddle-active-offest: $switch-width - $paddle-width - $switch-paddle-offset;
 
-  background: $switch-background;
-  cursor: pointer;
-  display: block;
   position: relative;
+  display: block;
   width: $switch-width;
   height: $switch-height;
-  transition: $switch-paddle-transition;
+
   border-radius: $switch-radius;
+  background: $switch-background;
+  transition: $switch-paddle-transition;
+  cursor: pointer;
 
   // Resetting these <label> presets so type styles cascade down
-  color: inherit;
   font-weight: inherit;
+  color: inherit;
 
   // Needed to override specificity
   input + & {
@@ -105,17 +108,19 @@ $switch-paddle-transition: all 0.25s ease-out !default;
 
   // The paddle itself
   &::after {
-    background: $switch-paddle-background;
-    content: '';
-    display: block;
     position: absolute;
-    width: $paddle-width;
-    height: $paddle-height;
     top: $switch-paddle-offset;
     #{$global-left}: $switch-paddle-offset;
-    transition: $switch-paddle-transition;
+
+    display: block;
+    width: $paddle-width;
+    height: $paddle-height;
+
     transform: translate3d(0, 0, 0);
     border-radius: $switch-paddle-radius;
+    background: $switch-paddle-background;
+    transition: $switch-paddle-transition;
+    content: '';
   }
 
   // Change the visual style when the switch is active
diff --git a/scss/components/_table.scss b/scss/components/_table.scss
index 2f55fa10e..57d26a896 100644
--- a/scss/components/_table.scss
+++ b/scss/components/_table.scss
@@ -81,8 +81,8 @@ $show-header-for-stacked: false !default;
     // If stripe is set to even, darken the even rows.
     @if $stripe == even {
       &:nth-child(even) {
-        background-color: $table-striped-background;
         border-bottom: 0;
+        background-color: $table-striped-background;
       }
     }
 
@@ -97,9 +97,9 @@ $show-header-for-stacked: false !default;
 
 @mixin -zf-table-unstripe() {
   tr {
-    background-color: $table-background;
     border-bottom: 0;
     border-bottom: $table-border;
+    background-color: $table-background;
   }
 }
 
@@ -113,8 +113,8 @@ $show-header-for-stacked: false !default;
 
   // Caption
   caption {
-    font-weight: $global-weight-bold;
     padding: $table-padding;
+    font-weight: $global-weight-bold;
   }
 
   // Table head
diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss
index 1e545ef5f..450cd7ae3 100644
--- a/scss/components/_tabs.scss
+++ b/scss/components/_tabs.scss
@@ -53,17 +53,17 @@ $tab-content-padding: 1rem !default;
 @mixin tabs-container {
   @include clearfix;
   margin: $tab-margin;
-  list-style-type: none;
-  background: $tab-background;
   border: 1px solid $tab-content-border;
+  background: $tab-background;
+  list-style-type: none;
 }
 
 /// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
 @mixin tabs-container-vertical {
   > li {
-    width: auto;
-    float: none;
     display: block;
+    float: none;
+    width: auto;
   }
 }
 
@@ -74,8 +74,8 @@ $tab-content-padding: 1rem !default;
   > a {
     display: block;
     padding: $tab-item-padding;
-    line-height: 1;
     font-size: $tab-item-font-size;
+    line-height: 1;
 
     &:hover {
       background: $tab-item-background-hover;
@@ -90,10 +90,10 @@ $tab-content-padding: 1rem !default;
 
 /// Adds styles for the wrapper that surrounds a tab group's content panes.
 @mixin tabs-content {
-  background: $tab-content-background;
-  transition: all 0.5s ease;
   border: 1px solid $tab-content-border;
   border-top: 0;
+  background: $tab-content-background;
+  transition: all 0.5s ease;
 }
 
 /// Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with `tabs-content()`.
diff --git a/scss/components/_thumbnail.scss b/scss/components/_thumbnail.scss
index 25414a16b..f77b4c740 100644
--- a/scss/components/_thumbnail.scss
+++ b/scss/components/_thumbnail.scss
@@ -32,13 +32,15 @@ $thumbnail-radius: $global-radius !default;
 
 /// Adds thumbnail styles to an element.
 @mixin thumbnail {
-  border: $thumbnail-border;
-  box-shadow: $thumbnail-shadow;
   display: inline-block;
-  line-height: 0;
   max-width: 100%;
-  border-radius: $thumbnail-radius;
   margin-bottom: $thumbnail-margin-bottom;
+
+  border: $thumbnail-border;
+  border-radius: $thumbnail-radius;
+  box-shadow: $thumbnail-shadow;
+
+  line-height: 0;
 }
 
 @mixin thumbnail-link {
diff --git a/scss/components/_title-bar.scss b/scss/components/_title-bar.scss
index fd05be42f..94bd94bec 100644
--- a/scss/components/_title-bar.scss
+++ b/scss/components/_title-bar.scss
@@ -36,14 +36,14 @@ $titlebar-icon-spacing: 0.25rem !default;
 
 @mixin foundation-title-bar {
   .title-bar {
+    padding: $titlebar-padding;
     background: $titlebar-background;
     color: $titlebar-color;
-    padding: $titlebar-padding;
 
     @if $global-flexbox {
       display: flex;
-      align-items: center;
       justify-content: space-between;
+      align-items: center;
     }
     @else {
       @include clearfix;
@@ -78,8 +78,8 @@ $titlebar-icon-spacing: 0.25rem !default;
   }
 
   .title-bar-title {
-    font-weight: $titlebar-text-font-weight;
-    vertical-align: middle;
     display: inline-block;
+    vertical-align: middle;
+    font-weight: $titlebar-text-font-weight;
   }
 }
diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss
index af8b7c7c2..2e4265c47 100644
--- a/scss/components/_tooltip.scss
+++ b/scss/components/_tooltip.scss
@@ -43,28 +43,31 @@ $tooltip-pip-height: $tooltip-pip-width * 0.866 !default;
 $tooltip-radius: $global-radius !default;
 
 @mixin has-tip {
-  border-bottom: $has-tip-border-bottom;
-  font-weight: $has-tip-font-weight;
   position: relative;
   display: inline-block;
+
+  border-bottom: $has-tip-border-bottom;
+  font-weight: $has-tip-font-weight;
   cursor: help;
 }
 
 @mixin tooltip {
-  background-color: $tooltip-background-color;
-  color: $tooltip-color;
-  font-size: $tooltip-font-size;
-  padding: $tooltip-padding;
   position: absolute;
-  z-index: 1200;
   top: calc(100% + #{$tooltip-pip-height});
+  z-index: 1200;
+
   max-width: 10rem !important;
+  padding: $tooltip-padding;
+
   border-radius: $tooltip-radius;
+  background-color: $tooltip-background-color;
+  font-size: $tooltip-font-size;
+  color: $tooltip-color;
 
   &::before {
     @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
-    bottom: 100%;
     position: absolute;
+    bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
   }
@@ -77,18 +80,18 @@ $tooltip-radius: $global-radius !default;
 
   &.left::before {
     @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
+    top: 50%;
     bottom: auto;
     left: 100%;
-    top: 50%;
     transform: translateY(-50%);
   }
 
   &.right::before {
     @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
+    top: 50%;
+    right: 100%;
     bottom: auto;
     left: auto;
-    right: 100%;
-    top: 50%;
     transform: translateY(-50%);
   }
 }
diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
index ddfe00523..affd86932 100644
--- a/scss/components/_top-bar.scss
+++ b/scss/components/_top-bar.scss
@@ -34,9 +34,9 @@ $topbar-unstack-breakpoint: medium !default;
 @mixin top-bar-container {
   @if $global-flexbox {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
     flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
   }
   @else {
     @include clearfix;