juicelang-theme 0.1.0

data/_sass/uikit/components/iconnav.scss

@@ -0,0 +1,146 @@
+// Name:            Iconnav
+// Description:     Component to create icon navigations
+//
+// Component:       `uk-iconnav`
+//
+// Modifier:        `uk-iconnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$iconnav-margin-horizontal:                       $global-small-margin !default;
+$iconnav-margin-vertical:                         $iconnav-margin-horizontal !default;
+
+$iconnav-item-color:                              $global-muted-color !default;
+
+$iconnav-item-hover-color:                        $global-color !default;
+
+$iconnav-item-active-color:                       $global-color !default;
+
+
+/* ========================================================================
+   Component: Iconnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ * 3. Gutter
+ */
+
+.uk-iconnav {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+    /* 2 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 3 */
+    margin-left: (-$iconnav-margin-horizontal);
+    @if(mixin-exists(hook-iconnav)) {@include hook-iconnav();}
+}
+
+/*
+ * Space is allocated based on content dimensions, but shrinks: 0 1 auto
+ * 1. Gutter
+ */
+
+.uk-iconnav > * {
+    /* 1 */
+    padding-left: $iconnav-margin-horizontal;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * 1. Center content vertically if there is still some text
+ * 2. Imitate white space gap when using flexbox
+ * 3. Force text not to affect item height
+ * 4. Style
+ * 5. Required for `a` if there is still some text
+ */
+
+.uk-iconnav > * > a {
+    /* 1 */
+    display: flex;
+    align-items: center;
+    /* 2 */
+    column-gap: 0.25em;
+    /* 3 */
+    line-height: 0;
+    /* 4 */
+    color: $iconnav-item-color;
+    /* 5 */
+    text-decoration: none;
+    @if(mixin-exists(hook-iconnav-item)) {@include hook-iconnav-item();}
+}
+
+/* Hover */
+.uk-iconnav > * > a:hover {
+    color: $iconnav-item-hover-color;
+    @if(mixin-exists(hook-iconnav-item-hover)) {@include hook-iconnav-item-hover();}
+}
+
+/* Active */
+.uk-iconnav > .uk-active > a {
+    color: $iconnav-item-active-color;
+    @if(mixin-exists(hook-iconnav-item-active)) {@include hook-iconnav-item-active();}
+}
+
+
+/* Modifier: 'uk-iconnav-vertical'
+ ========================================================================== */
+
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+
+.uk-iconnav-vertical {
+    /* 1 */
+    flex-direction: column;
+    /* 2 */
+    margin-left: 0;
+    margin-top: (-$iconnav-margin-vertical);
+}
+
+/* 2 */
+.uk-iconnav-vertical > * {
+    padding-left: 0;
+    padding-top: $iconnav-margin-vertical;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-iconnav-misc)) {@include hook-iconnav-misc();}
+
+// @mixin hook-iconnav(){}
+// @mixin hook-iconnav-item(){}
+// @mixin hook-iconnav-item-hover(){}
+// @mixin hook-iconnav-item-active(){}
+// @mixin hook-iconnav-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-iconnav-item-color:                $inverse-global-muted-color !default;
+$inverse-iconnav-item-hover-color:          $inverse-global-color !default;
+$inverse-iconnav-item-active-color:         $inverse-global-color !default;
+
+
+
+// @mixin hook-inverse-iconnav-item(){}
+// @mixin hook-inverse-iconnav-item-hover(){}
+// @mixin hook-inverse-iconnav-item-active(){}

data/_sass/uikit/components/inverse.scss

