juicelang-theme 0.1.0

data/_sass/uikit/components/pagination.scss

@@ -0,0 +1,130 @@
+// Name:            Pagination
+// Description:     Component to create a page navigation
+//
+// Component:       `uk-pagination`
+//
+// Adopted:         `uk-pagination-next`
+//                  `uk-pagination-previous`
+//
+// States:          `uk-active`
+//                  `uk-disabled`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$pagination-margin-horizontal:                   0 !default;
+
+$pagination-item-padding-vertical:               5px !default;
+$pagination-item-padding-horizontal:             10px !default;
+$pagination-item-color:                          $global-muted-color !default;
+$pagination-item-hover-color:                    $global-color !default;
+$pagination-item-hover-text-decoration:          none !default;
+$pagination-item-active-color:                   $global-color !default;
+$pagination-item-disabled-color:                 $global-muted-color !default;
+
+
+/* ========================================================================
+   Component: Pagination
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Gutter
+ * 3. Reset list
+ */
+
+.uk-pagination {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+    /* 2 */
+    margin-left: (-$pagination-margin-horizontal);
+    /* 3 */
+    padding: 0;
+    list-style: none;
+    @if(mixin-exists(hook-pagination)) {@include hook-pagination();}
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
+ */
+
+.uk-pagination > * {
+    /* 1 */
+    flex: none;
+    /* 2 */
+    padding-left: $pagination-margin-horizontal;
+    /* 3 */
+    position: relative;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * 1. Prevent gap if child element is `inline-block`, e.g. an icon
+ * 2. Style
+ */
+
+.uk-pagination > * > * {
+    /* 1 */
+    display: block;
+    /* 2 */
+    padding: $pagination-item-padding-vertical $pagination-item-padding-horizontal;
+    color: $pagination-item-color;
+    @if(mixin-exists(hook-pagination-item)) {@include hook-pagination-item();}
+}
+
+/* Hover */
+.uk-pagination > * > :hover {
+    color: $pagination-item-hover-color;
+    text-decoration: $pagination-item-hover-text-decoration;
+    @if(mixin-exists(hook-pagination-item-hover)) {@include hook-pagination-item-hover();}
+}
+
+/* Active */
+.uk-pagination > .uk-active > * {
+    color: $pagination-item-active-color;
+    @if(mixin-exists(hook-pagination-item-active)) {@include hook-pagination-item-active();}
+}
+
+/* Disabled */
+.uk-pagination > .uk-disabled > * {
+    color: $pagination-item-disabled-color;
+    @if(mixin-exists(hook-pagination-item-disabled)) {@include hook-pagination-item-disabled();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-pagination-misc)) {@include hook-pagination-misc();}
+
+// @mixin hook-pagination(){}
+// @mixin hook-pagination-item(){}
+// @mixin hook-pagination-item-hover(){}
+// @mixin hook-pagination-item-active(){}
+// @mixin hook-pagination-item-disabled(){}
+// @mixin hook-pagination-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-pagination-item-color:                 $inverse-global-muted-color !default;
+$inverse-pagination-item-hover-color:           $inverse-global-color !default;
+$inverse-pagination-item-active-color:          $inverse-global-color !default;
+$inverse-pagination-item-disabled-color:        $inverse-global-muted-color !default;
+
+
+
+// @mixin hook-inverse-pagination-item(){}
+// @mixin hook-inverse-pagination-item-hover(){}
+// @mixin hook-inverse-pagination-item-active(){}
+// @mixin hook-inverse-pagination-item-disabled(){}

data/_sass/uikit/components/placeholder.scss

@@ -0,0 +1,45 @@
+// Name:            Placeholder
+// Description:     Component to create placeholder boxes
+//
+// Component:       `uk-placeholder`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$placeholder-margin-vertical:                    $global-margin !default;
+$placeholder-padding-vertical:                   $global-gutter !default;
+$placeholder-padding-horizontal:                 $global-gutter !default;
+$placeholder-background:                         $global-muted-background !default;
+
+
+/* ========================================================================
+   Component: Placeholder
+ ========================================================================== */
+
+.uk-placeholder {
+    margin-bottom: $placeholder-margin-vertical;
+    padding: $placeholder-padding-vertical $placeholder-padding-horizontal;
+    background: $placeholder-background;
+    @if(mixin-exists(hook-placeholder)) {@include hook-placeholder();}
+}
+
+/* Add margin if adjacent element */
+* + .uk-placeholder { margin-top: $placeholder-margin-vertical; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-placeholder > :last-child { margin-bottom: 0; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-placeholder-misc)) {@include hook-placeholder-misc();}
+
+// @mixin hook-placeholder(){}
+// @mixin hook-placeholder-misc(){}

data/_sass/uikit/components/position.scss

@@ -0,0 +1,230 @@
+// Name:            Position
+// Description:     Utilities to position content
+//
+// Component:       `uk-position-absolute`
+//                  `uk-position-relative`
+//                  `uk-position-z-index`
+//                  `uk-position-top`
+//                  `uk-position-bottom`
+//                  `uk-position-left`
+//                  `uk-position-right`
+//                  `uk-position-top-left`
+//                  `uk-position-top-center`
+//                  `uk-position-top-right`
+//                  `uk-position-bottom-left`
+//                  `uk-position-bottom-center`
+//                  `uk-position-bottom-right`
+//                  `uk-position-center`
+//                  `uk-position-center-left`
+//                  `uk-position-center-right`
+//                  `uk-position-cover`
+//
+// Modifiers:       `uk-position-small`
+//                  `uk-position-medium`
+//                  `uk-position-large`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$position-small-margin:                                 $global-small-gutter !default;
+$position-medium-margin:                                $global-gutter !default;
+$position-large-margin:                                 $global-gutter !default;
+$position-large-margin-l:                               50px !default;
+
+
+/* ========================================================================
+   Component: Position
+ ========================================================================== */
+
+:root { --uk-position-margin-offset: 0px; }
+
+
+/* Directions
+ ========================================================================== */
+
+/*
+ * 1. Prevent content overflow.
+ */
+
+[class*='uk-position-top'],
+[class*='uk-position-bottom'],
+[class*='uk-position-left'],
+[class*='uk-position-right'],
+[class*='uk-position-center'] {
+    position: absolute !important;
+    /* 1 */
+    max-width: unquote('calc(100% - (var(--uk-position-margin-offset) * 2))');
+    box-sizing: border-box;
+}
+
+/*
+ * Edges
+ * Don't use `width: 100%` because it's wrong if the parent has padding.
+ */
+
+.uk-position-top {
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.uk-position-bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.uk-position-left {
+    top: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.uk-position-right {
+    top: 0;
+    bottom: 0;
+    right: 0;
+}
+
+/*
+ * Corners
+ */
+
+.uk-position-top-left {
+    top: 0;
+    left: 0;
+}
+
+.uk-position-top-right {
+    top: 0;
+    right: 0;
+}
+
+.uk-position-bottom-left {
+    bottom: 0;
+    left: 0;
+}
+
+.uk-position-bottom-right {
+    bottom: 0;
+    right: 0;
+}
+
+/*
+ * Center
+ * 1. Fix text wrapping if content is larger than 50% of the container.
+ *    Using `max-content` requires `max-width` of 100% which is set generally.
+ */
+
+.uk-position-center {
+    top: unquote('calc(50% - var(--uk-position-margin-offset))');
+    left: unquote('calc(50% - var(--uk-position-margin-offset))');
+    --uk-position-translate-x: -50%;
+    --uk-position-translate-y: -50%;
+    transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
+    /* 1 */
+    width: max-content;
+}
+
+/* Vertical */
+[class*='uk-position-center-left'],
+[class*='uk-position-center-right'] {
+    top: unquote('calc(50% - var(--uk-position-margin-offset))');
+    --uk-position-translate-y: -50%;
+    transform: translate(0, var(--uk-position-translate-y));
+}
+
+.uk-position-center-left { left: 0; }
+.uk-position-center-right { right: 0; }
+
+.uk-position-center-left-out {
+    right: 100%;
+    width: max-content;
+}
+
+.uk-position-center-right-out {
+    left: 100%;
+    width: max-content;
+}
+
+/* Horizontal */
+.uk-position-top-center,
+.uk-position-bottom-center {
+    left: unquote('calc(50% - var(--uk-position-margin-offset))');
+    --uk-position-translate-x: -50%;
+    transform: translate(var(--uk-position-translate-x), 0);
+    /* 1 */
+    width: max-content;
+}
+
+.uk-position-top-center { top: 0; }
+.uk-position-bottom-center { bottom: 0; }
+
+/*
+ * Cover
+ */
+
+.uk-position-cover {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+
+/* Margin
+ ========================================================================== */
+
+.uk-position-small {
+    margin: $position-small-margin;
+    --uk-position-margin-offset: #{$position-small-margin};
+}
+
+.uk-position-medium {
+    margin: $position-medium-margin;
+    --uk-position-margin-offset: #{$position-medium-margin};
+}
+
+.uk-position-large {
+    margin: $position-large-margin;
+    --uk-position-margin-offset: #{$position-large-margin};
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-position-large {
+        margin: $position-large-margin-l;
+        --uk-position-margin-offset: #{$position-large-margin-l};
+    }
+
+}
+
+
+/* Schemes
+ ========================================================================== */
+
+.uk-position-relative { position: relative  !important; }
+.uk-position-absolute { position: absolute  !important; }
+.uk-position-fixed { position: fixed  !important; }
+.uk-position-sticky { position: sticky  !important; }
+
+
+/* Layer
+ ========================================================================== */
+
+.uk-position-z-index { z-index: 1; }
+.uk-position-z-index-zero { z-index: 0; }
+.uk-position-z-index-negative { z-index: -1; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-position-misc)) {@include hook-position-misc();}
+
+// @mixin hook-position-misc(){}

data/_sass/uikit/components/print.scss

@@ -0,0 +1,61 @@
+// Name:            Print
+// Description:     Optimize page for printing
+//
+// Adapted from http://github.com/h5bp/html5-boilerplate
+//
+// Modifications:   Removed link `href` and `title` related rules
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Print
+ ========================================================================== */
+
+@media print {
+
+    *,
+    *::before,
+    *::after {
+        background: transparent !important;
+        color: black !important;
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited { text-decoration: underline; }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    thead { display: table-header-group; }
+
+    tr,
+    img { page-break-inside: avoid; }
+
+    img { max-width: 100% !important; }
+
+    @page { margin: 0.5cm; }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 { page-break-after: avoid; }
+
+   @if(mixin-exists(hook-print)) {@include hook-print();}
+
+}
+
+// Hooks
+// ========================================================================
+
+// @mixin hook-print(){}

data/_sass/uikit/components/progress.scss

@@ -0,0 +1,83 @@
+// Name:            Progress
+// Description:     Component to create progress bars
+//
+// Component:       `uk-progress`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$progress-height:                                15px !default;
+$progress-margin-vertical:                       $global-margin !default;
+$progress-background:                            $global-muted-background !default;
+
+$progress-bar-background:                        $global-primary-background !default;
+
+
+/* ========================================================================
+   Component: Progress
+ ========================================================================== */
+
+/*
+ * 1. Add the correct vertical alignment in all browsers.
+ * 2. Behave like a block element.
+ * 3. Remove borders in Firefox.
+ * 4. Remove default style in Chrome, Safari and Edge.
+ * 5. Style
+ */
+
+.uk-progress {
+    /* 1 */
+    vertical-align: baseline;
+    /* 2 */
+    display: block;
+    width: 100%;
+    /* 3 */
+    border: 0;
+    /* 4 */
+    background-color: $progress-background;
+    /* 5 */
+    margin-bottom: $progress-margin-vertical;
+    height: $progress-height;
+    @if(mixin-exists(hook-progress)) {@include hook-progress();}
+}
+
+/* Add margin if adjacent element */
+* + .uk-progress { margin-top: $progress-margin-vertical; }
+
+/*
+ * Show background color set on `uk-progress` in Chrome, Safari and Edge.
+ */
+
+ .uk-progress::-webkit-progress-bar { background-color: transparent; }
+
+/*
+ * Progress Bar
+ * 1. Transitions don't work on `::-moz-progress-bar` pseudo element in Firefox yet.
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=662351
+ */
+
+.uk-progress::-webkit-progress-value {
+    background-color: $progress-bar-background;
+    transition: width 0.6s ease;
+    @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();}
+}
+
+.uk-progress::-moz-progress-bar {
+    background-color: $progress-bar-background;
+    /* 1 */
+    transition: width 0.6s ease;
+    @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-progress-misc)) {@include hook-progress-misc();}
+
+// @mixin hook-progress(){}
+// @mixin hook-progress-bar(){}
+// @mixin hook-progress-misc(){}