catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less

   1
   2 @import './../../../../assets/styles/variables.less';
   3
   4 :host /deep/ input { width:100%;}
   5
   6 .properties-table {
   7     display:flex;
   8     flex-direction:column;
   9     flex: 1;
  10     height:100%;
  11     text-align:left;
  12
  13     dynamic-property {
  14         width:100%;
  15     }
  16
  17     /deep/ .dynamic-property-row {
  18          border-top:solid #d2d2d2 1px;
  19     }
  20
  21     /deep/ dynamic-property dynamic-property:first-of-type .dynamic-property-row:not(.with-top-border) {
  22         border-top: none;
  23     }
  24
  25     .table-header {
  26         font-weight:bold;
  27         border-top: #d2d2d2 solid 1px;
  28         background-color: #eaeaea;
  29
  30         .valueCol {
  31             justify-content: flex-start;
  32             padding: 5px;
  33         }
  34     }
  35     .table-header, .table-row {
  36         display: flex;
  37         flex-direction:row;
  38         flex: 0 0 auto;
  39     }
  40
  41     .table-body {
  42         display:flex;
  43         flex-direction: column;
  44         overflow-y:auto;
  45         flex: 1;
  46
  47         .no-data {
  48             border: #d2d2d2 solid 1px;
  49             border-top:none;
  50             text-align: center;
  51             height: 100%;
  52             padding: 20px;
  53         }
  54         /deep/.selected{
  55             background-color: #e6f6fb;
  56             color:  #009fdb;
  57         }
  58     }
  59
  60     .table-rows-header {
  61         font-size:16px;
  62         flex:1;
  63         border: #d2d2d2 solid 1px;
  64         border-top:none;
  65         padding: 5px;
  66         text-overflow: ellipsis;
  67         white-space: nowrap;
  68         overflow: hidden;
  69         background-color: @tlv_color_v;
  70     }
  71
  72     .table-row {
  73         &:hover {
  74              background-color:#f8f8f8; cursor:pointer;
  75         }
  76
  77         &:last-child {
  78             flex: 1 0 auto;
  79         }
  80         .selected-row {
  81             background-color:#e6f6fb;
  82         }
  83     }
  84     .cut-inner-long-text{
  85         text-overflow: ellipsis;
  86         overflow: hidden;
  87     }
  88      .table-cell {
  89         font-size:13px;
  90         flex:1;
  91         border: #d2d2d2 solid 1px;
  92         border-right:none;
  93         border-top:none;
  94         padding: 5px;
  95         text-overflow: ellipsis;
  96         white-space: nowrap;
  97
  98
  99         &:last-child {
 100             border-right:#d2d2d2 solid 1px;
 101         }
 102         &.col1 {
 103             flex: 0 0 300px;
 104             max-width:300px;
 105             display: flex;
 106             justify-content: space-between;
 107
 108             .property-name {
 109                 flex: 1;
 110             }
 111
 112             .property-description-icon {
 113                 float: right;
 114                 margin-top: 4px;
 115                 margin-left: 5px;
 116                 flex: 0 0 auto;
 117             }
 118         }
 119         &.col2 {
 120             flex: 0 0 150px;
 121             max-width:150px;
 122         }
 123
 124         &.col3 {
 125             flex:0 0 120px;
 126             max-width:120px;
 127         }
 128
 129         &.valueCol {
 130             flex: 1 0 auto;
 131             min-width: 350px;
 132             display: flex;
 133             justify-content: flex-end;
 134             padding: 0px;
 135
 136             .value-input {
 137                 flex: 1;
 138                 max-height: 24px;
 139                 border: none;
 140                 background-color: inherit;
 141
 142                 &:focus, &:active {
 143                     border:none;
 144                     outline:none;
 145                 }
 146             }
 147
 148             .delete-btn {
 149                 flex: 0 0 auto;
 150             }
 151
 152             .delete-button-container {
 153                 max-height: 24px;
 154             }
 155
 156             &.inner-table-container {
 157                 padding: 0px;
 158
 159                 .delete-button-container {
 160                     padding: 3px 5px 0 0 ;
 161                 }
 162             }
 163         }
 164
 165          &.input-value-col {
 166              padding: 5px;
 167          }
 168
 169
 170     }
 171
 172     .filtered {
 173         /deep/ .checkbox-label-content{
 174             background-color: yellow;
 175         }
 176     }
 177
 178 }