Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve multiselect tag #1718

Merged
merged 1 commit into from
Mar 9, 2021
Merged

Improve multiselect tag #1718

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 24 additions & 17 deletions src/components/Multiselect/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
cursor: text !important;
// remove border radius on bottom opening
border-radius: var(--border-radius) var(--border-radius) 0 0;
display: block !important;
}

/* multiselect__limit hidden if active */
Expand Down Expand Up @@ -74,11 +75,13 @@
max-width: 100%;
position: relative;
padding: 3px $space-between;
flex-grow: 1;
flex: 1 1;
flex-wrap: nowrap;
/* no tags or simple select? Show input directly
input is used to display single value */
&:empty ~ input.multiselect__input {
opacity: $opacity_full !important;
display: block !important;
/* hide default empty text like .multiselect__placeholder,
and show input instead. It looks better without a transition between
a span and the input that have different styling */
Expand All @@ -88,7 +91,6 @@
}
/* selected tag */
.multiselect__tag {
flex: 1 0 0;
line-height: 20px;
padding: 1px 5px;
background-image: none;
Expand All @@ -100,9 +102,9 @@
/* require to override the default width
and force the tag to shring properly */
min-width: 0;
max-width: 50%;
max-width: fit-content;
max-width: -moz-fit-content;
margin-bottom: 3px;
/* css hack, detect if more than two tags
if so, flex-basis is set to half */
&:only-child {
Expand Down Expand Up @@ -134,7 +136,7 @@
// Align content and make the flow smoother
display: flex;
align-items: center;

// Anything inside will trigger the select opening
&, * {
cursor: pointer;
Expand All @@ -143,7 +145,6 @@
/* displayed text if tag limit reached */
.multiselect__strong,
.multiselect__limit {
flex: 0 0 auto;
line-height: 20px;
color: var(--color-text-lighter);
display: inline-flex;
Expand All @@ -156,20 +157,18 @@
/* default multiselect input for search and placeholder */
input.multiselect__input {
width: 100% !important;
position: absolute !important;
top: 0;
left: 0;
position: relative !important;
margin: 0;
opacity: 0;
/* let's leave it on top of tags but hide it */
height: 100% !important;
border: none;
/* override hide to force show the placeholder */
display: block !important;
/* only when not active */
cursor: pointer;
/* override inline styling of the lib */
padding: 7px 6px !important;
display: none;
}
}

Expand Down Expand Up @@ -254,16 +253,24 @@
}

/* Icon before option select */
&.multiselect--multiple .multiselect__content-wrapper li > span {
&::before {
background-image: var(--icon-checkmark-000);
&.multiselect--multiple {
// push the input after the tag list
.multiselect__tags {
flex-wrap: wrap;
}
/* add the prop tag-placeholder="create" to add the +
icon on top of an unknown-and-ready-to-be-created entry */
&[data-select='create'] {

.multiselect__content-wrapper li > span {
&::before {
background-image: var(--icon-add-000);
visibility: visible;
background-image: var(--icon-checkmark-000);
}

/* add the prop tag-placeholder="create" to add the +
icon on top of an unknown-and-ready-to-be-created entry */
&[data-select='create'] {
&::before {
background-image: var(--icon-add-000);
visibility: visible;
}
}
}
}
Expand Down