.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;
}