Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Mark Otto
|
7f61dceb0a | ||
|
Mark Otto
|
166d5e7a13 | ||
 Mark Otto
|
4fecde40b8 | ||
|
Mark Otto
|
5a54f29ae3 | ||
|
Mark Otto
|
f9c8e96f70 |
@@ -6,7 +6,7 @@
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap-grid.min.css",
|
||||
"maxSize": "6.75 kB"
|
||||
"maxSize": "7.00 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap-reboot.css",
|
||||
@@ -26,11 +26,11 @@
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap.css",
|
||||
"maxSize": "35.75 kB"
|
||||
"maxSize": "36.0 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap.min.css",
|
||||
"maxSize": "31.5 kB"
|
||||
"maxSize": "32.0 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/bootstrap.bundle.js",
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
"callout",
|
||||
"callouts",
|
||||
"camelCase",
|
||||
"checkgroup",
|
||||
"clearfix",
|
||||
"Codesniffer",
|
||||
"combinator",
|
||||
|
||||
@@ -42,8 +42,8 @@ const files = [
|
||||
configPropertyName: 'js_bundle_hash'
|
||||
},
|
||||
{
|
||||
file: 'node_modules/@popperjs/core/dist/umd/popper.min.js',
|
||||
configPropertyName: 'popper_hash'
|
||||
file: 'node_modules/@floating-ui/dom/dist/floating-ui.dom.umd.min.js',
|
||||
configPropertyName: 'floating_ui_hash'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ const BUNDLE = process.env.BUNDLE === 'true'
|
||||
const ESM = process.env.ESM === 'true'
|
||||
|
||||
let destinationFile = `bootstrap${ESM ? '.esm' : ''}`
|
||||
const external = ['@popperjs/core']
|
||||
const external = ['@floating-ui/dom']
|
||||
const plugins = [
|
||||
babel({
|
||||
// Only transpile our source code
|
||||
@@ -22,14 +22,14 @@ const plugins = [
|
||||
})
|
||||
]
|
||||
const globals = {
|
||||
'@popperjs/core': 'Popper'
|
||||
'@floating-ui/dom': 'FloatingUIDOM'
|
||||
}
|
||||
|
||||
if (BUNDLE) {
|
||||
destinationFile += '.bundle'
|
||||
// Remove last entry in external array to bundle Popper
|
||||
// Remove last entry in external array to bundle FloatingUI
|
||||
external.pop()
|
||||
delete globals['@popperjs/core']
|
||||
delete globals['@floating-ui/dom']
|
||||
plugins.push(
|
||||
replace({
|
||||
'process.env.NODE_ENV': '"production"',
|
||||
|
||||
+3
-3
@@ -42,9 +42,9 @@ cdn:
|
||||
js_hash: "sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y"
|
||||
js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
|
||||
js_bundle_hash: "sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
|
||||
popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
|
||||
popper_hash: "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
|
||||
popper_esm: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js"
|
||||
floating_ui: "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.12/dist/floating-ui.dom.umd.min.js"
|
||||
floating_ui_hash: "sha384-Os8n9bzoYJ/ESbGD7cW0VOTLk0hO++SO+Y4swXBE2dHrxiZkjADEr5ZGOcc9CorD"
|
||||
floating_ui_esm: "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.12/dist/floating-ui.dom.min.js"
|
||||
|
||||
anchors:
|
||||
min: 2
|
||||
|
||||
+35
-121
@@ -5,21 +5,18 @@
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import * as Popper from '@popperjs/core'
|
||||
import { inline, offset, shift } from '@floating-ui/dom'
|
||||
import BaseComponent from './base-component.js'
|
||||
import EventHandler from './dom/event-handler.js'
|
||||
import Manipulator from './dom/manipulator.js'
|
||||
import SelectorEngine from './dom/selector-engine.js'
|
||||
import {
|
||||
execute,
|
||||
getElement,
|
||||
getNextActiveElement,
|
||||
isDisabled,
|
||||
isElement,
|
||||
isRTL,
|
||||
isVisible,
|
||||
noop
|
||||
} from './util/index.js'
|
||||
import FloatingUi from './util/floating-ui.js'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
@@ -58,30 +55,28 @@ const SELECTOR_NAVBAR = '.navbar'
|
||||
const SELECTOR_NAVBAR_NAV = '.navbar-nav'
|
||||
const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
|
||||
|
||||
const PLACEMENT_TOP = isRTL() ? 'top-end' : 'top-start'
|
||||
const PLACEMENT_TOPEND = isRTL() ? 'top-start' : 'top-end'
|
||||
const PLACEMENT_BOTTOM = isRTL() ? 'bottom-end' : 'bottom-start'
|
||||
const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end'
|
||||
const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start'
|
||||
const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start'
|
||||
const PLACEMENT_TOPCENTER = 'top'
|
||||
const PLACEMENT_TOPEND = 'top-end'
|
||||
const PLACEMENT_TOP = 'top-start'
|
||||
const PLACEMENT_BOTTOMCENTER = 'bottom'
|
||||
const PLACEMENT_BOTTOMEND = 'bottom-end'
|
||||
const PLACEMENT_BOTTOM = 'bottom-start'
|
||||
const PLACEMENT_RIGHT = 'right-start'
|
||||
const PLACEMENT_LEFT = 'left-start'
|
||||
|
||||
const Default = {
|
||||
autoClose: true,
|
||||
boundary: 'clippingParents',
|
||||
display: 'dynamic',
|
||||
offset: [0, 2],
|
||||
popperConfig: null,
|
||||
offset: 10,
|
||||
positionConfig: null,
|
||||
reference: 'toggle'
|
||||
}
|
||||
|
||||
const DefaultType = {
|
||||
autoClose: '(boolean|string)',
|
||||
boundary: '(string|element)',
|
||||
display: 'string',
|
||||
offset: '(array|string|function)',
|
||||
popperConfig: '(null|object|function)',
|
||||
offset: '(number|array|string|function)',
|
||||
positionConfig: '(null|object|function)',
|
||||
reference: '(string|element|object)'
|
||||
}
|
||||
|
||||
@@ -93,13 +88,12 @@ class Dropdown extends BaseComponent {
|
||||
constructor(element, config) {
|
||||
super(element, config)
|
||||
|
||||
this._popper = null
|
||||
this._parent = this._element.parentNode // dropdown wrapper
|
||||
// TODO: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/
|
||||
this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] ||
|
||||
SelectorEngine.prev(this._element, SELECTOR_MENU)[0] ||
|
||||
SelectorEngine.findOne(SELECTOR_MENU, this._parent)
|
||||
this._inNavbar = this._detectNavbar()
|
||||
this._positionHelper = new FloatingUi(this._element)
|
||||
}
|
||||
|
||||
// Getters
|
||||
@@ -135,7 +129,7 @@ class Dropdown extends BaseComponent {
|
||||
return
|
||||
}
|
||||
|
||||
this._createPopper()
|
||||
this.update()
|
||||
|
||||
// If this is a touch-enabled device we add extra
|
||||
// empty mouseover listeners to the body's immediate children;
|
||||
@@ -167,19 +161,9 @@ class Dropdown extends BaseComponent {
|
||||
this._completeHide(relatedTarget)
|
||||
}
|
||||
|
||||
dispose() {
|
||||
if (this._popper) {
|
||||
this._popper.destroy()
|
||||
}
|
||||
|
||||
super.dispose()
|
||||
}
|
||||
|
||||
update() {
|
||||
this._inNavbar = this._detectNavbar()
|
||||
if (this._popper) {
|
||||
this._popper.update()
|
||||
}
|
||||
const reference = this._positionHelper.getReferenceElement(this._config.reference, this._parent, NAME)
|
||||
this._positionHelper.calculate(reference, this._menu, this._getFloatingUiConfig())
|
||||
}
|
||||
|
||||
// Private
|
||||
@@ -197,47 +181,28 @@ class Dropdown extends BaseComponent {
|
||||
}
|
||||
}
|
||||
|
||||
if (this._popper) {
|
||||
this._popper.destroy()
|
||||
}
|
||||
|
||||
this._menu.classList.remove(CLASS_NAME_SHOW)
|
||||
this._element.classList.remove(CLASS_NAME_SHOW)
|
||||
this._element.setAttribute('aria-expanded', 'false')
|
||||
Manipulator.removeDataAttribute(this._menu, 'popper')
|
||||
this._positionHelper.stop()
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = super._getConfig(config)
|
||||
|
||||
if (typeof config.reference === 'object' && !isElement(config.reference) &&
|
||||
typeof config.reference.getBoundingClientRect !== 'function'
|
||||
) {
|
||||
// Popper virtual elements require a getBoundingClientRect method
|
||||
throw new TypeError(`${NAME.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`)
|
||||
_getFloatingUiConfig() {
|
||||
const defaultBsConfig = {
|
||||
placement: this._getPlacement(),
|
||||
middleware: [offset(this._positionHelper.parseOffset(this._config.offset)), shift()]
|
||||
}
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
_createPopper() {
|
||||
if (typeof Popper === 'undefined') {
|
||||
throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org/docs/v2/)')
|
||||
// Disable positioning if we have a static display or Dropdown is in Navbar
|
||||
if (this._detectNavbar() || this._config.display === 'static') {
|
||||
defaultBsConfig.middleware.push(inline())
|
||||
}
|
||||
|
||||
let referenceElement = this._element
|
||||
|
||||
if (this._config.reference === 'parent') {
|
||||
referenceElement = this._parent
|
||||
} else if (isElement(this._config.reference)) {
|
||||
referenceElement = getElement(this._config.reference)
|
||||
} else if (typeof this._config.reference === 'object') {
|
||||
referenceElement = this._config.reference
|
||||
return {
|
||||
...defaultBsConfig,
|
||||
...execute(this._config.positionConfig, [undefined, defaultBsConfig])
|
||||
}
|
||||
|
||||
const popperConfig = this._getPopperConfig()
|
||||
this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
|
||||
}
|
||||
|
||||
_isShown() {
|
||||
@@ -247,20 +212,15 @@ class Dropdown extends BaseComponent {
|
||||
_getPlacement() {
|
||||
const parentDropdown = this._parent
|
||||
|
||||
if (parentDropdown.classList.contains(CLASS_NAME_DROPEND)) {
|
||||
return PLACEMENT_RIGHT
|
||||
const matches = {
|
||||
[CLASS_NAME_DROPEND]: PLACEMENT_RIGHT,
|
||||
[CLASS_NAME_DROPSTART]: PLACEMENT_LEFT,
|
||||
[CLASS_NAME_DROPUP_CENTER]: PLACEMENT_TOPCENTER,
|
||||
[CLASS_NAME_DROPDOWN_CENTER]: PLACEMENT_BOTTOMCENTER
|
||||
}
|
||||
|
||||
if (parentDropdown.classList.contains(CLASS_NAME_DROPSTART)) {
|
||||
return PLACEMENT_LEFT
|
||||
}
|
||||
|
||||
if (parentDropdown.classList.contains(CLASS_NAME_DROPUP_CENTER)) {
|
||||
return PLACEMENT_TOPCENTER
|
||||
}
|
||||
|
||||
if (parentDropdown.classList.contains(CLASS_NAME_DROPDOWN_CENTER)) {
|
||||
return PLACEMENT_BOTTOMCENTER
|
||||
const match = Object.keys(matches).find(keyClass => parentDropdown.classList.contains(keyClass))
|
||||
if (match) {
|
||||
return matches[match]
|
||||
}
|
||||
|
||||
// We need to trim the value because custom properties can also include spaces
|
||||
@@ -277,52 +237,6 @@ class Dropdown extends BaseComponent {
|
||||
return this._element.closest(SELECTOR_NAVBAR) !== null
|
||||
}
|
||||
|
||||
_getOffset() {
|
||||
const { offset } = this._config
|
||||
|
||||
if (typeof offset === 'string') {
|
||||
return offset.split(',').map(value => Number.parseInt(value, 10))
|
||||
}
|
||||
|
||||
if (typeof offset === 'function') {
|
||||
return popperData => offset(popperData, this._element)
|
||||
}
|
||||
|
||||
return offset
|
||||
}
|
||||
|
||||
_getPopperConfig() {
|
||||
const defaultBsPopperConfig = {
|
||||
placement: this._getPlacement(),
|
||||
modifiers: [{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
boundary: this._config.boundary
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: this._getOffset()
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
// Disable Popper if we have a static display or Dropdown is in Navbar
|
||||
if (this._inNavbar || this._config.display === 'static') {
|
||||
Manipulator.setDataAttribute(this._menu, 'popper', 'static') // TODO: v6 remove
|
||||
defaultBsPopperConfig.modifiers = [{
|
||||
name: 'applyStyles',
|
||||
enabled: false
|
||||
}]
|
||||
}
|
||||
|
||||
return {
|
||||
...defaultBsPopperConfig,
|
||||
...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig])
|
||||
}
|
||||
}
|
||||
|
||||
_selectMenuItem({ key, target }) {
|
||||
const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(element => isVisible(element))
|
||||
|
||||
|
||||
+2
-1
@@ -22,9 +22,10 @@ const Default = {
|
||||
offset: [0, 8],
|
||||
placement: 'right',
|
||||
template: '<div class="popover" role="tooltip">' +
|
||||
'<div class="popover-arrow"></div>' +
|
||||
'<div class="popover-inner">' +
|
||||
'<h3 class="popover-header"></h3>' +
|
||||
'<div class="popover-body"></div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
trigger: 'click'
|
||||
}
|
||||
|
||||
+53
-116
@@ -5,15 +5,18 @@
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import * as Popper from '@popperjs/core'
|
||||
import {
|
||||
flip, hide, offset, shift
|
||||
} from '@floating-ui/dom'
|
||||
import BaseComponent from './base-component.js'
|
||||
import EventHandler from './dom/event-handler.js'
|
||||
import Manipulator from './dom/manipulator.js'
|
||||
import {
|
||||
execute, findShadowRoot, getElement, getUID, isRTL, noop
|
||||
execute, findShadowRoot, getElement, getUID, isVisible, noop
|
||||
} from './util/index.js'
|
||||
import Manipulator from './dom/manipulator.js'
|
||||
import { DefaultAllowlist } from './util/sanitizer.js'
|
||||
import TemplateFactory from './util/template-factory.js'
|
||||
import FloatingUi from './util/floating-ui.js'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
@@ -50,30 +53,28 @@ const EVENT_MOUSELEAVE = 'mouseleave'
|
||||
const AttachmentMap = {
|
||||
AUTO: 'auto',
|
||||
TOP: 'top',
|
||||
RIGHT: isRTL() ? 'left' : 'right',
|
||||
RIGHT: 'right',
|
||||
BOTTOM: 'bottom',
|
||||
LEFT: isRTL() ? 'right' : 'left'
|
||||
LEFT: 'left'
|
||||
}
|
||||
|
||||
const Default = {
|
||||
allowList: DefaultAllowlist,
|
||||
animation: true,
|
||||
boundary: 'clippingParents',
|
||||
container: false,
|
||||
customClass: '',
|
||||
delay: 0,
|
||||
fallbackPlacements: ['top', 'right', 'bottom', 'left'],
|
||||
html: false,
|
||||
offset: [0, 6],
|
||||
offset: 0,
|
||||
placement: 'top',
|
||||
popperConfig: null,
|
||||
positionConfig: null,
|
||||
sanitize: true,
|
||||
sanitizeFn: null,
|
||||
selector: false,
|
||||
template: '<div class="tooltip" role="tooltip">' +
|
||||
'<div class="tooltip-arrow"></div>' +
|
||||
'<div class="tooltip-inner"></div>' +
|
||||
'</div>',
|
||||
'<div class="tooltip-inner"></div>' +
|
||||
'</div>',
|
||||
title: '',
|
||||
trigger: 'hover focus'
|
||||
}
|
||||
@@ -81,15 +82,14 @@ const Default = {
|
||||
const DefaultType = {
|
||||
allowList: 'object',
|
||||
animation: 'boolean',
|
||||
boundary: '(string|element)',
|
||||
container: '(string|element|boolean)',
|
||||
customClass: '(string|function)',
|
||||
delay: '(number|object)',
|
||||
fallbackPlacements: 'array',
|
||||
html: 'boolean',
|
||||
offset: '(array|string|function)',
|
||||
offset: '(number|array|string|function)',
|
||||
placement: '(string|function)',
|
||||
popperConfig: '(null|object|function)',
|
||||
positionConfig: '(null|object|function)',
|
||||
sanitize: 'boolean',
|
||||
sanitizeFn: '(null|function)',
|
||||
selector: '(string|boolean)',
|
||||
@@ -104,10 +104,6 @@ const DefaultType = {
|
||||
|
||||
class Tooltip extends BaseComponent {
|
||||
constructor(element, config) {
|
||||
if (typeof Popper === 'undefined') {
|
||||
throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org/docs/v2/)')
|
||||
}
|
||||
|
||||
super(element, config)
|
||||
|
||||
// Private
|
||||
@@ -115,7 +111,7 @@ class Tooltip extends BaseComponent {
|
||||
this._timeout = 0
|
||||
this._isHovered = null
|
||||
this._activeTrigger = {}
|
||||
this._popper = null
|
||||
this._positionHelper = new FloatingUi(this._element)
|
||||
this._templateFactory = null
|
||||
this._newContent = null
|
||||
|
||||
@@ -182,7 +178,7 @@ class Tooltip extends BaseComponent {
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this._element.style.display === 'none') {
|
||||
if (!isVisible(this._element)) {
|
||||
throw new Error('Please use show on visible elements')
|
||||
}
|
||||
|
||||
@@ -199,22 +195,14 @@ class Tooltip extends BaseComponent {
|
||||
}
|
||||
|
||||
// TODO: v6 remove this or make it optional
|
||||
this._disposePopper()
|
||||
|
||||
const tip = this._getTipElement()
|
||||
|
||||
this._element.setAttribute('aria-describedby', tip.getAttribute('id'))
|
||||
|
||||
const { container } = this._config
|
||||
|
||||
if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
|
||||
container.append(tip)
|
||||
EventHandler.trigger(this._element, this.constructor.eventName(EVENT_INSERTED))
|
||||
if (this.tip) {
|
||||
this.tip.remove()
|
||||
this.tip = null
|
||||
}
|
||||
|
||||
this._popper = this._createPopper(tip)
|
||||
this.update()
|
||||
|
||||
tip.classList.add(CLASS_NAME_SHOW)
|
||||
this.tip.classList.add(CLASS_NAME_SHOW)
|
||||
|
||||
// If this is a touch-enabled device we add extra
|
||||
// empty mouseover listeners to the body's immediate children;
|
||||
@@ -271,7 +259,8 @@ class Tooltip extends BaseComponent {
|
||||
}
|
||||
|
||||
if (!this._isHovered) {
|
||||
this._disposePopper()
|
||||
this._positionHelper.stop()
|
||||
this.tip.remove()
|
||||
}
|
||||
|
||||
this._element.removeAttribute('aria-describedby')
|
||||
@@ -282,9 +271,7 @@ class Tooltip extends BaseComponent {
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this._popper) {
|
||||
this._popper.update()
|
||||
}
|
||||
this._positionHelper.calculate(this._element, this._getTipElement(), this._getFloatingUiConfig(), { position: 'fixed' })
|
||||
}
|
||||
|
||||
// Protected
|
||||
@@ -295,6 +282,14 @@ class Tooltip extends BaseComponent {
|
||||
_getTipElement() {
|
||||
if (!this.tip) {
|
||||
this.tip = this._createTipElement(this._newContent || this._getContentForTemplate())
|
||||
this._element.setAttribute('aria-describedby', this.tip.getAttribute('id'))
|
||||
}
|
||||
|
||||
const { container } = this._config
|
||||
|
||||
if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
|
||||
container.append(this.tip)
|
||||
EventHandler.trigger(this._element, this.constructor.eventName(EVENT_INSERTED))
|
||||
}
|
||||
|
||||
return this.tip
|
||||
@@ -309,8 +304,6 @@ class Tooltip extends BaseComponent {
|
||||
}
|
||||
|
||||
tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW)
|
||||
// TODO: v6 the following can be achieved with CSS only
|
||||
tip.classList.add(`bs-${this.constructor.NAME}-auto`)
|
||||
|
||||
const tipId = getUID(this.constructor.NAME).toString()
|
||||
|
||||
@@ -326,7 +319,7 @@ class Tooltip extends BaseComponent {
|
||||
setContent(content) {
|
||||
this._newContent = content
|
||||
if (this._isShown()) {
|
||||
this._disposePopper()
|
||||
this._positionHelper.stop()
|
||||
this.show()
|
||||
}
|
||||
}
|
||||
@@ -370,77 +363,33 @@ class Tooltip extends BaseComponent {
|
||||
return this.tip && this.tip.classList.contains(CLASS_NAME_SHOW)
|
||||
}
|
||||
|
||||
_createPopper(tip) {
|
||||
const placement = execute(this._config.placement, [this, tip, this._element])
|
||||
const attachment = AttachmentMap[placement.toUpperCase()]
|
||||
return Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
|
||||
}
|
||||
|
||||
_getOffset() {
|
||||
const { offset } = this._config
|
||||
|
||||
if (typeof offset === 'string') {
|
||||
return offset.split(',').map(value => Number.parseInt(value, 10))
|
||||
}
|
||||
|
||||
if (typeof offset === 'function') {
|
||||
return popperData => offset(popperData, this._element)
|
||||
}
|
||||
|
||||
return offset
|
||||
}
|
||||
|
||||
_resolvePossibleFunction(arg) {
|
||||
return execute(arg, [this._element, this._element])
|
||||
}
|
||||
|
||||
_getPopperConfig(attachment) {
|
||||
const defaultBsPopperConfig = {
|
||||
placement: attachment,
|
||||
modifiers: [
|
||||
{
|
||||
name: 'flip',
|
||||
options: {
|
||||
fallbackPlacements: this._config.fallbackPlacements
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: this._getOffset()
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
boundary: this._config.boundary
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'arrow',
|
||||
options: {
|
||||
element: `.${this.constructor.NAME}-arrow`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'preSetPlacement',
|
||||
enabled: true,
|
||||
phase: 'beforeMain',
|
||||
fn: data => {
|
||||
// Pre-set Popper's placement attribute in order to read the arrow sizes properly.
|
||||
// Otherwise, Popper mixes up the width and height dimensions since the initial arrow style is for top placement
|
||||
this._getTipElement().setAttribute('data-popper-placement', data.state.placement)
|
||||
}
|
||||
}
|
||||
_getFloatingUiConfig() {
|
||||
const defaultBsConfig = {
|
||||
strategy: 'fixed',
|
||||
placement: this._getPlacement(),
|
||||
middleware: [
|
||||
offset(this._positionHelper.parseOffset(this._config.offset)),
|
||||
flip({ fallbackPlacements: this._config.fallbackPlacements }),
|
||||
shift(),
|
||||
hide()
|
||||
]
|
||||
}
|
||||
|
||||
return {
|
||||
...defaultBsPopperConfig,
|
||||
...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig])
|
||||
...defaultBsConfig,
|
||||
...execute(this._config.positionConfig, [undefined, defaultBsConfig])
|
||||
}
|
||||
}
|
||||
|
||||
_getPlacement() {
|
||||
const placement = execute(this._config.placement, [this, this.tip, this._element])
|
||||
return AttachmentMap[placement.toUpperCase()]
|
||||
}
|
||||
|
||||
_resolvePossibleFunction(arg) {
|
||||
return execute(arg, [this._element, this._element])
|
||||
}
|
||||
|
||||
_setListeners() {
|
||||
const triggers = this._config.trigger.split(' ')
|
||||
|
||||
@@ -593,17 +542,5 @@ class Tooltip extends BaseComponent {
|
||||
// `Object.fromEntries(keysWithDifferentValues)`
|
||||
return config
|
||||
}
|
||||
|
||||
_disposePopper() {
|
||||
if (this._popper) {
|
||||
this._popper.destroy()
|
||||
this._popper = null
|
||||
}
|
||||
|
||||
if (this.tip) {
|
||||
this.tip.remove()
|
||||
this.tip = null
|
||||
}
|
||||
}
|
||||
}
|
||||
export default Tooltip
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap floating-ui.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import { autoUpdate, computePosition } from '@floating-ui/dom'
|
||||
import Manipulator from '../dom/manipulator.js'
|
||||
import { getElement, isElement } from './index.js'
|
||||
|
||||
/**
|
||||
* Class definition
|
||||
*/
|
||||
class FloatingUi {
|
||||
constructor(element) {
|
||||
if (typeof computePosition === 'undefined') {
|
||||
throw new TypeError('Bootstrap\'s tooltips and dropdowns require Floating UI (https://floating-ui.com/)')
|
||||
}
|
||||
|
||||
this._element = element
|
||||
this._cleanup = null
|
||||
}
|
||||
|
||||
calculate(reference, floatingEl, config, extraCss = {}) {
|
||||
this._cleanup = autoUpdate(reference, floatingEl, () => {
|
||||
computePosition(reference, floatingEl, config)
|
||||
.then(({ x, y, placement, middlewareData }) => {
|
||||
const positionCss = {
|
||||
left: `${x}px`,
|
||||
top: `${y}px`
|
||||
}
|
||||
|
||||
if (middlewareData.hide) {
|
||||
const { referenceHidden } = middlewareData.hide
|
||||
|
||||
Object.assign(floatingEl.style, {
|
||||
visibility: referenceHidden ? 'hidden' : 'visible'
|
||||
})
|
||||
}
|
||||
|
||||
Object.assign(floatingEl.style, { ...positionCss, ...extraCss })
|
||||
Manipulator.setDataAttribute(floatingEl, 'placement', placement)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
stop() {
|
||||
if (this._cleanup) {
|
||||
this._cleanup()
|
||||
}
|
||||
}
|
||||
|
||||
getReferenceElement(reference, parent, PluginName) {
|
||||
if (reference === 'parent') {
|
||||
return parent
|
||||
}
|
||||
|
||||
if (isElement(reference)) {
|
||||
return getElement(reference)
|
||||
}
|
||||
|
||||
if (typeof reference === 'object') {
|
||||
if (typeof reference.getBoundingClientRect !== 'function') {
|
||||
throw new TypeError(`${PluginName.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`)
|
||||
}
|
||||
|
||||
return reference
|
||||
}
|
||||
|
||||
return this._element
|
||||
}
|
||||
|
||||
parseOffset(value) {
|
||||
if (typeof value === 'function') {
|
||||
return popperData => value(popperData, this._element)
|
||||
}
|
||||
|
||||
if (typeof value === 'string') {
|
||||
const values = value.split(',')
|
||||
value = [
|
||||
Number.parseInt(values[0], 10),
|
||||
Number.parseInt(values[1] || 0, 10)
|
||||
]
|
||||
}
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
return {
|
||||
mainAxis: value[0],
|
||||
crossAxis: value[1] || 0
|
||||
}
|
||||
}
|
||||
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
export default FloatingUi
|
||||
Generated
+27
-13
@@ -28,7 +28,7 @@
|
||||
"@babel/core": "^7.28.4",
|
||||
"@babel/preset-env": "^7.28.3",
|
||||
"@docsearch/js": "^3.9.0",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@floating-ui/dom": "^1.7.4",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^28.0.6",
|
||||
"@rollup/plugin-node-resolve": "^16.0.1",
|
||||
@@ -94,7 +94,7 @@
|
||||
"zod": "^4.1.9"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.11.8"
|
||||
"@floating-ui/dom": "^1.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
@@ -2971,6 +2971,31 @@
|
||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
|
||||
"integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
|
||||
"integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.7.3",
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
|
||||
"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.13.0",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
|
||||
@@ -4099,17 +4124,6 @@
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.8",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-babel": {
|
||||
"version": "6.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.0.4.tgz",
|
||||
|
||||
+12
-12
@@ -105,7 +105,7 @@
|
||||
"astro-preview": "astro preview --root site --port 9001"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.11.8"
|
||||
"@floating-ui/dom": "^1.7.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/check": "^0.9.4",
|
||||
@@ -117,7 +117,7 @@
|
||||
"@babel/core": "^7.28.4",
|
||||
"@babel/preset-env": "^7.28.3",
|
||||
"@docsearch/js": "^3.9.0",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@floating-ui/dom": "^1.7.4",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^28.0.6",
|
||||
"@rollup/plugin-node-resolve": "^16.0.1",
|
||||
@@ -195,16 +195,16 @@
|
||||
"directories": {
|
||||
"lib": "dist"
|
||||
},
|
||||
"shim": {
|
||||
"js/bootstrap": {
|
||||
"deps": [
|
||||
"@popperjs/core"
|
||||
]
|
||||
}
|
||||
},
|
||||
"shim": {
|
||||
"js/bootstrap": {
|
||||
"deps": [
|
||||
"@floating-ui/dom"
|
||||
]
|
||||
}
|
||||
},
|
||||
"dependencies": {},
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.11.8"
|
||||
}
|
||||
"peerDependencies": {
|
||||
"@floating-ui/dom": "^1.7.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+5
-5
@@ -52,9 +52,9 @@ $grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1400px
|
||||
lg: 1024px,
|
||||
xl: 1280px,
|
||||
2xl: 1536px
|
||||
) !default;
|
||||
// scss-docs-end grid-breakpoints
|
||||
|
||||
@@ -80,8 +80,8 @@ $container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px,
|
||||
xxl: 1320px
|
||||
xl: 1200px,
|
||||
2xl: 1440px
|
||||
) !default;
|
||||
// scss-docs-end container-max-widths
|
||||
|
||||
|
||||
+1
-38
@@ -123,11 +123,6 @@ $dropdown-dark-header-color: $gray-500 !default;
|
||||
@include border-radius(var(--#{$prefix}dropdown-border-radius));
|
||||
@include box-shadow(var(--#{$prefix}dropdown-box-shadow));
|
||||
|
||||
&[data-bs-popper] {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: var(--#{$prefix}dropdown-spacer);
|
||||
}
|
||||
|
||||
@if $dropdown-padding-y == 0 {
|
||||
> .dropdown-item:first-child,
|
||||
@@ -144,7 +139,7 @@ $dropdown-dark-header-color: $gray-500 !default;
|
||||
|
||||
// scss-docs-start responsive-breakpoints
|
||||
// We deliberately hardcode the `bs-` prefix because we check
|
||||
// this custom property in JS to determine Popper's positioning
|
||||
// this custom property in JS to determine positioning
|
||||
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@@ -152,20 +147,10 @@ $dropdown-dark-header-color: $gray-500 !default;
|
||||
|
||||
.dropdown-menu#{$infix}-start {
|
||||
--bs-position: start;
|
||||
|
||||
&[data-bs-popper] {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu#{$infix}-end {
|
||||
--bs-position: end;
|
||||
|
||||
&[data-bs-popper] {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -174,26 +159,12 @@ $dropdown-dark-header-color: $gray-500 !default;
|
||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||
// Just add .dropup after the standard .dropdown class and you're set.
|
||||
.dropup {
|
||||
.dropdown-menu[data-bs-popper] {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--#{$prefix}dropdown-spacer);
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@include caret(up);
|
||||
}
|
||||
}
|
||||
|
||||
.dropend {
|
||||
.dropdown-menu[data-bs-popper] {
|
||||
top: 0;
|
||||
right: auto;
|
||||
left: 100%;
|
||||
margin-top: 0;
|
||||
margin-left: var(--#{$prefix}dropdown-spacer);
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@include caret(end);
|
||||
@@ -204,14 +175,6 @@ $dropdown-dark-header-color: $gray-500 !default;
|
||||
}
|
||||
|
||||
.dropstart {
|
||||
.dropdown-menu[data-bs-popper] {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
left: auto;
|
||||
margin-top: 0;
|
||||
margin-right: var(--#{$prefix}dropdown-spacer);
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@include caret(start);
|
||||
&::before {
|
||||
|
||||
+96
-122
@@ -54,6 +54,9 @@ $popover-arrow-height: .5rem !default;
|
||||
--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
|
||||
// scss-docs-end popover-css-vars
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: var(--#{$prefix}popover-zindex);
|
||||
display: block;
|
||||
max-width: var(--#{$prefix}popover-max-width);
|
||||
@@ -63,148 +66,119 @@ $popover-arrow-height: .5rem !default;
|
||||
@include font-size(var(--#{$prefix}popover-font-size));
|
||||
// Allow breaking very long words so they don't overflow the popover's bounds
|
||||
word-wrap: break-word;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.popover-inner {
|
||||
margin: var(--#{$prefix}popover-arrow-height);
|
||||
background-color: var(--#{$prefix}popover-bg);
|
||||
background-clip: padding-box;
|
||||
border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
|
||||
@include border-radius(var(--#{$prefix}popover-border-radius));
|
||||
@include box-shadow(var(--#{$prefix}popover-box-shadow));
|
||||
|
||||
.popover-arrow {
|
||||
display: block;
|
||||
width: var(--#{$prefix}popover-arrow-width);
|
||||
height: var(--#{$prefix}popover-arrow-height);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-top {
|
||||
> .popover-arrow {
|
||||
bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: 0;
|
||||
border-top-color: var(--#{$prefix}popover-arrow-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: var(--#{$prefix}popover-border-width);
|
||||
border-top-color: var(--#{$prefix}popover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
.bs-popover-end {
|
||||
> .popover-arrow {
|
||||
left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
|
||||
width: var(--#{$prefix}popover-arrow-height);
|
||||
height: var(--#{$prefix}popover-arrow-width);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-right-color: var(--#{$prefix}popover-arrow-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: var(--#{$prefix}popover-border-width);
|
||||
border-right-color: var(--#{$prefix}popover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* rtl:end:ignore */
|
||||
|
||||
.bs-popover-bottom {
|
||||
> .popover-arrow {
|
||||
top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
border-bottom-color: var(--#{$prefix}popover-arrow-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: var(--#{$prefix}popover-border-width);
|
||||
border-bottom-color: var(--#{$prefix}popover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// This will remove the popover-header's border just below the arrow
|
||||
.popover-header::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
.popover[data-bs-placement="top"] {
|
||||
&::before,
|
||||
&::after {
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: var(--#{$prefix}popover-arrow-width);
|
||||
margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width));
|
||||
content: "";
|
||||
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
|
||||
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: 0;
|
||||
border-top-color: var(--#{$prefix}popover-arrow-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: var(--#{$prefix}popover-border-width);
|
||||
border-top-color: var(--#{$prefix}popover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.popover[data-bs-placement="bottom"] {
|
||||
&::before,
|
||||
&::after {
|
||||
left: 50%;
|
||||
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
border-bottom-color: var(--#{$prefix}popover-arrow-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: var(--#{$prefix}popover-border-width);
|
||||
border-bottom-color: var(--#{$prefix}popover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
.bs-popover-start {
|
||||
> .popover-arrow {
|
||||
right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
|
||||
width: var(--#{$prefix}popover-arrow-height);
|
||||
height: var(--#{$prefix}popover-arrow-width);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
|
||||
}
|
||||
.popover[data-bs-placement="right"] {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
right: 0;
|
||||
border-left-color: var(--#{$prefix}popover-arrow-border);
|
||||
}
|
||||
&::before {
|
||||
left: 0;
|
||||
border-right-color: var(--#{$prefix}popover-arrow-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: var(--#{$prefix}popover-border-width);
|
||||
border-left-color: var(--#{$prefix}popover-bg);
|
||||
}
|
||||
&::after {
|
||||
left: var(--#{$prefix}popover-border-width);
|
||||
border-right-color: var(--#{$prefix}popover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.popover[data-bs-placement="left"] {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
right: 0;
|
||||
border-left-color: var(--#{$prefix}popover-arrow-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: var(--#{$prefix}popover-border-width);
|
||||
border-left-color: var(--#{$prefix}popover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* rtl:end:ignore */
|
||||
|
||||
.bs-popover-auto {
|
||||
&[data-popper-placement^="top"] {
|
||||
@extend .bs-popover-top;
|
||||
}
|
||||
&[data-popper-placement^="right"] {
|
||||
@extend .bs-popover-end;
|
||||
}
|
||||
&[data-popper-placement^="bottom"] {
|
||||
@extend .bs-popover-bottom;
|
||||
}
|
||||
&[data-popper-placement^="left"] {
|
||||
@extend .bs-popover-start;
|
||||
}
|
||||
// This will remove the popover-header's border just below the arrow
|
||||
.popover-header::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: var(--#{$prefix}popover-arrow-width);
|
||||
margin-left: calc(var(--#{$prefix}popover-arrow-width) * -.5);
|
||||
content: "";
|
||||
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
|
||||
}
|
||||
|
||||
// Offset the popover to account for the popover arrow
|
||||
|
||||
+7
-2
@@ -91,6 +91,11 @@
|
||||
--#{$prefix}root-font-size: #{$font-size-root};
|
||||
}
|
||||
--#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
|
||||
|
||||
--#{$prefix}font-size-base: #{$font-size-base}; // 14px
|
||||
--#{$prefix}font-size-sm: calc(#{$font-size-base} * .9285);
|
||||
--#{$prefix}font-size-lg: calc(#{$font-size-base} * 1.285);
|
||||
|
||||
@include rfs($font-size-base, --#{$prefix}body-font-size);
|
||||
--#{$prefix}body-font-weight: #{$font-weight-base};
|
||||
--#{$prefix}body-line-height: #{$line-height-base};
|
||||
@@ -165,7 +170,7 @@
|
||||
--#{$prefix}border-radius-sm: #{$border-radius-sm};
|
||||
--#{$prefix}border-radius-lg: #{$border-radius-lg};
|
||||
--#{$prefix}border-radius-xl: #{$border-radius-xl};
|
||||
--#{$prefix}border-radius-xxl: #{$border-radius-xxl};
|
||||
--#{$prefix}border-radius-2xl: #{$border-radius-2xl};
|
||||
--#{$prefix}border-radius-pill: #{$border-radius-pill};
|
||||
// scss-docs-end root-border-radius-var
|
||||
|
||||
@@ -237,7 +242,7 @@
|
||||
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
|
||||
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
|
||||
|
||||
--#{$prefix}code-color: #{$code-color-dark};
|
||||
// --#{$prefix}code-color: #{$code-color-dark}; // removed in v6
|
||||
--#{$prefix}highlight-color: #{$mark-color-dark};
|
||||
--#{$prefix}highlight-bg: #{$mark-bg-dark};
|
||||
|
||||
|
||||
+31
-71
@@ -14,7 +14,6 @@ $tooltip-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
$tooltip-padding-y: $spacer * .25 !default;
|
||||
$tooltip-padding-x: $spacer * .5 !default;
|
||||
$tooltip-margin: null !default; // TODO: remove this in v6
|
||||
|
||||
$tooltip-arrow-width: .8rem !default;
|
||||
$tooltip-arrow-height: .4rem !default;
|
||||
@@ -38,7 +37,6 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
|
||||
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
|
||||
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
|
||||
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
|
||||
--#{$prefix}tooltip-margin: #{$tooltip-margin};
|
||||
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
|
||||
--#{$prefix}tooltip-color: #{$tooltip-color};
|
||||
--#{$prefix}tooltip-bg: #{$tooltip-bg};
|
||||
@@ -48,10 +46,12 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
|
||||
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
|
||||
// scss-docs-end tooltip-css-vars
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: var(--#{$prefix}tooltip-zindex);
|
||||
display: block;
|
||||
margin: var(--#{$prefix}tooltip-margin);
|
||||
@include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
|
||||
padding: var(--#{$prefix}tooltip-arrow-height);
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
@@ -62,83 +62,43 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
|
||||
|
||||
&.show { opacity: var(--#{$prefix}tooltip-opacity); }
|
||||
|
||||
.tooltip-arrow {
|
||||
display: block;
|
||||
width: var(--#{$prefix}tooltip-arrow-width);
|
||||
height: var(--#{$prefix}tooltip-arrow-height);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-tooltip-top .tooltip-arrow {
|
||||
bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
|
||||
|
||||
&::before {
|
||||
top: -1px;
|
||||
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
|
||||
border-top-color: var(--#{$prefix}tooltip-bg);
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
.bs-tooltip-end .tooltip-arrow {
|
||||
left: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
|
||||
width: var(--#{$prefix}tooltip-arrow-height);
|
||||
height: var(--#{$prefix}tooltip-arrow-width);
|
||||
|
||||
&::before {
|
||||
right: -1px;
|
||||
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
|
||||
border-right-color: var(--#{$prefix}tooltip-bg);
|
||||
}
|
||||
.tooltip[data-bs-placement="top"]::before {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
|
||||
border-top-color: var(--#{$prefix}tooltip-bg);
|
||||
}
|
||||
|
||||
/* rtl:end:ignore */
|
||||
|
||||
.bs-tooltip-bottom .tooltip-arrow {
|
||||
top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
|
||||
|
||||
&::before {
|
||||
bottom: -1px;
|
||||
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
|
||||
border-bottom-color: var(--#{$prefix}tooltip-bg);
|
||||
}
|
||||
.tooltip[data-bs-placement="bottom"]::before {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
|
||||
border-bottom-color: var(--#{$prefix}tooltip-bg);
|
||||
}
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
.bs-tooltip-start .tooltip-arrow {
|
||||
right: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
|
||||
width: var(--#{$prefix}tooltip-arrow-height);
|
||||
height: var(--#{$prefix}tooltip-arrow-width);
|
||||
|
||||
&::before {
|
||||
left: -1px;
|
||||
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
|
||||
border-left-color: var(--#{$prefix}tooltip-bg);
|
||||
}
|
||||
.tooltip[data-bs-placement="right"]::before {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
|
||||
border-right-color: var(--#{$prefix}tooltip-bg);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* rtl:end:ignore */
|
||||
|
||||
.bs-tooltip-auto {
|
||||
&[data-popper-placement^="top"] {
|
||||
@extend .bs-tooltip-top;
|
||||
}
|
||||
&[data-popper-placement^="right"] {
|
||||
@extend .bs-tooltip-end;
|
||||
}
|
||||
&[data-popper-placement^="bottom"] {
|
||||
@extend .bs-tooltip-bottom;
|
||||
}
|
||||
&[data-popper-placement^="left"] {
|
||||
@extend .bs-tooltip-start;
|
||||
}
|
||||
.tooltip[data-bs-placement="left"]::before {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
|
||||
border-left-color: var(--#{$prefix}tooltip-bg);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
|
||||
+10
-15
@@ -10,7 +10,7 @@
|
||||
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
||||
|
||||
// scss-docs-start theme-color-variables
|
||||
$primary: $purple-500 !default;
|
||||
$primary: $blue-500 !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green-500 !default;
|
||||
$info: $cyan-500 !default;
|
||||
@@ -167,6 +167,7 @@ $body-emphasis-color: $black !default;
|
||||
|
||||
$link-color: $primary !default;
|
||||
$link-decoration: underline !default;
|
||||
$link-underline-offset: .2em !default;
|
||||
$link-shade-percentage: 20% !default;
|
||||
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
|
||||
$link-hover-decoration: null !default;
|
||||
@@ -204,7 +205,7 @@ $border-widths: (
|
||||
5: 5px
|
||||
) !default;
|
||||
$border-style: solid !default;
|
||||
$border-color: $gray-300 !default;
|
||||
$border-color: color.mix($gray-300, $gray-400) !default;
|
||||
$border-color-translucent: rgba($black, .175) !default;
|
||||
// scss-docs-end border-variables
|
||||
|
||||
@@ -213,7 +214,7 @@ $border-radius: .375rem !default;
|
||||
$border-radius-sm: .25rem !default;
|
||||
$border-radius-lg: .5rem !default;
|
||||
$border-radius-xl: 1rem !default;
|
||||
$border-radius-xxl: 2rem !default;
|
||||
$border-radius-2xl: 2rem !default;
|
||||
$border-radius-pill: 50rem !default;
|
||||
// scss-docs-end border-radius-variables
|
||||
|
||||
@@ -266,8 +267,8 @@ $font-family-code: var(--#{$prefix}font-monospace) !default;
|
||||
|
||||
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
|
||||
// $font-size-base affects the font size of the body text
|
||||
$font-size-root: null !default;
|
||||
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
|
||||
$font-size-root: 16px !default;
|
||||
$font-size-base: 14px !default; // Assumes the browser default, typically `16px`
|
||||
$font-size-sm: $font-size-base * .875 !default;
|
||||
$font-size-lg: $font-size-base * 1.25 !default;
|
||||
|
||||
@@ -518,7 +519,7 @@ $modal-footer-border-width: $modal-header-border-width !default;
|
||||
$modal-sm: 300px !default;
|
||||
$modal-md: 500px !default;
|
||||
$modal-lg: 800px !default;
|
||||
$modal-xl: 1140px !default;
|
||||
$modal-xl: 1200px !default;
|
||||
|
||||
$modal-fade-transform: translate(0, -50px) !default;
|
||||
$modal-show-transform: none !default;
|
||||
@@ -546,8 +547,8 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
|
||||
|
||||
// Code
|
||||
|
||||
$code-font-size: $small-font-size !default;
|
||||
$code-color: $pink !default;
|
||||
$code-font-size: 95% !default;
|
||||
$code-color: var(--#{$prefix}secondary-text) !default;
|
||||
|
||||
$kbd-padding-y: .1875rem !default;
|
||||
$kbd-padding-x: .375rem !default;
|
||||
@@ -578,7 +579,7 @@ $border-color-translucent-dark: rgba($white, .15) !default;
|
||||
$headings-color-dark: inherit !default;
|
||||
$link-color-dark: tint-color($primary, 40%) !default;
|
||||
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
|
||||
$code-color-dark: tint-color($code-color, 40%) !default;
|
||||
// $code-color-dark: tint-color($code-color, 40%) !default;
|
||||
$mark-color-dark: $body-color-dark !default;
|
||||
$mark-bg-dark: $yellow-800 !default;
|
||||
|
||||
@@ -587,12 +588,6 @@ $mark-bg-dark: $yellow-800 !default;
|
||||
// Forms
|
||||
//
|
||||
|
||||
$form-select-indicator-color-dark: $body-color-dark !default;
|
||||
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
|
||||
|
||||
$form-switch-color-dark: rgba($white, .25) !default;
|
||||
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
|
||||
|
||||
// scss-docs-start form-validation-colors-dark
|
||||
$form-valid-color-dark: $green-300 !default;
|
||||
$form-valid-border-color-dark: $green-300 !default;
|
||||
|
||||
@@ -279,4 +279,19 @@
|
||||
.btn-sm {
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
+ .btn {
|
||||
pointer-events: none;
|
||||
filter: none;
|
||||
opacity: .65;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +33,8 @@
|
||||
|
||||
:root {
|
||||
@if $font-size-root != null {
|
||||
@include font-size(var(--#{$prefix}root-font-size));
|
||||
font-size: var(--#{$prefix}root-font-size);
|
||||
// @include font-size(var(--#{$prefix}root-font-size));
|
||||
}
|
||||
|
||||
@if $enable-smooth-scroll {
|
||||
@@ -256,12 +257,13 @@
|
||||
// Links
|
||||
|
||||
a {
|
||||
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
|
||||
text-decoration: $link-decoration;
|
||||
color: var(--#{$prefix}link-color);
|
||||
text-decoration: var(--#{$prefix}link-decoration);
|
||||
text-underline-offset: $link-underline-offset;
|
||||
|
||||
&:hover {
|
||||
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
|
||||
text-decoration: $link-hover-decoration;
|
||||
color: var(--#{$prefix}link-hover-color);
|
||||
text-decoration: var(--#{$prefix}link-hover-decoration);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
@use "../config" as *;
|
||||
@use "../colors" as *;
|
||||
@use "../variables" as *;
|
||||
@use "../functions" as *;
|
||||
@use "../vendor/rfs" as *;
|
||||
@use "../mixins/border-radius" as *;
|
||||
@use "../mixins/box-shadow" as *;
|
||||
@use "../mixins/color-mode" as *;
|
||||
@use "../mixins/focus-ring" as *;
|
||||
@use "../mixins/transition" as *;
|
||||
@use "form-variables" as *;
|
||||
|
||||
// scss-docs-start check-variables
|
||||
$check-border-color: var(--#{$prefix}border-color) !default;
|
||||
$check-checked-bg: var(--#{$prefix}primary-base) !default;
|
||||
$check-checked-border-color: $check-checked-bg !default;
|
||||
$check-indeterminate-bg: var(--#{$prefix}primary-base) !default;
|
||||
$check-indeterminate-border-color: $check-indeterminate-bg !default;
|
||||
$check-disabled-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
$check-disabled-border-color: $check-disabled-bg !default;
|
||||
$check-disabled-opacity: .65 !default;
|
||||
// scss-docs-end check-variables
|
||||
|
||||
@layer forms {
|
||||
b-checkgroup {
|
||||
display: flex;
|
||||
gap: var(--#{$prefix}gap, .5rem);
|
||||
align-items: var(--#{$prefix}align-items, start);
|
||||
|
||||
.description {
|
||||
color: var(--#{$prefix}secondary-text);
|
||||
}
|
||||
}
|
||||
|
||||
.check {
|
||||
// scss-docs-start check-css-variables
|
||||
--#{$prefix}check-bg: transparent;
|
||||
--#{$prefix}check-border-color: #{$check-border-color};
|
||||
--#{$prefix}check-checked-bg: #{$check-checked-bg};
|
||||
--#{$prefix}check-checked-border-color: #{$check-checked-border-color};
|
||||
--#{$prefix}check-indeterminate-bg: #{$check-indeterminate-bg};
|
||||
--#{$prefix}check-indeterminate-border-color: #{$check-indeterminate-border-color};
|
||||
--#{$prefix}check-disabled-bg: #{$check-disabled-bg};
|
||||
--#{$prefix}check-disabled-border-color: #{$check-disabled-border-color};
|
||||
--#{$prefix}check-disabled-opacity: #{$check-disabled-opacity};
|
||||
// scss-docs-end check-css-variables
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
margin-block: .125rem;
|
||||
|
||||
:where(svg, input) {
|
||||
flex-shrink: 0;
|
||||
grid-row-start: 1;
|
||||
grid-column-start: 1;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
:where(input) {
|
||||
appearance: none;
|
||||
// later: maybe set a tertiary bg color?
|
||||
background-color: var(--#{$prefix}check-bg);
|
||||
border: 1px solid var(--#{$prefix}check-border-color);
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: .25em;
|
||||
}
|
||||
|
||||
:where(input:checked, input:indeterminate) {
|
||||
background-color: var(--#{$prefix}check-checked-bg);
|
||||
border-color: var(--#{$prefix}check-checked-border-color);
|
||||
}
|
||||
|
||||
&:has(input:checked) .checked,
|
||||
&:has(input:indeterminate) .indeterminate {
|
||||
display: block;
|
||||
color: var(--#{$prefix}primary-contrast);
|
||||
stroke: currentcolor;
|
||||
}
|
||||
|
||||
&:has(input:disabled) {
|
||||
--#{$prefix}check-bg: var(--#{$prefix}check-disabled-bg);
|
||||
|
||||
~ label {
|
||||
color: var(--#{$prefix}secondary-text);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(input:disabled:checked) {
|
||||
opacity: var(--#{$prefix}check-disabled-opacity);
|
||||
}
|
||||
|
||||
:where(svg) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:where(svg path) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,252 +0,0 @@
|
||||
@use "../config" as *;
|
||||
@use "../colors" as *;
|
||||
@use "../variables" as *;
|
||||
@use "../functions" as *;
|
||||
@use "../vendor/rfs" as *;
|
||||
@use "../mixins/border-radius" as *;
|
||||
@use "../mixins/box-shadow" as *;
|
||||
@use "../mixins/color-mode" as *;
|
||||
@use "../mixins/focus-ring" as *;
|
||||
@use "../mixins/transition" as *;
|
||||
@use "form-variables" as *;
|
||||
|
||||
// scss-docs-start form-check-variables
|
||||
$form-check-input-width: 1em !default;
|
||||
$form-check-min-height: $font-size-base * $line-height-base !default;
|
||||
$form-check-padding-start: $form-check-input-width + .5em !default;
|
||||
$form-check-margin-bottom: .125rem !default;
|
||||
$form-check-label-color: null !default;
|
||||
$form-check-label-cursor: null !default;
|
||||
$form-check-transition: null !default;
|
||||
|
||||
$form-check-input-active-filter: brightness(90%) !default;
|
||||
|
||||
$form-check-input-bg: $input-bg !default;
|
||||
$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
|
||||
$form-check-input-border-radius: .25em !default;
|
||||
$form-check-radio-border-radius: 50% !default;
|
||||
$form-check-input-focus-border: $input-focus-border-color !default;
|
||||
$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
|
||||
|
||||
$form-check-input-checked-color: $component-active-color !default;
|
||||
$form-check-input-checked-bg-color: $component-active-bg !default;
|
||||
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
|
||||
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
|
||||
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
|
||||
|
||||
$form-check-input-indeterminate-color: $component-active-color !default;
|
||||
$form-check-input-indeterminate-bg-color: $component-active-bg !default;
|
||||
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
|
||||
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
|
||||
|
||||
$form-check-input-disabled-opacity: .5 !default;
|
||||
$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
|
||||
$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
|
||||
|
||||
$form-check-inline-margin-end: 1rem !default;
|
||||
// scss-docs-end form-check-variables
|
||||
|
||||
// scss-docs-start form-switch-variables
|
||||
$form-switch-color: rgba($black, .25) !default;
|
||||
$form-switch-width: 1.5em !default;
|
||||
$form-switch-padding-start: $form-switch-width + .5em !default;
|
||||
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
|
||||
$form-switch-border-radius: $form-switch-width !default;
|
||||
$form-switch-transition: background-position .15s ease-in-out !default;
|
||||
|
||||
$form-switch-focus-color: $input-focus-border-color !default;
|
||||
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
|
||||
|
||||
$form-switch-checked-color: $component-active-color !default;
|
||||
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
|
||||
$form-switch-checked-bg-position: right center !default;
|
||||
// scss-docs-end form-switch-variables
|
||||
|
||||
@layer forms {
|
||||
.form-check {
|
||||
display: block;
|
||||
min-height: $form-check-min-height;
|
||||
padding-left: $form-check-padding-start;
|
||||
margin-bottom: $form-check-margin-bottom;
|
||||
|
||||
.form-check-input {
|
||||
float: left;
|
||||
margin-left: $form-check-padding-start * -1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-reverse {
|
||||
padding-right: $form-check-padding-start;
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
|
||||
.form-check-input {
|
||||
float: right;
|
||||
margin-right: $form-check-padding-start * -1;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
--#{$prefix}form-check-bg: #{$form-check-input-bg};
|
||||
|
||||
flex-shrink: 0;
|
||||
width: $form-check-input-width;
|
||||
height: $form-check-input-width;
|
||||
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
|
||||
vertical-align: top;
|
||||
appearance: none;
|
||||
background-color: var(--#{$prefix}form-check-bg);
|
||||
background-image: var(--#{$prefix}form-check-bg-image);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
border: $form-check-input-border;
|
||||
print-color-adjust: exact; // Keep themed appearance for print
|
||||
@include transition($form-check-transition);
|
||||
|
||||
&[type="checkbox"] {
|
||||
@include border-radius($form-check-input-border-radius);
|
||||
}
|
||||
|
||||
&[type="radio"] {
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: $form-check-radio-border-radius;
|
||||
}
|
||||
|
||||
&:active {
|
||||
filter: $form-check-input-active-filter;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
border-color: $form-check-input-focus-border;
|
||||
@include focus-ring(true);
|
||||
--#{$prefix}focus-ring-offset: 1px;
|
||||
// box-shadow: $form-check-input-focus-box-shadow;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: $form-check-input-checked-bg-color;
|
||||
border-color: $form-check-input-checked-border-color;
|
||||
|
||||
&[type="checkbox"] {
|
||||
@if $enable-gradients {
|
||||
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
|
||||
} @else {
|
||||
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
|
||||
}
|
||||
}
|
||||
|
||||
&[type="radio"] {
|
||||
@if $enable-gradients {
|
||||
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
|
||||
} @else {
|
||||
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[type="checkbox"]:indeterminate {
|
||||
background-color: $form-check-input-indeterminate-bg-color;
|
||||
border-color: $form-check-input-indeterminate-border-color;
|
||||
|
||||
@if $enable-gradients {
|
||||
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
|
||||
} @else {
|
||||
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
filter: none;
|
||||
opacity: $form-check-input-disabled-opacity;
|
||||
}
|
||||
|
||||
// Use disabled attribute in addition of :disabled pseudo-class
|
||||
// See: https://github.com/twbs/bootstrap/issues/28247
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
~ .form-check-label {
|
||||
cursor: default;
|
||||
opacity: $form-check-label-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
color: $form-check-label-color;
|
||||
cursor: $form-check-label-cursor;
|
||||
}
|
||||
|
||||
//
|
||||
// Switch
|
||||
//
|
||||
|
||||
.form-switch {
|
||||
padding-left: $form-switch-padding-start;
|
||||
|
||||
.form-check-input {
|
||||
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
|
||||
|
||||
width: $form-switch-width;
|
||||
margin-left: $form-switch-padding-start * -1;
|
||||
background-image: var(--#{$prefix}form-switch-bg);
|
||||
background-position: left center;
|
||||
@include border-radius($form-switch-border-radius, 0);
|
||||
@include transition($form-switch-transition);
|
||||
|
||||
&:focus {
|
||||
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-position: $form-switch-checked-bg-position;
|
||||
|
||||
@if $enable-gradients {
|
||||
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
|
||||
} @else {
|
||||
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.form-check-reverse {
|
||||
padding-right: $form-switch-padding-start;
|
||||
padding-left: 0;
|
||||
|
||||
.form-check-input {
|
||||
margin-right: $form-switch-padding-start * -1;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-inline {
|
||||
display: inline-block;
|
||||
margin-right: $form-check-inline-margin-end;
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
+ .btn {
|
||||
pointer-events: none;
|
||||
filter: none;
|
||||
opacity: $form-check-btn-check-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.form-switch .form-check-input:not(:checked):not(:focus) {
|
||||
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,45 @@
|
||||
@use "sass:math";
|
||||
@use "../config" as *;
|
||||
@use "../variables" as *;
|
||||
@use "../functions" as *;
|
||||
@use "../vendor/rfs" as *;
|
||||
@use "../mixins/border-radius" as *;
|
||||
@use "../mixins/box-shadow" as *;
|
||||
@use "../mixins/color-mode" as *;
|
||||
@use "../mixins/focus-ring" as *;
|
||||
@use "../mixins/gradients" as *;
|
||||
@use "../mixins/transition" as *;
|
||||
@use "form-variables" as *;
|
||||
|
||||
//
|
||||
// General form controls (plus a few specific high-level interventions)
|
||||
//
|
||||
|
||||
@layer forms {
|
||||
.form-control {
|
||||
--#{$prefix}control-min-height: #{$control-min-height};
|
||||
--#{$prefix}control-padding-y: #{$control-padding-y};
|
||||
--#{$prefix}control-padding-x: #{$control-padding-x};
|
||||
--#{$prefix}control-font-size: #{$control-font-size};
|
||||
--#{$prefix}control-line-height: #{$control-line-height};
|
||||
--#{$prefix}control-color: #{$control-color};
|
||||
--#{$prefix}control-bg: #{$control-bg};
|
||||
--#{$prefix}control-border-width: #{$control-border-width};
|
||||
--#{$prefix}control-border-color: #{$control-border-color};
|
||||
--#{$prefix}control-border-radius: #{$control-border-radius};
|
||||
--#{$prefix}control-select-bg-color: #{$control-select-indicator-color};
|
||||
--#{$prefix}control-select-bg: #{escape-svg($control-select-indicator)};
|
||||
--#{$prefix}control-select-bg-position: #{$control-select-bg-position};
|
||||
--#{$prefix}control-select-bg-size: #{$control-select-bg-size};
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-family: $input-font-family;
|
||||
@include font-size($input-font-size);
|
||||
font-weight: $input-font-weight;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
appearance: none; // Fix appearance for date inputs in Safari
|
||||
background-color: $input-bg;
|
||||
min-height: var(--#{$prefix}control-min-height);
|
||||
padding: var(--#{$prefix}control-padding-y) var(--#{$prefix}control-padding-x);
|
||||
font-size: var(--#{$prefix}control-font-size);
|
||||
line-height: var(--#{$prefix}control-line-height);
|
||||
color: var(--#{$prefix}control-color);
|
||||
appearance: none;
|
||||
background-color: var(--#{$prefix}control-bg);
|
||||
background-clip: padding-box;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
|
||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
@include border-radius($input-border-radius, 0);
|
||||
|
||||
border: var(--#{$prefix}control-border-width) solid var(--#{$prefix}control-border-color);
|
||||
@include border-radius(var(--#{$prefix}control-border-radius), 0);
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition($input-transition);
|
||||
|
||||
@@ -99,16 +108,17 @@
|
||||
|
||||
// File input buttons theming
|
||||
&::file-selector-button {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
margin: (-$input-padding-y) (-$input-padding-x);
|
||||
margin-inline-end: $input-padding-x;
|
||||
min-height: var(--#{$prefix}control-min-height);
|
||||
padding: var(--#{$prefix}control-padding-y) var(--#{$prefix}control-padding-x);
|
||||
margin: calc(var(--#{$prefix}control-padding-y) * -1) calc(var(--#{$prefix}control-padding-x) * -1);
|
||||
margin-inline-end: var(--#{$prefix}control-padding-x);
|
||||
color: $form-file-button-color;
|
||||
@include gradient-bg($form-file-button-bg);
|
||||
pointer-events: none;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
border-inline-end-width: $input-border-width;
|
||||
border-inline-end-width: var(--#{$prefix}control-border-width);
|
||||
border-radius: 0; // stylelint-disable-line property-disallowed-list
|
||||
@include transition($btn-transition);
|
||||
}
|
||||
@@ -145,6 +155,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
select.form-control {
|
||||
padding-right: calc(var(--#{$prefix}control-padding-x) * 3);
|
||||
background-image: var(--#{$prefix}control-select-bg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: var(--#{$prefix}control-select-bg-position);
|
||||
background-size: var(--#{$prefix}control-select-bg-size);
|
||||
|
||||
&[multiple],
|
||||
&[size]:not([size="1"]) {
|
||||
padding-right: var(--#{$prefix}control-padding-x);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
--#{$prefix}control-select-indicator: #{escape-svg($control-select-indicator-dark)};
|
||||
}
|
||||
}
|
||||
}
|
||||
// stylelint-enable selector-no-qualifying-type
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
||||
@@ -153,48 +185,40 @@
|
||||
// Repeated in `_input_group.scss` to avoid Sass extend issues.
|
||||
|
||||
.form-control-sm {
|
||||
min-height: $input-height-sm;
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
@include font-size($input-font-size-sm);
|
||||
@include border-radius($input-border-radius-sm);
|
||||
|
||||
&::file-selector-button {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
|
||||
margin-inline-end: $input-padding-x-sm;
|
||||
}
|
||||
--#{$prefix}control-min-height: #{$control-min-height-sm};
|
||||
--#{$prefix}control-padding-y: #{$control-padding-y-sm};
|
||||
--#{$prefix}control-padding-x: #{$control-padding-x-sm};
|
||||
--#{$prefix}control-font-size: #{$control-font-size-sm};
|
||||
--#{$prefix}control-line-height: #{$control-line-height-sm};
|
||||
--#{$prefix}control-border-radius: #{$control-border-radius-sm};
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
min-height: $input-height-lg;
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
@include font-size($input-font-size-lg);
|
||||
@include border-radius($input-border-radius-lg);
|
||||
|
||||
&::file-selector-button {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
|
||||
margin-inline-end: $input-padding-x-lg;
|
||||
}
|
||||
--#{$prefix}control-min-height: #{$control-min-height-lg};
|
||||
--#{$prefix}control-padding-y: #{$control-padding-y-lg};
|
||||
--#{$prefix}control-padding-x: #{$control-padding-x-lg};
|
||||
--#{$prefix}control-font-size: #{$control-font-size-lg};
|
||||
--#{$prefix}control-line-height: #{$control-line-height-lg};
|
||||
--#{$prefix}control-border-radius: #{$control-border-radius-lg};
|
||||
}
|
||||
|
||||
// Make sure textareas don't shrink too much when resized
|
||||
// https://github.com/twbs/bootstrap/pull/29124
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
textarea {
|
||||
&.form-control {
|
||||
min-height: $input-height;
|
||||
}
|
||||
// // Make sure textareas don't shrink too much when resized
|
||||
// // https://github.com/twbs/bootstrap/pull/29124
|
||||
// // stylelint-disable selector-no-qualifying-type
|
||||
// textarea {
|
||||
// &.form-control {
|
||||
// min-height: $input-height;
|
||||
// }
|
||||
|
||||
&.form-control-sm {
|
||||
min-height: $input-height-sm;
|
||||
}
|
||||
// &.form-control-sm {
|
||||
// min-height: $input-height-sm;
|
||||
// }
|
||||
|
||||
&.form-control-lg {
|
||||
min-height: $input-height-lg;
|
||||
}
|
||||
}
|
||||
// stylelint-enable selector-no-qualifying-type
|
||||
// &.form-control-lg {
|
||||
// min-height: $input-height-lg;
|
||||
// }
|
||||
// }
|
||||
// // stylelint-enable selector-no-qualifying-type
|
||||
|
||||
.form-control-color {
|
||||
width: $form-color-width;
|
||||
|
||||
@@ -1,127 +0,0 @@
|
||||
@use "../config" as *;
|
||||
@use "../colors" as *;
|
||||
@use "../variables" as *;
|
||||
@use "../functions" as *;
|
||||
@use "../vendor/rfs" as *;
|
||||
@use "../mixins/border-radius" as *;
|
||||
@use "../mixins/box-shadow" as *;
|
||||
@use "../mixins/color-mode" as *;
|
||||
@use "../mixins/focus-ring" as *;
|
||||
@use "../mixins/transition" as *;
|
||||
@use "form-variables" as *;
|
||||
|
||||
// scss-docs-start form-select-variables
|
||||
$form-select-padding-y: $input-padding-y !default;
|
||||
$form-select-padding-x: $input-padding-x !default;
|
||||
$form-select-font-family: $input-font-family !default;
|
||||
$form-select-font-size: $input-font-size !default;
|
||||
$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
|
||||
$form-select-font-weight: $input-font-weight !default;
|
||||
$form-select-line-height: $input-line-height !default;
|
||||
$form-select-color: $input-color !default;
|
||||
$form-select-bg: $input-bg !default;
|
||||
$form-select-disabled-color: null !default;
|
||||
$form-select-disabled-bg: $input-disabled-bg !default;
|
||||
$form-select-disabled-border-color: $input-disabled-border-color !default;
|
||||
$form-select-bg-position: right $form-select-padding-x center !default;
|
||||
$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
|
||||
$form-select-indicator-color: $gray-800 !default;
|
||||
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
|
||||
|
||||
$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
|
||||
$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
|
||||
$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
|
||||
|
||||
$form-select-border-width: $input-border-width !default;
|
||||
$form-select-border-color: $input-border-color !default;
|
||||
$form-select-border-radius: $input-border-radius !default;
|
||||
$form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
||||
|
||||
$form-select-focus-border-color: $input-focus-border-color !default;
|
||||
$form-select-focus-width: $input-focus-width !default;
|
||||
// $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
|
||||
|
||||
$form-select-padding-y-sm: $input-padding-y-sm !default;
|
||||
$form-select-padding-x-sm: $input-padding-x-sm !default;
|
||||
$form-select-font-size-sm: $input-font-size-sm !default;
|
||||
$form-select-border-radius-sm: $input-border-radius-sm !default;
|
||||
|
||||
$form-select-padding-y-lg: $input-padding-y-lg !default;
|
||||
$form-select-padding-x-lg: $input-padding-x-lg !default;
|
||||
$form-select-font-size-lg: $input-font-size-lg !default;
|
||||
$form-select-border-radius-lg: $input-border-radius-lg !default;
|
||||
|
||||
$form-select-transition: $input-transition !default;
|
||||
// scss-docs-end form-select-variables
|
||||
|
||||
@layer forms {
|
||||
.form-select {
|
||||
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
|
||||
font-family: $form-select-font-family;
|
||||
@include font-size($form-select-font-size);
|
||||
font-weight: $form-select-font-weight;
|
||||
line-height: $form-select-line-height;
|
||||
color: $form-select-color;
|
||||
appearance: none;
|
||||
background-color: $form-select-bg;
|
||||
background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
|
||||
background-repeat: no-repeat;
|
||||
background-position: $form-select-bg-position;
|
||||
background-size: $form-select-bg-size;
|
||||
border: $form-select-border-width solid $form-select-border-color;
|
||||
@include border-radius($form-select-border-radius, 0);
|
||||
@include box-shadow($form-select-box-shadow);
|
||||
@include transition($form-select-transition);
|
||||
|
||||
&:focus-visible {
|
||||
border-color: $form-select-focus-border-color;
|
||||
@include focus-ring(true);
|
||||
}
|
||||
|
||||
&[multiple],
|
||||
&[size]:not([size="1"]) {
|
||||
padding-right: $form-select-padding-x;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $form-select-disabled-color;
|
||||
background-color: $form-select-disabled-bg;
|
||||
border-color: $form-select-disabled-border-color;
|
||||
}
|
||||
|
||||
// Remove outline from select box in FF
|
||||
&:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 $form-select-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-select-sm {
|
||||
padding-top: $form-select-padding-y-sm;
|
||||
padding-bottom: $form-select-padding-y-sm;
|
||||
padding-left: $form-select-padding-x-sm;
|
||||
@include font-size($form-select-font-size-sm);
|
||||
@include border-radius($form-select-border-radius-sm);
|
||||
}
|
||||
|
||||
.form-select-lg {
|
||||
padding-top: $form-select-padding-y-lg;
|
||||
padding-bottom: $form-select-padding-y-lg;
|
||||
padding-left: $form-select-padding-x-lg;
|
||||
@include font-size($form-select-font-size-lg);
|
||||
@include border-radius($form-select-border-radius-lg);
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.form-select {
|
||||
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,18 +1,53 @@
|
||||
@use "../config" as *;
|
||||
@use "../colors" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
$control-min-height: 2.5rem !default;
|
||||
$control-min-height-sm: 2rem !default;
|
||||
$control-min-height-lg: 3rem !default;
|
||||
$control-padding-y: .375rem !default;
|
||||
$control-padding-x: .75rem !default;
|
||||
$control-font-size: $font-size-base !default;
|
||||
$control-line-height: $line-height-base !default;
|
||||
$control-color: var(--#{$prefix}body-color) !default;
|
||||
$control-bg: var(--#{$prefix}body-bg) !default;
|
||||
$control-border-width: var(--#{$prefix}border-width) !default;
|
||||
$control-border-color: var(--#{$prefix}border-color) !default;
|
||||
$control-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
|
||||
$control-padding-y-sm: .25rem !default;
|
||||
$control-padding-x-sm: .5rem !default;
|
||||
$control-font-size-sm: $font-size-sm !default;
|
||||
$control-line-height-sm: $line-height-sm !default;
|
||||
$control-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
||||
|
||||
$control-padding-y-lg: .5rem !default;
|
||||
$control-padding-x-lg: 1rem !default;
|
||||
$control-font-size-lg: $font-size-lg !default;
|
||||
$control-line-height-lg: $line-height-lg !default;
|
||||
$control-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
||||
|
||||
$control-select-indicator-color: $gray-600 !default;
|
||||
$control-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$control-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
|
||||
$control-select-bg-position: right $control-padding-x center !default;
|
||||
$control-select-bg-size: 16px 12px !default;
|
||||
|
||||
$control-select-indicator-color-dark: $body-color-dark !default;
|
||||
$control-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$control-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
|
||||
|
||||
|
||||
// scss-docs-start input-btn-variables
|
||||
$input-btn-padding-y: .375rem !default;
|
||||
$input-btn-padding-x: .75rem !default;
|
||||
$input-btn-font-family: null !default;
|
||||
// $input-btn-font-family: null !default;
|
||||
$input-btn-font-size: $font-size-base !default;
|
||||
$input-btn-line-height: $line-height-base !default;
|
||||
|
||||
$input-btn-focus-width: $focus-ring-width !default;
|
||||
$input-btn-focus-color-opacity: $focus-ring-opacity !default;
|
||||
$input-btn-focus-color: $focus-ring-color !default;
|
||||
$input-btn-focus-blur: $focus-ring-blur !default;
|
||||
$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
|
||||
// $input-btn-focus-width: $focus-ring-width !default;
|
||||
// $input-btn-focus-color-opacity: $focus-ring-opacity !default;
|
||||
// $input-btn-focus-color: $focus-ring-color !default;
|
||||
// $input-btn-focus-blur: $focus-ring-blur !default;
|
||||
// $input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
|
||||
|
||||
$input-btn-padding-y-sm: .25rem !default;
|
||||
$input-btn-padding-x-sm: .5rem !default;
|
||||
@@ -22,15 +57,15 @@ $input-btn-padding-y-lg: .5rem !default;
|
||||
$input-btn-padding-x-lg: 1rem !default;
|
||||
$input-btn-font-size-lg: $font-size-lg !default;
|
||||
|
||||
$input-btn-border-width: var(--#{$prefix}border-width) !default;
|
||||
// $input-btn-border-width: var(--#{$prefix}border-width) !default;
|
||||
// scss-docs-end input-btn-variables
|
||||
|
||||
// scss-docs-start form-input-variables
|
||||
$input-padding-y: $input-btn-padding-y !default;
|
||||
$input-padding-x: $input-btn-padding-x !default;
|
||||
$input-font-family: $input-btn-font-family !default;
|
||||
// $input-font-family: $input-btn-font-family !default;
|
||||
$input-font-size: $input-btn-font-size !default;
|
||||
$input-font-weight: $font-weight-base !default;
|
||||
// $input-font-weight: $font-weight-base !default;
|
||||
$input-line-height: $input-btn-line-height !default;
|
||||
|
||||
$input-padding-y-sm: $input-btn-padding-y-sm !default;
|
||||
@@ -48,7 +83,7 @@ $input-disabled-border-color: null !default;
|
||||
|
||||
$input-color: var(--#{$prefix}body-color) !default;
|
||||
$input-border-color: var(--#{$prefix}border-color) !default;
|
||||
$input-border-width: $input-btn-border-width !default;
|
||||
$input-border-width: var(--#{$prefix}border-width) !default;
|
||||
$input-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
||||
|
||||
$input-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
@@ -70,9 +105,12 @@ $input-height-inner: add($input-line-height * 1em, $input-pad
|
||||
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
|
||||
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
|
||||
|
||||
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
|
||||
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
|
||||
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
|
||||
// $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
|
||||
// $input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
|
||||
// $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
|
||||
$input-height: 2.5rem !default;
|
||||
$input-height-sm: 2rem !default;
|
||||
$input-height-lg: 3rem !default;
|
||||
|
||||
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
// scss-docs-start input-group-variables
|
||||
$input-group-addon-padding-y: $input-padding-y !default;
|
||||
$input-group-addon-padding-x: $input-padding-x !default;
|
||||
$input-group-addon-font-weight: $input-font-weight !default;
|
||||
// $input-group-addon-font-weight: $input-font-weight !default;
|
||||
$input-group-addon-color: $input-color !default;
|
||||
$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
|
||||
$input-group-addon-border-color: $input-border-color !default;
|
||||
@@ -64,7 +64,7 @@ $input-group-addon-border-color: $input-border-color !default;
|
||||
align-items: center;
|
||||
padding: $input-group-addon-padding-y $input-group-addon-padding-x;
|
||||
@include font-size($input-font-size); // Match inputs
|
||||
font-weight: $input-group-addon-font-weight;
|
||||
// font-weight: $input-group-addon-font-weight;
|
||||
line-height: $input-line-height;
|
||||
color: $input-group-addon-color;
|
||||
text-align: center;
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
@use "../config" as *;
|
||||
@use "../colors" as *;
|
||||
@use "../variables" as *;
|
||||
@use "../functions" as *;
|
||||
@use "../vendor/rfs" as *;
|
||||
@use "../mixins/border-radius" as *;
|
||||
@use "../mixins/box-shadow" as *;
|
||||
@use "../mixins/color-mode" as *;
|
||||
@use "../mixins/focus-ring" as *;
|
||||
@use "../mixins/transition" as *;
|
||||
@use "form-variables" as *;
|
||||
|
||||
// scss-docs-start radio-variables
|
||||
$radio-border-color: var(--#{$prefix}border-color) !default;
|
||||
$radio-checked-bg: var(--#{$prefix}primary-base) !default;
|
||||
$radio-checked-border-color: $radio-checked-bg !default;
|
||||
$radio-disabled-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
$radio-disabled-border-color: $radio-disabled-bg !default;
|
||||
$radio-disabled-opacity: .65 !default;
|
||||
// scss-docs-end radio-variables
|
||||
|
||||
@layer forms {
|
||||
b-radiogroup {
|
||||
display: flex;
|
||||
gap: var(--#{$prefix}gap, .5rem);
|
||||
align-items: var(--#{$prefix}align-items, start);
|
||||
|
||||
.description {
|
||||
color: var(--#{$prefix}secondary-text);
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
// scss-docs-start radio-css-variables
|
||||
--#{$prefix}radio-bg: transparent;
|
||||
--#{$prefix}radio-border-color: #{$radio-border-color};
|
||||
--#{$prefix}radio-checked-bg: #{$radio-checked-bg};
|
||||
--#{$prefix}radio-checked-border-color: #{$radio-checked-border-color};
|
||||
--#{$prefix}radio-disabled-bg: #{$radio-disabled-bg};
|
||||
--#{$prefix}radio-disabled-border-color: #{$radio-disabled-border-color};
|
||||
--#{$prefix}radio-disabled-opacity: #{$radio-disabled-opacity};
|
||||
// scss-docs-end radio-css-variables
|
||||
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-block: .125rem;
|
||||
appearance: none;
|
||||
background-color: var(--#{$prefix}radio-bg);
|
||||
border: 1px solid var(--#{$prefix}radio-border-color);
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: 50%;
|
||||
|
||||
&:checked {
|
||||
color: var(--#{$prefix}primary-contrast);
|
||||
background-color: var(--#{$prefix}radio-checked-bg);
|
||||
border-color: var(--#{$prefix}radio-checked-border-color);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
inset: .25rem;
|
||||
content: "";
|
||||
background-color: currentcolor;
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
--#{$prefix}radio-bg: var(--#{$prefix}radio-disabled-bg);
|
||||
|
||||
~ label {
|
||||
color: var(--#{$prefix}secondary-text);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
@use "../config" as *;
|
||||
@use "../colors" as *;
|
||||
@use "../variables" as *;
|
||||
@use "../functions" as *;
|
||||
@use "../vendor/rfs" as *;
|
||||
@use "../mixins/border-radius" as *;
|
||||
@use "../mixins/box-shadow" as *;
|
||||
@use "../mixins/color-mode" as *;
|
||||
@use "../mixins/focus-ring" as *;
|
||||
@use "../mixins/transition" as *;
|
||||
@use "form-variables" as *;
|
||||
|
||||
@layer forms {
|
||||
.switch {
|
||||
// scss-docs-start switch-css-variables
|
||||
--#{$prefix}switch-height: 1.25rem;
|
||||
--#{$prefix}switch-width: calc(var(--#{$prefix}switch-height) * 1.5);
|
||||
--#{$prefix}switch-padding: .0625rem;
|
||||
--#{$prefix}switch-bg: var(--#{$prefix}secondary-bg);
|
||||
--#{$prefix}switch-border-width: var(--#{$prefix}border-width);
|
||||
--#{$prefix}switch-border-color: var(--#{$prefix}border-color);
|
||||
--#{$prefix}switch-indicator-bg: var(--#{$prefix}white);
|
||||
--#{$prefix}switch-checked-bg: var(--#{$prefix}primary-base);
|
||||
--#{$prefix}switch-checked-indicator-bg: var(--#{$prefix}white);
|
||||
--#{$prefix}switch-disabled-bg: var(--#{$prefix}secondary-bg);
|
||||
--#{$prefix}switch-disabled-indicator-bg: var(--#{$prefix}secondary-text);
|
||||
// scss-docs-end switch-css-variables
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
width: var(--#{$prefix}switch-width);
|
||||
height: var(--#{$prefix}switch-height);
|
||||
padding: var(--#{$prefix}switch-padding);
|
||||
background-color: var(--#{$prefix}switch-bg);
|
||||
border: var(--#{$prefix}switch-border-width) solid var(--#{$prefix}switch-border-color);
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: 10rem;
|
||||
box-shadow: inset 0 1px 2px rgba($black, .05);
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
transition: .15s ease-in-out;
|
||||
transition-property: padding-inline-start, background-color;
|
||||
|
||||
&::before {
|
||||
flex-shrink: 0;
|
||||
width: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2) - var(--#{$prefix}switch-border-width) * 2);
|
||||
height: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2) - var(--#{$prefix}switch-border-width) * 2);
|
||||
// width: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2));
|
||||
// height: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2));
|
||||
content: "";
|
||||
background-color: var(--#{$prefix}switch-indicator-bg);
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 2px rgba($black, .1);
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:has(input:checked) {
|
||||
padding-inline-start: calc(var(--#{$prefix}switch-height) / 2 + var(--#{$prefix}switch-padding));
|
||||
background-color: var(--#{$prefix}primary-base);
|
||||
}
|
||||
|
||||
&:has(input:disabled) {
|
||||
--#{$prefix}switch-bg: var(--#{$prefix}switch-disabled-bg);
|
||||
--#{$prefix}switch-indicator-bg: var(--#{$prefix}switch-disabled-indicator-bg);
|
||||
|
||||
&::before { opacity: .4; }
|
||||
|
||||
~ label {
|
||||
color: var(--#{$prefix}secondary-text);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
.switch-sm {
|
||||
--#{$prefix}switch-height: 1em;
|
||||
}
|
||||
.switch-lg {
|
||||
--#{$prefix}switch-height: 2em;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,9 @@
|
||||
@forward "labels";
|
||||
@forward "form-text";
|
||||
@forward "form-control";
|
||||
@forward "form-select";
|
||||
@forward "form-check";
|
||||
@forward "check";
|
||||
@forward "radio";
|
||||
@forward "switch";
|
||||
@forward "form-range";
|
||||
@forward "floating-labels";
|
||||
@forward "input-group";
|
||||
|
||||
@@ -1,13 +1,24 @@
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
@layer helpers {
|
||||
// scss-docs-start stacks
|
||||
.hstack {
|
||||
.hstack,
|
||||
b-hstack {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
}
|
||||
.hstack-start,
|
||||
b-hstack[align="start"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.vstack {
|
||||
.vstack,
|
||||
b-vstack {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
//
|
||||
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
|
||||
// (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px)
|
||||
//
|
||||
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
|
||||
@@ -14,9 +14,9 @@
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl 2xl))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
|
||||
$n: list.index($breakpoint-names, $name);
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map.get($breakpoints, $name);
|
||||
@@ -42,7 +42,7 @@
|
||||
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
|
||||
// See https://bugs.webkit.org/show_bug.cgi?id=178261
|
||||
//
|
||||
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
|
||||
// 767.98px
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$max: map.get($breakpoints, $name);
|
||||
@@ -52,9 +52,9 @@
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
|
||||
// Useful for making responsive utilities.
|
||||
//
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
|
||||
// "" (Returns a blank string)
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
|
||||
// "-sm"
|
||||
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
|
||||
+118
-66
@@ -3,22 +3,43 @@
|
||||
@use "sass:meta";
|
||||
@use "sass:string";
|
||||
@use "../config" as *;
|
||||
@use "../vendor/rfs" as *;
|
||||
|
||||
// stylelint-disable scss/dollar-variable-pattern
|
||||
|
||||
// Utility generator
|
||||
// Used to generate utilities & print utilities
|
||||
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
|
||||
$values: map.get($utility, values);
|
||||
|
||||
// If the values are a list or string, convert it into a map
|
||||
@if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
|
||||
// A single value is converted to a map with a null key.
|
||||
@if list.length($values) == 1 {
|
||||
$values: (null: list.nth($values, 1));
|
||||
// - Utilities can three different types of selectors:
|
||||
// - class: .class
|
||||
// - attr-starts: [class^="class"]
|
||||
// - attr-includes: [class*="class"]
|
||||
// - Utilities can generate a regular CSS property or a CSS custom property
|
||||
// - Utilities can be responsive or not
|
||||
// - Utilities can have a state (e.g., :hover, :focus, :active, etc.)
|
||||
|
||||
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
|
||||
// Determine if we're generating a class, or an attribute selector
|
||||
$selectorType: if(map.has-key($utility, selector), map.get($utility, selector), "class");
|
||||
// Then get the class name to use in a class (e.g., .class) or in a attribute selector (e.g., [class^="class"])
|
||||
$selectorClass: map.get($utility, class);
|
||||
|
||||
// Get the list or map of values and ensure it's a map
|
||||
$values: map.get($utility, values);
|
||||
@if meta.type-of($values) != "map" {
|
||||
@if meta.type-of($values) == "list" {
|
||||
$list: ();
|
||||
@each $value in $values {
|
||||
$list: map.merge($list, ($value: $value));
|
||||
}
|
||||
$values: $list;
|
||||
} @else {
|
||||
$values: list.zip($values, $values);
|
||||
$values: (null: $values);
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate infix once, before the loop
|
||||
$infix: if($infix == "", "", "-" + $infix);
|
||||
|
||||
@each $key, $value in $values {
|
||||
$properties: map.get($utility, property);
|
||||
|
||||
@@ -27,83 +48,114 @@
|
||||
$properties: list.append((), $properties);
|
||||
}
|
||||
|
||||
// Use custom class if present
|
||||
$property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
|
||||
$property-class: if($property-class == null, "", $property-class);
|
||||
// Use custom class if present, otherwise use the first value from the list of properties
|
||||
$customClass: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
|
||||
$customClass: if($customClass == null, "", $customClass);
|
||||
|
||||
// Use custom CSS variable name if present, otherwise default to `class`
|
||||
$css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
|
||||
// mdo-do: restore?
|
||||
// $css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
|
||||
|
||||
// State params to generate pseudo-classes
|
||||
$state: if(map.has-key($utility, state), map.get($utility, state), ());
|
||||
|
||||
$infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
|
||||
// $infix: if($customClass == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
|
||||
|
||||
// Don't prefix if value key is null (e.g. with shadow class)
|
||||
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
|
||||
$customClassModifier: if($key, if($customClass == "" and $infix == "", "", "-") + $key, "");
|
||||
|
||||
@if map.get($utility, rfs) {
|
||||
// Inside the media query
|
||||
@if $is-rfs-media-query {
|
||||
$val: rfs-value($value);
|
||||
|
||||
// Do not render anything if fluid and non fluid values are the same
|
||||
$value: if($val == rfs-fluid-value($value), null, $val);
|
||||
}
|
||||
@else {
|
||||
$value: rfs-fluid-value($value);
|
||||
$selector: "";
|
||||
@if $selectorType == "class" {
|
||||
// Use the fallback of the first property if no `class` key is used
|
||||
@if $customClass != "" {
|
||||
$selector: ".#{$customClass + $infix + $customClassModifier}";
|
||||
} @else {
|
||||
$selector: ".#{$selectorClass + $infix + $customClassModifier}";
|
||||
}
|
||||
} @else if $selectorType == "attr-starts" {
|
||||
$selector: "[class^=\"#{$selectorClass}\"]";
|
||||
} @else if $selectorType == "attr-includes" {
|
||||
$selector: "[class*=\"#{$selectorClass}\"]";
|
||||
}
|
||||
|
||||
$is-css-var: map.get($utility, css-var);
|
||||
$is-local-vars: map.get($utility, local-vars);
|
||||
$is-rtl: map.get($utility, rtl);
|
||||
$is-important: map.get($utility, important);
|
||||
// @debug $utility;
|
||||
// @debug $selectorType;
|
||||
// @debug $selector;
|
||||
// @debug $properties;
|
||||
// @debug $values;
|
||||
|
||||
@if $value != null {
|
||||
@if $is-rtl == false {
|
||||
/* rtl:begin:remove */
|
||||
}
|
||||
|
||||
@if $is-css-var {
|
||||
.#{$property-class + $infix + $property-class-modifier} {
|
||||
--#{$prefix}#{$css-variable-name}: #{$value};
|
||||
#{$selector} {
|
||||
@if map.get($utility, rfs) {
|
||||
@if map.get($utility, important) {
|
||||
@warn "The `important` option is not compatible with `rfs`. The `important` declaration will be ignored.";
|
||||
}
|
||||
|
||||
@each $pseudo in $state {
|
||||
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
||||
--#{$prefix}#{$css-variable-name}: #{$value};
|
||||
@if $is-rfs-media-query {
|
||||
@each $property in $properties {
|
||||
@include rfs($value, $property);
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@each $property in $properties {
|
||||
@include rfs($value, $property);
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
.#{$property-class + $infix + $property-class-modifier} {
|
||||
@each $property in $properties {
|
||||
@if $is-local-vars {
|
||||
@each $local-var, $variable in $is-local-vars {
|
||||
--#{$prefix}#{$local-var}: #{$variable};
|
||||
}
|
||||
}
|
||||
#{$property}: $value if($is-important, !important, null);
|
||||
@each $property in $properties {
|
||||
@if map.get($utility, important) {
|
||||
#{$property}: $value !important; // stylelint-disable-line declaration-no-important
|
||||
} @else {
|
||||
#{$property}: $value;
|
||||
}
|
||||
}
|
||||
|
||||
@each $pseudo in $state {
|
||||
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
||||
@each $property in $properties {
|
||||
@if $is-local-vars {
|
||||
@each $local-var, $variable in $is-local-vars {
|
||||
--#{$prefix}#{$local-var}: #{$variable};
|
||||
}
|
||||
}
|
||||
#{$property}: $value if($is-important, !important, null);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $is-rtl == false {
|
||||
/* rtl:end:remove */
|
||||
}
|
||||
}
|
||||
|
||||
// @if $value != null {
|
||||
// #{$selector} {
|
||||
// @each $property in $properties {
|
||||
// #{$property}: $value;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @if $is-css-var {
|
||||
// #{$selector} {
|
||||
// --#{$prefix}#{$css-variable-name}: #{$value};
|
||||
// }
|
||||
|
||||
// @each $pseudo in $state {
|
||||
// #{$selector}-#{$pseudo}:#{$pseudo} {
|
||||
// --#{$prefix}#{$css-variable-name}: #{$value};
|
||||
// }
|
||||
// }
|
||||
// } @else {
|
||||
// #{$selector} {
|
||||
// @each $property in $properties {
|
||||
// // @if $is-local-vars {
|
||||
// // @each $local-var, $variable in $is-local-vars {
|
||||
// // --#{$prefix}#{$local-var}: #{$variable};
|
||||
// // }
|
||||
// // }
|
||||
// #{$property}: $value;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // @each $pseudo in $state {
|
||||
// // #{$selector}-#{$pseudo}:#{$pseudo} {
|
||||
// // @each $property in $properties {
|
||||
// // @if $is-local-vars {
|
||||
// // @each $local-var, $variable in $is-local-vars {
|
||||
// // --#{$prefix}#{$local-var}: #{$variable};
|
||||
// // }
|
||||
// // }
|
||||
// // #{$property}: $value;
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
// }
|
||||
// }
|
||||
|
||||
$is-css-var: map.get($utility, css-var);
|
||||
$is-local-vars: map.get($utility, local-vars);
|
||||
// $is-rtl: map.get($utility, rtl);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,17 +19,17 @@
|
||||
- breakpoint: lg
|
||||
abbr: -lg
|
||||
name: Large
|
||||
min-width: 992px
|
||||
min-width: 1024px
|
||||
container: 960px
|
||||
|
||||
- breakpoint: xl
|
||||
abbr: -xl
|
||||
name: X-Large
|
||||
min-width: 1200px
|
||||
container: 1140px
|
||||
min-width: 1280px
|
||||
container: 1200px
|
||||
|
||||
- breakpoint: xxl
|
||||
abbr: -xxl
|
||||
name: XX-Large
|
||||
min-width: 1400px
|
||||
container: 1320px
|
||||
- breakpoint: 2xl
|
||||
abbr: -2xl
|
||||
name: 2X-Large
|
||||
min-width: 1536px
|
||||
container: 1440px
|
||||
|
||||
@@ -60,8 +60,9 @@
|
||||
pages:
|
||||
- title: Overview
|
||||
- title: Form control
|
||||
- title: Select
|
||||
- title: Checks & radios
|
||||
- title: Checkbox
|
||||
- title: Radio
|
||||
- title: Switch
|
||||
- title: Range
|
||||
- title: Input group
|
||||
- title: Floating labels
|
||||
|
||||
@@ -44,7 +44,7 @@ These classes can also be added to groups of links, as an alternative to the [`.
|
||||
|
||||
## Checkbox and radio button groups
|
||||
|
||||
Combine button-like checkbox and radio [toggle buttons]([[docsref:/forms/checks-radios]]) into a seamless looking button group.
|
||||
Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
|
||||
|
||||
<Example code={`<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
|
||||
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
|
||||
|
||||
@@ -15,7 +15,7 @@ Bootstrap has a base `.btn` class that sets up basic styles such as padding and
|
||||
The `.btn` class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles.
|
||||
|
||||
<Callout type="warning">
|
||||
If you are using the `.btn` class on its own, remember to at least define some explicit `:focus` and/or `:focus-visible` styles.
|
||||
When using `.btn` without a modifier, be sure to add some explicit `:focus-visible` styles.
|
||||
</Callout>
|
||||
|
||||
## Variants
|
||||
@@ -126,12 +126,82 @@ Additional utilities can be used to adjust the alignment of buttons when horizon
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</div>`} />
|
||||
|
||||
## Toggle buttons
|
||||
|
||||
Create button-like checkboxes and radio buttons by using `.btn` styles rather than `.form-check-label` on the `<label>` elements. These toggle buttons can further be grouped in a [button group]([[docsref:/components/button-group]]) if needed.
|
||||
|
||||
### Checkbox toggle buttons
|
||||
|
||||
<Example code={`<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
|
||||
<label class="btn btn-primary" for="btn-check">Single toggle</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
|
||||
<label class="btn btn-primary" for="btn-check-2">Checked</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
|
||||
<label class="btn btn-primary" for="btn-check-3">Disabled</label>`} />
|
||||
|
||||
<Example code={`<input type="checkbox" class="btn-check" id="btn-check-4" autocomplete="off">
|
||||
<label class="btn" for="btn-check-4">Single toggle</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btn-check-5" checked autocomplete="off">
|
||||
<label class="btn" for="btn-check-5">Checked</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btn-check-6" autocomplete="off" disabled>
|
||||
<label class="btn" for="btn-check-6">Disabled</label>`} />
|
||||
|
||||
<Callout>
|
||||
Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]([[docsref:/components/buttons#button-plugin]]). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked“/“not checked“ (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as “button“/“button pressed“. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
|
||||
</Callout>
|
||||
|
||||
### Radio toggle buttons
|
||||
|
||||
<Example code={`<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
|
||||
<label class="btn btn-secondary" for="option1">Checked</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
|
||||
<label class="btn btn-secondary" for="option2">Radio</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
|
||||
<label class="btn btn-secondary" for="option3">Disabled</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
|
||||
<label class="btn btn-secondary" for="option4">Radio</label>`} />
|
||||
|
||||
<Example code={`<input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked>
|
||||
<label class="btn" for="option5">Checked</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options-base" id="option6" autocomplete="off">
|
||||
<label class="btn" for="option6">Radio</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off" disabled>
|
||||
<label class="btn" for="option7">Disabled</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options-base" id="option8" autocomplete="off">
|
||||
<label class="btn" for="option8">Radio</label>`} />
|
||||
|
||||
### Outlined styles
|
||||
|
||||
Different variants of `.btn`, such as the various outlined styles, are supported.
|
||||
|
||||
<Example code={`<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
|
||||
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>
|
||||
|
||||
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
|
||||
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>`} />
|
||||
|
||||
## Button plugin
|
||||
|
||||
The button plugin allows you to create simple on/off toggle buttons.
|
||||
|
||||
<Callout>
|
||||
Visually, these toggle buttons are identical to the [checkbox toggle buttons]([[docsref:/forms/checks-radios#checkbox-toggle-buttons]]). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
|
||||
Visually, these toggle buttons are identical to the [checkbox toggle buttons]([[docsref:/forms/checkbox]]). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
|
||||
</Callout>
|
||||
|
||||
### Toggle states
|
||||
|
||||
@@ -8,7 +8,7 @@ toc: true
|
||||
|
||||
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/blog/bootstrap-explained-dropdowns/).
|
||||
|
||||
Dropdowns are built on a third party library, [Popper](https://popper.js.org/docs/v2/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]([[config:cdn.popper]]) before Bootstrap’s JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.
|
||||
Dropdowns are built on a third party library, [Floating UI](https://floating-ui.com/), which provides dynamic positioning and viewport detection. Be sure to include [floating-ui.dom.umd.min.js]([[config:cdn.floating_ui]]) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Floating UI. Floating UI isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
|
||||
|
||||
## Accessibility
|
||||
|
||||
@@ -645,7 +645,7 @@ Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu.
|
||||
|
||||
If you want to use responsive alignment, disable dynamic positioning by adding the `data-bs-display="static"` attribute and use the responsive variation classes.
|
||||
|
||||
To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end`.
|
||||
To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-2xl}-end`.
|
||||
|
||||
<Example code={`<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
||||
@@ -658,7 +658,7 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
|
||||
</ul>
|
||||
</div>`} />
|
||||
|
||||
To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start`.
|
||||
To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-2xl}-start`.
|
||||
|
||||
<Example code={`<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
||||
|
||||
@@ -112,7 +112,7 @@ These work great with custom content as well.
|
||||
|
||||
## Horizontal
|
||||
|
||||
Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
|
||||
Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|2xl}` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
|
||||
|
||||
**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
|
||||
|
||||
|
||||
@@ -533,7 +533,7 @@ Modals have three optional sizes, available via modifier classes to be placed on
|
||||
| Small | `.modal-sm` | `300px` |
|
||||
| Default | <span class="text-body-secondary">None</span> | `500px` |
|
||||
| Large | `.modal-lg` | `800px` |
|
||||
| Extra large | `.modal-xl` | `1140px` |
|
||||
| Extra large | `.modal-xl` | `1200px` |
|
||||
</BsTable>
|
||||
|
||||
Our default modal without modifier class constitutes the “medium” size modal.
|
||||
@@ -600,9 +600,9 @@ Another override is the option to pop up a modal that covers the user viewport,
|
||||
| `.modal-fullscreen` | Always |
|
||||
| `.modal-fullscreen-sm-down` | `576px` |
|
||||
| `.modal-fullscreen-md-down` | `768px` |
|
||||
| `.modal-fullscreen-lg-down` | `992px` |
|
||||
| `.modal-fullscreen-xl-down` | `1200px` |
|
||||
| `.modal-fullscreen-xxl-down` | `1400px` |
|
||||
| `.modal-fullscreen-lg-down` | `1024px` |
|
||||
| `.modal-fullscreen-xl-down` | `1280px` |
|
||||
| `.modal-fullscreen-2xl-down` | `1536px` |
|
||||
</BsTable>
|
||||
|
||||
<Example showMarkup={false} code={`<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
|
||||
@@ -610,7 +610,7 @@ Another override is the option to pop up a modal that covers the user viewport,
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">Full screen below md</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXl">Full screen below xl</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">Full screen below xxl</button>`} />
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen2xl">Full screen below 2xl</button>`} />
|
||||
|
||||
```html
|
||||
<!-- Full screen modal -->
|
||||
@@ -704,11 +704,11 @@ Another override is the option to pop up a modal that covers the user viewport,
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-xxl-down">
|
||||
<div class="modal fade" id="exampleModalFullscreen2xl" tabindex="-1" aria-labelledby="exampleModalFullscreen2xlLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-2xl-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1>
|
||||
<h1 class="modal-title fs-4" id="exampleModalFullscreen2xlLabel">Full screen below 2xl</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
@@ -10,7 +10,7 @@ import { getConfig } from '@libs/config'
|
||||
|
||||
Here’s what you need to know before getting started with the navbar:
|
||||
|
||||
- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
|
||||
- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-2xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
|
||||
- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
|
||||
- Use our [spacing]([[docsref:/utilities/spacing]]) and [flex]([[docsref:/utilities/flex]]) utility classes for controlling spacing and alignment within navbars.
|
||||
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
|
||||
@@ -499,7 +499,7 @@ Here’s an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-h
|
||||
|
||||
## Responsive behaviors
|
||||
|
||||
Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
|
||||
Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-2xl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
|
||||
|
||||
For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don’t add any `.navbar-expand` class.
|
||||
|
||||
|
||||
@@ -146,7 +146,7 @@ Responsive offcanvas classes hide content outside the viewport from a specified
|
||||
- `.offcanvas-md`
|
||||
- `.offcanvas-lg`
|
||||
- `.offcanvas-xl`
|
||||
- `.offcanvas-xxl`
|
||||
- `.offcanvas-2xl`
|
||||
|
||||
To make a responsive offcanvas, replace the `.offcanvas` base class with a responsive variant and ensure your close button has an explicit `data-bs-target`.
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ toc: true
|
||||
|
||||
Things to know when using the popover plugin:
|
||||
|
||||
- Popovers rely on the third party library [Popper](https://popper.js.org/docs/v2/) for positioning. You must include [popper.min.js]([[config:cdn.popper]]) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
|
||||
- Popovers rely on the third party library [Floating UI](https://floating-ui.com/) for positioning. You must include [floating-ui.dom.umd.min.js]([[config:cdn.floating_ui]]) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Floating UI.
|
||||
- Popovers require the [popover plugin]([[docsref:/components/popovers]]) as a dependency.
|
||||
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
- Zero-length `title` and `content` values will never show a popover.
|
||||
|
||||
@@ -8,7 +8,7 @@ toc: true
|
||||
|
||||
Things to know when using the tooltip plugin:
|
||||
|
||||
- Tooltips rely on the third party library [Popper](https://popper.js.org/docs/v2/) for positioning. You must include [popper.min.js]([[config:cdn.popper]]) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
|
||||
- Tooltips rely on the third party library [Floating UI](https://floating-ui.com/) for positioning. You must include [floating-ui.dom.umd.min.js]([[config:cdn.floating_ui]]) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Floating UI.
|
||||
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
- Tooltips with zero-length titles are never displayed.
|
||||
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
|
||||
|
||||
@@ -653,7 +653,7 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
|
||||
|
||||
## Responsive tables
|
||||
|
||||
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
|
||||
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-2xl}`.
|
||||
|
||||
<Callout type="warning">
|
||||
##### Vertical clipping/truncation
|
||||
@@ -734,7 +734,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
|
||||
|
||||
### Breakpoint specific
|
||||
|
||||
Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
|
||||
Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
|
||||
|
||||
**These tables may appear broken until their responsive styles apply at specific viewport widths.**
|
||||
|
||||
|
||||
@@ -42,10 +42,7 @@ Several Bootstrap components include embedded SVGs in our CSS to style component
|
||||
- [Accordion]([[docsref:/components/accordion]])
|
||||
- [Carousel controls]([[docsref:/components/carousel#with-controls]])
|
||||
- [Close button]([[docsref:/components/close-button]]) (used in alerts and modals)
|
||||
- [Form checkboxes and radio buttons]([[docsref:/forms/checks-radios]])
|
||||
- [Form switches]([[docsref:/forms/checks-radios#switches]])
|
||||
- [Form validation icons]([[docsref:/forms/validation#server-side]])
|
||||
- [Navbar toggle buttons]([[docsref:/components/navbar#responsive-behaviors]])
|
||||
- [Select menus]([[docsref:/forms/select]])
|
||||
|
||||
Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]([[docsref:/getting-started/webpack#extracting-svg-files]]), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
title: Checkbox
|
||||
description: Highly customizable, native checkbox `<input>` elements for presenting toggleable options.
|
||||
toc: true
|
||||
---
|
||||
|
||||
**Trialing new components with the following rules:**
|
||||
|
||||
- New components are purely components, they don't assume layout of any kind.
|
||||
- New options for form layout:
|
||||
- Use new form groups to lay out your forms: `.control-group`, `.check-group`, `.radio-group`.
|
||||
- Use helpers to lay out your forms—`.hstack` and `.vstack`—with utilities.
|
||||
|
||||
## Basic checkbox
|
||||
|
||||
All checkbox styling is contained to a wrapper class, `.check`. This does the following:
|
||||
|
||||
- Adds a stacking grid layout for the checkbox and custom SVG icon.
|
||||
- Overrides the default `<input>` appearance with themed colors.
|
||||
- Handles the toggling of separate paths in our custom SVG for the `:checked` and indeterminate states. Two `<path>`s are included in the SVG, one for each state, and the appropriate `<path>` is shown based on the `<input>`’s state.
|
||||
|
||||
For folks looking to replace our provided icons, you'll need to add the `.checked` and `.indeterminate` classes to the `<path>`s and use them in a single `<svg>` element.
|
||||
|
||||
Checkbox layout and labels are handled with additional HTML and CSS.
|
||||
|
||||
<Example code={`<div class="check">
|
||||
<input type="checkbox" id="check" checked />
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
|
||||
<path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
|
||||
<path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
|
||||
</svg>
|
||||
</div>`} />
|
||||
|
||||
## Indeterminate
|
||||
|
||||
Checkboxes can utilize the indeterminate pseudo class when manually set via JavaScript. There is no available HTML attribute for specifying it.
|
||||
|
||||
<Example addStackblitzJs class="bd-example-indeterminate" code={`<div class="check">
|
||||
<input type="checkbox" id="checkIndeterminate" />
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
|
||||
<path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
|
||||
<path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
|
||||
</svg>
|
||||
</div>`} />
|
||||
|
||||
## Label
|
||||
|
||||
Wrap the `.check` in a `<b-checkgroup>` layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling.
|
||||
|
||||
Consider margin utilities for additional spacing, and flex utilities for alignment.
|
||||
|
||||
<Example code={`<b-checkgroup>
|
||||
<div class="check">
|
||||
<input type="checkbox" id="checkLabel" />
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
|
||||
<path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
|
||||
<path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
|
||||
</svg>
|
||||
</div>
|
||||
<label for="checkLabel">Example new checkbox</label>
|
||||
</b-checkgroup>`} />
|
||||
|
||||
## Description
|
||||
|
||||
With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, `<b-vstack>`, to stack the label and description.
|
||||
|
||||
<Example code={`<b-checkgroup>
|
||||
<div class="check">
|
||||
<input type="checkbox" id="checkDescription" />
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
|
||||
<path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
|
||||
<path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
|
||||
</svg>
|
||||
</div>
|
||||
<b-vstack>
|
||||
<label for="checkDescription">Example new checkbox</label>
|
||||
<small class="description">Supporting description for the above label.</small>
|
||||
</b-vstack>
|
||||
</b-checkgroup>`} />
|
||||
|
||||
## Disabled
|
||||
|
||||
Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
|
||||
|
||||
<Example code={`<b-checkgroup>
|
||||
<div class="check">
|
||||
<input type="checkbox" id="checkDisabled" disabled />
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
|
||||
<path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
|
||||
<path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
|
||||
</svg>
|
||||
</div>
|
||||
<label for="checkDisabled">Example new checkbox</label>
|
||||
</b-checkgroup>`} />
|
||||
|
||||
<Example code={`<b-checkgroup>
|
||||
<div class="check">
|
||||
<input type="checkbox" id="checkDisabledChecked" checked disabled />
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
|
||||
<path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
|
||||
<path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
|
||||
</svg>
|
||||
</div>
|
||||
<label for="checkDisabledChecked">Example new checkbox</label>
|
||||
</b-checkgroup>`} />
|
||||
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
|
||||
CSS variables for the checkbox component are built on the Sass variables.
|
||||
|
||||
<ScssDocs name="check-css-variables" file="scss/forms/_check.scss" />
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="check-variables" file="scss/forms/_check.scss" />
|
||||
@@ -1,311 +0,0 @@
|
||||
---
|
||||
title: Checks and radios
|
||||
description: Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
|
||||
aliases: "/docs/[[config:docs_version]]/forms/checks/"
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Approach
|
||||
|
||||
Browser default checkboxes and radios are replaced with the help of `.form-check`, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
|
||||
|
||||
Structurally, our `<input>`s and `<label>`s are sibling elements as opposed to an `<input>` within a `<label>`. This is slightly more verbose as you must specify `id` and `for` attributes to relate the `<input>` and `<label>`. We use the sibling selector (`~`) for all our `<input>` states, like `:checked` or `:disabled`. When combined with the `.form-check-label` class, we can easily style the text for each item based on the `<input>`’s state.
|
||||
|
||||
Our checks use custom Bootstrap icons to indicate checked or indeterminate states.
|
||||
|
||||
## Checks
|
||||
|
||||
<Example code={`<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkDefault">
|
||||
<label class="form-check-label" for="checkDefault">
|
||||
Default checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
|
||||
<label class="form-check-label" for="checkChecked">
|
||||
Checked checkbox
|
||||
</label>
|
||||
</div>`} />
|
||||
|
||||
### Indeterminate
|
||||
|
||||
Checkboxes can utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
|
||||
|
||||
<Example addStackblitzJs class="bd-example-indeterminate" code={`<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
|
||||
<label class="form-check-label" for="checkIndeterminate">
|
||||
Indeterminate checkbox
|
||||
</label>
|
||||
</div>`} />
|
||||
|
||||
### Disabled
|
||||
|
||||
Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
|
||||
|
||||
<Example addStackblitzJs class="bd-example-indeterminate" code={`<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkIndeterminateDisabled" disabled>
|
||||
<label class="form-check-label" for="checkIndeterminateDisabled">
|
||||
Disabled indeterminate checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
|
||||
<label class="form-check-label" for="checkDisabled">
|
||||
Disabled checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
|
||||
<label class="form-check-label" for="checkCheckedDisabled">
|
||||
Disabled checked checkbox
|
||||
</label>
|
||||
</div>`} />
|
||||
|
||||
## Radios
|
||||
|
||||
<Example code={`<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="radioDefault" id="radioDefault1">
|
||||
<label class="form-check-label" for="radioDefault1">
|
||||
Default radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="radioDefault" id="radioDefault2" checked>
|
||||
<label class="form-check-label" for="radioDefault2">
|
||||
Default checked radio
|
||||
</label>
|
||||
</div>`} />
|
||||
|
||||
### Disabled
|
||||
|
||||
Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
|
||||
|
||||
<Example code={`<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="radioDisabled" id="radioDisabled" disabled>
|
||||
<label class="form-check-label" for="radioDisabled">
|
||||
Disabled radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="radioDisabled" id="radioCheckedDisabled" checked disabled>
|
||||
<label class="form-check-label" for="radioCheckedDisabled">
|
||||
Disabled checked radio
|
||||
</label>
|
||||
</div>`} />
|
||||
|
||||
## Switches
|
||||
|
||||
A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the `disabled` attribute.
|
||||
|
||||
<Example code={`<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckDefault">
|
||||
<label class="form-check-label" for="switchCheckDefault">Default switch checkbox input</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
|
||||
<label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckDisabled" disabled>
|
||||
<label class="form-check-label" for="switchCheckDisabled">Disabled switch checkbox input</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckCheckedDisabled" checked disabled>
|
||||
<label class="form-check-label" for="switchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
|
||||
</div>`} />
|
||||
|
||||
### Native switches
|
||||
|
||||
Progressively enhance your switches for mobile Safari (iOS 17.4+) by adding a `switch` attribute to your input to enable haptic feedback when toggling switches, just like native iOS switches. There are no style changes attached to using this attribute in Bootstrap as all our switches use custom styles.
|
||||
|
||||
<Example code={`<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkNativeSwitch" switch>
|
||||
<label class="form-check-label" for="checkNativeSwitch">
|
||||
Native switch haptics
|
||||
</label>
|
||||
</div>`} />
|
||||
|
||||
Be sure to read more about [the switch attribute on the WebKit blog](https://webkit.org/blog/15054/an-html-switch-control/). Safari 17.4+ on macOS and iOS both have native-style switches in HTML while other browsers simply fall back to the standard checkbox appearance. Applying the attribute to a non-Bootstrap checkbox in more recent versions of Safari will render a native switch.
|
||||
|
||||
## Default (stacked)
|
||||
|
||||
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.
|
||||
|
||||
<Example code={`<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
|
||||
<label class="form-check-label" for="defaultCheck1">
|
||||
Default checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
|
||||
<label class="form-check-label" for="defaultCheck2">
|
||||
Disabled checkbox
|
||||
</label>
|
||||
</div>`} />
|
||||
|
||||
<Example code={`<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
|
||||
<label class="form-check-label" for="exampleRadios1">
|
||||
Default radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
|
||||
<label class="form-check-label" for="exampleRadios2">
|
||||
Second default radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
|
||||
<label class="form-check-label" for="exampleRadios3">
|
||||
Disabled radio
|
||||
</label>
|
||||
</div>`} />
|
||||
|
||||
## Inline
|
||||
|
||||
Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.
|
||||
|
||||
<Example code={`<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
|
||||
<label class="form-check-label" for="inlineCheckbox1">1</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
|
||||
<label class="form-check-label" for="inlineCheckbox2">2</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
|
||||
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
|
||||
</div>`} />
|
||||
|
||||
<Example code={`<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
|
||||
<label class="form-check-label" for="inlineRadio1">1</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
|
||||
<label class="form-check-label" for="inlineRadio2">2</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
|
||||
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
|
||||
</div>`} />
|
||||
|
||||
## Reverse
|
||||
|
||||
Put your checkboxes, radios, and switches on the opposite side with the `.form-check-reverse` modifier class.
|
||||
|
||||
<Example code={`<div class="form-check form-check-reverse">
|
||||
<input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
|
||||
<label class="form-check-label" for="reverseCheck1">
|
||||
Reverse checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-reverse">
|
||||
<input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
|
||||
<label class="form-check-label" for="reverseCheck2">
|
||||
Disabled reverse checkbox
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch form-check-reverse">
|
||||
<input class="form-check-input" type="checkbox" id="switchCheckReverse">
|
||||
<label class="form-check-label" for="switchCheckReverse">Reverse switch checkbox input</label>
|
||||
</div>`} />
|
||||
|
||||
## Without labels
|
||||
|
||||
Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`). See the [forms overview accessibility]([[docsref:/forms/overview/#accessibility]]) section for details.
|
||||
|
||||
<Example code={`<div>
|
||||
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
|
||||
</div>`} />
|
||||
|
||||
## Toggle buttons
|
||||
|
||||
Create button-like checkboxes and radio buttons by using `.btn` styles rather than `.form-check-label` on the `<label>` elements. These toggle buttons can further be grouped in a [button group]([[docsref:/components/button-group]]) if needed.
|
||||
|
||||
### Checkbox toggle buttons
|
||||
|
||||
<Example code={`<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
|
||||
<label class="btn btn-primary" for="btn-check">Single toggle</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
|
||||
<label class="btn btn-primary" for="btn-check-2">Checked</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
|
||||
<label class="btn btn-primary" for="btn-check-3">Disabled</label>`} />
|
||||
|
||||
<Example code={`<input type="checkbox" class="btn-check" id="btn-check-4" autocomplete="off">
|
||||
<label class="btn" for="btn-check-4">Single toggle</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btn-check-5" checked autocomplete="off">
|
||||
<label class="btn" for="btn-check-5">Checked</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btn-check-6" autocomplete="off" disabled>
|
||||
<label class="btn" for="btn-check-6">Disabled</label>`} />
|
||||
|
||||
<Callout>
|
||||
Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]([[docsref:/components/buttons#button-plugin]]). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked“/“not checked“ (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as “button“/“button pressed“. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
|
||||
</Callout>
|
||||
|
||||
### Radio toggle buttons
|
||||
|
||||
<Example code={`<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
|
||||
<label class="btn btn-secondary" for="option1">Checked</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
|
||||
<label class="btn btn-secondary" for="option2">Radio</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
|
||||
<label class="btn btn-secondary" for="option3">Disabled</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
|
||||
<label class="btn btn-secondary" for="option4">Radio</label>`} />
|
||||
|
||||
<Example code={`<input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked>
|
||||
<label class="btn" for="option5">Checked</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options-base" id="option6" autocomplete="off">
|
||||
<label class="btn" for="option6">Radio</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off" disabled>
|
||||
<label class="btn" for="option7">Disabled</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options-base" id="option8" autocomplete="off">
|
||||
<label class="btn" for="option8">Radio</label>`} />
|
||||
|
||||
### Outlined styles
|
||||
|
||||
Different variants of `.btn`, such as the various outlined styles, are supported.
|
||||
|
||||
<Example code={`<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
|
||||
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>
|
||||
|
||||
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
|
||||
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>`} />
|
||||
|
||||
## CSS
|
||||
|
||||
### Sass variables
|
||||
|
||||
Variables for checks:
|
||||
|
||||
<ScssDocs name="form-check-variables" file="scss/forms/_form-check.scss" />
|
||||
|
||||
Variables for switches:
|
||||
|
||||
<ScssDocs name="form-switch-variables" file="scss/forms/_form-check.scss" />
|
||||
@@ -1,9 +1,13 @@
|
||||
---
|
||||
title: Form controls
|
||||
description: Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.
|
||||
description: Give textual `<input>`, `<textarea>`, and `<select>` elements an upgrade with custom styles, sizing, focus states, and more.
|
||||
toc: true
|
||||
---
|
||||
|
||||
<Callout type="info">
|
||||
**Heads up!** As of v6, `<select>` elements are now styled with the `.form-control` class. This reduces a ton of duplication and abstraction while making it easier to consistently customize the appearance of form controls.
|
||||
</Callout>
|
||||
|
||||
## Example
|
||||
|
||||
Form controls are styled with a mix of Sass and CSS variables, allowing them to adapt to color modes and support any customization method.
|
||||
@@ -13,17 +17,78 @@ Form controls are styled with a mix of Sass and CSS variables, allowing them to
|
||||
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlSelect1" class="form-label">Example select</label>
|
||||
<select class="form-control" id="exampleFormControlSelect1">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
|
||||
</div>`} />
|
||||
|
||||
## Sizing
|
||||
|
||||
Set heights using classes like `.form-control-lg` and `.form-control-sm`.
|
||||
Change the size of a form control by using classes like `.form-control-lg` and `.form-control-sm`. This adjusts `height`, `padding`, `font-size`, `line-height`, and `border-radius`.
|
||||
|
||||
<Example code={`<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
|
||||
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
|
||||
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">`} />
|
||||
<Example code={`<div class="mb-3">
|
||||
<label for="largeInput" class="form-label">Large input</label>
|
||||
<input class="form-control form-control-lg" type="text" id="largeInput" placeholder="Large input" aria-label="Large input example">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="largeSelect" class="form-label">Large select</label>
|
||||
<select class="form-control form-control-lg" id="largeSelect">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="largeTextarea" class="form-label">Large textarea</label>
|
||||
<textarea class="form-control form-control-lg" id="largeTextarea" rows="3" placeholder="Large textarea" aria-label="Large textarea example"></textarea>
|
||||
</div>`} />
|
||||
|
||||
<Example code={`<div class="mb-3">
|
||||
<label for="smallInput" class="form-label">Small input</label>
|
||||
<input class="form-control form-control-sm" type="text" id="smallInput" placeholder="Small input" aria-label="Small input example">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="smallSelect" class="form-label">Small select</label>
|
||||
<select class="form-control form-control-sm" id="smallSelect">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="smallTextarea" class="form-label">Small textarea</label>
|
||||
<textarea class="form-control form-control-sm" id="smallTextarea" rows="3" placeholder="Small textarea" aria-label="Small textarea example"></textarea>
|
||||
</div>`} />
|
||||
|
||||
## Select
|
||||
|
||||
The `multiple` attribute is supported on select elements:
|
||||
|
||||
<Example code={`<select class="form-select" multiple aria-label="Multiple select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>`} />
|
||||
|
||||
As is the `size` attribute:
|
||||
|
||||
<Example code={`<select class="form-select" size="3" aria-label="Size 3 select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>`} />
|
||||
|
||||
## Form text
|
||||
|
||||
@@ -62,7 +127,13 @@ Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`
|
||||
Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.
|
||||
|
||||
<Example code={`<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
|
||||
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>`} />
|
||||
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
|
||||
<select class="form-select" aria-label="Disabled select example" disabled>
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>`} />
|
||||
|
||||
## Readonly
|
||||
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Radio
|
||||
description: Highly customizable, native radio `<input>` elements for choosing one option from many.
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Basic radio
|
||||
|
||||
Similar to checkboxes, radios are styled with the `.radio` class. However, there's no custom SVG as we use a Unicode character for the checked state.
|
||||
|
||||
<Example code={`<input type="radio" id="radio" class="radio" />`} />
|
||||
|
||||
## Label
|
||||
|
||||
Wrap the `.radio` in a `<b-radiogroup>` layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling.
|
||||
|
||||
<Example code={`<b-radiogroup>
|
||||
<input type="radio" id="radioLabel" class="radio" />
|
||||
<label for="radioLabel">Example new radio</label>
|
||||
</b-radiogroup>
|
||||
`} />
|
||||
|
||||
## Description
|
||||
|
||||
With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, `<b-vstack>`, to stack the label and description.
|
||||
|
||||
<Example code={`<b-radiogroup>
|
||||
<input type="radio" id="radioLabelDescription" class="radio" />
|
||||
<b-vstack>
|
||||
<label for="radioLabelDescription">Example new radio</label>
|
||||
<small class="description">Supporting description for the above label.</small>
|
||||
</b-vstack>
|
||||
</b-radiogroup>
|
||||
`} />
|
||||
|
||||
## Disabled
|
||||
|
||||
Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
|
||||
|
||||
<Example code={`<b-radiogroup>
|
||||
<input type="radio" id="radioDisabled" class="radio" disabled />
|
||||
<label for="radioDisabled">Example new radio</label>
|
||||
</b-radiogroup>
|
||||
`} />
|
||||
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
|
||||
CSS variables for the radio component are built on the Sass variables.
|
||||
|
||||
<ScssDocs name="radio-css-variables" file="scss/forms/_radio.scss" />
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="radio-variables" file="scss/forms/_radio.scss" />
|
||||
@@ -1,69 +0,0 @@
|
||||
---
|
||||
title: Select
|
||||
description: Customize the native `<select>`s with custom CSS that changes the element’s initial appearance.
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Default
|
||||
|
||||
Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`’s initial appearance and cannot modify the `<option>`s due to browser limitations.
|
||||
|
||||
<Example code={`<select class="form-select" aria-label="Default select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>`} />
|
||||
|
||||
## Sizing
|
||||
|
||||
You may also choose from small and large custom selects to match our similarly sized text inputs.
|
||||
|
||||
<Example code={`<select class="form-select form-select-lg mb-3" aria-label="Large select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
|
||||
<select class="form-select form-select-sm" aria-label="Small select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>`} />
|
||||
|
||||
The `multiple` attribute is also supported:
|
||||
|
||||
<Example code={`<select class="form-select" multiple aria-label="Multiple select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>`} />
|
||||
|
||||
As is the `size` attribute:
|
||||
|
||||
<Example code={`<select class="form-select" size="3" aria-label="Size 3 select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>`} />
|
||||
|
||||
## Disabled
|
||||
|
||||
Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.
|
||||
|
||||
<Example code={`<select class="form-select" aria-label="Disabled select example" disabled>
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>`} />
|
||||
|
||||
## CSS
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="form-select-variables" file="scss/forms/_form-select.scss" />
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
title: Switch
|
||||
description: Custom toggle component built on top of native `<input>` checkbox elements.
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Basic switch
|
||||
|
||||
Switches are built with checkboxes under the hood, so their HTML closely mirrors that of checkboxes, including optional layout components.
|
||||
|
||||
Switches work by layering an invisible checkbox over the custom switch indicator. This preserves interactivity while giving you a completely customizable layer underneath.
|
||||
|
||||
Switches also include the `switch` attribute for browsers that support it. This provides haptic feedback when toggling the switch.
|
||||
|
||||
<Example code={`<div class="switch">
|
||||
<input type="checkbox" value="" id="switch" switch>
|
||||
</div>`} />
|
||||
|
||||
## Label
|
||||
|
||||
Wrap the `.switch` in a `<b-checkgroup>` layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling. Switches are checkboxes under the hood, so we reused the same custom element here.
|
||||
|
||||
Consider margin utilities for additional spacing, and flex utilities for alignment, especially when using small or large switches.
|
||||
|
||||
<Example class="d-flex flex-column gap-3" code={`<b-checkgroup>
|
||||
<div class="switch switch-sm mt-1">
|
||||
<input type="checkbox" value="" id="switchSmLabel" switch>
|
||||
</div>
|
||||
<label for="switchSmLabel">Small switch</label>
|
||||
</b-checkgroup>
|
||||
|
||||
<b-checkgroup>
|
||||
<div class="switch">
|
||||
<input type="checkbox" value="" id="switchMdLabel" switch>
|
||||
</div>
|
||||
<label for="switchMdLabel">Default switch</label>
|
||||
</b-checkgroup>`} />
|
||||
|
||||
## Disabled
|
||||
|
||||
Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
|
||||
|
||||
<Example class="d-flex flex-column gap-3" code={`<b-checkgroup>
|
||||
<div class="switch">
|
||||
<input type="checkbox" value="" id="switchDisabledLabel" switch disabled>
|
||||
</div>
|
||||
<label for="switchDisabledLabel">Disabled switch</label>
|
||||
</b-checkgroup>`} />
|
||||
|
||||
## Sizes
|
||||
|
||||
Add a size modifier class to make your switch appear smaller or larger.
|
||||
|
||||
<Example class="d-flex flex-column gap-3" code={`<div class="switch switch-sm">
|
||||
<input type="checkbox" value="" id="switchSizeSm" switch>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<input type="checkbox" value="" id="switchSizeMd" switch>
|
||||
</div>
|
||||
<div class="switch switch-lg">
|
||||
<input type="checkbox" value="" id="switchSizeLg" switch>
|
||||
</div>`} />
|
||||
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
|
||||
<ScssDocs name="switch-css-variables" file="scss/forms/_switch.scss" />
|
||||
@@ -11,7 +11,7 @@ Download ready-to-use compiled code for **Bootstrap v[[config:current_version]]*
|
||||
- Compiled and minified CSS bundles (see [CSS files comparison]([[docsref:/getting-started/contents#css-files]]))
|
||||
- Compiled and minified JavaScript plugins (see [JS files comparison]([[docsref:/getting-started/contents#js-files]]))
|
||||
|
||||
This doesn’t include documentation, source files, or any optional JavaScript dependencies like Popper.
|
||||
This doesn't include documentation, source files, or any optional JavaScript dependencies like Floating UI.
|
||||
|
||||
<a href="[[config:download.dist]]" class="btn btn-bd-primary">Download</a>
|
||||
|
||||
@@ -41,10 +41,10 @@ Skip the download with [jsDelivr](https://www.jsdelivr.com/) to deliver cached v
|
||||
<script src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
If you’re using our compiled JavaScript and prefer to include Popper separately, add Popper before our JS, via a CDN preferably.
|
||||
If you're using our compiled JavaScript and prefer to include Floating UI separately, add Floating UI before our JS, via a CDN preferably.
|
||||
|
||||
```html
|
||||
<script src="[[config:cdn.popper]]" integrity="[[config:cdn.popper_hash]]" crossorigin="anonymous"></script>
|
||||
<script src="[[config:cdn.floating_ui]]" integrity="[[config:cdn.floating_ui_hash]]" crossorigin="anonymous"></script>
|
||||
<script src="[[config:cdn.js]]" integrity="[[config:cdn.js_hash]]" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ Get started by including Bootstrap’s production-ready CSS and JavaScript via C
|
||||
</html>
|
||||
```
|
||||
|
||||
2. **Include Bootstrap’s CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Popper for positioning dropdowns, popovers, and tooltips) before the closing `</body>`. Learn more about our [CDN links](#cdn-links).
|
||||
2. **Include Bootstrap's CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Floating UI for positioning dropdowns, popovers, and tooltips) before the closing `</body>`. Learn more about our [CDN links](#cdn-links).
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
@@ -48,10 +48,10 @@ Get started by including Bootstrap’s production-ready CSS and JavaScript via C
|
||||
</html>
|
||||
```
|
||||
|
||||
You can also include [Popper](https://popper.js.org/docs/v2/) and our JS separately. If you don’t plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.
|
||||
You can also include [Floating UI](https://floating-ui.com/) and our JS separately. If you don't plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Floating UI.
|
||||
|
||||
```html
|
||||
<script src="[[config:cdn.popper]]" integrity="[[config:cdn.popper_hash]]" crossorigin="anonymous"></script>
|
||||
<script src="[[config:cdn.floating_ui]]" integrity="[[config:cdn.floating_ui_hash]]" crossorigin="anonymous"></script>
|
||||
<script src="[[config:cdn.js]]" integrity="[[config:cdn.js_hash]]" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
|
||||
@@ -41,19 +41,19 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst
|
||||
</script>
|
||||
```
|
||||
|
||||
Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That’s why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Popper dependency, which imports Popper into our JavaScript like so:
|
||||
Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That’s why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Floating UI dependency, which imports Floating UI into our JavaScript like so:
|
||||
|
||||
```js
|
||||
import * as Popper from "@popperjs/core"
|
||||
import { computePosition } from "@floating-ui/dom"
|
||||
```
|
||||
|
||||
If you try this as-is, you’ll see an error in the console like the following:
|
||||
If you try this as-is, you'll see an error in the console like the following:
|
||||
|
||||
```text
|
||||
Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".
|
||||
Uncaught TypeError: Failed to resolve module specifier "@floating-ui/dom". Relative references must start with either "/", "./", or "../".
|
||||
```
|
||||
|
||||
To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you’ll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here’s how it works for Bootstrap and Popper:
|
||||
To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you'll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here's how it works for Bootstrap and Floating UI:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
@@ -72,7 +72,7 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"@popperjs/core": "[[config:cdn.popper_esm]]",
|
||||
"@floating-ui/dom": "[[config:cdn.floating_ui_esm]]",
|
||||
"bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@[[config:current_version]]/dist/js/bootstrap.esm.min.js"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@ The `rfs()` mixin has shorthands for `font-size`, `margin`, `margin-top`, `margi
|
||||
font-size: calc(1.525rem + 3.3vw);
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@media (min-width: 1280px) {
|
||||
.title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
@@ -49,12 +49,12 @@ You can see the above requirements reflected in this modified RTL starter templa
|
||||
|
||||
<!-- Optional JavaScript; choose one of the two! -->
|
||||
|
||||
<!-- Option 1: Bootstrap Bundle with Popper -->
|
||||
<!-- Option 1: Bootstrap Bundle with Floating UI -->
|
||||
<script src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Option 2: Separate Popper and Bootstrap JS -->
|
||||
<!-- Option 2: Separate Floating UI and Bootstrap JS -->
|
||||
<!--
|
||||
<script src="[[config:cdn.popper]]" integrity="[[config:cdn.popper_hash]]" crossorigin="anonymous"></script>
|
||||
<script src="[[config:cdn.floating_ui]]" integrity="[[config:cdn.floating_ui_hash]]" crossorigin="anonymous"></script>
|
||||
<script src="[[config:cdn.js]]" integrity="[[config:cdn.js_hash]]" crossorigin="anonymous"></script>
|
||||
-->
|
||||
</body>
|
||||
|
||||
@@ -46,7 +46,7 @@ Responsive variations also exist for `.sticky-top` utility.
|
||||
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
|
||||
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
|
||||
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
|
||||
<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>
|
||||
<div class="sticky-2xl-top">Stick to the top on viewports sized 2XL (extra-extra-large) or wider</div>
|
||||
```
|
||||
|
||||
## Sticky bottom
|
||||
@@ -66,5 +66,5 @@ Responsive variations also exist for `.sticky-bottom` utility.
|
||||
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
|
||||
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
|
||||
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
|
||||
<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>
|
||||
<div class="sticky-2xl-bottom">Stick to the bottom on viewports sized 2XL (extra-extra-large) or wider</div>
|
||||
```
|
||||
|
||||
@@ -23,9 +23,9 @@ Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers
|
||||
| Extra small | <em>None</em> |<576px |
|
||||
| Small | `sm` | ≥576px |
|
||||
| Medium | `md` | ≥768px |
|
||||
| Large | `lg` | ≥992px |
|
||||
| Extra large | `xl` | ≥1200px |
|
||||
| Extra extra large | `xxl` | ≥1400px |
|
||||
| Large | `lg` | ≥1024px |
|
||||
| Extra large | `xl` | ≥1280px |
|
||||
| Extra extra large | `2xl` | ≥1536px |
|
||||
</BsTable>
|
||||
|
||||
Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.
|
||||
@@ -52,7 +52,7 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in
|
||||
@include media-breakpoint-up(md) { ... }
|
||||
@include media-breakpoint-up(lg) { ... }
|
||||
@include media-breakpoint-up(xl) { ... }
|
||||
@include media-breakpoint-up(xxl) { ... }
|
||||
@include media-breakpoint-up(2xl) { ... }
|
||||
|
||||
// Usage
|
||||
|
||||
@@ -79,14 +79,14 @@ These Sass mixins translate in our compiled CSS using the values declared in our
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@media (min-width: 768px) { ... }
|
||||
|
||||
// Large devices (desktops, 992px and up)
|
||||
@media (min-width: 992px) { ... }
|
||||
// Large devices (desktops, 1024px and up)
|
||||
@media (min-width: 1024px) { ... }
|
||||
|
||||
// X-Large devices (large desktops, 1200px and up)
|
||||
@media (min-width: 1200px) { ... }
|
||||
// X-Large devices (large desktops, 1280px and up)
|
||||
@media (min-width: 1280px) { ... }
|
||||
|
||||
// XX-Large devices (larger desktops, 1400px and up)
|
||||
@media (min-width: 1400px) { ... }
|
||||
// XX-Large devices (larger desktops, 1536px and up)
|
||||
@media (min-width: 1536px) { ... }
|
||||
```
|
||||
|
||||
### Max-width
|
||||
@@ -99,7 +99,7 @@ We occasionally use media queries that go in the other direction (the given scre
|
||||
@include media-breakpoint-down(md) { ... }
|
||||
@include media-breakpoint-down(lg) { ... }
|
||||
@include media-breakpoint-down(xl) { ... }
|
||||
@include media-breakpoint-down(xxl) { ... }
|
||||
@include media-breakpoint-down(2xl) { ... }
|
||||
|
||||
// Example: Style from medium breakpoint and down
|
||||
@include media-breakpoint-down(md) {
|
||||
@@ -127,8 +127,8 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
|
||||
// `xl` applies to large devices (desktops, less than 1200px)
|
||||
@media (max-width: 1199.98px) { ... }
|
||||
|
||||
// `xxl` applies to x-large devices (large desktops, less than 1400px)
|
||||
@media (max-width: 1399.98px) { ... }
|
||||
// `2xl` applies to x-large devices (large desktops, less than 1600px)
|
||||
@media (max-width: 1599.98px) { ... }
|
||||
```
|
||||
|
||||
<Callout name="info-mediaqueries-breakpoints" type="warning" />
|
||||
@@ -143,7 +143,7 @@ There are also media queries and mixins for targeting a single segment of screen
|
||||
@include media-breakpoint-only(md) { ... }
|
||||
@include media-breakpoint-only(lg) { ... }
|
||||
@include media-breakpoint-only(xl) { ... }
|
||||
@include media-breakpoint-only(xxl) { ... }
|
||||
@include media-breakpoint-only(2xl) { ... }
|
||||
```
|
||||
|
||||
For example the `@include media-breakpoint-only(md) { ... }` will result in :
|
||||
|
||||
@@ -19,14 +19,14 @@ The table below illustrates how each container’s `max-width` compares to the o
|
||||
See them in action and compare them in our [Grid example]([[docsref:/examples/grid/#containers]]).
|
||||
|
||||
<BsTable>
|
||||
| | Extra small<div class="fw-normal"><576px</div> | Small<div class="fw-normal">≥576px</div> | Medium<div class="fw-normal">≥768px</div> | Large<div class="fw-normal">≥992px</div> | X-Large<div class="fw-normal">≥1200px</div> | XX-Large<div class="fw-normal">≥1400px</div> |
|
||||
| | Extra small<div class="fw-normal"><576px</div> | Small<div class="fw-normal">≥576px</div> | Medium<div class="fw-normal">≥768px</div> | Large<div class="fw-normal">≥1024px</div> | X-Large<div class="fw-normal">≥1280px</div> | 2X-Large<div class="fw-normal">≥1536px</div> |
|
||||
| --- | --- | --- | --- | --- | --- | --- |
|
||||
| `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
|
||||
| `.container-sm` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
|
||||
| `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1320px |
|
||||
| `.container-lg` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1320px |
|
||||
| `.container-xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1320px |
|
||||
| `.container-xxl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1320px |
|
||||
| `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
|
||||
| `.container-sm` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
|
||||
| `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1440px |
|
||||
| `.container-lg` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1440px |
|
||||
| `.container-xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1440px |
|
||||
| `.container-2xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1440px |
|
||||
| `.container-fluid` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> |
|
||||
</BsTable>
|
||||
|
||||
@@ -42,14 +42,14 @@ Our default `.container` class is a responsive, fixed-width container, meaning i
|
||||
|
||||
## Responsive containers
|
||||
|
||||
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.
|
||||
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `2xl`.
|
||||
|
||||
```html
|
||||
<div class="container-sm">100% wide until small breakpoint</div>
|
||||
<div class="container-md">100% wide until medium breakpoint</div>
|
||||
<div class="container-lg">100% wide until large breakpoint</div>
|
||||
<div class="container-xl">100% wide until extra large breakpoint</div>
|
||||
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
|
||||
<div class="container-2xl">100% wide until extra extra large breakpoint</div>
|
||||
```
|
||||
|
||||
## Fluid containers
|
||||
|
||||
@@ -35,7 +35,7 @@ The above example creates three equal-width columns across all devices and viewp
|
||||
|
||||
Breaking it down, here’s how the grid system comes together:
|
||||
|
||||
- **Our grid supports [six responsive breakpoints]([[docsref:/layout/breakpoints]]).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `xxl`). This means you can control container and column sizing and behavior by each breakpoint.
|
||||
- **Our grid supports [six responsive breakpoints]([[docsref:/layout/breakpoints]]).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `2xl`). This means you can control container and column sizing and behavior by each breakpoint.
|
||||
|
||||
- **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.container-md`) for a combination of fluid and pixel widths.
|
||||
|
||||
@@ -58,7 +58,7 @@ Bootstrap’s grid system can adapt across all six default breakpoints, and any
|
||||
- Medium (md)
|
||||
- Large (lg)
|
||||
- Extra large (xl)
|
||||
- Extra extra large (xxl)
|
||||
- Extra extra large (2xl)
|
||||
|
||||
As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:
|
||||
|
||||
@@ -70,9 +70,9 @@ As noted above, each of these breakpoints have their own container, unique class
|
||||
<th scope="col">xs<br/><span class="fw-normal"><576px</span></th>
|
||||
<th scope="col">sm<br/><span class="fw-normal">≥576px</span></th>
|
||||
<th scope="col">md<br/><span class="fw-normal">≥768px</span></th>
|
||||
<th scope="col">lg<br/><span class="fw-normal">≥992px</span></th>
|
||||
<th scope="col">xl<br/><span class="fw-normal">≥1200px</span></th>
|
||||
<th scope="col">xxl<br/><span class="fw-normal">≥1400px</span></th>
|
||||
<th scope="col">lg<br/><span class="fw-normal">≥1024px</span></th>
|
||||
<th scope="col">xl<br/><span class="fw-normal">≥1280px</span></th>
|
||||
<th scope="col">2xl<br/><span class="fw-normal">≥1536px</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -83,7 +83,7 @@ As noted above, each of these breakpoints have their own container, unique class
|
||||
<td>720px</td>
|
||||
<td>960px</td>
|
||||
<td>1140px</td>
|
||||
<td>1320px</td>
|
||||
<td>1440px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Class prefix</th>
|
||||
@@ -92,7 +92,7 @@ As noted above, each of these breakpoints have their own container, unique class
|
||||
<td><code>.col-md-</code></td>
|
||||
<td><code>.col-lg-</code></td>
|
||||
<td><code>.col-xl-</code></td>
|
||||
<td><code>.col-xxl-</code></td>
|
||||
<td><code>.col-2xl-</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row"># of columns</th>
|
||||
@@ -124,7 +124,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
|
||||
|
||||
### Equal-width
|
||||
|
||||
For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
|
||||
For example, here are two grid layouts that apply to every device and viewport, from `xs` to `2xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
|
||||
|
||||
<Example class="bd-example-row" code={`<div class="container text-center">
|
||||
<div class="row">
|
||||
|
||||
@@ -5,7 +5,46 @@ aliases: "/migration/"
|
||||
toc: true
|
||||
---
|
||||
|
||||
## v6.0.0
|
||||
## v6.0.0 Migration
|
||||
|
||||
Bootstrap 6 is a major release with many breaking changes to modernize our codebase, adopt newer build tools, and improve customization. Keep reading for a guide on how to migrate from v5 to v6, and a full changelog of what's new.
|
||||
|
||||
1. Bump your Bootstrap dependency:
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"bootstrap": "^6.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. If using all of Bootstrap's Sass files, include it in your Sass using `@use`:
|
||||
|
||||
```scss
|
||||
@use "bootstrap/scss/bootstrap";
|
||||
```
|
||||
|
||||
With this, you can then easily override Bootstrap's Sass variables and maps:
|
||||
|
||||
```scss
|
||||
@use "bootstrap/scss/bootstrap" with (
|
||||
$spacer: 1rem,
|
||||
$enable-reduced-motion: true,
|
||||
);
|
||||
```
|
||||
|
||||
3. If using only certain parts of Bootstrap's Sass files, you can use `@use` to import them individually. Be aware that our Sass file structure has changed and you may need to adjust your imports accordingly.
|
||||
|
||||
```scss
|
||||
@use "bootstrap/scss/forms";
|
||||
```
|
||||
|
||||
4. Update HTML and CSS per the changelog and updates in the documentation.
|
||||
|
||||
5. Recompile your Sass to see the changes.
|
||||
|
||||
## v6.0.0 Changelog
|
||||
|
||||
### CSS
|
||||
|
||||
@@ -18,6 +57,11 @@ toc: true
|
||||
- Removed `_variables-dark.scss`
|
||||
- Added `_colors.scss`, splitting them out from `_variables.scss`,
|
||||
- Added `_theme.scss` where we setup all our global theming for how colors are applied
|
||||
- **Updated lg, xl, and 2xl breakpoints and containers.**
|
||||
- Increased the `lg` breakpoint from 992px to 1024px; it's container remains the same at 960px.
|
||||
- Increased the `xl` breakpoint from 1200px to 1280px, and it's container from 1140px to 1200px.
|
||||
- Renamed `xxl` to `2xl` for better scaling with additional custom breakpoints
|
||||
- Increased the `2xl` breakpoint from 1400px to 1536px, and it's container from 1320px to 1440px.
|
||||
|
||||
### Sass
|
||||
|
||||
@@ -44,6 +88,21 @@ toc: true
|
||||
|
||||
- Relocated heading classes (like `.h1`) and some type classes (`.mark` and `.small`) to Reboot from `_type.scss`. This avoids a dependency in Sass modules and we like to avoid extending selectors in general.
|
||||
|
||||
### Forms
|
||||
|
||||
- **Refactor checks, radios, and switches.**
|
||||
- Split apart `_form-check.scss` into separate stylesheets: `_checkbox.scss`, `_radio.scss`, and `_switch.scss`.
|
||||
- Also split apart the documentation pages for checks, radios, and switches.
|
||||
- Added new CSS variables on each of these components. _Side note: we could've shared variables here, but chose not to for simplicity's sake._
|
||||
- Removed several now unused Sass variables.
|
||||
- Checkboxes now have a wrapping element and an SVG in the DOM for checked and indeterminate states. Radios and switches do not.
|
||||
- Revamped layout for checks, radios, and switches with labels (and descriptions). We now have custom elements for layout that include basic flexbox styling.
|
||||
- @mdo-do: Decide on fate of `.form-check-reverse` and `.btn-check`
|
||||
- **Consolidate `.form-select` into `.form-control`.**
|
||||
- Removed `.form-select`—use `.form-control` on `<select>` elements now. Too much abstraction and duplication at the same time.
|
||||
- Adds new CSS variables on `.form-control` for easier customization without Sass compilation.
|
||||
- `.form-control` now has a `min-height` at all times as opposed to just on `<textarea>` elements. This reduces some CSS for us.
|
||||
|
||||
### Helpers
|
||||
|
||||
- Ratio helpers have been moved to utilities.
|
||||
|
||||
@@ -296,7 +296,7 @@ Output:
|
||||
.opacity-md-100 { opacity: 1; }
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (min-width: 1024px) {
|
||||
.opacity-lg-0 { opacity: 0; }
|
||||
.opacity-lg-25 { opacity: .25; }
|
||||
.opacity-lg-50 { opacity: .5; }
|
||||
@@ -304,7 +304,7 @@ Output:
|
||||
.opacity-lg-100 { opacity: 1; }
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@media (min-width: 1280px) {
|
||||
.opacity-xl-0 { opacity: 0; }
|
||||
.opacity-xl-25 { opacity: .25; }
|
||||
.opacity-xl-50 { opacity: .5; }
|
||||
@@ -312,12 +312,12 @@ Output:
|
||||
.opacity-xl-100 { opacity: 1; }
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.opacity-xxl-0 { opacity: 0; }
|
||||
.opacity-xxl-25 { opacity: .25; }
|
||||
.opacity-xxl-50 { opacity: .5; }
|
||||
.opacity-xxl-75 { opacity: .75; }
|
||||
.opacity-xxl-100 { opacity: 1; }
|
||||
@media (min-width: 1536px) {
|
||||
.opacity-2xl-0 { opacity: 0; }
|
||||
.opacity-2xl-25 { opacity: .25; }
|
||||
.opacity-2xl-50 { opacity: .5; }
|
||||
.opacity-2xl-75 { opacity: .75; }
|
||||
.opacity-2xl-100 { opacity: 1; }
|
||||
}
|
||||
```
|
||||
|
||||
@@ -507,19 +507,19 @@ This will now generate responsive variations of `.border` and `.border-0` for ea
|
||||
.border-md-0 { ... }
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (min-width: 1024px) {
|
||||
.border-lg { ... }
|
||||
.border-lg-0 { ... }
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@media (min-width: 1280px) {
|
||||
.border-xl { ... }
|
||||
.border-xl-0 { ... }
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.border-xxl { ... }
|
||||
.border-xxl-0 { ... }
|
||||
@media (min-width: 1536px) {
|
||||
.border-2xl { ... }
|
||||
.border-2xl-0 { ... }
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -47,12 +47,12 @@ Change the value of the [`display` property](https://developer.mozilla.org/en-US
|
||||
|
||||
## Notation
|
||||
|
||||
Display utility classes that apply to all [breakpoints]([[docsref:/layout/breakpoints]]), from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
|
||||
Display utility classes that apply to all [breakpoints]([[docsref:/layout/breakpoints]]), from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
|
||||
|
||||
As such, the classes are named using the format:
|
||||
|
||||
- `.d-{value}` for `xs`
|
||||
- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
|
||||
- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
|
||||
|
||||
Where *value* is one of:
|
||||
|
||||
@@ -70,7 +70,7 @@ Where *value* is one of:
|
||||
|
||||
The display values can be altered by changing the `display` values defined in `$utilities` and recompiling the SCSS.
|
||||
|
||||
The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `xxl` screens.
|
||||
The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `2xl` screens.
|
||||
|
||||
## Clearfix
|
||||
|
||||
@@ -92,7 +92,7 @@ There's no more clearfix helper in v6 as it's an outdated technique. Instead, us
|
||||
|
||||
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
|
||||
|
||||
To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
|
||||
To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,2xl}-none` classes for any responsive screen variation.
|
||||
|
||||
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
|
||||
|
||||
@@ -104,15 +104,15 @@ To show an element only on a given interval of screen sizes you can combine one
|
||||
| Hidden only on sm | `.d-sm-none .d-md-block` |
|
||||
| Hidden only on md | `.d-md-none .d-lg-block` |
|
||||
| Hidden only on lg | `.d-lg-none .d-xl-block` |
|
||||
| Hidden only on xl | `.d-xl-none .d-xxl-block` |
|
||||
| Hidden only on xxl | `.d-xxl-none` |
|
||||
| Hidden only on xl | `.d-xl-none .d-2xl-block` |
|
||||
| Hidden only on 2xl | `.d-2xl-none` |
|
||||
| Visible on all | `.d-block` |
|
||||
| Visible only on xs | `.d-block .d-sm-none` |
|
||||
| Visible only on sm | `.d-none .d-sm-block .d-md-none` |
|
||||
| Visible only on md | `.d-none .d-md-block .d-lg-none` |
|
||||
| Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
|
||||
| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
|
||||
| Visible only on xxl | `.d-none .d-xxl-block` |
|
||||
| Visible only on xl | `.d-none .d-xl-block .d-2xl-none` |
|
||||
| Visible only on 2xl | `.d-none .d-2xl-block` |
|
||||
</BsTable>
|
||||
|
||||
<Example code={`<div class="d-lg-none">hide on lg and wider screens</div>
|
||||
|
||||
@@ -34,7 +34,7 @@ Responsive variations also exist for each `float` value.
|
||||
<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
|
||||
<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
|
||||
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
|
||||
<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>`} />
|
||||
<div class="float-2xl-end">Float end on viewports sized 2XL (extra extra large) or wider</div><br>`} />
|
||||
|
||||
Here are all the support classes:
|
||||
|
||||
|
||||
@@ -44,13 +44,13 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m
|
||||
|
||||
## Responsive
|
||||
|
||||
Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
|
||||
Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `2xl`. Classes can be combined for various effects as you need.
|
||||
|
||||
<Example class="d-flex overflow-auto" code={`<Placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" />
|
||||
<Placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" />
|
||||
<Placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" />
|
||||
<Placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" />
|
||||
<Placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" />`} />
|
||||
<Placeholder width="140" height="80" class="object-fit-2xl-contain border rounded" text="Contain on 2xl" markup="img" />`} />
|
||||
|
||||
## Video
|
||||
|
||||
|
||||
@@ -112,9 +112,9 @@ Assign responsive-friendly `margin` or `padding` values to an element or a subse
|
||||
|
||||
### Notation
|
||||
|
||||
Spacing utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
|
||||
Spacing utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
|
||||
|
||||
The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
|
||||
The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
|
||||
|
||||
Where *property* is one of:
|
||||
|
||||
|
||||
@@ -114,7 +114,7 @@ Easily realign text to components with text alignment classes. For start, end, a
|
||||
<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
|
||||
<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
|
||||
<p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
|
||||
<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>`} />
|
||||
<p class="text-2xl-end">End aligned text on viewports sized 2XL (extra extra large) or wider.</p>`} />
|
||||
|
||||
<Callout>
|
||||
Note that we don’t provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.
|
||||
|
||||
@@ -29,9 +29,9 @@ const configSchema = z.object({
|
||||
js_hash: z.string(),
|
||||
js_bundle: z.string().url(),
|
||||
js_bundle_hash: z.string(),
|
||||
popper: z.string().url(),
|
||||
popper_esm: z.string().url(),
|
||||
popper_hash: z.string()
|
||||
floating_ui: z.string().url(),
|
||||
floating_ui_esm: z.string().url(),
|
||||
floating_ui_hash: z.string()
|
||||
}),
|
||||
current_version: zVersionSemver,
|
||||
current_ruby_version: zVersionSemver,
|
||||
|
||||
Reference in New Issue
Block a user