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

@@ -1,13 +1,13 @@
@mixin label-multiselect-hover {
&::after {
@apply text-woot-600 dark:text-woot-600;
@apply text-n-brand;
}
&:hover {
@apply bg-slate-50 dark:bg-slate-700;
@apply bg-n-slate-3;
&::after {
@apply text-woot-500 dark:text-woot-500;
@apply text-n-blue-text;
}
}
}
@@ -18,20 +18,16 @@
}
&.multiselect--disabled {
@apply opacity-50 border border-slate-200 dark:border-slate-600 rounded-md cursor-not-allowed;
@apply opacity-50 rounded-lg cursor-not-allowed pointer-events-auto;
.multiselect__select {
@apply cursor-not-allowed bg-white dark:bg-slate-900 rounded-md;
}
.multiselect__tags {
@apply border-0;
@apply cursor-not-allowed bg-transparent rounded-lg;
}
}
.multiselect--active {
> .multiselect__tags {
@apply border-woot-500 dark:border-woot-500;
@apply outline-n-blue-border;
}
}
@@ -44,7 +40,7 @@
}
.multiselect__content-wrapper {
@apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
@apply bg-n-alpha-black2 text-n-slate-12 backdrop-blur-[100px] border-0 border-none outline outline-1 outline-n-weak rounded-b-lg;
}
.multiselect__content {
@@ -61,15 +57,19 @@
@apply mb-0;
}
&::after {
@apply bottom-0 flex items-center justify-center text-center;
}
&.multiselect__option--highlight {
@apply bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100;
@apply bg-n-alpha-black2 text-n-slate-12;
}
&.multiselect__option--highlight:hover {
@apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
@apply bg-n-brand/10 text-n-slate-12;
&::after {
@apply bg-woot-50 dark:bg-woot-600 text-slate-600 dark:text-slate-200;
@apply bg-transparent text-center text-n-slate-12;
}
}
@@ -78,17 +78,17 @@
}
&.multiselect__option--selected {
@apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
@apply bg-n-brand/20 text-n-slate-12;
&::after {
@apply bg-transparent;
}
&.multiselect__option--highlight:hover {
@apply bg-woot-75 dark:bg-woot-600;
&::after {
@apply bg-transparent;
}
@apply bg-transparent;
&::after:hover {
@apply text-slate-800 dark:text-slate-100;
@apply text-n-slate-12 bg-transparent;
}
}
}
@@ -96,23 +96,27 @@
}
.multiselect__tags {
@apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 m-0 min-h-[2.875rem] pt-0;
@apply bg-n-alpha-black2 border-0 grid items-center w-full border-none outline-1 outline outline-n-weak hover:outline-n-slate-6 m-0 min-h-[2.875rem] rounded-lg pt-0;
input {
@apply border-0 border-none;
@apply border-0 border-none bg-transparent dark:bg-transparent text-n-slate-12 placeholder:text-n-slate-10;
}
}
.multiselect__spinner {
background-color: transparent;
}
.multiselect__tags-wrap {
@apply inline-block leading-none mt-1;
}
.multiselect__placeholder {
@apply text-slate-400 dark:text-slate-400 font-normal pt-3;
@apply text-n-slate-10 font-normal pt-3;
}
.multiselect__tag {
@apply bg-slate-50 dark:bg-slate-800 mt-1 text-slate-800 dark:text-slate-100 pr-6 pl-2.5 py-1.5;
@apply bg-n-alpha-white mt-1 text-n-slate-12 pr-6 pl-2.5 py-1.5;
}
.multiselect__tag-icon {
@@ -125,7 +129,7 @@
}
.multiselect__single {
@apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
@apply bg-transparent text-n-slate-12 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
}
}
@@ -143,11 +147,11 @@
}
> .multiselect__tags {
@apply border-transparent;
@apply outline-transparent;
}
&.multiselect--active > .multiselect__tags {
@apply border-woot-500 dark:border-woot-500;
@apply outline-n-blue-border;
}
}
}
@@ -179,7 +183,7 @@
.multiselect__tags,
.multiselect__input,
.multiselect {
@apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm min-h-[2.5rem];
@apply text-n-slate-12 rounded-lg text-sm min-h-[2.5rem];
}
.multiselect__input {
@@ -187,7 +191,7 @@
}
.multiselect__single {
@apply items-center flex m-0 text-sm max-h-[2.375rem] text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900 py-3 px-0.5;
@apply items-center flex m-0 text-sm max-h-[2.375rem] bg-transparent text-n-slate-12 py-3 px-0.5;
}
.multiselect__placeholder {
@@ -208,6 +212,24 @@
}
}
.multiselect--disabled {
background-color: rgba(var(--black-alpha-2)) !important;
.multiselect__tags {
@apply hover:outline-n-weak;
}
}
.multiselect--active {
.multiselect__select::before {
@apply top-[62%];
}
}
.multiselect__select::before {
top: 60% !important;
}
.multiselect-wrap--medium {
.multiselect__tags,
.multiselect__input {
@@ -217,16 +239,16 @@
.multiselect__tags,
.multiselect__input,
.multiselect {
@apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 text-sm h-12 min-h-[3rem];
@apply bg-n-alpha-black2 text-n-slate-12 text-sm h-12 min-h-[3rem];
}
.multiselect__input {
@apply h-[2.875rem] min-h-[2.875rem];
margin-bottom: 0px !important;
margin-bottom: 0 !important;
}
.multiselect__single {
@apply items-center flex m-0 text-sm py-1 px-0.5 text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900;
@apply items-center flex m-0 text-sm py-1 px-0.5 bg-transparent text-n-slate-12;
}
.multiselect__placeholder {