Use css variables for colours. Move color, font and variable files to sass root folder.
This commit is contained in:
Fredrik Jonsson
parent
b83756a1c4
commit
a3a1294c4e
23 changed files with 167 additions and 152 deletions
|
|
@ -44,7 +44,7 @@
|
|||
const results = index.search({
|
||||
query: query,
|
||||
enrich: true,
|
||||
limit: {{ .Site.Params.searchLimit | default 20 }}
|
||||
limit: {{ site.Params.searchLimit | default 20 }}
|
||||
});
|
||||
const items = {};
|
||||
results.forEach( function(result) {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
* A JavaScript file for analytic tracking.
|
||||
*/
|
||||
|
||||
var cookiebanner = {{ .Site.Params.cookieConsent | default false }};
|
||||
var cookiebanner = {{ site.Params.cookieConsent | default false }};
|
||||
var cookieconsent = localStorage.getItem('cookieconsent');
|
||||
var idSite = '{{ .Site.Params.piwikSiteID }}';
|
||||
var matomoTrackingApiUrl = 'https://{{ .Site.Params.piwikTrackerUrl }}/matomo.php';
|
||||
var googleAnalytics = '{{ .Site.GoogleAnalytics }}';
|
||||
var idSite = '{{ site.Params.piwikSiteID }}';
|
||||
var matomoTrackingApiUrl = 'https://{{ site.Params.piwikTrackerUrl }}/matomo.php';
|
||||
var googleAnalytics = '{{ site.GoogleAnalytics }}';
|
||||
|
||||
if (idSite) {
|
||||
var _paq = window._paq || [];
|
||||
|
|
|
|||
87
assets/sass/_colors.scss
Normal file
87
assets/sass/_colors.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
// stylelint-disable color-no-hex, color-named
|
||||
|
||||
// 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;
|
||||
|
||||
$blue: #0072b9;
|
||||
$red: #c00;
|
||||
$green: #43a808;
|
||||
$yellow: #fd0;
|
||||
|
||||
$brand: $nearblack;
|
||||
$brand-alt: $grey;
|
||||
$brand-dark: $grey-dark;
|
||||
|
||||
// Colour map.
|
||||
$colors: (
|
||||
brand: $brand,
|
||||
brand-alt: $brand-alt,
|
||||
brand-dark: $brand-dark,
|
||||
text: $black,
|
||||
text-bg: $white,
|
||||
text-meta: $grey-dark,
|
||||
|
||||
link: $black,
|
||||
link-visited: $black,
|
||||
link-hover: $nearblack,
|
||||
link-active: $red,
|
||||
|
||||
border: $grey-light,
|
||||
border-dark: $nearblack,
|
||||
|
||||
autocomplete: $black,
|
||||
autocomplete-bg: $white,
|
||||
autocomplete-select: $white,
|
||||
autocomplete-select-bg: $blue,
|
||||
|
||||
body-bg: $white,
|
||||
header-bg: $nearblack,
|
||||
backdrop: $grey-extra-light,
|
||||
|
||||
mobile-menu: $nearblack,
|
||||
mobile-menu-cover: rgba($black, .2),
|
||||
|
||||
button: $nearblack,
|
||||
button-disabled: $grey,
|
||||
|
||||
form-error: $red,
|
||||
|
||||
mark-highlight: $red,
|
||||
mark-bg: $yellow,
|
||||
|
||||
menu-active: $black,
|
||||
|
||||
preview-bg: lighten($yellow, 43%),
|
||||
|
||||
row-stripe: $white,
|
||||
row-disabled: $grey-light,
|
||||
|
||||
status: $green,
|
||||
status-bg: lighten($green, 62%),
|
||||
status-highlight: $black,
|
||||
warning: $black,
|
||||
warning-bg: lighten($yellow, 45%),
|
||||
warning-border: $yellow,
|
||||
error: $red,
|
||||
error-bg: lighten($red, 57%),
|
||||
|
||||
watermark: $grey-extra-light,
|
||||
|
||||
headings: $nearblack,
|
||||
|
||||
code: $nearblack,
|
||||
);
|
||||
|
||||
// Convert colour map to css4 variables.
|
||||
// Use like this: var(--color-brand)
|
||||
:root {
|
||||
@each $name, $color in $colors {
|
||||
--color-#{$name}: #{$color};
|
||||
}
|
||||
}
|
||||
34
assets/sass/_fonts.scss
Normal file
34
assets/sass/_fonts.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
// Font faces
|
||||
//
|
||||
// Instead of relying on the fonts that are available on a user's computer, you
|
||||
// can use web fonts which, like images, are resources downloaded to the user's
|
||||
// browser. Because of the bandwidth and rendering resources required, web fonts
|
||||
// should be used with care.
|
||||
//
|
||||
// Numerous resources for web fonts can be found on Google. Here are a few
|
||||
// websites where you can find Open Source fonts to download:
|
||||
// - http://www.fontsquirrel.com/fontface
|
||||
// - http://www.theleagueofmoveabletype.com
|
||||
// - https://fonts.google.com
|
||||
//
|
||||
// In order to use these fonts, you will need to convert them into formats
|
||||
// suitable for web fonts. We recommend the free-to-use Font Squirrel's
|
||||
// Font-Face Generator:
|
||||
// http://www.fontsquirrel.com/fontface/generator
|
||||
//
|
||||
// The following is an example @font-face declaration. This font can then be
|
||||
// used in any ruleset using a property like this: font-family: Example, serif;
|
||||
//
|
||||
// Since we're using Sass, you'll need to declare your font faces here, then you
|
||||
// can add them to the font variables in the _init.scss partial.
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Example';
|
||||
// src: url('../fonts/example.eot');
|
||||
// src: url('../fonts/example.eot?iefix') format('eot'),
|
||||
// url('../fonts/example.woff') format('woff'),
|
||||
// url('../fonts/example.ttf') format('truetype'),
|
||||
// url('../fonts/example.svg#webfontOkOndcij') format('svg');
|
||||
// font-weight: normal;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
|
@ -6,8 +6,8 @@
|
|||
// project.
|
||||
|
||||
// Colours and variables.
|
||||
@import 'init/colors';
|
||||
@import 'init/variables';
|
||||
@import 'colors';
|
||||
@import 'variables';
|
||||
|
||||
// Add typey to manage font sizes and margins.
|
||||
@import 'typey';
|
||||
|
|
|
|||
154
assets/sass/_variables.scss
Normal file
154
assets/sass/_variables.scss
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
// Variables
|
||||
//
|
||||
// Set variables for this site before a library sets its !default value.
|
||||
|
||||
|
||||
// Font faces, stacks and sizes.
|
||||
//
|
||||
// Font styling and line heights are controlled by the several variables that
|
||||
// used by mixins like `type-layout()`, `margin-top()`, and `margin-bottom()`.
|
||||
// These variable and mixins are documented on the [Typey
|
||||
// homepage](https://github.com/jptaranto/typey).
|
||||
|
||||
// The font size set on the root html element.
|
||||
$base-font-size: 22px;
|
||||
$base-font-size-2: 18px;
|
||||
|
||||
// The base line height determines the basic unit of vertical rhythm.
|
||||
$base-line-height: 31px;
|
||||
$base-line-height-2: 25px;
|
||||
|
||||
$base-multiplier: $base-font-size / $base-font-size-2;
|
||||
|
||||
$xxl-2: 34px * $base-multiplier;
|
||||
$xl-2: 28px * $base-multiplier;
|
||||
$l-2: 22px * $base-multiplier;
|
||||
$m-2: 18px * $base-multiplier;
|
||||
$s-2: 16px * $base-multiplier;
|
||||
$xs-2: 14px * $base-multiplier;
|
||||
|
||||
// The font sizes in our type hierarchy as tee shirt sizes.
|
||||
$font-size: (
|
||||
xxl: 28px,
|
||||
xl: 26px,
|
||||
l: 24px,
|
||||
m: $base-font-size,
|
||||
s: 18px,
|
||||
xs: 16px,
|
||||
xxl-2: $xxl-2,
|
||||
xl-2: $xl-2,
|
||||
l-2: $l-2,
|
||||
m-2: $m-2,
|
||||
s-2: $s-2,
|
||||
xs-2: $xs-2
|
||||
);
|
||||
|
||||
// Typey allows you to alter font weights site-wide with this map.
|
||||
$font-weight: (
|
||||
bold: bold,
|
||||
medium: 500,
|
||||
normal: normal,
|
||||
light: 300,
|
||||
lighter: lighter,
|
||||
);
|
||||
|
||||
// The following font family declarations use widely available fonts.
|
||||
// A user's web browser will look at the comma-separated list and will
|
||||
// attempt to use each font in turn until it finds one that is available
|
||||
// on the user's computer. The final "generic" font (sans-serif, serif or
|
||||
// monospace) hints at what type of font to use if the web browser doesn't
|
||||
// find any of the fonts in the list.
|
||||
|
||||
// Serif font stacks.
|
||||
$times-new-roman: 'Times New Roman', Times, Georgia, 'DejaVu Serif', serif;
|
||||
$times: Times, 'Times New Roman', Georgia, 'DejaVu Serif', serif;
|
||||
$georgia: Georgia, 'Times New Roman', 'DejaVu Serif', serif;
|
||||
$garamond: 'Garamond Premier Pro', Charter, 'Times New Roman', serif;
|
||||
|
||||
// Sans-serif font stacks.
|
||||
$verdana: Verdana, Tahoma, 'DejaVu Sans', sans-serif;
|
||||
$tahoma: Tahoma, Verdana, 'DejaVu Sans', sans-serif;
|
||||
$helvetica: Helvetica, Arial, 'Nimbus Sans L', sans-serif;
|
||||
$arial: Arial, Helvetica, 'Nimbus Sans L', sans-serif;
|
||||
$impact: Impact, 'Arial Narrow', Helvetica, sans-serif;
|
||||
$lucida: 'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, sans-serif;
|
||||
$futura: Futura, 'Century Gothic', AppleGothic, sans-serif;
|
||||
|
||||
// System-ui font stack.
|
||||
$system-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
|
||||
// Monospace font stacks.
|
||||
// For an explanation of why "sans-serif" is at the end of this list, see
|
||||
// http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
|
||||
//$menlo: Menlo, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, 'Courier New', monospace, sans-serif;
|
||||
$menlo: Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif;
|
||||
|
||||
// The font faces you specify in the $typefaces map can be used in the
|
||||
// typeface() mixin.
|
||||
$typefaces: (
|
||||
body: (
|
||||
font-family: $garamond,
|
||||
),
|
||||
headings: (
|
||||
font-family: $futura,
|
||||
),
|
||||
monospace: (
|
||||
font-family: $menlo,
|
||||
),
|
||||
compact: (
|
||||
font-family: $impact,
|
||||
weight: bold,
|
||||
case: uppercase,
|
||||
// We could also specify the following property:
|
||||
// letter-spacing: .5px,
|
||||
),
|
||||
); // stylelint-disable indentation
|
||||
|
||||
// Output a horizontal grid to help with debugging typography.
|
||||
$typey-debug: false;
|
||||
$with-wireframes: false;
|
||||
|
||||
// The length unit in which to output font size and margin values.
|
||||
// Supported values: px, em, rem.
|
||||
$base-unit: 'rem';
|
||||
|
||||
// px fallbacks for rem units are needed for IE 8 and earlier.
|
||||
$rem-fallback: false;
|
||||
|
||||
// We have separate print file.
|
||||
$auto-print-sizing: false;
|
||||
|
||||
// Breakpoints
|
||||
//
|
||||
// Use the `respond-to()` mixin to use named breakpoints.
|
||||
|
||||
$breakpoints: (
|
||||
'xxxs': 333px,
|
||||
'xxs': 444px,
|
||||
'xs': 555px,
|
||||
's': 666px,
|
||||
'm': 777px,
|
||||
'l': 888px,
|
||||
'xl': 999px,
|
||||
'xxl': 1111px,
|
||||
'xxxl': 1222px
|
||||
) !default;
|
||||
|
||||
// Layout
|
||||
|
||||
// The max content width.
|
||||
$max-content-width: 960px;
|
||||
|
||||
// The default left/right gutter/padding.
|
||||
$zen-gutters: 20px;
|
||||
|
||||
|
||||
// Miscellaneous variables
|
||||
//
|
||||
// `$indent-amount` controls the amount lists, blockquotes and comments are indented.
|
||||
//
|
||||
// `$include-rtl` controls whether RTL styles are output.
|
||||
|
||||
$indent-amount: 2 * $base-font-size;
|
||||
|
||||
$include-rtl: false;
|
||||
|
|
@ -3,11 +3,11 @@
|
|||
// Page
|
||||
|
||||
body {
|
||||
background-color: $backdrop;
|
||||
background-color: var(--color-backdrop);
|
||||
}
|
||||
|
||||
.page {
|
||||
background-color: $body-bg;
|
||||
background-color: var(--color-body-bg);
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
@ -22,7 +22,7 @@ body {
|
|||
@include margin-top(1.5);
|
||||
@include padding(.5 0);
|
||||
text-align: center;
|
||||
border-top: 2px solid $brand;
|
||||
border-top: 2px solid var(--color-brand);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
|
@ -67,7 +67,7 @@ article > header,
|
|||
.header,
|
||||
.footer {
|
||||
@include typeface(headings);
|
||||
color: $headings;
|
||||
color: var(--color-headings);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -84,7 +84,7 @@ aside {
|
|||
|
||||
article {
|
||||
& > header {
|
||||
color: $text-meta;
|
||||
color: var(--color-text-meta);
|
||||
}
|
||||
|
||||
.submitted {
|
||||
|
|
@ -114,7 +114,7 @@ article {
|
|||
}
|
||||
|
||||
.content-dates {
|
||||
color: $text-meta;
|
||||
color: var(--color-text-meta);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
@ -128,11 +128,11 @@ article {
|
|||
}
|
||||
|
||||
pre {
|
||||
color: $code;
|
||||
color: var(--color-code);
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
border: 1px solid $border;
|
||||
background-color: $text-bg;
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: var(--color-text-bg);
|
||||
overflow: auto;
|
||||
max-height: 300px;
|
||||
max-width: 90vw;
|
||||
|
|
@ -228,19 +228,19 @@ figure {
|
|||
|
||||
a {
|
||||
display: block;
|
||||
background-color: $brand;
|
||||
color: $text-bg;
|
||||
background-color: var(--color-brand);
|
||||
color: var(--color-text-bg);
|
||||
padding: 2px 8px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $brand-dark;
|
||||
background-color: var(--color-brand-dark);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: $brand;
|
||||
background-color: var(--color-brand);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -271,16 +271,16 @@ figure {
|
|||
|
||||
&:required+span::after {
|
||||
content: ' *';
|
||||
color: $red;
|
||||
color: var(--color-red);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&:not(:placeholder-shown):valid {
|
||||
background-color: $status-bg;
|
||||
background-color: var(--color-status-bg);
|
||||
}
|
||||
|
||||
&:not(:placeholder-shown):invalid {
|
||||
background-color: $error-bg;
|
||||
background-color: var(--color-error-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -289,11 +289,11 @@ figure {
|
|||
input,
|
||||
textarea {
|
||||
&:valid {
|
||||
background-color: $status-bg;
|
||||
background-color: var(--color-status-bg);
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
background-color: $error-bg;
|
||||
background-color: var(--color-error-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ input {
|
|||
fieldset {
|
||||
// Correct the padding in Firefox.
|
||||
@include padding(.35 .5 .65);
|
||||
border: 1px solid $border;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
legend {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
a,
|
||||
%link {
|
||||
color: $link;
|
||||
color: var(--color-link);
|
||||
// stylelint-disable property-no-vendor-prefix
|
||||
// Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
-webkit-text-decoration-skip: objects;
|
||||
|
|
@ -23,14 +23,14 @@ a,
|
|||
// safely lower this selector's specificity. This also ensures visited links
|
||||
// with additional styles won't have their styles overridden.
|
||||
:visited {
|
||||
color: $link-visited;
|
||||
color: var(--color-link-visited);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: $link-hover;
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: $link-active;
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
.box,
|
||||
%box {
|
||||
@include margin-bottom(1);
|
||||
border: 5px solid $border;
|
||||
border: 5px solid var(--color-border);
|
||||
padding: 1em;
|
||||
|
||||
// Sass compiles this to the selector: .box__title, %box__title {}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
&:hover,
|
||||
&.is-focus,
|
||||
&--is-focus {
|
||||
border-color: $text;
|
||||
border-color: var(--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: $link;
|
||||
border-color: var(--color-link);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ button,
|
|||
text-decoration: none;
|
||||
// Improve usability and consistency of cursor style between image-type `input` and others.
|
||||
cursor: pointer;
|
||||
color: $button;
|
||||
color: var(--color-button);
|
||||
text-align: center;
|
||||
background-image: linear-gradient(#f6f6f6, #e2e2e2);
|
||||
border: 1px solid #e4e4e4;
|
||||
|
|
@ -60,14 +60,14 @@ button,
|
|||
&:active {
|
||||
// Override any link underlines and color changes.
|
||||
text-decoration: none;
|
||||
color: $button;
|
||||
color: var(--color-button);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: #555;
|
||||
text-shadow: $button 0 -1px 0;
|
||||
background: $grey-dark;
|
||||
color: $text-bg;
|
||||
text-shadow: var(--color-button 0 -1px 0) 0 -1px 0;
|
||||
background: var(--color-grey-dark);
|
||||
color: var(--color-text-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -91,9 +91,9 @@ button,
|
|||
%button--disabled[disabled] {
|
||||
// Re-set default cursor for disabled elements.
|
||||
cursor: default;
|
||||
color: $button-disabled;
|
||||
background-color: $grey-extra-light;
|
||||
border-color: $grey-extra-light;
|
||||
color: var(--color-button-disabled);
|
||||
background-color: var(--color-grey-extra-light);
|
||||
border-color: var(--color-grey-extra-light);
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
|
||||
|
|
@ -101,6 +101,6 @@ button,
|
|||
&:focus,
|
||||
&:active {
|
||||
// Override any link underlines and color changes.
|
||||
color: $button-disabled;
|
||||
color: var(--color-button-disabled);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
position: sticky;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: $warning;
|
||||
background-color: $warning-bg;
|
||||
border-top: 4px solid $warning-border;
|
||||
color: var(--color-warning);
|
||||
background-color: var(--color-warning-bg);
|
||||
border-top: 4px solid var(--color-warning-border);
|
||||
text-align: center;
|
||||
transform: translateY(100vh);
|
||||
transition: all 130ms ease-in;
|
||||
|
|
@ -19,11 +19,11 @@
|
|||
|
||||
.button {
|
||||
&--accept {
|
||||
border-color: $status;
|
||||
border-color: var(--color-status);
|
||||
}
|
||||
|
||||
&--decline {
|
||||
border-color: $warning-border;
|
||||
border-color: var(--color-warning-border);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
%divider {
|
||||
@include margin(1 0);
|
||||
border: 0;
|
||||
border-top: 1px solid $border;
|
||||
border-top: 1px solid var(--color-border);
|
||||
|
||||
// If used as a container, add a top margin to the first child.
|
||||
> :first-child {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
&__site-link {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $text;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
.highlight-mark,
|
||||
%highlight-mark {
|
||||
color: $mark-highlight;
|
||||
color: var(--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: $brand;
|
||||
color: $text-bg;
|
||||
background: var(--color-brand);
|
||||
color: var(--color-text-bg);
|
||||
border-radius: 5px;
|
||||
|
||||
:link,
|
||||
:visited {
|
||||
color: $text-bg;
|
||||
color: var(--color-text-bg);
|
||||
}
|
||||
|
||||
p,
|
||||
|
|
|
|||
|
|
@ -7,20 +7,20 @@
|
|||
width: 95%;
|
||||
|
||||
&.status {
|
||||
background-color: $status-bg;
|
||||
color: $status;
|
||||
border-color: $status;
|
||||
background-color: var(--color-status-bg);
|
||||
color: var(--color-status);
|
||||
border-color: var(--color-status);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: $warning-bg;
|
||||
color: $warning;
|
||||
border-color: $warning;
|
||||
background-color: var(--color-warning-bg);
|
||||
color: var(--color-warning);
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $error-bg;
|
||||
color: $error;
|
||||
border-color: $error;
|
||||
background-color: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
overflow: visible;
|
||||
// Remove background highlighting from <mark> in normalize.
|
||||
background-color: transparent;
|
||||
color: $watermark;
|
||||
color: var(--color-watermark);
|
||||
font-size: 75px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ $with-wireframes: false !default;
|
|||
@if $with-wireframes {
|
||||
.wireframe,
|
||||
%wireframe {
|
||||
outline: 1px solid $border;
|
||||
outline: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
//
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
// stylelint-disable color-no-hex, color-named
|
||||
|
||||
// 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;
|
||||
|
||||
$blue: #0072b9;
|
||||
$red: #c00;
|
||||
$green: #43a808;
|
||||
$yellow: #fd0;
|
||||
|
||||
// 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;
|
||||
|
||||
$link: $black;
|
||||
$link-visited: $black;
|
||||
$link-hover: $brand;
|
||||
$link-active: $red;
|
||||
|
||||
$border: $grey-light;
|
||||
$border-dark: $nearblack;
|
||||
|
||||
$autocomplete: $text;
|
||||
$autocomplete-bg: $text-bg;
|
||||
$autocomplete-select: $white;
|
||||
$autocomplete-select-bg: $blue;
|
||||
|
||||
$body-bg: $white;
|
||||
$header-bg: $brand;
|
||||
$backdrop: $grey-extra-light;
|
||||
|
||||
$mobile-menu: $header-bg;
|
||||
$mobile-menu-cover: rgba($black, .2);
|
||||
|
||||
$button: $nearblack;
|
||||
$button-disabled: $grey;
|
||||
|
||||
$form-error: $red;
|
||||
|
||||
$mark-highlight: $red;
|
||||
$mark-bg: $yellow;
|
||||
|
||||
$menu-active: $text;
|
||||
|
||||
$preview-bg: lighten($yellow, 43%);
|
||||
|
||||
$row-stripe: $white;
|
||||
$row-disabled: $grey-light;
|
||||
|
||||
$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%);
|
||||
|
||||
$watermark: $grey-extra-light;
|
||||
|
||||
$headings: $nearblack;
|
||||
|
||||
$code: $nearblack;
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue