From ad518e20977e2254bce2f4dac867aa28864e1370 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Tue, 26 May 2020 18:02:19 +0200 Subject: [PATCH] Apply utilities in docs styles (#30866) * docs(theming): apply utilities where possible * Update docs-sidebar.html Co-authored-by: XhmikosR --- site/assets/scss/_brand.scss | 5 ---- site/assets/scss/_colors.scss | 4 +-- site/assets/scss/_content.scss | 2 -- site/assets/scss/_footer.scss | 17 ----------- site/assets/scss/_masthead.scss | 2 -- site/assets/scss/_navbar.scss | 4 --- site/assets/scss/_sidebar.scss | 4 --- site/assets/scss/_subnav.scss | 6 ---- site/content/docs/5.0/about/brand.md | 30 +++++++++---------- site/layouts/_default/docs.html | 2 +- site/layouts/_default/single.html | 2 +- site/layouts/partials/docs-navbar.html | 12 ++++---- site/layouts/partials/docs-sidebar.html | 8 ++--- site/layouts/partials/docs-subnav.html | 2 +- site/layouts/partials/footer.html | 14 ++++----- .../partials/home/masthead-followup.html | 6 ++-- 16 files changed, 40 insertions(+), 80 deletions(-) diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss index be6aa91ffb..1585e4f7a2 100644 --- a/site/assets/scss/_brand.scss +++ b/site/assets/scss/_brand.scss @@ -14,7 +14,6 @@ // Individual items .bd-brand-item { - width: 100%; padding: 4rem 1rem; + .bd-brand-item { @@ -35,7 +34,6 @@ // .color-swatches { - display: flex; margin: 0 -5px; // Docs colors @@ -56,9 +54,6 @@ .color-swatch { width: 4rem; height: 4rem; - margin-right: .25rem; - margin-left: .25rem; - @include border-radius(); @include media-breakpoint-up(md) { width: 6rem; diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss index 751ce3c763..a71a8973b8 100644 --- a/site/assets/scss/_colors.scss +++ b/site/assets/scss/_colors.scss @@ -152,5 +152,5 @@ .bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; } .bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; } -.bd-white { color: color-yiq($white); background-color: $white; } -.bd-black { color: color-yiq($black); background-color: $black; } +.bd-white { color: color-contrast($white); background-color: $white; } +.bd-black { color: color-contrast($black); background-color: $black; } diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 4ba926c907..4e744895fd 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -3,8 +3,6 @@ // .bd-content { - order: 1; - // Offset for the sticky header > [id] { @include media-breakpoint-up(md) { diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss index 0d9bf454a3..48ad349de0 100644 --- a/site/assets/scss/_footer.scss +++ b/site/assets/scss/_footer.scss @@ -15,21 +15,4 @@ color: $link-color; } } - - p { - margin-bottom: 0; - } -} - -.bd-footer-links { - padding-left: 0; - margin-bottom: 1rem; - - li { - display: inline-block; - - + li { - margin-left: 1rem; - } - } } diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index f70b4b837c..e524f271af 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -28,8 +28,6 @@ .home-icon { width: 6rem; height: 6rem; - padding: 1.5rem; - color: $white; @include border-radius(25%); box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); } diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index c8e1a2d309..54d0c425c7 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -5,10 +5,8 @@ @include media-breakpoint-down(md) { .navbar-nav-scroll { width: 100%; - margin-top: .25rem; .navbar-nav { - padding: .5rem 0; margin: -.5rem 0; overflow-x: auto; white-space: nowrap; @@ -34,9 +32,7 @@ } .navbar-nav-svg { - display: inline-block; width: 1rem; height: 1rem; - vertical-align: text-top; } } diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index 4e9e0846c2..be871354d0 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -15,13 +15,10 @@ } a { - display: inline-flex; - align-items: center; padding: .1875rem .5rem; margin-top: .125rem; color: rgba($black, .65); text-decoration: if($link-decoration == none, null, none); - @include border-radius(.25rem); &:hover, &:focus { @@ -57,7 +54,6 @@ // Adjust font size and font weights in submenu + ul { @include font-size(.875rem); - font-weight: 400; } } diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index fac919e22f..e3ce8ba14c 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -26,8 +26,6 @@ } .bd-search { - position: relative; // To contain the Algolia search - @include media-breakpoint-down(sm) { width: 100%; } @@ -37,7 +35,3 @@ box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); } } - -.bd-search-docs-toggle { - color: $gray-900; -} diff --git a/site/content/docs/5.0/about/brand.md b/site/content/docs/5.0/about/brand.md index e087f804bd..290f92e3ff 100644 --- a/site/content/docs/5.0/about/brand.md +++ b/site/content/docs/5.0/about/brand.md @@ -13,18 +13,18 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in San Francisco Display Semibold. **Do not use the Twitter bird** in association with Bootstrap.
-
+
Bootstrap
-
+
Bootstrap
-
+
Bootstrap
-
+
Bootstrap
@@ -34,13 +34,13 @@ Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Boo Download the Bootstrap mark in one of three styles, each available as an SVG file. **Click to download the logos**.
- + Bootstrap - + Bootstrap - + Bootstrap
@@ -50,15 +50,15 @@ Download the Bootstrap mark in one of three styles, each available as an SVG fil The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**.
-
+
Bootstrap Right
-
+
BootStrap Wrong
-
+
Twitter Bootstrap Wrong
@@ -68,9 +68,9 @@ The project and framework should always be referred to as **Bootstrap**. No Twit Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap. -
-
-
-
-
+
+
+
+
+
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 41757d423a..01890869af 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -27,7 +27,7 @@
{{ end }} -
+
{{ if .Page.Params.sections }}
{{ range .Page.Params.sections }} diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index 8ffbda50b7..0ce75ce282 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -20,7 +20,7 @@
-
+
{{ .Content }}
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 4965adecc6..4100084945 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -4,8 +4,8 @@ {{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }} -
-