v4web-components/dist/collection/components/dialogs/lab-ds-toast/lab-ds-toast.css

Stencil Component Starter

.v4-toast {
  position: absolute;
  top: 3rem;
  right: 1rem;
}

.v4-toast-container {
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  border-top-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-left-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-right-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-bottom-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-style: solid;
  box-shadow: var(--lab-ds-semantic-selectable-shadow-m);
}

.toast-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--lab-ds-semantic-selectable-space-padding-s);
}

.small .v4-toast-progress-small {
  height: 0.25rem;
  width: 0%;
  margin-bottom: -1px;

  border-radius: 0 var(--lab-ds-semantic-selectable-border-radius-xs) var(--lab-ds-semantic-selectable-border-radius-xs) var(--lab-ds-semantic-selectable-border-radius-xs);
  animation: progress-small 10s normal 10ms;
}

@keyframes progress-small {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.small .toast-icon-message {
  display: flex;
  align-items: center;

  gap: var(--lab-ds-semantic-selectable-space-gap-s);
}

.toast-title {
  display: flex;
  gap: var(--lab-ds-semantic-selectable-space-gap-s);
}

.toast-title .title {
  font: var(--lab-ds-semantic-typography-heading-h6);
}

.toast-message {
  font: var(--lab-ds-semantic-typography-body-none-decoration-p3-regular);
}

.toast-close {
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.close-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  border-radius: var(--lab-ds-semantic-selectable-border-radius-pill);
  padding: var(--lab-ds-semantic-selectable-space-padding-xxs);
  background-color: var(--lab-ds-semantic-selectable-color-bg-pure);
  box-shadow: var(--lab-ds-semantic-selectable-shadow-m);

  right: -0.5rem;
  top: -0.5rem;
}

.medium .v4-toast-container {
  display: flex;
  flex-direction: row;
  height: 9rem;

  border-top-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-left-width: var(--lab-ds-semantic-selectable-border-width-l);
  border-right-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-bottom-width: var(--lab-ds-semantic-selectable-border-width-s);
}

.medium .toast-body {
  gap: var(--lab-ds-semantic-selectable-space-gap-m);
  flex-direction: column;
  align-items: end;
}

.medium .toast-icon-message {
  display: flex;
  flex-direction: column;
  gap: var(--lab-ds-semantic-selectable-space-gap-m);
}

.medium .toast-message {
  padding-left: var(--lab-ds-semantic-selectable-space-padding-xl);
  padding-right: var(--lab-ds-semantic-selectable-space-padding-l);
}

.success .v4-toast-container {
  border-color: var(--lab-ds-semantic-selectable-color-border-dark-success);
  background-color: var(--lab-ds-semantic-selectable-color-bg-light-success);
  color: var(--lab-ds-semantic-selectable-color-bg-dark-success);
}

.error .v4-toast-container {
  border-color: var(--lab-ds-semantic-selectable-color-border-dark-error);
  background-color: var(--lab-ds-semantic-selectable-color-bg-light-error);
  color: var(--lab-ds-semantic-selectable-color-bg-dark-error);
}

.warning .v4-toast-container {
  border-color: var(--lab-ds-semantic-selectable-color-border-dark-warning);
  background-color: var(--lab-ds-semantic-selectable-color-bg-light-warning);
  color: var(--lab-ds-semantic-selectable-color-bg-dark-warning);
}

.success.small .v4-toast-progress-small {
  background-color: var(--lab-ds-semantic-selectable-color-border-dark-success);
}

.error.small .v4-toast-progress-small {
  background-color: var(--lab-ds-semantic-selectable-color-border-dark-error);
}

.warning.small .v4-toast-progress-small {
  background-color: var(--lab-ds-semantic-selectable-color-border-dark-warning);
}