Skip to content

Commit

Permalink
Use CSS variables to avoid duplicating complex selectors
Browse files Browse the repository at this point in the history
  • Loading branch information
theodorejb committed Jan 30, 2024
1 parent 6e3eda4 commit 42efade
Showing 1 changed file with 12 additions and 16 deletions.
28 changes: 12 additions & 16 deletions scss/forms/_floating-labels.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.form-floating {
--#{$prefix}form-floating-input-padding-t: #{$form-floating-input-padding-t};
--#{$prefix}form-floating-input-padding-b: #{$form-floating-input-padding-b};
position: relative;

> .form-control,
Expand Down Expand Up @@ -36,19 +38,19 @@

&:focus,
&:not(:placeholder-shown) {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
padding-top: var(--#{$prefix}form-floating-input-padding-t);
padding-bottom: var(--#{$prefix}form-floating-input-padding-b);
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
&:-webkit-autofill {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
padding-top: var(--#{$prefix}form-floating-input-padding-t);
padding-bottom: var(--#{$prefix}form-floating-input-padding-b);
}
}

> .form-select {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
padding-top: var(--#{$prefix}form-floating-input-padding-t);
padding-bottom: var(--#{$prefix}form-floating-input-padding-b);
}

> .form-control:focus,
Expand All @@ -69,25 +71,19 @@
}
}
}
// stylelint-disable selector-no-qualifying-type
> textarea.form-control {
// textareas require additional top padding to prevent label from overlapping text,
// and additional bottom padding for when text is scrolled.
&:focus,
&:not(:placeholder-shown) {
padding-top: $form-floating-textarea-padding-t;
padding-bottom: $form-floating-textarea-padding-b;
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
&:-webkit-autofill {
padding-top: $form-floating-textarea-padding-t;
padding-bottom: $form-floating-textarea-padding-b;
}
--#{$prefix}form-floating-input-padding-t: #{$form-floating-textarea-padding-t};
--#{$prefix}form-floating-input-padding-b: #{$form-floating-textarea-padding-b};

// set textarea label background so it will remain legible when text is scrolled
~ label::after {
background-color: $input-bg;
}
}
// stylelint-enable selector-no-qualifying-type
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill {
~ label {
Expand Down

0 comments on commit 42efade

Please sign in to comment.