Adjust spacing and sizing to match figma closer

This commit is contained in:
igorkorenfeld 2023-02-01 14:38:12 -05:00
parent 6f0af3d571
commit 008c639d24
No known key found for this signature in database
GPG key ID: 826947A4B867F659
5 changed files with 68 additions and 13 deletions

View file

@ -45,21 +45,37 @@ $letter-space--xs: .0125em;
font-weight: font-weight('semibold'); font-weight: font-weight('semibold');
line-height: line-height('heading', 3); line-height: line-height('heading', 3);
margin: units(4) 0 units(1); margin: units(4) 0 units(1);
}
&:first-of-type { //Tighter spacing when H2 is immediatly after H1
margin-top: units(2); .register-form-step .usa-fieldset:first-of-type h2:first-of-type,
} .register-form-step h1 + h2 {
} margin-top: units(1);
}
.register-form-step h3 { .register-form-step h3 {
color: color('primary-dark'); color: color('primary-dark');
letter-spacing: $letter-space--xs; letter-spacing: $letter-space--xs;
margin-top: units(3); margin-top: units(3);
margin-bottom: 0; margin-bottom: 0;
+ p {
margin-top: units(0.5);
}
}
.register-form-step h4 {
margin-bottom: 0;
+ p {
margin-top: units(0.5);
}
} }
.register-form-step p, .register-form-step p,
.dashboard p { .register-form-step .usa-list li,
.dashboard p
{
@include typeset('sans', 'sm', 5); @include typeset('sans', 'sm', 5);
max-width: measure(5); max-width: measure(5);
@ -77,6 +93,10 @@ $letter-space--xs: .0125em;
} }
} }
.register-form-step .usa-label:first-of-type {
margin-top: units(1);
}
a.breadcrumb__back { a.breadcrumb__back {
display:flex; display:flex;
align-items: center; align-items: center;
@ -114,8 +134,39 @@ a.breadcrumb__back {
margin-top: units(1); margin-top: units(1);
} }
.domain_example {
p {
margin-bottom: 0;
}
.usa-list {
margin-top: units(0.5);
}
}
.review__step {
margin-top: units(3);
&:first-of-type {
margin-top: units(4);
}
}
.review__step hr {
border: none; //reset
border-top: 1px solid color('primary-dark');
margin-top: 0;
margin-bottom: units(0.5);
}
.review__step__title a:visited {
color: color('primary');
}
.review__step__name { .review__step__name {
color: color('primary-dark');
font-weight: font-weight('semibold'); font-weight: font-weight('semibold');
margin-bottom: units(0.5);
} }
@ -123,6 +174,7 @@ a.breadcrumb__back {
#wrapper.dashboard { #wrapper.dashboard {
background-color: color('primary-lightest'); background-color: color('primary-lightest');
padding-top: units(5);
} }
section.dashboard { section.dashboard {
@ -231,9 +283,14 @@ section.dashboard {
main { main {
//Workaround because USWDS units jump from 10 to 15 ////Workaround because USWDS units jump from 10 to 15
padding-bottom: units(10) + units(2); //padding-bottom: units(10) + units(2);
padding-top: units(5); //padding-top: units(5);
}
#wrapper {
padding-top: units(3);
padding-bottom: units(6) * 2 ; //Workaround because USWDS units jump from 10 to 15
} }
footer { footer {

View file

@ -17,7 +17,7 @@
<p>Well try to give you the domain you want. We first need to make sure your request meets our requirements. Well work with you to find the best domain for your organization.</p> <p>Well try to give you the domain you want. We first need to make sure your request meets our requirements. Well work with you to find the best domain for your organization.</p>
<p>Here are a few domain examples for your type of organization.</p> <p>Here are a few domain examples for your type of organization.</p>
<div class="domain-example"> <div class="domain_example">
{% include "includes/domain_example.html" %} {% include "includes/domain_example.html" %}
</div> </div>
</div> </div>

View file

@ -9,7 +9,7 @@
<fieldset id="federal_type__fieldset" class="usa-fieldset"> <fieldset id="federal_type__fieldset" class="usa-fieldset">
<legend> <legend>
<h2>Which federal branch is your organization in?</h2> <h2>Which federal branch is your organization in?</h2>
<p class="margin-bottom-5">This question is required.</p> <p>This question is required.</p>
</legend> </legend>
{% radio_buttons_by_value forms.0.federal_type as choices %} {% radio_buttons_by_value forms.0.federal_type as choices %}
{% for choice in choices.values %} {% for choice in choices.values %}

View file

@ -7,7 +7,7 @@
{% csrf_token %} {% csrf_token %}
{% for step in steps.all|slice:":-1" %} {% for step in steps.all|slice:":-1" %}
<section class="review__step margin-top-205"> <section class="review__step">
<hr /> <hr />
<div class="review__step__title display-flex flex-justify"> <div class="review__step__title display-flex flex-justify">
<div class="review__step__value"> <div class="review__step__value">

View file

@ -8,12 +8,10 @@
{% elif federal_type == 'judicial' %} {% elif federal_type == 'judicial' %}
<p><strong>Examples:</strong></p> <p><strong>Examples:</strong></p>
<p>
<ul class="usa-list"> <ul class="usa-list">
<li> usprobation.gov </li> <li> usprobation.gov </li>
<li> ustaxcourt.gov </li> <li> ustaxcourt.gov </li>
</ul> </ul>
</p>
{% elif federal_type == 'legislative' %} {% elif federal_type == 'legislative' %}
<p><strong>Examples:</strong></p> <p><strong>Examples:</strong></p>