Style form labels for inputs correctly

This commit is contained in:
luis cielak 2018-08-08 13:46:48 -04:00
parent df773855d5
commit 17e9344f6e
2 changed files with 13 additions and 11 deletions

View File

@ -65,20 +65,12 @@
} }
label { label {
padding: 0 0 $gap 0; padding: 0;
margin: 0; margin: 0;
@include h4; @include h4;
@include line-max; @include line-max;
position: relative; position: relative;
.usa-input__help {
display: block;
@include h5;
font-weight: normal;
padding-top: $gap / 2;
@include line-max;
}
.icon { .icon {
position: absolute; position: absolute;
left: 100%; left: 100%;
@ -88,6 +80,14 @@
} }
} }
.usa-input__help {
display: block;
@include h4;
font-weight: normal;
padding: $gap/2 0;
@include line-max;
}
input, input,
textarea, textarea,
select { select {
@ -103,6 +103,10 @@
.icon { .icon {
vertical-align: middle; vertical-align: middle;
} }
.usa-input__help {
font-weight: $font-bold;
}
} }
ul { ul {

View File

@ -1,6 +1,5 @@
{% macro TextInput(field, placeholder='') -%} {% macro TextInput(field, placeholder='') -%}
<div class='usa-input {% if errors %}usa-input--error{% endif %}'> <div class='usa-input {% if errors %}usa-input--error{% endif %}'>
<label for={{field.name}}>
{{ field.label }} {{ field.label }}
{% if field.description %} {% if field.description %}
@ -10,7 +9,6 @@
{% if errors %} {% if errors %}
{{ Icon('alert') }} {{ Icon('alert') }}
{% endif %} {% endif %}
</label>
{{ field(placeholder=placeholder) | safe }} {{ field(placeholder=placeholder) | safe }}