@qld-gov-au/qgds-bootstrap5 1.0.13 → 1.0.14

package/src/components/bs5/navbar/navbar.data.json

@@ -96,42 +96,42 @@
                 "navigation_items": [
                     {
                         "title": "Visiting someone in hospital",
-                        "description1": "One of the best motivations for quitting is having a clear reason in mind so you know exactly why you’re doing it in the first place.",
+                        "description": "One of the best motivations for quitting is having a clear reason in mind so you know exactly why you’re doing it in the first place.",
                         "target_url": "index.html"
                     },
                     {
                         "title": "Aboriginal and Torres Strait Islander support",
-                        "description1": "Be encouraged and motivated by listening to stories of others who've quit smoking for life.",
+                        "description": "Be encouraged and motivated by listening to stories of others who've quit smoking for life.",
                         "target_url": "index.html"
                     },
                     {
                         "title": "Your healthcare rights and responsibilities",
-                        "description1": "Vaping products are also known as e-cigarettes, e-cigars, vape pens or personal vapourisers. Vapes are harmful. The safest option is to not vape at all.",
+                        "description": "Vaping products are also known as e-cigarettes, e-cigars, vape pens or personal vapourisers. Vapes are harmful. The safest option is to not vape at all.",
                         "target_url": "index.html"
                     },
                     {
                         "title": "Going to hospital",
-                        "description1": "There are plenty of ways to quit smoking cigarettes and vapes. Find one that suits you best and commit to it.",
+                        "description": "There are plenty of ways to quit smoking cigarettes and vapes. Find one that suits you best and commit to it.",
                         "target_url": "index.html"
                     },
                     {
                         "title": "Interpreter services",
-                        "description1": "Whether you’re thinking about getting pregnant, you're pregnant or have recently given birth, quitting smoking or vaping is the best thing you can do for the health of  you and your baby.",
+                        "description": "Whether you’re thinking about getting pregnant, you're pregnant or have recently given birth, quitting smoking or vaping is the best thing you can do for the health of  you and your baby.",
                         "target_url": "index.html"
                     },
                     {
                         "title": "Health costs, insurance and financial support",
-                        "description1": "Sign up for My Quit Journey to support you to stop smoking.",
+                        "description": "Sign up for My Quit Journey to support you to stop smoking.",
                         "target_url": "index.html"
                     },
                     {
                         "title": "Leaving hospital",
-                        "description1": "Congratulations on taking the first step in your journey and deciding to make one of the best choices of your life.",
+                        "description": "Congratulations on taking the first step in your journey and deciding to make one of the best choices of your life.",
                         "target_url": "index.html"
                     },
                     {
                         "title": "Your health record",
-                        "description1": "Congratulations on taking the first step in your journey and deciding to make one of the best choices of your life.",
+                        "description": "Congratulations on taking the first step in your journey and deciding to make one of the best choices of your life.",
                         "target_url": "index.html"
                     }
                 ]

package/src/components/bs5/navbar/navbar.hbs

@@ -94,7 +94,7 @@
                             {{title}}
                         </a>
 
-                        <button class="nav-link dropdown-toggle second-element" id="menuDropdown" role="button"
+                        <button class="dropdown-toggle second-element" id="menuDropdown" role="button"
                             aria-controls="" data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false"
                             aria-label="Toggle navigation">
                             <svg class="toggle_icon">

package/src/components/bs5/navbar/navbar.scss

