ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-02 00:39:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Refactor CSS to not use 'desktop' media query

Browse Source 
open #639
Refactored all usage of @include desktop to use CSS selector body.desktop
instead; Still to-do: deal with desktopandtablet usage with hover bubbles
and mixins btnBase;
This commit is contained in:
Charles Hacskaylo 2016-02-16 18:38:06 -08:00
parent 6fee4f340f
commit 0ddaa52a8a
10 changed files with 1001 additions and 1033 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -111,156 +111,138 @@ $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 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;
@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;
&:hover {
color: $colorKey;
}
&.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 {

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

@ -235,16 +235,16 @@ label.checkbox.custom {
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;
}
}
}

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

@ -275,17 +275,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,7 +295,6 @@
.message-contents {
.l-message {
//border-bottom: 1px solid pullForward($colorOvrBg, 20%);
@include border-radius($controlCr);
background: rgba($colorOvrFg, 0.1);
margin-bottom: $interiorMargin;
@ -303,7 +302,6 @@
.message-contents,
.bottom-bar {
//@include test(green);
position: relative;
}
@ -320,8 +318,8 @@
}
}
}
}
@include desktop {
.message-contents .l-message { margin-right: $interiorMarginLg; }
}
body.desktop .t-message-list {
.message-contents .l-message { margin-right: $interiorMarginLg; }
}

2
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@ -156,7 +156,7 @@
}
}
@include desktop {
body.desktop {
.desktop-hide {
display: none;
}

4
platform/commonUI/general/res/sass/mobile/_mixins.scss
View File

@ -78,6 +78,8 @@
// Desktop monitors in any orientation
@mixin desktopandtablet {
// Keeping only for legacy - should not be used moving forward
// Use body.desktop, body.tablet instead.
@media #{$tabletPortrait},
#{$tabletLandscape},
#{$desktop} {
@ -87,6 +89,8 @@
// Desktop monitors in any orientation
@mixin desktop {
// Keeping only for legacy - should not be used moving forward
// Use body.desktop instead.
@media #{$desktop} {
@content
}

37
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@ -63,11 +63,6 @@ ul.tree {
@include transform(rotate(90deg));
}
}
@include desktop {
&:hover {
color: $colorItemTreeVCHover !important;
}
}
}
.t-object-label {
@ -94,18 +89,6 @@ ul.tree {
}
}
&:not(.selected) {
@include desktop {
&:hover {
background: $colorItemTreeHoverBg;
color: $colorItemTreeHoverFg;
.t-item-icon {
color: $colorItemTreeIconHover;
}
}
}
}
&:not(.loading) {
cursor: pointer;
}
@ -123,6 +106,26 @@ ul.tree {
}
}
body.desktop {
.tree-item,
.search-result-item {
.view-control {
&:hover {
color: $colorItemTreeVCHover !important;
}
}
&:not(.selected) {
&:hover {
background: $colorItemTreeHoverBg;
color: $colorItemTreeHoverFg;
.t-item-icon {
color: $colorItemTreeIconHover;
}
}
}
}
}
mct-representation {
&.s-status-pending {
.t-object-label {

22
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@ -66,17 +66,6 @@
.view-switcher {
z-index: 10;
}
// Hide the view switcher by default when it's in an element that's in a frame context
// Frame template is used because we need to target the lowest nested frame
@include desktop {
.view-switcher {
opacity: 0;
}
&:hover .view-switcher {
// Show the view switcher on frame hover
opacity: 1;
}
}
}
.view-switcher {
// Hide the name when the view switcher is in a frame context
@ -85,3 +74,14 @@
}
}
}
body.desktop .frame.frame-template {
// Hide the view switcher by default when it's in an element that's in a frame context
// Frame template is used because we need to target the lowest nested frame
.view-switcher {
opacity: 0;
}
&:hover .view-switcher {
// Show the view switcher on frame hover
opacity: 1;
}
}

87
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@ -137,48 +137,6 @@
.mini-tab-icon.toggle-pane {
z-index: 5;
@include desktop {
$d: $uePaneMiniTabH;
$paneExpandedOffset: $splitterD + $uePaneMiniTabW;
top: $bodyMargin;
height: $d;
line-height: $d;
&:after {
// Always the icon that shows when the pane is collapsed
opacity: 0;
}
&.collapsed {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}
&.toggle-tree.anchor-left {
left: 0;
@include transform(translateX(-1 * $paneExpandedOffset));
&:after {
content: '\6d'; // Menu 'hamburger' icon
}
&.collapsed {
left: 0;
@include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
}
&:not(.collapsed):before {
@include trans-prop-nice(opacity, 200ms, 200ms);
}
}
&.toggle-inspect.anchor-right {
right: $bodyMargin;
&:after {
content: '\e615'; // Eye icon
}
&.collapsed {
right: $interiorMargin;
}
}
}
}
&.items {
.object-browse-bar {
@ -190,6 +148,49 @@
}
}
body.desktop .pane .mini-tab-icon.toggle-pane {
$d: $uePaneMiniTabH;
$paneExpandedOffset: $splitterD + $uePaneMiniTabW;
top: $bodyMargin;
height: $d;
line-height: $d;
&:after {
// Always the icon that shows when the pane is collapsed
opacity: 0;
}
&.collapsed {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}
&.toggle-tree.anchor-left {
left: 0;
@include transform(translateX(-1 * $paneExpandedOffset));
&:after {
content: '\6d'; // Menu 'hamburger' icon
}
&.collapsed {
left: 0;
@include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
}
&:not(.collapsed):before {
@include trans-prop-nice(opacity, 200ms, 200ms);
}
}
&.toggle-inspect.anchor-right {
right: $bodyMargin;
&:after {
content: '\e615'; // Eye icon
}
&.collapsed {
right: $interiorMargin;
}
}
}
.split-layout {
// Specific elements margins
.holder.holder-treeview-elements {
@ -339,7 +340,7 @@
}
}
@include desktop {
body.desktop {
.holder-all {
min-width: $ueDesktopMinW;
}

824
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

File diff suppressed because it is too large Load Diff

796
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

File diff suppressed because it is too large Load Diff