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

[Frontend] Markup and CSS for link icon indicators

Browse Source 
WTD-1423
Grid item version with link at bottom right of main icon;
This commit is contained in:
Charles Hacskaylo
2015-06-30 17:58:56 -07:00
parent 3e5fa30d9d
commit d5d7ac90ac
9 changed files with 163 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
platform/commonUI/general/res/sass/_constants.scss
View File

@@ -42,6 +42,7 @@ $colorKeySelectedBg: #005177;
$colorKeyFg: #fff;
$colorAlt1: #ffc700;
$colorAlert: #ff3c00;
$colorIconLink: #5bf5ef;
$colorPausedBg: #c56f01;
$colorPausedFg: #fff;
$colorCreateBtn: $colorKey;
@@ -145,7 +146,7 @@ $controlDisabledOpacity: 0.3;
$formLabelW: 20%;
$formInputH: 22px;
$formRowCtrlsH: 14px;
$menuLineH: 1.4rem;
$menuLineH: 1.5rem;
$scrollbarTrackSize: 10px;
$scrollbarTrackColorBg: rgba(#000, 0.4);
$btnStdH: 25px;

3
platform/commonUI/general/res/sass/_icons.scss
View File

@@ -85,3 +85,6 @@
//font-size: $menuLineH * 0.95 // Normalizing for new icomoon symbols font
}
.l-link-icon {
}

30
platform/commonUI/general/res/sass/items/_item.scss
View File

@@ -29,6 +29,9 @@
&.grid-item {
//div { @include test() }
$d: $ueBrowseGridItemLg;
//$iconD: 100px;
$iconMargin: 40px;
$iconD: ($d - ($iconMargin * 2)) * 0.85;
$transTime: 200ms;
@include btnSubtle($colorItemBase);
box-sizing: border-box;
@@ -39,12 +42,12 @@
margin-bottom: $interiorMarginSm;
margin-right: $interiorMarginSm;
position: relative;
.item-main .item-type {
@include trans-prop-nice("color", $transTime);
}
&:hover .item-main {
.item-type {
color: $colorKey !important;
.l-link-icon {
color: $colorIconLink;
}
}
.item-open {
//display: block;
@@ -80,10 +83,29 @@
line-height: $lh;
z-index: 1;
.item-type {
//@include trans-prop-nice("color", $transTime);
@include absPosDefault($iconMargin, false);
//@include test(red);
color: $colorItemFg;
text-align: center;
font-size: 6em;
font-size: $iconD * 0.95; //6em;
line-height: $iconD;
bottom: auto;
height: $iconD;
top: $iconMargin - 10;
//line-height: $lh;
.l-link-icon {
//@include test(blue);
//@include trans-prop-nice("color", $transTime);
color: darken($colorIconLink, 35%);
height: 36px;
line-height: 36px;
position: absolute;
font-size: 32px;
right: -10px;
bottom: -10px;
z-index: 2;
}
}
.item-open {
//@include test();

17
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@@ -29,7 +29,7 @@ ul.tree {
@include border-radius($basicCr);
@include single-transition(background-color, 0.25s);
display: block;
font-size: 0.80em;
font-size: 0.8em;
height: $menuLineH;
line-height: $menuLineH;
margin-bottom: $interiorMarginSm;
@@ -53,9 +53,10 @@ ul.tree {
left: $runningItemW + $interiorMargin;
.type-icon {
@include absPosDefault();
@include absPosDefault(0, false);
@include txtShdwSubtle(0.6);
color: $colorItemTreeIcon;
right: auto; width: 1em;
.alert {
@include txtShdwSubtle(0.3);
background: $colorBodyBg;
@@ -71,11 +72,21 @@ ul.tree {
position: absolute;
z-index: 2;
}
.icon.l-link-icon {
@include txtShdwSubtle(1);
$d: 20px;
color: $colorIconLink;
position: absolute;
font-size: 0.5em;
right: -5px;
bottom: -8px;
z-index: 2;
}
}
.title-label {
@include absPosDefault();
display: block;
left: $runningItemW + ($interiorMargin);
left: $runningItemW + ($interiorMargin * 2);
//right: $treeContextTriggerW + $interiorMargin;
overflow: hidden;
text-overflow: ellipsis;