Selaa lähdekoodia

Adjust dropdown checkmark animation

Makes the animation direction reversed between showing and hiding the
checkmark symbol in the dropdown with multiple selection component.
It now comes from left to right when it appears and from right to left
when it disappears.
Sergiu Miclea 8 vuotta sitten
vanhempi
sitoutus
543ef1c79a
1 muutettua tiedostoa jossa 3 lisäystä ja 3 poistoa
  1. 3 3
      src/components/molecules/Dropdown/index.jsx

+ 3 - 3
src/components/molecules/Dropdown/index.jsx

@@ -83,17 +83,17 @@ const Checkmark = styled.div`
   #symbol {
   #symbol {
     transition: stroke ${StyleProps.animations.swift};
     transition: stroke ${StyleProps.animations.swift};
     stroke-dasharray: 12;
     stroke-dasharray: 12;
-    stroke-dashoffset: ${props => props.show ? 0 : 12};
+    stroke-dashoffset: ${props => props.show ? 24 : 12};
     animation-duration: 100ms;
     animation-duration: 100ms;
     animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     animation-fill-mode: forwards;
     animation-fill-mode: forwards;
 
 
     @keyframes dashOn {
     @keyframes dashOn {
       from { stroke-dashoffset: 12; }
       from { stroke-dashoffset: 12; }
-      to { stroke-dashoffset: 0; }
+      to { stroke-dashoffset: 24; }
     }
     }
     @keyframes dashOff {
     @keyframes dashOff {
-      from { stroke-dashoffset: 0; }
+      from { stroke-dashoffset: 24; }
       to { stroke-dashoffset: 12; }
       to { stroke-dashoffset: 12; }
     }
     }
   }
   }