| .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 { | |
| display: inline-flex; | |
| align-items: center; | |
| 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; | |
| } | |
| } |