@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/slider/_slider.scss

@@ -0,0 +1,525 @@
+// Name:            Slider
+// Description:     Component to create Slider elements
+//
+// Component:       `uk-slider`
+//
+// Modifier:        ``
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin slider-styles {
+    /* ========================================================================
+       Component: Slider
+     ========================================================================== */
+
+    .#{$prefix}-slider {
+        border-radius: var(--slider-border-radius);
+        box-sizing: border-box;
+        cursor: pointer;
+        height: var(--slider-height);
+        padding: var(--slider-padding-vertical) 0;
+        position: relative;
+        -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+        touch-action: none;
+        width: 100%;
+        @if map.has-key($mixins, 'hook-slider') {
+            @include meta.apply(map.get($mixins, 'hook-slider'));
+        }
+
+    }
+
+    .#{$prefix}-slider * {
+        box-sizing: border-box;
+        -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+    }
+
+
+    /* Rail
+     ========================================================================== */
+
+    .#{$prefix}-slider-rail {
+        background-color: var(--slider-rail-background);
+        border-radius: var(--slider-border-radius);
+        height: var(--slider-rail-height);
+        position: absolute;
+        width: 100%;
+        @if map.has-key($mixins, 'hook-slider-rail') {
+            @include meta.apply(map.get($mixins, 'hook-slider-rail'));
+        }
+
+    }
+
+
+    /* Track
+     ========================================================================== */
+
+    .#{$prefix}-slider-track,
+    .#{$prefix}-slider-tracks {
+        background-color: var(--slider-track-background);
+        border-radius: var(--slider-border-radius);
+        height: var(--slider-track-height);
+        position: absolute;
+        @if map.has-key($mixins, 'hook-slider-track') {
+            @include meta.apply(map.get($mixins, 'hook-slider-track'));
+        }
+
+    }
+
+    .#{$prefix}-slider-track-draggable {
+        --offset: calc(var(--slider-padding-vertical) * -1);
+        background-clip: content-box;
+        border-bottom: var(--slider-padding-vertical) solid rgb(0 0 0 / 0%);
+        border-top: var(--slider-padding-vertical) solid rgb(0 0 0 / 0%);
+        box-sizing: content-box;
+        transform: translateY(var(--offset));
+        z-index: 1;
+        @if map.has-key($mixins, 'hook-slider-track-draggable') {
+            @include meta.apply(map.get($mixins, 'hook-slider-track-draggable'));
+        }
+
+    }
+
+
+    /* Handle
+     ========================================================================== */
+
+    .#{$prefix}-slider-handle {
+        background-clip: content-box;
+        background-color: var(--slider-handle-background);
+        border: var(--slider-handle-border-width) solid var(--slider-handle-border);
+        border-radius: 50%;
+        height: var(--slider-handle-height);
+        margin-top: var(--slider-handle-offset);
+        position: absolute;
+        touch-action: pan-x;
+        user-select: none;
+        width: var(--slider-handle-width);
+        z-index: 1;
+        @if map.has-key($mixins, 'hook-slider-handle') {
+            @include meta.apply(map.get($mixins, 'hook-slider-handle'));
+        }
+
+    }
+
+    .#{$prefix}-slider-handle:hover {
+        background-color: var(--slider-handle-hover-background);
+        border-color: var(--slider-handle-hover-border);
+        @if map.has-key($mixins, 'hook-slider-handle-hover') {
+            @include meta.apply(map.get($mixins, 'hook-slider-handle-hover'));
+        }
+
+    }
+
+    .#{$prefix}-slider-handle:focus {
+        box-shadow: none;
+        outline: none;
+        @if map.has-key($mixins, 'hook-slider-handle-focus') {
+            @include meta.apply(map.get($mixins, 'hook-slider-handle-focus'));
+        }
+
+    }
+
+    .#{$prefix}-slider-handle:focus-visible {
+        border-color: var(--slider-handle-focus-border);
+        box-shadow: 0 0 0 3px var(--slider-handle-focus-box-shadow);
+    }
+
+    .#{$prefix}-slider-handle-click-focused:focus {
+        border-color: var(--slider-handle-focus-border);
+        box-shadow: unset;
+    }
+
+    .#{$prefix}-slider-handle:active {
+        background-clip: unset;
+        border-color: var(--slider-handle-active-border);
+        box-shadow: 0 0 5px var(--slider-handle-active-box-shadow);
+        cursor: grabbing;
+        @if map.has-key($mixins, 'hook-slider-handle-active') {
+            @include meta.apply(map.get($mixins, 'hook-slider-handle-active'));
+        }
+
+    }
+
+    .#{$prefix}-slider-handle-dragging.#{$prefix}-slider-handle-dragging.#{$prefix}-slider-handle-dragging {
+        background-clip: unset;
+        border-color: var(--slider-handle-dragging-border);
+        box-shadow: 0 0 0 5px var(--slider-handle-dragging-box-shadow);
+        cursor: grabbing;
+        @if map.has-key($mixins, 'hook-slider-handle-dragging') {
+            @include meta.apply(map.get($mixins, 'hook-slider-handle-dragging'));
+        }
+
+    }
+
+    .#{$prefix}-slider-handle-dragging.#{$prefix}-slider-handle-dragging.#{$prefix}-slider-handle-dragging-delete {
+        opacity: 0;
+    }
+
+
+    /* Mark
+     ========================================================================== */
+
+    .#{$prefix}-slider-mark {
+        font-size: var(--slider-mark-font-size);
+        left: 0;
+        position: absolute;
+        top: var(--slider-mark-offset);
+        width: 100%;
+        @if map.has-key($mixins, 'hook-slider-mark') {
+            @include meta.apply(map.get($mixins, 'hook-slider-mark'));
+        }
+
+    }
+
+    .#{$prefix}-slider-mark-text {
+        color: var(--slider-mark-text-color);
+        cursor: pointer;
+        display: inline-block;
+        position: absolute;
+        text-align: center;
+        vertical-align: middle;
+        @if map.has-key($mixins, 'hook-slider-mark-text') {
+            @include meta.apply(map.get($mixins, 'hook-slider-mark-text'));
+        }
+
+    }
+
+    .#{$prefix}-slider-mark-text-active {
+        color: var(--slider-mark-text-active-color);
+        @if map.has-key($mixins, 'hook-slider-mark-text-active') {
+            @include meta.apply(map.get($mixins, 'hook-slider-mark-text-active'));
+        }
+
+    }
+
+
+    /* Step
+     ========================================================================== */
+
+    .#{$prefix}-slider-step {
+        background: transparent;
+        height: var(--slider-step-height);
+        position: absolute;
+        width: 100%;
+        @if map.has-key($mixins, 'hook-slider-step') {
+            @include meta.apply(map.get($mixins, 'hook-slider-step'));
+        }
+
+    }
+
+
+    /* Dots
+     ========================================================================== */
+
+    .#{$prefix}-slider-dot {
+        background-clip: content-box;
+        background-color: var(--slider-dot-background);
+        border: var(--slider-dot-border-width) solid var(--slider-dot-border);
+        border-radius: 50%;
+        bottom: calc(var(--slider-dot-border-width) * -1);
+        cursor: pointer;
+        height: var(--slider-dot-height);
+        position: absolute;
+        vertical-align: middle;
+        width: var(--slider-dot-width);
+        @if map.has-key($mixins, 'hook-slider-dot') {
+            @include meta.apply(map.get($mixins, 'hook-slider-dot'));
+        }
+
+    }
+
+    .#{$prefix}-slider-dot-active {
+        background-color: var(--slider-dot-active-background);
+        border-color: var(--slider-dot-active-border);
+        @if map.has-key($mixins, 'hook-slider-dot-active') {
+            @include meta.apply(map.get($mixins, 'hook-slider-dot-active'));
+        }
+
+    }
+
+    .#{$prefix}-slider-dot-reverse {
+        margin-right: calc(var(--slider-dot-width) / -2);
+        @if map.has-key($mixins, 'hook-slider-dot-reverse') {
+            @include meta.apply(map.get($mixins, 'hook-slider-dot-reverse'));
+        }
+
+    }
+
+
+    /* Disabled state
+     ========================================================================== */
+
+    .#{$prefix}-slider-disabled {
+        opacity: 0.7;
+        @if map.has-key($mixins, 'hook-slider-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-slider-disabled'));
+        }
+
+    }
+
+    .#{$prefix}-slider-disabled .#{$prefix}-slider-track {
+        background-color: var(--slider-track-disabled-background);
+        @if map.has-key($mixins, 'hook-slider-disabled-track') {
+            @include meta.apply(map.get($mixins, 'hook-slider-disabled-track'));
+        }
+
+    }
+
+    .#{$prefix}-slider-disabled .#{$prefix}-slider-handle,
+    .#{$prefix}-slider-disabled .#{$prefix}-slider-dot {
+        box-shadow: none;
+        cursor: not-allowed;
+    }
+
+    .#{$prefix}-slider-disabled .#{$prefix}-slider-handle {
+        background-color: var(--slider-handle-disabled-background);
+        border-color: var(--slider-handle-disabled-border);
+    }
+
+    .#{$prefix}-slider-disabled .#{$prefix}-slider-dot {
+        background-color: var(--slider-dot-disabled-background);
+        border-color: var(--slider-dot-disabled-border);
+    }
+
+    .#{$prefix}-slider-disabled .#{$prefix}-slider-mark-text,
+    .#{$prefix}-slider-disabled .#{$prefix}-slider-dot {
+        cursor: not-allowed !important;
+    }
+
+
+    /* Vertical
+     ========================================================================== */
+
+    .#{$prefix}-slider-vertical {
+        height: 100%;
+        padding: 0 var(--slider-padding-horizontal);
+        width: var(--slider-width);
+    }
+
+    .#{$prefix}-slider-vertical .#{$prefix}-slider-rail {
+        height: 100%;
+        width: var(--slider-rail-width);
+    }
+
+    .#{$prefix}-slider-vertical .#{$prefix}-slider-track {
+        bottom: 0;
+        left: var(--slider-padding-horizontal);
+        width: var(--slider-track-width);
+    }
+
+    .#{$prefix}-slider-vertical .#{$prefix}-slider-track-draggable {
+        --offset: calc(var(--slider-padding-horizontal) * -1);
+        border-bottom: 0;
+        border-left: var(--slider-padding-horizontal) solid rgb(0 0 0 / 0%);
+        border-right: var(--slider-padding-horizontal) solid rgb(0 0 0 / 0%);
+        border-top: 0;
+        transform: translateX(var(--offset));
+    }
+
+    .#{$prefix}-slider-vertical .#{$prefix}-slider-handle {
+        margin-left: var(--slider-handle-offset);
+        margin-top: 0;
+        position: absolute;
+        touch-action: pan-y;
+        z-index: 1;
+    }
+
+    .#{$prefix}-slider-vertical .#{$prefix}-slider-mark {
+        height: 100%;
+        left: var(--slider-mark-offset);
+        top: 0;
+    }
+
+    .#{$prefix}-slider-vertical .#{$prefix}-slider-step {
+        height: 100%;
+        width: var(--slider-step-width);
+    }
+
+    .#{$prefix}-slider-vertical .#{$prefix}-slider-dot {
+        margin-left: calc(var(--slider-dot-border-width) * -1);
+    }
+
+
+    // Keyframes
+    // ========================================================================
+
+    @keyframes uk-slider-tooltip-zoom-down-in {
+        0% {
+            opacity: 0;
+            transform: scale(0, 0);
+            transform-origin: 50% 100%;
+        }
+
+        100% {
+            transform: scale(1, 1);
+            transform-origin: 50% 100%;
+        }
+    }
+
+    @keyframes uk-slider-tooltip-zoom-down-out {
+        0% {
+            transform: scale(1, 1);
+            transform-origin: 50% 100%;
+        }
+
+        100% {
+            opacity: 0;
+            transform: scale(0, 0);
+            transform-origin: 50% 100%;
+        }
+    }
+
+
+    /* Tooltip
+     ========================================================================== */
+
+    .#{$prefix}-slider-tooltip {
+        box-sizing: border-box;
+        left: -9999px;
+        position: absolute;
+        -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+        top: -9999px;
+        visibility: visible;
+    }
+
+    .#{$prefix}-slider-tooltip * {
+        box-sizing: border-box;
+        -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+    }
+
+    .#{$prefix}-slider-tooltip-hidden {
+        display: none;
+    }
+
+    .#{$prefix}-slider-tooltip-placement-top {
+        padding: 4px 0 8px;
+    }
+
+    .#{$prefix}-slider-tooltip-inner {
+        background-color: #6c6c6c;
+        border-radius: 6px;
+        box-shadow: 0 0 4px #d9d9d9;
+        color: #fff;
+        font-size: 12px;
+        height: 24px;
+        line-height: 1;
+        min-width: 24px;
+        padding: 6px 2px;
+        text-align: center;
+        text-decoration: none;
+    }
+
+    .#{$prefix}-slider-tooltip-arrow {
+        border-color: transparent;
+        border-style: solid;
+        height: 0;
+        position: absolute;
+        width: 0;
+    }
+
+    .#{$prefix}-slider-tooltip-placement-top .#{$prefix}-slider-tooltip-arrow {
+        border-top-color: #6c6c6c;
+        border-width: 4px 4px 0;
+        bottom: 4px;
+        left: 50%;
+        margin-left: -4px;
+    }
+
+    .#{$prefix}-slider-tooltip-zoom-down-enter,
+    .#{$prefix}-slider-tooltip-zoom-down-appear {
+        animation-duration: var(--animation-medium-fast-duration);
+        animation-fill-mode: both;
+        animation-play-state: paused;
+        animation-timing-function: var(--ease-in-quint);
+        display: block !important;
+        transform: scale(0, 0);
+    }
+
+    .#{$prefix}-slider-tooltip-zoom-down-leave {
+        animation-duration: var(--animation-medium-fast-duration);
+        animation-fill-mode: both;
+        animation-play-state: paused;
+        animation-timing-function: var(--ease-in-quint);
+        display: block !important;
+    }
+
+    .#{$prefix}-slider-tooltip-zoom-down-enter.#{$prefix}-slider-tooltip-zoom-down-enter-active,
+    .#{$prefix}-slider-tooltip-zoom-down-appear.#{$prefix}-slider-tooltip-zoom-down-appear-active {
+        animation-name: uk-slider-tooltip-zoom-down-in;
+        animation-play-state: running;
+    }
+
+    .#{$prefix}-slider-tooltip-zoom-down-leave.#{$prefix}-slider-tooltip-zoom-down-leave-active {
+        animation-name: uk-slider-tooltip-zoom-down-out;
+        animation-play-state: running;
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-slider-misc') {
+        @include meta.apply(map.get($mixins, 'hook-slider-misc'));
+    }
+
+    @content;
+}
+
+@mixin slider-tokens {
+    --slider-height: #{$slider-height};
+    --slider-width: #{$slider-width};
+    --slider-padding-horizontal: #{$slider-padding-horizontal};
+    --slider-padding-vertical: #{$slider-padding-vertical};
+    --slider-border-radius: var(--global-border-radius);
+    --slider-rail-background: var(--global-default-background);
+    --slider-rail-height: #{$slider-rail-height};
+    --slider-rail-width: #{$slider-rail-width};
+    --slider-track-background: var(--global-primary-background);
+    --slider-track-height: #{$slider-track-height};
+    --slider-track-width: #{$slider-track-width};
+    --slider-track-disabled-background: var(--global-default-background);
+    --slider-handle-background: var(--global-default-background);
+    --slider-handle-border: var(--global-primary-border);
+    --slider-handle-hover-background: var(--global-default-background);
+    --slider-handle-hover-border: var(--global-primary-border);
+    --slider-handle-focus-border: var(--global-primary-border);
+    --slider-handle-active-border: var(--global-primary-border);
+    --slider-handle-dragging-border: var(--global-primary-border);
+    --slider-handle-disabled-background: var(--global-default-background);
+    --slider-handle-disabled-border: var(--global-border);
+    --slider-handle-focus-box-shadow: #{$slider-handle-focus-box-shadow};
+    --slider-handle-active-box-shadow: #{$slider-handle-active-box-shadow};
+    --slider-handle-dragging-box-shadow: #{$slider-handle-dragging-box-shadow};
+    --slider-handle-border-width: #{$slider-handle-border-width};
+    --slider-handle-offset: #{$slider-handle-offset};
+    --slider-handle-height: #{$slider-handle-height};
+    --slider-handle-width: #{$slider-handle-width};
+    --slider-mark-font-size: var(--global-xsmall-font-size);
+    --slider-mark-offset: #{$slider-mark-offset};
+    --slider-mark-text-color: var(--global-muted-color);
+    --slider-mark-text-active-color: var(--global-emphasis-color);
+    --slider-step-height: #{$slider-step-height};
+    --slider-step-width: #{$slider-step-width};
+    --slider-dot-background: var(--global-default-background);
+    --slider-dot-border: var(--global-border);
+    --slider-dot-border-width: #{$slider-dot-border-width};
+    --slider-dot-active-background: var(--global-default-background);
+    --slider-dot-active-border: var(--global-primary-border);
+    --slider-dot-disabled-background: var(--global-default-background);
+    --slider-dot-disabled-border: var(--global-muted-border);
+    --slider-dot-height: #{$slider-dot-height};
+    --slider-dot-width: #{$slider-dot-width};
+
+    @content;
+}

