mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-27 14:46:01 +03:00
Code Activity

Redesign docs layout

Browse Source 
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
This commit is contained in:
Mark Otto
2022-01-27 15:02:34 -08:00
parent b71cd6eb7d
commit 0bf9187ee3
30 changed files with 384 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/assets/js/application.js
+17 -1
View File
@@ -15,6 +15,21 @@
(function () {
'use strict'
// Scroll the active sidebar link into view
var sidenav = document.querySelector('.bd-links')
if (sidenav) {
var sidenavHeight = sidenav.clientHeight
var sidenavActiveLink = document.querySelector('#bd-docs-nav .active')
var sidenavActiveLinkTop = sidenavActiveLink.offsetTop
var sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
var viewportTop = sidenavActiveLinkTop
var viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight
if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {
sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
}
}
// Tooltip and popover demos
document.querySelectorAll('.tooltip-demo')
.forEach(function (tooltip) {
@@ -119,7 +134,8 @@
// Insert copy to clipboard button before .highlight
var btnTitle = 'Copy to clipboard'
var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard">Copy</button></div>'
var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" ><svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg></button></div>'
document.querySelectorAll('div.highlight')
.forEach(function (element) {
element.insertAdjacentHTML('beforebegin', btnHtml)
site/assets/scss/_algolia.scss
+5 -2
View File
@@ -12,12 +12,15 @@
margin: $dropdown-spacer 0 0;
@include font-size(.875rem);
background-color: $dropdown-bg;
background-clip: padding-box;
border: $dropdown-border-width solid $dropdown-border-color;
@include border-radius($dropdown-border-radius);
@include box-shadow($dropdown-box-shadow);
box-shadow: $dropdown-box-shadow;
@include media-breakpoint-up(md) {
width: 400px;
width: 500px;
margin-top: .5rem;
margin-left: -110px;
}
}
site/assets/scss/_buttons.scss
+14 -5
View File
@@ -8,11 +8,14 @@
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bd-violet);
--bs-btn-border-color: var(--bd-violet);
--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: #{shade-color($bd-violet, 20%)};
--bs-btn-hover-border-color: #{shade-color($bd-violet, 20%)};
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
--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
@@ -24,13 +27,19 @@
--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);
}
.btn-bd-light {
--bs-btn-color: var(--bs-gray-600);
--bs-btn-border-color: var(--bs-gray-300);
--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);
}
site/assets/scss/_callouts.scss
+7 -17
View File
@@ -6,9 +6,8 @@
padding: 1.25rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
border: 1px solid $gray-200;
border-left-width: .25rem;
@include border-radius();
background-color: var(--bd-callout-bg, var(--bs-gray-100));
border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
h4 {
margin-bottom: .25rem;
@@ -18,24 +17,15 @@
margin-bottom: 0;
}
code {
@include border-radius();
}
+ .bd-callout {
margin-top: -.25rem;
}
}
// Variations
.bd-callout-info {
border-left-color: $bd-info;
}
.bd-callout-warning {
border-left-color: $bd-warning;
}
.bd-callout-danger {
border-left-color: $bd-danger;
@each $variant in $bd-callout-variants {
.bd-callout-#{$variant} {
--bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075);
--bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5);
}
}
site/assets/scss/_component-examples.scss
+7 -7
View File
@@ -85,12 +85,12 @@
.bd-example {
position: relative;
padding: 1rem;
margin: 1rem ($bd-gutter-x * -1) 0;
margin: 1rem ($bd-gutter-x * -.5) 0;
border: solid $gray-300;
border-width: 1px 0 0;
@include clearfix();
@include media-breakpoint-up(sm) {
@include media-breakpoint-up(md) {
padding: 1.5rem;
margin-right: 0;
margin-left: 0;
@@ -315,11 +315,11 @@
//
.highlight {
padding: .75rem $bd-gutter-x;
padding: .75rem ($bd-gutter-x * .5);
margin-bottom: 1rem;
background-color: $gray-100;
@include media-breakpoint-up(sm) {
@include media-breakpoint-up(md) {
padding: .75rem 1.5rem;
}
@@ -345,10 +345,10 @@
}
.bd-content .highlight {
margin-right: $bd-gutter-x * -1;
margin-left: $bd-gutter-x * -1;
margin-right: $bd-gutter-x * -.5;
margin-left: $bd-gutter-x * -.5;
@include media-breakpoint-up(sm) {
@include media-breakpoint-up(md) {
margin-right: 0;
margin-left: 0;
}
site/assets/scss/_navbar.scss
+55 -20
View File
@@ -1,44 +1,79 @@
.bd-navbar {
--bs-gutter-x: $bd-gutter-x;
--bs-gutter-y: $bd-gutter-x;
padding: .75rem 0;
background-color: $bd-violet;
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);
.container-xxl {
--bs-gutter-x: #{$bd-gutter-x};
}
.navbar-toggler {
padding: 0;
border: 0;
&:focus {
box-shadow: none;
}
}
.navbar-nav {
.nav-link {
padding-right: $spacer * .25;
padding-left: $spacer * .25;
color: rgba($white, .85);
.navbar-brand {
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
&:hover,
&:focus {
color: $white;
}
&:hover {
transform: rotate(-5deg) scale(1.1);
}
}
&.active {
font-weight: 600;
color: $white;
}
.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 {
background-color: $bd-violet;
background-color: var(--bd-violet);
border-left: 0;
@include media-breakpoint-down(md) {
box-shadow: $box-shadow-lg;
}
}
.dropdown-toggle {
&:focus {
outline: 0;
}
}
.dropdown-menu {
--#{$variable-prefix}dropdown-min-width: 12rem;
--#{$variable-prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
@include rfs(.875rem, --#{$variable-prefix}dropdown-font-size);
box-shadow: $dropdown-box-shadow;
}
.dropdown-item.current {
font-weight: 600;
background-image: escape-svg($dropdown-active-icon);
background-repeat: no-repeat;
background-position: right $dropdown-item-padding-x top .6rem;
background-size: .75rem .75rem;
}
}
site/assets/scss/_search.scss
+48
View File
@@ -0,0 +1,48 @@
.bd-search {
position: relative;
width: 100%;
&::after {
position: absolute;
top: .4rem;
right: .4rem;
bottom: .4rem;
display: flex;
align-items: center;
justify-content: center;
padding-right: .3125rem;
padding-left: .3125rem;
@include font-size(.75rem);
color: rgba($white, .65);
content: "Ctrl + /";
background-color: rgba($white, .1);
@include border-radius(.125rem);
}
@include media-breakpoint-up(lg) {
position: absolute;
top: .75rem;
left: 50%;
width: 100%;
width: 280px;
margin-left: -140px;
}
.form-control {
padding-right: 3.75rem;
color: $white;
background-color: rgba($black, .1);
border-color: rgba($white, .4);
transition-property: background-color, border-color, box-shadow;
&::placeholder {
color: rgba($white, .65);
}
&:focus {
background-color: rgba($black, .25);
border-color: rgba($bd-accent, 1);
box-shadow: 0 0 0 .25rem rgba($bd-accent, .4);
}
}
}
site/assets/scss/_sidebar.scss
+35 -58
View File
@@ -6,7 +6,6 @@
.bd-links {
overflow: auto;
font-weight: 600;
@include media-breakpoint-up(md) {
position: sticky;
@@ -14,74 +13,52 @@
// Override collapse behaviors
// stylelint-disable-next-line declaration-no-important
display: block !important;
height: subtract(100vh, 7rem);
height: subtract(100vh, 6rem);
// Prevent focus styles to be cut off:
padding-left: .25rem;
margin-left: -.25rem;
overflow-y: auto;
}
}
> ul {
@include media-breakpoint-down(md) {
padding: 1.5rem .75rem;
background-color: $gray-100;
border-bottom: 1px solid $gray-200;
}
.bd-links-nav {
@include media-breakpoint-down(md) {
padding: 1.5rem 1.25rem;
font-size: .875rem;
background-color: $gray-100;
border-bottom: 1px solid $gray-200;
}
a {
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: 1.25rem;
color: rgba($black, .65);
text-decoration: if($link-decoration == none, null, none);
@include media-breakpoint-between(xs, md) {
column-count: 2;
column-gap: 1.5rem;
&:hover,
&:focus {
color: rgba($black, .85);
text-decoration: if($link-hover-decoration == underline, none, null);
background-color: rgba($bd-violet, .1);
}
}
.btn {
// Custom styles (as we don't have a completely neutral button style)
padding: .25rem .5rem;
font-weight: 600;
color: rgba($black, .65);
background-color: transparent;
border: 0;
&:hover,
&:focus {
color: rgba($black, .85);
background-color: rgba($bd-violet, .1);
.bd-links-group {
break-inside: avoid;
}
&:focus {
box-shadow: 0 0 0 1px rgba($bd-violet, .7);
.bd-links-span-all {
column-span: all;
}
// Add chevron if there's a submenu
&::before {
width: 1.25em;
line-height: 0; // Align in the middle
content: escape-svg($sidebar-collapse-icon);
@include transition(transform .35s ease);
transform-origin: .5em 50%;
}
&[aria-expanded="true"] {
color: rgba($black, .85);
&::before {
transform: rotate(90deg);
}
}
}
.active {
font-weight: 600;
color: rgba($black, .85);
}
}
.bd-links-link {
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: 1.125rem;
color: rgba($black, .65);
text-decoration: if($link-decoration == none, null, none);
&:hover,
&:focus,
&.active {
color: rgba($black, .85);
text-decoration: if($link-hover-decoration == underline, none, null);
background-color: rgba(var(--bd-violet-rgb), .1);
}
&.active {
font-weight: 600;
}
}
site/assets/scss/_subnav.scss
-82
View File
@@ -1,82 +0,0 @@
.bd-subnavbar {
--bs-gutter-x: $bd-gutter-x;
--bs-gutter-y: $bd-gutter-x;
// The position and z-index are needed for the dropdown to stay on top of the content
position: relative;
z-index: $zindex-sticky;
background-color: rgba($white, .95);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15);
.dropdown-menu {
@include font-size(.875rem);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05);
}
.dropdown-item.current {
font-weight: 600;
background-image: escape-svg($dropdown-active-icon);
background-repeat: no-repeat;
background-position: right $dropdown-item-padding-x top .6rem;
background-size: .75rem .75rem;
}
@include media-breakpoint-up(md) {
position: sticky;
top: 0;
}
}
.bd-search {
position: relative;
&::after {
position: absolute;
top: .4rem;
right: .4rem;
bottom: .4rem;
display: flex;
align-items: center;
justify-content: center;
padding-right: .3125rem;
padding-left: .3125rem;
@include font-size(.75rem);
color: $gray-600;
content: "Ctrl + /";
background-color: $gray-100;
@include border-radius(.125rem);
}
@include media-breakpoint-down(md) {
width: 100%;
}
.form-control {
padding-right: 3.75rem;
&:focus {
border-color: $bd-violet;
box-shadow: 0 0 0 3px rgba($bd-violet, .25);
}
}
}
.bd-sidebar-toggle {
color: $text-muted;
&:hover,
&:focus {
color: $bd-violet;
}
&:focus {
box-shadow: 0 0 0 3px rgba($bd-violet, .25);
}
.bi-collapse { display: none; }
&:not(.collapsed) {
.bi-expand { display: none; }
.bi-collapse { display: inline-block; }
}
}
site/assets/scss/_toc.scss
+45
View File
@@ -15,6 +15,7 @@
ul {
padding-left: 0;
margin-bottom: 0;
list-style: none;
ul {
@@ -40,3 +41,47 @@
}
}
}
.bd-toc-toggle {
display: flex;
align-items: center;
@include media-breakpoint-down(sm) {
justify-content: space-between;
width: 100%;
}
@include media-breakpoint-down(md) {
border: 1px solid $border-color;
@include border-radius(.4rem);
&:hover,
&:focus,
&:active,
&[aria-expanded="true"] {
color: var(--bd-violet);
background-color: $white;
border-color: var(--bd-violet);
}
&:focus,
&[aria-expanded="true"] {
box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
}
}
}
.bd-toc-collapse {
@include media-breakpoint-down(md) {
nav {
padding: 1.25rem;
background-color: var(--bs-gray-100);
border: 1px solid $border-color;
@include border-radius(.25rem);
}
}
@include media-breakpoint-up(md) {
display: block !important; // stylelint-disable-line declaration-no-important
}
}
site/assets/scss/_variables.scss
+2 -5
View File
@@ -5,13 +5,10 @@ $bd-purple: #4c0bce;
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
$bd-accent: #ffe484;
$bd-info: #5bc0de;
$bd-warning: #f0ad4e;
$bd-danger: #d9534f;
$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
$sidebar-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
$bd-gutter-x: 1.25rem;
$bd-gutter-x: 2rem;
$bd-callout-variants: info, warning, danger !default;
:root {
--bd-purple: #{$bd-purple};
site/assets/scss/docs.scss
+1 -1
View File
@@ -37,7 +37,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
// Load docs components
@import "variables";
@import "navbar";
@import "subnav";
@import "search";
@import "masthead";
@import "ads";
@import "content";
site/content/docs/5.1/components/alerts.md
+1 -1
View File
@@ -160,7 +160,7 @@ When an alert is dismissed, the element is completely removed from the page stru
### Variables
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
site/content/docs/5.1/components/badge.md
+1 -1
View File
@@ -90,7 +90,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
### Variables
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
As part of Bootstrap's evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
site/content/docs/5.1/components/buttons.md
+1 -1
View File
@@ -242,7 +242,7 @@ buttons.forEach(function (button) {
### Variables
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
As part of Bootstrap's evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
site/content/docs/5.1/components/dropdowns.md
+1 -1
View File
@@ -957,7 +957,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
### Variables
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
site/content/docs/5.1/components/navbar.md
+1 -1
View File
@@ -736,7 +736,7 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
### Variables
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
As part of Bootstrap's evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
site/content/docs/5.1/customize/color.md
+1 -1
View File
@@ -109,7 +109,7 @@ Here's how you can use these in your Sass:
## Generating utilities
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.1.0</small>
Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
site/content/docs/5.1/layout/css-grid.md
+1
View File
@@ -4,6 +4,7 @@ title: CSS Grid
description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
group: layout
toc: true
added: 5.1
---
Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid.
site/content/docs/5.1/utilities/background.md
+1 -1
View File
@@ -37,7 +37,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
## Opacity
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.1.0</small>
As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
site/content/docs/5.1/utilities/colors.md
+1 -1
View File
@@ -33,7 +33,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
## Opacity
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.1.0</small>
As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
site/data/sidebar.yml
+20
View File
@@ -2,6 +2,8 @@
# The logic for the sidebar generation is in "site/layouts/partials/docs-sidebar.html".
- title: Getting started
icon: book-half
icon_color: indigo
pages:
- title: Introduction
- title: Download
@@ -16,6 +18,8 @@
- title: Contribute
- title: Customize
icon: palette2
icon_color: pink
pages:
- title: Overview
- title: Sass
@@ -26,6 +30,8 @@
- title: Optimize
- title: Layout
icon: grid-fill
icon_color: teal
pages:
- title: Breakpoints
- title: Containers
@@ -37,6 +43,8 @@
- title: CSS Grid
- title: Content
icon: file-earmark-richtext
icon_color: gray
pages:
- title: Reboot
- title: Typography
@@ -45,6 +53,8 @@
- title: Figures
- title: Forms
icon: ui-radios
icon_color: blue
pages:
- title: Overview
- title: Form control
@@ -57,6 +67,8 @@
- title: Validation
- title: Components
icon: menu-button-wide-fill
icon_color: cyan
pages:
- title: Accordion
- title: Alerts
@@ -84,6 +96,8 @@
- title: Tooltips
- title: Helpers
icon: magic
icon_color: orange
pages:
- title: Clearfix
- title: Colored links
@@ -96,6 +110,8 @@
- title: Vertical rule
- title: Utilities
icon: braces-asterisk
icon_color: red
pages:
- title: API
- title: Background
@@ -116,11 +132,15 @@
- title: Visibility
- title: Extend
icon: tools
icon_color: blue
pages:
- title: Approach
- title: Icons
- title: About
icon: globe2
icon_color: indigo
pages:
- title: Overview
- title: Team
site/layouts/_default/docs.html
+15 -8
View File
@@ -1,16 +1,16 @@
{{ define "main" }}
{{ partial "docs-subnav" . }}
<div class="container-xxl my-md-4 bd-layout">
<aside class="bd-sidebar">
{{ partial "docs-sidebar" . }}
</aside>
<main class="bd-main order-1">
<div class="bd-intro ps-lg-4">
<div class="bd-intro pt-2 ps-lg-2">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="{{ .Site.Params.repo }}/blob/main/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="{{ .Site.Params.repo }}/blob/main/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
View on GitHub
</a>
<h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1>
</div>
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
{{ partial "ads" . }}
@@ -18,12 +18,19 @@
{{ if (eq .Page.Params.toc true) }}
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
{{ .TableOfContents }}
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
</button>
<strong class="d-none d-md-block h6 my-2">On this page</strong>
<hr class="d-none d-md-block my-2">
<div class="collapse bd-toc-collapse" id="tocContents">
{{ .TableOfContents }}
</div>
</div>
{{ end }}
<div class="bd-content ps-lg-4">
<div class="bd-content ps-lg-2">
{{ if .Page.Params.sections }}
<div class="row g-3">
{{ range .Page.Params.sections }}
site/layouts/partials/docs-navbar.html
+56 -41
View File
@@ -1,74 +1,89 @@
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
<a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }}
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
{{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "32" "height" "32") }}
</button>
<div class="d-flex d-md-none order-3">
{{- if eq .Layout "docs" }}
<button class="navbar-toggler p-2" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
{{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }}
<span class="fs-6 pe-1">Browse</span>
</button>
<div class="vr my-1 mx-2 text-white"></div>
{{- end }}
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
<svg class="bi" width="24" height="24"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
<div class="offcanvas-header pb-0">
<div class="offcanvas-header px-4 pb-0">
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body pt-0">
<hr class="d-md-none text-white-50">
<div class="offcanvas-body p-4 pt-0 p-lg-0">
<hr class="d-lg-none text-white-50">
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2{{ if .IsHome }} active" aria-current="page{{ end }}" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.icons }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="{{ .Site.Params.icons }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="{{ .Site.Params.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="{{ .Site.Params.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</ul>
<hr class="d-md-none text-white-50">
<hr class="d-lg-none text-white-50">
{{ if eq .Layout "docs" }}
<form class="bd-search">
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="{{ .Site.Params.docs_version }}">
</form>
<hr class="d-lg-none text-white-50">
{{ end }}
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
{{ partial "icons/github.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
<small class="d-md-none ms-2">GitHub</small>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
{{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
<small class="d-lg-none ms-2">GitHub</small>
</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener">
{{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
<small class="d-md-none ms-2">Twitter</small>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener">
{{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
<small class="d-lg-none ms-2">Twitter</small>
</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener">
{{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
<small class="d-md-none ms-2">Slack</small>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener">
{{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
<small class="d-lg-none ms-2">Slack</small>
</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">
{{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
<small class="d-md-none ms-2">Open Collective</small>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">
{{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
<small class="d-lg-none ms-2">Open Collective</small>
</a>
</li>
<li class="nav-item py-1 col-12 col-lg-auto">
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
{{ partial "docs-versions" . }}
</ul>
<hr class="d-md-none text-white-50">
<a class="btn btn-bd-accent d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
</div>
</div>
</nav>
site/layouts/partials/docs-sidebar.html
+18 -17
View File
@@ -2,7 +2,7 @@
{{- $url := split .Permalink "/" -}}
{{- $page_slug := index $url (sub (len $url) 2) -}}
<ul class="list-unstyled mb-0 py-3 pt-md-1">
<ul class="bd-links-nav list-unstyled mb-0 py-3 py-md-2 pe-lg-2">
{{- range $group := .Site.Data.sidebar -}}
{{- $link := $group.title -}}
{{- $link_slug := $link | urlize -}}
@@ -16,26 +16,27 @@
{{- $is_active_group := eq $.Page.Params.group $group_slug -}}
{{- if $group.pages }}
<li class="mb-1">
<button class="btn d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-bs-toggle="collapse" data-bs-target="#{{ $group_slug }}-collapse" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}>
<li class="bd-links-group py-2">
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
{{- if $group.icon }}
<svg class="bi me-2"{{- if $group.icon_color }} style="color: var(--bs-{{ $group.icon_color }});"{{- end }} aria-hidden="true"><use xlink:href="#{{ $group.icon }}"></use></svg>
{{- end }}
{{ $group.title }}
</button>
</strong>
<div class="collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
<ul class="list-unstyled fw-normal pb-1 small">
{{- 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 }}" 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>
</div>
<ul class="list-unstyled fw-normal pb-2 small">
{{- 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 }}" class="bd-links-link d-inline-block rounded{{ if $is_active }} active{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }}</a></li>
{{- end }}
</ul>
</li>
{{- else }}
<li class="my-3 mx-4 border-top"></li>
<li>
<a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/" class="d-inline-flex align-items-center rounded{{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
<li class="bd-links-span-all">
<a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/" class="bd-links-link d-inline-block rounded small {{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
{{ $group.title }}
</a>
</li>
site/layouts/partials/docs-subnav.html
-14
View File
@@ -1,14 +0,0 @@
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="{{ .Site.Params.docs_version }}">
</form>
{{ partial "docs-versions" . }}
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
{{ partial "icons/expand.svg" (dict "class" "bi bi-expand" "width" "24" "height" "24") }}
{{ partial "icons/collapse.svg" (dict "class" "bi bi-collapse" "width" "24" "height" "24") }}
</button>
</div>
</nav>
site/layouts/partials/docs-versions.html
+18 -5
View File
@@ -1,14 +1,27 @@
<div class="dropdown ms-3">
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-none d-lg-inline">Bootstrap</span> v{{ .Site.Params.docs_version }}
</button>
{{- $url := split .Permalink "/" -}}
{{- $group_slug := index $url (sub (len $url) 3) -}}
{{- $page_slug := index $url (sub (len $url) 2) -}}
<li class="nav-item dropdown">
<a href="#" class="nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none">Bootstrap</span> v{{ .Site.Params.docs_version }}
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
<li><h6 class="dropdown-header">v5 releases</h6></li>
<li><a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">Latest ({{ .Site.Params.docs_version }}.x)</a></li>
<li>
{{- if eq .Page.Params.added "5.1" }}
<div class="dropdown-item disabled">v5.0.2</div>
{{- else }}
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/{{ $group_slug }}/{{ $page_slug }}/">v5.0.2</a>
{{- end }}
</li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">Previous releases</h6></li>
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
</ul>
</div>
</li>
site/layouts/partials/home/masthead-followup.html
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="masthead-followup-icon d-inline-block mb-3" style="color: var(--bs-indigo);">
<svg class="bi fs-1"><use xlink:href="#code"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Get started anyway you&nbsp;want</h2>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</h2>
<p class="lead fw-normal">
Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
</p>
site/layouts/partials/home/masthead.html
+2
View File
@@ -21,6 +21,8 @@
<p class="text-muted mb-0">
Currently <strong>v{{ .Site.Params.current_version }}</strong>
<span class="px-1">&middot;</span>
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a>
<span class="px-1">&middot;</span>
<a href="https://getbootstrap.com/docs/4.6/getting-started/introduction/" class="link-secondary">v4.6.x docs</a>
<span class="px-1">&middot;</span>
<a href="/docs/versions/" class="link-secondary">All releases</a>
site/layouts/partials/icons.html
+9
View File
@@ -18,6 +18,9 @@
<title>Check</title>
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</symbol>
<symbol id="chevron-expand" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
</symbol>
<symbol id="clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
@@ -35,6 +38,9 @@
<symbol id="grid-fill" viewBox="0 0 16 16">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
</symbol>
<symbol id="list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</symbol>
<symbol id="magic" viewBox="0 0 16 16">
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
</symbol>
@@ -51,6 +57,9 @@
<symbol id="plus" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</symbol>
<symbol id="three-dots" viewBox="0 0 16 16">
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
</symbol>
<symbol id="tools" viewBox="0 0 16 16">
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
</symbol>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB