Merge branch 'v4-dev' into v4-custom-forms-validation

Gemfile.lock

@@ -28,7 +28,7 @@ GEM
     mercenary (0.3.5)
     rake (10.5.0)
     rb-fsevent (0.9.7)
-    rb-inotify (0.9.6)
+    rb-inotify (0.9.7)
       ffi (>= 0.5.0)
     rouge (1.10.1)
     safe_yaml (1.0.4)

Gruntfile.js

@@ -217,7 +217,7 @@ module.exports = function (grunt) {
         src: ['scss/*.scss', '!scss/_normalize.scss']
       },
       docs: {
-        src: ['docs/assets/scss/*.scss', '!scss/_normalize.scss', '!docs/assets/scss/docs.scss']
+        src: ['docs/assets/scss/*.scss', '!docs/assets/scss/docs.scss']
       }
     },
 

dist/css/bootstrap.css

@@ -2088,7 +2088,9 @@ pre code {
   color: #55595c;
   background-color: #fff;
   background-image: none;
-  border: 1px solid #ccc;
+  -webkit-background-clip: padding-box;
+          background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
 }
 
@@ -3390,7 +3392,7 @@ input[type="button"].btn-block {
   color: #55595c;
   text-align: center;
   background-color: #eceeef;
-  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
 }
 
