WIP(chore): implement motion system

telerik · Nov 10, 2023 · e80a7a1 · e80a7a1
1 parent 4426cbd
commit e80a7a1
Show file tree

Hide file tree

Showing 2 changed files with 249 additions and 0 deletions.
diff --git 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
@@ -0,0 +1,248 @@
+@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);
+
+
+@function static-small-fn($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'short-3'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin static-small($properties...) {
+    transition: static-small-fn($properties);
+}
+
+@function static-medium-fn($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'short-4'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin static-medium($properties...) {
+    transition: static-medium-fn($properties);
+}
+
+@function move-fn($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'short-3'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin move($properties...) {
+    transition: move-fn($properties);
+}
+
+@function expand-small-fn($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'short-3'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin expand-small($properties...) {
+    transition: expand-small-fn($properties);
+}
+
+@function collapse-small-fn($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'short-2'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin collapse-small($properties...) {
+    transition: collapse-small-fn($properties);
+}
+
+@function expand-medium-fn($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'medium-1'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin expand-medium($properties...) {
+    transition: expand-medium-fn($properties);
+}
+
+@function collapse-medium-fn($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'short-4'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin collapse-medium($properties...) {
+    transition: collapse-medium-fn($properties);
+}
+
+@function fade-in-out-fn($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'short-2'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin fade-in-out($properties...) {
+    transition: fade-in-out-fn($properties);
+}
+
+@function appear-medium($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'short-3'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin appear-medium($properties...) {
+    transition: appear-medium-fn($properties);
+}
+
+@function disappear-medium($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions k-map-get($kendo-motion-durations, 'short-2'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin disappear-medium($properties...) {
+    transition: disappear-medium-fn($properties);
+}
+
+@function appear-large($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'medium-2'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin appear-large($properties...) {
+    transition: appear-large-fn($properties);
+}
+
+@function disappear-large($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions k-map-get($kendo-motion-durations, 'short-4'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin disappear-large($properties...) {
+    transition: disappear-large-fn($properties);
+}
+
+@function enter-single($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'medium-2'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'decelerate-out');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin enter-single($properties...) {
+    transition: enter-single-fn($properties);
+}
+
+@function exit-single($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'medium-1'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin exit-single($properties...) {
+    transition: exit-single-fn($properties);
+}
+
+@function enter-replace($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'medium-2'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin enter-replace($properties...) {
+    transition: enter-replace-fn($properties);
+}
+
+@function push-fn($properties...) {
+    $_transition-property: $properties;
+    $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, 'long-2'), 0s);
+    $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+    @return $_transition-property var(--kendo-global-duration, #{$_transition-duration}) $_timing-function;
+}
+
+@mixin push($properties...) {
+    transition: push-fn($properties);
+}
+
+@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};
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            --kendo-global-duration: 0s;
+        }
+    }
+}