Permalink
Fetching contributors…
Cannot retrieve contributors at this time
134 lines (105 sloc) 2.96 KB
/// Global namespace for form component
/// @access public
/// @group form
/// @type string
$DBform-namespace: "c-form" !default;
/// Global namespace for label component
/// @access public
/// @group form
/// @type string
$DBlabel-namespace: "c-label" !default;
/// Global namespace for input component
/// @access public
/// @group form
/// @type string
$DBinput-namespace: "c-input" !default;
/// Text color for label component
/// @access public
/// @group form
/// @type color
$DBlabel-color: color(gray, medium) !default;
/// Text color for input component
/// @access public
/// @group form
/// @type color
$DBinput-color: color(gray) !default;
/// Disabled text color for input component
/// @access public
/// @group form
/// @type color
$DBinput-color-disabled: color(gray, 0.7) !default;
/// Border color for input component
/// @access public
/// @group form
/// @type color
$DBinput-border: color(gray, x-dark, 0.1) !default;
/// Focus border color for input component
/// @access public
/// @group form
/// @type color
$DBinput-border-focused: color(blue, medium) !default;
/// Background color for input component
/// @access public
/// @group form
/// @type color
$DBinput-background: color(white) !default;
/// Disabled background color for input component
/// @access public
/// @group form
/// @type color
$DBinput-background-disabled: color(gray, x-light) !default;
// Label component
.#{$DBlabel-namespace} {
// Ensure the element is actually a label
@include assert-selector(label);
display: block;
margin-bottom: $DBbaseline;
font-size: 12px;
color: $DBlabel-color;
}
// Input component
.#{$DBinput-namespace} {
// Ensure the element is actually a kind of input
@include assert-selector(input, button, select, textarea);
display: block;
width: 100%;
padding: 5px 7px;
box-sizing: border-box;
font-size: $DBfont-size;
text-align: left;
color: $DBinput-color;
border: 1px solid $DBinput-border;
border-radius: 3px;
background-color: $DBinput-background;
background-clip: padding-box;
&:focus {
border-color: $DBinput-border-focused;
outline: 0;
}
&:disabled, &.is-disabled {
background-color: $DBinput-background-disabled;
}
&.is-invalid,
.#{$DBform-namespace}--validated &:invalid {
@include background-image("icon-form-invalid.svg", 14px, right 10px center);
padding-right: 34px;
border-color: color(red, 0.5);
// Override default invalidation styles
box-shadow: none;
outline: 0;
}
&.is-valid,
.#{$DBform-namespace}--validated &:valid {
@include background-image("icon-form-valid.svg", 14px, right 10px center);
padding-right: 34px;
}
}
// Textarea component
textarea.#{$DBinput-namespace} {
resize: vertical;
}
// Select component
select.#{$DBinput-namespace} {
@include background-image("icon-form-dropdown.svg", 7px 14px, right 10px center);
padding-right: 27px;
}