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

   1 /*
   2  * -
   3  *  ============LICENSE_START=======================================================
   4  *  Copyright (C) 2022 Nordix Foundation.
   5  *  ================================================================================
   6  *  Licensed under the Apache License, Version 2.0 (the "License");
   7  *  you may not use this file except in compliance with the License.
   8  *  You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  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
  22 * {
  23     font-size: 0.875rem;
  24 }
  25
  26 .input-info {
  27     display: flex;
  28     flex-flow: row nowrap;
  29     align-items: center;
  30     gap: 10px;
  31     font-family: OpenSans-Regular, sans-serif;
  32     font-weight: 400;
  33 }
  34
  35 .input-label {
  36     margin: 0;
  37     font-weight: bold;
  38 }
  39
  40 .input-value {
  41     display: flex;
  42     flex-flow: row nowrap;
  43     gap: 7px;
  44
  45     input {
  46         min-width: 150px;
  47         max-width: 250px;
  48     }
  49 }
  50
  51 .input-map-key {
  52     input {
  53         max-width: 150px;
  54     }
  55 }
  56
  57 .input-action-container {
  58     flex-grow: 1;
  59     margin-left: auto;
  60 }
  61
  62 .input-action {
  63     flex-grow: 2
  64 }
  65
  66 ul {
  67     margin: 0 0 0 20px;
  68     list-style: none;
  69     line-height: 2em;
  70 }
  71
  72 li {
  73     position: relative;
  74
  75     &:before {
  76         position: absolute;
  77         left: -15px;
  78         top: 0;
  79         content: '';
  80         display: block;
  81         border-left: 1px solid #ddd;
  82         height: 1em;
  83         border-bottom: 1px solid #ddd;
  84         width: 10px;
  85     }
  86
  87     &:after {
  88         position: absolute;
  89         left: -15px;
  90         bottom: -7px;
  91         content: '';
  92         display: block;
  93         border-left: 1px solid #ddd;
  94         height: 100%;
  95     }
  96
  97     &.root {
  98         margin: 0 0 0 -20px;
  99
 100         &:before {
 101             display: none;
 102         }
 103
 104         &:after {
 105             display: none;
 106         }
 107     }
 108
 109     &:last-child {
 110         &:after {
 111             display: none
 112         }
 113     }
 114 }
 115
 116 label {
 117     margin: 0;
 118     font-weight: normal;
 119 }
 120
 121 .empty-value {
 122     color: #aaaaaa;
 123 }