CSS Error Fields

Forms errors - list errors Use class="error-fields" in each li when exist some labels with errors
There are mistakes in the form.
Block div with errors You can use class error-fields in a general box to fix all inputs like an error
There are mistakes in the form.
	                <form class="form mt-xl">
	<fieldset>
		<legend>Forms errors - list errors</legend>
		<em>Use class="error-fields" in each li when exist some labels with errors</em>
		<div  class="msg-ko">
			There are mistakes in the form.
		</div>

		<ol>
			<li class="error-fields">
				<label for="text-field-error">Text Field 100%
					<strong>Text error: Lorem ipsum dolor sit amet, is required</strong>
				</label>
				<input type="text" id="text-field-error" placeholder="Text field 100%" />
			</li>
			<li class="error-fields">
				<label for="text-field-error2">Text Field 100%
					<strong>Text error: Lorem ipsum dolor sit amet, is required</strong>
				</label>
				<input type="text" id="text-field-error2" class="w-50" placeholder="Text field 50% - w-50" required />
			</li>
			<li>
				<label for="text-field-error2">Label without errors</label>
				<input type="text" id="text-field-error2" class="w-50" placeholder="Text field 50% - w-50" required />
			</li>
		</ol>
	</fieldset>

	<fieldset class="error-fields">
		<legend>Block div with errors</legend>
		<em>You can use class error-fields in a general box to fix all inputs like an error</em>
		<div  class="msg-ko ">
			There are mistakes in the form.
		</div>

		<ol>
			<li>
				<label for="text-field-error3">Label
					<strong>Text error: Lorem ipsum dolor sit amet, is required</strong>
				</label>
				<input type="text" id="text-field-error3" placeholder="Text field 100%" />
			</li>
			<li>
				<label for="text-field-error4">Label
					<strong>Text error: Lorem ipsum dolor sit amet, is required</strong>
				</label>
				<input type="text" id="text-field-error4" placeholder="Text field 100%" />
			</li>
		</ol>
	</fieldset>
	<button type="submit" class="button-primary">Continue</button>
</form>
                

Customize the appearance

You can customize the appearance of this object by setting up in your config folder the following map. By default de values are the indicated here.

 $object-forms-vars-custom: (
// Field
field-font-family: $font-face-default,
field-font-size: $font-size-default,
field-font-weight: normal,
field-background: #FFF,
field-color: #000,
field-padding: $spacing/2 $spacing/2,
field-margin: 0 0 $spacing,
field-border-radius: 2px,
field-border: 1px solid rgba($color-foreground, .3),
field-box-shadow: "inset 0 2px 8px rgba(#{$color-foreground}, .2), 0 1px 1px rgba(#{$color-background}, .5)",
field-placeholder-color: rgba($color-foreground, .3),
// Field focus
field-focus-border: rgba($color-primary, .5),
field-focus-background: lighten($color-primary, 50),

// Field error
field-error-border: 1px solid adjust-lightness($color-ko, 10%),
field-error-background: adjust-lightness($color-ko, 42%)
) !global !default;