@frankenstyle/uikit 0.0.1

package/src/scss/components/nav.scss

@@ -0,0 +1,533 @@
+@use "sass:meta";
+
+// Name:            Nav
+// Description:     Defines styles for list navigations
+//
+// Component:       `uk-nav`
+//
+// Sub-objects:     `uk-nav-parent-icon`
+//                  `uk-nav-header`
+//                  `uk-nav-divider`
+//                  `uk-nav-subtitle`
+//                  `uk-nav-sub`
+//
+// Modifiers:       `uk-nav-default`
+//                  `uk-nav-primary`
+//                  `uk-nav-secondary`
+//                  `uk-nav-medium`
+//                  `uk-nav-large`
+//                  `uk-nav-xlarge`
+//                  `uk-nav-center`,
+//                  `uk-nav-divider`
+//
+// States:          `uk-active`
+//                  `uk-parent`
+//                  `uk-open`
+//                  `uk-touch`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+
+
+
+
+
+
+
+$nav-medium-font-size:                           $nav-medium-font-size-m * 0.825 !default;    // 40px 0.714
+$nav-medium-font-size-m:                         $nav-medium-font-size-l * 0.875 !default;    // 3.5rem / 56px
+$nav-medium-font-size-l:                         4rem !default; // 64px
+
+$nav-large-font-size:                            $nav-large-font-size-m * 0.85 !default;      // 50px 0.78
+$nav-large-font-size-m:                          4rem !default; // 64px
+$nav-large-font-size-l:                          6rem !default; // 96px
+
+$nav-xlarge-font-size:                           4rem !default; // 64px
+$nav-xlarge-font-size-m:                         6rem !default; // 96px
+$nav-xlarge-font-size-l:                         8rem !default; // 128px
+
+
+
+/* ========================================================================
+   Component: Nav
+ ========================================================================== */
+
+/*
+ * Reset
+ */
+
+.uk-nav,
+.uk-nav ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/*
+* 1. Center content vertically, e.g. an icon
+* 2. Imitate white space gap when using flexbox
+* 3. Reset link
+ */
+
+.uk-nav li > a {
+    /* 1 */
+    display: flex;
+    align-items: center;
+    /* 2 */
+    column-gap: 0.25em;
+    /* 3*/
+    text-decoration: none;
+}
+
+/*
+ * Items
+ * Must target `a` elements to exclude other elements (e.g. lists)
+ */
+
+.uk-nav > li > a { padding: $nav-item-padding-vertical $nav-item-padding-horizontal; }
+
+
+/* Sublists
+ ========================================================================== */
+
+/*
+ * Level 2
+ * `ul` needed for higher specificity to override padding
+ */
+
+ul.uk-nav-sub {
+    padding: $nav-sublist-padding-vertical 0 $nav-sublist-padding-vertical $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: $nav-sublist-deeper-padding-left; }
+
+/*
+ * Items
+ */
+
+.uk-nav-sub a { padding: $nav-sublist-item-padding-vertical 0; }
+
+
+/* Parent icon
+ ========================================================================== */
+
+.uk-nav-parent-icon {
+    margin-left: auto;
+    transition: transform 0.3s ease-out;
+}
+
+.uk-nav > li.uk-open > a .uk-nav-parent-icon { transform: rotateX(180deg); }
+
+
+/* Header
+ ========================================================================== */
+
+.uk-nav-header {
+    padding: $nav-header-padding-vertical $nav-header-padding-horizontal;
+    text-transform: $nav-header-text-transform;
+    font-size: $nav-header-font-size;
+    @if(meta.mixin-exists(hook-nav-header)) {@include hook-nav-header();}
+}
+
+.uk-nav-header:not(:first-child) { margin-top: $nav-header-margin-top; }
+
+
+/* Divider
+ ========================================================================== */
+
+.uk-nav .uk-nav-divider {
+    margin: $nav-divider-margin-vertical $nav-divider-margin-horizontal;
+    @if(meta.mixin-exists(hook-nav-divider)) {@include hook-nav-divider();}
+}
+
+
+/* Default modifier
+ ========================================================================== */
+
+.uk-nav-default {
+    font-size: $nav-default-font-size;
+    line-height: $nav-default-line-height;
+    @if(meta.mixin-exists(hook-nav-default)) {@include hook-nav-default();}
+}
+
+/*
+ * Items
+ */
+
+.uk-nav-default > li > a {
+    color: $nav-default-item-color;
+    @if(meta.mixin-exists(hook-nav-default-item)) {@include hook-nav-default-item();}
+}
+
+/* Hover */
+.uk-nav-default > li > a:hover {
+    color: $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: $nav-default-item-active-color;
+    @if(meta.mixin-exists(hook-nav-default-item-active)) {@include hook-nav-default-item-active();}
+}
+
+/*
+ * Subtitle
+ */
+
+.uk-nav-default .uk-nav-subtitle {
+    font-size: $nav-default-subtitle-font-size;
+    @if(meta.mixin-exists(hook-nav-default-subtitle)) {@include hook-nav-default-subtitle();}
+}
+
+/*
+ * Header
+ */
+
+.uk-nav-default .uk-nav-header {
+    color: $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: $nav-default-divider-border-width solid $nav-default-divider-border;
+    @if(meta.mixin-exists(hook-nav-default-divider)) {@include hook-nav-default-divider();}
+}
+
+/*
+ * Sublists
+ */
+
+.uk-nav-default .uk-nav-sub {
+    font-size: $nav-default-sublist-font-size;
+    line-height: $nav-default-sublist-line-height;
+}
+
+.uk-nav-default .uk-nav-sub a { color: $nav-default-sublist-item-color; }
+
+.uk-nav-default .uk-nav-sub a:hover { color: $nav-default-sublist-item-hover-color; }
+
+.uk-nav-default .uk-nav-sub li.uk-active > a { color: $nav-default-sublist-item-active-color; }
+
+
+/* Primary modifier
+ ========================================================================== */
+
+.uk-nav-primary {
+    font-size: $nav-primary-font-size;
+    line-height: $nav-primary-line-height;
+    @if(meta.mixin-exists(hook-nav-primary)) {@include hook-nav-primary();}
+}
+
+/*
+ * Items
+ */
+
+.uk-nav-primary > li > a {
+    color: $nav-primary-item-color;
+    @if(meta.mixin-exists(hook-nav-primary-item)) {@include hook-nav-primary-item();}
+}
+
+/* Hover */
+.uk-nav-primary > li > a:hover {
+    color: $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: $nav-primary-item-active-color;
+    @if(meta.mixin-exists(hook-nav-primary-item-active)) {@include hook-nav-primary-item-active();}
+}
+
+/*
+ * Subtitle
+ */
+
+.uk-nav-primary .uk-nav-subtitle {
+    font-size: $nav-primary-subtitle-font-size;
+    @if(meta.mixin-exists(hook-nav-primary-subtitle)) {@include hook-nav-primary-subtitle();}
+}
+
+/*
+ * Header
+ */
+
+.uk-nav-primary .uk-nav-header {
+    color: $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: $nav-primary-divider-border-width solid $nav-primary-divider-border;
+    @if(meta.mixin-exists(hook-nav-primary-divider)) {@include hook-nav-primary-divider();}
+}
+
+/*
+ * Sublists
+ */
+
+.uk-nav-primary .uk-nav-sub {
+    font-size: $nav-primary-sublist-font-size;
+    line-height: $nav-primary-sublist-line-height;
+}
+
+.uk-nav-primary .uk-nav-sub a { color: $nav-primary-sublist-item-color; }
+
+.uk-nav-primary .uk-nav-sub a:hover { color: $nav-primary-sublist-item-hover-color; }
+
+.uk-nav-primary .uk-nav-sub li.uk-active > a { color: $nav-primary-sublist-item-active-color; }
+
+
+/* Secondary modifier
+ ========================================================================== */
+
+.uk-nav-secondary {
+    font-size: $nav-secondary-font-size;
+    line-height: $nav-secondary-line-height;
+    @if(meta.mixin-exists(hook-nav-secondary)) {@include hook-nav-secondary();}
+}
+
+/*
+ * Items
+ */
+
+.uk-nav-secondary > li > a {
+
+    color: $nav-secondary-item-color;
+    @if(meta.mixin-exists(hook-nav-secondary-item)) {@include hook-nav-secondary-item();}
+}
+
+/* Hover */
+.uk-nav-secondary > li > a:hover {
+    color: $nav-secondary-item-hover-color;
+    @if(meta.mixin-exists(hook-nav-secondary-item-hover)) {@include hook-nav-secondary-item-hover();}
+}
+
+/* Active */
+.uk-nav-secondary > li.uk-active > a {
+    color: $nav-secondary-item-active-color;
+    @if(meta.mixin-exists(hook-nav-secondary-item-active)) {@include hook-nav-secondary-item-active();}
+}
+
+/*
+ * Subtitle
+ */
+
+.uk-nav-secondary .uk-nav-subtitle {
+    font-size: $nav-secondary-subtitle-font-size;
+    color: $nav-secondary-subtitle-color;
+    @if(meta.mixin-exists(hook-nav-secondary-subtitle)) {@include hook-nav-secondary-subtitle();}
+}
+
+/* Hover */
+.uk-nav-secondary > li > a:hover .uk-nav-subtitle {
+    color: $nav-secondary-subtitle-hover-color;
+    @if(meta.mixin-exists(hook-nav-secondary-subtitle-hover)) {@include hook-nav-secondary-subtitle-hover();}
+}
+
+/* Active */
+.uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
+    color: $nav-secondary-subtitle-active-color;
+    @if(meta.mixin-exists(hook-nav-secondary-subtitle-active)) {@include hook-nav-secondary-subtitle-active();}
+}
+
+/*
+ * Header
+ */
+
+.uk-nav-secondary .uk-nav-header {
+    color: $nav-secondary-header-color;
+    @if(meta.mixin-exists(hook-nav-secondary-header)) {@include hook-nav-secondary-header();}
+}
+
+/*
+ * Divider
+ */
+
+.uk-nav-secondary .uk-nav-divider {
+    border-top: $nav-secondary-divider-border-width solid $nav-secondary-divider-border;
+    @if(meta.mixin-exists(hook-nav-secondary-divider)) {@include hook-nav-secondary-divider();}
+}
+
+/*
+ * Sublists
+ */
+
+.uk-nav-secondary .uk-nav-sub {
+    font-size: $nav-secondary-sublist-font-size;
+    line-height: $nav-secondary-sublist-line-height;
+}
+
+.uk-nav-secondary .uk-nav-sub a { color: $nav-secondary-sublist-item-color; }
+
+.uk-nav-secondary .uk-nav-sub a:hover { color: $nav-secondary-sublist-item-hover-color; }
+
+.uk-nav-secondary .uk-nav-sub li.uk-active > a { color: $nav-secondary-sublist-item-active-color; }
+
+
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Medium
+ */
+
+.uk-nav-medium {
+    font-size: $nav-medium-font-size;
+    line-height: $nav-medium-line-height;
+    @if(meta.mixin-exists(hook-nav-medium)) {@include hook-nav-medium();}
+}
+
+.uk-nav-large {
+    font-size: $nav-large-font-size;
+    line-height: $nav-large-line-height;
+    @if(meta.mixin-exists(hook-nav-large)) {@include hook-nav-large();}
+}
+
+.uk-nav-xlarge {
+    font-size: $nav-xlarge-font-size;
+    line-height: $nav-xlarge-line-height;
+    @if(meta.mixin-exists(hook-nav-xlarge)) {@include hook-nav-xlarge();}
+}
+
+/* Tablet Landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-nav-medium { font-size: $nav-medium-font-size-m; }
+    .uk-nav-large { font-size: $nav-large-font-size-m; }
+    .uk-nav-xlarge { font-size: $nav-xlarge-font-size-m; }
+
+}
+
+/* Laptop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-nav-medium { font-size: $nav-medium-font-size-l; }
+    .uk-nav-large { font-size: $nav-large-font-size-l; }
+    .uk-nav-xlarge { font-size: $nav-xlarge-font-size-l; }
+
+}
+
+
+/* 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; }
+
+/* Parent icon  */
+.uk-nav-center .uk-nav-parent-icon { margin-left: $nav-parent-icon-margin-left; }
+
+
+/* Style modifier
+ ========================================================================== */
+
+/*
+ * Divider
+ * Naming is in plural to prevent conflicts with divider sub object.
+ */
+
+.uk-nav.uk-nav-divider > :not(.uk-nav-header, .uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
+    margin-top: $nav-dividers-margin-top;
+    padding-top: $nav-dividers-margin-top;
+    border-top: $nav-dividers-border-width solid $nav-dividers-border;
+    @if(meta.mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(meta.mixin-exists(hook-nav-misc)) {@include hook-nav-misc();}
+
+// @mixin hook-nav-sub(){}
+// @mixin hook-nav-header(){}
+// @mixin hook-nav-divider(){}
+// @mixin hook-nav-default(){}
+// @mixin hook-nav-default-item(){}
+// @mixin hook-nav-default-item-hover(){}
+// @mixin hook-nav-default-item-active(){}
+// @mixin hook-nav-default-subtitle(){}
+// @mixin hook-nav-default-header(){}
+// @mixin hook-nav-default-divider(){}
+// @mixin hook-nav-primary(){}
+// @mixin hook-nav-primary-item(){}
+// @mixin hook-nav-primary-item-hover(){}
+// @mixin hook-nav-primary-item-active(){}
+// @mixin hook-nav-primary-subtitle(){}
+// @mixin hook-nav-primary-header(){}
+// @mixin hook-nav-primary-divider(){}
+// @mixin hook-nav-secondary(){}
+// @mixin hook-nav-secondary-item(){}
+// @mixin hook-nav-secondary-item-hover(){}
+// @mixin hook-nav-secondary-item-active(){}
+// @mixin hook-nav-secondary-subtitle(){}
+// @mixin hook-nav-secondary-subtitle-hover(){}
+// @mixin hook-nav-secondary-subtitle-active(){}
+// @mixin hook-nav-secondary-header(){}
+// @mixin hook-nav-secondary-divider(){}
+// @mixin hook-nav-medium(){}
+// @mixin hook-nav-large(){}
+// @mixin hook-nav-xlarge(){}
+// @mixin hook-nav-dividers(){}
+// @mixin hook-nav-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+
+
+
+
+// @mixin hook-inverse-nav-default-item(){}
+// @mixin hook-inverse-nav-default-item-hover(){}
+// @mixin hook-inverse-nav-default-item-active(){}
+// @mixin hook-inverse-nav-default-header(){}
+// @mixin hook-inverse-nav-default-divider(){}
+// @mixin hook-inverse-nav-primary-item(){}
+// @mixin hook-inverse-nav-primary-item-hover(){}
+// @mixin hook-inverse-nav-primary-item-active(){}
+// @mixin hook-inverse-nav-primary-header(){}
+// @mixin hook-inverse-nav-primary-divider(){}
+// @mixin hook-inverse-nav-secondary-item(){}
+// @mixin hook-inverse-nav-secondary-item-hover(){}
+// @mixin hook-inverse-nav-secondary-item-active(){}
+// @mixin hook-inverse-nav-secondary-subtitle(){}
+// @mixin hook-inverse-nav-secondary-subtitle-hover(){}
+// @mixin hook-inverse-nav-secondary-subtitle-active(){}
+// @mixin hook-inverse-nav-secondary-header(){}
+// @mixin hook-inverse-nav-secondary-divider(){}
+// @mixin hook-inverse-nav-dividers(){}