Configure scss linting

2016-05-17 13:46:23 +01:00 · 2016-05-17 13:46:23 +01:00 · f16768bf4d
commit f16768bf4d
parent b61537480f
7 changed files with 204 additions and 126 deletions
--- a/.sass-lint.yml
+++ b/.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
--- a/package.json
+++ b/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": {
--- a/theme/static/src/scss/creative/creative.scss
+++ b/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 {
-  border-color: white;
+  &.light {
+    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;
-}
-
-.text-faded {
-  color: opacify(white, 0.7);
+  color: $white;
 }

 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 100px;
+    padding: 100px 15px;
    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-'] {
-  padding-right:0;
-  padding-left:0;
+.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: none;
+  border: 0;
  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 {
-  color: white;
-  text-shadow: none;
+::selection {
  background: $brand-grey-dark;
+  text-shadow: none;
+  color: $white;
 }

-img::selection, img::-moz-selection {
-  color: white;
+img::selection {
  background: transparent;
+  color: $white;
 }
--- a/theme/static/src/scss/creative/mixins.scss
+++ b/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;
  }
 }
--- a/theme/static/src/scss/homepage.scss
+++ b/theme/static/src/scss/homepage.scss
@ -3,6 +3,6 @@
 */

 .portfolio-box {
-  min-height: 300px;
  background-color: $brand-grey-dark;
+  min-height: 300px;
 }
--- a/theme/static/src/scss/index.scss
+++ b/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(http://fonts.googleapis.com/css?family=Open+Sans: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");

 /* @end Fonts */

--- a/theme/static/src/scss/variables.scss
+++ b/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 */