Skip to content

NXT-20999: Added applyMotions mixin #461

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.

Sign up for GitHub

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

Merged
alexandrumorariu merged 6 commits into from
Oct 30, 2026
Merged

NXT-20999: Added applyMotions mixin #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bf10ef2
Added `applyMotions` mixin
ion-andrusciac-lgp Oct 27, 2026
29f4d52
Review fixes
ion-andrusciac-lgp Oct 29, 2026
8eb9b38
Fixed `Slider` animation
ion-andrusciac-lgp Oct 29, 2026
cec09b9
Fixed `Slider` animation
ion-andrusciac-lgp Oct 29, 2026
070cc24
Small fix
ion-andrusciac-lgp Oct 30, 2026
9e762bb
fixed less comments
daniel-stoian-lgp Oct 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 8 additions & 11 deletions Button/Button.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,11 +343,9 @@
border-style: @lime-button-bg-border-style;
border-color: @lime-button-outline-border-color;
border-radius: @lime-button-border-radius;
.applyMotions(.lime-focus-out-small-high-motion(1), .lime-focus-out-small-low-motion(1));
}

&:where(:global(.animationTier-high) *) .bg { .lime-focus-out-small-high-motion(1); }
&:where(:global(.animationTier-low) *) .bg { .lime-focus-out-small-low-motion(1); }

&.bordered {
.bg {
background-color: @lime-button-outline-container-color;
Expand Down Expand Up @@ -505,9 +503,8 @@
}
}

&.focusExpand {
&:where(:global(.animationTier-high) *) .bg { .lime-focus-in-small-high-motion(1.1); }
&:where(:global(.animationTier-low) *) .bg { .lime-focus-in-small-low-motion(1.1); }
&.focusExpand .bg {
.applyMotions(.lime-focus-in-small-high-motion(1.1), .lime-focus-in-small-low-motion(1.1));
}
});

Expand All @@ -519,13 +516,13 @@
&.focusExpand {
&.pressed,
&:active {
&:where(:global(.animationTier-high) *) .bg { .lime-press-small-high-motion(1.05); }
&:where(:global(.animationTier-low) *) .bg { .lime-press-small-low-motion(1.05); }
.bg {
.applyMotions(.lime-press-small-high-motion(1.05), .lime-press-small-low-motion(1.05));
}
}

&:not(.pressed) {
&:where(:global(.animationTier-high) *) .bg { .lime-release-small-high-motion(1.1); }
&:where(:global(.animationTier-low) *) .bg { .lime-release-small-low-motion(1.1); }
&:not(.pressed) .bg {
.applyMotions(.lime-release-small-high-motion(1.1), .lime-release-small-low-motion(1.1));
}
}
});
Expand Down
33 changes: 11 additions & 22 deletions Card/Card.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,7 @@

.image {
position: relative;
&:where(:global(.animationTier-high) *) { .lime-focus-out-large-high-motion(1); }
&:where(:global(.animationTier-low) *) { .lime-focus-out-large-low-motion(1); }
.applyMotions(.lime-focus-out-large-high-motion(1), .lime-focus-out-large-low-motion(1));
}

