aboutsummaryrefslogtreecommitdiff
path: root/scss/mixins/_forms.scss
AgeCommit message (Collapse)AuthorFilesLines
2021-09-08Replace Sass division with multiplication and custom divide() functionMark Otto1-1/+1
Fixes #34353. Co-Authored-By: Slaven Tomac <[email protected]>
2021-03-10Adjust feedback icon position and padding for select.form-controlMark Otto1-0/+10
2021-02-15fix(forms): input-group and validation icons (#32968)Gaël Poupard1-2/+2
Fixes #30131 Issue mentions `form-control` but it impacts `.custom-select` — but not `textarea` since it has a qualifying type selector that increases its specificty. So another way could be to set `select.custom-select` and `input.form-control`. Would there be any other tag concerned by those classes? Co-authored-by: XhmikosR <[email protected]>
2020-11-13Manually backport #32121 (#32141)XhmikosR1-1/+1
Use correct value order Co-authored-by: Martijn Cuppens <[email protected]>
2020-10-30Fix form validation tooltip alignment (#31557)Adam Jones1-0/+7
* Fix form validation tooltip alignment * Remove CSS hacks * Update _forms.scss Co-authored-by: Gaël Poupard <[email protected]> Co-authored-by: XhmikosR <[email protected]>
2020-06-04fix(forms): IE11 misalign validation tooltips in input-groups (#30960)Gaël Poupard1-0/+1
2020-04-13Backport #30480Martijn Cuppens1-2/+2
Use `box-shadow` mixin for form controls
2019-11-26Release v4.4.0 (#29735)v4.4.0XhmikosR1-1/+1
2019-11-25Sass: fix version in deprecation messages.XhmikosR1-1/+1
The final version will be bumped when the next version is released.
2019-10-14Fix top level ampersand (#29518)Martijn Cuppens1-3/+5
Fixes dart sass compatibility.
2019-09-26Don't bind validation to form controlsMartijn Cuppens1-30/+7
2019-07-30Backport "Use escape-svg() function (#29077)"Martijn Cuppens1-2/+2
Adapted for v4-dev.
2019-05-30Fix background position (#28814)Sezer Esen1-1/+1
2019-04-29Prevent form validation mixin from generating invalid CSS (#28447)Mark Otto1-14/+19
Extrapolates the previously used selector into a new mixin that only generates valid CSS by creating psuedo-classes for `valid` and `invalid`, and nothing else. Fixes #28380.
2019-03-01Deprecate form-control-focus mixin (#28262)Martijn Cuppens1-1/+2
2019-02-07Responsive font size implementation (#23816)Martijn Cuppens1-5/+5
2019-01-25Fix validated custom select bg color (#28119)Shohei Yoshida1-1/+1
2019-01-11Add form-validation-states Sass map (#27999)Mark Otto1-9/+3
2018-10-23Custom select validation padding fix and additional custom select feedback ↵Martijn Cuppens1-7/+3
icon variables
2018-10-23Cleanup stylelint commentsMartijn Cuppens1-2/+1
2018-10-21Custom checkboxes and radios retheming (#27064)Martijn Cuppens1-2/+7
2018-09-18Add new variables for form feedback tooltips (#26959)Mark Otto1-5/+5
Fixes #26886
2018-09-02#27112: fix border focus border colorMartijn Cuppens1-2/+1
2018-07-29Merge branch 'form-validation-icons' into v4-devMark Otto1-1/+53
2018-07-20Update validation tooltips to use tooltip vars (#26887)Mark Otto1-6/+6
Updates the properties and values for which we have existing variables to match our tooltips. Come 4.2, we'll create new tooltips for these.
2018-07-14fixes #26579Mark Otto1-1/+1
2018-07-08disable to fix ciMark Otto1-0/+2
2018-07-08Restore feedback icons on validated form fieldsMark Otto1-1/+51
- Only applies to textual inputs and textareas with `.form-control` and selects with `.custom-select` - Wrap the feedback icons in a Sass variable option, $enable-validation-icons, so folks who theme can disable - Update docs to summarize styles, mention the icons, include a textarea demo, and add mention of the Sass variable option to the Theming section
2018-04-23add validation styles for .form-control-file (#26181)Mark Otto1-0/+10
2018-03-12Replace "loose" HEX values with their respective variables (#25672)Jacob Müller1-1/+1
2018-01-05add validation feedback/tooltip support to form-check-inputsJesse Mandel1-0/+5
2018-01-02Validation tooltip example (#25143)Mark Otto1-2/+1
* Add additional form validation examples Fixes #24811. This adds .valid-feedback to our custom styles and server side examples; previously we ommitted this to suggest you don't always need valid feedback. In addition, this adds examples of the .{valid|invalid}-tooltip classes with a new subsection in the Validation docs. * Update validation tooltip styles to remove fixed width; instead should retain itself to the parent element * update ids * finish docs paragraph, mention position: relative
2017-12-26Rewrite custom file inputMark Otto1-2/+15
- Changes the wrapping label to a div so we can style the label instead of another element while also supporting form validation. - Fixes form validation styles for custom file input (closes #24831). - Updates docs with validation styles (also adding example feedback text while I was there) and new how it works section.
2017-12-22Form check markup v2 (#25050)Mark Otto1-10/+8
* match layout behaviors * ditch the indicator as separate element for psuedo-elements on the label * move disabled to attribute only on input * redo default inline check to support new markup * redo inline forms * clean up vars * update validation mixin to new structure * update checks in docs * linting for for/id attributes
2017-12-22Rewrite input group component (#25020)Mark Otto1-0/+1
* Rewrite input group component * Set the feedback to 100% width for input group * Move from .row to .form-row for tighter layout * no need for custom feedback here, we're using browser messaging * add input group to validation examples * add note about validating multiple * migration note added
2017-11-24Rewrite custom form check backgrounds (#24697)Mark Otto1-1/+6
* Rewrite custom form check backgrounds Previously, this was all just a background-color and background-image. When we restored the gradients though, we had two background-images competing on the same element, causing rendering glitches. This refactors that code, creating a mixin to simplify things, so we can we easily use two background-images (SVG icon and gradient) when -gradients is set to true. Fixes #24598 * restore default vars * Revamp custom check and radio backgrounds Instead of applying multiple background-image's to the same element, we're adding a new ::before pseudo-element to layer the background-images. Gradients go on the .custom-control-indicator while their icons go on the ::before element. This allows us to shave some bytes from when we compile and we previously needed to redeclare the background-image for the icon if you changed the gradient. * remove now unused mixin * mention change in migration docs
2017-11-15Adds variables for form validation messages (#24767)Andres Galante1-2/+2
2017-11-06fixes #24553: override border-color on focus of custom select with form ↵Mark Otto1-0/+1
validation (#24695)
2017-11-06Minor Sass consistency changes. (#24677)XhmikosR1-1/+1
* use `background-color` instead of the shorthand * use `outline: 0` consistently * fix transform order * remove quotes from `SFMono-Regular`
2017-10-25update new focus and shadow properties to use varsMark Otto1-5/+5
2017-10-22fix custom file input tooMark Otto1-1/+3
2017-10-22match space after comma, darken invalid/valid bg color on custom checksMark Otto1-4/+4
2017-10-22use rgba() so it's not at full opacityMark Otto1-1/+1
2017-10-21really fix indentation, reorderMark Otto1-4/+5
2017-10-21use vars, fix indentationMark Otto1-4/+3
2017-10-20Sass correctionSharrell Porter1-1/+5
2017-10-20sync-commits erge branch 'v4-dev' into custom-checkboxes-radios-correct-colorSharrell Porter1-1/+6
2017-10-19Gradients and shadows (#24429)Mark Otto1-1/+6
* Update the form focus mixin to use a manual `$enable-shadows` check so we can always ensure a focus state for accessibility and consistency * - Add new `$input-btn-focus-width` and `$input-btn-focus-color` variables. - Replace separate `$btn-focus-box-shadow` and `$input-focus-box-shadow` variables with unified `$input-btn-focus-box-shadow` to match our combined variables approach elsewhere. * Put new focus width var to use in buttons mixins * use new button input-box shadow var * Add a new mixin for quickly adding linear gradient to components when $enable-gradients is set to true * use correct var * fix focus shadows in button mixins * Add opt-in gradients to alerts, buttons, carousel, custom radios and checkboxes, custom file input, and dropdown items * Generate .bg-gradient- utilities * add headings to colors page and document bg-gradient utils * update the button color for active status, check with yiq as it's done for basic state and hover state
2017-10-16correcting colorSharrell Porter1-0/+1
2017-10-02Form Validation `.valid-feedback` and `.valid-tooltip` are unstyled (#23527)Patrick Yeo1-0/+22
generated by cgit v1.2.3 (git 2.25.1) at 2026-07-02 17:10:35 +0000