.flat-children-container { .dynamic-property-row { /*create nested left border classes for up to 10 levels of nesting*/ .nested-border-loop(@i) when (@i > 0) { @size: (@i - 1) *2; &.nested-level-@{i} .table-cell:first-child { border-left: ~"solid @{size}px #009fdb"; } .nested-border-loop(@i - 1) } .nested-border-loop(10); } dynamic-property { &:first-child .dynamic-property-row.with-top-border { border-top:solid 1px #d2d2d2; } &:not(:last-child) .dynamic-property-row { border-bottom:solid 1px #d2d2d2; } } } .dynamic-property-row { display:flex; flex-direction:row; align-items: stretch; .table-cell { flex: 1; padding:9px; justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:first-child { flex: 0 0 50%; border-right:#d2d2d2 solid 1px; &:only-of-type { flex: 1 1 100%; border-right:none; } } &.empty { height:40px; } } .property-icon { flex: 0 0 auto; margin-right:10px; align-self:center; cursor:pointer; } } .filtered { /deep/ .checkbox-label-content{ background-color: yellow; } } .inner-cell-div{ max-width: 100%; text-overflow: ellipsis; overflow: hidden; display: inline; padding-left: 8px; }