@lumx/core 3.1.0 → 3.1.2

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

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

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

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

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

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

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

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

@@ -1,82 +0,0 @@
-@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");
-    }
-}