@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/checkbox/_checkbox.scss

@@ -0,0 +1,329 @@
+// Name:            Checkbox Control
+// Description:     Component to create Checkbox element
+//
+// Component:       `uk-control-checkbox`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin checkbox-styles {
+    /* ========================================================================
+       Component: Checkbox
+     ========================================================================== */
+
+    .#{$prefix}-checkbox-wrapper {
+        cursor: pointer;
+        display: flex;
+        line-height: unset;
+        user-select: none;
+        @if map.has-key($mixins, 'hook-checkbox-wrapper') {
+            @include meta.apply(map.get($mixins, 'hook-checkbox-wrapper'));
+        }
+
+        &.#{$prefix}-control {
+            background-color: var(--checkbox-control-background);
+        }
+    }
+
+    .#{$prefix}-checkbox-wrapper .#{$prefix}-checkbox {
+        border: 0;
+        display: inline-block;
+        height: var(--checkbox-size);
+        line-height: 1;
+        margin: 0;
+        min-width: var(--checkbox-size);
+        overflow: visible;
+        position: relative;
+        top: 0;
+        vertical-align: sub;
+        white-space: nowrap;
+        @if map.has-key($mixins, 'hook-checkbox-checkbox') {
+            @include meta.apply(map.get($mixins, 'hook-checkbox-checkbox'));
+        }
+    }
+
+    .#{$prefix}-checkbox-wrapper .#{$prefix}-checkbox-input {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        cursor: pointer;
+        height: 100%;
+        inset: 0;
+        margin: 0;
+        opacity: 0;
+        outline: none;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+        @if map.has-key($mixins, 'hook-checkbox-input') {
+            @include meta.apply(map.get($mixins, 'hook-checkbox-input'));
+        }
+    }
+
+    .#{$prefix}-checkbox-wrapper .#{$prefix}-checkbox-inner {
+        background-color: var(--checkbox-background);
+        border: var(--checkbox-border-width) solid var(--checkbox-border);
+        border-collapse: separate;
+        border-radius: var(--checkbox-border-radius);
+        box-sizing: border-box;
+        direction: ltr;
+        display: block;
+        height: var(--checkbox-size);
+        left: 0;
+        position: relative;
+        top: 0;
+        transition: all var(--transition-duration);
+        width: var(--checkbox-size);
+        @if map.has-key($mixins, 'hook-checkbox-inner') {
+            @include meta.apply(map.get($mixins, 'hook-checkbox-inner'));
+        }
+    }
+
+    .#{$prefix}-checkbox-wrapper .#{$prefix}-checkbox-inner::after {
+        border: var(--checkbox-checked-icon-border-width) solid var(--checkbox-checked-icon-color);
+        border-left: 0;
+        border-top: 0;
+        box-sizing: border-box;
+        content: ' ';
+        display: block;
+        height: calc(var(--checkbox-size) / 2);
+        left: 28.5%;
+        opacity: 0;
+        position: absolute;
+        top: 50%;
+        transform: rotate(45deg) scale(0) translate(-50%, -50%);
+        transition: all var(--transition-fast-duration) var(--ease-in-back),
+            opacity var(--transition-fast-duration);
+        width: calc(var(--checkbox-size) / 4);
+    }
+
+    .#{$prefix}-checkbox-wrapper .#{$prefix}-checkbox-label {
+        line-height: var(--checkbox-size);
+        max-width: 100%;
+        overflow: hidden;
+        padding-left: var(--control-affix-margin);
+        text-overflow: ellipsis;
+        @if map.has-key($mixins, 'hook-checkbox-label') {
+            @include meta.apply(map.get($mixins, 'hook-checkbox-label'));
+        }
+    }
+
+
+    /* States
+     ========================================================================== */
+
+    // Hover state
+    .#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checked):hover {
+        @if map.has-key($mixins, 'hook-checkbox-hover') {
+            @include meta.apply(map.get($mixins, 'hook-checkbox-hover'));
+        }
+    }
+
+    .#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checked):hover .#{$prefix}-checkbox-inner,
+    .#{$prefix}-checkbox:not(.#{$prefix}-checkbox-checked):hover .#{$prefix}-checkbox-inner {
+        border-color: var(--checkbox-hover-border);
+    }
+
+    .#{$prefix}-checkbox-wrapper:not(.#{$prefix}-disabled):hover .#{$prefix}-checkbox::after,
+    .#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover::after {
+        visibility: visible;
+    }
+
+
+    // Checked state
+    .#{$prefix}-checkbox-checked {
+        @if map.has-key($mixins, 'hook-checkbox-checked') {
+            @include meta.apply(map.get($mixins, 'hook-checkbox-checked'));
+        }
+    }
+
+    .#{$prefix}-checkbox-checked::after {
+        animation: uk-wave-effect 0.36s var(--ease-in-out);
+        animation-fill-mode: backwards;
+        border: var(--checkbox-border-width) solid var(--checkbox-checked-border);
+        border-radius: var(--checkbox-border-radius);
+        box-sizing: border-box;
+        content: '';
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        visibility: hidden;
+        width: 100%;
+    }
+
+    .#{$prefix}-checkbox-checked .#{$prefix}-checkbox-inner {
+        background-color: var(--checkbox-checked-background);
+        border-color: var(--checkbox-checked-border);
+    }
+
+    .#{$prefix}-checkbox-checked .#{$prefix}-checkbox-inner::after {
+        border-color: var(--checkbox-checked-icon-color);
+        opacity: 1;
+        transform: rotate(45deg) scale(1) translate(-50%, -50%);
+        transition: all
+            var(--transition-medium-fast-duration)
+            var(--ease-out-back)
+            var(--transition-fast-duration);
+    }
+
+    // Disabled state
+    .#{$prefix}-checkbox-disabled {
+        cursor: not-allowed;
+        @if map.has-key($mixins, 'hook-checkbox-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-checkbox-disabled'));
+        }
+    }
+
+    .#{$prefix}-checkbox-disabled .#{$prefix}-checkbox-label {
+        color: var(--control-placeholder-color);
+    }
+
+    .#{$prefix}-checkbox-disabled .#{$prefix}-checkbox-input {
+        cursor: not-allowed;
+    }
+
+    .#{$prefix}-checkbox-disabled .#{$prefix}-checkbox-inner {
+        background-color: transparent;
+        border-color: var(--checkbox-disabled-border);
+        cursor: not-allowed;
+    }
+
+    .#{$prefix}-checkbox-disabled.#{$prefix}-checkbox-checked .#{$prefix}-checkbox-inner::after {
+        animation-name: none;
+        border-color: var(--checkbox-disabled-icon-color);
+    }
+
+
+    /* Intermediate
+     ========================================================================== */
+
+    .#{$prefix}-checkbox-indeterminate {
+        @if map.has-key($mixins, 'hook-checkbox-indeterminate') {
+            @include meta.apply(map.get($mixins, 'hook-checkbox-indeterminate'));
+        }
+    }
+
+    .#{$prefix}-checkbox-indeterminate .#{$prefix}-checkbox-inner {
+        background-color: transparent;
+    }
+
+    .#{$prefix}-checkbox-indeterminate.#{$prefix}-checkbox-checked .#{$prefix}-checkbox-inner {
+        border-color: var(--checkbox-border);
+    }
+
+    .#{$prefix}-checkbox-indeterminate .#{$prefix}-checkbox-inner::after {
+        background-color: var(--checkbox-checked-background);
+        border: 0;
+        content: ' ';
+        height: var(--checkbox-indeterminate-size);
+        left: 50%;
+        opacity: 1;
+        top: 50%;
+        transform: translate(-50%, -50%) scale(1);
+        width: var(--checkbox-indeterminate-size);
+    }
+
+    .#{$prefix}-checkbox-indeterminate.#{$prefix}-checkbox-disabled .#{$prefix}-checkbox-inner::after {
+        background-color: var(--checkbox-disabled-background);
+    }
+
+
+    /* Group
+     ========================================================================== */
+
+    .#{$prefix}-checkbox-group {
+        display: flex;
+        flex-direction: row;
+        gap: var(--control-affix-margin);
+        @if map.has-key($mixins, 'hook-checkbox-group') {
+            @include meta.apply(map.get($mixins, 'hook-checkbox-group'));
+        }
+    }
+
+    .#{$prefix}-checkbox-group-stack {
+        flex-direction: column;
+        @if map.has-key($mixins, 'hook-checkbox-group-stack') {
+            @include meta.apply(map.get($mixins, 'hook-checkbox-group-stack'));
+        }
+    }
+
+
+    /* Control
+     ========================================================================== */
+
+    .#{$prefix}-control-checkbox {
+        cursor: pointer;
+        padding-bottom: var(--control-medium-padding-vertical);
+        padding-top: var(--control-medium-padding-vertical);
+        @if map.has-key($mixins, 'hook-checkbox-control') {
+            @include meta.apply(map.get($mixins, 'hook-checkbox-control'));
+        }
+    }
+
+    .#{$prefix}-control-checkbox.#{$prefix}-checked {
+        background-color: var(--checkbox-checked-control-background);
+        border-color: var(--checkbox-checked-border);
+        color: var(--checkbox-checked-control-color);
+    }
+
+    .#{$prefix}-control-checkbox.#{$prefix}-checked:hover {
+        border-color: var(--checkbox-checked-border);
+    }
+
+    .#{$prefix}-control-checkbox.#{$prefix}-disabled {
+        background-color: var(--checkbox-disabled-background);
+        border-color: var(--checkbox-disabled-border);
+        cursor: not-allowed;
+    }
+
+
+    /* Right to Left Direction
+     ========================================================================== */
+
+    .#{$prefix}-checkbox-rtl {
+        flex-direction: row-reverse;
+    }
+
+    .#{$prefix}-checkbox-rtl .#{$prefix}-checkbox-label {
+        padding-left: 0;
+        padding-right: var(--control-affix-margin);
+    }
+
+    @content;
+}
+
+@mixin checkbox-tokens {
+    --checkbox-background: var(--control-background);
+    --checkbox-border: var(--control-border);
+    --checkbox-border-width: var(--control-border-width);
+    --checkbox-border-radius: var(--control-border-radius);
+    --checkbox-hover-border: var(--control-hover-border);
+    --checkbox-focus-background: var(--control-focus-background);
+    --checkbox-focus-border: var(--control-focus-border);
+    --checkbox-disabled-background: var(--control-disabled-background);
+    --checkbox-disabled-border: var(--control-disabled-border);
+    --checkbox-disabled-icon-color: var(--global-muted-color);
+    --checkbox-indeterminate-size: #{$checkbox-indeterminate-size};
+    --checkbox-size: #{$checkbox-size};
+    --checkbox-checked-background: var(--global-primary-background);
+    --checkbox-checked-border: var(--global-primary-border);
+    --checkbox-checked-icon-border-width: #{$checkbox-checked-icon-border-width};
+    --checkbox-checked-icon-color: var(--global-inverse-color);
+    --checkbox-control-background: #{$checkbox-control-background};
+    --checkbox-checked-control-background: #{$checkbox-checked-control-background};
+    --checkbox-checked-control-color: #{$checkbox-checked-control-color};
+    --checkbox-checked-control-padding: #{$checkbox-checked-control-padding};
+
+    @content;
+}

