Verified Commit e2bccef6 authored by Elias Häußler's avatar Elias Häußler 🐛

[FEATURE] Include Sass lint and update SCSS code style

parent 2eaf5daf
files:
include: '**/*.s+(a|c)ss'
options:
formatter: stylish
merge-default-rules: false
rules:
bem-depth:
- 2
-
max-depth: 1
border-zero:
- 1
-
convention: '0'
brace-style:
- 1
-
allow-single-line: false
class-name-format:
- 1
-
allow-leading-underscore: false
convention: hyphenatedbem
clean-import-paths:
- 2
-
leading-underscore: false
filename-extension: false
declarations-before-nesting: 1
force-attribute-nesting: 0
force-element-nesting: 0
force-pseudo-nesting: 0
function-name-format:
- 1
-
convention: hyphenatedlowercase
hex-notation:
- 1
-
style: lowercase
indentation:
- 2
-
size: 2
leading-zero: 0
mixin-name-format:
- 1
-
convention: hyphenatedlowercase
mixins-before-declarations:
- 1
-
exclude: ['breakpoint', 'mq']
nesting-depth:
- 2
-
max-depth: 3
no-color-keywords: 1
no-debug: 2
no-extends: 2
no-ids: 1
no-important: 2
no-invalid-hex: 1
no-misspelled-properties: 1
no-qualifying-elements: 0
no-trailing-whitespace: 0
no-trailing-zero: 2
no-transition-all: 2
no-universal-selectors: 2
no-vendor-prefixes: 1
no-warn: 0
one-declaration-per-line: 1
property-sort-order:
- 1
-
order: concentric
property-units:
- 1
-
global: ['em', 'px', 'rem', '%']
pseudo-element: 1
quotes:
- 1
-
style: double
single-line-per-selector: 1
variable-name-format:
- 1
-
allow-leading-underscore: false
convention: hyphenatedlowercase
......@@ -2,6 +2,7 @@
* Copyright (c) 2018 Elias Häußler <mail@elias-haeussler.de> (www.elias-haeussler.de).
*/
// jshint node: true
'use strict';
import plugins from 'gulp-load-plugins';
......@@ -63,6 +64,18 @@ const PRODUCTION = !!(yargs.argv.production);
// Load all Gulp plugins
const $ = plugins();
/**
* SCSS Lint task
* @returns {*}
*/
let sass_lint = () =>
{
return gulp.src(PATHS.sass.all)
.pipe($.sassLint())
.pipe($.sassLint.format())
.pipe($.sassLint.failOnError());
};
/**
* Compile Sass
* @returns {*}
......@@ -92,7 +105,7 @@ let sass = () =>
* JavaScript Lint task
* @returns {*}
*/
let lint = () =>
let js_lint = () =>
{
return gulp.src(PATHS.javascript.all)
.pipe($.jshint())
......@@ -170,21 +183,18 @@ let reload = done =>
let watch = () =>
{
gulp.watch(PATHS.data, gulp.series(copy, reload));
gulp.watch(PATHS.javascript.all, gulp.series(lint, javascript, reload));
gulp.watch(PATHS.sass.all, gulp.series(sass, reload));
gulp.watch(PATHS.javascript.all, gulp.series(js_lint, javascript, reload));
gulp.watch(PATHS.sass.all, gulp.series(sass_lint, sass, reload));
gulp.watch(PATHS.pages, gulp.series(pages, reload));
};
/**
* Build the dist folder
*/
let build = gulp.series(clean, gulp.parallel(copy, lint, sass, javascript, pages));
let build = gulp.series(clean, gulp.parallel(copy, sass_lint, sass, js_lint, javascript, pages));
// Default Task
gulp.task('default', !PRODUCTION
? gulp.series(build, server, watch)
: gulp.series(build)
);
gulp.task('default', !PRODUCTION ? gulp.series(build, server, watch) : gulp.series(build));
// Server Task
gulp.task('serve', server);
......
......@@ -3,27 +3,29 @@
*/
// Reset CSS
// sass-lint:disable clean-import-paths
// noinspection CssUnknownTarget (source path included by Gulp)
@import '_reset.scss';
@import "_reset";
// sass-lint:enable clean-import-paths
// Helpers
@import 'modules/functions';
@import 'modules/mixins';
@import 'modules/device';
@import "modules/functions";
@import "modules/mixins";
@import "modules/device";
// Variables
@import 'modules/variables';
@import "modules/variables";
// Partials
@import 'partials/general';
@import 'partials/code';
@import 'partials/device-notice';
@import 'partials/input';
@import 'partials/link';
@import 'partials/page';
@import 'partials/spinner';
@import 'partials/visualization';
@import "partials/general";
@import "partials/code";
@import "partials/device-notice";
@import "partials/input";
@import "partials/link";
@import "partials/page";
@import "partials/spinner";
@import "partials/visualization";
// Third party modules
// noinspection CssUnknownTarget (source path included by Gulp)
@import 'spinners/3-wave';
@import "spinners/3-wave";
......@@ -8,8 +8,8 @@ $breakpoints: (
large: 1440
);
@mixin breakpoint($configuration)
{
@mixin breakpoint($configuration) {
// Get breakpoint and direction (default direction is "up")
$direction: up;
$breakpoint: null;
......
......@@ -14,8 +14,8 @@ $dark-gray: #333;
$error-color: #ffd3b6;
// Font
$font-family-sans-serif: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-family-monospace: 'Inconsolata', monotype, monospace;
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-monospace: "Inconsolata", monotype, monospace;
$font-weight-bold: 700;
// Transition
......
......@@ -3,6 +3,6 @@
*/
code {
font-family: $font-family-monospace;
color: $code-color;
font-family: $font-family-monospace;
}
......@@ -3,18 +3,18 @@
*/
.device-notice {
.device-notice-confirmed & {
display: none !important;
}
display: none;
position: fixed;
top: 0;
left: 0;
z-index: z(device-notice);
background: $device-notice-background;
width: 100%;
height: 100%;
background: $device-notice-background;
z-index: z(device-notice);
.device-notice-confirmed & {
display: none;
}
@include breakpoint($device-notice-breakpoint down) {
display: initial;
......@@ -27,9 +27,9 @@
left: 2em;
transform: translateY(-50%);
background: $device-notice-message-background;
color: $device-notice-message-color;
padding: $device-notice-message-padding;
line-height: $device-notice-message-line-height;
color: $device-notice-message-color;
user-select: none;
p {
......@@ -43,11 +43,11 @@
&__confirm {
display: inline-block;
background: $device-notice-confirm-background;
color: $device-notice-confirm-color;
transition: background $transition;
border-radius: $device-notice-confirm-border-radius;
background: $device-notice-confirm-background;
padding: $device-notice-confirm-padding;
transition: background $transition;
color: $device-notice-confirm-color;
&:hover,
&:active,
......
......@@ -2,13 +2,10 @@
* Copyright (c) 2018 Elias Häußler <mail@elias-haeussler.de> (www.elias-haeussler.de).
*/
* {
outline: none;
}
body {
font-family: $font-family-sans-serif;
outline: none;
background: $white;
font-family: $font-family-sans-serif;
}
strong {
......@@ -19,8 +16,8 @@ strong {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: z(fullscreen);
background: $white;
width: 100%;
height: 100%;
}
......@@ -4,23 +4,23 @@
button,
select {
font-family: $font-family-sans-serif;
font-size: $input-font-size;
background: $input-background;
padding: $input-padding;
border: $input-border;
border-radius: $input-border-radius;
border-bottom: {
width: 1px;
style: dotted;
}
border-radius: $input-border-radius;
background: $input-background;
cursor: pointer;
padding: $input-padding;
font-family: $font-family-sans-serif;
font-size: $input-font-size;
}
button {
transition: color $transition, text-shadow $transition;
border-bottom-color: $button-border-color;
color: $button-color;
transition: color $transition, text-shadow $transition;
&:hover,
&:active,
......@@ -35,9 +35,9 @@ button {
}
select {
appearance: none;
transition: background $transition, box-shadow $transition;
margin: 0 0.2em;
border-bottom-color: $select-border-color;
appearance: none;
text-align-last: $select-text-align;
transition: background $transition, box-shadow $transition;
}
......@@ -3,9 +3,9 @@
*/
a {
transition: color $transition;
text-decoration: none;
color: $link-color;
transition: color $transition;
&:hover,
&:active,
......
......@@ -3,53 +3,53 @@
*/
.page {
margin: 2em 0;
border-top: 1px solid $page-border-color;
border-bottom: 1px solid $page-border-color;
padding: 2em 0;
margin: 2em 0;
}
&-wrapper {
padding: 2em;
}
.page-wrapper {
padding: 2em;
}
&-header {
margin-bottom: 2em;
.page-header {
margin-bottom: 2em;
h1 {
font-weight: $page-header-title-font-weight;
font-size: $page-header-title-font-size;
line-height: $page-header-title-line-height;
margin-bottom: 1em;
}
h1 {
margin-bottom: 1em;
line-height: $page-header-title-line-height;
font-size: $page-header-title-font-size;
font-weight: $page-header-title-font-weight;
}
div.error {
background: $error-color;
padding: 1em;
border-radius: 3px;
}
div.error {
border-radius: 3px;
background: $error-color;
padding: 1em;
}
p,
ol {
line-height: 1.7;
p,
ol {
line-height: 1.7;
&:not(:first-child) {
margin-top: 1em;
}
&:not(:first-child) {
margin-top: 1em;
}
}
ol {
list-style: $page-header-list-style;
padding: 1em;
ol {
padding: 1em;
list-style: $page-header-list-style;
li {
padding-left: 5px;
}
li {
padding-left: 5px;
}
}
}
&-footer {
margin-top: 2em;
color: $page-footer-color;
font-size: $page-footer-font-size;
}
.page-footer {
margin-top: 2em;
color: $page-footer-color;
font-size: $page-footer-font-size;
}
......@@ -25,8 +25,8 @@
}
&__controls {
text-align: center;
margin-bottom: 1em;
text-align: center;
}
&__map,
......@@ -46,9 +46,9 @@
}
svg {
transition: visibility $transition, opacity $transition;
visibility: hidden;
opacity: 0;
transition: visibility $transition, opacity $transition;
}
.chart {
......@@ -69,18 +69,14 @@
path,
line {
shape-rendering: crispEdges;
}
path,
line {
fill: $chart-axis-background;
stroke: $chart-axis-color;
}
}
&__text {
fill: $chart-text-color;
font-size: 1em;
fill: $chart-text-color;
&--active {
fill: $chart-text-color-active;
......@@ -103,10 +99,10 @@
}
&__dot {
z-index: z(chart__dot);
fill: $chart-dot-background;
stroke: $chart-dot-border-color;
stroke-width: $chart-dot-border-width;
z-index: z(chart__dot);
&--active {
fill: $chart-dot-background-active;
......@@ -119,24 +115,24 @@
.map {
&__tooltip {
position: absolute;
transform: translate(-50%, -100%);
z-index: z(map__tooltip);
background: $map-tooltip-background;
border-radius: $map-tooltip-border-radius;
background: $map-tooltip-background;
padding: 0.7em 1em;
text-align: center;
color: $map-tooltip-color;
font-size: 0.7em;
text-align: center;
padding: 0.7em 1em;
transform: translate(-50%, -100%);
div {
font-size: 1.3em;
margin-bottom: 0.5em;
font-size: 1.3em;
}
}
&__path {
stroke: $map-path-color;
cursor: $map-path-cursor;
stroke: $map-path-color;
&:hover {
fill-opacity: $map-path-opacity-hover;
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment