storybookdesignpack/css/src/components/toast.css

React components library project for censa Design System

/* toast */

.Toast {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  word-break: break-word;
  width: 360px;
  border-radius: var(--spacing-m);
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-l);
  padding-top: var(--spacing-l);
  padding-bottom: var(--spacing-l);
}

.Toast--withMessage {
  padding-bottom: var(--spacing-2);
}

.Toast--info {
  background-color: var(--primary);
}

.Toast--alert {
  background-color: var(--alert);
}

.Toast--success {
  background-color: var(--success);
}

.Toast--warning {
  background-color: var(--warning);
}

.Toast--warning {
  color: var(--text);

}

.Toast-icon {
  line-height: var(--font-height-m);
}

.Toast-icon--left {
  margin-right: var(--spacing-2);
}

.Toast-icon--right {
  cursor: pointer;
  margin-left: var(--spacing-l);
  border-radius: 50%;
  display: flex;
  align-items: center;
  padding-right: var(--spacing-m);
  padding-left: var(--spacing-m);
  height: var(--spacing-xl);
  box-sizing: initial;
}

.Toast-icon--info,
.Toast-icon--success,
.Toast-icon--alert,
.Toast-icon--default {
  color: var(--text);
}

.Toast-icon--warning {
  color: var(--warning-darker);
}

.Toast-close-icon--warning:focus,
.Toast-close-icon--warning:focus-visible {
  outline: none;
  box-shadow: var(--shadow-spread) color-mod(var(--warning-dark) a(0.16));
}

.Toast-close-icon--warning:hover,
.Toast-close-icon--warning:active {
  background: var(--warning-dark);
}

.Toast-close-icon--success:focus,
.Toast-close-icon--success:focus-visible {
  outline: none;
  box-shadow: var(--shadow-spread) color-mod(var(--success-dark) a(0.16));
}

.Toast-close-icon--success:hover,
.Toast-close-icon--success:active {
  background: var(--success-dark);
}

.Toast-close-icon--info:focus,
.Toast-close-icon--info:focus-visible {
  outline: none;
  box-shadow: var(--shadow-spread) color-mod(var(--primary-dark) a(0.16));
}

.Toast-close-icon--info:hover,
.Toast-close-icon--info:active {
  background: var(--primary-dark);
}

.Toast-close-icon--alert:focus,
.Toast-close-icon--alert:focus-visible {
  outline: none;
  box-shadow: var(--shadow-spread) color-mod(var(--alert-dark) a(0.16));
}

.Toast-close-icon--alert:hover,
.Toast-close-icon--alert:active {
  background: var(--alert-dark);
}

.Toast-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.Toast-title {
  display: flex;
}

.Toast-heading {
  flex-grow: 1;
}

.Toast-text {
  padding-top: var(--spacing);
}

.Toast-text--warning,
.Toast-heading--warning {
  color: var(--warning-darker) !important;
}

.Toast-actions {
  display: flex;
  padding-top: var(--spacing-l);
}

.Toast-actionButton {
  color: var(--text-white);
  border-radius: var(--spacing-m);
  margin-right: var(--spacing);
}

.Toast-actionButton:last-child {
  margin-right: 0;
}

.Toast-actionButton--default {
  background: var(--inverse-light);
}

.Toast-actionButton--default:hover,
.Toast-actionButton--default:active {
  background: var(--inverse);
}

.Toast-actionButton--default:focus {
  box-shadow: var(--shadow-spread) color-mod(var(--inverse-lighter) a(0.16));
}

.Toast-actionButton--info {
  background: var(--primary-dark);
}

.Toast-actionButton--info:hover,
.Toast-actionButton--info:active {
  background: var(--primary-darker);
}

.Toast-actionButton--info:focus {
  box-shadow: var(--shadow-spread) color-mod(var(--primary-dark) a(0.16));
}

.Toast-actionButton--success {
  background: var(--success-dark);
}

.Toast-actionButton--success:hover,
.Toast-actionButton--success:active {
  background: var(--success-darker);
}

.Toast-actionButton--success:focus {
  box-shadow: var(--shadow-spread) color-mod(var(--success-dark) a(0.16));
}

.Toast-actionButton--alert {
  background: var(--alert-dark);
}

.Toast-actionButton--alert:hover,
.Toast-actionButton--alert:active {
  background: var(--alert-darker);
}

.Toast-actionButton--alert:focus {
  box-shadow: var(--shadow-spread) var(--alert-shadow);
}

.Toast-actionButton--warning {
  background: var(--warning-dark);
}

.Toast-actionButton--warning:hover,
.Toast-actionButton--warning:active {
  background: var(--warning-darker);
}

.Toast-actionButton--warning:focus {
  box-shadow: var(--shadow-spread) var(--warning-shadow);
}