@@ -82,8 +82,9 @@
 
 
     &-collapse {
+
         @include media-breakpoint-down(md) {
-            width: 320px;
+            width: 20rem;
         }
 
         @include media-breakpoint-up(md) {
@@ -255,7 +256,7 @@
     &__overlay {
         -webkit-transition: opacity .25s ease-in-out;
         transition: opacity .25s ease-in-out;
-        background-color: var(--#{$prefix}navbar-color-dark-alt-background__shade);
+        background-color: var(--#{$prefix}navbar-overlay);
         cursor: pointer;
         position: fixed;
         top: 0;
@@ -330,7 +331,7 @@
                     color: var(--#{$prefix}navbar-link-color);
                     font-size: 1.5rem;
                     text-decoration: none;
-                    font-weight: 700;
+                    font-weight: 600;
 
                     &:hover,
                     &:focus {
@@ -347,7 +348,7 @@
 
                 .dropdown-menu__view_all {
                     font-size: 1.25rem;
-                    font-weight: 700;
+                    font-weight: 600;
                     text-decoration: none;
                     color: var(--#{$prefix}navbar-link-color);
 
@@ -454,7 +455,12 @@
                 display: block;
                 height: 2rem;
                 width: 1.5rem;
-                color: var(--#{$prefix}navbar-home-icon-color);
+                @include media-breakpoint-up(lg) {
+                    color: var(--#{$prefix}navbar-home-icon-color);
+                }
+                @include media-breakpoint-down(lg) {
+                    color: var(--#{$prefix}navbar-mobile-home-icon-color);
+                }
             }
         }
         .nav-link {
@@ -474,7 +480,7 @@
             &.show,
             &:hover {
                 text-decoration: underline;
-
+                background-color: var(--#{$prefix}navbar-menuitem-hover);
                 @include media-breakpoint-up(lg) {
                     background-color: var(--#{$prefix}navbar-menuitem-hover);
                     border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-menuitem-hover-border);
@@ -492,6 +498,9 @@
                     border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-bg-color);
                     margin-bottom: -0.5rem;
                 }
+                @include media-breakpoint-down(lg) {
+                    background-color: var(--#{$prefix}navbar-bg-color);
+                }
             }
         }
 

package/src/components/bs5/quickexit/_colours.scss

@@ -0,0 +1,28 @@
+.qld-quick-exit {
+  --#{$prefix}quick-exit-bg: var(--#{$prefix}color-default-color-dark-background-default);
+  --#{$prefix}quick-exit-text-colour: var(--#{$prefix}color-default-color-dark-text-default);
+  --#{$prefix}quick-exit-link-text-colour: var(--#{$prefix}color-default-color-dark-link-default);
+  --#{$prefix}quick-exit-button-bg-colour: var(--#{$prefix}color-default-color-dark-action-secondary);
+  --#{$prefix}quick-exit-button-bg-colour-hover: var(--#{$prefix}color-default-color-dark-action-secondary-hover);
+  --#{$prefix}quick-exit-button-text-colour: var(--#{$prefix}color-default-color-dark-link-on-action);
+
+  --#{$prefix}quick-exit-tooltip-bg: var(--#{$prefix}core-default-color-neutral-white);
+  --#{$prefix}quick-exit-tooltip-btn-focus: rgba(255, 255, 255, 0.2);
+  --#{$prefix}quick-exit-tooltip-text: var(--#{$prefix}color-default-color-light-text-default);
+  --#{$prefix}quick-exit-tooltip-box-shadow: #8a8f91;
+
+  .dark &,
+  .dark-alt & {
+    --#{$prefix}quick-exit-bg: var(--#{$prefix}color-default-color-dark-background-alt);
+    --#{$prefix}quick-exit-text-colour: var(--#{$prefix}color-default-color-dark-text-default);
+    --#{$prefix}quick-exit-link-text-colour: var(--#{$prefix}color-default-color-dark-link-default);
+    --#{$prefix}quick-exit-button-bg-colour: var(--#{$prefix}color-default-color-dark-action-secondary);
+    --#{$prefix}quick-exit-button-bg-colour-hover: var(--#{$prefix}color-default-color-dark-action-secondary-hover);
+    --#{$prefix}quick-exit-button-text-colour: var(--#{$prefix}color-default-color-dark-link-on-action);
+
+    --#{$prefix}quick-exit-tooltip-bg: var(--#{$prefix}core-default-color-neutral-white);
+    --#{$prefix}quick-exit-tooltip-btn-focus: rgba(255, 255, 255, 0.2);
+    --#{$prefix}quick-exit-tooltip-text: var(--#{$prefix}color-default-color-light-text-default);
+    --#{$prefix}quick-exit-tooltip-box-shadow: #8a8f91;
+  }
+}

package/src/components/bs5/quickexit/quickexit.data.json

@@ -1,3 +1,10 @@
 {
-	
+    "hasIconInfo": true,
+    "hasTooltip": true,
+	"exitMessage": "Select 'Close<span class='very-small-mobile'> this site</span>'<span class='not-mobile'> or press 'ESC' on your keyboard</span> to go to google.com.au.",
+    "exitMessageLinkText": "View more tips to browse safely online.",
+    "quickExitButtonText": "Close<span class='very-small-mobile'> this site</span>",
+    "qldTooltipPrompt": "What is this?",
+    "browseSafelyOnlineURL": "https://www.qld.gov.au/help/tips-to-browse-safely-online",
+    "qldTooltipContent": "To leave this site quickly, click the 'Close this site' button or press 'ESC' on your keyboard. You will be taken to google.com.au."
 }

package/src/components/bs5/quickexit/quickexit.hbs

@@ -1,30 +1,38 @@
 <!-- QGDS Component: Loading Quick exit -->
 
-<div class="qld-quick-exit dark">
-  <div class="qld-quick-exit-inner container-fluid">
+<div class="qld-quick-exit"><!-- dark -->
+  <div class="qld-quick-exit-inner container-fluid{{#if hasIconInfo}} has-icon-info{{/if}}{{#if hasTooltip}} has-tooltip{{/if}}">
     <div class="qg-quick-exit__tips">
-      <a href="https://www.qld.gov.au/help/tips-to-browse-safely-online" class="qld-quick-exit-tip-link">
+      {{#if hasIconInfo}}
         <span class="qld-icon icon-info"></span>
-        <span class="qld-quick-exit-tip-title">Tips to browse safely online</span>
+      {{/if}}
+      <p class="qld-quick-exit-tip-title">{{{exitMessage}}}</p>
+      <a href="{{browseSafelyOnlineURL}}" class="qld-quick-exit-tip-link">
+        <span>{{exitMessageLinkText}}</span>
       </a>
     </div>
     <div class="qld-quick-exit-actions">
-      <ul class="qld-quick-exit-list">
-        <li class="qld-quick-exit-item qld-tooltip-container">
-          <input type="checkbox" id="qld-quick-exit-input" class="qld-quick-exit-input sr-only">
-          <label for="qld-quick-exit-input" class="qld-quick-exit-label qld-tooltip-parent">
-            <span class="qld-tooltip-prompt">What is this?</span>
-            <div class="qld-tooltip-wrapper">
-              <div class="qld-tooltip">
-                <span class="qld-tooltip-content">To leave this site quickly, click the 'Close this site' button or press 'ESC' on your keyboard. You will be taken to google.com.au.</span>
+      {{#if hasTooltip}}
+        <ul class="qld-quick-exit-list">
+          <li class="qld-quick-exit-item qld-tooltip-container">
+            <input type="checkbox" id="qld-quick-exit-input" class="qld-quick-exit-input sr-only" />
+            <label for="qld-quick-exit-input" class="qld-quick-exit-label qld-tooltip-parent">
+              <span class="qld-tooltip-prompt">{{qldTooltipPrompt}}</span>
+              <div class="qld-tooltip-wrapper">
+                <div class="qld-tooltip">
+                  <span class="qld-tooltip-content">{{qldTooltipContent}}</span>
+                </div>
               </div>
-            </div>
-          </label>
-        </li>
-        <li class="qld-quick-exit-item">
-          <button class="btn btn-secondary qld-quick-exit-button">Close this site</button>
-        </li>
-      </ul>
+            </label>
+          </li>
+          
+          <li class="qld-quick-exit-item">
+            {{/if}}
+              <button class="btn btn-secondary qld-quick-exit-button">{{{quickExitButtonText}}}</button>
+            {{#if hasTooltip}}
+          </li>   
+        </ul>
+      {{/if}}
     </div>
   </div>
-</div>
+</div>

package/src/components/bs5/quickexit/quickexit.scss

@@ -1,178 +1,258 @@
+// ----------------------------------------------------------------------------------------------------------------------
+// Header - palettes and second hand variables:
+@import "./colours";
+
 /*
  * Mobile layout
  */
 .qld-quick-exit {
-    background: $qld-dark-blue;
-    color: $qld-white;
-    height: 72px;
-    left: 0;
-    bottom: 0;
-    padding: 1rem;
-    position: fixed;
-    width: 100%;
-    z-index: 200;
-
-    &-inner {
-        display: -ms-flexbox;
-        display: flex;
-        align-items: center;
-        height: 100%;
-
-        .qg-quick-exit__tips {
-            display: none;
-        }
-
-        .qld-quick-exit-input:checked+.qld-tooltip-parent .qld-tooltip-wrapper {
-            display: block
-        }
-
-        .qld-quick-exit-input:checked+.qld-quick-exit-label {
-            color: white;
-            font-weight: 500
-        }
-
-        .qld-tooltip {
-            width: 190px;
-        }
-
-        .qld-tooltip-parent {
-            position: relative
-        }
-
-        .qld-tooltip-wrapper {
-            background-color: $qld-white;
-            bottom: 50px;
-            box-shadow: 0 0 8px 0 #8a8f91;
-            color: #000;
-            display: none;
-            font-weight: 500;
-            padding: 25px;
-            position: absolute
-        }
-
-        .qld-tooltip-wrapper:after {
-            border-bottom: 14px solid $qld-white;
-            border-left: 14px solid $qld-white;
-            border-right: 14px solid transparent;
-            border-top: 14px solid transparent;
-            bottom: -14px;
-            content: " ";
-            position: absolute;
-            left: 25px;
-            transform: rotate(-45deg)
-        }
-
-        .qld-quick-exit-item.qld-tooltip-container {
-            text-decoration: underline;
+  --#{$prefix}quick-exit-spacing: 1rem;
+  --#{$prefix}quick-exit-gaps: 25px;
+  --#{$prefix}quick-exit-text-outline: 2px;
+  --#{$prefix}quick-exit-text-outline-offset: 2px;
 
-            &:focus,
-            &:active,
-            &:focus-within {
-                outline-offset: 2px;
-                box-shadow: none;
-                outline: 2px solid var(--qld-focus-color);
-                border-radius: 0px;
-            }
-        }
+  //   --#{$prefix}quick-tooltip-text-outline-thickness: 0.5px;
+  //   --#{$prefix}quick-tooltip-text-outline-offset: 5px;
 
-        .qld-quick-exit-label,
-        .qld-tooltip-prompt {
-            font-weight: 500;
-            text-decoration-line: underline;
-            text-decoration-style: solid;
-            text-underline-offset: 5px;
-            text-decoration-thickness: 0.5px;
+  --#{$prefix}tooltip-width: 190px;
+  --#{$prefix}tooltip-arrow: 8px;
+  --#{$prefix}tooltip-desktop-top-offset: 40px;
+  --#{$prefix}icon-info-spacing: 40px;
+  --#{$prefix}quick-exit-actions-right-padding: 9px;
 
-            &:hover {
-                text-decoration-thickness: var(--qld-link-underline-thickness-hover);
-            }
-        }
+  background: var(--#{$prefix}quick-exit-bg);
+  color: var(--#{$prefix}quick-exit-text-colour);
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  padding-block: 16px;
+  padding-inline: 24px;
+  position: fixed;
+  width: 100%;
+  z-index: 200;
 
+  &-inner {
+    display: -ms-flexbox;
+    display: flex;
+    align-items: center;
+    height: 100%;
 
-        .qld-quick-exit-list {
-            margin: 0;
-            padding: 0;
-            list-style: none;
-            -ms-flex-align: center;
-            align-items: center;
-            display: -ms-flexbox;
-            display: flex;
-            height: 100%;
-            -ms-flex-pack: distribute;
-            justify-content: space-around
-        }
-
-        .qld-quick-exit-actions {
-            -ms-flex-positive: 1;
-            flex-grow: 1
-        }
+    .qld-quick-exit-input:checked + .qld-tooltip-parent .qld-tooltip-wrapper {
+      display: block;
+    }
+    .qld-quick-exit-input:checked + .qld-quick-exit-label {
+      color: var(--#{$prefix}quick-exit-text-colour);
+      font-weight: 500;
+    }
+    .qld-tooltip {
+      width: var(--#{$prefix}tooltip-width);
+    }
+    .qld-tooltip-parent {
+      position: relative;
+    }
+    .qld-tooltip-wrapper {
+      background-color: var(--#{$prefix}quick-exit-tooltip-bg);
+      inset-block-end: calc(var(--#{$prefix}tooltip-desktop-top-offset) + 9px);
+      box-shadow: 0 0 8px 0 var(--#{$prefix}quick-exit-tooltip-box-shadow);
+      color: var(--#{$prefix}quick-exit-tooltip-text);
+      display: none;
+      font-weight: 500;
+      padding: var(--#{$prefix}quick-exit-gaps);
+      position: absolute;
+    }
+    .qld-tooltip-wrapper:after {
+      border-block-end: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+      border-inline-start: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+      border-inline-end: var(--#{$prefix}tooltip-arrow) solid transparent;
+      border-block-start: var(--#{$prefix}tooltip-arrow) solid transparent;
+      inset-block-end: calc(var(--#{$prefix}tooltip-arrow) * -1);
+      content: " ";
+      position: absolute;
+      inset-inline-start: var(--#{$prefix}quick-exit-gaps);
+      transform: rotate(-45deg);
+    }
+    .qld-quick-exit-item.qld-tooltip-container {
+      text-decoration: underline;
+      margin-inline-end: var(--#{$prefix}quick-exit-gaps);
+      &:focus,
+      &:active,
+      &:focus-within {
+        outline-offset: var(--#{$prefix}quick-exit-text-outline-offset);
+        box-shadow: none;
+        outline: var(--#{$prefix}quick-exit-text-outline) solid var(--#{$prefix}quick-exit-tooltip-btn-focus);
+        border-radius: 0;
+      }
+    }
+    .qld-quick-exit-label,
+    .qld-tooltip-prompt {
+      font-weight: 500;
+      text-decoration-line: underline;
+      text-decoration-style: solid;
+      text-underline-offset: calc(var(--#{$prefix}quick-exit-text-outline-offset) * 2);
+      &:hover {
+        text-decoration-thickness: var(--qld-link-underline-thickness-hover); //
+      }
+    }
+    .qld-tooltip-prompt {
+      text-wrap: nowrap;
+    }
+    .qld-quick-exit-list {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      -ms-flex-align: center;
+      align-items: center;
+      display: -ms-flexbox;
+      display: flex;
+      height: 100%;
+      -ms-flex-pack: distribute;
+      justify-content: space-around;
+    }
+    .qld-quick-exit-actions {
+      -ms-flex-positive: 1;
+      flex-grow: 0;
+    }
+    .qld-quick-exit-tip-title {
+      margin-block-end: 0;
+    }
+    .qld-quick-exit-button {
+      border-color: var(--#{$prefix}quick-exit-button-bg-colour);
+      background-color: var(--#{$prefix}quick-exit-button-bg-colour);
+      color: var(--#{$prefix}quick-exit-button-text-colour);
+      &:hover {
+        border-color: var(--#{$prefix}quick-exit-button-bg-colour-hover);
+        background-color: var(--#{$prefix}quick-exit-button-bg-colour-hover);
+      }
+    }
+    .qld-quick-exit-tip-link {
+      color: var(--#{$prefix}quick-exit-link-text-colour);
     }
+    .qg-quick-exit__tips {
+      flex-grow: 1;
+    }
+    &.has-icon-info .qg-quick-exit__tips {
+      display: block;
+      padding-inline-start: var(--#{$prefix}icon-info-spacing);
+    }
+  }
 }
 
-
 /*
  * Desktop layout
  */
 @media screen and (min-width: 992px) {
-    .qld-quick-exit {
-        -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
-        position: relative;
-        position: -webkit-sticky;
-        position: sticky;
-        top: 0;
-        z-index: 999;
-
-        &-inner {
-            justify-content: space-between;
-
-            .qg-quick-exit__tips {
-                display: block;
-                padding-left: 40px
-            }
-
-            .qld-quick-exit-tip-link {
-                -ms-flex-align: center;
-                align-items: center;
-                color: $qld-white;
-                display: -ms-flexbox;
-                display: flex;
-            }
-
-            .qld-quick-exit-actions {
-                padding-right: 9px;
-                -ms-flex-positive: 0;
-                flex-grow: 0
-            }
+  .qld-quick-exit {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    position: relative;
+    position: -webkit-sticky;
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 999;
+    padding-block: 20px; //
+    padding-inline: 40px; //
 
-            .qld-quick-exit-item {
-                margin-left: 25px;
-            }
-
-            .qld-tooltip-wrapper {
-                bottom: auto;
-                top: 40px;
-                padding: 1rem;
-            }
+    &-inner {
+      justify-content: space-between;
 
-            .qld-tooltip-wrapper:after {
-                border-bottom: 8px solid $qld-white;
-                border-left: 8px solid $qld-white;
-                border-right: 8px solid transparent;
-                border-top: 8px solid transparent;
-                bottom: auto;
-                left: 25px;
-                top: -7px;
-                transform: rotate(135deg)
-            }
-        }
+      .qld-quick-exit-tip-link {
+        -ms-flex-align: center;
+        align-items: center;
+        color: $qld-white; //
+        display: -ms-flexbox;
+        display: flex;
+      }
+      .qld-quick-exit-actions {
+        padding-inline-end: var(--#{$prefix}quick-exit-actions-right-padding);
+        -ms-flex-positive: 0;
+        flex-grow: 0;
+      }
+      .qld-tooltip-wrapper {
+        inset-block-end: auto;
+        inset-block-start: var(--#{$prefix}tooltip-desktop-top-offset);
+        padding: var(--#{$prefix}quick-exit-spacing);
+      }
+      .qld-tooltip-wrapper:after {
+        border-block-end: var(--#{$prefix}tooltip-arrow) solid transparent;
+        border-inline-start: var(--#{$prefix}tooltip-arrow) solid transparent;
+        border-inline-end: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+        border-block-start: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+        inset-block-end: auto;
+        inset-inline-start: 25px; //
+        inset-block-start: calc(var(--#{$prefix}tooltip-arrow) * -1);
+      }
+      .not-mobile,
+      .qld-quick-exit-tip-link {
+        display: inline;
+      }
     }
+  }
 }
-
 .icon-info {
-    background-repeat: no-repeat;
-    margin-top: 4px;
-    margin-right: 5px;
-    background-image: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 0.25C4.00781 0.25 0 4.29297 0 9.25C0 14.2422 4.00781 18.25 9 18.25C13.957 18.25 18 14.2422 18 9.25C18 4.29297 13.957 0.25 9 0.25ZM9 17.125C4.64062 17.125 1.125 13.6094 1.125 9.25C1.125 4.92578 4.64062 1.375 9 1.375C13.3242 1.375 16.875 4.92578 16.875 9.25C16.875 13.6094 13.3242 17.125 9 17.125ZM9 6.71875C9.45703 6.71875 9.84375 6.36719 9.84375 5.875C9.84375 5.41797 9.45703 5.03125 9 5.03125C8.50781 5.03125 8.15625 5.41797 8.15625 5.875C8.15625 6.36719 8.50781 6.71875 9 6.71875ZM10.6875 12.625H9.5625V8.6875C9.5625 8.40625 9.28125 8.125 9 8.125H7.875C7.55859 8.125 7.3125 8.40625 7.3125 8.6875C7.3125 9.00391 7.55859 9.25 7.875 9.25H8.4375V12.625H7.3125C6.99609 12.625 6.75 12.9062 6.75 13.1875C6.75 13.5039 6.99609 13.75 7.3125 13.75H10.6875C10.9688 13.75 11.25 13.5039 11.25 13.1875C11.25 12.9062 10.9688 12.625 10.6875 12.625Z' fill='white'/></svg>");
+  position: absolute;
+  inset-inline-start: calc(var(--#{$prefix}quick-exit-spacing) * 2.5);
+  background-repeat: no-repeat;
+  margin-block-start: 4px; //
+  background-image: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 0.25C4.00781 0.25 0 4.29297 0 9.25C0 14.2422 4.00781 18.25 9 18.25C13.957 18.25 18 14.2422 18 9.25C18 4.29297 13.957 0.25 9 0.25ZM9 17.125C4.64062 17.125 1.125 13.6094 1.125 9.25C1.125 4.92578 4.64062 1.375 9 1.375C13.3242 1.375 16.875 4.92578 16.875 9.25C16.875 13.6094 13.3242 17.125 9 17.125ZM9 6.71875C9.45703 6.71875 9.84375 6.36719 9.84375 5.875C9.84375 5.41797 9.45703 5.03125 9 5.03125C8.50781 5.03125 8.15625 5.41797 8.15625 5.875C8.15625 6.36719 8.50781 6.71875 9 6.71875ZM10.6875 12.625H9.5625V8.6875C9.5625 8.40625 9.28125 8.125 9 8.125H7.875C7.55859 8.125 7.3125 8.40625 7.3125 8.6875C7.3125 9.00391 7.55859 9.25 7.875 9.25H8.4375V12.625H7.3125C6.99609 12.625 6.75 12.9062 6.75 13.1875C6.75 13.5039 6.99609 13.75 7.3125 13.75H10.6875C10.9688 13.75 11.25 13.5039 11.25 13.1875C11.25 12.9062 10.9688 12.625 10.6875 12.625Z' fill='white'/></svg>");
+}
+.qld-quick-exit-inner {
+  padding: 0;
+}
+.qld-quick-exit-inner.has-tooltip {
+  .qg-quick-exit__tips {
+    padding-inline-start: 0;
+  }
+  @media screen and (max-width: 925px) {
+    .not-mobile {
+      display: none;
+    }
+  }
+  @media screen and (max-width: 520px) {
+    .very-small-mobile {
+      display: none;
+    }
+  }
+}
+.qld-quick-exit-inner.has-icon-info {
+  .qg-quick-exit__tips {
+    padding-inline-start: var(--#{$prefix}icon-info-spacing);
+  }
+}
+.qld-quick-exit-inner.has-icon-info.has-tooltip {
+  @media screen and (max-width: 1020px) {
+    .icon-info {
+      display: none;
+    }
+    .qg-quick-exit__tips {
+      padding-inline-start: 0;
+    }
+  }
+  @media screen and (max-width: 925px) {
+    .not-mobile {
+      display: none;
+    }
+  }
+  @media screen and (max-width: 520px) {
+    .very-small-mobile {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 850px) {
+  .not-mobile,
+  .qld-quick-exit-tip-link {
+    display: none;
+  }
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+/// This is only for Responsive Design and keeping important info available to view
+@media screen and (max-width: 365px) {
+  .qld-quick-exit-button {
+    padding-inline: 10px; //
+  }
+  .very-small-mobile {
+    display: none;
+  }
 }