mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-05 17:28:31 +02:00
Merge branch 'main' into sspj/save-application
This commit is contained in:
Seamus Johnston
commit
07993a8d75
10 changed files with 311 additions and 36 deletions
|
|
@ -26,3 +26,77 @@ i.e.
|
|||
.sr-only {
|
||||
@include sr-only;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include typeset('sans', '2xl', 2);
|
||||
margin: 0 0 units(1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: font-weight('semibold');
|
||||
line-height: line-height('heading', 3);
|
||||
margin: units(4) 0 units(1);
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: units(2);
|
||||
}
|
||||
}
|
||||
|
||||
.register-form-step p {
|
||||
@include typeset('sans', 'sm', 5);
|
||||
max-width: measure(5);
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.register-form-step a {
|
||||
color: color('primary');
|
||||
|
||||
&:visited {
|
||||
color: color('violet-70v'); //USWDS default
|
||||
}
|
||||
}
|
||||
|
||||
a.breadcrumb__back {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
margin-bottom: units(2.5);
|
||||
&:visited {
|
||||
color: color('primary');
|
||||
}
|
||||
|
||||
@include at-media('desktop') {
|
||||
//align to top of sidebar
|
||||
margin-top: units(-0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav__step--locked {
|
||||
color: color('base-darker');
|
||||
span {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: units(1);
|
||||
|
||||
.usa-icon {
|
||||
flex-shrink: 0;
|
||||
//align lock body to x-height
|
||||
margin: units('2px') units(1) 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stepnav {
|
||||
margin-top: units(2);
|
||||
}
|
||||
|
||||
.review__step__name {
|
||||
font-weight: font-weight('semibold');
|
||||
}
|
||||
|
||||
footer {
|
||||
//Workaround because USWDS units jump from 10 to 15
|
||||
margin-top: units(10) + units(2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,10 +13,103 @@ in the form $setting: value,
|
|||
// $setting: value
|
||||
// );
|
||||
//
|
||||
@use "cisa_colors" as *;
|
||||
|
||||
@use "uswds-core" with (
|
||||
$theme-banner-background-color: "ink",
|
||||
$theme-banner-link-color: "primary-light",
|
||||
$theme-banner-max-width: "none",
|
||||
|
||||
/*----------------------------
|
||||
# USWDS Compile Settings
|
||||
-----------------------------*/
|
||||
$theme-show-notifications: false,
|
||||
$theme-hero-image: "../img/registrar/dotgov_banner.png"
|
||||
)
|
||||
|
||||
|
||||
/*----------------------------
|
||||
# Banner Settings
|
||||
-----------------------------*/
|
||||
$theme-banner-background-color: "primary-darker",
|
||||
$theme-banner-link-color: "primary-lighter",
|
||||
|
||||
|
||||
/*----------------------------
|
||||
# Hero Image
|
||||
-----------------------------*/
|
||||
$theme-hero-image: "../img/registrar/dotgov_banner.png",
|
||||
|
||||
|
||||
/*----------------------------
|
||||
# Typography Settings
|
||||
-----------------------------
|
||||
## Type scales
|
||||
----------------------------*/
|
||||
$theme-type-scale-2xl: 12,
|
||||
$theme-type-scale-xl: 10,
|
||||
$theme-type-scale-lg: 8,
|
||||
$theme-type-scale-md: 7,
|
||||
$theme-type-scale-sm: 5,
|
||||
$theme-type-scale-xs: 3,
|
||||
|
||||
/*---------------------------
|
||||
## Heading sizing
|
||||
----------------------------*/
|
||||
$theme-h1-font-size: "2xl",
|
||||
$theme-h2-font-size: "xl",
|
||||
$theme-h4-font-size: "md",
|
||||
$theme-h5-font-size: "sm",
|
||||
$theme-h6-font-size: "xs",
|
||||
$theme-body-font-size: "sm",
|
||||
|
||||
/*---------------------------
|
||||
## Font weights
|
||||
----------------------------*/
|
||||
$theme-font-weight-semibold: 600,
|
||||
|
||||
/*---------------------------
|
||||
## Font roles
|
||||
----------------------------*/
|
||||
$theme-font-role-heading: 'sans',
|
||||
|
||||
|
||||
/*----------------------------
|
||||
# Color Settings
|
||||
------------------------------
|
||||
## Primary color
|
||||
----------------------------*/
|
||||
$theme-color-primary-darker: $dhs-blue-70,
|
||||
$theme-color-primary-dark: $dhs-blue-60,
|
||||
$theme-color-primary: $dhs-blue,
|
||||
$theme-color-primary-light: $dhs-blue-30,
|
||||
$theme-color-primary-lighter: $dhs-blue-15,
|
||||
$theme-color-primary-lightest: $dhs-blue-10,
|
||||
|
||||
/*---------------------------
|
||||
## Accent color
|
||||
----------------------------*/
|
||||
$theme-color-accent-cool: $dhs-light-blue-60,
|
||||
$theme-color-accent-cool-dark: $dhs-light-blue-70,
|
||||
$theme-color-accent-cool-light: $dhs-light-blue-40,
|
||||
|
||||
/*---------------------------
|
||||
## Error state
|
||||
----------------------------*/
|
||||
$theme-color-error-darker: $dhs-red-70,
|
||||
$theme-color-error-dark: $dhs-red-60,
|
||||
$theme-color-error: $dhs-red,
|
||||
$theme-color-error-light: $dhs-red-30,
|
||||
$theme-color-error-lighter: $dhs-red-15,
|
||||
|
||||
/*---------------------------
|
||||
## Success state
|
||||
----------------------------*/
|
||||
$theme-color-success-darker: $dhs-green-70,
|
||||
$theme-color-success-dark: $dhs-green-60,
|
||||
$theme-color-success: $dhs-green,
|
||||
$theme-color-success-light: $dhs-green-30,
|
||||
$theme-color-success-lighter: $dhs-green-15,
|
||||
|
||||
|
||||
/*---------------------------
|
||||
# Input settings
|
||||
----------------------------*/
|
||||
$theme-input-line-height: 5,
|
||||
|
||||
);
|
||||
|
|
|
|||
83
src/registrar/assets/sass/_theme/cisa_colors.scss
Normal file
83
src/registrar/assets/sass/_theme/cisa_colors.scss
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
/*
|
||||
================================================================================
|
||||
DHS color palette
|
||||
Taken from: https://www.dhs.gov/xlibrary/dhsweb/_site/color-palette.html
|
||||
================================================================================
|
||||
*/
|
||||
|
||||
/*--- Blue --*/
|
||||
$dhs-blue-90: #000305;
|
||||
$dhs-blue-80: #001726;
|
||||
$dhs-blue-70: #002b47;
|
||||
$dhs-blue-60: #003e67;
|
||||
$dhs-blue: #005288;
|
||||
$dhs-blue-40: #3d7ca5;
|
||||
$dhs-blue-30: #7aa5c1;
|
||||
$dhs-blue-20: #b8cfde;
|
||||
$dhs-blue-15: #d6e3ec;
|
||||
$dhs-blue-10: #f5f8fa;
|
||||
|
||||
|
||||
/*--- Light Blue ---*/
|
||||
$dhs-light-blue-90: #000507;
|
||||
$dhs-light-blue-80: #002231;
|
||||
$dhs-light-blue-70: #003e5a;
|
||||
$dhs-light-blue-60: #005b84;
|
||||
$dhs-light-blue: #0078ae;
|
||||
$dhs-light-blue-40: #3d98c1;
|
||||
$dhs-light-blue-30: #7ab9d5;
|
||||
$dhs-light-blue-20: #b8d9e8;
|
||||
$dhs-light-blue-15: #d6e9f2;
|
||||
$dhs-light-blue-10: #f5fafc;
|
||||
|
||||
|
||||
/*--- Gray ---*/
|
||||
$dhs-gray-90: #080808;
|
||||
$dhs-gray-80: #363637;
|
||||
$dhs-gray-70: #646566;
|
||||
$dhs-gray-60: #929395;
|
||||
$dhs-gray: #c0c2c4;
|
||||
$dhs-gray-40: #cfd1d2;
|
||||
$dhs-gray-30: #dedfe0;
|
||||
$dhs-gray-20: #edeeee;
|
||||
$dhs-gray-15: #f5f5f6;
|
||||
$dhs-gray-10: #fcfdfd;
|
||||
|
||||
|
||||
/*--- Dark Gray ---*/
|
||||
$dhs-dark-gray-90: #040404;
|
||||
$dhs-dark-gray-80: #19191a;
|
||||
$dhs-dark-gray-70: #2f2f30;
|
||||
$dhs-dark-gray-60: #444547;
|
||||
$dhs-dark-gray: #5a5b5d;
|
||||
$dhs-dark-gray-40: #828284;
|
||||
$dhs-dark-gray-30: #a9aaab;
|
||||
$dhs-dark-gray-20: #d1d1d2;
|
||||
$dhs-dark-gray-15: #e5e5e5;
|
||||
$dhs-dark-gray-10: #f8f8f9;
|
||||
|
||||
|
||||
/*--- Red ---*/
|
||||
$dhs-red-90: #080102;
|
||||
$dhs-red-80: #37050d;
|
||||
$dhs-red-70: #660919;
|
||||
$dhs-red-60: #950e24;
|
||||
$dhs-red: #c41230;
|
||||
$dhs-red-40: #d24b62;
|
||||
$dhs-red-30: #e08493;
|
||||
$dhs-red-20: #eebdc5;
|
||||
$dhs-red-15: #f6d9de;
|
||||
$dhs-red-10: #fdf6f7;
|
||||
|
||||
|
||||
/*--- Green ---*/
|
||||
$dhs-green-90: #040602;
|
||||
$dhs-green-80: #1a2a0e;
|
||||
$dhs-green-70: #314f1a;
|
||||
$dhs-green-60: #477326;
|
||||
$dhs-green: #5e9732;
|
||||
$dhs-green-40: #85b063;
|
||||
$dhs-green-30: #abc994;
|
||||
$dhs-green-20: #d2e2c6;
|
||||
$dhs-green-15: #e5eede;
|
||||
$dhs-green-10: #f9fbf7;
|
||||
|
|
@ -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 register-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="breadcrumb__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,32 @@
|
|||
{% endif %}
|
||||
<h1> {{form_titles|get_item:wizard.steps.current}} </h1>
|
||||
{% block form_content %}
|
||||
{% if wizard.steps.next %}
|
||||
<button type="submit" name="submit_button" value="next" class="usa-button">Next</button>
|
||||
{% else %}
|
||||
<button type="submit" class="usa-button">Submit your domain request</button>
|
||||
{% endif %}
|
||||
<button type="submit" name="submit_button" value="save" class="usa-button usa-button--outline">Save</button>
|
||||
|
||||
<button type="submit" name="submit_button" value="next"
|
||||
class="usa-button">Next</button>
|
||||
|
||||
<div class="stepnav">
|
||||
{% if wizard.steps.next %}
|
||||
<button
|
||||
type="submit"
|
||||
name="submit_button"
|
||||
value="next"
|
||||
class="usa-button"
|
||||
>Next</button>
|
||||
{% else %}
|
||||
<button
|
||||
type="submit"
|
||||
class="usa-button"
|
||||
>Submit your domain request</button>
|
||||
{% endif %}
|
||||
<button
|
||||
type="submit"
|
||||
name="submit_button"
|
||||
value="save"
|
||||
class="usa-button usa-button--outline"
|
||||
>Save</button>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
{% csrf_token %}
|
||||
<fieldset id="election_board__fieldset" class="usa-fieldset">
|
||||
<legend>
|
||||
<h2>Is your organization an election office?</h2>
|
||||
<h2 class="margin-bottom-05">Is your organization an election office?</h2>
|
||||
</legend>
|
||||
{% radio_buttons_by_value wizard.form.is_election_board as choices %}
|
||||
{% for choice in choices.values %}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
{% csrf_token %}
|
||||
<fieldset id="federal_type__fieldset" class="usa-fieldset">
|
||||
<legend>
|
||||
<h2>Which federal branch is your organization in?</h2>
|
||||
<h2 class="margin-bottom-5">Which federal branch is your organization in?</h2>
|
||||
</legend>
|
||||
{% radio_buttons_by_value wizard.form.federal_type as choices %}
|
||||
{% for choice in choices.values %}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
<fieldset class="usa-fieldset">
|
||||
<legend>
|
||||
<h2> Contact 2 </h2>
|
||||
<h2 class="margin-bottom-05"> Contact 2 </h2>
|
||||
</legend>
|
||||
{{ wizard.form.first_name|add_label_class:"usa-label" }}
|
||||
{{ wizard.form.first_name|add_class:"usa-input"|attr:"aria-describedby:instructions" }}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,15 @@
|
|||
{{ 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-hidden="true" focsuable="false" role="img" width="24"height="24" >
|
||||
<title id="locked-step__{{forloop.counter}}">lock icon</title>
|
||||
<use xlink:href="{%static 'img/sprite.svg'%}#lock"></use>
|
||||
</svg>
|
||||
{{ form_titles|get_item:this_step }}
|
||||
<span class="usa-sr-only">locked until previous steps have been completed</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -48,6 +48,21 @@
|
|||
<script src="{% static 'js/uswds.min.js' %}" defer></script>
|
||||
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
|
||||
|
||||
{% if IS_DEMO_SITE %}
|
||||
<section
|
||||
class="usa-site-alert usa-site-alert--emergency usa-site-alert--no-icon"
|
||||
aria-label="Site alert"
|
||||
>
|
||||
<div class="usa-alert">
|
||||
<div class="usa-alert__body">
|
||||
<p class="usa-alert__text">
|
||||
<strong>TEST SITE</strong> - Do not use real personal information. Demo purposes only.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<section class="usa-banner" aria-label="Official website of the United States government">
|
||||
<div class="usa-accordion">
|
||||
<header class="usa-banner__header">
|
||||
|
|
@ -104,20 +119,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% if IS_DEMO_SITE %}
|
||||
<section
|
||||
class="usa-site-alert usa-site-alert--emergency usa-site-alert--no-icon"
|
||||
aria-label="Site alert"
|
||||
>
|
||||
<div class="usa-alert">
|
||||
<div class="usa-alert__body">
|
||||
<p class="usa-alert__text">
|
||||
<strong>TEST SITE</strong> - Do not use real personal information. Demo purposes only.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% block usa_overlay %}<div class="usa-overlay"></div>{% endblock %}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
class="usa-footer__logo-img"
|
||||
src="{% static 'img/dottedgov-round.svg' %}"
|
||||
alt="dot gov registrar logo"
|
||||
width="100px"
|
||||
width="50px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue