@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/progress.scss

@@ -1,127 +0,0 @@
-// Name:            Progress
-// Description:     Component to create progress bars
-//
-// Component:       `uk-progress`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Progress
- ========================================================================== */
-
-/*
- * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- * 2. Remove default style
- * 3. Behave like a block element
- * 4. Remove borders in Firefox and Edge
- * 5. Set background color for progress container in Firefox, IE11 and Edge
- * 6. Style
- */
-
-.uk-progress {
-    /* 2 */
-    appearance: none;
-
-    /* 5 */
-    background-color: var(--progress-background);
-
-    /* 4 */
-    border: 0;
-
-    /* 3 */
-    display: block;
-    height: var(--progress-height);
-
-    /* 6 */
-    margin-bottom: var(--progress-margin-vertical);
-
-    /* 1 */
-    vertical-align: baseline;
-    width: 100%;
-    @if meta.mixin-exists('hook-progress') {
-        @include hook-progress;
-    }
-}
-
-/* Add margin if adjacent element */
-* + .uk-progress { margin-top: var(--progress-margin-vertical); }
-
-/*
- * Remove animated circles for indeterminate state in IE11 and Edge
- */
-
-.uk-progress:indeterminate { color: transparent; }
-
-/*
- * Progress container
- * 2. Remove progress bar for indeterminate state in Firefox
- */
-
-.uk-progress::-webkit-progress-bar {
-    background-color: var(--progress-background);
-    @if meta.mixin-exists('hook-progress') {
-        @include hook-progress;
-    }
-}
-
-/* 2 */
-.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
-
-/*
- * Progress bar
- * 1. Remove right border in IE11 and Edge
- */
-
-.uk-progress::-webkit-progress-value {
-    background-color: var(--progress-bar-background);
-    transition: width 0.6s ease;
-    @if meta.mixin-exists('hook-progress-bar') {
-        @include hook-progress-bar;
-    }
-}
-
-.uk-progress::-moz-progress-bar {
-    background-color: var(--progress-bar-background);
-    @if meta.mixin-exists('hook-progress-bar') {
-        @include hook-progress-bar;
-    }
-}
-
-.uk-progress::-ms-fill {
-    background-color: var(--progress-bar-background);
-
-    /* 1 */
-    border: 0;
-    transition: width 0.6s ease;
-    @if meta.mixin-exists('hook-progress-bar') {
-        @include hook-progress-bar;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-progress-misc') {
-    @include hook-progress-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --progress-height: #{$progress-height};
-    --progress-margin-vertical: var(--global-margin);
-    --progress-background: var(--global-muted-background);
-    --progress-bar-background: var(--global-primary-background);
-}

package/styles/radio.scss

@@ -1,268 +0,0 @@
-// Name:            Checkbox Control
-// Description:     Component to create Checkbox element
-//
-// Component:       `uk-control-checkbox`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Radio
- ========================================================================== */
-
-.uk-radio-wrapper {
-    cursor: pointer;
-    display: flex;
-    line-height: unset;
-    user-select: none;
-    @if meta.mixin-exists('hook-radio-wrapper') {
-        @include hook-radio-wrapper;
-    }
-
-    &.uk-control {
-        background-color: var(--radio-control-background);
-    }
-}
-
-.uk-radio-wrapper .uk-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 meta.mixin-exists('hook-radio-radio') {
-        @include hook-radio-radio;
-    }
-}
-
-.uk-radio-wrapper .uk-radio-input {
-    cursor: pointer;
-    height: 100%;
-    inset: 0;
-    margin: 0;
-    opacity: 0;
-    position: absolute;
-    width: 100%;
-    z-index: 1;
-    @if meta.mixin-exists('hook-radio-input') {
-        @include hook-radio-input;
-    }
-}
-
-.uk-radio-wrapper .uk-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 meta.mixin-exists('hook-radio-inner') {
-        @include hook-radio-inner;
-    }
-}
-
-.uk-radio-wrapper .uk-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);
-}
-
-.uk-radio-wrapper .uk-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 meta.mixin-exists('hook-radio-label') {
-        @include hook-radio-label;
-    }
-}
-
-// Hover state
-.uk-radio-wrapper:not(.uk-checked):hover {
-    @if meta.mixin-exists('hook-radio-hover') {
-        @include hook-radio-hover;
-    }
-}
-
-.uk-radio-wrapper:not(.uk-checked):hover .uk-radio-inner,
-.uk-radio:not(.uk-radio-checked):hover .uk-radio-inner {
-    border-color: var(--radio-hover-border);
-}
-
-.uk-radio-wrapper:not(.uk-disabled):hover .uk-radio::after,
-.uk-radio:not(.uk-radio-disabled):hover::after {
-    visibility: visible;
-}
-
-// Checked state
-.uk-radio-checked {
-    @if meta.mixin-exists('hook-radio-checked') {
-        @include hook-radio-checked;
-    }
-}
-
-.uk-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%;
-}
-
-.uk-radio-checked .uk-radio-inner {
-    background-color: var(--radio-checked-background);
-    border-color: var(--radio-checked-border);
-}
-
-.uk-radio-checked .uk-radio-inner::after {
-    opacity: 1;
-    transform: scale(1);
-    transition: all var(--transition-medium-fast-duration) var(--ease-in-out-circ);
-}
-
-// Disabled state
-.uk-radio-disabled {
-    cursor: not-allowed;
-    @if meta.mixin-exists('hook-radio-disabled') {
-        @include hook-radio-disabled;
-    }
-
-}
-
-.uk-radio-disabled .uk-radio-label {
-    color: var(--control-placeholder-color);
-}
-
-.uk-radio-disabled .uk-radio-input {
-    cursor: not-allowed;
-}
-
-.uk-radio-disabled .uk-radio-inner {
-    background-color: transparent;
-    border-color: var(--radio-disabled-border);
-}
-
-.uk-radio-disabled.uk-radio-checked .uk-radio-inner::after {
-    animation-name: none;
-    background-color: var(--radio-disabled-icon-color);
-}
-
-
-/* Group
- ========================================================================== */
-
-.uk-radio-group {
-    display: flex;
-    flex-direction: row;
-    gap: var(--control-affix-margin);
-    @if meta.mixin-exists('hook-radio-group') {
-        @include hook-radio-group;
-    }
-}
-
-.uk-radio-group-stack {
-    flex-direction: column;
-    @if meta.mixin-exists('hook-radio-group-stack') {
-        @include hook-radio-group-stack;
-    }
-}
-
-
-/* Control
- ========================================================================== */
-
-// Control
-.uk-control-radio {
-    cursor: pointer;
-    padding-bottom: var(--control-medium-padding-vertical);
-    padding-top: var(--control-medium-padding-vertical);
-    @if meta.mixin-exists('hook-radio-control') {
-        @include hook-radio-control;
-    }
-}
-
-.uk-control-radio.uk-checked {
-    background-color: var(--radio-checked-control-background);
-    border-color: var(--radio-checked-border);
-    color: var(--radio-checked-control-color);
-}
-
-.uk-control-radio.uk-checked:hover {
-    border-color: var(--radio-checked-border);
-}
-
-.uk-control-radio.uk-disabled {
-    background-color: var(--radio-disabled-background);
-    border-color: var(--radio-disabled-border);
-    cursor: not-allowed;
-}
-
-
-/* Right to Left Direction
- ========================================================================== */
-
-[dir='rtl'] .uk-radio-wrapper .uk-radio-label,
-.uk-radio-wrapper.uk-radio-rtl .uk-radio-label {
-    padding-left: 0;
-    padding-right: var(--control-affix-margin);
-}
-
-
-// Vars
-// ========================================================================
-
-:root, ::after, ::before {
-    --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);
-}