diff options
author | Mark Otto <markdotto@gmail.com> | 2022-02-10 01:15:15 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2022-02-15 06:00:59 +0300 |
commit | 3e6265ac55cd8548a83f2470a19ff1dcf28d3b0a (patch) | |
tree | 5bc209baffe098bbe6408ba1b1549482af2fe5a1 /site/assets | |
parent | 85938bb2ed2ec6a97c8dfe9f54c5c450f5c1e86f (diff) |
Rewrite custom docs buttons
- Use CSS variables wherever possible
- Rename purple-bright to violet for brevity, add CSS vars versions
- Rename download to accent
Diffstat (limited to 'site/assets')
-rw-r--r-- | site/assets/scss/_algolia.scss | 2 | ||||
-rw-r--r-- | site/assets/scss/_brand.scss | 4 | ||||
-rw-r--r-- | site/assets/scss/_buttons.scss | 66 | ||||
-rw-r--r-- | site/assets/scss/_content.scss | 4 | ||||
-rw-r--r-- | site/assets/scss/_navbar.scss | 4 | ||||
-rw-r--r-- | site/assets/scss/_sidebar.scss | 6 | ||||
-rw-r--r-- | site/assets/scss/_subnav.scss | 8 | ||||
-rw-r--r-- | site/assets/scss/_variables.scss | 19 |
8 files changed, 49 insertions, 64 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>"); $sidebar-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>"); $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)}; +} |