Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(chore): implement motion system #4779

Draft
wants to merge 8 commits into
base: develop
Choose a base branch
from
Draft

(chore): implement motion system #4779

wants to merge 8 commits into from

Conversation

epetrow
Copy link
Contributor

@epetrow epetrow commented Nov 7, 2023

Closes: https://github.com/telerik/kendo-themes-private/issues/103

Below is a short breakdown of the motion system implementation and how it works:

1. Motion Durations and Easings:

  • $_default-motion-durations: Defines a map of motion duration tokens with, each associated with a specific duration in seconds.

  • $_default-motion-easings: Defines a map of motion easing tokens (timing functions), each associated with a cubic-bezier function.

  • $kendo-motion-durations and $kendo-motion-easings: These variables store the default motion durations and easings, but can be customized by the user.

2. k-motion:

  • Accepts a duration, timing function, and a list of properties.

  • Generates a CSS transition property for each property with the specified duration and timing function.

  • Checks if transitions are enabled ( $kendo-enable-transitions), if not sets transition-duration to 0s.

3. kendo-motion:

  • Uses the k-motion function to generate the transition property for a set of CSS properties.

4. Usage:

  • Motion durations and easings can be customized by overriding or defining values for $kendo-motion-durations and $kendo-motion-easings variables.

  • Applying transitions to specific properties. For example:

.element {
  @include kendo-motion('short-1', 'ease-in-out', opacity, transform);
}

@epetrow epetrow force-pushed the motion-system branch 8 times, most recently from 1e6bb87 to e80a7a1 Compare November 10, 2023 14:58
@epetrow epetrow self-assigned this Nov 13, 2023
@epetrow epetrow force-pushed the motion-system branch 7 times, most recently from 7d8f658 to 459f8bf Compare November 17, 2023 13:31
@epetrow epetrow force-pushed the motion-system branch 3 times, most recently from c05ca7c to a69702c Compare November 28, 2023 08:39
@epetrow epetrow added Enhancement New feature of an existing functionality or an improvement of an existing functionality. and removed Enhancement New feature of an existing functionality or an improvement of an existing functionality. labels Dec 4, 2023
@epetrow epetrow changed the title WIP(chore): implement motion system (chore): implement motion system Dec 4, 2023
@epetrow epetrow marked this pull request as ready for review December 4, 2023 16:56
@epetrow epetrow requested a review from a team as a code owner December 4, 2023 16:56
@inikolova
Copy link
Contributor

Please rename all commits implement motion system and i_ntegrate motion system_ per theme to feat, not chore.(Also remove the WIP).

@epetrow epetrow requested a review from Juveniel January 12, 2024 16:45
@epetrow epetrow requested a review from inikolova January 16, 2024 15:11
@epetrow epetrow marked this pull request as draft January 23, 2024 12:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants