@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/navbar.scss

@@ -1,682 +0,0 @@
-// Name:            Navbar
-// Description:     Component to create horizontal navigation bars
-//
-// Component:       `uk-navbar`
-//
-// Sub-objects:     `uk-navbar-container`
-//                  `uk-navbar-left`
-//                  `uk-navbar-right`
-//                  `uk-navbar-center`
-//                  `uk-navbar-center-left`
-//                  `uk-navbar-center-right`
-//                  `uk-navbar-nav`
-//                  `uk-navbar-parent-icon`
-//                  `uk-navbar-item`
-//                  `uk-navbar-item-rest`
-//                  `uk-navbar-toggle`
-//                  `uk-navbar-subtitle`
-//
-// Adopted:         `uk-navbar-dropdown` + Modifiers
-//                  `uk-navbar-dropdown-nav`
-//                  `uk-navbar-toggle-icon`
-//
-// Modifiers:       `uk-navbar-primary`
-//                  `uk-navbar-transparent`
-//                  `uk-navbar-sticky`
-//
-// States:          `uk-active`
-//                  `uk-parent`
-//                  `uk-open`
-//
-//
-// ========================================================================
-
-@use 'sass:meta';
-@use 'sass:string';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Navbar
- ========================================================================== */
-
-/*
- * 1. Create position context to center navbar group
- */
-
-.uk-navbar {
-    --uk-inverse: #{$navbar-color-mode};
-    display: flex;
-    position: relative; /* 1 */
-    @if meta.mixin-exists('hook-navbar') {
-        @include hook-navbar;
-    }
-}
-
-
-/* Container
- ========================================================================== */
-
-.uk-navbar-container:not(.uk-navbar-transparent) {
-    background: var(--navbar-background);
-    @if meta.mixin-exists('hook-navbar-container') {
-        @include hook-navbar-container;
-    }
-}
-
-// Color Mode
-@if $navbar-color-mode == light {
-    .uk-navbar-container:not(.uk-navbar-transparent) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $navbar-color-mode == dark {
-    .uk-navbar-container:not(.uk-navbar-transparent) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/* Groups
- ========================================================================== */
-
-/*
- * 1. Stretch height if a sibling's height is expanded by its content
- */
-
-.uk-navbar-left,
-.uk-navbar-right,
-[class*="uk-navbar-center"] {
-    align-items: stretch; /* 1 */
-    display: flex;
-    flex: none;
-    gap: var(--navbar-gap);
-    min-width: 1px;
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-navbar-left,
-    .uk-navbar-right,
-    [class*="uk-navbar-center"] { gap: var(--navbar-gap-m); }
-
-    .uk-navbar-center-left { right: string.unquote('calc(100% + var(--navbar-gap-m))'); }
-    .uk-navbar-center-right { left: string.unquote('calc(100% + var(--navbar-gap-m))'); }
-}
-
-/*
- * Horizontal alignment
- * 1. Create position context for centered navbar with sub groups (left/right)
- * 2. Fix text wrapping if content is larger than 50% of the container.
- * 3. Needed for dropdowns because a new position context is created
- *    `z-index` must be smaller than Drawer
- * 4. Align sub groups for centered navbar
- */
-
-.uk-navbar-left {
-    flex: 1;
-}
-
-.uk-navbar-right {
-    margin-left: auto;
-}
-
-.uk-navbar-center:only-child {
-    margin-left: auto;
-    margin-right: auto;
-    position: relative; /* 1 */
-}
-
-.uk-navbar-center:not(:only-child) {
-    align-items: stretch;
-    box-sizing: border-box;
-    height: 100%; /* 4 */
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: max-content; /* 2 */
-    z-index: calc(var(--global-z-index) - 10); /* 3 */
-}
-
-.uk-navbar-center-left,
-.uk-navbar-center-right {
-    height: 100%; /* 4 */
-    position: absolute; /* 5 */
-    top: 0;
-}
-
-.uk-navbar-center-left { right: string.unquote('calc(100% + var(--navbar-gap))'); }
-.uk-navbar-center-right { left: string.unquote('calc(100% + var(--navbar-gap))'); }
-
-[class*='uk-navbar-center-'] {
-    box-sizing: border-box;
-    width: max-content;
-}
-
-
-/* Nav
- ========================================================================== */
-
-/*
- * 1. Stretch height if a sibling's height is expanded by its content
- * 2. Reset list
- */
-
-.uk-navbar-nav {
-    align-items: stretch; /* 1 */
-    display: flex;
-    flex: auto;
-    flex-wrap: nowrap;
-    list-style: none;
-    margin: 0; /* 2 */
-    max-width: 100%;
-    min-width: 1px;
-    padding: 0;
-    white-space: nowrap;
-}
-
-
-/*
- * Allow items to wrap into the next line
- * Only not `absolute` positioned groups
- */
-
-.uk-navbar-left,
-.uk-navbar-right,
-.uk-navbar-center:only-child {
-    flex-wrap: nowrap;
-    white-space: nowrap;
-}
-
-/*
- * Items
- * 1. Center content vertically and horizontally
- * 2. Imitate white space gap when using flexbox
- * 3. Dimensions
- * 4. Style
- * 5. Required for `a`
- */
-
-.uk-navbar-nav > li[class*='uk-nav-item'] > a,      /* Nav item */
-.uk-navbar-item,                                    /* Content item */
-.uk-navbar-toggle {                                 /* Clickable item */
-    align-items: center;
-    box-sizing: border-box; /* 3 */
-    column-gap: 0.25em; /* 2 */
-    display: flex; /* 1 */
-    flex: none;
-    font-family: var(--navbar-nav-item-font-family), system-ui;
-    font-size: var(--navbar-nav-item-font-size); /* 4 */
-    justify-content: center;
-    min-height: var(--navbar-nav-item-height);
-    text-decoration: none; /* 5 */
-}
-
-/*
- * Nav items
- * 1. Stretch height if a sibling's height is expanded by its content
- * 2. Reset list
- */
-
-.uk-navbar-nav > li[class*='uk-nav-item'] > a {
-    color: var(--navbar-nav-item-color);
-    height: 100%; /* 1 */
-    padding: 0 var(--navbar-nav-item-padding-horizontal); /* 2 */
-    @if meta.mixin-exists('hook-navbar-nav-item') {
-        @include hook-navbar-nav-item;
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-navbar-nav > li[class*='uk-nav-item'] > a {
-        padding: 0 var(--navbar-nav-item-padding-horizontal-m); /* 2 */
-    }
-}
-
-/*
- * Hover
- * Apply hover style also if dropdown is opened
- */
-
-.uk-navbar-nav > li[class*='uk-nav-item'].uk-hover > a,
-.uk-navbar-nav > li[class*='uk-nav-item']:hover > a,
-.uk-navbar-nav > li[class*='uk-nav-item'] > a[aria-expanded='true'],
-.uk-navbar-nav > li[class*='uk-nav-item'] > a.uk-open {
-    color: var(--navbar-nav-item-hover-color);
-    @if meta.mixin-exists('hook-navbar-nav-item-hover') {
-        @include hook-navbar-nav-item-hover;
-    }
-}
-
-/* OnClick */
-.uk-navbar-nav > li[class*='uk-nav-item'] > a:active {
-    color: var(--navbar-nav-item-onclick-color);
-    @if meta.mixin-exists('hook-navbar-nav-item-onclick') {
-        @include hook-navbar-nav-item-onclick;
-    }
-}
-
-/* Active */
-.uk-navbar-nav > li[class*='uk-nav-item'].uk-active > a {
-    color: var(--navbar-nav-item-active-color);
-    @if meta.mixin-exists('hook-navbar-nav-item-active') {
-        @include hook-navbar-nav-item-active;
-    }
-}
-
-
-/* Parent icon modifier
- ========================================================================== */
-
-.uk-navbar-parent-icon {
-    margin-left: var(--navbar-parent-icon-margin-left);
-    transition: transform var(--transition-duration) var(--ease-out);
-}
-
-.uk-navbar-nav > li > a[aria-expanded='true'] .uk-navbar-parent-icon {
-    transform: rotateX(180deg);
-}
-
-
-/* Item
- ========================================================================== */
-
-.uk-navbar-item {
-    color: var(--navbar-item-color);
-    padding: 0 var(--navbar-item-padding-horizontal);
-    @if meta.mixin-exists('hook-navbar-item') {
-        @include hook-navbar-item;
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-navbar-item {
-        padding: 0 var(--navbar-item-padding-horizontal-m); /* 2 */
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-navbar-item > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Toggle
- ========================================================================== */
-
-.uk-navbar-toggle {
-    color: var(--navbar-toggle-color);
-    padding: 0 var(--navbar-item-padding-horizontal);
-    @if meta.mixin-exists('hook-navbar-toggle') {
-        @include hook-navbar-toggle;
-    }
-}
-
-.uk-navbar-toggle:hover,
-.uk-navbar-toggle[aria-expanded='true'],
-.uk-navbar-toggle.uk-open {
-    color: var(--navbar-toggle-hover-color);
-    outline: none;
-    text-decoration: none;
-    @if meta.mixin-exists('hook-navbar-toggle-hover') {
-        @include hook-navbar-toggle-hover;
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-navbar-toggle {
-        padding: 0 var(--navbar-item-padding-horizontal-m); /* 2 */
-    }
-}
-
-/*
- * Icon
- * Adopts `uk-icon`
- */
-
-.uk-navbar-toggle-icon {
-    @if meta.mixin-exists('hook-navbar-toggle-icon') {
-        @include hook-navbar-toggle-icon;
-    }
-}
-
-/* Hover */
-:hover > .uk-navbar-toggle-icon {
-    @if meta.mixin-exists('hook-navbar-toggle-icon-hover') {
-        @include hook-navbar-toggle-icon-hover;
-    }
-}
-
-
-/* Subtitle
- ========================================================================== */
-
-.uk-navbar-subtitle {
-    font-size: var(--navbar-subtitle-font-size);
-    @if meta.mixin-exists('hook-navbar-subtitle') {
-        @include hook-navbar-subtitle;
-    }
-}
-
-/* Justify modifier
- ========================================================================== */
-
-.uk-navbar-justify .uk-navbar-left,
-.uk-navbar-justify .uk-navbar-right,
-.uk-navbar-justify .uk-navbar-nav,
-.uk-navbar-justify .uk-navbar-nav > li,        // Nav item
-.uk-navbar-justify .uk-navbar-item,            // Content item
-.uk-navbar-justify .uk-navbar-toggle {
-    flex-grow: 1;
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-.uk-navbar-primary {
-    @if meta.mixin-exists('hook-navbar-primary') {
-        @include hook-navbar-primary;
-    }
-}
-
-.uk-navbar-transparent {
-    @if meta.mixin-exists('hook-navbar-transparent') {
-        @include hook-navbar-transparent;
-    }
-}
-
-.uk-navbar-sticky {
-    @if meta.mixin-exists('hook-navbar-sticky') {
-        @include hook-navbar-sticky;
-    }
-}
-
-
-/* Dropdown
- ========================================================================== */
-
-/*
- * Adopts `uk-drop`
- * 1. Set a default width
- * 2. Style
- */
-
-.uk-navbar-dropdown {
-    --uk-inverse: #{$navbar-dropdown-color-mode};
-    background: var(--navbar-dropdown-background);
-    box-sizing: border-box; /* 3 */
-    color: var(--navbar-dropdown-color);
-    display: block; /* 1 */
-    padding: var(--navbar-dropdown-padding); /* 4 */
-    position: absolute; /* 2 */
-    width: var(--navbar-dropdown-width);
-    z-index: var(--navbar-dropdown-z-index);
-    @if meta.mixin-exists('hook-navbar-dropdown') {
-        @include hook-navbar-dropdown;
-    }
-}
-
-/* Hide */
-.uk-navbar-dropdown.uk-hidden {
-    display: none;
-}
-
-/*
- * Transform origin
- */
-
-[class*='uk-navbar-dropdown-left-top'] {
-    transform-origin: 100% 0;
-}
-
-[class*='uk-navbar-dropdown-bottom'] {
-
-}
-
-[class*='uk-navbar-dropdown-left'] {
-
-}
-
-[class*='uk-navbar-dropdown-right-top'] {
-    transform-origin: 0 0;
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-navbar-dropdown > :last-child { margin-bottom: 0; }
-
-// Color Mode
-@if $navbar-dropdown-color-mode == light {
-    .uk-navbar-dropdown:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $navbar-dropdown-color-mode == dark {
-    .uk-navbar-dropdown:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-@if $navbar-dropdown-color-mode != $inverse-global-color-mode {
-    .uk-navbar-dropdown :focus-visible {
-        outline-color: var(--navbar-dropdown-focus-outline) !important;
-    }
-}
-
-/*
- * Grid
- * Adopts `uk-grid`
- */
-
-/* Gutter Horizontal */
-.uk-navbar-dropdown .uk-drop-grid {
-    margin-left: calc(var(--navbar-dropdown-grid-gutter-horizontal) * -1);
-}
-
-.uk-navbar-dropdown .uk-drop-grid > * {
-    padding-left: var(--navbar-dropdown-grid-gutter-horizontal);
-}
-
-/* Gutter Vertical */
-.uk-navbar-dropdown .uk-drop-grid > .uk-grid-margin {
-    margin-top: var(--navbar-dropdown-grid-gutter-vertical);
-}
-
-/*
- * Width modifier
- */
-
-.uk-navbar-dropdown-width-2:not(.uk-drop-stack) {
-    width: calc(var(--navbar-dropdown-width) * 2);
-}
-
-.uk-navbar-dropdown-width-3:not(.uk-drop-stack) {
-    width: calc(var(--navbar-dropdown-width) * 3);
-}
-
-.uk-navbar-dropdown-width-4:not(.uk-drop-stack) {
-    width: calc(var(--navbar-dropdown-width) * 4);
-}
-
-.uk-navbar-dropdown-width-5:not(.uk-drop-stack) {
-    width: calc(var(--navbar-dropdown-width) * 5);
-}
-
-
-/* Dropdown Nav
- * Adopts `uk-nav`
- ========================================================================== */
-
-.uk-navbar-dropdown-nav {
-    @if meta.mixin-exists('hook-navbar-dropdown-nav') {
-        @include hook-navbar-dropdown-nav;
-    }
-}
-
-/*
- * Items
- */
-
-.uk-navbar-dropdown-nav > li > a {
-    color: var(--navbar-dropdown-nav-item-color);
-    @if meta.mixin-exists('hook-navbar-dropdown-nav-item') {
-        @include hook-navbar-dropdown-nav-item;
-    }
-}
-
-/* Hover */
-.uk-navbar-dropdown-nav > li > a:hover {
-    color: var(--navbar-dropdown-nav-item-hover-color);
-    @if meta.mixin-exists('hook-navbar-dropdown-nav-item-hover') {
-        @include hook-navbar-dropdown-nav-item-hover;
-    }
-}
-
-/* Active */
-.uk-navbar-dropdown-nav > li.uk-active > a {
-    color: var(--navbar-dropdown-nav-item-active-color);
-    @if meta.mixin-exists('hook-navbar-dropdown-nav-item-active') {
-        @include hook-navbar-dropdown-nav-item-active;
-    }
-}
-
-/*
- * Subtitle
- */
-
-.uk-navbar-dropdown-nav .uk-nav-subtitle {
-    font-size: var(--navbar-dropdown-nav-subtitle-font-size);
-    @if meta.mixin-exists('hook-navbar-dropdown-nav-subtitle') {
-        @include hook-navbar-dropdown-nav-subtitle;
-    }
-}
-
-/*
- * Header
- */
-
-.uk-navbar-dropdown-nav .uk-nav-header {
-    color: var(--navbar-dropdown-nav-header-color);
-    @if meta.mixin-exists('hook-navbar-dropdown-nav-header') {
-        @include hook-navbar-dropdown-nav-header;
-    }
-}
-
-/*
- * Divider
- */
-
-.uk-navbar-dropdown-nav .uk-nav-divider {
-    border-top: var(--navbar-dropdown-nav-divider-border-width) solid var(--navbar-dropdown-nav-divider-border);
-    @if meta.mixin-exists('hook-navbar-dropdown-nav-divider') {
-        @include hook-navbar-dropdown-nav-divider;
-    }
-}
-
-/*
- * Sublists
- */
-
-.uk-navbar-dropdown-nav .uk-nav-sub a {
-    color: var(--navbar-dropdown-nav-sublist-item-color);
-}
-
-.uk-navbar-dropdown-nav .uk-nav-sub a:hover,
-.uk-navbar-dropdown-nav .uk-nav-sub a:focus {
-    color: var(--navbar-dropdown-nav-sublist-item-hover-color);
-}
-
-.uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a {
-    color: var(--navbar-dropdown-nav-sublist-item-active-color);
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-navbar-misc') {
-    @include hook-navbar-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --navbar-background: var(--global-muted-background);
-    --navbar-gap: #{$navbar-gap};
-    --navbar-nav-gap: #{$navbar-nav-gap};
-    --navbar-gap-m: #{$navbar-gap-m};
-    --navbar-nav-gap-m: #{$navbar-nav-gap-m};
-    --navbar-nav-item-height: #{$navbar-nav-item-height};
-    --navbar-nav-item-padding-horizontal: #{$navbar-nav-item-padding-horizontal};
-    --navbar-nav-item-padding-horizontal-m: #{$navbar-nav-item-padding-horizontal-m};
-    --navbar-nav-item-color: var(--global-muted-color);
-    --navbar-nav-item-font-size: var(--global-font-size);
-    --navbar-nav-item-font-family: var(--global-font-family);
-    --navbar-nav-item-hover-color: var(--global-color);
-    --navbar-nav-item-onclick-color: var(--global-emphasis-color);
-    --navbar-nav-item-active-color: var(--global-emphasis-color);
-    --navbar-parent-icon-margin-left: #{$navbar-parent-icon-margin-left};
-    --navbar-item-padding-horizontal: #{$navbar-item-padding-horizontal};
-    --navbar-item-padding-horizontal-m: #{$navbar-item-padding-horizontal-m};
-    --navbar-item-color: var(--global-color);
-    --navbar-toggle-color: var(--global-muted-color);
-    --navbar-toggle-hover-color: var(--global-color);
-    --navbar-subtitle-font-size: var(--global-small-font-size);
-    --navbar-dropdown-margin: #{$navbar-dropdown-margin};
-    --navbar-dropdown-padding: #{$navbar-dropdown-padding};
-    --navbar-dropdown-width: #{$navbar-dropdown-width};
-    --navbar-dropdown-background: var(--global-muted-background);
-    --navbar-dropdown-color: var(--global-color);
-    --navbar-dropdown-focus-outline: var(--base-focus-outline);
-    --navbar-dropdown-z-index: #{$navbar-dropdown-z-index};
-    --navbar-dropdown-grid-gutter-horizontal: var(--global-gutter);
-    --navbar-dropdown-grid-gutter-vertical: var(--navbar-dropdown-grid-gutter-horizontal);
-    --navbar-dropdown-nav-item-color: var(--global-muted-color);
-    --navbar-dropdown-nav-item-hover-color: var(--global-color);
-    --navbar-dropdown-nav-item-active-color: var(--global-emphasis-color);
-    --navbar-dropdown-nav-subtitle-font-size: var(--global-small-font-size);
-    --navbar-dropdown-nav-header-color: var(--global-emphasis-color);
-    --navbar-dropdown-nav-divider-border-width: var(--global-border-width);
-    --navbar-dropdown-nav-divider-border: var(--global-border);
-    --navbar-dropdown-nav-sublist-item-color: var(--global-muted-color);
-    --navbar-dropdown-nav-sublist-item-hover-color: var(--global-color);
-    --navbar-dropdown-nav-sublist-item-active-color: var(--global-emphasis-color);
-
-    // Inverse
-    --inverse-navbar-background: var(--inverse-global-muted-background);
-    --inverse-navbar-nav-item-color: var(--inverse-global-muted-color);
-    --inverse-navbar-nav-item-hover-color: var(--inverse-global-color);
-    --inverse-navbar-nav-item-onclick-color: var(--inverse-global-emphasis-color);
-    --inverse-navbar-nav-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-navbar-item-color: var(--inverse-global-color);
-    --inverse-navbar-toggle-color: var(--inverse-global-muted-color);
-    --inverse-navbar-toggle-hover-color: var(--inverse-global-color);
-    --inverse-navbar-dropdown-background: var(--inverse-global-muted-background);
-    --inverse-navbar-dropdown-color: var(--inverse-global-muted-color);
-    --inverse-navbar-dropdown-nav-item-color: var(--inverse-global-muted-color);
-    --inverse-navbar-dropdown-nav-item-hover-color: var(--inverse-global-color);
-    --inverse-navbar-dropdown-nav-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-navbar-dropdown-nav-header-color: var(--inverse-global-emphasis-color);
-    --inverse-navbar-dropdown-nav-divider-border: var(--inverse-global-border);
-    --inverse-navbar-dropdown-nav-sublist-item-color: var(--inverse-global-muted-color);
-    --inverse-navbar-dropdown-nav-sublist-item-hover-color: var(--inverse-global-color);
-    --inverse-navbar-dropdown-nav-sublist-item-active-color: var(--inverse-global-emphasis-color);
-}