From bf10ef28fb6a7f9d8ed7b3810a275cda4fbf5c1f Mon Sep 17 00:00:00 2001 From: ion-andrusciac-lgp Date: Tue, 27 Oct 2026 12:04:31 +0200 Subject: [PATCH 1/6] Added `applyMotions` mixin --- Button/Button.module.less | 48 +++++++++++--- Card/Card.module.less | 66 ++++++++++++------- IconItem/IconItem.module.less | 24 ++++--- MediaOverlay/MediaOverlay.module.less | 48 +++++++++++--- Popup/Popup.module.less | 94 ++++++++++++++++++++++----- Slider/Slider.module.less | 85 ++++++++++++++++++++---- styles/motion-mixins.less | 62 ++++++++++++++++++ 7 files changed, 352 insertions(+), 75 deletions(-) diff --git a/Button/Button.module.less b/Button/Button.module.less index e0afb2547..bd3d13c8f 100644 --- a/Button/Button.module.less +++ b/Button/Button.module.less @@ -345,8 +345,16 @@ border-radius: @lime-button-border-radius; } - &:where(:global(.animationTier-high) *) .bg { .lime-focus-out-small-high-motion(1); } - &:where(:global(.animationTier-low) *) .bg { .lime-focus-out-small-low-motion(1); } + .applyMotions({ + .bg { + .lime-focus-out-small-high-motion(1); + } + }, high); + .applyMotions({ + .bg { + .lime-focus-out-small-low-motion(1) ; + } + }, low); &.bordered { .bg { @@ -506,8 +514,16 @@ } &.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); } + .applyMotions({ + .bg { + .lime-focus-in-small-high-motion(1.1); + } + }, high); + .applyMotions({ + .bg { + .lime-focus-in-small-low-motion(1.1); + } + }, low); } }); @@ -519,13 +535,29 @@ &.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); } + .applyMotions({ + .bg { + .lime-press-small-high-motion(1.05); + } + }, high); + .applyMotions({ + .bg { + .lime-press-small-low-motion(1.05); + } + }, low); } &: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); } + .applyMotions({ + .bg { + .lime-release-small-high-motion(1.1); + } + }, high); + .applyMotions({ + .bg { + .lime-release-small-low-motion(1.1); + } + }, low); } } }); diff --git a/Card/Card.module.less b/Card/Card.module.less index c95d15bec..dbc83dcf1 100644 --- a/Card/Card.module.less +++ b/Card/Card.module.less @@ -38,8 +38,10 @@ .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 { @@ -201,8 +203,10 @@ &.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; @@ -323,8 +327,10 @@ &.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; @@ -365,8 +371,10 @@ .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; @@ -395,12 +403,16 @@ &.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) + ); } } }); @@ -411,8 +423,10 @@ &.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) + ); } } }); @@ -423,22 +437,30 @@ &.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) + ); } } }); diff --git a/IconItem/IconItem.module.less b/IconItem/IconItem.module.less index 3de4fd9d2..97ce643a9 100644 --- a/IconItem/IconItem.module.less +++ b/IconItem/IconItem.module.less @@ -7,11 +7,13 @@ .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; @@ -88,8 +90,10 @@ } .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 { @@ -106,12 +110,16 @@ .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) + ); } }); } diff --git a/MediaOverlay/MediaOverlay.module.less b/MediaOverlay/MediaOverlay.module.less index 201a0b2a4..638b8a7d9 100644 --- a/MediaOverlay/MediaOverlay.module.less +++ b/MediaOverlay/MediaOverlay.module.less @@ -23,24 +23,56 @@ position: relative; } - &:where(:global(.animationTier-high) *) .mediaContainer { .lime-focus-out-medium-high-motion(1); } - &:where(:global(.animationTier-low) *) .mediaContainer { .lime-focus-out-medium-low-motion(1); } + .applyMotions({ + .mediaContainer { + .lime-focus-out-medium-high-motion(1); + } + }, high); + .applyMotions({ + .mediaContainer { + .lime-focus-out-medium-low-motion(1); + } + }, low); .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); } + .applyMotions({ + .mediaContainer { + .lime-focus-in-medium-high-motion(1.1); + } + }, high); + .applyMotions({ + .mediaContainer { + .lime-focus-in-medium-low-motion(1.1); + } + }, low); }); &: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); } + .applyMotions({ + .mediaContainer { + .lime-press-medium-high-motion(1.05); + } + }, high); + .applyMotions({ + .mediaContainer { + .lime-press-medium-low-motion(1.05); + } + }, low); } &: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); } + .applyMotions({ + .mediaContainer { + .lime-release-medium-high-motion(1.1); + } + }, high); + .applyMotions({ + .mediaContainer { + .lime-release-medium-low-motion(1.1); + } + }, low); } }); } diff --git a/Popup/Popup.module.less b/Popup/Popup.module.less index cbe2cf0b6..b1fc60ecb 100644 --- a/Popup/Popup.module.less +++ b/Popup/Popup.module.less @@ -151,32 +151,96 @@ } &.shown { - &:is(:global(.animationTier-high) *) .inner { .lime-enter-small-high-motion(); } - &:is(:global(.animationTier-low) *) .inner { .lime-enter-small-low-motion(); } - - &.center:is(:global(.animationTier-high) *) .inner { .lime-enter-medium-high-motion(); } - &.center:is(:global(.animationTier-low) *) .inner { .lime-enter-medium-low-motion(); } + .applyMotions({ + .inner { + .lime-enter-small-high-motion(); + } + }, high, is); + .applyMotions({ + .inner { + .lime-enter-small-low-motion(); + } + }, low, is); + + &.center { + .applyMotions({ + .inner { .lime-enter-medium-high-motion(); } + }, high, is); + .applyMotions({ + .inner { .lime-enter-medium-low-motion(); } + }, low, 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 { + .applyMotions({ + .inner { + .lime-exit-small-high-motion(0, 336px); + } + }, high, is); + .applyMotions({ + .inner { + .lime-exit-small-low-motion(0, 336px); + } + }, low, 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 { + .applyMotions({ + .inner { + .lime-exit-small-high-motion(0, -336px); + } + }, high, is); + .applyMotions({ + .inner { + .lime-exit-small-low-motion(0, -336px); + } + }, low, 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 { + .applyMotions({ + .inner { + .lime-exit-small-high-motion(-336px, 0); + } + }, high, is); + .applyMotions({ + .inner { + .lime-exit-small-low-motion(-336px, 0); + } + }, low, 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 { + .applyMotions({ + .inner { + .lime-exit-small-high-motion(336px, 0); + } + }, high, is); + .applyMotions({ + .inner { + .lime-exit-small-low-motion(336px, 0); + } + }, low, 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 { + .applyMotions({ + .inner { + .lime-exit-medium-high-motion(0, 32px); + } + }, high, is); + .applyMotions({ + .inner { + .lime-exit-medium-low-motion(0, 32px); + } + }, low, is); + } } :global(.noAnimation) & { diff --git a/Slider/Slider.module.less b/Slider/Slider.module.less index 611297f7f..f4b5ab51d 100644 --- a/Slider/Slider.module.less +++ b/Slider/Slider.module.less @@ -45,8 +45,16 @@ } } - &: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(); + } + }, high); + .applyMotions({ + .knob::before { + .lime-slider-focus-out-low-motion(); + } + }, low); &.showAnchor { .knob { @@ -412,8 +420,16 @@ :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(); + } + }, high); + .applyMotions({ + .knob::before { + .lime-slider-focus-in-low-motion(); + } + }, low); } &:not([disabled]):not(.colorPicker, .pressed) { @@ -440,23 +456,55 @@ 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(); + } + }, high); + .applyMotions({ + .knob::before { + .lime-slider-focus-in-low-motion(); + } + }, low); &: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(); + } + }, high); + .applyMotions({ + .knob::before { + .lime-slider-press-low-motion(); + } + }, low); } &: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(); + } + }, high); + .applyMotions({ + .knob::before { + .lime-slider-release-low-motion(); + } + }, low); } .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(); + } + }, high); + .applyMotions({ + .knob::before { + .lime-slider-focus-out-low-motion(); + } + }, low); }); } @@ -478,8 +526,17 @@ 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(); + } + }, high); + .applyMotions({ + .knob::before { + .lime-slider-focus-in-low-motion(); + } + }, low); } :global(.noAnimation) & { diff --git a/styles/motion-mixins.less b/styles/motion-mixins.less index 17e86614e..cf1eb5015 100644 --- a/styles/motion-mixins.less +++ b/styles/motion-mixins.less @@ -6,6 +6,68 @@ Global Motion Mixins ------------------------------------------ */ +/** + * Applies a single ruleset to both animation tiers (high and low). + * + * @param {Ruleset} @componentMotion - CSS rules to apply. + * @param {string} [@selector=where] - Pseudo-class selector type ('where' | 'is'). + * + * @example + * .applyMotions({ + * .bg { .lime-focus-out-small-high-motion(); } + * }); + */ +.applyMotions(@componentMotion, @selector: where) when (isruleset(@componentMotion)) and ((@selector = where) or (@selector = is)) { + &:@{selector}(:global(.animationTier-high) *), + &:@{selector}(:global(.animationTier-low) *) { + @componentMotion(); + } +} + +/** + * Applies a ruleset to a specific animation tier ('high' or 'low'). + * Useful for applying motion mixins to a specific tier, or targeting + * specific nested classes within those tiers. + * + * @param {Ruleset} @componentMotion - CSS rules to apply. + * @param {string} @tier - Target tier ('high' | 'low'). + * @param {string} [@selector=where] - Pseudo-class selector type ('where' | 'is'). + * + * @example + * .applyMotions({ + * .bg { .lime-focus-in-small-high-motion(1.1); } + * }, high); + */ +.applyMotions(@componentMotion, @tier, @selector: where) when (isruleset(@componentMotion)) and ((@tier = low) or (@tier = high)) { + &:@{selector}(:global(.animationTier-@{tier}) *) { + @componentMotion(); + } +} + +/** + * Applies distinct rulesets for high and low animation tiers in a single call. + * Mostly used when you need to apply motion mixins directly without nested classes. + * + * @param {Ruleset} @highTierMotion - Ruleset executed when tier is 'high'. + * @param {Ruleset} @lowTierMotion - Ruleset executed when tier is 'low'. + * @param {string} [@selector=where] - Pseudo-class selector type ('where' | 'is'). + * + * @example + * .applyMotions( + * .lime-focus-out-small-high-motion(1), + * .lime-focus-out-small-low-motion(1) + * ); + */ +.applyMotions(@highTierMotion, @lowTierMotion, @selector: where) when (isruleset(@highTierMotion)) and (isruleset(@lowTierMotion)) { + each(high low, { + @currentMotion: if((@value = high), @highTierMotion, @lowTierMotion); + + &:@{selector}(:global(.animationTier-@{value}) *) { + @currentMotion(); + } + }); +} + /* focus-in */ .lime-focus-in-fast-motion(@scale-to: 1.1) { transform: scale(@scale-to); From 29f4d52242f4f6739b3d942c5e78b77fa5e20190 Mon Sep 17 00:00:00 2001 From: ion-andrusciac-lgp Date: Thu, 29 Oct 2026 11:22:44 +0200 Subject: [PATCH 2/6] Review fixes --- Button/Button.module.less | 51 ++----------- Card/Card.module.less | 55 +++----------- IconItem/IconItem.module.less | 20 +---- MediaOverlay/MediaOverlay.module.less | 49 +++---------- Popup/Popup.module.less | 101 ++++++-------------------- Slider/Slider.module.less | 87 ++++------------------ styles/motion-mixins.less | 26 ++----- 7 files changed, 73 insertions(+), 316 deletions(-) diff --git a/Button/Button.module.less b/Button/Button.module.less index bd3d13c8f..fed73c3ab 100644 --- a/Button/Button.module.less +++ b/Button/Button.module.less @@ -343,19 +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)); } - .applyMotions({ - .bg { - .lime-focus-out-small-high-motion(1); - } - }, high); - .applyMotions({ - .bg { - .lime-focus-out-small-low-motion(1) ; - } - }, low); - &.bordered { .bg { background-color: @lime-button-outline-container-color; @@ -513,17 +503,8 @@ } } - &.focusExpand { - .applyMotions({ - .bg { - .lime-focus-in-small-high-motion(1.1); - } - }, high); - .applyMotions({ - .bg { - .lime-focus-in-small-low-motion(1.1); - } - }, low); + &.focusExpand .bg { + .applyMotions(.lime-focus-in-small-high-motion(1.1), .lime-focus-in-small-low-motion(1.1)); } }); @@ -535,29 +516,13 @@ &.focusExpand { &.pressed, &:active { - .applyMotions({ - .bg { - .lime-press-small-high-motion(1.05); - } - }, high); - .applyMotions({ - .bg { - .lime-press-small-low-motion(1.05); - } - }, low); + .bg { + .applyMotions(.lime-press-small-high-motion(1.05), .lime-press-small-low-motion(1.05)); + } } - &:not(.pressed) { - .applyMotions({ - .bg { - .lime-release-small-high-motion(1.1); - } - }, high); - .applyMotions({ - .bg { - .lime-release-small-low-motion(1.1); - } - }, low); + &:not(.pressed) .bg { + .applyMotions(.lime-release-small-high-motion(1.1), .lime-release-small-low-motion(1.1)); } } }); diff --git a/Card/Card.module.less b/Card/Card.module.less index dbc83dcf1..e2001f303 100644 --- a/Card/Card.module.less +++ b/Card/Card.module.less @@ -38,10 +38,7 @@ .image { position: relative; - .applyMotions( - .lime-focus-out-large-high-motion(1), - .lime-focus-out-large-low-motion(1) - ); + .applyMotions(.lime-focus-out-large-high-motion(1), .lime-focus-out-large-low-motion(1)); } .selectionContainer { @@ -203,10 +200,7 @@ &.vertical { width: var(--card-image-width); height: auto; - .applyMotions( - .lime-focus-out-large-high-motion(1), - .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; @@ -327,10 +321,7 @@ &.horizontal { width: @lime-card-horizontal-width; height: @lime-card-horizontal-height; - .applyMotions( - .lime-focus-out-large-high-motion(1), - .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; @@ -371,10 +362,7 @@ .focus({ &.hasContainer { - .applyMotions( - .lime-focus-in-large-high-motion(1.1), - .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; @@ -403,16 +391,10 @@ &.hasContainer { &.pressed, &:active { - .applyMotions( - .lime-press-large-high-motion(1.05), - .lime-press-large-low-motion(1.05) - ); + .applyMotions(.lime-press-large-high-motion(1.05), .lime-press-large-low-motion(1.05)); } &:not(.pressed) { - .applyMotions( - .lime-release-large-high-motion(1.1), - .lime-release-large-low-motion(1.1) - ); + .applyMotions(.lime-release-large-high-motion(1.1), .lime-release-large-low-motion(1.1)); } } }); @@ -423,10 +405,7 @@ &.vertical { &:not(.captionOverlay):not(.hasContainer) .image, &.captionOverlay { - .applyMotions( - .lime-focus-in-large-high-motion(1.1), - .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)); } } }); @@ -437,30 +416,18 @@ &.captionOverlay { &.pressed, &:active { - .applyMotions( - .lime-press-large-high-motion(1.05), - .lime-press-large-low-motion(1.05) - ); + .applyMotions(.lime-press-large-high-motion(1.05), .lime-press-large-low-motion(1.05)); } &:not(.pressed) { - .applyMotions( - .lime-release-large-high-motion(1.1), - .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 { - .applyMotions( - .lime-press-large-high-motion(1.05), - .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 { - .applyMotions( - .lime-release-large-high-motion(1.1), - .lime-release-large-low-motion(1.1) - ); + .applyMotions(.lime-release-large-high-motion(1.1), .lime-release-large-low-motion(1.1)); } } }); diff --git a/IconItem/IconItem.module.less b/IconItem/IconItem.module.less index 97ce643a9..a6741473e 100644 --- a/IconItem/IconItem.module.less +++ b/IconItem/IconItem.module.less @@ -10,10 +10,7 @@ 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) - ); + .applyMotions(.lime-focus-out-medium-high-motion(1), .lime-focus-out-medium-low-motion(1)); .content { box-sizing: border-box; @@ -90,10 +87,7 @@ } .focus({ - .applyMotions( - .lime-focus-in-medium-high-motion(1.2), - .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 { @@ -110,16 +104,10 @@ .focus({ &.pressed, &:active { - .applyMotions( - .lime-press-medium-high-motion(1.1), - .lime-press-medium-low-motion(1.1) - ); + .applyMotions(.lime-press-medium-high-motion(1.1), .lime-press-medium-low-motion(1.1)); } &:not(.pressed) { - .applyMotions( - .lime-release-medium-high-motion(1.2), - .lime-release-medium-low-motion(1.2) - ); + .applyMotions(.lime-release-medium-high-motion(1.2), .lime-release-medium-low-motion(1.2)); } }); } diff --git a/MediaOverlay/MediaOverlay.module.less b/MediaOverlay/MediaOverlay.module.less index 638b8a7d9..942d5a9b9 100644 --- a/MediaOverlay/MediaOverlay.module.less +++ b/MediaOverlay/MediaOverlay.module.less @@ -21,58 +21,27 @@ .mediaContainer { position: relative; + .applyMotions(.lime-focus-out-medium-high-motion(1), .lime-focus-out-medium-low-motion(1)); } - .applyMotions({ - .mediaContainer { - .lime-focus-out-medium-high-motion(1); - } - }, high); - .applyMotions({ + .focus({ .mediaContainer { - .lime-focus-out-medium-low-motion(1); + .applyMotions(.lime-focus-in-medium-high-motion(1.1), .lime-focus-in-medium-low-motion(1.1)); } - }, low); - - .focus({ - .applyMotions({ - .mediaContainer { - .lime-focus-in-medium-high-motion(1.1); - } - }, high); - .applyMotions({ - .mediaContainer { - .lime-focus-in-medium-low-motion(1.1); - } - }, low); }); &:not([disabled]) { .focus({ &.pressed, &:active { - .applyMotions({ - .mediaContainer { - .lime-press-medium-high-motion(1.05); - } - }, high); - .applyMotions({ - .mediaContainer { - .lime-press-medium-low-motion(1.05); - } - }, low); + .mediaContainer { + .applyMotions(.lime-press-medium-high-motion(1.05), .lime-press-medium-low-motion(1.05)); + } } &:not(.pressed) { - .applyMotions({ - .mediaContainer { - .lime-release-medium-high-motion(1.1); - } - }, high); - .applyMotions({ - .mediaContainer { - .lime-release-medium-low-motion(1.1); - } - }, low); + .mediaContainer { + .applyMotions(.lime-release-medium-high-motion(1.1), .lime-release-medium-low-motion(1.1)); + } } }); } diff --git a/Popup/Popup.module.less b/Popup/Popup.module.less index b1fc60ecb..b09a229a1 100644 --- a/Popup/Popup.module.less +++ b/Popup/Popup.module.less @@ -151,24 +151,12 @@ } &.shown { - .applyMotions({ - .inner { - .lime-enter-small-high-motion(); - } - }, high, is); - .applyMotions({ - .inner { - .lime-enter-small-low-motion(); - } - }, low, is); - - &.center { - .applyMotions({ - .inner { .lime-enter-medium-high-motion(); } - }, high, is); - .applyMotions({ - .inner { .lime-enter-medium-low-motion(); } - }, low, is); + .inner { + .applyMotions(.lime-enter-small-high-motion(), .lime-enter-small-low-motion(), is); + } + + &.center .inner { + .applyMotions(.lime-enter-medium-high-motion(), .lime-enter-medium-low-motion(), is); } // Alert Fullscreen @@ -176,70 +164,25 @@ } &.hidden { - &.bottom { - .applyMotions({ - .inner { - .lime-exit-small-high-motion(0, 336px); - } - }, high, is); - .applyMotions({ - .inner { - .lime-exit-small-low-motion(0, 336px); - } - }, low, is); - } - - &.top { - .applyMotions({ - .inner { - .lime-exit-small-high-motion(0, -336px); - } - }, high, is); - .applyMotions({ - .inner { - .lime-exit-small-low-motion(0, -336px); - } - }, low, is); - } - - &.left { - .applyMotions({ - .inner { - .lime-exit-small-high-motion(-336px, 0); - } - }, high, is); - .applyMotions({ - .inner { - .lime-exit-small-low-motion(-336px, 0); - } - }, low, is); - } - - &.right { - .applyMotions({ - .inner { - .lime-exit-small-high-motion(336px, 0); - } - }, high, is); - .applyMotions({ - .inner { - .lime-exit-small-low-motion(336px, 0); - } - }, low, is); + &.bottom .inner { + .applyMotions(.lime-exit-small-high-motion(0, 336px), .lime-exit-small-low-motion(0, 336px), is); + } + + &.top .inner { + .applyMotions(.lime-exit-small-high-motion(0, -336px), .lime-exit-small-low-motion(0, -336px), is); + } + + &.left .inner { + .applyMotions(.lime-exit-small-high-motion(-336px, 0), .lime-exit-small-low-motion(-336px, 0), is); + } + + &.right .inner { + .applyMotions(.lime-exit-small-high-motion(336px, 0), .lime-exit-small-low-motion(336px, 0), is); } // Alert Overlay - &.center { - .applyMotions({ - .inner { - .lime-exit-medium-high-motion(0, 32px); - } - }, high, is); - .applyMotions({ - .inner { - .lime-exit-medium-low-motion(0, 32px); - } - }, low, is); + &.center .inner { + .applyMotions(.lime-exit-medium-high-motion(0, 32px), .lime-exit-medium-low-motion(0, 32px), is); } } diff --git a/Slider/Slider.module.less b/Slider/Slider.module.less index f4b5ab51d..50eb97820 100644 --- a/Slider/Slider.module.less +++ b/Slider/Slider.module.less @@ -42,20 +42,10 @@ border: @lime-button-border-width solid transparent; box-sizing: border-box; will-change: transform; + .applyMotions(.lime-slider-focus-out-high-motion(), .lime-slider-focus-out-low-motion()); } } - .applyMotions({ - .knob::before { - .lime-slider-focus-out-high-motion(); - } - }, high); - .applyMotions({ - .knob::before { - .lime-slider-focus-out-low-motion(); - } - }, low); - &.showAnchor { .knob { z-index: 1; @@ -419,17 +409,8 @@ } :global(.spotlight-input-mouse) & { - &:hover:not([disabled]):not(.colorPicker):not(:has(.tick:hover), .pressed) { - .applyMotions({ - .knob::before { - .lime-slider-focus-in-high-motion(); - } - }, high); - .applyMotions({ - .knob::before { - .lime-slider-focus-in-low-motion(); - } - }, low); + &:hover:not([disabled]):not(.colorPicker):not(:has(.tick:hover), .pressed) .knob::before { + .applyMotions(.lime-slider-focus-in-high-motion(), .lime-slider-focus-in-low-motion()); } &:not([disabled]):not(.colorPicker, .pressed) { @@ -455,56 +436,24 @@ background-color: @lime-slider-handle-focused-color; border-color: @lime-slider-handle-focused-border-color; box-shadow: @lime-slider-handle-focused-shadow; + .applyMotions(.lime-slider-focus-in-high-motion(), .lime-slider-focus-in-low-motion()); } - .applyMotions({ - .knob::before { - .lime-slider-focus-in-high-motion(); - } - }, high); - .applyMotions({ - .knob::before { - .lime-slider-focus-in-low-motion(); - } - }, low); &:active, &.pressed { - .applyMotions({ - .knob::before { - .lime-slider-press-high-motion(); - } - }, high); - .applyMotions({ - .knob::before { - .lime-slider-press-low-motion(); - } - }, low); + .knob::before { + .applyMotions(.lime-slider-press-high-motion(), .lime-slider-press-low-motion()); + } } - &:not(.pressed) { - .applyMotions({ - .knob::before { - .lime-slider-release-high-motion(); - } - }, high); - .applyMotions({ - .knob::before { - .lime-slider-release-low-motion(); - } - }, low); + &:not(.pressed) .knob::before { + .applyMotions(.lime-slider-release-high-motion(), .lime-slider-release-low-motion()); } .disabled({ - .applyMotions({ - .knob::before { - .lime-slider-focus-out-high-motion(); - } - }, high); - .applyMotions({ - .knob::before { - .lime-slider-focus-out-low-motion(); - } - }, low); + .knob::before { + .applyMotions(.lime-slider-focus-out-high-motion(), .lime-slider-focus-out-low-motion()); + } }); } @@ -525,18 +474,8 @@ background-color: @lime-slider-handle-focused-color; border-color: @lime-slider-handle-focused-border-color; box-shadow: @lime-slider-handle-focused-shadow; + .applyMotions(.lime-slider-focus-in-high-motion(), .lime-slider-focus-in-low-motion()); } - - .applyMotions({ - .knob::before { - .lime-slider-focus-in-high-motion(); - } - }, high); - .applyMotions({ - .knob::before { - .lime-slider-focus-in-low-motion(); - } - }, low); } :global(.noAnimation) & { diff --git a/styles/motion-mixins.less b/styles/motion-mixins.less index cf1eb5015..476e4cc17 100644 --- a/styles/motion-mixins.less +++ b/styles/motion-mixins.less @@ -6,24 +6,6 @@ Global Motion Mixins ------------------------------------------ */ -/** - * Applies a single ruleset to both animation tiers (high and low). - * - * @param {Ruleset} @componentMotion - CSS rules to apply. - * @param {string} [@selector=where] - Pseudo-class selector type ('where' | 'is'). - * - * @example - * .applyMotions({ - * .bg { .lime-focus-out-small-high-motion(); } - * }); - */ -.applyMotions(@componentMotion, @selector: where) when (isruleset(@componentMotion)) and ((@selector = where) or (@selector = is)) { - &:@{selector}(:global(.animationTier-high) *), - &:@{selector}(:global(.animationTier-low) *) { - @componentMotion(); - } -} - /** * Applies a ruleset to a specific animation tier ('high' or 'low'). * Useful for applying motion mixins to a specific tier, or targeting @@ -38,7 +20,7 @@ Global Motion Mixins * .bg { .lime-focus-in-small-high-motion(1.1); } * }, high); */ -.applyMotions(@componentMotion, @tier, @selector: where) when (isruleset(@componentMotion)) and ((@tier = low) or (@tier = high)) { +.applyMotions(@componentMotion, @tier, @selector: where) when (isruleset(@componentMotion)) and ((@tier = low) or (@tier = high)) and ((@selector = where) or (@selector = is)) { &:@{selector}(:global(.animationTier-@{tier}) *) { @componentMotion(); } @@ -58,7 +40,7 @@ Global Motion Mixins * .lime-focus-out-small-low-motion(1) * ); */ -.applyMotions(@highTierMotion, @lowTierMotion, @selector: where) when (isruleset(@highTierMotion)) and (isruleset(@lowTierMotion)) { +.applyMotions(@highTierMotion, @lowTierMotion, @selector: where) when (isruleset(@highTierMotion)) and (isruleset(@lowTierMotion)) and ((@selector = where) or (@selector = is)) { each(high low, { @currentMotion: if((@value = high), @highTierMotion, @lowTierMotion); @@ -68,6 +50,10 @@ Global Motion Mixins }); } +.applyMotions(@a, @b: null, @c: null) when (default()) { + .applyMotions-invalid-arguments(); +} + /* focus-in */ .lime-focus-in-fast-motion(@scale-to: 1.1) { transform: scale(@scale-to); From 8eb9b38de1e6cbec3d502c63038a28a235956988 Mon Sep 17 00:00:00 2001 From: ion-andrusciac-lgp Date: Thu, 29 Oct 2026 20:42:57 +0200 Subject: [PATCH 3/6] Fixed `Slider` animation --- Slider/Slider.module.less | 36 ++++++++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/Slider/Slider.module.less b/Slider/Slider.module.less index 50eb97820..8420f1616 100644 --- a/Slider/Slider.module.less +++ b/Slider/Slider.module.less @@ -42,10 +42,14 @@ border: @lime-button-border-width solid transparent; box-sizing: border-box; will-change: transform; - .applyMotions(.lime-slider-focus-out-high-motion(), .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 { z-index: 1; @@ -410,7 +414,10 @@ :global(.spotlight-input-mouse) & { &:hover:not([disabled]):not(.colorPicker):not(:has(.tick:hover), .pressed) .knob::before { - .applyMotions(.lime-slider-focus-in-high-motion(), .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) { @@ -436,24 +443,33 @@ background-color: @lime-slider-handle-focused-color; border-color: @lime-slider-handle-focused-border-color; box-shadow: @lime-slider-handle-focused-shadow; - .applyMotions(.lime-slider-focus-in-high-motion(), .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 { - .knob::before { - .applyMotions(.lime-slider-press-high-motion(), .lime-slider-press-low-motion()); - } + .applyMotions( + { .knob::before { .lime-slider-press-high-motion(); }}, + { .knob::before { .lime-slider-press-low-motion(); }} + ); } &:not(.pressed) .knob::before { - .applyMotions(.lime-slider-release-high-motion(), .lime-slider-release-low-motion()); + .applyMotions( + { .knob::before { .lime-slider-release-high-motion()}}, + { .knob::before { .lime-slider-release-low-motion()}} + ); } .disabled({ - .knob::before { - .applyMotions(.lime-slider-focus-out-high-motion(), .lime-slider-focus-out-low-motion()); - } + .applyMotions( + { .knob::before { .lime-slider-focus-out-high-motion(); }}, + { .knob::before { .lime-slider-focus-out-low-motion(); }} + ); }); } From cec09b9360d4523abe4a7e38b47c0fd6ad7a9838 Mon Sep 17 00:00:00 2001 From: ion-andrusciac-lgp Date: Thu, 29 Oct 2026 20:49:12 +0200 Subject: [PATCH 4/6] Fixed `Slider` animation --- Slider/Slider.module.less | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/Slider/Slider.module.less b/Slider/Slider.module.less index 8420f1616..fd63f1de0 100644 --- a/Slider/Slider.module.less +++ b/Slider/Slider.module.less @@ -413,7 +413,7 @@ } :global(.spotlight-input-mouse) & { - &:hover:not([disabled]):not(.colorPicker):not(:has(.tick:hover), .pressed) .knob::before { + &:hover:not([disabled]):not(.colorPicker):not(:has(.tick:hover), .pressed) { .applyMotions( { .knob::before {.lime-slider-focus-in-high-motion(); }}, { .knob::before { .lime-slider-focus-in-low-motion(); }} @@ -458,10 +458,10 @@ ); } - &:not(.pressed) .knob::before { + &:not(.pressed) { .applyMotions( - { .knob::before { .lime-slider-release-high-motion()}}, - { .knob::before { .lime-slider-release-low-motion()}} + { .knob::before { .lime-slider-release-high-motion(); }}, + { .knob::before { .lime-slider-release-low-motion(); }} ); } @@ -490,8 +490,12 @@ background-color: @lime-slider-handle-focused-color; border-color: @lime-slider-handle-focused-border-color; box-shadow: @lime-slider-handle-focused-shadow; - .applyMotions(.lime-slider-focus-in-high-motion(), .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) & { From 070cc243a30fd2170ca96995310b0a09999dac4a Mon Sep 17 00:00:00 2001 From: ion-andrusciac-lgp Date: Fri, 30 Oct 2026 10:42:11 +0200 Subject: [PATCH 5/6] Small fix --- Slider/Slider.module.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Slider/Slider.module.less b/Slider/Slider.module.less index fd63f1de0..860b68d10 100644 --- a/Slider/Slider.module.less +++ b/Slider/Slider.module.less @@ -415,7 +415,7 @@ :global(.spotlight-input-mouse) & { &:hover:not([disabled]):not(.colorPicker):not(:has(.tick:hover), .pressed) { .applyMotions( - { .knob::before {.lime-slider-focus-in-high-motion(); }}, + { .knob::before { .lime-slider-focus-in-high-motion(); }}, { .knob::before { .lime-slider-focus-in-low-motion(); }} ); } From 9e762bb83825c94ad5937881bd9cce86745ac598 Mon Sep 17 00:00:00 2001 From: Daniel Stoian Date: Fri, 30 Oct 2026 11:57:21 +0200 Subject: [PATCH 6/6] fixed less comments --- styles/motion-mixins.less | 56 +++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/styles/motion-mixins.less b/styles/motion-mixins.less index 476e4cc17..1d5e3a615 100644 --- a/styles/motion-mixins.less +++ b/styles/motion-mixins.less @@ -6,40 +6,40 @@ Global Motion Mixins ------------------------------------------ */ -/** - * Applies a ruleset to a specific animation tier ('high' or 'low'). - * Useful for applying motion mixins to a specific tier, or targeting - * specific nested classes within those tiers. - * - * @param {Ruleset} @componentMotion - CSS rules to apply. - * @param {string} @tier - Target tier ('high' | 'low'). - * @param {string} [@selector=where] - Pseudo-class selector type ('where' | 'is'). - * - * @example - * .applyMotions({ - * .bg { .lime-focus-in-small-high-motion(1.1); } - * }, high); - */ +// /** +// * Applies a ruleset to a specific animation tier ('high' or 'low'). +// * Useful for applying motion mixins to a specific tier, or targeting +// * specific nested classes within those tiers. +// * +// * @param {Ruleset} @componentMotion - CSS rules to apply. +// * @param {string} @tier - Target tier ('high' | 'low'). +// * @param {string} [@selector=where] - Pseudo-class selector type ('where' | 'is'). +// * +// * @example +// * .applyMotions({ +// * .bg { .lime-focus-in-small-high-motion(1.1); } +// * }, high); +// */ .applyMotions(@componentMotion, @tier, @selector: where) when (isruleset(@componentMotion)) and ((@tier = low) or (@tier = high)) and ((@selector = where) or (@selector = is)) { &:@{selector}(:global(.animationTier-@{tier}) *) { @componentMotion(); } } -/** - * Applies distinct rulesets for high and low animation tiers in a single call. - * Mostly used when you need to apply motion mixins directly without nested classes. - * - * @param {Ruleset} @highTierMotion - Ruleset executed when tier is 'high'. - * @param {Ruleset} @lowTierMotion - Ruleset executed when tier is 'low'. - * @param {string} [@selector=where] - Pseudo-class selector type ('where' | 'is'). - * - * @example - * .applyMotions( - * .lime-focus-out-small-high-motion(1), - * .lime-focus-out-small-low-motion(1) - * ); - */ +// /** +// * Applies distinct rulesets for high and low animation tiers in a single call. +// * Mostly used when you need to apply motion mixins directly without nested classes. +// * +// * @param {Ruleset} @highTierMotion - Ruleset executed when tier is 'high'. +// * @param {Ruleset} @lowTierMotion - Ruleset executed when tier is 'low'. +// * @param {string} [@selector=where] - Pseudo-class selector type ('where' | 'is'). +// * +// * @example +// * .applyMotions( +// * .lime-focus-out-small-high-motion(1), +// * .lime-focus-out-small-low-motion(1) +// * ); +// */ .applyMotions(@highTierMotion, @lowTierMotion, @selector: where) when (isruleset(@highTierMotion)) and (isruleset(@lowTierMotion)) and ((@selector = where) or (@selector = is)) { each(high low, { @currentMotion: if((@value = high), @highTierMotion, @lowTierMotion);