maille/components/alert/style.css

Component library for MithrilJS

/* Colors
 * See: https://flatuicolors.com/palette/defo
 *
 * Primary (Peter River) => #3498db
 * Success (Emerald) => #2ecc71
 * Warning (Carrot) => #e67e22
 * Error (Alizarin) => #e74c3c
 * Info (Asbestos) => #7f8c8d
 *
 */

.maille.maille-alert {
  box-sizing: border-box;
  margin: var(--maille-alert-margin, .25em);
}

.maille.maille-alert.rounded { border-radius: .25em; }

.maille.maille-alert > .maille-alert-header { padding: .5em; }
.maille.maille-alert > .maille-alert-header > .maille-alert-title { font-size: 1.5em; }
.maille.maille-alert > .maille-alert-header > .maille-alert-description { font-size: 1em; }

.maille.maille-alert > .maille-alert-body { padding: .5em; }
.maille.maille-alert > .maille-alert-footer { padding: .5em; }

.maille.maille-alert {
  border: solid 1px black;
}

.maille.maille-alert > .maille-alert-header {
  position: relative;
  background-color: black;
  color: white;
}

.maille.maille-alert.primary > .maille-alert-header {
  background-color: var(--maille-alert-primary-color-bg, #3498db);
  color: white;
}

.maille.maille-alert > .maille-alert-header > .maille-alert-close-container {
  position: absolute;
  top: .5em;
  right: .5em;
  cursor: pointer;
}

.maille.maille-alert.primary {
  border: solid 1px var(--maille-alert-primary-color-bg, #3498db);
}

.maille.maille-alert.success > .maille-alert-header {
  background-color: var(--maille-alert-success-color-bg, #2ecc71);
  color: var(--maille-alert-success-color-fg, white);
}

.maille.maille-alert.success {
  border-color: var(--maille-alert-success-color-bg, #2ecc71);
}

.maille.maille-alert.error > .maille-alert-header {
  background-color: var(--maille-alert-error-color-bg, #e74c3c);
  color: var(--maille-alert-error-color-fg, white);
}

.maille.maille-alert.error {
  border-color: var(--maille-alert-error-color-bg, #e74c3c);
}

.maille.maille-alert.warning > .maille-alert-header {
  background-color: var(--maille-alert-warning-color-bg, #e67e22);
  color: var(--maille-alert-warning-color-fg, white);
}

.maille.maille-alert.warning {
  border-color: var(--maille-alert-warning-color-bg, #e67e22);
}

.maille.maille-alert.info > .maille-alert-header {
  background-color: var(--maille-alert-info-color-bg, #7f8c8d);
  color: var(--maille-alert-info-color-fg, white);
}

.maille.maille-alert.info {
  border-color: var(--maille-alert-info-color-bg, #7f8c8d);
}