aboutsummaryrefslogtreecommitdiff
path: root/scss/mixins/_forms.scss
AgeCommit message (Collapse)AuthorFilesLines
2023-12-09Fix focus box-shadow for validation stated form-controls (#38719)Dmitry Karpunin1-2/+12
Co-authored-by: Dmitry Karpunin <[email protected]>
2022-11-28Add dark mode support (#35857)Mark Otto1-7/+8
* Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <[email protected]> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <[email protected]> * Apply suggestions from code review Co-authored-by: Julien Déramond <[email protected]> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Julien Déramond <[email protected]>
2022-08-31Fix input group z-index focus + validationFlorian Lacreuse1-10/+10
2022-02-28fix(forms): color input with validation iconGaël Poupard1-0/+8
2021-05-13Validated inputs in `.input-group` shouldn't be behind sibling element (#33644)Jatin Mehta1-1/+8
Added z-index property for input-group only for invalid state
2021-04-13Hide validation icons from multiple selectsGeremia Taglialatela1-11/+6
Implementation provided in #33411 does not take into account that some Operating Systems may display a vertical scrollbar in the multiple select field This implementation will hide the validation icons from multiple select fields, just like Bootstrap 4 does. Fix: #33591
2021-04-02Fix validation feedback icon in select multipleGeremia Taglialatela1-0/+8
Validation feedback for `<select multiple>` should look like `<textarea>`. The previous implementation was placing the validation icon in the middle of the select field together with the single select arrow, that is not supposed to be part of this kind of inputs
2021-03-01fix(forms): validated controls in input-groupGaël Poupard1-0/+7
2021-02-10Add input focus blur variableSam Willis1-1/+1
2021-02-10Add Sass docs (variables, mixins, and loops) to most pages (#32747)Mark Otto1-0/+3
* WIP: Mention variables, mixins, and loops in docs * Add Sass sections to component pages * add sass docs for forms and content * Update buttons.md * Remove empty mixins sections * Massive update to utilities and some consistency changes Co-authored-by: XhmikosR <[email protected]>
2020-12-17Extended form validation states customization capabilities (#31757)Dmytro Yaremenko1-6/+13
Co-authored-by: XhmikosR <[email protected]>
2020-12-04feat(RTL): implement RTLGaël Poupard1-1/+1
Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-10-28Drop custom file upload plugin in favor of CSSMartijn Cuppens1-16/+0
2020-05-15Improve gradientsMartijn Cuppens1-1/+1
- Use a semitransparent gradient from light to dark which works on any background-color - Store the gradient as a custom property (--bs-gradient) - Remove `.bg-gradient-*` variants in favour of `.bg-gradient` which works even when `$enable-gradients` are enabled - Add gradients to navbar, active page links and badges when gradients are enabled
2020-04-16feat: removes `.form-text` display (#30598)Catalin Zalog1-0/+1
Co-authored-by: Martijn Cuppens <[email protected]>
2020-03-23Use WCAG contrast algo (#30168)Gaël Poupard1-1/+1
2020-03-16fix(css): adds a new opacity varCatalin Zalog1-1/+1
Fixes beeing able to control `.is-valid` & `.is-invalid` input:focus opacity
2020-02-12Convert background shorthands to separate propertiesMartijn Cuppens1-1/+3
2019-12-14Remove the deprecated `form-control-focus` mixinXhmikosR1-28/+0
2019-10-28Update .form-check to properly support gradients when enabled (#29338)Mark Otto1-1/+1
2019-10-12Fix top level ampersand (#29518)Martijn Cuppens1-3/+5
Fixes dart sass compatibility.
2019-08-27Don't bind validation to form controlsMartijn Cuppens1-30/+7
2019-07-19Use escape-svg() function (#29077)Martijn Cuppens1-2/+2
* Use escape-svg() function * Update theming.md
2019-07-12v5: Forms update (#28450)Mark Otto1-37/+18
* Initial spike of consolidated form checks * Stub out forms rearrangement - Prepping to drop non-custom file and range inputs - Prepping to merge custom and native checks and radios (with switches) - Prepping to merge custom select with form select - Moving docs arround so forms has it's own area given volume of CSS * Move input group Sass file to forms subdir * Start to split and move the docs around * Simpler imports * Copyediting * delete overview file * Remove commented out code * remove the custom-forms import * rewrite flex-check as form-check, replace all custom properties * Remove old forms doc * stub out new subpage link section * update migration guide * Update nav, forms overview in page nav, and descriptions * fix check bg position * fix margin-top calculation * rename .custom-select to .form-select * Update validation styles for new checks * add some vertical margin, fix inline checks * fix docs examples * better way to do this contents stuff, redo the toc while i'm at it * page restyle for docs while here * un-callout that, edit text * redo padding on toc * fix toc * start to cleanup checks docs * Rewrite Markdown tables into HTML * Redesign tables, redo their docs * Replace Open Iconic icons with custom Bootstrap icons * Redesign the docs navbar, add a subheader, redo the sidebar * Redesign docs homepage a bit * Simplify table style overrides for docs tables * Simplify docs typography for page titles and reading line length * Stub out icons page * Part of sidebar update, remove migration from nav.yml * Move toc CSS to separate partial * Change appearance of overview page * fix sidebar arrow direction * Add footer to docs layout * Update descriptions * Drop the .form-group class for margin utilities * Remove lingering form-group-margin-bottom var * improve footer spacing * add headings to range page * uncomment form range css * Rename .custom-range to .form-range * Drop unused docs var * Uncomment the comment * Remove unused variable * Fix radio image sizing * Reboot update: reset horizontal ul and ol padding * de-dupe IDs * tweak toc styles * nvm, fix dropdown versions stuff * remove sidebar nav toggle for now * broken html * fix more broken html, move css * scss linting * comment out broken helper docs * scope styles * scope styles * Fixes #25540 and fixes #26407 for v5 only * Update sidebar once more * Match new sidenav order * fix syntax error * Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696 * rename back * fix size and alignment * rename that back too
2019-05-26Fix background position (#28814)Sezer Esen1-1/+1
2019-04-25Prevent 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-02-15Deprecate 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)
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 20:02:33 +0000