catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2021 Nordix Foundation. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 @import '../../../../../../assets/styles/variables.less';
  22 @import '../../../../../../assets/styles/override.less';
  23
  24 .operation-handler {
  25     overflow: scroll;
  26     max-height: 700px;
  27     max-width: 100%;
  28     font-family: @font-opensans-regular;
  29     user-select: none;
  30     padding-top: 12px;
  31     padding-bottom: 20px;
  32
  33     .group-with-border {
  34         margin: 10px 0;
  35         padding: 10px 0;
  36         border-top: 1px solid @tlv_color_u;
  37         .content-row:not(:last-of-type) {
  38             padding-bottom: 13px;
  39         }
  40     }
  41
  42     .occurrences-label {
  43         font-family: @font-opensans-regular;
  44         margin-bottom: 19px;
  45         font-size: 14px;
  46     }
  47
  48     .i-sdc-form-label {
  49         font-size: 12px;
  50     }
  51
  52     .w-sdc-form .i-sdc-form-item {
  53         margin-bottom: 15px;
  54     }
  55
  56     textarea {
  57         min-height: 74px;
  58         margin-bottom: 18px;
  59     }
  60
  61     /deep/ .sdc-dropdown__component-container {
  62         .sdc-dropdown__header {
  63             height: 38px;
  64             line-height: 35px;
  65
  66             svg-icon {
  67                 margin: 13px 6px;
  68             }
  69         }
  70     }
  71
  72     /deep/ .sdc-input {
  73         margin-bottom: 0;
  74
  75         .sdc-input__input {
  76             height: 38px;
  77         }
  78     }
  79
  80     .side-by-side {
  81         display: flex;
  82
  83         .form-item {
  84             flex: 1;
  85
  86             &:first-child {
  87                 margin-right: 14px;
  88                 flex-basis: 37%;
  89                 flex-grow: 0;
  90                 flex-shrink: 0;
  91             }
  92
  93             &:nth-child(3) {
  94                 margin-left: 14px;
  95                 flex: 0.4;
  96             }
  97
  98             .i-sdc-form-file-upload {
  99                 height: 37px;
 100                 margin-bottom: 0;
 101
 102                 .i-sdc-form-file-name {
 103                     padding: 8px 10px;
 104                 }
 105
 106                 .i-sdc-form-file-upload-x-btn {
 107                     top: 13px;
 108                 }
 109
 110                 .file-upload-browse-btn {
 111                     height: 100%;
 112                     padding: 7px 6px;
 113                     z-index: 1;
 114                 }
 115             }
 116
 117         }
 118     }
 119
 120     .archive-warning {
 121         font-family: @font-opensans-bold;
 122         color: @main_color_i;
 123     }
 124
 125     .no-workflow-warning {
 126         font-family: @font-opensans-bold;
 127         color: @sdcui_color_red;
 128         float: right;
 129     }
 130
 131     .input-param-title {
 132         font-size: 16px;
 133         text-transform: uppercase;
 134     }
 135
 136     .separator-buttons {
 137         display: flex;
 138         justify-content: space-between;
 139         margin-top: 10px;
 140
 141         .add-param-link {
 142             &:not(.disabled):hover {
 143                 cursor: pointer;
 144             }
 145         }
 146
 147         .tab {
 148             width: 84px;
 149             text-align: center;
 150         }
 151     }
 152
 153     .input-param-component {
 154                 display: flex;
 155                 flex-direction: column;
 156                 justify-content: center;
 157                 align-items: center;
 158                 padding: 14px;
 159     }
 160
 161     .generic-table {
 162         max-height: 244px;
 163         min-height: 91px;
 164         background: @main_color_p;
 165
 166         .header-row .header-cell {
 167             .info-icon {
 168                 float: right;
 169                 position: relative;
 170                 top: 2px;
 171             }
 172             /deep/ .tooltip-inner {
 173                 padding: 2px;
 174                 max-width: 270px;
 175                 font-size: 11px;
 176             }
 177             &.remove {
 178                 padding: 10px;
 179                 font-size: 10px;
 180             }
 181         }
 182
 183         .data-row {
 184             &.empty-msg {
 185                 .bold-message {
 186                     font-family: @font-opensans-bold;
 187                 }
 188
 189                 :first-child {
 190                     &:not(:only-child) {
 191                         margin: 6px 0;
 192                     }
 193                 }
 194
 195                 display: flex;
 196                 flex-direction: column;
 197                 justify-content: center;
 198                 align-items: center;
 199                 padding: 14px;
 200             }
 201         }
 202
 203         /deep/ .cell {
 204             &.field-input-name, &.field-input-type, &.field-input-value{
 205                 flex: 1;
 206             }
 207
 208             &.field-property {
 209                 &, &:last-child {
 210                     flex: 1;
 211                 }
 212             }
 213
 214             &.field-mandatory {
 215                 flex: 0.5;
 216                 text-align: center;
 217             }
 218
 219             &.remove {
 220                 min-width: 40px;
 221                 max-width: 40px;
 222             }
 223         }
 224
 225     }
 226 }
 227
 228 .operation-handler::-webkit-scrollbar-track {
 229     border: 0;
 230 }