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

data/scss/toolkit/{layout → components}/responsive.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
  */
@@ -11,52 +11,54 @@
     width: 100%;
     height: auto;
     max-width: 100%;
-    max-height: auto;
 }
 
 .show-retina,
 .show-print { display: none !important; }
 
-// Desktop states
-@include in-desktop {
-    .show-tablet,
-    .show-mobile,
-    .hide-desktop { display: none !important; }
+// Extra small states
+@include in-xsmall  {
+    .show-xlarge,
+    .show-large,
+    .show-medium,
+    .show-small,
+    .hide-xsmall { display: none !important; }
 }
 
-// Tablet states
-@include in-tablet {
-    .show-desktop,
-    .show-mobile,
-    .hide-tablet { display: none !important; }
+// Small states
+@include in-small  {
+    .show-xlarge,
+    .show-large,
+    .show-medium,
+    .show-xsmall,
+    .hide-small { display: none !important; }
 }
 
-// Mobile states
-@include in-mobile  {
-    .show-desktop,
-    .show-tablet,
-    .hide-mobile { display: none !important; }
+// Medium states
+@include in-medium {
+    .show-xlarge,
+    .show-large,
+    .show-small,
+    .show-xsmall,
+    .hide-medium { display: none !important; }
 }
 
 // Large states
 @include in-large {
+    .show-xlarge,
     .show-medium,
     .show-small,
+    .show-xsmall,
     .hide-large { display: none !important; }
 }
 
-// Medium states
-@include in-medium {
-    .show-large,
-    .show-small,
-    .hide-medium { display: none !important; }
-}
-
-// Small states
-@include in-small  {
+// Extra large states
+@include in-xlarge {
     .show-large,
     .show-medium,
-    .hide-small { display: none !important; }
+    .show-small,
+    .show-xsmall,
+    .hide-xlarge { display: none !important; }
 }
 
 // Orientation states
@@ -73,18 +75,10 @@
 // Type states
 @include if-retina {
     .hide-retina { display: none !important; }
-    .show-retina { display: block !important; }
-    table.show-retina { display: table !important; }
-    tr.show-retina { display: table-row !important; }
-    td.show-retina,
-    th.show-retina { display: table-cell !important; }
+    @include responsive-display-block(".show-retina");
 }
 
 @media print {
     .hide-print { display: none !important; }
-    .show-print { display: block !important; }
-    table.show-print { display: table !important; }
-    tr.show-print { display: table-row !important; }
-    td.show-print,
-    th.show-print { display: table-cell !important; }
+    @include responsive-display-block(".show-print");
 }

data/scss/toolkit/components/showcase.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}showcase {
+#{$showcase-class} {
     position: fixed;
     top: 50%;
     left: 50%;
@@ -23,21 +23,21 @@
 
     &.is-loading,
     &.is-single {
-        .#{$vendor-prefix}showcase-prev,
-        .#{$vendor-prefix}showcase-next,
-        .#{$vendor-prefix}showcase-tabs {
+        #{$showcase-class-prev},
+        #{$showcase-class-next},
+        #{$showcase-class-tabs} {
             display: none !important;
         }
     }
 
     &.is-loading {
-        .#{$vendor-prefix}showcase-close {
+        #{$showcase-class-close} {
             display: none !important;
         }
     }
 }
 
-.#{$vendor-prefix}showcase-close {
+#{$showcase-class-close} {
     float: right;
     line-height: 1rem;
     background: none;
@@ -46,17 +46,17 @@
     margin-left: 1rem;
 }
 
-.#{$vendor-prefix}showcase-caption {
+#{$showcase-class-caption} {
     opacity: 0;
     transition: opacity $showcase-transition, visibility $showcase-transition;
 }
 
-.#{$vendor-prefix}showcase-inner {
+#{$showcase-class-inner} {
     position: relative;
     margin-bottom: $padding;
 }
 
-.#{$vendor-prefix}showcase-items {
+#{$showcase-class-items} {
     @include reset-list;
     width: 100px;
     height: 100px;
@@ -78,30 +78,4 @@
             display: block;
         }
     }
-}
-
-.#{$vendor-prefix}showcase-prev,
-.#{$vendor-prefix}showcase-next {
-    display: block;
-    position: absolute;
-    z-index: 5;
-    top: 50%;
-    background: none;
-    padding: 0;
-    border: 0;
-    transform: translateY(-50%); // move up 50% of their height
-
-    &:focus { outline: none; }
-}
-
-.#{$vendor-prefix}showcase-prev { left: $padding; }
-.#{$vendor-prefix}showcase-next { right: $padding; }
-
-.#{$vendor-prefix}showcase-tabs {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    padding: $padding;
-    text-align: center;
 }

