alihan/openmct
1
0
Fork 0
Code Issues Pull Requests 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
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 { .range {
$tbOffset: 2px;
@include trans-prop-nice-fade(.25s); @include trans-prop-nice-fade(.25s);
background-color: $sliderColorRange; background-color: $sliderColorRange;
cursor: ew-resize; cursor: ew-resize;
position: absolute; position: absolute;
top: 0; top: 0; //$tbOffset;
right: auto; right: auto;
bottom: 0; bottom: $tbOffset;
left: auto; left: auto;
height: auto; height: auto;
width: auto; width: auto;

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

@@ -1,11 +1,16 @@
.l-time-controller { .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; $r1H: 33px;
$r2H: 20px; $r2H: 20px;
$r3H: 20px; $r3H: 20px;
min-width: 400px;
.l-time-range-inputs-holder, .l-time-range-inputs-holder,
.l-time-range-slider { .l-time-range-slider {
font-size: 0.8em; font-size: 0.8em;
@@ -18,6 +23,7 @@
//@include test(); //@include test();
@include absPosDefault(0, visible); @include absPosDefault(0, visible);
@include box-sizing(border-box); @include box-sizing(border-box);
min-width: $minW;
top: auto; top: auto;
} }
.l-time-range-slider, .l-time-range-slider,
@@ -95,6 +101,8 @@
.knob { .knob {
width: $sliderKnobW; width: $sliderKnobW;
.range-value { .range-value {
//@include test($sliderColorRange);
@include trans-prop-nice-fade(.25s);
position: absolute; position: absolute;
height: $r2H; height: $r2H;
line-height: $r2H; line-height: $r2H;
@@ -104,16 +112,18 @@
color: $sliderColorKnobHov; color: $sliderColorKnobHov;
} }
&.knob-l { &.knob-l {
//margin-left: $sliderKnobW / -2; @include border-bottom-left-radius($knobCr);
margin-left: $knobM;
.range-value { .range-value {
text-align: right; text-align: right;
right: $sliderKnobW + $interiorMargin; right: $rangeValOffset;
} }
} }
&.knob-r { &.knob-r {
//margin-right: $sliderKnobW / -2; @include border-bottom-right-radius($knobCr);
margin-right: $knobM;
.range-value { .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); $sliderColorRangeHolder: rgba(black, 0.1);
$sliderColorRange: rgba($sliderColorBase, 0.3); $sliderColorRange: rgba($sliderColorBase, 0.3);
$sliderColorRangeHov: rgba($sliderColorBase, 0.5); $sliderColorRangeHov: rgba($sliderColorBase, 0.5);
$sliderColorKnob: $sliderColorRange; $sliderColorKnob: rgba($sliderColorBase, 0.6);
$sliderColorKnobHov: $sliderColorBase; $sliderColorKnobHov: $sliderColorBase;
$sliderKnobW: 5px; $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
$sliderColorRangeValHovFg: $colorKeyFg;
$sliderKnobW: 4px;
// General Colors // General Colors
$colorAlt1: #ffc700; $colorAlt1: #ffc700;

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

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