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

   1 @import './../../../../assets/styles/variables.less';
   2 @import '../../../../assets/styles/sprite';
   3 @smaller-screen: ~"only screen and (max-width: 1580px)";
   4
   5 :host /deep/ input { width:100%;}
   6
   7 .properties-table {
   8     display:flex;
   9     flex-direction:column;
  10     flex: 1;
  11     height:100%;
  12     text-align:left;
  13
  14
  15     .inner-cell-div{
  16         max-width: 100%;
  17         text-overflow: ellipsis;
  18         overflow: hidden;
  19         height: 20px;
  20     }
  21
  22     .table-header {
  23         display: flex;
  24         flex-direction:row;
  25         flex: 0 0 auto;
  26         font-weight:bold;
  27         border-top: #d2d2d2 solid 1px;
  28         background-color: #f2f2f2;
  29
  30         .table-cell {
  31             color:#191919;
  32             font-size:14px;
  33         }
  34     }
  35
  36     .table-rows-header {
  37         border: #d2d2d2 solid 1px;
  38         border-top:none;
  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         .table-row {
  59             display: flex;
  60             flex-direction:row;
  61             flex: 0 0 auto;
  62
  63             &:hover:not(.selected){
  64                 background-color:#f8f8f8; cursor:pointer;
  65             }
  66
  67             .selected-row {
  68                 background-color:#e6f6fb;
  69             }
  70
  71             .table-cell.valueCol {
  72                 padding:0px;
  73
  74             }
  75         }
  76     }
  77     .table-cell {
  78         font-size:13px;
  79         flex:1;
  80         border: #d2d2d2 solid 1px;
  81         border-right:none;
  82         border-top:none;
  83         padding:10px;
  84         text-overflow: ellipsis;
  85         white-space: nowrap;
  86         overflow:hidden;
  87         display: flex;
  88         min-height:40px;
  89
  90         &:last-child {
  91             border-right:#d2d2d2 solid 1px;
  92         }
  93         &.col1 {
  94             flex: 0 0 300px;
  95             max-width:300px;
  96             display: flex;
  97             justify-content: space-between;
  98             @media @smaller-screen { flex: 0 0 25%;}
  99
 100             .property-name {
 101                 flex: 1;
 102                 display: flex;
 103                 max-width: 270px;
 104             }
 105
 106             .property-description-icon {
 107                 float: right;
 108                 margin-top: 4px;
 109                 margin-left: 5px;
 110                 flex: 0 0 auto;
 111             }
 112         }
 113         &.col2 {
 114             flex: 0 0 150px;
 115             max-width:150px;
 116             @media @smaller-screen { flex: 0 0 20%;}
 117         }
 118
 119         &.col3 {
 120             flex:0 0 120px;
 121             max-width:120px;
 122             @media @smaller-screen { flex: 0 0 15%;}
 123         }
 124
 125         &.valueCol {
 126             flex: 1 0 350px;
 127             display: flex;
 128             @media @smaller-screen { flex: 1 0 40%;}
 129         }
 130
 131
 132         /deep/ .checkbox-container {
 133             margin-right: 10px;
 134         }
 135
 136         /deep/ &.round-checkbox {
 137             .checkbox-container input[type=checkbox].checkbox-hidden {
 138                 &:checked ~ .checkbox-icon::before {
 139                     .sprite-new;
 140                     .round-checked-icon;
 141                 }
 142                 &[disabled] ~ .checkbox-icon::before {
 143                     .sprite-new;
 144                     .round-checked-icon.disabled;
 145                     background-color:inherit;
 146                     border:none;
 147                     //animation: addDisabledCheck 4s linear;
 148                 }
 149             }
 150         }
 151     }
 152
 153     .filtered {
 154         /deep/ .checkbox-label-content{
 155             background-color: yellow;
 156         }
 157     }
 158
 159     dynamic-property {
 160         width:100%;
 161         &:last-child /deep/ .dynamic-property-row {
 162             border-bottom:none;
 163         }
 164     }
 165
 166 }