data/scss/toolkit/components/step.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}steps {
+#{$step-class-wrapper} {
     margin: $margin 0;
     font-size: $medium-size;
 
@@ -18,7 +18,7 @@
     }
 
     // Use em's to scale against the size defined on .steps
-    .#{$vendor-prefix}step {
+    #{$step-class} {
         padding: 0 2em 0 3.5em;
         position: relative;
         display: block;
@@ -26,7 +26,7 @@
         height: 3em;
 
         // Golden ratio? Seems to work for all font sizes in *most* browsers
-        &:after {
+        &::after {
             height: 2.165em;
             width: 2.165em;
             top: 0.425em;
@@ -43,14 +43,14 @@
         float: left;
 
         &:first-child {
-            .#{$vendor-prefix}step {
+            #{$step-class} {
                 padding-left: 2em;
             }
         }
 
         &:last-child {
-            .#{$vendor-prefix}step {
-                &:after { display: none; }
+            #{$step-class} {
+                &::after { display: none; }
             }
         }
     }

data/scss/toolkit/components/switch.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}switch {
+#{$switch-class} {
     @include reset-inline-block;
     font-size: 0;
     width: 100px;
@@ -16,38 +16,32 @@
         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 {
+        &:checked + #{$switch-class-bar} {
+            #{$switch-class-toggle} {
                 left: 50%;
             }
 
-            &:before { opacity: 1; }
-            &:after { opacity: 0; }
+            &::before { opacity: 1; }
+            &::after { opacity: 0; }
         }
     }
 
     @include is-small() {
         width: 70px;
 
-        .#{$vendor-prefix}switch-bar {
+        #{$switch-class-bar} {
             font-size: $small-size;
 
-            &:before,
-            &:after {
+            &::before,
+            &::after {
                 padding: $small-padding;
             }
         }
 
-        .#{$vendor-prefix}switch-toggle {
+        #{$switch-class-toggle} {
             padding: $small-padding;
         }
     }
@@ -55,29 +49,29 @@
     @include is-large() {
         width: 130px;
 
-        .#{$vendor-prefix}switch-bar {
+        #{$switch-class-bar} {
             font-size: $large-size;
 
-            &:before,
-            &:after {
+            &::before,
+            &::after {
                 padding: $large-padding;
             }
         }
 
-        .#{$vendor-prefix}switch-toggle {
+        #{$switch-class-toggle} {
             padding: $large-padding;
         }
     }
 }
 
-.#{$vendor-prefix}switch-bar {
+#{$switch-class-bar} {
     display: block;
     position: relative;
     font-size: $medium-size;
     transition: background $switch-transition;
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
         position: absolute;
         padding: $medium-padding;
         top: 0;
@@ -86,19 +80,37 @@
         transition: opacity $switch-transition;
     }
 
-    &:before {
+    &::before {
         left: 0;
         opacity: 0;
         content: attr(data-switch-on);
     }
 
-    &:after {
+    &::after {
         right: 0;
         content: attr(data-switch-off);
     }
+
+    //----- Effects -----//
+
+    &#{$shape-round-class} {
+        #{$switch-class-toggle} {
+            border-radius: $round - 0.02;
+        }
+    }
+
+    @if index($switch-effects, "pill") {
+        &#{$shape-pill-class} {
+            border-radius: $pill;
+
+            #{$switch-class-toggle} {
+                border-radius: $pill;
+            }
+        }
+    }
 }
 
-.#{$vendor-prefix}switch-toggle {
+#{$switch-class-toggle} {
     @include reset-inline-block;
     padding: $medium-padding;
     width: 50%;
@@ -107,17 +119,19 @@
     user-select: none;
     transition: left $switch-transition;
 
-    &:before { content: "\00A0"; } // NBSP
+    &::before { content: "\00A0"; } // NBSP
 }
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}switch--stacked {
-    .#{$vendor-prefix}switch-bar {
-        &:before,
-        &:after {
-            z-index: 3;
-            opacity: 1 !important;
+@if index($switch-modifiers, "stacked") {
+    #{$switch-class-modifier-stacked} {
+        #{$switch-class-bar} {
+            &::before,
+            &::after {
+                z-index: 3;
+                opacity: 1 !important;
+            }
         }
     }
 }

data/scss/toolkit/components/tab.scss

