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