@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/text/_index.scss

@@ -0,0 +1,11 @@
+@use 'text' as *;
+
+$generate-tokens: true !default;
+
+@include text-styles;
+
+@if $generate-tokens {
+    :root {
+        @include text-tokens;
+    }
+}

package/styles/text/_text.scss

@@ -0,0 +1,432 @@
+// Name:            Text
+// Description:     Utilities for text
+//
+// Component:       `uk-text-*`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin text-styles {
+    /* ========================================================================
+       Component: Text
+     ========================================================================== */
+
+
+    /* Style modifiers
+     ========================================================================== */
+
+    .#{$prefix}-text-lead {
+        color: var(--text-lead-color);
+        font-size: var(--text-lead-font-size);
+        line-height: var(--text-lead-line-height);
+        @if map.has-key($mixins, 'hook-text-lead') {
+            @include meta.apply(map.get($mixins, 'hook-text-lead'));
+        }
+    }
+
+    .#{$prefix}-text-meta {
+        color: var(--text-meta-color);
+        font-size: var(--text-meta-font-size);
+        line-height: var(--text-meta-line-height);
+        @if map.has-key($mixins, 'hook-text-meta') {
+            @include meta.apply(map.get($mixins, 'hook-text-meta'));
+        }
+    }
+
+    .#{$prefix}-text-base {
+        color: var(--text-base-color);
+        font-size: var(--text-base-font-size);
+        line-height: var(--text-base-line-height);
+        @if map.has-key($mixins, 'hook-text-base') {
+            @include meta.apply(map.get($mixins, 'hook-text-base'));
+        }
+    }
+
+
+    /* Size modifiers
+     ========================================================================== */
+
+    .#{$prefix}-text-xsmall {
+        font-size: var(--text-xsmall-font-size);
+        line-height: var(--text-xsmall-line-height);
+        @if map.has-key($mixins, 'hook-text-xsmall') {
+            @include meta.apply(map.get($mixins, 'hook-text-xsmall'));
+        }
+    }
+
+    .#{$prefix}-text-small {
+        font-size: var(--text-small-font-size);
+        line-height: var(--text-small-line-height);
+        @if map.has-key($mixins, 'hook-text-small') {
+            @include meta.apply(map.get($mixins, 'hook-text-small'));
+        }
+    }
+
+    .#{$prefix}-text-large {
+        font-size: var(--text-large-font-size);
+        line-height: var(--text-large-line-height);
+        @if map.has-key($mixins, 'hook-text-large') {
+            @include meta.apply(map.get($mixins, 'hook-text-large'));
+        }
+    }
+
+    .#{$prefix}-text-default {
+        font-size: var(--global-font-size);
+        line-height: var(--global-line-height);
+    }
+
+
+    /* Weight modifier
+     ========================================================================== */
+
+    .#{$prefix}-text-thin { font-weight: 100; }
+    .#{$prefix}-text-light { font-weight: 300; }
+    .#{$prefix}-text-normal { font-weight: 400; }
+    .#{$prefix}-text-medium { font-weight: 500; }
+    .#{$prefix}-text-semibold { font-weight: 600; }
+    .#{$prefix}-text-bold { font-weight: 700; }
+
+    .#{$prefix}-text-lighter { font-weight: lighter; }
+    .#{$prefix}-text-bolder { font-weight: bolder; }
+
+
+    /* Style modifier
+     ========================================================================== */
+
+    .#{$prefix}-text-italic { font-style: italic; }
+
+
+    /* Transform modifier
+     ========================================================================== */
+
+    .#{$prefix}-text-capitalize { text-transform: capitalize !important; }
+    .#{$prefix}-text-uppercase { text-transform: uppercase !important; }
+    .#{$prefix}-text-lowercase { text-transform: lowercase !important; }
+
+
+    /* Decoration modifier
+     ========================================================================== */
+
+    .#{$prefix}-text-decoration-none { text-decoration: none !important; }
+
+
+    /* Color modifiers
+     ========================================================================== */
+
+    .#{$prefix}-text-muted { color: var(--text-muted-color) !important; }
+    .#{$prefix}-text-emphasis { color: var(--text-emphasis-color) !important; }
+    .#{$prefix}-text-primary { color: var(--text-primary-color) !important; }
+    .#{$prefix}-text-secondary { color: var(--text-secondary-color) !important; }
+    .#{$prefix}-text-tertiary { color: var(--text-tertiary-color) !important; }
+    .#{$prefix}-text-success { color: var(--text-success-color) !important; }
+    .#{$prefix}-text-warning { color: var(--text-warning-color) !important; }
+    .#{$prefix}-text-danger { color: var(--text-danger-color) !important; }
+
+
+    /* Background modifier
+     ========================================================================== */
+
+    /*
+     * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera
+     *    Default color is set to transparent
+     * 2. Container fits the text
+     * 3. Fallback color for IE11
+     */
+
+    .#{$prefix}-text-background {
+        /* 1 */
+        -webkit-background-clip: text;
+
+        /* 3 */
+        color: var(--text-background-color) !important;
+
+        /* 2 */
+        display: inline-block;
+    }
+
+    @supports (-webkit-background-clip: text) {
+        .#{$prefix}-text-background {
+            background-color: var(--text-background-color);
+            color: transparent !important;
+            @if map.has-key($mixins, 'hook-text-background') {
+                @include meta.apply(map.get($mixins, 'hook-text-background'));
+            }
+        }
+    }
+
+    /* Loading modifier
+     ========================================================================== */
+
+    .#{$prefix}-text-loading {
+        animation: uk-text-loading 1.65s infinite both linear;
+        -webkit-background-clip: text;
+        background-size: 200% 100%;
+        display: inline-block;
+        position: relative;
+        -webkit-text-fill-color: transparent;
+    }
+
+    @supports (-webkit-background-clip: text) {
+        .#{$prefix}-text-loading {
+            background-image: linear-gradient(
+                90deg,
+                var(--text-loading-color) 25%,
+                var(--text-loading-emphasis-color) 50%,
+                var(--text-loading-color) 75%
+            );
+            color: transparent !important;
+
+            @if map.has-key($mixins, 'hook-text-loading') {
+                @include meta.apply(map.get($mixins, 'hook-text-loading'));
+            }
+        }
+
+        .#{$prefix}-text-muted.#{$prefix}-text-loading,
+        .#{$prefix}-text-muted .#{$prefix}-text-loading {
+            background-image: linear-gradient(
+                90deg,
+                var(--text-muted-color) 25%,
+                var(--text-base-color) 50%,
+                var(--text-muted-color) 75%
+            );
+        }
+
+        .#{$prefix}-text-primary.#{$prefix}-text-loading,
+        .#{$prefix}-text-primary .#{$prefix}-text-loading {
+            --primary-muted-color: color-mix(in sRGB, var(--text-primary-color) 50%, transparent);
+            background-image: linear-gradient(
+                90deg,
+                var(--text-primary-color) 25%,
+                var(--primary-muted-color) 50%,
+                var(--text-primary-color) 75%
+            );
+        }
+
+        .#{$prefix}-text-secondary.#{$prefix}-text-loading,
+        .#{$prefix}-text-secondary .#{$prefix}-text-loading {
+            --secondary-muted-color: color-mix(in sRGB, var(--text-secondary-color) 50%, transparent);
+            background-image: linear-gradient(
+                90deg,
+                var(--text-secondary-color) 25%,
+                var(--secondary-muted-color) 50%,
+                var(--text-secondary-color) 75%
+            );
+        }
+
+        .#{$prefix}-text-tertiary.#{$prefix}-text-loading,
+        .#{$prefix}-text-tertiary .#{$prefix}-text-loading {
+            --tertiary-muted-color: color-mix(in sRGB, var(--text-tertiary-color) 50%, transparent);
+            background-image: linear-gradient(
+                90deg,
+                var(--text-tertiary-color) 25%,
+                var(--tertiary-muted-color) 50%,
+                var(--text-tertiary-color) 75%
+            );
+        }
+
+        .#{$prefix}-text-warning.#{$prefix}-text-loading,
+        .#{$prefix}-text-warning .#{$prefix}-text-loading {
+            --warning-muted-color: color-mix(in sRGB, var(--text-warning-color) 50%, transparent);
+            background-image: linear-gradient(
+                90deg,
+                var(--text-warning-color) 25%,
+                var(--warning-muted-color) 50%,
+                var(--text-warning-color) 75%
+            );
+        }
+
+        .#{$prefix}-text-danger.#{$prefix}-text-loading,
+        .#{$prefix}-text-danger .#{$prefix}-text-loading {
+            --danger-muted-color: color-mix(in sRGB, var(--text-danger-color) 50%, transparent);
+            background-image: linear-gradient(
+                90deg,
+                var(--text-danger-color) 25%,
+                var(--danger-muted-color) 50%,
+                var(--text-danger-color) 75%
+            );
+        }
+    }
+
+    @keyframes uk-text-loading {
+        0% {
+            background-position: 200% 0;
+        }
+
+        100% {
+            background-position: -200% 0;
+        }
+    }
+
+
+    /* Alignment modifiers
+     ========================================================================== */
+
+    .#{$prefix}-text-left { text-align: left !important; }
+    .#{$prefix}-text-right { text-align: right !important; }
+    .#{$prefix}-text-center { text-align: center !important; }
+    .#{$prefix}-text-justify { text-align: justify !important; }
+
+    /* Phone landscape and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-small) {
+
+        .#{$prefix}-text-left\@s { text-align: left !important; }
+        .#{$prefix}-text-right\@s { text-align: right !important; }
+        .#{$prefix}-text-center\@s { text-align: center !important; }
+
+    }
+
+    /* Tablet landscape and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-medium) {
+
+        .#{$prefix}-text-left\@m { text-align: left !important; }
+        .#{$prefix}-text-right\@m { text-align: right !important; }
+        .#{$prefix}-text-center\@m { text-align: center !important; }
+
+    }
+
+    /* Desktop and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-large) {
+
+        .#{$prefix}-text-left\@l { text-align: left !important; }
+        .#{$prefix}-text-right\@l { text-align: right !important; }
+        .#{$prefix}-text-center\@l { text-align: center !important; }
+
+    }
+
+    /* Large screen and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-xlarge) {
+
+        .#{$prefix}-text-left\@xl { text-align: left !important; }
+        .#{$prefix}-text-right\@xl { text-align: right !important; }
+        .#{$prefix}-text-center\@xl { text-align: center !important; }
+
+    }
+
+    /*
+     * Vertical
+     */
+
+    .#{$prefix}-text-top { vertical-align: top !important; }
+    .#{$prefix}-text-middle { vertical-align: middle !important; }
+    .#{$prefix}-text-bottom { vertical-align: bottom !important; }
+    .#{$prefix}-text-baseline { vertical-align: baseline !important; }
+
+
+    /* Wrap modifiers
+     ========================================================================== */
+
+    /*
+     * Prevent text from wrapping onto multiple lines
+     */
+
+    .#{$prefix}-text-nowrap { white-space: nowrap; }
+
+    /*
+     * 1. Make sure a max-width is set after which truncation can occur
+     * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
+     * 3. Fix for table cells
+     */
+
+    .#{$prefix}-text-truncate {
+        /* 1 */
+        max-width: 100%;
+
+        /* 2 */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    /* 2 */
+    th.#{$prefix}-text-truncate,
+    td.#{$prefix}-text-truncate { max-width: 0; }
+
+
+    /*
+     * 1. Wrap long words onto the next line and break them if they are too long to fit
+     * 2. Legacy `word-wrap` as fallback for `overflow-wrap`
+     * 3. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge
+     *    Must use `break-all` to support IE11 and Edge
+     * Note: Not using `hyphens: auto;` because it hyphenates text even if not needed
+     */
+
+    .#{$prefix}-text-break {
+        /* 1 */
+        overflow-wrap: break-word;
+
+        /* 2 */
+        // noinspection Stylelint
+        word-wrap: break-word;
+    }
+
+    /* 3 */
+    th.#{$prefix}-text-break,
+    td.#{$prefix}-text-break { word-break: break-all; }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-text-misc') {
+        @include meta.apply(map.get($mixins, 'hook-text-misc'));
+    }
+
+    @content;
+}
+
+@mixin text-tokens {
+    --text-base-font-size: var(--global-font-size);
+    --text-base-line-height: var(--global-line-height);
+    --text-base-color: var(--global-color);
+    --text-lead-font-size: var(--global-large-font-size);
+    --text-lead-line-height: #{$text-lead-line-height};
+    --text-lead-color: var(--global-emphasis-color);
+    --text-meta-font-size: var(--global-small-font-size);
+    --text-meta-line-height: #{$text-meta-line-height};
+    --text-meta-color: var(--global-muted-color);
+    --text-xsmall-font-size: var(--global-xsmall-font-size);
+    --text-xsmall-line-height: #{$text-xsmall-line-height};
+    --text-small-font-size: var(--global-small-font-size);
+    --text-small-line-height: #{$text-small-line-height};
+    --text-large-font-size: var(--global-large-font-size);
+    --text-large-line-height: #{$text-large-line-height};
+    --text-muted-color: var(--global-muted-color);
+    --text-emphasis-color: var(--global-emphasis-color);
+    --text-primary-color: var(--global-primary-color);
+    --text-secondary-color: var(--global-secondary-color);
+    --text-tertiary-color: var(--global-tertiary-color);
+    --text-success-color: var(--global-success-color);
+    --text-warning-color: var(--global-warning-color);
+    --text-danger-color: var(--global-danger-color);
+    --text-background-color: var(--global-primary-background);
+    --text-loading-color: var(--global-color);
+    --text-loading-emphasis-color: var(--global-muted-color);
+
+    @content;
+}
+
+@mixin text-inverse-tokens {
+    --inverse-text-lead-color: var(--inverse-global-color);
+    --inverse-text-meta-color: var(--inverse-global-muted-color);
+    --inverse-text-muted-color: var(--inverse-global-muted-color);
+    --inverse-text-emphasis-color: var(--inverse-global-emphasis-color);
+    --inverse-text-primary-color: var(--inverse-global-primary-background);
+    --inverse-text-secondary-color: var(--inverse-global-primary-background);
+    --inverse-text-tertiary-color: var(--inverse-global-primary-background);
+
+    @content;
+}

