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