From 54bf39344a661344bf245bec916fc5b9237ce5ec Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 27 Aug 2015 17:05:50 -0700 Subject: [PATCH] [Mobile] Multiple mobile Safari fixes open #74 New mixins to prefix '-webkit-' to props and vals; 'flex' classes use new webkit mixins; Fixed flex layout of .object-browse-bar and .context-available element; Migrated CSS to remove small .scss include files; --- .../res/templates/browse/object-header.html | 2 +- .../general/res/css/theme-espresso.css | 273 +++++++++--------- platform/commonUI/general/res/sass/_flex.scss | 37 --- platform/commonUI/general/res/sass/_main.scss | 2 +- .../commonUI/general/res/sass/_mixins.scss | 10 + .../general/res/sass/controls/_controls.scss | 28 +- .../general/res/sass/mobile/_layout.scss | 2 +- .../general/res/sass/search/_search.scss | 16 +- .../res/sass/user-environ/_layout.scss | 35 ++- .../res/sass/user-environ/_object-browse.scss | 38 --- 10 files changed, 197 insertions(+), 246 deletions(-) delete mode 100644 platform/commonUI/general/res/sass/_flex.scss delete mode 100644 platform/commonUI/general/res/sass/user-environ/_object-browse.scss diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html index a9652631d9..7ea43a6b9f 100644 --- a/platform/commonUI/browse/res/templates/browse/object-header.html +++ b/platform/commonUI/browse/res/templates/browse/object-header.html @@ -22,7 +22,7 @@
{{type.getGlyph()}} - + {{parameters.mode}} {{model.name}} diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index b9be506ef9..87add64e54 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -562,15 +562,8 @@ mct-container { .bar.abs .right .icon.major, .btn-menu span.bar.l-click-area .right .icon.major { margin-left: 15px; } -/* line 88, ../sass/user-environ/_layout.scss */ -.bar.l-flex { - display: flex; - flex-flow: row nowrap; } - /* line 91, ../sass/user-environ/_layout.scss */ - .bar.l-flex .left { - flex: 1 1 0; } -/* line 99, ../sass/user-environ/_layout.scss */ +/* line 91, ../sass/user-environ/_layout.scss */ .user-environ .browse-area, .user-environ .edit-area, .user-environ .editor { @@ -578,23 +571,23 @@ mct-container { right: 10px; bottom: 35px; left: 10px; } -/* line 110, ../sass/user-environ/_layout.scss */ +/* line 102, ../sass/user-environ/_layout.scss */ .user-environ .browse-area > .contents, .user-environ .edit-area > .contents { left: 0; right: 0; } -/* line 116, ../sass/user-environ/_layout.scss */ +/* line 108, ../sass/user-environ/_layout.scss */ .user-environ .edit-area { top: 45px; } - /* line 119, ../sass/user-environ/_layout.scss */ + /* line 111, ../sass/user-environ/_layout.scss */ .user-environ .edit-area .tool-bar { bottom: auto; height: 30px; line-height: 25px; } - /* line 124, ../sass/user-environ/_layout.scss */ + /* line 116, ../sass/user-environ/_layout.scss */ .user-environ .edit-area .work-area { top: 40px; } -/* line 129, ../sass/user-environ/_layout.scss */ +/* line 121, ../sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar { overflow: hidden; position: absolute; @@ -606,20 +599,20 @@ mct-container { height: auto; top: auto; height: 25px; } - /* line 134, ../sass/user-environ/_layout.scss */ + /* line 126, ../sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar .status-holder { z-index: 1; } - /* line 138, ../sass/user-environ/_layout.scss */ + /* line 130, ../sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar .app-logo { left: auto; width: 105px; z-index: 2; } -/* line 146, ../sass/user-environ/_layout.scss */ +/* line 138, ../sass/user-environ/_layout.scss */ .cols { overflow: hidden; *zoom: 1; } - /* line 148, ../sass/user-environ/_layout.scss */ + /* line 140, ../sass/user-environ/_layout.scss */ .cols .col { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -630,111 +623,111 @@ mct-container { margin-left: 1.5%; padding-left: 5px; position: relative; } - /* line 156, ../sass/user-environ/_layout.scss */ + /* line 148, ../sass/user-environ/_layout.scss */ .cols .col:first-child { margin-left: 0; padding-left: 0; } - /* line 163, ../sass/user-environ/_layout.scss */ + /* line 155, ../sass/user-environ/_layout.scss */ .cols.cols-2 .col-1 { min-width: 250px; width: 48.5%; } - /* line 169, ../sass/user-environ/_layout.scss */ + /* line 161, ../sass/user-environ/_layout.scss */ .cols.cols-2-ff .col-100px { width: 100px; } - /* line 176, ../sass/user-environ/_layout.scss */ + /* line 168, ../sass/user-environ/_layout.scss */ .cols.cols-6 .col-1 { min-width: 83.33333px; width: 15.16667%; } - /* line 182, ../sass/user-environ/_layout.scss */ + /* line 174, ../sass/user-environ/_layout.scss */ .cols.cols-16 .col-1 { min-width: 31.25px; width: 4.75%; } - /* line 185, ../sass/user-environ/_layout.scss */ + /* line 177, ../sass/user-environ/_layout.scss */ .cols.cols-16 .col-2 { min-width: 62.5px; width: 11%; } - /* line 188, ../sass/user-environ/_layout.scss */ + /* line 180, ../sass/user-environ/_layout.scss */ .cols.cols-16 .col-7 { min-width: 218.75px; width: 42.25%; } - /* line 194, ../sass/user-environ/_layout.scss */ + /* line 186, ../sass/user-environ/_layout.scss */ .cols.cols-32 .col-2 { min-width: 31.25px; width: 4.75%; } - /* line 197, ../sass/user-environ/_layout.scss */ + /* line 189, ../sass/user-environ/_layout.scss */ .cols.cols-32 .col-15 { min-width: 234.375px; width: 45.375%; } - /* line 201, ../sass/user-environ/_layout.scss */ + /* line 193, ../sass/user-environ/_layout.scss */ .cols .l-row { overflow: hidden; *zoom: 1; padding: 5px 0; } -/* line 209, ../sass/user-environ/_layout.scss */ +/* line 201, ../sass/user-environ/_layout.scss */ .browse-mode .split-layout .split-pane-component.pane.left { min-width: 150px; max-width: 800px; width: 25%; } -/* line 222, ../sass/user-environ/_layout.scss */ +/* line 214, ../sass/user-environ/_layout.scss */ .edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom { min-height: 50px; max-height: 80%; } -/* line 230, ../sass/user-environ/_layout.scss */ +/* line 222, ../sass/user-environ/_layout.scss */ .pane { position: absolute; } - /* line 233, ../sass/user-environ/_layout.scss */ + /* line 225, ../sass/user-environ/_layout.scss */ .pane.treeview.left .create-btn-holder { bottom: auto; top: 0; height: 24px; } - /* line 236, ../sass/user-environ/_layout.scss */ + /* line 228, ../sass/user-environ/_layout.scss */ .pane.treeview.left .create-btn-holder .wrapper.menu-element { position: absolute; bottom: 5px; } - /* line 241, ../sass/user-environ/_layout.scss */ + /* line 233, ../sass/user-environ/_layout.scss */ .pane.treeview.left .search-holder { top: 34px; } - /* line 244, ../sass/user-environ/_layout.scss */ + /* line 236, ../sass/user-environ/_layout.scss */ .pane.treeview.left .tree-holder { overflow: auto; top: 64px; } - /* line 251, ../sass/user-environ/_layout.scss */ + /* line 243, ../sass/user-environ/_layout.scss */ .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area, .pane.items .object-browse-bar .right.abs, .pane.items .object-browse-bar .btn-menu span.right.l-click-area, .btn-menu .pane.items .object-browse-bar span.right.l-click-area { top: auto; } - /* line 262, ../sass/user-environ/_layout.scss */ + /* line 254, ../sass/user-environ/_layout.scss */ .pane.items .object-holder { top: 34px; } - /* line 266, ../sass/user-environ/_layout.scss */ + /* line 258, ../sass/user-environ/_layout.scss */ .pane .object-holder { overflow: auto; } -/* line 274, ../sass/user-environ/_layout.scss */ +/* line 266, ../sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane { margin-top: 5px; } - /* line 277, ../sass/user-environ/_layout.scss */ + /* line 269, ../sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane:first-child { margin-top: 0; } -/* line 284, ../sass/user-environ/_layout.scss */ +/* line 276, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane { margin-left: 5px; } - /* line 287, ../sass/user-environ/_layout.scss */ + /* line 279, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane > .holder { left: 0; right: 0; } - /* line 291, ../sass/user-environ/_layout.scss */ + /* line 283, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child { margin-left: 0; } - /* line 293, ../sass/user-environ/_layout.scss */ + /* line 285, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child .holder { right: 3px; } -/* line 302, ../sass/user-environ/_layout.scss */ +/* line 294, ../sass/user-environ/_layout.scss */ .object-browse-bar .btn, .object-browse-bar .t-btn, .object-browse-bar .view-switcher, @@ -748,12 +741,48 @@ mct-container { line-height: 200%; vertical-align: top; } -/* line 319, ../sass/user-environ/_layout.scss */ +/* line 311, ../sass/user-environ/_layout.scss */ .object-browse-bar .view-switcher, .top-bar .view-switcher { margin-right: 20px; } -/* line 324, ../sass/user-environ/_layout.scss */ +/* line 316, ../sass/user-environ/_layout.scss */ +.object-browse-bar { + overflow: visible; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: auto; + height: auto; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 24px; + line-height: 24px; + white-space: nowrap; } + /* line 324, ../sass/user-environ/_layout.scss */ + .object-browse-bar .left { + padding-right: 20px; } + /* line 326, ../sass/user-environ/_layout.scss */ + .object-browse-bar .left .l-back { + display: inline-block; + float: left; + margin-right: 10px; } + +/* line 334, ../sass/user-environ/_layout.scss */ +.l-flex { + display: flex; + display: -webkit-flex; + flex-flow: row nowrap; + -webkit-flex-flow: row nowrap; } + /* line 337, ../sass/user-environ/_layout.scss */ + .l-flex .left { + flex: 1 1 0; + -webkit-flex: 1 1 0; } + +/* line 343, ../sass/user-environ/_layout.scss */ .vscroll { overflow-y: auto; } @@ -952,7 +981,8 @@ mct-container { /* line 160, ../sass/mobile/_layout.scss */ .browse-showtree .pane.right-repr { left: 0 !important; - transform: translateX(90%); } + transform: translateX(90%); + -webkit-transform: translateX(90%); } /* line 163, ../sass/mobile/_layout.scss */ .browse-showtree .pane.right-repr #content-area { opacity: 0; } } @@ -2527,31 +2557,37 @@ label.checkbox.custom { /* line 364, ../sass/controls/_controls.scss */ .object-header { font-size: 1em; } - /* line 374, ../sass/controls/_controls.scss */ + /* line 375, ../sass/controls/_controls.scss */ .object-header > .type-icon { font-size: 120%; float: left; margin-right: 5px; } - /* line 380, ../sass/controls/_controls.scss */ + /* line 381, ../sass/controls/_controls.scss */ .object-header .l-elem-wrapper { - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; } - /* line 386, ../sass/controls/_controls.scss */ + justify-content: flex-start; + -webkit-justify-content: flex-start; } + /* line 384, ../sass/controls/_controls.scss */ + .object-header .l-elem-wrapper mct-representation { + min-width: 0.7em; } + /* line 392, ../sass/controls/_controls.scss */ .object-header .action { margin-right: 5px; } - /* line 390, ../sass/controls/_controls.scss */ + /* line 396, ../sass/controls/_controls.scss */ .object-header .title-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: white; + flex: 0 1 auto; + -webkit-flex: 0 1 auto; padding-right: 0.35em; } - /* line 397, ../sass/controls/_controls.scss */ + /* line 405, ../sass/controls/_controls.scss */ .object-header .context-available { - font-size: 0.7em; } + font-size: 0.7em; + flex: 0 0 1; + -webkit-flex: 0 0 1; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 402, ../sass/controls/_controls.scss */ + /* line 412, ../sass/controls/_controls.scss */ .object-header .context-available { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -2566,12 +2602,12 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; opacity: 0; } - /* line 407, ../sass/controls/_controls.scss */ + /* line 417, ../sass/controls/_controls.scss */ .object-header:hover .context-available { opacity: 1; } } /******************************************************** SLIDERS */ -/* line 420, ../sass/controls/_controls.scss */ +/* line 430, ../sass/controls/_controls.scss */ .slider .slot { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2592,7 +2628,7 @@ label.checkbox.custom { right: 0; bottom: auto; left: 0; } -/* line 431, ../sass/controls/_controls.scss */ +/* line 441, ../sass/controls/_controls.scss */ .slider .knob { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2675,12 +2711,12 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-color: #0099cc; } - /* line 442, ../sass/controls/_controls.scss */ + /* line 452, ../sass/controls/_controls.scss */ .slider .knob:before { top: 1px; bottom: 3px; left: 5px; } -/* line 449, ../sass/controls/_controls.scss */ +/* line 459, ../sass/controls/_controls.scss */ .slider .range { background: rgba(0, 153, 204, 0.6); cursor: ew-resize; @@ -2691,13 +2727,13 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 459, ../sass/controls/_controls.scss */ + /* line 469, ../sass/controls/_controls.scss */ .slider .range:hover { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 468, ../sass/controls/_controls.scss */ + /* line 478, ../sass/controls/_controls.scss */ ::-webkit-scrollbar { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2714,7 +2750,7 @@ label.checkbox.custom { height: 10px; width: 10px; } - /* line 474, ../sass/controls/_controls.scss */ + /* line 484, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2732,7 +2768,7 @@ label.checkbox.custom { -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; border-top: 1px solid gray; } - /* line 481, ../sass/controls/_controls.scss */ + /* line 491, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2741,7 +2777,7 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#808080, #737373 20px); background-image: linear-gradient(#808080, #737373 20px); } - /* line 486, ../sass/controls/_controls.scss */ + /* line 496, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.4); } } /***************************************************************************** @@ -4385,20 +4421,23 @@ input[type="text"] { /* line 38, ../sass/search/_search.scss */ .search { display: flex; + display: -webkit-flex; flex-direction: column; + -webkit-flex-direction: column; height: 100%; } - /* line 49, ../sass/search/_search.scss */ + /* line 48, ../sass/search/_search.scss */ .search .search-bar { font-size: 0.8em; + max-width: 250px; position: relative; width: 100%; } - /* line 66, ../sass/search/_search.scss */ + /* line 60, ../sass/search/_search.scss */ .search .search-bar .search-input { height: 25px; line-height: 25px; padding-top: 0; padding-bottom: 0; } - /* line 73, ../sass/search/_search.scss */ + /* line 67, ../sass/search/_search.scss */ .search .search-bar .search-icon, .search .search-bar .clear-icon, .search .search-bar .menu-icon { @@ -4412,68 +4451,68 @@ input[type="text"] { position: absolute; text-align: center; top: 4px; } - /* line 86, ../sass/search/_search.scss */ + /* line 80, ../sass/search/_search.scss */ .search .search-bar .clear-icon, .search .search-bar .menu-icon { cursor: pointer; transition: color .25s; } - /* line 93, ../sass/search/_search.scss */ + /* line 87, ../sass/search/_search.scss */ .search .search-bar .search-input { position: relative; width: 100%; padding-left: 22px !important; padding-right: 44px !important; } - /* line 100, ../sass/search/_search.scss */ + /* line 94, ../sass/search/_search.scss */ .search .search-bar .search-input input { width: 100%; } - /* line 105, ../sass/search/_search.scss */ + /* line 99, ../sass/search/_search.scss */ .search .search-bar .search-icon { color: #737373; left: 3px; transition: visibility .15s, opacity .15s, color .2s; pointer-events: none; } - /* line 125, ../sass/search/_search.scss */ + /* line 119, ../sass/search/_search.scss */ .search .search-bar .search-input:hover + div.search-icon { color: #a6a6a6; } - /* line 129, ../sass/search/_search.scss */ + /* line 123, ../sass/search/_search.scss */ .search .search-bar .clear-icon { right: 22px; visibility: hidden; opacity: 0; transition: visibility .15s, opacity .15s, color .2s; } - /* line 138, ../sass/search/_search.scss */ + /* line 132, ../sass/search/_search.scss */ .search .search-bar .clear-icon.content { visibility: visible; opacity: 1; } - /* line 143, ../sass/search/_search.scss */ + /* line 137, ../sass/search/_search.scss */ .search .search-bar .clear-icon:hover { color: #a6a6a6; } - /* line 148, ../sass/search/_search.scss */ + /* line 142, ../sass/search/_search.scss */ .search .search-bar .menu-icon { font-size: 0.8em; padding-right: 4px; right: 4px; text-align: right; } - /* line 154, ../sass/search/_search.scss */ + /* line 148, ../sass/search/_search.scss */ .search .search-bar .menu-icon:hover { color: #a6a6a6; } - /* line 159, ../sass/search/_search.scss */ + /* line 153, ../sass/search/_search.scss */ .search .search-bar .search-menu-holder { float: right; left: -20px; z-index: 1; transition: visibility .05s, opacity .05s; } - /* line 169, ../sass/search/_search.scss */ + /* line 163, ../sass/search/_search.scss */ .search .search-bar .search-menu-holder.off { visibility: hidden; opacity: 0; } - /* line 176, ../sass/search/_search.scss */ + /* line 170, ../sass/search/_search.scss */ .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 179, ../sass/search/_search.scss */ + /* line 173, ../sass/search/_search.scss */ .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 184, ../sass/search/_search.scss */ + /* line 178, ../sass/search/_search.scss */ .search .active-filter-display { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -4486,14 +4525,14 @@ input[type="text"] { padding-left: 1.4625em; font-size: 0.65em; margin-top: 3px; } - /* line 199, ../sass/search/_search.scss */ + /* line 193, ../sass/search/_search.scss */ .search .active-filter-display .clear-filters-icon { opacity: 0.4; font-size: 0.8em; position: absolute; left: 1px; cursor: pointer; } - /* line 210, ../sass/search/_search.scss */ + /* line 204, ../sass/search/_search.scss */ .search .active-filter-display.off { visibility: hidden; opacity: 0; @@ -4501,7 +4540,7 @@ input[type="text"] { margin: 0; padding: 0; border: 0; } - /* line 220, ../sass/search/_search.scss */ + /* line 214, ../sass/search/_search.scss */ .search .search-scroll { order: 3; margin-top: 4px; @@ -4510,27 +4549,27 @@ input[type="text"] { height: auto; max-height: 100%; position: relative; } - /* line 233, ../sass/search/_search.scss */ + /* line 227, ../sass/search/_search.scss */ .search .search-scroll .load-icon { position: relative; } - /* line 235, ../sass/search/_search.scss */ + /* line 229, ../sass/search/_search.scss */ .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 239, ../sass/search/_search.scss */ + /* line 233, ../sass/search/_search.scss */ .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 249, ../sass/search/_search.scss */ + /* line 243, ../sass/search/_search.scss */ .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 254, ../sass/search/_search.scss */ + /* line 248, ../sass/search/_search.scss */ .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 259, ../sass/search/_search.scss */ + /* line 253, ../sass/search/_search.scss */ .search .search-scroll .load-more-button { margin-top: 5px 0; font-size: 0.8em; @@ -4879,52 +4918,6 @@ input[type="text"] { .status.block .status-indicator.caution { color: #ffaa00; } -/***************************************************************************** - * Open MCT Web, Copyright (c) 2014-2015, United States Government - * as represented by the Administrator of the National Aeronautics and Space - * Administration. All rights reserved. - * - * Open MCT Web is licensed under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * http://www.apache.org/licenses/LICENSE-2.0. - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - * - * Open MCT Web includes source code licensed under additional open source - * licenses. See the Open Source Licenses file (LICENSES.md) included with - * this source code distribution or the Licensing information page available - * at runtime from the About dialog for additional information. - *****************************************************************************/ -/* line 22, ../sass/user-environ/_object-browse.scss */ -.object-browse-bar { - overflow: visible; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: auto; - height: auto; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - height: 24px; - line-height: 24px; - white-space: nowrap; } - /* line 30, ../sass/user-environ/_object-browse.scss */ - .object-browse-bar .left { - padding-right: 5px; } - /* line 32, ../sass/user-environ/_object-browse.scss */ - .object-browse-bar .left .l-back { - display: inline-block; - float: left; - margin-right: 10px; } - /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/sass/_flex.scss b/platform/commonUI/general/res/sass/_flex.scss deleted file mode 100644 index 61e8007676..0000000000 --- a/platform/commonUI/general/res/sass/_flex.scss +++ /dev/null @@ -1,37 +0,0 @@ -.l-flex { - &.l-flex-justify { - justify-content: space-between; - } - .l-flex-row, - &.l-flex-row { - display: flex; - flex-flow: row nowrap; - div, span { - //@include tmpBorder(); - } - > div, > span { - //flex: 1 1 0; - } - } - .l-flex-max { - flex: 1 0 !important; - } - - .flex-ignore { - display: flex; - flex-flow: row nowrap; - flex: 0 1 auto; - } -} - -// TEMP, move out of here once working -.object-browse-bar.bar > div.abs { - @include test(green); -} - - -.l-flex-row .title-label { - @include test(blue); - flex: 1 0 !important; -} - diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index eff854790b..347087f24f 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -68,7 +68,7 @@ @import "user-environ/frame"; @import "user-environ/top-bar"; @import "user-environ/bottom-bar"; -@import "user-environ/object-browse"; +//@import "user-environ/object-browse"; @import "user-environ/tool-bar"; @import "helpers/bubbles"; @import "helpers/splitter"; diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index bc97b6a521..9625ed96af 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -318,6 +318,16 @@ } } +@mixin webkitProp($name, $val) { + #{$name}: #{$val}; + -webkit-#{$name}: #{$val}; +} + +@mixin webkitVal($name, $val) { + #{$name}: #{$val}; + #{$name}: -webkit-#{$val}; +} + @mixin verticalCenter { /* This doesn't work on an element inside an element with absolute positioning that has height: auto */ //position: relative; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 2e7a0e09d3..4fd66df059 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -365,12 +365,13 @@ label.checkbox.custom { //@include test(); font-size: 1em; - > .title-label, - > .type-icon, - > .context-available { - //@include tmpBorder(#6666ff); - //vertical-align: middle; - } + //> .title-label, + //> .type-icon, + //> .context-available { + // //@include tmpBorder(#6666ff); + // //vertical-align: middle; + //} + > .type-icon { font-size: 120%; float: left; @@ -378,9 +379,14 @@ label.checkbox.custom { } .l-elem-wrapper { - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; + //@include test(#66f, 0.2); + @include webkitProp(justify-content, flex-start); + mct-representation { + // Holds the context-available item + // Must have min-width to make flex work properly + // in Safari + min-width: 0.7em; + } } .action { @@ -388,14 +394,18 @@ label.checkbox.custom { } .title-label { + //@include test(green, 0.9); @include ellipsize(); color: lighten($colorBodyFg, 40%); + @include webkitProp(flex, '0 1 auto'); padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text. //position: relative; } .context-available { font-size: 0.7em; + @include webkitProp(flex, '0 0 1'); + //margin-right: $interiorMargin; } @include desktop { diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 9a88c64a6a..d202ec0450 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -159,7 +159,7 @@ } .pane.right-repr { left: 0 !important; - transform: translateX($proporMenuOnly); + @include webkitProp(transform, translateX($proporMenuOnly)); #content-area { opacity: 0; } diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index e48baba95f..34a323e6ef 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -39,26 +39,20 @@ $iconWidth: 20px; $leftMargin: 6px; $rightPadding: 5px; - - //padding-right: $rightPadding; - //@include test(); - display: flex; //block; - flex-direction: column; + @include webkitVal(display, flex); + //display: flex; + @include webkitProp(flex-direction, column); + //flex-direction: column; height: 100%; .search-bar { - //$heightAdjust: 4px; $textInputHeight: 19px; // This is equal to the default value, 19px $iconEdgeM: 4px; $iconD: $treeSearchInputBarH - ($iconEdgeM*2); font-size: 0.8em; - - //order: 1; - + max-width: 250px; position: relative; width: 100%; - //height: $textInputHeight; - //margin-top: $heightAdjust; .search-input, .search-icon { } diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index bcb441237f..04b582d123 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -85,14 +85,6 @@ } } } - &.l-flex { - display: flex; - flex-flow: row nowrap; - .left { - //@include test(green); - flex: 1 1 0; - } - } } .user-environ { @@ -321,6 +313,33 @@ } } +.object-browse-bar { + //@include test(blue); + @include absPosDefault(0, visible); + @include box-sizing(border-box); + height: $ueTopBarH; + line-height: $ueTopBarH; + white-space: nowrap; + + .left { + padding-right: $interiorMarginLg * 2; + .l-back { + display: inline-block; + float: left; + margin-right: $interiorMarginLg; + } + } +} + +.l-flex { + @include webkitVal('display', 'flex'); + @include webkitProp('flex-flow', 'row nowrap'); + .left { + //@include test(red); + @include webkitProp(flex, '1 1 0'); + } +} + .vscroll { overflow-y: auto; } diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss deleted file mode 100644 index 602a8adeae..0000000000 --- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss +++ /dev/null @@ -1,38 +0,0 @@ -/***************************************************************************** - * Open MCT Web, Copyright (c) 2014-2015, United States Government - * as represented by the Administrator of the National Aeronautics and Space - * Administration. All rights reserved. - * - * Open MCT Web is licensed under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * http://www.apache.org/licenses/LICENSE-2.0. - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - * - * Open MCT Web includes source code licensed under additional open source - * licenses. See the Open Source Licenses file (LICENSES.md) included with - * this source code distribution or the Licensing information page available - * at runtime from the About dialog for additional information. - *****************************************************************************/ -.object-browse-bar { - //@include test(blue); - @include absPosDefault(0, visible); - @include box-sizing(border-box); - height: $ueTopBarH; - line-height: $ueTopBarH; - white-space: nowrap; - - .left { - padding-right: $interiorMargin; - .l-back { - display: inline-block; - float: left; - margin-right: $interiorMarginLg; - } - } -} \ No newline at end of file