diff options
| -rw-r--r-- | src/_mixins.scss | 17 | ||||
| -rw-r--r-- | src/components/extra_buttons/extra_buttons.vue | 10 | ||||
| -rw-r--r-- | src/components/favorite_button/favorite_button.vue | 17 | ||||
| -rw-r--r-- | src/components/react_button/react_button.vue | 10 | ||||
| -rw-r--r-- | src/components/reply_button/reply_button.vue | 10 | ||||
| -rw-r--r-- | src/components/retweet_button/retweet_button.vue | 17 |
6 files changed, 55 insertions, 26 deletions
diff --git a/src/_mixins.scss b/src/_mixins.scss new file mode 100644 index 00000000..1fed16c3 --- /dev/null +++ b/src/_mixins.scss @@ -0,0 +1,17 @@ +@mixin unfocused-style { + @content; + + &:focus:not(:focus-visible):not(:hover) { + @content; + } +} + +@mixin focused-style { + &:hover, &:focus { + @content; + } + + &:focus-visible { + @content; + } +} diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index d15e3102..ae50c316 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -151,6 +151,7 @@ <style lang="scss"> @import '../../_variables.scss'; +@import '../../_mixins.scss'; .ExtraButtons { /* override of popover internal stuff */ @@ -168,12 +169,13 @@ color: var(--text, $fallback--text); } - .focus-marker, - &:focus:not(:focus-visible):not(:hover) .focus-marker { - visibility: hidden; + @include unfocused-style { + .focus-marker { + visibility: hidden; + } } - &:hover, &:focus, &:focus-visible { + @include focused-style { .focus-marker { visibility: visible; } diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index 01db63be..74a1dfbb 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -53,6 +53,7 @@ <style lang="scss"> @import '../../_variables.scss'; +@import '../../_mixins.scss'; .FavoriteButton { display: flex; @@ -78,19 +79,21 @@ color: var(--cOrange, $fallback--cOrange); } - .focus-marker, - &:focus:not(:focus-visible):not(:hover) .focus-marker { - visibility: hidden; - } + @include unfocused-style { + .focus-marker { + visibility: hidden; + } - &:focus:not(:focus-visible):not(:hover) .active-marker { - visibility: visible; + .active-marker { + visibility: visible; + } } - &:hover, &:focus, &:focus-visible { + @include focused-style { .focus-marker { visibility: visible; } + .active-marker { visibility: hidden; } diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index 885869f9..8fa4d08b 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -74,6 +74,7 @@ <style lang="scss"> @import '../../_variables.scss'; +@import '../../_mixins.scss'; .ReactButton { .reaction-picker-filter { @@ -141,12 +142,13 @@ color: var(--text, $fallback--text); } - .focus-marker, - &:focus:not(:focus-visible):not(:hover) .focus-marker { - visibility: hidden; + @include unfocused-style { + .focus-marker { + visibility: hidden; + } } - &:hover, &:focus, &:focus-visible { + @include focused-style { .focus-marker { visibility: visible; } diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue index 0466ceb3..ea97fbaa 100644 --- a/src/components/reply_button/reply_button.vue +++ b/src/components/reply_button/reply_button.vue @@ -46,6 +46,7 @@ <style lang="scss"> @import '../../_variables.scss'; +@import '../../_mixins.scss'; .ReplyButton { display: flex; @@ -67,12 +68,13 @@ color: var(--cBlue, $fallback--cBlue); } - .focus-marker, - &:focus:not(:focus-visible):not(:hover) .focus-marker { - visibility: hidden; + @include unfocused-style { + .focus-marker { + visibility: hidden; + } } - &:hover, &:focus, &:focus-visible { + @include focused-style { .focus-marker { visibility: visible; } diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index d88adacc..396d1200 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -60,6 +60,7 @@ <style lang="scss"> @import '../../_variables.scss'; +@import '../../_mixins.scss'; .RetweetButton { display: flex; @@ -85,19 +86,21 @@ color: var(--cGreen, $fallback--cGreen); } - .focus-marker, - &:focus:not(:focus-visible):not(:hover) .focus-marker { - visibility: hidden; - } + @include unfocused-style { + .focus-marker { + visibility: hidden; + } - &:focus:not(:focus-visible):not(:hover) .active-marker { - visibility: visible; + .active-marker { + visibility: visible; + } } - &:hover, &:focus, &:focus-visible { + @include focused-style { .focus-marker { visibility: visible; } + .active-marker { visibility: hidden; } |