@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/dropdown.scss

@@ -1,207 +0,0 @@
-// Name:            Dropdown
-// Description:     Component to create dropdown menus
-//
-// Component:       `uk-dropdown`
-//
-// Adopted:         `uk-dropdown-nav`
-//
-// Modifiers:       `uk-dropdown-placement-top-*`
-//                  `uk-dropdown-placement-bottom-*`
-//                  `uk-dropdown-stack`
-//                  `uk-dropdown-grid`
-//
-// States:          `uk-dropdown-hidden`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Dropdown
- ========================================================================== */
-
-/*
- * 1. Set position
- * 2. Set a default width
- * 3. Style
- */
-
-.uk-dropdown {
-    --uk-inverse: #{$dropdown-color-mode};
-    background: var(--dropdown-background); /* 3 */
-    box-sizing: border-box; /* 2 */
-    color: var(--dropdown-color); /* 3 */
-    min-width: var(--dropdown-min-width); /* 2 */
-    padding: var(--dropdown-padding); /* 3 */
-    position: absolute; /* 1 */
-    z-index: var(--dropdown-z-index); /* 1 */
-    @if meta.mixin-exists('hook-dropdown') {
-        @include hook-dropdown;
-    }
-}
-
-/* Hide */
-.uk-dropdown-hidden { display: none; }
-
-
-/* Position Animation
- ========================================================================== */
-
-[class*='uk-dropdown-placement-bottom'] {
-    &.uk-slide-up-enter.uk-slide-up-enter-active,
-    &.uk-slide-up-appear.uk-slide-up-appear-active {
-        animation-name: uk-slide-up-in;
-    }
-
-    &.uk-slide-up-leave.uk-slide-up-leave-active {
-        animation-name: uk-slide-up-out;
-    }
-}
-
-[class*='uk-dropdown-placement-top'] {
-    &.uk-slide-up-enter.uk-slide-up-enter-active,
-    &.uk-slide-up-appear.uk-slide-up-appear-active {
-        animation-name: uk-slide-down-in;
-    }
-
-    &.uk-slide-up-leave.uk-slide-up-leave-active {
-        animation-name: uk-slide-down-out;
-    }
-}
-
-
-/* Nav
- * Adopts `uk-nav`
- ========================================================================== */
-
-.uk-dropdown-nav {
-    white-space: nowrap;
-    @if meta.mixin-exists('hook-dropdown-nav') {
-        @include hook-dropdown-nav;
-    }
-}
-
-/*
- * Items
- */
-
-.uk-dropdown-nav > li > a {
-    color: var(--dropdown-nav-item-color);
-    @if meta.mixin-exists('hook-dropdown-nav-item') {
-        @include hook-dropdown-nav-item;
-    }
-}
-
-/* Hover + Focus + Active */
-.uk-dropdown-nav > li > a:hover,
-.uk-dropdown-nav > li > a:focus,
-.uk-dropdown-nav > li.uk-active > a {
-    color: var(--dropdown-nav-item-hover-color);
-    @if meta.mixin-exists('hook-dropdown-nav-item-hover') {
-        @include hook-dropdown-nav-item-hover;
-    }
-}
-
-/*
- * Header
- */
-
-.uk-dropdown-nav .uk-nav-header {
-    color: var(--dropdown-nav-header-color);
-    @if meta.mixin-exists('hook-dropdown-nav-header') {
-        @include hook-dropdown-nav-header;
-    }
-}
-
-/*
- * Divider
- */
-
-.uk-dropdown-nav .uk-nav-divider {
-    border-top: var(--dropdown-nav-divider-border-width) solid var(--dropdown-nav-divider-border);
-    @if meta.mixin-exists('hook-dropdown-nav-divider') {
-        @include hook-dropdown-nav-divider;
-    }
-}
-
-/*
- * Sublists
- */
-
-// noinspection Stylelint
-.uk-dropdown-nav .uk-nav-sub a {
-    color: var(--dropdown-nav-sublist-item-color);
-}
-
-.uk-dropdown-nav .uk-nav-sub a:hover,
-.uk-dropdown-nav .uk-nav-sub a:focus,
-.uk-dropdown-nav .uk-nav-sub li.uk-active > a {
-    color: var(--dropdown-nav-sublist-item-hover-color);
-}
-
-// Color mode
-@if $dropdown-color-mode == dark {
-    .uk-dropdown {
-        @extend .uk-dark !optional;
-    }
-}
-
-@if $dropdown-color-mode == light {
-    .uk-dropdown {
-        @extend .uk-light !optional;
-    }
-}
-
-
-/* Grid modifiers
- ========================================================================== */
-
-.uk-dropdown-stack .uk-dropdown-grid > * {
-    width: 100% !important;
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-dropdown-misc') {
-    @include hook-dropdown-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --dropdown-z-index: #{$dropdown-z-index};
-    --dropdown-min-width: #{$dropdown-min-width};
-    --dropdown-padding: #{$dropdown-padding};
-    --dropdown-background: var(--global-muted-background);
-    --dropdown-border-radius: var(--global-border-radius);
-    --dropdown-color: var(--global-color);
-    --dropdown-margin: var(--global-small-margin);
-    --dropdown-nav-item-color: var(--global-muted-color);
-    --dropdown-nav-item-hover-color: var(--global-color);
-    --dropdown-nav-header-color: var(--global-emphasis-color);
-    --dropdown-nav-divider-border-width: var(--global-border-width);
-    --dropdown-nav-divider-border: var(--global-border);
-    --dropdown-nav-sublist-item-color: var(--global-muted-color);
-    --dropdown-nav-sublist-item-hover-color: var(--global-color);
-
-    // Inverse
-    --inverse-dropdown-background: var(--inverse-global-muted-background);
-    --inverse-dropdown-color: var(--inverse-global-color);
-    --inverse-dropdown-nav-item-color: var(--inverse-global-muted-color);
-    --inverse-dropdown-nav-item-hover-color: var(--inverse-global-color);
-    --inverse-dropdown-nav-header-color: var(--inverse-global-emphasis-color);
-    --inverse-dropdown-nav-divider-border: var(--inverse-global-border);
-    --inverse-dropdown-nav-sublist-item-color: var(--inverse-global-muted-color);
-    --inverse-dropdown-nav-sublist-item-hover-color: var(--inverse-global-color);
-}