@@ -0,0 +1,46 @@
+// Name:            Inverse
+// Description:     Inverse component style for light or dark backgrounds
+//
+// Component:       `uk-light`
+//                  `uk-dark`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$inverse-global-color-mode:                      light !default;
+
+$inverse-global-color:                           rgba($global-inverse-color, 0.7) !default;
+$inverse-global-emphasis-color:                  $global-inverse-color !default;
+$inverse-global-muted-color:                     rgba($global-inverse-color, 0.5) !default;
+$inverse-global-inverse-color:                   $global-color !default;
+
+$inverse-global-primary-background:              $global-inverse-color !default;
+$inverse-global-muted-background:                rgba($global-inverse-color, 0.1) !default;
+
+$inverse-global-border:                          rgba($global-inverse-color, 0.2) !default;
+
+
+/* ========================================================================
+   Component: Inverse
+ ========================================================================== */
+
+
+
+/*
+ * Implemented class depends on the general theme color
+ * `uk-light` is for light colors on dark backgrounds
+ * `uk-dark` is or dark colors on light backgrounds
+ */
+
+@if ($inverse-global-color-mode == light) { .uk-light { @if (mixin-exists(hook-inverse)) {@include hook-inverse();}}}
+
+@if ($inverse-global-color-mode == dark) { .uk-dark { @if (mixin-exists(hook-inverse)) {@include hook-inverse();}}}
+
+
+// Hooks
+// ========================================================================
+
+// @mixin hook-inverse(){}

data/_sass/uikit/components/label.scss

@@ -0,0 +1,102 @@
+// Name:            Label
+// Description:     Component to indicate important notes
+//
+// Component:       `uk-label`
+//
+// Modifiers:       `uk-label-success`
+//                  `uk-label-warning`
+//                  `uk-label-danger`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$label-padding-vertical:                         0 !default;
+$label-padding-horizontal:                       $global-small-margin !default;
+$label-background:                               $global-primary-background !default;
+$label-line-height:                              $global-line-height !default;
+$label-font-size:                                $global-small-font-size !default;
+$label-color:                                    $global-inverse-color !default;
+
+$label-success-background:                       $global-success-background !default;
+$label-success-color:                            $global-inverse-color !default;
+$label-warning-background:                       $global-warning-background !default;
+$label-warning-color:                            $global-inverse-color !default;
+$label-danger-background:                        $global-danger-background !default;
+$label-danger-color:                             $global-inverse-color !default;
+
+
+/* ========================================================================
+   Component: Label
+ ========================================================================== */
+
+.uk-label {
+    display: inline-block;
+    padding: $label-padding-vertical $label-padding-horizontal;
+    background: $label-background;
+    line-height: $label-line-height;
+    font-size: $label-font-size;
+    color: $label-color;
+    vertical-align: middle;
+    white-space: nowrap;
+    @if(mixin-exists(hook-label)) {@include hook-label();}
+}
+
+
+/* Color modifiers
+ ========================================================================== */
+
+/*
+ * Success
+ */
+
+.uk-label-success {
+    background-color: $label-success-background;
+    color: $label-success-color;
+    @if(mixin-exists(hook-label-success)) {@include hook-label-success();}
+}
+
+/*
+ * Warning
+ */
+
+.uk-label-warning {
+    background-color: $label-warning-background;
+    color: $label-warning-color;
+    @if(mixin-exists(hook-label-warning)) {@include hook-label-warning();}
+}
+
+/*
+ * Danger
+ */
+
+.uk-label-danger {
+    background-color: $label-danger-background;
+    color: $label-danger-color;
+    @if(mixin-exists(hook-label-danger)) {@include hook-label-danger();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-label-misc)) {@include hook-label-misc();}
+
+// @mixin hook-label(){}
+// @mixin hook-label-success(){}
+// @mixin hook-label-warning(){}
+// @mixin hook-label-danger(){}
+// @mixin hook-label-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-label-background:                      $inverse-global-primary-background !default;
+$inverse-label-color:                           $inverse-global-inverse-color !default;
+
+
+
+// @mixin hook-inverse-label(){}

data/_sass/uikit/components/leader.scss

