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

renegat59 · Sep 1, 2017 · 01ab183 · 01ab183
1 parent 30cf502
commit 01ab183
Show file tree

Hide file tree

Showing 36 changed files with 96 additions and 49 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 /dist/
 node_modules/
 .*
+!.csscomb.json
 !.gitignore
 !.gitattributes
-!.csscomb.json
+!.hound.yml
diff --git a/.hound.yml b/.hound.yml
@@ -0,0 +1,2 @@
+scss:
+  config_file: .scss-lint.yml
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### [v0.4.0](https://github.com/picturepan2/spectre/releases/tag/v0.4.0)
 
 - Switch from LESS to SASS
+- Add Cursor utilities
 
 ### [v0.3.2](https://github.com/picturepan2/spectre/releases/tag/v0.3.2)
 

diff --git a/docs/components.html b/docs/components.html
@@ -181,6 +181,9 @@ <h2>Spectre.css</h2>
                   <li class="menu-item">
                     <a href="utilities.html#colors">Colors</a>
                   </li>
+                  <li class="menu-item">
+                    <a href="utilities.html#cursors">Cursors</a>
+                  </li>
                   <li class="menu-item">
                     <a href="utilities.html#display">Display</a>
                   </li>

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -379,8 +379,8 @@ abbr[title] {
 kbd {
   background: #454d5d;
   border-radius: .1rem;
-  color: #fff; 
-  font-size: .65rem;
+  color: #fff;
+  font-size: .65rem; 
   line-height: 1;
   padding: .15rem;
 }
@@ -767,7 +767,7 @@ legend {
 }
 
 .form-input:focus {
-  border-color: #5764c6;
+  border-color: #5764c6; 
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
 }
 
@@ -857,7 +857,7 @@ textarea.form-input {
 }
 
 .form-select:focus {
-  border-color: #5764c6;
+  border-color: #5764c6; 
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
 }
 
@@ -931,7 +931,7 @@ textarea.form-input {
 .form-checkbox input:focus + .form-icon,
 .form-radio input:focus + .form-icon,
 .form-switch input:focus + .form-icon {
-  border-color: #5764c6;
+  border-color: #5764c6; 
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
 }
 
@@ -1182,7 +1182,7 @@ textarea.form-input {
 .form-radio.is-error input:focus + .form-icon,
 .has-error .form-switch input:focus + .form-icon,
 .form-switch.is-error input:focus + .form-icon {
-  border-color: #e85600;
+  border-color: #e85600; 
   box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2);
 }
 
@@ -1241,8 +1241,8 @@ input.disabled + .form-icon {
 .label {
   background: #f8f9fa;
   border-radius: .1rem;
-  color: #5b657a; 
-  display: inline-block;
+  color: #5b657a;
+  display: inline-block; 
   line-height: 1;
   padding: .15rem;
 }
@@ -1281,8 +1281,8 @@ input.disabled + .form-icon {
 code {
   background: #fdf4f4;
   border-radius: .1rem;
-  color: #e06870; 
-  font-size: .65rem;
+  color: #e06870;
+  font-size: .65rem; 
   line-height: 1;
   padding: .15rem;
 }
@@ -1911,7 +1911,7 @@ code {
 }
 
 .form-autocomplete .form-autocomplete-input.is-focused {
-  border-color: #5764c6;
+  border-color: #5764c6; 
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
 }
 
@@ -2623,7 +2623,7 @@ code {
 }
 
 .popover .card {
-  border: 0;
+  border: 0; 
   box-shadow: 0 .2rem .5rem rgba(69, 77, 93, .3);
 }
 
@@ -2798,7 +2798,7 @@ code {
 
 .tile.tile-centered .tile-title,
 .tile.tile-centered .tile-subtitle {
-  margin-bottom: 0;
+  margin-bottom: 0; 
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3195,7 +3195,7 @@ a.text-error:hover {
 .loading.loading-lg::after {
   height: 1.6rem;
   margin-left: -.8rem;
-  margin-top: -.8rem; 
+  margin-top: -.8rem;
   width: 1.6rem;
 }
 

diff --git a/docs/elements.html b/docs/elements.html
@@ -181,6 +181,9 @@ <h2>Spectre.css</h2>
                   <li class="menu-item">
                     <a href="utilities.html#colors">Colors</a>
                   </li>
+                  <li class="menu-item">
+                    <a href="utilities.html#cursors">Cursors</a>
+                  </li>
                   <li class="menu-item">
                     <a href="utilities.html#display">Display</a>
                   </li>

diff --git a/docs/experimentals.html b/docs/experimentals.html
@@ -182,6 +182,9 @@ <h2>Spectre.css</h2>
                   <li class="menu-item">
                     <a href="utilities.html#colors">Colors</a>
                   </li>
+                  <li class="menu-item">
+                    <a href="utilities.html#cursors">Cursors</a>
+                  </li>
                   <li class="menu-item">
                     <a href="utilities.html#display">Display</a>
                   </li>

diff --git a/docs/getting-started.html b/docs/getting-started.html
@@ -181,6 +181,9 @@ <h2>Spectre.css</h2>
                   <li class="menu-item">
                     <a href="utilities.html#colors">Colors</a>
                   </li>
+                  <li class="menu-item">
+                    <a href="utilities.html#cursors">Cursors</a>
+                  </li>
                   <li class="menu-item">
                     <a href="utilities.html#display">Display</a>
                   </li>

diff --git a/docs/layout.html b/docs/layout.html
@@ -181,6 +181,9 @@ <h2>Spectre.css</h2>
                   <li class="menu-item">
                     <a href="utilities.html#colors">Colors</a>
                   </li>
+                  <li class="menu-item">
+                    <a href="utilities.html#cursors">Cursors</a>
+                  </li>
                   <li class="menu-item">
                     <a href="utilities.html#display">Display</a>
                   </li>

diff --git a/docs/utilities.html b/docs/utilities.html
@@ -329,9 +329,9 @@ <h4 id="colors-background" class="s-subtitle">Background colors</h4>
         </div>
 
         <div id="cursors" class="container">
-          <h3 class="s-title"><a href="#cursors" class="anchor" aria-hidden="true">#</a>Cursors utilities</h3>
+          <h3 class="s-title"><a href="#cursors" class="anchor" aria-hidden="true">#</a>Cursor utilities</h3>
           <div class="docs-note">
-            <p>Cursors utilities specify which mouse cursor to display when mouseover.</p>
+            <p>Cursor utilities specify which mouse cursor to display when mouseover.</p>
           </div>
           <div class="columns">
             <div class="column">

diff --git 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
@@ -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
@@ -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
@@ -36,4 +36,4 @@
       }
     }
   }
-}
+}
diff --git 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
@@ -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
@@ -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
@@ -67,4 +67,4 @@
     color: $gray-color-dark;
     margin-top: $layout-spacing;
   }
-}
+}
diff --git 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
@@ -183,4 +183,4 @@
 @mixin toast-variant($color: $dark-color) {
   background: rgba($color, .9);
   border-color: $color;
-}
+}
diff --git 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
@@ -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
@@ -64,7 +64,7 @@
   }
 
   .card {
-    border: 0;
     @include shadow-variant(.2rem);
+    border: 0;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,4 +36,4 @@ @@
           }
         }
       }
-    }
+    }