@broxus/react-uikit 0.21.0 → 0.22.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/variables.scss

@@ -1540,11 +1540,12 @@ $select-gutter:                                                 5px !default;
 $select-small-gutter:                                           5px !default;
 $select-medium-gutter:                                          15px !default;
 $select-large-gutter:                                           12px !default;
-$select-selector-padding-horizontal:                            $control-padding-horizontal !default;
-$select-selector-medium-padding-horizontal:                     $control-medium-padding-horizontal !default;
-$select-selector-large-padding-horizontal:                      $control-large-padding-horizontal !default;
-$select-selection-search-input-color:                           $control-color !default;
-$select-selection-placeholder-color:                            $control-placeholder-color !default;
+$select-content-padding-horizontal:                             $control-padding-horizontal !default;
+$select-content-padding-vertical:                               $select-gutter !default;
+$select-content-medium-padding-horizontal:                      $control-medium-padding-horizontal !default;
+$select-content-large-padding-horizontal:                       $control-large-padding-horizontal !default;
+$select-search-input-color:                                     $control-color !default;
+$select-placeholder-color:                                      $control-placeholder-color !default;
 $select-selection-item-background:                              $global-background !default;
 $select-selection-item-border-radius:                           $control-border-radius !default;
 $select-selection-item-font-size:                               14px !default;
@@ -1590,10 +1591,49 @@ $inverse-slidenav-active-color:                                 rgba($inverse-gl
 // Slider
 // ========================================================================
 
-$slider-container-margin-top:                                   -11px !default;
-$slider-container-margin-bottom:                                -39px !default;
-$slider-container-margin-left:                                  -25px !default;
-$slider-container-margin-right:                                 -25px !default;
+$slider-height:                                                 14px !default;
+$slider-width:                                                  14px !default;
+$slider-padding-horizontal:                                     5px !default;
+$slider-padding-vertical:                                       5px !default;
+$slider-border-radius:                                          $global-border-radius !default;
+$slider-rail-background:                                        $global-default-background !default;
+$slider-rail-height:                                            4px !default;
+$slider-rail-width:                                             4px !default;
+$slider-track-background:                                       $global-primary-background !default;
+$slider-track-height:                                           4px !default;
+$slider-track-width:                                            4px !default;
+$slider-track-disabled-background:                              $global-default-background !default;
+$slider-handle-background:                                      $global-default-background !default;
+$slider-handle-border:                                          $global-primary-border !default;
+$slider-handle-hover-background:                                $global-default-background !default;
+$slider-handle-hover-border:                                    $global-primary-border !default;
+$slider-handle-focus-border:                                    $global-primary-border !default;
+$slider-handle-active-border:                                   $global-primary-border !default;
+$slider-handle-dragging-border:                                 $global-primary-border !default;
+$slider-handle-disabled-background:                             $global-default-background !default;
+$slider-handle-disabled-border:                                 $global-border !default;
+$slider-handle-focus-box-shadow:                                rgba($global-primary-border, 8%) !default;
+$slider-handle-active-box-shadow:                               rgba($global-primary-border, 16%) !default;
+$slider-handle-dragging-box-shadow:                             rgba($global-primary-border, 24%) !default;
+$slider-handle-border-width:                                    2px !default;
+$slider-handle-offset:                                          -5px !default;
+$slider-handle-height:                                          14px !default;
+$slider-handle-width:                                           14px !default;
+$slider-mark-font-size:                                         $global-xsmall-font-size !default;
+$slider-mark-offset:                                            18px !default;
+$slider-mark-text-color:                                        $global-muted-color !default;
+$slider-mark-text-active-color:                                 $global-emphasis-color !default;
+$slider-step-height:                                            4px !default;
+$slider-step-width:                                             4px !default;
+$slider-dot-background:                                         $global-default-background !default;
+$slider-dot-border:                                             $global-border !default;
+$slider-dot-border-width:                                       2px !default;
+$slider-dot-active-background:                                  $global-default-background !default;
+$slider-dot-active-border:                                      $global-primary-border !default;
+$slider-dot-disabled-background:                                $global-default-background !default;
+$slider-dot-disabled-border:                                    $global-muted-border !default;
+$slider-dot-height:                                             8px !default;
+$slider-dot-width:                                              8px !default;
 
 
 // Sortable