scss/toolkit/components/input.scss in titon-toolkit-2.0.2 vs scss/toolkit/components/input.scss in titon-toolkit-2.1.0

@@ -4,129 +4,132 @@
  * @link        http://titon.io
  */
 
 @import "../common";
 
-#{$input-class} {
-    @include reset-inline-block;
-}
-
-// Checkbox, radio
-#{$input-class} {
-    #{$input-class-checkbox},
-    #{$input-class-radio} {
+@include export("input") {
+    #{$input-class} {
         @include reset-inline-block;
-        background: $gray-lightest;
-        border: 1px solid $gray-dark;
-        width: 16px;
-        height: 16px;
-        top: -3px;
-        line-height: 1rem;
-        border-radius: $round;
-
-        &:hover { border-color: $gray-darkest; }
     }
 
-    #{$input-class-radio} { border-radius: 50%; }
+    // Checkbox, radio
+    #{$input-class} {
+        #{$input-class-checkbox},
+        #{$input-class-radio} {
+            @include reset-inline-block;
+            background: $gray-lightest;
+            border: 1px solid $gray-dark;
+            width: 16px;
+            height: 16px;
+            top: -3px;
+            line-height: 1rem;
+            border-radius: $round;
 
-    input {
-        display: none;
-
-        // Style when the checkbox is checked
-        &:checked + #{$input-class-checkbox},
-        &:checked + #{$input-class-radio} {
-            border-color: $info;
-            background: $info-light;
+            &:hover { border-color: $gray-darkest; }
         }
 
-        // Style when input is disabled
-        &[disabled] + #{$input-class-checkbox},
-        &[disabled] + #{$input-class-radio} {
-            cursor: not-allowed;
-            border-color: $gray;
-        }
-    }
-}
+        #{$input-class-radio} { border-radius: 50%; }
 
-// Select
-#{$input-class} {
-    #{$input-class-select} {
-        @include reset-inline-block;
-        cursor: pointer;
-        background: $gray-lightest;
-        border: 1px solid $gray-dark;
-        border-radius: $round;
-        white-space: nowrap;
-        line-height: 1rem;
-        z-index: 3;
+        input {
+            display: none;
 
-        &.is-active {
-            border-color: $info;
+            // Style when the checkbox is checked
+            &:checked + #{$input-class-checkbox},
+            &:checked + #{$input-class-radio} {
+                border-color: $info;
+                background: $info-light;
+            }
+
+            // Style when input is disabled
+            &[disabled] + #{$input-class-checkbox},
+            &[disabled] + #{$input-class-radio} {
+                cursor: not-allowed;
+                border-color: $gray;
+            }
         }
     }
 
-    #{$input-class-select-label},
-    #{$input-class-select-arrow} {
-        display: inline-block;
-        vertical-align: middle;
-        line-height: normal;
-        @include size-medium;
-    }
+    // Select
+    #{$input-class} {
+        #{$input-class-select} {
+            @include reset-inline-block;
+            cursor: pointer;
+            background: $gray-lightest;
+            border: 1px solid $gray-dark;
+            border-radius: $round;
+            white-space: nowrap;
+            line-height: 1rem;
+            z-index: 3;
 
-    #{$input-class-select-arrow} {
-        float: right;
-
-        .caret-down { border-top-color: #000; }
-    }
-
-    // Position the real select over the custom one
-    select {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 5;
-        opacity: 0;
-        width: 100%;
-
-        // Style when the select is hovered
-        &:hover + #{$input-class-select} {
-            border-color: $gray-darkest;
+            &.is-active {
+                border-color: $info;
+            }
         }
 
-        // Style when the select is focused
-        &:focus + #{$input-class-select} {
-            border-color: $info;
+        #{$input-class-select-label},
+        #{$input-class-select-arrow} {
+            display: inline-block;
+            vertical-align: middle;
+            line-height: normal;
+            @include size-medium;
         }
 
-        // Style when select is disabled
-        &[disabled] + #{$input-class-select} {
-            cursor: not-allowed;
-            color: $gray-darkest;
-            border-color: $gray;
+        #{$input-class-select-arrow} {
+            float: $align-opposite-direction;
 
-            #{$input-class-select-arrow} { opacity: $default-opacity; }
+            .caret-down { border-top-color: #000; }
         }
-    }
 
-    // Select dropdown
-    #{$input-class-select-options} {
-        max-height: 300px;
-        overflow: auto;
+        // Position the real select over the custom one
+        select {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 5;
+            opacity: 0;
+            width: 100%;
 
-        li.is-disabled {
-            > a,
-            > a:hover {
-                background: none;
+            // Style when the select is hovered
+            &:hover + #{$input-class-select} {
+                border-color: $gray-darkest;
+            }
+
+            // Style when the select is focused
+            &:focus + #{$input-class-select} {
+                border-color: $info;
+            }
+
+            // Style when select is disabled
+            &[disabled] + #{$input-class-select} {
+                cursor: not-allowed;
                 color: $gray-darkest;
-                cursor: default;
+                border-color: $gray;
+
+                #{$input-class-select-arrow} { opacity: $default-opacity; }
             }
         }
 
-        &.hide-selected {
-            li.is-active { display: none !important; }
-        }
+        // Select dropdown
+        #{$input-class-select-options} {
+            max-height: 300px;
+            overflow: auto;
+            z-index: 5;
 
-        &.hide-first {
-            li:first-child:not(#{$drop-class-heading}) { display: none !important; }
+            li.is-disabled {
+                > a,
+                > a:hover {
+                    background: none;
+                    color: $gray-darkest;
+                    cursor: default;
+                }
+            }
+
+            &.hide-selected {
+                li.is-active { display: none !important; }
+            }
+
+            &.hide-first {
+                li:first-child:not(#{$drop-class-heading}) { display: none !important; }
+            }
         }
     }
-}
\ No newline at end of file
+}