From cbabd8ff0d7fd7490fa8afeda203b56702216628 Mon Sep 17 00:00:00 2001 From: Robin D'Arcy Date: Sat, 22 Jun 2019 14:21:20 +0100 Subject: [PATCH 1/4] =?UTF-8?q?Docs=20=E2=80=93=20update=20extend/approach?= =?UTF-8?q?.md=20(#28941)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/content/docs/4.3/extend/approach.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/4.3/extend/approach.md b/site/content/docs/4.3/extend/approach.md index 77f9b53eb..2ba15ef18 100644 --- a/site/content/docs/4.3/extend/approach.md +++ b/site/content/docs/4.3/extend/approach.md @@ -51,9 +51,9 @@ There are two `z-index` scales in Bootstrap—elements within a component and ov ### Overlay components -Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest `z-index`, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own `z-index` scale that begins at `1000`. This starting number is random and serves as a small buffer between our styles and your project's custom styles. +Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest `z-index`, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own `z-index` scale that begins at `1000`. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project's custom styles. -Each overlay component increases it's `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal's action), so we put that above our navbars. +Each overlay component increases its `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal's action), so we put that above our navbars. Learn more about this in our [`z-index` layout page]({{< docsref "/layout/overview#z-index" >}}). From ac6eefd227374df0f4d7494e1119c66a443e502c Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sat, 22 Jun 2019 16:21:11 +0200 Subject: [PATCH 2/4] Change invalid icon from cross to exclamation mark (#28944) The cross icon was confusing since some browsers use it as a reset button. --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 716b55136..9eea07d39 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -655,7 +655,7 @@ $form-feedback-invalid-color: theme-color("danger") !default; $form-feedback-icon-valid-color: $form-feedback-valid-color !default; $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default; $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; -$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default; +$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg' stroke='#{$form-feedback-icon-invalid-color}' fill='none'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='M5.8 3.6h.4L6 6.5z' stroke-linejoin='round'/%3e%3ccircle cx='6' cy='8.2' r='.1'/%3e%3c/svg%3e"), "#", "%23") !default; $form-validation-states: () !default; // stylelint-disable-next-line scss/dollar-variable-default From 39fc46fb71544d70b374d969c2acdadb16f9d89c Mon Sep 17 00:00:00 2001 From: Jonathan Hawkins Date: Thu, 20 Jun 2019 21:47:24 -0400 Subject: [PATCH 3/4] Combine duplicate documentation examples into one to fix the confusing text. fixes issue #28892 --- site/content/docs/4.3/layout/grid.md | 32 ++++++++-------------------- 1 file changed, 9 insertions(+), 23 deletions(-) diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md index 0da95311f..1cd169770 100644 --- a/site/content/docs/4.3/layout/grid.md +++ b/site/content/docs/4.3/layout/grid.md @@ -149,17 +149,21 @@ For example, here are two grid layouts that apply to every device and viewport, {{< /example >}} -Equal-width columns can be broken into multiple lines, but there was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if you're up-to-date. +### Equal-width multi-line + +Create equal-width columns that span multiple lines by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{< docsref "/utilities/display" >}}). + +There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if you're up-to-date.
{{< example >}}
-
Column
-
Column
+
col
+
col
-
Column
-
Column
+
col
+
col
{{< /example >}} @@ -231,24 +235,6 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o {{< /example >}}
-### Equal-width multi-row - -Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{< docsref "/utilities/display" >}}). - -
-{{< example >}} -
-
-
col
-
col
-
-
col
-
col
-
-
-{{< /example >}} -
- ## Responsive classes Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit. From 2fb6ccf95183cef502445a77610a27c9dc8390b2 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 22 Jun 2019 17:42:41 +0300 Subject: [PATCH 4/4] Minor wording changes. --- site/content/docs/4.3/layout/grid.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md index 1cd169770..3d914e877 100644 --- a/site/content/docs/4.3/layout/grid.md +++ b/site/content/docs/4.3/layout/grid.md @@ -151,9 +151,9 @@ For example, here are two grid layouts that apply to every device and viewport, ### Equal-width multi-line -Create equal-width columns that span multiple lines by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{< docsref "/utilities/display" >}}). +Create equal-width columns that span multiple lines by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing `.w-100` with some [responsive display utilities]({{< docsref "/utilities/display" >}}). -There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if you're up-to-date. +There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if your target browsers don't fall into the buggy versions.
{{< example >}}