juicelang-theme 0.1.0

data/_sass/uikit/components/slider.scss

@@ -0,0 +1,116 @@
+// Name:            Slider
+// Description:     Component to create horizontal sliders
+//
+// Component:       `uk-slider`
+//
+// Sub-objects:     `uk-slider-container`
+//                  `uk-slider-items`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$slider-container-margin-top:                        -11px !default;
+$slider-container-margin-bottom:                     -39px !default;
+$slider-container-margin-left:                       -25px !default;
+$slider-container-margin-right:                      -25px !default;
+
+
+/* ========================================================================
+   Component: Slider
+ ========================================================================== */
+
+/*
+ * 1. Prevent tab highlighting on iOS.
+ */
+
+.uk-slider {
+    /* 1 */
+    -webkit-tap-highlight-color: transparent;
+    @if(mixin-exists(hook-slider)) {@include hook-slider();}
+}
+
+
+/* Container
+ ========================================================================== */
+
+/*
+ * Clip child elements
+ */
+
+.uk-slider-container { overflow: hidden; }
+
+/*
+ * Widen container to prevent box-shadows from clipping, `large-box-shadow`
+ */
+
+.uk-slider-container-offset {
+    margin: $slider-container-margin-top $slider-container-margin-right $slider-container-margin-bottom $slider-container-margin-left;
+    padding: ($slider-container-margin-top * -1) ($slider-container-margin-right * -1) ($slider-container-margin-bottom * -1) ($slider-container-margin-left * -1);
+}
+
+/* Items
+ ========================================================================== */
+
+/*
+ * 1. Optimize animation
+ * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`.
+ * 3. Disable horizontal panning gestures
+ */
+
+.uk-slider-items {
+    /* 1 */
+    will-change: transform;
+    /* 2 */
+    position: relative;
+    /* 3 */
+    touch-action: pan-y;
+}
+
+/*
+ * 1. Reset list style without interfering with grid
+ * 2. Prevent displaying the callout information on iOS.
+ */
+
+.uk-slider-items:not(.uk-grid) {
+    display: flex;
+    /* 1 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 2 */
+    -webkit-touch-callout: none;
+}
+
+.uk-slider-items.uk-grid { flex-wrap: nowrap; }
+
+
+/* Item
+ ========================================================================== */
+
+/*
+ * 1. Let items take content dimensions (0 0 auto)
+ *    `max-width` needed to keep image responsiveness and prevent content overflow
+ * 3. Create position context
+ */
+
+.uk-slider-items > * {
+    /* 1 */
+    flex: none;
+    max-width: 100%;
+    /* 3 */
+    position: relative;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-slider-misc)) {@include hook-slider-misc();}
+
+// @mixin hook-slider(){}
+// @mixin hook-slider-misc(){}

data/_sass/uikit/components/slideshow.scss

@@ -0,0 +1,93 @@
+// Name:            Slideshow
+// Description:     Component to create slideshows
+//
+// Component:       `uk-slideshow`
+//
+// Sub-objects:     `uk-slideshow-items`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Slideshow
+ ========================================================================== */
+
+/*
+ * 1. Prevent tab highlighting on iOS.
+ */
+
+.uk-slideshow {
+    /* 1 */
+    -webkit-tap-highlight-color: transparent;
+    @if(mixin-exists(hook-slideshow)) {@include hook-slideshow();}
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * 1. Create position and stacking context
+ * 2. Reset list
+ * 3. Clip child elements
+ * 4. Prevent displaying the callout information on iOS.
+ * 5. Disable horizontal panning gestures
+ */
+
+.uk-slideshow-items {
+    /* 1 */
+    position: relative;
+    z-index: 0;
+    /* 2 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 3 */
+    overflow: hidden;
+    /* 4 */
+    -webkit-touch-callout: none;
+    /* 5 */
+    touch-action: pan-y;
+}
+
+
+/* Item
+ ========================================================================== */
+
+/*
+ * 1. Position items above each other
+ * 2. Take the full width
+ * 3. Clip child elements, e.g. for `uk-cover`
+ * 4. Optimize animation
+ */
+
+.uk-slideshow-items > * {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    left: 0;
+    /* 2 */
+    right: 0;
+    bottom: 0;
+    /* 3 */
+    overflow: hidden;
+    /* 4 */
+    will-change: transform, opacity;
+}
+
+/*
+ * Hide not active items
+ */
+
+.uk-slideshow-items > :not(.uk-active) { display: none; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-slideshow-misc)) {@include hook-slideshow-misc();}
+
+// @mixin hook-slideshow(){}
+// @mixin hook-slideshow-misc(){}

data/_sass/uikit/components/sortable.scss

