@lumx/core 3.1.0 → 3.1.2

package/src/scss/components/date-picker/_index.scss

@@ -1,67 +0,0 @@
-@use "sass:map";
-@use "sass:string";
-@use "sass:math";
-
-/* ==========================================================================
-   Date picker
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-date-picker {
-    &__month {
-        @include lumx-typography("subtitle1");
-
-        display: block;
-        text-align: center;
-    }
-
-    &__calendar {
-        padding: $lumx-spacing-unit * 2;
-        padding-top: 0;
-    }
-
-    &__days-wrapper {
-        display: flex;
-        flex-wrap: wrap;
-        width: map.get($lumx-sizes, lumx-base-const("size", "M")) * 7;
-    }
-
-    &__day-wrapper {
-        display: flex;
-        flex: string.unquote("0 0 #{math.div(100, 7) + "%"}");
-        align-items: center;
-        justify-content: center;
-        max-width: #{math.div(100, 7) + "%"};
-        height: map.get($lumx-sizes, lumx-base-const("size", "M"));
-    }
-
-    &__week-day {
-        @include lumx-typography("body1");
-
-        display: block;
-        color: lumx-color-variant("dark", "L2");
-    }
-
-    &__month-day {
-        @include lumx-state-transition;
-        @include lumx-button-base;
-        @include lumx-button-color(lumx-base-const("emphasis", "LOW"), "dark");
-
-        width: map.get($lumx-sizes, lumx-base-const("size", "M"));
-        height: map.get($lumx-sizes, lumx-base-const("size", "M"));
-        line-height: map.get($lumx-sizes, lumx-base-const("size", "M"));
-        text-align: center;
-        border-radius: 50%;
-
-        span {
-            @include lumx-typography("body1");
-        }
-
-        &--is-today span {
-            font-weight: var(--lumx-button-font-weight);
-        }
-
-        &--is-selected {
-            @include lumx-button-is-selected(lumx-base-const("theme", "LIGHT"));
-        }
-    }
-}

package/src/scss/components/dialog/_index.scss

@@ -1,169 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-
-/* ==========================================================================
-   Dialog
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-dialog {
-    $self: &;
-
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: map.get($lumx-base-layers, "high");
-    display: none;
-    opacity: 1;
-    transition: opacity $lumx-dialog-transition-duration;
-
-    @media (prefers-reduced-motion: reduce) {
-        transition: none;
-    }
-
-    &--is-shown {
-        display: block;
-    }
-
-    &--is-hidden {
-        opacity: 0;
-    }
-
-    &__overlay {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 1;
-        background-color: lumx-color-variant("dark", "L1");
-        animation: lumx-dialog-overlay-show $lumx-dialog-transition-duration;
-
-        @media (prefers-reduced-motion: reduce) {
-            animation: none;
-        }
-    }
-
-    &__container {
-        position: absolute;
-        z-index: 2;
-        display: flex;
-        flex-direction: column;
-        transform: translateY(0);
-        animation: lumx-dialog-show $lumx-dialog-transition-duration;
-
-        @media (prefers-reduced-motion: reduce) {
-            animation: none;
-        }
-    }
-
-    &__wrapper {
-        @include lumx-elevation(5);
-
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        max-height: 100%;
-        background-color: lumx-color-variant("light", "N");
-        border-radius: var(--lumx-border-radius);
-
-        #{$self}--size-huge & {
-            height: 100%;
-        }
-    }
-
-    &__header,
-    &__footer {
-        flex-shrink: 0;
-    }
-
-    &__header--has-divider {
-        @include lumx-has-divider(lumx-base-const("theme", "LIGHT"), lumx-base-const("position", "BOTTOM"));
-    }
-
-    &__footer--has-divider {
-        @include lumx-has-divider(lumx-base-const("theme", "LIGHT"), lumx-base-const("position", "TOP"));
-    }
-
-    &__content {
-        position: relative;
-        flex: 1 1 auto;
-        overflow-x: hidden;
-        overflow-y: auto;
-    }
-
-    &__progress-overlay {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: map.get($lumx-base-layers, "high");
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: lumx-color-variant("light", "L2");
-        border-radius: var(--lumx-border-radius);
-    }
-}
-
-@keyframes lumx-dialog-overlay-show {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes lumx-dialog-show {
-    0% {
-        opacity: 0;
-        transform: translateY(-24px);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Dialog sizes
-   ========================================================================== */
-
-@each $key, $size in $lumx-dialog-sizes {
-    .#{$lumx-base-prefix}-dialog--size-#{$key} .#{$lumx-base-prefix}-dialog__container {
-        @include mq($until: desktop) {
-            top: $lumx-dialog-offset-portable;
-            right: $lumx-dialog-offset-portable;
-            left: $lumx-dialog-offset-portable;
-            height: calc(100% - 48px);
-        }
-
-        @include mq($from: desktop) {
-            top: $lumx-dialog-offset-desktop;
-            left: 50%;
-            width: $size;
-            height: calc(100% - 96px);
-            margin-left: math.div($size, -2);
-        }
-    }
-}
-
-.#{$lumx-base-prefix}-dialog--size-huge .#{$lumx-base-prefix}-dialog__container {
-    @include mq($until: desktop) {
-        top: $lumx-dialog-offset-portable;
-        right: $lumx-dialog-offset-portable;
-        bottom: $lumx-dialog-offset-portable;
-        left: $lumx-dialog-offset-portable;
-    }
-
-    @include mq($from: desktop) {
-        top: $lumx-dialog-offset-desktop;
-        right: $lumx-dialog-offset-desktop;
-        bottom: $lumx-dialog-offset-desktop;
-        left: $lumx-dialog-offset-desktop;
-    }
-}

