@broxus/react-uikit 0.21.0 → 0.23.0

package/styles/navbar.scss

@@ -10,21 +10,19 @@
 //                  `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`
-//                  `uk-navbar-dropbar`
 //
 // Adopted:         `uk-navbar-dropdown` + Modifiers
 //                  `uk-navbar-dropdown-nav`
-//                  `uk-navbar-dropdown-grid`
 //                  `uk-navbar-toggle-icon`
 //
 // Modifiers:       `uk-navbar-primary`
 //                  `uk-navbar-transparent`
 //                  `uk-navbar-sticky`
-//                  `uk-navbar-dropdown-stack`
 //
 // States:          `uk-active`
 //                  `uk-parent`
@@ -34,6 +32,7 @@
 // ========================================================================
 
 @use 'sass:meta';
+@use 'sass:string';
 
 
 // Variables
@@ -53,9 +52,7 @@
 .uk-navbar {
     --uk-inverse: #{$navbar-color-mode};
     display: flex;
-
-    /* 1 */
-    position: relative;
+    position: relative; /* 1 */
     @if meta.mixin-exists('hook-navbar') {
         @include hook-navbar;
     }
@@ -85,33 +82,31 @@
     }
 }
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution (if Container component is used)
- */
-
-.uk-navbar-container > ::before,
-.uk-navbar-container > ::after {
-    display: none !important;
-}
-
-
 /* Groups
  ========================================================================== */
 
 /*
- * 1. Align navs and items vertically if they have a different height
- * 2. Note: IE 11 requires an extra `div` which affects the center selector
+ * 1. Stretch height if a sibling's height is expanded by its content
  */
 
 .uk-navbar-left,
 .uk-navbar-right,
-    /* 2. [class*='uk-navbar-center'], */
-.uk-navbar-center,
-.uk-navbar-center-left > *,
-.uk-navbar-center-right > * {
-    /* 1 */
-    align-items: center;
+[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))'); }
 }
 
 /*
@@ -119,10 +114,14 @@
  * 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 off-canvas
+ *    `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;
 }
@@ -130,39 +129,30 @@
 .uk-navbar-center:only-child {
     margin-left: auto;
     margin-right: auto;
-
-    /* 1 */
-    position: relative;
+    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%);
-
-    /* 2 */
-    width: max-content;
-
-    /* 3 */
-    z-index: calc(var(--global-z-index) + 10);
+    width: max-content; /* 2 */
+    z-index: calc(var(--global-z-index) - 10); /* 3 */
 }
 
-/* 4 */
 .uk-navbar-center-left,
 .uk-navbar-center-right {
-    position: absolute;
+    height: 100%; /* 4 */
+    position: absolute; /* 5 */
     top: 0;
 }
 
-.uk-navbar-center-left {
-    right: 100%;
-}
-
-.uk-navbar-center-right {
-    left: 100%;
-}
+.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;
@@ -174,22 +164,23 @@
  ========================================================================== */
 
 /*
- * 1. Reset list
+ * 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;
-
-    /* 1 */
-    margin: 0;
+    margin: 0; /* 2 */
+    max-width: 100%;
+    min-width: 1px;
     padding: 0;
+    white-space: nowrap;
 }
 
-.uk-navbar-nav .uk-nav-item {
-    display: inline-block;
-    flex: none;
-}
 
 /*
  * Allow items to wrap into the next line
@@ -199,68 +190,73 @@
 .uk-navbar-left,
 .uk-navbar-right,
 .uk-navbar-center:only-child {
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    white-space: nowrap;
 }
 
 /*
  * Items
  * 1. Center content vertically and horizontally
- * 2. Dimensions
- * 3. Style
- * 4. Required for `a`
+ * 2. Imitate white space gap when using flexbox
+ * 3. Dimensions
+ * 4. Style
+ * 5. Required for `a`
  */
 
