@broxus/react-uikit 0.18.0 → 0.19.0

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

@@ -1,205 +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`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   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 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 mixin-exists(hook-dropdown-nav) {
-        @include hook-dropdown-nav;
-    }
-}
-
-/*
- * Items
- */
-
-.uk-dropdown-nav > li > a {
-    color: var(--dropdown-nav-item-color);
-    @if 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 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 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 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 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);
-}