Skip to content

Commit

Permalink
Prep for v1.8.2 (#1193)
Browse files Browse the repository at this point in the history
* Update design to match v5.2.0

* Update for v1.8.2

* Add figma link in hero, tweak a few things

* Update to use Bootstrap via npm

* Fixes #1308: Update search field to use type=search

* Fixes #1274: Update clipboard.min.js to latest

* Only import the font CSS on the homepage

* Fix test

* Clean up CSS errors

* Fathom

* update bootstrap versions

* Fix version config
  • Loading branch information
mdo authored May 13, 2022
1 parent 1007a03 commit ae7fb97
Show file tree
Hide file tree
Showing 24 changed files with 324 additions and 155 deletions.
9 changes: 7 additions & 2 deletions config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,17 @@ module:
target: static/assets/icons
- source: font
target: static/assets/font
- source: node_modules/bootstrap/scss
target: assets/scss/bootstrap
- source: node_modules/bootstrap/dist/js/bootstrap.min.js
target: assets/js/bootstrap.min.js

params:
description: "Official open source SVG icon library for Bootstrap"
social_image_path: /assets/img/bootstrap-icons-social.png

version: "1.8.1"
bs_docs_version: "5.1"
version: "1.8.2"
docs_version: "5.2"

main: "https://getbootstrap.com"
github_org: "https://github.com/twbs"
Expand All @@ -61,3 +65,4 @@ params:
expo: "https://expo.getbootstrap.com"
themes: "https://themes.getbootstrap.com"
opencollective: "https://opencollective.com/bootstrap"
icons_figma: "https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons"
6 changes: 3 additions & 3 deletions docs/assets/js/vendor/clipboard.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/assets/scss/_ads.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
margin-right: auto;
margin-left: auto;
overflow: auto;
background-color: $gray-100;
background-color: var(--bs-gray-100);
border-radius: .25rem;

@media (min-width: 992px) {
Expand Down
64 changes: 36 additions & 28 deletions docs/assets/scss/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,44 @@
//
// Custom buttons for the docs.

// scss-docs-start btn-css-vars-example
.btn-bd-primary {
font-weight: 600;
color: $bd-purple-bright;
border-color: $bd-purple-bright;

&:hover,
&:active {
color: $white;
background-color: $bd-purple-bright;
border-color: $bd-purple-bright;
}

&: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-border-radius: .5rem;
--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
--bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
--bs-btn-active-color: var(--bs-btn-hover-color);
--bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
--bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}
// 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;
}
.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);
--bs-btn-active-color: var(--bs-btn-hover-color);
--bs-btn-active-bg: var(--bs-btn-hover-bg);
--bs-btn-active-border-color: var(--bs-btn-hover-border-color);
}

&:focus {
box-shadow: 0 0 0 3px rgba($bd-download, .25);
}
.btn-bd-light {
--bs-btn-color: var(--bs-gray-600);
--bs-btn-border-color: var(--bs-gray-400);
--bs-btn-hover-color: var(--bd-violet);
--bs-btn-hover-border-color: var(--bd-violet);
--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-border-color: var(--bd-violet);
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
}
6 changes: 3 additions & 3 deletions docs/assets/scss/_clipboard-js.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@
display: block;
padding: .5em .75em .625em;
line-height: 1;
color: $gray-900;
background-color: $gray-100;
color: var(--bs-gray-900);
background-color: var(--bs-gray-100);
border: 0;
border-radius: .25rem;

&:hover {
color: $primary;
color: var(--bs-primary);
}
}
6 changes: 3 additions & 3 deletions docs/assets/scss/_footer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@

.bd-footer {
font-size: .875rem;
color: #63707c;
color: var(--bs-gray-600);

a {
font-weight: 600;
color: $gray-700;
color: var(--bs-gray-700);

&:hover,
&:focus {
color: $blue;
color: var(--bs-primary);
}
}

Expand Down
67 changes: 47 additions & 20 deletions docs/assets/scss/_navbar.scss
Original file line number Diff line number Diff line change
@@ -1,37 +1,64 @@
.bd-navbar {
padding: .75rem 0;
background-color: $bd-purple-bright;
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);

.navbar-toggler {
padding: 0;
margin-right: -.5rem;
border: 0;

&:first-child {
margin-left: -.5rem;
}

.bi {
width: 2rem;
fill: currentcolor;
width: 1.5rem;
height: 1.5rem;
}

&:focus {
box-shadow: none;
}
}

.navbar-nav {
.nav-link {
padding-right: $spacer / 4;
padding-left: $spacer / 4;
color: rgba($white, .85);

&:hover,
&:focus {
color: $white;
}

&.active {
font-weight: 600;
color: $white;
}
.navbar-brand {
transition: .2s ease-in-out transform;

&:hover {
transform: rotate(-5deg) scale(1.1);
}
}

.navbar-toggler,
.nav-link {
padding-right: $spacer * .25;
padding-left: $spacer * .25;
color: rgba($white, .85);

&:hover,
&:focus {
color: $white;
}

&.active {
font-weight: 600;
color: $white;
}
}

.navbar-nav-svg {
width: 1rem;
height: 1rem;
display: inline-block;
vertical-align: -.125rem;
}

.offcanvas-lg {
background-color: var(--bd-violet);
border-left: 0;

@media (max-width: 992px) {
box-shadow: $box-shadow-lg;
}
}
}
4 changes: 2 additions & 2 deletions docs/assets/scss/_skippy.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
.skippy {
display: block;
padding: 1em;
color: $white;
color: #fff;
text-align: center;
background-color: $bd-purple;
outline: 0;

&:hover {
color: $white;
color: #fff;
}
}

Expand Down
2 changes: 1 addition & 1 deletion docs/assets/scss/_syntax.scss
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
.language-bash,
.language-sh {
&::before {
color: $gray-500;
color: var(--bs-gray-600);
content: "$ ";
user-select: none;
}
Expand Down
27 changes: 13 additions & 14 deletions docs/assets/scss/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
$white: #fff;
$blue: #007bff;
$gray-100: #f8f9fa;
$gray-500: #adb5bd;
$gray-700: #495057;
$gray-900: #212529;
$primary: #0d6efd;
$teal-100: #d2f4ea;

// Local docs variables
$bd-purple: #563d7c;
$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); // #7952b3
$bd-dark: #2a2730;
$bd-download: #ffe484;
$bd-purple: #4c0bce;
$bd-violet: lighten(saturate($bd-purple, 5%), 15%);
$bd-accent: #ffe484;
$bd-gutter-x: 3rem;

$spacer: 1rem;
: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)};
--bd-pink-rgb: #{to-rgb($pink-500)};
--bd-teal-rgb: #{to-rgb($teal-500)};
}
Loading

0 comments on commit ae7fb97

Please sign in to comment.