Configure scss linting

.sass-lint.yml

@@ -0,0 +1,61 @@
+files:
+  include: 'theme/static/src/scss/**/*.scss'
+
+rules:
+  clean-import-paths: 0
+  extends-before-mixins: 2
+  extends-before-declarations: 2
+  force-attribute-nesting: 0
+  no-css-comments: 0
+  no-debug: 1
+  no-duplicate-properties:
+    - 2
+    -
+      exclude:
+        - src
+        - transform
+  no-ids: 0
+  no-important: 0
+  no-transition-all: 0
+  no-vendor-prefixes: 2
+  no-qualifying-elements: 0
+  no-url-protocols: 0
+  no-warn: 1
+  hex-notation:
+    - 2
+    -
+      style: uppercase
+  indentation:
+    - 2
+    -
+      size: 2
+  variable-name-format:
+    - 2
+    -
+      allow-leading-underscore: false
+      convention: hyphenatedlowercase
+  quotes:
+    - 2
+    -
+      style: double
+  property-sort-order:
+    - 2
+    -
+      order: 'concentric'
+  empty-line-between-blocks: 2
+  space-after-bang: 2
+  space-after-colon: 2
+  space-after-comma: 2
+  space-before-bang: 2
+  space-before-brace: 2
+  space-before-colon: 2
+  space-between-parens: 2
+  trailing-semicolon: 2
+  leading-zero: 0
+  single-line-per-selector: 0
+  force-pseudo-nesting: 0
+  force-element-nesting: 0
+  nesting-depth:
+    - 2
+    -
+      max-depth: 5

package.json

