1mpacto-react-ui 1.0.1 → 2.0.1

package/dist/assets/toast.css

@@ -4,12 +4,15 @@
   --toastify-color-info: #3498db;
   --toastify-color-success: #07bc0c;
   --toastify-color-warning: #f1c40f;
-  --toastify-color-error: #e74c3c;
+  --toastify-color-error: hsl(6, 78%, 57%);
   --toastify-color-transparent: rgba(255, 255, 255, 0.7);
+
   --toastify-icon-color-info: var(--toastify-color-info);
   --toastify-icon-color-success: var(--toastify-color-success);
   --toastify-icon-color-warning: var(--toastify-color-warning);
   --toastify-icon-color-error: var(--toastify-color-error);
+
+  --toastify-container-width: fit-content;
   --toastify-toast-width: 320px;
   --toastify-toast-offset: 16px;
   --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
@@ -17,33 +20,31 @@
   --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
   --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
   --toastify-toast-background: #fff;
+  --toastify-toast-padding: 14px;
   --toastify-toast-min-height: 64px;
   --toastify-toast-max-height: 800px;
   --toastify-toast-bd-radius: 6px;
+  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
   --toastify-font-family: sans-serif;
   --toastify-z-index: 9999;
   --toastify-text-color-light: #757575;
   --toastify-text-color-dark: #fff;
+
+  /* Used only for colored theme */
   --toastify-text-color-info: #fff;
   --toastify-text-color-success: #fff;
   --toastify-text-color-warning: #fff;
   --toastify-text-color-error: #fff;
+
   --toastify-spinner-color: #616161;
   --toastify-spinner-color-empty-area: #e0e0e0;
-  --toastify-color-progress-light: linear-gradient(
-    to right,
-    #4cd964,
-    #5ac8fa,
-    #007aff,
-    #34aadc,
-    #5856d6,
-    #ff2d55
-  );
+  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
   --toastify-color-progress-dark: #bb86fc;
   --toastify-color-progress-info: var(--toastify-color-info);
   --toastify-color-progress-success: var(--toastify-color-success);
   --toastify-color-progress-warning: var(--toastify-color-warning);
   --toastify-color-progress-error: var(--toastify-color-error);
+  /* used to control the opacity of the progress trail */
   --toastify-color-progress-bgo: 0.2;
 }
 
@@ -51,11 +52,13 @@
   z-index: var(--toastify-z-index);
   -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
   position: fixed;
-  padding: 4px;
-  width: var(--toastify-toast-width);
+  width: var(--toastify-container-width);
   box-sizing: border-box;
   color: #fff;
+  display: flex;
+  flex-direction: column;
 }
+
 .Toastify__toast-container--top-left {
   top: var(--toastify-toast-top);
   left: var(--toastify-toast-left);
@@ -64,10 +67,12 @@
   top: var(--toastify-toast-top);
   left: 50%;
   transform: translateX(-50%);
+  align-items: center;
 }
 .Toastify__toast-container--top-right {
   top: var(--toastify-toast-top);
   right: var(--toastify-toast-right);
+  align-items: end;
 }
 .Toastify__toast-container--bottom-left {
   bottom: var(--toastify-toast-bottom);
@@ -77,24 +82,51 @@
   bottom: var(--toastify-toast-bottom);
   left: 50%;
   transform: translateX(-50%);
+  align-items: center;
 }
 .Toastify__toast-container--bottom-right {
   bottom: var(--toastify-toast-bottom);
   right: var(--toastify-toast-right);
+  align-items: end;
+}
+
+.Toastify__toast {
+  --y: 0;
+  position: relative;
+  touch-action: none;
+  width: var(--toastify-toast-width);
+  min-height: var(--toastify-toast-min-height);
+  box-sizing: border-box;
+  margin-bottom: 1rem;
+  padding: var(--toastify-toast-padding);
+  border-radius: var(--toastify-toast-bd-radius);
+  box-shadow: var(--toastify-toast-shadow);
+  max-height: var(--toastify-toast-max-height);
+  font-family: var(--toastify-font-family);
+  /* webkit only issue #791 */
+  z-index: 0;
+  /* inner swag */
+  display: flex;
+  flex: 1 auto;
+  align-items: center;
+  word-break: break-word;
 }
 
