Updated to gulp 4.x and removed use of chroma-sass for colours, it is not updated anymore.
This commit is contained in:
Fredrik Jonsson
parent
73795756ac
commit
83ce4e0cc2
22 changed files with 2674 additions and 3508 deletions
108
gulpfile.js
108
gulpfile.js
|
|
@ -52,65 +52,41 @@ options.gulpWatchOptions = {interval: 600};
|
|||
// options.gulpWatchOptions = {interval: 1000, mode: 'poll'};
|
||||
|
||||
|
||||
// ################################
|
||||
// Load Gulp and tools we will use.
|
||||
// ################################
|
||||
var gulp = require('gulp'),
|
||||
$ = require('gulp-load-plugins')(),
|
||||
del = require('del'),
|
||||
// gulp-load-plugins will report "undefined" error unless you load gulp-sass manually.
|
||||
sass = require('gulp-sass'),
|
||||
kss = require('kss'),
|
||||
cleanCSS = require('gulp-clean-css');
|
||||
|
||||
// The default task.
|
||||
gulp.task('default', ['build']);
|
||||
|
||||
// #################
|
||||
// Build everything.
|
||||
// #################
|
||||
gulp.task('build', ['styles:production', 'lint']);
|
||||
|
||||
// ##########
|
||||
// Build CSS.
|
||||
// ##########
|
||||
// The sass files to process.
|
||||
var sassFiles = [
|
||||
options.theme.sass + '**/*.scss',
|
||||
// Do not open Sass partials as they will be included as needed.
|
||||
'!' + options.theme.sass + '**/_*.scss'
|
||||
];
|
||||
|
||||
gulp.task('styles', ['clean:css'], function() {
|
||||
return gulp.src(sassFiles)
|
||||
.pipe($.sourcemaps.init())
|
||||
.pipe(sass(options.sass).on('error', sass.logError))
|
||||
.pipe($.size({showFiles: true}))
|
||||
.pipe($.sourcemaps.write('./'))
|
||||
.pipe(gulp.dest(options.theme.css))
|
||||
// Clean CSS files.
|
||||
gulp.task('clean:css', function clean () {
|
||||
return del([
|
||||
options.theme.css + '**/*.css',
|
||||
options.theme.css + '**/*.map'
|
||||
], {force: true});
|
||||
});
|
||||
|
||||
gulp.task('styles:production', ['clean:css'], function() {
|
||||
return gulp.src(sassFiles)
|
||||
.pipe(sass(options.sass).on('error', sass.logError))
|
||||
.pipe($.size({showFiles: true}))
|
||||
.pipe(cleanCSS({compatibility: 'ie10'}))
|
||||
.pipe(gulp.dest(options.theme.css));
|
||||
});
|
||||
|
||||
// #########################
|
||||
// Lint Sass and JavaScript.
|
||||
// #########################
|
||||
gulp.task('lint', ['lint:sass', 'lint:js']);
|
||||
// Clean all directories.
|
||||
gulp.task('clean', gulp.series('clean:css'));
|
||||
|
||||
// Lint JavaScript.
|
||||
gulp.task('lint:js', function() {
|
||||
gulp.task('lint:js', function lint () {
|
||||
return gulp.src(options.eslint.files)
|
||||
.pipe($.eslint())
|
||||
.pipe($.eslint.format());
|
||||
});
|
||||
|
||||
// Lint JavaScript and throw an error for a CI to catch.
|
||||
gulp.task('lint:js-with-fail', function() {
|
||||
gulp.task('lint:js-with-fail', function lint () {
|
||||
return gulp.src(options.eslint.files)
|
||||
.pipe($.eslint())
|
||||
.pipe($.eslint.format())
|
||||
|
|
@ -118,49 +94,61 @@ gulp.task('lint:js-with-fail', function() {
|
|||
});
|
||||
|
||||
// Lint Sass.
|
||||
gulp.task('lint:sass', function() {
|
||||
gulp.task('lint:sass', function lint () {
|
||||
return gulp.src(options.theme.sass + '**/*.scss')
|
||||
.pipe($.sassLint())
|
||||
.pipe($.sassLint.format());
|
||||
});
|
||||
|
||||
// Lint Sass and throw an error for a CI to catch.
|
||||
gulp.task('lint:sass-with-fail', function() {
|
||||
gulp.task('lint:sass-with-fail', function lint () {
|
||||
return gulp.src(options.theme.sass + '**/*.scss')
|
||||
.pipe($.sassLint())
|
||||
.pipe($.sassLint.format())
|
||||
.pipe($.sassLint.failOnError());
|
||||
});
|
||||
|
||||
// ##############################
|
||||
// Lint Sass and JavaScript.
|
||||
gulp.task('lint', gulp.parallel('lint:sass', 'lint:js'));
|
||||
|
||||
// Build CSS.
|
||||
gulp.task('styles', gulp.series('clean:css', function css () {
|
||||
return gulp.src(sassFiles)
|
||||
.pipe($.sourcemaps.init())
|
||||
.pipe(sass(options.sass).on('error', sass.logError))
|
||||
.pipe($.size({showFiles: true}))
|
||||
.pipe($.sourcemaps.write('./'))
|
||||
.pipe(gulp.dest(options.theme.css));
|
||||
}));
|
||||
|
||||
gulp.task('styles:production', gulp.series('clean:css', function css () {
|
||||
return gulp.src(sassFiles)
|
||||
.pipe(sass(options.sass).on('error', sass.logError))
|
||||
.pipe($.size({showFiles: true}))
|
||||
.pipe(cleanCSS())
|
||||
.pipe(gulp.dest(options.theme.css));
|
||||
}));
|
||||
|
||||
// Watch for changes and rebuild.
|
||||
// ##############################
|
||||
gulp.task('watch', ['watch:css', 'watch:lint', 'watch:js']);
|
||||
gulp.task('watch:css', gulp.series('styles', function watch () {
|
||||
return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, gulp.series('styles'));
|
||||
}));
|
||||
|
||||
gulp.task('watch:css', ['styles'], function() {
|
||||
return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, ['styles']);
|
||||
});
|
||||
gulp.task('watch:lint', gulp.series('lint:sass', function watch () {
|
||||
return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, gulp.series('lint:sass'));
|
||||
}));
|
||||
|
||||
gulp.task('watch:lint', ['lint:sass'], function() {
|
||||
return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, ['lint:sass']);
|
||||
});
|
||||
gulp.task('watch:js', gulp.series('lint:js', function watch () {
|
||||
return gulp.watch(options.eslint.files, options.gulpWatchOptions, gulp.series('lint:js'));
|
||||
}));
|
||||
|
||||
gulp.task('watch:js', ['lint:js'], function() {
|
||||
return gulp.watch(options.eslint.files, options.gulpWatchOptions, ['lint:js']);
|
||||
});
|
||||
gulp.task('watch', gulp.parallel('watch:css', 'watch:lint', 'watch:js'));
|
||||
|
||||
// ######################
|
||||
// Clean all directories.
|
||||
// ######################
|
||||
gulp.task('clean', ['clean:css']);
|
||||
// Build everything.
|
||||
gulp.task('build', gulp.parallel('styles:production', 'lint'));
|
||||
|
||||
// Clean CSS files.
|
||||
gulp.task('clean:css', function() {
|
||||
return del([
|
||||
options.theme.css + '**/*.css',
|
||||
options.theme.css + '**/*.map'
|
||||
], {force: true});
|
||||
});
|
||||
// The default task.
|
||||
gulp.task('default', gulp.series('build'));
|
||||
|
||||
|
||||
// Resources used to create this gulpfile.js:
|
||||
|
|
|
|||
5728
package-lock.json
generated
5728
package-lock.json
generated
File diff suppressed because it is too large
Load diff
12
package.json
12
package.json
|
|
@ -14,22 +14,20 @@
|
|||
"license": "GPL-2.0",
|
||||
"devDependencies": {
|
||||
"breakpoint-sass": "^2.7.1",
|
||||
"chroma-sass": "^1.2.6",
|
||||
"del": "^3.0.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-clean-css": "^3.9.3",
|
||||
"gulp-eslint": "^4.0.2",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-clean-css": "^3.10.0",
|
||||
"gulp-eslint": "^5.0.0",
|
||||
"gulp-load-plugins": "^1.5.0",
|
||||
"gulp-sass": "^4.0.1",
|
||||
"gulp-sass-lint": "^1.3.4",
|
||||
"gulp-sass-lint": "^1.4.0",
|
||||
"gulp-size": "^3.0.0",
|
||||
"gulp-sourcemaps": "^2.6.4",
|
||||
"kss": "^3.0.0-beta.19",
|
||||
"node-sass-import-once": "^1.2.0",
|
||||
"typey": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=7.0.0"
|
||||
"node": ">=9.0.0"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// sass-lint:disable no-css-comments, no-color-hex, no-color-literals
|
||||
|
||||
// Site custom styles
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
// The following Sass functions/mixins are required to generate some variables'
|
||||
// values, so we load them first.
|
||||
@import 'breakpoint';
|
||||
@import 'chroma/functions';
|
||||
|
||||
@import 'init/colors';
|
||||
@import 'init/variables';
|
||||
|
|
@ -28,16 +27,12 @@
|
|||
//
|
||||
// The following sass modules are shared with all .scss files:
|
||||
// - [Breakpoint](http://breakpoint-sass.com/)
|
||||
// - [Chroma](https://github.com/JohnAlbin/chroma)
|
||||
// - [Typey](https://github.com/jptaranto/typey)
|
||||
//
|
||||
// Additional pre-built libraries can be found on the [Sache website](http://www.sache.in/).
|
||||
//
|
||||
// Style guide: sass.modules
|
||||
|
||||
// Add Chroma to manage colors.
|
||||
@import 'chroma';
|
||||
@import 'chroma/kss';
|
||||
// Add typey to manage font sizes and margins.
|
||||
@import 'typey';
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ pre {
|
|||
// Page
|
||||
|
||||
body {
|
||||
background-color: color(backdrop);
|
||||
background-color: $backdrop;
|
||||
}
|
||||
|
||||
.page {
|
||||
background-color: color(body-bg);
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
@ -27,7 +27,7 @@ body {
|
|||
@include margin-top(1.5);
|
||||
@include padding(.5 0);
|
||||
text-align: center;
|
||||
border-top: 2px solid color(brand);
|
||||
border-top: 2px solid $brand;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
|
@ -72,7 +72,7 @@ article > header,
|
|||
.header,
|
||||
.footer {
|
||||
@include typeface(headings);
|
||||
color: color(headings);
|
||||
color: $headings;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ aside {
|
|||
article {
|
||||
|
||||
& > header {
|
||||
color: color('text-meta');
|
||||
color: $text-meta;
|
||||
|
||||
p {
|
||||
@include margin(.2 0);
|
||||
|
|
@ -136,11 +136,11 @@ article {
|
|||
}
|
||||
|
||||
pre {
|
||||
color: color(code);
|
||||
color: $code;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
border: 1px solid color(border);
|
||||
background-color: color(text-bg);
|
||||
border: 1px solid $border;
|
||||
background-color: $text-bg;
|
||||
overflow: auto;
|
||||
max-height: 250px;
|
||||
max-width: 90vw;
|
||||
|
|
@ -156,7 +156,7 @@ article {
|
|||
}
|
||||
|
||||
.content-dates {
|
||||
color: color('text-meta');
|
||||
color: $text-meta;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -223,19 +223,19 @@ figcaption {
|
|||
|
||||
a {
|
||||
display: block;
|
||||
background-color: color(brand);
|
||||
color: color(text-bg);
|
||||
background-color: $brand;
|
||||
color: $text-bg;
|
||||
padding: 2px 8px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: color(brand-dark);
|
||||
background-color: $brand-dark;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: color(brand);
|
||||
background-color: $brand;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -254,21 +254,21 @@ figcaption {
|
|||
width: 95%;
|
||||
|
||||
&.status {
|
||||
background-color: color(status-bg);
|
||||
color: color(status);
|
||||
border-color: color(status);
|
||||
background-color: $status-bg;
|
||||
color: $status;
|
||||
border-color: $status;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: color(warning-bg);
|
||||
color: color(warning);
|
||||
border-color: color(warning);
|
||||
background-color: $warning-bg;
|
||||
color: $warning;
|
||||
border-color: $warning;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: color(error-bg);
|
||||
color: color(error);
|
||||
border-color: color(error);
|
||||
background-color: $error-bg;
|
||||
color: $error;
|
||||
border-color: $error;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -311,16 +311,16 @@ figcaption {
|
|||
|
||||
&:required+span::after {
|
||||
content: ' *';
|
||||
color: color('red');
|
||||
color: $red;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&:not(:placeholder-shown):valid {
|
||||
background-color: color(status-bg);
|
||||
background-color: $status-bg;
|
||||
}
|
||||
|
||||
&:not(:placeholder-shown):invalid {
|
||||
background-color: color(error-bg);
|
||||
background-color: $error-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -333,11 +333,11 @@ figcaption {
|
|||
input,
|
||||
textarea {
|
||||
&:valid {
|
||||
background-color: color(status-bg);
|
||||
background-color: $status-bg;
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
background-color: color(error-bg);
|
||||
background-color: $error-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ input {
|
|||
fieldset {
|
||||
// Correct the padding in Firefox.
|
||||
@include padding(.35 .5 .65);
|
||||
border: 1px solid color(border);
|
||||
border: 1px solid $border;
|
||||
}
|
||||
|
||||
legend {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
a,
|
||||
%link {
|
||||
color: color(link);
|
||||
color: $link;
|
||||
// sass-lint:disable no-vendor-prefixes
|
||||
// Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
-webkit-text-decoration-skip: objects;
|
||||
|
|
@ -23,16 +23,16 @@ a,
|
|||
// safely lower this selector's specificity. This also ensures visited links
|
||||
// with additional styles won't have their styles overridden.
|
||||
:visited {
|
||||
color: color(link-visited);
|
||||
color: $link-visited;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: color(link-hover);
|
||||
color: $link-hover;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: color(link-active);
|
||||
color: $link-active;
|
||||
|
||||
&:not(.button) {
|
||||
// Remove the gray background on active links in IE 10.
|
||||
|
|
|
|||
|
|
@ -110,8 +110,8 @@ ins {
|
|||
|
||||
mark {
|
||||
// Add the correct background and color in IE 9-.
|
||||
background-color: color(mark-bg);
|
||||
color: color(text);
|
||||
background-color: $mark-bg;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
// Quote
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
.box,
|
||||
%box {
|
||||
@include margin-bottom(1);
|
||||
border: 5px solid color(border);
|
||||
border: 5px solid $border;
|
||||
padding: 1em;
|
||||
|
||||
// Sass compiles this to the selector: .box__title, %box__title {}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
&:hover,
|
||||
&.is-focus,
|
||||
&--is-focus {
|
||||
border-color: color(text);
|
||||
border-color: $text;
|
||||
}
|
||||
|
||||
// Sass compiles this to the selector: .box--highlight, %box--highlight {}
|
||||
|
|
@ -52,6 +52,6 @@
|
|||
// the "highlight" is a _modifier_, creating a new variation of the standard
|
||||
// "box" component.
|
||||
&--highlight {
|
||||
border-color: color(link);
|
||||
border-color: $link;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ button,
|
|||
text-decoration: none;
|
||||
// Improve usability and consistency of cursor style between image-type `input` and others.
|
||||
cursor: pointer;
|
||||
color: color(button);
|
||||
color: $button;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(#f6f6f6, #e2e2e2);
|
||||
border: 1px solid #e4e4e4;
|
||||
|
|
@ -72,14 +72,14 @@ button,
|
|||
&:active {
|
||||
// Override any link underlines and color changes.
|
||||
text-decoration: none;
|
||||
color: color(button);
|
||||
color: $button;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: #555;
|
||||
text-shadow: color(button) 0 -1px 0;
|
||||
background: color(grey-dark);
|
||||
color: color(text-bg);
|
||||
text-shadow: $button 0 -1px 0;
|
||||
background: $grey-dark;
|
||||
color: $text-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -96,9 +96,9 @@ button,
|
|||
%button--disabled[disabled] {
|
||||
// Re-set default cursor for disabled elements.
|
||||
cursor: default;
|
||||
color: color(button-disabled);
|
||||
background-color: color(grey-extra-light);
|
||||
border-color: color(grey-extra-light);
|
||||
color: $button-disabled;
|
||||
background-color: $grey-extra-light;
|
||||
border-color: $grey-extra-light;
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
|
||||
|
|
@ -106,6 +106,6 @@ button,
|
|||
&:focus,
|
||||
&:active {
|
||||
// Override any link underlines and color changes.
|
||||
color: color(button-disabled);
|
||||
color: $button-disabled;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
%divider {
|
||||
@include margin(1 0);
|
||||
border: 0;
|
||||
border-top: 1px solid color(border);
|
||||
border-top: 1px solid $border;
|
||||
|
||||
// If used as a container, add a top margin to the first child.
|
||||
> :first-child {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
&__site-link {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: color(text);
|
||||
color: $text;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
.highlight-mark,
|
||||
%highlight-mark {
|
||||
color: color(mark-highlight);
|
||||
color: $mark-highlight;
|
||||
// Remove background highlighting from <mark> in normalize.
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
.inverted-box,
|
||||
%inverted-box {
|
||||
@include padding(.5);
|
||||
background: color(brand);
|
||||
color: color(text-bg);
|
||||
background: $brand;
|
||||
color: $text-bg;
|
||||
border-radius: 5px;
|
||||
|
||||
:link,
|
||||
:visited {
|
||||
color: color(text-bg);
|
||||
color: $text-bg;
|
||||
}
|
||||
|
||||
p,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
overflow: visible;
|
||||
// Remove background highlighting from <mark> in normalize.
|
||||
background-color: transparent;
|
||||
color: color(watermark);
|
||||
color: $watermark;
|
||||
font-size: 75px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ $with-wireframes: false !default;
|
|||
|
||||
.wireframe,
|
||||
%wireframe {
|
||||
outline: 1px solid color(border);
|
||||
outline: 1px solid $border;
|
||||
}
|
||||
|
||||
//
|
||||
|
|
|
|||
|
|
@ -1,88 +1,73 @@
|
|||
// sass-lint:disable indentation, no-color-keywords, no-color-hex
|
||||
// sass-lint:disable no-color-keywords; no-color-hex
|
||||
|
||||
// Colors
|
||||
//
|
||||
// Use the `color()` function to add colors to CSS properties. To learn more,
|
||||
// [read the Chroma documentation](http://johnalbin.github.io/chroma/).
|
||||
// Base colors.
|
||||
$black: #000;
|
||||
$nearblack: lighten($black, 20%); // #333
|
||||
$grey-dark: lighten($black, 40%); // #666
|
||||
$grey: lighten($black, 60%); // #999
|
||||
$grey-light: lighten($black, 80%); // #ccc
|
||||
$grey-extra-light: lighten($black, 93.33%); // #eee
|
||||
$white: #fff;
|
||||
|
||||
// Define the default color scheme's color names.
|
||||
$chroma: define-default-color-scheme('branding', 'The site\'s main colors. Can be used to define colors in other color schemes.');
|
||||
$blue: #0072b9;
|
||||
$red: #c00;
|
||||
$green: #43a808;
|
||||
$yellow: #fd0;
|
||||
|
||||
$chroma: add-colors((
|
||||
black: #000,
|
||||
nearblack: ('black' lighten 20%), // #333
|
||||
grey-dark: ('black' lighten 40%), // #666
|
||||
'grey': ('black' lighten 60%), // #999
|
||||
grey-light: ('black' lighten 80%), // #ccc
|
||||
grey-extra-light: ('black' lighten 93.33%), // #eee
|
||||
white: #fff,
|
||||
// Colors used in the main content area.
|
||||
$brand: $nearblack;
|
||||
$brand-alt: $grey;
|
||||
$brand-dark: $grey-dark;
|
||||
$text: $black;
|
||||
$text-bg: $white;
|
||||
$text-meta: $grey-dark;
|
||||
|
||||
blue: #0072b9,
|
||||
red: #c00,
|
||||
green: #43a808,
|
||||
yellow: #fd0,
|
||||
));
|
||||
$link: $black;
|
||||
$link-visited: $black;
|
||||
$link-hover: $brand;
|
||||
$link-active: $red;
|
||||
|
||||
// Define color names for functional uses.
|
||||
$chroma: define-color-scheme('functional', 'Colors used by functional parts of the design.');
|
||||
$chroma: add-colors('functional', (
|
||||
// Colors used in the main content area.
|
||||
brand: 'nearblack',
|
||||
brand-alt: 'grey',
|
||||
brand-dark: 'grey-dark',
|
||||
text: 'black',
|
||||
text-bg: 'white',
|
||||
text-meta: 'grey-dark',
|
||||
$border: $grey-light;
|
||||
$border-dark: $nearblack;
|
||||
|
||||
link: 'black',
|
||||
link-visited: 'black',
|
||||
link-hover: 'brand',
|
||||
link-active: 'red',
|
||||
$autocomplete: $text;
|
||||
$autocomplete-bg: $text-bg;
|
||||
$autocomplete-select: $white;
|
||||
$autocomplete-select-bg: $blue;
|
||||
|
||||
border: 'grey-light',
|
||||
border-dark: 'nearblack',
|
||||
$body-bg: $white;
|
||||
$header-bg: $brand;
|
||||
$backdrop: $grey-extra-light;
|
||||
|
||||
autocomplete: 'text',
|
||||
autocomplete-bg: 'text-bg',
|
||||
autocomplete-select: 'white',
|
||||
autocomplete-select-bg: 'blue',
|
||||
$mobile-menu: $header-bg;
|
||||
$mobile-menu-cover: rgba($black, .2);
|
||||
|
||||
body-bg: 'white',
|
||||
header-bg: 'brand',
|
||||
backdrop: 'grey-extra-light',
|
||||
$button: $nearblack;
|
||||
$button-disabled: $grey;
|
||||
|
||||
mobile-menu: 'header-bg',
|
||||
mobile-menu-cover: ('black' rgba .2),
|
||||
$form-error: $red;
|
||||
|
||||
button: 'nearblack',
|
||||
button-disabled: 'grey',
|
||||
$mark-highlight: $red;
|
||||
$mark-bg: $yellow;
|
||||
|
||||
form-error: 'red',
|
||||
$menu-active: $text;
|
||||
|
||||
mark-highlight: 'red',
|
||||
mark-bg: 'yellow',
|
||||
$preview-bg: lighten($yellow, 43%);
|
||||
|
||||
menu-active: 'text',
|
||||
$row-stripe: $white;
|
||||
$row-disabled: $grey-light;
|
||||
|
||||
preview-bg: ('yellow' lighten 43%),
|
||||
$status: $green;
|
||||
$status-bg: lighten($status, 62%);
|
||||
$status-highlight: $text;
|
||||
$warning: $text;
|
||||
$warning-bg: lighten($yellow, 45%);
|
||||
$warning-border: $yellow;
|
||||
$error: $red;
|
||||
$error-bg: lighten($error, 57%);
|
||||
|
||||
row-stripe: 'white',
|
||||
row-disabled: 'grey-light',
|
||||
$watermark: $grey-extra-light;
|
||||
|
||||
status: 'green',
|
||||
status-bg: (status lighten 62%),
|
||||
status-highlight: text,
|
||||
warning: text,
|
||||
warning-bg: ('yellow' lighten 45%),
|
||||
warning-border: 'yellow',
|
||||
error: 'red',
|
||||
error-bg: (error lighten 57%),
|
||||
$headings: $nearblack;
|
||||
|
||||
watermark: 'grey-extra-light',
|
||||
|
||||
headings: 'nearblack',
|
||||
|
||||
code: 'nearblack',
|
||||
));
|
||||
|
||||
$chroma-active-scheme: 'functional';
|
||||
$code: $nearblack;
|
||||
|
|
|
|||
|
|
@ -158,3 +158,4 @@ $zen-gutters: 20px;
|
|||
$indent-amount: 2 * $base-font-size;
|
||||
|
||||
$include-rtl: false;
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
&__grid-notice {
|
||||
margin: $zen-gutters/2;
|
||||
padding: $zen-gutters/2;
|
||||
border: 2px dashed color('red');
|
||||
border: 2px dashed $red;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue