Configure scss linting
This commit is contained in:
parent
b61537480f
commit
f16768bf4d
7 changed files with 204 additions and 126 deletions
61
.sass-lint.yml
Normal file
61
.sass-lint.yml
Normal file
|
|
@ -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
|
||||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 1000px;
|
||||
|
||||
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 {
|
||||
position: relative;
|
||||
display: block;
|
||||
max-width: 650px;
|
||||
position: relative;
|
||||
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;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
|
||||
.portfolio-box-caption-content {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +1,43 @@
|
|||
// 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;
|
||||
border-color: $border;
|
||||
background-color: $background;
|
||||
color: $color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle & {
|
||||
color: $color;
|
||||
background-color: darken($background, 5%);
|
||||
border-color: darken($border, 7%);
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle & {
|
||||
background-image: none;
|
||||
}
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle & {
|
||||
border-color: darken($border, 7%);
|
||||
background-color: darken($background, 5%);
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: $background;
|
||||
background-color: $color;
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle & {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
border-color: $border;
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: $color;
|
||||
color: $background;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
*/
|
||||
|
||||
.portfolio-box {
|
||||
min-height: 300px;
|
||||
background-color: $brand-grey-dark;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
Reference in a new issue