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

additional search bar container removed

Browse source
This commit is contained in:
nklhrstv 2020-03-30 01:26:38 +03:00
parent 73a624a3d6
commit cdf75c9c7c
2 changed files with 47 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/routes/MetaDetails/VideosList/VideosList.js
View file

@ -57,18 +57,16 @@ const VideosList = ({ className, metaResource }) => {
:
null
}
<div className={styles['search-container']}>
<label className={styles['search-bar-container']}>
<TextInput
className={styles['search-input']}
type={'text'}
placeholder={'Search videos'}
value={search}
onChange={searchInputOnChange}
/>
<Icon className={styles['icon']} icon={'ic_search'} />
</label>
</div>
<label className={styles['search-bar-container']}>
<TextInput
className={styles['search-input']}
type={'text'}
placeholder={'Search videos'}
value={search}
onChange={searchInputOnChange}
/>
<Icon className={styles['icon']} icon={'ic_search'} />
</label>
<div className={styles['videos-scroll-container']}>
{videosForSeason
.filter((video) => {

77
src/routes/MetaDetails/VideosList/styles.less
View file

@ -38,54 +38,51 @@
}
}
.search-container {
.search-bar-container {
flex: none;
min-width: var(--item-size);
padding: 0 1.5rem 1rem 1.5rem;
align-self: stretch;
display: flex;
flex-direction: row;
align-items: center;
height: 3.5rem;
padding: 0 1rem;
margin: 0 1.5rem 1rem 1.5rem;
border-radius: 2.3rem;
border: var(--focus-outline-size) solid transparent;
background-color: @color-background;
cursor: text;
&:first-child {
padding-top: 1rem;
margin-top: 1rem;
}
.search-bar-container {
display: flex;
flex-direction: row;
align-items: center;
height: 3.5rem;
padding: 0 1rem;
border-radius: 2.3rem;
border: var(--focus-outline-size) solid transparent;
background-color: @color-background;
cursor: text;
&:hover, &:focus-within {
background-color: @color-background-light1;
}
&:hover, &:focus-within {
background-color: @color-background-light1;
}
&:focus-within {
border: var(--focus-outline-size) solid @color-surface-light5;
}
.search-input {
flex: 1;
margin-right: 1rem;
font-size: 1.1rem;
color: @color-surface-light5;
&::placeholder {
max-height: 1.2em;
opacity: 1;
color: @color-secondaryvariant1-light1-90;
}
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
fill: @color-secondaryvariant1;
&:focus-within {
border: var(--focus-outline-size) solid @color-surface-light5;
}
.search-input {
flex: 1;
margin-right: 1rem;
font-size: 1.1rem;
color: @color-surface-light5;
&::placeholder {
max-height: 1.2em;
opacity: 1;
color: @color-secondaryvariant1-light1-90;
}
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
fill: @color-secondaryvariant1;
}
}