ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 05:07:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Cleanups and enhancements to search

Browse Source 
open #250
Fixed margin/spacing problems with results element;
Added transition to results display;
Begin adding # results found / no results messaging;
Moved class .off to _globals.scss;
This commit is contained in:
Charles Hacskaylo 2015-11-05 17:04:19 -08:00
parent c0ac3a0f96
commit 063e97fcb5
6 changed files with 415 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -101,6 +101,7 @@
.flex-elem {
//@include test(green, 0.1);
min-height: 0; // Needed to allow element to shrink within parent
position: relative;
&:not(.grows) {
@include flex(0 0 auto);
}

10
platform/commonUI/general/res/sass/_global.scss
View File

@ -142,6 +142,16 @@ mct-container {
display: none !important;
}
.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
margin: 0 !important;
}
.sep {
color: rgba(#fff, 0.2);
}

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

@ -23,7 +23,7 @@
/*.abs.search-holder {
//@include test(#990000);
height: $treeSearchInputBarH;
bottom: 0;
bottom: 0;s
&.active {
height: auto;
bottom: 0;
@ -35,9 +35,22 @@
z-index:5;
}*/
.clear-icon,
.menu-icon {
cursor: pointer;
font-family: symbolsfont;
@include trans-prop-nice((opacity, color), 150ms);
}
.clear-icon {
// 'x' in circle icon
&:before {
content: '\e607';
}
}
.holder-search {
$iconWidth: 20px;
height: $ueTopBarH;
.search-bar {
$textInputHeight: 19px; // This is equal to the default value, 19px
@ -58,7 +71,6 @@
.menu-icon {
@include box-sizing(border-box);
color: $colorInputIcon;
font-family: symbolsfont;
height: $iconD;
width: $iconD;
line-height: $iconD;
@ -67,13 +79,6 @@
top: $iconEdgeM;
}
.clear-icon,
.menu-icon {
cursor: pointer;
@include trans-prop-nice((opacity, color), 150ms);
}
.search-input {
position: relative;
width: 100%;
@ -89,6 +94,7 @@
&:before {
// Magnify glass icon
content:'\4d';
font-family: symbolsfont;
left: $interiorMarginSm;
@include trans-prop-nice(color, 250ms);
pointer-events: none;
@ -100,8 +106,6 @@
}
.clear-icon {
// 'x' in circle icon
&:before { content: '\e607'; }
right: $iconD + $interiorMargin;
// Icon is visible only when there is text input
@ -133,13 +137,8 @@
.search-menu-holder {
float: right;
left: -20px;
z-index: 1;
z-index: 3;
transition: visibility .05s, opacity .05s;
&.off {
visibility: hidden;
opacity: 0;
}
}
//// Hovering reveals menu
@ -155,13 +154,13 @@
//order: 2;
$s: 0.65em;
$p: $interiorMargin;
@include border-radius($basicCr);
//@include border-radius($basicCr);
@include box-sizing(border-box);
line-height: 130%;
padding: $p 0;
//padding: $p 0;
padding-left: $s * 2.25;
font-size: $s;
margin-top: $interiorMarginSm;
//margin-top: $interiorMarginSm;
.clear-filters-icon {
@ -175,17 +174,22 @@
// Transition looks weird when the results list has none
//transition: visibility .2s, opacity .2s;
&.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
}
}
.search-scroll {
.search-results {
@include trans-prop-nice((opacity, visibility), 250ms);
//visibility: hidden;
//opacity: 0;
.hint {
margin-bottom: $interiorMarginLg;
font-size: 0.65em;
opacity: 0.6;
//padding: 0 $interiorMargin;
}
&.active {
visibility: visible;
opacity: 1;
}
.load-more-button {
@include transform(translateX(-50%));
display: inline-block;

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

@ -517,18 +517,19 @@ mct-container {
/* 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 */
min-height: 0;
position: relative; }
/* line 105, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows),
.l-flex-col .flex-elem:not(.grows) {
-webkit-flex: 0 0 auto;
flex: 0 0 auto; }
/* line 107, ../../../../general/res/sass/_archetypes.scss */
/* line 108, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows,
.l-flex-col .flex-elem.grows {
-webkit-flex: 1 1 auto;
flex: 1 1 auto; }
/* line 111, ../../../../general/res/sass/_archetypes.scss */
/* line 112, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container,
.l-flex-col .flex-container {
display: -webkit-flex;
@ -539,28 +540,28 @@ mct-container {
flex: 1 1 auto;
min-height: 0; }
/* line 120, ../../../../general/res/sass/_archetypes.scss */
/* line 121, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row, .l-flex {
-webkit-flex-direction: row;
flex-direction: row; }
/* line 122, ../../../../general/res/sass/_archetypes.scss */
/* line 123, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container {
-webkit-flex-direction: row;
flex-direction: row; }
/* line 125, ../../../../general/res/sass/_archetypes.scss */
/* line 126, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col {
-webkit-flex-direction: column;
flex-direction: column; }
/* line 128, ../../../../general/res/sass/_archetypes.scss */
/* line 129, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-elem:not(:first-child) {
margin-top: 10px; }
/* line 130, ../../../../general/res/sass/_archetypes.scss */
/* line 131, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-container {
-webkit-flex-direction: column;
flex-direction: column; }
/* line 135, ../../../../general/res/sass/_archetypes.scss */
/* line 136, ../../../../general/res/sass/_archetypes.scss */
.l-flex .left {
-webkit-flex: 1 1 0;
flex: 1 1 0;
@ -5154,7 +5155,7 @@ span.req {
/*.abs.search-holder {
//@include test(#990000);
height: $treeSearchInputBarH;
bottom: 0;
bottom: 0;s
&.active {
height: auto;
bottom: 0;
@ -5166,153 +5167,177 @@ span.req {
z-index:5;
}*/
/* line 38, ../../../../general/res/sass/search/_search.scss */
.holder-search {
height: 24px; }
/* line 42, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar {
font-size: 0.8em;
max-width: 250px;
position: relative; }
/* line 51, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input {
height: 25px;
line-height: 25px; }
/* line 56, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before,
.holder-search .search-bar .clear-icon,
.holder-search .search-bar .menu-icon {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #737373;
font-family: symbolsfont;
height: 17px;
width: 17px;
line-height: 17px;
position: absolute;
text-align: center;
top: 4px; }
/* line 70, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon,
.holder-search .search-bar .menu-icon {
cursor: pointer;
-moz-transition-property: opacity, color;
-o-transition-property: opacity, color;
-webkit-transition-property: opacity, color;
transition-property: opacity, color;
-moz-transition-duration: 150ms;
-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;
width: 100%;
padding-left: 22px !important;
padding-right: 44px !important; }
/* line 84, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input input {
width: inherit; }
/* line 89, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before {
content: '\4d';
left: 3px;
-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; }
/* line 98, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before {
color: #8c8c8c; }
/* line 102, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon {
right: 22px;
visibility: hidden;
opacity: 0; }
/* line 104, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:before {
content: '\e607'; }
/* line 110, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show {
visibility: visible;
opacity: 1; }
/* line 115, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; }
/* line 120, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon {
font-size: 0.8em;
padding-right: 4px;
right: 4px;
text-align: right; }
/* line 122, ../../../../general/res/sass/search/_search.scss */
.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; }
/* line 133, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder {
float: right;
left: -20px;
z-index: 1;
transition: visibility .05s, opacity .05s; }
/* line 139, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder.off {
visibility: hidden;
opacity: 0; }
/* line 154, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
.clear-icon,
.menu-icon {
cursor: pointer;
font-family: symbolsfont;
-moz-transition-property: opacity, color;
-o-transition-property: opacity, color;
-webkit-transition-property: opacity, color;
transition-property: opacity, color;
-moz-transition-duration: 150ms;
-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 47, ../../../../general/res/sass/search/_search.scss */
.clear-icon:before {
content: '\e607'; }
/* line 52, ../../../../general/res/sass/search/_search.scss */
.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
margin: 0 !important; }
/* line 65, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar {
font-size: 0.8em;
max-width: 250px;
position: relative; }
/* line 74, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input {
height: 25px;
line-height: 25px; }
/* line 79, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before,
.holder-search .search-bar .clear-icon,
.holder-search .search-bar .menu-icon {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 130%;
padding: 5px 0;
padding-left: 1.4625em;
font-size: 0.65em;
margin-top: 3px; }
/* line 167, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display .clear-filters-icon {
color: #737373;
opacity: 1;
font-size: 0.8em;
position: absolute;
left: 1px;
cursor: pointer; }
/* line 178, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display.off {
color: #737373;
height: 17px;
width: 17px;
line-height: 17px;
position: absolute;
text-align: center;
top: 4px; }
/* line 92, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input {
position: relative;
width: 100%;
padding-left: 22px !important;
padding-right: 44px !important; }
/* line 99, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input input {
width: inherit; }
/* line 104, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before {
content: '\4d';
font-family: symbolsfont;
left: 3px;
-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; }
/* line 114, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before {
color: #8c8c8c; }
/* line 118, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon {
right: 22px;
visibility: hidden;
opacity: 0; }
/* line 124, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show {
visibility: visible;
opacity: 1; }
/* line 129, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; }
/* line 134, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon {
font-size: 0.8em;
padding-right: 4px;
right: 4px;
text-align: right; }
/* line 136, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:before {
content: '\76'; }
/* line 142, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; }
/* line 147, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder {
float: right;
left: -20px;
z-index: 3;
transition: visibility .05s, opacity .05s; }
/* line 153, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0; }
/* line 189, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-scroll .load-more-button {
opacity: 0; }
/* line 168, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 130%;
padding-left: 1.4625em;
font-size: 0.65em; }
/* line 181, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display .clear-filters-icon {
color: #737373;
opacity: 1;
font-size: 0.8em;
position: absolute;
left: 1px;
cursor: pointer; }
/* line 194, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results {
-moz-transition-property: opacity, visibility;
-o-transition-property: opacity, visibility;
-webkit-transition-property: opacity, visibility;
transition-property: opacity, visibility;
-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; }
/* line 198, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .hint {
margin-bottom: 10px;
font-size: 0.65em;
opacity: 0.6; }
/* line 204, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results.active {
visibility: visible;
opacity: 1; }
/* line 208, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .load-more-button {
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);

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

@ -517,18 +517,19 @@ mct-container {
/* 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 */
min-height: 0;
position: relative; }
/* line 105, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows),
.l-flex-col .flex-elem:not(.grows) {
-webkit-flex: 0 0 auto;
flex: 0 0 auto; }
/* line 107, ../../../../general/res/sass/_archetypes.scss */
/* line 108, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows,
.l-flex-col .flex-elem.grows {
-webkit-flex: 1 1 auto;
flex: 1 1 auto; }
/* line 111, ../../../../general/res/sass/_archetypes.scss */
/* line 112, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container,
.l-flex-col .flex-container {
display: -webkit-flex;
@ -539,28 +540,28 @@ mct-container {
flex: 1 1 auto;
min-height: 0; }
/* line 120, ../../../../general/res/sass/_archetypes.scss */
/* line 121, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row, .l-flex {
-webkit-flex-direction: row;
flex-direction: row; }
/* line 122, ../../../../general/res/sass/_archetypes.scss */
/* line 123, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container {
-webkit-flex-direction: row;
flex-direction: row; }
/* line 125, ../../../../general/res/sass/_archetypes.scss */
/* line 126, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col {
-webkit-flex-direction: column;
flex-direction: column; }
/* line 128, ../../../../general/res/sass/_archetypes.scss */
/* line 129, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-elem:not(:first-child) {
margin-top: 10px; }
/* line 130, ../../../../general/res/sass/_archetypes.scss */
/* line 131, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-container {
-webkit-flex-direction: column;
flex-direction: column; }
/* line 135, ../../../../general/res/sass/_archetypes.scss */
/* line 136, ../../../../general/res/sass/_archetypes.scss */
.l-flex .left {
-webkit-flex: 1 1 0;
flex: 1 1 0;
@ -5076,7 +5077,7 @@ span.req {
/*.abs.search-holder {
//@include test(#990000);
height: $treeSearchInputBarH;
bottom: 0;
bottom: 0;s
&.active {
height: auto;
bottom: 0;
@ -5088,153 +5089,177 @@ span.req {
z-index:5;
}*/
/* line 38, ../../../../general/res/sass/search/_search.scss */
.holder-search {
height: 24px; }
/* line 42, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar {
font-size: 0.8em;
max-width: 250px;
position: relative; }
/* line 51, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input {
height: 25px;
line-height: 25px; }
/* line 56, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before,
.holder-search .search-bar .clear-icon,
.holder-search .search-bar .menu-icon {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #a6a6a6;
font-family: symbolsfont;
height: 17px;
width: 17px;
line-height: 17px;
position: absolute;
text-align: center;
top: 4px; }
/* line 70, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon,
.holder-search .search-bar .menu-icon {
cursor: pointer;
-moz-transition-property: opacity, color;
-o-transition-property: opacity, color;
-webkit-transition-property: opacity, color;
transition-property: opacity, color;
-moz-transition-duration: 150ms;
-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;
width: 100%;
padding-left: 22px !important;
padding-right: 44px !important; }
/* line 84, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input input {
width: inherit; }
/* line 89, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before {
content: '\4d';
left: 3px;
-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; }
/* line 98, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before {
color: #8c8c8c; }
/* line 102, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon {
right: 22px;
visibility: hidden;
opacity: 0; }
/* line 104, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:before {
content: '\e607'; }
/* line 110, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show {
visibility: visible;
opacity: 1; }
/* line 115, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; }
/* line 120, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon {
font-size: 0.8em;
padding-right: 4px;
right: 4px;
text-align: right; }
/* line 122, ../../../../general/res/sass/search/_search.scss */
.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; }
/* line 133, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder {
float: right;
left: -20px;
z-index: 1;
transition: visibility .05s, opacity .05s; }
/* line 139, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder.off {
visibility: hidden;
opacity: 0; }
/* line 154, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
.clear-icon,
.menu-icon {
cursor: pointer;
font-family: symbolsfont;
-moz-transition-property: opacity, color;
-o-transition-property: opacity, color;
-webkit-transition-property: opacity, color;
transition-property: opacity, color;
-moz-transition-duration: 150ms;
-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 47, ../../../../general/res/sass/search/_search.scss */
.clear-icon:before {
content: '\e607'; }
/* line 52, ../../../../general/res/sass/search/_search.scss */
.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
margin: 0 !important; }
/* line 65, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar {
font-size: 0.8em;
max-width: 250px;
position: relative; }
/* line 74, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input {
height: 25px;
line-height: 25px; }
/* line 79, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before,
.holder-search .search-bar .clear-icon,
.holder-search .search-bar .menu-icon {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 130%;
padding: 5px 0;
padding-left: 1.4625em;
font-size: 0.65em;
margin-top: 3px; }
/* line 167, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display .clear-filters-icon {
color: #a6a6a6;
opacity: 1;
font-size: 0.8em;
position: absolute;
left: 1px;
cursor: pointer; }
/* line 178, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display.off {
color: #a6a6a6;
height: 17px;
width: 17px;
line-height: 17px;
position: absolute;
text-align: center;
top: 4px; }
/* line 92, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input {
position: relative;
width: 100%;
padding-left: 22px !important;
padding-right: 44px !important; }
/* line 99, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input input {
width: inherit; }
/* line 104, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before {
content: '\4d';
font-family: symbolsfont;
left: 3px;
-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; }
/* line 114, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before {
color: #8c8c8c; }
/* line 118, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon {
right: 22px;
visibility: hidden;
opacity: 0; }
/* line 124, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show {
visibility: visible;
opacity: 1; }
/* line 129, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; }
/* line 134, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon {
font-size: 0.8em;
padding-right: 4px;
right: 4px;
text-align: right; }
/* line 136, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:before {
content: '\76'; }
/* line 142, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; }
/* line 147, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder {
float: right;
left: -20px;
z-index: 3;
transition: visibility .05s, opacity .05s; }
/* line 153, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0; }
/* line 189, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-scroll .load-more-button {
opacity: 0; }
/* line 168, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 130%;
padding-left: 1.4625em;
font-size: 0.65em; }
/* line 181, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display .clear-filters-icon {
color: #a6a6a6;
opacity: 1;
font-size: 0.8em;
position: absolute;
left: 1px;
cursor: pointer; }
/* line 194, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results {
-moz-transition-property: opacity, visibility;
-o-transition-property: opacity, visibility;
-webkit-transition-property: opacity, visibility;
transition-property: opacity, visibility;
-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; }
/* line 198, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .hint {
margin-bottom: 10px;
font-size: 0.65em;
opacity: 0.6; }
/* line 204, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results.active {
visibility: visible;
opacity: 1; }
/* line 208, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .load-more-button {
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);

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

@ -51,27 +51,24 @@
ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}"
ng-controller="SearchMenuController as menuController">
<a class="ui-symbol clear-filters-icon"
ng-click="ngModel.checkAll = true; menuController.checkAll()">
&#xe607;
</a>
Filtered by: {{ ngModel.filtersString }}
<a class="clear-icon clear-filters-icon"
ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
</div>
<!-- This div exists to determine scroll bar location -->
<div class="search-scroll flex-elem grows vscroll" ng-class="{ loading: loading }">
<div class="search-results flex-elem grows vscroll"
ng-class="{ off: !(loading || results.length > 0), loading: loading }">
<!-- Results list -->
<div class="results">
<mct-representation key="'search-item'"
ng-repeat="result in results"
mct-object="result.object"
ng-model="ngModel">
</mct-representation>
</div>
<!--ng-hide="(ngModel.input === '' || ngModel.input === undefined)"-->
<!--<div class="hint" ng-show="results.length === 0">No results found</div>-->
<!--<div class="hint" ng-show="results.length > 0">Displaying {{ results.length }} result<span ng-show="results.length > 1">s</span></div>-->
<mct-representation key="'search-item'"
ng-repeat="result in results"
mct-object="result.object"
ng-model="ngModel">
</mct-representation>
<!-- Load more button -->
<a class="load-more-button s-btn vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
</div>