Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 09:42:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

new design applied to multiselect

Browse source
This commit is contained in:
nklhrstv 2020-03-04 12:18:26 +02:00
parent 209dad82be
commit cf2df750aa
2 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/Multiselect/Multiselect.js
View file

@ -115,7 +115,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
options.map(({ label, value }) => (
<Button key={value} className={classnames(styles['option-container'], { 'selected': selected.includes(value) })} title={typeof label === 'string' ? label : value} data-value={value} onClick={optionOnClick}>
<div className={styles['label']}>{typeof label === 'string' ? label : value}</div>
<Icon className={styles['icon']} icon={'ic_check'} />
<div className={styles['icon']} />
</Button>
))
:

25
src/common/Multiselect/styles.less
View file

@ -11,10 +11,20 @@
padding: 0 1rem;
background-color: @color-background;
&:global(.active) {
.label {
color: @color-surface-light5;
}
.icon {
fill: @color-surface-light5;
}
}
.label {
flex: 1;
max-height: 2.4em;
color: @color-surface-light5;
color: @color-secondaryvariant1;
}
.icon {
@ -22,7 +32,7 @@
width: 1rem;
height: 1rem;
margin-left: 1rem;
fill: @color-surface-light5;
fill: @color-secondaryvariant1;
}
.popup-menu-container {
@ -49,6 +59,10 @@
background-color: @color-background-light2;
}
&:not(:last-child) {
border-bottom: thin solid @color-primary-light4;
}
.label {
flex: 1;
max-height: 4.8em;
@ -58,10 +72,11 @@
.icon {
flex: none;
display: none;
width: 1rem;
height: 1rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
margin-left: 1rem;
fill: @color-surface-light5;
background-color: @color-accent3;
}
}