Revert "Update look and feel of examples and copy buttons"

This reverts commit cdf56e0eefd797d4b0f26021d24958fc315a5f2c.
This commit is contained in:
Mark Otto 2021-04-06 20:59:31 -07:00
parent 0d1fec9aa8
commit a398c500b8
2 changed files with 13 additions and 41 deletions

View File

@ -18,21 +18,20 @@
.btn-clipboard { .btn-clipboard {
position: absolute; position: absolute;
top: .35rem; top: .65rem;
right: .5rem; right: .65rem;
z-index: 10; z-index: 10;
display: block; display: block;
padding: .25rem .5rem; padding: .25rem .5rem;
@include font-size(.75em); @include font-size(.65em);
color: $gray-700; color: $primary;
user-select: none; background-color: $white;
background-color: transparent; border: 1px solid;
border: 0;
@include border-radius(); @include border-radius();
&:hover, &:hover,
&:focus { &:focus {
color: $gray-900; color: $white;
background-color: $gray-200; background-color: $primary;
} }
} }

View File

@ -83,8 +83,6 @@
@include border-top-radius(.25rem); @include border-top-radius(.25rem);
+ .bd-clipboard + .highlight { + .bd-clipboard + .highlight {
border-top: 0;
@include border-top-radius(0);
@include border-bottom-radius(.25rem); @include border-bottom-radius(.25rem);
} }
} }
@ -289,20 +287,18 @@
// //
.highlight { .highlight {
position: relative; padding: 1rem;
padding: 3.5rem 1rem 0;
margin-bottom: 1rem; margin-bottom: 1rem;
overflow: auto;
background-color: $gray-100; background-color: $gray-100;
border: 1px solid $gray-300;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
@include border-radius(.25rem); padding: 1rem 1.5rem;
} }
pre { pre {
padding: 0 0 1rem; padding: 0;
margin-bottom: .5rem; margin-top: .65rem;
margin-bottom: .65rem;
white-space: pre; white-space: pre;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
@ -324,26 +320,3 @@
margin-left: 0; margin-left: 0;
} }
} }
.bd-example-multiple-langs + .bd-clipboard + .highlight {
margin-bottom: 0;
border-bottom: 0;
@include border-bottom-radius(0);
}
.highlight + .bd-clipboard + .highlight {
@include border-top-radius(0);
}
[data-lang]::before {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: .5rem 1rem;
@include font-size(.875rem);
color: $gray-700;
text-transform: uppercase;
content: attr(data-lang);
user-select: none;
border-bottom: 1px solid $gray-300;
}