.alert { | |
display: flex; | |
padding: $spacer; | |
border-width: 0 0 0 3px; | |
color: $gray-800; | |
margin-bottom: $spacer; | |
.close { | |
font-weight: 300; | |
opacity: 1; | |
} | |
.alert-icon { | |
flex: 0 0 20px; | |
margin-right: $spacer; | |
margin-bottom: $spacer; | |
@include media-breakpoint-up(sm) { | |
margin-bottom: 0; | |
} | |
} | |
.alert-content { | |
flex: 1 1 auto; | |
} | |
.alert-title { | |
margin-bottom: $spacer / 2; | |
} | |
.alert-msg { | |
p + p { | |
margin-bottom: $spacer; | |
} | |
p:last-of-type { | |
margin-bottom: 0; | |
} | |
} | |
&.alert-info { | |
border-left-color: $info; | |
background-color: $info-light; | |
fill: $info; | |
} | |
&.alert-danger { | |
border-left-color: $danger; | |
background-color: $danger-light; | |
fill: $danger; | |
} | |
&.alert-warning { | |
border-left-color: $warning; | |
background-color: $warning-light; | |
fill: $warning; | |
} | |
} |