titon-toolkit 2.0.2 → 2.1.0

data/scss/toolkit/components/icon.scss

@@ -6,37 +6,40 @@
 
 @import "../common";
 
-$icon-class-without-dot: remove-selector-char($icon-class);
+@include export("icon") {
+    $icon-class-without-dot: remove-selector($icon-class);
 
-[class*="#{$icon-class-without-dot}-"] {
-    @include reset-inline-block;
-    background-repeat: no-repeat;
+    [class*="#{$icon-class-without-dot}-"] {
+        @include reset-inline-block;
+        background-repeat: no-repeat;
+        speak: none;
 
-    &.is-disabled { opacity: $disabled-opacity; }
-}
+        &.is-disabled { opacity: $disabled-opacity; }
+    }
 
-@each $size in $icon-sizes {
-    [class*="#{$icon-class-without-dot}-#{$size}"] { width: #{$size}px; height: #{$size}px; }
-}
+    @each $size in $icon-sizes {
+        [class*="#{$icon-class-without-dot}-#{$size}"] { width: #{$size}px; height: #{$size}px; }
+    }
 
-//-------------------- Modifiers --------------------//
+    //-------------------- Modifiers --------------------//
 
-@if index($icon-modifiers, "90deg") {
-    #{$icon-class-modifier-90deg} { transform: rotate(90deg); }
-}
+    @if index($icon-modifiers, "90deg") {
+        #{$icon-class-modifier-90deg} { transform: rotate(90deg); }
+    }
 
-@if index($icon-modifiers, "180deg") {
-    #{$icon-class-modifier-180deg} { transform: rotate(180deg); }
-}
+    @if index($icon-modifiers, "180deg") {
+        #{$icon-class-modifier-180deg} { transform: rotate(180deg); }
+    }
 
-@if index($icon-modifiers, "270deg") {
-    #{$icon-class-modifier-270deg} { transform: rotate(270deg); }
-}
+    @if index($icon-modifiers, "270deg") {
+        #{$icon-class-modifier-270deg} { transform: rotate(270deg); }
+    }
 
-@if index($icon-modifiers, "flip") {
-    #{$icon-class-modifier-flip} { transform: rotateY(180deg); }
-}
+    @if index($icon-modifiers, "flip") {
+        #{$icon-class-modifier-flip} { transform: rotateY(180deg); }
+    }
 
-@if index($icon-modifiers, "flip-vert") {
-    #{$icon-class-modifier-flip-vert} { transform: rotateX(180deg); }
-}
+    @if index($icon-modifiers, "flip-vert") {
+        #{$icon-class-modifier-flip-vert} { transform: rotateX(180deg); }
+    }
+}

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

@@ -6,46 +6,48 @@
 
 @import "../common";
 
-#{$inputGroup-class} {
-    display: inline-block;
-    vertical-align: middle;
-    white-space: nowrap;
-
-    > * {
-        float: left;
+@include export("input-group") {
+    #{$inputGroup-class} {
         display: inline-block;
-        position: relative;
-        border-radius: 0;
-        white-space: nowrap;
-        height: auto;
         vertical-align: middle;
+        white-space: nowrap;
 
-        &:hover { z-index: 1; }
-        &:focus { z-index: 2; }
-    }
-
-    @include clear-fix;
-}
+        > * {
+            float: $align-direction;
+            display: inline-block;
+            position: relative;
+            border-radius: 0;
+            white-space: nowrap;
+            height: auto;
+            vertical-align: middle;
 
-#{$inputGroup-class-addon} {
-    vertical-align: middle;
-    line-height: normal;
-    @include size-medium;
+            &:hover { z-index: 1; }
+            &:focus { z-index: 2; }
+        }
 
-    @include is-small(false, true) { @include size-small; }
-    @include is-large(false, true) { @include size-large; }
-}
+        @include clear-fix;
+    }
 
-//-------------------- Modifiers --------------------//
+    #{$inputGroup-class-addon} {
+        vertical-align: middle;
+        line-height: normal;
+        @include size-medium;
 
