@broxus/react-uikit 0.17.4 → 0.19.0

package/dist/esm/components/Overlay/index.scss

@@ -1,105 +0,0 @@
-// Name:            Overlay
-// Description:     Component to create content areas overlaying an image
-//
-// Component:       `uk-overlay`
-//
-// Adopted:         `uk-overlay-icon`
-//
-// Modifier:        `uk-overlay-default`
-//                  `uk-overlay-primary`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Overlay
- ========================================================================== */
-
-.uk-overlay {
-    padding: var(--overlay-padding-vertical) var(--overlay-padding-horizontal);
-    @if mixin-exists(hook-overlay) {
-        @include hook-overlay;
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-overlay > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Icon
- ========================================================================== */
-
-.uk-overlay-icon {
-    @if mixin-exists(hook-overlay-icon) {
-        @include hook-overlay-icon;
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Default
- */
-
-.uk-overlay-default {
-    background: var(--overlay-default-background);
-    @if mixin-exists(hook-overlay-default) {
-        @include hook-overlay-default;
-    }
-}
-
-/*
- * Primary
- */
-
-.uk-overlay-primary {
-    background: var(--overlay-primary-background);
-    @if mixin-exists(hook-overlay-primary) {
-        @include hook-overlay-primary;
-    }
-}
-
-// Color Mode
-@if $overlay-primary-color-mode == light {
-    .uk-overlay-primary {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $overlay-primary-color-mode == dark {
-    .uk-overlay-primary {
-        @extend .uk-dark !optional;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-overlay-misc) {
-    @include hook-overlay-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --overlay-padding-horizontal: var(--global-gutter);
-    --overlay-padding-vertical: var(--global-gutter);
-    --overlay-default-background: #{$overlay-default-background};
-    --overlay-primary-background: #{$overlay-primary-background};
-}

package/dist/esm/components/Spinner/index.scss

@@ -1,84 +0,0 @@
-// Name:            Spinner
-// Description:     Component to create a loading spinner
-//
-// Component:       `uk-spinner`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Spinner
- ========================================================================== */
-
-/*
- * Adopts `uk-icon`
- */
-
-.uk-spinner {
-    @if 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 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/dist/esm/components/Switch/index.scss

@@ -1,205 +0,0 @@
-// Name:            Switch
-// Description:     Switch Selector
-//
-// Component:       `uk-switch`
-//
-// ========================================================================
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-/* ========================================================================
-   Component: Switch
- ========================================================================== */
-
-.uk-switch {
-    appearance: none;
-    background: var(--switch-background);
-    border: var(--switch-border-width) var(--switch-border-style) var(--switch-border);
-    border-radius: var(--switch-border-radius);
-    box-sizing: content-box;
-    color: inherit;
-    cursor: pointer;
-    display: inline-block;
-    font: inherit;
-    height: var(--switch-height);
-    line-height: var(--switch-height);
-    margin: 0;
-    min-width: var(--switch-width);
-    padding: 0;
-    position: relative;
-    transition: all var(--transition-medium-fast-duration);
-    user-select: none;
-    vertical-align: middle;
-
-    @if mixin-exists(hook-switch) {
-        @include hook-switch;
-    }
-}
-
-.uk-switch:not(.uk-switch-disabled):hover::after {
-    visibility: visible;
-}
-
-.uk-switch-handle {
-    height: calc(var(--switch-height) - var(--switch-handle-offset) * 2);
-    inset-inline-start: var(--switch-handle-offset);
-    position: absolute;
-    top: var(--switch-handle-offset);
-    transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
-    width: calc(var(--switch-height) - var(--switch-handle-offset) * 2);
-    z-index: 10;
-
-    @if mixin-exists(hook-switch-handle) {
-        @include hook-switch-handle;
-    }
-}
-
-.uk-switch-handle::before {
-    background: var(--switch-handle-background);
-    border-radius: var(--switch-handle-border-radius);
-    bottom: 0;
-    content: '';
-    inset-inline: 0 0;
-    position: absolute;
-    top: 0;
-    transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
-}
-
-
-/* Inner
- ========================================================================== */
-
-.uk-switch-inner {
-    border-radius: var(--switch-border-radius);
-    box-sizing: border-box;
-    display: block;
-    height: 100%;
-    overflow: hidden;
-    padding-inline: calc(var(--switch-height) + var(--switch-handle-offset)) calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
-    transition: padding-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), padding-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
-}
-
-.uk-switch-inner-checked,
-.uk-switch-inner-unchecked {
-    display: block;
-    pointer-events: none;
-    transition: margin-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), margin-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
-}
-
-.uk-switch-inner-checked {
-    margin-inline: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2)) calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
-}
-
-.uk-switch-inner-unchecked {
-    margin-inline: 0 0;
-    margin-top: calc(var(--switch-height) * -1);
-}
-
-
-/* States
- ========================================================================== */
-
-// Active state
-.uk-switch:not(.uk-switch-disabled):active .uk-switch-handle::before {
-    inset-inline: 0 -30%;
-}
-
-.uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-handle::before {
-    inset-inline: -30% 0;
-}
-
-.uk-switch:not(.uk-switch-disabled, .uk-switch-checked):active .uk-switch-inner-unchecked {
-    margin-inline: calc(var(--switch-handle-offset) * 2) calc(var(--switch-handle-offset) * -2);
-}
-
-.uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-inner-checked {
-    margin-inline: calc(var(--switch-handle-offset) * -2) calc(var(--switch-handle-offset) * 2);
-}
-
-// Checked state
-.uk-switch-checked {
-    background: var(--switch-checked-background);
-
-    @if mixin-exists(hook-switch-checked) {
-        @include hook-switch-checked;
-    }
-}
-
-.uk-switch-checked::after {
-    animation: uk-wave-effect 0.36s var(--ease-in-out);
-    animation-fill-mode: backwards;
-    border: var(--switch-border-width) solid var(--switch-checked-background);
-    border-radius: var(--switch-border-radius);
-    box-sizing: border-box;
-    content: '';
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    visibility: hidden;
-    width: 100%;
-}
-
-.uk-switch-checked .uk-switch-handle {
-    inset-inline-start: calc(100% - var(--switch-height) + var(--switch-handle-offset));
-
-    @if mixin-exists(hook-switch-checked-handle) {
-        @include hook-switch-checked-handle;
-    }
-}
-
-.uk-switch-checked .uk-switch-handle::before {
-    background: var(--switch-handle-checked-background);
-}
-
-.uk-switch-checked .uk-switch-inner {
-    padding-inline: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666) calc(var(--switch-height) + var(--switch-handle-offset));
-}
-
-.uk-switch-checked .uk-switch-inner-checked {
-    margin-inline: 0 0;
-}
-
-.uk-switch-checked .uk-switch-inner-unchecked {
-    margin-inline: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2)) calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
-}
-
-// Disabled
-.uk-switch-disabled {
-    cursor: not-allowed;
-    opacity: 0.65;
-
-    @if mixin-exists(hook-switch-disabled) {
-        @include hook-switch-disabled;
-    }
-}
-
-
-/* Hooks
- ========================================================================== */
-
-@if mixin-exists(hook-switch-misc) {
-    @include hook-switch-misc;
-}
-
-
-/* Vars
- ========================================================================== */
-
-:root {
-    --switch-background: #{$switch-background};
-    --switch-border: var(--global-border);
-    --switch-border-style: var(--global-border-style);
-    --switch-border-width: var(--global-border-width);
-    --switch-checked-background: var(--global-success-background);
-    --switch-border-radius: #{$switch-border-radius};
-    --switch-height: #{$switch-height};
-    --switch-width: #{$switch-width};
-    --switch-handle-background: var(--global-background);
-    --switch-handle-checked-background: var(--global-background);
-    --switch-handle-border-radius: #{$switch-handle-border-radius};
-    --switch-handle-offset: #{$switch-handle-offset};
-}