toggle-components-library 1.23.0 → 1.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.23.0",
+  "version": "1.23.1",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/navs/multitiersidenav/ToggleMultiTierSideSubNav.vue

@@ -1,8 +1,10 @@
 <template>
-    <ul class="toggle-multi-tier-sidenav-sub-ul" v-if="expanded">
-        <!--    @slot For nav-item link (either regular a tag or vue-router link)-->
-        <slot></slot>
-    </ul>
+    <Transition name="drop-down">
+        <ul class="toggle-multi-tier-sidenav-sub-ul" v-if="expanded">
+            <!--    @slot For nav-item link (either regular a tag or vue-router link)-->
+            <slot></slot>
+        </ul>
+    </Transition>
 </template>
 
 <script>

package/src/sass/includes/_as_inputs.scss

@@ -270,6 +270,7 @@
 
     .toggle-input-label {
         margin-bottom: 0;
+        font-size: 0.8rem;
     }
 
     .toggle-input-select-container {
@@ -279,6 +280,7 @@
 
     .toggle-input-select {
         padding: 0rem;
+        font-size: 1.1rem;
     }
 }
 

package/src/sass/includes/_as_navs.scss

@@ -153,8 +153,9 @@
     cursor: pointer;
 
     &:hover {
+        animation: tilt-shake 0.4s;
         background-image: url("../assets/icons/airship-user-icon-hover.svg");
-      }
+    }
   }
 
   .toggle-multi-tier-sidenav-title {
@@ -396,22 +397,20 @@
                 }
 
       }
+    }
 
-
-
-      a, span {
-        color: $toggle-dark-blue;
-        display: flex;
-        align-items: center;
-        padding-left: 0.5rem;
-        height: 2rem;
-        border-radius: 0.5rem;
-        cursor: pointer;
-
-        &:hover {
-          background: $toggle-white;
-          color: $toggle-blue;
-        }
+    a, span {
+      color: $toggle-dark-blue;
+      display: flex;
+      align-items: center;
+      padding-left: 0.5rem;
+      height: 2rem;
+      border-radius: 0.5rem;
+      cursor: pointer;
+
+      &:hover {
+        background: $toggle-white;
+        color: $toggle-blue;
       }
     }
   }
@@ -419,15 +418,16 @@
   .toggle-multi-tier-sidenav-sub-ul {
     padding: 0;
     margin-top: 0.5rem;
-    margin-left: 3.1rem;
+    margin-left: 3rem;
 
     li {
       a, span {
+        padding-left: .8rem;
         font-size: $toggle-font-size-regular;
         font-weight: bold;
       }
     }
-
+    
     .toggle-multi-tier-sidenav-sub-ul {
       padding: 0;
       margin-top: 0.2rem;
@@ -448,6 +448,42 @@
   }
 }
 
+// Drop down slide transition
+
+.drop-down-enter-active {
+  -moz-transition-duration: 0.1s;
+  -webkit-transition-duration: 0.1s;
+  -o-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+  -moz-transition-timing-function: ease-in;
+  -webkit-transition-timing-function: ease-in;
+  -o-transition-timing-function: ease-in;
+  transition-timing-function: ease-in;
+}
+
+.drop-down-leave-active {
+  -moz-transition-duration: 0.1s;
+  -webkit-transition-duration: 0.1s;
+  -o-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+  -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+}
+
+.drop-down-enter-to,
+.drop-down-leave {
+  max-height: 100px;
+  overflow: hidden;
+}
+
+.drop-down-enter,
+.drop-down-leave-to {
+  overflow: hidden;
+  max-height: 0;
+}
+
 // Hover icon animation
 
 @keyframes tilt-shake {

package/src/sass/includes/_as_text.scss

@@ -25,6 +25,12 @@ a {
   color: $toggle-header-colour;
 }
 
+.toggle-multi-tier-sidenav-container {
+  .toggle-h2-header {
+    font-size: 1.1rem;
+  }
+}
+
 .toggle-copy-text {
   @include toggle-global-font-config;