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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.36.9-beta.1",
+    "version": "1.37.0-beta.1",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/assets/img/bulkorders.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 249.95 53.61"><defs><style>.cls-1{fill:#f9665a;}.cls-2{fill:#4c7210;}.cls-3{fill:#fff;}</style></defs><g id="Layer_1-2"><path class="cls-2" d="M179.97,9.18c1.07-1.03,2.45-1.26,3.71-1.26,4.65,0,7.73,3.04,7.73,9.07v2.29c0,5.52-2.6,9.15-7.73,9.15-1.62,0-2.84-.43-3.71-1.26v.87h-5.52V.82h5.52v8.36ZM185.5,19v-1.74c0-2.92-.63-4.38-2.76-4.38s-2.72,1.3-2.76,3.94v2.17c0,2.6.63,4.46,2.76,4.46,2.45,0,2.76-1.85,2.76-4.46Z"/><path class="cls-2" d="M211.57,28.04h-5.8v-1.54c-.79,1.26-1.7,1.93-4.14,1.93-3.87,0-7.26-1.89-7.26-7.81v-12.31h5.92v11.2c0,2.68.63,3.87,2.6,3.87s2.76-1.1,2.76-3.83v-11.24h5.92v19.72Z"/><path class="cls-2" d="M215.12.82h5.92v19.49c0,2.13.91,2.68,2.49,2.68v5.05c-5.48,0-8.4-1.1-8.4-6.43V.82Z"/><path class="cls-2" d="M243.67,8.31l-6.11,7.97,7.22,11.75h-6.78l-4.26-6.75-1.34,1.74v5.01h-5.92V.82h5.92v13.81l4.34-6.31h6.94Z"/><path class="cls-3" d="M1.02,11.16h2.82v-5.58c0-.56.46-1.02,1.02-1.02h6.96c.56,0,1.02.46,1.02,1.02v5.58h4.38c.56,0,1.02.46,1.02,1.02v5.52c0,.56-.46,1.02-1.02,1.02h-4.38v11.23c0,2.4.66,3.42,2.88,3.42h.26c.56,0,.85.41,1.02,1.02l1.95,5.43c.17.46,0,1.01-.43,1.24-.14.07-.3.11-.47.11h-3.35c-7.33,0-10.87-1.62-10.87-10.09v-12.37H1.02c-.56,0-1.02-.46-1.02-1.02v-5.52c0-.56.46-1.02,1.02-1.02Z"/><path class="cls-3" d="M114.78,1.29c0-.56.4-.94,1.02-1.02l6.96-.27c.56,0,1.02.46,1.02,1.02v28.93c0,2.4.66,3.42,2.88,3.42h.26c.56,0,.85.41,1.02,1.02l1.96,5.46c.17.47-.02,1.01-.47,1.22-.13.06-.28.1-.44.1h-3.35c-7.33,0-10.87-1.62-10.87-10.09V1.29Z"/><path class="cls-3" d="M48.39,27.85c0,8.41-3.96,13.93-13.21,13.93s-13.21-5.52-13.21-13.93v-3.48c0-9.19,4.8-13.81,13.21-13.81s13.21,4.62,13.21,13.81v3.48ZM39.38,27.43v-2.64c0-4.44-.96-6.66-4.2-6.66s-4.2,2.22-4.2,6.66v2.64c0,3.96.48,6.78,4.2,6.78s4.2-2.82,4.2-6.78Z"/><path class="cls-3" d="M70.84,11.57l6.96-.28c.56,0,1.02.46,1.02,1.02v28.93c0,10.81-6.12,12.37-13.45,12.37-5.36,0-8.9-1.14-11.74-4.73-.36-.45-.26-1.12.21-1.46l4.32-3.13c.41-.29.96-.24,1.32.11,1.22,1.18,2.74,1.76,4.69,1.76,4.2,0,5.64-.54,5.64-4.92v-1.2c-1.5,1.14-3.42,1.74-5.64,1.74-7.69,0-11.77-5.52-11.77-13.57v-4.2c0-8.83,4.8-13.45,11.77-13.45,5.24,0,6.57.97,6.66,1.01ZM69.82,28.33v-4.2c0-4.02-1.14-6-4.2-6-3.24,0-4.2,2.22-4.2,6.66v2.64c0,3.96.48,6.78,4.2,6.78,3.42,0,4.2-2.4,4.2-5.88Z"/><path class="cls-3" d="M155.06,36.06c.46.32.58.95.26,1.41-2.16,3.05-5.61,4.32-10.63,4.32-9.49,0-13.57-6.12-13.57-13.57v-4.2c0-9.31,4.8-13.45,12.61-13.45,8.71,0,12.61,4.98,12.61,14.35v2.52c0,.56-.46,1.02-1.02,1.02h-15.19c.12,3.42.96,5.76,4.62,5.76,2.29,0,3.12-.55,3.93-1.5.34-.4.94-.46,1.37-.16l5.01,3.51ZM140.19,22.45h7.15c-.18-3.3-1.44-4.32-3.54-4.32-2.34,0-3.36,1.62-3.6,4.32Z"/><path class="cls-3" d="M108.43,11.29l-6.96.28c-.06-.04-1.42-1.01-6.66-1.01-6.96,0-11.77,4.06-11.77,12.88v.49h9.01c0-3.88,1.03-5.81,4.2-5.81s4.2,1.98,4.2,6v4.2c0,3.48-.78,5.88-4.2,5.88s-4.2-2.08-4.2-5.34h-9.01v.64c0,8.05,4.08,12.26,11.77,12.26,2.22,0,4.14-.6,5.64-1.74v1.2c0,4.38-1.44,4.92-5.64,4.92-1.96,0-3.47-.57-4.69-1.76-.36-.35-.91-.41-1.32-.11l-4.32,3.13c-.47.34-.57,1-.21,1.46,2.84,3.59,6.38,4.73,11.74,4.73,7.33,0,13.45-1.56,13.45-12.37V12.32c0-.56-.46-1.02-1.02-1.02Z"/><rect class="cls-1" x="78.8" y="23.9" width="4.27" height="5.05" transform="translate(161.88 52.85) rotate(180)"/><path class="cls-2" d="M186.58,45.31c0,3.88-1.83,6.43-6.1,6.43s-6.1-2.55-6.1-6.43v-1.61c0-4.24,2.22-6.37,6.1-6.37s6.1,2.13,6.1,6.37v1.61ZM182.43,45.11v-1.22c0-2.05-.44-3.08-1.94-3.08s-1.94,1.03-1.94,3.08v1.22c0,1.83.22,3.13,1.94,3.13s1.94-1.3,1.94-3.13Z"/><path class="cls-2" d="M196.14,41.87c-.25-.42-.64-1-1.44-1-1.19,0-1.88.83-1.88,2.69v7.9h-4.16v-13.86h4.05v1.05c.42-.53,1.33-1.33,2.91-1.33s2.83.78,3.63,2.33l-3.1,2.22Z"/><path class="cls-2" d="M207.56,32.34h4.16v19.12h-4.16v-.61c-.67.55-1.52.89-2.6.89-3.55,0-5.43-2.55-5.43-6.26v-1.94c0-4.07,2.22-6.21,5.43-6.21.97,0,1.86.22,2.6.75v-5.74ZM207.56,45.11v-1.52c0-1.86-.53-2.77-1.94-2.77-1.5,0-1.94,1.03-1.94,3.08v1.22c0,1.83.22,3.13,1.94,3.13s1.94-1.3,1.94-3.13Z"/><path class="cls-2" d="M225.21,49.35c-.97,1.69-2.63,2.38-5.15,2.38-4.38,0-6.26-2.83-6.26-6.26v-1.94c0-4.29,2.22-6.21,5.82-6.21,4.02,0,5.82,2.3,5.82,6.62v1.63h-7.48c.05,1.58.44,2.66,2.13,2.66,1.3,0,1.58-.39,2.08-1.02l3.05,2.13ZM217.98,42.81h3.3c-.08-1.52-.66-2-1.63-2-1.08,0-1.55.75-1.66,2Z"/><path class="cls-2" d="M235.13,41.87c-.25-.42-.64-1-1.44-1-1.19,0-1.88.83-1.88,2.69v7.9h-4.16v-13.86h4.05v1.05c.42-.53,1.33-1.33,2.91-1.33s2.83.78,3.63,2.33l-3.1,2.22Z"/><path class="cls-2" d="M246.68,41.85c-.53-.61-1.08-.97-2.36-.97-.58,0-1.3.11-1.3.72,0,.47.44.69,1.72.94,3.8.72,5.21,2.25,5.21,4.79,0,2.77-1.97,4.41-5.54,4.41-2.83,0-4.66-.61-5.9-2.3l3.21-2.33c.47.64,1.03,1.08,2.6,1.08.92,0,1.47-.25,1.47-.75,0-.53-.47-.72-1.77-1-3.13-.69-5.15-1.97-5.15-4.68s2-4.43,5.54-4.43c2.27,0,4.27.53,5.35,2.3l-3.08,2.22Z"/></g></svg>