-@media only screen and (max-width : 480px) {
+@media only screen and (max-width: 480px) {
   .Toastify__toast-container {
     width: 100vw;
-    padding: 0;
     left: env(safe-area-inset-left);
     margin: 0;
   }
-  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
+  .Toastify__toast-container--top-left,
+  .Toastify__toast-container--top-center,
+  .Toastify__toast-container--top-right {
     top: env(safe-area-inset-top);
     transform: translateX(0);
   }
-  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
+  .Toastify__toast-container--bottom-left,
+  .Toastify__toast-container--bottom-center,
+  .Toastify__toast-container--bottom-right {
     bottom: env(safe-area-inset-bottom);
     transform: translateX(0);
   }
@@ -102,67 +134,64 @@
     right: env(safe-area-inset-right);
     left: initial;
   }
+  .Toastify__toast {
+    --toastify-toast-width: 100%;
+    margin-bottom: 0;
+    border-radius: 0;
+  }
 }
-.Toastify__toast {
-  --y: 0;
-  position: relative;
-  -ms-touch-action: none;
-      touch-action: none;
-  min-height: var(--toastify-toast-min-height);
-  box-sizing: border-box;
-  margin-bottom: 1rem;
-  padding: 8px;
-  border-radius: var(--toastify-toast-bd-radius);
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-pack: justify;
-      justify-content: space-between;
-  max-height: var(--toastify-toast-max-height);
-  font-family: var(--toastify-font-family);
-  cursor: default;
-  direction: ltr;
-  /* webkit only issue #791 */
-  z-index: 0;
-  overflow: hidden;
+
+.Toastify__toast-container[data-stacked='true'] {
+  width: var(--toastify-toast-width);
 }
+
 .Toastify__toast--stacked {
   position: absolute;
   width: 100%;
   transform: translate3d(0, var(--y), 0) scale(var(--s));
   transition: transform 0.3s;
 }
-.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
+
+.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
+.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
   transition: opacity 0.1s;
 }
-.Toastify__toast--stacked[data-collapsed=false] {
+
+.Toastify__toast--stacked[data-collapsed='false'] {
   overflow: visible;
 }
-.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
+
+.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
   opacity: 0;
 }
+
 .Toastify__toast--stacked:after {
-  content: "";
+  content: '';
   position: absolute;
   left: 0;
   right: 0;
   height: calc(var(--g) * 1px);
   bottom: 100%;
 }
-.Toastify__toast--stacked[data-pos=top] {
+
+.Toastify__toast--stacked[data-pos='top'] {
   top: 0;
 }
-.Toastify__toast--stacked[data-pos=bot] {
+
+.Toastify__toast--stacked[data-pos='bot'] {
   bottom: 0;
 }
-.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
+
+.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
   transform-origin: top;
 }
-.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
+
+.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
   transform-origin: bottom;
 }
+
 .Toastify__toast--stacked:before {
-  content: "";
+  content: '';
   position: absolute;
   left: 0;
   right: 0;
@@ -171,34 +200,19 @@
   transform: scaleY(3);
   z-index: -1;
 }
+
 .Toastify__toast--rtl {
   direction: rtl;
 }
+
 .Toastify__toast--close-on-click {
   cursor: pointer;
 }
