@lumx/core 3.1.0 → 3.1.2

package/src/scss/components/link-preview/_index.scss

@@ -1,95 +0,0 @@
-@use "sass:map";
-
-/* ==========================================================================
-   Web bookmark
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-link-preview {
-    $self: &;
-
-    &--size-big {
-        position: relative;
-        padding-top: map.get($lumx-thumbnail-aspect-ratio, "horizontal");
-    }
-
-    &--theme-light {
-        background-color: lumx-color-variant("dark", "L6");
-    }
-
-    &--theme-dark {
-        background-color: lumx-color-variant("light", "L6");
-    }
-
-    &__wrapper {
-        display: flex;
-
-        #{$self}--size-regular & {
-            flex-direction: row;
-        }
-
-        #{$self}--size-big & {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            flex-direction: column;
-        }
-    }
-
-    &__thumbnail {
-        display: flex;
-        flex-direction: column;
-
-        #{$self}--size-regular & {
-            flex: 0 0 138px; // 3:2 ratio according to height (92px)
-        }
-
-        #{$self}--size-big & {
-            flex: 1 1 auto;
-        }
-    }
-
-    &__container {
-        display: flex;
-        flex-direction: column;
-        padding: $lumx-spacing-unit * 2;
-        overflow: hidden;
-
-        #{$self}--size-regular & {
-            flex: 1 1 auto;
-        }
-
-        #{$self}--size-big & {
-            flex-shrink: 0;
-        }
-    }
-
-    &__title,
-    &__description,
-    &__link {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &__title {
-        @include lumx-typography("subtitle1");
-    }
-
-    &__description {
-        @include lumx-typography("body1");
-
-        #{$self}--theme-light & {
-            color: lumx-color-variant("dark", "L2");
-        }
-
-        #{$self}--theme-dark & {
-            color: lumx-color-variant("light", "L2");
-        }
-    }
-
-    &__link {
-        @include lumx-typography("body1");
-    }
-}

package/src/scss/components/list/_index.scss

@@ -1,96 +0,0 @@
-/* ==========================================================================
-   List
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-list {
-    @include lumx-list;
-}
-
-/* Item sizes
-   ========================================================================== */
-
-@each $key, $size in $lumx-list-item-sizes {
-    .#{$lumx-base-prefix}-list-item--size-#{$key} {
-        .#{$lumx-base-prefix}-list-item__wrapper,
-        .#{$lumx-base-prefix}-list-item__link {
-            @include lumx-list-item($key);
-        }
-
-        .#{$lumx-base-prefix}-list-item__before {
-            @include lumx-list-item-before($key);
-        }
-
-        .#{$lumx-base-prefix}-list-item__after {
-            @include lumx-list-item-after($key);
-        }
-    }
-}
-
-/* Item link
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-list-item {
-    &__link {
-        @include lumx-list-item-clickable;
-    }
-
-    &__link--is-highlighted {
-        @include lumx-list-item-highlighted;
-    }
-
-    &__link--is-selected {
-        @include lumx-list-item-selected;
-    }
-
-    &__link--is-disabled,
-    &__link[aria-disabled="true"] {
-        @include lumx-state-disabled-input;
-    }
-}
-
-/* Item spacing
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-list-item__link,
-.#{$lumx-base-prefix}-list-item__wrapper {
-    .#{$lumx-base-prefix}-list--item-padding-big & {
-        @include lumx-list-item-padding("big");
-    }
-
-    .#{$lumx-base-prefix}-list--item-padding-huge & {
-        @include lumx-list-item-padding("huge");
-    }
-}
-
-/* Item content
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-list-item__content {
-    @include lumx-list-item-content;
-}
-
-/* Subheader
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-list-subheader {
-    @include lumx-list-subheader;
-
-    i {
-        @include lumx-list-subheader-icon;
-    }
-
-    .#{$lumx-base-prefix}-list--item-padding-big & {
-        @include lumx-list-item-padding("big");
-    }
-
-    .#{$lumx-base-prefix}-list--item-padding-huge & {
-        @include lumx-list-item-padding("huge");
-    }
-}
-
-/* Divider
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-list-divider {
-    @include lumx-list-divider;
-}

package/src/scss/components/list/_mixins.scss

@@ -1,128 +0,0 @@
-@use "sass:map";
-
-@mixin lumx-list() {
-    padding: $lumx-spacing-unit 0;
-    margin: 0;
-    list-style: none;
-    outline: none;
-}
-
-@mixin lumx-list-item($size) {
-    display: flex;
-    text-decoration: none;
-    outline: none;
-
-    @if $size == "huge" {
-        align-items: flex-start;
-        padding-top: $lumx-spacing-unit * 2;
-        padding-bottom: $lumx-spacing-unit * 2;
-    } @else {
-        align-items: center;
-        min-height: map.get($lumx-list-item-sizes, $size);
-        padding-top: $lumx-spacing-unit;
-        padding-bottom: $lumx-spacing-unit;
-    }
-}
-
-@mixin lumx-list-item-clickable() {
-    @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "dark");
-
-    cursor: pointer;
-
-    &:hover,
-    &[data-focus-visible-added] {
-        @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
-    }
-
-    &:active {
-        @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
-    }
-}
-
-@mixin lumx-list-item-highlighted() {
-    cursor: pointer;
-
-    @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
-
-    &:active {
-        @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
-    }
-}
-
-@mixin lumx-list-item-selected() {
-    @include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "LIGHT"));
-
-    &:hover,
-    &[data-focus-visible-added] {
-        @include lumx-state-as-selected(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT"));
-    }
-
-    &:active {
-        @include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), lumx-base-const("theme", "LIGHT"));
-    }
-}
-
-@mixin lumx-list-item-edge($size) {
-    display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-}
-
-@mixin lumx-list-item-before($size) {
-    @include lumx-list-item-edge($size);
-
-    @if $size == "tiny" {
-        width: map.get($lumx-sizes, lumx-base-const("size", "S"));
-        margin-right: $lumx-spacing-unit;
-    } @else {
-        width: map.get($lumx-sizes, lumx-base-const("size", "M"));
-        margin-right: $lumx-spacing-unit * 2;
-    }
-}
-
-@mixin lumx-list-item-content() {
-    @include lumx-typography("body1");
-
-    flex: 1 1 auto;
-}
-
-@mixin lumx-list-item-after($size) {
-    @include lumx-list-item-edge($size);
-
-    @if $size == "tiny" {
-        margin-left: $lumx-spacing-unit;
-    } @else {
-        margin-left: $lumx-spacing-unit * 2;
-    }
-}
-
-@mixin lumx-list-subheader() {
-    @include lumx-typography("overline");
-
-    display: flex;
-    align-items: center;
-    height: map.get($lumx-list-item-sizes, "tiny");
-    color: lumx-color-variant("dark", "L3");
-}
-
-@mixin lumx-list-subheader-icon {
-    @include lumx-icon-size(lumx-base-const("size", "XXS"));
-
-    margin-right: $lumx-spacing-unit;
-}
-
-@mixin lumx-list-divider() {
-    height: 1px;
-    margin: $lumx-spacing-unit 0;
-    background-color: lumx-color-variant("dark", $lumx-divider-color-variant);
-}
-
-@mixin lumx-list-item-padding($size) {
-    @if $size == "big" {
-        padding-right: $lumx-spacing-unit * 2;
-        padding-left: $lumx-spacing-unit * 2;
-    } @else if $size == "huge" {
-        padding-right: $lumx-spacing-unit * 3;
-        padding-left: $lumx-spacing-unit * 3;
-    }
-}

package/src/scss/components/list/_variables.scss

@@ -1,7 +0,0 @@
-$lumx-list-item-selected-color: "primary";
-$lumx-list-item-sizes: (
-    "tiny": 36px,
-    "regular": 52px,
-    "big": 72px,
-    "huge": auto,
-);

package/src/scss/components/message/_index.scss

@@ -1,36 +0,0 @@
-/* ==========================================================================
-   Message
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-message {
-    display: flex;
-    align-items: flex-start;
-
-    &--has-background {
-        padding: $lumx-spacing-unit * 2;
-        border-radius: var(--lumx-border-radius);
-    }
-
-    &__icon {
-        flex-shrink: 0;
-        margin-right: $lumx-spacing-unit * 2;
-    }
-
-    &__text {
-        @include lumx-typography("body1");
-
-        flex: 1 1 auto;
-        color: lumx-color-variant("dark", "N");
-    }
-}
-
-/* Message kind
-   ========================================================================== */
-
-@each $color in $lumx-notification-color-palette {
-    .#{$lumx-base-prefix}-message--color-#{$color} {
-        &.#{$lumx-base-prefix}-message--has-background {
-            background-color: lumx-color-variant($color, "L6");
-        }
-    }
-}

