zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2026-06-08 12:42:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add icon for torrent status

Browse Source
This commit is contained in:
John Furrow
2016-03-26 21:42:25 -07:00
parent 3b1a163551
commit 5358869047
14 changed files with 135 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/source/sass/components/_progress-bar.scss
+59 -21
View File
@@ -9,42 +9,54 @@ $progress-bar--fill--selected: #fff;
$progress-bar--fill--error: #e95779;
.progress-bar {
height: 3px;
position: relative;
display: flex;
transition: opacity 0.25s;
width: 100%;
z-index: 1;
.is-selected.is-stopped & {
opacity: 0.5;
}
&:after {
background: $progress-bar--background;
content: '';
height: 1px;
left: 0;
position: absolute;
z-index: 0;
top: 1px;
transition: background 0.25s;
width: 100%;
&__icon {
flex: 0 0 auto;
padding-right: 5px;
.is-selected & {
background: $progress-bar--background--selected;
}
.icon {
display: block;
fill: $green;
height: 12px;
transition: fill 0.25s, opacity 0.25s;
width: 12px;
.is-selected.is-stopped & {
background: $progress-bar--background--selected--stopped;
.is-seeding & {
fill: $progress-bar--fill--completed;
}
.is-completed &,
.is-stopped & {
fill: $progress-bar--fill--stopped;
}
.has-error & {
fill: $progress-bar--fill--error;
}
.is-selected & {
fill: $progress-bar--fill--selected;
}
}
}
&__fill {
align-items: center;
background: $progress-bar--fill;
bottom: 0;
height: 100%;
height: 3px;
left: 0;
position: absolute;
top: 0;
top: 50%;
transform: translateY(-50%);
transition: background 0.25s, width 0.25s;
z-index: 1;
@@ -57,12 +69,38 @@ $progress-bar--fill--error: #e95779;
background: $progress-bar--fill--stopped;
}
.has-error & {
background: $progress-bar--fill--error;
}
.is-selected & {
background: $progress-bar--fill--selected;
}
.has-error & {
background: $progress-bar--fill--error;
&__wrapper {
flex: 1 1 auto;
position: relative;
&:after {
background: $progress-bar--background;
content: '';
height: 1px;
left: 0;
position: absolute;
z-index: 0;
top: 50%;
transform: translateY(-50%);
transition: background 0.25s;
width: 100%;
.is-selected & {
background: $progress-bar--background--selected;
}
.is-selected.is-stopped & {
background: $progress-bar--background--selected--stopped;
}
}
}
}
}
client/source/sass/components/_torrents.scss
+10 -5
View File
@@ -1,21 +1,22 @@
$torrent-list--background: #fff;
$torrent-list--border: rgba($background, 0.15);
$torrent--primary--foreground: #333332;
$torrent--primary--foreground: #5b6d7c;
$torrent--primary--foreground--stopped: rgba(#333332, 0.5);
$torrent--primary--foreground--selected: #fff;
$torrent--primary--foreground--selected--stopped: rgba($torrent--primary--foreground--selected, 0.6);
$torrent--secondary--foreground: #807f7e;
$torrent--secondary--foreground--stopped: rgba(#807f7e, 0.5);
$torrent--secondary--foreground: #8899a8;
$torrent--secondary--foreground--stopped: rgba(#8899a8, 0.5);
$torrent--secondary--foreground--selected: #fff;
$torrent--secondary--foreground--selected--stopped: rgba(#fff, 0.6);
$torrent--tertiary--foreground: #807f7e;
$torrent--tertiary--foreground--stopped: rgba(#807f7e, 0.5);
$torrent--tertiary--foreground: #8899a8;
$torrent--tertiary--foreground--stopped: rgba(#8899a8, 0.5);
$torrent--tertiary--foreground--selected: rgba(#fff, 0.9);
$torrent--tertiary--foreground--selected--stopped: rgba(#fff, 0.5);
$torrent--background--hover: #f6f8fa;
$torrent--background--selected: $blue;
$torrent--background--error: #e95779;
.torrents {
display: flex;
@@ -105,6 +106,10 @@ $torrent--background--selected: $blue;
&.is-selected {
background: $torrent--background--selected;
&.has-error {
background: $torrent--background--error;
}
}
&__more-info {