juicelang-theme 0.1.0

data/_sass/uikit/components/notification.scss

@@ -0,0 +1,191 @@
+// Name:            Notification
+// Description:     Component to create notification messages
+//
+// Component:       `uk-notification`
+//
+// Sub-objects:     `uk-notification-message`
+//
+// Adopted:         `uk-notification-close`
+//
+// Modifiers:       `uk-notification-top-center`
+//                  `uk-notification-top-right`
+//                  `uk-notification-bottom-left`
+//                  `uk-notification-bottom-center`
+//                  `uk-notification-bottom-right`
+//                  `uk-notification-message-primary`
+//                  `uk-notification-message-success`
+//                  `uk-notification-message-warning`
+//                  `uk-notification-message-danger`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$notification-position:                                10px !default;
+$notification-z-index:                                 $global-z-index + 40 !default;
+$notification-width:                                   350px !default;
+
+$notification-message-margin-top:                      10px !default;
+$notification-message-padding:                         $global-small-gutter !default;
+$notification-message-background:                      $global-muted-background !default;
+$notification-message-color:                           $global-color !default;
+$notification-message-font-size:                       $global-medium-font-size !default;
+$notification-message-line-height:                     1.4 !default;
+
+$notification-close-top:                               $notification-message-padding + 5px !default;
+$notification-close-right:                             $notification-message-padding !default;
+
+$notification-message-primary-color:                   $global-primary-background !default;
+$notification-message-success-color:                   $global-success-background !default;
+$notification-message-warning-color:                   $global-warning-background !default;
+$notification-message-danger-color:                    $global-danger-background !default;
+
+
+/* ========================================================================
+   Component: Notification
+ ========================================================================== */
+
+/*
+ * 1. Set position
+ * 2. Dimensions
+ */
+
+.uk-notification {
+    /* 1 */
+    position: fixed;
+    top: $notification-position;
+    left: $notification-position;
+    z-index: $notification-z-index;
+    /* 2 */
+    box-sizing: border-box;
+    width: $notification-width;
+    @if(mixin-exists(hook-notification)) {@include hook-notification();}
+}
+
+
+/* Position modifiers
+========================================================================== */
+
+.uk-notification-top-right,
+.uk-notification-bottom-right {
+    left: auto;
+    right: $notification-position;
+}
+
+.uk-notification-top-center,
+.uk-notification-bottom-center {
+    left: 50%;
+    margin-left: ($notification-width * -0.5);
+}
+
+.uk-notification-bottom-left,
+.uk-notification-bottom-right,
+.uk-notification-bottom-center {
+    top: auto;
+    bottom: $notification-position;
+}
+
+
+/* Responsiveness
+========================================================================== */
+
+/* Phones portrait and smaller */
+@media (max-width: $breakpoint-xsmall-max) {
+
+    .uk-notification {
+        left: $notification-position;
+        right: $notification-position;
+        width: auto;
+        margin: 0;
+    }
+
+}
+
+
+/* Message
+========================================================================== */
+
+.uk-notification-message {
+    position: relative;
+    padding: $notification-message-padding;
+    background: $notification-message-background;
+    color: $notification-message-color;
+    font-size: $notification-message-font-size;
+    line-height: $notification-message-line-height;
+    cursor: pointer;
+    @if(mixin-exists(hook-notification-message)) {@include hook-notification-message();}
+}
+
+* + .uk-notification-message { margin-top: $notification-message-margin-top; }
+
+
+/* Close
+ * Adopts `uk-close`
+ ========================================================================== */
+
+.uk-notification-close {
+    display: none;
+    position: absolute;
+    top: $notification-close-top;
+    right: $notification-close-right;
+    @if(mixin-exists(hook-notification-close)) {@include hook-notification-close();}
+}
+
+.uk-notification-message:hover .uk-notification-close { display: block; }
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Primary
+ */
+
+.uk-notification-message-primary {
+    color: $notification-message-primary-color;
+    @if(mixin-exists(hook-notification-message-primary)) {@include hook-notification-message-primary();}
+}
+
+/*
+ * Success
+ */
+
+.uk-notification-message-success {
+    color: $notification-message-success-color;
+    @if(mixin-exists(hook-notification-message-success)) {@include hook-notification-message-success();}
+}
+
+/*
+ * Warning
+ */
+
+.uk-notification-message-warning {
+    color: $notification-message-warning-color;
+    @if(mixin-exists(hook-notification-message-warning)) {@include hook-notification-message-warning();}
+}
+
+/*
+ * Danger
+ */
+
+.uk-notification-message-danger {
+    color: $notification-message-danger-color;
+    @if(mixin-exists(hook-notification-message-danger)) {@include hook-notification-message-danger();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-notification-misc)) {@include hook-notification-misc();}
+
+// @mixin hook-notification(){}
+// @mixin hook-notification-message(){}
+// @mixin hook-notification-close(){}
+// @mixin hook-notification-message-primary(){}
+// @mixin hook-notification-message-success(){}
+// @mixin hook-notification-message-warning(){}
+// @mixin hook-notification-message-danger(){}
+// @mixin hook-notification-misc(){}

