diff options
Diffstat (limited to 'site/content/docs/5.2/forms/form-control.md')
| -rw-r--r-- | site/content/docs/5.2/forms/form-control.md | 10 |
1 files changed, 9 insertions, 1 deletions
diff --git a/site/content/docs/5.2/forms/form-control.md b/site/content/docs/5.2/forms/form-control.md index 4d6972d1d..4df1caa2b 100644 --- a/site/content/docs/5.2/forms/form-control.md +++ b/site/content/docs/5.2/forms/form-control.md @@ -8,6 +8,8 @@ toc: true ## Example +Form controls are styled with a mix of Sass and CSS variables, allowing them to adapt to color modes and support any customization method. + {{< example >}} <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email address</label> @@ -133,10 +135,16 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist). </datalist> {{< /example >}} -## Sass +## CSS ### Variables +Form controls make use of a small amount of CSS variables to support custom styling across color modes. + +{{< scss-docs name="form-control-vars" file="scss/_root.scss" >}} + +### Sass variables + `$input-*` are shared across most of our form controls (and not buttons). {{< scss-docs name="form-input-variables" file="scss/_variables.scss" >}} |