catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less

   1 .workspace-req-and-cap {
   2
   3     width: 93%;
   4     display: inline-block;
   5
   6     .tabs{
   7         float: left;
   8         position: relative;
   9         top: 6px;
  10         button{
  11             float: left;
  12             width: 233px;
  13             height: 38px;
  14             background-color: @tlv_color_t;
  15             border: 1px solid @main_color_o;
  16             color: black;
  17             &:nth-child(1){
  18                 border-radius: 10px 0 0 0;
  19             }
  20             &:nth-child(2){
  21                 border-radius: 0 10px 0 0;
  22             }
  23             &.selected{
  24                 background-color: @main_color_a;
  25                 border: 1px solid @main_color_a;
  26                 color: white;
  27             }
  28         }
  29     }
  30     .search{
  31         margin-bottom: 12px;
  32         float: right;
  33         ::-webkit-input-placeholder {
  34             font-style: italic;
  35         }
  36         :-moz-placeholder {
  37             font-style: italic;
  38         }
  39         ::-moz-placeholder {
  40             font-style: italic;
  41         }
  42         :-ms-input-placeholder {
  43             font-style: italic;
  44         }
  45         #search-box{
  46              -webkit-border-radius: 2px 0 0 2px;
  47              -moz-border-radius: 2px 0 0 2px;
  48              border-radius: 2px 0 0 2px;
  49              width: 213px;
  50              height: 32px;
  51              line-height: 32px;
  52              border: 1px solid @main_color_o;
  53              text-indent: 10px;
  54              float: left;
  55         }
  56         .search-icon-container{
  57             background-color: @main_color_a;
  58             height: 32px;
  59             width: 32px;
  60             border-radius: 0 2px 2px 0;
  61             float: left;
  62             .search-icon{
  63                 position: relative;
  64                 top: 9px;
  65             }
  66         }
  67     }
  68   .add-button {
  69     color: @main_color_a;
  70   }
  71   .add-button, .expand-collapse-buttons {
  72         float: right;
  73         margin-left: 11px;
  74         margin-top: 10px;
  75     &, span {
  76             .hand;
  77         }
  78     }
  79
  80
  81
  82     .table{
  83         height:490px;
  84         margin-bottom: 0;
  85     }
  86
  87     .arrow-up-small{
  88         &.opened{
  89             .arrow-up-small-hover;
  90         }
  91     }
  92
  93     .item-opened{
  94         background-color: @tlv_color_t;
  95     }
  96
  97     .properties-title{
  98         margin:0;
  99         font-weight: bold;
 100     }
 101
 102     .table-container-flex {
 103         margin-top: 10px;
 104
 105         .text{
 106             overflow: hidden;
 107             text-overflow: ellipsis;
 108             display: inline-block;
 109             white-space: nowrap;
 110         }
 111
 112       .editable-table-data {
 113         max-height: 430px;
 114       }
 115
 116       .data-row {
 117         &:not(.editable-row) {
 118           background: @tlv_color_t;
 119           color: @main_color_n;
 120         }
 121         &.editable-row {
 122           cursor: pointer;
 123         }
 124         .sprite-new.delete-icon {
 125           visibility: hidden;
 126         }
 127         &:hover {
 128           .sprite-new.delete-icon {
 129             visibility: visible;
 130           }
 131         }
 132       }
 133
 134         &.requirements-table{
 135             border-top: 4px solid @main_color_a;
 136             .flex-item:nth-child(1) {
 137                 flex-grow: 20;
 138             }
 139
 140             .flex-item:nth-child(2) {
 141                 flex-grow: 20;
 142             }
 143
 144             .flex-item:nth-child(3) {
 145                 flex-grow: 20;
 146             }
 147
 148             .flex-item:nth-child(4) {
 149                 flex-grow: 20;
 150             }
 151
 152             .flex-item:nth-child(5) {
 153                 flex-grow: 20;
 154             }
 155
 156             .flex-item:nth-child(6) {
 157                 flex-grow: 20;
 158             }
 159         }
 160
 161         &.capabilities-table{
 162             border-top: 4px solid @main_color_a;
 163             .selected{
 164                 .flex-item:nth-child(1) {
 165                     border-left: 4px solid @main_color_a;
 166                     padding-right: 11px;
 167                 }
 168             }
 169             .flex-item:nth-child(1) {
 170                 flex-grow: 10;
 171             }
 172
 173             .flex-item:nth-child(2) {
 174                 flex-grow: 10;
 175             }
 176
 177             .flex-item:nth-child(3) {
 178                 flex-grow: 10;
 179             }
 180
 181             .flex-item:nth-child(4) {
 182                 flex-grow: 10;
 183             }
 184
 185             .flex-item:nth-child(5) {
 186                 flex-grow: 10;
 187             }
 188
 189         }
 190
 191         &.properties-table{
 192             .table{
 193                 height: auto;
 194             }
 195
 196             .flex-item:nth-child(1) {
 197                 flex-grow: 15;
 198                 a{
 199                     .hand
 200                 }
 201             }
 202
 203             .flex-item:nth-child(2) {
 204                 flex-grow: 6;
 205             }
 206
 207             .flex-item:nth-child(3) {
 208                 flex-grow: 6;
 209             }
 210
 211             .flex-item:nth-child(4) {
 212                 flex-grow: 20;
 213
 214             }
 215         }
 216
 217     }
 218
 219 }
 220
 221 .workspace-req-and-cap-editable {
 222   .tabs-header {
 223     display: flex;
 224     justify-content: space-between;
 225     border-bottom: 1px solid @main_color_o;
 226     .req-and-cap-tabs {
 227       display: flex;
 228       .tab {
 229         font-family: @font-opensans-regular;
 230         font-size: 22px;
 231         padding: 5px;
 232         .hand;
 233         &:first-of-type {
 234           margin-right: 35px;
 235         }
 236         &.selected {
 237           color: @main_color_a;
 238           border-bottom: 2px solid @main_color_a;
 239         }
 240       }
 241     }
 242     .buttons-in-right {
 243       display: flex;
 244       .search {
 245         display: flex;
 246         height: min-content;
 247         margin-top: 10px;
 248         padding-right: 11px;
 249         border-right: 1px solid @main_color_o;
 250         #search-box {
 251           border: none;
 252           border-bottom: 1px solid @main_color_o;
 253           text-indent: 10px;
 254           &:focus {
 255             outline: none;
 256           }
 257         }
 258         .search-icon-container {
 259           margin-top: 3px;
 260           padding-top: 4px;
 261         }
 262
 263       }
 264       .add-button-icon-and-label {
 265         font-size: 14px;
 266         margin-left: 11px;
 267         margin-top: 10px;
 268         padding-top: 5px;
 269         /deep/ svg-icon {
 270           vertical-align: bottom;
 271         }
 272         &:hover {
 273           &:not(.disabled) {
 274             cursor: pointer;
 275             color: @sdcui_color_light-blue;
 276           }
 277         }
 278       }
 279     }
 280   }
 281   .add-button-icon-and-label {
 282     .icon-label-txt {
 283       text-transform: uppercase;
 284       font-family: @font-opensans-medium;
 285       color: @main_color_a;
 286       &:hover {
 287         &:not(.disabled) {
 288           color: @sdcui_color_light-blue;
 289         }
 290       }
 291     }
 292   }
 293   .empty-list-container {
 294     width: 100%;
 295     display: flex;
 296     justify-content: center;
 297
 298     .empty-list-add-btn {
 299       display: flex;
 300       flex-direction: column;
 301       justify-content: center;
 302       align-items: center;
 303       border: 1px solid @main_color_o;
 304       margin-top: 50px;
 305       height: 229px;
 306       width: 480px;
 307       &.disabled {
 308         pointer-events: none;
 309       }
 310       &:hover {
 311         &:not(.disabled) {
 312           border: 1px solid @main_color_a;
 313           cursor: pointer;
 314         }
 315       }
 316       .icon-label-txt {
 317         margin-top: 15px;
 318         font-size: 16px;
 319       }
 320     }
 321   }
 322   .table-container-flex .table {
 323     .head .head-row {
 324       text-align: left;
 325       &.description {
 326         flex: 2;
 327       }
 328       &.other {
 329         flex: 0.25;
 330         text-align: center;
 331       }
 332       &.occurrences {
 333         flex: 0.75;
 334       }
 335     }
 336     .body .data-row {
 337       border-bottom: none;
 338       border-top: @main_color_o solid 1px;
 339       .ellipsis-text {
 340         overflow: hidden;
 341         text-overflow: ellipsis;
 342       }
 343       &:not(.editable-row) {
 344         background-color: @tlv_color_t;
 345         cursor: default;
 346         color: @main_color_n;
 347       }
 348       &.editable-row {
 349         cursor: pointer;
 350         .table-col-general:hover {
 351           color: @main_color_b;
 352         }
 353       }
 354       &.selected {
 355         background-color: @tlv_color_v;
 356         .name-col {
 357           color: @main_color_a;
 358         }
 359         .sprite-new.arrow-up-small {
 360           background-position: -858px -137px;
 361           margin-bottom: 2px;
 362         }
 363       }
 364       .description-col {
 365         flex: 2;
 366       }
 367       .occurrences-col {
 368         flex: 0.75;
 369       }
 370       .other-col {
 371         display: flex;
 372         justify-content: center;
 373         align-items: center;
 374         flex: 0.25;
 375         .trash-icon {
 376           visibility: hidden;
 377         }
 378       }
 379       &:hover {
 380         .trash-icon {
 381           visibility: visible;
 382         }
 383       }
 384       .multiline-ellipsis {
 385         line-height: 1.5em;
 386         padding: 1px 0 1px 0;
 387         /deep/ .ellipsis-directive-more-less {
 388           float: none;
 389           margin-left: 5px;
 390           color: @main_color_a;
 391         }
 392       }
 393     }
 394   }
 395
 396   .item-opened.properties-section {
 397     border: 4px solid @tlv_color_v !important;
 398     max-height: 263px;
 399     overflow: auto;
 400     .properties-title {
 401       .s_10;
 402       margin-top: 10px;
 403     }
 404     .properties-table {
 405       &.table-container-flex {
 406         margin-top: 18px;
 407       }
 408       .table {
 409         .head {
 410           border-bottom: 1px solid @main_color_o;
 411         }
 412         .head, .table-col-general {
 413           background-color: @main_color_p;
 414         }
 415       }
 416     }
 417   }
 418 }