Apply max width to all input elements.

Update form class with better name and add form-conrainer--narrow class.
This commit is contained in:
leigh-mil 2020-02-17 11:05:43 -05:00
parent bd14955a6a
commit 2665094136
10 changed files with 18 additions and 17 deletions

View File

@ -22,8 +22,9 @@
}
.usa-input {
input {
max-width: none;
input,
textarea {
max-width: $max-input-width;
}
}
}
@ -204,6 +205,10 @@
}
}
.form-container__half {
max-width: 46rem;
.form-container {
margin-bottom: $action-footer-height + $large-spacing;
&--narrow {
max-width: $max-input-width;
}
}

View File

@ -98,7 +98,3 @@ hr {
.usa-section {
padding: 0;
}
.form {
margin-bottom: $action-footer-height + $large-spacing;
}

View File

@ -21,6 +21,7 @@ $home-pg-icon-width: 6rem;
$large-spacing: 4rem;
$max-page-width: $max-panel-width + $sidenav-expanded-width + $large-spacing;
$action-footer-height: 6rem;
$max-input-width: 46rem;
/*
* USWDS Variables

View File

@ -58,7 +58,7 @@
.usa-input {
margin: ($gap * 2) 0;
max-width: 75rem;
max-width: $max-input-width;
&-label-helper {
font-size: $small-font-size;
@ -111,8 +111,7 @@
@include h5;
font-weight: normal;
@include line-max;
max-width: $max-input-width;
.icon-link {
padding: 0 ($gap / 2);

View File

@ -22,7 +22,7 @@
{% include "fragments/flash.html" %}
<base-form inline-template :enable-save="true">
<form method="POST" action="{{ action }}" v-on:submit="handleSubmit" class="form">
<form method="POST" action="{{ action }}" v-on:submit="handleSubmit" class="form-container">
{{ form.csrf_token }}
<div class="form-row">
<div class="form-col">

View File

@ -21,7 +21,7 @@
</p>
<hr>
<application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
<form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit" class="form">
<form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit" class="form-container">
<div class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>
<div class="panel">
<div class="panel__content">

View File

@ -20,7 +20,7 @@
{% if user_can(permissions.EDIT_APPLICATION) %}
<base-form inline-template>
<form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}" class="col col--half">
<form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}" class="form-container--narrow">
{{ application_form.csrf_token }}
{{ TextInput(application_form.name, validation="applicationName", optional=False) }}
{{ TextInput(application_form.description, validation="defaultTextAreaField", paragraph=True, optional=True, showOptional=False) }}

View File

@ -13,7 +13,7 @@
<div v-cloak class="portfolio-admin">
{% include "fragments/flash.html" %}
<!-- max width of this section is 460px -->
<section class="form-container__half">
<section class="form-container--narrow">
<h3>Portfolio name and component</h3>
{% if user_can(permissions.EDIT_PORTFOLIO_NAME) %}
<base-form inline-template>

View File

@ -19,7 +19,7 @@
{{ StickyCTA(text="portfolios.new.cta_step_1"|translate, context=("portfolios.new.sticky_header_context"|translate({"step": "1"}) )) }}
<base-form inline-template>
<div class="row">
<form id="portfolio-create" class="col form" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
<form id="portfolio-create" class="col form-container" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
{{ form.csrf_token }}
<div class="form-row form-row--bordered">
<div class="form-col">

View File

@ -28,7 +28,7 @@
{% include "fragments/flash.html" %}
<div class="task-order form">
<div class="task-order form-container">
{% block to_builder_form_field %}{% endblock %}
</div>
<div