catalog-ui/src/app/ng2/pages/interface-definition/operation-creator/operation-creator-interface-definition.component.less

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