4072b91808
Fixes #623 Mod to code to allow timerState to be accessible to markup; CSS for stop button and paused/stopped states
72 lines
1.4 KiB
SCSS
72 lines
1.4 KiB
SCSS
.l-time-display {
|
|
$transTime: 200ms;
|
|
$controlSize: 14px;
|
|
$control1ControlW: $controlSize + $interiorMargin;
|
|
$control2ControlW: $control1ControlW * 2;
|
|
line-height: 140%;
|
|
&:hover {
|
|
.l-btn.controls {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.l-timer {
|
|
.l-value:before {
|
|
// Direction +/- element
|
|
font-size: $controlSize;
|
|
margin-right: $interiorMarginSm;
|
|
|
|
}
|
|
.controls {
|
|
@include trans-prop-nice((width, opacity), $transTime);
|
|
font-size: $controlSize;
|
|
line-height: inherit;
|
|
margin-right: 0;
|
|
opacity: 0;
|
|
width: 0;
|
|
.flex-elem {
|
|
margin-right: $interiorMargin;
|
|
}
|
|
}
|
|
&:hover .controls {
|
|
opacity: 1;
|
|
width: $control2ControlW;
|
|
}
|
|
}
|
|
|
|
.value {
|
|
color: pullForward($colorBodyFg, 50%);
|
|
font-weight: 400;
|
|
}
|
|
|
|
// States
|
|
&.s-state-stopped,
|
|
&.s-state-paused {
|
|
.l-value {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
&.s-state-started {
|
|
.l-value {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.s-state-stopped {
|
|
// Hide Stop button, 1controlW
|
|
.t-btn-stop {
|
|
display: none;
|
|
}
|
|
&:hover .controls { width: $control1ControlW; }
|
|
|
|
}
|
|
|
|
&.s-state-paused {
|
|
// Paused, do something visual
|
|
.l-value {
|
|
&:before { @extend .pulse; }
|
|
}
|
|
}
|
|
}
|