-#{$inputGroup-class}#{$shape-round-class} {
-    > *:first-child {
-        border-top-left-radius: $round;
-        border-bottom-left-radius: $round;
+        @include is-small(false, true) { @include size-small; }
+        @include is-large(false, true) { @include size-large; }
     }
 
-    > *:last-child {
-        border-top-right-radius: $round;
-        border-bottom-right-radius: $round;
+    //-------------------- Modifiers --------------------//
+
+    #{$inputGroup-class}#{$shape-round-class} {
+        > *:first-child {
+            border-top-#{$align-direction}-radius: $round;
+            border-bottom-#{$align-direction}-radius: $round;
+        }
+
+        > *:last-child {
+            border-top-#{$align-opposite-direction}-radius: $round;
+            border-bottom-#{$align-opposite-direction}-radius: $round;
+        }
     }
-}
+}

data/scss/toolkit/components/input.scss

@@ -6,127 +6,130 @@
 
 @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%; }
-
-    input {
-        display: none;
-
-        // Style when the checkbox is checked
-        &:checked + #{$input-class-checkbox},
-        &:checked + #{$input-class-radio} {
-            border-color: $info;
-            background: $info-light;
+    // 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;
+
+            &:hover { border-color: $gray-darkest; }
         }
 
-        // Style when input is disabled
-        &[disabled] + #{$input-class-checkbox},
-        &[disabled] + #{$input-class-radio} {
-            cursor: not-allowed;
-            border-color: $gray;
-        }
-    }
-}
-
-// 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;
-
-        &.is-active {
-            border-color: $info;
-        }
-    }
+        #{$input-class-radio} { border-radius: 50%; }
 
-    #{$input-class-select-label},
-    #{$input-class-select-arrow} {
-        display: inline-block;
-        vertical-align: middle;
-        line-height: normal;
-        @include size-medium;
-    }
+        input {
+            display: none;
 
-    #{$input-class-select-arrow} {
-        float: right;
+            // Style when the checkbox is checked
+            &:checked + #{$input-class-checkbox},
+            &:checked + #{$input-class-radio} {
+                border-color: $info;
+                background: $info-light;
+            }
 
-        .caret-down { border-top-color: #000; }
+            // Style when input is disabled
+            &[disabled] + #{$input-class-checkbox},
+            &[disabled] + #{$input-class-radio} {
+                cursor: not-allowed;
+                border-color: $gray;
+            }
+        }
     }
 
-    // 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;
+    // 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;
+
+            &.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%;
+
+            // Style when the select is hovered
+            &:hover + #{$input-class-select} {
+                border-color: $gray-darkest;
+            }
 
-        li.is-disabled {
-            > a,
-            > a:hover {
-                background: none;
+            // 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;
+
+            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; }
+            &.hide-first {
+                li:first-child:not(#{$drop-class-heading}) { display: none !important; }
+            }
         }
     }
-}
+}

data/scss/toolkit/components/label.scss

@@ -6,122 +6,124 @@
 
 @import "../common";
 
-#{$label-class} {
-    @include reset-inline-block;
-    font-size: .7rem;
-    line-height: 100%;
-    background: $gray-dark;
-    padding: .275rem .425rem;
-    text-transform: uppercase;
-    border-radius: 2px;
-    white-space: nowrap;
-    top: -1px;
-    letter-spacing: 1px;
-
-    @include is-small {
-        font-size: .6rem;
-        padding: .2rem .35rem;
-    }
-
-    @include is-large {
-        font-size: .8rem;
-        padding: .35rem .5rem;
-    }
-
-    &:empty { display: none; }
-
-    &::after {
-        content: "";
-        height: 0;
-        width: 0;
-        position: absolute;
-    }
-}
-
-//-------------------- Modifiers --------------------//
-
-@if index($label-modifiers, "badge") {
-    #{$label-class-modifier-badge} {
-        border-radius: 1rem;
-    }
-}
-
-@if index($label-modifiers, "arrow-left") {
-    #{$label-class-modifier-arrow-left} {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        padding-left: 2px;
-        margin-left: 10px;
-
-        &::after {
-            top: 0;
-            right: 100%;
-            border: .65rem solid transparent;
-            border-right-color: $gray-dark;
-        }
+@include export("label") {
+    #{$label-class} {
+        @include reset-inline-block;
+        font-size: .7rem;
+        line-height: 100%;
+        background: $gray-dark;
+        padding: .275rem .425rem;
+        text-transform: uppercase;
+        border-radius: 2px;
+        white-space: nowrap;
+        top: -1px;
+        letter-spacing: 1px;
 
         @include is-small {
-            &::after { border-width: .5rem; }
+            font-size: .6rem;
+            padding: .2rem .35rem;
         }
 
         @include is-large {
-            &::after { border-width: .75rem; }
+            font-size: .8rem;
+            padding: .35rem .5rem;
         }
-    }
-}
 
