Commit e3aaadc5 authored by Mark Otto's avatar Mark Otto
Browse files

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

parents 935d45f4 16f14172
main cleanup-floating-forms cssvar-function dependabot/npm_and_yarn/stylelint-and-stylelint-config-twbs-bootstrap-15.3.0 extend-snippets feat/data-target floating-always-visible floating-labels-icons fod-main-banner form-controls-with-icons github/fork/719media/patch-13 github/fork/719media/patch-14 github/fork/719media/patch-9 github/fork/ChellyAhmed/fix-typo-reboot.md github/fork/ChellyAhmed/offcanvas-scroll-back github/fork/CtrlAltLilith/main github/fork/Elysiome/offcanvas-optional-window-resizing github/fork/JanSargsyan/main github/fork/LunicLynx/support-different-line-height-for-buttons github/fork/Psixodelik/main github/fork/Ronid1/ronid1/offcanvas_static_backdrop github/fork/RyanBerliner/tooltip-accessibility github/fork/SantiagoPVazquez/Feature-default-border-bottom-to-dropdown-item github/fork/Sir-Genius/utils github/fork/Sumit-Singh-8/main github/fork/Viktor-VERA2020/offcanvas-slide github/fork/Zivangu9/input-group-for-form-control-plaintext github/fork/alpadev/alpadev/call-dispose-on-component-reinstantiation github/fork/astagi/fix/tree-shake-modules github/fork/compnerd/dark-accordion-icon github/fork/derSascha/dropdown-dont-close-on-input-click github/fork/dev-ph1l/main github/fork/donquixote/issue-33861-utl-mixin github/fork/florianlacreuse/mixin-make-row-gutter-y github/fork/gregorw/main github/fork/iteggmbh/transitionend-dispose-race github/fork/jdelStrother/patch-1 github/fork/jonnysp/form-floating github/fork/jonnysp/independent-offcanvas github/fork/jonnysp/theme-dark-on-card-and-modal-fix github/fork/josefdlange/floating-label-placeholder-opacity github/fork/julien-deramond/enhance-change-version.js github/fork/julien-deramond/main-jd-fix-offset-content github/fork/julien-deramond/main-jd-issue-with-utitlies github/fork/julien-deramond/main-xmr-pa11y-ci-jd-add-hideElements github/fork/kyletsang/fix-tooltip-padding github/fork/lacutah/CheckboxCenteringDocumentation github/fork/lekoala/patch-3 github/fork/louismaximepiton/main-kld-lmp-collapse-proposal github/fork/louismaximepiton/main-lmp-card-inner-border-radius-fix github/fork/louismaximepiton/main-lmp-carousel-multiple-images github/fork/louismaximepiton/main-lmp-css-var-init github/fork/louismaximepiton/main-lmp-disabled-floating-label-fix github/fork/louismaximepiton/main-lmp-input-range-fix github/fork/louismaximepiton/main-lmp-shift-color github/fork/louismaximepiton/main-lmp-table-active-tr-fix github/fork/maciek-szn/switch github/fork/michael-roth/feature/19964-multiple-tab-targets github/fork/mistic100/dom-utils github/fork/nkdas91/accordion github/fork/nstungcom/fix-missing-modal-open-class github/fork/oraliahdz/animation-utilities github/fork/pine3ree/patch-7 github/fork/pouwerkerk/unindent-scss-docs-shortcode github/fork/smares/smares-no-scolling-on-modal-close github/fork/tgm-git/patch-1 gs-forms gs-toasts-with-animated-progress-bar gs/add-history-helper gs/change-version-dir-on-docs gs/data-must-set-onlu-one-instance gs/docs/fix-drop-down-error gs/event-handler-2 gs/make-docs-js-build gs/make-simple-attribute-toggler gs/popover-fix-doc gs/provide-steConfig-method gs/scrollspy-smoothscroll-option-use-browser-history gs/streamline-jqueryInterface gs/support-drop-down-in-navbar gs/test-js-generic-trigger gs/try-web-components gs/tweak-collapse-js-selector gs/use-event-handler-in-cocmponent gs/use-rollup-replace-for-version jo-docs-thanks-page jo-ssr-friendly logical-props-spacing-utils main-fod-disabled-form-check-label main-fod-nested-accordion main-fod-simpler-table-structure main-fod-table-separator main-fod-utilities-contrast main-jd-abbr-title main-jd-add-chips main-jd-add-doc-for-sass-custom-colors main-jd-add-enable-host-to-handle-web-components main-jd-browserstack-fine-tune main-jd-browserstack-updates main-jd-docs-consistent-usage-of-css-sections-step-2 main-jd-fix-docs-headers-in-white main-jd-fix-highlight-docs-border-radius main-jd-fix-placeholder-color-background-params-for-img-markup main-jd-glossary-experiment main-jd-postcss-drop-empty-css-vars main-jd-proto-doc-astro main-jd-skip-navigation-component main-jd-stackblitz-for-examples main-jd-upgrade-browserlistrc main-jd-use-host main-lmp-dark-theme-customization main-lmp-handle-scroll-target main-lmp-tab-fix main-mc-opensearch main-xmr-bundlewatch-action main-xmr-eslint-plugin-compat main-xmr-hugo-docs-vendor main-xmr-hugo-rm-ver main-xmr-linkinator-prod main-xmr-min-mangle main-xmr-pa11y-ci more-darkmode-examples nested-dropdowns patrickhlauke-issue37428 patrickhlauke-use-of-color-tweaks pr/34102 pr/37590 previous-next-docs-links sticky-thead utilities-functions-mixin v4-dev v4-dev-dropdown-hide-method v530-dev v6-postcss-custom-media v6-spinner-dots v6/gs/use-floating-ui-in-place-of-popper xmr/dev xmr/docs-png xmr/docs-svgs xmr/hugo-reorg-files xmr/js-2 xmr/markdownlint xmr/prepare-530-alpha2 xmr/xo v5.3.0-alpha1 v5.2.3 v5.2.2 v5.2.1 v5.2.0 v5.2.0-beta1 v5.1.3 v5.1.2 v5.1.1 v5.1.0 v5.0.2 v5.0.1 v5.0.0 v5.0.0-beta3 v5.0.0-beta2 v5.0.0-beta1 v5.0.0-alpha3 v5.0.0-alpha2 v5.0.0-alpha1 v4.6.2 v4.6.1 v4.6.0 v4.5.3 v4.5.2 v4.5.1 v4.5.0 v4.4.1 v4.4.0 v4.3.1 v4.3.0 v4.2.1 v4.2.0 v4.1.3 v4.1.2 v4.1.1 v4.1.0 v4.0.0 v4.0.0-beta.3
6 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!25494web pack,!25326Adjust examples,!23207#22402 : modal: new autofocus & keyboardBtnNav options,!17021v4
Showing with 234 additions and 267 deletions
+234 -267
...@@ -615,8 +615,8 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar ...@@ -615,8 +615,8 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"> <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input type="checkbox" class="form-check-input" id="dropdownCheck">
<input type="checkbox" class="form-check-input"> <label class="form-check-label" for="dropdownCheck">
Remember me Remember me
</label> </label>
</div> </div>
...@@ -639,8 +639,8 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar ...@@ -639,8 +639,8 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password"> <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input type="checkbox" class="form-check-input" id="dropdownCheck2">
<input type="checkbox" class="form-check-input"> <label class="form-check-label" for="dropdownCheck2">
Remember me Remember me
</label> </label>
</div> </div>
......
This diff is collapsed.
...@@ -10,10 +10,21 @@ toc: true ...@@ -10,10 +10,21 @@ toc: true
While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you're updating to Beta 3 from Beta 2 or any older version of Bootstrap. While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you're updating to Beta 3 from Beta 2 or any older version of Bootstrap.
### Miscellaneous
- Removed the unused `$thumbnail-transition` variable. We weren't transitioning anything, so it was just extra code. - Removed the unused `$thumbnail-transition` variable. We weren't transitioning anything, so it was just extra code.
- Changed the CSS for managing multiple `background-image`s on custom form checkboxes and radios. Previously, the `.custom-control-indicator` element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have `.custom-control-indicator` for the fill and gradient and `.custom-control-indicator::before` handles the icon.
- The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the `node_modules` folder, you should adapt your workflow. - The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the `node_modules` folder, you should adapt your workflow.
### Forms
- Rewrote both custom and default checkboxes and radios. Now, both have matching HTML structure (outer `<div>` with sibling `<input>` and `<label>`) and the same layout styles (stacked default, inline with modifier class). This allows us to style the label based on the input's state, simplifying support for the `disabled` attribute (previously requiring a parent class) and better supporting our form validation.
As part of this, we've changed the CSS for managing multiple `background-image`s on custom form checkboxes and radios. Previously, the now removed `.custom-control-indicator` element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have `.custom-control-label::before` for the fill and gradient and `.custom-control-label::after` handles the icon.
To make a custom check inline, add `.custom-control-inline`.
- Updated selector for input-based button groups. Instead of `[data-toggle="buttons"] { }` for style and behavior, we use the `data` attribute just for JS behaviors and rely on a new `.btn-group-toggle` class for styling. - Updated selector for input-based button groups. Instead of `[data-toggle="buttons"] { }` for style and behavior, we use the `data` attribute just for JS behaviors and rely on a new `.btn-group-toggle` class for styling.
- Removed `.col-form-legend` in favor of a slightly improved `.col-form-label`. This way `.col-form-label-sm` and `.col-form-label-lg` can be used on `<legend>` elements with ease. - Removed `.col-form-legend` in favor of a slightly improved `.col-form-label`. This way `.col-form-label-sm` and `.col-form-label-lg` can be used on `<legend>` elements with ease.
### Input groups ### Input groups
......
...@@ -9,9 +9,13 @@ ...@@ -9,9 +9,13 @@
.custom-control { .custom-control {
position: relative; position: relative;
display: inline-flex; display: block;
min-height: (1rem * $line-height-base); min-height: (1rem * $line-height-base);
padding-left: $custom-control-gutter; padding-left: $custom-control-gutter;
}
.custom-control-inline {
display: inline-flex;
margin-right: $custom-control-spacer-x; margin-right: $custom-control-spacer-x;
} }
...@@ -20,51 +24,61 @@ ...@@ -20,51 +24,61 @@
z-index: -1; // Put the input behind the label so it doesn't overlay text z-index: -1; // Put the input behind the label so it doesn't overlay text
opacity: 0; opacity: 0;
&:checked ~ .custom-control-indicator { &:checked ~ .custom-control-label::before {
color: $custom-control-indicator-checked-color; color: $custom-control-indicator-checked-color;
@include gradient-bg($custom-control-indicator-checked-bg); @include gradient-bg($custom-control-indicator-checked-bg);
@include box-shadow($custom-control-indicator-checked-box-shadow); @include box-shadow($custom-control-indicator-checked-box-shadow);
} }
&:focus ~ .custom-control-indicator { &:focus ~ .custom-control-label::before {
// the mixin is not used here to make sure there is feedback // the mixin is not used here to make sure there is feedback
box-shadow: $custom-control-indicator-focus-box-shadow; box-shadow: $custom-control-indicator-focus-box-shadow;
} }
&:active ~ .custom-control-indicator { &:active ~ .custom-control-label::before {
color: $custom-control-indicator-active-color; color: $custom-control-indicator-active-color;
background-color: $custom-control-indicator-active-bg; background-color: $custom-control-indicator-active-bg;
@include box-shadow($custom-control-indicator-active-box-shadow); @include box-shadow($custom-control-indicator-active-box-shadow);
} }
&:disabled { &:disabled {
~ .custom-control-indicator { ~ .custom-control-label {
background-color: $custom-control-indicator-disabled-bg; color: $custom-control-label-disabled-color;
}
~ .custom-control-description { &::before {
color: $custom-control-description-disabled-color; background-color: $custom-control-indicator-disabled-bg;
}
} }
} }
} }
// Custom indicator // Custom control indicators
// //
// Generates a shadow element to create our makeshift checkbox/radio background. // Build the custom controls out of psuedo-elements.
.custom-control-indicator { .custom-control-label {
position: absolute; margin-bottom: 0;
top: (($line-height-base - $custom-control-indicator-size) / 2);
left: 0;
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
pointer-events: none;
user-select: none;
background-color: $custom-control-indicator-bg;
@include box-shadow($custom-control-indicator-box-shadow);
// Background-color and (when enabled) gradient
&::before { &::before {
position: absolute;
top: (($line-height-base - $custom-control-indicator-size) / 2);
left: 0;
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
pointer-events: none;
content: "";
user-select: none;
background-color: $custom-control-indicator-bg;
@include box-shadow($custom-control-indicator-box-shadow);
}
// Foreground (icon)
&::after {
position: absolute;
top: (($line-height-base - $custom-control-indicator-size) / 2);
left: 0;
display: block; display: block;
width: $custom-control-indicator-size; width: $custom-control-indicator-size;
height: $custom-control-indicator-size; height: $custom-control-indicator-size;
...@@ -75,28 +89,31 @@ ...@@ -75,28 +89,31 @@
} }
} }
// Checkboxes // Checkboxes
// //
// Tweak just a few things for checkboxes. // Tweak just a few things for checkboxes.
.custom-checkbox { .custom-checkbox {
.custom-control-indicator { .custom-control-label::before {
@include border-radius($custom-checkbox-indicator-border-radius); @include border-radius($custom-checkbox-indicator-border-radius);
} }
.custom-control-input:checked ~ .custom-control-indicator { .custom-control-input:checked ~ .custom-control-label {
@include gradient-bg($custom-control-indicator-checked-bg);
&::before { &::before {
@include gradient-bg($custom-control-indicator-checked-bg);
}
&::after {
background-image: $custom-checkbox-indicator-icon-checked; background-image: $custom-checkbox-indicator-icon-checked;
} }
} }
.custom-control-input:indeterminate ~ .custom-control-indicator { .custom-control-input:indeterminate ~ .custom-control-label {
@include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
&::before { &::before {
@include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
}
&::after {
background-image: $custom-checkbox-indicator-icon-indeterminate; background-image: $custom-checkbox-indicator-icon-indeterminate;
} }
} }
...@@ -107,34 +124,16 @@ ...@@ -107,34 +124,16 @@
// Tweak just a few things for radios. // Tweak just a few things for radios.
.custom-radio { .custom-radio {
.custom-control-indicator { .custom-control-label::before {
border-radius: $custom-radio-indicator-border-radius; border-radius: $custom-radio-indicator-border-radius;
} }
.custom-control-input:checked ~ .custom-control-indicator { .custom-control-input:checked ~ .custom-control-label {
@include gradient-bg($custom-control-indicator-checked-bg);
&::before { &::before {
background-image: $custom-radio-indicator-icon-checked; @include gradient-bg($custom-control-indicator-checked-bg);
} }
} &::after {
} background-image: $custom-radio-indicator-icon-checked;
// Layout options
//
// By default radios and checkboxes are `inline-block` with no additional spacing
// set. Use these optional classes to tweak the layout.
.custom-controls-stacked {
display: flex;
flex-direction: column;
.custom-control {
margin-bottom: $custom-control-spacer-y;
+ .custom-control {
margin-left: 0;
} }
} }
} }
......
...@@ -207,33 +207,35 @@ select.form-control-lg { ...@@ -207,33 +207,35 @@ select.form-control-lg {
.form-check { .form-check {
position: relative; position: relative;
display: block; display: block;
margin-bottom: $form-check-margin-bottom;
&.disabled {
.form-check-label {
color: $text-muted;
}
}
}
.form-check-label {
padding-left: $form-check-input-gutter; padding-left: $form-check-input-gutter;
margin-bottom: 0; // Override default `<label>` bottom margin
} }
.form-check-input { .form-check-input {
position: absolute; position: absolute;
margin-top: $form-check-input-margin-y; margin-top: $form-check-input-margin-y;
margin-left: -$form-check-input-gutter; margin-left: -$form-check-input-gutter;
&:disabled ~ .form-check-label {
color: $text-muted;
}
}
.form-check-label {
margin-bottom: 0; // Override default `<label>` bottom margin
} }
// Radios and checkboxes on same line
.form-check-inline { .form-check-inline {
display: inline-block; display: inline-flex;
align-items: center;
padding-left: 0; // Override base .form-check
margin-right: $form-check-inline-margin-x; margin-right: $form-check-inline-margin-x;
.form-check-label { // Undo .form-check-input defaults and add some `margin-right`.
vertical-align: middle; .form-check-input {
position: static;
margin-top: 0;
margin-right: $form-check-inline-input-margin-x;
margin-left: 0;
} }
} }
...@@ -310,10 +312,6 @@ select.form-control-lg { ...@@ -310,10 +312,6 @@ select.form-control-lg {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: auto; width: auto;
margin-top: 0;
margin-bottom: 0;
}
.form-check-label {
padding-left: 0; padding-left: 0;
} }
.form-check-input { .form-check-input {
...@@ -323,23 +321,12 @@ select.form-control-lg { ...@@ -323,23 +321,12 @@ select.form-control-lg {
margin-left: 0; margin-left: 0;
} }
// Custom form controls
.custom-control { .custom-control {
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-left: 0;
}
.custom-control-indicator {
position: static;
display: inline-block;
margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate.
vertical-align: text-bottom;
} }
.custom-control-label {
// Re-override the feedback icon. margin-bottom: 0;
.has-feedback .form-control-feedback {
top: 0;
} }
} }
} }
...@@ -423,12 +423,12 @@ $input-transition: border-color .15s ease-in-out, box-shado ...@@ -423,12 +423,12 @@ $input-transition: border-color .15s ease-in-out, box-shado
$form-text-margin-top: .25rem !default; $form-text-margin-top: .25rem !default;
$form-check-margin-bottom: .5rem !default;
$form-check-input-gutter: 1.25rem !default; $form-check-input-gutter: 1.25rem !default;
$form-check-input-margin-y: .25rem !default; $form-check-input-margin-y: .3rem !default;
$form-check-input-margin-x: .25rem !default; $form-check-input-margin-x: .25rem !default;
$form-check-inline-margin-x: .75rem !default; $form-check-inline-margin-x: .75rem !default;
$form-check-inline-input-margin-x: .3125rem !default;
$form-group-margin-bottom: 1rem !default; $form-group-margin-bottom: 1rem !default;
...@@ -437,7 +437,6 @@ $input-group-addon-bg: $gray-200 !default; ...@@ -437,7 +437,6 @@ $input-group-addon-bg: $gray-200 !default;
$input-group-addon-border-color: $input-border-color !default; $input-group-addon-border-color: $input-border-color !default;
$custom-control-gutter: 1.5rem !default; $custom-control-gutter: 1.5rem !default;
$custom-control-spacer-y: .25rem !default;
$custom-control-spacer-x: 1rem !default; $custom-control-spacer-x: 1rem !default;
$custom-control-indicator-size: 1rem !default; $custom-control-indicator-size: 1rem !default;
...@@ -446,7 +445,7 @@ $custom-control-indicator-bg-size: 50% 50% !default; ...@@ -446,7 +445,7 @@ $custom-control-indicator-bg-size: 50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
$custom-control-indicator-disabled-bg: $gray-200 !default; $custom-control-indicator-disabled-bg: $gray-200 !default;
$custom-control-description-disabled-color: $gray-600 !default; $custom-control-label-disabled-color: $gray-600 !default;
$custom-control-indicator-checked-color: $white !default; $custom-control-indicator-checked-color: $white !default;
$custom-control-indicator-checked-bg: theme-color("primary") !default; $custom-control-indicator-checked-bg: theme-color("primary") !default;
......
...@@ -69,34 +69,32 @@ ...@@ -69,34 +69,32 @@
} }
} }
// TODO: redo check markup lol crap
.form-check-input { .form-check-input {
.was-validated &:#{$state}, .was-validated &:#{$state},
&.is-#{$state} { &.is-#{$state} {
+ .form-check-label { ~ .form-check-label {
color: $color; color: $color;
} }
} }
} }
// custom radios and checks
.custom-control-input { .custom-control-input {
.was-validated &:#{$state}, .was-validated &:#{$state},
&.is-#{$state} { &.is-#{$state} {
~ .custom-control-indicator { ~ .custom-control-label {
background-color: lighten($color, 25%);
}
~ .custom-control-description {
color: $color; color: $color;
&::before {
background-color: lighten($color, 25%);
}
} }
&:checked { &:checked {
~ .custom-control-indicator { ~ .custom-control-label::before {
@include gradient-bg(lighten($color, 10%)); @include gradient-bg(lighten($color, 10%));
} }
} }
&:focus { &:focus {
~ .custom-control-indicator { ~ .custom-control-label::before {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
} }
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment