titon-toolkit 2.0.2 → 2.1.0

data/scss/toolkit/base.scss

@@ -9,6 +9,10 @@
 // Use border-box for everything
 *, *::after, *::before { box-sizing: border-box; }
 
+// RTL
+*[dir="rtl"], .rtl { direction: rtl; unicode-bidi: embed; }
+bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; }
+
 // Alignment
 .align-left { text-align: left; }
 .align-center { text-align: center; }
@@ -29,6 +33,13 @@
 .no-scroll { overflow: hidden !important; }
 .no-transition { transition: none !important; }
 
+.fluid {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+}
+
 .sr-only {
     position: absolute;
     width: 1px;
@@ -137,4 +148,4 @@
 // Sizes
 @for $i from 1 through 12 {
     .span-#{$i} { width: grid-span($i, 12); }
-}
+}

data/scss/toolkit/components/accordion.scss

@@ -6,24 +6,26 @@
 
 @import "../common";
 
-#{$accordion-class} {
-    @include reset-list;
-}
+@include export("accordion") {
+    #{$accordion-class} {
+        @include reset-list;
+    }
 
-#{$accordion-class-header} {
-    padding: $padding;
-    cursor: pointer;
-}
+    #{$accordion-class-header} {
+        padding: $padding;
+        cursor: pointer;
+    }
 
-#{$accordion-class-body} {
-    padding: $padding;
-}
+    #{$accordion-class-body} {
+        padding: $padding;
+    }
 
-// Section is used for animations, do not style it!
-#{$accordion-class-section} {
-    overflow: hidden;
-    position: relative;
-    transition: all $accordion-transition ease-in-out;
+    // Section is used for animations, do not style it!
+    #{$accordion-class-section} {
+        overflow: hidden;
+        position: relative;
+        transition: all $accordion-transition ease-in-out;
 
-    &.hide { max-height: 0; } // Don't include on base styles
-}
+        &.hide { max-height: 0; } // Don't include on base styles
+    }
+}

data/scss/toolkit/components/blackout.scss

@@ -6,26 +6,28 @@
 
 @import "../common";
 
-#{$blackout-class} {
-    @include full-screen();
-    z-index: $blackout-zindex;
-    opacity: 0;
-    visibility: hidden;
-    background: black($blackout-opacity);
+@include export("blackout") {
+    #{$blackout-class} {
+        @include full-screen();
+        z-index: $blackout-zindex;
+        opacity: 0;
+        visibility: hidden;
+        background: black($blackout-opacity);
 
-    // Using visibility transition also causes weirdness
-    transition: opacity $blackout-transition;
+        // Using visibility transition also causes weirdness
+        transition: opacity $blackout-transition;
 
-    // This fixes issues in Chrome where the blackout properties are visible/block
-    // But the blackout is still not visible by the client IRL
-    -webkit-backface-visibility: hidden;
+        // This fixes issues in Chrome where the blackout properties are visible/block
+        // But the blackout is still not visible by the client IRL
+        -webkit-backface-visibility: hidden;
 
-    #{$loader-class} {
-        @include position-center;
-        opacity: 1;
-        color: #fff;
+        #{$loader-class} {
+            @include position-center;
+            opacity: 1;
+            color: #fff;
 
-        > span,
-        #{$loader-class-spinner} > span { background: #fff !important; }
+            > span,
+            #{$loader-class-spinner} > span { background: #fff !important; }
+        }
     }
-}
+}

data/scss/toolkit/components/breadcrumb.scss

@@ -6,52 +6,53 @@
 
 @import "../common";
 
