2015-04-16 23:57:49 +02:00
|
|
|
//
|
|
|
|
// Docs examples
|
|
|
|
//
|
|
|
|
|
2022-04-19 05:56:18 +02:00
|
|
|
.bd-example-snippet {
|
|
|
|
border: solid $border-color;
|
|
|
|
border-width: 1px 0;
|
|
|
|
|
|
|
|
@include media-breakpoint-up(md) {
|
|
|
|
border-width: 1px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-04-16 23:57:49 +02:00
|
|
|
.bd-example {
|
2022-04-19 20:21:43 +02:00
|
|
|
--bd-example-padding: 1rem;
|
|
|
|
|
2015-04-16 23:57:49 +02:00
|
|
|
position: relative;
|
2022-04-19 20:21:43 +02:00
|
|
|
padding: var(--bd-example-padding);
|
2022-04-19 06:41:58 +02:00
|
|
|
margin: 0 ($bd-gutter-x * -.5);
|
|
|
|
border: solid $border-color;
|
2022-04-19 20:21:43 +02:00
|
|
|
border-width: 1px 0;
|
2015-04-16 23:57:49 +02:00
|
|
|
@include clearfix();
|
|
|
|
|
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
|
|
|
@include media-breakpoint-up(md) {
|
2022-04-19 20:21:43 +02:00
|
|
|
--bd-example-padding: 1.5rem;
|
|
|
|
|
2022-04-19 06:41:58 +02:00
|
|
|
margin-right: 0;
|
|
|
|
margin-left: 0;
|
|
|
|
border-width: 1px;
|
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
|
|
|
@include border-top-radius(var(--bs-border-radius));
|
2015-04-23 10:30:55 +02:00
|
|
|
}
|
|
|
|
|
2022-04-19 06:41:58 +02:00
|
|
|
+ .bd-code-snippet {
|
|
|
|
@include border-top-radius(0);
|
|
|
|
border: solid $border-color;
|
|
|
|
border-width: 0 1px 1px;
|
|
|
|
}
|
|
|
|
|
2015-04-16 23:57:49 +02:00
|
|
|
+ p {
|
|
|
|
margin-top: 2rem;
|
|
|
|
}
|
|
|
|
|
2015-08-18 08:44:17 +02:00
|
|
|
> .form-control {
|
|
|
|
+ .form-control {
|
|
|
|
margin-top: .5rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-04-16 23:57:49 +02:00
|
|
|
> .nav + .nav,
|
|
|
|
> .alert + .alert,
|
2015-04-19 03:12:10 +02:00
|
|
|
> .navbar + .navbar,
|
2019-06-06 08:04:48 +02:00
|
|
|
> .progress + .progress {
|
2022-04-19 20:21:43 +02:00
|
|
|
margin-top: $spacer;
|
2015-04-16 23:57:49 +02:00
|
|
|
}
|
|
|
|
|
2019-06-06 08:04:48 +02:00
|
|
|
> .dropdown-menu {
|
2015-04-16 23:57:49 +02:00
|
|
|
position: static;
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
2022-02-25 01:49:10 +01:00
|
|
|
> :last-child {
|
2020-03-04 13:32:45 +01:00
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
|
2022-02-25 01:49:10 +01:00
|
|
|
> hr:last-child {
|
|
|
|
margin-bottom: $spacer;
|
|
|
|
}
|
|
|
|
|
2020-03-04 13:32:45 +01:00
|
|
|
// Images
|
2018-11-08 18:33:02 +01:00
|
|
|
> svg + svg,
|
|
|
|
> img + img {
|
2015-04-16 23:57:49 +02:00
|
|
|
margin-left: .5rem;
|
|
|
|
}
|
|
|
|
|
2020-03-04 13:32:45 +01:00
|
|
|
// Buttons
|
2019-01-13 20:23:55 +01:00
|
|
|
> .btn,
|
2017-10-22 23:17:28 +02:00
|
|
|
> .btn-group {
|
2020-09-14 04:07:04 +02:00
|
|
|
margin: .25rem .125rem;
|
2017-10-22 23:17:28 +02:00
|
|
|
}
|
|
|
|
> .btn-toolbar + .btn-toolbar {
|
|
|
|
margin-top: .5rem;
|
|
|
|
}
|
2015-04-16 23:57:49 +02:00
|
|
|
|
2020-03-04 13:32:45 +01:00
|
|
|
// List groups
|
|
|
|
> .list-group {
|
|
|
|
max-width: 400px;
|
|
|
|
}
|
2019-08-30 22:32:12 +02:00
|
|
|
|
2020-03-04 13:32:45 +01:00
|
|
|
> [class*="list-group-horizontal"] {
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
2015-04-16 23:57:49 +02:00
|
|
|
|
2020-03-04 13:32:45 +01:00
|
|
|
// Navbars
|
2017-01-02 20:48:51 +01:00
|
|
|
.fixed-top,
|
|
|
|
.sticky-top {
|
2015-08-18 10:18:21 +02:00
|
|
|
position: static;
|
2022-04-19 20:21:43 +02:00
|
|
|
margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
|
2015-08-18 10:18:21 +02:00
|
|
|
}
|
2019-08-30 22:32:12 +02:00
|
|
|
|
2021-12-16 09:27:00 +01:00
|
|
|
.fixed-bottom,
|
|
|
|
.sticky-bottom {
|
2015-08-18 10:18:21 +02:00
|
|
|
position: static;
|
2022-04-19 20:21:43 +02:00
|
|
|
margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list
|
2015-08-18 10:18:21 +02:00
|
|
|
|
2015-04-16 23:57:49 +02:00
|
|
|
}
|
|
|
|
|
2020-03-04 13:32:45 +01:00
|
|
|
// Pagination
|
|
|
|
.pagination {
|
2022-04-19 20:21:43 +02:00
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//
|
|
|
|
// Grid examples
|
|
|
|
//
|
|
|
|
|
|
|
|
.bd-example-row [class^="col"],
|
|
|
|
.bd-example-cssgrid .grid > * {
|
|
|
|
padding-top: .75rem;
|
|
|
|
padding-bottom: .75rem;
|
|
|
|
background-color: rgba(var(--bd-violet-rgb), .1);
|
|
|
|
border: 1px solid rgba(var(--bd-violet-rgb), .25);
|
|
|
|
}
|
|
|
|
|
|
|
|
.bd-example-row .row + .row,
|
|
|
|
.bd-example-cssgrid .grid + .grid {
|
|
|
|
margin-top: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bd-example-row-flex-cols .row {
|
|
|
|
min-height: 10rem;
|
|
|
|
background-color: rgba(255, 0, 0, .1);
|
|
|
|
}
|
|
|
|
|
|
|
|
.bd-example-flex div {
|
|
|
|
background-color: rgba($bd-purple, .15);
|
|
|
|
border: 1px solid rgba($bd-purple, .15);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Grid mixins
|
|
|
|
.example-container {
|
|
|
|
width: 800px;
|
|
|
|
@include make-container();
|
|
|
|
}
|
|
|
|
|
|
|
|
.example-row {
|
|
|
|
@include make-row();
|
|
|
|
}
|
|
|
|
|
|
|
|
.example-content-main {
|
|
|
|
@include make-col-ready();
|
|
|
|
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
|
|
@include make-col(6);
|
|
|
|
}
|
|
|
|
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
|
|
@include make-col(8);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.example-content-secondary {
|
|
|
|
@include make-col-ready();
|
|
|
|
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
|
|
@include make-col(6);
|
|
|
|
}
|
|
|
|
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
|
|
@include make-col(4);
|
2020-03-04 13:32:45 +01:00
|
|
|
}
|
2020-09-23 01:33:18 +02:00
|
|
|
}
|
2020-09-21 23:15:15 +02:00
|
|
|
|
2020-09-23 01:33:18 +02:00
|
|
|
// Ratio helpers
|
|
|
|
.bd-example-ratios {
|
2020-09-23 01:30:00 +02:00
|
|
|
.ratio {
|
2020-09-21 23:15:15 +02:00
|
|
|
display: inline-block;
|
2020-09-23 01:33:18 +02:00
|
|
|
width: 10rem;
|
2020-09-21 23:15:15 +02:00
|
|
|
color: $gray-600;
|
|
|
|
background-color: $gray-100;
|
Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981)
* Add additional root variables, rename $variable-prefix to $prefix
- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout
* Bundlewatch
2022-03-13 18:13:09 +01:00
|
|
|
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
2020-09-23 20:06:21 +02:00
|
|
|
|
|
|
|
> div {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
2020-09-21 23:15:15 +02:00
|
|
|
}
|
2015-04-16 23:57:49 +02:00
|
|
|
}
|
2020-09-23 01:38:58 +02:00
|
|
|
.bd-example-ratios-breakpoint {
|
|
|
|
.ratio-4x3 {
|
|
|
|
width: 16rem;
|
|
|
|
|
|
|
|
@include media-breakpoint-up(md) {
|
2021-01-06 07:14:54 +01:00
|
|
|
--bs-aspect-ratio: 50%; // 2x1
|
2020-09-23 01:38:58 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2015-04-16 23:57:49 +02:00
|
|
|
|
2021-03-02 18:10:10 +01:00
|
|
|
.bd-example-offcanvas {
|
|
|
|
.offcanvas {
|
|
|
|
position: static;
|
2021-03-23 18:06:11 +01:00
|
|
|
display: block;
|
2021-03-02 18:10:10 +01:00
|
|
|
height: 200px;
|
2021-03-23 18:06:11 +01:00
|
|
|
visibility: visible;
|
|
|
|
transform: translate(0);
|
2021-03-02 18:10:10 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-04-16 23:57:49 +02:00
|
|
|
// Tooltips
|
2022-11-14 08:30:46 +01:00
|
|
|
.tooltip-demo {
|
|
|
|
a {
|
|
|
|
white-space: nowrap;
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
margin: .25rem .125rem;
|
|
|
|
}
|
2015-11-24 09:15:17 +01:00
|
|
|
}
|
|
|
|
|
2022-04-19 20:21:43 +02:00
|
|
|
// scss-docs-start custom-tooltip
|
2021-07-29 08:21:53 +02:00
|
|
|
.custom-tooltip {
|
|
|
|
--bs-tooltip-bg: var(--bs-primary);
|
|
|
|
}
|
2022-04-19 20:21:43 +02:00
|
|
|
// scss-docs-end custom-tooltip
|
2021-07-29 08:21:53 +02:00
|
|
|
|
2021-09-09 05:18:22 +02:00
|
|
|
// scss-docs-start custom-popovers
|
|
|
|
.custom-popover {
|
|
|
|
--bs-popover-max-width: 200px;
|
|
|
|
--bs-popover-border-color: var(--bs-primary);
|
|
|
|
--bs-popover-header-bg: var(--bs-primary);
|
|
|
|
--bs-popover-header-color: var(--bs-white);
|
|
|
|
--bs-popover-body-padding-x: 1rem;
|
|
|
|
--bs-popover-body-padding-y: .5rem;
|
|
|
|
}
|
|
|
|
// scss-docs-end custom-popovers
|
|
|
|
|
2015-04-16 23:57:49 +02:00
|
|
|
// Scrollspy demo on fixed height div
|
|
|
|
.scrollspy-example {
|
|
|
|
height: 200px;
|
|
|
|
margin-top: .5rem;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
|
2017-04-02 11:21:04 +02:00
|
|
|
.scrollspy-example-2 {
|
|
|
|
height: 350px;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
|
2022-04-13 19:29:13 +02:00
|
|
|
.simple-list-example-scrollspy {
|
|
|
|
.active {
|
2022-05-07 06:23:49 +02:00
|
|
|
background-color: rgba(var(--bd-violet-rgb), .15);
|
2022-04-13 19:29:13 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-11-27 01:44:16 +01:00
|
|
|
.bd-example-border-utils {
|
2017-06-26 03:39:00 +02:00
|
|
|
[class^="border"] {
|
2016-11-27 01:44:16 +01:00
|
|
|
display: inline-block;
|
2017-06-26 03:39:00 +02:00
|
|
|
width: 5rem;
|
|
|
|
height: 5rem;
|
2016-11-27 01:44:16 +01:00
|
|
|
margin: .25rem;
|
|
|
|
background-color: #f5f5f5;
|
2018-01-02 05:51:20 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-14 07:22:10 +01:00
|
|
|
.bd-example-rounded-utils {
|
|
|
|
[class*="rounded"] {
|
|
|
|
margin: .25rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-09-21 04:42:41 +02:00
|
|
|
.bd-example-position-utils {
|
|
|
|
position: relative;
|
2022-04-19 20:21:43 +02:00
|
|
|
padding: 2rem;
|
2020-09-21 04:42:41 +02:00
|
|
|
|
|
|
|
.position-relative {
|
|
|
|
height: 200px;
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
}
|
|
|
|
|
|
|
|
.position-absolute {
|
2022-04-19 20:21:43 +02:00
|
|
|
width: 2rem;
|
|
|
|
height: 2rem;
|
2020-09-21 04:42:41 +02:00
|
|
|
background-color: $dark;
|
|
|
|
@include border-radius();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.bd-example-position-examples {
|
|
|
|
&::after {
|
|
|
|
content: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-08-03 17:59:00 +02:00
|
|
|
// Placeholders
|
|
|
|
.bd-example-placeholder-cards {
|
|
|
|
&::after {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.card {
|
|
|
|
width: 18rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-29 15:22:15 +01:00
|
|
|
// Toasts
|
|
|
|
.bd-example-toasts {
|
|
|
|
min-height: 240px;
|
|
|
|
}
|
|
|
|
|
2022-10-22 23:13:39 +02:00
|
|
|
.bd-example-zindex-levels {
|
|
|
|
min-height: 15rem;
|
|
|
|
|
|
|
|
> div {
|
|
|
|
background-color: tint-color($bd-violet, 75%);
|
|
|
|
border: 1px solid tint-color($bd-violet, 50%);
|
|
|
|
}
|
|
|
|
|
|
|
|
> :nth-child(2) {
|
|
|
|
top: 3rem;
|
|
|
|
left: 3rem;
|
|
|
|
}
|
|
|
|
> :nth-child(3) {
|
|
|
|
top: 4.5rem;
|
|
|
|
left: 4.5rem;
|
|
|
|
}
|
|
|
|
> :nth-child(4) {
|
|
|
|
top: 6rem;
|
|
|
|
left: 6rem;
|
|
|
|
}
|
|
|
|
> :nth-child(5) {
|
|
|
|
top: 7.5rem;
|
|
|
|
left: 7.5rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-04-16 23:57:49 +02:00
|
|
|
//
|
|
|
|
// Code snippets
|
|
|
|
//
|
|
|
|
|
|
|
|
.highlight {
|
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
|
|
|
position: relative;
|
|
|
|
padding: .75rem ($bd-gutter-x * .5);
|
2017-08-14 01:44:52 +02:00
|
|
|
margin-bottom: 1rem;
|
2022-04-12 03:43:18 +02:00
|
|
|
background-color: var(--bs-gray-100);
|
2015-04-16 23:57:49 +02:00
|
|
|
|
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
|
|
|
@include media-breakpoint-up(md) {
|
|
|
|
padding: .75rem 1.25rem;
|
|
|
|
@include border-radius(var(--bs-border-radius));
|
2017-08-14 01:44:52 +02:00
|
|
|
}
|
|
|
|
|
2017-10-22 23:17:28 +02:00
|
|
|
pre {
|
2021-04-07 05:59:31 +02:00
|
|
|
padding: 0;
|
2022-05-20 19:28:31 +02:00
|
|
|
margin-top: .625rem;
|
2022-09-01 03:30:23 +02:00
|
|
|
margin-right: 1.875rem;
|
2022-05-20 19:28:31 +02:00
|
|
|
margin-bottom: .625rem;
|
2020-10-23 00:06:52 +02:00
|
|
|
white-space: pre;
|
2017-10-22 23:17:28 +02:00
|
|
|
background-color: transparent;
|
|
|
|
border: 0;
|
|
|
|
}
|
2019-08-30 22:32:12 +02:00
|
|
|
|
2017-10-22 23:17:28 +02:00
|
|
|
pre code {
|
2019-02-07 23:32:05 +01:00
|
|
|
@include font-size(inherit);
|
2017-10-22 23:17:28 +02:00
|
|
|
color: $gray-900; // Effectively the base text color
|
2020-10-23 00:06:52 +02:00
|
|
|
word-wrap: normal;
|
2017-10-22 23:17:28 +02:00
|
|
|
}
|
2015-04-16 23:57:49 +02:00
|
|
|
}
|
2020-03-04 13:32:45 +01:00
|
|
|
|
2022-04-19 03:05:09 +02:00
|
|
|
.bd-code-snippet {
|
2022-04-19 06:41:58 +02:00
|
|
|
margin: 0 ($bd-gutter-x * -.5) $spacer;
|
2022-04-19 03:05:09 +02:00
|
|
|
|
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
|
|
|
.highlight {
|
2022-04-19 03:05:09 +02:00
|
|
|
margin-bottom: 0;
|
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
|
|
|
}
|
2020-03-04 13:32:45 +01:00
|
|
|
|
2022-04-19 06:41:58 +02:00
|
|
|
.bd-example {
|
2022-04-19 20:21:43 +02:00
|
|
|
margin: 0;
|
2022-04-19 06:41:58 +02:00
|
|
|
border: 0;
|
|
|
|
}
|
|
|
|
|
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-18 07:17:50 +02:00
|
|
|
@include media-breakpoint-up(md) {
|
2020-03-04 13:32:45 +01:00
|
|
|
margin-right: 0;
|
|
|
|
margin-left: 0;
|
2022-04-19 03:05:09 +02:00
|
|
|
@include border-radius($border-radius);
|
2020-03-04 13:32:45 +01:00
|
|
|
}
|
|
|
|
}
|
2022-04-19 03:05:09 +02:00
|
|
|
|
|
|
|
.highlight-toolbar {
|
|
|
|
border: solid $border-color;
|
|
|
|
border-width: 1px 0;
|
|
|
|
}
|