.form-check-input { @function form-check-box-svg($color) { @return url("data:image/svg+xml,"); } @function form-check-radio-svg($color) { @return url("data:image/svg+xml,"); } @function form-check-indeterminate-svg($color) { @return url("data:image/svg+xml,"); } &:hover { &:not(:disabled) { border-color: var(--border-hover); &:checked, &[type='checkbox']:indeterminate { background-color: var(--bg-accent-02); border-color: var(--bg-accent-02); } } } &:disabled { @mixin input-disabled-styles { background-color: $input-disabled-bg; border-color: $input-disabled-border-color; } @include input-disabled-styles; &[type='checkbox']:indeterminate { @include input-disabled-styles; background-image: escape-svg(form-check-indeterminate-svg($neutral-40)); } } // Use disabled attribute in addition of :disabled pseudo-class // See: https://github.com/twbs/bootstrap/issues/28247 &[disabled], &:disabled { ~ .form-check-label { color: $input-disabled-color; } &:checked { &[type='checkbox'] { background-image: escape-svg(form-check-box-svg($neutral-40)); } &[type='radio'] { background-image: escape-svg(form-check-radio-svg($neutral-40)); } } } &:focus-visible { outline: 0; border-color: $input-focus-border-color; box-shadow: $input-focus-box-shadow; } } .form-control { &[disabled], &:disabled { &::placeholder { color: var(--content-disabled); } } } .form-switch { .form-check-input { --bs-form-check-bg: var(--bg-dark-tertiary); height: 20px; margin: 0; border: 0; &:hover { cursor: pointer; } &:disabled { opacity: 0.32; background-color: var(--bg-dark-tertiary); &:checked { background-color: var(--bg-accent-01); background-image: #{escape-svg( url("data:image/svg+xml,") )}; } } } } .form-check-label-description { .form-text-inner { margin-top: var(--spacing-01) !important; } } .form-text { .form-control[disabled] ~ & { color: var(--content-disabled); } .form-text-inner { display: flex; gap: var(--spacing-02); line-height: var(--line-height-02); margin-top: var(--spacing-04); } } .form-label { &:has(+ .form-control[disabled], + .form-control-wrapper-disabled) { color: var(--content-disabled); } } .form-group { margin-bottom: $form-group-margin-bottom; } .form-control-wrapper { position: relative; &.form-control-wrapper-disabled { .form-control-start-icon, .form-control-end-icon { & > * { color: var(--content-disabled); } } } .form-control-start-icon, .form-control-end-icon { position: absolute; top: 0; height: 100%; display: flex; align-items: center; font-size: 0; } .form-control-start-icon { left: 0; padding-left: calc(var(--form-control-padding-x) + var(--bs-border-width)); } .form-control-end-icon { right: 0; padding-right: calc(var(--form-control-padding-x) + var(--bs-border-width)); } --icon-width: 20px; --form-control-padding-x: var(--spacing-04); --form-control-icon-offset-y: var(--spacing-04); &.form-control-wrapper-sm { --form-control-padding-x: var(--spacing-03); --form-control-icon-offset-y: var(--spacing-02); } &.form-control-wrapper-lg { --form-control-padding-x: var(--spacing-05); --form-control-icon-offset-y: var(--spacing-05); } .form-control-offset-start { padding-left: calc( var(--form-control-padding-x) + var(--form-control-icon-offset-y) + var(--icon-width) ); } .form-control-offset-end { padding-right: calc( var(--form-control-padding-x) + var(--form-control-icon-offset-y) + var(--icon-width) ); } } .form-control, .form-select { &:focus, &:invalid:focus, &.is-invalid:focus, &:focus-visible, &:invalid:focus-visible, &.is-invalid:focus-visible { color: $input-focus-color; background-color: $input-focus-bg; outline: 0; border-color: $input-focus-border-color; box-shadow: $input-focus-box-shadow; } } .website-redesign { label { color: $form-text-color; display: inline-block; margin-bottom: var(--spacing-02); font-weight: bold; @include body-sm; } .checkbox-label { margin-left: var(--spacing-04); } } %input-focus-style { border-color: $input-focus-border-color; box-shadow: $form-check-input-focus-box-shadow; }