package/src/scss/components/mosaic/_index.scss

@@ -1,120 +0,0 @@
-@use "sass:map";
-
-/* ==========================================================================
-   Mosaic
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-mosaic {
-    $self: &;
-
-    position: relative;
-    padding-top: map.get($lumx-thumbnail-aspect-ratio, "horizontal");
-    overflow: hidden;
-
-    &__wrapper {
-        position: absolute;
-        top: -1px;
-        right: -1px;
-        bottom: -1px;
-        left: -1px;
-        display: grid;
-
-        #{$self}--has-1-thumbnail & {
-            grid: 1fr / 1fr;
-            grid-template-areas: "b";
-        }
-
-        #{$self}--has-2-thumbnails & {
-            grid: 1fr / 1fr 1fr;
-            grid-template-areas: "b21 b22";
-        }
-
-        #{$self}--has-3-thumbnails & {
-            grid: 1fr 1fr / 3fr 1fr;
-            grid-template-areas:
-                "b3 s31"
-                "b3 s32";
-        }
-
-        #{$self}--has-4-thumbnails & {
-            grid: 2fr 1fr / 1fr 1fr 1fr;
-            grid-template-areas:
-                "b4 b4 b4"
-                "s41 s42 s43";
-        }
-    }
-
-    &__thumbnail {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        margin: 1px;
-
-        #{$self}--has-1-thumbnail & {
-            &:nth-child(1) {
-                grid-area: b;
-            }
-        }
-
-        #{$self}--has-2-thumbnails & {
-            &:nth-child(1) {
-                grid-area: b21;
-            }
-
-            &:nth-child(2) {
-                grid-area: b22;
-            }
-        }
-
-        #{$self}--has-3-thumbnails & {
-            &:nth-child(1) {
-                grid-area: b3;
-            }
-
-            &:nth-child(2) {
-                grid-area: s31;
-            }
-
-            &:nth-child(3) {
-                grid-area: s32;
-            }
-        }
-
-        #{$self}--has-4-thumbnails & {
-            &:nth-child(1) {
-                grid-area: b4;
-            }
-
-            &:nth-child(2) {
-                grid-area: s41;
-            }
-
-            &:nth-child(3) {
-                grid-area: s42;
-            }
-
-            &:nth-child(4) {
-                grid-area: s43;
-            }
-        }
-    }
-
-    &__overlay {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-        background-color: lumx-color-variant("dark", "L3");
-
-        span {
-            @include lumx-typography("subtitle1");
-
-            color: lumx-color-variant("light", "N");
-        }
-    }
-}

package/src/scss/components/notification/_index.scss

@@ -1,78 +0,0 @@
-@use "sass:map";
-
-/* ==========================================================================
-   Notification
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-notification {
-    $self: &;
-
-    @include lumx-elevation(4);
-
-    position: fixed;
-    right: $lumx-spacing-unit * 3;
-    bottom: $lumx-spacing-unit * 3;
-    z-index: map.get($lumx-base-layers, "higher");
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    background-color: lumx-color-variant("light", "N");
-    border-radius: var(--lumx-border-radius);
-    transition: opacity $lumx-notification-transition-duration;
-    animation: lumx-notification-show $lumx-notification-transition-duration;
-
-    @media (prefers-reduced-motion: reduce) {
-        transition: none;
-        animation: none;
-    }
-
-    &--is-hidden {
-        opacity: 0;
-    }
-
-    &__icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: $lumx-notification-height;
-        height: $lumx-notification-height;
-    }
-
-    &__content {
-        @include lumx-typography("body1");
-
-        padding: 0 $lumx-spacing-unit * 2;
-        color: lumx-color-variant("dark", "N");
-    }
-
-    &__action {
-        padding-right: $lumx-spacing-unit;
-    }
-}
-
-@keyframes lumx-notification-show {
-    0% {
-        opacity: 0;
-        transform: translateY($lumx-notification-height);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Notification colors
-   ========================================================================== */
-
-@each $color in $lumx-notification-color-palette {
-    .#{$lumx-base-prefix}-notification--color-#{$color} .#{$lumx-base-prefix}-notification__icon {
-        background-color: lumx-color-variant($color, "N");
-
-        @if $color == "yellow" {
-            color: lumx-color-variant("dark", "L1");
-        } @else {
-            color: lumx-color-variant("light", "N");
-        }
-    }
-}

