From 3007d4b4353fd0b8f3f65d660e19168e8400ee20 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Tue, 4 Dec 2018 21:22:12 +0100 Subject: [PATCH 01/23] Stretched link --- scss/_utilities.scss | 1 + scss/utilities/_stretched-link.scss | 19 ++++ site/_data/nav.yml | 1 + site/docs/4.1/utilities/stretched-link.md | 100 ++++++++++++++++++++++ 4 files changed, 121 insertions(+) create mode 100644 scss/utilities/_stretched-link.scss create mode 100644 site/docs/4.1/utilities/stretched-link.md diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 913fb852d58e..a5de31ba6a50 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -11,6 +11,7 @@ @import "utilities/screenreaders"; @import "utilities/shadows"; @import "utilities/sizing"; +@import "utilities/stretched-link"; @import "utilities/spacing"; @import "utilities/text"; @import "utilities/visibility"; diff --git a/scss/utilities/_stretched-link.scss b/scss/utilities/_stretched-link.scss new file mode 100644 index 000000000000..fb5066bf55dd --- /dev/null +++ b/scss/utilities/_stretched-link.scss @@ -0,0 +1,19 @@ +// +// Stretched link +// + +.stretched-link { + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + // Just in case `pointer-events: none` is set on a parent + pointer-events: auto; + content: ""; + // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color + background-color: rgba(0, 0, 0, 0); + } +} diff --git a/site/_data/nav.yml b/site/_data/nav.yml index 7b6ff7cd977e..3c101760742d 100644 --- a/site/_data/nav.yml +++ b/site/_data/nav.yml @@ -70,6 +70,7 @@ - title: Shadows - title: Sizing - title: Spacing + - title: Stretched link - title: Text - title: Vertical align - title: Visibility diff --git a/site/docs/4.1/utilities/stretched-link.md b/site/docs/4.1/utilities/stretched-link.md new file mode 100644 index 000000000000..53907ceee26d --- /dev/null +++ b/site/docs/4.1/utilities/stretched-link.md @@ -0,0 +1,100 @@ +--- +layout: docs +title: Stretched link +description: Easily make an element which contains a stretched link clickable. +group: utilities +--- + +Adding the `.stretched-link` class to a link will make the [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) of the `::after` pseudo element of the link clickable. In most cases, this means that an element with `position: relative;` which contains a link with the `.stretched-link` class is clickable. + +Cards are relative by default, so in this case you can safely add the `.stretched-link` class to a link in the card. + +{% capture example %} +
+ {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %} +
+
Card with stretched link
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+{% endcapture %} +{% include example.html content=example %} + +Media objects are not relative by default, we need to add the `.position-relative` here to prevent the link from stretching outside the media object. + +{% capture example %} +
+ {% include icons/placeholder.svg width="144" height="144" class="mr-3" text=" " title="Generic placeholder image" %} +
+
Media with stretched link
+

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

+ Go somewhere +
+
+{% endcapture %} +{% include example.html content=example %} + +Columns are relative by default, so if we want to stretch the link over a row, we need to add the `.position-static` class to column and add the `.position-relative` to the row. + +{% capture example %} +
+
+ {% include icons/placeholder.svg width="100%" height="200" class="w-100" text=" " title="Generic placeholder image" %} +
+
+
Columns with stretched link
+

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

+ Go somewhere +
+
+{% endcapture %} +{% include example.html content=example %} + +Multiple links can be added to elements with a stretched link, but their `z-index` must be increased to be become clickable. + +{% capture example %} +
+ {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %} +
+
Card with multiple links
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+

+ The whole card will be linked to this link +

+

+ This link will be unclickable, because the previous link is stretched over this link +

+

+ This link will be clickable because position: relative is added and the z-index is higher than the z-index of the ::after pseudo element of the stretched link +

