@lumx/core 3.1.0 → 3.1.2

package/src/scss/components/thumbnail/_variables.scss

@@ -1,6 +0,0 @@
-$lumx-thumbnail-aspect-ratio: (
-    "horizontal": 66.66%,
-    "wide": 56.25%,
-    "square": 100%,
-    "vertical": 150%
-);

package/src/scss/components/toolbar/_index.scss

@@ -1,38 +0,0 @@
-/* ==========================================================================
-   Toolbar
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-toolbar {
-    $self: &;
-
-    display: flex;
-    align-items: center;
-    height: $lumx-toolbar-height;
-    padding: 0 $lumx-spacing-unit * 3;
-
-    &--has-before {
-        padding-left: $lumx-spacing-unit * 2;
-    }
-
-    &--has-after {
-        padding-right: $lumx-spacing-unit * 2;
-    }
-
-    &__before {
-        flex-shrink: 0;
-        margin-right: $lumx-spacing-unit * 2;
-    }
-
-    &__label {
-        flex: 1 1 auto;
-    }
-
-    &__after {
-        flex-shrink: 0;
-        margin-left: auto;
-
-        #{$self}--has-label & {
-            margin-left: $lumx-spacing-unit * 2;
-        }
-    }
-}

package/src/scss/components/toolbar/_variables.scss

@@ -1 +0,0 @@
-$lumx-toolbar-height: 68px;

package/src/scss/components/tooltip/_index.scss

@@ -1,91 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-
-/* ==========================================================================
-   Tooltip
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-tooltip {
-    $self: &;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: map.get($lumx-base-layers, "higher");
-    padding: math.div($lumx-spacing-unit, 2);
-    background-color: lumx-color-variant("dark", "N");
-    border-radius: var(--lumx-border-radius);
-    will-change: transform;
-
-    &__arrow {
-        position: absolute;
-        width: 0;
-        height: 0;
-        margin: $lumx-tooltip-arrow-size;
-        border-color: lumx-color-variant("dark", "N");
-        border-style: solid;
-
-        #{$self}--position-top & {
-            bottom: -$lumx-tooltip-arrow-size;
-            left: 50%;
-            margin-top: 0;
-            margin-bottom: 0;
-            margin-left: -$lumx-tooltip-arrow-size;
-            border-width: $lumx-tooltip-arrow-size $lumx-tooltip-arrow-size 0 $lumx-tooltip-arrow-size;
-            border-right-color: transparent;
-            border-bottom-color: transparent;
-            border-left-color: transparent;
-        }
-
-        #{$self}--position-bottom & {
-            top: -$lumx-tooltip-arrow-size;
-            left: 50%;
-            margin-top: 0;
-            margin-bottom: 0;
-            margin-left: -$lumx-tooltip-arrow-size;
-            border-width: 0 $lumx-tooltip-arrow-size $lumx-tooltip-arrow-size $lumx-tooltip-arrow-size;
-            border-top-color: transparent;
-            border-right-color: transparent;
-            border-left-color: transparent;
-        }
-
-        #{$self}--position-left & {
-            top: 50%;
-            right: -$lumx-tooltip-arrow-size;
-            margin-top: -$lumx-tooltip-arrow-size;
-            margin-right: 0;
-            margin-left: 0;
-            border-width: $lumx-tooltip-arrow-size 0 $lumx-tooltip-arrow-size $lumx-tooltip-arrow-size;
-            border-top-color: transparent;
-            border-right-color: transparent;
-            border-bottom-color: transparent;
-        }
-
-        #{$self}--position-right & {
-            top: 50%;
-            left: -$lumx-tooltip-arrow-size;
-            margin-top: -$lumx-tooltip-arrow-size;
-            margin-right: 0;
-            margin-left: 0;
-            border-width: $lumx-tooltip-arrow-size $lumx-tooltip-arrow-size $lumx-tooltip-arrow-size 0;
-            border-top-color: transparent;
-            border-bottom-color: transparent;
-            border-left-color: transparent;
-        }
-    }
-
-    &__inner {
-        display: block;
-        font-size: $lumx-tooltip-font-size;
-        line-height: $lumx-tooltip-line-height;
-        color: $lumx-tooltip-color;
-    }
-}
-
-.#{$lumx-base-prefix}-tooltip-anchor-wrapper {
-    width: fit-content;
-
-    // Prevent text selection on mobile device that would hinder long press.
-    -webkit-touch-callout: none;
-    user-select: none;
-}

package/src/scss/components/tooltip/_variables.scss

@@ -1,4 +0,0 @@
-$lumx-tooltip-arrow-size: 5px;
-$lumx-tooltip-color: #fff;
-$lumx-tooltip-font-size: 11px;
-$lumx-tooltip-line-height: 12px;

package/src/scss/components/uploader/_index.scss

@@ -1,115 +0,0 @@
-/* ==========================================================================
-   Uploader
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-uploader {
-    $self: &;
-
-    @include lumx-state-transition;
-
-    position: relative;
-    cursor: pointer;
-    outline: none;
-
-    &--theme-light {
-        @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "MEDIUM"), "dark");
-
-        &:hover {
-            @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "MEDIUM"), "dark");
-        }
-
-        &:active {
-            @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "MEDIUM"), "dark");
-        }
-
-        &[data-focus-visible-added] {
-            @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "MEDIUM"), "dark");
-        }
-    }
-
-    &--theme-dark {
-        @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "MEDIUM"), "light");
-
-        &:hover {
-            @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "MEDIUM"), "light");
-        }
-
-        &:active {
-            @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "MEDIUM"), "light");
-        }
-
-        &[data-focus-visible-added] {
-            @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "MEDIUM"), "light");
-        }
-    }
-
-    &--variant-square {
-        border-radius: 0;
-    }
-
-    &--variant-rounded {
-        border-radius: var(--lumx-border-radius);
-    }
-
-    &--variant-circle {
-        border-radius: 50%;
-    }
-
-    &__wrapper {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 0 $lumx-spacing-unit * 2;
-        user-select: none;
-    }
-
-    &__icon {
-        margin-bottom: $lumx-spacing-unit;
-
-        #{$self}--theme-light & {
-            color: lumx-color-variant("dark", "L1");
-        }
-
-        #{$self}--theme-dark & {
-            color: lumx-color-variant("light", "N");
-        }
-    }
-
-    &__label {
-        @include lumx-typography("subtitle1");
-
-        text-align: center;
-
-        #{$self}--theme-light & {
-            color: lumx-color-variant("dark", "L1");
-        }
-
-        #{$self}--theme-dark & {
-            color: lumx-color-variant("light", "N");
-        }
-    }
-}
-
-/* Uploader sizes
-   ========================================================================== */
-
-@each $key, $size in $lumx-sizes {
-    .#{$lumx-base-prefix}-uploader--size-#{$key} {
-        width: $size;
-    }
-}
-
-/* Uploader aspect ratio
-   ========================================================================== */
-
-@each $key, $aspect-ratio in $lumx-thumbnail-aspect-ratio {
-    .#{$lumx-base-prefix}-uploader--aspect-ratio-#{$key} .#{$lumx-base-prefix}-uploader__background {
-        padding-top: $aspect-ratio;
-    }
-}

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

