catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less

   1 .workspace-inputs {
   2
   3     .sdc-workspace-container .w-sdc-main-right-container .w-sdc-main-container-body-content {
   4         padding: 25px 8% 25px 8%;
   5     }
   6
   7     .w-sdc-main-container .w-sdc-main-right-container > div:first-child {
   8         /* scroll fix */
   9         padding-bottom: 0px;
  10     }
  11
  12
  13     width: 100%;
  14     display: flex;
  15
  16     .text {
  17         padding-left: 15px;
  18         .no-overflow;
  19     }
  20
  21     .title-text {
  22         color: @main_color_m;
  23         .f-type._13_m;
  24         .bold;
  25         text-overflow: ellipsis;
  26         overflow: hidden;
  27     }
  28
  29     .no-overflow {
  30         text-overflow: ellipsis;
  31         overflow: hidden;
  32         white-space: nowrap;
  33     }
  34
  35     .title-blue-text {
  36         color: @main_color_a;
  37         .f-type._13_m;
  38
  39         &.property-name-text {
  40             padding-right: 13px;
  41             border-right: 1px solid rgba(120, 136, 148, 0.26);
  42             flex-grow: 1;
  43             .no-overflow;
  44         }
  45     }
  46
  47     .instance-name-text {
  48         flex-grow: 1;
  49     }
  50
  51     ng-include {
  52         width: 45%;
  53     }
  54
  55     .w-sdc-inputs-search {
  56         padding: 10px 20px 20px 0;
  57         white-space: nowrap;
  58         position: relative;
  59         width: 60%;
  60         height: 64px;
  61
  62         .inputs-search-icon {
  63             top: 9px;
  64             right: 11px;
  65         }
  66
  67         .magnification-white {
  68             .sprite-new;
  69             .search-white-icon;
  70             .hand;
  71         }
  72
  73         .search-icon-container {
  74             width: 35px;
  75             height: 30px;
  76             background-color: @main_color_a;
  77             white-space: nowrap;
  78             float: right;
  79             position: relative;
  80             bottom: 31px;
  81             right: 1px;
  82             border-radius: 0px 4px 4px 0px;
  83             .hand
  84         }
  85     }
  86
  87     .total-inputs-count {
  88         width: 100%;
  89         font-weight: bold;
  90         text-align: left;
  91     }
  92
  93     .new-input-button {
  94         margin: 9px 0 0 0;
  95     }
  96
  97     .w-sdc-inputs-search-input {
  98         border: 1px solid @color_e;
  99         .border-radius(4px);
 100         height: 32px;
 101         margin: 0;
 102         padding: 0px 28px 3px 10px;
 103         vertical-align: 4px;
 104         width: 100%;
 105         outline: none;
 106         font-style: italic;
 107     }
 108
 109     .w-sdc-classic-btn {
 110         float: right;
 111         margin-bottom: 10px;
 112     }
 113
 114     .prop-to-input-button {
 115         position: absolute;
 116         top: 50%;
 117         margin-right: -20px;
 118         margin-bottom: -10px;
 119
 120     }
 121
 122     .table-container-flex {
 123
 124         .flex-item {
 125             line-height: 22px;
 126         }
 127         .expand-collapse-table-row {
 128
 129             .data-row {
 130                 background: @tlv_color_u;
 131                 .hand;
 132                 align-items: center;
 133                 padding: 0 12px;
 134                 margin: 1px 0px 1px 0px;
 135                 min-height: 40px;
 136             }
 137
 138             .data-row:hover {
 139                 .bg_j;
 140             }
 141         }
 142     }
 143
 144     .table {
 145         height: 640px;
 146         margin-bottom: 0;
 147         clear: both;
 148
 149         .empty-row {
 150             padding: 3px;
 151         }
 152
 153         .flex-item {
 154             line-height: 22px;
 155         }
 156
 157         .table-header {
 158
 159             line-height: 14px;
 160             background-color: @main_color_a;
 161             color: @main_color_p;
 162             text-align: left;
 163             padding: 7px 5px 7px 10px;
 164             .f-type._14_m;
 165         }
 166         .head {
 167             background-color: #e6e6e6;
 168         }
 169
 170         .body {
 171             .scrollbar-container {
 172                 .perfect-scrollbar;
 173                 max-height: 610px;
 174             }
 175
 176             .expand-collapse-inputs-table-icon {
 177                 .hand;
 178                 .sprite-new;
 179                 .arrow-up;
 180                 transition: .3s all;
 181                 position: relative;
 182                 left: 8px;
 183                 border: none !important;
 184                 padding: 0px 10px 0px 10px;
 185             }
 186
 187             .table-col-text {
 188                 margin-left: 14px;
 189             }
 190         }
 191     }
 192
 193     .inputs-header {
 194         width: 100%;
 195         position: relative;
 196         bottom: 31px;
 197     }
 198
 199     .inputs-tables-container {
 200         width: 100%;
 201         min-width: 100%;
 202         display: flex;
 203     }
 204
 205     .inputs-button-container {
 206         width: 8%;
 207         min-width: 8%;
 208         display: flex;
 209
 210         .right-arrow-btn {
 211             .sprite-new;
 212             .blue-right-arrow-circle;
 213             margin: auto;
 214             cursor: pointer;
 215         }
 216     }
 217
 218     .table-container-flex {
 219         margin-top: 0;
 220         width: 46%;
 221         min-width: 46%;
 222         display: inline-block;
 223         float: left;
 224     }
 225 }