juicelang-theme 0.1.0

data/_sass/uikit/components/mixin.scss

@@ -0,0 +1,32 @@
+//
+// Component:       Mixin
+// Description:     Defines mixins which are used across all components
+//
+// ========================================================================
+
+
+// SVG
+// ========================================================================
+
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@mixin svg-fill($src, $color-default, $color-new){
+
+    $replace-src: str-replace($src, $color-default, $color-new) !default;
+    $replace-src: str-replace($replace-src, "#", "%23");
+    background-image: url(quote($replace-src));
+}

data/_sass/uikit/components/modal.scss

@@ -0,0 +1,367 @@
+// Name:            Modal
+// Description:     Component to create modal dialogs
+//
+// Component:       `uk-modal`
+//
+// Sub-objects:     `uk-modal-page`
+//                  `uk-modal-dialog`
+//                  `uk-modal-header`
+//                  `uk-modal-body`
+//                  `uk-modal-footer`
+//                  `uk-modal-title`
+//                  `uk-modal-close`
+//
+// Adopted:         `uk-modal-close-default`
+//                  `uk-modal-close-outside`
+//                  `uk-modal-close-full`
+//
+// Modifiers:       `uk-modal-container`
+//                  `uk-modal-full`
+//
+// States:          `uk-open`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$modal-z-index:                                  $global-z-index + 10 !default;
+$modal-background:                               rgba(0,0,0,0.6) !default;
+
+$modal-padding-horizontal:                       15px !default;
+$modal-padding-horizontal-s:                     $global-gutter !default;
+$modal-padding-horizontal-m:                     $global-medium-gutter !default;
+$modal-padding-vertical:                         $modal-padding-horizontal !default;
+$modal-padding-vertical-s:                       50px !default;
+
+$modal-dialog-width:                             600px !default;
+$modal-dialog-background:                        $global-background !default;
+
+$modal-container-width:                          1200px !default;
+
+$modal-body-padding-horizontal:                  20px !default;
+$modal-body-padding-vertical:                    20px !default;
+$modal-body-padding-horizontal-s:                $global-gutter !default;
+$modal-body-padding-vertical-s:                  $global-gutter !default;
+
+$modal-header-padding-horizontal:                20px !default;
+$modal-header-padding-vertical:                  ($modal-header-padding-horizontal * 0.5) !default;
+$modal-header-padding-horizontal-s:              $global-gutter !default;
+$modal-header-padding-vertical-s:                ($modal-header-padding-horizontal-s * 0.5) !default;
+$modal-header-background:                        $global-muted-background !default;
+
+$modal-footer-padding-horizontal:                20px !default;
+$modal-footer-padding-vertical:                  ($modal-footer-padding-horizontal * 0.5) !default;
+$modal-footer-padding-horizontal-s:              $global-gutter !default;
+$modal-footer-padding-vertical-s:                ($modal-footer-padding-horizontal-s * 0.5) !default;
+$modal-footer-background:                        $global-muted-background !default;
+
+$modal-title-font-size:                          $global-xlarge-font-size !default;
+$modal-title-line-height:                        1.3 !default;
+
+$modal-close-position:                           $global-small-margin !default;
+$modal-close-padding:                            5px !default;
+
+$modal-close-outside-position:                   0 !default;
+$modal-close-outside-translate:                  100% !default;
+$modal-close-outside-color:                      lighten($global-inverse-color, 20%) !default;
+$modal-close-outside-hover-color:                $global-inverse-color !default;
+
+
+/* ========================================================================
+   Component: Modal
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Allow scrolling for the modal dialog
+ * 4. Horizontal padding
+ * 5. Mask the background page
+ * 6. Fade-in transition
+ */
+
+.uk-modal {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $modal-z-index;
+    /* 3 */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    /* 4 */
+    padding: $modal-padding-vertical $modal-padding-horizontal;
+    /* 5 */
+    background: $modal-background;
+    /* 6 */
+    opacity: 0;
+    transition: opacity 0.15s linear;
+    @if(mixin-exists(hook-modal)) {@include hook-modal();}
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-modal { padding: $modal-padding-vertical-s $modal-padding-horizontal-s; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-modal {
+        padding-left: $modal-padding-horizontal-m;
+        padding-right: $modal-padding-horizontal-m;
+    }
+
+}
+
+/*
+ * Open
+ */
+
+.uk-modal.uk-open { opacity: 1; }
+
+
+/* Page
+ ========================================================================== */
+
+/*
+ * Prevent scrollbars
+ */
+
+.uk-modal-page { overflow: hidden; }
+
+
+/* Dialog
+ ========================================================================== */
+
+/*
+ * 1. Create position context for spinner and close button
+ * 2. Dimensions
+ * 3. `!important` is needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
+ * 4. Style
+ * 5. Slide-in transition
+ */
+
+.uk-modal-dialog {
+    /* 1 */
+    position: relative;
+    /* 2 */
+    box-sizing: border-box;
+    margin: 0 auto;
+    width: $modal-dialog-width;
+    /* 3 */
+    max-width: 100% !important;
+    /* 4 */
+    background: $modal-dialog-background;
+    /* 5 */
+    opacity: 0;
+    transform: translateY(-100px);
+    transition: 0.3s linear;
+    transition-property: opacity, transform;
+    @if(mixin-exists(hook-modal-dialog)) {@include hook-modal-dialog();}
+}
+
+/*
+ * Open
+ */
+
+.uk-open > .uk-modal-dialog {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Container size
+ * Take the same size as the Container component
+ */
+
+.uk-modal-container .uk-modal-dialog { width: $modal-container-width; }
+
+/*
+ * Full size
+ * 1. Remove padding and background from modal
+ * 2. Reset all default declarations from modal dialog
+ */
+
+/* 1 */
+.uk-modal-full {
+    padding: 0;
+    background: none;
+}
+
+/* 2 */
+.uk-modal-full .uk-modal-dialog {
+    margin: 0;
+    width: 100%;
+    max-width: 100%;
+    transform: translateY(0);
+    @if(mixin-exists(hook-modal-full)) {@include hook-modal-full();}
+}
+
+
+/* Sections
+ ========================================================================== */
+
+.uk-modal-body {
+    display: flow-root;
+    padding: $modal-body-padding-vertical $modal-body-padding-horizontal;
+    @if(mixin-exists(hook-modal-body)) {@include hook-modal-body();}
+}
+
+.uk-modal-header {
+    display: flow-root;
+    padding: $modal-header-padding-vertical $modal-header-padding-horizontal;
+    background: $modal-header-background;
+    @if(mixin-exists(hook-modal-header)) {@include hook-modal-header();}
+}
+
+.uk-modal-footer {
+    display: flow-root;
+    padding: $modal-footer-padding-vertical $modal-footer-padding-horizontal;
+    background: $modal-footer-background;
+    @if(mixin-exists(hook-modal-footer)) {@include hook-modal-footer();}
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-modal-body { padding: $modal-body-padding-vertical-s $modal-body-padding-horizontal-s; }
+    .uk-modal-header { padding: $modal-header-padding-vertical-s $modal-header-padding-horizontal-s; }
+    .uk-modal-footer { padding: $modal-footer-padding-vertical-s $modal-footer-padding-horizontal-s; }
+
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-modal-body > :last-child,
+.uk-modal-header > :last-child,
+.uk-modal-footer > :last-child { margin-bottom: 0; }
+
+
+/* Title
+ ========================================================================== */
+
+.uk-modal-title {
+    font-size: $modal-title-font-size;
+    line-height: $modal-title-line-height;
+    @if(mixin-exists(hook-modal-title)) {@include hook-modal-title();}
+}
+
+
+/* Close
+ * Adopts `uk-close`
+ ========================================================================== */
+
+[class*='uk-modal-close-'] {
+    position: absolute;
+    z-index: $modal-z-index;
+    top: $modal-close-position;
+    right: $modal-close-position;
+    padding: $modal-close-padding;
+    @if(mixin-exists(hook-modal-close)) {@include hook-modal-close();}
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+[class*='uk-modal-close-']:first-child + * { margin-top: 0; }
+
+/*
+ * Hover
+ */
+
+[class*='uk-modal-close-']:hover {
+    @if(mixin-exists(hook-modal-close-hover)) {@include hook-modal-close-hover();}
+}
+
+/*
+ * Default
+ */
+
+.uk-modal-close-default {
+    @if(mixin-exists(hook-modal-close-default)) {@include hook-modal-close-default();}
+}
+
+.uk-modal-close-default:hover {
+    @if(mixin-exists(hook-modal-close-default-hover)) {@include hook-modal-close-default-hover();}
+}
+
+/*
+ * Outside
+ * 1. Prevent scrollbar on small devices
+ */
+
+.uk-modal-close-outside {
+    top: $modal-close-outside-position;
+    /* 1 */
+    right: (-$modal-close-padding);
+    transform: translate(0, -($modal-close-outside-translate));
+    color: $modal-close-outside-color;
+    @if(mixin-exists(hook-modal-close-outside)) {@include hook-modal-close-outside();}
+}
+
+.uk-modal-close-outside:hover {
+    color: $modal-close-outside-hover-color;
+    @if(mixin-exists(hook-modal-close-outside-hover)) {@include hook-modal-close-outside-hover();}
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    /* 1 */
+    .uk-modal-close-outside {
+        right: $modal-close-outside-position;
+        transform: translate($modal-close-outside-translate, -($modal-close-outside-translate));
+    }
+
+}
+
+/*
+ * Full
+ */
+
+.uk-modal-close-full {
+    @if(mixin-exists(hook-modal-close-full)) {@include hook-modal-close-full();}
+}
+
+.uk-modal-close-full:hover {
+    @if(mixin-exists(hook-modal-close-full-hover)) {@include hook-modal-close-full-hover();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-modal-misc)) {@include hook-modal-misc();}
+
+// @mixin hook-modal(){}
+// @mixin hook-modal-dialog(){}
+// @mixin hook-modal-full(){}
+// @mixin hook-modal-header(){}
+// @mixin hook-modal-body(){}
+// @mixin hook-modal-footer(){}
+// @mixin hook-modal-title(){}
+// @mixin hook-modal-close(){}
+// @mixin hook-modal-close-hover(){}
+// @mixin hook-modal-close-default(){}
+// @mixin hook-modal-close-default-hover(){}
+// @mixin hook-modal-close-outside(){}
+// @mixin hook-modal-close-outside-hover(){}
+// @mixin hook-modal-close-full(){}
+// @mixin hook-modal-close-full-hover(){}
+// @mixin hook-modal-misc(){}