mirror of
https://github.com/Mr-Wiseguy/Zelda64Recomp.git
synced 2024-11-05 22:35:06 +01:00
improved ui non-mouse focus callout
This commit is contained in:
parent
a293673a32
commit
0555d5cd97
File diff suppressed because one or more lines are too long
@ -5,6 +5,7 @@
|
||||
@import "./vars/borders";
|
||||
@import "./vars/gradients";
|
||||
@import "./vars/transitions";
|
||||
@import "./vars/animations";
|
||||
@import "./mixins/typography";
|
||||
@import "./mixins/transitions";
|
||||
@import "./mixins/helpers";
|
||||
|
@ -114,17 +114,18 @@
|
||||
|
||||
.config-option__tab-label {
|
||||
@extend %label-sm;
|
||||
@include trans-colors-opa;
|
||||
display: block;
|
||||
padding: space(12) 0 space(8);
|
||||
position: relative;
|
||||
padding: space(8) 0;
|
||||
height: auto;
|
||||
margin: 0 space(12);
|
||||
margin-right: space(16);
|
||||
margin: space(4) space(12) 0;
|
||||
color: $color-text-inactive;
|
||||
tab-index: none;
|
||||
transition: color $transition-quick;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
|
||||
@ -138,13 +139,20 @@
|
||||
&:not(:disabled) {
|
||||
&:checked + .config-option__tab-label {
|
||||
border-bottom: 1dp;
|
||||
border-color: $color-border-hard;
|
||||
border-color: $color-text;
|
||||
color: $color-text;
|
||||
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.rmlui-window:not([mouse-active]) &:focus + .config-option__tab-label {
|
||||
animation: $focus-anim-border;
|
||||
color: $color-secondary;
|
||||
border-color: $color-secondary;
|
||||
}
|
||||
|
||||
&:focus + .config-option__tab-label,
|
||||
&:hover + .config-option__tab-label {
|
||||
color: $color-text;
|
||||
@ -179,7 +187,7 @@
|
||||
|
||||
.rmlui-window:not([mouse-active]) &:focus {
|
||||
@include border($color-a);
|
||||
background-color: $color-secondary;
|
||||
animation: $focus-anim-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -201,7 +209,7 @@
|
||||
|
||||
.config-option__details {
|
||||
@extend %label-xs;
|
||||
color: $color-secondary;
|
||||
color: $color-primary;
|
||||
margin: space(14) space(12) 0;
|
||||
height: space(18);
|
||||
}
|
||||
|
@ -37,6 +37,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.rmlui-window:not([mouse-active]) &:focus {
|
||||
animation: $focus-anim-border;
|
||||
|
||||
&:selected .tab__indicator {
|
||||
animation: $focus-anim-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
cursor: pointer;
|
||||
color: $color-text;
|
||||
|
@ -80,3 +80,42 @@ h3 {
|
||||
button {
|
||||
background-color: $color-primary-d;
|
||||
}
|
||||
|
||||
@keyframes blue-pulse {
|
||||
0% {
|
||||
color: $color-secondary;
|
||||
}
|
||||
50% {
|
||||
color: $color-secondary-l;
|
||||
}
|
||||
to {
|
||||
color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blue-pulse-with-border {
|
||||
0% {
|
||||
color: $color-secondary;
|
||||
border-color: $color-secondary;
|
||||
}
|
||||
50% {
|
||||
color: $color-secondary-l;
|
||||
border-color: $color-secondary-l;
|
||||
}
|
||||
to {
|
||||
color: $color-secondary;
|
||||
border-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blue-pulse-background {
|
||||
0% {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
50% {
|
||||
background-color: $color-secondary-l;
|
||||
}
|
||||
to {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
4
assets/scss/styles/vars/_animations.scss
Normal file
4
assets/scss/styles/vars/_animations.scss
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
$focus-anim: blue-pulse-with-border 0.75s infinite;
|
||||
$focus-anim-border: blue-pulse 0.75s infinite;
|
||||
$focus-anim-bg: blue-pulse-background 0.75s infinite;
|
Loading…
Reference in New Issue
Block a user