@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/iconnav/_iconnav.scss

@@ -0,0 +1,149 @@
+// Name:            Iconnav
+// Description:     Component to create icon navigations
+//
+// Component:       `uk-iconnav`
+//
+// Modifier:        `uk-iconnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin iconnav-styles {
+    /* ========================================================================
+       Component: Iconnav
+     ========================================================================== */
+
+    /*
+     * 1. Allow items to wrap into the next line
+     * 2. Reset list
+     * 3. Gutter
+     */
+
+    .#{$prefix}-iconnav {
+        display: flex;
+
+        /* 1 */
+        flex-wrap: wrap;
+        list-style: none;
+
+        /* 2 */
+        margin: 0 0 0 /* 3 */ calc(var(--iconnav-margin-horizontal) * -1);
+        padding: 0;
+        @if map.has-key($mixins, 'hook-iconnav') {
+            @include meta.apply(map.get($mixins, 'hook-iconnav'));
+        }
+    }
+
+    /*
+     * Space is allocated based on content dimensions, but shrinks: 0 1 auto
+     * 1. Gutter
+     */
+
+    .#{$prefix}-iconnav > * {
+        /* 1 */
+        padding-left: var(--iconnav-margin-horizontal);
+    }
+
+
+    /* Items
+     ========================================================================== */
+
+    /*
+     * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+     * 1. Prevent gap if child element is `inline-block`, e.g. an icon
+     * 2. Style
+     */
+
+    .#{$prefix}-iconnav > * > a {
+        /* 2 */
+        color: var(--iconnav-item-color);
+
+        /* 1 */
+        display: block;
+        @if map.has-key($mixins, 'hook-iconnav-item') {
+            @include meta.apply(map.get($mixins, 'hook-iconnav-item'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-iconnav > * > a:hover,
+    .#{$prefix}-iconnav > * > a:focus {
+        color: var(--iconnav-item-hover-color);
+        outline: none;
+        @if map.has-key($mixins, 'hook-iconnav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-iconnav-item-hover'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-iconnav > .#{$prefix}-active > a {
+        color: var(--iconnav-item-active-color);
+        @if map.has-key($mixins, 'hook-iconnav-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-iconnav-item-active'));
+        }
+    }
+
+
+    /* Modifier: 'uk-iconnav-vertical'
+     ========================================================================== */
+
+    /*
+     * 1. Change direction
+     * 2. Gutter
+     */
+
+    .#{$prefix}-iconnav-vertical {
+        /* 1 */
+        flex-direction: column;
+
+        /* 2 */
+        margin-left: 0;
+        margin-top: calc(var(--iconnav-margin-vertical) * -1);
+    }
+
+    /* 2 */
+    .#{$prefix}-iconnav-vertical > * {
+        padding-left: 0;
+        padding-top: var(--iconnav-margin-vertical);
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-iconnav-misc') {
+        @include meta.apply(map.get($mixins, 'hook-iconnav-misc'));
+    }
+
+    @content;
+}
+
+@mixin iconnav-tokens {
+    --iconnav-margin-horizontal: var(--global-small-margin);
+    --iconnav-margin-vertical: var(--iconnav-margin-horizontal);
+    --iconnav-item-color: var(--global-muted-color);
+    --iconnav-item-hover-color: var(--global-color);
+    --iconnav-item-active-color: var(--global-color);
+
+    @content;
+}
+
+@mixin iconnav-inverse-tokens {
+    --inverse-iconnav-item-color: var(--inverse-global-muted-color);
+    --inverse-iconnav-item-hover-color: var(--inverse-global-color);
+    --inverse-iconnav-item-active-color: var(--inverse-global-color);
+
+    @content;
+}

package/styles/iconnav/_index.scss

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

package/styles/input-number/_index.scss

@@ -0,0 +1,8 @@
+@use 'input-number' as *;
+
+$generate-tokens: true !default;
+
+@include input-number-styles;
+
+// No tokens for this component
+// :root { @include input-number-tokens; }

