From 3e6265ac55cd8548a83f2470a19ff1dcf28d3b0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 9 Feb 2022 14:15:15 -0800 Subject: [PATCH] Rewrite custom docs buttons - Use CSS variables wherever possible - Rename purple-bright to violet for brevity, add CSS vars versions - Rename download to accent --- site/assets/scss/_algolia.scss | 2 +- site/assets/scss/_brand.scss | 4 +- site/assets/scss/_buttons.scss | 66 +++++++++----------------- site/assets/scss/_content.scss | 4 +- site/assets/scss/_navbar.scss | 4 +- site/assets/scss/_sidebar.scss | 6 +-- site/assets/scss/_subnav.scss | 8 ++-- site/assets/scss/_variables.scss | 19 +++++--- site/layouts/partials/docs-navbar.html | 2 +- 9 files changed, 50 insertions(+), 65 deletions(-) diff --git a/site/assets/scss/_algolia.scss b/site/assets/scss/_algolia.scss index 89468d42b9..9c457d2e37 100644 --- a/site/assets/scss/_algolia.scss +++ b/site/assets/scss/_algolia.scss @@ -24,7 +24,7 @@ .algolia-docsearch-suggestion--category-header { padding: .125rem 1rem; font-weight: 600; - color: $bd-purple-bright; + color: $bd-violet; :not(.algolia-docsearch-suggestion__main) > & { display: none; diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss index 73db11e183..9637cfb18d 100644 --- a/site/assets/scss/_brand.scss +++ b/site/assets/scss/_brand.scss @@ -4,11 +4,11 @@ // Logo series wrapper .bd-brand-logos { - color: $bd-purple-bright; + color: $bd-violet; .inverse { color: $white; - background-color: $bd-purple-bright; + background-color: $bd-violet; } } diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss index adbc39ed9c..93ffa83ed5 100644 --- a/site/assets/scss/_buttons.scss +++ b/site/assets/scss/_buttons.scss @@ -4,54 +4,32 @@ // scss-docs-start btn-css-vars-example .btn-bd-primary { - font-weight: 600; - color: $white; - background-color: $bd-purple-bright; - border-color: $bd-purple-bright; - - &:hover, - &:active { - color: $white; - background-color: shade-color($bd-purple-bright, 20%); - border-color: shade-color($bd-purple-bright, 20%); - } - - &:focus { - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); - } + --bs-btn-font-weight: 600; + --bs-btn-color: var(--bs-white); + --bs-btn-bg: var(--bd-violet); + --bs-btn-border-color: var(--bd-violet); + --bs-btn-hover-color: var(--bs-white); + --bs-btn-hover-bg: #{shade-color($bd-violet, 20%)}; + --bs-btn-hover-border-color: #{shade-color($bd-violet, 20%)}; + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); } // scss-docs-end btn-css-vars-example -.btn-bd-download { - font-weight: 600; - color: $bd-download; - border-color: $bd-download; - - &:hover, - &:active { - color: $bd-dark; - background-color: $bd-download; - border-color: $bd-download; - } - - &:focus { - box-shadow: 0 0 0 3px rgba($bd-download, .25); - } +.btn-bd-accent { + --bs-btn-font-weight: 600; + --bs-btn-color: var(--bd-accent); + --bs-btn-border-color: var(--bd-accent); + --bs-btn-hover-color: var(--bd-dark); + --bs-btn-hover-bg: var(--bd-accent); + --bs-btn-hover-border-color: var(--bd-accent); + --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb); } .btn-bd-light { - color: $gray-600; - border-color: $gray-300; - - .show > &, - &:hover, - &:active { - color: $bd-purple-bright; - background-color: $white; - border-color: $bd-purple-bright; - } - - &:focus { - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); - } + --bs-btn-color: var(--bs-gray-600); + --bs-btn-border-color: var(--bs-gray-300); + --bs-btn-active-color: var(--bd-violet); + --bs-btn-active-bg: var(--bs-white); + --bs-btn-active-border-color: var(--bd-violet); + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); } diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index f2b5cfc544..fa290dabc8 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -73,9 +73,9 @@ } .bd-text-purple-bright { - color: $bd-purple-bright; + color: $bd-violet; } .bd-bg-purple-bright { - background-color: $bd-purple-bright; + background-color: $bd-violet; } diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 07851b55c7..401731ae19 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -3,7 +3,7 @@ --bs-gutter-y: $bd-gutter-x; padding: .75rem 0; - background-color: $bd-purple-bright; + background-color: $bd-violet; .navbar-toggler { padding: 0; @@ -34,7 +34,7 @@ } .offcanvas { - background-color: $bd-purple-bright; + background-color: $bd-violet; border-left: 0; @include media-breakpoint-down(md) { diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index b6d347fe7a..452b155ffa 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -40,7 +40,7 @@ &:focus { color: rgba($black, .85); text-decoration: if($link-hover-decoration == underline, none, null); - background-color: rgba($bd-purple-bright, .1); + background-color: rgba($bd-violet, .1); } } @@ -55,11 +55,11 @@ &:hover, &:focus { color: rgba($black, .85); - background-color: rgba($bd-purple-bright, .1); + background-color: rgba($bd-violet, .1); } &:focus { - box-shadow: 0 0 0 1px rgba($bd-purple-bright, .7); + box-shadow: 0 0 0 1px rgba($bd-violet, .7); } // Add chevron if there's a submenu diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index cc47c6fb54..db183ff6a8 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -55,8 +55,8 @@ padding-right: 3.75rem; &:focus { - border-color: $bd-purple-bright; - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); + border-color: $bd-violet; + box-shadow: 0 0 0 3px rgba($bd-violet, .25); } } } @@ -66,11 +66,11 @@ &:hover, &:focus { - color: $bd-purple-bright; + color: $bd-violet; } &:focus { - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); + box-shadow: 0 0 0 3px rgba($bd-violet, .25); } .bi-collapse { display: none; } diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 939492f702..0c40b17e9e 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -2,14 +2,21 @@ // Local docs variables $bd-purple: #563d7c; -$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list +$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list -$bd-dark: #2a2730; -$bd-download: #ffe484; -$bd-info: #5bc0de; -$bd-warning: #f0ad4e; -$bd-danger: #d9534f; +$bd-accent: #ffe484; +$bd-info: #5bc0de; +$bd-warning: #f0ad4e; +$bd-danger: #d9534f; $dropdown-active-icon: url("data:image/svg+xml,"); $sidebar-collapse-icon: url("data:image/svg+xml,"); $bd-gutter-x: 1.25rem; + +:root { + --bd-purple: #{$bd-purple}; + --bd-violet: #{$bd-violet}; + --bd-accent: #{$bd-accent}; + --bd-violet-rgb: #{to-rgb($bd-violet)}; + --bd-accent-rgb: #{to-rgb($bd-accent)}; +} diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 6611596e6b..171a2ad73e 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -68,7 +68,7 @@
- Download + Download