mirror of
https://github.com/nasa/openmct.git
synced 2024-12-30 18:06:59 +00:00
[Frontend] Theming and cleanups in Clocks and Timers
open #208 Also converted timer to use flexbox layout;
This commit is contained in:
Charles Hacskaylo
parent
3854df27d8
commit
50134bbc7f
@ -1,46 +1,32 @@
|
||||
.l-time-display {
|
||||
$transTime: 200ms;
|
||||
// Layout
|
||||
line-height: 140%;
|
||||
&:hover {
|
||||
.l-btn.control {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.l-elem-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.l-elem {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.l-timer {
|
||||
.l-elem.l-value {
|
||||
@include trans-prop-nice(left, $transTime);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
.ui-symbol.direction {
|
||||
.control {
|
||||
@include trans-prop-nice((width, opacity), $transTime);
|
||||
line-height: inherit;
|
||||
margin-right: 0;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
}
|
||||
&:hover .control {
|
||||
margin-right: $interiorMargin;
|
||||
opacity: 1;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
color: pullForward($colorBodyFg, 20%);
|
||||
font-weight: 600;
|
||||
.direction {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
&:hover .l-elem.l-value {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Look-and-feel
|
||||
.l-elem {
|
||||
.value.active,
|
||||
&.value.active {
|
||||
color: $colorKeyFg;
|
||||
}
|
||||
}
|
||||
.l-btn.control {
|
||||
@include trans-prop-nice-fade($transTime);
|
||||
opacity: 0;
|
||||
font-size: 0.65em;
|
||||
vertical-align: top;
|
||||
//line-height: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@ -41,38 +41,38 @@ time, mark, audio, video {
|
||||
font-size: 100%;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
html {
|
||||
line-height: 1; }
|
||||
|
||||
/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle; }
|
||||
|
||||
/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
q, blockquote {
|
||||
quotes: none; }
|
||||
/* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none; }
|
||||
|
||||
/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
a img {
|
||||
border: none; }
|
||||
|
||||
/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
|
||||
display: block; }
|
||||
|
||||
@ -7376,51 +7376,18 @@ table {
|
||||
.frame .t-imagery .l-image-thumbs-wrapper {
|
||||
display: none; }
|
||||
|
||||
/* line 5, ../../../../general/res/sass/features/_time-display.scss */
|
||||
/* line 1, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display {
|
||||
line-height: 140%; }
|
||||
/* line 6, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display:hover .l-btn.control {
|
||||
opacity: 1; }
|
||||
/* line 9, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display .l-elem-wrapper {
|
||||
position: relative; }
|
||||
/* line 12, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display .l-elem {
|
||||
display: inline-block; }
|
||||
/* line 17, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display.l-timer .l-elem.l-value {
|
||||
-moz-transition-property: left;
|
||||
-o-transition-property: left;
|
||||
-webkit-transition-property: left;
|
||||
transition-property: left;
|
||||
-moz-transition-duration: 200ms;
|
||||
-o-transition-duration: 200ms;
|
||||
-webkit-transition-duration: 200ms;
|
||||
transition-duration: 200ms;
|
||||
-moz-transition-timing-function: ease-in-out;
|
||||
-o-transition-timing-function: ease-in-out;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
transition-timing-function: ease-in-out;
|
||||
-moz-transition-delay: 0;
|
||||
-o-transition-delay: 0;
|
||||
-webkit-transition-delay: 0;
|
||||
transition-delay: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 1; }
|
||||
/* line 22, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display.l-timer .l-elem.l-value .ui-symbol.direction, .l-time-display.l-timer .l-elem.l-value .direction.t-item-icon, .l-time-display.l-timer .l-elem.l-value .direction.s-icon-btn, .l-time-display.l-timer .l-elem.l-value .l-datetime-picker .l-month-year-pager .direction.pager, .l-datetime-picker .l-month-year-pager .l-time-display.l-timer .l-elem.l-value .direction.pager {
|
||||
font-size: 0.8em; }
|
||||
/* line 26, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display.l-timer:hover .l-elem.l-value {
|
||||
left: 20px; }
|
||||
/* line 33, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display .l-elem .value.active, .l-time-display .l-elem.value.active {
|
||||
color: #fff; }
|
||||
/* line 38, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display .l-btn.control {
|
||||
-moz-transition-property: opacity, background-color, border-color, color;
|
||||
-o-transition-property: opacity, background-color, border-color, color;
|
||||
-webkit-transition-property: opacity, background-color, border-color, color;
|
||||
transition-property: opacity, background-color, border-color, color;
|
||||
/* line 18, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display.l-timer .control {
|
||||
-moz-transition-property: width, opacity;
|
||||
-o-transition-property: width, opacity;
|
||||
-webkit-transition-property: width, opacity;
|
||||
transition-property: width, opacity;
|
||||
-moz-transition-duration: 200ms;
|
||||
-o-transition-duration: 200ms;
|
||||
-webkit-transition-duration: 200ms;
|
||||
@ -7433,6 +7400,19 @@ table {
|
||||
-o-transition-delay: 0;
|
||||
-webkit-transition-delay: 0;
|
||||
transition-delay: 0;
|
||||
line-height: inherit;
|
||||
margin-right: 0;
|
||||
opacity: 0;
|
||||
font-size: 0.65em;
|
||||
vertical-align: top; }
|
||||
width: 0; }
|
||||
/* line 27, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display.l-timer:hover .control {
|
||||
margin-right: 5px;
|
||||
opacity: 1;
|
||||
width: auto; }
|
||||
/* line 34, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display .value {
|
||||
color: #cccccc;
|
||||
font-weight: 600; }
|
||||
/* line 37, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display .value .direction {
|
||||
font-size: 0.8em; }
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@ -41,38 +41,38 @@ time, mark, audio, video {
|
||||
font-size: 100%;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
html {
|
||||
line-height: 1; }
|
||||
|
||||
/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle; }
|
||||
|
||||
/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
q, blockquote {
|
||||
quotes: none; }
|
||||
/* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none; }
|
||||
|
||||
/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
a img {
|
||||
border: none; }
|
||||
|
||||
/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
|
||||
display: block; }
|
||||
|
||||
@ -7253,51 +7253,18 @@ table {
|
||||
.frame .t-imagery .l-image-thumbs-wrapper {
|
||||
display: none; }
|
||||
|
||||
/* line 5, ../../../../general/res/sass/features/_time-display.scss */
|
||||
/* line 1, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display {
|
||||
line-height: 140%; }
|
||||
/* line 6, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display:hover .l-btn.control {
|
||||
opacity: 1; }
|
||||
/* line 9, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display .l-elem-wrapper {
|
||||
position: relative; }
|
||||
/* line 12, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display .l-elem {
|
||||
display: inline-block; }
|
||||
/* line 17, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display.l-timer .l-elem.l-value {
|
||||
-moz-transition-property: left;
|
||||
-o-transition-property: left;
|
||||
-webkit-transition-property: left;
|
||||
transition-property: left;
|
||||
-moz-transition-duration: 200ms;
|
||||
-o-transition-duration: 200ms;
|
||||
-webkit-transition-duration: 200ms;
|
||||
transition-duration: 200ms;
|
||||
-moz-transition-timing-function: ease-in-out;
|
||||
-o-transition-timing-function: ease-in-out;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
transition-timing-function: ease-in-out;
|
||||
-moz-transition-delay: 0;
|
||||
-o-transition-delay: 0;
|
||||
-webkit-transition-delay: 0;
|
||||
transition-delay: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 1; }
|
||||
/* line 22, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display.l-timer .l-elem.l-value .ui-symbol.direction, .l-time-display.l-timer .l-elem.l-value .direction.t-item-icon, .l-time-display.l-timer .l-elem.l-value .direction.s-icon-btn, .l-time-display.l-timer .l-elem.l-value .l-datetime-picker .l-month-year-pager .direction.pager, .l-datetime-picker .l-month-year-pager .l-time-display.l-timer .l-elem.l-value .direction.pager {
|
||||
font-size: 0.8em; }
|
||||
/* line 26, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display.l-timer:hover .l-elem.l-value {
|
||||
left: 20px; }
|
||||
/* line 33, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display .l-elem .value.active, .l-time-display .l-elem.value.active {
|
||||
color: #fff; }
|
||||
/* line 38, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display .l-btn.control {
|
||||
-moz-transition-property: opacity, background-color, border-color, color;
|
||||
-o-transition-property: opacity, background-color, border-color, color;
|
||||
-webkit-transition-property: opacity, background-color, border-color, color;
|
||||
transition-property: opacity, background-color, border-color, color;
|
||||
/* line 18, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display.l-timer .control {
|
||||
-moz-transition-property: width, opacity;
|
||||
-o-transition-property: width, opacity;
|
||||
-webkit-transition-property: width, opacity;
|
||||
transition-property: width, opacity;
|
||||
-moz-transition-duration: 200ms;
|
||||
-o-transition-duration: 200ms;
|
||||
-webkit-transition-duration: 200ms;
|
||||
@ -7310,9 +7277,22 @@ table {
|
||||
-o-transition-delay: 0;
|
||||
-webkit-transition-delay: 0;
|
||||
transition-delay: 0;
|
||||
line-height: inherit;
|
||||
margin-right: 0;
|
||||
opacity: 0;
|
||||
font-size: 0.65em;
|
||||
vertical-align: top; }
|
||||
width: 0; }
|
||||
/* line 27, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display.l-timer:hover .control {
|
||||
margin-right: 5px;
|
||||
opacity: 1;
|
||||
width: auto; }
|
||||
/* line 34, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display .value {
|
||||
color: #333333;
|
||||
font-weight: 600; }
|
||||
/* line 37, ../../../../general/res/sass/features/_time-display.scss */
|
||||
.l-time-display .value .direction {
|
||||
font-size: 0.8em; }
|
||||
|
||||
/* line 3, ../sass/_controls.scss */
|
||||
.s-btn.major .title-label, .major.s-menu-btn .title-label {
|
||||
|
||||
@ -20,15 +20,15 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="l-time-display l-digital l-timer s-timer" ng-controller="TimerController as timer">
|
||||
<div class="l-elem-wrapper">
|
||||
<div class="l-elem-wrapper l-flex-row">
|
||||
<a
|
||||
ng-click="timer.clickButton()"
|
||||
title="{{timer.buttonText()}}"
|
||||
class="l-elem l-btn s-btn s-icon-btn s-very-subtle vsm control"
|
||||
class="flex-elem s-icon-btn control"
|
||||
>
|
||||
<span class="ui-symbol icon">{{timer.buttonGlyph()}}</span>
|
||||
{{timer.buttonGlyph()}}
|
||||
</a>
|
||||
<span class="l-elem l-value">
|
||||
<span class="flex-elem l-value">
|
||||
<span class="ui-symbol direction">{{timer.sign()}}</span>
|
||||
<span
|
||||
class="value"
|
||||
@ -36,7 +36,6 @@
|
||||
>{{timer.text() || "--:--:--"}}
|
||||
</span>
|
||||
</span>
|
||||
<span ng-controller="RefreshingController">
|
||||
</span>
|
||||
<span ng-controller="RefreshingController"></span>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user