juicelang-theme 0.1.0

data/_sass/uikit/components/heading.scss

@@ -0,0 +1,321 @@
+// Name:            Heading
+// Description:     Styles for headings
+//
+// Component:       `uk-heading-primary`
+//                  `uk-heading-hero`
+//                  `uk-heading-divider`
+//                  `uk-heading-bullet`
+//                  `uk-heading-line`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$heading-small-font-size:                        $heading-small-font-size-m * 0.8 !default;      // 38px 0.73
+$heading-medium-font-size:                       $heading-medium-font-size-m * 0.825 !default;     // 40px 0.714
+$heading-large-font-size:                        $heading-large-font-size-m * 0.85 !default;      // 50px 0.78
+$heading-xlarge-font-size:                       $heading-large-font-size-m !default;             // 4rem / 64px
+$heading-2xlarge-font-size:                      $heading-xlarge-font-size-m !default;            // 6rem / 96px
+
+$heading-small-font-size-m:                      $heading-medium-font-size-l * 0.8125 !default;   // 3.25rem / 52px
+$heading-medium-font-size-m:                     $heading-medium-font-size-l * 0.875 !default;    // 3.5rem / 56px
+$heading-large-font-size-m:                      $heading-medium-font-size-l !default;            // 4rem / 64px
+$heading-xlarge-font-size-m:                     $heading-large-font-size-l !default;             // 6rem / 96px
+$heading-2xlarge-font-size-m:                    $heading-xlarge-font-size-l !default;            // 8rem / 128px
+
+$heading-medium-font-size-l:                     4rem !default;                                   // 64px
+$heading-large-font-size-l:                      6rem !default;                                   // 96px
+$heading-xlarge-font-size-l:                     8rem !default;                                   // 128px
+$heading-2xlarge-font-size-l:                    11rem !default;                                  // 176px
+
+$heading-small-line-height:                      1.2 !default;
+$heading-medium-line-height:                     1.1 !default;
+$heading-large-line-height:                      1.1 !default;
+$heading-xlarge-line-height:                     1 !default;
+$heading-2xlarge-line-height:                    1 !default;
+
+$heading-divider-padding-bottom:                 unquote('calc(5px + 0.1em)') !default;
+$heading-divider-border-width:                   unquote('calc(0.2px + 0.05em)') !default;
+$heading-divider-border:                         $global-border !default;
+
+$heading-bullet-top:                             unquote('calc(-0.1 * 1em)') !default;
+$heading-bullet-height:                          unquote('calc(4px + 0.7em)') !default;
+$heading-bullet-margin-right:                    unquote('calc(5px + 0.2em)') !default;
+$heading-bullet-border-width:                    unquote('calc(5px + 0.1em)') !default;
+$heading-bullet-border:                          $global-border !default;
+
+$heading-line-top:                               50% !default;
+$heading-line-height:                            $heading-line-border-width !default;
+$heading-line-width:                             2000px !default;
+$heading-line-border-width:                      unquote('calc(0.2px + 0.05em)') !default;
+$heading-line-border:                            $global-border !default;
+$heading-line-margin-horizontal:                 unquote('calc(5px + 0.3em)') !default;
+
+
+/* ========================================================================
+   Component: Heading
+ ========================================================================== */
+
+.uk-heading-small {
+    font-size: $heading-small-font-size;
+    line-height: $heading-small-line-height;
+    @if(mixin-exists(hook-heading-small)) {@include hook-heading-small();}
+}
+
+.uk-heading-medium {
+    font-size: $heading-medium-font-size;
+    line-height: $heading-medium-line-height;
+    @if(mixin-exists(hook-heading-medium)) {@include hook-heading-medium();}
+}
+
+.uk-heading-large {
+    font-size: $heading-large-font-size;
+    line-height: $heading-large-line-height;
+    @if(mixin-exists(hook-heading-large)) {@include hook-heading-large();}
+}
+
+.uk-heading-xlarge {
+    font-size: $heading-xlarge-font-size;
+    line-height: $heading-xlarge-line-height;
+    @if(mixin-exists(hook-heading-xlarge)) {@include hook-heading-xlarge();}
+}
+
+.uk-heading-2xlarge {
+    font-size: $heading-2xlarge-font-size;
+    line-height: $heading-2xlarge-line-height;
+    @if(mixin-exists(hook-heading-2xlarge)) {@include hook-heading-2xlarge();}
+}
+
+/* Tablet Landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-heading-small { font-size: $heading-small-font-size-m; }
+    .uk-heading-medium { font-size: $heading-medium-font-size-m; }
+    .uk-heading-large { font-size: $heading-large-font-size-m; }
+    .uk-heading-xlarge { font-size: $heading-xlarge-font-size-m; }
+    .uk-heading-2xlarge { font-size: $heading-2xlarge-font-size-m; }
+
+}
+
+/* Laptop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-heading-medium { font-size: $heading-medium-font-size-l; }
+    .uk-heading-large { font-size: $heading-large-font-size-l; }
+    .uk-heading-xlarge { font-size: $heading-xlarge-font-size-l; }
+    .uk-heading-2xlarge { font-size: $heading-2xlarge-font-size-l; }
+
+}
+
+
+/* Primary
+   Deprecated: Use `uk-heading-medium` instead
+ ========================================================================== */
+
+$heading-primary-font-size-l:                    3.75rem !default;  // 60px
+$heading-primary-line-height-l:                  1.1 !default;
+
+$heading-primary-font-size-m:                    $heading-primary-font-size-l * 0.9 !default; // 54px
+
+$heading-primary-font-size:                      $heading-primary-font-size-l * 0.8 !default; // 48px
+$heading-primary-line-height:                    1.2 !default;
+
+@if ($deprecated == true) {
+.uk-heading-primary {
+    font-size: $heading-primary-font-size;
+    line-height: $heading-primary-line-height;
+    @if(mixin-exists(hook-heading-primary)) {@include hook-heading-primary();}
+}
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    @if ($deprecated == true) {
+.uk-heading-primary { font-size: $heading-primary-font-size-m; }
+}
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    @if ($deprecated == true) {
+.uk-heading-primary {
+        font-size: $heading-primary-font-size-l;
+        line-height: $heading-primary-line-height-l;
+    }
+}
+
+}
+
+
+/* Hero
+   Deprecated: Use `uk-heading-xlarge` instead
+ ========================================================================== */
+
+$heading-hero-font-size-l:                       8rem !default; // 128px
+$heading-hero-line-height-l:                     1 !default;
+
+$heading-hero-font-size-m:                       $heading-hero-font-size-l * 0.75 !default; // 96px
+$heading-hero-line-height-m:                     1 !default;
+
+$heading-hero-font-size:                         $heading-hero-font-size-l * 0.5 !default; // 64px
+$heading-hero-line-height:                       1.1 !default;
+
+@if ($deprecated == true) {
+.uk-heading-hero {
+    font-size: $heading-hero-font-size;
+    line-height: $heading-hero-line-height;
+    @if(mixin-exists(hook-heading-hero)) {@include hook-heading-hero();}
+}
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    @if ($deprecated == true) {
+.uk-heading-hero {
+        font-size: $heading-hero-font-size-m;
+        line-height: $heading-hero-line-height-m;
+    }
+}
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    @if ($deprecated == true) {
+.uk-heading-hero {
+        font-size: $heading-hero-font-size-l;
+        line-height: $heading-hero-line-height-l;
+    }
+}
+
+}
+
+
+/* Divider
+ ========================================================================== */
+
+.uk-heading-divider {
+    padding-bottom: $heading-divider-padding-bottom;
+    border-bottom: $heading-divider-border-width solid $heading-divider-border;
+    @if(mixin-exists(hook-heading-divider)) {@include hook-heading-divider();}
+}
+
+
+/* Bullet
+ ========================================================================== */
+
+.uk-heading-bullet { position: relative; }
+
+/*
+ * 1. Using `inline-block` to make it work with text alignment
+ * 2. Center vertically
+ * 3. Style
+ */
+
+.uk-heading-bullet::before {
+    content: "";
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    position: relative;
+    top: $heading-bullet-top;
+    vertical-align: middle;
+    /* 3 */
+    height: $heading-bullet-height;
+    margin-right: $heading-bullet-margin-right;
+    border-left: $heading-bullet-border-width solid $heading-bullet-border;
+    @if(mixin-exists(hook-heading-bullet)) {@include hook-heading-bullet();}
+}
+
+
+/* Line
+ ========================================================================== */
+
+/*
+ * Clip the child element
+ */
+
+.uk-heading-line { overflow: hidden; }
+
+/*
+ * Extra markup is needed to make it work with text align
+ */
+
+.uk-heading-line > * {
+    display: inline-block;
+    position: relative;
+}
+
+/*
+ * 1. Center vertically
+ * 2. Make the element as large as possible. It's clipped by the container.
+ * 3. Style
+ */
+
+.uk-heading-line > ::before,
+.uk-heading-line > ::after {
+    content: "";
+    /* 1 */
+    position: absolute;
+    top: unquote('calc(#{$heading-line-top} - (#{$heading-line-height} / 2))');
+    /* 2 */
+    width: $heading-line-width;
+    /* 3 */
+    border-bottom: $heading-line-border-width solid $heading-line-border;
+    @if(mixin-exists(hook-heading-line)) {@include hook-heading-line();}
+}
+
+.uk-heading-line > ::before {
+    right: 100%;
+    margin-right: $heading-line-margin-horizontal;
+}
+.uk-heading-line > ::after {
+    left: 100%;
+    margin-left: $heading-line-margin-horizontal;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-heading-misc)) {@include hook-heading-misc();}
+
+// @mixin hook-heading-small(){}
+// @mixin hook-heading-medium(){}
+// @mixin hook-heading-large(){}
+// @mixin hook-heading-xlarge(){}
+// @mixin hook-heading-2xlarge(){}
+// @mixin hook-heading-primary(){}
+// @mixin hook-heading-hero(){}
+// @mixin hook-heading-divider(){}
+// @mixin hook-heading-bullet(){}
+// @mixin hook-heading-line(){}
+// @mixin hook-heading-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-heading-divider-border:                   $inverse-global-border !default;
+$inverse-heading-bullet-border:                    $inverse-global-border !default;
+$inverse-heading-line-border:                      $inverse-global-border !default;
+
+
+
+// @mixin hook-inverse-heading-small(){}
+// @mixin hook-inverse-heading-medium(){}
+// @mixin hook-inverse-heading-large(){}
+// @mixin hook-inverse-heading-xlarge(){}
+// @mixin hook-inverse-heading-2xlarge(){}
+// @mixin hook-inverse-heading-primary(){}
+// @mixin hook-inverse-heading-hero(){}
+// @mixin hook-inverse-heading-divider(){}
+// @mixin hook-inverse-heading-bullet(){}
+// @mixin hook-inverse-heading-line(){}

