juicelang-theme 0.1.0

data/_sass/uikit/components/divider.scss

@@ -0,0 +1,153 @@
+// Name:            Divider
+// Description:     Styles for dividers
+//
+// Component:       `uk-divider-icon`
+//                  `uk-divider-small`
+//                  `uk-divider-vertical`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$divider-margin-vertical:                        $global-margin !default;
+
+$divider-icon-width:                             50px !default;
+$divider-icon-height:                            20px !default;
+$divider-icon-color:                             $global-border !default;
+$divider-icon-line-top:                          50% !default;
+$divider-icon-line-width:                        100% !default;
+$divider-icon-line-border-width:                 $global-border-width !default;
+$divider-icon-line-border:                       $global-border !default;
+
+$internal-divider-icon-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
+
+$divider-small-width:                            100px !default;
+$divider-small-border-width:                     $global-border-width !default;
+$divider-small-border:                           $global-border !default;
+
+$divider-vertical-height:                        100px !default;
+$divider-vertical-border-width:                  $global-border-width !default;
+$divider-vertical-border:                        $global-border !default;
+
+
+/* ========================================================================
+   Component: Divider
+ ========================================================================== */
+
+/*
+ * 1. Reset default `hr`
+ * 2. Set margin if a `div` is used for semantical reason
+ */
+
+[class*='uk-divider'] {
+    /* 1 */
+    border: none;
+    /* 2 */
+    margin-bottom: $divider-margin-vertical;
+}
+
+/* Add margin if adjacent element */
+* + [class*='uk-divider'] { margin-top: $divider-margin-vertical; }
+
+
+/* Icon
+ ========================================================================== */
+
+.uk-divider-icon {
+    position: relative;
+    height: $divider-icon-height;
+    @include svg-fill($internal-divider-icon-image, "#000", $divider-icon-color);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    @if(mixin-exists(hook-divider-icon)) {@include hook-divider-icon();}
+}
+
+.uk-divider-icon::before,
+.uk-divider-icon::after {
+    content: "";
+    position: absolute;
+    top: $divider-icon-line-top;
+    max-width: unquote('calc(50% - (#{$divider-icon-width} / 2))');
+    border-bottom: $divider-icon-line-border-width solid $divider-icon-line-border;
+    @if(mixin-exists(hook-divider-icon-line)) {@include hook-divider-icon-line();}
+}
+
+.uk-divider-icon::before {
+    right: unquote('calc(50% + (#{$divider-icon-width} / 2))');
+    width: $divider-icon-line-width;
+    @if(mixin-exists(hook-divider-icon-line-left)) {@include hook-divider-icon-line-left();}
+}
+
+.uk-divider-icon::after {
+    left: unquote('calc(50% + (#{$divider-icon-width} / 2))');
+    width: $divider-icon-line-width;
+    @if(mixin-exists(hook-divider-icon-line-right)) {@include hook-divider-icon-line-right();}
+}
+
+
+/* Small
+ ========================================================================== */
+
+/*
+ * 1. Fix height because of `inline-block`
+ * 2. Using ::after and inline-block to make `text-align` work
+ */
+
+/* 1 */
+.uk-divider-small { line-height: 0; }
+
+/* 2 */
+.uk-divider-small::after {
+    content: "";
+    display: inline-block;
+    width: $divider-small-width;
+    max-width: 100%;
+    border-top: $divider-small-border-width solid $divider-small-border;
+    vertical-align: top;
+    @if(mixin-exists(hook-divider-small)) {@include hook-divider-small();}
+}
+
+
+/* Vertical
+ ========================================================================== */
+
+.uk-divider-vertical {
+    width: max-content;
+    height: $divider-vertical-height;
+    margin-left: auto;
+    margin-right: auto;
+    border-left: $divider-vertical-border-width solid $divider-vertical-border;
+    @if(mixin-exists(hook-divider-vertical)) {@include hook-divider-vertical();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-divider-misc)) {@include hook-divider-misc();}
+
+// @mixin hook-divider-icon(){}
+// @mixin hook-divider-icon-line(){}
+// @mixin hook-divider-icon-line-left(){}
+// @mixin hook-divider-icon-line-right(){}
+// @mixin hook-divider-small(){}
+// @mixin hook-divider-vertical(){}
+// @mixin hook-divider-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-divider-icon-color:                       $inverse-global-border !default;
+$inverse-divider-icon-line-border:                 $inverse-global-border !default;
+$inverse-divider-small-border:                     $inverse-global-border !default;
+$inverse-divider-vertical-border:                  $inverse-global-border !default;
+
+
+
+// @mixin hook-inverse-divider-icon(){}
+// @mixin hook-inverse-divider-icon-line(){}
+// @mixin hook-inverse-divider-small(){}
+// @mixin hook-inverse-divider-vertical(){}

