ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Update eases names to match gsap / Add default vars for z-indexes, timings and eases

Browse Source
This commit is contained in:
Lucas Vallenet
2023-09-05 09:31:56 +02:00
parent 7b415af8c2
commit 6564fb330a
5 changed files with 43 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
assets/styles/settings/_config.eases.scss
View File

@@ -7,51 +7,54 @@
$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),
"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.inOut": cubic-bezier(0.455, 0.030, 0.515, 0.955),
// 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),
"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.inOut": cubic-bezier(0.645, 0.045, 0.355, 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),
"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.inOut": cubic-bezier(0.770, 0.000, 0.175, 1.000),
// Power 4
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),
"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.inOut": cubic-bezier(0.860, 0.000, 0.070, 1.000),
// 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),
"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.inOut": cubic-bezier(1.000, 0.000, 0.000, 1.000),
// 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),
"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.inOut": cubic-bezier(0.680, -0.550, 0.265, 1.550),
// 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),
"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.inOut": cubic-bezier(0.445, 0.050, 0.550, 0.950),
// 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),
"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.inOut": 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),
"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),
);
// Default value for ease()
$ease-default: "power2.out" !default;
// Function
// ==========================================================================
@@ -59,14 +62,14 @@ $eases: (
//
// ```scss
// .c-box {
// transition-timing-function: ease(power2-out);
// transition-timing-function: ease("power2.out");
// }
// ```
//
// @param {string} $key - The ease key in $eases.
// @return {easing-function}
@function ease($key) {
@function ease($key: $ease-default) {
@if not map-has-key($eases, $key) {
@error "Unknown '#{$key}' in $eases.";
}

4
assets/styles/settings/_config.scss
View File

@@ -25,10 +25,10 @@ $font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;
// Transitions
// Transition defaults
// =============================================================================
$speed: t(normal);
$easing: ease(power2-out);
$easing: ease("power2.out");
// Spacing Units
// =============================================================================

5
assets/styles/settings/_config.timings.scss
View File

@@ -15,6 +15,9 @@ $timings: (
slowest: 2s,
);
// Default timing for t()
$timing-default: "normal" !default;
// Function
// ==========================================================================
@@ -29,7 +32,7 @@ $timings: (
// @param {string} $key - The timing key in $timings.
// @return {duration}
@function t($key) {
@function t($key: $timing-default) {
@if not map-has-key($timings, $key) {
@error "Unknown '#{$key}' in $timings.";
}

5
assets/styles/settings/_config.zindexes.scss
View File

@@ -11,6 +11,9 @@ $z-indexes: (
"below": -1
);
// Default z-index for z()
$z-index-default: "above" !default;
// Function
// ==========================================================================
@@ -25,7 +28,7 @@ $z-indexes: (
// @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) {
@function z($layer: $z-index-default, $modifier: 0) {
@if not map-has-key($z-indexes, $layer) {
@error "Unknown master z-index layer: #{$layer}";
}