juicelang-theme 0.1.0

data/_sass/uikit/components/svg.scss

@@ -0,0 +1,36 @@
+// Name:            SVG
+// Description:     Component to style SVGs
+//
+// Component:       `uk-svg`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: SVG
+ ========================================================================== */
+
+/*
+ * 1. Fill all SVG elements with the current text color if no `fill` attribute is set
+ * 2. Set the fill and stroke color of all SVG elements to the current text color
+ */
+
+/* 1 */
+.uk-svg,
+/* 2 */
+.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
+.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
+
+/*
+ * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
+ */
+
+.uk-svg { transform: translate(0,0); }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-svg-misc)) {@include hook-svg-misc();}
+
+// @mixin hook-svg-misc(){}

data/_sass/uikit/components/switcher.scss

@@ -0,0 +1,47 @@
+// Name:            Switcher
+// Description:     Component to navigate through different content panes
+//
+// Component:       `uk-switcher`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Switcher
+ ========================================================================== */
+
+/*
+ * Reset list
+ */
+
+.uk-switcher {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Hide not active items
+ */
+
+.uk-switcher > :not(.uk-active) { display: none; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-switcher > * > :last-child { margin-bottom: 0; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-switcher-misc)) {@include hook-switcher-misc();}
+
+// @mixin hook-switcher-misc(){}

data/_sass/uikit/components/tab.scss

@@ -0,0 +1,196 @@
+// Name:            Tab
+// Description:     Component to create a tabbed navigation
+//
+// Component:       `uk-tab`
+//
+// Modifiers:       `uk-tab-bottom`
+//                  `uk-tab-left`
+//                  `uk-tab-right`
+//
+// States:          `uk-active`
+//                  `uk-disabled`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$tab-margin-horizontal:                   20px !default;
+
+$tab-item-padding-horizontal:             10px !default;
+$tab-item-padding-vertical:               5px !default;
+$tab-item-color:                          $global-muted-color !default;
+$tab-item-hover-color:                    $global-color !default;
+$tab-item-hover-text-decoration:          none !default;
+$tab-item-active-color:                   $global-emphasis-color !default;
+$tab-item-disabled-color:                 $global-muted-color !default;
+
+
+/* ========================================================================
+   Component: Tab
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Gutter
+ * 3. Reset list
+ */
+
+.uk-tab {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+    /* 2 */
+    margin-left: (-$tab-margin-horizontal);
+    /* 3 */
+    padding: 0;
+    list-style: none;
+    @if(mixin-exists(hook-tab)) {@include hook-tab();}
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
+ */
+
+.uk-tab > * {
+    /* 1 */
+    flex: none;
+    /* 2 */
+    padding-left: $tab-margin-horizontal;
+    /* 3 */
+    position: relative;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Center content if a width is set
+ * 4. Style
+ */
+
+.uk-tab > * > a {
+    /* 1 */
+    display: flex;
+    align-items: center;
+    /* 2 */
+    column-gap: 0.25em;
+    /* 3 */
+    justify-content: center;
+    /* 4 */
+    padding: $tab-item-padding-vertical $tab-item-padding-horizontal;
+    color: $tab-item-color;
+    @if(mixin-exists(hook-tab-item)) {@include hook-tab-item();}
+}
+
+/* Hover */
+.uk-tab > * > a:hover {
+    color: $tab-item-hover-color;
+    text-decoration: $tab-item-hover-text-decoration;
+    @if(mixin-exists(hook-tab-item-hover)) {@include hook-tab-item-hover();}
+}
+
+/* Active */
+.uk-tab > .uk-active > a {
+    color: $tab-item-active-color;
+    @if(mixin-exists(hook-tab-item-active)) {@include hook-tab-item-active();}
+}
+
+/* Disabled */
+.uk-tab > .uk-disabled > a {
+    color: $tab-item-disabled-color;
+    @if(mixin-exists(hook-tab-item-disabled)) {@include hook-tab-item-disabled();}
+}
+
+
+/* Position modifier
+ ========================================================================== */
+
+/*
+ * Bottom
+ */
+
+.uk-tab-bottom {
+    @if(mixin-exists(hook-tab-bottom)) {@include hook-tab-bottom();}
+}
+
+.uk-tab-bottom > * > a {
+    @if(mixin-exists(hook-tab-bottom-item)) {@include hook-tab-bottom-item();}
+}
+
+/*
+ * Left + Right
+ * 1. Reset Gutter
+ */
+
+.uk-tab-left,
+.uk-tab-right {
+    flex-direction: column;
+    /* 1 */
+    margin-left: 0;
+}
+
+/* 1 */
+.uk-tab-left > *,
+.uk-tab-right > * { padding-left: 0; }
+
+.uk-tab-left {
+    @if(mixin-exists(hook-tab-left)) {@include hook-tab-left();}
+}
+
+.uk-tab-right {
+    @if(mixin-exists(hook-tab-right)) {@include hook-tab-right();}
+}
+
+.uk-tab-left > * > a {
+    justify-content: left;
+    @if(mixin-exists(hook-tab-left-item)) {@include hook-tab-left-item();}
+}
+
+.uk-tab-right > * > a {
+    justify-content: left;
+    @if(mixin-exists(hook-tab-right-item)) {@include hook-tab-right-item();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-tab-misc)) {@include hook-tab-misc();}
+
+// @mixin hook-tab(){}
+// @mixin hook-tab-item(){}
+// @mixin hook-tab-item-hover(){}
+// @mixin hook-tab-item-active(){}
+// @mixin hook-tab-item-disabled(){}
+// @mixin hook-tab-bottom(){}
+// @mixin hook-tab-bottom-item(){}
+// @mixin hook-tab-left(){}
+// @mixin hook-tab-left-item(){}
+// @mixin hook-tab-right(){}
+// @mixin hook-tab-right-item(){}
+// @mixin hook-tab-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-tab-item-color:                        $inverse-global-muted-color !default;
+$inverse-tab-item-hover-color:                  $inverse-global-color !default;
+$inverse-tab-item-active-color:                 $inverse-global-emphasis-color !default;
+$inverse-tab-item-disabled-color:               $inverse-global-muted-color !default;
+
+
+
+// @mixin hook-inverse-tab(){}
+// @mixin hook-inverse-tab-item(){}
+// @mixin hook-inverse-tab-item-hover(){}
+// @mixin hook-inverse-tab-item-active(){}
+// @mixin hook-inverse-tab-item-disabled(){}

data/_sass/uikit/components/table.scss

@@ -0,0 +1,315 @@
+// Name:            Table
+// Description:     Styles for tables
+//
+// Component:       `uk-table`
+//
+// Modifiers:       `uk-table-middle`
+//                  `uk-table-divider`
+//                  `uk-table-striped`
+//                  `uk-table-hover`
+//                  `uk-table-small`
+//                  `uk-table-justify`
+//                  `uk-table-shrink`
+//                  `uk-table-expand`
+//                  `uk-table-link`
+//                  `uk-table-responsive`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$table-margin-vertical:                          $global-margin !default;
+
+$table-cell-padding-vertical:                    16px !default;
+$table-cell-padding-horizontal:                  12px !default;
+
+$table-header-cell-font-size:                    $global-font-size !default;
+$table-header-cell-font-weight:                  bold !default;
+$table-header-cell-color:                        $global-color !default;
+
+$table-footer-font-size:                         $global-small-font-size !default;
+
+$table-caption-font-size:                        $global-small-font-size !default;
+$table-caption-color:                            $global-muted-color !default;
+
+$table-row-active-background:                    #ffd !default;
+
+$table-divider-border-width:                     $global-border-width !default;
+$table-divider-border:                           $global-border !default;
+
+$table-striped-row-background:                   $global-muted-background !default;
+
+$table-hover-row-background:                     $table-row-active-background !default;
+
+$table-small-cell-padding-vertical:              10px !default;
+$table-small-cell-padding-horizontal:            12px !default;
+
+$table-large-cell-padding-vertical:              22px !default;
+$table-large-cell-padding-horizontal:            12px !default;
+
+$table-expand-min-width:                         150px !default;
+
+
+/* ========================================================================
+   Component: Table
+ ========================================================================== */
+
+/*
+ * 1. Remove most spacing between table cells.
+ * 2. Behave like a block element
+ * 3. Style
+ */
+
+.uk-table {
+    /* 1 */
+    border-collapse: collapse;
+    border-spacing: 0;
+    /* 2 */
+    width: 100%;
+    /* 3 */
+    margin-bottom: $table-margin-vertical;
+    @if(mixin-exists(hook-table)) {@include hook-table();}
+}
+
+/* Add margin if adjacent element */
+* + .uk-table { margin-top: $table-margin-vertical; }
+
+
+/* Header cell
+ ========================================================================== */
+
+/*
+ * 1. Style
+ */
+
+.uk-table th {
+    padding: $table-cell-padding-vertical $table-cell-padding-horizontal;
+    text-align: left;
+    vertical-align: bottom;
+    /* 1 */
+    font-size: $table-header-cell-font-size;
+    font-weight: $table-header-cell-font-weight;
+    color: $table-header-cell-color;
+    @if(mixin-exists(hook-table-header-cell)) {@include hook-table-header-cell();}
+}
+
+
+/* Cell
+ ========================================================================== */
+
+.uk-table td {
+    padding: $table-cell-padding-vertical $table-cell-padding-horizontal;
+    vertical-align: top;
+    @if(mixin-exists(hook-table-cell)) {@include hook-table-cell();}
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-table td > :last-child { margin-bottom: 0; }
+
+
+/* Footer
+ ========================================================================== */
+
+.uk-table tfoot {
+    font-size: $table-footer-font-size;
+    @if(mixin-exists(hook-table-footer)) {@include hook-table-footer();}
+}
+
+
+/* Caption
+ ========================================================================== */
+
+.uk-table caption {
+    font-size: $table-caption-font-size;
+    text-align: left;
+    color: $table-caption-color;
+    @if(mixin-exists(hook-table-caption)) {@include hook-table-caption();}
+}
+
+
+/* Alignment modifier
+ ========================================================================== */
+
+.uk-table-middle,
+.uk-table-middle td { vertical-align: middle !important; }
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Divider
+ */
+
+.uk-table-divider > tr:not(:first-child),
+.uk-table-divider > :not(:first-child) > tr,
+.uk-table-divider > :first-child > tr:not(:first-child) {
+    border-top: $table-divider-border-width solid $table-divider-border;
+    @if(mixin-exists(hook-table-divider)) {@include hook-table-divider();}
+}
+
+/*
+ * Striped
+ */
+
+.uk-table-striped > tr:nth-of-type(odd),
+.uk-table-striped tbody tr:nth-of-type(odd) {
+    background: $table-striped-row-background;
+    @if(mixin-exists(hook-table-striped)) {@include hook-table-striped();}
+}
+
+/*
+ * Hover
+ */
+
+.uk-table-hover > tr:hover,
+.uk-table-hover tbody tr:hover {
+    background: $table-hover-row-background;
+    @if(mixin-exists(hook-table-hover)) {@include hook-table-hover();}
+}
+
+
+/* Active state
+ ========================================================================== */
+
+.uk-table > tr.uk-active,
+.uk-table tbody tr.uk-active {
+    background: $table-row-active-background;
+    @if(mixin-exists(hook-table-row-active)) {@include hook-table-row-active();}
+}
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-table-small th,
+.uk-table-small td {
+    padding: $table-small-cell-padding-vertical $table-small-cell-padding-horizontal;
+    @if(mixin-exists(hook-table-small)) {@include hook-table-small();}
+}
+
+.uk-table-large th,
+.uk-table-large td {
+    padding: $table-large-cell-padding-vertical $table-large-cell-padding-horizontal;
+    @if(mixin-exists(hook-table-large)) {@include hook-table-large();}
+}
+
+
+/* Justify modifier
+ ========================================================================== */
+
+.uk-table-justify th:first-child,
+.uk-table-justify td:first-child { padding-left: 0; }
+
+.uk-table-justify th:last-child,
+.uk-table-justify td:last-child { padding-right: 0; }
+
+
+/* Cell size modifier
+ ========================================================================== */
+
+.uk-table-shrink { width: 1px; }
+.uk-table-expand { min-width: $table-expand-min-width; }
+
+
+/* Cell link modifier
+ ========================================================================== */
+
+/*
+ * Does not work with `uk-table-justify` at the moment
+ */
+
+.uk-table-link { padding: 0 !important; }
+
+.uk-table-link > a {
+    display: block;
+    padding: $table-cell-padding-vertical $table-cell-padding-horizontal;
+}
+
+.uk-table-small .uk-table-link > a { padding: $table-small-cell-padding-vertical $table-small-cell-padding-horizontal; }
+
+
+/* Responsive table
+ ========================================================================== */
+
+
+/* Phone landscape and smaller */
+@media (max-width: $breakpoint-small-max) {
+
+    .uk-table-responsive,
+    .uk-table-responsive tbody,
+    .uk-table-responsive th,
+    .uk-table-responsive td,
+    .uk-table-responsive tr { display: block; }
+
+    .uk-table-responsive thead { display: none; }
+
+    .uk-table-responsive th,
+    .uk-table-responsive td {
+        width: auto !important;
+        max-width: none !important;
+        min-width: 0 !important;
+        overflow: visible !important;
+        white-space: normal !important;
+    }
+
+    .uk-table-responsive th:not(:first-child):not(.uk-table-link),
+    .uk-table-responsive td:not(:first-child):not(.uk-table-link),
+    .uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round(($table-cell-padding-vertical * 0.33333)) !important; }
+
+    .uk-table-responsive th:not(:last-child):not(.uk-table-link),
+    .uk-table-responsive td:not(:last-child):not(.uk-table-link),
+    .uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round(($table-cell-padding-vertical * 0.33333)) !important; }
+
+    .uk-table-justify.uk-table-responsive th,
+    .uk-table-justify.uk-table-responsive td {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-table-misc)) {@include hook-table-misc();}
+
+// @mixin hook-table(){}
+// @mixin hook-table-header-cell(){}
+// @mixin hook-table-cell(){}
+// @mixin hook-table-footer(){}
+// @mixin hook-table-caption(){}
+// @mixin hook-table-row-active(){}
+// @mixin hook-table-divider(){}
+// @mixin hook-table-striped(){}
+// @mixin hook-table-hover(){}
+// @mixin hook-table-small(){}
+// @mixin hook-table-large(){}
+// @mixin hook-table-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-table-header-cell-color:                        $inverse-global-color !default;
+$inverse-table-caption-color:                            $inverse-global-muted-color !default;
+$inverse-table-row-active-background:                    fade-out($inverse-global-muted-background, 0.02) !default;
+$inverse-table-divider-border:                           $inverse-global-border !default;
+$inverse-table-striped-row-background:                   $inverse-global-muted-background !default;
+$inverse-table-hover-row-background:                     $inverse-table-row-active-background !default;
+
+
+
+// @mixin hook-inverse-table-header-cell(){}
+// @mixin hook-inverse-table-caption(){}
+// @mixin hook-inverse-table-row-active(){}
+// @mixin hook-inverse-table-divider(){}
+// @mixin hook-inverse-table-striped(){}
+// @mixin hook-inverse-table-hover(){}