@@ -0,0 +1,90 @@
+// Name:            Sortable
+// Description:     Component to create sortable grids and lists
+//
+// Component:       `uk-sortable`
+//
+// Sub-objects:     `uk-sortable-drag`
+//                  `uk-sortable-placeholder`
+//                  `uk-sortable-handle`
+//
+// Modifiers:       `uk-sortable-empty`
+//
+// States:          `uk-drag`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$sortable-dragged-z-index:                       $global-z-index + 50 !default;
+
+$sortable-placeholder-opacity:                   0 !default;
+
+$sortable-empty-height:                          50px !default;
+
+
+/* ========================================================================
+   Component: Sortable
+ ========================================================================== */
+
+.uk-sortable {
+    position: relative;
+    @if(mixin-exists(hook-sortable)) {@include hook-sortable();}
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-sortable > :last-child { margin-bottom: 0; }
+
+
+/* Drag
+ ========================================================================== */
+
+.uk-sortable-drag {
+    position: fixed !important;
+    z-index: $sortable-dragged-z-index !important;
+    pointer-events: none;
+    @if(mixin-exists(hook-sortable-drag)) {@include hook-sortable-drag();}
+}
+
+
+/* Placeholder
+ ========================================================================== */
+
+.uk-sortable-placeholder {
+    opacity: $sortable-placeholder-opacity;
+    pointer-events: none;
+    @if(mixin-exists(hook-sortable-placeholder)) {@include hook-sortable-placeholder();}
+}
+
+
+/* Empty modifier
+ ========================================================================== */
+
+.uk-sortable-empty {
+    min-height: $sortable-empty-height;
+    @if(mixin-exists(hook-sortable-empty)) {@include hook-sortable-empty();}
+}
+
+
+/* Handle
+ ========================================================================== */
+
+/* Hover */
+.uk-sortable-handle:hover { cursor: move; }
+
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-sortable-misc)) {@include hook-sortable-misc();}
+
+// @mixin hook-sortable(){}
+// @mixin hook-sortable-drag(){}
+// @mixin hook-sortable-placeholder(){}
+// @mixin hook-sortable-empty(){}
+// @mixin hook-sortable-misc(){}

data/_sass/uikit/components/spinner.scss

@@ -0,0 +1,74 @@
+// Name:            Spinner
+// Description:     Component to create a loading spinner
+//
+// Component:       `uk-spinner`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$spinner-size:                                   30px !default;
+$spinner-stroke-width:                           1 !default;
+$spinner-radius:                                 floor((($spinner-size - $spinner-stroke-width) * 0.5)) !default; // Minus stroke width to prevent overflow clipping
+$spinner-circumference:                          round(2 * 3.141 * $spinner-radius) !default;
+$spinner-duration:                               1.4s !default;
+
+
+/* ========================================================================
+   Component: Spinner
+ ========================================================================== */
+
+/*
+ * Adopts `uk-icon`
+ */
+
+.uk-spinner {
+    @if(mixin-exists(hook-spinner)) {@include hook-spinner();}
+}
+
+
+/* SVG
+ ========================================================================== */
+
+.uk-spinner > * { animation: uk-spinner-rotate $spinner-duration linear infinite; }
+
+@keyframes uk-spinner-rotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(270deg); }
+}
+
+/*
+ * Circle
+ */
+
+.uk-spinner > * > * {
+    stroke-dasharray: $spinner-circumference;
+    stroke-dashoffset: 0;
+    transform-origin: center;
+    animation: uk-spinner-dash $spinner-duration ease-in-out infinite;
+    stroke-width: $spinner-stroke-width;
+    stroke-linecap: round;
+}
+
+@keyframes uk-spinner-dash {
+    0% { stroke-dashoffset: $spinner-circumference; }
+    50% {
+        stroke-dashoffset: ($spinner-circumference * 0.25);
+        transform:rotate(135deg);
+    }
+    100% {
+        stroke-dashoffset: $spinner-circumference;
+        transform:rotate(450deg);
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-spinner-misc)) {@include hook-spinner-misc();}
+
+// @mixin hook-spinner(){}
+// @mixin hook-spinner-misc(){}

data/_sass/uikit/components/sticky.scss

