move toast over to plain css

shopware · Sep 27, 2024 · cd251b1 · cd251b1
1 parent 1ae9378
commit cd251b1
Showing 1 changed file with 124 additions and 97 deletions.
diff --git a/...es/component-library/src/components/feedback-indicator/mt-toast/mt-toast-notification.vue b/...es/component-library/src/components/feedback-indicator/mt-toast/mt-toast-notification.vue
@@ -232,7 +232,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .mt-toast-notification {
   position: absolute;
   bottom: 0;
@@ -255,127 +255,154 @@ onBeforeUnmount(() => {
 
   &:focus-visible {
     outline: 2px solid var(--color-border-brand-selected);
-    border: 2px solid $color-white;
+    border: 2px solid #fff;
   }
+}
 
-  &__content {
-    height: 100%;
-    display: flex;
-    align-items: center;
-
-    &-left {
-      display: flex;
-      flex: 1;
-      justify-content: flex-start;
-      margin-left: 16px;
-      align-items: center;
-    }
+.mt-toast-notification__content {
+  height: 100%;
+  display: flex;
+  align-items: center;
 
-    &-right {
-      display: flex;
-      justify-content: flex-end;
-      margin-right: 16px;
-      align-items: center;
-    }
+  &.mt-icon > svg {
+    fill: black;
+    width: 20px !important;
+    height: 20px !important;
+  }
+}
 
-    &.mt-icon > svg {
-      fill: black;
-      width: 20px !important;
-      height: 20px !important;
-    }
+.mt-toast-notification__content-left {
+  display: flex;
+  flex: 1;
+  justify-content: flex-start;
+  margin-left: 16px;
+  align-items: center;
+}
+
+.mt-toast-notification__content-right {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 16px;
+  align-items: center;
+}
+
+.mt-toast-notification__timer {
+  height: 3px;
+  width: 100%;
+  border-radius: 0 0 4px 4px;
+  background-color: #fff;
+}
+
+.mt-toast-notification__timer-loader {
+  top: 0;
+  left: 100%;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  transform-origin: 0% 0%;
+  animation: shrink 10s forwards linear 0.5s;
+}
+
+@keyframes shrink {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
   }
+}
 
-  &--positive {
-    border: 1px solid $color-emerald-500;
-    background-color: $color-emerald-500;
+.mt-toast-notification__message {
+  max-width: 200px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
 
-    .mt-toast-notification__close-action {
-      border-left: 1px solid $color-emerald-900;
-    }
+.mt-toast-notification__message-space {
+  padding-left: 8px;
+}
 
-    .mt-toast-notification__timer {
-      background-color: $color-emerald-900;
-    }
+.mt-toast-notification__content {
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  &.mt-icon > svg {
+    fill: #000;
+    width: 20px !important;
+    height: 20px !important;
   }
+}
 
-  &--critical {
-    border: 1px solid $color-crimson-500;
-    background-color: $color-crimson-500;
+.mt-toast-notification__content-left {
+  display: flex;
+  flex: 1;
+  justify-content: flex-start;
+  margin-left: 16px;
+  align-items: center;
+}
 
-    .mt-toast-notification__close-action {
-      border-left: 1px solid $color-crimson-900;
-    }
+.mt-toast-notification__content-right {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 16px;
+  align-items: center;
+}
 
-    .mt-toast-notification__timer {
-      background-color: $color-crimson-900;
-    }
+.mt-toast-notification--positive {
+  border: 1px solid #37d046;
+  background-color: #37d046;
+
+  & .mt-toast-notification__close-action {
+    border-left: 1px solid #16b320;
   }
 
-  &--informal {
-    border: 1px solid $color-darkgray-700;
-    background-color: $color-darkgray-700;
+  & .mt-toast-notification__timer {
+    background-color: #16b320;
+  }
+}
 
-    .mt-toast-notification__close-action {
-      border-left: 1px solid $color-darkgray-900;
-    }
+.mt-toast-notification__close-action {
+  margin-left: auto;
+  height: 100%;
+  display: flex;
+  padding: 12px;
+  justify-content: flex-end;
+  align-items: center;
+  cursor: pointer;
+  color: #fff;
+  transition: color 0.2s ease;
 
-    .mt-toast-notification__timer {
-      background-color: $color-darkgray-900;
-    }
+  &:hover {
+    color: #e0e6eb;
+    box-shadow: 0 0 4px 0 rgba(24, 158, 255, 0.3);
   }
+}
 
-  &__message {
-    max-width: 200px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+.mt-toast-notification--critical {
+  border: 1px solid #de294c;
+  background-color: #de294c;
 
-    &-space {
-      padding-left: 8px;
-    }
+  & .mt-toast-notification__close-action {
+    border-left: 1px solid #c80f24;
   }
 
-  &__close-action {
-    margin-left: auto;
-    height: 100%;
-    display: flex;
-    padding: 12px;
-    justify-content: flex-end;
-    align-items: center;
-    cursor: pointer;
-    color: $color-white;
-    transition: color 0.2s ease;
-
-    &:hover {
-      color: $color-gray-200;
-      box-shadow: 0 0 4px 0 rgba(24, 158, 255, 0.3);
-    }
+  & .mt-toast-notification__timer {
+    background-color: #c80f24;
   }
+}
 
-  &__timer {
-    height: 3px;
-    width: 100%;
-    border-radius: 0 0 4px 4px;
-    background-color: $color-white;
-
-    &-loader {
-      top: 0;
-      left: 100%;
-      width: 100%;
-      height: 100%;
-      background-color: white;
-      transform-origin: 0% 0%;
-      animation: shrink 10s forwards linear 0.5s;
-    }
+.mt-toast-notification--informal {
+  border: 1px solid #1f262e;
+  background-color: #1f262e;
+
+  & .mt-toast-notification__close-action {
+    border-left: 1px solid #0a0d0f;
   }
 
-  @keyframes shrink {
-    from {
-      transform: scaleX(1);
-    }
-    to {
-      transform: scaleX(0);
-    }
+  & .mt-toast-notification__timer {
+    background-color: #0a0d0f;
   }
 }
 </style>