@lumx/core 3.1.1 → 3.1.2

package/src/scss/components/slider/_index.scss

@@ -1,209 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-
-/* ==========================================================================
-   Slider
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-slider {
-    $self: &;
-
-    user-select: none;
-
-    &__helper {
-        margin-top: math.div($lumx-spacing-unit, 2);
-    }
-
-    &__value-label {
-        font-size: 10px;
-
-        #{$self}--theme-light & {
-            color: lumx-color-variant("dark", "L2");
-        }
-
-        #{$self}--theme-dark & {
-            color: lumx-color-variant("light", "L2");
-        }
-
-        &--min {
-            padding-right: $lumx-spacing-unit * 2;
-        }
-
-        &--max {
-            padding-left: $lumx-spacing-unit * 2;
-        }
-    }
-
-    &__ui-wrapper {
-        display: flex;
-        align-items: center;
-
-        #{$self}--has-label & {
-            margin-top: $lumx-spacing-unit;
-        }
-    }
-
-    &__wrapper {
-        position: relative;
-        flex: 1 1 auto;
-        height: map.get($lumx-sizes, lumx-base-const("size", "S"));
-        cursor: pointer;
-    }
-
-    &__track {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        left: 0;
-        height: 2px;
-        transform: translateY(-50%);
-
-        &--background {
-            #{$self}--theme-light & {
-                background-color: lumx-color-variant("dark", "L5");
-            }
-
-            #{$self}--theme-dark & {
-                background-color: lumx-color-variant("light", "L5");
-            }
-        }
-
-        &--active {
-            #{$self}--theme-light & {
-                background-color: lumx-color-variant("primary", "N");
-            }
-
-            #{$self}--theme-dark & {
-                background-color: lumx-color-variant("light", "N");
-            }
-        }
-    }
-
-    &__handle {
-        position: absolute;
-        top: 50%;
-        width: 12px;
-        height: 12px;
-        padding: 0;
-        margin: 0;
-        text-decoration: none;
-        cursor: pointer;
-        user-select: none;
-        border: none;
-        border-radius: 50%;
-        outline: none;
-        transform: translateX(-50%) translateY(-50%);
-
-        #{$self}--theme-light & {
-            @include lumx-state(
-                lumx-base-const("state", "DEFAULT"),
-                lumx-base-const("emphasis", "HIGH"),
-                "primary",
-                lumx-base-const("theme", "LIGHT")
-            );
-        }
-
-        #{$self}--theme-dark & {
-            @include lumx-state(
-                lumx-base-const("state", "DEFAULT"),
-                lumx-base-const("emphasis", "HIGH"),
-                "primary",
-                lumx-base-const("theme", "DARK")
-            );
-        }
-    }
-
-    &__ticks {
-        position: absolute;
-        top: math.div(map.get($lumx-sizes, s), 2) + 2;
-        right: 0;
-        left: 0;
-    }
-
-    &__tick {
-        position: absolute;
-        top: 0;
-        width: 2px;
-        height: 4px;
-        transform: translateX(-50%);
-
-        &:first-child,
-        &:last-child {
-            display: none;
-        }
-
-        #{$self}--theme-light & {
-            background-color: lumx-color-variant("dark", "L5");
-        }
-
-        #{$self}--theme-dark & {
-            background-color: lumx-color-variant("light", "L5");
-        }
-    }
-}
-
-/* Handle states
-   ========================================================================== */
-
-// Hover state
-.#{$lumx-base-prefix}-slider__handle:hover {
-    .#{$lumx-base-prefix}-slider--theme-light & {
-        @include lumx-state(
-            lumx-base-const("state", "HOVER"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "LIGHT")
-        );
-    }
-
-    .#{$lumx-base-prefix}-slider--theme-dark & {
-        @include lumx-state(
-            lumx-base-const("state", "HOVER"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "DARK")
-        );
-    }
-}
-
-// Active state
-.#{$lumx-base-prefix}-slider__handle:active {
-    .#{$lumx-base-prefix}-slider--theme-light & {
-        @include lumx-state(
-            lumx-base-const("state", "ACTIVE"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "LIGHT")
-        );
-    }
-
-    .#{$lumx-base-prefix}-slider--theme-dark & {
-        @include lumx-state(
-            lumx-base-const("state", "ACTIVE"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "DARK")
-        );
-    }
-}
-
-// Focus state
-.#{$lumx-base-prefix}-slider__handle[data-focus-visible-added] {
-    .#{$lumx-base-prefix}-slider--theme-light & {
-        @include lumx-state(
-            lumx-base-const("state", "FOCUS"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "LIGHT")
-        );
-    }
-
-    .#{$lumx-base-prefix}-slider--theme-dark & {
-        @include lumx-state(
-            lumx-base-const("state", "FOCUS"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "DARK")
-        );
-    }
-}

