diff --git a/.changeset/form-switch-disabled.md b/.changeset/form-switch-disabled.md new file mode 100644 index 000000000..1515fc088 --- /dev/null +++ b/.changeset/form-switch-disabled.md @@ -0,0 +1,6 @@ +--- +"@tabler/core": patch +"@tabler/docs": patch +--- + +Fixed a disabled off `.form-switch` looking the same as an enabled one by filling its track and darkening the knob. diff --git a/core/scss/_variables-dark.scss b/core/scss/_variables-dark.scss index d4d0c7f1f..b2cd2a679 100644 --- a/core/scss/_variables-dark.scss +++ b/core/scss/_variables-dark.scss @@ -73,8 +73,6 @@ $mark-bg-dark: mix-color-css(var(--black), var(--yellow), 60%) !default; $form-select-indicator-color-dark: $body-color-dark !default; $form-select-indicator-dark: url("data:image/svg+xml,") !default; -$form-switch-color-dark: color-transparent(var(--white), 0.25) !default; - // Form validation colors dark $form-valid-color-dark: mix-color-css(var(--white), var(--green), 40%) !default; $form-valid-border-color-dark: mix-color-css(var(--white), var(--green), 40%) !default; diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index c6b44fad2..e1460d555 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -2028,7 +2028,7 @@ $form-select-font-size-lg: $input-font-size-lg !default; $form-select-border-radius-lg: $input-border-radius-lg !default; $form-select-transition: $input-transition !default; -$form-switch-color: var(--gray-200) !default; +$form-switch-color: light-dark(var(--gray-200), #{color-transparent(var(--white), 0.25)}) !default; $form-switch-width: 2rem !default; $form-switch-height: 1.25rem !default; $form-switch-padding-start: $form-switch-width + 0.5rem !default; @@ -2039,6 +2039,8 @@ $form-switch-transition: $form-switch-knob-transition: inset-inline-start 0.15s ease-in-out !default; $form-switch-focus-color: mix-color-css(var(--white), var(--primary), 50%) !default; $form-switch-checked-color: var(--white) !default; +$form-switch-disabled-bg: $input-disabled-bg !default; +$form-switch-disabled-color: light-dark(var(--gray-400), var(--gray-600)) !default; // Form range $form-range-track-width: 100% !default; diff --git a/core/scss/bootstrap/forms/_form-check.scss b/core/scss/bootstrap/forms/_form-check.scss index 606fa122c..8ccb898ec 100644 --- a/core/scss/bootstrap/forms/_form-check.scss +++ b/core/scss/bootstrap/forms/_form-check.scss @@ -199,11 +199,3 @@ } } } - -@if $enable-dark-mode { - @include color-mode(dark) { - .form-switch .form-check-input:not(:checked):not(:focus) { - --form-switch-color: #{$form-switch-color-dark}; - } - } -} diff --git a/core/scss/ui/forms/_form-check.scss b/core/scss/ui/forms/_form-check.scss index f22825fd1..eb1b81ae0 100644 --- a/core/scss/ui/forms/_form-check.scss +++ b/core/scss/ui/forms/_form-check.scss @@ -70,6 +70,13 @@ Form switch height: $form-switch-height; margin-top: ($form-check-min-height - $form-switch-height) * 0.5; @include transition(background-color $transition-time, background-position $transition-time); + + // An off switch that is disabled fills its track like a disabled input, + // so it no longer looks like an off switch that can still be toggled. + &:disabled:not(:checked) { + --form-switch-color: #{$form-switch-disabled-color}; + background-color: $form-switch-disabled-bg; + } } } diff --git a/docs/content/ui/forms/elements.mdx b/docs/content/ui/forms/elements.mdx index 8069bdabe..4e564e562 100644 --- a/docs/content/ui/forms/elements.mdx +++ b/docs/content/ui/forms/elements.mdx @@ -206,6 +206,17 @@ Use toggle switches for the elements of your form which require choosing between Option 3 +
+
Disabled switches
+ + +
Single switch