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     font-family: @font-opensans-regular;
  26     user-select: none;
  27     padding-top: 12px;
  28     padding-bottom: 20px;
  29
  30     .group-with-border {
  31         margin: 10px 0;
  32         padding: 10px 0;
  33         border-top: 1px solid @tlv_color_u;
  34         .content-row:not(:last-of-type) {
  35             padding-bottom: 13px;
  36         }
  37     }
  38
  39     .occurrences-label {
  40         font-family: @font-opensans-regular;
  41         margin-bottom: 19px;
  42         font-size: 14px;
  43     }
  44
  45     .i-sdc-form-label {
  46         font-size: 12px;
  47     }
  48
  49     .w-sdc-form .i-sdc-form-item {
  50         margin-bottom: 15px;
  51     }
  52
  53     textarea {
  54         min-height: 74px;
  55         margin-bottom: 18px;
  56     }
  57
  58     /deep/ .sdc-dropdown__component-container {
  59         .sdc-dropdown__header {
  60             height: 38px;
  61             line-height: 35px;
  62
  63             svg-icon {
  64                 margin: 13px 6px;
  65             }
  66         }
  67     }
  68
  69     /deep/ .sdc-input {
  70         margin-bottom: 0;
  71
  72         .sdc-input__input {
  73             height: 38px;
  74         }
  75     }
  76
  77     .side-by-side {
  78         display: flex;
  79
  80         .form-item {
  81             flex: 1;
  82
  83             &:first-child {
  84                 margin-right: 14px;
  85                 flex-basis: 37%;
  86                 flex-grow: 0;
  87                 flex-shrink: 0;
  88             }
  89
  90             &:nth-child(3) {
  91                 margin-left: 14px;
  92                 flex: 0.4;
  93             }
  94
  95             .i-sdc-form-file-upload {
  96                 height: 37px;
  97                 margin-bottom: 0;
  98
  99                 .i-sdc-form-file-name {
 100                     padding: 8px 10px;
 101                 }
 102
 103                 .i-sdc-form-file-upload-x-btn {
 104                     top: 13px;
 105                 }
 106
 107                 .file-upload-browse-btn {
 108                     height: 100%;
 109                     padding: 7px 6px;
 110                     z-index: 1;
 111                 }
 112             }
 113
 114         }
 115     }
 116
 117     .archive-warning {
 118         font-family: @font-opensans-bold;
 119         color: @main_color_i;
 120     }
 121
 122     .no-workflow-warning {
 123         font-family: @font-opensans-bold;
 124         color: @sdcui_color_red;
 125         float: right;
 126     }
 127
 128     .input-param-title {
 129         font-size: 16px;
 130         text-transform: uppercase;
 131     }
 132
 133     .separator-buttons {
 134         display: flex;
 135         justify-content: space-between;
 136         margin-top: 10px;
 137
 138         .add-param-link {
 139             &:not(.disabled):hover {
 140                 cursor: pointer;
 141             }
 142         }
 143
 144         .tab {
 145             width: 84px;
 146             text-align: center;
 147         }
 148     }
 149
 150     .input-param-component {
 151                 display: flex;
 152                 flex-direction: column;
 153                 justify-content: center;
 154                 align-items: center;
 155                 padding: 14px;
 156     }
 157
 158     .generic-table {
 159         max-height: 244px;
 160         min-height: 91px;
 161         background: @main_color_p;
 162
 163         .header-row .header-cell {
 164             .info-icon {
 165                 float: right;
 166                 position: relative;
 167                 top: 2px;
 168             }
 169             /deep/ .tooltip-inner {
 170                 padding: 2px;
 171                 max-width: 270px;
 172                 font-size: 11px;
 173             }
 174             &.remove {
 175                 padding: 10px;
 176                 font-size: 10px;
 177             }
 178         }
 179
 180         .data-row {
 181             &.empty-msg {
 182                 .bold-message {
 183                     font-family: @font-opensans-bold;
 184                 }
 185
 186                 :first-child {
 187                     &:not(:only-child) {
 188                         margin: 6px 0;
 189                     }
 190                 }
 191
 192                 display: flex;
 193                 flex-direction: column;
 194                 justify-content: center;
 195                 align-items: center;
 196                 padding: 14px;
 197             }
 198         }
 199
 200         /deep/ .cell {
 201             &.field-input-name, &.field-input-type, &.field-input-value{
 202                 flex: 1;
 203             }
 204
 205             &.field-property {
 206                 &, &:last-child {
 207                     flex: 1;
 208                 }
 209             }
 210
 211             &.field-mandatory {
 212                 flex: 0.5;
 213                 text-align: center;
 214             }
 215
 216             &.remove {
 217                 min-width: 40px;
 218                 max-width: 40px;
 219             }
 220         }
 221
 222     }
 223 }