package/styles/spinner/_index.scss

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

package/styles/spinner/_spinner.scss

@@ -0,0 +1,90 @@
+// Name:            Spinner
+// Description:     Component to create a loading spinner
+//
+// Component:       `uk-spinner`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin spinner-styles {
+    /* ========================================================================
+       Component: Spinner
+     ========================================================================== */
+
+    /*
+     * Adopts `uk-icon`
+     */
+
+    .#{$prefix}-spinner {
+        @if map.has-key($mixins, 'hook-spinner') {
+            @include meta.apply(map.get($mixins, 'hook-spinner'));
+        }
+    }
+
+
+    /* SVG
+     ========================================================================== */
+
+    .#{$prefix}-spinner > * { animation: uk-spinner-rotate var(--spinner-duration) linear infinite; }
+
+    @keyframes uk-spinner-rotate {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(270deg); }
+    }
+
+    /*
+     * Circle
+     */
+
+    .#{$prefix}-spinner > * > * {
+        animation: uk-spinner-dash var(--spinner-duration) var(--ease-in-out) infinite;
+        stroke-dasharray: $spinner-circumference;
+        stroke-dashoffset: 0;
+        stroke-linecap: round;
+        stroke-width: var(--spinner-stroke-width);
+        transform-origin: center;
+        will-change: auto;
+    }
+
+    @keyframes uk-spinner-dash {
+        0% { stroke-dashoffset: $spinner-circumference; }
+
+        50% {
+            stroke-dashoffset: ($spinner-circumference * 0.25);
+            transform: rotate(135deg);
+        }
+
+        100% {
+            stroke-dashoffset: $spinner-circumference;
+            transform: rotate(450deg);
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-spinner-misc') {
+        @include meta.apply(map.get($mixins, 'hook-spinner-misc'));
+    }
+
+    @content;
+}
+
+@mixin spinner-tokens {
+    --spinner-size: #{$spinner-size};
+    --spinner-stroke-width: #{$spinner-stroke-width};
+    --spinner-duration: #{$spinner-duration};
+
+    @content;
+}

