Revert "Drop :active styles"

This reverts commit 146aadb9
This commit is contained in:
James Lyne 2021-08-31 19:56:42 +01:00
parent c4230fda7d
commit 1e4c8a080f
7 changed files with 21 additions and 6 deletions

View File

@ -163,6 +163,7 @@
--background-disabled: #555555; /* Disabled controls */
--background-hover: #363636; /* :hovered buttons/menu items */
--background-active: #eeeeee; /* Button :active */
--background-selected: #BDBDBD; /* Selected buttons/menu items */
--outline-focus: #eeeeee; /* :focus outline */
@ -178,6 +179,7 @@
--text-hover: var(--text-base); /* Text in :hover buttons */
--text-selected: var(--background-base); /* Text in selected buttons */
--text-active: var(--background-dark); /* Text in :active buttons */
--text-shadow: 0.1rem 0.1rem #000000; /* Text in selected buttons */
--text-night: #ddffff; /* Clock time at night */

View File

@ -260,7 +260,7 @@ export default defineComponent({
}
}
&:hover, &:focus-visible, &.focus-visible {
&:hover, &:focus-visible, &.focus-visible, &:active {
background-color: transparent;
}
}

View File

@ -141,7 +141,7 @@ export default defineComponent({
}
}
&:hover, &:focus {
&:hover, &:focus, &:active {
.player__name ::v-deep(span) {
color: inherit !important;
}

View File

@ -81,12 +81,17 @@
border-color: var(--background-dark);
}
@mixin button-active {
background-color: var(--background-active);
color: var(--text-active);
}
@mixin button-disabled {
background-color: var(--background-disabled);
color: var(--text-disabled);
cursor: not-allowed;
&:hover, &:focus {
&:hover, &:active, &:focus {
background-color: var(--background-disabled);
color: var(--text-disabled);
}

View File

@ -36,6 +36,10 @@
z-index: auto;
}
&:active {
@include button-active;
}
&[disabled], &[aria-disabled="true"] {
@include button-disabled;
}

View File

@ -29,8 +29,8 @@
}
/* Avoid applying the base background colour twice, in case its semi-transparent */
> a:not(:hover):not(:focus):not([aria-expanded=true]),
> button:not(:hover):not(:focus):not([aria-expanded=true]) {
> a:not(:hover):not(:focus):not(:active):not([aria-expanded=true]),
> button:not(:hover):not(:focus):not(:active):not([aria-expanded=true]) {
background-color: transparent;
}
@ -311,7 +311,7 @@
animation: fade 0.3s linear;
animation-fill-mode: forwards;
&:hover, &:focus {
&:hover, &:active, &:focus {
background-color: var(--background-base);
}

View File

@ -251,6 +251,10 @@ input {
outline: none !important;
}
&:active + label {
@include button-active;
}
&:disabled + label {
@include button-disabled;
}