ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-12 07:52:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Tweaks to slider knobs

Browse Source 
open #889
- Knob size increased;
- Knob grippies added;
This commit is contained in:
Charles Hacskaylo 2016-05-10 14:28:23 -07:00
parent c301523156
commit 8788523c25
4 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -139,6 +139,17 @@
background-size: $d $d; background-size: $d $d;
} }
@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
@include background-image(linear-gradient($angle,
rgba($c, $a) 25%, transparent 25%,
transparent 50%, rgba($c, $a) 50%,
rgba($c, $a) 75%, transparent 75%,
transparent 100%
));
background-repeat: repeat;
background-size: $bgsize $bgsize;
}
@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) { @mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
@include background-image(linear-gradient(-90deg, @include background-image(linear-gradient(-90deg,
rgba($c, $a) 0%, rgba($c, $a) 50%, rgba($c, $a) 0%, rgba($c, $a) 50%,

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

@ -147,6 +147,16 @@
.knob { .knob {
z-index: 2; z-index: 2;
&:before {
$mTB: 2px;
$grippyW: 3px;
$mLR: ($sliderKnobW - $grippyW)/2;
@include bgStripes($c: pullForward($sliderColorKnob, 20%), $a: 1, $bgsize: 4px, $angle: 0deg);
content: '';
display: block;
position: absolute;
top: $mTB; right: $mLR; bottom: $mTB; left: $mLR;
}
.range-value { .range-value {
@include trans-prop-nice-fade(.25s); @include trans-prop-nice-fade(.25s);
font-size: 0.7rem; font-size: 0.7rem;
@ -193,6 +203,8 @@
padding: 1px 1px 0 $interiorMargin; padding: 1px 1px 0 $interiorMargin;
} }
/******************************************************************** MOBILE */
@include phoneandtablet { @include phoneandtablet {
.l-time-controller, .l-time-range-inputs-holder { .l-time-controller, .l-time-range-inputs-holder {
min-width: 0px; min-width: 0px;

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

@ -32,11 +32,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: rgba($sliderColorBase, 0.6); $sliderColorKnob: pushBack($sliderColorBase, 15%);
$sliderColorKnobHov: $sliderColorBase; $sliderColorKnobHov: $sliderColorBase;
$sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1); $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
$sliderColorRangeValHovFg: $colorKeyFg; $sliderColorRangeValHovFg: $colorKeyFg;
$sliderKnobW: 5px; //nth($ueTimeControlH,2)/2; $sliderKnobW: 15px;
$sliderKnobR: 2px; $sliderKnobR: 2px;
$timeControllerToiLineColor: #00c2ff; $timeControllerToiLineColor: #00c2ff;
$timeControllerToiLineColorHov: #fff; $timeControllerToiLineColorHov: #fff;

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

@ -32,11 +32,11 @@ $sliderColorBase: $colorKey;
$sliderColorRangeHolder: rgba(black, 0.07); $sliderColorRangeHolder: rgba(black, 0.07);
$sliderColorRange: rgba($sliderColorBase, 0.2); $sliderColorRange: rgba($sliderColorBase, 0.2);
$sliderColorRangeHov: rgba($sliderColorBase, 0.4); $sliderColorRangeHov: rgba($sliderColorBase, 0.4);
$sliderColorKnob: rgba($sliderColorBase, 0.5); $sliderColorKnob: pushBack($sliderColorBase, 20%);
$sliderColorKnobHov: rgba($sliderColorBase, 0.7); $sliderColorKnobHov: rgba($sliderColorBase, 0.7);
$sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1); $sliderColorRangeValHovBg: $sliderColorRange;
$sliderColorRangeValHovFg: $colorBodyFg; $sliderColorRangeValHovFg: $colorBodyFg;
$sliderKnobW: 10px; $sliderKnobW: 15px;
$sliderKnobR: 2px; $sliderKnobR: 2px;
$timeControllerToiLineColor: $colorBodyFg; $timeControllerToiLineColor: $colorBodyFg;
$timeControllerToiLineColorHov: #0052b5; $timeControllerToiLineColorHov: #0052b5;