package/styles/sticky/_index.scss

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

package/styles/sticky/_sticky.scss

@@ -0,0 +1,66 @@
+// Name:            Sticky
+// Description:     Component to make elements sticky in the viewport
+//
+// Component:       `uk-sticky`
+//
+// Modifier:        `uk-sticky-fixed`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin sticky-styles {
+    /* ========================================================================
+       Component: Sticky
+     ========================================================================== */
+
+    /*
+     * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
+     */
+
+    .#{$prefix}-sticky-fixed {
+        /* 1 */
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        box-sizing: border-box;
+        margin: 0 !important;
+        z-index: var(--sticky-z-index);
+    }
+
+    /*
+     * Faster animations
+     */
+
+    .#{$prefix}-sticky[class*='#{$prefix}-animation-'] { animation-duration: var(--sticky-animation-duration); }
+
+    .#{$prefix}-sticky.#{$prefix}-animation-reverse { animation-duration: var(--sticky-reverse-animation-duration); }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-sticky-misc') {
+        @include meta.apply(map.get($mixins, 'hook-sticky-misc'));
+    }
+
+    @content;
+}
+
+@mixin sticky-tokens {
+    --sticky-z-index: #{$global-z-index - 20};
+    --sticky-animation-duration: #{$sticky-animation-duration};
+    --sticky-reverse-animation-duration: #{$sticky-reverse-animation-duration};
+
+    @content;
+}