@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/control.scss

@@ -1,357 +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`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   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 meta.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 meta.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 meta.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 meta.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 meta.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 meta.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 meta.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 meta.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 meta.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 meta.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 meta.mixin-exists('hook-control-blank') {
-        @include hook-control-blank;
-    }
-}
-
-.uk-control-blank:focus-within {
-    border-color: var(--control-blank-focus-border);
-    @if meta.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 meta.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 meta.mixin-exists('hook-control-prefix') {
-        @include hook-control-prefix;
-    }
-}
-
-.uk-control-suffix {
-    @if meta.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-border: var(--control-border);
-    --control-disabled-color: var(--global-color);
-    --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-border);
-    --control-success-color: var(--global-success-color);
-    --control-warning-border: var(--global-warning-border);
-    --control-warning-color: var(--global-warning-color);
-    --control-danger-border: var(--global-danger-border);
-    --control-danger-color: var(--global-danger-color);
-    --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-disabled-background: #{$inverse-control-disabled-background};
-    --inverse-control-disabled-border: #{$inverse-control-disabled-border};
-    --inverse-control-disabled-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/styles/cover.scss

@@ -1,81 +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`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-/* ========================================================================
-   Component: Cover
- ========================================================================== */
-
-/*
- * Works with iframes and embedded content
- * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
- * 2. Reset responsiveness for embedded content
- * 3. Center object
- * Note: Percent values on the `top` property only works if this element
- *       is absolute positioned or if the container has a height
- */
-
-/* 1 */
-[uk-cover]:where(canvas, iframe, svg),
-[data-uk-cover]:where(canvas, iframe, svg) {
-    --uk-position-translate-x: -50%;
-    --uk-position-translate-y: -50%;
-    left: 50%;
-
-    /* 1 */
-    max-width: none;
-
-    /* 2 */
-    position: absolute;
-    top: 50%;
-    transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
-}
-
-iframe[uk-cover],
-iframe[data-uk-cover] { pointer-events: none; }
-
-[uk-cover]:where(img, video),
-[data-uk-cover]:where(img, video) {
-    box-sizing: border-box;
-    height: 100%;
-    left: 0;
-    object-fit: cover;
-    object-position: center;
-
-    /* 3 */
-    position: absolute;
-    top: 0;
-    width: 100%;
-}
-
-
-/* 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 meta.mixin-exists('hook-cover-misc') {
-    @include hook-cover-misc;
-}