github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-02 19:25:00 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add button style props

Browse Source
This commit is contained in:
rijkvanzanten
2021-06-11 21:22:19 -04:00
parent dbb96982fa
commit 0a8a3addee
1 changed files with 40 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/src/components/v-button/v-button.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="v-button" :class="{ secondary, 'full-width': fullWidth }">
<div class="v-button" :class="{ secondary, warning, danger, 'full-width': fullWidth }">
<slot name="prepend-outer" />
<component
v-focus="autofocus"
@@ -108,6 +108,14 @@ export default defineComponent({
type: Boolean,
default: false,
},
warning: {
type: Boolean,
default: false,
},
danger: {
type: Boolean,
default: false,
},
value: {
type: [Number, String],
default: null,
@@ -209,6 +217,37 @@ export default defineComponent({
--v-button-background-color-active: var(--background-normal-alt);
}
.secondary.rounded {
--v-button-background-color: var(--background-normal);
--v-button-background-color-active: var(--background-normal);
--v-button-background-color-hover: var(--background-normal-alt);
--v-button-color-disabled: var(--foreground-normal);
}
.warning {
--v-button-background-color: var(--warning);
--v-button-background-color-hover: var(--warning-125);
}
.warning.rounded {
--v-button-background-color: var(--warning-10);
--v-button-color: var(--warning);
--v-button-background-color-hover: var(--warning-25);
--v-button-color-hover: var(--warning);
}
.danger {
--v-button-background-color: var(--danger);
--v-button-background-color-hover: var(--danger-125);
}
.danger.rounded {
--v-button-background-color: var(--danger-10);
--v-button-color: var(--danger);
--v-button-background-color-hover: var(--danger-25);
--v-button-color-hover: var(--danger);
}
.v-button.full-width {
display: flex;
min-width: 100%;