catalog-ui/src/assets/styles/table-flex.less

   1 .table-container-flex {
   2     /* height: 650px; */
   3     margin-top: 35px;
   4     clear: both;
   5     .table {
   6         width: 100%;
   7         border: 1px solid #d8d8d8;
   8         .head {
   9             background-color: #eaeaea;
  10             .head-row {
  11                 color: #333333;
  12                 font-weight: bold;
  13                 text-align: center;
  14                 border-right: 1px solid @border_color_d;
  15                 padding: 8px 15px;
  16
  17                 &:last-child {
  18                     border-right: none;
  19                 }
  20
  21                 .table-header-sort-arrow {
  22                     display: inline-block;
  23                     background-color: transparent;
  24                     border: none;
  25                     color: #AAA;
  26                     margin: 8px 0 0 5px;
  27                     &.up {
  28                         border-left: 5px solid transparent;
  29                         border-right: 5px solid transparent;
  30                         border-bottom: 5px solid;
  31                     }
  32                     &.down {
  33                         border-left: 5px solid transparent;
  34                         border-right: 5px solid transparent;
  35                         border-top: 5px solid;
  36                     }
  37                 }
  38             }
  39         }
  40         .body {
  41             .scrollbar-container {
  42                 max-height: 430px;
  43                 .perfect-scrollbar;
  44             }
  45             .b_9;
  46
  47             .data-row {
  48                 border-bottom: 1px solid @border_color_d;
  49                 div {
  50
  51                     border-right: 1px solid @border_color_d;
  52
  53
  54                     &:last-child {
  55                         border-right: none;
  56                     }
  57
  58                     .table-role-select {
  59                         background-color: transparent;
  60                         border: 0;
  61                         width: 100%;
  62
  63                     }
  64                     .table-role-label {
  65                         margin-left:4px;
  66                     }
  67
  68                 }
  69
  70                 &.selected {
  71                     background-color:  #e6f6fb;
  72                 }
  73
  74                 & + div.item-opened {
  75                     border-bottom: 1px solid @border_color_d;
  76                     padding: 10px 23px;
  77                     text-align: left;
  78                     word-break: break-all;
  79                 }
  80             }
  81             .data-row:hover {
  82                 .bg_j;
  83             }
  84
  85
  86             button.add-button {
  87                 margin: 10px auto;
  88                 display: block;
  89                 border:  1px solid #eaeaea;
  90                 background-color:  @func_color_r;
  91                 box-shadow: 0px 1px 1px 0px rgba(24, 24, 25, 0.05);
  92                 width: 297px;
  93                 height: 39px;
  94                 color:  #666666;
  95                 font-size: 14px;
  96                 font-weight: bold;
  97
  98                 &:before {
  99                     .sprite-new;
 100                     .add-icon-blue;
 101                     float: left;
 102                     margin-left: 5px;
 103                     content: "";
 104                 }
 105             }
 106         }
 107
 108         .no-row-text{
 109             text-align: center;
 110             margin-top:25px;
 111
 112             a {
 113                 cursor: pointer;
 114             }
 115         }
 116
 117         .table-btn-col {
 118
 119             line-height: 0px;
 120             text-align: center;
 121             .table-delete-btn {
 122                 background-color: transparent;
 123                 border: none;
 124                 .sprite;
 125                 .sprite.e-sdc-small-icon-delete;
 126                 opacity: 0.8;
 127
 128             }
 129             .table-edit-btn {
 130                 background-color: transparent;
 131                 border: none;
 132                 .sprite;
 133                 .e-sdc-small-icon-pencil;
 134                 opacity: 0.8;
 135                 margin-right: 10px;
 136             }
 137             .table-save-btn {
 138                 background-color: transparent;
 139                 border: none;
 140                 .sprite;
 141                 .sprite.e-sdc-green-save;
 142             }
 143             .table-download-btn {
 144                 background-color: transparent;
 145                 border: none;
 146                 .hand;
 147                 margin-left: 10px;
 148                 opacity: 0.8;
 149                 .sprite;
 150                 .sprite.e-sdc-small-download;
 151             }
 152         }
 153
 154     }
 155
 156     .no-row-text {
 157         text-align: center;
 158         font-size: 15px;
 159         border-bottom: 1px solid #d8d8d8;
 160         width: 300px;
 161         margin: 26px auto;
 162         padding-bottom: 22px;
 163     }
 164
 165     .flex-container {
 166         display: flex;
 167     }
 168
 169     .flex-item {
 170         width:10px;
 171         line-height: 25px;
 172         padding: 5px 15px;
 173         flex-grow: 1;
 174         text-align: left;
 175
 176     }
 177
 178 }