From afacc1b293f15c1717244d02b8e40d16a0efe5eb Mon Sep 17 00:00:00 2001
From: Svyatoslav Mikhaylov <mikhaylov.ss@gmail.com>
Date: Fri, 9 Aug 2019 18:50:23 +0300
Subject: [PATCH] Add animation for controls

---
 src/v2/scss/components/_forms/_checkbox.scss | 6 ++++++
 src/v2/scss/components/_forms/_options.scss  | 3 +++
 src/v2/scss/components/_forms/_radio.scss    | 3 +++
 3 files changed, 12 insertions(+)

diff --git a/src/v2/scss/components/_forms/_checkbox.scss b/src/v2/scss/components/_forms/_checkbox.scss
index b3dad4bb..bc2281a5 100644
--- 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
index b0e048a0..e05a055f 100644
--- 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
index 28e838db..906c30e9 100644
--- 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;
     }
   }
 }