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

View File

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