From bdffdb93807fccefa524b64fc183b055a8d25591 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 8 Mar 2021 19:00:06 +0200 Subject: Update devDependencies (#33307) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * @popperjs/core ^2.9.0 → ^2.9.1 * autoprefixer ^10.2.4 → ^10.2.5 * clean-css-cli ^5.2.0 → ^5.2.1 * postcss ^8.2.6 → ^8.2.7 * stylelint ^13.11.0 → ^13.12.0 --- scss/forms/_form-control.scss | 4 ---- 1 file changed, 4 deletions(-) (limited to 'scss/forms') diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index bac416f8c..9728b91f3 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -73,7 +73,6 @@ } // File input buttons theming - // stylelint-disable-next-line selector-pseudo-element-no-unknown &::file-selector-button { padding: $input-padding-y $input-padding-x; margin: (-$input-padding-y) (-$input-padding-x); @@ -89,7 +88,6 @@ @include transition($btn-transition); } - // stylelint-disable-next-line selector-pseudo-element-no-unknown &:hover:not(:disabled):not([readonly])::file-selector-button { background-color: $form-file-button-hover-bg; } @@ -150,7 +148,6 @@ @include font-size($input-font-size-sm); @include border-radius($input-border-radius-sm); - // stylelint-disable-next-line selector-pseudo-element-no-unknown &::file-selector-button { padding: $input-padding-y-sm $input-padding-x-sm; margin: (-$input-padding-y-sm) (-$input-padding-x-sm); @@ -170,7 +167,6 @@ @include font-size($input-font-size-lg); @include border-radius($input-border-radius-lg); - // stylelint-disable-next-line selector-pseudo-element-no-unknown &::file-selector-button { padding: $input-padding-y-lg $input-padding-x-lg; margin: (-$input-padding-y-lg) (-$input-padding-x-lg); -- cgit v1.2.3 From 17252bb3b0c751ad2be1c1c1226ebcf43e7967f3 Mon Sep 17 00:00:00 2001 From: harishhalodoc <80090779+harishhalodoc@users.noreply.github.com> Date: Sun, 18 Apr 2021 03:03:27 +0530 Subject: use `:read-only` css selector instead `[readonly]` for consistency (#33642) There are 5 places where [readonly] selector is used. I have replaced with :read-only for consistency. fix for https://github.com/twbs/bootstrap/issues/33101 Co-authored-by: Harish --- scss/forms/_form-control.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'scss/forms') diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 9728b91f3..5e43aea99 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -25,7 +25,7 @@ &[type="file"] { overflow: hidden; // prevent pseudo element button overlap - &:not(:disabled):not([readonly]) { + &:not(:disabled):not(:read-only) { cursor: pointer; } } @@ -65,7 +65,7 @@ // 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] { + &:read-only { 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. @@ -88,7 +88,7 @@ @include transition($btn-transition); } - &:hover:not(:disabled):not([readonly])::file-selector-button { + &:hover:not(:disabled):not(:read-only)::file-selector-button { background-color: $form-file-button-hover-bg; } @@ -107,7 +107,7 @@ @include transition($btn-transition); } - &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { + &:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button { background-color: $form-file-button-hover-bg; } } @@ -203,7 +203,7 @@ textarea { height: auto; // Override fixed browser height padding: $input-padding-y; - &:not(:disabled):not([readonly]) { + &:not(:disabled):not(:read-only) { cursor: pointer; } -- cgit v1.2.3 From 1e4b924aa9fcf1e4bbba586243ad72ae9972dcea Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 13 May 2021 07:01:46 -0700 Subject: Revert "use `:read-only` css selector instead `[readonly]` for consistency (#33642)" (#33961) This reverts commit 17252bb3b0c751ad2be1c1c1226ebcf43e7967f3. Co-authored-by: XhmikosR --- scss/forms/_form-control.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'scss/forms') diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 5e43aea99..9728b91f3 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -25,7 +25,7 @@ &[type="file"] { overflow: hidden; // prevent pseudo element button overlap - &:not(:disabled):not(:read-only) { + &:not(:disabled):not([readonly]) { cursor: pointer; } } @@ -65,7 +65,7 @@ // disabled if the fieldset is disabled. Due to implementation difficulty, we // don't honor that edge case; we style them as disabled anyway. &:disabled, - &:read-only { + &[readonly] { 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. @@ -88,7 +88,7 @@ @include transition($btn-transition); } - &:hover:not(:disabled):not(:read-only)::file-selector-button { + &:hover:not(:disabled):not([readonly])::file-selector-button { background-color: $form-file-button-hover-bg; } @@ -107,7 +107,7 @@ @include transition($btn-transition); } - &:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button { + &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { background-color: $form-file-button-hover-bg; } } @@ -203,7 +203,7 @@ textarea { height: auto; // Override fixed browser height padding: $input-padding-y; - &:not(:disabled):not(:read-only) { + &:not(:disabled):not([readonly]) { cursor: pointer; } -- cgit v1.2.3 From bdde9b50a65a51a521a8ab98d3d9fb9d904425f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Tue, 25 May 2021 07:31:30 +0200 Subject: Fix x-paddings for select (with floating label, and in Firefox) (#34008) --- scss/forms/_floating-labels.scss | 3 ++- scss/forms/_form-select.scss | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) (limited to 'scss/forms') diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 8b2e2b8eb..09d9294dc 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -4,7 +4,6 @@ > .form-control, > .form-select { height: $form-floating-height; - padding: $form-floating-padding-y $form-floating-padding-x; } > label { @@ -21,6 +20,8 @@ // stylelint-disable no-duplicate-selectors > .form-control { + padding: $form-floating-padding-y $form-floating-padding-x; + &::placeholder { color: transparent; } diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 15d5061ad..70256255a 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -7,6 +7,8 @@ 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); font-weight: $form-select-font-weight; -- cgit v1.2.3 From 649c2bb0bf326db36cbbf7e72c0541b19749a70e Mon Sep 17 00:00:00 2001 From: Simon Ihmig Date: Fri, 28 May 2021 09:20:31 +0200 Subject: Add missing transition to `.form-select` (#34034) A selectbox is styled in a very similar way as an input (`.form-control`), including border-color and box-shadow. So it can be assumed it should apply the same CSS transition for these properties when focused, but this was missing. Co-authored-by: alpadev <2838324+alpadev@users.noreply.github.com> --- scss/forms/_form-select.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss/forms') diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 70256255a..4506a979a 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -22,6 +22,7 @@ border: $form-select-border-width solid $form-select-border-color; @include border-radius($form-select-border-radius, 0); @include box-shadow($form-select-box-shadow); + @include transition($form-select-transition); appearance: none; &:focus { -- cgit v1.2.3 From dbda13d5ef6897be41f1e872667f6aa30860efb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Thu, 3 Jun 2021 18:02:46 +0200 Subject: fix(forms): unitless `line-height` for floating labels (#34161) Co-authored-by: Mark Otto Co-authored-by: XhmikosR --- scss/forms/_floating-labels.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss/forms') diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 09d9294dc..2f4295480 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -4,6 +4,7 @@ > .form-control, > .form-select { height: $form-floating-height; + line-height: $form-floating-line-height; } > label { -- cgit v1.2.3 From be17444756c48e3a892c36507f859cd841bd8c1f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 Jun 2021 09:35:30 -0700 Subject: Replace `/` division with multiplication and custom `divide()` function (#34245) * Convert bulk of division to multiplication * Use custom divide() function instead of Dart Sass math module for greater compatibility * Apply suggestions from code review * Fix functions --- scss/forms/_form-check.scss | 2 +- scss/forms/_form-range.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'scss/forms') diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index b34250a71..6321b4100 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -17,7 +17,7 @@ .form-check-input { width: $form-check-input-width; height: $form-check-input-width; - margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height + 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-repeat: no-repeat; diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss index ae1d841d5..6de42132e 100644 --- a/scss/forms/_form-range.scss +++ b/scss/forms/_form-range.scss @@ -27,7 +27,7 @@ &::-webkit-slider-thumb { width: $form-range-thumb-width; height: $form-range-thumb-height; - margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific + margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific @include gradient-bg($form-range-thumb-bg); border: $form-range-thumb-border; @include border-radius($form-range-thumb-border-radius); -- cgit v1.2.3 From 054f8781a86b16c3793eaf424093a5d4cfb37114 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Wed, 14 Jul 2021 08:19:28 +0200 Subject: fix(forms): prevent color control from shrinking (#34445) * fix(forms): prevent color control from shrinking Fixes #34195 Setting `min-width` alongside `max-width` wouldn't make any sense IMHO. The only concern I have is whether we should introduce a dedicated variable for said width? * feat(forms): introduce ` $form-color-width` * feat(forms): use ` $form-color-width` Co-authored-by: XhmikosR --- scss/forms/_form-control.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss/forms') diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 9728b91f3..96423c530 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -199,7 +199,7 @@ textarea { // stylelint-enable selector-no-qualifying-type .form-control-color { - max-width: 3rem; + width: $form-color-width; height: auto; // Override fixed browser height padding: $input-padding-y; -- cgit v1.2.3