@qld-gov-au/qgds-bootstrap5 1.0.1 → 1.0.2

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

@@ -0,0 +1,285 @@
+// QGDS QOL Pagination
+// extends https://getbootstrap.com/docs/5.3/components/pagination/#variables
+
+
+//PREV NEXT ARROW on default background
+$pagination-icon-prevnext-color: $secondary;
+$pagination-icon-prevnext-hover-color: $qld-alt-button-hover;
+//PREV NEXT ARROW on dark background
+$pagination-icon-prevnext-dark-color: $qld-golden-yellow;
+$pagination-icon-prevnext-dark-hover-color: $qld-golden-yellow;
+//MORE DOTS on default background
+$pagination-icon-more-color: $primary;
+
+//MORE DOTS on dark background
+$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>');
+
+//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 {
+
+    //Padding
+    --#{$prefix}pagination-padding-x: 1rem;
+    --#{$prefix}pagination-padding-y: 0.5rem;
+
+    //Colour
+    --#{$prefix}pagination-color: var(--#{$prefix}link-color);
+    --#{$prefix}pagination-bg: transparent;
+
+    //Border
+    --#{$prefix}pagination-border-width: 1px;
+    --#{$prefix}pagination-border-color: var(--#{$prefix}soft-grey);
+    --#{$prefix}pagination-border-radius: var(--#{$prefix}border-radius);
+
+    //Focus (outline)    
+    --#{$prefix}pagination-focus-color: var(--#{$prefix}link-hover-color);
+    --#{$prefix}pagination-focus-border-color: var(--#{$prefix}secondary-dark);
+    --#{$prefix}pagination-focus-outline-color: var(--#{$prefix}light-blue);
+    --#{$prefix}pagination-focus-bg: transparent;
+
+    //Hover
+    --#{$prefix}pagination-hover-box-shadow: none;
+    --#{$prefix}pagination-hover-color: var(--#{$prefix}primary);
+    --#{$prefix}pagination-hover-border-color: var(--#{$prefix}secondary);
+    --#{$prefix}pagination-hover-bg: transparent;
+
+    //Active
+    --#{$prefix}pagination-active-color: var(--#{$prefix}white);
+    --#{$prefix}pagination-active-bg: var(--#{$prefix}primary);
+    --#{$prefix}pagination-active-border-color: var(--#{$prefix}primary);
+    --#{$prefix}pagination-active-dropshadow: 0px 1px 2px rgba(0, 0, 0, .2),
+        0px 1px 3px 1px rgba(0, 0, 0, .1);
+
+    //Disabled
+    --#{$prefix}pagination-disabled-color: var(--#{$prefix}secondary-color);
+    --#{$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)};
+
+}
+
+// When the parent container has a darker background (.dark), or the parent container uses attribute data-bs-theme="dark"
+// redefine the variables we need to change
+.dark .pagination,
+.dark-alt .pagination,
+[data-bs-theme="dark"] .pagination,
+[data-bs-theme="dark-alt"] .pagination {
+
+    //Colour
+    --#{$prefix}pagination-color: var(--#{$prefix}white);
+    --#{$prefix}pagination-bg: transparent;
+
+    //Border
+    --#{$prefix}pagination-border-color: var(--#{$prefix}dark-alt-border);
+
+    //Focus    
+    --#{$prefix}pagination-focus-outline-color: var(--#{$prefix}dark-focus);
+    --#{$prefix}pagination-focus-color: var(--#{$prefix}link-hover-color);
+    --#{$prefix}pagination-focus-border-color: var(--#{$prefix}secondary-dark);
+    --#{$prefix}pagination-focus-bg: transparent;
+
+    //Hover
+    --#{$prefix}pagination-hover-color: var(--#{$prefix}white);
+    --#{$prefix}pagination-hover-border-color: var(--#{$prefix}golden-yellow);
+    --#{$prefix}pagination-hover-bg: transparent;
+
+    //Active
+    --#{$prefix}pagination-active-color: var(--#{$prefix}white);
+    --#{$prefix}pagination-active-bg: #{$qld-dark-action-primary};
+    --#{$prefix}pagination-active-border-color: #{$qld-dark-action-primary};
+    --#{$prefix}pagination-active-dropshadow: 0px 1px 2px rgba(0, 0, 0, .2),
+        0px 1px 3px 1px rgba(0, 0, 0, .1);
+
+    //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)};
+
+}
+
+
+.pagination {
+
+    // General ruleset
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin: 1rem 0;
+
+
+    //Page item buttons
+    .page-item {
+
+        .page-link {
+            border-radius: 3px;
+            width: 2rem;
+            height: 2rem;
+            padding: 0;
+            text-align: center;
+            line-height: calc(2rem - 2px);
+            color: var(--#{$prefix}pagination-color);
+            border-color: var(--#{$prefix}pagination-border-color);
+
+            &:hover {
+                border-color: var(--#{$prefix}pagination-hover-border-color);
+                box-shadow: inset 0 0 0 1px var(--#{$prefix}pagination-hover-border-color);
+            }
+
+            &:focus {
+                outline: 2px solid var(--#{$prefix}pagination-focus-outline-color);
+                outline-offset: 2px;
+                border-color: var(--#{$prefix}pagination-hover-border-color);
+                box-shadow: inset 0 0 0 1px var(--#{$prefix}pagination-hover-border-color);
+            }
+
+        }
+
+        //Only .previous
+        &.previous .page-link {
+            padding-left: 2.25rem;
+            width: unset;
+        }
+
+        //Only .next
+        &.next .page-link {
+            padding-right: 2.25rem;
+            width: unset;
+        }
+
+        //Shared by both .prev and .next
+        &.previous .page-link,
+        &.next .page-link {
+
+            //.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;
+            }
+
+            &:hover:before {
+                background: var(--#{$prefix}pagination-icon-prevnext-hover) center center;
+                background-repeat: no-repeat;
+            }
+
+            //Previous and Next "link text" 
+            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;
+        }
+
+        //Non-numeric links in pagination
+        &.previous,
+        &.next {
+            .page-link {
+                border: none;
+                position: relative;
+                height: 2rem;
+
+                &:hover {
+                    box-shadow: none;
+                }
+
+                &:focus {
+                    outline: 2px solid var(--#{$prefix}pagination-focus-outline-color);
+                    outline-offset: 2px;
+                    border: none;
+                    box-shadow: none;
+                }
+            }
+        }
+
+        //Active link only
+        &.active .page-link {
+
+            color: var(--#{$prefix}pagination-active-color);
+            background-color: var(--#{$prefix}pagination-active-bg);
+            border-color: var(--#{$prefix}pagination-active-border-color);
+
+            &:hover {
+                border-color: var(--#{$prefix}pagination-active-bg);
+                box-shadow: var(--#{$prefix}pagination-active-dropshadow);
+            }
+
+            &:focus {
+                outline: 2px solid var(--#{$prefix}pagination-focus-outline-color);
+                outline-offset: 2px;
+                border-color: var(--#{$prefix}pagination-active-bg);
+                box-shadow: var(--#{$prefix}pagination-active-dropshadow);
+            }
+        }
+
+        //More dots
+        &.more span {
+            border: none;
+            position: relative;
+            height: 2rem;
+            width: 2rem;
+            display: inline-block;
+
+            &:before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: var(--#{$prefix}pagination-icon-more);
+                background-repeat: no-repeat;
+            }
+        }
+    }
+
+
+    // RESPONSIVE ADJUSTMENTS
+
+    // Pagination fallback on small devices
+    // Hide page numbers, show previous and next arrows
+    @include media-breakpoint-down(sm) {
+
+        .page-item {
+            display: none;
+        }
+
+        .page-item.previous,
+        .page-item.next {
+            display: inline-flex;
+        }
+    }
+
+    //Remove Previous and Next "link text" from smaller devices
+    @include media-breakpoint-down(md) {
+        span {
+            display: none;
+        }
+    }
+
+}

package/src/components/bs5/pagination/pagination.stories.js

@@ -0,0 +1,145 @@
+// Blockquote.stories.js
+import { Pagination } from './Pagination.js';
+import defaultdata from './pagination.data.json';
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Pagination',
+  render: (args) => new Pagination(args).html,
+  
+  parameters: {
+    docs: {
+      controls: {
+        exclude: ['previous', 'next', 'pages'],
+        hideNoControlsWarning: true,
+      },
+    },
+  },
+};
+
+/**
+ * Pagination (Default)
+ */
+
+export const Default = {
+  args: defaultdata,
+};
+
+
+/**
+ * Pagination when used inside a <code>.light</code> container
+ */
+
+export const Light = {
+  
+  args: defaultdata,
+
+  parameters: {
+    backgrounds: {
+      default: 'Light',
+      values: [
+        { name: 'Light', value: 'var(--qld-light-background)' },
+      ],
+    },
+  },
+  
+  decorators: [
+    (Story) => {
+      return `
+      <div class="">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+
+
+/**
+ * Pagination when used inside a <code>.light-alternative</code> container
+ */
+
+export const LightAlternative = {
+  
+  args: defaultdata,
+
+  parameters: {
+    backgrounds: {
+      default: 'Light Alternative',
+      values: [
+        { name: 'Light Alternative', value: 'var(--qld-light-alt-background)' },
+      ],
+    },
+  },
+  
+  decorators: [
+    (Story) => {
+      return `
+      <div class="">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+
+
+/**
+ * Pagination when used inside a <code>.dark</code> container
+ */
+
+export const Dark = {
+  
+  args: defaultdata,
+
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-primary)' },
+      ],
+    },
+  },
+  
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+
+/**
+ * Pagination when used inside a <code>.dark-alt</code> container
+ */
+
+export const DarkAlternative = {
+  
+  args: defaultdata,
+
+  parameters: {
+    backgrounds: {
+      default: 'Dark Alternative',
+      values: [
+        { name: 'Dark Alternative', value: 'var(--qld-primary-dark)' },
+      ],
+    },
+  },
+  
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+

package/src/components/bs5/quickexit/Quickexit.js

@@ -0,0 +1,12 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./quickexit.hbs?raw";
+
+export class Quickexit {
+
+  // Use the global Component class to create a new instance of the Loading Quickexit component.
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+
+  constructor(data = {}) {
+    return new Component(template, data);
+  }
+}

package/src/components/bs5/quickexit/quickexit.functions.js

@@ -0,0 +1,79 @@
+export function positionQuickExit() {
+  let quickexitInstances = document.getElementsByClassName('qld-quick-exit');
+  if (quickexitInstances.length > 0) {
+    const el = document.getElementsByClassName('qld-quick-exit')[0];
+    if (document.documentElement.clientWidth > 992) {
+      if (window.pageYOffset > 200) {
+        el.setAttribute("style", "position: 'fixed', top: '0px'");
+      }
+      if (window.pageYOffset < 200) {
+        el.setAttribute("style", "position: 'sticky', top: '0px'");
+      }
+    } else {
+      el.setAttribute("style", "position: 'fixed', top: 'auto'");
+    }
+  }
+}
+
+export function initQuickexit() {
+  var quickExitElement = document.getElementsByClassName('qld-quick-exit');
+  var quickExitButton = document.querySelector('.qld-quick-exit-button');
+
+  if (quickExitElement.length > 0 && typeof (quickExitButton) !== 'undefined' && quickExitButton != null) {
+    onbtnClick();
+    onKeyDown();
+  }
+}
+/**
+* onbtnClick -> clicking quick exit button a page
+* @return {undefined}
+**/
+function onbtnClick() {
+  const escapeSite = 'https://www.google.com.au/';
+  var quickExitButton = document.querySelector('.qld-quick-exit-button');
+  quickExitButton.onclick = function () {
+    return quickExit(escapeSite);
+  }
+}
+
+/**
+* onKeyDown -> escape keydown event
+* @return {undefined}
+**/
+function onKeyDown() {
+  const escapeSite = 'https://www.google.com.au/';
+  // add hotkey trigger
+  document.addEventListener('keydown', function (e) {
+    if (e.keyCode === 27) {
+      quickExit(escapeSite);
+      if (e) {
+        // stop escape from cancelling redirect
+        e.preventDefault();
+        // early IEs don't have preventDefault
+        e.returnValue = false;
+      }
+      return false;
+    }
+  });
+}
+
+/**
+* quickExit function redirects a user on click and Esc key down
+* @param {string} site - site to replace on initiating the 'quick exit' ('Esc' key or clicking 'Close this site' button) function
+* @return {undefined}
+**/
+function quickExit(site) {
+  // then redirect to a non-sensitive site
+  window.open(site, '_blank');
+  window.location.replace(site);
+  // remove as much info from URL as possible
+  if (window.history) {
+    try {
+      window.history.replaceState({}, '', '/');
+    } catch (e) {
+      e.printStackTrace();
+    }
+  }
+  // disable default event handling
+  return false;
+}

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

@@ -0,0 +1,178 @@
+/*
+ * 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;
+
+            &:focus,
+            &:active,
+            &:focus-within {
+                outline-offset: 2px;
+                box-shadow: none;
+                outline: 2px solid var(--qld-focus-color);
+                border-radius: 0px;
+            }
+        }
+
+        .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;
+
+            &:hover {
+                text-decoration-thickness: var(--qld-link-underline-thickness-hover);
+            }
+        }
+
+
+        .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
+        }
+    }
+}
+
+
+/*
+ * 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-item {
+                margin-left: 25px;
+            }
+
+            .qld-tooltip-wrapper {
+                bottom: auto;
+                top: 40px;
+                padding: 1rem;
+            }
+
+            .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)
+            }
+        }
+    }
+}
+
+.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>");
+}