mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Add Sass docs (variables, mixins, and loops) to most pages (#32747)

Browse Source 
* 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 <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto
2021-02-10 19:29:59 -08:00
committed by GitHub
parent e50c11b8c6
commit 4c7a3e8adf
100 changed files with 942 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/forms/validation.md
+21 -5
View File
@@ -349,18 +349,34 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
</form>
{{< /example >}}
## Customizing
## Sass
Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
### Variables
Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin.
{{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}}
This is the Sass map from `_variables.scss`. Override this and recompile your Sass to generate different states:
### Mixins
Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles.
{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
### Map
This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
{{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}}
Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
This is the loop from `forms/_validation.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop:
### Loop
Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.
{{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}}
### Customizing
Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
Please note that **we do not recommend customizing `$form-validation-states` values without also modifying the `form-validation-state` mixin**.