From 548be2ed6604ddfc8488cd4a793c6271c2caf485 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Tue, 2 Mar 2021 19:10:10 +0200 Subject: Offcanvas as component (#29017) * Add a new offcanvas component * offcanvas.js: switch to string constants and `event.key` * Remove unneeded code * Sass optimizations * Fixes Make sure the element is hidden and not offscreen when inactive fix close icon negative margins Add content in right & bottom examples Re-fix bottom offcanvas height not to cover all viewport * Wording tweaks * update tests and offcanvas class * separate scrollbar functionality and use it in offcanvas * Update .bundlewatch.config.json * fix focus * update btn-close / fix focus on close * add aria-modal and role return focus on trigger when offcanvas is closed change body scrolling timings * move common code to reusable functions * add aria-labelledby * Replace lorem ipsum text * fix focus when offcanvas is closed * updates * revert modal, add tests for scrollbar * show backdrop by default * Update offcanvas.md * Update offcanvas CSS to better match modals - Add background-clip for borders - Move from outline to border (less clever, more consistent) - Add scss-docs in vars * Revamp offcanvas docs - Add static example to show and explain the components - Split live examples and rename them - Simplify example content - Expand docs notes elsewhere - Add sass docs * Add .offcanvas-title instead of .modal-title * Rename offcanvas example to offcanvas-navbar to reflect it's purpose * labelledby references title and not header * Add default shadow to offcanvas * enable offcanvas-body to fill all the remaining wrapper area * Be more descriptive, on Accessibility area * remove redundant classes * ensure in case of an already open offcanvas, not to open another one * bring back backdrop|scroll combinations * bring back toggling class * refactor scrollbar method, plus tests * add check if element is not full-width, according to #30621 * revert all in modal * use documentElement innerWidth * Rename classes to -start and -end Also copyedit some docs wording * omit some things on scrollbar * PASS BrowserStack tests -- IOS devices, Android devices and Browsers on Mac, hide scrollbar by default and appear it, only while scrolling. * Rename '_handleClosing' to '_addEventListeners' * change pipe usage to comma * change Data.getData to Data.get Co-authored-by: XhmikosR Co-authored-by: Martijn Cuppens Co-authored-by: Mark Otto --- scss/_offcanvas.scss | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++ scss/_variables.scss | 26 +++++++++++++++--- scss/bootstrap.scss | 1 + 3 files changed, 100 insertions(+), 4 deletions(-) create mode 100644 scss/_offcanvas.scss (limited to 'scss') diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss new file mode 100644 index 000000000..1eeb98966 --- /dev/null +++ b/scss/_offcanvas.scss @@ -0,0 +1,77 @@ +.offcanvas { + position: fixed; + bottom: 0; + z-index: $zindex-offcanvas; + display: flex; + flex-direction: column; + max-width: 100%; + color: $offcanvas-color; + visibility: hidden; + background-color: $offcanvas-bg-color; + background-clip: padding-box; + outline: 0; + @include box-shadow($offcanvas-box-shadow); + @include transition(transform $offcanvas-transition-duration ease-in-out); +} + +.offcanvas-header { + display: flex; + justify-content: space-between; + padding: $offcanvas-padding-y $offcanvas-padding-x; + + .btn-close { + padding: ($offcanvas-padding-y / 2) ($offcanvas-padding-x / 2); + margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto; + } +} + +.offcanvas-title { + margin-bottom: 0; + line-height: $offcanvas-title-line-height; +} + +.offcanvas-body { + flex-grow: 1; + padding: $offcanvas-padding-y $offcanvas-padding-x; + overflow-y: auto; +} + +.offcanvas-start { + top: 0; + left: 0; + width: $offcanvas-horizontal-width; + border-right: $offcanvas-border-width solid $offcanvas-border-color; + transform: translateX(-100%); +} + +.offcanvas-end { + top: 0; + right: 0; + width: $offcanvas-horizontal-width; + border-left: $offcanvas-border-width solid $offcanvas-border-color; + transform: translateX(100%); +} + +.offcanvas-bottom { + right: 0; + left: 0; + height: $offcanvas-vertical-height; + max-height: 100%; + border-top: $offcanvas-border-width solid $offcanvas-border-color; + transform: translateY(100%); +} + +.offcanvas.show { + transform: none; +} + +.offcanvas-backdrop::before { + position: fixed; + top: 0; + left: 0; + z-index: $zindex-offcanvas - 1; + width: 100vw; + height: 100vh; + content: ""; + background-color: $offcanvas-body-backdrop-color; +} diff --git a/scss/_variables.scss b/scss/_variables.scss index 4ffcf18ed..2668a790c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -902,10 +902,11 @@ $form-validation-states: ( $zindex-dropdown: 1000 !default; $zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; -$zindex-modal-backdrop: 1040 !default; -$zindex-modal: 1050 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; +$zindex-offcanvas: 1040 !default; +$zindex-modal-backdrop: 1050 !default; +$zindex-modal: 1060 !default; +$zindex-popover: 1070 !default; +$zindex-tooltip: 1080 !default; // scss-docs-end zindex-stack @@ -1431,6 +1432,23 @@ $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default // scss-docs-end close-variables +// Offcanvas + +// scss-docs-start offcanvas-variables +$offcanvas-padding-y: $modal-inner-padding !default; +$offcanvas-padding-x: $modal-inner-padding !default; +$offcanvas-horizontal-width: 400px !default; +$offcanvas-vertical-height: 30vh !default; +$offcanvas-transition-duration: .3s !default; +$offcanvas-border-color: $modal-content-border-color !default; +$offcanvas-border-width: $modal-content-border-width !default; +$offcanvas-title-line-height: $modal-title-line-height !default; +$offcanvas-bg-color: $modal-content-bg !default; +$offcanvas-color: $modal-content-color !default; +$offcanvas-body-backdrop-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !default; +$offcanvas-box-shadow: $modal-content-box-shadow-xs !default; +// scss-docs-end offcanvas-variables + // Code $code-font-size: $small-font-size !default; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index f5f411753..2687d0991 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -42,6 +42,7 @@ @import "popover"; @import "carousel"; @import "spinners"; +@import "offcanvas"; // Helpers @import "helpers"; -- cgit v1.2.3