@lumx/core 3.1.0 → 3.1.2

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

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

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

@@ -1,115 +0,0 @@
-@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/_mixins.scss

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

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