@qld-gov-au/qgds-bootstrap5 2.1.0 → 2.1.2

package/src/components/bs5/modal/modal.scss

@@ -51,7 +51,7 @@
       --#{$prefix}color-default-color-light-text-heading
     );
     --#{$prefix}btn-close-focus-shadow: none;
-    --#{$prefix}btn-close-focus-border: var(--#{$prefix}focus-color) solid 3px;
+    --#{$prefix}btn-close-focus-border: var(--#{$prefix}color-default-color-light-focus-default) solid 3px;
   }
 }
 

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

@@ -1,7 +1,8 @@
 import { createFocusTrap } from "../../../js/utils.js";
+import { breakpoints } from "../../../js/constants.js";
 
 export function initializeNavbar() {
-  const navbarCollapse = document.getElementById("main-nav");
+  const navbar = document.getElementById("main-nav");
   const overlay = document.getElementById("overlay");
   const burgerBtn = document.getElementById("burgerBtn");
   const burgerCloseBtn = document.getElementById("burgerCloseBtn");
@@ -25,26 +26,21 @@ export function initializeNavbar() {
   let mobileFocusTrap = null;
   const dropdownFocusTraps = new Map();
 
-  // Helper function to close navbar
   function closeNavbar() {
-    if (navbarCollapse?.classList.contains("show")) {
-      navbarCollapse.classList.remove("show");
-      overlay?.classList.remove("show");
-      document.body.style.overflow = "";
-      setAriaHidden(false);
-
-      // Deactivate and destroy mobile focus trap
-      if (mobileFocusTrap) {
-        mobileFocusTrap.deactivate();
-        mobileFocusTrap = null;
-      }
+    // Do not call static method bootstrap.Collapse.getInstance(navbar).hide()
+    // because storybook has a problem with referencing global bootstrap object in production build.
+    // Instead simulate the close button click - same thing.
+    // Do not put side effects of closing menu here (eg clearing menu focus trap), instead use "hidden.bs.collapse" or "hide.bs.collapse" event handlers declared below.
+    // Need to check if menu is actually set to show, otherwise cick will open instead.
+    if (navbar?.classList.contains("show")) {
+      burgerCloseBtn?.click();
     }
   }
 
   // Create mobile focus trap on-demand (when mobile menu opens)
   function createMobileFocusTrap() {
-    if (!mobileFocusTrap && navbarCollapse) {
-      mobileFocusTrap = createFocusTrap(navbarCollapse, {
+    if (!mobileFocusTrap && navbar) {
+      mobileFocusTrap = createFocusTrap(navbar, {
         returnFocusElement: burgerBtn,
         onEscape: () => {
           closeNavbar();
@@ -75,7 +71,7 @@ export function initializeNavbar() {
   // Setup dropdown event listeners
   function setupDropdownListeners() {
     // Find all dropdown toggles (elements with data-bs-toggle="dropdown")
-    const dropdownToggles = navbarCollapse?.querySelectorAll(
+    const dropdownToggles = navbar?.querySelectorAll(
       '[data-bs-toggle="dropdown"]',
     );
 
@@ -90,7 +86,7 @@ export function initializeNavbar() {
 
       // Listen for dropdown show event (desktop only)
       toggle.addEventListener("shown.bs.dropdown", () => {
-        const isMobile = window.innerWidth < 992;
+        const isMobile = window.innerWidth < breakpoints.lg;
         if (!isMobile) {
           // Create and activate focus trap on-demand
           const dropdownTrap = getOrCreateDropdownFocusTrap(dropdown, toggle);
@@ -101,7 +97,7 @@ export function initializeNavbar() {
       // Listen for dropdown hide event
       toggle.addEventListener("hidden.bs.dropdown", () => {
         const dropdownTrap = dropdownFocusTraps.get(dropdown);
-        if (dropdownTrap && dropdownTrap.isActive()) {
+        if (dropdownTrap && dropdownTrap.isActive) {
           dropdownTrap.deactivate();
         }
       });
@@ -109,7 +105,7 @@ export function initializeNavbar() {
   }
 
   // Setup dropdown listeners on load
-  if (navbarCollapse) {
+  if (navbar) {
     setupDropdownListeners();
   }
 
@@ -119,7 +115,7 @@ export function initializeNavbar() {
   });
 
   const resetNavbarState = () => {
-    const isMobile = window.innerWidth < 992;
+    const isMobile = window.innerWidth < breakpoints.lg;
     const dropdownToggles = document.querySelectorAll(
       ".navbar a.dropdown-toggle, .navbar a.no-dropdown-toggle",
     );
@@ -138,20 +134,40 @@ export function initializeNavbar() {
         toggle.setAttribute("data-bs-toggle", "dropdown");
       }
     });
+
+    if (!isMobile) {
+      closeNavbar();
+    }
   };
 
   window.addEventListener("resize", resetNavbarState);
   resetNavbarState();
 
+  //All associated side effects of navbar collapse beginning belong here
+  navbar?.addEventListener("hide.bs.collapse", () => {
+    overlay?.classList.remove("show");
+  });
+
+  // All associated side effects of navbar collapse completion belong here.
+  navbar?.addEventListener("hidden.bs.collapse", () => {
+    setAriaHidden(false);
+
+    // Deactivate and destroy mobile focus trap
+    if (mobileFocusTrap) {
+      mobileFocusTrap.deactivate();
+      mobileFocusTrap = null;
+    }
+  });
+
   // Burger buttons - handle open (mobile only)
-  navbarCollapse?.addEventListener("shown.bs.collapse", () => {
+  navbar?.addEventListener("shown.bs.collapse", () => {
     // Check if navbar is opening
     setTimeout(() => {
-      if (navbarCollapse?.classList.contains("show")) {
+      if (navbar?.classList.contains("show")) {
         setAriaHidden(true);
 
         // Create and activate focus trap when navbar opens (mobile only - whole navbar)
-        const isMobile = window.innerWidth < 992;
+        const isMobile = window.innerWidth < breakpoints.lg;
         if (isMobile) {
           const trap = createMobileFocusTrap();
           trap.activate();
@@ -159,9 +175,4 @@ export function initializeNavbar() {
       }
     }, 0);
   });
-
-  // Close button
-  burgerCloseBtn?.addEventListener("click", () => {
-    closeNavbar();
-  });
 }

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

@@ -52,7 +52,7 @@
           }
           & > a {
             width: calc(100% - 3rem);
-            border-start-end-radius: 1rem;            
+            border-start-end-radius: 1rem;
           }
           &:has(.show) {
             background-color: var(--background-color-hover);
@@ -64,7 +64,6 @@
               }
             }
             .nav-link {
-              
               background-color: var(--dropdown-show-bg);
               border-inline-start-color: var(--dropdown-show-bg);
             }
@@ -152,7 +151,11 @@
               position: absolute;
               left: -9999px;
             }
-            h2,h3,h4,h5,h6 {
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
               color: var(--text-color);
             }
             div {
@@ -197,7 +200,7 @@
         border-inline-start: 0.25rem solid var(--link-border-color-hover);
         text-decoration: underline;
         text-underline-offset: 0.3rem;
-        text-decoration-thickness: 0.125rem;        
+        text-decoration-thickness: 0.125rem;
       }
     }
     a.dropdown-item {
@@ -217,7 +220,7 @@
         border-inline-start: 5px solid var(--link-border-color);
         left: -5px;
         top: 0;
-        bottom: calc(var(--border-width) *  -1);      
+        bottom: calc(var(--border-width) * -1);
       }
       &:hover,
       &.active {
@@ -226,15 +229,15 @@
           margin-block-end: 0;
           border-block-end: 0;
         }
-      &::before {
-        border-inline-start: 0.25rem solid var(--link-border-color-hover);
-      }
+        &::before {
+          border-inline-start: 0.25rem solid var(--link-border-color-hover);
+        }
       }
       &:hover {
         .qld-icon {
           background-color: var(--link-border-color-hover);
-        }       
-      }     
+        }
+      }
       &.dropdown-toggle {
         &::after {
           display: none;
@@ -312,7 +315,8 @@
     height: 2rem;
   }
   /* colours */
-  &.dark, &.dark-alt  {
+  &.dark,
+  &.dark-alt {
     --vert-background-color: var(--#{$prefix}default-background);
     --background-color: var(--#{$prefix}dark-background-shade);
     --background-color-hover: var(--#{$prefix}dark-alt-background);
@@ -345,7 +349,7 @@
       --header-color: var(--#{$prefix}light-text-heading);
       --action-icon-color: var(--#{$prefix}alt-button-hover);
       --dropdown-show-btn-bg: var(--#{$prefix}default-background);
-      --dropdown-show-btn-icon-color: var(--#{$prefix}alt-button-hover);    
+      --dropdown-show-btn-icon-color: var(--#{$prefix}alt-button-hover);
       --nav-header-color: var(--#{$prefix}dark-text-text);
       --nav-header-border-color: var(--#{$prefix}dark-border);
       --nav-header-icon-color: var(--#{$prefix}brand-accent);
@@ -388,7 +392,7 @@
       --nav-header-icon-color: var(--#{$prefix}alt-button-hover);
       --navbar-collapse-bg: var(--#{$prefix}default-background-shade);
       --action-icon-color_active: var(--text-color);
-      
+
       .alt {
         --vert-background-color: var(--#{$prefix}dark-background);
         --background-color: var(--#{$prefix}default-background);
@@ -441,7 +445,8 @@
     }
   }
   background-color: var(--background-color);
-  border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color);
+  border-block-end: var(--horizontal-bar-border-width) solid
+    var(--link-border-color);
   padding-block: 0;
   button.dropdown-toggle,
   .nav-header {
@@ -463,28 +468,33 @@
   }
   .navbar-nav a.nav-link {
     background-color: var(--background-color);
-    border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color);
+    border-block-end: var(--horizontal-bar-border-width) solid
+      var(--link-border-color);
     margin-block-end: calc(var(--horizontal-bar-border-width) * -1);
     &.show {
       color: var(--link-color);
       background-color: var(--dropdown-bg-color);
-      border-block-end: var(--horizontal-bar-border-width) solid var(--dropdown-bg-color);
+      border-block-end: var(--horizontal-bar-border-width) solid
+        var(--dropdown-bg-color);
       font-weight: 600;
       z-index: 20;
       &:hover {
         background-color: var(--dropdown-bg-color);
-        border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color-hover);
+        border-block-end: var(--horizontal-bar-border-width) solid
+          var(--link-border-color-hover);
       }
     }
     &.active {
       color: var(--link-color);
       background-color: var(--background-color);
-      border-block-end: var(--horizontal-bar-border-width) solid var(--background-color);
+      border-block-end: var(--horizontal-bar-border-width) solid
+        var(--background-color);
     }
     &:hover,
     &.active:hover {
       background-color: var(--background-color-hover);
-      border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color-hover);
+      border-block-end: var(--horizontal-bar-border-width) solid
+        var(--link-border-color-hover);
     }
     .qld-icon {
       background-color: var(--action-icon-color);
@@ -492,7 +502,7 @@
   }
   .navbar-nav a.nav-link,
   a.dropdown-item {
-    color: var(--link-color);
+    color: var(--text-color);
     padding-block: var(--nav-link-padding-block);
     padding-inline: 0.75rem;
     display: flex;
@@ -500,6 +510,7 @@
     gap: 0.5rem;
     align-items: center;
     &:hover {
+      color: var(--link-color);
       text-decoration: underline;
       text-underline-offset: 0.3rem;
       text-decoration-thickness: 0.125rem;
@@ -535,7 +546,9 @@
     }
   }
   .dropdown-menu.show {
-    margin-block-start: calc(var(--horizontal-bar-border-width) - var(--border-width));
+    margin-block-start: calc(
+      var(--horizontal-bar-border-width) - var(--border-width)
+    );
     inset-inline: 0;
     background-color: var(--dropdown-bg-color);
     padding: 4rem;
@@ -548,7 +561,7 @@
     grid-template-columns: repeat(3, 1fr);
     column-gap: 2rem;
     row-gap: 0;
-    z-index: 10;
+    z-index: 999;
     border-width: 0;
     @include media-breakpoint-up(xl) {
       column-gap: 4rem;
@@ -732,9 +745,9 @@
     transition: max-width var(--animation-time) ease-in;
     .navbar-collapse {
       background-color: var(--navbar-collapse-bg);
-    }    
+    }
     a.dropdown-item {
-      font-size: .875rem;
+      font-size: 0.875rem;
     }
     @include repeatedVerticalStyles;
     .nav-header .navbar-brand {
@@ -783,7 +796,7 @@
       }
       .nav-header {
         display: flex;
-      }    
+      }
       &.collapse > .container {
         animation-name: slideToRight;
         animation-duration: var(--animation-time);
@@ -821,8 +834,10 @@
     }
   }
 }
+
 //Prevent double scrollbar when navabr is open
-body:has(.navbar.show) {
-  overflow: hidden;
+@include media-breakpoint-down("lg") {
+  body:has(.navbar.show) {
+    overflow: hidden;
+  }
 }
-

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

@@ -1,5 +1,6 @@
 import { Navbar } from "./Navbar.js";
 import defaultdata from "./navbar.data.json";
+import { breakpoints } from "../../../js/constants.js";
 
 //Default story
 export default {
@@ -164,7 +165,7 @@ export default {
           }
           
           /* Mobile-only items - hide on desktop with unique class names */
-          @media (min-width: 992px) { 
+          @media (min-width: ${breakpoints.lg}px) { 
             .qgds-mobile-only,
             .qgds-hide-desktop,
             .navbar-nav .qgds-mobile-only,
@@ -504,7 +505,7 @@ export const Default = {
           justify-content: flex-end;
           align-items: center;
         }
-        @media (width <= 992px) {
+        @media (width <= ${breakpoints.lg}px) {
           
           #burgerBtn {
             --nav-header-icon-color: #ffe500;
@@ -533,7 +534,7 @@ export const Default = {
             background-color: var(--nav-header-icon-color, #ffe500);
           }
         }
-        @media (width >= 992px) {
+        @media (width >= ${breakpoints.lg}px) {
           #burgerBtn, #storybook-only-header {
             display: none !important;
           }

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

@@ -381,12 +381,14 @@ export const ContentPageWithSingleForm = {
           variantClass: "btn-primary",
           label: "Submit",
           type: "submit",
+          islink: false,
         },
         {
           ...buttonData,
           variantClass: "btn-secondary",
           label: "Reset",
           type: "reset",
+          islink: false,
         },
       ],
     },

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

@@ -12,10 +12,10 @@
   },
 
   "pages": [
-    { "href": "#", "linktext": "1", "customClasses": "" },
-    { "href": "#", "linktext": "2", "customClasses": "active" },
-    { "href": "#", "linktext": "3", "customClasses": "" },
+    { "href": "#", "linktext": "1", "arialabel": "Page 1", "customClasses": "" },
+    { "href": "#", "linktext": "2", "arialabel": "Page 2, current page", "customClasses": "active" },
+    { "href": "#", "linktext": "3", "arialabel": "Page 3", "customClasses": "" },
     { "href": "#", "linktext": "", "customClasses": "more", "more": true },
-    { "href": "#", "linktext": "7", "customClasses": "" }
+    { "href": "#", "linktext": "7", "arialabel": "Page 7", "customClasses": "" }
   ]
 }

package/src/components/bs5/pagination/pagination.hbs

@@ -23,8 +23,13 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
             {{! More button }}
             <span></span>
             {{else}}
-            {{! Page button }}
-            <a class="page-link" href="{{href}}" aria-label="{{arialabel}}">{{ linktext }}</a>
+                {{#ifCond "active" "in" customClasses}}
+                {{! Active page - not a link }}
+                <span class="page-link" aria-current="page" aria-label="{{#if arialabel}}{{arialabel}}{{else}}Page {{linktext}}, current page{{/if}}">{{ linktext }}</span>
+                {{else}}
+                {{! Page button }}
+                <a class="page-link" href="{{href}}" aria-label="{{#if arialabel}}{{arialabel}}{{else}}Page {{linktext}}{{/if}}">{{ linktext }}</a>
+                {{/ifCond}}
             {{/if}}
         </li>
 

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

@@ -148,7 +148,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
   .next {
     margin-left: 0.25rem;
   }
-  .active a {
+  .active .page-link {
     font-weight: 700;
   }
 

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

@@ -1,48 +1,46 @@
 {
-    "type": "indent-text",
-    "variantClass": "light",
-    "promoImage": "./assets/img/banner-example-3-to-2.jpg",
-    "contentAlignment": "content-left",
-    "icon": "icon-dot-grid",
-    "title": "Title goes here and has a maximum of 65 character limit",
-    "abstract": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.",
-    "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis. Vel suspendisse mi quisque consequat aliquet egestas.",
-    "cta": {
-      "items": [
-        {
-          "url": "#",
-          "id": "https://www.wired.com",
-          "value": "Label",
-          "target": "_blank",
-          "class": [
-              {"small": false}, 
-              {"view-all": false}
-          ]
-        }
-      ]
-    },
-    "btn": {
-      "items": [
-        {
-          "variantClass": "btn-primary",
-          "islink": true,
-          "isdisabled": false,
-          "iconClass": "",
-          "iconPosition": "",
-          "label": "Primary",
-          "href": "https://google.com",
-          "target": "_self"
-        },
-        {
-          "variantClass": "btn-secondary",
-          "islink": true,
-          "isdisabled": false,
-          "iconClass": "",
-          "iconPosition": "",
-          "label": "Secondary",
-          "href": "https://google.com",
-          "target": "_self"
-        }
-      ]
-    }
-  }
+  "type": "indent-text",
+  "variantClass": "light",
+  "promoImage": "./assets/img/banner-example-3-to-2.jpg",
+  "promoImageDescription": "Promotional image",
+  "contentAlignment": "content-left",
+  "icon": "icon-dot-grid",
+  "title": "Title goes here and has a maximum of 65 character limit",
+  "abstract": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.",
+  "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis. Vel suspendisse mi quisque consequat aliquet egestas.",
+  "cta": {
+    "items": [
+      {
+        "url": "#",
+        "id": "https://www.wired.com",
+        "value": "Label",
+        "target": "_blank",
+        "class": [{ "small": false }, { "view-all": false }]
+      }
+    ]
+  },
+  "btn": {
+    "items": [
+      {
+        "variantClass": "btn-primary",
+        "islink": true,
+        "isdisabled": false,
+        "iconClass": "",
+        "iconPosition": "",
+        "label": "Primary",
+        "href": "https://google.com",
+        "target": "_self"
+      },
+      {
+        "variantClass": "btn-secondary",
+        "islink": true,
+        "isdisabled": false,
+        "iconClass": "",
+        "iconPosition": "",
+        "label": "Secondary",
+        "href": "https://google.com",
+        "target": "_self"
+      }
+    ]
+  }
+}

package/src/components/bs5/promotionalPanel/promotionalPanel.hbs

@@ -5,7 +5,7 @@
         {{/ifCond}}>
         <div class="image-panel">
             {{#ifCond type '!=' 'promo'}}
-            <img class="promo-panel-image" src="{{promoImage}}" alt="Promotional Image">
+            <img class="promo-panel-image" src="{{promoImage}}" alt="{{isdefined promoImageDescription "Promotional image"}}">
             {{else}}
                 <div class="promo-panel-image"></div>
             {{/ifCond}}

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

@@ -166,7 +166,7 @@
     position: -webkit-sticky;
     position: sticky;
     inset-block-start: 0;
-    z-index: 999;
+    z-index: 500;
     padding-block: 20px;
     padding-inline: 40px;
     .container {

package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap

@@ -7,8 +7,8 @@ exports[`SearchInput > Renders as expected 1`] = `
 <div class="qld-search-input ">
     <input id="search" name="query" class="form-control" type="text" autocomplete="off"
         aria-label="Search website"  data-collection="qgov~sp-search"  data-profile="qld"  data-numranks="10"  data-tiers="off"  data-suggestions="https://discover.search.qld.gov.au/s/suggest.json"  data-results-url="https://discover.search.qld.gov.au/s/search.json"  placeholder="" />
-    <button class="btn btn-primary" type="submit" id="search-button">
-        <span class="btn-icon"></span>
+    <button class="btn btn-primary" type="submit" id="search-button" aria-label="Search">
+        <span class="btn-icon" aria-hidden="true"></span>
         <span class="btn-label">Search</span>
     </button>
     

package/src/components/bs5/searchInput/search.functions.js

@@ -31,7 +31,9 @@ export function selectDynamicSuggestion(value, form) {
   const suggestions = form.querySelector(".suggestions");
 
   if (searchInput && suggestions) {
-    searchInput.value = value.trim();
+    // Assign queryValue, and cleanup string before submission
+    let queryValue = value.replace(/\s+/g, " ").trim();
+    searchInput.value = queryValue;
 
     // Form action
     const actionUrl = form.getAttribute("action");
@@ -41,7 +43,7 @@ export function selectDynamicSuggestion(value, form) {
 
     // Construct the URL with proper parameters
     const params = new URLSearchParams({
-      query: value.trim(),
+      query: queryValue,
       collection: atts.collection || "qgov~sp-search",
       profile: atts.profile || "qld",
       num_ranks: atts.numRanks || "10",
@@ -143,7 +145,7 @@ export async function showSuggestions(value = "", isDefault = false, form) {
             let linkItem = event.target.closest("a");
             if (linkItem) {
               event.preventDefault();
-              selectDynamicSuggestion(linkItem.innerText, form);
+              selectDynamicSuggestion(linkItem.textContent, form);
             }
           });
       } else {
@@ -198,7 +200,7 @@ export async function showSuggestions(value = "", isDefault = false, form) {
             let linkItem = event.target.closest("a");
             if (linkItem) {
               event.preventDefault();
-              selectDynamicSuggestion(linkItem.innerText, form);
+              selectDynamicSuggestion(linkItem.textContent, form);
             }
           });
       }
@@ -217,8 +219,10 @@ export function submitSearchForm(query = "", form) {
   const searchInput = form.querySelector(".qld-search-input input");
   const atts = searchInput ? searchInput.dataset : null;
 
+  const queryValue = query.trim().replace(/\s+/g, " ");
+
   const params = new URLSearchParams({
-    query: query.trim(),
+    query: queryValue,
     collection: atts.collection || "qgov~sp-search",
     profile: atts.profile || "qld",
     num_ranks: atts.numRanks || "10",

package/src/components/bs5/searchInput/searchInput.hbs

@@ -4,8 +4,8 @@
 <div class="qld-search-input {{customClass}}">
     <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
         aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} placeholder="{{placeholder}}" />
-    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
-        <span class="btn-icon"></span>
+    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}" aria-label="{{ buttonLabel }}">
+        <span class="btn-icon" aria-hidden="true"></span>
         <span class="btn-label">{{ buttonLabel }}</span>
     </button>
     {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}

package/src/components/bs5/searchInput/searchInput.scss

@@ -58,6 +58,7 @@
     .suggestions {
       display: block; // !important to override bootstrap d-none
       opacity: 1;
+      z-index: 9999; // Added z-index to ensure suggestions appear above other elements
       transition:
         opacity 0.5s,
         display 0.5s;