+
+
+{% endcapture %} +{% include example.html content=example %} + +## Identifying the containing block + +If the stretched link doesn't seem to work, the [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block) will probably be the cause. The following CSS properties will make an element the containing block: + +- A `position` value other than `static` +- A `transform` or `perspective` value other than `none` +- A `will-change` value of `transform` or `perspective` +- A `filter` value other than `none` or a `will-change` value of `filter` (only works on Firefox) + +{% capture example %} +
+ {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %} +
+
Card with stretched links
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+

+ Stretched link will not work here, because position: relative is added to the link +

+

+ This stretched link will only be spread over the p-tag, because a transform is applied to it. +

+
+
+{% endcapture %} +{% include example.html content=example %} From 35caac013cef010da4c1b287dcfcd7ff23ffe541 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 15 Dec 2018 20:14:05 +0100 Subject: [PATCH 02/23] Copy change Co-Authored-By: MartijnCuppens --- site/docs/4.1/utilities/stretched-link.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/4.1/utilities/stretched-link.md b/site/docs/4.1/utilities/stretched-link.md index 53907ceee26d..992ec73fcecd 100644 --- a/site/docs/4.1/utilities/stretched-link.md +++ b/site/docs/4.1/utilities/stretched-link.md @@ -1,7 +1,7 @@ --- layout: docs title: Stretched link -description: Easily make an element which contains a stretched link clickable. +description: Make any HTML element or Bootstrap component clickable by "stretching" a nested link via CSS. group: utilities --- From abd5a5e4bd9cf73366b02fe2ceacb58464af17c4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 15 Dec 2018 20:14:42 +0100 Subject: [PATCH 03/23] Copy change Co-Authored-By: MartijnCuppens --- site/docs/4.1/utilities/stretched-link.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/4.1/utilities/stretched-link.md b/site/docs/4.1/utilities/stretched-link.md index 992ec73fcecd..d394445e5e40 100644 --- a/site/docs/4.1/utilities/stretched-link.md +++ b/site/docs/4.1/utilities/stretched-link.md @@ -5,7 +5,7 @@ description: Make any HTML element or Bootstrap component clickable by "stretchi group: utilities --- -Adding the `.stretched-link` class to a link will make the [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) of the `::after` pseudo element of the link clickable. In most cases, this means that an element with `position: relative;` which contains a link with the `.stretched-link` class is clickable. +Add `.stretched-link` to a link to make it's [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable. Cards are relative by default, so in this case you can safely add the `.stretched-link` class to a link in the card. From 210d49ec05897e3354cc6a0d2873d8413f033ce8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 15 Dec 2018 20:15:03 +0100 Subject: [PATCH 04/23] Update site/docs/4.1/utilities/stretched-link.md Co-Authored-By: MartijnCuppens --- site/docs/4.1/utilities/stretched-link.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/4.1/utilities/stretched-link.md b/site/docs/4.1/utilities/stretched-link.md index d394445e5e40..f58299816cb7 100644 --- a/site/docs/4.1/utilities/stretched-link.md +++ b/site/docs/4.1/utilities/stretched-link.md @@ -21,7 +21,7 @@ Cards are relative by default, so in this case you can safely add the `.stretche {% endcapture %} {% include example.html content=example %} -Media objects are not relative by default, we need to add the `.position-relative` here to prevent the link from stretching outside the media object. +Media objects do not have `position: relative` by default, so we need to add the `.position-relative` here to prevent the link from stretching outside the media object. {% capture example %}
From 470145bdcab0c16844111d16a5189a6b8cfc8ae4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 15 Dec 2018 20:17:45 +0100 Subject: [PATCH 05/23] Update site/docs/4.1/utilities/stretched-link.md Co-Authored-By: MartijnCuppens --- site/docs/4.1/utilities/stretched-link.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/4.1/utilities/stretched-link.md b/site/docs/4.1/utilities/stretched-link.md index f58299816cb7..95224bb5b967 100644 --- a/site/docs/4.1/utilities/stretched-link.md +++ b/site/docs/4.1/utilities/stretched-link.md @@ -35,7 +35,7 @@ Media objects do not have `position: relative` by default, so we need to add the {% endcapture %} {% include example.html content=example %} -Columns are relative by default, so if we want to stretch the link over a row, we need to add the `.position-static` class to column and add the `.position-relative` to the row. +Columns are `position: relative` by default, so clickable columns only require the `.stretched-link` class on a link. However, stretching a link over an entire `.row` requires `.position-static` on the column and `.position-relative` on the row. {% capture example %}
From 236c7803cba37501580755dfe7a020fcf6aa0565 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 15 Dec 2018 20:18:55 +0100 Subject: [PATCH 06/23] Update site/docs/4.1/utilities/stretched-link.md Co-Authored-By: MartijnCuppens --- site/docs/4.1/utilities/stretched-link.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/4.1/utilities/stretched-link.md b/site/docs/4.1/utilities/stretched-link.md index 95224bb5b967..c0c8940e10cb 100644 --- a/site/docs/4.1/utilities/stretched-link.md +++ b/site/docs/4.1/utilities/stretched-link.md @@ -7,7 +7,7 @@ group: utilities Add `.stretched-link` to a link to make it's [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable. -Cards are relative by default, so in this case you can safely add the `.stretched-link` class to a link in the card. +Cards have `position: relative` by default in Bootstrap, so in this case you can safely add the `.stretched-link` class to a link in the card without any other HTML changes. {% capture example %}
From f0e5cc3f417191f5823f426b1ae071c78f427475 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 21 Dec 2018 21:10:40 -0800 Subject: [PATCH 07/23] Add a notes about multiple links/targets, remove multiple link example --- site/docs/4.1/utilities/stretched-link.md | 24 ++--------------------- 1 file changed, 2 insertions(+), 22 deletions(-) diff --git a/site/docs/4.1/utilities/stretched-link.md b/site/docs/4.1/utilities/stretched-link.md index c0c8940e10cb..5347307b53d7 100644 --- a/site/docs/4.1/utilities/stretched-link.md +++ b/site/docs/4.1/utilities/stretched-link.md @@ -9,6 +9,8 @@ Add `.stretched-link` to a link to make it's [containing block](https://develope Cards have `position: relative` by default in Bootstrap, so in this case you can safely add the `.stretched-link` class to a link in the card without any other HTML changes. +Multiple links and tap targets are not recommended with stretched links. However, some `position` and `z-index` styles can help should this be required. + {% capture example %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %} @@ -51,28 +53,6 @@ Columns are `position: relative` by default, so clickable columns only require t {% endcapture %} {% include example.html content=example %} -Multiple links can be added to elements with a stretched link, but their `z-index` must be increased to be become clickable. - -{% capture example %} -
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %} -
-
Card with multiple links
-

