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

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

@@ -37,6 +37,7 @@ export default {
computedClass: function () {
return `button-text-${this.size} ${this.color}-${this.variant}`
},
},
methods: {
click() {
@@ -44,7 +45,6 @@ export default {
}
}
}
}
</script>
<style scoped>
@@ -73,21 +73,27 @@ export default {
@apply text-6xl;
}
.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 {
@apply bg-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 text-black dark:text-white;
}
.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 {
@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 {
@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 {
@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>

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

@@ -1,11 +1,36 @@
<template>
<div class="overflow-y-auto h-screen">
<div
class="overflow-y-auto h-screen"
:class="`${variant}`"
>
<slot />
</div>
</template>
<script>
export default {
name: "BitinflowScreenScrollContainer"
name: "BitinflowScreenScrollContainer",
props: {
variant: {
type: String,
default: 'light'
}
}
}
</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>