mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Refactor: [select, input] Use CSS Nesting
This commit is contained in:
Lea Verou
@@ -126,74 +126,73 @@
|
||||
/*
|
||||
* Size modifiers
|
||||
*/
|
||||
|
||||
.input--small {
|
||||
font-size: var(--wa-font-size-s);
|
||||
height: var(--wa-form-control-height-s);
|
||||
}
|
||||
|
||||
.input--small .input__control {
|
||||
height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2);
|
||||
padding: 0 var(--wa-space-s);
|
||||
}
|
||||
.input__control {
|
||||
height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2);
|
||||
padding: 0 var(--wa-space-s);
|
||||
}
|
||||
|
||||
.input--small .input__clear,
|
||||
.input--small .input__password-toggle {
|
||||
width: calc(1em + var(--wa-space-s) * 2);
|
||||
}
|
||||
.input__clear,
|
||||
.input__password-toggle {
|
||||
width: calc(1em + var(--wa-space-s) * 2);
|
||||
}
|
||||
|
||||
.input--small .input__prefix ::slotted(*) {
|
||||
margin-inline-start: var(--wa-space-s);
|
||||
}
|
||||
.input__prefix ::slotted(*) {
|
||||
margin-inline-start: var(--wa-space-s);
|
||||
}
|
||||
|
||||
.input--small .input__suffix ::slotted(*) {
|
||||
margin-inline-end: var(--wa-space-s);
|
||||
.input__suffix ::slotted(*) {
|
||||
margin-inline-end: var(--wa-space-s);
|
||||
}
|
||||
}
|
||||
|
||||
.input--medium {
|
||||
font-size: var(--wa-font-size-m);
|
||||
height: var(--wa-form-control-height-m);
|
||||
}
|
||||
|
||||
.input--medium .input__control {
|
||||
height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2);
|
||||
padding: 0 var(--wa-space-m);
|
||||
}
|
||||
.input__control {
|
||||
height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2);
|
||||
padding: 0 var(--wa-space-m);
|
||||
}
|
||||
|
||||
.input--medium .input__clear,
|
||||
.input--medium .input__password-toggle {
|
||||
width: calc(1em + var(--wa-space-m) * 2);
|
||||
}
|
||||
.input__clear,
|
||||
.input__password-toggle {
|
||||
width: calc(1em + var(--wa-space-m) * 2);
|
||||
}
|
||||
|
||||
.input--medium .input__prefix ::slotted(*) {
|
||||
margin-inline-start: var(--wa-space-m);
|
||||
}
|
||||
.input__prefix ::slotted(*) {
|
||||
margin-inline-start: var(--wa-space-m);
|
||||
}
|
||||
|
||||
.input--medium .input__suffix ::slotted(*) {
|
||||
margin-inline-end: var(--wa-space-m);
|
||||
.input__suffix ::slotted(*) {
|
||||
margin-inline-end: var(--wa-space-m);
|
||||
}
|
||||
}
|
||||
|
||||
.input--large {
|
||||
font-size: var(--wa-font-size-l);
|
||||
height: var(--wa-form-control-height-l);
|
||||
}
|
||||
|
||||
.input--large .input__control {
|
||||
height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2);
|
||||
padding: 0 var(--wa-space-l);
|
||||
}
|
||||
.input__control {
|
||||
height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2);
|
||||
padding: 0 var(--wa-space-l);
|
||||
}
|
||||
|
||||
.input--large .input__clear,
|
||||
.input--large .input__password-toggle {
|
||||
width: calc(1em + var(--wa-space-l) * 2);
|
||||
}
|
||||
.input__clear,
|
||||
.input__password-toggle {
|
||||
width: calc(1em + var(--wa-space-l) * 2);
|
||||
}
|
||||
|
||||
.input--large .input__prefix ::slotted(*) {
|
||||
margin-inline-start: var(--wa-space-l);
|
||||
}
|
||||
.input__prefix ::slotted(*) {
|
||||
margin-inline-start: var(--wa-space-l);
|
||||
}
|
||||
|
||||
.input--large .input__suffix ::slotted(*) {
|
||||
margin-inline-end: var(--wa-space-l);
|
||||
.input__suffix ::slotted(*) {
|
||||
margin-inline-end: var(--wa-space-l);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -220,21 +219,18 @@
|
||||
padding: 0;
|
||||
transition: var(--wa-transition-normal) color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input__clear:hover,
|
||||
.input__password-toggle:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
&:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
|
||||
.input__clear:active,
|
||||
.input__password-toggle:active {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
|
||||
}
|
||||
&:active {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
|
||||
}
|
||||
|
||||
.input__clear:focus,
|
||||
.input__password-toggle:focus {
|
||||
outline: none;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Don't show the browser's password toggle in Edge */
|
||||
@@ -243,12 +239,12 @@
|
||||
}
|
||||
|
||||
/* Hide the built-in number spinner */
|
||||
.input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
|
||||
.input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input--no-spin-buttons input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -146,60 +146,70 @@
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
.select--small .select__combobox {
|
||||
font-size: var(--wa-font-size-s);
|
||||
min-height: var(--wa-form-control-height-s);
|
||||
padding-block: 0;
|
||||
padding-inline: var(--wa-space-s);
|
||||
.select--small {
|
||||
.select__combobox {
|
||||
font-size: var(--wa-font-size-s);
|
||||
min-height: var(--wa-form-control-height-s);
|
||||
padding-block: 0;
|
||||
padding-inline: var(--wa-space-s);
|
||||
}
|
||||
|
||||
.select__clear {
|
||||
margin-inline-start: var(--wa-space-s);
|
||||
}
|
||||
|
||||
.select__prefix::slotted(*) {
|
||||
margin-inline-end: var(--wa-space-s);
|
||||
}
|
||||
|
||||
&.select--multiple {
|
||||
&:not(.select--placeholder-visible) .select__prefix::slotted(*) {
|
||||
margin-inline-start: var(--wa-space-s);
|
||||
}
|
||||
|
||||
&:not(.select--placeholder-visible) .select__combobox {
|
||||
padding-block: 2px;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select__tags {
|
||||
gap: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.select--small .select__clear {
|
||||
margin-inline-start: var(--wa-space-s);
|
||||
}
|
||||
.select--medium {
|
||||
.select__combobox {
|
||||
font-size: var(--wa-font-size-m);
|
||||
min-height: var(--wa-form-control-height-m);
|
||||
padding-block: 0;
|
||||
padding-inline: var(--wa-space-m);
|
||||
}
|
||||
|
||||
.select--small .select__prefix::slotted(*) {
|
||||
margin-inline-end: var(--wa-space-s);
|
||||
}
|
||||
.select__clear {
|
||||
margin-inline-start: var(--wa-space-m);
|
||||
}
|
||||
|
||||
.select--small.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
|
||||
margin-inline-start: var(--wa-space-s);
|
||||
}
|
||||
.select__prefix::slotted(*) {
|
||||
margin-inline-end: var(--wa-space-m);
|
||||
}
|
||||
|
||||
.select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {
|
||||
padding-block: 2px;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
&.select--multiple {
|
||||
&:not(.select--placeholder-visible) {
|
||||
.select__prefix::slotted(*) {
|
||||
margin-inline-start: var(--wa-space-m);
|
||||
}
|
||||
|
||||
.select--small .select__tags {
|
||||
gap: 2px;
|
||||
}
|
||||
.select__combobox {
|
||||
padding-inline-start: 0;
|
||||
padding-block: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select--medium .select__combobox {
|
||||
font-size: var(--wa-font-size-m);
|
||||
min-height: var(--wa-form-control-height-m);
|
||||
padding-block: 0;
|
||||
padding-inline: var(--wa-space-m);
|
||||
}
|
||||
|
||||
.select--medium .select__clear {
|
||||
margin-inline-start: var(--wa-space-m);
|
||||
}
|
||||
|
||||
.select--medium .select__prefix::slotted(*) {
|
||||
margin-inline-end: var(--wa-space-m);
|
||||
}
|
||||
|
||||
.select--medium.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
|
||||
margin-inline-start: var(--wa-space-m);
|
||||
}
|
||||
|
||||
.select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
|
||||
padding-inline-start: 0;
|
||||
padding-block: 3px;
|
||||
}
|
||||
|
||||
.select--medium .select__tags {
|
||||
gap: 3px;
|
||||
.select__tags {
|
||||
gap: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.select--large .select__combobox {
|
||||
@@ -207,27 +217,29 @@
|
||||
min-height: var(--wa-form-control-height-l);
|
||||
padding-block: 0;
|
||||
padding-inline: var(--wa-space-l);
|
||||
}
|
||||
|
||||
.select--large .select__clear {
|
||||
margin-inline-start: var(--wa-space-l);
|
||||
}
|
||||
.select__clear {
|
||||
margin-inline-start: var(--wa-space-l);
|
||||
}
|
||||
|
||||
.select--large .select__prefix::slotted(*) {
|
||||
margin-inline-end: var(--wa-space-l);
|
||||
}
|
||||
.select__prefix::slotted(*) {
|
||||
margin-inline-end: var(--wa-space-l);
|
||||
}
|
||||
|
||||
.select--large.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
|
||||
margin-inline-start: var(--wa-space-l);
|
||||
}
|
||||
&.select--multiple {
|
||||
&:not(.select--placeholder-visible) .select__prefix::slotted(*) {
|
||||
margin-inline-start: var(--wa-space-l);
|
||||
}
|
||||
|
||||
.select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
|
||||
padding-inline-start: 0;
|
||||
padding-block: 4px;
|
||||
}
|
||||
&:not(.select--placeholder-visible) .select__combobox {
|
||||
padding-inline-start: 0;
|
||||
padding-block: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.select--large .select__tags {
|
||||
gap: 4px;
|
||||
.select__tags {
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pills */
|
||||
|
||||
Reference in New Issue
Block a user