mirror of
https://github.com/nasa/openmct.git
synced 2024-12-23 23:12:23 +00:00
[Frontend] Refactoring to use Victorizr instead of media queries
open #639 open #683 open #169 MQs refactored in mobile/_layout.scss;
This commit is contained in:
Charles Hacskaylo
parent
66905cbcbb
commit
f6cb76354e
@ -20,14 +20,7 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
@include phoneandtablet {
|
||||
// Wrapper of the entire 2 panes, only enacted on
|
||||
// phone and tablet. Also for the panes
|
||||
.browse-wrapper,
|
||||
.pane {
|
||||
top: 0 !important; right: 0; bottom: 0; left: 0;
|
||||
}
|
||||
|
||||
body.mobile {
|
||||
.pane.left.treeview {
|
||||
background-color: $colorMobilePaneLeft;
|
||||
}
|
||||
@ -141,7 +134,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include phonePortrait {
|
||||
body.phone.portrait {
|
||||
.pane-tree-showing {
|
||||
.pane.left.treeview {
|
||||
width: $proporMenuOnly !important;
|
||||
|
||||
@ -5203,21 +5203,11 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@media only screen and (orientation: portrait) and (max-device-width: 767px), only screen and (orientation: landscape) and (max-device-width: 767px), only screen and (orientation: portrait) and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (orientation: landscape) and (min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
/* line 26, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.browse-wrapper,
|
||||
.pane {
|
||||
top: 0 !important;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0; }
|
||||
|
||||
/* line 31, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane.left.treeview {
|
||||
/* line 31, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .pane.left.treeview {
|
||||
background-color: #262626; }
|
||||
|
||||
/* line 35, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane.right.items {
|
||||
/* line 35, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .pane.right.items {
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
-webkit-transition-duration: 0.35s;
|
||||
@ -5226,7 +5216,7 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
backface-visibility: hidden;
|
||||
margin-left: 0 !important; }
|
||||
/* line 39, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane.right.items .holder-object-and-inspector {
|
||||
body.mobile .pane.right.items .holder-object-and-inspector {
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
-webkit-transition-duration: 0.35s;
|
||||
@ -5236,17 +5226,14 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
opacity: 1; }
|
||||
|
||||
/* line 47, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.create-btn-holder {
|
||||
/* line 47, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .create-btn-holder {
|
||||
display: none; }
|
||||
|
||||
/* line 53, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.holder.holder-treeview-elements {
|
||||
/* line 53, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .holder.holder-treeview-elements {
|
||||
right: 10px !important; }
|
||||
|
||||
/* line 63, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-hidden .pane.left.treeview {
|
||||
/* line 63, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .pane-tree-hidden .pane.left.treeview {
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
-webkit-transition-property: opacity;
|
||||
@ -5264,12 +5251,11 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
-webkit-transition-delay: 0;
|
||||
transition-delay: 0;
|
||||
opacity: 0 !important; }
|
||||
/* line 67, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-hidden .pane.right.items {
|
||||
/* line 67, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .pane-tree-hidden .pane.right.items {
|
||||
left: 0 !important; }
|
||||
|
||||
/* line 80, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-showing .pane.left.treeview {
|
||||
/* line 80, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .pane-tree-showing .pane.left.treeview {
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
-webkit-transition-property: opacity;
|
||||
@ -5293,53 +5279,47 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
|
||||
right: auto !important;
|
||||
width: 40% !important; }
|
||||
/* line 87, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-showing .pane.right.items {
|
||||
/* line 87, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .pane-tree-showing .pane.right.items {
|
||||
left: 40% !important; }
|
||||
|
||||
/* line 92, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.toggle-tree {
|
||||
/* line 92, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .toggle-tree {
|
||||
color: #0099cc !important;
|
||||
font-size: 110%;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 10px; }
|
||||
/* line 98, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.toggle-tree:after {
|
||||
body.mobile .toggle-tree:after {
|
||||
content: 'm' !important;
|
||||
font-family: symbolsfont; }
|
||||
|
||||
/* line 104, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.object-browse-bar {
|
||||
/* line 104, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .object-browse-bar {
|
||||
margin-left: 45px; }
|
||||
/* line 106, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.object-browse-bar .context-available {
|
||||
body.mobile .object-browse-bar .context-available {
|
||||
opacity: 1 !important; }
|
||||
/* line 109, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.object-browse-bar .view-switcher {
|
||||
body.mobile .object-browse-bar .view-switcher {
|
||||
margin-right: 0 !important; }
|
||||
/* line 111, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.object-browse-bar .view-switcher .title-label {
|
||||
body.mobile .object-browse-bar .view-switcher .title-label {
|
||||
display: none; }
|
||||
|
||||
/* line 118, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.tree-holder {
|
||||
/* line 118, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .tree-holder {
|
||||
overflow-x: hidden !important; }
|
||||
|
||||
/* line 122, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.mobile-disable-select {
|
||||
/* line 122, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .mobile-disable-select {
|
||||
-moz-user-select: -moz-none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
/* line 127, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.mobile-hide,
|
||||
.mobile-hide-important {
|
||||
/* line 127, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .mobile-hide,
|
||||
body.mobile .mobile-hide-important {
|
||||
display: none !important; }
|
||||
|
||||
/* line 132, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.mobile-back-hide {
|
||||
/* line 132, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .mobile-back-hide {
|
||||
pointer-events: none;
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
@ -5358,9 +5338,8 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
-webkit-transition-delay: 0;
|
||||
transition-delay: 0;
|
||||
opacity: 0; }
|
||||
|
||||
/* line 137, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.mobile-back-unhide {
|
||||
/* line 137, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .mobile-back-unhide {
|
||||
pointer-events: all;
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
@ -5378,21 +5357,22 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
-o-transition-delay: 0;
|
||||
-webkit-transition-delay: 0;
|
||||
transition-delay: 0;
|
||||
opacity: 1; } }
|
||||
@media only screen and (orientation: portrait) and (max-device-width: 767px) {
|
||||
/* line 146, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-showing .pane.left.treeview {
|
||||
opacity: 1; }
|
||||
|
||||
/* line 146, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.phone.portrait .pane-tree-showing .pane.left.treeview {
|
||||
width: 90% !important; }
|
||||
/* line 149, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-showing .pane.right.items {
|
||||
/* line 149, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.phone.portrait .pane-tree-showing .pane.right.items {
|
||||
left: 0 !important;
|
||||
-moz-transform: translateX(90%);
|
||||
-ms-transform: translateX(90%);
|
||||
-webkit-transform: translateX(90%);
|
||||
transform: translateX(90%); }
|
||||
/* line 152, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-showing .pane.right.items .holder-object-and-inspector {
|
||||
opacity: 0; } }
|
||||
body.phone.portrait .pane-tree-showing .pane.right.items .holder-object-and-inspector {
|
||||
opacity: 0; }
|
||||
|
||||
/* line 160, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.desktop .desktop-hide {
|
||||
display: none; }
|
||||
|
||||
@ -5101,21 +5101,11 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@media only screen and (orientation: portrait) and (max-device-width: 767px), only screen and (orientation: landscape) and (max-device-width: 767px), only screen and (orientation: portrait) and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (orientation: landscape) and (min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
/* line 26, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.browse-wrapper,
|
||||
.pane {
|
||||
top: 0 !important;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0; }
|
||||
|
||||
/* line 31, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane.left.treeview {
|
||||
/* line 31, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .pane.left.treeview {
|
||||
background-color: #f7f7f7; }
|
||||
|
||||
/* line 35, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane.right.items {
|
||||
/* line 35, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .pane.right.items {
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
-webkit-transition-duration: 0.35s;
|
||||
@ -5124,7 +5114,7 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
backface-visibility: hidden;
|
||||
margin-left: 0 !important; }
|
||||
/* line 39, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane.right.items .holder-object-and-inspector {
|
||||
body.mobile .pane.right.items .holder-object-and-inspector {
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
-webkit-transition-duration: 0.35s;
|
||||
@ -5134,17 +5124,14 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
opacity: 1; }
|
||||
|
||||
/* line 47, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.create-btn-holder {
|
||||
/* line 47, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .create-btn-holder {
|
||||
display: none; }
|
||||
|
||||
/* line 53, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.holder.holder-treeview-elements {
|
||||
/* line 53, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .holder.holder-treeview-elements {
|
||||
right: 10px !important; }
|
||||
|
||||
/* line 63, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-hidden .pane.left.treeview {
|
||||
/* line 63, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .pane-tree-hidden .pane.left.treeview {
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
-webkit-transition-property: opacity;
|
||||
@ -5162,12 +5149,11 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
-webkit-transition-delay: 0;
|
||||
transition-delay: 0;
|
||||
opacity: 0 !important; }
|
||||
/* line 67, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-hidden .pane.right.items {
|
||||
/* line 67, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .pane-tree-hidden .pane.right.items {
|
||||
left: 0 !important; }
|
||||
|
||||
/* line 80, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-showing .pane.left.treeview {
|
||||
/* line 80, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .pane-tree-showing .pane.left.treeview {
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
-webkit-transition-property: opacity;
|
||||
@ -5191,53 +5177,47 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
|
||||
right: auto !important;
|
||||
width: 40% !important; }
|
||||
/* line 87, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-showing .pane.right.items {
|
||||
/* line 87, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .pane-tree-showing .pane.right.items {
|
||||
left: 40% !important; }
|
||||
|
||||
/* line 92, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.toggle-tree {
|
||||
/* line 92, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .toggle-tree {
|
||||
color: #0099cc !important;
|
||||
font-size: 110%;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 10px; }
|
||||
/* line 98, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.toggle-tree:after {
|
||||
body.mobile .toggle-tree:after {
|
||||
content: 'm' !important;
|
||||
font-family: symbolsfont; }
|
||||
|
||||
/* line 104, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.object-browse-bar {
|
||||
/* line 104, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .object-browse-bar {
|
||||
margin-left: 45px; }
|
||||
/* line 106, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.object-browse-bar .context-available {
|
||||
body.mobile .object-browse-bar .context-available {
|
||||
opacity: 1 !important; }
|
||||
/* line 109, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.object-browse-bar .view-switcher {
|
||||
body.mobile .object-browse-bar .view-switcher {
|
||||
margin-right: 0 !important; }
|
||||
/* line 111, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.object-browse-bar .view-switcher .title-label {
|
||||
body.mobile .object-browse-bar .view-switcher .title-label {
|
||||
display: none; }
|
||||
|
||||
/* line 118, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.tree-holder {
|
||||
/* line 118, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .tree-holder {
|
||||
overflow-x: hidden !important; }
|
||||
|
||||
/* line 122, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.mobile-disable-select {
|
||||
/* line 122, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .mobile-disable-select {
|
||||
-moz-user-select: -moz-none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
/* line 127, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.mobile-hide,
|
||||
.mobile-hide-important {
|
||||
/* line 127, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .mobile-hide,
|
||||
body.mobile .mobile-hide-important {
|
||||
display: none !important; }
|
||||
|
||||
/* line 132, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.mobile-back-hide {
|
||||
/* line 132, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .mobile-back-hide {
|
||||
pointer-events: none;
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
@ -5256,9 +5236,8 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
-webkit-transition-delay: 0;
|
||||
transition-delay: 0;
|
||||
opacity: 0; }
|
||||
|
||||
/* line 137, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.mobile-back-unhide {
|
||||
/* line 137, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.mobile .mobile-back-unhide {
|
||||
pointer-events: all;
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
@ -5276,21 +5255,22 @@ body.desktop .pane.primary-pane .object-browse-bar {
|
||||
-o-transition-delay: 0;
|
||||
-webkit-transition-delay: 0;
|
||||
transition-delay: 0;
|
||||
opacity: 1; } }
|
||||
@media only screen and (orientation: portrait) and (max-device-width: 767px) {
|
||||
/* line 146, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-showing .pane.left.treeview {
|
||||
opacity: 1; }
|
||||
|
||||
/* line 146, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.phone.portrait .pane-tree-showing .pane.left.treeview {
|
||||
width: 90% !important; }
|
||||
/* line 149, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-showing .pane.right.items {
|
||||
/* line 149, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.phone.portrait .pane-tree-showing .pane.right.items {
|
||||
left: 0 !important;
|
||||
-moz-transform: translateX(90%);
|
||||
-ms-transform: translateX(90%);
|
||||
-webkit-transform: translateX(90%);
|
||||
transform: translateX(90%); }
|
||||
/* line 152, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
.pane-tree-showing .pane.right.items .holder-object-and-inspector {
|
||||
opacity: 0; } }
|
||||
body.phone.portrait .pane-tree-showing .pane.right.items .holder-object-and-inspector {
|
||||
opacity: 0; }
|
||||
|
||||
/* line 160, ../../../../general/res/sass/mobile/_layout.scss */
|
||||
body.desktop .desktop-hide {
|
||||
display: none; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user