| @@ -1,10 +1,17 @@ | ||
| 1 | -@use '../common/theme'; | |
| 2 | -@use 'sass:map'; | |
| 3 | 1 | @use 'sass:list'; |
| 4 | 2 | |
| 5 | -@mixin notices { | |
| 6 | - .notice { | |
| 3 | +$notices: ( | |
| 4 | + success: #d3e9d3 #377a37, | |
| 5 | + warning: #f2ebc3 #b0730a, | |
| 6 | + error: #f8d7da #721c24, | |
| 7 | + info: #d2e6f4 #2b71a3, | |
| 8 | + neutral: #e2e5e5 #6c7e7e, | |
| 9 | + special: #dfc5ef #6e249c | |
| 10 | +); | |
| 11 | + | |
| 12 | +@mixin notices($class: 'notice') { | |
| 13 | + .#{$class} { | |
| 7 | 14 | border: 0; |
| 8 | 15 | border-radius: 5px; |
| 9 | 16 | display: flex; |
| 10 | 17 | align-items: center; |
| @@ -11,9 +18,9 @@ | ||
| 11 | 18 | padding: 6px 10px; |
| 12 | 19 | gap: 8px; |
| 13 | 20 | margin: 0; |
| 14 | 21 | |
| 15 | - .notice-dismiss { | |
| 22 | + .#{$class}-dismiss { | |
| 16 | 23 | position: unset; |
| 17 | 24 | margin-inline-start: auto; |
| 18 | 25 | padding: 0; |
| 19 | 26 | |
| @@ -27,16 +34,16 @@ | ||
| 27 | 34 | padding-inline-end: 10px; |
| 28 | 35 | } |
| 29 | 36 | } |
| 30 | 37 | |
| 31 | - @each $name, $colors in theme.$notices { | |
| 32 | - .notice-#{$name} { | |
| 38 | + @each $name, $colors in $notices { | |
| 39 | + .#{$class}-#{$name} { | |
| 33 | 40 | color: list.nth($colors, 2); |
| 34 | 41 | background-color: list.nth($colors, 1); |
| 35 | 42 | } |
| 36 | 43 | } |
| 37 | 44 | |
| 38 | - .notice-success::before { | |
| 45 | + .#{$class}-success::before { | |
| 39 | 46 | content: '✓'; |
| 40 | 47 | font-weight: bold; |
| 41 | 48 | font-size: 16px; |
| 42 | 49 | } |
