maille
Version:
Component library for MithrilJS
87 lines (69 loc) • 2.38 kB
CSS
/* 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);
}