package/styles/input-number/_input-number.scss

@@ -0,0 +1,115 @@
+// Name:            Number Input Control
+// Description:     Component to create Number Input element
+//
+// Component:       `uk-control-number`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin input-number-styles {
+    /* ========================================================================
+       Component: Number
+     ========================================================================== */
+
+    .#{$prefix}-number-wrapper {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        padding: 0;
+        width: 100%;
+    }
+
+    .#{$prefix}-number-input {
+        -webkit-appearance: none;
+        background: none;
+        border: 0 none;
+        color: inherit;
+        display: inline-block;
+        font: inherit;
+        max-width: 100%;
+        outline: 0 none;
+        overflow: visible;
+        padding: 0;
+        vertical-align: middle;
+        width: 100%;
+    }
+
+    .#{$prefix}-number-input:focus {
+        outline: 0 none;
+    }
+
+    .#{$prefix}-number-input[type='number']::-webkit-inner-spin-button,
+    .#{$prefix}-number-input[type='number']::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        height: auto;
+        margin: 0;
+    }
+
+    .#{$prefix}-number-input::-moz-placeholder {
+        opacity: 1;
+    }
+
+    .#{$prefix}-number-input::-ms-input-placeholder {
+        color: var(--control-placeholder-color) !important;
+    }
+
+    .#{$prefix}-number-input::placeholder {
+        color: var(--control-placeholder-color);
+    }
+
+    .#{$prefix}-number-actions {
+        background-color: transparent;
+        border: 0 none;
+        border-radius: 0;
+        height: calc(2em - var(--control-border-width) * 2);
+        opacity: 1;
+        order: 99;
+    }
+
+    .#{$prefix}-number-action {
+        align-items: center;
+        border: 0;
+        border-radius: 0;
+        display: flex;
+        height: 50%;
+    }
+
+    .#{$prefix}-number-action:active .#{$prefix}-number-action-up-inner,
+    .#{$prefix}-number-action:active .#{$prefix}-number-action-down-inner {
+        transform: scale(0.9);
+    }
+
+    .#{$prefix}-number-action .#{$prefix}-number-action-up-inner,
+    .#{$prefix}-number-action .#{$prefix}-number-action-down-inner {
+        color: var(--control-icon-color);
+        cursor: pointer;
+        transform: none;
+        transform-origin: 50% 50%;
+
+        &:hover { color: var(--control-icon-hover-color); }
+    }
+
+
+    /* Control
+     ========================================================================== */
+
+    .#{$prefix}-control-number.#{$prefix}-disabled .#{$prefix}-number-actions,
+    .#{$prefix}-control-number.#{$prefix}-readonly .#{$prefix}-number-actions {
+        display: none;
+    }
+
+
+    @content;
+}
+
+// No CSS custom properties for this component
+@mixin input-number-tokens {
+    @content;
+}

package/styles/input-password/_index.scss

@@ -0,0 +1,8 @@
+@use 'input-password' as *;
+
+$generate-tokens: true !default;
+
+@include input-password-styles;
+
+// No tokens for this component
+// :root { @include input-password-tokens; }

package/styles/input-password/_input-password.scss

@@ -0,0 +1,52 @@
+// Name:            Number Input Control
+// Description:     Component to create Number Input element
+//
+// Component:       `uk-control-password`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin input-password-styles {
+    /* ========================================================================
+       Component: Password
+     ========================================================================== */
+
+    .#{$prefix}-control-password,
+    .#{$prefix}-control-text {
+        /*
+         * Icon
+         */
+
+        .#{$prefix}-control-password-icon {
+            color: var(--control-icon-color);
+            cursor: pointer;
+            font-size: 0.8rem;
+            transition: all var(--transition-duration);
+        }
+
+        // Hover state
+        .#{$prefix}-control-password-icon:hover {
+            color: var(--control-icon-hover-color);
+        }
+
+        // Disabled state
+        .#{$prefix}-control-password.#{$prefix}-disabled .#{$prefix}-control-password-icon {
+            display: none;
+        }
+    }
+
+
+    @content;
+}
+
+// No CSS custom properties for this component
+@mixin input-password-tokens {
+    @content;
+}

