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,43 +11,11 @@ $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
|
||||
// =============================================================================
|
||||
|
||||
// Base
|
||||
$font-size: 16px;
|
||||
$font-size: 16px;
|
||||
$line-height: math.div(24px, $font-size);
|
||||
$font-color: color(darkest);
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user