titon-toolkit 2.0.2 → 2.1.0

data/scss/toolkit/components/divider.scss

@@ -6,42 +6,44 @@
 
 @import "../common";
 
-#{$divider-class} {
-    text-align: center;
-    overflow: hidden;
+@include export("divider") {
+    #{$divider-class} {
+        text-align: center;
+        overflow: hidden;
 
-    &::after,
-    &::before {
-        content: "";
-        display: inline-block;
-        vertical-align: middle;
-        position: relative;
-        width: 100%;
-        border-top: 1px solid black(.1);
-        border-bottom: 1px solid white(.75);
-    }
-
-    &::before {
-        margin-left: -100%;
-        left: -$margin;
-    }
+        &::after,
+        &::before {
+            content: "";
+            display: inline-block;
+            vertical-align: middle;
+            position: relative;
+            width: 100%;
+            border-top: 1px solid black(.1);
+            border-bottom: 1px solid white(.75);
+        }
 
-    &::after {
-        margin-right: -100%;
-        right: -$margin;
-    }
+        &::before {
+            margin-#{$align-direction}: -100%;
+            #{$align-direction}: -$margin;
+        }
 
-    // Collapse the middle when there is no content
-    &:empty {
-        &::before,
         &::after {
-            right: 0;
-            left: 0;
+            margin-#{$align-opposite-direction}: -100%;
+            #{$align-opposite-direction}: -$margin;
         }
-    }
 
-    > span {
-        display: inline-block;
-        vertical-align: middle;
+        // Collapse the middle when there is no content
+        &:empty {
+            &::before,
+            &::after {
+                right: 0;
+                left: 0;
+            }
+        }
+
+        > span {
+            display: inline-block;
+            vertical-align: middle;
+        }
     }
-}
+}

data/scss/toolkit/components/drop.scss

@@ -6,108 +6,111 @@
 
 @import "../common";
 
-#{$drop-class} {
-    @include reset-list;
-    text-align: left;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 200px;
-    line-height: 100%;
-    z-index: $drop-zindex;
-    opacity: 0;
-    visibility: hidden;
-    transition: left $drop-transition, opacity $drop-transition, visibility $drop-transition;
-
-    // Nested
+@include export("drop") {
     #{$drop-class} {
-        display: block;
-        top: 0;
-        left: 90%;
-        z-index: $drop-zindex + 1;
-    }
-
-    ul,
-    ol {
         @include reset-list;
-    }
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 200px;
+        line-height: 100%;
+        z-index: $drop-zindex;
+        opacity: 0;
+        visibility: hidden;
+        transition: left $drop-transition, right $drop-transition, opacity $drop-transition, visibility $drop-transition;
+
+        // Nested
+        #{$drop-class} {
+            display: block;
+            top: 0;
+            #{$align-direction}: 90%;
+            z-index: $drop-zindex + 1;
+        }
 
-    li {
-        position: relative;
+        ul,
+        ol {
+            @include reset-list;
+        }
 
-        > a {
-            padding: $small-padding;
-            display: block;
+        li {
+            position: relative;
 
-            .caret-right {
-                float: right;
-                display: none;
+            > a {
+                padding: $small-padding;
+                display: block;
+
+                .caret-right,
+                .caret-left {
+                    float: $align-opposite-direction;
+                    display: none;
+                }
             }
-        }
 
-        &.has-children {
-            > a .caret-right { display: inline-block; }
-        }
+            &.has-children {
+                > a .caret-right,
+                > a .caret-left { display: inline-block; }
+            }
 
-        // Show nested dropdown
-        &:hover {
-            #{$drop-class} {
-                visibility: visible;
-                opacity: 1;
-                left: 100%;
+            // Show nested dropdown
+            &:hover {
+                #{$drop-class} {
+                    visibility: visible;
+                    opacity: 1;
+                    #{$align-direction}: 100%;
+                }
             }
         }
     }
-}
 
-#{$drop-class-divider} {
-    margin: ($margin / 2) 0;
-    border-top: 1px solid $gray-dark;
-}
+    #{$drop-class-divider} {
+        margin: ($margin / 2) 0;
+        border-top: 1px solid $gray-dark;
+    }
 
-#{$drop-class-heading} {
-    padding: $small-padding;
-}
+    #{$drop-class-heading} {
+        padding: $small-padding;
+    }
 
