titon-toolkit 2.0.2 → 2.1.0

data/scss/toolkit/components/form.scss

@@ -6,222 +6,230 @@
 
 @import "../common";
 
-fieldset {
-    padding: $padding 0;
-    margin: 0;
-    border: 0;
-    border-top: 1px solid $gray-dark;
-
-    &.no-legend {
+@include export("form") {
+    fieldset {
+        padding: $padding 0;
+        margin: 0;
         border: 0;
-        padding: 0;
-    }
-}
-
-legend {
-    font-size: 1.3rem;
-    padding-right: $padding;
-}
+        border-top: 1px solid $gray-dark;
 
-select[multiple],
-select[size] { height: auto; }
-
-// Override normalize
-input[type="search"] {
-    box-sizing: border-box;
-    -webkit-appearance: none;
-}
-
-// Required values to match browser restrictions
-label,
-#{$form-class-input-static} {
-    font-size: inherit;
-    line-height: normal;
-}
+        &.no-legend {
+            border: 0;
+            padding: 0;
+        }
+    }
 
-//-------------------- Inputs --------------------//
-
-#{$form-class-input},
-#{$form-class-input-static},
-#{$form-class-input-radio},
-#{$form-class-input-checkbox} {
-    @include reset-inline-block;
-    line-height: normal;
-    border: 1px solid $gray-dark;
-    border-radius: 0;
-    -webkit-appearance: none; // Remove inner shadow on iOS
-    @include size-medium;
-    @include is-small(true, true) { @include size-small; }
-    @include is-large(true, true) { @include size-large; }
-}
+    legend {
+        font-size: 1.3rem;
+        padding-#{$align-opposite-direction}: $padding;
+    }
 
-#{$form-class-input} {
-    background: $gray-lightest;
-    border-radius: $round;
-    transition: all $default-transition;
+    select[multiple],
+    select[size] { height: auto; }
 
-    &:hover { border-color: $gray-darkest; }
+    // Override normalize
+    input[type="search"] {
+        box-sizing: border-box;
+        -webkit-appearance: none;
+    }
 
-    &:focus {
-        border-color: $info;
-        outline: none;
+    // Required values to match browser restrictions
+    label,
+    #{$form-class-input-static} {
+        font-size: inherit;
+        line-height: normal;
     }
 
-    &[readonly] {
-        color: $gray-darkest;
+    //-------------------- Inputs --------------------//
+
+    #{$form-class-input},
+    #{$form-class-input-static},
+    #{$form-class-input-radio},
+    #{$form-class-input-checkbox} {
+        @include reset-inline-block;
+        line-height: normal;
         border: 1px solid $gray-dark;
+        border-radius: 0;
+        -webkit-appearance: none; // Remove inner shadow on iOS
+        @include size-medium;
+        @include is-small(true, true) { @include size-small; }
+        @include is-large(true, true) { @include size-large; }
     }
 
-    &.is-disabled,
-    &[disabled],
-    option[disabled],
-    optgroup[disabled] {
-        color: $gray-darkest;
-        border-color: $gray;
-    }
-}
+    #{$form-class-input} {
+        background: $gray-lightest;
+        border-radius: $round;
+        transition: all $default-transition;
 
-#{$form-class-input-static} {
-    background: transparent;
-    border-color: transparent;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-}
+        &:hover { border-color: $gray-darkest; }
 
-#{$form-class-input-radio},
-#{$form-class-input-checkbox} {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-    border: 0;
+        &:focus {
+            border-color: $info;
+            outline: none;
+        }
 
-    input[type="checkbox"],
-    input[type="radio"] {
-        vertical-align: middle;
-        position: relative;
-        top: -2px;
-        margin-right: 5px;
+        &[readonly] {
+            color: $gray-darkest;
+            border: 1px solid $gray-dark;
+        }
+
+        &.is-disabled,
+        &[disabled],
+        option[disabled],
+        optgroup[disabled] {
+            color: $gray-darkest;
+            border-color: $gray;
+        }
     }
 
-    &.is-disabled {
-        color: $gray-darkest;
+    #{$form-class-input-static} {
+        background: transparent;
+        border-color: transparent;
+        padding-#{$align-direction}: 0 !important;
+        padding-#{$align-opposite-direction}: 0 !important;
     }
-}
 
