clone/vikunja
1
0
Fork 0
mirror of https://github.com/go-vikunja/vikunja.git synced 2026-04-24 22:25:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: move bulma button styles to button component

Browse Source
This commit is contained in:
kolaente
2026-01-08 12:52:36 +01:00
parent 672d92a3e4
commit 40287a1570
2 changed files with 95 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
frontend/src/components/input/Button.vue
View File

@@ -71,6 +71,16 @@ const variantClass = computed<string>(() => VARIANT_CLASS_MAP[variant.value])
<style lang="scss" scoped>
.button {
// Base structure (replaces Bulma's .button)
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: top;
cursor: pointer;
text-align: center;
white-space: var(--button-white-space);
// Custom styles
transition: all $transition;
border: 0;
text-transform: uppercase;
@@ -79,24 +89,28 @@ const variantClass = computed<string>(() => VARIANT_CLASS_MAP[variant.value])
block-size: auto;
min-block-size: $button-height;
box-shadow: var(--shadow-sm);
white-space: var(--button-white-space);
line-height: 1;
display: inline-flex;
padding-inline: 0; // override bulma style // override bulma style
padding-inline: .5rem;
gap: .25rem;
// Default/Primary variant colors
background-color: var(--primary);
color: var(--white);
border-radius: $radius;
[dir="rtl"] & {
flex-direction: row-reverse;
}
&:hover {
box-shadow: var(--shadow-md);
background-color: var(--primary-dark, color-mix(in srgb, var(--primary) 85%, black));
}
&.fullheight {
padding-inline-end: 7px;
block-size: 100%;
&:focus,
&:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
&.is-active,
@@ -107,13 +121,85 @@ const variantClass = computed<string>(() => VARIANT_CLASS_MAP[variant.value])
box-shadow: var(--shadow-xs) !important;
}
&.is-primary.is-outlined:hover {
color: var(--white);
&[disabled] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.icon {
margin: 0 !important;
}
// Primary variant (default, explicit)
&.is-primary {
background-color: var(--primary);
color: var(--white);
&:hover {
background-color: var(--primary-dark, color-mix(in srgb, var(--primary) 85%, black));
}
}
// Secondary/Outlined variant
&.is-outlined {
background-color: var(--scheme-main);
color: var(--grey-900);
&:hover {
color: var(--grey-600);
}
}
// Tertiary/Text variant
&.is-text {
background-color: transparent;
color: var(--text);
box-shadow: none;
&:hover {
background-color: var(--grey-100);
box-shadow: none;
}
}
&.is-inverted {
// Used with is-text for tertiary buttons
color: inherit;
}
// Loading state
&.is-loading {
color: transparent !important;
pointer-events: none;
position: relative;
&::after {
content: "";
position: absolute;
display: block;
block-size: 1em;
inline-size: 1em;
border: 2px solid currentColor;
border-radius: 50%;
border-inline-end-color: transparent;
border-block-start-color: transparent;
animation: spin-around 500ms infinite linear;
// Center the spinner
inset-inline-start: calc(50% - 0.5em);
inset-block-start: calc(50% - 0.5em);
}
}
}
@keyframes spin-around {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.is-small {

2
frontend/src/styles/global.scss
View File

@@ -22,7 +22,7 @@
// imports from "bulma-css-variables/sass/elements/_all";
@import "bulma-css-variables/sass/elements/box";
@import "bulma-css-variables/sass/elements/button";
// @import "bulma-css-variables/sass/elements/button"; // Moved to Button.vue component
@import "bulma-css-variables/sass/elements/container";
@import "bulma-css-variables/sass/elements/content";
@import "bulma-css-variables/sass/elements/icon";