alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Refinements to Inspector elements, search inputs

Browse Source 
open #199
open #279
Treeview indent removed;
Significant refactoring of search classes to generalize
approach to search inputs;
This commit is contained in:
Charles Hacskaylo
2015-11-16 17:20:15 -08:00
parent 966e993c5d
commit a8d563975a
11 changed files with 476 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
platform/commonUI/general/res/sass/_inspector.scss
View File

@@ -122,6 +122,10 @@
.holder-elements { .holder-elements {
.current-elements { .current-elements {
position: relative; position: relative;
.tree-item .t-object-label {
// Elements pool is a flat list, so don't indent items.
left: 0;
}
} }
} }
} }

6
platform/commonUI/general/res/sass/_mixins.scss
View File

@@ -315,11 +315,11 @@
} }
} }
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) { @mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
@include appearance(none); @include appearance(none);
@include border-radius($controlCr); @include border-radius($controlCr);
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(inset rgba(black, 0.4) 0 1px 3px); @include box-shadow(inset $shdw);
background: $bg; background: $bg;
border: none; border: none;
color: $fg; color: $fg;
@@ -329,7 +329,7 @@
} }
} }
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) { @mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) {
@include input-base($bg, $fg); @include input-base($bg, $fg);
padding: 0 $interiorMarginSm; padding: 0 $interiorMarginSm;
} }

7
platform/commonUI/general/res/sass/forms/_elems.scss
View File

