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 --- site/assets/scss/_component-examples.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index b997689ed..91b5bbfd3 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -201,6 +201,18 @@ } } +.bd-example-offcanvas { + @include border-start-radius(0); + + .offcanvas { + position: static; + display: block; + height: 200px; + visibility: visible; + transform: translateX(0); + } +} + // Tooltips .tooltip-demo a { white-space: nowrap; -- cgit v1.2.3 From 1c02ef4f971afe5df75d4e1889435f3edd9f2bbd Mon Sep 17 00:00:00 2001 From: GeoSot Date: Tue, 23 Mar 2021 08:22:59 +0200 Subject: Allow offcanvas to be initialized in open state (#33382) * Update docs to use new .show behavior and clarify some copy for first example Co-authored-by: Mark Otto Co-authored-by: XhmikosR --- site/assets/scss/_component-examples.scss | 3 --- 1 file changed, 3 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 91b5bbfd3..534f2307d 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -206,10 +206,7 @@ .offcanvas { position: static; - display: block; height: 200px; - visibility: visible; - transform: translateX(0); } } -- cgit v1.2.3 From 232e392c9126fcb1dbe13c963e7edcdbd62cfeb8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 23 Mar 2021 10:06:11 -0700 Subject: Make offcanvas example fully static (#33446) --- site/assets/scss/_component-examples.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 534f2307d..005515922 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -206,7 +206,10 @@ .offcanvas { position: static; + display: block; height: 200px; + visibility: visible; + transform: translate(0); } } -- cgit v1.2.3 From 6e7f1a9a347f4cc38a8973044440afa52f2cffcd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 30 Mar 2021 23:08:04 -0700 Subject: Add new docs footer (#33453) * Replace site footer with mega footer to link to various projects and community resources * Fix broken HTML --- site/assets/scss/_footer.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss index 48ad349de..87cee6d2b 100644 --- a/site/assets/scss/_footer.scss +++ b/site/assets/scss/_footer.scss @@ -3,16 +3,14 @@ // .bd-footer { - @include font-size(.875rem); - color: #63707c; - a { - font-weight: 600; color: $gray-700; + text-decoration: none; &:hover, &:focus { color: $link-color; + text-decoration: underline; } } } -- cgit v1.2.3 From cdf56e0eefd797d4b0f26021d24958fc315a5f2c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 18 Mar 2021 22:16:11 -0700 Subject: Update look and feel of examples and copy buttons --- site/assets/scss/_clipboard-js.scss | 17 +++++++------- site/assets/scss/_component-examples.scss | 37 ++++++++++++++++++++++++++----- 2 files changed, 41 insertions(+), 13 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 83b9a8b9e..5465b18a9 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -18,20 +18,21 @@ .btn-clipboard { position: absolute; - top: .65rem; - right: .65rem; + top: .35rem; + right: .5rem; z-index: 10; display: block; padding: .25rem .5rem; - @include font-size(.65em); - color: $primary; - background-color: $white; - border: 1px solid; + @include font-size(.75em); + color: $gray-700; + user-select: none; + background-color: transparent; + border: 0; @include border-radius(); &:hover, &:focus { - color: $white; - background-color: $primary; + color: $gray-900; + background-color: $gray-200; } } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 005515922..a51ccf604 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -83,6 +83,8 @@ @include border-top-radius(.25rem); + .bd-clipboard + .highlight { + border-top: 0; + @include border-top-radius(0); @include border-bottom-radius(.25rem); } } @@ -287,18 +289,20 @@ // .highlight { - padding: 1rem; + position: relative; + padding: 3.5rem 1rem 0; margin-bottom: 1rem; + overflow: auto; background-color: $gray-100; + border: 1px solid $gray-300; @include media-breakpoint-up(sm) { - padding: 1rem 1.5rem; + @include border-radius(.25rem); } pre { - padding: 0; - margin-top: .65rem; - margin-bottom: .65rem; + padding: 0 0 1rem; + margin-bottom: .5rem; white-space: pre; background-color: transparent; border: 0; @@ -320,3 +324,26 @@ margin-left: 0; } } + +.bd-example-multiple-langs + .bd-clipboard + .highlight { + margin-bottom: 0; + border-bottom: 0; + @include border-bottom-radius(0); +} +.highlight + .bd-clipboard + .highlight { + @include border-top-radius(0); +} + +[data-lang]::before { + position: absolute; + top: 0; + right: 0; + left: 0; + padding: .5rem 1rem; + @include font-size(.875rem); + color: $gray-700; + text-transform: uppercase; + content: attr(data-lang); + user-select: none; + border-bottom: 1px solid $gray-300; +} -- cgit v1.2.3 From a398c500b87176e7d17074bb631639ca51982b4a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 6 Apr 2021 20:59:31 -0700 Subject: Revert "Update look and feel of examples and copy buttons" This reverts commit cdf56e0eefd797d4b0f26021d24958fc315a5f2c. --- site/assets/scss/_clipboard-js.scss | 17 +++++++------- site/assets/scss/_component-examples.scss | 37 +++++-------------------------- 2 files changed, 13 insertions(+), 41 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 5465b18a9..83b9a8b9e 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -18,21 +18,20 @@ .btn-clipboard { position: absolute; - top: .35rem; - right: .5rem; + top: .65rem; + right: .65rem; z-index: 10; display: block; padding: .25rem .5rem; - @include font-size(.75em); - color: $gray-700; - user-select: none; - background-color: transparent; - border: 0; + @include font-size(.65em); + color: $primary; + background-color: $white; + border: 1px solid; @include border-radius(); &:hover, &:focus { - color: $gray-900; - background-color: $gray-200; + color: $white; + background-color: $primary; } } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index a51ccf604..005515922 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -83,8 +83,6 @@ @include border-top-radius(.25rem); + .bd-clipboard + .highlight { - border-top: 0; - @include border-top-radius(0); @include border-bottom-radius(.25rem); } } @@ -289,20 +287,18 @@ // .highlight { - position: relative; - padding: 3.5rem 1rem 0; + padding: 1rem; margin-bottom: 1rem; - overflow: auto; background-color: $gray-100; - border: 1px solid $gray-300; @include media-breakpoint-up(sm) { - @include border-radius(.25rem); + padding: 1rem 1.5rem; } pre { - padding: 0 0 1rem; - margin-bottom: .5rem; + padding: 0; + margin-top: .65rem; + margin-bottom: .65rem; white-space: pre; background-color: transparent; border: 0; @@ -324,26 +320,3 @@ margin-left: 0; } } - -.bd-example-multiple-langs + .bd-clipboard + .highlight { - margin-bottom: 0; - border-bottom: 0; - @include border-bottom-radius(0); -} -.highlight + .bd-clipboard + .highlight { - @include border-top-radius(0); -} - -[data-lang]::before { - position: absolute; - top: 0; - right: 0; - left: 0; - padding: .5rem 1rem; - @include font-size(.875rem); - color: $gray-700; - text-transform: uppercase; - content: attr(data-lang); - user-select: none; - border-bottom: 1px solid $gray-300; -} -- cgit v1.2.3 From c864852135b17a89bf2f3599212f5a4d3bd273f8 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 9 Apr 2021 07:53:01 +0300 Subject: docs: update clipboard.js to v2.0.8 (#33583) --- site/assets/js/vendor/clipboard.min.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/vendor/clipboard.min.js b/site/assets/js/vendor/clipboard.min.js index 1e6a96f4e..95f55d7b0 100644 --- a/site/assets/js/vendor/clipboard.min.js +++ b/site/assets/js/vendor/clipboard.min.js @@ -1,7 +1,7 @@ /*! - * clipboard.js v2.0.6 + * clipboard.js v2.0.8 * https://clipboardjs.com/ - * + * * Licensed MIT © Zeno Rocha */ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return o={},r.m=n=[function(t,e){t.exports=function(t){var e;if("SELECT"===t.nodeName)t.focus(),e=t.value;else if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName){var n=t.hasAttribute("readonly");n||t.setAttribute("readonly",""),t.select(),t.setSelectionRange(0,t.value.length),n||t.removeAttribute("readonly"),e=t.value}else{t.hasAttribute("contenteditable")&&t.focus();var o=window.getSelection(),r=document.createRange();r.selectNodeContents(t),o.removeAllRanges(),o.addRange(r),e=o.toString()}return e}},function(t,e){function n(){}n.prototype={on:function(t,e,n){var o=this.e||(this.e={});return(o[t]||(o[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){var o=this;function r(){o.off(t,r),e.apply(n,arguments)}return r._=e,this.on(t,r,n)},emit:function(t){for(var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),o=0,r=n.length;o Date: Mon, 19 Apr 2021 07:52:09 +0300 Subject: Update anchor.js to v4.3.1. (#33668) --- site/assets/js/vendor/anchor.min.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/vendor/anchor.min.js b/site/assets/js/vendor/anchor.min.js index 1216eeac2..608fea9f7 100644 --- a/site/assets/js/vendor/anchor.min.js +++ b/site/assets/js/vendor/anchor.min.js @@ -1,9 +1,9 @@ // @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat // -// AnchorJS - v4.3.0 - 2020-10-21 +// AnchorJS - v4.3.1 - 2021-04-17 // https://www.bryanbraun.com/anchorjs/ -// Copyright (c) 2020 Bryan Braun; Licensed MIT +// Copyright (c) 2021 Bryan Braun; Licensed MIT // // @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat -!function(A,e){"use strict";"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():(A.AnchorJS=e(),A.anchors=new A.AnchorJS)}(this,function(){"use strict";return function(A){function d(A){A.icon=Object.prototype.hasOwnProperty.call(A,"icon")?A.icon:"",A.visible=Object.prototype.hasOwnProperty.call(A,"visible")?A.visible:"hover",A.placement=Object.prototype.hasOwnProperty.call(A,"placement")?A.placement:"right",A.ariaLabel=Object.prototype.hasOwnProperty.call(A,"ariaLabel")?A.ariaLabel:"Anchor",A.class=Object.prototype.hasOwnProperty.call(A,"class")?A.class:"",A.base=Object.prototype.hasOwnProperty.call(A,"base")?A.base:"",A.truncate=Object.prototype.hasOwnProperty.call(A,"truncate")?Math.floor(A.truncate):64,A.titleText=Object.prototype.hasOwnProperty.call(A,"titleText")?A.titleText:""}function f(A){var e;if("string"==typeof A||A instanceof String)e=[].slice.call(document.querySelectorAll(A));else{if(!(Array.isArray(A)||A instanceof NodeList))throw new TypeError("The selector provided to AnchorJS was invalid.");e=[].slice.call(A)}return e}this.options=A||{},this.elements=[],d(this.options),this.isTouchDevice=function(){return Boolean("ontouchstart"in window||window.TouchEvent||window.DocumentTouch&&document instanceof DocumentTouch)},this.add=function(A){var e,t,o,n,i,s,a,r,c,l,h,u,p=[];if(d(this.options),"touch"===(h=this.options.visible)&&(h=this.isTouchDevice()?"always":"hover"),0===(e=f(A=A||"h2, h3, h4, h5, h6")).length)return this;for(!function(){if(null!==document.head.querySelector("style.anchorjs"))return;var A,e=document.createElement("style");e.className="anchorjs",e.appendChild(document.createTextNode("")),void 0===(A=document.head.querySelector('[rel="stylesheet"],style'))?document.head.appendChild(e):document.head.insertBefore(e,A);e.sheet.insertRule(".anchorjs-link{opacity:0;text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}",e.sheet.cssRules.length),e.sheet.insertRule(":hover>.anchorjs-link,.anchorjs-link:focus{opacity:1}",e.sheet.cssRules.length),e.sheet.insertRule("[data-anchorjs-icon]::after{content:attr(data-anchorjs-icon)}",e.sheet.cssRules.length),e.sheet.insertRule('@font-face{font-family:anchorjs-icons;src:url(data:n/a;base64,AAEAAAALAIAAAwAwT1MvMg8yG2cAAAE4AAAAYGNtYXDp3gC3AAABpAAAAExnYXNwAAAAEAAAA9wAAAAIZ2x5ZlQCcfwAAAH4AAABCGhlYWQHFvHyAAAAvAAAADZoaGVhBnACFwAAAPQAAAAkaG10eASAADEAAAGYAAAADGxvY2EACACEAAAB8AAAAAhtYXhwAAYAVwAAARgAAAAgbmFtZQGOH9cAAAMAAAAAunBvc3QAAwAAAAADvAAAACAAAQAAAAEAAHzE2p9fDzz1AAkEAAAAAADRecUWAAAAANQA6R8AAAAAAoACwAAAAAgAAgAAAAAAAAABAAADwP/AAAACgAAA/9MCrQABAAAAAAAAAAAAAAAAAAAAAwABAAAAAwBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAMCQAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAg//0DwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAAIAAAACgAAxAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADAAAAAIAAgAAgAAACDpy//9//8AAAAg6cv//f///+EWNwADAAEAAAAAAAAAAAAAAAAACACEAAEAAAAAAAAAAAAAAAAxAAACAAQARAKAAsAAKwBUAAABIiYnJjQ3NzY2MzIWFxYUBwcGIicmNDc3NjQnJiYjIgYHBwYUFxYUBwYGIwciJicmNDc3NjIXFhQHBwYUFxYWMzI2Nzc2NCcmNDc2MhcWFAcHBgYjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAAADACWAAEAAAAAAAEACAAAAAEAAAAAAAIAAwAIAAEAAAAAAAMACAAAAAEAAAAAAAQACAAAAAEAAAAAAAUAAQALAAEAAAAAAAYACAAAAAMAAQQJAAEAEAAMAAMAAQQJAAIABgAcAAMAAQQJAAMAEAAMAAMAAQQJAAQAEAAMAAMAAQQJAAUAAgAiAAMAAQQJAAYAEAAMYW5jaG9yanM0MDBAAGEAbgBjAGgAbwByAGoAcwA0ADAAMABAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAP) format("truetype")}',e.sheet.cssRules.length)}(),t=document.querySelectorAll("[id]"),o=[].map.call(t,function(A){return A.id}),i=0;i\]./()*\\\n\t\b\v\u00A0]/g,"-").replace(/-{2,}/g,"-").substring(0,this.options.truncate).replace(/^-+|-+$/gm,"").toLowerCase()},this.hasAnchorJSLink=function(A){var e=A.firstChild&&-1<(" "+A.firstChild.className+" ").indexOf(" anchorjs-link "),t=A.lastChild&&-1<(" "+A.lastChild.className+" ").indexOf(" anchorjs-link ");return e||t||!1}}}); -// @license-end \ No newline at end of file +!function(A,e){"use strict";"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():(A.AnchorJS=e(),A.anchors=new A.AnchorJS)}(this,function(){"use strict";return function(A){function d(A){A.icon=Object.prototype.hasOwnProperty.call(A,"icon")?A.icon:"",A.visible=Object.prototype.hasOwnProperty.call(A,"visible")?A.visible:"hover",A.placement=Object.prototype.hasOwnProperty.call(A,"placement")?A.placement:"right",A.ariaLabel=Object.prototype.hasOwnProperty.call(A,"ariaLabel")?A.ariaLabel:"Anchor",A.class=Object.prototype.hasOwnProperty.call(A,"class")?A.class:"",A.base=Object.prototype.hasOwnProperty.call(A,"base")?A.base:"",A.truncate=Object.prototype.hasOwnProperty.call(A,"truncate")?Math.floor(A.truncate):64,A.titleText=Object.prototype.hasOwnProperty.call(A,"titleText")?A.titleText:""}function w(A){var e;if("string"==typeof A||A instanceof String)e=[].slice.call(document.querySelectorAll(A));else{if(!(Array.isArray(A)||A instanceof NodeList))throw new TypeError("The selector provided to AnchorJS was invalid.");e=[].slice.call(A)}return e}this.options=A||{},this.elements=[],d(this.options),this.isTouchDevice=function(){return Boolean("ontouchstart"in window||window.TouchEvent||window.DocumentTouch&&document instanceof DocumentTouch)},this.add=function(A){var e,t,o,i,n,s,a,c,r,l,h,u,p=[];if(d(this.options),"touch"===(l=this.options.visible)&&(l=this.isTouchDevice()?"always":"hover"),0===(e=w(A=A||"h2, h3, h4, h5, h6")).length)return this;for(null===document.head.querySelector("style.anchorjs")&&((u=document.createElement("style")).className="anchorjs",u.appendChild(document.createTextNode("")),void 0===(A=document.head.querySelector('[rel="stylesheet"],style'))?document.head.appendChild(u):document.head.insertBefore(u,A),u.sheet.insertRule(".anchorjs-link{opacity:0;text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}",u.sheet.cssRules.length),u.sheet.insertRule(":hover>.anchorjs-link,.anchorjs-link:focus{opacity:1}",u.sheet.cssRules.length),u.sheet.insertRule("[data-anchorjs-icon]::after{content:attr(data-anchorjs-icon)}",u.sheet.cssRules.length),u.sheet.insertRule('@font-face{font-family:anchorjs-icons;src:url(data:n/a;base64,AAEAAAALAIAAAwAwT1MvMg8yG2cAAAE4AAAAYGNtYXDp3gC3AAABpAAAAExnYXNwAAAAEAAAA9wAAAAIZ2x5ZlQCcfwAAAH4AAABCGhlYWQHFvHyAAAAvAAAADZoaGVhBnACFwAAAPQAAAAkaG10eASAADEAAAGYAAAADGxvY2EACACEAAAB8AAAAAhtYXhwAAYAVwAAARgAAAAgbmFtZQGOH9cAAAMAAAAAunBvc3QAAwAAAAADvAAAACAAAQAAAAEAAHzE2p9fDzz1AAkEAAAAAADRecUWAAAAANQA6R8AAAAAAoACwAAAAAgAAgAAAAAAAAABAAADwP/AAAACgAAA/9MCrQABAAAAAAAAAAAAAAAAAAAAAwABAAAAAwBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAMCQAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAg//0DwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAAIAAAACgAAxAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADAAAAAIAAgAAgAAACDpy//9//8AAAAg6cv//f///+EWNwADAAEAAAAAAAAAAAAAAAAACACEAAEAAAAAAAAAAAAAAAAxAAACAAQARAKAAsAAKwBUAAABIiYnJjQ3NzY2MzIWFxYUBwcGIicmNDc3NjQnJiYjIgYHBwYUFxYUBwYGIwciJicmNDc3NjIXFhQHBwYUFxYWMzI2Nzc2NCcmNDc2MhcWFAcHBgYjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAAADACWAAEAAAAAAAEACAAAAAEAAAAAAAIAAwAIAAEAAAAAAAMACAAAAAEAAAAAAAQACAAAAAEAAAAAAAUAAQALAAEAAAAAAAYACAAAAAMAAQQJAAEAEAAMAAMAAQQJAAIABgAcAAMAAQQJAAMAEAAMAAMAAQQJAAQAEAAMAAMAAQQJAAUAAgAiAAMAAQQJAAYAEAAMYW5jaG9yanM0MDBAAGEAbgBjAGgAbwByAGoAcwA0ADAAMABAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAP) format("truetype")}',u.sheet.cssRules.length)),u=document.querySelectorAll("[id]"),t=[].map.call(u,function(A){return A.id}),i=0;i\]./()*\\\n\t\b\v\u00A0]/g,"-").replace(/-{2,}/g,"-").substring(0,this.options.truncate).replace(/^-+|-+$/gm,"").toLowerCase()},this.hasAnchorJSLink=function(A){var e=A.firstChild&&-1<(" "+A.firstChild.className+" ").indexOf(" anchorjs-link "),A=A.lastChild&&-1<(" "+A.lastChild.className+" ").indexOf(" anchorjs-link ");return e||A||!1}}}); +// @license-end -- cgit v1.2.3 From 48ae5a7149d30d7d80cecbaaabaa88f7679c9172 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 5 May 2021 08:24:26 -0700 Subject: Rewrite migration guide (#33834) - De-duplicates bulk of the content for a migration from v4 to v5 - Adds clear breaking labels where appropriate - Leaves room for more guidance around doing the actual migration --- site/assets/scss/_content.scss | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'site/assets') diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index e55a7aa63..cc22ffe11 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -21,6 +21,13 @@ > ul li, > ol li { margin-bottom: .25rem; + + // stylelint-disable selector-max-type + > ul { + margin-top: -.5rem; + margin-bottom: 1rem; + } + // stylelint-enable selector-max-type } // Override Bootstrap defaults -- cgit v1.2.3 From e9da490e510298086e93fe829949a67657443be5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 14 Jun 2021 07:45:13 +0200 Subject: docs(style): fix display of nested `
  • ` (#34223) --- site/assets/scss/_content.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index cc22ffe11..f2b5cfc54 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -22,12 +22,12 @@ > ol li { margin-bottom: .25rem; - // stylelint-disable selector-max-type - > ul { + // stylelint-disable selector-max-type, selector-max-compound-selectors + > p ~ ul { margin-top: -.5rem; margin-bottom: 1rem; } - // stylelint-enable selector-max-type + // stylelint-enable selector-max-type, selector-max-compound-selectors } // Override Bootstrap defaults -- cgit v1.2.3 From be17444756c48e3a892c36507f859cd841bd8c1f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 Jun 2021 09:35:30 -0700 Subject: Replace `/` division with multiplication and custom `divide()` function (#34245) * Convert bulk of division to multiplication * Use custom divide() function instead of Dart Sass math module for greater compatibility * Apply suggestions from code review * Fix functions --- site/assets/scss/_component-examples.scss | 6 +++--- site/assets/scss/_navbar.scss | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 005515922..e831b1609 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -70,7 +70,7 @@ .bd-example { position: relative; padding: 1rem; - margin: 1rem (-$grid-gutter-width / 2) 0; + margin: 1rem (-$grid-gutter-width * .5) 0; border: solid $gray-300; border-width: 1px 0 0; @include clearfix(); @@ -312,8 +312,8 @@ } .bd-content .highlight { - margin-right: (-$grid-gutter-width / 2); - margin-left: (-$grid-gutter-width / 2); + margin-right: (-$grid-gutter-width * .5); + margin-left: (-$grid-gutter-width * .5); @include media-breakpoint-up(sm) { margin-right: 0; diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 4a9b08b36..053cadf2e 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -9,8 +9,8 @@ .navbar-nav { .nav-link { - padding-right: $spacer / 4; - padding-left: $spacer / 4; + padding-right: $spacer * .25; + padding-left: $spacer * .25; color: rgba($white, .85); &:hover, -- cgit v1.2.3 From dd824f2d3eab63790ccbd30d6e5c125b77d82d32 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 22 Jun 2021 19:51:16 -0700 Subject: v5.1: Add optional CSS grid (#31813) --- site/assets/scss/_component-examples.scss | 15 +++++++++++++++ site/assets/scss/docs.scss | 6 ++++++ 2 files changed, 21 insertions(+) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index e831b1609..8fbfc06c5 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -23,6 +23,21 @@ background-color: rgba(255, 0, 0, .1); } +.bd-example-cssgrid { + text-align: center; + + .grid + .grid { + margin-top: 1rem; + } + + .grid > * { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(255, 0, 255, .1); + border: 1px solid rgba(255, 0, 255, .25); + } +} + .bd-highlight { background-color: rgba($bd-purple, .15); border: 1px solid rgba($bd-purple, .15); diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index e3066ed2e..8b7bc99a1 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -28,6 +28,12 @@ @import "../../../scss/variables"; @import "../../../scss/mixins"; +// fusv-disable +$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default +$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default +// fusv-enable +@import "../../../scss/grid"; + // Load docs components @import "variables"; @import "navbar"; -- cgit v1.2.3 From 696996dd4f5b7319413655b9134ca2f3768c2549 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 29 Jun 2021 08:46:25 -0700 Subject: Add dynamic, live alerts example to docs (#33866) --- site/assets/js/application.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 6ff316056..7981d4fcf 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -58,6 +58,22 @@ }) } + var alertPlaceholder = document.getElementById('liveAlertPlaceholder') + var alertTrigger = document.getElementById('liveAlertBtn') + + function alert(message, type) { + var wrapper = document.createElement('div') + wrapper.innerHTML = '' + + alertPlaceholder.append(wrapper) + } + + if (alertTrigger) { + alertTrigger.addEventListener('click', function () { + alert('Nice, you triggered this alert message!', 'success') + }) + } + // Demos within modals document.querySelectorAll('.tooltip-test') .forEach(function (tooltip) { -- cgit v1.2.3 From 39b7c75b13dd982e1a4f106f412ff18acc0026ec Mon Sep 17 00:00:00 2001 From: Jaume Sala Date: Tue, 3 Aug 2021 17:59:00 +0200 Subject: Add new placeholder component (#31859) Co-authored-by: XhmikosR Co-authored-by: Jaume Sala Co-authored-by: Mark Otto Co-authored-by: Patrick H. Lauke --- site/assets/scss/_component-examples.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 8fbfc06c5..f93f1ee98 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -292,6 +292,17 @@ } } +// Placeholders +.bd-example-placeholder-cards { + &::after { + display: none; + } + + .card { + width: 18rem; + } +} + // Toasts .bd-example-toasts { min-height: 240px; -- cgit v1.2.3