@@ -3,13 +3,14 @@
   "version": "4.0.0",
   "description": " Source code for TheOrangeOne.net",
   "scripts": {
-    "lint": "eslint 'theme/static/src/js/'",
+    "lint-js": "eslint 'theme/static/src/js/'",
+    "lint-scss": "sass-lint -vqc .sass-lint.yml",
     "build": "npm run create-build-dirs && npm run build-fonts && npm run build-js && npm run build-scss",
     "build-js": "./scripts/build-js.sh",
     "build-scss": "bash scripts/build-scss.sh",
     "build-fonts": "cp -R node_modules/bootstrap-sass/assets/fonts/bootstrap/* theme/static/build/fonts/ && cp -R node_modules/font-awesome/fonts theme/static/build/ ",
     "create-build-dirs": "mkdir -p theme/static/build/js/lib theme/static/build/fonts theme/static/build/css theme/static/build/img",
-    "test": "npm run lint",
+    "test": "npm run lint-js && npm run lint-scss",
     "spellcheck": "mdspell --en-gb -ranx \"templates/**/*.*\""
   },
   "repository": {

theme/static/src/scss/creative/creative.scss

@@ -3,25 +3,25 @@
 // Global Components
 html,
 body {
-  height: 100%;
   width: 100%;
+  height: 100%;
   font-family: $font-family-base;
-  -webkit-tap-highlight-color: $brand-grey-dark;
 }
 
 hr {
-  border-color: $brand-orange;
   border-width: 3px;
+  border-color: $brand-orange;
   max-width: 50px;
-}
 
-hr.light {
+  &.light {
-  border-color: white;
+    border-color: $white;
+  }
 }
 
 a {
-  @extend .transition-all;
+  transition: all 0.35s;
   color: $brand-orange;
+
   &:hover,
   &:focus {
     color: $brand-orange-dark;
@@ -33,9 +33,9 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 p {
-  font-size: 16px;
-  line-height: 1.5;
   margin-bottom: 20px;
+  line-height: 1.5;
+  font-size: 16px;
 }
 
 .bg-primary {
@@ -44,11 +44,7 @@ p {
 
 .bg-dark {
   background-color: $brand-grey-dark;
-  color: white;
+  color: $white;
-}
-
-.text-faded {
-  color: opacify(white, 0.7);
 }
 
 section {
@@ -66,36 +62,42 @@ aside {
 // Navigation
 
 .navbar-default {
-  background-color: white;
+  transition: all 0.35s;
   border-color: opacify($brand-grey-dark, 0.05);
+  background-color: $white;
   font-family: $font-family-heading;
-  @extend .transition-all;
+
   .navbar-header .navbar-brand {
+    text-transform: uppercase;
     color: $brand-orange;
     font-family: $font-family-heading;
     font-weight: 700;
-    text-transform: uppercase;
+
     &:hover, &:focus {
       color: darken($brand-orange, 10%);
     }
   }
+
   .nav {
     & > li {
       & > a,
       & > a:focus {
         text-transform: uppercase;
-        font-weight: 700;
-        font-size: 13px;
         color: $brand-grey-dark;
+        font-size: 13px;
+        font-weight: 700;
+
         &:hover {
           color: $brand-orange;
         }
       }
+
       &.active {
         & > a,
         & > a:focus {
-          color: $brand-orange !important;
           background-color: transparent;
+          color: $brand-orange !important;
+
           &:hover {
             background-color: transparent;
           }
@@ -104,34 +106,43 @@ aside {
     }
   }
   @media (min-width: 768px) {
+    border-color: opacify($white, 0.3);
     background-color: transparent;
-    border-color: opacify(white, 0.3);
+
     .navbar-header .navbar-brand {
-      color: opacify(white, 0.7);
+      color: opacify($white, 0.7);
+
       &:hover, &:focus {
-        color: white;
+        color: $white;
       }
     }
+
     .nav > li > a,
     .nav > li > a:focus {
-      color: opacify(white, 0.7);
+      color: opacify($white, 0.7);
+
       &:hover {
-        color: white;
+        color: $white;
       }
     }
+
     &.affix {
-      background-color: white;
       border-color: opacify($brand-grey-dark, 0.05);
+      background-color: $white;
+
       .navbar-header .navbar-brand {
         color: $brand-orange;
         font-size: 14px;
+
         &:hover, &:focus {
           color: darken($brand-orange, 10%);
         }
       }
+
       .nav > li > a,
       .nav > li > a:focus {
         color: $brand-grey-dark;
+
         &:hover {
           color: $brand-orange;
         }
@@ -144,54 +155,59 @@ aside {
 
 header {
   position: relative;
+  background-image: url("../img/header.jpg");
+  background-position: center;
+  background-size: cover;
   width: 100%;
   min-height: auto;
-  @extend .background-cover;
-  background-position: center;
-  background-image: url('../img/header.jpg');
   text-align: center;
-  color: white;
+  color: $white;
+
   .header-content {
     position: relative;
-    text-align: center;
+    padding: 100px 15px;
-    padding: 100px 15px 100px;
     width: 100%;
+    text-align: center;
+
     .header-content-inner {
       h1 {
-        font-weight: 700;
-        text-transform: uppercase;
         margin-top: 0;
         margin-bottom: 0;
+        text-transform: uppercase;
+        font-weight: 700;
       }
+
       hr {
         margin: 30px auto;
       }
+
       p {
-        font-weight: 300;
-        color: opacify(white, 0.7);
-        font-size: 16px;
         margin-bottom: 50px;
+        color: opacify($white, 0.7);
+        font-size: 16px;
+        font-weight: 300;
       }
     }
   }
   @media (min-width: 768px) {
     min-height: 100%;
+
     .header-content {
       position: absolute;
       top: 50%;
-      -webkit-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
       transform: translateY(-50%);
       padding: 0 50px;
+
       .header-content-inner {
+        margin-right: auto;
+        margin-left: auto;
         max-width: 1000px;
-        margin-left: auto;
+
-        margin-right: auto;
         p {
-          font-size: 18px;
-          max-width: 80%;
-          margin-left: auto;
           margin-right: auto;
+          margin-left: auto;
+          max-width: 80%;
+          font-size: 18px;
         }
       }
     }
@@ -205,64 +221,74 @@ header {
 }
 
 .service-box {
-  max-width: 400px;
   margin: 50px auto 0;
+  max-width: 400px;
+
   @media (min-width: 992px) {
     margin: 20px auto 0;
   }
+
   p {
     margin-bottom: 0;
   }
 }
 
 .portfolio-box {
+  display: block;
   position: relative;
-  display: block;
-  max-width: 650px;
   margin: 0 auto;
+  max-width: 650px;
+
   .portfolio-box-caption {
-    color: white;
-    opacity: 0;
     display: block;
-    background: opacify($brand-orange, 0.9);
     position: absolute;
     bottom: 0;
-    text-align: center;
+    transition: all 0.35s;
+    opacity: 0;
+    background: opacify($brand-orange, 0.9);
     width: 100%;
     height: 100%;
-    @extend .transition-all;
-    .portfolio-box-caption-content {
-      width: 100%;
     text-align: center;
+    color: $white;
+
+    .portfolio-box-caption-content {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
+      width: 100%;
+      text-align: center;
+
       .project-category,
       .project-name {
-        font-family: $font-family-heading;
         padding: 0 15px;
+        font-family: $font-family-heading;
       }
+
       .project-category {
         text-transform: uppercase;
-        font-weight: 600;
         font-size: 14px;
+        font-weight: 600;
       }
+
       .project-name {
         font-size: 18px;
       }
     }
   }
+
   &:hover {
     .portfolio-box-caption {
       opacity: 1;
     }
   }
+
   @media (min-width: 768px) {
     .portfolio-box-caption {
       .portfolio-box-caption-content {
         .project-category {
           font-size: 16px;
         }
+
         .project-name {
           font-size: 22px;
         }
@@ -279,25 +305,25 @@ header {
   color: $brand-orange;
 }
 
-.no-gutter > [class*='col-'] {
+.no-gutter > [class*="col-"] {
   padding-right: 0;
   padding-left: 0;
 }
 
 .btn-default {
-  @include button-variant($brand-grey-dark, white, white);
+  @include button-variant($brand-grey-dark, $white, $white);
 }
 
 .btn-primary {
-  @include button-variant(white, $brand-orange, $brand-orange);
+  @include button-variant($white, $brand-orange, $brand-orange);
 }
 
 .btn {
-  font-family: $font-family-heading;
+  border: 0;
-  border: none;
   border-radius: 300px;
-  font-weight: 700;
   text-transform: uppercase;
+  font-family: $font-family-heading;
+  font-weight: 700;
 }
 
 .btn-xl {
@@ -306,13 +332,13 @@ header {
 
 // Extras
 // -- Highlight Color Customization
-::-moz-selection, ::selection {
+::selection {
-  color: white;
-  text-shadow: none;
   background: $brand-grey-dark;
+  text-shadow: none;
+  color: $white;
 }
 
-img::selection, img::-moz-selection {
+img::selection {
-  color: white;
   background: transparent;
+  color: $white;
 }

theme/static/src/scss/creative/mixins.scss

@@ -1,23 +1,9 @@
 // Mixins
 
-.transition-all {
-    -webkit-transition: all 0.35s;
-    -moz-transition: all 0.35s;
-    transition: all 0.35s;
-}
-
-.background-cover {
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    background-size: cover;
-    -o-background-size: cover;
-}
-
 @mixin button-variant($color, $background, $border) {
-	color: $color;
-	background-color: $background;
   border-color: $border;
-	@extend .transition-all;
+  background-color: $background;
+  color: $color;
 
   &:hover,
   &:focus,
@@ -25,15 +11,17 @@
   &:active,
   &.active,
   .open > .dropdown-toggle & {
-		color: $color;
-		background-color: darken($background, 5%);
     border-color: darken($border, 7%);
+    background-color: darken($background, 5%);
+    color: $color;
   }
+
   &:active,
   &.active,
   .open > .dropdown-toggle & {
     background-image: none;
   }
+
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
@@ -43,13 +31,13 @@
     &.focus,
     &:active,
     &.active {
-			background-color: $background;
       border-color: $border;
+      background-color: $background;
     }
   }
 
   .badge {
-		color: $background;
     background-color: $color;
+    color: $background;
   }
 }

theme/static/src/scss/homepage.scss

@@ -3,6 +3,6 @@
 */
 
 .portfolio-box {
-  min-height: 300px;
   background-color: $brand-grey-dark;
+  min-height: 300px;
 }

theme/static/src/scss/index.scss

@@ -1,7 +1,7 @@
 /* @group Fonts */
 
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300,300italic,400italic,700italic);
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,700,300,300italic,400italic,700italic");
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,300italic,400italic,700italic);
+@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,300italic,400italic,700italic");
 
 /* @end Fonts */
 

theme/static/src/scss/variables.scss

@@ -1,13 +1,15 @@
-$brand-orange: #f05f40;
+$brand-orange: #F05F40;
 $brand-orange-dark: darken($brand-orange, 10%);
 $brand-grey-dark: #333;
 
+$white: #FFF;
 
-$font-family-heading: 'Open Sans','Helvetica Neue',Arial,sans-serif;
+
+$font-family-heading: "Open Sans", "Helvetica Neue", Arial, sans-serif;
 
 /* @group Bootstrap Overrides */
 
-$font-family-base: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+$font-family-base: "Roboto", "Helvetica Neue", Arial, sans-serif;
 $brand-primary: $brand-orange;
 
 /* @end Bootstrap Overrides */