titon-toolkit 1.2.2 → 1.3.0

data/scss/toolkit/components/table.scss

@@ -52,17 +52,17 @@
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}table.#{$state-has-prefix}hover {
+.#{$vendor-prefix}table.has-hover {
     tbody tr:not(.#{$vendor-prefix}table-divider):hover { background: #fff; }
 }
 
-.#{$vendor-prefix}table.#{$state-is-prefix}striped tbody tr {
+.#{$vendor-prefix}table.is-striped tbody tr {
     background: $gray;
 
     &:nth-child(odd) { background: $gray-lightest; }
 }
 
-.#{$vendor-prefix}table.#{$state-is-prefix}sortable {
+.#{$vendor-prefix}table.is-sortable {
     thead th {
         padding: 0;
 
@@ -86,7 +86,7 @@
     thead th,
     tbody td { padding: $small-padding; }
 
-    &.#{$state-is-prefix}sortable {
+    &.is-sortable {
         thead th {
             padding: 0;
 
@@ -100,7 +100,7 @@
     thead th,
     tbody td { padding: $large-padding; }
 
-    &.#{$state-is-prefix}sortable {
+    &.is-sortable {
         thead th {
             padding: 0;
 

data/scss/toolkit/components/tooltip.scss

@@ -20,7 +20,7 @@ $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
     visibility: hidden;
     background: #000;
     color: #fff;
-    @include box-sizing(content-box); // Required or else MooTools position() is off
+    box-sizing: content-box; // Required or else MooTools position() is off
 
     &.center-left .#{$vendor-prefix}tooltip-arrow,
     &.center-right .#{$vendor-prefix}tooltip-arrow {
@@ -76,39 +76,39 @@ $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
     @if index($popover-tooltip-animation, "fade") {
         &.fade {
             opacity: 0;
-            @include transition(opacity 0.5s);
+            transition: opacity 0.5s;
         }
     }
 
     @if index($popover-tooltip-animation, "from-above") {
         &.from-above {
-            @include transition(transform $tooltip-transition);
-            @include transform(scale(1.2));
+            transition: transform $tooltip-transition;
+            transform: scale(1.2);
 
             &.show {
-                @include transform(scale(1));
+                transform: scale(1);
             }
         }
     }
 
     @if index($popover-tooltip-animation, "from-below") {
         &.from-below {
-            @include transition(transform $tooltip-transition);
-            @include transform(scale(0.8));
+            transition: transform $tooltip-transition;
+            transform: scale(0.8);
 
             &.show {
-                @include transform(scale(1));
+                transform: scale(1);
             }
         }
     }
 
     @if index($popover-tooltip-animation, "flip-rotate") {
         &.flip-rotate {
-            @include transition(transform $tooltip-transition);
-            @include transform(rotate(-15deg));
+            transition: transform $tooltip-transition;
+            transform: rotate(-15deg);
 
             &.show {
-                @include transform(rotate(0deg));
+                transform: rotate(0deg);
             }
         }
     }

data/scss/toolkit/components/type-ahead.scss

@@ -13,7 +13,7 @@
     z-index: $typeAhead-zindex;
     opacity: 0;
     visibility: hidden;
-    @include transition(opacity 0.3s);
+    transition: opacity 0.3s;
 
     ul {
         @include reset-list;
@@ -29,7 +29,7 @@
         }
 
         > a:hover,
-        &.#{$state-is-prefix}active a {}
+        &.is-active a {}
     }
 }
 
@@ -52,13 +52,6 @@
 
 .#{$vendor-prefix}type-ahead-shadow {
     position: relative;
-    height: 2rem;
-
-    input {
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
 
     .is-shadow {
         color: gray;
@@ -66,6 +59,10 @@
 
     .not-shadow {
         background: transparent;
-        z-index: 1;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        zoom: 1;
     }
 }

data/scss/toolkit/effects/pill.scss

@@ -75,6 +75,16 @@
     }
 }
 
+//-------------------- Switch --------------------//
+
+.#{$vendor-prefix}switch.#{$shape-pill-class} {
+    border-radius: $pill;
+
+    .#{$vendor-prefix}switch-toggle {
+        border-radius: $pill;
+    }
+}
+
 //-------------------- Visual --------------------//
 
 .#{$vendor-prefix}visual-gloss.#{$shape-pill-class}:after {

data/scss/toolkit/effects/visual.scss

@@ -17,7 +17,7 @@
         top: 1%;
         left: 0;
         border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
