@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/nav.scss

@@ -1,576 +0,0 @@
-// Name:            Nav
-// Description:     Defines styles for list navigations
-//
-// Component:       `uk-nav`
-//
-// Sub-objects:     `uk-nav-header`
-//                  `uk-nav-divider`
-//                  `uk-nav-sub`
-//
-// Modifiers:       `uk-nav-parent-icon`
-//                  `uk-nav-default`
-//                  `uk-nav-primary`
-//                  `uk-nav-center`,
-//                  `uk-nav-divider`
-//
-// States:          `uk-active`
-//                  `uk-parent`
-//                  `uk-open`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Nav
- ========================================================================== */
-
-/*
- * Reset
- */
-
-.uk-nav,
-.uk-nav ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-/*
- * 1. Center content vertically, e.g. an icon
- * 2. Imitate white space gap when using flexbox
- * 3. Reset link
- */
-
-.uk-nav li > a,
-.uk-nav-item > a {
-    align-items: center;
-    column-gap: 0.25em; /* 2 */
-    display: flex; /* 1 */
-    text-decoration: none; /* 3 */
-}
-
-/*
- * Items
- * Must target `a` elements to exclude other elements (e.g. lists)
- */
-
-.uk-nav > li > a,
-.uk-nav > .uk-nav-item > a {
-    padding: var(--nav-item-padding-vertical) var(--nav-item-padding-horizontal);
-}
-
-.uk-nav-item {
-    position: relative;
-    white-space: nowrap;
-}
-
-/* Disabled */
-.uk-nav-item.uk-disabled {
-    cursor: not-allowed;
-    opacity: 0.85;
-}
-
-
-/* Modes, elements etc.
- ========================================================================== */
-
-.uk-nav {
-    // Overflow ellipsis
-    &-overflow {
-        display: flex;
-
-        &-item {
-            flex: none;
-        }
-    }
-
-    &-hidden,
-    &-submenu-hidden {
-        display: none;
-    }
-
-    &-vertical.uk-nav-sub,
-    &-vertical-left.uk-nav-sub,
-    &-vertical-right.uk-nav-sub {
-        border-right: 0;
-        max-height: calc(100vh - 100px);
-        min-width: 160px;
-        overflow: hidden;
-        padding: 0;
-
-        &:not([class*='-active']) {
-            overflow: hidden auto;
-        }
-
-        .uk-nav-item {
-            border-right: 0;
-            left: 0;
-            margin-left: 0;
-
-            &::after {
-                border-right: 0;
-            }
-        }
-
-        > .uk-nav-item,
-        > .uk-nav-submenu {
-            transform-origin: 0 0;
-        }
-    }
-}
-
-
-/* Submenu
- ========================================================================== */
-
-.uk-nav-submenu {
-    &-title {
-        align-items: center;
-        column-gap: 0.25em; /* 2 */
-        cursor: pointer;
-        display: flex; /* 1 */
-        padding: var(--nav-item-padding-vertical) var(--nav-item-padding-horizontal);
-        position: relative;
-        text-decoration: none; /* 3 */
-        white-space: nowrap;
-
-        /* 4 */
-        > * {
-            flex: none;
-        }
-
-        /* 4 */
-
-        /* Remove default focus style */
-        .uk-nav-submenu-title:focus {
-            outline: none;
-        }
-    }
-
-    &-arrow {
-        color: var(--nav-default-item-color);
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        transition: transform var(--transition-duration) var(--ease-in-out);
-        width: 10px;
-
-        &::before,
-        &::after {
-            background-color: currentColor;
-            border-radius: 2px;
-            content: '';
-            height: 1.5px;
-            position: absolute;
-            transition: background var(--transition-duration) var(--ease-in-out),
-            transform var(--transition-duration) var(--ease-in-out),
-            top var(--transition-duration) var(--ease-in-out),
-            color var(--transition-duration) var(--ease-in-out);
-            width: 6px;
-        }
-    }
-
-    &-vertical &-arrow {
-        // →
-        &::before {
-            transform: rotate(45deg) translateY(-2.5px);
-        }
-
-        &::after {
-            transform: rotate(-45deg) translateY(2.5px);
-        }
-    }
-
-    &-inline &-arrow {
-        // ↓
-        &::before {
-            transform: rotate(-45deg) translateX(2.5px);
-        }
-
-        &::after {
-            transform: rotate(45deg) translateX(-2.5px);
-        }
-    }
-
-    &-open.uk-nav-inline > &-title > &-arrow {
-        // ↑
-        transform: translateY(-2px);
-
-        &::after {
-            transform: rotate(-45deg) translateX(-2.5px);
-        }
-
-        &::before {
-            transform: rotate(45deg) translateX(2.5px);
-        }
-    }
-
-    &-horizontal &-arrow {
-        display: none;
-    }
-
-    &-popup {
-        position: absolute;
-        transform-origin: 0 0;
-
-        &::before {
-            content: ' ';
-            height: 100%;
-            inset: -7px 0 0;
-            opacity: 0.0001;
-            position: absolute;
-            width: 100%;
-            z-index: -1;
-        }
-    }
-
-    &-placement-right-top::before {
-        left: -7px;
-        top: 0;
-    }
-}
-
-
-/* Sublists
- ========================================================================== */
-
-/*
- * Level 2
- * `ul` needed for higher specificity to override padding
- */
-
-ul.uk-nav-sub {
-    padding: 0 0 0 var(--nav-sublist-padding-left);
-    @if meta.mixin-exists('hook-nav-sub') {
-        @include hook-nav-sub;
-    }
-}
-
-/*
- * Level 3 and deeper
- */
-
-.uk-nav-sub ul {
-    padding-left: var(--nav-sublist-deeper-padding-left);
-}
-
-/*
- * Items
- */
-
-.uk-nav-sub a {
-    padding: var(--nav-sublist-item-padding-vertical) 0;
-}
-
-
-/* Header + Item group title
- ========================================================================== */
-
-.uk-nav-header,
-.uk-nav-group-header {
-    font-size: var(--nav-header-font-size);
-    padding: var(--nav-header-padding-vertical) var(--nav-header-padding-horizontal);
-    text-transform: var(--nav-header-text-transform);
-    @if meta.mixin-exists('hook-nav-header') {
-        @include hook-nav-header;
-    }
-}
-
-.uk-nav-header:not(:first-child),
-.uk-nav-group-header:not(:first-child) {
-    margin-top: var(--nav-header-margin-top);
-}
-
-
-/* Divider
- ========================================================================== */
-
-.uk-nav-divider {
-    border-top: var(--nav-divider-border-width) solid var(--nav-divider-border);
-    margin: var(--nav-divider-margin-vertical) var(--nav-divider-margin-horizontal);
-    @if meta.mixin-exists('hook-nav-divider') {
-        @include hook-nav-divider;
-    }
-}
-
-
-/* Default modifier
- ========================================================================== */
-
-.uk-nav-default {
-    @if meta.mixin-exists('hook-nav-default') {
-        @include hook-nav-default;
-    }
-}
-
-/*
- * Items
- */
-
-.uk-nav-default > li > a {
-    color: var(--nav-default-item-color);
-    @if meta.mixin-exists('hook-nav-default-item') {
-        @include hook-nav-default-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-nav-default > li.uk-hover > a,
-.uk-nav-default > li > a:hover,
-.uk-nav-default > li > a:focus {
-    color: var(--nav-default-item-hover-color);
-    @if meta.mixin-exists('hook-nav-default-item-hover') {
-        @include hook-nav-default-item-hover;
-    }
-}
-
-/* Active */
-.uk-nav-default > li.uk-active > a {
-    color: var(--nav-default-item-active-color);
-    @if meta.mixin-exists('hook-nav-default-item-active') {
-        @include hook-nav-default-item-active;
-    }
-}
-
-/*
- * Header
- */
-
-.uk-nav-default .uk-nav-header {
-    color: var(--nav-default-header-color);
-    @if meta.mixin-exists('hook-nav-default-header') {
-        @include hook-nav-default-header;
-    }
-}
-
-/*
- * Divider
- */
-
-.uk-nav-default .uk-nav-divider {
-    border-top: var(--nav-default-divider-border-width) solid var(--nav-default-divider-border);
-    @if meta.mixin-exists('hook-nav-default-divider') {
-        @include hook-nav-default-divider;
-    }
-}
-
-/*
- * Sublists
- */
-
-.uk-nav-default .uk-nav-sub a {
-    color: var(--nav-default-sublist-item-color);
-}
-
-.uk-nav-default .uk-nav-sub a:hover,
-.uk-nav-default .uk-nav-sub a:focus {
-    color: var(--nav-default-sublist-item-hover-color);
-}
-
-.uk-nav-default .uk-nav-sub li.uk-active > a {
-    color: var(--nav-default-sublist-item-active-color);
-}
-
-
-/* Primary modifier
- ========================================================================== */
-
-.uk-nav-primary {
-    @if meta.mixin-exists('hook-nav-primary') {
-        @include hook-nav-primary;
-    }
-}
-
-/*
- * Items
- */
-
-.uk-nav-primary > li > a {
-    color: var(--nav-primary-item-color);
-    font-size: var(--nav-primary-item-font-size);
-    line-height: var(--nav-primary-item-line-height);
-    @if meta.mixin-exists('hook-nav-primary-item') {
-        @include hook-nav-primary-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-nav-primary > li.uk-hover > a,
-.uk-nav-primary > li > a:hover,
-.uk-nav-primary > li > a:focus {
-    color: var(--nav-primary-item-hover-color);
-    @if meta.mixin-exists('hook-nav-primary-item-hover') {
-        @include hook-nav-primary-item-hover;
-    }
-}
-
-/* Active */
-.uk-nav-primary > li.uk-active > a {
-    color: var(--nav-primary-item-active-color);
-    @if meta.mixin-exists('hook-nav-primary-item-active') {
-        @include hook-nav-primary-item-active;
-    }
-}
-
-/*
- * Header
- */
-
-.uk-nav-primary .uk-nav-header {
-    color: var(--nav-primary-header-color);
-    @if meta.mixin-exists('hook-nav-primary-header') {
-        @include hook-nav-primary-header;
-    }
-}
-
-/*
- * Divider
- */
-
-.uk-nav-primary .uk-nav-divider {
-    border-top: var(--nav-primary-divider-border-width) solid var(--nav-primary-divider-border);
-    @if meta.mixin-exists('hook-nav-primary-divider') {
-        @include hook-nav-primary-divider;
-    }
-}
-
-/*
- * Sublists
- */
-
-.uk-nav-primary .uk-nav-sub a {
-    color: var(--nav-primary-sublist-item-color);
-}
-
-.uk-nav-primary .uk-nav-sub a:hover,
-.uk-nav-primary .uk-nav-sub a:focus {
-    color: var(--nav-primary-sublist-item-hover-color);
-}
-
-.uk-nav-primary .uk-nav-sub li.uk-active > a {
-    color: var(--nav-primary-sublist-item-active-color);
-}
-
-
-/* Alignment modifier
- ========================================================================== */
-
-/*
- * 1. Center header
- * 2. Center items
- */
-
-/* 1 */
-.uk-nav-center {
-    text-align: center;
-}
-
-/* 2 */
-.uk-nav-center li > a {
-    justify-content: center;
-}
-
-/* Sublists */
-.uk-nav-center .uk-nav-sub,
-.uk-nav-center .uk-nav-sub ul {
-    padding-left: 0;
-}
-
-
-/* Style modifier
- ========================================================================== */
-
-.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
-    border-top: var(--nav-dividers-border-width) solid var(--nav-dividers-border);
-    margin-top: var(--nav-dividers-margin-top);
-    padding-top: var(--nav-dividers-margin-top);
-    @if meta.mixin-exists('hook-nav-dividers') {
-        @include hook-nav-dividers;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-nav-misc') {
-    @include hook-nav-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --nav-item-padding-horizontal: #{$nav-item-padding-horizontal};
-    --nav-item-padding-vertical: #{$nav-item-padding-vertical};
-    --nav-sublist-padding-vertical: #{$nav-sublist-padding-vertical};
-    --nav-sublist-padding-left: #{$nav-sublist-padding-left};
-    --nav-sublist-deeper-padding-left: #{$nav-sublist-deeper-padding-left};
-    --nav-sublist-item-padding-vertical: #{$nav-sublist-item-padding-vertical};
-    --nav-parent-icon-width: calc(var(--global-line-height) * 1em);
-    --nav-parent-icon-height: var(--nav-parent-icon-width);
-    --nav-parent-icon-color: var(--global-color);
-    --nav-header-padding-horizontal: var(--nav-item-padding-horizontal);
-    --nav-header-padding-vertical: var(--nav-item-padding-vertical);
-    --nav-header-font-size: var(--global-small-font-size);
-    --nav-header-text-transform: #{$nav-header-text-transform};
-    --nav-header-margin-top: var(--global-margin);
-    --nav-divider-border-width: var(--global-border-width);
-    --nav-divider-border: var(--global-border);
-    --nav-divider-margin-horizontal: #{$nav-divider-margin-horizontal};
-    --nav-divider-margin-vertical: #{$nav-divider-margin-vertical};
-    --nav-default-item-color: var(--global-muted-color);
-    --nav-default-item-hover-color: var(--global-color);
-    --nav-default-item-active-color: var(--global-emphasis-color);
-    --nav-default-item-disable-color: var(--global-muted-color);
-    --nav-default-header-color: var(--global-emphasis-color);
-    --nav-default-divider-border-width: var(--global-border-width);
-    --nav-default-divider-border: var(--global-border);
-    --nav-default-sublist-item-color: var(--global-muted-color);
-    --nav-default-sublist-item-hover-color: var(--global-color);
-    --nav-default-sublist-item-active-color: var(--global-emphasis-color);
-    --nav-default-sublist-item-disable-color: var(--global-muted-color);
-    --nav-primary-item-font-size: var(--global-large-font-size);
-    --nav-primary-item-line-height: var(--global-line-height);
-    --nav-primary-item-color: var(--global-muted-color);
-    --nav-primary-item-hover-color: var(--global-color);
-    --nav-primary-item-active-color: var(--global-emphasis-color);
-    --nav-primary-header-color: var(--global-emphasis-color);
-    --nav-primary-divider-border-width: var(--global-border-width);
-    --nav-primary-divider-border: var(--global-border);
-    --nav-primary-sublist-item-color: var(--global-muted-color);
-    --nav-primary-sublist-item-hover-color: var(--global-color);
-    --nav-primary-sublist-item-active-color: var(--global-emphasis-color);
-    --nav-dividers-margin-top: #{$nav-dividers-margin-top};
-    --nav-dividers-border-width: var(--global-border-width);
-    --nav-dividers-border: var(--global-border);
-
-    // Inverse
-    --inverse-nav-parent-icon-color: var(--inverse-global-color);
-    --inverse-nav-default-item-color: var(--inverse-global-muted-color);
-    --inverse-nav-default-item-hover-color: var(--inverse-global-color);
-    --inverse-nav-default-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-nav-default-header-color: var(--inverse-global-emphasis-color);
-    --inverse-nav-default-divider-border: var(--inverse-global-border);
-    --inverse-nav-default-sublist-item-color: var(--inverse-global-muted-color);
-    --inverse-nav-default-sublist-item-hover-color: var(--inverse-global-color);
-    --inverse-nav-default-sublist-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-nav-primary-item-color: var(--inverse-global-muted-color);
-    --inverse-nav-primary-item-hover-color: var(--inverse-global-color);
-    --inverse-nav-primary-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-nav-primary-header-color: var(--inverse-global-emphasis-color);
-    --inverse-nav-primary-divider-border: var(--inverse-global-border);
-    --inverse-nav-primary-sublist-item-color: var(--inverse-global-muted-color);
-    --inverse-nav-primary-sublist-item-hover-color: var(--inverse-global-color);
-    --inverse-nav-primary-sublist-item-active-color: var(--inverse-global-emphasis-color);
-}