@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/accordion.scss

@@ -1,224 +0,0 @@
-// Name:            Accordion
-// Description:     Component to create accordions
-//
-// Component:       `uk-accordion`
-//
-// Sub-objects:     `uk-accordion-header`
-//                  `uk-accordion-panel`
-//                  `uk-accordion-body`
-//                  `uk-accordion-extra`
-//
-// States:          `uk-accordion-item-active`
-//                  `uk-accordion-item-disabled`
-//                  `uk-accordion-header-collapsible-only`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Accordion
- ========================================================================== */
-
-.uk-accordion {
-    display: flex;
-    flex-direction: column;
-    gap: var(--accordion-gutter);
-    list-style: none;
-    padding: 0;
-    @if meta.mixin-exists('hook-accordion') {
-        @include hook-accordion;
-    }
-}
-
-
-/* Item
- ========================================================================== */
-
-.uk-accordion-item {
-    @if meta.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;
-    @if meta.mixin-exists('hook-accordion-header') {
-        @include hook-accordion-header;
-    }
-}
-
-/*
- * Header collapsible area
- */
-.uk-accordion-collapsible-header {
-    cursor: default;
-    @if meta.mixin-exists('hook-accordion-collapsible-header') {
-        @include hook-accordion-collapsible-header;
-    }
-}
-
-.uk-accordion-collapsible-header .uk-accordion-title {
-    cursor: pointer;
-}
-
-.uk-accordion-collapsible-header .uk-accordion-expand-icon {
-    pointer-events: none;
-}
-
-/*
- * Icon collapsible area
- */
-.uk-accordion-collapsible-icon {
-    cursor: default;
-    @if meta.mixin-exists('hook-accordion-collapsible-icon') {
-        @include hook-accordion-collapsible-icon;
-    }
-}
-
-.uk-accordion-collapsible-icon .uk-accordion-expand-icon {
-    cursor: pointer;
-}
-
-/* Title */
-.uk-accordion-title {
-    color: var(--accordion-title-color);
-    font-size: var(--accordion-title-font-size);
-    line-height: var(--accordion-title-line-height);
-    @if meta.mixin-exists('hook-accordion-title') {
-        @include hook-accordion-title;
-    }
-}
-
-/* Hover + Focus */
-:not(.uk-accordion-collapsible-disabled, .uk-accordion-collapsible-icon):hover > .uk-accordion-title,
-:not(.uk-accordion-collapsible-disabled, .uk-accordion-collapsible-icon) > .uk-accordion-title:hover {
-    color: var(--accordion-title-hover-color);
-    outline: none;
-    text-decoration: none;
-    @if meta.mixin-exists('hook-accordion-title-hover') {
-        @include hook-accordion-title-hover;
-    }
-}
-
-/* Expand Icon */
-.uk-accordion-expand-icon {
-    --icon-size: var(--accordion-icon-size);
-    margin-right: var(--accordion-icon-margin-right);
-}
-
-
-/* Disabled item
- ========================================================================== */
-
-.uk-accordion-collapsible-disabled {
-    color: var(--accordion-item-disabled-color);
-    cursor: not-allowed;
-    opacity: 0.7;
-    @if meta.mixin-exists('hook-accordion-item-disable') {
-        @include hook-accordion-item-disable;
-    }
-}
-
-
-/* Content panel
- ========================================================================== */
-
-.uk-accordion-panel {
-    box-sizing: border-box;
-    display: flow-root;
-    overflow: hidden;
-    @if meta.mixin-exists('hook-accordion-panel') {
-        @include hook-accordion-panel;
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-accordion-panel > :last-child { margin-bottom: 0; }
-
-.uk-accordion-body {
-    box-sizing: border-box;
-    margin-top: var(--accordion-gutter);
-    @if meta.mixin-exists('hook-accordion-body') {
-        @include hook-accordion-body;
-    }
-}
-
-
-/* Header extra
- ========================================================================== */
-
-.uk-accordion-extra {
-    margin-left: auto;
-    margin-right: var(--accordion-extra-margin-horizontal);
-    @if meta.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 meta.mixin-exists('hook-accordion-misc') {
-    @include hook-accordion-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --accordion-gutter: var(--global-margin);
-    --accordion-item-disabled-color: var(--global-muted-color);
-    --accordion-header-color: var(--global-emphasis-color);
-    --accordion-title-font-size: var(--global-medium-font-size);
-    --accordion-title-line-height: #{$accordion-title-line-height};
-    --accordion-title-color: var(--global-emphasis-color);
-    --accordion-title-hover-color: var(--global-color);
-    --accordion-extra-margin-horizontal: var(--global-small-margin);
-    --accordion-icon-margin-right: var(--global-small-margin);
-    --accordion-icon-color: var(--global-color);
-    --accordion-icon-size: #{$accordion-icon-size};
-
-    // Inverse
-    --inverse-accordion-title-color: var(--inverse-global-emphasis-color);
-    --inverse-accordion-title-hover-color: var(--inverse-global-color);
-    --inverse-accordion-item-disabled-color: var(--inverse-global-emphasis-color);
-}

package/styles/alert.scss

@@ -1,197 +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`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   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 meta.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 meta.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 meta.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 meta.mixin-exists('hook-alert-primary') {
-        @include hook-alert-primary;
-    }
-}
-
-/*
- * Success
- */
-
-.uk-alert-success {
-    background: var(--alert-success-background);
-    color: var(--alert-success-color);
-    @if meta.mixin-exists('hook-alert-success') {
-        @include hook-alert-success;
-    }
-}
-
-/*
- * Warning
- */
-
-.uk-alert-warning {
-    background: var(--alert-warning-background);
-    color: var(--alert-warning-color);
-    @if meta.mixin-exists('hook-alert-warning') {
-        @include hook-alert-warning;
-    }
-}
-
-/*
- * Danger
- */
-
-.uk-alert-danger {
-    background: var(--alert-danger-background);
-    color: var(--alert-danger-color);
-    @if meta.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 meta.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-color);
-    --alert-success-background: #{$alert-success-background};
-    --alert-success-color: var(--global-success-color);
-    --alert-warning-background: #{$alert-warning-background};
-    --alert-warning-color: var(--global-warning-color);
-    --alert-danger-background: #{$alert-danger-background};
-    --alert-danger-color: var(--global-danger-color);
-}

package/styles/align.scss

@@ -1,149 +0,0 @@
-// Name:            Align
-// Description:     Utilities to align embedded content
-//
-// Component:       `uk-align-left-*`
-//                  `uk-align-right-*`
-//                  `uk-align-center`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Align
- ========================================================================== */
-
-/*
- * Default
- */
-
-[class*='uk-align'] {
-    display: block;
-    margin-bottom: var(--align-margin-vertical);
-}
-
-* + [class*='uk-align'] {
-    margin-top: var(--align-margin-vertical);
-}
-
-/*
- * Center
- */
-
-.uk-align-center {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-/*
- * Left/Right
- */
-
-.uk-align-left {
-    float: left;
-    margin-right: var(--align-margin-horizontal);
-    margin-top: 0;
-}
-
-.uk-align-right {
-    float: right;
-    margin-left: var(--align-margin-horizontal);
-    margin-top: 0;
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-    .uk-align-left\@s {
-        float: left;
-        margin-right: var(--align-margin-horizontal);
-        margin-top: 0;
-    }
-
-    .uk-align-right\@s {
-        float: right;
-        margin-left: var(--align-margin-horizontal);
-        margin-top: 0;
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-align-left\@m {
-        float: left;
-        margin-right: var(--align-margin-horizontal);
-        margin-top: 0;
-    }
-
-    .uk-align-right\@m {
-        float: right;
-        margin-left: var(--align-margin-horizontal);
-        margin-top: 0;
-    }
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    .uk-align-left\@l {
-        float: left;
-        margin-top: 0;
-    }
-
-    .uk-align-right\@l {
-        float: right;
-        margin-top: 0;
-    }
-
-    .uk-align-left,
-    .uk-align-left\@s,
-    .uk-align-left\@m,
-    .uk-align-left\@l {
-        margin-right: var(--align-margin-horizontal-l);
-    }
-
-    .uk-align-right,
-    .uk-align-right\@s,
-    .uk-align-right\@m,
-    .uk-align-right\@l {
-        margin-left: var(--align-margin-horizontal-l);
-    }
-}
-
-/* Large screen and bigger */
-@media (min-width: $breakpoint-xlarge) {
-    .uk-align-left\@xl {
-        float: left;
-        margin-right: var(--align-margin-horizontal-l);
-        margin-top: 0;
-    }
-
-    .uk-align-right\@xl {
-        float: right;
-        margin-left: var(--align-margin-horizontal-l);
-        margin-top: 0;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-align-misc') {
-    @include hook-align-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --align-margin-horizontal: var(--global-gutter);
-    --align-margin-horizontal-l: var(--global-medium-gutter);
-    --align-margin-vertical: var(--global-gutter);
-}