From 185ddf1eaf82e08586be6c7689507ee924d9dd47 Mon Sep 17 00:00:00 2001 From: Mario Date: Fri, 19 Aug 2022 13:15:48 +0000 Subject: update to bootstrap 5.2 and fixes --- .../bootstrap/scss/forms/_floating-labels.scss | 17 ++++++-- vendor/twbs/bootstrap/scss/forms/_form-check.scss | 33 ++++++++++++--- .../twbs/bootstrap/scss/forms/_form-control.scss | 49 ++++++---------------- vendor/twbs/bootstrap/scss/forms/_form-select.scss | 1 - vendor/twbs/bootstrap/scss/forms/_input-group.scss | 22 ++++++---- 5 files changed, 69 insertions(+), 53 deletions(-) (limited to 'vendor/twbs/bootstrap/scss/forms') diff --git a/vendor/twbs/bootstrap/scss/forms/_floating-labels.scss b/vendor/twbs/bootstrap/scss/forms/_floating-labels.scss index 2f4295480..acefe4ebc 100644 --- a/vendor/twbs/bootstrap/scss/forms/_floating-labels.scss +++ b/vendor/twbs/bootstrap/scss/forms/_floating-labels.scss @@ -2,6 +2,7 @@ position: relative; > .form-control, + > .form-control-plaintext, > .form-select { height: $form-floating-height; line-height: $form-floating-line-height; @@ -11,16 +12,20 @@ position: absolute; top: 0; left: 0; + width: 100%; height: 100%; // allow textareas padding: $form-floating-padding-y $form-floating-padding-x; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; pointer-events: none; border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model transform-origin: 0 0; @include transition($form-floating-transition); } - // stylelint-disable no-duplicate-selectors - > .form-control { + > .form-control, + > .form-control-plaintext { padding: $form-floating-padding-y $form-floating-padding-x; &::placeholder { @@ -46,6 +51,7 @@ > .form-control:focus, > .form-control:not(:placeholder-shown), + > .form-control-plaintext, > .form-select { ~ label { opacity: $form-floating-label-opacity; @@ -59,5 +65,10 @@ transform: $form-floating-label-transform; } } - // stylelint-enable no-duplicate-selectors + + > .form-control-plaintext { + ~ label { + border-width: $input-border-width 0; // Required to properly position label text - as explained above + } + } } diff --git a/vendor/twbs/bootstrap/scss/forms/_form-check.scss b/vendor/twbs/bootstrap/scss/forms/_form-check.scss index 6321b4100..42a2a9607 100644 --- a/vendor/twbs/bootstrap/scss/forms/_form-check.scss +++ b/vendor/twbs/bootstrap/scss/forms/_form-check.scss @@ -14,6 +14,18 @@ } } +.form-check-reverse { + padding-right: $form-check-padding-start; + padding-left: 0; + text-align: right; + + .form-check-input { + float: right; + margin-right: $form-check-padding-start * -1; + margin-left: 0; + } +} + .form-check-input { width: $form-check-input-width; height: $form-check-input-width; @@ -25,7 +37,7 @@ background-size: contain; border: $form-check-input-border; appearance: none; - color-adjust: exact; // Keep themed appearance for print + print-color-adjust: exact; // Keep themed appearance for print @include transition($form-check-transition); &[type="checkbox"] { @@ -53,7 +65,7 @@ &[type="checkbox"] { @if $enable-gradients { - background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient); + background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient); } @else { background-image: escape-svg($form-check-input-checked-bg-image); } @@ -61,7 +73,7 @@ &[type="radio"] { @if $enable-gradients { - background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient); + background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient); } @else { background-image: escape-svg($form-check-radio-checked-bg-image); } @@ -73,7 +85,7 @@ border-color: $form-check-input-indeterminate-border-color; @if $enable-gradients { - background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient); + background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient); } @else { background-image: escape-svg($form-check-input-indeterminate-bg-image); } @@ -90,6 +102,7 @@ &[disabled], &:disabled { ~ .form-check-label { + cursor: default; opacity: $form-check-label-disabled-opacity; } } @@ -123,12 +136,22 @@ background-position: $form-switch-checked-bg-position; @if $enable-gradients { - background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient); + background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient); } @else { background-image: escape-svg($form-switch-checked-bg-image); } } } + + &.form-check-reverse { + padding-right: $form-switch-padding-start; + padding-left: 0; + + .form-check-input { + margin-right: $form-switch-padding-start * -1; + margin-left: 0; + } + } } .form-check-inline { diff --git a/vendor/twbs/bootstrap/scss/forms/_form-control.scss b/vendor/twbs/bootstrap/scss/forms/_form-control.scss index 96423c530..e707c57ea 100644 --- a/vendor/twbs/bootstrap/scss/forms/_form-control.scss +++ b/vendor/twbs/bootstrap/scss/forms/_form-control.scss @@ -59,13 +59,13 @@ opacity: 1; } - // Disabled and read-only inputs + // Disabled inputs // // HTML5 says that controls under a fieldset > legend:first-child won't be // disabled if the fieldset is disabled. Due to implementation difficulty, we // don't honor that edge case; we style them as disabled anyway. - &:disabled, - &[readonly] { + &:disabled { + color: $input-disabled-color; background-color: $input-disabled-bg; border-color: $input-disabled-border-color; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. @@ -91,25 +91,6 @@ &:hover:not(:disabled):not([readonly])::file-selector-button { background-color: $form-file-button-hover-bg; } - - &::-webkit-file-upload-button { - padding: $input-padding-y $input-padding-x; - margin: (-$input-padding-y) (-$input-padding-x); - margin-inline-end: $input-padding-x; - color: $form-file-button-color; - @include gradient-bg($form-file-button-bg); - pointer-events: none; - border-color: inherit; - border-style: solid; - border-width: 0; - border-inline-end-width: $input-border-width; - border-radius: 0; // stylelint-disable-line property-disallowed-list - @include transition($btn-transition); - } - - &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { - background-color: $form-file-button-hover-bg; - } } // Readonly controls as plain text @@ -128,6 +109,10 @@ border: solid transparent; border-width: $input-border-width 0; + &:focus { + outline: 0; + } + &.form-control-sm, &.form-control-lg { padding-right: 0; @@ -153,12 +138,6 @@ margin: (-$input-padding-y-sm) (-$input-padding-x-sm); margin-inline-end: $input-padding-x-sm; } - - &::-webkit-file-upload-button { - padding: $input-padding-y-sm $input-padding-x-sm; - margin: (-$input-padding-y-sm) (-$input-padding-x-sm); - margin-inline-end: $input-padding-x-sm; - } } .form-control-lg { @@ -172,12 +151,6 @@ margin: (-$input-padding-y-lg) (-$input-padding-x-lg); margin-inline-end: $input-padding-x-lg; } - - &::-webkit-file-upload-button { - padding: $input-padding-y-lg $input-padding-x-lg; - margin: (-$input-padding-y-lg) (-$input-padding-x-lg); - margin-inline-end: $input-padding-x-lg; - } } // Make sure textareas don't shrink too much when resized @@ -200,7 +173,7 @@ textarea { .form-control-color { width: $form-color-width; - height: auto; // Override fixed browser height + height: $input-height; padding: $input-padding-y; &:not(:disabled):not([readonly]) { @@ -208,12 +181,14 @@ textarea { } &::-moz-color-swatch { - height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height); + border: 0 !important; // stylelint-disable-line declaration-no-important @include border-radius($input-border-radius); } &::-webkit-color-swatch { - height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height); @include border-radius($input-border-radius); } + + &.form-control-sm { height: $input-height-sm; } + &.form-control-lg { height: $input-height-lg; } } diff --git a/vendor/twbs/bootstrap/scss/forms/_form-select.scss b/vendor/twbs/bootstrap/scss/forms/_form-select.scss index 153ff6cd5..78c34b8fd 100644 --- a/vendor/twbs/bootstrap/scss/forms/_form-select.scss +++ b/vendor/twbs/bootstrap/scss/forms/_form-select.scss @@ -7,7 +7,6 @@ display: block; width: 100%; padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x; - // stylelint-disable-next-line property-no-vendor-prefix -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); diff --git a/vendor/twbs/bootstrap/scss/forms/_input-group.scss b/vendor/twbs/bootstrap/scss/forms/_input-group.scss index 140052936..83d52c51e 100644 --- a/vendor/twbs/bootstrap/scss/forms/_input-group.scss +++ b/vendor/twbs/bootstrap/scss/forms/_input-group.scss @@ -10,7 +10,8 @@ width: 100%; > .form-control, - > .form-select { + > .form-select, + > .form-floating { position: relative; // For focus state's z-index flex: 1 1 auto; width: 1%; @@ -19,7 +20,8 @@ // Bring the "active" form control to the top of surrounding elements > .form-control:focus, - > .form-select:focus { + > .form-select:focus, + > .form-floating:focus-within { z-index: 3; } @@ -96,15 +98,19 @@ // stylelint-disable-next-line no-duplicate-selectors .input-group { &:not(.has-validation) { - > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), - > .dropdown-toggle:nth-last-child(n + 3) { + > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), + > .dropdown-toggle:nth-last-child(n + 3), + > .form-floating:not(:last-child) > .form-control, + > .form-floating:not(:last-child) > .form-select { @include border-end-radius(0); } } &.has-validation { - > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu), - > .dropdown-toggle:nth-last-child(n + 4) { + > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), + > .dropdown-toggle:nth-last-child(n + 4), + > .form-floating:nth-last-child(n + 3) > .form-control, + > .form-floating:nth-last-child(n + 3) > .form-select { @include border-end-radius(0); } } @@ -114,7 +120,9 @@ $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)"; } - > :not(:first-child):not(.dropdown-menu)#{$validation-messages} { + > :not(:first-child):not(.dropdown-menu):not(.form-floating)#{$validation-messages}, + > .form-floating:not(:first-child) > .form-control, + > .form-floating:not(:first-child) > .form-select { margin-left: -$input-border-width; @include border-start-radius(0); } -- cgit v1.2.3