UX: Add disabled styling to `<DToggleSwitch/>` (#22988)

This commit is contained in:
Keegan George 2023-08-04 15:20:56 -07:00 committed by GitHub
parent 282e43d806
commit 1ded0a1429
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 1 deletions

View File

@ -13,7 +13,7 @@
background-color: var(--primary-high);
}
.d-toggle-switch__checkbox[aria-checked="true"]
.d-toggle-switch__checkbox[aria-checked="true"]:not([disabled])
+ .d-toggle-switch__checkbox-slider {
background-color: var(--tertiary-hover);
}
@ -41,6 +41,15 @@
left: calc(var(--toggle-switch-width) - 22px);
}
&__checkbox[disabled] + .d-toggle-switch__checkbox-slider {
opacity: 0.5;
cursor: not-allowed;
&::before {
cursor: not-allowed;
}
}
&__checkbox-slider {
display: inline-block;
cursor: pointer;