@broxus/react-uikit 0.18.0 → 0.19.0

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

@@ -1,60 +0,0 @@
-// Name:            Close
-// Description:     Component to create a close button
-//
-// Component:       `uk-close`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Close
- ========================================================================== */
-
-/*
- * Adopts `uk-icon`
- */
-
-.uk-close {
-    background-color: transparent;
-    color: var(--close-color);
-    @if mixin-exists(hook-close) {
-        @include hook-close;
-    }
-}
-
-/* Hover + Focus */
-.uk-close:hover,
-.uk-close:focus {
-    color: var(--close-hover-color);
-    outline: none;
-    @if mixin-exists(hook-close-hover) {
-        @include hook-close-hover;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if 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/dist/esm/components/Control/Input/Number/index.scss

@@ -1,108 +0,0 @@
-// Name:            Checkbox Control
-// Description:     Component to create Checkbox element
-//
-// Component:       `uk-control-checkbox`
-//
-// ========================================================================
-
-
-/* ========================================================================
-   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-input-wrap {
-    flex: 1;
-    height: 100%;
-    min-width: 1px;
-}
-
-.uk-number-handler-wrap {
-    background-color: transparent;
-    border: 0 none;
-    border-radius: 0;
-    height: 2em;
-    opacity: 1;
-    order: 99;
-}
-
-.uk-number-handler {
-    align-items: center;
-    border: 0;
-    border-radius: 0;
-    display: flex;
-    height: 50%;
-}
-
-.uk-number-handler:active .uk-number-handler-up-inner,
-.uk-number-handler:active .uk-number-handler-down-inner {
-    transform: scale(0.9);
-}
-
-.uk-number-handler .uk-number-handler-up-inner,
-.uk-number-handler .uk-number-handler-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-control-rtl .uk-number-handler-wrap {
-    order: 1;
-}
-
-.uk-control-number.uk-disabled .uk-number-handler-wrap,
-.uk-control-number.uk-readonly .uk-number-handler-wrap {
-    display: none;
-}

package/dist/esm/components/Control/Input/Password/index.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/dist/esm/components/Control/TextArea/index.scss

@@ -1,92 +0,0 @@
-// Name:            Textarea
-// Description:     Component to create Textarea element
-//
-// Component:       `uk-control-textarea`
-//
-// Modifier:        `uk-control-small`
-//                  `uk-control-medium`
-//                  `uk-control-large`
-//                  `uk-control-success`
-//                  `uk-control-warning`
-//                  `uk-control-danger`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Textarea
- ========================================================================== */
-
-.uk-control.uk-control-textarea {
-    height: auto;
-    max-width: 100%;
-    padding: 0;
-    @if mixin-exists(hook-textarea-control) {
-        @include hook-textarea-control;
-    }
-}
-
-.uk-control-textarea-show-count::after {
-    background-color: var(--textarea-counter-background);
-    border-radius: var(--textarea-counter-border-radius);
-    bottom: 5px;
-    color: var(--textarea-counter-color);
-    content: attr(data-count);
-    font-size: var(--textarea-counter-font-size);
-    padding: 0 2px 2px;
-    pointer-events: none;
-    position: absolute;
-    right: 5px;
-    white-space: nowrap;
-    @if mixin-exists(hook-textarea-counter) {
-        @include hook-textarea-counter;
-    }
-}
-
-
-/* Textarea element
- ========================================================================== */
-
-// Reset height for `textarea`s
-.uk-control-textarea .uk-textarea {
-    background-color: transparent;
-    box-sizing: border-box;
-    color: var(--textarea-color);
-    height: auto;
-    line-height: normal;
-    max-width: 100%; // prevent textarea resize from coming out of its container
-    min-height: var(--control-height);
-    padding: var(--textarea-padding-vertical) var(--textarea-padding-horizontal);
-    resize: none;
-    vertical-align: bottom;
-    @if mixin-exists(hook-textarea) {
-        @include hook-textarea;
-    }
-}
-
-/* Hover + Focus states */
-.uk-control-textarea:hover .uk-textarea,
-.uk-control-textarea:focus-within .uk-textarea {
-    background-color: transparent;
-    color: var(--textarea-color);
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --textarea-color: var(--control-color);
-    --textarea-padding-vertical: calc(var(--control-padding-horizontal) / 2);
-    --textarea-padding-horizontal: var(--control-padding-horizontal);
-    --textarea-counter-background: var(--global-default-background);
-    --textarea-counter-border-radius: var(--control-border-radius);
-    --textarea-counter-color: var(--global-muted-color);
-    --textarea-counter-font-size: #{$textarea-counter-font-size};
-}

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

@@ -1,352 +0,0 @@
-// Name:            Control
-// Description:     Component to create form elements
-//
-// Component:       `uk-control`
-//
-// Modifier:        `uk-control-small`
-//                  `uk-control-medium`
-//                  `uk-control-large`
-//                  `uk-control-success`
-//                  `uk-control-warning`
-//                  `uk-control-danger`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Control
- ========================================================================== */
-
-.uk-control {
-    align-items: center;
-    background-color: var(--control-background);
-    border: var(--control-border-width) var(--control-border-style) var(--control-border);
-    border-radius: var(--control-border-radius);
-    box-sizing: border-box;
-    color: var(--control-color);
-    cursor: text;
-    display: flex;
-    font-size: inherit;
-    min-height: var(--control-height);
-    padding-left: var(--control-padding-horizontal);
-    padding-right: var(--control-padding-horizontal);
-    position: relative;
-    transition: all var(--transition-duration);
-    @if mixin-exists(hook-control) {
-        @include hook-control;
-    }
-}
-
-/* Hover state  (unused for disabled state) */
-.uk-control:hover {
-    background-color: var(--control-hover-background);
-    border-color: var(--control-hover-border);
-    color: var(--control-hover-color);
-    @if mixin-exists(hook-control-hover) {
-        @include hook-control-hover;
-    }
-}
-
-/* Focus state  (unused for disabled state) */
-.uk-control:focus,
-.uk-control:focus-within {
-    background-color: var(--control-focus-background);
-    border-color: var(--control-focus-border);
-    color: var(--control-focus-color);
-    outline: none;
-    @if mixin-exists(hook-control-focus) {
-        @include hook-control-focus;
-    }
-}
-
-/* Disabled state */
-.uk-control.uk-disabled {
-    background-color: var(--control-disabled-background);
-    border-color: var(--control-disabled-border);
-    color: var(--control-disabled-color);
-    cursor: not-allowed;
-    @if mixin-exists(hook-control-disabled) {
-        @include hook-control-disabled;
-    }
-}
-
-
-/* Size modifier
- ========================================================================== */
-
-/*
- * Small
- */
-
-.uk-control-small {
-    font-size: var(--control-small-font-size);
-    min-height: var(--control-small-height);
-    padding: 0 var(--control-small-padding-horizontal);
-    @if mixin-exists(hook-control-small) {
-        @include hook-control-small;
-    }
-}
-
-/*
- * Medium
- */
-
-.uk-control-medium {
-    font-size: var(--control-medium-font-size);
-    min-height: var(--control-medium-height);
-    padding: 0 var(--control-medium-padding-horizontal);
-    @if mixin-exists(hook-control-medium) {
-        @include hook-control-medium;
-    }
-}
-
-/*
- * Large
- */
-
-.uk-control-large {
-    font-size: var(--control-large-font-size);
-    min-height: var(--control-large-height);
-    padding: 0 var(--control-large-padding-horizontal);
-    @if mixin-exists(hook-control-large) {
-        @include hook-control-large;
-    }
-}
-
-
-/* Style modifier
- ========================================================================== */
-
-/*
- * Success
- */
-
-.uk-control-success,
-.uk-control-success:hover,
-.uk-control-success:focus-within {
-    border-color: var(--control-success-border);
-    color: var(--control-success-color);
-    @if mixin-exists(hook-control-success) {
-        @include hook-control-success;
-    }
-}
-
-/*
- * Warning
- */
-
-.uk-control-warning,
-.uk-control-warning:hover,
-.uk-control-warning:focus-within {
-    border-color: var(--control-warning-border);
-    color: var(--control-warning-color);
-    @if mixin-exists(hook-control-warning) {
-        @include hook-control-warning;
-    }
-}
-
-/*
- * Danger
- */
-
-.uk-control-danger,
-.uk-control-danger:hover,
-.uk-control-danger:focus-within {
-    border-color: var(--control-danger-border);
-    color: var(--control-danger-color);
-    @if mixin-exists(hook-control-danger) {
-        @include hook-control-danger;
-    }
-}
-
-/*
- * Blank
- */
-
-.uk-control-blank,
-.uk-control-blank:hover,
-.uk-control-blank:focus-within {
-    background-color: transparent;
-    border-color: transparent;
-    border-style: var(--control-blank-border-style);
-    @if mixin-exists(hook-control-blank) {
-        @include hook-control-blank;
-    }
-}
-
-.uk-control-blank:focus-within {
-    border-color: var(--control-blank-focus-border);
-    @if mixin-exists(hook-control-blank-focus) {
-        @include hook-control-blank-focus;
-    }
-}
-
-
-/* Control input, prefix and suffix
- ========================================================================== */
-
-/*
- * Control input
- */
-
-.uk-control-input {
-    max-width: 100%;
-    width: 100%;
-}
-
-.uk-control-input .uk-input,
-.uk-control-input .uk-input:hover,
-.uk-control-input .uk-input:focus,
-.uk-control-input .uk-input:disabled {
-    background: none;
-    color: inherit;
-    font-size: inherit;
-    outline: 0 none;
-    padding: 0;
-}
-
-.uk-control-input .uk-input {
-    height: 100%;
-    @if mixin-exists(hook-control-input) {
-        @include hook-control-input;
-    }
-}
-
-.uk-control-input,
-.uk-control-prefix,
-.uk-control-suffix,
-.uk-control-clear {
-    align-items: center;
-    display: inline-flex;
-}
-
-.uk-control-prefix,
-.uk-control-suffix,
-.uk-control-clear {
-    min-width: fit-content;
-    user-select: none;
-}
-
-.uk-control-prefix {
-    @if mixin-exists(hook-control-prefix) {
-        @include hook-control-prefix;
-    }
-}
-
-.uk-control-suffix {
-    @if mixin-exists(hook-control-suffix) {
-        @include hook-control-suffix;
-    }
-}
-
-.uk-control-clear {
-    cursor: pointer;
-    font-size: 0.8rem;
-    opacity: 0.8;
-    transition: opacity var(--transition-medium-fast-duration);
-}
-
-.uk-control-clear:hover { opacity: 0.6 }
-
-
-/* Right to Left Direction
- ========================================================================== */
-
-body:not([dir]) .uk-control:not(.uk-control-rtl),
-[dir='ltr'] .uk-control:not(.uk-control-rtl) {
-    direction: ltr;
-
-    .uk-control-prefix {
-        margin-right: var(--control-affix-margin);
-    }
-
-    .uk-control-suffix {
-        margin-left: var(--control-affix-margin);
-    }
-}
-
-[dir='rtl'] .uk-control,
-.uk-control.uk-control-rtl {
-    direction: rtl;
-
-    .uk-control-prefix {
-        margin-left: var(--control-affix-margin);
-    }
-
-    .uk-control-suffix {
-        margin-right: var(--control-affix-margin);
-    }
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --control-height: var(--global-control-height);
-    --control-line-height: var(--control-height);
-    --control-padding-horizontal: #{$control-padding-horizontal};
-    --control-padding-vertical: #{$control-padding-vertical};
-    --control-background: #{$control-background};
-    --control-color: var(--global-color);
-    --control-border: var(--global-border);
-    --control-border-style: var(--global-border-style);
-    --control-border-width: var(--global-border-width);
-    --control-border-radius: #{$control-border-radius};
-    --control-hover-background: #{$control-hover-background};
-    --control-hover-color: var(--global-color);
-    --control-hover-border: #{$control-hover-border};
-    --control-focus-background: #{$control-focus-background};
-    --control-focus-color: var(--global-color);
-    --control-focus-border: var(--global-primary-border);
-    --control-disabled-background: #{$control-disabled-background};
-    --control-disabled-color: var(--global-color);
-    --control-disabled-border: var(--control-border);
-    --control-placeholder-color: var(--global-muted-color);
-    --control-small-height: var(--global-control-small-height);
-    --control-small-padding-horizontal: #{$control-small-padding-horizontal};
-    --control-small-padding-vertical: #{$control-small-padding-vertical};
-    --control-small-line-height: var(--control-small-height);
-    --control-small-font-size: var(--global-small-font-size);
-    --control-medium-height: var(--global-control-medium-height);
-    --control-medium-padding-horizontal: #{$control-medium-padding-horizontal};
-    --control-medium-padding-vertical: #{$control-medium-padding-vertical};
-    --control-medium-line-height: var(--control-medium-height);
-    --control-medium-font-size: var(--global-font-size);
-    --control-large-height: var(--global-control-large-height);
-    --control-large-padding-horizontal: #{$control-large-padding-horizontal};
-    --control-large-padding-vertical: #{$control-large-padding-vertical};
-    --control-large-line-height: var(--control-large-height);
-    --control-large-font-size: var(--global-medium-font-size);
-    --control-success-border: var(--global-success-background);
-    --control-success-color: var(--global-success-background);
-    --control-warning-border: var(--global-warning-background);
-    --control-warning-color: var(--global-warning-background);
-    --control-danger-border: var(--global-danger-background);
-    --control-danger-color: var(--global-danger-background);
-    --control-blank-border-style: #{$control-blank-border-style};
-    --control-blank-focus-border: #{$control-blank-focus-border};
-    --control-affix-margin: var(--global-small-margin);
-    --control-icon-color: var(--global-muted-color);
-    --control-icon-hover-color: var(--global-color);
-
-    // Inverse
-    --inverse-control-background: #{$inverse-control-background};
-    --inverse-control-border: var(--inverse-global-border);
-    --inverse-control-color: var(--inverse-global-color);
-    --inverse-control-hover-background: #{$inverse-control-hover-background};
-    --inverse-control-hover-border: #{$inverse-control-hover-border};
-    --inverse-control-hover-color: var(--inverse-global-color);
-    --inverse-control-focus-background: #{$inverse-control-focus-background};
-    --inverse-control-focus-border: var(--inverse-control-hover-border);
-    --inverse-control-focus-color: var(--inverse-global-color);
-    --inverse-control-placeholder-color: var(--inverse-global-muted-color);
-    --inverse-control-icon-color: var(--inverse-global-muted-color);
-    --inverse-control-icon-hover-color: var(--inverse-global-color);
-}

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

@@ -1,60 +0,0 @@
-// Name:            Cover
-// Description:     Utilities to let embedded content cover their container in a centered position
-//
-// Component:       `uk-cover`
-//
-// Sub-object:      `uk-cover-container`
-//
-// ========================================================================
-
-
-/* ========================================================================
-   Component: Cover
- ========================================================================== */
-
-/*
- * Works with iframes and embedded content
- * 1. Reset responsiveness for embedded content
- * 2. Center object
- * Note: Percent values on the `top` property only works if this element
- *       is absolute positioned or if the container has a height
- */
-
-.uk-cover {
-    left: 50%;
-
-    /* 1 */
-    max-width: none;
-
-    /* 2 */
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-
-iframe.uk-cover { pointer-events: none; }
-
-
-/* Container
- ========================================================================== */
-
-/*
- * 1. Parent container which clips resized object
- * 2. Needed if the child is positioned absolute. See note above
- */
-
-.uk-cover-container {
-    /* 1 */
-    overflow: hidden;
-
-    /* 2 */
-    position: relative;
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-cover-misc) {
-    @include hook-cover-misc;
-}