// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group abide
////
/// Sets if error styles should be added to inputs.
/// @type Boolean
$abide-inputs: true !default;
/// Sets if error styles should be added to labels.
/// @type Boolean
$abide-labels: true !default;
/// Background color to use for invalid text inputs.
/// @type Color
$input-background-invalid: get-color(alert) !default;
/// Color to use for labels of invalid inputs.
/// @type Color
$form-label-color-invalid: get-color(alert) !default;
/// Default font color for form error text.
/// @type Color
$input-error-color: get-color(alert) !default;
/// Default font size for form error text.
/// @type Number
$input-error-font-size: rem-calc(12) !default;
/// Default font weight for form error text.
/// @type Keyword
$input-error-font-weight: $global-weight-bold !default;
/// Styles the background and border of an input field to have an error state.
///
/// @param {Color} $background [$alert-color] - Color to use for the background and border.
/// @param {Number} $background-lighten [10%] - Lightness level of the background color.
@mixin form-input-error(
$background: $input-background-invalid,
$background-lighten: 10%
) {
&:not(:focus) {
border-color: $background;
background-color: mix($background, $white, $background-lighten);
&::placeholder {
color: $background;
}
}
}
/// Adds error styles to a form element, using the values in the settings file.
@mixin form-error {
display: none;
margin-top: $form-spacing * -0.5;
margin-bottom: $form-spacing;
font-size: $input-error-font-size;
font-weight: $input-error-font-weight;
color: $input-error-color;
}
@mixin foundation-form-error {
@if $abide-inputs {
// Error class for invalid inputs
.is-invalid-input {
@include form-input-error;
}
}
@if $abide-labels {
// Error class for labels of invalid outputs
.is-invalid-label {
color: $form-label-color-invalid;
}
}
// Form error element
.form-error {
@include form-error;
&.is-visible {
display: block;
}
}
}
|
Download
