mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-07-08 13:04:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/frontend/src/components/MkButton.vue
View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<button <button
v-if="!link" v-if="!link"
ref="el" class="_button" 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" :type="type"
:name="name" :name="name"
:value="value" :value="value"
@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</button> </button>
<MkA <MkA
v-else class="_button" 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 ?? '#'" :to="to ?? '#'"
:behavior="linkBehavior" :behavior="linkBehavior"
@mousedown="onMousedown" @mousedown="onMousedown"
@ -48,6 +48,7 @@ const props = defineProps<{
linkBehavior?: null | 'window' | 'browser'; linkBehavior?: null | 'window' | 'browser';
autofocus?: boolean; autofocus?: boolean;
wait?: boolean; wait?: boolean;
accent?: boolean;
danger?: boolean; danger?: boolean;
full?: boolean; full?: boolean;
small?: 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 { &.danger {
font-weight: bold; font-weight: bold;
color: var(--MI_THEME-error); color: var(--MI_THEME-error);