package/src/scss/components/dialog/_variables.scss

@@ -1,8 +0,0 @@
-$lumx-dialog-sizes: (
-    "tiny": 400px,
-    "regular": 600px,
-    "big": 800px,
-);
-$lumx-dialog-offset-desktop: 48px;
-$lumx-dialog-offset-portable: 24px;
-$lumx-dialog-transition-duration: 400ms;

package/src/scss/components/divider/_index.scss

@@ -1,39 +0,0 @@
-/* ==========================================================================
-   Divider
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-divider {
-    &--theme-light {
-        @include lumx-divider(lumx-base-const("theme", "LIGHT"));
-    }
-
-    &--theme-dark {
-        @include lumx-divider(lumx-base-const("theme", "DARK"));
-    }
-}
-
-.#{$lumx-base-prefix}-has-divider {
-    @include lumx-has-divider;
-
-    &--theme-light {
-        @include lumx-divider-color(lumx-base-const("theme", "LIGHT"));
-    }
-
-    &--theme-dark {
-        @include lumx-divider-color(lumx-base-const("theme", "DARK"));
-    }
-}
-
-@each $key, $positon in $lumx-divider-positions {
-    .#{$lumx-base-prefix}-has-divider.#{$lumx-base-prefix}-has-divider--position-#{$key} {
-        @include lumx-divider-position($positon);
-
-        &--theme-light {
-            @include lumx-divider-color(lumx-base-const("theme", "LIGHT"), $positon);
-        }
-
-        &--theme-dark {
-            @include lumx-divider-color(lumx-base-const("theme", "DARK"), $positon);
-        }
-    }
-}

package/src/scss/components/divider/_mixins.scss

@@ -1,60 +0,0 @@
-@mixin lumx-divider($theme) {
-    height: 1px;
-    margin: 0;
-    border: none;
-
-    @if $theme == lumx-base-const("theme", "LIGHT") {
-        background-color: lumx-color-variant("dark", $lumx-divider-color-variant);
-    } @else if $theme == lumx-base-const("theme", "DARK") {
-        background-color: lumx-color-variant("light", $lumx-divider-color-variant);
-    }
-}
-
-@mixin lumx-divider-color($theme, $position: lumx-base-const("position", "BOTTOM")) {
-    @if $position == lumx-base-const("position", "TOP") {
-        @if $theme == lumx-base-const("theme", "LIGHT") {
-            border-top-color: lumx-color-variant("dark", $lumx-divider-color-variant);
-        } @else if $theme == lumx-base-const("theme", "DARK") {
-            border-top-color: lumx-color-variant("light", $lumx-divider-color-variant);
-        }
-    } @else if $position == lumx-base-const("position", "RIGHT") {
-        @if $theme == lumx-base-const("theme", "LIGHT") {
-            border-right-color: lumx-color-variant("dark", $lumx-divider-color-variant);
-        } @else if $theme == lumx-base-const("theme", "DARK") {
-            border-right-color: lumx-color-variant("light", $lumx-divider-color-variant);
-        }
-    } @else if $position == lumx-base-const("position", "BOTTOM") {
-        @if $theme == lumx-base-const("theme", "LIGHT") {
-            border-bottom-color: lumx-color-variant("dark", $lumx-divider-color-variant);
-        } @else if $theme == lumx-base-const("theme", "DARK") {
-            border-bottom-color: lumx-color-variant("light", $lumx-divider-color-variant);
-        }
-    } @else if $position == lumx-base-const("position", "LEFT") {
-        @if $theme == lumx-base-const("theme", "LIGHT") {
-            border-left-color: lumx-color-variant("dark", $lumx-divider-color-variant);
-        } @else if $theme == lumx-base-const("theme", "DARK") {
-            border-left-color: lumx-color-variant("light", $lumx-divider-color-variant);
-        }
-    }
-}
-
-@mixin lumx-divider-position($position) {
-    @if $position == lumx-base-const("position", "TOP") {
-        border-top-style: solid;
-        border-top-width: 1px;
-    } @else if $position == lumx-base-const("position", "RIGHT") {
-        border-right-style: solid;
-        border-right-width: 1px;
-    } @else if $position == lumx-base-const("position", "BOTTOM") {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-    } @else if $position == lumx-base-const("position", "LEFT") {
-        border-left-style: solid;
-        border-left-width: 1px;
-    }
-}
-
-@mixin lumx-has-divider($theme: lumx-base-const("theme", "LIGHT"), $position: lumx-base-const("position", "BOTTOM")) {
-    @include lumx-divider-color($theme, $position);
-    @include lumx-divider-position($position);
-}

package/src/scss/components/divider/_variables.scss

@@ -1,7 +0,0 @@
-$lumx-divider-color-variant: "L5";
-$lumx-divider-positions: (
-    "top": lumx-base-const("position", "TOP"),
-    "right": lumx-base-const("position", "RIGHT"),
-    "bottom": lumx-base-const("position", "BOTTOM"),
-    "left": lumx-base-const("position", "LEFT"),
-);

package/src/scss/components/drag-handle/_index.scss

@@ -1,7 +0,0 @@
-/* ==========================================================================
-   Drag handle
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-drag-handle {
-    cursor: move;
-}

package/src/scss/components/dropdown/_index.scss

@@ -1,22 +0,0 @@
-@use "sass:map";
-
-/* ==========================================================================
-   Dropdown
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-dropdown {
-    z-index: map.get($lumx-base-layers, "high");
-
-    &--has-toggle {
-        display: inline-block;
-        vertical-align: top;
-    }
-
-    &__menu {
-        @include lumx-elevation(3);
-
-        overflow: auto;
-        background-color: lumx-color-variant("light", "N");
-        border-radius: var(--lumx-border-radius);
-    }
-}

package/src/scss/components/expansion-panel/_index.scss

@@ -1,80 +0,0 @@
-/* ==========================================================================
-   Expansion panel
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-expansion-panel {
-    $self: &;
-
-    border-radius: $lumx-expansion-panel-radius;
-
-    &--has-background {
-        &#{$self}--theme-light {
-            background-color: lumx-color-variant("dark", "L6");
-        }
-
-        &#{$self}--theme-dark {
-            background-color: lumx-color-variant("light", "L6");
-        }
-    }
-
-    &__header {
-        display: flex;
-        align-items: center;
-
-        #{$self}--theme-light#{$self}--is-open#{$self}--has-header-divider & {
-            @include lumx-has-divider(lumx-base-const("theme", "LIGHT"));
-        }
-
-        #{$self}--theme-dark#{$self}--is-open#{$self}--has-header-divider & {
-            @include lumx-has-divider(lumx-base-const("theme", "DARK"));
-        }
-    }
-
-    &__header-drag {
-        flex-shrink: 0;
-        margin: 0 $lumx-spacing-unit;
-    }
-
-    &__header-content {
-        flex: 1 1 auto;
-
-        #{$self}--has-background:not(#{$self}--is-draggable):not(#{$self}--has-header) & {
-            padding-left: $lumx-spacing-unit * 2;
-        }
-    }
-
-    &__label {
-        @include lumx-typography("body1");
-
-        display: block;
-
-        #{$self}--theme-dark & {
-            color: lumx-color-variant("light", "N");
-        }
-    }
-
-    &__header-toggle {
-        flex-shrink: 0;
-
-        #{$self}--has-background & {
-            margin: $lumx-spacing-unit;
-        }
-
-        #{$self}--has-header & {
-            margin-left: 0;
-        }
-    }
-
-    &__wrapper {
-        overflow: hidden;
-        transition: max-height $lumx-expansion-panel-transition-duration;
-
-        @media (prefers-reduced-motion: reduce) {
-            transition: none;
-        }
-
-        #{$self}--is-close & {
-            max-height: 0 !important;
-        }
-    }
-}

package/src/scss/components/expansion-panel/_variables.scss

@@ -1,2 +0,0 @@
-$lumx-expansion-panel-radius: 2px;
-$lumx-expansion-panel-transition-duration: 400ms;

package/src/scss/components/flag/_index.scss

@@ -1,41 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-
-/* ==========================================================================
-   Flag
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-flag {
-    display: inline-flex;
-    align-items: center;
-    height: map.get($lumx-sizes, lumx-base-const("size", "XS"));
-    padding: 0 $lumx-spacing-unit;
-    margin: 0;
-    border-radius: math.div(map.get($lumx-sizes, lumx-base-const("size", "XS")), 2);
-
-    &__icon {
-        margin-right: $lumx-spacing-unit-tiny;
-    }
-
-    &__label {
-        @include lumx-typography("overline");
-    }
-}
-
-/* Flag colors
-   ========================================================================== */
-
-@each $key, $color in $lumx-color-palette {
-    .#{$lumx-base-prefix}-flag--color-#{$key} {
-        border: 2px solid lumx-color-variant($key, "L4");
-
-        .#{$lumx-base-prefix}-flag__label,
-        .#{$lumx-base-prefix}-flag__icon {
-            @if $key == "dark" or $key == "yellow" {
-                color: lumx-color-variant("dark", "L1");
-            } @else {
-                color: lumx-color-variant($key, "N");
-            }
-        }
-    }
-}

