toggle-components-library 1.22.7 → 1.22.9

package/src/sass/includes/_as_inputs.scss

@@ -250,6 +250,7 @@
 .toggle-input-select{
 
     padding           : 0.5rem 2.5rem 0.5rem 1rem;
+    cursor            : pointer;
 
     -webkit-appearance: none;
     -moz-appearance   : none;
@@ -260,6 +261,29 @@
     }
 }
 
+// For multi tier side nav
+.toggle-multi-tier-sidenav-container {
+
+    .toggle-input-container {
+        padding: 0.4rem 0rem 0rem 0.8rem;
+    }
+
+    .toggle-input-label {
+        margin-bottom: 0;
+        font-size: 0.8rem;
+    }
+
+    .toggle-input-select-container {
+        position: relative;
+        background-color: transparent;
+    }
+
+    .toggle-input-select {
+        padding: 0rem;
+        font-size: 1.1rem;
+    }
+}
+
 // radio
 
 .toggle-input-radio-container{

package/src/sass/includes/_as_loaders.scss

@@ -1,12 +1,15 @@
 
   .toggle-fill-loader-container{
-    position:absolute;
     top:0;
     left:0;
-    height:100%;
-    width:100%;
+    height:  100vh;
+    width:100vw;
     z-index:10;
     background: white;
+    position: fixed !important;
+    &.toggle-fill-loader-container-transparent{
+      background: rgba(255,255,255,0.8) !important;
+    }
   }
   .toggle-fill-loader-container-background{
 

package/src/sass/includes/_as_metrics.scss

@@ -0,0 +1,117 @@
+/* Single metric */
+
+.toggle-metric {
+
+    @include toggle-global-font-config;
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin: 0;
+
+   &.metric-label {
+        font-size: 1.2rem;
+        color: $toggle-metric-label-blue;
+    }
+
+    &.metric-value {
+        font-size: 275%;
+        color: $toggle-metric-label-black;
+    }
+}
+
+
+/* Funnel */
+.toggle-metric-funnel-container {
+    grid-template-rows: auto;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    display: grid;
+    grid-auto-flow: column;
+
+}
+
+.funnel-grid-svg {
+    min-height: 12rem;
+    background: transparent url('../assets/img/funnel.svg') no-repeat padding-box bottom;
+    background-size: 100% 100%;
+    grid-row-start: 2;
+    grid-column-start: 1;
+    grid-row-end: 3;
+    grid-column-end: 5;
+}
+
+.funnel-grid-1 {
+    grid-row-start: 1;
+    grid-column-start: 1;
+    grid-row-end: 2;
+    grid-column-end: 2;
+}
+
+.funnel-grid-2 {
+    grid-row-start: 1;
+    grid-column-start: 2;
+    grid-row-end: 2;
+    grid-column-end: 3;
+}
+
+.funnel-grid-3 {
+    grid-row-start: 1;
+    grid-column-start: 3;
+    grid-row-end: 2;
+    grid-column-end: 4;
+}
+
+.funnel-grid-4 {
+    grid-row-start: 1;
+    grid-column-start: 4;
+    grid-row-end: 2;
+    grid-column-end: 5;
+}
+
+.funnel-grid-5 {
+    grid-row-start: 2;
+    grid-column-start: 1;
+    grid-row-end: 3;
+    grid-column-end: 2;
+    display: flex;
+}
+
+.funnel-grid-6 {
+    grid-row-start: 2;
+    grid-column-start: 2;
+    grid-row-end: 3;
+    grid-column-end: 3;
+     display: flex;
+}
+
+.funnel-grid-7 {
+    grid-row-start: 2;
+    grid-column-start: 3;
+    grid-row-end: 3;
+    grid-column-end: 4;
+    display: flex;
+}
+
+.funnel-grid-8 {
+    grid-row-start: 2;
+    grid-column-start: 4;
+    grid-row-end: 3;
+    grid-column-end: 5;
+    display: flex;
+}
+
+.funnel-spark-line, .funnel-single-metric  {
+    margin-right: 1rem;
+    border-right: 1px solid #BCDBEE;
+
+    &:nth-child(5),  &:last-child {
+        border: 0;
+    }
+}
+
+.funnel-single-metric > * .toggle-metric {
+    font-size: 150%;
+}
+
+.funnel-single-metric-container {
+    margin-left: 40%; 
+    align-self: center;
+}

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,415 @@
     }
   }
 }
+
+// 
+// Multi Tier Side Nav
+// 
+
+.toggle-multi-tier-sidenav-container {
+  
+  line-height: 0;
+  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 {
+        animation: tilt-shake 0.4s;
+        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 !important;
+      padding-bottom: 0.25rem;
+
+      a, span{
+        font-weight: bold !important;
+      }
+
+      &.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: 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;
+      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;
+  }
+}
+
+// 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 {
+  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);
+  }
+}

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;
 

package/src/sass/includes/_as_variables.scss

@@ -39,11 +39,30 @@ $toggle-button-success:$toggle-success-green;
 $toggle-button-abort:$toggle-error-red;
 $toggle-button-neutral:$toggle-light-blue;
 $toggle-button-disabled:#d6d6d6;
+$toggle-button-amber: #E6A831;
+
+/* metrics */
+$toggle-metric-label-blue: #477EF6;
+$toggle-metric-label-black: #354B64;
+$toggle-metric-label-gray: #F1F5F6;
+$toggle-metric-chart-blue: #B9D9ED;
+$toggle-metric-chart-green: #68B916;
+$toggle-metric-chart-red: #F45959;
+$toggle-metric-chart-amber: #E6A831;
+$toggle-metric-chart-additional: #deafef;
 
 :export {
 	toggleblue     : $toggle-blue;
 	togglelightblue: $toggle-light-blue;
 	togglewhite    : $toggle-white;
 	toggleinputcolour : $toggle-input-colour;
+	
+	toggleMetricLabelBlue : $toggle-metric-label-blue;
+	toggleMetricLabelGray : $toggle-metric-label-gray;
+	toggleMetricLabelBlack : $toggle-metric-label-black;
+	toggleMetricChartGreen : $toggle-metric-chart-green;
+	toggleMetricChartAmber : $toggle-metric-chart-amber;
+	toggleMetricChartRed : $toggle-metric-chart-red;
+	toggleMetricChartAdditional : $toggle-metric-chart-additional;
 
 }

package/src/sass/main.scss

@@ -18,3 +18,4 @@
 @import "./includes/_as_navs.scss";
 @import "./includes/_as_elements.scss";
 @import "./includes/_as_notifications.scss";
+@import "./includes/_as_metrics.scss";