Improve SASS coding with Hound CI results, and change Hound CI configs.

26 files changed, 60 insertions, 32 deletions

diff --git a/src/_autocomplete.scss b/src/_autocomplete.scss
index f3544fc..0101493 100644
--- a/src/_autocomplete.scss
+++ b/src/_autocomplete.scss
@@ -11,8 +11,8 @@
     padding: $unit-h;
 
     &.is-focused {
-      border-color: $primary-color;
       @include control-shadow();
+      border-color: $primary-color;
     }
 
     .form-input {
diff --git a/src/_buttons.scss b/src/_buttons.scss
index a8232f5..0c9540d 100644
--- a/src/_buttons.scss
+++ b/src/_buttons.scss
@@ -1,11 +1,11 @@
 // Buttons
 .btn {
+  @include control-transition();
   appearance: none;
   background: $bg-color-light;
   border: $border-width solid $primary-color;
   border-radius: $border-radius;
   color: $primary-color;
-  @include control-transition();
   cursor: pointer;
   display: inline-block;
   font-size: $font-size;
diff --git a/src/_calendars.scss b/src/_calendars.scss
index bfa8739..05606dd 100644
--- a/src/_calendars.scss
+++ b/src/_calendars.scss
@@ -45,12 +45,12 @@
     padding: $unit-1;
 
     .date-item {
+      @include control-transition();
       appearance: none;
       background: transparent;
       border: $border-width solid transparent;
       border-radius: 50%;
       color: $gray-color-dark;
-      @include control-transition();
       cursor: pointer;
       height: $unit-7;
       line-height: $unit-5;
diff --git a/src/_cards.scss b/src/_cards.scss
index bb82579..3ecdc0a 100644
--- a/src/_cards.scss
+++ b/src/_cards.scss
@@ -36,4 +36,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/_codes.scss b/src/_codes.scss
index 753fdad..3d2cc10 100644
--- a/src/_codes.scss
+++ b/src/_codes.scss
@@ -1,8 +1,8 @@
 // Codes
 code {
-  font-size: .65rem;
   @include label-base();
   @include label-variant($code-color, lighten($code-color, 33%));
+  font-size: .65rem;
 }
 
 .code {
diff --git a/src/_forms.scss b/src/_forms.scss
index b407d3c..58e958b 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -31,13 +31,13 @@ legend {
 
 // Form element: Input
 .form-input {
+  @include control-transition();
   appearance: none;
   background: $bg-color-light;
   background-image: none;
   border: $border-width solid $border-color-dark;
   border-radius: $border-radius;
   color: $body-font-color;
-  @include control-transition();
   display: block;
   font-size: $font-size;
   height: $control-size;
@@ -48,8 +48,8 @@ legend {
   position: relative;
   width: 100%;
   &:focus {
-    border-color: $primary-color;
     @include control-shadow();
+    border-color: $primary-color;
   }
   &::placeholder {
     color: $gray-color;
@@ -129,8 +129,8 @@ textarea.form-input {
     padding-right: $control-icon-size + $control-padding-h;
   }
   &:focus {
-    border-color: $primary-color;
     @include control-shadow();
+    border-color: $primary-color;
   }
   &::-ms-expand {
     display: none;
@@ -202,8 +202,8 @@ textarea.form-input {
     position: absolute;
     width: 1px;
     &:focus + .form-icon {
-      border-color: $primary-color;
       @include control-shadow();
+      border-color: $primary-color;
     }
     &:checked + .form-icon {
       background: $primary-color;
@@ -212,8 +212,8 @@ textarea.form-input {
   }
 
   .form-icon {
-    border: $border-width solid $border-color-dark;
     @include control-transition();
+    border: $border-width solid $border-color-dark;
     cursor: pointer;
     display: inline-block;
     position: absolute;
@@ -312,6 +312,7 @@ textarea.form-input {
     top: ($control-size-sm - $unit-4) / 2 - $border-width;
     width: $unit-8;
     &::before {
+      @include control-transition();
       background: $bg-color-light;
       border-radius: $unit-2;
       content: "";
@@ -320,7 +321,6 @@ textarea.form-input {
       left: 0;
       position: absolute;
       top: 0;
-      @include control-transition();
       width: $unit-4;
     }
   }
@@ -436,8 +436,8 @@ textarea.form-input {
       }
 
       &:focus + .form-icon {
-        border-color: $error-color;
         @include control-shadow($error-color);
+        border-color: $error-color;
       }
     }
   }
diff --git a/src/_labels.scss b/src/_labels.scss
index 629e350..271c6f0 100644
--- a/src/_labels.scss
+++ b/src/_labels.scss
@@ -1,8 +1,8 @@
 // Labels
 .label {
-  display: inline-block;
   @include label-base();
   @include label-variant(lighten($body-font-color, 5%), $bg-color);
+  display: inline-block;
 
   &.label-rounded {
     border-radius: 5rem;
diff --git a/src/_media.scss b/src/_media.scss
index 68c5934..9b6aa1d 100644
--- a/src/_media.scss
+++ b/src/_media.scss
@@ -67,4 +67,4 @@
     color: $gray-color-dark;
     margin-top: $layout-spacing;
   }
-}
\ No newline at end of file
+}
diff --git a/src/_menus.scss b/src/_menus.scss
index 234e4bb..bec6afc 100644
--- a/src/_menus.scss
+++ b/src/_menus.scss
@@ -1,12 +1,12 @@
 // Menus
 .menu {
+  @include shadow-variant(.05rem);
   background: $bg-color-light;
   border-radius: $border-radius;
   list-style: none;
   margin: 0;
   min-width: $control-min-width;
   padding: $unit-2;
-  @include shadow-variant(.05rem);
   transform: translateY($layout-spacing-sm);
   z-index: $zindex-1;
 
diff --git a/src/_mixins.scss b/src/_mixins.scss
index d98411a..93788d2 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -183,4 +183,4 @@
 @mixin toast-variant($color: $dark-color) {
   background: rgba($color, .9);
   border-color: $color;
-}
\ No newline at end of file
+}
diff --git a/src/_modals.scss b/src/_modals.scss
index daf7cab..21d6ed8 100644
--- a/src/_modals.scss
+++ b/src/_modals.scss
@@ -44,11 +44,11 @@
 }
 
 .modal-container {
+  @include shadow-variant(.2rem);
   background: $bg-color-light;
   border-radius: $border-radius;
   display: block;
   padding: 0;
-  @include shadow-variant(.2rem);
   text-align: left;
 
   .modal-header {
diff --git a/src/_parallax.scss b/src/_parallax.scss
index 00897bf..0a737a8 100644
--- a/src/_parallax.scss
+++ b/src/_parallax.scss
@@ -20,8 +20,8 @@ $parallax-scale: .95;
   width: auto;
 
   .parallax-content {
-    height: auto;
     @include shadow-variant(1rem);
+    height: auto;
     transform: perspective($parallax-perspective);
     transform-style: preserve-3d;
     transition: all .4s ease;
diff --git a/src/_popovers.scss b/src/_popovers.scss
index eee2fc9..6a9a2e5 100644
--- a/src/_popovers.scss
+++ b/src/_popovers.scss
@@ -64,7 +64,7 @@
   }
 
   .card {
-    border: 0;
     @include shadow-variant(.2rem);
+    border: 0;
   }
 }
diff --git a/src/_tiles.scss b/src/_tiles.scss
index 384d150..742bbae 100644
--- a/src/_tiles.scss
+++ b/src/_tiles.scss
@@ -31,8 +31,8 @@
 
     .tile-title,
     .tile-subtitle {
-      margin-bottom: 0;
       @include text-ellipsis();
+      margin-bottom: 0;
     }
   }
 }
diff --git a/src/_toasts.scss b/src/_toasts.scss
index f113e1d..937361c 100644
--- a/src/_toasts.scss
+++ b/src/_toasts.scss
@@ -1,11 +1,11 @@
 // Toasts
 .toast {
+  @include toast-variant($dark-color);
   border: $border-width solid $dark-color;
   border-radius: $border-radius;
   color: $light-color;
   display: block;
   padding: $layout-spacing;
-  @include toast-variant($dark-color);
   width: 100%;
 
   &.toast-primary {
diff --git a/src/_typography.scss b/src/_typography.scss
index 76191f0..17b7f7c 100644
--- a/src/_typography.scss
+++ b/src/_typography.scss
@@ -65,14 +65,14 @@ abbr[title] {
 }
 
 kbd {
-  font-size: .65rem;
   @include label-base();
   @include label-variant($light-color, $dark-color);
+  font-size: .65rem;
 }
 
 mark {
-  border-radius: $border-radius;
   @include label-variant($body-font-color, $highlight-color);
+  border-radius: $border-radius;
   padding: .05rem;
 }
 
diff --git a/src/_utilities.scss b/src/_utilities.scss
index 10b7b00..49846ff 100644
--- a/src/_utilities.scss
+++ b/src/_utilities.scss
@@ -5,4 +5,4 @@
 @import 'utilities/loading';
 @import 'utilities/position';
 @import 'utilities/shapes';
-@import 'utilities/text';
\ No newline at end of file
+@import 'utilities/text';
diff --git a/src/_variables.scss b/src/_variables.scss
index b4349e4..15f2903 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -100,4 +100,4 @@ $zindex-0: 1;
 $zindex-1: 100;
 $zindex-2: 200;
 $zindex-3: 300;
-$zindex-4: 400;
\ No newline at end of file
+$zindex-4: 400;
diff --git a/src/spectre.scss b/src/spectre.scss
index 6d33550..2942147 100644
--- a/src/spectre.scss
+++ b/src/spectre.scss
@@ -1,5 +1,4 @@
 /*! Spectre.css | MIT License | github.com/picturepan2/spectre */
-
 // Core variables and mixins
 @import "variables";
 @import "mixins";
diff --git a/src/utilities/_colors.scss b/src/utilities/_colors.scss
index 767c353..eced5ad 100644
--- a/src/utilities/_colors.scss
+++ b/src/utilities/_colors.scss
@@ -26,4 +26,4 @@
 
 @include bg-color-variant(".bg-warning", $warning-color);
 
-@include bg-color-variant(".bg-error", $error-color);
\ No newline at end of file
+@include bg-color-variant(".bg-error", $error-color);
diff --git a/src/utilities/_cursors.scss b/src/utilities/_cursors.scss
index a50ae09..bfc4c6b 100644
--- a/src/utilities/_cursors.scss
+++ b/src/utilities/_cursors.scss
@@ -2,18 +2,23 @@
 .c-hand {
   cursor: pointer;
 }
+
 .c-move {
   cursor: move;
 }
+
 .c-zoom-in {
   cursor: zoom-in;
 }
+
 .c-zoom-out {
   cursor: zoom-out;
 }
+
 .c-not-allowed {
   cursor: not-allowed;
 }
+
 .c-auto {
   cursor: auto;
-}
\ No newline at end of file
+}
diff --git a/src/utilities/_display.scss b/src/utilities/_display.scss
index 8297e95..c6248e0 100644
--- a/src/utilities/_display.scss
+++ b/src/utilities/_display.scss
@@ -41,4 +41,4 @@
   padding: 0;
   position: absolute;
   width: 1px;
-}
\ No newline at end of file
+}
diff --git a/src/utilities/_loading.scss b/src/utilities/_loading.scss
index c0cdb1e..1b4ea60 100644
--- a/src/utilities/_loading.scss
+++ b/src/utilities/_loading.scss
@@ -26,9 +26,9 @@
     min-height: $unit-10;
     &::after {
       height: $unit-8;
-      width: $unit-8;
       margin-left: -$unit-4;
       margin-top: -$unit-4;
+      width: $unit-8;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/utilities/_position.scss b/src/utilities/_position.scss
index 548368f..1f4c5e8 100644
--- a/src/utilities/_position.scss
+++ b/src/utilities/_position.scss
@@ -2,9 +2,11 @@
 .clearfix {
   @include clearfix();
 }
+
 .float-left {
   float: left !important;
 }
+
 .float-right {
   float: right !important;
 }
@@ -12,12 +14,15 @@
 .relative {
   position: relative;
 }
+
 .absolute {
   position: absolute;
 }
+
 .fixed {
   position: fixed;
 }
+
 .centered {
   display: block;
   float: none;
@@ -27,9 +32,13 @@
 
 // Spacing
 @include margin-variant(0, 0);
+
 @include margin-variant(1, $unit-1);
+
 @include margin-variant(2, $unit-2);
 
 @include padding-variant(0, 0);
+
 @include padding-variant(1, $unit-1);
-@include padding-variant(2, $unit-2);
\ No newline at end of file
+
+@include padding-variant(2, $unit-2);
diff --git a/src/utilities/_shapes.scss b/src/utilities/_shapes.scss
index ab6585b..c11d5df 100644
--- a/src/utilities/_shapes.scss
+++ b/src/utilities/_shapes.scss
@@ -2,6 +2,7 @@
 .rounded {
   border-radius: $border-radius;
 }
+
 .circle {
   border-radius: 50%;
 }
diff --git a/src/utilities/_text.scss b/src/utilities/_text.scss
index a1e0980..67793ac 100644
--- a/src/utilities/_text.scss
+++ b/src/utilities/_text.scss
@@ -1,48 +1,62 @@
 // Text
+// Text alignment utilities
 .text-left {
   text-align: left;
 }
+
 .text-right {
   text-align: right;
 }
+
 .text-center {
   text-align: center;
 }
+
 .text-justify {
   text-align: justify;
 }
 
+// Text transform utilities
 .text-lowercase {
   text-transform: lowercase;
 }
+
 .text-uppercase {
   text-transform: uppercase;
 }
+
 .text-capitalize {
   text-transform: capitalize;
 }
 
+// Text style utilities
 .text-normal {
   font-weight: normal;
 }
+
 .text-bold {
   font-weight: bold;
 }
+
 .text-italic {
   font-style: italic;
 }
+
 .text-large {
   font-size: 1.2em;
 }
 
+// Text overflow utilities
 .text-ellipsis {
   @include text-ellipsis();
 }
+
 .text-clip {
   overflow: hidden;
   text-overflow: clip;
   white-space: nowrap;
 }
+
 .text-break {
   hyphens: auto;
   word-break: break-word;