material-inspired-component-library 8.1.0 → 9.0.0

package/components/datepicker/index.scss

@@ -19,7 +19,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/shape';
 @use '../../styles/statelayer';
@@ -35,15 +34,10 @@
 @include statelayer.property;
 
 @include typography.scale('headline-large');
+@include typography.scale('title-large');
 @include typography.scale('body-large');
 @include typography.scale('label-large');
 
-:root {
-    --md-comp-date-picker-docked-container-width: 360px;
-    --md-comp-date-picker-modal-container-width: 360px;
-    --md-comp-date-input-modal-container-width: 328px;
-}
-
 %view-transition-base {
     block-size: fit-content;
     opacity: 1;
@@ -62,6 +56,28 @@
     }
 }
 
+// State layer background shared by the date cells and the year chips.
+%statelayer-background {
+    --statelayer-color: var(--md-sys-color-on-surface-variant);
+    --statelayer-opacity: 0%;
+
+    background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-clip: content-box;
+    transition: --statelayer-opacity var(--md-comp-date-picker-button-motion-duration) linear;
+
+    &:hover {
+        --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+    }
+    &:focus-visible {
+        --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+    }
+    &:active {
+        --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+    }
+}
+
 dialog.micl-dialog.micl-datepicker {
     --md-comp-date-picker-motion-spatial: #{motion.$md-sys-motion-expressive-fast-effects};
     --md-comp-date-picker-motion-spatial-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
@@ -69,6 +85,9 @@ dialog.micl-dialog.micl-datepicker {
     --md-comp-date-picker-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-effects-duration};
     --md-comp-date-picker-button-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
 
+    // Internal alias: the target size is referenced from many descendants.
+    --_target: var(--md-sys-target-size, 48px);
+
     inline-size: var(--md-comp-date-picker-modal-container-width, 360px);
 
     &:has(.micl-datepicker__input:not(.micl-datepicker__view-hidden)) {
@@ -88,96 +107,46 @@ dialog.micl-dialog.micl-datepicker {
     .micl-dialog__headline {
         display: grid;
         gap: 0;
-        grid-template-columns: max-content 1fr var(--md-sys-target-size, 48px);
+        grid-template-columns: max-content 1fr var(--_target);
         grid-template-areas:
-            "datepicker-supporting datepicker-supporting datepicker-supporting"
-            "datepicker-close datepicker-action datepicker-action"
-            "datepicker-close datepicker-headline datepicker-mode"
-            "datepicker-divider datepicker-divider datepicker-divider"
-            "datepicker-year-selector datepicker-year-selector datepicker-month-selector";
+            "sup sup sup"
+            "close act act"
+            "close head mode"
+            "div div div"
+            "ysel ysel msel";
         padding-inline-end: 12px;
         padding-block: 16px 4px;
 
-        h1, h2, h3, h4, h5, h6, .micl-heading {
+        :is(h1, h2, h3, h4, h5, h6, .micl-heading) {
             @include typography.headline-large;
 
-            grid-area: datepicker-headline;
+            grid-area: head;
             margin-block-start: 36px;
-            color: var(--md-sys-color-on-surface-variant);
+            color: var(--md-comp-date-picker-header-headline-color, var(--md-sys-color-on-surface-variant));
         }
         .micl-dialog__supporting-text {
             @include typography.label-large;
 
-            grid-area: datepicker-supporting;
-        }
-        .micl-datepicker__inputmode {
-            grid-area: datepicker-mode;
-            align-self: flex-end;
-            justify-self: center;
+            grid-area: sup;
         }
         .micl-divider {
-            grid-area: datepicker-divider;
+            grid-area: div;
             inline-size: calc(100% + 36px);
             margin-block-start: 11.5px;
             margin-inline: -24px;
         }
-        .micl-datepicker__month-selector,
-        .micl-datepicker__year-selector {
-            display: grid;
-            grid-template-rows: var(--md-sys-target-size, 48px);
-            align-items: center;
+    }
+    // The range headline holds two dates, so the spec drops it to title-large.
+    // The larger margin keeps the divider below it in place.
+    &.micl-datepicker--range .micl-dialog__headline :is(h1, h2, h3, h4, h5, h6, .micl-heading) {
+        @include typography.title-large;
 
-            &.micl-datepicker__view-hidden {
-                display: none;
-            }
-        }
-        .micl-datepicker__month-selector {
-            grid-area: datepicker-month-selector;
-            grid-template-areas: "datepicker-month-previous datepicker-month-next";
-            grid-template-columns: var(--md-sys-target-size, 48px) var(--md-sys-target-size, 48px);
-            justify-items: flex-end;
-            justify-content: flex-end;
-
-            .micl-datepicker__previous {
-                grid-area: datepicker-month-previous;
-            }
-            .micl-datepicker__next {
-                grid-area: datepicker-month-next;
-            }
-        }
-        .micl-datepicker__year-selector {
-            grid-area: datepicker-year-selector;
-            grid-template-areas: "datepicker-year";
-            grid-template-columns: 1fr;
-            justify-items: flex-start;
-            margin-inline-start: -8px;
-
-            .micl-datepicker__previous {
-                display: none;
-                grid-area: datepicker-year-previous;
-            }
-            .micl-datepicker__next {
-                display: none;
-                grid-area: datepicker-year-next;
-            }
-        }
-        .micl-datepicker__month {
-            display: none;
-            grid-area: datepicker-month;
-            margin-inline: -12px auto;
-        }
-        .micl-datepicker__year {
-            grid-area: datepicker-year;
-        }
-        .micl-datepicker__month:not(:disabled),
-        .micl-datepicker__year:not(:disabled) {
-            color: var(--md-sys-color-on-surface-variant);
-        }
+        margin-block-start: 48px;
     }
 
     .micl-dialog__content {
         display: grid;
-        grid-template-areas: "datepicker-view";
+        grid-template-areas: "view";
         position: relative;
         inline-size: 100%;
         max-block-size: 336px;
@@ -185,228 +154,10 @@ dialog.micl-dialog.micl-datepicker {
         padding-inline: 0;
         overflow: hidden auto;
         transition: min-block-size var(--md-comp-date-picker-motion-spatial-duration) var(--md-comp-date-picker-motion-spatial);
-
-        .micl-datepicker__calendars {
-            display: flex;
-            grid-area: datepicker-view;
-            position: absolute;
-            inset-block-start: 0;
-            inset-inline-start: 0;
-            block-size: 100%;
-            inline-size: 200%;
-            opacity: 1;
-            overflow: hidden;
-            transform: translateX(0);
-            transition:
-                transform var(--md-comp-date-picker-motion-spatial-duration) var(--md-comp-date-picker-motion-spatial),
-                opacity var(--md-comp-date-picker-motion-duration-reverse) linear,
-                block-size var(--md-comp-date-picker-motion-duration-reverse) linear allow-discrete,
-                display var(--md-comp-date-picker-motion-duration-reverse) linear allow-discrete;
-
-            &.micl-datepicker__view-hidden {
-                block-size: 0%;
-                opacity: 0;
-                transition-property: none;
-            }
-            &.micl-startleft,
-            &.micl-moveright {
-                transform: translateX(0%);
-            }
-            &.micl-startright,
-            &.micl-moveleft {
-                transform: translateX(-50%);
-            }
-
-            .micl-datepicker__calendar {
-                flex-shrink: 0;
-                block-size: 100%;
-                inline-size: 50%;
-
-                .micl-datepicker__calendar-inner {
-                    @include typography.body-large;
-
-                    box-sizing: border-box;
-                    display: grid;
-                    grid-template-columns: repeat(7, var(--md-sys-target-size, 48px));
-                    grid-template-rows: 40px repeat(6, var(--md-sys-target-size, 48px));
-                    block-size: 100%;
-                    inline-size: 100%;
-                    padding-inline: 12px;
-
-                    span, time {
-                        box-sizing: border-box;
-                        display: inline-flex;
-                        justify-content: center;
-                        border: none;
-                        color: var(--md-sys-color-on-surface);
-                        -webkit-tap-highlight-color: transparent;
-                    }
-                    time {
-                        --statelayer-color: var(--md-sys-color-on-surface-variant);
-                        --statelayer-opacity: 0%;
-
-                        align-items: center;
-                        border: 4px solid transparent;
-                        border-radius: var(--md-sys-shape-corner-full);
-                        background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
-                        background-repeat: no-repeat;
-                        background-size: 100%;
-                        background-clip: content-box;
-                        transition: --statelayer-opacity var(--md-comp-date-picker-button-motion-duration) linear;
-
-                        &.micl-datepicker__today {
-                            outline: 1px solid var(--md-sys-color-primary);
-                            outline-offset: -5px;
-                            color: var(--md-sys-color-primary);
-
-                            &:hover,
-                            &:focus-visible,
-                            &:active {
-                                --statelayer-color: var(--md-sys-color-primary);
-                            }
-                        }
-                        &.micl-datepicker__selected {
-                            background-color: var(--md-sys-color-primary);
-                            color: var(--md-sys-color-on-primary);
-
-                            &:hover,
-                            &:focus-visible,
-                            &:active {
-                                --statelayer-color: var(--md-sys-color-on-primary);
-                            }
-                        }
-                        &.micl-datepicker__outside {
-                            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
-                        }
-                        &:not(.micl-datepicker__outside) {
-                            cursor: pointer;
-                        }
-                        &:hover {
-                            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
-                        }
-                        &:focus-visible {
-                            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
-                        }
-                        &:active {
-                            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
-                        }
-                    }
-                }
-            }
-        }
-        .micl-datepicker__months,
-        .micl-datepicker__years,
-        .micl-datepicker__input {
-            grid-area: datepicker-view;
-            @extend %view-transition-base;
-        }
-        .micl-datepicker__months {
-            overflow-y: hidden;
-
-            .micl-datepicker__months-inner {
-                block-size: auto;
-                inline-size: 100%;
-            }
-            label {
-                @include typography.body-large;
-
-                display: flex;
-                align-items: center;
-                block-size: var(--md-sys-target-size, 48px);
-                gap: 8px;
-                padding-inline-start: 16px;
-                color: var(--md-sys-color-on-surface);
-                cursor: pointer;
-
-                input[type=radio] {
-                    appearance: none;
-                    margin: 0;
-                }
-                span {
-                    visibility: hidden;
-                    color: var(--md-sys-color-on-surface);
-                }
-                &:has(input:checked) {
-                    background-color: var(--md-sys-color-surface-variant);
-
-                    span {
-                        visibility: visible;
-                    }
-                }
-            }
-        }
-        .micl-datepicker__years {
-            overflow-y: hidden;
-
-            .micl-datepicker__years-inner {
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: center;
-                block-size: auto;
-                inline-size: 100%;
-            }
-            label {
-                --statelayer-color: var(--md-sys-color-on-surface-variant);
-                --statelayer-opacity: 0%;
-
-                @include typography.body-large;
-
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                block-size: 36px;
-                inline-size: 72px;
-                margin: 8px;
-                border: calc((var(--md-sys-target-size, 48px) - 36px) / 2) solid transparent;
-                border-radius: calc(var(--md-sys-target-size, 48px) / 2);
-                background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
-                background-repeat: no-repeat;
-                background-size: 100%;
-                background-clip: content-box;
-                color: var(--md-sys-color-on-surface-variant);
-                cursor: pointer;
-                transition: --statelayer-opacity var(--md-comp-date-picker-button-motion-duration) linear;
-
-                &:hover {
-                    --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
-                }
-                &:focus-visible {
-                    --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
-                }
-                &:active {
-                    --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
-                }
-                &:has(input:checked) {
-                    color: var(--md-sys-color-on-primary);
-                    background-color: var(--md-sys-color-primary);
-
-                    &:hover,
-                    &:focus-visible,
-                    &:active {
-                        --statelayer-color: var(--md-sys-color-on-primary);
-                    }
-                }
-
-                input[type=radio] {
-                    appearance: none;
-                    margin: 0;
-                }
-            }
-        }
-        .micl-datepicker__input {
-            padding-inline: 16px;
-            margin-block-end: 16px;
-
-            &.micl-datepicker__view-hidden,
-            input[type=date]::-webkit-calendar-picker-indicator,
-            input[type=date]::-webkit-inner-spin-button {
-                display: none;
-            }
-        }
     }
 
     .micl-dialog__actions {
-        padding: 8px 12px 12px 12px;
+        padding: 8px 12px 12px;
     }
 
     &.micl-dialog--docked {
@@ -414,36 +165,316 @@ dialog.micl-dialog.micl-datepicker {
         border-radius: var(--md-sys-shape-corner-large);
 
         .micl-dialog__headline {
-            grid-template-areas: "datepicker-month-selector datepicker-year-selector";
+            grid-template-areas: "msel ysel";
             grid-template-columns: 1fr 1fr;
-            padding: 8px 12px 18px 12px;
+            padding: 8px 12px 18px;
 
-            h1, h2, h3, h4, h5, h6, .micl-heading,
+            :is(h1, h2, h3, h4, h5, h6, .micl-heading),
             .micl-dialog__supporting-text,
             .micl-datepicker__inputmode {
                 display: none;
             }
-            .micl-datepicker__month-selector {
-                grid-template-areas: "datepicker-month-previous datepicker-month datepicker-month-next";
-                grid-template-columns: var(--md-sys-target-size, 48px) 1fr var(--md-sys-target-size, 48px);
-
-                .micl-datepicker__month {
-                    display: inline-flex;
-                    margin-inline: 0;
-                }
-            }
-            .micl-datepicker__year-selector {
-                grid-template-areas: "datepicker-year-previous datepicker-year datepicker-year-next";
-                grid-template-columns: var(--md-sys-target-size, 48px) 1fr var(--md-sys-target-size, 48px);
-
-                .micl-datepicker__previous,
-                .micl-datepicker__next {
-                    display: block;
-                }
-            }
         }
         .micl-dialog__actions > button {
             margin-block: -2px;
         }
     }
 }
+
+.micl-datepicker__inputmode {
+    grid-area: mode;
+    align-self: flex-end;
+    justify-self: center;
+}
+
+.micl-datepicker__month-selector,
+.micl-datepicker__year-selector {
+    display: grid;
+    grid-template-rows: var(--_target);
+    align-items: center;
+
+    &.micl-datepicker__view-hidden {
+        display: none;
+    }
+}
+.micl-datepicker__month-selector {
+    grid-area: msel;
+    grid-template-areas: "mprev mnext";
+    grid-template-columns: var(--_target) var(--_target);
+    justify-items: flex-end;
+    justify-content: flex-end;
+
+    .micl-datepicker__previous {
+        grid-area: mprev;
+    }
+    .micl-datepicker__next {
+        grid-area: mnext;
+    }
+}
+.micl-datepicker__year-selector {
+    grid-area: ysel;
+    grid-template-areas: "yr";
+    grid-template-columns: 1fr;
+    justify-items: flex-start;
+    margin-inline-start: -8px;
+
+    .micl-datepicker__previous {
+        display: none;
+        grid-area: yprev;
+    }
+    .micl-datepicker__next {
+        display: none;
+        grid-area: ynext;
+    }
+}
+.micl-datepicker__month {
+    grid-area: mon;
+    margin-inline: -12px auto;
+}
+.micl-datepicker__month-selector .micl-datepicker__month {
+    display: none;
+}
+.micl-datepicker__year {
+    grid-area: yr;
+}
+.micl-datepicker__month:not(:disabled),
+.micl-datepicker__year:not(:disabled) {
+    color: var(--md-sys-color-on-surface-variant);
+}
+
+.micl-dialog--docked {
+    :is(.micl-datepicker__month-selector, .micl-datepicker__year-selector) {
+        grid-template-columns: var(--_target) 1fr var(--_target);
+    }
+    .micl-datepicker__month-selector {
+        grid-template-areas: "mprev mon mnext";
+
+        .micl-datepicker__month {
+            display: inline-flex;
+            margin-inline: 0;
+        }
+    }
+    .micl-datepicker__year-selector {
+        grid-template-areas: "yprev yr ynext";
+
+        :is(.micl-datepicker__previous, .micl-datepicker__next) {
+            display: block;
+        }
+    }
+}
+
+.micl-datepicker__calendars {
+    display: flex;
+    grid-area: view;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    block-size: 100%;
+    inline-size: 200%;
+    opacity: 1;
+    overflow: hidden;
+    transform: translateX(0);
+    transition:
+        transform var(--md-comp-date-picker-motion-spatial-duration) var(--md-comp-date-picker-motion-spatial),
+        opacity var(--md-comp-date-picker-motion-duration-reverse) linear,
+        block-size var(--md-comp-date-picker-motion-duration-reverse) linear allow-discrete,
+        display var(--md-comp-date-picker-motion-duration-reverse) linear allow-discrete;
+
+    &.micl-datepicker__view-hidden {
+        block-size: 0%;
+        opacity: 0;
+        transition-property: none;
+    }
+    &.micl-startleft,
+    &.micl-moveright {
+        transform: translateX(0%);
+    }
+    &.micl-startright,
+    &.micl-moveleft {
+        transform: translateX(-50%);
+    }
+}
+.micl-datepicker__calendar {
+    flex-shrink: 0;
+    block-size: 100%;
+    inline-size: 50%;
+}
+.micl-datepicker__calendar-inner {
+    @include typography.body-large;
+
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: repeat(7, var(--_target));
+    grid-template-rows: 40px repeat(6, var(--_target));
+    block-size: 100%;
+    inline-size: 100%;
+    padding-inline: 12px;
+
+    span, time {
+        box-sizing: border-box;
+        display: inline-flex;
+        justify-content: center;
+        border: none;
+        -webkit-tap-highlight-color: transparent;
+    }
+    span {
+        color: var(--md-comp-date-picker-weekdays-label-text-color, var(--md-sys-color-on-surface));
+    }
+    time {
+        @extend %statelayer-background;
+
+        align-items: center;
+        border: 4px solid transparent;
+        border-radius: var(--md-sys-shape-corner-full);
+        color: var(--md-comp-date-picker-date-unselected-label-text-color, var(--md-sys-color-on-surface));
+
+        &.micl-datepicker__today {
+            outline: 1px solid var(--md-comp-date-picker-date-today-container-outline-color, var(--md-sys-color-primary));
+            outline-offset: -5px;
+            color: var(--md-comp-date-picker-date-today-label-text-color, var(--md-sys-color-primary));
+        }
+        &.micl-datepicker__selected {
+            background-color: var(--md-comp-date-picker-date-selected-container-color, var(--md-sys-color-primary));
+            color: var(--md-comp-date-picker-date-selected-label-text-color, var(--md-sys-color-on-primary));
+        }
+        // The active-indicator band of a range is painted by a pseudo-element
+        // on a negative z-index: below the cell's own state layer, selection
+        // circle and today-outline, which stay clipped by the circular
+        // border-radius (an element background cannot escape it). The band
+        // bleeds into the 4px transparent borders to meet the neighbour cells.
+        &:is(.micl-datepicker__inrange, .micl-datepicker__range-start, .micl-datepicker__range-end) {
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                z-index: -1;
+                inset-block: 0;
+                inset-inline: -4px;
+                background-color: var(--md-comp-date-picker-range-selection-active-indicator-container-color, var(--md-sys-color-secondary-container));
+            }
+        }
+        &.micl-datepicker__inrange {
+            color: var(--md-comp-date-picker-selection-date-in-range-label-text-color, var(--md-sys-color-on-secondary-container));
+        }
+        // The endpoints only paint the half band facing the inside of the range.
+        &.micl-datepicker__range-start::before {
+            inset-inline: 50% -4px;
+        }
+        &.micl-datepicker__range-end::before {
+            inset-inline: -4px 50%;
+        }
+        // The state layer of a highlighted date follows its label color.
+        &:is(.micl-datepicker__today, .micl-datepicker__selected):is(:hover, :focus-visible, :active) {
+            --statelayer-color: currentColor;
+        }
+        &.micl-datepicker__outside {
+            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity));
+        }
+        &:not(.micl-datepicker__outside) {
+            cursor: pointer;
+        }
+    }
+}
+
+.micl-datepicker__months,
+.micl-datepicker__years,
+.micl-datepicker__input {
+    grid-area: view;
+    @extend %view-transition-base;
+}
+.micl-datepicker__months {
+    overflow-y: hidden;
+
+    .micl-datepicker__months-inner {
+        block-size: auto;
+        inline-size: 100%;
+    }
+    label {
+        @include typography.body-large;
+
+        display: flex;
+        align-items: center;
+        block-size: var(--_target);
+        gap: 8px;
+        padding-inline-start: 16px;
+        color: var(--md-sys-color-on-surface);
+        cursor: pointer;
+
+        span {
+            visibility: hidden;
+            color: var(--md-sys-color-on-surface);
+        }
+        &:has(input:checked) {
+            background-color: var(--md-sys-color-surface-variant);
+
+            span {
+                visibility: visible;
+            }
+        }
+    }
+}
+.micl-datepicker__years {
+    overflow-y: hidden;
+
+    .micl-datepicker__years-inner {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        block-size: auto;
+        inline-size: 100%;
+    }
+    label {
+        @extend %statelayer-background;
+        @include typography.body-large;
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        block-size: 36px;
+        inline-size: 72px;
+        margin: 8px;
+        border: calc((var(--_target) - 36px) / 2) solid transparent;
+        border-radius: calc(var(--_target) / 2);
+        color: var(--md-comp-date-picker-selection-year-unselected-label-text-color, var(--md-sys-color-on-surface-variant));
+        cursor: pointer;
+
+        &:has(input:checked) {
+            color: var(--md-comp-date-picker-selection-year-selected-label-text-color, var(--md-sys-color-on-primary));
+            background-color: var(--md-comp-date-picker-selection-year-selected-container-color, var(--md-sys-color-primary));
+
+            // The state layer of the selected year follows its label color.
+            &:is(:hover, :focus-visible, :active) {
+                --statelayer-color: currentColor;
+            }
+        }
+    }
+}
+:is(.micl-datepicker__months, .micl-datepicker__years) input[type=radio] {
+    appearance: none;
+    margin: 0;
+}
+.micl-datepicker .micl-datepicker__input {
+    padding-inline: 16px;
+    margin-block-end: 16px;
+
+    &.micl-datepicker__view-hidden,
+    input[type=date]::-webkit-calendar-picker-indicator,
+    input[type=date]::-webkit-inner-spin-button {
+        display: none;
+    }
+}
+// In range mode the input view holds the start and end field side by side.
+.micl-datepicker--range .micl-datepicker__input {
+    display: flex;
+    column-gap: 8px;
+
+    > * {
+        flex: 1 1 0;
+        min-inline-size: 0;
+    }
+}
+
+.micl-no-transition {
+    transition: none !important;
+}