moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make post status form use focused-style

This commit is contained in:
tusooa 2023-03-02 21:55:16 -05:00
parent 3a8de1e449
commit c1d6541901
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/_mixins.scss
View File

@ -16,3 +16,15 @@
@content; @content;
} }
} }
@mixin focused-style-with($selectors...) {
@include focused-style {
@content;
}
@each $selector in $selectors {
#{$selector} {
@content;
}
}
}

11
src/components/post_status_form/post_status_form.vue
View File

@ -88,6 +88,9 @@
> >
<a <a
class="preview-toggle faint" class="preview-toggle faint"
role="button"
tabindex="0"
:aria-expanded="showPreview"
@click.stop.prevent="togglePreview" @click.stop.prevent="togglePreview"
> >
{{ $t('post_status.preview') }} {{ $t('post_status.preview') }}
@ -346,6 +349,7 @@
<style lang="scss"> <style lang="scss">
@import "../../variables"; @import "../../variables";
@import "src/mixins";
.post-status-form { .post-status-form {
position: relative; position: relative;
@ -389,7 +393,7 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
&:hover { @focused-style {
text-decoration: underline; text-decoration: underline;
} }
@ -470,8 +474,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
&.selected, @include focused-style-with("&.selected") {
&:hover {
// needs to be specific to override icon default color // needs to be specific to override icon default color
svg, svg,
i, i,
@ -488,7 +491,7 @@
color: $fallback--icon; color: $fallback--icon;
color: var(--btnDisabledText, $fallback--icon); color: var(--btnDisabledText, $fallback--icon);
&:hover { @include focused-style {
color: $fallback--icon; color: $fallback--icon;
color: var(--btnDisabledText, $fallback--icon); color: var(--btnDisabledText, $fallback--icon);
} }