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