{"version":3,"sourceRoot":"","sources":["../../src/scss/quickmenu.scss","../../src/scss/_variables.scss","../../src/scss/mixins/_border-radius.scss","../../src/scss/mixins/_box-shadow.scss","../../src/scss/mixins/_dark-mode.scss","../../src/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"AAMQ,4CCsEM,eDtEqC,4ECkEhC,KD/Df,kKCgEW,KD/DP,uGCqEW,SDrEmG,qCERlH,cFQ6P,KEP7P,mBFO6P,KEN7P,sBFM6P,KGR7P,kDACA,+CACA,0CHM6S,sIACrS,iDITR,mCJQI,+BAGyB,sCAErB,8DAEJ,mIEfJ,cDgFiB,cC/EjB,mBD+EiB,cC9EjB,sBD8EiB,cDjEoO,iCIfrP,mCJeI,6BAEyB,wCAErB,gDACA,oEC+DU,OD7DN,oHC8DS,KD9DgM,YEtBrN,cDqF2B,KCpF3B,mBDoF2B,KCnF3B,sBDmF2B,KGrF3B,mCJsBY,oDACyB,qCAEzB,uHACA,8DI1BZ,mCJ0BY,gDACyB,eAG7B,oHI9BR,mCJ8BQ,gCACyB,0BAEzB,wJEjCR,cD8FyB,KC7FzB,mBD6FyB,KC5FzB,sBD4FyB,KG9FzB,mCJiCQ,yCAEyB,wCACrB,+CAHJ,yCAGsD,wDAGtD,0JACI,uEACI,sECgDC,YDhD2D,UC+C/D,MD/C2F,aCkD1F,KDlD0H,iEACpH,kJE1CpB,cD0FqB,KCzFrB,mBDyFqB,KCxFrB,sBDwFqB,KG1FrB,mCJ0CoB,yCAEyB,wDAErB,gGAOpB,qEACA,qEACA,gBACI,0BACA,gCACA,oCAEJ,gBACI,iCACA,iCACA,6BKnDJ,0BLgEoB,wDI5ExB,0DJ4EwB,yCACyB,eKzE7C,yBLuFI,8DE3FR,cF2F4E,KE1F5E,mBF0F4E,KEzF5E,sBFyF4E,MKnFxE,sDL4FI,yEAEI,cEtGZ,cFsGmD,cErGnD,mBFqGmD,cEpGnD,sBFoGmD,eKrG/C,0BL8GA,4FAEI,4CAEA,2CEnHR,cFmHuD,EElHvD,mBFkHuD,EEjHvD,sBFiHuD,iFAG3C,kLAEA,yHAEQ,uEACI,2EE3HxB,cF2H2F,EE1H3F,mBF0H2F,EEzH3F,sBFyH2F","file":"quickmenu.min.css","sourcesContent":["@import \"variables\";\n@import \"functions\";\n@import \"mixins\";\n\n.quick-menu {\n    &.overlay { // The backdrop when menu is open.\n        &.active { background-color: $backdrop-bg; width: 100%; height: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: $z-index-backdrop; }\n    }\n    // The navigational menu (mostly quick menu styles for mobile first approach).\n    &.navigation { width: 100%; pointer-events: none; display: flex; flex-direction: column-reverse; position: fixed; bottom: 0; left: 0; right: 0; text-align: center; z-index: $z-index-menu;\n        .button { pointer-events: auto; cursor: pointer; cursor: hand; margin: 50px auto; padding: $menu-btn-padding; background: map-deep-get($themes, 'light', 'menu-btn-bg'); color: map-deep-get($themes, 'light', 'menu-btn-color'); @include border-radius(28px); @include box-shadow(rgba(0, 0, 0, 0.5)); @supports (margin: env(safe-area-inset-bottom)) { margin-bottom: calc(80px + env(safe-area-inset-bottom)); }\n            &.hide { display: none; }\n\n            @include dark-mode { background: map-deep-get($themes, 'dark', 'menu-btn-bg'); color: map-deep-get($themes, 'dark', 'menu-btn-color'); }\n\n            .qm-icon { vertical-align: middle; } // Iconography\n        }\n        .menu { display: none; pointer-events: auto; background-color: map-deep-get($themes, 'light', 'menu-bg'); color: map-deep-get($themes, 'light', 'menu-color'); padding: 20px; padding-bottom: 50px; @include border-radius($menu-border-radius); -webkit-overflow-scrolling: touch;\n\n            @include dark-mode { background-color: map-deep-get($themes, 'dark', 'menu-bg'); color: map-deep-get($themes, 'dark', 'menu-color'); }\n\n            &.show { display: block; }\n            .menu-heading { display: block; text-align: $menu-head-alignment;\n                // Iconography\n                .qm-icon { display: inline-grid; background-color: map-deep-get($themes, 'light', 'menu-head-icon-bg'); color: map-deep-get($themes, 'light', 'menu-head-icon-color'); padding: $menu-head-icon-padding; margin: 10px; @include border-radius($menu-head-icon-border-radius);\n                    @include dark-mode { background-color: map-deep-get($themes, 'dark', 'menu-head-icon-bg'); color: map-deep-get($themes, 'dark', 'menu-head-icon-color'); }\n                }\n                span, p { display: block; margin: 10px; }\n                span { color: map-deep-get($themes, 'light', 'menu-head-title-color');\n                    @include dark-mode { color: map-deep-get($themes, 'dark', 'menu-head-title-color'); }\n                }\n            }\n            hr { border: 0; height: 1px; background-color: map-deep-get($themes, 'light', 'divider-color'); padding: 0; margin: 20px -20px 20px -20px;\n                @include dark-mode { background-color: map-deep-get($themes, 'dark', 'divider-color'); }\n            }\n            .menu-close { display: block; color: map-deep-get($themes, 'light', 'close-button-color'); background-color: map-deep-get($themes, 'light', 'close-button-bg'); padding: 15px; text-align: center; cursor: hand; cursor: pointer; @include border-radius($close-button-border-radius);\n\n                @include dark-mode { color: map-deep-get($themes, 'dark', 'close-button-color'); background-color: map-deep-get($themes, 'dark', 'close-button-bg'); }\n                @supports (margin: env(safe-area-inset-bottom)) { margin-bottom: calc(10px + env(safe-area-inset-bottom)); } // Place in clickable area on iPhone X onwards portrait.\n            }\n            // Wrap navigation links to facilitate horizontal scrolling.\n            nav { overflow-x: scroll; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; display: block; margin-bottom: 20px;\n                ul { list-style: none; margin: 0; padding: 0;\n                    li { display: inline-block; max-width: $nav-item-max-width; min-width: $nav-item-width; margin-right: $nav-item-margin; &:last-child { margin-right: 0; }\n                        a { display: block; background-color: map-deep-get($themes, 'light', 'nav-item-bg'); border: map-deep-get($themes, 'light', 'nav-item-border') map-deep-get($themes, 'light', 'nav-item-color'); padding: 20px 10px; text-align: center; @include border-radius($nav-item-border-radius);\n\n                            @include dark-mode { background-color: map-deep-get($themes, 'dark', 'nav-item-bg'); border: map-deep-get($themes, 'dark', 'nav-item-border') map-deep-get($themes, 'dark', 'nav-item-color'); }\n\n                            .qm-icon { display: block; text-align: center; margin: 15px 0; } // Iconography\n                        }\n                    }\n                }\n            }\n        }\n        // Animate hide and show classes which are dynamically added/removed.\n        .hide { animation: hide 0.5s forwards ease-in-out; }\n        .show { animation: show 0.5s forwards ease-in-out; }\n        @keyframes hide {\n            0% { transform: translate(0); }\n            20% { transform: translate(0, 5px); }\n            100% { transform: translate(0, 120px); }\n        }\n        @keyframes show {\n            0% { transform: translate(0, 120px); }\n            80% { transform: translate(0, -5px); }\n            100% { transform: translate(0); }\n        }\n    }\n}\n\n// Mobile and tablet devices only, ensuring these styles do not apply to desktops.\n@include menu-breakpoint(mobile-tablet-only) {\n    .quick-menu {\n        &.navigation {\n            .menu {\n                nav {\n                    ul {\n                        li {\n                            a { color: map-deep-get($themes, 'light', 'nav-item-color');\n                                @include dark-mode { color: map-deep-get($themes, 'dark', 'nav-item-color'); }\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n}\n\n// Tablet version of quick menu.\n@include menu-breakpoint(tablet) {\n    .quick-menu {\n        &.navigation {\n            .menu { max-width: 400px; margin: 20px auto; @include border-radius(15px); }\n        }\n    }\n}\n\n// Enable scrolling on quick menu when in landscape on mobile.\n@include menu-breakpoint(mobile-landscape) {\n    .quick-menu {\n        &.navigation {\n            .menu { max-height: 80vh; overflow: auto; margin: 0 auto;\n                // Larger mobile devices in landscape will inherit tablet styling, therefore define the following values for mobile-landscape.\n                max-width: 50%; @include border-radius(15px 15px 0 0);\n            }\n        }\n    }\n}\n\n// Desktop, navigation links only.\n@include menu-breakpoint(desktop) {\n    .quick-menu {\n        &.navigation { display: block; pointer-events: auto; position: relative; text-align: unset;\n\n            .button { display: none; } // Do not display 'Quick Menu' button.\n\n            .menu { display: block; @include border-radius(0); background-color: unset; padding: 0; max-height: unset; max-width: unset; margin: unset;\n\n                // Don't show any quick-menu contents.\n                .menu-heading, .menu-close, hr, .qm-only { display: none !important; }\n\n                nav { overflow-x: initial; overflow-y: initial; white-space: initial; display: block; margin-bottom: 0; // unset horizontal scrolling.\n                    ul {\n                        li { max-width: unset; min-width: unset;\n                            a { display: inline; padding: 0; border: 0; @include border-radius(0); background-color: unset; } // Remove link styling.\n                        }\n                    }\n                }\n            }\n        }\n    }\n}\n","// Variables\n\n// Device breakpoints\n// Following a mobile first approach, the Quick Menu will be displayed on all\n// devices by default. Define the breakpoints for tablets and desktops.\n//\n$menu-breakpoints: (\n    tablet: 768px,\n    desktop: 1200px\n) !default;\n\n// Quick Menu Themes.\n//\n// Currently only supporting 'light' and 'dark'.\n$themes: (\n    light: (\n        // Quick Menu Button\n        menu-btn-bg:            rgba(0, 0, 0, 0.5),\n        menu-btn-color:         #fff,\n\n        // Menu Background\n        menu-bg:                #fff,\n        menu-color:             #686570,\n\n        // Menu Heading\n        menu-head-icon-bg:      #2c9ff7,\n        menu-head-icon-color:   #fff,\n        menu-head-title-color:  #353644,\n\n        // Horizontal Rule (HR)\n        divider-color:          #f0f0f0,\n\n        // Nav Link Colour\n        nav-item-bg:            transparent,\n        nav-item-border:        2px dashed,\n        nav-item-color:         #196ec3,\n\n        // Close Button\n        close-button-bg:        #eef0f2,\n        close-button-color:     #343541,\n    ),\n    dark: (\n        // Quick Menu Button\n        menu-btn-bg:            rgba(0, 0, 0, 0.5),\n        menu-btn-color:         #fff,\n\n        // Menu Background\n        menu-bg:                #0f0f10,\n        menu-color:             #61646b,\n\n        // Menu Heading\n        menu-head-icon-bg:      #4d99fb,\n        menu-head-icon-color:   #fff,\n        menu-head-title-color:  #adadad,\n\n        // Horizontal Rule (HR)\n        divider-color:          #2c2c2c,\n\n        // Nav Link Colour\n        nav-item-bg:            transparent,\n        nav-item-border:        2px dashed,\n        nav-item-color:         #61646b,\n\n        // Close Button\n        close-button-bg:        #4d99fb,\n        close-button-color:     #e9feff,\n    ),\n) !default;\n\n// Styling options.\n//\n// z-index values (ensure they're above all other elements).\n$z-index-backdrop: 1000 !default;\n$z-index-menu: 1002 !default;\n\n// Background colour for the backdrop when the menu is open.\n$backdrop-bg: rgba(0, 0, 0, 0.5) !default;\n\n// Button to invoke the Quick Menu.\n$menu-btn-padding: 8px 30px !default;\n\n// The Quick Menu.\n$menu-border-radius: 15px 15px 0 0 !default;\n\n// The Quick Menu Heading\n$menu-head-alignment: center !default; // text-align values.\n$menu-head-icon-padding: 10px !default;\n$menu-head-icon-border-radius: 15px !default;\n\n// Nav item, i.e. the link.\n$nav-item-width: 100px !default; // The min-width for a single nav item. (Use this to ensure equal width of all items.)\n$nav-item-max-width: min-content !default; // Max-width for a single nav item.\n$nav-item-border-radius: 15px !default;\n$nav-item-margin: 15px !default; // Margin right from other items.\n\n// Close button within the quick menu.\n$close-button-border-radius: 15px !default;\n","@mixin border-radius($radius)\n{\n    border-radius: $radius;\n    -moz-border-radius: $radius;\n    -webkit-border-radius: $radius;\n}\n","@mixin box-shadow($color)\n{\n    -webkit-box-shadow: 0px 0px 5px 0px $color;\n    -moz-box-shadow: 0px 0px 5px 0px $color;\n    box-shadow: 0px 0px 5px 0px $color;\n}\n","@mixin dark-mode\n{\n    @media (prefers-color-scheme: dark) { @content; }\n}\n","@mixin menu-breakpoint($point)\n{\n    @if $point == desktop {\n        @media (min-width: map-deep-get($menu-breakpoints, 'desktop')) { @content; }\n    }\n    @else if $point == tablet {\n        @media (min-width: map-deep-get($menu-breakpoints, 'tablet')) { @content; }\n    }\n    @else if $point == mobile-landscape {\n        // Support mobile devices in landscape. Includes all iPhones (tested upto iPhone 12 PRO Max) and all Androids (tested upto Galaxy S20 Ultra).\n        @media (max-height: 428px) and (orientation: landscape) { @content; }\n    }\n    @else if $point == mobile-tablet-only {\n        // All mobile and tablet devices only, excluding desktops.\n        @media (max-width: map-deep-get($menu-breakpoints, 'desktop') - 1) { @content; }\n    }\n}\n"]}