titon-toolkit 2.0.2 → 2.1.0

data/scss/toolkit/components/lazy-load.scss

@@ -6,7 +6,9 @@
 
 @import "../common";
 
-#{$lazyLoad-class} {
-    background-image: none !important;
-    transition: background-image $lazyLoad-transition;
-}
+@include export("lazy-load") {
+    #{$lazyLoad-class} {
+        background-image: none !important;
+        transition: background-image $lazyLoad-transition;
+    }
+}

data/scss/toolkit/components/loader.scss

@@ -9,155 +9,157 @@
 // Based on SpinKit
 // http://tobiasahlin.com/spinkit/
 
-#{$loader-class} {
-    @include reset-inline-block;
-    margin: 0 auto;
-    text-align: center;
-
-    > span {
-        display: inline-block;
-        margin: 0 2px;
-    }
-}
-
-#{$loader-class-message} {
-    margin-top: 1rem;
-}
-
-//-------------------- Bar Wave --------------------//
+@include export("loader") {
+    #{$loader-class} {
+        @include reset-inline-block;
+        margin: 0 auto;
+        text-align: center;
 
-@if $loader-type == "bar-wave" or $loader-type == "all" {
-    @keyframes bar-wave {
-        0%, 50%, 100% {
-            transform: scaleY(1.0);
-        }
-        25% {
-            transform: scaleY(2.0);
+        > span {
+            display: inline-block;
+            margin: 0 2px;
         }
     }
 
-    #{$loader-class}.bar-wave {
-        > span {
-            background: $loader-color;
-            height: $loader-bar-height;
-            width: $loader-bar-width;
-            animation: bar-wave 1.2s infinite ease-in-out;
+    #{$loader-class-message} {
+        margin-top: 1rem;
+    }
 
-            @for $i from 2 through $loader-wave-count {
-                &:nth-child(#{$i}) { animation-delay: -#{(1.3 - ($i * 0.1))}s; }
-            }
-        }
+    //-------------------- Bar Wave --------------------//
 
-        #{$loader-class-message} {
-            margin-top: 1.5rem;
+    @if $loader-type == "bar-wave" or $loader-type == "all" {
+        @keyframes bar-wave {
+            0%, 50%, 100% {
+                transform: scaleY(1.0);
+            }
+            25% {
+                transform: scaleY(2.0);
+            }
         }
-    }
-}
 
-//-------------------- Bubble Wave --------------------//
+        #{$loader-class}.bar-wave {
+            > span {
+                background: $loader-color;
+                height: $loader-bar-height;
+                width: $loader-bar-width;
+                animation: bar-wave 1.2s infinite ease-in-out;
 
-@if $loader-type == "bubble-wave" or $loader-type == "all" {
-    @keyframes bubble-wave {
-        0%, 80%, 100% {
-            transform: scale(0.0);
-        }
-        30% {
-            transform: scale(1.0);
-        }
-    }
+                @for $i from 2 through $loader-wave-count {
+                    &:nth-child(#{$i}) { animation-delay: -#{(1.3 - ($i * 0.1))}s; }
+                }
+            }
 
-    #{$loader-class}.bubble-wave {
-        > span {
-            background: $loader-color;
-            width: $loader-bubble-size;
-            height: $loader-bubble-size;
-            border-radius: 100%;
-            animation: bubble-wave 1.5s infinite ease-in-out;
-            animation-fill-mode: both;
-
-            @for $i from 2 through $loader-wave-count {
-                &:nth-child(#{$i}) { animation-delay: -#{(1.6 - ($i * 0.1))}s; }
+            #{$loader-class-message} {
+                margin-top: 1.5rem;
             }
         }
     }
-}
 
-//-------------------- Bubble Spinner --------------------//
+    //-------------------- Bubble Wave --------------------//
 
-@if $loader-type == "bubble-spinner" or $loader-type == "all" {
-    @keyframes bubble-spinner {
-        0%, 80%, 100% {
-            transform: scale(0.0);
-        }
-        30% {
-            transform: scale(1.3);
+    @if $loader-type == "bubble-wave" or $loader-type == "all" {
+        @keyframes bubble-wave {
+            0%, 80%, 100% {
+                transform: scale(0.0);
+            }
+            30% {
+                transform: scale(1.0);
+            }
         }
-    }
-
-    #{$loader-class}.bubble-spinner {
-        #{$loader-class-spinner} {
-            width: 100px;
-            height: 100px;
-            position: relative;
-            margin: 0 auto;
 
+        #{$loader-class}.bubble-wave {
             > span {
                 background: $loader-color;
-                width: 14px;
-                height: 14px;
-                position: absolute;
+                width: $loader-bubble-size;
+                height: $loader-bubble-size;
                 border-radius: 100%;
-                animation: bubble-spinner 1.6s infinite ease-in-out;
+                animation: bubble-wave 1.5s infinite ease-in-out;
                 animation-fill-mode: both;
 
-                &:nth-child(1) {
-                    top: 0;
-                    left: 43px;
-                    animation-delay: -1.4s;
-                }
-
-                &:nth-child(2) {
-                    top: 12px;
-                    right: 12px;
-                    animation-delay: -1.2s;
-                }
-
-                &:nth-child(3) {
-                    top: 43px;
-                    right: 0;
-                    animation-delay: -1.0s;
-                }
-
-                &:nth-child(4) {
-                    bottom: 12px;
-                    right: 12px;
-                    animation-delay: -0.8s;
-                }
-
-                &:nth-child(5) {
-                    bottom: 0;
-                    left: 43px;
-                    animation-delay: -0.6s;
+                @for $i from 2 through $loader-wave-count {
+                    &:nth-child(#{$i}) { animation-delay: -#{(1.6 - ($i * 0.1))}s; }
                 }
+            }
+        }
+    }
 
-                &:nth-child(6) {
-                    bottom: 12px;
-                    left: 12px;
-                    animation-delay: -0.4s;
-                }
+    //-------------------- Bubble Spinner --------------------//
 
-                &:nth-child(7) {
-                    top: 43px;
-                    left: 0;
-                    animation-delay: -0.2s;
-                }
+    @if $loader-type == "bubble-spinner" or $loader-type == "all" {
+        @keyframes bubble-spinner {
+            0%, 80%, 100% {
+                transform: scale(0.0);
+            }
+            30% {
+                transform: scale(1.3);
+            }
+        }
 
-                &:nth-child(8) {
-                    top: 12px;
-                    left: 12px;
-                    animation-delay: -0.0s;
+        #{$loader-class}.bubble-spinner {
+            #{$loader-class-spinner} {
+                width: 100px;
+                height: 100px;
+                position: relative;
+                margin: 0 auto;
+
+                > span {
+                    background: $loader-color;
+                    width: 14px;
+                    height: 14px;
+                    position: absolute;
+                    border-radius: 100%;
+                    animation: bubble-spinner 1.6s infinite ease-in-out;
+                    animation-fill-mode: both;
+
+                    &:nth-child(1) {
+                        top: 0;
+                        left: 43px;
+                        animation-delay: -1.4s;
+                    }
+
+                    &:nth-child(2) {
+                        top: 12px;
+                        right: 12px;
+                        animation-delay: -1.2s;
+                    }
+
+                    &:nth-child(3) {
+                        top: 43px;
+                        right: 0;
+                        animation-delay: -1.0s;
+                    }
+
+                    &:nth-child(4) {
+                        bottom: 12px;
+                        right: 12px;
+                        animation-delay: -0.8s;
+                    }
+
+                    &:nth-child(5) {
+                        bottom: 0;
+                        left: 43px;
+                        animation-delay: -0.6s;
+                    }
+
+                    &:nth-child(6) {
+                        bottom: 12px;
+                        left: 12px;
+                        animation-delay: -0.4s;
+                    }
+
+                    &:nth-child(7) {
+                        top: 43px;
+                        left: 0;
+                        animation-delay: -0.2s;
+                    }
+
+                    &:nth-child(8) {
+                        top: 12px;
+                        left: 12px;
+                        animation-delay: -0.0s;
+                    }
                 }
             }
         }
     }
-}
+}

data/scss/toolkit/components/mask.scss

@@ -6,29 +6,31 @@
 
 @import "../common";
 
-#{$mask-class} {
-    @include full-screen(absolute);
-    z-index: $mask-zindex;
-    opacity: 0;
-    visibility: hidden;
-    background: black($mask-opacity);
-    transition: all $mask-transition;
-    color: #fff;
-    user-select: none;
-}
+@include export("mask") {
+    #{$mask-class} {
+        @include full-screen(absolute);
+        z-index: $mask-zindex;
+        opacity: 0;
+        visibility: hidden;
+        background: black($mask-opacity);
+        transition: all $mask-transition;
+        color: #fff;
+        user-select: none;
+    }
 
-#{$mask-class-message} {
-    text-align: center;
-    max-width: 80%;
-    @include position-center;
+    #{$mask-class-message} {
+        text-align: center;
+        max-width: 80%;
+        @include position-center;
 
-    &:empty { display: none; }
-}
+        &:empty { display: none; }
+    }
 