-//-------------------- Modifiers --------------------//
+    //-------------------- Modifiers --------------------//
 
-@if index($drop-modifiers, "up") {
-    #{$drop-class-modifier-up} {
-        top: auto;
-        bottom: 100%;
+    @if index($drop-modifiers, "up") {
+        #{$drop-class-modifier-up} {
+            top: auto;
+            bottom: 100%;
+        }
     }
-}
 
-@if index($drop-modifiers, "right") {
-    #{$drop-class-modifier-right} {
-        top: auto;
-        left: 100%;
+    @if index($drop-modifiers, "right") {
+        #{$drop-class-modifier-right} {
+            top: auto;
+            left: 100%;
+        }
     }
-}
 
-@if index($drop-modifiers, "left") {
-    #{$drop-class-modifier-left} {
-        top: auto;
-        left: auto;
-        right: 100%;
+    @if index($drop-modifiers, "left") {
+        #{$drop-class-modifier-left} {
+            top: auto;
+            left: auto;
+            right: 100%;
+        }
     }
-}
 
-@if index($drop-modifiers, "right") or index($drop-modifiers, "left") {
-    #{$drop-class-modifier-right},
-    #{$drop-class-modifier-left} {
-        &.reverse-align {
-            bottom: 0;
+    @if index($drop-modifiers, "right") or index($drop-modifiers, "left") {
+        #{$drop-class-modifier-right},
+        #{$drop-class-modifier-left} {
+            &.reverse-align {
+                bottom: 0;
+            }
         }
     }
-}
 
-@if index($drop-modifiers, "down") or index($drop-modifiers, "up") {
-    #{$drop-class-modifier-down},
-    #{$drop-class-modifier-up} {
-        &.reverse-align {
-            left: auto;
-            right: 0;
+    @if index($drop-modifiers, "down") or index($drop-modifiers, "up") {
+        #{$drop-class-modifier-down},
+        #{$drop-class-modifier-up} {
+            &.reverse-align {
+                left: auto;
+                right: 0;
+            }
         }
     }
-}
+}

data/scss/toolkit/components/flex.scss

