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