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

data/scss/toolkit/components/input-group.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}input-group {
+#{$inputGroup-class} {
     display: inline-block;
     vertical-align: middle;
     white-space: nowrap;
@@ -16,12 +16,10 @@
         display: inline-block;
         position: relative;
         border-radius: 0;
-        margin-right: -1px;
         white-space: nowrap;
         height: auto;
         vertical-align: middle;
 
-        &:last-child { margin-right: 0; }
         &:hover { z-index: 1; }
         &:focus { z-index: 2; }
     }
@@ -29,7 +27,7 @@
     @include clear-fix;
 }
 
-.#{$vendor-prefix}input-addon {
+#{$inputGroup-class-addon} {
     vertical-align: middle;
     line-height: normal;
     @include size-medium;
@@ -40,7 +38,7 @@
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}input-group.#{$shape-round-class} {
+#{$inputGroup-class}#{$shape-round-class} {
     > *:first-child {
         border-top-left-radius: $round;
         border-bottom-left-radius: $round;

data/scss/toolkit/components/input.scss

@@ -1,19 +1,19 @@
 /**
- * @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}custom-input {
+#{$input-class} {
     @include reset-inline-block;
 }
 
 // Checkbox, radio
-.#{$vendor-prefix}custom-input {
-    .#{$vendor-prefix}checkbox,
-    .#{$vendor-prefix}radio {
+#{$input-class} {
+    #{$input-class-checkbox},
+    #{$input-class-radio} {
         @include reset-inline-block;
         background: $gray-lightest;
         border: 1px solid $gray-dark;
@@ -26,21 +26,21 @@
         &:hover { border-color: $gray-darkest; }
     }
 
-    .#{$vendor-prefix}radio { border-radius: 50%; }
+    #{$input-class-radio} { border-radius: 50%; }
 
     input {
         display: none;
 
         // Style when the checkbox is checked
-        &:checked + .#{$vendor-prefix}checkbox,
-        &:checked + .#{$vendor-prefix}radio {
+        &:checked + #{$input-class-checkbox},
+        &:checked + #{$input-class-radio} {
             border-color: $info;
             background: $info-light;
         }
 
         // Style when input is disabled
-        &[disabled] + .#{$vendor-prefix}checkbox,
-        &[disabled] + .#{$vendor-prefix}radio {
+        &[disabled] + #{$input-class-checkbox},
+        &[disabled] + #{$input-class-radio} {
             cursor: not-allowed;
             border-color: $gray;
         }
@@ -48,8 +48,8 @@
 }
 
 // Select
-.#{$vendor-prefix}custom-input {
-    .#{$vendor-prefix}select {
+#{$input-class} {
+    #{$input-class-select} {
         @include reset-inline-block;
         cursor: pointer;
         background: $gray-lightest;
@@ -64,15 +64,15 @@
         }
     }
 
-    .#{$vendor-prefix}select-label,
-    .#{$vendor-prefix}select-arrow {
+    #{$input-class-select-label},
+    #{$input-class-select-arrow} {
         display: inline-block;
         vertical-align: middle;
         line-height: normal;
         @include size-medium;
     }
 
-    .#{$vendor-prefix}select-arrow {
+    #{$input-class-select-arrow} {
         float: right;
 
         .caret-down { border-top-color: #000; }
@@ -88,27 +88,27 @@
         width: 100%;
 
         // Style when the select is hovered
-        &:hover + .#{$vendor-prefix}select {
+        &:hover + #{$input-class-select} {
             border-color: $gray-darkest;
         }
 
         // Style when the select is focused
-        &:focus + .#{$vendor-prefix}select {
+        &:focus + #{$input-class-select} {
             border-color: $info;
         }
 
         // Style when select is disabled
-        &[disabled] + .#{$vendor-prefix}select {
+        &[disabled] + #{$input-class-select} {
             cursor: not-allowed;
             color: $gray-darkest;
             border-color: $gray;
 
-            .#{$vendor-prefix}select-arrow { opacity: $default-opacity; }
+            #{$input-class-select-arrow} { opacity: $default-opacity; }
         }
     }
 
     // Select dropdown
-    .#{$vendor-prefix}select-options {
+    #{$input-class-select-options} {
         max-height: 300px;
         overflow: auto;
 
@@ -126,7 +126,7 @@
         }
 
         &.hide-first {
-            li:first-child:not(.#{$vendor-prefix}drop-heading) { display: none !important; }
+            li:first-child:not(#{$drop-class-heading}) { display: none !important; }
         }
     }
 }

data/scss/toolkit/components/label.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}label {
+#{$label-class} {
     @include reset-inline-block;
     font-size: .7rem;
     line-height: 100%;
@@ -30,7 +30,7 @@
 
     &:empty { display: none; }
 
-    &:after {
+    &::after {
         content: "";
         height: 0;
         width: 0;
@@ -40,78 +40,88 @@
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}label--badge {
-    @extend .#{$vendor-prefix}label;
-
-    border-radius: 1rem;
+@if index($label-modifiers, "badge") {
+    #{$label-class-modifier-badge} {
+        border-radius: 1rem;
+    }
 }
 
-.#{$vendor-prefix}label--arrow-left {
-    @extend .#{$vendor-prefix}label;
-
-    border-top-left-radius: 1px;
-    border-bottom-left-radius: 1px;
-    padding-left: 2px;
-    margin-left: 10px;
-
-    &:after {
-        top: 0;
-        right: 100%;
-        border: .65rem solid transparent;
-        border-right-color: $gray-dark;
+@if index($label-modifiers, "arrow-left") {
+    #{$label-class-modifier-arrow-left} {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        padding-left: 2px;
+        margin-left: 10px;
+
+        &::after {
+            top: 0;
+            right: 100%;
+            border: .65rem solid transparent;
+            border-right-color: $gray-dark;
+        }
+
+        @include is-small {
+            &::after { border-width: .5rem; }
+        }
+
+        @include is-large {
+            &::after { border-width: .75rem; }
+        }
     }
-
-    &.#{$size-small-class}:after { border-width: .5rem; }
-    &.#{$size-large-class}:after { border-width: .75rem; }
 }
 
-.#{$vendor-prefix}label--arrow-right {
-    @extend .#{$vendor-prefix}label;
-
-    border-top-right-radius: 1px;
-    border-bottom-right-radius: 1px;
-    padding-right: 2px;
-    margin-right: 10px;
-
-    &:after {
-        top: 0;
-        left: 100%;
-        border: .65rem solid transparent;
-        border-left-color: $gray-dark;
+@if index($label-modifiers, "arrow-right") {
+    #{$label-class-modifier-arrow-right} {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        padding-right: 2px;
+        margin-right: 10px;
+
+        &::after {
+            top: 0;
+            left: 100%;
+            border: .65rem solid transparent;
+            border-left-color: $gray-dark;
+        }
+
+        @include is-small {
+            &::after { border-width: .5rem; }
+        }
+
+        @include is-large {
+            &::after { border-width: .75rem; }
+        }
     }
-
-    &.#{$size-small-class}:after { border-width: .5rem; }
-    &.#{$size-large-class}:after { border-width: .75rem; }
 }
 
-.#{$vendor-prefix}label--ribbon-left {
-    @extend .#{$vendor-prefix}label;
-
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-
-    &:after {
-        top: 100%;
-        left: 0;
-        border: 1em solid transparent;
-        border-top-width: 0 !important;
-        border-left-width: 0 !important;
-        border-right-color: $gray-darkest;
+@if index($label-modifiers, "ribbon-left") {
+    #{$label-class-modifier-ribbon-left} {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        &::after {
+            top: 100%;
+            left: 0;
+            border: 1em solid transparent;
+            border-top-width: 0 !important;
+            border-left-width: 0 !important;
+            border-right-color: $gray-darkest;
+        }
     }
 }
 
-.#{$vendor-prefix}label--ribbon-right {
-    @extend .#{$vendor-prefix}label;
-
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-
-    &:after {
-        top: 100%;
-        right: 0;
-        border: 1em solid transparent;
-        border-top-width: 0 !important;
-        border-right-width: 0 !important;
-        border-left-color: $gray-darkest;
+@if index($label-modifiers, "ribbon-right") {
+    #{$label-class-modifier-ribbon-right} {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        &::after {
+            top: 100%;
+            right: 0;
+            border: 1em solid transparent;
+            border-top-width: 0 !important;
+            border-right-width: 0 !important;
+            border-left-color: $gray-darkest;
+        }
     }
- }
+}

data/scss/toolkit/components/lazy-load.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}lazy-load {
+#{$lazyLoad-class} {
     background-image: none !important;
     transition: background-image $lazyLoad-transition;
 }

data/scss/toolkit/components/loader.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
  */
@@ -9,7 +9,7 @@
 // Based on SpinKit
 // http://tobiasahlin.com/spinkit/
 
-.#{$vendor-prefix}loader {
+#{$loader-class} {
     @include reset-inline-block;
     margin: 0 auto;
     text-align: center;
@@ -20,7 +20,7 @@
     }
 }
 
