diff --git a/packages/bootstrap/docs/customization-button.md b/packages/bootstrap/docs/customization-button.md index 5a837b1073b..0fd2afe433b 100644 --- a/packages/bootstrap/docs/customization-button.md +++ b/packages/bootstrap/docs/customization-button.md @@ -633,7 +633,7 @@ The following table lists the available variables for customization. $kendo-button-transition List $kendo-transition - color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out + color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1))
Description
The color transition of the Button.
diff --git a/packages/bootstrap/docs/customization-common.md b/packages/bootstrap/docs/customization-common.md index d1d4f6b5b6e..4960ef2312a 100644 --- a/packages/bootstrap/docs/customization-common.md +++ b/packages/bootstrap/docs/customization-common.md @@ -177,6 +177,66 @@ The following table lists the available variables for customization.
Description
Text color of disabled items.
+ + $kendo-transition + List + k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) + color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)) + + +
Description
Transition used across all components.
+ + + + $kendo-scrollview-transition-duration + Number + .3s + 0.3s + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-scrollview-transition-timing-function + String + ease-in-out + ease-in-out + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-stepper-content-transition-property + String + height + height + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-duration + Number + 300ms + 300ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-timing-function + List + cubic-bezier(.4, 0, .2, 1) 0ms + cubic-bezier(0.4, 0, 0.2, 1) 0ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + diff --git a/packages/bootstrap/docs/customization-floating-label.md b/packages/bootstrap/docs/customization-floating-label.md index 33554121114..a61aeb2628e 100644 --- a/packages/bootstrap/docs/customization-floating-label.md +++ b/packages/bootstrap/docs/customization-floating-label.md @@ -130,8 +130,8 @@ The following table lists the available variables for customization. $kendo-floating-label-transition List - .2s ease-out - 0.2s ease-out + k-motion(short-4, ease-out, transform, color, top, inset-inline-start) + transform var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), top var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), inset-inline-start var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1))
Description
The transition of the Floating Label.
diff --git a/packages/bootstrap/docs/customization-scrollview.md b/packages/bootstrap/docs/customization-scrollview.md index 8b386681d80..6c8f2e475a3 100644 --- a/packages/bootstrap/docs/customization-scrollview.md +++ b/packages/bootstrap/docs/customization-scrollview.md @@ -288,23 +288,13 @@ The following table lists the available variables for customization. - $kendo-scrollview-transition-duration - Number - .3s - 0.3s - - -
Description
The duration of the ScrollView transition.
- - - - $kendo-scrollview-transition-timing-function - String - ease-in-out - ease-in-out + $kendo-scrollview-transition + List + k-motion(medium-2, ease-in-out, all) + (all var(--kendo-global-duration, var(--kendo-motion-medium-2, 0.3s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),) -
Description
The timing function of the ScrollView transition.
+
Description
The transition of the ScrollView.
diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md index c26cf565425..ea89b10491e 100644 --- a/packages/bootstrap/docs/customization.md +++ b/packages/bootstrap/docs/customization.md @@ -181,6 +181,66 @@ The following table lists the available variables for customizing the Bootstrap
Description
Text color of disabled items.
+ + $kendo-transition + List + k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) + color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)) + + +
Description
Transition used across all components.
+ + + + $kendo-scrollview-transition-duration + Number + .3s + 0.3s + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-scrollview-transition-timing-function + String + ease-in-out + ease-in-out + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-stepper-content-transition-property + String + height + height + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-duration + Number + 300ms + 300ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-timing-function + List + cubic-bezier(.4, 0, .2, 1) 0ms + cubic-bezier(0.4, 0, 0.2, 1) 0ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + @@ -2208,7 +2268,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-transition List $kendo-transition - color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out + color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1))
Description
The color transition of the Button.
@@ -7513,8 +7573,8 @@ The following table lists the available variables for customizing the Bootstrap $kendo-floating-label-transition List - .2s ease-out - 0.2s ease-out + k-motion(short-4, ease-out, transform, color, top, inset-inline-start) + transform var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), top var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), inset-inline-start var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1))
Description
The transition of the Floating Label.
@@ -14223,23 +14283,13 @@ The following table lists the available variables for customizing the Bootstrap - $kendo-scrollview-transition-duration - Number - .3s - 0.3s - - -
Description
The duration of the ScrollView transition.
- - - - $kendo-scrollview-transition-timing-function - String - ease-in-out - ease-in-out + $kendo-scrollview-transition + List + k-motion(medium-2, ease-in-out, all) + (all var(--kendo-global-duration, var(--kendo-motion-medium-2, 0.3s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),) -
Description
The timing function of the ScrollView transition.
+
Description
The transition of the ScrollView.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss index 1897d4eb969..142a145d336 100644 --- a/packages/bootstrap/scss/_variables.scss +++ b/packages/bootstrap/scss/_variables.scss @@ -153,7 +153,6 @@ $kendo-letter-spacing: null !default; // TODO: refactor $kendo-focus-shadow: null !default; -$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default; // Disabled mixin variables diff --git a/packages/bootstrap/scss/core/_index.scss b/packages/bootstrap/scss/core/_index.scss index 05299e52fbc..f1d8c96edd4 100644 --- a/packages/bootstrap/scss/core/_index.scss +++ b/packages/bootstrap/scss/core/_index.scss @@ -13,6 +13,8 @@ $wcag-min-contrast-ratio: 4.5 !default; // Backward compatibility @import "./color-system/_swatch-legacy.scss"; +// Backwards compatibility +@import "./motion/_motion-legacy.scss"; // Expose @include exports("kendo-core-styles") { @@ -20,4 +22,6 @@ $wcag-min-contrast-ratio: 4.5 !default; // Elevation System @include kendo-elevation--styles(); + // Motion System + @include kendo-motion--styles(); } diff --git a/packages/bootstrap/scss/core/motion/_motion-legacy.scss b/packages/bootstrap/scss/core/motion/_motion-legacy.scss new file mode 100644 index 00000000000..42d5f7fe31b --- /dev/null +++ b/packages/bootstrap/scss/core/motion/_motion-legacy.scss @@ -0,0 +1,2 @@ +/// Transition used across all components. +$kendo-transition: k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) !default; diff --git a/packages/bootstrap/scss/core/motion/index.import.scss b/packages/bootstrap/scss/core/motion/index.import.scss new file mode 100644 index 00000000000..2a94b293a71 --- /dev/null +++ b/packages/bootstrap/scss/core/motion/index.import.scss @@ -0,0 +1 @@ +@import "@progress/kendo-theme-core/scss/motion/index.import.scss"; diff --git a/packages/bootstrap/scss/dataviz/_variables.scss b/packages/bootstrap/scss/dataviz/_variables.scss index ec9bf76921f..d1ef0768902 100644 --- a/packages/bootstrap/scss/dataviz/_variables.scss +++ b/packages/bootstrap/scss/dataviz/_variables.scss @@ -111,7 +111,7 @@ $kendo-chart-area-opacity: .6 !default; $kendo-chart-area-inactive-opacity: .1 !default; $kendo-chart-line-inactive-opacity: .3 !default; -$kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default; +$kendo-chart-tooltip-transition: k-motion(medium-2, linear, left, top) !default; $kendo-chart-bg: $kendo-component-bg !default; $kendo-chart-text: $kendo-component-text !default; diff --git a/packages/bootstrap/scss/floating-label/_variables.scss b/packages/bootstrap/scss/floating-label/_variables.scss index 81e6775420b..519386e8c61 100644 --- a/packages/bootstrap/scss/floating-label/_variables.scss +++ b/packages/bootstrap/scss/floating-label/_variables.scss @@ -34,7 +34,7 @@ $kendo-floating-label-focus-offset-y: 0 !default; /// The transition of the Floating Label. /// @group floating-label -$kendo-floating-label-transition: .2s ease-out !default; +$kendo-floating-label-transition: k-motion(short-4, ease-out, transform, color, top, inset-inline-start) !default; /// The background color of the Floating Label. /// @group floating-label diff --git a/packages/bootstrap/scss/scrollview/_variables.scss b/packages/bootstrap/scss/scrollview/_variables.scss index cc126aaca9f..d33dae0d35c 100644 --- a/packages/bootstrap/scss/scrollview/_variables.scss +++ b/packages/bootstrap/scss/scrollview/_variables.scss @@ -84,9 +84,11 @@ $kendo-scrollview-light-bg: rgba( white, .4 ) !default; /// @group scrollview $kendo-scrollview-dark-bg: rgba( black, .4 ) !default; -/// The duration of the ScrollView transition. -/// @group scrollview +/// @deprecated Use `$kendo-scrollview-transition` instead. $kendo-scrollview-transition-duration: .3s !default; -/// The timing function of the ScrollView transition. -/// @group scrollview +/// @deprecated Use `$kendo-scrollview-transition` instead. $kendo-scrollview-transition-timing-function: ease-in-out !default; + +/// The transition of the ScrollView. +/// @group scrollview +$kendo-scrollview-transition: k-motion(medium-2, ease-in-out, all) !default; diff --git a/packages/bootstrap/scss/slider/_variables.scss b/packages/bootstrap/scss/slider/_variables.scss index c796a03a090..e4795045943 100644 --- a/packages/bootstrap/scss/slider/_variables.scss +++ b/packages/bootstrap/scss/slider/_variables.scss @@ -39,9 +39,9 @@ $kendo-slider-draghandle-pressed-gradient: null !default; $kendo-slider-draghandle-focus-shadow: 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .5 ), rgba( $kendo-color-primary, .5 )) !default; -$kendo-slider-transition-speed: .3s !default; -$kendo-slider-transition-function: ease-out !default; -$kendo-slider-draghandle-transition-speed: .4s !default; +$kendo-slider-transition-speed: var(--kendo-motion-medium-2, .3s) !default; +$kendo-slider-transition-function: var(--kendo-motion-ease-out, ease-out) !default; +$kendo-slider-draghandle-transition-speed: var(--kendo-motion-medium-4, .4s) !default; $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default; $kendo-slider-track-bg: $gray-200 !default; diff --git a/packages/bootstrap/scss/stepper/_variables.scss b/packages/bootstrap/scss/stepper/_variables.scss index 30fa47b4f7f..a99cac1b709 100644 --- a/packages/bootstrap/scss/stepper/_variables.scss +++ b/packages/bootstrap/scss/stepper/_variables.scss @@ -82,6 +82,11 @@ $kendo-stepper-progressbar-text: null !default; $kendo-stepper-progressbar-fill-bg: null !default; $kendo-stepper-progressbar-fill-text: null !default; +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-property: height !default; +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-duration: 300ms !default; +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default; + +$kendo-stepper-content-transition: k-motion(medium-2, ease-in-out, height) !default; diff --git a/packages/classic/docs/customization-button.md b/packages/classic/docs/customization-button.md index 2861f8ad833..13d9fe8bf99 100644 --- a/packages/classic/docs/customization-button.md +++ b/packages/classic/docs/customization-button.md @@ -632,8 +632,8 @@ The following table lists the available variables for customization. $kendo-button-transition List - color .2s ease-in-out - color 0.2s ease-in-out + k-motion(short-4, ease-in-out, color) + (color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),)
Description
The color transition of the flat Button.
diff --git a/packages/classic/docs/customization-common.md b/packages/classic/docs/customization-common.md index e93f967d3e9..aea57c3f27e 100644 --- a/packages/classic/docs/customization-common.md +++ b/packages/classic/docs/customization-common.md @@ -257,6 +257,66 @@ The following table lists the available variables for customization.
Description
Text color of disabled items.
+ + $kendo-transition + List + k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) + color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)) + + +
Description
Transition used across all components.
+ + + + $kendo-scrollview-transition-duration + Number + .3s!default + 0.3s + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-scrollview-transition-timing-function + String + ease-in-out + ease-in-out + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-stepper-content-transition-property + String + height + height + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-duration + Number + 300ms + 300ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-timing-function + List + cubic-bezier(.4, 0, .2, 1) 0ms + cubic-bezier(0.4, 0, 0.2, 1) 0ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + diff --git a/packages/classic/docs/customization-floating-label.md b/packages/classic/docs/customization-floating-label.md index cea568e185a..0b428015bfb 100644 --- a/packages/classic/docs/customization-floating-label.md +++ b/packages/classic/docs/customization-floating-label.md @@ -130,8 +130,8 @@ The following table lists the available variables for customization. $kendo-floating-label-transition List - .2s ease-out - 0.2s ease-out + k-motion(short-4, ease-out, transform, color, top, inset-inline-start) + transform var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), top var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), inset-inline-start var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1))
Description
The transition of the Floating Label.
diff --git a/packages/classic/docs/customization-scrollview.md b/packages/classic/docs/customization-scrollview.md index 40ab51712bb..aef37a58d89 100644 --- a/packages/classic/docs/customization-scrollview.md +++ b/packages/classic/docs/customization-scrollview.md @@ -288,23 +288,13 @@ The following table lists the available variables for customization. - $kendo-scrollview-transition-duration - Number - .3s - 0.3s - - -
Description
The duration of the ScrollView transition.
- - - - $kendo-scrollview-transition-timing-function - String - ease-in-out - ease-in-out + $kendo-scrollview-transition + List + k-motion(medium-2, ease-in-out, all) + (all var(--kendo-global-duration, var(--kendo-motion-medium-2, 0.3s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),) -
Description
The timing function of the ScrollView transition.
+
Description
The transition of the ScrollView.
diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md index d4117370066..042ce00a287 100644 --- a/packages/classic/docs/customization.md +++ b/packages/classic/docs/customization.md @@ -261,6 +261,66 @@ The following table lists the available variables for customizing the Classic th
Description
Text color of disabled items.
+ + $kendo-transition + List + k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) + color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)) + + +
Description
Transition used across all components.
+ + + + $kendo-scrollview-transition-duration + Number + .3s!default + 0.3s + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-scrollview-transition-timing-function + String + ease-in-out + ease-in-out + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-stepper-content-transition-property + String + height + height + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-duration + Number + 300ms + 300ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-timing-function + List + cubic-bezier(.4, 0, .2, 1) 0ms + cubic-bezier(0.4, 0, 0.2, 1) 0ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + @@ -2287,8 +2347,8 @@ The following table lists the available variables for customizing the Classic th $kendo-button-transition List - color .2s ease-in-out - color 0.2s ease-in-out + k-motion(short-4, ease-in-out, color) + (color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),)
Description
The color transition of the flat Button.
@@ -7693,8 +7753,8 @@ The following table lists the available variables for customizing the Classic th $kendo-floating-label-transition List - .2s ease-out - 0.2s ease-out + k-motion(short-4, ease-out, transform, color, top, inset-inline-start) + transform var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), top var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), inset-inline-start var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1))
Description
The transition of the Floating Label.
@@ -14413,23 +14473,13 @@ The following table lists the available variables for customizing the Classic th - $kendo-scrollview-transition-duration - Number - .3s - 0.3s - - -
Description
The duration of the ScrollView transition.
- - - - $kendo-scrollview-transition-timing-function - String - ease-in-out - ease-in-out + $kendo-scrollview-transition + List + k-motion(medium-2, ease-in-out, all) + (all var(--kendo-global-duration, var(--kendo-motion-medium-2, 0.3s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),) -
Description
The timing function of the ScrollView transition.
+
Description
The transition of the ScrollView.
diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss index 7dbca352946..50db24a16b3 100644 --- a/packages/classic/scss/_variables.scss +++ b/packages/classic/scss/_variables.scss @@ -157,8 +157,6 @@ $kendo-letter-spacing: null !default; $kendo-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default; -$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default; - // Disabled mixin variables $kendo-disabled-filter: grayscale(.1) !default; diff --git a/packages/classic/scss/button/_variables.scss b/packages/classic/scss/button/_variables.scss index 2e59192d8ec..09959f0c273 100644 --- a/packages/classic/scss/button/_variables.scss +++ b/packages/classic/scss/button/_variables.scss @@ -254,4 +254,4 @@ $kendo-flat-button-focus-ring-opacity: .12 !default; /// The color transition of the flat Button. /// @group button -$kendo-button-transition: color .2s ease-in-out !default; +$kendo-button-transition: k-motion(short-4, ease-in-out, color) !default; diff --git a/packages/classic/scss/core/_index.scss b/packages/classic/scss/core/_index.scss index 2886358e355..fb56f3e1e0d 100644 --- a/packages/classic/scss/core/_index.scss +++ b/packages/classic/scss/core/_index.scss @@ -10,6 +10,8 @@ $wcag-min-contrast-ratio: 4.5 !default; // Backward compatibility @import "./color-system/_swatch-legacy.scss"; +// Backwards compatibility +@import "./motion/_motion-legacy.scss"; // Expose @include exports("kendo-core-styles") { @@ -17,4 +19,6 @@ $wcag-min-contrast-ratio: 4.5 !default; // Elevation System @include kendo-elevation--styles(); + // Motion System + @include kendo-motion--styles(); } diff --git a/packages/classic/scss/core/motion/_motion-legacy.scss b/packages/classic/scss/core/motion/_motion-legacy.scss new file mode 100644 index 00000000000..42d5f7fe31b --- /dev/null +++ b/packages/classic/scss/core/motion/_motion-legacy.scss @@ -0,0 +1,2 @@ +/// Transition used across all components. +$kendo-transition: k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) !default; diff --git a/packages/classic/scss/core/motion/index.import.scss b/packages/classic/scss/core/motion/index.import.scss new file mode 100644 index 00000000000..2a94b293a71 --- /dev/null +++ b/packages/classic/scss/core/motion/index.import.scss @@ -0,0 +1 @@ +@import "@progress/kendo-theme-core/scss/motion/index.import.scss"; diff --git a/packages/classic/scss/dataviz/_variables.scss b/packages/classic/scss/dataviz/_variables.scss index 808cd20b9c0..9ded2a6231a 100644 --- a/packages/classic/scss/dataviz/_variables.scss +++ b/packages/classic/scss/dataviz/_variables.scss @@ -111,7 +111,7 @@ $kendo-chart-area-opacity: .6 !default; $kendo-chart-area-inactive-opacity: .1 !default; $kendo-chart-line-inactive-opacity: .1 !default; -$kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default; +$kendo-chart-tooltip-transition: k-motion(medium-2, linear, left, top) !default; $kendo-chart-bg: $kendo-component-bg !default; $kendo-chart-text: $kendo-component-text !default; diff --git a/packages/classic/scss/floating-label/_variables.scss b/packages/classic/scss/floating-label/_variables.scss index 81e6775420b..519386e8c61 100644 --- a/packages/classic/scss/floating-label/_variables.scss +++ b/packages/classic/scss/floating-label/_variables.scss @@ -34,7 +34,7 @@ $kendo-floating-label-focus-offset-y: 0 !default; /// The transition of the Floating Label. /// @group floating-label -$kendo-floating-label-transition: .2s ease-out !default; +$kendo-floating-label-transition: k-motion(short-4, ease-out, transform, color, top, inset-inline-start) !default; /// The background color of the Floating Label. /// @group floating-label diff --git a/packages/classic/scss/scrollview/_variables.scss b/packages/classic/scss/scrollview/_variables.scss index 30514c1e4ef..79784edcdec 100644 --- a/packages/classic/scss/scrollview/_variables.scss +++ b/packages/classic/scss/scrollview/_variables.scss @@ -84,9 +84,11 @@ $kendo-scrollview-light-bg: rgba( white, .4 ) !default; /// @group scrollview $kendo-scrollview-dark-bg: rgba( black, .4 ) !default; -/// The duration of the ScrollView transition. -/// @group scrollview -$kendo-scrollview-transition-duration: .3s !default; -/// The timing function of the ScrollView transition. -/// @group scrollview +/// @deprecated Use `$kendo-scrollview-transition` instead. +$kendo-scrollview-transition-duration: .3s!default; +/// @deprecated Use `$kendo-scrollview-transition` instead. $kendo-scrollview-transition-timing-function: ease-in-out !default; + +/// The transition of the ScrollView. +/// @group scrollview +$kendo-scrollview-transition: k-motion(medium-2, ease-in-out, all) !default; diff --git a/packages/classic/scss/slider/_variables.scss b/packages/classic/scss/slider/_variables.scss index 58527039764..03a15192ec9 100644 --- a/packages/classic/scss/slider/_variables.scss +++ b/packages/classic/scss/slider/_variables.scss @@ -39,9 +39,9 @@ $kendo-slider-draghandle-pressed-gradient: null !default; $kendo-slider-draghandle-focus-shadow: 0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( primary, true ), .75 ), rgba( $kendo-slider-draghandle-border, .75 )) !default; -$kendo-slider-transition-speed: .3s !default; +$kendo-slider-transition-speed: var(--kendo-motion-medium-2, .3s) !default; $kendo-slider-transition-function: ease-out !default; -$kendo-slider-draghandle-transition-speed: .4s !default; +$kendo-slider-draghandle-transition-speed: var(--kendo-motion-medium-4, .4s) !default; $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default; $kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) !default; diff --git a/packages/classic/scss/stepper/_variables.scss b/packages/classic/scss/stepper/_variables.scss index baa16945614..b6b0dd13929 100644 --- a/packages/classic/scss/stepper/_variables.scss +++ b/packages/classic/scss/stepper/_variables.scss @@ -82,6 +82,11 @@ $kendo-stepper-progressbar-text: null !default; $kendo-stepper-progressbar-fill-bg: null !default; $kendo-stepper-progressbar-fill-text: null !default; +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-property: height !default; +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-duration: 300ms !default; +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default; + +$kendo-stepper-content-transition: k-motion(medium-2, ease-in-out, height) !default; 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..f6dc597ce4a --- /dev/null +++ b/packages/core/scss/motion/index.import.scss @@ -0,0 +1,73 @@ +@import "../functions/index.import.scss"; +@import "../_variables.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 k-motion($duration, $easing-function, $properties...) { + $_transition: (); + + @each $property in $properties { + $_transition-duration: if($kendo-enable-transitions, k-map-get($kendo-motion-durations, $duration), 0s); + $_transition-easing: if(k-map-has-key($kendo-motion-easings, $easing-function), k-map-get($kendo-motion-easings, $easing-function), $easing-function); + + $_transition: k-list-append($_transition, $property var(--kendo-global-duration, var(--kendo-motion-#{$duration}, #{$_transition-duration})) var(--kendo-motion-#{$easing-function}, #{$_transition-easing}), comma); + } + + @return $_transition; +} + +@mixin kendo-motion($duration, $easing-function, $properties...) { + transition: k-motion($duration, $easing-function, $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; + } + } +} diff --git a/packages/default/docs/customization-button.md b/packages/default/docs/customization-button.md index 12f7a4351ac..a5eadbfecfc 100644 --- a/packages/default/docs/customization-button.md +++ b/packages/default/docs/customization-button.md @@ -632,8 +632,8 @@ The following table lists the available variables for customization. $kendo-button-transition List - color .2s ease-in-out - color 0.2s ease-in-out + k-motion(short-4, ease-in-out, color) + (color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),)
Description
The color transition of the flat Button.
diff --git a/packages/default/docs/customization-common.md b/packages/default/docs/customization-common.md index 8553cdbe29a..f2af87c5d5d 100644 --- a/packages/default/docs/customization-common.md +++ b/packages/default/docs/customization-common.md @@ -287,16 +287,6 @@ The following table lists the available variables for customization.
Description
Box shadow of focused items.
- - $kendo-transition - List - color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out - color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out - - -
Description
Transition used across all components.
- - $kendo-disabled-filter String @@ -487,6 +477,66 @@ The following table lists the available variables for customization.
Description
Text color of disabled items.
+ + $kendo-transition + List + k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) + color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)) + + +
Description
Transition used across all components.
+ + + + $kendo-scrollview-transition-duration + Number + .3s + 0.3s + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-scrollview-transition-timing-function + String + ease-in-out + ease-in-out + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-stepper-content-transition-property + String + height + height + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-duration + Number + 300ms + 300ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-timing-function + List + cubic-bezier(.4, 0, .2, 1) 0ms + cubic-bezier(0.4, 0, 0.2, 1) 0ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + diff --git a/packages/default/docs/customization-floating-label.md b/packages/default/docs/customization-floating-label.md index 16248b52181..8f763ad5117 100644 --- a/packages/default/docs/customization-floating-label.md +++ b/packages/default/docs/customization-floating-label.md @@ -130,8 +130,8 @@ The following table lists the available variables for customization. $kendo-floating-label-transition List - .2s ease-out - 0.2s ease-out + k-motion(short-4, ease-out, transform, color, top, inset-inline-start) + transform var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), top var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), inset-inline-start var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1))
Description
The transition of the Floating Label.
diff --git a/packages/default/docs/customization-scrollview.md b/packages/default/docs/customization-scrollview.md index aecfeb5eb31..67812c30ff0 100644 --- a/packages/default/docs/customization-scrollview.md +++ b/packages/default/docs/customization-scrollview.md @@ -288,23 +288,13 @@ The following table lists the available variables for customization. - $kendo-scrollview-transition-duration - Number - .3s - 0.3s - - -
Description
The duration of the ScrollView transition.
- - - - $kendo-scrollview-transition-timing-function - String - ease-in-out - ease-in-out + $kendo-scrollview-transition + List + k-motion(medium-2, ease-in-out, all) + (all var(--kendo-global-duration, var(--kendo-motion-medium-2, 0.3s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),) -
Description
The timing function of the ScrollView transition.
+
Description
The transition of the ScrollView.
diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md index 58d53ba3655..beb95cb0257 100644 --- a/packages/default/docs/customization.md +++ b/packages/default/docs/customization.md @@ -291,16 +291,6 @@ The following table lists the available variables for customizing the Default th
Description
Box shadow of focused items.
- - $kendo-transition - List - color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out - color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out - - -
Description
Transition used across all components.
- - $kendo-disabled-filter String @@ -491,6 +481,66 @@ The following table lists the available variables for customizing the Default th
Description
Text color of disabled items.
+ + $kendo-transition + List + k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) + color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)) + + +
Description
Transition used across all components.
+ + + + $kendo-scrollview-transition-duration + Number + .3s + 0.3s + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-scrollview-transition-timing-function + String + ease-in-out + ease-in-out + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-stepper-content-transition-property + String + height + height + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-duration + Number + 300ms + 300ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-timing-function + List + cubic-bezier(.4, 0, .2, 1) 0ms + cubic-bezier(0.4, 0, 0.2, 1) 0ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + @@ -2517,8 +2567,8 @@ The following table lists the available variables for customizing the Default th $kendo-button-transition List - color .2s ease-in-out - color 0.2s ease-in-out + k-motion(short-4, ease-in-out, color) + (color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),)
Description
The color transition of the flat Button.
@@ -7923,8 +7973,8 @@ The following table lists the available variables for customizing the Default th $kendo-floating-label-transition List - .2s ease-out - 0.2s ease-out + k-motion(short-4, ease-out, transform, color, top, inset-inline-start) + transform var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), top var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1)), inset-inline-start var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-out, cubic-bezier(0, 0, 0.58, 1))
Description
The transition of the Floating Label.
@@ -14653,23 +14703,13 @@ The following table lists the available variables for customizing the Default th - $kendo-scrollview-transition-duration - Number - .3s - 0.3s - - -
Description
The duration of the ScrollView transition.
- - - - $kendo-scrollview-transition-timing-function - String - ease-in-out - ease-in-out + $kendo-scrollview-transition + List + k-motion(medium-2, ease-in-out, all) + (all var(--kendo-global-duration, var(--kendo-motion-medium-2, 0.3s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),) -
Description
The timing function of the ScrollView transition.
+
Description
The transition of the ScrollView.
diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss index b14ba8d154c..134d8a72137 100644 --- a/packages/default/scss/_variables.scss +++ b/packages/default/scss/_variables.scss @@ -224,9 +224,6 @@ $kendo-letter-spacing: null !default; /// Box shadow of focused items. $kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default; -/// Transition used across all components. -$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default; - /// Filter used for disabled items. $kendo-disabled-filter: grayscale(.1) !default; diff --git a/packages/default/scss/button/_layout.scss b/packages/default/scss/button/_layout.scss index 7cdcede19a0..0857c8d08e6 100644 --- a/packages/default/scss/button/_layout.scss +++ b/packages/default/scss/button/_layout.scss @@ -273,7 +273,7 @@ top: -$kendo-button-border-width; bottom: -$kendo-button-border-width; z-index: 0; - transition: opacity .2s ease-in-out; + @include kendo-motion(short-4, ease-in-out, opacity); } @@ -340,7 +340,7 @@ top: -$kendo-button-border-width; bottom: -$kendo-button-border-width; z-index: 0; - transition: opacity .2s ease-in-out; + @include kendo-motion(short-4, ease-in-out, opacity); } } diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss index 331e9dbae62..7dae291e55f 100644 --- a/packages/default/scss/button/_variables.scss +++ b/packages/default/scss/button/_variables.scss @@ -254,4 +254,4 @@ $kendo-flat-button-focus-ring-opacity: .12 !default; /// The color transition of the flat Button. /// @group button -$kendo-button-transition: color .2s ease-in-out !default; +$kendo-button-transition: k-motion(short-4, ease-in-out, color) !default; diff --git a/packages/default/scss/chat/_layout.scss b/packages/default/scss/chat/_layout.scss index 1a64923e7ef..a4709e10dc8 100644 --- a/packages/default/scss/chat/_layout.scss +++ b/packages/default/scss/chat/_layout.scss @@ -107,7 +107,7 @@ max-width: 100%; margin: $kendo-chat-bubble-spacing 0 0; position: relative; - transition: margin .2s ease-in-out; + @include kendo-motion(short-4, ease-in-out, margin); outline: none; } @@ -125,14 +125,14 @@ opacity: 0; top: 50%; transform: translateY(-50%); - transition: opacity .2s ease-in-out; + @include kendo-motion(short-4, ease-in-out, opacity); } .k-message-status { margin-top: $kendo-chat-bubble-spacing; height: 0; overflow: hidden; top: 100%; - transition: height .2s ease-in-out; + @include kendo-motion(short-4, ease-in-out, height); } @@ -234,9 +234,7 @@ user-select: none; display: inline-block; flex: 0 0 auto; - transition-property: color, background-color, border-color; - transition-duration: .2s; - transition-timing-function: ease-in-out; + @include kendo-motion(short-4, ease-in-out, color, background-color, border-color); outline: none; } diff --git a/packages/default/scss/checkbox/_layout.scss b/packages/default/scss/checkbox/_layout.scss index 7e8e822e074..b6229fc0667 100644 --- a/packages/default/scss/checkbox/_layout.scss +++ b/packages/default/scss/checkbox/_layout.scss @@ -172,7 +172,7 @@ top: 50%; border-radius: 100%; z-index: -1; - transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1); + transition: k-motion(short-2, linear, opacity), k-motion(short-3, ease-in-out, transform); transform: translate(-50%, -50%) scale(0); transform-origin: center center; } diff --git a/packages/default/scss/common/_animations.scss b/packages/default/scss/common/_animations.scss index 17d682ef850..bcb70e59e36 100644 --- a/packages/default/scss/common/_animations.scss +++ b/packages/default/scss/common/_animations.scss @@ -29,7 +29,7 @@ &-enter-active, &-appear-active { transform: translate(0, 0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform) } &-exit { @@ -38,7 +38,7 @@ &-exit-active { transform: translate(100%, 0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform) } } @@ -51,7 +51,7 @@ &-enter-active, &-appear-active { transform: translate(0, 0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform) } &-exit { @@ -60,7 +60,7 @@ &-exit-active { transform: translate(-100%, 0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform) } } @@ -73,7 +73,7 @@ &-enter-active, &-appear-active { transform: translate(0, 0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform) } &-exit { @@ -82,7 +82,7 @@ &-exit-active { transform: translate(0, 100%); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform) } } @@ -95,7 +95,7 @@ &-enter-active, &-appear-active { transform: translate(0, 0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform) } &-exit { @@ -104,7 +104,7 @@ &-exit-active { transform: translate(0, -100%); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform) } } @@ -117,7 +117,7 @@ &-enter-active, &-appear-active { transform: scaleY(1); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform) } &-exit { @@ -126,7 +126,7 @@ &-exit-active { transform: scaleY(0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform) } } @@ -139,7 +139,7 @@ &-enter-active, &-appear-active { transform: scaleX(1); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform) } &-exit { @@ -148,7 +148,7 @@ &-exit-active { transform: scaleX(0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform) } } @@ -161,7 +161,7 @@ &-enter-active, &-appear-active { opacity: 1; - transition: opacity 500ms ease-in-out; + @include kendo-motion(long-2, ease-in-out, opacity); } &-exit { @@ -170,7 +170,7 @@ &-exit-active { opacity: 0; - transition: opacity 500ms ease-in-out; + @include kendo-motion(long-2, ease-in-out, opacity); } &-exit-active + &-exit-active, @@ -190,7 +190,7 @@ &-appear-active { opacity: 1; transform: scale(1); - transition: transform, opacity 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform, opacity); } &-exit { @@ -201,7 +201,7 @@ &-exit-active { opacity: 0; transform: scale(2); - transition: transform, opacity 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform, opacity); } } @@ -216,7 +216,7 @@ &-appear-active { opacity: 1; transform: scale(1); - transition: transform, opacity 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform, opacity); } &-exit { @@ -227,7 +227,7 @@ &-exit-active { opacity: 0; transform: scale(0); - transition: transform, opacity 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform, opacity); } } @@ -261,7 +261,7 @@ &-enter-active, &-appear-active { transform: translateY(0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -270,7 +270,7 @@ &-exit-active { transform: translateY(-100%); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -283,7 +283,7 @@ &-enter-active, &-appear-active { transform: translateY(0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -292,7 +292,7 @@ &-exit-active { transform: translateY(100%); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -305,7 +305,7 @@ &-enter-active, &-appear-active { transform: translateX(0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -314,7 +314,7 @@ &-exit-active { transform: translateX(-100%); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -327,7 +327,7 @@ &-enter-active, &-appear-active { transform: translateX(0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -336,7 +336,7 @@ &-exit-active { transform: translateX(100%); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -348,13 +348,13 @@ &-enter-active, &-appear-active { - transition: max-height 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, max-height); } &-exit-active { // override any max-height set to element to allow animation max-height: 0 !important; // stylelint-disable-line declaration-no-important - transition: max-height 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, max-height); } } @@ -366,13 +366,13 @@ &-enter-active, &-appear-active { - transition: max-width 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, max-width); } &-exit-active { // override any max-height set to element to allow animation max-width: 0 !important; // stylelint-disable-line declaration-no-important - transition: max-width 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, max-width); } } } diff --git a/packages/default/scss/core/_index.scss b/packages/default/scss/core/_index.scss index 4039403b902..88b3d72b261 100644 --- a/packages/default/scss/core/_index.scss +++ b/packages/default/scss/core/_index.scss @@ -10,6 +10,7 @@ $wcag-min-contrast-ratio: 4.5 !default; // Backward compatibility @import "./color-system/_swatch-legacy.scss"; +@import "./motion/_motion-legacy.scss"; // Expose @include exports("kendo-core-styles") { @@ -17,4 +18,6 @@ $wcag-min-contrast-ratio: 4.5 !default; // Elevation System @include kendo-elevation--styles(); + // Motion System + @include kendo-motion--styles(); } diff --git a/packages/default/scss/core/motion/_motion-legacy.scss b/packages/default/scss/core/motion/_motion-legacy.scss new file mode 100644 index 00000000000..42d5f7fe31b --- /dev/null +++ b/packages/default/scss/core/motion/_motion-legacy.scss @@ -0,0 +1,2 @@ +/// Transition used across all components. +$kendo-transition: k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) !default; diff --git a/packages/default/scss/core/motion/index.import.scss b/packages/default/scss/core/motion/index.import.scss new file mode 100644 index 00000000000..2a94b293a71 --- /dev/null +++ b/packages/default/scss/core/motion/index.import.scss @@ -0,0 +1 @@ +@import "@progress/kendo-theme-core/scss/motion/index.import.scss"; diff --git a/packages/default/scss/dataviz/_variables.scss b/packages/default/scss/dataviz/_variables.scss index d24b1736f31..6ed47d4e07e 100644 --- a/packages/default/scss/dataviz/_variables.scss +++ b/packages/default/scss/dataviz/_variables.scss @@ -111,7 +111,7 @@ $kendo-chart-area-opacity: .6 !default; $kendo-chart-area-inactive-opacity: .1 !default; $kendo-chart-line-inactive-opacity: .3 !default; -$kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default; +$kendo-chart-tooltip-transition: k-motion(medium-2, decelerate-out, left, top) !default; $kendo-chart-bg: $kendo-component-bg !default; $kendo-chart-text: $kendo-component-text !default; diff --git a/packages/default/scss/datetimepicker/_layout.scss b/packages/default/scss/datetimepicker/_layout.scss index 92e018a0499..435ae9539be 100644 --- a/packages/default/scss/datetimepicker/_layout.scss +++ b/packages/default/scss/datetimepicker/_layout.scss @@ -6,7 +6,7 @@ // Datetime selector .k-datetime-selector { display: flex; - transition: transform .2s; + @include kendo-motion(short-4, ease-in, transform); } // Wrap diff --git a/packages/default/scss/drawer/_layout.scss b/packages/default/scss/drawer/_layout.scss index 9aad85eea93..6ef0392dfaf 100644 --- a/packages/default/scss/drawer/_layout.scss +++ b/packages/default/scss/drawer/_layout.scss @@ -22,7 +22,7 @@ display: flex; flex-direction: column; flex: 0 0 auto; - transition: all 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, all); overflow: hidden; -webkit-touch-callout: none; -webkit-tap-highlight-color: $kendo-color-rgba-transparent; @@ -111,7 +111,7 @@ overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; // Scrollbar styles for Mozilla - transition: all 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, all); // Scrollbar styles for Chrome, Safari and Opera &::-webkit-scrollbar { diff --git a/packages/default/scss/floating-label/_layout.scss b/packages/default/scss/floating-label/_layout.scss index 97f9c6fbf69..f683c71b004 100644 --- a/packages/default/scss/floating-label/_layout.scss +++ b/packages/default/scss/floating-label/_layout.scss @@ -29,7 +29,7 @@ overflow: hidden; cursor: text; transform-origin: left center; - transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, left $kendo-floating-label-transition; + transition: $kendo-floating-label-transition; } > .k-widget { @@ -68,7 +68,7 @@ > .k-label { transform-origin: right center; - transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition; + transition: $kendo-floating-label-transition; } &.k-empty { diff --git a/packages/default/scss/floating-label/_variables.scss b/packages/default/scss/floating-label/_variables.scss index 81e6775420b..519386e8c61 100644 --- a/packages/default/scss/floating-label/_variables.scss +++ b/packages/default/scss/floating-label/_variables.scss @@ -34,7 +34,7 @@ $kendo-floating-label-focus-offset-y: 0 !default; /// The transition of the Floating Label. /// @group floating-label -$kendo-floating-label-transition: .2s ease-out !default; +$kendo-floating-label-transition: k-motion(short-4, ease-out, transform, color, top, inset-inline-start) !default; /// The background color of the Floating Label. /// @group floating-label diff --git a/packages/default/scss/list/_layout.scss b/packages/default/scss/list/_layout.scss index 2fa820ac45e..5419765705f 100644 --- a/packages/default/scss/list/_layout.scss +++ b/packages/default/scss/list/_layout.scss @@ -98,9 +98,7 @@ align-content: center; gap: $kendo-icon-spacing; position: relative; - transition-property: color, background-color, outline-color, box-shadow; - transition-duration: 200ms; - transition-timing-function: ease; + @include kendo-motion(short-4, ease, color, background-color, outline-color, box-shadow); &.k-first::before { content: ""; diff --git a/packages/default/scss/progressbar/_layout.scss b/packages/default/scss/progressbar/_layout.scss index 241051c73b6..268cb005f3b 100644 --- a/packages/default/scss/progressbar/_layout.scss +++ b/packages/default/scss/progressbar/_layout.scss @@ -186,7 +186,7 @@ > .k-progressbar-value, > .k-progressbar-value > .k-progress-status-wrap { - transition: width .1s ease-in-out; + @include kendo-motion(short-2, ease-in-out, width); } } diff --git a/packages/default/scss/progressbar/_theme.scss b/packages/default/scss/progressbar/_theme.scss index 6e2da7a2e23..dfd60492e7c 100644 --- a/packages/default/scss/progressbar/_theme.scss +++ b/packages/default/scss/progressbar/_theme.scss @@ -42,7 +42,7 @@ .k-circular-progressbar-arc { stroke: $kendo-circular-progressbar-arc-stroke; - transition: stroke .5s ease; + @include kendo-motion(long-2, ease, stroke); } } diff --git a/packages/default/scss/radio/_layout.scss b/packages/default/scss/radio/_layout.scss index 86b64d2df07..38079b42223 100644 --- a/packages/default/scss/radio/_layout.scss +++ b/packages/default/scss/radio/_layout.scss @@ -164,7 +164,7 @@ top: 50%; border-radius: 100%; z-index: -1; - transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1); + transition: k-motion(short-2, linear, opacity), k-motion(short-3, ease-in-out, transform); transform: translate(-50%, -50%) scale(0); transform-origin: center center; } diff --git a/packages/default/scss/rating/_layout.scss b/packages/default/scss/rating/_layout.scss index 03ce3207095..dfc352a9762 100644 --- a/packages/default/scss/rating/_layout.scss +++ b/packages/default/scss/rating/_layout.scss @@ -41,7 +41,7 @@ margin: 0; outline: 0; overflow: hidden; - transition: color 200ms ease-out 0s; + @include kendo-motion(short-4, ease-out, color); * { pointer-events: none; diff --git a/packages/default/scss/ripple/_layout.scss b/packages/default/scss/ripple/_layout.scss index 5ed0b1eb22f..43abceba215 100644 --- a/packages/default/scss/ripple/_layout.scss +++ b/packages/default/scss/ripple/_layout.scss @@ -21,7 +21,7 @@ border-radius: 50%; padding: 0; transform: translate(-50%, -50%) scale(0); - transition: opacity 100ms linear, transform 500ms cubic-bezier(.4, 0, .2, 1); + transition: k-motion(short-2, linear, opacity), k-motion(long-2, ease-in-out, transform); opacity: .1; background-color: currentColor; diff --git a/packages/default/scss/scroller/_layout.scss b/packages/default/scss/scroller/_layout.scss index 4dbeab038a0..83138a01592 100644 --- a/packages/default/scss/scroller/_layout.scss +++ b/packages/default/scss/scroller/_layout.scss @@ -42,7 +42,7 @@ width: 2rem; font-size: 2rem; transform: rotate(0deg); - transition: transform 300ms linear; + @include kendo-motion(medium-2, linear, transform); } .km-widget .km-scroller-release .km-icon { transform: rotate(180deg); @@ -61,7 +61,7 @@ width: .4em; opacity: 0; transform-origin: 0 0; - transition: opacity .3s linear; + @include kendo-motion(medium-2, linear, opacity); .k-map &, .k-diagram & { diff --git a/packages/default/scss/scrollview/_layout.scss b/packages/default/scss/scrollview/_layout.scss index 650116dbe78..090285ca032 100644 --- a/packages/default/scss/scrollview/_layout.scss +++ b/packages/default/scss/scrollview/_layout.scss @@ -40,8 +40,7 @@ .k-scrollview-wrap.k-scrollview-animate { width: calc( var(--kendo-scrollview-views, 1) * 100% ); - transition-duration: $kendo-scrollview-transition-duration; - transition-timing-function: $kendo-scrollview-transition-timing-function; + transition: $kendo-scrollview-transition; transform: translateX( calc( -100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) ); [dir="rtl"] &, @@ -157,8 +156,7 @@ .k-scrollview-animation { - transition-duration: .3s; - transition-timing-function: ease-in-out; + transition: $kendo-scrollview-transition; } } diff --git a/packages/default/scss/scrollview/_variables.scss b/packages/default/scss/scrollview/_variables.scss index 7f83326918a..2f2d7850e47 100644 --- a/packages/default/scss/scrollview/_variables.scss +++ b/packages/default/scss/scrollview/_variables.scss @@ -84,9 +84,11 @@ $kendo-scrollview-light-bg: rgba(255, 255, 255, .4) !default; /// @group scrollview $kendo-scrollview-dark-bg: rgba(0, 0, 0, .4) !default; -/// The duration of the ScrollView transition. -/// @group scrollview +/// @deprecated Use `$kendo-scrollview-transition` instead. $kendo-scrollview-transition-duration: .3s !default; -/// The timing function of the ScrollView transition. -/// @group scrollview +/// @deprecated Use `$kendo-scrollview-transition` instead. $kendo-scrollview-transition-timing-function: ease-in-out !default; + +/// The transition of the ScrollView. +/// @group scrollview +$kendo-scrollview-transition: k-motion(medium-2, ease-in-out, all) !default; diff --git a/packages/default/scss/slider/_variables.scss b/packages/default/scss/slider/_variables.scss index a41663cc2e3..7869c2a4856 100644 --- a/packages/default/scss/slider/_variables.scss +++ b/packages/default/scss/slider/_variables.scss @@ -39,9 +39,9 @@ $kendo-slider-draghandle-pressed-gradient: null !default; $kendo-slider-draghandle-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary , .3 )) !default; -$kendo-slider-transition-speed: .3s !default; -$kendo-slider-transition-function: ease-out !default; -$kendo-slider-draghandle-transition-speed: .4s !default; +$kendo-slider-transition-speed: var(--kendo-motion-medium-2, .3s) !default; +$kendo-slider-transition-function: var(--kendo-motion-ease-out, ease-out) !default; +$kendo-slider-draghandle-transition-speed: var(--kendo-motion-medium-4, .4s) !default; $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default; $kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 )) !default; diff --git a/packages/default/scss/stepper/_layout.scss b/packages/default/scss/stepper/_layout.scss index 9257101998a..2534184be1d 100644 --- a/packages/default/scss/stepper/_layout.scss +++ b/packages/default/scss/stepper/_layout.scss @@ -69,9 +69,7 @@ position: relative; z-index: 1; overflow: visible; - transition-property: color, background-color, border-color; - transition-duration: .4s; - transition-timing-function: ease-in-out; + @include kendo-motion(medium-4, ease-in-out, color, background-color, border-color); &::before { @include border-radius( $kendo-stepper-indicator-border-radius ); @@ -240,7 +238,7 @@ .k-step-content { height: 0; overflow: hidden; - transition: $kendo-stepper-content-transition-property $kendo-stepper-content-transition-duration $kendo-stepper-content-transition-timing-function; + transition: $kendo-stepper-content-transition; } .k-step-current .k-step-content { diff --git a/packages/default/scss/stepper/_variables.scss b/packages/default/scss/stepper/_variables.scss index 78466832111..84dc615d483 100644 --- a/packages/default/scss/stepper/_variables.scss +++ b/packages/default/scss/stepper/_variables.scss @@ -82,6 +82,11 @@ $kendo-stepper-progressbar-text: null !default; $kendo-stepper-progressbar-fill-bg: null !default; $kendo-stepper-progressbar-fill-text: null !default; +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-property: height !default; +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-duration: 300ms !default; +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default; + +$kendo-stepper-content-transition: k-motion(medium-2, ease-in-out, height) !default; diff --git a/packages/default/scss/switch/_layout.scss b/packages/default/scss/switch/_layout.scss index cfac36f9c5d..5b6b00b5cb5 100644 --- a/packages/default/scss/switch/_layout.scss +++ b/packages/default/scss/switch/_layout.scss @@ -45,7 +45,7 @@ flex-flow: row nowrap; flex: 1 0 auto; position: relative; - transition: background-color 200ms ease-in-out; + @include kendo-motion(short-4, ease-in-out, background-color); } @@ -55,7 +55,7 @@ height: 0; overflow: visible; position: absolute; - transition: left 200ms ease-in-out; + @include kendo-motion(short-4, ease-in-out, left); top: 50%; } .k-switch-thumb { diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss index bdf3f39c120..54be9d4a00e 100644 --- a/packages/default/scss/tabstrip/_layout.scss +++ b/packages/default/scss/tabstrip/_layout.scss @@ -139,7 +139,7 @@ position: absolute; top: 0; left: 0; - transition: width .2s linear; + @include kendo-motion(short-4, linear, width); // TODO: a better name display: none; diff --git a/packages/default/scss/timeline/_layout.scss b/packages/default/scss/timeline/_layout.scss index 6cfae986c0f..58b76ee2f94 100644 --- a/packages/default/scss/timeline/_layout.scss +++ b/packages/default/scss/timeline/_layout.scss @@ -200,7 +200,7 @@ margin-block: -$kendo-icon-spacing; margin-inline: 0; transform: rotate(90deg); - transition: transform .2s ease-in-out; + @include kendo-motion(short-4, ease-in-out, transform); } &.k-collapsed { @@ -350,7 +350,7 @@ z-index: 2; .k-timeline-scrollable-wrap { - transition: transform 1s ease-in-out; + @include kendo-motion(extra-long-4, ease-in-out, transform); } } diff --git a/packages/fluent/docs/customization-common.md b/packages/fluent/docs/customization-common.md index c5d7b1a9b4c..d9ab75c9f8d 100644 --- a/packages/fluent/docs/customization-common.md +++ b/packages/fluent/docs/customization-common.md @@ -219,6 +219,56 @@ The following table lists the available variables for customization.
Description
The theme colors map for the Dialog.
+ + $kendo-scrollview-transition-duration + + .3s + + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-scrollview-transition-timing-function + + ease-in-out + + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-stepper-content-transition-property + + none + + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-duration + + 300ms + + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-timing-function + + cubic-bezier(.4, 0, .2, 1) 0ms + + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + $kendo-tooltip-brand-colors diff --git a/packages/fluent/docs/customization-floating-label.md b/packages/fluent/docs/customization-floating-label.md index e351856e5ef..709ff971291 100644 --- a/packages/fluent/docs/customization-floating-label.md +++ b/packages/fluent/docs/customization-floating-label.md @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-floating-label-transition - .2s ease-out + k-motion(short-4, ease-out, transform, color, top, inset-inline-start) diff --git a/packages/fluent/docs/customization-scrollview.md b/packages/fluent/docs/customization-scrollview.md index 4c991ada66d..c06491b3e34 100644 --- a/packages/fluent/docs/customization-scrollview.md +++ b/packages/fluent/docs/customization-scrollview.md @@ -298,23 +298,13 @@ The following table lists the available variables for customization. - $kendo-scrollview-transition-duration + $kendo-scrollview-transition - .3s + k-motion( medium-2, ease-in-out, all ) -
Description
The duration of the ScrollView transition.
- - - - $kendo-scrollview-transition-timing-function - - ease-in-out - - - -
Description
The timing function of the ScrollView transition.
+
Description
The transition of the ScrollView.
diff --git a/packages/fluent/docs/customization-slider.md b/packages/fluent/docs/customization-slider.md index 65a42b90120..f3e3658987a 100644 --- a/packages/fluent/docs/customization-slider.md +++ b/packages/fluent/docs/customization-slider.md @@ -440,7 +440,7 @@ The following table lists the available variables for customization. $kendo-slider-transition-speed - .3s + var(--kendo-motion-medium-2, .3s) @@ -450,7 +450,7 @@ The following table lists the available variables for customization. $kendo-slider-transition-function - ease-out + var(--kendo-motion-ease-out, ease-out) @@ -460,7 +460,7 @@ The following table lists the available variables for customization. $kendo-slider-thumb-transition-speed - .4s + var(--kendo-motion-medium-4, .4s) diff --git a/packages/fluent/docs/customization-stepper.md b/packages/fluent/docs/customization-stepper.md index 37735d997e1..4b7242b3f79 100644 --- a/packages/fluent/docs/customization-stepper.md +++ b/packages/fluent/docs/customization-stepper.md @@ -598,33 +598,13 @@ The following table lists the available variables for customization. - $kendo-stepper-content-transition-property + $kendo-stepper-content-transition - none + k-motion(medium-2, ease-in-out, none) -
Description
The property name of the stepper transition.
- - - - $kendo-stepper-content-transition-duration - - 300ms - - - -
Description
The duration of the stepper transition.
- - - - $kendo-stepper-content-transition-timing-function - - cubic-bezier(.4, 0, .2, 1) 0ms - - - -
Description
The timing funtion of the stepper transition.
+
Description
The transition of the stepper content.
diff --git a/packages/fluent/docs/customization.md b/packages/fluent/docs/customization.md index ab7e3900afa..e77902e4e42 100644 --- a/packages/fluent/docs/customization.md +++ b/packages/fluent/docs/customization.md @@ -223,6 +223,56 @@ The following table lists the available variables for customizing the Fluent the
Description
The theme colors map for the Dialog.
+ + $kendo-scrollview-transition-duration + + .3s + + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-scrollview-transition-timing-function + + ease-in-out + + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-stepper-content-transition-property + + none + + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-duration + + 300ms + + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-timing-function + + cubic-bezier(.4, 0, .2, 1) 0ms + + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + $kendo-tooltip-brand-colors @@ -11049,7 +11099,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-floating-label-transition - .2s ease-out + k-motion(short-4, ease-out, transform, color, top, inset-inline-start) @@ -24087,23 +24137,13 @@ The following table lists the available variables for customizing the Fluent the - $kendo-scrollview-transition-duration + $kendo-scrollview-transition - .3s + k-motion( medium-2, ease-in-out, all ) -
Description
The duration of the ScrollView transition.
- - - - $kendo-scrollview-transition-timing-function - - ease-in-out - - - -
Description
The timing function of the ScrollView transition.
+
Description
The transition of the ScrollView.
@@ -24855,7 +24895,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-slider-transition-speed - .3s + var(--kendo-motion-medium-2, .3s) @@ -24865,7 +24905,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-slider-transition-function - ease-out + var(--kendo-motion-ease-out, ease-out) @@ -24875,7 +24915,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-slider-thumb-transition-speed - .4s + var(--kendo-motion-medium-4, .4s) @@ -26837,33 +26877,13 @@ The following table lists the available variables for customizing the Fluent the - $kendo-stepper-content-transition-property - - none - - - -
Description
The property name of the stepper transition.
- - - - $kendo-stepper-content-transition-duration + $kendo-stepper-content-transition - 300ms - - - -
Description
The duration of the stepper transition.
- - - - $kendo-stepper-content-transition-timing-function - - cubic-bezier(.4, 0, .2, 1) 0ms + k-motion(medium-2, ease-in-out, none) -
Description
The timing funtion of the stepper transition.
+
Description
The transition of the stepper content.
diff --git a/packages/fluent/scss/button/_layout.scss b/packages/fluent/scss/button/_layout.scss index 583c850cfe9..df3fc0c34a6 100644 --- a/packages/fluent/scss/button/_layout.scss +++ b/packages/fluent/scss/button/_layout.scss @@ -188,7 +188,7 @@ top: -$kendo-button-border-width; bottom: -$kendo-button-border-width; z-index: 0; - transition: opacity .2s ease-in-out; + @include kendo-motion(short-4, ease-in-out, opacity); } // Hovered state diff --git a/packages/fluent/scss/chat/_layout.scss b/packages/fluent/scss/chat/_layout.scss index a3a03aae7e0..5474df8b8ac 100644 --- a/packages/fluent/scss/chat/_layout.scss +++ b/packages/fluent/scss/chat/_layout.scss @@ -109,7 +109,7 @@ max-width: 100%; margin: var( --kendo-chat-bubble-spacing, #{ $kendo-chat-bubble-spacing } ) 0 0; position: relative; - transition: margin .2s ease-in-out; + @include kendo-motion(short-4, ease-in-out, margin); outline: none; } @@ -127,14 +127,14 @@ opacity: 0; top: 50%; transform: translateY(-50%); - transition: opacity .2s ease-in-out; + @include kendo-motion(short-4, ease-in-out, opacity); } .k-message-status { margin-block-start: var( --kendo-chat-bubble-spacing, #{ $kendo-chat-bubble-spacing } ); height: 0; overflow: hidden; top: 100%; - transition: height .2s ease-in-out; + @include kendo-motion(short-4, ease-in-out, height); } @@ -236,9 +236,7 @@ user-select: none; display: inline-block; flex: 0 0 auto; - transition-property: color, background-color, border-color; - transition-duration: .2s; - transition-timing-function: ease-in-out; + @include kendo-motion(short-4, ease-in-out, color, background-color, border-color); outline: none; } diff --git a/packages/fluent/scss/checkbox/_layout.scss b/packages/fluent/scss/checkbox/_layout.scss index bb98d45ba13..2a83d2486d2 100644 --- a/packages/fluent/scss/checkbox/_layout.scss +++ b/packages/fluent/scss/checkbox/_layout.scss @@ -255,7 +255,7 @@ top: 50%; border-radius: 100%; z-index: -1; - transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1); + transition: k-motion(short-2, linear, opacity), k-motion(short-3, ease-in-out, transform); transform: translate(-50%, -50%) scale(0); transform-origin: center center; } diff --git a/packages/fluent/scss/core/_index.scss b/packages/fluent/scss/core/_index.scss index 9370e5d8a7e..52fe3e9864e 100644 --- a/packages/fluent/scss/core/_index.scss +++ b/packages/fluent/scss/core/_index.scss @@ -7,6 +7,10 @@ @use "./elevation" as *; @forward "./elevation/legacy"; +// Motion +@use "./motion" as *; +@forward "./motion/legacy"; + // Variables @forward "./variables"; diff --git a/packages/fluent/scss/core/_variables.scss b/packages/fluent/scss/core/_variables.scss index d503bc7fafc..42c4051ffcf 100644 --- a/packages/fluent/scss/core/_variables.scss +++ b/packages/fluent/scss/core/_variables.scss @@ -45,8 +45,6 @@ $kendo-letter-spacing: normal !default; // $kendo-scrollbar-width: 17px !default; -// Default transition -$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out !default; @mixin core-styles() { :root { @@ -71,7 +69,5 @@ $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, bord --kendo-letter-spacing: #{$kendo-letter-spacing}; - - --kendo-transition: #{$kendo-transition}; } } diff --git a/packages/fluent/scss/core/helpers/_animations.scss b/packages/fluent/scss/core/helpers/_animations.scss index cd1c09aa1e4..c6c761b6599 100644 --- a/packages/fluent/scss/core/helpers/_animations.scss +++ b/packages/fluent/scss/core/helpers/_animations.scss @@ -1,3 +1,5 @@ +@use "../motion/_index.scss" as *; + // Animation container .k-animation-container { position: absolute; @@ -25,7 +27,7 @@ &-enter-active, &-appear-active { transform: translate(0, 0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -34,7 +36,7 @@ &-exit-active { transform: translate(100%, 0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -47,7 +49,7 @@ &-enter-active, &-appear-active { transform: translate(0, 0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -56,7 +58,7 @@ &-exit-active { transform: translate(-100%, 0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -69,7 +71,7 @@ &-enter-active, &-appear-active { transform: translate(0, 0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -78,7 +80,7 @@ &-exit-active { transform: translate(0, 100%); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -91,7 +93,7 @@ &-enter-active, &-appear-active { transform: translate(0, 0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -100,7 +102,7 @@ &-exit-active { transform: translate(0, -100%); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -113,7 +115,7 @@ &-enter-active, &-appear-active { transform: scaleY(1); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -122,7 +124,7 @@ &-exit-active { transform: scaleY(0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -135,7 +137,7 @@ &-enter-active, &-appear-active { transform: scaleX(1); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -144,7 +146,7 @@ &-exit-active { transform: scaleX(0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -157,7 +159,7 @@ &-enter-active, &-appear-active { opacity: 1; - transition: opacity 500ms ease-in-out; + @include kendo-motion(long-2, ease-in-out, opacity); } &-exit { @@ -166,7 +168,7 @@ &-exit-active { opacity: 0; - transition: opacity 500ms ease-in-out; + @include kendo-motion(long-2, ease-in-out, opacity); } &-exit-active + &-exit-active, @@ -186,7 +188,7 @@ &-appear-active { opacity: 1; transform: scale(1); - transition: transform, opacity 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform, opacity); } &-exit { @@ -197,7 +199,7 @@ &-exit-active { opacity: 0; transform: scale(2); - transition: transform, opacity 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform, opacity); } } @@ -212,7 +214,7 @@ &-appear-active { opacity: 1; transform: scale(1); - transition: transform, opacity 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform, opacity); } &-exit { @@ -223,7 +225,7 @@ &-exit-active { opacity: 0; transform: scale(0); - transition: transform, opacity 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform, opacity); } } @@ -257,7 +259,7 @@ &-enter-active, &-appear-active { transform: translateY(0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -266,7 +268,7 @@ &-exit-active { transform: translateY(-100%); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -279,7 +281,7 @@ &-enter-active, &-appear-active { transform: translateY(0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -288,7 +290,7 @@ &-exit-active { transform: translateY(100%); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -301,7 +303,7 @@ &-enter-active, &-appear-active { transform: translateX(0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -310,7 +312,7 @@ &-exit-active { transform: translateX(-100%); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -323,7 +325,7 @@ &-enter-active, &-appear-active { transform: translateX(0); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } &-exit { @@ -332,7 +334,7 @@ &-exit-active { transform: translateX(100%); - transition: transform 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, transform); } } @@ -344,13 +346,13 @@ &-enter-active, &-appear-active { - transition: max-height 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, max-height); } &-exit-active { // override any max-height set to element to allow animation max-height: 0 !important; // stylelint-disable-line declaration-no-important - transition: max-height 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, max-height); } } @@ -362,13 +364,13 @@ &-enter-active, &-appear-active { - transition: max-width 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, max-width); } &-exit-active { // override any max-height set to element to allow animation max-width: 0 !important; // stylelint-disable-line declaration-no-important - transition: max-width 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, max-width); } } diff --git a/packages/fluent/scss/core/motion/_index.scss b/packages/fluent/scss/core/motion/_index.scss new file mode 100644 index 00000000000..a3f2cac0df8 --- /dev/null +++ b/packages/fluent/scss/core/motion/_index.scss @@ -0,0 +1 @@ +@forward "@progress/kendo-theme-core/scss/motion/index.import.scss"; diff --git a/packages/fluent/scss/core/motion/_legacy.scss b/packages/fluent/scss/core/motion/_legacy.scss new file mode 100644 index 00000000000..d919ef8da8a --- /dev/null +++ b/packages/fluent/scss/core/motion/_legacy.scss @@ -0,0 +1,8 @@ +@use "./index" as *; + +// Default transition +$kendo-transition: k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow , opacity, width, height) !default; + +:root { + --kendo-transition: #{$kendo-transition}; +} diff --git a/packages/fluent/scss/dataviz/_layout.scss b/packages/fluent/scss/dataviz/_layout.scss index 1144f1ab44d..d09dffa1662 100644 --- a/packages/fluent/scss/dataviz/_layout.scss +++ b/packages/fluent/scss/dataviz/_layout.scss @@ -65,7 +65,7 @@ .k-chart-tooltip-wrapper .k-animation-container-shown, .k-chart-tooltip-wrapper.k-animation-container-shown { - transition: left ease-in 80ms, top ease-in 80ms; + @include kendo-motion( short-2, ease-in, left, top ); } .k-sparkline-tooltip-wrapper, diff --git a/packages/fluent/scss/datetimepicker/_layout.scss b/packages/fluent/scss/datetimepicker/_layout.scss index 09c45e0e48f..3f51808430f 100644 --- a/packages/fluent/scss/datetimepicker/_layout.scss +++ b/packages/fluent/scss/datetimepicker/_layout.scss @@ -10,7 +10,7 @@ // Datetime selector .k-datetime-selector { display: flex; - transition: transform .2s; + @include kendo-motion(short-4, ease, transform); } // Wrap diff --git a/packages/fluent/scss/drawer/_layout.scss b/packages/fluent/scss/drawer/_layout.scss index 171713976f5..1aeeff1283d 100644 --- a/packages/fluent/scss/drawer/_layout.scss +++ b/packages/fluent/scss/drawer/_layout.scss @@ -25,7 +25,7 @@ display: flex; flex-direction: column; flex: 0 0 auto; - transition: all 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, all); overflow: hidden; -webkit-touch-callout: none; -webkit-tap-highlight-color: $kendo-color-rgba-transparent; @@ -112,7 +112,7 @@ overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; // Scrollbar styles for Mozilla - transition: all 300ms ease-in-out; + @include kendo-motion(medium-2, ease-in-out, all); // Scrollbar styles for Chrome, Safari and Opera &::-webkit-scrollbar { @@ -158,7 +158,7 @@ inset-block-start: 0; z-index: 2; opacity: 0; - transition: opacity .3s; + @include kendo-motion(medium-2, ease, opacity); pointer-events: none; .k-drawer-start &, diff --git a/packages/fluent/scss/floating-label/_layout.scss b/packages/fluent/scss/floating-label/_layout.scss index baeb15ddf95..6d99cc2e933 100644 --- a/packages/fluent/scss/floating-label/_layout.scss +++ b/packages/fluent/scss/floating-label/_layout.scss @@ -31,7 +31,7 @@ overflow: hidden; cursor: text; transform-origin: left center; - transition: transform var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), color var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), top var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), left var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ); + transition: var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ); } > .k-widget { @@ -67,7 +67,7 @@ > .k-label { transform-origin: right center; - transition: transform var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), color var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), top var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), right var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ); + transition: var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ); } &.k-empty { diff --git a/packages/fluent/scss/floating-label/_variables.scss b/packages/fluent/scss/floating-label/_variables.scss index f5b50514f77..33fdfc42470 100644 --- a/packages/fluent/scss/floating-label/_variables.scss +++ b/packages/fluent/scss/floating-label/_variables.scss @@ -47,7 +47,7 @@ $kendo-floating-label-focus-offset-y: 0 !default; /// The transition of the Floating Label. /// @group floating-label -$kendo-floating-label-transition: .2s ease-out !default; +$kendo-floating-label-transition: k-motion(short-4, ease-out, transform, color, top, inset-inline-start) !default; /// The background color of the Floating Label. /// @group floating-label diff --git a/packages/fluent/scss/index.scss b/packages/fluent/scss/index.scss index b44db6422ab..b34bced6b1b 100644 --- a/packages/fluent/scss/index.scss +++ b/packages/fluent/scss/index.scss @@ -343,6 +343,9 @@ @include kendo-elevation--styles(); @include elevation--styles-legacy(); + // Motion + @include kendo-motion--styles(); + // Typography and utils @include typography-styles(); @include utils-styles(); diff --git a/packages/fluent/scss/list/_layout.scss b/packages/fluent/scss/list/_layout.scss index cae5fdace5e..72763b2254e 100644 --- a/packages/fluent/scss/list/_layout.scss +++ b/packages/fluent/scss/list/_layout.scss @@ -101,9 +101,7 @@ align-content: center; gap: var( --kendo-icon-spacing, .5rem ); position: relative; - transition-property: color, background-color, outline-color, box-shadow; - transition-duration: 200ms; - transition-timing-function: ease; + @include kendo-motion(short-4, ease, color, background-color, outline-color, box-shadow); &.k-first::before { content: ""; diff --git a/packages/fluent/scss/progressbar/_layout.scss b/packages/fluent/scss/progressbar/_layout.scss index 865d694c750..300724229f5 100644 --- a/packages/fluent/scss/progressbar/_layout.scss +++ b/packages/fluent/scss/progressbar/_layout.scss @@ -226,7 +226,7 @@ > .k-progressbar-value, > .k-progressbar-value > .k-progress-status-wrap { - transition: width .1s ease-in-out; + @include kendo-motion(short-2, ease-in-out, width); } } diff --git a/packages/fluent/scss/progressbar/_theme.scss b/packages/fluent/scss/progressbar/_theme.scss index 9af514ea0b0..b04e1ac1f51 100644 --- a/packages/fluent/scss/progressbar/_theme.scss +++ b/packages/fluent/scss/progressbar/_theme.scss @@ -95,6 +95,6 @@ .k-circular-progressbar-arc { stroke: var( --kendo-circular-progressbar-arc-stroke, #{$kendo-circular-progressbar-arc-stroke} ); - transition: stroke .5s ease; + @include kendo-motion(long-2, ease, stroke); } } diff --git a/packages/fluent/scss/radio/_layout.scss b/packages/fluent/scss/radio/_layout.scss index 9d63dac4d55..9e4bf9dff00 100644 --- a/packages/fluent/scss/radio/_layout.scss +++ b/packages/fluent/scss/radio/_layout.scss @@ -225,7 +225,7 @@ top: 50%; border-radius: 100%; z-index: -1; - transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1); + transition: k-motion(short-2, linear, opacity), transform var(--kendo-motion-short-3, 150ms) cubic-bezier(.4, 0, .2, 1); transform: translate(-50%, -50%) scale(0); transform-origin: center center; } diff --git a/packages/fluent/scss/rating/_layout.scss b/packages/fluent/scss/rating/_layout.scss index f744d9ec56b..a90a1f732d1 100644 --- a/packages/fluent/scss/rating/_layout.scss +++ b/packages/fluent/scss/rating/_layout.scss @@ -47,7 +47,7 @@ position: relative; overflow: hidden; outline: 0; - transition: color 200ms ease-out 0s; + @include kendo-motion(short-4, ease-out, color); * { pointer-events: none; diff --git a/packages/fluent/scss/ripple/_layout.scss b/packages/fluent/scss/ripple/_layout.scss index 932f3cf7bb3..36de7a9228c 100644 --- a/packages/fluent/scss/ripple/_layout.scss +++ b/packages/fluent/scss/ripple/_layout.scss @@ -23,7 +23,7 @@ border-radius: 50%; padding: 0; transform: translate(-50%, -50%) scale(0); - transition: opacity 100ms linear, transform 500ms cubic-bezier(.4, 0, .2, 1); + transition: k-motion(short-2, linear, opacity), transform var(--kendo-motion-long-2, 500ms) cubic-bezier(.4, 0, .2, 1); opacity: .1; background-color: currentColor; diff --git a/packages/fluent/scss/scroller/_layout.scss b/packages/fluent/scss/scroller/_layout.scss index 181310b2ac8..2424837b94f 100644 --- a/packages/fluent/scss/scroller/_layout.scss +++ b/packages/fluent/scss/scroller/_layout.scss @@ -1,4 +1,5 @@ @use "./_variables.scss" as *; +@use "../core" as *; @mixin kendo-scroller--layout() { @@ -44,7 +45,7 @@ width: 2rem; font-size: 2rem; transform: rotate(0deg); - transition: transform 300ms linear; + @include kendo-motion(medium-2, linear, transform); } .km-widget .km-scroller-release .km-icon { transform: rotate(180deg); @@ -63,7 +64,7 @@ width: .4em; opacity: 0; transform-origin: 0 0; - transition: opacity .3s linear; + @include kendo-motion(medium-2, linear, opacity); .k-map &, .k-diagram & { diff --git a/packages/fluent/scss/scrollview/_layout.scss b/packages/fluent/scss/scrollview/_layout.scss index b00f499af00..0ea1ad57a3f 100644 --- a/packages/fluent/scss/scrollview/_layout.scss +++ b/packages/fluent/scss/scrollview/_layout.scss @@ -43,8 +43,7 @@ .k-scrollview-wrap.k-scrollview-animate { width: calc( var(--kendo-scrollview-views, 1) * 100% ); - transition-duration: var( --kendo-scrollview-transition-duration, #{$kendo-scrollview-transition-duration} ); - transition-timing-function: var( --kendo-scrollview-transition-timing-function, #{$kendo-scrollview-transition-timing-function} ); + transition: var( --kendo-scrollview-transition, #{$kendo-scrollview-transition} ); transform: translateX( calc( -100% / var( --kendo-scrollview-views, 1) * ( var( --kendo-scrollview-current, 1) - 1) ) ); [dir="rtl"] &, @@ -158,8 +157,7 @@ .k-scrollview-animation { - transition-duration: .3s; - transition-timing-function: ease-in-out; + transition: var( --kendo-scrollview-transition, #{$kendo-scrollview-transition} ); } } diff --git a/packages/fluent/scss/scrollview/_variables.scss b/packages/fluent/scss/scrollview/_variables.scss index 07f227c64d9..1f354627949 100644 --- a/packages/fluent/scss/scrollview/_variables.scss +++ b/packages/fluent/scss/scrollview/_variables.scss @@ -88,9 +88,11 @@ $kendo-scrollview-pager-light-bg: rgba( $kendo-color-white, .4 ) !default; /// @group scrollview $kendo-scrollview-pager-dark-bg: rgba( $kendo-color-black, .4 ) !default; -/// The duration of the ScrollView transition. -/// @group scrollview +/// @deprecated Use `$kendo-scrollview-transition` instead. $kendo-scrollview-transition-duration: .3s !default; -/// The timing function of the ScrollView transition. -/// @group scrollview +/// @deprecated Use `$kendo-scrollview-transition` instead. $kendo-scrollview-transition-timing-function: ease-in-out !default; + +/// The transition of the ScrollView. +/// @group scrollview +$kendo-scrollview-transition: k-motion( medium-2, ease-in-out, all ) !default; diff --git a/packages/fluent/scss/slider/_variables.scss b/packages/fluent/scss/slider/_variables.scss index 4cc1b541b7c..08fd02a01b0 100644 --- a/packages/fluent/scss/slider/_variables.scss +++ b/packages/fluent/scss/slider/_variables.scss @@ -138,14 +138,14 @@ $kendo-slider-thumb-disabled-border: if($kendo-enable-color-system, rgba( k-colo /// The transition speed of the slider. /// @group slider -$kendo-slider-transition-speed: .3s !default; +$kendo-slider-transition-speed: var(--kendo-motion-medium-2, .3s) !default; /// The transition function function. /// @group slider -$kendo-slider-transition-function: ease-out !default; +$kendo-slider-transition-function: var(--kendo-motion-ease-out, ease-out) !default; /// The transition speed of the slider thumb. /// @group slider -$kendo-slider-thumb-transition-speed: .4s !default; +$kendo-slider-thumb-transition-speed: var(--kendo-motion-medium-4, .4s) !default; /// The transition function of the slider thumb. /// @group slider $kendo-slider-thumb-transition-function: cubic-bezier(.25, .8, .25, 1) !default; diff --git a/packages/fluent/scss/stepper/_layout.scss b/packages/fluent/scss/stepper/_layout.scss index 45dca52b360..1ada2ef0082 100644 --- a/packages/fluent/scss/stepper/_layout.scss +++ b/packages/fluent/scss/stepper/_layout.scss @@ -71,9 +71,7 @@ position: relative; z-index: 1; overflow: visible; - transition-property: color, background-color, border-color; - transition-duration: .4s; - transition-timing-function: ease-in-out; + @include kendo-motion(medium-4, ease-in-out, color, background-color, border-color); &::before { @include border-radius( var( --kendo-stepper-indicator-border-radius, #{$kendo-stepper-indicator-border-radius} ) ); @@ -110,7 +108,7 @@ .k-step.k-disabled { .k-step-indicator { border: 0; - + &::after { display: none; } @@ -251,7 +249,7 @@ .k-step-content { height: 0; overflow: hidden; - transition: $kendo-stepper-content-transition-property $kendo-stepper-content-transition-duration $kendo-stepper-content-transition-timing-function; + transition: $kendo-stepper-content-transition; } .k-step-current .k-step-content { diff --git a/packages/fluent/scss/stepper/_variables.scss b/packages/fluent/scss/stepper/_variables.scss index 5903c9da19b..80fe99f7bb3 100644 --- a/packages/fluent/scss/stepper/_variables.scss +++ b/packages/fluent/scss/stepper/_variables.scss @@ -190,12 +190,13 @@ $kendo-stepper-optional-label-font-style: italic !default; /// @group stepper $kendo-stepper-progressbar-size: map.get( $kendo-spacing, 0.5 ) !default; -/// The property name of the stepper transition. -/// @group stepper +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-property: none !default; -/// The duration of the stepper transition. -/// @group stepper +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-duration: 300ms !default; -/// The timing funtion of the stepper transition. -/// @group stepper +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default; + +/// The transition of the stepper content. +/// @group stepper +$kendo-stepper-content-transition: k-motion(medium-2, ease-in-out, none) !default; diff --git a/packages/fluent/scss/switch/_layout.scss b/packages/fluent/scss/switch/_layout.scss index d3aa54f5591..dcdf8ddfeb0 100644 --- a/packages/fluent/scss/switch/_layout.scss +++ b/packages/fluent/scss/switch/_layout.scss @@ -73,7 +73,7 @@ flex-flow: row nowrap; flex: 1 0 auto; position: relative; - transition: all 100ms ease-in-out; + @include kendo-motion(short-2, ease-in-out, all); } @@ -83,7 +83,7 @@ height: 0; overflow: visible; position: absolute; - transition: inset-inline-start 100ms ease-in-out; + @include kendo-motion(short-2, ease-in-out, inset-inline-start); top: 50%; } .k-switch-thumb { @@ -94,7 +94,7 @@ display: block; position: absolute; transform: translate( -50%, -50% ); - transition: all 100ms ease-in-out; + @include kendo-motion(short-2, ease-in-out, all); } diff --git a/packages/fluent/scss/tabstrip/_layout.scss b/packages/fluent/scss/tabstrip/_layout.scss index 8486452c9a8..841968eba4a 100644 --- a/packages/fluent/scss/tabstrip/_layout.scss +++ b/packages/fluent/scss/tabstrip/_layout.scss @@ -142,7 +142,7 @@ position: absolute; top: 0; left: 0; - transition: width .2s linear; + @include kendo-motion(short-4, linear, width); // TODO: a better name display: none; @@ -286,7 +286,7 @@ opacity: 0; transform: scaleY(0); pointer-events: none; - transition: opacity .3s, transform .3s; + @include kendo-motion(medium-2, ease, opacity, transform) } .k-item:active::after, .k-item.k-active::after, diff --git a/packages/fluent/scss/timeline/_layout.scss b/packages/fluent/scss/timeline/_layout.scss index 77d5d727a35..c925839280d 100644 --- a/packages/fluent/scss/timeline/_layout.scss +++ b/packages/fluent/scss/timeline/_layout.scss @@ -203,7 +203,7 @@ margin-block: calc( var( --kendo-timeline-icon-spacing, #{ $kendo-timeline-icon-spacing } ) * -1); margin-inline: 0; transform: rotate(90deg); - transition: transform .2s ease-in-out; + @include kendo-motion(short-4, ease-in-out, transform); } &.k-collapsed { @@ -355,7 +355,7 @@ z-index: 2; .k-timeline-scrollable-wrap { - transition: transform 1s ease-in-out; + @include kendo-motion(extra-long-4, ease-in-out, transform); } } diff --git a/packages/material/docs/customization-button.md b/packages/material/docs/customization-button.md index 209b00db20b..2fe68660541 100644 --- a/packages/material/docs/customization-button.md +++ b/packages/material/docs/customization-button.md @@ -632,8 +632,8 @@ The following table lists the available variables for customization. $kendo-button-transition List - box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) - box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) + k-motion(medium-2, ease-in-out, box-shadow) + (box-shadow var(--kendo-global-duration, var(--kendo-motion-medium-2, 0.3s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),)
Description
The box-shadow transition of the Button.
diff --git a/packages/material/docs/customization-common.md b/packages/material/docs/customization-common.md index 88822eee096..1fa9f5518b7 100644 --- a/packages/material/docs/customization-common.md +++ b/packages/material/docs/customization-common.md @@ -167,6 +167,16 @@ The following table lists the available variables for customization.
Description
Text color of disabled items.
+ + $kendo-transition + List + k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) + color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)) + + +
Description
Transition used across all components.
+ + $kendo-list-sizes Map @@ -226,6 +236,56 @@ The following table lists the available variables for customization.
Description
The map with the sizes of the List.
@group list
+ + $kendo-scrollview-transition-duration + Number + .3s + 0.3s + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-scrollview-transition-timing-function + String + ease-in-out + ease-in-out + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-stepper-content-transition-property + String + height + height + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-duration + Number + 300ms + 300ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-timing-function + List + cubic-bezier(.4, 0, .2, 1) 0ms + cubic-bezier(0.4, 0, 0.2, 1) 0ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + diff --git a/packages/material/docs/customization-floating-label.md b/packages/material/docs/customization-floating-label.md index 2408f697b8c..7e515c1d312 100644 --- a/packages/material/docs/customization-floating-label.md +++ b/packages/material/docs/customization-floating-label.md @@ -130,8 +130,8 @@ The following table lists the available variables for customization. $kendo-floating-label-transition List - .15s cubic-bezier( .4, 0, .2, 1 ) - 0.15s cubic-bezier(0.4, 0, 0.2, 1) + k-motion(short-3, ease-in-out, transform, color, top, inset-inline-start) + transform var(--kendo-global-duration, var(--kendo-motion-short-3, 0.15s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), color var(--kendo-global-duration, var(--kendo-motion-short-3, 0.15s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), top var(--kendo-global-duration, var(--kendo-motion-short-3, 0.15s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), inset-inline-start var(--kendo-global-duration, var(--kendo-motion-short-3, 0.15s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1))
Description
The transition of the Floating Label.
diff --git a/packages/material/docs/customization-scrollview.md b/packages/material/docs/customization-scrollview.md index 799931e7f64..803362729b9 100644 --- a/packages/material/docs/customization-scrollview.md +++ b/packages/material/docs/customization-scrollview.md @@ -288,23 +288,13 @@ The following table lists the available variables for customization. - $kendo-scrollview-transition-duration - Number - .3s - 0.3s - - -
Description
The duration of the ScrollView transition.
- - - - $kendo-scrollview-transition-timing-function - String - ease-in-out - ease-in-out + $kendo-scrollview-transition + List + k-motion( medium-2, ease-in-out, all ) + (all var(--kendo-global-duration, var(--kendo-motion-medium-2, 0.3s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),) -
Description
The timing function of the ScrollView transition.
+
Description
The transition of the ScrollView.
diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md index 8d541206314..907f1c30a18 100644 --- a/packages/material/docs/customization.md +++ b/packages/material/docs/customization.md @@ -171,6 +171,16 @@ The following table lists the available variables for customizing the Material t
Description
Text color of disabled items.
+ + $kendo-transition + List + k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) + color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), background-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), border-color var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), box-shadow var(--kendo-global-duration, var(--kendo-motion-short-4, 0.2s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)) + + +
Description
Transition used across all components.
+ + $kendo-list-sizes Map @@ -230,6 +240,56 @@ The following table lists the available variables for customizing the Material t
Description
The map with the sizes of the List.
@group list
+ + $kendo-scrollview-transition-duration + Number + .3s + 0.3s + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-scrollview-transition-timing-function + String + ease-in-out + ease-in-out + + +
Deprecated
Use `$kendo-scrollview-transition` instead.
+ + + + $kendo-stepper-content-transition-property + String + height + height + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-duration + Number + 300ms + 300ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + + + $kendo-stepper-content-transition-timing-function + List + cubic-bezier(.4, 0, .2, 1) 0ms + cubic-bezier(0.4, 0, 0.2, 1) 0ms + + +
Deprecated
Use `$kendo-stepper-content-transition` instead.
+ + @@ -2256,8 +2316,8 @@ The following table lists the available variables for customizing the Material t $kendo-button-transition List - box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) - box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) + k-motion(medium-2, ease-in-out, box-shadow) + (box-shadow var(--kendo-global-duration, var(--kendo-motion-medium-2, 0.3s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),)
Description
The box-shadow transition of the Button.
@@ -7522,8 +7582,8 @@ The following table lists the available variables for customizing the Material t $kendo-floating-label-transition List - .15s cubic-bezier( .4, 0, .2, 1 ) - 0.15s cubic-bezier(0.4, 0, 0.2, 1) + k-motion(short-3, ease-in-out, transform, color, top, inset-inline-start) + transform var(--kendo-global-duration, var(--kendo-motion-short-3, 0.15s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), color var(--kendo-global-duration, var(--kendo-motion-short-3, 0.15s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), top var(--kendo-global-duration, var(--kendo-motion-short-3, 0.15s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)), inset-inline-start var(--kendo-global-duration, var(--kendo-motion-short-3, 0.15s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1))
Description
The transition of the Floating Label.
@@ -14193,23 +14253,13 @@ The following table lists the available variables for customizing the Material t - $kendo-scrollview-transition-duration - Number - .3s - 0.3s - - -
Description
The duration of the ScrollView transition.
- - - - $kendo-scrollview-transition-timing-function - String - ease-in-out - ease-in-out + $kendo-scrollview-transition + List + k-motion( medium-2, ease-in-out, all ) + (all var(--kendo-global-duration, var(--kendo-motion-medium-2, 0.3s)) var(--kendo-motion-ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)),) -
Description
The timing function of the ScrollView transition.
+
Description
The transition of the ScrollView.
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss index 2a46c65a15b..29237155a9e 100644 --- a/packages/material/scss/_variables.scss +++ b/packages/material/scss/_variables.scss @@ -202,8 +202,6 @@ $kendo-font-weight-bold: 700 !default; // Letter Spacing $kendo-letter-spacing: null !default; -$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default; - // Disabled mixin variables $kendo-disabled-filter: grayscale(.1) !default; $kendo-disabled-opacity: .6 !default; diff --git a/packages/material/scss/button/_layout.scss b/packages/material/scss/button/_layout.scss index 101f869e74d..cbe9c4ce33c 100644 --- a/packages/material/scss/button/_layout.scss +++ b/packages/material/scss/button/_layout.scss @@ -12,7 +12,7 @@ &::before { display: block; - transition: opacity .4s cubic-bezier( .25, .8, .25, 1 ); + transition: opacity var(--kendo-motion-medium-4, .4s) cubic-bezier( .25, .8, .25, 1 ); } &::after { display: none !important; // stylelint-disable-line declaration-no-important diff --git a/packages/material/scss/button/_variables.scss b/packages/material/scss/button/_variables.scss index 24d04944dc7..b99ba8e955a 100644 --- a/packages/material/scss/button/_variables.scss +++ b/packages/material/scss/button/_variables.scss @@ -254,4 +254,4 @@ $kendo-flat-button-focus-ring-opacity: null !default; /// The box-shadow transition of the Button. /// @group button -$kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default; +$kendo-button-transition: k-motion(medium-2, ease-in-out, box-shadow) !default; diff --git a/packages/material/scss/core/_index.scss b/packages/material/scss/core/_index.scss index 8697314b3fa..92dccb5200e 100644 --- a/packages/material/scss/core/_index.scss +++ b/packages/material/scss/core/_index.scss @@ -13,6 +13,7 @@ $wcag-min-contrast-ratio: 4.5 !default; // Backward compatibility @import "./color-system/_swatch-legacy.scss"; +@import "./motion/_motion-legacy.scss"; // Expose @include exports("kendo-core-styles") { @@ -20,4 +21,6 @@ $wcag-min-contrast-ratio: 4.5 !default; // Elevation System @include kendo-elevation--styles(); + // Motion System + @include kendo-motion--styles(); } diff --git a/packages/material/scss/core/motion/_motion-legacy.scss b/packages/material/scss/core/motion/_motion-legacy.scss new file mode 100644 index 00000000000..42d5f7fe31b --- /dev/null +++ b/packages/material/scss/core/motion/_motion-legacy.scss @@ -0,0 +1,2 @@ +/// Transition used across all components. +$kendo-transition: k-motion(short-4, ease-in-out, color, background-color, border-color, box-shadow) !default; diff --git a/packages/material/scss/core/motion/index.import.scss b/packages/material/scss/core/motion/index.import.scss new file mode 100644 index 00000000000..2a94b293a71 --- /dev/null +++ b/packages/material/scss/core/motion/index.import.scss @@ -0,0 +1 @@ +@import "@progress/kendo-theme-core/scss/motion/index.import.scss"; diff --git a/packages/material/scss/dataviz/_variables.scss b/packages/material/scss/dataviz/_variables.scss index a35039a7997..9a99a23d04f 100644 --- a/packages/material/scss/dataviz/_variables.scss +++ b/packages/material/scss/dataviz/_variables.scss @@ -111,7 +111,7 @@ $kendo-chart-area-opacity: .6 !default; $kendo-chart-area-inactive-opacity: .1 !default; $kendo-chart-line-inactive-opacity: .3 !default; -$kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default; +$kendo-chart-tooltip-transition: k-motion(medium-2, linear, left, top) !default; $kendo-chart-bg: $kendo-component-bg !default; $kendo-chart-text: $kendo-component-text !default; diff --git a/packages/material/scss/floating-label/_variables.scss b/packages/material/scss/floating-label/_variables.scss index 16a5db2585e..7c9265dce59 100644 --- a/packages/material/scss/floating-label/_variables.scss +++ b/packages/material/scss/floating-label/_variables.scss @@ -34,7 +34,7 @@ $kendo-floating-label-focus-offset-y: 0px !default; /// The transition of the Floating Label. /// @group floating-label -$kendo-floating-label-transition: .15s cubic-bezier( .4, 0, .2, 1 ) !default; +$kendo-floating-label-transition: k-motion(short-3, ease-in-out, transform, color, top, inset-inline-start) !default; /// The background color of the Floating Label. /// @group floating-label diff --git a/packages/material/scss/input/_layout.scss b/packages/material/scss/input/_layout.scss index 0a8d33ebd07..750cd225c9f 100644 --- a/packages/material/scss/input/_layout.scss +++ b/packages/material/scss/input/_layout.scss @@ -80,7 +80,7 @@ inset: -1px; opacity: 0; transform: scaleX(0); - transition: opacity .3s, transform .3s; + @include kendo-motion(medium-2, ease, opacity, transform); pointer-events: none; } diff --git a/packages/material/scss/radio/_layout.scss b/packages/material/scss/radio/_layout.scss index a2f9b387009..e0e80a00470 100644 --- a/packages/material/scss/radio/_layout.scss +++ b/packages/material/scss/radio/_layout.scss @@ -6,7 +6,7 @@ @include kendo-radio--layout-base(); .k-radio::before { - transition: transform linear 280ms; + @include kendo-motion(medium-2, linear, transform); transform-origin: 0 0; } diff --git a/packages/material/scss/scrollview/_variables.scss b/packages/material/scss/scrollview/_variables.scss index cc126aaca9f..92933b33b54 100644 --- a/packages/material/scss/scrollview/_variables.scss +++ b/packages/material/scss/scrollview/_variables.scss @@ -84,9 +84,12 @@ $kendo-scrollview-light-bg: rgba( white, .4 ) !default; /// @group scrollview $kendo-scrollview-dark-bg: rgba( black, .4 ) !default; -/// The duration of the ScrollView transition. -/// @group scrollview +/// @deprecated Use `$kendo-scrollview-transition` instead. $kendo-scrollview-transition-duration: .3s !default; -/// The timing function of the ScrollView transition. -/// @group scrollview +/// @deprecated Use `$kendo-scrollview-transition` instead. $kendo-scrollview-transition-timing-function: ease-in-out !default; + +/// The transition of the ScrollView. +/// @group scrollview +$kendo-scrollview-transition: k-motion( medium-2, ease-in-out, all ) !default; + diff --git a/packages/material/scss/slider/_variables.scss b/packages/material/scss/slider/_variables.scss index 2da44dec54b..c772578b87b 100644 --- a/packages/material/scss/slider/_variables.scss +++ b/packages/material/scss/slider/_variables.scss @@ -39,9 +39,9 @@ $kendo-slider-draghandle-pressed-gradient: null !default; $kendo-slider-draghandle-focus-shadow: 0 0 0 11px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default; -$kendo-slider-transition-speed: .3s !default; -$kendo-slider-transition-function: ease-out !default; -$kendo-slider-draghandle-transition-speed: .4s !default; +$kendo-slider-transition-speed: var(--kendo-motion-medium-2, .3s) !default; +$kendo-slider-transition-function: var(--kendo-motion-ease-out, ease-out)!default; +$kendo-slider-draghandle-transition-speed: var(--kendo-motion-medium-4, .4s) !default; $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default; $kendo-slider-track-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 )) !default; diff --git a/packages/material/scss/stepper/_variables.scss b/packages/material/scss/stepper/_variables.scss index 8950dbb26d4..b50a16090e5 100644 --- a/packages/material/scss/stepper/_variables.scss +++ b/packages/material/scss/stepper/_variables.scss @@ -82,6 +82,11 @@ $kendo-stepper-progressbar-text: null !default; $kendo-stepper-progressbar-fill-bg: null !default; $kendo-stepper-progressbar-fill-text: null !default; +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-property: height !default; +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-duration: 300ms !default; +/// @deprecated Use `$kendo-stepper-content-transition` instead. $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default; + +$kendo-stepper-content-transition: k-motion(medium-2, ease-in-out, height) !default; diff --git a/packages/utils/scss/index.import.scss b/packages/utils/scss/index.import.scss index 9e7a9f4caec..6df9daf0792 100644 --- a/packages/utils/scss/index.import.scss +++ b/packages/utils/scss/index.import.scss @@ -19,6 +19,7 @@ @import "./svg/index.import.scss"; @import "./elevation/index.import.scss"; +@import "./motion/index.import.scss"; // Mixin for all styles @@ -39,4 +40,5 @@ @include kendo-utils--svg(); @include kendo-utils--elevation(); + @include kendo-utils--motion(); } diff --git a/packages/utils/scss/motion/index.import.scss b/packages/utils/scss/motion/index.import.scss new file mode 100644 index 00000000000..597b12f78d9 --- /dev/null +++ b/packages/utils/scss/motion/index.import.scss @@ -0,0 +1,15 @@ +@import "@progress/kendo-theme-core/scss/motion/index.import.scss"; + +@mixin kendo-utils--motion { + @each $duration, $duration-value in $kendo-motion-durations { + .k-motion-#{$duration} { + transition-duration: $duration-value; + } + } + + @each $easing, $easing-value in $kendo-motion-easings { + .k-motion-#{$easing} { + transition-timing-function: $easing-value; + } + } +}