@broxus/react-uikit 0.17.4 → 0.19.0

package/dist/cjs/components/Container/index.scss

@@ -1,234 +0,0 @@
-// Name:            Container
-// Description:     Component to align and center your site and grid content
-//
-// Component:       `uk-container`
-//
-// Modifier:        `uk-container-xsmall`
-//                  `uk-container-small`
-//                  `uk-container-large`
-//                  `uk-container-xlarge`
-//                  `uk-container-expand`
-//                  `uk-container-expand-left`
-//                  `uk-container-expand-right`
-//                  `uk-container-item-padding-remove-left`
-//                  `uk-container-item-padding-remove-right`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Container
- ========================================================================== */
-
-/*
- * 1. Box sizing has to be `content-box` so the max-width is always the same and
- *    unaffected by the padding on different breakpoints. It's important for the size modifiers.
- */
-
-.uk-container {
-    /* 1 */
-    box-sizing: content-box;
-    display: flow-root;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: var(--container-max-width);
-    padding-left: var(--container-padding-horizontal);
-    padding-right: var(--container-padding-horizontal);
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-    .uk-container {
-        padding-left: var(--container-padding-horizontal-s);
-        padding-right: var(--container-padding-horizontal-s);
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-container {
-        padding-left: var(--container-padding-horizontal-m);
-        padding-right: var(--container-padding-horizontal-m);
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-container > :last-child {
-    margin-bottom: 0;
-}
-
-/*
- * Remove padding from nested containers
- */
-
-.uk-container .uk-container:not(.uk-preserve) {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-
-/* Size modifier
- ========================================================================== */
-
-.uk-container-xsmall {
-    max-width: var(--container-xsmall-max-width);
-}
-
-.uk-container-small {
-    max-width: var(--container-small-max-width);
-}
-
-.uk-container-large {
-    max-width: var(--container-large-max-width);
-}
-
-.uk-container-xlarge {
-    max-width: var(--container-xlarge-max-width);
-}
-
-.uk-container-expand {
-    max-width: none;
-}
-
-
-/* Expand modifier
- ========================================================================== */
-
-/*
- * Expand one side only
- */
-
-.uk-container-expand-left {
-    margin-left: 0;
-}
-
-.uk-container-expand-right {
-    margin-right: 0;
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-    .uk-container-expand-left.uk-container-xsmall,
-    .uk-container-expand-right.uk-container-xsmall {
-        max-width: calc(50% + (var(--container-xsmall-max-width) / 2) - var(--container-padding-horizontal-s));
-    }
-
-    .uk-container-expand-left.uk-container-small,
-    .uk-container-expand-right.uk-container-small {
-        max-width: calc(50% + (var(--container-small-max-width) / 2) - var(--container-padding-horizontal-s));
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-container-expand-left,
-    .uk-container-expand-right {
-        max-width: calc(50% + (var(--container-max-width) / 2) - var(--container-padding-horizontal-m));
-    }
-
-    .uk-container-expand-left.uk-container-xsmall,
-    .uk-container-expand-right.uk-container-xsmall {
-        max-width: calc(50% + (var(--container-xsmall-max-width) / 2) - var(--container-padding-horizontal-m));
-    }
-
-    .uk-container-expand-left.uk-container-small,
-    .uk-container-expand-right.uk-container-small {
-        max-width: calc(50% + (var(--container-small-max-width) / 2) - var(--container-padding-horizontal-m));
-    }
-
-    .uk-container-expand-left.uk-container-large,
-    .uk-container-expand-right.uk-container-large {
-        max-width: calc(50% + (var(--container-large-max-width) / 2) - var(--container-padding-horizontal-m));
-    }
-
-    .uk-container-expand-left.uk-container-xlarge,
-    .uk-container-expand-right.uk-container-xlarge {
-        max-width: calc(50% + (var(--container-xlarge-max-width) / 2) - var(--container-padding-horizontal-m));
-    }
-}
-
-
-/* Item
- ========================================================================== */
-
-/*
- * Utility classes to reset container padding on the left or right side
- * Note: It has to be negative margin on the item, because it's specific to the item.
- */
-
-.uk-container-item-padding-remove-left,
-.uk-container-item-padding-remove-right {
-    width: calc(100% + var(--container-padding-horizontal));
-}
-
-.uk-container-item-padding-remove-left {
-    margin-left: calc(var(--container-padding-horizontal) * -1);
-}
-
-.uk-container-item-padding-remove-right {
-    margin-right: calc(var(--container-padding-horizontal) * -1);
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-    .uk-container-item-padding-remove-left,
-    .uk-container-item-padding-remove-right {
-        width: calc(100% + var(--container-padding-horizontal-s));
-    }
-
-    .uk-container-item-padding-remove-left {
-        margin-left: calc(var(--container-padding-horizontal-s) * -1);
-    }
-
-    .uk-container-item-padding-remove-right {
-        margin-right: calc(var(--container-padding-horizontal-s) * -1);
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-container-item-padding-remove-left,
-    .uk-container-item-padding-remove-right {
-        width: calc(100% + var(--container-padding-horizontal-m));
-    }
-
-    .uk-container-item-padding-remove-left {
-        margin-left: calc(var(--container-padding-horizontal-m) * -1);
-    }
-
-    .uk-container-item-padding-remove-right {
-        margin-right: calc(var(--container-padding-horizontal-m) * -1);
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-container-misc) {
-    @include hook-container-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --container-max-width: #{$container-max-width};
-    --container-xsmall-max-width: #{$container-xsmall-max-width};
-    --container-small-max-width: #{$container-small-max-width};
-    --container-large-max-width: #{$container-large-max-width};
-    --container-xlarge-max-width: #{$container-xlarge-max-width};
-    --container-padding-horizontal: #{$container-padding-horizontal};
-    --container-padding-horizontal-s: var(--global-gutter);
-    --container-padding-horizontal-m: var(--global-medium-gutter);
-}

package/dist/cjs/components/Control/Checkbox/index.scss

@@ -1,324 +0,0 @@
-// Name:            Checkbox Control
-// Description:     Component to create Checkbox element
-//
-// Component:       `uk-control-checkbox`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Checkbox
- ========================================================================== */
-
-.uk-checkbox-wrapper {
-    cursor: pointer;
-    display: flex;
-    line-height: unset;
-    user-select: none;
-
-    &.uk-control {
-        background-color: var(--checkbox-control-background);
-    }
-
-    @if mixin-exists(hook-checkbox-wrapper) {
-        @include hook-checkbox-wrapper;
-    }
-}
-
-.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 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 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 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 mixin-exists(hook-checkbox-label) {
-        @include hook-checkbox-label;
-    }
-}
-
-
-/* States
- ========================================================================== */
-
-// Hover state
-.uk-checkbox-wrapper:not(.uk-checked):hover {
-    @if 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 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 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 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 mixin-exists(hook-checkbox-group) {
-        @include hook-checkbox-group;
-    }
-}
-
-.uk-checkbox-group-stack {
-    flex-direction: column;
-    @if 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 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(--global-primary-border);
-    --checkbox-focus-background: var(--control-focus-background);
-    --checkbox-focus-border: var(--global-primary-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};
-}