diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/assets/scss')
19 files changed, 479 insertions, 722 deletions
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_ads.scss b/vendor/twbs/bootstrap/site/assets/scss/_ads.scss index da682b952..026d1a17a 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_ads.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_ads.scss @@ -17,7 +17,7 @@ background-color: rgba(0, 0, 0, .05); a { - color: #333; + color: $gray-800; text-decoration: none; } @@ -35,5 +35,5 @@ .carbon-poweredby { display: block; margin-top: .75rem; - color: #777 !important; + color: $gray-700 !important; } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_algolia.scss b/vendor/twbs/bootstrap/site/assets/scss/_algolia.scss index 23781da12..097dbdd55 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_algolia.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_algolia.scss @@ -1,155 +1,92 @@ -// stylelint-disable declaration-no-important +// Docsearch theming -// Docsearch overrides -// -// `!important` indicates overridden properties. .algolia-autocomplete { - display: block !important; - flex: 1; - - // Menu container - .ds-dropdown-menu { - width: 100%; - min-width: 0 !important; - max-width: none !important; - padding: .75rem 0 !important; - background-color: $white; - background-clip: padding-box; - border: 1px solid rgba(0, 0, 0, .1); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); - - @include media-breakpoint-up(md) { - width: 175%; - } - - // Caret - &::before { - display: none !important; - } - - [class^="ds-dataset-"] { - padding: 0 !important; - overflow: visible !important; - background-color: transparent !important; - border: 0 !important; - } - - .ds-suggestions { - margin-top: 0 !important; - } - } + width: 100%; +} - .algolia-docsearch-suggestion { - padding: 0 !important; - overflow: visible !important; +.ds-dropdown-menu { + width: 100%; + padding: $dropdown-padding-y 0; + margin: $dropdown-spacer 0 0; + @include font-size(.875rem); + background-color: $dropdown-bg; + border: $dropdown-border-width solid $dropdown-border-color; + @include border-radius($dropdown-border-radius); + @include box-shadow($dropdown-box-shadow); + + @include media-breakpoint-up(md) { + width: 400px; } +} - .algolia-docsearch-suggestion--category-header { - padding: .125rem 1rem !important; - margin-top: 0 !important; - @include font-size(.875rem, true); - font-weight: 600 !important; - color: $bd-purple-bright !important; - border-bottom: 0 !important; - } +.algolia-docsearch-suggestion--category-header { + padding: .125rem 1rem; + font-weight: 600; + color: $bd-purple-bright; - .algolia-docsearch-suggestion--wrapper { - float: none !important; - padding-top: 0 !important; + // stylelint-disable-next-line selector-class-pattern + :not(.algolia-docsearch-suggestion__main) > & { + display: none; } - // Section header - .algolia-docsearch-suggestion--subcategory-column { - float: none !important; - width: auto !important; - padding: 0 !important; - text-align: left !important; + .ds-suggestion:not(:first-child) & { + padding-top: .75rem; + margin-top: .75rem; + border-top: 1px solid rgba(0, 0, 0, .1); } +} - .algolia-docsearch-suggestion--subcategory-inline { - display: block !important; - @include font-size(.875rem); - color: $gray-700; +.algolia-docsearch-suggestion--content { + padding: .25rem 1rem; - &::after { - padding: 0 .25rem; - content: "/"; - } + .ds-cursor & { + background-color: rgba($bd-purple-light, .2); } +} - .algolia-docsearch-suggestion--content { - display: flex; - flex-wrap: wrap; - float: none !important; - width: 100% !important; - padding: .25rem 1rem !important; - - // Vertical divider between column header and content - &::before { - display: none !important; - } - } +.algolia-docsearch-suggestion { + display: block; + text-decoration: none; +} - .ds-suggestion { - &:not(:first-child) { - .algolia-docsearch-suggestion--category-header { - padding-top: .75rem !important; - margin-top: .75rem !important; - border-top: 1px solid rgba(0, 0, 0, .1); - } - } - - .algolia-docsearch-suggestion--subcategory-column { - display: none !important; - } - } +.algolia-docsearch-suggestion--subcategory-column { + display: none; +} - .algolia-docsearch-suggestion--title { - display: block; - margin-bottom: 0 !important; - @include font-size(.875rem, true); - font-weight: 400 !important; - } +.algolia-docsearch-suggestion--subcategory-inline { + display: inline; + color: $gray-700; - .algolia-docsearch-suggestion--text { - flex: 0 0 100%; - max-width: 100%; - padding: .2rem 0; - @include font-size(.8125rem, true); - font-weight: 400; - line-height: 1.25 !important; - color: $gray-600; + &::after { + padding: 0 .25rem; + content: "/"; } +} - .algolia-docsearch-footer { - float: none !important; - width: auto !important; - height: auto !important; - padding: .75rem 1rem 0; - @include font-size(.75rem, true); - line-height: 1 !important; - color: #767676 !important; - border-top: 1px solid rgba(0, 0, 0, .1); - } +.algolia-docsearch-suggestion--title { + display: inline; + font-weight: 500; + color: $gray-800; +} - .algolia-docsearch-footer--logo { - display: inline !important; - overflow: visible !important; - color: inherit !important; - text-indent: 0 !important; - background: none !important; - } +.algolia-docsearch-suggestion--text { + color: $gray-800; + @include font-size(.75rem); +} - .algolia-docsearch-suggestion--highlight { - color: #5f2dab; - background-color: rgba(154, 132, 187, .12); - } +.algolia-docsearch-suggestion--highlight { + color: $purple; + background-color: rgba($purple, .1); +} - .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight { - box-shadow: inset 0 -2px 0 0 rgba(95, 45, 171, .5) !important; - } +.algolia-docsearch-footer { + padding: .5rem 1rem 0; + margin-top: .625rem; + @include font-size(.75rem); + color: $gray-600; + border-top: 1px solid rgba(0, 0, 0, .1); +} - .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { - background-color: rgba(208, 189, 236, .15) !important; - } +.algolia-docsearch-footer--logo { + color: inherit; } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_anchor.scss b/vendor/twbs/bootstrap/site/assets/scss/_anchor.scss index d9e72cf54..96a7dbf9c 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_anchor.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_anchor.scss @@ -1,7 +1,7 @@ .anchorjs-link { font-weight: 400; color: rgba($link-color, .5); - @include transition(color .15s ease-in-out, opacity .15s ease-in-out); + @include transition(color .15s ease-in-out); &:focus, &:hover { diff --git a/vendor/twbs/bootstrap/site/assets/scss/_brand.scss b/vendor/twbs/bootstrap/site/assets/scss/_brand.scss index c3ba73c3e..73db11e18 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_brand.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_brand.scss @@ -4,48 +4,25 @@ // Logo series wrapper .bd-brand-logos { - display: table; - width: 100%; - margin-bottom: 1rem; - overflow: hidden; - color: $bd-purple; - background-color: #f9f9f9; - @include border-radius(); + color: $bd-purple-bright; .inverse { color: $white; - background-color: $bd-purple; + background-color: $bd-purple-bright; } } // Individual items .bd-brand-item { - padding: 4rem 0; - text-align: center; - + .bd-brand-item { border-top: 1px solid $white; } - // Heading content within - h1, - h3 { - margin-top: 0; - margin-bottom: 0; - } - @include media-breakpoint-up(md) { - display: table-cell; - width: 1%; - + .bd-brand-item { border-top: 0; border-left: 1px solid $white; } - - h1 { - @include font-size(4rem); - } } } @@ -56,7 +33,6 @@ .color-swatches { margin: 0 -5px; - overflow: hidden; // clearfix // Docs colors .bd-purple { @@ -74,12 +50,8 @@ } .color-swatch { - float: left; width: 4rem; height: 4rem; - margin-right: .25rem; - margin-left: .25rem; - @include border-radius(); @include media-breakpoint-up(md) { width: 6rem; diff --git a/vendor/twbs/bootstrap/site/assets/scss/_browser-bugs.scss b/vendor/twbs/bootstrap/site/assets/scss/_browser-bugs.scss deleted file mode 100644 index f42158b37..000000000 --- a/vendor/twbs/bootstrap/site/assets/scss/_browser-bugs.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Wall of Browser Bugs -// -// Better display for the responsive table on the Wall of Browser Bugs. - -.bd-browser-bugs { - td p { - margin-bottom: 0; - } - th:first-child { - width: 18%; - } -} diff --git a/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss b/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss index 6a2d703e6..b266d3e88 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss @@ -11,8 +11,8 @@ &:hover, &:active { color: $white; - background-color: darken($bd-purple-bright, 10%); - border-color: darken($bd-purple-bright, 10%); + background-color: shade-color($bd-purple-bright, 20%); + border-color: shade-color($bd-purple-bright, 20%); } &:focus { diff --git a/vendor/twbs/bootstrap/site/assets/scss/_callouts.scss b/vendor/twbs/bootstrap/site/assets/scss/_callouts.scss index 6b9735949..aff91f18b 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_callouts.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_callouts.scss @@ -6,12 +6,11 @@ padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; - border: 1px solid #eee; + border: 1px solid $gray-200; border-left-width: .25rem; @include border-radius(); h4 { - margin-top: 0; margin-bottom: .25rem; } @@ -29,12 +28,14 @@ } // Variations -@mixin bs-callout-variant($color) { - border-left-color: $color; +.bd-callout-info { + border-left-color: $bd-info; +} - h4 { color: $color; } +.bd-callout-warning { + border-left-color: $bd-warning; } -.bd-callout-info { @include bs-callout-variant($bd-info); } -.bd-callout-warning { @include bs-callout-variant($bd-warning); } -.bd-callout-danger { @include bs-callout-variant($bd-danger); } +.bd-callout-danger { + border-left-color: $bd-danger; +} diff --git a/vendor/twbs/bootstrap/site/assets/scss/_clipboard-js.scss b/vendor/twbs/bootstrap/site/assets/scss/_clipboard-js.scss index 3fcb9c9c0..83b9a8b9e 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_clipboard-js.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_clipboard-js.scss @@ -23,7 +23,7 @@ z-index: 10; display: block; padding: .25rem .5rem; - @include font-size(65%); + @include font-size(.65em); color: $primary; background-color: $white; border: 1px solid; diff --git a/vendor/twbs/bootstrap/site/assets/scss/_colors.scss b/vendor/twbs/bootstrap/site/assets/scss/_colors.scss index 10ad8efdb..a71a8973b 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_colors.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_colors.scss @@ -2,16 +2,155 @@ // Docs color palette classes // -@each $color, $value in $colors { +@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) { .swatch-#{$color} { - color: color-yiq($value); + color: color-contrast($value); background-color: #{$value}; - } -} -@each $color, $value in $grays { - .swatch-#{$color} { - color: color-yiq($value); - background-color: #{$value}; + &::after { + $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}"; + $against-white: "#{contrast-ratio($value, $white)}"; + $against-black: "#{contrast-ratio($value, $black)}"; + position: absolute; + top: 1rem; + right: 1rem; + padding-left: 1rem; + font-size: .75rem; + line-height: 1.35; + white-space: pre; + content: + str-slice($contrast-ratio, 1, 4) "\A" + str-slice($against-white, 1, 4) "\A" + str-slice($against-black, 1, 4); + background-color: $value; + background-image: + linear-gradient( + to bottom, + transparent .25rem, + color-contrast($value) .25rem .75rem, + transparent .75rem 1.25rem, + $white 1.25rem 1.75rem, + transparent 1.75rem 2.25rem, + $black 2.25rem 2.75rem, + transparent 2.75rem + ); + background-repeat: no-repeat; + background-size: .5rem 100%; + } } } + +// stylelint-disable declaration-block-single-line-max-declarations + +.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; } +.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; } +.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; } +.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; } +.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; } +.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; } +.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; } +.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; } +.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; } + +.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; } +.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; } +.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; } +.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; } +.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; } +.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; } +.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; } +.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; } +.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; } + +.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; } +.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; } +.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; } +.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; } +.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; } +.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; } +.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; } +.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; } +.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; } + +.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; } +.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; } +.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; } +.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; } +.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; } +.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; } +.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; } +.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; } +.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; } + +.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; } +.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; } +.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; } +.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; } +.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; } +.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; } +.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; } +.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; } +.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; } + +.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; } +.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; } +.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; } +.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; } +.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; } +.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; } +.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; } +.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; } +.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; } + +.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; } +.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; } +.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; } +.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; } +.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; } +.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; } +.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; } +.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; } +.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; } + +.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; } +.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; } +.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; } +.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; } +.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; } +.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; } +.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; } +.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; } +.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; } + +.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; } +.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; } +.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; } +.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; } +.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; } +.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; } +.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; } +.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; } +.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; } + +.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; } +.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; } +.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; } +.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; } +.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; } +.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; } +.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; } +.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; } +.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; } + +.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; } +.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; } +.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; } +.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; } +.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; } +.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; } +.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; } +.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; } +.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; } + +.bd-white { color: color-contrast($white); background-color: $white; } +.bd-black { color: color-contrast($black); background-color: $black; } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss index 89c52208f..005515922 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss @@ -1,5 +1,3 @@ -// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type - // // Grid examples // @@ -10,21 +8,14 @@ > [class^="col-"] { padding-top: .75rem; padding-bottom: .75rem; - background-color: rgba(86, 61, 124, .15); - border: 1px solid rgba(86, 61, 124, .2); + background-color: rgba(39, 41, 43, .03); + border: 1px solid rgba(39, 41, 43, .1); } } .row + .row { margin-top: 1rem; } - - .flex-items-top, - .flex-items-middle, - .flex-items-bottom { - min-height: 6rem; - background-color: rgba(255, 0, 0, .1); - } } .bd-example-row-flex-cols .row { @@ -37,15 +28,6 @@ border: 1px solid rgba($bd-purple, .15); } -.bd-example-responsive-containers { - [class^="container"] { - padding-top: .75rem; - padding-bottom: .75rem; - background-color: rgba(86, 61, 124, .15); - border: 1px solid rgba(86, 61, 124, .2); - } -} - // Grid mixins .example-container { width: 800px; @@ -89,30 +71,26 @@ position: relative; padding: 1rem; margin: 1rem (-$grid-gutter-width / 2) 0; - border: solid $gray-100; - border-width: .2rem 0 0; + border: solid $gray-300; + border-width: 1px 0 0; @include clearfix(); @include media-breakpoint-up(sm) { padding: 1.5rem; margin-right: 0; margin-left: 0; - border-width: .2rem; - } + border-width: 1px; + @include border-top-radius(.25rem); - + .highlight, - + .clipboard + .highlight { - margin-top: 0; + + .bd-clipboard + .highlight { + @include border-bottom-radius(.25rem); + } } + p { margin-top: 2rem; } - .custom-file-input:lang(es) ~ .custom-file-label::after { - content: "Elegir"; - } - > .form-control { + .form-control { margin-top: .5rem; @@ -122,100 +100,50 @@ > .nav + .nav, > .alert + .alert, > .navbar + .navbar, - > .progress + .progress, - > .progress + .btn { + > .progress + .progress { margin-top: 1rem; } - > .dropdown-menu:first-child { + > .dropdown-menu { position: static; display: block; } - > .form-group:last-child { + > :last-child { margin-bottom: 0; } - > .close { - float: none; - } -} - -// Typography -.bd-example-type { - .table { - td { - padding: 1rem 0; - border-color: #eee; - } - tr:first-child td { - border-top: 0; - } - } - - h1, - h2, - h3, - h4, - h5, - h6 { - margin-top: 0; - margin-bottom: 0; - } -} - -// Contextual background colors -.bd-example-bg-classes p { - padding: 1rem; -} - -// Images -.bd-example { + // Images > svg + svg, > img + img { margin-left: .5rem; } -} -// Buttons -.bd-example { + // Buttons > .btn, > .btn-group { - margin-top: .25rem; - margin-bottom: .25rem; + margin: .25rem .125rem; } > .btn-toolbar + .btn-toolbar { margin-top: .5rem; } -} -// Forms -.bd-example-control-sizing select, -.bd-example-control-sizing input[type="text"] + input[type="text"] { - margin-top: .5rem; -} -.bd-example-form .input-group { - margin-bottom: .5rem; -} -.bd-example > textarea.form-control { - resize: vertical; -} + // List groups + > .list-group { + max-width: 400px; + } -// List groups -.bd-example > .list-group { - max-width: 400px; -} -.bd-example > [class*="list-group-horizontal"] { - max-width: 100%; -} + > [class*="list-group-horizontal"] { + max-width: 100%; + } -// Navbars -.bd-example { + // Navbars .fixed-top, .sticky-top { position: static; margin: -1rem -1rem 1rem; } + .fixed-bottom { position: static; margin: 1rem -1rem -1rem; @@ -230,64 +158,58 @@ margin: 1rem -1.5rem -1.5rem; } } -} -// Pagination -.bd-example .pagination { - margin-top: .5rem; - margin-bottom: .5rem; + // Pagination + .pagination { + margin-top: .5rem; + margin-bottom: .5rem; + } } -// Example modals -.modal { - z-index: 1072; - - .tooltip, - .popover { - z-index: 1073; +// Ratio helpers +.bd-example-ratios { + .ratio { + display: inline-block; + width: 10rem; + color: $gray-600; + background-color: $gray-100; + border: $border-width solid $border-color; + + > div { + display: flex; + align-items: center; + justify-content: center; + } } } +.bd-example-ratios-breakpoint { + .ratio-4x3 { + width: 16rem; -.modal-backdrop { - z-index: 1071; + @include media-breakpoint-up(md) { + --bs-aspect-ratio: 50%; // 2x1 + } + } } .bd-example-modal { background-color: #fafafa; .modal { - position: relative; - top: auto; - right: auto; - bottom: auto; - left: auto; - z-index: 1; + position: static; display: block; } - - .modal-dialog { - left: auto; - margin-right: auto; - margin-left: auto; - } -} - -// Example tabbable tabs -.bd-example-tabs .nav-tabs { - margin-bottom: 1rem; } -// Popovers -.bd-example-popover-static { - padding-bottom: 1.5rem; - background-color: #f9f9f9; +.bd-example-offcanvas { + @include border-start-radius(0); - .popover { - position: relative; + .offcanvas { + position: static; display: block; - float: left; - width: 260px; - margin: 1.25rem; + height: 200px; + visibility: visible; + transform: translate(0); } } @@ -296,13 +218,6 @@ white-space: nowrap; } -.bd-example-tooltip-static .tooltip { - position: relative; - display: inline-block; - margin: 10px 20px; - opacity: 1; -} - // Scrollspy demo on fixed height div .scrollspy-example { position: relative; @@ -333,42 +248,75 @@ } } +.bd-example-rounded-utils { + [class*="rounded"] { + margin: .25rem; + } +} + +.bd-example-position-utils { + position: relative; + padding: 3em; + + .position-relative { + height: 200px; + background-color: #f5f5f5; + } + + .position-absolute { + width: 2em; + height: 2em; + background-color: $dark; + @include border-radius(); + } +} + +.bd-example-position-examples { + &::after { + content: none; + } +} + +// Toasts +.bd-example-toasts { + min-height: 240px; +} + // // Code snippets // .highlight { padding: 1rem; - margin-top: 1rem; margin-bottom: 1rem; background-color: $gray-100; - -ms-overflow-style: -ms-autohiding-scrollbar; @include media-breakpoint-up(sm) { - padding: 1.5rem; - } -} - -.bd-content .highlight { - margin-right: (-$grid-gutter-width / 2); - margin-left: (-$grid-gutter-width / 2); - - @include media-breakpoint-up(sm) { - margin-right: 0; - margin-left: 0; + padding: 1rem 1.5rem; } -} -.highlight { pre { padding: 0; margin-top: .65rem; margin-bottom: .65rem; + white-space: pre; background-color: transparent; border: 0; } + pre code { @include font-size(inherit); color: $gray-900; // Effectively the base text color + word-wrap: normal; + } +} + +.bd-content .highlight { + margin-right: (-$grid-gutter-width / 2); + margin-left: (-$grid-gutter-width / 2); + + @include media-breakpoint-up(sm) { + margin-right: 0; + margin-left: 0; } } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_content.scss b/vendor/twbs/bootstrap/site/assets/scss/_content.scss index 030a1a256..cc22ffe11 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_content.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_content.scss @@ -1,32 +1,42 @@ -// stylelint-disable no-duplicate-selectors, selector-max-combinators, selector-max-compound-selectors, selector-max-type, selector-no-qualifying-type - // -// Automatically style Markdown-based tables like a Bootstrap `.table`. +// Bootstrap docs content theming // +// Offset for the sticky header +@include media-breakpoint-up(md) { + :root { + scroll-padding-top: 4rem; + } +} + .bd-content { - order: 1; + > h2:not(:first-child) { + margin-top: 3rem; + } - // Hack the sticky header - > h2[id], - > h3[id], - > h4[id] { - pointer-events: none; + > h3 { + margin-top: 2rem; + } - &::before { - display: block; - height: 6rem; - margin-top: -6rem; - content: ""; + > ul li, + > ol li { + margin-bottom: .25rem; + + // stylelint-disable selector-max-type + > ul { + margin-top: -.5rem; + margin-bottom: 1rem; } + // stylelint-enable selector-max-type } - > table { - width: 100%; + // Override Bootstrap defaults + > .table { max-width: 100%; - margin-bottom: 1rem; + margin-bottom: 1.5rem; + @include font-size(.875rem); - @include media-breakpoint-down(md) { + @include media-breakpoint-down(lg) { display: block; overflow-x: auto; @@ -35,92 +45,36 @@ } } - // Cells - > thead, - > tbody, - > tfoot { - > tr { - > th, - > td { - padding: $table-cell-padding; - vertical-align: top; - border: 1px solid $table-border-color; + th, + td { + &:first-child { + padding-left: 0; + } - > p:last-child { - margin-bottom: 0; - } - } + &:not(:last-child) { + padding-right: 1.5rem; } } - // Prevent breaking of code (e.g., Grunt tasks list) + // Prevent breaking of code td:first-child > code { white-space: nowrap; } } } -.bd-content-title { - display: block; - pointer-events: auto; -} - -// -// Docs sections -// - -.bd-content { - > h2 { - @include font-size($h2-font-size); - } - - > h3 { - @include font-size($h3-font-size); - } - - > h4 { - @include font-size($h4-font-size); - } - - > h2:not(:first-child) { - margin-top: 3rem; - } - - > h3 { - margin-top: 1.5rem; - } - - > ul li, - > ol li { - margin-bottom: .25rem; - } - - @include media-breakpoint-up(lg) { - > ul, - > ol, - > p { - max-width: 80%; - } - } -} - .bd-title { - margin-top: 1rem; - margin-bottom: .5rem; @include font-size(3rem); } .bd-lead { @include font-size(1.5rem); font-weight: 300; - - @include media-breakpoint-up(lg) { - max-width: 80%; - } } -.bd-text-purple { color: $bd-purple; } -.bd-text-purple-bright { color: $bd-purple-bright; } +.bd-text-purple-bright { + color: $bd-purple-bright; +} .bd-bg-purple-bright { background-color: $bd-purple-bright; diff --git a/vendor/twbs/bootstrap/site/assets/scss/_footer.scss b/vendor/twbs/bootstrap/site/assets/scss/_footer.scss index 29d31df3a..87cee6d2b 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_footer.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_footer.scss @@ -3,38 +3,14 @@ // .bd-footer { - @include font-size(.875rem); - text-align: center; - background-color: #f7f7f7; - a { - font-weight: 600; color: $gray-700; + text-decoration: none; &:hover, &:focus { color: $link-color; - } - } - - p { - margin-bottom: 0; - } - - @include media-breakpoint-up(sm) { - text-align: left; - } -} - -.bd-footer-links { - padding-left: 0; - margin-bottom: 1rem; - - li { - display: inline-block; - - + li { - margin-left: 1rem; + text-decoration: underline; } } } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss b/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss index 6a13562e3..2e742e76d 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss @@ -1,65 +1,29 @@ -// stylelint-disable declaration-no-important - .bd-masthead { - position: relative; - padding: 3rem ($grid-gutter-width / 2); - background: linear-gradient(to right bottom, lighten($bd-purple-light, 16%) 50%, #fff 50%); + padding: 3rem 0; + background: linear-gradient(165deg, tint-color($bd-purple-light, 85%) 50%, $white 50%); h1 { @include font-size(4rem); line-height: 1; } - .lead { - @include font-size(1.5rem); - font-weight: 400; + p:not(.lead) { color: $gray-700; } .btn { padding: .8rem 2rem; font-weight: 600; - @include font-size(1.25rem); - } - - .carbonad { - margin-top: 0 !important; - margin-bottom: -3rem !important; } - - @include media-breakpoint-up(sm) { - padding-top: 5rem; - padding-bottom: 5rem; - - .carbonad { - margin-bottom: 0 !important; - } - } - - @include media-breakpoint-up(md) { - .carbonad { - margin-top: 3rem !important; - } + .lead { + @include font-size(1.5rem); + font-weight: 400; + color: $gray-700; } } -.masthead-followup { - h2 { - @include font-size(2.5rem); - } - - .highlight { - @include border-radius(.5rem); - - pre::-webkit-scrollbar { - display: none; - } - - pre code { - display: inline-block; - white-space: pre; - } - } +@include media-breakpoint-up(md) { + .mw-md-75 { max-width: 75%; } } .masthead-followup-icon { diff --git a/vendor/twbs/bootstrap/site/assets/scss/_nav.scss b/vendor/twbs/bootstrap/site/assets/scss/_nav.scss deleted file mode 100644 index d8d24b723..000000000 --- a/vendor/twbs/bootstrap/site/assets/scss/_nav.scss +++ /dev/null @@ -1,71 +0,0 @@ -// -// Main navbar -// - -.bd-navbar { - min-height: 4rem; - background-color: $bd-purple-bright; - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1); - - @include media-breakpoint-down(md) { - padding-right: .5rem; - padding-left: .5rem; - - .navbar-nav-scroll { - max-width: 100%; - height: 2.5rem; - margin-top: .25rem; - overflow: hidden; - - .navbar-nav { - padding-bottom: 2rem; - overflow-x: auto; - white-space: nowrap; - -webkit-overflow-scrolling: touch; - } - } - } - - @include media-breakpoint-up(md) { - @supports (position: sticky) { - position: sticky; - top: 0; - z-index: 1071; // over everything in bootstrap - } - } - - .navbar-nav { - .nav-link { - padding-right: .5rem; - padding-left: .5rem; - color: rgba($white, .85); - - &.active, - &:hover { - color: $white; - background-color: transparent; - } - - &.active { - font-weight: 600; - } - } - } - - .navbar-nav-svg { - display: inline-block; - width: 1rem; - height: 1rem; - vertical-align: text-top; - } - - .dropdown-menu { - @include font-size(.875rem); - } - - .dropdown-item.active { - font-weight: 600; - color: $gray-900; - background: escape-svg($dropdown-active-icon) no-repeat .4rem .6rem/.75rem .75rem; - } -} diff --git a/vendor/twbs/bootstrap/site/assets/scss/_sidebar.scss b/vendor/twbs/bootstrap/site/assets/scss/_sidebar.scss index 7c350f8e3..d893ba9dc 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_sidebar.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_sidebar.scss @@ -1,112 +1,87 @@ -// -// Left side navigation -// - .bd-sidebar { - order: 0; - // background-color: #f5f2f9; - border-bottom: 1px solid rgba(0, 0, 0, .1); - - @include media-breakpoint-up(md) { - @supports (position: sticky) { - position: sticky; - top: 4rem; - z-index: 1000; - height: subtract(100vh, 4rem); - } - border-right: 1px solid rgba(0, 0, 0, .1); - } - - @include media-breakpoint-up(xl) { - flex: 0 1 320px; + @include media-breakpoint-down(md) { + margin: 0 -.75rem 1rem; } } .bd-links { - width: 100%; - padding-top: 1rem; - padding-bottom: 1rem; - border-top: 1px solid rgba(0, 0, 0, .05); + overflow: auto; + font-weight: 600; @include media-breakpoint-up(md) { - @supports (position: sticky) { - max-height: subtract(100vh, 9rem); - overflow-y: auto; - } + position: sticky; + top: 5rem; + // Override collapse behaviors + // stylelint-disable-next-line declaration-no-important + display: block !important; + height: subtract(100vh, 7rem); + // Prevent focus styles to be cut off: + padding-left: .25rem; + margin-left: -.25rem; + overflow-y: auto; } -} - -.bd-search { - position: relative; // To contain the Algolia search - padding: 1rem 15px; - margin-right: -15px; - margin-left: -15px; - .form-control:focus { - border-color: $bd-purple-bright; - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); + > ul { + @include media-breakpoint-down(md) { + padding: 1.5rem .75rem; + background-color: $gray-100; + border-bottom: 1px solid $gray-200; + } } -} - -.bd-search-docs-toggle { - color: $gray-900; -} - -.bd-sidenav { - display: none; -} -.bd-toc-link { - display: block; - padding: .25rem 1.5rem; - font-weight: 600; - color: rgba(0, 0, 0, .65); - - &:hover { - color: rgba(0, 0, 0, .85); - text-decoration: none; + a { + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: 1.25rem; + color: rgba($black, .65); + text-decoration: if($link-decoration == none, null, none); + + &:hover, + &:focus { + color: rgba($black, .85); + text-decoration: if($link-hover-decoration == underline, none, null); + background-color: rgba($bd-purple-bright, .1); + } } -} -.bd-toc-item { - &.active { - margin-bottom: 1rem; - - &:not(:first-child) { - margin-top: 1rem; + .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-purple-bright, .1); } - > .bd-toc-link { - color: rgba(0, 0, 0, .85); - - &:hover { - background-color: transparent; - } + &:focus { + box-shadow: 0 0 0 1px rgba($bd-purple-bright, .7); } - > .bd-sidenav { - display: block; + // 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%; } - } -} -// All levels of nav -.bd-sidebar .nav > li > a { - display: block; - padding: .25rem 1.5rem; - @include font-size(90%); - color: rgba(0, 0, 0, .65); -} + &[aria-expanded="true"] { + color: rgba($black, .85); -.bd-sidebar .nav > li > a:hover { - color: rgba(0, 0, 0, .85); - text-decoration: none; - background-color: transparent; -} + &::before { + transform: rotate(90deg); + } + } + } -.bd-sidebar .nav > .active > a, -.bd-sidebar .nav > .active:hover > a { - font-weight: 600; - color: rgba(0, 0, 0, .85); - background-color: transparent; + .active { + font-weight: 600; + color: rgba($black, .85); + } } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_skippy.scss b/vendor/twbs/bootstrap/site/assets/scss/_skippy.scss index 894db70db..ea82c625b 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_skippy.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_skippy.scss @@ -1,20 +1,7 @@ -// stylelint-disable declaration-no-important - .skippy { background-color: $bd-purple; a { color: $white; } - - &:focus-within a { - position: static !important; - width: auto !important; - height: auto !important; - padding: $spacer / 2 !important; - margin: $spacer / 4 !important; - overflow: visible !important; - clip: auto !important; - white-space: normal !important; - } } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_toc.scss b/vendor/twbs/bootstrap/site/assets/scss/_toc.scss index 23d843a9b..596945628 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_toc.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_toc.scss @@ -1,53 +1,41 @@ -// stylelint-disable selector-max-combinators, selector-max-type, selector-max-compound-selectors - -// -// Right side table of contents -// +// stylelint-disable selector-max-type .bd-toc { - @supports (position: sticky) { + @include media-breakpoint-up(lg) { position: sticky; - top: 4rem; - height: subtract(100vh, 4rem); + top: 5rem; + right: 0; + z-index: 2; + height: subtract(100vh, 7rem); overflow-y: auto; } - order: 2; - padding-top: 1.5rem; - padding-bottom: 1.5rem; - @include font-size(.875rem); nav { - padding-left: 0; - border-left: 1px solid #eee; + @include font-size(.875rem); ul { padding-left: 0; + list-style: none; ul { padding-left: 1rem; + margin-top: .25rem; } } - a code { - font: inherit; + li { + margin-bottom: .25rem; } - li { - display: block; + a { + color: inherit; - ul li ul { - padding-left: 1rem; + &:not(:hover) { + text-decoration: none; } - a { - display: block; - padding: .125rem 1.5rem; - color: #77757a; - - &:hover { - color: $blue; - text-decoration: none; - } + code { + font: inherit; } } } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_variables.scss b/vendor/twbs/bootstrap/site/assets/scss/_variables.scss index b5a5381af..110600260 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_variables.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_variables.scss @@ -1,15 +1,13 @@ +// stylelint-disable scss/dollar-variable-default + // Local docs variables $bd-purple: #563d7c; -$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); -$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); +$bd-purple-bright: 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-dark: #2a2730; $bd-download: #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>"); - -// Enable responsive font sizes for font sizes defined in the docs -// The weird if test is made as a workaround to prevent a false fusv error. -// -$enable-responsive-font-sizes: if($enable-responsive-font-sizes, true, true); +$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>"); diff --git a/vendor/twbs/bootstrap/site/assets/scss/docs.scss b/vendor/twbs/bootstrap/site/assets/scss/docs.scss index 1dc3016e0..e3066ed2e 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/docs.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/docs.scss @@ -30,18 +30,19 @@ // Load docs components @import "variables"; -@import "nav"; +@import "navbar"; +@import "subnav"; @import "masthead"; @import "ads"; @import "content"; @import "skippy"; @import "sidebar"; +@import "layout"; @import "toc"; @import "footer"; @import "component-examples"; @import "buttons"; @import "callouts"; -@import "browser-bugs"; @import "brand"; @import "colors"; @import "clipboard-js"; |