package/src/components/breadcrumb/ToggleBreadCrumb.vue

@@ -1,19 +1,26 @@
 <template>
   <div class="toggle-breadcrumb" v-if="breadcrumb_computed">
     <div v-for="(crumb, index) in breadcrumb_computed" :key="index">
-      <router-link :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && !isNuxt">{{ crumb.name }}</router-link>
-      <NuxtLink :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && isNuxt">{{ crumb.name }}</NuxtLink>
-      <i class="toggle-breadcrumb-arrow-right" v-if="crumb.link"></i>
-      <h1 class="toggle-breadcrumb-h1" v-if="!crumb.link">{{ crumb.name }}</h1>
+      <template v-if="index === breadcrumb_computed.length - 1 && editable">
+        <input
+          class="toggle-breadcrumb-editable-input"
+          v-model="crumb.name"
+          maxlength="50"
+          @input="autoResizeInput($event.target); updateContent($event);"
+        />
+      </template>
+      <template v-else>
+        <router-link :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && !isNuxt">{{ crumb.name }}</router-link>
+        <NuxtLink :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && isNuxt">{{ crumb.name }}</NuxtLink>
+        <i class="toggle-breadcrumb-arrow-right" v-if="crumb.link"></i>
+        <h1 class="toggle-breadcrumb-h1" v-if="!crumb.link">{{ crumb.name }}</h1>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
-
-
 export default {
-
   mixins: [],
   props: {
     isNuxt: {
@@ -23,21 +30,31 @@ export default {
     breadcrumb: {
       type: Array,
       required: false
+    },
+    editable: {
+      type: Boolean,
+      default: false
     }
   },
 
   data: function () {
-
-
     return {};
   },
 
   computed: {
-
     breadcrumb_computed() {
-      return this.isNuxt ?  this.breadcrumb : this.$route.meta.breadcrumb
+      return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb
     },
-  }
+  },
 
+  methods: {
+    autoResizeInput(input) {
+      input.style.width = input.value.length * 11 + "px";
+    }, 
+    updateContent(event) {
+      const newContent = event.target.value;
+      this.$emit('update:lastCrumb', newContent);
+    }
+  }
 }
 </script>

package/src/components/forms/ToggleInputCurrency.vue

@@ -3,7 +3,8 @@
 
 
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled }"  v-on:click="focusClosestInput">
+
     <label 
         v-if="label"
         :for="name ? name : 'InputText' " 
