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

[Frontend] Convert main left pane elements to flex layout

Browse Source 
open #250
Significant changes to flex classes, markup in
browse.html and search.html to support better
flex layout;
Search results now scrolls properly;
Significant refactoring and cleanups in search and _search.scss;
This commit is contained in:
Charles Hacskaylo 2015-11-05 15:44:55 -08:00
parent 8ca22cc510
commit c0ac3a0f96
7 changed files with 449 additions and 448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
platform/commonUI/browse/res/templates/browse.html
View File

@ -33,13 +33,14 @@
mct-object="navigatedObject" mct-object="navigatedObject"
class="flex-elem"> class="flex-elem">
</mct-representation> </mct-representation>
<div class='holder search-holder flex-elem' <div class='holder l-flex-col flex-elem search-holder'
ng-class="{active: treeModel.search}"> ng-class="{ active: treeModel.search, grows: treeModel.search }">
<mct-include key="'search'" <mct-include key="'search'"
ng-model="treeModel"> ng-model="treeModel"
class="flex-container">
</mct-include> </mct-include>
</div> </div>
<div class='holder tree-holder flex-elem grows' <div class='holder flex-elem grows vscroll tree-holder'
ng-hide="treeModel.search"> ng-hide="treeModel.search">
<mct-representation key="'tree'" <mct-representation key="'tree'"
mct-object="domainObject" mct-object="domainObject"

21
platform/commonUI/general/res/sass/_archetypes.scss
View File

