From bc33653d66f27b1aebd1ae86b3ec5d84383be433 Mon Sep 17 00:00:00 2001
From: Christian Oliff <1212885+coliff@users.noreply.github.com>
Date: Thu, 8 Sep 2022 16:55:39 +0900
Subject: [PATCH] v521 update
---
.stylelintrc => .stylelintrc.json | 6 +---
README.md | 4 ++-
css/bootstrap-ie11.css | 13 +++++++
css/bootstrap-ie11.css.map | 2 +-
css/bootstrap-ie11.min.css | 2 +-
css/bootstrap-ie11.min.css.map | 2 +-
package-lock.json | 4 +--
package.json | 3 +-
scss/_accordion.scss | 15 ++++++++
scss/bootstrap-ie11.scss | 3 +-
tests/.htmlhintrc | 4 +--
tests/index.html | 60 ++++++++++++++++++++++++++++---
12 files changed, 98 insertions(+), 20 deletions(-)
rename .stylelintrc => .stylelintrc.json (76%)
create mode 100644 scss/_accordion.scss
diff --git a/.stylelintrc b/.stylelintrc.json
similarity index 76%
rename from .stylelintrc
rename to .stylelintrc.json
index b77bcbb..7b316ce 100644
--- a/.stylelintrc
+++ b/.stylelintrc.json
@@ -4,11 +4,7 @@
"declaration-no-important": null,
"no-invalid-position-at-import-rule": null,
"number-leading-zero": null,
- "property-disallowed-list": [
- "gap",
- "text-size-adjust",
- "will-change"
- ],
+ "property-disallowed-list": ["gap", "text-size-adjust", "will-change"],
"property-no-vendor-prefix": null,
"selector-max-type": null,
"selector-max-universal": null,
diff --git a/README.md b/README.md
index 0e52b68..b6dc08c 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ If you'd prefer to load the bootstrap-ie11 CSS without JavaScript you could use
The CSS can be loaded via a CDN:
```html
-
+
```
## FAQS
@@ -65,6 +65,7 @@ The CSS can be loaded via a CDN:
- Polyfill for CSS custom properties ([ie11CustomProperties](https://github.com/nuxodin/ie11CustomProperties))
- Polyfill to fix most JavaScript components ([Polyfill.io](https://polyfill.io/v3/))
- Polyfill to fix tabs ([element-qsa-scope polyfill](https://www.npmjs.com/package/element-qsa-scope))
+- Fixes for Accordion button icons
### Known Issues
@@ -73,6 +74,7 @@ The CSS can be loaded via a CDN:
- SVG images with `.img-fluid` are sometimes disproportionately sized. To fix this, add `width: 100%;` or `.w-100` where necessary. This fix improperly sizes other image formats, so this isn't applied automatically.
- There is a slight delay before the ie11CustomProperties polyfill works its magic. Consider adding `body{font-family:"Segoe UI", Arial, sans-serif;}` to your IE11-only stylesheet so there isn't a delay in the text displaying.
- View a list of known issues at [https://github.com/coliff/bootstrap-ie11/issues](https://github.com/coliff/bootstrap-ie11/issues).
+- From Bootstrap 5.2 onwards, CSS custom properties are used extensively which can cause issues with the ie11CustomProperties polyfill.
### How can I test this?
diff --git a/css/bootstrap-ie11.css b/css/bootstrap-ie11.css
index 9e97d3f..f8a458c 100644
--- a/css/bootstrap-ie11.css
+++ b/css/bootstrap-ie11.css
@@ -414,6 +414,19 @@ input {
.card-img-bottom {
flex-shrink: 0;
}
+ .accordion-button:not(.collapsed)::after {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+ transform: rotate(-180deg);
+ }
+ .accordion-button::after {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+ transition: transform 0.2s ease-in-out;
+ }
+ .accordion-flush .accordion-item,
+.accordion-flush .accordion-item .accordion-button,
+.accordion-flush .accordion-item .accordion-button.collapsed {
+ border-radius: 0 !important;
+ }
.modal-dialog-scrollable {
display: flex;
}
diff --git a/css/bootstrap-ie11.css.map b/css/bootstrap-ie11.css.map
index 53d7c5f..47a7a5b 100644
--- a/css/bootstrap-ie11.css.map
+++ b/css/bootstrap-ie11.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/bootstrap-ie11.scss","../scss/_reboot.scss","../scss/_tables.scss","../scss/_utilities.scss","../scss/_breadcrumb.scss","../scss/_buttons.scss","../scss/forms/_form-check.scss","../scss/forms/_form-control.scss","../scss/forms/_form-floating-labels.scss","../scss/forms/_form-range.scss","../scss/forms/_form-select.scss","../scss/_card.scss","../scss/_modal.scss","../scss/_progress.scss","../scss/_list-group.scss","../scss/_close.scss","../scss/_carousel.scss","../scss/_tooltip.scss","../scss/helpers/_ratio.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;ECJA;IACE;;EAIF;IACE;;EAGF;IACE;;EAGF;AAAA;IAEE;;EAKF;IACE;IACA;;EAGF;IAGE;;EAIF;IACE;;EAGF;IACE;;ECvCF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EChCF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAIF;IACE;;EAGF;IACE;;EAGF;IACE;;EAIF;IACE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAIF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAIF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAIF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAIF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAIF;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAIF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAIF;IACE;;EAKF;IACE;;ECrSF;IACE;;EAGF;IACE;;ECLF;IACE;;EAGF;IACE;;EAGF;AAAA;IAEE;;EAGF;AAAA;AAAA;IAGE;IACA;;EAGF;AAAA;AAAA;IAGE;IACA;;ECnBF;IACE;IACA;;EAIF;IACE;IACA;IACA;;EAIF;IACE;;EAGF;IACE;IACA;;EAOF;AAAA;IAEE;;EAGF;IACE;;ECrCF;IACE;IACA;;EAKF;IACE;;EAGF;IACE;;ECZF;IACE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;AAAA;AAAA;IAGE;;EAGF;IACE;IACA;;EAGF;AAAA;AAAA;IAGE;IACA;IACA;IACA;IACA;;EChCF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,YACE;IAGF;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EC9CF;IACE;IACA;;ECFF;IAGE;;EAGF;AAAA;AAAA;IAGE;;ECTF;IACE;;EAGF;IACE;;EAIF;IACE;IACA;IACA;;EAIF;IACE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAIF;IACE;IACA;;ECjCF;IACE;;ECDF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;ECpCF;IACE;;ECCF;IACE;;EAIF;IACE;;ECPF;AAAA;IAEE;IACA;;ECLF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE","file":"bootstrap-ie11.css","sourcesContent":["/*!\n * Bootstrap for IE11 v5.2.0 (https://github.com/coliff/bootstrap-ie11)\n * Copyright 2022 C.Oliff\n * Licensed under MIT (https://github.com/coliff/bootstrap-ie11/blob/main/LICENSE)\n */\n\n@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n @import \"reboot\";\n @import \"tables\";\n @import \"utilities\";\n @import \"breadcrumb\";\n @import \"buttons\";\n @import \"forms/form-check\";\n @import \"forms/form-control\";\n @import \"forms/form-floating-labels\";\n @import \"forms/form-range\";\n @import \"forms/form-select\";\n @import \"card\";\n @import \"modal\";\n @import \"progress\";\n @import \"list-group\";\n @import \"close\";\n @import \"carousel\";\n @import \"tooltip\";\n @import \"helpers/ratio\";\n}\n","// Workaround for the SVG overflow bug.\n// See https://github.com/twbs/bootstrap/issues/26878\nsvg {\n overflow: hidden;\n}\n\n// Remove the default vertical scrollbar\ntextarea {\n overflow: auto;\n}\n\nhr {\n overflow: visible;\n}\n\nbutton,\ninput {\n overflow: visible;\n}\n\n// 1. Correct the color inheritance from `fieldset` elements\n// 2. Correct the text wrapping\nlegend {\n color: inherit;\n white-space: normal;\n}\n\npre {\n // Disable auto-hiding scrollbar to avoid overlap,\n // making it impossible to interact with the content\n -ms-overflow-style: scrollbar;\n}\n\n// Add the correct display for template & main\ntemplate {\n display: none;\n}\n\nmain {\n display: block;\n}\n",".table > :not(caption) > * > * {\r\n box-shadow: none !important;\r\n}\r\n\r\n.table.table-striped:not(.table-dark) > tbody > tr:nth-child(odd) > * {\r\n background-color: rgba(0 0 0 / 5%) !important;\r\n}\r\n\r\n.table-dark.table-striped > :not(caption) > *:nth-child(odd) > * {\r\n opacity: 0.9;\r\n}\r\n\r\n.table-dark.table-striped > thead > tr > th {\r\n opacity: 1 !important;\r\n}\r\n\r\n.table.table-hover:not(.table-dark) > tbody > tr:hover > * {\r\n background-color: rgba(0 0 0 / 5%) !important;\r\n}\r\n\r\n.table.table-hover.table-dark > tbody > tr:hover > * {\r\n opacity: 0.9;\r\n}\r\n\r\n.table.table-hover.table-striped > tbody > tr:hover > * {\r\n background-color: rgba(0 0 0 / 5%) !important;\r\n}\r\n\r\n.table-striped-columns > :not(caption) > tr > :nth-child(2n) {\r\n background-color: rgba(0 0 0 / 5%) !important;\r\n}\r\n\r\n.table-dark.table-striped-columns > :not(caption) > tr > :nth-child(2n) {\r\n background-color: rgba(0, 0, 0, 5) !important;\r\n}\r\n","// `pointer-events: none` isn't supported by IE11, setting `cursor: default` just makes it appear less like a link\r\n.pe-none {\r\n cursor: default;\r\n}\r\n\r\n.text-break {\r\n word-wrap: break-word !important;\r\n}\r\n\r\n.user-select-none {\r\n -ms-user-select: none !important;\r\n}\r\n\r\n.user-select-auto {\r\n -ms-user-select: auto !important;\r\n}\r\n\r\n// Text opacity\r\n.text-opacity-75 {\r\n opacity: 0.75;\r\n}\r\n\r\n.text-opacity-50 {\r\n opacity: 0.5;\r\n}\r\n\r\n.text-opacity-25 {\r\n opacity: 0.25;\r\n}\r\n\r\n// Border colors\r\n.border {\r\n border-color: #dee2e6;\r\n border-style: solid;\r\n border-width: 1px;\r\n}\r\n\r\n.border-primary {\r\n border-color: rgb(13, 110, 253);\r\n}\r\n\r\n.border-secondary {\r\n border-color: rgb(108, 117, 125);\r\n}\r\n\r\n.border-success {\r\n border-color: rgb(25, 135, 84);\r\n}\r\n\r\n.border-danger {\r\n border-color: rgb(220, 53, 69);\r\n}\r\n\r\n.border-warning {\r\n border-color: rgb(255, 193, 7);\r\n}\r\n\r\n.border-info {\r\n border-color: rgb(13, 202, 240);\r\n}\r\n\r\n.border-light {\r\n border-color: rgb(248, 249, 250);\r\n}\r\n\r\n.border-dark {\r\n border-color: rgb(33, 37, 41);\r\n}\r\n\r\n.border-white {\r\n border-color: rgb(255, 255, 255);\r\n}\r\n\r\n// Border Width\r\n.border-1 {\r\n border-width: 1px !important;\r\n}\r\n\r\n.border-2 {\r\n border-width: 2px !important;\r\n}\r\n\r\n.border-3 {\r\n border-width: 3px !important;\r\n}\r\n\r\n.border-4 {\r\n border-width: 4px !important;\r\n}\r\n\r\n.border-5 {\r\n border-width: 5px !important;\r\n}\r\n\r\n// Radius\r\n.rounded {\r\n border-radius: 0.375rem;\r\n}\r\n\r\n.rounded-bottom {\r\n border-bottom-right-radius: 0.375rem;\r\n border-bottom-left-radius: 0.375rem;\r\n}\r\n\r\n.rounded-end {\r\n border-top-right-radius: 0.375rem;\r\n border-bottom-right-radius: 0.375rem;\r\n}\r\n\r\n.rounded-start {\r\n border-top-left-radius: 0.375rem;\r\n border-bottom-left-radius: 0.375rem;\r\n}\r\n\r\n.rounded-top {\r\n border-top-left-radius: 0.375rem;\r\n border-top-right-radius: 0.375rem;\r\n}\r\n\r\n// Border Radius Size\r\n.rounded-1 {\r\n border-radius: 0.375rem;\r\n}\r\n\r\n.rounded-2 {\r\n border-radius: 0.25rem;\r\n}\r\n\r\n.rounded-3 {\r\n border-radius: 0.5rem;\r\n}\r\n\r\n.rounded-4 {\r\n border-radius: 1rem;\r\n}\r\n\r\n.rounded-5 {\r\n border-radius: 2rem;\r\n}\r\n\r\n.rounded-pill {\r\n border-radius: 50rem;\r\n}\r\n\r\n// Text colors\r\n.text-primary {\r\n color: rgb(13, 110, 253);\r\n}\r\n\r\n.text-secondary {\r\n color: rgb(108, 117, 125);\r\n}\r\n\r\n.text-success {\r\n color: rgb(25, 135, 84);\r\n}\r\n\r\n.text-danger {\r\n color: rgb(220, 53, 69);\r\n}\r\n\r\n.text-warning {\r\n color: rgb(255, 193, 7);\r\n}\r\n\r\n.text-info {\r\n color: rgb(13, 202, 240);\r\n}\r\n\r\n.text-light {\r\n color: rgb(248, 249, 250);\r\n}\r\n\r\n.text-dark {\r\n color: rgb(33, 37, 41);\r\n}\r\n\r\n.text-body {\r\n color: rgb(33, 37, 41);\r\n}\r\n\r\n.text-muted {\r\n color: rgb(108, 117, 125);\r\n}\r\n\r\n.text-white {\r\n color: rgb(255, 255, 255);\r\n}\r\n\r\n// IE11 doesn't support :not(:focus-within) so the rules defined in Bootstrap 5 are repeated here\r\n.visually-hidden,\r\n.visually-hidden-focusable:not(:focus) {\r\n position: absolute !important;\r\n width: 1px !important;\r\n height: 1px !important;\r\n padding: 0 !important;\r\n margin: -1px !important;\r\n overflow: hidden !important;\r\n clip: rect(0, 0, 0, 0) !important;\r\n white-space: nowrap !important;\r\n border: 0 !important;\r\n}\r\n\r\n// horizontal stack gap\r\n.hstack.gap-1 > * {\r\n margin-right: 0.25rem;\r\n}\r\n\r\n.hstack.gap-1 > *:last-child {\r\n margin-right: 0;\r\n}\r\n\r\n.hstack.gap-2 > * {\r\n margin-right: 0.5rem;\r\n}\r\n\r\n.hstack.gap-2 > *:last-child {\r\n margin-right: 0;\r\n}\r\n\r\n.hstack.gap-3 > * {\r\n margin-right: 1rem;\r\n}\r\n\r\n.hstack.gap-3 > *:last-child {\r\n margin-right: 0;\r\n}\r\n\r\n.hstack.gap-4 > * {\r\n margin-right: 1.5rem;\r\n}\r\n\r\n.hstack.gap-4 > *:last-child {\r\n margin-right: 0;\r\n}\r\n\r\n.hstack.gap-5 > * {\r\n margin-right: 3rem;\r\n}\r\n\r\n.hstack.gap-5 > *:last-child {\r\n margin-right: 0;\r\n}\r\n\r\n// vertical stack gap\r\n.vstack.gap-1 > * {\r\n margin-bottom: 0.25rem;\r\n}\r\n\r\n.vstack.gap-1 > *:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n.vstack.gap-2 > * {\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.vstack.gap-2 > *:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n.vstack.gap-3 > * {\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.vstack.gap-3 > *:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n.vstack.gap-4 > * {\r\n margin-bottom: 1.5rem;\r\n}\r\n\r\n.vstack.gap-4 > *:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n.vstack.gap-5 > * {\r\n margin-bottom: 3rem;\r\n}\r\n\r\n.vstack.gap-5 > *:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n// vertical-rule\r\n.vr {\r\n border-right: 1px solid rgb(33, 37, 41);\r\n}\r\n\r\n// flex\r\n// fix for: https://github.com/coliff/bootstrap-ie11/issues/84\r\n.justify-content-evenly {\r\n justify-content: space-around !important;\r\n}\r\n",".breadcrumb-item {\n display: flex;\n}\n\n.breadcrumb-item + .breadcrumb-item::before {\n display: inline-block;\n}\n",".btn {\r\n -ms-user-select: none;\r\n}\r\n\r\n.btn-close {\r\n background-clip: content-box;\r\n}\r\n\r\n.btn-close:disabled,\r\n.btn-close.disabled {\r\n -ms-user-select: none;\r\n}\r\n\r\n.btn-group > :not(:last-child).btn-group > .btn,\r\n.btn-group > :first-child.btn.dropdown-toggle-split,\r\n.btn-group > :not(:last-child):not(.dropdown-toggle).btn {\r\n border-top-right-radius: 0 !important;\r\n border-bottom-right-radius: 0 !important;\r\n}\r\n\r\n.btn-group > :not(:first-child).btn-group > .btn,\r\n.btn-group > :nth-child(n + 3).btn,\r\n.btn-group > :not(.btn-check) + .btn {\r\n border-top-left-radius: 0 !important;\r\n border-bottom-left-radius: 0 !important;\r\n}\r\n","//\r\n// Check/radio\r\n//\r\n\r\n// makes the default checkbox icon nicer\r\n.form-check-input {\r\n border-color: rgba(0, 0, 0, .25);\r\n box-shadow: 0 0 0 1px rgba(111, 111, 111, 0.4);\r\n}\r\n\r\n// Hides the default caret\r\ninput::-ms-check {\r\n color: transparent;\r\n background-color: transparent;\r\n border: 0;\r\n}\r\n\r\n// Unstyle the caret on `