juicelang-theme 0.1.0

data/_sass/uikit/components/search.scss

@@ -0,0 +1,339 @@
+// Name:            Search
+// Description:     Component to create the search
+//
+// Component:       `uk-search`
+//
+// Sub-objects:     `uk-search-input`
+//                  `uk-search-toggle`
+//
+// Adopted:         `uk-search-icon`
+//
+// Modifier:        `uk-search-default`
+//                  `uk-search-navbar`
+//                  `uk-search-large`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$search-color:                                       $global-color !default;
+$search-placeholder-color:                           $global-muted-color !default;
+
+$search-icon-color:                                  $global-muted-color !default;
+
+$search-default-width:                               240px !default;
+$search-default-height:                              $global-control-height !default;
+$search-default-padding-horizontal:                  10px !default;
+$search-default-background:                          $global-muted-background !default;
+$search-default-focus-background:                    darken($search-default-background, 5%) !default;
+
+$search-default-icon-width:                          $global-control-height !default;
+$search-default-icon-padding:                        0 !default;
+
+$search-navbar-width:                                400px !default;
+$search-navbar-height:                               40px !default;
+$search-navbar-background:                           transparent !default;
+$search-navbar-font-size:                            $global-large-font-size !default;
+
+$search-navbar-icon-width:                           40px !default;
+$search-navbar-icon-padding:                         0 !default;
+
+$search-large-width:                                 500px !default;
+$search-large-height:                                80px !default;
+$search-large-background:                            transparent !default;
+$search-large-font-size:                             $global-2xlarge-font-size !default;
+
+$search-large-icon-width:                            80px !default;
+$search-large-icon-padding:                          0 !default;
+
+$search-toggle-color:                                $global-muted-color !default;
+$search-toggle-hover-color:                          $global-color !default;
+
+
+/* ========================================================================
+   Component: Search
+ ========================================================================== */
+
+/*
+ * 1. Container fits its content
+ * 2. Create position context
+ * 3. Prevent content overflow
+ * 4. Reset `form`
+ */
+
+.uk-search {
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    position: relative;
+    /* 3 */
+    max-width: 100%;
+    /* 4 */
+    margin: 0;
+}
+
+
+/* Input
+ ========================================================================== */
+
+/*
+ * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
+ */
+
+.uk-search-input::-webkit-search-cancel-button,
+.uk-search-input::-webkit-search-decoration { -webkit-appearance: none; }
+
+/*
+ * Removes placeholder transparency in Firefox.
+ */
+
+.uk-search-input::-moz-placeholder { opacity: 1; }
+
+/*
+ * 1. Define consistent box sizing.
+ * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
+ * 3. Remove `border-radius` in iOS.
+ * 4. Change font properties to `inherit` in all browsers
+ * 5. Show the overflow in Edge.
+ * 6. Remove default style in iOS.
+ * 7. Vertical alignment
+ * 8. Take the full container width
+ * 9. Style
+ */
+
+.uk-search-input {
+    /* 1 */
+    box-sizing: border-box;
+    /* 2 */
+    margin: 0;
+    /* 3 */
+    border-radius: 0;
+    /* 4 */
+    font: inherit;
+    /* 5 */
+    overflow: visible;
+    /* 6 */
+    -webkit-appearance: none;
+    /* 7 */
+    vertical-align: middle;
+    /* 8 */
+    width: 100%;
+    /* 9 */
+    border: none;
+    color: $search-color;
+    @if(mixin-exists(hook-search-input)) {@include hook-search-input();}
+}
+
+.uk-search-input:focus { outline: none; }
+
+/* Placeholder */
+.uk-search-input::placeholder { color: $search-placeholder-color; }
+
+
+/* Icon (Adopts `uk-icon`)
+ ========================================================================== */
+
+/*
+ * Position above input
+ * 1. Set position
+ * 2. Center icon vertically and horizontally
+ * 3. Style
+ */
+
+.uk-search .uk-search-icon {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    /* 2 */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    /* 3 */
+    color: $search-icon-color;
+    @if(mixin-exists(hook-search-icon)) {@include hook-search-icon();}
+}
+
+/*
+ * Required for `a`.
+ */
+
+.uk-search .uk-search-icon:hover { color: $search-icon-color; }
+
+/*
+ * Make `input` element clickable through icon, e.g. if it's a `span`
+ */
+
+.uk-search .uk-search-icon:not(a):not(button):not(input) { pointer-events: none; }
+
+/*
+ * Position modifier
+ */
+
+.uk-search .uk-search-icon-flip {
+    right: 0;
+    left: auto;
+}
+
+
+/* Default modifier
+ ========================================================================== */
+
+.uk-search-default { width: $search-default-width; }
+
+/*
+ * Input
+ */
+
+.uk-search-default .uk-search-input {
+    height: $search-default-height;
+    padding-left: $search-default-padding-horizontal;
+    padding-right: $search-default-padding-horizontal;
+    background: $search-default-background;
+    @if(mixin-exists(hook-search-default-input)) {@include hook-search-default-input();}
+}
+
+/* Focus */
+.uk-search-default .uk-search-input:focus {
+    background-color: $search-default-focus-background;
+    @if(mixin-exists(hook-search-default-input-focus)) {@include hook-search-default-input-focus();}
+}
+
+/*
+ * Icon
+ */
+
+.uk-search-default .uk-search-icon { width: $search-default-icon-width; }
+
+.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-default-icon-width + $search-default-icon-padding); }
+.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-default-icon-width + $search-default-icon-padding); }
+
+
+/* Navbar modifier
+ ========================================================================== */
+
+.uk-search-navbar { width: $search-navbar-width; }
+
+/*
+ * Input
+ */
+
+.uk-search-navbar .uk-search-input {
+    height: $search-navbar-height;
+    background: $search-navbar-background;
+    font-size: $search-navbar-font-size;
+    @if(mixin-exists(hook-search-navbar-input)) {@include hook-search-navbar-input();}
+}
+
+/* Focus */
+.uk-search-navbar .uk-search-input:focus {
+    @if(mixin-exists(hook-search-navbar-input-focus)) {@include hook-search-navbar-input-focus();}
+}
+
+/*
+ * Icon
+ */
+
+.uk-search-navbar .uk-search-icon { width: $search-navbar-icon-width; }
+
+.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-navbar-icon-width + $search-navbar-icon-padding); }
+.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-navbar-icon-width + $search-navbar-icon-padding); }
+
+
+/* Large modifier
+ ========================================================================== */
+
+.uk-search-large { width: $search-large-width; }
+
+/*
+ * Input
+ */
+
+.uk-search-large .uk-search-input {
+    height: $search-large-height;
+    background: $search-large-background;
+    font-size: $search-large-font-size;
+    @if(mixin-exists(hook-search-large-input)) {@include hook-search-large-input();}
+}
+
+/* Focus */
+.uk-search-large .uk-search-input:focus {
+    @if(mixin-exists(hook-search-large-input-focus)) {@include hook-search-large-input-focus();}
+}
+
+/*
+ * Icon
+ */
+
+.uk-search-large .uk-search-icon { width: $search-large-icon-width; }
+
+.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-large-icon-width + $search-large-icon-padding); }
+.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-large-icon-width + $search-large-icon-padding); }
+
+
+/* Toggle
+ ========================================================================== */
+
+.uk-search-toggle {
+    color: $search-toggle-color;
+    @if(mixin-exists(hook-search-toggle)) {@include hook-search-toggle();}
+}
+
+/* Hover */
+.uk-search-toggle:hover {
+    color: $search-toggle-hover-color;
+    @if(mixin-exists(hook-search-toggle-hover)) {@include hook-search-toggle-hover();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-search-misc)) {@include hook-search-misc();}
+
+// @mixin hook-search-input(){}
+// @mixin hook-search-icon(){}
+// @mixin hook-search-default-input(){}
+// @mixin hook-search-default-input-focus(){}
+// @mixin hook-search-navbar-input(){}
+// @mixin hook-search-navbar-input-focus(){}
+// @mixin hook-search-large-input(){}
+// @mixin hook-search-large-input-focus(){}
+
+// @mixin hook-search-toggle(){}
+// @mixin hook-search-toggle-hover(){}
+
+// @mixin hook-search-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-search-color:                          $inverse-global-color !default;
+$inverse-search-placeholder-color:              $inverse-global-muted-color !default;
+
+$inverse-search-icon-color:                     $inverse-global-muted-color !default;
+
+$inverse-search-default-background:             $inverse-global-muted-background !default;
+$inverse-search-default-focus-background:       fade-in($inverse-search-default-background, 0.05) !default;
+
+$inverse-search-navbar-background:              transparent !default;
+
+$inverse-search-large-background:               transparent !default;
+
+$inverse-search-toggle-color:                   $inverse-global-muted-color !default;
+$inverse-search-toggle-hover-color:             $inverse-global-color !default;
+
+
+
+// @mixin hook-inverse-search-default-input(){}
+// @mixin hook-inverse-search-default-input-focus(){}
+// @mixin hook-inverse-search-navbar-input(){}
+// @mixin hook-inverse-search-navbar-input-focus(){}
+// @mixin hook-inverse-search-large-input(){}
+// @mixin hook-inverse-search-large-input-focus(){}
+// @mixin hook-inverse-search-toggle(){}
+// @mixin hook-inverse-search-toggle-hover(){}

