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