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

   1 @import './../../../../../assets/styles/mixins.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         text-overflow: ellipsis;
  17         overflow: hidden;
  18         height: 20px;
  19     }
  20
  21     .inner-cell-div-multiline {
  22         max-width: 100%;
  23     }
  24
  25     .table-header {
  26         display: flex;
  27         flex-direction:row;
  28         flex: 0 0 auto;
  29         font-weight:bold;
  30         border-top: #d2d2d2 solid 1px;
  31         background-color: #f2f2f2;
  32
  33         .table-cell {
  34             color:#191919;
  35             font-size:13px;
  36         }
  37     }
  38
  39     .table-rows-header {
  40         border: #d2d2d2 solid 1px;
  41         border-top:none;
  42         display: flex;
  43         align-items: center;
  44         .archive-label{
  45             margin-left: 10px;
  46         }
  47     }
  48
  49     .table-body {
  50         display:flex;
  51         flex-direction: column;
  52         overflow-y:auto;
  53         flex: 1;
  54         background-color: @main_color_p;
  55
  56         .no-data {
  57             border: #d2d2d2 solid 1px;
  58             border-top:none;
  59             text-align: center;
  60             height: 100%;
  61             padding: 20px;
  62         }
  63         /deep/.selected{
  64             background-color: #e6f6fb;
  65             color:  #009fdb;
  66         }
  67         &.view-mode{
  68             /deep/ .dynamic-property-row:not(.selected){
  69                 background-color:#f8f8f8;
  70             }
  71         }
  72         .table-row {
  73             display: flex;
  74             flex-direction:row;
  75             flex: 0 0 auto;
  76             &.readonly{
  77                 background-color: #f8f8f8;
  78                 cursor: auto;
  79             }
  80
  81             &:hover:not(.selected){
  82                 background-color:#f8f8f8; cursor:pointer;
  83                 /deep/ .dynamic-property-row:not(.selected){
  84                     background-color:#f8f8f8; cursor:pointer;
  85                 }
  86             }
  87
  88             .selected-row {
  89                 background-color:#e6f6fb;
  90             }
  91
  92             .table-cell.valueCol {
  93                 padding:0px;
  94
  95             }
  96         }
  97     }
  98     .table-cell {
  99         font-size:13px;
 100         flex:1;
 101         border: #d2d2d2 solid 1px;
 102         border-right:none;
 103         border-top:none;
 104         padding:10px;
 105         text-overflow: ellipsis;
 106         white-space: nowrap;
 107         overflow:hidden;
 108         display: flex;
 109         min-height:40px;
 110
 111         &:last-child {
 112             border-right:#d2d2d2 solid 1px;
 113         }
 114         &.col1 {
 115             flex: 1 0 210px;
 116             max-width:300px;
 117             display: flex;
 118             justify-content: space-between;
 119             @media @smaller-screen { flex: 0 0 25%;}
 120
 121             .property-name {
 122                 flex: 1;
 123                 display: flex;
 124                 overflow: hidden;
 125                 //max-width: 90%; fix bug 327139
 126             }
 127
 128             .property-description-icon {
 129                 float: right;
 130                 margin-top: 4px;
 131                 margin-left: 15px;
 132                 flex: 0 0 auto;
 133             }
 134         }
 135         &.col2 {
 136             flex: 0 0 150px;
 137             max-width:150px;
 138             @media @smaller-screen { flex: 0 0 20%;}
 139         }
 140
 141         &.col3 {
 142             flex:0 0 120px;
 143             max-width:120px;
 144             @media @smaller-screen { flex: 0 0 15%;}
 145         }
 146
 147         &.valueCol {
 148             flex: 2 0 300px;
 149             display: flex;
 150             @media @smaller-screen { flex: 1 0 40%;}
 151         }
 152
 153
 154         /deep/ .checkbox-container {
 155             margin-right: 10px;
 156         }
 157
 158         /deep/ &.round-checkbox {
 159             .checkbox-container input[type=checkbox].checkbox-hidden {
 160                 &:checked ~ .checkbox-icon::before {
 161                     .sprite-new;
 162                     .round-checked-icon;
 163                 }
 164                 &[disabled] ~ .checkbox-icon::before {
 165                     .sprite-new;
 166                     .round-checked-icon.disabled;
 167                     background-color:inherit;
 168                     border:none;
 169                     //animation: addDisabledCheck 4s linear;
 170                 }
 171             }
 172         }
 173     }
 174
 175     .filtered {
 176         /deep/ .checkbox-label-content{
 177             background-color: yellow;
 178         }
 179     }
 180
 181     dynamic-property {
 182         width:100%;
 183         &:last-child /deep/ .dynamic-property-row {
 184             border-bottom:none;
 185         }
 186     }
 187
 188     .table-row {
 189         /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
 190             background: linear-gradient(to right, transparent 0%, #ffffff 80%);
 191             padding-left: 1em;
 192         }
 193
 194         &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
 195             background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
 196             padding-left: 1em;
 197         }
 198
 199         &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
 200             background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
 201             padding-left: 1em;
 202         }
 203
 204         &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
 205             background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
 206             padding-left: 1em;
 207         }
 208     }
 209
 210     .prop-instance-icon {
 211         vertical-align: middle;
 212         margin-right: 7px;
 213         &.defaulticon.small {
 214             background-color: @main_color_q;
 215             border-radius:14px;
 216         }
 217         // square icons
 218
 219         &.icon-group {
 220             .square-icon();
 221             background-color: @main_color_a;
 222
 223             &::before {
 224                 content: "G";
 225             }
 226         }
 227         &.icon-policy {
 228             .square-icon();
 229             background-color: @main_color_r;
 230
 231             &::before {
 232                 content: "P";
 233             }
 234         }
 235
 236     }
 237 }