@broxus/react-uikit 0.18.0 → 0.19.0

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

@@ -1,196 +0,0 @@
-// Name:            Accordion
-// Description:     Component to create accordions
-//
-// Component:       `uk-accordion`
-//
-// Sub-objects:     `uk-accordion-header`
-//                  `uk-accordion-content`
-//                  `uk-accordion-content-box`
-//                  `uk-accordion-extra`
-//
-// States:          `uk-accordion-item-active`
-//                  `uk-accordion-item-disabled`
-//                  `uk-accordion-header-collapsible-only`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Accordion
- ========================================================================== */
-
-.uk-accordion {
-    list-style: none;
-    padding: 0;
-    @if mixin-exists(hook-accordion) {
-        @include hook-accordion;
-    }
-}
-
-
-/* Item
- ========================================================================== */
-
-.uk-accordion > :nth-child(n+2) {
-    margin-top: var(--accordion-item-margin-top);
-    @if mixin-exists(hook-accordion-item) {
-        @include hook-accordion-item;
-    }
-}
-
-
-/* Header
- ========================================================================== */
-
-.uk-accordion-header {
-    align-items: center;
-    color: var(--accordion-header-color);
-    cursor: pointer;
-    display: flex;
-    font-size: var(--accordion-header-font-size);
-    line-height: var(--accordion-header-line-height);
-    @if mixin-exists(hook-accordion-header) {
-        @include hook-accordion-header;
-    }
-
-}
-
-.uk-accordion-header-collapsible-only {
-    cursor: default;
-    @if mixin-exists(hook-accordion-header-collapsible-only) {
-        @include hook-accordion-header-collapsible-only;
-    }
-
-    .uk-accordion-header-text {
-        cursor: pointer;
-    }
-}
-
-/* Hover + Focus */
-.uk-accordion-header:hover,
-.uk-accordion-header:focus {
-    outline: none;
-    text-decoration: none;
-    @if mixin-exists(hook-accordion-header-hover) {
-        @include hook-accordion-header-hover;
-    }
-
-    &:not(.uk-accordion-item-disabled) {
-        color: var(--accordion-header-hover-color);
-    }
-}
-
-/* Expand Icon */
-.uk-accordion-expand-icon {
-    --icon-size: var(--accordion-icon-size);
-    margin-right: var(--accordion-icon-margin-right);
-}
-
-/* Disabled item
- ========================================================================== */
-
-.uk-accordion-item-disabled {
-    color: var(--accordion-item-disabled-color);
-    cursor: not-allowed;
-    opacity: 0.7;
-    @if mixin-exists(hook-accordion-item-disable) {
-        @include hook-accordion-item-disable;
-    }
-
-    .uk-accordion-header {
-        cursor: not-allowed;
-    }
-}
-
-
-/* Content
- ========================================================================== */
-
-.uk-accordion-content {
-    display: flow-root;
-    overflow: hidden;
-    @if mixin-exists(hook-accordion-content) {
-        @include hook-accordion-content;
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-accordion-content > :last-child { margin-bottom: 0; }
-
-.uk-accordion-content-box {
-    margin-top: var(--accordion-content-margin-top);
-    @if mixin-exists(hook-accordion-content-box) {
-        @include hook-accordion-content-box;
-    }
-}
-
-
-/* Header extra
- ========================================================================== */
-
-.uk-accordion-extra {
-    margin-left: auto;
-    margin-right: var(--accordion-extra-margin-horizontal);
-    @if mixin-exists(hook-accordion-extra) {
-        @include hook-accordion-extra;
-    }
-}
-
-
-// Right to Left Direction
-// ========================================================================
-
-[dir='rtl'] .uk-accordion,
-.uk-accordion.uk-accordion-rtl {
-    direction: rtl;
-
-    .uk-accordion-expand-icon {
-        margin-left: var(--accordion-icon-margin-right);
-        margin-right: unset;
-    }
-
-    .uk-accordion-extra {
-        margin-left: var(--accordion-extra-margin-horizontal);
-        margin-right: auto;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-accordion-misc) {
-    @include hook-accordion-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --accordion-item-margin-top: var(--global-margin);
-    --accordion-item-disabled-color: var(--global-muted-color);
-    --accordion-header-font-size: var(--global-medium-font-size);
-    --accordion-header-line-height: #{$accordion-title-line-height};
-    --accordion-header-color: var(--global-emphasis-color);
-    --accordion-header-hover-color: var(--global-color);
-    --accordion-extra-margin-horizontal: var(--global-small-margin);
-    --accordion-content-margin-top: var(--global-margin);
-    --accordion-icon-margin-right: var(--global-small-margin);
-    --accordion-icon-color: var(--global-color);
-    --accordion-icon-size: #{$accordion-icon-size};
-
-    // Inverse
-    --inverse-accordion-header-color: var(--inverse-global-emphasis-color);
-    --inverse-accordion-header-hover-color: var(--inverse-global-color);
-    --inverse-accordion-item-disabled-color: var(--inverse-global-emphasis-color);
-}

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

@@ -1,194 +0,0 @@
-// Name:            Alert
-// Description:     Component to create alert messages
-//
-// Component:       `uk-alert`
-//
-// Adopted:         `uk-alert-close`
-//                  `uk-alert-motion`
-//
-// Modifiers:       `uk-alert-primary`
-//                  `uk-alert-success`
-//                  `uk-alert-warning`
-//                  `uk-alert-danger`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Alert
- ========================================================================== */
-
-.uk-alert {
-    background: var(--alert-background);
-    color: var(--alert-color);
-    margin-bottom: var(--alert-margin-vertical);
-    padding: var(--alert-padding);
-    padding-right: var(--alert-padding-right);
-    position: relative;
-    @if mixin-exists(hook-alert) {
-        @include hook-alert;
-    }
-}
-
-/* Add margin if adjacent element */
-* + .uk-alert {
-    margin-top: var(--alert-margin-vertical);
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-alert > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Close
- * Adopts `uk-close`
- ========================================================================== */
-
-.uk-alert-close {
-    position: absolute;
-    right: var(--alert-close-right);
-    top: var(--alert-close-top);
-    @if mixin-exists(hook-alert-close) {
-        @include hook-alert-close;
-    }
-}
-
-/*
- * Remove margin from adjacent element
- */
-
-.uk-alert-close:first-child + * {
-    margin-top: 0;
-}
-
-/*
- * Hover + Focus
- */
-
-.uk-alert-close:hover,
-.uk-alert-close:focus {
-    --close-hover-color: initial;
-
-    opacity: 0.8;
-    @if mixin-exists(hook-alert-close-hover) {
-        @include hook-alert-close-hover;
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Primary
- */
-
-.uk-alert-primary {
-    background: var(--alert-primary-background);
-    color: var(--alert-primary-color);
-    @if mixin-exists(hook-alert-primary) {
-        @include hook-alert-primary;
-    }
-}
-
-/*
- * Success
- */
-
-.uk-alert-success {
-    background: var(--alert-success-background);
-    color: var(--alert-success-color);
-    @if mixin-exists(hook-alert-success) {
-        @include hook-alert-success;
-    }
-}
-
-/*
- * Warning
- */
-
-.uk-alert-warning {
-    background: var(--alert-warning-background);
-    color: var(--alert-warning-color);
-    @if mixin-exists(hook-alert-warning) {
-        @include hook-alert-warning;
-    }
-}
-
-/*
- * Danger
- */
-
-.uk-alert-danger {
-    background: var(--alert-danger-background);
-    color: var(--alert-danger-color);
-    @if mixin-exists(hook-alert-danger) {
-        @include hook-alert-danger;
-    }
-}
-
-
-/* Motion
- ========================================================================== */
-
-.uk-alert-motion {
-    transition: height var(--transition-duration), opacity var(--transition-duration);
-}
-
-.uk-alert-motion-leave {
-    opacity: 1;
-    overflow: hidden;
-    transition: max-height var(--transition-duration) var(--ease-in-out-circ),
-        opacity var(--transition-duration) var(--ease-in-out-circ),
-        padding-top var(--transition-duration) var(--ease-in-out-circ),
-        padding-bottom var(--transition-duration) var(--ease-in-out-circ),
-        margin-bottom var(--transition-duration) var(--ease-in-out-circ);
-}
-
-.uk-alert-motion-leave-active {
-    margin-bottom: 0 !important;
-    max-height: 0;
-    opacity: 0;
-    padding-bottom: 0;
-    padding-top: 0;
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-alert-misc) {
-    @include hook-alert-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --alert-margin-vertical: var(--global-margin);
-    --alert-padding: var(--global-small-gutter);
-    --alert-padding-right: calc(var(--alert-padding) + 15px);
-    --alert-background: var(--global-muted-background);
-    --alert-color: var(--global-color);
-    --alert-close-top: var(--alert-padding);
-    --alert-close-right: var(--alert-padding);
-    --alert-primary-background: #{$alert-primary-background};
-    --alert-primary-color: var(--global-primary-background);
-    --alert-success-background: #{$alert-success-background};
-    --alert-success-color: var(--global-success-background);
-    --alert-warning-background: #{$alert-warning-background};
-    --alert-warning-color: var(--global-warning-background);
-    --alert-danger-background: #{$alert-danger-background};
-    --alert-danger-color: var(--global-danger-background);
-}

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

@@ -1,83 +0,0 @@
-// Name:            Badge
-// Description:     Component to create notification badges
-//
-// Component:       `uk-badge`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Badge
- ========================================================================== */
-
-/*
- * 1. Style
- * 2. Center child vertically and horizontally
- */
-
-.uk-badge {
-    align-items: center; /* 2 */
-    background: var(--badge-background); /* 1 */
-    border-radius: var(--badge-border-radius);
-    box-sizing: border-box;
-    color: var(--badge-color); /* 1 */
-    display: inline-flex; /* 2 */
-    font-size: var(--badge-font-size); /* 1 */
-    height: var(--badge-size);
-    justify-content: center; /* 2 */
-    line-height: 0;
-    min-width: var(--badge-size);
-    padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
-    vertical-align: middle;
-    @if mixin-exists(hook-badge) {
-        @include hook-badge;
-    }
-}
-
-/*
- * Required for `a`
- */
-
-.uk-badge:hover,
-.uk-badge:focus {
-    color: var(--badge-hover-color);
-    outline: none;
-    text-decoration: none;
-    @if mixin-exists(hook-badge-hover) {
-        @include hook-badge-hover;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-badge-misc) {
-    @include hook-badge-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --badge-size: #{$badge-size};
-    --badge-padding-vertical: #{$badge-padding-vertical};
-    --badge-padding-horizontal: #{$badge-padding-horizontal};
-    --badge-border-radius: #{$badge-border-radius};
-    --badge-background: var(--global-primary-background);
-    --badge-color: var(--global-inverse-color);
-    --badge-font-size: var(--global-small-font-size);
-    --badge-hover-color: var(--global-inverse-color);
-
-    // Inverse
-    --inverse-badge-background: var(--inverse-global-primary-background);
-    --inverse-badge-color: var(--inverse-global-inverse-color);
-    --inverse-badge-hover-color: var(--inverse-global-inverse-color);
-}

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

@@ -1,127 +0,0 @@
-// Name:            Breadcrumb
-// Description:     Component to create a breadcrumb navigation
-//
-// Component:       `uk-breadcrumb`
-//
-// States:          `uk-disabled`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Breadcrumb
- ========================================================================== */
-
-/*
- * Reset list
- */
-
-.uk-breadcrumb {
-    list-style: none;
-    padding: 0;
-    @if mixin-exists(hook-breadcrumb) {
-        @include hook-breadcrumb;
-    }
-}
-
-/*
- * 1. Doesn't generate any box and replaced by child boxes
- */
-
-.uk-breadcrumb > * {
-    display: contents;
-}
-
-
-/* Items
- ========================================================================== */
-
-.uk-breadcrumb > * > * {
-    color: var(--breadcrumb-item-color);
-    font-size: var(--breadcrumb-item-font-size);
-    @if mixin-exists(hook-breadcrumb-item) {
-        @include hook-breadcrumb-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-breadcrumb > * > :hover,
-.uk-breadcrumb > * > :focus {
-    color: var(--breadcrumb-item-hover-color);
-    text-decoration: var(--breadcrumb-item-hover-text-decoration);
-    @if mixin-exists(hook-breadcrumb-item-hover) {
-        @include hook-breadcrumb-item-hover;
-    }
-}
-
-/* Disabled */
-.uk-breadcrumb > .uk-disabled > * {
-    @if mixin-exists(hook-breadcrumb-item-disabled) {
-        @include hook-breadcrumb-item-disabled;
-    }
-}
-
-/* Active */
-.uk-breadcrumb > :last-child > span,
-.uk-breadcrumb > :last-child > a:not([href]) {
-    color: var(--breadcrumb-item-active-color);
-    @if mixin-exists(hook-breadcrumb-item-active) {
-        @include hook-breadcrumb-item-active;
-    }
-}
-
-/*
- * Divider
- * `nth-child` makes it also work without JS if it's only one row
- * 1. Remove space between inline block elements.
- * 2. Style
- */
-
-.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
-    color: var(--breadcrumb-divider-color); /* 2 */
-    content: var(--breadcrumb-divider);
-    display: inline-block;
-    font-size: var(--breadcrumb-divider-font-size); /* 2 */
-
-    /* 1 */
-    margin: 0 var(--breadcrumb-divider-margin-horizontal) 0 calc(var(--breadcrumb-divider-margin-horizontal) - 4px);
-    @if mixin-exists(hook-breadcrumb-divider) {
-        @include hook-breadcrumb-divider;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-breadcrumb-misc) {
-    @include hook-breadcrumb-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --breadcrumb-item-font-size: var(--global-small-font-size);
-    --breadcrumb-item-color: var(--global-muted-color);
-    --breadcrumb-item-hover-color: var(--global-color);
-    --breadcrumb-item-hover-text-decoration: #{$breadcrumb-item-hover-text-decoration};
-    --breadcrumb-item-active-color: var(--global-color);
-    --breadcrumb-divider: #{$breadcrumb-divider};
-    --breadcrumb-divider-margin-horizontal: #{$breadcrumb-divider-margin-horizontal};
-    --breadcrumb-divider-font-size: var(--breadcrumb-item-font-size);
-    --breadcrumb-divider-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-breadcrumb-item-color: var(--inverse-global-muted-color);
-    --inverse-breadcrumb-item-hover-color: var(--inverse-global-color);
-    --inverse-breadcrumb-item-active-color: var(--inverse-global-color);
-    --inverse-breadcrumb-divider-color: var(--inverse-global-muted-color);
-}