From d7a8947b681d4777a68b7fa78f828afd84b4c86a Mon Sep 17 00:00:00 2001 From: iacore Date: Fri, 11 Oct 2024 02:06:57 +0000 Subject: [PATCH] Update bootstrap from https://github.com/twbs/bootstrap cd5b0fea3ac3f293165ff6029a83edeb3a16520a This fixes the deprecation warning. --- assets/css/bootstrap-style.css | 85 ++-- assets/css/bootstrap/_accordion.scss | 13 +- assets/css/bootstrap/_button-group.scss | 7 +- assets/css/bootstrap/_modal.scss | 2 +- assets/css/bootstrap/_reboot.scss | 2 +- assets/css/bootstrap/_type.scss | 2 +- assets/css/bootstrap/_variables-dark.scss | 4 +- assets/css/bootstrap/_variables.scss | 12 +- assets/css/bootstrap/bootstrap-grid.css | 12 +- assets/css/bootstrap/bootstrap-reboot.css | 2 +- assets/css/bootstrap/bootstrap.css | 83 ++-- .../css/bootstrap/forms/_floating-labels.scss | 33 +- assets/css/bootstrap/tests/jasmine.js | 16 + .../_auto-import-of-variables-dark.test.scss | 7 + .../tests/mixins/_color-modes.test.scss | 69 +++ .../_media-query-color-mode-full.test.scss | 8 + .../tests/mixins/_utilities.test.scss | 393 ++++++++++++++++++ .../css/bootstrap/tests/sass-true/register.js | 14 + .../css/bootstrap/tests/sass-true/runner.js | 17 + .../bootstrap/tests/utilities/_api.test.scss | 75 ++++ 20 files changed, 726 insertions(+), 130 deletions(-) create mode 100644 assets/css/bootstrap/tests/jasmine.js create mode 100644 assets/css/bootstrap/tests/mixins/_auto-import-of-variables-dark.test.scss create mode 100644 assets/css/bootstrap/tests/mixins/_color-modes.test.scss create mode 100644 assets/css/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss create mode 100644 assets/css/bootstrap/tests/mixins/_utilities.test.scss create mode 100644 assets/css/bootstrap/tests/sass-true/register.js create mode 100644 assets/css/bootstrap/tests/sass-true/runner.js create mode 100644 assets/css/bootstrap/tests/utilities/_api.test.scss diff --git a/assets/css/bootstrap-style.css b/assets/css/bootstrap-style.css index 0b9b5f1..cad396f 100644 --- a/assets/css/bootstrap-style.css +++ b/assets/css/bootstrap-style.css @@ -525,8 +525,8 @@ legend { width: 100%; padding: 0; margin-bottom: 0.5rem; - font-size: calc(1.275rem + 0.3vw); line-height: inherit; + font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { legend { @@ -604,9 +604,9 @@ progress { } .display-1 { - font-size: calc(1.625rem + 4.5vw); font-weight: 300; line-height: 1.2; + font-size: calc(1.625rem + 4.5vw); } @media (min-width: 1200px) { .display-1 { @@ -615,9 +615,9 @@ progress { } .display-2 { - font-size: calc(1.575rem + 3.9vw); font-weight: 300; line-height: 1.2; + font-size: calc(1.575rem + 3.9vw); } @media (min-width: 1200px) { .display-2 { @@ -626,9 +626,9 @@ progress { } .display-3 { - font-size: calc(1.525rem + 3.3vw); font-weight: 300; line-height: 1.2; + font-size: calc(1.525rem + 3.3vw); } @media (min-width: 1200px) { .display-3 { @@ -637,9 +637,9 @@ progress { } .display-4 { - font-size: calc(1.475rem + 2.7vw); font-weight: 300; line-height: 1.2; + font-size: calc(1.475rem + 2.7vw); } @media (min-width: 1200px) { .display-4 { @@ -648,9 +648,9 @@ progress { } .display-5 { - font-size: calc(1.425rem + 2.1vw); font-weight: 300; line-height: 1.2; + font-size: calc(1.425rem + 2.1vw); } @media (min-width: 1200px) { .display-5 { @@ -659,9 +659,9 @@ progress { } .display-6 { - font-size: calc(1.375rem + 1.5vw); font-weight: 300; line-height: 1.2; + font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { .display-6 { @@ -806,7 +806,7 @@ progress { } .col { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-auto > * { @@ -1020,7 +1020,7 @@ progress { @media (min-width: 576px) { .col-sm { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-sm-auto > * { flex: 0 0 auto; @@ -1193,7 +1193,7 @@ progress { } @media (min-width: 768px) { .col-md { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-md-auto > * { flex: 0 0 auto; @@ -1366,7 +1366,7 @@ progress { } @media (min-width: 992px) { .col-lg { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-lg-auto > * { flex: 0 0 auto; @@ -1539,7 +1539,7 @@ progress { } @media (min-width: 1200px) { .col-xl { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-xl-auto > * { flex: 0 0 auto; @@ -1712,7 +1712,7 @@ progress { } @media (min-width: 1400px) { .col-xxl { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-xxl-auto > * { flex: 0 0 auto; @@ -2577,9 +2577,11 @@ textarea.form-control-lg { top: 0; left: 0; z-index: 2; + max-width: 100%; height: 100%; padding: 1rem 0.75rem; overflow: hidden; + color: rgba(var(--bs-body-color-rgb), 0.65); text-align: start; text-overflow: ellipsis; white-space: nowrap; @@ -2620,13 +2622,13 @@ textarea.form-control-lg { .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label { - color: rgba(var(--bs-body-color-rgb), 0.65); transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } -.form-floating > .form-control:focus ~ label::after, -.form-floating > .form-control:not(:placeholder-shown) ~ label::after, -.form-floating > .form-control-plaintext ~ label::after, -.form-floating > .form-select ~ label::after { +.form-floating > .form-control:-webkit-autofill ~ label { + transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); +} +.form-floating > textarea:focus ~ label::after, +.form-floating > textarea:not(:placeholder-shown) ~ label::after { position: absolute; inset: 1rem 0.375rem; z-index: -1; @@ -2635,9 +2637,8 @@ textarea.form-control-lg { background-color: var(--bs-body-bg); border-radius: var(--bs-border-radius); } -.form-floating > .form-control:-webkit-autofill ~ label { - color: rgba(var(--bs-body-color-rgb), 0.65); - transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); +.form-floating > textarea:disabled ~ label::after { + background-color: var(--bs-secondary-bg); } .form-floating > .form-control-plaintext ~ label { border-width: var(--bs-border-width) 0; @@ -2646,10 +2647,6 @@ textarea.form-control-lg { .form-floating > .form-control:disabled ~ label { color: #6c757d; } -.form-floating > :disabled ~ label::after, -.form-floating > .form-control:disabled ~ label::after { - background-color: var(--bs-secondary-bg); -} .input-group { position: relative; @@ -2778,7 +2775,7 @@ textarea.form-control-lg { .was-validated .form-control:valid, .form-control.is-valid { border-color: var(--bs-form-valid-border-color); padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.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"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.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.1'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); @@ -2797,7 +2794,7 @@ textarea.form-control-lg { border-color: var(--bs-form-valid-border-color); } .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] { - --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.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"); + --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.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.1'/%3e%3c/svg%3e"); padding-right: 4.125rem; background-position: right 0.75rem center, center right 2.25rem; background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); @@ -3965,7 +3962,10 @@ textarea.form-control-lg { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } -.btn-group-vertical > .btn ~ .btn, .btn-group-vertical > .custom-btn-secondary ~ .btn, .btn-group-vertical > .custom-btn-secondary-flex ~ .btn, .btn-group-vertical > .btn ~ .custom-btn-secondary, .btn-group-vertical > .btn ~ .custom-btn-secondary-flex, .btn-group-vertical > .custom-btn-secondary ~ .custom-btn-secondary, .btn-group-vertical > .custom-btn-secondary-flex ~ .custom-btn-secondary, .btn-group-vertical > .custom-btn-secondary ~ .custom-btn-secondary-flex, .btn-group-vertical > .custom-btn-secondary-flex ~ .custom-btn-secondary-flex, +.btn-group-vertical > .btn:nth-child(n+3), .btn-group-vertical > .custom-btn-secondary:nth-child(n+3), .btn-group-vertical > .custom-btn-secondary-flex:nth-child(n+3), +.btn-group-vertical > :not(.btn-check) + .btn, +.btn-group-vertical > :not(.btn-check) + .custom-btn-secondary, +.btn-group-vertical > :not(.btn-check) + .custom-btn-secondary-flex, .btn-group-vertical > .btn-group:not(:first-child) > .btn, .btn-group-vertical > .btn-group:not(:first-child) > .custom-btn-secondary, .btn-group-vertical > .btn-group:not(:first-child) > .custom-btn-secondary-flex { @@ -4091,8 +4091,8 @@ textarea.form-control-lg { .nav-justified > .nav-link, .nav-justified .nav-item { - flex-basis: 0; flex-grow: 1; + flex-basis: 0; text-align: center; } @@ -4193,8 +4193,8 @@ textarea.form-control-lg { } .navbar-collapse { - flex-basis: 100%; flex-grow: 1; + flex-basis: 100%; align-items: center; } @@ -4691,7 +4691,7 @@ textarea.form-control-lg { flex-flow: row wrap; } .card-group > .card, .card-group > .custom-novel-card, .card-group > .custom-card { - flex: 1 0 0%; + flex: 1 0 0; margin-bottom: 0; } .card-group > .card + .card, .card-group > .custom-novel-card + .card, .card-group > .card + .custom-novel-card, .card-group > .custom-novel-card + .custom-novel-card, .card-group > .custom-card + .card, .card-group > .custom-card + .custom-novel-card, .card-group > .card + .custom-card, .card-group > .custom-novel-card + .custom-card, .card-group > .custom-card + .custom-card { @@ -4744,11 +4744,11 @@ textarea.form-control-lg { --bs-accordion-btn-padding-y: 1rem; --bs-accordion-btn-color: var(--bs-body-color); --bs-accordion-btn-bg: var(--bs-accordion-bg); - --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); + --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --bs-accordion-btn-icon-width: 1.25rem; --bs-accordion-btn-icon-transform: rotate(-180deg); --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out; - --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%285.2, 44, 101.2%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); + --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%285.2, 44, 101.2%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); --bs-accordion-body-padding-x: 1.25rem; --bs-accordion-body-padding-y: 1rem; @@ -4858,16 +4858,15 @@ textarea.form-control-lg { .accordion-flush > .accordion-item:last-child { border-bottom: 0; } -.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed { - border-radius: 0; -} -.accordion-flush > .accordion-item > .accordion-collapse { +.accordion-flush > .accordion-item > .accordion-collapse, +.accordion-flush > .accordion-item > .accordion-header .accordion-button, +.accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed { border-radius: 0; } [data-bs-theme=dark] .accordion-button::after { - --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%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"); - --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%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"); + --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%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-.708'/%3e%3c/svg%3e"); + --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%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-.708'/%3e%3c/svg%3e"); } .breadcrumb { @@ -5625,7 +5624,7 @@ textarea.form-control-lg { .btn-close { --bs-btn-close-color: #000; - --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); + --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e"); --bs-btn-close-opacity: 0.5; --bs-btn-close-hover-opacity: 0.75; --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); @@ -5774,8 +5773,8 @@ textarea.form-control-lg { pointer-events: none; } .modal.fade .modal-dialog { - transition: transform 0.3s ease-out; transform: translate(0, -50px); + transition: transform 0.3s ease-out; } @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { @@ -6408,11 +6407,11 @@ textarea.form-control-lg { } .carousel-control-prev-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")*/; } .carousel-control-next-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e")*/; } .carousel-indicators { diff --git a/assets/css/bootstrap/_accordion.scss b/assets/css/bootstrap/_accordion.scss index 17e5436..e9f267f 100644 --- a/assets/css/bootstrap/_accordion.scss +++ b/assets/css/bootstrap/_accordion.scss @@ -134,17 +134,12 @@ &:last-child { border-bottom: 0; } // stylelint-disable selector-max-class - > .accordion-header .accordion-button { - &, - &.collapsed { - @include border-radius(0); - } - } - // stylelint-enable selector-max-class - - > .accordion-collapse { + > .accordion-collapse, + > .accordion-header .accordion-button, + > .accordion-header .accordion-button.collapsed { @include border-radius(0); } + // stylelint-enable selector-max-class } } diff --git a/assets/css/bootstrap/_button-group.scss b/assets/css/bootstrap/_button-group.scss index 55ae3f6..dcd2a85 100644 --- a/assets/css/bootstrap/_button-group.scss +++ b/assets/css/bootstrap/_button-group.scss @@ -135,7 +135,12 @@ @include border-bottom-radius(0); } - > .btn ~ .btn, + // The top radius should be 0 if the button is: + // - the "third or more" child + // - the second child and the previous element isn't `.btn-check` (making it the first child visually) + // - part of a btn-group which isn't the first child + > .btn:nth-child(n + 3), + > :not(.btn-check) + .btn, > .btn-group:not(:first-child) > .btn { @include border-top-radius(0); } diff --git a/assets/css/bootstrap/_modal.scss b/assets/css/bootstrap/_modal.scss index 494db94..ee58032 100644 --- a/assets/css/bootstrap/_modal.scss +++ b/assets/css/bootstrap/_modal.scss @@ -59,8 +59,8 @@ // When fading in the modal, animate it to slide down .modal.fade & { - @include transition($modal-transition); transform: $modal-fade-transform; + @include transition($modal-transition); } .modal.show & { transform: $modal-show-transform; diff --git a/assets/css/bootstrap/_reboot.scss b/assets/css/bootstrap/_reboot.scss index 1879175..5e1665c 100644 --- a/assets/css/bootstrap/_reboot.scss +++ b/assets/css/bootstrap/_reboot.scss @@ -499,9 +499,9 @@ legend { width: 100%; padding: 0; margin-bottom: $legend-margin-bottom; - @include font-size($legend-font-size); font-weight: $legend-font-weight; line-height: inherit; + @include font-size($legend-font-size); + * { clear: left; // 2 diff --git a/assets/css/bootstrap/_type.scss b/assets/css/bootstrap/_type.scss index 37d64bf..6961390 100644 --- a/assets/css/bootstrap/_type.scss +++ b/assets/css/bootstrap/_type.scss @@ -34,11 +34,11 @@ // Type display classes @each $display, $font-size in $display-font-sizes { .display-#{$display} { - @include font-size($font-size); font-family: $display-font-family; font-style: $display-font-style; font-weight: $display-font-weight; line-height: $display-line-height; + @include font-size($font-size); } } diff --git a/assets/css/bootstrap/_variables-dark.scss b/assets/css/bootstrap/_variables-dark.scss index 6422b38..723747b 100644 --- a/assets/css/bootstrap/_variables-dark.scss +++ b/assets/css/bootstrap/_variables-dark.scss @@ -82,6 +82,6 @@ $form-invalid-border-color-dark: $red-300 !default; $accordion-icon-color-dark: $primary-text-emphasis-dark !default; $accordion-icon-active-color-dark: $primary-text-emphasis-dark !default; -$accordion-button-icon-dark: url("data:image/svg+xml,") !default; -$accordion-button-active-icon-dark: url("data:image/svg+xml,") !default; +$accordion-button-icon-dark: url("data:image/svg+xml,") !default; +$accordion-button-active-icon-dark: url("data:image/svg+xml,") !default; // scss-docs-end sass-dark-mode-vars diff --git a/assets/css/bootstrap/_variables.scss b/assets/css/bootstrap/_variables.scss index 0653139..cfe25b5 100644 --- a/assets/css/bootstrap/_variables.scss +++ b/assets/css/bootstrap/_variables.scss @@ -1091,7 +1091,7 @@ $form-feedback-valid-color: $success !default; $form-feedback-invalid-color: $danger !default; $form-feedback-icon-valid-color: $form-feedback-valid-color !default; -$form-feedback-icon-valid: url("data:image/svg+xml,") !default; +$form-feedback-icon-valid: url("data:image/svg+xml,") !default; $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; $form-feedback-icon-invalid: url("data:image/svg+xml,") !default; // scss-docs-end form-feedback-variables @@ -1394,8 +1394,8 @@ $accordion-icon-active-color: $primary-text-emphasis !default; $accordion-icon-transition: transform .2s ease-in-out !default; $accordion-icon-transform: rotate(-180deg) !default; -$accordion-button-icon: url("data:image/svg+xml,") !default; -$accordion-button-active-icon: url("data:image/svg+xml,") !default; +$accordion-button-icon: url("data:image/svg+xml,") !default; +$accordion-button-active-icon: url("data:image/svg+xml,") !default; // scss-docs-end accordion-variables // Tooltips @@ -1669,8 +1669,8 @@ $carousel-caption-spacer: 1.25rem !default; $carousel-control-icon-width: 2rem !default; -$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; -$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; $carousel-transition-duration: .6s !default; $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) @@ -1706,7 +1706,7 @@ $btn-close-height: $btn-close-width !default; $btn-close-padding-x: .25em !default; $btn-close-padding-y: $btn-close-padding-x !default; $btn-close-color: $black !default; -$btn-close-bg: url("data:image/svg+xml,") !default; +$btn-close-bg: url("data:image/svg+xml,") !default; $btn-close-focus-shadow: $focus-ring-box-shadow !default; $btn-close-opacity: .5 !default; $btn-close-hover-opacity: .75 !default; diff --git a/assets/css/bootstrap/bootstrap-grid.css b/assets/css/bootstrap/bootstrap-grid.css index 93880a8..814c2c6 100644 --- a/assets/css/bootstrap/bootstrap-grid.css +++ b/assets/css/bootstrap/bootstrap-grid.css @@ -73,7 +73,7 @@ } .col { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-auto > * { @@ -282,7 +282,7 @@ @media (min-width: 576px) { .col-sm { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-sm-auto > * { flex: 0 0 auto; @@ -451,7 +451,7 @@ } @media (min-width: 768px) { .col-md { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-md-auto > * { flex: 0 0 auto; @@ -620,7 +620,7 @@ } @media (min-width: 992px) { .col-lg { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-lg-auto > * { flex: 0 0 auto; @@ -789,7 +789,7 @@ } @media (min-width: 1200px) { .col-xl { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-xl-auto > * { flex: 0 0 auto; @@ -958,7 +958,7 @@ } @media (min-width: 1400px) { .col-xxl { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-xxl-auto > * { flex: 0 0 auto; diff --git a/assets/css/bootstrap/bootstrap-reboot.css b/assets/css/bootstrap/bootstrap-reboot.css index 66584d7..93e2102 100644 --- a/assets/css/bootstrap/bootstrap-reboot.css +++ b/assets/css/bootstrap/bootstrap-reboot.css @@ -514,8 +514,8 @@ legend { width: 100%; padding: 0; margin-bottom: 0.5rem; - font-size: calc(1.275rem + 0.3vw); line-height: inherit; + font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { legend { diff --git a/assets/css/bootstrap/bootstrap.css b/assets/css/bootstrap/bootstrap.css index ccfe6fe..3cea17b 100644 --- a/assets/css/bootstrap/bootstrap.css +++ b/assets/css/bootstrap/bootstrap.css @@ -515,8 +515,8 @@ legend { width: 100%; padding: 0; margin-bottom: 0.5rem; - font-size: calc(1.275rem + 0.3vw); line-height: inherit; + font-size: calc(1.275rem + 0.3vw); } @media (min-width: 1200px) { legend { @@ -594,9 +594,9 @@ progress { } .display-1 { - font-size: calc(1.625rem + 4.5vw); font-weight: 300; line-height: 1.2; + font-size: calc(1.625rem + 4.5vw); } @media (min-width: 1200px) { .display-1 { @@ -605,9 +605,9 @@ progress { } .display-2 { - font-size: calc(1.575rem + 3.9vw); font-weight: 300; line-height: 1.2; + font-size: calc(1.575rem + 3.9vw); } @media (min-width: 1200px) { .display-2 { @@ -616,9 +616,9 @@ progress { } .display-3 { - font-size: calc(1.525rem + 3.3vw); font-weight: 300; line-height: 1.2; + font-size: calc(1.525rem + 3.3vw); } @media (min-width: 1200px) { .display-3 { @@ -627,9 +627,9 @@ progress { } .display-4 { - font-size: calc(1.475rem + 2.7vw); font-weight: 300; line-height: 1.2; + font-size: calc(1.475rem + 2.7vw); } @media (min-width: 1200px) { .display-4 { @@ -638,9 +638,9 @@ progress { } .display-5 { - font-size: calc(1.425rem + 2.1vw); font-weight: 300; line-height: 1.2; + font-size: calc(1.425rem + 2.1vw); } @media (min-width: 1200px) { .display-5 { @@ -649,9 +649,9 @@ progress { } .display-6 { - font-size: calc(1.375rem + 1.5vw); font-weight: 300; line-height: 1.2; + font-size: calc(1.375rem + 1.5vw); } @media (min-width: 1200px) { .display-6 { @@ -796,7 +796,7 @@ progress { } .col { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-auto > * { @@ -1005,7 +1005,7 @@ progress { @media (min-width: 576px) { .col-sm { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-sm-auto > * { flex: 0 0 auto; @@ -1174,7 +1174,7 @@ progress { } @media (min-width: 768px) { .col-md { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-md-auto > * { flex: 0 0 auto; @@ -1343,7 +1343,7 @@ progress { } @media (min-width: 992px) { .col-lg { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-lg-auto > * { flex: 0 0 auto; @@ -1512,7 +1512,7 @@ progress { } @media (min-width: 1200px) { .col-xl { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-xl-auto > * { flex: 0 0 auto; @@ -1681,7 +1681,7 @@ progress { } @media (min-width: 1400px) { .col-xxl { - flex: 1 0 0%; + flex: 1 0 0; } .row-cols-xxl-auto > * { flex: 0 0 auto; @@ -2542,9 +2542,11 @@ textarea.form-control-lg { top: 0; left: 0; z-index: 2; + max-width: 100%; height: 100%; padding: 1rem 0.75rem; overflow: hidden; + color: rgba(var(--bs-body-color-rgb), 0.65); text-align: start; text-overflow: ellipsis; white-space: nowrap; @@ -2585,13 +2587,13 @@ textarea.form-control-lg { .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label { - color: rgba(var(--bs-body-color-rgb), 0.65); transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } -.form-floating > .form-control:focus ~ label::after, -.form-floating > .form-control:not(:placeholder-shown) ~ label::after, -.form-floating > .form-control-plaintext ~ label::after, -.form-floating > .form-select ~ label::after { +.form-floating > .form-control:-webkit-autofill ~ label { + transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); +} +.form-floating > textarea:focus ~ label::after, +.form-floating > textarea:not(:placeholder-shown) ~ label::after { position: absolute; inset: 1rem 0.375rem; z-index: -1; @@ -2600,9 +2602,8 @@ textarea.form-control-lg { background-color: var(--bs-body-bg); border-radius: var(--bs-border-radius); } -.form-floating > .form-control:-webkit-autofill ~ label { - color: rgba(var(--bs-body-color-rgb), 0.65); - transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); +.form-floating > textarea:disabled ~ label::after { + background-color: var(--bs-secondary-bg); } .form-floating > .form-control-plaintext ~ label { border-width: var(--bs-border-width) 0; @@ -2611,10 +2612,6 @@ textarea.form-control-lg { .form-floating > .form-control:disabled ~ label { color: #6c757d; } -.form-floating > :disabled ~ label::after, -.form-floating > .form-control:disabled ~ label::after { - background-color: var(--bs-secondary-bg); -} .input-group { position: relative; @@ -2739,7 +2736,7 @@ textarea.form-control-lg { .was-validated .form-control:valid, .form-control.is-valid { border-color: var(--bs-form-valid-border-color); padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.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"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.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.1'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); @@ -2758,7 +2755,7 @@ textarea.form-control-lg { border-color: var(--bs-form-valid-border-color); } .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] { - --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.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"); + --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.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.1'/%3e%3c/svg%3e"); padding-right: 4.125rem; background-position: right 0.75rem center, center right 2.25rem; background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); @@ -3722,7 +3719,8 @@ textarea.form-control-lg { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } -.btn-group-vertical > .btn ~ .btn, +.btn-group-vertical > .btn:nth-child(n+3), +.btn-group-vertical > :not(.btn-check) + .btn, .btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; @@ -3846,8 +3844,8 @@ textarea.form-control-lg { .nav-justified > .nav-link, .nav-justified .nav-item { - flex-basis: 0; flex-grow: 1; + flex-basis: 0; text-align: center; } @@ -3948,8 +3946,8 @@ textarea.form-control-lg { } .navbar-collapse { - flex-basis: 100%; flex-grow: 1; + flex-basis: 100%; align-items: center; } @@ -4444,7 +4442,7 @@ textarea.form-control-lg { flex-flow: row wrap; } .card-group > .card { - flex: 1 0 0%; + flex: 1 0 0; margin-bottom: 0; } .card-group > .card + .card { @@ -4489,11 +4487,11 @@ textarea.form-control-lg { --bs-accordion-btn-padding-y: 1rem; --bs-accordion-btn-color: var(--bs-body-color); --bs-accordion-btn-bg: var(--bs-accordion-bg); - --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); + --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --bs-accordion-btn-icon-width: 1.25rem; --bs-accordion-btn-icon-transform: rotate(-180deg); --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out; - --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%285.2, 44, 101.2%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); + --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%285.2, 44, 101.2%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); --bs-accordion-body-padding-x: 1.25rem; --bs-accordion-body-padding-y: 1rem; @@ -4603,16 +4601,15 @@ textarea.form-control-lg { .accordion-flush > .accordion-item:last-child { border-bottom: 0; } -.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed { - border-radius: 0; -} -.accordion-flush > .accordion-item > .accordion-collapse { +.accordion-flush > .accordion-item > .accordion-collapse, +.accordion-flush > .accordion-item > .accordion-header .accordion-button, +.accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed { border-radius: 0; } [data-bs-theme=dark] .accordion-button::after { - --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%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"); - --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%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"); + --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%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-.708'/%3e%3c/svg%3e"); + --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%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-.708'/%3e%3c/svg%3e"); } .breadcrumb { @@ -5270,7 +5267,7 @@ textarea.form-control-lg { .btn-close { --bs-btn-close-color: #000; - --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); + --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e"); --bs-btn-close-opacity: 0.5; --bs-btn-close-hover-opacity: 0.75; --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); @@ -5419,8 +5416,8 @@ textarea.form-control-lg { pointer-events: none; } .modal.fade .modal-dialog { - transition: transform 0.3s ease-out; transform: translate(0, -50px); + transition: transform 0.3s ease-out; } @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { @@ -6053,11 +6050,11 @@ textarea.form-control-lg { } .carousel-control-prev-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")*/; } .carousel-control-next-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e")*/; } .carousel-indicators { diff --git a/assets/css/bootstrap/forms/_floating-labels.scss b/assets/css/bootstrap/forms/_floating-labels.scss index 2cf0470..b366505 100644 --- a/assets/css/bootstrap/forms/_floating-labels.scss +++ b/assets/css/bootstrap/forms/_floating-labels.scss @@ -14,9 +14,11 @@ top: 0; left: 0; z-index: 2; + max-width: 100%; height: 100%; // allow textareas padding: $form-floating-padding-y $form-floating-padding-x; overflow: hidden; + color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity}); text-align: start; text-overflow: ellipsis; white-space: nowrap; @@ -56,27 +58,30 @@ > .form-control-plaintext, > .form-select { ~ label { - color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity}); transform: $form-floating-label-transform; - - &::after { - position: absolute; - inset: $form-floating-padding-y ($form-floating-padding-x * .5); - z-index: -1; - height: $form-floating-label-height; - content: ""; - background-color: $input-bg; - @include border-radius($input-border-radius); - } } } // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped > .form-control:-webkit-autofill { ~ label { - color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity}); transform: $form-floating-label-transform; } } + > textarea:focus, + > textarea:not(:placeholder-shown) { + ~ label::after { + position: absolute; + inset: $form-floating-padding-y ($form-floating-padding-x * .5); + z-index: -1; + height: $form-floating-label-height; + content: ""; + background-color: $input-bg; + @include border-radius($input-border-radius); + } + } + > textarea:disabled ~ label::after { + background-color: $input-disabled-bg; + } > .form-control-plaintext { ~ label { @@ -87,9 +92,5 @@ > :disabled ~ label, > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity color: $form-floating-label-disabled-color; - - &::after { - background-color: $input-disabled-bg; - } } } diff --git a/assets/css/bootstrap/tests/jasmine.js b/assets/css/bootstrap/tests/jasmine.js new file mode 100644 index 0000000..25d838c --- /dev/null +++ b/assets/css/bootstrap/tests/jasmine.js @@ -0,0 +1,16 @@ +/* eslint-disable camelcase */ + +'use strict' + +const path = require('node:path') + +module.exports = { + spec_dir: 'scss', + // Make Jasmine look for `.test.scss` files + spec_files: ['**/*.{test,spec}.scss'], + // Compile them into JS scripts running `sass-true` + requires: [path.join(__dirname, 'sass-true/register')], + // Ensure we use `require` so that the require.extensions works + // as `import` completely bypasses it + jsLoader: 'require' +} diff --git a/assets/css/bootstrap/tests/mixins/_auto-import-of-variables-dark.test.scss b/assets/css/bootstrap/tests/mixins/_auto-import-of-variables-dark.test.scss new file mode 100644 index 0000000..f08ae58 --- /dev/null +++ b/assets/css/bootstrap/tests/mixins/_auto-import-of-variables-dark.test.scss @@ -0,0 +1,7 @@ +// TODO: this file can be removed safely in v6 when `@import "variables-dark"` will be removed at the end of _variables.scss + +@import "../../functions"; +@import "../../variables"; +// Voluntarily not importing _variables-dark.scss +@import "../../maps"; +@import "../../mixins"; diff --git a/assets/css/bootstrap/tests/mixins/_color-modes.test.scss b/assets/css/bootstrap/tests/mixins/_color-modes.test.scss new file mode 100644 index 0000000..9ecc628 --- /dev/null +++ b/assets/css/bootstrap/tests/mixins/_color-modes.test.scss @@ -0,0 +1,69 @@ +// stylelint-disable selector-attribute-quotes + +@import "../../functions"; +@import "../../variables"; +@import "../../variables-dark"; +@import "../../maps"; +@import "../../mixins"; + +@include describe("global $color-mode-type: data") { + @include it("generates data attribute selectors for dark mode") { + @include assert() { + @include output() { + @include color-mode(dark) { + .element { + color: var(--bs-primary-text-emphasis); + background-color: var(--bs-primary-bg-subtle); + } + } + @include color-mode(dark, true) { + --custom-color: #{mix($indigo, $blue, 50%)}; + } + } + @include expect() { + [data-bs-theme=dark] .element { + color: var(--bs-primary-text-emphasis); + background-color: var(--bs-primary-bg-subtle); + } + [data-bs-theme=dark] { + --custom-color: #3a3ff8; + } + } + } + } +} + +@include describe("global $color-mode-type: media-query") { + @include it("generates media queries for dark mode") { + $color-mode-type: media-query !global; + + @include assert() { + @include output() { + @include color-mode(dark) { + .element { + color: var(--bs-primary-text-emphasis); + background-color: var(--bs-primary-bg-subtle); + } + } + @include color-mode(dark, true) { + --custom-color: #{mix($indigo, $blue, 50%)}; + } + } + @include expect() { + @media (prefers-color-scheme: dark) { + .element { + color: var(--bs-primary-text-emphasis); + background-color: var(--bs-primary-bg-subtle); + } + } + @media (prefers-color-scheme: dark) { + :root { + --custom-color: #3a3ff8; + } + } + } + } + + $color-mode-type: data !global; + } +} diff --git a/assets/css/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss b/assets/css/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss new file mode 100644 index 0000000..00ed82d --- /dev/null +++ b/assets/css/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss @@ -0,0 +1,8 @@ +$color-mode-type: media-query; + +@import "../../bootstrap"; + +@include describe("global $color-mode-type: media-query") { + @include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty + } +} diff --git a/assets/css/bootstrap/tests/mixins/_utilities.test.scss b/assets/css/bootstrap/tests/mixins/_utilities.test.scss new file mode 100644 index 0000000..8140ac4 --- /dev/null +++ b/assets/css/bootstrap/tests/mixins/_utilities.test.scss @@ -0,0 +1,393 @@ +$prefix: bs-; +$enable-important-utilities: false; + +// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it +@import "../../mixins/utilities"; + +@mixin test-generate-utility($params...) { + @include assert() { + @include output() { + @include generate-utility($params...); + } + + @include expect() { + @content; + } + } +} + +@include describe(generate-utility) { + @include it("generates a utility class for each value") { + @include test-generate-utility( + ( + property: "padding", + values: (small: .5rem, large: 2rem) + ) + ) { + .padding-small { + padding: .5rem; + } + + .padding-large { + padding: 2rem; + } + } + } + + @include describe("global $enable-important-utilities: true") { + @include it("sets !important") { + $enable-important-utilities: true !global; + + @include test-generate-utility( + ( + property: "padding", + values: (small: .5rem, large: 2rem) + ) + ) { + .padding-small { + padding: .5rem !important; + } + + .padding-large { + padding: 2rem !important; + } + } + + $enable-important-utilities: false !global; + } + } + + @include describe("$utility") { + @include describe("values") { + @include it("supports null keys") { + @include test-generate-utility( + ( + property: "padding", + values: (null: 1rem, small: .5rem, large: 2rem) + ), + ) { + .padding { + padding: 1rem; + } + + .padding-small { + padding: .5rem; + } + + .padding-large { + padding: 2rem; + } + } + } + + @include it("ignores null values") { + @include test-generate-utility( + ( + property: "padding", + values: (small: null, large: 2rem) + ) + ) { + .padding-large { + padding: 2rem; + } + } + } + + @include it("supports lists") { + @include test-generate-utility( + ( + property: "padding", + values: 1rem 2rem + ) + ) { + .padding-1rem { + padding: 1rem; + } + + .padding-2rem { + padding: 2rem; + } + } + } + + @include it("supports single values") { + @include test-generate-utility( + ( + property: padding, + values: 1rem + ) + ) { + .padding-1rem { + padding: 1rem; + } + } + } + } + + @include describe("class & property") { + @include it("adds each property to the declaration") { + @include test-generate-utility( + ( + class: padding-x, + property: padding-inline-start padding-inline-end, + values: 1rem + ) + ) { + .padding-x-1rem { + padding-inline-start: 1rem; + padding-inline-end: 1rem; + } + } + } + + @include it("uses the first property as class name") { + @include test-generate-utility( + ( + property: padding-inline-start padding-inline-end, + values: 1rem + ) + ) { + .padding-inline-start-1rem { + padding-inline-start: 1rem; + padding-inline-end: 1rem; + } + } + } + + @include it("supports a null class to create classes straight from the values") { + @include test-generate-utility( + ( + property: visibility, + class: null, + values: ( + visible: visible, + invisible: hidden, + ) + ) + ) { + .visible { + visibility: visible; + } + + .invisible { + visibility: hidden; + } + } + } + } + + @include describe("state") { + @include it("Generates selectors for each states") { + @include test-generate-utility( + ( + property: padding, + values: 1rem, + state: hover focus, + ) + ) { + .padding-1rem { + padding: 1rem; + } + + .padding-1rem-hover:hover { + padding: 1rem; + } + + .padding-1rem-focus:focus { + padding: 1rem; + } + } + } + } + + @include describe("css-var"){ + @include it("sets a CSS variable instead of the property") { + @include test-generate-utility( + ( + property: padding, + css-variable-name: padding, + css-var: true, + values: 1rem 2rem + ) + ) { + .padding-1rem { + --bs-padding: 1rem; + } + + .padding-2rem { + --bs-padding: 2rem; + } + } + } + + @include it("defaults to class") { + @include test-generate-utility( + ( + property: padding, + class: padding, + css-var: true, + values: 1rem 2rem + ) + ) { + .padding-1rem { + --bs-padding: 1rem; + } + + .padding-2rem { + --bs-padding: 2rem; + } + } + } + } + + @include describe("local-vars") { + @include it("generates the listed variables") { + @include test-generate-utility( + ( + property: color, + class: desaturated-color, + local-vars: ( + color-opacity: 1, + color-saturation: .25 + ), + values: ( + blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity)) + ) + ) + ) { + .desaturated-color-blue { + --bs-color-opacity: 1; + // Sass compilation will put a leading zero so we want to keep that one + // stylelint-disable-next-line @stylistic/number-leading-zero + --bs-color-saturation: 0.25; + color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity)); + } + } + } + } + + @include describe("css-var & state") { + @include it("Generates a rule with for each state with a CSS variable") { + @include test-generate-utility( + ( + property: padding, + css-var: true, + css-variable-name: padding, + values: 1rem, + state: hover focus, + ) + ) { + .padding-1rem { + --bs-padding: 1rem; + } + + .padding-1rem-hover:hover { + --bs-padding: 1rem; + } + + .padding-1rem-focus:focus { + --bs-padding: 1rem; + } + } + } + } + + @include describe("rtl") { + @include it("sets up RTLCSS for removal when false") { + @include test-generate-utility( + ( + property: padding, + values: 1rem, + rtl: false + ) + ) { + /* rtl:begin:remove */ + + .padding-1rem { + padding: 1rem; + } + + /* rtl:end:remove */ + + } + } + } + + @include describe("rfs") { + @include it("sets the fluid value when not inside media query") { + @include test-generate-utility( + ( + property: padding, + values: 1rem, + rfs: true + ) + ) { + .padding-1rem { + padding: rfs-fluid-value(1rem); + } + } + } + + @include it("sets the value when inside the media query") { + @include test-generate-utility( + ( + property: padding, + values: 1rem, + rfs: true + ), + $is-rfs-media-query: true + ) { + .padding-1rem { + padding: rfs-value(1rem); + } + } + } + } + } + + @include describe("$infix") { + @include it("inserts the given infix") { + @include test-generate-utility( + ( + property: "padding", + values: (null: 1rem, small: .5rem, large: 2rem) + ), + $infix: -sm + ) { + .padding-sm { + padding: 1rem; + } + + .padding-sm-small { + padding: .5rem; + } + + .padding-sm-large { + padding: 2rem; + } + } + } + + @include it("strips leading - if class is null") { + @include test-generate-utility( + ( + property: visibility, + class: null, + values: ( + visible: visible, + invisible: hidden, + ) + ), + -sm + ) { + .sm-visible { + visibility: visible; + } + + .sm-invisible { + visibility: hidden; + } + } + } + } +} diff --git a/assets/css/bootstrap/tests/sass-true/register.js b/assets/css/bootstrap/tests/sass-true/register.js new file mode 100644 index 0000000..d93e414 --- /dev/null +++ b/assets/css/bootstrap/tests/sass-true/register.js @@ -0,0 +1,14 @@ +'use strict' + +const path = require('node:path') + +const runnerPath = path.join(__dirname, 'runner').replace(/\\/g, '/') + +require.extensions['.scss'] = (module, filename) => { + const normalizedFilename = filename.replace(/\\/g, '/') + + return module._compile(` + const runner = require('${runnerPath}') + runner('${normalizedFilename}', { describe, it }) + `, filename) +} diff --git a/assets/css/bootstrap/tests/sass-true/runner.js b/assets/css/bootstrap/tests/sass-true/runner.js new file mode 100644 index 0000000..bef870a --- /dev/null +++ b/assets/css/bootstrap/tests/sass-true/runner.js @@ -0,0 +1,17 @@ +'use strict' + +const fs = require('node:fs') +const path = require('node:path') +const { runSass } = require('sass-true') + +module.exports = (filename, { describe, it }) => { + const data = fs.readFileSync(filename, 'utf8') + const TRUE_SETUP = '$true-terminal-output: false; @import "true";' + const sassString = TRUE_SETUP + data + + runSass( + { describe, it, sourceType: 'string' }, + sassString, + { loadPaths: [path.dirname(filename)] } + ) +} diff --git a/assets/css/bootstrap/tests/utilities/_api.test.scss b/assets/css/bootstrap/tests/utilities/_api.test.scss new file mode 100644 index 0000000..304d8d1 --- /dev/null +++ b/assets/css/bootstrap/tests/utilities/_api.test.scss @@ -0,0 +1,75 @@ +@import "../../functions"; +@import "../../variables"; +@import "../../variables-dark"; +@import "../../maps"; +@import "../../mixins"; + +$utilities: (); + +@include describe("utilities/api") { + @include it("generates utilities for each breakpoints") { + $utilities: ( + margin: ( + property: margin, + values: auto + ), + padding: ( + property: padding, + responsive: true, + values: 1rem + ), + font-size: ( + property: font-size, + values: (large: 1.25rem), + print: true + ) + ) !global; + + $grid-breakpoints: ( + xs: 0, + sm: 333px, + md: 666px + ) !global; + + @include assert() { + @include output() { + @import "../../utilities/api"; + } + + @include expect() { + // margin is not set to responsive + .margin-auto { + margin: auto !important; + } + + // padding is, though + .padding-1rem { + padding: 1rem !important; + } + + .font-size-large { + font-size: 1.25rem !important; + } + + @media (min-width: 333px) { + .padding-sm-1rem { + padding: 1rem !important; + } + } + + @media (min-width: 666px) { + .padding-md-1rem { + padding: 1rem !important; + } + } + + @media print { + .font-size-print-large { + font-size: 1.25rem !important; + } + } + } + + } + } +}