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 >}} +
+
+

+ +

+
+
+ This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+{{< /example >}} + +### Flush + +Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. + +{{< example class="bg-light" >}} +
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+{{< /example >}} + +## Accessibility + +Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information. diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index 3eecceea2..5c68a3d4c 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -3,9 +3,6 @@ layout: docs title: Alerts description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. group: components -aliases: - - "/components/" - - "/docs/5.0/components/" toc: true --- diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md index ab31bb215..624fcfc1e 100644 --- a/site/content/docs/5.0/components/buttons.md +++ b/site/content/docs/5.0/components/buttons.md @@ -72,13 +72,6 @@ Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes {{< /example >}} -Create block level buttons—those that span the full width of a parent—by adding `.btn-block`. - -{{< example >}} - - -{{< /example >}} - ## Disabled state Make buttons look inactive by adding the `disabled` boolean attribute to any ` + + +{{< /example >}} + +Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoing, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change. + +{{< example >}} +
+ + +
+{{< /example >}} + +You can adjust the width of your block buttons with grid column width classes. For example, for a half-width "block button", use `.col-6`. Center it horizontally with `.mx-auto`, too. + +{{< example >}} +
+ + +
+{{< /example >}} + +Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked. + +{{< example >}} +
+ + +
+{{< /example >}} + ## Button plugin The button plugin allows you to create simple on/off toggle buttons. diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index c460f6b9a..076c17289 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -69,58 +69,6 @@ Multiple `
- - - -
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-
- -
-
-

- -

-
-
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-
-
-
-
-

- -

-
-
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-
-
- -{{< /example >}} - ## Accessibility Be sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an `
` or `
`), the attribute `role="button"` should be added to the element. diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index 2bc21533b..58629fd66 100644 --- a/site/content/docs/5.0/components/navbar.md +++ b/site/content/docs/5.0/components/navbar.md @@ -21,8 +21,6 @@ Here's what you need to know before getting started with the navbar: {{< partial "callout-info-prefersreducedmotion.md" >}} {{< /callout >}} -Read on for an example and list of supported sub-components. - ## Supported content Navbars come with built-in support for a handful of sub-components. Choose from the following as needed: @@ -79,7 +77,7 @@ This example uses [color]({{< docsref "/utilities/colors" >}}) (`bg-light`) and ### Brand -The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. +The `.navbar-brand` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles. {{< example >}} @@ -178,7 +176,7 @@ And because we use classes for our navs, you can avoid the list-based approach e {{< /example >}} -You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below. +You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below. {{< example >}} {{< /example >}} -Immediate children elements in `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior. +Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior. {{< example >}} {{< /example >}} -Input groups work, too. If your navbar is an entire form, or mostly form, you can use the `
` element as the container and save some HTML. Applies to the option above and below this copy. +Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `` element as the container and save some HTML. {{< example >}}