-@if index($label-modifiers, "arrow-right") {
-    #{$label-class-modifier-arrow-right} {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        padding-right: 2px;
-        margin-right: 10px;
+        &:empty { display: none; }
 
         &::after {
-            top: 0;
-            left: 100%;
-            border: .65rem solid transparent;
-            border-left-color: $gray-dark;
+            content: "";
+            height: 0;
+            width: 0;
+            position: absolute;
         }
+    }
 
-        @include is-small {
-            &::after { border-width: .5rem; }
-        }
+    //-------------------- Modifiers --------------------//
 
-        @include is-large {
-            &::after { border-width: .75rem; }
+    @if index($label-modifiers, "badge") {
+        #{$label-class-modifier-badge} {
+            border-radius: 1rem;
         }
     }
-}
 
-@if index($label-modifiers, "ribbon-left") {
-    #{$label-class-modifier-ribbon-left} {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+    @if index($label-modifiers, "arrow-left") {
+        #{$label-class-modifier-arrow-left} {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            padding-left: 2px;
+            margin-left: 10px;
+
+            &::after {
+                top: 0;
+                right: 100%;
+                border: .65rem solid transparent;
+                border-right-color: $gray-dark;
+            }
+
+            @include is-small {
+                &::after { border-width: .5rem; }
+            }
+
+            @include is-large {
+                &::after { border-width: .75rem; }
+            }
+        }
+    }
 
-        &::after {
-            top: 100%;
-            left: 0;
-            border: 1em solid transparent;
-            border-top-width: 0 !important;
-            border-left-width: 0 !important;
-            border-right-color: $gray-darkest;
+    @if index($label-modifiers, "arrow-right") {
+        #{$label-class-modifier-arrow-right} {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            padding-right: 2px;
+            margin-right: 10px;
+
+            &::after {
+                top: 0;
+                left: 100%;
+                border: .65rem solid transparent;
+                border-left-color: $gray-dark;
+            }
+
+            @include is-small {
+                &::after { border-width: .5rem; }
+            }
+
+            @include is-large {
+                &::after { border-width: .75rem; }
+            }
         }
     }
-}
 
-@if index($label-modifiers, "ribbon-right") {
-    #{$label-class-modifier-ribbon-right} {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
+    @if index($label-modifiers, "ribbon-left") {
+        #{$label-class-modifier-ribbon-left} {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+
+            &::after {
+                top: 100%;
+                left: 0;
+                border: 1em solid transparent;
+                border-top-width: 0 !important;
+                border-left-width: 0 !important;
+                border-right-color: $gray-darkest;
+            }
+        }
+    }
 
-        &::after {
-            top: 100%;
-            right: 0;
-            border: 1em solid transparent;
-            border-top-width: 0 !important;
-            border-right-width: 0 !important;
-            border-left-color: $gray-darkest;
+    @if index($label-modifiers, "ribbon-right") {
+        #{$label-class-modifier-ribbon-right} {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+
+            &::after {
+                top: 100%;
+                right: 0;
+                border: 1em solid transparent;
+                border-top-width: 0 !important;
+                border-right-width: 0 !important;
+                border-left-color: $gray-darkest;
+            }
         }
     }
-}
+}