ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-24 15:26:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Time controller-related styling (CP > open117)

Browse Source 
open #1515
open #117
Further refinements to slider knob and range look;
(cherry picked from commit 63a1239)
This commit is contained in:
Charles Hacskaylo 2015-09-25 13:54:51 -07:00
parent afb1202865
commit e33485ec59
4 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -333,13 +333,14 @@ label.checkbox.custom {
}
.range {
$tbOffset: 2px;
@include trans-prop-nice-fade(.25s);
background-color: $sliderColorRange;
cursor: ew-resize;
position: absolute;
top: 0;
top: 0; //$tbOffset;
right: auto;
bottom: 0;
bottom: $tbOffset;
left: auto;
height: auto;
width: auto;

24
platform/commonUI/general/res/sass/controls/_time-controller.scss
View File

@ -1,11 +1,16 @@
.l-time-controller {
$timeRangeSliderLROffset: 125px;
$minW: 400px;
$knobM: ($sliderKnobW + 1) * -1;
$rangeValOffset: $interiorMargin + $sliderKnobW;
$knobCr: $sliderKnobW;
//@if $sliderKnobW > 3 {
// $knobCr: $sliderKnobW / 2;
//}
$timeRangeSliderLROffset: 130px + $sliderKnobW;
$r1H: 33px;
$r2H: 20px;
$r3H: 20px;
min-width: 400px;
.l-time-range-inputs-holder,
.l-time-range-slider {
font-size: 0.8em;
@ -18,6 +23,7 @@
//@include test();
@include absPosDefault(0, visible);
@include box-sizing(border-box);
min-width: $minW;
top: auto;
}
.l-time-range-slider,
@ -95,6 +101,8 @@
.knob {
width: $sliderKnobW;
.range-value {
//@include test($sliderColorRange);
@include trans-prop-nice-fade(.25s);
position: absolute;
height: $r2H;
line-height: $r2H;
@ -104,16 +112,18 @@
color: $sliderColorKnobHov;
}
&.knob-l {
//margin-left: $sliderKnobW / -2;
@include border-bottom-left-radius($knobCr);
margin-left: $knobM;
.range-value {
text-align: right;
right: $sliderKnobW + $interiorMargin;
right: $rangeValOffset;
}
}
&.knob-r {
//margin-right: $sliderKnobW / -2;
@include border-bottom-right-radius($knobCr);
margin-right: $knobM;
.range-value {
left: $sliderKnobW + $interiorMargin;
left: $rangeValOffset;
}
}
}

6
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -27,9 +27,11 @@ $sliderColorBase: $colorKey;
$sliderColorRangeHolder: rgba(black, 0.1);
$sliderColorRange: rgba($sliderColorBase, 0.3);
$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
$sliderColorKnob: $sliderColorRange;
$sliderColorKnob: rgba($sliderColorBase, 0.6);
$sliderColorKnobHov: $sliderColorBase;
$sliderKnobW: 5px;
$sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
$sliderColorRangeValHovFg: $colorKeyFg;
$sliderKnobW: 4px;
// General Colors
$colorAlt1: #ffc700;

6
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -27,9 +27,11 @@ $sliderColorBase: $colorKey;
$sliderColorRangeHolder: rgba(black, 0.07);
$sliderColorRange: rgba($sliderColorBase, 0.3);
$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
$sliderColorKnob: $sliderColorRange;
$sliderColorKnob: rgba($sliderColorBase, 0.6);
$sliderColorKnobHov: $sliderColorBase;
$sliderKnobW: 5px;
$sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
$sliderColorRangeValHovFg: $colorBodyFg;
$sliderKnobW: 4px;
// General Colors
$colorAlt1: #ff6600;