data/_sass/uikit/components/dotnav.scss

@@ -0,0 +1,155 @@
+// Name:            Dotnav
+// Description:     Component to create dot navigations
+//
+// Component:       `uk-dotnav`
+//
+// Modifier:        `uk-dotnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$dotnav-margin-horizontal:                       12px !default;
+$dotnav-margin-vertical:                         $dotnav-margin-horizontal !default;
+
+$dotnav-item-width:                              10px !default;
+$dotnav-item-height:                             $dotnav-item-width !default;
+$dotnav-item-border-radius:                      50% !default;
+
+$dotnav-item-background:                         rgba($global-color, 0.2) !default;
+$dotnav-item-hover-background:                   rgba($global-color, 0.6) !default;
+$dotnav-item-onclick-background:                 rgba($global-color, 0.2) !default;
+$dotnav-item-active-background:                  rgba($global-color, 0.6) !default;
+
+
+/* ========================================================================
+   Component: Dotnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ * 3. Gutter
+ */
+
+.uk-dotnav {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+    /* 2 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 3 */
+    margin-left: (-$dotnav-margin-horizontal);
+    @if(mixin-exists(hook-dotnav)) {@include hook-dotnav();}
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ */
+
+.uk-dotnav > * {
+    /* 1 */
+    flex: none;
+    /* 2 */
+    padding-left: $dotnav-margin-horizontal;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items
+ * 1. Hide text if present
+ */
+
+.uk-dotnav > * > * {
+    display: block;
+    box-sizing: border-box;
+    width: $dotnav-item-width;
+    height: $dotnav-item-height;
+    border-radius: $dotnav-item-border-radius;
+    background: $dotnav-item-background;
+    /* 1 */
+    text-indent: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    @if(mixin-exists(hook-dotnav-item)) {@include hook-dotnav-item();}
+}
+
+/* Hover */
+.uk-dotnav > * > :hover {
+    background-color: $dotnav-item-hover-background;
+    @if(mixin-exists(hook-dotnav-item-hover)) {@include hook-dotnav-item-hover();}
+}
+
+/* OnClick */
+.uk-dotnav > * > :active {
+    background-color: $dotnav-item-onclick-background;
+    @if(mixin-exists(hook-dotnav-item-onclick)) {@include hook-dotnav-item-onclick();}
+}
+
+/* Active */
+.uk-dotnav > .uk-active > * {
+    background-color: $dotnav-item-active-background;
+    @if(mixin-exists(hook-dotnav-item-active)) {@include hook-dotnav-item-active();}
+}
+
+
+/* Modifier: 'uk-dotnav-vertical'
+ ========================================================================== */
+
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+
+.uk-dotnav-vertical {
+    /* 1 */
+    flex-direction: column;
+    /* 2 */
+    margin-left: 0;
+    margin-top: (-$dotnav-margin-vertical);
+}
+
+/* 2 */
+.uk-dotnav-vertical > * {
+    padding-left: 0;
+    padding-top: $dotnav-margin-vertical;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-dotnav-misc)) {@include hook-dotnav-misc();}
+
+// @mixin hook-dotnav(){}
+// @mixin hook-dotnav-item(){}
+// @mixin hook-dotnav-item-hover(){}
+// @mixin hook-dotnav-item-onclick(){}
+// @mixin hook-dotnav-item-active(){}
+// @mixin hook-dotnav-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-dotnav-item-background:                rgba($inverse-global-color, 0.5) !default;
+$inverse-dotnav-item-hover-background:          rgba($inverse-global-color, 0.9) !default;
+$inverse-dotnav-item-onclick-background:        rgba($inverse-global-color, 0.5) !default;
+$inverse-dotnav-item-active-background:         rgba($inverse-global-color, 0.9) !default;
+
+
+
+// @mixin hook-inverse-dotnav-item(){}
+// @mixin hook-inverse-dotnav-item-hover(){}
+// @mixin hook-inverse-dotnav-item-onclick(){}
+// @mixin hook-inverse-dotnav-item-active(){}

data/_sass/uikit/components/drop.scss

@@ -0,0 +1,63 @@
+// Name:            Drop
+// Description:     Component to position any element next to any other element.
+//
+// Component:       `uk-drop`
+//
+// Modifiers:       `uk-drop-stack`
+//                  `uk-drop-grid`
+//
+// States:          `uk-open`
+//
+// Uses:            Animation
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$drop-z-index:                               $global-z-index + 20 !default;
+$drop-margin:                                $global-margin !default;
+$drop-viewport-margin:                       15px !default;
+$drop-width:                                 300px !default;
+
+
+/* ========================================================================
+   Component: Drop
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Set a default width
+ */
+
+.uk-drop {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: $drop-z-index;
+    --uk-position-offset: #{$drop-margin};
+    --uk-position-viewport-offset: #{$drop-viewport-margin};
+    /* 3 */
+    box-sizing: border-box;
+    width: $drop-width;
+}
+
+/* Show */
+.uk-drop.uk-open { display: block; }
+
+
+/* Grid modifiers
+ ========================================================================== */
+
+.uk-drop-stack .uk-drop-grid > * { width: 100% !important; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-drop-misc)) {@include hook-drop-misc();}
+
+// @mixin hook-drop-misc(){}

