mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-31 00:59:51 +02:00
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes - Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now. - Adds some JS to the offcanvas component to help with responsiveness Co-Authored-By: GeoSot <geo.sotis@gmail.com> * Redesign homepage, docs, and examples Homepage: - New Bootstrap purple navbar - Redesigned masthead - Rewrote and redesigned homepage content - Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances - Fixed padding issues in site footer - Match homepage button styles to examples page, use gap instead of tons of responsive margin utils Docs: - 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 - Redesign code snippets to better house two action buttons Examples: - Redesign Examples page layout - Add new example for responsive offcanvases in navbars * Convert offcanvas to CSS vars * Feat: add resize handler to Offcanvas.js. If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior The `aria-modal` addon is to protect us, selection backdrop elements * Separate examples code, Add some selectors, fix stackblitz btn Co-authored-by: GeoSot <geo.sotis@gmail.com>
This commit is contained in:
Mark Otto
GitHub
@@ -14,7 +14,7 @@
|
||||
@include font-size(.8125rem);
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
background-color: rgba(0, 0, 0, .05);
|
||||
background-color: $gray-100;
|
||||
|
||||
a {
|
||||
color: $gray-800;
|
||||
@@ -22,8 +22,7 @@
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
max-width: 330px;
|
||||
@include border-radius(4px);
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -8,10 +8,14 @@
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet);
|
||||
--bs-btn-border-color: var(--bd-violet);
|
||||
--bs-btn-border-radius: .5rem;
|
||||
--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-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
|
||||
|
||||
@@ -23,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);
|
||||
}
|
||||
|
||||
@@ -6,36 +6,30 @@
|
||||
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;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
@include border-radius();
|
||||
}
|
||||
|
||||
+ .bd-callout {
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: rgba($black, .05);
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,26 +19,29 @@
|
||||
|
||||
.btn-clipboard,
|
||||
.btn-edit {
|
||||
position: absolute;
|
||||
top: .65rem;
|
||||
right: .65rem;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
padding: .25rem .5rem;
|
||||
@include font-size(.65em);
|
||||
color: $primary;
|
||||
white-space: nowrap;
|
||||
background-color: $white;
|
||||
border: 1px solid;
|
||||
@include border-radius();
|
||||
padding: .5em;
|
||||
line-height: 1;
|
||||
color: $gray-900;
|
||||
background-color: $gray-100;
|
||||
border: 0;
|
||||
@include border-radius(.25rem);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
right: 3.65rem;
|
||||
.btn-clipboard {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: .75rem;
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
||||
.highlight-toolbar {
|
||||
.btn-clipboard {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,21 +85,17 @@
|
||||
.bd-example {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
margin: 1rem ($bd-gutter-x * -1) 0;
|
||||
border: solid $gray-300;
|
||||
margin: 1rem ($bd-gutter-x * -.5) 0;
|
||||
border: solid $border-color;
|
||||
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;
|
||||
border-width: 1px;
|
||||
@include border-top-radius(.25rem);
|
||||
|
||||
+ .bd-clipboard + .highlight {
|
||||
@include border-bottom-radius(.25rem);
|
||||
}
|
||||
@include border-top-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
+ p {
|
||||
@@ -348,12 +344,14 @@
|
||||
//
|
||||
|
||||
.highlight {
|
||||
padding: var(--bs-gutter-x) $bd-gutter-x;
|
||||
position: relative;
|
||||
padding: .75rem ($bd-gutter-x * .5);
|
||||
margin-bottom: 1rem;
|
||||
background-color: var(--bs-gray-100);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: 1rem 1.5rem;
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: .75rem 1.25rem;
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
pre {
|
||||
@@ -363,6 +361,11 @@
|
||||
white-space: pre;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
// Undo tabindex that's automatically added by Hugo
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre code {
|
||||
@@ -372,11 +375,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content .highlight {
|
||||
margin-right: $bd-gutter-x * -1;
|
||||
margin-left: $bd-gutter-x * -1;
|
||||
.bd-example-snippet {
|
||||
.highlight {
|
||||
@include border-top-radius(0);
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
.highlight-toolbar {
|
||||
border: solid $border-color;
|
||||
border-width: 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.bd-content .highlight {
|
||||
margin-right: $bd-gutter-x * -.5;
|
||||
margin-left: $bd-gutter-x * -.5;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@@ -2,14 +2,13 @@
|
||||
// Bootstrap docs content theming
|
||||
//
|
||||
|
||||
// Offset for the sticky header
|
||||
@include media-breakpoint-up(md) {
|
||||
:root {
|
||||
scroll-padding-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content {
|
||||
// Offset content from fixed navbar when jumping to headings
|
||||
> :target {
|
||||
padding-top: 5rem;
|
||||
margin-top: -5rem;
|
||||
}
|
||||
|
||||
> h2:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
@@ -46,6 +45,10 @@
|
||||
border-bottom: 2px solid currentcolor;
|
||||
}
|
||||
|
||||
tbody:not(:first-child) {
|
||||
border-top: 2px solid currentcolor;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
&:first-child {
|
||||
@@ -59,12 +62,24 @@
|
||||
|
||||
// Prevent breaking of code
|
||||
// stylelint-disable-next-line selector-max-compound-selectors
|
||||
th,
|
||||
td:first-child > code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-options {
|
||||
td:nth-child(2) {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-options td:last-child,
|
||||
.table-utilities td:last-child {
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.bd-title {
|
||||
@include font-size(3rem);
|
||||
}
|
||||
@@ -77,3 +92,35 @@
|
||||
.bd-bg-violet {
|
||||
background-color: $bd-violet;
|
||||
}
|
||||
|
||||
.bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.icon-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration-color: rgba($primary, .5);
|
||||
text-underline-offset: .5rem;
|
||||
backface-visibility: hidden;
|
||||
|
||||
.bi {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.bi {
|
||||
transform: translate3d(5px, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-lg-start {
|
||||
@include media-breakpoint-up(lg) {
|
||||
border-left: $border-width solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
.bd-layout {
|
||||
padding-right: $bd-gutter-x;
|
||||
padding-left: $bd-gutter-x;
|
||||
.bd-gutter {
|
||||
--bs-gutter-x: #{$bd-gutter-x};
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: grid;
|
||||
grid-template-areas: "sidebar main";
|
||||
grid-template-columns: 1fr 3fr;
|
||||
gap: $grid-gutter-width;
|
||||
}
|
||||
.bd-layout {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: grid;
|
||||
grid-template-areas: "sidebar main";
|
||||
grid-template-columns: 1fr 5fr;
|
||||
gap: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,6 +19,11 @@
|
||||
.bd-main {
|
||||
grid-area: main;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
max-width: 760px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
|
||||
@@ -1,38 +1,87 @@
|
||||
.bd-masthead {
|
||||
--bd-pink-rgb: #{to-rgb($pink)};
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(165deg, tint-color($bd-purple-light, 85%) 50%, $white 50%);
|
||||
// stylelint-disable
|
||||
background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), .01), rgba(var(--bs-body-bg-rgb), 1) 85%),
|
||||
radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), .5), transparent 50%),
|
||||
radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), .5), transparent 50%),
|
||||
radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), .5), transparent 50%),
|
||||
radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), .5), transparent 50%);
|
||||
// stylelint-enable
|
||||
|
||||
h1 {
|
||||
@include font-size(4rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
p:not(.lead) {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: .8rem 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.lead {
|
||||
@include font-size(1.5rem);
|
||||
@include font-size(1rem);
|
||||
font-weight: 400;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
padding: .5rem 4rem .5rem 1rem;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.25;
|
||||
background-color: rgba(var(--bs-body-color-rgb), .075);
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
.btn-clipboard {
|
||||
margin-top: .4rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#carbonads { // stylelint-disable-line selector-max-id
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.lead {
|
||||
@include font-size(1.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.mw-md-75 { max-width: 75%; }
|
||||
.masthead-followup {
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.lead {
|
||||
@include font-size(1.25rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-btn-lg {
|
||||
padding: .8rem 2rem;
|
||||
}
|
||||
|
||||
.masthead-followup-icon {
|
||||
padding: .75rem;
|
||||
background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .01));
|
||||
@include border-radius(.75rem);
|
||||
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1);
|
||||
padding: 1rem;
|
||||
color: rgba(var(--bg-rgb), 1);
|
||||
background-color: rgba(var(--bg-rgb), .1);
|
||||
background-blend-mode: multiple;
|
||||
@include border-radius(1rem);
|
||||
mix-blend-mode: darken;
|
||||
|
||||
svg {
|
||||
filter: drop-shadow(0 1px 1px #fff);
|
||||
}
|
||||
}
|
||||
|
||||
.masthead-followup-svg {
|
||||
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125));
|
||||
}
|
||||
|
||||
.masthead-notice {
|
||||
background-color: var(--bd-accent);
|
||||
box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
|
||||
}
|
||||
|
||||
@@ -1,44 +1,85 @@
|
||||
.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);
|
||||
|
||||
.navbar-toggler {
|
||||
padding: 0;
|
||||
margin-right: -.5rem;
|
||||
border: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-left: -.5rem;
|
||||
}
|
||||
|
||||
.bi {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
&: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;
|
||||
.offcanvas-lg {
|
||||
background-color: var(--bd-violet);
|
||||
border-left: 0;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
@include media-breakpoint-down(lg) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
62
site/assets/scss/_search.scss
Normal file
62
site/assets/scss/_search.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
.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: "⌘K";
|
||||
content: attr(data-shortcut);
|
||||
background-color: rgba($white, .1);
|
||||
@include border-radius(.125rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: absolute;
|
||||
top: .75rem;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
margin-left: -100px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
width: 280px;
|
||||
margin-left: -140px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding-right: 2.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);
|
||||
}
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
appearance: none;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
background: escape-svg($search-clear-icon) no-repeat 0 0;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($black, .25);
|
||||
border-color: rgba($bd-accent, 1);
|
||||
box-shadow: 0 0 0 .25rem rgba($bd-accent, .4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,87 +1,53 @@
|
||||
.bd-sidebar {
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: 0 ($bd-gutter-x * -1) 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-links {
|
||||
overflow: auto;
|
||||
font-weight: 600;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
// 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(lg) {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
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, lg) {
|
||||
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: 1rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -101,7 +101,7 @@
|
||||
.language-bash,
|
||||
.language-sh {
|
||||
&::before {
|
||||
color: #009;
|
||||
color: #777;
|
||||
content: "$ ";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
// stylelint-disable scss/dollar-variable-default
|
||||
|
||||
// Local docs variables
|
||||
$bd-purple: #563d7c;
|
||||
$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>");
|
||||
$search-clear-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='rgba(255,255,255,.75)' 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'/></svg>");
|
||||
|
||||
$bd-gutter-x: 1.25rem;
|
||||
$bd-gutter-x: 3rem;
|
||||
$bd-callout-variants: info, warning, danger !default;
|
||||
|
||||
:root {
|
||||
--bd-purple: #{$bd-purple};
|
||||
@@ -19,4 +17,6 @@ $bd-gutter-x: 1.25rem;
|
||||
--bd-accent: #{$bd-accent};
|
||||
--bd-violet-rgb: #{to-rgb($bd-violet)};
|
||||
--bd-accent-rgb: #{to-rgb($bd-accent)};
|
||||
--bd-pink-rgb: #{to-rgb($pink-500)};
|
||||
--bd-teal-rgb: #{to-rgb($teal-500)};
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user