titon-toolkit 1.2.2 → 1.3.0

data/scss/toolkit.scss

@@ -27,6 +27,8 @@
 @import "toolkit/components/notice";
 @import "toolkit/components/pagination";
 @import "toolkit/components/progress";
+@import "toolkit/components/step";
+@import "toolkit/components/switch";
 @import "toolkit/components/table";
 
 // And more advanced UI styles last

data/scss/toolkit/_common.scss

@@ -1,19 +1,7 @@
 
-//-------------------- Compass --------------------//
-
-$experimental-support-for-mozilla: true !default;
-$experimental-support-for-webkit: true !default;
-$experimental-support-for-opera: false !default;
-$experimental-support-for-microsoft: false !default;
-$experimental-support-for-khtml: false !default;
-
-$support-for-original-webkit-gradients: false !default;
-
 //-------------------- Toolkit --------------------//
 
 $vendor-prefix: "";
-$state-is-prefix: "is-";
-$state-has-prefix: "has-";
 $size-small-class: "small";
 $size-large-class: "large";
 $shape-square-class: "square";
@@ -53,7 +41,7 @@ $margin: 1.25rem !default;
 $small-size: .7rem !default;
 $small-padding: .5rem !default;
 
-$medium-size: inherit !default;
+$medium-size: 1rem !default;
 $medium-padding: $padding !default;
 
 $large-size: 1.3rem !default;
@@ -116,8 +104,10 @@ $lazyLoad-transition: $default-transition !default;
 $mask-transition: $default-transition !default;
 $matrix-transition: $default-transition !default;
 $modal-transition: $default-transition !default;
+$pin-transition: .2s !default;
 $progress-transition: .5s !default;
 $showcase-transition: $default-transition !default;
+$switch-transition: $default-transition !default;
 $tooltip-transition: $default-transition !default;
 
 //-------------------- Z Index --------------------//
@@ -196,9 +186,3 @@ $tooltip-arrow-width: 6 !default;
 @import "mixins/grid";
 @import "mixins/responsive";
 @import "mixins/components";
-@import "compass/css3/box-sizing";
-@import "compass/css3/images";
-@import "compass/css3/transition";
-@import "compass/css3/transform";
-@import "compass/css3/filter";
-@import "animation";

data/scss/toolkit/components/accordion.scss

@@ -23,7 +23,7 @@
 .#{$vendor-prefix}accordion-section {
     overflow: hidden;
     position: relative;
-    @include transition(all $accordion-transition ease-in-out);
+    transition: all $accordion-transition ease-in-out;
 
     &.hide { max-height: 0; } // don't include on base styles
 }

data/scss/toolkit/components/blackout.scss

@@ -16,13 +16,13 @@
     opacity: 0;
     visibility: hidden;
     background: black($blackout-opacity);
-    @include transition(all $blackout-transition);
+    transition: all $blackout-transition;
 
     .#{$vendor-prefix}loader {
         opacity: 1;
         color: #fff;
+        transition: all $blackout-transition;
         @include position-center;
-        @include transition(all $blackout-transition);
 
         > span,
         .spinner > span { background: #fff !important; }

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

@@ -20,7 +20,7 @@
         &:first-child { margin-left: 0; }
 
         &:hover,
-        &.#{$state-is-prefix}active { z-index: 1; }
+        &.is-active { z-index: 1; }
     }
 
     > li {
@@ -105,6 +105,8 @@
         margin: 0 !important;
     }
 
+    > li .#{$vendor-prefix}button { display: block; }
+
     > li:not(:first-child) .#{$vendor-prefix}button,
     > .#{$vendor-prefix}button:not(:first-child) { border-left: 0; }
 }

data/scss/toolkit/components/button.scss

@@ -30,10 +30,4 @@
     @include is-disabled {
         cursor: not-allowed;
     }
-}
-
-// Reset browser styles
-button::-moz-focus-inner {
-    padding: 0;
-    border: 0;
 }

data/scss/toolkit/components/carousel.scss

