diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 2aadc0234e..ce7cb41cb1 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -20,30 +20,31 @@ at runtime from the About dialog for additional information. --> -
+
-
- - -
+
+
+ + +
+
-
+
-
m
-
+
m
+
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html index 84cc087bbc..72f7b3e57f 100644 --- a/platform/commonUI/browse/res/templates/browse/object-header.html +++ b/platform/commonUI/browse/res/templates/browse/object-header.html @@ -22,9 +22,9 @@
- {{type.getGlyph()}} + {{type.getGlyph()}} {{parameters.mode}} - {{type.getName()}} + {{model.name}} diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index af2c481a59..9ea92fa707 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -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 */ diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index c0444d9990..27b5a11ad6 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -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 { diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index e6387a1cbe..6ddab967f0 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -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; } } diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index aba4c8950d..d1f826443c 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -110,6 +110,7 @@ $ueBrowseGridItemBottomBarH: 30px; $itemPadLR: 5px; // Tree $treeVCW: 10px; +$treeTypeIconH: 16px; $treeTypeIconW: 20px; $treeContextTriggerW: 20px; $colorItemTreeIcon: $colorKey; diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index c047c9582e..f605476c66 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -328,7 +328,7 @@ } @mixin verticalCenterBlock($holderH, $itemH) { - top: floor(($holderH - $itemH) / 2) !important; + top: floor(($holderH - $itemH) / 2); bottom: auto; height: $itemH; } diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss index 836f5d754c..d9c9d8613b 100644 --- a/platform/commonUI/general/res/sass/items/_item.scss +++ b/platform/commonUI/general/res/sass/items/_item.scss @@ -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; } diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index d69084086e..9d7357126e 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -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%; diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 3f4fc062d3..9609ed1fdd 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -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 diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index d7f62f16b0..6918b8f217 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -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; } } } diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss index 40aef796ee..d738f63d4a 100644 --- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss @@ -26,7 +26,7 @@ display: inline-block; @include phoneandtablet { font-size: 21px; - padding-top: $imageThumbPad; + //padding-top: $imageThumbPad; } @include desktop { display: none; diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 168daad4bf..cb0b0f1a72 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -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;