Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/bootstrap-rubygem.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGleb Mazovetskiy <glex.spb@gmail.com>2022-07-20 11:48:15 +0300
committerGleb Mazovetskiy <glex.spb@gmail.com>2022-07-20 11:48:15 +0300
commit003c627ea7589dbbd8aeff030353b8c5decb6fbf (patch)
tree8d97404ea5b287caf0ab8d07984042cd9c686397 /assets/stylesheets/bootstrap/forms
parentbadd3aed1ad8e7659485865687412ad3a27ff6a3 (diff)
Update to v5.2.0v5.2.0
bundle exec rake update[v5.2.0]
Diffstat (limited to 'assets/stylesheets/bootstrap/forms')
-rw-r--r--assets/stylesheets/bootstrap/forms/_floating-labels.scss17
-rw-r--r--assets/stylesheets/bootstrap/forms/_form-check.scss33
-rw-r--r--assets/stylesheets/bootstrap/forms/_form-control.scss49
-rw-r--r--assets/stylesheets/bootstrap/forms/_form-select.scss1
-rw-r--r--assets/stylesheets/bootstrap/forms/_input-group.scss22
5 files changed, 69 insertions, 53 deletions
diff --git a/assets/stylesheets/bootstrap/forms/_floating-labels.scss b/assets/stylesheets/bootstrap/forms/_floating-labels.scss
index 2f42954..acefe4e 100644
--- a/assets/stylesheets/bootstrap/forms/_floating-labels.scss
+++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/forms/_form-check.scss b/assets/stylesheets/bootstrap/forms/_form-check.scss
index 6321b41..42a2a96 100644
--- a/assets/stylesheets/bootstrap/forms/_form-check.scss
+++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/forms/_form-control.scss b/assets/stylesheets/bootstrap/forms/_form-control.scss
index 96423c5..e707c57 100644
--- a/assets/stylesheets/bootstrap/forms/_form-control.scss
+++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/forms/_form-select.scss b/assets/stylesheets/bootstrap/forms/_form-select.scss
index 153ff6c..78c34b8 100644
--- a/assets/stylesheets/bootstrap/forms/_form-select.scss
+++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/forms/_input-group.scss b/assets/stylesheets/bootstrap/forms/_input-group.scss
index 1400529..83d52c5 100644
--- a/assets/stylesheets/bootstrap/forms/_input-group.scss
+++ b/assets/stylesheets/bootstrap/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);
}