@@ -16,6 +17,7 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
+        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -91,8 +93,13 @@ export default {
         currencyDenomination: {
             type: Number,
             default: 100
-        }
-       
+        },
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false
+
+        },
     },
 
     created : function(){

package/src/components/forms/ToggleInputNumber.vue

@@ -3,7 +3,7 @@
 
 
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled }"  v-on:click="focusClosestInput">
     <label 
         v-if="label"
         :for="name ? name : 'ToggleInputNumber' " 
@@ -20,6 +20,7 @@
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
         :pattern="pattern"
+        :disabled="disabled"
     />
     <label
         class="toggle-input-label-error" 
@@ -90,7 +91,12 @@ export default {
         pattern: {
             type:String,
             default:"\\d*"
-        }
+        },
+        disabled: {
+          type: Boolean,
+          required: false,
+          default: false
+        },
     },
 
     created : function(){

package/src/components/forms/ToggleInputPercentage.vue

@@ -1,6 +1,6 @@
 <template>
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled }"  v-on:click="focusClosestInput">
 
     <label 
         v-if="label"
@@ -14,6 +14,7 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
+        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -77,6 +78,11 @@ export default {
         allowFloat: {
             type: Boolean,
             default: false
+        },
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false
         }
     },
 

package/src/components/forms/ToggleInputRadioButtonMini.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <label :class="['toggle-input-radio-button-mini-switch', {'toggle-input-radio-button-mini-switch-disabled': disabled}]">
+            <input type="checkbox" :value="value" v-model="value" :disabled="disabled">
+            <span :class="['toggle-input-radio-button-mini-slider', {'toggle-input-radio-button-mini-slider-disabled': disabled}]">
+                <span class="toggle-input-radio-button-mini-text-on">On</span>
+                <span class="toggle-input-radio-button-mini-text-off">Off</span>
+            </span>
+        </label>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ToggleInputRadioButtonMini',
+    props: {
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        value: {
+            get() {
+                return this.$attrs.value
+            },
+            set(value) {
+                this.$emit('input', value)
+            }
+        }
+    },
+    watch: {
+        value: function (val) {
+            this.$emit('input', val)
+        }
+    }
+}
+</script>

