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   .edit-packages .CodeMirror {
 193     min-height: 400px !important;
 194   }
 195   .new-vim .CodeMirror {
 196     @include border(all, 1, solid, #eee !important);
 197   }
 198   .table-layout-fixed {
 199     table-layout: fixed;
 200     word-wrap: break-word;
 201   }
 202   .border-radius-default {
 203     @include roundedCorners(3);
 204   }
 205   /** Model Popup-Design **/
 206   .modal-body-custom-height {
 207     max-height: 65vh;
 208     overflow-y: auto;
 209   }
 210   /** Hide input clear icon in IE */
 211   input::-ms-clear {
 212     @include flexbox(none, null, null, null, null, null);
 213   }
 214   /** Overwrite the tooltip z-index */
 215   .tooltip {
 216     z-index: 1010;
 217   }
 218   /** Popover Header **/
 219   .popover-header {
 220     color: $primary;
 221     @include background(null, $theme-bg-color, null, null, null);
 222   }
 223   /** Vim Show running instance Details **/
 224   .runninginstances {
 225     width: 200px;
 226     .popover-body {
 227       max-height: 200px;
 228       overflow-y: scroll;
 229     }
 230   }
 231   /****************************************************************************/
 232   /************************** Smart table custom design ***********************/
 233   /****************************************************************************/
 234   ng2-smart-table {
 235     @include font(null, 15px, null);
 236     color: $gray-700;
 237     .form-control {
 238       @include wh-value(null, auto);
 239     }
 240     &.dataTables_empty td {
 241       text-align: center;
 242     }
 243     ng2-smart-table-title {
 244       * {
 245         @include font(null, 12px, null);
 246       }
 247       a {
 248         color: $gray-700 !important;
 249         @include flexbox(block, null, null, null, null, null);
 250         text-decoration: none;
 251         &::after {
 252           content: "\f0dc" !important;
 253           @include font-family("Font Awesome 5 Free");
 254           float: right;
 255           color: $gray-500;
 256           @include wh-value(0, 0);
 257         }
 258         &.asc::after {
 259           content: "\f0de" !important;
 260           @include font-family("Font Awesome 5 Free");
 261           float: right;
 262           color: $gray-500;
 263         }
 264         &.desc::after {
 265           content: "\f0dd" !important;
 266           @include font-family("Font Awesome 5 Free");
 267           float: right;
 268           color: $gray-500;
 269         }
 270         &:hover {
 271           text-decoration: none !important;
 272         }
 273         &.sort.desc::after {
 274           transform: none !important;
 275           margin-bottom: 0;
 276         }
 277         &.sort.asc::after,
 278         &.sort.desc::after {
 279           content: "";
 280           @include flexbox(inline-block, null, null, null, null, null);
 281           @include wh-value(0, 0);
 282           @include border(all, 0, solid, transparent !important);
 283           margin-bottom: 0 !important;
 284         }
 285       }
 286       span {
 287         color: $gray-700;
 288       }
 289     }
 290     ng2-smart-table-cell {
 291       word-break: break-word;
 292       table-cell-view-mode {
 293         @include font(null, 12px, null);
 294         .icon-label {
 295           @include font(null, 20px, null);
 296           @include flexbox(inline-block, null, null, null, null, null);
 297           @include wh-value(100px, 0);
 298           text-align: center;
 299           cursor: default;
 300         }
 301       }
 302     }
 303     .ng2-smart-filter {
 304       @include wh-value(null, calc(2rem + 2px) !important);
 305       @include font(null, 12px, null);
 306       margin-top: 6px;
 307     }
 308     table.list-data {
 309       tr td,
 310       tr th {
 311         @include padding-value(2, 10, 2, 10);
 312         vertical-align: middle !important;
 313       }
 314       tbody {
 315         tr.selected {
 316           background: none !important;
 317         }
 318       }
 319     }
 320     default-table-filter {
 321       select-filter {
 322         select.form-control {
 323           @include flexbox(inline-block, null, null, null, null, null);
 324           @include wh-value(null, calc(1.5rem + 2px) !important);
 325           vertical-align: middle;
 326           background: $white
 327             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")
 328             no-repeat right 0.75rem center;
 329           background-size: 8px 10px;
 330           @include border(all, 1, solid, $gray-200);
 331           @include roundedCorners(2);
 332           -webkit-appearance: none;
 333           -moz-appearance: none;
 334           appearance: none;
 335           &::-ms-expand {
 336             visibility: hidden;
 337           }
 338         }
 339       }
 340       select-filter {
 341         select {
 342           @include roundedCorners(4);
 343         }
 344       }
 345       input-filter {
 346         input[type="text"] {
 347           @include position_value(relative, null, null, null, null);
 348         }
 349         &:after {
 350           @include position_value(relative, -26px, null, null, 100%);
 351           content: "\f002";
 352           @include font("Font Awesome 5 Free", 10px, null);
 353           @include padding-value(0, 0, 0, 2);
 354           color: $gray-500;
 355         }
 356       }
 357     }
 358     ng2-smart-table-pager {
 359       @include flexbox(null, null, row-reverse, null, null, null);
 360       @include padding-value(5, 20, 5, 20);
 361       .ng2-smart-pagination {
 362         .ng2-smart-page-item {
 363           @include font(null, 10px, null);
 364           a {
 365             &:hover {
 366               text-decoration: none;
 367             }
 368           }
 369           .ng2-smart-page-link {
 370             @include font(null, 12px !important, null);
 371             &.page-link {
 372               text-align: center;
 373               vertical-align: middle;
 374               color: $primary;
 375               @include border(all, 1, solid, $primary !important);
 376               &:hover {
 377                 @include background(null, $primary !important, null, null, null);
 378                 color: $white;
 379               }
 380             }
 381           }
 382           span.ng2-smart-page-link.page-link {
 383             color: $white;
 384             @include background(null, $primary !important, null, null, null);
 385             @include border(all, 1, solid, $primary !important);
 386           }
 387         }
 388       }
 389     }
 390   }
 391   /****************************************************************************/
 392   /*********************** Button styles under list class *********************/
 393   /****************************************************************************/
 394   .list {
 395     &.action {
 396       button.btn.btn-primary {
 397         @include padding-value(2, 8, 2, 8);
 398       }
 399     }
 400     button:focus {
 401       outline: 0;
 402       @include box-shadow(0, 0, 0, 0, transparent);
 403     }
 404     button.btn.btn-primary {
 405       color: $primary;
 406       @include background(null, $white, null, null, null);
 407       &:not(.active:hover) {
 408         @include background(null, $white, null, null, null);
 409       }
 410       &:active {
 411         color: $primary;
 412         @include background(null, $white, null, null, null);
 413       }
 414       &.action-button {
 415         color: $white;
 416         @include background(null, $primary !important, null, null, null);
 417         &:hover {
 418           @include background(null, $primary, null, null, null);
 419         }
 420       }
 421     }
 422   }
 423   /****************************************************************************/
 424   /*********************** List Action Dropdown section ***********************/
 425   /****************************************************************************/
 426   .list-action-dropdown {
 427     @include border(all, 1, solid, $primary);
 428     @include padding-value(0, 0, 0, 0);
 429     button.btn.btn-primary {
 430       @include background(null, transparent, null, null, null);
 431       @include padding-value(8, 8, 8, 8);
 432       @include roundedCorners(0);
 433       color: $primary;
 434       &:hover {
 435         @include background(null, $primary, null, null, null);
 436         color: $white;
 437       }
 438       &:not(:last-child) {
 439         @include border(bottom, 1, solid, $primary);
 440       }
 441     }
 442   }
 443   /****************************************************************************/
 444   /*********************** Custom tabel design in topology ********************/
 445   /****************************************************************************/
 446   .custom-table {
 447     td:first-child {
 448       @include font(null, null, bold);
 449       text-align: right;
 450     }
 451     th,
 452     td {
 453       @include padding-value(5, 7, 5, 7);
 454       @include font(null, 10px, null);
 455       @include line-height(15px);
 456     }
 457   }
 458   /****************************************************************************/
 459   /************************** Ng select custom design *************************/
 460   /****************************************************************************/
 461   .ng-select {
 462     &.is-invalid .ng-select-container {
 463       @include border(all, 1, solid, $red);
 464     }
 465     .ng-select-container {
 466       @include border(all, 1, solid, $gray-200);
 467       .ng-value-container .ng-placeholder {
 468         color: $gray-80;
 469       }
 470     }
 471   }
 472   /****************************************************************************/
 473   /******************** Custom nav section for default status *****************/
 474   /****************************************************************************/
 475   .list-utilites-actions {
 476     @include flexbox(flex, null, row, null, center, null);
 477     nav.custom-items-config {
 478       @include position_value(relative, null, null, null, null);
 479       @include roundedCorners(3);
 480       span {
 481         @include font(null, 13px, 600);
 482         @include flexbox(inline-block, null, null, null, null, null);
 483         @include position_value(relative, null, null, null, null);
 484         text-decoration: none;
 485         text-align: center;
 486         @include margin-value(0, 0, 0, 10);
 487         &:first-child {
 488           @include margin-value(0, 0, 0, 0);
 489         }
 490         i {
 491           @include font(null, 14px, null);
 492           @include margin-value(0, 5, 0, 0);
 493         }
 494       }
 495     }
 496   }
 497   /****************************************************************************/
 498   /************************* File upload custom design ************************/
 499   /****************************************************************************/
 500   .custom-file-label {
 501     color: $primary;
 502     @include roundedCorners(4);
 503     @include border(all, 1, solid, $primary);
 504     overflow: hidden;
 505     @include margin-value(0, 0, 0, 0);
 506     text-overflow: ellipsis;
 507     white-space: nowrap;
 508     padding-right: 80px;
 509     &::after {
 510       color: $white;
 511       @include background(null, $primary, null, null, null);
 512     }
 513   }
 514   /****************************************************************************/
 515   /************************* Notifier Container Design ************************/
 516   /****************************************************************************/
 517   .notifier__container {
 518     ul {
 519       @include margin-value(0, 0, 0, 0);
 520     }
 521   }
 522   /***************************************************************************/
 523   /************************* Topology Common Design **************************/
 524   /****************************************************************************/
 525   .ns-composer-form,
 526   .vnf-composer-form,
 527   .ns-instance-form {
 528     @include font(null, 12px, null);
 529     .ns-svg,
 530     .vnf-svg {
 531       @include wh-value(30px, 25px);
 532     }
 533     .svg-container {
 534       min-height: 60vh;
 535     }
 536     .form-control {
 537       @include font(null, 10px, null);
 538     }
 539     .scroll-box {
 540       max-height: 285px;
 541       overflow-y: scroll;
 542     }
 543     .border-all {
 544       @include border(all, 1, solid, $primary);
 545     }
 546     .list-group {
 547       &.inside-svg {
 548         .list-group-item {
 549           @include padding-value(3.2, 8, 3.2, 8);
 550         }
 551       }
 552       &.dragable {
 553         .list-group-item {
 554           cursor: move;
 555           @include padding-value(4.8, 4.8, 4.8, 4.8);
 556           @include margin-value(0, 0, 5, 0);
 557           @include background(null, $gray-200, null, null, null);
 558           @include flexbox(flex, null, null, null, center, null);
 559           border: none;
 560           .span-overflow-text {
 561             @include wh-value(90%, null);
 562             white-space: nowrap;
 563             overflow: hidden;
 564             text-overflow: ellipsis;
 565             @include line-height(25px);
 566           }
 567         }
 568       }
 569     }
 570     .drag-icon {
 571       color: $gray-600;
 572       @include font(null, 15px, null);
 573     }
 574     .ctrl {
 575       cursor: move;
 576     }
 577     svg {
 578       -webkit-user-select: none;
 579       -moz-user-select: none;
 580       -ms-user-select: none;
 581       -o-user-select: none;
 582       user-select: none;
 583       image.node:hover,
 584       circle.node:hover {
 585         opacity: 0.7 !important;
 586       }
 587       image.active,
 588       circle.active {
 589         opacity: 0.7 !important;
 590       }
 591       path.link {
 592         stroke: $dark-gray;
 593         stroke-width: 2px;
 594         fill: none;
 595         &:hover {
 596           stroke-width: 4px;
 597         }
 598         .dragline {
 599           pointer-events: none;
 600         }
 601       }
 602       .node_text {
 603         text-anchor: middle;
 604         pointer-events: none;
 605       }
 606       :not(.ctrl) {
 607         cursor: pointer;
 608       }
 609     }
 610     fieldset {
 611       @include border(all, 1, solid, $primary);
 612       legend {
 613         @include padding-value(0, 5, 0, 5);
 614         @include font(null, 15px, null);
 615         color: $primary;
 616         &.vl-legend,
 617         &.element-legend {
 618           @include wh-value(55%, null);
 619         }
 620         &.vnfd-legend {
 621           @include wh-value(25%, null);
 622         }
 623       }
 624     }
 625     .btn-icon {
 626       @include wh-value(36px, 36px);
 627       text-align: center;
 628       @include margin-value(0, 10, 10, 0);
 629     }
 630     .topology-btn {
 631       color: $primary;
 632       border-color: $primary;
 633       &:hover,
 634       &.pinned {
 635         color: $white !important;
 636         @include background(null, $primary !important, null, null, null);
 637       }
 638     }
 639     .badgegroup {
 640       @include flexbox(flex, flex-end, row, center, center, null);
 641     }
 642   }
 643   .ns-topology-sidebar-container,
 644   .vnf-topology-sidebar-container,
 645   .ns-instance-topology-sidebar-container {
 646     @include position_value(absolute !important, 0px, null, null, 0px);
 647     .ng-sidebar {
 648       @include wh-value(27%, null);
 649       @include background(null, $white, null, null, null);
 650       @include border(all, 1, solid, $gray-300);
 651       .sidebar-header {
 652         @include background(null, $modalheader-gray, null, null, null);
 653         @include padding-value(5, 10, 5, 10);
 654         @include border(bottom, 1, solid, $gray-300);
 655         @include flexbox(flex, space-between, null, center, center, null);
 656         .topology_title {
 657           color: $primary;
 658         }
 659       }
 660       .sidebar-body {
 661         @include padding-value(10, 5, 10, 5);
 662       }
 663     }
 664     .ng-sidebar__content {
 665       button {
 666         @include position_value(absolute, 45%, null, null, 0px);
 667         @include background(null, $primary, null, null, null);
 668       }
 669       .detail-sidebar {
 670         @include flexbox(inline-block, null, null, null, null, null);
 671         @include position_value(relative, null, null, null, null);
 672         animation: push 0.5s infinite linear;
 673       }
 674     }
 675     @keyframes push {
 676       0% {
 677         right: 0;
 678       }
 679       50% {
 680         right: -0.2em;
 681       }
 682       70% {
 683         right: -0.3em;
 684       }
 685       100% {
 686         right: 0;
 687       }
 688     }
 689   }
 690 }
 691 /****************************************************************************/
 692 /************************** MEDIA QUERIES ***********************************/
 693 /****************************************************************************/
 694 @media (max-width: map-get($grid-breakpoints, md)) {
 695   .smarttable-style {
 696     @include flexbox(block, null, null, null, null, null);
 697     overflow-x: auto;
 698     white-space: nowrap;
 699   }
 700 }
 701
 702 .text-captilize {
 703   text-transform: capitalize;
 704 }