titon-toolkit 1.2.2 → 1.3.0

data/scss/toolkit/components/mask.scss

@@ -16,7 +16,7 @@
     opacity: 0;
     visibility: hidden;
     background: black($mask-opacity);
-    @include transition(all $mask-transition);
+    transition: all $mask-transition;
     color: #fff;
 }
 
@@ -24,8 +24,8 @@
     text-align: center;
     max-width: 80%;
     opacity: 1;
+    transition: all $mask-transition;
     @include position-center;
-    @include transition(all $mask-transition);
 
     &:empty { display: none; }
 }

data/scss/toolkit/components/matrix.scss

@@ -9,16 +9,17 @@
 .#{$vendor-prefix}matrix {
     @include reset-list;
     position: relative;
-    @include clear-fix;
 
     > li {
         float: left;
         margin: 0;
         padding: 0;
-        @include transition(top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition);
+        transition: top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition;
     }
 
-    &.#{$state-has-prefix}no-columns > li {
+    &.has-no-columns > li {
         position: relative !important;
     }
+
+    @include clear-fix;
 }

data/scss/toolkit/components/modal.scss

@@ -18,11 +18,11 @@
     visibility: hidden;
     pointer-events: none; // fall through to blackout
 
-    &.#{$state-is-prefix}loading {
+    &.is-loading {
         .#{$vendor-prefix}modal-close { display: none; }
     }
 
-    &.#{$state-is-prefix}draggable {
+    &.is-draggable {
         .#{$vendor-prefix}modal-inner { cursor: default; }
         .#{$vendor-prefix}modal-head { cursor: move; }
     }
@@ -49,7 +49,7 @@
     height: auto;
     margin: $margin;
     pointer-events: auto; // allow within modal
-    @include transform(translateX(-50%));
+    transform: translateX(-50%);
 }
 
 .#{$vendor-prefix}modal-inner {
@@ -65,7 +65,7 @@
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}modal.#{$state-is-prefix}fullscreen .#{$vendor-prefix}modal-outer {
+.#{$vendor-prefix}modal.is-fullscreen .#{$vendor-prefix}modal-outer {
     top: 0;
     left: 0;
     margin: 0;
@@ -73,7 +73,7 @@
     max-width: 100%;
     max-height: auto;
     border-radius: 0;
-    @include transform(translateX(0) translateY(0));
+    transform: translate(0, 0);
 }
 
 //-------------------- Animations --------------------//
@@ -82,7 +82,7 @@
     #{join-classes($modal-animation)} {
         .#{$vendor-prefix}modal-handle {
             opacity: 0;
-            @include transition(all $modal-transition);
+            transition: all $modal-transition;
         }
 
         &.show .#{$vendor-prefix}modal-handle {
@@ -93,11 +93,11 @@
     @if index($modal-animation, "from-above") {
         &.from-above {
             .#{$vendor-prefix}modal-handle {
-                @include transform(scale(1.3));
+                transform: scale(1.3);
             }
 
             &.show .#{$vendor-prefix}modal-handle {
-                @include transform(scale(1));
+                transform: scale(1);
             }
         }
     }
@@ -105,11 +105,11 @@
     @if index($modal-animation, "from-below") {
         &.from-below {
             .#{$vendor-prefix}modal-handle {
-                @include transform(scale(0.7));
+                transform: scale(0.7);
             }
 
             &.show .#{$vendor-prefix}modal-handle {
-                @include transform(scale(1));
+                transform: scale(1);
             }
         }
     }
@@ -117,11 +117,11 @@
     @if index($modal-animation, "slide-in-top") {
         &.slide-in-top {
             .#{$vendor-prefix}modal-handle {
-                @include transform(translateY(-50%));
+                transform: translateY(-50%);
             }
 
             &.show .#{$vendor-prefix}modal-handle {
-                @include transform(translateY(0));
+                transform: translateY(0);
             }
         }
     }
@@ -129,11 +129,11 @@
     @if index($modal-animation, "slide-in-bottom") {
         &.slide-in-bottom {
             .#{$vendor-prefix}modal-handle {
-                @include transform(translateY(50%));
+                transform: translateY(50%);
             }
 
             &.show .#{$vendor-prefix}modal-handle {
-                @include transform(translateY(0));
+                transform: translateY(0);
             }
         }
     }
@@ -141,12 +141,12 @@
     @if index($modal-animation, "slide-in-left") {
         &.slide-in-left {
             .#{$vendor-prefix}modal-handle {
-                @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
-                @include transform(translateX(-50%));
+                transition: all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9);
+                transform: translateX(-50%);
             }
 
             &.show .#{$vendor-prefix}modal-handle {
