|
18 | 18 | padding: get-var('layout-spacing', $unit: 1);
|
19 | 19 | width: 100%;
|
20 | 20 |
|
21 |
| - // TODO: Add accent toast, info toast. |
| 21 | + &.toast-accent { |
| 22 | + @include toast-variant('accent-color'); |
| 23 | + } |
| 24 | + |
| 25 | + &.toast-dark { |
| 26 | + @include toast-variant('dark-color'); |
| 27 | + } |
| 28 | + |
| 29 | + &.toast-disabled { |
| 30 | + @include toast-variant('disabled-color'); |
| 31 | + color: color('disabled-color', $lightness: -10%); |
| 32 | + } |
| 33 | + |
| 34 | + &.toast-error { |
| 35 | + // @include toast-variant($error-color); // old spectre.css |
| 36 | + @include toast-variant('error-color'); |
| 37 | + } |
| 38 | + |
| 39 | + &.toast-gray { |
| 40 | + @include toast-variant('gray-color'); |
| 41 | + } |
| 42 | + |
| 43 | + &.toast-gray-dark { |
| 44 | + @include toast-variant('gray-color-dark'); |
| 45 | + } |
| 46 | + |
| 47 | + &.toast-gray-light { |
| 48 | + @include toast-variant('gray-color-light'); |
| 49 | + color: color('gray-color-dark'); |
| 50 | + } |
| 51 | + |
| 52 | + &.toast-info { |
| 53 | + @include toast-variant('info-color'); |
| 54 | + color: color('info-color', $lightness: -60%); |
| 55 | + } |
| 56 | + |
| 57 | + &.toast-light { |
| 58 | + @include toast-variant('light-color'); |
| 59 | + color: color('body-font-color'); |
| 60 | + } |
| 61 | + |
22 | 62 | &.toast-primary {
|
23 | 63 | // @include toast-variant($primary-color); // old spectre.css
|
24 | 64 | @include toast-variant('primary-color');
|
25 | 65 | }
|
26 | 66 |
|
| 67 | + &.toast-secondary { |
| 68 | + @include toast-variant('secondary-color'); |
| 69 | + color: color('primary-color'); |
| 70 | + } |
| 71 | + |
27 | 72 | &.toast-success {
|
28 | 73 | // @include toast-variant($success-color); // old spectre.css
|
29 | 74 | @include toast-variant('success-color');
|
|
34 | 79 | @include toast-variant('warning-color');
|
35 | 80 | }
|
36 | 81 |
|
37 |
| - &.toast-error { |
38 |
| - // @include toast-variant($error-color); // old spectre.css |
39 |
| - @include toast-variant('error-color'); |
40 |
| - } |
41 |
| - |
42 | 82 | a {
|
43 | 83 | // color: $light-color; // old spectre.css
|
44 | 84 | color: color('light-color');
|
|
0 commit comments