package/src/components/forms/ToggleInputText.vue

@@ -1,16 +1,16 @@
 <template>
 
 <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
-    <label 
+    <label
         v-if="label"
-        :for="name ? name : 'InputText' " 
+        :for="name ? name : 'InputText' "
         class="toggle-input-label"
-    > {{ label }} 
+    > {{ label }}
     </label>
     <span class="toggle-input-counter" v-if="maxLength">{{messageLength(inputVal, maxLength)}}</span>
     <input
         :type="type"
-        :name="name ? name : 'ToggleInputText' " 
+        :name="name ? name : 'ToggleInputText' "
         :class="[ 'toggle-input', size]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
@@ -21,7 +21,7 @@
         :readonly="readonly"
     />
     <label
-        class="toggle-input-label-error" 
+        class="toggle-input-label-error"
         v-if="isInvalid"
         :for="name ? name : 'ToggleInputText' "
     >
@@ -103,8 +103,6 @@ export default {
         }
     },
 
-    created : function(){
-    },
     computed: {
         inputVal: {
             get: function (){

package/src/components/statusbar/ToggleStatusBar.vue

@@ -0,0 +1,74 @@
+<template>
+    <div :class="['toggle-status-bar-container', statusColours, statusSize]">
+        <span class="toggle-status-bar-dot blinking toggle-status-bar-label" v-if="showDot">&#9679;</span>
+        <label class="toggle-status-bar-label">
+            {{ statusName }}
+        </label>
+        
+        <div class="toggle-status-bar-tooltip-container" v-if="showToolTip && toolTipText.length">
+            <div class="toggle-status-bar-tooltip">
+                ?
+                <span class="toggle-status-bar-tooltip-text">{{ toolTipText }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'StatusBar',
+    props: {
+        status: {
+            type: String,
+            required: true,
+            validator: function (value) {
+                return ['draft', 'processing', 'complete', 'inactive', 'active', 'submitted', 'failed'].indexOf(value) !== -1;
+            }
+        },
+        size: {
+            type: String,
+            required: false,
+            default: 'regular',
+            validator: function (value) {
+                return ['small', 'regular'].indexOf(value) !== -1;
+            }
+        },
+        toolTipOptions: {
+            type: Object,
+            required: false
+        }
+    },
+    computed: {
+        // Capitalise the first letter of the status
+        statusName() {
+            return this.status.charAt(0).toUpperCase() + this.status.slice(1);
+        },
+        // Add the status to the class name
+        statusColours() {
+            return 'toggle-status-bar-' + this.status;
+        },
+        // Add the size to the class name
+        statusSize() {
+            return 'toggle-status-bar-' + this.size;
+        },
+        // Show the dot if the status is active or processing
+        showDot() {
+            return this.status === 'active' || this.status === 'processing' || this.status === 'submitted';
+        },
+        showToolTip() {
+            return this.size == 'regular';
+        },
+        toolTipText() {
+            if (!this.toolTipOptions) {
+                return '';
+            }
+
+            if (this.toolTipOptions[this.status]) {
+                return this.toolTipOptions[this.status];
+            } else {
+                return '';
+            }
+        }
+    }
+}
+</script>

package/src/index.js

@@ -8,6 +8,7 @@ import ToggleInputSelect from "./components/forms/ToggleInputSelect.vue";
 import ToggleInputPercentage from "./components/forms/ToggleInputPercentage.vue";
 import ToggleInputCurrency from "./components/forms/ToggleInputCurrency.vue";
 import ToggleInputRadioButtons from "./components/forms/ToggleInputRadioButtons.vue";
+import ToggleInputRadioButtonMini from "./components/forms/ToggleInputRadioButtonMini.vue";
 import ToggleInputTextArea from "./components/forms/ToggleInputTextArea.vue";
 import ToggleInputCheckboxContainer from "./components/forms/ToggleInputCheckboxContainer.vue";
 import ToggleInternationalPhoneInputSelect from "./components/forms/ToggleInternationalPhoneInputSelect.vue";
@@ -43,7 +44,6 @@ import ToggleTableColumn from './components/tables/ToggleTableColumn.vue';
 import ToggleBadge from './components/badges/ToggleBadge.vue';
 import ToggleCalculateBadge from './components/badges/ToggleCalculateBadge.vue';
 import TogglePodiumBadge from './components/badges/TogglePodiumBadge.vue';
-import ToggleLogoBadge from './components/badges/ToggleLogoBadge.vue';
 
 import ToggleBreadCrumb from './components/breadcrumb/ToggleBreadCrumb.vue';
 import ToggleSideNavItem from './components/navs/sidenav/ToggleSideNavItem.vue';
@@ -83,6 +83,8 @@ import ToggleMetricFunnelChart from "./components/metrics/ToggleMetricFunnelChar
 import ToggleThreeDots from "./components/threedots/ToggleThreeDots.vue";
 import ToggleThreeDotsButton from "./components/threedots/ToggleThreeDotsButton.vue";
 
+import ToggleStatusBar from "./components/statusbar/ToggleStatusBar.vue";
+
 import ToggleCarousel from "./components/carousel/ToggleCarousel.vue";
 import ToggleCarouselSlide from "./components/carousel/ToggleCarouselSlide.vue";
 
@@ -102,7 +104,6 @@ const Components = {
     ToggleBadge,
     ToggleCalculateBadge,
     TogglePodiumBadge,
-    ToggleLogoBadge,
     ToggleTableColumn,
     ToggleInputText,
     ToggleInputEditableText,
@@ -112,6 +113,7 @@ const Components = {
     ToggleInputPercentage,
     ToggleInputCurrency,
     ToggleInputRadioButtons,
+    ToggleInputRadioButtonMini,
     ToggleInputTextArea,
     ToggleInputCheckboxContainer,
     ToggleInputCheckbox,
@@ -161,6 +163,7 @@ const Components = {
     ToggleBoosterBasicButton,
     ToggleBoosterModal,
     ToggleContactSearch,
+    ToggleStatusBar,
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,

package/src/sass/includes/_as_badges.scss

@@ -228,53 +228,4 @@
         width: 22px;
         margin-right: 15px;
     }
-}
-
-.toggle-logo-badge-small {
-    border: 0;
-    font-family: $toggle-font-family;
-    width: fit-content;
-    font-weight: bold;
-    display: grid;
-    padding: 0.3rem;
-    border-radius: 0.6rem;
-    align-items: center;
-    justify-content: center;
-}
-
-.toggle-logo-badge-medium {
-    border: 0;
-    font-family: $toggle-font-family;
-    width: fit-content;
-    font-weight: bold;
-    display: grid;
-    padding: 0.3rem;
-    border-radius: 0.6rem;
-    align-items: center;
-    justify-content: center;
-}
-
-.toggle-logo-badge-large {
-    border: 0;
-    font-family: $toggle-font-family;
-    width: fit-content;
-    font-weight: bold;
-    display: grid;
-    padding: 0.3rem;
-    border-radius: 0.6rem;
-    align-items: center;
-    justify-content: center;
-}
-
-.toggle-logo-badge-small > img {
-
-}
-
-.toggle-logo-badge-medium > img {
-    width: 100%;
-    height: 1.1rem;
-}
-
-.toggle-logo-badge-large > img {
-    
 }

package/src/sass/includes/_as_boosters.scss

@@ -29,6 +29,10 @@
         background-color: $booster-feedback-colour-med;
     }
 
+    &.bulkOrders{
+        background-color: $booster-bulk-order-colour-med;
+    }
+
     &.test{
         background-color: $booster-test-colour-light;
     }
@@ -83,6 +87,10 @@
         }
     }
 
+    &.bulkOrders{
+        background-color: rgba($booster-bulk-order-colour-light, 0.8);
+    }
+
     &.test{
         background-color: rgba($booster-test-colour-med, 0.8);
         &:hover{
@@ -132,6 +140,10 @@
         color: $booster-tickets-colour-med;
     }
 
+    &.bulkOrders{
+        color: $booster-bulk-order-colour-med;
+    }
+
     &.test{
         color: $booster-test-colour-light;
     }
@@ -182,6 +194,10 @@ margin:1rem
         background-color: $booster-feedback-colour-med;
     }
 
+    &.bulkOrders{
+        background-color: $booster-bulk-order-colour-med;
+    }
+
     &.test{
         background-color: $booster-test-colour-light;
     } 

package/src/sass/includes/_as_breadcrumb.scss

@@ -10,6 +10,37 @@
 
     }
 
