@lumx/core 3.0.7 → 3.1.0

package/src/scss/components/switch/_mixins.scss

@@ -0,0 +1,77 @@
+@mixin lumx-switch-input-wrapper() {
+    position: relative;
+    width: var(--lumx-material-switch-wrapper-width);
+    height: var(--lumx-material-switch-wrapper-height);
+}
+
+@mixin lumx-switch-input-native() {
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 4;
+    width: var(--lumx-material-switch-wrapper-width);
+    height: var(--lumx-material-switch-wrapper-height);
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+}
+
+@mixin lumx-switch-placeholder() {
+    position: absolute;
+    top: calc((var(--lumx-material-switch-wrapper-height) - var(--lumx-material-switch-control-height)) / 2);
+    left: 0;
+    z-index: 1;
+    width: var(--lumx-material-switch-control-width);
+    height: var(--lumx-material-switch-control-height);
+    border-radius: calc(var(--lumx-material-switch-control-height) / 2);
+}
+
+@mixin lumx-switch-input-background($status) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    border-radius: calc(var(--lumx-material-switch-control-height) / 2);
+
+    @if $status == "unchecked" {
+        border-style: solid;
+        border-width: 2px;
+    }
+}
+
+@mixin lumx-switch-input-indicator($status, $theme) {
+    position: absolute;
+    top: calc((var(--lumx-material-switch-control-height) - var(--lumx-material-switch-indicator-size)) / 2);
+    z-index: 3;
+    width: var(--lumx-material-switch-indicator-size);
+    height: var(--lumx-material-switch-indicator-size);
+    border-radius: calc(var(--lumx-material-switch-indicator-size) / 2);
+
+    @if $status == "checked" {
+        right: var(--lumx-material-switch-indicator-offset);
+
+        @if $theme == lumx-base-const("theme", "LIGHT") {
+            background-color: lumx-color-variant("light", "N");
+        } @else if $theme == lumx-base-const("theme", "DARK") {
+            background-color: lumx-color-variant("primary", "N");
+        }
+    } @else if $status == "unchecked" {
+        left: var(--lumx-material-switch-indicator-offset);
+
+        @if $theme == lumx-base-const("theme", "LIGHT") {
+            background-color: lumx-color-variant("dark", "N");
+        } @else if $theme == lumx-base-const("theme", "DARK") {
+            background-color: lumx-color-variant("light", "N");
+        }
+    }
+}
+
+@mixin lumx-switch-input-indicator-disabled($theme) {
+    @if $theme == lumx-base-const("theme", "LIGHT") {
+        background-color: lumx-color-variant("dark", "L3");
+    } @else if $theme == lumx-base-const("theme", "DARK") {
+        background-color: lumx-color-variant("light", "L3");
+    }
+}

package/src/scss/components/table/_index.scss