@@ -0,0 +1,71 @@
+// Name:            Sticky
+// Description:     Component to make elements sticky in the viewport
+//
+// Component:       `uk-sticky`
+//
+// Modifier:        `uk-sticky-fixed`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$sticky-z-index:                                 $global-z-index - 20 !default;
+
+$sticky-animation-duration:                      0.2s !default;
+$sticky-reverse-animation-duration:              0.2s !default;
+
+
+/* ========================================================================
+   Component: Sticky
+ ========================================================================== */
+
+/*
+ * 1. Create position context so it's t the same like when fixed.
+ * 2. More robust if padding and border are used and the sticky height is transitioned
+ */
+
+.uk-sticky {
+    /* 1 */
+    position: relative;
+    /* 2 */
+    box-sizing: border-box;
+}
+
+/*
+ * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
+ */
+
+.uk-sticky-fixed {
+    z-index: $sticky-z-index;
+    margin: 0 !important;
+    /* 1 */
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+/*
+ * Faster animations
+ */
+
+.uk-sticky[class*='uk-animation-'] { animation-duration: $sticky-animation-duration; }
+
+.uk-sticky.uk-animation-reverse { animation-duration: $sticky-reverse-animation-duration; }
+
+/*
+ * Placeholder
+ * Make content clickable for sticky cover and reveal effects
+ */
+
+.uk-sticky-placeholder { pointer-events: none; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-sticky-misc)) {@include hook-sticky-misc();}
+
+// @mixin hook-sticky-misc(){}

data/_sass/uikit/components/subnav.scss

