Skip to content

Commit

Permalink
fix(ld-button): active states on safari
Browse files Browse the repository at this point in the history
  • Loading branch information
@borisdiakur
borisdiakur committed Sep 13, 2021
1 parent ad010bd commit 2a1eaa5
Showing 1 changed file with 55 additions and 55 deletions.
110 changes: 55 additions & 55 deletions src/liquid/components/ld-button/ld-button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,18 +220,18 @@ ld-button {
background-color: var(--ld-thm-solvent-bg-primary);

&:where(:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
background-color: var(--ld-col-rp-focus);
color: var(--ld-thm-solvent-bg-secondary);
}
@media (hover: hover) {
&:hover {
&:where(:hover) {
background-color: var(--ld-col-rp-hover);
color: var(--ld-col-wht);
}
}
&:active,
&:active:focus-visible {
&:where(:active),
&:where(:active:focus-visible) {
background-color: var(--ld-col-rp-active);
color: var(--ld-col-wht);
}
Expand Down Expand Up @@ -265,17 +265,17 @@ ld-button {
background-color: var(--ld-thm-tea-bg-primary);

&:where(:not(:disabled):not([aria-disabled='true'])) {
&:where(:focus:focus-visible) {
background-color: var(--ld-col-rg-focus);
color: var(--ld-thm-tea-bg-secondary);
}
@media (hover: hover) {
&:hover {
&:where(:hover) {
background-color: var(--ld-col-rg-hover);
}
}
&:focus:focus-visible {
background-color: var(--ld-col-rg-focus);
color: var(--ld-thm-tea-bg-secondary);
}
&:active,
&:active:focus-visible {
&:where(:active),
&:where(:active:focus-visible) {
background-color: var(--ld-col-rg-active);
color: var(--ld-col-wht);
}
Expand All @@ -290,16 +290,16 @@ ld-button {
color: var(--ld-col-vy6);

&:where(:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
background-color: var(--ld-col-vy-focus);
}
@media (hover: hover) {
&:hover {
&:where(:hover) {
background-color: var(--ld-col-vy-hover);
}
}
&:active,
&:active:focus-visible {
&:where(:active),
&:where(:active:focus-visible) {
background-color: var(--ld-col-vy-active);
color: var(--ld-col-vy4);
}
Expand All @@ -317,17 +317,17 @@ ld-button {
color: var(--ld-col-wht);

&:where(:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
background-color: var(--ld-col-rr-focus);
}
@media (hover: hover) {
&:hover {
&:where(:hover) {
background-color: var(--ld-col-rr-hover);
color: var(--ld-col-wht);
}
}
&:active,
&:active:focus-visible {
&:where(:active),
&:where(:active:focus-visible) {
background-color: var(--ld-col-rr-active);
color: var(--ld-col-wht);
}
Expand All @@ -348,18 +348,18 @@ ld-button {
background-color: transparent;

&:where(:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
color: var(--ld-col-rb-focus);
background-color: transparent;
}
@media (hover: hover) {
&:hover {
&:where(:hover) {
color: var(--ld-col-rb-hover);
background-color: var(--ld-col-rb-a01);
}
}
&:active,
&:active:focus-visible {
&:where(:active),
&:where(:active:focus-visible) {
color: var(--ld-col-rb-active);
background-color: var(--ld-col-rb-a02);
}
Expand All @@ -384,17 +384,17 @@ ld-button {
color: var(--ld-col-rp-default);

&:where(:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
color: var(--ld-col-rp-focus);
}
@media (hover: hover) {
&:hover {
&:where(:hover) {
color: var(--ld-col-rp-hover);
background-color: var(--ld-col-rp-a01);
}
}
&:active,
&:active:focus-visible {
&:where(:active),
&:where(:active:focus-visible) {
color: var(--ld-col-rp-active);
background-color: var(--ld-col-rp-a02);
}
Expand All @@ -413,17 +413,17 @@ ld-button {
color: var(--ld-col-rg-default);

&:where(:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
color: var(--ld-col-rg-focus);
}
@media (hover: hover) {
&:hover {
&:where(:hover) {
color: var(--ld-col-rg-hover);
background-color: var(--ld-col-rg-a01);
}
}
&:active,
&:active:focus-visible {
&:where(:active),
&:where(:active:focus-visible) {
color: var(--ld-col-rg-active);
background-color: var(--ld-col-rg-a02);
}
Expand All @@ -444,11 +444,11 @@ ld-button {
box-shadow: inset 0px 0px 0px 2px var(--ld-col-rb-default);

&:where(:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
box-shadow: inset 0px 0px 0px 2px var(--ld-col-rb-focus);
}
@media (hover: hover) {
&:hover {
&:where(:hover) {
box-shadow: inset 0px 0px 0px 2px var(--ld-col-rb-hover);
}
}
Expand All @@ -469,16 +469,16 @@ ld-button {
box-shadow: inset 0px 0px 0px 2px var(--ld-col-rp-default);

&:where(&:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
box-shadow: inset 0px 0px 0px 2px var(--ld-col-rp-focus);
}
@media (hover: hover) {
&:hover {
&:where(:hover) {
box-shadow: inset 0px 0px 0px 2px var(--ld-col-rp-hover);
}
}
&:active,
&:active:focus-visible {
&:where(:active),
&:where(:active:focus-visible) {
box-shadow: inset 0px 0px 0px 2px var(--ld-col-rp-active);
}
}
Expand All @@ -489,16 +489,16 @@ ld-button {
box-shadow: inset 0px 0px 0px 2px var(--ld-col-rg-default);

&:where(&:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
box-shadow: inset 0px 0px 0px 2px var(--ld-col-rg-focus);
}
@media (hover: hover) {
&:hover {
&:where(:hover) {
box-shadow: inset 0px 0px 0px 2px var(--ld-col-rg-hover);
}
}
&:active,
&:active:focus-visible {
&:where(:active),
&:where(:active:focus-visible) {
box-shadow: inset 0px 0px 0px 2px var(--ld-col-rg-active);
}
}
Expand All @@ -514,16 +514,16 @@ ld-button {
background-color: var(--ld-col-wht);

&:where(&:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
background-color: var(--ld-col-ob-wht-focus);
}
@media (hover: hover) {
&:hover {
&:where(:hover) {
background-color: var(--ld-col-ob-wht-hover);
}
}
&:active,
&:active:focus-visible {
&:where(:active),
&:where(:active:focus-visible) {
background-color: var(--ld-col-ob-wht-active);
}
}
Expand All @@ -535,7 +535,7 @@ ld-button {
color: var(--ld-col-rb-default);

&:where(&:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
color: var(--ld-col-rb-focus);
}
}
Expand All @@ -547,7 +547,7 @@ ld-button {
color: var(--ld-col-rg-default);

&:where(&:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
color: var(--ld-col-rg-focus);
}
}
Expand All @@ -562,7 +562,7 @@ ld-button {
color: var(--ld-col-rp-default);

&:where(&:not(:disabled):not([aria-disabled='true'])) {
&:focus:focus-visible {
&:where(:focus:focus-visible) {
color: var(--ld-col-rp-focus);
}
}
Expand All @@ -580,20 +580,20 @@ ld-button {
box-shadow: inset 0px 0px 0px 2px var(--ld-col-wht);

&:where(&:not(:disabled):not([aria-disabled='true'])) {
&:where(:focus:focus-visible) {
color: var(--ld-col-sob-wht-focus);
box-shadow: inset 0px 0px 0px 2px var(--ld-col-sob-wht-focus);
}
@media (hover: hover) {
&:hover {
&:where(:hover) {
background-color: var(--ld-col-sob-wht-hover-bg);
}
}
&:active,
&:active:focus-visible {
&:where(:active),
&:where(:active:focus-visible) {
background-color: var(--ld-col-sob-wht-active-bg);
color: var(--ld-col-sob-wht-active);
box-shadow: inset 0px 0px 0px 2px var(--ld-col-sob-wht-active);
}
&:focus:focus-visible {
color: var(--ld-col-sob-wht-focus);
box-shadow: inset 0px 0px 0px 2px var(--ld-col-sob-wht-focus);
}
}
}

0 comments on commit 2a1eaa5

Please sign in to comment.