titon-toolkit 2.0.2 → 2.1.0

data/scss/toolkit/components/button.scss

@@ -6,129 +6,131 @@
 
 @import "../common";
 
-#{$button-class} {
-    @include reset-inline-block;
-    border: 0;
-    margin: 0;
-    cursor: pointer;
-    text-align: center;
-    font-weight: normal;
-    line-height: normal;
-    white-space: nowrap;
-    text-decoration: none;
-    @include size-medium;
-    @include is-small(true, true) { @include size-small; }
-    @include is-large(true, true) { @include size-large; }
-
-    &.is-disabled,
-    &[disabled] {
-        cursor: not-allowed;
-    }
+@include export("button") {
+    #{$button-class} {
+        @include reset-inline-block;
+        border: 0;
+        margin: 0;
+        cursor: pointer;
+        text-align: center;
+        font-weight: normal;
+        line-height: normal;
+        white-space: nowrap;
+        text-decoration: none;
+        @include size-medium;
+        @include is-small(true, true) { @include size-small; }
+        @include is-large(true, true) { @include size-large; }
+
+        &.is-disabled,
+        &[disabled] {
+            cursor: not-allowed;
+        }
 
-    &:focus { outline: none; }
+        &:focus { outline: none; }
 
-    //----- Effects -----//
+        //----- Effects -----//
 
-    @if index($button-effects, "oval") {
-        &#{$shape-oval-class} {
-            border-radius: #{$oval-x} / #{$oval-y};
+        @if index($button-effects, "oval") {
+            &#{$shape-oval-class} {
+                border-radius: #{$oval-x} / #{$oval-y};
+            }
         }
-    }
 
-    @if index($button-effects, "pill") {
-        &#{$shape-pill-class} {
-            border-radius: $pill;
+        @if index($button-effects, "pill") {
+            &#{$shape-pill-class} {
+                border-radius: $pill;
+            }
         }
-    }
 
-    @if index($button-effects, "skew") {
-        &#{$shape-skew-class} {
-            border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
+        @if index($button-effects, "skew") {
+            &#{$shape-skew-class} {
+                border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
+            }
         }
     }
-}
 
-//-------------------- Modifiers --------------------//
-
-@if index($button-modifiers, "gloss") {
-    #{$button-class-modifier-gloss} {
-        &::after {
-            content: "";
-            position: absolute;
-            width: 100%;
-            height: 60%;
-            top: 1%;
-            left: 0;
-            border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
-            background: linear-gradient(to left, white(.3) 0%, white(0) 50%, white(.3) 100%);
-        }
+    //-------------------- Modifiers --------------------//
+
+    @if index($button-modifiers, "gloss") {
+        #{$button-class-modifier-gloss} {
+            &::after {
+                content: "";
+                position: absolute;
+                width: 100%;
+                height: 60%;
+                top: 1%;
+                left: 0;
+                border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
+                background: linear-gradient(to left, white(.3) 0%, white(0) 50%, white(.3) 100%);
+            }
 
-        //----- Effects -----//
+            //----- Effects -----//
 
-        &#{$shape-round-class}::after {
-            border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
-            width: 98%;
-            left: 1.5%;
-        }
+            &#{$shape-round-class}::after {
+                border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
+                width: 98%;
+                left: 1.5%;
+            }
 
-        @if index($button-effects, "oval") {
-            &#{$shape-oval-class}::after {
-                width: 90%;
-                left: 5.5%;
-                border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem;
+            @if index($button-effects, "oval") {
+                &#{$shape-oval-class}::after {
+                    width: 90%;
+                    left: 5.5%;
+                    border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem;
+                }
             }
-        }
 
-        @if index($button-effects, "pill") {
-            &#{$shape-pill-class}::after {
-                width: 90%;
-                left: 5.5%;
-                border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem;
+            @if index($button-effects, "pill") {
+                &#{$shape-pill-class}::after {
+                    width: 90%;
+                    left: 5.5%;
+                    border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem;
+                }
             }
-        }
 