-.Toastify__toast-body {
-  margin: auto 0;
-  -ms-flex: 1 1 auto;
-      flex: 1 1 auto;
-  padding: 6px;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-      align-items: center;
-}
-.Toastify__toast-body > div:last-child {
-  word-break: break-word;
-  -ms-flex: 1;
-      flex: 1;
-}
+
 .Toastify__toast-icon {
-  -webkit-margin-end: 10px;
-          margin-inline-end: 10px;
-  width: 20px;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  display: -ms-flexbox;
+  margin-inline-end: 10px;
+  width: 22px;
+  flex-shrink: 0;
   display: flex;
 }
 
@@ -212,36 +226,36 @@
   animation-duration: 0.3s;
 }
 
-@media only screen and (max-width : 480px) {
-  .Toastify__toast {
-    margin-bottom: 0;
-    border-radius: 0;
-  }
-}
 .Toastify__toast-theme--dark {
   background: var(--toastify-color-dark);
   color: var(--toastify-text-color-dark);
 }
+
 .Toastify__toast-theme--light {
   background: var(--toastify-color-light);
   color: var(--toastify-text-color-light);
 }
+
 .Toastify__toast-theme--colored.Toastify__toast--default {
   background: var(--toastify-color-light);
   color: var(--toastify-text-color-light);
 }
+
 .Toastify__toast-theme--colored.Toastify__toast--info {
   color: var(--toastify-text-color-info);
   background: var(--toastify-color-info);
 }
+
 .Toastify__toast-theme--colored.Toastify__toast--success {
   color: var(--toastify-text-color-success);
   background: var(--toastify-color-success);
 }
+
 .Toastify__toast-theme--colored.Toastify__toast--warning {
   color: var(--toastify-text-color-warning);
   background: var(--toastify-color-warning);
 }
+
 .Toastify__toast-theme--colored.Toastify__toast--error {
   color: var(--toastify-text-color-error);
   background: var(--toastify-color-error);
@@ -250,27 +264,39 @@
 .Toastify__progress-bar-theme--light {
   background: var(--toastify-color-progress-light);
 }
+
 .Toastify__progress-bar-theme--dark {
   background: var(--toastify-color-progress-dark);
 }
+
 .Toastify__progress-bar--info {
   background: var(--toastify-color-progress-info);
 }
+
 .Toastify__progress-bar--success {
   background: var(--toastify-color-progress-success);
 }
+
 .Toastify__progress-bar--warning {
   background: var(--toastify-color-progress-warning);
 }
+
 .Toastify__progress-bar--error {
   background: var(--toastify-color-progress-error);
 }
-.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
+
+.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
+.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
+.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
+.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
   background: var(--toastify-color-transparent);
 }
 
 .Toastify__close-button {
   color: #fff;
+  position: absolute;
+  top: 6px;
+  right: 6px;
   background: transparent;
   outline: none;
   border: none;
@@ -278,20 +304,27 @@
   cursor: pointer;
   opacity: 0.7;
   transition: 0.3s ease;
-  -ms-flex-item-align: start;
-      align-self: flex-start;
   z-index: 1;
 }
+
+.Toastify__toast--rtl .Toastify__close-button {
+  left: 6px;
+  right: unset;
+}
+
 .Toastify__close-button--light {
   color: #000;
   opacity: 0.3;
 }
+
 .Toastify__close-button > svg {
   fill: currentColor;
   height: 16px;
   width: 14px;
 }
-.Toastify__close-button:hover, .Toastify__close-button:focus {
+
+.Toastify__close-button:hover,
+.Toastify__close-button:focus {
   opacity: 1;
 }
 
@@ -303,41 +336,48 @@
     transform: scaleX(0);
   }
 }
+
 .Toastify__progress-bar {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: var(--toastify-z-index);
+  z-index: 1;
   opacity: 0.7;
   transform-origin: left;
-  border-bottom-left-radius: var(--toastify-toast-bd-radius);
 }
+
 .Toastify__progress-bar--animated {
   animation: Toastify__trackProgress linear 1 forwards;
 }
+
 .Toastify__progress-bar--controlled {
   transition: transform 0.2s;
 }
