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

Update look and feel of examples and copy buttons

Browse Source
This commit is contained in:
Mark Otto 2021-03-18 22:16:11 -07:00 committed by Mark Otto
parent 062ecf67b2
commit cdf56e0eef
2 changed files with 41 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
site/assets/scss/_clipboard-js.scss
View File

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

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

@ -83,6 +83,8 @@
@include border-top-radius(.25rem);
+ .bd-clipboard + .highlight {
border-top: 0;
@include border-top-radius(0);
@include border-bottom-radius(.25rem);
}
}
@ -287,18 +289,20 @@
//
.highlight {
padding: 1rem;
position: relative;
padding: 3.5rem 1rem 0;
margin-bottom: 1rem;
overflow: auto;
background-color: $gray-100;
border: 1px solid $gray-300;
@include media-breakpoint-up(sm) {
padding: 1rem 1.5rem;
@include border-radius(.25rem);
}
pre {
padding: 0;
margin-top: .65rem;
margin-bottom: .65rem;
padding: 0 0 1rem;
margin-bottom: .5rem;
white-space: pre;
background-color: transparent;
border: 0;
@ -320,3 +324,26 @@
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;
}