package/src/scss/components/slideshow/_index.scss

@@ -1,171 +0,0 @@
-@use "sass:math";
-
-/* ==========================================================================
-   Slideshow
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-slideshow {
-    $self: &;
-
-    outline: none;
-
-    &--fill-height {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-        min-height: 0;
-    }
-
-    &__slides {
-        overflow: hidden;
-
-        #{$self}--fill-height & {
-            display: flex;
-            flex: 1 1 auto;
-            flex-direction: column;
-        }
-    }
-
-    &__wrapper {
-        display: flex;
-        transition: transform $lumx-slideshow-transition-duration;
-
-        @media (prefers-reduced-motion: reduce) {
-            transition: none;
-        }
-
-        #{$self}--fill-height & {
-            flex: 1 1 auto;
-            min-height: 0;
-        }
-    }
-
-    &__controls {
-        margin-top: $lumx-spacing-unit * 2;
-
-        #{$self}--fill-height & {
-            flex-shrink: 0;
-        }
-    }
-}
-
-/* Slideshow item group
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-slideshow-item-group {
-    display: flex;
-    overflow: hidden;
-    max-width: 100%;
-    flex: 0 0 100%;
-}
-
-/* Slideshow item
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-slideshow-item {
-    .#{$lumx-base-prefix}-slideshow--fill-height & {
-        display: flex;
-    }
-}
-
-
-@for $i from 1 through 12 {
-    .#{$lumx-base-prefix}-slideshow--group-by-#{$i} .#{$lumx-base-prefix}-slideshow-item {
-        flex: 0 0 #{math.div(100, $i) + "%"};
-        max-width: #{math.div(100, $i) + "%"};
-        overflow: hidden;
-    }
-}
-/* Slideshow controls
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-slideshow-controls {
-    $self: &;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &__pagination {
-        align-items: center;
-        max-width: 60px;
-        margin: 0 math.div($lumx-spacing-unit, 2);
-        overflow: hidden;
-    }
-
-    &__pagination-items {
-        display: flex;
-        align-items: center;
-        padding: 4px 0;
-        transition: transform $lumx-slideshow-transition-duration;
-
-        @media (prefers-reduced-motion: reduce) {
-            transition: none;
-        }
-    }
-
-    &__pagination-item {
-        $item: &;
-
-        flex-shrink: 0;
-        width: 8px;
-        height: 8px;
-        padding: 0;
-        margin: 0;
-        margin: 0 2px;
-        text-decoration: none;
-        cursor: pointer;
-        user-select: none;
-        border: none;
-        border-radius: 50%;
-        outline: none;
-        transition: transform $lumx-slideshow-transition-duration;
-        transform: scale(1);
-
-        @media (prefers-reduced-motion: reduce) {
-            transition: none;
-        }
-
-        #{$self}--theme-light & {
-            background-color: lumx-color-variant("dark", "L4");
-
-            &[data-focus-visible-added] {
-                @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark");
-            }
-
-            &:hover,
-            &--is-active {
-                background-color: lumx-color-variant("primary", "N");
-
-                &[data-focus-visible-added] {
-                    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "primary");
-                }
-            }
-        }
-
-        #{$self}--theme-dark & {
-            background-color: lumx-color-variant("light", "L4");
-
-            &[data-focus-visible-added] {
-                @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");
-            }
-
-            &:hover,
-            &--is-active {
-                background-color: lumx-color-variant("light", "N");
-
-                &[data-focus-visible-added] {
-                    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");
-                }
-            }
-        }
-
-        #{$self}--has-infinite-pagination &--is-on-edge {
-            transform: scale(0.5);
-        }
-
-        #{$self}--has-infinite-pagination &--is-out-range {
-            transform: scale(0);
-        }
-    }
-}

package/src/scss/components/slideshow/_variables.scss

@@ -1 +0,0 @@
-$lumx-slideshow-transition-duration: 500ms;

package/src/scss/components/switch/_index.scss

@@ -1,257 +0,0 @@
-@use "sass:math";
-
-/* ==========================================================================
-   Switch
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-switch {
-    $self: &;
-
-    display: flex;
-
-    &--position-right {
-        flex-direction: row-reverse;
-    }
-
-    &__input-wrapper {
-        @include lumx-switch-input-wrapper;
-
-        flex-shrink: 0;
-    }
-
-    &__input-native {
-        @include lumx-switch-input-native;
-    }
-
-    &__input-placeholder {
-        @include lumx-switch-placeholder;
-    }
-
-    &__input-background {
-        #{$self}--is-unchecked & {
-            @include lumx-switch-input-background("unchecked");
-        }
-
-        #{$self}--is-checked & {
-            @include lumx-switch-input-background("checked");
-        }
-
-        #{$self}--theme-light#{$self}--is-unchecked & {
-            @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "dark");
-        }
-
-        #{$self}--theme-dark#{$self}--is-unchecked & {
-            @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "light");
-        }
-
-        #{$self}--theme-light#{$self}--is-checked & {
-            @include lumx-state(
-                lumx-base-const("state", "DEFAULT"),
-                lumx-base-const("emphasis", "HIGH"),
-                "primary",
-                lumx-base-const("theme", "LIGHT")
-            );
-        }
-
-        #{$self}--theme-dark#{$self}--is-checked & {
-            @include lumx-state(
-                lumx-base-const("state", "DEFAULT"),
-                lumx-base-const("emphasis", "HIGH"),
-                "primary",
-                lumx-base-const("theme", "DARK")
-            );
-        }
-    }
-
-    &__input-indicator {
-        #{$self}--theme-light#{$self}--is-unchecked & {
-            @include lumx-switch-input-indicator("unchecked", lumx-base-const("theme", "LIGHT"));
-        }
-
-        #{$self}--theme-dark#{$self}--is-unchecked & {
-            @include lumx-switch-input-indicator("unchecked", lumx-base-const("theme", "DARK"));
-        }
-
-        #{$self}--theme-light#{$self}--is-checked & {
-            @include lumx-switch-input-indicator("checked", lumx-base-const("theme", "LIGHT"));
-        }
-
-        #{$self}--theme-dark#{$self}--is-checked & {
-            @include lumx-switch-input-indicator("checked", lumx-base-const("theme", "DARK"));
-        }
-    }
-
-    &__content {
-        #{$self}--position-left & {
-            flex: 0 1 auto;
-        }
-
-        #{$self}--position-right & {
-            flex: 1 1 auto;
-        }
-    }
-
-    &__label,
-    &__helper {
-        #{$self}--position-left & {
-            padding-left: $lumx-spacing-unit;
-        }
-
-        #{$self}--position-right & {
-            padding-right: $lumx-spacing-unit;
-        }
-    }
-
-    &__helper {
-        margin-top: math.div($lumx-spacing-unit, 2);
-    }
-}
-
-/* Switch states
-   ========================================================================== */
-
-// Disabled state
-.#{$lumx-base-prefix}-switch--is-disabled {
-    .#{$lumx-base-prefix}-switch__input-native {
-        pointer-events: none;
-    }
-
-    .#{$lumx-base-prefix}-switch__input-placeholder {
-        @include lumx-state-disabled-input;
-    }
-
-    &.#{$lumx-base-prefix}-switch--theme-light {
-        .#{$lumx-base-prefix}-switch__label,
-        .#{$lumx-base-prefix}-switch__helper {
-            @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT"));
-        }
-    }
-
-    &.#{$lumx-base-prefix}-switch--theme-dark {
-        .#{$lumx-base-prefix}-switch__label,
-        .#{$lumx-base-prefix}-switch__helper {
-            @include lumx-state-disabled-text(lumx-base-const("theme", "DARK"));
-        }
-    }
-}
-
-// Hover state
-.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked
-.#{$lumx-base-prefix}-switch__input-native:hover
-+ .#{$lumx-base-prefix}-switch__input-placeholder {
-    .#{$lumx-base-prefix}-switch__input-background {
-        @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
-    }
-}
-
-.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked
-.#{$lumx-base-prefix}-switch__input-native:hover
-+ .#{$lumx-base-prefix}-switch__input-placeholder {
-    .#{$lumx-base-prefix}-switch__input-background {
-        @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light");
-    }
-}
-
-.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked
-.#{$lumx-base-prefix}-switch__input-native:hover
-+ .#{$lumx-base-prefix}-switch__input-placeholder {
-    .#{$lumx-base-prefix}-switch__input-background {
-        @include lumx-state(
-            lumx-base-const("state", "HOVER"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "LIGHT")
-        );
-    }
-}
-
-.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked
-.#{$lumx-base-prefix}-switch__input-native:hover
-+ .#{$lumx-base-prefix}-switch__input-placeholder {
-    .#{$lumx-base-prefix}-switch__input-background {
-        @include lumx-state(
-            lumx-base-const("state", "HOVER"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "DARK")
-        );
-    }
-}
-
-// Active state
-.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked
-.#{$lumx-base-prefix}-switch__input-native:active
-+ .#{$lumx-base-prefix}-switch__input-placeholder {
-    .#{$lumx-base-prefix}-switch__input-background {
-        @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
-    }
-}
-
-.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked
-.#{$lumx-base-prefix}-switch__input-native:active
-+ .#{$lumx-base-prefix}-switch__input-placeholder {
-    .#{$lumx-base-prefix}-switch__input-background {
-        @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light");
-    }
-}
-
-.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked
-.#{$lumx-base-prefix}-switch__input-native:active
-+ .#{$lumx-base-prefix}-switch__input-placeholder {
-    .#{$lumx-base-prefix}-switch__input-background {
-        @include lumx-state(
-            lumx-base-const("state", "ACTIVE"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "LIGHT")
-        );
-    }
-}
-
-.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked
-.#{$lumx-base-prefix}-switch__input-native:active
-+ .#{$lumx-base-prefix}-switch__input-placeholder {
-    .#{$lumx-base-prefix}-switch__input-background {
-        @include lumx-state(
-            lumx-base-const("state", "ACTIVE"),
-            lumx-base-const("emphasis", "HIGH"),
-            "primary",
-            lumx-base-const("theme", "DARK")
-        );
-    }
-}
-
-// Focus state
-.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked
-.#{$lumx-base-prefix}-switch__input-native[data-focus-visible-added]
-+ .#{$lumx-base-prefix}-switch__input-placeholder {
-    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark");
-}
-
-.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked
-.#{$lumx-base-prefix}-switch__input-native[data-focus-visible-added]
-+ .#{$lumx-base-prefix}-switch__input-placeholder {
-    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");
-}
-
-.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked
-.#{$lumx-base-prefix}-switch__input-native[data-focus-visible-added]
-+ .#{$lumx-base-prefix}-switch__input-placeholder {
-    @include lumx-state(
-        lumx-base-const("state", "FOCUS"),
-        lumx-base-const("emphasis", "HIGH"),
-        "primary",
-        lumx-base-const("theme", "LIGHT")
-    );
-}
-
-.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked
-.#{$lumx-base-prefix}-switch__input-native[data-focus-visible-added]
-+ .#{$lumx-base-prefix}-switch__input-placeholder {
-    @include lumx-state(
-        lumx-base-const("state", "FOCUS"),
-        lumx-base-const("emphasis", "HIGH"),
-        "primary",
-        lumx-base-const("theme", "DARK")
-    );
-}