Bootstrap‐based form mixin - humanbit-dev-org/templates GitHub Wiki
Utility helper built to enable the styling of one of the most complex ecosystems in web development at a glance.
In this mixin, style parameters are declared as null so as to make their redeclaration as scoped property-value pair arguments possible for the sake of readability.
The idea was to establish two primary logical states (each further divided into smaller steps) for <form> elements:
- Initial/final state (when the element is untouched or complete).
- Transformed state (when the element is interacted with).
Here's the overall animation process:
- Sets element's initial state (
color,background-color,border). -
:hoverand:active(click) states trigger minor transition effects (such ascursororopacity). -
:focusstate changes main properties (color,background-color). - Upon typing or selecting an
<option>,border-colorandbox-shadowbecome active. - Once value is properly filled and
:focusstate is removed, most styles return to their initial state.
NOTE: You can start from step 3 (using the initial palette) by adding the .label-placeholder class together with .form-control.
The .input_spacing class is designed to regulate the global spacing between individual <form> elements and it should be placed on an independent (meaning either one level above or instead of .form-floating) outer wrapper for each input-like block to ensure proper functionality.