@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/subnav/_index.scss

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

package/styles/subnav/_subnav.scss

@@ -0,0 +1,267 @@
+// Name:            Subnav
+// Description:     Component to create a sub navigation
+//
+// Component:       `uk-subnav`
+//
+// Modifiers:       `uk-subnav-divider`
+//                  `uk-subnav-pill`
+//
+// States:          `uk-active`
+//                  `uk-first-column`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin subnav-styles {
+    /* ========================================================================
+       Component: Subnav
+     ========================================================================== */
+
+    /*
+     * 1. Allow items to wrap into the next line
+     * 2. Center items vertically if they have a different height
+     * 3. Gutter
+     * 4. Reset list
+     */
+
+    .#{$prefix}-subnav {
+        /* 2 */
+        align-items: center;
+        display: flex;
+
+        /* 1 */
+        flex-wrap: wrap;
+        list-style: none;
+
+        /* 3 */
+        margin-left: calc(var(--subnav-margin-horizontal) * -1);
+
+        /* 4 */
+        padding: 0;
+        @if map.has-key($mixins, 'hook-subnav') {
+            @include meta.apply(map.get($mixins, 'hook-subnav'));
+        }
+    }
+
+    /*
+     * 1. Space is allocated solely based on content dimensions: 0 0 auto
+     * 2. Gutter
+     * 3. Create position context for dropdowns
+     */
+
+    .#{$prefix}-subnav > * {
+        /* 1 */
+        flex: none;
+
+        /* 2 */
+        padding-left: var(--subnav-margin-horizontal);
+
+        /* 3 */
+        position: relative;
+    }
+
+
+    /* Items
+     ========================================================================== */
+
+    /*
+     * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+     * Using `:first-child` instead of `a` to support `span` elements for text
+     * 1. Center content vertically, e.g. an icon
+     * 2. Imitate white space gap when using flexbox
+     * 3. Style
+     */
+
+    .#{$prefix}-subnav > * > :first-child {
+        align-items: center;
+
+        /* 3 */
+        color: var(--subnav-item-color);
+
+        /* 2 */
+        column-gap: 0.25em;
+
+        /* 1 */
+        display: flex;
+        @if map.has-key($mixins, 'hook-subnav-item') {
+            @include meta.apply(map.get($mixins, 'hook-subnav-item'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-subnav > * > a:hover,
+    .#{$prefix}-subnav > * > a:focus {
+        color: var(--subnav-item-hover-color);
+        outline: none;
+        text-decoration: var(--subnav-item-hover-text-decoration);
+        @if map.has-key($mixins, 'hook-subnav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-subnav-item-hover'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-subnav > .#{$prefix}-active > a {
+        color: var(--subnav-item-active-color);
+        @if map.has-key($mixins, 'hook-subnav-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-subnav-item-active'));
+        }
+    }
+
+
+    /* Divider modifier
+     ========================================================================== */
+
+    /*
+     * Set gutter
+     */
+
+    .#{$prefix}-subnav-divider {
+        margin-left: calc((var(--subnav-divider-margin-horizontal) * 2 + var(--subnav-divider-border-width)) * -1);
+    }
+
+    /*
+     * Align items and divider vertically
+     */
+
+    .#{$prefix}-subnav-divider > * {
+        align-items: center;
+        display: flex;
+    }
+
+    /*
+     * Divider
+     * 1. `nth-child` makes it also work without JS if it's only one row
+     */
+
+    .#{$prefix}-subnav-divider > ::before {
+        border-left: var(--subnav-divider-border-width) solid transparent;
+        content: '';
+        height: var(--subnav-divider-border-height);
+        margin-left: calc(var(--subnav-divider-margin-horizontal) - var(--subnav-margin-horizontal));
+        margin-right: var(--subnav-divider-margin-horizontal);
+    }
+
+    /* 1 */
+    .#{$prefix}-subnav-divider > :nth-child(n+2):not(.#{$prefix}-first-column)::before {
+        border-left-color: var(--subnav-divider-border);
+        @if map.has-key($mixins, 'hook-subnav-divider') {
+            @include meta.apply(map.get($mixins, 'hook-subnav-divider'));
+        }
+    }
+
+
+    /* Pill modifier
+     ========================================================================== */
+
+    .#{$prefix}-subnav-pill > * > :first-child {
+        background: var(--subnav-pill-item-background);
+        color: var(--subnav-pill-item-color);
+        padding: var(--subnav-pill-item-padding-vertical) var(--subnav-pill-item-padding-horizontal);
+        @if map.has-key($mixins, 'hook-subnav-pill-item') {
+            @include meta.apply(map.get($mixins, 'hook-subnav-pill-item'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-subnav-pill > * > a:hover,
+    .#{$prefix}-subnav-pill > * > a:focus {
+        background-color: var(--subnav-pill-item-hover-background);
+        color: var(--subnav-pill-item-hover-color);
+        @if map.has-key($mixins, 'hook-subnav-pill-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-subnav-pill-item-hover'));
+        }
+    }
+
+    /* OnClick */
+    .#{$prefix}-subnav-pill > * > a:active {
+        background-color: var(--subnav-pill-item-onclick-background);
+        color: var(--subnav-pill-item-onclick-color);
+        @if map.has-key($mixins, 'hook-subnav-pill-item-onclick') {
+            @include meta.apply(map.get($mixins, 'hook-subnav-pill-item-onclick'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-subnav-pill > .#{$prefix}-active > a {
+        background-color: var(--subnav-pill-item-active-background);
+        color: var(--subnav-pill-item-active-color);
+        @if map.has-key($mixins, 'hook-subnav-pill-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-subnav-pill-item-active'));
+        }
+    }
+
+
+    /* Disabled
+     * The same for all style modifiers
+     ========================================================================== */
+
+    .#{$prefix}-subnav > .#{$prefix}-disabled > a {
+        color: var(--subnav-item-disabled-color);
+        @if map.has-key($mixins, 'hook-subnav-item-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-subnav-item-disabled'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-subnav-misc') {
+        @include meta.apply(map.get($mixins, 'hook-subnav-misc'));
+    }
+
+    @content;
+}
+
+@mixin subnav-tokens {
+    --subnav-margin-horizontal: #{$subnav-margin-horizontal};
+    --subnav-item-color: var(--global-muted-color);
+    --subnav-item-hover-color: var(--global-color);
+    --subnav-item-hover-text-decoration: #{$subnav-item-hover-text-decoration};
+    --subnav-item-active-color: var(--global-emphasis-color);
+    --subnav-divider-margin-horizontal: #{$subnav-margin-horizontal};
+    --subnav-divider-border-height: #{$subnav-divider-border-height};
+    --subnav-divider-border-width: var(--global-border-width);
+    --subnav-divider-border: var(--global-border);
+    --subnav-pill-item-padding-horizontal: #{$subnav-pill-item-padding-horizontal};
+    --subnav-pill-item-padding-vertical: #{$subnav-pill-item-padding-vertical};
+    --subnav-pill-item-background: #{$subnav-pill-item-background};
+    --subnav-pill-item-color: #{$subnav-item-color};
+    --subnav-pill-item-hover-background: var(--global-muted-background);
+    --subnav-pill-item-hover-color: var(--global-color);
+    --subnav-pill-item-onclick-background: #{$subnav-pill-item-hover-background};
+    --subnav-pill-item-onclick-color: #{$subnav-pill-item-hover-color};
+    --subnav-pill-item-active-background: var(--global-primary-background);
+    --subnav-pill-item-active-color: var(--global-inverse-color);
+    --subnav-item-disabled-color: var(--global-muted-color);
+
+    @content;
+}
+
+@mixin subnav-inverse-tokens {
+    --inverse-subnav-item-color: var(--inverse-global-muted-color);
+    --inverse-subnav-item-hover-color: var(--inverse-global-color);
+    --inverse-subnav-item-active-color: var(--inverse-global-emphasis-color);
+    --inverse-subnav-divider-border: var(--inverse-global-border);
+    --inverse-subnav-pill-item-background: #{$inverse-subnav-pill-item-background};
+    --inverse-subnav-pill-item-color: var(--inverse-global-muted-color);
+    --inverse-subnav-pill-item-hover-background: var(--inverse-global-muted-background);
+    --inverse-subnav-pill-item-hover-color: var(--inverse-global-color);
+    --inverse-subnav-pill-item-onclick-background: #{$inverse-subnav-pill-item-hover-background};
+    --inverse-subnav-pill-item-onclick-color: #{$inverse-subnav-pill-item-hover-color};
+    --inverse-subnav-pill-item-active-background: var(--inverse-global-primary-background);
+    --inverse-subnav-pill-item-active-color: var(--inverse-global-inverse-color);
+    --inverse-subnav-item-disabled-color: var(--inverse-global-muted-color);
+
+    @content;
+}

