@broxus/react-uikit 0.18.0 → 0.19.0

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

@@ -1,265 +0,0 @@
-// Name:            Icon
-// Description:     Component to create icons
-//
-// Component:       `uk-icon`
-//
-// Modifiers:       `uk-icon-image`
-//                  `uk-icon-link`
-//                  `uk-icon-button`
-//
-// States:          `uk-preserve`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Icon
- ========================================================================== */
-
-/*
- * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
- * 1. Remove margins in Chrome, Safari and Opera.
- * 2. Remove borders for `button`.
- * 3. Remove border-radius in Chrome.
- * 4. Address `overflow` set to `hidden` in IE.
- * 5. Correct `font` properties and `color` not being inherited for `button`.
- * 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 7. Remove default `button` padding and background color
- * 8. Style
- * 9. Fill all SVG elements with the current text color if no `fill` attribute is set
- * 10. Let the container fit the height of the icon
- */
-
-.uk-icon {
-    background-color: transparent; /* 7 */
-    border: none; /* 2 */
-    border-radius: 0; /* 3 */
-    color: inherit;
-    display: inline-block; /* 8 */
-    fill: currentColor; /* 9 */
-    font: inherit; /* 5 */
-    line-height: 0; /* 10 */
-    margin: 0; /* 1 */
-    overflow: visible; /* 4 */
-    padding: 0; /* 7 */
-    text-transform: none; /* 6 */
-}
-
-/* Required for `button`. */
-button.uk-icon:not(:disabled) {
-    cursor: pointer;
-}
-
-/*
- * Remove the inner border and padding in Firefox.
- */
-
-.uk-icon::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-
-/*
- * Set the fill and stroke color of all SVG elements to the current text color
- */
-
-.uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve) {
-    fill: currentColor;
-}
-
-.uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) {
-    stroke: currentColor;
-}
-
-/*
- * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
- */
-
-.uk-icon > * {
-    transform: translate(0, 0);
-}
-
-
-/* Image modifier
- ========================================================================== */
-
-/*
- * Display images in icon dimensions
- */
-
-.uk-icon-image {
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: contain;
-    height: var(--icon-image-size);
-    vertical-align: middle;
-    width: var(--icon-image-size);
-}
-
-
-/* Material UI icons modifier
- ========================================================================== */
-
-.uk-icon-material {
-    &:not(.uk-icon-button) {
-        height: var(--icon-size, 20px);
-        min-width: var(--icon-size, 20px);
-        width: var(--icon-size, 20px);
-    }
-
-    i {
-        direction: ltr;
-        display: inline-block;
-
-        // noinspection Stylelint,CssNoGenericFontName
-        font-family: 'Material Icons Outlined';
-
-        /* Support for IE. */
-        font-feature-settings: 'liga';
-        font-size: var(--icon-size, 20px);
-
-        /* Support for all WebKit browsers. */
-        -webkit-font-smoothing: antialiased;
-
-        /* Support for Firefox. */
-        -moz-osx-font-smoothing: grayscale;
-        font-style: normal;
-        font-weight: normal;
-        letter-spacing: normal;
-        line-height: 1;
-        text-decoration: none;
-
-        /* Support for Safari and Chrome. */
-        text-rendering: optimizeLegibility;
-        text-transform: none;
-        vertical-align: middle;
-        white-space: nowrap;
-        word-wrap: normal;
-
-        &.uk-icon-round {
-            // noinspection Stylelint,CssNoGenericFontName
-            font-family: 'Material Icons Round';
-        }
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Link
- */
-
-.uk-icon-link {
-    color: var(--icon-link-color);
-    @if mixin-exists(hook-icon-link) {
-        @include hook-icon-link;
-    }
-}
-
-.uk-icon-link:hover,
-.uk-icon-link:focus {
-    color: var(--icon-link-hover-color);
-    outline: none;
-    text-decoration: none;
-    @if mixin-exists(hook-icon-link-hover) {
-        @include hook-icon-link-hover;
-    }
-}
-
-/* OnClick + Active */
-.uk-icon-link:active,
-.uk-active > .uk-icon-link {
-    color: var(--icon-link-active-color);
-    @if mixin-exists(hook-icon-link-active) {
-        @include hook-icon-link-active;
-    }
-}
-
-/*
- * Button
- * 1. Center icon vertically and horizontally
- */
-
-.uk-icon-button {
-    align-items: center; /* 1 */
-    background: var(--icon-button-background);
-    border-radius: var(--icon-button-border-radius);
-    box-sizing: border-box;
-    color: var(--icon-button-color);
-    display: inline-flex; /* 1 */
-    height: var(--icon-button-size);
-    justify-content: center; /* 1 */
-    vertical-align: middle;
-    width: var(--icon-button-size);
-    @if mixin-exists(hook-icon-button) {
-        @include hook-icon-button;
-    }
-}
-
-/* Hover + Focus */
-.uk-icon-button:hover,
-.uk-icon-button:focus {
-    background-color: var(--icon-button-hover-background);
-    color: var(--icon-button-hover-color);
-    outline: none;
-    text-decoration: none;
-    @if mixin-exists(hook-icon-button-hover) {
-        @include hook-icon-button-hover;
-    }
-}
-
-/* OnClick + Active */
-.uk-icon-button:active,
-.uk-active > .uk-icon-button {
-    background-color: var(--icon-button-active-background);
-    color: var(--icon-button-active-color);
-    @if mixin-exists(hook-icon-button-active) {
-        @include hook-icon-button-active;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-icon-misc) {
-    @include hook-icon-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --icon-image-size: #{$icon-image-size};
-    --icon-link-color: var(--global-muted-color);
-    --icon-link-hover-color: var(--global-color);
-    --icon-link-active-color: #{$icon-link-active-color};
-    --icon-button-size: #{$icon-button-size};
-    --icon-button-border-radius: #{$icon-button-border-radius};
-    --icon-button-background: var(--global-muted-background);
-    --icon-button-color: var(--global-muted-color);
-    --icon-button-hover-background: #{$icon-button-hover-background};
-    --icon-button-hover-color: var(--global-color);
-    --icon-button-active-background: #{$icon-button-active-background};
-    --icon-button-active-color: var(--global-color);
-
-    // Inverse
-    --inverse-icon-link-color: var(--inverse-global-muted-color);
-    --inverse-icon-link-hover-color: var(--inverse-global-color);
-    --inverse-icon-link-active-color: var(--inverse-global-color);
-    --inverse-icon-button-background: var(--inverse-global-muted-background);
-    --inverse-icon-button-color: var(--inverse-global-muted-color);
-    --inverse-icon-button-hover-background: #{$inverse-icon-button-hover-background};
-    --inverse-icon-button-hover-color: var(--inverse-global-color);
-    --inverse-icon-button-active-background: #{$inverse-icon-button-active-background};
-    --inverse-icon-button-active-color: var(--inverse-global-color);
-}

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

@@ -1,123 +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`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   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 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 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 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 mixin-exists(hook-label-danger) {
-        @include hook-label-danger;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-label-misc) {
-    @include hook-label-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --label-padding-vertical: #{$label-padding-vertical};
-    --label-padding-horizontal: var(--global-small-margin);
-    --label-background: var(--global-primary-background);
-    --label-border-radius: #{$label-border-radius};
-    --label-line-height: var(--global-line-height);
-    --label-font-size: var(--global-small-font-size);
-    --label-large-padding-vertical: var(--global-xsmall-margin);
-    --label-large-padding-horizontal: var(--global-margin);
-    --label-large-line-height: var(--global-line-height);
-    --label-large-font-size: var(--global-small-font-size);
-    --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/dist/cjs/components/List/index.scss

@@ -1,278 +0,0 @@
-// Name:            List
-// Description:     Styles for lists
-//
-// Component:       `uk-list`
-//
-// Modifiers:       `uk-list-disc`
-//                  `uk-list-circle`
-//                  `uk-list-square`
-//                  `uk-list-decimal`
-//                  `uk-list-hyphen`
-//                  `uk-list-muted`
-//                  `uk-list-emphasis`
-//                  `uk-list-primary`
-//                  `uk-list-secondary`
-//                  `uk-list-bullet`
-//                  `uk-list-divider`
-//                  `uk-list-striped`
-//                  `uk-list-large`
-//                  `uk-list-collapse`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: List
- ========================================================================== */
-
-.uk-list {
-    list-style: none;
-    padding: 0;
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-list > * > :last-child {
-    margin-bottom: 0;
-}
-
-/*
- * Style
- */
-
-.uk-list > :nth-child(n+2),
-.uk-list > * > ul {
-    margin-top: var(--list-margin-top);
-}
-
-
-/* Marker modifiers
- * Moving `::marker` inside `::before` to style it differently
- * To style the `::marker` is currently only supported in Firefox and Safari
- ========================================================================== */
-
-.uk-list-disc > *,
-.uk-list-circle > *,
-.uk-list-square > *,
-.uk-list-decimal > *,
-.uk-list-hyphen > * {
-    padding-left: var(--list-padding-left);
-}
-
-/*
- * Type modifiers
- */
-
-.uk-list-decimal {
-    counter-reset: decimal;
-}
-
-.uk-list-decimal > * {
-    counter-increment: decimal;
-}
-
-[class*='uk-list'] > ::before {
-    content: '';
-    display: list-item;
-    height: var(--list-marker-height);
-    left: calc(var(--list-padding-left) * -1);
-    list-style-position: inside;
-    margin-bottom: calc(var(--list-marker-height) * -1);
-    position: relative;
-    text-align: right;
-    width: var(--list-padding-left);
-}
-
-.uk-list-disc > ::before {
-    list-style-type: disc;
-}
-
-.uk-list-circle > ::before {
-    list-style-type: circle;
-}
-
-.uk-list-square > ::before {
-    list-style-type: square;
-}
-
-.uk-list-decimal > ::before {
-    content: counter(decimal, decimal) '\200A.\00A0';
-}
-
-.uk-list-hyphen > ::before {
-    content: '–\00A0\00A0';
-}
-
-/*
- * Color modifiers
- */
-
-.uk-list-muted > ::before {
-    color: var(--list-muted-color) !important;
-}
-
-.uk-list-emphasis > ::before {
-    color: var(--list-emphasis-color) !important;
-}
-
-.uk-list-primary > ::before {
-    color: var(--list-primary-color) !important;
-}
-
-.uk-list-secondary > ::before {
-    color: var(--list-secondary-color) !important;
-}
-
-
-/* Image bullet modifier
- ========================================================================== */
-
-.uk-list-bullet > * {
-    padding-left: var(--list-padding-left);
-}
-
-.uk-list-bullet > ::before {
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    content: '';
-    height: var(--list-marker-height);
-    left: calc(var(--list-padding-left) * -1);
-    margin-bottom: calc(var(--list-marker-height) * -1);
-    position: relative;
-    width: var(--list-padding-left);
-    @if mixin-exists(svg-fill) {
-        @include svg-fill($list-bullet-icon-image-path, '#000', $list-bullet-icon-color);
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Divider
- */
-
-.uk-list-divider > :nth-child(n+2) {
-    border-top: var(--list-divider-border-width) solid var(--list-divider-border);
-    margin-top: var(--list-divider-margin-top);
-    padding-top: var(--list-divider-margin-top);
-    @if mixin-exists(hook-list-divider) {
-        @include hook-list-divider;
-    }
-}
-
-/*
- * Striped
- */
-
-.uk-list-striped > * {
-    padding: var(--list-striped-padding-vertical) var(--list-striped-padding-horizontal);
-    @if mixin-exists(hook-list-striped) {
-        @include hook-list-striped;
-    }
-}
-
-.uk-list-striped > :nth-of-type(odd) {
-    background: var(--list-striped-background);
-}
-
-.uk-list-striped > :nth-child(n+2) {
-    margin-top: 0;
-}
-
-
-/* Size modifier
- ========================================================================== */
-
-.uk-list-large > :nth-child(n+2),
-.uk-list-large > * > ul {
-    margin-top: var(--list-large-margin-top);
-}
-
-.uk-list-collapse > :nth-child(n+2),
-.uk-list-collapse > * > ul {
-    margin-top: 0;
-}
-
-/*
- * Divider
- */
-
-.uk-list-large.uk-list-divider > :nth-child(n+2) {
-    margin-top: var(--list-large-divider-margin-top);
-    padding-top: var(--list-large-divider-margin-top);
-}
-
-.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
-    margin-top: 0;
-    padding-top: 0;
-}
-
-/*
- * Striped
- */
-
-.uk-list-large.uk-list-striped > * {
-    padding: var(--list-large-striped-padding-vertical) var(--list-large-striped-padding-horizontal);
-}
-
-.uk-list-collapse.uk-list-striped > * {
-    padding-bottom: 0;
-    padding-top: 0;
-}
-
-.uk-list-large.uk-list-striped > :nth-child(n+2),
-.uk-list-collapse.uk-list-striped > :nth-child(n+2) {
-    margin-top: 0;
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-list-misc) {
-    @include hook-list-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --list-margin-top: var(--global-small-margin);
-    --list-padding-left: #{$list-padding-left};
-    --list-marker-height: calc(var(--global-line-height) * 1em);
-    --list-muted-color: var(--global-muted-color);
-    --list-emphasis-color: var(--global-emphasis-color);
-    --list-primary-color: var(--global-primary-background);
-    --list-secondary-color: var(--global-secondary-background);
-    --list-bullet-icon-color: var(--global-color);
-    --list-divider-margin-top: var(--global-small-margin);
-    --list-divider-border-width: var(--global-border-width);
-    --list-divider-border: var(--global-border);
-    --list-striped-padding-vertical: var(--global-small-margin);
-    --list-striped-padding-horizontal: var(--global-small-margin);
-    --list-striped-background: var(--global-muted-background);
-    --list-large-margin-top: var(--global-margin);
-    --list-large-divider-margin-top: var(--global-margin);
-    --list-large-striped-padding-vertical: var(--global-margin);
-    --list-large-striped-padding-horizontal: var(--global-small-margin);
-
-    // Inverse
-    --inverse-list-muted-color: var(--inverse-global-muted-color);
-    --inverse-list-emphasis-color: var(--inverse-global-emphasis-color);
-    --inverse-list-primary-color: var(--inverse-global-primary-background);
-    --inverse-list-secondary-color: var(--inverse-global-primary-background);
-    --inverse-list-divider-border: var(--inverse-global-border);
-    --inverse-list-striped-background: var(--inverse-global-muted-background);
-    --inverse-list-bullet-icon-color: var(--inverse-global-color);
-}

package/dist/cjs/components/Modal/Modal.d.ts

@@ -1,12 +0,0 @@
-import { type DialogProps } from '@rc-component/dialog';
-import * as React from 'react';
-import { type Direction } from '../../types';
-import './index.scss';
-export interface ModalProps extends Omit<DialogProps, 'afterClose'> {
-    centered?: boolean;
-    direction?: Direction;
-    full?: boolean;
-    getContainer?: string | HTMLElement | (() => HTMLElement) | false;
-    onClosed?: VoidFunction;
-}
-export declare function Modal(props: ModalProps): React.JSX.Element;