@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/nav/_nav.scss

@@ -0,0 +1,583 @@
+// 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:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin nav-styles {
+    /* ========================================================================
+       Component: Nav
+     ========================================================================== */
+
+    /*
+     * Reset
+     */
+
+    .#{$prefix}-nav,
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-nav li > a,
+    .#{$prefix}-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)
+     */
+
+    .#{$prefix}-nav > li > a,
+    .#{$prefix}-nav > .#{$prefix}-nav-item > a {
+        padding: var(--nav-item-padding-vertical) var(--nav-item-padding-horizontal);
+    }
+
+    .#{$prefix}-nav-item {
+        position: relative;
+        white-space: nowrap;
+    }
+
+    /* Disabled */
+    .#{$prefix}-nav-item.#{$prefix}-disabled {
+        cursor: not-allowed;
+        opacity: 0.85;
+    }
+
+
+    /* Modes, elements etc.
+     ========================================================================== */
+
+    .#{$prefix}-nav {
+        // Overflow ellipsis
+        &-overflow {
+            display: flex;
+
+            &-item {
+                flex: none;
+            }
+        }
+
+        &-hidden,
+        &-submenu-hidden {
+            display: none;
+        }
+
+        &-vertical.#{$prefix}-nav-sub,
+        &-vertical-left.#{$prefix}-nav-sub,
+        &-vertical-right.#{$prefix}-nav-sub {
+            border-right: 0;
+            max-height: calc(100vh - 100px);
+            min-width: 160px;
+            overflow: hidden;
+            padding: 0;
+
+            &:not([class*='-active']) {
+                overflow: hidden auto;
+            }
+
+            .#{$prefix}-nav-item {
+                border-right: 0;
+                left: 0;
+                margin-left: 0;
+
+                &::after {
+                    border-right: 0;
+                }
+            }
+
+            > .#{$prefix}-nav-item,
+            > .#{$prefix}-nav-submenu {
+                transform-origin: 0 0;
+            }
+        }
+    }
+
+
+    /* Submenu
+     ========================================================================== */
+
+    .#{$prefix}-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 */
+            .#{$prefix}-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.#{$prefix}-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.#{$prefix}-nav-sub {
+        padding: 0 0 0 var(--nav-sublist-padding-left);
+        @if map.has-key($mixins, 'hook-nav-sub') {
+            @include meta.apply(map.get($mixins, 'hook-nav-sub'));
+        }
+    }
+
+    /*
+     * Level 3 and deeper
+     */
+
+    .#{$prefix}-nav-sub ul {
+        padding-left: var(--nav-sublist-deeper-padding-left);
+    }
+
+    /*
+     * Items
+     */
+
+    .#{$prefix}-nav-sub a {
+        padding: var(--nav-sublist-item-padding-vertical) 0;
+    }
+
+
+    /* Header + Item group title
+     ========================================================================== */
+
+    .#{$prefix}-nav-header,
+    .#{$prefix}-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 map.has-key($mixins, 'hook-nav-header') {
+            @include meta.apply(map.get($mixins, 'hook-nav-header'));
+        }
+    }
+
+    .#{$prefix}-nav-header:not(:first-child),
+    .#{$prefix}-nav-group-header:not(:first-child) {
+        margin-top: var(--nav-header-margin-top);
+    }
+
+
+    /* Divider
+     ========================================================================== */
+
+    .#{$prefix}-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 map.has-key($mixins, 'hook-nav-divider') {
+            @include meta.apply(map.get($mixins, 'hook-nav-divider'));
+        }
+    }
+
+
+    /* Default modifier
+     ========================================================================== */
+
+    .#{$prefix}-nav-default {
+        @if map.has-key($mixins, 'hook-nav-default') {
+            @include meta.apply(map.get($mixins, 'hook-nav-default'));
+        }
+    }
+
+    /*
+     * Items
+     */
+
+    .#{$prefix}-nav-default > li > a {
+        color: var(--nav-default-item-color);
+        @if map.has-key($mixins, 'hook-nav-default-item') {
+            @include meta.apply(map.get($mixins, 'hook-nav-default-item'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-nav-default > li.#{$prefix}-hover > a,
+    .#{$prefix}-nav-default > li > a:hover,
+    .#{$prefix}-nav-default > li > a:focus {
+        color: var(--nav-default-item-hover-color);
+        @if map.has-key($mixins, 'hook-nav-default-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-nav-default-item-hover'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-nav-default > li.#{$prefix}-active > a {
+        color: var(--nav-default-item-active-color);
+        @if map.has-key($mixins, 'hook-nav-default-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-nav-default-item-active'));
+        }
+    }
+
+    /*
+     * Header
+     */
+
+    .#{$prefix}-nav-default .#{$prefix}-nav-header {
+        color: var(--nav-default-header-color);
+        @if map.has-key($mixins, 'hook-nav-default-header') {
+            @include meta.apply(map.get($mixins, 'hook-nav-default-header'));
+        }
+    }
+
+    /*
+     * Divider
+     */
+
+    .#{$prefix}-nav-default .#{$prefix}-nav-divider {
+        border-top: var(--nav-default-divider-border-width) solid var(--nav-default-divider-border);
+        @if map.has-key($mixins, 'hook-nav-default-divider') {
+            @include meta.apply(map.get($mixins, 'hook-nav-default-divider'));
+        }
+    }
+
+    /*
+     * Sublists
+     */
+
+    .#{$prefix}-nav-default .#{$prefix}-nav-sub a {
+        color: var(--nav-default-sublist-item-color);
+    }
+
+    .#{$prefix}-nav-default .#{$prefix}-nav-sub a:hover,
+    .#{$prefix}-nav-default .#{$prefix}-nav-sub a:focus {
+        color: var(--nav-default-sublist-item-hover-color);
+    }
+
+    .#{$prefix}-nav-default .#{$prefix}-nav-sub li.#{$prefix}-active > a {
+        color: var(--nav-default-sublist-item-active-color);
+    }
+
+
+    /* Primary modifier
+     ========================================================================== */
+
+    .#{$prefix}-nav-primary {
+        @if map.has-key($mixins, 'hook-nav-primary') {
+            @include meta.apply(map.get($mixins, 'hook-nav-primary'));
+        }
+    }
+
+    /*
+     * Items
+     */
+
+    .#{$prefix}-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 map.has-key($mixins, 'hook-nav-primary-item') {
+            @include meta.apply(map.get($mixins, 'hook-nav-primary-item'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-nav-primary > li.#{$prefix}-hover > a,
+    .#{$prefix}-nav-primary > li > a:hover,
+    .#{$prefix}-nav-primary > li > a:focus {
+        color: var(--nav-primary-item-hover-color);
+        @if map.has-key($mixins, 'hook-nav-primary-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-nav-primary-item-hover'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-nav-primary > li.#{$prefix}-active > a {
+        color: var(--nav-primary-item-active-color);
+        @if map.has-key($mixins, 'hook-nav-primary-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-nav-primary-item-active'));
+        }
+    }
+
+    /*
+     * Header
+     */
+
+    .#{$prefix}-nav-primary .#{$prefix}-nav-header {
+        color: var(--nav-primary-header-color);
+        @if map.has-key($mixins, 'hook-nav-primary-header') {
+            @include meta.apply(map.get($mixins, 'hook-nav-primary-header'));
+        }
+    }
+
+    /*
+     * Divider
+     */
+
+    .#{$prefix}-nav-primary .#{$prefix}-nav-divider {
+        border-top: var(--nav-primary-divider-border-width) solid var(--nav-primary-divider-border);
+        @if map.has-key($mixins, 'hook-nav-primary-divider') {
+            @include meta.apply(map.get($mixins, 'hook-nav-primary-divider'));
+        }
+    }
+
+    /*
+     * Sublists
+     */
+
+    .#{$prefix}-nav-primary .#{$prefix}-nav-sub a {
+        color: var(--nav-primary-sublist-item-color);
+    }
+
+    .#{$prefix}-nav-primary .#{$prefix}-nav-sub a:hover,
+    .#{$prefix}-nav-primary .#{$prefix}-nav-sub a:focus {
+        color: var(--nav-primary-sublist-item-hover-color);
+    }
+
+    .#{$prefix}-nav-primary .#{$prefix}-nav-sub li.#{$prefix}-active > a {
+        color: var(--nav-primary-sublist-item-active-color);
+    }
+
+
+    /* Alignment modifier
+     ========================================================================== */
+
+    /*
+     * 1. Center header
+     * 2. Center items
+     */
+
+    /* 1 */
+    .#{$prefix}-nav-center {
+        text-align: center;
+    }
+
+    /* 2 */
+    .#{$prefix}-nav-center li > a {
+        justify-content: center;
+    }
+
+    /* Sublists */
+    .#{$prefix}-nav-center .#{$prefix}-nav-sub,
+    .#{$prefix}-nav-center .#{$prefix}-nav-sub ul {
+        padding-left: 0;
+    }
+
+
+    /* Style modifier
+     ========================================================================== */
+
+    .#{$prefix}-nav.#{$prefix}-nav-divider > :not(.#{$prefix}-nav-divider) + :not(.#{$prefix}-nav-header, .#{$prefix}-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 map.has-key($mixins, 'hook-nav-dividers') {
+            @include meta.apply(map.get($mixins, 'hook-nav-dividers'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-nav-misc') {
+        @include meta.apply(map.get($mixins, 'hook-nav-misc'));
+    }
+
+    @content;
+}
+
+@mixin nav-tokens {
+    --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);
+
+    @content;
+}
+
+@mixin nav-inverse-tokens {
+    --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);
+
+    @content;
+}

package/styles/navbar/_index.scss

@@ -0,0 +1,11 @@
+@use 'navbar' as *;
+
+$generate-tokens: true !default;
+
+@include navbar-styles;
+
+@if $generate-tokens {
+    :root {
+        @include navbar-tokens;
+    }
+}