package/styles/checkbox/_index.scss

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

package/styles/close/_close.scss

@@ -0,0 +1,69 @@
+// Name:            Close
+// Description:     Component to create a close button
+//
+// Component:       `uk-close`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin close-styles {
+    /* ========================================================================
+       Component: Close
+     ========================================================================== */
+
+    /*
+     * Adopts `uk-icon`
+     */
+
+    .#{$prefix}-close {
+        background-color: transparent;
+        color: var(--close-color);
+        @if map.has-key($mixins, 'hook-close') {
+            @include meta.apply(map.get($mixins, 'hook-close'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-close:hover,
+    .#{$prefix}-close:focus {
+        color: var(--close-hover-color);
+        outline: none;
+        @if map.has-key($mixins, 'hook-close-hover') {
+            @include meta.apply(map.get($mixins, 'hook-close-hover'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-close-misc') {
+        @include meta.apply(map.get($mixins, 'hook-close-misc'));
+    }
+
+    @content;
+}
+
+@mixin close-tokens {
+    --close-color: var(--global-muted-color);
+    --close-hover-color: var(--global-color);
+
+    @content;
+}
+
+@mixin close-inverse-tokens {
+    --inverse-close-color: var(--inverse-global-muted-color);
+    --inverse-close-hover-color: var(--inverse-global-color);
+
+    @content;
+}

package/styles/close/_index.scss

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

package/styles/column/_column.scss

@@ -0,0 +1,159 @@
+// Name:            Column
+// Description:     Utilities for text columns
+//
+// Component:       `uk-column-*`
+//
+// Sub-objects:     `uk-column-span`
+//
+// Modifiers:       `uk-column-divider`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin column-styles {
+    /* ========================================================================
+       Component: Column
+     ========================================================================== */
+
+    [class*='#{$prefix}-column-'] { column-gap: var(--column-gutter); }
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+        [class*='#{$prefix}-column-'] { column-gap: var(--column-gutter-l); }
+    }
+
+    /*
+     * Fix image 1px line wrapping into the next column in Chrome
+     */
+
+    [class*='#{$prefix}-column-'] img { transform: translate3d(0, 0, 0); }
+
+
+    /* Divider
+     ========================================================================== */
+
+    /*
+     * 1. Double the column gap
+     */
+
+    .#{$prefix}-column-divider {
+        /* 1 */
+        column-gap: calc(var(--column-gutter) * 2);
+        column-rule: var(--column-divider-rule-width) solid var(--column-divider-rule-color);
+    }
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+        .#{$prefix}-column-divider { column-gap: calc(var(--column-gutter-l) * 2); }
+    }
+
+
+    /* Width modifiers
+     ========================================================================== */
+
+    .#{$prefix}-column-1-2 { column-count: 2; }
+
+    .#{$prefix}-column-1-3 { column-count: 3; }
+
+    .#{$prefix}-column-1-4 { column-count: 4; }
+
+    .#{$prefix}-column-1-5 { column-count: 5; }
+
+    .#{$prefix}-column-1-6 { column-count: 6; }
+
+    /* Phone landscape and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-small) {
+        .#{$prefix}-column-1-2\@s { column-count: 2; }
+
+        .#{$prefix}-column-1-3\@s { column-count: 3; }
+
+        .#{$prefix}-column-1-4\@s { column-count: 4; }
+
+        .#{$prefix}-column-1-5\@s { column-count: 5; }
+
+        .#{$prefix}-column-1-6\@s { column-count: 6; }
+    }
+
+    /* Tablet landscape and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-column-1-2\@m { column-count: 2; }
+
+        .#{$prefix}-column-1-3\@m { column-count: 3; }
+
+        .#{$prefix}-column-1-4\@m { column-count: 4; }
+
+        .#{$prefix}-column-1-5\@m { column-count: 5; }
+
+        .#{$prefix}-column-1-6\@m { column-count: 6; }
+    }
+
+    /* Desktop and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-large) {
+        .#{$prefix}-column-1-2\@l { column-count: 2; }
+
+        .#{$prefix}-column-1-3\@l { column-count: 3; }
+
+        .#{$prefix}-column-1-4\@l { column-count: 4; }
+
+        .#{$prefix}-column-1-5\@l { column-count: 5; }
+
+        .#{$prefix}-column-1-6\@l { column-count: 6; }
+    }
+
+    /* Large screen and bigger */
+    @media (--media-breakpoint-xlarge) {
+        .#{$prefix}-column-1-2\@xl { column-count: 2; }
+
+        .#{$prefix}-column-1-3\@xl { column-count: 3; }
+
+        .#{$prefix}-column-1-4\@xl { column-count: 4; }
+
+        .#{$prefix}-column-1-5\@xl { column-count: 5; }
+
+        .#{$prefix}-column-1-6\@xl { column-count: 6; }
+    }
+
+    /* Make element span across all columns
+     * Does not work in Firefox yet
+     ========================================================================== */
+
+    .#{$prefix}-column-span { column-span: all; }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-column-misc') {
+        @include meta.apply(map.get($mixins, 'hook-column-misc'));
+    }
+
+    @content;
+}
+
+@mixin column-tokens {
+    --column-gutter: var(--global-gutter);
+    --column-gutter-l: var(--global-medium-gutter);
+    --column-divider-rule-color: var(--global-border);
+    --column-divider-rule-width: #{$column-divider-rule-width};
+
+    @content;
+}
+
+@mixin column-inverse-tokens {
+    --inverse-column-divider-rule-color: var(--inverse-global-border);
+
+    @content;
+}

package/styles/column/_index.scss

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