@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/checkbox.scss

@@ -1,325 +0,0 @@
-// Name:            Checkbox Control
-// Description:     Component to create Checkbox element
-//
-// Component:       `uk-control-checkbox`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Checkbox
- ========================================================================== */
-
-.uk-checkbox-wrapper {
-    cursor: pointer;
-    display: flex;
-    line-height: unset;
-    user-select: none;
-    @if meta.mixin-exists('hook-checkbox-wrapper') {
-        @include hook-checkbox-wrapper;
-    }
-
-    &.uk-control {
-        background-color: var(--checkbox-control-background);
-    }
-}
-
-.uk-checkbox-wrapper .uk-checkbox {
-    border: 0;
-    display: inline-block;
-    height: var(--checkbox-size);
-    line-height: 1;
-    margin: 0;
-    min-width: var(--checkbox-size);
-    overflow: visible;
-    position: relative;
-    top: 0;
-    vertical-align: sub;
-    white-space: nowrap;
-    @if meta.mixin-exists('hook-checkbox-checkbox') {
-        @include hook-checkbox-checkbox;
-    }
-}
-
-.uk-checkbox-wrapper .uk-checkbox-input {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    cursor: pointer;
-    height: 100%;
-    inset: 0;
-    margin: 0;
-    opacity: 0;
-    outline: none;
-    position: absolute;
-    width: 100%;
-    z-index: 1;
-    @if meta.mixin-exists('hook-checkbox-input') {
-        @include hook-checkbox-input;
-    }
-}
-
-.uk-checkbox-wrapper .uk-checkbox-inner {
-    background-color: var(--checkbox-background);
-    border: var(--checkbox-border-width) solid var(--checkbox-border);
-    border-collapse: separate;
-    border-radius: var(--checkbox-border-radius);
-    box-sizing: border-box;
-    direction: ltr;
-    display: block;
-    height: var(--checkbox-size);
-    left: 0;
-    position: relative;
-    top: 0;
-    transition: all var(--transition-duration);
-    width: var(--checkbox-size);
-    @if meta.mixin-exists('hook-checkbox-inner') {
-        @include hook-checkbox-inner;
-    }
-}
-
-.uk-checkbox-wrapper .uk-checkbox-inner::after {
-    border: var(--checkbox-checked-icon-border-width) solid var(--checkbox-checked-icon-color);
-    border-left: 0;
-    border-top: 0;
-    box-sizing: border-box;
-    content: ' ';
-    display: block;
-    height: calc(var(--checkbox-size) / 2);
-    left: 28.5%;
-    opacity: 0;
-    position: absolute;
-    top: 50%;
-    transform: rotate(45deg) scale(0) translate(-50%, -50%);
-    transition: all var(--transition-fast-duration) var(--ease-in-back),
-        opacity var(--transition-fast-duration);
-    width: calc(var(--checkbox-size) / 4);
-}
-
-.uk-checkbox-wrapper .uk-checkbox-label {
-    line-height: var(--checkbox-size);
-    max-width: 100%;
-    overflow: hidden;
-    padding-left: var(--control-affix-margin);
-    text-overflow: ellipsis;
-    @if meta.mixin-exists('hook-checkbox-label') {
-        @include hook-checkbox-label;
-    }
-}
-
-
-/* States
- ========================================================================== */
-
-// Hover state
-.uk-checkbox-wrapper:not(.uk-checked):hover {
-    @if meta.mixin-exists('hook-checkbox-hover') {
-        @include hook-checkbox-hover;
-    }
-}
-
-.uk-checkbox-wrapper:not(.uk-checked):hover .uk-checkbox-inner,
-.uk-checkbox:not(.uk-checkbox-checked):hover .uk-checkbox-inner {
-    border-color: var(--checkbox-hover-border);
-}
-
-.uk-checkbox-wrapper:not(.uk-disabled):hover .uk-checkbox::after,
-.uk-checkbox:not(.uk-checkbox-disabled):hover::after {
-    visibility: visible;
-}
-
-
-// Checked state
-.uk-checkbox-checked {
-    @if meta.mixin-exists('hook-checkbox-checked') {
-        @include hook-checkbox-checked;
-    }
-}
-
-.uk-checkbox-checked::after {
-    animation: uk-wave-effect 0.36s var(--ease-in-out);
-    animation-fill-mode: backwards;
-    border: var(--checkbox-border-width) solid var(--checkbox-checked-border);
-    border-radius: var(--checkbox-border-radius);
-    box-sizing: border-box;
-    content: '';
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    visibility: hidden;
-    width: 100%;
-}
-
-.uk-checkbox-checked .uk-checkbox-inner {
-    background-color: var(--checkbox-checked-background);
-    border-color: var(--checkbox-checked-border);
-}
-
-.uk-checkbox-checked .uk-checkbox-inner::after {
-    border-color: var(--checkbox-checked-icon-color);
-    opacity: 1;
-    transform: rotate(45deg) scale(1) translate(-50%, -50%);
-    transition: all
-        var(--transition-medium-fast-duration)
-        var(--ease-out-back)
-        var(--transition-fast-duration);
-}
-
-// Disabled state
-.uk-checkbox-disabled {
-    cursor: not-allowed;
-    @if meta.mixin-exists('hook-checkbox-disabled') {
-        @include hook-checkbox-disabled;
-    }
-}
-
-.uk-checkbox-disabled .uk-checkbox-label {
-    color: var(--control-placeholder-color);
-}
-
-.uk-checkbox-disabled .uk-checkbox-input {
-    cursor: not-allowed;
-}
-
-.uk-checkbox-disabled .uk-checkbox-inner {
-    background-color: transparent;
-    border-color: var(--checkbox-disabled-border);
-    cursor: not-allowed;
-}
-
-.uk-checkbox-disabled.uk-checkbox-checked .uk-checkbox-inner::after {
-    animation-name: none;
-    border-color: var(--checkbox-disabled-icon-color);
-}
-
-
-/* Intermediate
- ========================================================================== */
-
-.uk-checkbox-indeterminate {
-    @if meta.mixin-exists('hook-checkbox-indeterminate') {
-        @include hook-checkbox-indeterminate;
-    }
-}
-
-.uk-checkbox-indeterminate .uk-checkbox-inner {
-    background-color: transparent;
-}
-
-.uk-checkbox-indeterminate.uk-checkbox-checked .uk-checkbox-inner {
-    border-color: var(--checkbox-border);
-}
-
-.uk-checkbox-indeterminate .uk-checkbox-inner::after {
-    background-color: var(--checkbox-checked-background);
-    border: 0;
-    content: ' ';
-    height: var(--checkbox-indeterminate-size);
-    left: 50%;
-    opacity: 1;
-    top: 50%;
-    transform: translate(-50%, -50%) scale(1);
-    width: var(--checkbox-indeterminate-size);
-}
-
-.uk-checkbox-indeterminate.uk-checkbox-disabled .uk-checkbox-inner::after {
-    background-color: var(--checkbox-disabled-background);
-}
-
-
-/* Group
- ========================================================================== */
-
-.uk-checkbox-group {
-    display: flex;
-    flex-direction: row;
-    gap: var(--control-affix-margin);
-    @if meta.mixin-exists('hook-checkbox-group') {
-        @include hook-checkbox-group;
-    }
-}
-
-.uk-checkbox-group-stack {
-    flex-direction: column;
-    @if meta.mixin-exists('hook-checkbox-group-stack') {
-        @include hook-checkbox-group-stack;
-    }
-}
-
-
-/* Control
- ========================================================================== */
-
-.uk-control-checkbox {
-    cursor: pointer;
-    padding-bottom: var(--control-medium-padding-vertical);
-    padding-top: var(--control-medium-padding-vertical);
-    @if meta.mixin-exists('hook-checkbox-control') {
-        @include hook-checkbox-control;
-    }
-}
-
-.uk-control-checkbox.uk-checked {
-    background-color: var(--checkbox-checked-control-background);
-    border-color: var(--checkbox-checked-border);
-    color: var(--checkbox-checked-control-color);
-}
-
-.uk-control-checkbox.uk-checked:hover {
-    border-color: var(--checkbox-checked-border);
-}
-
-.uk-control-checkbox.uk-disabled {
-    background-color: var(--checkbox-disabled-background);
-    border-color: var(--checkbox-disabled-border);
-    cursor: not-allowed;
-}
-
-
-/* Right to Left Direction
- ========================================================================== */
-
-.uk-checkbox-rtl {
-    flex-direction: row-reverse;
-}
-
-.uk-checkbox-rtl .uk-checkbox-label {
-    padding-left: 0;
-    padding-right: var(--control-affix-margin);
-}
-
-
-// Vars
-// ========================================================================
-
-:root, ::after, ::before {
-    --checkbox-background: var(--control-background);
-    --checkbox-border: var(--control-border);
-    --checkbox-border-width: var(--control-border-width);
-    --checkbox-border-radius: var(--control-border-radius);
-    --checkbox-hover-border: var(--control-hover-border);
-    --checkbox-focus-background: var(--control-focus-background);
-    --checkbox-focus-border: var(--control-focus-border);
-    --checkbox-disabled-background: var(--control-disabled-background);
-    --checkbox-disabled-border: var(--control-disabled-border);
-    --checkbox-disabled-icon-color: var(--global-muted-color);
-    --checkbox-indeterminate-size: #{$checkbox-indeterminate-size};
-    --checkbox-size: #{$checkbox-size};
-    --checkbox-checked-background: var(--global-primary-background);
-    --checkbox-checked-border: var(--global-primary-border);
-    --checkbox-checked-icon-border-width: #{$checkbox-checked-icon-border-width};
-    --checkbox-checked-icon-color: var(--global-inverse-color);
-    --checkbox-control-background: #{$checkbox-control-background};
-    --checkbox-checked-control-background: #{$checkbox-checked-control-background};
-    --checkbox-checked-control-color: #{$checkbox-checked-control-color};
-    --checkbox-checked-control-padding: #{$checkbox-checked-control-padding};
-}

