titon-toolkit 1.0.0 → 1.0.1

data/scss/toolkit/components/input.scss

@@ -6,14 +6,14 @@
 
 @import "../common";
 
-.custom-input {
+.#{$vendor-prefix}custom-input {
     @include reset-inline-block;
 }
 
 // Checkbox, radio
-.custom-input {
-    .checkbox,
-    .radio {
+.#{$vendor-prefix}custom-input {
+    .#{$vendor-prefix}checkbox,
+    .#{$vendor-prefix}radio {
         @include reset-inline-block;
         background: $gray-lightest;
         border: 1px solid $gray-dark;
@@ -26,26 +26,27 @@
         &:hover { border-color: $gray-darkest; }
     }
 
-    .radio { border-radius: 50%; }
+    .#{$vendor-prefix}radio { border-radius: 50%; }
 
     input {
         display: none;
 
         // Style when the associated label is being hovered
-        &:hover + .checkbox,
-        &:hover + .radio {
+        &:hover + .#{$vendor-prefix}checkbox,
+        &:hover + .#{$vendor-prefix}radio {
             border-color: $gray-darkest;
         }
 
         // Style when the checkbox is checked
-        &:checked + .checkbox,
-        &:checked + .radio {
+        &:checked + .#{$vendor-prefix}checkbox,
+        &:checked + .#{$vendor-prefix}radio {
             border-color: $info;
+            background-color: $info-light;
         }
 
         // Style when input is disabled
-        &[disabled] + .checkbox,
-        &[disabled] + .radio {
+        &[disabled] + .#{$vendor-prefix}checkbox,
+        &[disabled] + .#{$vendor-prefix}radio {
             cursor: not-allowed;
             border-color: $gray;
         }
@@ -53,8 +54,8 @@
 }
 
 // Select
-.custom-input {
-    .select {
+.#{$vendor-prefix}custom-input {
+    .#{$vendor-prefix}select {
         @include reset-inline-block;
         cursor: pointer;
         background: $gray-lightest;
@@ -64,15 +65,15 @@
         line-height: 1rem;
     }
 
-    .select-label,
-    .select-arrow {
+    .#{$vendor-prefix}select-label,
+    .#{$vendor-prefix}select-arrow {
         display: inline-block;
         vertical-align: middle;
         line-height: normal;
         @include size-medium;
     }
 
-    .select-arrow {
+    .#{$vendor-prefix}select-arrow {
         float: right;
 
         .caret-down { border-top-color: #000; }
@@ -88,17 +89,17 @@
         width: 100%;
 
         // Style when the select is hovered
-        &:hover + .select {
+        &:hover + .#{$vendor-prefix}select {
             border-color: $gray-darkest;
         }
 
         // Style when the select is focused
-        &:focus + .select {
+        &:focus + .#{$vendor-prefix}select {
             border-color: $info;
         }
 
         // Style when select is disabled
-        &[disabled] + .select {
+        &[disabled] + .#{$vendor-prefix}select {
             cursor: not-allowed;
             color: $gray-darkest;
             border-color: $gray;

data/scss/toolkit/components/label.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.label {
+.#{$vendor-prefix}label {
     @include reset-inline-block;
     font-size: .7rem;
     line-height: 100%;
@@ -18,12 +18,17 @@
     top: -1px;
     letter-spacing: 1px;
 
-    &.small {
+    @include is-small {
         font-size: .6rem;
         padding: .2rem .35rem;
     }
 
-    &.large {
+    @include is-medium() {
+        font-size: .7rem;
+        padding: .275rem .425rem;
+    }
+
+    @include is-large {
         font-size: .8rem;
         padding: .35rem .5rem;
     }
@@ -40,14 +45,14 @@
 
 //-------------------- Modifiers --------------------//
 
-.label--badge {
-    @extend .label;
+.#{$vendor-prefix}label--badge {
+    @extend .#{$vendor-prefix}label;
 
     border-radius: 1rem;
 }
 
-.label--arrow-left {
-    @extend .label;
+.#{$vendor-prefix}label--arrow-left {
+    @extend .#{$vendor-prefix}label;
 
     border-top-left-radius: 1px;
     border-bottom-left-radius: 1px;
@@ -61,12 +66,12 @@
         border-right-color: $gray-dark;
     }
 
-    &.small:after { border-width: .5rem; }
-    &.large:after { border-width: .75rem; }
+    &.#{$size-small-class}:after { border-width: .5rem; }
+    &.#{$size-large-class}:after { border-width: .75rem; }
 }
 
-.label--arrow-right {
-    @extend .label;
+.#{$vendor-prefix}label--arrow-right {
+    @extend .#{$vendor-prefix}label;
 
     border-top-right-radius: 1px;
     border-bottom-right-radius: 1px;
@@ -80,12 +85,12 @@
         border-left-color: $gray-dark;
     }
 
-    &.small:after { border-width: .5rem; }
-    &.large:after { border-width: .75rem; }
+    &.#{$size-small-class}:after { border-width: .5rem; }
+    &.#{$size-large-class}:after { border-width: .75rem; }
 }
 
-.label--ribbon-left {
-    @extend .label;
+.#{$vendor-prefix}label--ribbon-left {
+    @extend .#{$vendor-prefix}label;
 
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -100,8 +105,8 @@
     }
 }
 
-.label--ribbon-right {
-    @extend .label;
+.#{$vendor-prefix}label--ribbon-right {
+    @extend .#{$vendor-prefix}label;
 
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;

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

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.lazy-load {
+.#{$vendor-prefix}lazy-load {
     background-image: none !important;
     @include transition(background $lazyLoad-transition);
 }

data/scss/toolkit/components/matrix.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.matrix {
+.#{$vendor-prefix}matrix {
     position: relative;
     list-style: none;
     margin: 0;
@@ -14,12 +14,12 @@
 
     @include clear-fix;
 
-    &.no-columns .matrix-item {
+    &.no-columns .#{$vendor-prefix}matrix-item {
         position: relative !important;
     }
 }
 
-.matrix-item {
+.#{$vendor-prefix}matrix-item {
     margin: 0;
     padding: 0;
     @include transition(top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition);

data/scss/toolkit/components/modal.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.modal {
+.#{$vendor-prefix}modal {
     position: fixed;
     top: 50%;
     left: 50%;
@@ -21,17 +21,17 @@
     backface-visibility: hidden;
     @include transform(translateX(-50%) translateY(-50%));
 
-    &.is-loading {
-        .modal-close { display: none; }
+    &.#{$state-is-prefix}loading {
+        .#{$vendor-prefix}modal-close { display: none; }
     }
 
-    &.is-draggable {
-        .modal-inner { cursor: default; }
-        .modal-head { cursor: move; }
+    &.#{$state-is-prefix}draggable {
+        .#{$vendor-prefix}modal-inner { cursor: default; }
+        .#{$vendor-prefix}modal-head { cursor: move; }
     }
 }
 
-.modal-close {
+.#{$vendor-prefix}modal-close {
     position: absolute;
     top: $padding;
     right: $padding;
@@ -42,28 +42,28 @@
     &:hover { opacity: 1; }
 }
 
-.modal-inner {
+.#{$vendor-prefix}modal-inner {
     position: relative;
     margin: 0 auto;
     background: $gray;
 }
 
-.modal-head,
-.modal-body,
-.modal-foot,
-.modal-loading,
-.modal-error {
+.#{$vendor-prefix}modal-head,
+.#{$vendor-prefix}modal-body,
+.#{$vendor-prefix}modal-foot,
+.#{$vendor-prefix}modal-loading,
+.#{$vendor-prefix}modal-error {
     padding: $padding;
 }
 
 // Remove margins from text elements
-.modal-body {
+.#{$vendor-prefix}modal-body {
     @include content-spacing;
 }
 
 //-------------------- Modifiers --------------------//
 
-.modal.is-fullscreen {
+.#{$vendor-prefix}modal.#{$state-is-prefix}fullscreen {
     top: 0;
     left: 0;
     margin: 0;
@@ -76,7 +76,7 @@
 
 //-------------------- Animations --------------------//
 
-.modal {
+.#{$vendor-prefix}modal {
     &.from-above,
     &.from-below,
     &.slide-in-top,
@@ -85,12 +85,12 @@
     &.slide-in-right,
     &.flip,
     &.flip-vert {
-        .modal-handle {
+        .#{$vendor-prefix}modal-handle {
             opacity: 0;
             @include transition(all $modal-transition);
         }
 
-        &.show .modal-handle {
+        &.show .#{$vendor-prefix}modal-handle {
             opacity: 1;
         }
     }
@@ -101,63 +101,63 @@
     }
 
     &.from-above {
-        .modal-handle {
+        .#{$vendor-prefix}modal-handle {
             @include transform(scale(1.3));
         }
 
-        &.show .modal-handle {
+        &.show .#{$vendor-prefix}modal-handle {
             @include transform(scale(1));
         }
     }
 
     &.from-below {
-        .modal-handle {
+        .#{$vendor-prefix}modal-handle {
             @include transform(scale(0.7));
         }
 
-        &.show .modal-handle {
+        &.show .#{$vendor-prefix}modal-handle {
             @include transform(scale(1));
         }
     }
 
     &.slide-in-top {
-        .modal-handle {
+        .#{$vendor-prefix}modal-handle {
             @include transform(translateY(-50%));
         }
 
-        &.show .modal-handle {
+        &.show .#{$vendor-prefix}modal-handle {
             @include transform(translateY(0));
         }
     }
 
     &.slide-in-bottom {
-        .modal-handle {
+        .#{$vendor-prefix}modal-handle {
             @include transform(translateY(50%));
         }
 
-        &.show .modal-handle {
+        &.show .#{$vendor-prefix}modal-handle {
             @include transform(translateY(0));
         }
     }
 
     &.slide-in-left {
-        .modal-handle {
+        .#{$vendor-prefix}modal-handle {
             @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
             @include transform(translateX(-50%));
         }
 
-        &.show .modal-handle {
+        &.show .#{$vendor-prefix}modal-handle {
             @include transform(translateX(0));
         }
     }
 
     &.slide-in-right {
-        .modal-handle {
+        .#{$vendor-prefix}modal-handle {
             @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
             @include transform(translateX(50%));
         }
 
-        &.show .modal-handle {
+        &.show .#{$vendor-prefix}modal-handle {
             @include transform(translateX(0));
         }
     }
@@ -215,12 +215,12 @@
     &.flip {
         @include perspective(1300px);
 
-        .modal-handle {
+        .#{$vendor-prefix}modal-handle {
             @include transform-style(preserve-3d);
             @include transform(rotateY(-70deg));
         }
 
-        &.show .modal-handle {
+        &.show .#{$vendor-prefix}modal-handle {
             @include transform(rotateY(0deg));
         }
     }
@@ -228,12 +228,12 @@
     &.flip-vert {
         @include perspective(1300px);
 
-        .modal-handle {
+        .#{$vendor-prefix}modal-handle {
             @include transform-style(preserve-3d);
             @include transform(rotateX(-70deg));
         }
 
-        &.show .modal-handle {
+        &.show .#{$vendor-prefix}modal-handle {
             @include transform(rotateX(0deg));
         }
     }

data/scss/toolkit/components/notice.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.notice {
+.#{$vendor-prefix}notice {
     margin: $margin 0;
     padding: $padding;
     background: $gray-light;
@@ -24,7 +24,7 @@
     @include content-spacing;
 }
 
-.notice-close {
+.#{$vendor-prefix}notice-close {
     float: right;
     margin-left: $margin;
     line-height: 1rem;
@@ -33,6 +33,6 @@
     & ~ p { margin: 0; }
 }
 
-.notice-title {
+.#{$vendor-prefix}notice-title {
     margin: 0 0 ($margin / 2) 0;
 }

data/scss/toolkit/components/pagination.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.pagination {
+.#{$vendor-prefix}pagination {
     display: block;
     margin: $margin 0;
 
@@ -27,7 +27,7 @@
             display: block;
         }
 
-        &.is-active {
+        &.#{$state-is-prefix}active {
             z-index: 1;
         }
     }
@@ -35,8 +35,8 @@
 
 //-------------------- Modifiers --------------------//
 
-.pagination--grouped {
-    @extend .pagination;
+.#{$vendor-prefix}pagination--grouped {
+    @extend .#{$vendor-prefix}pagination;
 
     li {
         margin-left: -1px;

data/scss/toolkit/components/pin.scss

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

data/scss/toolkit/components/popover.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.popover {
+.#{$vendor-prefix}popover {
     position: absolute;
     top: 0;
     left: 0;
@@ -18,45 +18,45 @@
     visibility: hidden;
     background: $gray;
 
-    &.center-left .popover-arrow,
-    &.center-right .popover-arrow {
+    &.center-left .#{$vendor-prefix}popover-arrow,
+    &.center-right .#{$vendor-prefix}popover-arrow {
         top: 50%;
         margin-top: -8px;
     }
 
-    &.center-left .popover-arrow {
+    &.center-left .#{$vendor-prefix}popover-arrow {
         border-left-color: $gray;
         right: -16px;
     }
 
-    &.center-right .popover-arrow {
+    &.center-right .#{$vendor-prefix}popover-arrow {
         border-right-color: $gray;
         left: -16px;
     }
 
-    &.top-center .popover-arrow,
-    &.bottom-center .popover-arrow {
+    &.top-center .#{$vendor-prefix}popover-arrow,
+    &.bottom-center .#{$vendor-prefix}popover-arrow {
         left: 50%;
         margin-left: -8px;
     }
 
-    &.top-center .popover-arrow {
+    &.top-center .#{$vendor-prefix}popover-arrow {
         border-top-color: $gray;
         bottom: -16px;
     }
 
-    &.bottom-center .popover-arrow {
+    &.bottom-center .#{$vendor-prefix}popover-arrow {
         border-bottom-color: $gray;
         top: -16px;
     }
 }
 
-.popover-head,
-.popover-body {
+.#{$vendor-prefix}popover-head,
+.#{$vendor-prefix}popover-body {
     padding: $small-padding;
 }
 
-.popover-arrow {
+.#{$vendor-prefix}popover-arrow {
     width: 0;
     height: 0;
     border: 8px solid transparent;

data/scss/toolkit/components/progress.scss

@@ -6,24 +6,36 @@
 
 @import "../common";
 
-.progress {
+.#{$vendor-prefix}progress {
     overflow: hidden;
     position: relative;
     background: $gray;
 
-    &.small .progress-bar {
-        height: 1rem;
-        line-height: 1rem;
-        font-size: $small-size;
+    @include is-small {
+        .#{$vendor-prefix}progress-bar {
+            height: 1rem;
+            line-height: 1rem;
+            font-size: $small-size;
+        }
     }
 
-    &.large .progress-bar {
-        height: 2rem;
-        line-height: 2rem;
-        font-size: $large-size;
+    @include is-medium {
+        .#{$vendor-prefix}progress-bar {
+            height: 1.5rem;
+            line-height: 1.5rem;
+            font-size: $medium-size;
+        }
     }
 
-    .progress-bar + .progress-bar {
+    @include is-large {
+        .#{$vendor-prefix}progress-bar {
+            height: 2rem;
+            line-height: 2rem;
+            font-size: $large-size;
+        }
+    }
+
+    .#{$vendor-prefix}progress-bar + .#{$vendor-prefix}progress-bar {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
     }
@@ -31,7 +43,7 @@
     @include clear-fix;
 }
 
-.progress-bar {
+.#{$vendor-prefix}progress-bar {
     height: 1.5rem;
     line-height: 1.5rem;
     overflow: hidden;
@@ -43,10 +55,10 @@
     @include transition(width .6s, background $progress-transition);
 }
 
-.progress.round {
+.#{$vendor-prefix}progress.round {
     border-radius: $round;
 
-    .progress-bar {
+    .#{$vendor-prefix}progress-bar {
         border-top-left-radius: $round;
         border-bottom-left-radius: $round;
     }