{% include ads.html %}
{{ content }}
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 5b79626a26..eba9fc75f4 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -1018,6 +1018,46 @@ Custom `
{% endexample %}
+You may also choose from small and large custom selects to match our similarly sized text inputs.
+
+{% example html %}
+
+
+
+{% endexample %}
+
+The `multiple` attribute is also supported:
+
+{% example html %}
+
+{% endexample %}
+
+As is the `size` attribute:
+
+{% example html %}
+
+{% endexample %}
+
### File browser
The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md
index 214ed01169..5a6e000e92 100644
--- a/docs/4.0/components/modal.md
+++ b/docs/4.0/components/modal.md
@@ -210,7 +210,7 @@ When modals become too long for the user's viewport or device, they scroll indep
### Vertically centered
-Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. **Do not use this with long modals**—it will overflow the viewport and potentially hide parts of your modal.
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md
index 0aefc9ad1f..865c2b6986 100644
--- a/docs/4.0/content/tables.md
+++ b/docs/4.0/content/tables.md
@@ -586,7 +586,7 @@ Create responsive tables by adding `.table-responsive{-sm|-md|-lg|-xl}` to any `
## Captions
-A `
` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
+A `
` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
{% example html %}
diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index c1d72e8827..5bb476059a 100644
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -11,6 +11,8 @@ 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.
- 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.
- 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.
## Beta 2 changes
diff --git a/package.json b/package.json
index 8534e320fc..101fed0a27 100644
--- a/package.json
+++ b/package.json
@@ -126,15 +126,9 @@
"node": ">=6"
},
"files": [
- ".babelrc",
- ".eslintignore",
- "Gemfile",
- "dist",
- "build",
- "js/.eslintrc.json",
- "js/**/*.js",
- "js/**/*.js.map",
- "scss/**/*.scss"
+ "dist/",
+ "js/{src,dist}/",
+ "scss/"
],
"browserslist": [
"Chrome >= 45",
@@ -205,7 +199,7 @@
},
"dependencies": {},
"peerDependencies": {
- "jquery": "^3.0.0",
+ "jquery": "1.9.1 - 3",
"popper.js": "^1.12.9"
}
}
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 54af829b61..e21a81ff87 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -33,7 +33,7 @@
&:active ~ .custom-control-indicator {
color: $custom-control-indicator-active-color;
- @include gradient-bg($custom-control-indicator-active-bg);
+ background-color: $custom-control-indicator-active-bg;
@include box-shadow($custom-control-indicator-active-box-shadow);
}
@@ -62,10 +62,17 @@
pointer-events: none;
user-select: none;
background-color: $custom-control-indicator-bg;
- background-repeat: no-repeat;
- background-position: center center;
- background-size: $custom-control-indicator-bg-size;
@include box-shadow($custom-control-indicator-box-shadow);
+
+ &::before {
+ display: block;
+ width: $custom-control-indicator-size;
+ height: $custom-control-indicator-size;
+ content: "";
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: $custom-control-indicator-bg-size;
+ }
}
// Checkboxes
@@ -78,13 +85,20 @@
}
.custom-control-input:checked ~ .custom-control-indicator {
- background-image: $custom-checkbox-indicator-icon-checked;
+ @include gradient-bg($custom-control-indicator-checked-bg);
+
+ &::before {
+ background-image: $custom-checkbox-indicator-icon-checked;
+ }
}
.custom-control-input:indeterminate ~ .custom-control-indicator {
- background-color: $custom-checkbox-indicator-indeterminate-bg;
- background-image: $custom-checkbox-indicator-icon-indeterminate;
+ @include gradient-bg($custom-control-indicator-checked-bg);
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
+
+ &::before {
+ background-image: $custom-checkbox-indicator-icon-indeterminate;
+ }
}
}
@@ -98,7 +112,11 @@
}
.custom-control-input:checked ~ .custom-control-indicator {
- background-image: $custom-radio-indicator-icon-checked;
+ @include gradient-bg($custom-control-indicator-checked-bg);
+
+ &::before {
+ background-image: $custom-radio-indicator-icon-checked;
+ }
}
}
@@ -149,7 +167,7 @@
&:focus {
border-color: $custom-select-focus-border-color;
outline: 0;
- @include box-shadow($custom-select-focus-box-shadow);
+ box-shadow: $custom-select-focus-box-shadow;
&::-ms-value {
// For visual consistency with other platforms/browsers,
@@ -162,8 +180,10 @@
}
}
- &[multiple] {
+ &[multiple],
+ &[size]:not([size="1"]) {
height: auto;
+ padding-right: $custom-select-padding-x;
background-image: none;
}
@@ -185,6 +205,13 @@
font-size: $custom-select-font-size-sm;
}
+.custom-select-lg {
+ height: $custom-select-height-lg;
+ padding-top: $custom-select-padding-y;
+ padding-bottom: $custom-select-padding-y;
+ font-size: $custom-select-font-size-lg;
+}
+
// File
//
@@ -206,7 +233,12 @@
opacity: 0;
&:focus ~ .custom-file-control {
+ border-color: $custom-file-focus-border-color;
box-shadow: $custom-file-focus-box-shadow;
+
+ &::before {
+ border-color: $custom-file-focus-border-color;
+ }
}
}
diff --git a/scss/_modal.scss b/scss/_modal.scss
index bd4abc7c64..edda836636 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -53,9 +53,7 @@
.modal-dialog-centered {
display: flex;
align-items: center;
- height: 100%;
- margin-top: 0;
- margin-bottom: 0;
+ min-height: calc(100% - (#{$modal-dialog-margin} * 2));
}
// Actual modal
@@ -154,8 +152,7 @@
}
.modal-dialog-centered {
- margin-top: 0;
- margin-bottom: 0;
+ min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
}
.modal-content {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index acea370fb2..788c55a492 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -483,15 +483,19 @@ $custom-select-border-width: $input-btn-border-width !default;
$custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default;
-$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default;
-$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
+$custom-select-focus-border-color: $input-focus-border-color !default;
+$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), $input-btn-focus-box-shadow !default;
$custom-select-font-size-sm: 75% !default;
$custom-select-height-sm: $input-height-sm !default;
+$custom-select-font-size-lg: 125% !default;
+$custom-select-height-lg: $input-height-lg !default;
+
$custom-file-height: $input-height !default;
$custom-file-width: 14rem !default;
-$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
+$custom-file-focus-border-color: $input-focus-border-color !default;
+$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;
$custom-file-padding-y: $input-btn-padding-y !default;
$custom-file-padding-x: $input-btn-padding-x !default;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index de3c530bb5..c6e0e03a4c 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -51,16 +51,16 @@
}
}
-@mixin button-outline-variant($color, $color-hover: #fff) {
+@mixin button-outline-variant($color, $color-hover: #fff, $active-background: $color, $active-border: $color) {
color: $color;
background-color: transparent;
background-image: none;
border-color: $color;
- @include hover {
- color: $color-hover;
- background-color: $color;
- border-color: $color;
+ &:hover {
+ color: color-yiq($color);
+ background-color: $active-background;
+ border-color: $active-border;
}
&:focus,
@@ -77,9 +77,9 @@
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active,
.show > &.dropdown-toggle {
- color: $color-hover;
- background-color: $color;
- border-color: $color;
+ color: color-yiq($color-hover);
+ background-color: $active-background;
+ border-color: $active-border;
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 9fe889cf56..b7e664db73 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -84,11 +84,16 @@
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-control-indicator {
- background-color: rgba($color, .4);
+ background-color: lighten($color, 25%);
}
~ .custom-control-description {
color: $color;
}
+ &:checked {
+ ~ .custom-control-indicator {
+ @include gradient-bg(lighten($color, 10%));
+ }
+ }
&:focus {
~ .custom-control-indicator {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);