juicelang-theme 0.1.0

data/_sass/uikit/components/nav.scss

@@ -0,0 +1,555 @@
+// 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-center`,
+//                  `uk-nav-divider`
+//
+// States:          `uk-active`
+//                  `uk-parent`
+//                  `uk-open`
+//                  `uk-touch`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$nav-item-padding-vertical:                      5px !default;
+$nav-item-padding-horizontal:                    0 !default;
+
+$nav-sublist-padding-vertical:                   5px !default;
+$nav-sublist-padding-left:                       15px !default;
+$nav-sublist-deeper-padding-left:                15px !default;
+$nav-sublist-item-padding-vertical:              2px !default;
+
+$nav-parent-icon-margin-left:                    4px !default;
+
+$nav-header-padding-vertical:                    $nav-item-padding-vertical !default;
+$nav-header-padding-horizontal:                  $nav-item-padding-horizontal !default;
+$nav-header-font-size:                           $global-small-font-size !default;
+$nav-header-text-transform:                      uppercase !default;
+$nav-header-margin-top:                          $global-margin !default;
+
+$nav-divider-margin-vertical:                    5px !default;
+$nav-divider-margin-horizontal:                  0 !default;
+
+$nav-default-font-size:                          $global-font-size !default;
+$nav-default-line-height:                        $global-line-height !default;
+$nav-default-item-color:                         $global-muted-color !default;
+$nav-default-item-hover-color:                   $global-color !default;
+$nav-default-item-active-color:                  $global-emphasis-color !default;
+$nav-default-subtitle-font-size:                 $global-small-font-size !default;
+$nav-default-header-color:                       $global-emphasis-color !default;
+$nav-default-divider-border-width:               $global-border-width !default;
+$nav-default-divider-border:                     $global-border !default;
+$nav-default-sublist-font-size:                  $nav-default-font-size !default;
+$nav-default-sublist-line-height:                $nav-default-line-height !default;
+$nav-default-sublist-item-color:                 $global-muted-color !default;
+$nav-default-sublist-item-hover-color:           $global-color !default;
+$nav-default-sublist-item-active-color:          $global-emphasis-color !default;
+
+$nav-primary-font-size:                          $global-large-font-size !default;
+$nav-primary-line-height:                        $global-line-height !default;
+$nav-primary-item-color:                         $global-muted-color !default;
+$nav-primary-item-hover-color:                   $global-color !default;
+$nav-primary-item-active-color:                  $global-emphasis-color !default;
+$nav-primary-subtitle-font-size:                 $global-medium-font-size !default;
+$nav-primary-header-color:                       $global-emphasis-color !default;
+$nav-primary-divider-border-width:               $global-border-width !default;
+$nav-primary-divider-border:                     $global-border !default;
+$nav-primary-sublist-font-size:                  $global-medium-font-size !default;
+$nav-primary-sublist-line-height:                $global-line-height !default;
+$nav-primary-sublist-item-color:                 $global-muted-color !default;
+$nav-primary-sublist-item-hover-color:           $global-color !default;
+$nav-primary-sublist-item-active-color:          $global-emphasis-color !default;
+
+$nav-secondary-font-size:                        $global-font-size !default;
+$nav-secondary-line-height:                      $global-line-height !default;
+$nav-secondary-item-color:                       $global-emphasis-color !default;
+$nav-secondary-item-hover-color:                 $global-emphasis-color !default;
+$nav-secondary-item-active-color:                $global-emphasis-color !default;
+$nav-secondary-subtitle-font-size:               $global-small-font-size !default;
+$nav-secondary-subtitle-color:                   $global-muted-color !default;
+$nav-secondary-subtitle-hover-color:             $global-color !default;
+$nav-secondary-subtitle-active-color:            $global-emphasis-color !default;
+$nav-secondary-header-color:                     $global-emphasis-color !default;
+$nav-secondary-divider-border-width:             $global-border-width !default;
+$nav-secondary-divider-border:                   $global-border !default;
+$nav-secondary-sublist-font-size:                $global-small-font-size !default;
+$nav-secondary-sublist-line-height:              $global-line-height !default;
+$nav-secondary-sublist-item-color:               $global-muted-color !default;
+$nav-secondary-sublist-item-hover-color:         $global-color !default;
+$nav-secondary-sublist-item-active-color:        $global-emphasis-color !default;
+
+$nav-dividers-margin-top:                        5px !default;
+$nav-dividers-border-width:                      $global-border-width !default;
+$nav-dividers-border:                            $global-border !default;
+
+
+/* ========================================================================
+   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(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; }
+
+.uk-nav > li > a[aria-expanded="true"] .uk-nav-parent-icon { transform: rotate(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(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(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(mixin-exists(hook-nav-default)) {@include hook-nav-default();}
+}
+
+/*
+ * Items
+ */
+
+.uk-nav-default > li > a {
+    color: $nav-default-item-color;
+    @if(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(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(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(mixin-exists(hook-nav-default-subtitle)) {@include hook-nav-default-subtitle();}
+}
+
+/*
+ * Header
+ */
+
+.uk-nav-default .uk-nav-header {
+    color: $nav-default-header-color;
+    @if(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(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(mixin-exists(hook-nav-primary)) {@include hook-nav-primary();}
+}
+
+/*
+ * Items
+ */
+
+.uk-nav-primary > li > a {
+    color: $nav-primary-item-color;
+    @if(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(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(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(mixin-exists(hook-nav-primary-subtitle)) {@include hook-nav-primary-subtitle();}
+}
+
+/*
+ * Header
+ */
+
+.uk-nav-primary .uk-nav-header {
+    color: $nav-primary-header-color;
+    @if(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(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(mixin-exists(hook-nav-secondary)) {@include hook-nav-secondary();}
+}
+
+/*
+ * Items
+ */
+
+.uk-nav-secondary > li > a {
+
+    color: $nav-secondary-item-color;
+    @if(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(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(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(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(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(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(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(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; }
+
+
+/* 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-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(mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(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-dividers(){}
+// @mixin hook-nav-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-nav-default-item-color:                     $inverse-global-muted-color !default;
+$inverse-nav-default-item-hover-color:               $inverse-global-color !default;
+$inverse-nav-default-item-active-color:              $inverse-global-emphasis-color !default;
+$inverse-nav-default-header-color:                   $inverse-global-emphasis-color !default;
+$inverse-nav-default-divider-border:                 $inverse-global-border !default;
+$inverse-nav-default-sublist-item-color:             $inverse-global-muted-color !default;
+$inverse-nav-default-sublist-item-hover-color:       $inverse-global-color !default;
+$inverse-nav-default-sublist-item-active-color:      $inverse-global-emphasis-color !default;
+
+$inverse-nav-primary-item-color:                     $inverse-global-muted-color !default;
+$inverse-nav-primary-item-hover-color:               $inverse-global-color !default;
+$inverse-nav-primary-item-active-color:              $inverse-global-emphasis-color !default;
+$inverse-nav-primary-header-color:                   $inverse-global-emphasis-color !default;
+$inverse-nav-primary-divider-border:                 $inverse-global-border !default;
+$inverse-nav-primary-sublist-item-color:             $inverse-global-muted-color !default;
+$inverse-nav-primary-sublist-item-hover-color:       $inverse-global-color !default;
+$inverse-nav-primary-sublist-item-active-color:      $inverse-global-emphasis-color !default;
+
+$inverse-nav-secondary-item-color:                   $inverse-global-emphasis-color !default;
+$inverse-nav-secondary-item-hover-color:             $inverse-global-emphasis-color !default;
+$inverse-nav-secondary-item-active-color:            $inverse-global-emphasis-color !default;
+$inverse-nav-secondary-subtitle-color:               $inverse-global-muted-color !default;
+$inverse-nav-secondary-subtitle-hover-color:         $inverse-global-color !default;
+$inverse-nav-secondary-subtitle-active-color:        $inverse-global-emphasis-color !default;
+$inverse-nav-secondary-header-color:                 $inverse-global-emphasis-color !default;
+$inverse-nav-secondary-divider-border:               $inverse-global-border !default;
+$inverse-nav-secondary-sublist-item-color:           $inverse-global-muted-color !default;
+$inverse-nav-secondary-sublist-item-hover-color:     $inverse-global-color !default;
+$inverse-nav-secondary-sublist-item-active-color:    $inverse-global-emphasis-color !default;
+
+$inverse-nav-dividers-border:                        $inverse-global-border !default;
+
+
+
+// @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(){}