catalog-ui/src/app/ng2/components/properties-table/properties-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     .inner-cell-div{
  14         max-width: 100%;
  15         text-overflow: ellipsis;
  16         overflow: hidden;
  17         height: 20px;
  18     }
  19
  20     .table-header, .table-row {
  21         display: flex;
  22         flex-direction:row;
  23         flex: 0 0 auto;
  24     }
  25
  26     .table-header {
  27         font-weight:bold;
  28         border-top: #d2d2d2 solid 1px;
  29         background-color: #eaeaea;
  30
  31         .valueCol {
  32             justify-content: flex-start;
  33             padding: 5px;
  34         }
  35     }
  36
  37     .table-rows-header {
  38         font-size:16px;
  39         flex:1;
  40         border: #d2d2d2 solid 1px;
  41         border-top:none;
  42         padding: 5px;
  43         text-overflow: ellipsis;
  44         white-space: nowrap;
  45         overflow: hidden;
  46         background-color: @tlv_color_v;
  47     }
  48
  49     .table-body {
  50         display:flex;
  51         flex-direction: column;
  52         overflow-y:auto;
  53         flex: 1;
  54
  55         .no-data {
  56             border: #d2d2d2 solid 1px;
  57             border-top:none;
  58             text-align: center;
  59             height: 100%;
  60             padding: 20px;
  61         }
  62         /deep/.selected{
  63             background-color: #e6f6fb;
  64             color:  #009fdb;
  65         }
  66     }
  67
  68
  69     .table-row {
  70         &:hover {
  71              background-color:#f8f8f8; cursor:pointer;
  72         }
  73
  74         &:last-child {
  75             flex: 1 0 auto;
  76         }
  77         .selected-row {
  78             background-color:#e6f6fb;
  79         }
  80     }
  81     .cut-inner-long-text{
  82         text-overflow: ellipsis;
  83         overflow: hidden;
  84     }
  85      .table-cell {
  86         font-size:13px;
  87         flex:1;
  88         border: #d2d2d2 solid 1px;
  89         border-right:none;
  90         border-top:none;
  91         padding: 5px;
  92         text-overflow: ellipsis;
  93         white-space: nowrap;
  94         display: flex;
  95
  96         &:last-child {
  97             border-right:#d2d2d2 solid 1px;
  98         }
  99         &.col1 {
 100             flex: 0 0 300px;
 101             max-width:300px;
 102             display: flex;
 103             justify-content: space-between;
 104
 105             .property-name {
 106                 flex: 1;
 107                 display: flex;
 108                 max-width: 270px;
 109             }
 110
 111             .property-description-icon {
 112                 float: right;
 113                 margin-top: 4px;
 114                 margin-left: 5px;
 115                 flex: 0 0 auto;
 116             }
 117
 118             /deep/ .checkbox-container {
 119                 margin-right: 5px;
 120             }
 121         }
 122         &.col2 {
 123             flex: 0 0 150px;
 124             max-width:150px;
 125         }
 126
 127         &.col3 {
 128             flex:0 0 120px;
 129             max-width:120px;
 130         }
 131
 132         &.valueCol {
 133             flex: 1;
 134             min-width: 350px;
 135             display: flex;
 136             justify-content: flex-end;
 137             padding: 0px;
 138         }
 139     }
 140
 141     .filtered {
 142         /deep/ .checkbox-label-content{
 143             background-color: yellow;
 144         }
 145     }
 146
 147     dynamic-property {
 148         width:100%;
 149     }
 150
 151 }