feat(radio): updated hover styles

positive-js · Jun 5, 2018 · aaede50 · aaede50
1 parent 897348a
commit aaede50
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 68 deletions.
diff --git a/src/lib-dev/radio/styles.scss b/src/lib-dev/radio/styles.scss
@@ -4,7 +4,7 @@
 }
 
 .example-radio-button {
-    margin-bottom: 8px;
+    margin-bottom: 10px;
 }
 
 .example-selected-value {

diff --git a/src/lib/radio/_radio-theme.scss b/src/lib/radio/_radio-theme.scss
@@ -16,65 +16,71 @@
     $warn: map-get($theme, warn);
     $foreground: map-get($theme, foreground);
 
-    .mc-radio-label {
+    .mc-radio-input {
+        + .mc-radio-label-content {
+            &:before {
+                border-color: mc-color($second, 300);
+            }
+        }
 
         &:hover {
+            + .mc-radio-label-content {
 
-            .mc-radio-inner-circle {
-                background-color: rgba(0, 0, 0, 0.06);
+                &:before {
+                    background-color: darken(white, 5%);
+                }
             }
         }
-    }
-
-    .mc-radio-disabled {
 
-        .mc-radio-inner-circle {
-            background-color: mc-color($second, 40);
-        }
+        &:checked {
+            + .mc-radio-label-content {
 
-        .mc-radio-outer-circle {
-            border-color: mc-color($second, 100);
-        }
+                &:after {
+                    opacity: 1;
+                    background: white;
+                }
 
-        .mc-radio-label-content {
-            color: mc-color($foreground, disabled);
+                &:before {
+                    background: mc-color($primary, 500);
+                    border-color: mc-color($primary, 600);
+                }
+            }
         }
-    }
 
-    .mc-radio-disabled .mc-radio-label {
+        &:checked:hover {
+            + .mc-radio-label-content {
 
-        &:hover {
-
-            .mc-radio-inner-circle {
-                background-color: mc-color($second, 40);
+                &:before {
+                    background: lighten(mc-color($primary, 500), 5%);
+                    border-color: lighten(mc-color($primary, 600), 5%);
+                }
             }
         }
-    }
-
-    .mc-radio-button {
 
-        &.mc-primary {
-            @include _mc-radio-color($primary);
+        &:focus {
+            + .mc-radio-label-content:before {
+                border-color: mc-color($primary, 500);
+            }
         }
 
-        &.mc-second {
-            @include _mc-radio-color($second);
+        &[disabled] {
 
-            &.mc-radio-checked .mc-radio-outer-circle {
-                border-color: mc-color($primary, 600);
-            }
+            + .mc-radio-label-content {
 
-            &.mc-radio-checked .mc-radio-inner-circle {
-                background-color: mc-color($primary, 500);
+                opacity: 0.5;
+                color: mc-color($second, 700);
 
                 &:before {
-                    background-color: white;
+                    background: mc-color($second, 40); // GRAY-40
+                    border: {
+                        color: mc-color($second, 100); //GRAY-100
+                    }
                 }
-            }
-        }
 
-        &.mc-warn {
-            @include _mc-radio-color($warn);
+                &:after {
+                    background: mc-color($second, 200); // GRAY-200
+                }
+            }
         }
     }
 }

diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
@@ -53,7 +53,6 @@ $mc-toggle-padding: 26px !default;
                 width: 1px;
                 style: solid;
                 radius: 50%;
-                color: #b3b3b3; //GRAY-300
             }
         }
 
@@ -69,26 +68,11 @@ $mc-toggle-padding: 26px !default;
         }
     }
 
-    &:hover {
-        + .mc-radio-label-content {
-
-            &:before {
-                background-color: darken(white, 5%);
-            }
-        }
-    }
-
     &:checked {
         + .mc-radio-label-content {
-            &:after {
-                opacity: 1;
-                background: white;
-            }
 
             &:before {
                 box-shadow: unset;
-                background: #338fcc; // BLUE-500
-                border-color: #206ea2; // BLUE-600
             }
         }
     }
@@ -97,7 +81,7 @@ $mc-toggle-padding: 26px !default;
         + .mc-radio-label-content {
             &:after {
                 opacity: 1;
-                background: darken(white, 5%);
+                //background: darken(white, 5%);
             }
         }
     }
@@ -106,10 +90,9 @@ $mc-toggle-padding: 26px !default;
         + .mc-radio-label-content:before {
             top: -2px;
             left: -1px;
-            box-shadow: inset 0 0 0 1px #fff;
+            box-shadow: inset 0 0 0 1px white;
             border: {
                 width: 2px;
-                color: #338fcc; // BLUE-500
             }
         }
     }
@@ -119,17 +102,6 @@ $mc-toggle-padding: 26px !default;
 
         + .mc-radio-label-content {
             cursor: default;
-
-            &:before {
-                background: #f5f5f5; // GRAY-40
-                border: {
-                    color: #e6e6e6; //GRAY-100
-                }
-            }
-
-            &:after {
-                background: #cccccc; // GRAY-200
-            }
         }
     }
 }