@@ -1,106 +0,0 @@
-@use "sass:math";
-
-/* ==========================================================================
-   User block
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-user-block {
-    $self: &;
-
-    display: flex;
-    align-items: center;
-
-    &--orientation-vertical {
-        flex-direction: column;
-    }
-
-    &__avatar {
-        #{$self}--orientation-horizontal#{$self}--size-s & {
-            margin-right: $lumx-spacing-unit;
-        }
-
-        #{$self}--orientation-horizontal#{$self}--size-m &,
-        #{$self}--orientation-horizontal#{$self}--size-l & {
-            margin-right: $lumx-spacing-unit * 2;
-        }
-
-        #{$self}--orientation-vertical & {
-            margin-bottom: $lumx-spacing-unit * 1.5;
-        }
-    }
-
-    &__wrapper {
-        display: flex;
-        flex-direction: column;
-
-        #{$self}--orientation-vertical & {
-            align-items: center;
-        }
-    }
-
-    &__name {
-        width: fit-content;
-        outline: none;
-
-        @include lumx-typography("subtitle1");
-
-        #{$self}--orientation-vertical & {
-            text-align: center;
-        }
-
-        #{$self}--theme-dark & {
-            color: lumx-color-variant("light", "N");
-        }
-    }
-
-    &__fields {
-        #{$self}--size-s & {
-            display: none;
-        }
-
-        #{$self}--size-m & {
-            display: flex;
-        }
-
-        #{$self}--size-l & {
-            display: flex;
-            flex-direction: column;
-        }
-
-        #{$self}--orientation-vertical & {
-            align-items: center;
-        }
-    }
-
-    &__field {
-        @include lumx-typography("body1");
-
-        #{$self}--size-m & {
-            &::after {
-                margin: 0 math.div($lumx-spacing-unit, 2);
-                content: "•";
-            }
-
-            &:last-child::after {
-                display: none;
-            }
-        }
-
-        #{$self}--orientation-vertical & {
-            text-align: center;
-        }
-
-        #{$self}--theme-light & {
-            color: lumx-color-variant("dark", "L2");
-        }
-
-        #{$self}--theme-dark & {
-            color: lumx-color-variant("light", "L2");
-        }
-    }
-
-    &__action,
-    &__actions {
-        margin-top: $lumx-spacing-unit * 2;
-    }
-}

package/src/scss/core/base/_functions.scss

@@ -1,3 +0,0 @@
-@function lumx-base-const($kind, $name) {
-    @return map-get(map-get($lumx-base-constants, $kind), $name);
-}

package/src/scss/core/base/_helpers.scss

@@ -1,21 +0,0 @@
-/* Align
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-base-text-left {
-    text-align: left;
-}
-
-.#{$lumx-base-prefix}-base-text-right {
-    text-align: right;
-}
-
-.#{$lumx-base-prefix}-base-text-center {
-    text-align: center;
-}
-
-/* Display
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-base-display-block {
-    display: block;
-}

package/src/scss/core/base/_index.scss

@@ -1,54 +0,0 @@
-@use "sass:math";
-
-/* ==========================================================================
-   Base
-   ========================================================================== */
-
-html {
-    @include lumx-typography-base;
-
-    box-sizing: border-box;
-    font-size: math.div($lumx-typography-default-font-size, 16px) * 1em;
-    line-height: math.div($lumx-typography-default-line-height, $lumx-typography-default-font-size);
-    color: lumx-color-variant("dark", "N");
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: inherit;
-}
-
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-blockquote,
-p,
-pre,
-dl,
-dd,
-ol,
-ul,
-figure,
-hr,
-fieldset,
-legend {
-    padding: 0;
-    margin: 0;
-}
-
-li > {
-    ol,
-    ul {
-        margin-bottom: 0;
-    }
-}
-
-table {
-    border-spacing: 0;
-    border-collapse: collapse;
-}