Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS: Introduction of new CSS variables #39091

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

CSS: Introduction of new CSS variables #39091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f268c0b
Add two new CSS var in table.
louismaximepiton Aug 18, 2023
2b46993
Add new CSS vars to `.form-control`
louismaximepiton Aug 21, 2023
e746448
Reminder for form-check but there might be more to do in here.
louismaximepiton Aug 21, 2023
674dfd0
Proposal for floating labels
louismaximepiton Aug 22, 2023
daf4816
Proposal for form validation
louismaximepiton Aug 22, 2023
7959675
Proposal for form range
louismaximepiton Aug 22, 2023
886a782
Fix entirely #38202
louismaximepiton Aug 23, 2023
02ed5f2
Add stretched-link
louismaximepiton Aug 23, 2023
8610dff
Introducing CSS var for rules
louismaximepiton Aug 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions scss/_reboot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,11 @@ body {
// 1. Reset Firefox's gray color

hr {
margin: $hr-margin-y 0;
color: $hr-color; // 1
margin: var(--#{$prefix}hr-margin, $hr-margin-y 0);
color: var(--#{$prefix}hr-color, $hr-color); // 1
border: 0;
border-top: $hr-border-width solid $hr-border-color;
opacity: $hr-opacity;
border-top: var(--#{$prefix}hr-width, $hr-border-width) solid var(--#{$prefix}hr-border-color, $hr-border-color);
opacity: var(--#{$prefix}hr-opacity, $hr-opacity);
}


Expand Down
19 changes: 9 additions & 10 deletions scss/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,18 @@
--#{$prefix}table-color: #{$table-color};
--#{$prefix}table-bg: #{$table-bg};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-border-width: #{$table-border-width};
--#{$prefix}table-accent-bg: #{$table-accent-bg};
--#{$prefix}table-striped-color: #{$table-striped-color};
--#{$prefix}table-striped-bg: #{$table-striped-bg};
--#{$prefix}table-active-color: #{$table-active-color};
--#{$prefix}table-active-bg: #{$table-active-bg};
--#{$prefix}table-hover-color: #{$table-hover-color};
--#{$prefix}table-hover-bg: #{$table-hover-bg};
--#{$prefix}table-cell-padding: #{$table-cell-padding-y $table-cell-padding-x};

width: 100%;
margin-bottom: $spacer;
margin-bottom: $table-margin-bottom;
vertical-align: $table-cell-vertical-align;
border-color: var(--#{$prefix}table-border-color);

Expand All @@ -31,11 +33,11 @@
// Another advantage is that this generates less code and makes the selector less specific making it easier to override.
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y $table-cell-padding-x;
padding: var(--#{$prefix}table-cell-padding);
// Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
background-color: var(--#{$prefix}table-bg);
border-bottom-width: $table-border-width;
border-bottom-width: var(--#{$prefix}table-border-width);
box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
}

Expand All @@ -49,7 +51,7 @@
}

.table-group-divider {
border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
border-top: calc(var(--#{$prefix}table-border-width) * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
}

//
Expand All @@ -66,10 +68,7 @@
//

.table-sm {
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
}
--#{$prefix}table-cell-padding: #{$table-cell-padding-y-sm $table-cell-padding-x-sm};
}


Expand All @@ -84,11 +83,11 @@

.table-bordered {
> :not(caption) > * {
border-width: $table-border-width 0;
border-width: var(--#{$prefix}table-border-width) 0;

// stylelint-disable-next-line selector-max-universal
> * {
border-width: 0 $table-border-width;
border-width: 0 var(--#{$prefix}table-border-width);
}
}
}
Expand Down
6 changes: 5 additions & 1 deletion scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -737,6 +737,7 @@ $table-cell-vertical-align: top !default;
$table-color: var(--#{$prefix}body-color) !default;
$table-bg: var(--#{$prefix}body-bg) !default;
$table-accent-bg: transparent !default;
$table-margin-bottom: $spacer !default;

$table-th-font-weight: null !default;

Expand Down Expand Up @@ -935,6 +936,7 @@ $form-color-width: 3rem !default;

// scss-docs-start form-check-variables
$form-check-input-width: 1em !default;
$form-check-input-height: $form-check-input-width !default;
$form-check-min-height: $font-size-base * $line-height-base !default;
$form-check-padding-start: $form-check-input-width + .5em !default;
$form-check-margin-bottom: .125rem !default;
Expand Down Expand Up @@ -978,7 +980,9 @@ $form-switch-border-radius: $form-switch-width !default;
$form-switch-transition: background-position .15s ease-in-out !default;

$form-switch-focus-color: $input-focus-border-color !default;
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
// fusv-disable
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default; // Deprecated in 5.3.2
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe it should be in a different PR to well separate things.

// fusv-enable

$form-switch-checked-color: $component-active-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
Expand Down
7 changes: 2 additions & 5 deletions scss/forms/_floating-labels.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
z-index: -1;
height: $form-floating-label-height;
content: "";
background-color: $input-bg;
background-color: var(--#{$prefix}form-floating-input-bg, $input-bg);
@include border-radius($input-border-radius);
}
}
Expand All @@ -86,10 +86,7 @@

> :disabled ~ label,
> .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
--#{$prefix}form-floating-input-bg: #{$input-disabled-bg};
color: $form-floating-label-disabled-color;

&::after {
background-color: $input-disabled-bg;
}
}
}
146 changes: 59 additions & 87 deletions scss/forms/_form-check.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,30 @@
// Check/radio
//

.form-check {
display: block;
min-height: $form-check-min-height;
padding-left: $form-check-padding-start;
margin-bottom: $form-check-margin-bottom;

.form-check-input {
float: left;
margin-left: $form-check-padding-start * -1;
}
}

.form-check-reverse {
padding-right: $form-check-padding-start;
padding-left: 0;
text-align: right;

.form-check-input {
float: right;
margin-right: $form-check-padding-start * -1;
margin-left: 0;
}
}

.form-check-input {
--#{$prefix}form-check-bg: #{$form-check-input-bg};

width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
float: var(--#{$prefix}form-check-float, left);
width: var(--#{$prefix}form-check-input-width, $form-check-input-width);
height: var(--#{$prefix}form-check-input-height, $form-check-input-height);
margin: ($line-height-base - $form-check-input-width) * .5 var(--#{$prefix}form-check-input-margin-right, 0) 0 var(--#{$prefix}form-check-input-margin-left, 0); // line-height minus check height
vertical-align: top;
appearance: none;
background-color: var(--#{$prefix}form-check-bg);
background-color: var(--#{$prefix}form-check-bg, $form-check-input-bg);
background-image: var(--#{$prefix}form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-position: var(--#{$prefix}form-check-bg-position, center);
background-size: contain;
border: $form-check-input-border;
print-color-adjust: exact; // Keep themed appearance for print
@include transition($form-check-transition);

&[type="checkbox"] {
@include border-radius($form-check-input-border-radius);
}
@include transition(var(--#{$prefix}form-check-transition, $form-check-transition));
border-radius: var(--#{$prefix}form-check-border-radius, $form-check-input-border-radius); // stylelint-disable-line property-disallowed-list

&[type="radio"] {
// stylelint-disable-next-line property-disallowed-list
border-radius: $form-check-radio-border-radius;
@if $enable-gradients {
--#{$prefix}form-check-checked-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-check-checked-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
}
--#{$prefix}form-check-border-radius: #{$form-check-radio-border-radius};
}

&:active {
Expand All @@ -59,28 +35,18 @@
&:focus {
border-color: $form-check-input-focus-border;
outline: 0;
box-shadow: $form-check-input-focus-box-shadow;
box-shadow: var(--#{$prefix}form-check-focus-box-shadow, $form-check-input-focus-box-shadow);
}

&:checked {
background-color: $form-check-input-checked-bg-color;
border-color: $form-check-input-checked-border-color;

&[type="checkbox"] {
@if $enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
}
}

&[type="radio"] {
@if $enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
}
background-color: var(--#{$prefix}form-check-checked-bg-color, $form-check-input-checked-bg-color);
@if $enable-gradients {
background-image: var(--#{$prefix}form-check-checked-bg-image, escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient));
} @else {
background-image: var(--#{$prefix}form-check-checked-bg-image, escape-svg($form-check-input-checked-bg-image));
}
background-position: var(--#{$prefix}form-check-checked-bg-position, center);
border-color: $form-check-input-checked-border-color;
}

&[type="checkbox"]:indeterminate {
Expand Down Expand Up @@ -111,6 +77,25 @@
}
}

.form-check {
--#{$prefix}form-check-input-margin-left: #{-$form-check-padding-start};

display: block;
min-height: $form-check-min-height;
padding-left: $form-check-padding-start;
margin-bottom: $form-check-margin-bottom;
}

.form-check-reverse {
--#{$prefix}form-check-float: #{right};
--#{$prefix}form-check-input-margin-left: #{0};
--#{$prefix}form-check-input-margin-right: #{-$form-check-padding-start};

padding-right: $form-check-padding-start;
padding-left: 0;
text-align: right;
}

.form-check-label {
color: $form-check-label-color;
cursor: $form-check-label-cursor;
Expand All @@ -121,41 +106,28 @@
//

.form-switch {
padding-left: $form-switch-padding-start;

.form-check-input {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};

width: $form-switch-width;
margin-left: $form-switch-padding-start * -1;
background-image: var(--#{$prefix}form-switch-bg);
background-position: left center;
@include border-radius($form-switch-border-radius);
@include transition($form-switch-transition);

&:focus {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
}
@if $enable-gradients {
--#{$prefix}form-check-checked-bg-image: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-check-checked-bg-image: #{escape-svg($form-switch-checked-bg-image)};
}

&:checked {
background-position: $form-switch-checked-bg-position;
--#{$prefix}form-check-input-width: #{$form-switch-width};
--#{$prefix}form-check-input-margin-left: #{-$form-switch-padding-start};
--#{$prefix}form-check-bg-image: #{escape-svg($form-switch-bg-image)};
--#{$prefix}form-check-bg-position: #{left center};
--#{$prefix}form-check-checked-bg-position: #{$form-switch-checked-bg-position};
--#{$prefix}form-check-transition: #{$form-switch-transition};
--#{$prefix}form-check-border-radius: #{$form-switch-border-radius};

@if $enable-gradients {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
}
}
}
padding-left: $form-switch-padding-start;

&.form-check-reverse {
--#{$prefix}form-check-input-margin-left: #{0};
--#{$prefix}form-check-input-margin-right: #{-$form-switch-padding-start};

padding-right: $form-switch-padding-start;
padding-left: 0;

.form-check-input {
margin-right: $form-switch-padding-start * -1;
margin-left: 0;
}
}
}

Expand All @@ -181,8 +153,8 @@

@if $enable-dark-mode {
@include color-mode(dark) {
.form-switch .form-check-input:not(:checked):not(:focus) {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
.form-switch .form-check-input:not(:checked) {
--#{$prefix}form-check-bg-image: #{escape-svg($form-switch-bg-image-dark)};
}
}
}
Loading