@pepperi-addons/ngx-lib 0.4.2-beta.32 → 0.4.2-beta.321

package/src/core/style/abstracts/mixins.scss

@@ -11,13 +11,17 @@
 /// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
 @mixin on-event($self: false) {
     @if $self {
+
         &,
         &:hover,
         &:active,
         &:focus {
             @content;
         }
-    } @else {
+    }
+
+    @else {
+
         &:hover,
         &:active,
         &:focus {
@@ -55,7 +59,9 @@
     @if ($add-important) {
         margin-right: calc(#{$spacing-size} * -1) !important;
         margin-left: calc(#{$spacing-size} * -1) !important;
-    } @else {
+    }
+
+    @else {
         margin-right: calc(#{$spacing-size} * -1);
         margin-left: calc(#{$spacing-size} * -1);
     }
@@ -65,7 +71,9 @@
     @if ($add-important) {
         margin-right: $spacing-size !important;
         margin-left: $spacing-size !important;
-    } @else {
+    }
+
+    @else {
         margin-right: $spacing-size;
         margin-left: $spacing-size;
     }
@@ -100,15 +108,17 @@
 }
 
 @mixin hide-spin-buttons() {
+
     /*Hide numbers arrows in the qs input -  Chrome, Safari, Edge, Opera */
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
         -webkit-appearance: none;
         margin: 0;
     }
+
     /*Hide numbers arrows in the qs input - Firefox */
     input[type=number] {
-        -moz-appearance:textfield;
+        -moz-appearance: textfield;
     }
 }
 
@@ -153,7 +163,7 @@
         color: $text-background;
     }
 
-    @if $alignment == 2 {
+    @if $alignment ==2 {
         // right alignment
         direction: rtl;
         text-align: right;
@@ -165,17 +175,22 @@
         &:before {
             left: 3px;
         }
+
         &:after {
             /* set position to left bottom corner of text */
             left: 3px;
         }
-    } @else {
+    }
+
+    @else {
         // left alignment + center alignment
         direction: ltr;
 
-        @if $alignment == 3 {
+        @if $alignment ==3 {
             text-align: center;
-        } @else {
+        }
+
+        @else {
             text-align: left;
         }
 
@@ -186,6 +201,7 @@
         &:before {
             right: 3px;
         }
+
         &:after {
             /* set position to right bottom corner of text */
             right: 3px;
@@ -193,17 +209,17 @@
     }
 }
 
-@mixin font-title($fs: variables.$fs-md, $lh: variables.$lh-md) {
-    font-family: variables.$font-family-title !important;
-    font-weight: variables.$font-weight-bold !important;
+@mixin font-title($fs: variables.$fs-md, $lh: variables.$lh-md, $font-family: variables.$font-family-title, $font-weight: variables.$font-weight-bold) {
+    font-family: $font-family !important;
+    font-weight: $font-weight !important;
 
     @include font-size($fs);
     @include line-height($lh);
 }
 
-@mixin font-body($fs: variables.$fs-sm, $lh: variables.$lh-sm) {
-    font-family: variables.$font-family-body !important;
-    font-weight: variables.$font-weight-normal;
+@mixin font-body($fs: variables.$fs-sm, $lh: variables.$lh-sm, $font-family: variables.$font-family-body, $font-weight: variables.$font-weight-normal) {
+    font-family: $font-family !important;
+    font-weight: $font-weight;
 
     @include font-size($fs);
     @include line-height($lh);
@@ -216,14 +232,16 @@
 }
 
 @mixin line-height($lineHeight) {
-    line-height: $lineHeight !important ;
+    line-height: $lineHeight !important;
     // line-height: calculateRem($lineHeight) !important;
 }
 
 @mixin border($property, $width: 0, $style: solid, $color: transparent, $important: false) {
-    @if $important { 
+    @if $important {
         #{$property}: $width $style $color !important;
-    } @else {
+    }
+
+    @else {
         #{$property}: $width $style $color;
     }
 }
@@ -234,9 +252,11 @@
 
 // Inline  - this line face inward // This works only for buttons (and other objects that contains children).
 @mixin inline($color: transparent, $width: 1px, $style: solid, $regularBorder: false) {
-    @if $regularBorder { 
+    @if $regularBorder {
         @include border(border, $width, $style, $color);
-    } @else {
+    }
+
+    @else {
         position: relative;
 
         // 👆 Requires parent element to be 'position: relative;'
@@ -282,41 +302,91 @@
     $color-low-opacity: null;
     $color-high-opacity: null;
 
-    @if ($hex-color == null) {
+    @if ($hex-color ==null) {
         $color-low-opacity: functions.get-pep-color(color-system-caution, color-tran-00);
         $color-high-opacity: functions.get-pep-color(color-system-caution, color-tran-60);
-    } @else {
+    }
+
+    @else {
         $color-low-opacity: rgba($hex-color, 0);
         $color-high-opacity: rgba($hex-color, 0.32)
     }
 
-    background: repeating-linear-gradient(
-        45deg,
+    background: repeating-linear-gradient(45deg,
         $color-low-opacity,
         $color-low-opacity .65rem,
         $color-high-opacity .65rem,
-        $color-high-opacity 0.8rem,    
+        $color-high-opacity 0.8rem,
     ),
-    repeating-linear-gradient(
-        -45deg,
+    repeating-linear-gradient(-45deg,
         $color-low-opacity,
         $color-low-opacity .65rem,
         $color-high-opacity 0.65rem,
-        $color-high-opacity 0.8rem,    
+        $color-high-opacity 0.8rem,
     );
 }
 
+@mixin pep-full-width-loader($loader-color: variables.$color-loader-base) {
+    $loader-bg: color-mix(in hsl, $loader-color 0%, transparent);
+
+    height: 0.25rem;
+    z-index: variables.$z-index-high;
+    width: 100%;
+    background: linear-gradient(0.25turn, $loader-bg 0%, $loader-color 50%, $loader-bg 50%);
+    background-size: 200% 200%;
+    animation-timing-function: ease-out;
+    animation-name: slidein;
+    animation-iteration-count: infinite;
+    animation-duration: 1.5s;
+
+    &.rtl {
+        animation-name: slideinRtl;
+        background: linear-gradient(0.75turn, $loader-bg 0%, $loader-color 50%, $loader-bg 50%);
+        background-size: 200% 200%;
+    }
+
+    @keyframes slidein {
+        0% {
+            background-position: 100%;
+        }
+
+        75% {
+            background-position: -100%;
+        }
+
+        100% {
+            background-position: -100%;
+        }
+    }
+
+    @keyframes slideinRtl {
+        0% {
+            background-position: -100%;
+        }
+
+        75% {
+            background-position: 100%;
+        }
+
+        100% {
+            background-position: 100%;
+        }
+    }
+}
+
 // ******************************************************************************
 //                        General state declerations
 // ******************************************************************************
 @mixin focus($add-important: false, $focus-color: null, $focus-size: variables.$focus-size) {
-    @if ($focus-color == null) {
+    @if ($focus-color ==null) {
         $focus-color: functions.get-pep-color(color-text, color-link-focus);
     }
-  
+
     @if ($add-important) {
         box-shadow: 0 0 0 $focus-size $focus-color !important;
-    } @else {
+    }
+
+    @else {
         box-shadow: 0 0 0 $focus-size $focus-color;
     }
 }
@@ -331,7 +401,7 @@
     background: functions.get-pep-color(color-system-primary-invert, color-base);
     border: 1px solid functions.get-pep-color(color-system-caution, color-base);
 }
- 
+
 @mixin state-disabled() {
     // For remove all other states
     box-shadow: unset;
@@ -350,7 +420,7 @@
 // ----------------------------------------------------------------------------------
 @mixin state-icon() {
     @include svg-icon-color(functions.get-pep-color(color-system-primary, color-tran-80));
-    
+
     &:hover {
         @include svg-icon-color(functions.get-pep-color(color-system-primary, color-tran-90));
     }
@@ -370,7 +440,7 @@
 
 @mixin svg-icon-color($color) {
     fill: $color;
-    
+
     &.stroke {
         fill: unset;
         stroke: $color;
@@ -388,70 +458,139 @@
 }
 
 // ******************************************************************************
-//                       State weak declerations
+//                       State declerations
 // ******************************************************************************
 @mixin pep-state-default($style: weak, $color-map-key: null, $regularBorder: false) {
-    @if ($style == 'none') {
+    @if ($style =='none') {
         @include state-none-default();
-    } @else if ($style == 'weak-invert') {
+    }
+
+    @else if ($style =='weak-invert') {
         @include state-weak-invert-default();
-    } @else if ($style == 'weak') {
+    }
+
+    @else if ($style =='weak-special') {
+        @include state-weak-special-default();
+    }
+
+    @else if ($style =='weak') {
         @include state-weak-default($color-map-key);
-    } @else if ($style == 'strong') {
+    }
+
+    @else if ($style =='strong') {
         @include state-strong-default($color-map-key);
-    } @else { // regular.
+    }
+
+    @else {
+        // regular.
         @include state-regular-default($regularBorder, $color-map-key);
     }
 }
+
 @mixin pep-state-disable($style: weak, $color-map-key: null, $regularBorder: false) {
-    @if ($style == 'none') {
+    @if ($style =='none') {
         @include state-none-disable();
-    } @else if ($style == 'weak-invert') {
+    }
+
+    @else if ($style =='weak-invert') {
         @include state-weak-invert-disable();
-    } @else if ($style == 'weak') {
+    }
+
+    @else if ($style =='weak-special') {
+        @include state-weak-special-disable();
+    }
+
+    @else if ($style =='weak') {
         @include state-weak-disable($color-map-key);
-    } @else if ($style == 'strong') {
+    }
+
+    @else if ($style =='strong') {
         @include state-strong-disable($color-map-key);
-    } @else { // regular.
+    }
+
+    @else {
+        // regular.
         @include state-regular-disable($regularBorder, $color-map-key);
     }
 }
+
 @mixin pep-state-hover($style: weak, $color-map-key: null, $regularBorder: false) {
-    @if ($style == 'none') {
+    @if ($style =='none') {
         @include state-none-hover();
-    } @else if ($style == 'weak-invert') {
+    }
+
+    @else if ($style =='weak-invert') {
         @include state-weak-invert-hover();
-    } @else if ($style == 'weak') {
+    }
+
+    @else if ($style =='weak-special') {
+        @include state-weak-special-hover();
+    }
+
+    @else if ($style =='weak') {
         @include state-weak-hover($color-map-key);
-    } @else if ($style == 'strong') {
+    }
+
+    @else if ($style =='strong') {
         @include state-strong-hover($color-map-key);
-    } @else { // regular.
+    }
+
+    @else {
+        // regular.
         @include state-regular-hover($regularBorder, $color-map-key);
     }
 }
+
 @mixin pep-state-active($style: weak, $color-map-key: null, $regularBorder: false) {
-    @if ($style == 'none') {
+    @if ($style =='none') {
         @include state-none-active();
-    } @else if ($style == 'weak-invert') {
+    }
+
+    @else if ($style =='weak-invert') {
         @include state-weak-invert-active();
-    } @else if ($style == 'weak') {
+    }
+
+    @else if ($style =='weak-special') {
+        @include state-weak-special-active();
+    }
+
+    @else if ($style =='weak') {
         @include state-weak-active($color-map-key);
-    } @else if ($style == 'strong') {
+    }
+
+    @else if ($style =='strong') {
         @include state-strong-active($color-map-key);
-    } @else { // regular.
+    }
+
+    @else {
+        // regular.
         @include state-regular-active($regularBorder, $color-map-key);
     }
 }
+
 @mixin pep-state-focus($style: weak, $color-map-key: null, $regularBorder: false) {
-    @if ($style == 'none') {
+    @if ($style =='none') {
         @include state-none-focus();
-    } @else if ($style == 'weak-invert') {
+    }
+
+    @else if ($style =='weak-invert') {
         @include state-weak-invert-focus();
-    } @else if ($style == 'weak') {
+    }
+
+    @else if ($style =='weak-special') {
+        @include state-weak-special-focus();
+    }
+
+    @else if ($style =='weak') {
         @include state-weak-focus($color-map-key);
-    } @else if ($style == 'strong') {
+    }
+
+    @else if ($style =='strong') {
         @include state-strong-focus($color-map-key);
-    } @else { // regular.
+    }
+
+    @else {
+        // regular.
         @include state-regular-focus($regularBorder, $color-map-key);
     }
 }
@@ -462,28 +601,37 @@
 //  Weak - default
 // -----------------------------------------------------------------------------
 @mixin state-weak-default($color-map-key: null) {
-    @if ($color-map-key == null) {
+    @if ($color-map-key ==null) {
         $color-map-key: color-weak;
     }
-    background: functions.get-pep-color($color-map-key, color-tran-30);
+
+    background: functions.get-pep-color($color-map-key, color-tran-20);
 }
+
 @mixin state-weak-disable($color-map-key: null) {
     @include state-disabled();
 
-    @if ($color-map-key == null) {
+    @if ($color-map-key ==null) {
         $color-map-key: color-weak;
     }
-    color:functions.get-pep-color(color-text, color-disabled) !important;
-    background: functions.get-pep-color($color-map-key, color-tran-10) !important;
+
+    &:not(.disabled-no-background-no-color) {
+        color: functions.get-pep-color(color-text, color-disabled) !important;
+        background: functions.get-pep-color($color-map-key, color-tran-10) !important;
+    }
+
 }
+
 @mixin state-weak-hover($color-map-key: null) {
-    @if ($color-map-key == null) {
+    @if ($color-map-key ==null) {
         $color-map-key: color-weak;
     }
+
     background: functions.get-pep-color($color-map-key, color-tran-40);
 }
+
 @mixin state-weak-active($color-map-key: null, $add-inline: true, $regularBorder: false) {
-    @if ($color-map-key == null) {
+    @if ($color-map-key ==null) {
         $color-map-key: color-weak;
     }
 
@@ -493,11 +641,12 @@
     }
 
     box-shadow: functions.get-pep-shadow(shadow-xs, soft);
-    
+
     @if ($add-inline) {
         @include inline(functions.get-pep-color($color-map-key, color-base), 1px, solid, $regularBorder);
     }
 }
+
 @mixin state-weak-focus($color-map-key: null, $add-inline: true, $regularBorder: false) {
     // box-shadow: functions.get-pep-shadow(shadow-xs, soft);
     @include state-weak-active($color-map-key, $add-inline, $regularBorder);
@@ -507,33 +656,98 @@
 //  Weak - invert
 // -----------------------------------------------------------------------------
 @mixin state-weak-invert-default() {
-    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-30);
 
-    // $color: functions.get-pep-color(color-text, color-main);
-    // color: $color;
+    $color: functions.get-pep-color(color-text, color-invert);
+    color: $color;
 
-    // .svg-icon {
-    //     fill: $color !important;
-    // }
+    .svg-icon {
+        fill: $color !important;
+    }
 }
+
 @mixin state-weak-invert-disable() {
     @include state-disabled();
-    
-    color:functions.get-pep-color(color-text, color-disabled) !important;
-    background: functions.get-pep-color(color-system-primary-invert, color-tran-20) !important;
+
+    &:not(.disabled-no-background-no-color) {
+        color: functions.get-pep-color(color-system-primary-invert, color-tran-40) !important;
+        background: functions.get-pep-color(color-system-primary-invert, color-tran-10) !important;
+    }
+
+    .svg-icon {
+        fill: functions.get-pep-color(color-system-primary-invert, color-tran-40) !important;
+    }
 }
+
 @mixin state-weak-invert-hover() {
-    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-50);
     box-shadow: functions.get-pep-shadow(shadow-xs, soft);
     cursor: pointer;
 }
+
 @mixin state-weak-invert-active() {
     background: functions.get-pep-color(color-system-primary-invert, color-base);
     box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+    $color: functions.get-pep-color(color-text, color-main);
+    color: $color;
+
+    .svg-icon {
+        fill: $color !important;
+    }
 }
+
 @mixin state-weak-invert-focus() {
     background: functions.get-pep-color(color-system-primary-invert, color-base);
     @include focus();
+    $color: functions.get-pep-color(color-text, color-main);
+    color: $color;
+
+    .svg-icon {
+        fill: $color !important;
+    }
+}
+
+//  Weak - special
+// -----------------------------------------------------------------------------
+@mixin state-weak-special-default() {
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-50);
+}
+
+@mixin state-weak-special-disable() {
+    @include state-disabled();
+
+    &:not(.disabled-no-background-no-color) {
+        color: functions.get-pep-color(color-text, color-disabled) !important;
+        background: functions.get-pep-color(color-system-primary-invert, color-tran-20) !important;
+    }
+}
+
+@mixin state-weak-special-hover() {
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    box-shadow: functions.get-pep-shadow(shadow-xs, soft);
+    cursor: pointer;
+}
+
+@mixin state-weak-special-active() {
+    // background: functions.get-pep-color(color-system-primary-invert, color-base);
+    // box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+    // $color: functions.get-pep-color(color-text, color-main);
+    // color: $color;
+
+    // .svg-icon {
+    //     fill: $color !important;
+    // }
+}
+
+@mixin state-weak-special-focus() {
+    // background: functions.get-pep-color(color-system-primary-invert, color-base);
+    // @include focus();
+    // $color: functions.get-pep-color(color-text, color-main);
+    // color: $color;
+
+    // .svg-icon {
+    //     fill: $color !important;
+    // }
 }
 
 // ******************************************************************************
@@ -542,25 +756,30 @@
 //  Regular - default
 // -----------------------------------------------------------------------------
 @mixin state-regular-default($regularBorder: false, $color-map-key: null) {
-    @if ($color-map-key == null) {
+    @if ($color-map-key ==null) {
         $color-map-key: color-regular;
     }
+
     background: functions.get-pep-color($color-map-key, color-flat-r-40);
     box-shadow: functions.get-pep-shadow(shadow-xs, soft);
     @include inline(functions.get-pep-color($color-map-key, color-flat-r-20), 1px, solid, $regularBorder);
 }
+
 @mixin state-regular-hover($regularBorder: false, $color-map-key: null) {
-    @if ($color-map-key == null) {
+    @if ($color-map-key ==null) {
         $color-map-key: color-regular;
     }
+
     background: functions.get-pep-color($color-map-key, color-flat-r-40);
     box-shadow: functions.get-pep-shadow(shadow-xs, regular);
     @include inline(functions.get-pep-color($color-map-key, color-flat-r-10), 1px, solid, $regularBorder);
 }
+
 @mixin state-regular-active($regularBorder: false, $color-map-key: null) {
-    @if ($color-map-key == null) {
+    @if ($color-map-key ==null) {
         $color-map-key: color-regular;
     }
+
     background: functions.get-pep-color($color-map-key, color-flat-r-30);
     box-shadow: functions.get-pep-shadow(shadow-xs, hard);
     @include inline(functions.get-pep-color($color-map-key, color-base), 1px, solid, $regularBorder);
@@ -570,23 +789,30 @@
     //     @include focus();
     // }
 }
+
 @mixin state-regular-focus($regularBorder: false, $color-map-key: null) {
-    @if ($color-map-key == null) {
+    @if ($color-map-key ==null) {
         $color-map-key: color-regular;
     }
+
     background: functions.get-pep-color($color-map-key, color-flat-r-30);
     box-shadow: functions.get-pep-shadow(shadow-xs, regular);
     @include inline(functions.get-pep-color($color-map-key, color-base), 1px, solid, $regularBorder);
     @include focus();
 }
+
 @mixin state-regular-disable($regularBorder: false, $color-map-key: null) {
     @include state-disabled();
-    
-    @if ($color-map-key == null) {
+
+    @if ($color-map-key ==null) {
         $color-map-key: color-regular;
     }
-    color:functions.get-pep-color(color-text, color-disabled) !important;
-    background: functions.get-pep-color($color-map-key, color-flat-r-30) !important;
+
+    &:not(.disabled-no-background-no-color) {
+        color: functions.get-pep-color(color-text, color-disabled) !important;
+        background: functions.get-pep-color($color-map-key, color-flat-r-30) !important;
+    }
+
     box-shadow: functions.get-pep-shadow(shadow-xs, xsoft) !important;
     @include inline(functions.get-pep-color($color-map-key, color-tran-20), 1px, solid, $regularBorder);
 }
@@ -597,7 +823,7 @@
 //  Strong - default
 // -----------------------------------------------------------------------------
 @mixin state-strong-default($color-map-key: null) {
-    @if ($color-map-key == null) {
+    @if ($color-map-key ==null) {
         $color-map-key: color-strong;
     }
 
@@ -608,44 +834,55 @@
     $color: functions.get-pep-color(color-text, color-invert);
 
     color: $color;
+
     .svg-icon {
         @include svg-icon-color($color);
     }
 }
+
 @mixin state-strong-disable($color-map-key: null) {
     @include state-disabled();
-    
-    @if ($color-map-key == null) {
+
+    @if ($color-map-key ==null) {
         $color-map-key: color-strong;
     }
-    background: functions.get-pep-color($color-map-key, color-base) !important;
-    opacity: 0.5 !important;
-    
+
     $color: functions.get-pep-color(color-text, color-invert);
 
-    color: $color;
+    &:not(.disabled-no-background-no-color) {
+        background: functions.get-pep-color($color-map-key, color-base) !important;
+        opacity: 0.5 !important;
+        color: $color;
+    }
+
     .svg-icon {
         @include svg-icon-color($color);
     }
 }
+
 @mixin state-strong-hover($color-map-key: null) {
-    @if ($color-map-key == null) {
+    @if ($color-map-key ==null) {
         $color-map-key: color-strong;
     }
+
     background: functions.get-pep-color($color-map-key, color-flat-l-10);
     box-shadow: functions.get-pep-shadow(shadow-sm, regular);
 }
+
 @mixin state-strong-active($color-map-key: null) {
-    @if ($color-map-key == null) {
+    @if ($color-map-key ==null) {
         $color-map-key: color-strong;
     }
+
     background: functions.get-pep-color($color-map-key, color-flat-l-20);
     box-shadow: functions.get-pep-shadow(shadow-sm, hard);
 }
+
 @mixin state-strong-focus($color-map-key: null) {
-    @if ($color-map-key == null) {
+    @if ($color-map-key ==null) {
         $color-map-key: color-strong;
     }
+
     background: functions.get-pep-color($color-map-key, color-flat-l-20);
     box-shadow: functions.get-pep-shadow(shadow-sm, soft);
     @include focus();
@@ -659,16 +896,20 @@
 @mixin state-none-default() {
     background: functions.get-pep-color(color-system-primary, color-tran-00);
 }
+
 @mixin state-none-disable() {
     @include state-disabled();
     background: functions.get-pep-color(color-system-primary, color-tran-00) !important;
 }
+
 @mixin state-none-hover() {
     @include state-weak-hover();
 }
+
 @mixin state-none-active() {
     @include state-weak-active();
 }
+
 @mixin state-none-focus() {
     @include state-weak-focus();
 }
@@ -678,15 +919,19 @@
 // ******************************************************************************
 @mixin pep-button-states($style: weak, $color-map-key: null) {
     @include pep-state-default($style, $color-map-key, true);
+
     &:hover {
         @include pep-state-hover($style, $color-map-key, true);
     }
+
     &:focus {
         @include pep-state-focus($style, $color-map-key, true);
     }
+
     &:active {
         @include pep-state-active($style, $color-map-key, true);
     }
+
     &:disabled {
         &:not(.ignore-disabled) {
             @include pep-state-disable($style, $color-map-key, true);
@@ -698,6 +943,7 @@
 //                       Form field states declerations
 // ******************************************************************************
 @mixin pep-form-field-states($style: weak, $color-map-key: null) {
+
     // Default
     .mat-form-field-flex {
         @include pep-state-default($style, $color-map-key);
@@ -705,6 +951,7 @@
 
     // Hover
     &:hover {
+
         .ignore-disabled,
         &:not(.mat-form-field-disabled) {
             .mat-form-field-flex {
@@ -715,6 +962,7 @@
 
     // Focused
     &.mat-focused {
+
         .ignore-disabled,
         &:not(.mat-form-field-disabled) {
             .mat-form-field-flex {
@@ -726,6 +974,7 @@
     // Active
     &.active,
     &:active {
+
         .ignore-disabled,
         &:not(.mat-form-field-disabled) {
             .mat-form-field-flex {
@@ -747,21 +996,22 @@
 // ******************************************************************************
 //                       Table states declerations
 // ******************************************************************************
-@mixin state-table-row-default() {
+@mixin state-table-row-default() {}
 
-}
 @mixin state-table-row-even() {
     background: functions.get-pep-color(color-weak, color-tran-10);
 }
+
 @mixin state-table-row-hover() {
     background: functions.get-pep-color(color-weak, color-tran-30);
 }
-@mixin state-table-row-active() {
-    
-}
+
+@mixin state-table-row-active() {}
+
 @mixin state-table-row-selected() {
     background: functions.get-pep-color(color-system-success, color-tran-20);
 }
+
 // ******************************************************************************
 //                       Card states declerations
 // ******************************************************************************
@@ -771,15 +1021,19 @@
 
     transition: box-shadow 0.25s;
 }
+
 @mixin state-card-hover() {
     box-shadow: functions.get-pep-shadow(shadow-card, regular);
 }
+
 @mixin state-card-active() {
     box-shadow: functions.get-pep-shadow(shadow-card, hard);
     // @include focus();
 }
+
 @mixin state-card-selected() {
-    background: functions.get-pep-color(color-system-success, color-tran-20);;
+    background: functions.get-pep-color(color-system-success, color-tran-20);
+    ;
     box-shadow: none;
 }
 
@@ -795,7 +1049,7 @@
 // ******************************************************************************
 // @mixin mat-tabs-fixed-header-width($side-width) {
 //     width: calc(100% - (#{$side-width} + #{$double-content-padding} + #{$double-content-margin}));
-    
+
 //     @media (max-width: $screen-max-size-md) {
 //         width: calc(100% - (#{$double-content-padding} + #{$double-content-margin}));
 //     }