toggle-components-library 1.32.0 → 1.33.0-beta.1

package/src/sass/includes/_as_carousels.scss

@@ -0,0 +1,131 @@
+.toggle-carousel{
+    cursor: grab;
+    font-size: 0;
+    &:active {
+        cursor: grabbing;
+    }
+    &--voucher{
+        &:after{
+            content: '';
+            position: absolute;
+            width: 15%;
+            background: linear-gradient(90deg, rgba(241, 245, 246, 0) 0%, rgba(241, 245, 246, 0.7) 50%, rgba(241, 245, 246, 1) 100%);
+            right: 0;
+            top: 0;
+            height: 100%;
+            z-index: 25;
+        }
+        &-end{
+            &:after{
+                right: auto;
+                left: 0;
+                background: linear-gradient(-90deg, rgba(241, 245, 246, 0) 0%, rgba(241, 245, 246, 0.7) 50%, rgba(241, 245, 246, 1) 100%);
+            }
+        }
+    }
+    .toggle-carousel-slide{
+        img{
+            max-width: 100%;
+        }
+    }
+    .toggle-carousel-button{
+        width: 50px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #FFF;
+        background-color: #2680EB;
+        border-radius: 100%;
+        position: absolute;
+        cursor: pointer;
+        z-index: 50;
+        @media only screen and (max-width:768px){
+            width: 24px;
+            height: 24px;
+        }
+        &:hover{
+            background-color: #3487ec;
+        }
+        &--top{
+            top: 20px;
+            @media only screen and (max-width:768px){
+                top: 12px;
+            }
+        }
+        &--middle{
+            top: 50%;
+            transform: translate(0,-50%);
+        }
+        &--bottom{
+            bottom: 20px;
+            @media only screen and (max-width:768px){
+                bottom: 12px;
+            }
+        }
+        &:before, &:after{
+            content: '';
+            width: 4px;
+            height: 15px;
+            background-color: #FFF;
+            position: relative;
+            @media only screen and (max-width:768px){
+                width: 2px;
+                height: 8px;
+            }
+        }
+        &:before{
+            border-radius: 0 0 5px 5px;
+        }
+        &:after{
+            border-radius: 5px 5px 0 ;
+        }
+        &--prev{
+            left: 20px;
+            @media only screen and (max-width:768px){
+                left: 12px;
+            }
+            &:before{
+                transform: rotate(-45deg);
+                top: 4px;
+                @media only screen and (max-width:768px){
+                    top: 2px;
+                }
+            }
+            &:after{
+                transform: rotate(45deg);
+                top: -4px;
+                left: -4px;
+                @media only screen and (max-width:768px){
+                    top: -2px;
+                    left: -2px;
+                }
+            }
+        }
+        &--next{
+            right: 20px;
+            @media only screen and (max-width:768px){
+                right: 12px;
+            }
+            &:before{
+                transform: rotate(45deg);
+                top: 4px;
+                left: 4px;
+                @media only screen and (max-width:768px){
+                    top: 2px;
+                    left: 2px;
+                }
+            }
+            &:after{
+                transform: rotate(-45deg);
+                top: -4px;
+                @media only screen and (max-width:768px){
+                    top: -2px;
+                }
+            }
+        }
+        &--disabled{
+            display: none;
+        }
+    }
+}

package/src/sass/includes/_as_inputs.scss

@@ -227,6 +227,11 @@
     }
 }
 
+.calendar-icon-disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
 .toggle-input-select-container{
     position:relative;
     background-color: $toggle-dark-grey;

package/src/sass/includes/_as_metrics.scss

@@ -16,6 +16,7 @@
         font-size: 275%;
         color: $toggle-metric-label-black;
     }
+
 }
 
 
@@ -25,7 +26,7 @@
     grid-template-columns: 1fr 1fr 1fr 1fr;
     display: grid;
     grid-auto-flow: column;
-
+    
 }
 
 .funnel-grid-svg {
@@ -79,7 +80,7 @@
     grid-column-start: 2;
     grid-row-end: 3;
     grid-column-end: 3;
-     display: flex;
+    display: flex;
 }
 
 .funnel-grid-7 {
@@ -101,7 +102,7 @@
 .funnel-spark-line, .funnel-single-metric  {
     margin-right: 1rem;
     border-right: 1px solid #BCDBEE;
-
+    
     &:nth-child(5),  &:last-child {
         border: 0;
     }
@@ -117,4 +118,20 @@
     align-items: center;
     justify-content: center;
     width: 100%;
+}
+
+.single-metric-badge {
+    margin-top: 0.6rem;
+}
+
+.single-metric-icon {
+    background-image: url('../assets/icons/clock-solid.svg');
+    background-repeat:no-repeat;
+    background-size:contain;
+    height: 25px;
+    width: 25px;
+}
+
+.increase-padding-bottom {
+    padding-bottom: 3rem !important;
 }

package/src/sass/includes/_as_statusbar.scss

@@ -0,0 +1,67 @@
+.toggle-status-bar-container {
+    font-family: $toggle-font-family;
+    font-size: 16px !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+    width: 100%;
+    border-radius: 7px;
+}
+
+.toggle-status-bar-small {
+    height: 35px;
+}
+
+// Draft colours
+.toggle-status-bar-draft {
+    background-color: #FFB88D;
+
+    .toggle-status-bar-label {
+        color: #A34308;
+    }
+}
+
+// Processing colours
+.toggle-status-bar-processing {
+    background-color: #D7E9F2;
+
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+}
+
+// Complete colours
+.toggle-status-bar-complete {
+    background-color: #B3E49F;
+
+    .toggle-status-bar-label {
+        color: #3BB40B;
+    }
+}
+
+// Inactive colours
+.toggle-status-bar-inactive {
+    background-color: #D7E9F2;
+
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+}
+
+// Active colours
+.toggle-status-bar-active {
+    background-color: #D7E9F2;
+    border: 1px solid #FF4848;
+
+    .toggle-status-bar-label {
+        color: #FF4848;
+    }
+}
+
+.toggle-status-bar-dot {
+    font-size: 20px;
+    margin: 0 3px 0 0;
+    float: none !important;
+    padding: 0 !important;
+}

package/src/sass/main.scss

@@ -21,3 +21,6 @@
 @import "./includes/_as_metrics.scss";
 @import "./includes/_as_threedots.scss";
 @import "./includes/_as_boosters.scss";
+@import "./includes/_as_statusbar.scss";
+@import "./includes/_as_cards.scss";
+@import "./includes/_as_carousels.scss";