@lumx/core 3.0.7 → 3.1.0

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

@@ -0,0 +1,67 @@
+@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

@@ -0,0 +1,169 @@
+@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

@@ -0,0 +1,8 @@
+$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

@@ -0,0 +1,39 @@
+/* ==========================================================================
+   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

@@ -0,0 +1,60 @@
+@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

@@ -0,0 +1,7 @@
+$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

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

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

@@ -0,0 +1,22 @@
+@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

@@ -0,0 +1,80 @@
+/* ==========================================================================
+   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

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

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

@@ -0,0 +1,41 @@
+@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

@@ -0,0 +1,132 @@
+/* ==========================================================================
+   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

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