Added toast reduced motion animations and decreased the animation dur…

…ation
amir2mi · Sep 29, 2022 · eaaad05 · eaaad05
1 parent 481ea3d
commit eaaad05
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/scss/_a11y.scss b/scss/_a11y.scss
@@ -23,7 +23,8 @@
     // Fade In
     .dropdown,
     .modal,
-    .tab-panel {
+    .tab-panel,
+    .toast {
       &.show {
         animation-name: flatify-fade-in !important;
       }
@@ -58,6 +59,7 @@
 
     // Fade Out
     .show {
+      &.toast-will-be-removed,
       &.alert-will-be-removed,
       &.dropdown-will-be-hidden,
       &.modal-will-be-hidden,

diff --git a/scss/components/_toast.scss b/scss/components/_toast.scss
@@ -3,8 +3,8 @@
   --#{$CSS_VAR_PFX}toast-bg-color: var(--#{$CSS_VAR_PFX}bg-color);
   --#{$CSS_VAR_PFX}toast-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);
   --#{$CSS_VAR_PFX}toast-inner-space: 2.5em;
-  --#{$CSS_VAR_PFX}toast-animation-show: flatify-slide-up-in-min ease 0.3s;
-  --#{$CSS_VAR_PFX}toast-animation-hide: flatify-slide-down-out-min ease 0.3s both;
+  --#{$CSS_VAR_PFX}toast-animation-show: flatify-slide-up-in-min ease 0.2s;
+  --#{$CSS_VAR_PFX}toast-animation-hide: flatify-slide-down-out-min ease 0.2s both;
 }
 
 .toast-wrapper {
@@ -62,7 +62,7 @@
   box-shadow: inset 0 -0.125em 0 var(--#{$CSS_VAR_PFX}local-border-color);
   border-radius: var(--#{$CSS_VAR_PFX}border-radius);
 
-  &:not(.toast-will-be-removed) {
+  &.show {
     animation: var(--#{$CSS_VAR_PFX}toast-animation-show);
   }
 

diff --git a/scss/flatify.scss b/scss/flatify.scss
@@ -1,5 +1,5 @@
 /*!
- * FlatifyCSS version 1.3.1
+ * FlatifyCSS version 1.3.2-0
  * Modern flat design framework for the web — inspired by Duolingo design system. 
  * Copyright 2021-2022 The FlatifyCSS Authors
  * Licensed under MIT (https://github.com/amir2mi/flatifycss/blob/master/LICENSE)