@lumx/core 3.0.7 → 3.1.0

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

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

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

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

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

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

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

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

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

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

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

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