data/_sass/uikit/components/height.scss

@@ -0,0 +1,57 @@
+// Name:            Height
+// Description:     Utilities for heights
+//
+// Component:       `uk-height-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$height-small-height:                            150px !default;
+$height-medium-height:                           300px !default;
+$height-large-height:                            450px !default;
+
+
+/* ========================================================================
+   Component: Height
+ ========================================================================== */
+
+[class*='uk-height'] { box-sizing: border-box; }
+
+/*
+ * Only works if parent element has a height set
+ */
+
+.uk-height-1-1 { height: 100%; }
+
+/*
+ * Useful to create image teasers
+ */
+
+.uk-height-viewport { min-height: 100vh; }
+.uk-height-viewport-2 { min-height: 200vh; }
+.uk-height-viewport-3 { min-height: 300vh; }
+.uk-height-viewport-4 { min-height: 400vh; }
+
+/*
+ * Pixel
+ * Useful for `overflow: auto`
+ */
+
+.uk-height-small { height: $height-small-height; }
+.uk-height-medium { height: $height-medium-height; }
+.uk-height-large { height: $height-large-height; }
+
+.uk-height-max-small { max-height: $height-small-height; }
+.uk-height-max-medium { max-height: $height-medium-height; }
+.uk-height-max-large { max-height: $height-large-height; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-height-misc)) {@include hook-height-misc();}
+
+// @mixin hook-height-misc(){}

