diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index dd21b6d2f..4bfffbab4 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -22,7 +22,7 @@ }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "6 kB" + "maxSize": "6.25 kB" }, { "path": "./dist/css/bootstrap.css", @@ -30,7 +30,7 @@ }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "21.5 kB" + "maxSize": "22 kB" }, { "path": "./dist/js/bootstrap.bundle.js", diff --git a/config.yml b/config.yml index 81d1c794c..bcaec1cdd 100644 --- a/config.yml +++ b/config.yml @@ -57,7 +57,6 @@ params: slack: "https://bootstrap-slack.herokuapp.com/" opencollective: "https://opencollective.com/bootstrap" blog: "https://blog.getbootstrap.com/" - expo: "https://expo.getbootstrap.com/" themes: "https://themes.getbootstrap.com/" icons: "https://icons.getbootstrap.com/" diff --git a/js/tests/karma.conf.js b/js/tests/karma.conf.js index 3cb7f808f..55aca1bb1 100644 --- a/js/tests/karma.conf.js +++ b/js/tests/karma.conf.js @@ -60,7 +60,10 @@ const conf = { }, files: [ 'node_modules/hammer-simulator/index.js', - { pattern: 'js/tests/unit/**/!(jquery).spec.js', watched: !browserStack } + { + pattern: 'js/tests/unit/**/!(jquery).spec.js', + watched: !browserStack + } ], preprocessors: { 'js/tests/unit/**/*.spec.js': ['rollup'] @@ -114,7 +117,10 @@ if (browserStack) { conf.detectBrowsers = detectBrowsers conf.files = [ 'node_modules/jquery/dist/jquery.slim.min.js', - { pattern: 'js/tests/unit/jquery.spec.js', watched: false } + { + pattern: 'js/tests/unit/jquery.spec.js', + watched: false + } ] } else { frameworks.push('detectBrowsers') diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index 13e93d154..3c1e37cfd 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -221,7 +221,7 @@ function reportFirefoxTestResult(result) { if (!firefoxTestDone) { ffBugTestResult.classList.add(result ? 'text-success' : 'text-danger') - ffBugTestResult.innerHTML = result ? 'PASS' : 'FAIL' + ffBugTestResult.textContent = result ? 'PASS' : 'FAIL' } } diff --git a/package-lock.json b/package-lock.json index da3ed5d64..99ed92f57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1569,17 +1569,50 @@ "optional": true }, "autoprefixer": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.0.1.tgz", - "integrity": "sha512-aQo2BDIsoOdemXUAOBpFv4ZQa2DrOtEufarYhtFsK1088Ca0TUwu/aQWf0M3mrILXZ3mTIVn1lR3hPW8acacsw==", + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.0.2.tgz", + "integrity": "sha512-okBmu9OMdt6DNEcZmnl0IYVv8Xl/xYWRSnc2OJ9UJEOt1u30opG1B8aLsViqKryBaYv1SKB4f85fOGZs5zYxHQ==", "dev": true, "requires": { - "browserslist": "^4.14.5", - "caniuse-lite": "^1.0.30001137", + "browserslist": "^4.14.7", + "caniuse-lite": "^1.0.30001157", "colorette": "^1.2.1", "normalize-range": "^0.1.2", "num2fraction": "^1.2.2", "postcss-value-parser": "^4.1.0" + }, + "dependencies": { + "browserslist": { + "version": "4.14.7", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.7.tgz", + "integrity": "sha512-BSVRLCeG3Xt/j/1cCGj1019Wbty0H+Yvu2AOuZSuoaUWn3RatbL33Cxk+Q4jRMRAbOm0p7SLravLjpnT6s0vzQ==", + "dev": true, + "requires": { + "caniuse-lite": "^1.0.30001157", + "colorette": "^1.2.1", + "electron-to-chromium": "^1.3.591", + "escalade": "^3.1.1", + "node-releases": "^1.1.66" + } + }, + "caniuse-lite": { + "version": "1.0.30001157", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz", + "integrity": "sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA==", + "dev": true + }, + "electron-to-chromium": { + "version": "1.3.592", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.592.tgz", + "integrity": "sha512-kGNowksvqQiPb1pUSQKpd8JFoGPLxYOwduNRCqCxGh/2Q1qE2JdmwouCW41lUzDxOb/2RIV4lR0tVIfboWlO9A==", + "dev": true + }, + "node-releases": { + "version": "1.1.66", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.66.tgz", + "integrity": "sha512-JHEQ1iWPGK+38VLB2H9ef2otU4l8s3yAMt9Xf934r6+ojCYDMHPMqvCc9TnzfeFSP1QEOeU6YZEd3+De0LTCgg==", + "dev": true + } } }, "axios": { @@ -2257,9 +2290,9 @@ } }, "buffer": { - "version": "5.7.0", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.0.tgz", - "integrity": "sha512-cd+5r1VLBwUqTrmnzW+D7ABkJUM6mr7uv1dv+6jRw4Rcl7tFIFHDqHPL98LhpGFn3dbAt3gtLxtrWp4m1kFrqg==", + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", + "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", "dev": true, "requires": { "base64-js": "^1.3.1", @@ -3798,9 +3831,9 @@ "dev": true }, "eslint": { - "version": "7.12.1", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.12.1.tgz", - "integrity": "sha512-HlMTEdr/LicJfN08LB3nM1rRYliDXOmfoO4vj39xN6BLpFzF00hbwBoqHk8UcJ2M/3nlARZWy/mslvGEuZFvsg==", + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.13.0.tgz", + "integrity": "sha512-uCORMuOO8tUzJmsdRtrvcGq5qposf7Rw0LwkTJkoDbOycVQtQjmnhZSuLQnozLE4TmAzlMVV45eCHmQ1OpDKUQ==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", @@ -5445,9 +5478,9 @@ } }, "hugo-bin": { - "version": "0.65.0", - "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.65.0.tgz", - "integrity": "sha512-r4rz9mvOMUscSuE9eBjQMUouuMWi5qvM70geRsWhgt6+9K0300NJ3Fid7YIQVnEzwmhix+NV3nb+OZWsDYkgwA==", + "version": "0.66.1", + "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.66.1.tgz", + "integrity": "sha512-enMlGVAS2qVQZiX1CYPMD8Dihh+zLVgqPAsip8Hques1U1M1mPNf01cGoAZXuMscyo8B5/qBWhDqRimNMFLuKg==", "dev": true, "requires": { "bin-wrapper": "^4.1.0", @@ -8277,14 +8310,14 @@ "optional": true }, "postcss": { - "version": "8.1.4", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.4.tgz", - "integrity": "sha512-LfqcwgMq9LOd8pX7K2+r2HPitlIGC5p6PoZhVELlqhh2YGDVcXKpkCseqan73Hrdik6nBd2OvoDPUaP/oMj9hQ==", + "version": "8.1.6", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.6.tgz", + "integrity": "sha512-JuifSl4h8dJ70SiMXKjzCxhalE6p2TnMHuq9G8ftyXj2jg6SXzqCsEuxMj9RkmJoO5D+Z9YrWunNkxqpRT02qg==", "dev": true, "requires": { "colorette": "^1.2.1", "line-column": "^1.0.2", - "nanoid": "^3.1.15", + "nanoid": "^3.1.16", "source-map": "^0.6.1" }, "dependencies": { @@ -9339,9 +9372,9 @@ "dev": true }, "sass": { - "version": "1.28.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.28.0.tgz", - "integrity": "sha512-9FWX/0wuE1KxwfiP02chZhHaPzu6adpx9+wGch7WMOuHy5npOo0UapRI3FNSHva2CczaYJu2yNUBN8cCSqHz/A==", + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.29.0.tgz", + "integrity": "sha512-ZpwAUFgnvAUCdkjwPREny+17BpUj8nh5Yr6zKPGtLNTLrmtoRYIjm7njP24COhjJldjwW1dcv52Lpf4tNZVVRA==", "dev": true, "requires": { "chokidar": ">=2.0.0 <4.0.0" diff --git a/package.json b/package.json index c2047c73b..c03fdd521 100644 --- a/package.json +++ b/package.json @@ -23,9 +23,9 @@ "css": "npm-run-all css-compile css-prefix css-minify", "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/", "css-lint": "npm-run-all --continue-on-error --parallel css-lint-*", - "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache", + "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd", "css-lint-vars": "fusv scss/ site/assets/scss/", - "css-minify": "cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-utilities.min.css dist/css/bootstrap-utilities.css && cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css", + "css-minify": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-utilities.min.css dist/css/bootstrap-utilities.css && cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css", "css-prefix": "npm-run-all --parallel css-prefix-*", "css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"", "css-prefix-examples": "postcss --config build/postcss.config.js --replace \"site/content/**/*.css\"", @@ -98,18 +98,18 @@ "@rollup/plugin-babel": "^5.2.1", "@rollup/plugin-commonjs": "^16.0.0", "@rollup/plugin-node-resolve": "^10.0.0", - "autoprefixer": "^10.0.1", + "autoprefixer": "^10.0.2", "bundlewatch": "^0.3.1", "clean-css-cli": "^4.3.0", "cross-env": "^7.0.2", - "eslint": "^7.12.1", + "eslint": "^7.13.0", "eslint-config-xo": "^0.33.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-unicorn": "^23.0.0", "find-unused-sass-variables": "^3.0.0", "glob": "^7.1.6", "hammer-simulator": "0.0.1", - "hugo-bin": "^0.65.0", + "hugo-bin": "^0.66.1", "ip": "^1.1.5", "jquery": "^3.5.1", "karma": "^5.2.3", @@ -126,11 +126,11 @@ "nodemon": "^2.0.6", "npm-run-all": "^4.1.5", "popper.js": "^1.16.1", - "postcss": "^8.1.4", + "postcss": "^8.1.6", "postcss-cli": "^8.2.0", "rollup": "^2.33.1", "rollup-plugin-istanbul": "^2.0.1", - "sass": "^1.28.0", + "sass": "^1.29.0", "shelljs": "^0.8.4", "stylelint": "^13.7.2", "stylelint-config-twbs-bootstrap": "^2.1.0", diff --git a/scss/_accordion.scss b/scss/_accordion.scss new file mode 100644 index 000000000..a68aaa70e --- /dev/null +++ b/scss/_accordion.scss @@ -0,0 +1,125 @@ +// +// Base styles +// + +.accordion-button { + position: relative; + display: flex; + align-items: center; + width: 100%; + padding: $accordion-button-padding-y $accordion-button-padding-x; + @include font-size($font-size-base); + color: $accordion-button-color; + background-color: $accordion-button-bg; + border: $accordion-border-width solid $accordion-border-color; + @include border-radius(0); + overflow-anchor: none; + @include transition($accordion-transition); + + &.collapsed { + border-bottom-width: 0; + } + + &:not(.collapsed) { + color: $accordion-button-active-color; + background-color: $accordion-button-active-bg; + + &::after { + background-image: escape-svg($accordion-button-active-icon); + transform: $accordion-icon-transform; + } + } + + // Accordion icon + &::after { + flex-shrink: 0; + width: $accordion-icon-width; + height: $accordion-icon-width; + margin-left: auto; + content: ""; + background-image: escape-svg($accordion-button-icon); + background-repeat: no-repeat; + background-size: $accordion-icon-width; + @include transition($accordion-icon-transition); + } + + &:hover { + z-index: 2; + } + + &:focus { + z-index: 3; + border-color: $accordion-button-focus-border-color; + outline: 0; + box-shadow: $accordion-button-focus-box-shadow; + } +} + +.accordion-header { + margin-bottom: 0; +} + +.accordion-item { + &:first-of-type { + .accordion-button { + @include border-top-radius($accordion-border-radius); + } + } + + &:last-of-type { + .accordion-button { + // Only set a border-radius on the last item if the accordion is collapsed + &.collapsed { + border-bottom-width: $accordion-border-width; + @include border-bottom-radius($accordion-border-radius); + } + } + + .accordion-collapse { + border-bottom-width: $accordion-border-width; + @include border-bottom-radius($accordion-border-radius); + } + } +} + +.accordion-collapse { + border: solid $accordion-border-color; + border-width: 0 $accordion-border-width; +} + +.accordion-body { + padding: $accordion-body-padding-y $accordion-body-padding-x; +} + + +// Flush accordion items +// +// Remove borders and border-radius to keep accordion items edge-to-edge. + +.accordion-flush { + .accordion-button { + border-right: 0; + border-left: 0; + @include border-radius(0); + } + + .accordion-collapse { + border-width: 0; + } + + .accordion-item { + &:first-of-type { + .accordion-button { + border-top-width: 0; + @include border-top-radius(0); + } + } + + &:last-of-type { + .accordion-button.collapsed { + border-bottom-width: 0; + @include border-bottom-radius(0); + } + } + } +} diff --git a/scss/_alert.scss b/scss/_alert.scss index f67dcc6a1..24fa2bd14 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -43,9 +43,15 @@ // scss-docs-start alert-modifiers // Generate contextual modifier classes for colorizing the alert. -@each $color, $value in $theme-colors { - .alert-#{$color} { - @include alert-variant(scale-color($value, $alert-bg-scale), scale-color($value, $alert-border-scale), scale-color($value, $alert-color-scale)); +@each $state, $value in $theme-colors { + $background: scale-color($value, $alert-bg-scale); + $border: scale-color($value, $alert-border-scale); + $color: scale-color($value, $alert-color-scale); + @if (contrast-ratio($background, $color) < $min-contrast-ratio) { + $color: mix($value, color-contrast($background), abs($alert-color-scale)); + } + .alert-#{$state} { + @include alert-variant($background, $border, $color); } } // scss-docs-end alert-modifiers diff --git a/scss/_button-group.scss b/scss/_button-group.scss index b15c6292e..1571d1ea9 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -1,5 +1,3 @@ -// stylelint-disable selector-no-qualifying-type - // Make the div behave like a button .btn-group, .btn-group-vertical { diff --git a/scss/_buttons.scss b/scss/_buttons.scss index e17d4895e..8f28d0277 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -107,18 +107,3 @@ .btn-sm { @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); } - - -// -// Block button -// - -.btn-block { - display: block; - width: 100%; - - // Vertically space out multiple block buttons - + .btn-block { - margin-top: $btn-block-spacing-y; - } -} diff --git a/scss/_card.scss b/scss/_card.scss index a526ec143..9b0f4969a 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -213,30 +213,3 @@ } } } - - -// -// Accordion -// - -.accordion { - overflow-anchor: none; - - > .card { - overflow: hidden; - - &:not(:last-of-type) { - border-bottom: 0; - @include border-bottom-radius(0); - } - - &:not(:first-of-type) { - @include border-top-radius(0); - } - - > .card-header { - @include border-radius(0); - margin-bottom: -$card-border-width; - } - } -} diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 84fbb1b0e..2ce0c8b15 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -151,7 +151,13 @@ // Add modifier classes to change text and background color on individual items. // Organizationally, this must come after the `:hover` states. -@each $color, $value in $theme-colors { - @include list-group-item-variant($color, scale-color($value, $list-group-item-bg-scale), scale-color($value, $list-group-item-color-scale)); +@each $state, $value in $theme-colors { + $background: scale-color($value, $list-group-item-bg-scale); + $color: scale-color($value, $list-group-item-color-scale); + @if (contrast-ratio($background, $color) < $min-contrast-ratio) { + $color: mix($value, color-contrast($background), abs($alert-color-scale)); + } + + @include list-group-item-variant($state, $background, $color); } // scss-docs-end list-group-modifiers diff --git a/scss/_utilities.scss b/scss/_utilities.scss index eb3c24c75..856e34dce 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -23,7 +23,7 @@ $utilities: map-merge( print: true, property: display, class: d, - values: inline inline-block block table table-row table-cell flex inline-flex none + values: inline inline-block block grid table table-row table-cell flex inline-flex none ), "shadow": ( property: box-shadow, @@ -199,6 +199,12 @@ $utilities: map-merge( class: flex, values: wrap nowrap wrap-reverse ), + "gap": ( + responsive: true, + property: gap, + class: gap, + values: $spacers + ), "justify-content": ( responsive: true, property: justify-content, diff --git a/scss/_variables.scss b/scss/_variables.scss index 781ec79a4..2a8b45e14 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -605,8 +605,6 @@ $btn-link-color: $link-color !default; $btn-link-hover-color: $link-hover-color !default; $btn-link-disabled-color: $gray-600 !default; -$btn-block-spacing-y: .5rem !default; - // Allows for customizing button radius independently from global border radius $btn-border-radius: $border-radius !default; $btn-border-radius-sm: $border-radius-sm !default; @@ -814,7 +812,7 @@ $form-feedback-invalid-color: $danger !default; $form-feedback-icon-valid-color: $form-feedback-valid-color !default; $form-feedback-icon-valid: url("data:image/svg+xml,") !default; $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; -$form-feedback-icon-invalid: url("data:image/svg+xml,") !default; +$form-feedback-icon-invalid: url("data:image/svg+xml,") !default; // scss-docs-start form-validation-states $form-validation-states: ( @@ -1014,6 +1012,37 @@ $card-img-overlay-padding: $spacer !default; $card-group-margin: $grid-gutter-width / 2 !default; +// Accordion +$accordion-padding-y: 1rem !default; +$accordion-padding-x: 1.25rem !default; +$accordion-color: $body-color !default; +$accordion-bg: transparent !default; +$accordion-border-width: $border-width !default; +$accordion-border-color: rgba($black, .125) !default; +$accordion-border-radius: $border-radius !default; + +$accordion-body-padding-y: $accordion-padding-y !default; +$accordion-body-padding-x: $accordion-padding-x !default; + +$accordion-button-padding-y: $accordion-padding-y !default; +$accordion-button-padding-x: $accordion-padding-x !default; +$accordion-button-color: $accordion-color !default; +$accordion-button-bg: $accordion-bg !default; +$accordion-transition: $btn-transition, border-radius .15s ease !default; +$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default; +$accordion-button-active-color: shade-color($primary, 10%) !default; + +$accordion-button-focus-border-color: $input-focus-border-color !default; +$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default; + +$accordion-icon-width: 1.25rem !default; +$accordion-icon-color: $accordion-color !default; +$accordion-icon-active-color: $accordion-button-active-color !default; +$accordion-icon-transition: transform .2s ease-in-out !default; +$accordion-icon-transform: rotate(180deg) !default; + +$accordion-button-icon: url("data:image/svg+xml,") !default; +$accordion-button-active-icon: url("data:image/svg+xml,") !default; // Tooltips @@ -1151,7 +1180,7 @@ $alert-border-width: $border-width !default; $alert-bg-scale: -80% !default; $alert-border-scale: -70% !default; -$alert-color-scale: 50% !default; +$alert-color-scale: 40% !default; $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side @@ -1180,7 +1209,7 @@ $list-group-border-radius: $border-radius !default; $list-group-item-padding-y: $spacer / 2 !default; $list-group-item-padding-x: $spacer !default; $list-group-item-bg-scale: -80% !default; -$list-group-item-color-scale: 50% !default; +$list-group-item-color-scale: 40% !default; $list-group-hover-bg: $gray-100 !default; $list-group-active-color: $component-active-color !default; @@ -1250,8 +1279,8 @@ $carousel-caption-spacer: 1.25rem !default; $carousel-control-icon-width: 2rem !default; -$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; -$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; $carousel-transition-duration: .6s !default; $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) @@ -1280,7 +1309,7 @@ $btn-close-height: $btn-close-width !default; $btn-close-padding-x: .25em !default; $btn-close-padding-y: $btn-close-padding-x !default; $btn-close-color: $black !default; -$btn-close-bg: url("data:image/svg+xml,") !default; +$btn-close-bg: url("data:image/svg+xml,") !default; $btn-close-focus-shadow: $input-btn-focus-box-shadow !default; $btn-close-opacity: .5 !default; $btn-close-hover-opacity: .75 !default; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index c65caab6d..27514484c 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -28,6 +28,7 @@ @import "nav"; @import "navbar"; @import "card"; +@import "accordion"; @import "breadcrumb"; @import "pagination"; @import "badge"; diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 42e56f27b..8b2e2b8eb 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -1,5 +1,3 @@ -// stylelint-disable selector-no-vendor-prefix - .form-floating { position: relative; diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 1fd1e1a8b..bac416f8c 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -78,7 +78,6 @@ padding: $input-padding-y $input-padding-x; margin: (-$input-padding-y) (-$input-padding-x); margin-inline-end: $input-padding-x; - -moz-margin-end: subtract($input-padding-x, 5px); // stylelint-disable-line property-no-vendor-prefix color: $form-file-button-color; @include gradient-bg($form-file-button-bg); pointer-events: none; @@ -156,7 +155,6 @@ 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; - -moz-margin-end: subtract($input-padding-x-sm, 5px); // stylelint-disable-line property-no-vendor-prefix } &::-webkit-file-upload-button { @@ -177,7 +175,6 @@ 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; - -moz-margin-end: subtract($input-padding-x-lg, 5px); // stylelint-disable-line property-no-vendor-prefix } &::-webkit-file-upload-button { diff --git a/site/assets/js/search.js b/site/assets/js/search.js index 823dcb10a..14c138fa5 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -5,11 +5,12 @@ (function () { 'use strict' - if (!window.docsearch) { + var inputElement = document.getElementById('search-input') + + if (!window.docsearch || !inputElement) { return } - var inputElement = document.getElementById('search-input') var siteDocsVersion = inputElement.getAttribute('data-docs-version') document.addEventListener('keydown', function (event) { @@ -42,7 +43,7 @@ transformData: function (hits) { return hits.map(function (hit) { var currentUrl = getOrigin() - var liveUrl = 'https://getbootstrap.com/' + var liveUrl = 'https://v5.getbootstrap.com/' hit.url = currentUrl.lastIndexOf(liveUrl, 0) === 0 ? // On production, return the result as is diff --git a/site/content/docs/5.0/components/accordion.md b/site/content/docs/5.0/components/accordion.md new file mode 100644 index 000000000..1f08a7911 --- /dev/null +++ b/site/content/docs/5.0/components/accordion.md @@ -0,0 +1,106 @@ +--- +layout: docs +title: Accordion +description: Build vertically collapsing accordions in combination with our Collapse JavaScript plugin. +group: components +aliases: + - "/components/" + - "/docs/5.0/components/" +toc: true +--- + +## How it works + +The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. To render an accordion that's expanded, add the `.open` class on the `.accordion`. + +{{< callout info >}} +{{< partial "callout-info-prefersreducedmotion.md" >}} +{{< /callout >}} + +## Example + +Click the accordions below to expand/collapse the accordion content. + +{{< example >}} +
.accordion-body, though the transition does limit overflow.
+ .accordion-body, though the transition does limit overflow.
+ .accordion-body, though the transition does limit overflow.
+