src/assets/scss/app.scss

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