diff options
author | Gaƫl Poupard <ffoodd@users.noreply.github.com> | 2020-05-26 19:02:19 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-05-26 19:02:19 +0300 |
commit | ad518e20977e2254bce2f4dac867aa28864e1370 (patch) | |
tree | e2c3887bf499d74f8b70213919426593ab5d59e3 /site | |
parent | 3935fc04e90416f72767f7e856fa41f4a334dd24 (diff) |
Apply utilities in docs styles (#30866)
* docs(theming): apply utilities where possible
* Update docs-sidebar.html
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'site')
-rw-r--r-- | site/assets/scss/_brand.scss | 5 | ||||
-rw-r--r-- | site/assets/scss/_colors.scss | 4 | ||||
-rw-r--r-- | site/assets/scss/_content.scss | 2 | ||||
-rw-r--r-- | site/assets/scss/_footer.scss | 17 | ||||
-rw-r--r-- | site/assets/scss/_masthead.scss | 2 | ||||
-rw-r--r-- | site/assets/scss/_navbar.scss | 4 | ||||
-rw-r--r-- | site/assets/scss/_sidebar.scss | 4 | ||||
-rw-r--r-- | site/assets/scss/_subnav.scss | 6 | ||||
-rw-r--r-- | site/content/docs/5.0/about/brand.md | 30 | ||||
-rw-r--r-- | site/layouts/_default/docs.html | 2 | ||||
-rw-r--r-- | site/layouts/_default/single.html | 2 | ||||
-rw-r--r-- | site/layouts/partials/docs-navbar.html | 12 | ||||
-rw-r--r-- | site/layouts/partials/docs-sidebar.html | 8 | ||||
-rw-r--r-- | site/layouts/partials/docs-subnav.html | 2 | ||||
-rw-r--r-- | site/layouts/partials/footer.html | 14 | ||||
-rw-r--r-- | site/layouts/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. <div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3"> - <div class="bd-brand-item"> + <div class="bd-brand-item w-100"> <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy"> </div> - <div class="bd-brand-item inverse"> + <div class="bd-brand-item w-100 inverse"> <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy"> </div> </div> <div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3"> - <div class="bd-brand-item"> + <div class="bd-brand-item w-100"> <span class="h1">Bootstrap</span> </div> - <div class="bd-brand-item inverse"> + <div class="bd-brand-item w-100 inverse"> <span class="h1">Bootstrap</span> </div> </div> @@ -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**. <div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3"> - <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" download class="bd-brand-item" title="Download solid logo"> + <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" download class="bd-brand-item w-100" title="Download solid logo"> <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy"> </a> - <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" download class="bd-brand-item inverse" title="Download outlined logo"> + <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" download class="bd-brand-item w-100 inverse" title="Download outlined logo"> <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy"> </a> - <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" download class="bd-brand-item inverse" title="Download inverted logo"> + <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" download class="bd-brand-item w-100 inverse" title="Download inverted logo"> <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144" loading="lazy"> </a> </div> @@ -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**. <div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3"> - <div class="bd-brand-item"> + <div class="bd-brand-item w-100"> <span class="h3">Bootstrap</span> <strong class="text-success">Right</strong> </div> - <div class="bd-brand-item"> + <div class="bd-brand-item w-100"> <span class="h3 text-muted">BootStrap</span> <strong class="text-warning">Wrong</strong> </div> - <div class="bd-brand-item"> + <div class="bd-brand-item w-100"> <span class="h3 text-muted">Twitter Bootstrap</span> <strong class="text-warning">Wrong</strong> </div> @@ -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. -<div class="color-swatches"> - <div class="color-swatch bd-purple"></div> - <div class="color-swatch bd-purple-light"></div> - <div class="color-swatch bd-purple-lighter"></div> - <div class="color-swatch bd-gray"></div> +<div class="color-swatches d-flex"> + <div class="color-swatch bd-purple rounded mx-1"></div> + <div class="color-swatch bd-purple-light rounded mx-1"></div> + <div class="color-swatch bd-purple-lighter rounded mx-1"></div> + <div class="color-swatch bd-gray rounded mx-1"></div> </div> 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 @@ </div> {{ end }} - <main class="bd-content pl-lg-4"> + <main class="bd-content order-1 pl-lg-4"> {{ if .Page.Params.sections }} <div class="row g-3"> {{ 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 @@ </div> </header> - <main class="bd-content py-5" id="content"> + <main class="bd-content order-1 py-5" id="content"> <div class="container"> {{ .Content }} </div> 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") }} </a> - <div class="navbar-nav-scroll order-3 order-md-0 d-flex justify-content-center justify-content-md-start"> - <ul class="navbar-nav bd-navbar-nav flex-row"> + <div class="navbar-nav-scroll order-3 order-md-0 d-flex justify-content-center justify-content-md-start mt-1 mt-md-0"> + <ul class="navbar-nav bd-navbar-nav flex-row py-2 py-md-0"> <li class="nav-item"> <a class="nav-link{{ if .IsHome }} active" aria-current="page{{ end }}" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> </li> @@ -33,22 +33,22 @@ <ul class="navbar-nav ml-sm-auto"> <li class="nav-item"> <a class="nav-link px-1 mx-1 py-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener" aria-label="GitHub"> - {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }} + {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }} </a> </li> <li class="nav-item"> <a class="nav-link px-1 mx-1 py-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener" aria-label="Twitter"> - {{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }} + {{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }} </a> </li> <li class="nav-item"> <a class="nav-link px-1 mx-1 py-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener" aria-label="Slack"> - {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }} + {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }} </a> </li> <li class="nav-item"> <a class="nav-link px-1 mx-1 py-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener" aria-label="Open Collective"> - {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }} + {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }} </a> </li> </ul> diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html index 23e9bbad36..6a665b826b 100644 --- a/site/layouts/partials/docs-sidebar.html +++ b/site/layouts/partials/docs-sidebar.html @@ -16,17 +16,17 @@ {{- $is_active_group := eq $.Page.Params.group $group_slug }} <li class="my-1{{ if $is_active_group }} active{{ end }}"> - <a class="{{ if not $is_active_group }}collapsed{{ end }}" data-toggle="collapse" href="#{{ $group_slug }}-collapse" role="button" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}> + <a class="d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-toggle="collapse" href="#{{ $group_slug }}-collapse" role="button" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}> {{ $group.title }} </a> {{- if $group.pages }} - <ul class="list-unstyled mb-2 collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse"> + <ul class="list-unstyled font-weight-normal mb-2 collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse"> {{- range $doc := $group.pages -}} {{- $doc_slug := $doc.title | urlize -}} {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}} {{- $href := printf "/docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }} - <li><a href="{{ $href }}"{{ if $is_active }} class="active" aria-current="page"{{ end }}>{{ $doc.title }}</a></li> + <li><a href="{{ $href }}" class="d-inline-flex align-items-center rounded{{ if $is_active }} active{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }}</a></li> {{- end }} </ul> {{- end }} @@ -35,7 +35,7 @@ <li class="my-3 mx-4 border-top"></li> <li{{ if eq $page_slug "migration" }} class="active"{{ end }}> - <a href="/docs/{{ $.Site.Params.docs_version }}/migration/"> + <a href="/docs/{{ $.Site.Params.docs_version }}/migration/" class="d-inline-flex align-items-center rounded"> Migration </a> </li> diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html index 6d60640ef1..bb082cccdb 100644 --- a/site/layouts/partials/docs-subnav.html +++ b/site/layouts/partials/docs-subnav.html @@ -1,6 +1,6 @@ <nav class="bd-subnavbar pt-2 pb-3 pb-md-2" aria-label="Secondary navigation"> <div class="container-xl d-flex align-items-md-center flex-wrap"> - <form class="bd-search mb-2 mb-md-0 mr-auto"> + <form class="bd-search position-relative mb-2 mb-md-0 mr-auto"> <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}"> </form> diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html index 8c650a5d0c..2076c426e4 100644 --- a/site/layouts/partials/footer.html +++ b/site/layouts/partials/footer.html @@ -1,12 +1,12 @@ <footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-left"> <div class="container"> - <ul class="bd-footer-links"> - <li><a href="{{ .Site.Params.github_org }}">GitHub</a></li> - <li><a href="https://twitter.com/{{ .Site.Params.twitter }}">Twitter</a></li> - <li><a href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li> - <li><a href="/docs/{{ .Site.Params.docs_version }}/about/overview/">About</a></li> + <ul class="bd-footer-links pl-0 mb-3"> + <li class="d-inline-block"><a href="{{ .Site.Params.github_org }}">GitHub</a></li> + <li class="d-inline-block ml-3"><a href="https://twitter.com/{{ .Site.Params.twitter }}">Twitter</a></li> + <li class="d-inline-block ml-3"><a href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li> + <li class="d-inline-block ml-3"><a href="/docs/{{ .Site.Params.docs_version }}/about/overview/">About</a></li> </ul> - <p>Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</p> - <p>Currently v{{ .Site.Params.current_version }}. Code licensed <a href="{{ .Site.Params.repo }}/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p> + <p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</p> + <p class="mb-0">Currently v{{ .Site.Params.current_version }}. Code licensed <a href="{{ .Site.Params.repo }}/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p> </div> </footer> diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html index 0c8f26063a..13d42a282e 100644 --- a/site/layouts/partials/home/masthead-followup.html +++ b/site/layouts/partials/home/masthead-followup.html @@ -1,7 +1,7 @@ {{ "<!-- Icons by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }} <div class="container py-3 my-3 py-md-5 my-md-5 text-center"> - <div class="home-icon home-icon-blue mx-auto mb-3"> + <div class="home-icon home-icon-blue text-white p-4 mx-auto mb-3"> {{ partial "icons/import.svg" (dict "width" "48" "height" "48") }} </div> <h2 class="display-4">Installation</h2> @@ -16,7 +16,7 @@ </div> <div class="container py-3 my-3 py-md-5 my-md-5 text-center"> - <div class="home-icon home-icon-purple mx-auto mb-3"> + <div class="home-icon home-icon-purple text-white p-4 mx-auto mb-3"> {{ partial "icons/download.svg" (dict "width" "48" "height" "48") }} </div> <h2 class="display-4">BootstrapCDN</h2> @@ -35,7 +35,7 @@ </div> <div class="container py-3 my-3 py-md-5 my-md-5 text-center"> - <div class="home-icon home-icon-yellow mx-auto mb-3"> + <div class="home-icon home-icon-yellow text-white p-4 mx-auto mb-3"> {{ partial "icons/lightning.svg" (dict "width" "48" "height" "48") }} </div> <h2 class="display-4">Official Themes</h2> |