catalog-ui/src/app/ng2/components/inputs-table/inputs-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         width: 100%;
  15         text-overflow: ellipsis;
  16         overflow: hidden;
  17         height: 20px;
  18     }
  19
  20
  21     .table-header {
  22         font-weight:bold;
  23         border-top: #d2d2d2 solid 1px;
  24         background-color: #eaeaea;
  25         color:#191919;
  26
  27         .table-cell {
  28             font-size: 14px;
  29         }
  30         .valueCol {
  31             justify-content: flex-start;
  32             padding: 10px;
  33         }
  34     }
  35     .table-header, .table-row {
  36         display: flex;
  37         flex-direction:row;
  38         flex: 0 0 auto;
  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     }
  59
  60     .table-row {
  61         &:hover {
  62              background-color:#f8f8f8; cursor:pointer;
  63         }
  64
  65         &:last-child {
  66             flex: 1 0 auto;
  67         }
  68         .selected-row {
  69             background-color:#e6f6fb;
  70         }
  71     }
  72
  73      .table-cell {
  74         font-size:13px;
  75         flex:1;
  76         border: #d2d2d2 solid 1px;
  77         border-right:none;
  78         border-top:none;
  79         padding: 10px;
  80         text-overflow: ellipsis;
  81         white-space: nowrap;
  82
  83
  84         &:last-child {
  85             border-right:#d2d2d2 solid 1px;
  86         }
  87         &.col1 {
  88             flex: 0 0 300px;
  89             max-width:300px;
  90             display: flex;
  91             justify-content: space-between;
  92
  93             .property-name {
  94                 flex: 1;
  95             }
  96
  97             .property-description-icon {
  98                 float: right;
  99                 margin-top: 4px;
 100                 margin-left: 5px;
 101                 flex: 0 0 auto;
 102             }
 103         }
 104         &.col2 {
 105             flex: 0 0 150px;
 106             max-width:150px;
 107         }
 108
 109         &.col3 {
 110             flex:0 0 120px;
 111             max-width:120px;
 112         }
 113
 114         &.valueCol {
 115             flex: 1 0 auto;
 116             min-width: 350px;
 117             display: flex;
 118             justify-content: flex-end;
 119             padding: 0px;
 120             align-items: center;
 121
 122             .value-input {
 123                 flex: 1;
 124                 max-height: 24px;
 125                 border: none;
 126                 background-color: inherit;
 127
 128                 &:focus, &:active {
 129                     border:none;
 130                     outline:none;
 131                 }
 132             }
 133
 134             .delete-btn {
 135                 flex: 0 0 auto;
 136             }
 137
 138             .delete-button-container {
 139                 max-height: 24px;
 140             }
 141
 142             &.inner-table-container {
 143                 padding: 0px;
 144
 145                 .delete-button-container {
 146                     padding: 3px 5px 0 0 ;
 147                 }
 148             }
 149         }
 150
 151          &.input-value-col {
 152              padding: 8px;
 153          }
 154
 155
 156     }
 157
 158     .filtered {
 159         /deep/ .checkbox-label-content{
 160             background-color: yellow;
 161         }
 162     }
 163
 164 }