-#{$breadcrumb-class} {
-    text-align: left;
-    margin: $margin 0;
+@include export("breadcrumb") {
+    #{$breadcrumb-class} {
+        margin: $margin 0;
 
-    ul, ol {
-        @include reset-list;
-        @include clear-fix;
-    }
-
-    li {
-        position: relative;
-        float: left;
-
-        &:last-child {
-            .caret { display: none; }
+        ul, ol {
+            @include reset-list;
+            @include clear-fix;
         }
-    }
-
-    a {
-        @include size-medium;
-        display: block;
-        line-height: 100%;
-        padding-right: 0;
 
-        .caret {
-            margin-left: $medium-padding;
+        li {
             position: relative;
-            left: -1px;
+            float: $align-direction;
+
+            &:last-child {
+                .caret { display: none; }
+            }
         }
-    }
 
-    @include is-small {
         a {
-            @include size-small;
-            padding-right: 0;
+            @include size-medium;
+            display: block;
+            line-height: 100%;
+            padding-#{$align-opposite-direction}: 0;
+
+            .caret {
+                margin-#{$align-direction}: $medium-padding;
+                position: relative;
+                #{$align-direction}: -1px;
+            }
+        }
+
+        @include is-small {
+            a {
+                @include size-small;
+                padding-#{$align-opposite-direction}: 0;
 
-            .caret { margin-left: $small-padding; }
+                .caret { margin-#{$align-direction}: $small-padding; }
+            }
         }
-    }
 
-    @include is-large {
-        a {
-            @include size-large;
-            padding-right: 0;
+        @include is-large {
+            a {
+                @include size-large;
+                padding-#{$align-opposite-direction}: 0;
 
-            .caret { margin-left: $large-padding; }
+                .caret { margin-#{$align-direction}: $large-padding; }
+            }
         }
     }
-}
+}

data/scss/toolkit/components/button-group.scss

@@ -6,123 +6,43 @@
 
 @import "../common";
 
-#{$buttonGroup-class} {
-    @include reset-inline-block;
-    @include reset-list;
-    @include clear-fix;
-    white-space: nowrap;
-
-    > li,
-    > #{$button-class} {
-        float: left;
-        border-radius: 0;
-
-        &:hover,
-        &.is-active { z-index: 1; }
-    }
-
-    > li {
-        position: relative;
-        list-style: none;
+@include export("button-group") {
+    #{$buttonGroup-class} {
+        @include reset-inline-block;
+        @include reset-list;
+        @include clear-fix;
+        white-space: nowrap;
 
-        #{$button-class} {
-            display: block;
+        > li,
+        > #{$button-class} {
+            float: $align-direction;
             border-radius: 0;
-        }
-    }
-
-    //----- Effects -----//
-
-    &#{$shape-round-class} {
-        @include button-group-first-child {
-            border-top-left-radius: $round;
-            border-bottom-left-radius: $round;
-        }
 
-        @include button-group-last-child {
-            border-top-right-radius: $round;
-            border-bottom-right-radius: $round;
-        }
-    }
-
-    @if index($buttonGroup-effects, "pill") {
-        &#{$shape-pill-class} {
-            border-radius: $pill;
-
-            @include button-group-first-child {
-                border-top-left-radius: $pill;
-                border-bottom-left-radius: $pill;
-            }
-
-            @include button-group-last-child {
-                border-top-right-radius: $pill;
-                border-bottom-right-radius: $pill;
-            }
+            &:hover,
+            &.is-active { z-index: 1; }
         }
-    }
 
-    @if index($buttonGroup-effects, "skew") {
-        &#{$shape-skew-class} {
-            border-top-left-radius: $skew;
-            border-top-right-radius: $skew;
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
+        > li {
+            position: relative;
+            list-style: none;
 
-            @include button-group-first-child {
-                border-top-left-radius: $skew;
-                border-bottom-left-radius: 0;
+            #{$button-class} {
+                display: block;
+                border-radius: 0;
             }
-
-            @include button-group-last-child {
-                border-top-right-radius: $skew;
-                border-bottom-right-radius: 0;
-            }
-        }
-    }
-}
-
-// Space out groups
-#{$buttonGroup-class} + #{$buttonGroup-class} {
-    margin-left: $margin;
-}
-
-//-------------------- Modifiers --------------------//
-
-@if index($buttonGroup-modifiers, "vertical") {
-    #{$buttonGroup-class-modifier-vertical} {
-        vertical-align: top;
-
-        > li,
-        > #{$button-class} {
-            float: none;
-            display: block;
-            width: 100%;
-            max-width: 100%;
-
-            &:hover { z-index: 1; }
-        }
-
-        &#{$shape-round-class},
-        &#{$shape-pill-class},
-        &#{$shape-skew-class},
-        &#{$shape-skew-class}-reverse {
-            #{$button-class} { border-radius: 0; }
         }
 
         //----- Effects -----//
 
         &#{$shape-round-class} {
-            #{$button-class}:first-child,
-            #{$button-class}:last-child { border-radius: 0; }
-
             @include button-group-first-child {
-                border-top-left-radius: $round;
-                border-top-right-radius: $round;
+                border-top-#{$align-direction}-radius: $round;
+                border-bottom-#{$align-direction}-radius: $round;
             }
 
             @include button-group-last-child {
-                border-bottom-left-radius: $round;
-                border-bottom-right-radius: $round;
+                border-top-#{$align-opposite-direction}-radius: $round;
+                border-bottom-#{$align-opposite-direction}-radius: $round;
             }
         }
 
