@lumx/core 3.0.7 → 3.1.0

package/src/scss/components/select/_index.scss

@@ -0,0 +1,295 @@
+/* ==========================================================================
+   Select
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-select {
+    $self: &;
+
+    --lumx-text-field-wrapper-padding-vertical:
+        calc(
+            (var(--lumx-text-field-input-min-height) - var(--lumx-material-text-field-input-content-line-height)) / 2
+        );
+
+    padding-top: var(--lumx-material-text-field-padding-top);
+    padding-bottom: var(--lumx-material-text-field-padding-bottom);
+
+    &__header {
+        margin-bottom: var(--lumx-material-text-field-header-wrapper-margin-bottom);
+    }
+
+    &__label {
+        @include lumx-text-field-label;
+
+        #{$self}--theme-light & {
+            @include lumx-text-field-label-color(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("theme", "LIGHT")
+            );
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-text-field-label-color(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "DARK"));
+        }
+    }
+
+    &__wrapper {
+        cursor: pointer;
+
+        #{$self}--theme-light & {
+            @include lumx-text-field-wrapper(lumx-base-const("theme", "LIGHT"));
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-text-field-wrapper(lumx-base-const("theme", "DARK"));
+        }
+    }
+
+    &__input-icon {
+        #{$self}--theme-light & {
+            @include lumx-text-field-input-icon(lumx-base-const("theme", "LIGHT"));
+            @include lumx-text-field-input-content-color(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("theme", "LIGHT")
+            );
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-text-field-input-icon(lumx-base-const("theme", "DARK"));
+            @include lumx-text-field-input-content-color(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("theme", "DARK")
+            );
+        }
+    }
+
+    &__chips {
+        @include lumx-text-field-chips;
+    }
+
+    &__input-native {
+        #{$self}--theme-light & {
+            @include lumx-text-field-input-native(lumx-base-const("theme", "LIGHT"));
+            @include lumx-text-field-input-content-color(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("theme", "LIGHT")
+            );
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-text-field-input-native(lumx-base-const("theme", "DARK"));
+            @include lumx-text-field-input-content-color(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("theme", "DARK")
+            );
+        }
+
+        &--placeholder {
+            #{$self}--theme-light & {
+                @include lumx-text-field-input-placeholder-color(
+                    lumx-base-const("state", "DEFAULT"),
+                    lumx-base-const("theme", "LIGHT")
+                );
+            }
+
+            #{$self}--theme-dark & {
+                @include lumx-text-field-input-placeholder-color(
+                    lumx-base-const("state", "DEFAULT"),
+                    lumx-base-const("theme", "DARK")
+                );
+            }
+        }
+
+        span {
+            display: block;
+            margin: var(--lumx-text-field-wrapper-padding-vertical) 0;
+            word-break: break-word;
+        }
+    }
+
+    &__input-clear {
+        @include lumx-text-field-input-clear;
+    }
+
+    &__input-indicator {
+        #{$self}--theme-light & {
+            @include lumx-select-input-indicator(lumx-base-const("theme", "LIGHT"));
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-select-input-indicator(lumx-base-const("theme", "DARK"));
+        }
+    }
+
+    &__helper {
+        margin-top: $lumx-spacing-unit;
+    }
+
+    &__choices-filter {
+        @include lumx-select-choices-filter;
+
+        i {
+            @include lumx-text-field-input-icon(lumx-base-const("theme", "LIGHT"));
+        }
+
+        input {
+            @include lumx-text-field-input-native(lumx-base-const("theme", "LIGHT"));
+
+            &::placeholder {
+                color: lumx-color-variant("dark", "L2");
+            }
+        }
+    }
+
+    &__choices-loader {
+        @include lumx-select-choices-loader;
+    }
+
+    &__choices-helper {
+        @include lumx-select-choices-helper;
+    }
+}
+
+/* Select states
+   ========================================================================== */
+
+// Disabled state
+.#{$lumx-base-prefix}-select--is-disabled {
+    .#{$lumx-base-prefix}-select__wrapper {
+        @include lumx-state-disabled-input;
+    }
+
+    &.#{$lumx-base-prefix}-select--theme-light {
+        .#{$lumx-base-prefix}-select__label {
+            @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT"));
+        }
+    }
+
+    &.#{$lumx-base-prefix}-select--theme-dark {
+        .#{$lumx-base-prefix}-select__label {
+            @include lumx-state-disabled-text(lumx-base-const("theme", "DARK"));
+        }
+    }
+}
+
+// Hover state
+.#{$lumx-base-prefix}-select--theme-light {
+    .#{$lumx-base-prefix}-select__wrapper:hover {
+        @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT"));
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const("state", "HOVER"),
+            lumx-base-const("theme", "LIGHT")
+        );
+
+        &--placeholder {
+            @include lumx-text-field-input-placeholder-color(
+                lumx-base-const("state", "HOVER"),
+                lumx-base-const("theme", "LIGHT")
+            );
+        }
+    }
+}
+
+.#{$lumx-base-prefix}-select--theme-dark {
+    .#{$lumx-base-prefix}-select__wrapper:hover {
+        @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "DARK"));
+    }
+
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const("state", "HOVER"),
+            lumx-base-const("theme", "DARK")
+        );
+
+        &--placeholder {
+            @include lumx-text-field-input-placeholder-color(
+                lumx-base-const("state", "HOVER"),
+                lumx-base-const("theme", "DARK")
+            );
+        }
+    }
+}
+
+// Focus state
+.#{$lumx-base-prefix}-select--theme-light.#{$lumx-base-prefix}-select--is-open .#{$lumx-base-prefix}-select__wrapper,
+.#{$lumx-base-prefix}-select--theme-light .#{$lumx-base-prefix}-select__wrapper:focus {
+    @include lumx-text-field-wrapper-state(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT"));
+
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const("state", "FOCUS"),
+            lumx-base-const("theme", "LIGHT")
+        );
+
+        &--placeholder {
+            @include lumx-text-field-input-placeholder-color(
+                lumx-base-const("state", "FOCUS"),
+                lumx-base-const("theme", "LIGHT")
+            );
+        }
+    }
+}
+
+.#{$lumx-base-prefix}-select--theme-dark.#{$lumx-base-prefix}-select--is-open .#{$lumx-base-prefix}-select__wrapper,
+.#{$lumx-base-prefix}-select--theme-dark .#{$lumx-base-prefix}-select__wrapper:focus {
+    @include lumx-text-field-wrapper-state(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK"));
+
+    .#{$lumx-base-prefix}-text-field__input-native {
+        @include lumx-text-field-input-content-color(
+            lumx-base-const("state", "FOCUS"),
+            lumx-base-const("theme", "DARK")
+        );
+
+        &--placeholder {
+            @include lumx-text-field-input-placeholder-color(
+                lumx-base-const("state", "FOCUS"),
+                lumx-base-const("theme", "DARK")
+            );
+        }
+    }
+}
+
+/* Select validity
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-select--theme-light.#{$lumx-base-prefix}-select--is-valid {
+    .#{$lumx-base-prefix}-select__wrapper {
+        @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "LIGHT"));
+    }
+
+    .#{$lumx-base-prefix}-select__input-validity {
+        @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "LIGHT"));
+    }
+}
+
+.#{$lumx-base-prefix}-select--theme-light.#{$lumx-base-prefix}-select--has-error {
+    .#{$lumx-base-prefix}-select__wrapper {
+        @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "LIGHT"));
+    }
+
+    .#{$lumx-base-prefix}-select__input-validity {
+        @include lumx-text-field-input-validity("error", lumx-base-const("theme", "LIGHT"));
+    }
+}
+
+.#{$lumx-base-prefix}-select--theme-dark.#{$lumx-base-prefix}-select--is-valid {
+    .#{$lumx-base-prefix}-select__wrapper {
+        @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "DARK"));
+    }
+
+    .#{$lumx-base-prefix}-select__input-validity {
+        @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "DARK"));
+    }
+}
+
+.#{$lumx-base-prefix}-select--theme-dark.#{$lumx-base-prefix}-select--has-error {
+    .#{$lumx-base-prefix}-select__wrapper {
+        @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "DARK"));
+    }
+
+    .#{$lumx-base-prefix}-select__input-validity {
+        @include lumx-text-field-input-validity("error", lumx-base-const("theme", "DARK"));
+    }
+}

package/src/scss/components/select/_mixins.scss

@@ -0,0 +1,36 @@
+@use "sass:math";
+
+@mixin lumx-select-input-indicator($theme) {
+    flex-shrink: 0;
+    margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + ((var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-s)) / 2));
+    margin-left: math.div($lumx-spacing-unit, 2);
+
+    @if $theme == lumx-base-const("theme", "LIGHT") {
+        color: lumx-color-variant("dark", "N");
+    } @else if $theme == lumx-base-const("theme", "DARK") {
+        color: lumx-color-variant("light", "N");
+    }
+}
+
+@mixin lumx-select-choices-filter() {
+    @include lumx-has-divider(lumx-base-const("theme", "LIGHT"));
+
+    display: flex;
+    align-items: center;
+    padding: $lumx-spacing-unit $lumx-spacing-unit * 2;
+}
+
+@mixin lumx-select-choices-loader() {
+    display: flex;
+    justify-content: center;
+    padding: $lumx-spacing-unit * 2 0;
+}
+
+@mixin lumx-select-choices-helper() {
+    @include lumx-typography("body1");
+
+    display: flex;
+    justify-content: center;
+    padding: $lumx-spacing-unit * 2 0;
+    color: lumx-color-variant("dark", "L3");
+}

package/src/scss/components/side-navigation/_index.scss

@@ -0,0 +1,69 @@
+/* ==========================================================================
+   Side navigation
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-side-navigation {
+    @include lumx-list;
+}
+
+/* Item
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-side-navigation-item {
+    $self: &;
+
+    @include lumx-side-navigation-item;
+
+    &__wrapper {
+        @include lumx-side-navigation-wrapper;
+    }
+
+    &__link {
+        @include lumx-side-navigation-link;
+
+        & > i:first-child {
+            @include lumx-side-navigation-link-icon(lumx-base-const("position", "LEFT"));
+        }
+
+        & > i:last-child {
+            @include lumx-side-navigation-link-icon(lumx-base-const("position", "RIGHT"));
+        }
+
+        & > span {
+            #{$self}--emphasis-high & {
+                @include lumx-side-navigation-link-label(lumx-base-const("emphasis", "HIGH"));
+            }
+
+            #{$self}--emphasis-medium & {
+                @include lumx-side-navigation-link-label(lumx-base-const("emphasis", "MEDIUM"));
+            }
+
+            #{$self}--emphasis-low & {
+                @include lumx-side-navigation-link-label(lumx-base-const("emphasis", "LOW"));
+            }
+        }
+    }
+
+    &__toggle {
+        @include lumx-side-navigation-link-toggle;
+    }
+
+    &__children {
+        @include lumx-side-navigation-children;
+    }
+
+    &:not(#{$self}--is-open) #{$self}__children {
+        display: none;
+    }
+}
+
+/* Item link states
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-side-navigation-item .#{$lumx-base-prefix}-side-navigation-item__link {
+    @include lumx-list-item-clickable;
+}
+
+.#{$lumx-base-prefix}-side-navigation-item--is-selected .#{$lumx-base-prefix}-side-navigation-item__link {
+    @include lumx-list-item-selected;
+}

package/src/scss/components/side-navigation/_mixins.scss

@@ -0,0 +1,61 @@
+@use "sass:map";
+
+/**
+ * 1. https://github.com/philipwalton/flexbugs/blob/master/README.md#flexbug-3
+ */
+
+@mixin lumx-side-navigation-item() {
+    display: flex; /* [1] */
+    flex-direction: column; /* [1] */
+}
+
+@mixin lumx-side-navigation-wrapper() {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+@mixin lumx-side-navigation-link() {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: row;
+    align-items: center;
+    min-height: map.get($lumx-sizes, lumx-base-const("size", "M"));
+    padding: 0 $lumx-spacing-unit;
+    text-decoration: none;
+    border-radius: var(--lumx-border-radius);
+    outline: none;
+}
+
+@mixin lumx-side-navigation-link-icon($position) {
+    flex-shrink: 0;
+
+    @if $position == lumx-base-const("position", "LEFT") {
+        margin-right: $lumx-spacing-unit * 2;
+    } @else if $position == lumx-base-const("position", "RIGHT") {
+        margin-left: $lumx-spacing-unit * 2;
+    }
+}
+
+@mixin lumx-side-navigation-link-label($emphasis) {
+    flex: 1 1 auto;
+
+    @if $emphasis == lumx-base-const("emphasis", "HIGH") {
+        @include lumx-typography("title");
+    } @else if $emphasis == lumx-base-const("emphasis", "MEDIUM") {
+        @include lumx-typography("subtitle1");
+    } @else if $emphasis == lumx-base-const("emphasis", "LOW") {
+        @include lumx-typography("body1");
+    }
+}
+
+@mixin lumx-side-navigation-link-toggle() {
+    flex-shrink: 0;
+    margin-left: $lumx-spacing-unit;
+}
+
+@mixin lumx-side-navigation-children() {
+    @include lumx-list;
+
+    margin-left: $lumx-spacing-unit * 4.5;
+}

package/src/scss/components/skeleton/_index.scss

@@ -0,0 +1,143 @@
+@use "sass:map";
+@use "sass:math";
+
+/* ==========================================================================
+   Skeleton
+   ========================================================================== */
+
+@keyframes skeleton-loading {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+/* Circle
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-skeleton-circle {
+    border-radius: 50%;
+
+    &--theme-light {
+        @include lumx-skeleton("light");
+    }
+
+    &--theme-dark {
+        @include lumx-skeleton("dark");
+    }
+}
+
+@each $key, $size in $lumx-sizes {
+    .#{$lumx-base-prefix}-skeleton-circle--size-#{$key} {
+        width: map.get($lumx-sizes, $key);
+        height: map.get($lumx-sizes, $key);
+    }
+}
+
+@each $key, $color in $lumx-color-palette {
+    .#{$lumx-base-prefix}-skeleton-circle--color-#{$key} {
+        background-color: lumx-color-variant($key, "L5");
+    }
+}
+
+/* Rectangle
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-skeleton-rectangle {
+    &--variant-rounded {
+        border-radius: var(--lumx-border-radius);
+    }
+
+    &--theme-light {
+        @include lumx-skeleton("light");
+    }
+
+    &--theme-dark {
+        @include lumx-skeleton("dark");
+    }
+}
+
+@each $key, $size in $lumx-sizes {
+    .#{$lumx-base-prefix}-skeleton-rectangle--width-#{$key} {
+        width: map.get($lumx-sizes, $key);
+    }
+
+    .#{$lumx-base-prefix}-skeleton-rectangle--height-#{$key} {
+        height: map.get($lumx-sizes, $key);
+    }
+
+    .#{$lumx-base-prefix}-skeleton-rectangle--variant-pill.#{$lumx-base-prefix}-skeleton-rectangle--height-#{$key} {
+        border-radius: math.div(map.get($lumx-sizes, $key), 2);
+    }
+}
+
+@each $key, $aspect-ratio in $lumx-thumbnail-aspect-ratio {
+    .#{$lumx-base-prefix}-skeleton-rectangle--aspect-ratio-#{$key} .#{$lumx-base-prefix}-skeleton-rectangle__inner {
+        padding-top: $aspect-ratio;
+    }
+}
+
+@each $key, $color in $lumx-color-palette {
+    .#{$lumx-base-prefix}-skeleton-rectangle--color-#{$key} {
+        background-color: lumx-color-variant($key, "L5");
+    }
+}
+
+/* Typography
+   ========================================================================== */
+
+$typography-skeleton-size: (
+    "display1": 24px,
+    "headline": 20px,
+    "title": 14px,
+    "subtitle2": 12px,
+    "subtitle1": 10px,
+    "body2": 12px,
+    "body1": 10px,
+    "caption": 8px,
+    "overline": 8px,
+);
+
+.#{$lumx-base-prefix}-skeleton-typography {
+    $self: &;
+
+    display: flex;
+    align-items: center;
+
+    &__inner {
+        width: 100%;
+        border-radius: var(--lumx-border-radius);
+        animation: skeleton-loading 1s ease-in-out 0s infinite;
+
+        #{$self}--theme-light & {
+            background-color: lumx-color-variant("dark", "L5");
+        }
+
+        #{$self}--theme-dark & {
+            background-color: lumx-color-variant("light", "L5");
+        }
+    }
+}
+
+@each $key, $style in $lumx-typography-interface {
+    .#{$lumx-base-prefix}-skeleton-typography--typography-#{$key} {
+        height: map.get(map.get($lumx-typography-interface, $key), "line-height");
+    }
+
+    .#{$lumx-base-prefix}-skeleton-typography--typography-#{$key} .#{$lumx-base-prefix}-skeleton-typography__inner {
+        height: map.get($typography-skeleton-size, $key);
+    }
+}
+
+@each $key, $color in $lumx-color-palette {
+    .#{$lumx-base-prefix}-skeleton-typography--color-#{$key} .#{$lumx-base-prefix}-skeleton-typography__inner {
+        background-color: lumx-color-variant($key, "L5");
+    }
+}

package/src/scss/components/skeleton/_mixins.scss

@@ -0,0 +1,9 @@
+@mixin lumx-skeleton($theme: "light") {
+    animation: skeleton-loading 1s ease-in-out 0s infinite;
+
+    @if $theme == "light" {
+        background-color: lumx-color-variant("dark", "L5");
+    } @else {
+        background-color: lumx-color-variant("light", "L5");
+    }
+}