+
 .Toastify__progress-bar--rtl {
   right: 0;
   left: initial;
   transform-origin: right;
   border-bottom-left-radius: initial;
-  border-bottom-right-radius: var(--toastify-toast-bd-radius);
 }
+
 .Toastify__progress-bar--wrp {
   position: absolute;
+  overflow: hidden;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 5px;
   border-bottom-left-radius: var(--toastify-toast-bd-radius);
+  border-bottom-right-radius: var(--toastify-toast-bd-radius);
 }
-.Toastify__progress-bar--wrp[data-hidden=true] {
+
+.Toastify__progress-bar--wrp[data-hidden='true'] {
   opacity: 0;
 }
+
 .Toastify__progress-bar--bg {
   opacity: var(--toastify-color-progress-bgo);
   width: 100%;
@@ -356,7 +396,11 @@
 }
 
 @keyframes Toastify__bounceInRight {
-  from, 60%, 75%, 90%, to {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
   from {
@@ -377,6 +421,7 @@
     transform: none;
   }
 }
+
 @keyframes Toastify__bounceOutRight {
   20% {
     opacity: 1;
@@ -387,8 +432,13 @@
     transform: translate3d(2000px, var(--y), 0);
   }
 }
+
 @keyframes Toastify__bounceInLeft {
-  from, 60%, 75%, 90%, to {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
   0% {
@@ -409,6 +459,7 @@
     transform: none;
   }
 }
+
 @keyframes Toastify__bounceOutLeft {
   20% {
     opacity: 1;
@@ -419,8 +470,13 @@
     transform: translate3d(-2000px, var(--y), 0);
   }
 }
+
 @keyframes Toastify__bounceInUp {
-  from, 60%, 75%, 90%, to {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
   from {
@@ -441,11 +497,13 @@
     transform: translate3d(0, 0, 0);
   }
 }
+
 @keyframes Toastify__bounceOutUp {
   20% {
     transform: translate3d(0, calc(var(--y) - 10px), 0);
   }
-  40%, 45% {
+  40%,
+  45% {
     opacity: 1;
     transform: translate3d(0, calc(var(--y) + 20px), 0);
   }
@@ -454,8 +512,13 @@
     transform: translate3d(0, -2000px, 0);
   }
 }
+
 @keyframes Toastify__bounceInDown {
-  from, 60%, 75%, 90%, to {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
   0% {
@@ -476,11 +539,13 @@
     transform: none;
   }
 }
+
 @keyframes Toastify__bounceOutDown {
   20% {
     transform: translate3d(0, calc(var(--y) - 10px), 0);
   }
-  40%, 45% {
+  40%,
+  45% {
     opacity: 1;
     transform: translate3d(0, calc(var(--y) + 20px), 0);
   }
@@ -489,28 +554,39 @@
     transform: translate3d(0, 2000px, 0);
   }
 }
-.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
+
+.Toastify__bounce-enter--top-left,
+.Toastify__bounce-enter--bottom-left {
   animation-name: Toastify__bounceInLeft;
 }
-.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
+
+.Toastify__bounce-enter--top-right,
+.Toastify__bounce-enter--bottom-right {
   animation-name: Toastify__bounceInRight;
 }
+
 .Toastify__bounce-enter--top-center {
   animation-name: Toastify__bounceInDown;
 }
+
 .Toastify__bounce-enter--bottom-center {
   animation-name: Toastify__bounceInUp;
 }
 
-.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
+.Toastify__bounce-exit--top-left,
+.Toastify__bounce-exit--bottom-left {
   animation-name: Toastify__bounceOutLeft;
 }
-.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
+
+.Toastify__bounce-exit--top-right,
+.Toastify__bounce-exit--bottom-right {
   animation-name: Toastify__bounceOutRight;
 }
+
 .Toastify__bounce-exit--top-center {
   animation-name: Toastify__bounceOutUp;
 }
+
 .Toastify__bounce-exit--bottom-center {
   animation-name: Toastify__bounceOutDown;
 }
@@ -524,6 +600,7 @@
     opacity: 1;
   }
 }
+
 @keyframes Toastify__zoomOut {
   from {
     opacity: 1;
@@ -536,6 +613,7 @@
     opacity: 0;
   }
 }
+
 .Toastify__zoom-enter {
   animation-name: Toastify__zoomIn;
 }
@@ -565,6 +643,7 @@
     transform: perspective(400px);
   }
 }
+
 @keyframes Toastify__flipOut {
   from {
     transform: translate3d(0, var(--y), 0) perspective(400px);
@@ -578,6 +657,7 @@
     opacity: 0;
   }
 }
+
 .Toastify__flip-enter {
   animation-name: Toastify__flipIn;
 }
@@ -595,6 +675,7 @@
     transform: translate3d(0, var(--y), 0);
   }
 }
