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:
Sivin Varghese
2025-03-19 03:10:02 +05:30
committed by GitHub
parent 9d49b69f2e
commit 8066b36ebf
101 changed files with 1320 additions and 1273 deletions

View File

@@ -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"

View File

@@ -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>