diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site')
20 files changed, 793 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_scrolling.scss b/vendor/twbs/bootstrap/site/assets/scss/_scrolling.scss new file mode 100644 index 000000000..201796003 --- /dev/null +++ b/vendor/twbs/bootstrap/site/assets/scss/_scrolling.scss @@ -0,0 +1,13 @@ +// When navigating with the keyboard, prevent focus from landing behind the sticky header + +main { + a, + button, + h2, + h3, + h4, + [tabindex="0"] { + scroll-margin-top: 80px; + scroll-margin-bottom: 100px; + } +} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/badges/badges.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/badges/badges.css new file mode 100644 index 000000000..b6ce0f5b8 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/badges/badges.css @@ -0,0 +1,3 @@ +.badge > a { + color: inherit; +} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/badges/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/badges/index.html new file mode 100644 index 000000000..a452d3666 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/badges/index.html @@ -0,0 +1,149 @@ +--- +layout: examples +title: Badges +extra_css: + - "badges.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="x-circle-fill" viewBox="0 0 16 16"> + <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/> + </symbol> +</svg> + +<div class="d-flex gap-2 justify-content-center py-5"> + <span class="badge text-bg-primary rounded-pill">Primary</span> + <span class="badge text-bg-secondary rounded-pill">Secondary</span> + <span class="badge text-bg-success rounded-pill">Success</span> + <span class="badge text-bg-danger rounded-pill">Danger</span> + <span class="badge text-bg-warning rounded-pill">Warning</span> + <span class="badge text-bg-info rounded-pill">Info</span> + <span class="badge text-bg-light rounded-pill">Light</span> + <span class="badge text-bg-dark rounded-pill">Dark</span> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex gap-2 justify-content-center py-5"> + <span class="badge bg-primary-subtle text-primary-emphasis rounded-pill">Primary</span> + <span class="badge bg-secondary-subtle text-secondary-emphasis rounded-pill">Secondary</span> + <span class="badge bg-success-subtle text-success-emphasis rounded-pill">Success</span> + <span class="badge bg-danger-subtle text-danger-emphasis rounded-pill">Danger</span> + <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill">Warning</span> + <span class="badge bg-info-subtle text-info-emphasis rounded-pill">Info</span> + <span class="badge bg-light-subtle text-light-emphasis rounded-pill">Light</span> + <span class="badge bg-dark-subtle text-dark-emphasis rounded-pill">Dark</span> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex gap-2 justify-content-center py-5"> + <span class="badge bg-primary-subtle border border-primary-subtle text-primary-emphasis rounded-pill">Primary</span> + <span class="badge bg-secondary-subtle border border-secondary-subtle text-secondary-emphasis rounded-pill">Secondary</span> + <span class="badge bg-success-subtle border border-success-subtle text-success-emphasis rounded-pill">Success</span> + <span class="badge bg-danger-subtle border border-danger-subtle text-danger-emphasis rounded-pill">Danger</span> + <span class="badge bg-warning-subtle border border-warning-subtle text-warning-emphasis rounded-pill">Warning</span> + <span class="badge bg-info-subtle border border-info-subtle text-info-emphasis rounded-pill">Info</span> + <span class="badge bg-light-subtle border border-light-subtle text-light-emphasis rounded-pill">Light</span> + <span class="badge bg-dark-subtle border border-dark-subtle text-dark-emphasis rounded-pill">Dark</span> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex gap-2 justify-content-center py-5"> + <span class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Primary + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Secondary + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Success + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Danger + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Warning + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Info + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-light-subtle border border-dark-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Light + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Dark + </span> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex gap-2 justify-content-center py-5"> + <span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill"> + <span class="px-1">Primary</span> + <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> + </span> + <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill"> + <span class="px-1">Primary</span> + <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> + </span> + <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill"> + <span class="px-1">Primary</span> + <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> + </span> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex gap-2 justify-content-center py-5"> + <span class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> + Primary + <span class="vr mx-2"></span> + <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> + Secondary + <span class="vr mx-2"></span> + <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> + Success + <span class="vr mx-2"></span> + <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> + Danger + <span class="vr mx-2"></span> + <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> + Warning + <span class="vr mx-2"></span> + <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> + Info + <span class="vr mx-2"></span> + <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> + Light + <span class="vr mx-2"></span> + <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> + </span> + <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill"> + <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> + Dark + <span class="vr mx-2"></span> + <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> + </span> +</div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css new file mode 100644 index 000000000..a6be55861 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css @@ -0,0 +1,50 @@ +.breadcrumb-chevron { + --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); + gap: .5rem; +} +.breadcrumb-chevron .breadcrumb-item { + display: flex; + gap: inherit; + align-items: center; + padding-left: 0; + line-height: 1; +} +.breadcrumb-chevron .breadcrumb-item::before { + gap: inherit; + float: none; + width: 1rem; + height: 1rem; +} + +.breadcrumb-custom .breadcrumb-item { + position: relative; + flex-grow: 1; + padding: .75rem 3rem; +} +.breadcrumb-custom .breadcrumb-item::before { + display: none; +} +.breadcrumb-custom .breadcrumb-item::after { + position: absolute; + top: 50%; + right: -25px; + z-index: 1; + display: inline-block; + width: 50px; + height: 50px; + margin-top: -25px; + content: ""; + background-color: var(--bs-tertiary-bg); + border-top-right-radius: .5rem; + box-shadow: 1px -1px var(--bs-border-color); + transform: scale(.707) rotate(45deg); +} +.breadcrumb-custom .breadcrumb-item:first-child { + padding-left: 1.5rem; +} +.breadcrumb-custom .breadcrumb-item:last-child { + padding-right: 1.5rem; +} +.breadcrumb-custom .breadcrumb-item:last-child::after { + display: none; +} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/breadcrumbs/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/breadcrumbs/index.html new file mode 100644 index 000000000..2d90962d0 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/breadcrumbs/index.html @@ -0,0 +1,88 @@ +--- +layout: examples +title: Breadcrumbs +extra_css: + - "breadcrumbs.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="house-door-fill" viewBox="0 0 16 16"> + <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/> + </symbol> +</svg> + +<div class="container my-5"> + <nav aria-label="breadcrumb"> + <ol class="breadcrumb p-3 bg-body-tertiary rounded-3"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item"><a href="#">Library</a></li> + <li class="breadcrumb-item active" aria-current="page">Data</li> + </ol> + </nav> +</div> + +<div class="b-example-divider"></div> + +<div class="container my-5"> + <nav aria-label="breadcrumb"> + <ol class="breadcrumb p-3 bg-body-tertiary rounded-3"> + <li class="breadcrumb-item"> + <a class="link-body-emphasis" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg> + <span class="visually-hidden">Home</span> + </a> + </li> + <li class="breadcrumb-item"> + <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a> + </li> + <li class="breadcrumb-item active" aria-current="page"> + Data + </li> + </ol> + </nav> +</div> + +<div class="b-example-divider"></div> + +<div class="container my-5"> + <nav aria-label="breadcrumb"> + <ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3"> + <li class="breadcrumb-item"> + <a class="link-body-emphasis" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg> + <span class="visually-hidden">Home</span> + </a> + </li> + <li class="breadcrumb-item"> + <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a> + </li> + <li class="breadcrumb-item active" aria-current="page"> + Data + </li> + </ol> + </nav> +</div> + +<div class="b-example-divider"></div> + +<div class="container my-5"> + <nav aria-label="breadcrumb"> + <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3"> + <li class="breadcrumb-item"> + <a class="link-body-emphasis fw-semibold text-decoration-none" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg> + Home + </a> + </li> + <li class="breadcrumb-item"> + <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a> + </li> + <li class="breadcrumb-item active" aria-current="page"> + Data + </li> + </ol> + </nav> +</div> + +<div class="b-example-divider"></div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/buttons/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/buttons/index.html new file mode 100644 index 000000000..f1b5ea6ba --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/buttons/index.html @@ -0,0 +1,88 @@ +--- +layout: examples +title: Buttons +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="arrow-right-short" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/> + </symbol> + <symbol id="x-lg" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"/> + <path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"/> + </symbol> +</svg> + +<div class="d-flex gap-2 justify-content-center py-5"> + <button class="btn btn-primary rounded-pill px-3" type="button">Primary</button> + <button class="btn btn-secondary rounded-pill px-3" type="button">Secondary</button> + <button class="btn btn-success rounded-pill px-3" type="button">Success</button> + <button class="btn btn-danger rounded-pill px-3" type="button">Danger</button> + <button class="btn btn-warning rounded-pill px-3" type="button">Warning</button> + <button class="btn btn-info rounded-pill px-3" type="button">Info</button> + <button class="btn btn-light rounded-pill px-3" type="button">Light</button> + <button class="btn btn-dark rounded-pill px-3" type="button">Dark</button> + <button class="btn btn-link rounded-pill px-3" type="button">Link</button> +</div> + +<div class="b-example-divider"></div> + +<div class="col-lg-6 col-xxl-4 my-5 mx-auto"> + <div class="d-grid gap-2"> + <button class="btn btn-outline-secondary" type="button">Secondary action</button> + <button class="btn btn-primary" type="button">Primary action</button> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex gap-2 justify-content-center py-5"> + <button class="btn btn-primary d-inline-flex align-items-center" type="button"> + Primary icon + <svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg> + </button> + <button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button"> + Secondary icon + <svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg> + </button> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex gap-2 justify-content-center py-5"> + <button class="btn btn-primary" type="button" disabled> + <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> + <span class="visually-hidden">Loading...</span> + </button> + <button class="btn btn-primary" type="button" disabled> + <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> + Loading... + </button> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex gap-2 justify-content-center pt-5 pb-4"> + <button class="btn btn-primary rounded-circle p-2 lh-1" type="button"> + <svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg> + <span class="visually-hidden">Dismiss</span> + </button> + <button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button"> + <svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg> + <span class="visually-hidden">Dismiss</span> + </button> +</div> + +<div class="d-flex gap-2 justify-content-center pb-5"> + <button class="btn btn-primary rounded-circle p-3 lh-1" type="button"> + <svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg> + <span class="visually-hidden">Dismiss</span> + </button> + <button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button"> + <svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg> + <span class="visually-hidden">Dismiss</span> + </button> +</div> + +<div class="b-example-divider"></div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/jumbotrons/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/jumbotrons/index.html new file mode 100644 index 000000000..ded1144e6 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/jumbotrons/index.html @@ -0,0 +1,82 @@ +--- +layout: examples +title: Jumbotrons +extra_css: + - "jumbotrons.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + <symbol id="arrow-right-short" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/> + </symbol> + <symbol id="check2-circle" viewBox="0 0 16 16"> + <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/> + <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/> + </symbol> +</svg> + +<div class="container my-5"> + <div class="p-5 text-center bg-body-tertiary rounded-3"> + <svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100"><use xlink:href="#bootstrap"/></svg> + <h1 class="text-body-emphasis">Jumbotron with icon</h1> + <p class="col-lg-8 mx-auto fs-5 text-muted"> + This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action. + </p> + <div class="d-inline-flex gap-2 mb-5"> + <button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button"> + Call to action + <svg class="bi ms-2" width="24" height="24"><use xlink:href="#arrow-right-short"/></svg> + </button> + <button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button"> + Secondary link + </button> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="container my-5"> + <div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5"> + <button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button> + <svg class="bi mt-5 mb-3" width="48" height="48"><use xlink:href="#check2-circle"/></svg> + <h1 class="text-body-emphasis">Placeholder jumbotron</h1> + <p class="col-lg-6 mx-auto mb-4"> + This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action. + </p> + <button class="btn btn-primary px-5 mb-5" type="button"> + Call to action + </button> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="my-5"> + <div class="p-5 text-center bg-body-tertiary"> + <div class="container py-5"> + <h1 class="text-body-emphasis">Full-width jumbotron</h1> + <p class="col-lg-8 mx-auto lead"> + This takes the basic jumbotron above and makes its background edge-to-edge with a <code>.container</code> inside to align content. Similar to above, it's been recreated with built-in grid and utility classes. + </p> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="container my-5"> + <div class="p-5 text-center bg-body-tertiary rounded-3"> + <h1 class="text-body-emphasis">Basic jumbotron</h1> + <p class="lead"> + This is a simple Bootstrap jumbotron that sits within a <code>.container</code>, recreated with built-in utility classes. + </p> + </div> +</div> + +<div class="b-example-divider"></div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css new file mode 100644 index 000000000..d7d065ed6 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css @@ -0,0 +1 @@ +.border-dashed { --bs-border-style: dashed; } diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/focus-ring.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/focus-ring.md new file mode 100644 index 000000000..5f6e77073 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/focus-ring.md @@ -0,0 +1,68 @@ +--- +layout: docs +title: Focus ring +description: Utility classes that allows you to add and modify custom focus ring styles to elements and components. +group: helpers +toc: true +added: "5.3" +--- + +The `.focus-ring` helper removes the default `outline` on `:focus`, replacing it with a `box-shadow` that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the `:root` level, that can be modified for any element or component. + +## Example + +Click directly on the link below to see the focus ring in action, or into the example below and then press <kbd>Tab</kbd>. + +{{< example >}} +<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2"> + Custom focus ring +</a> +{{< /example >}} + +## Customize + +Modify the styling of a focus ring with our CSS variables, Sass variables, utilities, or custom styles. + +### CSS variables + +Modify the `--bs-focus-ring-*` CSS variables as needed to change the default appearance. + +{{< example >}} +<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-color: rgba(var(--bs-success-rgb), .25)"> + Green focus ring +</a> +{{< /example >}} + +`.focus-ring` sets styles via global CSS variables that can be overridden on any parent element, as shown above. These variables are generated from their Sass variable counterparts. + +{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}} + +By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values. Modify them to change the default appearance. + +{{< example >}} +<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px"> + Blurry offset focus ring +</a> +{{< /example >}} + +### Sass + +Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project. + +{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} + +### Utilities + +In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color#theme-colors" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support. + +{{< example >}} +{{< focus-ring.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<p><a href="#" class="d-inline-flex focus-ring focus-ring-{{ .name }} py-1 px-2 text-decoration-none border rounded-2">{{ title .name }} focus</a></p> +{{- end -}} +{{< /focus-ring.inline >}} +{{< /example >}} + +Focus ring utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-focus-ring" file="scss/_utilities.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/icon-link.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/icon-link.md new file mode 100644 index 000000000..9a0bffcd2 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/icon-link.md @@ -0,0 +1,88 @@ +--- +layout: docs +title: Icon link +description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons. +group: helpers +toc: true +added: 5.3 +--- + +The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`. + +Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being used, but you can use any icon or image you like. + +{{< callout >}} +When icons are purely decorative, they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding `role="img"` and an appropriate `aria-label="..."` to the SVGs. +{{< /callout >}} + +## Example + +Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored. + +{{< example >}} +<a class="icon-link" href="#"> + <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg> + Icon link +</a> +{{< /example >}} + +{{< example >}} +<a class="icon-link" href="#"> + Icon link + <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> +</a> +{{< /example >}} + +## Style on hover + +Add `.icon-link-hover` to move the icon to the right on hover. + +{{< example >}} +<a class="icon-link icon-link-hover" href="#"> + Icon link + <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> +</a> +{{< /example >}} + +## Customize + +Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles. + +### CSS variables + +Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to change the default appearance. + +Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable: + +{{< example >}} +<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#"> + <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg> + Icon link +</a> +{{< /example >}} + +Customize the color by overriding the `--bs-link-*` CSS variable: + +{{< example >}} +<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#"> + Icon link + <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> +</a> +{{< /example >}} + +### Sass + +Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project. + +{{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}} + +### Utilities + +Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset. + +{{< example >}} +<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#"> + Icon link + <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> +</a> +{{< /example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/link.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/link.md new file mode 100644 index 000000000..1b8eaa1ef --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/link.md @@ -0,0 +1,105 @@ +--- +layout: docs +title: Link +description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more. +group: utilities +toc: true +added: 5.3 +--- + +## Link opacity + +Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color's opacity can lead to links with [*insufficient* contrast]({{< docsref "getting-started/accessibility#color-contrast" >}}). + +{{< example >}} +<p><a class="link-opacity-10" href="#">Link opacity 10</a></p> +<p><a class="link-opacity-25" href="#">Link opacity 25</a></p> +<p><a class="link-opacity-50" href="#">Link opacity 50</a></p> +<p><a class="link-opacity-75" href="#">Link opacity 75</a></p> +<p><a class="link-opacity-100" href="#">Link opacity 100</a></p> +{{< /example >}} + +You can even change the opacity level on hover. + +{{< example >}} +<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p> +<p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p> +<p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p> +<p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p> +<p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p> +{{< /example >}} + +## Link underlines + +### Underline color + +Change the underline's color independent of the link text color. + +{{< example >}} +{{< link-underline-colors.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<p><a href="#" class="link-underline-{{ .name }}">{{ .name | title }} underline</a></p> +{{- end -}} +{{< /link-underline-colors.inline >}} +{{< /example >}} + +### Underline offset + +Change the underline's distance from your text. Offset is set in `em` units to automatically scale with the element's current `font-size`. + +{{< example >}} +<p><a href="#">Default link</a></p> +<p><a class="link-offset-1" href="#">Offset 1 link</a></p> +<p><a class="link-offset-2" href="#">Offset 2 link</a></p> +<p><a class="link-offset-3" href="#">Offset 3 link</a></p> +{{< /example >}} + +### Underline opacity + +Change the underline's opacity. Requires adding `.link-underline` to first set an `rgba()` color we use to then modify the alpha opacity. + +{{< example >}} +<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p> +<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p> +<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p> +<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p> +<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p> +<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p> +{{< /example >}} + +### Hover variants + +Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-underline-opacity` utilities include `:hover` variants by default. Mix and match to create unique link styles. + +{{< example >}} +<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#"> + Underline opacity 0 +</a> +{{< /example >}} + +## Colored links + +[Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset. + +{{< example >}} +{{< colored-links.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<p><a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p> +{{- end -}} +{{< /colored-links.inline >}} +<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p> +{{< /example >}} + +{{< callout info >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} +{{< /callout >}} + +## Sass + +In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. + +### Utilities API + +Link utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-links" file="scss/_utilities.scss" >}} diff --git a/vendor/twbs/bootstrap/site/layouts/shortcodes/js-docs.html b/vendor/twbs/bootstrap/site/layouts/shortcodes/js-docs.html new file mode 100644 index 000000000..fad4f034f --- /dev/null +++ b/vendor/twbs/bootstrap/site/layouts/shortcodes/js-docs.html @@ -0,0 +1,58 @@ +{{- /* + Usage: `js-docs name="name" file="file/_location.js` + + Prints everything between `// js-docs-start "name"` and `// js-docs-end "name"` + comments in the docs. +*/ -}} + +{{- $name := .Get "name" -}} +{{- $file := .Get "file" -}} + +{{- /* If any parameters are missing, print an error and exit */ -}} +{{- if or (not $name) (not $file) -}} + {{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}} +{{- else -}} + {{- $capture_start := printf "// js-docs-start %s\n" $name -}} + {{- $capture_end := printf "// js-docs-end %s" $name -}} + {{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}} + + {{- $match := findRE $regex (readFile $file) -}} + {{- $match = index $match 0 -}} + + {{- if not $match -}} + {{- errorf "%s: %q: Got no matches for name=%q in file=%q!" .Position .Name $name $file -}} + {{- end -}} + + {{- $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> + {{- $unindent := 0 -}} + {{- $found := false -}} + {{- $first_line:= index (split $match "\n") 0 -}} + {{- range $char := split $first_line "" -}} + {{- if and (eq $char " ") (not $found) -}} + {{- $unindent = add $unindent 1 -}} + {{- else -}} + {{- $found = true -}} + {{- end -}} + {{- end -}} + {{- $output := "" -}} + {{- if (gt $unindent 0) -}} + {{- $prefix := (strings.Repeat $unindent " ") -}} + {{- range $line := split $match "\n" -}} + {{- $line = strings.TrimPrefix $prefix $line -}} + {{ $output = printf "%s%s\n" $output $line }} + {{- end -}} + {{- $output = chomp $output -}} + {{- else -}} + {{- $output = $match -}} + {{- end -}} + {{- highlight $output "js" "" -}} + </div> +{{- end -}} diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/badges.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/badges.png Binary files differnew file mode 100644 index 000000000..bcaae7ecf --- /dev/null +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/badges.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/badges@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/badges@2x.png Binary files differnew file mode 100644 index 000000000..5841c7adb --- /dev/null +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/badges@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/breadcrumbs.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/breadcrumbs.png Binary files differnew file mode 100644 index 000000000..b67c355c9 --- /dev/null +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/breadcrumbs.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png Binary files differnew file mode 100644 index 000000000..ee8466573 --- /dev/null +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/buttons.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/buttons.png Binary files differnew file mode 100644 index 000000000..e628d9b03 --- /dev/null +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/buttons.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/buttons@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/buttons@2x.png Binary files differnew file mode 100644 index 000000000..2e1544034 --- /dev/null +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/buttons@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/jumbotrons.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/jumbotrons.png Binary files differnew file mode 100644 index 000000000..daafe594b --- /dev/null +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/jumbotrons.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/jumbotrons@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/jumbotrons@2x.png Binary files differnew file mode 100644 index 000000000..4e549a484 --- /dev/null +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/jumbotrons@2x.png |
