feat: centralize frontend Vuetify styling
This commit is contained in:
@@ -148,7 +148,7 @@
|
||||
<span>{{ labels.description }}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
<v-btn variant="text" :ripple="false"
|
||||
type="button"
|
||||
class="secondary-button"
|
||||
:disabled="disabled"
|
||||
@@ -156,7 +156,7 @@
|
||||
>
|
||||
<v-icon :icon="mdiPlus" />
|
||||
<span>{{ labels.addStep }}</span>
|
||||
</button>
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -182,30 +182,30 @@
|
||||
</div>
|
||||
|
||||
<div class="approval-step-actions">
|
||||
<button
|
||||
<v-btn variant="text" :ripple="false"
|
||||
type="button"
|
||||
:aria-label="labels.moveUp"
|
||||
:disabled="disabled || index === 0"
|
||||
@click="moveStep(index, -1)"
|
||||
>
|
||||
<v-icon :icon="mdiArrowUp" />
|
||||
</button>
|
||||
<button
|
||||
</v-btn>
|
||||
<v-btn variant="text" :ripple="false"
|
||||
type="button"
|
||||
:aria-label="labels.moveDown"
|
||||
:disabled="disabled || index === modelValue.length - 1"
|
||||
@click="moveStep(index, 1)"
|
||||
>
|
||||
<v-icon :icon="mdiArrowDown" />
|
||||
</button>
|
||||
<button
|
||||
</v-btn>
|
||||
<v-btn variant="text" :ripple="false"
|
||||
type="button"
|
||||
:aria-label="labels.removeStep"
|
||||
:disabled="disabled"
|
||||
@click="removeStep(index)"
|
||||
>
|
||||
<v-icon :icon="mdiDeleteOutline" />
|
||||
</button>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -321,8 +321,8 @@
|
||||
|
||||
.approval-editor-header {
|
||||
@apply flex flex-col gap-3 rounded-[1rem] border px-4 py-4 sm:flex-row sm:items-center sm:justify-between;
|
||||
background: #fffaf2;
|
||||
border-color: rgba(23, 32, 51, 0.08);
|
||||
background: var(--app-color-on-primary);
|
||||
border-color: var(--app-border-subtle);
|
||||
}
|
||||
|
||||
.approval-editor-header div,
|
||||
@@ -332,14 +332,14 @@
|
||||
|
||||
.approval-editor-header strong,
|
||||
.approval-step-heading strong {
|
||||
color: #172033;
|
||||
color: var(--app-color-on-surface);
|
||||
}
|
||||
|
||||
.approval-editor-header span,
|
||||
.approval-empty,
|
||||
.approval-step-heading small {
|
||||
@apply text-sm leading-6;
|
||||
color: #526178;
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.approval-step-list {
|
||||
@@ -349,8 +349,8 @@
|
||||
.approval-empty,
|
||||
.approval-step-card {
|
||||
@apply rounded-[1rem] border px-4 py-4;
|
||||
background: #fffaf2;
|
||||
border-color: rgba(23, 32, 51, 0.08);
|
||||
background: var(--app-color-on-primary);
|
||||
border-color: var(--app-border-subtle);
|
||||
}
|
||||
|
||||
.approval-step-card {
|
||||
@@ -367,8 +367,8 @@
|
||||
|
||||
.approval-step-actions button {
|
||||
@apply inline-flex h-9 w-9 items-center justify-center rounded-full;
|
||||
background: rgba(23, 32, 51, 0.08);
|
||||
color: #172033;
|
||||
background: var(--app-border-subtle);
|
||||
color: var(--app-color-on-surface);
|
||||
}
|
||||
|
||||
.approval-step-actions button:disabled {
|
||||
@@ -382,8 +382,8 @@
|
||||
|
||||
.secondary-button {
|
||||
@apply inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm font-semibold;
|
||||
background: rgba(23, 32, 51, 0.08);
|
||||
color: #172033;
|
||||
background: var(--app-border-subtle);
|
||||
color: var(--app-color-on-surface);
|
||||
}
|
||||
|
||||
.secondary-button:disabled {
|
||||
@@ -397,25 +397,25 @@
|
||||
|
||||
.field span {
|
||||
@apply text-sm font-semibold;
|
||||
color: #172033;
|
||||
color: var(--app-color-on-surface);
|
||||
}
|
||||
|
||||
.field input,
|
||||
.field select {
|
||||
@apply rounded-[1rem] border px-4 py-3 text-sm;
|
||||
background: #fffdf8;
|
||||
border-color: rgba(23, 32, 51, 0.1);
|
||||
color: #172033;
|
||||
background: var(--app-color-surface);
|
||||
border-color: var(--app-control-active);
|
||||
color: var(--app-color-on-surface);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-error {
|
||||
@apply text-sm leading-6;
|
||||
color: #b91c1c;
|
||||
color: var(--app-danger-muted);
|
||||
}
|
||||
|
||||
.field-help {
|
||||
@apply text-sm leading-6;
|
||||
color: #526178;
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user