Fix styling on Safari
This commit is contained in:
parent
97951fccfd
commit
11672bc490
17
src/_mixins.scss
Normal file
17
src/_mixins.scss
Normal file
@ -0,0 +1,17 @@
|
||||
@mixin unfocused-style {
|
||||
@content;
|
||||
|
||||
&:focus:not(:focus-visible):not(:hover) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin focused-style {
|
||||
&:hover, &:focus {
|
||||
@content;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@content;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
.active-marker {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(:focus-visible):not(:hover) .active-marker {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&:hover, &:focus, &:focus-visible {
|
||||
@include focused-style {
|
||||
.focus-marker {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.active-marker {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
.active-marker {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(:focus-visible):not(:hover) .active-marker {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&:hover, &:focus, &:focus-visible {
|
||||
@include focused-style {
|
||||
.focus-marker {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.active-marker {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user