@saooti/octopus-sdk 40.2.2 → 40.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "40.2.2",
+  "version": "40.2.3",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/components/display/filter/ProductorSearch.vue

@@ -175,35 +175,5 @@ export default defineComponent({
     margin-right: -18px;
     animation: fadein 1s;
   }
-
-  @keyframes fadein {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fadein {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fadein {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
 }
 </style>

package/src/components/misc/TopBar.vue

@@ -175,6 +175,7 @@ export default defineComponent({
     z-index: 11;
     position: sticky;
     top: 0;
+    background-color: black;
     &.header-img-bg{
       background-position: center -20vw;
       background-repeat: no-repeat;
@@ -198,8 +199,12 @@ export default defineComponent({
     background-size: cover;
     width: 100%;
     display: flex;
+    background-color: black;
     transition: height 0.7s;
     height: calc(var(--header-additional-content-size) - var(--header-size));
+    @starting-style {
+      height: 0rem;
+    }
     &.scrolled {
       height: 0rem;
     }

package/src/components/misc/TopBarMainContent.vue

@@ -29,7 +29,7 @@
         :class="platformEducation ? 'education-logo' : ''"
       />
     </router-link>
-    <h1 v-if="titleIsDisplayed" class="text-truncate m-0 align-self-center">
+    <h1 v-if="titleIsDisplayed" class="text-fadein text-truncate m-0 align-self-center">
       {{ titleDisplay }}
     </h1>
     <div
@@ -73,6 +73,7 @@
         <nav role="navigation" :aria-label="$t('Site menu')">
           <ul class="d-flex">
             <template v-for="link in routerLinkArray" :key="link.routeName">
+              <transition name="fade">
               <li v-if="link.condition" class="li-style-none">
                 <router-link
                   v-show="!isPhone"
@@ -85,6 +86,7 @@
                   {{ link.title }}
                 </router-link>
               </li>
+            </transition>
             </template>
           </ul>
         </nav>
@@ -340,6 +342,18 @@ export default defineComponent({
         max-width: 30px !important;
       }
     }
+    .text-fadein{
+      animation: fadein 0.3s ease-in-out;
+    }
+    .fade-enter-active, .fade-leave-active {
+      transition: opacity 0.3s;
+      @starting-style {
+        opacity: 0;
+      }
+    }
+    .fade-enter, .fade-leave-to {
+      opacity: 0;
+    }
   }
 }
 </style>

package/src/style/transition.scss

@@ -84,4 +84,8 @@
     }
     
   }
+  @keyframes fadein {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
 }