catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less

   1 .flat-children-container {
   2     .dynamic-property-row {
   3         /*create nested left border classes for up to 10 levels of nesting*/
   4         .nested-border-loop(@i) when (@i > 0) {
   5             @size: (@i - 1) *2;
   6             &.nested-level-@{i} .table-cell:first-child {
   7                 border-left: ~"solid @{size}px #009fdb";
   8             }
   9             .nested-border-loop(@i - 1)
  10         }
  11         .nested-border-loop(10);
  12     }
  13     dynamic-property {
  14         &:first-child .dynamic-property-row.with-top-border {
  15             border-top:solid 1px #d2d2d2;
  16         }
  17         &:not(:last-child) .dynamic-property-row {
  18             border-bottom:solid 1px #d2d2d2;
  19         }
  20     }
  21 }
  22 .dynamic-property-row {
  23     display:flex;
  24     flex-direction:row;
  25     align-items: stretch;
  26
  27     .table-cell {
  28         flex: 1;
  29         padding:9px;
  30         justify-content: center;
  31         overflow: hidden;
  32         text-overflow: ellipsis;
  33         white-space: nowrap;
  34
  35         &:first-child {
  36             flex: 0 0 50%;
  37             border-right:#d2d2d2 solid 1px;
  38             &:only-of-type {
  39                 flex: 1 1 100%;
  40                 border-right:none;
  41             }
  42         }
  43         &.empty {
  44             height:40px;
  45         }
  46     }
  47     .property-icon {
  48         flex: 0 0 auto;
  49         margin-right:10px;
  50         align-self:center;
  51         cursor:pointer;
  52     }
  53
  54 }
  55
  56 .filtered {
  57     /deep/ .checkbox-label-content{
  58         background-color: yellow;
  59     }
  60 }
  61 .inner-cell-div{
  62     max-width: 100%;
  63     text-overflow: ellipsis;
  64     overflow: hidden;
  65     display: inline;
  66     padding-left: 8px;
  67 }