fix(Forms): Update radio & checkbox styles.

They looked a little disabled. Modified the border styles so they're a little more obvious. Fixes #36.
Pier1 · Nov 7, 2016 · a6ef399 · a6ef399
1 parent e7b73b3
commit a6ef399
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/rocketbelt/components/radio-buttons/_radio-buttons-default.scss b/rocketbelt/components/radio-buttons/_radio-buttons-default.scss
@@ -32,9 +32,9 @@ input {
         left: 0;
         width: 1rem;
         height: 1rem;
-        border: 2px solid transparent;
+        border: 2px solid color(gray, plus2);
         border-radius: 100%;
-        background: color(gray, plus3);
+        background: color(white);
         content: '';
         transition: all 200ms ease-in;
       }
@@ -57,6 +57,11 @@ input {
     }
 
     &[disabled] {
+      & + label:hover::before {
+        border: none;
+        background: color(gray, plus4);
+      }
+
       &[checked] + label {
         &::before {
           border: 6px solid color(gray, plus4);
@@ -78,39 +83,43 @@ input {
         left: 0;
         width: 1rem;
         height: 1rem;
-        border: 2px solid transparent;
+        border: 2px solid color(gray, plus2);
         border-radius: 2px;
-        background: color(gray, plus3);
+        background: color(white);
         background-position: center center;
         content: '';
         transition: background-color 200ms ease-in;
       }
 
       &:hover::before {
         $color-fill: str-replace(quote($color-white), '#', '%23');
+        border-color: transparent;
         background: url('data:image/svg+xml;utf8,
                       <svg viewBox="629 458 16 12" xmlns="http://www.w3.org/2000/svg">
                         <path fill="#{$color-fill}" fill-rule="evenodd" d="M641.992 458.395l-6.978 6.978-3.006-3.023-2.25 2.232 5.256 5.273 9.228-9.228z"/>
                       </svg>'
                     ) no-repeat,
                     $color-unselected;
         background-position: center center;
-        transition: background-color 100ms ease-in;
+        transition: background-color 100ms ease-in,
+                    border-color 100ms ease-in;;
 
       }
     }
 
     &:checked + label {
       &::before {
         $color-fill: str-replace(quote($color-white), '#', '%23');
+        border-color: transparent;
         background: url('data:image/svg+xml;utf8,
                       <svg viewBox="629 458 16 12" xmlns="http://www.w3.org/2000/svg">
                         <path fill="#{$color-fill}" fill-rule="evenodd" d="M641.992 458.395l-6.978 6.978-3.006-3.023-2.25 2.232 5.256 5.273 9.228-9.228z"/>
                       </svg>'
                     ) no-repeat,
                     $color-selected;
         background-position: center center;
-        transition: background-color 100ms ease-in;
+        transition: background-color 100ms ease-in,
+                    border-color 100ms ease-in;
       }
     }
 
@@ -126,5 +135,12 @@ input {
         background-position: center center;
       }
     }
+
+    &[disabled]:not([checked]) + label {
+      &::before {
+        border-color: transparent;
+        background: color(gray, plus4);
+      }
+    }
   }
 }
diff --git a/templates/base/color/index.jade b/templates/base/color/index.jade
@@ -6,7 +6,7 @@ block vars
 block content
   article
     :md
-      # Color
+      # Colorr
 
     .grid-fluid
       .row.swatch-cards