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