data/_sass/uikit/components/icon.scss

@@ -0,0 +1,225 @@
+// Name:            Icon
+// Description:     Component to create icons
+//
+// Component:       `uk-icon`
+//
+// Modifiers:       `uk-icon-image`
+//                  `uk-icon-link`
+//                  `uk-icon-button`
+//
+// States:          `uk-preserve`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$icon-image-size:                                20px !default;
+
+$icon-link-color:                                $global-muted-color !default;
+$icon-link-hover-color:                          $global-color !default;
+$icon-link-active-color:                         darken($global-color, 5%) !default;
+
+$icon-button-size:                               36px !default;
+$icon-button-border-radius:                      500px !default;
+$icon-button-background:                         $global-muted-background !default;
+$icon-button-color:                              $global-muted-color !default;
+
+$icon-button-hover-background:                   darken($icon-button-background, 5%) !default;
+$icon-button-hover-color:                        $global-color !default;
+
+$icon-button-active-background:                  darken($icon-button-background, 10%) !default;
+$icon-button-active-color:                       $global-color !default;
+
+
+/* ========================================================================
+   Component: Icon
+ ========================================================================== */
+
+/*
+ * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
+ * 1. Remove margins in Chrome, Safari and Opera.
+ * 2. Remove borders for `button`.
+ * 3. Remove border-radius in Chrome.
+ * 4. Address `overflow` set to `hidden` in IE.
+ * 5. Correct `font` properties and `color` not being inherited for `button`.
+ * 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 7. Remove default `button` padding and background color
+ * 8. Style
+ * 9. Fill all SVG elements with the current text color if no `fill` attribute is set
+ * 10. Let the container fit the height of the icon
+ */
+
+.uk-icon {
+    /* 1 */
+    margin: 0;
+    /* 2 */
+    border: none;
+    /* 3 */
+    border-radius: 0;
+    /* 4 */
+    overflow: visible;
+    /* 5 */
+    font: inherit;
+    color: inherit;
+    /* 6 */
+    text-transform: none;
+    /* 7. */
+    padding: 0;
+    background-color: transparent;
+    /* 8 */
+    display: inline-block;
+    /* 9 */
+    fill: currentcolor;
+    /* 10 */
+    line-height: 0;
+}
+
+/* Required for `button`. */
+button.uk-icon:not(:disabled) { cursor: pointer; }
+
+/*
+ * Remove the inner border and padding in Firefox.
+ */
+
+.uk-icon::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * Set the fill and stroke color of all SVG elements to the current text color
+ */
+
+.uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
+.uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
+
+/*
+ * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
+ */
+
+.uk-icon > * { transform: translate(0,0); }
+
+
+/* Image modifier
+ ========================================================================== */
+
+/*
+ * Display images in icon dimensions
+ * 1. Required for `span` with background image
+ * 2. Required for `image`
+ */
+
+.uk-icon-image {
+    width: $icon-image-size;
+    height: $icon-image-size;
+    /* 1 */
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: contain;
+    vertical-align: middle;
+    /* 2 */
+    object-fit: scale-down;
+    max-width: none;
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Link
+ * 1. Allow text within link
+ */
+
+.uk-icon-link {
+    color: $icon-link-color;
+    /* 1 */
+    text-decoration: none !important;
+    @if(mixin-exists(hook-icon-link)) {@include hook-icon-link();}
+}
+
+.uk-icon-link:hover {
+    color: $icon-link-hover-color;
+    @if(mixin-exists(hook-icon-link-hover)) {@include hook-icon-link-hover();}
+}
+
+/* OnClick + Active */
+.uk-icon-link:active,
+.uk-active > .uk-icon-link {
+    color: $icon-link-active-color;
+    @if(mixin-exists(hook-icon-link-active)) {@include hook-icon-link-active();}
+}
+
+/*
+ * Button
+ * 1. Center icon vertically and horizontally
+ */
+
+.uk-icon-button {
+    box-sizing: border-box;
+    width: $icon-button-size;
+    height: $icon-button-size;
+    border-radius: $icon-button-border-radius;
+    background: $icon-button-background;
+    color: $icon-button-color;
+    vertical-align: middle;
+    /* 1 */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    @if(mixin-exists(hook-icon-button)) {@include hook-icon-button();}
+}
+
+/* Hover */
+.uk-icon-button:hover {
+    background-color: $icon-button-hover-background;
+    color: $icon-button-hover-color;
+    @if(mixin-exists(hook-icon-button-hover)) {@include hook-icon-button-hover();}
+}
+
+/* OnClick + Active */
+.uk-icon-button:active,
+.uk-active > .uk-icon-button {
+    background-color: $icon-button-active-background;
+    color: $icon-button-active-color;
+    @if(mixin-exists(hook-icon-button-active)) {@include hook-icon-button-active();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-icon-misc)) {@include hook-icon-misc();}
+
+// @mixin hook-icon-link(){}
+// @mixin hook-icon-link-hover(){}
+// @mixin hook-icon-link-active(){}
+// @mixin hook-icon-button(){}
+// @mixin hook-icon-button-hover(){}
+// @mixin hook-icon-button-active(){}
+// @mixin hook-icon-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-icon-link-color:                       $inverse-global-muted-color !default;
+$inverse-icon-link-hover-color:                 $inverse-global-color !default;
+$inverse-icon-link-active-color:                $inverse-global-color !default;
+$inverse-icon-button-background:                $inverse-global-muted-background !default;
+$inverse-icon-button-color:                     $inverse-global-muted-color !default;
+$inverse-icon-button-hover-background:          fade-in($inverse-icon-button-background, 0.05) !default;
+$inverse-icon-button-hover-color:               $inverse-global-color !default;
+$inverse-icon-button-active-background:         fade-in($inverse-icon-button-background, 0.1) !default;
+$inverse-icon-button-active-color:              $inverse-global-color !default;
+
+
+
+// @mixin hook-inverse-icon-link(){}
+// @mixin hook-inverse-icon-link-hover(){}
+// @mixin hook-inverse-icon-link-active(){}
+// @mixin hook-inverse-icon-button(){}
+// @mixin hook-inverse-icon-button-hover(){}
+// @mixin hook-inverse-icon-button-active(){}