titon-toolkit 1.0.0 → 1.0.1

data/scss/toolkit/components/showcase.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.showcase {
+.#{$vendor-prefix}showcase {
     position: fixed;
     top: 50%;
     left: 50%;
@@ -19,23 +19,23 @@
     backface-visibility: hidden;
     @include transform(translateX(-50%) translateY(-50%));
 
-    &.is-loading,
-    &.is-single {
-        .showcase-prev,
-        .showcase-next,
-        .showcase-tabs {
+    &.#{$state-is-prefix}loading,
+    &.#{$state-is-prefix}single {
+        .#{$vendor-prefix}showcase-prev,
+        .#{$vendor-prefix}showcase-next,
+        .#{$vendor-prefix}showcase-tabs {
             display: none !important;
         }
     }
 
-    &.is-loading {
-        .showcase-close {
+    &.#{$state-is-prefix}loading {
+        .#{$vendor-prefix}showcase-close {
             display: none !important;
         }
     }
 }
 
-.showcase-close {
+.#{$vendor-prefix}showcase-close {
     position: absolute;
     top: $padding;
     right: $padding;
@@ -43,14 +43,14 @@
     padding: $padding;
 }
 
-.showcase-inner {
+.#{$vendor-prefix}showcase-inner {
     position: relative;
     padding: $padding;
     background: $gray;
     border: 1px solid $gray-dark;
 }
 
-.showcase-items {
+.#{$vendor-prefix}showcase-items {
     list-style: none;
     padding: 0;
     margin: 0;
@@ -76,14 +76,14 @@
         }
 
         &.show {
-            .showcase-caption {
+            .#{$vendor-prefix}showcase-caption {
                 display: block;
             }
         }
     }
 }
 
-.showcase-caption {
+.#{$vendor-prefix}showcase-caption {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -98,8 +98,8 @@
     }
 }
 
-.showcase-prev,
-.showcase-next {
+.#{$vendor-prefix}showcase-prev,
+.#{$vendor-prefix}showcase-next {
     display: block;
     position: absolute;
     padding: $padding;
@@ -112,10 +112,10 @@
     &:focus { outline: none; }
 }
 
-.showcase-prev { left: $padding; }
-.showcase-next { right: $padding; }
+.#{$vendor-prefix}showcase-prev { left: $padding; }
+.#{$vendor-prefix}showcase-next { right: $padding; }
 
-.showcase-tabs {
+.#{$vendor-prefix}showcase-tabs {
     position: absolute;
     top: ($padding * 2);
     left: 50%;

data/scss/toolkit/components/table.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.table {
+.#{$vendor-prefix}table {
     width: 100%;
     background: $gray;
     border-collapse: collapse;
@@ -40,11 +40,11 @@
         background: $gray;
 
         &:nth-child(odd) { background: $gray-lightest; }
-        &.table-divider { background: $gray-dark; }
+        &.#{$vendor-prefix}table-divider { background: $gray-dark; }
     }
 }
 