-#{$mask-class-target} {
-    overflow: hidden;
+    #{$mask-class-target} {
+        overflow: hidden;
 
-    // Fixes issues where mask does not display in iOS
-    // Kind of hacky? Other solutions?
-    -webkit-backface-visibility: hidden;
-}
+        // Fixes issues where mask does not display in iOS
+        // Kind of hacky? Other solutions?
+        -webkit-backface-visibility: hidden;
+    }
+}

data/scss/toolkit/components/matrix.scss

@@ -6,20 +6,22 @@
 
 @import "../common";
 
-#{$matrix-class} {
-    @include reset-list;
-    position: relative;
+@include export("matrix") {
+    #{$matrix-class} {
+        @include reset-list;
+        position: relative;
 
-    > li {
-        float: left;
-        margin: 0;
-        padding: 0;
-        transition: top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition, visibility $matrix-transition;
-    }
+        > li {
+            float: $align-direction;
+            margin: 0;
+            padding: 0;
+            transition: top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition, visibility $matrix-transition;
+        }
 
-    &.no-columns > li {
-        position: relative !important;
-    }
+        &.no-columns > li {
+            position: relative !important;
+        }
 
-    @include clear-fix;
-}
+        @include clear-fix;
+    }
+}

data/scss/toolkit/components/modal.scss