+
 @keyframes Toastify__slideInLeft {
   from {
     transform: translate3d(-110%, 0, 0);
@@ -604,6 +685,7 @@
     transform: translate3d(0, var(--y), 0);
   }
 }
+
 @keyframes Toastify__slideInUp {
   from {
     transform: translate3d(0, 110%, 0);
@@ -613,6 +695,7 @@
     transform: translate3d(0, var(--y), 0);
   }
 }
+
 @keyframes Toastify__slideInDown {
   from {
     transform: translate3d(0, -110%, 0);
@@ -622,6 +705,7 @@
     transform: translate3d(0, var(--y), 0);
   }
 }
+
 @keyframes Toastify__slideOutRight {
   from {
     transform: translate3d(0, var(--y), 0);
@@ -631,6 +715,7 @@
     transform: translate3d(110%, var(--y), 0);
   }
 }
+
 @keyframes Toastify__slideOutLeft {
   from {
     transform: translate3d(0, var(--y), 0);
@@ -640,6 +725,7 @@
     transform: translate3d(-110%, var(--y), 0);
   }
 }
+
 @keyframes Toastify__slideOutDown {
   from {
     transform: translate3d(0, var(--y), 0);
@@ -649,6 +735,7 @@
     transform: translate3d(0, 500px, 0);
   }
 }
+
 @keyframes Toastify__slideOutUp {
   from {
     transform: translate3d(0, var(--y), 0);
@@ -658,34 +745,45 @@
     transform: translate3d(0, -500px, 0);
   }
 }
-.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
+
+.Toastify__slide-enter--top-left,
+.Toastify__slide-enter--bottom-left {
   animation-name: Toastify__slideInLeft;
 }
-.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
+
+.Toastify__slide-enter--top-right,
+.Toastify__slide-enter--bottom-right {
   animation-name: Toastify__slideInRight;
 }
+
 .Toastify__slide-enter--top-center {
   animation-name: Toastify__slideInDown;
 }
+
 .Toastify__slide-enter--bottom-center {
   animation-name: Toastify__slideInUp;
 }
 
-.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
+.Toastify__slide-exit--top-left,
+.Toastify__slide-exit--bottom-left {
   animation-name: Toastify__slideOutLeft;
   animation-timing-function: ease-in;
   animation-duration: 0.3s;
 }
-.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
+
+.Toastify__slide-exit--top-right,
+.Toastify__slide-exit--bottom-right {
   animation-name: Toastify__slideOutRight;
   animation-timing-function: ease-in;
   animation-duration: 0.3s;
 }
+
 .Toastify__slide-exit--top-center {
   animation-name: Toastify__slideOutUp;
   animation-timing-function: ease-in;
   animation-duration: 0.3s;
 }
+
 .Toastify__slide-exit--bottom-center {
   animation-name: Toastify__slideOutDown;
   animation-timing-function: ease-in;
@@ -700,5 +798,3 @@
     transform: rotate(360deg);
   }
 }
-
-/*# sourceMappingURL=ReactToastify.css.map */