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

[Frontend] Refinements to t-item-icon

Browse Source 
open #90
Scale approach to link indicator changed from
font-size to transform: scale;
Now works in tree, item grid and Inspector;
This commit is contained in:
Charles Hacskaylo
2015-10-28 21:34:01 -07:00
parent 134d853f19
commit 56e8cd81e6
7 changed files with 126 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,7 +61,8 @@ $ueBrowseGridItemBottomBarH: 30px;
$itemPadLR: 5px;
// Tree
$treeVCW: 10px;
$treeTypeIconH: 16px;
$treeTypeIconH: 1.4em; // was 16px
$treeTypeIconHPx: 16px;
$treeTypeIconW: 20px;
$treeContextTriggerW: 20px;
// Tabular

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

@@ -86,18 +86,18 @@
@extend .ui-symbol;
@extend .icon;
display: inline-block;
line-height: normal; // This is Ok for the symbolsfont
position: relative;
&.l-icon-link {
&:before {
color: $colorIconLink;
height: 30%; width: auto;
line-height: normal;
position: absolute;
font-size: 0.35em;
left: 0px;
bottom: 10%;
z-index: 2;
content: "\f4";
height: auto; width: auto;
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
@include transform-origin(bottom, left);
@include transform(scale(0.3));
z-index: 2;
}
}
}

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

@@ -349,10 +349,7 @@
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
//position: relative;
top: 50%;
@include webkitProp(transform, translateY(-50%));
//-webkit-transform: translateY(-50%);
//-ms-transform: translateY(-50%);
//transform: translateY(-50%);
@include transform(translateY(-50%));
}
@mixin verticalCenterBlock($holderH, $itemH) {

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

@@ -66,25 +66,27 @@ ul.tree {
line-height: $menuLineH;
.t-item-icon {
$d: $treeTypeIconH; // 16px is crisp size
@include txtShdwSubtle($shdwItemTreeIcon);
font-size: $d;
font-size: $treeTypeIconH;
color: $colorItemTreeIcon;
position: absolute;
left: $interiorMargin; right: auto; width: $d;
left: $interiorMargin;
top: 50%;
width: $treeTypeIconH;
@include transform(translateY(-50%));
}
.type-icon {
//@include absPosDefault(0, false);
$d: $treeTypeIconH; // 16px is crisp size
$d: $treeTypeIconH;
@include txtShdwSubtle($shdwItemTreeIcon);
font-size: $d;
font-size: $treeTypeIconH;
color: $colorItemTreeIcon;
left: $interiorMargin;
position: absolute;
@include verticalCenterBlock($menuLineHPx, $d);
@include verticalCenterBlock($menuLineHPx, $treeTypeIconHPx);
line-height: 100%;
right: auto; width: $d;
right: auto; width: $treeTypeIconH;
.icon {
&.l-icon-link,
@@ -123,7 +125,7 @@ ul.tree {
.view-control {
color: $colorItemTreeSelectedVC;
}
.label .type-icon {
.t-object-label .t-item-icon {
color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
}
}
@@ -134,7 +136,7 @@ ul.tree {
&:hover {
background: $colorItemTreeHoverBg;
color: $colorItemTreeHoverFg;
.icon {
.t-item-icon {
color: $colorItemTreeIconHover;
}
}