-        @if index($button-effects, "skew") {
-            &#{$shape-skew-class}::after {
-                width: 90%;
-                left: 5.5%;
-                border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem;
+            @if index($button-effects, "skew") {
+                &#{$shape-skew-class}::after {
+                    width: 90%;
+                    left: 5.5%;
+                    border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem;
+                }
             }
         }
     }
-}
 
-@if index($button-modifiers, "reflect") {
-    #{$button-class-modifier-reflect}::after {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 50%;
-        top: 0;
-        left: 0;
-        background: linear-gradient(180deg, white(0), white(.3));
+    @if index($button-modifiers, "reflect") {
+        #{$button-class-modifier-reflect}::after {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 50%;
+            top: 0;
+            left: 0;
+            background: linear-gradient(180deg, white(0), white(.3));
+        }
     }
-}
 
-@if index($button-modifiers, "glare") {
-    #{$button-class-modifier-glare}::after {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        background: linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%);
+    @if index($button-modifiers, "glare") {
+        #{$button-class-modifier-glare}::after {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            background: linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%);
+        }
     }
-}
 
-@if index($button-modifiers, "popout") {
-    #{$button-class-modifier-popout} {
-        box-shadow: 0 6px 0 0 black(.25) !important;
-        top: -3px;
+    @if index($button-modifiers, "popout") {
+        #{$button-class-modifier-popout} {
+            box-shadow: 0 6px 0 0 black(.25) !important;
+            top: -3px;
 
-        &:active {
-            box-shadow: 0 3px 0 0 black(.5) !important;
-            top: 0;
+            &:active {
+                box-shadow: 0 3px 0 0 black(.5) !important;
+                top: 0;
+            }
         }
     }
-}
+}

data/scss/toolkit/components/carousel.scss

@@ -6,89 +6,89 @@
 
 @import "../common";
 
-#{$carousel-class} {
-    margin: 0 auto;
-    text-align: left;
-    position: relative;
-    max-width: 100%;
-
-    &.no-next #{$carousel-class-next} { display: none; }
-    &.no-prev #{$carousel-class-prev} { display: none; }
-}
+@include export("carousel") {
+    #{$carousel-class} {
+        position: relative;
+        max-width: 100%;
 
-#{$carousel-class-items} {
-    /* 4:3 ratio */
-    padding-bottom: 75%;
-    width: 100%;
-    max-width: 100%;
-    overflow: hidden;
-    position: relative;
-
-    > ul {
-        @include reset-list;
-        position: absolute;
-        top: 0;
-        left: 0;
-        transition: left $carousel-transition, top $carousel-transition;
-
-        > li {
-            width: 100%;
-            height: auto;
-            position: relative;
+        &.no-next #{$carousel-class-next},
+        &.no-prev #{$carousel-class-prev} { display: none; }
+    }
+
+    #{$carousel-class-items} {
+        /* 4:3 ratio */
+        padding-bottom: 75%;
+        width: 100%;
+        max-width: 100%;
+        overflow: hidden;
+        position: relative;
 
-            > img {
-                display: block;
+        > ul {
+            @include reset-list;
+            position: absolute;
+            top: 0;
+            #{$align-direction}: 0;
+            transition: left $carousel-transition, top $carousel-transition, right $carousel-transition;
+
+            > li {
                 width: 100%;
-                max-width: 100%;
                 height: auto;
+                position: relative;
+
+                > img {
+                    display: block;
+                    width: 100%;
+                    max-width: 100%;
+                    height: auto;
+                }
             }
         }
     }
-}
 
-//-------------------- Animations --------------------//
+    //-------------------- Animations --------------------//
 
-#{$carousel-class}.slide {
-    #{$carousel-class-items} > ul {
-        > li {
-            float: left;
-        }
+    #{$carousel-class}.slide {
+        #{$carousel-class-items} > ul {
+            > li {
+                float: $align-direction;
+            }
 
-        @include clear-fix;
+            @include clear-fix;
+        }
     }
-}
 
-#{$carousel-class}.fade {
-    #{$carousel-class-items} > ul {
-        position: relative;
+    #{$carousel-class}.fade {
+        #{$carousel-class-items} > ul {
+            position: relative;
 