@@ -6,141 +6,143 @@
 
 @import "../common";
 
-#{$modal-class} {
-    @include full-screen();
-    opacity: 0;
-    visibility: hidden;
-    z-index: $modal-zindex;
-    overflow: auto;
-    transition: opacity $modal-transition, visibility $modal-transition;
-    -webkit-overflow-scrolling: touch;
-
-    &.is-loading {
-        #{$modal-class-close} { display: none; }
-    }
+@include export("modal") {
+    #{$modal-class} {
+        @include full-screen();
+        opacity: 0;
+        visibility: hidden;
+        z-index: $modal-zindex;
+        overflow: auto;
+        transition: opacity $modal-transition, visibility $modal-transition;
+        -webkit-overflow-scrolling: touch;
+
+        &.is-loading {
+            #{$modal-class-close} { display: none; }
+        }
 
-    &.is-draggable {
-        #{$modal-class-inner} { cursor: default; }
-        #{$modal-class-head} { cursor: move; }
+        &.is-draggable {
+            #{$modal-class-inner} { cursor: default; }
+            #{$modal-class-head} { cursor: move; }
+        }
     }
-}
 
-#{$modal-class-close} {
-    position: absolute;
-    background: none;
-    border: 0;
-    top: $padding;
-    right: $padding;
-    line-height: 1rem;
-    opacity: $default-opacity;
-    padding: 5px;
-
-    &:hover { opacity: 1; }
-}
+    #{$modal-class-close} {
+        position: absolute;
+        background: none;
+        border: 0;
+        top: $padding;
+        #{$align-opposite-direction}: $padding;
+        line-height: 1rem;
+        opacity: $default-opacity;
+        padding: 5px;
+
+        &:hover { opacity: 1; }
+    }
 
-#{$modal-class-outer} {
-    position: relative;
-    margin: $margin;
-    transition: transform $modal-transition;
+    #{$modal-class-outer} {
+        position: relative;
+        margin: $margin;
+        transition: transform $modal-transition;
 
-    @include if-min($modal-mobile-breakpoint) {
-        width: 50%;
-        margin: $margin auto;
+        @include if-min($modal-mobile-breakpoint) {
+            width: 50%;
+            margin: $margin auto;
+        }
     }
-}
 
