@natec/mef-dev-ui-kit 20.1.21 → 20.1.23

package/src/lib/styles/pg/modules/_tabs_accordian.scss

@@ -8,7 +8,6 @@
 
 @use "sass:color";
 @use '../../vars.scss' as *;
-@use '../_mixins.scss' as mix;
 
 .nav-tabs {
   position: relative;
@@ -35,7 +34,7 @@
       font-family: Montserrat;
       font-weight: 500;
       letter-spacing: 0.06em;
-      color: fade($color-master, 70%);
+      color: rgba($color-master, 0.7);
       font-size: 10.5px;
       min-width: 70px;
       border-color: transparent;
@@ -57,20 +56,20 @@
     & > .tab-pane {
       &.slide-left,
       &.slide-right {
-        @include mix.transition(all .3s ease);
+        transition: all .3s ease;
         &.sliding {
           opacity: 0 !important;
         }
         &.active {
-          @include mix.translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
           opacity: 1;
         }
       }
       &.slide-left.sliding {
-        @include mix.translate3d(10%, 0, 0);
+        transform: translate3d(10%, 0, 0);
       }
       &.slide-right.sliding {
-        @include mix.translate3d(-10%, 0, 0);
+        transform: translate3d(-10%, 0, 0);
       }
     }
   }
@@ -135,8 +134,8 @@
     & > a{
       &:after {
         position: absolute;
-        @include mix.transition(all 0.1s linear 0s);
-        -webkit-backface-visibility: hidden;
+        transition: all 0.1s linear 0s;
+        backface-visibility: hidden;
         width: 100%;
         display: block;
         background-color: $color-danger;
@@ -268,7 +267,7 @@
       &:hover,
       &:focus {
         overflow: visible;
-        @include mix.transition( color 0.2s ease 0s);
+        transition: color 0.2s ease 0s;
       }
     }
   }
@@ -346,16 +345,16 @@
 */
 
 .nav-tabs-fillup {
-  @include mix.backface-visibility(hidden);
-  @include mix.perspective(1000);
+  backface-visibility: hidden;
+  perspective: 1000px;
   & > li {
     overflow: hidden;
     & > a {
-      @include mix.backface-visibility(hidden);
-      @include mix.transition(color 0.3s ease 0s);
+      backface-visibility: hidden;
+      transition: color 0.3s ease 0s;
       background: transparent;
       &:after {
-        @include mix.backface-visibility(hidden);
+        backface-visibility: hidden;
         background: none repeat scroll 0 0 $color-success;
         border: 1px solid $color-success;
         content: "";
@@ -363,13 +362,7 @@
         left: 0;
         position: absolute;
         top: 0;
-        -webkit-transform: translate3d(0,
-        100%,
-        0px);
-        transform: translate3d(0,
-        100%,
-        0px);
-        -webkit-transition: -webkit-transform 0.3s ease 0s;
+        transform: translate3d(0, 100%, 0px);
         transition: transform 0.3s ease 0s;
         width: 100%;
         z-index: -1;
@@ -399,10 +392,8 @@
         }
       }
       span {
-        @include mix.backface-visibility(hidden);
-        -webkit-transform: translate3d(0px, 5px, 0px);
+        backface-visibility: hidden;
         transform: translate3d(0px, 5px, 0px);
-        -webkit-transition: -webkit-transform 0.5s ease 0s;
         transition: transform 0.5s ease 0s;
         display: block;
         font-weight: 700;
@@ -418,17 +409,17 @@
           color: #fff;
         }
         &:after {
-          @include mix.translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
         }
         span {
-          @include mix.translate3d(0px, -5px, 0px);
+          transform: translate3d(0px, -5px, 0px);
         }
       }
     }
   }
   .icon:before {
-    @include mix.translate3d(0px, 5px, 0px);
-    @include mix.transition(transform 0.5s ease 0s);
+    transform: translate3d(0px, 5px, 0px);
+    transition: transform 0.5s ease 0s;
     display: block;
     margin: 0;
   }
@@ -451,7 +442,7 @@
       }
       &.active {
         a{&:after {
-            @include mix.translate3d(0px, 0px, 0px);
+            transform: translate3d(0px, 0px, 0px);
           }
         }
       }
@@ -461,19 +452,19 @@
     & > li {
       & > a {
         &:after {
-          @include mix.translate3d(100%, 0, 0);
+          transform: translate3d(100%, 0, 0);
         }
         span {
-          @include mix.translate3d(5px, 0, 0px);
+          transform: translate3d(5px, 0, 0px);
         }
       }
       &.active {
         a{span {
-            @include mix.translate3d(-5px, 0, 0px);
+            transform: translate3d(-5px, 0, 0px);
           }
         }
         .icon:before {
-          @include mix.translate3d(-5px, 0, 0px);
+          transform: translate3d(-5px, 0, 0px);
         }
       }
     }
@@ -482,20 +473,20 @@
     & > li {
       & > a {
         &:after {
-          @include mix.translate3d(-100%, 0, 0);
+          transform: translate3d(-100%, 0, 0);
           left: -1px;
         }
         span {
-          @include mix.translate3d(-5px, 0, 0px);
+          transform: translate3d(-5px, 0, 0px);
         }
       }
       &.active {
         a{span {
-            @include mix.translate3d(5px, 0, 0px);
+            transform: translate3d(5px, 0, 0px);
           }
         }
         .icon:before {
-          @include mix.translate3d(5px, 0, 0px);
+          transform: translate3d(5px, 0, 0px);
         }
       }
     }
@@ -599,12 +590,11 @@
           color: $color-master;
         }
         &.collapsed {
-          color: fade($color-master,
-          70%);
+          color: rgba($color-master, 0.7);
           opacity: 1;
           &:after {
             content: "\f055";
-            color: fade($color-master, 70%);
+            color: rgba($color-master, 0.7);
             opacity: .7;
           }
           &:hover {