@lumx/core 3.0.7 → 3.1.0

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

@@ -0,0 +1,101 @@
+/* ==========================================================================
+   Post block
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-post-block {
+    $self: &;
+
+    &--orientation-horizontal {
+        display: flex;
+    }
+
+    &__thumbnail {
+        #{$self}--orientation-horizontal & {
+            flex-shrink: 0;
+            width: 33.33%;
+            margin-right: $lumx-spacing-unit * 3;
+        }
+
+        #{$self}--orientation-vertical & {
+            margin-bottom: $lumx-spacing-unit * 3;
+        }
+    }
+
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+
+        #{$self}--orientation-horizontal & {
+            flex: 1 1 auto;
+        }
+    }
+
+    &__author {
+        margin-bottom: $lumx-spacing-unit;
+    }
+
+    &__title {
+        @include lumx-typography("title");
+
+        display: block;
+        margin-bottom: $lumx-spacing-unit;
+
+        #{$self}--theme-light & {
+            @include lumx-link("dark");
+        }
+
+        #{$self}--theme-dark & {
+            @include lumx-link("light");
+        }
+    }
+
+    &__meta {
+        @include lumx-typography("caption");
+
+        display: block;
+        margin-bottom: $lumx-spacing-unit;
+
+        #{$self}--theme-light & {
+            color: lumx-color-variant("dark", "L2");
+        }
+
+        #{$self}--theme-dark & {
+            color: lumx-color-variant("light", "L2");
+        }
+    }
+
+    &__text {
+        @include lumx-typography("body1");
+
+        margin-bottom: $lumx-spacing-unit;
+
+        #{$self}--theme-light & {
+            color: lumx-color-variant("dark", "N");
+        }
+
+        #{$self}--theme-dark & {
+            color: lumx-color-variant("light", "N");
+        }
+    }
+
+    &__toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    &__attachments {
+        margin-top: $lumx-spacing-unit;
+        margin-bottom: $lumx-spacing-unit;
+    }
+
+    &__tags {
+        flex: 1 1 auto;
+        margin-top: $lumx-spacing-unit;
+    }
+
+    &__actions {
+        flex-shrink: 0;
+        margin-top: $lumx-spacing-unit;
+    }
+}

package/src/scss/components/progress/_index.scss

@@ -0,0 +1,190 @@
+@use "sass:map";
+
+/* ==========================================================================
+   Progress
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-progress {
+    &--variant-circular {
+        width: $lumx-progress-circular-size;
+        height: $lumx-progress-circular-size;
+    }
+}
+
+/* Circular
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-progress-circular {
+    position: relative;
+    width: $lumx-progress-circular-size;
+    height: $lumx-progress-circular-size;
+
+    &__double-bounce1,
+    &__double-bounce2 {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: var(--lumx-material-progress-bounce);
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        animation: lumx-progress-bounce 2s infinite ease-in-out;
+    }
+
+    &--theme-light &__double-bounce1,
+    &--theme-light &__double-bounce2,
+    .#{$lumx-base-prefix}-progress--theme-light &__double-bounce1,
+    .#{$lumx-base-prefix}-progress--theme-light &__double-bounce2 {
+        background-color: lumx-color-variant("primary", "L3");
+    }
+
+    &--theme-dark &__double-bounce1,
+    &--theme-dark &__double-bounce2,
+    .#{$lumx-base-prefix}-progress--theme-dark &__double-bounce1,
+    .#{$lumx-base-prefix}-progress--theme-dark &__double-bounce2 {
+        background-color: lumx-color-variant("light", "L3");
+    }
+
+    &__double-bounce2 {
+        animation-delay: -1s;
+    }
+
+    &__svg {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: var(--lumx-material-progress-rotate);
+        width: $lumx-progress-circular-size;
+        height: $lumx-progress-circular-size;
+        margin: auto;
+        transform-origin: center center;
+        animation: lumx-progress-rotate 2s linear infinite;
+    }
+
+    &__path {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+        stroke-linecap: butt;
+        animation: lumx-progress-dash 1.5s ease-in-out infinite;
+    }
+
+    &--theme-light &__path,
+    .#{$lumx-base-prefix}-progress--theme-light &__path {
+        stroke: lumx-color-variant("primary", "N");
+    }
+
+    &--theme-dark &__path,
+    .#{$lumx-base-prefix}-progress--theme-dark &__path {
+        stroke: lumx-color-variant("light", "N");
+    }
+
+    /* Circular sizes */
+    @each $key, $size in $lumx-progress-circular-size-map {
+        &--size-#{$key}, &--size-#{$key} .#{$lumx-base-prefix}-progress-circular__svg {
+            width: $size;
+            height: $size;
+        }
+    }
+}
+
+@keyframes lumx-progress-bounce {
+    0%,
+    100% {
+        transform: scale(0);
+    }
+
+    50% {
+        transform: scale(1);
+    }
+}
+
+@keyframes lumx-progress-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes lumx-progress-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35;
+    }
+
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124;
+    }
+}
+
+/* Linear
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-progress-linear {
+    position: relative;
+    height: $lumx-progress-linear-size;
+    overflow: hidden;
+    border-radius: 2px;
+
+    &__line1,
+    &__line2 {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
+    &--theme-light &__line1,
+    &--theme-light &__line2,
+    .#{$lumx-base-prefix}-progress--theme-light &__line1,
+    .#{$lumx-base-prefix}-progress--theme-light &__line2 {
+        background-color: lumx-color-variant("primary", "L3");
+    }
+
+    &--theme-dark &__line1,
+    &--theme-dark &__line2,
+    .#{$lumx-base-prefix}-progress--theme-dark &__line1,
+    .#{$lumx-base-prefix}-progress--theme-dark &__line2 {
+        background-color: lumx-color-variant("light", "L3");
+    }
+
+    &__line2 {
+        transform: scaleX(0);
+        transform-origin: center left;
+        animation: lumx-progress-expand 2s infinite ease-in-out;
+    }
+}
+
+@keyframes lumx-progress-expand {
+    0% {
+        transform: scaleX(0);
+        transform-origin: center left;
+    }
+
+    49% {
+        transform: scaleX(1);
+        transform-origin: center left;
+    }
+
+    50% {
+        transform: scaleX(1);
+        transform-origin: center right;
+    }
+
+    99% {
+        transform: scaleX(0);
+        transform-origin: center right;
+    }
+
+    100% {
+        transform: scaleX(0);
+        transform-origin: center left;
+    }
+}

package/src/scss/components/progress/_variables.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+
+/** @deprecated: replaced with $lumx-progress-circular-size-map */
+$lumx-progress-circular-size: map.get($lumx-sizes, "m");
+$lumx-progress-circular-size-map: (
+    "xxs": map.get($lumx-sizes, "xxs"),
+    "xs": map.get($lumx-sizes, "xs"),
+    "s": map.get($lumx-sizes, "s"),
+    "m": map.get($lumx-sizes, "m"),
+);
+
+$lumx-progress-linear-size: 4px;

