web/bootstrap-html
1
0
Fork 0
Code Issues Activity

Merging upstream version 5.3.0+dfsg.

Browse source 
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
Daniel Baumann 2025-02-17 07:08:19 +01:00
parent a87fc4fcc7
commit e92720b6a7
Signed by: daniel
GPG key ID: FBB4F0E80A80222F
605 changed files with 15320 additions and 9495 deletions
Download patch file Download diff file Expand all files Collapse all files

25
scss/forms/_floating-labels.scss
View file

@ -5,6 +5,7 @@
> .form-control-plaintext,
> .form-select {
height: $form-floating-height;
min-height: $form-floating-height;
line-height: $form-floating-line-height;
}
@ -12,7 +13,7 @@
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
height: 100%; // allow textareas
padding: $form-floating-padding-y $form-floating-padding-x;
overflow: hidden;
@ -55,14 +56,24 @@
> .form-control-plaintext,
> .form-select {
~ label {
opacity: $form-floating-label-opacity;
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 {
opacity: $form-floating-label-opacity;
color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
transform: $form-floating-label-transform;
}
}
@ -72,4 +83,12 @@
border-width: $input-border-width 0; // Required to properly position label text - as explained above
}
}
> :disabled ~ label {
color: $form-floating-label-disabled-color;
&::after {
background-color: $input-disabled-bg;
}
}
}

35
scss/forms/_form-check.scss
View file

@ -27,11 +27,14 @@
}
.form-check-input {
--#{$prefix}form-check-bg: #{$form-check-input-bg};
width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
vertical-align: top;
background-color: $form-check-input-bg;
background-color: var(--#{$prefix}form-check-bg);
background-image: var(--#{$prefix}form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
@ -65,17 +68,17 @@
&[type="checkbox"] {
@if $enable-gradients {
background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
background-image: escape-svg($form-check-input-checked-bg-image);
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
}
}
&[type="radio"] {
@if $enable-gradients {
background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
background-image: escape-svg($form-check-radio-checked-bg-image);
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
}
}
}
@ -85,9 +88,9 @@
border-color: $form-check-input-indeterminate-border-color;
@if $enable-gradients {
background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
} @else {
background-image: escape-svg($form-check-input-indeterminate-bg-image);
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
}
}
@ -121,24 +124,26 @@
padding-left: $form-switch-padding-start;
.form-check-input {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
width: $form-switch-width;
margin-left: $form-switch-padding-start * -1;
background-image: escape-svg($form-switch-bg-image);
background-image: var(--#{$prefix}form-switch-bg);
background-position: left center;
@include border-radius($form-switch-border-radius);
@include transition($form-switch-transition);
&:focus {
background-image: escape-svg($form-switch-focus-bg-image);
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
}
&:checked {
background-position: $form-switch-checked-bg-position;
@if $enable-gradients {
background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
background-image: escape-svg($form-switch-checked-bg-image);
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
}
}
}
@ -173,3 +178,11 @@
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.form-switch .form-check-input:not(:checked):not(:focus) {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
}
}
}

26
scss/forms/_form-control.scss
View file

@ -44,12 +44,31 @@
}
}
// Add some height to date inputs on iOS
// https://github.com/twbs/bootstrap/issues/23307
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
&::-webkit-date-and-time-value {
// On Android Chrome, form-control's "width: 100%" makes the input width too small
// Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
//
// On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
// Tested under iOS 16.2 / Safari 16.2
min-width: 85px; // Seems to be a good minimum safe width
// Add some height to date inputs on iOS
// https://github.com/twbs/bootstrap/issues/23307
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
// Multiply line-height by 1em if it has no unit
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
// Android Chrome type="date" is taller than the other inputs
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
// Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
margin: 0;
}
// Prevent excessive date input height in Webkit
// https://github.com/twbs/bootstrap/issues/34433
&::-webkit-datetime-edit {
display: block;
padding: 0;
}
// Placeholder
@ -186,6 +205,7 @@ textarea {
}
&::-webkit-color-swatch {
border: 0 !important; // stylelint-disable-line declaration-no-important
@include border-radius($input-border-radius);
}

13
scss/forms/_form-select.scss
View file

@ -4,17 +4,18 @@
// https://primer.github.io/.
.form-select {
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
display: block;
width: 100%;
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
-moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
font-family: $form-select-font-family;
@include font-size($form-select-font-size);
font-weight: $form-select-font-weight;
line-height: $form-select-line-height;
color: $form-select-color;
background-color: $form-select-bg;
background-image: escape-svg($form-select-indicator);
background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: $form-select-bg-position;
background-size: $form-select-bg-size;
@ -69,3 +70,11 @@
@include font-size($form-select-font-size-lg);
@include border-radius($form-select-border-radius-lg);
}
@if $enable-dark-mode {
@include color-mode(dark) {
.form-select {
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
}
}
}

2
scss/forms/_input-group.scss
View file

@ -121,7 +121,7 @@
}
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: -$input-border-width;
margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
@include border-start-radius(0);
}