overleaf/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
Davinder Singh f2c167a026 CMS BS5 migration - Adding the left spacing to the labels next to checkbox (#20780)
* adding left-margin for the checkbox-label

* moving the styling to appropriate file and making it more generic

GitOrigin-RevId: 66484344891c77f6d31147ef7d0e0d55987a8445
2024-10-14 11:03:50 +00:00

186 lines
4.3 KiB
SCSS

.form-check-input {
@function form-check-box-svg($color) {
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
}
@function form-check-radio-svg($color) {
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$color}'/></svg>");
}
@function form-check-indeterminate-svg($color) {
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
}
&: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-text {
display: inline-flex;
gap: $spacing-02;
line-height: var(--line-height-02);
.form-control[disabled] ~ & {
color: var(--content-disabled);
}
}
.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);
}
}