data/_sass/uikit/components/offcanvas.scss

@@ -0,0 +1,324 @@
+// Name:            Off-canvas
+// Description:     Component to create an off-canvas sidebar
+//
+// Component:       `uk-offcanvas`
+//
+// Sub-objects:     `uk-offcanvas-bar`
+//                  `uk-offcanvas-container`
+//                  `uk-offcanvas-page`
+//
+// Adopted:         `uk-offcanvas-close`
+//
+// Modifiers:       `uk-offcanvas-flip`
+//                  `uk-offcanvas-bar-animation`
+//                  `uk-offcanvas-reveal`
+//                  `uk-offcanvas-overlay`
+//                  `uk-offcanvas-container-animation`
+//
+// States:          `uk-open`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$offcanvas-z-index:                              $global-z-index !default;
+
+$offcanvas-bar-width:                            270px !default;
+$offcanvas-bar-padding-vertical:                 20px !default;
+$offcanvas-bar-padding-horizontal:               20px !default;
+$offcanvas-bar-background:                       $global-secondary-background !default;
+$offcanvas-bar-color-mode:                       light !default;
+
+$offcanvas-bar-width-s:                          350px !default;
+$offcanvas-bar-padding-vertical-s:               $global-gutter !default;
+$offcanvas-bar-padding-horizontal-s:             $global-gutter !default;
+
+$offcanvas-close-position:                       5px !default;
+$offcanvas-close-padding:                        5px !default;
+
+$offcanvas-close-position-s:                     10px !default;
+
+$offcanvas-overlay-background:                   rgba(0,0,0,0.1) !default;
+
+
+/* ========================================================================
+   Component: Off-canvas
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ */
+
+.uk-offcanvas {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $offcanvas-z-index;
+}
+
+/*
+ * Flip modifier
+ */
+
+.uk-offcanvas-flip .uk-offcanvas {
+    right: 0;
+    left: auto;
+}
+
+
+/* Bar
+ ========================================================================== */
+
+/*
+ * 1. Set position
+ * 2. Size and style
+ * 3. Allow scrolling
+ */
+
+.uk-offcanvas-bar {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: (-$offcanvas-bar-width);
+    /* 2 */
+    box-sizing: border-box;
+    width: $offcanvas-bar-width;
+    padding: $offcanvas-bar-padding-vertical $offcanvas-bar-padding-horizontal;
+    background: $offcanvas-bar-background;
+    /* 3 */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    @if(mixin-exists(hook-offcanvas-bar)) {@include hook-offcanvas-bar();}
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-offcanvas-bar {
+        left: (-$offcanvas-bar-width-s);
+        width: $offcanvas-bar-width-s;
+        padding: $offcanvas-bar-padding-vertical-s $offcanvas-bar-padding-horizontal-s;
+    }
+
+}
+
+// Color Mode
+@if ( $offcanvas-bar-color-mode == light ) { .uk-offcanvas-bar { @extend .uk-light !optional;} }
+@if ( $offcanvas-bar-color-mode == dark ) { .uk-offcanvas-bar { @extend .uk-dark !optional;} }
+
+/* Flip modifier */
+.uk-offcanvas-flip .uk-offcanvas-bar {
+    left: auto;
+    right: (-$offcanvas-bar-width);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-offcanvas-flip .uk-offcanvas-bar { right: (-$offcanvas-bar-width-s); }
+
+}
+
+/*
+ * Open
+ */
+
+.uk-open > .uk-offcanvas-bar { left: 0; }
+.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar {
+    left: auto;
+    right: 0;
+}
+
+/*
+ * Slide Animation (Used in slide and push mode)
+ */
+
+.uk-offcanvas-bar-animation { transition: left 0.3s ease-out; }
+.uk-offcanvas-flip .uk-offcanvas-bar-animation { transition-property: right; }
+
+/*
+ * Reveal Animation
+ * 1. Set position
+ * 2. Clip the bar
+ * 3. Animation
+ * 4. Reset position
+ */
+
+.uk-offcanvas-reveal {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    /* 2 */
+    width: 0;
+    overflow: hidden;
+    /* 3 */
+    transition: width 0.3s ease-out;
+}
+
+.uk-offcanvas-reveal .uk-offcanvas-bar {
+    /* 4 */
+    left: 0;
+}
+
+.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar {
+    /* 4 */
+    left: auto;
+    right: 0;
+}
+
+.uk-open > .uk-offcanvas-reveal { width: $offcanvas-bar-width; }
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-open > .uk-offcanvas-reveal { width: $offcanvas-bar-width-s; }
+
+}
+
+/*
+ * Flip modifier
+ */
+
+.uk-offcanvas-flip .uk-offcanvas-reveal {
+    right: 0;
+    left: auto;
+}
+
+
+/* Close
+ * Adopts `uk-close`
+ ========================================================================== */
+
+.uk-offcanvas-close {
+    position: absolute;
+    z-index: $offcanvas-z-index;
+    top: $offcanvas-close-position;
+    right: $offcanvas-close-position;
+    padding: $offcanvas-close-padding;
+    @if(mixin-exists(hook-offcanvas-close)) {@include hook-offcanvas-close();}
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-offcanvas-close {
+        top: $offcanvas-close-position-s;
+        right: $offcanvas-close-position-s;
+    }
+
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-offcanvas-close:first-child + * { margin-top: 0; }
+
+
+/* Overlay
+ ========================================================================== */
+
+/*
+ * Overlay the whole page. Needed for the `::before`
+ * 1. Using `100vw` so no modification is needed when off-canvas is flipped
+ * 2. Allow for closing with swipe gesture on devices with pointer events.
+ */
+
+.uk-offcanvas-overlay {
+    /* 1 */
+    width: 100vw;
+    /* 2 */
+    touch-action: none;
+}
+
+/*
+ * 1. Mask the whole page
+ * 2. Fade-in transition
+ */
+
+.uk-offcanvas-overlay::before {
+    /* 1 */
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: $offcanvas-overlay-background;
+    /* 2 */
+    opacity: 0;
+    transition: opacity 0.15s linear;
+    @if(mixin-exists(hook-offcanvas-overlay)) {@include hook-offcanvas-overlay();}
+}
+
+.uk-offcanvas-overlay.uk-open::before { opacity: 1; }
+
+
+/* Prevent scrolling
+ ========================================================================== */
+
+/*
+ * Prevent horizontal scrollbar when the content is slide-out
+ * Has to be on the `html` element too to make it work on the `body`
+ */
+
+.uk-offcanvas-page,
+.uk-offcanvas-container { overflow-x: hidden; }
+
+
+/* Container
+ ========================================================================== */
+
+/*
+ * Prepare slide-out animation (Used in reveal and push mode)
+ * Using `position: left` instead of `transform` because position `fixed` elements like sticky navbars
+ * lose their fixed state and behaves like `absolute` within a transformed container
+ * 1. Provide a fixed width and prevent shrinking
+ */
+
+.uk-offcanvas-container {
+    position: relative;
+    left: 0;
+    transition: left 0.3s ease-out;
+    /* 1 */
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/*
+ * Activate slide-out animation
+ */
+
+:not(.uk-offcanvas-flip).uk-offcanvas-container-animation { left: $offcanvas-bar-width; }
+
+.uk-offcanvas-flip.uk-offcanvas-container-animation { left: (-$offcanvas-bar-width); }
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    :not(.uk-offcanvas-flip).uk-offcanvas-container-animation { left: $offcanvas-bar-width-s; }
+
+    .uk-offcanvas-flip.uk-offcanvas-container-animation { left: (-$offcanvas-bar-width-s); }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-offcanvas-misc)) {@include hook-offcanvas-misc();}
+
+// @mixin hook-offcanvas-bar(){}
+// @mixin hook-offcanvas-close(){}
+// @mixin hook-offcanvas-overlay(){}
+// @mixin hook-offcanvas-misc(){}

