diff options
| author | Hazelnoot <acomputerdog@gmail.com> | 2025-05-10 12:12:54 -0400 |
|---|---|---|
| committer | Hazelnoot <acomputerdog@gmail.com> | 2025-05-16 17:39:43 -0400 |
| commit | 2da1590e8a4a640edd2348f589fedff32565108e (patch) | |
| tree | 5654309d316770a36e40d57c8715b11c29301a29 /packages/frontend/src/components | |
| parent | respect animation prefs in MkNumber (diff) | |
| download | sharkey-2da1590e8a4a640edd2348f589fedff32565108e.tar.gz sharkey-2da1590e8a4a640edd2348f589fedff32565108e.tar.bz2 sharkey-2da1590e8a4a640edd2348f589fedff32565108e.zip | |
add "accent" styling to MkButton
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkButton.vue | 23 |
1 files changed, 21 insertions, 2 deletions
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue index d37f7f39f8..53453be2c1 100644 --- a/packages/frontend/src/components/MkButton.vue +++ b/packages/frontend/src/components/MkButton.vue @@ -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); |