-        > li {
-            position: absolute;
-            top: 0;
-            left: 0;
-            opacity: 0;
-            z-index: 1;
-            transition: opacity $carousel-transition, visibility $carousel-transition;
+            > li {
+                position: absolute;
+                top: 0;
+                #{$align-direction}: 0;
+                opacity: 0;
+                z-index: 1;
+                transition: opacity $carousel-transition, visibility $carousel-transition;
 
-            &.show { z-index: 5; }
+                &.show { z-index: 5; }
+            }
         }
     }
-}
 
-//-------------------- Modifiers --------------------//
+    //-------------------- Modifiers --------------------//
 
-@if index($carousel-modifiers, "wide") {
-    #{$carousel-class-modifier-wide} {
-        #{$carousel-class-items} {
-            padding-bottom: 56.25%; // 16:9 ratio
+    @if index($carousel-modifiers, "wide") {
+        #{$carousel-class-modifier-wide} {
+            #{$carousel-class-items} {
+                padding-bottom: 56.25%; // 16:9 ratio
+            }
         }
     }
-}
 
-@if index($carousel-modifiers, "square") {
-    #{$carousel-class-modifier-square} {
-        #{$carousel-class-items} {
-            padding-bottom: 100%; // 1:1 ratio
+    @if index($carousel-modifiers, "square") {
+        #{$carousel-class-modifier-square} {
+            #{$carousel-class-items} {
+                padding-bottom: 100%; // 1:1 ratio
+            }
         }
     }
-}
+}

data/scss/toolkit/components/code.scss

@@ -6,57 +6,59 @@
 
 @import "../common";
 
-code,
-var,
-kbd,
-pre {
-    font: normal .8rem/115% Consolas, Monaco, 'Andale Mono', monospace;
-}
+@include export("code") {
+    code,
+    var,
+    kbd,
+    pre {
+        font: normal .8rem/115% Consolas, Monaco, 'Andale Mono', monospace;
+    }
 
-code,
-var,
-kbd {
-    display: inline-block;
-    background: $gray;
-    border-radius: $round;
-    padding: .2em .4em;
-}
+    code,
+    var,
+    kbd {
+        display: inline-block;
+        background: $gray;
+        border-radius: $round;
+        padding: .2em .4em;
+    }
+
+    pre {
+        padding: $padding;
+        margin: $margin 0 0 0;
+        background: $gray-light;
+        border: 1px solid $gray-dark;
+        text-align: $align-direction;
+        direction: $text-direction;
+        white-space: pre;
+        word-spacing: normal;
+        font-size: .9rem;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
 
-pre {
-    padding: $padding;
-    margin: $margin 0 0 0;
-    background: $gray-light;
-    border: 1px solid $gray-dark;
-    text-align: left;
-    direction: ltr;
-    white-space: pre;
-    word-spacing: normal;
-    font-size: .9rem;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
+        code {
+            padding: 0;
+            margin: 0;
+            color: inherit;
+            font: inherit;
+            white-space: pre-wrap;
+            background: transparent;
+            border: none;
+            display: block;
+        }
 
-    code {
-        padding: 0;
-        margin: 0;
-        color: inherit;
-        font: inherit;
-        white-space: pre-wrap;
-        background: transparent;
-        border: none;
-        display: block;
+        &.is-scrollable {
+            max-height: 350px;
+            overflow-y: auto;
+        }
     }
 
-    &.is-scrollable {
-        max-height: 350px;
-        overflow-y: auto;
+    kbd {
+        background: #fff;
+        position: relative;
+        border: 1px solid $gray-dark;
+        border-top-color: $gray-dark;
+        box-shadow: 0 2px 0 1px $gray-darkest;
+        top: -3px;
     }
 }
-
-kbd {
-    background: #fff;
-    position: relative;
-    border: 1px solid $gray-dark;
-    border-top-color: $gray-dark;
-    box-shadow: 0 2px 0 1px $gray-darkest;
-    top: -3px;
-}