[Frontend] Styling for search elements

#70
Significant .scss and markup changes across search;
New symbols font (v2.2) char for clear icon;
To-do: style "load more" element;
This commit is contained in:
Charles Hacskaylo 2015-08-18 19:51:47 -07:00
parent e426e0e5ec
commit 4e3e3653a3
15 changed files with 879 additions and 930 deletions

View File

@ -28,7 +28,9 @@
>
<mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation>
<div class='holder search-holder abs'>
<div class='holder search-holder abs'
ng-class="{active: treeModel.search}"
>
<mct-include key="'search'"
mct-object="domainObject"
ng-model="treeModel">

View File

@ -71,6 +71,7 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* CONSTANTS */
/*****************************************************************************
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
@ -92,7 +93,7 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* line 5, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
@ -113,38 +114,38 @@ time, mark, audio, video {
font-size: 100%;
vertical-align: baseline; }
/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1; }
/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none; }
/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0; }
/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none; }
/* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
border: none; }
/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }
@ -644,72 +645,49 @@ mct-container {
position: absolute;
bottom: 5px; }
/* line 232, ../sass/user-environ/_layout.scss */
.pane.treeview.left .search-holder {
top: 34px; }
/* line 235, ../sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder {
overflow: auto;
top: 34px;
padding-right: 5px; }
/* line 240, ../sass/user-environ/_layout.scss */
top: 64px; }
/* line 242, ../sass/user-environ/_layout.scss */
.pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
.pane.items .object-browse-bar .right.abs,
.pane.items .object-browse-bar .btn-menu span.right.l-click-area,
.btn-menu .pane.items .object-browse-bar span.right.l-click-area {
top: auto; }
/* line 245, ../sass/user-environ/_layout.scss */
/* line 247, ../sass/user-environ/_layout.scss */
.pane.items .object-holder {
top: 34px; }
/* line 249, ../sass/user-environ/_layout.scss */
/* line 251, ../sass/user-environ/_layout.scss */
.pane .object-holder {
overflow: auto; }
/* line 257, ../sass/user-environ/_layout.scss */
/* line 259, ../sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane {
margin-top: 5px; }
/* line 260, ../sass/user-environ/_layout.scss */
/* line 262, ../sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child {
margin-top: 0; }
/* line 267, ../sass/user-environ/_layout.scss */
/* line 269, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane {
margin-left: 5px; }
/* line 269, ../sass/user-environ/_layout.scss */
/* line 271, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder {
left: 0;
right: 0; }
/* line 273, ../sass/user-environ/_layout.scss */
/* line 275, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child {
margin-left: 0; }
/* line 275, ../sass/user-environ/_layout.scss */
/* line 277, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder {
right: 3px; }
/* line 284, ../sass/user-environ/_layout.scss */
/* line 286, ../sass/user-environ/_layout.scss */
.vscroll {
overflow-y: auto; }
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* line 26, ../sass/search/_layout.scss */
.pane.treeview.left .tree-holder {
top: 60px; }
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
@ -2593,22 +2571,23 @@ label.checkbox.custom {
color: #d9d9d9;
line-height: 1.4rem;
padding: 3px 10px 3px 30px;
position: relative;
white-space: nowrap; }
/* line 46, ../sass/controls/_menus.scss */
/* line 47, ../sass/controls/_menus.scss */
.menu-element .menu ul li:first-child {
border: none; }
/* line 49, ../sass/controls/_menus.scss */
/* line 50, ../sass/controls/_menus.scss */
.menu-element .menu ul li:hover {
background: #737373;
color: #fff; }
/* line 55, ../sass/controls/_menus.scss */
/* line 56, ../sass/controls/_menus.scss */
.menu-element .menu ul li:hover .icon {
color: #33ccff; }
/* line 63, ../sass/controls/_menus.scss */
/* line 64, ../sass/controls/_menus.scss */
.menu-element .menu ul li .type-icon {
left: 10px; }
/* line 70, ../sass/controls/_menus.scss */
.menu-element .context-menu,
/* line 71, ../sass/controls/_menus.scss */
.menu-element .context-menu, .menu-element .checkbox-menu,
.menu-element .super-menu {
pointer-events: auto;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOGM4YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
@ -2631,35 +2610,56 @@ label.checkbox.custom {
color: #999;
display: inline-block; }
/* line 170, ../sass/_mixins.scss */
.menu-element .context-menu.btn-menu .invoke-menu,
.menu-element .context-menu.btn-menu .invoke-menu, .menu-element .btn-menu.checkbox-menu .invoke-menu,
.menu-element .super-menu.btn-menu .invoke-menu {
color: #b0b0b0; }
/* line 78, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li,
/* line 79, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li, .menu-element .checkbox-menu ul li,
.menu-element .super-menu ul li {
padding-left: 25px; }
/* line 80, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li a,
/* line 81, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li a, .menu-element .checkbox-menu ul li a,
.menu-element .super-menu ul li a {
color: white; }
/* line 81, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li .icon,
/* line 84, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li .icon, .menu-element .checkbox-menu ul li .icon,
.menu-element .super-menu ul li .icon {
color: #24c8ff; }
/* line 84, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li .type-icon,
/* line 87, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li .type-icon, .menu-element .checkbox-menu ul li .type-icon,
.menu-element .super-menu ul li .type-icon {
left: 5px; }
/* line 87, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li:hover .icon,
/* line 90, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li:hover .icon, .menu-element .checkbox-menu ul li:hover .icon,
.menu-element .super-menu ul li:hover .icon {
color: #3dcfff; }
/* line 94, ../sass/controls/_menus.scss */
/* line 99, ../sass/controls/_menus.scss */
.menu-element .checkbox-menu ul li {
padding-left: 50px; }
/* line 101, ../sass/controls/_menus.scss */
.menu-element .checkbox-menu ul li .checkbox {
position: absolute;
left: 5px;
top: 0.46667rem; }
/* line 106, ../sass/controls/_menus.scss */
.menu-element .checkbox-menu ul li .checkbox em {
height: 0.7rem;
width: 0.7rem; }
/* line 109, ../sass/controls/_menus.scss */
.menu-element .checkbox-menu ul li .checkbox em:before {
font-size: 7px !important;
height: 0.7rem;
width: 0.7rem;
line-height: 0.7rem; }
/* line 117, ../sass/controls/_menus.scss */
.menu-element .checkbox-menu ul li .type-icon {
left: 25px; }
/* line 123, ../sass/controls/_menus.scss */
.menu-element .super-menu {
display: block;
width: 500px;
height: 480px; }
/* line 104, ../sass/controls/_menus.scss */
/* line 133, ../sass/controls/_menus.scss */
.menu-element .super-menu .contents {
overflow: hidden;
position: absolute;
@ -2669,12 +2669,12 @@ label.checkbox.custom {
left: 5px;
width: auto;
height: auto; }
/* line 107, ../sass/controls/_menus.scss */
/* line 136, ../sass/controls/_menus.scss */
.menu-element .super-menu .pane {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
/* line 109, ../sass/controls/_menus.scss */
/* line 138, ../sass/controls/_menus.scss */
.menu-element .super-menu .pane.left {
border-right: 1px solid rgba(255, 255, 255, 0.2);
left: 0;
@ -2683,23 +2683,23 @@ label.checkbox.custom {
width: 50%;
overflow-x: hidden;
overflow-y: auto; }
/* line 119, ../sass/controls/_menus.scss */
/* line 148, ../sass/controls/_menus.scss */
.menu-element .super-menu .pane.left ul li {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding-left: 30px;
border-top: none; }
/* line 126, ../sass/controls/_menus.scss */
/* line 155, ../sass/controls/_menus.scss */
.menu-element .super-menu .pane.right {
left: auto;
right: 0;
padding: 25px;
width: 50%; }
/* line 132, ../sass/controls/_menus.scss */
/* line 161, ../sass/controls/_menus.scss */
.menu-element .super-menu .pane.right .icon {
color: #fff; }
/* line 139, ../sass/controls/_menus.scss */
/* line 168, ../sass/controls/_menus.scss */
.menu-element .super-menu .menu-item-description .desc-area.icon {
position: relative;
font-size: 8em;
@ -2708,40 +2708,40 @@ label.checkbox.custom {
line-height: 150px;
margin-bottom: 25px;
text-align: center; }
/* line 149, ../sass/controls/_menus.scss */
/* line 178, ../sass/controls/_menus.scss */
.menu-element .super-menu .menu-item-description .desc-area.title {
color: #fff;
font-size: 1.2em;
margin-bottom: 0.5em; }
/* line 154, ../sass/controls/_menus.scss */
/* line 183, ../sass/controls/_menus.scss */
.menu-element .super-menu .menu-item-description .desc-area.description {
color: #fff;
font-size: 0.8em;
line-height: 1.5em; }
/* line 163, ../sass/controls/_menus.scss */
.menu-element .context-menu {
/* line 192, ../sass/controls/_menus.scss */
.menu-element .context-menu, .menu-element .checkbox-menu {
font-size: 0.80rem; }
/* line 168, ../sass/controls/_menus.scss */
/* line 197, ../sass/controls/_menus.scss */
.context-menu-holder {
pointer-events: none;
position: absolute;
height: 200px;
width: 170px;
z-index: 70; }
/* line 174, ../sass/controls/_menus.scss */
/* line 203, ../sass/controls/_menus.scss */
.context-menu-holder .context-menu-wrapper {
position: absolute;
height: 100%;
width: 100%; }
/* line 181, ../sass/controls/_menus.scss */
.context-menu-holder.go-left .context-menu {
/* line 210, ../sass/controls/_menus.scss */
.context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
right: 0; }
/* line 182, ../sass/controls/_menus.scss */
.context-menu-holder.go-up .context-menu {
/* line 213, ../sass/controls/_menus.scss */
.context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
bottom: 0; }
/* line 185, ../sass/controls/_menus.scss */
/* line 218, ../sass/controls/_menus.scss */
.btn-bar.right .menu,
.menus-to-left .menu {
left: auto;

View File

@ -273,192 +273,136 @@ ul.tree {
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* line 23, ../sass/search/_search.scss */
.search-holder {
padding-right: 5px;
top: 23px;
margin-top: 10px; }
/* line 34, ../sass/search/_search.scss */
.search-holder .search {
.abs.search-holder {
height: 25px;
bottom: 0;
z-index: 5; }
/* line 27, ../sass/search/_search.scss */
.abs.search-holder.active {
height: auto;
bottom: 0; }
/* line 38, ../sass/search/_search.scss */
.search {
display: flex;
flex-direction: column;
height: 100%; }
/* line 39, ../sass/search/_search.scss */
.search-holder .search .search-bar {
order: 1;
/* line 49, ../sass/search/_search.scss */
.search .search-bar {
font-size: 0.8em;
position: relative;
width: 100%;
height: 19px;
margin-top: 4px; }
/* line 50, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-input {
position: relative;
top: -4px;
width: 100%;
height: 19px;
padding-right: 16px;
padding-right: 28px; }
/* line 63, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-input input {
width: 100%; }
/* line 68, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-icon {
/* line 66, ../sass/search/_search.scss */
.search .search-bar .search-input {
height: 25px;
line-height: 25px;
padding-top: 0;
padding-bottom: 0; }
/* line 73, ../sass/search/_search.scss */
.search .search-bar .search-icon,
.search .search-bar .clear-icon,
.search .search-bar .menu-icon {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #737373;
font-size: 12px;
margin-left: 3px;
width: 0;
height: 0;
margin-top: -19px;
transition: visibility .15s, opacity .15s, color .2s; }
/* line 82, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-icon.content {
visibility: hidden;
opacity: 0; }
/* line 90, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-input:focus + div.search-icon {
visibility: hidden;
opacity: 0; }
/* line 96, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-input:hover + div.search-icon {
color: #a6a6a6; }
/* line 100, ../sass/search/_search.scss */
.search-holder .search .search-bar .clear-icon {
height: 17px;
width: 17px;
line-height: 17px;
position: absolute;
display: block;
text-align: center;
top: 4px; }
/* line 86, ../sass/search/_search.scss */
.search .search-bar .clear-icon,
.search .search-bar .menu-icon {
cursor: pointer;
transition: color .25s; }
/* line 93, ../sass/search/_search.scss */
.search .search-bar .search-input {
position: relative;
width: 100%;
padding-left: 22px !important;
padding-right: 44px !important; }
/* line 100, ../sass/search/_search.scss */
.search .search-bar .search-input input {
width: 100%; }
/* line 105, ../sass/search/_search.scss */
.search .search-bar .search-icon {
color: #737373;
font-size: 6px;
padding: 6px;
padding-left: 4px;
right: 0px;
top: -3px;
left: 3px;
transition: visibility .15s, opacity .15s, color .2s;
pointer-events: none; }
/* line 125, ../sass/search/_search.scss */
.search .search-bar .search-input:hover + div.search-icon {
color: #a6a6a6; }
/* line 129, ../sass/search/_search.scss */
.search .search-bar .clear-icon {
right: 22px;
visibility: hidden;
opacity: 0;
transition: visibility .15s, opacity .15s, color .2s;
right: 15px;
padding-right: 4px; }
/* line 120, ../sass/search/_search.scss */
.search-holder .search .search-bar .clear-icon.content {
transition: visibility .15s, opacity .15s, color .2s; }
/* line 138, ../sass/search/_search.scss */
.search .search-bar .clear-icon.content {
visibility: visible;
opacity: 1; }
/* line 125, ../sass/search/_search.scss */
.search-holder .search .search-bar .clear-icon:hover {
/* line 143, ../sass/search/_search.scss */
.search .search-bar .clear-icon:hover {
color: #a6a6a6; }
/* line 134, ../sass/search/_search.scss */
.search-holder .search .search-bar .menu-icon {
position: absolute;
display: block;
cursor: pointer;
color: #737373;
font-size: 6px;
padding: 6px;
padding-left: 3px;
right: 0px;
top: -3px;
transition: color .2s; }
/* line 150, ../sass/search/_search.scss */
.search-holder .search .search-bar .menu-icon:hover {
/* line 148, ../sass/search/_search.scss */
.search .search-bar .menu-icon {
font-size: 0.8em;
padding-right: 4px;
right: 4px;
text-align: right; }
/* line 154, ../sass/search/_search.scss */
.search .search-bar .menu-icon:hover {
color: #a6a6a6; }
/* line 155, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder {
/* line 159, ../sass/search/_search.scss */
.search .search-bar .search-menu-holder {
float: right;
margin-top: 17px;
left: -50px;
z-index: 9;
left: -20px;
z-index: 1;
transition: visibility .05s, opacity .05s; }
/* line 164, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder.off {
/* line 169, ../sass/search/_search.scss */
.search .search-bar .search-menu-holder.off {
visibility: hidden;
opacity: 0; }
/* line 169, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu {
border-top: 0; }
/* line 172, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item {
padding-top: 0;
padding-bottom: 0;
padding-left: 4px;
padding-right: 6px;
font-size: 0.8em;
color: #e6e6e6;
cursor: pointer;
transition: background-color .13s; }
/* line 186, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox {
margin-top: 0.3em;
padding-left: 0;
margin-right: 0;
padding-right: 2px; }
/* line 199, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox em:before {
color: white;
background-color: grey;
height: 12px;
width: 12px;
font-size: .7em; }
/* line 212, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph {
color: #3dcfff; }
/* line 216, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special {
font-weight: bold;
background-color: #666666; }
/* line 220, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label {
font-size: 1.1em; }
/* line 224, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special:hover {
background-color: gray; }
/* line 233, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder:after {
position: absolute;
top: -6px;
left: 35px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #5e5e5e;
border-left: 6px solid transparent;
content: ''; }
/* line 246, ../sass/search/_search.scss */
.search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder {
/* line 176, ../sass/search/_search.scss */
.search .search-bar .menu-icon:hover + div.search-menu-holder {
visibility: visible; }
/* line 249, ../sass/search/_search.scss */
.search-holder .search .search-bar div.search-menu-holder:hover {
/* line 179, ../sass/search/_search.scss */
.search .search-bar div.search-menu-holder:hover {
visibility: visible; }
/* line 254, ../sass/search/_search.scss */
.search-holder .search .active-filter-display {
order: 2;
font-size: .6em;
background-color: #4d4d4d;
/* line 184, ../sass/search/_search.scss */
.search .active-filter-display {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border: 1px solid #404040;
padding-left: 4px;
padding-right: 4px;
margin-top: 2px; }
/* line 267, ../sass/search/_search.scss */
.search-holder .search .active-filter-display .clear-filters-icon {
padding: 4px;
position: relative;
margin-left: -4px;
top: 0.7em;
cursor: pointer;
color: #737373;
font-size: 6px; }
/* line 280, ../sass/search/_search.scss */
.search-holder .search .active-filter-display .filter-options {
position: relative;
top: -0.5em;
margin-left: 14px;
text-indent: -4px; }
/* line 293, ../sass/search/_search.scss */
.search-holder .search .active-filter-display.off {
-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 199, ../sass/search/_search.scss */
.search .active-filter-display .clear-filters-icon {
opacity: 0.4;
font-size: 0.8em;
position: absolute;
left: 1px;
cursor: pointer; }
/* line 210, ../sass/search/_search.scss */
.search .active-filter-display.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0; }
/* line 303, ../sass/search/_search.scss */
.search-holder .search .search-scroll {
/* line 220, ../sass/search/_search.scss */
.search .search-scroll {
order: 3;
margin-top: 4px;
overflow-y: auto;
@ -466,8 +410,8 @@ ul.tree {
height: auto;
max-height: 100%;
position: relative; }
/* line 318, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item {
/* line 235, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item {
-moz-transition: background-color 0.25s;
-o-transition: background-color 0.25s;
-webkit-transition: background-color 0.25s;
@ -476,11 +420,11 @@ ul.tree {
border-radius: 2px;
padding-top: 4px;
padding-bottom: 2px; }
/* line 332, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item .label {
/* line 249, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item .label {
margin-left: 6px; }
/* line 336, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item .label .title-label {
/* line 253, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item .label .title-label {
display: inline-block;
position: absolute;
left: 29px;
@ -491,48 +435,48 @@ ul.tree {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* line 358, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected {
/* line 275, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item.selected {
background: #005177;
color: #fff; }
/* line 362, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected .view-control {
/* line 279, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item.selected .view-control {
color: #0099cc; }
/* line 365, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
/* line 282, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item.selected .label .type-icon {
color: #fff; }
/* line 372, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
/* line 289, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item:not(.selected):hover {
background: #404040;
color: #cccccc; }
/* line 375, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
/* line 292, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
display: block; }
/* line 378, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
/* line 295, ../sass/search/_search.scss */
.search .search-scroll .results .search-result-item:not(.selected):hover .icon {
color: #33ccff; }
/* line 386, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon {
/* line 303, ../sass/search/_search.scss */
.search .search-scroll .load-icon {
position: relative; }
/* line 388, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading {
/* line 305, ../sass/search/_search.scss */
.search .search-scroll .load-icon.loading {
pointer-events: none;
margin-left: 6px; }
/* line 392, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading .title-label {
/* line 309, ../sass/search/_search.scss */
.search .search-scroll .load-icon.loading .title-label {
font-style: italic;
font-size: .9em;
opacity: 0.5;
margin-left: 26px;
line-height: 24px; }
/* line 402, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading .wait-spinner {
/* line 319, ../sass/search/_search.scss */
.search .search-scroll .load-icon.loading .wait-spinner {
margin-left: 6px; }
/* line 407, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon:not(.loading) {
/* line 324, ../sass/search/_search.scss */
.search .search-scroll .load-icon:not(.loading) {
cursor: pointer; }
/* line 412, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-more-button {
/* line 329, ../sass/search/_search.scss */
.search .search-scroll .load-more-button {
margin-top: 5px;
margin-bottom: 5px;
position: relative;

View File

@ -1,19 +1,27 @@
{
"metadata": {
"name": "WTD Symbols v2.1",
"lastOpened": 1439844340068,
"created": 1439844318831
"name": "WTD Symbols v2.2",
"lastOpened": 1439948744240,
"created": 1439948734037
},
"iconSets": [
{
"selection": [
{
"order": 82,
"id": 84,
"prevSize": 32,
"code": 58887,
"name": "icon-x-in-circle",
"tempChar": ""
},
{
"order": 77,
"id": 83,
"prevSize": 32,
"code": 58881,
"name": "icon-datatable",
"tempChar": ""
"tempChar": ""
},
{
"order": 78,
@ -21,7 +29,7 @@
"prevSize": 32,
"code": 58882,
"name": "icon-tabular-scrolling",
"tempChar": ""
"tempChar": ""
},
{
"order": 79,
@ -29,7 +37,7 @@
"prevSize": 32,
"code": 58884,
"name": "icon-tabular",
"tempChar": ""
"tempChar": ""
},
{
"order": 80,
@ -37,7 +45,7 @@
"prevSize": 32,
"code": 58885,
"name": "icon-calendar",
"tempChar": ""
"tempChar": ""
},
{
"order": 81,
@ -45,7 +53,7 @@
"prevSize": 32,
"code": 58886,
"name": "icon-paint-bucket",
"tempChar": ""
"tempChar": ""
},
{
"order": 1,
@ -53,7 +61,7 @@
"prevSize": 32,
"code": 123,
"name": "icon-pointer-left",
"tempChar": ""
"tempChar": ""
},
{
"order": 3,
@ -61,7 +69,7 @@
"prevSize": 32,
"code": 125,
"name": "icon-pointer-right",
"tempChar": ""
"tempChar": ""
},
{
"order": 4,
@ -69,7 +77,7 @@
"prevSize": 32,
"code": 80,
"name": "icon-person",
"tempChar": ""
"tempChar": ""
},
{
"order": 5,
@ -77,7 +85,7 @@
"prevSize": 32,
"code": 232,
"name": "icon-chain-links",
"tempChar": ""
"tempChar": ""
},
{
"order": 6,
@ -85,7 +93,7 @@
"prevSize": 32,
"code": 115,
"name": "icon-database-in-brackets",
"tempChar": ""
"tempChar": ""
},
{
"order": 7,
@ -93,7 +101,7 @@
"prevSize": 32,
"code": 114,
"name": "icon-refresh",
"tempChar": ""
"tempChar": ""
},
{
"order": 8,
@ -101,7 +109,7 @@
"prevSize": 32,
"code": 108,
"name": "icon-lock",
"tempChar": ""
"tempChar": ""
},
{
"order": 9,
@ -109,7 +117,7 @@
"prevSize": 32,
"code": 51,
"name": "icon-box-with-dashed-lines",
"tempChar": ""
"tempChar": ""
},
{
"order": 10,
@ -117,7 +125,7 @@
"prevSize": 32,
"code": 58880,
"name": "icon-box-with-arrow-cursor",
"tempChar": ""
"tempChar": ""
},
{
"order": 11,
@ -125,7 +133,7 @@
"prevSize": 32,
"code": 65,
"name": "icon-activity-mode",
"tempChar": ""
"tempChar": ""
},
{
"order": 12,
@ -133,7 +141,7 @@
"prevSize": 32,
"code": 97,
"name": "icon-activity",
"tempChar": ""
"tempChar": ""
},
{
"order": 13,
@ -141,7 +149,7 @@
"prevSize": 32,
"code": 33,
"name": "icon-alert-rect",
"tempChar": ""
"tempChar": ""
},
{
"order": 14,
@ -149,7 +157,7 @@
"prevSize": 32,
"code": 58883,
"name": "icon-alert-triangle",
"tempChar": ""
"tempChar": ""
},
{
"order": 15,
@ -157,7 +165,7 @@
"prevSize": 32,
"code": 238,
"name": "icon-arrow-double-down",
"tempChar": ""
"tempChar": ""
},
{
"order": 16,
@ -165,7 +173,7 @@
"prevSize": 32,
"code": 235,
"name": "icon-arrow-double-up",
"tempChar": ""
"tempChar": ""
},
{
"order": 2,
@ -173,7 +181,7 @@
"prevSize": 32,
"code": 118,
"name": "icon-arrow-down",
"tempChar": ""
"tempChar": ""
},
{
"order": 19,
@ -181,7 +189,7 @@
"prevSize": 32,
"code": 60,
"name": "icon-arrow-left",
"tempChar": ""
"tempChar": ""
},
{
"order": 20,
@ -189,7 +197,7 @@
"prevSize": 32,
"code": 62,
"name": "icon-arrow-right",
"tempChar": ""
"tempChar": ""
},
{
"order": 21,
@ -197,7 +205,7 @@
"prevSize": 32,
"code": 236,
"name": "icon-arrow-tall-down",
"tempChar": ""
"tempChar": ""
},
{
"order": 22,
@ -205,7 +213,7 @@
"prevSize": 32,
"code": 237,
"name": "icon-arrow-tall-up",
"tempChar": ""
"tempChar": ""
},
{
"order": 23,
@ -213,7 +221,7 @@
"prevSize": 32,
"code": 94,
"name": "icon-arrow-up",
"tempChar": ""
"tempChar": ""
},
{
"order": 24,
@ -221,7 +229,7 @@
"prevSize": 32,
"code": 73,
"name": "icon-arrows-out",
"tempChar": ""
"tempChar": ""
},
{
"order": 25,
@ -229,7 +237,7 @@
"prevSize": 32,
"code": 58893,
"name": "icon-arrows-right-left",
"tempChar": ""
"tempChar": ""
},
{
"order": 33,
@ -237,7 +245,7 @@
"prevSize": 32,
"code": 53,
"name": "icon-arrows-up-down",
"tempChar": ""
"tempChar": ""
},
{
"order": 26,
@ -245,7 +253,7 @@
"prevSize": 32,
"code": 42,
"name": "icon-asterisk",
"tempChar": ""
"tempChar": ""
},
{
"order": 27,
@ -253,7 +261,7 @@
"prevSize": 32,
"code": 72,
"name": "icon-autoflow-tabular",
"tempChar": ""
"tempChar": ""
},
{
"order": 28,
@ -261,7 +269,7 @@
"prevSize": 32,
"code": 224,
"name": "icon-box-round-corners",
"tempChar": ""
"tempChar": ""
},
{
"order": 29,
@ -269,7 +277,7 @@
"prevSize": 32,
"code": 50,
"name": "icon-check",
"tempChar": ""
"tempChar": ""
},
{
"order": 30,
@ -277,7 +285,7 @@
"prevSize": 32,
"code": 67,
"name": "icon-clock",
"tempChar": ""
"tempChar": ""
},
{
"order": 31,
@ -285,7 +293,7 @@
"prevSize": 32,
"code": 46,
"name": "icon-connectivity",
"tempChar": ""
"tempChar": ""
},
{
"order": 32,
@ -293,7 +301,7 @@
"prevSize": 32,
"code": 100,
"name": "icon-database-query",
"tempChar": ""
"tempChar": ""
},
{
"order": 17,
@ -301,7 +309,7 @@
"prevSize": 32,
"code": 68,
"name": "icon-database",
"tempChar": ""
"tempChar": ""
},
{
"order": 35,
@ -309,7 +317,7 @@
"prevSize": 32,
"code": 81,
"name": "icon-dictionary",
"tempChar": ""
"tempChar": ""
},
{
"order": 36,
@ -317,7 +325,7 @@
"prevSize": 32,
"code": 242,
"name": "icon-duplicate",
"tempChar": ""
"tempChar": ""
},
{
"order": 37,
@ -325,7 +333,7 @@
"prevSize": 32,
"code": 102,
"name": "icon-folder-new",
"tempChar": ""
"tempChar": ""
},
{
"order": 38,
@ -333,7 +341,7 @@
"prevSize": 32,
"code": 70,
"name": "icon-folder",
"tempChar": ""
"tempChar": ""
},
{
"order": 39,
@ -341,7 +349,7 @@
"prevSize": 32,
"code": 95,
"name": "icon-fullscreen-collapse",
"tempChar": ""
"tempChar": ""
},
{
"order": 40,
@ -349,7 +357,7 @@
"prevSize": 32,
"code": 122,
"name": "icon-fullscreen-expand",
"tempChar": ""
"tempChar": ""
},
{
"order": 41,
@ -357,7 +365,7 @@
"prevSize": 32,
"code": 71,
"name": "icon-gear",
"tempChar": ""
"tempChar": ""
},
{
"order": 49,
@ -365,7 +373,7 @@
"prevSize": 32,
"code": 227,
"name": "icon-image",
"tempChar": ""
"tempChar": ""
},
{
"order": 42,
@ -373,7 +381,7 @@
"prevSize": 32,
"code": 225,
"name": "icon-layers",
"tempChar": ""
"tempChar": ""
},
{
"order": 43,
@ -381,7 +389,7 @@
"prevSize": 32,
"code": 76,
"name": "icon-layout",
"tempChar": ""
"tempChar": ""
},
{
"order": 44,
@ -389,7 +397,7 @@
"prevSize": 32,
"code": 226,
"name": "icon-line-horz",
"tempChar": ""
"tempChar": ""
},
{
"order": 75,
@ -397,7 +405,7 @@
"prevSize": 32,
"code": 244,
"name": "icon-link",
"tempChar": ""
"tempChar": ""
},
{
"order": 46,
@ -405,7 +413,7 @@
"prevSize": 32,
"code": 88,
"name": "icon-magnify-in",
"tempChar": ""
"tempChar": ""
},
{
"order": 47,
@ -413,7 +421,7 @@
"prevSize": 32,
"code": 89,
"name": "icon-magnify-out",
"tempChar": ""
"tempChar": ""
},
{
"order": 48,
@ -421,7 +429,7 @@
"prevSize": 32,
"code": 77,
"name": "icon-magnify",
"tempChar": ""
"tempChar": ""
},
{
"order": 34,
@ -429,7 +437,7 @@
"prevSize": 32,
"code": 109,
"name": "icon-menu",
"tempChar": ""
"tempChar": ""
},
{
"order": 50,
@ -437,7 +445,7 @@
"prevSize": 32,
"code": 243,
"name": "icon-move",
"tempChar": ""
"tempChar": ""
},
{
"order": 51,
@ -445,7 +453,7 @@
"prevSize": 32,
"code": 121,
"name": "icon-new-window",
"tempChar": ""
"tempChar": ""
},
{
"order": 52,
@ -453,7 +461,7 @@
"prevSize": 32,
"code": 111,
"name": "icon-object",
"tempChar": ""
"tempChar": ""
},
{
"order": 73,
@ -461,7 +469,7 @@
"prevSize": 32,
"code": 63,
"name": "icon-object-unknown",
"tempChar": ""
"tempChar": ""
},
{
"order": 53,
@ -469,7 +477,7 @@
"prevSize": 32,
"code": 86,
"name": "icon-packet",
"tempChar": ""
"tempChar": ""
},
{
"order": 54,
@ -477,7 +485,7 @@
"prevSize": 32,
"code": 234,
"name": "icon-page",
"tempChar": ""
"tempChar": ""
},
{
"order": 55,
@ -485,7 +493,7 @@
"prevSize": 32,
"code": 241,
"name": "icon-pause",
"tempChar": ""
"tempChar": ""
},
{
"order": 56,
@ -493,7 +501,7 @@
"prevSize": 32,
"code": 112,
"name": "icon-pencil",
"tempChar": ""
"tempChar": ""
},
{
"order": 65,
@ -501,7 +509,7 @@
"prevSize": 32,
"code": 79,
"name": "icon-people",
"tempChar": ""
"tempChar": ""
},
{
"order": 57,
@ -509,7 +517,7 @@
"prevSize": 32,
"code": 239,
"name": "icon-play",
"tempChar": ""
"tempChar": ""
},
{
"order": 58,
@ -517,7 +525,7 @@
"prevSize": 32,
"code": 233,
"name": "icon-plot-resource",
"tempChar": ""
"tempChar": ""
},
{
"order": 59,
@ -525,7 +533,7 @@
"prevSize": 32,
"code": 43,
"name": "icon-plus",
"tempChar": ""
"tempChar": ""
},
{
"order": 60,
@ -533,7 +541,7 @@
"prevSize": 32,
"code": 45,
"name": "icon-minus",
"tempChar": ""
"tempChar": ""
},
{
"order": 61,
@ -541,7 +549,7 @@
"prevSize": 32,
"code": 54,
"name": "icon-sine",
"tempChar": ""
"tempChar": ""
},
{
"order": 62,
@ -549,7 +557,7 @@
"prevSize": 32,
"code": 228,
"name": "icon-T",
"tempChar": ""
"tempChar": ""
},
{
"order": 63,
@ -557,7 +565,7 @@
"prevSize": 32,
"code": 116,
"name": "icon-telemetry-panel",
"tempChar": ""
"tempChar": ""
},
{
"order": 64,
@ -565,7 +573,7 @@
"prevSize": 32,
"code": 84,
"name": "icon-telemetry",
"tempChar": ""
"tempChar": ""
},
{
"order": 18,
@ -573,7 +581,7 @@
"prevSize": 32,
"code": 246,
"name": "icon-thumbs-strip",
"tempChar": ""
"tempChar": ""
},
{
"order": 67,
@ -581,7 +589,7 @@
"prevSize": 32,
"code": 83,
"name": "icon-timeline",
"tempChar": ""
"tempChar": ""
},
{
"order": 68,
@ -589,7 +597,7 @@
"prevSize": 32,
"code": 245,
"name": "icon-timer",
"tempChar": ""
"tempChar": ""
},
{
"order": 69,
@ -597,7 +605,7 @@
"prevSize": 32,
"code": 90,
"name": "icon-trash",
"tempChar": ""
"tempChar": ""
},
{
"order": 70,
@ -605,7 +613,7 @@
"prevSize": 32,
"code": 229,
"name": "icon-two-parts-both",
"tempChar": ""
"tempChar": ""
},
{
"order": 71,
@ -613,7 +621,7 @@
"prevSize": 32,
"code": 231,
"name": "icon-two-parts-one-only",
"tempChar": ""
"tempChar": ""
},
{
"order": 72,
@ -621,7 +629,7 @@
"prevSize": 32,
"code": 120,
"name": "icon-x-heavy",
"tempChar": ""
"tempChar": ""
},
{
"order": 66,
@ -629,7 +637,7 @@
"prevSize": 32,
"code": 58946,
"name": "icon-x",
"tempChar": ""
"tempChar": ""
}
],
"id": 2,
@ -644,6 +652,21 @@
"height": 1024,
"prevSize": 32,
"icons": [
{
"id": 84,
"paths": [
"M512 0c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM832 704l-128 128-192-192-192 192-128-128 192-192-192-192 128-128 192 192 192-192 128 128-192 192 192 192z"
],
"attrs": [],
"isMulticolor": false,
"grid": 0,
"tags": [
"icon-x-in-circle"
],
"colorPermutations": {
"16161751": []
}
},
{
"id": 83,
"paths": [
@ -666,6 +689,10 @@
"icon-datatable"
],
"colorPermutations": {
"16161751": [
1,
1
],
"125525525516161751": [
1,
1
@ -709,6 +736,13 @@
"icon-tabular-scrolling"
],
"colorPermutations": {
"16161751": [
1,
1,
1,
1,
1
],
"125525525516161751": [
1,
1,
@ -760,6 +794,14 @@
"icon-tabular"
],
"colorPermutations": {
"16161751": [
0,
0,
0,
0,
0,
0
],
"125525525516161751": [
0,
0,
@ -787,6 +829,9 @@
"icon-calendar"
],
"colorPermutations": {
"16161751": [
1
],
"125525525516161751": [
1
]
@ -814,6 +859,10 @@
"icon-paint-bucket"
],
"colorPermutations": {
"16161751": [
1,
1
],
"125525525516161751": [
1,
1

View File

@ -83,6 +83,7 @@
<glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M0 896v-192h448v256h-384c-35.2 0-64-28.8-64-64zM960 960h-384v-256h448v192c0 35.2-28.8 64-64 64zM576 576h448v-256h-448v256zM0 576h448v-256h-448v256zM0 0c0-35.2 28.8-64 64-64h384v256h-448v-192zM576-64h384c35.2 0 64 28.8 64 64v192h-448v-256z" />
<glyph unicode="&#xe605;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
<glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M896 320c0 0-130-188-128-256 2-70.6 57.4-128 128-128s126 57.4 128 128c2 68-128 256-128 256zM449 831l0.2 64.8c0 35.4-28.4 64-63.8 64.2 0 0-0.2 0-0.2 0-35.2 0-63.8-28.6-64-63.8l-0.6-190.8-294-292.6c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-447 447zM384 320c-70.6 0-128 57.4-128 128 0 47.4 25.8 89 64.4 111l-0.4-110.8c0-35.4 28.4-64 63.8-64.2 0 0 0.2 0 0.2 0 35.2 0 63.8 28.6 64 63.8l0.4 110.8c38-22.2 63.6-63.4 63.6-110.6 0-70.6-57.4-128-128-128z" />
<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
<glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
<glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
</font></defs></svg>

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -100,6 +100,7 @@ $ueAppLogoW: 105px;
$ueEditToolBarH: 25px;
$ueBrowseLeftPaneW: 25%;
$ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px;
// Overlay
$ovrTopBarH: 60px;
$ovrFooterH: 40px;

View File

@ -1,3 +1,4 @@
/*****************************************************************************
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
@ -31,7 +32,7 @@
@import "global";
@import "fonts";
@import "user-environ/layout";
@import "search/layout";
//@import "search/layout";
@import "fixed-position";
@import "about";
@import "text";

View File

@ -42,6 +42,7 @@
color: lighten($bg, 60%);
line-height: $menuLineH;
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
position: relative;
white-space: nowrap;
&:first-child {
border: none;
@ -77,7 +78,9 @@
@include containerSubtle($bg);
ul li {
padding-left: 25px;
a { color: $fg; }
a {
color: $fg;
}
.icon {
color: $ic;
}
@ -90,6 +93,32 @@
}
}
.checkbox-menu {
// Used in search dropdown in tree
@extend .context-menu;
ul li {
padding-left: 50px;
.checkbox {
$d: 0.7rem;
position: absolute;
left: $interiorMargin;
top: ($menuLineH - $d) / 1.5;
em {
height: $d;
width: $d;
&:before {
font-size: 7px !important;// $d/2;
height: $d;
width: $d;
line-height: $d;
}
}
}
.type-icon {
left: 25px;
}
}
}
.super-menu {
$w: 500px;
@ -178,11 +207,17 @@
.context-menu {
}
}
&.go-left .context-menu { right: 0; }
&.go-up .context-menu { bottom: 0; }
&.go-left .context-menu {
right: 0;
}
&.go-up .context-menu {
bottom: 0;
}
}
.btn-bar.right .menu,
.menus-to-left .menu {
left: auto; right: 0; width: auto;
left: auto;
right: 0;
width: auto;
}

View File

@ -20,44 +20,81 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
.search-holder {
.abs.search-holder {
//@include test(#990000);
height: $treeSearchInputBarH;
bottom: 0;
&.active {
height: auto;
bottom: 0;
}
//top: 23px;
// Align with the top of the divider bar, below create button
//margin-top: 10px; // CH comment out
z-index:5;
}
.search {
$iconWidth: 20px;
$leftMargin: 6px;
$rightPadding: 5px;
padding-right: $rightPadding;
top: 23px;
// Align with the top of the divider bar, below create button
margin-top: 10px;
.search {
display: flex;//block;
//padding-right: $rightPadding;
//@include test();
display: flex; //block;
flex-direction: column;
height: 100%;
.search-bar {
$heightAdjust: 4px;
//$heightAdjust: 4px;
$textInputHeight: 19px; // This is equal to the default value, 19px
$iconEdgeM: 4px;
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
font-size: 0.8em;
order: 1;
//order: 1;
position: relative;
width: 100%;
height: $textInputHeight;
margin-top: $heightAdjust;
//height: $textInputHeight;
//margin-top: $heightAdjust;
.search-input,
.search-icon {
}
.search-input {
height: $treeSearchInputBarH;
line-height: $treeSearchInputBarH;
padding-top: 0;
padding-bottom: 0;
}
.search-icon,
.clear-icon,
.menu-icon {
//@include test(#008800);
@include box-sizing(border-box);
color: $colorItemFg;
height: $iconD; width: $iconD;
line-height: $iconD;
position: absolute;
text-align: center;
top: $iconEdgeM;
}
.clear-icon,
.menu-icon {
cursor: pointer;
transition: color .25s;
}
.search-input {
position: relative;
top: -$heightAdjust;
width: 100%;
height: $textInputHeight;
// For clear button
padding-right: 16px;
// Modifications for existence of menu icon:
padding-right: 16px + 12px;
padding-left: $iconD + $interiorMargin !important;
padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
// Make work for mct-control textfield
input {
@ -67,29 +104,21 @@
.search-icon {
color: $colorItemFg;
font-size: 12px;
// Make the icon within the left edge of the input area
margin-left: 3px;
width: 0;
height: 0;
// Line up icon with text input vertically
margin-top: -$textInputHeight;
left: $interiorMarginSm;
transition: visibility .15s, opacity .15s, color .2s;
pointer-events: none;
&.content {
// Make icon invisible whenever there is text input
visibility: hidden;
opacity: 0;
//visibility: hidden;
//opacity: 0;
}
}
// Make icon invisible when the text input is focused
.search-input:focus + div.search-icon {
visibility: hidden;
opacity: 0;
//visibility: hidden;
//opacity: 0;
}
// Make icon lighten when hovering over search bar
@ -98,18 +127,7 @@
}
.clear-icon {
position: absolute;
display: block;
cursor: pointer;
color: $colorItemFg;
font-size: 6px;
padding: 6px;
padding-left: 4px;
right: 0px;
top: -3px;
right: $iconD + $interiorMargin;
// Icon is visible only when there is text input
visibility: hidden;
@ -125,27 +143,13 @@
&:hover {
color: lighten($colorItemFg, 20%);
}
// Modifications for existence of menu icon:
right: 3px + 6px + 6px;
padding-right: 4px;
}
.menu-icon {
position: absolute;
display: block;
cursor: pointer;
color: $colorItemFg;
font-size: 6px;
padding: 6px;
padding-left: 3px;
right: 0px;
top: -3px;
transition: color .2s;
font-size: 0.8em;
padding-right: $iconEdgeM;
right: $iconEdgeM;
text-align: right;
&:hover {
color: lighten($colorItemFg, 20%);
@ -154,10 +158,11 @@
.search-menu-holder {
float: right;
margin-top: $textInputHeight - 2px;
left: -50px;
//margin-top: $textInputHeight - 2px;
//left: -50px;
left: -20px;
z-index: 9;
z-index: 1;
transition: visibility .05s, opacity .05s;
@ -165,81 +170,6 @@
visibility: hidden;
opacity: 0;
}
.search-menu {
border-top: 0;
.search-menu-item {
// Padding only on sides
padding-top: 0;
padding-bottom: 0;
padding-left: 4px;
padding-right: 6px;
font-size: 0.8em;
color: lighten($colorBodyBg, 70%);
cursor: pointer;
transition: background-color .13s;
.search-menu-checkbox {
// Vertically center
margin-top: 0.3em;
// Get rid of weird checkbox positioning
// from label.checkbox.custom
padding-left: 0;
margin-right: 0;
// Spacing with labels
padding-right: 2px;
// Change checkbox colors
em:before {
// check
color: white;
// box
background-color: grey;
// Change size
height: 12px;
width: 12px;
font-size: .7em;
}
}
.search-menu-glyph {
color: lighten($colorMenuIc, 5%);//lighten($colorItemFg, 35%);//$colorMenuIc;
}
&.special {
font-weight: bold;
background-color: lighten($colorBodyBg, 20%);
.search-menu-label {
font-size: 1.1em;
}
&:hover {
background-color: lighten($colorBodyBg, 30%);
}
}
}
}
}
// Make bubble caret thing
.search-menu-holder:after {
position: absolute;
top: -6px;
left: 35px;
display: inline-block;
border-right: 6px solid transparent;
//border-bottom: 6px solid white;
border-bottom: 6px solid rgb(94, 94, 94); // Where does this color come from?
border-left: 6px solid transparent;
content: '';
}
// Hovering reveals menu
@ -252,39 +182,26 @@
}
.active-filter-display {
order: 2;
//order: 2;
$s: 0.65em;
$p: $interiorMargin;
@include border-radius($basicCr);
@include box-sizing(border-box);
line-height: 130%;
padding: $p 0;
padding-left: $s * 2.25;
font-size: $s;
//background-color: rgba(#000, 0.3);
//border-radius: $basicCr;
margin-top: $interiorMarginSm;
font-size: .6em;
background-color: lighten($colorBodyBg, 10%);
border-radius: 2px;
border: 1px solid lighten($colorBodyBg, 5%);
padding-left: 4px;
padding-right: 4px;
//overflow: hidden;
margin-top: 2px;
.clear-filters-icon {
padding: 4px;
position: relative;
margin-left: -4px;
top: 0.7em;
opacity: 0.4;
font-size: 0.8em;
position: absolute;
left: 1px;
cursor: pointer;
color: $colorItemFg;
font-size: 6px;
}
.filter-options {
position: relative;
top: -0.5em;
//margin-bottom: -5px;
// Hanging indent
margin-left: 14px;
text-indent: -4px;
}
// Transition looks weird when the results list has none
@ -426,5 +343,4 @@
font-size: 0.7em;
}
}
}
}

View File

@ -229,10 +229,12 @@
bottom: $interiorMargin;
}
}
.search-holder {
top: $ueTopBarH + $interiorMarginLg;
}
.tree-holder {
overflow: auto;
top: $ueTopBarH + $interiorMarginLg;
padding-right: $interiorMargin;
top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
}
}
&.items {

View File

@ -22,15 +22,15 @@
<div ng-controller="SearchMenuController as controller">
<div class="menu dropdown search-menu">
<div class="menu checkbox-menu">
<ul>
<!-- First element is special - it's a reset option -->
<li class="search-menu-item special"
title="Select all filters."
title="Select all filters"
ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()">
<label class="checkbox custom search-menu-checkbox">
<label class="checkbox custom no-text">
<input type="checkbox"
class="checkbox"
ng-model="ngModel.checkAll"
@ -38,10 +38,10 @@
<em></em>
</label>
<span class="search-menu-label">
ALL
<span class="ui-symbol icon type-icon">
*
</span>
All
</li>
<!-- The filter options, by type -->
@ -49,7 +49,7 @@
ng-repeat="type in ngModel.types"
ng-click="ngModel.checked[type.key] = !ngModel.checked[type.key]; controller.updateOptions()">
<label class="checkbox custom search-menu-checkbox">
<label class="checkbox custom no-text">
<input type="checkbox"
class="checkbox"
ng-model="ngModel.checked[type.key]"
@ -57,14 +57,10 @@
<em></em>
</label>
<span class="ui-symbol search-menu-glyph">
<span class="ui-symbol icon type-icon">
{{ type.glyph }}
</span>
<span class="search-menu-label">
{{ type.name }}
</span>
</li>
</ul>
</div>

View File

@ -48,7 +48,7 @@
<a class="ui-symbol clear-icon"
ng-class="{content: !(ngModel.input === '' || ngModel.input === undefined)}"
ng-click="ngModel.input = ''; controller.search()">
x
&#xe607;
</a>
<!-- Menu icon/button 'v' -->
@ -73,12 +73,14 @@
<a class="ui-symbol clear-filters-icon"
ng-click="ngModel.checkAll = true; menuController.checkAll()">
x
&#xe607;
</a>
<div class="filter-options">
Filtered by: {{ ngModel.filtersString }}
</div>
<!--div class="filter-options">
Filtered by: {{ ngModel.filtersString }}
</div-->
</div>
<!-- This div exists to determine scroll bar location -->