mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
Add dedicated scss config files
This commit is contained in:
Lucas Vallenet
@@ -9,7 +9,7 @@
|
||||
width: 11px;
|
||||
height: 100vh;
|
||||
transform-origin: center right;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
transition: transform t(normal), opacity t(normal);
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -5,16 +5,14 @@
|
||||
//
|
||||
// Simple page-level setup.
|
||||
//
|
||||
// 1. Include web fonts
|
||||
// 2. Ensure the page always fills at least the entire height of the viewport.
|
||||
// 3. Set the default `font-size` and `line-height` for the entire project,
|
||||
// 1. Ensure the page always fills at least the entire height of the viewport.
|
||||
// 2. Set the default `font-size` and `line-height` for the entire project,
|
||||
// sourced from our default variables.
|
||||
|
||||
@include font-faces($font-faces, $font-dir); // [1]
|
||||
|
||||
html {
|
||||
min-height: 100%; // [2]
|
||||
line-height: $line-height; // [3]
|
||||
min-height: 100%; // [1]
|
||||
line-height: $line-height; // [2]
|
||||
font-family: ff("sans");
|
||||
color: $font-color;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
@import "tools/maths";
|
||||
@import "tools/functions";
|
||||
@import "tools/mixins";
|
||||
@import "tools/fonts";
|
||||
// @import "tools/layout";
|
||||
// @import "tools/widths";
|
||||
// @import "tools/family";
|
||||
@@ -18,8 +17,12 @@
|
||||
// Settings
|
||||
// ==========================================================================
|
||||
|
||||
@import "settings/config.eases";
|
||||
@import "settings/config.breakpoints";
|
||||
@import "settings/config.colors";
|
||||
@import "settings/config.eases";
|
||||
@import "settings/config.fonts";
|
||||
@import "settings/config.indexes";
|
||||
@import "settings/config.timings";
|
||||
@import "settings/config";
|
||||
@import "settings/config.variables";
|
||||
|
||||
|
||||
95
assets/styles/settings/_config.breakpoints.scss
Normal file
95
assets/styles/settings/_config.breakpoints.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
// ==========================================================================
|
||||
// Settings / Config / Breakpoints
|
||||
// ==========================================================================
|
||||
|
||||
// Breakpoints
|
||||
// ==========================================================================
|
||||
|
||||
$breakpoints: (
|
||||
"tiny": 500px,
|
||||
"small": 700px,
|
||||
"medium": 1000px,
|
||||
"large": 1200px,
|
||||
"big": 1400px,
|
||||
"huge": 1600px,
|
||||
"enormous": 1800px,
|
||||
"gigantic": 2000px,
|
||||
"colossal": 2400px
|
||||
);
|
||||
|
||||
// Functions
|
||||
// ==========================================================================
|
||||
|
||||
// Creates a min-width or max-width media query expression.
|
||||
//
|
||||
// @param {string} $breakpoint The breakpoint.
|
||||
// @param {string} $type Either "min" or "max".
|
||||
// @return {string}
|
||||
|
||||
@function mq($breakpoint, $type: "min") {
|
||||
@if not map-has-key($breakpoints, $breakpoint) {
|
||||
@warn "Unknown media query breakpoint: `#{$breakpoint}`";
|
||||
}
|
||||
|
||||
$value: map-get($breakpoints, $breakpoint);
|
||||
|
||||
@if ($type == "min") {
|
||||
@return "(min-width: #{$value})";
|
||||
}
|
||||
@if ($type == "max") {
|
||||
@return "(max-width: #{$value - 1px})";
|
||||
}
|
||||
|
||||
@error "Unknown media query type: #{$type}";
|
||||
}
|
||||
|
||||
// Creates a min-width media query expression.
|
||||
//
|
||||
// @param {string} $breakpoint The breakpoint.
|
||||
// @return {string}
|
||||
|
||||
@function mq-min($breakpoint) {
|
||||
@return mq($breakpoint, "min");
|
||||
}
|
||||
|
||||
// Creates a max-width media query expression.
|
||||
//
|
||||
// @param {string} $breakpoint The breakpoint.
|
||||
// @return {string}
|
||||
|
||||
@function mq-max($breakpoint) {
|
||||
@return mq($breakpoint, "max");
|
||||
}
|
||||
|
||||
// Creates a min-width and max-width media query expression.
|
||||
//
|
||||
// @param {string} $from The min-width breakpoint.
|
||||
// @param {string} $until The max-width breakpoint.
|
||||
// @return {string}
|
||||
|
||||
@function mq-between($breakpointMin, $breakpointMax) {
|
||||
@return "#{mq-min($breakpointMin)} and #{mq-max($breakpointMax)}";
|
||||
}
|
||||
|
||||
|
||||
// Legacy
|
||||
// ==========================================================================
|
||||
|
||||
$from-tiny: map-get($breakpoints, "tiny") !default;
|
||||
$to-tiny: map-get($breakpoints, "tiny") - 1 !default;
|
||||
$from-small: map-get($breakpoints, "small") !default;
|
||||
$to-small: map-get($breakpoints, "small") - 1 !default;
|
||||
$from-medium: map-get($breakpoints, "medium") !default;
|
||||
$to-medium: map-get($breakpoints, "medium") - 1 !default;
|
||||
$from-large: map-get($breakpoints, "large") !default;
|
||||
$to-large: map-get($breakpoints, "large") - 1 !default;
|
||||
$from-big: map-get($breakpoints, "big") !default;
|
||||
$to-big: map-get($breakpoints, "big") - 1 !default;
|
||||
$from-huge: map-get($breakpoints, "huge") !default;
|
||||
$to-huge: map-get($breakpoints, "huge") - 1 !default;
|
||||
$from-enormous: map-get($breakpoints, "enormous") !default;
|
||||
$to-enormous: map-get($breakpoints, "enormous") - 1 !default;
|
||||
$from-gigantic: map-get($breakpoints, "gigantic") !default;
|
||||
$to-gigantic: map-get($breakpoints, "gigantic") - 1 !default;
|
||||
$from-colossal: map-get($breakpoints, "colossal") !default;
|
||||
$to-colossal: map-get($breakpoints, "colossal") - 1 !default;
|
||||
@@ -3,7 +3,7 @@
|
||||
// ==========================================================================
|
||||
|
||||
// Palette
|
||||
// =============================================================================
|
||||
// ==========================================================================
|
||||
|
||||
$colors: (
|
||||
primary: #3297FD,
|
||||
@@ -11,9 +11,29 @@ $colors: (
|
||||
darkest: #000000,
|
||||
);
|
||||
|
||||
// Function
|
||||
// ==========================================================================
|
||||
|
||||
// Returns color code.
|
||||
//
|
||||
// ```scss
|
||||
// .c-box {
|
||||
// width: color(primary);
|
||||
// }
|
||||
// ```
|
||||
//
|
||||
// @param {string} $key - The color key in $colors.
|
||||
// @return {color}
|
||||
|
||||
@function color($key) {
|
||||
@if not map-has-key($colors, $key) {
|
||||
@error "Unknown '#{$key}' in $colors.";
|
||||
}
|
||||
@return map-get($colors, $key);
|
||||
}
|
||||
|
||||
// Specifics
|
||||
// =============================================================================
|
||||
// ==========================================================================
|
||||
|
||||
// Link
|
||||
$color-link: color(primary);
|
||||
|
||||
@@ -2,47 +2,74 @@
|
||||
// Settings / Config / Eases
|
||||
// ==========================================================================
|
||||
|
||||
// Power 1
|
||||
$ease-power1-in: cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
||||
$ease-power1-out: cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
||||
$ease-power1-in-out: cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
||||
// Eases
|
||||
// ==========================================================================
|
||||
|
||||
// Power 2
|
||||
$ease-power2-in: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
$ease-power2-out: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
$ease-power2-in-out: cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
$eases: (
|
||||
// Power 1
|
||||
power1-in: cubic-bezier(0.550, 0.085, 0.680, 0.530),
|
||||
power1-out: cubic-bezier(0.250, 0.460, 0.450, 0.940),
|
||||
power1-in-out: cubic-bezier(0.455, 0.030, 0.515, 0.955),
|
||||
|
||||
// Power 3
|
||||
$ease-power3-in: cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
||||
$ease-power3-out: cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
||||
$ease-power3-in-out: cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
||||
// Power 2
|
||||
power2-in: cubic-bezier(0.550, 0.055, 0.675, 0.190),
|
||||
power2-out: cubic-bezier(0.215, 0.610, 0.355, 1.000),
|
||||
power2-in-out: cubic-bezier(0.645, 0.045, 0.355, 1.000),
|
||||
|
||||
// Power 3
|
||||
$ease-power4-in: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
||||
$ease-power4-out: cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
||||
$ease-power4-in-out: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
// Power 3
|
||||
power3-in: cubic-bezier(0.895, 0.030, 0.685, 0.220),
|
||||
power3-out: cubic-bezier(0.165, 0.840, 0.440, 1.000),
|
||||
power3-in-out: cubic-bezier(0.770, 0.000, 0.175, 1.000),
|
||||
|
||||
// Expo
|
||||
$ease-expo-in: cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
||||
$ease-expo-out: cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
||||
$ease-expo-in-out: cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
||||
// Power 3
|
||||
power4-in: cubic-bezier(0.755, 0.050, 0.855, 0.060),
|
||||
power4-out: cubic-bezier(0.230, 1.000, 0.320, 1.000),
|
||||
power4-in-out: cubic-bezier(0.860, 0.000, 0.070, 1.000),
|
||||
|
||||
// Back
|
||||
$ease-back-in: cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
||||
$ease-back-out: cubic-bezier(0.175, 00.885, 0.320, 1.275);
|
||||
$ease-back-in-out: cubic-bezier(0.680, -0.550, 0.265, 1.550);
|
||||
// Expo
|
||||
expo-in: cubic-bezier(0.950, 0.050, 0.795, 0.035),
|
||||
expo-out: cubic-bezier(0.190, 1.000, 0.220, 1.000),
|
||||
expo-in-out: cubic-bezier(1.000, 0.000, 0.000, 1.000),
|
||||
|
||||
// Sine
|
||||
$ease-sine-in: cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
||||
$ease-sine-out: cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
$ease-sine-in-out: cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
||||
// Back
|
||||
back-in: cubic-bezier(0.600, -0.280, 0.735, 0.045),
|
||||
back-out: cubic-bezier(0.175, 00.885, 0.320, 1.275),
|
||||
back-in-out: cubic-bezier(0.680, -0.550, 0.265, 1.550),
|
||||
|
||||
// Circ
|
||||
$ease-circ-in: cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
||||
$ease-circ-out: cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
||||
$ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
||||
// Sine
|
||||
sine-in: cubic-bezier(0.470, 0.000, 0.745, 0.715),
|
||||
sine-out: cubic-bezier(0.390, 0.575, 0.565, 1.000),
|
||||
sine-in-out: cubic-bezier(0.445, 0.050, 0.550, 0.950),
|
||||
|
||||
// Misc
|
||||
$ease-bounce: cubic-bezier(0.17, 0.67, 0.3, 1.33);
|
||||
$ease-slow-out: cubic-bezier(.04,1.15,0.4,.99);
|
||||
$ease-smooth: cubic-bezier(0.380, 0.005, 0.215, 1);
|
||||
// Circ
|
||||
circ-in: cubic-bezier(0.600, 0.040, 0.980, 0.335),
|
||||
circ-out: cubic-bezier(0.075, 0.820, 0.165, 1.000),
|
||||
circ-in-out: cubic-bezier(0.785, 0.135, 0.150, 0.860),
|
||||
|
||||
// Misc
|
||||
bounce: cubic-bezier(0.17, 0.67, 0.3, 1.33),
|
||||
slow-out: cubic-bezier(.04,1.15,0.4,.99),
|
||||
smooth: cubic-bezier(0.380, 0.005, 0.215, 1),
|
||||
);
|
||||
|
||||
// Function
|
||||
// ==========================================================================
|
||||
|
||||
// Returns ease curve.
|
||||
//
|
||||
// ```scss
|
||||
// .c-box {
|
||||
// transition-timing-function: ease(power2-out);
|
||||
// }
|
||||
// ```
|
||||
//
|
||||
// @param {string} $key - The ease key in $eases.
|
||||
// @return {bezier curve}
|
||||
|
||||
@function ease($key) {
|
||||
@if not map-has-key($eases, $key) {
|
||||
@error "Unknown '#{$key}' in $eases.";
|
||||
}
|
||||
|
||||
@return map-get($eases, $key);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,39 @@
|
||||
// ==========================================================================
|
||||
// Tools / Font Faces
|
||||
// Settings / Config / Breakpoints
|
||||
// ==========================================================================
|
||||
|
||||
// Font fallbacks (retrieved from systemfontstack.com on 2022-05-31)
|
||||
// ==========================================================================
|
||||
|
||||
$font-fallback-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
||||
$font-fallback-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
$font-fallback-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
||||
|
||||
// Typefaces
|
||||
// ==========================================================================
|
||||
|
||||
// List of custom font faces as tuples.
|
||||
//
|
||||
// ```
|
||||
// <font-name> <font-file-basename> <font-weight> <font-style>
|
||||
// ```
|
||||
$font-faces: (
|
||||
("Source Sans", "SourceSans3-Bold", 700, normal),
|
||||
("Source Sans", "SourceSans3-BoldIt", 700, italic),
|
||||
("Source Sans", "SourceSans3-Regular", 400, normal),
|
||||
("Source Sans", "SourceSans3-RegularIt", 400, italic),
|
||||
);
|
||||
|
||||
// Map of font families.
|
||||
//
|
||||
// ```
|
||||
// <font-id>: (<font-name>, <font-fallbacks>)
|
||||
// ```
|
||||
$font-families: (
|
||||
sans: join("Source Sans", $font-fallback-sans, $separator: comma),
|
||||
);
|
||||
|
||||
// Functions
|
||||
// ==========================================================================
|
||||
|
||||
// Imports the custom font.
|
||||
@@ -59,3 +93,12 @@
|
||||
$value: map-get($font-families, $font-family);
|
||||
@return $value;
|
||||
}
|
||||
|
||||
|
||||
// Include fonts
|
||||
// ==========================================================================
|
||||
|
||||
// Font directory
|
||||
$font-dir: "../fonts/";
|
||||
|
||||
@include font-faces($font-faces, $font-dir);
|
||||
40
assets/styles/settings/_config.indexes.scss
Normal file
40
assets/styles/settings/_config.indexes.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
// ==========================================================================
|
||||
// Settings / Config / Tempos
|
||||
// ==========================================================================
|
||||
|
||||
// Timings
|
||||
// ==========================================================================
|
||||
|
||||
$z-indexes: (
|
||||
"header": 200,
|
||||
"above": 1,
|
||||
"below": -1
|
||||
);
|
||||
|
||||
// Function
|
||||
// ==========================================================================
|
||||
|
||||
// Retrieves the z-index from the {@see $layers master list}.
|
||||
//
|
||||
// @link on http://css-tricks.com/handling-z-index/
|
||||
//
|
||||
// @param {string} $layer The name of the z-index.
|
||||
// @param {number} $modifier A positive or negative modifier to apply
|
||||
// to the returned z-index value.
|
||||
// @throw Error if the $layer does not exist.
|
||||
// @throw Warning if the $modifier might overlap another master z-index.
|
||||
// @return {number} The computed z-index of $layer and $modifier.
|
||||
|
||||
@function z($layer, $modifier: 0) {
|
||||
@if not map-has-key($z-indexes, $layer) {
|
||||
@error "Unknown master z-index layer: #{$layer}";
|
||||
}
|
||||
|
||||
@if ($modifier >= 50 or $modifier <= -50) {
|
||||
@warn "Modifier may overlap the another master z-index layer: #{$modifier}";
|
||||
}
|
||||
|
||||
$index: map-get($z-indexes, $layer);
|
||||
|
||||
@return $index + $modifier;
|
||||
}
|
||||
@@ -11,38 +11,6 @@ $context: frontend !default;
|
||||
// Path is relative to the stylesheets directory.
|
||||
$assets-path: "../" !default;
|
||||
|
||||
// Typefaces
|
||||
// =============================================================================
|
||||
|
||||
// Font directory
|
||||
$font-dir: "../fonts/";
|
||||
|
||||
// Font fallbacks (retrieved from systemfontstack.com on 2022-05-31)
|
||||
$font-fallback-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
||||
$font-fallback-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
$font-fallback-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
||||
|
||||
// Map of font families.
|
||||
//
|
||||
// ```
|
||||
// <font-id>: (<font-name>, <font-fallbacks>)
|
||||
// ```
|
||||
$font-families: (
|
||||
sans: join("Source Sans", $font-fallback-sans, $separator: comma),
|
||||
);
|
||||
|
||||
// List of custom font faces as tuples.
|
||||
//
|
||||
// ```
|
||||
// <font-name> <font-file-basename> <font-weight> <font-style>
|
||||
// ```
|
||||
$font-faces: (
|
||||
("Source Sans", "SourceSans3-Bold", 700, normal),
|
||||
("Source Sans", "SourceSans3-BoldIt", 700, italic),
|
||||
("Source Sans", "SourceSans3-Regular", 400, normal),
|
||||
("Source Sans", "SourceSans3-RegularIt", 400, italic),
|
||||
);
|
||||
|
||||
// Typography
|
||||
// =============================================================================
|
||||
|
||||
@@ -59,9 +27,8 @@ $font-weight-bold: 700;
|
||||
|
||||
// Transitions
|
||||
// =============================================================================
|
||||
|
||||
$speed: 0.3s;
|
||||
$easing: $ease-power2-out;
|
||||
$speed: t(normal);
|
||||
$easing: ease(power2-out);
|
||||
|
||||
// Spacing Units
|
||||
// =============================================================================
|
||||
@@ -75,34 +42,3 @@ $padding: $unit;
|
||||
// Grid
|
||||
// ==========================================================================
|
||||
$base-column-nb: 12;
|
||||
|
||||
// Breakpoints
|
||||
// =============================================================================
|
||||
|
||||
$from-tiny: 500px !default;
|
||||
$to-tiny: $from-tiny - 1 !default;
|
||||
$from-small: 700px !default;
|
||||
$to-small: $from-small - 1 !default;
|
||||
$from-medium: 1000px !default;
|
||||
$to-medium: $from-medium - 1 !default;
|
||||
$from-large: 1200px !default;
|
||||
$to-large: $from-large - 1 !default;
|
||||
$from-big: 1400px !default;
|
||||
$to-big: $from-big - 1 !default;
|
||||
$from-huge: 1600px !default;
|
||||
$to-huge: $from-huge - 1 !default;
|
||||
$from-enormous: 1800px !default;
|
||||
$to-enormous: $from-enormous - 1 !default;
|
||||
$from-gigantic: 2000px !default;
|
||||
$to-gigantic: $from-gigantic - 1 !default;
|
||||
$from-colossal: 2400px !default;
|
||||
$to-colossal: $from-colossal - 1 !default;
|
||||
|
||||
// Master z-indexe
|
||||
// =============================================================================
|
||||
|
||||
$z-indexes: (
|
||||
"header": 200,
|
||||
"above": 1,
|
||||
"below": -1
|
||||
);
|
||||
|
||||
38
assets/styles/settings/_config.timings.scss
Normal file
38
assets/styles/settings/_config.timings.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
// ==========================================================================
|
||||
// Settings / Config / timings
|
||||
// ==========================================================================
|
||||
|
||||
// Timings
|
||||
// ==========================================================================
|
||||
|
||||
$timings: (
|
||||
fastest: 0.1s,
|
||||
faster: 0.15s,
|
||||
fast: 0.25s,
|
||||
normal: 0.5s,
|
||||
slow: 0.75s,
|
||||
slower: 1s,
|
||||
slowest: 2s,
|
||||
);
|
||||
|
||||
// Function
|
||||
// ==========================================================================
|
||||
|
||||
// Returns timing.
|
||||
//
|
||||
// ```scss
|
||||
// .c-box {
|
||||
// transition-duration: t(slow);
|
||||
// }
|
||||
// ```
|
||||
//
|
||||
// @param {string} $key - The timing key in $timings.
|
||||
// @return {duration}
|
||||
|
||||
@function t($key) {
|
||||
@if not map-has-key($timings, $key) {
|
||||
@error "Unknown '#{$key}' in $timings.";
|
||||
}
|
||||
|
||||
@return map-get($timings, $key);
|
||||
}
|
||||
@@ -48,31 +48,6 @@
|
||||
@return math.div($size, $base) * 1rem;
|
||||
}
|
||||
|
||||
// Retrieves the z-index from the {@see $layers master list}.
|
||||
//
|
||||
// @link on http://css-tricks.com/handling-z-index/
|
||||
//
|
||||
// @param {string} $layer The name of the z-index.
|
||||
// @param {number} $modifier A positive or negative modifier to apply
|
||||
// to the returned z-index value.
|
||||
// @throw Error if the $layer does not exist.
|
||||
// @throw Warning if the $modifier might overlap another master z-index.
|
||||
// @return {number} The computed z-index of $layer and $modifier.
|
||||
|
||||
@function z($layer, $modifier: 0) {
|
||||
@if not map-has-key($z-indexes, $layer) {
|
||||
@error "Unknown master z-index layer: #{$layer}";
|
||||
}
|
||||
|
||||
@if ($modifier >= 50 or $modifier <= -50) {
|
||||
@warn "Modifier may overlap the another master z-index layer: #{$modifier}";
|
||||
}
|
||||
|
||||
$index: map-get($z-indexes, $layer);
|
||||
|
||||
@return $index + $modifier;
|
||||
}
|
||||
|
||||
// Converts a number to a percentage.
|
||||
//
|
||||
// @alias percentage()
|
||||
@@ -207,21 +182,3 @@ $context: 'frontend' !default;
|
||||
$delta: math.div($max-size, $breakpoint);
|
||||
@return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size);
|
||||
}
|
||||
|
||||
// Returns color code.
|
||||
//
|
||||
// ```scss
|
||||
// .c-box {
|
||||
// width: color(primary);
|
||||
// }
|
||||
// ```
|
||||
//
|
||||
// @param {string} $key - The color key in $colors.
|
||||
// @return {color}
|
||||
|
||||
@function color($key) {
|
||||
@if not map-has-key($colors, $key) {
|
||||
@error "Unknown '#{$key}' in $colors.";
|
||||
}
|
||||
@return map-get($colors, $key);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user