titon-toolkit 1.5.3 → 2.0.0.pre.rc.1

data/scss/toolkit/components/drop.scss

@@ -1,12 +1,12 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
 @import "../common";
 
-.#{$vendor-prefix}drop {
+#{$drop-class} {
     @include reset-list;
     text-align: left;
     position: absolute;
@@ -20,14 +20,13 @@
     transition: left $drop-transition, opacity $drop-transition, visibility $drop-transition;
 
     // Nested
-    .#{$vendor-prefix}drop {
+    #{$drop-class} {
         display: block;
         top: 0;
         left: 90%;
         z-index: $drop-zindex + 1;
     }
 
-    // Apply to self
     ul,
     ol {
         @include reset-list;
@@ -52,7 +51,7 @@
 
         // Show nested dropdown
         &:hover {
-            .#{$vendor-prefix}drop {
+            #{$drop-class} {
                 visibility: visible;
                 opacity: 1;
                 left: 100%;
@@ -61,44 +60,54 @@
     }
 }
 
-.#{$vendor-prefix}drop-divider {
+#{$drop-class-divider} {
     margin: ($margin / 2) 0;
     border-top: 1px solid $gray-dark;
 }
 
-.#{$vendor-prefix}drop-heading {
+#{$drop-class-heading} {
     padding: $small-padding;
 }
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}drop.#{$vendor-prefix}drop--up {
-    top: auto;
-    bottom: 100%;
+@if index($drop-modifiers, "up") {
+    #{$drop-class-modifier-up} {
+        top: auto;
+        bottom: 100%;
+    }
 }
 
-.#{$vendor-prefix}drop.#{$vendor-prefix}drop--right {
-    top: auto;
-    left: 100%;
+@if index($drop-modifiers, "right") {
+    #{$drop-class-modifier-right} {
+        top: auto;
+        left: 100%;
+    }
 }
 
-.#{$vendor-prefix}drop.#{$vendor-prefix}drop--left {
-    top: auto;
-    left: auto;
-    right: 100%;
+@if index($drop-modifiers, "left") {
+    #{$drop-class-modifier-left} {
+        top: auto;
+        left: auto;
+        right: 100%;
+    }
 }
 
-.#{$vendor-prefix}drop.#{$vendor-prefix}drop--right,
-.#{$vendor-prefix}drop.#{$vendor-prefix}drop--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;
+        }
     }
 }
 
-.#{$vendor-prefix}drop.#{$vendor-prefix}drop--down,
-.#{$vendor-prefix}drop.#{$vendor-prefix}drop--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/flyout.scss

@@ -1,19 +1,18 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
 @import "../common";
 
-.#{$vendor-prefix}flyout {
+#{$flyout-class} {
     position: absolute;
     top: 0;
     left: 0;
     z-index: $flyout-zindex;
     opacity: 0;
     visibility: hidden;
-    box-sizing: content-box; // required by MooTools for multi columns
     transition: opacity $flyout-transition, visibility $flyout-transition;
 
     ul {
@@ -34,10 +33,6 @@
             .caret-right { display: none; }
         }
 
-        // Hover states
-        > a:hover,
-        &.is-open > a {}
-
         // Display caret arrow
         &.has-children > a .caret-right {
             float: right;
@@ -46,7 +41,7 @@
         }
 
         // Nested flyouts
-        > .#{$vendor-prefix}flyout {
+        > #{$flyout-class} {
             left: 90%;
             transition: left $flyout-transition, right $flyout-transition, opacity $flyout-transition, visibility $flyout-transition;
 
@@ -58,7 +53,7 @@
             }
         }
 
-        &.is-open > .#{$vendor-prefix}flyout {
+        &.is-open > #{$flyout-class} {
             opacity: 1;
             visibility: visible;
             left: 100%;
@@ -73,7 +68,7 @@
     @include clear-fix;
 }
 
-.#{$vendor-prefix}flyout-heading {
+#{$flyout-class-heading} {
     padding: $small-padding;
     line-height: 100%;
     display: block;

data/scss/toolkit/{layout → components}/form.scss

