|
7 | 7 | } |
8 | 8 |
|
9 | 9 | .ToggleSwitch { |
| 10 | + /* Knob clears the track's border on every side */ |
| 11 | + --toggleSwitch-knob-inset: var(--borderWidth-thin); |
| 12 | + --toggleSwitch-knob-offset: calc(2 * var(--toggleSwitch-knob-inset)); |
| 13 | + |
10 | 14 | align-items: center; |
11 | 15 | display: inline-flex; |
12 | 16 | gap: var(--controlStack-medium-gap-condensed); |
|
93 | 97 | & .ToggleSwitch-knob { |
94 | 98 | background-color: var(--controlKnob-bgColor-checked); |
95 | 99 | border-color: var(--controlKnob-borderColor-checked); |
96 | | - transform: translateX(calc(100% - 2px)); |
| 100 | + transform: translateX(calc(100% - var(--toggleSwitch-knob-offset))); |
97 | 101 | } |
98 | 102 |
|
99 | 103 | & .ToggleSwitch-lineIcon { |
|
155 | 159 | .ToggleSwitch-knob { |
156 | 160 | position: absolute; |
157 | 161 | /* stylelint-disable-next-line primer/spacing */ |
158 | | - top: 1px; |
| 162 | + top: var(--toggleSwitch-knob-inset); |
159 | 163 | /* stylelint-disable-next-line primer/spacing */ |
160 | | - bottom: 1px; |
| 164 | + bottom: var(--toggleSwitch-knob-inset); |
161 | 165 | /* stylelint-disable-next-line primer/spacing */ |
162 | | - left: 1px; |
| 166 | + left: var(--toggleSwitch-knob-inset); |
163 | 167 | z-index: 1; |
164 | 168 | width: 50%; |
165 | 169 | background-color: var(--controlKnob-bgColor-rest); |
166 | 170 | border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest); |
167 | | - /* Use calc to account for the 1px border around the track */ |
| 171 | + /* Concentric radius: subtract the track border on both sides */ |
168 | 172 | /* stylelint-disable-next-line primer/borders */ |
169 | | - border-radius: calc(var(--borderRadius-medium) - var(--borderWidth-thick)); |
| 173 | + border-radius: calc(var(--borderRadius-medium) - var(--toggleSwitch-knob-offset)); |
170 | 174 | transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1); |
171 | 175 | transition-duration: 80ms; |
172 | 176 | transition-property: transform; |
|
0 commit comments