data/_sass/uikit/components/overlay.scss

@@ -0,0 +1,85 @@
+// Name:            Overlay
+// Description:     Component to create content areas overlaying an image
+//
+// Component:       `uk-overlay`
+//
+// Adopted:         `uk-overlay-icon`
+//
+// Modifier:        `uk-overlay-default`
+//                  `uk-overlay-primary`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$overlay-padding-horizontal:                     $global-gutter !default;
+$overlay-padding-vertical:                       $global-gutter !default;
+
+$overlay-default-background:                     rgba($global-background, 0.8) !default;
+
+$overlay-primary-background:                     rgba($global-secondary-background, 0.8) !default;
+$overlay-primary-color-mode:                     light !default;
+
+
+/* ========================================================================
+   Component: Overlay
+ ========================================================================== */
+
+.uk-overlay {
+    padding: $overlay-padding-vertical $overlay-padding-horizontal;
+    @if(mixin-exists(hook-overlay)) {@include hook-overlay();}
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-overlay > :last-child { margin-bottom: 0; }
+
+
+/* Icon
+ ========================================================================== */
+
+.uk-overlay-icon {
+    @if(mixin-exists(hook-overlay-icon)) {@include hook-overlay-icon();}
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-overlay-default {
+    background: $overlay-default-background;
+    @if(mixin-exists(hook-overlay-default)) {@include hook-overlay-default();}
+}
+
+/*
+ * Primary
+ */
+
+.uk-overlay-primary {
+    background: $overlay-primary-background;
+    @if(mixin-exists(hook-overlay-primary)) {@include hook-overlay-primary();}
+}
+
+// Color Mode
+@if ( $overlay-primary-color-mode == light ) { .uk-overlay-primary { @extend .uk-light !optional;} }
+@if ( $overlay-primary-color-mode == dark ) { .uk-overlay-primary { @extend .uk-dark !optional;} }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-overlay-misc)) {@include hook-overlay-misc();}
+
+// @mixin hook-overlay(){}
+// @mixin hook-overlay-icon(){}
+// @mixin hook-overlay-default(){}
+// @mixin hook-overlay-primary(){}
+// @mixin hook-overlay-misc(){}

