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 @use "sass:math";
  20
  21 @import "../../assets/scss/mixins/mixin";
  22 @import "../../assets/scss/variable";
  23 $customnavbar-padding-x: math.div($spacer, 0.5) !default;
  24 * {
  25   outline: 0;
  26 }
  27 button[type="submit"]:focus,
  28 .sidebar-body button[type="button"]:focus {
  29   @include box-shadow(0, 0, 0, 0.2rem, lighten($primary, 50%) !important);
  30 }
  31 .btn-danger:focus {
  32   @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
  33 }
  34 .btn-success {
  35   --bs-btn-hover-bg: #198754;
  36 }
  37 .btn-danger {
  38   --bs-btn-hover-bg: #cb3424;
  39   --bs-btn-color: #fff;
  40   --bs-btn-hover-color: #fff;
  41   --bs-btn-active-bg: #cb3424;
  42   --bs-btn-active-color: #fff;
  43 }
  44 body,
  45 .list-overflow,
  46 .scroll-box,
  47 .smarttable-style,
  48 .modal-body-custom-height,
  49 .layout-wrapper,
  50 .CodeMirror-vscrollbar,
  51 .ng-sidebar,
  52 .runninginstances .popover-body,
  53 .resources-chart-popover .popover-body,
  54 .ng-dropdown-panel .scroll-host {
  55   &::-webkit-scrollbar {
  56     @include wh-value(10px, null);
  57   }
  58   &::-webkit-scrollbar-thumb {
  59     background-clip: content-box;
  60     @include border(all, 3, solid, transparent);
  61     @include roundedCorners(7);
  62     @include box-shadow(0, 0, 0, 10px, rgba($black, 0.8), inset);
  63   }
  64   &::-webkit-scrollbar-button {
  65     @include wh-value(0, 0);
  66     @include flexbox(none, null, null, null, null, null);
  67   }
  68   &::-webkit-scrollbar-corner {
  69     @include background(null, transparent, null, null, null);
  70   }
  71 }
  72 body {
  73   @include font-family("Roboto");
  74   @include background(null, $theme-bg-color, null, null, null);
  75   overflow-x: hidden;
  76   .osm-logo {
  77     @include wh-value(100px, auto);
  78   }
  79   .bg-light {
  80     @include background(null, $theme-bg-color !important, null, null, null);
  81   }
  82   a {
  83     text-decoration: none;
  84     color: $primary;
  85     &:hover,
  86     &:focus {
  87       text-decoration: none;
  88     }
  89     &:not([href]),
  90     &:not([href]):hover {
  91       color: inherit;
  92     }
  93   }
  94   .badge {
  95     @include line-height(normal);
  96     &.badge-pill {
  97       @include padding-percentage-value(0.2em, 0.6em, 0.2em, 0.6em);
  98     }
  99   }
 100   button {
 101     outline: none;
 102     @include box-shadow(0, 0, 0, 0, transparent);
 103     &:hover,
 104     &:focus,
 105     &:active {
 106       outline: none;
 107       @include box-shadow(0, 0, 0, 0, transparent !important);
 108     }
 109     &.btn-primary,
 110     &.btn-default,
 111     &.btn-warning,
 112     &.btn-outline-primary:hover,
 113     &.btn-outline-warning:hover {
 114       color: $white;
 115       &:hover,
 116       &:focus,
 117       &:not(:disabled):not(.disabled):active {
 118         color: $white;
 119         @include background(null, $primary, null, null, null);
 120         border-color: $primary;
 121       }
 122       &:disabled {
 123         cursor: not-allowed;
 124         background-color: grey;
 125       }
 126     }
 127   }
 128   .row {
 129     margin-left: 0;
 130     margin-right: 0;
 131   }
 132   .navbar {
 133     @include padding-percentage-value(
 134       $navbar-padding-y,
 135       $customnavbar-padding-x,
 136       $navbar-padding-y,
 137       $customnavbar-padding-x
 138     );
 139   }
 140   .form-control {
 141     color: #4f5467;
 142     border-radius: 4px;
 143     background-color: $white;
 144     @include roundedCorners(4);
 145     @include font(null, 12px, null);
 146     &::placeholder {
 147       color: $gray-400;
 148     }
 149     background-color: $white;
 150   }
 151   .header-style {
 152     @include font(null, 1.2rem, 700);
 153     color: $primary;
 154     @include line-height(1.25);
 155   }
 156   .cursor-default {
 157     cursor: default;
 158   }
 159   .cursor-pointer {
 160     cursor: pointer;
 161   }
 162   .me-top-5 {
 163     @include margin-value-percentage(5px, auto, auto, auto);
 164   }
 165   .padLeft0 {
 166     padding-left: 0px;
 167   }
 168   .padRight0 {
 169     padding-right: 0px;
 170   }
 171   .mandatory-label {
 172     @include font(null, 11px, null);
 173   }
 174   .dropzone {
 175     min-height: 50px;
 176     @include flexbox(table, null, null, null, null, null);
 177     @include wh-value(100%, 50px);
 178     @include border(all, 1, dashed, $secondary);
 179     cursor: pointer;
 180     .text-wrapper {
 181       @include padding-value(5, 5, 5, 5);
 182       @include flexbox(table-cell, null, null, null, null, null);
 183       vertical-align: middle;
 184     }
 185     .file-drop-title {
 186       @include font(null, 16px, null);
 187     }
 188   }
 189   .close {
 190     opacity: 1 !important;
 191     background-color: transparent;
 192     border: 0;
 193     position: absolute;
 194     right: 10px;
 195     font-size: 1.3125rem;
 196   }
 197   .closeVersion {
 198     text-shadow: none;
 199   }
 200   .roles-section {
 201     .card {
 202       .card-body {
 203         background-color: #fff;
 204       }
 205       .bg-secondary {
 206         padding: 11px;
 207         @include background(null, $gray-400 !important, null, null, null);
 208       }
 209     }
 210   }
 211   .juju-section {
 212     .col-form-label {
 213       position: relative;
 214       bottom: 3px;
 215     }
 216     .card {
 217       @include roundedCorners(4);
 218       margin-bottom: 0.25rem;
 219       box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 220       .bg-secondary {
 221         @include background(null, $primary !important, null, null, null);
 222         b,
 223         span {
 224           color: $white;
 225         }
 226       }
 227       .card-header {
 228         padding: 0.75rem 1.25rem;
 229         border-top-left-radius: 4px;
 230         border-top-right-radius: 4px;
 231       }
 232       .card-body {
 233         border-radius: 2px;
 234         .seconds-btn-group .active {
 235           color: $white;
 236           @include background(null, $primary !important, null, null, null);
 237         }
 238         @include border(all, 2, dashed, $primary);
 239         @include padding-value(5, 5, 5, 5);
 240         border-top: 0;
 241         table {
 242           th,
 243           td {
 244             color: $body-color;
 245           }
 246           thead th {
 247             font-size: 12px;
 248             color: $body-color;
 249           }
 250           tbody th i.active-icon {
 251             font-size: 10px;
 252           }
 253         }
 254       }
 255       background-color: #fff;
 256     }
 257   }
 258   .card {
 259     margin-bottom: 1rem;
 260   }
 261   .custom-card {
 262     @include border(top, 3, solid, $primary);
 263     @include roundedCorners(3);
 264     .custom-card-body {
 265       @include padding-value(15, 15, 15, 15);
 266       background-color: #fff;
 267     }
 268   }
 269   table-cell-default-editor select-editor select {
 270     @include wh-value(null, calc(2rem + 8px) !important);
 271     @include padding-value(0, 10, 0, 10);
 272   }
 273   .edit-packages .CodeMirror {
 274     min-height: 400px !important;
 275   }
 276   .new-vim .CodeMirror {
 277     @include border(all, 1, solid, #eee !important);
 278   }
 279   .table-layout-fixed {
 280     table-layout: fixed;
 281     word-wrap: break-word;
 282   }
 283   .border-radius-default {
 284     @include roundedCorners(3);
 285   }
 286   /** Model Popup-Design **/
 287   .modal-header {
 288     .close {
 289       top: 10px;
 290     }
 291   }
 292   .modal-content {
 293     background-color: #fff;
 294   }
 295   .modal-body-custom-height {
 296     background-color: #fff !important;
 297     color: $body-color;
 298     max-height: 65vh;
 299     overflow-y: auto;
 300   }
 301   /** Hide input clear icon in IE */
 302   input::-ms-clear {
 303     @include flexbox(none, null, null, null, null, null);
 304   }
 305   /** Overwrite the tooltip z-index */
 306   .tooltip {
 307     z-index: 1010;
 308   }
 309   /** Popover Header **/
 310   .popover-header {
 311     margin-top: 7px;
 312     color: $primary;
 313     @include background(null, $theme-bg-color, null, null, null);
 314   }
 315   /** Vim Show running instance Details **/
 316   .runninginstances {
 317     width: 200px;
 318     margin-top: 10px;
 319     .popover-body {
 320       max-height: 200px;
 321       overflow-y: scroll;
 322       background-color: $white !important;
 323     }
 324   }
 325   .resources-chart-popover {
 326     margin-top: 4px;
 327     max-width: 60% !important;
 328     width: 600px !important;
 329     @include font-family("Roboto");
 330     .popover-body {
 331       max-height: 60vh;
 332       overflow-y: scroll;
 333       background-color: #fff !important;
 334     }
 335   }
 336   /****************************************************************************/
 337   /************************** Smart table custom design ***********************/
 338   /****************************************************************************/
 339   ng2-smart-table {
 340     background-color: #fff;
 341     background-color: none;
 342     @include font(null, 15px, null);
 343     color: $gray-700;
 344     .form-control {
 345       @include wh-value(null, auto);
 346     }
 347     &.dataTables_empty td {
 348       text-align: center;
 349     }
 350     ng2-smart-table-title {
 351       * {
 352         @include font(null, 12px, null);
 353       }
 354       a {
 355         color: $gray-700 !important;
 356         @include flexbox(block, null, null, null, null, null);
 357         text-decoration: none;
 358         &::after {
 359           content: "\f0dc" !important;
 360           @include font-family("Font Awesome 5 Free");
 361           float: right;
 362           color: $gray-500;
 363           @include wh-value(0, 0);
 364         }
 365         &.asc::after {
 366           content: "\f0de" !important;
 367           @include font-family("Font Awesome 5 Free");
 368           float: right;
 369           color: $gray-500;
 370         }
 371         &.desc::after {
 372           content: "\f0dd" !important;
 373           @include font-family("Font Awesome 5 Free");
 374           float: right;
 375           color: $gray-500;
 376         }
 377         &:hover {
 378           text-decoration: none !important;
 379         }
 380         &.sort.desc::after {
 381           transform: none !important;
 382           margin-bottom: 0;
 383         }
 384         &.sort.asc::after,
 385         &.sort.desc::after {
 386           content: "";
 387           @include flexbox(inline-block, null, null, null, null, null);
 388           @include wh-value(0, 0);
 389           @include border(all, 0, solid, transparent !important);
 390           margin-bottom: 0 !important;
 391         }
 392       }
 393       span {
 394         color: $gray-700;
 395       }
 396     }
 397     ng2-smart-table-cell {
 398       word-break: break-word;
 399       table-cell-view-mode {
 400         @include font(null, 12px, null);
 401         .icon-label {
 402           @include font(null, 20px, null);
 403           @include flexbox(inline-block, null, null, null, null, null);
 404           @include wh-value(100px, 0);
 405           text-align: center;
 406           cursor: default;
 407         }
 408       }
 409     }
 410     .ng2-smart-filter {
 411       background-color: #fff;
 412       @include wh-value(null, calc(2rem + 2px) !important);
 413       @include font(null, 12px, null);
 414       margin-top: 6px;
 415     }
 416     input {
 417       background-color: #fff !important;
 418     }
 419     table.list-data {
 420       tr td,
 421       tr th {
 422         @include padding-value(2, 10, 2, 10);
 423         vertical-align: middle !important;
 424         background-color: #fff;
 425         color: grey;
 426       }
 427       input[type="checkbox"] {
 428         padding: 6px 6px;
 429         border-color: rgba(0, 0, 0, 0.5);
 430         &:checked {
 431           background-color: $blue !important;
 432           border: black;
 433         }
 434       }
 435       tbody {
 436         tr.selected {
 437           background: none !important;
 438         }
 439       }
 440     }
 441     default-table-filter {
 442       select-filter {
 443         select.form-control {
 444           background-color: #fff !important;
 445           @include flexbox(inline-block, null, null, null, null, null);
 446           @include wh-value(null, calc(1.5rem + 2px) !important);
 447           vertical-align: middle;
 448           background: $white
 449             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")
 450             no-repeat right 0.75rem center;
 451           background-size: 8px 10px;
 452           @include border(all, 1, solid, $gray-200);
 453           @include roundedCorners(2);
 454           -webkit-appearance: none;
 455           -moz-appearance: none;
 456           appearance: none;
 457           &::-ms-expand {
 458             visibility: hidden;
 459           }
 460         }
 461       }
 462       select-filter {
 463         select {
 464           @include roundedCorners(4);
 465         }
 466       }
 467       input-filter {
 468         input[type="text"] {
 469           background-color: #fff;
 470           @include position_value(relative, null, null, null, null);
 471         }
 472         &:after {
 473           color: #afb5c1;
 474           @include position_value(relative, -26px, null, null, 100%);
 475           content: "\f002";
 476           @include font("Font Awesome 5 Free", 10px, null);
 477           @include padding-value(0, 0, 0, 2);
 478           color: $gray-500;
 479         }
 480       }
 481     }
 482     ng2-smart-table-pager {
 483       @include flexbox(null, null, row-reverse, null, null, null);
 484       @include padding-value(5, 20, 5, 20);
 485       .ng2-smart-pagination {
 486         .ng2-smart-page-item {
 487           @include font(null, 10px, null);
 488           a {
 489             &:hover {
 490               text-decoration: none;
 491             }
 492           }
 493           .ng2-smart-page-link {
 494             background-color: #fff;
 495             box-shadow: none;
 496             @include font(null, 12px !important, null);
 497             &.page-link {
 498               text-align: center;
 499               vertical-align: middle;
 500               color: $primary;
 501               @include border(all, 1, solid, $primary !important);
 502               &:hover {
 503                 @include background(null, $primary !important, null, null, null);
 504                 color: $white;
 505               }
 506             }
 507           }
 508           span.ng2-smart-page-link.page-link {
 509             color: $white;
 510             @include background(null, $primary !important, null, null, null);
 511             @include border(all, 1, solid, $primary !important);
 512           }
 513         }
 514       }
 515     }
 516   }
 517   /****************************************************************************/
 518   /*********************** Button styles under list class *********************/
 519   /****************************************************************************/
 520   .list {
 521     &.action {
 522       button.btn.btn-primary {
 523         @include padding-value(2, 8, 2, 8);
 524       }
 525     }
 526     button:focus {
 527       outline: 0;
 528       @include box-shadow(0, 0, 0, 0, transparent);
 529     }
 530     button.btn.btn-primary {
 531       color: $primary;
 532       @include background(null, $white, null, null, null);
 533       &:not(.active:hover) {
 534         @include background(null, $white, null, null, null);
 535       }
 536       &:active {
 537         color: $primary;
 538         @include background(null, $white, null, null, null);
 539       }
 540       &.action-button {
 541         color: $white;
 542         @include background(null, $primary !important, null, null, null);
 543         &:hover {
 544           @include background(null, $primary, null, null, null);
 545         }
 546       }
 547     }
 548   }
 549   /****************************************************************************/
 550   /*********************** List Action Dropdown section ***********************/
 551   /****************************************************************************/
 552   .list-action-dropdown {
 553     background-color: #fff;
 554     @include border(all, 1, solid, $primary);
 555     @include padding-value(0, 0, 0, 0);
 556     margin-top: 3px;
 557     button.btn.btn-primary {
 558       @include background(null, transparent, null, null, null);
 559       @include padding-value(8, 8, 8, 8);
 560       @include roundedCorners(0);
 561       background-color: #fff;
 562       color: $primary;
 563       &:hover {
 564         @include background(null, $primary, null, null, null);
 565         color: $white;
 566       }
 567       &:not(:last-child) {
 568         @include border(bottom, 1, solid, $primary);
 569       }
 570     }
 571   }
 572   /****************************************************************************/
 573   /*********************** Custom tabel design in topology ********************/
 574   /****************************************************************************/
 575   .custom-table {
 576     border: 1px solid rgba(0, 0, 0, 0.1);
 577     td:first-child {
 578       @include font(null, null, bold);
 579       text-align: right;
 580     }
 581     th,
 582     td {
 583       border: 1px solid rgba(0, 0, 0, 0.1);
 584       @include padding-value(5, 7, 5, 7);
 585       @include font(null, 10px, null);
 586       @include line-height(15px);
 587     }
 588   }
 589   /****************************************************************************/
 590   /************************** Ng select custom design *************************/
 591   /****************************************************************************/
 592   .ng-select {
 593     &.is-invalid .ng-select-container {
 594       @include border(all, 1, solid, $red);
 595     }
 596     .ng-select-container {
 597       @include border(all, 1, solid, $gray-200);
 598       .ng-value-container .ng-placeholder {
 599         color: $gray-80;
 600       }
 601     }
 602   }
 603   .ng-dropdown-panel .scroll-host {
 604     overflow-x: auto;
 605   }
 606   .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
 607     text-overflow: unset;
 608     overflow: unset;
 609   }
 610   /****************************************************************************/
 611   /******************** Custom nav section for default status *****************/
 612   /****************************************************************************/
 613   .list-utilites-actions {
 614     margin-left: 10px;
 615     @include flexbox(flex, null, row, null, center, null);
 616     nav.custom-items-config {
 617       @include position_value(relative, null, null, null, null);
 618       @include roundedCorners(3);
 619       span {
 620         @include font(null, 13px, 600);
 621         @include flexbox(inline-block, null, null, null, null, null);
 622         @include position_value(relative, null, null, null, null);
 623         text-decoration: none;
 624         text-align: center;
 625         @include margin-value(0, 0, 0, 10);
 626         &:first-child {
 627           @include margin-value(0, 0, 0, 0);
 628         }
 629         i {
 630           @include font(null, 14px, null);
 631           @include margin-value(0, 5, 0, 0);
 632         }
 633       }
 634     }
 635   }
 636   /****************************************************************************/
 637   /************************* File upload custom design ************************/
 638   /****************************************************************************/
 639   .fileupload {
 640     border: 1px solid;
 641     border: 1px solid;
 642     border-color: #054c8c;
 643     border-radius: 4px;
 644   }
 645   input[type="file"] {
 646     width: 100%;
 647   }
 648   input[type="file"]::file-selector-button {
 649     border: none;
 650     background: #054c8c;
 651     padding: 7px 10px;
 652     border-radius: 2px;
 653     color: #fff;
 654   }
 655   .custom-file-label {
 656     color: $primary;
 657     @include roundedCorners(4);
 658     @include border(all, 1, solid, $primary);
 659     overflow: hidden;
 660     @include margin-value(0, 0, 0, 0);
 661     text-overflow: ellipsis;
 662     white-space: nowrap;
 663     padding-right: 80px;
 664     &::after {
 665       color: $white;
 666       @include background(null, $primary, null, null, null);
 667     }
 668   }
 669   /****************************************************************************/
 670   /************************* Notifier Container Design ************************/
 671   /****************************************************************************/
 672   .notifier__container {
 673     ul {
 674       @include margin-value(0, 0, 0, 0);
 675     }
 676   }
 677   /***************************************************************************/
 678   /************************* Topology Common Design **************************/
 679   /****************************************************************************/
 680   .ns-composer-form,
 681   .vnf-composer-form,
 682   .ns-instance-form {
 683     @include font(null, 12px, null);
 684     .ns-svg,
 685     .vnf-svg {
 686       @include wh-value(30px, 25px);
 687     }
 688     .svg-container {
 689       min-height: 60vh;
 690     }
 691     .form-control {
 692       @include font(null, 10px, null);
 693     }
 694     .scroll-box {
 695       max-height: 285px;
 696       overflow-y: scroll;
 697     }
 698     .border-all {
 699       @include border(all, 1, solid, $primary);
 700     }
 701     .list-group {
 702       &.inside-svg {
 703         .list-group-item {
 704           @include padding-value(3.2, 8, 3.2, 8);
 705         }
 706       }
 707       &.dragable {
 708         .list-group-item {
 709           cursor: move;
 710           @include padding-value(4.8, 4.8, 4.8, 4.8);
 711           @include margin-value(0, 0, 5, 0);
 712           @include background(null, $gray-200, null, null, null);
 713           @include flexbox(flex, null, null, null, center, null);
 714           border: none;
 715           .span-overflow-text {
 716             color: $black;
 717             @include wh-value(90%, null);
 718             white-space: nowrap;
 719             overflow: hidden;
 720             text-overflow: ellipsis;
 721             @include line-height(25px);
 722           }
 723         }
 724       }
 725     }
 726     .drag-icon {
 727       color: $gray-600;
 728       @include font(null, 15px, null);
 729     }
 730     .ctrl {
 731       cursor: move;
 732     }
 733     svg {
 734       -webkit-user-select: none;
 735       -moz-user-select: none;
 736       -ms-user-select: none;
 737       -o-user-select: none;
 738       user-select: none;
 739       image.node:hover,
 740       circle.node:hover {
 741         opacity: 0.7 !important;
 742       }
 743       image.active,
 744       circle.active {
 745         opacity: 0.7 !important;
 746       }
 747       path.link {
 748         stroke: $dark-gray;
 749         stroke-width: 2px;
 750         fill: none;
 751         &:hover {
 752           stroke-width: 4px;
 753         }
 754         .dragline {
 755           pointer-events: none;
 756         }
 757       }
 758       .node_text {
 759         text-anchor: middle;
 760         pointer-events: none;
 761       }
 762       :not(.ctrl) {
 763         cursor: pointer;
 764       }
 765     }
 766     fieldset {
 767       @include border(all, 1, solid, $primary);
 768       legend {
 769         float: none;
 770         @include padding-value(0, 5, 0, 5);
 771         @include font(null, 15px, null);
 772         color: $primary;
 773         &.vl-legend,
 774         &.element-legend {
 775           @include wh-value(55%, null);
 776         }
 777         &.vnfd-legend {
 778           @include wh-value(25%, null);
 779         }
 780       }
 781       .font-weight-bold {
 782         font-weight: 700 !important;
 783       }
 784     }
 785     .btn-icon {
 786       @include wh-value(36px, 36px);
 787       text-align: center;
 788       @include margin-value(0, 10, 10, 0);
 789     }
 790     .topology-btn {
 791       color: $primary;
 792       border-color: $primary;
 793       &:hover,
 794       &.pinned {
 795         color: $white !important;
 796         @include background(null, $primary !important, null, null, null);
 797       }
 798     }
 799     .badgegroup {
 800       @include flexbox(flex, flex-end, row, center, center, null);
 801     }
 802   }
 803   .ns-topology-sidebar-container,
 804   .vnf-topology-sidebar-container,
 805   .ns-instance-topology-sidebar-container {
 806     @include position_value(absolute !important, 0px, null, null, 0px);
 807     .ng-sidebar {
 808       @include wh-value(27%, null);
 809       @include background(null, $white, null, null, null);
 810       @include border(all, 1, solid, $gray-300);
 811       .sidebar-header {
 812         @include background(null, $modalheader-gray, null, null, null);
 813         @include padding-value(5, 10, 5, 10);
 814         @include border(bottom, 1, solid, $gray-300);
 815         @include flexbox(flex, space-between, null, center, center, null);
 816         .topology_title {
 817           color: $primary;
 818         }
 819       }
 820       .sidebar-body {
 821         @include padding-value(10, 5, 10, 5);
 822       }
 823     }
 824     .ng-sidebar__content {
 825       button {
 826         @include position_value(absolute, 45%, null, null, 0px);
 827         @include background(null, $primary, null, null, null);
 828       }
 829       .detail-sidebar {
 830         @include flexbox(inline-block, null, null, null, null, null);
 831         @include position_value(relative, null, null, null, null);
 832         animation: push 0.5s infinite linear;
 833       }
 834     }
 835     @keyframes push {
 836       0% {
 837         right: 0;
 838       }
 839       50% {
 840         right: -0.2em;
 841       }
 842       70% {
 843         right: -0.3em;
 844       }
 845       100% {
 846         right: 0;
 847       }
 848     }
 849   }
 850   /** Switch Design **/
 851   .switch {
 852     @include position_value(relative, null, null, null, null);
 853     @include flexbox(inline-block, null, null, null, null, null);
 854     @include wh-value(50px, 15px);
 855     @include margin-value(0, 0, 0, 0);
 856     input {
 857       opacity: 0;
 858       @include wh-value(0px, 0px);
 859       &:checked + .slider {
 860         @include background(null, $gray-400, null, null, null);
 861         &:before {
 862           @include background(null, $pure-red, null, null, null);
 863           left: 5px;
 864           animation: pulse 2s infinite;
 865           -webkit-transform: translateX(26px);
 866           -ms-transform: translateX(26px);
 867           transform: translateX(26px);
 868         }
 869         .on {
 870           @include flexbox(block, null, null, null, null, null);
 871         }
 872         .off {
 873           @include flexbox(none, null, null, null, null, null);
 874         }
 875       }
 876     }
 877     .slider {
 878       @include position_value(absolute, 0, 0, 0, 0);
 879       cursor: pointer;
 880       @include background(null, $gray-400, null, null, null);
 881       -webkit-transition: 0.4s;
 882       transition: 0.4s;
 883       box-shadow: 0 0 1px $gray-400;
 884       &.round {
 885         @include roundedCorners(30);
 886         &:before {
 887           @include roundedCornersPercentage(50%);
 888         }
 889       }
 890       &:before {
 891         @include position_value(absolute, null, null, -2px, 0px);
 892         @include wh-value(20px, 20px);
 893         @include background(null, $white, null, null, null);
 894         content: "";
 895         -webkit-transition: 0.4s;
 896         transition: 0.4s;
 897         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 898       }
 899       .on {
 900         @include flexbox(none, null, null, null, null, null);
 901         @include position_value(absolute, 50%, null, null, 35% !important);
 902       }
 903       .on,
 904       .off {
 905         @include position_value(absolute, 50%, null, null, 65%);
 906         color: $primary;
 907         transform: translate(-50%, -50%);
 908         @include font(null, 11px, bold);
 909       }
 910     }
 911     @-webkit-keyframes pulse {
 912       0% {
 913         -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
 914       }
 915       70% {
 916         -webkit-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
 917       }
 918       100% {
 919         -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
 920       }
 921     }
 922     @keyframes pulse {
 923       0% {
 924         -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
 925         box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
 926       }
 927       70% {
 928         -moz-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
 929         box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
 930       }
 931       100% {
 932         -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
 933         box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
 934       }
 935     }
 936   }
 937 }
 938 /****************************************************************************/
 939 /************************** MEDIA QUERIES ***********************************/
 940 /****************************************************************************/
 941 @media (max-width: map-get($grid-breakpoints, md)) {
 942   .smarttable-style {
 943     @include flexbox(block, null, null, null, null, null);
 944     overflow-x: auto;
 945     white-space: nowrap;
 946   }
 947 }
 948
 949 .text-captilize {
 950   text-transform: capitalize;
 951 }
 952 .text-info {
 953   color: $secondary !important;
 954 }
 955 .hide {
 956   @include flexbox(none, null, null, null, null, null);
 957 }
 958 .title-bar {
 959   .name-width {
 960     @include wh-value(20%, null);
 961   }
 962   .id-width {
 963     @include wh-value(25%, null);
 964   }
 965 }
 966 .filter-actions {
 967   button {
 968     @include roundedCorners(10);
 969     @include padding-percentage-value(0.2rem, 1rem, 0.2rem, 1rem);
 970     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 971     border: none;
 972   }
 973 }
 974
 975 .custom-select {
 976   background-color: #fff !important;
 977   padding: 0.375rem 1.75rem 0.375rem 0.75rem;
 978   @include background(
 979     url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='10' viewBox='0 0 10 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"),
 980     var(--input-bg-color),
 981     null,
 982     no-repeat,
 983     0px 10px
 984   );
 985 }
 986 /****************************************************************************/
 987 /************************** HEALING STYLE ***********************************/
 988 /****************************************************************************/
 989
 990 app-healing {
 991   .card {
 992     border-radius: 15px;
 993     width: auto;
 994     height: auto;
 995     margin-bottom: 5px;
 996   }
 997
 998   .card-body {
 999     flex: 1 1 auto;
1000     min-height: 1px;
1001     padding: 5px;
1002   }
1003
1004   .form-group {
1005     margin-bottom: 1px;
1006     .row {
1007       margin-bottom: 16px;
1008     }
1009   }
1010
1011   .col-sm-1 {
1012     bottom: 20px;
1013   }
1014
1015   .col-5 {
1016     left: 79px;
1017   }
1018 }
1019
1020 .table thead th {
1021   vertical-align: bottom;
1022   border-bottom: 2px solid rgba(0, 0, 0, 0.1);
1023 }
1024 .table th,
1025 .table td {
1026   background-color: #fff;
1027   padding: 5px;
1028   vertical-align: top;
1029   border-top: 1px solid rgba(0, 0, 0, 0.1);
1030   border-bottom: transparent;
1031 }
1032 .table b {
1033   background: none;
1034   color: $body-color;
1035   padding-right: 0px;
1036   padding-left: 0px;
1037 }