+    .toggle-breadcrumb-editable-input {
+        font-size: $toggle-font-size-extra-large;
+        font-family: "DIN-2014","Lato",sans-serif;
+        color: $toggle-black;
+        background-color: transparent;
+        display: inline-flex;
+        align-items: center;
+        min-width: 10rem !important;
+        max-width: 31rem !important;
+        height: 2rem;
+        width: 15rem;
+        padding-right: 0.5rem;
+        border: none;
+        border-radius: 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        line-height: 1;
+        border: 1px solid transparent;
+        margin: -1px 0 0 0;
+      }
+      .toggle-breadcrumb-editable-input:hover {
+        border: 1px solid #ccc;
+        background-color: $toggle-off-white;
+      }
+
+      .toggle-breadcrumb-editable-input:focus {
+        border: 1px solid #ccc;
+        outline: none;
+      }
+
+
     a {
 
         font-size: $toggle-font-size-extra-large;

package/src/sass/includes/_as_inputs.scss

@@ -237,6 +237,11 @@
     opacity: 0.7 !important;
 }
 
+.calendar-icon-disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
 .toggle-input-select-container{
     position:relative;
     background-color: $toggle-dark-grey;
@@ -1213,4 +1218,83 @@ $iconWidth:20px;
 .drop-down-leave-to {
     overflow: hidden;
     max-height: 0;
+}
+
+// Radio button mini
+
+.toggle-input-radio-button-mini-switch {
+    position: relative;
+    display: inline-block;
+    width: 52px;
+    height: 28px;
+  }
+  
+  .toggle-input-radio-button-mini-switch input { 
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  .toggle-input-radio-button-mini-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+    display: flex;
+    align-items: center;
+    border-radius: 34px;
+  }
+  
+  .toggle-input-radio-button-mini-slider:before {
+    position: absolute;
+    content: "";
+    height: 22px;
+    width: 22px;
+    left: 4px;
+    bottom: 3px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+  }
+  
+  input:checked + .toggle-input-radio-button-mini-slider {
+    background-color: #2196F3;
+  }
+  
+  input:focus + .toggle-input-radio-button-mini-slider {
+    box-shadow: 0 0 1px #2196F3;
+  }
+  
+  input:checked + .toggle-input-radio-button-mini-slider:before {
+    -webkit-transform: translateX(22px);
+    -ms-transform: translateX(22px);
+    transform: translateX(22px);
+  }
+
+  .toggle-input-radio-button-mini-text-on {
+    font-family: $toggle-font-family;
+    font-size: 12px;
+    color: #ffffff;
+    margin-left: 7px;
+  }
+  .toggle-input-radio-button-mini-text-off {
+    font-family: $toggle-font-family;
+    font-size: 12px;
+    color: #3A4A62;
+    margin-left: 6px;
+  }
+.toggle-input-radio-button-mini-switch-disabled {
+    cursor: default !important;
+    opacity: 0.5;
+}
+
+.toggle-input-radio-button-mini-slider-disabled {
+    cursor: default !important;
+    opacity: 0.5;
 }