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

Sass lint: Sort forms properties

Sort form properties following the Specific property sort order.

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

diff --git a/scss/forms/_checkbox.scss b/scss/forms/_checkbox.scss
index 0c388cd3c..60e8bfc14 100644
--- a/scss/forms/_checkbox.scss
+++ b/scss/forms/_checkbox.scss
@@ -17,10 +17,11 @@
   [type='checkbox'] + label,
   [type='radio'] + label {
     display: inline-block;
+    vertical-align: baseline;
+
     margin-#{$global-left}: $form-spacing * 0.5;
     margin-#{$global-right}: $form-spacing;
     margin-bottom: 0;
-    vertical-align: baseline;
 
     &[for] {
       cursor: pointer;
diff --git a/scss/forms/_error.scss b/scss/forms/_error.scss
index 792182d4a..84ba398ce 100644
--- a/scss/forms/_error.scss
+++ b/scss/forms/_error.scss
@@ -43,8 +43,8 @@ $input-error-font-weight: $global-weight-bold !default;
   $background-alpha: 0.1
 ) {
   &:not(:focus) {
-    background-color: rgba($background, $background-alpha);
     border-color: $background;
+    background-color: rgba($background, $background-alpha);
   }
 }
 
@@ -53,6 +53,7 @@ $input-error-font-weight: $global-weight-bold !default;
   display: none;
   margin-top: $form-spacing * -0.5;
   margin-bottom: $form-spacing;
+
   font-size: $input-error-font-size;
   font-weight: $input-error-font-weight;
   color: $input-error-color;
diff --git a/scss/forms/_fieldset.scss b/scss/forms/_fieldset.scss
index 875706d2c..8ba4c83dc 100644
--- a/scss/forms/_fieldset.scss
+++ b/scss/forms/_fieldset.scss
@@ -23,29 +23,29 @@ $fieldset-margin: rem-calc(18 0) !default;
 $legend-padding: rem-calc(0 3) !default;
 
 @mixin fieldset {
-  border: $fieldset-border;
-  padding: $fieldset-padding;
   margin: $fieldset-margin;
+  padding: $fieldset-padding;
+  border: $fieldset-border;
 
   legend {
     // Covers up the fieldset's border to create artificial padding
-    background: $body-background;
-    padding: $legend-padding;
     margin: 0;
     margin-#{$global-left}: rem-calc(-3);
+    padding: $legend-padding;
+    background: $body-background;
   }
 }
 
 @mixin foundation-form-fieldset {
   fieldset {
-    border: 0;
-    padding: 0;
     margin: 0;
+    padding: 0;
+    border: 0;
   }
 
   legend {
-    margin-bottom: $form-spacing * 0.5;
     max-width: 100%;
+    margin-bottom: $form-spacing * 0.5;
   }
 
   .fieldset {
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index a7c7b1ad1..1e32da5e9 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -56,16 +56,17 @@ $input-prefix-padding: 1rem !default;
 
   .input-group-label {
     @extend %input-group-child;
-    text-align: center;
     padding: 0 $input-prefix-padding;
+    border: $input-prefix-border;
     background: $input-prefix-background;
+
     color: $input-prefix-color;
-    border: $input-prefix-border;
+    text-align: center;
     white-space: nowrap;
 
     @if $global-flexbox {
-      flex: 0 0 auto;
       display: flex;
+      flex: 0 0 auto;
       align-items: center;
     }
     @else {
@@ -108,8 +109,8 @@ $input-prefix-padding: 1rem !default;
       flex: 0 0 auto;
     }
     @else {
-      height: 100%;
       width: 1%;
+      height: 100%;
     }
 
     a,
@@ -117,10 +118,11 @@ $input-prefix-padding: 1rem !default;
     button,
     label {
       @extend %input-group-child;
-      font-size: $input-font-size;
       height: $height;
       padding-top: 0;
       padding-bottom: 0;
+
+      font-size: $input-font-size;
     }
   }
 
diff --git a/scss/forms/_label.scss b/scss/forms/_label.scss
index ef44a5284..1c388519d 100644
--- a/scss/forms/_label.scss
+++ b/scss/forms/_label.scss
@@ -25,6 +25,7 @@ $form-label-line-height: 1.8 !default;
 @mixin form-label {
   display: block;
   margin: 0;
+
   font-size: $form-label-font-size;
   font-weight: $form-label-font-weight;
   line-height: $form-label-line-height;
@@ -33,6 +34,7 @@ $form-label-line-height: 1.8 !default;
 
 @mixin form-label-middle {
   $input-border-width: get-border-value($input-border, width);
+
   margin: 0 0 $form-spacing;
   padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0;
 }
diff --git a/scss/forms/_meter.scss b/scss/forms/_meter.scss
index 10cf985fb..0969c91d3 100644
--- a/scss/forms/_meter.scss
+++ b/scss/forms/_meter.scss
@@ -32,30 +32,30 @@ $meter-fill-bad: $alert-color !default;
 
 @mixin foundation-meter-element {
   meter {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     display: block;
     width: 100%;
     height: $meter-height;
     margin-bottom: 1rem;
 
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
     @if has-value($meter-radius) {
       border-radius: $meter-radius;
     }
 
     // For Firefox
-    background: $meter-background;
     border: 0;
+    background: $meter-background;
 
     // Chrome/Safari/Edge
     &::-webkit-meter-bar {
-      background: $meter-background;
-
+      border: 0;
       @if has-value($meter-radius) {
         border-radius: $meter-radius;
       }
-      
-      border: 0;
+
+      background: $meter-background;
     }
 
     &::-webkit-meter-inner-element {
diff --git a/scss/forms/_progress.scss b/scss/forms/_progress.scss
index d157a33aa..b48b81e5e 100644
--- a/scss/forms/_progress.scss
+++ b/scss/forms/_progress.scss
@@ -28,20 +28,21 @@ $progress-radius: $global-radius !default;
 
 @mixin foundation-progress-element {
   progress {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     display: block;
     width: 100%;
     height: $progress-height;
     margin-bottom: $progress-margin-bottom;
 
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
     @if hasvalue($progress-radius) {
       border-radius: $progress-radius;
     }
 
     // For Firefox
-    background: $progress-background;
     border: 0;
+    background: $progress-background;
 
     &::-webkit-progress-bar {
       background: $progress-background;
diff --git a/scss/forms/_range.scss b/scss/forms/_range.scss
index 9524458be..14fc64997 100644
--- a/scss/forms/_range.scss
+++ b/scss/forms/_range.scss
@@ -43,16 +43,18 @@ $slider-radius: $global-radius !default;
   input[type="range"] {
     $margin: ($slider-handle-height - $slider-height) / 2;
 
-    -webkit-appearance: none;
-    -moz-appearance: none;
     display: block;
     width: 100%;
     height: auto;
-    cursor: pointer;
     margin-top: $margin;
     margin-bottom: $margin;
+
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
     border: 0;
     line-height: 1;
+    cursor: pointer;
 
     @if has-value($slider-radius) {
       border-radius: $slider-radius;
@@ -73,12 +75,13 @@ $slider-radius: $global-radius !default;
     }
 
     &::-webkit-slider-handle {
-      -webkit-appearance: none;
-      background: $slider-handle-background;
       width: $slider-handle-width;
       height: $slider-handle-height;
       margin-top: -$margin;
 
+      -webkit-appearance: none;
+      background: $slider-handle-background;
+
       @if has-value($slider-radius) {
         border-radius: $slider-radius;
       }
@@ -86,18 +89,19 @@ $slider-radius: $global-radius !default;
 
     // Firefox
     &::-moz-range-track {
-      -moz-appearance: none;
       height: $slider-height;
+      -moz-appearance: none;
       background: $slider-background;
     }
 
     &::-moz-range-thumb {
-      -moz-appearance: none;
-      background: $slider-handle-background;
       width: $slider-handle-width;
       height: $slider-handle-height;
       margin-top: -$margin;
 
+      -moz-appearance: none;
+      background: $slider-handle-background;
+
       @if has-value($slider-radius) {
         border-radius: $slider-radius;
       }
@@ -106,19 +110,21 @@ $slider-radius: $global-radius !default;
     // Internet Explorer
     &::-ms-track {
       height: $slider-height;
-      background: $slider-background;
-      color: transparent;
+
       border: 0;
-      overflow: visible;
       border-top: $margin solid $body-background;
       border-bottom: $margin solid $body-background;
+      background: $slider-background;
+
+      overflow: visible;
+      color: transparent;
     }
 
     &::-ms-thumb {
-      background: $slider-handle-background;
       width: $slider-handle-width;
       height: $slider-handle-height;
       border: 0;
+      background: $slider-handle-background;
 
       @if has-value($slider-radius) {
         border-radius: $slider-radius;
@@ -135,9 +141,9 @@ $slider-radius: $global-radius !default;
 
     @at-root {
       output {
-        line-height: $slider-handle-height;
         vertical-align: middle;
         margin-left: 0.5em;
+        line-height: $slider-handle-height;
       }
     }
   }
diff --git a/scss/forms/_select.scss b/scss/forms/_select.scss
index afb9bd18f..985d7324d 100644
--- a/scss/forms/_select.scss
+++ b/scss/forms/_select.scss
@@ -22,24 +22,27 @@ $select-radius: $global-radius !default;
   $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
 
   height: $height;
+  margin: 0 0 $form-spacing;
   padding: ($form-spacing / 2);
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
   border: $input-border;
-  margin: 0 0 $form-spacing;
-  font-size: $input-font-size;
+  border-radius: $select-radius;
+  background-color: $select-background;
+
   font-family: $input-font-family;
+  font-size: $input-font-size;
   line-height: normal;
   color: $input-color;
-  background-color: $select-background;
-  border-radius: $select-radius;
-  -webkit-appearance: none;
-  -moz-appearance: none;
 
   @if $select-triangle-color != transparent {
     @include background-triangle($select-triangle-color);
-    background-size: 9px 6px;
-    background-position: $global-right (-$form-spacing) center;
     background-origin: content-box;
+    background-position: $global-right (-$form-spacing) center;
     background-repeat: no-repeat;
+    background-size: 9px 6px;
+
     padding-#{$global-right}: ($form-spacing * 1.5);
   }
 
@@ -49,9 +52,9 @@ $select-radius: $global-radius !default;
 
   // Focus state
   &:focus {
+    outline: none;
     border: $input-border-focus;
     background-color: $input-background-focus;
-    outline: none;
     box-shadow: $input-shadow-focus;
 
     @if has-value($input-transition) {
diff --git a/scss/forms/_text.scss b/scss/forms/_text.scss
index 93fd4fb68..56a04f2ee 100644
--- a/scss/forms/_text.scss
+++ b/scss/forms/_text.scss
@@ -81,17 +81,18 @@ $form-button-radius: $global-radius !default;
   box-sizing: border-box;
   width: 100%;
   height: $height;
+  margin: 0 0 $form-spacing;
   padding: $form-spacing / 2;
+
   border: $input-border;
-  margin: 0 0 $form-spacing;
+  border-radius: $input-radius;
+  background-color: $input-background;
+  box-shadow: $input-shadow;
 
   font-family: $input-font-family;
   font-size: $input-font-size;
   font-weight: $input-font-weight;
   color: $input-color;
-  background-color: $input-background;
-  box-shadow: $input-shadow;
-  border-radius: $input-radius;
 
   @if has-value($input-transition) {
     transition: $input-transition;
@@ -99,9 +100,9 @@ $form-button-radius: $global-radius !default;
 
   // Focus state
   &:focus {
+    outline: none;
     border: $input-border-focus;
     background-color: $input-background-focus;
-    outline: none;
     box-shadow: $input-shadow-focus;
 
     @if has-value($input-transition) {
@@ -146,9 +147,9 @@ $form-button-radius: $global-radius !default;
   // Reset styles on button-like inputs
   [type='submit'],
   [type='button'] {
-    border-radius: $form-button-radius;
     -webkit-appearance: none;
     -moz-appearance: none;
+    border-radius: $form-button-radius;
   }
 
   // Reset Normalize setting content-box to search elements