Some quick example text to build on the card title and make up the bulk of the card's content.

-

- The whole card will be linked to this link -

-

- This link will be unclickable, because the previous link is stretched over this link -

-

- This link will be clickable because position: relative is added and the z-index is higher than the z-index of the ::after pseudo element of the stretched link -

-
-
-{% endcapture %} -{% include example.html content=example %} - ## Identifying the containing block If the stretched link doesn't seem to work, the [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block) will probably be the cause. The following CSS properties will make an element the containing block: From dee3ab427cb9b73639e38a60e1cbb59dc99fedf4 Mon Sep 17 00:00:00 2001 From: Jesse Mandel Date: Sat, 22 Dec 2018 07:09:51 -0800 Subject: [PATCH 08/23] Update nuspec and build script (#27894) Update nuspec and build script to support `` instead of the deprecated `` --- nuget/MyGet.ps1 | 9 +++++---- nuget/bootstrap.nuspec | 4 +++- nuget/bootstrap.sass.nuspec | 4 +++- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/nuget/MyGet.ps1 b/nuget/MyGet.ps1 index 71110b5c1e3d..e1e990467080 100644 --- a/nuget/MyGet.ps1 +++ b/nuget/MyGet.ps1 @@ -1,16 +1,17 @@ # set env vars usually set by MyGet (enable for local testing) #$env:SourcesPath = '..' -#$env:NuGet = "./nuget.exe" #https://dist.nuget.org/win-x86-commandline/latest/nuget.exe +#$env:NuGet = "./nuget.exe" # https://dist.nuget.org/win-x86-commandline/latest/nuget.exe $nuget = $env:NuGet +Copy-Item $env:SourcesPath\LICENSE $env:SourcesPath\LICENSE.txt # has to be .txt extension, don't check in + # parse the version number out of package.json $bsversionParts = ((Get-Content $env:SourcesPath\package.json) -join "`n" | ConvertFrom-Json).version.split('-', 2) # split the version on the '-' $bsversion = $bsversionParts[0] -if ($bsversionParts.Length -gt 1) -{ - $bsversion += '-' + $bsversionParts[1].replace('.', '').replace('-', '_') # strip out invalid chars from the PreRelease part +if ($bsversionParts.Length -gt 1) { + $bsversion += '-' + $bsversionParts[1].replace('.', '').replace('-', '_') # strip out invalid chars from the PreRelease part } # create packages diff --git a/nuget/bootstrap.nuspec b/nuget/bootstrap.nuspec index 1af72d399f84..7f31af1a8193 100644 --- a/nuget/bootstrap.nuspec +++ b/nuget/bootstrap.nuspec @@ -12,7 +12,7 @@ en-us https://getbootstrap.com/ https://getbootstrap.com/docs/4.2/assets/img/favicons/apple-touch-icon.png - https://github.com/twbs/bootstrap/blob/master/LICENSE + LICENSE.txt Copyright 2017-2018 false @@ -22,6 +22,8 @@ css mobile-first responsive front-end framework web + + diff --git a/nuget/bootstrap.sass.nuspec b/nuget/bootstrap.sass.nuspec index 0e71eb6f7cc4..1793d58bf9ce 100644 --- a/nuget/bootstrap.sass.nuspec +++ b/nuget/bootstrap.sass.nuspec @@ -12,7 +12,7 @@ en-us https://getbootstrap.com/ https://getbootstrap.com/docs/4.2/assets/img/favicons/apple-touch-icon.png - https://github.com/twbs/bootstrap/blob/master/LICENSE + LICENSE.txt Copyright 2017-2018 false @@ -22,6 +22,8 @@ css sass mobile-first responsive front-end framework web + + From 74987d9591e2eda138a39f5d2d44418078ca6ab5 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 22 Dec 2018 21:58:06 +0200 Subject: [PATCH 09/23] Add two new meta tags for Algolia (#27902) --- site/_includes/header.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/_includes/header.html b/site/_includes/header.html index 83d051fa807b..6e91a1f42909 100644 --- a/site/_includes/header.html +++ b/site/_includes/header.html @@ -4,6 +4,9 @@ + + + {%- if page.title -%} {{ page.title | smartify }} ยท {{ site.title | smartify }} From 3bdb363495e79e71d7bcc1e03a2879cce60934ae Mon Sep 17 00:00:00 2001 From: XhmikosR <xhmikosr@gmail.com> Date: Sat, 22 Dec 2018 22:07:37 +0200 Subject: [PATCH 10/23] Remove obsolete redirects in examples. (#27897) --- site/docs/4.2/examples/index.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/site/docs/4.2/examples/index.html b/site/docs/4.2/examples/index.html index d47151252491..28f94dfb544a 100644 --- a/site/docs/4.2/examples/index.html +++ b/site/docs/4.2/examples/index.html @@ -4,8 +4,6 @@ description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts. redirect_from: - "/examples/" - - "/docs/4.0/examples/tooltip-viewport/" - - "/docs/4.1/examples/tooltip-viewport/" --- {% for entry in site.data.examples %} From 46f86df0bb1d4a6029d59ef52c1fecbe3b79f3f8 Mon Sep 17 00:00:00 2001 From: XhmikosR <xhmikosr@gmail.com> Date: Sat, 22 Dec 2018 23:18:34 +0200 Subject: [PATCH 11/23] bootstrap-stack.svg: remove unneeded space. --- site/_includes/icons/bootstrap-stack.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/_includes/icons/bootstrap-stack.svg b/site/_includes/icons/bootstrap-stack.svg index 6b3535449000..91ef8c376d7f 100644 --- a/site/_includes/icons/bootstrap-stack.svg +++ b/site/_includes/icons/bootstrap-stack.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewBox="0 0 1024 860" focusable="false" role="img"><title>Bootstrap \ No newline at end of file +Bootstrap From 6a5a1b073d6151f49cded55ea45b4c5a3df858db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Dec 2018 22:20:26 -0800 Subject: [PATCH 12/23] move to 4.2 --- site/docs/{4.1 => 4.2}/utilities/stretched-link.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename site/docs/{4.1 => 4.2}/utilities/stretched-link.md (100%) diff --git a/site/docs/4.1/utilities/stretched-link.md b/site/docs/4.2/utilities/stretched-link.md similarity index 100% rename from site/docs/4.1/utilities/stretched-link.md rename to site/docs/4.2/utilities/stretched-link.md From 39b14c980678279c20aa63591bebdf0f974d7a71 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sun, 23 Dec 2018 08:11:11 +0100 Subject: [PATCH 13/23] Blacklist border-radius property (use mixin instead) (#27900) --- .stylelintrc | 9 ++++++++- scss/_card.scss | 14 ++++++++------ scss/_custom-forms.scss | 9 ++++----- scss/_forms.scss | 8 +------- scss/_reboot.scss | 1 + scss/_spinners.scss | 2 ++ scss/mixins/_border-radius.scss | 6 +++++- scss/mixins/_buttons.scss | 6 +----- scss/utilities/_borders.scss | 2 +- site/docs/4.2/assets/scss/_ads.scss | 2 +- site/docs/4.2/assets/scss/_brand.scss | 4 ++-- site/docs/4.2/assets/scss/_callouts.scss | 4 ++-- site/docs/4.2/assets/scss/_clipboard-js.scss | 2 +- site/docs/4.2/assets/scss/_component-examples.scss | 6 +++--- 14 files changed, 40 insertions(+), 35 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index dac9edbf4386..fce97867fc27 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -261,7 +261,14 @@ "fill", "stroke" ], - "property-blacklist": ["transition"], + "property-blacklist": [ + "border-radius", + "border-top-left-radius", + "border-top-right-radius", + "border-bottom-right-radius", + "border-bottom-left-radius", + "transition" + ], "property-no-vendor-prefix": true, "rule-empty-line-before": null, "scss/at-function-named-arguments": "never", diff --git a/scss/_card.scss b/scss/_card.scss index 377bec0f1a43..bbdb15bce5e0 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -200,10 +200,12 @@ .card-img-top, .card-header { + // stylelint-disable-next-line property-blacklist border-top-right-radius: 0; } .card-img-bottom, .card-footer { + // stylelint-disable-next-line property-blacklist border-bottom-right-radius: 0; } } @@ -213,10 +215,12 @@ .card-img-top, .card-header { + // stylelint-disable-next-line property-blacklist border-top-left-radius: 0; } .card-img-bottom, .card-footer { + // stylelint-disable-next-line property-blacklist border-bottom-left-radius: 0; } } @@ -283,24 +287,22 @@ &:not(:first-of-type) { .card-header:first-child { - border-radius: 0; + @include border-radius(0); } &:not(:last-of-type) { border-bottom: 0; - border-radius: 0; + @include border-radius(0); } } &:first-of-type { border-bottom: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + @include border-bottom-radius(0); } &:last-of-type { - border-top-left-radius: 0; - border-top-right-radius: 0; + @include border-top-radius(0); } .card-header { diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index e6bf7ad6f53f..985dddba42db 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -144,6 +144,7 @@ .custom-radio { .custom-control-label::before { + // stylelint-disable-next-line property-blacklist border-radius: $custom-radio-indicator-border-radius; } @@ -173,6 +174,7 @@ left: -($custom-switch-width + $custom-control-gutter); width: $custom-switch-width; pointer-events: all; + // stylelint-disable-next-line property-blacklist border-radius: $custom-switch-indicator-border-radius; } @@ -182,6 +184,7 @@ width: $custom-switch-indicator-size; height: $custom-switch-indicator-size; background-color: $custom-control-indicator-border-color; + // stylelint-disable-next-line property-blacklist border-radius: $custom-switch-indicator-border-radius; @include transition(transform .15s ease-in-out, $custom-forms-transition); } @@ -220,11 +223,7 @@ background: $custom-select-background; background-color: $custom-select-bg; border: $custom-select-border-width solid $custom-select-border-color; - @if $enable-rounded { - border-radius: $custom-select-border-radius; - } @else { - border-radius: 0; - } + @include border-radius($custom-select-border-radius, 0); @include box-shadow($custom-select-box-shadow); appearance: none; diff --git a/scss/_forms.scss b/scss/_forms.scss index 2db6d834cd24..92175b09027e 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -18,13 +18,7 @@ border: $input-border-width solid $input-border-color; // Note: This has no effect on `s in CSS. - @if $enable-rounded { - // Manually use the if/else instead of the mixin to account for iOS override - border-radius: $input-border-radius; - } @else { - // Otherwise undo the iOS default - border-radius: 0; - } + @include border-radius($input-border-radius, 0); @include box-shadow($input-box-shadow); @include transition($input-transition); diff --git a/scss/_reboot.scss b/scss/_reboot.scss index d4167cc8ecf5..10e2273c4175 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -297,6 +297,7 @@ label { // // Details at https://github.com/twbs/bootstrap/issues/24093 button { + // stylelint-disable-next-line property-blacklist border-radius: 0; } diff --git a/scss/_spinners.scss b/scss/_spinners.scss index ed7e2bc65005..364a5c1a65f7 100644 --- a/scss/_spinners.scss +++ b/scss/_spinners.scss @@ -13,6 +13,7 @@ vertical-align: text-bottom; border: $spinner-border-width solid currentColor; border-right-color: transparent; + // stylelint-disable-next-line property-blacklist border-radius: 50%; animation: spinner-border .75s linear infinite; } @@ -42,6 +43,7 @@ height: $spinner-height; vertical-align: text-bottom; background-color: currentColor; + // stylelint-disable-next-line property-blacklist border-radius: 50%; opacity: 0; animation: spinner-grow .75s linear infinite; diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss index 2024febcfa82..f32feca90c99 100644 --- a/scss/mixins/_border-radius.scss +++ b/scss/mixins/_border-radius.scss @@ -1,9 +1,13 @@ +// stylelint-disable property-blacklist // Single side border-radius -@mixin border-radius($radius: $border-radius) { +@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @if $enable-rounded { border-radius: $radius; } + @else if $fallback-border-radius != false { + border-radius: $fallback-border-radius; + } } @mixin border-top-radius($radius) { diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 3e1e2c09d059..64cc482f6950 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -103,9 +103,5 @@ font-size: $font-size; line-height: $line-height; // Manually declare to provide an override to the browser default - @if $enable-rounded { - border-radius: $border-radius; - } @else { - border-radius: 0; - } + @include border-radius($border-radius, 0); } diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index fb759c9ba017..78c9cb5b2d87 100644 --- a/scss/utilities/_borders.scss +++ b/scss/utilities/_borders.scss @@ -1,4 +1,4 @@ -// stylelint-disable declaration-no-important +// stylelint-disable property-blacklist, declaration-no-important // // Border diff --git a/site/docs/4.2/assets/scss/_ads.scss b/site/docs/4.2/assets/scss/_ads.scss index 375a9e01fa38..c207f1682fbd 100644 --- a/site/docs/4.2/assets/scss/_ads.scss +++ b/site/docs/4.2/assets/scss/_ads.scss @@ -23,7 +23,7 @@ @include media-breakpoint-up(sm) { max-width: 330px; - border-radius: 4px; + @include border-radius(4px); } } diff --git a/site/docs/4.2/assets/scss/_brand.scss b/site/docs/4.2/assets/scss/_brand.scss index c8c5c2d56626..d7d9f1f09ba5 100644 --- a/site/docs/4.2/assets/scss/_brand.scss +++ b/site/docs/4.2/assets/scss/_brand.scss @@ -10,7 +10,7 @@ overflow: hidden; color: $bd-purple; background-color: #f9f9f9; - border-radius: .25rem; + @include border-radius; .inverse { color: $white; @@ -79,7 +79,7 @@ height: 4rem; margin-right: .25rem; margin-left: .25rem; - border-radius: .25rem; + @include border-radius; @include media-breakpoint-up(md) { width: 6rem; diff --git a/site/docs/4.2/assets/scss/_callouts.scss b/site/docs/4.2/assets/scss/_callouts.scss index b11e370c6418..a10fc05b8d77 100644 --- a/site/docs/4.2/assets/scss/_callouts.scss +++ b/site/docs/4.2/assets/scss/_callouts.scss @@ -8,7 +8,7 @@ margin-bottom: 1.25rem; border: 1px solid #eee; border-left-width: .25rem; - border-radius: .25rem; + @include border-radius; h4 { margin-top: 0; @@ -20,7 +20,7 @@ } code { - border-radius: .25rem; + @include border-radius; } + .bd-callout { diff --git a/site/docs/4.2/assets/scss/_clipboard-js.scss b/site/docs/4.2/assets/scss/_clipboard-js.scss index 001a6b01e29e..0cf39964464a 100644 --- a/site/docs/4.2/assets/scss/_clipboard-js.scss +++ b/site/docs/4.2/assets/scss/_clipboard-js.scss @@ -28,7 +28,7 @@ cursor: pointer; background-color: transparent; border: 0; - border-radius: .25rem; + @include border-radius; &:hover { color: $white; diff --git a/site/docs/4.2/assets/scss/_component-examples.scss b/site/docs/4.2/assets/scss/_component-examples.scss index 1235695b2cde..c508764203de 100644 --- a/site/docs/4.2/assets/scss/_component-examples.scss +++ b/site/docs/4.2/assets/scss/_component-examples.scss @@ -87,7 +87,7 @@ height: 3rem; margin-bottom: .5rem; background-color: lighten($blue, 50%); - border-radius: .25rem; + @include border-radius; } .bd-example-container-sidebar { @@ -95,14 +95,14 @@ width: 4rem; height: 8rem; background-color: lighten($blue, 25%); - border-radius: .25rem; + @include border-radius; } .bd-example-container-body { height: 8rem; margin-right: 4.5rem; background-color: lighten($bd-purple, 25%); - border-radius: .25rem; + @include border-radius; } .bd-example-container-fluid { From 81e35985b8edf38422d2057f903d9134a1083e17 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sun, 23 Dec 2018 08:19:07 +0100 Subject: [PATCH 14/23] Simplify card group css (#27901) --- scss/_card.scss | 28 ++-------------------------- 1 file changed, 2 insertions(+), 26 deletions(-) diff --git a/scss/_card.scss b/scss/_card.scss index bbdb15bce5e0..9ed6ee129a09 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -195,7 +195,7 @@ // Handle rounded corners @if $enable-rounded { - &:first-child { + &:not(:last-child) { @include border-right-radius(0); .card-img-top, @@ -210,7 +210,7 @@ } } - &:last-child { + &:not(:first-child) { @include border-left-radius(0); .card-img-top, @@ -224,30 +224,6 @@ border-bottom-left-radius: 0; } } - - &:only-child { - @include border-radius($card-border-radius); - - .card-img-top, - .card-header { - @include border-top-radius($card-border-radius); - } - .card-img-bottom, - .card-footer { - @include border-bottom-radius($card-border-radius); - } - } - - &:not(:first-child):not(:last-child):not(:only-child) { - @include border-radius(0); - - .card-img-top, - .card-img-bottom, - .card-header, - .card-footer { - @include border-radius(0); - } - } } } } From 3c88ed70694a8994993a33a4155a098595915e8e Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 23 Dec 2018 13:58:58 +0200 Subject: [PATCH 15/23] Fix 4:3 embed (#27910) --- scss/_variables.scss | 2 +- site/docs/4.2/utilities/embed.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 26a2df81d642..830c97769239 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -264,7 +264,7 @@ $embed-responsive-aspect-ratios: join( ( (21 9), (16 9), - (3 4), + (4 3), (1 1), ), $embed-responsive-aspect-ratios diff --git a/site/docs/4.2/utilities/embed.md b/site/docs/4.2/utilities/embed.md index de4105fb8267..1f6868074678 100644 --- a/site/docs/4.2/utilities/embed.md +++ b/site/docs/4.2/utilities/embed.md @@ -55,7 +55,7 @@ Within `_variables.scss`, you can change the aspect ratios you want to use. Here $embed-responsive-aspect-ratios: ( (21 9), (16 9), - (3 4), + (4 3), (1 1) ) !default; {% endhighlight %} From 7d5cb2df3ad1d3438c0753c78203bca54f28d5a8 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 23 Dec 2018 14:12:13 +0200 Subject: [PATCH 16/23] versions: sort from newer to older. (#27898) --- site/docs/versions.html | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/site/docs/versions.html b/site/docs/versions.html index f883f52854fd..4f8f4ea3ac84 100644 --- a/site/docs/versions.html +++ b/site/docs/versions.html @@ -9,18 +9,19 @@