@@ -112,7 +112,7 @@
.selector-list { .selector-list {
// Used in create overlay to display tree view // Used in create overlay to display tree view
@include nice-input($colorInputBg, $colorInputFg); @include nice-input();
$h: 150px; $h: 150px;
//@include border-radius($basicCr); //@include border-radius($basicCr);
//@include box-sizing(border-box); //@include box-sizing(border-box);
@@ -162,8 +162,9 @@ label.form-control.checkbox {
} }
} }
input[type="text"] { input[type="text"],
@include nice-input($colorInputBg, $colorInputFg); input[type="search"] {
@include nice-input();
&.filter { &.filter {
&.ng-dirty { &.ng-dirty {
// background: red; // background: red;

85
platform/commonUI/general/res/sass/forms/_filter.scss
View File

@@ -21,13 +21,9 @@
*****************************************************************************/ *****************************************************************************/
.filter, .filter,
.t-filter { .t-filter {
input.filter,
input.t-filter-input { input.t-filter-input {
@include subdued-input(); //height: $formInputH;
} //width: 200px;
input.t-filter-input {
height: $formInputH;
width: 200px;
&:not(.ng-dirty) { &:not(.ng-dirty) {
// TO-DO: Update compass install to support this // TO-DO: Update compass install to support this
// @include input-placeholder { // @include input-placeholder {
@@ -79,12 +75,6 @@
// &:not(ng-dirty) // &:not(ng-dirty)
} }
.l-filter {
// Holds an input and a clear button
display:inline-block;
position: relative;
}
.top-bar { .top-bar {
input.filter { input.filter {
$h: $ueTopBarH; $h: $ueTopBarH;
@@ -101,3 +91,74 @@
font-size: 1.4em; font-size: 1.4em;
} }
} }
.l-filter {
$iconEdgeM: 4px;
$iconD: $formInputH - ($iconEdgeM * 2);
// Adds a magnifying glass before, holds an input and a clear button
display: inline-block;
position: relative;
input[type="search"] {
padding: 2px ($iconD + $interiorMargin);
}
.clear-icon,
.menu-icon,
&:before {
@include box-sizing(border-box);
display: inline-block;
line-height: inherit;
position: absolute;
top: 50%;
@include transform(translateY(-50%));
}
&:before {
// Magnify glass icon
content:'\4d';
left: $interiorMargin;
@include trans-prop-nice(color, 250ms);
pointer-events: none;
}
.clear-icon {
right: $iconEdgeM;
// Icon is visible only when there is text input
visibility: hidden;
opacity: 0;
&.show {
visibility: visible;
opacity: 1;
}
&:hover {
color: pullForward($colorInputIcon, 10%);
}
}
}
.s-filter {
input[type="search"] {
@include input-base();
}
.clear-icon,
.menu-icon,
&:before {
color: $colorInputIcon;
cursor: pointer;
font-family: symbolsfont;
@include trans-prop-nice((opacity, color), 150ms);
}
// Make icon lighten when hovering over search bar
&:hover:before {
color: pullForward($colorInputIcon, 10%);
}
.clear-icon {
// 'x' in circle icon
&:before {
content: '\e607';
}
}
}

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

@@ -20,89 +20,31 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.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 { .holder-search {
$iconWidth: 20px; // Moved a lot of stuff in here to _filter.scss
// to generalize approach to search input controls.
.search-bar { $iconWidth: 20px;
$textInputHeight: 19px; // This is equal to the default value, 19px $textInputHeight: 19px;
$iconEdgeM: 4px; $iconEdgeM: 4px;
$iconD: $treeSearchInputBarH - ($iconEdgeM*2); $iconD: $treeSearchInputBarH - ($iconEdgeM*2);
.search-bar {
font-size: 0.8em; font-size: 0.8em;
max-width: 250px; max-width: 250px;
position: relative; position: relative;
.search-input { input[type="search"] {
height: $treeSearchInputBarH; height: $treeSearchInputBarH;
line-height: $treeSearchInputBarH; line-height: $treeSearchInputBarH;
}
&:before,
.clear-icon,
.menu-icon {
@include box-sizing(border-box);
color: $colorInputIcon;
height: $iconD;
width: $iconD;
line-height: $iconD;
position: absolute;
text-align: center;
top: $iconEdgeM;
}
.search-input {
position: relative; position: relative;
width: 100%; width: 100%;
padding-left: $iconD + $interiorMargin !important; padding-left: $iconD + $interiorMargin !important;
padding-right: ($iconD * 2) + ($interiorMargin * 2) !important; padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
// Make work for mct-control textfield
input {
width: inherit; // was 100%
}
}
&:before {
// Magnify glass icon
content:'\4d';
font-family: symbolsfont;
left: $interiorMarginSm;
@include trans-prop-nice(color, 250ms);
pointer-events: none;
}
// Make icon lighten when hovering over search bar
&:hover:before {
color: pullForward($colorInputIcon, 10%);
} }
.clear-icon { .clear-icon {
right: $iconD + $interiorMargin; right: $iconD + $interiorMargin;
// Icon is visible only when there is text input
visibility: hidden;
opacity: 0;
&.show {
visibility: visible;
opacity: 1;
}
&:hover {
color: pullForward($colorInputIcon, 10%);
}
} }
.menu-icon { .menu-icon {

10
platform/commonUI/general/res/templates/controls/input-filter.html
View File

@@ -20,15 +20,13 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<!-- look at action-button for example --> <!-- look at action-button for example -->
<span class="t-filter l-filter" <span class="t-filter l-filter s-filter"
ng-controller="GetterSetterController"> ng-controller="GetterSetterController">
<input type="search" <input type="search"
class="t-filter-input" class="t-filter-input"
ng-model="getterSetter.value" ng-model="getterSetter.value"/>
placeholder="Filter..."/> <a class="clear-icon"
<a class="ui-symbol t-a-clear s-a-clear" ng-class="{show: !(getterSetter.value === '' || getterSetter.value === undefined)}"
ng-show="getterSetter.value !== ''"
ng-click="getterSetter.value = ''"> ng-click="getterSetter.value = ''">
x
</a> </a>
</span> </span>

5
platform/commonUI/general/res/templates/object-inspector.html
View File

@@ -20,6 +20,7 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div ng-init="editMode = true;"></div> <div ng-init="editMode = true;"></div>
<span class="l-inspect" ng-controller="ObjectInspectorController as controller"> <span class="l-inspect" ng-controller="ObjectInspectorController as controller">
<div ng-controller="PaneController as modelPaneEdit"> <div ng-controller="PaneController as modelPaneEdit">
<mct-split-pane class='abs contents split-layout' anchor='bottom'> <mct-split-pane class='abs contents split-layout' anchor='bottom'>
@@ -69,7 +70,9 @@
<div class="split-pane-component pane bottom" ng-show="editMode"> <div class="split-pane-component pane bottom" ng-show="editMode">
<div class="abs holder holder-elements l-flex-col"> <div class="abs holder holder-elements l-flex-col">
<em class="flex-elem">Elements</em> <em class="flex-elem">Elements</em>
<div class="filter flex-elem"><input type="text"></div> <mct-include key="'input-filter'"
class="flex-elem">
</mct-include>
<mct-representation <mct-representation
key="'edit-elements'" key="'edit-elements'"
mct-object="domainObject" mct-object="domainObject"

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

@@ -1539,6 +1539,9 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
/* line 123, ../../../../general/res/sass/_inspector.scss */ /* line 123, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements { .l-inspect .holder-elements .current-elements {
position: relative; } position: relative; }
/* line 125, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements .tree-item .t-object-label {
left: 0; }
/********************************* CONTROLS */ /********************************* CONTROLS */
/* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */ /* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */
@@ -3682,7 +3685,7 @@ mct-include.l-time-controller {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.07);
padding: 1px 1px 0 5px; } padding: 1px 1px 0 5px; }
/***************************************************************************** /*****************************************************************************
@@ -3829,10 +3832,10 @@ mct-include.l-time-controller {
-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;
-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -moz-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -webkit-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.07);
border: none; border: none;
color: #cccccc; color: #cccccc;
outline: none; outline: none;
@@ -3879,7 +3882,8 @@ label.form-control.checkbox input {
padding: 5px; } padding: 5px; }
/* line 165, ../../../../general/res/sass/forms/_elems.scss */ /* line 165, ../../../../general/res/sass/forms/_elems.scss */
input[type="text"] { input[type="text"],
input[type="search"] {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@@ -3888,22 +3892,24 @@ input[type="text"] {
-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;
-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -moz-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -webkit-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.07);
border: none; border: none;
color: #cccccc; color: #cccccc;
outline: none; outline: none;
padding: 0 3px; } padding: 0 3px; }
/* line 327, ../../../../general/res/sass/_mixins.scss */ /* line 327, ../../../../general/res/sass/_mixins.scss */
input[type="text"].error { input[type="text"].error,
input[type="search"].error {
background: rgba(255, 0, 0, 0.5); } background: rgba(255, 0, 0, 0.5); }
/* line 172, ../../../../general/res/sass/forms/_elems.scss */ /* line 173, ../../../../general/res/sass/forms/_elems.scss */
input[type="text"].numeric { input[type="text"].numeric,
input[type="search"].numeric {
text-align: right; } text-align: right; }
/* line 177, ../../../../general/res/sass/forms/_elems.scss */ /* line 178, ../../../../general/res/sass/forms/_elems.scss */
textarea { textarea {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
@@ -3913,10 +3919,10 @@ textarea {
-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;
-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -moz-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -webkit-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.07);
border: none; border: none;
color: #cccccc; color: #cccccc;
outline: none; outline: none;
@@ -4058,9 +4064,9 @@ textarea {
-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;
-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -moz-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -webkit-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
background: #333; background: #333;
border: none; border: none;
color: #999; color: #999;
@@ -4215,45 +4221,11 @@ 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 24, ../../../../general/res/sass/forms/_filter.scss */ /* line 34, ../../../../general/res/sass/forms/_filter.scss */
.filter input.filter,
.filter input.t-filter-input,
.t-filter input.filter,
.t-filter input.t-filter-input {
-moz-appearance: none;
-webkit-appearance: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
background: #333;
border: none;
color: #999;
outline: none;
padding: 0 3px;
background: #3b3b3b;
border-bottom: 1px solid #4d4d4d; }
/* line 327, ../../../../general/res/sass/_mixins.scss */
.filter input.filter.error,
.filter input.t-filter-input.error,
.t-filter input.filter.error,
.t-filter input.t-filter-input.error {
background: rgba(255, 0, 0, 0.5); }
/* line 28, ../../../../general/res/sass/forms/_filter.scss */
.filter input.t-filter-input,
.t-filter input.t-filter-input {
height: 22px;
width: 200px; }
/* line 38, ../../../../general/res/sass/forms/_filter.scss */
.filter input.t-filter-input:not(.ng-dirty) + .t-a-clear, .filter input.t-filter-input:not(.ng-dirty) + .t-a-clear,
.t-filter input.t-filter-input:not(.ng-dirty) + .t-a-clear { .t-filter input.t-filter-input:not(.ng-dirty) + .t-a-clear {
display: none; } display: none; }
/* line 42, ../../../../general/res/sass/forms/_filter.scss */ /* line 38, ../../../../general/res/sass/forms/_filter.scss */
.filter .icon.ui-symbol, .filter .t-item-icon, .filter .icon.s-icon-btn, .filter .s-icon-btn.t-item-icon, .filter .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .filter .icon.pager, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon, .filter .icon.ui-symbol, .filter .t-item-icon, .filter .icon.s-icon-btn, .filter .s-icon-btn.t-item-icon, .filter .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .filter .icon.pager, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon,
.t-filter .icon.ui-symbol, .t-filter .icon.ui-symbol,
.t-filter .t-item-icon, .t-filter .t-item-icon,
@@ -4272,7 +4244,7 @@ span.req {
line-height: 22px; line-height: 22px;
padding: 0px 5px; padding: 0px 5px;
vertical-align: middle; } vertical-align: middle; }
/* line 50, ../../../../general/res/sass/forms/_filter.scss */ /* line 46, ../../../../general/res/sass/forms/_filter.scss */
.filter .icon.ui-symbol:hover, .filter .t-item-icon:hover, .filter .icon.s-icon-btn:hover, .filter .s-icon-btn.t-item-icon:hover, .filter .l-datetime-picker .l-month-year-pager .icon.pager:hover, .l-datetime-picker .l-month-year-pager .filter .icon.pager:hover, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon:hover, .filter .icon.ui-symbol:hover, .filter .t-item-icon:hover, .filter .icon.s-icon-btn:hover, .filter .s-icon-btn.t-item-icon:hover, .filter .l-datetime-picker .l-month-year-pager .icon.pager:hover, .l-datetime-picker .l-month-year-pager .filter .icon.pager:hover, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon:hover,
.t-filter .icon.ui-symbol:hover, .t-filter .icon.ui-symbol:hover,
.t-filter .t-item-icon:hover, .t-filter .t-item-icon:hover,
@@ -4283,7 +4255,7 @@ span.req {
.t-filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .t-filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover,
.l-datetime-picker .l-month-year-pager .t-filter .pager.t-item-icon:hover { .l-datetime-picker .l-month-year-pager .t-filter .pager.t-item-icon:hover {
background: rgba(255, 255, 255, 0.1); } background: rgba(255, 255, 255, 0.1); }
/* line 54, ../../../../general/res/sass/forms/_filter.scss */ /* line 50, ../../../../general/res/sass/forms/_filter.scss */
.filter .s-a-clear.ui-symbol, .filter .s-a-clear.t-item-icon, .filter .s-a-clear.s-icon-btn, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager, .filter .s-a-clear.ui-symbol, .filter .s-a-clear.t-item-icon, .filter .s-a-clear.s-icon-btn, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager,
.t-filter .s-a-clear.ui-symbol, .t-filter .s-a-clear.ui-symbol,
.t-filter .s-a-clear.t-item-icon, .t-filter .s-a-clear.t-item-icon,
@@ -4312,7 +4284,7 @@ span.req {
top: 50%; top: 50%;
text-align: center; text-align: center;
z-index: 5; } z-index: 5; }
/* line 74, ../../../../general/res/sass/forms/_filter.scss */ /* line 70, ../../../../general/res/sass/forms/_filter.scss */
.filter .s-a-clear.ui-symbol:hover, .filter .s-a-clear.t-item-icon:hover, .filter .s-a-clear.s-icon-btn:hover, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager:hover, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager:hover, .filter .s-a-clear.ui-symbol:hover, .filter .s-a-clear.t-item-icon:hover, .filter .s-a-clear.s-icon-btn:hover, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager:hover, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager:hover,
.t-filter .s-a-clear.ui-symbol:hover, .t-filter .s-a-clear.ui-symbol:hover,
.t-filter .s-a-clear.t-item-icon:hover, .t-filter .s-a-clear.t-item-icon:hover,
@@ -4323,12 +4295,7 @@ span.req {
opacity: 0.6; opacity: 0.6;
background-color: #0099cc; } background-color: #0099cc; }
/* line 82, ../../../../general/res/sass/forms/_filter.scss */ /* line 79, ../../../../general/res/sass/forms/_filter.scss */
.l-filter {
display: inline-block;
position: relative; }
/* line 89, ../../../../general/res/sass/forms/_filter.scss */
.top-bar input.filter { .top-bar input.filter {
font-size: .9em; font-size: .9em;
height: 24px; height: 24px;
@@ -4337,10 +4304,114 @@ span.req {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
vertical-align: top; } vertical-align: top; }
/* line 100, ../../../../general/res/sass/forms/_filter.scss */ /* line 90, ../../../../general/res/sass/forms/_filter.scss */
.top-bar .icon-filter { .top-bar .icon-filter {
font-size: 1.4em; } font-size: 1.4em; }
/* line 95, ../../../../general/res/sass/forms/_filter.scss */
.l-filter {
display: inline-block;
position: relative; }
/* line 102, ../../../../general/res/sass/forms/_filter.scss */
.l-filter input[type="search"] {
padding: 2px 19px; }
/* line 105, ../../../../general/res/sass/forms/_filter.scss */
.l-filter .clear-icon,
.l-filter .menu-icon, .l-filter:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
line-height: inherit;
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
/* line 116, ../../../../general/res/sass/forms/_filter.scss */
.l-filter:before {
content: '\4d';
left: 5px;
-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 124, ../../../../general/res/sass/forms/_filter.scss */
.l-filter .clear-icon {
right: 4px;
visibility: hidden;
opacity: 0; }
/* line 130, ../../../../general/res/sass/forms/_filter.scss */
.l-filter .clear-icon.show {
visibility: visible;
opacity: 1; }
/* line 135, ../../../../general/res/sass/forms/_filter.scss */
.l-filter .clear-icon:hover {
color: #8c8c8c; }
/* line 142, ../../../../general/res/sass/forms/_filter.scss */
.s-filter input[type="search"] {
-moz-appearance: none;
-webkit-appearance: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
background: rgba(255, 255, 255, 0.07);
border: none;
color: #cccccc;
outline: none; }
/* line 327, ../../../../general/res/sass/_mixins.scss */
.s-filter input[type="search"].error {
background: rgba(255, 0, 0, 0.5); }
/* line 145, ../../../../general/res/sass/forms/_filter.scss */
.s-filter .clear-icon,
.s-filter .menu-icon, .s-filter:before {
color: #737373;
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 154, ../../../../general/res/sass/forms/_filter.scss */
.s-filter:hover:before {
color: #8c8c8c; }
/* line 160, ../../../../general/res/sass/forms/_filter.scss */
.s-filter .clear-icon:before {
content: '\e607'; }
/********************************* USER ENVIRON */ /********************************* USER ENVIRON */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -5215,120 +5286,72 @@ 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 */ /*
// Moved to filter.scss
.clear-icon, .clear-icon,
.menu-icon { .menu-icon {
cursor: pointer; cursor: pointer;
font-family: symbolsfont; font-family: symbolsfont;
-moz-transition-property: opacity, color; @include trans-prop-nice((opacity, color), 150ms);
-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 32, ../../../../general/res/sass/search/_search.scss */ .clear-icon {
.clear-icon:before { // 'x' in circle icon
content: '\e607'; } &:before {
content: '\e607';
/* line 40, ../../../../general/res/sass/search/_search.scss */ }
}
*/
/* line 63, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar { .holder-search .search-bar {
font-size: 0.8em; font-size: 0.8em;
max-width: 250px; max-width: 250px;
position: relative; } position: relative;
/* line 48, ../../../../general/res/sass/search/_search.scss */ /* .clear-icon {
.holder-search .search-bar .search-input { right: $iconD + $interiorMargin;
// Icon is visible only when there is text input
visibility: hidden;
opacity: 0;
&.show {
visibility: visible;
opacity: 1;
}
&:hover {
color: pullForward($colorInputIcon, 10%);
}
}*/ }
/* line 68, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar input[type="search"] {
height: 25px; height: 25px;
line-height: 25px; } line-height: 25px;
/* line 53, ../../../../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;
height: 17px;
width: 17px;
line-height: 17px;
position: absolute;
text-align: center;
top: 4px; }
/* line 66, ../../../../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 73, ../../../../general/res/sass/search/_search.scss */ /* line 133, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input input {
width: inherit; }
/* line 78, ../../../../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 88, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before {
color: #8c8c8c; }
/* line 92, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon { .holder-search .search-bar .clear-icon {
right: 22px; right: 22px; }
visibility: hidden; /* line 137, ../../../../general/res/sass/search/_search.scss */
opacity: 0; }
/* line 98, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show {
visibility: visible;
opacity: 1; }
/* line 103, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; }
/* line 108, ../../../../general/res/sass/search/_search.scss */
.holder-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 110, ../../../../general/res/sass/search/_search.scss */ /* line 139, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:before { .holder-search .search-bar .menu-icon:before {
content: '\76'; } content: '\76'; }
/* line 116, ../../../../general/res/sass/search/_search.scss */ /* line 145, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover { .holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; } color: #8c8c8c; }
/* line 121, ../../../../general/res/sass/search/_search.scss */ /* line 150, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder { .holder-search .search-bar .search-menu-holder {
float: right; float: right;
left: -20px; left: -20px;
z-index: 70; z-index: 70;
transition: visibility .05s, opacity .05s; } transition: visibility .05s, opacity .05s; }
/* line 129, ../../../../general/res/sass/search/_search.scss */ /* line 158, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display { .holder-search .active-filter-display {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@@ -5336,7 +5359,7 @@ span.req {
line-height: 130%; line-height: 130%;
padding-left: 1.4625em; padding-left: 1.4625em;
font-size: 0.65em; } font-size: 0.65em; }
/* line 137, ../../../../general/res/sass/search/_search.scss */ /* line 166, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display .clear-filters-icon { .holder-search .active-filter-display .clear-filters-icon {
color: #737373; color: #737373;
opacity: 1; opacity: 1;
@@ -5344,7 +5367,7 @@ span.req {
position: absolute; position: absolute;
left: 1px; left: 1px;
cursor: pointer; } cursor: pointer; }
/* line 147, ../../../../general/res/sass/search/_search.scss */ /* line 176, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results { .holder-search .search-results {
-moz-transition-property: opacity, visibility; -moz-transition-property: opacity, visibility;
-o-transition-property: opacity, visibility; -o-transition-property: opacity, visibility;
@@ -5364,16 +5387,16 @@ span.req {
transition-delay: 0; transition-delay: 0;
margin-top: 10px; margin-top: 10px;
padding-right: 5px; } padding-right: 5px; }
/* line 151, ../../../../general/res/sass/search/_search.scss */ /* line 180, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .hint { .holder-search .search-results .hint {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 0.65em; font-size: 0.65em;
opacity: 0.6; } opacity: 0.6; }
/* line 156, ../../../../general/res/sass/search/_search.scss */ /* line 185, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results.active { .holder-search .search-results.active {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }
/* line 160, ../../../../general/res/sass/search/_search.scss */ /* line 189, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .load-more-button { .holder-search .search-results .load-more-button {
-moz-transform: translateX(-50%); -moz-transform: translateX(-50%);
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);

2
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@@ -70,7 +70,7 @@ $colorFormError: #cc0000;
$colorFormInvalid: #ff3300; $colorFormInvalid: #ff3300;
$colorFormLines: rgba(#fff, 0.1); $colorFormLines: rgba(#fff, 0.1);
$colorFormSectionHeader: rgba(#000, 0.2); $colorFormSectionHeader: rgba(#000, 0.2);
$colorInputBg: rgba(#fff, 0.1); $colorInputBg: rgba(#fff, 0.07);
$colorInputFg: pullForward($colorBodyFg, 20%); $colorInputFg: pullForward($colorBodyFg, 20%);
$colorFormText: rgba(#fff, 0.5); $colorFormText: rgba(#fff, 0.5);
$colorInputIcon: pushBack($colorBodyFg, 15%); $colorInputIcon: pushBack($colorBodyFg, 15%);

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

@@ -1520,6 +1520,9 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
/* line 123, ../../../../general/res/sass/_inspector.scss */ /* line 123, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements { .l-inspect .holder-elements .current-elements {
position: relative; } position: relative; }
/* line 125, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements .tree-item .t-object-label {
left: 0; }
/********************************* CONTROLS */ /********************************* CONTROLS */
/* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */ /* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */
@@ -3768,9 +3771,9 @@ mct-include.l-time-controller {
-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;
-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -moz-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -webkit-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
background: #fff; background: #fff;
border: none; border: none;
color: #666; color: #666;
@@ -3818,7 +3821,8 @@ label.form-control.checkbox input {
padding: 5px; } padding: 5px; }
/* line 165, ../../../../general/res/sass/forms/_elems.scss */ /* line 165, ../../../../general/res/sass/forms/_elems.scss */
input[type="text"] { input[type="text"],
input[type="search"] {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-border-radius: 4px; -moz-border-radius: 4px;
@@ -3827,22 +3831,24 @@ input[type="text"] {
-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;
-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -moz-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -webkit-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
background: #fff; background: #fff;
border: none; border: none;
color: #666; color: #666;
outline: none; outline: none;
padding: 0 3px; } padding: 0 3px; }
/* line 327, ../../../../general/res/sass/_mixins.scss */ /* line 327, ../../../../general/res/sass/_mixins.scss */
input[type="text"].error { input[type="text"].error,
input[type="search"].error {
background: rgba(255, 0, 0, 0.5); } background: rgba(255, 0, 0, 0.5); }
/* line 172, ../../../../general/res/sass/forms/_elems.scss */ /* line 173, ../../../../general/res/sass/forms/_elems.scss */
input[type="text"].numeric { input[type="text"].numeric,
input[type="search"].numeric {
text-align: right; } text-align: right; }
/* line 177, ../../../../general/res/sass/forms/_elems.scss */ /* line 178, ../../../../general/res/sass/forms/_elems.scss */
textarea { textarea {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
@@ -3852,9 +3858,9 @@ textarea {
-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;
-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -moz-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -webkit-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
background: #fff; background: #fff;
border: none; border: none;
color: #666; color: #666;
@@ -3980,9 +3986,9 @@ textarea {
-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;
-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -moz-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; -webkit-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px; box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
background: #fcfcfc; background: #fcfcfc;
border: none; border: none;
color: #666; color: #666;
@@ -4137,45 +4143,11 @@ 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 24, ../../../../general/res/sass/forms/_filter.scss */ /* line 34, ../../../../general/res/sass/forms/_filter.scss */
.filter input.filter,
.filter input.t-filter-input,
.t-filter input.filter,
.t-filter input.t-filter-input {
-moz-appearance: none;
-webkit-appearance: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
background: #fcfcfc;
border: none;
color: #666;
outline: none;
padding: 0 3px;
background: white;
border-bottom: 1px solid white; }
/* line 327, ../../../../general/res/sass/_mixins.scss */
.filter input.filter.error,
.filter input.t-filter-input.error,
.t-filter input.filter.error,
.t-filter input.t-filter-input.error {
background: rgba(255, 0, 0, 0.5); }
/* line 28, ../../../../general/res/sass/forms/_filter.scss */
.filter input.t-filter-input,
.t-filter input.t-filter-input {
height: 22px;
width: 200px; }
/* line 38, ../../../../general/res/sass/forms/_filter.scss */
.filter input.t-filter-input:not(.ng-dirty) + .t-a-clear, .filter input.t-filter-input:not(.ng-dirty) + .t-a-clear,
.t-filter input.t-filter-input:not(.ng-dirty) + .t-a-clear { .t-filter input.t-filter-input:not(.ng-dirty) + .t-a-clear {
display: none; } display: none; }
/* line 42, ../../../../general/res/sass/forms/_filter.scss */ /* line 38, ../../../../general/res/sass/forms/_filter.scss */
.filter .icon.ui-symbol, .filter .t-item-icon, .filter .icon.s-icon-btn, .filter .s-icon-btn.t-item-icon, .filter .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .filter .icon.pager, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon, .filter .icon.ui-symbol, .filter .t-item-icon, .filter .icon.s-icon-btn, .filter .s-icon-btn.t-item-icon, .filter .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .filter .icon.pager, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon,
.t-filter .icon.ui-symbol, .t-filter .icon.ui-symbol,
.t-filter .t-item-icon, .t-filter .t-item-icon,
@@ -4194,7 +4166,7 @@ span.req {
line-height: 22px; line-height: 22px;
padding: 0px 5px; padding: 0px 5px;
vertical-align: middle; } vertical-align: middle; }
/* line 50, ../../../../general/res/sass/forms/_filter.scss */ /* line 46, ../../../../general/res/sass/forms/_filter.scss */
.filter .icon.ui-symbol:hover, .filter .t-item-icon:hover, .filter .icon.s-icon-btn:hover, .filter .s-icon-btn.t-item-icon:hover, .filter .l-datetime-picker .l-month-year-pager .icon.pager:hover, .l-datetime-picker .l-month-year-pager .filter .icon.pager:hover, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon:hover, .filter .icon.ui-symbol:hover, .filter .t-item-icon:hover, .filter .icon.s-icon-btn:hover, .filter .s-icon-btn.t-item-icon:hover, .filter .l-datetime-picker .l-month-year-pager .icon.pager:hover, .l-datetime-picker .l-month-year-pager .filter .icon.pager:hover, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon:hover,
.t-filter .icon.ui-symbol:hover, .t-filter .icon.ui-symbol:hover,
.t-filter .t-item-icon:hover, .t-filter .t-item-icon:hover,
@@ -4205,7 +4177,7 @@ span.req {
.t-filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .t-filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover,
.l-datetime-picker .l-month-year-pager .t-filter .pager.t-item-icon:hover { .l-datetime-picker .l-month-year-pager .t-filter .pager.t-item-icon:hover {
background: rgba(255, 255, 255, 0.1); } background: rgba(255, 255, 255, 0.1); }
/* line 54, ../../../../general/res/sass/forms/_filter.scss */ /* line 50, ../../../../general/res/sass/forms/_filter.scss */
.filter .s-a-clear.ui-symbol, .filter .s-a-clear.t-item-icon, .filter .s-a-clear.s-icon-btn, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager, .filter .s-a-clear.ui-symbol, .filter .s-a-clear.t-item-icon, .filter .s-a-clear.s-icon-btn, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager,
.t-filter .s-a-clear.ui-symbol, .t-filter .s-a-clear.ui-symbol,
.t-filter .s-a-clear.t-item-icon, .t-filter .s-a-clear.t-item-icon,
@@ -4234,7 +4206,7 @@ span.req {
top: 50%; top: 50%;
text-align: center; text-align: center;
z-index: 5; } z-index: 5; }
/* line 74, ../../../../general/res/sass/forms/_filter.scss */ /* line 70, ../../../../general/res/sass/forms/_filter.scss */
.filter .s-a-clear.ui-symbol:hover, .filter .s-a-clear.t-item-icon:hover, .filter .s-a-clear.s-icon-btn:hover, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager:hover, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager:hover, .filter .s-a-clear.ui-symbol:hover, .filter .s-a-clear.t-item-icon:hover, .filter .s-a-clear.s-icon-btn:hover, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager:hover, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager:hover,
.t-filter .s-a-clear.ui-symbol:hover, .t-filter .s-a-clear.ui-symbol:hover,
.t-filter .s-a-clear.t-item-icon:hover, .t-filter .s-a-clear.t-item-icon:hover,
@@ -4245,12 +4217,7 @@ span.req {
opacity: 0.6; opacity: 0.6;
background-color: #0099cc; } background-color: #0099cc; }
/* line 82, ../../../../general/res/sass/forms/_filter.scss */ /* line 79, ../../../../general/res/sass/forms/_filter.scss */
.l-filter {
display: inline-block;
position: relative; }
/* line 89, ../../../../general/res/sass/forms/_filter.scss */
.top-bar input.filter { .top-bar input.filter {
font-size: .9em; font-size: .9em;
height: 24px; height: 24px;
@@ -4259,10 +4226,114 @@ span.req {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
vertical-align: top; } vertical-align: top; }
/* line 100, ../../../../general/res/sass/forms/_filter.scss */ /* line 90, ../../../../general/res/sass/forms/_filter.scss */
.top-bar .icon-filter { .top-bar .icon-filter {
font-size: 1.4em; } font-size: 1.4em; }
/* line 95, ../../../../general/res/sass/forms/_filter.scss */
.l-filter {
display: inline-block;
position: relative; }
/* line 102, ../../../../general/res/sass/forms/_filter.scss */
.l-filter input[type="search"] {
padding: 2px 19px; }
/* line 105, ../../../../general/res/sass/forms/_filter.scss */
.l-filter .clear-icon,
.l-filter .menu-icon, .l-filter:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
line-height: inherit;
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
/* line 116, ../../../../general/res/sass/forms/_filter.scss */
.l-filter:before {
content: '\4d';
left: 5px;
-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 124, ../../../../general/res/sass/forms/_filter.scss */
.l-filter .clear-icon {
right: 4px;
visibility: hidden;
opacity: 0; }
/* line 130, ../../../../general/res/sass/forms/_filter.scss */
.l-filter .clear-icon.show {
visibility: visible;
opacity: 1; }
/* line 135, ../../../../general/res/sass/forms/_filter.scss */
.l-filter .clear-icon:hover {
color: #8c8c8c; }
/* line 142, ../../../../general/res/sass/forms/_filter.scss */
.s-filter input[type="search"] {
-moz-appearance: none;
-webkit-appearance: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
box-shadow: inset rgba(0, 0, 0, 0.6) 0 1px 3px;
background: #fff;
border: none;
color: #666;
outline: none; }
/* line 327, ../../../../general/res/sass/_mixins.scss */
.s-filter input[type="search"].error {
background: rgba(255, 0, 0, 0.5); }
/* line 145, ../../../../general/res/sass/forms/_filter.scss */
.s-filter .clear-icon,
.s-filter .menu-icon, .s-filter:before {
color: #a6a6a6;
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 154, ../../../../general/res/sass/forms/_filter.scss */
.s-filter:hover:before {
color: #8c8c8c; }
/* line 160, ../../../../general/res/sass/forms/_filter.scss */
.s-filter .clear-icon:before {
content: '\e607'; }
/********************************* USER ENVIRON */ /********************************* USER ENVIRON */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -5137,120 +5208,72 @@ 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 */ /*
// Moved to filter.scss
.clear-icon, .clear-icon,
.menu-icon { .menu-icon {
cursor: pointer; cursor: pointer;
font-family: symbolsfont; font-family: symbolsfont;
-moz-transition-property: opacity, color; @include trans-prop-nice((opacity, color), 150ms);
-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 32, ../../../../general/res/sass/search/_search.scss */ .clear-icon {
.clear-icon:before { // 'x' in circle icon
content: '\e607'; } &:before {
content: '\e607';
/* line 40, ../../../../general/res/sass/search/_search.scss */ }
}
*/
/* line 63, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar { .holder-search .search-bar {
font-size: 0.8em; font-size: 0.8em;
max-width: 250px; max-width: 250px;
position: relative; } position: relative;
/* line 48, ../../../../general/res/sass/search/_search.scss */ /* .clear-icon {
.holder-search .search-bar .search-input { right: $iconD + $interiorMargin;
// Icon is visible only when there is text input
visibility: hidden;
opacity: 0;
&.show {
visibility: visible;
opacity: 1;
}
&:hover {
color: pullForward($colorInputIcon, 10%);
}
}*/ }
/* line 68, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar input[type="search"] {
height: 25px; height: 25px;
line-height: 25px; } line-height: 25px;
/* line 53, ../../../../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;
height: 17px;
width: 17px;
line-height: 17px;
position: absolute;
text-align: center;
top: 4px; }
/* line 66, ../../../../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 73, ../../../../general/res/sass/search/_search.scss */ /* line 133, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input input {
width: inherit; }
/* line 78, ../../../../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 88, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before {
color: #8c8c8c; }
/* line 92, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon { .holder-search .search-bar .clear-icon {
right: 22px; right: 22px; }
visibility: hidden; /* line 137, ../../../../general/res/sass/search/_search.scss */
opacity: 0; }
/* line 98, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show {
visibility: visible;
opacity: 1; }
/* line 103, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; }
/* line 108, ../../../../general/res/sass/search/_search.scss */
.holder-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 110, ../../../../general/res/sass/search/_search.scss */ /* line 139, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:before { .holder-search .search-bar .menu-icon:before {
content: '\76'; } content: '\76'; }
/* line 116, ../../../../general/res/sass/search/_search.scss */ /* line 145, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover { .holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; } color: #8c8c8c; }
/* line 121, ../../../../general/res/sass/search/_search.scss */ /* line 150, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder { .holder-search .search-bar .search-menu-holder {
float: right; float: right;
left: -20px; left: -20px;
z-index: 70; z-index: 70;
transition: visibility .05s, opacity .05s; } transition: visibility .05s, opacity .05s; }
/* line 129, ../../../../general/res/sass/search/_search.scss */ /* line 158, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display { .holder-search .active-filter-display {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@@ -5258,7 +5281,7 @@ span.req {
line-height: 130%; line-height: 130%;
padding-left: 1.4625em; padding-left: 1.4625em;
font-size: 0.65em; } font-size: 0.65em; }
/* line 137, ../../../../general/res/sass/search/_search.scss */ /* line 166, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display .clear-filters-icon { .holder-search .active-filter-display .clear-filters-icon {
color: #a6a6a6; color: #a6a6a6;
opacity: 1; opacity: 1;
@@ -5266,7 +5289,7 @@ span.req {
position: absolute; position: absolute;
left: 1px; left: 1px;
cursor: pointer; } cursor: pointer; }
/* line 147, ../../../../general/res/sass/search/_search.scss */ /* line 176, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results { .holder-search .search-results {
-moz-transition-property: opacity, visibility; -moz-transition-property: opacity, visibility;
-o-transition-property: opacity, visibility; -o-transition-property: opacity, visibility;
@@ -5286,16 +5309,16 @@ span.req {
transition-delay: 0; transition-delay: 0;
margin-top: 10px; margin-top: 10px;
padding-right: 5px; } padding-right: 5px; }
/* line 151, ../../../../general/res/sass/search/_search.scss */ /* line 180, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .hint { .holder-search .search-results .hint {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 0.65em; font-size: 0.65em;
opacity: 0.6; } opacity: 0.6; }
/* line 156, ../../../../general/res/sass/search/_search.scss */ /* line 185, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results.active { .holder-search .search-results.active {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }
/* line 160, ../../../../general/res/sass/search/_search.scss */ /* line 189, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .load-more-button { .holder-search .search-results .load-more-button {
-moz-transform: translateX(-50%); -moz-transform: translateX(-50%);
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);

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

@@ -20,9 +20,8 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="l-flex-col flex-elem grows holder holder-search" ng-controller="SearchController as controller"> <div class="l-flex-col flex-elem grows holder holder-search" ng-controller="SearchController as controller">
<div class="search-bar flex-elem" ng-controller="ClickAwayController as toggle"> <div class="search-bar search-input l-filter s-filter flex-elem" ng-controller="ClickAwayController as toggle">
<input class="search-input" <input type="search"
type="text"
ng-model="ngModel.input" ng-model="ngModel.input"
ng-keyup="controller.search()" /> ng-keyup="controller.search()" />
<a class="clear-icon" <a class="clear-icon"