package/src/scss/components/notification/_variables.scss

@@ -1,3 +0,0 @@
-$lumx-notification-height: 52px;
-$lumx-notification-color-palette: ("dark", "yellow", "red", "green");
-$lumx-notification-transition-duration: 200ms;

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

@@ -1,42 +0,0 @@
-@use "sass:math";
-
-/* ==========================================================================
-   Notification block
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-notification-block {
-    display: flex;
-    align-items: flex-start;
-
-    &__before {
-        flex-shrink: 0;
-        margin-right: $lumx-spacing-unit * 2;
-    }
-
-    &__content {
-        flex: 1 1 auto;
-    }
-
-    &__title {
-        @include lumx-typography("subtitle1");
-
-        display: block;
-        margin-bottom: math.div($lumx-spacing-unit, 2);
-    }
-
-    &__description {
-        @include lumx-typography("body1");
-    }
-
-    &__date {
-        @include lumx-typography("body1");
-
-        display: block;
-        color: lumx-color-variant("dark", "L2");
-    }
-
-    &__after {
-        flex-shrink: 0;
-        margin-left: $lumx-spacing-unit * 2;
-    }
-}

package/src/scss/components/popover/_index.scss

@@ -1,64 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-
-/* ==========================================================================
-   Popover
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-popover {
-    $self: &;
-
-    z-index: map.get($lumx-base-layers, "high");
-    display: flex;
-    background-color: lumx-color-variant("light", "N");
-    border-radius: var(--lumx-border-radius);
-
-    > * {
-        flex: 1 auto;
-    }
-
-    &__wrapper {
-        position: relative;
-    }
-
-    &__arrow {
-        &,
-        &::before {
-            position: absolute;
-            z-index: -1;
-            width: $lumx-popover-arrow-size;
-            height: $lumx-popover-arrow-size;
-        }
-
-        &::before {
-            content: "";
-            background: lumx-color-variant("light", "N");
-            transform: rotate(45deg);
-        }
-
-        #{$self}[data-popper-placement^='top'] & {
-            bottom: math.div(-$lumx-popover-arrow-size, 2);
-        }
-
-        #{$self}[data-popper-placement^='bottom'] & {
-            top: math.div(-$lumx-popover-arrow-size, 2);
-        }
-
-        #{$self}[data-popper-placement^='left'] & {
-            right: math.div(-$lumx-popover-arrow-size, 2);
-        }
-
-        #{$self}[data-popper-placement^='righ'] & {
-            left: math.div(-$lumx-popover-arrow-size, 2);
-        }
-    }
-}
-
-/* Elevations
-   ========================================================================== */
-
-@each $depth, $shadow in $lumx-elevation-shadows {
-    .#{$lumx-base-prefix}-popover--elevation-#{$depth} {
-        @include lumx-elevation($depth);
-    }
-}

package/src/scss/components/popover/_variables.scss

@@ -1 +0,0 @@
-$lumx-popover-arrow-size: 5px;