Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

discover filters modal styles updated

Browse source
This commit is contained in:
nklhrstv 2020-03-29 16:08:51 +03:00
parent 6931fce1a3
commit fec92c2957
2 changed files with 51 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/routes/Discover/Discover.js
View file

@ -168,13 +168,13 @@ const Discover = ({ urlParams, queryParams }) => {
inputsModalOpen ?
<ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal-container']} onCloseRequest={closeInputsModal}>
{selectInputs.map(({ title, isRequired, options, selected, renderLabelText, onSelect }, index) => (
<div key={index} className={styles['selectable-inputs-container']}>
<div className={styles['select-input-label-container']} title={title}>
<div key={index} className={styles['selectable-input-container']}>
<div className={styles['select-input-label']} title={title}>
{title}
{isRequired ? '*' : null}
</div>
<Multiselect
className={styles['select-input-container']}
className={styles['select-input']}
mode={'modal'}
title={title}
options={options}

54
src/routes/Discover/styles.less
View file

@ -4,6 +4,9 @@
:import('~stremio/common/Multiselect/styles.less') {
multiselect-menu-container: menu-container;
multiselect-modal-container: modal-container;
multiselect-option-container: option-container;
multiselect-icon: icon;
multiselect-label: label;
}
:import('~stremio/common/PaginationInput/styles.less') {
@ -217,7 +220,7 @@
}
.selectable-inputs-modal-container {
.selectable-inputs-container {
.selectable-input-container {
display: flex;
flex-direction: row;
align-items: center;
@ -226,18 +229,37 @@
margin-bottom: 1rem;
}
.select-input-label-container {
.select-input-label {
flex: none;
width: 10rem;
max-height: 2.4em;
padding-right: 0.5rem;
color: @color-background-dark5;
margin-right: 1.5rem;
font-size: 1.1rem;
color: @color-background-dark2-90;
}
.select-input-container {
.select-input {
flex: none;
width: 15rem;
height: 3rem;
height: 3.5rem;
background-color: @color-surface-light2;
&:hover, &:focus {
background-color: @color-surface-light3;
}
&:focus {
outline-color: @color-background-dark2;
}
.multiselect-label {
font-weight: normal;
color: @color-background-dark2-90;
}
.multiselect-icon {
fill: @color-background-dark2-90;
}
}
}
}
@ -247,6 +269,26 @@
width: 15rem;
max-height: calc(3.2rem * 7);
overflow-y: auto;
.multiselect-option-container {
background: none;
&:hover, &:focus {
background-color: @color-surface-light3;
}
&:focus {
outline-color: @color-background-dark2;
}
.multiselect-label {
color: @color-background-dark2-90;
}
.multiselect-icon {
fill: @color-background-dark2-90;
}
}
}
}