@@ -1,5 +1,5 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
@@ -34,30 +34,28 @@ input[type="search"] {
 
 // Required values to match browser restrictions
 label,
-.#{$vendor-prefix}input-static {
+#{$form-class-input-static} {
     font-size: inherit;
     line-height: normal;
 }
 
 //-------------------- Inputs --------------------//
 
-.#{$vendor-prefix}input,
-.#{$vendor-prefix}input-static,
-.#{$vendor-prefix}input-radio,
-.#{$vendor-prefix}input-checkbox {
+#{$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;
-    box-shadow: none;
     -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; }
 }
 
-.#{$vendor-prefix}input {
+#{$form-class-input} {
     background: $gray-lightest;
     border-radius: $round;
     transition: all $default-transition;
@@ -66,33 +64,34 @@ label,
 
     &:focus {
         border-color: $info;
-        box-shadow: 0 0 5px $info-light;
         outline: none;
     }
 
     &[readonly] {
         color: $gray-darkest;
         border: 1px solid $gray-dark;
-        box-shadow: none;
     }
 
-    @include is-disabled {
-        cursor: not-allowed;
+    &.is-disabled,
+    &[disabled],
+    option[disabled],
+    optgroup[disabled] {
         color: $gray-darkest;
         border-color: $gray;
     }
 }
 
-.#{$vendor-prefix}input-static {
+#{$form-class-input-static} {
     background: transparent;
     border-color: transparent;
     padding-left: 0 !important;
     padding-right: 0 !important;
 }
 
-.#{$vendor-prefix}input-radio,
-.#{$vendor-prefix}input-checkbox {
-    padding: 0;
+#{$form-class-input-radio},
+#{$form-class-input-checkbox} {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
     border: 0;
 
     input[type="checkbox"],
@@ -102,115 +101,123 @@ label,
         top: -2px;
         margin-right: 5px;
     }
+
+    &.is-disabled {
+        color: $gray-darkest;
+    }
 }
 
-select.#{$vendor-prefix}input {
+select#{$form-class-input} {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-}
 
-select.#{$vendor-prefix}input[multiple] {
-    max-height: 500px;
+    &[multiple] {
+        max-height: 500px;
+    }
 }
 
-textarea.#{$vendor-prefix}input {
+textarea#{$form-class-input} {
     line-height: 135%;
     min-height: 150px;
 }
 
 //-------------------- Fields, Labels --------------------//
 
-.#{$vendor-prefix}fields {
+#{$form-class-fields} {
     @include reset-list;
 }
 
-.#{$vendor-prefix}field,
-.#{$vendor-prefix}fields li {
+#{$form-class-field},
+#{$form-class-fields} li {
     margin-bottom: $margin;
 
     &.is-required {
-        .#{$vendor-prefix}field-label { font-weight: bold; }
+        #{$form-class-field-label} { font-weight: bold; }
     }
 
     &:not(.is-disabled) {
         &.is-error {
-            .#{$vendor-prefix}input {
+            #{$form-class-input} {
                 border-color: $error;
-
-                &:focus { box-shadow: 0 0 5px $error-light; }
             }
 
-            .#{$vendor-prefix}input-radio,
-            .#{$vendor-prefix}input-checkbox {
+            #{$form-class-input-radio},
+            #{$form-class-input-checkbox} {
                 color: $error-dark;
             }
         }
 
         &.is-success {
-            .#{$vendor-prefix}input {
+            #{$form-class-input} {
                 border-color: $success;
-
-                &:focus { box-shadow: 0 0 5px $success-light; }
             }
 
-            .#{$vendor-prefix}input-radio,
-            .#{$vendor-prefix}input-checkbox {
+            #{$form-class-input-radio},
+            #{$form-class-input-checkbox} {
                 color: $success-dark;
             }
         }
     }
 }
 
-.#{$vendor-prefix}field-label {
+#{$form-class-field-label} {
     display: block;
     vertical-align: middle;
     margin-bottom: .5em;
 }
 
-.#{$vendor-prefix}field-help {
+#{$form-class-field-help} {
     margin-top: .5em;
     font-size: $small-size;
 }
 