package/src/scss/components/progress-tracker/_index.scss

@@ -0,0 +1,131 @@
+/* ==========================================================================
+   Progress tracker
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-progress-tracker {
+    position: relative;
+
+    &__steps {
+        position: relative;
+        z-index: 1;
+        display: flex;
+    }
+
+    &__background-bar,
+    &__foreground-bar {
+        position: absolute;
+        top: 19px;
+        z-index: 0;
+        height: $lumx-progress-tracker-bar-height;
+    }
+
+    &__background-bar {
+        background-color: lumx-color-variant("dark", $lumx-divider-color-variant);
+    }
+
+    &__foreground-bar {
+        background-color: lumx-color-variant("primary", "N");
+        transition: transform $lumx-progress-tracker-transition-duration;
+        transform-origin: left;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+    }
+}
+
+/* Step
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-progress-tracker-step {
+    $self: &;
+
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    align-items: center;
+    padding: $lumx-spacing-unit 0;
+    background: none;
+    border: none;
+    border-radius: var(--lumx-border-radius);
+    outline: none;
+
+    &--is-clickable {
+        @include lumx-state-transition;
+
+        cursor: pointer;
+    }
+
+    &__state {
+        position: relative;
+        color: lumx-color-variant("dark", "L5");
+
+        #{$self}--is-active &,
+        #{$self}--is-complete & {
+            color: lumx-color-variant("primary", "N");
+        }
+
+        #{$self}--has-error & {
+            color: lumx-color-variant("red", "N");
+        }
+
+        &::before {
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            z-index: -1;
+            display: block;
+            width: 20px;
+            height: 20px;
+            content: "";
+            background-color: lumx-color-variant("light", "N");
+        }
+    }
+
+    &__label,
+    &__helper {
+        text-align: center;
+        user-select: none;
+    }
+
+    &__label {
+        margin-top: $lumx-spacing-unit;
+        cursor: unset;
+    }
+}
+
+/* Step states
+   ========================================================================== */
+
+// Hover state
+.#{$lumx-base-prefix}-progress-tracker-step--is-clickable:hover {
+    @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
+}
+
+// Active state
+.#{$lumx-base-prefix}-progress-tracker-step--is-clickable:active {
+    @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
+}
+
+// Focus state
+.#{$lumx-base-prefix}-progress-tracker-step[data-focus-visible-added] {
+    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark");
+}
+
+/* Step panel
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-step-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/progress-tracker/_variables.scss

@@ -0,0 +1,2 @@
+$lumx-progress-tracker-bar-height: 2px;
+$lumx-progress-tracker-transition-duration: 400ms;

package/src/scss/components/radio-button/_index.scss

@@ -0,0 +1,180 @@
+@use "sass:math";
+
+/* ==========================================================================
+   Radio button
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-radio-button {
+    $self: &;
+
+    display: flex;
+
+    &__input-wrapper {
+        @include lumx-radio-button-input-wrapper;
+    }
+
+    &__input-native {
+        @include lumx-radio-button-input-native;
+    }
+
+    &__input-placeholder {
+        @include lumx-radio-button-placeholder;
+    }
+
+    &__input-background {
+        @include lumx-radio-button-input-background;
+
+        #{$self}--theme-light#{$self}--is-unchecked & {
+            @include lumx-radio-button-input-background-status("unchecked", lumx-base-const("theme", "LIGHT"));
+        }
+
+        #{$self}--theme-dark#{$self}--is-unchecked & {
+            @include lumx-radio-button-input-background-status("unchecked", lumx-base-const("theme", "DARK"));
+        }
+
+        #{$self}--theme-light#{$self}--is-checked & {
+            @include lumx-radio-button-input-background-status("checked", lumx-base-const("theme", "LIGHT"));
+        }
+
+        #{$self}--theme-dark#{$self}--is-checked & {
+            @include lumx-radio-button-input-background-status("checked", lumx-base-const("theme", "DARK"));
+        }
+    }
+
+    &__input-indicator {
+        @include lumx-radio-button-input-indicator;
+
+        #{$self}--theme-light#{$self}--is-unchecked & {
+            @include lumx-radio-button-input-indicator-status("unchecked", lumx-base-const("theme", "LIGHT"));
+        }
+
+        #{$self}--theme-dark#{$self}--is-unchecked & {
+            @include lumx-radio-button-input-indicator-status("unchecked", lumx-base-const("theme", "DARK"));
+        }
+
+        #{$self}--theme-light#{$self}--is-checked & {
+            @include lumx-radio-button-input-indicator-status("checked", lumx-base-const("theme", "LIGHT"));
+        }
+
+        #{$self}--theme-dark#{$self}--is-checked & {
+            @include lumx-radio-button-input-indicator-status("checked", lumx-base-const("theme", "DARK"));
+        }
+    }
+
+    &__label,
+    &__helper {
+        padding-left: $lumx-spacing-unit;
+    }
+
+    &__helper {
+        margin-top: math.div($lumx-spacing-unit, 2);
+    }
+}
+
+/* Radio button states
+   ========================================================================== */
+
+// Disabled state
+.#{$lumx-base-prefix}-radio-button--is-disabled {
+    .#{$lumx-base-prefix}-radio-button__input-native {
+        pointer-events: none;
+    }
+
+    .#{$lumx-base-prefix}-radio-button__input-placeholder {
+        @include lumx-state-disabled-input;
+    }
+
+    &.#{$lumx-base-prefix}-radio-button--theme-light {
+        .#{$lumx-base-prefix}-radio-button__label,
+        .#{$lumx-base-prefix}-radio-button__helper {
+            @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT"));
+        }
+    }
+
+    &.#{$lumx-base-prefix}-radio-button--theme-dark {
+        .#{$lumx-base-prefix}-radio-button__label,
+        .#{$lumx-base-prefix}-radio-button__helper {
+            @include lumx-state-disabled-text(lumx-base-const("theme", "DARK"));
+        }
+    }
+}
+
+// Hover state
+.#{$lumx-base-prefix}-radio-button--theme-light.#{$lumx-base-prefix}-radio-button--is-unchecked
+.#{$lumx-base-prefix}-radio-button__input-native:hover
++ .#{$lumx-base-prefix}-radio-button__input-placeholder {
+    .#{$lumx-base-prefix}-radio-button__input-background {
+        @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
+    }
+}
+
+.#{$lumx-base-prefix}-radio-button--theme-dark.#{$lumx-base-prefix}-radio-button--is-unchecked
+.#{$lumx-base-prefix}-radio-button__input-native:hover
++ .#{$lumx-base-prefix}-radio-button__input-placeholder {
+    .#{$lumx-base-prefix}-radio-button__input-background {
+        @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light");
+    }
+}
+
+// Active state
+.#{$lumx-base-prefix}-radio-button--theme-light.#{$lumx-base-prefix}-radio-button--is-unchecked
+.#{$lumx-base-prefix}-radio-button__input-native:active
++ .#{$lumx-base-prefix}-radio-button__input-placeholder {
+    .#{$lumx-base-prefix}-radio-button__input-background {
+        @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
+    }
+}
+
+.#{$lumx-base-prefix}-radio-button--theme-dark.#{$lumx-base-prefix}-radio-button--is-unchecked
+.#{$lumx-base-prefix}-radio-button__input-native:active
++ .#{$lumx-base-prefix}-radio-button__input-placeholder {
+    .#{$lumx-base-prefix}-radio-button__input-background {
+        @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light");
+    }
+}
+
+// Focus state
+.#{$lumx-base-prefix}-radio-button--theme-light.#{$lumx-base-prefix}-radio-button--is-unchecked
+.#{$lumx-base-prefix}-radio-button__input-native[data-focus-visible-added]
++ .#{$lumx-base-prefix}-radio-button__input-placeholder {
+    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark");
+}
+
+.#{$lumx-base-prefix}-radio-button--theme-dark.#{$lumx-base-prefix}-radio-button--is-unchecked
+.#{$lumx-base-prefix}-radio-button__input-native[data-focus-visible-added]
++ .#{$lumx-base-prefix}-radio-button__input-placeholder {
+    @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");
+}
+
+.#{$lumx-base-prefix}-radio-button--theme-light.#{$lumx-base-prefix}-radio-button--is-checked
+.#{$lumx-base-prefix}-radio-button__input-native[data-focus-visible-added]
++ .#{$lumx-base-prefix}-radio-button__input-placeholder {
+    @include lumx-state(
+        lumx-base-const("state", "FOCUS"),
+        lumx-base-const("emphasis", "HIGH"),
+        "primary",
+        lumx-base-const("theme", "LIGHT")
+    );
+}
+
+.#{$lumx-base-prefix}-radio-button--theme-dark.#{$lumx-base-prefix}-radio-button--is-checked
+.#{$lumx-base-prefix}-radio-button__input-native[data-focus-visible-added]
++ .#{$lumx-base-prefix}-radio-button__input-placeholder {
+    @include lumx-state(
+        lumx-base-const("state", "FOCUS"),
+        lumx-base-const("emphasis", "HIGH"),
+        "primary",
+        lumx-base-const("theme", "DARK")
+    );
+}
+
+/* Radio group
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-radio-group > .#{$lumx-base-prefix}-radio-button {
+    margin-bottom: $lumx-spacing-unit * 1.5;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}

package/src/scss/components/radio-button/_mixins.scss

@@ -0,0 +1,82 @@
+@mixin lumx-radio-button-input-wrapper() {
+    position: relative;
+    width: var(--lumx-material-radio-button-wrapper-size);
+    height: var(--lumx-material-radio-button-wrapper-size);
+}
+
+@mixin lumx-radio-button-input-native() {
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 4;
+    width: var(--lumx-material-radio-button-wrapper-size);
+    height: var(--lumx-material-radio-button-wrapper-size);
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+}
+
+@mixin lumx-radio-button-placeholder() {
+    position: absolute;
+    top: calc((var(--lumx-material-radio-button-wrapper-size) - var(--lumx-material-radio-button-control-size)) / 2);
+    left: calc((var(--lumx-material-radio-button-wrapper-size) - var(--lumx-material-radio-button-control-size)) / 2);
+    z-index: 1;
+    width: var(--lumx-material-radio-button-control-size);
+    height: var(--lumx-material-radio-button-control-size);
+    border-radius: 50%;
+}
+
+@mixin lumx-radio-button-input-background() {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    border-style: solid;
+    border-width: 2px;
+    border-radius: 50%;
+}
+
+@mixin lumx-radio-button-input-background-status($status, $theme) {
+    @if $status == "checked" {
+        @if $theme == lumx-base-const("theme", "LIGHT") {
+            color: lumx-color-variant("primary", "N");
+        } @else if $theme == lumx-base-const("theme", "DARK") {
+            color: lumx-color-variant("light", "N");
+        }
+    } @else if $status == "unchecked" {
+        @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-radio-button-input-indicator() {
+    position: absolute;
+    top: calc((var(--lumx-material-radio-button-control-size) - var(--lumx-material-radio-button-indicator-size)) / 2);
+    left: calc((var(--lumx-material-radio-button-control-size) - var(--lumx-material-radio-button-indicator-size)) / 2);
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--lumx-material-radio-button-indicator-size);
+    height: var(--lumx-material-radio-button-indicator-size);
+    border-radius: 50%;
+}
+
+@mixin lumx-radio-button-input-indicator-status($status, $theme) {
+    @if $status == "checked" {
+        opacity: 1;
+    } @else if $status == "unchecked" {
+        opacity: 0;
+    }
+
+    @if $theme == lumx-base-const("theme", "LIGHT") {
+        background-color: lumx-color-variant("primary", "N");
+    } @else if $theme == lumx-base-const("theme", "DARK") {
+        background-color: lumx-color-variant("light", "N");
+    }
+}