Merge remote-tracking branch 'github/mobile' into open74-merge-mobile
This commit is contained in:
Charles Hacskaylo
@@ -102,6 +102,7 @@ $ueAppLogoW: 105px;
|
||||
$ueEditToolBarH: 25px;
|
||||
$ueBrowseLeftPaneW: 25%;
|
||||
$ueEditLeftPaneW: 75%;
|
||||
$treeSearchInputBarH: 25px;
|
||||
// Overlay
|
||||
$ovrTopBarH: 60px;
|
||||
$ovrFooterH: 40px;
|
||||
|
||||
@@ -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
|
||||
@@ -34,7 +35,6 @@
|
||||
@import "fonts";
|
||||
@import "user-environ/layout";
|
||||
@import "mobile/layout";
|
||||
|
||||
@import "fixed-position";
|
||||
@import "about";
|
||||
@import "text";
|
||||
|
||||
@@ -21,15 +21,15 @@
|
||||
*****************************************************************************/
|
||||
/******************************************************** MENUS */
|
||||
.menu-element {
|
||||
$bg: lighten($colorBodyBg, 5%);
|
||||
$bg: lighten($colorBodyBg, 5%);
|
||||
$bgHover: lighten($bg, 20%);
|
||||
$iconColor: $colorKey;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
.menu {
|
||||
@include border-radius($basicCr);
|
||||
@include containerSubtle($bg);
|
||||
@include txtShdwSubtle(0.2);
|
||||
@include containerSubtle($bg);
|
||||
@include txtShdwSubtle(0.2);
|
||||
display: block; // set to block via jQuery
|
||||
padding: $interiorMarginSm 0;
|
||||
position: absolute;
|
||||
@@ -37,11 +37,12 @@
|
||||
ul {
|
||||
@include menuUlReset();
|
||||
li {
|
||||
@include box-sizing(border-box);
|
||||
@include box-sizing(border-box);
|
||||
border-top: 1px solid lighten($bg, 20%);
|
||||
color: lighten($bg, 60%);
|
||||
line-height: $menuLineH;
|
||||
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
&:first-child {
|
||||
border: none;
|
||||
@@ -61,7 +62,7 @@
|
||||
// display: block;
|
||||
//}
|
||||
.type-icon {
|
||||
left: $interiorMargin * 2;
|
||||
left: $interiorMargin * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -77,7 +78,9 @@
|
||||
@include containerSubtle($bg);
|
||||
ul li {
|
||||
padding-left: 25px;
|
||||
a { color: $fg; }
|
||||
a {
|
||||
color: $fg;
|
||||
}
|
||||
.icon {
|
||||
color: $ic;
|
||||
}
|
||||
@@ -90,99 +93,131 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
$h: $w - 20;
|
||||
$plw: 50%; //$w * 0.5;
|
||||
$prw: 50%; //$w - $plw;
|
||||
$fg: #fff; //lighten($colorBodyFg, 40%);
|
||||
$bgHover: $colorKey; //$bg;
|
||||
display: block;
|
||||
width: $w;
|
||||
height: $h;
|
||||
.contents {
|
||||
@include absPosDefault($interiorMargin);
|
||||
}
|
||||
.pane {
|
||||
@include box-sizing(border-box);
|
||||
&.left {
|
||||
//@include test();
|
||||
border-right: 1px solid rgba(white, 0.2);
|
||||
left: 0;
|
||||
padding-right: $interiorMargin;
|
||||
right: auto;
|
||||
width: $plw;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
ul {
|
||||
li {
|
||||
@include border-radius($controlCr);
|
||||
padding-left: 30px;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
//@include test(red);
|
||||
left: auto;
|
||||
right: 0;
|
||||
padding: $interiorMargin * 5;
|
||||
width: $prw;
|
||||
.icon {
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-item-description {
|
||||
.desc-area {
|
||||
&.icon {
|
||||
$h: 150px;
|
||||
position: relative;
|
||||
font-size: 8em;
|
||||
left: 0;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
margin-bottom: $interiorMargin * 5;
|
||||
text-align: center;
|
||||
}
|
||||
&.title {
|
||||
color: $fg;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
&.description {
|
||||
//color: lighten($bg, 30%);
|
||||
color: $fg;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.context-menu {
|
||||
font-size: 0.80rem;
|
||||
}
|
||||
.super-menu {
|
||||
$w: 500px;
|
||||
$h: $w - 20;
|
||||
$plw: 50%; //$w * 0.5;
|
||||
$prw: 50%; //$w - $plw;
|
||||
$fg: #fff; //lighten($colorBodyFg, 40%);
|
||||
$bgHover: $colorKey; //$bg;
|
||||
display: block;
|
||||
width: $w;
|
||||
height: $h;
|
||||
.contents {
|
||||
@include absPosDefault($interiorMargin);
|
||||
}
|
||||
.pane {
|
||||
@include box-sizing(border-box);
|
||||
&.left {
|
||||
//@include test();
|
||||
border-right: 1px solid rgba(white, 0.2);
|
||||
left: 0;
|
||||
padding-right: $interiorMargin;
|
||||
right: auto;
|
||||
width: $plw;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
ul {
|
||||
li {
|
||||
@include border-radius($controlCr);
|
||||
padding-left: 30px;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
//@include test(red);
|
||||
left: auto;
|
||||
right: 0;
|
||||
padding: $interiorMargin * 5;
|
||||
width: $prw;
|
||||
.icon {
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-item-description {
|
||||
.desc-area {
|
||||
&.icon {
|
||||
$h: 150px;
|
||||
position: relative;
|
||||
font-size: 8em;
|
||||
left: 0;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
margin-bottom: $interiorMargin * 5;
|
||||
text-align: center;
|
||||
}
|
||||
&.title {
|
||||
color: $fg;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
&.description {
|
||||
//color: lighten($bg, 30%);
|
||||
color: $fg;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.context-menu {
|
||||
font-size: 0.80rem;
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu-holder {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
height: 200px;
|
||||
width: 170px;
|
||||
z-index: 70;
|
||||
.context-menu-wrapper {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.context-menu {
|
||||
}
|
||||
}
|
||||
&.go-left .context-menu { right: 0; }
|
||||
&.go-up .context-menu { bottom: 0; }
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
height: 200px;
|
||||
width: 170px;
|
||||
z-index: 70;
|
||||
.context-menu-wrapper {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.context-menu {
|
||||
}
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
@@ -48,19 +48,15 @@
|
||||
width: 100%;
|
||||
tr {
|
||||
td {
|
||||
//max-width: 150px;
|
||||
padding: 2px 0;
|
||||
vertical-align: top;
|
||||
//white-space: nowrap;
|
||||
//overflow: hidden;
|
||||
//text-overflow: ellipsis;
|
||||
&.label {
|
||||
padding-right: $interiorMargin * 2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.value {
|
||||
white-space: nowrap;
|
||||
//width: 90%;
|
||||
//word-wrap: break-word; // Doesn't work in <td>?
|
||||
word-break: break-all;
|
||||
}
|
||||
&.align-wrap {
|
||||
white-space: normal;
|
||||
@@ -135,7 +131,9 @@
|
||||
z-index: 2;
|
||||
}
|
||||
&.arw-up .arw.arw-down,
|
||||
&.arw-down .arw.arw-up { display: none; }
|
||||
&.arw-down .arw.arw-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//************************************************* LOOK AND FEEL
|
||||
@@ -148,6 +146,7 @@
|
||||
@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
|
||||
}
|
||||
}
|
||||
|
||||
.s-infobubble {
|
||||
$emFg: darken($colorInfoBubbleFg, 20%);
|
||||
@include border-radius($basicCr);
|
||||
@@ -159,18 +158,31 @@
|
||||
color: $emFg;
|
||||
font-weight: bold;
|
||||
}
|
||||
tr {
|
||||
td {
|
||||
border-top: 1px solid darken($colorInfoBubbleBg, 10%);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
&:first-child td {
|
||||
border-top: none;
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
border: none;
|
||||
border-top: 1px solid darken($colorInfoBubbleBg, 10%) !important;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&:first-child td {
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: lighten($emFg, 30%);
|
||||
}
|
||||
|
||||
.value {
|
||||
color: $emFg;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.s-thumbsbubble {
|
||||
|
||||
@@ -82,18 +82,21 @@ table {
|
||||
border-left: none;
|
||||
}
|
||||
&.sort {
|
||||
.icon-sorting:before {
|
||||
display: inline-block;
|
||||
&.sort:after {
|
||||
color: $colorIconLink;
|
||||
font-family: symbolsfont;
|
||||
margin-left: 5px;
|
||||
font-size: 8px;
|
||||
content: "\ed";
|
||||
display: inline-block;
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
&.asc .icon-sorting:before {
|
||||
content: '0';
|
||||
}
|
||||
&.desc .icon-sorting:before {
|
||||
content: '1';
|
||||
&.sort.desc:after {
|
||||
content: "\ec";
|
||||
}
|
||||
}
|
||||
&.sortable {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
td, .td {
|
||||
border-bottom: 1px solid $tabularColorBorder;
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.browse-showtree {
|
||||
// NOTE: DISABLED SELECTION
|
||||
// Selection disabled in both panes
|
||||
|
||||
31
platform/commonUI/general/res/sass/search/_layout.scss
Normal file
31
platform/commonUI/general/res/sass/search/_layout.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
|
||||
// Overrides some styling in user-environ/_layout.scss
|
||||
.pane {
|
||||
&.treeview.left {
|
||||
.tree-holder {
|
||||
// Want tree holder to start right below the search bar.
|
||||
top: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
347
platform/commonUI/general/res/sass/search/_search.scss
Normal file
347
platform/commonUI/general/res/sass/search/_search.scss
Normal file
@@ -0,0 +1,347 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
|
||||
.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;
|
||||
//@include test();
|
||||
display: flex; //block;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.search-bar {
|
||||
//$heightAdjust: 4px;
|
||||
$textInputHeight: 19px; // This is equal to the default value, 19px
|
||||
$iconEdgeM: 4px;
|
||||
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
|
||||
font-size: 0.8em;
|
||||
|
||||
//order: 1;
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
//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;
|
||||
width: 100%;
|
||||
padding-left: $iconD + $interiorMargin !important;
|
||||
padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
|
||||
|
||||
// Make work for mct-control textfield
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: $colorItemFg;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// Make icon invisible when the text input is focused
|
||||
.search-input:focus + div.search-icon {
|
||||
//visibility: hidden;
|
||||
//opacity: 0;
|
||||
}
|
||||
|
||||
// Make icon lighten when hovering over search bar
|
||||
.search-input:hover + div.search-icon {
|
||||
color: lighten($colorItemFg, 20%);
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
right: $iconD + $interiorMargin;
|
||||
|
||||
// Icon is visible only when there is text input
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
transition: visibility .15s, opacity .15s, color .2s;
|
||||
|
||||
&.content {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: lighten($colorItemFg, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 0.8em;
|
||||
padding-right: $iconEdgeM;
|
||||
right: $iconEdgeM;
|
||||
text-align: right;
|
||||
|
||||
&:hover {
|
||||
color: lighten($colorItemFg, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.search-menu-holder {
|
||||
float: right;
|
||||
//margin-top: $textInputHeight - 2px;
|
||||
//left: -50px;
|
||||
left: -20px;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
transition: visibility .05s, opacity .05s;
|
||||
|
||||
&.off {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hovering reveals menu
|
||||
.menu-icon:hover + div.search-menu-holder {
|
||||
visibility: visible;
|
||||
}
|
||||
div.search-menu-holder:hover {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.active-filter-display {
|
||||
//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;
|
||||
|
||||
|
||||
.clear-filters-icon {
|
||||
opacity: 0.4;
|
||||
font-size: 0.8em;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Transition looks weird when the results list has none
|
||||
//transition: visibility .2s, opacity .2s;
|
||||
|
||||
&.off {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-scroll {
|
||||
order: 3;
|
||||
|
||||
//padding-right: $rightPadding;
|
||||
margin-top: 4px;
|
||||
|
||||
// Adjustable scrolling size
|
||||
overflow-y: auto;
|
||||
top: auto;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
|
||||
.results {
|
||||
|
||||
.search-result-item {
|
||||
// Include transitions (for the highlights)
|
||||
@include single-transition(background-color, 0.25s);
|
||||
|
||||
// Space the results from each other
|
||||
margin-bottom: 2px;
|
||||
|
||||
// Make the highlights the right color and shape.
|
||||
// Attempting to match the style in the tree, but
|
||||
// while having these be compact.
|
||||
border-radius: 2px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
.label {
|
||||
// Give some padding away from the left side
|
||||
margin-left: $leftMargin;
|
||||
|
||||
.title-label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
// Give some padding away from the left side
|
||||
left: $leftMargin + 3px + $iconWidth;
|
||||
// and the right side
|
||||
right: $rightPadding;
|
||||
|
||||
// Size and position the text
|
||||
font-size: .8em;
|
||||
line-height: 17px;
|
||||
|
||||
// Hide overflow text
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Change styling when it's selected
|
||||
&.selected {
|
||||
$c: #fff;
|
||||
background: $colorKeySelectedBg;
|
||||
color: $c;
|
||||
.view-control {
|
||||
color: $colorItemTreeIcon;
|
||||
}
|
||||
.label .type-icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.label .type-icon .l-icon-link {
|
||||
@include txtShdwSubtle(1);
|
||||
z-index: 2;
|
||||
@include ancillaryIcon(8px, $colorIconLink);
|
||||
margin-left: -25px;
|
||||
}
|
||||
|
||||
// Change styling when it's being hovered over
|
||||
&:not(.selected) {
|
||||
&:hover {
|
||||
background: lighten($colorBodyBg, 5%);
|
||||
color: lighten($colorBodyFg, 20%);
|
||||
.context-trigger {
|
||||
display: block;
|
||||
}
|
||||
.icon {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-icon {
|
||||
position: relative;
|
||||
&.loading {
|
||||
pointer-events: none;
|
||||
margin-left: $leftMargin;
|
||||
|
||||
.title-label {
|
||||
// Text styling
|
||||
font-style: italic;
|
||||
font-size: .9em;
|
||||
opacity: 0.5;
|
||||
|
||||
// Text positioning
|
||||
margin-left: $iconWidth + $leftMargin;
|
||||
line-height: 24px;
|
||||
}
|
||||
.wait-spinner {
|
||||
margin-left: $leftMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.loading) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.load-more-button {
|
||||
margin-top: $interiorMargin 0;
|
||||
font-size: 0.8em;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
margin-left: -45px;
|
||||
text-align: center;
|
||||
width: 90px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -30,4 +30,5 @@
|
||||
@import "mixins";
|
||||
@import "mobile/mixins";
|
||||
@import "tree/tree";
|
||||
@import "mobile/tree";
|
||||
@import "search/search";
|
||||
@import "mobile/tree";
|
||||
|
||||
@@ -238,10 +238,12 @@
|
||||
bottom: $interiorMargin;
|
||||
}
|
||||
}
|
||||
.search-holder {
|
||||
top: $ueTopBarH + $interiorMarginLg;
|
||||
}
|
||||
.tree-holder {
|
||||
overflow: auto;
|
||||
top: $ueTopBarH + $interiorMarginLg;
|
||||
padding-right: $interiorMargin;
|
||||
top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
|
||||
}
|
||||
}
|
||||
&.items {
|
||||
|
||||
Reference in New Issue
Block a user