toggle-components-library 1.36.9-beta.1 → 1.37.0-beta.1

package/src/sass/includes/_as_statusbar.scss

@@ -0,0 +1,183 @@
+.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%;
+    min-width: 94px;
+    border-radius: 7px;
+}
+
+.toggle-status-bar-small {
+    font-size: 0.7rem !important;
+    height: 28px;
+    .toggle-status-bar-dot {
+        font-size: 14px;
+    }
+}
+
+// Tooltip
+.toggle-status-bar-tooltip-container{
+    position: absolute;
+    display: flex;
+    justify-content: right;
+    width: 100%;
+    right: 32px;
+    cursor: default;
+
+    .toggle-status-bar-tooltip {
+        position: relative;
+        display: inline-block;
+        width: 20px;
+        text-align: center;
+        border: 1px solid hotpink;
+        border-radius: 50px;
+    }
+    
+    // Tooltip text
+    .toggle-status-bar-tooltip .toggle-status-bar-tooltip-text {
+        visibility: hidden;
+        width: 200px;
+        background-color: rgba(0, 0, 0, .8);
+        color: #fff;
+        text-align: center;
+        padding: 10px;
+        border-radius: 6px;
+        position: absolute;
+        z-index: 1;
+        top: -5px;
+        right: 105%;
+    }
+    
+    .toggle-status-bar-tooltip:hover .toggle-status-bar-tooltip-text {
+        visibility: visible;
+    }
+}
+
+
+// Draft colours
+.toggle-status-bar-draft {
+    background-color: #FFB88D;
+
+    .toggle-status-bar-label {
+        color: #A34308;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #A34308;
+        border: 1px solid #A34308;
+    }
+}
+
+// Processing colours
+.toggle-status-bar-processing {
+    background-color: #D7E9F2;
+
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
+}
+
+// Complete colours
+.toggle-status-bar-complete {
+    background-color: #B3E49F;
+
+    .toggle-status-bar-label {
+        color: #3BB40B;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #3BB40B;
+        border: 1px solid #3BB40B;
+    }
+}
+
+// Inactive colours
+.toggle-status-bar-inactive {
+    background-color: #D7E9F2;
+
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
+}
+
+// Active colours
+.toggle-status-bar-active {
+    background-color: #D7E9F2;
+    border: 1px solid #FF4848;
+
+    .toggle-status-bar-label {
+        color: #FF4848;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #FF4848;
+        border: 1px solid #FF4848;
+    }
+}
+
+// Submitted colours
+.toggle-status-bar-submitted {
+    background-color: #D7E9F2;
+    
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
+
+}
+
+// Failed colours
+.toggle-status-bar-failed {
+    background-color: #F2E3E3;
+    border: 1px solid #ED7B7C;
+    
+    .toggle-status-bar-label {
+        color: #ED7B7C;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #ED7B7C;
+        border: 1px solid #ED7B7C;
+    }
+}
+
+.toggle-status-bar-dot {
+    font-size: 20px;
+    margin: 0 3px 2px 0;
+    float: none !important;
+    padding: 0 !important;
+}
+
+// Dot blinking animation
+.blinking {
+    animation: 2s blink ease infinite;
+}
+
+@keyframes blink {
+
+    from,
+    to {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+}

package/src/sass/includes/_as_table.scss

@@ -65,7 +65,6 @@ table.toggle-table {
 
     select {
       border: none;
-      background-color: #FFF;
       font-size: 11.5px;
       font-weight: bold;
       color: #575757;
@@ -74,9 +73,6 @@ table.toggle-table {
       -moz-appearance: none;
       text-indent: 1px;
       text-overflow: '';
-
-      background: url(/img/icons/arrow-down-blue-tiny.svg) center right no-repeat;
-      background-size: 15px;
       padding           : 0.5rem 0rem 0.5rem 1rem;
     }
   }

package/src/sass/includes/_as_variables.scss

@@ -66,6 +66,10 @@ $booster-feedback-colour-light:#FFCB27;
 $booster-feedback-colour-med:#FFCB27;
 $booster-feedback-colour-dark:black;
 
+$booster-bulk-order-colour-light:#ffffff;
+$booster-bulk-order-colour-med:#83c42d;
+$booster-bulk-order-colour-dark:black;
+
 /* metrics */
 $toggle-metric-label-blue: #477EF6;
 $toggle-metric-label-black: #354B64;

package/src/sass/main.scss

@@ -21,6 +21,7 @@
 @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";
 @import "./includes/_as_tooltips.scss";

package/src/components/badges/ToggleLogoBadge.vue

@@ -1,53 +0,0 @@
-<template>
-    <div id="badge-container" :class="'toggle-logo-badge-' + size">
-        <img
-          :src="logo.src"
-          :alt="logo.alt"
-          class="toggle-logo-badge-logo"
-        >
-    </div>
-
-</template>
-    
-    <script>
-
-    export default {
-      name: 'ToggleLogoBadge',
-      props: {
-        logo: {
-          type: Object,
-          required: true,
-        },
-        colour: {
-          type: String,
-          required: true
-        },
-        size: {
-          type: String,
-          required: true,
-          validator: function(value) {
-            return ["small", "medium", "large"].indexOf(value) !== -1;
-          }
-        }
-      },
-    };
-    </script>
-    
-    <style scoped>
-      #badge-container {
-        background-color: v-bind('colour');
-      }
-
-      #small {
-
-      }
-
-      #medium {
-        
-      }
-
-      #large {
-        
-      }
-    
-    </style>