refactor(_toggles.scss): move radio-toggle mixin to toggles

cb-talent-development · Jun 20, 2017 · ec0a8da · ec0a8da
1 parent 2940c3e
commit ec0a8da
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 84 deletions.
diff --git a/sass/_forms.scss b/sass/_forms.scss
@@ -218,79 +218,6 @@ form button {
   width: 100%;
 }
 
-// Radio button toggle
-
-@mixin radio-toggle {
-  @include display(flex);
-  margin-bottom: $base-margin;
-  width: 100%;
-
-  input[type='radio'] {
-    display: none;
-  }
-
-  span {
-    @include display(flex);
-    @include flex(1);
-
-    &:first-of-type label {
-      border-top-left-radius: $minor-border-radius;
-      border-bottom-left-radius: $minor-border-radius;
-    }
-
-    &:last-of-type label {
-      border-top-right-radius: $minor-border-radius;
-      border-bottom-right-radius: $minor-border-radius;
-    }
-  }
-
-  label {
-    @include display(flex);
-    @include flex(1);
-    @include align-items(center);
-    margin: 0;
-    border: $form-border;
-    padding: 6px 24px;
-    background-color: $grey-lighter;
-    cursor: pointer;
-    transition: $toggle-button-transistion;
-    font-size: $small-font-size;
-
-    &:before {
-      content: '\f111';
-      font-family: FontAwesome;
-      font-size: 1.45rem;
-      margin-right: 6px;
-      color: white;
-    }
-  }
-
-  input[type='radio']:checked + label {
-    background-color: white;
-
-    &:before {
-      content: '\f058';
-      color: $base-link-color;
-    }
-  }
-
-  label {
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $grey-lightest;
-    }
-  }
-
-  input[type='radio']:checked + label {
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: white;
-    }
-  }
-}
-
 // Autocomplete Dropdown
 
 @mixin autocomplete-dropdown {

diff --git a/sass/directives/_toggles.scss b/sass/directives/_toggles.scss
@@ -88,27 +88,32 @@
     display: none;
   }
 
-  label {
+  span {
     @include display(flex);
-    @include align-items(center);
     @include flex(1);
-    margin: 0;
-    border: $form-border;
-    padding: 6px 24px;
-    background-color: $grey-lighter;
-    cursor: pointer;
-    transition: $toggle-button-transistion--radio;
-    font-size: $small-font-size;
 
-    &:first-of-type {
+    &:first-of-type label {
       border-top-left-radius: $minor-border-radius;
       border-bottom-left-radius: $minor-border-radius;
     }
 
-    &:last-of-type {
+    &:last-of-type label {
       border-top-right-radius: $minor-border-radius;
       border-bottom-right-radius: $minor-border-radius;
     }
+  }
+
+  label {
+    @include display(flex);
+    @include flex(1);
+    @include align-items(center);
+    margin: 0;
+    border: $form-border;
+    padding: 6px 24px;
+    background-color: $grey-lighter;
+    cursor: pointer;
+    transition: $toggle-button-transistion;
+    font-size: $small-font-size;
 
     &:before {
       content: '\f111';