toggle-components-library 1.22.7 → 1.23.0

package/src/sass/includes/_as_navs.scss

@@ -1,3 +1,7 @@
+// 
+//  Toggle Side Nav
+// 
+
 .toggle-sidenav-container {
   font-size: $toggle-font-size-regular;
   width: 25%;
@@ -121,3 +125,373 @@
     }
   }
 }
+
+// 
+// Multi Tier Side Nav
+// 
+
+.toggle-multi-tier-sidenav-container {
+  font-size: $toggle-font-size-regular;
+  width: 25%;
+  float: left;
+  max-width: 280px;
+  min-height: 100vh;
+
+  .toggle-multi-tier-sidenav-logo {
+    max-width: 6rem;
+    margin: 1rem 0 1rem 0.6rem;
+  }
+
+  .toggle-multi-tier-sidenav-user-icon {
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-image: url("../assets/icons/airship-user-icon.svg");
+    width: 2rem;
+    height: 2rem;
+    margin: 2rem 0 1rem 0.6rem;
+    cursor: pointer;
+
+    &:hover {
+        background-image: url("../assets/icons/airship-user-icon-hover.svg");
+      }
+  }
+
+  .toggle-multi-tier-sidenav-title {
+    margin: 2rem 0 0 .6rem;
+  }
+
+  .toggle-multi-tier-sidenav-select-container {
+    height: max-content;
+    overflow: hidden;
+    margin: 1.5rem 0 0 .6rem;
+  }
+
+  .toggle-multi-tier-sidenav-ul {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+
+    .toggle-multi-tier-sidenav-item {
+      list-style: none;
+      font-family: $toggle-font-family;
+      font-size: 1.1rem;
+      font-weight: bold;
+      padding-bottom: 0.25rem;
+
+      &.active {
+        > a, > span {
+          background: #FFF;
+          color: $toggle-blue;
+        }
+
+        &.toggle-multi-tier-sidenav-arrow {
+          a, > span {
+            &::after {
+              transform: rotate(-180deg) translateX(30px);
+
+              background-image: url("../assets/icons/airship-down-arrow-active.svg");
+            }
+          }
+        }
+
+        &.toggle-multi-tier-sidenav-icon {
+          &.airship-plane-icon a::before,
+            &.airship-plane-icon span::before {
+              background-image: url("../assets/icons/airship-plane-hover.svg");
+            }
+          
+            &.airship-email-builder-icon a::before,
+            &.airship-email-builder-icon span::before {
+              background-image: url("../assets/icons/airship-pencil-hover.svg");
+            }
+          
+            &.airship-megaphone-icon a::before,
+            &.airship-megaphone-icon span::before {
+              background-image: url("../assets/icons/airship-megaphone-hover.svg");
+            }
+          
+            &.airship-sms-icon a::before,
+            &.airship-sms-icon span::before {
+              background-image: url("../assets/icons/airship-sms-hover.svg");
+            }
+          
+            &.airship-clipboard-icon a::before,
+            &.airship-clipboard-icon span::before {
+              background-image: url("../assets/icons/airship-clipboard-hover.svg");
+            }
+          
+            &.airship-pie-chart-icon a::before,
+            &.airship-pie-chart-icon span::before {
+              background-image: url("../assets/icons/airship-pie-chart-hover.svg");
+            }
+          
+            &.airship-wrench-icon a::before,
+            &.airship-wrench-icon span::before {
+              background-image: url("../assets/icons/airship-wrench-hover.svg");
+            }
+          
+            &.airship-cog-icon a::before,
+            &.airship-cog-icon span::before {
+              background-image: url("../assets/icons/airship-cog-hover.svg");
+            }
+          
+            &.airship-hat-icon a::before,
+            &.airship-hat-icon span::before {
+              background-image: url("../assets/icons/airship-hat-hover.svg");
+            }
+        }
+    }
+
+      .toggle-multi-tier-sidenav-item {
+        a, span {
+          &::before {
+            display: none;
+          }
+        }
+      }
+
+      &.toggle-multi-tier-sidenav-arrow {
+        position: relative;
+
+        > a, > span {
+            &::after {
+              content: '';
+              transform: translateX(-30px) rotate(0deg);
+              transition: transform .2s ease;
+              top: 13px;
+              left: 100%;
+              position: absolute;
+              margin-bottom: 10px;
+              padding-left: 0.5rem;
+              width: 0.4rem;
+              height: 0.4rem;
+              background-position: center;
+              background-size: contain;
+              background-repeat: no-repeat;
+              background-image: url("../assets/icons/airship-down-arrow.svg");
+            }
+            &:hover::after {
+                background-image: url("../assets/icons/airship-down-arrow-active.svg");
+            }
+          }
+      }
+      
+      &.toggle-multi-tier-sidenav-icon {
+
+        a, span {
+          &::before {
+            content: '';
+            position: static;
+            padding-left: 0.5rem;
+            width: $toggle-font-size-regular;
+            height: $toggle-font-size-regular;
+            margin-right: 1rem;
+            background-position: center;
+            background-size: contain;
+            background-repeat: no-repeat;
+          }
+        }
+
+
+
+        &.airship-plane-icon a::before,
+        &.airship-plane-icon span::before {
+          background-image: url("../assets/icons/airship-plane.svg");
+        }
+
+                &.airship-plane-icon a:hover::before, 
+                &.airship-plane-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-plane-hover.svg");
+                }
+
+        &.airship-email-builder-icon a::before, 
+        &.airship-email-builder-icon span::before {
+          background-image: url("../assets/icons/airship-pencil.svg");
+        }
+
+                &.airship-email-builder-icon a:hover::before, 
+                &.airship-email-builder-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-pencil-hover.svg");
+                }
+
+        &.airship-megaphone-icon a::before,
+        &.airship-megaphone-icon span::before {
+          background-image: url("../assets/icons/airship-megaphone.svg");
+        }
+
+                &.airship-megaphone-icon a:hover::before, 
+                &.airship-megaphone-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-megaphone-hover.svg");
+                }
+
+        &.airship-sms-icon a::before,
+        &.airship-sms-icon span::before {
+          background-image: url("../assets/icons/airship-sms.svg");
+        }
+
+                &.airship-sms-icon a:hover::before,
+                &.airship-sms-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-sms-hover.svg");
+                }
+
+        &.airship-clipboard-icon a::before,
+        &.airship-clipboard-icon span::before {
+          background-image: url("../assets/icons/airship-clipboard.svg");
+        }
+
+                &.airship-clipboard-icon a:hover::before,
+                &.airship-clipboard-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-clipboard-hover.svg");
+                }
+
+        &.airship-pie-chart-icon a::before,
+        &.airship-pie-chart-icon span::before {
+          background-image: url("../assets/icons/airship-pie-chart.svg");
+        }
+
+                &.airship-pie-chart-icon a:hover::before,
+                &.airship-pie-chart-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-pie-chart-hover.svg");
+                }
+
+        &.airship-wrench-icon a::before, 
+        &.airship-wrench-icon span::before{
+          background-image: url("../assets/icons/airship-wrench.svg");
+        }
+
+                &.airship-wrench-icon a:hover::before,
+                &.airship-wrench-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-wrench-hover.svg");
+                }
+
+        &.airship-cog-icon a::before,
+        &.airship-cog-icon span::before {
+          background-image: url("../assets/icons/airship-cog.svg");
+        }
+
+                &.airship-cog-icon a:hover::before,
+                &.airship-cog-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-cog-hover.svg");
+                }
+
+        &.airship-hat-icon a::before,
+        &.airship-hat-icon span::before {
+          background-image: url("../assets/icons/airship-hat.svg");
+        }
+
+                &.airship-hat-icon a:hover::before,
+                &.airship-hat-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-hat-hover.svg");
+                }
+
+      }
+
+
+
+      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;
+        }
+      }
+    }
+  }
+
+  .toggle-multi-tier-sidenav-sub-ul {
+    padding: 0;
+    margin-top: 0.5rem;
+    margin-left: 3.1rem;
+
+    li {
+      a, span {
+        font-size: $toggle-font-size-regular;
+        font-weight: bold;
+      }
+    }
+
+    .toggle-multi-tier-sidenav-sub-ul {
+      padding: 0;
+      margin-top: 0.2rem;
+      margin-left: 0rem;
+      
+      li {
+        a, span {
+          font-size: 0.8rem;
+          font-weight: normal;
+        }
+      }
+    }
+  }
+  .toggle-multi-tier-sidenav-divider {
+    width: 95%;
+    margin: 2rem 5rem 1rem .6rem;
+    border-bottom: 1px solid #BDD2F6;
+  }
+}
+
+// Hover icon animation
+
+@keyframes tilt-shake {
+  0% {
+    transform: scale(1) rotate(0deg);
+  }
+
+  10% {
+    transform: scale(1.02) rotate(2deg);
+  }
+
+  20% {
+    transform: scale(1.04) rotate(3deg);
+  }
+
+  30% {
+    transform: scale(1.06) rotate(4deg);
+  }
+
+  40% {
+    transform: scale(1.08) rotate(5deg);
+  }
+
+  50% {
+    transform: scale(1.1) rotate(6deg);
+  }
+
+  60% {
+    transform: scale(1.08) rotate(5deg);
+  }
+
+  70% {
+    transform: scale(1.06) rotate(4deg);
+  }
+
+  80% {
+    transform: scale(1.04) rotate(3deg);
+  }
+
+  90% {
+    transform: scale(1.02) rotate(2deg);
+  }
+
+  100% {
+    transform: scale(1) rotate(0deg);
+  }
+}