diff options
| -rw-r--r-- | site/assets/scss/_component-examples.scss | 12 | ||||
| -rw-r--r-- | site/assets/scss/docs.scss | 17 | ||||
| -rw-r--r-- | site/content/docs/5.1/extend/snippets.md | 74 |
3 files changed, 95 insertions, 8 deletions
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index f93f1ee989..8a7d253ec3 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -276,13 +276,13 @@ .position-relative { height: 200px; background-color: #f5f5f5; - } - .position-absolute { - width: 2em; - height: 2em; - background-color: $dark; - @include border-radius(); + [class^="position-"] { + width: 2em; + height: 2em; + background-color: $dark; + @include border-radius(); + } } } diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 6fad4a1fed..f0245930c2 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -27,6 +27,8 @@ @import "../../../scss/functions"; @import "../../../scss/variables"; @import "../../../scss/mixins"; +@import "../../../scss/maps"; +@import "../../../scss/utilities"; // fusv-disable $enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default @@ -59,3 +61,18 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default @import "syntax"; @import "anchor"; @import "algolia"; + +// stylelint-disable scss/dollar-variable-default +$utilities: map-merge( + $utilities, + ( + "position": map-merge( + map-get($utilities, "position"), + ( + responsive: true + ), + ), + ) +); + +@import "../../../scss/utilities/api"; diff --git a/site/content/docs/5.1/extend/snippets.md b/site/content/docs/5.1/extend/snippets.md index df642505ea..c35726c008 100644 --- a/site/content/docs/5.1/extend/snippets.md +++ b/site/content/docs/5.1/extend/snippets.md @@ -3,6 +3,7 @@ layout: docs title: Snippets description: Extend Bootstrap with some common snippets of source code not included in the main project. group: extend +toc: true --- ## Components @@ -47,5 +48,74 @@ group: extend ## Utilities -- Opacity -- Expanded widths/heights +### Responsive position + +```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/utilities"; +@import "bootstrap/scss/utilities/api"; + +$utilities: map-merge( + $utilities, + ( + "position": map-merge( + map-get($utilities, "position"), + ( + responsive: true + ), + ), + ) +); +``` + +### Responsive width + +```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/utilities"; +@import "bootstrap/scss/utilities/api"; + +$utilities: map-merge( + $utilities, + ( + "width": map-merge( + map-get($utilities, "width"), + ( + responsive: true + ), + ), + ) +); +``` + +### Additional height + +```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/utilities"; +@import "bootstrap/scss/utilities/api"; + +$utilities: map-merge( + $utilities, + ( + "height": map-merge( + map-get($utilities, "height"), + ( + values: map-merge( + map-get(map-get($utilities, "height"), "values"), + (10: 10%), + ), + ), + ), + ) +); +``` |