package/src/scss/components/flex-box/_index.scss

@@ -1,132 +0,0 @@
-/* ==========================================================================
-   Flex-box
-   ========================================================================== */
-
-/* Orientation
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-flex-box--orientation-horizontal,
-.#{$lumx-base-prefix}-flex-box--orientation-vertical {
-    display: flex;
-}
-
-.#{$lumx-base-prefix}-flex-box--orientation-horizontal {
-    flex-direction: row;
-}
-
-.#{$lumx-base-prefix}-flex-box--orientation-vertical {
-    flex-direction: column;
-    min-height: 0;
-}
-
-/* Alignment
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--h-align-top,
-.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--v-align-left {
-    align-items: flex-start;
-}
-
-.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--h-align-center,
-.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--v-align-center {
-    align-items: center;
-}
-
-.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--h-align-bottom,
-.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--v-align-right {
-    align-items: flex-end;
-}
-
-.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-left,
-.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-top {
-    justify-content: flex-start;
-}
-
-.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-center,
-.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-center {
-    justify-content: center;
-}
-
-.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-right,
-.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-bottom {
-    justify-content: flex-end;
-}
-
-.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-space-between,
-.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-space-between {
-    justify-content: space-between;
-}
-
-.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-space-around, 
-.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-space-around {
-    justify-content: space-around;
-}
-
-.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-space-evenly,
-.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-space-evenly
- {
-    justify-content: space-evenly;
-}
-
-/* Wrap
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-flex-box--wrap {
-    flex-wrap: wrap;
-}
-
-/* Fill space
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-flex-box--fill-space {
-    flex: 1 1 auto;
-}
-
-/* No shrink
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-flex-box--no-shrink {
-    flex-shrink: 0;
-}
-
-/* Margin
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-flex-box--margin-auto-top {
-    margin-top: auto;
-}
-
-.#{$lumx-base-prefix}-flex-box--margin-auto-right {
-    margin-right: auto;
-}
-
-.#{$lumx-base-prefix}-flex-box--margin-auto-bottom {
-    margin-bottom: auto;
-}
-
-.#{$lumx-base-prefix}-flex-box--margin-auto-left {
-    margin-left: auto;
-}
-
-/* Gap
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-flex-box--gap-tiny {
-    gap: $lumx-spacing-unit-tiny;
-}
-
-.#{$lumx-base-prefix}-flex-box--gap-regular {
-    gap: $lumx-spacing-unit;
-}
-
-.#{$lumx-base-prefix}-flex-box--gap-medium {
-    gap: $lumx-spacing-unit-medium;
-}
-
-.#{$lumx-base-prefix}-flex-box--gap-big {
-    gap: $lumx-spacing-unit-big;
-}
-
-.#{$lumx-base-prefix}-flex-box--gap-huge {
-    gap: $lumx-spacing-unit-huge;
-}

package/src/scss/components/generic-block/_index.scss

@@ -1,11 +0,0 @@
-/* ==========================================================================
-   Generic Block
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-generic-block {
-    &__content {
-        // Prevent blocks in content from overflowing
-        overflow: clip;
-        max-width: 100%;
-    }
-}