colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
69 lines (59 loc) • 2.07 kB
text/stylus
// Alerts
//
// Default styles for alerts.
//
// Markup: alerts.twig
//
// .alert-info - info alert
// .alert-success - success alert
// .alert-warning - warning alert
// .alert-error - error alert
//
// Styleguide: Elements.Alerts
/:root
--alert-color: var(--color-fade)
--alert-text-color: var(--color-base)
.alert
margin 0
padding 1em
border-radius .3em
background-color var(--alert-color)
color var(--alert-text-color)
a
text-decoration underline
&:hover
text-decoration none
&-info
&-success
&-warning
&-error
a
color currentColor
&-info
// TODO : replace when we drop support of IE
// --alert-color: s('hsl(var(--color-info-h), 60%, 90%)')
// --alert-text-color: var(--color-info)
// IE support for colors : replace when we drop support of IE
background-color s('hsl(var(--color-info-h), 60%, 90%)')
color var(--color-info)
&-success
// TODO : replace when we drop support of IE
// --alert-color: s('hsl(var(--color-success-h), 60%, 90%)')
// --alert-text-color: var(--color-success)
// IE support for colors : replace when we drop support of IE
background-color s('hsl(var(--color-success-h), 60%, 90%)')
color var(--color-success)
&-warning
// TODO : replace when we drop support of IE
// --alert-color: s('hsl(var(--color-warning-h), 60%, 90%)')
// --alert-text-color: var(--color-warning)
// IE support for colors : replace when we drop support of IE
background-color s('hsl(var(--color-warning-h), 60%, 90%)')
color var(--color-warning)
&-error
// TODO : replace when we drop support of IE
// --alert-color: s('hsl(var(--color-error-h), 60%, 90%)')
// --alert-text-color: var(--color-error)
// IE support for colors : replace when we drop support of IE
background-color s('hsl(var(--color-error-h), 60%, 90%)')
color var(--color-error)