@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/subnav.scss

@@ -1,260 +0,0 @@
-// Name:            Subnav
-// Description:     Component to create a sub navigation
-//
-// Component:       `uk-subnav`
-//
-// Modifiers:       `uk-subnav-divider`
-//                  `uk-subnav-pill`
-//
-// States:          `uk-active`
-//                  `uk-first-column`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Subnav
- ========================================================================== */
-
-/*
- * 1. Allow items to wrap into the next line
- * 2. Center items vertically if they have a different height
- * 3. Gutter
- * 4. Reset list
- */
-
-.uk-subnav {
-    /* 2 */
-    align-items: center;
-    display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-    list-style: none;
-
-    /* 3 */
-    margin-left: calc(var(--subnav-margin-horizontal) * -1);
-
-    /* 4 */
-    padding: 0;
-    @if meta.mixin-exists('hook-subnav') {
-        @include hook-subnav;
-    }
-}
-
-/*
- * 1. Space is allocated solely based on content dimensions: 0 0 auto
- * 2. Gutter
- * 3. Create position context for dropdowns
- */
-
-.uk-subnav > * {
-    /* 1 */
-    flex: none;
-
-    /* 2 */
-    padding-left: var(--subnav-margin-horizontal);
-
-    /* 3 */
-    position: relative;
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * Items must target `a` elements to exclude other elements (e.g. dropdowns)
- * Using `:first-child` instead of `a` to support `span` elements for text
- * 1. Center content vertically, e.g. an icon
- * 2. Imitate white space gap when using flexbox
- * 3. Style
- */
-
-.uk-subnav > * > :first-child {
-    align-items: center;
-
-    /* 3 */
-    color: var(--subnav-item-color);
-
-    /* 2 */
-    column-gap: 0.25em;
-
-    /* 1 */
-    display: flex;
-    @if meta.mixin-exists('hook-subnav-item') {
-        @include hook-subnav-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-subnav > * > a:hover,
-.uk-subnav > * > a:focus {
-    color: var(--subnav-item-hover-color);
-    outline: none;
-    text-decoration: var(--subnav-item-hover-text-decoration);
-    @if meta.mixin-exists('hook-subnav-item-hover') {
-        @include hook-subnav-item-hover;
-    }
-}
-
-/* Active */
-.uk-subnav > .uk-active > a {
-    color: var(--subnav-item-active-color);
-    @if meta.mixin-exists('hook-subnav-item-active') {
-        @include hook-subnav-item-active;
-    }
-}
-
-
-/* Divider modifier
- ========================================================================== */
-
-/*
- * Set gutter
- */
-
-.uk-subnav-divider {
-    margin-left: calc((var(--subnav-divider-margin-horizontal) * 2 + var(--subnav-divider-border-width)) * -1);
-}
-
-/*
- * Align items and divider vertically
- */
-
-.uk-subnav-divider > * {
-    align-items: center;
-    display: flex;
-}
-
-/*
- * Divider
- * 1. `nth-child` makes it also work without JS if it's only one row
- */
-
-.uk-subnav-divider > ::before {
-    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-right: var(--subnav-divider-margin-horizontal);
-}
-
-/* 1 */
-.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
-    border-left-color: var(--subnav-divider-border);
-    @if meta.mixin-exists('hook-subnav-divider') {
-        @include hook-subnav-divider;
-    }
-}
-
-
-/* Pill modifier
- ========================================================================== */
-
-.uk-subnav-pill > * > :first-child {
-    background: var(--subnav-pill-item-background);
-    color: var(--subnav-pill-item-color);
-    padding: var(--subnav-pill-item-padding-vertical) var(--subnav-pill-item-padding-horizontal);
-    @if meta.mixin-exists('hook-subnav-pill-item') {
-        @include hook-subnav-pill-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-subnav-pill > * > a:hover,
-.uk-subnav-pill > * > a:focus {
-    background-color: var(--subnav-pill-item-hover-background);
-    color: var(--subnav-pill-item-hover-color);
-    @if meta.mixin-exists('hook-subnav-pill-item-hover') {
-        @include hook-subnav-pill-item-hover;
-    }
-}
-
-/* OnClick */
-.uk-subnav-pill > * > a:active {
-    background-color: var(--subnav-pill-item-onclick-background);
-    color: var(--subnav-pill-item-onclick-color);
-    @if meta.mixin-exists('hook-subnav-pill-item-onclick') {
-        @include hook-subnav-pill-item-onclick;
-    }
-}
-
-/* Active */
-.uk-subnav-pill > .uk-active > a {
-    background-color: var(--subnav-pill-item-active-background);
-    color: var(--subnav-pill-item-active-color);
-    @if meta.mixin-exists('hook-subnav-pill-item-active') {
-        @include hook-subnav-pill-item-active;
-    }
-}
-
-
-/* Disabled
- * The same for all style modifiers
- ========================================================================== */
-
-.uk-subnav > .uk-disabled > a {
-    color: var(--subnav-item-disabled-color);
-    @if meta.mixin-exists('hook-subnav-item-disabled') {
-        @include hook-subnav-item-disabled;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-subnav-misc') {
-    @include hook-subnav-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --subnav-margin-horizontal: #{$subnav-margin-horizontal};
-    --subnav-item-color: var(--global-muted-color);
-    --subnav-item-hover-color: var(--global-color);
-    --subnav-item-hover-text-decoration: #{$subnav-item-hover-text-decoration};
-    --subnav-item-active-color: var(--global-emphasis-color);
-    --subnav-divider-margin-horizontal: #{$subnav-margin-horizontal};
-    --subnav-divider-border-height: #{$subnav-divider-border-height};
-    --subnav-divider-border-width: var(--global-border-width);
-    --subnav-divider-border: var(--global-border);
-    --subnav-pill-item-padding-horizontal: #{$subnav-pill-item-padding-horizontal};
-    --subnav-pill-item-padding-vertical: #{$subnav-pill-item-padding-vertical};
-    --subnav-pill-item-background: #{$subnav-pill-item-background};
-    --subnav-pill-item-color: #{$subnav-item-color};
-    --subnav-pill-item-hover-background: var(--global-muted-background);
-    --subnav-pill-item-hover-color: var(--global-color);
-    --subnav-pill-item-onclick-background: #{$subnav-pill-item-hover-background};
-    --subnav-pill-item-onclick-color: #{$subnav-pill-item-hover-color};
-    --subnav-pill-item-active-background: var(--global-primary-background);
-    --subnav-pill-item-active-color: var(--global-inverse-color);
-    --subnav-item-disabled-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-subnav-item-color: var(--inverse-global-muted-color);
-    --inverse-subnav-item-hover-color: var(--inverse-global-color);
-    --inverse-subnav-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-subnav-divider-border: var(--inverse-global-border);
-    --inverse-subnav-pill-item-background: #{$inverse-subnav-pill-item-background};
-    --inverse-subnav-pill-item-color: var(--inverse-global-muted-color);
-    --inverse-subnav-pill-item-hover-background: var(--inverse-global-muted-background);
-    --inverse-subnav-pill-item-hover-color: var(--inverse-global-color);
-    --inverse-subnav-pill-item-onclick-background: #{$inverse-subnav-pill-item-hover-background};
-    --inverse-subnav-pill-item-onclick-color: #{$inverse-subnav-pill-item-hover-color};
-    --inverse-subnav-pill-item-active-background: var(--inverse-global-primary-background);
-    --inverse-subnav-pill-item-active-color: var(--inverse-global-inverse-color);
-    --inverse-subnav-item-disabled-color: var(--inverse-global-muted-color);
-}

package/styles/svg.scss

@@ -1,46 +0,0 @@
-// Name:            SVG
-// Description:     Component to style SVGs
-//
-// Component:       `uk-svg`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-/* ========================================================================
-   Component: SVG
- ========================================================================== */
-
-/*
- * 1. Fill all SVG elements with the current text color if no `fill` attribute is set
- * 2. Set the fill and stroke color of all SVG elements to the current text color
- */
-
-/* 1 */
-.uk-svg,
-
-    /* 2 */
-.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve) {
-    fill: currentColor;
-}
-
-.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) {
-    stroke: currentColor;
-}
-
-/*
- * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
- */
-
-.uk-svg {
-    transform: translate(0, 0);
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-svg-misc') {
-    @include hook-svg-misc;
-}

package/styles/switch.scss

@@ -1,218 +0,0 @@
-// Name:            Switch
-// Description:     Switch Selector
-//
-// Component:       `uk-switch`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   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 meta.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 meta.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;
-    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;
-    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 meta.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 meta.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;
-}
-
-.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 meta.mixin-exists('hook-switch-disabled') {
-        @include hook-switch-disabled;
-    }
-}
-
-
-/* Loading
- ========================================================================== */
-
-.uk-switch-loading .uk-switch-handle::before {
-    visibility: hidden;
-}
-
-.uk-switch-loading-icon {
-    display: block;
-}
-
-
-/* Hooks
- ========================================================================== */
-
-@if meta.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};
-}