diff options
| author | Mark Otto <[email protected]> | 2021-03-18 22:16:11 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2021-04-04 20:21:17 -0700 |
| commit | cdf56e0eefd797d4b0f26021d24958fc315a5f2c (patch) | |
| tree | 2271fe8564d067d7b445746f5dcfc51cb0ea53ab | |
| parent | 062ecf67b2b1fefbef8e2d49b95015308e909699 (diff) | |
| download | bootstrap-cdf56e0eefd797d4b0f26021d24958fc315a5f2c.tar.xz bootstrap-cdf56e0eefd797d4b0f26021d24958fc315a5f2c.zip | |
Update look and feel of examples and copy buttons
| -rw-r--r-- | site/assets/scss/_clipboard-js.scss | 17 | ||||
| -rw-r--r-- | site/assets/scss/_component-examples.scss | 37 |
2 files changed, 41 insertions, 13 deletions
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 83b9a8b9e..5465b18a9 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -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; } } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 005515922..a51ccf604 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -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; +} |