bitinflow/ui
1
0
Fork 0
mirror of https://github.com/bitinflow/ui.git synced 2026-03-13 13:45:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Color tuning

Browse Source
This commit is contained in:
René Preuß
2023-02-20 12:33:18 +01:00
parent 9dab7e782e
commit ba9aa2e1b2
2 changed files with 41 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/runtime/components/BitinflowButton.vue
View File

@@ -37,11 +37,11 @@ export default {
computedClass: function () { computedClass: function () {
return `button-text-${this.size} ${this.color}-${this.variant}` return `button-text-${this.size} ${this.color}-${this.variant}`
}, },
},
methods: { methods: {
click() { click() {
this.$emit('click'); this.$emit('click');
}
} }
} }
} }
@@ -73,21 +73,27 @@ export default {
@apply text-6xl; @apply text-6xl;
} }
.primary-solid { .primary-solid {
@apply bg-primary-500 hover:bg-primary-400 dark:bg-primary-500 dark:hover:bg-primary-600 text-black dark:text-white; @apply bg-primary-600 hover:bg-primary-400 dark:bg-primary-500 dark:hover:bg-primary-400 text-black dark:text-white;
} }
.base-solid { .base-solid {
@apply bg-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 text-black dark:text-white; @apply bg-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 text-black dark:text-white;
} }
.danger-solid { .danger-solid {
@apply bg-rose-600 hover:bg-rose-400 dark:bg-rose-500 dark:hover:bg-rose-600 text-black dark:text-white; @apply bg-rose-600 hover:bg-rose-400 dark:bg-rose-500 dark:hover:bg-rose-400 text-black dark:text-white;
}
.warning-solid {
@apply bg-amber-600 hover:bg-amber-400 dark:bg-amber-500 dark:hover:bg-amber-400 text-black dark:text-white;
} }
.primary-outline { .primary-outline {
@apply border-primary-500 hover:bg-primary-500 dark:hover:bg-primary-600 dark:border-primary-700 dark:hover:border-primary-600 text-black dark:text-white; @apply border-primary-500 hover:bg-primary-500 dark:hover:bg-primary-500 dark:border-primary-500 dark:hover:border-primary-500 text-primary-500 hover:text-white;
}
.warning-outline {
@apply border-amber-500 hover:bg-amber-500 dark:hover:bg-amber-500 dark:border-amber-500 dark:hover:border-amber-500 text-amber-500 hover:text-white;
} }
.base-outline { .base-outline {
@apply border-zinc-200 hover:bg-zinc-200 dark:hover:bg-base-700 dark:border-base-500 dark:hover:border-base-500 text-black dark:text-white; @apply border-zinc-200 hover:bg-zinc-200 dark:hover:bg-base-700 dark:border-base-500 dark:hover:border-base-500 text-black dark:text-white;
} }
.danger-outline { .danger-outline {
@apply border-rose-500 hover:bg-rose-500 dark:hover:bg-rose-600 dark:border-rose-700 dark:hover:border-rose-600 text-black dark:text-white; @apply border-rose-500 hover:bg-rose-500 dark:hover:bg-rose-500 dark:border-rose-500 dark:hover:border-rose-500 text-rose-500 hover:text-white;
} }
</style> </style>

29
src/runtime/components/BitinflowScreenScrollContainer.vue
View File

@@ -1,11 +1,36 @@
<template> <template>
<div class="overflow-y-auto h-screen"> <div
class="overflow-y-auto h-screen"
:class="`${variant}`"
>
<slot /> <slot />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "BitinflowScreenScrollContainer" name: "BitinflowScreenScrollContainer",
props: {
variant: {
type: String,
default: 'light'
}
}
} }
</script> </script>
<style>
.light::-webkit-scrollbar-thumb {
@apply bg-gray-200;
}
.light::-webkit-scrollbar-thumb:hover {
@apply bg-gray-200;
}
.dark .light::-webkit-scrollbar-thumb {
@apply bg-base-800;
}
.dark .light::-webkit-scrollbar-thumb:hover {
@apply bg-base-800;
}
</style>