mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-02 01:42:36 +02:00
Code Issues Releases Wiki Activity

Docs offcanvas navbar (#34487)

Browse Source 
* Redesign docs navbar to use offcanvas, tweak overall padding while I'm here

* Match code snippets to new gutter width

* Replace value with docs-specific variable

Opted not to do a CSS variable here since on .bd-content it would be inherited into our examples

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto
2021-12-03 00:08:01 -08:00
committed by GitHub
parent 6eef480e1e
commit a780d74b28
7 changed files with 89 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
site/assets/scss/_component-examples.scss
View File

@@ -85,7 +85,7 @@
.bd-example {
position: relative;
padding: 1rem;
margin: 1rem (-$grid-gutter-width * .5) 0;
margin: 1rem ($bd-gutter-x * -1) 0;
border: solid $gray-300;
border-width: 1px 0 0;
@include clearfix();
@@ -313,7 +313,7 @@
//
.highlight {
padding: 1rem;
padding: var(--bs-gutter-x) $bd-gutter-x;
margin-bottom: 1rem;
background-color: $gray-100;
@@ -338,8 +338,8 @@
}
.bd-content .highlight {
margin-right: (-$grid-gutter-width * .5);
margin-left: (-$grid-gutter-width * .5);
margin-right: $bd-gutter-x * -1;
margin-left: $bd-gutter-x * -1;
@include media-breakpoint-up(sm) {
margin-right: 0;

3
site/assets/scss/_layout.scss
View File

@@ -1,4 +1,7 @@
.bd-layout {
padding-right: $bd-gutter-x;
padding-left: $bd-gutter-x;
@include media-breakpoint-up(md) {
display: grid;
gap: $grid-gutter-width;

12
site/assets/scss/_navbar.scss
View File

@@ -1,4 +1,7 @@
.bd-navbar {
--bs-gutter-x: $bd-gutter-x;
--bs-gutter-y: $bd-gutter-x;
padding: .75rem 0;
background-color: $bd-purple-bright;
@@ -29,4 +32,13 @@
width: 1rem;
height: 1rem;
}
.offcanvas {
background-color: $bd-purple-bright;
border-left: 0;
@include media-breakpoint-down(md) {
box-shadow: $box-shadow-lg;
}
}
}

2
site/assets/scss/_sidebar.scss
View File

@@ -1,6 +1,6 @@
.bd-sidebar {
@include media-breakpoint-down(md) {
margin: 0 -.75rem 1rem;
margin: 0 ($bd-gutter-x * -1) 1rem;
}
}

11
site/assets/scss/_subnav.scss
View File

@@ -1,4 +1,7 @@
.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;
@@ -31,16 +34,16 @@
position: absolute;
top: .4rem;
right: .4rem;
bottom: .4rem;
display: flex;
align-items: center;
justify-content: center;
height: 1.5rem;
padding-right: .25rem;
padding-left: .25rem;
padding-right: .3125rem;
padding-left: .3125rem;
@include font-size(.75rem);
color: $gray-600;
content: "Ctrl + /";
border: $border-width solid $border-color;
background-color: $gray-100;
@include border-radius(.125rem);
}

2
site/assets/scss/_variables.scss
View File

@@ -11,3 +11,5 @@ $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;