-.#{$vendor-prefix}form-actions {
+#{$form-class-actions} {
     text-align: center;
 }
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}form--horizontal {
-    .#{$vendor-prefix}field,
-    .#{$vendor-prefix}fields li { @include grid-row; }
+@if index($form-modifiers, "horizontal") {
+    #{$form-class-modifier-horizontal} {
+        #{$form-class-field},
+        #{$form-class-fields} li { @include grid-row; }
 
-    .#{$vendor-prefix}field-label {
-        text-align: right;
-        border: 1px solid transparent; // matches input sizes
-        padding-top: $medium-padding;
-    }
+        #{$form-class-field-label} {
+            text-align: right;
+            border: 1px solid transparent; // matches input sizes
+            padding-top: $medium-padding;
+        }
 
-    .#{$vendor-prefix}field-col { padding-left: $margin; }
+        #{$form-class-field-column} { padding-left: $margin; }
+    }
 }
 
-.#{$vendor-prefix}form--inline {
-    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-right: $margin;
+            margin-bottom: $margin / 2;
+        }
 
-    .#{$vendor-prefix}field,
-    .#{$vendor-prefix}fields li,
-    .#{$vendor-prefix}field-label,
-    .#{$vendor-prefix}form-actions {
-        display: inline-block;
-        vertical-align: middle;
-        line-height: normal;
-        margin-right: $margin;
-        margin-bottom: $margin / 2;
-    }
+        fieldset {
+            border: 0;
+            margin: 0;
+            padding: 0;
+        }
 
-    .#{$vendor-prefix}field-label { margin: 0 ($margin / 2) 0 0; }
-    .#{$vendor-prefix}field-help { display: none; }
+        #{$form-class-field-label} { margin: 0 ($margin / 2) 0 0; }
 
-    .#{$vendor-prefix}input-radio,
-    .#{$vendor-prefix}input-checkbox {
-        padding: $medium-padding 0;
+        legend,
+        #{$form-class-field-help} { display: none; }
     }
 }

data/scss/toolkit/components/grid.scss

@@ -1,150 +1,55 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
 @import "../common";
 
-%row { @include grid-row; }
-%col { @include grid-column; }
-
 // Row wrapper
-.#{$vendor-prefix}grid {
+#{$grid-class} {
     @extend %row;
 }
 
 // These should be the same for all sizes
-.col[class*="span-"] {
+#{$grid-class-column}[class*="span-"] {
     @extend %col;
 }
 
