src/assets/scss/app.scss

   1 /*
   2  Copyright 2020 TATA ELXSI
   3
   4  Licensed under the Apache License, Version 2.0 (the 'License');
   5  you may not use this file except in compliance with the License.
   6  You may obtain a copy of the License at
   7
   8   http://www.apache.org/licenses/LICENSE-2.0
   9
  10  Unless required by applicable law or agreed to in writing, software
  11  distributed under the License is distributed on an "AS IS" BASIS,
  12  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  See the License for the specific language governing permissions and
  14  limitations under the License.
  15
  16  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
  17  */
  18 /** Styles for the application **/
  19 @import "../../assets/scss/mixins/mixin";
  20 @import "../../assets/scss/variable";
  21 $customnavbar-padding-x: ($spacer / 0.5) !default;
  22 * {
  23   outline: 0;
  24 }
  25 button[type="submit"]:focus,
  26 .sidebar-body button[type="button"]:focus {
  27   @include box-shadow(0, 0, 0, 0.2rem, lighten($primary, 50%) !important);
  28 }
  29 .btn-danger:focus {
  30   @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
  31 }
  32 body,
  33 .list-overflow,
  34 .scroll-box,
  35 .smarttable-style,
  36 .modal-body-custom-height,
  37 .layout-wrapper,
  38 .CodeMirror-vscrollbar,
  39 .ng-sidebar,
  40 .runninginstances .popover-body {
  41   &::-webkit-scrollbar {
  42     @include wh-value(10px, null);
  43   }
  44   &::-webkit-scrollbar-thumb {
  45     background-clip: content-box;
  46     @include border(all, 3, solid, transparent);
  47     @include roundedCorners(7);
  48     @include box-shadow(0, 0, 0, 10px, rgba($black, 0.8), inset);
  49   }
  50   &::-webkit-scrollbar-button {
  51     @include wh-value(0, 0);
  52     @include flexbox(none, null, null, null, null, null);
  53   }
  54   &::-webkit-scrollbar-corner {
  55     @include background(null, transparent, null, null, null);
  56   }
  57 }
  58 body {
  59   @include font-family("Roboto");
  60   @include background(null, $theme-bg-color, null, null, null);
  61   overflow-x: hidden;
  62   .osm-logo {
  63     @include wh-value(100px, auto);
  64   }
  65   .bg-light {
  66     @include background(null, $theme-bg-color !important, null, null, null);
  67   }
  68   a {
  69     color: $primary;
  70     &:hover,
  71     &:focus {
  72       text-decoration: none;
  73     }
  74   }
  75   .badge {
  76     @include line-height(normal);
  77     &.badge-pill {
  78       @include padding-percentage-value(0.2em, 0.6em, 0.2em, 0.6em);
  79     }
  80   }
  81   button {
  82     outline: none;
  83     @include box-shadow(0, 0, 0, 0, transparent);
  84     &:hover,
  85     &:focus,
  86     &:active {
  87       outline: none;
  88       @include box-shadow(0, 0, 0, 0, transparent !important);
  89     }
  90     &.btn-primary,
  91     &.btn-default,
  92     &.btn-warning,
  93     &.btn-outline-primary:hover,
  94     &.btn-outline-warning:hover {
  95       color: $white;
  96       &:hover,
  97       &:focus,
  98       &:not(:disabled):not(.disabled):active {
  99         color: $white;
 100         @include background(null, $primary, null, null, null);
 101         border-color: $primary;
 102       }
 103       &:disabled {
 104         cursor: not-allowed;
 105       }
 106     }
 107   }
 108   .row {
 109     margin-left: 0;
 110     margin-right: 0;
 111   }
 112   .navbar {
 113     @include padding-percentage-value(
 114       $navbar-padding-y,
 115       $customnavbar-padding-x,
 116       $navbar-padding-y,
 117       $customnavbar-padding-x
 118     );
 119   }
 120   .form-control {
 121     @include roundedCorners(4);
 122     @include font(null, 12px, null);
 123     &::placeholder {
 124       color: $gray-400;
 125     }
 126   }
 127   .modal-dialog {
 128     max-width: 600px;
 129   }
 130   .header-style {
 131     @include font(null, 1.2rem, 700);
 132     color: $primary;
 133     @include line-height(1.25);
 134   }
 135   .cursor-default {
 136     cursor: default;
 137   }
 138   .cursor-pointer {
 139     cursor: pointer;
 140   }
 141   .mr-top-5 {
 142     @include margin-value-percentage(5px, auto, auto, auto);
 143   }
 144   .padLeft0 {
 145     padding-left: 0px;
 146   }
 147   .padRight0 {
 148     padding-right: 0px;
 149   }
 150   .mandatory-label {
 151     @include font(null, 10px, null);
 152   }
 153   .dropzone {
 154     min-height: 50px;
 155     @include flexbox(table, null, null, null, null, null);
 156     @include wh-value(100%, 50px);
 157     @include border(all, 1, dashed, $secondary);
 158     cursor: pointer;
 159     .text-wrapper {
 160       @include padding-value(5, 5, 5, 5);
 161       @include flexbox(table-cell, null, null, null, null, null);
 162       vertical-align: middle;
 163     }
 164     .file-drop-title {
 165       @include font(null, 16px, null);
 166     }
 167   }
 168   .close {
 169     opacity: 1 !important;
 170   }
 171   .roles-section {
 172     .card {
 173       .bg-secondary {
 174         @include background(null, $gray-400 !important, null, null, null);
 175       }
 176     }
 177   }
 178   .card {
 179     margin-bottom: 1rem;
 180   }
 181   .custom-card {
 182     @include border(top, 3, solid, $primary);
 183     @include roundedCorners(3);
 184     .custom-card-body {
 185       @include padding-value(15, 15, 15, 15);
 186     }
 187   }
 188   table-cell-default-editor select-editor select {
 189     @include wh-value(null, calc(2rem + 8px) !important);
 190     @include padding-value(0, 10, 0, 10);
 191   }
 192   .CodeMirror {
 193     min-height: 400px !important;
 194   }
 195   .table-layout-fixed {
 196     table-layout: fixed;
 197     word-wrap: break-word;
 198   }
 199   .border-radius-default {
 200     @include roundedCorners(3);
 201   }
 202   /** Model Popup-Design **/
 203   .modal-body-custom-height {
 204     max-height: 65vh;
 205     overflow-y: auto;
 206   }
 207   /** Hide input clear icon in IE */
 208   input::-ms-clear {
 209     @include flexbox(none, null, null, null, null, null);
 210   }
 211   /** Overwrite the tooltip z-index */
 212   .tooltip {
 213     z-index: 1010;
 214   }
 215   /** Popover Header **/
 216   .popover-header {
 217     color: $primary;
 218     @include background(null, $theme-bg-color, null, null, null);
 219   }
 220   /** Vim Show running instance Details **/
 221   .runninginstances {
 222     width: 200px;
 223     .popover-body {
 224       max-height: 200px;
 225       overflow-y: scroll;
 226     }
 227   }
 228   /****************************************************************************/
 229   /************************** Smart table custom design ***********************/
 230   /****************************************************************************/
 231   ng2-smart-table {
 232     @include font(null, 15px, null);
 233     color: $gray-700;
 234     .form-control {
 235       @include wh-value(null, auto);
 236     }
 237     &.dataTables_empty td {
 238       text-align: center;
 239     }
 240     ng2-smart-table-title {
 241       * {
 242         @include font(null, 12px, null);
 243       }
 244       a {
 245         color: $gray-700 !important;
 246         @include flexbox(block, null, null, null, null, null);
 247         text-decoration: none;
 248         &::after {
 249           content: "\f0dc" !important;
 250           @include font-family("Font Awesome 5 Free");
 251           float: right;
 252           color: $gray-500;
 253           @include wh-value(0, 0);
 254         }
 255         &.asc::after {
 256           content: "\f0de" !important;
 257           @include font-family("Font Awesome 5 Free");
 258           float: right;
 259           color: $gray-500;
 260         }
 261         &.desc::after {
 262           content: "\f0dd" !important;
 263           @include font-family("Font Awesome 5 Free");
 264           float: right;
 265           color: $gray-500;
 266         }
 267         &:hover {
 268           text-decoration: none !important;
 269         }
 270         &.sort.desc::after {
 271           transform: none !important;
 272           margin-bottom: 0;
 273         }
 274         &.sort.asc::after,
 275         &.sort.desc::after {
 276           content: "";
 277           @include flexbox(inline-block, null, null, null, null, null);
 278           @include wh-value(0, 0);
 279           @include border(all, 0, solid, transparent !important);
 280           margin-bottom: 0 !important;
 281         }
 282       }
 283       span {
 284         color: $gray-700;
 285       }
 286     }
 287     ng2-smart-table-cell {
 288       word-break: break-word;
 289       table-cell-view-mode {
 290         @include font(null, 12px, null);
 291         .icon-label {
 292           @include font(null, 20px, null);
 293           @include flexbox(inline-block, null, null, null, null, null);
 294           @include wh-value(100px, 0);
 295           text-align: center;
 296           cursor: default;
 297         }
 298       }
 299     }
 300     .ng2-smart-filter {
 301       @include wh-value(null, calc(2rem + 2px) !important);
 302       @include font(null, 12px, null);
 303       margin-top: 6px;
 304     }
 305     table.list-data {
 306       tr td,
 307       tr th {
 308         @include padding-value(2, 10, 2, 10);
 309         vertical-align: middle !important;
 310       }
 311       tbody {
 312         tr.selected {
 313           background: none !important;
 314         }
 315       }
 316     }
 317     default-table-filter {
 318       select-filter {
 319         select.form-control {
 320           @include flexbox(inline-block, null, null, null, null, null);
 321           @include wh-value(null, calc(1.5rem + 2px) !important);
 322           vertical-align: middle;
 323           background: $white
 324             url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
 325             no-repeat right 0.75rem center;
 326           background-size: 8px 10px;
 327           @include border(all, 1, solid, $gray-200);
 328           @include roundedCorners(2);
 329           -webkit-appearance: none;
 330           -moz-appearance: none;
 331           appearance: none;
 332           &::-ms-expand {
 333             visibility: hidden;
 334           }
 335         }
 336       }
 337       select-filter {
 338         select {
 339           @include roundedCorners(4);
 340         }
 341       }
 342       input-filter {
 343         input[type="text"] {
 344           @include position_value(relative, null, null, null, null);
 345         }
 346         &:after {
 347           @include position_value(relative, -26px, null, null, 100%);
 348           content: "\f002";
 349           @include font("Font Awesome 5 Free", 10px, null);
 350           @include padding-value(0, 0, 0, 2);
 351           color: $gray-500;
 352         }
 353       }
 354     }
 355     ng2-smart-table-pager {
 356       @include flexbox(null, null, row-reverse, null, null, null);
 357       @include padding-value(5, 20, 5, 20);
 358       .ng2-smart-pagination {
 359         .ng2-smart-page-item {
 360           @include font(null, 10px, null);
 361           a {
 362             &:hover {
 363               text-decoration: none;
 364             }
 365           }
 366           .ng2-smart-page-link {
 367             @include font(null, 12px !important, null);
 368             &.page-link {
 369               text-align: center;
 370               vertical-align: middle;
 371               color: $primary;
 372               @include border(all, 1, solid, $primary !important);
 373               &:hover {
 374                 @include background(null, $primary !important, null, null, null);
 375                 color: $white;
 376               }
 377             }
 378           }
 379           span.ng2-smart-page-link.page-link {
 380             color: $white;
 381             @include background(null, $primary !important, null, null, null);
 382             @include border(all, 1, solid, $primary !important);
 383           }
 384         }
 385       }
 386     }
 387   }
 388   /****************************************************************************/
 389   /*********************** Button styles under list class *********************/
 390   /****************************************************************************/
 391   .list {
 392     &.action {
 393       button.btn.btn-primary {
 394         @include padding-value(2, 8, 2, 8);
 395       }
 396     }
 397     button:focus {
 398       outline: 0;
 399       @include box-shadow(0, 0, 0, 0, transparent);
 400     }
 401     button.btn.btn-primary {
 402       color: $primary;
 403       @include background(null, $white, null, null, null);
 404       &:not(.active:hover) {
 405         @include background(null, $white, null, null, null);
 406       }
 407       &:active {
 408         color: $primary;
 409         @include background(null, $white, null, null, null);
 410       }
 411       &.action-button {
 412         color: $white;
 413         @include background(null, $primary !important, null, null, null);
 414         &:hover {
 415           @include background(null, $primary, null, null, null);
 416         }
 417       }
 418     }
 419   }
 420   /****************************************************************************/
 421   /*********************** List Action Dropdown section ***********************/
 422   /****************************************************************************/
 423   .list-action-dropdown {
 424     @include border(all, 1, solid, $primary);
 425     @include padding-value(0, 0, 0, 0);
 426     button.btn.btn-primary {
 427       @include background(null, transparent, null, null, null);
 428       @include padding-value(8, 8, 8, 8);
 429       @include roundedCorners(0);
 430       color: $primary;
 431       &:hover {
 432         @include background(null, $primary, null, null, null);
 433         color: $white;
 434       }
 435       &:not(:last-child) {
 436         @include border(bottom, 1, solid, $primary);
 437       }
 438     }
 439   }
 440   /****************************************************************************/
 441   /*********************** Custom tabel design in topology ********************/
 442   /****************************************************************************/
 443   .custom-table {
 444     td:first-child {
 445       @include font(null, null, bold);
 446       text-align: right;
 447     }
 448     th,
 449     td {
 450       @include padding-value(5, 7, 5, 7);
 451       @include font(null, 10px, null);
 452       @include line-height(15px);
 453     }
 454   }
 455   /****************************************************************************/
 456   /************************** Ng select custom design *************************/
 457   /****************************************************************************/
 458   .ng-select {
 459     &.is-invalid .ng-select-container {
 460       @include border(all, 1, solid, $red);
 461     }
 462     .ng-select-container {
 463       @include border(all, 1, solid, $gray-200);
 464       .ng-value-container .ng-placeholder {
 465         color: $gray-80;
 466       }
 467     }
 468   }
 469   /****************************************************************************/
 470   /******************** Custom nav section for default status *****************/
 471   /****************************************************************************/
 472   .list-utilites-actions {
 473     @include flexbox(flex, null, row, null, center, null);
 474     nav.custom-items-config {
 475       @include position_value(relative, null, null, null, null);
 476       @include roundedCorners(3);
 477       span {
 478         @include font(null, 13px, 600);
 479         @include flexbox(inline-block, null, null, null, null, null);
 480         @include position_value(relative, null, null, null, null);
 481         text-decoration: none;
 482         text-align: center;
 483         @include margin-value(0, 0, 0, 10);
 484         &:first-child {
 485           @include margin-value(0, 0, 0, 0);
 486         }
 487         i {
 488           @include font(null, 14px, null);
 489           @include margin-value(0, 5, 0, 0);
 490         }
 491       }
 492     }
 493   }
 494   /****************************************************************************/
 495   /************************* File upload custom design ************************/
 496   /****************************************************************************/
 497   .custom-file-label {
 498     color: $primary;
 499     @include roundedCorners(4);
 500     @include border(all, 1, solid, $primary);
 501     overflow: hidden;
 502     @include margin-value(0, 0, 0, 0);
 503     text-overflow: ellipsis;
 504     white-space: nowrap;
 505     padding-right: 80px;
 506     &::after {
 507       color: $white;
 508       @include background(null, $primary, null, null, null);
 509     }
 510   }
 511   /****************************************************************************/
 512   /************************* Notifier Container Design ************************/
 513   /****************************************************************************/
 514   .notifier__container {
 515     ul {
 516       @include margin-value(0, 0, 0, 0);
 517     }
 518   }
 519   /***************************************************************************/
 520   /************************* Topology Common Design **************************/
 521   /****************************************************************************/
 522   .ns-composer-form,
 523   .vnf-composer-form,
 524   .ns-instance-form {
 525     @include font(null, 12px, null);
 526     .ns-svg,
 527     .vnf-svg {
 528       @include wh-value(30px, 25px);
 529     }
 530     .svg-container {
 531       min-height: 60vh;
 532     }
 533     .form-control {
 534       @include font(null, 10px, null);
 535     }
 536     .scroll-box {
 537       max-height: 285px;
 538       overflow-y: scroll;
 539     }
 540     .border-all {
 541       @include border(all, 1, solid, $primary);
 542     }
 543     .list-group {
 544       &.inside-svg {
 545         .list-group-item {
 546           @include padding-value(3.2, 8, 3.2, 8);
 547         }
 548       }
 549       &.dragable {
 550         .list-group-item {
 551           cursor: move;
 552           @include padding-value(4.8, 4.8, 4.8, 4.8);
 553           @include margin-value(0, 0, 5, 0);
 554           @include background(null, $gray-200, null, null, null);
 555           @include flexbox(flex, null, null, null, center, null);
 556           border: none;
 557           .span-overflow-text {
 558             @include wh-value(90%, null);
 559             white-space: nowrap;
 560             overflow: hidden;
 561             text-overflow: ellipsis;
 562             @include line-height(25px);
 563           }
 564         }
 565       }
 566     }
 567     .drag-icon {
 568       color: $gray-600;
 569       @include font(null, 15px, null);
 570     }
 571     .ctrl {
 572       cursor: move;
 573     }
 574     svg {
 575       -webkit-user-select: none;
 576       -moz-user-select: none;
 577       -ms-user-select: none;
 578       -o-user-select: none;
 579       user-select: none;
 580       image.node:hover,
 581       circle.node:hover {
 582         opacity: 0.7 !important;
 583       }
 584       image.active,
 585       circle.active {
 586         opacity: 0.7 !important;
 587       }
 588       path.link {
 589         stroke: $dark-gray;
 590         stroke-width: 2px;
 591         fill: none;
 592         &:hover {
 593           stroke-width: 4px;
 594         }
 595         .dragline {
 596           pointer-events: none;
 597         }
 598       }
 599       .node_text {
 600         text-anchor: middle;
 601         pointer-events: none;
 602       }
 603       :not(.ctrl) {
 604         cursor: pointer;
 605       }
 606     }
 607     fieldset {
 608       @include border(all, 1, solid, $primary);
 609       legend {
 610         @include padding-value(0, 5, 0, 5);
 611         @include font(null, 15px, null);
 612         color: $primary;
 613         &.vl-legend,
 614         &.element-legend {
 615           @include wh-value(55%, null);
 616         }
 617         &.vnfd-legend {
 618           @include wh-value(25%, null);
 619         }
 620       }
 621     }
 622     .btn-icon {
 623       @include wh-value(36px, 36px);
 624       text-align: center;
 625       @include margin-value(0, 10, 10, 0);
 626     }
 627     .topology-btn {
 628       color: $primary;
 629       border-color: $primary;
 630       &:hover,
 631       &.pinned {
 632         color: $white !important;
 633         @include background(null, $primary !important, null, null, null);
 634       }
 635     }
 636     .badgegroup {
 637       @include flexbox(flex, flex-end, row, center, center, null);
 638     }
 639   }
 640   .ns-topology-sidebar-container,
 641   .vnf-topology-sidebar-container,
 642   .ns-instance-topology-sidebar-container {
 643     @include position_value(absolute !important, 0px, null, null, 0px);
 644     .ng-sidebar {
 645       @include wh-value(27%, null);
 646       @include background(null, $white, null, null, null);
 647       @include border(all, 1, solid, $gray-300);
 648       .sidebar-header {
 649         @include background(null, $modalheader-gray, null, null, null);
 650         @include padding-value(5, 10, 5, 10);
 651         @include border(bottom, 1, solid, $gray-300);
 652         @include flexbox(flex, space-between, null, center, center, null);
 653         .topology_title {
 654           color: $primary;
 655         }
 656       }
 657       .sidebar-body {
 658         @include padding-value(10, 5, 10, 5);
 659       }
 660     }
 661     .ng-sidebar__content {
 662       button {
 663         @include position_value(absolute, 45%, null, null, 0px);
 664         @include background(null, $primary, null, null, null);
 665       }
 666       .detail-sidebar {
 667         @include flexbox(inline-block, null, null, null, null, null);
 668         @include position_value(relative, null, null, null, null);
 669         animation: push 0.5s infinite linear;
 670       }
 671     }
 672     @keyframes push {
 673       0% {
 674         right: 0;
 675       }
 676       50% {
 677         right: -0.2em;
 678       }
 679       70% {
 680         right: -0.3em;
 681       }
 682       100% {
 683         right: 0;
 684       }
 685     }
 686   }
 687 }
 688 /****************************************************************************/
 689 /************************** MEDIA QUERIES ***********************************/
 690 /****************************************************************************/
 691 @media (max-width: map-get($grid-breakpoints, md)) {
 692   .smarttable-style {
 693     @include flexbox(block, null, null, null, null, null);
 694     overflow-x: auto;
 695     white-space: nowrap;
 696   }
 697 }