mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
Add new docsref page, fix docs border-radius issues (#38491)
* Add new docsref page, fix docs border-radius issues * Remove commented out code * Update docsref.md * Fix no-code example, fix mobile styles * Updates from review * Fix block margin, remove margin-right from pre on mobile since no clipboard icons, adjust masthead snippet * Fix errant styles for border-radius on homepage --------- Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto
GitHub
parent
1fcae4393c
commit
6182c0d962
@ -14,9 +14,10 @@
|
||||
|
||||
// Scroll the active sidebar link into view
|
||||
const sidenav = document.querySelector('.bd-sidebar')
|
||||
if (sidenav) {
|
||||
const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
|
||||
|
||||
if (sidenav && sidenavActiveLink) {
|
||||
const sidenavHeight = sidenav.clientHeight
|
||||
const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
|
||||
const sidenavActiveLinkTop = sidenavActiveLink.offsetTop
|
||||
const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
|
||||
const viewportTop = sidenavActiveLinkTop
|
||||
|
||||
@ -2,12 +2,16 @@
|
||||
// Docs examples
|
||||
//
|
||||
|
||||
.bd-example-snippet {
|
||||
.bd-code-snippet {
|
||||
margin: 0 ($bd-gutter-x * -.5) 1rem;
|
||||
border: solid var(--bs-border-color);
|
||||
border-width: 1px 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-width: 1px;
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +20,7 @@
|
||||
|
||||
position: relative;
|
||||
padding: var(--bd-example-padding);
|
||||
margin: 0 ($bd-gutter-x * -.5);
|
||||
margin: 0 ($bd-gutter-x * -.5) 1rem;
|
||||
border: solid var(--bs-border-color);
|
||||
border-width: 1px 0;
|
||||
@include clearfix();
|
||||
@ -27,13 +31,7 @@
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-width: 1px;
|
||||
@include border-top-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
+ .bd-code-snippet {
|
||||
@include border-top-radius(0);
|
||||
border: solid var(--bs-border-color);
|
||||
border-width: 0 1px 1px;
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
+ p {
|
||||
@ -350,18 +348,22 @@
|
||||
.highlight {
|
||||
position: relative;
|
||||
padding: .75rem ($bd-gutter-x * .5);
|
||||
margin-bottom: 1rem;
|
||||
background-color: var(--bd-pre-bg);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: .75rem 1.25rem;
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
@include border-radius(calc(var(--bs-border-radius) - 1px));
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
pre {
|
||||
margin-right: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: .25rem 0 .875rem;
|
||||
margin-top: .8125rem;
|
||||
margin-right: 1.875rem;
|
||||
margin-bottom: 0;
|
||||
overflow: overlay;
|
||||
white-space: pre;
|
||||
@ -376,32 +378,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bd-code-snippet {
|
||||
margin: 0 ($bd-gutter-x * -.5) $spacer;
|
||||
|
||||
.highlight {
|
||||
margin-bottom: 0;
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
.bd-example {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-toolbar {
|
||||
background-color: var(--bd-pre-bg);
|
||||
}
|
||||
|
||||
.bd-scss-docs {
|
||||
.highlight-toolbar {
|
||||
@include border-top-radius(calc(var(--bs-border-radius) + 1px));
|
||||
+ .highlight {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-file-ref {
|
||||
.highlight-toolbar {
|
||||
@include media-breakpoint-up(md) {
|
||||
@include border-top-radius(calc(var(--bs-border-radius) - 1px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content .bd-code-snippet {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@ -22,6 +22,8 @@
|
||||
|
||||
.bd-code-snippet {
|
||||
margin: 0;
|
||||
border-color: var(--bs-border-color-translucent);
|
||||
border-width: 1px;
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
|
||||
@ -32,7 +34,7 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background-color: rgba(var(--bs-body-color-rgb), .075);
|
||||
@include border-radius(.5rem);
|
||||
@include border-radius(calc(.5rem - 1px));
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-right: 4rem;
|
||||
@ -41,7 +43,6 @@
|
||||
pre {
|
||||
padding: 0;
|
||||
margin-top: .625rem;
|
||||
margin-right: 1.875rem;
|
||||
margin-bottom: .625rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -75,10 +76,6 @@
|
||||
@include font-size(1rem);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.lead {
|
||||
@include font-size(1.25rem);
|
||||
|
||||
49
site/content/docs/5.3/docsref.md
Normal file
49
site/content/docs/5.3/docsref.md
Normal file
@ -0,0 +1,49 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Docs reference
|
||||
description: Examples of Bootstrap's documentation-specific components and styles.
|
||||
aliases: "/docsref/"
|
||||
toc: true
|
||||
robots: noindex,follow
|
||||
sitemap_exclude: true
|
||||
---
|
||||
|
||||
## Buttons
|
||||
|
||||
<button class="btn btn-bd-primary">Primary button</button>
|
||||
<button class="btn btn-bd-accent">Accent button</button>
|
||||
<button class="btn btn-bd-light">Light button</button>
|
||||
|
||||
## Callouts
|
||||
|
||||
{{< callout >}}
|
||||
Default callout
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout warning >}}
|
||||
Warning callout
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout danger >}}
|
||||
Danger callout
|
||||
{{< /callout >}}
|
||||
|
||||
## Code example
|
||||
|
||||
```scss
|
||||
.test {
|
||||
--color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
<div class="bd-example">
|
||||
The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
|
||||
</div>
|
||||
|
||||
{{< example >}}
|
||||
<div class="test">This is a test.</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}
|
||||
|
||||
{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
<div class="bd-example-snippet bd-code-snippet">
|
||||
{{- if eq $show_preview true -}}
|
||||
<div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example{{ with $class }} {{ . }}{{ end }}">
|
||||
<div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
|
||||
{{- $input -}}
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
@ -26,12 +26,18 @@
|
||||
{{- $match = replace $match $capture_start "" -}}
|
||||
{{- $match = replace $match $capture_end "" -}}
|
||||
|
||||
<div class="bd-example-snippet bd-code-snippet">
|
||||
<div class="bd-clipboard">
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
|
||||
</button>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
|
||||
{{- $file -}}
|
||||
</a>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{- $unindent := 0 -}}
|
||||
{{- $found := false -}}
|
||||
{{- $first_line:= index (split $match "\n") 0 -}}
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
{{- $match = replace $match " !default" "" -}}
|
||||
{{- end -}}
|
||||
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
|
||||
{{- $file -}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user