-select#{$form-class-input} {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
+    #{$form-class-input-radio},
+    #{$form-class-input-checkbox} {
+        padding-#{$align-direction}: 0 !important;
+        padding-#{$align-opposite-direction}: 0 !important;
+        border: 0;
 
-    &[multiple] {
-        max-height: 500px;
-    }
+        input[type="checkbox"],
+        input[type="radio"] {
+            vertical-align: middle;
+            position: relative;
+            top: -2px;
+            margin-#{$align-opposite-direction}: 5px;
+        }
 
-    &::-ms-expand {
-        display: none;
+        &.is-disabled {
+            color: $gray-darkest;
+        }
     }
-}
 
-textarea#{$form-class-input} {
-    line-height: 135%;
-    min-height: 150px;
-}
+    select#{$form-class-input} {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
 
-//-------------------- Fields, Labels --------------------//
+        &[multiple] {
+            max-height: 500px;
+        }
 
-#{$form-class-fields} {
-    @include reset-list;
-}
+        &::-ms-expand {
+            display: none;
+        }
+    }
+
+    textarea#{$form-class-input} {
+        line-height: 135%;
+        min-height: 150px;
+    }
 
-#{$form-class-field},
-#{$form-class-fields} li {
-    margin-bottom: $margin;
+    //-------------------- Fields, Labels --------------------//
 
-    &.is-required {
-        #{$form-class-field-label} { font-weight: bold; }
+    #{$form-class-fields} {
+        @include reset-list;
     }
 
-    &:not(.is-disabled) {
-        &.is-error {
-            #{$form-class-input} {
-                border-color: $error;
-            }
+    #{$form-class-field},
+    #{$form-class-fields} li {
+        margin-bottom: $margin;
 
-            #{$form-class-input-radio},
-            #{$form-class-input-checkbox} {
-                color: $error-dark;
-            }
+        &.is-required {
+            #{$form-class-field-label} { font-weight: bold; }
         }
 
-        &.is-success {
-            #{$form-class-input} {
-                border-color: $success;
+        &:not(.is-disabled) {
+            &.is-error {
+                #{$form-class-input} {
+                    border-color: $error;
+                }
+
+                #{$form-class-input-radio},
+                #{$form-class-input-checkbox} {
+                    color: $error-dark;
+                }
             }
 
-            #{$form-class-input-radio},
-            #{$form-class-input-checkbox} {
-                color: $success-dark;
+            &.is-success {
+                #{$form-class-input} {
+                    border-color: $success;
+                }
+
+                #{$form-class-input-radio},
+                #{$form-class-input-checkbox} {
+                    color: $success-dark;
+                }
             }
         }
     }
-}
 
-#{$form-class-field-label} {
-    display: block;
-    vertical-align: middle;
-    margin-bottom: .5em;
-}
+    #{$form-class-field-label} {
+        display: block;
+        vertical-align: middle;
+        margin-bottom: .5em;
+    }
 
-#{$form-class-field-help} {
-    margin-top: .5em;
-    font-size: $small-size;
-}
+    #{$form-class-field-help} {
+        margin-top: .5em;
+        font-size: $small-size;
+    }
 
-#{$form-class-actions} {
-    text-align: center;
-}
+    #{$form-class-actions} {
+        text-align: center;
+    }
 
-//-------------------- Modifiers --------------------//
+    //-------------------- Modifiers --------------------//
 
-@if index($form-modifiers, "horizontal") {
-    #{$form-class-modifier-horizontal} {
-        #{$form-class-field},
-        #{$form-class-fields} li { @include grid-row; }
+    @if index($form-modifiers, "horizontal") {
+        #{$form-class-modifier-horizontal} {
+            #{$form-class-field},
+            #{$form-class-fields} li { @include grid-row; }
 
-        #{$form-class-field-label} {
-            text-align: right;
-            border: 1px solid transparent; // matches input sizes
-            padding-top: $medium-padding;
-        }
+            #{$form-class-field-label} {
+                text-align: $align-opposite-direction;
+                border: 1px solid transparent; // matches input sizes
+                padding-top: $medium-padding;
+            }
 
-        #{$form-class-field-column} { padding-left: $margin; }
+            #{$form-class-field-column} {
+                padding-#{$align-direction}: $margin;
+                text-align: $align-direction;
+            }
+        }
     }
