Alternatively, you can create custom _variables.scss and import it to project-name.scss.
// Example of project-name.scss
-@import "variables";
-
// Import only the needed components
-@import "node_modules/spectre.css/src/buttons";
-@import "node_modules/spectre.css/src/forms";
+@use "node_modules/spectre.css/src/buttons";
+@use "node_modules/spectre.css/src/forms";
spectre/
diff --git a/docs/src/getting-started/custom.pug b/docs/src/getting-started/custom.pug
index 12817fa79..4833a177c 100644
--- a/docs/src/getting-started/custom.pug
+++ b/docs/src/getting-started/custom.pug
@@ -86,7 +86,7 @@ block docs-content
$dark-color: #3e396b;
// Import full Spectre source code
- @import "node_modules/spectre.css/src/spectre";
+ @use "node_modules/spectre.css/src/spectre";
p
| Alternatively, you can create custom
@@ -100,11 +100,9 @@ block docs-content
code
:highlight(lang="scss")
// Example of project-name.scss
- @import "variables";
-
// Import only the needed components
- @import "node_modules/spectre.css/src/buttons";
- @import "node_modules/spectre.css/src/forms";
+ @use "node_modules/spectre.css/src/buttons";
+ @use "node_modules/spectre.css/src/forms";
+docs-subheading('folders', 'Folder structure')
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index 656bfa345..f5f198d9c 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -1,10 +1,11 @@
/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
// Core variables and mixins
-@import "../../../src/variables";
-@import "../../../src/mixins";
+@use "sass:color";
+@use "variables";
+@use "mixins";
.version::after {
- content: "#{$version}";
+ content: "#{variables.$version}";
}
.off-canvas {
@@ -33,7 +34,7 @@
position: fixed;
right: 0;
top: 0;
- z-index: $zindex-1;
+ z-index: variables.$zindex-1;
.btns {
position: absolute;
@@ -63,7 +64,7 @@
input {
& ~ .accordion-header {
- color: lighten($dark-color, 10%);
+ color: color.adjust(variables.$dark-color, $lightness: 10%);
font-size: .65rem;
font-weight: 600;
text-transform: uppercase;
@@ -71,7 +72,7 @@
&:checked {
& ~ .accordion-header {
- color: lighten($dark-color, 15%);
+ color: color.adjust(variables.$dark-color, $lightness: 15%);
}
}
}
@@ -83,7 +84,7 @@
& > a {
background: transparent;
- color: $gray-color-dark;
+ color: variables.$gray-color-dark;
display: inline-block;
}
}
@@ -103,7 +104,7 @@
}
.anchor {
- color: $primary-color-light;
+ color: variables.$primary-color-light;
display: none;
margin-left: .2rem;
padding: 0 .2rem;
@@ -125,10 +126,10 @@
@supports (position: sticky) {
position: sticky;
top: 0;
- z-index: $zindex-1 - 1;
+ z-index: variables.$zindex-1 - 1;
&::before {
- background: $light-color;
+ background: variables.$light-color;
bottom: 0;
content: "";
display: block;
@@ -136,7 +137,7 @@
position: absolute;
right: -10px;
top: -5px;
- z-index: -$zindex-0;
+ z-index: -(variables.$zindex-0);
}
}
@@ -156,22 +157,22 @@
padding-top: 1rem;
.card {
- box-shadow: 0 .25rem 1rem rgba($dark-color, .15);
+ box-shadow: 0 .25rem 1rem rgba(variables.$dark-color, .15);
border: 0;
height: 100%;
}
}
.column {
- padding: $layout-spacing;
+ padding: variables.$layout-spacing;
}
.docs-block {
- border-radius: $border-radius;
- padding: $unit-2;
+ border-radius: variables.$border-radius;
+ padding: variables.$unit-2;
&.bg-gray {
- background: $bg-color-dark;
+ background: variables.$bg-color-dark;
}
}
@@ -198,30 +199,30 @@
}
.docs-color {
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
margin: .25rem 0;
padding: 5rem .5rem .5rem;
.color-subtitle {
- font-size: $font-size-sm;
+ font-size: variables.$font-size-sm;
opacity: .75;
}
}
.code {
.hljs-tag {
- color: lighten($body-font-color, 10%);
+ color: color.adjust(variables.$body-font-color, $lightness: 10%);
}
.hljs-comment {
- color: $gray-color;
+ color: variables.$gray-color;
}
.hljs-title,
.hljs-class,
.hljs-string,
.hljs-number {
- color: $primary-color;
+ color: variables.$primary-color;
}
.hljs-name,
@@ -229,12 +230,12 @@
.hljs-variable,
.hljs-keyword,
.hljs-built_in {
- color: $code-color;
+ color: variables.$code-color;
}
.hljs-value,
.hljs-hexcolor {
- color: lighten($body-font-color, 10%);
+ color: color.adjust(variables.$body-font-color, $lightness: 10%);
}
}
@@ -261,9 +262,9 @@
.example-tile-icon {
align-content: space-around;
align-items: center;
- background: $primary-color;
- border-radius: $border-radius;
- color: $light-color;
+ background: variables.$primary-color;
+ border-radius: variables.$border-radius;
+ color: variables.$light-color;
display: flex;
font-size: 1.2rem;
height: 2rem;
@@ -287,16 +288,16 @@
position: relative;
.off-canvas-toggle {
- left: $layout-spacing;
+ left: variables.$layout-spacing;
position: absolute;
- top: $layout-spacing;
- z-index: $zindex-0;
+ top: variables.$layout-spacing;
+ z-index: variables.$zindex-0;
}
}
}
.docs-brand {
- color: $primary-color;
+ color: variables.$primary-color;
height: 2rem;
left: 1.5rem;
position: fixed;
@@ -304,7 +305,7 @@
.docs-logo {
align-items: center;
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
display: inline-flex;
font-size: .7rem;
height: 2rem;
@@ -335,20 +336,20 @@
}
.docs-footer {
- color: $gray-color;
+ color: variables.$gray-color;
padding: .5rem;
a {
- color: $gray-color-dark;
+ color: variables.$gray-color-dark;
}
}
.docs-ad {
- background: $bg-color;
- border-radius: $border-radius;
+ background: variables.$bg-color;
+ border-radius: variables.$border-radius;
display: block;
margin: 2rem 0;
- padding: $layout-spacing;
+ padding: variables.$layout-spacing;
position: relative;
ins {
@@ -362,15 +363,15 @@
}
.carbon-text {
- color: $gray-color-dark;
+ color: variables.$gray-color-dark;
display: block;
- font-size: $font-size-sm;
+ font-size: variables.$font-size-sm;
}
}
.carbon-poweredby {
- color: $gray-color;
- font-size: $font-size-sm;
+ color: variables.$gray-color;
+ font-size: variables.$font-size-sm;
}
}
@@ -383,12 +384,12 @@
top: .85rem;
h2 {
- color: $primary-color;
+ color: variables.$primary-color;
}
}
.column {
- padding: $layout-spacing;
+ padding: variables.$layout-spacing;
}
}
@@ -409,18 +410,18 @@
padding: 4.5rem .5rem;
.column {
- padding: $layout-spacing;
+ padding: variables.$layout-spacing;
}
}
.section-footer {
- color: $gray-color;
+ color: variables.$gray-color;
padding: 1.8rem .75rem 1rem;
position: relative;
z-index: 200;
a {
- color: $gray-color-dark;
+ color: variables.$gray-color-dark;
}
}
@@ -429,22 +430,22 @@
padding-top: 6rem;
h1 {
- color: $body-font-color;
+ color: variables.$body-font-color;
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
h2 {
- color: lighten($body-font-color, 5%);
+ color: color.adjust(variables.$body-font-color, $lightness: 5%);
font-size: .9rem;
font-weight: 400;
line-height: 1.5rem;
margin-bottom: 1.5rem;
u {
- border-bottom: $border-width-lg solid currentColor;
- padding-bottom: $unit-o;
+ border-bottom: variables.$border-width-lg solid currentColor;
+ padding-bottom: variables.$unit-o;
text-decoration: none;
}
}
@@ -452,11 +453,11 @@
.card {
background: none;
border: 0;
- color: lighten($body-font-color, 15%);
+ color: color.adjust(variables.$body-font-color, $lightness: 15%);
padding: .5rem;
.card-title {
- color: $primary-color;
+ color: variables.$primary-color;
font-size: 1rem;
font-weight: 700;
margin-bottom: 0;
@@ -467,7 +468,7 @@
@media (max-width: 960px) {
.off-canvas {
.off-canvas-toggle {
- z-index: $zindex-3;
+ z-index: variables.$zindex-3;
}
.off-canvas-content {
@@ -494,7 +495,7 @@
.docs-navbar {
backdrop-filter: blur(5px);
- background: rgba($bg-color, .65);
+ background: rgba(variables.$bg-color, .65);
left: 0;
}
@@ -579,7 +580,7 @@
padding: 0 .5rem;
.docs-block {
- padding: $unit-2 $unit-h;
+ padding: variables.$unit-2 variables.$unit-h;
}
}
}
@@ -778,7 +779,7 @@
z-index: 999;
max-width: 600px;
min-width: 500px;
- @include shadow-variant(.05rem);
+ @include mixins.shadow-variant(.05rem);
.ds-suggestions {
position: relative;
@@ -793,7 +794,7 @@
cursor: pointer;
&.ds-cursor .algolia-docsearch-suggestion {
&.suggestion-layout-simple, &:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
- background-color: rgba($primary-color, .05);
+ background-color: rgba(variables.$primary-color, .05);
}
}
}
@@ -816,13 +817,13 @@
position: relative;
padding: 0 8px;
background: #fff;
- color: $dark-color;
+ color: variables.$dark-color;
overflow: hidden;
}
.algolia-docsearch-suggestion--highlight {
- color: $primary-color;
- background: rgba($primary-color, .1);
+ color: variables.$primary-color;
+ background: rgba(variables.$primary-color, .1);
padding: 0.1em 0.05em;
}
@@ -830,7 +831,7 @@
.algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight, .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight {
padding: 0 0 1px;
background: inherit;
- box-shadow: inset 0 -2px 0 0 rgba($primary-color, .8);
+ box-shadow: inset 0 -2px 0 0 rgba(variables.$primary-color, .8);
color: inherit;
}
}
@@ -838,7 +839,7 @@
.algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
padding: 0 0 1px;
background: inherit;
- box-shadow: inset 0 -2px 0 0 rgba($primary-color, .8);
+ box-shadow: inset 0 -2px 0 0 rgba(variables.$primary-color, .8);
color: inherit;
}
@@ -856,19 +857,19 @@
top: 0;
height: 100%;
width: 1px;
- background: $gray-color-light;
+ background: variables.$gray-color-light;
left: -1px;
}
}
.algolia-docsearch-suggestion--category-header {
position: relative;
- border-bottom: 1px solid $gray-color-light;
+ border-bottom: 1px solid variables.$gray-color-light;
display: none;
margin-top: 8px;
padding: 4px 0;
font-size: 1em;
- color: $dark-color;
+ color: variables.$dark-color;
}
.algolia-docsearch-suggestion--wrapper {
@@ -883,7 +884,7 @@
text-align: right;
position: relative;
padding: 5.33333px 10.66667px;
- color: $gray-color;
+ color: variables.$gray-color;
font-size: .9em;
word-wrap: break-word;
&:before {
@@ -893,7 +894,7 @@
top: 0;
height: 100%;
width: 1px;
- background: $gray-color-light;
+ background: variables.$gray-color-light;
right: 0;
}
}
@@ -903,7 +904,7 @@
}
.algolia-docsearch-suggestion--title {
- color: $dark-color;
+ color: variables.$dark-color;
font-size: .9em;
font-weight: 700;
}
@@ -912,7 +913,7 @@
display: block;
line-height: 1.2em;
font-size: .85em;
- color: $gray-color-dark;
+ color: variables.$gray-color-dark;
}
.algolia-docsearch-suggestion--no-results {
diff --git a/docs/src/scss/spectre-rtl.scss b/docs/src/scss/spectre-rtl.scss
index cda0b96f5..db261a79e 100644
--- a/docs/src/scss/spectre-rtl.scss
+++ b/docs/src/scss/spectre-rtl.scss
@@ -2,5 +2,5 @@
$rtl: true;
// Import Spectre
-@import "../../../src/spectre";
-@import "../../../src/spectre-exp";
+@use "spectre";
+@use "spectre-exp";
diff --git a/gulpfile.js b/gulpfile.js
index fe701b36d..715862be7 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,6 +1,6 @@
const gulp = require("gulp");
const { parallel } = require("gulp");
-const sass = require('gulp-sass');
+const sass = require('gulp-dart-sass');
const cleancss = require('gulp-clean-css');
const csscomb = require('gulp-csscomb');
const rename = require('gulp-rename');
@@ -10,7 +10,7 @@ const autoprefixer = require('gulp-autoprefixer');
function build() {
return gulp
.src('./src/*.scss')
- .pipe(sass({outputStyle: 'compact', precision: 10})
+ .pipe(sass({outputStyle: 'compressed', precision: 10})
.on('error', sass.logError)
)
.pipe(autoprefixer())
@@ -26,7 +26,12 @@ function build() {
function docs_css() {
return gulp
.src(['./src/*.scss', './docs/src/scss/*.scss'])
- .pipe(sass({outputStyle: 'compact', precision: 10})
+ .pipe(
+ sass({
+ outputStyle: 'compressed',
+ precision: 10,
+ includePaths: ['./src', './docs/src/scss/*.scss']
+ })
.on('error', sass.logError)
)
.pipe(autoprefixer())
diff --git a/package.json b/package.json
index bd200612f..b29e0db75 100644
--- a/package.json
+++ b/package.json
@@ -28,9 +28,9 @@
"gulp-autoprefixer": "^7.0.1",
"gulp-clean-css": "^4.3.0",
"gulp-csscomb": "^3.1.0",
+ "gulp-dart-sass": "^1.0.2",
"gulp-pug": "^4.0.1",
"gulp-rename": "^2.0.0",
- "gulp-sass": "^4.1.0",
"jstransformer-highlight": "^2.0.0",
"jstransformer-markdown-it": "^2.1.0"
},
diff --git a/src/_accordions.scss b/src/_accordions.scss
index ee57ac050..128162eab 100644
--- a/src/_accordions.scss
+++ b/src/_accordions.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
// Accordions
.accordion {
input:checked ~,
@@ -15,7 +17,7 @@
.accordion-header {
display: block;
- padding: $unit-1 $unit-2;
+ padding: variables.$unit-1 variables.$unit-2;
.icon {
transition: transform .25s;
@@ -23,7 +25,7 @@
}
.accordion-body {
- margin-bottom: $layout-spacing;
+ margin-bottom: variables.$layout-spacing;
max-height: 0;
overflow: hidden;
transition: max-height .25s;
diff --git a/src/_animations.scss b/src/_animations.scss
index e7fde1ace..7bd0c3435 100644
--- a/src/_animations.scss
+++ b/src/_animations.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
// Animations
@keyframes loading {
0% {
@@ -11,7 +13,7 @@
@keyframes slide-down {
0% {
opacity: 0;
- transform: translateY(-$unit-8);
+ transform: translateY(-(variables.$unit-8));
}
100% {
opacity: 1;
diff --git a/src/_asian.scss b/src/_asian.scss
index e426f39a5..e6fd8a0c7 100644
--- a/src/_asian.scss
+++ b/src/_asian.scss
@@ -1,24 +1,26 @@
+@use "variables";
+
// Optimized for East Asian CJK
html:lang(zh),
html:lang(zh-Hans),
.lang-zh,
.lang-zh-hans {
- font-family: $cjk-zh-hans-font-family;
+ font-family: variables.$cjk-zh-hans-font-family;
}
html:lang(zh-Hant),
.lang-zh-hant {
- font-family: $cjk-zh-hant-font-family;
+ font-family: variables.$cjk-zh-hant-font-family;
}
html:lang(ja),
.lang-ja {
- font-family: $cjk-jp-font-family;
+ font-family: variables.$cjk-jp-font-family;
}
html:lang(ko),
.lang-ko {
- font-family: $cjk-ko-font-family;
+ font-family: variables.$cjk-ko-font-family;
}
:lang(zh),
@@ -26,7 +28,7 @@ html:lang(ko),
.lang-cjk {
ins,
u {
- border-bottom: $border-width solid;
+ border-bottom: variables.$border-width solid;
text-decoration: none;
}
diff --git a/src/_autocomplete.scss b/src/_autocomplete.scss
index 279fa036a..f86def9f7 100644
--- a/src/_autocomplete.scss
+++ b/src/_autocomplete.scss
@@ -1,3 +1,6 @@
+@use "variables";
+@use "mixins";
+
// Autocomplete
.form-autocomplete {
position: relative;
@@ -7,12 +10,12 @@
display: flex;
flex-wrap: wrap;
height: auto;
- min-height: $unit-8;
- padding: $unit-h;
+ min-height: variables.$unit-8;
+ padding: variables.$unit-h;
&.is-focused {
- @include control-shadow();
- border-color: $primary-color;
+ @include mixins.control-shadow();
+ border-color: variables.$primary-color;
}
.form-input {
@@ -20,9 +23,9 @@
box-shadow: none;
display: inline-block;
flex: 1 0 auto;
- height: $unit-6;
- line-height: $unit-4;
- margin: $unit-h;
+ height: variables.$unit-6;
+ line-height: variables.$unit-4;
+ margin: variables.$unit-h;
width: auto;
}
}
diff --git a/src/_avatars.scss b/src/_avatars.scss
index b203aa25c..6231ef41f 100644
--- a/src/_avatars.scss
+++ b/src/_avatars.scss
@@ -1,9 +1,12 @@
+@use "mixins";
+@use "variables";
+
// Avatars
.avatar {
- @include avatar-base();
- background: $primary-color;
+ @include mixins.avatar-base();
+ background: variables.$primary-color;
border-radius: 50%;
- color: rgba($light-color, .85);
+ color: rgba(variables.$light-color, .85);
display: inline-block;
font-weight: 300;
line-height: 1.25;
@@ -12,16 +15,16 @@
vertical-align: middle;
&.avatar-xs {
- @include avatar-base($unit-4);
+ @include mixins.avatar-base(variables.$unit-4);
}
&.avatar-sm {
- @include avatar-base($unit-6);
+ @include mixins.avatar-base(variables.$unit-6);
}
&.avatar-lg {
- @include avatar-base($unit-12);
+ @include mixins.avatar-base(variables.$unit-12);
}
&.avatar-xl {
- @include avatar-base($unit-16);
+ @include mixins.avatar-base(variables.$unit-16);
}
img {
@@ -29,39 +32,39 @@
height: 100%;
position: relative;
width: 100%;
- z-index: $zindex-0;
+ z-index: variables.$zindex-0;
}
.avatar-icon,
.avatar-presence {
- background: $bg-color-light;
+ background: variables.$bg-color-light;
bottom: 14.64%;
height: 50%;
- padding: $border-width-lg;
+ padding: variables.$border-width-lg;
position: absolute;
right: 14.64%;
transform: translate(50%, 50%);
width: 50%;
- z-index: $zindex-0 + 1;
+ z-index: variables.$zindex-0 + 1;
}
.avatar-presence {
- background: $gray-color;
- box-shadow: 0 0 0 $border-width-lg $light-color;
+ background: variables.$gray-color;
+ box-shadow: 0 0 0 variables.$border-width-lg variables.$light-color;
border-radius: 50%;
height: .5em;
width: .5em;
&.online {
- background: $success-color;
+ background: variables.$success-color;
}
&.busy {
- background: $error-color;
+ background: variables.$error-color;
}
&.away {
- background: $warning-color;
+ background: variables.$warning-color;
}
}
@@ -72,6 +75,6 @@
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
- z-index: $zindex-0;
+ z-index: variables.$zindex-0;
}
-}
\ No newline at end of file
+}
diff --git a/src/_badges.scss b/src/_badges.scss
index d67f6d19a..04e170c89 100644
--- a/src/_badges.scss
+++ b/src/_badges.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
// Badges
.badge {
position: relative;
@@ -6,11 +8,11 @@
&[data-badge],
&:not([data-badge]) {
&::after {
- background: $primary-color;
+ background: variables.$primary-color;
background-clip: padding-box;
border-radius: .5rem;
- box-shadow: 0 0 0 .1rem $bg-color-light;
- color: $light-color;
+ box-shadow: 0 0 0 .1rem variables.$bg-color-light;
+ color: variables.$light-color;
content: attr(data-badge);
display: inline-block;
transform: translate(-.05rem, -.5rem);
@@ -18,7 +20,7 @@
}
&[data-badge] {
&::after {
- font-size: $font-size-sm;
+ font-size: variables.$font-size-sm;
height: .9rem;
line-height: 1;
min-width: .9rem;
@@ -54,7 +56,7 @@
top: 14.64%;
right: 14.64%;
transform: translate(50%, -50%);
- z-index: $zindex-1;
+ z-index: variables.$zindex-1;
}
}
}
diff --git a/src/_bars.scss b/src/_bars.scss
index 47e21c9a6..2ccfaf37f 100644
--- a/src/_bars.scss
+++ b/src/_bars.scss
@@ -1,36 +1,38 @@
+@use "variables";
+
// Bars
.bar {
- background: $bg-color-dark;
- border-radius: $border-radius;
+ background: variables.$bg-color-dark;
+ border-radius: variables.$border-radius;
display: flex;
flex-wrap: nowrap;
- height: $unit-4;
+ height: variables.$unit-4;
width: 100%;
&.bar-sm {
- height: $unit-1;
+ height: variables.$unit-1;
}
// TODO: attr() support
.bar-item {
- background: $primary-color;
- color: $light-color;
+ background: variables.$primary-color;
+ color: variables.$light-color;
display: block;
- font-size: $font-size-sm;
+ font-size: variables.$font-size-sm;
flex-shrink: 0;
- line-height: $unit-4;
+ line-height: variables.$unit-4;
height: 100%;
position: relative;
text-align: center;
width: 0;
&:first-child {
- border-bottom-left-radius: $border-radius;
- border-top-left-radius: $border-radius;
+ border-bottom-left-radius: variables.$border-radius;
+ border-top-left-radius: variables.$border-radius;
}
&:last-child {
- border-bottom-right-radius: $border-radius;
- border-top-right-radius: $border-radius;
+ border-bottom-right-radius: variables.$border-radius;
+ border-top-right-radius: variables.$border-radius;
flex-shrink: 1;
}
}
@@ -38,8 +40,8 @@
// Slider bar
.bar-slider {
- height: $border-width-lg;
- margin: $layout-spacing 0;
+ height: variables.$border-width-lg;
+ margin: variables.$layout-spacing 0;
position: relative;
.bar-item {
@@ -47,25 +49,25 @@
padding: 0;
position: absolute;
&:not(:last-child):first-child {
- background: $bg-color-dark;
- z-index: $zindex-0;
+ background: variables.$bg-color-dark;
+ z-index: variables.$zindex-0;
}
}
.bar-slider-btn {
- background: $primary-color;
+ background: variables.$primary-color;
border: 0;
border-radius: 50%;
- height: $unit-3;
+ height: variables.$unit-3;
padding: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
- width: $unit-3;
+ width: variables.$unit-3;
&:active {
- box-shadow: 0 0 0 .1rem $primary-color;
+ box-shadow: 0 0 0 .1rem variables.$primary-color;
}
}
}
diff --git a/src/_base.scss b/src/_base.scss
index 4e01b202e..a27af89a4 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "variables";
+
// Base
*,
*::before,
@@ -7,38 +10,38 @@
html {
box-sizing: border-box;
- font-size: $html-font-size;
- line-height: $html-line-height;
+ font-size: variables.$html-font-size;
+ line-height: variables.$html-line-height;
-webkit-tap-highlight-color: transparent;
}
body {
- background: $body-bg;
- color: $body-font-color;
- font-family: $body-font-family;
- font-size: $font-size;
+ background: variables.$body-bg;
+ color: variables.$body-font-color;
+ font-family: variables.$body-font-family;
+ font-size: variables.$font-size;
overflow-x: hidden;
text-rendering: optimizeLegibility;
}
a {
- color: $link-color;
+ color: variables.$link-color;
outline: none;
text-decoration: none;
&:focus {
- @include control-shadow();
+ @include mixins.control-shadow();
}
&:focus,
&:hover,
&:active,
&.active {
- color: $link-color-dark;
+ color: variables.$link-color-dark;
text-decoration: underline;
}
&:visited {
- color: $link-color-light;
+ color: variables.$link-color-light;
}
}
diff --git a/src/_breadcrumbs.scss b/src/_breadcrumbs.scss
index 6a5af3167..b2995bf11 100644
--- a/src/_breadcrumbs.scss
+++ b/src/_breadcrumbs.scss
@@ -1,28 +1,30 @@
+@use "variables";
+
// Breadcrumbs
.breadcrumb {
list-style: none;
- margin: $unit-1 0;
- padding: $unit-1 0;
+ margin: variables.$unit-1 0;
+ padding: variables.$unit-1 0;
.breadcrumb-item {
- color: $gray-color-dark;
+ color: variables.$gray-color-dark;
display: inline-block;
margin: 0;
- padding: $unit-1 0;
+ padding: variables.$unit-1 0;
&:not(:last-child) {
- margin-right: $unit-1;
+ margin-right: variables.$unit-1;
a {
- color: $gray-color-dark;
+ color: variables.$gray-color-dark;
}
}
&:not(:first-child) {
&::before {
- color: $gray-color-dark;
+ color: variables.$gray-color-dark;
content: "/";
- padding-right: $unit-2;
+ padding-right: variables.$unit-2;
}
}
}
diff --git a/src/_buttons.scss b/src/_buttons.scss
index 9158f0fce..0ca6bd96d 100644
--- a/src/_buttons.scss
+++ b/src/_buttons.scss
@@ -1,17 +1,21 @@
+@use "sass:color";
+@use "mixins";
+@use "variables";
+
// Buttons
.btn {
appearance: none;
- background: $bg-color-light;
- border: $border-width solid $primary-color;
- border-radius: $border-radius;
- color: $primary-color;
+ background: variables.$bg-color-light;
+ border: variables.$border-width solid variables.$primary-color;
+ border-radius: variables.$border-radius;
+ color: variables.$primary-color;
cursor: pointer;
display: inline-block;
- font-size: $font-size;
- height: $control-size;
- line-height: $line-height;
+ font-size: variables.$font-size;
+ height: variables.$control-size;
+ line-height: variables.$line-height;
outline: none;
- padding: $control-padding-y $control-padding-x;
+ padding: variables.$control-padding-y variables.$control-padding-x;
text-align: center;
text-decoration: none;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
@@ -19,24 +23,24 @@
vertical-align: middle;
white-space: nowrap;
&:focus {
- @include control-shadow();
+ @include mixins.control-shadow();
}
&:focus,
&:hover {
- background: $secondary-color;
- border-color: $primary-color-dark;
+ background: variables.$secondary-color;
+ border-color: variables.$primary-color-dark;
text-decoration: none;
}
&:active,
&.active {
- background: $primary-color-dark;
- border-color: darken($primary-color-dark, 5%);
- color: $light-color;
+ background: variables.$primary-color-dark;
+ border-color: color.adjust(variables.$primary-color-dark, $lightness: -5%);
+ color: variables.$light-color;
text-decoration: none;
&.loading {
&::after {
- border-bottom-color: $light-color;
- border-left-color: $light-color;
+ border-bottom-color: variables.$light-color;
+ border-left-color: variables.$light-color;
}
}
}
@@ -50,62 +54,62 @@
// Button Primary
&.btn-primary {
- background: $primary-color;
- border-color: $primary-color-dark;
- color: $light-color;
+ background: variables.$primary-color;
+ border-color: variables.$primary-color-dark;
+ color: variables.$light-color;
&:focus,
&:hover {
- background: darken($primary-color-dark, 2%);
- border-color: darken($primary-color-dark, 5%);
- color: $light-color;
+ background: color.adjust(variables.$primary-color-dark, $lightness: -2%);
+ border-color: color.adjust(variables.$primary-color-dark, $lightness: -5%);
+ color: variables.$light-color;
}
&:active,
&.active {
- background: darken($primary-color-dark, 4%);
- border-color: darken($primary-color-dark, 7%);
- color: $light-color;
+ background: color.adjust(variables.$primary-color-dark, $lightness: -4%);
+ border-color: color.adjust(variables.$primary-color-dark, $lightness: -7%);
+ color: variables.$light-color;
}
&.loading {
&::after {
- border-bottom-color: $light-color;
- border-left-color: $light-color;
+ border-bottom-color: variables.$light-color;
+ border-left-color: variables.$light-color;
}
}
}
// Button Colors
&.btn-success {
- @include button-variant($success-color);
+ @include mixins.button-variant(variables.$success-color);
}
&.btn-error {
- @include button-variant($error-color);
+ @include mixins.button-variant(variables.$error-color);
}
// Button Link
&.btn-link {
background: transparent;
border-color: transparent;
- color: $link-color;
+ color: variables.$link-color;
&:focus,
&:hover,
&:active,
&.active {
- color: $link-color-dark;
+ color: variables.$link-color-dark;
}
}
// Button Sizes
&.btn-sm {
- font-size: $font-size-sm;
- height: $control-size-sm;
- padding: $control-padding-y-sm $control-padding-x-sm;
+ font-size: variables.$font-size-sm;
+ height: variables.$control-size-sm;
+ padding: variables.$control-padding-y-sm variables.$control-padding-x-sm;
}
&.btn-lg {
- font-size: $font-size-lg;
- height: $control-size-lg;
- padding: $control-padding-y-lg $control-padding-x-lg;
+ font-size: variables.$font-size-lg;
+ height: variables.$control-size-lg;
+ padding: variables.$control-padding-y-lg variables.$control-padding-x-lg;
}
// Button Block
@@ -116,16 +120,16 @@
// Button Action
&.btn-action {
- width: $control-size;
+ width: variables.$control-size;
padding-left: 0;
padding-right: 0;
&.btn-sm {
- width: $control-size-sm;
+ width: variables.$control-size-sm;
}
&.btn-lg {
- width: $control-size-lg;
+ width: variables.$control-size-lg;
}
}
@@ -134,18 +138,18 @@
background: transparent;
border: 0;
color: currentColor;
- height: $unit-5;
- line-height: $unit-4;
- margin-left: $unit-1;
+ height: variables.$unit-5;
+ line-height: variables.$unit-4;
+ margin-left: variables.$unit-1;
margin-right: -2px;
opacity: 1;
- padding: $unit-h;
+ padding: variables.$unit-h;
text-decoration: none;
- width: $unit-5;
+ width: variables.$unit-5;
&:focus,
&:hover {
- background: rgba($bg-color, .5);
+ background: rgba(variables.$bg-color, .5);
opacity: .95;
}
@@ -168,18 +172,18 @@
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
- margin-left: -$border-width;
+ margin-left: -(variables.$border-width);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
- margin-left: -$border-width;
+ margin-left: -(variables.$border-width);
}
&:focus,
&:hover,
&:active,
&.active {
- z-index: $zindex-0;
+ z-index: variables.$zindex-0;
}
}
diff --git a/src/_calendars.scss b/src/_calendars.scss
index 1e9fd1532..4259fc0a3 100644
--- a/src/_calendars.scss
+++ b/src/_calendars.scss
@@ -1,18 +1,22 @@
+@use "sass:color";
+@use "variables";
+@use "mixins";
+
// Calendars
.calendar {
- border: $border-width solid $border-color;
- border-radius: $border-radius;
+ border: variables.$border-width solid variables.$border-color;
+ border-radius: variables.$border-radius;
display: block;
min-width: 280px;
.calendar-nav {
align-items: center;
- background: $bg-color;
- border-top-left-radius: $border-radius;
- border-top-right-radius: $border-radius;
+ background: variables.$bg-color;
+ border-top-left-radius: variables.$border-radius;
+ border-top-right-radius: variables.$border-radius;
display: flex;
- font-size: $font-size-lg;
- padding: $layout-spacing;
+ font-size: variables.$font-size-lg;
+ padding: variables.$layout-spacing;
}
.calendar-header,
@@ -20,7 +24,7 @@
display: flex;
flex-wrap: wrap;
justify-content: center;
- padding: $layout-spacing 0;
+ padding: variables.$layout-spacing 0;
.calendar-date {
flex: 0 0 14.28%; // 7 calendar-items each row
@@ -29,62 +33,65 @@
}
.calendar-header {
- background: $bg-color;
- border-bottom: $border-width solid $border-color;
- color: $gray-color;
- font-size: $font-size-sm;
+ background: variables.$bg-color;
+ border-bottom: variables.$border-width solid variables.$border-color;
+ color: variables.$gray-color;
+ font-size: variables.$font-size-sm;
text-align: center;
}
.calendar-body {
- color: $gray-color-dark;
+ color: variables.$gray-color-dark;
}
.calendar-date {
border: 0;
- padding: $unit-1;
+ padding: variables.$unit-1;
.date-item {
appearance: none;
background: transparent;
- border: $border-width solid transparent;
+ border: variables.$border-width solid transparent;
border-radius: 50%;
- color: $gray-color-dark;
+ color: variables.$gray-color-dark;
cursor: pointer;
- font-size: $font-size-sm;
- height: $unit-7;
- line-height: $unit-5;
+ font-size: variables.$font-size-sm;
+ height: variables.$unit-7;
+ line-height: variables.$unit-5;
outline: none;
- padding: $unit-h;
+ padding: variables.$unit-h;
position: relative;
text-align: center;
text-decoration: none;
- transition: background .2s, border .2s, box-shadow .2s, color .2s;
+ transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
vertical-align: middle;
white-space: nowrap;
- width: $unit-7;
+ width: variables.$unit-7;
&.date-today {
- border-color: $secondary-color-dark;
- color: $primary-color;
+ border-color: variables.$secondary-color-dark;
+ color: variables.$primary-color;
}
&:focus {
- @include control-shadow();
+ @include mixins.control-shadow();
}
&:focus,
&:hover {
- background: $secondary-color-light;
- border-color: $secondary-color-dark;
- color: $primary-color;
+ background: variables.$secondary-color-light;
+ border-color: variables.$secondary-color-dark;
+ color: variables.$primary-color;
text-decoration: none;
}
&:active,
&.active {
- background: $primary-color-dark;
- border-color: darken($primary-color-dark, 5%);
- color: $light-color;
+ background: variables.$primary-color-dark;
+ border-color: color.adjust(
+ variables.$primary-color-dark,
+ $lightness: -5%
+ );
+ color: variables.$light-color;
}
// Calendar badge support
@@ -103,7 +110,7 @@
&:disabled,
&.disabled {
cursor: default;
- opacity: .25;
+ opacity: 0.25;
pointer-events: none;
}
}
@@ -112,7 +119,7 @@
&.next-month {
.date-item,
.calendar-event {
- opacity: .25;
+ opacity: 0.25;
}
}
}
@@ -121,9 +128,9 @@
position: relative;
&::before {
- background: $secondary-color;
- content: "";
- height: $unit-7;
+ background: variables.$secondary-color;
+ content: '';
+ height: variables.$unit-7;
left: 0;
position: absolute;
right: 0;
@@ -144,14 +151,17 @@
&.range-start,
&.range-end {
.date-item {
- background: $primary-color-dark;
- border-color: darken($primary-color-dark, 5%);
- color: $light-color;
+ background: variables.$primary-color-dark;
+ border-color: color.adjust(
+ variables.$primary-color-dark,
+ $lightness: -5%
+ );
+ color: variables.$light-color;
}
}
.date-item {
- color: $primary-color;
+ color: variables.$primary-color;
}
}
@@ -161,8 +171,8 @@
padding: 0;
.calendar-date {
- border-bottom: $border-width solid $border-color;
- border-right: $border-width solid $border-color;
+ border-bottom: variables.$border-width solid variables.$border-color;
+ border-right: variables.$border-width solid variables.$border-color;
display: flex;
flex-direction: column;
height: 5.5rem;
@@ -171,7 +181,7 @@
&:nth-child(7n) {
border-right: 0;
}
- &:nth-last-child(-n+7) {
+ &:nth-last-child(-n + 7) {
border-bottom: 0;
}
}
@@ -179,9 +189,9 @@
.date-item {
align-self: flex-end;
- height: $unit-7;
- margin-right: $layout-spacing-sm;
- margin-top: $layout-spacing-sm;
+ height: variables.$unit-7;
+ margin-right: variables.$layout-spacing-sm;
+ margin-top: variables.$layout-spacing-sm;
}
.calendar-range {
@@ -205,14 +215,14 @@
flex-grow: 1;
line-height: 1;
overflow-y: auto;
- padding: $layout-spacing-sm;
+ padding: variables.$layout-spacing-sm;
}
.calendar-event {
- border-radius: $border-radius;
- font-size: $font-size-sm;
+ border-radius: variables.$border-radius;
+ font-size: variables.$font-size-sm;
display: block;
- margin: $unit-h auto;
+ margin: variables.$unit-h auto;
overflow: hidden;
padding: 3px 4px;
text-overflow: ellipsis;
diff --git a/src/_cards.scss b/src/_cards.scss
index 6b712e153..b6b6af4a1 100644
--- a/src/_cards.scss
+++ b/src/_cards.scss
@@ -1,19 +1,21 @@
+@use "variables";
+
// Cards
.card {
- background: $bg-color-light;
- border: $border-width solid $border-color;
- border-radius: $border-radius;
+ background: variables.$bg-color-light;
+ border: variables.$border-width solid variables.$border-color;
+ border-radius: variables.$border-radius;
display: flex;
flex-direction: column;
.card-header,
.card-body,
.card-footer {
- padding: $layout-spacing-lg;
+ padding: variables.$layout-spacing-lg;
padding-bottom: 0;
&:last-child {
- padding-bottom: $layout-spacing-lg;
+ padding-bottom: variables.$layout-spacing-lg;
}
}
@@ -22,21 +24,21 @@
}
.card-image {
- padding-top: $layout-spacing-lg;
+ padding-top: variables.$layout-spacing-lg;
&:first-child {
padding-top: 0;
img {
- border-top-left-radius: $border-radius;
- border-top-right-radius: $border-radius;
+ border-top-left-radius: variables.$border-radius;
+ border-top-right-radius: variables.$border-radius;
}
}
&:last-child {
img {
- border-bottom-left-radius: $border-radius;
- border-bottom-right-radius: $border-radius;
+ border-bottom-left-radius: variables.$border-radius;
+ border-bottom-right-radius: variables.$border-radius;
}
}
}
diff --git a/src/_carousels.scss b/src/_carousels.scss
index 66dc51b27..0297def56 100644
--- a/src/_carousels.scss
+++ b/src/_carousels.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
// Carousels
// The number of carousel images
$carousel-number: 8;
@@ -5,21 +7,21 @@ $carousel-number: 8;
%carousel-image-checked {
animation: carousel-slidein .75s ease-in-out 1;
opacity: 1;
- z-index: $zindex-1;
+ z-index: variables.$zindex-1;
}
%carousel-nav-checked {
- color: $gray-color-light;
+ color: variables.$gray-color-light;
}
.carousel {
- background: $bg-color;
+ background: variables.$bg-color;
display: block;
overflow: hidden;
position: relative;
width: 100%;
-webkit-overflow-scrolling: touch;
- z-index: $zindex-0;
+ z-index: variables.$zindex-0;
.carousel-container {
height: 100%;
@@ -51,15 +53,15 @@ $carousel-number: 8;
.item-prev,
.item-next {
- background: rgba($gray-color-light, .25);
- border-color: rgba($gray-color-light, .5);
- color: $gray-color-light;
+ background: rgba(variables.$gray-color-light, .25);
+ border-color: rgba(variables.$gray-color-light, .5);
+ color: variables.$gray-color-light;
opacity: 0;
position: absolute;
top: 50%;
transition: all .4s;
transform: translateY(-50%);
- z-index: $zindex-1;
+ z-index: variables.$zindex-1;
}
.item-prev {
left: 1rem;
@@ -84,21 +86,21 @@ $carousel-number: 8;
}
.carousel-nav {
- bottom: $layout-spacing;
+ bottom: variables.$layout-spacing;
display: flex;
justify-content: center;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 10rem;
- z-index: $zindex-1;
+ z-index: variables.$zindex-1;
.nav-item {
- color: rgba($gray-color-light, .5);
+ color: rgba(variables.$gray-color-light, .5);
display: block;
flex: 1 0 auto;
- height: $unit-8;
- margin: $unit-1;
+ height: variables.$unit-8;
+ margin: variables.$unit-1;
max-width: 2.5rem;
position: relative;
@@ -106,7 +108,7 @@ $carousel-number: 8;
background: currentColor;
content: "";
display: block;
- height: $unit-h;
+ height: variables.$unit-h;
position: absolute;
top: .5rem;
width: 100%;
diff --git a/src/_chips.scss b/src/_chips.scss
index 6729c5608..d10401ac1 100644
--- a/src/_chips.scss
+++ b/src/_chips.scss
@@ -1,29 +1,31 @@
+@use "variables";
+
// Chips
.chip {
align-items: center;
- background: $bg-color-dark;
+ background: variables.$bg-color-dark;
border-radius: 5rem;
display: inline-flex;
font-size: 90%;
- height: $unit-6;
- line-height: $unit-4;
- margin: $unit-h;
- max-width: $control-width-sm;
+ height: variables.$unit-6;
+ line-height: variables.$unit-4;
+ margin: variables.$unit-h;
+ max-width: variables.$control-width-sm;
overflow: hidden;
- padding: $unit-1 $unit-2;
+ padding: variables.$unit-1 variables.$unit-2;
text-decoration: none;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
&.active {
- background: $primary-color;
- color: $light-color;
+ background: variables.$primary-color;
+ color: variables.$light-color;
}
.avatar {
- margin-left: -$unit-2;
- margin-right: $unit-1;
+ margin-left: -(variables.$unit-2);
+ margin-right: variables.$unit-1;
}
.btn-clear {
diff --git a/src/_codes.scss b/src/_codes.scss
index 817452bde..7f78aa866 100644
--- a/src/_codes.scss
+++ b/src/_codes.scss
@@ -1,26 +1,30 @@
+@use "sass:color";
+@use "mixins";
+@use "variables";
+
// Codes
code {
- @include label-base();
- @include label-variant($code-color, lighten($code-color, 42.5%));
+ @include mixins.label-base();
+ @include mixins.label-variant(variables.$code-color, color.adjust(variables.$code-color, $lightness: 42.5%));
font-size: 85%;
}
.code {
- border-radius: $border-radius;
- color: $body-font-color;
+ border-radius: variables.$border-radius;
+ color: variables.$body-font-color;
position: relative;
&::before {
- color: $gray-color;
+ color: variables.$gray-color;
content: attr(data-lang);
- font-size: $font-size-sm;
+ font-size: variables.$font-size-sm;
position: absolute;
- right: $layout-spacing;
- top: $unit-h;
+ right: variables.$layout-spacing;
+ top: variables.$unit-h;
}
code {
- background: $bg-color;
+ background: variables.$bg-color;
color: inherit;
display: block;
line-height: 1.5;
diff --git a/src/_comparison-sliders.scss b/src/_comparison-sliders.scss
index ec3609b3c..8639f347d 100644
--- a/src/_comparison-sliders.scss
+++ b/src/_comparison-sliders.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
// Image comparison slider
// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
.comparison-slider {
@@ -30,7 +32,7 @@
z-index: 1;
.comparison-label {
- right: $unit-4;
+ right: variables.$unit-4;
}
}
@@ -46,38 +48,38 @@
height: 100%;
left: 0;
position: absolute;
- right: $unit-4;
+ right: variables.$unit-4;
top: 0;
- z-index: $zindex-0;
+ z-index: variables.$zindex-0;
}
&::after {
background: currentColor;
border-radius: 50%;
box-shadow: 0 -5px, 0 5px;
- color: $light-color;
+ color: variables.$light-color;
content: "";
height: 3px;
pointer-events: none;
position: absolute;
- right: $unit-2;
+ right: variables.$unit-2;
top: 50%;
transform: translate(50%, -50%);
width: 3px;
}
.comparison-label {
- left: $unit-4;
+ left: variables.$unit-4;
}
}
.comparison-resizer {
animation: first-run 1.5s 1 ease-in-out;
cursor: ew-resize;
- height: $unit-4;
+ height: variables.$unit-4;
left: 0;
max-width: 100%;
- min-width: $unit-4;
+ min-width: variables.$unit-4;
opacity: 0;
outline: none;
position: relative;
@@ -88,10 +90,10 @@
}
.comparison-label {
- background: rgba($dark-color, .5);
- bottom: $unit-4;
- color: $light-color;
- padding: $unit-1 $unit-2;
+ background: rgba(variables.$dark-color, .5);
+ bottom: variables.$unit-4;
+ color: variables.$light-color;
+ padding: variables.$unit-1 variables.$unit-2;
position: absolute;
user-select: none;
}
@@ -102,13 +104,13 @@
width: 0;
}
25% {
- width: $unit-12;
+ width: variables.$unit-12;
}
50% {
- width: $unit-4;
+ width: variables.$unit-4;
}
75% {
- width: $unit-6;
+ width: variables.$unit-6;
}
100% {
width: 0;
diff --git a/src/_dropdowns.scss b/src/_dropdowns.scss
index 324440ba4..91dc3c424 100644
--- a/src/_dropdowns.scss
+++ b/src/_dropdowns.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
// Dropdown
.dropdown {
display: inline-block;
@@ -29,8 +31,8 @@
// Fix dropdown-toggle border radius in button groups
.btn-group {
.dropdown-toggle:nth-last-child(2) {
- border-bottom-right-radius: $border-radius;
- border-top-right-radius: $border-radius;
+ border-bottom-right-radius: variables.$border-radius;
+ border-top-right-radius: variables.$border-radius;
}
}
}
diff --git a/src/_empty.scss b/src/_empty.scss
index accba9ca8..056d2a512 100644
--- a/src/_empty.scss
+++ b/src/_empty.scss
@@ -1,21 +1,23 @@
+@use "variables";
+
// Empty states (or Blank slates)
.empty {
- background: $bg-color;
- border-radius: $border-radius;
- color: $gray-color-dark;
+ background: variables.$bg-color;
+ border-radius: variables.$border-radius;
+ color: variables.$gray-color-dark;
text-align: center;
- padding: $unit-16 $unit-8;
+ padding: variables.$unit-16 variables.$unit-8;
.empty-icon {
- margin-bottom: $layout-spacing-lg;
+ margin-bottom: variables.$layout-spacing-lg;
}
.empty-title,
.empty-subtitle {
- margin: $layout-spacing auto;
+ margin: variables.$layout-spacing auto;
}
.empty-action {
- margin-top: $layout-spacing-lg;
+ margin-top: variables.$layout-spacing-lg;
}
}
diff --git a/src/_filters.scss b/src/_filters.scss
index 37ccc89ed..ba4716eaa 100644
--- a/src/_filters.scss
+++ b/src/_filters.scss
@@ -1,10 +1,12 @@
+@use "variables";
+
// Filters
// The number of filter options
$filter-number: 8 !default;
%filter-checked-nav {
- background: $primary-color;
- color: $light-color;
+ background: variables.$primary-color;
+ color: variables.$light-color;
}
%filter-checked-body {
@@ -13,7 +15,7 @@ $filter-number: 8 !default;
.filter {
.filter-nav {
- margin: $layout-spacing 0;
+ margin: variables.$layout-spacing 0;
}
.filter-body {
diff --git a/src/_forms.scss b/src/_forms.scss
index 20a6b4fa3..7b7547aa6 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -1,74 +1,78 @@
+@use "sass:color";
+@use "mixins";
+@use "variables";
+
// Forms
.form-group {
&:not(:last-child) {
- margin-bottom: $layout-spacing;
+ margin-bottom: variables.$layout-spacing;
}
}
fieldset {
- margin-bottom: $layout-spacing-lg;
+ margin-bottom: variables.$layout-spacing-lg;
}
legend {
- font-size: $font-size-lg;
+ font-size: variables.$font-size-lg;
font-weight: 500;
- margin-bottom: $layout-spacing-lg;
+ margin-bottom: variables.$layout-spacing-lg;
}
// Form element: Label
.form-label {
display: block;
- line-height: $line-height;
- padding: $control-padding-y + $border-width 0;
+ line-height: variables.$line-height;
+ padding: variables.$control-padding-y + variables.$border-width 0;
&.label-sm {
- font-size: $font-size-sm;
- padding: $control-padding-y-sm + $border-width 0;
+ font-size: variables.$font-size-sm;
+ padding: variables.$control-padding-y-sm + variables.$border-width 0;
}
&.label-lg {
- font-size: $font-size-lg;
- padding: $control-padding-y-lg + $border-width 0;
+ font-size: variables.$font-size-lg;
+ padding: variables.$control-padding-y-lg + variables.$border-width 0;
}
}
// Form element: Input
.form-input {
appearance: none;
- background: $bg-color-light;
+ background: variables.$bg-color-light;
background-image: none;
- border: $border-width solid $border-color-dark;
- border-radius: $border-radius;
- color: $body-font-color;
+ border: variables.$border-width solid variables.$border-color-dark;
+ border-radius: variables.$border-radius;
+ color: variables.$body-font-color;
display: block;
- font-size: $font-size;
- height: $control-size;
- line-height: $line-height;
+ font-size: variables.$font-size;
+ height: variables.$control-size;
+ line-height: variables.$line-height;
max-width: 100%;
outline: none;
- padding: $control-padding-y $control-padding-x;
+ padding: variables.$control-padding-y variables.$control-padding-x;
position: relative;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
width: 100%;
&:focus {
- @include control-shadow();
- border-color: $primary-color;
+ @include mixins.control-shadow();
+ border-color: variables.$primary-color;
}
&::placeholder {
- color: $gray-color;
+ color: variables.$gray-color;
}
// Input sizes
&.input-sm {
- font-size: $font-size-sm;
- height: $control-size-sm;
- padding: $control-padding-y-sm $control-padding-x-sm;
+ font-size: variables.$font-size-sm;
+ height: variables.$control-size-sm;
+ padding: variables.$control-padding-y-sm variables.$control-padding-x-sm;
}
&.input-lg {
- font-size: $font-size-lg;
- height: $control-size-lg;
- padding: $control-padding-y-lg $control-padding-x-lg;
+ font-size: variables.$font-size-lg;
+ height: variables.$control-size-lg;
+ padding: variables.$control-padding-y-lg variables.$control-padding-x-lg;
}
&.input-inline {
@@ -94,38 +98,38 @@ textarea.form-input {
// Form element: Input hint
.form-input-hint {
- color: $gray-color;
- font-size: $font-size-sm;
- margin-top: $unit-1;
+ color: variables.$gray-color;
+ font-size: variables.$font-size-sm;
+ margin-top: variables.$unit-1;
.has-success &,
.is-success + & {
- color: $success-color;
+ color: variables.$success-color;
}
.has-error &,
.is-error + & {
- color: $error-color;
+ color: variables.$error-color;
}
}
// Form element: Select
.form-select {
appearance: none;
- border: $border-width solid $border-color-dark;
- border-radius: $border-radius;
+ border: variables.$border-width solid variables.$border-color-dark;
+ border-radius: variables.$border-radius;
color: inherit;
- font-size: $font-size;
- height: $control-size;
- line-height: $line-height;
+ font-size: variables.$font-size;
+ height: variables.$control-size;
+ line-height: variables.$line-height;
outline: none;
- padding: $control-padding-y $control-padding-x;
+ padding: variables.$control-padding-y variables.$control-padding-x;
vertical-align: middle;
width: 100%;
- background: $bg-color-light;
+ background: variables.$bg-color-light;
&:focus {
- @include control-shadow();
- border-color: $primary-color;
+ @include mixins.control-shadow();
+ border-color: variables.$primary-color;
}
&::-ms-expand {
display: none;
@@ -133,30 +137,30 @@ textarea.form-input {
// Select sizes
&.select-sm {
- font-size: $font-size-sm;
- height: $control-size-sm;
- padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
+ font-size: variables.$font-size-sm;
+ height: variables.$control-size-sm;
+ padding: variables.$control-padding-y-sm (variables.$control-icon-size + variables.$control-padding-x-sm) variables.$control-padding-y-sm variables.$control-padding-x-sm;
}
&.select-lg {
- font-size: $font-size-lg;
- height: $control-size-lg;
- padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
+ font-size: variables.$font-size-lg;
+ height: variables.$control-size-lg;
+ padding: variables.$control-padding-y-lg (variables.$control-icon-size + variables.$control-padding-x-lg) variables.$control-padding-y-lg variables.$control-padding-x-lg;
}
// Multiple select
&[size],
&[multiple] {
height: auto;
- padding: $control-padding-y $control-padding-x;
+ padding: variables.$control-padding-y variables.$control-padding-x;
option {
- padding: $unit-h $unit-1;
+ padding: variables.$unit-h variables.$unit-1;
}
}
&:not([multiple]):not([size]) {
- background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
- padding-right: $control-icon-size + $control-padding-x;
+ background: variables.$bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
+ padding-right: variables.$control-icon-size + variables.$control-padding-x;
}
}
@@ -166,33 +170,33 @@ textarea.form-input {
position: relative;
.form-icon {
- height: $control-icon-size;
- margin: 0 $control-padding-y;
+ height: variables.$control-icon-size;
+ margin: 0 variables.$control-padding-y;
position: absolute;
top: 50%;
transform: translateY(-50%);
- width: $control-icon-size;
- z-index: $zindex-0 + 1;
+ width: variables.$control-icon-size;
+ z-index: variables.$zindex-0 + 1;
}
}
.has-icon-left {
.form-icon {
- left: $border-width;
+ left: variables.$border-width;
}
.form-input {
- padding-left: $control-icon-size + $control-padding-y * 2;
+ padding-left: variables.$control-icon-size + variables.$control-padding-y * 2;
}
}
.has-icon-right {
.form-icon {
- right: $border-width;
+ right: variables.$border-width;
}
.form-input {
- padding-right: $control-icon-size + $control-padding-y * 2;
+ padding-right: variables.$control-icon-size + variables.$control-padding-y * 2;
}
}
@@ -201,10 +205,10 @@ textarea.form-input {
.form-radio,
.form-switch {
display: block;
- line-height: $line-height;
- margin: ($control-size - $control-size-sm) / 2 0;
- min-height: $control-size-sm;
- padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
+ line-height: variables.$line-height;
+ margin: (variables.$control-size - variables.$control-size-sm) / 2 0;
+ min-height: variables.$control-size-sm;
+ padding: ((variables.$control-size-sm - variables.$line-height) / 2) variables.$control-padding-x ((variables.$control-size-sm - variables.$line-height) / 2) (variables.$control-icon-size + variables.$control-padding-x);
position: relative;
input {
@@ -215,17 +219,17 @@ textarea.form-input {
position: absolute;
width: 1px;
&:focus + .form-icon {
- @include control-shadow();
- border-color: $primary-color;
+ @include mixins.control-shadow();
+ border-color: variables.$primary-color;
}
&:checked + .form-icon {
- background: $primary-color;
- border-color: $primary-color;
+ background: variables.$primary-color;
+ border-color: variables.$primary-color;
}
}
.form-icon {
- border: $border-width solid $border-color-dark;
+ border: variables.$border-width solid variables.$border-color-dark;
cursor: pointer;
display: inline-block;
position: absolute;
@@ -234,42 +238,42 @@ textarea.form-input {
// Input checkbox, radio and switch sizes
&.input-sm {
- font-size: $font-size-sm;
+ font-size: variables.$font-size-sm;
margin: 0;
}
&.input-lg {
- font-size: $font-size-lg;
- margin: ($control-size-lg - $control-size-sm) / 2 0;
+ font-size: variables.$font-size-lg;
+ margin: (variables.$control-size-lg - variables.$control-size-sm) / 2 0;
}
}
.form-checkbox,
.form-radio {
.form-icon {
- background: $bg-color-light;
- height: $control-icon-size;
+ background: variables.$bg-color-light;
+ height: variables.$control-icon-size;
left: 0;
- top: ($control-size-sm - $control-icon-size) / 2;
- width: $control-icon-size;
+ top: (variables.$control-size-sm - variables.$control-icon-size) / 2;
+ width: variables.$control-icon-size;
}
input {
&:active + .form-icon {
- background: $bg-color-dark;
+ background: variables.$bg-color-dark;
}
}
}
.form-checkbox {
.form-icon {
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
}
input {
&:checked + .form-icon {
&::before {
background-clip: padding-box;
- border: $border-width-lg solid $light-color;
+ border: variables.$border-width-lg solid variables.$light-color;
border-left-width: 0;
border-top-width: 0;
content: "";
@@ -284,10 +288,10 @@ textarea.form-input {
}
}
&:indeterminate + .form-icon {
- background: $primary-color;
- border-color: $primary-color;
+ background: variables.$primary-color;
+ border-color: variables.$primary-color;
&::before {
- background: $bg-color-light;
+ background: variables.$bg-color-light;
content: "";
height: 2px;
left: 50%;
@@ -308,7 +312,7 @@ textarea.form-input {
input {
&:checked + .form-icon {
&::before {
- background: $bg-color-light;
+ background: variables.$bg-color-light;
border-radius: 50%;
content: "";
height: 6px;
@@ -324,27 +328,27 @@ textarea.form-input {
// Form element: Switch
.form-switch {
- padding-left: ($unit-8 + $control-padding-x);
+ padding-left: (variables.$unit-8 + variables.$control-padding-x);
.form-icon {
- background: $gray-color;
+ background: variables.$gray-color;
background-clip: padding-box;
- border-radius: $unit-2 + $border-width;
- height: $unit-4 + $border-width * 2;
+ border-radius: variables.$unit-2 + variables.$border-width;
+ height: variables.$unit-4 + variables.$border-width * 2;
left: 0;
- top: ($control-size-sm - $unit-4) / 2 - $border-width;
- width: $unit-8;
+ top: (variables.$control-size-sm - variables.$unit-4) / 2 - variables.$border-width;
+ width: variables.$unit-8;
&::before {
- background: $bg-color-light;
+ background: variables.$bg-color-light;
border-radius: 50%;
content: "";
display: block;
- height: $unit-4;
+ height: variables.$unit-4;
left: 0;
position: absolute;
top: 0;
transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
- width: $unit-4;
+ width: variables.$unit-4;
}
}
@@ -356,7 +360,7 @@ textarea.form-input {
}
&:active + .form-icon {
&::before {
- background: $bg-color;
+ background: variables.$bg-color;
}
}
}
@@ -367,21 +371,21 @@ textarea.form-input {
display: flex;
.input-group-addon {
- background: $bg-color;
- border: $border-width solid $border-color-dark;
- border-radius: $border-radius;
- line-height: $line-height;
- padding: $control-padding-y $control-padding-x;
+ background: variables.$bg-color;
+ border: variables.$border-width solid variables.$border-color-dark;
+ border-radius: variables.$border-radius;
+ line-height: variables.$line-height;
+ padding: variables.$control-padding-y variables.$control-padding-x;
white-space: nowrap;
&.addon-sm {
- font-size: $font-size-sm;
- padding: $control-padding-y-sm $control-padding-x-sm;
+ font-size: variables.$font-size-sm;
+ padding: variables.$control-padding-y-sm variables.$control-padding-x-sm;
}
&.addon-lg {
- font-size: $font-size-lg;
- padding: $control-padding-y-lg $control-padding-x-lg;
+ font-size: variables.$font-size-lg;
+ padding: variables.$control-padding-y-lg variables.$control-padding-x-lg;
}
}
@@ -392,7 +396,7 @@ textarea.form-input {
}
.input-group-btn {
- z-index: $zindex-0;
+ z-index: variables.$zindex-0;
}
.form-input,
@@ -405,15 +409,15 @@ textarea.form-input {
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
- margin-left: -$border-width;
+ margin-left: -(variables.$border-width);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
- margin-left: -$border-width;
+ margin-left: -(variables.$border-width);
}
&:focus {
- z-index: $zindex-0 + 1;
+ z-index: variables.$zindex-0 + 1;
}
}
@@ -431,19 +435,19 @@ textarea.form-input {
.form-select {
.has-success &,
&.is-success {
- background: lighten($success-color, 53%);
- border-color: $success-color;
+ background: color.adjust(variables.$success-color, $lightness: 53%);
+ border-color: variables.$success-color;
&:focus {
- @include control-shadow($success-color);
+ @include mixins.control-shadow(variables.$success-color);
}
}
.has-error &,
&.is-error {
- background: lighten($error-color, 53%);
- border-color: $error-color;
+ background: color.adjust(variables.$error-color, $lightness: 53%);
+ border-color: variables.$error-color;
&:focus {
- @include control-shadow($error-color);
+ @include mixins.control-shadow(variables.$error-color);
}
}
}
@@ -454,18 +458,18 @@ textarea.form-input {
.has-error &,
&.is-error {
.form-icon {
- border-color: $error-color;
+ border-color: variables.$error-color;
}
input {
&:checked + .form-icon {
- background: $error-color;
- border-color: $error-color;
+ background: variables.$error-color;
+ border-color: variables.$error-color;
}
&:focus + .form-icon {
- @include control-shadow($error-color);
- border-color: $error-color;
+ @include mixins.control-shadow(variables.$error-color);
+ border-color: variables.$error-color;
}
}
}
@@ -476,8 +480,8 @@ textarea.form-input {
&.is-error {
input {
&:indeterminate + .form-icon {
- background: $error-color;
- border-color: $error-color;
+ background: variables.$error-color;
+ border-color: variables.$error-color;
}
}
}
@@ -487,14 +491,14 @@ textarea.form-input {
.form-input {
&:not(:placeholder-shown) {
&:invalid {
- border-color: $error-color;
+ border-color: variables.$error-color;
&:focus {
- @include control-shadow($error-color);
- background: lighten($error-color, 53%);
+ @include mixins.control-shadow(variables.$error-color);
+ background: color.adjust(variables.$error-color, $lightness: 53%);
}
& + .form-input-hint {
- color: $error-color;
+ color: variables.$error-color;
}
}
}
@@ -505,7 +509,7 @@ textarea.form-input {
.form-select {
&:disabled,
&.disabled {
- background-color: $bg-color-dark;
+ background-color: variables.$bg-color-dark;
cursor: not-allowed;
opacity: .5;
}
@@ -513,7 +517,7 @@ textarea.form-input {
.form-input {
&[readonly] {
- background-color: $bg-color;
+ background-color: variables.$bg-color;
}
}
@@ -521,7 +525,7 @@ input {
&:disabled,
&.disabled {
& + .form-icon {
- background: $bg-color-dark;
+ background: variables.$bg-color-dark;
cursor: not-allowed;
opacity: .5;
}
@@ -533,7 +537,7 @@ input {
&:disabled,
&.disabled {
& + .form-icon::before {
- background: $bg-color-light;
+ background: variables.$bg-color-light;
}
}
}
@@ -541,7 +545,7 @@ input {
// Form horizontal
.form-horizontal {
- padding: $layout-spacing 0;
+ padding: variables.$layout-spacing 0;
.form-group {
display: flex;
diff --git a/src/_hero.scss b/src/_hero.scss
index 004446181..910d0342c 100644
--- a/src/_hero.scss
+++ b/src/_hero.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
// Hero
.hero {
display: flex;
@@ -17,6 +19,6 @@
}
.hero-body {
- padding: $layout-spacing;
+ padding: variables.$layout-spacing;
}
}
\ No newline at end of file
diff --git a/src/_icons.scss b/src/_icons.scss
index 4f3c5ce66..faa8095f7 100644
--- a/src/_icons.scss
+++ b/src/_icons.scss
@@ -1,5 +1,5 @@
// CSS Icons
-@import "icons/icons-core";
-@import "icons/icons-navigation";
-@import "icons/icons-action";
-@import "icons/icons-object";
\ No newline at end of file
+@forward "icons/icons-core";
+@forward "icons/icons-navigation";
+@forward "icons/icons-action";
+@forward "icons/icons-object";
diff --git a/src/_labels.scss b/src/_labels.scss
index ca693cd2c..adcfd7677 100644
--- a/src/_labels.scss
+++ b/src/_labels.scss
@@ -1,34 +1,38 @@
+@use "sass:color";
+@use "mixins";
+@use "variables";
+
// Labels
.label {
- @include label-base();
- @include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
+ @include mixins.label-base();
+ @include mixins.label-variant(color.adjust(variables.$body-font-color, $lightness: 5%), variables.$bg-color-dark);
display: inline-block;
// Label rounded
&.label-rounded {
border-radius: 5rem;
padding-left: .4rem;
- padding-right: .4rem;
+ padding-right: .4rem;
}
// Label colors
&.label-primary {
- @include label-variant($light-color, $primary-color);
+ @include mixins.label-variant(variables.$light-color, variables.$primary-color);
}
&.label-secondary {
- @include label-variant($primary-color, $secondary-color);
+ @include mixins.label-variant(variables.$primary-color, variables.$secondary-color);
}
&.label-success {
- @include label-variant($light-color, $success-color);
+ @include mixins.label-variant(variables.$light-color, variables.$success-color);
}
&.label-warning {
- @include label-variant($light-color, $warning-color);
+ @include mixins.label-variant(variables.$light-color, variables.$warning-color);
}
&.label-error {
- @include label-variant($light-color, $error-color);
+ @include mixins.label-variant(variables.$light-color, variables.$error-color);
}
}
diff --git a/src/_layout.scss b/src/_layout.scss
index e6bad9ad0..10edc4cb5 100644
--- a/src/_layout.scss
+++ b/src/_layout.scss
@@ -1,31 +1,33 @@
+@use "variables";
+
// Layout
.container {
margin-left: auto;
margin-right: auto;
- padding-left: $layout-spacing;
- padding-right: $layout-spacing;
+ padding-left: variables.$layout-spacing;
+ padding-right: variables.$layout-spacing;
width: 100%;
- $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
+ $grid-spacing: (variables.$layout-spacing / (variables.$layout-spacing * 0 + 1)) * variables.$html-font-size;
&.grid-xl {
- max-width: $grid-spacing * 2 + $size-xl;
+ max-width: $grid-spacing * 2 + variables.$size-xl;
}
&.grid-lg {
- max-width: $grid-spacing * 2 + $size-lg;
+ max-width: $grid-spacing * 2 + variables.$size-lg;
}
&.grid-md {
- max-width: $grid-spacing * 2 + $size-md;
+ max-width: $grid-spacing * 2 + variables.$size-md;
}
&.grid-sm {
- max-width: $grid-spacing * 2 + $size-sm;
+ max-width: $grid-spacing * 2 + variables.$size-sm;
}
&.grid-xs {
- max-width: $grid-spacing * 2 + $size-xs;
+ max-width: $grid-spacing * 2 + variables.$size-xs;
}
}
@@ -43,8 +45,8 @@
.columns {
display: flex;
flex-wrap: wrap;
- margin-left: -$layout-spacing;
- margin-right: -$layout-spacing;
+ margin-left: -(variables.$layout-spacing);
+ margin-right: -(variables.$layout-spacing);
&.col-gapless {
margin-left: 0;
@@ -64,8 +66,8 @@
.column {
flex: 1;
max-width: 100%;
- padding-left: $layout-spacing;
- padding-right: $layout-spacing;
+ padding-left: variables.$layout-spacing;
+ padding-right: variables.$layout-spacing;
&.col-12,
&.col-11,
@@ -134,7 +136,7 @@
.col-mr-auto {
margin-right: auto;
}
-@media (max-width: $size-xl) {
+@media (max-width: variables.$size-xl) {
.col-xl-12,
.col-xl-11,
.col-xl-10,
@@ -196,7 +198,7 @@
display: block !important;
}
}
-@media (max-width: $size-lg) {
+@media (max-width: variables.$size-lg) {
.col-lg-12,
.col-lg-11,
.col-lg-10,
@@ -258,7 +260,7 @@
display: block !important;
}
}
-@media (max-width: $size-md) {
+@media (max-width: variables.$size-md) {
.col-md-12,
.col-md-11,
.col-md-10,
@@ -320,7 +322,7 @@
display: block !important;
}
}
-@media (max-width: $size-sm) {
+@media (max-width: variables.$size-sm) {
.col-sm-12,
.col-sm-11,
.col-sm-10,
@@ -382,7 +384,7 @@
display: block !important;
}
}
-@media (max-width: $size-xs) {
+@media (max-width: variables.$size-xs) {
.col-xs-12,
.col-xs-11,
.col-xs-10,
diff --git a/src/_media.scss b/src/_media.scss
index 4029e4cdb..e20ad9b03 100644
--- a/src/_media.scss
+++ b/src/_media.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
// Media
// Image responsive
.img-responsive {
@@ -66,10 +68,10 @@ video.video-responsive {
// Figure
.figure {
- margin: 0 0 $layout-spacing 0;
+ margin: 0 0 variables.$layout-spacing 0;
.figure-caption {
- color: $gray-color-dark;
- margin-top: $layout-spacing;
+ color: variables.$gray-color-dark;
+ margin-top: variables.$layout-spacing;
}
}
diff --git a/src/_menus.scss b/src/_menus.scss
index 411cada32..d191f4bea 100644
--- a/src/_menus.scss
+++ b/src/_menus.scss
@@ -1,14 +1,17 @@
+@use "mixins";
+@use "variables";
+
// Menus
.menu {
- @include shadow-variant(.05rem);
- background: $bg-color-light;
- border-radius: $border-radius;
+ @include mixins.shadow-variant(.05rem);
+ background: variables.$bg-color-light;
+ border-radius: variables.$border-radius;
list-style: none;
margin: 0;
- min-width: $control-width-xs;
- padding: $unit-2;
- transform: translateY($layout-spacing-sm);
- z-index: $zindex-3;
+ min-width: variables.$control-width-xs;
+ padding: variables.$unit-2;
+ transform: translateY(variables.$layout-spacing-sm);
+ z-index: variables.$zindex-3;
&.menu-nav {
background: transparent;
@@ -17,37 +20,37 @@
.menu-item {
margin-top: 0;
- padding: 0 $unit-2;
+ padding: 0 variables.$unit-2;
position: relative;
text-decoration: none;
& > a {
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
color: inherit;
display: block;
- margin: 0 (-$unit-2);
- padding: $unit-1 $unit-2;
+ margin: 0 (-(variables.$unit-2));
+ padding: variables.$unit-1 variables.$unit-2;
text-decoration: none;
&:focus,
&:hover {
- background: $secondary-color;
- color: $primary-color;
+ background: variables.$secondary-color;
+ color: variables.$primary-color;
}
&:active,
&.active {
- background: $secondary-color;
- color: $primary-color;
+ background: variables.$secondary-color;
+ color: variables.$primary-color;
}
}
.form-checkbox,
.form-radio,
.form-switch {
- margin: $unit-h 0;
+ margin: variables.$unit-h 0;
}
& + .menu-item {
- margin-top: $unit-1;
+ margin-top: variables.$unit-1;
}
}
@@ -60,7 +63,7 @@
top: 0;
.label {
- margin-right: $unit-2;
+ margin-right: variables.$unit-2;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/_meters.scss b/src/_meters.scss
index 9fd98b0e9..cc8b8c685 100644
--- a/src/_meters.scss
+++ b/src/_meters.scss
@@ -1,13 +1,15 @@
+@use "variables";
+
// Meters
// Credit: https://css-tricks.com/html5-meter-element/
.meter {
appearance: none;
- background: $bg-color;
+ background: variables.$bg-color;
border: 0;
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
display: block;
width: 100%;
- height: $unit-4;
+ height: variables.$unit-4;
&::-webkit-meter-inner-element {
display: block;
@@ -17,41 +19,41 @@
&::-webkit-meter-optimum-value,
&::-webkit-meter-suboptimum-value,
&::-webkit-meter-even-less-good-value {
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
}
&::-webkit-meter-bar {
- background: $bg-color;
+ background: variables.$bg-color;
}
&::-webkit-meter-optimum-value {
- background: $success-color;
+ background: variables.$success-color;
}
&::-webkit-meter-suboptimum-value {
- background: $warning-color;
+ background: variables.$warning-color;
}
&::-webkit-meter-even-less-good-value {
- background: $error-color;
+ background: variables.$error-color;
}
&::-moz-meter-bar,
&:-moz-meter-optimum,
&:-moz-meter-sub-optimum,
&:-moz-meter-sub-sub-optimum {
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
}
&:-moz-meter-optimum::-moz-meter-bar {
- background: $success-color;
+ background: variables.$success-color;
}
&:-moz-meter-sub-optimum::-moz-meter-bar {
- background: $warning-color;
+ background: variables.$warning-color;
}
&:-moz-meter-sub-sub-optimum::-moz-meter-bar {
- background: $error-color;
+ background: variables.$error-color;
}
}
diff --git a/src/_mixins.scss b/src/_mixins.scss
index d3a28d555..bc097a27f 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -1,10 +1,10 @@
// Mixins
-@import "mixins/avatar";
-@import "mixins/button";
-@import "mixins/clearfix";
-@import "mixins/color";
-@import "mixins/label";
-@import "mixins/position";
-@import "mixins/shadow";
-@import "mixins/text";
-@import "mixins/toast";
\ No newline at end of file
+@forward "mixins/avatar";
+@forward "mixins/button";
+@forward "mixins/clearfix";
+@forward "mixins/color";
+@forward "mixins/label";
+@forward "mixins/position";
+@forward "mixins/shadow";
+@forward "mixins/text";
+@forward "mixins/toast";
diff --git a/src/_modals.scss b/src/_modals.scss
index a7b3f10ec..493062105 100644
--- a/src/_modals.scss
+++ b/src/_modals.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "variables";
+
// Modals
.modal {
align-items: center;
@@ -7,7 +10,7 @@
left: 0;
opacity: 0;
overflow: hidden;
- padding: $layout-spacing;
+ padding: variables.$layout-spacing;
position: fixed;
right: 0;
top: 0;
@@ -16,10 +19,10 @@
&.active {
display: flex;
opacity: 1;
- z-index: $zindex-4;
+ z-index: variables.$zindex-4;
.modal-overlay {
- background: rgba($bg-color, .75);
+ background: rgba(variables.$bg-color, .75);
bottom: 0;
cursor: default;
display: block;
@@ -31,38 +34,38 @@
.modal-container {
animation: slide-down .2s ease 1;
- z-index: $zindex-0;
+ z-index: variables.$zindex-0;
}
}
&.modal-sm {
.modal-container {
- max-width: $control-width-sm;
- padding: 0 $unit-2;
+ max-width: variables.$control-width-sm;
+ padding: 0 variables.$unit-2;
}
}
&.modal-lg {
.modal-overlay {
- background: $bg-color-light;
+ background: variables.$bg-color-light;
}
.modal-container {
box-shadow: none;
- max-width: $control-width-lg;
+ max-width: variables.$control-width-lg;
}
}
}
.modal-container {
- @include shadow-variant(.2rem);
- background: $bg-color-light;
- border-radius: $border-radius;
+ @include mixins.shadow-variant(.2rem);
+ background: variables.$bg-color-light;
+ border-radius: variables.$border-radius;
display: flex;
flex-direction: column;
max-height: 75vh;
- max-width: $control-width-md;
- padding: 0 $unit-4;
+ max-width: variables.$control-width-md;
+ padding: 0 variables.$unit-4;
width: 100%;
&.modal-fullheight {
@@ -70,18 +73,18 @@
}
.modal-header {
- color: $dark-color;
- padding: $unit-4;
+ color: variables.$dark-color;
+ padding: variables.$unit-4;
}
.modal-body {
overflow-y: auto;
- padding: $unit-4;
+ padding: variables.$unit-4;
position: relative;
}
.modal-footer {
- padding: $unit-4;
+ padding: variables.$unit-4;
text-align: right;
}
}
diff --git a/src/_navbar.scss b/src/_navbar.scss
index 11642969b..bea631407 100755
--- a/src/_navbar.scss
+++ b/src/_navbar.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
// Navbar
.navbar {
align-items: stretch;
@@ -22,7 +24,7 @@
}
.navbar-brand {
- font-size: $font-size-lg;
+ font-size: variables.$font-size-lg;
text-decoration: none;
}
}
diff --git a/src/_navs.scss b/src/_navs.scss
index 4bedc27b6..717794c3b 100644
--- a/src/_navs.scss
+++ b/src/_navs.scss
@@ -1,34 +1,37 @@
+@use "sass:color";
+@use "variables";
+
// Navs
.nav {
display: flex;
flex-direction: column;
list-style: none;
- margin: $unit-1 0;
+ margin: variables.$unit-1 0;
.nav-item {
a {
- color: $gray-color-dark;
- padding: $unit-1 $unit-2;
+ color: variables.$gray-color-dark;
+ padding: variables.$unit-1 variables.$unit-2;
text-decoration: none;
&:focus,
&:hover {
- color: $primary-color;
+ color: variables.$primary-color;
}
}
&.active {
& > a {
- color: darken($gray-color-dark, 10%);
+ color: color.adjust(variables.$gray-color-dark, $lightness: -10%);
font-weight: bold;
&:focus,
&:hover {
- color: $primary-color;
+ color: variables.$primary-color;
}
}
}
}
& .nav {
- margin-bottom: $unit-2;
- margin-left: $unit-4;
+ margin-bottom: variables.$unit-2;
+ margin-left: variables.$unit-4;
}
}
diff --git a/src/_normalize.scss b/src/_normalize.scss
index a098a84dc..e069cac06 100644
--- a/src/_normalize.scss
+++ b/src/_normalize.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
/* Manually forked from Normalize.css */
/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
@@ -148,7 +150,7 @@ code,
kbd,
pre,
samp {
- font-family: $mono-font-family; /* 1 (changed) */
+ font-family: variables.$mono-font-family; /* 1 (changed) */
font-size: 1em; /* 2 */
}
diff --git a/src/_off-canvas.scss b/src/_off-canvas.scss
index f3b8b9f1c..96d15719f 100644
--- a/src/_off-canvas.scss
+++ b/src/_off-canvas.scss
@@ -1,5 +1,7 @@
+@use "variables";
+
// Off canvas menus
-$off-canvas-breakpoint: $size-lg !default;
+$off-canvas-breakpoint: variables.$size-lg !default;
.off-canvas {
display: flex;
@@ -11,26 +13,26 @@ $off-canvas-breakpoint: $size-lg !default;
.off-canvas-toggle {
display: block;
position: absolute;
- top: $layout-spacing;
+ top: variables.$layout-spacing;
transition: none;
- z-index: $zindex-0;
- @if $rtl == true {
- right: $layout-spacing;
+ z-index: variables.$zindex-0;
+ @if variables.$rtl == true {
+ right: variables.$layout-spacing;
} @else {
- left: $layout-spacing;
+ left: variables.$layout-spacing;
}
}
.off-canvas-sidebar {
- background: $bg-color;
+ background: variables.$bg-color;
bottom: 0;
min-width: 10rem;
overflow-y: auto;
position: fixed;
top: 0;
transition: transform .25s;
- z-index: $zindex-2;
- @if $rtl == true {
+ z-index: variables.$zindex-2;
+ @if variables.$rtl == true {
right: 0;
transform: translateX(100%);
} @else {
@@ -42,11 +44,11 @@ $off-canvas-breakpoint: $size-lg !default;
.off-canvas-content {
flex: 1 1 auto;
height: 100%;
- padding: $layout-spacing $layout-spacing $layout-spacing 4rem;
+ padding: variables.$layout-spacing variables.$layout-spacing variables.$layout-spacing 4rem;
}
.off-canvas-overlay {
- background: rgba($dark-color, .1);
+ background: rgba(variables.$dark-color, .1);
border-color: transparent;
border-radius: 0;
bottom: 0;
@@ -68,7 +70,7 @@ $off-canvas-breakpoint: $size-lg !default;
&:target ~ .off-canvas-overlay,
&.active ~ .off-canvas-overlay {
display: block;
- z-index: $zindex-1;
+ z-index: variables.$zindex-1;
}
}
}
diff --git a/src/_pagination.scss b/src/_pagination.scss
index 4c0e01132..60b821395 100644
--- a/src/_pagination.scss
+++ b/src/_pagination.scss
@@ -1,26 +1,28 @@
+@use "variables";
+
// Pagination
.pagination {
display: flex;
list-style: none;
- margin: $unit-1 0;
- padding: $unit-1 0;
+ margin: variables.$unit-1 0;
+ padding: variables.$unit-1 0;
.page-item {
- margin: $unit-1 $unit-o;
+ margin: variables.$unit-1 variables.$unit-o;
span {
display: inline-block;
- padding: $unit-1 $unit-1;
+ padding: variables.$unit-1 variables.$unit-1;
}
a {
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
display: inline-block;
- padding: $unit-1 $unit-2;
+ padding: variables.$unit-1 variables.$unit-2;
text-decoration: none;
&:focus,
&:hover {
- color: $primary-color;
+ color: variables.$primary-color;
}
}
@@ -34,8 +36,8 @@
&.active {
a {
- background: $primary-color;
- color: $light-color;
+ background: variables.$primary-color;
+ color: variables.$light-color;
}
}
diff --git a/src/_panels.scss b/src/_panels.scss
index 386f96ecc..70db4dea9 100644
--- a/src/_panels.scss
+++ b/src/_panels.scss
@@ -1,14 +1,16 @@
+@use "variables";
+
// Panels
.panel {
- border: $border-width solid $border-color;
- border-radius: $border-radius;
+ border: variables.$border-width solid variables.$border-color;
+ border-radius: variables.$border-radius;
display: flex;
flex-direction: column;
.panel-header,
.panel-footer {
flex: 0 0 auto;
- padding: $layout-spacing-lg;
+ padding: variables.$layout-spacing-lg;
}
.panel-nav {
@@ -18,6 +20,6 @@
.panel-body {
flex: 1 1 auto;
overflow-y: auto;
- padding: 0 $layout-spacing-lg;
+ padding: 0 variables.$layout-spacing-lg;
}
}
diff --git a/src/_parallax.scss b/src/_parallax.scss
index ea244e547..c378cdf42 100644
--- a/src/_parallax.scss
+++ b/src/_parallax.scss
@@ -1,3 +1,6 @@
+@use "variables";
+@use "mixins";
+
// Parallax
$parallax-deg: 3deg !default;
$parallax-offset: 4.5px !default;
@@ -12,7 +15,7 @@ $parallax-fade-color: rgba(255, 255, 255, .35) !default;
outline: none;
position: absolute;
width: 50%;
- z-index: $zindex-1;
+ z-index: variables.$zindex-1;
}
.parallax {
@@ -22,7 +25,7 @@ $parallax-fade-color: rgba(255, 255, 255, .35) !default;
width: auto;
.parallax-content {
- @include shadow-variant(1rem);
+ @include mixins.shadow-variant(1rem);
height: auto;
transform: perspective($parallax-perspective);
transform-style: preserve-3d;
@@ -42,19 +45,19 @@ $parallax-fade-color: rgba(255, 255, 255, .35) !default;
.parallax-front {
align-items: center;
- color: $light-color;
+ color: variables.$light-color;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
text-align: center;
- text-shadow: 0 0 20px rgba($dark-color, .75);
+ text-shadow: 0 0 20px rgba(variables.$dark-color, .75);
top: 0;
transform: translateZ($parallax-offset-z) scale($parallax-scale);
transition: transform .4s;
width: 100%;
- z-index: $zindex-0;
+ z-index: variables.$zindex-0;
}
.parallax-top-left {
diff --git a/src/_popovers.scss b/src/_popovers.scss
index 35b6bcd83..c77c7bde2 100644
--- a/src/_popovers.scss
+++ b/src/_popovers.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "variables";
+
// Popovers
.popover {
display: inline-block;
@@ -6,13 +9,13 @@
.popover-container {
left: 50%;
opacity: 0;
- padding: $layout-spacing;
+ padding: variables.$layout-spacing;
position: absolute;
top: 0;
transform: translate(-50%, -50%) scale(0);
transition: transform .2s;
- width: $control-width-sm;
- z-index: $zindex-3;
+ width: variables.$control-width-sm;
+ z-index: variables.$zindex-3;
}
*:focus + .popover-container,
@@ -59,7 +62,7 @@
}
.card {
- @include shadow-variant(.2rem);
+ @include mixins.shadow-variant(.2rem);
border: 0;
}
}
diff --git a/src/_progress.scss b/src/_progress.scss
index f173772b6..c39c831cb 100644
--- a/src/_progress.scss
+++ b/src/_progress.scss
@@ -1,33 +1,35 @@
+@use "variables";
+
// Progress
// Credit: https://css-tricks.com/html5-progress-element/
.progress {
appearance: none;
- background: $bg-color-dark;
+ background: variables.$bg-color-dark;
border: 0;
- border-radius: $border-radius;
- color: $primary-color;
- height: $unit-1;
+ border-radius: variables.$border-radius;
+ color: variables.$primary-color;
+ height: variables.$unit-1;
position: relative;
width: 100%;
&::-webkit-progress-bar {
background: transparent;
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
}
&::-webkit-progress-value {
- background: $primary-color;
- border-radius: $border-radius;
+ background: variables.$primary-color;
+ border-radius: variables.$border-radius;
}
&::-moz-progress-bar {
- background: $primary-color;
- border-radius: $border-radius;
+ background: variables.$primary-color;
+ border-radius: variables.$border-radius;
}
&:indeterminate {
animation: progress-indeterminate 1.5s linear infinite;
- background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat;
+ background: variables.$bg-color-dark linear-gradient(to right, variables.$primary-color 30%, variables.$bg-color-dark 30%) top left / 150% 150% no-repeat;
&::-moz-progress-bar {
background: transparent;
diff --git a/src/_sliders.scss b/src/_sliders.scss
index 3ff38e801..816a6f4cf 100644
--- a/src/_sliders.scss
+++ b/src/_sliders.scss
@@ -1,3 +1,6 @@
+@use "variables";
+@use "mixins";
+
// Sliders
// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
.slider {
@@ -5,10 +8,10 @@
background: transparent;
display: block;
width: 100%;
- height: $unit-6;
+ height: variables.$unit-6;
&:focus {
- @include control-shadow();
+ @include mixins.control-shadow();
outline: none;
}
@@ -21,29 +24,29 @@
// Slider Thumb
&::-webkit-slider-thumb {
-webkit-appearance: none;
- background: $primary-color;
+ background: variables.$primary-color;
border: 0;
border-radius: 50%;
- height: $unit-3;
- margin-top: -($unit-3 - $unit-h) / 2;
+ height: variables.$unit-3;
+ margin-top: -(variables.$unit-3 - variables.$unit-h) / 2;
transition: transform .2s;
- width: $unit-3;
+ width: variables.$unit-3;
}
&::-moz-range-thumb {
- background: $primary-color;
+ background: variables.$primary-color;
border: 0;
border-radius: 50%;
- height: $unit-3;
+ height: variables.$unit-3;
transition: transform .2s;
- width: $unit-3;
+ width: variables.$unit-3;
}
&::-ms-thumb {
- background: $primary-color;
+ background: variables.$primary-color;
border: 0;
border-radius: 50%;
- height: $unit-3;
+ height: variables.$unit-3;
transition: transform .2s;
- width: $unit-3;
+ width: variables.$unit-3;
}
&:active {
@@ -61,39 +64,39 @@
&:disabled,
&.disabled {
&::-webkit-slider-thumb {
- background: $gray-color-light;
+ background: variables.$gray-color-light;
transform: scale(1);
}
&::-moz-range-thumb {
- background: $gray-color-light;
+ background: variables.$gray-color-light;
transform: scale(1);
}
&::-ms-thumb {
- background: $gray-color-light;
+ background: variables.$gray-color-light;
transform: scale(1);
}
}
// Slider Track
&::-webkit-slider-runnable-track {
- background: $bg-color-dark;
- border-radius: $border-radius;
- height: $unit-h;
+ background: variables.$bg-color-dark;
+ border-radius: variables.$border-radius;
+ height: variables.$unit-h;
width: 100%;
}
&::-moz-range-track {
- background: $bg-color-dark;
- border-radius: $border-radius;
- height: $unit-h;
+ background: variables.$bg-color-dark;
+ border-radius: variables.$border-radius;
+ height: variables.$unit-h;
width: 100%;
}
&::-ms-track {
- background: $bg-color-dark;
- border-radius: $border-radius;
- height: $unit-h;
+ background: variables.$bg-color-dark;
+ border-radius: variables.$border-radius;
+ height: variables.$unit-h;
width: 100%;
}
&::-ms-fill-lower {
- background: $primary-color;
+ background: variables.$primary-color;
}
}
diff --git a/src/_steps.scss b/src/_steps.scss
index f642ff8b6..01d2c81c7 100644
--- a/src/_steps.scss
+++ b/src/_steps.scss
@@ -1,9 +1,11 @@
+@use "variables";
+
// Steps
.step {
display: flex;
flex-wrap: nowrap;
list-style: none;
- margin: $unit-1 0;
+ margin: variables.$unit-1 0;
width: 100%;
.step-item {
@@ -14,7 +16,7 @@
position: relative;
&:not(:first-child)::before {
- background: $primary-color;
+ background: variables.$primary-color;
content: "";
height: 2px;
left: -50%;
@@ -24,45 +26,45 @@
}
a {
- color: $primary-color;
+ color: variables.$primary-color;
display: inline-block;
padding: 20px 10px 0;
text-decoration: none;
&::before {
- background: $primary-color;
- border: $border-width-lg solid $light-color;
+ background: variables.$primary-color;
+ border: variables.$border-width-lg solid variables.$light-color;
border-radius: 50%;
content: "";
display: block;
- height: $unit-3;
+ height: variables.$unit-3;
left: 50%;
position: absolute;
- top: $unit-1;
+ top: variables.$unit-1;
transform: translateX(-50%);
- width: $unit-3;
- z-index: $zindex-0;
+ width: variables.$unit-3;
+ z-index: variables.$zindex-0;
}
}
&.active {
a {
&::before {
- background: $light-color;
- border: $border-width-lg solid $primary-color;
+ background: variables.$light-color;
+ border: variables.$border-width-lg solid variables.$primary-color;
}
}
& ~ .step-item {
&::before {
- background: $border-color;
+ background: variables.$border-color;
}
a {
- color: $gray-color;
+ color: variables.$gray-color;
&::before {
- background: $border-color;
+ background: variables.$border-color;
}
}
}
diff --git a/src/_tables.scss b/src/_tables.scss
index 656c03e50..099e0b49d 100644
--- a/src/_tables.scss
+++ b/src/_tables.scss
@@ -1,9 +1,11 @@
+@use "variables";
+
// Tables
.table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
- @if $rtl == true {
+ @if variables.$rtl == true {
text-align: right;
} @else {
text-align: left;
@@ -12,7 +14,7 @@
&.table-striped {
tbody {
tr:nth-of-type(odd) {
- background: $bg-color;
+ background: variables.$bg-color;
}
}
}
@@ -22,7 +24,7 @@
tbody {
tr {
&.active {
- background: $bg-color-dark;
+ background: variables.$bg-color-dark;
}
}
}
@@ -32,7 +34,7 @@
tbody {
tr {
&:hover {
- background: $bg-color-dark;
+ background: variables.$bg-color-dark;
}
}
}
@@ -48,10 +50,10 @@
td,
th {
- border-bottom: $border-width solid $border-color;
- padding: $unit-3 $unit-2;
+ border-bottom: variables.$border-width solid variables.$border-color;
+ padding: variables.$unit-3 variables.$unit-2;
}
th {
- border-bottom-width: $border-width-lg;
+ border-bottom-width: variables.$border-width-lg;
}
}
diff --git a/src/_tabs.scss b/src/_tabs.scss
index 0dcbaf37a..28062d35b 100644
--- a/src/_tabs.scss
+++ b/src/_tabs.scss
@@ -1,31 +1,33 @@
+@use "variables";
+
// Tabs
.tab {
align-items: center;
- border-bottom: $border-width solid $border-color;
+ border-bottom: variables.$border-width solid variables.$border-color;
display: flex;
flex-wrap: wrap;
list-style: none;
- margin: $unit-1 0 ($unit-1 - $border-width) 0;
+ margin: variables.$unit-1 0 (variables.$unit-1 - variables.$border-width) 0;
.tab-item {
margin-top: 0;
a {
- border-bottom: $border-width-lg solid transparent;
+ border-bottom: variables.$border-width-lg solid transparent;
color: inherit;
display: block;
- margin: 0 $unit-2 0 0;
- padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
+ margin: 0 variables.$unit-2 0 0;
+ padding: variables.$unit-2 variables.$unit-1 variables.$unit-2 - variables.$border-width-lg variables.$unit-1;
text-decoration: none;
&:focus,
&:hover {
- color: $link-color;
+ color: variables.$link-color;
}
}
&.active a,
a.active {
- border-bottom-color: $primary-color;
- color: $link-color;
+ border-bottom-color: variables.$primary-color;
+ color: variables.$link-color;
}
&.tab-action {
@@ -34,7 +36,7 @@
}
.btn-clear {
- margin-top: -$unit-1;
+ margin-top: -(variables.$unit-1);
}
}
@@ -50,8 +52,8 @@
.badge {
&[data-badge]::after {
position: absolute;
- right: $unit-h;
- top: $unit-h;
+ right: variables.$unit-h;
+ top: variables.$unit-h;
transform: translate(0, 0);
}
}
diff --git a/src/_tiles.scss b/src/_tiles.scss
index 742bbaeb5..099f26875 100644
--- a/src/_tiles.scss
+++ b/src/_tiles.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "variables";
+
// Tiles
.tile {
align-content: space-between;
@@ -11,15 +14,15 @@
.tile-content {
flex: 1 1 auto;
&:not(:first-child) {
- padding-left: $unit-2;
+ padding-left: variables.$unit-2;
}
&:not(:last-child) {
- padding-right: $unit-2;
+ padding-right: variables.$unit-2;
}
}
.tile-title,
.tile-subtitle {
- line-height: $line-height;
+ line-height: variables.$line-height;
}
&.tile-centered {
@@ -31,7 +34,7 @@
.tile-title,
.tile-subtitle {
- @include text-ellipsis();
+ @include mixins.text-ellipsis();
margin-bottom: 0;
}
}
diff --git a/src/_timelines.scss b/src/_timelines.scss
index c56746d2c..84dfa8497 100644
--- a/src/_timelines.scss
+++ b/src/_timelines.scss
@@ -1,16 +1,18 @@
+@use "variables";
+
// Timelines
.timeline {
.timeline-item {
display: flex;
- margin-bottom: $unit-6;
+ margin-bottom: variables.$unit-6;
position: relative;
&::before {
- background: $border-color;
+ background: variables.$border-color;
content: "";
height: 100%;
left: 11px;
position: absolute;
- top: $unit-6;
+ top: variables.$unit-6;
width: 2px;
}
@@ -20,33 +22,33 @@
.timeline-content {
flex: 1 1 auto;
- padding: 2px 0 2px $layout-spacing-lg;
+ padding: 2px 0 2px variables.$layout-spacing-lg;
}
.timeline-icon {
align-items: center;
border-radius: 50%;
- color: $light-color;
+ color: variables.$light-color;
display: flex;
- height: $unit-6;
+ height: variables.$unit-6;
justify-content: center;
text-align: center;
- width: $unit-6;
+ width: variables.$unit-6;
&::before {
- border: $border-width-lg solid $primary-color;
+ border: variables.$border-width-lg solid variables.$primary-color;
border-radius: 50%;
content: "";
display: block;
- height: $unit-2;
- left: $unit-2;
+ height: variables.$unit-2;
+ left: variables.$unit-2;
position: absolute;
- top: $unit-2;
- width: $unit-2;
+ top: variables.$unit-2;
+ width: variables.$unit-2;
}
&.icon-lg {
- background: $primary-color;
- line-height: $line-height;
+ background: variables.$primary-color;
+ line-height: variables.$line-height;
&::before {
content: none;
}
diff --git a/src/_toasts.scss b/src/_toasts.scss
index fef15f8db..5aedf9982 100644
--- a/src/_toasts.scss
+++ b/src/_toasts.scss
@@ -1,33 +1,36 @@
+@use "mixins";
+@use "variables";
+
// Toasts
.toast {
- @include toast-variant($dark-color);
- border: $border-width solid $dark-color;
- border-radius: $border-radius;
- color: $light-color;
+ @include mixins.toast-variant(variables.$dark-color);
+ border: variables.$border-width solid variables.$dark-color;
+ border-radius: variables.$border-radius;
+ color: variables.$light-color;
display: block;
- padding: $layout-spacing;
+ padding: variables.$layout-spacing;
width: 100%;
&.toast-primary {
- @include toast-variant($primary-color);
+ @include mixins.toast-variant(variables.$primary-color);
}
&.toast-success {
- @include toast-variant($success-color);
+ @include mixins.toast-variant(variables.$success-color);
}
&.toast-warning {
- @include toast-variant($warning-color);
+ @include mixins.toast-variant(variables.$warning-color);
}
&.toast-error {
- @include toast-variant($error-color);
+ @include mixins.toast-variant(variables.$error-color);
}
a {
- color: $light-color;
+ color: variables.$light-color;
text-decoration: underline;
-
+
&:focus,
&:hover,
&:active,
@@ -37,7 +40,7 @@
}
.btn-clear {
- margin: $unit-h;
+ margin: variables.$unit-h;
}
p {
diff --git a/src/_tooltips.scss b/src/_tooltips.scss
index 8693b67be..ef88845df 100644
--- a/src/_tooltips.scss
+++ b/src/_tooltips.scss
@@ -1,32 +1,34 @@
+@use "variables";
+
// Tooltips
.tooltip {
position: relative;
&::after {
- background: rgba($dark-color, .95);
- border-radius: $border-radius;
+ background: rgba(variables.$dark-color, .95);
+ border-radius: variables.$border-radius;
bottom: 100%;
- color: $light-color;
+ color: variables.$light-color;
content: attr(data-tooltip);
display: block;
- font-size: $font-size-sm;
+ font-size: variables.$font-size-sm;
left: 50%;
- max-width: $control-width-sm;
+ max-width: variables.$control-width-sm;
opacity: 0;
overflow: hidden;
- padding: $unit-1 $unit-2;
+ padding: variables.$unit-1 variables.$unit-2;
pointer-events: none;
position: absolute;
text-overflow: ellipsis;
- transform: translate(-50%, $unit-2);
+ transform: translate(-50%, variables.$unit-2);
transition: opacity .2s, transform .2s;
white-space: pre;
- z-index: $zindex-3;
+ z-index: variables.$zindex-3;
}
&:focus,
&:hover {
&::after {
opacity: 1;
- transform: translate(-50%, -$unit-1);
+ transform: translate(-50%, -(variables.$unit-1));
}
}
&[disabled],
@@ -38,12 +40,12 @@
&::after {
bottom: 50%;
left: 100%;
- transform: translate(-$unit-1, 50%);
+ transform: translate(-(variables.$unit-1), 50%);
}
&:focus,
&:hover {
&::after {
- transform: translate($unit-1, 50%);
+ transform: translate(variables.$unit-1, 50%);
}
}
}
@@ -52,12 +54,12 @@
&::after {
bottom: auto;
top: 100%;
- transform: translate(-50%, -$unit-2);
+ transform: translate(-50%, -(variables.$unit-2));
}
&:focus,
&:hover {
&::after {
- transform: translate(-50%, $unit-1);
+ transform: translate(-50%, variables.$unit-1);
}
}
}
@@ -67,12 +69,12 @@
bottom: 50%;
left: auto;
right: 100%;
- transform: translate($unit-2, 50%);
+ transform: translate(variables.$unit-2, 50%);
}
&:focus,
&:hover {
&::after {
- transform: translate(-$unit-1, 50%);
+ transform: translate(-(variables.$unit-1), 50%);
}
}
}
diff --git a/src/_typography.scss b/src/_typography.scss
index bbeb87692..68b85449f 100644
--- a/src/_typography.scss
+++ b/src/_typography.scss
@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "mixins";
+@use "variables";
+
// Typography
// Headings
h1,
@@ -47,7 +51,7 @@ h6,
// Paragraphs
p {
- margin: 0 0 $line-height;
+ margin: 0 0 variables.$line-height;
}
// Semantic text elements
@@ -58,29 +62,29 @@ u {
}
abbr[title] {
- border-bottom: $border-width dotted;
+ border-bottom: variables.$border-width dotted;
cursor: help;
text-decoration: none;
}
kbd {
- @include label-base();
- @include label-variant($light-color, $dark-color);
- font-size: $font-size-sm;
+ @include mixins.label-base();
+ @include mixins.label-variant(variables.$light-color, variables.$dark-color);
+ font-size: variables.$font-size-sm;
}
mark {
- @include label-variant($body-font-color, $highlight-color);
- border-bottom: $unit-o solid darken($highlight-color, 15%);
- border-radius: $border-radius;
- padding: $unit-o $unit-h 0;
+ @include mixins.label-variant(variables.$body-font-color, variables.$highlight-color);
+ border-bottom: variables.$unit-o solid color.adjust(variables.$highlight-color, $lightness: -15%);
+ border-radius: variables.$border-radius;
+ padding: variables.$unit-o variables.$unit-h 0;
}
// Blockquote
blockquote {
- border-left: $border-width-lg solid $border-color;
+ border-left: variables.$border-width-lg solid variables.$border-color;
margin-left: 0;
- padding: $unit-2 $unit-4;
+ padding: variables.$unit-2 variables.$unit-4;
p:last-child {
margin-bottom: 0;
@@ -90,16 +94,16 @@ blockquote {
// Lists
ul,
ol {
- margin: $unit-4 0 $unit-4 $unit-4;
+ margin: variables.$unit-4 0 variables.$unit-4 variables.$unit-4;
padding: 0;
ul,
ol {
- margin: $unit-4 0 $unit-4 $unit-4;
+ margin: variables.$unit-4 0 variables.$unit-4 variables.$unit-4;
}
li {
- margin-top: $unit-2;
+ margin-top: variables.$unit-2;
}
}
@@ -124,6 +128,6 @@ dl {
font-weight: bold;
}
dd {
- margin: $unit-2 0 $unit-4 0;
+ margin: variables.$unit-2 0 variables.$unit-4 0;
}
}
diff --git a/src/_utilities.scss b/src/_utilities.scss
index 80f1e0b55..4363bc1cb 100644
--- a/src/_utilities.scss
+++ b/src/_utilities.scss
@@ -1,8 +1,8 @@
-@import "utilities/colors";
-@import "utilities/cursors";
-@import "utilities/display";
-@import "utilities/divider";
-@import "utilities/loading";
-@import "utilities/position";
-@import "utilities/shapes";
-@import "utilities/text";
+@forward "utilities/colors";
+@forward "utilities/cursors";
+@forward "utilities/display";
+@forward "utilities/divider";
+@forward "utilities/loading";
+@forward "utilities/position";
+@forward "utilities/shapes";
+@forward "utilities/text";
diff --git a/src/_variables.scss b/src/_variables.scss
index 604c0062d..2b4be5be0 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
// Core variables
$version: "0.5.9";
@@ -6,24 +7,24 @@ $rtl: false !default;
// Core colors
$primary-color: #5755d9 !default;
-$primary-color-dark: darken($primary-color, 3%) !default;
-$primary-color-light: lighten($primary-color, 3%) !default;
-$secondary-color: lighten($primary-color, 37.5%) !default;
-$secondary-color-dark: darken($secondary-color, 3%) !default;
-$secondary-color-light: lighten($secondary-color, 3%) !default;
+$primary-color-dark: color.adjust($primary-color, $lightness: -3%) !default;
+$primary-color-light: color.adjust($primary-color, $lightness: 3%) !default;
+$secondary-color: color.adjust($primary-color, $lightness: 37.5%) !default;
+$secondary-color-dark: color.adjust($secondary-color, $lightness: -3%) !default;
+$secondary-color-light: color.adjust($secondary-color, $lightness: 3%) !default;
// Gray colors
$dark-color: #303742 !default;
$light-color: #fff !default;
-$gray-color: lighten($dark-color, 55%) !default;
-$gray-color-dark: darken($gray-color, 30%) !default;
-$gray-color-light: lighten($gray-color, 20%) !default;
+$gray-color: color.adjust($dark-color, $lightness: 55%) !default;
+$gray-color-dark: color.adjust($gray-color, $lightness: -30%) !default;
+$gray-color-light: color.adjust($gray-color, $lightness: 20%) !default;
-$border-color: lighten($dark-color, 65%) !default;
-$border-color-dark: darken($border-color, 10%) !default;
-$border-color-light: lighten($border-color, 8%) !default;
-$bg-color: lighten($dark-color, 75%) !default;
-$bg-color-dark: darken($bg-color, 3%) !default;
+$border-color: color.adjust($dark-color, $lightness: 65%) !default;
+$border-color-dark: color.adjust($border-color, $lightness: -10%) !default;
+$border-color-light: color.adjust($border-color, $lightness: 8%) !default;
+$bg-color: color.adjust($dark-color, $lightness: 75%) !default;
+$bg-color-dark: color.adjust($bg-color, $lightness: -3%) !default;
$bg-color-light: $light-color !default;
// Control colors
@@ -35,10 +36,10 @@ $error-color: #e85600 !default;
$code-color: #d73e48 !default;
$highlight-color: #ffe9b3 !default;
$body-bg: $bg-color-light !default;
-$body-font-color: lighten($dark-color, 5%) !default;
+$body-font-color: color.adjust($dark-color, $lightness: 5%) !default;
$link-color: $primary-color !default;
-$link-color-dark: darken($link-color, 10%) !default;
-$link-color-light: lighten($link-color, 10%) !default;
+$link-color-dark: color.adjust($link-color, $lightness: -10%) !default;
+$link-color-light: color.adjust($link-color, $lightness: 10%) !default;
// Fonts
// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
diff --git a/src/_viewer-360.scss b/src/_viewer-360.scss
index c1b8928d9..7aba4de07 100644
--- a/src/_viewer-360.scss
+++ b/src/_viewer-360.scss
@@ -1,10 +1,11 @@
+@use "sass:math";
// 360 Degree Viewer
// Mixin: Viewer slider sizes
@mixin viewer-slider-size($image-number: 36) {
@for $s from 1 through ($image-number) {
.viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image {
- background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
+ background-position-y: math.percentage((($s)-1) * 1/(($image-number)-1));
}
}
}
diff --git a/src/icons/_icons-action.scss b/src/icons/_icons-action.scss
index 1b952ea18..845948e3b 100644
--- a/src/icons/_icons-action.scss
+++ b/src/icons/_icons-action.scss
@@ -1,9 +1,12 @@
+@use "variables";
+@use "icons-core";
+
// Icon resize
.icon-resize-horiz,
.icon-resize-vert {
&::before,
&::after {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-bottom: 0;
border-right: 0;
height: .45em;
@@ -50,7 +53,7 @@
.icon-cross {
&::before {
background: currentColor;
- height: $icon-border-width;
+ height: icons-core.$icon-border-width;
width: 100%;
}
}
@@ -60,7 +63,7 @@
&::after {
background: currentColor;
height: 100%;
- width: $icon-border-width;
+ width: icons-core.$icon-border-width;
}
}
@@ -80,7 +83,7 @@
// Icon check
.icon-check {
&::before {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-right: 0;
border-top: 0;
height: .5em;
@@ -91,11 +94,11 @@
// Icon stop
.icon-stop {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-radius: 50%;
&::before {
background: currentColor;
- height: $icon-border-width;
+ height: icons-core.$icon-border-width;
transform: translate(-50%, -50%) rotate(45deg);
width: 1em;
}
@@ -103,7 +106,7 @@
// Icon shutdown
.icon-shutdown {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-radius: 50%;
border-top-color: transparent;
&::before {
@@ -111,14 +114,14 @@
content: "";
height: .5em;
top: .1em;
- width: $icon-border-width;
+ width: icons-core.$icon-border-width;
}
}
// Icon refresh
.icon-refresh {
&::before {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-radius: 50%;
border-right-color: transparent;
height: 1em;
@@ -138,7 +141,7 @@
// Icon search
.icon-search {
&::before {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-radius: 50%;
height: .75em;
left: 5%;
@@ -148,7 +151,7 @@
}
&::after {
background: currentColor;
- height: $icon-border-width;
+ height: icons-core.$icon-border-width;
left: 80%;
top: 80%;
transform: translate(-50%, -50%) rotate(45deg);
@@ -159,7 +162,7 @@
// Icon edit
.icon-edit {
&::before {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
height: .4em;
transform: translate(-40%, -60%) rotate(-45deg);
width: .85em;
@@ -179,9 +182,9 @@
// Icon delete
.icon-delete {
&::before {
- border: $icon-border-width solid currentColor;
- border-bottom-left-radius: $border-radius;
- border-bottom-right-radius: $border-radius;
+ border: icons-core.$icon-border-width solid currentColor;
+ border-bottom-left-radius: variables.$border-radius;
+ border-bottom-right-radius: variables.$border-radius;
border-top: 0;
height: .75em;
top: 60%;
@@ -190,20 +193,20 @@
&::after {
background: currentColor;
box-shadow: -.25em .2em, .25em .2em;
- height: $icon-border-width;
- top: $icon-border-width/2;
+ height: icons-core.$icon-border-width;
+ top: icons-core.$icon-border-width/2;
width: .5em;
}
}
// Icon share
.icon-share {
- border: $icon-border-width solid currentColor;
- border-radius: $border-radius;
+ border: icons-core.$icon-border-width solid currentColor;
+ border-radius: variables.$border-radius;
border-right: 0;
border-top: 0;
&::before {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-left: 0;
border-top: 0;
height: .4em;
@@ -213,7 +216,7 @@
width: .4em;
}
&::after {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-bottom: 0;
border-right: 0;
border-radius: 75% 0;
@@ -228,13 +231,13 @@
background: currentColor;
height: 1em;
left: 15%;
- width: $icon-border-width;
+ width: icons-core.$icon-border-width;
}
&::after {
- border: $icon-border-width solid currentColor;
- border-bottom-right-radius: $border-radius;
+ border: icons-core.$icon-border-width solid currentColor;
+ border-bottom-right-radius: variables.$border-radius;
border-left: 0;
- border-top-right-radius: $border-radius;
+ border-top-right-radius: variables.$border-radius;
height: .65em;
top: 35%;
left: 60%;
@@ -245,18 +248,18 @@
// Icon bookmark
.icon-bookmark {
&::before {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-bottom: 0;
- border-top-left-radius: $border-radius;
- border-top-right-radius: $border-radius;
+ border-top-left-radius: variables.$border-radius;
+ border-top-right-radius: variables.$border-radius;
height: .9em;
width: .8em;
}
&::after {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-bottom: 0;
border-left: 0;
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
height: .5em;
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
width: .5em;
@@ -266,9 +269,9 @@
// Icon download & upload
.icon-download,
.icon-upload {
- border-bottom: $icon-border-width solid currentColor;
+ border-bottom: icons-core.$icon-border-width solid currentColor;
&::before {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-bottom: 0;
border-right: 0;
height: .5em;
@@ -279,7 +282,7 @@
background: currentColor;
height: .6em;
top: 40%;
- width: $icon-border-width;
+ width: icons-core.$icon-border-width;
}
}
@@ -295,8 +298,8 @@
// Icon copy
.icon-copy {
&::before {
- border: $icon-border-width solid currentColor;
- border-radius: $border-radius;
+ border: icons-core.$icon-border-width solid currentColor;
+ border-radius: variables.$border-radius;
border-right: 0;
border-bottom: 0;
height: .8em;
@@ -305,8 +308,8 @@
width: .8em;
}
&::after {
- border: $icon-border-width solid currentColor;
- border-radius: $border-radius;
+ border: icons-core.$icon-border-width solid currentColor;
+ border-radius: variables.$border-radius;
height: .8em;
left: 60%;
top: 60%;
diff --git a/src/icons/_icons-core.scss b/src/icons/_icons-core.scss
index 9a67ae4f7..f48bd4fd3 100644
--- a/src/icons/_icons-core.scss
+++ b/src/icons/_icons-core.scss
@@ -1,5 +1,7 @@
+@use "variables";
+
// Icon variables
-$icon-border-width: $border-width-lg;
+$icon-border-width: variables.$border-width-lg;
$icon-prefix: "icon";
// Icon base style
diff --git a/src/icons/_icons-navigation.scss b/src/icons/_icons-navigation.scss
index 92ab231aa..2d4efc1fd 100644
--- a/src/icons/_icons-navigation.scss
+++ b/src/icons/_icons-navigation.scss
@@ -1,3 +1,5 @@
+@use "icons-core";
+
// Icon arrows
.icon-arrow-down,
.icon-arrow-left,
@@ -8,7 +10,7 @@
.icon-forward,
.icon-upward {
&::before {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-bottom: 0;
border-right: 0;
height: .65em;
@@ -44,7 +46,7 @@
.icon-forward {
&::after {
background: currentColor;
- height: $icon-border-width;
+ height: icons-core.$icon-border-width;
width: .8em;
}
}
@@ -54,7 +56,7 @@
&::after {
background: currentColor;
height: .8em;
- width: $icon-border-width;
+ width: icons-core.$icon-border-width;
}
}
@@ -111,7 +113,7 @@
&::before {
background: currentColor;
box-shadow: 0 -.35em, 0 .35em;
- height: $icon-border-width;
+ height: icons-core.$icon-border-width;
width: 100%;
}
}
diff --git a/src/icons/_icons-object.scss b/src/icons/_icons-object.scss
index 00597d8a4..4a9156b69 100644
--- a/src/icons/_icons-object.scss
+++ b/src/icons/_icons-object.scss
@@ -1,32 +1,35 @@
+@use "variables";
+@use "icons-core";
+
// Icon time
.icon-time {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-radius: 50%;
&::before {
background: currentColor;
height: .4em;
transform: translate(-50%, -75%);
- width: $icon-border-width;
+ width: icons-core.$icon-border-width;
}
&::after {
background: currentColor;
height: .3em;
transform: translate(-50%, -75%) rotate(90deg);
transform-origin: 50% 90%;
- width: $icon-border-width;
+ width: icons-core.$icon-border-width;
}
}
// Icon mail
.icon-mail {
&::before {
- border: $icon-border-width solid currentColor;
- border-radius: $border-radius;
+ border: icons-core.$icon-border-width solid currentColor;
+ border-radius: variables.$border-radius;
height: .8em;
width: 1em;
}
&::after {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-right: 0;
border-top: 0;
height: .5em;
@@ -38,14 +41,14 @@
// Icon people
.icon-people {
&::before {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-radius: 50%;
height: .45em;
top: 25%;
width: .45em;
}
&::after {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-radius: 50% 50% 0 0;
height: .4em;
top: 75%;
@@ -55,13 +58,13 @@
// Icon message
.icon-message {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-bottom: 0;
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
border-right: 0;
&::before {
- border: $icon-border-width solid currentColor;
- border-bottom-right-radius: $border-radius;
+ border: icons-core.$icon-border-width solid currentColor;
+ border-bottom-right-radius: variables.$border-radius;
border-left: 0;
border-top: 0;
height: .8em;
@@ -71,21 +74,21 @@
}
&::after {
background: currentColor;
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
height: .3em;
left: 10%;
top: 100%;
transform: translate(0, -90%) rotate(45deg);
- width: $icon-border-width;
+ width: icons-core.$icon-border-width;
}
}
// Icon photo
.icon-photo {
- border: $icon-border-width solid currentColor;
- border-radius: $border-radius;
+ border: icons-core.$icon-border-width solid currentColor;
+ border-radius: variables.$border-radius;
&::before {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-radius: 50%;
height: .25em;
left: 35%;
@@ -93,7 +96,7 @@
width: .25em;
}
&::after {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-bottom: 0;
border-left: 0;
height: .5em;
@@ -107,7 +110,7 @@
.icon-link {
&::before,
&::after {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-radius: 5em 0 0 5em;
border-right: 0;
height: .5em;
@@ -124,14 +127,14 @@
// Icon location
.icon-location {
&::before {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-radius: 50% 50% 50% 0;
height: .8em;
transform: translate(-50%, -60%) rotate(-45deg);
width: .8em;
}
&::after {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-radius: 50%;
height: .2em;
transform: translate(-50%, -80%);
@@ -141,7 +144,7 @@
// Icon emoji
.icon-emoji {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-radius: 50%;
&::before {
border-radius: 50%;
@@ -150,7 +153,7 @@
width: .15em;
}
&::after {
- border: $icon-border-width solid currentColor;
+ border: icons-core.$icon-border-width solid currentColor;
border-bottom-color: transparent;
border-radius: 50%;
border-right-color: transparent;
diff --git a/src/mixins/_avatar.scss b/src/mixins/_avatar.scss
index 14617adb6..cdd544c9f 100644
--- a/src/mixins/_avatar.scss
+++ b/src/mixins/_avatar.scss
@@ -1,5 +1,7 @@
+@use "variables";
+
// Avatar mixin
-@mixin avatar-base($size: $unit-8) {
+@mixin avatar-base($size: variables.$unit-8) {
font-size: $size / 2;
height: $size;
width: $size;
diff --git a/src/mixins/_button.scss b/src/mixins/_button.scss
index c90a94bda..b48099b27 100644
--- a/src/mixins/_button.scss
+++ b/src/mixins/_button.scss
@@ -1,49 +1,53 @@
+@use "sass:color";
+@use "variables";
+@use "shadow";
+
// Button variant mixin
-@mixin button-variant($color: $primary-color) {
+@mixin button-variant($color: variables.$primary-color) {
background: $color;
- border-color: darken($color, 3%);
- color: $light-color;
+ border-color: color.adjust($color, $lightness: -3%);
+ color: variables.$light-color;
&:focus {
- @include control-shadow($color);
+ @include shadow.control-shadow($color);
}
&:focus,
&:hover {
- background: darken($color, 2%);
- border-color: darken($color, 5%);
- color: $light-color;
+ background: color.adjust($color, $lightness: -2%);
+ border-color: color.adjust($color, $lightness: -5%);
+ color: variables.$light-color;
}
&:active,
&.active {
- background: darken($color, 7%);
- border-color: darken($color, 10%);
- color: $light-color;
+ background: color.adjust($color, $lightness: -7%);
+ border-color: color.adjust($color, $lightness: -10%);
+ color: variables.$light-color;
}
&.loading {
&::after {
- border-bottom-color: $light-color;
- border-left-color: $light-color;
+ border-bottom-color: variables.$light-color;
+ border-left-color: variables.$light-color;
}
}
}
-@mixin button-outline-variant($color: $primary-color) {
- background: $light-color;
+@mixin button-outline-variant($color: variables.$primary-color) {
+ background: variables.$light-color;
border-color: $color;
color: $color;
&:focus {
- @include control-shadow($color);
+ @include shadow.control-shadow($color);
}
&:focus,
&:hover {
- background: lighten($color, 50%);
- border-color: darken($color, 2%);
+ background: color.adjust($color, $lightness: 50%);
+ border-color: color.adjust($color, $lightness: -2%);
color: $color;
}
&:active,
&.active {
background: $color;
- border-color: darken($color, 5%);
- color: $light-color;
+ border-color: color.adjust($color, $lightness: -5%);
+ color: variables.$light-color;
}
&.loading {
&::after {
diff --git a/src/mixins/_color.scss b/src/mixins/_color.scss
index 697d0c37e..bb829ddc5 100644
--- a/src/mixins/_color.scss
+++ b/src/mixins/_color.scss
@@ -1,16 +1,19 @@
+@use "sass:color";
+@use "variables";
+
// Background color utility mixin
-@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
+@mixin bg-color-variant($name: ".bg-primary", $color: variables.$primary-color) {
#{$name} {
background: $color !important;
- @if (lightness($color) < 60) {
- color: $light-color;
+ @if (color.lightness($color) < 60) {
+ color: variables.$light-color;
}
}
}
// Text color utility mixin
-@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
+@mixin text-color-variant($name: ".text-primary", $color: variables.$primary-color) {
#{$name} {
color: $color !important;
}
@@ -18,10 +21,10 @@
a#{$name} {
&:focus,
&:hover {
- color: darken($color, 5%);
+ color: color.adjust($color, $lightness: -5%);
}
&:visited {
- color: lighten($color, 5%);
+ color: color.adjust($color, $lightness: 5%);
}
}
}
diff --git a/src/mixins/_label.scss b/src/mixins/_label.scss
index 1574f0269..410887d15 100644
--- a/src/mixins/_label.scss
+++ b/src/mixins/_label.scss
@@ -1,11 +1,13 @@
+@use "variables";
+
// Label base style
@mixin label-base() {
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
line-height: 1.25;
padding: .1rem .2rem;
}
-@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
+@mixin label-variant($color: variables.$light-color, $bg-color: variables.$primary-color) {
background: $bg-color;
color: $color;
}
diff --git a/src/mixins/_position.scss b/src/mixins/_position.scss
index 98b5cfc0e..ad8635bae 100644
--- a/src/mixins/_position.scss
+++ b/src/mixins/_position.scss
@@ -1,5 +1,7 @@
+@use "variables";
+
// Margin utility mixin
-@mixin margin-variant($id: 1, $size: $unit-1) {
+@mixin margin-variant($id: 1, $size: variables.$unit-1) {
.m-#{$id} {
margin: $size !important;
}
@@ -32,7 +34,7 @@
}
// Padding utility mixin
-@mixin padding-variant($id: 1, $size: $unit-1) {
+@mixin padding-variant($id: 1, $size: variables.$unit-1) {
.p-#{$id} {
padding: $size !important;
}
diff --git a/src/mixins/_shadow.scss b/src/mixins/_shadow.scss
index 79844491e..56a020478 100644
--- a/src/mixins/_shadow.scss
+++ b/src/mixins/_shadow.scss
@@ -1,9 +1,11 @@
+@use "variables";
+
// Component focus shadow
-@mixin control-shadow($color: $primary-color) {
+@mixin control-shadow($color: variables.$primary-color) {
box-shadow: 0 0 0 .1rem rgba($color, .2);
}
// Shadow mixin
@mixin shadow-variant($offset) {
- box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
+ box-shadow: 0 $offset ($offset + .05rem) * 2 rgba(variables.$dark-color, .3);
}
diff --git a/src/mixins/_toast.scss b/src/mixins/_toast.scss
index fa2bb13db..72829305a 100644
--- a/src/mixins/_toast.scss
+++ b/src/mixins/_toast.scss
@@ -1,5 +1,7 @@
+@use "variables";
+
// Toast variant mixin
-@mixin toast-variant($color: $dark-color) {
+@mixin toast-variant($color: variables.$dark-color) {
background: rgba($color, .95);
border-color: $color;
}
diff --git a/src/spectre-exp.scss b/src/spectre-exp.scss
index 33ed3fe3b..79c13c59f 100644
--- a/src/spectre-exp.scss
+++ b/src/spectre-exp.scss
@@ -1,18 +1,18 @@
// Variables and mixins
-@import "variables";
-@import "mixins";
+@use "variables";
+@use "mixins";
-/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css Experimentals v#{variables.$version} | MIT License | github.com/picturepan2/spectre */
// Experimentals
-@import "autocomplete";
-@import "calendars";
-@import "carousels";
-@import "comparison-sliders";
-@import "filters";
-@import "meters";
-@import "off-canvas";
-@import "parallax";
-@import "progress";
-@import "sliders";
-@import "timelines";
-@import "viewer-360";
+@use "autocomplete";
+@use "calendars";
+@use "carousels";
+@use "comparison-sliders";
+@use "filters";
+@use "meters";
+@use "off-canvas";
+@use "parallax";
+@use "progress";
+@use "sliders";
+@use "timelines";
+@use "viewer-360";
diff --git a/src/spectre-icons.scss b/src/spectre-icons.scss
index 383624e88..47b6bb92c 100644
--- a/src/spectre-icons.scss
+++ b/src/spectre-icons.scss
@@ -1,10 +1,10 @@
// Variables and mixins
-@import "variables";
-@import "mixins";
+@use "variables";
+@use "mixins";
-/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css Icons v#{variables.$version} | MIT License | github.com/picturepan2/spectre */
// Icons
-@import "icons/icons-core";
-@import "icons/icons-navigation";
-@import "icons/icons-action";
-@import "icons/icons-object";
+@use "icons/icons-core";
+@use "icons/icons-navigation";
+@use "icons/icons-action";
+@use "icons/icons-object";
diff --git a/src/spectre.scss b/src/spectre.scss
index cff1fde09..91a105407 100644
--- a/src/spectre.scss
+++ b/src/spectre.scss
@@ -1,49 +1,49 @@
// Variables and mixins
-@import "variables";
-@import "mixins";
+@use "variables";
+@use "mixins";
-/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css v#{variables.$version} | MIT License | github.com/picturepan2/spectre */
// Reset and dependencies
-@import "normalize";
-@import "base";
+@use "normalize";
+@use "base";
// Elements
-@import "typography";
-@import "asian";
-@import "tables";
-@import "buttons";
-@import "forms";
-@import "labels";
-@import "codes";
-@import "media";
+@use "typography";
+@use "asian";
+@use "tables";
+@use "buttons";
+@use "forms";
+@use "labels";
+@use "codes";
+@use "media";
// Layout
-@import "layout";
-@import "hero";
-@import "navbar";
+@use "layout";
+@use "hero";
+@use "navbar";
// Components
-@import "accordions";
-@import "avatars";
-@import "badges";
-@import "breadcrumbs";
-@import "bars";
-@import "cards";
-@import "chips";
-@import "dropdowns";
-@import "empty";
-@import "menus";
-@import "modals";
-@import "navs";
-@import "pagination";
-@import "panels";
-@import "popovers";
-@import "steps";
-@import "tabs";
-@import "tiles";
-@import "toasts";
-@import "tooltips";
+@use "accordions";
+@use "avatars";
+@use "badges";
+@use "breadcrumbs";
+@use "bars";
+@use "cards";
+@use "chips";
+@use "dropdowns";
+@use "empty";
+@use "menus";
+@use "modals";
+@use "navs";
+@use "pagination";
+@use "panels";
+@use "popovers";
+@use "steps";
+@use "tabs";
+@use "tiles";
+@use "toasts";
+@use "tooltips";
// Utility classes
-@import "animations";
-@import "utilities";
+@use "animations";
+@use "utilities";
diff --git a/src/utilities/_colors.scss b/src/utilities/_colors.scss
index 28dd22181..56e3f9335 100644
--- a/src/utilities/_colors.scss
+++ b/src/utilities/_colors.scss
@@ -1,31 +1,34 @@
+@use "mixins";
+@use "variables";
+
// Text colors
-@include text-color-variant(".text-primary", $primary-color);
+@include mixins.text-color-variant(".text-primary", variables.$primary-color);
-@include text-color-variant(".text-secondary", $secondary-color-dark);
+@include mixins.text-color-variant(".text-secondary", variables.$secondary-color-dark);
-@include text-color-variant(".text-gray", $gray-color);
+@include mixins.text-color-variant(".text-gray", variables.$gray-color);
-@include text-color-variant(".text-light", $light-color);
+@include mixins.text-color-variant(".text-light", variables.$light-color);
-@include text-color-variant(".text-dark", $body-font-color);
+@include mixins.text-color-variant(".text-dark", variables.$body-font-color);
-@include text-color-variant(".text-success", $success-color);
+@include mixins.text-color-variant(".text-success", variables.$success-color);
-@include text-color-variant(".text-warning", $warning-color);
+@include mixins.text-color-variant(".text-warning", variables.$warning-color);
-@include text-color-variant(".text-error", $error-color);
+@include mixins.text-color-variant(".text-error", variables.$error-color);
// Background colors
-@include bg-color-variant(".bg-primary", $primary-color);
+@include mixins.bg-color-variant(".bg-primary", variables.$primary-color);
-@include bg-color-variant(".bg-secondary", $secondary-color);
+@include mixins.bg-color-variant(".bg-secondary", variables.$secondary-color);
-@include bg-color-variant(".bg-dark", $dark-color);
+@include mixins.bg-color-variant(".bg-dark", variables.$dark-color);
-@include bg-color-variant(".bg-gray", $bg-color);
+@include mixins.bg-color-variant(".bg-gray", variables.$bg-color);
-@include bg-color-variant(".bg-success", $success-color);
+@include mixins.bg-color-variant(".bg-success", variables.$success-color);
-@include bg-color-variant(".bg-warning", $warning-color);
+@include mixins.bg-color-variant(".bg-warning", variables.$warning-color);
-@include bg-color-variant(".bg-error", $error-color);
+@include mixins.bg-color-variant(".bg-error", variables.$error-color);
diff --git a/src/utilities/_divider.scss b/src/utilities/_divider.scss
index e6c09d2f0..3dc88153f 100644
--- a/src/utilities/_divider.scss
+++ b/src/utilities/_divider.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
// Divider
.divider,
.divider-vert {
@@ -5,44 +7,44 @@
position: relative;
&[data-content]::after {
- background: $bg-color-light;
- color: $gray-color;
+ background: variables.$bg-color-light;
+ color: variables.$gray-color;
content: attr(data-content);
display: inline-block;
- font-size: $font-size-sm;
- padding: 0 $unit-2;
- transform: translateY(-$font-size-sm + $border-width);
+ font-size: variables.$font-size-sm;
+ padding: 0 variables.$unit-2;
+ transform: translateY(-(variables.$font-size-sm) + variables.$border-width);
}
}
.divider {
- border-top: $border-width solid $border-color-light;
- height: $border-width;
- margin: $unit-2 0;
+ border-top: variables.$border-width solid variables.$border-color-light;
+ height: variables.$border-width;
+ margin: variables.$unit-2 0;
&[data-content] {
- margin: $unit-4 0;
+ margin: variables.$unit-4 0;
}
}
.divider-vert {
display: block;
- padding: $unit-4;
+ padding: variables.$unit-4;
&::before {
- border-left: $border-width solid $border-color;
- bottom: $unit-2;
+ border-left: variables.$border-width solid variables.$border-color;
+ bottom: variables.$unit-2;
content: "";
display: block;
left: 50%;
position: absolute;
- top: $unit-2;
+ top: variables.$unit-2;
transform: translateX(-50%);
}
&[data-content]::after {
left: 50%;
- padding: $unit-1 0;
+ padding: variables.$unit-1 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
diff --git a/src/utilities/_loading.scss b/src/utilities/_loading.scss
index 2cfdefa25..66e38c876 100644
--- a/src/utilities/_loading.scss
+++ b/src/utilities/_loading.scss
@@ -1,37 +1,39 @@
+@use "variables";
+
// Loading
.loading {
color: transparent !important;
- min-height: $unit-4;
+ min-height: variables.$unit-4;
pointer-events: none;
position: relative;
&::after {
animation: loading 500ms infinite linear;
background: transparent;
- border: $border-width-lg solid $primary-color;
+ border: variables.$border-width-lg solid variables.$primary-color;
border-radius: 50%;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
- height: $unit-4;
+ height: variables.$unit-4;
left: 50%;
- margin-left: -$unit-2;
- margin-top: -$unit-2;
+ margin-left: -(variables.$unit-2);
+ margin-top: -(variables.$unit-2);
opacity: 1;
padding: 0;
position: absolute;
top: 50%;
- width: $unit-4;
- z-index: $zindex-0;
+ width: variables.$unit-4;
+ z-index: variables.$zindex-0;
}
&.loading-lg {
- min-height: $unit-10;
+ min-height: variables.$unit-10;
&::after {
- height: $unit-8;
- margin-left: -$unit-4;
- margin-top: -$unit-4;
- width: $unit-8;
+ height: variables.$unit-8;
+ margin-left: -(variables.$unit-4);
+ margin-top: -(variables.$unit-4);
+ width: variables.$unit-8;
}
}
}
diff --git a/src/utilities/_position.scss b/src/utilities/_position.scss
index c1a7f756a..1c8ab77b2 100644
--- a/src/utilities/_position.scss
+++ b/src/utilities/_position.scss
@@ -1,6 +1,9 @@
+@use "mixins";
+@use "variables";
+
// Position
.clearfix {
- @include clearfix();
+ @include mixins.clearfix();
}
.float-left {
@@ -41,14 +44,14 @@
}
// Spacing
-@include margin-variant(0, 0);
+@include mixins.margin-variant(0, 0);
-@include margin-variant(1, $unit-1);
+@include mixins.margin-variant(1, variables.$unit-1);
-@include margin-variant(2, $unit-2);
+@include mixins.margin-variant(2, variables.$unit-2);
-@include padding-variant(0, 0);
+@include mixins.padding-variant(0, 0);
-@include padding-variant(1, $unit-1);
+@include mixins.padding-variant(1, variables.$unit-1);
-@include padding-variant(2, $unit-2);
+@include mixins.padding-variant(2, variables.$unit-2);
diff --git a/src/utilities/_shapes.scss b/src/utilities/_shapes.scss
index 23e131e94..8a3dd6bbd 100644
--- a/src/utilities/_shapes.scss
+++ b/src/utilities/_shapes.scss
@@ -1,6 +1,8 @@
+@use "variables";
+
// Shapes
.s-rounded {
- border-radius: $border-radius;
+ border-radius: variables.$border-radius;
}
.s-circle {
diff --git a/src/utilities/_text.scss b/src/utilities/_text.scss
index 57969051a..474195c1f 100644
--- a/src/utilities/_text.scss
+++ b/src/utilities/_text.scss
@@ -1,3 +1,5 @@
+@use "mixins";
+
// Text
// Text alignment utilities
.text-left {
@@ -60,7 +62,7 @@
// Text overflow utilities
.text-ellipsis {
- @include text-ellipsis();
+ @include mixins.text-ellipsis();
}
.text-clip {