juicelang-theme 0.1.0

data/_sass/uikit/components/link.scss

@@ -0,0 +1,138 @@
+// Name:            Link
+// Description:     Styles for links
+//
+// Component:       `uk-link-muted`
+//                  `uk-link-text`
+//                  `uk-link-heading`
+//                  `uk-link-reset`
+//
+// Sub-objects:     `uk-link-toggle`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$link-muted-color:                               $global-muted-color !default;
+$link-muted-hover-color:                         $global-color !default;
+
+$link-text-hover-color:                          $global-muted-color !default;
+
+$link-heading-hover-color:                       $global-primary-background !default;
+$link-heading-hover-text-decoration:             none !default;
+
+
+/* ========================================================================
+   Component: Link
+ ========================================================================== */
+
+
+/* Muted
+ ========================================================================== */
+
+a.uk-link-muted,
+.uk-link-muted a,
+.uk-link-toggle .uk-link-muted {
+    color: $link-muted-color;
+    @if(mixin-exists(hook-link-muted)) {@include hook-link-muted();}
+}
+
+a.uk-link-muted:hover,
+.uk-link-muted a:hover,
+.uk-link-toggle:hover .uk-link-muted {
+    color: $link-muted-hover-color;
+    @if(mixin-exists(hook-link-muted-hover)) {@include hook-link-muted-hover();}
+}
+
+
+/* Text
+ ========================================================================== */
+
+a.uk-link-text,
+.uk-link-text a,
+.uk-link-toggle .uk-link-text {
+    color: inherit;
+    @if(mixin-exists(hook-link-text)) {@include hook-link-text();}
+}
+
+a.uk-link-text:hover,
+.uk-link-text a:hover,
+.uk-link-toggle:hover .uk-link-text {
+    color: $link-text-hover-color;
+    @if(mixin-exists(hook-link-text-hover)) {@include hook-link-text-hover();}
+}
+
+
+/* Heading
+ ========================================================================== */
+
+a.uk-link-heading,
+.uk-link-heading a,
+.uk-link-toggle .uk-link-heading {
+    color: inherit;
+    @if(mixin-exists(hook-link-heading)) {@include hook-link-heading();}
+}
+
+a.uk-link-heading:hover,
+.uk-link-heading a:hover,
+.uk-link-toggle:hover .uk-link-heading {
+    color: $link-heading-hover-color;
+    text-decoration: $link-heading-hover-text-decoration;
+    @if(mixin-exists(hook-link-heading-hover)) {@include hook-link-heading-hover();}
+}
+
+
+/* Reset
+ ========================================================================== */
+
+/*
+ * `!important` needed to override inverse component
+ */
+
+a.uk-link-reset,
+.uk-link-reset a {
+    color: inherit !important;
+    text-decoration: none !important;
+    @if(mixin-exists(hook-link-reset)) {@include hook-link-reset();}
+}
+
+
+/* Toggle
+ ========================================================================== */
+
+.uk-link-toggle {
+    color: inherit !important;
+    text-decoration: none !important;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-link-misc)) {@include hook-link-misc();}
+
+// @mixin hook-link-muted(){}
+// @mixin hook-link-muted-hover(){}
+// @mixin hook-link-text(){}
+// @mixin hook-link-text-hover(){}
+// @mixin hook-link-heading(){}
+// @mixin hook-link-heading-hover(){}
+// @mixin hook-link-reset(){}
+// @mixin hook-link-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-link-muted-color:                         $inverse-global-muted-color !default;
+$inverse-link-muted-hover-color:                   $inverse-global-color !default;
+$inverse-link-text-hover-color:                    $inverse-global-muted-color !default;
+$inverse-link-heading-hover-color:                 $inverse-global-primary-background !default;
+
+
+
+// @mixin hook-inverse-link-muted(){}
+// @mixin hook-inverse-link-muted-hover(){}
+// @mixin hook-inverse-link-text-hover(){}
+// @mixin hook-inverse-link-heading-hover(){}

data/_sass/uikit/components/list.scss