package/styles/svg/_index.scss

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

package/styles/svg/_svg.scss

@@ -0,0 +1,64 @@
+// Name:            SVG
+// Description:     Component to style SVGs
+//
+// Component:       `uk-svg`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin svg-styles {
+    /* ========================================================================
+       Component: SVG
+     ========================================================================== */
+
+    /*
+     * 1. Fill all SVG elements with the current text color if no `fill` attribute is set
+     * 2. Set the fill and stroke color of all SVG elements to the current text color
+     */
+
+    /* 1 */
+    .#{$prefix}-svg,
+
+        /* 2 */
+    .#{$prefix}-svg:not(.#{$prefix}-preserve) [fill*='#']:not(.#{$prefix}-preserve) {
+        fill: currentColor;
+    }
+
+    .#{$prefix}-svg:not(.#{$prefix}-preserve) [stroke*='#']:not(.#{$prefix}-preserve) {
+        stroke: currentColor;
+    }
+
+    /*
+     * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
+     */
+
+    .#{$prefix}-svg {
+        transform: translate(0, 0);
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-svg-misc') {
+        @include meta.apply(map.get($mixins, 'hook-svg-misc'));
+    }
+
+
+    @content;
+}
+
+// No CSS custom properties for this component
+@mixin svg-tokens {
+    @content;
+}