@@ -0,0 +1,246 @@
+// Name:            Subnav
+// Description:     Component to create a sub navigation
+//
+// Component:       `uk-subnav`
+//
+// Modifiers:       `uk-subnav-divider`
+//                  `uk-subnav-pill`
+//
+// States:          `uk-active`
+//                  `uk-first-column`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$subnav-margin-horizontal:                       20px !default;
+
+$subnav-item-color:                              $global-muted-color !default;
+$subnav-item-hover-color:                        $global-color !default;
+$subnav-item-hover-text-decoration:              none !default;
+$subnav-item-active-color:                       $global-emphasis-color !default;
+
+$subnav-divider-margin-horizontal:               $subnav-margin-horizontal !default;
+$subnav-divider-border-height:                   1.5em !default;
+$subnav-divider-border-width:                    $global-border-width !default;
+$subnav-divider-border:                          $global-border !default;
+
+$subnav-pill-item-padding-vertical:              5px !default;
+$subnav-pill-item-padding-horizontal:            10px !default;
+$subnav-pill-item-background:                    transparent !default;
+$subnav-pill-item-color:                         $subnav-item-color !default;
+$subnav-pill-item-hover-background:              $global-muted-background !default;
+$subnav-pill-item-hover-color:                   $global-color !default;
+$subnav-pill-item-onclick-background:            $subnav-pill-item-hover-background !default;
+$subnav-pill-item-onclick-color:                 $subnav-pill-item-hover-color !default;
+$subnav-pill-item-active-background:             $global-primary-background !default;
+$subnav-pill-item-active-color:                  $global-inverse-color !default;
+
+$subnav-item-disabled-color:                     $global-muted-color !default;
+
+
+/* ========================================================================
+   Component: Subnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Center items vertically if they have a different height
+ * 3. Gutter
+ * 4. Reset list
+ */
+
+.uk-subnav {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+    /* 2 */
+    align-items: center;
+    /* 3 */
+    margin-left: (-$subnav-margin-horizontal);
+    /* 4 */
+    padding: 0;
+    list-style: none;
+    @if(mixin-exists(hook-subnav)) {@include hook-subnav();}
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
+ */
+
+.uk-subnav > * {
+    /* 1 */
+    flex: none;
+    /* 2 */
+    padding-left: $subnav-margin-horizontal;
+    /* 3 */
+    position: relative;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * Using `:first-child` instead of `a` to support `span` elements for text
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Style
+ */
+
+.uk-subnav > * > :first-child {
+    /* 1 */
+    display: flex;
+    align-items: center;
+    /* 2 */
+    column-gap: 0.25em;
+    /* 3 */
+    color: $subnav-item-color;
+    @if(mixin-exists(hook-subnav-item)) {@include hook-subnav-item();}
+}
+
+/* Hover */
+.uk-subnav > * > a:hover {
+    color: $subnav-item-hover-color;
+    text-decoration: $subnav-item-hover-text-decoration;
+    @if(mixin-exists(hook-subnav-item-hover)) {@include hook-subnav-item-hover();}
+}
+
+/* Active */
+.uk-subnav > .uk-active > a {
+    color: $subnav-item-active-color;
+    @if(mixin-exists(hook-subnav-item-active)) {@include hook-subnav-item-active();}
+}
+
+
+/* Divider modifier
+ ========================================================================== */
+
+/*
+ * Set gutter
+ */
+
+.uk-subnav-divider { margin-left: -(($subnav-divider-margin-horizontal * 2) + $subnav-divider-border-width); }
+
+/*
+ * Align items and divider vertically
+ */
+
+.uk-subnav-divider > * {
+    display: flex;
+    align-items: center;
+}
+
+/*
+ * Divider
+ * 1. `nth-child` makes it also work without JS if it's only one row
+ */
+
+.uk-subnav-divider > ::before {
+    content: "";
+    height: $subnav-divider-border-height;
+    margin-left: ($subnav-divider-margin-horizontal - $subnav-margin-horizontal);
+    margin-right: $subnav-divider-margin-horizontal;
+    border-left: $subnav-divider-border-width solid transparent;
+}
+
+/* 1 */
+.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
+    border-left-color: $subnav-divider-border;
+    @if(mixin-exists(hook-subnav-divider)) {@include hook-subnav-divider();}
+}
+
+
+/* Pill modifier
+ ========================================================================== */
+
+.uk-subnav-pill > * > :first-child {
+    padding: $subnav-pill-item-padding-vertical $subnav-pill-item-padding-horizontal;
+    background: $subnav-pill-item-background;
+    color: $subnav-pill-item-color;
+    @if(mixin-exists(hook-subnav-pill-item)) {@include hook-subnav-pill-item();}
+}
+
+/* Hover */
+.uk-subnav-pill > * > a:hover {
+    background-color: $subnav-pill-item-hover-background;
+    color: $subnav-pill-item-hover-color;
+    @if(mixin-exists(hook-subnav-pill-item-hover)) {@include hook-subnav-pill-item-hover();}
+}
+
+/* OnClick */
+.uk-subnav-pill > * > a:active {
+    background-color: $subnav-pill-item-onclick-background;
+    color: $subnav-pill-item-onclick-color;
+    @if(mixin-exists(hook-subnav-pill-item-onclick)) {@include hook-subnav-pill-item-onclick();}
+}
+
+/* Active */
+.uk-subnav-pill > .uk-active > a {
+    background-color: $subnav-pill-item-active-background;
+    color: $subnav-pill-item-active-color;
+    @if(mixin-exists(hook-subnav-pill-item-active)) {@include hook-subnav-pill-item-active();}
+}
+
+
+/* Disabled
+ * The same for all style modifiers
+ ========================================================================== */
+
+.uk-subnav > .uk-disabled > a {
+    color: $subnav-item-disabled-color;
+    @if(mixin-exists(hook-subnav-item-disabled)) {@include hook-subnav-item-disabled();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-subnav-misc)) {@include hook-subnav-misc();}
+
+// @mixin hook-subnav(){}
+// @mixin hook-subnav-item(){}
+// @mixin hook-subnav-item-hover(){}
+// @mixin hook-subnav-item-active(){}
+// @mixin hook-subnav-divider(){}
+// @mixin hook-subnav-pill-item(){}
+// @mixin hook-subnav-pill-item-hover(){}
+// @mixin hook-subnav-pill-item-onclick(){}
+// @mixin hook-subnav-pill-item-active(){}
+// @mixin hook-subnav-item-disabled(){}
+// @mixin hook-subnav-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-subnav-item-color:                     $inverse-global-muted-color !default;
+$inverse-subnav-item-hover-color:               $inverse-global-color !default;
+$inverse-subnav-item-active-color:              $inverse-global-emphasis-color !default;
+$inverse-subnav-divider-border:                 $inverse-global-border !default;
+$inverse-subnav-pill-item-background:           transparent !default;
+$inverse-subnav-pill-item-color:                $inverse-global-muted-color !default;
+$inverse-subnav-pill-item-hover-background:     $inverse-global-muted-background !default;
+$inverse-subnav-pill-item-hover-color:          $inverse-global-color !default;
+$inverse-subnav-pill-item-onclick-background:   $inverse-subnav-pill-item-hover-background !default;
+$inverse-subnav-pill-item-onclick-color:        $inverse-subnav-pill-item-hover-color !default;
+$inverse-subnav-pill-item-active-background:    $inverse-global-primary-background !default;
+$inverse-subnav-pill-item-active-color:         $inverse-global-inverse-color !default;
+$inverse-subnav-item-disabled-color:            $inverse-global-muted-color !default;
+
+
+
+// @mixin hook-inverse-subnav-item(){}
+// @mixin hook-inverse-subnav-item-hover(){}
+// @mixin hook-inverse-subnav-item-active(){}
+// @mixin hook-inverse-subnav-divider(){}
+// @mixin hook-inverse-subnav-pill-item(){}
+// @mixin hook-inverse-subnav-pill-item-hover(){}
+// @mixin hook-inverse-subnav-pill-item-onclick(){}
+// @mixin hook-inverse-subnav-pill-item-active(){}
+// @mixin hook-inverse-subnav-item-disabled(){}