.selectionContainer {
Expand Down Expand Up @@ -201,8 +200,7 @@
&.vertical {
width: var(--card-image-width);
height: auto;
&:where(:global(.animationTier-high) *) { .lime-focus-out-large-high-motion(1); }
&:where(:global(.animationTier-low) *) { .lime-focus-out-large-low-motion(1); }
.applyMotions(.lime-focus-out-large-high-motion(1), .lime-focus-out-large-low-motion(1));

.captionImageIconsContainer {
margin-top: @lime-card-caption-image-icon-margin;
Expand Down Expand Up @@ -323,8 +321,7 @@
&.horizontal {
width: @lime-card-horizontal-width;
height: @lime-card-horizontal-height;
&:where(:global(.animationTier-high) *) { .lime-focus-out-large-high-motion(1); }
&:where(:global(.animationTier-low) *) { .lime-focus-out-large-low-motion(1); }
.applyMotions(.lime-focus-out-large-high-motion(1), .lime-focus-out-large-low-motion(1));

.captions {
padding: @lime-card-horizontal-captions-padding;
Expand Down Expand Up @@ -365,8 +362,7 @@

.focus({
&.hasContainer {
&:where(:global(.animationTier-high) *) { .lime-focus-in-large-high-motion(1.1); }
&:where(:global(.animationTier-low) *) { .lime-focus-in-large-low-motion(1.1); }
.applyMotions(.lime-focus-in-large-high-motion(1.1), .lime-focus-in-large-low-motion(1.1));

&.roundedImage::before {
border-radius: @lime-card-border-radius;
Expand Down Expand Up @@ -395,12 +391,10 @@
&.hasContainer {
&.pressed,
&:active {
&:where(:global(.animationTier-high) *) { .lime-press-large-high-motion(1.05); }
&:where(:global(.animationTier-low) *) { .lime-press-large-low-motion(1.05); }
.applyMotions(.lime-press-large-high-motion(1.05), .lime-press-large-low-motion(1.05));
}
&:not(.pressed) {
&:where(:global(.animationTier-high) *) { .lime-release-large-high-motion(1.1); }
&:where(:global(.animationTier-low) *) { .lime-release-large-low-motion(1.1); }
.applyMotions(.lime-release-large-high-motion(1.1), .lime-release-large-low-motion(1.1));
}
}
});
Expand All @@ -411,8 +405,7 @@
&.vertical {
&:not(.captionOverlay):not(.hasContainer) .image,
&.captionOverlay {
&:where(:global(.animationTier-high) *) { .lime-focus-in-large-high-motion(1.1); }
&:where(:global(.animationTier-low) *) { .lime-focus-in-large-low-motion(1.1); }
.applyMotions(.lime-focus-in-large-high-motion(1.1), .lime-focus-in-large-low-motion(1.1));
}
}
});
Expand All @@ -423,22 +416,18 @@
&.captionOverlay {
&.pressed,
&:active {
&:where(:global(.animationTier-high) *) { .lime-press-large-high-motion(1.05); }
&:where(:global(.animationTier-low) *) { .lime-press-large-low-motion(1.05); }
.applyMotions(.lime-press-large-high-motion(1.05), .lime-press-large-low-motion(1.05));
}
&:not(.pressed) {
&:where(:global(.animationTier-high) *) { .lime-release-large-high-motion(1.1); }
&:where(:global(.animationTier-low) *) { .lime-release-large-low-motion(1.1); }
.applyMotions(.lime-release-large-high-motion(1.1), .lime-release-large-low-motion(1.1));
}
}

&:not(.captionOverlay):not(.hasContainer).pressed .image {
&:where(:global(.animationTier-high) *) { .lime-press-large-high-motion(1.05); }
&:where(:global(.animationTier-low) *) { .lime-press-large-low-motion(1.05); }
.applyMotions(.lime-press-large-high-motion(1.05), .lime-press-large-low-motion(1.05));
}
&:not(.captionOverlay):not(.hasContainer):not(.pressed) .image {
&:where(:global(.animationTier-high) *) { .lime-release-large-high-motion(1.1); }
&:where(:global(.animationTier-low) *) { .lime-release-large-low-motion(1.1); }
.applyMotions(.lime-release-large-high-motion(1.1), .lime-release-large-low-motion(1.1));
}
}
});
Expand Down
12 changes: 4 additions & 8 deletions IconItem/IconItem.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,10 @@

.iconItem {
position: relative;
&:where(:global(.animationTier-high) *) { .lime-focus-out-medium-high-motion(1); }
&:where(:global(.animationTier-low) *) { .lime-focus-out-medium-low-motion(1); }
will-change: transform;
height: @lime-iconitem-height;
width: @lime-iconitem-width;
.applyMotions(.lime-focus-out-medium-high-motion(1), .lime-focus-out-medium-low-motion(1));

.content {
box-sizing: border-box;
Expand Down Expand Up @@ -88,8 +87,7 @@
}

.focus({
&:where(:global(.animationTier-high) *) { .lime-focus-in-medium-high-motion(1.2); }
&:where(:global(.animationTier-low) *) { .lime-focus-in-medium-low-motion(1.2); }
.applyMotions(.lime-focus-in-medium-high-motion(1.2), .lime-focus-in-medium-low-motion(1.2));

&.labelOnFocus {
.label, .labelContainer {
Expand All @@ -106,12 +104,10 @@
.focus({
&.pressed,
&:active {
&:where(:global(.animationTier-high) *) { .lime-press-medium-high-motion(1.1); }
&:where(:global(.animationTier-low) *) { .lime-press-medium-low-motion(1.1); }
.applyMotions(.lime-press-medium-high-motion(1.1), .lime-press-medium-low-motion(1.1));
}
&:not(.pressed) {
&:where(:global(.animationTier-high) *) { .lime-release-medium-high-motion(1.2); }
&:where(:global(.animationTier-low) *) { .lime-release-medium-low-motion(1.2); }
.applyMotions(.lime-release-medium-high-motion(1.2), .lime-release-medium-low-motion(1.2));
}
});
}
Expand Down
19 changes: 10 additions & 9 deletions MediaOverlay/MediaOverlay.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,27 @@

.mediaContainer {
position: relative;
.applyMotions(.lime-focus-out-medium-high-motion(1), .lime-focus-out-medium-low-motion(1));
}

&:where(:global(.animationTier-high) *) .mediaContainer { .lime-focus-out-medium-high-motion(1); }
&:where(:global(.animationTier-low) *) .mediaContainer { .lime-focus-out-medium-low-motion(1); }

.focus({
&:where(:global(.animationTier-high) *) .mediaContainer { .lime-focus-in-medium-high-motion(1.1); }
&:where(:global(.animationTier-low) *) .mediaContainer { .lime-focus-in-medium-low-motion(1.1); }
.mediaContainer {
.applyMotions(.lime-focus-in-medium-high-motion(1.1), .lime-focus-in-medium-low-motion(1.1));
}
});

&:not([disabled]) {
.focus({
&.pressed,
&:active {
&:where(:global(.animationTier-high) *) .mediaContainer { .lime-press-medium-high-motion(1.05); }
&:where(:global(.animationTier-low) *) .mediaContainer { .lime-press-medium-low-motion(1.05); }
.mediaContainer {
.applyMotions(.lime-press-medium-high-motion(1.05), .lime-press-medium-low-motion(1.05));
}
}
&:not(.pressed) {
&:where(:global(.animationTier-high) *) .mediaContainer { .lime-release-medium-high-motion(1.1); }
&:where(:global(.animationTier-low) *) .mediaContainer { .lime-release-medium-low-motion(1.1); }
.mediaContainer {
.applyMotions(.lime-release-medium-high-motion(1.1), .lime-release-medium-low-motion(1.1));
}
}
});
}
Expand Down
35 changes: 21 additions & 14 deletions Popup/Popup.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,32 +151,39 @@
}

&.shown {
&:is(:global(.animationTier-high) *) .inner { .lime-enter-small-high-motion(); }
&:is(:global(.animationTier-low) *) .inner { .lime-enter-small-low-motion(); }
.inner {
.applyMotions(.lime-enter-small-high-motion(), .lime-enter-small-low-motion(), is);
}

&.center:is(:global(.animationTier-high) *) .inner { .lime-enter-medium-high-motion(); }
&.center:is(:global(.animationTier-low) *) .inner { .lime-enter-medium-low-motion(); }
&.center .inner {
.applyMotions(.lime-enter-medium-high-motion(), .lime-enter-medium-low-motion(), is);
}

// Alert Fullscreen
&.fullscreen .inner { .lime-enter-none-motion(); }
}

&.hidden {
&.bottom:is(:global(.animationTier-high) *) .inner { .lime-exit-small-high-motion(0, 336px); }
&.bottom:is(:global(.animationTier-low) *) .inner { .lime-exit-small-low-motion(0, 336px); }
&.bottom .inner {
.applyMotions(.lime-exit-small-high-motion(0, 336px), .lime-exit-small-low-motion(0, 336px), is);
}

&.top:is(:global(.animationTier-high) *) .inner { .lime-exit-small-high-motion(0, -336px); }
&.top:is(:global(.animationTier-low) *) .inner { .lime-exit-small-low-motion(0, -336px); }
&.top .inner {
.applyMotions(.lime-exit-small-high-motion(0, -336px), .lime-exit-small-low-motion(0, -336px), is);
}

&.left:is(:global(.animationTier-high) *) .inner { .lime-exit-small-high-motion(-336px, 0); }
&.left:is(:global(.animationTier-low) *) .inner { .lime-exit-small-low-motion(-336px, 0); }
&.left .inner {
.applyMotions(.lime-exit-small-high-motion(-336px, 0), .lime-exit-small-low-motion(-336px, 0), is);
}

&.right:is(:global(.animationTier-high) *) .inner { .lime-exit-small-high-motion(336px, 0); }
&.right:is(:global(.animationTier-low) *) .inner { .lime-exit-small-low-motion(336px, 0); }
&.right .inner {
.applyMotions(.lime-exit-small-high-motion(336px, 0), .lime-exit-small-low-motion(336px, 0), is);
}

// Alert Overlay
&.center:is(:global(.animationTier-high) *) .inner { .lime-exit-medium-high-motion(0, 32px); }
&.center:is(:global(.animationTier-low) *) .inner { .lime-exit-medium-low-motion(0, 32px); }
&.center .inner {
.applyMotions(.lime-exit-medium-high-motion(0, 32px), .lime-exit-medium-low-motion(0, 32px), is);
}
}

:global(.noAnimation) & {
Expand Down
44 changes: 30 additions & 14 deletions Slider/Slider.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,10 @@
}
}

&:where(:global(.animationTier-high) *) .knob::before { .lime-slider-focus-out-high-motion(); }
&:where(:global(.animationTier-low) *) .knob::before { .lime-slider-focus-out-low-motion(); }
.applyMotions(
{ .knob::before { .lime-slider-focus-out-high-motion(); }},
{ .knob::before { .lime-slider-focus-out-low-motion(); }}
);

&.showAnchor {
.knob {
Expand Down Expand Up @@ -412,8 +414,10 @@

:global(.spotlight-input-mouse) & {
&:hover:not([disabled]):not(.colorPicker):not(:has(.tick:hover), .pressed) {
&:where(:global(.animationTier-high) *) .knob::before { .lime-slider-focus-in-high-motion(); }
&:where(:global(.animationTier-low) *) .knob::before { .lime-slider-focus-in-low-motion(); }
.applyMotions(
{ .knob::before { .lime-slider-focus-in-high-motion(); }},
{ .knob::before { .lime-slider-focus-in-low-motion(); }}
);
}

&:not([disabled]):not(.colorPicker, .pressed) {
Expand All @@ -440,23 +444,32 @@
border-color: @lime-slider-handle-focused-border-color;
box-shadow: @lime-slider-handle-focused-shadow;
}
&:where(:global(.animationTier-high) *) .knob::before { .lime-slider-focus-in-high-motion(); }
&:where(:global(.animationTier-low) *) .knob::before { .lime-slider-focus-in-low-motion(); }

.applyMotions(
{ .knob::before { .lime-slider-focus-in-high-motion(); }},
{ .knob::before { .lime-slider-focus-in-low-motion(); }}
);

&:active,
&.pressed {
&:where(:global(.animationTier-high) *) .knob::before { .lime-slider-press-high-motion(); }
&:where(:global(.animationTier-low) *) .knob::before { .lime-slider-press-low-motion(); }
.applyMotions(
{ .knob::before { .lime-slider-press-high-motion(); }},
{ .knob::before { .lime-slider-press-low-motion(); }}
);
}

&:not(.pressed) {
&:where(:global(.animationTier-high) *) .knob::before { .lime-slider-release-high-motion(); }
&:where(:global(.animationTier-low) *) .knob::before { .lime-slider-release-low-motion(); }
.applyMotions(
{ .knob::before { .lime-slider-release-high-motion(); }},
{ .knob::before { .lime-slider-release-low-motion(); }}
);
}

.disabled({
&:where(:global(.animationTier-high) *) .knob::before { .lime-slider-focus-out-high-motion(); }
&:where(:global(.animationTier-low) *) .knob::before { .lime-slider-focus-out-low-motion(); }
.applyMotions(
{ .knob::before { .lime-slider-focus-out-high-motion(); }},
{ .knob::before { .lime-slider-focus-out-low-motion(); }}
);
});
}

Expand All @@ -478,8 +491,11 @@
border-color: @lime-slider-handle-focused-border-color;
box-shadow: @lime-slider-handle-focused-shadow;
}
&:where(:global(.animationTier-high) *) .knob::before { .lime-slider-focus-in-high-motion(); }
&:where(:global(.animationTier-low) *) .knob::before { .lime-slider-focus-in-low-motion(); }

.applyMotions(
{ .knob::before { .lime-slider-focus-in-high-motion(); }},
{ .knob::before { .lime-slider-focus-in-low-motion(); }}
);
}

:global(.noAnimation) & {
Expand Down
Loading
Loading