← All changes
|
src/Views/Components/ListTable/TableCell/TableCell.module.scss
+98
-6
2.30.0
→
4.16.9
View file →
| @@ -1,13 +1,12 @@ | ||
| 1 | 1 | .tableCell { |
| 2 | + color: var(--givewp-neutral-700); | |
| 3 | + font-size: 1rem; | |
| 4 | + font-weight: 500; | |
| 5 | + line-height: 1.5; | |
| 6 | + padding: var(--givewp-spacing-6) var(--givewp-spacing-3) calc(var(--givewp-spacing-6) + var(--givewp-spacing-5)); | |
| 2 | 7 | position: relative; |
| 3 | - padding-block-start: 1em; | |
| 4 | - padding-block-end: 2.5em; | |
| 5 | - padding-inline: 1em; | |
| 6 | 8 | vertical-align: middle; |
| 7 | - font-size: 0.875em; | |
| 8 | - font-weight: 600; | |
| 9 | - color: #333; | |
| 10 | 9 | |
| 11 | 10 | & a { |
| 12 | 11 | text-decoration: none; |
| 13 | 12 | |
| @@ -14,8 +13,101 @@ | ||
| 14 | 13 | &:focus, &:hover, &:active { |
| 15 | 14 | text-decoration: underline; |
| 16 | 15 | transition: all 0.05s ease-in-out; |
| 17 | 16 | } |
| 17 | + } | |
| 18 | + | |
| 19 | + &:first-child { | |
| 20 | + padding-inline-start: var(--givewp-spacing-4); | |
| 21 | + } | |
| 22 | + | |
| 23 | + &:last-child { | |
| 24 | + padding-inline-end: var(--givewp-spacing-4); | |
| 25 | + } | |
| 26 | + | |
| 27 | + input[type="checkbox"] { | |
| 28 | + --transition: 0.2s ease; | |
| 29 | + | |
| 30 | + appearance: none; | |
| 31 | + background-color: transparent; | |
| 32 | + border-radius: var(--givewp-rounded-4); | |
| 33 | + border: solid 1px var(--givewp-neutral-200); | |
| 34 | + color: #2271b1; | |
| 35 | + cursor: pointer; | |
| 36 | + flex-shrink: 0; | |
| 37 | + font-size: inherit; | |
| 38 | + height: 1.5rem; | |
| 39 | + margin: 0; | |
| 40 | + margin: 0; | |
| 41 | + padding: 0; | |
| 42 | + transform: translateY(-1px); | |
| 43 | + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); | |
| 44 | + vertical-align: middle; | |
| 45 | + width: 1.5rem; | |
| 46 | + | |
| 47 | + &::before { | |
| 48 | + content: none; | |
| 49 | + } | |
| 50 | + | |
| 51 | + &:focus { | |
| 52 | + border-color: transparent; | |
| 53 | + box-shadow: #2271b1 0px 0px 0px 0.125rem; | |
| 54 | + outline: none; | |
| 55 | + } | |
| 56 | + | |
| 57 | + &:checked, | |
| 58 | + &:checked:active, | |
| 59 | + &:checked:focus { | |
| 60 | + background-color: #2271b1; | |
| 61 | + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27rgb%28255, 255, 255%29%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%2720 6 9 17 4 12%27%3E%3C/polyline%3E%3C/svg%3E"); | |
| 62 | + background-position: center; | |
| 63 | + background-size: 1rem auto; | |
| 64 | + background-repeat: no-repeat; | |
| 65 | + border-color: #2271b1; | |
| 66 | + } | |
| 67 | + | |
| 68 | + &[aria-invalid="false"] { | |
| 69 | + border-color: var(--givewp-green-500); | |
| 70 | + } | |
| 71 | + | |
| 72 | + &[aria-invalid="true"] { | |
| 73 | + border-color: var(--givewp-red-400); | |
| 74 | + } | |
| 75 | + } | |
| 76 | + | |
| 77 | + :root { | |
| 78 | + tr:first-child { | |
| 79 | + .tableCell { | |
| 80 | + padding-block-start: var(--givewp-spacing-6); | |
| 81 | + } | |
| 82 | + } | |
| 83 | + | |
| 84 | + tr:last-child { | |
| 85 | + .tableCell { | |
| 86 | + padding-block-end: var(--givewp-spacing-12); | |
| 87 | + } | |
| 88 | + } | |
| 89 | + } | |
| 90 | + | |
| 91 | + &[data-column-id="campaigns-status"], | |
| 92 | + &[data-column-id="donationForms-status"], | |
| 93 | + &[data-column-id="donations-paymentType"], | |
| 94 | + &[data-column-id="donations-status"], | |
| 95 | + &[data-column-id="donations-subscriptionDonationType"], | |
| 96 | + &[data-column-id="donors-donorType"] { | |
| 97 | + text-align: center; | |
| 98 | + } | |
| 99 | + | |
| 100 | + &[data-column-id="campaigns-donationsCount"], | |
| 101 | + &[data-column-id="campaigns-revenue"], | |
| 102 | + &[data-column-id="donationForms-donationCount"], | |
| 103 | + &[data-column-id="donationForms-donationRevenue"], | |
| 104 | + &[data-column-id="donations-amount"], | |
| 105 | + &[data-column-id="donors-donationCount"], | |
| 106 | + &[data-column-id="donors-donationRevenue"], | |
| 107 | + &[data-column-id="donors-latestDonation"], | |
| 108 | + &[data-column-id="subscriptions-amount"] { | |
| 109 | + text-align: right; | |
| 18 | 110 | } |
| 19 | 111 | } |
| 20 | 112 | |
| 21 | 113 | .tableRowHeader { |