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

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