catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.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 @import '../../../../assets/styles/sprite-old.less';
  24 .interface-definition {
  25     font-size: 14px;
  26
  27     .delete-col-header{
  28         .sprite;
  29         .sprite.e-sdc-small-icon-delete;
  30     }
  31
  32     .field-delete{
  33         display: flex;
  34         align-items: center;
  35         justify-content: center;
  36     }
  37
  38     .interface-empty-msg {
  39         .bold-message {
  40             font-family: @font-opensans-bold;
  41         }
  42
  43         :first-child {
  44             &:not(:only-child) {
  45                 margin: 6px 0;
  46             }
  47         }
  48
  49         display: flex;
  50         flex-direction: column;
  51         justify-content: center;
  52         align-items: center;
  53         padding: 14px;
  54     }
  55
  56     .top-add-btn {
  57         position: relative;
  58         top: -31px;
  59         text-transform: uppercase;
  60         font-size: 14px;
  61         font-family: @font-opensans-medium;
  62     }
  63
  64     .link {
  65         color: @sdcui_color_blue;
  66         text-decoration: underline;
  67         font-family: @font-opensans-regular;
  68
  69         &:not(.disabled) {
  70             &:not(.empty-list-add-btn) {
  71                 &:hover {
  72                     color: @sdcui_color_dark-blue;
  73                     cursor: pointer;
  74                 }
  75             }
  76         }
  77     }
  78
  79     .operation-list {
  80         border-top: 1px solid @main_color_o;
  81         padding-top: 5px;
  82
  83         .empty-list-container {
  84             width: 100%;
  85             display: flex;
  86             justify-content: center;
  87
  88             .empty-list-add-btn {
  89                 display: flex;
  90                 flex-direction: column;
  91                 justify-content: center;
  92                 align-items: center;
  93
  94                 border: 1px solid @main_color_o;
  95                 margin-top: 50px;
  96
  97                 height: 229px;
  98                 width: 480px;
  99
 100                 &.disabled {
 101                     pointer-events: none;
 102                 }
 103
 104                 &:hover {
 105                     &:not(.disabled) {
 106                         border: 1px solid @sdcui_color_blue;
 107                         cursor: pointer;
 108                     }
 109                 }
 110
 111                 .button-text {
 112                     margin-top: 9px;
 113                     font-family: @font-opensans-medium;
 114                     font-size: 16px;
 115                     text-transform: uppercase;
 116                     color: @sdcui_color_blue;
 117                 }
 118             }
 119         }
 120
 121         .expand-collapse {
 122             margin-top: 4px;
 123             margin-bottom: 18px;
 124             color: @sdcui_color_light-gray;
 125         }
 126
 127         .interface-row {
 128             width: 100%;
 129             margin-top: 13px;
 130             border-bottom: 1px solid @main_color_o;
 131             padding-left: 4px;
 132             min-height: 37px;
 133
 134
 135             .interface-accordion {
 136                 cursor: pointer;
 137
 138                 .chevron-container {
 139                     position: relative;
 140                     margin-right: 5px;
 141
 142                     &.isCollapsed {
 143                         right: -6px;
 144                         top: 0;
 145                         * {
 146                             transform: rotate(270deg);
 147                         }
 148                     }
 149                     &:not(.isCollapsed) {
 150                         top: 6px;
 151                     }
 152                     * {
 153                         &:hover {
 154                             cursor: pointer;
 155                         }
 156                     }
 157                 }
 158                 .interface-name {
 159                     font-size: 18px;
 160                     font-family: @font-opensans-bold;
 161                     margin-bottom: 15px;
 162                 }
 163             }
 164
 165             .generic-table {
 166                 margin-bottom: 24px;
 167                 margin-top: 10px;
 168                 margin-left: 22px;
 169                 font-size: 14px;
 170
 171                 .header-row, .data-row {
 172                     .cell {
 173                         &.field-description {
 174                             flex: 2.5;
 175                         }
 176
 177                         &.field-actions {
 178                             flex-basis: 72px;
 179                             display: flex;
 180                             justify-content: center;
 181                             align-items: center;
 182                         }
 183                     }
 184                 }
 185
 186                 .header-row {
 187                     .cell {
 188                         background: @sdcui_color_silver;
 189
 190                         &.field-actions {
 191                             font-size: 10px;
 192                         }
 193                     }
 194                 }
 195
 196                 .data-row {
 197                     cursor: pointer;
 198                     .table-delete-btn{
 199                         .sprite;
 200                         .sprite.e-sdc-small-icon-delete;
 201                         border: none;
 202                         display: none !important;
 203                     }
 204
 205                     &:hover {
 206                         background: @sdcui_color_light-silver;
 207                         .table-delete-btn{
 208                             display: inline-block !important;
 209                         }
 210                         .cell {
 211                             &.field-name {
 212                                 color: @sdcui_color_dark-blue;
 213                             }
 214                         }
 215                     }
 216
 217                     &:not(:hover) {
 218                        .field-actions {
 219                             visibility: hidden;
 220                         }
 221                     }
 222
 223                     .cell {
 224                         white-space: nowrap;
 225                         text-overflow: ellipsis;
 226                         overflow: hidden;
 227
 228                         &.field-description {
 229                             &:not(.collapsed) {
 230                                 white-space: normal;
 231                             }
 232                             &.collapsed {
 233                                 text-overflow: clip;
 234                             }
 235                             .more-or-less {
 236                                 margin-left: 5px;
 237                             }
 238                         }
 239
 240                         &.field-actions {
 241                             .delete-action {
 242                                 position: relative;
 243                                 top: 2px;
 244                             }
 245                         }
 246                     }
 247
 248                 }
 249             }
 250
 251         }
 252     }
 253 }