@@ -0,0 +1,110 @@
+/**
+ * @copyright   2010-2015, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+@include export("flex") {
+    #{$flex-class-region} {
+        @include flex-region();
+
+        // Alignment
+        &.flow-top,
+        &.flow-left { @include flex-region-align(left); }
+        &.flow-bottom,
+        &.flow-right { @include flex-region-align(right); }
+        &.flow-center { @include flex-region-align(center); }
+        &.flow-between { @include flex-region-align(between); }
+        &.flow-around { @include flex-region-align(around); }
+
+        // Support RTL
+        @if $text-direction == rtl {
+            writing-mode: vertical-rl;
+        }
+    }
+
+    #{$flex-class-block} {
+        @include flex-block();
+        @include flex-block-order();
+
+        // Override parent alignment
+        &.self-top,
+        &.self-left { @include flex-block-align(top); }
+        &.self-bottom,
+        &.self-right { @include flex-block-align(bottom); }
+        &.self-center { @include flex-block-align(center); }
+        &.self-baseline { @include flex-block-align(baseline); }
+        &.self-stretch { @include flex-block-align(stretch); }
+
+        // Resizing
+        &.grow { flex-grow: 1; }
+        &.no-grow { flex-grow: 0; }
+        &.shrink { flex-shrink: 1; }
+        &.no-shrink { flex-shrink: 0; }
+    }
+
+    // Global ordering
+    @for $i from 1 through $flex-order-count {
+        .order-#{$i} { @include flex-block-order($i); }
+    }
+
+    // Responsive sizes
+    @each $size, $options in $flex-sizes {
+        $size-columns: nth($options, 1);
+
+        @include in-range(nth($options, 2)) {
+            @for $i from 1 through $size-columns {
+                #{$flex-class-block}.#{$size}-#{$i} { flex-basis: flex-span($i, $size-columns); }
+            }
+
+            // Responsive ordering
+            @for $i from 1 through $flex-order-count {
+                .#{$size}-order-#{$i} { @include flex-block-order($i); }
+            }
+        }
+    }
+
+    //-------------------- Modifiers --------------------//
+
+    // Generate a grid of blocks with equal spacing between
+    @if index($flex-modifiers, "grid") {
+        #{$flex-class-modifier-grid} {
+            flex-flow: row wrap;
+            justify-content: flex-start;
+            align-content: flex-start;
+            max-width: none;
+
+            @if $flex-grid-gutter {
+                margin-top: -$flex-grid-gutter;
+                margin-left: -$flex-grid-gutter;
+            }
+
+            > #{$flex-class-block} {
+                margin-top: $flex-grid-gutter;
+                margin-left: $flex-grid-gutter;
+            }
+        }
+    }
+
+    // Display blocks vertically or horizontally regardless of orientation
+    @if index($flex-modifiers, "horizontal") {
+        #{$flex-class-modifier-horizontal} {
+            @include flex-region-orientation(horizontal);
+        }
+    }
+
+    @if index($flex-modifiers, "vertical") {
+        #{$flex-class-modifier-vertical} {
+            @include flex-region-orientation(vertical);
+        }
+    }
+
+    // Wrap blocks onto the next line instead of trying to squish into 1 line
+    @if index($flex-modifiers, "wrap") {
+        #{$flex-class-modifier-wrap} {
+            @include flex-region-wrap();
+        }
+    }
+}

data/scss/toolkit/components/flyout.scss

@@ -6,71 +6,77 @@
 
 @import "../common";
 
-#{$flyout-class} {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: $flyout-zindex;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity $flyout-transition, visibility $flyout-transition;
+@include export("flyout") {
+    #{$flyout-class} {
+        position: absolute;
+        top: 0;
+        #{$align-direction}: 0;
+        z-index: $flyout-zindex;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity $flyout-transition, visibility $flyout-transition;
 
-    ul {
-        @include reset-list;
-        float: left;
-        width: 200px;
-    }
+        ul {
+            @include reset-list;
+            float: $align-direction;
+            width: 200px;
+        }
 
-    li {
-        position: relative;
+        li {
+            position: relative;
 
-        > a {
-            padding: $small-padding;
-            line-height: 100%;
-            display: block;
-            text-decoration: none;
+            > a {
+                padding: $small-padding;
+                line-height: 100%;
+                display: block;
+                text-decoration: none;
 
-            .caret-right { display: none; }
-        }
+                .caret-right,
+                .caret-left { display: none; }
+            }
 
-        // Display caret arrow
-        &.has-children > a .caret-right {
-            float: right;
-            display: inline-block; // reveal
-            margin-top: 3px;
-        }
+            // Display caret arrow
+            &.has-children > a {
+                .caret-right,
+                .caret-left {
+                    float: $align-opposite-direction;
+                    display: inline-block; // reveal
+                    margin-top: 3px;
+                }
+            }
 
-        // Nested flyouts
-        > #{$flyout-class} {
-            left: 90%;
-            transition: left $flyout-transition, right $flyout-transition, opacity $flyout-transition, visibility $flyout-transition;
+            // Nested flyouts
+            > #{$flyout-class} {
+                #{$align-direction}: 90%;
+                transition: left $flyout-transition, right $flyout-transition, opacity $flyout-transition, visibility $flyout-transition;
 
-            // Reverse menu to left side in case it goes outside the viewport
-            // Will be set automatically from the Javascript layer
-            &.push-left {
-                left: auto;
-                right: 90%;
+                // Reverse menu to left side in case it goes outside the viewport
+                // Will be set automatically from the Javascript layer
+                &.push-opposite {
+                    #{$align-direction}: auto;
+                    #{$align-opposite-direction}: 90%;
+                }
             }
-        }
 
-        &.is-open > #{$flyout-class} {
-            opacity: 1;
-            visibility: visible;
-            left: 100%;
+            &.is-open > #{$flyout-class} {
+                opacity: 1;
+                visibility: visible;
+                #{$align-direction}: 100%;
 
-            &.push-left {
-                left: auto;
-                right: 100%;
+                &.push-opposite {
+                    #{$align-direction}: auto;
+                    #{$align-opposite-direction}: 100%;
+                }
             }
         }
+
+        @include clear-fix;
     }
 
-    @include clear-fix;
+    #{$flyout-class-heading} {
+        padding: $small-padding;
+        line-height: 100%;
+        display: block;
+        text-decoration: none;
+    }
 }
-
-#{$flyout-class-heading} {
-    padding: $small-padding;
-    line-height: 100%;
-    display: block;
-    text-decoration: none;
-}