-                @include transform(translateX(0));
+                transform: translateX(0);
             }
         }
     }
@@ -154,12 +154,12 @@
     @if index($modal-animation, "slide-in-right") {
         &.slide-in-right {
             .#{$vendor-prefix}modal-handle {
-                @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
-                @include transform(translateX(50%));
+                transition: all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9);
+                transform: translateX(50%);
             }
 
             &.show .#{$vendor-prefix}modal-handle {
-                @include transform(translateX(0));
+                transform: translateX(0);
             }
         }
     }
@@ -169,7 +169,7 @@
             .#{$vendor-prefix}modal-outer {
                 top: -100%;
                 opacity: 0;
-                @include transition(all $modal-transition);
+                transition: all $modal-transition;
             }
 
             &.show .#{$vendor-prefix}modal-outer {
@@ -185,7 +185,7 @@
                 top: auto;
                 bottom: -100%;
                 opacity: 0;
-                @include transition(all $modal-transition);
+                transition: all $modal-transition;
             }
 
             &.show .#{$vendor-prefix}modal-outer {
@@ -201,8 +201,8 @@
                 left: -100%;
                 opacity: 0;
                 top: 50%;
-                @include transition(all $modal-transition);
-                @include transform(translate(0, -50%));
+                transition: all $modal-transition;
+                transform: translate(0, -50%);
             }
 
             &.show .#{$vendor-prefix}modal-outer {
@@ -219,8 +219,8 @@
                 right: -100%;
                 top: 50%;
                 opacity: 0;
-                @include transition(all $modal-transition);
-                @include transform(translate(0, -50%));
+                transition: all $modal-transition;
+                transform: translate(0, -50%);
             }
 
             &.show .#{$vendor-prefix}modal-outer {

data/scss/toolkit/components/pagination.scss

@@ -23,7 +23,7 @@
             display: block;
         }
 
-        &.#{$state-is-prefix}active {
+        &.is-active {
             z-index: 1;
         }
     }
@@ -50,7 +50,7 @@
     }
 
     &.#{$shape-round-class} {
-        ul {
+        ul, ol {
             border-radius: $round;
         }
 

data/scss/toolkit/components/pin.scss

@@ -7,9 +7,9 @@
 @import "../common";
 
 .#{$vendor-prefix}pin.sticky {
-    @include transition(top 1s ease-in-out, right .5s ease-in-out, left .5s ease-in-out);
+    transition: top .6s ease-in-out, right $pin-transition ease-in-out, left $pin-transition ease-in-out;
 }
 
 .#{$vendor-prefix}pin.slide {
-    @include transition(top .5s linear, right .5s linear, left .5s linear);
+    transition: top $pin-transition linear, right $pin-transition linear, left $pin-transition linear;
 }

data/scss/toolkit/components/progress.scss

@@ -37,7 +37,7 @@
     text-align: center;
     font-size: $medium-size;
     float: left;
-    @include transition(width $progress-transition, background $progress-transition);
+    transition: width $progress-transition, background $progress-transition;
 }
 
 .#{$vendor-prefix}progress.#{$shape-round-class} {

data/scss/toolkit/components/showcase.scss

@@ -19,11 +19,11 @@
     visibility: hidden;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
-    @include transform(translateX(-50%) translateY(-50%));
-    @include transition(opacity $showcase-transition, visibility $showcase-transition);
+    transform: translate(-50%, -50%);
+    transition: opacity $showcase-transition, visibility $showcase-transition;
 
-    &.#{$state-is-prefix}loading,
-    &.#{$state-is-prefix}single {
+    &.is-loading,
+    &.is-single {
         .#{$vendor-prefix}showcase-prev,
         .#{$vendor-prefix}showcase-next,
         .#{$vendor-prefix}showcase-tabs {
@@ -31,7 +31,7 @@
         }
     }
 
-    &.#{$state-is-prefix}loading {
+    &.is-loading {
         .#{$vendor-prefix}showcase-close {
             display: none !important;
         }
@@ -60,14 +60,14 @@
     max-width: 1024px;
     position: relative;
     overflow: hidden;
