Redefine options

Author: mikhailov-s

src/v2/scss/components/_forms/_checkbox.scss

@@ -1,17 +1,18 @@
 .ui.option {
+
+  .control__indicator::after {
+    transform: translateY(-4px);
+    top: 0;
+  }
+
   &.checkbox {
     .control__input {
-      &:checked ~ .control__indicator {
-        background: $control-checked-bg url("/static/v2/img/icons/checkmark.svg") no-repeat center;
-      }
-    }
-
-    &.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%;
+        transform: translateY(0);
       }
     }
   }
-}
+}

src/v2/scss/components/_forms/_options.scss

@@ -4,82 +4,97 @@
 // Default styles for checkbox and radio
 
 .ui.option {
-  display: flex;
-  align-items: flex-start;
-  margin: 0 0 spacer("4x") 0;
-  cursor: pointer;
+  display: block;
   position: relative;
+  margin-bottom: 1rem;
+  padding-left: 26px;
+  cursor: pointer;
   line-height: 1.2;
-  font-size: $font-size-base;
+  font-size: $font-size-content-base;
 
-  &:hover {
-    .control__indicator {
-      border-color: $control-bg-hover;
+  .control__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    clip: rect(0 0 0 0);
+  }
+
+  .control__indicator {
+    line-height: 1.2;
+
+    &::after {
+      content: "";
+      position: absolute;
+      z-index: 201;
+      left: 0;
+      width: $control-size;
+      height: $control-size;
+      opacity: 0;
     }
 
-    .control__description {
-      color: $input-color;
+    &::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;
+      transition: .075s ease-out;
+      transition-property: transform, border-color, background-color;
     }
   }
 
-  .control__input {
-    position: absolute;
-    top: 50%;
-    left: 12px;
-    transform: translate(-50%, -50%);
-    opacity: 0;
-    margin: 0;
-    padding: 0;
-
-    &:checked {
-      ~ .control__indicator {
+  .control__input:checked {
+    ~ .control__indicator {
+      &::before {
         border: none;
-        background: $control-checked-bg;
+        background-color: $control-checked-bg;
+      }
+
+      &::after {
+        opacity: 1;
+        transition: opacity .075s ease-in-out, transform .125s ease-in-out;
       }
     }
+  }
 
-    &:focus {
-      ~ .control__indicator {
+  .control__input:focus {
+    ~ .control__indicator {
+      &::before {
         border: none;
         box-shadow: inset 0 0 2px 1px rgba($gray-darker, .5);
       }
     }
   }
 
-  .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__description {
-    margin: 0 0 0 26px;
-    display: inline-block;
-    color: $control-color;
+  &:hover {
+    .control__indicator::before {
+      border: $control-border-width solid $gray-dark;
+    }
   }
 
   &.disabled {
     cursor: default;
+    opacity: .5;
 
-    &:hover .control__indicator {
-      border-color: $control-border-color;
+    .control__indicator::before {
+      border-color: $control-disabled-bg;
     }
 
-    .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 +104,7 @@
   display: block;
 
   .option:last-child {
-    margin-bottom: 0!important;
+    margin-bottom: 0 !important;
   }
 
   &.inline {
@@ -114,4 +129,4 @@
       margin-bottom: 0;
     }
   }
-}
+}

src/v2/scss/components/_forms/_radio.scss

@@ -2,22 +2,24 @@
   &.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;
+        transform: scale(1);
       }
     }
 
-    .control__indicator {
+    .control__indicator::before {
       border-radius: 50%;
     }
+
+    .control__indicator::after {
+      background-image: none;
+      transform: scale(.5);
+      transition: opacity .075s ease-in-out, transform .125s ease-in-out;
+    }
   }
-}
+}