@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/slider.scss

@@ -1,521 +0,0 @@
-// 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/spinner.scss

@@ -1,86 +0,0 @@
-// Name:            Spinner
-// Description:     Component to create a loading spinner
-//
-// Component:       `uk-spinner`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Spinner
- ========================================================================== */
-
-/*
- * Adopts `uk-icon`
- */
-
-.uk-spinner {
-    @if meta.mixin-exists('hook-spinner') {
-        @include hook-spinner;
-    }
-}
-
-
-/* SVG
- ========================================================================== */
-
-.uk-spinner > * { animation: uk-spinner-rotate var(--spinner-duration) linear infinite; }
-
-@keyframes uk-spinner-rotate {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(270deg); }
-}
-
-/*
- * Circle
- */
-
-.uk-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 meta.mixin-exists('hook-spinner-misc') {
-    @include hook-spinner-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --spinner-size: #{$spinner-size};
-    --spinner-stroke-width: #{$spinner-stroke-width};
-    --spinner-duration: #{$spinner-duration};
-}

package/styles/sticky.scss

@@ -1,62 +0,0 @@
-// Name:            Sticky
-// Description:     Component to make elements sticky in the viewport
-//
-// Component:       `uk-sticky`
-//
-// Modifier:        `uk-sticky-fixed`
-//
-// States:          `uk-active`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Sticky
- ========================================================================== */
-
-/*
- * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
- */
-
-.uk-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
- */
-
-.uk-sticky[class*='uk-animation-'] { animation-duration: var(--sticky-animation-duration); }
-
-.uk-sticky.uk-animation-reverse { animation-duration: var(--sticky-reverse-animation-duration); }
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-sticky-misc') {
-    @include hook-sticky-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --sticky-z-index: #{$global-z-index - 20};
-    --sticky-animation-duration: #{$sticky-animation-duration};
-    --sticky-reverse-animation-duration: #{$sticky-reverse-animation-duration};
-}