data/_sass/uikit/components/section.scss

@@ -0,0 +1,212 @@
+// Name:            Section
+// Description:     Component to create horizontal layout section
+//
+// Component:       `uk-section`
+//
+// Modifiers:       `uk-section-xsmall`
+//                  `uk-section-small`
+//                  `uk-section-large`
+//                  `uk-section-xlarge`
+//                  `uk-section-default`
+//                  `uk-section-muted`
+//                  `uk-section-primary`
+//                  `uk-section-secondary`
+//                  `uk-section-overlap`
+//
+// States:          `uk-preserve-color`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$section-padding-vertical:                         $global-medium-margin !default;
+$section-padding-vertical-m:                       $global-large-margin !default;
+
+$section-xsmall-padding-vertical:                  $global-margin !default;
+
+$section-small-padding-vertical:                   $global-medium-margin !default;
+
+$section-large-padding-vertical:                   $global-large-margin !default;
+$section-large-padding-vertical-m:                 $global-xlarge-margin !default;
+
+$section-xlarge-padding-vertical:                  $global-xlarge-margin !default;
+$section-xlarge-padding-vertical-m:                ($global-large-margin + $global-xlarge-margin) !default;
+
+$section-default-background:                       $global-background !default;
+
+$section-muted-background:                         $global-muted-background !default;
+
+$section-primary-background:                       $global-primary-background !default;
+$section-primary-color-mode:                       light !default;
+
+$section-secondary-background:                     $global-secondary-background !default;
+$section-secondary-color-mode:                     light !default;
+
+
+/* ========================================================================
+   Component: Section
+ ========================================================================== */
+
+/*
+ * 1. Make it work with `100vh` and height in general
+ */
+
+.uk-section {
+    display: flow-root;
+    box-sizing: border-box; /* 1 */
+    padding-top: $section-padding-vertical;
+    padding-bottom: $section-padding-vertical;
+    @if(mixin-exists(hook-section)) {@include hook-section();}
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-section {
+        padding-top: $section-padding-vertical-m;
+        padding-bottom: $section-padding-vertical-m;
+    }
+
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-section > :last-child { margin-bottom: 0; }
+
+
+/* Size modifiers
+ ========================================================================== */
+
+/*
+ * XSmall
+ */
+
+.uk-section-xsmall {
+    padding-top: $section-xsmall-padding-vertical;
+    padding-bottom: $section-xsmall-padding-vertical;
+}
+
+/*
+ * Small
+ */
+
+.uk-section-small {
+    padding-top: $section-small-padding-vertical;
+    padding-bottom: $section-small-padding-vertical;
+}
+
+/*
+ * Large
+ */
+
+.uk-section-large {
+    padding-top: $section-large-padding-vertical;
+    padding-bottom: $section-large-padding-vertical;
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-section-large {
+        padding-top: $section-large-padding-vertical-m;
+        padding-bottom: $section-large-padding-vertical-m;
+    }
+
+}
+
+
+/*
+ * XLarge
+ */
+
+.uk-section-xlarge {
+    padding-top: $section-xlarge-padding-vertical;
+    padding-bottom: $section-xlarge-padding-vertical;
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-section-xlarge {
+        padding-top: $section-xlarge-padding-vertical-m;
+        padding-bottom: $section-xlarge-padding-vertical-m;
+    }
+
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-section-default {
+    background: $section-default-background;
+    @if(mixin-exists(hook-section-default)) {@include hook-section-default();}
+}
+
+/*
+ * Muted
+ */
+
+.uk-section-muted {
+    background: $section-muted-background;
+    @if(mixin-exists(hook-section-muted)) {@include hook-section-muted();}
+}
+
+/*
+ * Primary
+ */
+
+.uk-section-primary {
+    background: $section-primary-background;
+    @if(mixin-exists(hook-section-primary)) {@include hook-section-primary();}
+}
+
+@if ( $section-primary-color-mode == light ) { .uk-section-primary:not(.uk-preserve-color) { @extend .uk-light !optional;} }
+@if ( $section-primary-color-mode == dark ) { .uk-section-primary:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
+
+/*
+ * Secondary
+ */
+
+.uk-section-secondary {
+    background: $section-secondary-background;
+    @if(mixin-exists(hook-section-secondary)) {@include hook-section-secondary();}
+}
+
+@if ( $section-secondary-color-mode == light ) { .uk-section-secondary:not(.uk-preserve-color) { @extend .uk-light !optional;} }
+@if ( $section-secondary-color-mode == dark ) { .uk-section-secondary:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
+
+
+/* Overlap modifier
+ ========================================================================== */
+
+/*
+ * Reserved modifier to make a section overlap another section with an border image
+ * Implemented by the theme
+ */
+
+.uk-section-overlap {
+    @if(mixin-exists(hook-section-overlap)) {@include hook-section-overlap();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-section-misc)) {@include hook-section-misc();}
+
+// @mixin hook-section(){}
+// @mixin hook-section-default(){}
+// @mixin hook-section-muted(){}
+// @mixin hook-section-secondary(){}
+// @mixin hook-section-primary(){}
+// @mixin hook-section-overlap(){}
+// @mixin hook-section-misc(){}

data/_sass/uikit/components/slidenav.scss

@@ -0,0 +1,120 @@
+// Name:            Slidenav
+// Description:     Component to create previous/next icon navigations
+//
+// Component:       `uk-slidenav`
+//
+// Sub-objects:     `uk-slidenav-container`
+//
+// Modifiers:       `uk-slidenav-previous`
+//                  `uk-slidenav-next`
+//                  `uk-slidenav-large`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$slidenav-padding-vertical:                      5px !default;
+$slidenav-padding-horizontal:                    10px !default;
+
+$slidenav-color:                                 rgba($global-color, 0.5) !default;
+$slidenav-hover-color:                           rgba($global-color, 0.9) !default;
+$slidenav-active-color:                          rgba($global-color, 0.5) !default;
+
+$slidenav-large-padding-vertical:                10px !default;
+$slidenav-large-padding-horizontal:              $slidenav-large-padding-vertical !default;
+
+
+/* ========================================================================
+   Component: Slidenav
+ ========================================================================== */
+
+/*
+ * Adopts `uk-icon`
+ */
+
+.uk-slidenav {
+    padding: $slidenav-padding-vertical $slidenav-padding-horizontal;
+    color: $slidenav-color;
+    @if(mixin-exists(hook-slidenav)) {@include hook-slidenav();}
+}
+
+/* Hover */
+.uk-slidenav:hover {
+    color: $slidenav-hover-color;
+    @if(mixin-exists(hook-slidenav-hover)) {@include hook-slidenav-hover();}
+}
+
+/* OnClick */
+.uk-slidenav:active {
+    color: $slidenav-active-color;
+    @if(mixin-exists(hook-slidenav-active)) {@include hook-slidenav-active();}
+}
+
+
+/* Icon modifier
+ ========================================================================== */
+
+/*
+ * Previous
+ */
+
+.uk-slidenav-previous {
+    @if(mixin-exists(hook-slidenav-previous)) {@include hook-slidenav-previous();}
+}
+
+/*
+ * Next
+ */
+
+.uk-slidenav-next {
+    @if(mixin-exists(hook-slidenav-next)) {@include hook-slidenav-next();}
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-slidenav-large {
+    padding: $slidenav-large-padding-vertical $slidenav-large-padding-horizontal;
+    @if(mixin-exists(hook-slidenav-large)) {@include hook-slidenav-large();}
+}
+
+
+/* Container
+ ========================================================================== */
+
+.uk-slidenav-container {
+    display: flex;
+    @if(mixin-exists(hook-slidenav-container)) {@include hook-slidenav-container();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-slidenav-misc)) {@include hook-slidenav-misc();}
+
+// @mixin hook-slidenav(){}
+// @mixin hook-slidenav-hover(){}
+// @mixin hook-slidenav-active(){}
+// @mixin hook-slidenav-previous(){}
+// @mixin hook-slidenav-next(){}
+// @mixin hook-slidenav-large(){}
+// @mixin hook-slidenav-container(){}
+// @mixin hook-slidenav-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-slidenav-color:                        rgba($inverse-global-color, 0.7) !default;
+$inverse-slidenav-hover-color:                  rgba($inverse-global-color, 0.95) !default;
+$inverse-slidenav-active-color:                 rgba($inverse-global-color, 0.7) !default;
+
+
+
+// @mixin hook-inverse-slidenav(){}
+// @mixin hook-inverse-slidenav-hover(){}
+// @mixin hook-inverse-slidenav-active(){}