KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Changes the dropdown ui (#1813)

Browse source 
* Changes the dropdown ui
This commit is contained in:
Sivin Varghese 2021-02-22 10:52:50 +05:30 committed by GitHub
parent c17380d48a
commit 4cbdbbe4bd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
View file

@ -13,17 +13,16 @@
} }
.multiselect { .multiselect {
margin-bottom: $space-normal; margin-bottom: var(--space-normal);
min-height: 38px;
&.multiselect--active { .multiselect--active {
>.multiselect__tags { > .multiselect__tags {
border-color: $color-woot; border-color: $color-woot;
} }
} }
.multiselect__select { .multiselect__select {
min-height: 44px; min-height: 4.6rem;
padding: 0; padding: 0;
right: 0; right: 0;
top: 0; top: 0;
@ -39,16 +38,51 @@
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
&.multiselect__option--highlight { &.multiselect__option--highlight {
font-weight: $font-weight-medium; background: var(--white);
color: var(--color-body);
}
&.multiselect__option--highlight:hover {
background: var(--w-50);
color: var(--color-body);
&::after {
background: var(--w-50);
color: var(--s-600);
}
}
&.multiselect__option--highlight::after {
background: transparent;
}
&.multiselect__option--selected {
background: var(--w-400);
color: var(--white);
&.multiselect__option--highlight:hover {
background: var(--w-600);
color: var(--white);
&::after {
background: transparent;
color: var(--white);
&:hover {
color: var(--color-body);
}
}
}
} }
} }
}
.multiselect>.multiselect__tags { .multiselect__tags {
@include margin(0); @include margin(0);
border: 1px solid $color-border; border: 1px solid $color-border;
min-height: 44px; border-color: $color-border;
padding-top: $zero; min-height: 4.4rem;
padding-top: $zero;
}
.multiselect__tags-wrap { .multiselect__tags-wrap {
display: inline-block; display: inline-block;
@ -59,7 +93,7 @@
.multiselect__placeholder { .multiselect__placeholder {
color: $color-gray; color: $color-gray;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
padding-top: $space-small; padding-top: var(--space-slab);
} }
.multiselect__tag { .multiselect__tag {
@ -79,14 +113,13 @@
@include ghost-input; @include ghost-input;
@include padding($zero); @include padding($zero);
font-size: $font-size-small; font-size: $font-size-small;
height: 4.4rem;
margin-bottom: $zero; margin-bottom: $zero;
} }
.multiselect__single { .multiselect__single {
@include padding($space-one);
margin-bottom: 0; margin-bottom: 0;
padding: var(--space-slab) var(--space-one);
} }
} }
@ -96,26 +129,18 @@
.multiselect { .multiselect {
cursor: pointer; cursor: pointer;
} }
.multiselect>.multiselect__tags {
border-color: $color-border;
}
.multiselect>.multiselect__select {
visibility: visible;
}
} }
.multiselect { .multiselect {
>.multiselect__select { > .multiselect__select {
visibility: hidden; visibility: hidden;
} }
>.multiselect__tags { > .multiselect__tags {
border-color: transparent; border-color: transparent;
} }
&.multiselect--active>.multiselect__tags { &.multiselect--active > .multiselect__tags {
border-color: $color-woot; border-color: $color-woot;
} }
} }