@lumx/core 3.0.7 → 3.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+@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;
+}