@@ -3587,7 +3589,7 @@ input[type="button"].btn-block {
   background-image: none \9;
   -webkit-background-size: 8px 10px;
           background-size: 8px 10px;
-  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -3643,7 +3645,7 @@ input[type="button"].btn-block {
   border-radius: 0.25rem;
 }
 
-.custom-file-control::after {
+.custom-file-control:lang(en)::after {
   content: "Choose file...";
 }
 
@@ -3658,12 +3660,15 @@ input[type="button"].btn-block {
   padding: 0.5rem 1rem;
   line-height: 1.5;
   color: #555;
-  content: "Browse";
   background-color: #eee;
   border: 1px solid #ddd;
   border-radius: 0 0.25rem 0.25rem 0;
 }
 
+.custom-file-control:lang(en)::before {
+  content: "Browse";
+}
+
 .nav {
   padding-left: 0;
   margin-bottom: 0;
@@ -4046,11 +4051,13 @@ input[type="button"].btn-block {
 }
 
 .card > .list-group:first-child .list-group-item:first-child {
-  border-radius: 0.25rem 0.25rem 0 0;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
 }
 
 .card > .list-group:last-child .list-group-item:last-child {
-  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
 }
 
 .card-header {
@@ -5257,19 +5264,6 @@ button.close {
   clear: both;
 }
 
-.modal-footer .btn + .btn {
-  margin-bottom: 0;
-  margin-left: 5px;
-}
-
-.modal-footer .btn-group .btn + .btn {
-  margin-left: -1px;
-}
-
-.modal-footer .btn-block + .btn-block {
-  margin-left: 0;
-}
-
 .modal-scrollbar-measure {
   position: absolute;
   top: -9999px;

docs/_data/browser-bugs.yml

@@ -68,26 +68,6 @@
   origin: >
     Bootstrap#13453
 
--
-  browser: >
-    Firefox
-  summary: >
-    `max-width: 100%;` doesn't work inside tables.
-  upstream_bug: >
-    Mozilla#975632
-  origin: >
-    Bootstrap#10690
-
--
-  browser: >
-    Firefox
-  summary: >
-    Button elements with `width: 100%` become cropped in long tables.
-  upstream_bug: >
-    Mozilla#1060131
-  origin: >
-    Bootstrap#14320
-
 -
   browser: >
     Firefox

docs/components/forms.md

@@ -332,7 +332,9 @@ Because of this, you may need to manually address the width and alignment of ind
 
 ### Using the Grid
 
-For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins). Add the `.row` class to form groups and use the `.col-*` classes to specify the width of your labels and controls. To vertically center the labels with the textual inputs—nearly anything with `.form-control`—use the `.form-control-label` class.
+For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
+
+Be sure to add `.form-control-label` to your `<label>`s as well so they're vertically centered with their associated labels.
 
 {% example html %}
 <form>
@@ -844,3 +846,22 @@ Here's how it works:
 - We declare a `height` on the `<input>` for proper spacing for surrounding content.
 
 In other words, it's an entirely custom element, all generated via CSS.
+
+#### Translating or customizing the strings
+
+The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for easy translation of the "Browse" and "Choose file..." text into other languages. Simply override or add entries to the `$custom-file-text` SCSS variable with the relevant [language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and localized strings. The English strings can be customized the same way. For example, here's how one might add a Spanish translation (Spanish's language code is `es`):
+
+{% highlight scss %}
+$custom-file-text: (
+  placeholder: (
+    en: "Choose file...",
+    es: "Seleccionar archivo..."
+  ),
+  button-label: (
+    en: "Browse",
+    es: "Navegar"
+  )
+);
+{% endhighlight %}
+
+You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.

docs/dist/css/bootstrap.css

@@ -2088,7 +2088,9 @@ pre code {
   color: #55595c;
   background-color: #fff;
   background-image: none;
-  border: 1px solid #ccc;
+  -webkit-background-clip: padding-box;
+          background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
 }
 
@@ -3390,7 +3392,7 @@ input[type="button"].btn-block {
   color: #55595c;
   text-align: center;
   background-color: #eceeef;
-  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
 }
 
@@ -3587,7 +3589,7 @@ input[type="button"].btn-block {
   background-image: none \9;
   -webkit-background-size: 8px 10px;
           background-size: 8px 10px;
-  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -3643,7 +3645,7 @@ input[type="button"].btn-block {
   border-radius: 0.25rem;
 }
 
-.custom-file-control::after {
+.custom-file-control:lang(en)::after {
   content: "Choose file...";
 }
 
@@ -3658,12 +3660,15 @@ input[type="button"].btn-block {
   padding: 0.5rem 1rem;
   line-height: 1.5;
   color: #555;
-  content: "Browse";
   background-color: #eee;
   border: 1px solid #ddd;
   border-radius: 0 0.25rem 0.25rem 0;
 }
 
+.custom-file-control:lang(en)::before {
+  content: "Browse";
+}
+
 .nav {
   padding-left: 0;
   margin-bottom: 0;
@@ -4046,11 +4051,13 @@ input[type="button"].btn-block {
 }
 
 .card > .list-group:first-child .list-group-item:first-child {
-  border-radius: 0.25rem 0.25rem 0 0;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
 }
 
 .card > .list-group:last-child .list-group-item:last-child {
-  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
 }
 
 .card-header {
@@ -5257,19 +5264,6 @@ button.close {
   clear: both;
 }
 
-.modal-footer .btn + .btn {
-  margin-bottom: 0;
-  margin-left: 5px;
-}
-
-.modal-footer .btn-group .btn + .btn {
-  margin-left: -1px;
-}
-
-.modal-footer .btn-block + .btn-block {
-  margin-left: 0;
-}
-
 .modal-scrollbar-measure {
   position: absolute;
   top: -9999px;

scss/.csscomb.json

@@ -1,304 +0,0 @@
-{
-  "always-semicolon": true,
-  "block-indent": 2,
-  "color-case": "lower",
-  "color-shorthand": true,
-  "element-case": "lower",
-  "eof-newline": true,
-  "leading-zero": false,
-  "remove-empty-rulesets": true,
-  "space-after-colon": 1,
-  "space-after-combinator": 1,
-  "space-before-selector-delimiter": 0,
-  "space-between-declarations": "\n",
-  "space-after-opening-brace": "\n",
-  "space-before-closing-brace": "\n",
-  "space-before-colon": 0,
-  "space-before-combinator": 1,
-  "space-before-opening-brace": 1,
-  "strip-spaces": true,
-  "unitless-zero": true,
-  "vendor-prefix-align": true,
-  "sort-order": [
-    [
-      "position",
-      "top",
-      "right",
-      "bottom",
-      "left",
-      "z-index",
-      "display",
-      "float",
-      "width",
-      "min-width",
-      "max-width",
-      "height",
-      "min-height",
-      "max-height",
-      "-webkit-box-sizing",
-      "-moz-box-sizing",
-      "box-sizing",
-      "-webkit-appearance",
-      "padding",
-      "padding-top",
-      "padding-right",
-      "padding-bottom",
-      "padding-left",
-      "margin",
-      "margin-top",
-      "margin-right",
-      "margin-bottom",
-      "margin-left",
-      "overflow",
-      "overflow-x",
-      "overflow-y",
-      "-webkit-overflow-scrolling",
-      "-ms-overflow-x",
-      "-ms-overflow-y",
-      "-ms-overflow-style",
-      "clip",
-      "clear",
-      "font",
-      "font-family",
-      "font-size",
-      "font-style",
-      "font-weight",
-      "font-variant",
-      "font-size-adjust",
-      "font-stretch",
-      "font-effect",
-      "font-emphasize",
-      "font-emphasize-position",
-      "font-emphasize-style",
-      "font-smooth",
-      "-webkit-hyphens",
-      "-moz-hyphens",
-      "hyphens",
-      "line-height",
-      "color",
-      "text-align",
-      "-webkit-text-align-last",
-      "-moz-text-align-last",
-      "-ms-text-align-last",
-      "text-align-last",
-      "text-emphasis",
-      "text-emphasis-color",
-      "text-emphasis-style",
-      "text-emphasis-position",
-      "text-decoration",
-      "text-indent",
-      "text-justify",
-      "text-outline",
-      "-ms-text-overflow",
-      "text-overflow",
-      "text-overflow-ellipsis",
-      "text-overflow-mode",
-      "text-shadow",
-      "text-transform",
-      "text-wrap",
-      "-webkit-text-size-adjust",
-      "-ms-text-size-adjust",
-      "letter-spacing",
-      "-ms-word-break",
-      "word-break",
-      "word-spacing",
-      "-ms-word-wrap",
-      "word-wrap",
-      "-moz-tab-size",
-      "-o-tab-size",
-      "tab-size",
-      "white-space",
-      "vertical-align",
-      "list-style",
-      "list-style-position",
-      "list-style-type",
-      "list-style-image",
-      "pointer-events",
-      "-ms-touch-action",
-      "touch-action",
-      "cursor",
-      "visibility",
-      "zoom",
-      "flex-direction",
-      "flex-order",
-      "flex-pack",
-      "flex-align",
-      "table-layout",
-      "empty-cells",
-      "caption-side",
-      "border-spacing",
-      "border-collapse",
-      "content",
-      "quotes",
-      "counter-reset",
-      "counter-increment",
-      "resize",
-      "-webkit-user-select",
-      "-moz-user-select",
-      "-ms-user-select",
-      "-o-user-select",
-      "user-select",
-      "nav-index",
-      "nav-up",
-      "nav-right",
-      "nav-down",
-      "nav-left",
-      "background",
-      "background-color",
-      "background-image",
-      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
-      "filter:progid:DXImageTransform.Microsoft.gradient",
-      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
-      "filter",
-      "background-repeat",
-      "background-attachment",
-      "background-position",
-      "background-position-x",
-      "background-position-y",
-      "-webkit-background-clip",
-      "-moz-background-clip",
-      "background-clip",
-      "background-origin",
-      "-webkit-background-size",
-      "-moz-background-size",
-      "-o-background-size",
-      "background-size",
-      "border",
-      "border-color",
-      "border-style",
-      "border-width",
-      "border-top",
-      "border-top-color",
-      "border-top-style",
-      "border-top-width",
-      "border-right",
-      "border-right-color",
-      "border-right-style",
-      "border-right-width",
-      "border-bottom",
-      "border-bottom-color",
-      "border-bottom-style",
-      "border-bottom-width",
-      "border-left",
-      "border-left-color",
-      "border-left-style",
-      "border-left-width",
-      "border-radius",
-      "border-top-left-radius",
-      "border-top-right-radius",
-      "border-bottom-right-radius",
-      "border-bottom-left-radius",
-      "-webkit-border-image",
-      "-moz-border-image",
-      "-o-border-image",
-      "border-image",
-      "-webkit-border-image-source",
-      "-moz-border-image-source",
-      "-o-border-image-source",
-      "border-image-source",
-      "-webkit-border-image-slice",
-      "-moz-border-image-slice",
-      "-o-border-image-slice",
-      "border-image-slice",
-      "-webkit-border-image-width",
-      "-moz-border-image-width",
-      "-o-border-image-width",
-      "border-image-width",
-      "-webkit-border-image-outset",
-      "-moz-border-image-outset",
-      "-o-border-image-outset",
-      "border-image-outset",
-      "-webkit-border-image-repeat",
-      "-moz-border-image-repeat",
-      "-o-border-image-repeat",
-      "border-image-repeat",
-      "outline",
-      "outline-width",
-      "outline-style",
-      "outline-color",
-      "outline-offset",
-      "-webkit-box-shadow",
-      "-moz-box-shadow",
-      "box-shadow",
-      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
-      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
-      "opacity",
-      "-ms-interpolation-mode",
-      "-webkit-transition",
-      "-moz-transition",
-      "-ms-transition",
-      "-o-transition",
-      "transition",
-      "-webkit-transition-delay",
-      "-moz-transition-delay",
-      "-ms-transition-delay",
-      "-o-transition-delay",
-      "transition-delay",
-      "-webkit-transition-timing-function",
-      "-moz-transition-timing-function",
-      "-ms-transition-timing-function",
-      "-o-transition-timing-function",
-      "transition-timing-function",
-      "-webkit-transition-duration",
-      "-moz-transition-duration",
-      "-ms-transition-duration",
-      "-o-transition-duration",
-      "transition-duration",
-      "-webkit-transition-property",
-      "-moz-transition-property",
-      "-ms-transition-property",
-      "-o-transition-property",
-      "transition-property",
-      "-webkit-transform",
-      "-moz-transform",
-      "-ms-transform",
-      "-o-transform",
-      "transform",
-      "-webkit-transform-origin",
-      "-moz-transform-origin",
-      "-ms-transform-origin",
-      "-o-transform-origin",
-      "transform-origin",
-      "-webkit-animation",
-      "-moz-animation",
-      "-ms-animation",
-      "-o-animation",
-      "animation",
-      "-webkit-animation-name",
-      "-moz-animation-name",
-      "-ms-animation-name",
-      "-o-animation-name",
-      "animation-name",
-      "-webkit-animation-duration",
-      "-moz-animation-duration",
-      "-ms-animation-duration",
-      "-o-animation-duration",
-      "animation-duration",
-      "-webkit-animation-play-state",
-      "-moz-animation-play-state",
-      "-ms-animation-play-state",
-      "-o-animation-play-state",
-      "animation-play-state",
-      "-webkit-animation-timing-function",
-      "-moz-animation-timing-function",
-      "-ms-animation-timing-function",
-      "-o-animation-timing-function",
-      "animation-timing-function",
-      "-webkit-animation-delay",
-      "-moz-animation-delay",
-      "-ms-animation-delay",
-      "-o-animation-delay",
-      "animation-delay",
-      "-webkit-animation-iteration-count",
-      "-moz-animation-iteration-count",
-      "-ms-animation-iteration-count",
-      "-o-animation-iteration-count",
-      "animation-iteration-count",
-      "-webkit-animation-direction",
-      "-moz-animation-direction",
-      "-ms-animation-direction",
-      "-o-animation-direction",
-      "animation-direction"
-    ]
-  ]
-}

scss/_card.scss

@@ -53,13 +53,15 @@
   .card {
     > .list-group:first-child {
       .list-group-item:first-child {
-        border-radius: $card-border-radius $card-border-radius 0 0;
+        border-top-left-radius: $card-border-radius;
+        border-top-right-radius: $card-border-radius;
       }
     }
 
     > .list-group:last-child {
       .list-group-item:last-child {
-        border-radius: 0 0 $card-border-radius $card-border-radius;
+        border-bottom-right-radius: $card-border-radius;
+        border-bottom-left-radius: $card-border-radius;
       }
     }
   }

scss/_custom-forms.scss

@@ -218,8 +218,10 @@
   @include border-radius($custom-file-border-radius);
   @include box-shadow($custom-file-box-shadow);
 
-  &::after {
+  @each $lang, $text in map-get($custom-file-text, placeholder) {
-    content: $custom-file-placeholder;
+    &:lang(#{$lang})::after {
+      content: $text;
+    }
   }
 
   &::before {
@@ -233,9 +235,14 @@
     padding: $custom-file-padding-x $custom-file-padding-y;
     line-height: $custom-file-line-height;
     color: $custom-file-button-color;
-    content: $custom-file-button-label;
     background-color: $custom-file-button-bg;
     border: $custom-file-border-width solid $custom-file-border-color;
     @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
   }
+
+  @each $lang, $text in map-get($custom-file-text, button-label) {
+    &:lang(#{$lang})::before {
+      content: $text;
+    }
+  }
 }

scss/_forms.scss

@@ -16,6 +16,7 @@
   background-color: $input-bg;
   // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
   background-image: none;
+  background-clip: padding-box;
   border: $input-btn-border-width solid $input-border-color;
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius);

scss/_modal.scss

@@ -101,20 +101,6 @@
   text-align: right; // right align buttons
   border-top: 1px solid $modal-footer-border-color;
   @include clearfix(); // clear it in case folks use .pull-* classes on buttons
-
-  // Properly space out buttons
-  .btn + .btn {
-    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
-    margin-left: 5px;
-  }
-  // but override that for button groups
-  .btn-group .btn + .btn {
-    margin-left: -1px;
-  }
-  // and override it for block buttons as well
-  .btn-block + .btn-block {
-    margin-left: 0;
-  }
 }
 
 // Measure scrollbar width for padding body during modal show/hide

scss/_variables.scss

@@ -312,7 +312,7 @@ $input-bg:                       #fff !default;
 $input-bg-disabled:              $gray-lighter !default;
 
 $input-color:                    $gray !default;
-$input-border-color:             #ccc !default;
+$input-border-color:             rgba(0,0,0,.15) !default;
 $input-btn-border-width:         $border-width !default; // For form controls and buttons
 $input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
 
@@ -404,10 +404,16 @@ $custom-file-border-width:  $border-width !default;
 $custom-file-border-color:  #ddd !default;
 $custom-file-border-radius: $border-radius !default;
 $custom-file-box-shadow:    inset 0 .2rem .4rem rgba(0,0,0,.05) !default;
-$custom-file-placeholder:   "Choose file..." !default;
-$custom-file-button-label:  "Browse" !default;
 $custom-file-button-color:  $custom-file-color !default;
 $custom-file-button-bg:     #eee !default;
+$custom-file-text: (
+  placeholder: (
+    en: "Choose file..."
+  ),
+  button-label: (
+    en: "Browse"
+  )
+) !default;
 
 
 // Form validation icons