2016-03-31 17:24:48 +03:00
|
|
|
// Variables
|
|
|
|
|
// ============================================================================
|
|
|
|
|
|
|
|
|
|
$alert-background : color(white)
|
2016-09-30 21:29:03 +03:00
|
|
|
$alert-border : 2px solid
|
2016-03-31 17:24:48 +03:00
|
|
|
$alert-close-size : 2.25rem
|
|
|
|
|
$alert-color : color($theme)
|
|
|
|
|
$alert-padding : 1.5rem 2rem
|
2016-09-30 21:29:03 +03:00
|
|
|
$alert-shadow : 0 0 10px rgba(color(black), 0.25)
|
2016-03-31 17:24:48 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
// Style
|
|
|
|
|
// ============================================================================
|
|
|
|
|
|
|
|
|
|
// Alert boxes
|
|
|
|
|
// .alert - alert container
|
|
|
|
|
// .alert-close - icon to close alert
|
|
|
|
|
|
|
|
|
|
.alert
|
|
|
|
|
@include position(fixed, bottom, left, 0, 0)
|
|
|
|
|
align-items: center
|
|
|
|
|
background: $alert-background
|
|
|
|
|
border-top: $alert-border
|
2016-09-30 21:29:03 +03:00
|
|
|
box-shadow: $alert-shadow
|
2016-03-31 17:24:48 +03:00
|
|
|
color: $alert-color
|
|
|
|
|
display: flex
|
|
|
|
|
justify-content: space-between
|
|
|
|
|
padding: $alert-padding
|
|
|
|
|
width: 100%
|
|
|
|
|
z-index: 200
|
|
|
|
|
|
|
|
|
|
.alert-close
|
|
|
|
|
@include icon(close, currentColor, 0, $alert-close-size)
|
|
|
|
|
background: transparent
|
|
|
|
|
color: $alert-color
|