package/styles/inverse/_index.scss

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

package/styles/inverse/_inverse.scss

@@ -0,0 +1,68 @@
+// Name:            Inverse
+// Description:     Inverse component style for light or dark backgrounds
+//
+// Component:       `uk-light`
+//                  `uk-dark`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin inverse-styles {
+    /* ========================================================================
+       Component: Inverse
+     ========================================================================== */
+
+    /*
+     * Implemented class depends on the general theme color
+     * `uk-light` is for light colors on dark backgrounds
+     * `uk-dark` is for dark colors on light backgrounds
+     */
+
+    @if $inverse-global-color-mode == light {
+        .#{$prefix}-light {
+            @if map.has-key($mixins, 'hook-inverse') {
+                @include meta.apply(map.get($mixins, 'hook-inverse'));
+            }
+        }
+    }
+
+    @if $inverse-global-color-mode == dark {
+        .#{$prefix}-dark {
+            @if map.has-key($mixins, 'hook-inverse') {
+                @include meta.apply(map.get($mixins, 'hook-inverse'));
+            }
+        }
+    }
+
+    * { --uk-inverse: initial; }
+
+    .#{$prefix}-light { --uk-inverse: light; }
+    .#{$prefix}-dark { --uk-inverse: dark; }
+
+    .#{$prefix}-inverse-light { --uk-inverse: light !important; }
+    .#{$prefix}-inverse-dark { --uk-inverse: dark !important; }
+
+    @content;
+}
+
+@mixin inverse-tokens {
+    --inverse-global-color: #{$inverse-global-color};
+    --inverse-global-emphasis-color: #{$inverse-global-emphasis-color};
+    --inverse-global-muted-color: #{$inverse-global-muted-color};
+    --inverse-global-inverse-color: #{$inverse-global-inverse-color};
+    --inverse-global-primary-background: #{$inverse-global-primary-background};
+    --inverse-global-muted-background: #{$inverse-global-muted-background};
+    --inverse-global-border: #{$inverse-global-border};
+
+    @content;
+}

package/styles/label/_index.scss

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

package/styles/label/_label.scss

