New options realization

cscenter · Aug 9, 2019 · 616836b · 616836b
1 parent d7b20cd
commit 616836b
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 62 deletions.
diff --git a/src/v2/scss/components/_forms/_checkbox.scss b/src/v2/scss/components/_forms/_checkbox.scss
@@ -1,17 +1,11 @@
 .ui.option {
+
   &.checkbox {
     .control__input {
-      &:checked ~ .control__indicator {
-        background: $control-checked-bg url("/static/v2/img/icons/checkmark.svg") no-repeat center;
-        background-size: 135%;
-      }
-    }
-
-    &.disabled {
-      .control__input {
-        &:checked ~ .control__indicator {
-          background: $control-disabled-bg url("/static/v2/img/icons/checkmark.svg") no-repeat center;
-        }
+      &:checked ~ .control__indicator::after {
+        background-image: url("/static/v2/img/icons/checkmark.svg");
+        background-repeat: no-repeat;
+        background-position: 50% 50%;
       }
     }
   }

diff --git a/src/v2/scss/components/_forms/_options.scss b/src/v2/scss/components/_forms/_options.scss
@@ -4,9 +4,9 @@
 // Default styles for checkbox and radio
 
 .ui.option {
-  display: flex;
-  align-items: flex-start;
+  display: block;
   margin: 0 0 spacer("4x") 0;
+  padding-left: 26px;
   cursor: pointer;
   position: relative;
 
@@ -22,64 +22,81 @@
 
   .control__input {
     position: absolute;
-    top: 50%;
-    left: 12px;
-    transform: translate(-50%, -50%);
-    opacity: 0;
-    margin: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
     padding: 0;
+    overflow: hidden;
+    border: 0;
+    clip: rect(0 0 0 0);
+  }
+
+  .control__indicator {
+
+    &::after {
+      content: "";
+      position: absolute;
+      z-index: 201;
+      left: 0;
+      width: $control-size;
+      height: $control-size;
+      opacity: 0;
+    }
 
-    &:checked {
-      ~ .control__indicator {
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      z-index: 200;
+      width: $control-size;
+      height: $control-size;
+      top: 0;
+      left: 0;
+      border-radius: $border-radius;
+      border: $control-border-width solid $control-border-color;
+      background-color: $control-bg;
+    }
+  }
+
+  .control__input:checked {
+    ~ .control__indicator {
+      &::before {
         border: none;
-        background: $control-checked-bg;
+        background-color: $control-checked-bg;
       }
-    }
 
-    &:focus {
-      ~ .control__indicator {
-        border-color: $control-bg-hover;
-        opacity: .8;
+      &::after {
+        opacity: 1;
       }
     }
   }
 
-  .control__indicator {
-    display: block;
-    position: absolute;
-    width: $control-size;
-    height: $control-size;
-    border: $control-border-width solid $control-border-color;
-    border-radius: $border-radius;
-    background-color: $control-bg;
-    background-size: 135%;
+  .control__input:focus {
+    ~ .control__indicator {
+      &::before {
+        border-color: $control-bg-hover;
+      }
+    }
   }
 
-  .control__description {
-    margin: 0 0 0 spacer("8x");
-    display: inline-block;
-    line-height: 1.375;
-    font-size: $font-size-content-base;
-    color: $control-color;
+  &:hover {
+    .control__indicator::before {
+      border: $control-border-width solid $gray-dark;
+    }
   }
 
   &.disabled {
     cursor: default;
 
-    &:hover .control__indicator {
+    .control__indicator::before {
       border-color: $control-border-color;
     }
 
-    .control__input {
-      &:checked ~ .control__indicator {
-        background: $control-disabled-bg;
-
+    &:hover {
+      .control__indicator::before {
+        border-color: $control-disabled-bg;
       }
     }
-
-    .control__description {
-      color: $control-disabled-bg;
-    }
   }
 }
 
@@ -89,7 +106,7 @@
   display: block;
 
   .option:last-child {
-    margin-bottom: 0!important;
+    margin-bottom: 0 !important;
   }
 
   &.inline {

diff --git a/src/v2/scss/components/_forms/_radio.scss b/src/v2/scss/components/_forms/_radio.scss
@@ -2,22 +2,22 @@
   &.radio {
     .control__input {
       &:checked ~ .control__indicator::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        margin: auto;
-        width: 10px;
-        height: 10px;
+        left: 6px;
+        top: 6px;
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
         border-radius: 50%;
-        background: $white;
       }
     }
 
-    .control__indicator {
+    .control__indicator::before {
       border-radius: 50%;
     }
+
+    .control__indicator::after {
+      background-image: none;
+    }
   }
 }
+