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     display:flex;
  27     flex-direction:row;
  28     height: 100%;
  29     .delete-col-header{
  30         .sprite;
  31         .sprite.e-sdc-small-icon-delete;
  32     }
  33
  34     .field-delete{
  35         display: flex;
  36         align-items: center;
  37         justify-content: center;
  38     }
  39
  40     .interface-empty-msg {
  41         .bold-message {
  42             font-family: @font-opensans-bold;
  43         }
  44
  45         :first-child {
  46             &:not(:only-child) {
  47                 margin: 6px 0;
  48             }
  49         }
  50
  51         display: flex;
  52         flex-direction: column;
  53         justify-content: center;
  54         align-items: center;
  55         padding: 14px;
  56     }
  57
  58     .link {
  59         color: @sdcui_color_blue;
  60         text-decoration: underline;
  61         font-family: @font-opensans-regular;
  62
  63         &:not(.disabled) {
  64             &:not(.empty-list-add-btn) {
  65                 &:hover {
  66                     color: @sdcui_color_dark-blue;
  67                     cursor: pointer;
  68                 }
  69             }
  70         }
  71     }
  72
  73     .operation-list {
  74         border-top: 1px solid @main_color_o;
  75         padding-top: 5px;
  76
  77         .empty-list-container {
  78             width: 100%;
  79             display: flex;
  80             justify-content: center;
  81
  82             .empty-list-add-btn {
  83                 display: flex;
  84                 flex-direction: column;
  85                 justify-content: center;
  86                 align-items: center;
  87
  88                 border: 1px solid @main_color_o;
  89                 margin-top: 50px;
  90
  91                 height: 229px;
  92                 width: 480px;
  93
  94                 &.disabled {
  95                     pointer-events: none;
  96                 }
  97
  98                 &:hover {
  99                     &:not(.disabled) {
 100                         border: 1px solid @sdcui_color_blue;
 101                         cursor: pointer;
 102                     }
 103                 }
 104
 105                 .button-text {
 106                     margin-top: 9px;
 107                     font-family: @font-opensans-medium;
 108                     font-size: 16px;
 109                     text-transform: uppercase;
 110                     color: @sdcui_color_blue;
 111                 }
 112             }
 113         }
 114
 115         .expand-collapse {
 116             margin-top: 4px;
 117             margin-bottom: 18px;
 118             color: @sdcui_color_light-gray;
 119         }
 120
 121         .interface-row {
 122             width: 100%;
 123             margin-top: 13px;
 124             border-bottom: 1px solid @main_color_o;
 125             padding-left: 4px;
 126             min-height: 37px;
 127
 128
 129             .interface-accordion {
 130                 cursor: pointer;
 131
 132                 .chevron-container {
 133                     position: relative;
 134                     margin-right: 5px;
 135
 136                     &.isCollapsed {
 137                         right: -6px;
 138                         top: 0;
 139                         * {
 140                             transform: rotate(270deg);
 141                         }
 142                     }
 143                     &:not(.isCollapsed) {
 144                         top: 6px;
 145                     }
 146                     * {
 147                         &:hover {
 148                             cursor: pointer;
 149                         }
 150                     }
 151                 }
 152                 .interface-name {
 153                     font-size: 18px;
 154                     font-family: @font-opensans-bold;
 155                     margin-bottom: 15px;
 156                 }
 157             }
 158
 159             .generic-table {
 160                 margin-bottom: 24px;
 161                 margin-top: 10px;
 162                 margin-left: 22px;
 163                 font-size: 14px;
 164
 165                 .header-row, .data-row {
 166                     .cell {
 167                         &.field-description {
 168                             flex: 2.5;
 169                         }
 170
 171                         &.field-actions {
 172                             flex-basis: 72px;
 173                             display: flex;
 174                             justify-content: center;
 175                             align-items: center;
 176                         }
 177                     }
 178                 }
 179
 180                 .header-row {
 181                     .cell {
 182                         background: @sdcui_color_silver;
 183
 184                         &.field-actions {
 185                             font-size: 10px;
 186                         }
 187                     }
 188                 }
 189
 190                 .data-row {
 191                     cursor: pointer;
 192                     .table-delete-btn{
 193                         .sprite;
 194                         .sprite.e-sdc-small-icon-delete;
 195                         border: none;
 196                         display: none !important;
 197                     }
 198
 199                     &:hover {
 200                         background: @sdcui_color_light-silver;
 201                         .table-delete-btn{
 202                             display: inline-block !important;
 203                         }
 204                         .cell {
 205                             &.field-name {
 206                                 color: @sdcui_color_dark-blue;
 207                             }
 208                         }
 209                     }
 210
 211                     &:not(:hover) {
 212                        .field-actions {
 213                             visibility: hidden;
 214                         }
 215                     }
 216
 217                     .cell {
 218                         white-space: nowrap;
 219                         text-overflow: ellipsis;
 220                         overflow: hidden;
 221
 222                         &.field-description {
 223                             &:not(.collapsed) {
 224                                 white-space: normal;
 225                             }
 226                             &.collapsed {
 227                                 text-overflow: clip;
 228                             }
 229                             .more-or-less {
 230                                 margin-left: 5px;
 231                             }
 232                         }
 233
 234                         &.field-actions {
 235                             .delete-action {
 236                                 position: relative;
 237                                 top: 2px;
 238                             }
 239                         }
 240                     }
 241
 242                 }
 243             }
 244
 245         }
 246     }
 247     .left-column {
 248         flex: 1 0 500px;
 249         position: relative;
 250             min-width:930px;
 251     }
 252     .right-column {
 253         display:flex;
 254         flex:0 0 350px;
 255         flex-direction:column;
 256         margin: 0px 0 0 1em;
 257         overflow-x:auto;
 258         .add-btn{
 259             align-self: flex-end;
 260             margin-top: 10px;
 261             margin-bottom: 19px;
 262         }
 263         /deep/ .tabs {
 264             border-bottom: solid 1px #d0d0d0;
 265         }
 266
 267         /deep/ .tab {
 268             flex: none;
 269             padding: 8px 20px 0;
 270             font-size: 14px;
 271             line-height:30px;
 272             font-family: @font-opensans-regular;
 273
 274             &.active {
 275                 font-family: @font-opensans-medium;
 276             }
 277         }
 278     }
 279
 280     .hierarchy-tabs {
 281         flex: 0 0 40px;
 282     }
 283
 284     .gray-border {
 285         border: 1px solid #ddd;
 286     }
 287
 288     /deep/ .white-sub-header {
 289         background-color:  #fffefe;
 290         box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15);
 291         border-bottom: #d2d2d2 solid 1px;
 292         font-size:14px;
 293         text-align:left;
 294         flex:0 0 auto;
 295         padding: 10px;
 296         text-overflow: ellipsis;
 297         white-space: nowrap;
 298         overflow: hidden;
 299         text-transform: uppercase;
 300
 301         &.hierarchy-header {
 302             padding-left:20px;
 303             &.selected {
 304                 background-color: #e6f6fb;
 305             }
 306         }
 307
 308     }
 309
 310     .hierarchy-header {
 311
 312         span{
 313             text-overflow: ellipsis;
 314             overflow: hidden;
 315             white-space: nowrap;
 316             max-width: 290px;
 317         }
 318     }
 319
 320     .hierarchy-nav {
 321         flex:1;
 322         overflow:auto;
 323         display: grid;
 324         margin-top: 1em;
 325         margin-left: 1em;
 326         font-size: 12px;
 327         padding-top: 1em;
 328     }
 329 }