-.table-responsive {
+.#{$vendor-prefix}table-responsive {
     width: 100%;
     max-width: 100%;
     overflow-x: auto;
@@ -52,11 +52,11 @@
 
 //-------------------- Modifiers --------------------//
 
-.table.has-hover {
-    tbody tr:not(.table-divider):hover { background: #fff; }
+.#{$vendor-prefix}table.#{$state-has-prefix}hover {
+    tbody tr:not(.#{$vendor-prefix}table-divider):hover { background: #fff; }
 }
 
-.table.is-sortable {
+.#{$vendor-prefix}table.#{$state-is-prefix}sortable {
     thead th {
         padding: 0;
 
@@ -76,11 +76,11 @@
 
 //-------------------- Sizes --------------------//
 
-.table.small {
+.#{$vendor-prefix}table.#{$size-small-class} {
     thead th,
     tbody td { padding: $small-padding; }
 
-    &.is-sortable {
+    &.#{$state-is-prefix}sortable {
         thead th {
             padding: 0;
 
@@ -90,11 +90,11 @@
     }
 }
 
-.table.large {
+.#{$vendor-prefix}table.#{$size-large-class} {
     thead th,
     tbody td { padding: $large-padding; }
 
-    &.is-sortable {
+    &.#{$state-is-prefix}sortable {
         thead th {
             padding: 0;
 

data/scss/toolkit/components/tabs.scss

@@ -6,11 +6,11 @@
 
 @import "../common";
 
-.tabs {
+.#{$vendor-prefix}tabs {
     text-align: left;
 }
 
-.tabs-nav {
+.#{$vendor-prefix}tabs-nav {
     display: block;
     margin-bottom: $margin;
 
@@ -23,16 +23,16 @@
 }
 
 // Display none on sections since visibility takes up DOM space
-.tabs-section.hide {
+.#{$vendor-prefix}tabs-section.hide {
     display: none;
 }
 
 //-------------------- Modifiers --------------------//
 
-.tabs--horizontal {
-    @extend .tabs;
+.#{$vendor-prefix}tabs--horizontal {
+    @extend .#{$vendor-prefix}tabs;
 
-    .tabs-nav {
+    .#{$vendor-prefix}tabs-nav {
         ul, ol, li, a, button {
             display: block;
             float: none;

data/scss/toolkit/components/tooltip.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.tooltip {
+.#{$vendor-prefix}tooltip {
     position: absolute;
     top: 0;
     left: 0;
@@ -20,40 +20,40 @@
     color: #fff;
     @include box-sizing(content-box); // Required or else MooTools position() is off
 
-    &.center-left .tooltip-arrow,
-    &.center-right .tooltip-arrow {
+    &.center-left .#{$vendor-prefix}tooltip-arrow,
+    &.center-right .#{$vendor-prefix}tooltip-arrow {
         top: 50%;
         margin-top: -6px;
     }
 
-    &.center-left .tooltip-arrow {
+    &.center-left .#{$vendor-prefix}tooltip-arrow {
         border-left-color: #000;
         right: -12px;
     }
 
-    &.center-right .tooltip-arrow {
+    &.center-right .#{$vendor-prefix}tooltip-arrow {
         border-right-color: #000;
         left: -12px;
     }
 
-    &.top-center .tooltip-arrow,
-    &.bottom-center .tooltip-arrow {
+    &.top-center .#{$vendor-prefix}tooltip-arrow,
+    &.bottom-center .#{$vendor-prefix}tooltip-arrow {
         left: 50%;
         margin-left: -6px;
     }
 
-    &.top-center .tooltip-arrow {
+    &.top-center .#{$vendor-prefix}tooltip-arrow {
         border-top-color: #000;
         bottom: -12px;
     }
 
-    &.bottom-center .tooltip-arrow {
+    &.bottom-center .#{$vendor-prefix}tooltip-arrow {
         border-bottom-color: #000;
         top: -12px;
     }
 }
 
-.tooltip-arrow {
+.#{$vendor-prefix}tooltip-arrow {
     width: 0;
     height: 0;
     border: 6px solid transparent;
@@ -68,8 +68,8 @@
 
 //-------------------- Animations --------------------//
 
-.tooltip,
-.popover {
+.#{$vendor-prefix}tooltip,
+.#{$vendor-prefix}popover {
     &.fade {
         opacity: 0;
         @include transition(opacity 0.5s);

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

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.type-ahead {
+.#{$vendor-prefix}type-ahead {
     position: absolute;
     top: 0;
     left: 0;
@@ -32,13 +32,13 @@
         }
 
         > a:hover,
-        &.is-active a {
+        &.#{$state-is-prefix}active a {
             background: $gray-lightest;
         }
     }
 }
 
-.type-ahead-heading {
+.#{$vendor-prefix}type-ahead-heading {
     padding: $small-padding;
     line-height: 100%;
     display: block;
@@ -46,17 +46,17 @@
     background: $gray-dark;
 }
 
-.type-ahead-highlight {
+.#{$vendor-prefix}type-ahead-highlight {
     background: #fff;
 }
 
-.type-ahead-desc {
+.#{$vendor-prefix}type-ahead-desc {
     display: block;
     color: $gray-darkest;
     font-size: .7rem;
 }
 
-.type-ahead-shadow {
+.#{$vendor-prefix}type-ahead-shadow {
     position: relative;
     height: 2rem;
 
@@ -66,7 +66,7 @@
         left: 0;
     }
 
-    .is-shadow {
+    .#{$state-is-prefix}shadow {
         color: gray;
     }
 

data/scss/toolkit/effects/oval.scss

@@ -8,11 +8,11 @@
 
 //-------------------- Button --------------------//
 
-.button.oval { border-radius: #{$oval-x} / #{$oval-y}; }
+.#{$vendor-prefix}button.oval { border-radius: #{$oval-x} / #{$oval-y}; }
 
 //-------------------- Pagination --------------------//
 
-.pagination--grouped.oval {
+.#{$vendor-prefix}pagination--grouped.oval {
     ul {
         border-radius: #{$oval-x} / #{$oval-y};
     }
@@ -28,7 +28,7 @@
 
 //-------------------- Visual --------------------//
 
-.visual-gloss.oval:after {
+.#{$vendor-prefix}visual-gloss.oval:after {
     width: 90%;
     left: 5.5%;
     border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem;

data/scss/toolkit/effects/pill.scss

@@ -8,41 +8,41 @@
 
 //-------------------- Button --------------------//
 
-.button.pill { border-radius: $pill; }
+.#{$vendor-prefix}button.pill { border-radius: $pill; }
 
 //-------------------- ButtonGroup --------------------//
 
-.button-group.pill {
+.#{$vendor-prefix}button-group.pill {
     border-radius: $pill;
 
-    > li:first-child .button,
-    > .button:first-child,
-    > .button.first {
+    > li:first-child .#{$vendor-prefix}button,
+    > .#{$vendor-prefix}button:first-child,
+    > .#{$vendor-prefix}button.first {
         border-top-left-radius: $pill;
         border-bottom-left-radius: $pill;
     }
 
-    > li:last-child .button,
-    > .button:last-child,
-    > .button.last {
+    > li:last-child .#{$vendor-prefix}button,
+    > .#{$vendor-prefix}button:last-child,
+    > .#{$vendor-prefix}button.last {
         border-top-right-radius: $pill;
         border-bottom-right-radius: $pill;
     }
 }
 
-.button-group--vertical.pill {
+.#{$vendor-prefix}button-group--vertical.pill {
     border-radius: $pill;
 
-    > li:first-child .button,
-    > .button:first-child {
+    > li:first-child .#{$vendor-prefix}button,
+    > .#{$vendor-prefix}button:first-child {
         border-top-left-radius: $pill;
         border-top-right-radius: $pill;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
 
-    > li:last-child .button,
-    > .button:last-child {
+    > li:last-child .#{$vendor-prefix}button,
+    > .#{$vendor-prefix}button:last-child {
         border-top-left-radius: 0;
         border-top-right-radius: 0;
         border-bottom-left-radius: $pill;
@@ -52,7 +52,7 @@
 
 //-------------------- Pagination --------------------//
 
-.pagination--grouped.pill {
+.#{$vendor-prefix}pagination--grouped.pill {
     ul {
         border-radius: $pill;
     }
@@ -70,10 +70,10 @@
 
 //-------------------- Progress --------------------//
 
-.progress.pill {
+.#{$vendor-prefix}progress.pill {
     border-radius: $pill;
 
-    .progress-bar {
+    .#{$vendor-prefix}progress-bar {
         border-top-left-radius: $pill;
         border-bottom-left-radius: $pill;
     }
@@ -81,7 +81,7 @@
 
 //-------------------- Visual --------------------//
 
-.visual-gloss.pill:after {
+.#{$vendor-prefix}visual-gloss.pill:after {
     width: 90%;
     left: 5.5%;
     border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem;

data/scss/toolkit/effects/skew.scss

@@ -8,43 +8,43 @@
 
 //-------------------- Button --------------------//
 
-.button.skew { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }
+.#{$vendor-prefix}button.skew { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }
 
 //-------------------- ButtonGroup --------------------//
 
-.button-group.skew {
+.#{$vendor-prefix}button-group.skew {
     border-top-left-radius: $skew;
     border-top-right-radius: $skew;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 
-    > li:first-child .button,
-    > .button:first-child,
-    > .button.first {
+    > li:first-child .#{$vendor-prefix}button,
+    > .#{$vendor-prefix}button:first-child,
+    > .#{$vendor-prefix}button.first {
         border-top-left-radius: $skew;
         border-bottom-left-radius: 0;
     }
 
-    > li:last-child .button,
-    > .button:last-child,
-    > .button.last {
+    > li:last-child .#{$vendor-prefix}button,
+    > .#{$vendor-prefix}button:last-child,
+    > .#{$vendor-prefix}button.last {
         border-top-right-radius: $skew;
         border-bottom-right-radius: 0;
     }
 }
 
-.button-group--vertical {
+.#{$vendor-prefix}button-group--vertical {
     &.skew {
         border-top-left-radius: $skew-y 1.5rem;
         border-bottom-left-radius: $skew-y 1.5rem;
 
-        > li:first-child .button,
-        > .button:first-child {
+        > li:first-child .#{$vendor-prefix}button,
+        > .#{$vendor-prefix}button:first-child {
             border-top-left-radius: $skew-reverse;
         }
 
-        > li:last-child .button,
-        > .button:last-child {
+        > li:last-child .#{$vendor-prefix}button,
+        > .#{$vendor-prefix}button:last-child {
             border-bottom-left-radius: $skew-reverse;
             border-top-right-radius: 0;
         }
@@ -54,13 +54,13 @@
         border-top-right-radius: $skew-y 1.25rem;
         border-bottom-right-radius: $skew-y 1.25rem;
 
-        > li:first-child .button,
-        > .button:first-child {
+        > li:first-child .#{$vendor-prefix}button,
+        > .#{$vendor-prefix}button:first-child {
             border-top-right-radius: $skew-reverse;
         }
 
-        > li:last-child .button,
-        > .button:last-child {
+        > li:last-child .#{$vendor-prefix}button,
+        > .#{$vendor-prefix}button:last-child {
             border-bottom-right-radius: $skew-reverse;
         }
     }
@@ -68,7 +68,7 @@
 
 //-------------------- Pagination --------------------//
 
-.pagination--grouped.skew {
+.#{$vendor-prefix}pagination--grouped.skew {
     ul {
         border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
     }
@@ -84,7 +84,7 @@
 
 //-------------------- Visual --------------------//
 
-.visual-gloss.skew:after {
+.#{$vendor-prefix}visual-gloss.skew:after {
     width: 90%;
     left: 5.5%;
     border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem;

data/scss/toolkit/effects/visual.scss

@@ -8,7 +8,7 @@
 
 //-------------------- Gloss --------------------//
 
-.visual-gloss {
+.#{$vendor-prefix}visual-gloss {
     &:after {
         content: "";
         position: absolute;
@@ -29,7 +29,7 @@
 
 //-------------------- Reflection --------------------//
 
-.visual-reflect:after {
+.#{$vendor-prefix}visual-reflect:after {
     content: "";
     position: absolute;
     width: 100%;
@@ -41,7 +41,7 @@
 
 //-------------------- Glare --------------------//
 
-.visual-glare:after {
+.#{$vendor-prefix}visual-glare:after {
     content: "";
     position: absolute;
     width: 100%;
@@ -53,7 +53,7 @@
 
 //-------------------- Popout --------------------//
 
-.visual-popout {
+.#{$vendor-prefix}visual-popout {
     box-shadow: 0 6px 0 0 black(.25) !important;
     top: -3px;
 

data/scss/toolkit/layout/base.scss

@@ -45,9 +45,9 @@
 
 // Styles
 .round { border-radius: $round; }
-.is-draggable { cursor: move; }
-.is-dragging { cursor: grabbing; }
-.is-disabled,
+.#{$state-is-prefix}draggable { cursor: move; }
+.#{$state-is-prefix}dragging { cursor: grabbing; }
+.#{$state-is-prefix}disabled,
 [disabled] { cursor: not-allowed !important; }
 
 // Carets

data/scss/toolkit/layout/code.scss

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