input.scss in titon-toolkit-1.0.1

- old
+ new

@@ -4,18 +4,18 @@
  * @link        http://titon.io
  */
 
 @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;
         width: 16px;
         height: 16px;
@@ -24,57 +24,58 @@
         border-radius: $round;
 
         &: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;
         }
     }
 }
 
 // Select
-.custom-input {
-    .select {
+.#{$vendor-prefix}custom-input {
+    .#{$vendor-prefix}select {
         @include reset-inline-block;
         cursor: pointer;
         background: $gray-lightest;
         border: 1px solid $gray-dark;
         border-radius: $round;
         white-space: nowrap;
         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; }
     }
 
@@ -86,20 +87,20 @@
         z-index: 1;
         opacity: 0;
         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;
         }
     }
\ No newline at end of file