data/_sass/uikit/components/dropbar.scss

@@ -0,0 +1,126 @@
+// Name:            Dropbar
+// Description:     Component to create dropbar menus
+//
+// Component:       `uk-dropbar`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$dropbar-margin:                                 0 !default;
+$dropbar-z-index:                                $global-z-index + 20 !default;
+$dropbar-padding-top:                            15px !default;
+$dropbar-padding-bottom:                         $dropbar-padding-top !default;
+$dropbar-padding-horizontal:                     15px !default;
+$dropbar-padding-horizontal-s:                   $global-gutter !default;
+$dropbar-padding-horizontal-m:                   $global-medium-gutter !default;
+$dropbar-background:                             $global-muted-background !default;
+$dropbar-color:                                  $global-color !default;
+$dropbar-color-mode:                             none !default;
+
+$dropbar-large-padding-top:                      40px !default;
+$dropbar-large-padding-bottom:                   $dropbar-large-padding-top !default;
+
+
+/* ========================================================================
+   Component: Dropbar
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Style
+ */
+
+.uk-dropbar {
+    --uk-position-offset: #{$dropbar-margin};
+    --uk-position-shift-offset: 0;
+    --uk-position-viewport-offset: 0;
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: $dropbar-z-index;
+    /* 3 */
+    box-sizing: border-box;
+    padding: $dropbar-padding-top $dropbar-padding-horizontal $dropbar-padding-bottom $dropbar-padding-horizontal;
+    background: $dropbar-background;
+    color: $dropbar-color;
+    @if(mixin-exists(hook-dropbar)) {@include hook-dropbar();}
+}
+
+/* Show */
+.uk-dropbar.uk-open { display: block; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-dropbar > :last-child { margin-bottom: 0; }
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-dropbar {
+        padding-left: $dropbar-padding-horizontal-s;
+        padding-right: $dropbar-padding-horizontal-s;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-dropbar {
+        padding-left: $dropbar-padding-horizontal-m;
+        padding-right: $dropbar-padding-horizontal-m;
+    }
+
+}
+
+// Color Mode
+@if ( $dropbar-color-mode == light ) { .uk-dropbar { @extend .uk-light !optional;} }
+@if ( $dropbar-color-mode == dark ) { .uk-dropbar { @extend .uk-dark !optional;} }
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropbar-large {
+    padding-top: $dropbar-large-padding-top;
+    padding-bottom: $dropbar-large-padding-bottom;
+}
+
+
+/* Direction modifier
+ ========================================================================== */
+
+.uk-dropbar-top {
+    @if(mixin-exists(hook-dropbar-top)) {@include hook-dropbar-top();}
+}
+
+.uk-dropbar-bottom {
+    @if(mixin-exists(hook-dropbar-bottom)) {@include hook-dropbar-bottom();}
+}
+
+.uk-dropbar-left {
+    @if(mixin-exists(hook-dropbar-left)) {@include hook-dropbar-left();}
+}
+
+.uk-dropbar-right {
+    @if(mixin-exists(hook-dropbar-right)) {@include hook-dropbar-right();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-dropbar-misc)) {@include hook-dropbar-misc();}
+
+// @mixin hook-dropbar(){}
+// @mixin hook-dropbar-top(){}
+// @mixin hook-dropbar-bottom(){}
+// @mixin hook-dropbar-left(){}
+// @mixin hook-dropbar-right(){}
+// @mixin hook-dropbar-misc(){}

data/_sass/uikit/components/dropdown.scss

@@ -0,0 +1,170 @@
+// Name:            Dropdown
+// Description:     Component to create dropdown menus
+//
+// Component:       `uk-dropdown`
+//
+// Adopted:         `uk-dropdown-nav`
+//
+// Modifiers:       `uk-dropdown-large`
+//                  `uk-dropdown-stack`
+//                  `uk-dropdown-grid`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$dropdown-z-index:                               $global-z-index + 20 !default;
+$dropdown-margin:                                $global-small-margin !default;
+$dropdown-viewport-margin:                       15px !default;
+$dropdown-min-width:                             200px !default;
+$dropdown-padding:                               15px !default;
+$dropdown-background:                            $global-muted-background !default;
+$dropdown-color:                                 $global-color !default;
+$dropdown-color-mode:                            none !default;
+
+$dropdown-large-padding:                         40px !default;
+
+$dropdown-nav-item-color:                        $global-muted-color !default;
+$dropdown-nav-item-hover-color:                  $global-color !default;
+$dropdown-nav-subtitle-font-size:                $global-small-font-size !default;
+$dropdown-nav-header-color:                      $global-emphasis-color !default;
+$dropdown-nav-divider-border-width:              $global-border-width !default;
+$dropdown-nav-divider-border:                    $global-border !default;
+$dropdown-nav-sublist-item-color:                $global-muted-color !default;
+$dropdown-nav-sublist-item-hover-color:          $global-color !default;
+
+
+/* ========================================================================
+   Component: Dropdown
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Set a default width
+ * 4. Style
+ */
+
+.uk-dropdown {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: $dropdown-z-index;
+    --uk-position-offset: #{$dropdown-margin};
+    --uk-position-viewport-offset: #{$dropdown-viewport-margin};
+    /* 3 */
+    box-sizing: border-box;
+    min-width: $dropdown-min-width;
+    /* 4 */
+    padding: $dropdown-padding;
+    background: $dropdown-background;
+    color: $dropdown-color;
+    @if(mixin-exists(hook-dropdown)) {@include hook-dropdown();}
+}
+
+/* Show */
+.uk-dropdown.uk-open { display: block; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-dropdown > :last-child { margin-bottom: 0; }
+
+// Color Mode
+@if ( $dropdown-color-mode == light ) { .uk-dropdown { @extend .uk-light !optional;} }
+@if ( $dropdown-color-mode == dark ) { .uk-dropdown { @extend .uk-dark !optional;} }
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropdown-large { padding: $dropdown-large-padding; }
+
+
+/* Nav
+ * Adopts `uk-nav`
+ ========================================================================== */
+
+.uk-dropdown-nav {
+    @if(mixin-exists(hook-dropdown-nav)) {@include hook-dropdown-nav();}
+}
+
+/*
+ * Items
+ */
+
+.uk-dropdown-nav > li > a {
+    color: $dropdown-nav-item-color;
+    @if(mixin-exists(hook-dropdown-nav-item)) {@include hook-dropdown-nav-item();}
+}
+
+/* Hover + Active */
+.uk-dropdown-nav > li > a:hover,
+.uk-dropdown-nav > li.uk-active > a {
+    color: $dropdown-nav-item-hover-color;
+    @if(mixin-exists(hook-dropdown-nav-item-hover)) {@include hook-dropdown-nav-item-hover();}
+}
+
+/*
+ * Subtitle
+ */
+
+.uk-dropdown-nav .uk-nav-subtitle {
+    font-size: $dropdown-nav-subtitle-font-size;
+    @if(mixin-exists(hook-dropdown-nav-subtitle)) {@include hook-dropdown-nav-subtitle();}
+}
+
+/*
+ * Header
+ */
+
+.uk-dropdown-nav .uk-nav-header {
+    color: $dropdown-nav-header-color;
+    @if(mixin-exists(hook-dropdown-nav-header)) {@include hook-dropdown-nav-header();}
+}
+
+/*
+ * Divider
+ */
+
+.uk-dropdown-nav .uk-nav-divider {
+    border-top: $dropdown-nav-divider-border-width solid $dropdown-nav-divider-border;
+    @if(mixin-exists(hook-dropdown-nav-divider)) {@include hook-dropdown-nav-divider();}
+}
+
+/*
+ * Sublists
+ */
+
+.uk-dropdown-nav .uk-nav-sub a { color: $dropdown-nav-sublist-item-color; }
+
+.uk-dropdown-nav .uk-nav-sub a:hover,
+.uk-dropdown-nav .uk-nav-sub li.uk-active > a { color: $dropdown-nav-sublist-item-hover-color; }
+
+
+/* Grid modifiers
+ ========================================================================== */
+
+.uk-dropdown-stack .uk-dropdown-grid > * { width: 100% !important; }
+
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-dropdown-misc)) {@include hook-dropdown-misc();}
+
+// @mixin hook-dropdown(){}
+// @mixin hook-dropdown-nav(){}
+// @mixin hook-dropdown-nav-item(){}
+// @mixin hook-dropdown-nav-item-hover(){}
+// @mixin hook-dropdown-nav-subtitle(){}
+// @mixin hook-dropdown-nav-header(){}
+// @mixin hook-dropdown-nav-divider(){}
+// @mixin hook-dropdown-misc(){}