feat(select): make caret rotate up/down on open/close respectively (#1218)

* feat(select): make select caret rotate on drop down open/close

Also makes collapsible caret rotate on open/close. This makes both consistent to drop down menus.

* fix: use common variable for transition duration

Author: priyajeet

src/components/collapsible/Collapsible.scss

@@ -28,6 +28,7 @@
     .collapsible-card-header-caret {
         position: absolute;
         right: 0;
+        transition: transform $bdl-transition-duration-200ms;
     }
 
     .btn-plain.collapsible-card-title {
@@ -43,6 +44,10 @@
         padding: 10px 0;
     }
 
+    &.is-open .collapsible-card-header-caret {
+        transform: rotateZ(180deg);
+    }
+
     &.is-bordered {
         border: 1px solid $eees;
 

src/components/dropdown-menu/MenuToggle.scss

@@ -7,7 +7,7 @@
     > .toggle-arrow {
         flex: none;
         margin-left: 5px;
-        transition: transform .2s ease-in;
+        transition: transform $bdl-transition-duration-200ms ease-in;
 
         .dropdown-menu-enabled &,
         .is-toggled & {

src/elements/content-sidebar/SidebarSection.scss

@@ -18,6 +18,10 @@
     text-align: left;
     width: 100%;
 
+    .icon-caret-down {
+        transition: transform $bdl-transition-duration-200ms;
+    }
+
     &:active,
     &:focus {
         border-bottom-color: $blue;
@@ -27,12 +31,8 @@
             fill: $twos;
         }
     }
-
-    .icon-caret-down {
-        transform: rotateZ(-90deg);
-    }
 }
 
 .be .bcs-section-open .btn-plain.bcs-section-title .icon-caret-down {
-    transform: none;
+    transform: rotateZ(180deg);
 }

src/styles/_variables.scss

@@ -163,3 +163,6 @@ $bdl-line-height: 20px;
 
 // Borders
 $bdl-border-radius-size: 4px;
+
+// Animation
+$bdl-transition-duration-200ms: .2s;

src/styles/common/_forms.scss

@@ -222,9 +222,14 @@ textarea {
     position: absolute;
     right: 11px;
     top: 15px;
+    transition: transform $bdl-transition-duration-200ms;
     width: 0;
 }
 
+.select-container .select-button[aria-expanded='true']::before {
+    transform: rotateZ(180deg);
+}
+
 .select-container .select-button {
     color: $twos;
     padding-right: 25px;

src/styles/common/_tables.scss

@@ -1,3 +1,5 @@
+@import '../variables';
+
 /**************************************
  * Tables
  **************************************/
@@ -186,7 +188,7 @@
         path {
             transform: rotate(0deg);
             transform-origin: 50% 50%;
-            transition: transform .25s;
+            transition: transform $bdl-transition-duration-200ms;
         }
     }
 }