catalog-ui/src/app/ng2/components/logic/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         max-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: 13px;
  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: 1 0 120px;
  89             max-width:120px;
  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              .value-input {
 116                 flex: 1;
 117                 border: none;
 118                 background-color: inherit;
 119
 120                 &:focus, &:active {
 121                     border:none;
 122                     outline:none;
 123                 }
 124             }
 125
 126             .delete-btn {
 127                 flex: 0 0 auto;
 128             }
 129
 130             .delete-button-container {
 131                 max-height: 24px;
 132             }
 133
 134             &.inner-table-container {
 135                 padding: 0px;
 136
 137                 .delete-button-container {
 138                     padding: 0 8px 0 0 ;
 139                 }
 140             }
 141         }
 142
 143          &.input-value-col {
 144              padding: 8px;
 145          }
 146
 147
 148     }
 149
 150     .filtered {
 151         /deep/ .checkbox-label-content{
 152             background-color: yellow;
 153         }
 154     }
 155
 156 }