@@ -131,61 +51,143 @@
                 border-radius: $pill;
 
                 @include button-group-first-child {
-                    border-top-left-radius: $pill;
-                    border-top-right-radius: $pill;
-                    border-bottom-left-radius: 0;
-                    border-bottom-right-radius: 0;
+                    border-top-#{$align-direction}-radius: $pill;
+                    border-bottom-#{$align-direction}-radius: $pill;
                 }
 
                 @include button-group-last-child {
-                    border-top-left-radius: 0;
-                    border-top-right-radius: 0;
-                    border-bottom-left-radius: $pill;
-                    border-bottom-right-radius: $pill;
+                    border-top-#{$align-opposite-direction}-radius: $pill;
+                    border-bottom-#{$align-opposite-direction}-radius: $pill;
                 }
             }
         }
 
         @if index($buttonGroup-effects, "skew") {
             &#{$shape-skew-class} {
-                border-top-left-radius: $skew-y 1.5rem;
-                border-bottom-left-radius: $skew-y 1.5rem;
+                border-top-#{$align-direction}-radius: $skew;
+                border-top-#{$align-opposite-direction}-radius: $skew;
+                border-bottom-#{$align-direction}-radius: 0;
+                border-bottom-#{$align-opposite-direction}-radius: 0;
 
                 @include button-group-first-child {
-                    border-top-left-radius: $skew-reverse;
+                    border-top-#{$align-direction}-radius: $skew;
+                    border-bottom-#{$align-direction}-radius: 0;
                 }
 
                 @include button-group-last-child {
-                    border-bottom-left-radius: $skew-reverse;
-                    border-top-right-radius: 0;
+                    border-top-#{$align-opposite-direction}-radius: $skew;
+                    border-bottom-#{$align-opposite-direction}-radius: 0;
                 }
             }
+        }
+    }
+
+    // Space out groups
+    #{$buttonGroup-class} + #{$buttonGroup-class} {
+        margin-#{$align-direction}: $margin;
+    }
+
+    //-------------------- Modifiers --------------------//
 
+    @if index($buttonGroup-modifiers, "vertical") {
+        #{$buttonGroup-class-modifier-vertical} {
+            vertical-align: top;
+
+            > li,
+            > #{$button-class} {
+                float: none;
+                display: block;
+                width: 100%;
+                max-width: 100%;
+
+                &:hover { z-index: 1; }
+            }
+
+            &#{$shape-round-class},
+            &#{$shape-pill-class},
+            &#{$shape-skew-class},
             &#{$shape-skew-class}-reverse {
-                border-top-right-radius: $skew-y 1.25rem;
-                border-bottom-right-radius: $skew-y 1.25rem;
+                #{$button-class} { border-radius: 0; }
+            }
+
+            //----- Effects -----//
+
+            &#{$shape-round-class} {
+                #{$button-class}:first-child,
+                #{$button-class}:last-child { border-radius: 0; }
 
                 @include button-group-first-child {
-                    border-top-right-radius: $skew-reverse;
+                    border-top-#{$align-direction}-radius: $round;
+                    border-top-#{$align-opposite-direction}-radius: $round;
                 }
 
                 @include button-group-last-child {
-                    border-bottom-right-radius: $skew-reverse;
+                    border-bottom-#{$align-direction}-radius: $round;
+                    border-bottom-#{$align-opposite-direction}-radius: $round;
+                }
+            }
+
+            @if index($buttonGroup-effects, "pill") {
+                &#{$shape-pill-class} {
+                    border-radius: $pill;
+
+                    @include button-group-first-child {
+                        border-top-#{$align-direction}-radius: $pill;
+                        border-top-#{$align-opposite-direction}-radius: $pill;
+                        border-bottom-#{$align-direction}-radius: 0;
+                        border-bottom-#{$align-opposite-direction}-radius: 0;
+                    }
+
+                    @include button-group-last-child {
+                        border-top-#{$align-direction}-radius: 0;
+                        border-top-#{$align-opposite-direction}-radius: 0;
+                        border-bottom-#{$align-direction}-radius: $pill;
+                        border-bottom-#{$align-opposite-direction}-radius: $pill;
+                    }
+                }
+            }
+
+            @if index($buttonGroup-effects, "skew") {
+                &#{$shape-skew-class} {
+                    border-top-#{$align-direction}-radius: $skew-y 1.5rem;
+                    border-bottom-#{$align-direction}-radius: $skew-y 1.5rem;
+
+                    @include button-group-first-child {
+                        border-top-#{$align-direction}-radius: $skew-reverse;
+                    }
+
+                    @include button-group-last-child {
+                        border-bottom-#{$align-direction}-radius: $skew-reverse;
+                        border-top-#{$align-opposite-direction}-radius: 0;
+                    }
+                }
+
+                &#{$shape-skew-class}-reverse {
+                    border-top-#{$align-opposite-direction}-radius: $skew-y 1.25rem;
+                    border-bottom-#{$align-opposite-direction}-radius: $skew-y 1.25rem;
+
+                    @include button-group-first-child {
+                        border-top-#{$align-opposite-direction}-radius: $skew-reverse;
+                    }
+
+                    @include button-group-last-child {
+                        border-bottom-#{$align-opposite-direction}-radius: $skew-reverse;
+                    }
                 }
             }
         }
     }
-}
 
-@if index($buttonGroup-modifiers, "justified") {
-    #{$buttonGroup-class-modifier-justified} {
-        display: table;
-        width: 100%;
+    @if index($buttonGroup-modifiers, "justified") {
+        #{$buttonGroup-class-modifier-justified} {
+            display: table;
+            width: 100%;
 
-        > li,
-        > #{$button-class} {
-            float: none;
-            display: table-cell;
+            > li,
+            > #{$button-class} {
+                float: none;
+                display: table-cell;
+            }
         }
     }
-}
+}