@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/radio/_radio.scss

@@ -0,0 +1,272 @@
+// 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 radio-styles {
+    /* ========================================================================
+       Component: Radio
+     ========================================================================== */
+
+    .#{$prefix}-radio-wrapper {
+        cursor: pointer;
+        display: flex;
+        line-height: unset;
+        user-select: none;
+        @if map.has-key($mixins, 'hook-radio-wrapper') {
+            @include meta.apply(map.get($mixins, 'hook-radio-wrapper'));
+        }
+
+        &.#{$prefix}-control {
+            background-color: var(--radio-control-background);
+        }
+    }
+
+    .#{$prefix}-radio-wrapper .#{$prefix}-radio {
+        border: 0;
+        display: inline-block;
+        line-height: 1;
+        margin: 0;
+        min-width: var(--radio-size);
+        outline: none;
+        overflow: visible;
+        position: relative;
+        top: 0;
+        vertical-align: sub;
+        white-space: nowrap;
+        @if map.has-key($mixins, 'hook-radio-radio') {
+            @include meta.apply(map.get($mixins, 'hook-radio-radio'));
+        }
+    }
+
+    .#{$prefix}-radio-wrapper .#{$prefix}-radio-input {
+        cursor: pointer;
+        height: 100%;
+        inset: 0;
+        margin: 0;
+        opacity: 0;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+        @if map.has-key($mixins, 'hook-radio-input') {
+            @include meta.apply(map.get($mixins, 'hook-radio-input'));
+        }
+    }
+
+    .#{$prefix}-radio-wrapper .#{$prefix}-radio-inner {
+        background-color: var(--radio-background);
+        border: var(--radio-border-width) solid var(--radio-border);
+        border-radius: 50%;
+        box-sizing: border-box;
+        display: block;
+        height: var(--radio-size);
+        left: 0;
+        position: relative;
+        top: 0;
+        transition: all var(--transition-duration);
+        width: var(--radio-size);
+        @if map.has-key($mixins, 'hook-radio-inner') {
+            @include meta.apply(map.get($mixins, 'hook-radio-inner'));
+        }
+    }
+
+    .#{$prefix}-radio-wrapper .#{$prefix}-radio-inner::after {
+        background-color: var(--radio-checked-icon-color);
+        border-radius: 50%;
+        content: ' ';
+        display: block;
+        height: calc(var(--radio-size) / 2);
+        left: calc((var(--radio-size) - var(--radio-size) / 2) / 2 - var(--radio-border-width));
+        opacity: 0;
+        position: absolute;
+        top: calc((var(--radio-size) - var(--radio-size) / 2) / 2 - var(--radio-border-width));
+        transform: scale(0);
+        transition: all var(--transition-duration) var(--ease-in-out-circ);
+        width: calc(var(--radio-size) / 2);
+    }
+
+    .#{$prefix}-radio-wrapper .#{$prefix}-radio-label {
+        line-height: var(--radio-size);
+        max-width: 100%;
+        overflow: hidden;
+        padding-left: var(--control-affix-margin);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        @if map.has-key($mixins, 'hook-radio-label') {
+            @include meta.apply(map.get($mixins, 'hook-radio-label'));
+        }
+    }
+
+    // Hover state
+    .#{$prefix}-radio-wrapper:not(.#{$prefix}-checked):hover {
+        @if map.has-key($mixins, 'hook-radio-hover') {
+            @include meta.apply(map.get($mixins, 'hook-radio-hover'));
+        }
+    }
+
+    .#{$prefix}-radio-wrapper:not(.#{$prefix}-checked):hover .#{$prefix}-radio-inner,
+    .#{$prefix}-radio:not(.#{$prefix}-radio-checked):hover .#{$prefix}-radio-inner {
+        border-color: var(--radio-hover-border);
+    }
+
+    .#{$prefix}-radio-wrapper:not(.#{$prefix}-disabled):hover .#{$prefix}-radio::after,
+    .#{$prefix}-radio:not(.#{$prefix}-radio-disabled):hover::after {
+        visibility: visible;
+    }
+
+    // Checked state
+    .#{$prefix}-radio-checked {
+        @if map.has-key($mixins, 'hook-radio-checked') {
+            @include meta.apply(map.get($mixins, 'hook-radio-checked'));
+        }
+    }
+
+    .#{$prefix}-radio-checked::after {
+        animation: uk-wave-effect 0.36s var(--ease-in-out);
+        animation-fill-mode: both;
+        border: var(--radio-border-width) solid var(--radio-checked-border);
+        border-radius: 50%;
+        box-sizing: border-box;
+        content: '';
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        visibility: hidden;
+        width: 100%;
+    }
+
+    .#{$prefix}-radio-checked .#{$prefix}-radio-inner {
+        background-color: var(--radio-checked-background);
+        border-color: var(--radio-checked-border);
+    }
+
+    .#{$prefix}-radio-checked .#{$prefix}-radio-inner::after {
+        opacity: 1;
+        transform: scale(1);
+        transition: all var(--transition-medium-fast-duration) var(--ease-in-out-circ);
+    }
+
+    // Disabled state
+    .#{$prefix}-radio-disabled {
+        cursor: not-allowed;
+        @if map.has-key($mixins, 'hook-radio-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-radio-disabled'));
+        }
+
+    }
+
+    .#{$prefix}-radio-disabled .#{$prefix}-radio-label {
+        color: var(--control-placeholder-color);
+    }
+
+    .#{$prefix}-radio-disabled .#{$prefix}-radio-input {
+        cursor: not-allowed;
+    }
+
+    .#{$prefix}-radio-disabled .#{$prefix}-radio-inner {
+        background-color: transparent;
+        border-color: var(--radio-disabled-border);
+    }
+
+    .#{$prefix}-radio-disabled.#{$prefix}-radio-checked .#{$prefix}-radio-inner::after {
+        animation-name: none;
+        background-color: var(--radio-disabled-icon-color);
+    }
+
+
+    /* Group
+     ========================================================================== */
+
+    .#{$prefix}-radio-group {
+        display: flex;
+        flex-direction: row;
+        gap: var(--control-affix-margin);
+        @if map.has-key($mixins, 'hook-radio-group') {
+            @include meta.apply(map.get($mixins, 'hook-radio-group'));
+        }
+    }
+
+    .#{$prefix}-radio-group-stack {
+        flex-direction: column;
+        @if map.has-key($mixins, 'hook-radio-group-stack') {
+            @include meta.apply(map.get($mixins, 'hook-radio-group-stack'));
+        }
+    }
+
+
+    /* Control
+     ========================================================================== */
+
+    // Control
+    .#{$prefix}-control-radio {
+        cursor: pointer;
+        padding-bottom: var(--control-medium-padding-vertical);
+        padding-top: var(--control-medium-padding-vertical);
+        @if map.has-key($mixins, 'hook-radio-control') {
+            @include meta.apply(map.get($mixins, 'hook-radio-control'));
+        }
+    }
+
+    .#{$prefix}-control-radio.#{$prefix}-checked {
+        background-color: var(--radio-checked-control-background);
+        border-color: var(--radio-checked-border);
+        color: var(--radio-checked-control-color);
+    }
+
+    .#{$prefix}-control-radio.#{$prefix}-checked:hover {
+        border-color: var(--radio-checked-border);
+    }
+
+    .#{$prefix}-control-radio.#{$prefix}-disabled {
+        background-color: var(--radio-disabled-background);
+        border-color: var(--radio-disabled-border);
+        cursor: not-allowed;
+    }
+
+
+    /* Right to Left Direction
+     ========================================================================== */
+
+    [dir='rtl'] .#{$prefix}-radio-wrapper .#{$prefix}-radio-label,
+    .#{$prefix}-radio-wrapper.#{$prefix}-radio-rtl .#{$prefix}-radio-label {
+        padding-left: 0;
+        padding-right: var(--control-affix-margin);
+    }
+
+    @content;
+}
+
+@mixin radio-tokens {
+    --radio-size: #{$radio-size};
+    --radio-background: var(--control-background);
+    --radio-border: var(--control-border);
+    --radio-border-width: var(--control-border-width);
+    --radio-hover-border: var(--control-hover-border);
+    --radio-focus-background: var(--control-focus-background);
+    --radio-focus-border: var(--control-focus-border);
+    --radio-checked-background: #{$radio-checked-background};
+    --radio-checked-border: var(--global-primary-border);
+    --radio-checked-icon-color: var(--global-primary-background);
+    --radio-control-background: #{$radio-control-background};
+    --radio-checked-control-background: #{$radio-checked-control-background};
+    --radio-checked-control-color: #{$radio-checked-control-color};
+    --radio-disabled-background: var(--control-disabled-background);
+    --radio-disabled-border: var(--control-disabled-border);
+    --radio-disabled-icon-color: var(--global-emphasis-color);
+
+    @content;
+}

