src/assets/scss/app.scss

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