@@ -0,0 +1,69 @@
+// Name:            Leader
+// Description:     Component to create dot leaders
+//
+// Component:       `uk-leader`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$leader-fill-content:                            unquote('.') !default;
+$leader-fill-margin-left:                        $global-small-gutter !default;
+
+
+/* ========================================================================
+   Component: Leader
+ ========================================================================== */
+
+.uk-leader { overflow: hidden; }
+
+/*
+ * 1. Place element in text flow
+ * 2. Never break into a new line
+ * 3. Get a string back with as many repeating characters to fill the container
+ * 4. Prevent wrapping. Overflowing characters will be clipped by the container
+ */
+
+.uk-leader-fill::after {
+    /* 1 */
+    display: inline-block;
+    margin-left: $leader-fill-margin-left;
+    /* 2 */
+    width: 0;
+    /* 3 */
+    content: attr(data-fill);
+    /* 4 */
+    white-space: nowrap;
+    @if(mixin-exists(hook-leader)) {@include hook-leader();}
+}
+
+/*
+ * Hide if media does not match
+ */
+
+.uk-leader-fill.uk-leader-hide::after { display: none; }
+
+/*
+ * Pass fill character to JS
+ */
+
+:root { --uk-leader-fill-content: #{$leader-fill-content}; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-leader-misc)) {@include hook-leader-misc();}
+
+// @mixin hook-leader(){}
+// @mixin hook-leader-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+// @mixin hook-inverse-leader(){}

data/_sass/uikit/components/lightbox.scss

@@ -0,0 +1,248 @@
+// Name:            Lightbox
+// Description:     Component to create an lightbox image gallery
+//
+// Component:       `uk-lightbox`
+//
+// Sub-objects:     `uk-lightbox-page`
+//                  `uk-lightbox-items`
+//                  `uk-lightbox-toolbar`
+//                  `uk-lightbox-toolbar-icon`
+//                  `uk-lightbox-button`
+//                  `uk-lightbox-caption`
+//                  `uk-lightbox-iframe`
+//
+// States:          `uk-open`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$lightbox-z-index:                               $global-z-index + 10 !default;
+$lightbox-background:                            #000 !default;
+
+$lightbox-focus-outline:                         rgba(255,255,255,0.7) !default;
+
+$lightbox-item-color:                            rgba(255,255,255,0.7) !default;
+$lightbox-item-max-width:                        100vw !default;
+$lightbox-item-max-height:                       100vh !default;
+
+$lightbox-toolbar-padding-vertical:              10px !default;
+$lightbox-toolbar-padding-horizontal:            10px !default;
+$lightbox-toolbar-background:                    rgba(0,0,0,0.3) !default;
+$lightbox-toolbar-color:                         rgba(255,255,255,0.7) !default;
+
+$lightbox-toolbar-icon-padding:                  5px !default;
+$lightbox-toolbar-icon-color:                    rgba(255,255,255,0.7) !default;
+
+$lightbox-toolbar-icon-hover-color:              #fff !default;
+
+$lightbox-button-size:                           50px !default;
+$lightbox-button-background:                     $lightbox-toolbar-background !default;
+$lightbox-button-color:                          rgba(255,255,255,0.7) !default;
+
+$lightbox-button-hover-color:                    #fff !default;
+
+
+/* ========================================================================
+   Component: Lightbox
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Allow scrolling for the modal dialog
+ * 4. Horizontal padding
+ * 5. Mask the background page
+ * 6. Fade-in transition
+ * 7. Prevent cancellation of pointer events while dragging
+ */
+
+.uk-lightbox {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $lightbox-z-index;
+    /* 5 */
+    background: $lightbox-background;
+    /* 6 */
+    opacity: 0;
+    transition: opacity 0.15s linear;
+    /* 7 */
+    touch-action: pinch-zoom;
+    @if(mixin-exists(hook-lightbox)) {@include hook-lightbox();}
+}
+
+/*
+ * Open
+ * 1. Center child
+ * 2. Fade-in
+ */
+
+.uk-lightbox.uk-open {
+    display: block;
+    /* 2 */
+    opacity: 1;
+}
+
+/*
+ * Focus
+ */
+
+.uk-lightbox :focus { outline-color: $lightbox-focus-outline; }
+.uk-lightbox :focus-visible { outline-color: $lightbox-focus-outline; }
+
+
+/* Page
+ ========================================================================== */
+
+/*
+ * Prevent scrollbars
+ */
+
+.uk-lightbox-page { overflow: hidden; }
+
+
+/* Item
+ ========================================================================== */
+
+/*
+ * 1. Center child within the viewport
+ * 2. Not visible by default
+ * 3. Color needed for spinner icon
+ * 4. Optimize animation
+ * 5. Responsiveness
+ *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
+ */
+
+.uk-lightbox-items > * {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    /* 2 */
+    display: none;
+    justify-content: center;
+    align-items: center;
+    /* 3 */
+    color: $lightbox-item-color;
+    /* 4 */
+    will-change: transform, opacity;
+    @if(mixin-exists(hook-lightbox-item)) {@include hook-lightbox-item();}
+}
+
+/* 5 */
+.uk-lightbox-items > * > * {
+    max-width: $lightbox-item-max-width;
+    max-height: $lightbox-item-max-height;
+}
+
+.uk-lightbox-items > * > :not(iframe) {
+    width: auto;
+    height: auto;
+}
+
+.uk-lightbox-items > .uk-active { display: flex; }
+
+/* Toolbar
+ ========================================================================== */
+
+.uk-lightbox-toolbar {
+    padding: $lightbox-toolbar-padding-vertical $lightbox-toolbar-padding-horizontal;
+    background: $lightbox-toolbar-background;
+    color: $lightbox-toolbar-color;
+    @if(mixin-exists(hook-lightbox-toolbar)) {@include hook-lightbox-toolbar();}
+}
+
+.uk-lightbox-toolbar > * { color: $lightbox-toolbar-color; }
+
+
+/* Toolbar Icon (Close)
+ ========================================================================== */
+
+.uk-lightbox-toolbar-icon {
+    padding: $lightbox-toolbar-icon-padding;
+    color: $lightbox-toolbar-icon-color;
+    @if(mixin-exists(hook-lightbox-toolbar-icon)) {@include hook-lightbox-toolbar-icon();}
+}
+
+/*
+ * Hover
+ */
+
+.uk-lightbox-toolbar-icon:hover {
+    color: $lightbox-toolbar-icon-hover-color;
+    @if(mixin-exists(hook-lightbox-toolbar-icon-hover)) {@include hook-lightbox-toolbar-icon-hover();}
+}
+
+
+
+/* Button (Slidenav)
+ ========================================================================== */
+
+/*
+ * 1. Center icon vertically and horizontally
+ */
+
+.uk-lightbox-button {
+    box-sizing: border-box;
+    width: $lightbox-button-size;
+    height: $lightbox-button-size;
+    background: $lightbox-button-background;
+    color: $lightbox-button-color;
+    /* 1 */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    @if(mixin-exists(hook-lightbox-button)) {@include hook-lightbox-button();}
+}
+
+/* Hover */
+.uk-lightbox-button:hover {
+    color: $lightbox-button-hover-color;
+    @if(mixin-exists(hook-lightbox-button-hover)) {@include hook-lightbox-button-hover();}
+}
+
+/* OnClick */
+.uk-lightbox-button:active {
+    @if(mixin-exists(hook-lightbox-button-active)) {@include hook-lightbox-button-active();}
+}
+
+
+/* Caption
+ ========================================================================== */
+
+.uk-lightbox-caption:empty { display: none; }
+
+
+/* Iframe
+ ========================================================================== */
+
+.uk-lightbox-iframe {
+    width: 80%;
+    height: 80%;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-lightbox-misc)) {@include hook-lightbox-misc();}
+
+// @mixin hook-lightbox(){}
+// @mixin hook-lightbox-item(){}
+// @mixin hook-lightbox-toolbar(){}
+// @mixin hook-lightbox-toolbar-icon(){}
+// @mixin hook-lightbox-toolbar-icon-hover(){}
+// @mixin hook-lightbox-button(){}
+// @mixin hook-lightbox-button-hover(){}
+// @mixin hook-lightbox-button-active(){}
+// @mixin hook-lightbox-misc(){}