@ -97,22 +97,37 @@
.l-flex-col { .l-flex-col {
@include display-flex; @include display-flex;
@include flex-wrap(nowrap); @include flex-wrap(nowrap);
//@include flex(1 1 auto !important);
.flex-elem { .flex-elem {
//@include test(green, 0.1);
min-height: 0; // Needed to allow element to shrink within parent
&:not(.grows) { &:not(.grows) {
@include flex(0 1 auto); @include flex(0 0 auto);
} }
&.grows { &.grows {
@include flex(1 1 auto); @include flex(1 1 auto);
} }
} }
.flex-container {
// Apply to wrapping elements, mct-includes, etc.
@include display-flex;
@include flex-wrap(nowrap);
@include flex(1 1 auto);
min-height:0;
}
}
.l-flex-row {
@include flex-direction(row);
.flex-container { @include flex-direction(row); }
} }
.l-flex-row { @include flex-direction(row); }
.l-flex-col { .l-flex-col {
@include flex-direction(column); @include flex-direction(column);
.flex-elem { .flex-elem {
margin-bottom: $interiorMargin; &:not(:first-child) { margin-top: $interiorMarginLg; }
} }
.flex-container { @include flex-direction(column); }
} }
.l-flex { .l-flex {

110
platform/commonUI/general/res/sass/search/_search.scss
View File

@ -20,7 +20,7 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.abs.search-holder { /*.abs.search-holder {
//@include test(#990000); //@include test(#990000);
height: $treeSearchInputBarH; height: $treeSearchInputBarH;
bottom: 0; bottom: 0;
@ -33,44 +33,34 @@
// Align with the top of the divider bar, below create button // Align with the top of the divider bar, below create button
//margin-top: 10px; // CH comment out //margin-top: 10px; // CH comment out
z-index:5; z-index:5;
} }*/
.search { .holder-search {
$iconWidth: 20px; $iconWidth: 20px;
$leftMargin: 6px; height: $ueTopBarH;
$rightPadding: 5px;
@include webkitVal(display, flex);
//display: flex;
@include webkitProp(flex-direction, column);
//flex-direction: column;
height: 100%;
.search-bar { .search-bar {
$textInputHeight: 19px; // This is equal to the default value, 19px $textInputHeight: 19px; // This is equal to the default value, 19px
$iconEdgeM: 4px; $iconEdgeM: 4px;
$iconD: $treeSearchInputBarH - ($iconEdgeM*2); $iconD: $treeSearchInputBarH - ($iconEdgeM*2);
//@include test(red, 0.1);
font-size: 0.8em; font-size: 0.8em;
max-width: 250px; max-width: 250px;
position: relative; position: relative;
width: 100%;
.search-input,
.search-icon {
}
.search-input { .search-input {
height: $treeSearchInputBarH; height: $treeSearchInputBarH;
line-height: $treeSearchInputBarH; line-height: $treeSearchInputBarH;
padding-top: 0;
padding-bottom: 0;
} }
.search-icon, &:before,
.clear-icon, .clear-icon,
.menu-icon { .menu-icon {
//@include test(#008800);
@include box-sizing(border-box); @include box-sizing(border-box);
color: $colorInputIcon; color: $colorInputIcon;
height: $iconD; width: $iconD; font-family: symbolsfont;
height: $iconD;
width: $iconD;
line-height: $iconD; line-height: $iconD;
position: absolute; position: absolute;
text-align: center; text-align: center;
@ -80,7 +70,7 @@
.clear-icon, .clear-icon,
.menu-icon { .menu-icon {
cursor: pointer; cursor: pointer;
@include transition(color, .25s); @include trans-prop-nice((opacity, color), 150ms);
} }
@ -92,44 +82,32 @@
// Make work for mct-control textfield // Make work for mct-control textfield
input { input {
width: 100%; width: inherit; // was 100%
} }
} }
.search-icon { &:before {
//color: $colorItemFg; // Magnify glass icon
content:'\4d';
left: $interiorMarginSm; left: $interiorMarginSm;
transition: visibility .15s, opacity .15s, color .2s; @include trans-prop-nice(color, 250ms);
pointer-events: none; pointer-events: none;
&.content {
// Make icon invisible whenever there is text input
//visibility: hidden;
//opacity: 0;
}
}
// Make icon invisible when the text input is focused
.search-input:focus + div.search-icon {
//visibility: hidden;
//opacity: 0;
} }
// Make icon lighten when hovering over search bar // Make icon lighten when hovering over search bar
.search-input:hover + div.search-icon { &:hover:before {
color: pullForward($colorInputIcon, 10%); color: pullForward($colorInputIcon, 10%);
} }
.clear-icon { .clear-icon {
// 'x' in circle icon
&:before { content: '\e607'; }
right: $iconD + $interiorMargin; right: $iconD + $interiorMargin;
// Icon is visible only when there is text input // Icon is visible only when there is text input
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
&.show {
transition: visibility .15s, opacity .15s, color .2s;
&.content {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
@ -140,6 +118,8 @@
} }
.menu-icon { .menu-icon {
// 'v' invoke menu icon
&:before { content: '\76'; }
font-size: 0.8em; font-size: 0.8em;
padding-right: $iconEdgeM; padding-right: $iconEdgeM;
right: $iconEdgeM; right: $iconEdgeM;
@ -152,12 +132,8 @@
.search-menu-holder { .search-menu-holder {
float: right; float: right;
//margin-top: $textInputHeight - 2px;
//left: -50px;
left: -20px; left: -20px;
z-index: 1; z-index: 1;
transition: visibility .05s, opacity .05s; transition: visibility .05s, opacity .05s;
&.off { &.off {
@ -166,13 +142,13 @@
} }
} }
// Hovering reveals menu //// Hovering reveals menu
.menu-icon:hover + div.search-menu-holder { //.menu-icon:hover + div.search-menu-holder {
visibility: visible; // visibility: visible;
} //}
div.search-menu-holder:hover { //div.search-menu-holder:hover {
visibility: visible; // visibility: visible;
} //}
} }
.active-filter-display { .active-filter-display {
@ -185,8 +161,6 @@
padding: $p 0; padding: $p 0;
padding-left: $s * 2.25; padding-left: $s * 2.25;
font-size: $s; font-size: $s;
//background-color: rgba(#000, 0.3);
//border-radius: $basicCr;
margin-top: $interiorMarginSm; margin-top: $interiorMarginSm;
@ -201,7 +175,6 @@
// Transition looks weird when the results list has none // Transition looks weird when the results list has none
//transition: visibility .2s, opacity .2s; //transition: visibility .2s, opacity .2s;
&.off { &.off {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
@ -213,28 +186,13 @@
} }
.search-scroll { .search-scroll {
order: 3;
margin-top: 4px;
// Adjustable scrolling size
overflow-y: auto;
top: auto;
height: auto;
max-height: 100%;
position: relative;
.load-icon {
position: relative;
}
.load-more-button { .load-more-button {
margin-top: $interiorMargin 0; @include transform(translateX(-50%));
font-size: 0.8em; display: inline-block;
position: relative; margin-top: $interiorMargin;
left: 50%; padding: 0 $interiorMarginLg;
margin-left: -45px; font-size: 0.75em;
text-align: center; margin-left: 50%;
width: 90px;
white-space: nowrap; white-space: nowrap;
} }
} }

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

@ -188,6 +188,8 @@
} }
&.treeview.left { &.treeview.left {
// Converted to flex layout
//.create-btn-holder { //.create-btn-holder {
// //bottom: auto; // //bottom: auto;
// //top: 0; // //top: 0;
@ -197,16 +199,16 @@
// bottom: $interiorMargin; // bottom: $interiorMargin;
// } // }
//} //}
.holder-treeview-elements{ //.holder-treeview-elements{
//
} //}
.search-holder { //.search-holder {
top: $ueTopBarH + $interiorMarginLg; // top: $ueTopBarH + $interiorMarginLg;
} //}
.tree-holder { //.tree-holder {
overflow: auto; // overflow: auto;
top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin; // top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
} //}
} }
.mini-tab-icon.toggle-pane { .mini-tab-icon.toggle-pane {

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

@ -515,30 +515,52 @@ mct-container {
-webkit-flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
flex-wrap: nowrap; } flex-wrap: nowrap; }
/* line 101, ../../../../general/res/sass/_archetypes.scss */ /* line 101, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem, .l-flex .flex-elem,
.l-flex-col .flex-elem {
min-height: 0; }
/* line 104, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows), .l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows),
.l-flex-col .flex-elem:not(.grows) { .l-flex-col .flex-elem:not(.grows) {
-webkit-flex: 0 1 auto; -webkit-flex: 0 0 auto;
flex: 0 1 auto; } flex: 0 0 auto; }
/* line 104, ../../../../general/res/sass/_archetypes.scss */ /* line 107, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows, .l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows,
.l-flex-col .flex-elem.grows { .l-flex-col .flex-elem.grows {
-webkit-flex: 1 1 auto; -webkit-flex: 1 1 auto;
flex: 1 1 auto; } flex: 1 1 auto; }
/* line 111, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container,
.l-flex-col .flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 0; }
/* line 110, ../../../../general/res/sass/_archetypes.scss */ /* line 120, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row, .l-flex { .l-flex-row, .l-flex {
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; } flex-direction: row; }
/* line 122, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container {
-webkit-flex-direction: row;
flex-direction: row; }
/* line 111, ../../../../general/res/sass/_archetypes.scss */ /* line 125, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col { .l-flex-col {
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; } flex-direction: column; }
/* line 113, ../../../../general/res/sass/_archetypes.scss */ /* line 128, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-elem { .l-flex-col .flex-elem:not(:first-child) {
margin-bottom: 5px; } margin-top: 10px; }
/* line 130, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-container {
-webkit-flex-direction: column;
flex-direction: column; }
/* line 120, ../../../../general/res/sass/_archetypes.scss */ /* line 135, ../../../../general/res/sass/_archetypes.scss */
.l-flex .left { .l-flex .left {
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;
@ -4501,49 +4523,42 @@ span.req {
/* line 185, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 185, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .primary-pane { .pane .primary-pane {
z-index: 2; } z-index: 2; }
/* line 203, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 214, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .search-holder {
top: 34px; }
/* line 206, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder {
overflow: auto;
top: 64px; }
/* line 212, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane { .pane .mini-tab-icon.toggle-pane {
z-index: 5; } z-index: 5; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 212, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 214, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane { .pane .mini-tab-icon.toggle-pane {
top: 10px; top: 10px;
height: 24px; height: 24px;
line-height: 24px; } line-height: 24px; }
/* line 221, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 223, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane:after { .pane .mini-tab-icon.toggle-pane:after {
opacity: 0; } opacity: 0; }
/* line 226, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 228, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.collapsed:before { .pane .mini-tab-icon.toggle-pane.collapsed:before {
opacity: 0; } opacity: 0; }
/* line 229, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 231, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.collapsed:after { .pane .mini-tab-icon.toggle-pane.collapsed:after {
opacity: 1; } opacity: 1; }
/* line 233, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 235, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left { .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left {
left: 0; left: 0;
-moz-transform: translateX(-34px); -moz-transform: translateX(-34px);
-ms-transform: translateX(-34px); -ms-transform: translateX(-34px);
-webkit-transform: translateX(-34px); -webkit-transform: translateX(-34px);
transform: translateX(-34px); } transform: translateX(-34px); }
/* line 236, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 238, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:after { .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:after {
content: '\6d'; } content: '\6d'; }
/* line 239, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left.collapsed { .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left.collapsed {
left: 0; left: 0;
-moz-transform: translateX(-17px); -moz-transform: translateX(-17px);
-ms-transform: translateX(-17px); -ms-transform: translateX(-17px);
-webkit-transform: translateX(-17px); -webkit-transform: translateX(-17px);
transform: translateX(-17px); } transform: translateX(-17px); }
/* line 243, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 245, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:not(.collapsed):before { .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:not(.collapsed):before {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -4561,16 +4576,16 @@ span.req {
-o-transition-delay: 200ms; -o-transition-delay: 200ms;
-webkit-transition-delay: 200ms; -webkit-transition-delay: 200ms;
transition-delay: 200ms; } transition-delay: 200ms; }
/* line 247, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 249, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right { .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right {
right: 10px; } right: 10px; }
/* line 249, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right:after { .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right:after {
content: '\e615'; } content: '\e615'; }
/* line 252, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 254, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right.collapsed { .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right.collapsed {
right: 5px; } } right: 5px; } }
/* line 261, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 263, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .left.l-inspect, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager, .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .left.l-inspect, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
.pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
.l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@ -4584,7 +4599,7 @@ span.req {
.s-menu-btn .pane.items .object-browse-bar span.right.l-click-area { .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
top: auto; } top: auto; }
/* line 269, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout { .split-layout {
/* &.vertical { /* &.vertical {
// Slides left and right // Slides left and right
@ -4599,36 +4614,36 @@ span.req {
} }
} }
}*/ } }*/ }
/* line 272, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane { .split-layout.horizontal > .pane {
margin-top: 5px; } margin-top: 5px; }
/* line 275, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child { .split-layout.horizontal > .pane:first-child {
margin-top: 0; } margin-top: 0; }
/* line 295, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 297, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-treeview-elements { .split-layout .holder.holder-treeview-elements {
top: 10px; top: 10px;
right: 0; right: 0;
bottom: 10px; bottom: 10px;
left: 10px; } left: 10px; }
/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 304, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-object-and-inspector { .split-layout .holder.holder-object-and-inspector {
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; } left: 0; }
/* line 307, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 309, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-object-and-inspector .holder-object { .split-layout .holder.holder-object-and-inspector .holder-object {
top: 10px; top: 10px;
bottom: 10px; } bottom: 10px; }
/* line 311, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 313, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-object-and-inspector .holder-inspector-elements { .split-layout .holder.holder-object-and-inspector .holder-inspector-elements {
top: 10px; top: 10px;
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
right: 10px; } right: 10px; }
/* line 321, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 323, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder { .object-holder {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
@ -4639,11 +4654,11 @@ span.req {
width: auto; width: auto;
height: auto; height: auto;
top: 34px; } top: 34px; }
/* line 325, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 327, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder.l-controls-visible.l-time-controller-visible { .object-holder.l-controls-visible.l-time-controller-visible {
bottom: 88px; } bottom: 88px; }
/* line 331, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 333, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
.top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-btn,
.top-bar .buttons-main .s-menu-btn, .top-bar .buttons-main .s-menu-btn,
@ -4655,12 +4670,12 @@ span.req {
line-height: 25px; line-height: 25px;
vertical-align: top; } vertical-align: top; }
/* line 344, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 346, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher, .object-browse-bar .view-switcher,
.top-bar .view-switcher { .top-bar .view-switcher {
margin-right: 20px; } margin-right: 20px; }
/* line 349, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 351, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar { .object-browse-bar {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -4676,22 +4691,22 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
white-space: nowrap; } white-space: nowrap; }
/* line 357, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 359, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left { .object-browse-bar .left {
padding-right: 20px; } padding-right: 20px; }
/* line 359, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 361, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back { .object-browse-bar .left .l-back {
display: inline-block; display: inline-block;
float: left; float: left;
margin-right: 10px; } margin-right: 10px; }
/* line 373, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 375, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .tree-holder, .pane-tree-hidden .tree-holder,
.pane-tree-hidden .splitter-treeview, .pane-tree-hidden .splitter-treeview,
.pane-tree-hidden .holder-treeview-elements { .pane-tree-hidden .holder-treeview-elements {
opacity: 0; } opacity: 0; }
/* line 383, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .tree-holder, .pane-tree-showing .tree-holder,
.pane-tree-showing .splitter-treeview { .pane-tree-showing .splitter-treeview {
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -4711,7 +4726,7 @@ span.req {
-webkit-transition-delay: 250ms; -webkit-transition-delay: 250ms;
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 389, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 391, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .holder-treeview-elements { .pane-tree-showing .holder-treeview-elements {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -4730,7 +4745,7 @@ span.req {
-webkit-transition-delay: 200ms; -webkit-transition-delay: 200ms;
transition-delay: 200ms; } transition-delay: 200ms; }
/* line 396, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 398, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-showing .l-object-and-inspector .l-inspect, .pane-inspect-showing .l-object-and-inspector .l-inspect,
.pane-inspect-showing .l-object-and-inspector .splitter-inspect { .pane-inspect-showing .l-object-and-inspector .splitter-inspect {
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -4751,25 +4766,25 @@ span.req {
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 405, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 407, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .l-inspect, .pane-inspect-hidden .l-object-and-inspector .l-inspect,
.pane-inspect-hidden .l-object-and-inspector .splitter-inspect { .pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
opacity: 0; } opacity: 0; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 413, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 415, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder { .pane.treeview.left .tree-holder {
padding-right: 5px; } padding-right: 5px; }
/* line 417, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 419, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.primary-pane { .pane-tree-hidden .pane.right.primary-pane {
left: 22px !important; } left: 22px !important; }
/* line 420, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 422, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.left { .pane-inspect-hidden .l-object-and-inspector .pane.left {
right: 22px !important; } right: 22px !important; }
/* line 423, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 425, ../../../../general/res/sass/user-environ/_layout.scss */
.pane:not(.resizing) { .pane:not(.resizing) {
-moz-transition-property: width, left, right; -moz-transition-property: width, left, right;
-o-transition-property: width, left, right; -o-transition-property: width, left, right;
@ -5136,117 +5151,139 @@ span.req {
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/* line 23, ../../../../general/res/sass/search/_search.scss */ /*.abs.search-holder {
.abs.search-holder, .search-holder.l-inspect, .l-datetime-picker .l-month-year-pager .search-holder.pager, //@include test(#990000);
.l-datetime-picker .l-month-year-pager .search-holder.val, .s-menu-btn span.search-holder.l-click-area { height: $treeSearchInputBarH;
height: 25px;
bottom: 0; bottom: 0;
top: 23px; &.active {
z-index: 5; }
/* line 27, ../../../../general/res/sass/search/_search.scss */
.abs.search-holder.active, .search-holder.active.l-inspect, .l-datetime-picker .l-month-year-pager .search-holder.active.pager,
.l-datetime-picker .l-month-year-pager .search-holder.active.val, .s-menu-btn span.search-holder.active.l-click-area {
height: auto; height: auto;
bottom: 0; } bottom: 0;
}
top: 23px;
// Align with the top of the divider bar, below create button
//margin-top: 10px; // CH comment out
z-index:5;
}*/
/* line 38, ../../../../general/res/sass/search/_search.scss */ /* line 38, ../../../../general/res/sass/search/_search.scss */
.search { .holder-search {
display: flex; height: 24px; }
display: -webkit-flex; /* line 42, ../../../../general/res/sass/search/_search.scss */
flex-direction: column; .holder-search .search-bar {
-webkit-flex-direction: column;
height: 100%; }
/* line 48, ../../../../general/res/sass/search/_search.scss */
.search .search-bar {
font-size: 0.8em; font-size: 0.8em;
max-width: 250px; max-width: 250px;
position: relative; position: relative; }
width: 100%; } /* line 51, ../../../../general/res/sass/search/_search.scss */
/* line 60, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .search-input {
.search .search-bar .search-input {
height: 25px; height: 25px;
line-height: 25px; line-height: 25px; }
padding-top: 0; /* line 56, ../../../../general/res/sass/search/_search.scss */
padding-bottom: 0; } .holder-search .search-bar:before,
/* line 67, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .clear-icon,
.search .search-bar .search-icon, .holder-search .search-bar .menu-icon {
.search .search-bar .clear-icon,
.search .search-bar .menu-icon {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
color: #737373; color: #737373;
font-family: symbolsfont;
height: 17px; height: 17px;
width: 17px; width: 17px;
line-height: 17px; line-height: 17px;
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 4px; } top: 4px; }
/* line 80, ../../../../general/res/sass/search/_search.scss */ /* line 70, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .clear-icon, .holder-search .search-bar .clear-icon,
.search .search-bar .menu-icon { .holder-search .search-bar .menu-icon {
cursor: pointer; cursor: pointer;
-moz-transition: color, 0.25s; -moz-transition-property: opacity, color;
-o-transition: color, 0.25s; -o-transition-property: opacity, color;
-webkit-transition: color, 0.25s; -webkit-transition-property: opacity, color;
transition: color, 0.25s; } transition-property: opacity, color;
/* line 87, ../../../../general/res/sass/search/_search.scss */ -moz-transition-duration: 150ms;
.search .search-bar .search-input { -o-transition-duration: 150ms;
-webkit-transition-duration: 150ms;
transition-duration: 150ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0; }
/* line 77, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input {
position: relative; position: relative;
width: 100%; width: 100%;
padding-left: 22px !important; padding-left: 22px !important;
padding-right: 44px !important; } padding-right: 44px !important; }
/* line 94, ../../../../general/res/sass/search/_search.scss */ /* line 84, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .search-input input { .holder-search .search-bar .search-input input {
width: 100%; } width: inherit; }
/* line 99, ../../../../general/res/sass/search/_search.scss */ /* line 89, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .search-icon { .holder-search .search-bar:before {
content: '\4d';
left: 3px; left: 3px;
transition: visibility .15s, opacity .15s, color .2s; -moz-transition-property: color;
-o-transition-property: color;
-webkit-transition-property: color;
transition-property: color;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
pointer-events: none; } pointer-events: none; }
/* line 119, ../../../../general/res/sass/search/_search.scss */ /* line 98, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .search-input:hover + div.search-icon { .holder-search .search-bar:hover:before {
color: #8c8c8c; } color: #8c8c8c; }
/* line 123, ../../../../general/res/sass/search/_search.scss */ /* line 102, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .clear-icon { .holder-search .search-bar .clear-icon {
right: 22px; right: 22px;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0; }
transition: visibility .15s, opacity .15s, color .2s; } /* line 104, ../../../../general/res/sass/search/_search.scss */
/* line 132, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .clear-icon:before {
.search .search-bar .clear-icon.content { content: '\e607'; }
/* line 110, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }
/* line 137, ../../../../general/res/sass/search/_search.scss */ /* line 115, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .clear-icon:hover { .holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; } color: #8c8c8c; }
/* line 142, ../../../../general/res/sass/search/_search.scss */ /* line 120, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .menu-icon { .holder-search .search-bar .menu-icon {
font-size: 0.8em; font-size: 0.8em;
padding-right: 4px; padding-right: 4px;
right: 4px; right: 4px;
text-align: right; } text-align: right; }
/* line 148, ../../../../general/res/sass/search/_search.scss */ /* line 122, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .menu-icon:hover { .holder-search .search-bar .menu-icon:before {
content: '\76'; }
/* line 128, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; } color: #8c8c8c; }
/* line 153, ../../../../general/res/sass/search/_search.scss */ /* line 133, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .search-menu-holder { .holder-search .search-bar .search-menu-holder {
float: right; float: right;
left: -20px; left: -20px;
z-index: 1; z-index: 1;
transition: visibility .05s, opacity .05s; } transition: visibility .05s, opacity .05s; }
/* line 163, ../../../../general/res/sass/search/_search.scss */ /* line 139, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .search-menu-holder.off { .holder-search .search-bar .search-menu-holder.off {
visibility: hidden; visibility: hidden;
opacity: 0; } opacity: 0; }
/* line 170, ../../../../general/res/sass/search/_search.scss */ /* line 154, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .menu-icon:hover + div.search-menu-holder { .holder-search .active-filter-display {
visibility: visible; }
/* line 173, ../../../../general/res/sass/search/_search.scss */
.search .search-bar div.search-menu-holder:hover {
visibility: visible; }
/* line 178, ../../../../general/res/sass/search/_search.scss */
.search .active-filter-display {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
@ -5258,43 +5295,33 @@ span.req {
padding-left: 1.4625em; padding-left: 1.4625em;
font-size: 0.65em; font-size: 0.65em;
margin-top: 3px; } margin-top: 3px; }
/* line 193, ../../../../general/res/sass/search/_search.scss */ /* line 167, ../../../../general/res/sass/search/_search.scss */
.search .active-filter-display .clear-filters-icon { .holder-search .active-filter-display .clear-filters-icon {
color: #737373; color: #737373;
opacity: 1; opacity: 1;
font-size: 0.8em; font-size: 0.8em;
position: absolute; position: absolute;
left: 1px; left: 1px;
cursor: pointer; } cursor: pointer; }
/* line 205, ../../../../general/res/sass/search/_search.scss */ /* line 178, ../../../../general/res/sass/search/_search.scss */
.search .active-filter-display.off { .holder-search .active-filter-display.off {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
height: 0; height: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; } border: 0; }
/* line 215, ../../../../general/res/sass/search/_search.scss */ /* line 189, ../../../../general/res/sass/search/_search.scss */
.search .search-scroll { .holder-search .search-scroll .load-more-button {
order: 3; -moz-transform: translateX(-50%);
margin-top: 4px; -ms-transform: translateX(-50%);
overflow-y: auto; -webkit-transform: translateX(-50%);
top: auto; transform: translateX(-50%);
height: auto; display: inline-block;
max-height: 100%; margin-top: 5px;
position: relative; } padding: 0 10px;
/* line 226, ../../../../general/res/sass/search/_search.scss */ font-size: 0.75em;
.search .search-scroll .load-icon { margin-left: 50%;
position: relative; }
/* line 230, ../../../../general/res/sass/search/_search.scss */
.search .search-scroll .load-more-button {
margin-top: 5px 0;
font-size: 0.8em;
position: relative;
left: 50%;
margin-left: -45px;
text-align: center;
width: 90px;
white-space: nowrap; } white-space: nowrap; }
@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) { @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) {

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

@ -515,30 +515,52 @@ mct-container {
-webkit-flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
flex-wrap: nowrap; } flex-wrap: nowrap; }
/* line 101, ../../../../general/res/sass/_archetypes.scss */ /* line 101, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem, .l-flex .flex-elem,
.l-flex-col .flex-elem {
min-height: 0; }
/* line 104, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows), .l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows),
.l-flex-col .flex-elem:not(.grows) { .l-flex-col .flex-elem:not(.grows) {
-webkit-flex: 0 1 auto; -webkit-flex: 0 0 auto;
flex: 0 1 auto; } flex: 0 0 auto; }
/* line 104, ../../../../general/res/sass/_archetypes.scss */ /* line 107, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows, .l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows,
.l-flex-col .flex-elem.grows { .l-flex-col .flex-elem.grows {
-webkit-flex: 1 1 auto; -webkit-flex: 1 1 auto;
flex: 1 1 auto; } flex: 1 1 auto; }
/* line 111, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container,
.l-flex-col .flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 0; }
/* line 110, ../../../../general/res/sass/_archetypes.scss */ /* line 120, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row, .l-flex { .l-flex-row, .l-flex {
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; } flex-direction: row; }
/* line 122, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container {
-webkit-flex-direction: row;
flex-direction: row; }
/* line 111, ../../../../general/res/sass/_archetypes.scss */ /* line 125, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col { .l-flex-col {
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; } flex-direction: column; }
/* line 113, ../../../../general/res/sass/_archetypes.scss */ /* line 128, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-elem { .l-flex-col .flex-elem:not(:first-child) {
margin-bottom: 5px; } margin-top: 10px; }
/* line 130, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-container {
-webkit-flex-direction: column;
flex-direction: column; }
/* line 120, ../../../../general/res/sass/_archetypes.scss */ /* line 135, ../../../../general/res/sass/_archetypes.scss */
.l-flex .left { .l-flex .left {
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;
@ -4423,49 +4445,42 @@ span.req {
/* line 185, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 185, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .primary-pane { .pane .primary-pane {
z-index: 2; } z-index: 2; }
/* line 203, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 214, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .search-holder {
top: 34px; }
/* line 206, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder {
overflow: auto;
top: 64px; }
/* line 212, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane { .pane .mini-tab-icon.toggle-pane {
z-index: 5; } z-index: 5; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 212, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 214, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane { .pane .mini-tab-icon.toggle-pane {
top: 10px; top: 10px;
height: 24px; height: 24px;
line-height: 24px; } line-height: 24px; }
/* line 221, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 223, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane:after { .pane .mini-tab-icon.toggle-pane:after {
opacity: 0; } opacity: 0; }
/* line 226, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 228, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.collapsed:before { .pane .mini-tab-icon.toggle-pane.collapsed:before {
opacity: 0; } opacity: 0; }
/* line 229, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 231, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.collapsed:after { .pane .mini-tab-icon.toggle-pane.collapsed:after {
opacity: 1; } opacity: 1; }
/* line 233, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 235, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left { .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left {
left: 0; left: 0;
-moz-transform: translateX(-33px); -moz-transform: translateX(-33px);
-ms-transform: translateX(-33px); -ms-transform: translateX(-33px);
-webkit-transform: translateX(-33px); -webkit-transform: translateX(-33px);
transform: translateX(-33px); } transform: translateX(-33px); }
/* line 236, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 238, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:after { .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:after {
content: '\6d'; } content: '\6d'; }
/* line 239, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left.collapsed { .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left.collapsed {
left: 0; left: 0;
-moz-transform: translateX(-17px); -moz-transform: translateX(-17px);
-ms-transform: translateX(-17px); -ms-transform: translateX(-17px);
-webkit-transform: translateX(-17px); -webkit-transform: translateX(-17px);
transform: translateX(-17px); } transform: translateX(-17px); }
/* line 243, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 245, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:not(.collapsed):before { .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:not(.collapsed):before {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -4483,16 +4498,16 @@ span.req {
-o-transition-delay: 200ms; -o-transition-delay: 200ms;
-webkit-transition-delay: 200ms; -webkit-transition-delay: 200ms;
transition-delay: 200ms; } transition-delay: 200ms; }
/* line 247, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 249, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right { .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right {
right: 10px; } right: 10px; }
/* line 249, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right:after { .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right:after {
content: '\e615'; } content: '\e615'; }
/* line 252, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 254, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right.collapsed { .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right.collapsed {
right: 5px; } } right: 5px; } }
/* line 261, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 263, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .left.l-inspect, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager, .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .left.l-inspect, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
.pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
.l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@ -4506,7 +4521,7 @@ span.req {
.s-menu-btn .pane.items .object-browse-bar span.right.l-click-area { .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
top: auto; } top: auto; }
/* line 269, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout { .split-layout {
/* &.vertical { /* &.vertical {
// Slides left and right // Slides left and right
@ -4521,36 +4536,36 @@ span.req {
} }
} }
}*/ } }*/ }
/* line 272, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane { .split-layout.horizontal > .pane {
margin-top: 5px; } margin-top: 5px; }
/* line 275, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child { .split-layout.horizontal > .pane:first-child {
margin-top: 0; } margin-top: 0; }
/* line 295, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 297, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-treeview-elements { .split-layout .holder.holder-treeview-elements {
top: 10px; top: 10px;
right: 0; right: 0;
bottom: 10px; bottom: 10px;
left: 10px; } left: 10px; }
/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 304, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-object-and-inspector { .split-layout .holder.holder-object-and-inspector {
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; } left: 0; }
/* line 307, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 309, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-object-and-inspector .holder-object { .split-layout .holder.holder-object-and-inspector .holder-object {
top: 10px; top: 10px;
bottom: 10px; } bottom: 10px; }
/* line 311, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 313, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-object-and-inspector .holder-inspector-elements { .split-layout .holder.holder-object-and-inspector .holder-inspector-elements {
top: 10px; top: 10px;
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
right: 10px; } right: 10px; }
/* line 321, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 323, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder { .object-holder {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
@ -4561,11 +4576,11 @@ span.req {
width: auto; width: auto;
height: auto; height: auto;
top: 34px; } top: 34px; }
/* line 325, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 327, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder.l-controls-visible.l-time-controller-visible { .object-holder.l-controls-visible.l-time-controller-visible {
bottom: 88px; } bottom: 88px; }
/* line 331, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 333, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
.top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-btn,
.top-bar .buttons-main .s-menu-btn, .top-bar .buttons-main .s-menu-btn,
@ -4577,12 +4592,12 @@ span.req {
line-height: 25px; line-height: 25px;
vertical-align: top; } vertical-align: top; }
/* line 344, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 346, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher, .object-browse-bar .view-switcher,
.top-bar .view-switcher { .top-bar .view-switcher {
margin-right: 20px; } margin-right: 20px; }
/* line 349, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 351, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar { .object-browse-bar {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -4598,22 +4613,22 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
white-space: nowrap; } white-space: nowrap; }
/* line 357, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 359, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left { .object-browse-bar .left {
padding-right: 20px; } padding-right: 20px; }
/* line 359, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 361, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back { .object-browse-bar .left .l-back {
display: inline-block; display: inline-block;
float: left; float: left;
margin-right: 10px; } margin-right: 10px; }
/* line 373, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 375, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .tree-holder, .pane-tree-hidden .tree-holder,
.pane-tree-hidden .splitter-treeview, .pane-tree-hidden .splitter-treeview,
.pane-tree-hidden .holder-treeview-elements { .pane-tree-hidden .holder-treeview-elements {
opacity: 0; } opacity: 0; }
/* line 383, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .tree-holder, .pane-tree-showing .tree-holder,
.pane-tree-showing .splitter-treeview { .pane-tree-showing .splitter-treeview {
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -4633,7 +4648,7 @@ span.req {
-webkit-transition-delay: 250ms; -webkit-transition-delay: 250ms;
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 389, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 391, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .holder-treeview-elements { .pane-tree-showing .holder-treeview-elements {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -4652,7 +4667,7 @@ span.req {
-webkit-transition-delay: 200ms; -webkit-transition-delay: 200ms;
transition-delay: 200ms; } transition-delay: 200ms; }
/* line 396, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 398, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-showing .l-object-and-inspector .l-inspect, .pane-inspect-showing .l-object-and-inspector .l-inspect,
.pane-inspect-showing .l-object-and-inspector .splitter-inspect { .pane-inspect-showing .l-object-and-inspector .splitter-inspect {
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -4673,25 +4688,25 @@ span.req {
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 405, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 407, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .l-inspect, .pane-inspect-hidden .l-object-and-inspector .l-inspect,
.pane-inspect-hidden .l-object-and-inspector .splitter-inspect { .pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
opacity: 0; } opacity: 0; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 413, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 415, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder { .pane.treeview.left .tree-holder {
padding-right: 5px; } padding-right: 5px; }
/* line 417, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 419, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.primary-pane { .pane-tree-hidden .pane.right.primary-pane {
left: 22px !important; } left: 22px !important; }
/* line 420, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 422, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.left { .pane-inspect-hidden .l-object-and-inspector .pane.left {
right: 22px !important; } right: 22px !important; }
/* line 423, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 425, ../../../../general/res/sass/user-environ/_layout.scss */
.pane:not(.resizing) { .pane:not(.resizing) {
-moz-transition-property: width, left, right; -moz-transition-property: width, left, right;
-o-transition-property: width, left, right; -o-transition-property: width, left, right;
@ -5058,117 +5073,139 @@ span.req {
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/* line 23, ../../../../general/res/sass/search/_search.scss */ /*.abs.search-holder {
.abs.search-holder, .search-holder.l-inspect, .l-datetime-picker .l-month-year-pager .search-holder.pager, //@include test(#990000);
.l-datetime-picker .l-month-year-pager .search-holder.val, .s-menu-btn span.search-holder.l-click-area { height: $treeSearchInputBarH;
height: 25px;
bottom: 0; bottom: 0;
top: 23px; &.active {
z-index: 5; }
/* line 27, ../../../../general/res/sass/search/_search.scss */
.abs.search-holder.active, .search-holder.active.l-inspect, .l-datetime-picker .l-month-year-pager .search-holder.active.pager,
.l-datetime-picker .l-month-year-pager .search-holder.active.val, .s-menu-btn span.search-holder.active.l-click-area {
height: auto; height: auto;
bottom: 0; } bottom: 0;
}
top: 23px;
// Align with the top of the divider bar, below create button
//margin-top: 10px; // CH comment out
z-index:5;
}*/
/* line 38, ../../../../general/res/sass/search/_search.scss */ /* line 38, ../../../../general/res/sass/search/_search.scss */
.search { .holder-search {
display: flex; height: 24px; }
display: -webkit-flex; /* line 42, ../../../../general/res/sass/search/_search.scss */
flex-direction: column; .holder-search .search-bar {
-webkit-flex-direction: column;
height: 100%; }
/* line 48, ../../../../general/res/sass/search/_search.scss */
.search .search-bar {
font-size: 0.8em; font-size: 0.8em;
max-width: 250px; max-width: 250px;
position: relative; position: relative; }
width: 100%; } /* line 51, ../../../../general/res/sass/search/_search.scss */
/* line 60, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .search-input {
.search .search-bar .search-input {
height: 25px; height: 25px;
line-height: 25px; line-height: 25px; }
padding-top: 0; /* line 56, ../../../../general/res/sass/search/_search.scss */
padding-bottom: 0; } .holder-search .search-bar:before,
/* line 67, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .clear-icon,
.search .search-bar .search-icon, .holder-search .search-bar .menu-icon {
.search .search-bar .clear-icon,
.search .search-bar .menu-icon {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
color: #a6a6a6; color: #a6a6a6;
font-family: symbolsfont;
height: 17px; height: 17px;
width: 17px; width: 17px;
line-height: 17px; line-height: 17px;
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 4px; } top: 4px; }
/* line 80, ../../../../general/res/sass/search/_search.scss */ /* line 70, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .clear-icon, .holder-search .search-bar .clear-icon,
.search .search-bar .menu-icon { .holder-search .search-bar .menu-icon {
cursor: pointer; cursor: pointer;
-moz-transition: color, 0.25s; -moz-transition-property: opacity, color;
-o-transition: color, 0.25s; -o-transition-property: opacity, color;
-webkit-transition: color, 0.25s; -webkit-transition-property: opacity, color;
transition: color, 0.25s; } transition-property: opacity, color;
/* line 87, ../../../../general/res/sass/search/_search.scss */ -moz-transition-duration: 150ms;
.search .search-bar .search-input { -o-transition-duration: 150ms;
-webkit-transition-duration: 150ms;
transition-duration: 150ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0; }
/* line 77, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input {
position: relative; position: relative;
width: 100%; width: 100%;
padding-left: 22px !important; padding-left: 22px !important;
padding-right: 44px !important; } padding-right: 44px !important; }
/* line 94, ../../../../general/res/sass/search/_search.scss */ /* line 84, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .search-input input { .holder-search .search-bar .search-input input {
width: 100%; } width: inherit; }
/* line 99, ../../../../general/res/sass/search/_search.scss */ /* line 89, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .search-icon { .holder-search .search-bar:before {
content: '\4d';
left: 3px; left: 3px;
transition: visibility .15s, opacity .15s, color .2s; -moz-transition-property: color;
-o-transition-property: color;
-webkit-transition-property: color;
transition-property: color;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
pointer-events: none; } pointer-events: none; }
/* line 119, ../../../../general/res/sass/search/_search.scss */ /* line 98, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .search-input:hover + div.search-icon { .holder-search .search-bar:hover:before {
color: #8c8c8c; } color: #8c8c8c; }
/* line 123, ../../../../general/res/sass/search/_search.scss */ /* line 102, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .clear-icon { .holder-search .search-bar .clear-icon {
right: 22px; right: 22px;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0; }
transition: visibility .15s, opacity .15s, color .2s; } /* line 104, ../../../../general/res/sass/search/_search.scss */
/* line 132, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .clear-icon:before {
.search .search-bar .clear-icon.content { content: '\e607'; }
/* line 110, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }
/* line 137, ../../../../general/res/sass/search/_search.scss */ /* line 115, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .clear-icon:hover { .holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; } color: #8c8c8c; }
/* line 142, ../../../../general/res/sass/search/_search.scss */ /* line 120, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .menu-icon { .holder-search .search-bar .menu-icon {
font-size: 0.8em; font-size: 0.8em;
padding-right: 4px; padding-right: 4px;
right: 4px; right: 4px;
text-align: right; } text-align: right; }
/* line 148, ../../../../general/res/sass/search/_search.scss */ /* line 122, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .menu-icon:hover { .holder-search .search-bar .menu-icon:before {
content: '\76'; }
/* line 128, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; } color: #8c8c8c; }
/* line 153, ../../../../general/res/sass/search/_search.scss */ /* line 133, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .search-menu-holder { .holder-search .search-bar .search-menu-holder {
float: right; float: right;
left: -20px; left: -20px;
z-index: 1; z-index: 1;
transition: visibility .05s, opacity .05s; } transition: visibility .05s, opacity .05s; }
/* line 163, ../../../../general/res/sass/search/_search.scss */ /* line 139, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .search-menu-holder.off { .holder-search .search-bar .search-menu-holder.off {
visibility: hidden; visibility: hidden;
opacity: 0; } opacity: 0; }
/* line 170, ../../../../general/res/sass/search/_search.scss */ /* line 154, ../../../../general/res/sass/search/_search.scss */
.search .search-bar .menu-icon:hover + div.search-menu-holder { .holder-search .active-filter-display {
visibility: visible; }
/* line 173, ../../../../general/res/sass/search/_search.scss */
.search .search-bar div.search-menu-holder:hover {
visibility: visible; }
/* line 178, ../../../../general/res/sass/search/_search.scss */
.search .active-filter-display {
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
@ -5180,43 +5217,33 @@ span.req {
padding-left: 1.4625em; padding-left: 1.4625em;
font-size: 0.65em; font-size: 0.65em;
margin-top: 3px; } margin-top: 3px; }
/* line 193, ../../../../general/res/sass/search/_search.scss */ /* line 167, ../../../../general/res/sass/search/_search.scss */
.search .active-filter-display .clear-filters-icon { .holder-search .active-filter-display .clear-filters-icon {
color: #a6a6a6; color: #a6a6a6;
opacity: 1; opacity: 1;
font-size: 0.8em; font-size: 0.8em;
position: absolute; position: absolute;
left: 1px; left: 1px;
cursor: pointer; } cursor: pointer; }
/* line 205, ../../../../general/res/sass/search/_search.scss */ /* line 178, ../../../../general/res/sass/search/_search.scss */
.search .active-filter-display.off { .holder-search .active-filter-display.off {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
height: 0; height: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; } border: 0; }
/* line 215, ../../../../general/res/sass/search/_search.scss */ /* line 189, ../../../../general/res/sass/search/_search.scss */
.search .search-scroll { .holder-search .search-scroll .load-more-button {
order: 3; -moz-transform: translateX(-50%);
margin-top: 4px; -ms-transform: translateX(-50%);
overflow-y: auto; -webkit-transform: translateX(-50%);
top: auto; transform: translateX(-50%);
height: auto; display: inline-block;
max-height: 100%; margin-top: 5px;
position: relative; } padding: 0 10px;
/* line 226, ../../../../general/res/sass/search/_search.scss */ font-size: 0.75em;
.search .search-scroll .load-icon { margin-left: 50%;
position: relative; }
/* line 230, ../../../../general/res/sass/search/_search.scss */
.search .search-scroll .load-more-button {
margin-top: 5px 0;
font-size: 0.8em;
position: relative;
left: 50%;
margin-left: -45px;
text-align: center;
width: 90px;
white-space: nowrap; } white-space: nowrap; }
@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) { @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) {

49
platform/search/res/templates/search.html
View File

@ -19,38 +19,23 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="search" <div class="l-flex-col flex-elem grows holder holder-search" ng-controller="SearchController as controller">
ng-controller="SearchController as controller">
<!-- Search bar --> <!-- Search bar -->
<div class="search-bar" <div class="search-bar flex-elem" ng-controller="ClickAwayController as toggle">
ng-controller="ClickAwayController as toggle">
<!-- Input field --> <!-- Input field -->
<input class="search-input" <input class="search-input"
type="text" type="text"
ng-model="ngModel.input" ng-model="ngModel.input"
ng-keyup="controller.search()" /> ng-keyup="controller.search()" />
<!-- Search icon -->
<!-- ui symbols for search are 'd' and 'M' -->
<div class="ui-symbol search-icon"
ng-class="{content: !(ngModel.input === '' || ngModel.input === undefined)}">
M
</div>
<!-- Clear icon/button 'x' --> <!-- Clear icon/button 'x' -->
<a class="ui-symbol clear-icon" <a class="clear-icon"
ng-class="{content: !(ngModel.input === '' || ngModel.input === undefined)}" ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
ng-click="ngModel.input = ''; controller.search()"> ng-click="ngModel.input = ''; controller.search()"></a>
&#xe607;
</a>
<!-- Menu icon/button 'v' --> <!-- Menu icon/button 'v' -->
<a class="ui-symbol menu-icon" <a class="menu-icon"
ng-click="toggle.toggle()"> ng-click="toggle.toggle()"></a>
v
</a>
<!-- Menu --> <!-- Menu -->
<mct-include key="'search-menu'" <mct-include key="'search-menu'"
@ -62,7 +47,7 @@
</div> </div>
<!-- Active filter display --> <!-- Active filter display -->
<div class="active-filter-display" <div class="active-filter-display flex-elem"
ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}" ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}"
ng-controller="SearchMenuController as menuController"> ng-controller="SearchMenuController as menuController">
@ -76,7 +61,7 @@
</div> </div>
<!-- This div exists to determine scroll bar location --> <!-- This div exists to determine scroll bar location -->
<div class="search-scroll abs"> <div class="search-scroll flex-elem grows vscroll" ng-class="{ loading: loading }">
<!-- Results list --> <!-- Results list -->
<div class="results"> <div class="results">
@ -87,22 +72,8 @@
</mct-representation> </mct-representation>
</div> </div>
<!-- Loading icon -->
<div class="load-icon"
ng-class="{loading: loading}"
ng-if="loading">
<span class="icon wait-spinner"></span>
<span class="title-label">Loading...</span>
</div>
<!-- Load more button --> <!-- Load more button -->
<div ng-if="controller.areMore()"> <a class="load-more-button s-btn vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
<a class="load-more-button s-btn vsm"
ng-click="controller.loadMore()">
More Results
</a>
</div>
</div> </div>
</div> </div>