ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-15 13:48:12 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Markup / scss refactor WIP

Browse Source 
- Tree item styling
This commit is contained in:
charlesh88
2018-08-15 13:57:27 -07:00
parent f6b90caaff
commit e24852bb83
4 changed files with 60 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/ui/components/layout/MctTree.vue
View File

@ -2,9 +2,9 @@
<ul class="c-tree">
<li class="c-tree__item-h">
<div class="c-tree__item">
<viewControl></viewControl>
<span class="c-object-name icon-folder">
Tree item x with a long name that forces ellipsis to occur
<viewControl class="c-tree__item__view-control"></viewControl>
<span class="c-tree__item__name c-object-name icon-folder">
<span class="c-object-name__name">Tree item x with a long name that forces ellipsis to occur</span>
</span>
</div>
<ul class="c-tree">
@ -28,16 +28,52 @@
}
&__item {
border-radius: 5px;
border-radius: $controlCr;
color: $colorItemTreeFg;
display: flex;
flex-flow: row nowrap;
align-items: center;
align-items: stretch;
cursor: pointer;
padding: 5px;
transition: background 150ms ease;
&:hover {
background: rgba(white, 0.2);
background: $colorItemTreeHoverBg;
.c-tree__item__name:before {
// Type icon
color: $colorItemTreeIconHover;
}
}
.c-tree__item__view-control {
color: $colorItemTreeVC;
margin-right: $interiorMarginSm;
}
&__name {
&:before {
color: $colorItemTreeIcon;
width: $treeTypeIconW;
}
}
}
}
.c-object-name {
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
&:before {
// Type icon
display: inline-block;
font-size: 1.3em;
margin-right: $interiorMarginSm;
}
&__name {
@include ellipsize();
display: inline;
}
}
</style>