{{ release.group }}

{{ release.description }}

- {% for version in release.versions %} + {% assign versions = release.versions | reverse %} + {% for version in versions %} {% if forloop.first %}
{% endif %} - {% if version.v == site.docs_version %} - - {{ version.v }} - Latest - - {% else %} - - {{ version.v }} - - {% endif %} + {% if version.v == site.docs_version %} + + {{ version.v }} + Latest + + {% else %} + + {{ version.v }} + + {% endif %} {% if forloop.last %}
{% endif %} {% endfor %}
From 3bd9fb3649a233f0a0c26b8a6cb5209d220a7528 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Sun, 23 Dec 2018 13:30:35 +0100 Subject: [PATCH 17/23] getSelectorFromElement return null on bad selectors (#27912) --- js/src/util.js | 6 +++++- js/tests/unit/modal.js | 45 ++++++++++++++++++++---------------------- js/tests/unit/util.js | 13 ++++++------ 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/js/src/util.js b/js/src/util.js index 0d434c4c515c..c3e23e81747b 100644 --- a/js/src/util.js +++ b/js/src/util.js @@ -82,7 +82,11 @@ const Util = { selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '' } - return selector && document.querySelector(selector) ? selector : null + try { + return document.querySelector(selector) ? selector : null + } catch (err) { + return null + } }, getTransitionDurationFromElement(element) { diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js index 782a86eea09f..4d7682aaa7db 100644 --- a/js/tests/unit/modal.js +++ b/js/tests/unit/modal.js @@ -619,40 +619,37 @@ $(function () { assert.expect(1) var done = assert.async() - try { - var $toggleBtn = $('