-.uk-navbar-nav > li > a, /* Nav item */
-.uk-navbar-nav .uk-nav-item-rest,
-.uk-navbar-item, /* Content item */
-.uk-navbar-toggle { /* Clickable item */
+.uk-navbar-nav > li[class*='uk-nav-item'] > a,      /* Nav item */
+.uk-navbar-item,                                    /* Content item */
+.uk-navbar-toggle {                                 /* Clickable item */
     align-items: center;
-
-    /* 2 */
-    box-sizing: border-box;
-
-    /* 1 */
-    display: flex;
+    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;
-
-    /* 3 */
-    font-size: var(--navbar-nav-item-font-size);
+    font-size: var(--navbar-nav-item-font-size); /* 4 */
     justify-content: center;
     min-height: var(--navbar-nav-item-height);
-    padding: 0 var(--navbar-nav-item-padding-horizontal);
-
-    /* 4 */
-    text-decoration: none;
+    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 > a {
+.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 to focus state and if dropdown is opened
+ * Apply hover style also if dropdown is opened
  */
 
-.uk-navbar-nav > li:hover > a,
-.uk-navbar-nav > li > a:focus,
-.uk-navbar-nav > li > a.uk-open {
+.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);
-    outline: none;
     @if meta.mixin-exists('hook-navbar-nav-item-hover') {
         @include hook-navbar-nav-item-hover;
     }
 }
 
 /* OnClick */
-.uk-navbar-nav > li > a:active {
+.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;
@@ -268,7 +264,7 @@
 }
 
 /* Active */
-.uk-navbar-nav > li.uk-active > a {
+.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;
@@ -276,16 +272,37 @@
 }
 
 
+/* 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
  */
@@ -300,13 +317,14 @@
 
 .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:focus,
+.uk-navbar-toggle[aria-expanded='true'],
 .uk-navbar-toggle.uk-open {
     color: var(--navbar-toggle-hover-color);
     outline: none;
@@ -316,6 +334,13 @@
     }
 }
 
+/* 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`
@@ -327,9 +352,8 @@
     }
 }
 
-/* Hover + Focus */
-:hover > .uk-navbar-toggle-icon,
-:focus > .uk-navbar-toggle-icon {
+/* Hover */
+:hover > .uk-navbar-toggle-icon {
     @if meta.mixin-exists('hook-navbar-toggle-icon-hover') {
         @include hook-navbar-toggle-icon-hover;
     }
@@ -346,6 +370,18 @@
     }
 }
 
+/* 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
  ========================================================================== */
@@ -373,28 +409,19 @@
  ========================================================================== */
 
 /*
- * Adopts `uk-dropdown`
- * 1. Hide by default
- * 2. Set position
- * 3. Set a default width
- * 4. Style
+ * Adopts `uk-drop`
+ * 1. Set a default width
+ * 2. Style
  */
 
 .uk-navbar-dropdown {
+    --uk-inverse: #{$navbar-dropdown-color-mode};
     background: var(--navbar-dropdown-background);
-
-    /* 3 */
-    box-sizing: border-box;
+    box-sizing: border-box; /* 3 */
     color: var(--navbar-dropdown-color);
-
-    /* 1 */
-    display: block;
-
-    /* 4 */
-    padding: var(--navbar-dropdown-padding);
-
-    /* 2 */
-    position: absolute;
+    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') {
@@ -427,62 +454,70 @@
     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-grid {
+.uk-navbar-dropdown .uk-drop-grid {
     margin-left: calc(var(--navbar-dropdown-grid-gutter-horizontal) * -1);
 }
 
-.uk-navbar-dropdown-grid > * {
+.uk-navbar-dropdown .uk-drop-grid > * {
     padding-left: var(--navbar-dropdown-grid-gutter-horizontal);
 }
 
 /* Gutter Vertical */
-.uk-navbar-dropdown-grid > .uk-grid-margin {
+.uk-navbar-dropdown .uk-drop-grid > .uk-grid-margin {
     margin-top: var(--navbar-dropdown-grid-gutter-vertical);
 }
 
-/* Stack */
-.uk-navbar-dropdown-stack .uk-navbar-dropdown-grid > * {
-    width: 100% !important;
-}
-
 /*
  * Width modifier
  */
 
-.uk-navbar-dropdown-width-2:not(.uk-navbar-dropdown-stack) {
+.uk-navbar-dropdown-width-2:not(.uk-drop-stack) {
     width: calc(var(--navbar-dropdown-width) * 2);
 }
 
-.uk-navbar-dropdown-width-3:not(.uk-navbar-dropdown-stack) {
+.uk-navbar-dropdown-width-3:not(.uk-drop-stack) {
     width: calc(var(--navbar-dropdown-width) * 3);
 }
 
-.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) {
+.uk-navbar-dropdown-width-4:not(.uk-drop-stack) {
     width: calc(var(--navbar-dropdown-width) * 4);
 }
 
-.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) {
+.uk-navbar-dropdown-width-5:not(.uk-drop-stack) {
     width: calc(var(--navbar-dropdown-width) * 5);
 }
 
-/*
- * Dropbar modifier
- */
-
-.uk-navbar-dropdown-dropbar {
-    margin-bottom: var(--navbar-dropdown-dropbar-margin-bottom);
-    margin-top: var(--navbar-dropdown-dropbar-margin-top);
-    @if meta.mixin-exists('hook-navbar-dropdown-dropbar') {
-        @include hook-navbar-dropdown-dropbar;
-    }
-}
-
 
 /* Dropdown Nav
  * Adopts `uk-nav`
@@ -505,9 +540,8 @@
     }
 }
 
-/* Hover + Focus */
-.uk-navbar-dropdown-nav > li > a:hover,
-.uk-navbar-dropdown-nav > li > a:focus {
+/* 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;
@@ -522,6 +556,17 @@
     }
 }
 
+/*
+ * 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
  */
@@ -562,31 +607,6 @@
 }
 
 
-/* Dropbar
- ========================================================================== */
-
-.uk-navbar-dropbar {
-    background: var(--navbar-dropbar-background);
-    @if meta.mixin-exists('hook-navbar-dropbar') {
-        @include hook-navbar-dropbar;
-    }
-}
-
-/*
- * Slide modifier
- */
-
-.uk-navbar-dropbar-slide {
-    left: 0;
-    position: absolute;
-    right: 0;
-    z-index: var(--navbar-dropbar-z-index);
-    @if meta.mixin-exists('hook-navbar-dropbar-slide') {
-        @include hook-navbar-dropbar-slide;
-    }
-}
-
-
 // Hooks
 // ========================================================================
 
@@ -600,39 +620,45 @@
 
 :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-background: var(--global-muted-background);
-    --navbar-dropdown-color: var(--global-color);
     --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-dropbar-margin-top: #{$navbar-dropdown-dropbar-margin-top};
-    --navbar-dropdown-dropbar-margin-bottom: var(--navbar-dropdown-dropbar-margin-top);
     --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);
-    --navbar-dropbar-background: var(--navbar-dropdown-background);
-    --navbar-dropbar-z-index: #{$navbar-dropbar-z-index};
 
     // Inverse
     --inverse-navbar-background: var(--inverse-global-muted-background);
@@ -653,5 +679,4 @@
     --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);
-    --inverse-navbar-dropbar-background: var(--inverse-navbar-dropdown-background);
 }