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

better way for spacing between selectable inputs and search bar

Browse source
This commit is contained in:
svetlagasheva 2020-03-10 16:56:24 +02:00
parent 21ae30d33e
commit bdc951c0e4
2 changed files with 56 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/routes/Addons/Addons.js
View file

@ -93,19 +93,18 @@ const Addons = ({ urlParams, queryParams }) => {
<NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
<div className={styles['addons-content']}>
<div className={styles['selectable-inputs-container']}>
<div className={styles['selectable-inputs']}>
<Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
<Icon className={styles['icon']} icon={'ic_plus'} />
<div className={styles['add-button-label']}>Add addon</div>
</Button>
{selectInputs.map((selectInput, index) => (
<Multiselect
{...selectInput}
key={index}
className={styles['select-input-container']}
/>
))}
</div>
<Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
<Icon className={styles['icon']} icon={'ic_plus'} />
<div className={styles['add-button-label']}>Add addon</div>
</Button>
{selectInputs.map((selectInput, index) => (
<Multiselect
{...selectInput}
key={index}
className={styles['select-input-container']}
/>
))}
<div className={styles['spacing']} />
<label className={styles['search-bar-container']}>
<TextInput
className={styles['search-input']}

92
src/routes/Addons/styles.less
View file

@ -36,65 +36,61 @@
padding: 1.5rem 3rem;
overflow: visible;
.selectable-inputs {
flex: 1;
.add-button-container {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 10rem;
height: 3.5rem;
margin-right: 1.5rem;
overflow: visible;
padding: 0 1rem;
background-color: @color-accent3;
.add-button-container {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 10rem;
height: 3.5rem;
margin-right: 1.5rem;
padding: 0 1rem;
background-color: @color-accent3;
&:hover {
background-color: @color-accent3-light2;
}
&:focus {
outline-color: @color-surface-light5;
}
.icon {
flex: none;
width: 1.2rem;
height: 1.2rem;
margin-right: 1rem;
fill: @color-surface-light5;
}
.add-button-label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
max-height: 2.4em;
font-size: 1.1rem;
color: @color-surface-light5;
}
&:hover {
background-color: @color-accent3-light2;
}
.select-input-container {
&:focus {
outline-color: @color-surface-light5;
}
.icon {
flex: none;
width: 1.2rem;
height: 1.2rem;
margin-right: 1rem;
fill: @color-surface-light5;
}
.add-button-label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 15rem;
height: 3.5rem;
margin-right: 1.5rem;
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
flex-basis: auto;
max-height: 2.4em;
font-size: 1.1rem;
color: @color-surface-light5;
}
}
.select-input-container {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 15rem;
height: 3.5rem;
margin-right: 1.5rem;
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
}
.spacing {
flex: 1;
}
.search-bar-container {
flex-grow: 0;
flex-shrink: 1;