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

2
assets.json
View File

@@ -1,3 +1,3 @@
{ {
"version": 1692003142021 "version": 1693899113405
} }

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

@@ -7,51 +7,54 @@
$eases: ( $eases: (
// Power 1 // Power 1
power1-in: cubic-bezier(0.550, 0.085, 0.680, 0.530), "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.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.inOut": cubic-bezier(0.455, 0.030, 0.515, 0.955),
// Power 2 // Power 2
power2-in: cubic-bezier(0.550, 0.055, 0.675, 0.190), "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.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.inOut": cubic-bezier(0.645, 0.045, 0.355, 1.000),
// Power 3 // Power 3
power3-in: cubic-bezier(0.895, 0.030, 0.685, 0.220), "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.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.inOut": cubic-bezier(0.770, 0.000, 0.175, 1.000),
// Power 4 // Power 4
power4-in: cubic-bezier(0.755, 0.050, 0.855, 0.060), "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.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.inOut": cubic-bezier(0.860, 0.000, 0.070, 1.000),
// Expo // Expo
expo-in: cubic-bezier(0.950, 0.050, 0.795, 0.035), "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.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.inOut": cubic-bezier(1.000, 0.000, 0.000, 1.000),
// Back // Back
back-in: cubic-bezier(0.600, -0.280, 0.735, 0.045), "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.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.inOut": cubic-bezier(0.680, -0.550, 0.265, 1.550),
// Sine // Sine
sine-in: cubic-bezier(0.470, 0.000, 0.745, 0.715), "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.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.inOut": cubic-bezier(0.445, 0.050, 0.550, 0.950),
// Circ // Circ
circ-in: cubic-bezier(0.600, 0.040, 0.980, 0.335), "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.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.inOut": cubic-bezier(0.785, 0.135, 0.150, 0.860),
// Misc // Misc
bounce: cubic-bezier(0.17, 0.67, 0.3, 1.33), "bounce": cubic-bezier(0.17, 0.67, 0.3, 1.33),
slow-out: cubic-bezier(.04,1.15,0.4,.99), "slow.out": cubic-bezier(.04,1.15,0.4,.99),
smooth: cubic-bezier(0.380, 0.005, 0.215, 1), "smooth": cubic-bezier(0.380, 0.005, 0.215, 1),
); );
// Default value for ease()
$ease-default: "power2.out" !default;
// Function // Function
// ========================================================================== // ==========================================================================
@@ -59,14 +62,14 @@ $eases: (
// //
// ```scss // ```scss
// .c-box { // .c-box {
// transition-timing-function: ease(power2-out); // transition-timing-function: ease("power2.out");
// } // }
// ``` // ```
// //
// @param {string} $key - The ease key in $eases. // @param {string} $key - The ease key in $eases.
// @return {easing-function} // @return {easing-function}
@function ease($key) { @function ease($key: $ease-default) {
@if not map-has-key($eases, $key) { @if not map-has-key($eases, $key) {
@error "Unknown '#{$key}' in $eases."; @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-medium: 500;
$font-weight-bold: 700; $font-weight-bold: 700;
// Transitions // Transition defaults
// ============================================================================= // =============================================================================
$speed: t(normal); $speed: t(normal);
$easing: ease(power2-out); $easing: ease("power2.out");
// Spacing Units // Spacing Units
// ============================================================================= // =============================================================================

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

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

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

@@ -11,6 +11,9 @@ $z-indexes: (
"below": -1 "below": -1
); );
// Default z-index for z()
$z-index-default: "above" !default;
// Function // Function
// ========================================================================== // ==========================================================================
@@ -25,7 +28,7 @@ $z-indexes: (
// @throw Warning if the $modifier might overlap another master z-index. // @throw Warning if the $modifier might overlap another master z-index.
// @return {number} The computed z-index of $layer and $modifier. // @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) { @if not map-has-key($z-indexes, $layer) {
@error "Unknown master z-index layer: #{$layer}"; @error "Unknown master z-index layer: #{$layer}";
} }