@broxus/react-uikit 0.21.0 → 0.23.0

package/styles/slider.scss

@@ -0,0 +1,521 @@
+// Name:            Slider
+// Description:     Component to create Slider elements
+//
+// Component:       `uk-slider`
+//
+// Modifier:        ``
+//
+// ========================================================================
+
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use 'variables' as *;
+
+
+/* ========================================================================
+   Component: Slider
+ ========================================================================== */
+
+.uk-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 meta.mixin-exists('hook-slider') {
+        @include hook-slider;
+    }
+
+}
+
+.uk-slider * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+}
+
+
+/* Rail
+ ========================================================================== */
+
+.uk-slider-rail {
+    background-color: var(--slider-rail-background);
+    border-radius: var(--slider-border-radius);
+    height: var(--slider-rail-height);
+    position: absolute;
+    width: 100%;
+    @if meta.mixin-exists('hook-slider-rail') {
+        @include hook-slider-rail;
+    }
+
+}
+
+
+/* Track
+ ========================================================================== */
+
+.uk-slider-track,
+.uk-slider-tracks {
+    background-color: var(--slider-track-background);
+    border-radius: var(--slider-border-radius);
+    height: var(--slider-track-height);
+    position: absolute;
+    @if meta.mixin-exists('hook-slider-track') {
+        @include hook-slider-track;
+    }
+
+}
+
+.uk-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 meta.mixin-exists('hook-slider-track-draggable') {
+        @include hook-slider-track-draggable;
+    }
+
+}
+
+
+/* Handle
+ ========================================================================== */
+
+.uk-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 meta.mixin-exists('hook-slider-handle') {
+        @include hook-slider-handle;
+    }
+
+}
+
+.uk-slider-handle:hover {
+    background-color: var(--slider-handle-hover-background);
+    border-color: var(--slider-handle-hover-border);
+    @if meta.mixin-exists('hook-slider-handle-hover') {
+        @include hook-slider-handle-hover;
+    }
+
+}
+
+.uk-slider-handle:focus {
+    box-shadow: none;
+    outline: none;
+    @if meta.mixin-exists('hook-slider-handle-focus') {
+        @include hook-slider-handle-focus;
+    }
+
+}
+
+.uk-slider-handle:focus-visible {
+    border-color: var(--slider-handle-focus-border);
+    box-shadow: 0 0 0 3px var(--slider-handle-focus-box-shadow);
+}
+
+.uk-slider-handle-click-focused:focus {
+    border-color: var(--slider-handle-focus-border);
+    box-shadow: unset;
+}
+
+.uk-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 meta.mixin-exists('hook-slider-handle-active') {
+        @include hook-slider-handle-active;
+    }
+
+}
+
+.uk-slider-handle-dragging.uk-slider-handle-dragging.uk-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 meta.mixin-exists('hook-slider-handle-dragging') {
+        @include hook-slider-handle-dragging;
+    }
+
+}
+
+.uk-slider-handle-dragging.uk-slider-handle-dragging.uk-slider-handle-dragging-delete {
+    opacity: 0;
+}
+
+
+/* Mark
+ ========================================================================== */
+
+.uk-slider-mark {
+    font-size: var(--slider-mark-font-size);
+    left: 0;
+    position: absolute;
+    top: var(--slider-mark-offset);
+    width: 100%;
+    @if meta.mixin-exists('hook-slider-mark') {
+        @include hook-slider-mark;
+    }
+
+}
+
+.uk-slider-mark-text {
+    color: var(--slider-mark-text-color);
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    text-align: center;
+    vertical-align: middle;
+    @if meta.mixin-exists('hook-slider-mark-text') {
+        @include hook-slider-mark-text;
+    }
+
+}
+
+.uk-slider-mark-text-active {
+    color: var(--slider-mark-text-active-color);
+    @if meta.mixin-exists('hook-slider-mark-text-active') {
+        @include hook-slider-mark-text-active;
+    }
+
+}
+
+
+/* Step
+ ========================================================================== */
+
+.uk-slider-step {
+    background: transparent;
+    height: var(--slider-step-height);
+    position: absolute;
+    width: 100%;
+    @if meta.mixin-exists('hook-slider-step') {
+        @include hook-slider-step;
+    }
+
+}
+
+
+/* Dots
+ ========================================================================== */
+
+.uk-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 meta.mixin-exists('hook-slider-dot') {
+        @include hook-slider-dot;
+    }
+
+}
+
+.uk-slider-dot-active {
+    background-color: var(--slider-dot-active-background);
+    border-color: var(--slider-dot-active-border);
+    @if meta.mixin-exists('hook-slider-dot-active') {
+        @include hook-slider-dot-active;
+    }
+
+}
+
+.uk-slider-dot-reverse {
+    margin-right: calc(var(--slider-dot-width) / -2);
+    @if meta.mixin-exists('hook-slider-dot-reverse') {
+        @include hook-slider-dot-reverse;
+    }
+
+}
+
+
+/* Disabled state
+ ========================================================================== */
+
+.uk-slider-disabled {
+    opacity: 0.7;
+    @if meta.mixin-exists('hook-slider-disabled') {
+        @include hook-slider-disabled;
+    }
+
+}
+
+.uk-slider-disabled .uk-slider-track {
+    background-color: var(--slider-track-disabled-background);
+    @if meta.mixin-exists('hook-slider-disabled-track') {
+        @include hook-slider-disabled-track;
+    }
+
+}
+
+.uk-slider-disabled .uk-slider-handle,
+.uk-slider-disabled .uk-slider-dot {
+    box-shadow: none;
+    cursor: not-allowed;
+}
+
+.uk-slider-disabled .uk-slider-handle {
+    background-color: var(--slider-handle-disabled-background);
+    border-color: var(--slider-handle-disabled-border);
+}
+
+.uk-slider-disabled .uk-slider-dot {
+    background-color: var(--slider-dot-disabled-background);
+    border-color: var(--slider-dot-disabled-border);
+}
+
+.uk-slider-disabled .uk-slider-mark-text,
+.uk-slider-disabled .uk-slider-dot {
+    cursor: not-allowed !important;
+}
+
+
+/* Vertical
+ ========================================================================== */
+
+.uk-slider-vertical {
+    height: 100%;
+    padding: 0 var(--slider-padding-horizontal);
+    width: var(--slider-width);
+}
+
+.uk-slider-vertical .uk-slider-rail {
+    height: 100%;
+    width: var(--slider-rail-width);
+}
+
+.uk-slider-vertical .uk-slider-track {
+    bottom: 0;
+    left: var(--slider-padding-horizontal);
+    width: var(--slider-track-width);
+}
+
+.uk-slider-vertical .uk-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));
+}
+
+.uk-slider-vertical .uk-slider-handle {
+    margin-left: var(--slider-handle-offset);
+    margin-top: 0;
+    position: absolute;
+    touch-action: pan-y;
+    z-index: 1;
+}
+
+.uk-slider-vertical .uk-slider-mark {
+    height: 100%;
+    left: var(--slider-mark-offset);
+    top: 0;
+}
+
+.uk-slider-vertical .uk-slider-step {
+    height: 100%;
+    width: var(--slider-step-width);
+}
+
+.uk-slider-vertical .uk-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
+ ========================================================================== */
+
+.uk-slider-tooltip {
+    box-sizing: border-box;
+    left: -9999px;
+    position: absolute;
+    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+    top: -9999px;
+    visibility: visible;
+}
+
+.uk-slider-tooltip * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+}
+
+.uk-slider-tooltip-hidden {
+    display: none;
+}
+
+.uk-slider-tooltip-placement-top {
+    padding: 4px 0 8px;
+}
+
+.uk-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;
+}
+
+.uk-slider-tooltip-arrow {
+    border-color: transparent;
+    border-style: solid;
+    height: 0;
+    position: absolute;
+    width: 0;
+}
+
+.uk-slider-tooltip-placement-top .uk-slider-tooltip-arrow {
+    border-top-color: #6c6c6c;
+    border-width: 4px 4px 0;
+    bottom: 4px;
+    left: 50%;
+    margin-left: -4px;
+}
+
+.uk-slider-tooltip-zoom-down-enter,
+.uk-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);
+}
+
+.uk-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;
+}
+
+.uk-slider-tooltip-zoom-down-enter.uk-slider-tooltip-zoom-down-enter-active,
+.uk-slider-tooltip-zoom-down-appear.uk-slider-tooltip-zoom-down-appear-active {
+    animation-name: uk-slider-tooltip-zoom-down-in;
+    animation-play-state: running;
+}
+
+.uk-slider-tooltip-zoom-down-leave.uk-slider-tooltip-zoom-down-leave-active {
+    animation-name: uk-slider-tooltip-zoom-down-out;
+    animation-play-state: running;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if meta.mixin-exists('hook-slider-misc') {
+    @include hook-slider-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --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};
+}

package/styles/subnav.scss

@@ -144,7 +144,7 @@
     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-left: calc(var(--subnav-divider-margin-horizontal) - var(--subnav-margin-horizontal));
     margin-right: var(--subnav-divider-margin-horizontal);
 }
 

package/styles/switch.scss

@@ -179,6 +179,18 @@
 }
 
 
+/* Loading
+ ========================================================================== */
+
+.uk-switch-loading .uk-switch-handle::before {
+    visibility: hidden;
+}
+
+.uk-switch-loading-icon {
+    display: block;
+}
+
+
 /* Hooks
  ========================================================================== */