@frankenstyle/uikit 0.0.1

package/src/scss/components/navbar.scss

@@ -0,0 +1,579 @@
+@use "sass:meta";
+@use "sass:string";
+
+// 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-toggle`
+//                  `uk-navbar-subtitle`
+//                  `uk-navbar-dropbar`
+//
+// 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`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$navbar-gap:                                     0px !default; // Must have a unit because of `calc`
+
+$navbar-nav-gap:                                 0px !default; // Must have a unit because of `calc`
+
+
+
+
+
+
+
+
+
+
+
+
+/* ========================================================================
+   Component: Navbar
+ ========================================================================== */
+
+/*
+ * 1. Create position context to center navbar group
+ */
+
+.uk-navbar {
+    display: flex;
+    /* 1 */
+    position: relative;
+    @if(meta.mixin-exists(hook-navbar)) {@include hook-navbar();}
+}
+
+
+/* Container
+ ========================================================================== */
+
+.uk-navbar-container:not(.uk-navbar-transparent) {
+    background: $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"] {
+    display: flex;
+    gap: $navbar-gap;
+    /* 1 */
+    align-items: stretch;
+}
+
+/*
+ * 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 off-canvas
+ * 4. Stretch height if a sibling's height is expanded by its content
+ * 5. Align sub groups for centered navbar
+ */
+
+.uk-navbar-right { margin-left: auto; }
+
+.uk-navbar-center:only-child {
+    margin-left: auto;
+    margin-right: auto;
+    /* 1 */
+    position: relative;
+}
+
+.uk-navbar-center:not(:only-child) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    /* 2 */
+    width: max-content;
+    box-sizing: border-box;
+    /* 3 */
+    z-index: $global-z-index - 10;
+    /* 4 */
+    height: 100%;
+    align-items: stretch;
+}
+
+.uk-navbar-center-left,
+.uk-navbar-center-right {
+    /* 4 */
+    height: 100%;
+    /* 5 */
+    position: absolute;
+    top: 0;
+}
+
+.uk-navbar-center-left { right: string.unquote('calc(100% + #{$navbar-gap})'); }
+.uk-navbar-center-right { left: string.unquote('calc(100% + #{$navbar-gap})'); }
+
+[class*="uk-navbar-center-"] {
+    width: max-content;
+    box-sizing: border-box;
+}
+
+
+/* Nav
+ ========================================================================== */
+
+/*
+ * 1. Stretch height if a sibling's height is expanded by its content
+ * 2. Reset list
+ */
+
+.uk-navbar-nav {
+    display: flex;
+    gap: $navbar-nav-gap;
+    /* 1 */
+    align-items: stretch;
+    /* 2 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/*
+ * 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: wrap; }
+
+/*
+ * 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 > a,    // Nav item
+.uk-navbar-item,            // Content item
+.uk-navbar-toggle {         // Clickable item
+    /* 1 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 2 */
+    column-gap: 0.25em;
+    /* 3 */
+    box-sizing: border-box;
+    min-height: $navbar-nav-item-height;
+    /* 4 */
+    font-size: $navbar-nav-item-font-size;
+    font-family: $navbar-nav-item-font-family;
+    /* 5 */
+    text-decoration: none;
+}
+
+/*
+ * Nav items
+ * 1. Stretch height if a sibling's height is expanded by its content
+ * 2. Reset list
+ */
+
+.uk-navbar-nav > li > a {
+    /* 1 */
+    height: 100%;
+    /* 2 */
+    padding: 0 $navbar-nav-item-padding-horizontal;
+    color: $navbar-nav-item-color;
+    @if(meta.mixin-exists(hook-navbar-nav-item)) {@include hook-navbar-nav-item();}
+}
+
+/*
+ * Hover
+ * Apply hover style also if dropdown is opened
+ */
+
+.uk-navbar-nav > li:hover > a,
+.uk-navbar-nav > li > a[aria-expanded="true"] {
+    color: $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 > a:active {
+    color: $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.uk-active > a {
+    color: $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: $navbar-parent-icon-margin-left;
+    transition: transform 0.3s ease-out;
+}
+
+.uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon { transform: rotateX(180deg); }
+
+
+/* Item
+ ========================================================================== */
+
+.uk-navbar-item {
+    padding: 0 $navbar-item-padding-horizontal;
+    color: $navbar-item-color;
+    @if(meta.mixin-exists(hook-navbar-item)) {@include hook-navbar-item();}
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-navbar-item > :last-child { margin-bottom: 0; }
+
+
+/* Toggle
+ ========================================================================== */
+
+.uk-navbar-toggle {
+    padding: 0 $navbar-item-padding-horizontal;
+    color: $navbar-toggle-color;
+    @if(meta.mixin-exists(hook-navbar-toggle)) {@include hook-navbar-toggle();}
+}
+
+.uk-navbar-toggle:hover,
+.uk-navbar-toggle[aria-expanded="true"] {
+    color: $navbar-toggle-hover-color;
+    text-decoration: none;
+    @if(meta.mixin-exists(hook-navbar-toggle-hover)) {@include hook-navbar-toggle-hover();}
+}
+
+/*
+ * 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: $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-position-offset: #{$navbar-dropdown-margin};
+    --uk-position-shift-offset: #{$navbar-dropdown-shift-margin};
+    --uk-position-viewport-offset: #{$navbar-dropdown-viewport-margin};
+    --uk-inverse: #{$navbar-dropdown-color-mode};
+    /* 1 */
+    width: $navbar-dropdown-width;
+    /* 2 */
+    padding: $navbar-dropdown-padding;
+    background: $navbar-dropdown-background;
+    color: $navbar-dropdown-color;
+    @if(meta.mixin-exists(hook-navbar-dropdown)) {@include hook-navbar-dropdown();}
+}
+
+/*
+ * 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: $navbar-dropdown-focus-outline !important;
+}
+}
+
+/*
+ * Grid
+ * Adopts `uk-grid`
+ */
+
+/* Gutter Horizontal */
+.uk-navbar-dropdown .uk-drop-grid { margin-left: (-$navbar-dropdown-grid-gutter-horizontal); }
+.uk-navbar-dropdown .uk-drop-grid > * { padding-left: $navbar-dropdown-grid-gutter-horizontal; }
+
+/* Gutter Vertical */
+.uk-navbar-dropdown .uk-drop-grid > .uk-grid-margin { margin-top: $navbar-dropdown-grid-gutter-vertical; }
+
+/*
+ * Width modifier
+ */
+
+.uk-navbar-dropdown-width-2:not(.uk-drop-stack) { width: ($navbar-dropdown-width * 2); }
+.uk-navbar-dropdown-width-3:not(.uk-drop-stack) { width: ($navbar-dropdown-width * 3); }
+.uk-navbar-dropdown-width-4:not(.uk-drop-stack) { width: ($navbar-dropdown-width * 4); }
+.uk-navbar-dropdown-width-5:not(.uk-drop-stack) { width: ($navbar-dropdown-width * 5); }
+
+/*
+ * Size modifier
+ */
+
+.uk-navbar-dropdown-large {
+    --uk-position-shift-offset: #{$navbar-dropdown-large-shift-margin};
+    padding: $navbar-dropdown-large-padding;
+    @if(meta.mixin-exists(hook-navbar-dropdown-large)) {@include hook-navbar-dropdown-large();}
+}
+
+/*
+ * Dropbar modifier
+ * 1. Reset dropdown width to prevent to early shifting
+ * 2. Reset style
+ * 3. Padding
+ */
+
+.uk-navbar-dropdown-dropbar {
+    /* 1 */
+    width: auto;
+    /* 2 */
+    background: transparent;
+    /* 3 */
+    padding: $navbar-dropdown-dropbar-padding-top 0 $navbar-dropdown-dropbar-padding-bottom 0;
+    --uk-position-offset: #{$navbar-dropdown-dropbar-margin};
+    --uk-position-shift-offset: #{$navbar-dropdown-dropbar-shift-margin};
+    --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin};
+    @if(meta.mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin-s}; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin-m}; }
+
+}
+
+.uk-navbar-dropdown-dropbar-large {
+    --uk-position-shift-offset: #{$navbar-dropdown-dropbar-large-shift-margin};
+    padding-top: $navbar-dropdown-dropbar-large-padding-top;
+    padding-bottom: $navbar-dropdown-dropbar-large-padding-bottom;
+    @if(meta.mixin-exists(hook-navbar-dropdown-dropbar-large)) {@include hook-navbar-dropdown-dropbar-large();}
+}
+
+
+/* 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: $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: $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: $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: $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: $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: $navbar-dropdown-nav-divider-border-width solid $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: $navbar-dropdown-nav-sublist-item-color; }
+
+.uk-navbar-dropdown-nav .uk-nav-sub a:hover { color: $navbar-dropdown-nav-sublist-item-hover-color; }
+
+.uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a { color: $navbar-dropdown-nav-sublist-item-active-color; }
+
+
+/* Dropbar
+ ========================================================================== */
+
+/*
+ * Adopts `uk-dropnav-dropbar`
+ */
+
+.uk-navbar-dropbar {
+    @if(meta.mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(meta.mixin-exists(hook-navbar-misc)) {@include hook-navbar-misc();}
+
+// @mixin hook-navbar(){}
+// @mixin hook-navbar-container(){}
+// @mixin hook-navbar-nav-item(){}
+// @mixin hook-navbar-nav-item-hover(){}
+// @mixin hook-navbar-nav-item-onclick(){}
+// @mixin hook-navbar-nav-item-active(){}
+// @mixin hook-navbar-item(){}
+// @mixin hook-navbar-toggle(){}
+// @mixin hook-navbar-toggle-hover(){}
+// @mixin hook-navbar-toggle-icon(){}
+// @mixin hook-navbar-toggle-icon-hover(){}
+// @mixin hook-navbar-subtitle(){}
+// @mixin hook-navbar-primary(){}
+// @mixin hook-navbar-transparent(){}
+// @mixin hook-navbar-sticky(){}
+// @mixin hook-navbar-dropdown(){}
+// @mixin hook-navbar-dropdown-large(){}
+// @mixin hook-navbar-dropdown-dropbar(){}
+// @mixin hook-navbar-dropdown-dropbar-large(){}
+// @mixin hook-navbar-dropdown-nav(){}
+// @mixin hook-navbar-dropdown-nav-item(){}
+// @mixin hook-navbar-dropdown-nav-item-hover(){}
+// @mixin hook-navbar-dropdown-nav-item-active(){}
+// @mixin hook-navbar-dropdown-nav-subtitle(){}
+// @mixin hook-navbar-dropdown-nav-header(){}
+// @mixin hook-navbar-dropdown-nav-divider(){}
+// @mixin hook-navbar-dropbar(){}
+// @mixin hook-navbar-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+
+// @mixin hook-inverse-navbar-nav-item(){}
+// @mixin hook-inverse-navbar-nav-item-hover(){}
+// @mixin hook-inverse-navbar-nav-item-onclick(){}
+// @mixin hook-inverse-navbar-nav-item-active(){}
+// @mixin hook-inverse-navbar-item(){}
+// @mixin hook-inverse-navbar-toggle(){}
+// @mixin hook-inverse-navbar-toggle-hover(){}