mirror of
https://codeberg.org/VnPower/PixivFE
synced 2024-12-06 19:16:23 +01:00
Update bootstrap from https://github.com/twbs/bootstrap cd5b0fea3ac3f293165ff6029a83edeb3a16520a
This fixes the deprecation warning.
This commit is contained in:
iacore
Vendored
+42
-43
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path 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'/></svg>") !default;
|
||||
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path 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'/></svg>") !default;
|
||||
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path 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'/></svg>") !default;
|
||||
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path 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'/></svg>") !default;
|
||||
// scss-docs-end sass-dark-mode-vars
|
||||
|
||||
@@ -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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' 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'/></svg>") !default;
|
||||
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' 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'/></svg>") !default;
|
||||
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
|
||||
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
|
||||
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
|
||||
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
|
||||
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path 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'/></svg>") !default;
|
||||
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path 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'/></svg>") !default;
|
||||
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path 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'/></svg>") !default;
|
||||
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path 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'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path 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'/></svg>") !default;
|
||||
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path 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'/></svg>") !default;
|
||||
$btn-close-focus-shadow: $focus-ring-box-shadow !default;
|
||||
$btn-close-opacity: .5 !default;
|
||||
$btn-close-hover-opacity: .75 !default;
|
||||
|
||||
+6
-6
@@ -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;
|
||||
|
||||
+1
-1
@@ -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 {
|
||||
|
||||
Vendored
+40
-43
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
@@ -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";
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
}
|
||||
@@ -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)] }
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user