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

SeasonsBarPlaceholder styles improved

Browse source
This commit is contained in:
svetlagasheva 2020-04-01 17:24:00 +03:00
parent f322c12df8
commit 3b05b6af08
3 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
View file

@ -9,13 +9,14 @@ const SeasonsBarPlaceholder = ({ className }) => {
<div className={classnames(className, styles['seasons-bar-placeholder-container'])}>
<div className={styles['prev-season-button']}>
<Icon className={styles['icon']} icon={'ic_arrow_thin_left'} />
<div className={styles['label']} />
<div className={styles['label']}>Prev</div>
</div>
<div className={styles['seasons-popup-label-container']}>
<div className={styles['seasons-popup-label']} />
<div className={styles['seasons-popup-label']}>Season 1</div>
<Icon className={styles['seasons-popup-icon']} icon={'ic_arrow_thin_down'} />
</div>
<div className={styles['next-season-button']}>
<div className={styles['label']} />
<div className={styles['label']}>Next</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
</div>
</div>

28
src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
View file

@ -1,6 +1,7 @@
.seasons-bar-placeholder-container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1rem;
.prev-season-button, .next-season-button {
@ -11,7 +12,6 @@
width: 6.5rem;
height: 3.5rem;
padding: 0.5rem;
background-color: var(--color-placeholder-background);
&>:first-child {
margin-right: 0.5rem;
@ -26,24 +26,32 @@
.label {
flex: 1;
height: 1.2em;
background-color: var(--color-placeholder-background);
max-height: 1.2em;
font-weight: 500;
text-align: center;
color: var(--color-placeholder-text);
}
}
.seasons-popup-label-container {
flex: 1;
align-self: stretch;
flex: 0 1 auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 0 1rem;
background-color: var(--color-placeholder-background);
.seasons-popup-label {
width: 50%;
height: 1.2rem;
background-color: var(--color-placeholder-background);
max-height: 1.2em;
font-weight: 500;
color: var(--color-placeholder-text);
}
.seasons-popup-icon {
flex: none;
width: 1rem;
height: 1rem;
margin-left: 1rem;
fill: var(--color-placeholder-background);
}
}
}

3
src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
View file

@ -16,8 +16,7 @@
}
.released-container {
width: 40%;
height: 1.2rem;
height: 1rem;
margin-top: 0.5rem;
background: var(--color-placeholder-background);
}