mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-30 00:29:52 +02:00
Refactor some docs examples CSS (#36194)
* Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
This commit is contained in:
Mark Otto
GitHub
@@ -1,83 +1,3 @@
|
||||
//
|
||||
// Grid examples
|
||||
//
|
||||
|
||||
.bd-example-row {
|
||||
.row {
|
||||
> .col,
|
||||
> [class^="col-"] {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(39, 41, 43, .03);
|
||||
border: 1px solid rgba(39, 41, 43, .1);
|
||||
}
|
||||
}
|
||||
|
||||
.row + .row {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
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);
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Docs examples
|
||||
//
|
||||
@@ -92,15 +12,18 @@
|
||||
}
|
||||
|
||||
.bd-example {
|
||||
--bd-example-padding: 1rem;
|
||||
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
padding: var(--bd-example-padding);
|
||||
margin: 0 ($bd-gutter-x * -.5);
|
||||
border: solid $border-color;
|
||||
border-width: 1px 0 0;
|
||||
border-width: 1px 0;
|
||||
@include clearfix();
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 1.5rem;
|
||||
--bd-example-padding: 1.5rem;
|
||||
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-width: 1px;
|
||||
@@ -127,7 +50,7 @@
|
||||
> .alert + .alert,
|
||||
> .navbar + .navbar,
|
||||
> .progress + .progress {
|
||||
margin-top: 1rem;
|
||||
margin-top: $spacer;
|
||||
}
|
||||
|
||||
> .dropdown-menu {
|
||||
@@ -171,30 +94,80 @@
|
||||
.fixed-top,
|
||||
.sticky-top {
|
||||
position: static;
|
||||
margin: -1rem -1rem 1rem;
|
||||
margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
|
||||
}
|
||||
|
||||
.fixed-bottom,
|
||||
.sticky-bottom {
|
||||
position: static;
|
||||
margin: 1rem -1rem -1rem;
|
||||
}
|
||||
margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.fixed-top,
|
||||
.sticky-top {
|
||||
margin: -1.5rem -1.5rem 1rem;
|
||||
}
|
||||
.fixed-bottom,
|
||||
.sticky-bottom {
|
||||
margin: 1rem -1.5rem -1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -224,18 +197,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-modal {
|
||||
background-color: #fafafa;
|
||||
|
||||
.modal {
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-offcanvas {
|
||||
@include border-start-radius(0);
|
||||
|
||||
.offcanvas {
|
||||
position: static;
|
||||
display: block;
|
||||
@@ -250,9 +212,11 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// scss-docs-start custom-tooltip
|
||||
.custom-tooltip {
|
||||
--bs-tooltip-bg: var(--bs-primary);
|
||||
}
|
||||
// scss-docs-end custom-tooltip
|
||||
|
||||
// scss-docs-start custom-popovers
|
||||
.custom-popover {
|
||||
@@ -290,7 +254,6 @@
|
||||
.active {
|
||||
background-color: rgba($bd-purple, .15);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bd-example-border-utils {
|
||||
@@ -317,7 +280,7 @@
|
||||
|
||||
.bd-example-position-utils {
|
||||
position: relative;
|
||||
padding: 3em;
|
||||
padding: 2rem;
|
||||
|
||||
.position-relative {
|
||||
height: 200px;
|
||||
@@ -325,8 +288,8 @@
|
||||
}
|
||||
|
||||
.position-absolute {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: $dark;
|
||||
@include border-radius();
|
||||
}
|
||||
@@ -398,6 +361,7 @@
|
||||
}
|
||||
|
||||
.bd-example {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user