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