jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling multiselect in dark mode

Browse Source
This commit is contained in:
Geriano
2022-07-31 11:20:48 +07:00
parent 63ab66b06c
commit dd3a9be30f
5 changed files with 69 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/Components/Input.vue
View File

@@ -21,7 +21,7 @@ defineExpose({ focus: () => input.value.focus() });
<template>
<input
ref="input"
class="w-full bg-white dark:bg-transparent border-gray-300 dark:border-gray-600 dark:text-gray-100 focus:border-indigo-300 dark:focus:border-gray-700 focus:ring focus:ring-indigo-200 dark:focus:ring-gray-600 focus:ring-opacity-50 rounded-md shadow-sm placeholder:capitalize"
class="w-full bg-white dark:bg-transparent border-gray-300 dark:border-gray-600 dark:text-white dark:placeholder:text-white focus:border-indigo-300 dark:focus:border-gray-700 focus:ring focus:ring-indigo-200 dark:focus:ring-gray-600 focus:ring-opacity-50 rounded-md shadow-sm placeholder:capitalize"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>

7
resources/js/Pages/Superuser/Menu/Index.vue
View File

@@ -140,6 +140,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
</script>
<style src="@vueform/multiselect/themes/default.css"></style>
<style src="@/multiselect.css"></style>
<template>
<DashboardLayout title="Menu">
@@ -190,7 +191,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
:createOption="true"
:value="form.route_or_url"
ref="route_or_url"
class="text-gray-800 placeholder:capitalize"
placeholder="route name or url" />
</div>
@@ -209,7 +210,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
:createTag="true"
mode="tags"
ref="actives"
class="text-gray-800 placeholder:capitalize"
placeholder="actives" />
</div>
@@ -230,7 +231,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
:clearOnSelect="false"
mode="tags"
ref="permissions"
class="text-gray-800 placeholder:capitalize"
placeholder="permissions" />
</div>

6
resources/js/Pages/Superuser/Role/Index.vue
View File

@@ -100,6 +100,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
</script>
<style src="@vueform/multiselect/themes/default.css"></style>
<style src="@/multiselect.css"></style>
<template>
<DashboardLayout title="Role">
@@ -191,7 +192,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
</div>
</template>
</Card>
<Modal :show="open">
<form @submit.prevent="submit" class="w-full max-w-xl h-fit shadow-xl">
<Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
@@ -224,7 +225,8 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
:searchable="true"
:clearOnSelect="false"
:closeOnSelect="false"
class="text-gray-800 uppercase"
class="uppercase"
placeholder="permissions"
mode="tags" />
</div>

7
resources/js/Pages/Superuser/User/Index.vue
View File

@@ -127,6 +127,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
</script>
<style src="@vueform/multiselect/themes/default.css"></style>
<style src="@/multiselect.css"></style>
<template>
<DashboardLayout title="User">
@@ -318,7 +319,8 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
:clearOnSelect="false"
:closeOnSelect="false"
:searchable="true"
class="text-gray-800 uppercase"
class="uppercase"
placeholder="permissions"
mode="tags" />
</div>
@@ -337,7 +339,8 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
:searchable="true"
:clearOnSelect="false"
:closeOnSelect="false"
class="text-gray-800 uppercase"
class="uppercase"
placeholder="roles"
mode="tags" />
</div>

55
resources/js/multiselect.css Normal file
View File

@@ -0,0 +1,55 @@
.multiselect {
@apply dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200;
}
.multiselect-tags-search {
@apply dark:bg-gray-700 dark:text-gray-200;
}
.multiselect.is-disabled {
@apply dark:bg-gray-600 dark:border-gray-700 dark:text-gray-300;
}
.multiselect.is-active {
box-shadow: 0 0 0 var(--ms-ring-width, 3px) var(--ms-ring-color, rgba(16, 185, 129, 0.188));
}
.multiselect-placeholder {
@apply dark:text-gray-300;
}
.multiselect-search {
@apply dark:bg-gray-700;
}
.multiselect-tag.is-disabled {
@apply dark:bg-gray-600 dark:text-gray-300;
}
.multiselect-tag-remove:hover {
@apply dark:bg-gray-500;
}
.multiselect-clear:hover .multiselect-clear-icon {
@apply dark:bg-white;
}
.multiselect-clear-icon {
@apply dark:bg-gray-600;
}
.multiselect-caret {
@apply dark:bg-gray-600;
}
.multiselect-dropdown {
@apply dark:bg-gray-700 dark:border-gray-800;
}
.multiselect-group-label {
@apply dark:bg-gray-700 dark:text-gray-200;
}
.multiselect-group-label.is-pointed {
@apply dark:bg-gray-600 dark:text-gray-300;
}
.multiselect-group-label.is-disabled {
@apply dark:bg-gray-700 dark:text-gray-200;
}
.multiselect-option.is-pointed {
@apply dark:bg-gray-700 text-gray-200;
}
.multiselect-option.is-disabled {
@apply dark:bg-gray-700 dark:text-gray-200;
}
.multiselect-no-options,
.multiselect-no-results {
@apply dark:text-gray-200;
}