@@ -0,0 +1,132 @@
+// Name:            Label
+// Description:     Component to indicate important notes
+//
+// Component:       `uk-label`
+//
+// Modifiers:       `uk-label-large`
+//                  `uk-label-success`
+//                  `uk-label-warning`
+//                  `uk-label-danger`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin label-styles {
+    /* ========================================================================
+       Component: Label
+     ========================================================================== */
+
+    .#{$prefix}-label {
+        background: var(--label-background);
+        border-radius: var(--label-border-radius);
+        color: var(--label-color);
+        display: inline-flex;
+        font-size: var(--label-font-size);
+        line-height: var(--label-line-height);
+        padding: var(--label-padding-vertical) var(--label-padding-horizontal);
+        vertical-align: middle;
+        white-space: nowrap;
+        @if map.has-key($mixins, 'hook-label') {
+            @include meta.apply(map.get($mixins, 'hook-label'));
+        }
+    }
+
+
+    /* Size modifiers
+     ========================================================================== */
+
+    .#{$prefix}-label-large {
+        font-size: var(--label-large-font-size);
+        line-height: var(--label-large-line-height);
+        padding: var(--label-large-padding-vertical) var(--label-large-padding-horizontal);
+    }
+
+
+    /* Color modifiers
+     ========================================================================== */
+
+    /*
+     * Success
+     */
+
+    .#{$prefix}-label-success {
+        background-color: var(--label-success-background);
+        color: var(--label-success-color);
+        @if map.has-key($mixins, 'hook-label-success') {
+            @include meta.apply(map.get($mixins, 'hook-label-success'));
+        }
+    }
+
+    /*
+     * Warning
+     */
+
+    .#{$prefix}-label-warning {
+        background-color: var(--label-warning-background);
+        color: var(--label-warning-color);
+        @if map.has-key($mixins, 'hook-label-warning') {
+            @include meta.apply(map.get($mixins, 'hook-label-warning'));
+        }
+    }
+
+    /*
+     * Danger
+     */
+
+    .#{$prefix}-label-danger {
+        background-color: var(--label-danger-background);
+        color: var(--label-danger-color);
+        @if map.has-key($mixins, 'hook-label-danger') {
+            @include meta.apply(map.get($mixins, 'hook-label-danger'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-label-misc') {
+        @include meta.apply(map.get($mixins, 'hook-label-misc'));
+    }
+
+    @content;
+}
+
+@mixin label-tokens {
+    --label-padding-horizontal: var(--global-small-margin);
+    --label-padding-vertical: #{$label-padding-vertical};
+    --label-background: var(--global-primary-background);
+    --label-border-radius: #{$label-border-radius};
+    --label-font-size: var(--global-small-font-size);
+    --label-line-height: var(--global-line-height);
+    --label-large-padding-horizontal: var(--global-margin);
+    --label-large-padding-vertical: var(--global-xsmall-margin);
+    --label-large-font-size: var(--global-small-font-size);
+    --label-large-line-height: var(--global-line-height);
+    --label-color: var(--global-inverse-color);
+    --label-success-background: var(--global-success-background);
+    --label-success-color: var(--global-inverse-color);
+    --label-warning-background: var(--global-warning-background);
+    --label-warning-color: var(--global-inverse-color);
+    --label-danger-background: var(--global-danger-background);
+    --label-danger-color: var(--global-inverse-color);
+
+    @content;
+}
+
+@mixin label-inverse-tokens {
+    --inverse-label-background: var(--inverse-global-primary-background);
+    --inverse-label-color: var(--inverse-global-inverse-color);
+
+    @content;
+}

package/styles/leader/_index.scss

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

package/styles/leader/_leader.scss

@@ -0,0 +1,80 @@
+// Name:            Leader
+// Description:     Component to create dot leaders
+//
+// Component:       `uk-leader`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin leader-styles {
+    /* ========================================================================
+       Component: Leader
+     ========================================================================== */
+
+    .#{$prefix}-leader { overflow: hidden; }
+
+    /*
+     * 1. Place element in text flow
+     * 2. Never break into a new line
+     * 3. Get a string back with as many repeating characters to fill the container
+     * 4. Prevent wrapping. Overflowing characters will be clipped by the container
+     */
+
+    .#{$prefix}-leader-fill::after {
+        /* 3 */
+        content: attr(data-fill);
+
+        /* 1 */
+        display: inline-block;
+        margin-left: var(--leader-fill-margin-left);
+
+        /* 4 */
+        white-space: nowrap;
+
+        /* 2 */
+        width: 0;
+        @if map.has-key($mixins, 'hook-leader') {
+            @include meta.apply(map.get($mixins, 'hook-leader'));
+        }
+    }
+
+    /*
+     * Hide if media does not match
+     */
+
+    .#{$prefix}-leader-fill.#{$prefix}-leader-hide::after { display: none; }
+
+    /*
+     * Pass fill character to JS
+     */
+
+    .#{$prefix}-leader-fill-content::before { content: var(--leader-fill-content); }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-leader-misc') {
+        @include meta.apply(map.get($mixins, 'hook-leader-misc'));
+    }
+
+    @content;
+}
+
+@mixin leader-tokens {
+    --leader-fill-content: #{$leader-fill-content};
+    --leader-fill-margin-left: var(--global-small-gutter);
+    --uk-leader-fill-content: var(--leader-fill-content);
+
+    @content;
+}

package/styles/link/_index.scss

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