secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Splitting out mute, cleaning up mobile output controls

Browse Source
This commit is contained in:
James Barnsley
2018-10-02 16:58:15 +13:00
parent 85c5786d9e
commit d67069c75c
15 changed files with 14298 additions and 10906 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/scss/components/_mute-control.scss Executable file
View File

@ -0,0 +1 @@

54
src/scss/components/_output-control.scss
View File

@ -53,10 +53,6 @@
border-top: 1px solid rgba(0,0,0,0.05);
}
&--has-power-button {
padding-left: 56px;
}
&__actions {
float: right;
@ -71,27 +67,46 @@
}
}
&--has-power-button {
.output-control__item__volume {
padding-left: 50px;
}
}
&__volume {
padding-top: 2px;
padding-left: 25px;
}
&__mute.control {
@include click_feedback(rgba(0,0,0,0.5));
padding: 2px;
color: $black;
float: left;
font-size: 16px;
}
&__power {
@include click_feedback(rgba(0,0,0,0.5));
position: absolute !important;
top: 12px;
left: 12px;
width: 30px;
height: 30px;
width: 18px;
height: 18px;
text-align: center;
color: $white;
cursor: pointer;
float: left;
margin-top: -2px;
margin-right: 6px;
.icon {
padding-top: 10px;
font-size: 16px;
padding-top: 5px;
font-size: 12px;
}
&:before {
content: '';
display: block;
position: absolute;
top: 3px;
top: 2px;
left: 0;
width: 100%;
padding-bottom: 100%;
@ -101,21 +116,6 @@
opacity: 1;
}
}
&__volume {
position: relative;
padding-left: 22px;
display: block;
.mute-control {
@include click_feedback(rgba(0,0,0,0.5));
position: absolute !important;
top: -2px;
left: -2px;
padding: 2px;
color: $black;
}
}
}
@include responsive($bp_medium){

46
src/scss/components/_playback-controls.scss
View File

@ -176,22 +176,12 @@
width: 150px;
font-size: 18px;
.modal-trigger {
display: none;
}
.slider-wrapper {
.slider__wrapper {
position: absolute;
bottom: 6px;
right: 0;
left: 30px;
}
.muted {
.slider .progress {
background: $mid_grey;
}
}
}
&.triggers {
@ -205,8 +195,8 @@
width: auto;
bottom: auto;
bottom: 8px;
left: 70px;
right: 70px;
left: 80px;
right: 80px;
text-align: center;
font-size: 12px;
color: $white !important;
@ -277,27 +267,41 @@
height: 150px;
section {
&.settings {
display: block;
right: 20px;
bottom: 60px;
right: 0;
bottom: 100px;
text-align: right;
}
&.volume {
width: auto;
display: block;
right: 130px;
right: 110px;
left: 22px;
bottom: 60px;
bottom: 100px;
}
&.progress {
display: block;
bottom: 110px;
left: 0;
right: 0;
bottom: 55px;
left: -10px;
right: -10px;
}
}
.output-control {
position: absolute;
bottom: 150px;
left: 0px;
right: 0px;
& > .control {
display: none;
}
&__items {
width: 100%;
}
}
}

15
src/scss/components/_slider.scss
View File

@ -4,7 +4,7 @@
cursor: pointer;
height: 20px;
input[type="range"]{
&__input {
position: absolute;
top: 0;
left: 0;
@ -30,7 +30,7 @@
}
}
.track {
&__track {
position: absolute;
background: rgba(0,0,0,0.2);
border-radius: 2px;
@ -40,7 +40,7 @@
left: 0;
margin-top: -3px;
.progress {
&__progress {
position: absolute;
background: $turquoise;
pointer-events: none;
@ -66,8 +66,9 @@
}
}
&.disabled {
.progress {
&--disabled,
&--muted {
.slider__track__progress {
background: $mid_grey;
&:after {
@ -77,8 +78,8 @@
}
&:hover {
.track {
.progress {
.slider__track {
&__progress {
&:after {
width: 12px;
height: 12px;

24
src/scss/components/_snapcast.scss
View File

@ -145,18 +145,22 @@
z-index: 0;
}
.progress.positive {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.slider__track {
&__progress {
&--positive {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.progress.negative {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&--negative {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&:after {
right: auto;
left: -1px;
&:after {
right: auto;
left: -1px;
}
}
}
}
}