package/styles/textarea/_index.scss

@@ -0,0 +1,11 @@
+@use 'textarea' as *;
+
+$generate-tokens: true !default;
+
+@include textarea-styles;
+
+@if $generate-tokens {
+    :root {
+        @include textarea-tokens;
+    }
+}

package/styles/textarea/_textarea.scss

@@ -0,0 +1,98 @@
+// Name:            Textarea
+// Description:     Component to create Textarea element
+//
+// Component:       `uk-control-textarea`
+//
+// Modifier:        `uk-control-small`
+//                  `uk-control-medium`
+//                  `uk-control-large`
+//                  `uk-control-success`
+//                  `uk-control-warning`
+//                  `uk-control-danger`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin textarea-styles {
+    /* ========================================================================
+       Component: Textarea
+     ========================================================================== */
+
+    .#{$prefix}-control.#{$prefix}-control-textarea {
+        height: auto;
+        max-width: 100%;
+        padding: 0;
+        @if map.has-key($mixins, 'hook-textarea-control') {
+            @include meta.apply(map.get($mixins, 'hook-textarea-control'));
+        }
+    }
+
+    .#{$prefix}-control-textarea-show-count::after {
+        background-color: var(--textarea-counter-background);
+        border-radius: var(--textarea-counter-border-radius);
+        bottom: 5px;
+        color: var(--textarea-counter-color);
+        content: attr(data-count);
+        font-size: var(--textarea-counter-font-size);
+        padding: 0 2px 2px;
+        pointer-events: none;
+        position: absolute;
+        right: 5px;
+        white-space: nowrap;
+        @if map.has-key($mixins, 'hook-textarea-counter') {
+            @include meta.apply(map.get($mixins, 'hook-textarea-counter'));
+        }
+    }
+
+
+    /* Textarea element
+     ========================================================================== */
+
+    // Reset height for `textarea`s
+    .#{$prefix}-control-textarea .#{$prefix}-textarea {
+        background-color: transparent;
+        box-sizing: border-box;
+        color: var(--textarea-color);
+        height: auto;
+        line-height: normal;
+        max-width: 100%; // prevent textarea resize from coming out of its container
+        min-height: var(--control-height);
+        padding: var(--textarea-padding-vertical) var(--textarea-padding-horizontal);
+        resize: none;
+        vertical-align: bottom;
+        @if map.has-key($mixins, 'hook-textarea') {
+            @include meta.apply(map.get($mixins, 'hook-textarea'));
+        }
+    }
+
+    /* Hover + Focus states */
+    .#{$prefix}-control-textarea:hover .#{$prefix}-textarea,
+    .#{$prefix}-control-textarea:focus-within .#{$prefix}-textarea {
+        background-color: transparent;
+        color: var(--textarea-color);
+    }
+
+    @content;
+}
+
+@mixin textarea-tokens {
+    --textarea-color: var(--control-color);
+    --textarea-padding-vertical: calc(var(--control-padding-horizontal) / 2);
+    --textarea-padding-horizontal: var(--control-padding-horizontal);
+    --textarea-counter-background: var(--global-default-background);
+    --textarea-counter-border-radius: var(--control-border-radius);
+    --textarea-counter-color: var(--global-muted-color);
+    --textarea-counter-font-size: #{$textarea-counter-font-size};
+
+    @content;
+}

