Skip to content

Commit

Permalink
fix: make sure css specificity doesn't change for aria-disabled selector
Browse files Browse the repository at this point in the history
  • Loading branch information
borisdiakur committed Oct 10, 2023
1 parent 462aa5f commit 77cb5fa
Show file tree
Hide file tree
Showing 69 changed files with 243 additions and 124 deletions.
116 changes: 58 additions & 58 deletions screenshot/builds/master.json

Large diffs are not rendered by default.

Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,8 @@
)
& {
&:not(
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
&:where(:focus:focus-visible) {
--ld-accordion-toggle-col: var(--ld-accordion-col-focus);
}
Expand All @@ -97,7 +98,9 @@
}
}

&:not([aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
&:not(
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
.ld-accordion-toggle__trigger {
color: var(--ld-accordion-trigger-icon-col);
}
Expand All @@ -113,7 +116,9 @@
button.ld-accordion-toggle__button,
button.ld-accordion-toggle__label,
button.ld-accordion-toggle__trigger {
&:not([aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
&:not(
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
cursor: pointer;
}
}
Expand Down Expand Up @@ -147,7 +152,8 @@ button.ld-accordion-toggle__trigger {

.ld-accordion-toggle__label-content {
.ld-accordion-toggle__label:not(
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
)
& {
color: var(--ld-accordion-toggle-col);
}
Expand Down Expand Up @@ -190,12 +196,14 @@ button.ld-accordion-toggle__trigger {
}

.ld-accordion-toggle__button:not(
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
background-color: var(--ld-accordion-bg-col);
}

.ld-accordion-toggle__label:not(
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
&:where(:focus:focus-visible) {
--ld-accordion-toggle-label-indicator-bg-col: var(
--ld-accordion-bg-col-focus
Expand All @@ -217,7 +225,8 @@ button.ld-accordion-toggle__trigger {
}

.ld-accordion-toggle__trigger:not(
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
&:where(:focus:focus-visible) {
--ld-accordion-toggle-trigger-col: var(--ld-accordion-col-focus);
--ld-accordion-toggle-trigger-indicator-bg-col: var(
Expand Down
33 changes: 26 additions & 7 deletions src/liquid/components/ld-button/ld-button.css
Original file line number Diff line number Diff line change
Expand Up @@ -208,14 +208,18 @@

&:where(:disabled),
&:where(
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
opacity: 0.2;
}

&:where(
:not(
:disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
)
)
) {
cursor: pointer;

Expand Down Expand Up @@ -360,7 +364,10 @@
&:where(
:not(
:disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
)
)
) {
&:where(:focus:focus-visible) .ld-button__progress::after {
background-color: var(--ld-button-ghost-progress-color-focus);
Expand Down Expand Up @@ -424,7 +431,10 @@
&:where(
&:not(
:disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
)
)
) {
&:where(:focus:focus-visible) {
color: var(--ld-button-brand-text-color-focus);
Expand Down Expand Up @@ -489,7 +499,10 @@
&:where(
:not(
:disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
)
)
) {
&:where(:active),
&:where(:active:focus-visible) {
Expand All @@ -514,7 +527,10 @@
&:where(
:not(
:disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
)
)
) {
&:where(:focus:focus-visible) {
.ld-button__progress::after {
Expand Down Expand Up @@ -583,7 +599,10 @@
&:where(
:not(
:disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
)
)
) {
&:where(:focus:focus-visible) {
.ld-button__progress::after {
Expand Down
17 changes: 13 additions & 4 deletions src/liquid/components/ld-checkbox/ld-checkbox.css
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,8 @@

&:where(:disabled),
&:where(
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
~ .ld-checkbox__check {
color: var(--ld-checkbox-disabled-col);
}
Expand All @@ -92,7 +93,10 @@
&:where(
:not(
:disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
)
)
) {
cursor: pointer;

Expand Down Expand Up @@ -152,7 +156,10 @@
:where(
input:not(
:disabled,
input[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
input[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
)
)
) {
~ .ld-checkbox__box {
background-color: var(--ld-checkbox-bg-col);
Expand Down Expand Up @@ -184,7 +191,9 @@
:where(input) {
&:not(
:disabled,
input[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']),
input[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
),
:checked
) {
~ .ld-checkbox__box {
Expand Down
30 changes: 20 additions & 10 deletions src/liquid/components/ld-input/ld-input.css
Original file line number Diff line number Diff line change
Expand Up @@ -371,13 +371,15 @@
:host(
:not(
.ld-input--invalid,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']),
[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
),
.ld-input--disabled
):hover:not(:focus-within)
),
.ld-input:not(
.ld-input--invalid,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']),
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false'])),
.ld-input--disabled
):hover:not(:focus-within) {
&::before {
Expand Down Expand Up @@ -406,11 +408,13 @@
:host(
.ld-input--invalid:not(
.ld-input--disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])):where(:not(:focus))
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
):where(:not(:focus))
),
.ld-input--invalid:not(
.ld-input--disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])):where(:not(:focus)) {
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
):where(:not(:focus)) {
background-color: var(--ld-input-bg-col-invalid);
color: var(--ld-input-text-col-invalid);
-webkit-text-fill-color: var(--ld-input-text-col-invalid);
Expand All @@ -419,11 +423,13 @@
:host(
.ld-input--invalid:not(
.ld-input--disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
)
),
.ld-input--invalid:not(
.ld-input--disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
&::before {
box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-text-col-invalid);
}
Expand Down Expand Up @@ -454,11 +460,13 @@
:host(
.ld-input--invalid:not(
.ld-input--disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])):focus-within
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
):focus-within
),
.ld-input--invalid:not(
.ld-input--disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])):focus-within {
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
):focus-within {
background-color: var(--ld-input-bg-col-invalid-focus);

> input,
Expand All @@ -469,9 +477,11 @@
}

:host(.ld-input--disabled),
:host([aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])),
:host([aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))),
.ld-input.ld-input--disabled,
.ld-input[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']) {
.ld-input[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
) {
color: var(--ld-input-text-col-disabled);
background-color: var(--ld-input-bg-col-disabled);

Expand Down
7 changes: 5 additions & 2 deletions src/liquid/components/ld-link/ld-link.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
text-decoration: none;
touch-action: manipulation;

&:not([aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
&:not(
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
&:hover {
--ld-link-col: var(--ld-thm-primary-hover);
}
Expand All @@ -30,7 +32,8 @@
}

&:where(
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
--ld-link-col: var(--ld-thm-primary);
cursor: default;
opacity: 0.3;
Expand Down
17 changes: 13 additions & 4 deletions src/liquid/components/ld-radio/ld-radio.css
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,8 @@

&:where(:disabled),
&:where(
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
~ .ld-radio__dot {
background-color: var(--ld-radio-disabled-col);
}
Expand All @@ -79,7 +80,10 @@
&:where(
:not(
:disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
)
)
) {
cursor: pointer;

Expand Down Expand Up @@ -139,7 +143,10 @@
:where(
input:not(
:disabled,
input[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
input[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
)
)
) {
~ .ld-radio__box {
background-color: var(--ld-radio-bg-col);
Expand Down Expand Up @@ -171,7 +178,9 @@
:where(input) {
&:not(
:disabled,
input[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']),
input[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
),
:checked
) {
~ .ld-radio__box {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,13 @@
}
}

&:not([aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
&:not(
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
cursor: pointer;
}

&[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']) {
&[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false'])) {
color: var(--ld-optgroup-disabled-text-col);
}

Expand All @@ -113,7 +115,10 @@
&:where(
:not(
.ld-optgroup-internal--disabled,
[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
)
)
) {
:where(.ld-optgroup-internal__check) {
color: var(--ld-optgroup-thm-col);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,13 @@
}
}

&:not([aria-disabled]:not([aria-disabled=''], [aria-disabled='false'])) {
&:not(
[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
) {
cursor: pointer;
}

&[aria-disabled]:not([aria-disabled=''], [aria-disabled='false']) {
&[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false'])) {
color: var(--ld-option-disabled-text-col);
}

Expand All @@ -113,7 +115,11 @@
}

&:where(
:not([aria-disabled]:not([aria-disabled=''], [aria-disabled='false']))
:not(
[aria-disabled]:where(
:not([aria-disabled=''], [aria-disabled='false'])
)
)
) {
:where(.ld-option-internal__check) {
color: var(--ld-option-thm-col);
Expand Down
Loading

0 comments on commit 77cb5fa

Please sign in to comment.