@@ -25,7 +25,7 @@
         position: absolute;
         top: 0;
         left: 0;
-        @include transition(left $carousel-transition, top $carousel-transition);
+        transition: left $carousel-transition, top $carousel-transition;
 
         > li {
             width: 100%;
@@ -65,7 +65,7 @@
     height: auto;
     z-index: 5;
     top: 50%;
-    @include transform(translateY(-50%)); // move up 50% of their height
+    transform: translateY(-50%); // move up 50% of their height
 
     &:focus { outline: none; }
 }
@@ -78,18 +78,18 @@
     top: $padding;
     left: 50%;
     z-index: 5;
-    @include transform(translateX(-50%)); // move left 50% of their width
+    transform: translateX(-50%); // move left 50% of their width
 }
 
 //-------------------- Animations --------------------//
 
 .#{$vendor-prefix}carousel.slide {
     .#{$vendor-prefix}carousel-items ul {
-        @include clear-fix;
-
         > li {
             float: left;
         }
+
+        @include clear-fix;
     }
 }
 
@@ -103,7 +103,7 @@
             left: 0;
             opacity: 0;
             z-index: 1;
-            @include transition(opacity $carousel-transition);
+            transition: opacity $carousel-transition;
 
             &.show { z-index: 5; }
         }

data/scss/toolkit/components/drop.scss

@@ -6,10 +6,7 @@
 
 @import "../common";
 
-.#{$vendor-prefix}drop--down,
-.#{$vendor-prefix}drop--up,
-.#{$vendor-prefix}drop--left,
-.#{$vendor-prefix}drop--right {
+.#{$vendor-prefix}drop {
     @include reset-list;
     display: none;
     text-align: left;
@@ -21,16 +18,15 @@
     z-index: $drop-zindex;
     opacity: 0;
     visibility: hidden;
-    @include transition(opacity $drop-transition);
+    transition: opacity $drop-transition;
 
     // Nested
-    .#{$vendor-prefix}drop--down,
-    .#{$vendor-prefix}drop--up {
+    .#{$vendor-prefix}drop {
         display: block;
         top: 0;
         left: 90%;
         z-index: $drop-zindex + 1;
-        @include transition(left $drop-transition, opacity $drop-transition);
+        transition: left $drop-transition, opacity $drop-transition;
     }
 
     // Apply to self
@@ -52,14 +48,13 @@
             }
         }
 
-        &.#{$state-has-prefix}children {
+        &.has-children {
             > a .caret-right { display: inline-block; }
         }
 
         // Show nested dropdown
         &:hover {
-            .#{$vendor-prefix}drop--down,
-            .#{$vendor-prefix}drop--up {
+            .#{$vendor-prefix}drop {
                 visibility: visible;
                 opacity: 1;
                 left: 100%;
@@ -84,31 +79,31 @@
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}drop--up {
+.#{$vendor-prefix}drop.#{$vendor-prefix}drop--up {
     top: auto;
     bottom: 100%;
 }
 
-.#{$vendor-prefix}drop--right {
+.#{$vendor-prefix}drop.#{$vendor-prefix}drop--right {
     top: auto;
     left: 100%;
 }
 
-.#{$vendor-prefix}drop--left {
+.#{$vendor-prefix}drop.#{$vendor-prefix}drop--left {
     top: auto;
     left: auto;
     right: 100%;
 }
 
-.#{$vendor-prefix}drop--right,
-.#{$vendor-prefix}drop--left {
+.#{$vendor-prefix}drop.#{$vendor-prefix}drop--right,
+.#{$vendor-prefix}drop.#{$vendor-prefix}drop--left {
     &.reverse-align {
         bottom: 0;
     }
 }
 