package/styles/thumbnav/_index.scss

@@ -0,0 +1,11 @@
+@use 'thumbnav' as *;
+
+$generate-tokens: true !default;
+
+@include thumbnav-styles;
+
+@if $generate-tokens {
+    :root {
+        @include thumbnav-tokens;
+    }
+}

package/styles/thumbnav/_thumbnav.scss

@@ -0,0 +1,130 @@
+// Name:            Thumbnav
+// Description:     Component to create thumbnail navigations
+//
+// Component:       `uk-thumbnav`
+//
+// Modifier:        `uk-thumbnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin thumbnav-styles {
+    /* ========================================================================
+       Component: Thumbnav
+     ========================================================================== */
+
+    /*
+     * 1. Allow items to wrap into the next line
+     * 2. Reset list
+     * 3. Gutter
+     */
+
+    .#{$prefix}-thumbnav {
+        display: flex;
+
+        /* 1 */
+        flex-wrap: wrap;
+        list-style: none;
+
+        /* 2 */
+        margin: 0 0 0 /* 3 */ calc(var(--thumbnav-margin-horizontal) * -1);
+        padding: 0;
+        @if map.has-key($mixins, 'hook-thumbnav') {
+            @include meta.apply(map.get($mixins, 'hook-thumbnav'));
+        }
+    }
+
+    /*
+     * Space is allocated based on content dimensions, but shrinks: 0 1 auto
+     * 1. Gutter
+     */
+
+    .#{$prefix}-thumbnav > * {
+        /* 1 */
+        padding-left: var(--thumbnav-margin-horizontal);
+    }
+
+
+    /* Items
+     ========================================================================== */
+
+    /*
+     * Items
+     */
+
+    .#{$prefix}-thumbnav > * > * {
+        display: inline-block;
+        @if map.has-key($mixins, 'hook-thumbnav-item') {
+            @include meta.apply(map.get($mixins, 'hook-thumbnav-item'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-thumbnav > * > :hover,
+    .#{$prefix}-thumbnav > * > :focus {
+        outline: none;
+        @if map.has-key($mixins, 'hook-thumbnav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-thumbnav-item-hover'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-thumbnav > .#{$prefix}-active > * {
+        @if map.has-key($mixins, 'hook-thumbnav-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-thumbnav-item-active'));
+        }
+    }
+
+
+    /* Modifier: 'uk-thumbnav-vertical'
+     ========================================================================== */
+
+    /*
+     * 1. Change direction
+     * 2. Gutter
+     */
+
+    .#{$prefix}-thumbnav-vertical {
+        /* 1 */
+        flex-direction: column;
+
+        /* 2 */
+        margin-left: 0;
+        margin-top: calc(var(--thumbnav-margin-vertical) * -1);
+    }
+
+    /* 2 */
+    .#{$prefix}-thumbnav-vertical > * {
+        padding-left: 0;
+        padding-top: var(--thumbnav-margin-vertical);
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-thumbnav-misc') {
+        @include meta.apply(map.get($mixins, 'hook-thumbnav-misc'));
+    }
+
+    @content;
+}
+
+@mixin thumbnav-tokens {
+    --thumbnav-margin-horizontal: #{$thumbnav-margin-horizontal};
+    --thumbnav-margin-vertical: var(--thumbnav-margin-horizontal);
+
+    @content;
+}

package/styles/tile/_index.scss

@@ -0,0 +1,11 @@
+@use 'tile' as *;
+
+$generate-tokens: true !default;
+
+@include tile-styles;
+
+@if $generate-tokens {
+    :root {
+        @include tile-tokens;
+    }
+}