diff --git a/scss/_icons.scss b/scss/_icons.scss new file mode 100644 index 000000000000..d6d7519246e1 --- /dev/null +++ b/scss/_icons.scss @@ -0,0 +1,13 @@ +.bi { + display: inline-block; + vertical-align: text-top; + fill: currentColor; +} + +.bi-light path { + stroke-width: 1px; +} + +.bi-bold path { + stroke-width: 3px; +} diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 6ff66a022681..263829586c5e 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -157,7 +157,6 @@ address { ol, ul { - padding-right: 2rem; padding-left: 2rem; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 31fba8946be6..ffcef191f326 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1070,10 +1070,10 @@ $carousel-indicator-transition: opacity .6s ease !default; $carousel-caption-width: 70% !default; $carousel-caption-color: $white !default; -$carousel-control-icon-width: 20px !default; +$carousel-control-icon-width: 32px !default; -$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; -$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; $carousel-transition-duration: .6s !default; $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index df1d49e2ad5e..20633eaa5ca4 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -43,6 +43,7 @@ @import "popover"; @import "carousel"; @import "spinners"; +@import "icons"; // Helpers diff --git a/site/content/docs/4.3/components/alerts.md b/site/content/docs/4.3/components/alerts.md index be1bf150404b..2f00b3759327 100644 --- a/site/content/docs/4.3/components/alerts.md +++ b/site/content/docs/4.3/components/alerts.md @@ -107,7 +107,7 @@ var bsAlert = new bootstrap.Alert(myAlert) This makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) - +
@@ -152,7 +152,7 @@ alert.close() Bootstrap's alert plugin exposes a few events for hooking into alert functionality. -
Method
+
diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md index 1839622e3792..991dec7457dd 100644 --- a/site/content/docs/4.3/components/buttons.md +++ b/site/content/docs/4.3/components/buttons.md @@ -159,7 +159,7 @@ var button = document.getElementById('myButton') var bsButton = new bootstrap.Button(button) {{< /highlight >}} -
Event
+
diff --git a/site/content/docs/4.3/components/dropdowns.md b/site/content/docs/4.3/components/dropdowns.md index 3669f4d1c3e1..8f4e914c719c 100644 --- a/site/content/docs/4.3/components/dropdowns.md +++ b/site/content/docs/4.3/components/dropdowns.md @@ -862,7 +862,7 @@ Note when `boundary` is set to any value other than `'scrollParent'`, the style ### Methods -
Method
+
@@ -914,7 +914,7 @@ Note when `boundary` is set to any value other than `'scrollParent'`, the style All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element. `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event. -
Method
+
diff --git a/site/content/docs/4.3/components/icons.md b/site/content/docs/4.3/components/icons.md index 8790dbadba9f..bc6294323c6e 100644 --- a/site/content/docs/4.3/components/icons.md +++ b/site/content/docs/4.3/components/icons.md @@ -1,21 +1,133 @@ --- layout: docs title: Icons -description: Custom icons for Bootstrap components. +description: For the first time ever, Bootstrap features its own icon library, custom designed and built for our components and documentation. group: components toc: true --- -
- - - - - - - - - - - +## Bootstrap icons + +Meet the Bootstrap icons, a limited set of icons designed first and foremost to work with Bootstrap's components. From form controls to navigation, these icons are the perfect complement to our toolkit. They're SVGs, so they'll scale quickly and easily to any size, they can be easily recolored with CSS, and more. They're also included in Bootstrap under the MIT license. + +
+ {{< listIcons.inline >}} + {{- $dirName := printf "site/content/docs/%s/icons/" .Site.Params.docs_version -}} + + {{- range (readDir $dirName) -}} + {{- $filenameWithExt := split .Name "." -}} + {{- $filename := index $filenameWithExt 0 -}} + {{- $name := humanize $filename -}} +
+ {{ readFile (printf "%s%s" $dirName .Name) }} +
+ {{ end -}} + {{< /listIcons.inline >}} +
+ +
Method
+ + + + + + + + + {{< listIcons.inline >}} + {{- $dirName := printf "site/content/docs/%s/icons/" .Site.Params.docs_version -}} + + {{- range (readDir $dirName) -}} + {{- $filenameWithExt := split .Name "." -}} + {{- $filename := index $filenameWithExt 0 -}} + {{- $name := humanize $filename -}} + + + + + + {{ end -}} + {{< /listIcons.inline >}} + +
NameIconClass
{{ $name }}{{ readFile (printf "%s%s" $dirName .Name) }} + .bi-{{ $filename }} +
+ +## How to use + +Bootstrap icons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup. + +### Embedded + +For example, you can use the SVG as HTML (remember to specify a `width` and `height`). + +{{< example >}} + +{{< /example >}} + +### External image + +Copy the Bootstrap icons SVGs to your directory of choice and reference them like normal images with the `` element. + +{{< highlight html >}} + +{{< /highlight >}} + +### CSS + +You can also use the SVG within your CSS (**be sure to escape any characters**, such as `#` to `%23` when specifying hex color values): + +{{< highlight css >}} +.bi::before { + display: inline-block; + content: ""; + background-image: url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-size: 1rem 1rem; +} +{{< /highlight >}} + +### Customizing + +Depending on the icon, you may add `.bi-light` (`1px`) or `.bi-bold` (`3px`) to make an icon's `stoke-width` lighter or bold. Most Bootstrap icons have a `2px` stroke. + +{{< example >}} + + + + + +{{< /example >}} + +Color can be changed by setting a `.text-*` class or custom CSS: + +{{< example >}} +
+
+{{< /example >}} + +## Additional libraries + +Need or want something else? Check out these recommended icon libraries. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support. + +### Preferred + +We've tested and used these icon sets ourselves. + +- [Font Awesome](https://fontawesome.com/) +- [Feather](https://feathericons.com/) +- [Octicons](https://octicons.github.com/) + +### More options + +While we haven't tried these out, they do look promising and provide multiple formats—including SVG. + +- [Bytesize](https://github.com/danklammer/bytesize-icons) +- [Google Material icons](https://material.io/tools/icons/) +- [Ionicons](https://ionicons.com/) +- [Dripicons](http://demo.amitjakhu.com/dripicons/) +- [Ikons](http://ikons.piotrkwiatkowski.co.uk/) +- [Glyph](https://glyph.smarticons.co/) +- [Icons8](https://icons8.com/) +- [icofont](https://icofont.com/) diff --git a/site/content/docs/4.3/content/reboot.md b/site/content/docs/4.3/content/reboot.md index fd7dcbd1eadb..7180992ae3e1 100644 --- a/site/content/docs/4.3/content/reboot.md +++ b/site/content/docs/4.3/content/reboot.md @@ -53,7 +53,7 @@ This `font-family` is applied to the `` and automatically inherited global All heading elements—e.g., `

`—and `

` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing. - +
@@ -102,7 +102,7 @@ All heading elements—e.g., `

`—and `

` are reset to have their `margin- ## Lists -All lists—`

    `, `
      `, and `
      `—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the horizontal `padding` on `
        ` and `
          ` elements. +All lists—`
            `, `
              `, and `
              `—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `
                ` and `
                  ` elements.
                  {{< markdown >}} diff --git a/site/content/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md index ad318dd1e5fc..201cf9381a8e 100644 --- a/site/content/docs/4.3/content/typography.md +++ b/site/content/docs/4.3/content/typography.md @@ -22,7 +22,7 @@ These styles can be found within `_reboot.scss`, and the global variables are de All HTML headings, `

                  ` through `

                  `, are available. -

Heading
+
diff --git a/site/content/docs/4.3/extend/icons.md b/site/content/docs/4.3/extend/icons.md deleted file mode 100644 index b950ad17907e..000000000000 --- a/site/content/docs/4.3/extend/icons.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -layout: docs -title: Icons -description: Guidance and suggestions for using external icon libraries with Bootstrap. -group: extend ---- - -Bootstrap doesn't include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support. - -## Preferred - -We've tested and used these icon sets ourselves. - -- [Font Awesome](https://fontawesome.com/) -- [Feather](https://feathericons.com/) -- [Octicons](https://octicons.github.com/) - -## More options - -While we haven't tried these out, they do look promising and provide multiple formats—including SVG. - -- [Bytesize](https://github.com/danklammer/bytesize-icons) -- [Google Material icons](https://material.io/tools/icons/) -- [Ionicons](https://ionicons.com/) -- [Dripicons](http://demo.amitjakhu.com/dripicons/) -- [Ikons](http://ikons.piotrkwiatkowski.co.uk/) -- [Glyph](https://glyph.smarticons.co/) -- [Icons8](https://icons8.com/) -- [icofont](https://icofont.com/) diff --git a/site/content/docs/4.3/extend/approach.md b/site/content/docs/4.3/getting-started/approach.md similarity index 99% rename from site/content/docs/4.3/extend/approach.md rename to site/content/docs/4.3/getting-started/approach.md index 2ba15ef182c8..bdc7cb8a9087 100644 --- a/site/content/docs/4.3/extend/approach.md +++ b/site/content/docs/4.3/getting-started/approach.md @@ -2,7 +2,7 @@ layout: docs title: Approach description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself. -group: extend +group: getting-started aliases: - "/docs/4.3/extend/" --- diff --git a/site/content/docs/4.3/icons/arrow-down.svg b/site/content/docs/4.3/icons/arrow-down.svg new file mode 100644 index 000000000000..1202e4c99bc3 --- /dev/null +++ b/site/content/docs/4.3/icons/arrow-down.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/arrow-left.svg b/site/content/docs/4.3/icons/arrow-left.svg new file mode 100644 index 000000000000..ad94bb12fd6d --- /dev/null +++ b/site/content/docs/4.3/icons/arrow-left.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/arrow-right.svg b/site/content/docs/4.3/icons/arrow-right.svg new file mode 100644 index 000000000000..2f7e7b30158d --- /dev/null +++ b/site/content/docs/4.3/icons/arrow-right.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/arrow-up.svg b/site/content/docs/4.3/icons/arrow-up.svg new file mode 100644 index 000000000000..40b61d774130 --- /dev/null +++ b/site/content/docs/4.3/icons/arrow-up.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/bold.svg b/site/content/docs/4.3/icons/bold.svg new file mode 100644 index 000000000000..a972a4e70ef1 --- /dev/null +++ b/site/content/docs/4.3/icons/bold.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/bookmark-fill.svg b/site/content/docs/4.3/icons/bookmark-fill.svg new file mode 100644 index 000000000000..9b5d07a7a3d6 --- /dev/null +++ b/site/content/docs/4.3/icons/bookmark-fill.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/bookmark.svg b/site/content/docs/4.3/icons/bookmark.svg new file mode 100644 index 000000000000..e21b42a6534f --- /dev/null +++ b/site/content/docs/4.3/icons/bookmark.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/bootstrap-fill.svg b/site/content/docs/4.3/icons/bootstrap-fill.svg new file mode 100644 index 000000000000..840a42f5e437 --- /dev/null +++ b/site/content/docs/4.3/icons/bootstrap-fill.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/bootstrap.svg b/site/content/docs/4.3/icons/bootstrap.svg new file mode 100644 index 000000000000..681268113e78 --- /dev/null +++ b/site/content/docs/4.3/icons/bootstrap.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/calendar.svg b/site/content/docs/4.3/icons/calendar.svg new file mode 100644 index 000000000000..86b57528b9be --- /dev/null +++ b/site/content/docs/4.3/icons/calendar.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/check.svg b/site/content/docs/4.3/icons/check.svg new file mode 100644 index 000000000000..cc6a4d670a05 --- /dev/null +++ b/site/content/docs/4.3/icons/check.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/chevron-condensed-left.svg b/site/content/docs/4.3/icons/chevron-condensed-left.svg new file mode 100644 index 000000000000..f67e92852d94 --- /dev/null +++ b/site/content/docs/4.3/icons/chevron-condensed-left.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/chevron-condensed-right.svg b/site/content/docs/4.3/icons/chevron-condensed-right.svg new file mode 100644 index 000000000000..c3081366115e --- /dev/null +++ b/site/content/docs/4.3/icons/chevron-condensed-right.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/chevron-down.svg b/site/content/docs/4.3/icons/chevron-down.svg new file mode 100644 index 000000000000..46efc700de02 --- /dev/null +++ b/site/content/docs/4.3/icons/chevron-down.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/chevron-left.svg b/site/content/docs/4.3/icons/chevron-left.svg new file mode 100644 index 000000000000..dc25e06eeea1 --- /dev/null +++ b/site/content/docs/4.3/icons/chevron-left.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/chevron-right.svg b/site/content/docs/4.3/icons/chevron-right.svg new file mode 100644 index 000000000000..8ddff56c5962 --- /dev/null +++ b/site/content/docs/4.3/icons/chevron-right.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/chevron-up.svg b/site/content/docs/4.3/icons/chevron-up.svg new file mode 100644 index 000000000000..dfbc12ff127a --- /dev/null +++ b/site/content/docs/4.3/icons/chevron-up.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/circle.svg b/site/content/docs/4.3/icons/circle.svg new file mode 100644 index 000000000000..4c14c0e674c8 --- /dev/null +++ b/site/content/docs/4.3/icons/circle.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/code.svg b/site/content/docs/4.3/icons/code.svg new file mode 100644 index 000000000000..851d19084f7d --- /dev/null +++ b/site/content/docs/4.3/icons/code.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/credit-card.svg b/site/content/docs/4.3/icons/credit-card.svg new file mode 100644 index 000000000000..9209d62c554b --- /dev/null +++ b/site/content/docs/4.3/icons/credit-card.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/dash.svg b/site/content/docs/4.3/icons/dash.svg new file mode 100644 index 000000000000..00dd42e98917 --- /dev/null +++ b/site/content/docs/4.3/icons/dash.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/diff.svg b/site/content/docs/4.3/icons/diff.svg new file mode 100644 index 000000000000..1b357bdaf2af --- /dev/null +++ b/site/content/docs/4.3/icons/diff.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/display.svg b/site/content/docs/4.3/icons/display.svg new file mode 100644 index 000000000000..646d65155d21 --- /dev/null +++ b/site/content/docs/4.3/icons/display.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/dot.svg b/site/content/docs/4.3/icons/dot.svg new file mode 100644 index 000000000000..f673c3cec259 --- /dev/null +++ b/site/content/docs/4.3/icons/dot.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/ellipsis.svg b/site/content/docs/4.3/icons/ellipsis.svg new file mode 100644 index 000000000000..c3175403b1c1 --- /dev/null +++ b/site/content/docs/4.3/icons/ellipsis.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/envelope.svg b/site/content/docs/4.3/icons/envelope.svg new file mode 100644 index 000000000000..16b5ba6bd1d6 --- /dev/null +++ b/site/content/docs/4.3/icons/envelope.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/fullscreen.svg b/site/content/docs/4.3/icons/fullscreen.svg new file mode 100644 index 000000000000..8225694f982e --- /dev/null +++ b/site/content/docs/4.3/icons/fullscreen.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/heart-filled.svg b/site/content/docs/4.3/icons/heart-filled.svg new file mode 100644 index 000000000000..b0988e4cc8dc --- /dev/null +++ b/site/content/docs/4.3/icons/heart-filled.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/heart-outline.svg b/site/content/docs/4.3/icons/heart-outline.svg new file mode 100644 index 000000000000..6cbacca90eb5 --- /dev/null +++ b/site/content/docs/4.3/icons/heart-outline.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/image.svg b/site/content/docs/4.3/icons/image.svg new file mode 100644 index 000000000000..740c0865a89b --- /dev/null +++ b/site/content/docs/4.3/icons/image.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/italic.svg b/site/content/docs/4.3/icons/italic.svg new file mode 100644 index 000000000000..af51acb10149 --- /dev/null +++ b/site/content/docs/4.3/icons/italic.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/justify-left.svg b/site/content/docs/4.3/icons/justify-left.svg new file mode 100644 index 000000000000..6e1ce7b12b15 --- /dev/null +++ b/site/content/docs/4.3/icons/justify-left.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/justify-right.svg b/site/content/docs/4.3/icons/justify-right.svg new file mode 100644 index 000000000000..8cf531172946 --- /dev/null +++ b/site/content/docs/4.3/icons/justify-right.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/justify.svg b/site/content/docs/4.3/icons/justify.svg new file mode 100644 index 000000000000..7898d9d8b401 --- /dev/null +++ b/site/content/docs/4.3/icons/justify.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/list-numbered.svg b/site/content/docs/4.3/icons/list-numbered.svg new file mode 100644 index 000000000000..308e99cbcd47 --- /dev/null +++ b/site/content/docs/4.3/icons/list-numbered.svg @@ -0,0 +1 @@ +321 diff --git a/site/content/docs/4.3/icons/list-unordered.svg b/site/content/docs/4.3/icons/list-unordered.svg new file mode 100644 index 000000000000..528672c8207d --- /dev/null +++ b/site/content/docs/4.3/icons/list-unordered.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/list.svg b/site/content/docs/4.3/icons/list.svg new file mode 100644 index 000000000000..d7f279eb2872 --- /dev/null +++ b/site/content/docs/4.3/icons/list.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/move.svg b/site/content/docs/4.3/icons/move.svg new file mode 100644 index 000000000000..f4d5c4b839a9 --- /dev/null +++ b/site/content/docs/4.3/icons/move.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/people.svg b/site/content/docs/4.3/icons/people.svg new file mode 100644 index 000000000000..c6f5cc29a76b --- /dev/null +++ b/site/content/docs/4.3/icons/people.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/person.svg b/site/content/docs/4.3/icons/person.svg new file mode 100644 index 000000000000..429a8f56fb96 --- /dev/null +++ b/site/content/docs/4.3/icons/person.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/plus.svg b/site/content/docs/4.3/icons/plus.svg new file mode 100644 index 000000000000..c51531ed2fe9 --- /dev/null +++ b/site/content/docs/4.3/icons/plus.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/reboot.svg b/site/content/docs/4.3/icons/reboot.svg new file mode 100644 index 000000000000..9beeab050fb2 --- /dev/null +++ b/site/content/docs/4.3/icons/reboot.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/resize.svg b/site/content/docs/4.3/icons/resize.svg new file mode 100644 index 000000000000..3f97228c7a9f --- /dev/null +++ b/site/content/docs/4.3/icons/resize.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/search.svg b/site/content/docs/4.3/icons/search.svg new file mode 100644 index 000000000000..0762f376a735 --- /dev/null +++ b/site/content/docs/4.3/icons/search.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/star-filled.svg b/site/content/docs/4.3/icons/star-filled.svg new file mode 100644 index 000000000000..ccff230961d0 --- /dev/null +++ b/site/content/docs/4.3/icons/star-filled.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/star-outline.svg b/site/content/docs/4.3/icons/star-outline.svg new file mode 100644 index 000000000000..636b93d6d683 --- /dev/null +++ b/site/content/docs/4.3/icons/star-outline.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/terminal-fill.svg b/site/content/docs/4.3/icons/terminal-fill.svg new file mode 100644 index 000000000000..f01492cc103f --- /dev/null +++ b/site/content/docs/4.3/icons/terminal-fill.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/terminal.svg b/site/content/docs/4.3/icons/terminal.svg new file mode 100644 index 000000000000..040f4ba77b3f --- /dev/null +++ b/site/content/docs/4.3/icons/terminal.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/text-center.svg b/site/content/docs/4.3/icons/text-center.svg new file mode 100644 index 000000000000..a267c0c648e6 --- /dev/null +++ b/site/content/docs/4.3/icons/text-center.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/text-indent.svg b/site/content/docs/4.3/icons/text-indent.svg new file mode 100644 index 000000000000..b4688d6fcbfd --- /dev/null +++ b/site/content/docs/4.3/icons/text-indent.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/text-left.svg b/site/content/docs/4.3/icons/text-left.svg new file mode 100644 index 000000000000..645eaf01c3ea --- /dev/null +++ b/site/content/docs/4.3/icons/text-left.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/text-right.svg b/site/content/docs/4.3/icons/text-right.svg new file mode 100644 index 000000000000..b77346a2a515 --- /dev/null +++ b/site/content/docs/4.3/icons/text-right.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/tv.svg b/site/content/docs/4.3/icons/tv.svg new file mode 100644 index 000000000000..e7b5377e755e --- /dev/null +++ b/site/content/docs/4.3/icons/tv.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/type.svg b/site/content/docs/4.3/icons/type.svg new file mode 100644 index 000000000000..3ad7c6258967 --- /dev/null +++ b/site/content/docs/4.3/icons/type.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/underline.svg b/site/content/docs/4.3/icons/underline.svg new file mode 100644 index 000000000000..a18b26cca7e2 --- /dev/null +++ b/site/content/docs/4.3/icons/underline.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/warning.svg b/site/content/docs/4.3/icons/warning.svg new file mode 100644 index 000000000000..26865da676aa --- /dev/null +++ b/site/content/docs/4.3/icons/warning.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/wifi.svg b/site/content/docs/4.3/icons/wifi.svg new file mode 100644 index 000000000000..faa80cfa2851 --- /dev/null +++ b/site/content/docs/4.3/icons/wifi.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/icons/x.svg b/site/content/docs/4.3/icons/x.svg new file mode 100644 index 000000000000..84d4e88bfdb1 --- /dev/null +++ b/site/content/docs/4.3/icons/x.svg @@ -0,0 +1 @@ + diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index c0a3cbe1b7d5..bae7c6a5167f 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -53,7 +53,8 @@ Changes to any layout tools and our grid system. Changes to Reboot, typography, tables, and more. - **Todo:** Make RFS enabled by default -- Reset default horizontal `padding` on `
Heading
+
diff --git a/site/data/nav.yml b/site/data/nav.yml index 4431073a4c84..84f834d380d6 100644 --- a/site/data/nav.yml +++ b/site/data/nav.yml @@ -10,6 +10,7 @@ # - title: Best practices # TODO: Write this content - title: Webpack - title: Accessibility + - title: Approach - title: Layout pages: @@ -91,11 +92,6 @@ - title: Vertical align - title: Visibility -- title: Extend - pages: - - title: Approach - - title: Icons - - title: About pages: - title: Overview diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 9bde5246ac8d..57dde4089573 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -7,24 +7,9 @@ {{ partial "skippy" . }} {{ partial "docs-navbar" . }} + {{ partial "docs-subnav" . }} - - -
+
{{ partial "docs-sidebar" . }} diff --git a/site/layouts/_default/home.html b/site/layouts/_default/home.html index c03de11abbed..c2b531b49b5d 100644 --- a/site/layouts/_default/home.html +++ b/site/layouts/_default/home.html @@ -7,6 +7,7 @@ {{ partial "skippy" . }} {{ partial "docs-navbar" . }} + {{ partial "docs-subnav" . }} {{ partial "home/masthead" . }} {{ partial "home/masthead-followup" . }} diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index b8caae6dd836..dbd9c01fb106 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -7,21 +7,7 @@ {{ partial "skippy" . }} {{ partial "docs-navbar" . }} - - + {{ partial "docs-subnav" . }}
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index ced87b9955ba..52bbd4051757 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -1,10 +1,10 @@ -
-
+
+
{{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }} -
+
  • Home diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html index d661bf725bce..94b73094de40 100644 --- a/site/layouts/partials/docs-sidebar.html +++ b/site/layouts/partials/docs-sidebar.html @@ -21,7 +21,7 @@ {{- if $group.pages }} -
      +
        {{- range $doc := $group.pages -}} {{- $doc_slug := $doc.title | urlize }} diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html new file mode 100644 index 000000000000..34aefb43b461 --- /dev/null +++ b/site/layouts/partials/docs-subnav.html @@ -0,0 +1,32 @@ + diff --git a/site/static/docs/4.3/assets/scss/_component-examples.scss b/site/static/docs/4.3/assets/scss/_component-examples.scss index 8b7a3bab85fc..e5d9a163fabf 100644 --- a/site/static/docs/4.3/assets/scss/_component-examples.scss +++ b/site/static/docs/4.3/assets/scss/_component-examples.scss @@ -342,3 +342,13 @@ color: $gray-900; // Effectively the base text color } } + +.bd-bi-table svg { + width: 24px; + height: 24px; +} + +.bd-bi-grid svg { + width: 32px; + height: 32px; +} diff --git a/site/static/docs/4.3/assets/scss/_nav.scss b/site/static/docs/4.3/assets/scss/_nav.scss index 4f1f61f1b19c..3e95a6ea1986 100644 --- a/site/static/docs/4.3/assets/scss/_nav.scss +++ b/site/static/docs/4.3/assets/scss/_nav.scss @@ -7,7 +7,7 @@ backdrop-filter: blur(1rem); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15); - .booticon { + .bi { opacity: .25; } @@ -34,7 +34,8 @@ font-weight: 500; color: $dark; - &:hover { + &:hover, + &:focus { color: $blue; text-decoration: none; } @@ -45,11 +46,8 @@ background-color: $bd-purple-bright; @include media-breakpoint-down(md) { - padding-right: .5rem; - padding-left: .5rem; - .navbar-nav-scroll { - max-width: 100%; + width: 100%; height: 2.5rem; margin-top: .25rem; overflow: hidden; @@ -67,10 +65,11 @@ .nav-link { padding-right: .5rem; padding-left: .5rem; - color: $bd-purple-light; + color: rgba(255, 255, 255, .75); &.active, - &:hover { + &:hover, + &:focus { color: $white; background-color: transparent; } diff --git a/site/static/docs/4.3/assets/scss/_sidebar.scss b/site/static/docs/4.3/assets/scss/_sidebar.scss index 43232e9aa414..590464c12b28 100644 --- a/site/static/docs/4.3/assets/scss/_sidebar.scss +++ b/site/static/docs/4.3/assets/scss/_sidebar.scss @@ -22,6 +22,10 @@ .bd-search { position: relative; // To contain the Algolia search + @include media-breakpoint-down(md) { + width: 100%; + } + .form-control:focus { border-color: $bd-purple-bright; box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); @@ -45,7 +49,8 @@ > * { pointer-events: none; } - &:hover { + &:hover, + &:focus { color: rgba(0, 0, 0, .85); text-decoration: none; background-color: rgba($bd-purple-bright, .1); @@ -91,7 +96,8 @@ color: rgba(0, 0, 0, .65); @include border-radius(.25rem); - &:hover { + &:hover, + &:focus { color: rgba(0, 0, 0, .85); text-decoration: none; background-color: rgba($bd-purple-bright, .1); @@ -99,7 +105,8 @@ } > .active > a, - > .active:hover > a { + > .active:hover > a, + > .active:focus > a { font-weight: 600; color: rgba(0, 0, 0, .85); } diff --git a/site/static/docs/4.3/assets/scss/_variables.scss b/site/static/docs/4.3/assets/scss/_variables.scss index e8bf3728db1d..5637186440bd 100644 --- a/site/static/docs/4.3/assets/scss/_variables.scss +++ b/site/static/docs/4.3/assets/scss/_variables.scss @@ -1,6 +1,6 @@ // Local docs variables $bd-purple: #563d7c !default; -$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%) !default; +$bd-purple-bright: lighten(saturate($bd-purple, 5%), 10%) !default; $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%) !default; $bd-dark: #2a2730 !default; $bd-download: #ffe484 !default; diff --git a/site/static/docs/4.3/assets/scss/docs.scss b/site/static/docs/4.3/assets/scss/docs.scss index 382746e0defd..1106e9a66689 100644 --- a/site/static/docs/4.3/assets/scss/docs.scss +++ b/site/static/docs/4.3/assets/scss/docs.scss @@ -51,17 +51,3 @@ @import "syntax"; @import "anchor"; @import "algolia"; - -// Temp -.booticons-list { - .booticon { - display: inline; - width: 4rem; - padding: 1rem; - margin-right: 1rem; - margin-bottom: 1rem; - background-color: #fff; - border: 1px solid rgba(0, 0, 0, .1); - @include border-radius(.25rem); - } -}
Screen size