-    @include transition(width $showcase-transition, height $showcase-transition);
+    transition: width $showcase-transition, height $showcase-transition;
 
     > li {
         position: absolute;
         top: 0;
         left: 0;
         opacity: 0;
-        @include transition(opacity $showcase-transition);
+        transition: opacity $showcase-transition;
 
         > img {
             max-width: 100%;
@@ -110,7 +110,7 @@
     top: 50%;
     background: none;
     border: 0;
-    @include transform(translateY(-50%)); // move up 50% of their height
+    transform: translateY(-50%); // move up 50% of their height
 
     &:focus { outline: none; }
 }
@@ -122,5 +122,5 @@
     position: absolute;
     top: ($padding * 2);
     left: 50%;
-    @include transform(translateX(-50%)); // move left 50% of their width
+    transform: translateX(-50%); // move left 50% of their width
 }

data/scss/toolkit/components/step.scss

@@ -0,0 +1,65 @@
+/**
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+.#{$vendor-prefix}steps {
+    margin: $margin 0;
+    font-size: $medium-size;
+
+    ol {
+        @include reset-list;
+        display: inline-block;
+        overflow: hidden;
+        @include clear-fix;
+    }
+
+    // Use em's to scale against the size defined on .steps
+    .#{$vendor-prefix}step {
+        padding: 0 2em 0 3.5em;
+        position: relative;
+        display: block;
+        line-height: 3em;
+        height: 3em;
+
+        // Golden ratio? Seems to work for all font sizes in *most* browsers
+        &:after {
+            height: 2.165em;
+            width: 2.165em;
+            top: 0.425em;
+            right: -1.1em;
+            position: absolute;
+            z-index: 2;
+            content: "";
+            transform: rotate(-45deg);
+        }
+    }
+
+    li {
+        @include reset-inline-block;
+        float: left;
+
+        &:first-child {
+            .#{$vendor-prefix}step {
+                padding-left: 2em;
+            }
+        }
+
+        &:last-child {
+            .#{$vendor-prefix}step {
+                &:after { display: none; }
+            }
+        }
+    }
+
+    @include is-small {
+        font-size: $small-size;
+    }
+
+    @include is-large {
+        font-size: $large-size;
+    }
+}

data/scss/toolkit/components/switch.scss

@@ -0,0 +1,123 @@
+/**
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+.#{$vendor-prefix}switch {
+    @include reset-inline-block;
+    font-size: 0;
+    width: 100px;
+    cursor: pointer;
+
+    &.is-disabled {
+        opacity: $disabled-opacity;
+    }
+
+    &.#{$shape-round-class} {
+        .#{$vendor-prefix}switch-toggle {
+            border-radius: $round - 0.02;
+        }
+    }
+
+    input {
+        display: none;
+
+        &:checked + .#{$vendor-prefix}switch-bar {
+            .#{$vendor-prefix}switch-toggle {
+                left: 50%;
+            }
+
+            &:before { opacity: 1; }
+            &:after { opacity: 0; }
+        }
+    }
+
+    @include is-small() {
+        width: 70px;
+
+        .#{$vendor-prefix}switch-bar {
+            font-size: $small-size;
+
+            &:before,
+            &:after {
+                padding: $small-padding;
+            }
+        }
+
+        .#{$vendor-prefix}switch-toggle {
+            padding: $small-padding;
+        }
+    }
+
+    @include is-large() {
+        width: 130px;
+
+        .#{$vendor-prefix}switch-bar {
+            font-size: $large-size;
+
+            &:before,
+            &:after {
+                padding: $large-padding;
+            }
+        }
+
+        .#{$vendor-prefix}switch-toggle {
+            padding: $large-padding;
+        }
+    }
+}
+
+.#{$vendor-prefix}switch-bar {
+    display: block;
+    position: relative;
+    font-size: $medium-size;
+    transition: background $switch-transition;
+
+    &:before,
+    &:after {
+        position: absolute;
+        padding: $medium-padding;
+        top: 0;
+        opacity: 1;
+        z-index: 1;
+        transition: opacity $switch-transition;
+    }
+
+    &:before {
+        left: 0;
+        opacity: 0;
+        content: attr(data-switch-on);
+    }
+
+    &:after {
+        right: 0;
+        content: attr(data-switch-off);
+    }
+}
+
+.#{$vendor-prefix}switch-toggle {
+    @include reset-inline-block;
+    padding: $medium-padding;
+    width: 50%;
+    z-index: 2;
+    left: 0;
+    user-select: none;
+    transition: left $switch-transition;
+
+    &:before { content: "\00A0"; } // NBSP
+}
+
+//-------------------- Modifiers --------------------//
+
+.#{$vendor-prefix}switch--stacked {
+    .#{$vendor-prefix}switch-bar {
+        &:before,
+        &:after {
+            z-index: 3;
+            opacity: 1 !important;
+        }
+    }
+}