alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' into open638_rebase

Browse Source
This commit is contained in:
Pete Richards
2016-02-23 10:56:13 -08:00
parent 7d0de68db9 77a2e0a70b
commit fcdf89a4ee
155 changed files with 2018 additions and 52049 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
platform/commonUI/general/res/sass/controls/_breadcrumb.scss
View File

@@ -8,9 +8,9 @@
.l-breadcrumb-item {
//@include test();
a {
@include box-sizing(border-box);
@include border-radius($basicCr*.75);
@include single-transition(background-color, 0.25s);
box-sizing: border-box;
border-radius: $basicCr*.75;
@include transition(background-color, 0.25s);
color: darken($colorBodyFg, 15%);
display: inline-block;
//margin-right: $interiorMargin;

232
platform/commonUI/general/res/sass/controls/_buttons.scss
View File

@@ -32,7 +32,7 @@ $pad: $interiorMargin * $baseRatio;
}
.s-btn {
@include box-sizing(border-box);
box-sizing: border-box;
padding: 0 $pad;
font-size: 0.7rem;
vertical-align: top;
@@ -66,7 +66,7 @@ $pad: $interiorMargin * $baseRatio;
&:not(.major) {
// bg, bgHov, fg, ic
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
@include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);
}
&.pause-play {
@@ -91,7 +91,7 @@ $pad: $interiorMargin * $baseRatio;
&.paused {
@include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
.icon {
@include pulse(1000ms);
@include pulse($dur: 1000ms);
:before {
content: "\0000EF";
}
@@ -111,172 +111,154 @@ $pad: $interiorMargin * $baseRatio;
// Color and styling additionally in _controls.scss
}
.mini-tab {
body.desktop .mini-tab {
// Meant to be used as pane hide/show control elements in concert with mct-splitter
//@extend .ui-symbol;
@include desktop {
//@include test(green);
$iconH: $uePaneMiniTabH;
$iconW: $uePaneMiniTabW;
$iconInnerLR: 0;
$arwD: 9px;
$arwOffsetX: 0px;
$arwAnimOffsetX: 2px + $iconInnerLR;
$cBg: pullForward($colorBodyBg, 15%);
$cFg: $cBg;
$iconH: $uePaneMiniTabH;
$iconW: $uePaneMiniTabW;
$iconInnerLR: 0;
$arwD: 9px;
$arwOffsetX: 0px;
$arwAnimOffsetX: 2px + $iconInnerLR;
$cBg: pullForward($colorBodyBg, 15%);
$cFg: $cBg;
@include border-radius($basicCr);
//@include boxShdw($shdwBtns);
@include box-sizing(border-box);
@include trans-prop-nice((color, background-color), 100ms);
color: $cFg;
cursor: pointer;
font-family: symbolsfont;
font-size: $arwD;
display: block;
position: absolute;
line-height: $iconH;
height: $iconH; width: $iconW;
text-align: center;
border-radius: $basicCr;
//@include boxShdw($shdwBtns);
box-sizing: border-box;
@include trans-prop-nice((color, background-color), 100ms);
color: $cFg;
cursor: pointer;
font-family: symbolsfont;
font-size: $arwD;
display: block;
position: absolute;
line-height: $iconH;
height: $iconH; width: $iconW;
text-align: center;
&.collapsed {
// State when the pane this element controls has been collapsed
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
&:before { opacity: 0; }
&:after { opacity: 1; }
&:hover {
//background-color: $cBg;
color: $colorKey; //pullForward($cFg, $ltGamma);
&:before { opacity: 1; }
&:after { opacity: 0; }
}
&.collapsed {
// State when the pane this element controls has been collapsed
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
&:before { opacity: 0; }
&:after { opacity: 1; }
&:hover {
&:before { opacity: 1; }
&:after { opacity: 0; }
}
}
}
&:before,
&:after {
@include trans-prop-nice((left, right, opacity), 250ms);
display: block;
height: 100%;
position: absolute;
}
&:before,
&:after {
//@include test();
@include trans-prop-nice((left, right, opacity), 250ms);
display: block;
height: 100%;
position: absolute;
}
&:before {
// Always the arrow icon
width: $arwD;
}
&:after {
// Always icon; content is set in _layout.scss
width: 100%;
text-align: center;
opacity: 0;
}
&.anchor-left {
// |<
text-align: right;
&:before {
// Always the arrow icon
//@include test(green);
//font-size: $arwD;
width: $arwD;
content:'\3c'; // Collapse left icon e613
right: $iconInnerLR;
}
&:after {
// Always icon; content is set in _layout.scss
width: 100%;
text-align: center;
opacity: 0;
}
&.anchor-left {
// |<
text-align: right;
&:before {
content:'\3c'; // Collapse left icon e613
right: $iconInnerLR;
}
//&:hover:before { right: $arwAnimOffsetX; }
&.collapsed {
@include border-left-radius(0);
text-align: left;
&:before {
content:'\3e';
left: $iconInnerLR;
}
&:hover:before { left: $arwAnimOffsetX; }
}
}
&.anchor-right {
// >|
&.collapsed {
@include border-left-radius(0);
text-align: left;
&:before {
content:'\3e'; // Collapse right icon e614
content:'\3e';
left: $iconInnerLR;
}
//&:hover:before { left: $arwAnimOffsetX; }
&.collapsed {
@include border-right-radius(0);
&:before {
text-align: right;
content:'\3c';
right: $iconInnerLR;
}
&:hover:before { right: $arwAnimOffsetX; }
&:hover:before { left: $arwAnimOffsetX; }
}
}
&.anchor-right {
// >|
text-align: left;
&:before {
content:'\3e'; // Collapse right icon e614
left: $iconInnerLR;
}
&.collapsed {
@include border-right-radius(0);
&:before {
text-align: right;
content:'\3c';
right: $iconInnerLR;
}
&:hover:before { right: $arwAnimOffsetX; }
}
}
}
.mini-tab-icon {
body.desktop .mini-tab-icon {
// Meant to be used as pane hide/show control elements in concert with mct-splitter
//@extend .ui-symbol;
@include desktop {
$d: $uePaneMiniTabW;
//@include trans-prop-nice(transform, 150ms);
color: pullForward($colorBodyBg, 15%);
cursor: pointer;
display: block;
font-family: symbolsfont;
font-size: $d;
$d: $uePaneMiniTabW;
color: pullForward($colorBodyBg, 15%);
cursor: pointer;
display: block;
font-family: symbolsfont;
font-size: $d;
position: absolute;
height: $d; width: $d;
line-height: $d;
overflow: hidden;
word-break: break-all;
&.collapsed {
$d: $uePaneMiniTabCollapsedW;
width: $d; font-size: $d;
}
&:before,
&:after {
position: absolute;
height: $d; width: $d;
line-height: $d;
overflow: hidden;
word-break: break-all;
display: inherit;
}
&.collapsed {
$d: $uePaneMiniTabCollapsedW;
width: $d; font-size: $d;
}
&:before {
content: '\78'; // X icon
}
&:before,
&:after {
position: absolute;
display: inherit;
}
&:before {
content: '\78'; // X icon
}
&:hover {
color: $colorKey;
//@include transform(scale(1.2));
}
&:hover {
color: $colorKey;
}
}
.l-btn-set {
// Buttons that have a very tight conceptual grouping - no internal space between them.
// Structure: .btn-set > mct-representation class=first|last > .s-btn
//@include test(red);
font-size: 0; // Remove space between s-btn elements due to white space in markup
.s-btn {
@include border-radius(0);
border-radius: 0;
margin-left: 1px;
}
.first {
.s-btn {
.s-btn,
&.s-btn {
@include border-left-radius($controlCr);
margin-left: 0;
}
}
.last {
.s-btn {
.s-btn,
&.s-btn {
@include border-right-radius($controlCr);
}
}

4
platform/commonUI/general/res/sass/controls/_color-palette.scss
View File

@@ -25,7 +25,7 @@
$m: 1;
$colorSelectedColor: #fff;
@include box-sizing(border-box);
box-sizing: border-box;
padding: $interiorMargin !important;
.l-palette-row {
@@ -34,7 +34,7 @@
width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
.l-palette-item {
@include box-sizing(border-box);
box-sizing: border-box;
@include txtShdwSubtle(0.8);
@include trans-prop-nice-fade(0.25s);
border: 1px solid transparent;

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

@@ -28,8 +28,8 @@
}
.accordion-head {
$op: 0.2;
@include border-radius($basicCr * 0.75);
@include box-sizing("border-box");
border-radius: $basicCr * 0.75;
box-sizing: "border-box";
background: rgba($colorBodyFg, $op);
cursor: pointer;
font-size: 0.75em;
@@ -83,7 +83,7 @@
.l-control-group {
// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
@include box-sizing(border-box);
box-sizing: border-box;
border-left: 1px solid $colorInteriorBorder;
display: inline-block;
padding: 0 $interiorMargin;
@@ -123,9 +123,9 @@ label.radio.custom {
height: $d;
width: $d;
&:before {
@include border-radius($basicCr * .75);
border-radius: $basicCr * .75;
background: $bg;
@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
box-shadow: inset rgba(black, 0.4) 0 1px 2px;
box-sizing: border-box;
content: "";
font-family: 'symbolsfont';
@@ -181,7 +181,7 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
.item .checkbox {
&.checked label {
@include box-shadow(none);
box-shadow: none;
border-bottom: none;
}
}
@@ -234,16 +234,16 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
font-size: 0.7em;
@include webkitProp(flex, '0 0 1');
}
}
@include desktop {
body.desktop .object-header {
.context-available {
@include trans-prop-nice(opacity, 0.25s);
opacity: 0;
}
&:hover {
.context-available {
@include trans-prop-nice(opacity, 0.25s);
opacity: 0;
}
&:hover {
.context-available {
opacity: 1;
}
opacity: 1;
}
}
}
@@ -292,13 +292,13 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
}
.s-progress-bar {
@include border-radius($basicCr);
border-radius: $basicCr;
@include boxIncised(0.3, 4px);
background: $colorProgressBarOuter;
.progress-amt {
@include border-radius($basicCr);
border-radius: $basicCr;
@include boxShdw();
@include border-radius($basicCr - 1);
border-radius: $basicCr - 1;
@include trans-prop-nice(width);
&:before {
background-color: $colorProgressBarAmt;
@@ -432,7 +432,7 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
.l-calendar {
$colorMuted: pushBack($colorMenuFg, 30%);
ul.l-cal-row {
@include display-flex;
@include display(flex);
@include flex-flow(row nowrap);
margin-top: 1px;
&:first-child {
@@ -480,11 +480,11 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
/******************************************************** BROWSER ELEMENTS */
@include desktop {
body.desktop {
::-webkit-scrollbar {
@include border-radius(2px);
@include box-sizing(border-box);
@include box-shadow(inset $scrollbarTrackShdw);
border-radius: 2px;
box-sizing: border-box;
box-shadow: inset $scrollbarTrackShdw;
background-color: $scrollbarTrackColorBg;
height: $scrollbarTrackSize;
width: $scrollbarTrackSize;
@@ -495,8 +495,8 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
$hc: $scrollbarThumbColorHov;
$gr: 5%;
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
@include border-radius(2px);
@include box-sizing(border-box);
border-radius: 2px;
box-sizing: border-box;
&:hover {
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
}

8
platform/commonUI/general/res/sass/controls/_menus.scss
View File

@@ -72,7 +72,7 @@
}
.s-menu {
@include border-radius($basicCr);
border-radius: $basicCr;
@include containerSubtle($colorMenuBg, $colorMenuFg);
@include boxShdw($shdwMenu);
@include txtShdw($shdwMenuText);
@@ -87,7 +87,7 @@
ul {
@include menuUlReset();
li {
@include box-sizing(border-box);
box-sizing: border-box;
border-top: 1px solid pullForward($colorMenuBg, 10%);
color: pullForward($colorMenuBg, 60%);
line-height: $menuLineH;
@@ -171,7 +171,7 @@
@include absPosDefault($interiorMargin);
}
.pane {
@include box-sizing(border-box);
box-sizing: border-box;
&.left {
//@include test();
border-right: 1px solid pullForward($colorMenuBg, 10%);
@@ -183,7 +183,7 @@
overflow-y: auto;
ul {
li {
@include border-radius($controlCr);
border-radius: $controlCr;
padding-left: 30px;
border-top: none;
}

68
platform/commonUI/general/res/sass/controls/_messages.scss
View File

@@ -36,11 +36,16 @@
}
}
mct-include.status-block-holder {
// mct-include that wraps status.block
// Must use display: inline-block to fix white space problems
display: inline-block;
}
.status.block {
$transDelay: 1.5s;
$transSpeed: .25s;
color: $colorStatusDefault;
cursor: default;
display: inline-block;
margin-right: $interiorMargin;
.status-indicator,
@@ -50,6 +55,9 @@
vertical-align: top;
}
&.clickable { cursor: pointer; }
&:not(.clickable) { cursor: default; }
&.no-icon {
.status-indicator {
display: none;
@@ -60,9 +68,6 @@
float: right;
}
&.subtle {
opacity: 0.5;
}
.status-indicator {
margin-right: $interiorMarginSm;
}
@@ -77,7 +82,7 @@
&:hover {
.label {
@include trans-prop-nice(max-width, $transSpeed, 0s);
max-width: 450px;
max-width: 600px;
width: auto;
}
.count {
@@ -99,17 +104,26 @@
&.error .status-indicator {
color: $colorStatusError;
}
&.available .status-indicator {
color: $colorStatusAvailable;
}
.count {
@include trans-prop-nice(opacity, $transSpeed, $transDelay);
font-weight: bold;
opacity: 1;
}
.s-btn {
background: $colorStatusBtnBg;
padding: 0 $interiorMargin;
height: auto;
line-height: inherit;
}
}
/* Styles for messages and message banners */
.message {
&.block {
@include border-radius($basicCr);
border-radius: $basicCr;
padding: $interiorMarginLg;
}
&.error {
@@ -121,9 +135,9 @@
.l-message-banner {
$m: $interiorMarginSm;
$lh: $ueFooterH - ($m*2) - 1;
@include box-sizing(border-box);
box-sizing: border-box;
@include ellipsize();
@include display-flex;
@include display(flex);
@include flex-direction(row);
@include align-items(center);
position: absolute;
@@ -146,7 +160,7 @@
left: 50%;
opacity: 1;
&:not(.info) {
@include pulse(100ms, 10);
@include pulse($dur: 100ms, $iteration: 10);
}
}
@@ -184,12 +198,12 @@
}
.s-message-banner {
@include border-radius($controlCr);
border-radius: $controlCr;
@include statusBannerColors($colorStatusDefault, $colorStatusFg);
cursor: pointer;
a { color: inherit; }
.s-action {
@include border-radius($basicCr);
border-radius: $basicCr;
@include trans-prop-nice(background-color);
}
.close {
@@ -250,7 +264,7 @@
*/
.l-message {
@include display-flex;
@include display(flex);
@include flex-direction(row);
@include align-items(stretch);
.type-icon.message-type {
@@ -275,17 +289,17 @@
// Message as singleton
.t-message-single {
@include messageBlock(80px);
}
@include desktop {
.l-message,
.bottom-bar {
@include absPosDefault();
}
body.desktop .t-message-single {
.l-message,
.bottom-bar {
@include absPosDefault();
}
.bottom-bar {
top: auto;
height: $ovrFooterH;
}
.bottom-bar {
top: auto;
height: $ovrFooterH;
}
}
@@ -295,15 +309,13 @@
.message-contents {
.l-message {
//border-bottom: 1px solid pullForward($colorOvrBg, 20%);
@include border-radius($controlCr);
border-radius: $controlCr;
background: rgba($colorOvrFg, 0.1);
margin-bottom: $interiorMargin;
padding: $interiorMarginLg;
.message-contents,
.bottom-bar {
//@include test(green);
position: relative;
}
@@ -320,8 +332,8 @@
}
}
}
}
@include desktop {
.message-contents .l-message { margin-right: $interiorMarginLg; }
}
}
body.desktop .t-message-list {
.message-contents .l-message { margin-right: $interiorMarginLg; }
}

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

@@ -37,7 +37,7 @@ mct-include.l-time-controller {
{
//@include test();
@include absPosDefault(0, visible);
@include box-sizing(border-box);
box-sizing: border-box;
top: auto;
}
.l-time-range-slider,
@@ -73,7 +73,7 @@ mct-include.l-time-controller {
//@include test(green);
height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
.range-holder {
@include box-shadow(none);
box-shadow: none;
background: none;
border: none;
.range {
@@ -101,7 +101,7 @@ mct-include.l-time-controller {
}
&:after {
// Circle element
@include border-radius($myW);
border-radius: $myW;
@include transform(translateY(-50%));
top: 50%; right: 0; bottom: auto; left: 0;
width: auto;
@@ -167,7 +167,7 @@ mct-include.l-time-controller {
color: $sliderColorKnobHov;
}
&.knob-l {
//@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS
//border-bottom-left-radius: $knobCr; // MOVED TO _CONTROLS.SCSS
margin-left: $knobM;
.range-value {
text-align: right;
@@ -175,7 +175,7 @@ mct-include.l-time-controller {
}
}
&.knob-r {
//@include border-bottom-right-radius($knobCr);
//border-bottom-right-radius: $knobCr;
margin-right: $knobM;
.range-value {
left: $rangeValOffset;
@@ -193,7 +193,7 @@ mct-include.l-time-controller {
.s-time-range-val {
//@include test();
@include border-radius($controlCr);
border-radius: $controlCr;
background-color: $colorInputBg;
padding: 1px 1px 0 $interiorMargin;
}