juicelang-theme 0.1.0

data/_sass/uikit/components/text.scss

@@ -0,0 +1,268 @@
+// Name:            Text
+// Description:     Utilities for text
+//
+// Component:       `uk-text-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$text-lead-font-size:                            $global-large-font-size !default;
+$text-lead-line-height:                          1.5 !default;
+$text-lead-color:                                $global-emphasis-color !default;
+
+$text-meta-font-size:                            $global-small-font-size !default;
+$text-meta-line-height:                          1.4 !default;
+$text-meta-color:                                $global-muted-color !default;
+
+$text-small-font-size:                           $global-small-font-size !default;
+$text-small-line-height:                         1.5 !default;
+
+$text-large-font-size:                           $global-large-font-size !default;
+$text-large-line-height:                         1.5 !default;
+
+$text-muted-color:                               $global-muted-color !default;
+$text-emphasis-color:                            $global-emphasis-color !default;
+$text-primary-color:                             $global-primary-background !default;
+$text-secondary-color:                           $global-secondary-background !default;
+$text-success-color:                             $global-success-background !default;
+$text-warning-color:                             $global-warning-background !default;
+$text-danger-color:                              $global-danger-background !default;
+
+$text-background-color:                          $global-primary-background !default;
+
+
+/* ========================================================================
+   Component: Text
+ ========================================================================== */
+
+
+/* Style modifiers
+ ========================================================================== */
+
+.uk-text-lead {
+    font-size: $text-lead-font-size;
+    line-height: $text-lead-line-height;
+    color: $text-lead-color;
+    @if(mixin-exists(hook-text-lead)) {@include hook-text-lead();}
+}
+
+.uk-text-meta {
+    font-size: $text-meta-font-size;
+    line-height: $text-meta-line-height;
+    color: $text-meta-color;
+    @if(mixin-exists(hook-text-meta)) {@include hook-text-meta();}
+}
+
+
+/* Size modifiers
+ ========================================================================== */
+
+.uk-text-small {
+    font-size: $text-small-font-size;
+    line-height: $text-small-line-height;
+    @if(mixin-exists(hook-text-small)) {@include hook-text-small();}
+}
+
+.uk-text-large {
+    font-size: $text-large-font-size;
+    line-height: $text-large-line-height;
+    @if(mixin-exists(hook-text-large)) {@include hook-text-large();}
+}
+
+.uk-text-default {
+    font-size: $global-font-size;
+    line-height: $global-line-height;
+}
+
+
+/* Weight modifier
+ ========================================================================== */
+
+.uk-text-light { font-weight: 300; }
+.uk-text-normal { font-weight: 400; }
+.uk-text-bold { font-weight: 700; }
+
+.uk-text-lighter { font-weight: lighter; }
+.uk-text-bolder { font-weight: bolder; }
+
+
+/* Style modifier
+ ========================================================================== */
+
+.uk-text-italic { font-style: italic; }
+
+
+/* Transform modifier
+ ========================================================================== */
+
+.uk-text-capitalize { text-transform: capitalize !important; }
+.uk-text-uppercase { text-transform: uppercase !important; }
+.uk-text-lowercase { text-transform: lowercase !important; }
+
+
+/* Decoration modifier
+ ========================================================================== */
+
+.uk-text-decoration-none { text-decoration: none !important; }
+
+
+/* Color modifiers
+ ========================================================================== */
+
+.uk-text-muted { color: $text-muted-color !important; }
+.uk-text-emphasis { color: $text-emphasis-color !important; }
+.uk-text-primary { color: $text-primary-color !important; }
+.uk-text-secondary { color: $text-secondary-color !important; }
+.uk-text-success { color: $text-success-color !important; }
+.uk-text-warning { color: $text-warning-color !important; }
+.uk-text-danger { color: $text-danger-color !important; }
+
+
+/* Background modifier
+ ========================================================================== */
+
+/*
+ * 1. The background clips to the foreground text. Works in all browsers.
+ * 2. Default color is set to transparent.
+ * 3. Container fits the text
+ * 4. Style
+ */
+
+.uk-text-background {
+    /* 1 */
+    -webkit-background-clip: text;
+    /* 2 */
+    color: transparent !important;
+    /* 3 */
+    display: inline-block;
+    /* 4 */
+    background-color: $text-background-color;
+    @if(mixin-exists(hook-text-background)) {@include hook-text-background();}
+}
+
+
+/* Alignment modifiers
+ ========================================================================== */
+
+.uk-text-left { text-align: left !important; }
+.uk-text-right { text-align: right !important; }
+.uk-text-center { text-align: center !important; }
+.uk-text-justify { text-align: justify !important; }
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-text-left\@s { text-align: left !important; }
+    .uk-text-right\@s { text-align: right !important; }
+    .uk-text-center\@s { text-align: center !important; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-text-left\@m { text-align: left !important; }
+    .uk-text-right\@m { text-align: right !important; }
+    .uk-text-center\@m { text-align: center !important; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-text-left\@l { text-align: left !important; }
+    .uk-text-right\@l { text-align: right !important; }
+    .uk-text-center\@l { text-align: center !important; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-text-left\@xl { text-align: left !important; }
+    .uk-text-right\@xl { text-align: right !important; }
+    .uk-text-center\@xl { text-align: center !important; }
+
+}
+
+/*
+ * Vertical
+ */
+
+.uk-text-top { vertical-align: top !important; }
+.uk-text-middle { vertical-align: middle !important; }
+.uk-text-bottom { vertical-align: bottom !important; }
+.uk-text-baseline { vertical-align: baseline !important; }
+
+
+/* Wrap modifiers
+ ========================================================================== */
+
+/*
+ * Prevent text from wrapping onto multiple lines
+ */
+
+.uk-text-nowrap { white-space: nowrap; }
+
+/*
+ * 1. Make sure a max-width is set after which truncation can occur
+ * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
+ * 3. Fix for table cells
+ */
+
+.uk-text-truncate {
+    /* 1 */
+    max-width: 100%;
+    /* 2 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 2 */
+th.uk-text-truncate,
+td.uk-text-truncate { max-width: 0; }
+
+/*
+ * Wrap long words onto the next line and break them if they are too long to fit.
+ * 1. Make it work with table cells in all browsers.
+ * Note: Not using `hyphens: auto` because it hyphenates text even if not needed.
+ */
+
+ .uk-text-break { overflow-wrap: break-word; }
+
+ /* 1 */
+ th.uk-text-break,
+ td.uk-text-break { word-break: break-word; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-text-misc)) {@include hook-text-misc();}
+
+// @mixin hook-text-lead(){}
+// @mixin hook-text-meta(){}
+// @mixin hook-text-small(){}
+// @mixin hook-text-large(){}
+// @mixin hook-text-background(){}
+// @mixin hook-text-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-text-lead-color:                       $inverse-global-color !default;
+$inverse-text-meta-color:                       $inverse-global-muted-color !default;
+$inverse-text-muted-color:                      $inverse-global-muted-color !default;
+$inverse-text-emphasis-color:                   $inverse-global-emphasis-color !default;
+$inverse-text-primary-color:                    $inverse-global-primary-background !default;
+$inverse-text-secondary-color:                  $inverse-global-primary-background !default;
+
+
+
+// @mixin hook-inverse-text-lead(){}
+// @mixin hook-inverse-text-meta(){}

data/_sass/uikit/components/thumbnav.scss

@@ -0,0 +1,119 @@
+// Name:            Thumbnav
+// Description:     Component to create thumbnail navigations
+//
+// Component:       `uk-thumbnav`
+//
+// Modifier:        `uk-thumbnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$thumbnav-margin-horizontal:                     15px !default;
+$thumbnav-margin-vertical:                       $thumbnav-margin-horizontal !default;
+
+
+/* ========================================================================
+   Component: Thumbnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ * 3. Gutter
+ */
+
+.uk-thumbnav {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+    /* 2 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 3 */
+    margin-left: (-$thumbnav-margin-horizontal);
+    @if(mixin-exists(hook-thumbnav)) {@include hook-thumbnav();}
+}
+
+/*
+ * Space is allocated based on content dimensions, but shrinks: 0 1 auto
+ * 1. Gutter
+ */
+
+.uk-thumbnav > * {
+    /* 1 */
+    padding-left: $thumbnav-margin-horizontal;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items
+ */
+
+.uk-thumbnav > * > * {
+    display: inline-block;
+    @if(mixin-exists(hook-thumbnav-item)) {@include hook-thumbnav-item();}
+}
+
+/* Hover */
+.uk-thumbnav > * > :hover {
+    @if(mixin-exists(hook-thumbnav-item-hover)) {@include hook-thumbnav-item-hover();}
+}
+
+/* Active */
+.uk-thumbnav > .uk-active > * {
+    @if(mixin-exists(hook-thumbnav-item-active)) {@include hook-thumbnav-item-active();}
+}
+
+
+/* Modifier: 'uk-thumbnav-vertical'
+ ========================================================================== */
+
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+
+.uk-thumbnav-vertical {
+    /* 1 */
+    flex-direction: column;
+    /* 2 */
+    margin-left: 0;
+    margin-top: (-$thumbnav-margin-vertical);
+}
+
+/* 2 */
+.uk-thumbnav-vertical > * {
+    padding-left: 0;
+    padding-top: $thumbnav-margin-vertical;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-thumbnav-misc)) {@include hook-thumbnav-misc();}
+
+// @mixin hook-thumbnav(){}
+// @mixin hook-thumbnav-item(){}
+// @mixin hook-thumbnav-item-hover(){}
+// @mixin hook-thumbnav-item-active(){}
+// @mixin hook-thumbnav-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+// @mixin hook-inverse-thumbnav-item(){}
+// @mixin hook-inverse-thumbnav-item-hover(){}
+// @mixin hook-inverse-thumbnav-item-active(){}

data/_sass/uikit/components/tile.scss

@@ -0,0 +1,233 @@
+// Name:            Tile
+// Description:     Component to create tiled boxes
+//
+// Component:       `uk-tile`
+//
+// Modifiers:       `uk-tile-xsmall`
+//                  `uk-tile-small`
+//                  `uk-tile-large`
+//                  `uk-tile-xlarge`
+//                  `uk-tile-default`
+//                  `uk-tile-muted`
+//                  `uk-tile-primary`
+//                  `uk-tile-secondary`
+//
+// States:          `uk-preserve-color`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$tile-padding-horizontal:                       15px !default;
+$tile-padding-horizontal-s:                     $global-gutter !default;
+$tile-padding-horizontal-m:                     $global-medium-gutter !default;
+$tile-padding-vertical:                         $global-medium-margin !default;
+$tile-padding-vertical-m:                       $global-large-margin !default;
+
+$tile-xsmall-padding-vertical:                  $global-margin !default;
+
+$tile-small-padding-vertical:                   $global-medium-margin !default;
+
+$tile-large-padding-vertical:                   $global-large-margin !default;
+$tile-large-padding-vertical-m:                 $global-xlarge-margin !default;
+
+$tile-xlarge-padding-vertical:                  $global-xlarge-margin !default;
+$tile-xlarge-padding-vertical-m:                ($global-large-margin + $global-xlarge-margin) !default;
+
+$tile-default-background:                       $global-background !default;
+
+$tile-muted-background:                         $global-muted-background !default;
+
+$tile-primary-background:                       $global-primary-background !default;
+$tile-primary-color-mode:                       light !default;
+
+$tile-secondary-background:                     $global-secondary-background !default;
+$tile-secondary-color-mode:                     light !default;
+
+
+/* ========================================================================
+   Component: Tile
+ ========================================================================== */
+
+.uk-tile {
+    display: flow-root;
+    position: relative;
+    box-sizing: border-box;
+    padding-left: $tile-padding-horizontal;
+    padding-right: $tile-padding-horizontal;
+    padding-top: $tile-padding-vertical;
+    padding-bottom: $tile-padding-vertical;
+    @if(mixin-exists(hook-tile)) {@include hook-tile();}
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-tile {
+        padding-left: $tile-padding-horizontal-s;
+        padding-right: $tile-padding-horizontal-s;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-tile {
+        padding-left: $tile-padding-horizontal-m;
+        padding-right: $tile-padding-horizontal-m;
+        padding-top: $tile-padding-vertical-m;
+        padding-bottom: $tile-padding-vertical-m;
+    }
+
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-tile > :last-child { margin-bottom: 0; }
+
+
+/* Size modifiers
+ ========================================================================== */
+
+/*
+ * XSmall
+ */
+
+.uk-tile-xsmall {
+    padding-top: $tile-xsmall-padding-vertical;
+    padding-bottom: $tile-xsmall-padding-vertical;
+}
+
+/*
+ * Small
+ */
+
+.uk-tile-small {
+    padding-top: $tile-small-padding-vertical;
+    padding-bottom: $tile-small-padding-vertical;
+}
+
+/*
+ * Large
+ */
+
+.uk-tile-large {
+    padding-top: $tile-large-padding-vertical;
+    padding-bottom: $tile-large-padding-vertical;
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-tile-large {
+        padding-top: $tile-large-padding-vertical-m;
+        padding-bottom: $tile-large-padding-vertical-m;
+    }
+
+}
+
+
+/*
+ * XLarge
+ */
+
+.uk-tile-xlarge {
+    padding-top: $tile-xlarge-padding-vertical;
+    padding-bottom: $tile-xlarge-padding-vertical;
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-tile-xlarge {
+        padding-top: $tile-xlarge-padding-vertical-m;
+        padding-bottom: $tile-xlarge-padding-vertical-m;
+    }
+
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-tile-default {
+    background-color: $tile-default-background;
+    @if(mixin-exists(hook-tile-default)) {@include hook-tile-default();}
+}
+
+.uk-tile-default.uk-tile-hover:hover {
+    @if(mixin-exists(hook-tile-default-hover)) {@include hook-tile-default-hover();}
+}
+
+/*
+ * Muted
+ */
+
+.uk-tile-muted {
+    background-color: $tile-muted-background;
+    @if(mixin-exists(hook-tile-muted)) {@include hook-tile-muted();}
+}
+
+.uk-tile-muted.uk-tile-hover:hover {
+    @if(mixin-exists(hook-tile-muted-hover)) {@include hook-tile-muted-hover();}
+}
+
+/*
+ * Primary
+ */
+
+.uk-tile-primary {
+    background-color: $tile-primary-background;
+    @if(mixin-exists(hook-tile-primary)) {@include hook-tile-primary();}
+}
+
+.uk-tile-primary.uk-tile-hover:hover {
+    @if(mixin-exists(hook-tile-primary-hover)) {@include hook-tile-primary-hover();}
+}
+
+// Color Mode
+@if ( $tile-primary-color-mode == light ) { .uk-tile-primary:not(.uk-preserve-color) { @extend .uk-light !optional;} }
+@if ( $tile-primary-color-mode == dark ) { .uk-tile-primary:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
+
+/*
+ * Secondary
+ */
+
+.uk-tile-secondary {
+    background-color: $tile-secondary-background;
+    @if(mixin-exists(hook-tile-secondary)) {@include hook-tile-secondary();}
+}
+
+.uk-tile-secondary.uk-tile-hover:hover {
+    @if(mixin-exists(hook-tile-secondary-hover)) {@include hook-tile-secondary-hover();}
+}
+
+// Color Mode
+@if ( $tile-secondary-color-mode == light ) { .uk-tile-secondary:not(.uk-preserve-color) { @extend .uk-light !optional;} }
+@if ( $tile-secondary-color-mode == dark ) { .uk-tile-secondary:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-tile-misc)) {@include hook-tile-misc();}
+
+// @mixin hook-tile(){}
+// @mixin hook-tile-default(){}
+// @mixin hook-tile-default-hover(){}
+// @mixin hook-tile-muted(){}
+// @mixin hook-tile-muted-hover(){}
+// @mixin hook-tile-primary(){}
+// @mixin hook-tile-primary-hover(){}
+// @mixin hook-tile-secondary(){}
+// @mixin hook-tile-secondary-hover(){}
+// @mixin hook-tile-misc(){}

data/_sass/uikit/components/tooltip.scss

@@ -0,0 +1,79 @@
+// Name:            Tooltip
+// Description:     Component to create tooltips
+//
+// Component:       `uk-tooltip`
+//
+// Modifiers        `uk-tooltip-top`
+//                  `uk-tooltip-top-left`
+//                  `uk-tooltip-top-right`
+//                  `uk-tooltip-bottom`
+//                  `uk-tooltip-bottom-left`
+//                  `uk-tooltip-bottom-right`
+//                  `uk-tooltip-left`
+//                  `uk-tooltip-right`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$tooltip-z-index:                                $global-z-index + 30 !default;
+$tooltip-margin:                                 10px !default;
+$tooltip-max-width:                              200px !default;
+$tooltip-padding-vertical:                       3px !default;
+$tooltip-padding-horizontal:                     6px !default;
+$tooltip-background:                             #666 !default;
+$tooltip-border-radius:                          2px !default;
+$tooltip-color:                                  $global-inverse-color !default;
+$tooltip-font-size:                              12px !default;
+
+
+
+/* ========================================================================
+   Component: Tooltip
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Position
+ * 3. Remove tooltip from document flow to keep the UIkit container from changing its size when injected into the document initially
+ * 4. Dimensions
+ * 5. Style
+ */
+
+.uk-tooltip {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: $tooltip-z-index;
+    --uk-position-offset: #{$tooltip-margin};
+    --uk-position-viewport-offset: 10;
+    /* 3 */
+    top: 0;
+    /* 4 */
+    box-sizing: border-box;
+    max-width: $tooltip-max-width;
+    padding: $tooltip-padding-vertical $tooltip-padding-horizontal;
+    /* 5 */
+    background: $tooltip-background;
+    border-radius: $tooltip-border-radius;
+    color: $tooltip-color;
+    font-size: $tooltip-font-size;
+    @if(mixin-exists(hook-tooltip)) {@include hook-tooltip();}
+}
+
+/* Show */
+.uk-tooltip.uk-active { display: block; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-tooltip-misc)) {@include hook-tooltip-misc();}
+
+// @mixin hook-tooltip(){}
+// @mixin hook-tooltip-misc(){}