mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-24 21:12:38 -04:00
f2c167a026
* adding left-margin for the checkbox-label * moving the styling to appropriate file and making it more generic GitOrigin-RevId: 66484344891c77f6d31147ef7d0e0d55987a8445
186 lines
4.3 KiB
SCSS
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);
|
|
}
|
|
}
|