From cdf56e0eefd797d4b0f26021d24958fc315a5f2c Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 18 Mar 2021 22:16:11 -0700 Subject: [PATCH] Update look and feel of examples and copy buttons --- site/assets/scss/_clipboard-js.scss | 17 ++++++----- 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 83b9a8b9e5..5465b18a93 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 005515922d..a51ccf6042 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; +}