package/styles/switch/_index.scss

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

package/styles/switch/_switch.scss

@@ -0,0 +1,226 @@
+// Name:            Switch
+// Description:     Switch Selector
+//
+// Component:       `uk-switch`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin switch-styles {
+    /* ========================================================================
+       Component: Switch
+     ========================================================================== */
+
+    .#{$prefix}-switch {
+        appearance: none;
+        background: var(--switch-background);
+        border: var(--switch-border-width) var(--switch-border-style) var(--switch-border);
+        border-radius: var(--switch-border-radius);
+        box-sizing: content-box;
+        color: inherit;
+        cursor: pointer;
+        display: inline-block;
+        font: inherit;
+        height: var(--switch-height);
+        line-height: var(--switch-height);
+        margin: 0;
+        min-width: var(--switch-width);
+        padding: 0;
+        position: relative;
+        transition: all var(--transition-medium-fast-duration);
+        user-select: none;
+        vertical-align: middle;
+        @if map.has-key($mixins, 'hook-switch') {
+            @include meta.apply(map.get($mixins, 'hook-switch'));
+        }
+    }
+
+    .#{$prefix}-switch:not(.#{$prefix}-switch-disabled):hover::after {
+        visibility: visible;
+    }
+
+    .#{$prefix}-switch-handle {
+        height: calc(var(--switch-height) - var(--switch-handle-offset) * 2);
+        inset-inline-start: var(--switch-handle-offset);
+        position: absolute;
+        top: var(--switch-handle-offset);
+        transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
+        width: calc(var(--switch-height) - var(--switch-handle-offset) * 2);
+        z-index: 10;
+        @if map.has-key($mixins, 'hook-switch-handle') {
+            @include meta.apply(map.get($mixins, 'hook-switch-handle'));
+        }
+    }
+
+    .#{$prefix}-switch-handle::before {
+        background: var(--switch-handle-background);
+        border-radius: var(--switch-handle-border-radius);
+        bottom: 0;
+        content: '';
+        inset-inline: 0;
+        position: absolute;
+        top: 0;
+        transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
+    }
+
+
+    /* Inner
+     ========================================================================== */
+
+    .#{$prefix}-switch-inner {
+        border-radius: var(--switch-border-radius);
+        box-sizing: border-box;
+        display: block;
+        height: 100%;
+        overflow: hidden;
+        padding-inline: calc(var(--switch-height) + var(--switch-handle-offset)) calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
+        transition: padding-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), padding-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
+    }
+
+    .#{$prefix}-switch-inner-checked,
+    .#{$prefix}-switch-inner-unchecked {
+        display: block;
+        pointer-events: none;
+        transition: margin-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), margin-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
+    }
+
+    .#{$prefix}-switch-inner-checked {
+        margin-inline: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2)) calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
+    }
+
+    .#{$prefix}-switch-inner-unchecked {
+        margin-inline: 0;
+        margin-top: calc(var(--switch-height) * -1);
+    }
+
+
+    /* States
+     ========================================================================== */
+
+    // Active state
+    .#{$prefix}-switch:not(.#{$prefix}-switch-disabled):active .#{$prefix}-switch-handle::before {
+        inset-inline: 0 -30%;
+    }
+
+    .#{$prefix}-switch-checked:not(.#{$prefix}-switch-disabled):active .#{$prefix}-switch-handle::before {
+        inset-inline: -30% 0;
+    }
+
+    .#{$prefix}-switch:not(.#{$prefix}-switch-disabled, .#{$prefix}-switch-checked):active .#{$prefix}-switch-inner-unchecked {
+        margin-inline: calc(var(--switch-handle-offset) * 2) calc(var(--switch-handle-offset) * -2);
+    }
+
+    .#{$prefix}-switch-checked:not(.#{$prefix}-switch-disabled):active .#{$prefix}-switch-inner-checked {
+        margin-inline: calc(var(--switch-handle-offset) * -2) calc(var(--switch-handle-offset) * 2);
+    }
+
+    // Checked state
+    .#{$prefix}-switch-checked {
+        background: var(--switch-checked-background);
+
+        @if map.has-key($mixins, 'hook-switch-checked') {
+            @include meta.apply(map.get($mixins, 'hook-switch-checked'));
+        }
+    }
+
+    .#{$prefix}-switch-checked::after {
+        animation: uk-wave-effect 0.36s var(--ease-in-out);
+        animation-fill-mode: backwards;
+        border: var(--switch-border-width) solid var(--switch-checked-background);
+        border-radius: var(--switch-border-radius);
+        box-sizing: border-box;
+        content: '';
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        visibility: hidden;
+        width: 100%;
+    }
+
+    .#{$prefix}-switch-checked .#{$prefix}-switch-handle {
+        inset-inline-start: calc(100% - var(--switch-height) + var(--switch-handle-offset));
+        @if map.has-key($mixins, 'hook-switch-checked-handle') {
+            @include meta.apply(map.get($mixins, 'hook-switch-checked-handle'));
+        }
+    }
+
+    .#{$prefix}-switch-checked .#{$prefix}-switch-handle::before {
+        background: var(--switch-handle-checked-background);
+    }
+
+    .#{$prefix}-switch-checked .#{$prefix}-switch-inner {
+        padding-inline: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666) calc(var(--switch-height) + var(--switch-handle-offset));
+    }
+
+    .#{$prefix}-switch-checked .#{$prefix}-switch-inner-checked {
+        margin-inline: 0;
+    }
+
+    .#{$prefix}-switch-checked .#{$prefix}-switch-inner-unchecked {
+        margin-inline: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2)) calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
+    }
+
+    // Disabled
+    .#{$prefix}-switch-disabled {
+        cursor: not-allowed;
+        opacity: 0.65;
+
+        @if map.has-key($mixins, 'hook-switch-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-switch-disabled'));
+        }
+    }
+
+
+    /* Loading
+     ========================================================================== */
+
+    .#{$prefix}-switch-loading .#{$prefix}-switch-handle::before {
+        visibility: hidden;
+    }
+
+    .#{$prefix}-switch-loading-icon {
+        display: block;
+    }
+
+
+    /* Hooks
+     ========================================================================== */
+
+    @if map.has-key($mixins, 'hook-switch-misc') {
+        @include meta.apply(map.get($mixins, 'hook-switch-misc'));
+    }
+
+
+    /* Vars
+     ========================================================================== */
+
+    @content;
+}
+
+@mixin switch-tokens {
+    --switch-background: #{$switch-background};
+    --switch-border: var(--global-border);
+    --switch-border-style: var(--global-border-style);
+    --switch-border-width: var(--global-border-width);
+    --switch-checked-background: var(--global-success-background);
+    --switch-border-radius: #{$switch-border-radius};
+    --switch-height: #{$switch-height};
+    --switch-width: #{$switch-width};
+    --switch-handle-background: var(--global-background);
+    --switch-handle-checked-background: var(--global-background);
+    --switch-handle-border-radius: #{$switch-handle-border-radius};
+    --switch-handle-offset: #{$switch-handle-offset};
+
+    @content;
+}

package/styles/table/_index.scss

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