commit: bcc9d9b851687f065d7af3b48e28166aa8e9ec20
parent 97c9b6e25d8b544bbb70056762045949661717b0
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 18 Feb 2025 22:31:33 +0200
fix sass warnings
Diffstat:
11 files changed, 133 insertions(+), 144 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -1,6 +1,6 @@
// stylelint-disable rscss/class-format
/* stylelint-disable no-descending-specificity */
-@import "./panel";
+@use "panel";
:root {
--status-margin: 0.75em;
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
@@ -95,6 +95,4 @@
</template>
<script src="./chat.js"></script>
-<style lang="scss">
-@import "./chat";
-</style>
+<style src="./chat.scss" lang="scss" />
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
@@ -47,6 +47,4 @@
<script src="./chat_list_item.js"></script>
-<style lang="scss">
-@import "./chat_list_item";
-</style>
+<style src="./chat_list_item.scss" lang="scss" />
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
@@ -98,7 +98,5 @@
</template>
<script src="./chat_message.js"></script>
-<style lang="scss">
-@import "./chat_message";
-</style>
+<style src="./chat_message.scss" lang="scss" />
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
@@ -47,6 +47,5 @@
</template>
<script src="./chat_new.js"></script>
-<style lang="scss">
-@import "./chat_new";
-</style>
+
+<style src="./chat_new.scss" lang="scss" />
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
@@ -63,8 +63,6 @@ export default {
</script>
<style lang="scss">
-@import "../../mixins";
-
.checkbox {
position: relative;
display: inline-block;
diff --git a/src/components/emoji_reactions/emoji_reactions.scss b/src/components/emoji_reactions/emoji_reactions.scss
@@ -0,0 +1,121 @@
+@use "../../mixins";
+
+.EmojiReactions {
+ display: flex;
+ margin-top: 0.25em;
+ flex-wrap: wrap;
+
+ --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
+
+ .emoji-reaction-container {
+ display: flex;
+ align-items: stretch;
+ margin-top: 0.5em;
+ margin-right: 0.5em;
+
+ .emoji-reaction-popover {
+ padding: 0;
+
+ .emoji-reaction-count-button {
+ margin: 0;
+ height: 100%;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ box-sizing: border-box;
+ min-width: 2em;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+ }
+
+ .emoji-reaction {
+ padding-left: 0.5em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ margin: 0;
+
+ .reaction-emoji {
+ width: var(--emoji-size);
+ height: var(--emoji-size);
+ margin-right: 0.25em;
+ line-height: var(--emoji-size);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ --_still_image-label-scale: 0.3;
+ }
+
+ .reaction-emoji-content {
+ max-width: 100%;
+ max-height: 100%;
+ width: var(--emoji-size);
+ height: var(--emoji-size);
+ line-height: inherit;
+ overflow: hidden;
+ font-size: calc(var(--emoji-size) * 0.8);
+ margin: 0;
+
+ img {
+ object-fit: contain;
+ }
+ }
+
+ &:focus {
+ outline: none;
+ }
+
+ .svg-inline--fa {
+ color: var(--text);
+ }
+
+ &.-picked-reaction {
+ .svg-inline--fa {
+ color: var(--accent);
+ }
+ }
+
+ @include mixins.unfocused-style {
+ .focus-marker {
+ visibility: hidden;
+ }
+
+ .active-marker {
+ visibility: visible;
+ }
+ }
+
+ @include mixins.focused-style {
+ .svg-inline--fa {
+ color: var(--accent);
+ }
+
+ .focus-marker {
+ visibility: visible;
+ }
+
+ .active-marker {
+ visibility: hidden;
+ }
+ }
+ }
+
+ .emoji-reaction-expand {
+ padding: 0 0.5em;
+ margin-right: 0.5em;
+ margin-top: 0.5em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
@@ -70,126 +70,5 @@
</template>
<script src="./emoji_reactions.js"></script>
-<style lang="scss">
-@import "../../mixins";
-.EmojiReactions {
- display: flex;
- margin-top: 0.25em;
- flex-wrap: wrap;
-
- --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
-
- .emoji-reaction-container {
- display: flex;
- align-items: stretch;
- margin-top: 0.5em;
- margin-right: 0.5em;
-
- .emoji-reaction-popover {
- padding: 0;
-
- .emoji-reaction-count-button {
- margin: 0;
- height: 100%;
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- box-sizing: border-box;
- min-width: 2em;
- display: inline-flex;
- justify-content: center;
- align-items: center;
- }
- }
- }
-
- .emoji-reaction {
- padding-left: 0.5em;
- display: flex;
- align-items: center;
- justify-content: center;
- box-sizing: border-box;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- margin: 0;
-
- .reaction-emoji {
- width: var(--emoji-size);
- height: var(--emoji-size);
- margin-right: 0.25em;
- line-height: var(--emoji-size);
- display: flex;
- justify-content: center;
- align-items: center;
-
- --_still_image-label-scale: 0.3;
- }
-
- .reaction-emoji-content {
- max-width: 100%;
- max-height: 100%;
- width: var(--emoji-size);
- height: var(--emoji-size);
- line-height: inherit;
- overflow: hidden;
- font-size: calc(var(--emoji-size) * 0.8);
- margin: 0;
-
- img {
- object-fit: contain;
- }
- }
-
- &:focus {
- outline: none;
- }
-
- .svg-inline--fa {
- color: var(--text);
- }
-
- &.-picked-reaction {
- .svg-inline--fa {
- color: var(--accent);
- }
- }
-
- @include unfocused-style {
- .focus-marker {
- visibility: hidden;
- }
-
- .active-marker {
- visibility: visible;
- }
- }
-
- @include focused-style {
- .svg-inline--fa {
- color: var(--accent);
- }
-
- .focus-marker {
- visibility: visible;
- }
-
- .active-marker {
- visibility: hidden;
- }
- }
- }
-
- .emoji-reaction-expand {
- padding: 0 0.5em;
- margin-right: 0.5em;
- margin-top: 0.5em;
- display: flex;
- align-items: center;
- justify-content: center;
-
- &:hover {
- text-decoration: underline;
- }
- }
-}
-</style>
+<style src="./emoji_reactions.scss" lang="scss" />
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -238,6 +238,4 @@
<script src="./mrf_transparency_panel.js"></script>
-<style lang="scss">
-@import "./mrf_transparency_panel";
-</style>
+<style src="./mrf_transparency_panel.scss" lang="scss"/>
diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss
@@ -1,4 +1,4 @@
-@import "../../mixins";
+@use "../../mixins";
/* stylelint-disable declaration-no-important */
.quick-action {
@@ -52,7 +52,7 @@
grid-auto-columns: max-content;
align-items: center;
- @include unfocused-style {
+ @include mixins.unfocused-style {
.focus-marker {
visibility: hidden;
}
@@ -62,7 +62,7 @@
}
}
- @include focused-style {
+ @include mixins.focused-style {
.focus-marker {
visibility: visible;
}
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
@@ -1,4 +1,4 @@
-@import "../../mixins";
+@use "../../mixins";
.StatusActionButtons {
.quick-action-buttons {
