@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/iconnav.scss

@@ -1,142 +0,0 @@
-// Name:            Iconnav
-// Description:     Component to create icon navigations
-//
-// Component:       `uk-iconnav`
-//
-// Modifier:        `uk-iconnav-vertical`
-//
-// States:          `uk-active`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Iconnav
- ========================================================================== */
-
-/*
- * 1. Allow items to wrap into the next line
- * 2. Reset list
- * 3. Gutter
- */
-
-.uk-iconnav {
-    display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-    list-style: none;
-
-    /* 2 */
-    margin: 0 0 0 /* 3 */ calc(var(--iconnav-margin-horizontal) * -1);
-    padding: 0;
-    @if meta.mixin-exists('hook-iconnav') {
-        @include hook-iconnav;
-    }
-}
-
-/*
- * Space is allocated based on content dimensions, but shrinks: 0 1 auto
- * 1. Gutter
- */
-
-.uk-iconnav > * {
-    /* 1 */
-    padding-left: var(--iconnav-margin-horizontal);
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * Items must target `a` elements to exclude other elements (e.g. dropdowns)
- * 1. Prevent gap if child element is `inline-block`, e.g. an icon
- * 2. Style
- */
-
-.uk-iconnav > * > a {
-    /* 2 */
-    color: var(--iconnav-item-color);
-
-    /* 1 */
-    display: block;
-    @if meta.mixin-exists('hook-iconnav-item') {
-        @include hook-iconnav-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-iconnav > * > a:hover,
-.uk-iconnav > * > a:focus {
-    color: var(--iconnav-item-hover-color);
-    outline: none;
-    @if meta.mixin-exists('hook-iconnav-item-hover') {
-        @include hook-iconnav-item-hover;
-    }
-}
-
-/* Active */
-.uk-iconnav > .uk-active > a {
-    color: var(--iconnav-item-active-color);
-    @if meta.mixin-exists('hook-iconnav-item-active') {
-        @include hook-iconnav-item-active;
-    }
-}
-
-
-/* Modifier: 'uk-iconnav-vertical'
- ========================================================================== */
-
-/*
- * 1. Change direction
- * 2. Gutter
- */
-
-.uk-iconnav-vertical {
-    /* 1 */
-    flex-direction: column;
-
-    /* 2 */
-    margin-left: 0;
-    margin-top: calc(var(--iconnav-margin-vertical) * -1);
-}
-
-/* 2 */
-.uk-iconnav-vertical > * {
-    padding-left: 0;
-    padding-top: var(--iconnav-margin-vertical);
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-iconnav-misc') {
-    @include hook-iconnav-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --iconnav-margin-horizontal: var(--global-small-margin);
-    --iconnav-margin-vertical: var(--iconnav-margin-horizontal);
-    --iconnav-item-color: var(--global-muted-color);
-    --iconnav-item-hover-color: var(--global-color);
-    --iconnav-item-active-color: var(--global-color);
-
-    // Inverse
-    --inverse-iconnav-item-color: var(--inverse-global-muted-color);
-    --inverse-iconnav-item-hover-color: var(--inverse-global-color);
-    --inverse-iconnav-item-active-color: var(--inverse-global-color);
-}

package/styles/input-number.scss

@@ -1,98 +0,0 @@
-// Name:            Number Input Control
-// Description:     Component to create Number Input element
-//
-// Component:       `uk-control-number`
-//
-// ========================================================================
-
-
-/* ========================================================================
-   Component: Number
- ========================================================================== */
-
-.uk-number-wrapper {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    padding: 0;
-    width: 100%;
-}
-
-.uk-number-input {
-    -webkit-appearance: none;
-    background: none;
-    border: 0 none;
-    color: inherit;
-    display: inline-block;
-    font: inherit;
-    max-width: 100%;
-    outline: 0 none;
-    overflow: visible;
-    padding: 0;
-    vertical-align: middle;
-    width: 100%;
-}
-
-.uk-number-input:focus {
-    outline: 0 none;
-}
-
-.uk-number-input[type='number']::-webkit-inner-spin-button,
-.uk-number-input[type='number']::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    height: auto;
-    margin: 0;
-}
-
-.uk-number-input::-moz-placeholder {
-    opacity: 1;
-}
-
-.uk-number-input::-ms-input-placeholder {
-    color: var(--control-placeholder-color) !important;
-}
-
-.uk-number-input::placeholder {
-    color: var(--control-placeholder-color);
-}
-
-.uk-number-actions {
-    background-color: transparent;
-    border: 0 none;
-    border-radius: 0;
-    height: calc(2em - var(--control-border-width) * 2);
-    opacity: 1;
-    order: 99;
-}
-
-.uk-number-action {
-    align-items: center;
-    border: 0;
-    border-radius: 0;
-    display: flex;
-    height: 50%;
-}
-
-.uk-number-action:active .uk-number-action-up-inner,
-.uk-number-action:active .uk-number-action-down-inner {
-    transform: scale(0.9);
-}
-
-.uk-number-action .uk-number-action-up-inner,
-.uk-number-action .uk-number-action-down-inner {
-    color: var(--control-icon-color);
-    cursor: pointer;
-    transform: none;
-    transform-origin: 50% 50%;
-
-    &:hover { color: var(--control-icon-hover-color); }
-}
-
-
-/* Control
- ========================================================================== */
-
-.uk-control-number.uk-disabled .uk-number-actions,
-.uk-control-number.uk-readonly .uk-number-actions {
-    display: none;
-}

package/styles/input-password.scss

@@ -1,35 +0,0 @@
-// Name:            Number Input Control
-// Description:     Component to create Number Input element
-//
-// Component:       `uk-control-password`
-//
-// ========================================================================
-
-
-/* ========================================================================
-   Component: Password
- ========================================================================== */
-
-.uk-control-password,
-.uk-control-text {
-    /*
-     * Icon
-     */
-
-    .uk-control-password-icon {
-        color: var(--control-icon-color);
-        cursor: pointer;
-        font-size: 0.8rem;
-        transition: all var(--transition-duration);
-    }
-
-    // Hover state
-    .uk-control-password-icon:hover {
-        color: var(--control-icon-hover-color);
-    }
-
-    // Disabled state
-    .uk-control-password.uk-disabled .uk-control-password-icon {
-        display: none;
-    }
-}

package/styles/inverse.scss

@@ -1,65 +0,0 @@
-// Name:            Inverse
-// Description:     Inverse component style for light or dark backgrounds
-//
-// Component:       `uk-light`
-//                  `uk-dark`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-@use 'mixins' as *;
-
-
-/* ========================================================================
-   Component: Inverse
- ========================================================================== */
-
-/*
- * Implemented class depends on the general theme color
- * `uk-light` is for light colors on dark backgrounds
- * `uk-dark` is for dark colors on light backgrounds
- */
-
-@if $inverse-global-color-mode == light {
-    .uk-light {
-        @if meta.mixin-exists('hook-inverse') {
-            @include hook-inverse;
-        }
-    }
-}
-
-@if $inverse-global-color-mode == dark {
-    .uk-dark {
-        @if meta.mixin-exists('hook-inverse') {
-            @include hook-inverse;
-        }
-    }
-}
-
-* { --uk-inverse: initial; }
-
-.uk-light { --uk-inverse: light; }
-.uk-dark { --uk-inverse: dark; }
-
-.uk-inverse-light { --uk-inverse: light !important; }
-.uk-inverse-dark { --uk-inverse: dark !important; }
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --inverse-global-color: #{$inverse-global-color};
-    --inverse-global-emphasis-color: #{$inverse-global-emphasis-color};
-    --inverse-global-muted-color: #{$inverse-global-muted-color};
-    --inverse-global-inverse-color: #{$inverse-global-inverse-color};
-    --inverse-global-primary-background: #{$inverse-global-primary-background};
-    --inverse-global-muted-background: #{$inverse-global-muted-background};
-    --inverse-global-border: #{$inverse-global-border};
-}

package/styles/label.scss

@@ -1,125 +0,0 @@
-// Name:            Label
-// Description:     Component to indicate important notes
-//
-// Component:       `uk-label`
-//
-// Modifiers:       `uk-label-large`
-//                  `uk-label-success`
-//                  `uk-label-warning`
-//                  `uk-label-danger`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Label
- ========================================================================== */
-
-.uk-label {
-    background: var(--label-background);
-    border-radius: var(--label-border-radius);
-    color: var(--label-color);
-    display: inline-flex;
-    font-size: var(--label-font-size);
-    line-height: var(--label-line-height);
-    padding: var(--label-padding-vertical) var(--label-padding-horizontal);
-    vertical-align: middle;
-    white-space: nowrap;
-    @if meta.mixin-exists('hook-label') {
-        @include hook-label;
-    }
-}
-
-
-/* Size modifiers
- ========================================================================== */
-
-.uk-label-large {
-    font-size: var(--label-large-font-size);
-    line-height: var(--label-large-line-height);
-    padding: var(--label-large-padding-vertical) var(--label-large-padding-horizontal);
-}
-
-
-/* Color modifiers
- ========================================================================== */
-
-/*
- * Success
- */
-
-.uk-label-success {
-    background-color: var(--label-success-background);
-    color: var(--label-success-color);
-    @if meta.mixin-exists('hook-label-success') {
-        @include hook-label-success;
-    }
-}
-
-/*
- * Warning
- */
-
-.uk-label-warning {
-    background-color: var(--label-warning-background);
-    color: var(--label-warning-color);
-    @if meta.mixin-exists('hook-label-warning') {
-        @include hook-label-warning;
-    }
-}
-
-/*
- * Danger
- */
-
-.uk-label-danger {
-    background-color: var(--label-danger-background);
-    color: var(--label-danger-color);
-    @if meta.mixin-exists('hook-label-danger') {
-        @include hook-label-danger;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-label-misc') {
-    @include hook-label-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --label-padding-horizontal: var(--global-small-margin);
-    --label-padding-vertical: #{$label-padding-vertical};
-    --label-background: var(--global-primary-background);
-    --label-border-radius: #{$label-border-radius};
-    --label-font-size: var(--global-small-font-size);
-    --label-line-height: var(--global-line-height);
-    --label-large-padding-horizontal: var(--global-margin);
-    --label-large-padding-vertical: var(--global-xsmall-margin);
-    --label-large-font-size: var(--global-small-font-size);
-    --label-large-line-height: var(--global-line-height);
-    --label-color: var(--global-inverse-color);
-    --label-success-background: var(--global-success-background);
-    --label-success-color: var(--global-inverse-color);
-    --label-warning-background: var(--global-warning-background);
-    --label-warning-color: var(--global-inverse-color);
-    --label-danger-background: var(--global-danger-background);
-    --label-danger-color: var(--global-inverse-color);
-
-    // Inverse
-    --inverse-label-background: var(--inverse-global-primary-background);
-    --inverse-label-color: var(--inverse-global-inverse-color);
-}

package/styles/leader.scss

@@ -1,76 +0,0 @@
-// Name:            Leader
-// Description:     Component to create dot leaders
-//
-// Component:       `uk-leader`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Leader
- ========================================================================== */
-
-.uk-leader { overflow: hidden; }
-
-/*
- * 1. Place element in text flow
- * 2. Never break into a new line
- * 3. Get a string back with as many repeating characters to fill the container
- * 4. Prevent wrapping. Overflowing characters will be clipped by the container
- */
-
-.uk-leader-fill::after {
-    /* 3 */
-    content: attr(data-fill);
-
-    /* 1 */
-    display: inline-block;
-    margin-left: var(--leader-fill-margin-left);
-
-    /* 4 */
-    white-space: nowrap;
-
-    /* 2 */
-    width: 0;
-    @if meta.mixin-exists('hook-leader') {
-        @include hook-leader;
-    }
-}
-
-/*
- * Hide if media does not match
- */
-
-.uk-leader-fill.uk-leader-hide::after { display: none; }
-
-/*
- * Pass fill character to JS
- */
-
-.uk-leader-fill-content::before { content: var(--leader-fill-content); }
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-leader-misc') {
-    @include hook-leader-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --leader-fill-content: #{$leader-fill-content};
-    --leader-fill-margin-left: var(--global-small-gutter);
-    --uk-leader-fill-content: var(--leader-fill-content);
-}

package/styles/link.scss

@@ -1,151 +0,0 @@
-// Name:            Link
-// Description:     Styles for links
-//
-// Component:       `uk-link-muted`
-//                  `uk-link-text`
-//                  `uk-link-heading`
-//                  `uk-link-reset`
-//
-// Sub-objects:     `uk-link-toggle`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Link
- ========================================================================== */
-
-
-/* Muted
- ========================================================================== */
-
-// noinspection Stylelint
-a.uk-link-muted,
-.uk-link-muted a {
-    color: var(--link-muted-color);
-    @if meta.mixin-exists('hook-link-muted') {
-        @include hook-link-muted;
-    }
-}
-
-a.uk-link-muted:hover,
-.uk-link-muted a:hover,
-.uk-link-toggle:hover .uk-link-muted,
-.uk-link-toggle:focus .uk-link-muted {
-    color: var(--link-muted-hover-color);
-    @if meta.mixin-exists('hook-link-muted-hover') {
-        @include hook-link-muted-hover;
-    }
-}
-
-
-/* Text
- ========================================================================== */
-
-// noinspection Stylelint
-a.uk-link-text,
-.uk-link-text a {
-    color: inherit;
-    @if meta.mixin-exists('hook-link-text') {
-        @include hook-link-text;
-    }
-}
-
-a.uk-link-text:hover,
-.uk-link-text a:hover,
-.uk-link-toggle:hover .uk-link-text,
-.uk-link-toggle:focus .uk-link-text {
-    color: var(--link-text-hover-color);
-    @if meta.mixin-exists('hook-link-text-hover') {
-        @include hook-link-text-hover;
-    }
-}
-
-
-/* Heading
- ========================================================================== */
-
-// noinspection Stylelint
-a.uk-link-heading,
-.uk-link-heading a {
-    color: inherit;
-    @if meta.mixin-exists('hook-link-heading') {
-        @include hook-link-heading;
-    }
-}
-
-a.uk-link-heading:hover,
-.uk-link-heading a:hover,
-.uk-link-toggle:hover .uk-link-heading,
-.uk-link-toggle:focus .uk-link-heading {
-    color: var(--link-heading-hover-color);
-    text-decoration: var(--link-heading-hover-text-decoration);
-    @if meta.mixin-exists('hook-link-heading-hover') {
-        @include hook-link-heading-hover;
-    }
-}
-
-
-/* Reset
- ========================================================================== */
-
-/*
- * `!important` needed to override inverse component
- */
-
-// noinspection Stylelint
-a.uk-link-reset,
-.uk-link-reset a {
-    color: inherit !important;
-    text-decoration: none !important;
-    @if meta.mixin-exists('hook-link-reset') {
-        @include hook-link-reset;
-    }
-}
-
-
-/* Toggle
- ========================================================================== */
-
-.uk-link-toggle {
-    color: inherit !important;
-    text-decoration: none !important;
-}
-
-.uk-link-toggle:focus {
-    outline: none;
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-link-misc') {
-    @include hook-link-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --link-muted-color: var(--global-muted-color);
-    --link-muted-hover-color: var(--global-color);
-    --link-text-hover-color: var(--global-muted-color);
-    --link-heading-hover-color: var(--global-primary-background);
-    --link-heading-hover-text-decoration: #{$link-heading-hover-text-decoration};
-
-    // Inverse
-    --inverse-link-muted-color: var(--inverse-global-muted-color);
-    --inverse-link-muted-hover-color: var(--inverse-global-color);
-    --inverse-link-text-hover-color: var(--inverse-global-muted-color);
-    --inverse-link-heading-hover-color: var(--inverse-global-primary-background);
-}