-.#{$vendor-prefix}loader-message {
+#{$loader-class-message} {
     margin-top: 1rem;
 }
 
@@ -36,7 +36,7 @@
         }
     }
 
-    .#{$vendor-prefix}loader.bar-wave {
+    #{$loader-class}.bar-wave {
         > span {
             background: $loader-color;
             height: $loader-bar-height;
@@ -48,7 +48,7 @@
             }
         }
 
-        .#{$vendor-prefix}loader-message {
+        #{$loader-class-message} {
             margin-top: 1.5rem;
         }
     }
@@ -66,7 +66,7 @@
         }
     }
 
-    .#{$vendor-prefix}loader.bubble-wave {
+    #{$loader-class}.bubble-wave {
         > span {
             background: $loader-color;
             width: $loader-bubble-size;
@@ -94,8 +94,8 @@
         }
     }
 
-    .#{$vendor-prefix}loader.bubble-spinner {
-        .#{$vendor-prefix}loader-spinner {
+    #{$loader-class}.bubble-spinner {
+        #{$loader-class-spinner} {
             width: 100px;
             height: 100px;
             position: relative;

data/scss/toolkit/components/mask.scss

@@ -1,17 +1,13 @@
 /**
- * @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}mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
+#{$mask-class} {
+    @include full-screen(absolute);
     z-index: $mask-zindex;
     opacity: 0;
     visibility: hidden;
@@ -21,7 +17,7 @@
     user-select: none;
 }
 
-.#{$vendor-prefix}mask-message {
+#{$mask-class-message} {
     text-align: center;
     max-width: 80%;
     @include position-center;
@@ -29,7 +25,7 @@
     &:empty { display: none; }
 }
 
-.#{$vendor-prefix}mask-target {
+#{$mask-class-target} {
     overflow: hidden;
 
     // Fixes issues where mask does not display in iOS

data/scss/toolkit/components/matrix.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}matrix {
+#{$matrix-class} {
     @include reset-list;
     position: relative;
 
@@ -14,10 +14,10 @@
         float: left;
         margin: 0;
         padding: 0;
-        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, visibility $matrix-transition;
     }
 
-    &.has-no-columns > li {
+    &.no-columns > li {
         position: relative !important;
     }
 

data/scss/toolkit/components/modal.scss

@@ -1,17 +1,13 @@
 /**
- * @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}modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+#{$modal-class} {
+    @include full-screen();
     opacity: 0;
     visibility: hidden;
     z-index: $modal-zindex;
@@ -20,16 +16,16 @@
     -webkit-overflow-scrolling: touch;
 
     &.is-loading {
-        .#{$vendor-prefix}modal-close { display: none; }
+        #{$modal-class-close} { display: none; }
     }
 
     &.is-draggable {
-        .#{$vendor-prefix}modal-inner { cursor: default; }
-        .#{$vendor-prefix}modal-head { cursor: move; }
+        #{$modal-class-inner} { cursor: default; }
+        #{$modal-class-head} { cursor: move; }
     }
 }
 
-.#{$vendor-prefix}modal-close {
+#{$modal-class-close} {
     position: absolute;
     background: none;
     border: 0;
@@ -42,7 +38,7 @@
     &:hover { opacity: 1; }
 }
 
-.#{$vendor-prefix}modal-outer {
+#{$modal-class-outer} {
     position: relative;
     margin: $margin;
     transition: transform $modal-transition;
@@ -53,99 +49,96 @@
     }
 }
 
-.#{$vendor-prefix}modal-inner {
+#{$modal-class-inner} {
     position: relative;
 }
 
-.#{$vendor-prefix}modal-head,
-.#{$vendor-prefix}modal-body,
-.#{$vendor-prefix}modal-foot {
+#{$modal-class-head},
+#{$modal-class-body},
+#{$modal-class-foot} {
     padding: $padding;
 }
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}modal.is-fullscreen .#{$vendor-prefix}modal-outer {
-    top: 0;
-    left: 0;
+#{$modal-class}.is-fullscreen #{$modal-class-outer} {
+    @include full-screen("");
     margin: 0;
-    width: 100%;
     max-width: 100%;
-    max-height: auto;
     border-radius: 0;
     transform: translate(0, 0);
 }
 
 //-------------------- Animations --------------------//
 
-.#{$vendor-prefix}modal {
-    @if index($modal-animation, "from-above") {
+#{$modal-class} {
+    @if index($modal-animations, "from-above") {
         &.from-above {
-            .#{$vendor-prefix}modal-outer {
+            #{$modal-class-outer} {
                 transform: scale(1.3);
             }
 
-            &.show .#{$vendor-prefix}modal-outer {
+            &.show #{$modal-class-outer} {
                 transform: scale(1);
             }
         }
     }
 
-    @if index($modal-animation, "from-below") {
+    @if index($modal-animations, "from-below") {
         &.from-below {
-            .#{$vendor-prefix}modal-outer {
+            #{$modal-class-outer} {
                 transform: scale(0.7);
             }
 
-            &.show .#{$vendor-prefix}modal-outer {
+            &.show #{$modal-class-outer} {
                 transform: scale(1);
             }
         }
     }
 
-    @if index($modal-animation, "slide-in-top") {
+    @if index($modal-animations, "slide-in-top") {
         &.slide-in-top {
-            .#{$vendor-prefix}modal-outer {
+            #{$modal-class-outer} {
                 transform: translateY(-50%);
             }
 
-            &.show .#{$vendor-prefix}modal-outer {
+            &.show #{$modal-class-outer} {
                 transform: translateY(0);
             }
         }
     }
 
-    @if index($modal-animation, "slide-in-bottom") {
+    @if index($modal-animations, "slide-in-bottom") {
         &.slide-in-bottom {
-            .#{$vendor-prefix}modal-outer {
+            #{$modal-class-outer} {
                 transform: translateY(50%);
             }
 
-            &.show .#{$vendor-prefix}modal-outer {
+            &.show #{$modal-class-outer} {
                 transform: translateY(0);
             }
         }
     }
 
-    @if index($modal-animation, "slide-in-left") {
+    @if index($modal-animations, "slide-in-left") {
         &.slide-in-left {
-            .#{$vendor-prefix}modal-outer {
+            #{$modal-class-outer} {
                 transform: translateX(-25%);
             }
 
-            &.show .#{$vendor-prefix}modal-outer {
+            &.show #{$modal-class-outer} {
                 transform: translateX(0);
             }
         }
     }
 
-    @if index($modal-animation, "slide-in-right") {
+    @if index($modal-animations, "slide-in-right") {
         &.slide-in-right {
-            .#{$vendor-prefix}modal-outer {
+            #{$modal-class-outer} {
                 transform: translateX(25%);
             }
 
-            &.show .#{$vendor-prefix}modal-outer {
+            &.show #{$modal-class-outer} {
                 transform: translateX(0);
             }
         }