rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Embedded examples cleanup (#30330)

Browse Source 
* Thin out embedded examples borders, rounded their corners
* Fix busted class
* Adjust nesting of .bd-example styles, tweak padding while I'm at it
* combine selectors
* cleanup some margins that always cancel each other out
* Remove redundant universal selector

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
This commit is contained in:
Mark Otto 2020-03-04 04:32:45 -08:00 committed by GitHub
parent 481540800d
commit 50c95d9b5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
site/assets/scss/_component-examples.scss
View File

@ -82,20 +82,20 @@
position: relative; position: relative;
padding: 1rem; padding: 1rem;
margin: 1rem (-$grid-gutter-width / 2) 0; margin: 1rem (-$grid-gutter-width / 2) 0;
border: solid $gray-100; border: solid $gray-300;
border-width: .2rem 0 0; border-width: 1px 0 0;
@include clearfix(); @include clearfix();
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
padding: 1.5rem; padding: 1.5rem;
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
border-width: .2rem; border-width: 1px;
} @include border-top-radius(.25rem);
+ .highlight, + .bd-clipboard + .highlight {
+ .clipboard + .highlight { @include border-bottom-radius(.25rem);
margin-top: 0; }
} }
+ p { + p {
@ -119,18 +119,18 @@
position: static; position: static;
display: block; display: block;
} }
}
// Images > :last-child {
.bd-example { margin-bottom: 0;
}
// Images
> svg + svg, > svg + svg,
> img + img { > img + img {
margin-left: .5rem; margin-left: .5rem;
} }
}
// Buttons // Buttons
.bd-example {
> .btn, > .btn,
> .btn-group { > .btn-group {
margin-top: .25rem; margin-top: .25rem;
@ -139,19 +139,17 @@
> .btn-toolbar + .btn-toolbar { > .btn-toolbar + .btn-toolbar {
margin-top: .5rem; margin-top: .5rem;
} }
}
// List groups // List groups
.bd-example > .list-group { > .list-group {
max-width: 400px; max-width: 400px;
} }
.bd-example > [class*="list-group-horizontal"] { > [class*="list-group-horizontal"] {
max-width: 100%; max-width: 100%;
} }
// Navbars // Navbars
.bd-example {
.fixed-top, .fixed-top,
.sticky-top { .sticky-top {
position: static; position: static;
@ -172,12 +170,12 @@
margin: 1rem -1.5rem -1.5rem; margin: 1rem -1.5rem -1.5rem;
} }
} }
}
// Pagination // Pagination
.bd-example .pagination { .pagination {
margin-top: .5rem; margin-top: .5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
}
} }
.bd-example-modal { .bd-example-modal {
@ -236,27 +234,14 @@
.highlight { .highlight {
padding: 1rem; padding: 1rem;
margin-top: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
background-color: $gray-100; background-color: $gray-100;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
padding: 1.5rem; padding: 1rem 1.5rem;
} }
}
.bd-content .highlight {
margin-right: (-$grid-gutter-width / 2);
margin-left: (-$grid-gutter-width / 2);
@include media-breakpoint-up(sm) {
margin-right: 0;
margin-left: 0;
}
}
.highlight {
pre { pre {
padding: 0; padding: 0;
margin-top: 0; margin-top: 0;
@ -270,3 +255,13 @@
color: $gray-900; // Effectively the base text color color: $gray-900; // Effectively the base text color
} }
} }
.bd-content .highlight {
margin-right: (-$grid-gutter-width / 2);
margin-left: (-$grid-gutter-width / 2);
@include media-breakpoint-up(sm) {
margin-right: 0;
margin-left: 0;
}
}