-        @include background-image(linear-gradient(left, white(.3) 0%, white(0) 50%, white(.3) 100%));
+        background: linear-gradient(to left, white(.3) 0%, white(0) 50%, white(.3) 100%);
     }
 
     &.#{$shape-round-class}:after {
@@ -36,7 +36,7 @@
     height: 50%;
     top: 0;
     left: 0;
-    @include background-image(linear-gradient(top, white(0), white(.3)));
+    background: linear-gradient(180deg, white(0), white(.3));
 }
 
 //-------------------- Glare --------------------//
@@ -48,7 +48,7 @@
     height: 100%;
     top: 0;
     left: 0;
-    @include background-image(linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%));
+    background: linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%);
 }
 
 //-------------------- Popout --------------------//

data/scss/toolkit/layout/base.scss

@@ -7,7 +7,7 @@
 @import "../common";
 
 // Use border-box for everything
-*, *:after, *:before { @include box-sizing(border-box); }
+*, *:after, *:before { box-sizing: border-box; }
 
 // Alignment
 .align-left { text-align: left; }
@@ -33,16 +33,16 @@
     position: absolute;
     left: 50%;
     top: 50%;
-    @include transform(translate(-50%, -50%));
+    transform: translate(-50%, -50%);
 }
 
 .clear-fix { @include clear-fix; }
 
 // Styles
 .#{$shape-round-class} { border-radius: $round; }
-.#{$state-is-prefix}draggable { cursor: move; }
-.#{$state-is-prefix}dragging { cursor: grabbing; }
-.#{$state-is-prefix}disabled,
+.is-draggable { cursor: move; }
+.is-dragging { cursor: grabbing; }
+.is-disabled,
 [disabled] { cursor: not-allowed !important; }
 
 // Carets
@@ -84,9 +84,9 @@
     content: "\025B4"; /* blacktriangle */
 }
 
-.arrow-right:before { @include transform(rotate(90deg)); }
-.arrow-left:before { @include transform(rotate(-90deg)); }
-.arrow-down:before { @include transform(rotate(180deg)); }
+.arrow-right:before { transform: rotate(90deg); }
+.arrow-left:before { transform: rotate(-90deg); }
+.arrow-down:before { transform: rotate(180deg); }
 
 // Bullets
 .bullets {

data/scss/toolkit/layout/code.scss

@@ -45,7 +45,7 @@ pre {
         display: block;
     }
 
-    &.#{$state-is-prefix}scrollable {
+    &.is-scrollable {
         max-height: 350px;
         overflow-y: auto;
     }

data/scss/toolkit/layout/form.scss

@@ -26,15 +26,9 @@ legend {
 select[multiple],
 select[size] { height: auto; }
 
-// Reset browser styles
-input::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-}
-
 // Override normalize
 input[type="search"] {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
 }
 
 // Required values to match browser restrictions
@@ -62,7 +56,7 @@ label,
 .#{$vendor-prefix}input {
     background: $gray-lightest;
     border-radius: $round;
-    @include transition(all $default-transition);
+    transition: all $default-transition;
 
     &:hover { border-color: $gray-darkest; }
 
@@ -126,13 +120,13 @@ textarea.#{$vendor-prefix}input {
 .#{$vendor-prefix}field {
     margin-bottom: $margin;
 
-    &.#{$state-is-prefix}required {
+    &.is-required {
         .#{$vendor-prefix}field-label { font-weight: bold; }
     }
 }
 
-.#{$vendor-prefix}field:not(.#{$state-is-prefix}disabled) {
-    &.#{$state-is-prefix}error {
+.#{$vendor-prefix}field:not(.is-disabled) {
+    &.is-error {
         .#{$vendor-prefix}input {
             border-color: $error;
 
@@ -145,7 +139,7 @@ textarea.#{$vendor-prefix}input {
         }
     }
 
