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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user