mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-20 20:00:36 +03:00
Switch to Hugo
This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
This commit is contained in:
XhmikosR
@@ -0,0 +1,112 @@
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
/* global ClipboardJS: false, anchors: false, bsCustomFileInput: false */
|
||||
|
||||
(function ($) {
|
||||
'use strict'
|
||||
|
||||
$(function () {
|
||||
// Tooltip and popover demos
|
||||
$('.tooltip-demo').tooltip({
|
||||
selector: '[data-toggle="tooltip"]',
|
||||
container: 'body'
|
||||
})
|
||||
|
||||
$('[data-toggle="popover"]').popover()
|
||||
|
||||
$('.toast')
|
||||
.toast({
|
||||
autohide: false
|
||||
})
|
||||
.toast('show')
|
||||
|
||||
// Demos within modals
|
||||
$('.tooltip-test').tooltip()
|
||||
$('.popover-test').popover()
|
||||
|
||||
// Indeterminate checkbox example
|
||||
$('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
|
||||
|
||||
// Disable empty links in docs examples
|
||||
$('.bd-content [href="#"]').click(function (e) {
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
// Modal relatedTarget demo
|
||||
$('#exampleModal').on('show.bs.modal', function (event) {
|
||||
var $button = $(event.relatedTarget) // Button that triggered the modal
|
||||
var recipient = $button.data('whatever') // Extract info from data-* attributes
|
||||
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
|
||||
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
|
||||
var $modal = $(this)
|
||||
$modal.find('.modal-title').text('New message to ' + recipient)
|
||||
$modal.find('.modal-body input').val(recipient)
|
||||
})
|
||||
|
||||
// Activate animated progress bar
|
||||
$('.bd-toggle-animated-progress').on('click', function () {
|
||||
$(this).siblings('.progress').find('.progress-bar-striped').toggleClass('progress-bar-animated')
|
||||
})
|
||||
|
||||
// Insert copy to clipboard button before .highlight
|
||||
$('div.highlight').each(function () {
|
||||
var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
|
||||
$(this).before(btnHtml)
|
||||
$('.btn-clipboard')
|
||||
.tooltip()
|
||||
.on('mouseleave', function () {
|
||||
// Explicitly hide tooltip, since after clicking it remains
|
||||
// focused (as it's a button), so tooltip would otherwise
|
||||
// remain visible until focus is moved away
|
||||
$(this).tooltip('hide')
|
||||
})
|
||||
})
|
||||
|
||||
var clipboard = new ClipboardJS('.btn-clipboard', {
|
||||
target: function (trigger) {
|
||||
return trigger.parentNode.nextElementSibling
|
||||
}
|
||||
})
|
||||
|
||||
clipboard.on('success', function (e) {
|
||||
$(e.trigger)
|
||||
.attr('title', 'Copied!')
|
||||
.tooltip('_fixTitle')
|
||||
.tooltip('show')
|
||||
.attr('title', 'Copy to clipboard')
|
||||
.tooltip('_fixTitle')
|
||||
|
||||
e.clearSelection()
|
||||
})
|
||||
|
||||
clipboard.on('error', function (e) {
|
||||
var modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
|
||||
var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
|
||||
|
||||
$(e.trigger)
|
||||
.attr('title', fallbackMsg)
|
||||
.tooltip('_fixTitle')
|
||||
.tooltip('show')
|
||||
.attr('title', 'Copy to clipboard')
|
||||
.tooltip('_fixTitle')
|
||||
})
|
||||
|
||||
anchors.options = {
|
||||
icon: '#'
|
||||
}
|
||||
anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
|
||||
$('.bd-content').children('h2, h3, h4, h5').wrapInner('<span class="bd-content-title"></span>')
|
||||
|
||||
bsCustomFileInput.init()
|
||||
})
|
||||
})(jQuery)
|
||||
@@ -0,0 +1,52 @@
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
// Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
function emulatedIEMajorVersion() {
|
||||
var groups = /MSIE ([\d.]+)/.exec(window.navigator.userAgent)
|
||||
if (groups === null) {
|
||||
return null
|
||||
}
|
||||
|
||||
var ieVersionNum = parseInt(groups[1], 10)
|
||||
var ieMajorVersion = Math.floor(ieVersionNum)
|
||||
return ieMajorVersion
|
||||
}
|
||||
|
||||
function actualNonEmulatedIEMajorVersion() {
|
||||
// Detects the actual version of IE in use, even if it's in an older-IE emulation mode.
|
||||
// IE JavaScript conditional compilation docs: https://msdn.microsoft.com/library/121hztk3%28v=vs.94%29.aspx
|
||||
// @cc_on docs: https://msdn.microsoft.com/library/8ka90k2e%28v=vs.94%29.aspx
|
||||
var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // eslint-disable-line no-new-func
|
||||
if (typeof jscriptVersion === 'undefined') {
|
||||
return 11 // IE11+ not in emulation mode
|
||||
}
|
||||
|
||||
if (jscriptVersion < 9) {
|
||||
return 8 // IE8 (or lower; haven't tested on IE<8)
|
||||
}
|
||||
|
||||
return jscriptVersion // IE9 or IE10 in any mode, or IE11 in non-IE11 mode
|
||||
}
|
||||
|
||||
var ua = window.navigator.userAgent
|
||||
if (ua.indexOf('Opera') > -1 || ua.indexOf('Presto') > -1) {
|
||||
return // Opera, which might pretend to be IE
|
||||
}
|
||||
|
||||
var emulated = emulatedIEMajorVersion()
|
||||
if (emulated === null) {
|
||||
return // Not IE
|
||||
}
|
||||
|
||||
var nonEmulated = actualNonEmulatedIEMajorVersion()
|
||||
|
||||
if (emulated !== nonEmulated) {
|
||||
// eslint-disable-next-line no-alert
|
||||
window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!')
|
||||
}
|
||||
})()
|
||||
@@ -0,0 +1,60 @@
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
var inputElement = document.getElementById('search-input')
|
||||
|
||||
if (!window.docsearch || !inputElement) {
|
||||
return
|
||||
}
|
||||
|
||||
var siteDocsVersion = inputElement.getAttribute('data-docs-version')
|
||||
|
||||
function getOrigin() {
|
||||
var location = window.location
|
||||
var origin = location.origin
|
||||
|
||||
if (!origin) {
|
||||
var port = location.port ? ':' + location.port : ''
|
||||
|
||||
origin = location.protocol + '//' + location.hostname + port
|
||||
}
|
||||
|
||||
return origin
|
||||
}
|
||||
|
||||
window.docsearch({
|
||||
apiKey: '5990ad008512000bba2cf951ccf0332f',
|
||||
indexName: 'bootstrap',
|
||||
inputSelector: '#search-input',
|
||||
algoliaOptions: {
|
||||
facetFilters: ['version:' + siteDocsVersion]
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
var currentUrl = getOrigin()
|
||||
var liveUrl = 'https://getbootstrap.com/'
|
||||
|
||||
hit.url = currentUrl.lastIndexOf(liveUrl, 0) === 0 ?
|
||||
// On production, return the result as is
|
||||
hit.url :
|
||||
// On development or Netlify, replace `hit.url` with a trailing slash,
|
||||
// so that the result link is relative to the server root
|
||||
hit.url.replace(liveUrl, '/')
|
||||
|
||||
// Prevent jumping to first header
|
||||
if (hit.anchor === 'content') {
|
||||
hit.url = hit.url.replace(/#content$/, '')
|
||||
hit.anchor = null
|
||||
}
|
||||
|
||||
return hit
|
||||
})
|
||||
},
|
||||
// Set debug to `true` if you want to inspect the dropdown
|
||||
debug: false
|
||||
})
|
||||
})()
|
||||
Vendored
+9
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* bsCustomFileInput v1.3.4 (https://github.com/Johann-S/bs-custom-file-input)
|
||||
* Copyright 2018 - 2020 Johann-S <johann.servoire@gmail.com>
|
||||
* Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE)
|
||||
*/
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).bsCustomFileInput=t()}(this,function(){"use strict";var s={CUSTOMFILE:'.custom-file input[type="file"]',CUSTOMFILELABEL:".custom-file-label",FORM:"form",INPUT:"input"},l=function(e){if(0<e.childNodes.length)for(var t=[].slice.call(e.childNodes),n=0;n<t.length;n++){var l=t[n];if(3!==l.nodeType)return l}return e},u=function(e){var t=e.bsCustomFileInput.defaultText,n=e.parentNode.querySelector(s.CUSTOMFILELABEL);n&&(l(n).textContent=t)},n=!!window.File,r=function(e){if(e.hasAttribute("multiple")&&n)return[].slice.call(e.files).map(function(e){return e.name}).join(", ");if(-1===e.value.indexOf("fakepath"))return e.value;var t=e.value.split("\\");return t[t.length-1]};function d(){var e=this.parentNode.querySelector(s.CUSTOMFILELABEL);if(e){var t=l(e),n=r(this);n.length?t.textContent=n:u(this)}}function v(){for(var e=[].slice.call(this.querySelectorAll(s.INPUT)).filter(function(e){return!!e.bsCustomFileInput}),t=0,n=e.length;t<n;t++)u(e[t])}var p="bsCustomFileInput",m="reset",h="change";return{init:function(e,t){void 0===e&&(e=s.CUSTOMFILE),void 0===t&&(t=s.FORM);for(var n,l,r=[].slice.call(document.querySelectorAll(e)),i=[].slice.call(document.querySelectorAll(t)),o=0,u=r.length;o<u;o++){var c=r[o];Object.defineProperty(c,p,{value:{defaultText:(n=void 0,n="",(l=c.parentNode.querySelector(s.CUSTOMFILELABEL))&&(n=l.textContent),n)},writable:!0}),d.call(c),c.addEventListener(h,d)}for(var f=0,a=i.length;f<a;f++)i[f].addEventListener(m,v),Object.defineProperty(i[f],p,{value:!0,writable:!0})},destroy:function(){for(var e=[].slice.call(document.querySelectorAll(s.FORM)).filter(function(e){return!!e.bsCustomFileInput}),t=[].slice.call(document.querySelectorAll(s.INPUT)).filter(function(e){return!!e.bsCustomFileInput}),n=0,l=t.length;n<l;n++){var r=t[n];u(r),r[p]=void 0,r.removeEventListener(h,d)}for(var i=0,o=e.length;i<o;i++)e[i].removeEventListener(m,v),e[i][p]=void 0}}});
|
||||
//# sourceMappingURL=bs-custom-file-input.min.js.map
|
||||
+7
File diff suppressed because one or more lines are too long
@@ -0,0 +1,39 @@
|
||||
// stylelint-disable declaration-no-important, selector-max-id
|
||||
|
||||
//
|
||||
// Carbon ads
|
||||
//
|
||||
|
||||
#carbonads {
|
||||
position: static;
|
||||
display: block;
|
||||
max-width: 400px;
|
||||
padding: 15px 15px 15px 160px;
|
||||
margin: 2rem 0;
|
||||
overflow: hidden;
|
||||
@include font-size(.8125rem);
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
background-color: rgba(0, 0, 0, .05);
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
max-width: 330px;
|
||||
@include border-radius(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.carbon-img {
|
||||
float: left;
|
||||
margin-left: -145px;
|
||||
}
|
||||
|
||||
.carbon-poweredby {
|
||||
display: block;
|
||||
margin-top: .75rem;
|
||||
color: #777 !important;
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion {
|
||||
padding: 0 !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.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--wrapper {
|
||||
float: none !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
// Section header
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
float: none !important;
|
||||
width: auto !important;
|
||||
padding: 0 !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-inline {
|
||||
display: block !important;
|
||||
@include font-size(.875rem);
|
||||
color: $gray-700;
|
||||
|
||||
&::after {
|
||||
padding: 0 .25rem;
|
||||
content: "/";
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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--title {
|
||||
display: block;
|
||||
margin-bottom: 0 !important;
|
||||
@include font-size(.875rem, true);
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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-footer--logo {
|
||||
display: inline !important;
|
||||
overflow: visible !important;
|
||||
color: inherit !important;
|
||||
text-indent: 0 !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: #5f2dab;
|
||||
background-color: rgba(154, 132, 187, .12);
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
|
||||
box-shadow: inset 0 -2px 0 0 rgba(95, 45, 171, .5) !important;
|
||||
}
|
||||
|
||||
.ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
|
||||
background-color: rgba(208, 189, 236, .15) !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.anchorjs-link {
|
||||
font-weight: 400;
|
||||
color: rgba($link-color, .5);
|
||||
@include transition(color .15s ease-in-out, opacity .15s ease-in-out);
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
//
|
||||
// Brand guidelines
|
||||
//
|
||||
|
||||
// Logo series wrapper
|
||||
.bd-brand-logos {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
color: $bd-purple;
|
||||
background-color: #f9f9f9;
|
||||
@include border-radius();
|
||||
|
||||
.inverse {
|
||||
color: $white;
|
||||
background-color: $bd-purple;
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Color swatches
|
||||
//
|
||||
|
||||
.color-swatches {
|
||||
margin: 0 -5px;
|
||||
overflow: hidden; // clearfix
|
||||
|
||||
// Docs colors
|
||||
.bd-purple {
|
||||
background-color: $bd-purple;
|
||||
}
|
||||
.bd-purple-light {
|
||||
background-color: $bd-purple-light;
|
||||
}
|
||||
.bd-purple-lighter {
|
||||
background-color: #e5e1ea;
|
||||
}
|
||||
.bd-gray {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
float: left;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin-right: .25rem;
|
||||
margin-left: .25rem;
|
||||
@include border-radius();
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
// 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%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
// Buttons
|
||||
//
|
||||
// Custom buttons for the docs.
|
||||
|
||||
.btn-bd-primary {
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
background-color: $bd-purple-bright;
|
||||
border-color: $bd-purple-bright;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $white;
|
||||
background-color: darken($bd-purple-bright, 10%);
|
||||
border-color: darken($bd-purple-bright, 10%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-bd-download {
|
||||
font-weight: 600;
|
||||
color: $bd-download;
|
||||
border-color: $bd-download;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $bd-dark;
|
||||
background-color: $bd-download;
|
||||
border-color: $bd-download;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px rgba($bd-download, .25);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-bd-light {
|
||||
color: $gray-600;
|
||||
border-color: $gray-300;
|
||||
|
||||
.show > &,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $bd-purple-bright;
|
||||
background-color: $white;
|
||||
border-color: $bd-purple-bright;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
//
|
||||
// Callouts
|
||||
//
|
||||
|
||||
.bd-callout {
|
||||
padding: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: 1px solid #eee;
|
||||
border-left-width: .25rem;
|
||||
@include border-radius();
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
@include border-radius();
|
||||
}
|
||||
|
||||
+ .bd-callout {
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Variations
|
||||
@mixin bs-callout-variant($color) {
|
||||
border-left-color: $color;
|
||||
|
||||
h4 { color: $color; }
|
||||
}
|
||||
|
||||
.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); }
|
||||
@@ -0,0 +1,36 @@
|
||||
// clipboard.js
|
||||
//
|
||||
// JS-based `Copy` buttons for code snippets.
|
||||
|
||||
.bd-clipboard {
|
||||
position: relative;
|
||||
display: none;
|
||||
float: right;
|
||||
|
||||
+ .highlight {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-clipboard {
|
||||
position: absolute;
|
||||
top: .65rem;
|
||||
right: .65rem;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
padding: .25rem .5rem;
|
||||
@include font-size(65%);
|
||||
color: $primary;
|
||||
background-color: $white;
|
||||
border: 1px solid;
|
||||
@include border-radius();
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
//
|
||||
// Docs color palette classes
|
||||
//
|
||||
|
||||
@each $color, $value in $colors {
|
||||
.swatch-#{$color} {
|
||||
color: color-yiq($value);
|
||||
background-color: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $grays {
|
||||
.swatch-#{$color} {
|
||||
color: color-yiq($value);
|
||||
background-color: #{$value};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Grid examples
|
||||
//
|
||||
|
||||
.bd-example-row {
|
||||
.row {
|
||||
> .col,
|
||||
> [class^="col-"] {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(86, 61, 124, .15);
|
||||
border: 1px solid rgba(86, 61, 124, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
min-height: 10rem;
|
||||
background-color: rgba(255, 0, 0, .1);
|
||||
}
|
||||
|
||||
.bd-highlight {
|
||||
background-color: rgba($bd-purple, .15);
|
||||
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;
|
||||
@include make-container();
|
||||
}
|
||||
|
||||
.example-row {
|
||||
@include make-row();
|
||||
}
|
||||
|
||||
.example-content-main {
|
||||
@include make-col-ready();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(6);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(8);
|
||||
}
|
||||
}
|
||||
|
||||
.example-content-secondary {
|
||||
@include make-col-ready();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(6);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Docs examples
|
||||
//
|
||||
|
||||
.bd-example {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
margin: 1rem (-$grid-gutter-width / 2) 0;
|
||||
border: solid $gray-100;
|
||||
border-width: .2rem 0 0;
|
||||
@include clearfix();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: 1.5rem;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-width: .2rem;
|
||||
}
|
||||
|
||||
+ .highlight,
|
||||
+ .clipboard + .highlight {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
+ p {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.custom-file-input:lang(es) ~ .custom-file-label::after {
|
||||
content: "Elegir";
|
||||
}
|
||||
|
||||
> .form-control {
|
||||
+ .form-control {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .nav + .nav,
|
||||
> .alert + .alert,
|
||||
> .navbar + .navbar,
|
||||
> .progress + .progress,
|
||||
> .progress + .btn {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
> .dropdown-menu:first-child {
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .form-group: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 {
|
||||
> svg + svg,
|
||||
> img + img {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.bd-example {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-top: .25rem;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
> .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
|
||||
.bd-example > .list-group {
|
||||
max-width: 400px;
|
||||
}
|
||||
.bd-example > [class*="list-group-horizontal"] {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Navbars
|
||||
.bd-example {
|
||||
.fixed-top,
|
||||
.sticky-top {
|
||||
position: static;
|
||||
margin: -1rem -1rem 1rem;
|
||||
}
|
||||
.fixed-bottom {
|
||||
position: static;
|
||||
margin: 1rem -1rem -1rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.fixed-top,
|
||||
.sticky-top {
|
||||
margin: -1.5rem -1.5rem 1rem;
|
||||
}
|
||||
.fixed-bottom {
|
||||
margin: 1rem -1.5rem -1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.bd-example .pagination {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Example modals
|
||||
.modal {
|
||||
z-index: 1072;
|
||||
|
||||
.tooltip,
|
||||
.popover {
|
||||
z-index: 1073;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
z-index: 1071;
|
||||
}
|
||||
|
||||
.bd-example-modal {
|
||||
background-color: #fafafa;
|
||||
|
||||
.modal {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 1;
|
||||
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;
|
||||
|
||||
.popover {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
width: 260px;
|
||||
margin: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
.tooltip-demo a {
|
||||
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;
|
||||
height: 200px;
|
||||
margin-top: .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.scrollspy-example-2 {
|
||||
position: relative;
|
||||
height: 350px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.bd-example-border-utils {
|
||||
[class^="border"] {
|
||||
display: inline-block;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: .25rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-border-utils-0 {
|
||||
[class^="border"] {
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
pre {
|
||||
padding: 0;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
pre code {
|
||||
@include font-size(inherit);
|
||||
color: $gray-900; // Effectively the base text color
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
// 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`.
|
||||
//
|
||||
|
||||
.bd-content {
|
||||
order: 1;
|
||||
|
||||
// Hack the sticky header
|
||||
> h2[id],
|
||||
> h3[id],
|
||||
> h4[id] {
|
||||
pointer-events: none;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
height: 6rem;
|
||||
margin-top: -6rem;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
> table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
|
||||
&.table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Cells
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: $table-cell-padding;
|
||||
vertical-align: top;
|
||||
border: 1px solid $table-border-color;
|
||||
|
||||
> p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent breaking of code (e.g., Grunt tasks list)
|
||||
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-bg-purple-bright {
|
||||
background-color: $bd-purple-bright;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
//
|
||||
// Footer
|
||||
//
|
||||
|
||||
.bd-footer {
|
||||
@include font-size(.875rem);
|
||||
text-align: center;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
color: $gray-700;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
// 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%);
|
||||
|
||||
h1 {
|
||||
@include font-size(4rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lead {
|
||||
@include font-size(1.5rem);
|
||||
font-weight: 400;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.masthead-followup-svg {
|
||||
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125));
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// Placeholder svg used in the docs.
|
||||
//
|
||||
|
||||
// Remember to update `site/_layouts/examples.html` too if this changes!
|
||||
|
||||
.bd-placeholder-img {
|
||||
@include font-size(1.125rem);
|
||||
text-anchor: middle;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.bd-placeholder-img-lg {
|
||||
@include font-size(3.5rem);
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-links {
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-top: 1px solid rgba(0, 0, 0, .05);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@supports (position: sticky) {
|
||||
max-height: subtract(100vh, 9rem);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-toc-item {
|
||||
&.active {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
> .bd-toc-link {
|
||||
color: rgba(0, 0, 0, .85);
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
> .bd-sidenav {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
.bd-sidebar .nav > li > a:hover {
|
||||
color: rgba(0, 0, 0, .85);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bd-sidebar .nav > .active > a,
|
||||
.bd-sidebar .nav > .active:hover > a {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations, selector-class-pattern
|
||||
|
||||
/* NEW Background .chroma { background-color: #f0f0f0; } */
|
||||
/* NEW Error .chroma .err { } */
|
||||
/* NEW LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */
|
||||
/* NEW LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } */
|
||||
/* NEW LineHighlight .chroma .hl { display: block; width: 100%; background-color: #ffffcc; } */
|
||||
/* NEW LineNumbersTable .chroma .lnt { margin-right: .4em; padding: 0 .4em; } */
|
||||
/* NEW LineNumbers .chroma .ln { margin-right: .4em; padding: 0 .4em; } */
|
||||
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0; } /* NEW */
|
||||
/* Comment */ .chroma .c { color: #727272; }
|
||||
/* CommentMultiline */ .chroma .c1 { color: #727272; }
|
||||
/* CommentHashbang */ .chroma .ch { font-style: italic; color: #60a0b0; } /* NEW */
|
||||
/* CommentMultiline */ .chroma .cm { color: #727272; }
|
||||
/* CommentPreproc */ .chroma .cp { color: #008085; }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #007020; } /* NEW */
|
||||
/* CommentSpecial */ .chroma .cs { color: #727272; }
|
||||
/* GenericDeleted */ .chroma .gd { background-color: #fcc; border: 1px solid #c00; }
|
||||
/* GenericEmph */ .chroma .ge { font-style: italic; }
|
||||
/* GenericHeading */ .chroma .gh { color: #030; }
|
||||
/* GenericInserted */ .chroma .gi { background-color: #cfc; border: 1px solid #0c0; }
|
||||
/* GenericUnderline */ .chroma .gl { text-decoration: underline; } /* NEW */
|
||||
/* GenericOutput */ .chroma .go { color: #aaa; }
|
||||
/* GenericPrompt */ .chroma .gp { color: #009; }
|
||||
/* GenericError */ .chroma .gr { color: #f00; }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: 700; } /* NEW */
|
||||
/* GenericTraceback */ .chroma .gt { color: #9c6; }
|
||||
/* GenericSubheading */ .chroma .gu { color: #030; }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #c24f19; }
|
||||
/* Keyword */ .chroma .k { color: #069; }
|
||||
/* KeywordConstant */ .chroma .kc { color: #069; }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #069; }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #069; }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #069; }
|
||||
/* KeywordReserved */ .chroma .kr { color: #069; }
|
||||
/* KeywordType */ .chroma .kt { color: #078; }
|
||||
/* LiteralNumber */ .chroma .m { color: #c24f19; }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #c24f19; }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #40a070; } /* NEW */
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #c24f19; }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #c24f19; }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #c24f19; }
|
||||
/* NameAttribute */ .chroma .na { color: #006ee0; }
|
||||
/* NameBuiltin */ .chroma .nb { color: #366; }
|
||||
/* NameClass */ .chroma .nc { color: #168174; }
|
||||
/* NameDecorator */ .chroma .nd { color: #6b62de; }
|
||||
/* NameException */ .chroma .ne { color: #c00; }
|
||||
/* NameFunction */ .chroma .nf { color: #b715f4; }
|
||||
/* NameEntity */ .chroma .ni { color: #727272; }
|
||||
/* NameLabel */ .chroma .nl { color: #6b62de; }
|
||||
/* NameNamespace */ .chroma .nn { color: #007ca5; }
|
||||
/* NameConstant */ .chroma .no { color: #360; }
|
||||
/* NameTag */ .chroma .nt { color: #2f6f9f; }
|
||||
/* NameVariable */ .chroma .nv { color: #033; }
|
||||
/* Operator */ .chroma .o { color: #555; }
|
||||
/* OperatorWord */ .chroma .ow { color: #000; }
|
||||
/* LiteralString */ .chroma .s { color: #d73038; }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #c30; }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #c30; }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #4070a0; } /* NEW */
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #c30; }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #c30; }
|
||||
/* LiteralStringDoc */ .chroma .sd { font-style: italic; color: #c30; }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #c30; }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #c30; }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #a00; }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #337e7e; }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #fc3; }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #c30; }
|
||||
/* TextWhitespace */ .chroma .w { color: #bbb; }
|
||||
|
||||
.chroma {
|
||||
.language-bash,
|
||||
.language-sh {
|
||||
&::before {
|
||||
color: #009;
|
||||
content: "$ ";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// This is just to work around a Chroma bug;
|
||||
// should be removed when fixed upstream
|
||||
.m {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.language-powershell::before {
|
||||
color: #009;
|
||||
content: "PM> ";
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
// stylelint-disable selector-max-combinators, selector-max-type, selector-max-compound-selectors
|
||||
|
||||
//
|
||||
// Right side table of contents
|
||||
//
|
||||
|
||||
.bd-toc {
|
||||
@supports (position: sticky) {
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
height: subtract(100vh, 4rem);
|
||||
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;
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
a code {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
|
||||
ul li ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: .125rem 1.5rem;
|
||||
color: #77757a;
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// 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-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);
|
||||
@@ -0,0 +1,53 @@
|
||||
/*!
|
||||
* Bootstrap Docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
// Dev notes
|
||||
//
|
||||
// Background information on nomenclature and architecture decisions here.
|
||||
//
|
||||
// - Bootstrap functions, variables, and mixins are included for easy reuse.
|
||||
// Doing so gives us access to the same core utilities provided by Bootstrap.
|
||||
// For example, consistent media queries through those mixins.
|
||||
//
|
||||
// - Bootstrap's **docs variables** are prefixed with `$bd-`.
|
||||
// These custom colors avoid collision with the components Bootstrap provides.
|
||||
//
|
||||
// - Classes are prefixed with `.bd-`.
|
||||
// These classes indicate custom-built or modified components for the design
|
||||
// and layout of the Bootstrap docs. They are not included in our builds.
|
||||
//
|
||||
// Happy Bootstrapping!
|
||||
|
||||
// Load Bootstrap variables and mixins
|
||||
@import "../../../scss/functions";
|
||||
@import "../../../scss/variables";
|
||||
@import "../../../scss/mixins";
|
||||
|
||||
// Load docs components
|
||||
@import "variables";
|
||||
@import "nav";
|
||||
@import "masthead";
|
||||
@import "ads";
|
||||
@import "content";
|
||||
@import "skippy";
|
||||
@import "sidebar";
|
||||
@import "toc";
|
||||
@import "footer";
|
||||
@import "component-examples";
|
||||
@import "buttons";
|
||||
@import "callouts";
|
||||
@import "browser-bugs";
|
||||
@import "brand";
|
||||
@import "colors";
|
||||
@import "clipboard-js";
|
||||
@import "placeholder-img";
|
||||
|
||||
// Load docs dependencies
|
||||
@import "syntax";
|
||||
@import "anchor";
|
||||
@import "algolia";
|
||||
Reference in New Issue
Block a user