-.#{$vendor-prefix}drop--down,
-.#{$vendor-prefix}drop--up {
+.#{$vendor-prefix}drop.#{$vendor-prefix}drop--down,
+.#{$vendor-prefix}drop.#{$vendor-prefix}drop--up {
     &.reverse-align {
         left: auto;
         right: 0;

data/scss/toolkit/components/flyout.scss

@@ -13,8 +13,8 @@
     z-index: $flyout-zindex;
     opacity: 0;
     visibility: hidden;
-    @include box-sizing(content-box); // required by MooTools for multi columns
-    @include transition(opacity $flyout-transition);
+    box-sizing: content-box; // required by MooTools for multi columns
+    transition: opacity $flyout-transition;
 
     ul {
         @include reset-list;
@@ -36,10 +36,10 @@
 
         // Hover states
         > a:hover,
-        &.#{$state-is-prefix}open > a {}
+        &.is-open > a {}
 
         // Display caret arrow
-        &.#{$state-has-prefix}children > a .caret-right {
+        &.has-children > a .caret-right {
             float: right;
             display: inline-block; // reveal
             margin-top: 3px;
@@ -48,7 +48,7 @@
         // Nested flyouts
         > .#{$vendor-prefix}flyout {
             left: 90%;
-            @include transition(left $flyout-transition, right $flyout-transition, opacity $flyout-transition);
+            transition: left $flyout-transition, right $flyout-transition, opacity $flyout-transition;
 
             // Reverse menu to left side in case it goes outside the viewport
             // Will be set automatically from the Javascript layer
@@ -58,7 +58,7 @@
             }
         }
 
-        &.#{$state-is-prefix}open > .#{$vendor-prefix}flyout {
+        &.is-open > .#{$vendor-prefix}flyout {
             opacity: 1;
             visibility: visible;
             left: 100%;

data/scss/toolkit/components/grid.scss

@@ -6,14 +6,17 @@
 
 @import "../common";
 
-.#{$vendor-prefix}grid,
-.#{$vendor-prefix}row {
-    @include grid-row;
+%row { @include grid-row; }
+%col { @include grid-column; }
+
+// Row wrapper
+.#{$vendor-prefix}grid {
+    @extend %row;
 }
 
 // These should be the same for all sizes
 .col[class*="span-"] {
-    @include grid-column;
+    @extend %col;
 }
 
 @for $i from 1 through 12 {

data/scss/toolkit/components/icon.scss

@@ -21,8 +21,8 @@
 
 //-------------------- Modifiers --------------------//
 
-.icon--90deg { @include transform(rotate(90deg)); }
-.icon--180deg { @include transform(rotate(180deg)); }
-.icon--270deg { @include transform(rotate(270deg)); }
-.icon--flip { @include transform(rotateY(180deg)); }
-.icon--flip-vert { @include transform(rotateX(180deg)); }
+.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); }

data/scss/toolkit/components/input.scss

@@ -59,7 +59,7 @@
         line-height: 1rem;
         z-index: 3;
 
-        &.#{$state-is-prefix}active {
+        &.is-active {
             border-color: $info;
         }
     }
@@ -112,7 +112,7 @@
         max-height: 300px;
         overflow: auto;
 
