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

Rewrite custom docs buttons

Browse Source 
- Use CSS variables wherever possible
- Rename purple-bright to violet for brevity, add CSS vars versions
- Rename download to accent
This commit is contained in:
Mark Otto 2022-02-09 14:15:15 -08:00 committed by Mark Otto
parent 85938bb2ed
commit 3e6265ac55
9 changed files with 50 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/assets/scss/_algolia.scss
View File

@ -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;

4
site/assets/scss/_brand.scss
View File

@ -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;
}
}

66
site/assets/scss/_buttons.scss
View File

@ -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);
}

4
site/assets/scss/_content.scss
View File

@ -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;
}

4
site/assets/scss/_navbar.scss
View File

@ -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) {

6
site/assets/scss/_sidebar.scss
View File

@ -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

8
site/assets/scss/_subnav.scss
View File

@ -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; }

19
site/assets/scss/_variables.scss
View File

@ -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)};
}

2
site/layouts/partials/docs-navbar.html
View File

@ -68,7 +68,7 @@
<hr class="d-md-none text-white-50">
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
<a class="btn btn-bd-accent d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
</div>
</div>
</nav>