@@ -0,0 +1,240 @@
+// Name:            List
+// Description:     Styles for lists
+//
+// Component:       `uk-list`
+//
+// Modifiers:       `uk-list-disc`
+//                  `uk-list-circle`
+//                  `uk-list-square`
+//                  `uk-list-decimal`
+//                  `uk-list-hyphen`
+//                  `uk-list-muted`
+//                  `uk-list-emphasis`
+//                  `uk-list-primary`
+//                  `uk-list-secondary`
+//                  `uk-list-bullet`
+//                  `uk-list-divider`
+//                  `uk-list-striped`
+//                  `uk-list-large`
+//                  `uk-list-collapse`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$list-margin-top:                                $global-small-margin !default;
+
+$list-padding-left:                              30px !default;
+
+$list-marker-height:                             ($global-line-height * 1em) !default;
+
+$list-muted-color:                               $global-muted-color !default;
+$list-emphasis-color:                            $global-emphasis-color !default;
+$list-primary-color:                             $global-primary-background !default;
+$list-secondary-color:                           $global-secondary-background !default;
+
+$list-bullet-icon-color:                         $global-color !default;
+
+$list-divider-margin-top:                        $global-small-margin !default;
+$list-divider-border-width:                      $global-border-width !default;
+$list-divider-border:                            $global-border !default;
+
+$list-striped-padding-vertical:                  $global-small-margin !default;
+$list-striped-padding-horizontal:                $global-small-margin !default;
+$list-striped-background:                        $global-muted-background !default;
+
+$list-large-margin-top:                          $global-margin !default;
+$list-large-divider-margin-top:                  $global-margin !default;
+$list-large-striped-padding-vertical:            $global-margin !default;
+$list-large-striped-padding-horizontal:          $global-small-margin !default;
+
+$internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
+
+
+/* ========================================================================
+   Component: List
+ ========================================================================== */
+
+.uk-list {
+    padding: 0;
+    list-style: none;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-list > * > :last-child { margin-bottom: 0; }
+
+/*
+ * Style
+ */
+
+.uk-list > :nth-child(n+2),
+.uk-list > * > ul { margin-top: $list-margin-top; }
+
+
+/* Marker modifiers
+ * Moving `::marker` inside `::before` to style it differently
+ * To style the `::marker` is currently only supported in Firefox and Safari
+ ========================================================================== */
+
+.uk-list-disc > *,
+.uk-list-circle > *,
+.uk-list-square > *,
+.uk-list-decimal > *,
+.uk-list-hyphen > * { padding-left: $list-padding-left; }
+
+/*
+ * Type modifiers
+ */
+
+.uk-list-decimal { counter-reset: decimal; }
+.uk-list-decimal > * { counter-increment: decimal; }
+
+.uk-list-disc > ::before,
+.uk-list-circle > ::before,
+.uk-list-square > ::before,
+.uk-list-decimal > ::before,
+.uk-list-hyphen > ::before {
+    content: "";
+    position: relative;
+    left: (-$list-padding-left);
+    width: $list-padding-left;
+    height: $list-marker-height;
+    margin-bottom: (-$list-marker-height);
+    display: list-item;
+    list-style-position: inside;
+    text-align: right;
+}
+
+.uk-list-disc > ::before { list-style-type: disc; }
+.uk-list-circle > ::before { list-style-type: circle; }
+.uk-list-square > ::before { list-style-type: square; }
+.uk-list-decimal > ::before { content: counter(decimal, decimal) '\200A.\00A0'; }
+.uk-list-hyphen > ::before { content: '–\00A0\00A0'; }
+
+/*
+ * Color modifiers
+ */
+
+.uk-list-muted > ::before { color: $list-muted-color !important; }
+.uk-list-emphasis > ::before { color: $list-emphasis-color !important; }
+.uk-list-primary > ::before { color: $list-primary-color !important; }
+.uk-list-secondary > ::before { color: $list-secondary-color !important; }
+
+
+/* Image bullet modifier
+ ========================================================================== */
+
+.uk-list-bullet > * { padding-left: $list-padding-left; }
+
+.uk-list-bullet > ::before {
+    content: "";
+    display: list-item;
+    position: relative;
+    left: (-$list-padding-left);
+    width: $list-padding-left;
+    height: $list-marker-height;
+    margin-bottom: (-$list-marker-height);
+    @include svg-fill($internal-list-bullet-image, "#000", $list-bullet-icon-color);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Divider
+ */
+
+.uk-list-divider > :nth-child(n+2) {
+    margin-top: $list-divider-margin-top;
+    padding-top: $list-divider-margin-top;
+    border-top: $list-divider-border-width solid $list-divider-border;
+    @if(mixin-exists(hook-list-divider)) {@include hook-list-divider();}
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-striped > * {
+    padding: $list-striped-padding-vertical $list-striped-padding-horizontal;
+    @if(mixin-exists(hook-list-striped)) {@include hook-list-striped();}
+}
+
+.uk-list-striped > :nth-of-type(odd) { background: $list-striped-background; }
+
+.uk-list-striped > :nth-child(n+2) { margin-top: 0; }
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-list-large > :nth-child(n+2),
+.uk-list-large > * > ul { margin-top: $list-large-margin-top; }
+
+.uk-list-collapse > :nth-child(n+2),
+.uk-list-collapse > * > ul { margin-top: 0; }
+
+/*
+ * Divider
+ */
+
+.uk-list-large.uk-list-divider > :nth-child(n+2) {
+    margin-top: $list-large-divider-margin-top;
+    padding-top: $list-large-divider-margin-top;
+}
+
+.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-large.uk-list-striped > * { padding: $list-large-striped-padding-vertical $list-large-striped-padding-horizontal; }
+
+.uk-list-collapse.uk-list-striped > * {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.uk-list-large.uk-list-striped > :nth-child(n+2),
+.uk-list-collapse.uk-list-striped > :nth-child(n+2) { margin-top: 0; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-list-misc)) {@include hook-list-misc();}
+
+// @mixin hook-list-divider(){}
+// @mixin hook-list-striped(){}
+// @mixin hook-list-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-list-muted-color:                         $inverse-global-muted-color !default;
+$inverse-list-emphasis-color:                      $inverse-global-emphasis-color !default;
+$inverse-list-primary-color:                       $inverse-global-primary-background !default;
+$inverse-list-secondary-color:                     $inverse-global-primary-background !default;
+
+$inverse-list-divider-border:                      $inverse-global-border !default;
+$inverse-list-striped-background:                  $inverse-global-muted-background !default;
+
+$inverse-list-bullet-icon-color:                   $inverse-global-color !default;
+
+
+
+// @mixin hook-inverse-list-divider(){}
+// @mixin hook-inverse-list-striped(){}

data/_sass/uikit/components/margin.scss

@@ -0,0 +1,249 @@
+// Name:            Margin
+// Description:     Utilities for margins
+//
+// Component:       `uk-margin-*`
+//                  `uk-margin-small-*`
+//                  `uk-margin-medium-*`
+//                  `uk-margin-large-*`
+//                  `uk-margin-xlarge-*`
+//                  `uk-margin-remove-*`
+//                  `uk-margin-auto-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$margin-margin:                                         $global-margin !default;
+
+$margin-small-margin:                                   $global-small-margin !default;
+
+$margin-medium-margin:                                  $global-medium-margin !default;
+
+$margin-large-margin:                                   $global-medium-margin !default;
+$margin-large-margin-l:                                 $global-large-margin !default;
+
+$margin-xlarge-margin:                                  $global-large-margin !default;
+$margin-xlarge-margin-l:                                $global-xlarge-margin !default;
+
+
+/* ========================================================================
+   Component: Margin
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-margin { margin-bottom: $margin-margin; }
+* + .uk-margin { margin-top: $margin-margin !important; }
+
+.uk-margin-top { margin-top: $margin-margin !important; }
+.uk-margin-bottom { margin-bottom: $margin-margin !important; }
+.uk-margin-left { margin-left: $margin-margin !important; }
+.uk-margin-right { margin-right: $margin-margin !important; }
+
+
+/* Small
+ ========================================================================== */
+
+.uk-margin-small { margin-bottom: $margin-small-margin; }
+* + .uk-margin-small { margin-top: $margin-small-margin !important; }
+
+.uk-margin-small-top { margin-top: $margin-small-margin !important; }
+.uk-margin-small-bottom { margin-bottom: $margin-small-margin !important; }
+.uk-margin-small-left { margin-left: $margin-small-margin !important; }
+.uk-margin-small-right { margin-right: $margin-small-margin !important; }
+
+
+/* Medium
+ ========================================================================== */
+
+.uk-margin-medium { margin-bottom: $margin-medium-margin; }
+* + .uk-margin-medium { margin-top: $margin-medium-margin !important; }
+
+.uk-margin-medium-top { margin-top: $margin-medium-margin !important; }
+.uk-margin-medium-bottom { margin-bottom: $margin-medium-margin !important; }
+.uk-margin-medium-left { margin-left: $margin-medium-margin !important; }
+.uk-margin-medium-right { margin-right: $margin-medium-margin !important; }
+
+
+/* Large
+ ========================================================================== */
+
+.uk-margin-large { margin-bottom: $margin-large-margin; }
+* + .uk-margin-large { margin-top: $margin-large-margin !important; }
+
+.uk-margin-large-top { margin-top: $margin-large-margin !important; }
+.uk-margin-large-bottom { margin-bottom: $margin-large-margin !important; }
+.uk-margin-large-left { margin-left: $margin-large-margin !important; }
+.uk-margin-large-right { margin-right: $margin-large-margin !important; }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-margin-large { margin-bottom: $margin-large-margin-l; }
+    * + .uk-margin-large { margin-top: $margin-large-margin-l !important; }
+
+    .uk-margin-large-top { margin-top: $margin-large-margin-l !important; }
+    .uk-margin-large-bottom { margin-bottom: $margin-large-margin-l !important; }
+    .uk-margin-large-left { margin-left: $margin-large-margin-l !important; }
+    .uk-margin-large-right { margin-right: $margin-large-margin-l !important; }
+
+}
+
+
+/* XLarge
+ ========================================================================== */
+
+.uk-margin-xlarge { margin-bottom: $margin-xlarge-margin; }
+* + .uk-margin-xlarge { margin-top: $margin-xlarge-margin !important; }
+
+.uk-margin-xlarge-top { margin-top: $margin-xlarge-margin !important; }
+.uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin !important; }
+.uk-margin-xlarge-left { margin-left: $margin-xlarge-margin !important; }
+.uk-margin-xlarge-right { margin-right: $margin-xlarge-margin !important; }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-margin-xlarge { margin-bottom: $margin-xlarge-margin-l; }
+    * + .uk-margin-xlarge { margin-top: $margin-xlarge-margin-l !important; }
+
+    .uk-margin-xlarge-top { margin-top: $margin-xlarge-margin-l !important; }
+    .uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin-l !important; }
+    .uk-margin-xlarge-left { margin-left: $margin-xlarge-margin-l !important; }
+    .uk-margin-xlarge-right { margin-right: $margin-xlarge-margin-l !important; }
+
+}
+
+
+/* Auto
+ ========================================================================== */
+
+.uk-margin-auto {
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+.uk-margin-auto-top { margin-top: auto !important; }
+.uk-margin-auto-bottom { margin-bottom: auto !important; }
+.uk-margin-auto-left { margin-left: auto !important; }
+.uk-margin-auto-right { margin-right: auto !important; }
+
+.uk-margin-auto-vertical {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-margin-auto\@s {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+
+    .uk-margin-auto-left\@s { margin-left: auto !important; }
+    .uk-margin-auto-right\@s { margin-right: auto !important; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-margin-auto\@m {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+
+    .uk-margin-auto-left\@m { margin-left: auto !important; }
+    .uk-margin-auto-right\@m { margin-right: auto !important; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-margin-auto\@l {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+
+    .uk-margin-auto-left\@l { margin-left: auto !important; }
+    .uk-margin-auto-right\@l { margin-right: auto !important; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-margin-auto\@xl {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+
+    .uk-margin-auto-left\@xl { margin-left: auto !important; }
+    .uk-margin-auto-right\@xl { margin-right: auto !important; }
+
+}
+
+
+/* Remove
+ ========================================================================== */
+
+.uk-margin-remove { margin: 0 !important; }
+.uk-margin-remove-top { margin-top: 0 !important; }
+.uk-margin-remove-bottom { margin-bottom: 0 !important; }
+.uk-margin-remove-left { margin-left: 0 !important; }
+.uk-margin-remove-right { margin-right: 0 !important; }
+
+.uk-margin-remove-vertical {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+
+.uk-margin-remove-adjacent + *,
+.uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
+.uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-margin-remove-left\@s { margin-left: 0 !important; }
+    .uk-margin-remove-right\@s { margin-right: 0 !important; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-margin-remove-left\@m { margin-left: 0 !important; }
+    .uk-margin-remove-right\@m { margin-right: 0 !important; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-margin-remove-left\@l { margin-left: 0 !important; }
+    .uk-margin-remove-right\@l { margin-right: 0 !important; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-margin-remove-left\@xl { margin-left: 0 !important; }
+    .uk-margin-remove-right\@xl { margin-right: 0 !important; }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-margin-misc)) {@include hook-margin-misc();}
+
+// @mixin hook-margin-misc(){}

data/_sass/uikit/components/marker.scss

@@ -0,0 +1,61 @@
+// Name:            Marker
+// Description:     Component to create a marker icon
+//
+// Component:       `uk-marker`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$marker-padding:                                  5px !default;
+$marker-background:                               $global-secondary-background !default;
+$marker-color:                                    $global-inverse-color !default;
+
+$marker-hover-color:                              $global-inverse-color !default;
+
+
+/* ========================================================================
+   Component: Marker
+ ========================================================================== */
+
+/*
+ * Addopts `uk-icon`
+ */
+
+.uk-marker {
+    padding: $marker-padding;
+    background: $marker-background;
+    color: $marker-color;
+    @if(mixin-exists(hook-marker)) {@include hook-marker();}
+}
+
+/* Hover */
+.uk-marker:hover {
+    color: $marker-hover-color;
+    @if(mixin-exists(hook-marker-hover)) {@include hook-marker-hover();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-marker-misc)) {@include hook-marker-misc();}
+
+// @mixin hook-marker(){}
+// @mixin hook-marker-hover(){}
+// @mixin hook-marker-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-marker-background:                   $global-muted-background !default;
+$inverse-marker-color:                        $global-color !default;
+$inverse-marker-hover-color:                  $global-color !default;
+
+
+
+// @mixin hook-inverse-marker(){}
+// @mixin hook-inverse-marker-hover(){}