mirror of
https://github.com/nasa/openmct.git
synced 2025-05-11 21:13:02 +00:00
[Mobile] Sanding of mobile styles continues, in progress
open #74 CSS and markup changes for split pane holders; drop shadow added to tree area; Tree item cleanups; This or earlier commit broke treeview nav action; TO-DO: fix treeview nav action to hide menu;
This commit is contained in:
Charles Hacskaylo
parent
67592def90
commit
da8eb334e3
@ -20,30 +20,31 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
|
||||
<div content="jquery-wrapper" class="abs holder-all browse-mode" ng-controller="BrowseController">
|
||||
<div class="abs holder-all browse-mode" ng-controller="BrowseController">
|
||||
<mct-include key="'topbar-browse'"></mct-include>
|
||||
<div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
|
||||
<mct-split-pane class='contents abs' anchor='left'>
|
||||
<div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>
|
||||
<div class='holder tree-holder abs mobile-tree-holder'>
|
||||
<mct-representation key="'tree'"
|
||||
mct-object="domainObject"
|
||||
ng-model="treeModel">
|
||||
</mct-representation>
|
||||
</div>
|
||||
<div class="holder abs l-mobile">
|
||||
<div class='tree-holder abs mobile-tree-holder'>
|
||||
<mct-representation key="'tree'"
|
||||
mct-object="domainObject"
|
||||
ng-model="treeModel">
|
||||
</mct-representation>
|
||||
</div>
|
||||
<mct-representation key="'create-button'" mct-object="navigatedObject">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mct-splitter class="mobile-hide"></mct-splitter>
|
||||
<div class='split-pane-component items pane mobile-pane right-repr'>
|
||||
<div class='holder abs' id='content-area'>
|
||||
<div class='holder abs l-mobile' id='content-area'>
|
||||
<mct-representation mct-object="navigatedObject" key="'browse-object'">
|
||||
</mct-representation>
|
||||
</div>
|
||||
<div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos"
|
||||
ng-click="treeSlide()">m</div>
|
||||
</div>
|
||||
<div class="left key-properties ui-symbol icon mobile-menu-icon" ng-click="treeSlide()">m</div>
|
||||
</div>
|
||||
</mct-split-pane>
|
||||
</div>
|
||||
<mct-include key="'bottombar'"></mct-include>
|
||||
|
||||
@ -22,9 +22,9 @@
|
||||
<div class='object-header object-header-mobile'>
|
||||
<span class="label s-label">
|
||||
<mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation>
|
||||
<span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
|
||||
<span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
|
||||
<span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
|
||||
<span class='type-name mobile-important-hide'>{{type.getName()}}</span>
|
||||
<!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
|
||||
<span class='title-label'>{{model.name}}</span>
|
||||
<mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
|
||||
</span>
|
||||
|
||||
@ -216,23 +216,23 @@
|
||||
bottom: 10px;
|
||||
left: 10px; }
|
||||
/* line 63, ../sass/items/_item.scss */
|
||||
.items-holder .item.grid-item .bar.top-bar.abs {
|
||||
.items-holder .item.grid-item .bar.top-bar {
|
||||
bottom: auto;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
z-index: 5; }
|
||||
/* line 69, ../sass/items/_item.scss */
|
||||
.items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
|
||||
.items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
|
||||
width: auto; }
|
||||
/* line 71, ../sass/items/_item.scss */
|
||||
.items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
|
||||
.items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
|
||||
margin-left: 3px; }
|
||||
/* line 73, ../sass/items/_item.scss */
|
||||
.items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-icon-link {
|
||||
.items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
|
||||
color: #49dedb; }
|
||||
/* line 79, ../sass/items/_item.scss */
|
||||
.items-holder .item.grid-item .bar.bottom-bar.abs {
|
||||
.items-holder .item.grid-item .bar.bottom-bar {
|
||||
top: auto;
|
||||
height: 30px; }
|
||||
/* line 84, ../sass/items/_item.scss */
|
||||
@ -415,12 +415,12 @@
|
||||
line-height: 50px !important; }
|
||||
/* line 82, ../sass/mobile/_item.scss */
|
||||
.items-holder .item.grid-item .bar.bottom-bar {
|
||||
top: 7px !important;
|
||||
top: 7px;
|
||||
bottom: auto;
|
||||
height: 35px; }
|
||||
/* line 87, ../sass/mobile/_item.scss */
|
||||
.items-holder .item.grid-item .item-main .item-type {
|
||||
top: 10px !important;
|
||||
top: 10px;
|
||||
bottom: auto;
|
||||
height: 30px; }
|
||||
/* line 90, ../sass/mobile/_item.scss */
|
||||
@ -435,12 +435,12 @@
|
||||
line-height: 66px !important; }
|
||||
/* line 104, ../sass/mobile/_item.scss */
|
||||
.items-holder .item.grid-item .bar.bottom-bar {
|
||||
top: 15px !important;
|
||||
top: 15px;
|
||||
bottom: auto;
|
||||
height: 35px; }
|
||||
/* line 109, ../sass/mobile/_item.scss */
|
||||
.items-holder .item.grid-item .item-main .item-type {
|
||||
top: 18px !important;
|
||||
top: 18px;
|
||||
bottom: auto;
|
||||
height: 30px; }
|
||||
/* line 112, ../sass/mobile/_item.scss */
|
||||
|
||||
@ -759,27 +759,45 @@ mct-container {
|
||||
.browse-wrapper,
|
||||
.mobile-pane {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
top: 0 !important;
|
||||
right: 0;
|
||||
white-space: nowrap; } }
|
||||
bottom: 0;
|
||||
left: 0; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 35, ../sass/mobile/_layout.scss */
|
||||
.user-environ .browse-area,
|
||||
.user-environ .edit-area,
|
||||
.user-environ .editor {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 25px; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 44, ../sass/mobile/_layout.scss */
|
||||
.holder.l-mobile {
|
||||
top: 10px !important;
|
||||
right: 10px !important;
|
||||
bottom: 10px !important;
|
||||
left: 10px !important; } }
|
||||
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 38, ../sass/mobile/_layout.scss */
|
||||
/* line 56, ../sass/mobile/_layout.scss */
|
||||
.desktop-browse {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
width: 25%; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 49, ../sass/mobile/_layout.scss */
|
||||
/* line 67, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree {
|
||||
-moz-user-select: -moz-none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none; } }
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 60, ../sass/mobile/_layout.scss */
|
||||
/* line 78, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree .mobile-pane.left-menu {
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
@ -799,7 +817,7 @@ mct-container {
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden; } }
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 73, ../sass/mobile/_layout.scss */
|
||||
/* line 91, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree .mobile-pane.right-repr {
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
@ -810,19 +828,19 @@ mct-container {
|
||||
left: auto !important;
|
||||
width: 100% !important; } }
|
||||
|
||||
/* line 82, ../sass/mobile/_layout.scss */
|
||||
/* line 100, ../sass/mobile/_layout.scss */
|
||||
.mobile-tree-holder {
|
||||
top: 30px; }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 91, ../sass/mobile/_layout.scss */
|
||||
/* line 109, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree {
|
||||
-moz-user-select: -moz-none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none; } }
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 102, ../sass/mobile/_layout.scss */
|
||||
/* line 120, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.left-menu {
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
@ -836,27 +854,32 @@ mct-container {
|
||||
-o-transition-timing-function: ease-in-out;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
transition-timing-function: ease-in-out;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||
background-size: 100%;
|
||||
background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
|
||||
opacity: 1;
|
||||
display: block !important;
|
||||
width: auto !important; } }
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
|
||||
/* line 102, ../sass/mobile/_layout.scss */
|
||||
/* line 120, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.left-menu {
|
||||
right: 19px !important; } }
|
||||
@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 102, ../sass/mobile/_layout.scss */
|
||||
/* line 120, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.left-menu {
|
||||
right: 66% !important; } }
|
||||
right: 60% !important; } }
|
||||
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
|
||||
/* line 102, ../sass/mobile/_layout.scss */
|
||||
/* line 120, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.left-menu {
|
||||
right: 500px !important; } }
|
||||
@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 102, ../sass/mobile/_layout.scss */
|
||||
/* line 120, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.left-menu {
|
||||
right: 78% !important; } }
|
||||
right: 70% !important; } }
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 126, ../sass/mobile/_layout.scss */
|
||||
/* line 144, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.right-repr {
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
@ -866,53 +889,56 @@ mct-container {
|
||||
backface-visibility: hidden;
|
||||
left: auto !important; } }
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
|
||||
/* line 126, ../sass/mobile/_layout.scss */
|
||||
/* line 144, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.right-repr {
|
||||
width: 19px !important; } }
|
||||
@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 126, ../sass/mobile/_layout.scss */
|
||||
/* line 144, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.right-repr {
|
||||
width: 66% !important; } }
|
||||
width: 60% !important; } }
|
||||
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
|
||||
/* line 126, ../sass/mobile/_layout.scss */
|
||||
/* line 144, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.right-repr {
|
||||
background-color: rgba(0, 128, 0, 0.2);
|
||||
width: 500px !important; } }
|
||||
@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 126, ../sass/mobile/_layout.scss */
|
||||
/* line 144, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.right-repr {
|
||||
width: 78% !important; } }
|
||||
background-color: rgba(255, 165, 0, 0.2);
|
||||
width: 70% !important; } }
|
||||
|
||||
/* line 168, ../sass/mobile/_layout.scss */
|
||||
.mobile-menu-icon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px; }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 149, ../sass/mobile/_layout.scss */
|
||||
.button-pos {
|
||||
position: absolute; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 158, ../sass/mobile/_layout.scss */
|
||||
/* line 176, ../sass/mobile/_layout.scss */
|
||||
.object-header {
|
||||
position: relative;
|
||||
left: 44px; }
|
||||
/* line 163, ../sass/mobile/_layout.scss */
|
||||
/* line 181, ../sass/mobile/_layout.scss */
|
||||
.object-header .label .context-available {
|
||||
opacity: 1 !important; } }
|
||||
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 170, ../sass/mobile/_layout.scss */
|
||||
/* line 188, ../sass/mobile/_layout.scss */
|
||||
.desktop-hide {
|
||||
display: none; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 177, ../sass/mobile/_layout.scss */
|
||||
/* line 195, ../sass/mobile/_layout.scss */
|
||||
.mobile-hide {
|
||||
display: none; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 183, ../sass/mobile/_layout.scss */
|
||||
/* line 201, ../sass/mobile/_layout.scss */
|
||||
.mobile-important-hide {
|
||||
display: none !important; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 189, ../sass/mobile/_layout.scss */
|
||||
/* line 207, ../sass/mobile/_layout.scss */
|
||||
.mobile-back-hide {
|
||||
pointer-events: none;
|
||||
-moz-transition-property: opacity;
|
||||
@ -930,7 +956,7 @@ mct-container {
|
||||
opacity: 0; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 198, ../sass/mobile/_layout.scss */
|
||||
/* line 216, ../sass/mobile/_layout.scss */
|
||||
.mobile-back-unhide {
|
||||
pointer-events: all;
|
||||
-moz-transition-property: opacity;
|
||||
@ -948,17 +974,17 @@ mct-container {
|
||||
opacity: 1; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 207, ../sass/mobile/_layout.scss */
|
||||
/* line 225, ../sass/mobile/_layout.scss */
|
||||
.phone-hide {
|
||||
display: none; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 213, ../sass/mobile/_layout.scss */
|
||||
/* line 231, ../sass/mobile/_layout.scss */
|
||||
.tree-holder {
|
||||
overflow-x: hidden !important; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 218, ../sass/mobile/_layout.scss */
|
||||
/* line 236, ../sass/mobile/_layout.scss */
|
||||
.mobile-disable-select {
|
||||
-moz-user-select: -moz-none;
|
||||
-ms-user-select: none;
|
||||
@ -3026,8 +3052,7 @@ label.checkbox.custom {
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 25, ../sass/mobile/controls/_menus.scss */
|
||||
.mobile-menu-icon {
|
||||
font-size: 21px;
|
||||
padding-top: 1px; } }
|
||||
font-size: 21px; } }
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 25, ../sass/mobile/controls/_menus.scss */
|
||||
.mobile-menu-icon {
|
||||
|
||||
@ -163,6 +163,9 @@ ul.tree {
|
||||
position: relative; }
|
||||
/* line 28, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
@ -176,17 +179,17 @@ ul.tree {
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 3px;
|
||||
position: relative; }
|
||||
/* line 39, ../sass/tree/_tree.scss */
|
||||
/* line 40, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .view-control {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
font-size: 0.75em;
|
||||
width: 10px; }
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 47, ../sass/tree/_tree.scss */
|
||||
/* line 48, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .view-control:hover {
|
||||
color: #ffc700; } }
|
||||
/* line 53, ../sass/tree/_tree.scss */
|
||||
/* line 54, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
@ -198,25 +201,25 @@ ul.tree {
|
||||
width: auto;
|
||||
height: auto;
|
||||
left: 15px; }
|
||||
/* line 60, ../sass/tree/_tree.scss */
|
||||
/* line 61, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .label .type-icon {
|
||||
text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
|
||||
font-size: 16px;
|
||||
color: #0099cc;
|
||||
left: 5px;
|
||||
position: absolute;
|
||||
top: 4px !important;
|
||||
top: 4px;
|
||||
bottom: auto;
|
||||
height: 16px;
|
||||
line-height: 100%;
|
||||
right: auto;
|
||||
width: 16px; }
|
||||
/* line 73, ../sass/tree/_tree.scss */
|
||||
/* line 74, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
|
||||
text-shadow: black 0 1px 2px;
|
||||
position: absolute;
|
||||
z-index: 2; }
|
||||
/* line 79, ../sass/tree/_tree.scss */
|
||||
/* line 80, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
|
||||
color: #ff3c00;
|
||||
font-size: 8px;
|
||||
@ -225,7 +228,7 @@ ul.tree {
|
||||
width: 8px;
|
||||
top: 1px;
|
||||
right: -2px; }
|
||||
/* line 85, ../sass/tree/_tree.scss */
|
||||
/* line 86, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
|
||||
color: #49dedb;
|
||||
font-size: 8px;
|
||||
@ -234,7 +237,7 @@ ul.tree {
|
||||
width: 8px;
|
||||
left: -3px;
|
||||
bottom: 0px; }
|
||||
/* line 93, ../sass/tree/_tree.scss */
|
||||
/* line 94, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .label .title-label {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
@ -249,53 +252,53 @@ ul.tree {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
/* line 104, ../sass/tree/_tree.scss */
|
||||
/* line 105, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.loading {
|
||||
pointer-events: none; }
|
||||
/* line 106, ../sass/tree/_tree.scss */
|
||||
/* line 107, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.loading .label {
|
||||
opacity: 0.5; }
|
||||
/* line 108, ../sass/tree/_tree.scss */
|
||||
/* line 109, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.loading .label .title-label {
|
||||
font-style: italic; }
|
||||
/* line 112, ../sass/tree/_tree.scss */
|
||||
/* line 113, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.loading .wait-spinner {
|
||||
margin-left: 14px; }
|
||||
/* line 117, ../sass/tree/_tree.scss */
|
||||
/* line 118, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.selected {
|
||||
background: #005177;
|
||||
color: #fff; }
|
||||
/* line 121, ../sass/tree/_tree.scss */
|
||||
/* line 122, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.selected .view-control {
|
||||
color: #0099cc; }
|
||||
/* line 124, ../sass/tree/_tree.scss */
|
||||
/* line 125, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.selected .label .type-icon {
|
||||
color: #fff; }
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 132, ../sass/tree/_tree.scss */
|
||||
/* line 133, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item:not(.selected):hover {
|
||||
background: #404040;
|
||||
color: #cccccc; }
|
||||
/* line 135, ../sass/tree/_tree.scss */
|
||||
/* line 136, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item:not(.selected):hover .context-trigger {
|
||||
display: block; }
|
||||
/* line 138, ../sass/tree/_tree.scss */
|
||||
/* line 139, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item:not(.selected):hover .icon {
|
||||
color: #33ccff; } }
|
||||
/* line 145, ../sass/tree/_tree.scss */
|
||||
/* line 146, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item:not(.loading) {
|
||||
cursor: pointer; }
|
||||
/* line 149, ../sass/tree/_tree.scss */
|
||||
/* line 150, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .context-trigger {
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
right: 3px; }
|
||||
/* line 155, ../sass/tree/_tree.scss */
|
||||
/* line 156, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .context-trigger .invoke-menu {
|
||||
font-size: 0.75em;
|
||||
height: 0.9rem;
|
||||
line-height: 0.9rem; }
|
||||
/* line 164, ../sass/tree/_tree.scss */
|
||||
/* line 165, ../sass/tree/_tree.scss */
|
||||
ul.tree ul.tree {
|
||||
margin-left: 15px; }
|
||||
|
||||
@ -321,38 +324,28 @@ ul.tree {
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
|
||||
/* line 24, ../sass/mobile/_tree.scss */
|
||||
ul.tree {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
/* line 314, ../sass/_mixins.scss */
|
||||
ul.tree li {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
/* line 29, ../sass/mobile/_tree.scss */
|
||||
ul.tree li span.tree-item {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
margin-bottom: 0px; }
|
||||
/* line 36, ../sass/mobile/_tree.scss */
|
||||
ul.tree li span.tree-item .view-control {
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
font-size: 1.8em;
|
||||
right: 0px;
|
||||
width: 35px;
|
||||
text-align: center; }
|
||||
/* line 45, ../sass/mobile/_tree.scss */
|
||||
ul.tree li span.tree-item .label {
|
||||
left: 3px;
|
||||
right: 45px;
|
||||
font-size: 1.2em; }
|
||||
/* line 54, ../sass/mobile/_tree.scss */
|
||||
ul.tree li span.tree-item .label .title-label {
|
||||
right: 16.9px; }
|
||||
/* line 63, ../sass/mobile/_tree.scss */
|
||||
ul.tree ul.tree {
|
||||
margin-left: 7px; } }
|
||||
/* line 30, ../sass/mobile/_tree.scss */
|
||||
ul.tree li span.tree-item {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 0px; }
|
||||
/* line 35, ../sass/mobile/_tree.scss */
|
||||
ul.tree li span.tree-item .view-control {
|
||||
position: absolute;
|
||||
font-size: 1.1em;
|
||||
right: 0px;
|
||||
width: 30px;
|
||||
text-align: center; }
|
||||
/* line 44, ../sass/mobile/_tree.scss */
|
||||
ul.tree li span.tree-item .label {
|
||||
left: 0;
|
||||
right: 35px;
|
||||
font-size: 1.2em; }
|
||||
/* line 51, ../sass/mobile/_tree.scss */
|
||||
ul.tree li span.tree-item .label .type-icon {
|
||||
top: 9px;
|
||||
bottom: auto;
|
||||
height: 16px; }
|
||||
/* line 62, ../sass/mobile/_tree.scss */
|
||||
ul.tree ul.tree {
|
||||
margin-left: 20px; } }
|
||||
|
||||
@ -110,6 +110,7 @@ $ueBrowseGridItemBottomBarH: 30px;
|
||||
$itemPadLR: 5px;
|
||||
// Tree
|
||||
$treeVCW: 10px;
|
||||
$treeTypeIconH: 16px;
|
||||
$treeTypeIconW: 20px;
|
||||
$treeContextTriggerW: 20px;
|
||||
$colorItemTreeIcon: $colorKey;
|
||||
|
||||
@ -328,7 +328,7 @@
|
||||
}
|
||||
|
||||
@mixin verticalCenterBlock($holderH, $itemH) {
|
||||
top: floor(($holderH - $itemH) / 2) !important;
|
||||
top: floor(($holderH - $itemH) / 2);
|
||||
bottom: auto;
|
||||
height: $itemH;
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
top: $m; right: $m; bottom: $m; left: $m;
|
||||
}
|
||||
.bar {
|
||||
&.top-bar.abs {
|
||||
&.top-bar {
|
||||
bottom: auto;
|
||||
height: $ueBrowseGridItemTopBarH;
|
||||
line-height: $ueBrowseGridItemTopBarH;
|
||||
@ -76,7 +76,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bottom-bar.abs {
|
||||
&.bottom-bar {
|
||||
top: auto;
|
||||
height: $ueBrowseGridItemBottomBarH;
|
||||
}
|
||||
|
||||
@ -29,10 +29,10 @@ $phoneItemH: floor($ueBrowseGridItemLg/4);
|
||||
$tabletItemH: floor($ueBrowseGridItemLg/3);
|
||||
|
||||
/************************** MOBILE TREE MENU DIMENSIONS */
|
||||
$mobile-treeHeight: 38px;
|
||||
$mobileTreeItemH: 35px;
|
||||
$mobile-startingTreeLeft: 3px;
|
||||
$mobile-runningTreeLeft: 7px;
|
||||
$mobile-treeRight: 13px;
|
||||
$mobileTreeItemIndent: 20px;
|
||||
$mobileTreeRightArrowW: 30px;
|
||||
|
||||
/************************** WINDOW DIMENSIONS FOR RWD */
|
||||
$phoMaxW: 514px;
|
||||
@ -82,7 +82,7 @@ $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
|
||||
|
||||
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
|
||||
$phoneRepSizePortrait: 19px;
|
||||
$phoneRepSizeLandscape: 66%;
|
||||
$phoneRepSizeLandscape: 60%;
|
||||
$tabletRepSizePortrait: 500px;
|
||||
$tabletRepSizeLandscape: 78%;
|
||||
$tabletRepSizeLandscape: 70%;
|
||||
$desktopMenuSize: 25%;
|
||||
|
||||
@ -27,9 +27,27 @@
|
||||
.mobile-pane {
|
||||
@include phoneandtablet {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
right: 0;
|
||||
white-space: nowrap;
|
||||
top: 0 !important; right: 0; bottom: 0; left: 0;
|
||||
//white-space: nowrap; // CH CO
|
||||
}
|
||||
}
|
||||
|
||||
.user-environ .browse-area,
|
||||
.user-environ .edit-area,
|
||||
.user-environ .editor {
|
||||
@include phoneandtablet {
|
||||
//@include test(red);
|
||||
top: 0; left: 0; right: 0; bottom: $ueFooterH;
|
||||
}
|
||||
}
|
||||
|
||||
.holder.l-mobile {
|
||||
@include phoneandtablet {
|
||||
//@include test();
|
||||
top: $bodyMargin !important;
|
||||
right: $bodyMargin !important;
|
||||
bottom: $bodyMargin !important;
|
||||
left: $bodyMargin !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,8 +57,8 @@
|
||||
@include desktop {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
width: $desktopMenuSize;
|
||||
}
|
||||
width: $desktopMenuSize;
|
||||
}
|
||||
}
|
||||
|
||||
// When the tree is hidden, these are the
|
||||
@ -56,7 +74,7 @@
|
||||
@include user-select(none);
|
||||
}
|
||||
// Sets the left tree menu when the tree
|
||||
// is hidden.
|
||||
// is hidden.
|
||||
.mobile-pane.left-menu {
|
||||
@include phoneandtablet {
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
@ -64,19 +82,19 @@
|
||||
right: 100% !important;
|
||||
width: auto !important;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the right represenation when
|
||||
// the tree is hidden.
|
||||
.mobile-pane.right-repr {
|
||||
@include phoneandtablet {
|
||||
// the tree is hidden.
|
||||
.mobile-pane.right-repr {
|
||||
@include phoneandtablet {
|
||||
@include slMenuTransitions;
|
||||
left: auto !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-tree-holder {
|
||||
@ -86,7 +104,7 @@
|
||||
// When the tree is shown, these are
|
||||
// the classes used for the left menu
|
||||
// and the right menu (for each device &
|
||||
// orientation combination, separate
|
||||
// orientation combination, separate
|
||||
// parameters are used)
|
||||
.browse-showtree {
|
||||
// NOTE: DISABLED SELECTION
|
||||
@ -98,10 +116,11 @@
|
||||
@include user-select(none);
|
||||
}
|
||||
// Sets the left tree menu when the tree
|
||||
// is shown.
|
||||
// is shown.
|
||||
.mobile-pane.left-menu {
|
||||
@include phoneandtablet {
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
|
||||
opacity: 1;
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
@ -121,8 +140,7 @@
|
||||
right: $tabletRepSizeLandscape !important;
|
||||
}
|
||||
}
|
||||
// Sets the right represenation when
|
||||
// the tree is shown.
|
||||
// Sets the right representation when the tree is shown.
|
||||
.mobile-pane.right-repr {
|
||||
@include phoneandtablet {
|
||||
@include slMenuTransitions;
|
||||
@ -137,19 +155,19 @@
|
||||
width: $phoneRepSizeLandscape !important;
|
||||
}
|
||||
@include tabletPortrait {
|
||||
//@include test(green);
|
||||
width: $tabletRepSizePortrait !important;
|
||||
}
|
||||
@include tabletLandscape {
|
||||
//@include test(orange);
|
||||
width: $tabletRepSizeLandscape !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button position is set as absolute with transitions
|
||||
.button-pos {
|
||||
@include phoneandtablet {
|
||||
position: absolute;
|
||||
}
|
||||
.mobile-menu-icon {
|
||||
position: absolute;
|
||||
top: $bodyMargin; left: $bodyMargin;
|
||||
}
|
||||
|
||||
// Object header must be moved
|
||||
|
||||
@ -24,21 +24,20 @@
|
||||
ul.tree {
|
||||
// Only applies to phones and tablets
|
||||
@include phoneandtablet {
|
||||
@include menuUlReset();
|
||||
//@include menuUlReset();
|
||||
li {
|
||||
//border-top: 1px solid $colorInteriorBorder; // TEMP
|
||||
span.tree-item {
|
||||
// Adds some space to the top of each tree item
|
||||
height: $mobile-treeHeight;
|
||||
line-height: $mobile-treeHeight;
|
||||
padding-top: $interiorMarginSm;
|
||||
padding-bottom: $interiorMarginSm;
|
||||
height: $mobileTreeItemH;
|
||||
line-height: $mobileTreeItemH;
|
||||
margin-bottom: 0px;
|
||||
.view-control {
|
||||
//@include test(red);
|
||||
position: absolute;
|
||||
right: $mobile-treeRight;
|
||||
font-size: 1.8em;
|
||||
font-size: 1.1em;
|
||||
right: 0px;
|
||||
width: 35px;
|
||||
width: $mobileTreeRightArrowW;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -46,13 +45,13 @@ ul.tree {
|
||||
// Designates the starting left margin
|
||||
// (indentation) of 'My Items'
|
||||
// Also adds right space for selection button
|
||||
left: $mobile-startingTreeLeft;
|
||||
right: 45px;
|
||||
left: 0;
|
||||
right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
|
||||
font-size: 1.2em;
|
||||
// Allows tree item name to stop prior
|
||||
// to the arrow
|
||||
.type-icon {
|
||||
@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
|
||||
}
|
||||
.title-label {
|
||||
right: $mobile-treeRight * 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -61,7 +60,7 @@ ul.tree {
|
||||
// Sets the margin on the left, which causes the
|
||||
// running indentation after each folder is made
|
||||
ul.tree {
|
||||
margin-left: $mobile-runningTreeLeft;
|
||||
margin-left: $mobileTreeItemIndent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
display: inline-block;
|
||||
@include phoneandtablet {
|
||||
font-size: 21px;
|
||||
padding-top: $imageThumbPad;
|
||||
//padding-top: $imageThumbPad;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
|
||||
@ -27,6 +27,7 @@ ul.tree {
|
||||
position: relative;
|
||||
span.tree-item {
|
||||
$runningItemW: 0;
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius($basicCr);
|
||||
@include single-transition(background-color, 0.25s);
|
||||
display: block;
|
||||
@ -59,7 +60,7 @@ ul.tree {
|
||||
|
||||
.type-icon {
|
||||
//@include absPosDefault(0, false);
|
||||
$d: 16px; // 16px is crisp size
|
||||
$d: $treeTypeIconH; // 16px is crisp size
|
||||
@include txtShdwSubtle(0.6);
|
||||
font-size: $d;
|
||||
color: $colorItemTreeIcon;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user