| @@ -1,9 +1,15 @@ | ||
| 1 | 1 | .my_account_subscrpt .order-status { |
| 2 | 2 | min-width: 100px; |
| 3 | 3 | } |
| 4 | 4 | |
| 5 | -span[class*="subscrpt-"] { | |
| 5 | +/* | |
| 6 | + * Legacy status badge. Dedicated `subscrpt-legacy-status` base + | |
| 7 | + * `subscrpt-legacy-status--{name}` colour modifiers. Self-contained class names | |
| 8 | + * (no broad `[class*="subscrpt-"]` attribute selector) so badges never collide | |
| 9 | + * with BEM component spans that merely share the `subscrpt-` prefix. | |
| 10 | + */ | |
| 11 | +span.subscrpt-legacy-status { | |
| 6 | 12 | background: #bfdbfe; |
| 7 | 13 | color: #1e40af; |
| 8 | 14 | font-weight: 600; |
| 9 | 15 | font-size: 12px; |
| @@ -11,35 +17,40 @@ | ||
| 11 | 17 | padding: 8px 10px; |
| 12 | 18 | border-radius: 5px; |
| 13 | 19 | } |
| 14 | 20 | |
| 15 | -span.subscrpt-pending { | |
| 21 | +span.subscrpt-legacy-status--pending { | |
| 16 | 22 | background: #dbeafe; |
| 17 | 23 | color: #1e40af; |
| 18 | 24 | } |
| 19 | 25 | |
| 20 | -span.subscrpt-active { | |
| 26 | +span.subscrpt-legacy-status--active { | |
| 21 | 27 | background: #bbf7d0; |
| 22 | 28 | color: #166534; |
| 23 | 29 | } |
| 24 | 30 | |
| 25 | -span.subscrpt-expired { | |
| 31 | +span.subscrpt-legacy-status--expired { | |
| 26 | 32 | background: #fecaca; |
| 27 | 33 | color: #991b1b; |
| 28 | 34 | } |
| 29 | 35 | |
| 30 | -span.subscrpt-cancelled { | |
| 36 | +span.subscrpt-legacy-status--completed { | |
| 37 | + background: #e0e7ff; | |
| 38 | + color: #3730a3; | |
| 39 | +} | |
| 40 | + | |
| 41 | +span.subscrpt-legacy-status--cancelled { | |
| 31 | 42 | background: #e2e8f0; |
| 32 | 43 | color: #475569; |
| 33 | 44 | } |
| 34 | 45 | |
| 35 | -span.subscrpt-pe_cancelled, | |
| 36 | -span.subscrpt-on-hold { | |
| 46 | +span.subscrpt-legacy-status--pe_cancelled, | |
| 47 | +span.subscrpt-legacy-status--on-hold { | |
| 37 | 48 | background: #ffedd5; |
| 38 | 49 | color: #b45309; |
| 39 | 50 | } |
| 40 | 51 | |
| 41 | -span.subscrpt-draft { | |
| 52 | +span.subscrpt-legacy-status--draft { | |
| 42 | 53 | background: #f3f3f3; |
| 43 | 54 | color: #888; |
| 44 | 55 | } |
| 45 | 56 | |