-#{$modal-class-inner} {
-    position: relative;
-}
+    #{$modal-class-inner} {
+        position: relative;
+    }
 
-#{$modal-class-head},
-#{$modal-class-body},
-#{$modal-class-foot} {
-    padding: $padding;
-}
+    #{$modal-class-head},
+    #{$modal-class-body},
+    #{$modal-class-foot} {
+        padding: $padding;
+    }
 
-//-------------------- Modifiers --------------------//
+    //-------------------- Modifiers --------------------//
 
-#{$modal-class}.is-fullscreen #{$modal-class-outer} {
-    @include full-screen("");
-    margin: 0;
-    max-width: 100%;
-    border-radius: 0;
-    transform: translate(0, 0);
-}
+    #{$modal-class}.is-fullscreen #{$modal-class-outer} {
+        @include full-screen("");
+        margin: 0;
+        max-width: 100%;
+        border-radius: 0;
+        transform: translate(0, 0);
+    }
 
-//-------------------- Animations --------------------//
+    //-------------------- Animations --------------------//
 
-#{$modal-class} {
-    @if index($modal-animations, "from-above") {
-        &.from-above {
-            #{$modal-class-outer} {
-                transform: scale(1.3);
-            }
+    #{$modal-class} {
+        @if index($modal-animations, "from-above") {
+            &.from-above {
+                #{$modal-class-outer} {
+                    transform: scale(1.3);
+                }
 
-            &.show #{$modal-class-outer} {
-                transform: scale(1);
+                &.show #{$modal-class-outer} {
+                    transform: scale(1);
+                }
             }
         }
-    }
 
-    @if index($modal-animations, "from-below") {
-        &.from-below {
-            #{$modal-class-outer} {
-                transform: scale(0.7);
-            }
+        @if index($modal-animations, "from-below") {
+            &.from-below {
+                #{$modal-class-outer} {
+                    transform: scale(0.7);
+                }
 
-            &.show #{$modal-class-outer} {
-                transform: scale(1);
+                &.show #{$modal-class-outer} {
+                    transform: scale(1);
+                }
             }
         }
-    }
 
-    @if index($modal-animations, "slide-in-top") {
-        &.slide-in-top {
-            #{$modal-class-outer} {
-                transform: translateY(-50%);
-            }
+        @if index($modal-animations, "slide-in-top") {
+            &.slide-in-top {
+                #{$modal-class-outer} {
+                    transform: translateY(-50%);
+                }
 
-            &.show #{$modal-class-outer} {
-                transform: translateY(0);
+                &.show #{$modal-class-outer} {
+                    transform: translateY(0);
+                }
             }
         }
-    }
 
-    @if index($modal-animations, "slide-in-bottom") {
-        &.slide-in-bottom {
-            #{$modal-class-outer} {
-                transform: translateY(50%);
-            }
+        @if index($modal-animations, "slide-in-bottom") {
+            &.slide-in-bottom {
+                #{$modal-class-outer} {
+                    transform: translateY(50%);
+                }
 
-            &.show #{$modal-class-outer} {
-                transform: translateY(0);
+                &.show #{$modal-class-outer} {
+                    transform: translateY(0);
+                }
             }
         }
-    }
 
-    @if index($modal-animations, "slide-in-left") {
-        &.slide-in-left {
-            #{$modal-class-outer} {
-                transform: translateX(-25%);
-            }
+        @if index($modal-animations, "slide-in-left") {
+            &.slide-in-left {
+                #{$modal-class-outer} {
+                    transform: translateX(-25%);
+                }
 
-            &.show #{$modal-class-outer} {
-                transform: translateX(0);
+                &.show #{$modal-class-outer} {
+                    transform: translateX(0);
+                }
             }
         }
-    }
 
-    @if index($modal-animations, "slide-in-right") {
-        &.slide-in-right {
-            #{$modal-class-outer} {
-                transform: translateX(25%);
-            }
+        @if index($modal-animations, "slide-in-right") {
+            &.slide-in-right {
+                #{$modal-class-outer} {
+                    transform: translateX(25%);
+                }
 
-            &.show #{$modal-class-outer} {
-                transform: translateX(0);
+                &.show #{$modal-class-outer} {
+                    transform: translateX(0);
+                }
             }
         }
     }
-}
+}