kaslo/pawkey-sk
1
0
Fork 0
Code Packages Activity

add "accent" styling to MkButton

Browse Source
This commit is contained in:
Hazelnoot
2025-05-10 12:12:54 -04:00
parent fd339717c7
commit 2da1590e8a
1 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/MkButton.vue
+21 -2
View File
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<button
v-if="!link"
ref="el" class="_button"
:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait }]"
:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.accent]: accent, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait }]"
:type="type"
:name="name"
:value="value"
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</button>
<MkA
v-else class="_button"
:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait }]"
:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.accent]: accent, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait }]"
:to="to ?? '#'"
:behavior="linkBehavior"
@mousedown="onMousedown"
@@ -48,6 +48,7 @@ const props = defineProps<{
linkBehavior?: null | 'window' | 'browser';
autofocus?: boolean;
wait?: boolean;
accent?: boolean;
danger?: boolean;
full?: boolean;
small?: boolean;
@@ -234,6 +235,24 @@ function onMousedown(evt: MouseEvent): void {
}
}
&.accent {
font-weight: bold;
color: var(--MI_THEME-accent);
&.primary {
color: #fff;
background: var(--MI_THEME-accent);
&:not(:disabled):hover {
background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
}
&:not(:disabled):active {
background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
}
}
}
&.danger {
font-weight: bold;
color: var(--MI_THEME-error);