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