package/styles/search/_index.scss

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

package/styles/search/_search.scss

@@ -0,0 +1,353 @@
+// Name:            Search
+// Description:     Component to create the search
+//
+// Component:       `uk-search`
+//
+// Sub-objects:     `uk-search-input`
+//                  `uk-search-toggle`
+//
+// Adopted:         `uk-search-icon`
+//
+// Modifier:        `uk-search-default`
+//                  `uk-search-navbar`
+//                  `uk-search-large`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin search-styles {
+    /* ========================================================================
+       Component: Search
+     ========================================================================== */
+
+    /*
+     * 1. Container fits its content
+     * 2. Create position context
+     * 3. Prevent content overflow
+     * 4. Reset `form`
+     */
+
+    .#{$prefix}-search {
+        display: inline-block; /* 1 */
+        margin: 0; /* 4 */
+        max-width: 100%; /* 3 */
+        position: relative; /* 2 */
+    }
+
+
+    /* Input
+     ========================================================================== */
+
+    /*
+     * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
+     */
+
+    .#{$prefix}-search-input::-webkit-search-cancel-button,
+    .#{$prefix}-search-input::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+
+    /*
+     * Removes placeholder transparency in Firefox.
+     */
+
+    .#{$prefix}-search-input::-moz-placeholder {
+        opacity: 1;
+    }
+
+    /*
+     * 1. Define consistent box sizing.
+     * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
+     * 3. Remove `border-radius` in iOS.
+     * 4. Change font properties to `inherit` in all browsers
+     * 5. Show the overflow in Edge.
+     * 6. Remove default style in iOS.
+     * 7. Vertical alignment
+     * 8. Take the full container width
+     * 9. Style
+     */
+
+    .#{$prefix}-search-input {
+        -webkit-appearance: none; /* 6 */
+        border: none; /* 9 */
+        border-radius: 0; /* 3 */
+        box-sizing: border-box; /* 1 */
+        color: var(--search-color);
+        font: inherit; /* 4 */
+        margin: 0; /* 2 */
+        overflow: visible; /* 5 */
+        vertical-align: middle; /* 7 */
+        width: 100%; /* 8 */
+        @if map.has-key($mixins, 'hook-search-input') {
+            @include meta.apply(map.get($mixins, 'hook-search-input'));
+        }
+    }
+
+    .#{$prefix}-search-input:focus {
+        outline: none;
+    }
+
+    /* Placeholder */
+    .#{$prefix}-search-input:-ms-input-placeholder {
+        color: var(--search-placeholder-color) !important;
+    }
+
+    .#{$prefix}-search-input::placeholder {
+        color: var(--search-placeholder-color);
+    }
+
+
+    /* Icon (Adopts `uk-icon`)
+     ========================================================================== */
+
+    /*
+     * Remove default focus style
+     */
+
+    .#{$prefix}-search-icon:focus {
+        outline: none;
+    }
+
+    /*
+     * Position above input
+     * 1. Set position
+     * 2. Center icon vertically and horizontally
+     * 3. Style
+     */
+
+    .#{$prefix}-search .#{$prefix}-search-icon {
+        align-items: center;
+        bottom: 0;
+        color: var(--search-icon-color); /* 3 */
+        display: inline-flex; /* 2 */
+        justify-content: center;
+        left: 0;
+        position: absolute; /* 1 */
+        top: 0;
+    }
+
+    /*
+     * Required for `a`.
+     */
+
+    .#{$prefix}-search .#{$prefix}-search-icon:hover {
+        color: var(--search-icon-color);
+    }
+
+    /*
+     * Make `input` element clickable through icon, e.g. if it's a `span`
+     */
+
+    .#{$prefix}-search .#{$prefix}-search-icon:not(a, button, input) {
+        pointer-events: none;
+    }
+
+    /*
+     * Position modifier
+     */
+
+    .#{$prefix}-search .#{$prefix}-search-icon-flip {
+        left: auto;
+        right: 0;
+    }
+
+
+    /* Default modifier
+     ========================================================================== */
+
+    .#{$prefix}-search-default {
+        width: var(--search-default-width);
+    }
+
+    /*
+     * Input
+     */
+
+    .#{$prefix}-search-default .#{$prefix}-search-input {
+        background: var(--search-default-background);
+        height: var(--search-default-height);
+        padding-left: var(--search-default-padding-horizontal);
+        padding-right: var(--search-default-padding-horizontal);
+        @if map.has-key($mixins, 'hook-search-default-input') {
+            @include meta.apply(map.get($mixins, 'hook-search-default-input'));
+        }
+    }
+
+    /* Focus */
+    .#{$prefix}-search-default .#{$prefix}-search-input:focus {
+        background-color: var(--search-default-focus-background);
+        @if map.has-key($mixins, 'hook-search-default-input-focus') {
+            @include meta.apply(map.get($mixins, 'hook-search-default-input-focus'));
+        }
+    }
+
+    /*
+     * Icon
+     */
+
+    .#{$prefix}-search-default .#{$prefix}-search-icon {
+        width: var(--search-default-icon-width);
+    }
+
+    .#{$prefix}-search-default .#{$prefix}-search-icon:not(.#{$prefix}-search-icon-flip) ~ .#{$prefix}-search-input {
+        padding-left: var(--search-default-icon-width);
+    }
+
+    .#{$prefix}-search-default .#{$prefix}-search-icon-flip ~ .#{$prefix}-search-input {
+        padding-right: var(--search-default-icon-width);
+    }
+
+
+    /* Navbar modifier
+     ========================================================================== */
+
+    .#{$prefix}-search-navbar {
+        width: var(--search-navbar-width);
+    }
+
+    /*
+     * Input
+     */
+
+    .#{$prefix}-search-navbar .#{$prefix}-search-input {
+        background: var(--search-navbar-background);
+        font-size: var(--search-navbar-font-size);
+        height: var(--search-navbar-height);
+        @if map.has-key($mixins, 'hook-search-navbar-input') {
+            @include meta.apply(map.get($mixins, 'hook-search-navbar-input'));
+        }
+    }
+
+    /*
+     * Icon
+     */
+
+    .#{$prefix}-search-navbar .#{$prefix}-search-icon {
+        width: var(--search-navbar-icon-width);
+    }
+
+    .#{$prefix}-search-navbar .#{$prefix}-search-icon:not(.#{$prefix}-search-icon-flip) ~ .#{$prefix}-search-input {
+        padding-left: var(--search-navbar-icon-width);
+    }
+
+    .#{$prefix}-search-navbar .#{$prefix}-search-icon-flip ~ .#{$prefix}-search-input {
+        padding-right: var(--search-navbar-icon-width);
+    }
+
+
+    /* Large modifier
+     ========================================================================== */
+
+    .#{$prefix}-search-large {
+        width: var(--search-large-width);
+    }
+
+    /*
+     * Input
+     */
+
+    .#{$prefix}-search-large .#{$prefix}-search-input {
+        background: var(--search-large-background);
+        font-size: var(--search-large-font-size);
+        height: var(--search-large-height);
+        @if map.has-key($mixins, 'hook-search-large-input') {
+            @include meta.apply(map.get($mixins, 'hook-search-large-input'));
+        }
+    }
+
+    /*
+     * Icon
+     */
+
+    .#{$prefix}-search-large .#{$prefix}-search-icon {
+        width: var(--search-large-icon-width);
+    }
+
+    .#{$prefix}-search-large .#{$prefix}-search-icon:not(.#{$prefix}-search-icon-flip) ~ .#{$prefix}-search-input {
+        padding-left: var(--search-large-icon-width);
+    }
+
+    .#{$prefix}-search-large .#{$prefix}-search-icon-flip ~ .#{$prefix}-search-input {
+        padding-right: var(--search-large-icon-width);
+    }
+
+
+    /* Toggle
+     ========================================================================== */
+
+    .#{$prefix}-search-toggle {
+        color: var(--search-toggle-color);
+        @if map.has-key($mixins, 'hook-search-toggle') {
+            @include meta.apply(map.get($mixins, 'hook-search-toggle'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-search-toggle:hover,
+    .#{$prefix}-search-toggle:focus {
+        color: var(--search-toggle-hover-color);
+        @if map.has-key($mixins, 'hook-search-toggle-hover') {
+            @include meta.apply(map.get($mixins, 'hook-search-toggle-hover'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-search-misc') {
+        @include meta.apply(map.get($mixins, 'hook-search-misc'));
+    }
+
+    @content;
+}
+
+@mixin search-tokens {
+    --search-color: var(--global-color);
+    --search-placeholder-color: var(--global-muted-color);
+    --search-icon-color: var(--global-muted-color);
+    --search-default-width: var(--search-default-width);
+    --search-default-height: var(--global-control-height);
+    --search-default-padding-horizontal: var(--search-default-padding-horizontal);
+    --search-default-background: var(--global-muted-background);
+    --search-default-focus-background: var(--search-default-background);
+    --search-default-icon-width: var(--global-control-height);
+    --search-navbar-width: var(--search-navbar-width);
+    --search-navbar-height: var(--search-navbar-height);
+    --search-navbar-background: var(--search-navbar-background);
+    --search-navbar-font-size: var(--global-large-font-size);
+    --search-navbar-icon-width: var(--search-navbar-icon-width);
+    --search-large-width: var(--search-large-width);
+    --search-large-height: var(--search-large-height);
+    --search-large-background: var(--search-large-background);
+    --search-large-font-size: var(--global-2xlarge-font-size);
+    --search-large-icon-width: var(--search-large-icon-width);
+    --search-toggle-color: var(--global-muted-color);
+    --search-toggle-hover-color: var(--global-color);
+
+    @content;
+}
+
+@mixin search-inverse-tokens {
+    --inverse-search-color: var(--inverse-global-color);
+    --inverse-search-placeholder-color: var(--inverse-global-muted-color);
+    --inverse-search-icon-color: var(--inverse-global-muted-color);
+    --inverse-search-default-background: var(--inverse-global-muted-background);
+    --inverse-search-default-focus-background: var(--inverse-search-default-background);
+    --inverse-search-navbar-background: var(--inverse-search-navbar-background);
+    --inverse-search-large-background: var(--inverse-search-large-background);
+    --inverse-search-toggle-color: var(--inverse-global-muted-color);
+    --inverse-search-toggle-hover-color: var(--inverse-global-color);
+
+    @content;
+}

package/styles/section/_index.scss

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