npm - @qld-gov-au/qgds-bootstrap5 - Versions diffs - 2.0.2 → 2.0.3 - Mend

@qld-gov-au/qgds-bootstrap5 2.0.2 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/src/components/bs5/navbar/navbar.stories.js CHANGED Viewed

@@ -312,10 +312,15 @@ export default {
 };
 export const Default = {
+  parameters: {
+    docs: {
+      story: { height: "80vh" },
+    },
+  },
   args: {
     "Nav alternativeColor": false,
     "Nav verticalOrientation": false,
-    "Nav navbarBrandName": "",
+    "Nav navbarBrandName": "Menu",
     "Add Navigation Item": 0,
     // Initialize base items with iconName
     ...(() => {
@@ -500,8 +505,32 @@ export const Default = {
           align-items: center;
         }
         @media (width <= 992px) {
           #burgerBtn {
+            --nav-header-icon-color: #ffe500;
             display: flex !important;
+            flex-direction: column;
+            gap:0;
+            .qld-icon {
+              background-color: var(--nav-header-icon-color);
+            }
+          }
+          .navbar.show #overlay {
+            position: absolute;
+          }
+          #story--3-components-navbar--default--primary-inner:has(.show) {
+            #storybook-only-header {
+              display:none;
+            }
+          }
+          #storybook-root:has(.show) {
+            #storybook-only-header {
+              display:none;
+            }
+          }
+          .navbar #burgerCloseBtn::before {
+            --nav-header-icon-color: var(--#{$prefix}brand-accent);
+            background-color: var(--nav-header-icon-color, #008635);
           }
         }
         @media (width >= 992px) {
@@ -519,7 +548,7 @@ export const Default = {
         <div id="storybook-only-header">
           <button id="burgerBtn" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-expanded="false" aria-controls="collapseExample">
             <span class="qld-icon qld-icon-xl qld-icon-menu"></span>
-            Menu
+            menu
           </button>
         </div>
       `;

package/src/components/bs5/pageLayout/pageLayout.stories.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { ContentPageWithSideNavigation } from "./ContentPageWithSideNavigation.j
 import { ContentPageWithForm } from "./ContentPageWithForm.js";
 //Data
 import masterbrand_variant from "../header/header.variant.masterBrand.data.json";
-import menu_state from "../navbar/navbar.variant.menuState.data.json";
+import menu_state from "../navbar/navbar.data.json";
 import globalAlertData from "../globalAlert/globalAlert.data.json";
 import tableData from "../table/table.data.json";
 import footerData from "../footer/footer.data.json";
@@ -70,6 +70,8 @@ const defaultData = {
   },
   contentFooter: contentFooterData,
   sidenav: sideNavData,
+  // Mapping some @root header fields to this pageLayout root object, so template partials can resolve values
+  // assets: masterbrand_variant.assets,
 };
 export default {

package/src/components/bs5/pageLayout/templates/contentPageWithForm.hbs CHANGED Viewed

@@ -29,7 +29,7 @@
             <div class="row">
                 {{#if sidenav}}
                 <!-- Side navigation Col -->
-                <div class="col-12 col-lg-3 mt-5 mt-lg-0">
+                <div class="col-12 col-lg-3 mt-5 mt-lg-0 mb-32 mb-lg-0">
                     {{> sidenav sidenav}}
                 </div>
                 {{/if}}

package/src/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs CHANGED Viewed

@@ -2,122 +2,154 @@
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{title}}</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}}</title>
 </head>
 <body>
-    <!-- Global ALert -->
-    {{> globalAlert globalAlert}}
-    <!-- Header -->
-    {{> header header}}
-    <!-- Navbar -->
-    {{> navbar navbar}}
-    {{#if banner}}
-    {{> banner banner}}
-    {{/if}}
-    <main>
-        <div class="container mt-40 mt-lg-64">
-            {{#if breadcrumbs}}
-            <div class="row">
-                <div class="col-12">
-                    <!-- breadcrumbs -->
-                    {{> breadcrumbs breadcrumbs}}
-                </div>
+  <!-- Global ALert -->
+  {{> globalAlert globalAlert}}
+  <!-- Header -->
+  {{> header header }}
+  <!-- Navbar -->
+  {{> navbar navbar}}
+  {{#if banner}}
+  {{> banner banner}}
+  {{/if}}
+  <main>
+    <div class="container mt-40 mt-lg-64">
+      {{#if breadcrumbs}}
+      <div class="row">
+        <div class="col-12">
+          <!-- breadcrumbs -->
+          {{> breadcrumbs breadcrumbs}}
+        </div>
+      </div>
+      {{/if}}
+      <!-- Main Grid Layout: Side navigation and content -->
+      <div class="row">
+        <!-- Side navigation column -->
+        <div class="col-12 col-lg-3 mt-0 pe-lg-0">
+          {{> sidenav sidenav}}
+        </div>
+        <!-- End Side navigation column -->
+        <!-- Content Column -->
+        <div class="col-lg-8 mt-40 mt-lg-0 ms-lg-32 ps-lg-32">
+          {{#if inpagenav}}
+          <!-- Inpagenav Component (.mb-64 provides vertical spacing) -->
+          {{> inpagenav inpagenav}}
+          {{/if}}
+          <!-- Content Section with top vertical spacer (2rem mobile, 4rem LG and above) -->
+          <div class="mt-32 mt-lg-64">
+            <h2 id="section-heading">Section heading (H2)</h2>
+            <p>
+              Lorem ipsum dolor sit amet consectetur. Sed facilisis purus eu convallis ut. Morbi condimentum volutpat
+              feugiat pellentesque. Auctor amet auctor dolor metus eget diam. Facilisis vitae venenatis vestibulum
+              libero ut. Luctus diam pellentesque ipsum accumsan amet commodo.
+            </p>
+            <p>
+              Convallis et ullamcorper ac nisi ornare sed facilisis sem. Scelerisque malesuada vivamus tellus mi vitae
+              amet ornare donec malesuada. Nascetur senectus aenean fames id turpis.
+            </p>
+          </div>
+          <!-- Content Section with top vertical spacer (2rem mobile, 4rem LG and above) -->
+          <div class="mt-32 mt-lg-64">
+            <h2 id="content-heading">Content heading (H2)</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            {{#if calloutdata}}
+            <!-- Callout Component -->
+            {{> callout calloutdata}}
+            {{/if}}
+          </div>
+          <!-- Content Section with top vertical spacer (2rem mobile, 2.5rem LG and above) -->
+          <div class="mt-32 mt-lg-40">
+            <h3 id="inspection">Pre-registration inspection (H3)</h3>
+            <p>Information about pre-registration inspection requirements.</p>
+            <h4 id="fees-and-charges">Fees and charges (H4)</h4>
+            <p>Details about fees and charges for vehicle registration.</p>
+            {{#if accordionItems}}
+            <!-- QGDS Accordion Component with 1.5rem vertical spacer -->
+            <div class="mt-24">
+            {{> accordion accordionItems}}
             </div>
             {{/if}}
+          </div>
-            <!-- Main Grid Layout: Side navigation and content -->
-            <div class="row">
-                {{#if sidenav}}
-                <!-- Side navigation Col -->
-                <div class="col-12 col-lg-3 mt-5 mt-lg-0">
-                    {{> sidenav sidenav}}
-                </div>
-                <!-- Content Col -->
-                <div class="col-lg-8 col-md-7 ps-1 ps-md-32">
-                    {{else}}
-                    <div class="col-12">
-                        {{/if}}
-                        <!-- Main Content Sections -->
-                        <div class="content-section mb-5 px-1 px-md-32">
-                            {{#if inpagenav}}
-                            <!-- inpagenav Section -->
-                            {{> inpagenav inpagenav}}
-                            {{/if}}
-                            <h1 id="section-heading">Section heading (H1)</h1>
-                            <p>
-                                Lorem ipsum dolor sit amet consectetur. Sed facilisis purus eu convallis ut. Morbi condimentum volutpat feugiat pellentesque. Auctor amet auctor dolor metus eget diam. Facilisis vitae venenatis vestibulum libero ut. Luctus diam pellentesque ipsum accumsan amet commodo.
-                            </p>
-                            <p>
-                                Convallis et ullamcorper ac nisi ornare sed facilisis sem. Scelerisque malesuada vivamus tellus mi vitae amet ornare donec malesuada. Nascetur senectus aenean fames id turpis.
-                            </p>
-                            <h2 id="content-heading">Content heading (H2)</h2>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
-                                incididunt ut labore et dolore magna aliqua.</p>
-                            {{#if calloutdata}}
-                            <!-- callout Section -->
-                            {{> callout calloutdata}}
-                            {{/if}}
-                            <h3 id="inspection">Pre-registration inspection (H3)</h3>
-                            <p>Information about pre-registration inspection requirements.</p>
-                            <h4 id="fees-and-charges">Fees and charges (H4)</h4>
-                            <p>Details about fees and charges for vehicle registration.</p>
-                        </div>
-                        {{#if accordionItems}}
-                        <!-- accordion Section -->
-                        <div class="my-5 px-1 px-md-32">
-                            {{> accordion accordionItems}}
-                        </div>
-                        {{/if}}
-                        {{#if video}}
-                        <!-- video Section -->
-                        <div class="my-5 px-1 px-md-32">
-                            {{> video video}}
-                        </div>
-                        {{/if}}
-                        <div class="my-5 p-1 p-md-32 bg-light">
-                            <h2 id="inspection">Section heading (H2)</h2>
-                            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies
-                                est.
-                                Tincidunt ultrices commodo vestibulum non netus. </p>
-                            <p>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
-                                condimentum adipiscing augue quisque eu.</p>
-                            {{> callToAction callToAction}}
-                        </div>
-                        {{#if table}}
-                        <!-- table Section -->
-                        <div class="my-5 px-1 px-md-32">
-                            {{> table table}}
-                        </div>
-                        {{/if}}
-                    </div>
-                </div>
-                <!-- Content Footer -->
-                {{> contentFooter contentFooter}}
+          <!-- Top vertical spacer: 2rem default (mobile), 4rem LG and above -->
+          <div class="mt-32 mt-lg-64">
+            {{#if video}}
+            <!-- QGDS Video Component -->
+            {{> video video}}
+            {{/if}}
+          </div>
+          <!-- Emphasis Container, with top vertical spacer: 2rem default (mobile), 4rem LG and above -->
+          <div class="mt-40 mt-lg-64 bg-light content-emphasis">
+            <h2 id="inspection">Section heading (H2) with emphasis</h2>
+            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. </p>
+            <!-- QGDS Call To Action button -->
+            {{> callToAction callToAction}}
+          </div>
+          <!-- Top vertical spacer: 2rem default (mobile), 4rem LG and above -->
+          <div class="mt-32 mt-lg-64">
+            <h2 id="inspection">Section heading (H2)</h2>
+            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. </p>
+            {{#if table}}
+            <!-- Table Component (.my-40 wrapper provides vertical spacing) -->
+            <div class="mt-24">
+            {{> table table}}
             </div>
+            {{/if}}
+          </div>
         </div>
-    </main>
-    <!-- Footer -->
-    {{> footer footer}}
+        <!-- End Main Content Section -->
+      </div>
+      <!-- End Content Column -->
+      <!-- QGDS Content Footer Component -->
+      <div class="mt-64">
+      {{> contentFooter contentFooter}}
+      </div>
+  </main>
+  <!-- Footer -->
+  {{> footer footer}}
 </body>
 </html>

package/src/components/bs5/pageLayout/templates/homePage.hbs CHANGED Viewed

@@ -83,7 +83,7 @@
             {{#if promotionalPanel}}
             <section class="pt-5 bg-light">
-                <div class="container">
+                <div class="container is-extended">
                     {{> promotionalPanel promotionalPanel}}
                 </div>
             </section>

package/src/components/bs5/pagination/pagination.data.json CHANGED Viewed

@@ -1,21 +1,21 @@
 {
-    "arialabel" : "Pagination for search results",
-	"previous": {
-        "href": "#",
-        "linktext": "Back",
-        "arialabel": "Previous page"
-    },
-    "next": {
-        "href": "#",
-        "linktext": "Next",
-        "arialabel": "Next page"
-    },
-	"pages": [
-        { "href": "#", "linktext": "1", "customClasses": "" },
-        { "href": "#", "linktext": "2", "customClasses": "active" },
-        { "href": "#", "linktext": "", "customClasses": "more", "more": true },
-        { "href": "#", "linktext": "6", "customClasses": "" },
-        { "href": "#", "linktext": "7", "customClasses": "" }
-    ]
+  "arialabel": "Pagination for search results",
+  "previous": {
+    "href": "#",
+    "linktext": "Back",
+    "arialabel": "Previous page"
+  },
+  "next": {
+    "href": "#",
+    "linktext": "Next",
+    "arialabel": "Next page"
+  },
+  "pages": [
+    { "href": "#", "linktext": "1", "customClasses": "" },
+    { "href": "#", "linktext": "2", "customClasses": "active" },
+    { "href": "#", "linktext": "3", "customClasses": "" },
+    { "href": "#", "linktext": "", "customClasses": "more", "more": true },
+    { "href": "#", "linktext": "7", "customClasses": "" }
+  ]
 }

package/src/components/bs5/pagination/pagination.scss CHANGED Viewed

@@ -16,24 +16,11 @@ $pagination-icon-more-hover-color: $secondary;
 $pagination-icon-more-dark-color: $qld-white;
 $pagination-icon-more-dark-hover-color: $qld-golden-yellow;
-//SVG ICONS - Default, light and light-alt
-$pagination-icon-prevnext: url('data:image/svg+xml,<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5 8.50066C21.5 8.89906 21.125 9.20892 20.7031 9.20892L3.03125 9.20892L9.59375 15.8489C9.875 16.1145 9.875 16.5572 9.54688 16.8228C9.40625 16.9556 9.21875 16.9998 9.03125 16.9998C8.79688 16.9998 8.60938 16.9556 8.46875 16.7785L0.6875 8.98759C0.40625 8.72199 0.40625 8.32359 0.6875 8.05799L8.46875 0.267061C8.75 -0.0428051 9.21875 -0.0428051 9.54688 0.222795C9.875 0.488394 9.875 0.931061 9.59375 1.19666L3.03125 7.79239L20.7031 7.79239C21.125 7.79239 21.5 8.14652 21.5 8.50066Z" fill="#{$pagination-icon-prevnext-color}"/></svg>');
-$pagination-icon-prevnext-hover: url('data:image/svg+xml,<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5 8.50066C21.5 8.89906 21.125 9.20892 20.7031 9.20892L3.03125 9.20892L9.59375 15.8489C9.875 16.1145 9.875 16.5572 9.54688 16.8228C9.40625 16.9556 9.21875 16.9998 9.03125 16.9998C8.79688 16.9998 8.60938 16.9556 8.46875 16.7785L0.6875 8.98759C0.40625 8.72199 0.40625 8.32359 0.6875 8.05799L8.46875 0.267061C8.75 -0.0428051 9.21875 -0.0428051 9.54688 0.222795C9.875 0.488394 9.875 0.931061 9.59375 1.19666L3.03125 7.79239L20.7031 7.79239C21.125 7.79239 21.5 8.14652 21.5 8.50066Z" fill="#{$pagination-icon-prevnext-hover-color}"/></svg>');
-$pagination-icon-more: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="16" r="2" fill="#{$pagination-icon-more-color}"/><circle cx="16" cy="16" r="2" fill="#{$pagination-icon-more-color}"/><circle cx="24" cy="16" r="2" fill="#{$pagination-icon-more-color}"/></svg>');
-///////////////////////EDIT
-$pagination-icon-more-hover: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="16" r="2" fill="#{$pagination-icon-more-hover-color}"/><circle cx="16" cy="16" r="2" fill="#{$pagination-icon-more-hover-color}"/><circle cx="24" cy="16" r="2" fill="#{$pagination-icon-more-hover-color}"/></svg>');
-$pagination-icon-more-dark-hover: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="16" r="2" fill="#{$pagination-icon-more-dark-hover-color}"/><circle cx="16" cy="16" r="2" fill="#{$pagination-icon-more-dark-hover-color}"/><circle cx="24" cy="16" r="2" fill="#{$pagination-icon-more-dark-hover-color}"/></svg>');
-//SVG ICONS - Dark and dark-alt
-$pagination-icon-prevnext-dark: url('data:image/svg+xml,<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5 8.50066C21.5 8.89906 21.125 9.20892 20.7031 9.20892L3.03125 9.20892L9.59375 15.8489C9.875 16.1145 9.875 16.5572 9.54688 16.8228C9.40625 16.9556 9.21875 16.9998 9.03125 16.9998C8.79688 16.9998 8.60938 16.9556 8.46875 16.7785L0.6875 8.98759C0.40625 8.72199 0.40625 8.32359 0.6875 8.05799L8.46875 0.267061C8.75 -0.0428051 9.21875 -0.0428051 9.54688 0.222795C9.875 0.488394 9.875 0.931061 9.59375 1.19666L3.03125 7.79239L20.7031 7.79239C21.125 7.79239 21.5 8.14652 21.5 8.50066Z" fill="#{$pagination-icon-prevnext-dark-color}"/></svg>');
-$pagination-icon-prevnext-dark-hover: url('data:image/svg+xml,<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5 8.50066C21.5 8.89906 21.125 9.20892 20.7031 9.20892L3.03125 9.20892L9.59375 15.8489C9.875 16.1145 9.875 16.5572 9.54688 16.8228C9.40625 16.9556 9.21875 16.9998 9.03125 16.9998C8.79688 16.9998 8.60938 16.9556 8.46875 16.7785L0.6875 8.98759C0.40625 8.72199 0.40625 8.32359 0.6875 8.05799L8.46875 0.267061C8.75 -0.0428051 9.21875 -0.0428051 9.54688 0.222795C9.875 0.488394 9.875 0.931061 9.59375 1.19666L3.03125 7.79239L20.7031 7.79239C21.125 7.79239 21.5 8.14652 21.5 8.50066Z" fill="#{$pagination-icon-prevnext-dark-hover-color}"/></svg>');
-$pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="16" r="2" fill="#{$pagination-icon-more-dark-color}"/><circle cx="16" cy="16" r="2" fill="#{$pagination-icon-more-dark-color}"/><circle cx="24" cy="16" r="2" fill="#{$pagination-icon-more-dark-color}"/></svg>');
 .pagination {
+    --action-icon-color: var(--#{$prefix}light-action-secondary);
+    --action-icon-color-hover: var(--#{$prefix}light-action-secondary-hover);
+    --action-icon-more-color: var(--#{$prefix}light-text-text);
+    --action-icon-more-color-hover: var(--#{$prefix}light-action-secondary);
     //Padding
     --#{$prefix}pagination-padding-x: 1rem;
@@ -78,13 +65,6 @@ $pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32"
     --#{$prefix}pagination-disabled-bg: var(--#{$prefix}secondary-bg);
     --#{$prefix}pagination-disabled-border-color: var(--#{$prefix}border-color);
-    //SASS icons assinged to CSS properties
-    --#{$prefix}pagination-icon-prevnext: #{escape-svg($pagination-icon-prevnext)};
-    --#{$prefix}pagination-icon-prevnext-hover: #{escape-svg($pagination-icon-prevnext-hover)};
-    --#{$prefix}pagination-icon-more: #{escape-svg($pagination-icon-more)};
-    --#{$prefix}pagination-icon-more-hover: #{escape-svg($pagination-icon-more-hover)};
-    --#{$prefix}pagination-icon-more-dark-hover: #{escape-svg($pagination-icon-more-dark-hover)};
 }
 // When the parent container has a darker background (.dark), or the parent container uses attribute data-bs-theme="dark"
@@ -126,9 +106,10 @@ $pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32"
     --#{$prefix}pagination-active-focus-bg: var(--#{$prefix}dark-action-primary-hover);
     //SASS icons assinged to CSS properties
-    --#{$prefix}pagination-icon-prevnext: #{escape-svg($pagination-icon-prevnext-dark)};
-    --#{$prefix}pagination-icon-prevnext-hover: #{escape-svg($pagination-icon-prevnext-dark-hover)};
-    --#{$prefix}pagination-icon-more: #{escape-svg($pagination-icon-more-dark)};
+    --action-icon-color: var(--#{$prefix}dark-action-secondary);
+    --action-icon-color-hover: var(--#{$prefix}dark-action-secondary-hover);
+    --action-icon-more-color: var(--#{$prefix}dark-text-text);
+    --action-icon-more-color-hover: var(--#{$prefix}dark-action-secondary);
 }
@@ -154,7 +135,7 @@ $pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32"
     .page-item {
         .page-link {
-            border-radius: 3px;
+            border-radius: 4px;
             width: 2rem;
             height: 2rem;
             padding: 0;
@@ -194,40 +175,41 @@ $pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32"
         //Shared by both .prev and .next
         &.previous .page-link,
         &.next .page-link {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
             //.prev and .next arrows
             &:before {
                 content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 2rem;
-                height: 2rem;
-                background: var(--#{$prefix}pagination-icon-prevnext) center center;
-                background-repeat: no-repeat;
+                width: 1.5rem;
+                height: 1.5rem;
+                mask-image: var(--qgds-icon-arrow-left);
+                background-color: var(--action-icon-color);
+                mask-repeat: no-repeat;
+                mask-position: 0;
             }
             &:hover:before {
-                background: var(--#{$prefix}pagination-icon-prevnext-hover) center center;
-                background-repeat: no-repeat;
+                background-color: var(--action-icon-color-hover);
             }
             &:hover, &:focus {
             //Previous and Next "link text"
-            span {
-                text-decoration: underline;
-                text-underline-offset: 2px;
-            }
+                span {
+                    text-decoration: underline;
+                    text-underline-offset: 2px;
+                }
             }
         }
-        &.next .page-link:before {
-            //Replica of previous arrow (defined above), but rotated 180 degrees
-            transform: rotate(180deg);
-            right: 0;
-            left: unset;
+        &.next .page-link {
+            flex-direction: row-reverse;
+            &:before {
+                transform: rotate(180deg);
+            }
         }
         //Non-numeric links in pagination
@@ -276,29 +258,21 @@ $pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32"
         //More dots
         &.more span {
             border: none;
-            position: relative;
+            // position: relative;
             height: 2rem;
             width: 2rem;
-            display: inline-block;
+            display: inline-flex;
             &:hover:before {
-                background: var(--#{$prefix}pagination-icon-more-hover);
+                background-color: var(--action-icon-more-color-hover);
             }
             &:before {
                 content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: var(--#{$prefix}pagination-icon-more);
+                width: 2rem;
+                height: 2rem;
                 background-repeat: no-repeat;
-            }
-            .dark &, .dark-alt & {
-                &:hover:before {
-                    background: var(--#{$prefix}pagination-icon-more-dark-hover);
-                }
+                mask-image: var(--qgds-icon-more-horizontal);
+                background-color: var(--action-icon-more-color);
             }
         }
     }
@@ -307,7 +281,7 @@ $pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32"
     .dark &, .dark-alt & {
         .page-item {
-                    //Active link only
+            //Active link only
             &.active .page-link {
                 &:hover {
                     color: black;