-        li.#{$state-is-prefix}disabled {
+        li.is-disabled {
             > a,
             > a:hover {
                 background: none;
@@ -122,7 +122,7 @@
         }
 
         &.hide-selected {
-            li.#{$state-is-prefix}active { display: none !important; }
+            li.is-active { display: none !important; }
         }
 
         &.hide-first {

data/scss/toolkit/components/lazy-load.scss

@@ -8,5 +8,5 @@
 
 .#{$vendor-prefix}lazy-load {
     background-image: none !important;
-    @include transition(background-image $lazyLoad-transition);
+    transition: background-image $lazyLoad-transition;
 }

data/scss/toolkit/components/loader.scss

@@ -27,12 +27,12 @@
 //-------------------- Bar Wave --------------------//
 
 @if $loader-type == "bar-wave" or $loader-type == "all" {
-    @include keyframes(bar-wave) {
+    @keyframes bar-wave {
         0%, 50%, 100% {
-            @include transform(scaleY(1.0));
+            transform: scaleY(1.0);
         }
         25% {
-            @include transform(scaleY(2.0));
+            transform: scaleY(2.0);
         }
     }
 
@@ -41,10 +41,10 @@
             background: $loader-color;
             height: $loader-bar-height;
             width: $loader-bar-width;
-            @include animation(bar-wave 1.2s infinite ease-in-out);
+            animation: bar-wave 1.2s infinite ease-in-out;
 
             @for $i from 2 through $loader-wave-count {
-                &:nth-child(#{$i}) { @include animation-delay(-#{(1.3 - ($i * 0.1))}s); }
+                &:nth-child(#{$i}) { animation-delay: -#{(1.3 - ($i * 0.1))}s; }
             }
         }
 
@@ -57,12 +57,12 @@
 //-------------------- Bubble Wave --------------------//
 
 @if $loader-type == "bubble-wave" or $loader-type == "all" {
-    @include keyframes(bubble-wave) {
+    @keyframes bubble-wave {
         0%, 80%, 100% {
-            @include transform(scale(0.0));
+            transform: scale(0.0);
         }
         30% {
-            @include transform(scale(1.0));
+            transform: scale(1.0);
         }
     }
 
@@ -72,11 +72,11 @@
             width: $loader-bubble-size;
             height: $loader-bubble-size;
             border-radius: 100%;
-            @include animation(bubble-wave 1.5s infinite ease-in-out);
-            @include animation-fill-mode(both);
+            animation: bubble-wave 1.5s infinite ease-in-out;
+            animation-fill-mode: both;
 
             @for $i from 2 through $loader-wave-count {
-                &:nth-child(#{$i}) { @include animation-delay(-#{(1.6 - ($i * 0.1))}s); }
+                &:nth-child(#{$i}) { animation-delay: -#{(1.6 - ($i * 0.1))}s; }
             }
         }
     }
@@ -85,12 +85,12 @@
 //-------------------- Bubble Spinner --------------------//
 
 @if $loader-type == "bubble-spinner" or $loader-type == "all" {
-    @include keyframes(bubble-spinner) {
+    @keyframes bubble-spinner {
         0%, 80%, 100% {
-            @include transform(scale(0.0));
+            transform: scale(0.0);
         }
         30% {
-            @include transform(scale(1.3));
+            transform: scale(1.3);
         }
     }
 
@@ -107,55 +107,55 @@
                 height: 14px;
                 position: absolute;
                 border-radius: 100%;
-                @include animation(bubble-spinner 1.6s infinite ease-in-out);
-                @include animation-fill-mode(both);
+                animation: bubble-spinner 1.6s infinite ease-in-out;
+                animation-fill-mode: both;
 
                 &:nth-child(1) {
                     top: 0;
                     left: 43px;
-                    @include animation-delay(-1.4s);
+                    animation-delay: -1.4s;
                 }
 
                 &:nth-child(2) {
                     top: 12px;
                     right: 12px;
-                    @include animation-delay(-1.2s);
+                    animation-delay: -1.2s;
                 }
 
                 &:nth-child(3) {
                     top: 43px;
                     right: 0;
-                    @include animation-delay(-1.0s);
+                    animation-delay: -1.0s;
                 }
 
                 &:nth-child(4) {
                     bottom: 12px;
                     right: 12px;
-                    @include animation-delay(-0.8s);
+                    animation-delay: -0.8s;
                 }
 
                 &:nth-child(5) {
                     bottom: 0;
                     left: 43px;
-                    @include animation-delay(-0.6s);
+                    animation-delay: -0.6s;
                 }
 
                 &:nth-child(6) {
                     bottom: 12px;
                     left: 12px;
-                    @include animation-delay(-0.4s);
+                    animation-delay: -0.4s;
                 }
 
                 &:nth-child(7) {
                     top: 43px;
                     left: 0;
-                    @include animation-delay(-0.2s);
+                    animation-delay: -0.2s;
                 }
 
                 &:nth-child(8) {
                     top: 12px;
                     left: 12px;
-                    @include animation-delay(-0.0s);
+                    animation-delay: -0.0s;
                 }
             }
         }