@@ -0,0 +1,138 @@
+/* ==========================================================================
+   Data table
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-table {
+    $self: &;
+
+    @include lumx-table;
+
+    &__row {
+        @include lumx-table-row;
+
+        #{$self}--theme-light#{$self}--has-dividers & {
+            @include lumx-has-divider(lumx-base-const("theme", "LIGHT"));
+        }
+
+        #{$self}--theme-dark#{$self}--has-dividers & {
+            @include lumx-has-divider(lumx-base-const("theme", "DARK"));
+        }
+
+        #{$self}--has-dividers &:last-child {
+            border-bottom: none;
+        }
+
+        &--is-selected {
+            #{$self}--theme-light & {
+                @include lumx-table-row-is-selected(lumx-base-const("theme", "LIGHT"));
+            }
+
+            #{$self}--theme-dark & {
+                @include lumx-table-row-is-selected(lumx-base-const("theme", "DARK"));
+            }
+        }
+    }
+
+    &__cell {
+        &--head {
+            #{$self}--theme-light & {
+                @include lumx-table-cell("head", lumx-base-const("theme", "LIGHT"));
+            }
+
+            #{$self}--theme-dark & {
+                @include lumx-table-cell("head", lumx-base-const("theme", "DARK"));
+            }
+        }
+
+        &--body {
+            #{$self}--theme-light & {
+                @include lumx-table-cell("body", lumx-base-const("theme", "LIGHT"));
+            }
+
+            #{$self}--theme-dark & {
+                @include lumx-table-cell("body", lumx-base-const("theme", "DARK"));
+            }
+        }
+
+        &:first-child {
+            padding-left: $lumx-spacing-unit * 3;
+        }
+
+        #{$self}--has-before &:first-child {
+            @include lumx-table-cell-before;
+        }
+
+        &--is-sortable {
+            cursor: pointer;
+        }
+
+        &--is-sorted {
+            #{$self}--theme-light & {
+                @include lumx-table-cell-is-sorted(lumx-base-const("theme", "LIGHT"));
+            }
+
+            #{$self}--theme-dark & {
+                @include lumx-table-cell-is-sorted(lumx-base-const("theme", "DARK"));
+            }
+        }
+    }
+
+    &__row--is-disabled &__cell {
+        pointer-events: none;
+        opacity: 0.5;
+    }
+
+    &__cell-wrapper {
+        @include lumx-table-cell-wrapper;
+
+        #{$self}--has-before #{$self}__cell--head:first-child & {
+            @include lumx-table-cell-content-before;
+        }
+    }
+
+    &__cell-icon {
+        @include lumx-table-cell-icon;
+    }
+
+    &__cell-content {
+        #{$self}__cell--head & {
+            @include lumx-table-cell-content("head");
+        }
+
+        #{$self}__cell--body & {
+            @include lumx-table-cell-content("body");
+        }
+
+        #{$self}--has-before #{$self}__cell--body:first-child & {
+            @include lumx-table-cell-content-before;
+        }
+
+        #{$self}__cell--is-sortable:hover &,
+        #{$self}__cell--is-sortable[data-focus-visible-added] & {
+            text-decoration: underline;
+        }
+    }
+}
+
+/* Clickable row
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-table__row--is-clickable:not(.#{$lumx-base-prefix}-table__row--is-selected) {
+    .#{$lumx-base-prefix}-table--theme-light & {
+        @include lumx-table-row-is-clickable(lumx-base-const("theme", "LIGHT"), false);
+    }
+
+    .#{$lumx-base-prefix}-table--theme-dark & {
+        @include lumx-table-row-is-clickable(lumx-base-const("theme", "DARK"), false);
+    }
+}
+
+.#{$lumx-base-prefix}-table__row--is-clickable.#{$lumx-base-prefix}-table__row--is-selected {
+    .#{$lumx-base-prefix}-table--theme-light & {
+        @include lumx-table-row-is-clickable(lumx-base-const("theme", "LIGHT"), true);
+    }
+
+    .#{$lumx-base-prefix}-table--theme-dark & {
+        @include lumx-table-row-is-clickable(lumx-base-const("theme", "DARK"), true);
+    }
+}

package/src/scss/components/table/_mixins.scss

@@ -0,0 +1,115 @@
+@use "sass:math";
+
+@mixin lumx-table() {
+    width: 100%;
+    margin: 0;
+    table-layout: fixed;
+}
+
+@mixin lumx-table-row() {
+    outline: none;
+}
+
+@mixin lumx-table-row-is-clickable($theme, $is-selected) {
+    &:hover {
+        @if $theme == lumx-base-const("theme", "LIGHT") {
+            @if $is-selected == true {
+                background-color: lumx-color-variant("dark", "L5");
+            } @else {
+                background-color: lumx-color-variant("dark", "L6");
+            }
+        } @else if $theme == lumx-base-const("theme", "DARK") {
+            @if $is-selected == true {
+                background-color: lumx-color-variant("light", "L5");
+            } @else {
+                background-color: lumx-color-variant("light", "L6");
+            }
+        }
+    }
+
+    &[data-focus-visible-added] {
+        @if $theme == lumx-base-const("theme", "LIGHT") {
+            @include lumx-state(
+                lumx-base-const("state", "FOCUS"),
+                lumx-base-const("emphasis", "LOW"),
+                "dark"
+            );
+        } @else if $theme == lumx-base-const("theme", "DARK") {
+            @include lumx-state(
+                lumx-base-const("state", "FOCUS"),
+                lumx-base-const("emphasis", "LOW"),
+                "light"
+            );
+        }
+    }
+}
+
+@mixin lumx-table-row-is-selected($theme) {
+    @if $theme == lumx-base-const("theme", "LIGHT") {
+        background-color: lumx-color-variant("dark", "L6");
+    } @else if $theme == lumx-base-const("theme", "DARK") {
+        background-color: lumx-color-variant("light", "L6");
+    }
+}
+
+@mixin lumx-table-cell($variant, $theme) {
+    height: 56px;
+    padding: $lumx-spacing-unit $lumx-spacing-unit * 3 $lumx-spacing-unit 0;
+    text-align: left;
+    outline: none;
+
+    @if $variant == "head" {
+        @include lumx-has-divider($theme);
+
+        @if $theme == lumx-base-const("theme", "LIGHT") {
+            color: lumx-color-variant("dark", "L2");
+        } @else if $theme == lumx-base-const("theme", "DARK") {
+            color: lumx-color-variant("light", "L2");
+        }
+    } @else if $variant == "body" {
+        @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-table-cell-before() {
+    width: 68px;
+    padding: 0;
+}
+
+@mixin lumx-table-cell-is-sorted($theme) {
+    @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-table-cell-wrapper() {
+    display: flex;
+    align-items: flex-start;
+}
+
+@mixin lumx-table-cell-icon() {
+    margin-top: 1px;
+    margin-right: math.div($lumx-spacing-unit, 2);
+}
+
+@mixin lumx-table-cell-content($variant) {
+    hyphens: auto;
+    word-break: break-word;
+
+    @if $variant == "head" {
+        @include lumx-typography("caption");
+    } @else if $variant == "body" {
+        @include lumx-typography("body1");
+    }
+}
+
+@mixin lumx-table-cell-content-before() {
+    display: flex;
+    justify-content: center;
+}

package/src/scss/components/tabs/_index.scss

@@ -0,0 +1,111 @@
+/* ==========================================================================
+   Tabs
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-tabs {
+    $self: &;
+
+    &__links {
+        #{$self}--theme-light & {
+            @include lumx-tabs-links;
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-tabs-links;
+        }
+    }
+
+    &__link {
+        &:not(&--is-active) {
+            @include lumx-tabs-link(lumx-base-const("emphasis", "LOW"));
+
+            #{$self}--theme-light & {
+                @include lumx-tabs-link-color(lumx-base-const("emphasis", "LOW"), lumx-base-const("theme", "LIGHT"));
+            }
+
+            #{$self}--theme-dark & {
+                @include lumx-tabs-link-color(lumx-base-const("emphasis", "LOW"), lumx-base-const("theme", "DARK"));
+            }
+        }
+
+        &--is-active {
+            @include lumx-tabs-link(lumx-base-const("emphasis", "SELECTED"));
+
+            #{$self}--theme-light & {
+                @include lumx-tabs-link-color(
+                    lumx-base-const("emphasis", "SELECTED"),
+                    lumx-base-const("theme", "LIGHT")
+                );
+            }
+
+            #{$self}--theme-dark & {
+                @include lumx-tabs-link-color(
+                    lumx-base-const("emphasis", "SELECTED"),
+                    lumx-base-const("theme", "DARK")
+                );
+            }
+        }
+    }
+}
+
+/* Tabs layout
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-tabs--layout-fixed {
+    .#{$lumx-base-prefix}-tabs__link {
+        @include lumx-tabs-link-layout("fixed");
+    }
+}
+
+/* Tabs position
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-tabs--layout-clustered.#{$lumx-base-prefix}-tabs--position-left {
+    .#{$lumx-base-prefix}-tabs__links {
+        @include lumx-tabs-links-position(lumx-base-const("position", "LEFT"));
+    }
+}
+
+.#{$lumx-base-prefix}-tabs--layout-clustered.#{$lumx-base-prefix}-tabs--position-center {
+    .#{$lumx-base-prefix}-tabs__links {
+        @include lumx-tabs-links-position(lumx-base-const("position", "CENTER"));
+    }
+}
+
+.#{$lumx-base-prefix}-tabs--layout-clustered.#{$lumx-base-prefix}-tabs--position-right {
+    .#{$lumx-base-prefix}-tabs__links {
+        @include lumx-tabs-links-position(lumx-base-const("position", "RIGHT"));
+    }
+}
+
+/* Tabs link states
+   ========================================================================== */
+
+// Disabled state
+.#{$lumx-base-prefix}-tabs__link--is-disabled {
+    .#{$lumx-base-prefix}-tabs--theme-light & {
+        @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT"));
+    }
+
+    .#{$lumx-base-prefix}-tabs--theme-dark & {
+        @include lumx-state-disabled-text(lumx-base-const("theme", "DARK"));
+    }
+}
+
+/* Tab panel
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-tab-panel {
+    display: none;
+    outline: none;
+
+    // Focus state
+    &[data-focus-visible-added] {
+        @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark");
+    }
+
+    // Active state
+    &--is-active {
+        display: block;
+    }
+}

package/src/scss/components/tabs/_mixins.scss

@@ -0,0 +1,104 @@
+@mixin lumx-tabs-links() {
+    position: relative;
+    display: flex;
+}
+
+@mixin lumx-tabs-links-position($position) {
+    @if $position == lumx-base-const("position", "LEFT") {
+        justify-content: flex-start;
+    } @else if $position == lumx-base-const("position", "CENTER") {
+        justify-content: center;
+    } @else if $position == lumx-base-const("position", "RIGHT") {
+        justify-content: flex-end;
+    }
+}
+
+@mixin lumx-tabs-link($emphasis) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--lumx-tabs-link-height);
+    padding: 0 $lumx-spacing-unit * 3;
+    cursor: pointer;
+    border: none;
+    border-radius: var(--lumx-tabs-link-border-radius);
+    outline: none;
+    transition-duration: $lumx-state-transition-duration;
+    transition-property: border-radius, background-color, color;
+
+    &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+        content: "";
+        border-style: solid;
+        border-width: var(--lumx-tabs-link-#{$emphasis}-state-default-border-top-width) var(--lumx-tabs-link-#{$emphasis}-state-default-border-right-width) var(--lumx-tabs-link-#{$emphasis}-state-default-border-bottom-width) var(--lumx-tabs-link-#{$emphasis}-state-default-border-left-width);
+        border-radius: var(--lumx-tabs-link-border-radius);
+        transition-duration: $lumx-state-transition-duration;
+        transition-property: border-radius, border-width, border-color;
+    }
+
+    &:hover::after {
+        border-width: var(--lumx-tabs-link-#{$emphasis}-state-hover-border-top-width) var(--lumx-tabs-link-#{$emphasis}-state-hover-border-right-width) var(--lumx-tabs-link-#{$emphasis}-state-hover-border-bottom-width) var(--lumx-tabs-link-#{$emphasis}-state-hover-border-left-width);
+    }
+
+    &:active::after {
+        border-width: var(--lumx-tabs-link-#{$emphasis}-state-active-border-top-width) var(--lumx-tabs-link-#{$emphasis}-state-active-border-right-width) var(--lumx-tabs-link-#{$emphasis}-state-active-border-bottom-width) var(--lumx-tabs-link-#{$emphasis}-state-active-border-left-width);
+    }
+
+    i {
+        margin-right: $lumx-spacing-unit;
+    }
+
+    span {
+        font-family: var(--lumx-typography-custom-button-size-m-font-family);
+        font-size: var(--lumx-typography-custom-button-size-m-font-size);
+        font-weight: var(--lumx-typography-custom-button-size-m-font-weight);
+        text-transform: var(--lumx-material-button-text-transform);
+    }
+}
+
+@mixin lumx-tabs-link-color($emphasis, $theme) {
+    color: var(--lumx-tabs-link-#{$emphasis}-state-default-#{$theme}-color);
+    background-color: var(--lumx-tabs-link-#{$emphasis}-state-default-#{$theme}-background-color);
+
+    &::after {
+        border-color: var(--lumx-tabs-link-#{$emphasis}-state-default-#{$theme}-border-color);
+    }
+
+    &:hover {
+        color: var(--lumx-tabs-link-#{$emphasis}-state-hover-#{$theme}-color);
+        background-color: var(--lumx-tabs-link-#{$emphasis}-state-hover-#{$theme}-background-color);
+
+        &::after {
+            border-color: var(--lumx-tabs-link-#{$emphasis}-state-hover-#{$theme}-border-color);
+        }
+    }
+
+    &:active {
+        color: var(--lumx-tabs-link-#{$emphasis}-state-active-#{$theme}-color);
+        background-color: var(--lumx-tabs-link-#{$emphasis}-state-active-#{$theme}-background-color);
+
+        &::after {
+            border-color: var(--lumx-tabs-link-#{$emphasis}-state-active-#{$theme}-border-color);
+        }
+    }
+
+    &[data-focus-visible-added] {
+        @if $theme == lumx-base-const("theme", "LIGHT") {
+            @include lumx-state-low(lumx-base-const("state", "FOCUS"), "dark");
+        } @else if $theme == lumx-base-const("theme", "DARK") {
+            @include lumx-state-low(lumx-base-const("state", "FOCUS"), "light");
+        }
+    }
+}
+
+@mixin lumx-tabs-link-layout($layout) {
+    @if $layout == "fixed" {
+        flex: 1 1 auto;
+    }
+}

package/src/scss/components/text/_index.scss

@@ -0,0 +1,29 @@
+/* ==========================================================================
+   Text
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-text {
+    &--is-truncated {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &--is-truncated-multiline {
+        /* autoprefixer: off */
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--lumx-text-truncate-lines);
+    }
+
+    &--no-wrap {
+        white-space: nowrap;
+    }
+
+    // Fix icon alignment
+    .#{$lumx-base-prefix}-icon, .#{$lumx-base-prefix}-icon > svg {
+        display: inline;
+    }
+}