zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-04 17:01:56 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add initial styles for headings, typography, sidenav

Browse source
This commit is contained in:
igorkorenfeld 2022-12-02 18:38:35 -05:00
parent f77bbf4432
commit e844ac2785
No known key found for this signature in database
GPG key ID: 826947A4B867F659
3 changed files with 75 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss
View file

@ -26,3 +26,60 @@ i.e.
.sr-only {
@include sr-only;
}
h1 {
@include typeset('sans', '2xl', 2);
margin: units(0) auto units(1);
}
h2 {
font-weight: font-weight('semibold');
line-height: line-height('heading', 3);
margin: units(2) auto ;
// &:first-of-type {
// margin: 0 auto units(1);
// }
}
.reg-form-step p {
@include typeset('sans', 'sm', 5);
max-width: measure(5);
&:last-of-type {
margin-bottom: 0;
}
}
.reg-form-step a {
color: color('primary');
&:visited {
color: color('violet-70v'); //USWDS default
}
}
a.bread__back {
display:inline-block;
margin-bottom: units('205');
&:visited {
color: color('primary');
}
}
.sidenav__step--locked {
color: color('base-darker');
span {
display: flex;
align-items: flex-start;
padding: units(1);
.usa-icon {
flex-shrink: 0;
margin: units('2px') units(1) 0 0;
}
}
}
.stepnav {
margin-top: units(2);
}

18
src/registrar/templates/application_form.html
View file

@ -9,9 +9,9 @@
{% include 'application_sidebar.html' %}
</div>
<div class="grid-col-9">
<main id="main-content" class="grid-container">
<main id="main-content" class="grid-container reg-form-step">
{% if wizard.steps.prev %}
<a href="{% url wizard.url_name step=wizard.steps.prev %}">
<a href="{% url wizard.url_name step=wizard.steps.prev %}" class="bread__back">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="{%static 'img/sprite.svg'%}#arrow_back"></use>
</svg><span class="margin-left-05">Previous step </span>
@ -19,12 +19,14 @@
{% endif %}
<h1> {{form_titles|get_item:wizard.steps.current}} </h1>
{% block form_content %}
{% if wizard.steps.next %}
<button type="submit" class="usa-button">Next</button>
{% else %}
<button type="submit" class="usa-button">Submit your domain request</button>
{% endif %}
<button type="button" class="usa-button usa-button--outline">Save</button>
<div class="stepnav">
{% if wizard.steps.next %}
<button type="submit" class="usa-button">Next</button>
{% else %}
<button type="submit" class="usa-button">Submit your domain request</button>
{% endif %}
<button type="button" class="usa-button usa-button--outline">Save</button>
</div>
</main>
</div>
{% endblock %}

13
src/registrar/templates/application_sidebar.html
View file

@ -10,11 +10,14 @@
{{ form_titles|get_item:this_step }}
</a>
{% else %}
<li class="usa-sidenav__item step--locked">
{{ form_titles|get_item:this_step }}
<svg class="usa-icon" aria-labelledby="locked-step" role="img">
<title id="locked-step__{{forloop.counter}}">locked until previous steps have been completed </title>
<use xlink:href="{%static 'img/sprite.svg'%}#lock"></use>
<li class="usa-sidenav__item sidenav__step--locked">
<span>
<svg class="usa-icon" aria-labelledby="locked-step" role="img">
<title id="locked-step__{{forloop.counter}}">locked until previous steps have been completed </title>
<use xlink:href="{%static 'img/sprite.svg'%}#lock"></use>
</svg>
{{ form_titles|get_item:this_step }}
</span>
{% endif %}
</li>
{% endfor %}