juicelang-theme 0.1.0

data/_sass/uikit/components/card.scss

@@ -0,0 +1,384 @@
+// Name:            Card
+// Description:     Component to create boxed content containers
+//
+// Component:       `uk-card`
+//
+// Sub-objects:     `uk-card-body`
+//                  `uk-card-header`
+//                  `uk-card-footer`
+//                  `uk-card-media-*`
+//                  `uk-card-title`
+//                  `uk-card-badge`
+//
+// Modifiers:       `uk-card-hover`
+//                  `uk-card-default`
+//                  `uk-card-primary`
+//                  `uk-card-secondary`
+//                  `uk-card-small`
+//                  `uk-card-large`
+//
+// Uses:            `uk-grid-stack`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$card-body-padding-horizontal:                  $global-gutter !default;
+$card-body-padding-vertical:                    $global-gutter !default;
+
+$card-body-padding-horizontal-l:                $global-medium-gutter !default;
+$card-body-padding-vertical-l:                  $global-medium-gutter !default;
+
+$card-header-padding-horizontal:                $global-gutter !default;
+$card-header-padding-vertical:                  round(($global-gutter * 0.5)) !default;
+
+$card-header-padding-horizontal-l:              $global-medium-gutter !default;
+$card-header-padding-vertical-l:                round(($global-medium-gutter * 0.5)) !default;
+
+$card-footer-padding-horizontal:                $global-gutter !default;
+$card-footer-padding-vertical:                  ($global-gutter * 0.5) !default;
+
+$card-footer-padding-horizontal-l:              $global-medium-gutter !default;
+$card-footer-padding-vertical-l:                round(($global-medium-gutter * 0.5)) !default;
+
+$card-title-font-size:                          $global-large-font-size !default;
+$card-title-line-height:                        1.4 !default;
+
+$card-badge-top:                                15px !default;
+$card-badge-right:                              15px !default;
+$card-badge-height:                             22px !default;
+$card-badge-padding-horizontal:                 10px !default;
+$card-badge-background:                         $global-primary-background !default;
+$card-badge-color:                              $global-inverse-color !default;
+$card-badge-font-size:                          $global-small-font-size !default;
+
+$card-hover-background:                         $global-muted-background !default;
+
+$card-default-background:                       $global-muted-background !default;
+$card-default-color:                            $global-color !default;
+$card-default-title-color:                      $global-emphasis-color !default;
+$card-default-hover-background:                 darken($card-default-background, 5%) !default;
+
+$card-primary-background:                       $global-primary-background !default;
+$card-primary-color:                            $global-inverse-color !default;
+$card-primary-title-color:                      $card-primary-color !default;
+$card-primary-hover-background:                 darken($card-primary-background, 5%) !default;
+$card-primary-color-mode:                       light !default;
+
+$card-secondary-background:                     $global-secondary-background !default;
+$card-secondary-color:                          $global-inverse-color !default;
+$card-secondary-title-color:                    $card-secondary-color !default;
+$card-secondary-hover-background:               darken($card-secondary-background, 5%) !default;
+$card-secondary-color-mode:                     light !default;
+
+$card-small-body-padding-horizontal:            $global-margin !default;
+$card-small-body-padding-vertical:              $global-margin !default;
+$card-small-header-padding-horizontal:          $global-margin !default;
+$card-small-header-padding-vertical:            round(($global-margin * 0.66667)) !default;
+$card-small-footer-padding-horizontal:          $global-margin !default;
+$card-small-footer-padding-vertical:            round(($global-margin * 0.66667)) !default;
+
+$card-large-body-padding-horizontal-l:          $global-large-gutter !default;
+$card-large-body-padding-vertical-l:            $global-large-gutter !default;
+$card-large-header-padding-horizontal-l:        $global-large-gutter !default;
+$card-large-header-padding-vertical-l:          round(($global-large-gutter * 0.5)) !default;
+$card-large-footer-padding-horizontal-l:        $global-large-gutter !default;
+$card-large-footer-padding-vertical-l:          round(($global-large-gutter * 0.5)) !default;
+
+
+/* ========================================================================
+   Component: Card
+ ========================================================================== */
+
+.uk-card {
+    position: relative;
+    box-sizing: border-box;
+    @if(mixin-exists(hook-card)) {@include hook-card();}
+}
+
+
+/* Sections
+ ========================================================================== */
+
+.uk-card-body {
+    display: flow-root;
+    padding: $card-body-padding-vertical $card-body-padding-horizontal;
+    @if(mixin-exists(hook-card-body)) {@include hook-card-body();}
+}
+
+.uk-card-header {
+    display: flow-root;
+    padding: $card-header-padding-vertical $card-header-padding-horizontal;
+    @if(mixin-exists(hook-card-header)) {@include hook-card-header();}
+}
+
+.uk-card-footer {
+    display: flow-root;
+    padding: $card-footer-padding-vertical $card-footer-padding-horizontal;
+    @if(mixin-exists(hook-card-footer)) {@include hook-card-footer();}
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-card-body { padding: $card-body-padding-vertical-l $card-body-padding-horizontal-l; }
+
+    .uk-card-header { padding: $card-header-padding-vertical-l $card-header-padding-horizontal-l; }
+
+    .uk-card-footer { padding: $card-footer-padding-vertical-l $card-footer-padding-horizontal-l; }
+
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-card-body > :last-child,
+.uk-card-header > :last-child,
+.uk-card-footer > :last-child { margin-bottom: 0; }
+
+
+/* Media
+ ========================================================================== */
+
+/*
+ * Reserved alignment modifier to style the media element, e.g. with `border-radius`
+ * Implemented by the theme
+ */
+
+[class*='uk-card-media'] {
+    @if(mixin-exists(hook-card-media)) {@include hook-card-media();}
+}
+
+.uk-card-media-top,
+.uk-grid-stack > .uk-card-media-left,
+.uk-grid-stack > .uk-card-media-right  {
+    @if(mixin-exists(hook-card-media-top)) {@include hook-card-media-top();}
+}
+
+.uk-card-media-bottom {
+    @if(mixin-exists(hook-card-media-bottom)) {@include hook-card-media-bottom();}
+}
+
+:not(.uk-grid-stack) > .uk-card-media-left {
+    @if(mixin-exists(hook-card-media-left)) {@include hook-card-media-left();}
+}
+
+:not(.uk-grid-stack) > .uk-card-media-right {
+    @if(mixin-exists(hook-card-media-right)) {@include hook-card-media-right();}
+}
+
+
+/* Title
+ ========================================================================== */
+
+.uk-card-title {
+    font-size: $card-title-font-size;
+    line-height: $card-title-line-height;
+    @if(mixin-exists(hook-card-title)) {@include hook-card-title();}
+}
+
+
+/* Badge
+ ========================================================================== */
+
+/*
+ * 1. Position
+ * 2. Size
+ * 3. Style
+ * 4. Center child vertically
+ */
+
+.uk-card-badge {
+    /* 1 */
+    position: absolute;
+    top: $card-badge-top;
+    right: $card-badge-right;
+    z-index: 1;
+    /* 2 */
+    height: $card-badge-height;
+    padding: 0 $card-badge-padding-horizontal;
+    /* 3 */
+    background: $card-badge-background;
+    color: $card-badge-color;
+    font-size: $card-badge-font-size;
+    /* 4 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 0;
+    @if(mixin-exists(hook-card-badge)) {@include hook-card-badge();}
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-card-badge:first-child + * { margin-top: 0; }
+
+
+/* Hover modifier
+ ========================================================================== */
+
+.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
+    background-color: $card-hover-background;
+    @if(mixin-exists(hook-card-hover)) {@include hook-card-hover();}
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ * Note: Header and Footer are only implemented for the default style
+ */
+
+.uk-card-default {
+    background-color: $card-default-background;
+    color: $card-default-color;
+    @if(mixin-exists(hook-card-default)) {@include hook-card-default();}
+}
+
+.uk-card-default .uk-card-title {
+    color: $card-default-title-color;
+    @if(mixin-exists(hook-card-default-title)) {@include hook-card-default-title();}
+}
+
+.uk-card-default.uk-card-hover:hover {
+    background-color: $card-default-hover-background;
+    @if(mixin-exists(hook-card-default-hover)) {@include hook-card-default-hover();}
+}
+
+.uk-card-default .uk-card-header {
+    @if(mixin-exists(hook-card-default-header)) {@include hook-card-default-header();}
+}
+
+.uk-card-default .uk-card-footer {
+    @if(mixin-exists(hook-card-default-footer)) {@include hook-card-default-footer();}
+}
+
+/*
+ * Primary
+ */
+
+.uk-card-primary {
+    background-color: $card-primary-background;
+    color: $card-primary-color;
+    @if(mixin-exists(hook-card-primary)) {@include hook-card-primary();}
+}
+
+.uk-card-primary .uk-card-title {
+    color: $card-primary-title-color;
+    @if(mixin-exists(hook-card-primary-title)) {@include hook-card-primary-title();}
+}
+
+.uk-card-primary.uk-card-hover:hover {
+    background-color: $card-primary-hover-background;
+    @if(mixin-exists(hook-card-primary-hover)) {@include hook-card-primary-hover();}
+}
+
+// Color Mode
+@if ( $card-primary-color-mode == light ) { .uk-card-primary.uk-card-body { @extend .uk-light !optional;} }
+@if ( $card-primary-color-mode == light ) { .uk-card-primary > :not([class*='uk-card-media']) { @extend .uk-light !optional;} }
+@if ( $card-primary-color-mode == dark ) { .uk-card-primary.uk-card-body { @extend .uk-dark !optional;} }
+@if ( $card-primary-color-mode == dark ) { .uk-card-primary > :not([class*='uk-card-media']) { @extend .uk-dark !optional;} }
+
+/*
+ * Secondary
+ */
+
+.uk-card-secondary {
+    background-color: $card-secondary-background;
+    color: $card-secondary-color;
+    @if(mixin-exists(hook-card-secondary)) {@include hook-card-secondary();}
+}
+
+.uk-card-secondary .uk-card-title {
+    color: $card-secondary-title-color;
+    @if(mixin-exists(hook-card-secondary-title)) {@include hook-card-secondary-title();}
+}
+
+.uk-card-secondary.uk-card-hover:hover {
+    background-color: $card-secondary-hover-background;
+    @if(mixin-exists(hook-card-secondary-hover)) {@include hook-card-secondary-hover();}
+}
+
+// Color Mode
+@if ( $card-secondary-color-mode == light ) { .uk-card-secondary.uk-card-body { @extend .uk-light !optional;} }
+@if ( $card-secondary-color-mode == light ) { .uk-card-secondary > :not([class*='uk-card-media']) { @extend .uk-light !optional;} }
+@if ( $card-secondary-color-mode == dark ) { .uk-card-secondary.uk-card-body { @extend .uk-dark !optional;} }
+@if ( $card-secondary-color-mode == dark ) { .uk-card-secondary > :not([class*='uk-card-media']) { @extend .uk-dark !optional;} }
+
+
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Small
+ */
+
+.uk-card-small.uk-card-body,
+.uk-card-small .uk-card-body { padding: $card-small-body-padding-vertical $card-small-body-padding-horizontal; }
+
+.uk-card-small .uk-card-header { padding: $card-small-header-padding-vertical $card-small-header-padding-horizontal; }
+.uk-card-small .uk-card-footer { padding: $card-small-footer-padding-vertical $card-small-footer-padding-horizontal; }
+
+/*
+ * Large
+ */
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-card-large.uk-card-body,
+    .uk-card-large .uk-card-body { padding: $card-large-body-padding-vertical-l $card-large-body-padding-horizontal-l; }
+
+    .uk-card-large .uk-card-header { padding: $card-large-header-padding-vertical-l $card-large-header-padding-horizontal-l; }
+    .uk-card-large .uk-card-footer { padding: $card-large-footer-padding-vertical-l $card-large-footer-padding-horizontal-l; }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-card-misc)) {@include hook-card-misc();}
+
+// @mixin hook-card(){}
+// @mixin hook-card-body(){}
+// @mixin hook-card-header(){}
+// @mixin hook-card-footer(){}
+// @mixin hook-card-media(){}
+// @mixin hook-card-media-top(){}
+// @mixin hook-card-media-bottom(){}
+// @mixin hook-card-media-left(){}
+// @mixin hook-card-media-right(){}
+// @mixin hook-card-title(){}
+// @mixin hook-card-badge(){}
+// @mixin hook-card-hover(){}
+// @mixin hook-card-default(){}
+// @mixin hook-card-default-title(){}
+// @mixin hook-card-default-hover(){}
+// @mixin hook-card-default-header(){}
+// @mixin hook-card-default-footer(){}
+// @mixin hook-card-primary(){}
+// @mixin hook-card-primary-title(){}
+// @mixin hook-card-primary-hover(){}
+// @mixin hook-card-secondary(){}
+// @mixin hook-card-secondary-title(){}
+// @mixin hook-card-secondary-hover(){}
+// @mixin hook-card-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-card-badge-background:                      $inverse-global-primary-background !default;
+$inverse-card-badge-color:                           $inverse-global-inverse-color !default;
+
+
+
+// @mixin hook-inverse-card-badge(){}