@@ -0,0 +1,42 @@
+/**
+ * @copyright   2010-2015, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+#{$tab-class} {
+    text-align: left;
+}
+
+#{$tab-class-nav} {
+    display: block;
+    margin-bottom: $margin;
+
+    ul, ol, li {
+        @include reset-list;
+        display: inline-block;
+    }
+
+    @include clear-fix;
+}
+
+// Add display none on sections since visibility property takes up DOM space
+#{$tab-class-section}.hide {
+    display: none;
+}
+
+//-------------------- Modifiers --------------------//
+
+@if index($tab-modifiers, "horizontal") {
+    #{$tab-class-modifier-horizontal} {
+        #{$tab-class-nav} {
+            ul, ol, li, a, button {
+                display: block;
+                float: none;
+                text-align: left;
+            }
+        }
+    }
+}

data/scss/toolkit/components/table.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}table {
+#{$table-class} {
     width: 100%;
     margin-top: $margin;
     background: $gray-lightest;
@@ -41,10 +41,10 @@
     }
 
     // Divider
-    tbody tr.#{$vendor-prefix}table-divider { background: $gray-dark !important; }
+    tbody tr#{$table-class-divider} { background: $gray-dark !important; }
 }
 
-.#{$vendor-prefix}table-responsive {
+#{$table-class-responsive} {
     width: 100%;
     max-width: 100%;
     overflow-x: auto;
@@ -52,17 +52,17 @@
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}table.has-hover {
-    tbody tr:not(.#{$vendor-prefix}table-divider):hover { background: #fff; }
+#{$table-class}.has-hover {
+    tbody tr:not(#{$table-class-divider}):hover { background: #fff; }
 }
 
-.#{$vendor-prefix}table.is-striped tbody tr {
+#{$table-class}.is-striped tbody tr {
     background: $gray;
 
     &:nth-child(odd) { background: $gray-lightest; }
 }
 
-.#{$vendor-prefix}table.is-sortable {
+#{$table-class}.is-sortable {
     thead th {
         padding: 0;
 
@@ -82,30 +82,32 @@
 
 //-------------------- Sizes --------------------//
 
-.#{$vendor-prefix}table.#{$size-small-class} {
-    thead th,
-    tbody td { padding: $small-padding; }
+#{$table-class} {
+    @include is-small {
+        thead th,
+        tbody td { padding: $small-padding; }
 
-    &.is-sortable {
-        thead th {
-            padding: 0;
+        &.is-sortable {
+            thead th {
+                padding: 0;
 
-            > a,
-            > span { padding: $small-padding; }
+                > a,
+                > span { padding: $small-padding; }
+            }
         }
     }
-}
 
-.#{$vendor-prefix}table.#{$size-large-class} {
-    thead th,
-    tbody td { padding: $large-padding; }
+    @include is-large {
+        thead th,
+        tbody td { padding: $large-padding; }
 
-    &.is-sortable {
-        thead th {
-            padding: 0;
+        &.is-sortable {
+            thead th {
+                padding: 0;
 
-            > a,
-            > span { padding: $large-padding; }
+                > a,
+                > span { padding: $large-padding; }
+            }
         }
     }
 }

data/scss/toolkit/components/toast.scss

@@ -1,17 +1,21 @@
 /**
- * @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}toasts {
+#{$toast-class-wrapper} {
     position: fixed;
-    margin: $margin;
+    padding: $margin;
     width: 20%;
     z-index: $toast-zindex;
 
+    @include if-max(nth($breakpoint-range-small, 1)) {
+        width: 100%;
+    }
+
     @if index($toast-position, "top-left") {
         &.top-left {
             top: 0;
@@ -83,7 +87,7 @@
     }
 }
 
-.#{$vendor-prefix}toast {
+#{$toast-class} {
     margin-top: 1rem;
     transition: opacity $toast-transition, visibility $toast-transition, transform $toast-transition;
     opacity: 0;
@@ -95,8 +99,8 @@
 
 //-------------------- Animations --------------------//
 
-.#{$vendor-prefix}toast {
-    @if index($toast-animation, "slide-up") {
+#{$toast-class} {
+    @if index($toast-animations, "slide-up") {
         &.slide-up {
             transform: translateY(50%);
 
@@ -104,7 +108,7 @@
         }
     }
 
-    @if index($toast-animation, "slide-down") {
+    @if index($toast-animations, "slide-down") {
         &.slide-down {
             transform: translateY(-50%);
 
@@ -112,7 +116,7 @@
         }
     }
 
-    @if index($toast-animation, "slide-left") {
+    @if index($toast-animations, "slide-left") {
         &.slide-left {
             transform: translateX(25%);
 
@@ -120,7 +124,7 @@
         }
     }
 
-    @if index($toast-animation, "slide-right") {
+    @if index($toast-animations, "slide-right") {
         &.slide-right {
             transform: translateX(-25%);