chore: Update styles in settings pages (#11070)
--------- Co-authored-by: Pranav <pranavrajs@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
This commit is contained in:
@@ -135,7 +135,7 @@ export default {
|
||||
<div
|
||||
class="flex items-start justify-start flex-auto flex-grow flex-shrink overflow-auto"
|
||||
>
|
||||
<div class="w-full">
|
||||
<div class="w-full my-1">
|
||||
<woot-dropdown-menu>
|
||||
<LabelDropdownItem
|
||||
v-for="label in filteredActiveLabels"
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
<script>
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NextButton,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@@ -26,60 +31,29 @@ export default {
|
||||
|
||||
<template>
|
||||
<woot-dropdown-item>
|
||||
<div class="item-wrap">
|
||||
<woot-button variant="clear" @click="onClick">
|
||||
<div class="button-wrap">
|
||||
<div class="name-label-wrap">
|
||||
<div
|
||||
v-if="color"
|
||||
class="label-color--display"
|
||||
:style="{ backgroundColor: color }"
|
||||
/>
|
||||
<span class="label-text" :title="title">{{ title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<i v-if="selected" class="i-lucide-circle-check" />
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
</div>
|
||||
<NextButton
|
||||
slate
|
||||
ghost
|
||||
blue
|
||||
trailing-icon
|
||||
:icon="selected ? 'i-lucide-circle-check' : ''"
|
||||
class="w-full !px-2.5 justify-between"
|
||||
:class="{ '!flex-row': !selected }"
|
||||
@click="onClick"
|
||||
>
|
||||
<div class="flex items-center min-w-0 gap-2">
|
||||
<div
|
||||
v-if="color"
|
||||
class="size-3 flex-shrink-0 rounded-full outline outline-1 outline-n-weak"
|
||||
:style="{ backgroundColor: color }"
|
||||
/>
|
||||
<span
|
||||
class="overflow-hidden text-ellipsis whitespace-nowrap leading-[1.1]"
|
||||
:title="title"
|
||||
>
|
||||
{{ title }}
|
||||
</span>
|
||||
</div>
|
||||
</NextButton>
|
||||
</woot-dropdown-item>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item-wrap {
|
||||
@apply flex;
|
||||
|
||||
::v-deep .button__content {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.button-wrap {
|
||||
@apply flex justify-between w-full;
|
||||
|
||||
&.active {
|
||||
@apply flex font-semibold text-woot-700 dark:text-woot-600;
|
||||
}
|
||||
|
||||
.name-label-wrap {
|
||||
@apply flex min-w-0 w-full;
|
||||
|
||||
.label-color--display {
|
||||
@apply mr-2 rtl:mr-0 rtl:ml-2;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
@apply overflow-hidden text-ellipsis whitespace-nowrap leading-[1.1] pr-2;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@apply text-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-color--display {
|
||||
@apply rounded-md h-3 mr-1 rtl:mr-0 rtl:ml-1 mt-0.5 min-w-[0.75rem] w-3 border border-solid border-slate-50 dark:border-slate-600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user