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

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