-}
-
-@if index($form-modifiers, "inline") {
-    #{$form-class-modifier-inline} {
-        margin-bottom: -($margin / 2);
 
-        #{$form-class-field},
-        #{$form-class-fields} li,
-        #{$form-class-field-label},
-        #{$form-class-actions},
-        fieldset {
-            display: inline-block;
-            vertical-align: middle;
-            line-height: normal;
-            margin-right: $margin;
-            margin-bottom: $margin / 2;
-        }
+    @if index($form-modifiers, "inline") {
+        #{$form-class-modifier-inline} {
+            margin-bottom: -($margin / 2);
+
+            #{$form-class-field},
+            #{$form-class-fields} li,
+            #{$form-class-field-label},
+            #{$form-class-actions},
+            fieldset {
+                display: inline-block;
+                vertical-align: middle;
+                line-height: normal;
+                margin-#{$align-opposite-direction}: $margin;
+                margin-bottom: $margin / 2;
+            }
 
-        fieldset {
-            border: 0;
-            margin: 0;
-            padding: 0;
-        }
+            fieldset {
+                border: 0;
+                margin: 0;
+                padding: 0;
+            }
 
-        #{$form-class-field-label} { margin: 0 ($margin / 2) 0 0; }
+            #{$form-class-field-label} {
+                margin: 0;
+                margin-#{$align-opposite-direction}: ($margin / 2);
+            }
 
-        legend,
-        #{$form-class-field-help} { display: none; }
+            legend,
+            #{$form-class-field-help} { display: none; }
+        }
     }
-}
+}

data/scss/toolkit/components/grid.scss

@@ -6,50 +6,52 @@
 
 @import "../common";
 
-// Row wrapper
-#{$grid-class} {
-    @include grid-row();
-}
+@include export("grid") {
+    // Row wrapper
+    #{$grid-class} {
+        @include grid-row();
+    }
 
-// These should be the same for all sizes
-#{$grid-class-column}[class*="span-"] {
-    @include grid-column();
-}
+    // These should be the same for all sizes
+    #{$grid-class-column}[class*="span-"] {
+        @include grid-column();
+    }
 
-// Global Push and pull classes
-@if $grid-push-pull {
-    @for $i from 1 through 12 {
-        $span: grid-span($i, 12);
+    // Global Push and pull classes
+    @if $grid-push-pull {
+        @for $i from 1 through 12 {
+            $span: grid-span($i, 12);
 
-        .push-#{$i} { left: $span; }
-        .pull-#{$i} { right: $span; }
+            .push-#{$i} { #{$align-direction}: $span; }
+            .pull-#{$i} { #{$align-opposite-direction}: $span; }
+        }
     }
-}
 
-// Grid sizes
-@each $size, $options in $grid-sizes {
-    $size-columns: nth($options, 1);
+    // Responsive sizes
+    @each $size, $options in $grid-sizes {
+        $size-columns: nth($options, 1);
 
-    @include in-range(nth($options, 2)) {
-        #{$grid-class-column}[class*="#{$size}-"] {
-            @include grid-column;
-        }
+        @include in-range(nth($options, 2)) {
+            #{$grid-class-column}[class*="#{$size}-"] {
+                @include grid-column;
+            }
 
-        @for $i from 1 through $size-columns {
-            $span: grid-span($i, $size-columns);
+            @for $i from 1 through $size-columns {
+                $span: grid-span($i, $size-columns);
 
-            #{$grid-class-column}.#{$size}-#{$i} { width: $span; }
+                #{$grid-class-column}.#{$size}-#{$i} { width: $span; }
 
-            @if $grid-push-pull {
-                #{$grid-class-column}.#{$size}-push-#{$i} { left: $span; }
-                #{$grid-class-column}.#{$size}-pull-#{$i} { right: $span; }
+                @if $grid-push-pull {
+                    .#{$size}-push-#{$i} { #{$align-direction}: $span; }
+                    .#{$size}-pull-#{$i} { #{$align-opposite-direction}: $span; }
+                }
             }
         }
     }
-}
 
-// End capping
-#{$grid-class-column}#{$grid-class-end} {
-    margin-right: 0 !important;
-    float: right !important;
-}
+    // End capping
+    #{$grid-class-column}#{$grid-class-end} {
+        margin-#{$align-opposite-direction}: 0 !important;
+        float: $align-opposite-direction !important;
+    }
+}