pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust the margin around usa-input elements globally, fix any styling side effects from the change

Browse Source
This commit is contained in:
leigh-mil 2019-10-10 12:49:33 -04:00
parent a6e7995a85
commit 14ea3cd973
5 changed files with 16 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
styles/elements/_inputs.scss
View File

@ -57,13 +57,9 @@
} }
.usa-input { .usa-input {
margin: ($gap * 4) ($gap * 2) ($gap * 4) 0; margin: ($gap * 2) 0;
max-width: 75rem; max-width: 75rem;
@include media($medium-screen) {
margin: ($gap * 4) 0;
}
label { label {
padding: 0 0 ($gap / 2) 0; padding: 0 0 ($gap / 2) 0;
margin: 0; margin: 0;
@ -363,6 +359,8 @@ select {
margin-right: $gap * 4; margin-right: $gap * 4;
.usa-input { .usa-input {
margin: 0;
input, input,
label, label,
.usa-input__message { .usa-input__message {
@ -379,6 +377,8 @@ select {
margin-left: $gap * 4; margin-left: $gap * 4;
.usa-input { .usa-input {
margin: 0;
input { input {
max-width: 12rem; max-width: 12rem;
} }

6
styles/sections/_application_edit.scss
View File

@ -18,7 +18,6 @@
} }
.usa-input { .usa-input {
margin: 0 ($gap * 4) 0 0;
flex-grow: 2; flex-grow: 2;
} }
} }
@ -58,11 +57,8 @@
} }
} }
.form-row { .application-member__user-info {
margin-top: 0;
.usa-input { .usa-input {
margin: 0;
width: 45rem; width: 45rem;
input, input,

13
templates/applications/fragments/member_form_fields.html
View File

@ -52,20 +52,13 @@
{% endmacro %} {% endmacro %}
{% macro InfoFields(member_form) %} {% macro InfoFields(member_form) %}
<div class='form-row'> <div class="application-member__user-info">
</div>
{{ TextInput(member_form.first_name, validation='requiredField', optional=False) }} {{ TextInput(member_form.first_name, validation='requiredField', optional=False) }}
</div>
<div class='form-row'>
{{ TextInput(member_form.last_name, validation='requiredField', optional=False) }} {{ TextInput(member_form.last_name, validation='requiredField', optional=False) }}
</div>
<div class='form-row'>
{{ TextInput(member_form.email, validation='email', optional=False) }} {{ TextInput(member_form.email, validation='email', optional=False) }}
</div>
<div class="form-row">
{{ PhoneInput(member_form.phone_number, member_form.phone_ext)}} {{ PhoneInput(member_form.phone_number, member_form.phone_ext)}}
</div>
<div class='form-row'>
{{ TextInput(member_form.dod_id, validation='dodId', optional=False) }} {{ TextInput(member_form.dod_id, validation='dodId', optional=False) }}
</div>
<a href="#">How do I find the DoD ID?</a> <a href="#">How do I find the DoD ID?</a>
{% endmacro %} {% endmacro %}

2
templates/components/phone_input.html
View File

@ -1,7 +1,7 @@
{% from "components/text_input.html" import TextInput %} {% from "components/text_input.html" import TextInput %}
{% macro PhoneInput(phone_number, phone_ext, placeholder_phone="", phone_optional=True, extension_optional=True) %} {% macro PhoneInput(phone_number, phone_ext, placeholder_phone="", phone_optional=True, extension_optional=True) %}
<div class='phone-input'> <div class='usa-input phone-input'>
<div class='phone-input__phone'> <div class='phone-input__phone'>
{{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone', optional=phone_optional) }} {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone', optional=phone_optional) }}
</div> </div>

4
translations.yaml
View File

@ -314,7 +314,7 @@ portfolios:
step_1_button_text: "Save and Add Environments" step_1_button_text: "Save and Add Environments"
step_1_form_help_text: step_1_form_help_text:
name: | name: |
<div style="margin-top: -3rem;"> <div>
<p> <p>
The name of your application should be intuitive and easily recognizable for all of your team members. The name of your application should be intuitive and easily recognizable for all of your team members.
</p> </p>
@ -326,7 +326,7 @@ portfolios:
</p> </p>
</div> </div>
description: | description: |
<div style="margin-top: -3rem;"> <div>
<p> <p>
Add a brief one to two sentence description of your application. You should be able to reference your TO Description of Work. Add a brief one to two sentence description of your application. You should be able to reference your TO Description of Work.
</p> </p>