package/styles/flex.scss

@@ -1,326 +0,0 @@
-// Name:            Flex
-// Description:     Utilities for layouts based on flexbox
-//
-// Component:       `uk-flex-*`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Flex
- ========================================================================== */
-
-.uk-flex { display: flex; }
-
-.uk-flex-inline { display: inline-flex; }
-
-/*
- * Remove pseudo elements created by micro clearfix as precaution
- */
-
-.uk-flex::before,
-.uk-flex::after,
-.uk-flex-inline::before,
-.uk-flex-inline::after { display: none; }
-
-
-/* Alignment
- ========================================================================== */
-
-/*
- * Align items along the main axis of the current line of the flex container
- * Row: Horizontal
- */
-
-// Default
-.uk-flex-left { justify-content: flex-start; }
-
-.uk-flex-center { justify-content: center; }
-
-.uk-flex-right { justify-content: flex-end; }
-
-.uk-flex-between { justify-content: space-between; }
-
-.uk-flex-around { justify-content: space-around; }
-
-
-/* Phone landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-small) {
-    .uk-flex-left\@s { justify-content: flex-start; }
-
-    .uk-flex-center\@s { justify-content: center; }
-
-    .uk-flex-right\@s { justify-content: flex-end; }
-
-    .uk-flex-between\@s { justify-content: space-between; }
-
-    .uk-flex-around\@s { justify-content: space-around; }
-}
-
-/* Tablet landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-medium) {
-    .uk-flex-left\@m { justify-content: flex-start; }
-
-    .uk-flex-center\@m { justify-content: center; }
-
-    .uk-flex-right\@m { justify-content: flex-end; }
-
-    .uk-flex-between\@m { justify-content: space-between; }
-
-    .uk-flex-around\@m { justify-content: space-around; }
-}
-
-/* Desktop and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-large) {
-    .uk-flex-left\@l { justify-content: flex-start; }
-
-    .uk-flex-center\@l { justify-content: center; }
-
-    .uk-flex-right\@l { justify-content: flex-end; }
-
-    .uk-flex-between\@l { justify-content: space-between; }
-
-    .uk-flex-around\@l { justify-content: space-around; }
-}
-
-/* Large screen and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-xlarge) {
-    .uk-flex-left\@xl { justify-content: flex-start; }
-
-    .uk-flex-center\@xl { justify-content: center; }
-
-    .uk-flex-right\@xl { justify-content: flex-end; }
-
-    .uk-flex-between\@xl { justify-content: space-between; }
-
-    .uk-flex-around\@xl { justify-content: space-around; }
-}
-
-/*
- * Align items in the cross axis of the current line of the flex container
- * Row: Vertical
- */
-
-// Default
-.uk-flex-stretch { align-items: stretch; }
-
-.uk-flex-top { align-items: flex-start; }
-
-.uk-flex-middle { align-items: center; }
-
-.uk-flex-bottom { align-items: flex-end; }
-
-
-/* Direction
- ========================================================================== */
-
-// Default
-.uk-flex-row { flex-direction: row; }
-
-.uk-flex-row-reverse { flex-direction: row-reverse; }
-
-.uk-flex-column { flex-direction: column; }
-
-.uk-flex-column-reverse { flex-direction: column-reverse; }
-
-
-/* Wrap
- ========================================================================== */
-
-// Default
-.uk-flex-nowrap { flex-wrap: nowrap; }
-
-.uk-flex-wrap { flex-wrap: wrap; }
-
-.uk-flex-wrap-reverse { flex-wrap: wrap-reverse; }
-
-/*
- * Aligns items within the flex container when there is extra space in the cross-axis
- * Only works if there is more than one line of flex items
- */
-
-// Default
-.uk-flex-wrap-stretch { align-content: stretch; }
-
-.uk-flex-wrap-top { align-content: flex-start; }
-
-.uk-flex-wrap-middle { align-content: center; }
-
-.uk-flex-wrap-bottom { align-content: flex-end; }
-
-.uk-flex-wrap-between { align-content: space-between; }
-
-.uk-flex-wrap-around { align-content: space-around; }
-
-
-/* Item ordering
- ========================================================================== */
-
-/*
- * Default is 0
- */
-
-.uk-flex-first { order: -1; }
-
-.uk-flex-last { order: 99; }
-
-
-/* Phone landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-small) {
-    .uk-flex-first\@s { order: -1; }
-
-    .uk-flex-last\@s { order: 99; }
-
-    .uk-flex-nowrap\@s { flex-wrap: nowrap; }
-
-    .uk-flex-wrap\@s { flex-wrap: wrap; }
-
-    .uk-flex-wrap-reverse\@s { flex-wrap: wrap-reverse; }
-
-    .uk-flex-wrap-stretch\@s { align-content: stretch; }
-
-    .uk-flex-wrap-top\@s { align-content: flex-start; }
-
-    .uk-flex-wrap-middle\@s { align-content: center; }
-
-    .uk-flex-wrap-bottom\@s { align-content: flex-end; }
-
-    .uk-flex-wrap-between\@s { align-content: space-between; }
-
-    .uk-flex-wrap-around\@s { align-content: space-around; }
-}
-
-/* Tablet landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-medium) {
-    .uk-flex-first\@m { order: -1; }
-
-    .uk-flex-last\@m { order: 99; }
-
-    .uk-flex-nowrap\@m { flex-wrap: nowrap; }
-
-    .uk-flex-wrap\@m { flex-wrap: wrap; }
-
-    .uk-flex-wrap-reverse\@m { flex-wrap: wrap-reverse; }
-
-    .uk-flex-wrap-stretch\@m { align-content: stretch; }
-
-    .uk-flex-wrap-top\@m { align-content: flex-start; }
-
-    .uk-flex-wrap-middle\@m { align-content: center; }
-
-    .uk-flex-wrap-bottom\@m { align-content: flex-end; }
-
-    .uk-flex-wrap-between\@m { align-content: space-between; }
-
-    .uk-flex-wrap-around\@m { align-content: space-around; }
-}
-
-/* Desktop and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-large) {
-    .uk-flex-first\@l { order: -1; }
-
-    .uk-flex-last\@l { order: 99; }
-
-    .uk-flex-nowrap\@l { flex-wrap: nowrap; }
-
-    .uk-flex-wrap\@l { flex-wrap: wrap; }
-
-    .uk-flex-wrap-reverse\@l { flex-wrap: wrap-reverse; }
-
-    .uk-flex-wrap-stretch\@l { align-content: stretch; }
-
-    .uk-flex-wrap-top\@l { align-content: flex-start; }
-
-    .uk-flex-wrap-middle\@l { align-content: center; }
-
-    .uk-flex-wrap-bottom\@l { align-content: flex-end; }
-
-    .uk-flex-wrap-between\@l { align-content: space-between; }
-
-    .uk-flex-wrap-around\@l { align-content: space-around; }
-}
-
-/* Large screen and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-xlarge) {
-    .uk-flex-first\@xl { order: -1; }
-
-    .uk-flex-last\@xl { order: 99; }
-
-    .uk-flex-nowrap\@xl { flex-wrap: nowrap; }
-
-    .uk-flex-wrap\@xl { flex-wrap: wrap; }
-
-    .uk-flex-wrap-reverse\@xl { flex-wrap: wrap-reverse; }
-
-    .uk-flex-wrap-stretch\@xl { align-content: stretch; }
-
-    .uk-flex-wrap-top\@xl { align-content: flex-start; }
-
-    .uk-flex-wrap-middle\@xl { align-content: center; }
-
-    .uk-flex-wrap-bottom\@xl { align-content: flex-end; }
-
-    .uk-flex-wrap-between\@xl { align-content: space-between; }
-
-    .uk-flex-wrap-around\@xl { align-content: space-around; }
-}
-
-
-/* Item dimensions
- ========================================================================== */
-
-/*
- * Initial: 0 1 auto
- * Content dimensions, but shrinks
- */
-
-/*
- * No Flex: 0 0 auto
- * Content dimensions
- */
-
-.uk-flex-none { flex: none; }
-
-/*
- * Relative Flex: 1 1 auto
- * Space is allocated considering content
- */
-
-.uk-flex-auto { flex: auto; }
-
-/*
- * Absolute Flex: 1 1 0%
- * Space is allocated solely based on flex
- */
-
-.uk-flex-1 { flex: 1; }
-
-/*
- * Fill Flex: 1 0 auto
- */
-
-.uk-flex-fill { flex: 1 0 auto; }
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-flex-misc') {
-    @include hook-flex-misc;
-}