-    &.#{$state-is-prefix}success {
+    &.is-success {
         .#{$vendor-prefix}input {
             border-color: $success;
 

data/scss/toolkit/mixins/_layout.scss

@@ -27,7 +27,7 @@
     position: absolute;
     left: 50%;
     top: 50%;
-    @include transform(translate(-50%, -50%));
+    transform: translate(-50%, -50%);
 }
 
 @mixin size-small {

data/scss/toolkit/mixins/_state.scss

@@ -1,36 +1,36 @@
 
 @mixin is-active {
-    .#{$state-is-prefix}active > &,
-    .#{$state-is-prefix}active > li > &,
-    &.#{$state-is-prefix}active,
-    &.#{$state-is-prefix}active:hover { @content; }
+    .is-active > &,
+    .is-active > li > &,
+    &.is-active,
+    &.is-active:hover { @content; }
 }
 
 @mixin is-active-parent {
-    .#{$state-is-prefix}active & { @content; }
+    .is-active & { @content; }
 }
 
 @mixin is-disabled {
-    .#{$state-is-prefix}disabled > &,
-    .#{$state-is-prefix}disabled > li > &,
-    &.#{$state-is-prefix}disabled,
-    &.#{$state-is-prefix}disabled:hover,
+    .is-disabled > &,
+    .is-disabled > li > &,
+    &.is-disabled,
+    &.is-disabled:hover,
     &[disabled],
     &[disabled]:hover { @content; }
 }
 
 @mixin is-info {
-    &.#{$state-is-prefix}info { @content; }
+    &.is-info { @content; }
 }
 
 @mixin is-error {
-    &.#{$state-is-prefix}error { @content; }
+    &.is-error { @content; }
 }
 
 @mixin is-warning {
-    &.#{$state-is-prefix}warning { @content; }
+    &.is-warning { @content; }
 }
 
 @mixin is-success {
-    &.#{$state-is-prefix}success { @content; }
+    &.is-success { @content; }
 }

data/scss/toolkit/themes/demo.scss

@@ -36,7 +36,7 @@ mark { background: lighten($warning-light, 25%); }
     background: $gray;
     border: 1px solid $gray-dark;
     margin: -1px;
-    @include transition(all .15s);
+    transition: all .15s;
 
     &:hover { background-color: $gray-light; }
 
@@ -91,7 +91,7 @@ mark { background: lighten($warning-light, 25%); }
     background: $gray;
     font-weight: bold;
     text-shadow: 1px 1px black(.2);
-    @include transition(all .2s);
+    transition: all .2s;
     @include button-style($default, $default-light, $default-dark);
 
     &:active {
@@ -146,10 +146,7 @@ mark { background: lighten($warning-light, 25%); }
 
 //-------------------- Drop --------------------//
 
-.drop--down,
-.drop--up,
-.drop--right,
-.drop--left {
+.drop {
     background: $gray;
     border: 1px solid $gray-dark;
     box-shadow: 5px 5px black(.25);
@@ -250,7 +247,7 @@ mark { background: lighten($warning-light, 25%); }
     .checkbox,
     .radio,
     .select {
-        @include transition(all $default-transition);
+        transition: all $default-transition;
     }
 
     input {
@@ -268,7 +265,7 @@ mark { background: lighten($warning-light, 25%); }
     .select.is-active {
         .caret-down {
             top: -5px;
-            @include transform(rotate(-180deg));
+            transform: rotate(-180deg);
         }
     }
 }
@@ -402,7 +399,7 @@ mark { background: lighten($warning-light, 25%); }
 
     &.top-center .popover-arrow {
         border-top-color: black(.25);
-        @include transform(translateY(6px));
+        transform: translateY(6px);
 
         &:after {
             margin-top: -8px;
@@ -412,7 +409,7 @@ mark { background: lighten($warning-light, 25%); }
 
     &.center-left .popover-arrow {
         border-left-color: black(.25);
-        @include transform(translateX(6px));
+        transform: translateX(6px);
 
         &:after {
             margin-left: -8px;
@@ -485,6 +482,54 @@ mark { background: lighten($warning-light, 25%); }
     border: 1px solid $gray-dark;
 }
 
+//-------------------- Step --------------------//
+
+.steps ol {
+    border: 1px solid $gray-dark;
+    background: $gray;
+}
+
+.step:after {
+    background: $gray;
+    border-right: 1px solid $gray-dark;
+    border-bottom: 1px solid $gray-dark;
+}
+
+a.step:hover,
+a.step:hover:after {
+    background: $gray-lightest;
+}
+
+.steps li.is-complete {
+    a.step,
+    a.step:after {
+        background: $info;
+        color: #fff;
+    }
+}
+
+//-------------------- Switch --------------------//
+
+.switch {
+    overflow: hidden;
+    background: $gray-light;
+    border: 1px solid $gray-dark;
+
+    input:checked + .switch-bar {
+        background: $info;
+        color: #fff;
+    }
+}
+
+.switch-toggle {
+    background: #fff;
+}
+
+.switch--stacked input:not(:checked) + .switch-bar:before,
+.switch--stacked input:checked + .switch-bar:after {
+    color: $foreground-color;
+}
+
 //-------------------- Tooltip --------------------//
 
 .tooltip {