data/_sass/uikit/components/padding.scss

@@ -0,0 +1,81 @@
+// Name:            Padding
+// Description:     Utilities for padding
+//
+// Component:       `uk-padding`
+//                  `uk-padding-large`
+//                  `uk-padding-remove-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$padding-padding:                                        $global-gutter !default;
+$padding-padding-l:                                      $global-medium-gutter !default;
+
+$padding-small-padding:                                  $global-small-gutter !default;
+
+$padding-large-padding:                                  $global-medium-gutter !default;
+$padding-large-padding-l:                                $global-large-gutter !default;
+
+
+/* ========================================================================
+   Component: Padding
+ ========================================================================== */
+
+.uk-padding { padding: $padding-padding; }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-padding { padding: $padding-padding-l; }
+
+}
+
+
+/* Small
+ ========================================================================== */
+
+.uk-padding-small { padding: $padding-small-padding; }
+
+
+/* Large
+ ========================================================================== */
+
+.uk-padding-large { padding: $padding-large-padding; }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-padding-large { padding: $padding-large-padding-l; }
+
+}
+
+
+/* Remove
+ ========================================================================== */
+
+.uk-padding-remove { padding: 0 !important; }
+.uk-padding-remove-top { padding-top: 0 !important; }
+.uk-padding-remove-bottom { padding-bottom: 0 !important; }
+.uk-padding-remove-left { padding-left: 0 !important; }
+.uk-padding-remove-right { padding-right: 0 !important; }
+
+.uk-padding-remove-vertical {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+.uk-padding-remove-horizontal {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-padding-misc)) {@include hook-padding-misc();}
+
+// @mixin hook-padding-misc(){}