Add animation for controls

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

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/src/v2/scss/components/_forms/_checkbox.scss b/src/v2/scss/components/_forms/_checkbox.scss
@@ -1,11 +1,17 @@
 .ui.option {
 
+  .control__indicator::after {
+    transform: translateY(-4px);
+    top: 0;
+  }
+
   &.checkbox {
     .control__input {
       &:checked ~ .control__indicator::after {
         background-image: url("/static/v2/img/icons/checkmark.svg");
         background-repeat: no-repeat;
         background-position: 50% 50%;
+        transform: translateY(0);
       }
     }
   }

diff --git a/src/v2/scss/components/_forms/_options.scss b/src/v2/scss/components/_forms/_options.scss
@@ -55,6 +55,8 @@
       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;
     }
   }
 
@@ -67,6 +69,7 @@
 
       &::after {
         opacity: 1;
+        transition: opacity .075s ease-in-out, transform .125s ease-in-out;
       }
     }
   }

diff --git a/src/v2/scss/components/_forms/_radio.scss b/src/v2/scss/components/_forms/_radio.scss
@@ -8,6 +8,7 @@
         height: 8px;
         background-color: #fff;
         border-radius: 50%;
+        transform: scale(1);
       }
     }
 
@@ -17,6 +18,8 @@
 
     .control__indicator::after {
       background-image: none;
+      transform: scale(.5);
+      transition: opacity .075s ease-in-out, transform .125s ease-in-out;
     }
   }
 }