toggle-components-library 1.22.5 → 1.22.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.22.5",
+  "version": "1.22.8",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/icons/airship-clipboard-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_302" data-name="Group 302" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77.291" height="96" viewBox="0 0 77.291 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_722" data-name="Rectangle 722" width="77.291" height="96" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_288" data-name="Group 288" clip-path="url(#clip-path)">
+    <path id="Path_180" data-name="Path 180" d="M69.583,14.842,59.83,13.67A17.4,17.4,0,0,0,27.207,9.751L17.451,8.579a8.751,8.751,0,0,0-9.733,7.645L.063,79.941a8.753,8.753,0,0,0,7.645,9.733L59.84,95.937a8.751,8.751,0,0,0,9.733-7.645l7.655-63.717a8.751,8.751,0,0,0-7.645-9.733M37.028,16.807a5.834,5.834,0,1,1,5.1,6.488,5.831,5.831,0,0,1-5.1-6.488m-20.8,22.55A4.066,4.066,0,0,1,20.745,35.8l12.743,1.531a4.066,4.066,0,0,1-.97,8.073L19.775,43.878a4.066,4.066,0,0,1-3.552-4.522M14.436,54.236a4.066,4.066,0,0,1,4.522-3.552l22.989,2.762a4.066,4.066,0,1,1-.97,8.073L17.988,58.758a4.066,4.066,0,0,1-3.552-4.522M60,73.886h0a4.066,4.066,0,0,1-4.522,3.552L16.309,72.732a4.066,4.066,0,1,1,.97-8.073L56.45,69.364A4.066,4.066,0,0,1,60,73.886" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-clipboard.svg

@@ -0,0 +1,10 @@
+<svg id="Group_289" data-name="Group 289" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77.291" height="96" viewBox="0 0 77.291 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_722" data-name="Rectangle 722" width="77.291" height="96" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_288" data-name="Group 288" clip-path="url(#clip-path)">
+    <path id="Path_180" data-name="Path 180" d="M69.583,14.842,59.83,13.67A17.4,17.4,0,0,0,27.207,9.751L17.451,8.579a8.751,8.751,0,0,0-9.733,7.645L.063,79.941a8.753,8.753,0,0,0,7.645,9.733L59.84,95.937a8.751,8.751,0,0,0,9.733-7.645l7.655-63.717a8.751,8.751,0,0,0-7.645-9.733M37.028,16.807a5.834,5.834,0,1,1,5.1,6.488,5.831,5.831,0,0,1-5.1-6.488m-20.8,22.55A4.066,4.066,0,0,1,20.745,35.8l12.743,1.531a4.066,4.066,0,0,1-.97,8.073L19.775,43.878a4.066,4.066,0,0,1-3.552-4.522M14.436,54.236a4.066,4.066,0,0,1,4.522-3.552l22.989,2.762a4.066,4.066,0,1,1-.97,8.073L17.988,58.758a4.066,4.066,0,0,1-3.552-4.522M60,73.886h0a4.066,4.066,0,0,1-4.522,3.552L16.309,72.732a4.066,4.066,0,1,1,.97-8.073L56.45,69.364A4.066,4.066,0,0,1,60,73.886" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-cog-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_305" data-name="Group 305" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.626" height="96" viewBox="0 0 95.626 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_725" data-name="Rectangle 725" width="95.626" height="96" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_294" data-name="Group 294" clip-path="url(#clip-path)">
+    <path id="Path_184" data-name="Path 184" d="M95.593,42.307a4.266,4.266,0,0,1-2.24,4.214L86.2,50.433a5.744,5.744,0,0,0-2.882,4.035q-.185,1.024-.432,2.047t-.553,2.018a5.745,5.745,0,0,0,.714,4.907l4.568,6.754a4.266,4.266,0,0,1,.061,4.772,47.7,47.7,0,0,1-4.387,5.57l-1.217,1.271a49.539,49.539,0,0,1-5.423,4.739,4.3,4.3,0,0,1-4.776.157L64.9,82.456a5.682,5.682,0,0,0-4.838-.514,41.751,41.751,0,0,1-4.126,1.2A5.736,5.736,0,0,0,52.1,86.2l-3.59,7.368A4.341,4.341,0,0,1,45.435,95.9a5.176,5.176,0,0,1-1.5.08,49.266,49.266,0,0,1-7.618-1.246,47.972,47.972,0,0,1-7.01-2.3A5.193,5.193,0,0,1,28,91.671a4.34,4.34,0,0,1-1.665-3.477l.182-8.152a5.736,5.736,0,0,0-2.033-4.49,36.983,36.983,0,0,1-3.047-2.912,5.742,5.742,0,0,0-4.606-1.831l-8.113.582a4.291,4.291,0,0,1-4.176-2.327,49.337,49.337,0,0,1-2.653-6.7l-.5-1.687A46.889,46.889,0,0,1,.029,53.718a4.27,4.27,0,0,1,2.249-4.212L9.431,45.59a5.743,5.743,0,0,0,2.878-4.024q.187-1.028.436-2.055t.553-2.026a5.743,5.743,0,0,0-.716-4.895L8.018,25.833a4.262,4.262,0,0,1-.07-4.775,47.088,47.088,0,0,1,4.4-5.566l1.212-1.273a48.671,48.671,0,0,1,5.424-4.729,4.268,4.268,0,0,1,4.778-.158l6.945,4.226a5.743,5.743,0,0,0,4.935.478,36.14,36.14,0,0,1,4.036-1.19,5.739,5.739,0,0,0,3.874-3.064L47.12,2.461A4.264,4.264,0,0,1,51.233.012,48.686,48.686,0,0,1,66.759,3.776a4.264,4.264,0,0,1,2.535,4.061l-.183,8.185A5.74,5.74,0,0,0,71.133,20.5a40.726,40.726,0,0,1,3.113,2.955,5.681,5.681,0,0,0,4.535,1.762l8.137-.577a4.276,4.276,0,0,1,4.173,2.329,48.632,48.632,0,0,1,2.653,6.687l.5,1.688a47.7,47.7,0,0,1,1.349,6.96M44.272,62.626a15.121,15.121,0,1,0-11.03-18.32,15.069,15.069,0,0,0,11.03,18.32" transform="translate(0 -0.001)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-cog.svg

@@ -0,0 +1,10 @@
+<svg id="Group_295" data-name="Group 295" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.626" height="96" viewBox="0 0 95.626 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_725" data-name="Rectangle 725" width="95.626" height="96" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_294" data-name="Group 294" clip-path="url(#clip-path)">
+    <path id="Path_184" data-name="Path 184" d="M95.593,42.307a4.266,4.266,0,0,1-2.24,4.214L86.2,50.433a5.744,5.744,0,0,0-2.882,4.035q-.185,1.024-.432,2.047t-.553,2.018a5.745,5.745,0,0,0,.714,4.907l4.568,6.754a4.266,4.266,0,0,1,.061,4.772,47.7,47.7,0,0,1-4.387,5.57l-1.217,1.271a49.539,49.539,0,0,1-5.423,4.739,4.3,4.3,0,0,1-4.776.157L64.9,82.456a5.682,5.682,0,0,0-4.838-.514,41.751,41.751,0,0,1-4.126,1.2A5.736,5.736,0,0,0,52.1,86.2l-3.59,7.368A4.341,4.341,0,0,1,45.435,95.9a5.176,5.176,0,0,1-1.5.08,49.266,49.266,0,0,1-7.618-1.246,47.972,47.972,0,0,1-7.01-2.3A5.193,5.193,0,0,1,28,91.671a4.34,4.34,0,0,1-1.665-3.477l.182-8.152a5.736,5.736,0,0,0-2.033-4.49,36.983,36.983,0,0,1-3.047-2.912,5.742,5.742,0,0,0-4.606-1.831l-8.113.582a4.291,4.291,0,0,1-4.176-2.327,49.337,49.337,0,0,1-2.653-6.7l-.5-1.687A46.889,46.889,0,0,1,.029,53.718a4.27,4.27,0,0,1,2.249-4.212L9.431,45.59a5.743,5.743,0,0,0,2.878-4.024q.187-1.028.436-2.055t.553-2.026a5.743,5.743,0,0,0-.716-4.895L8.018,25.833a4.262,4.262,0,0,1-.07-4.775,47.088,47.088,0,0,1,4.4-5.566l1.212-1.273a48.671,48.671,0,0,1,5.424-4.729,4.268,4.268,0,0,1,4.778-.158l6.945,4.226a5.743,5.743,0,0,0,4.935.478,36.14,36.14,0,0,1,4.036-1.19,5.739,5.739,0,0,0,3.874-3.064L47.12,2.461A4.264,4.264,0,0,1,51.233.012,48.686,48.686,0,0,1,66.759,3.776a4.264,4.264,0,0,1,2.535,4.061l-.183,8.185A5.74,5.74,0,0,0,71.133,20.5a40.726,40.726,0,0,1,3.113,2.955,5.681,5.681,0,0,0,4.535,1.762l8.137-.577a4.276,4.276,0,0,1,4.173,2.329,48.632,48.632,0,0,1,2.653,6.687l.5,1.688a47.7,47.7,0,0,1,1.349,6.96M44.272,62.626a15.121,15.121,0,1,0-11.03-18.32,15.069,15.069,0,0,0,11.03,18.32" transform="translate(0 -0.001)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-down-arrow-active.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="130" height="65" viewBox="0 0 130 65">
+  <path id="Polygon_38" data-name="Polygon 38" d="M56.515,8.485a12,12,0,0,1,16.971,0l36.029,36.029A12,12,0,0,1,101.029,65H28.971a12,12,0,0,1-8.485-20.485Z" transform="translate(130 65) rotate(180)" fill="#477ef6"/>
+</svg>

package/src/assets/icons/airship-down-arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="130" height="65" viewBox="0 0 130 65">
+  <path id="Polygon_39" data-name="Polygon 39" d="M56.515,8.485a12,12,0,0,1,16.971,0l36.029,36.029A12,12,0,0,1,101.029,65H28.971a12,12,0,0,1-8.485-20.485Z" transform="translate(130 65) rotate(180)" fill="#c3ced9"/>
+</svg>

package/src/assets/icons/airship-hat-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_306" data-name="Group 306" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.661" height="69.125" viewBox="0 0 95.661 69.125">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_726" data-name="Rectangle 726" width="95.661" height="69.125" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_296" data-name="Group 296" clip-path="url(#clip-path)">
+    <path id="Path_185" data-name="Path 185" d="M92.737,8.968,49.044.259A9.461,9.461,0,0,0,42.7.953L2.043,18.885a3.7,3.7,0,0,0,.755,6.9l5.3,1.463C6.583,29.8,6.9,66.418,6.9,66.418c0,1.353.9,2.705,1.836,2.707l1.921-.3c1.477-.162,3.463-.94,3.607-2.705,0,0-.835-35.1.751-37.272L46.7,36.289a9.461,9.461,0,0,0,6.339-.693L93.619,15.858a3.679,3.679,0,0,0,2.02-3.715,3.624,3.624,0,0,0-2.9-3.175M55.278,42.47a12.909,12.909,0,0,1-4.555,1.345,14.244,14.244,0,0,1-4.872-.307L26.261,38.824a2.381,2.381,0,0,0-2.934,2.329l.1,18.542c.675,6.17,13.934,9.77,29.906,8.023C69.039,66,81.476,59.592,80.8,53.426L76.9,35.28a2.38,2.38,0,0,0-3.364-1.642Z" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-hat.svg

@@ -0,0 +1,10 @@
+<svg id="Group_297" data-name="Group 297" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.661" height="69.125" viewBox="0 0 95.661 69.125">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_726" data-name="Rectangle 726" width="95.661" height="69.125" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_296" data-name="Group 296" clip-path="url(#clip-path)">
+    <path id="Path_185" data-name="Path 185" d="M92.737,8.968,49.044.259A9.461,9.461,0,0,0,42.7.953L2.043,18.885a3.7,3.7,0,0,0,.755,6.9l5.3,1.463C6.583,29.8,6.9,66.418,6.9,66.418c0,1.353.9,2.705,1.836,2.707l1.921-.3c1.477-.162,3.463-.94,3.607-2.705,0,0-.835-35.1.751-37.272L46.7,36.289a9.461,9.461,0,0,0,6.339-.693L93.619,15.858a3.679,3.679,0,0,0,2.02-3.715,3.624,3.624,0,0,0-2.9-3.175M55.278,42.47a12.909,12.909,0,0,1-4.555,1.345,14.244,14.244,0,0,1-4.872-.307L26.261,38.824a2.381,2.381,0,0,0-2.934,2.329l.1,18.542c.675,6.17,13.934,9.77,29.906,8.023C69.039,66,81.476,59.592,80.8,53.426L76.9,35.28a2.38,2.38,0,0,0-3.364-1.642Z" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-megaphone-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_300" data-name="Group 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="87.481" height="96" viewBox="0 0 87.481 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_720" data-name="Rectangle 720" width="87.481" height="96" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_284" data-name="Group 284" clip-path="url(#clip-path)">
+    <path id="Path_178" data-name="Path 178" d="M77.7,28.12,72.393,4.168A5.318,5.318,0,0,0,62.719,2.46L57.2,11.115A42.561,42.561,0,0,1,30.521,29.793L8.338,34.709A10.642,10.642,0,0,0,.254,47.4L3.706,62.976A10.642,10.642,0,0,0,16.394,71.06L21,91.832a5.316,5.316,0,0,0,6.344,4.042l10.386-2.3a5.313,5.313,0,0,0,4.042-6.344l-4.6-20.772,1.412-.313a42.407,42.407,0,0,1,32.038,5.515l8.692,5.65a5.312,5.312,0,0,0,8.048-5.631L82.047,47.724c2.7-2.1,5.354-6.758,4.35-11.285s-5.36-7.559-8.7-8.318M74.211,61.531a53.166,53.166,0,0,0-37.935-5.774l-1.412.313L31.411,40.491l1.412-.313A53.166,53.166,0,0,0,64.766,18.917Z" transform="translate(0 -0.001)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-megaphone.svg

@@ -0,0 +1,10 @@
+<svg id="Group_285" data-name="Group 285" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="87.481" height="96" viewBox="0 0 87.481 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_720" data-name="Rectangle 720" width="87.481" height="96" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_284" data-name="Group 284" clip-path="url(#clip-path)">
+    <path id="Path_178" data-name="Path 178" d="M77.7,28.12,72.393,4.168A5.318,5.318,0,0,0,62.719,2.46L57.2,11.115A42.561,42.561,0,0,1,30.521,29.793L8.338,34.709A10.642,10.642,0,0,0,.254,47.4L3.706,62.976A10.642,10.642,0,0,0,16.394,71.06L21,91.832a5.316,5.316,0,0,0,6.344,4.042l10.386-2.3a5.313,5.313,0,0,0,4.042-6.344l-4.6-20.772,1.412-.313a42.407,42.407,0,0,1,32.038,5.515l8.692,5.65a5.312,5.312,0,0,0,8.048-5.631L82.047,47.724c2.7-2.1,5.354-6.758,4.35-11.285s-5.36-7.559-8.7-8.318M74.211,61.531a53.166,53.166,0,0,0-37.935-5.774l-1.412.313L31.411,40.491l1.412-.313A53.166,53.166,0,0,0,64.766,18.917Z" transform="translate(0 -0.001)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-pencil-hover.svg

@@ -0,0 +1,11 @@
+<svg id="Group_299" data-name="Group 299" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="68.611" height="95.999" viewBox="0 0 68.611 95.999">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_719" data-name="Rectangle 719" width="68.611" height="95.999" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_282" data-name="Group 282" clip-path="url(#clip-path)">
+    <path id="Path_176" data-name="Path 176" d="M3.234,165.214a14.3,14.3,0,0,0-2.114,6.727l-1.115,20.3a3.567,3.567,0,0,0,1.806,3.389,3.657,3.657,0,0,0,4,.207L23.49,185.779a14.218,14.218,0,0,0,5.077-4.894l28.14-45.454L31.361,119.753Zm16.415,13.807-8.533,4.857a1.85,1.85,0,0,1-2.763-1.709l.536-9.809A6.58,6.58,0,0,1,9.85,169.3a.8.8,0,0,1,1.1-.26l10.747,6.65a.8.8,0,0,1,.259,1.1v0a7.718,7.718,0,0,1-2.307,2.226" transform="translate(0 -100.337)" fill="#477ef6"/>
+    <path id="Path_177" data-name="Path 177" d="M249.06,6.313l-7.683-4.758a10.393,10.393,0,0,0-14.3,3.367l-5.84,9.437L246.586,30.04l5.84-9.437a10.383,10.383,0,0,0-3.365-14.29" transform="translate(-185.369 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-pencil.svg

@@ -0,0 +1,11 @@
+<svg id="Group_283" data-name="Group 283" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="68.611" height="95.999" viewBox="0 0 68.611 95.999">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_719" data-name="Rectangle 719" width="68.611" height="95.999" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_282" data-name="Group 282" clip-path="url(#clip-path)">
+    <path id="Path_176" data-name="Path 176" d="M3.234,165.214a14.3,14.3,0,0,0-2.114,6.727l-1.115,20.3a3.567,3.567,0,0,0,1.806,3.389,3.657,3.657,0,0,0,4,.207L23.49,185.779a14.218,14.218,0,0,0,5.077-4.894l28.14-45.454L31.361,119.753Zm16.415,13.807-8.533,4.857a1.85,1.85,0,0,1-2.763-1.709l.536-9.809A6.58,6.58,0,0,1,9.85,169.3a.8.8,0,0,1,1.1-.26l10.747,6.65a.8.8,0,0,1,.259,1.1v0a7.718,7.718,0,0,1-2.307,2.226" transform="translate(0 -100.337)" fill="#354b64"/>
+    <path id="Path_177" data-name="Path 177" d="M249.06,6.313l-7.683-4.758a10.393,10.393,0,0,0-14.3,3.367l-5.84,9.437L246.586,30.04l5.84-9.437a10.383,10.383,0,0,0-3.365-14.29" transform="translate(-185.369 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-pie-chart-hover.svg

@@ -0,0 +1,11 @@
+<svg id="Group_303" data-name="Group 303" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93.636" height="95.734" viewBox="0 0 93.636 95.734">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_723" data-name="Rectangle 723" width="93.636" height="95.734" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_290" data-name="Group 290" clip-path="url(#clip-path)">
+    <path id="Path_181" data-name="Path 181" d="M287.337,38.332A42.227,42.227,0,0,0,241.445.178a2.964,2.964,0,0,0-2.719,3.387l3.559,38.894a3.058,3.058,0,0,0,3.324,2.767l38.933-3.563a3.077,3.077,0,0,0,2.794-3.331" transform="translate(-193.714 0)" fill="#477ef6"/>
+    <path id="Path_182" data-name="Path 182" d="M71.505,143.953l-29.786,2.721a3.868,3.868,0,0,1-4.2-3.5L34.79,113.389a3.865,3.865,0,0,0-4.629-3.437,37.868,37.868,0,0,0,11.158,74.785,38.083,38.083,0,0,0,34.406-36.855,3.865,3.865,0,0,0-4.22-3.929" transform="translate(-0.001 -89.159)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-pie-chart.svg

@@ -0,0 +1,11 @@
+<svg id="Group_291" data-name="Group 291" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93.636" height="95.734" viewBox="0 0 93.636 95.734">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_723" data-name="Rectangle 723" width="93.636" height="95.734" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_290" data-name="Group 290" clip-path="url(#clip-path)">
+    <path id="Path_181" data-name="Path 181" d="M287.337,38.332A42.227,42.227,0,0,0,241.445.178a2.964,2.964,0,0,0-2.719,3.387l3.559,38.894a3.058,3.058,0,0,0,3.324,2.767l38.933-3.563a3.077,3.077,0,0,0,2.794-3.331" transform="translate(-193.714 0)" fill="#354b64"/>
+    <path id="Path_182" data-name="Path 182" d="M71.505,143.953l-29.786,2.721a3.868,3.868,0,0,1-4.2-3.5L34.79,113.389a3.865,3.865,0,0,0-4.629-3.437,37.868,37.868,0,0,0,11.158,74.785,38.083,38.083,0,0,0,34.406-36.855,3.865,3.865,0,0,0-4.22-3.929" transform="translate(-0.001 -89.159)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-plane-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_298" data-name="Group 298" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.946" height="81.045" viewBox="0 0 95.946 81.045">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_718" data-name="Rectangle 718" width="95.946" height="81.045" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_280" data-name="Group 280" clip-path="url(#clip-path)">
+    <path id="Path_175" data-name="Path 175" d="M75.147,5.139c4.958-3.3,16.381-4.836,19.758.237C98.379,10.6,92.455,20.395,87.5,23.695l-11.5,7.656a11.176,11.176,0,0,0-4.958,10.064L73,70.14a5.6,5.6,0,0,1-2.477,5.016l-8.147,5.422a2.794,2.794,0,0,1-4.2-1.471l-7.76-24.346a4.168,4.168,0,0,0-6.281-2.2L33.816,59.422,33.111,71.94A2.8,2.8,0,0,1,31.873,74.1l-6.084,4.049a2.482,2.482,0,0,1-3.471-.806,2.643,2.643,0,0,1-.211-.487L18.867,66.708A32.494,32.494,0,0,0,8.974,51.844L.861,44.937a2.55,2.55,0,0,1-.454-.513,2.444,2.444,0,0,1,.683-3.383l6.084-4.049a2.8,2.8,0,0,1,2.473-.307l11.82,4.182L31.781,34a4.168,4.168,0,0,0,.391-6.645L12.709,10.8a2.792,2.792,0,0,1,.264-4.443L21.121.934A5.575,5.575,0,0,1,26.706.589l25.74,12.9a11.175,11.175,0,0,0,11.2-.688Z" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-plane.svg

@@ -0,0 +1,10 @@
+<svg id="Group_281" data-name="Group 281" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.946" height="81.045" viewBox="0 0 95.946 81.045">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_718" data-name="Rectangle 718" width="95.946" height="81.045" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_280" data-name="Group 280" clip-path="url(#clip-path)">
+    <path id="Path_175" data-name="Path 175" d="M75.147,5.139c4.958-3.3,16.381-4.836,19.758.237C98.379,10.6,92.455,20.395,87.5,23.695l-11.5,7.656a11.176,11.176,0,0,0-4.958,10.064L73,70.14a5.6,5.6,0,0,1-2.477,5.016l-8.147,5.422a2.794,2.794,0,0,1-4.2-1.471l-7.76-24.346a4.168,4.168,0,0,0-6.281-2.2L33.816,59.422,33.111,71.94A2.8,2.8,0,0,1,31.873,74.1l-6.084,4.049a2.482,2.482,0,0,1-3.471-.806,2.643,2.643,0,0,1-.211-.487L18.867,66.708A32.494,32.494,0,0,0,8.974,51.844L.861,44.937a2.55,2.55,0,0,1-.454-.513,2.444,2.444,0,0,1,.683-3.383l6.084-4.049a2.8,2.8,0,0,1,2.473-.307l11.82,4.182L31.781,34a4.168,4.168,0,0,0,.391-6.645L12.709,10.8a2.792,2.792,0,0,1,.264-4.443L21.121.934A5.575,5.575,0,0,1,26.706.589l25.74,12.9a11.175,11.175,0,0,0,11.2-.688Z" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-sms-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_301" data-name="Group 301" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.709" height="92.311" viewBox="0 0 95.709 92.311">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_721" data-name="Rectangle 721" width="95.709" height="92.311" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_286" data-name="Group 286" clip-path="url(#clip-path)">
+    <path id="Path_179" data-name="Path 179" d="M75.434.132,9.317,10.191A10.964,10.964,0,0,0,.127,22.679L7.629,72a11.11,11.11,0,0,0,12.643,9.167l12.29-1.87a4.231,4.231,0,0,1,4.822,3.565l.953,6.453c.732,4.81,6.244,2.917,8.361.661L57.963,78.5A15.152,15.152,0,0,1,66.5,74.131l19.9-3.027a10.964,10.964,0,0,0,9.19-12.488L88.08,9.3A11.016,11.016,0,0,0,75.434.132M57.483,48.8a5.545,5.545,0,0,1-4.648,6.315L25.664,59.252A5.544,5.544,0,1,1,24,48.289l27.172-4.134A5.544,5.544,0,0,1,57.483,48.8ZM76.2,26.24a5.544,5.544,0,0,1-4.648,6.315L22.732,39.982a5.544,5.544,0,1,1-1.668-10.963L69.88,21.593A5.545,5.545,0,0,1,76.2,26.24Z" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-sms.svg

@@ -0,0 +1,10 @@
+<svg id="Group_287" data-name="Group 287" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.709" height="92.311" viewBox="0 0 95.709 92.311">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_721" data-name="Rectangle 721" width="95.709" height="92.311" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_286" data-name="Group 286" clip-path="url(#clip-path)">
+    <path id="Path_179" data-name="Path 179" d="M75.434.132,9.317,10.191A10.964,10.964,0,0,0,.127,22.679L7.629,72a11.11,11.11,0,0,0,12.643,9.167l12.29-1.87a4.231,4.231,0,0,1,4.822,3.565l.953,6.453c.732,4.81,6.244,2.917,8.361.661L57.963,78.5A15.152,15.152,0,0,1,66.5,74.131l19.9-3.027a10.964,10.964,0,0,0,9.19-12.488L88.08,9.3A11.016,11.016,0,0,0,75.434.132M57.483,48.8a5.545,5.545,0,0,1-4.648,6.315L25.664,59.252A5.544,5.544,0,1,1,24,48.289l27.172-4.134A5.544,5.544,0,0,1,57.483,48.8ZM76.2,26.24a5.544,5.544,0,0,1-4.648,6.315L22.732,39.982a5.544,5.544,0,1,1-1.668-10.963L69.88,21.593A5.545,5.545,0,0,1,76.2,26.24Z" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-user-icon-hover.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94.001" viewBox="0 0 94 94.001">
+  <path id="Exclusion_3" data-name="Exclusion 3" d="M-11986-16029a46.689,46.689,0,0,1-18.294-3.693,46.864,46.864,0,0,1-14.941-10.071,46.871,46.871,0,0,1-10.073-14.94A46.7,46.7,0,0,1-12033-16076a46.7,46.7,0,0,1,3.693-18.294,46.869,46.869,0,0,1,10.073-14.941,46.869,46.869,0,0,1,14.941-10.073A46.7,46.7,0,0,1-11986-16123a46.7,46.7,0,0,1,18.294,3.693,46.872,46.872,0,0,1,14.939,10.073,46.864,46.864,0,0,1,10.071,14.941A46.689,46.689,0,0,1-11939-16076a46.689,46.689,0,0,1-3.693,18.294,46.871,46.871,0,0,1-10.071,14.94,46.856,46.856,0,0,1-14.939,10.071A46.689,46.689,0,0,1-11986-16029Zm-4.034-45.308a12.917,12.917,0,0,0-9.831,4.836,16.519,16.519,0,0,0-3.95,10.54,2.967,2.967,0,0,0,.64,1.918,2.452,2.452,0,0,0,1.905.842h.089c.04,0,.081,0,.121,0l30.117-1.59h.007a2.756,2.756,0,0,0,2.749-2.756,13.7,13.7,0,0,0-4.037-9.747,13.69,13.69,0,0,0-9.745-4.039Zm4.03-25.366a10.193,10.193,0,0,0-10.181,10.181,10.191,10.191,0,0,0,10.181,10.177,10.111,10.111,0,0,0,7.2-2.981,10.1,10.1,0,0,0,2.981-7.2,10.111,10.111,0,0,0-2.981-7.2A10.111,10.111,0,0,0-11986-16099.674Z" transform="translate(12033.001 16123.001)" fill="#477ef6"/>
+</svg>

package/src/assets/icons/airship-user-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94.001" viewBox="0 0 94 94.001">
+  <path id="Exclusion_1" data-name="Exclusion 1" d="M-11986-16029a46.689,46.689,0,0,1-18.294-3.693,46.864,46.864,0,0,1-14.941-10.071,46.871,46.871,0,0,1-10.073-14.94A46.7,46.7,0,0,1-12033-16076a46.7,46.7,0,0,1,3.693-18.294,46.869,46.869,0,0,1,10.073-14.941,46.869,46.869,0,0,1,14.941-10.073A46.7,46.7,0,0,1-11986-16123a46.7,46.7,0,0,1,18.294,3.693,46.872,46.872,0,0,1,14.939,10.073,46.864,46.864,0,0,1,10.071,14.941A46.689,46.689,0,0,1-11939-16076a46.689,46.689,0,0,1-3.693,18.294,46.871,46.871,0,0,1-10.071,14.94,46.856,46.856,0,0,1-14.939,10.071A46.689,46.689,0,0,1-11986-16029Zm-4.034-45.308a12.917,12.917,0,0,0-9.831,4.836,16.519,16.519,0,0,0-3.95,10.54,2.967,2.967,0,0,0,.64,1.918,2.452,2.452,0,0,0,1.905.842h.089c.04,0,.081,0,.121,0l30.117-1.59h.007a2.756,2.756,0,0,0,2.749-2.756,13.7,13.7,0,0,0-4.037-9.747,13.69,13.69,0,0,0-9.745-4.039Zm4.03-25.366a10.193,10.193,0,0,0-10.181,10.181,10.191,10.191,0,0,0,10.181,10.177,10.111,10.111,0,0,0,7.2-2.981,10.1,10.1,0,0,0,2.981-7.2,10.111,10.111,0,0,0-2.981-7.2A10.111,10.111,0,0,0-11986-16099.674Z" transform="translate(12033.001 16123.001)" fill="#354b64"/>
+</svg>

package/src/assets/icons/airship-wrench-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_304" data-name="Group 304" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="69.43" height="96" viewBox="0 0 69.43 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_724" data-name="Rectangle 724" width="69.43" height="96" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_292" data-name="Group 292" clip-path="url(#clip-path)">
+    <path id="Path_183" data-name="Path 183" d="M66.018,12.913a2.661,2.661,0,0,0-4.62.139L54.272,26.4a6.586,6.586,0,0,1-3.895,3.2,10.982,10.982,0,0,1-13.7-7.314h0a6.585,6.585,0,0,1,.491-5.016L44.294,3.921A2.661,2.661,0,0,0,41.838,0,26.672,26.672,0,0,0,29.866,3.686,26.366,26.366,0,0,0,17.253,29.815a24.188,24.188,0,0,0,4.414,11.631L2.1,78.1c-4.659,8.8-.9,12.981,4.884,16.069,2.754,1.594,6.991,2.312,9.76,1.47s4.524-3.23,6.07-6.125L42.381,52.861a26.677,26.677,0,0,0,12.312-2.707A26.385,26.385,0,0,0,69.385,25.135a24.064,24.064,0,0,0-3.366-12.222M14.308,88.535A5.549,5.549,0,1,1,18,81.612a5.551,5.551,0,0,1-3.7,6.923" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-wrench.svg

@@ -0,0 +1,10 @@
+<svg id="Group_293" data-name="Group 293" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="69.43" height="96" viewBox="0 0 69.43 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_724" data-name="Rectangle 724" width="69.43" height="96" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_292" data-name="Group 292" clip-path="url(#clip-path)">
+    <path id="Path_183" data-name="Path 183" d="M66.018,12.913a2.661,2.661,0,0,0-4.62.139L54.272,26.4a6.586,6.586,0,0,1-3.895,3.2,10.982,10.982,0,0,1-13.7-7.314h0a6.585,6.585,0,0,1,.491-5.016L44.294,3.921A2.661,2.661,0,0,0,41.838,0,26.672,26.672,0,0,0,29.866,3.686,26.366,26.366,0,0,0,17.253,29.815a24.188,24.188,0,0,0,4.414,11.631L2.1,78.1c-4.659,8.8-.9,12.981,4.884,16.069,2.754,1.594,6.991,2.312,9.76,1.47s4.524-3.23,6.07-6.125L42.381,52.861a26.677,26.677,0,0,0,12.312-2.707A26.385,26.385,0,0,0,69.385,25.135a24.064,24.064,0,0,0-3.366-12.222M14.308,88.535A5.549,5.549,0,1,1,18,81.612a5.551,5.551,0,0,1-3.7,6.923" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/components/forms/ToggleInputText.vue

@@ -90,6 +90,12 @@ export default {
           required: false,
           default: false
         },
+        includeEmojiEntitiesInCharCount: {
+            descripion: "If true, emoji's are counted as the length of their HTML entities rather than a signle character length",
+            type: Boolean,
+            required: false,
+            default: false
+        },
         readonly: {
           type: Boolean,
           required: false,
@@ -118,7 +124,19 @@ export default {
         */
         messageLength(count, maxLenght)
         {
-            let mcount = count ? count.length : 0;
+            let message = count;
+            let mcount = 0;
+
+            // If the emoji flag is set, make sure the character count takes account of the decoded emoji characters (this will include £ signs)
+            if (this.includeEmojiEntitiesInCharCount && count) {
+
+                let message = this.convertEmojis(count)
+                mcount = message ? this.convertEmojis(message).length : 0;
+
+            } else {
+                mcount = message ? message.length : 0;
+            }
+
             return mcount+' / '+maxLenght;
         },
 
@@ -133,4 +151,4 @@ export default {
 }
 
 
-</script>
+</script>

package/src/components/loaders/ToggleFillLoader.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="toggle-fill-loader-container">
+    <div class="toggle-fill-loader-container" :class="{'toggle-fill-loader-container-transparent':transparent}">
         <div class="toggle-fill-loader-container-background">
             <div class="toggle-fill-loader" ></div>
         </div>
@@ -10,6 +10,10 @@
 export default {
     name: 'ButtonPrimary',
     props: {
+        transparent:{
+            typer:Boolean,
+            default:true
+        },
         buttonText: {
             type: String,
             default: "button"

package/src/components/mixins/mixins.js

@@ -44,5 +44,59 @@ export const mixins = {
 
         },
 
+        /*
+        * Converts emojis to html entity
+        * @param str (the entire message)
+        * @return string of entire message including decoded emojis
+        */
+        convertEmojis(str) {
+            
+            let result = '';
+
+            //converts unicode decimal value into an HTML entity
+            let decimal2Html = (num) => `&#${num};`;
+
+            //converts a character into an HTML entity 
+            const char2Html = (char) => {
+                let item = `${char}`;
+
+                //spread operator can detect emoji surrogate pairs 
+                if([...item].length > 1) {
+
+                    //handle and convert utf surrogate pairs
+                    let concat = '';
+                    let unicode = '';
+
+                    //for each part of the pair
+                    for(let i = 0; i < 2; i++){
+
+                        //get the character code value 
+                        let dec = char[i].codePointAt();
+                        //convert to binary 
+                        let bin = dec.toString(2);
+                        //take the last 10 bits
+                        let last10 = bin.slice(-10);
+                        //concatenate into 20 bit binary
+                        concat = concat + last10;
+                        //add 0x10000 to get unicode value
+                        unicode = parseInt(concat,2) + 0x10000;
+                    }
+
+                    //html entity from unicode value
+                    return decimal2Html(unicode); 
+                }
+
+                //ASCII character or html entity from character code
+                return char.codePointAt() > 127 ? decimal2Html(char.codePointAt()) : char;
+            };
+
+            //check each character
+            [...str].forEach(char=>{
+                result += char2Html(char);
+            });
+
+            return result;
+        },
+
     }
 }

package/src/components/navs/multitiersidenav/ToggleMultiTierSideNav.vue

@@ -0,0 +1,69 @@
+<template>
+    <nav class="toggle-multi-tier-sidenav-container">
+        <img :src="logo.src" :alt="logo.alt" class="toggle-multi-tier-sidenav-logo">
+        <ul class="toggle-multi-tier-sidenav-ul">
+            <!-- @slot For ToggleSideNavItems -->
+            <slot></slot>
+        </ul>
+
+        <div class="toggle-multi-tier-sidenav-divider"></div>
+
+        <ToggleHeaderTextLarge class="toggle-multi-tier-sidenav-title">
+            {{ title }}
+        </ToggleHeaderTextLarge>
+
+
+        <div class="toggle-multi-tier-sidenav-select-container">
+            <ToggleInputSelect type="text" placeholder="placeholder text" label="Location" :options="unitOptions" v-model="unitOptionVal" />
+        </div>
+
+        <div class="toggle-multi-tier-sidenav-user-icon"></div>
+    </nav>
+</template>
+
+<script>
+
+import ToggleHeaderTextLarge from '../../text/ToggleHeaderTextLarge.vue';
+import ToggleInputSelect from '../../forms/ToggleInputSelect.vue';
+
+export default {
+    name: 'ToggleMultiTierSideNav',
+    props: {
+        value: {},
+        /**
+         * For the logo that is displayed at the top of the nav
+         */
+        logo: {
+            type: Object,
+            required: true
+        },
+        /**
+         * The main title, displayed below logo
+         */
+        title: {
+            type: String,
+            default: 'Airship'
+        },
+        unitOptions: {
+            type: Array,
+            required: true
+        }
+    },
+    computed: {
+        unitOptionVal: {
+            get: function () {
+                return this.value;
+            },
+
+            set: function (value) {
+                this.$emit('input', value);
+            }
+        }
+    },
+    components: {
+        ToggleHeaderTextLarge,
+        ToggleInputSelect
+    }
+};
+</script>
+

package/src/components/navs/multitiersidenav/ToggleMultiTierSideNavItem.vue

@@ -0,0 +1,40 @@
+<template>
+    <li
+        :class="['toggle-multi-tier-sidenav-item', icon, { 'active': active, 'toggle-multi-tier-sidenav-icon': icon, 'toggle-multi-tier-sidenav-arrow': arrow}]">
+
+        <!--    @slot For nav-item link (either regular a tag or vue-router link)-->
+        <slot name="item"></slot>
+        <!--    @slot For sub nav component-->
+        <slot name="sub-nav"></slot>
+    </li>
+</template>
+
+<script>
+
+
+export default {
+    name: 'ToggleMultiTierSideNavItem',
+    props: {
+        /**
+         * Set whether an item is active
+         */
+        active: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Icon to use `toggle-graph-icon`, `toggle-orders-icon`, `toggle-card-icon`, `toggle-megaphone-icon`, `toggle-form-icon`
+         */
+        icon: {
+            type: String,
+        },
+        /**
+         * Set whether the arrow displays, e.g only for items with sub navs
+         */
+        arrow: {
+            type: Boolean,
+            default: false
+        },
+    }
+};
+</script>

package/src/components/navs/multitiersidenav/ToggleMultiTierSideSubNav.vue

@@ -0,0 +1,23 @@
+<template>
+    <Transition name="drop-down">
+        <ul class="toggle-multi-tier-sidenav-sub-ul" v-if="expanded">
+            <!--    @slot For nav-item link (either regular a tag or vue-router link)-->
+            <slot></slot>
+        </ul>
+    </Transition>
+</template>
+
+<script>
+export default {
+    name: 'ToggleMultiTierSideSubNav',
+    props: {
+        /**
+         * Should the subnav display expanded?
+         */
+        expanded: {
+            type: Boolean,
+            required: true,
+        },
+    },
+};
+</script>

package/src/index.js

@@ -38,6 +38,12 @@ import ToggleSideNavItem from './components/navs/sidenav/ToggleSideNavItem.vue';
 import ToggleSideNav from './components/navs/sidenav/ToggleSideNav.vue';
 import ToggleSideSubNav from './components/navs/sidenav/ToggleSideSubNav.vue';
 
+import ToggleMultiTierSideNav from './components/navs/multitiersidenav/ToggleMultiTierSideNav.vue';
+import ToggleMultiTierSideNavItem from './components/navs/multitiersidenav/ToggleMultiTierSideNavItem.vue';
+import ToggleMultiTierSideSubNav from './components/navs/multitiersidenav/ToggleMultiTierSideSubNav.vue';
+
+
+
 import ToggleTextClipboardCopy from './components/text/ToggleTextClipboardCopy';
 import ToggleLineBreak from './components/elements/ToggleLineBreak';
 import ToggleSectionCollapse from './components/elements/ToggleSectionCollapse';
@@ -102,7 +108,10 @@ const Components = {
     ToggleFontPicker,
     ToggleInputNumberUnit,
     ToggleInputLabelLeft,
-    ToggleInputMultiSelect
+    ToggleInputMultiSelect,
+    ToggleMultiTierSideNav,
+    ToggleMultiTierSideNavItem,
+    ToggleMultiTierSideSubNav
 }
 
 Object.keys(Components).forEach(name => {

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:100vh;
     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{