data/_sass/uikit/components/close.scss

@@ -0,0 +1,55 @@
+// Name:            Close
+// Description:     Component to create a close button
+//
+// Component:       `uk-close`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$close-color:                                    $global-muted-color !default;
+$close-hover-color:                              $global-color !default;
+
+
+/* ========================================================================
+   Component: Close
+ ========================================================================== */
+
+/*
+ * Adopts `uk-icon`
+ */
+
+.uk-close {
+    color: $close-color;
+    @if(mixin-exists(hook-close)) {@include hook-close();}
+}
+
+/* Hover */
+.uk-close:hover {
+    color: $close-hover-color;
+    @if(mixin-exists(hook-close-hover)) {@include hook-close-hover();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-close-misc)) {@include hook-close-misc();}
+
+// @mixin hook-close(){}
+// @mixin hook-close-hover(){}
+// @mixin hook-close-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-close-color:                            $inverse-global-muted-color !default;
+$inverse-close-hover-color:                      $inverse-global-color !default;
+
+
+
+// @mixin hook-inverse-close(){}
+// @mixin hook-inverse-close-hover(){}

data/_sass/uikit/components/column.scss

@@ -0,0 +1,139 @@
+// Name:            Column
+// Description:     Utilities for text columns
+//
+// Component:       `uk-column-*`
+//
+// Sub-objects:     `uk-column-span`
+//
+// Modifiers:       `uk-column-divider`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$column-gutter:                                  $global-gutter !default;
+$column-gutter-l:                                $global-medium-gutter !default;
+
+$column-divider-rule-color:                      $global-border !default;
+$column-divider-rule-width:                      1px !default;
+
+
+/* ========================================================================
+   Component: Column
+ ========================================================================== */
+
+[class*='uk-column-'] { column-gap: $column-gutter; }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    [class*='uk-column-'] { column-gap: $column-gutter-l; }
+
+}
+
+/*
+ * Fix image 1px line wrapping into the next column in Chrome
+ */
+
+[class*='uk-column-'] img { transform: translate3d(0,0,0); }
+
+
+/* Divider
+ ========================================================================== */
+
+/*
+ * 1. Double the column gap
+ */
+
+.uk-column-divider {
+    column-rule: $column-divider-rule-width solid $column-divider-rule-color;
+    /* 1 */
+    column-gap: ($column-gutter * 2);
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-column-divider {
+        column-gap: ($column-gutter-l * 2);
+    }
+
+}
+
+
+/* Width modifiers
+ ========================================================================== */
+
+.uk-column-1-2 { column-count: 2;}
+.uk-column-1-3 { column-count: 3; }
+.uk-column-1-4 { column-count: 4; }
+.uk-column-1-5 { column-count: 5; }
+.uk-column-1-6 { column-count: 6; }
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-column-1-2\@s { column-count: 2; }
+    .uk-column-1-3\@s { column-count: 3; }
+    .uk-column-1-4\@s { column-count: 4; }
+    .uk-column-1-5\@s { column-count: 5; }
+    .uk-column-1-6\@s { column-count: 6; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-column-1-2\@m { column-count: 2; }
+    .uk-column-1-3\@m { column-count: 3; }
+    .uk-column-1-4\@m { column-count: 4; }
+    .uk-column-1-5\@m { column-count: 5; }
+    .uk-column-1-6\@m { column-count: 6; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-column-1-2\@l { column-count: 2; }
+    .uk-column-1-3\@l { column-count: 3; }
+    .uk-column-1-4\@l { column-count: 4; }
+    .uk-column-1-5\@l { column-count: 5; }
+    .uk-column-1-6\@l { column-count: 6; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-column-1-2\@xl { column-count: 2; }
+    .uk-column-1-3\@xl { column-count: 3; }
+    .uk-column-1-4\@xl { column-count: 4; }
+    .uk-column-1-5\@xl { column-count: 5; }
+    .uk-column-1-6\@xl { column-count: 6; }
+
+}
+
+/* Make element span across all columns
+ * Does not work in Firefox yet
+ ========================================================================== */
+
+.uk-column-span { column-span: all; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-column-misc)) {@include hook-column-misc();}
+
+// @mixin hook-column-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-column-divider-rule-color:                     $inverse-global-border !default;
+
+