1.alert { 2 display: flex; 3 padding: $spacer; 4 border-width: 0 0 0 3px; 5 color: $gray-800; 6 margin-bottom: $spacer; 7 8 &.small { 9 padding: $spacer / 2; 10 font-size: 1rem; 11 } 12 13 .close { 14 font-weight: 300; 15 opacity: 1; 16 } 17 18 .alert-icon { 19 display: inline-flex; 20 align-items: center; 21 margin-right: $spacer; 22 margin-bottom: $spacer; 23 24 @include media-breakpoint-up(sm) { 25 margin-bottom: 0; 26 } 27 } 28 29 .alert-content { 30 flex: 1 1 auto; 31 } 32 33 .alert-title { 34 margin-bottom: $spacer / 2; 35 } 36 37 .alert-msg { 38 p + p { 39 margin-bottom: $spacer; 40 } 41 42 p:last-of-type { 43 margin-bottom: 0; 44 } 45 } 46 47 &.alert-info { 48 border-left-color: $info; 49 background-color: $info-light; 50 fill: $info; 51 } 52 53 &.alert-danger { 54 border-left-color: $danger; 55 background-color: $danger-light; 56 fill: $danger; 57 } 58 59 &.alert-warning { 60 border-left-color: $warning; 61 background-color: $warning-light; 62 fill: $warning; 63 } 64 }