-@for $i from 1 through 12 {
-    $span: grid-span($i, 12);
-
-    .span-#{$i} { width: $span; }
-    .push-#{$i} { left: $span; }
-    .pull-#{$i} { right: $span; }
-}
-
-// Determine which grid to use
-@if $responsive-size == "device" or $responsive-size == "both" {
-
-    // Mobile supports 3 columns
-    @include in-mobile {
-        .col[class*="mobile-"] {
-            @include grid-column;
-        }
-
-        @for $i from 1 through $grid-columns-mobile {
-            $span: grid-span($i, $grid-columns-mobile);
-
-            .col.mobile-#{$i} { width: $span; }
-
-            @if $grid-push-pull {
-                .col.mobile-push-#{$i} { left: $span; }
-                .col.mobile-pull-#{$i} { right: $span; }
-            }
-        }
-    }
-
-    // Tablet supports 6 columns
-    @include in-tablet {
-        .col[class*="tablet-"] {
-            @include grid-column;
-        }
-
-        @for $i from 1 through $grid-columns-tablet {
-            $span: grid-span($i, $grid-columns-tablet);
-
-            .col.tablet-#{$i} { width: $span; }
-
-            @if $grid-push-pull {
-                .col.tablet-push-#{$i} { left: $span; }
-                .col.tablet-pull-#{$i} { right: $span; }
-            }
-        }
-    }
-
-    // Desktop supports 12 columns
-    @include in-desktop {
-        .col[class*="desktop-"] {
-            @include grid-column;
-        }
-
-        @for $i from 1 through $grid-columns-desktop {
-            $span: grid-span($i, $grid-columns-desktop);
-
-            .col.desktop-#{$i} { width: $span; }
+// Global Push and pull classes
+@if $grid-push-pull {
+    @for $i from 1 through 12 {
+        $span: grid-span($i, 12);
 
-            @if $grid-push-pull {
-                .col.desktop-push-#{$i} { left: $span; }
-                .col.desktop-pull-#{$i} { right: $span; }
-            }
-        }
+        .push-#{$i} { left: $span; }
+        .pull-#{$i} { right: $span; }
     }
-
 }
 
-@if $responsive-size == "size" or $responsive-size == "both" {
+// Grid sizes
+@each $size, $options in $grid-sizes {
+    $size-columns: nth($options, 1);
 
-    // Small supports 6 columns
-    @include in-small {
-        .col[class*="small-"] {
+    @include in-range(nth($options, 2)) {
+        #{$grid-class-column}[class*="#{$size}-"] {
             @include grid-column;
         }
 
-        @for $i from 1 through $grid-columns-small {
-            $span: grid-span($i, $grid-columns-small);
+        @for $i from 1 through $size-columns {
+            $span: grid-span($i, $size-columns);
 
-            .col.small-#{$i} { width: $span; }
+            #{$grid-class-column}.#{$size}-#{$i} { width: $span; }
 
             @if $grid-push-pull {
-                .col.small-push-#{$i} { left: $span; }
-                .col.small-pull-#{$i} { right: $span; }
+                #{$grid-class-column}.#{$size}-push-#{$i} { left: $span; }
+                #{$grid-class-column}.#{$size}-pull-#{$i} { right: $span; }
             }
         }
     }
-
-    // Medium supports 8 columns
-    @include in-medium {
-        .col[class*="medium-"] {
-            @include grid-column;
-        }
-
-        @for $i from 1 through $grid-columns-medium {
-            $span: grid-span($i, $grid-columns-medium);
-
-            .col.medium-#{$i} { width: $span; }
-
-            @if $grid-push-pull {
-                .col.medium-push-#{$i} { left: $span; }
-                .col.medium-pull-#{$i} { right: $span; }
-            }
-        }
-    }
-
-    // Large supports 12 columns
-    @include in-large {
-        .col[class*="large-"] {
-            @include grid-column;
-        }
-
-        @for $i from 1 through $grid-columns-large {
-            $span: grid-span($i, $grid-columns-large);
-
-            .col.large-#{$i} { width: $span; }
-
-            @if $grid-push-pull {
-                .col.large-push-#{$i} { left: $span; }
-                .col.large-pull-#{$i} { right: $span; }
-            }
-        }
-    }
-
 }
 
-.col.end {
+// End capping
+#{$grid-class-column}#{$grid-class-end} {
     margin-right: 0 !important;
     float: right !important;
 }

data/scss/toolkit/components/icon.scss

@@ -1,28 +1,42 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
 @import "../common";
 
-[class*="icon-"] {
+$icon-class-without-dot: remove-selector-char($icon-class);
+
+[class*="#{$icon-class-without-dot}-"] {
     @include reset-inline-block;
     background-repeat: no-repeat;
 
-    @include is-disabled { opacity: $disabled-opacity; }
+    &.is-disabled { opacity: $disabled-opacity; }
 }
 
-[class*="icon-12"] { width: 12px; height: 12px; }
-[class*="icon-16"] { width: 16px; height: 16px; }
-[class*="icon-24"] { width: 24px; height: 24px; }
-[class*="icon-32"] { width: 32px; height: 32px; }
-[class*="icon-64"] { width: 64px; height: 64px; }
+@each $size in $icon-sizes {
+    [class*="#{$icon-class-without-dot}-#{$size}"] { width: #{$size}px; height: #{$size}px; }
+}
 
 //-------------------- Modifiers --------------------//
 
-.icon--90deg { transform: rotate(90deg); }
-.icon--180deg { transform: rotate(180deg); }
-.icon--270deg { transform: rotate(270deg); }
-.icon--flip { transform: rotateY(180deg); }
-.icon--flip-vert { transform: rotateX(180deg); }
+@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, "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-vert") {
+    #{$icon-class-modifier-flip-vert} { transform: rotateX(180deg); }
+}