package/styles/close.scss

@@ -1,62 +0,0 @@
-// Name:            Close
-// Description:     Component to create a close button
-//
-// Component:       `uk-close`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Close
- ========================================================================== */
-
-/*
- * Adopts `uk-icon`
- */
-
-.uk-close {
-    background-color: transparent;
-    color: var(--close-color);
-    @if meta.mixin-exists('hook-close') {
-        @include hook-close;
-    }
-}
-
-/* Hover + Focus */
-.uk-close:hover,
-.uk-close:focus {
-    color: var(--close-hover-color);
-    outline: none;
-    @if meta.mixin-exists('hook-close-hover') {
-        @include hook-close-hover;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-close-misc') {
-    @include hook-close-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --close-color: var(--global-muted-color);
-    --close-hover-color: var(--global-color);
-
-    // Inverse
-    --inverse-close-color: var(--inverse-global-muted-color);
-    --inverse-close-hover-color: var(--inverse-global-color);
-}

package/styles/column.scss

@@ -1,152 +0,0 @@
-// Name:            Column
-// Description:     Utilities for text columns
-//
-// Component:       `uk-column-*`
-//
-// Sub-objects:     `uk-column-span`
-//
-// Modifiers:       `uk-column-divider`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Column
- ========================================================================== */
-
-[class*='uk-column-'] { column-gap: var(--column-gutter); }
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    [class*='uk-column-'] { column-gap: var(--column-gutter-l); }
-}
-
-/*
- * Fix image 1px line wrapping into the next column in Chrome
- */
-
-[class*='uk-column-'] img { transform: translate3d(0, 0, 0); }
-
-
-/* Divider
- ========================================================================== */
-
-/*
- * 1. Double the column gap
- */
-
-.uk-column-divider {
-    /* 1 */
-    column-gap: calc(var(--column-gutter) * 2);
-    column-rule: var(--column-divider-rule-width) solid var(--column-divider-rule-color);
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    .uk-column-divider { column-gap: calc(var(--column-gutter-l) * 2); }
-}
-
-
-/* Width modifiers
- ========================================================================== */
-
-.uk-column-1-2 { column-count: 2; }
-
-.uk-column-1-3 { column-count: 3; }
-
-.uk-column-1-4 { column-count: 4; }
-
-.uk-column-1-5 { column-count: 5; }
-
-.uk-column-1-6 { column-count: 6; }
-
-/* Phone landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-small) {
-    .uk-column-1-2\@s { column-count: 2; }
-
-    .uk-column-1-3\@s { column-count: 3; }
-
-    .uk-column-1-4\@s { column-count: 4; }
-
-    .uk-column-1-5\@s { column-count: 5; }
-
-    .uk-column-1-6\@s { column-count: 6; }
-}
-
-/* Tablet landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-medium) {
-    .uk-column-1-2\@m { column-count: 2; }
-
-    .uk-column-1-3\@m { column-count: 3; }
-
-    .uk-column-1-4\@m { column-count: 4; }
-
-    .uk-column-1-5\@m { column-count: 5; }
-
-    .uk-column-1-6\@m { column-count: 6; }
-}
-
-/* Desktop and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-large) {
-    .uk-column-1-2\@l { column-count: 2; }
-
-    .uk-column-1-3\@l { column-count: 3; }
-
-    .uk-column-1-4\@l { column-count: 4; }
-
-    .uk-column-1-5\@l { column-count: 5; }
-
-    .uk-column-1-6\@l { column-count: 6; }
-}
-
-/* Large screen and bigger */
-@media (min-width: $breakpoint-xlarge) {
-    .uk-column-1-2\@xl { column-count: 2; }
-
-    .uk-column-1-3\@xl { column-count: 3; }
-
-    .uk-column-1-4\@xl { column-count: 4; }
-
-    .uk-column-1-5\@xl { column-count: 5; }
-
-    .uk-column-1-6\@xl { column-count: 6; }
-}
-
-/* Make element span across all columns
- * Does not work in Firefox yet
- ========================================================================== */
-
-.uk-column-span { column-span: all; }
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-column-misc') {
-    @include hook-column-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --column-gutter: var(--global-gutter);
-    --column-gutter-l: var(--global-medium-gutter);
-    --column-divider-rule-color: var(--global-border);
-    --column-divider-rule-width: #{$column-divider-rule-width};
-
-    // Inverse
-    --inverse-column-divider-rule-color: var(--inverse-global-border);
-}