From 1e6bb8760cd145c3f71cf5fbfdfdecd079265825 Mon Sep 17 00:00:00 2001 From: Emil Petrov Date: Tue, 7 Nov 2023 17:15:56 +0200 Subject: [PATCH] WIP(chore): implement motion system --- packages/core/scss/index.import.scss | 1 + packages/core/scss/motion/index.import.scss | 324 ++++++++++++++++++++ 2 files changed, 325 insertions(+) create mode 100644 packages/core/scss/motion/index.import.scss diff --git a/packages/core/scss/index.import.scss b/packages/core/scss/index.import.scss index 94e343a2e5d..b687beb79cb 100644 --- a/packages/core/scss/index.import.scss +++ b/packages/core/scss/index.import.scss @@ -4,4 +4,5 @@ @import "./module-system/index.import.scss"; @import "./styles/index.import.scss"; @import "./elevation/index.import.scss"; +@import "./motion/index.import.scss"; @import "./_variables.scss"; diff --git a/packages/core/scss/motion/index.import.scss b/packages/core/scss/motion/index.import.scss new file mode 100644 index 00000000000..1c374a1cd4d --- /dev/null +++ b/packages/core/scss/motion/index.import.scss @@ -0,0 +1,324 @@ +@import "../functions/index.import.scss"; + +$_default-motion-durations: ( + short-1: 0.05s, + short-2: 0.1s, + short-3: 0.15s, + short-4: 0.2s, + medium-1: 0.25s, + medium-2: 0.3s, + medium-3: 0.35s, + medium-4: 0.4s, + long-1: 0.45s, + long-2: 0.5s, + long-3: 0.55s, + long-4: 0.6s, + extra-long-1: 0.7s, + extra-long-2: 0.8s, + extra-long-3: 0.9, + extra-long-4: 1s +) !default; + +$_default-motion-easings: ( + "ease-in": cubic-bezier(0.42, 0, 1, 1), + "ease-out": cubic-bezier(0,0, 0.58, 1), + "ease-in-out": cubic-bezier(0.42, 0, 0.58, 1), + "linear": cubic-bezier(0, 0, 1, 1), + "decelerate-out": cubic-bezier(0, 0, 0.2, 1), + "accelerate-in": cubic-bezier(0.64, 0, 1, 1), + "accelerate-out-back": cubic-bezier(0.45, 1.45, 0.8, 1), + "accelerate-in-back": cubic-bezier(0.3, -0.05, 0.7, -0.5), + "accelerate-in-out-back": cubic-bezier(0.7, -0.4, 0.4, 1.4) +) !default; + +$kendo-motion-durations: $_default-motion-durations !default; + +$kendo-motion-durations: k-map-merge($kendo-motion-durations, $_default-motion-durations); + +$kendo-motion-easings: $_default-motion-easings !default; + +$kendo-motion-easings: k-map-merge($kendo-motion-easings, $_default-motion-easings); + +@mixin static-small($properties...) { + + @if ($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'short-3'); + $_timing-function: k-map-get($kendo-motion-easings, 'linear'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin static-medium($properties...) { + + @if ($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'short-4'); + $_timing-function: k-map-get($kendo-motion-easings, 'linear'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } + +} + +@mixin move($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'short-3'); + $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin expand-small($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'short-3'); + $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin collapse-small($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'short-2'); + $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin expand-medium($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'medium-1'); + $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin collapse-medium($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'short-4'); + $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin fade-in-out($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'short-2'); + $_timing-function: k-map-get($kendo-motion-easings, 'linear'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin appear-medium($properties...) { + + @if ($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'short-3'); + $_timing-function: k-map-get($kendo-motion-easings, 'linear'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin disappear-medium($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'short-2'); + $_timing-function: k-map-get($kendo-motion-easings, 'linear'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin appear-large($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'medium-2'); + $_timing-function: k-map-get($kendo-motion-easings, 'linear'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin disappear-large($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'short-4'); + $_timing-function: k-map-get($kendo-motion-easings, 'linear'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin enter-single($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'medium-2'); + $_timing-function: k-map-get($kendo-motion-easings, 'decelerate-out'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin exit-single($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'medium-1'); + $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin enter-replace($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'medium-2'); + $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin push($properties...) { + + @if($kendo-enable-transitions) { + $_transition-property: $properties; + $_transition-duration: k-map-get($kendo-motion-durations, 'long-2'); + $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out'); + + transition-property: $_transition-property; + transition-duration: $_transition-duration; + transition-timing-function: $_timing-function; + + @media (prefers-reduced-motion: reduce) { + transition-duration: 0s; + } + } +} + +@mixin kendo-motion--styles() { + :root { + @each $duration, $duration-value in $kendo-motion-durations { + --kendo-motion-#{$duration}: #{$duration-value}; + } + @each $easing, $easing-value in $kendo-motion-easings { + --kendo-motion-#{$easing}: #{$easing-value}; + } + } +}