1 2.alert { 3 display: flex; 4 padding: $spacer; 5 border-width: 0 0 0 3px; // keep physical width for browsers; color uses logical start 6 color: $gray-800; 7 margin-bottom: $spacer; 8 9 &.small { 10 padding: calc($spacer / 2); 11 font-size: 1rem; 12 } 13 14 .close { 15 font-weight: 300; 16 opacity: 1; 17 } 18} 19 20// Bootstrap 5 alert structure has deeper nesting - use descendant selectors 21.alert .alert-body{ 22 display: inline-flex; 23 flex-direction: row; 24} 25 26.alert .alert-icon { 27 display: inline-flex; 28 align-items: flex-start; 29 margin-inline-end: $spacer; 30 margin-bottom: $spacer; 31 32 @include media-breakpoint-up(sm) { 33 margin-bottom: 0; 34 } 35} 36 37.alert .alert-content { 38 flex: 1 1 auto; 39} 40 41.alert .alert-title { 42 margin-bottom: calc($spacer / 2); 43} 44 45.alert .alert-msg { 46 p + p { 47 margin-bottom: $spacer; 48 } 49 50 p:last-of-type { 51 margin-bottom: 0; 52 } 53} 54 55// Alert variant styles 56.alert { 57 58 &.alert-info { 59 border-inline-start-color: theme-color("info"); 60 background-color: theme-color-light("info"); 61 fill: theme-color("info"); 62 } 63 64 &.alert-success { 65 border-inline-start-color: theme-color("success"); 66 background-color: theme-color-light("success"); 67 fill: theme-color("success"); 68 } 69 70 &.alert-danger { 71 border-inline-start-color: theme-color("danger"); 72 background-color: theme-color-light("danger"); 73 fill: theme-color("danger"); 74 } 75 76 &.alert-warning { 77 border-inline-start-color: theme-color("warning"); 78 background-color: theme-color-light("warning"); 79 fill: theme-color("warning"); 80 } 81 }