mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-10 10:03:21 -04:00
Merge pull request #738 from GSA/718-clean-up-components-section
718 - Clean up components and update naming conventions
This commit is contained in:
Steven Reilly
@@ -58,14 +58,6 @@ p,
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.govuk-checkboxes__label::after {
|
||||
top: 13px;
|
||||
left: 9px;
|
||||
width: 22px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before,
|
||||
.multiple-choice [type="radio"]:focus + label::before {
|
||||
box-shadow: 0 0 0 3px color("blue-40v");
|
||||
}
|
||||
@@ -97,10 +89,6 @@ td.table-empty-message {
|
||||
font-family: family("sans");
|
||||
}
|
||||
|
||||
.govuk-inset-text {
|
||||
border-color: color("blue-40v");
|
||||
}
|
||||
|
||||
.usa-dark-background .pill-item__label {
|
||||
color: white;
|
||||
text-decoration: none !important;
|
||||
@@ -374,3 +362,97 @@ td.table-empty-message {
|
||||
details form {
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
// Textbox highlight
|
||||
|
||||
.textbox-highlight {
|
||||
|
||||
&-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-textbox {
|
||||
resize: none;
|
||||
z-index: 20;
|
||||
background: none;
|
||||
}
|
||||
|
||||
&-textbox,
|
||||
&-background,
|
||||
&-foreground,
|
||||
&-mask {
|
||||
font-size: units(2);
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
&-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
color: transparent;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
border: 2px solid transparent;
|
||||
padding-bottom: units(3);
|
||||
z-index: 10;
|
||||
|
||||
// transparent borders become visible in high contrast modes so set to match background
|
||||
@media (-ms-high-contrast: active), (forced-colors: active) {
|
||||
border-color: Canvas;
|
||||
}
|
||||
|
||||
.placeholder,
|
||||
.placeholder-conditional {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: "";
|
||||
background-color: color("yellow-20v");
|
||||
border: 1px solid color("yellow-20v");
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 5px;
|
||||
right: 6px;
|
||||
height: 100%;
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.textbox-help-link {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.textbox-right-aligned {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.extra-tracking .usa-input {
|
||||
font-size: units(2);
|
||||
padding-left: 5px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
// .textbox-colour-preview {
|
||||
// @include govuk-media-query($from: desktop) {
|
||||
// width: 38px;
|
||||
// height: 38px;
|
||||
// margin-left: 5px;
|
||||
// border-radius: 50%;
|
||||
// box-shadow: inset 0 0 0 1px rgba(govuk-colour("black"), 0.2);
|
||||
// display: inline-block;
|
||||
// vertical-align: top;
|
||||
// transition: background 0.3s ease-out;
|
||||
// }
|
||||
// }
|
||||
@@ -133,7 +133,7 @@
|
||||
] %} #}
|
||||
{% endif %}
|
||||
|
||||
{{ govukHeader({
|
||||
{{ usaHeader({
|
||||
"homepageUrl": url_for('main.show_accounts_or_dashboard'),
|
||||
"productName": "Notify",
|
||||
"navigation": navigation,
|
||||
@@ -151,7 +151,7 @@
|
||||
{% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a>' %}
|
||||
{% endif %}
|
||||
|
||||
{{ govukFooter({
|
||||
{{ usaFooter({
|
||||
"classes": "js-footer",
|
||||
"navigation": [
|
||||
{
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None, context=None, action=None, id=None, thing=None) %}
|
||||
<div
|
||||
@@ -24,7 +24,7 @@
|
||||
{% if delete_button %}
|
||||
{% call form_wrapper(action=action) %}
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||
{{ govukButton({
|
||||
{{ usaButton({
|
||||
"text": "" if thing else delete_button,
|
||||
"html": delete_button + "<span class=\"usa-sr-only\"> ‘" + thing + "’</span>" if thing else "",
|
||||
"name": "delete",
|
||||
|
||||
15
app/templates/components/components/alert/README.md
Normal file
15
app/templates/components/components/alert/README.md
Normal file
@@ -0,0 +1,15 @@
|
||||
# Error message
|
||||
|
||||
## Installation
|
||||
|
||||
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
|
||||
|
||||
## Guidance and Examples
|
||||
|
||||
Find out when to use the error message component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-message).
|
||||
|
||||
## Component options
|
||||
|
||||
Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.
|
||||
|
||||
See [options table](https://design-system.service.gov.uk/components/error-message/#options-example-default) for details.
|
||||
37
app/templates/components/components/alert/macro-options.json
Normal file
37
app/templates/components/components/alert/macro-options.json
Normal file
@@ -0,0 +1,37 @@
|
||||
[
|
||||
{
|
||||
"name": "text",
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "If `html` is set, this is not required. Text to use within the error message. If `html` is provided, the `text` argument will be ignored."
|
||||
},
|
||||
{
|
||||
"name": "html",
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "If `text` is set, this is not required. HTML to use within the error message. If `html` is provided, the `text` argument will be ignored."
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Id attribute to add to the error message span tag."
|
||||
},
|
||||
{
|
||||
"name": "classes",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Classes to add to the error message span tag."
|
||||
},
|
||||
{
|
||||
"name": "attributes",
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "HTML attributes (for example data attributes) to add to the error message span tag"
|
||||
},
|
||||
{
|
||||
"name": "visuallyHiddenText",
|
||||
"type": "string",
|
||||
"description": "A visually hidden prefix used before the error message. Defaults to \"Error\"."
|
||||
}
|
||||
]
|
||||
3
app/templates/components/components/alert/macro.njk
Normal file
3
app/templates/components/components/alert/macro.njk
Normal file
@@ -0,0 +1,3 @@
|
||||
{% macro usaAlert(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
18
app/templates/components/components/alert/template.njk
Normal file
18
app/templates/components/components/alert/template.njk
Normal file
@@ -0,0 +1,18 @@
|
||||
{%- if params.slim %}
|
||||
<div class="usa-alert usa-alert--slim usa-alert--{{params.type}} {%- if params.classes %} {{ params.classes }}{% endif %}" {%- if params.id %} id="{{ params.id }}"{% endif %}>
|
||||
<div class="usa-alert__body">
|
||||
<p class="usa-alert__text">
|
||||
{{params.text}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="usa-alert usa-alert--{{params.type}} {%- if params.classes %} {{ params.classes }}{% endif %}" {%- if params.id %} id="{{ params.id }}"{% endif %}>
|
||||
<div class="usa-alert__body">
|
||||
<h{{params.header_level}} class="usa-alert__heading">{{params.heading}}</h{{params.header_level}}>
|
||||
<p class="usa-alert__text">
|
||||
{{params.text}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -1,54 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@include govuk-exports("govuk/component/back-link") {
|
||||
|
||||
.govuk-back-link {
|
||||
@include govuk-typography-responsive($size: 16);
|
||||
@include govuk-link-common;
|
||||
@include govuk-link-style-text;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
margin-top: govuk-spacing(3);
|
||||
margin-bottom: govuk-spacing(3);
|
||||
|
||||
// Allow space for the arrow
|
||||
padding-left: 14px;
|
||||
|
||||
// Use border-bottom rather than text-decoration so that the arrow is
|
||||
// underlined as well.
|
||||
border-bottom: 1px solid govuk-colour("black");
|
||||
|
||||
// Underline is provided by a bottom border
|
||||
text-decoration: none;
|
||||
|
||||
// Prepend left pointing arrow
|
||||
&:before {
|
||||
@include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
|
||||
|
||||
content: "";
|
||||
|
||||
// Vertically align with the parent element
|
||||
position: absolute;
|
||||
|
||||
top: -1px;
|
||||
bottom: 1px;
|
||||
left: 0;
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Begin adjustments for font baseline offset
|
||||
// These should be removed when the font is updated with the correct baseline
|
||||
|
||||
.govuk-back-link:before {
|
||||
$offset: 1px;
|
||||
|
||||
top: $offset * -1;
|
||||
bottom: $offset;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukBackLink(params) %}
|
||||
{% macro usaBackLink(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,256 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@include govuk-exports("govuk/component/button") {
|
||||
// Primary button variables
|
||||
$govuk-button-colour: #00823b; // sass-lint:disable no-color-literals
|
||||
$govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
|
||||
$govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
|
||||
$govuk-button-text-colour: govuk-colour("white");
|
||||
|
||||
// Secondary button variables
|
||||
$govuk-secondary-button-colour: govuk-colour("grey-3");
|
||||
$govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
|
||||
$govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
|
||||
$govuk-secondary-button-text-colour: govuk-colour("black");
|
||||
|
||||
// Warning button variables
|
||||
$govuk-warning-button-colour: govuk-colour("red");
|
||||
$govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%);
|
||||
$govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
|
||||
$govuk-warning-button-text-colour: govuk-colour("white");
|
||||
|
||||
// Because the shadow (s0) is visually 'part of' the button, we need to reduce
|
||||
// the height of the button to compensate by adjusting its padding (s1) and
|
||||
// increase the bottom margin to include it (s2).
|
||||
$button-shadow-size: $govuk-border-width-form-element;
|
||||
|
||||
.govuk-button {
|
||||
@include govuk-font($size: 19, $line-height: 19px);
|
||||
@include govuk-focusable;
|
||||
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
@include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
|
||||
padding: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)) govuk-spacing(2); // s1
|
||||
border: $govuk-border-width-form-element solid transparent;
|
||||
border-radius: 0;
|
||||
color: $govuk-button-text-colour;
|
||||
background-color: $govuk-button-colour;
|
||||
box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
|
||||
@include govuk-if-ie8 {
|
||||
border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
|
||||
}
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Ensure that any global link styles are overridden
|
||||
&:link,
|
||||
&:visited,
|
||||
&:active,
|
||||
&:hover {
|
||||
color: $govuk-button-text-colour;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// alphagov/govuk_template includes a specific a:link:focus selector
|
||||
// designed to make unvisited links a slightly darker blue when focussed, so
|
||||
// we need to override the text colour for that combination of selectors so
|
||||
// so that unvisited links styled as buttons do not end up with dark blue
|
||||
// text when focussed.
|
||||
@include govuk-compatibility(govuk_template) {
|
||||
&:link:focus {
|
||||
color: $govuk-button-text-colour;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix unwanted button padding in Firefox
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $govuk-button-hover-colour;
|
||||
}
|
||||
|
||||
&:active {
|
||||
top: $button-shadow-size;
|
||||
box-shadow: none;
|
||||
|
||||
@include govuk-if-ie8 {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// The following adjustments do not work for <input type="button"> as
|
||||
// non-container elements cannot include pseudo elements (i.e. ::before).
|
||||
|
||||
// Use a pseudo element to expand the click target area to include the
|
||||
// button's shadow as well, in case users try to click it.
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: -$govuk-border-width-form-element;
|
||||
right: -$govuk-border-width-form-element;
|
||||
bottom: -($govuk-border-width-form-element + $button-shadow-size);
|
||||
left: -$govuk-border-width-form-element;
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// When the button is active it is shifted down by $button-shadow-size to
|
||||
// denote a 'pressed' state. If the user happened to click at the very top
|
||||
// of the button, their mouse is no longer over the button (because it has
|
||||
// 'moved beneath them') and so the click event is not fired.
|
||||
//
|
||||
// This corrects that by shifting the top of the pseudo element so that it
|
||||
// continues to cover the area that the user originally clicked, which means
|
||||
// the click event is still fired.
|
||||
//
|
||||
// 🎉
|
||||
&:active::before {
|
||||
top: -($govuk-border-width-form-element + $button-shadow-size);
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-button--disabled,
|
||||
.govuk-button[disabled="disabled"],
|
||||
.govuk-button[disabled] {
|
||||
opacity: (.5);
|
||||
|
||||
&:hover {
|
||||
background-color: $govuk-button-colour;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
top: 0;
|
||||
box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
|
||||
@include govuk-if-ie8 {
|
||||
border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-button--secondary {
|
||||
background-color: $govuk-secondary-button-colour;
|
||||
box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour;
|
||||
|
||||
&,
|
||||
&:link,
|
||||
&:visited,
|
||||
&:active,
|
||||
&:hover {
|
||||
color: $govuk-secondary-button-text-colour;
|
||||
}
|
||||
|
||||
// alphagov/govuk_template includes a specific a:link:focus selector
|
||||
// designed to make unvisited links a slightly darker blue when focussed, so
|
||||
// we need to override the text colour for that combination of selectors so
|
||||
// so that unvisited links styled as buttons do not end up with dark blue
|
||||
// text when focussed.
|
||||
@include govuk-compatibility(govuk_template) {
|
||||
&:link:focus {
|
||||
color: $govuk-secondary-button-text-colour;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $govuk-secondary-button-hover-colour;
|
||||
|
||||
&[disabled] {
|
||||
background-color: $govuk-secondary-button-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-button--warning {
|
||||
background-color: $govuk-warning-button-colour;
|
||||
box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour;
|
||||
|
||||
&,
|
||||
&:link,
|
||||
&:visited,
|
||||
&:active,
|
||||
&:hover {
|
||||
color: $govuk-warning-button-text-colour;
|
||||
}
|
||||
|
||||
// alphagov/govuk_template includes a specific a:link:focus selector
|
||||
// designed to make unvisited links a slightly darker blue when focussed, so
|
||||
// we need to override the text colour for that combination of selectors so
|
||||
// so that unvisited links styled as buttons do not end up with dark blue
|
||||
// text when focussed.
|
||||
@include govuk-compatibility(govuk_template) {
|
||||
&:link:focus {
|
||||
color: $govuk-warning-button-text-colour;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $govuk-warning-button-hover-colour;
|
||||
|
||||
&[disabled] {
|
||||
background-color: $govuk-warning-button-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-button--start {
|
||||
@include govuk-typography-weight-bold;
|
||||
@include govuk-typography-responsive($size: 24, $override-line-height: 1);
|
||||
|
||||
min-height: auto;
|
||||
padding-top: govuk-spacing(2) - $govuk-border-width-form-element;
|
||||
padding-right: govuk-spacing(7);
|
||||
padding-bottom: govuk-spacing(2) - $govuk-border-width-form-element;
|
||||
padding-left: govuk-spacing(3);
|
||||
|
||||
background-image: govuk-image-url("icon-pointer.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
|
||||
@include govuk-device-pixel-ratio {
|
||||
background-image: govuk-image-url("icon-pointer-2x.png");
|
||||
background-size: 30px 19px;
|
||||
}
|
||||
}
|
||||
|
||||
// Begin adjustments for font baseline offset
|
||||
// These should be removed when the font is updated with the correct baseline
|
||||
// For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428
|
||||
|
||||
$offset: 2;
|
||||
|
||||
.govuk-button {
|
||||
padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
|
||||
padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
|
||||
}
|
||||
|
||||
.govuk-button--start {
|
||||
padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
|
||||
padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukButton(params) %}
|
||||
{% macro usaButton(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
{#- Define common attributes that we can use across all element types #}
|
||||
|
||||
{%- set commonAttributes %} class="usa-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} govuk-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
|
||||
{%- set commonAttributes %} class="usa-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} usa-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
|
||||
|
||||
{#- Define common attributes we can use for both button and input types #}
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
</a>
|
||||
|
||||
{%- elseif element == 'button' %}
|
||||
<button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
|
||||
<button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }} {% if params.disabled %}disabled{% endif %}>
|
||||
{{ params.html | safe if params.html else params.text }}
|
||||
</button>
|
||||
|
||||
|
||||
@@ -1,310 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@import "../error-message/error-message";
|
||||
@import "../fieldset/fieldset";
|
||||
@import "../hint/hint";
|
||||
@import "../label/label";
|
||||
|
||||
@include govuk-exports("govuk/component/checkboxes") {
|
||||
|
||||
$govuk-touch-target-size: 44px;
|
||||
$govuk-checkboxes-size: 40px;
|
||||
$govuk-small-checkboxes-size: 24px;
|
||||
$govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
|
||||
|
||||
.govuk-checkboxes__item {
|
||||
@include govuk-font($size: 19);
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
min-height: $govuk-checkboxes-size;
|
||||
|
||||
margin-bottom: govuk-spacing(2);
|
||||
padding-left: $govuk-checkboxes-size;
|
||||
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.govuk-checkboxes__item:last-child,
|
||||
.govuk-checkboxes__item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.govuk-checkboxes__input {
|
||||
$input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
// IE8 doesn’t support pseudo-elements, so we don’t want to hide native
|
||||
// elements there.
|
||||
@include govuk-not-ie8 {
|
||||
position: absolute;
|
||||
|
||||
z-index: 1;
|
||||
top: $input-offset * -1;
|
||||
left: $input-offset * -1;
|
||||
|
||||
width: $govuk-touch-target-size;
|
||||
height: $govuk-touch-target-size;
|
||||
margin: 0;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@include govuk-if-ie8 {
|
||||
margin-top: 10px;
|
||||
margin-right: $govuk-checkboxes-size / -2;
|
||||
margin-left: $govuk-checkboxes-size / -2;
|
||||
float: left;
|
||||
|
||||
// add focus outline to input
|
||||
&:focus {
|
||||
outline: $govuk-focus-width solid $govuk-focus-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-checkboxes__label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
padding: 8px $govuk-checkboxes-label-padding-left-right govuk-spacing(1);
|
||||
cursor: pointer;
|
||||
// remove 300ms pause on mobile
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
// [ ] Check box
|
||||
.govuk-checkboxes__label::before {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $govuk-checkboxes-size;
|
||||
height: $govuk-checkboxes-size;
|
||||
border: $govuk-border-width-form-element solid currentColor;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// ✔ Check mark
|
||||
//
|
||||
// The check mark is a box with a border on the left and bottom side (└──),
|
||||
// rotated 45 degrees
|
||||
.govuk-checkboxes__label::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 9px;
|
||||
width: 18px;
|
||||
height: 7px;
|
||||
|
||||
-webkit-transform: rotate(-45deg);
|
||||
|
||||
-ms-transform: rotate(-45deg);
|
||||
|
||||
transform: rotate(-45deg);
|
||||
border: solid;
|
||||
border-width: 0 0 $govuk-border-width $govuk-border-width;
|
||||
// Fix bug in IE11 caused by transform rotate (-45deg).
|
||||
// See: alphagov/govuk_elements/issues/518
|
||||
border-top-color: transparent;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.govuk-checkboxes__hint {
|
||||
display: block;
|
||||
padding-right: $govuk-checkboxes-label-padding-left-right;
|
||||
padding-left: $govuk-checkboxes-label-padding-left-right;
|
||||
}
|
||||
|
||||
// Focused state
|
||||
.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
|
||||
// Since box-shadows are removed when users customise their colours, we set
|
||||
// a transparent outline that is shown instead.
|
||||
// https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
|
||||
outline: $govuk-focus-width solid transparent;
|
||||
outline-offset: $govuk-focus-width;
|
||||
box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
|
||||
}
|
||||
|
||||
// Selected state
|
||||
.govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.govuk-checkboxes__input:disabled,
|
||||
.govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
// Conditional reveals
|
||||
// =========================================================
|
||||
|
||||
$conditional-border-width: $govuk-border-width-mobile;
|
||||
// Calculate the amount of padding needed to keep the border centered against the checkbox.
|
||||
$conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
|
||||
// Move the border centered with the checkbox
|
||||
$conditional-margin-left: $conditional-border-padding;
|
||||
// Move the contents of the conditional inline with the label
|
||||
$conditional-padding-left: $conditional-border-padding + $govuk-checkboxes-label-padding-left-right;
|
||||
|
||||
.govuk-checkboxes__conditional {
|
||||
@include govuk-responsive-margin(4, "bottom");
|
||||
margin-left: $conditional-margin-left;
|
||||
padding-left: $conditional-padding-left;
|
||||
border-left: $conditional-border-width solid $govuk-border-colour;
|
||||
|
||||
.js-enabled &--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
// Small checkboxes
|
||||
// =========================================================
|
||||
|
||||
.govuk-checkboxes--small {
|
||||
|
||||
$input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2;
|
||||
$label-offset: $govuk-touch-target-size - $input-offset;
|
||||
|
||||
.govuk-checkboxes__item {
|
||||
@include govuk-clearfix;
|
||||
min-height: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: $label-offset;
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Shift the touch target into the left margin so that the visible edge of
|
||||
// the control is aligned
|
||||
//
|
||||
// ┆What colours do you like?
|
||||
// ┌┆───┐
|
||||
// │┆[] │ Purple
|
||||
// └┆▲──┘
|
||||
// ▲┆└─ Check box pseudo element, aligned with margin
|
||||
// └─── Touch target (invisible input), shifted into the margin
|
||||
.govuk-checkboxes__input {
|
||||
@include govuk-not-ie8 {
|
||||
left: $input-offset * -1;
|
||||
}
|
||||
|
||||
@include govuk-if-ie8 {
|
||||
margin-left: $govuk-small-checkboxes-size * -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust the size and position of the label.
|
||||
//
|
||||
// Unlike larger checkboxes, we also have to float the label in order to
|
||||
// 'shrink' it, preventing the hover state from kicking in across the full
|
||||
// width of the parent element.
|
||||
.govuk-checkboxes__label {
|
||||
margin-top: -2px;
|
||||
padding: 13px govuk-spacing(3) 13px 1px;
|
||||
float: left;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
padding: 11px govuk-spacing(3) 10px 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// [ ] Check box
|
||||
//
|
||||
// Reduce the size of the check box [1], vertically center it within the
|
||||
// touch target [2]
|
||||
.govuk-checkboxes__label::before {
|
||||
top: $input-offset - $govuk-border-width-form-element; // 2
|
||||
width: $govuk-small-checkboxes-size; // 1
|
||||
height: $govuk-small-checkboxes-size; // 1
|
||||
}
|
||||
|
||||
// ✔ Check mark
|
||||
//
|
||||
// Reduce the size of the check mark and re-align within the checkbox
|
||||
.govuk-checkboxes__label::after {
|
||||
top: 15px;
|
||||
left: 6px;
|
||||
width: 9px;
|
||||
height: 3.5px;
|
||||
border-width: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
// Fix position of hint with small checkboxes
|
||||
//
|
||||
// Do not use hints with small checkboxes – because they're within the input
|
||||
// wrapper they trigger the hover state, but clicking them doesn't actually
|
||||
// activate the control.
|
||||
//
|
||||
// (If you do use them, they won't look completely broken... but seriously,
|
||||
// don't use them)
|
||||
.govuk-checkboxes__hint {
|
||||
padding: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Align conditional reveals with small checkboxes
|
||||
.govuk-checkboxes__conditional {
|
||||
$margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2);
|
||||
margin-left: $margin-left;
|
||||
padding-left: $label-offset - ($margin-left + $conditional-border-width);
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Hover state for small checkboxes.
|
||||
//
|
||||
// We use a hover state for small checkboxes because the touch target size
|
||||
// is so much larger than their visible size, and so we need to provide
|
||||
// feedback to the user as to which checkbox they will select when their
|
||||
// cursor is outside of the visible area.
|
||||
.govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
|
||||
box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
|
||||
}
|
||||
|
||||
// Because we've overridden the border-shadow provided by the focus state,
|
||||
// we need to redefine that too.
|
||||
//
|
||||
// We use two box shadows, one that restores the original focus state [1]
|
||||
// and another that then applies the hover state [2].
|
||||
.govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
|
||||
// sass-lint:disable indentation
|
||||
box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
|
||||
0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
|
||||
}
|
||||
|
||||
// For devices that explicitly don't support hover, don't provide a hover
|
||||
// state (e.g. on touch devices like iOS).
|
||||
//
|
||||
// We can't use `@media (hover: hover)` because we wouldn't get the hover
|
||||
// state in browsers that don't support `@media (hover)` (like Internet
|
||||
// Explorer) – so we have to 'undo' the hover state instead.
|
||||
@media (hover: none), (pointer: coarse) {
|
||||
.govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
|
||||
box-shadow: initial;
|
||||
}
|
||||
|
||||
.govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
|
||||
box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukCheckboxes(params) %}
|
||||
{% macro usaCheckboxes(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% from "../error-message/macro.njk" import govukErrorMessage -%}
|
||||
{% from "../error-message/macro.njk" import usaErrorMessage -%}
|
||||
{% from "../fieldset/macro.njk" import govukFieldset %}
|
||||
{% from "../hint/macro.njk" import govukHint %}
|
||||
{% from "../label/macro.njk" import govukLabel %}
|
||||
{% from "../hint/macro.njk" import usaHint %}
|
||||
{% from "../label/macro.njk" import usaLabel %}
|
||||
|
||||
{#- If an id 'prefix' is not passed, fall back to using the name attribute
|
||||
instead. We need this for error messages and hints as well -#}
|
||||
@@ -29,7 +29,7 @@
|
||||
{% if params.hint %}
|
||||
{% set hintId = idPrefix + '-hint' %}
|
||||
{% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
|
||||
{{ govukHint({
|
||||
{{ usaHint({
|
||||
id: hintId,
|
||||
classes: params.hint.classes,
|
||||
attributes: params.hint.attributes,
|
||||
@@ -40,7 +40,7 @@
|
||||
{% if params.errorMessage %}
|
||||
{% set errorId = idPrefix + '-error' %}
|
||||
{% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
|
||||
{{ govukErrorMessage({
|
||||
{{ usaErrorMessage({
|
||||
id: errorId,
|
||||
classes: params.errorMessage.classes,
|
||||
attributes: params.errorMessage.attributes,
|
||||
@@ -67,7 +67,7 @@
|
||||
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
|
||||
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
|
||||
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
||||
{{ govukLabel({
|
||||
{{ usaLabel({
|
||||
html: item.html,
|
||||
text: item.text,
|
||||
classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
|
||||
@@ -75,7 +75,7 @@
|
||||
for: id
|
||||
}) | indent(6) | trim }}
|
||||
{%- if hasHint %}
|
||||
{{ govukHint({
|
||||
{{ usaHint({
|
||||
id: itemHintId,
|
||||
classes: 'govuk-checkboxes__hint',
|
||||
attributes: item.hint.attributes,
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@include govuk-exports("govuk/component/details") {
|
||||
|
||||
.govuk-details {
|
||||
@include govuk-font($size: 19);
|
||||
@include govuk-text-colour;
|
||||
@include govuk-responsive-margin(6, "bottom");
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.govuk-details__summary {
|
||||
// Make the focus outline shrink-wrap the text content of the summary
|
||||
display: inline-block;
|
||||
|
||||
// Absolutely position the marker against this element
|
||||
position: relative;
|
||||
|
||||
margin-bottom: govuk-spacing(1);
|
||||
|
||||
// Allow for absolutely positioned marker and align with disclosed text
|
||||
padding-left: govuk-spacing(4) + $govuk-border-width;
|
||||
|
||||
// Style the summary to look like a link...
|
||||
color: $govuk-link-colour;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// ...but only underline the text, not the arrow
|
||||
.govuk-details__summary-text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.govuk-details__summary:hover {
|
||||
color: $govuk-link-hover-colour;
|
||||
}
|
||||
|
||||
.govuk-details__summary:focus {
|
||||
// -1px offset fixes gap between background and outline in Firefox
|
||||
outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour;
|
||||
outline-offset: -1px;
|
||||
// When focussed, the text colour needs to be darker to ensure that colour
|
||||
// contrast is still acceptable
|
||||
color: $govuk-focus-text-colour;
|
||||
background: $govuk-focus-colour;
|
||||
}
|
||||
|
||||
// Remove the default details marker so we can style our own consistently and
|
||||
// ensure it displays in Firefox (see implementation.md for details)
|
||||
.govuk-details__summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Append our own open / closed marker using a pseudo-element
|
||||
.govuk-details__summary:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
margin: auto;
|
||||
|
||||
@include govuk-shape-arrow($direction: right, $base: 14px);
|
||||
|
||||
.govuk-details[open] > & {
|
||||
@include govuk-shape-arrow($direction: down, $base: 14px);
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-details__text {
|
||||
padding: govuk-spacing(3);
|
||||
padding-left: govuk-spacing(4);
|
||||
border-left: $govuk-border-width solid $govuk-border-colour;
|
||||
}
|
||||
|
||||
.govuk-details__text p {
|
||||
margin-top: 0;
|
||||
margin-bottom: govuk-spacing(4);
|
||||
}
|
||||
|
||||
.govuk-details__text > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukDetails(params) %}
|
||||
{% macro usaDetails(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details margin-bottom-1 {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
|
||||
<summary class="govuk-details__summary">
|
||||
<span class="govuk-details__summary-text">
|
||||
<details {%- if params.id %} id="{{params.id}}"{% endif %} class="usa-details margin-bottom-1 {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
|
||||
<summary class="usa-details__summary">
|
||||
<span class="usa-details__summary-text">
|
||||
{{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }}
|
||||
</span>
|
||||
</summary>
|
||||
<div class="govuk-details__text">
|
||||
<div class="usa-details__text">
|
||||
{{ params.html | safe if params.html else params.text }}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@include govuk-exports("govuk/component/error-message") {
|
||||
.govuk-error-message {
|
||||
@include govuk-font($size: 19, $weight: bold);
|
||||
|
||||
display: block;
|
||||
margin-bottom: govuk-spacing(3);
|
||||
clear: both;
|
||||
|
||||
color: $govuk-error-colour;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukErrorMessage(params) %}
|
||||
{% macro usaErrorMessage(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@include govuk-exports("govuk/component/fieldset") {
|
||||
.govuk-fieldset {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
@include govuk-clearfix;
|
||||
}
|
||||
|
||||
// Fix for Firefox < 53
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=504622
|
||||
@supports not (caret-color: auto) {
|
||||
.govuk-fieldset,
|
||||
x:-moz-any-link {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-fieldset__legend {
|
||||
@include govuk-font($size: 19);
|
||||
@include govuk-text-colour;
|
||||
|
||||
// Fix legend text wrapping in Edge and IE
|
||||
// 1. IE9-11 & Edge 12-13
|
||||
// 2. IE8-11
|
||||
box-sizing: border-box; // 1
|
||||
display: table; // 2
|
||||
max-width: 100%; // 1
|
||||
margin-bottom: govuk-spacing(2);
|
||||
padding: 0;
|
||||
// Hack to let legends or elements within legends have margins in webkit browsers
|
||||
overflow: hidden;
|
||||
|
||||
white-space: normal; // 1
|
||||
}
|
||||
|
||||
// Modifiers that make legends look more like their equivalent headings
|
||||
|
||||
.govuk-fieldset__legend--xl {
|
||||
@include govuk-font($size: 48, $weight: bold);
|
||||
margin-bottom: govuk-spacing(3);
|
||||
}
|
||||
|
||||
.govuk-fieldset__legend--l {
|
||||
@include govuk-font($size: 36, $weight: bold);
|
||||
margin-bottom: govuk-spacing(3);
|
||||
}
|
||||
|
||||
.govuk-fieldset__legend--m {
|
||||
@include govuk-font($size: 24, $weight: bold);
|
||||
margin-bottom: govuk-spacing(3);
|
||||
}
|
||||
|
||||
.govuk-fieldset__legend--s {
|
||||
@include govuk-font($size: 19, $weight: bold);
|
||||
}
|
||||
|
||||
// When the legend contains an H1, we want the H1 to inherit all styles from
|
||||
// the legend. Effectively we want to be able to treat the heading as if it is
|
||||
// not there.
|
||||
.govuk-fieldset__heading {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
}
|
||||
@@ -1,236 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@import "../../helpers/typography";
|
||||
|
||||
@include govuk-exports("govuk/component/footer") {
|
||||
|
||||
$usa-footer-background: $govuk-canvas-background-colour;
|
||||
$usa-footer-border-top: #a1acb2;
|
||||
$usa-footer-border: govuk-colour("grey-2");
|
||||
$usa-footer-text: #454a4c;
|
||||
$usa-footer-link: $usa-footer-text;
|
||||
$usa-footer-link-hover: #171819;
|
||||
|
||||
// Based on the govuk-crest-2x.png image dimensions.
|
||||
$usa-footer-crest-image-width-2x: 250px;
|
||||
$usa-footer-crest-image-height-2x: 204px;
|
||||
// Half the 2x image so that it fits the regular 1x size.
|
||||
$usa-footer-crest-image-width: ($usa-footer-crest-image-width-2x / 2);
|
||||
$usa-footer-crest-image-height: ($usa-footer-crest-image-height-2x / 2);
|
||||
|
||||
.usa-footer {
|
||||
@include govuk-font($size: 16);
|
||||
@include govuk-responsive-padding(7, "top");
|
||||
@include govuk-responsive-padding(5, "bottom");
|
||||
|
||||
border-top: 1px solid $usa-footer-border-top;
|
||||
color: $usa-footer-text;
|
||||
background: $usa-footer-background;
|
||||
}
|
||||
|
||||
.usa-footer__link {
|
||||
@include govuk-focusable-fill;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $usa-footer-link;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $usa-footer-link-hover;
|
||||
}
|
||||
|
||||
// When focussed, the text colour needs to be darker to ensure that colour
|
||||
// contrast is still acceptable
|
||||
&:focus {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
// alphagov/govuk_template includes a specific a:link:focus selector
|
||||
// designed to make unvisited links a slightly darker blue when focussed, so
|
||||
// we need to override the text colour for that combination of selectors.
|
||||
@include govuk-compatibility(govuk_template) {
|
||||
&:link:focus {
|
||||
@include govuk-text-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.usa-footer__section-break {
|
||||
margin: 0; // Reset `<hr>` default margins
|
||||
@include govuk-responsive-margin(8, "bottom");
|
||||
border: 0; // Reset `<hr>` default borders
|
||||
border-bottom: 1px solid $usa-footer-border;
|
||||
}
|
||||
|
||||
.usa-footer__meta {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex; // Support: Flexbox
|
||||
margin-right: -$govuk-gutter-half;
|
||||
margin-left: -$govuk-gutter-half;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap; // Support: Flexbox
|
||||
-webkit-box-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end; // Support: Flexbox
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center; // Support: Flexbox
|
||||
}
|
||||
|
||||
.usa-footer__meta-item {
|
||||
margin-right: $govuk-gutter-half;
|
||||
margin-bottom: govuk-spacing(5);
|
||||
margin-left: $govuk-gutter-half;
|
||||
}
|
||||
|
||||
.usa-footer__meta-item--grow {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1; // Support: Flexbox
|
||||
@include mq ($until: tablet) {
|
||||
-webkit-flex-basis: 320px;
|
||||
-ms-flex-preferred-size: 320px;
|
||||
flex-basis: 320px; // Support: Flexbox
|
||||
}
|
||||
}
|
||||
|
||||
.usa-footer__licence-logo {
|
||||
display: inline-block;
|
||||
margin-right: govuk-spacing(2);
|
||||
@include mq ($until: desktop) {
|
||||
margin-bottom: govuk-spacing(3);
|
||||
}
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.usa-footer__licence-description {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.usa-footer__copyright-logo {
|
||||
display: inline-block;
|
||||
min-width: $usa-footer-crest-image-width;
|
||||
padding-top: ($usa-footer-crest-image-height + govuk-spacing(2));
|
||||
background-image: govuk-image-url("govuk-crest.png");
|
||||
@include govuk-device-pixel-ratio {
|
||||
background-image: govuk-image-url("govuk-crest-2x.png");
|
||||
}
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 0%;
|
||||
background-size: $usa-footer-crest-image-width $usa-footer-crest-image-height;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.usa-footer__inline-list {
|
||||
margin-top: 0;
|
||||
margin-bottom: govuk-spacing(3);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.usa-footer__meta-custom {
|
||||
margin-bottom: govuk-spacing(4);
|
||||
}
|
||||
|
||||
.usa-footer__inline-list-item {
|
||||
display: inline-block;
|
||||
margin-right: govuk-spacing(3);
|
||||
margin-bottom: govuk-spacing(1);
|
||||
}
|
||||
|
||||
.usa-footer__heading {
|
||||
@include govuk-responsive-margin(7, "bottom");
|
||||
padding-bottom: govuk-spacing(4);
|
||||
@include mq ($until: tablet) {
|
||||
padding-bottom: govuk-spacing(2);
|
||||
}
|
||||
border-bottom: 1px solid $usa-footer-border;
|
||||
}
|
||||
|
||||
.usa-footer__navigation {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex; // Support: Flexbox
|
||||
margin-right: -$govuk-gutter-half;
|
||||
margin-left: -$govuk-gutter-half;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap; // Support: Flexbox
|
||||
}
|
||||
|
||||
.usa-footer__section {
|
||||
display: inline-block;
|
||||
margin-right: $govuk-gutter-half;
|
||||
margin-bottom: $govuk-gutter;
|
||||
margin-left: $govuk-gutter-half;
|
||||
vertical-align: top;
|
||||
// Ensure columns take up equal width (typically one-half:one-half)
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1; // Support: Flexbox
|
||||
-webkit-flex-shrink: 1;
|
||||
-ms-flex-negative: 1;
|
||||
flex-shrink: 1; // Support: Flexbox
|
||||
@include mq ($until: desktop) {
|
||||
// Make sure columns do not drop below 200px in width
|
||||
// Will typically result in wrapping, and end up in a single column on smaller screens.
|
||||
-webkit-flex-basis: 200px;
|
||||
-ms-flex-preferred-size: 200px;
|
||||
flex-basis: 200px; // Support: Flexbox
|
||||
}
|
||||
}
|
||||
|
||||
// Sections two-third:one-third on desktop
|
||||
@include mq ($from: desktop) {
|
||||
.usa-footer__section:first-child {
|
||||
-webkit-box-flex: 2;
|
||||
-webkit-flex-grow: 2;
|
||||
-ms-flex-positive: 2;
|
||||
flex-grow: 2; // Support: Flexbox
|
||||
}
|
||||
}
|
||||
|
||||
.usa-footer__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
-webkit-column-gap: $govuk-gutter;
|
||||
-moz-column-gap: $govuk-gutter;
|
||||
column-gap: $govuk-gutter; // Support: Columns
|
||||
}
|
||||
|
||||
@include mq ($from: desktop) {
|
||||
.usa-footer__list--columns-2 {
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
column-count: 2; // Support: Columns
|
||||
}
|
||||
|
||||
.usa-footer__list--columns-3 {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3; // Support: Columns
|
||||
}
|
||||
}
|
||||
|
||||
.usa-footer__list-item {
|
||||
@include govuk-responsive-margin(4, "bottom");
|
||||
}
|
||||
|
||||
.usa-footer__list-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukFooter(params) %}
|
||||
{% macro usaFooter(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,297 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@import "../../helpers/typography";
|
||||
|
||||
@include govuk-exports("govuk/component/header") {
|
||||
|
||||
$govuk-header-background: govuk-colour("black");
|
||||
$govuk-header-border-color: $govuk-brand-colour;
|
||||
$govuk-header-border-width: govuk-spacing(2);
|
||||
$govuk-header-text: govuk-colour("white");
|
||||
$govuk-header-link: govuk-colour("white");
|
||||
$govuk-header-link-hover: govuk-colour("white");
|
||||
$govuk-header-link-active: #1d8feb;
|
||||
$govuk-header-nav-item-border-color: #2e3133;
|
||||
|
||||
.govuk-header {
|
||||
@include govuk-font($size: 16);
|
||||
|
||||
border-bottom: govuk-spacing(2) solid govuk-colour("white");
|
||||
color: $govuk-header-text;
|
||||
background: $govuk-header-background;
|
||||
|
||||
}
|
||||
|
||||
.govuk-header__container--full-width {
|
||||
padding: 0 govuk-spacing(3);
|
||||
border-color: $govuk-header-border-color;
|
||||
|
||||
.govuk-header__menu-button {
|
||||
right: govuk-spacing(3);
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__container {
|
||||
@include govuk-clearfix;
|
||||
position: relative;
|
||||
margin-bottom: -$govuk-header-border-width;
|
||||
padding-top: govuk-spacing(2);
|
||||
border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
|
||||
}
|
||||
|
||||
.govuk-header__logotype {
|
||||
margin-right: govuk-spacing(1);
|
||||
}
|
||||
|
||||
.govuk-header__logotype-fallback-image {
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.govuk-header__product-name {
|
||||
@include govuk-font($size: 24);
|
||||
display: inline-table;
|
||||
padding-right: govuk-spacing(2);
|
||||
}
|
||||
|
||||
.govuk-header__link {
|
||||
@include govuk-focusable-fill;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $govuk-header-link;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// When focussed, the text colour needs to be darker to ensure that colour
|
||||
// contrast is still acceptable
|
||||
&:focus {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
// alphagov/govuk_template includes a specific a:link:focus selector
|
||||
// designed to make unvisited links a slightly darker blue when focussed, so
|
||||
// we need to override the text colour for that combination of selectors.
|
||||
@include govuk-compatibility(govuk_template) {
|
||||
&:link:focus {
|
||||
@include govuk-text-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__link--homepage {
|
||||
// Font size needs to be set on the link so that the box sizing is correct
|
||||
// in Firefox
|
||||
@include govuk-font($size: false, $weight: bold);
|
||||
|
||||
display: inline-block;
|
||||
font-size: 30px; // We don't have a mixin that produces 30px font size
|
||||
line-height: 30px;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
// Negate the added border
|
||||
margin-bottom: -1px;
|
||||
// Omitting colour will use default value of currentColor – if we
|
||||
// specified currentColor explicitly IE8 would ignore this rule.
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__link--service-name {
|
||||
display: inline-block;
|
||||
margin-bottom: govuk-spacing(2);
|
||||
@include govuk-font($size: 24, $weight: bold);
|
||||
}
|
||||
|
||||
.govuk-header__logo,
|
||||
.govuk-header__content {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.govuk-header__logo {
|
||||
@include govuk-responsive-margin(2, "bottom");
|
||||
padding-right: govuk-spacing(8);
|
||||
|
||||
@include mq ($from: desktop) {
|
||||
width: 33.33%;
|
||||
padding-right: $govuk-gutter-half;
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__content {
|
||||
@include mq ($from: desktop) {
|
||||
width: 66.66%;
|
||||
padding-left: $govuk-gutter-half;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__menu-button {
|
||||
@include govuk-font($size: 16);
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: govuk-spacing(4);
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: $govuk-header-link;
|
||||
background: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
|
||||
content: "";
|
||||
margin-left: govuk-spacing(1);
|
||||
}
|
||||
|
||||
@include govuk-focusable;
|
||||
|
||||
@include mq ($from: tablet) {
|
||||
top: govuk-spacing(3);
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__menu-button--open {
|
||||
&::after {
|
||||
@include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__navigation {
|
||||
@include govuk-responsive-margin(2, "bottom");
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.js-enabled {
|
||||
.govuk-header__menu-button {
|
||||
display: block;
|
||||
@include mq ($from: desktop) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__navigation {
|
||||
display: none;
|
||||
@include mq ($from: desktop) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__navigation--open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.govuk-header__navigation--end {
|
||||
@include mq ($from: desktop) {
|
||||
margin: 0;
|
||||
padding: govuk-spacing(1) 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__navigation--no-service-name {
|
||||
padding-top: govuk-spacing(7);
|
||||
}
|
||||
|
||||
.govuk-header__navigation-item {
|
||||
padding: govuk-spacing(2) 0;
|
||||
border-bottom: 1px solid $govuk-header-nav-item-border-color;
|
||||
|
||||
@include mq ($from: desktop) {
|
||||
display: inline-block;
|
||||
margin-right: govuk-spacing(3);
|
||||
padding: govuk-spacing(1) 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@include govuk-font($size: 16, $weight: bold);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__navigation-item--active {
|
||||
a {
|
||||
&:link,
|
||||
&:hover,
|
||||
&:visited {
|
||||
color: $govuk-header-link-active;
|
||||
}
|
||||
|
||||
// When focussed, the text colour needs to be darker to ensure that colour
|
||||
// contrast is still acceptable
|
||||
&:focus {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-header__navigation-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@include govuk-media-query($media-type: print) {
|
||||
.govuk-header {
|
||||
border-bottom-width: 0;
|
||||
color: govuk-colour("black");
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Hide the inverted logo when printing in browsers that don't support SVG.
|
||||
.govuk-header__logotype-fallback-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.govuk-header__link {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: govuk-colour("black");
|
||||
}
|
||||
|
||||
// Do not append link href to GOV.UK link when printing (e.g. '(/)')
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Begin adjustments for font baseline offset
|
||||
// These should be removed when the font is updated with the correct baseline
|
||||
.govuk-header__logotype {
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.govuk-header {
|
||||
$offset: 3px;
|
||||
padding-top: $offset;
|
||||
}
|
||||
// End adjustments
|
||||
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukHeader(params) %}
|
||||
{% macro usaHeader(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@include govuk-exports("govuk/component/hint") {
|
||||
.usa-hint {
|
||||
@include govuk-font($size: 19);
|
||||
|
||||
display: block;
|
||||
|
||||
margin-bottom: govuk-spacing(3);
|
||||
|
||||
color: $govuk-secondary-text-colour;
|
||||
}
|
||||
|
||||
// Reduces margin-bottom of hint when used after the default label (no class)
|
||||
// or govuk-label--s for better vertical alignment.
|
||||
|
||||
// This adjustment will not work when the label is inside the <h1>, however it
|
||||
// is unlikely that the default or govuk-label--s class would be used in this
|
||||
// case.
|
||||
|
||||
// This adjustment will not work in browsers that do not support :not().
|
||||
// Users with these browsers will see the default size margin (5px larger).
|
||||
|
||||
.govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .usa-hint {
|
||||
margin-bottom: govuk-spacing(2);
|
||||
}
|
||||
|
||||
// Reduces margin-bottom of hint when used after the default legend (no class)
|
||||
// or govuk-fieldset__legend--s for better vertical alignment.
|
||||
|
||||
// This adjustment will not work when the legend is outside the <h1>, however
|
||||
// it is unlikely that the default or govuk-fieldset__legend--s class would be
|
||||
// used in this case.
|
||||
|
||||
// This adjustment will not work in browsers that do not support :not().
|
||||
// Users with these browsers will see the default size margin (5px larger).
|
||||
|
||||
.govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .usa-hint {
|
||||
margin-bottom: govuk-spacing(2);
|
||||
}
|
||||
|
||||
// Reduces visual spacing of legend when there is a hint
|
||||
|
||||
.govuk-fieldset__legend + .usa-hint,
|
||||
.govuk-fieldset__legend + .usa-hint {
|
||||
margin-top: -(govuk-spacing(1));
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukHint(params) %}
|
||||
{% macro usaHint(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@import "../error-message/error-message";
|
||||
@import "../hint/hint";
|
||||
@import "../label/label";
|
||||
|
||||
@include govuk-exports("govuk/component/input") {
|
||||
.govuk-input {
|
||||
@include govuk-font($size: 19);
|
||||
@include govuk-focusable;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 0;
|
||||
|
||||
padding: govuk-spacing(1);
|
||||
// setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
|
||||
// as background-color and color need to always be set together, color should not be set either
|
||||
border: $govuk-border-width-form-element solid $govuk-input-border-colour;
|
||||
border-radius: 0;
|
||||
|
||||
// Disable inner shadow and remove rounded corners
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.govuk-input::-webkit-outer-spin-button,
|
||||
.govuk-input::-webkit-inner-spin-button {
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.govuk-input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.govuk-input--error {
|
||||
border: $govuk-border-width-form-element-error solid $govuk-error-colour;
|
||||
}
|
||||
|
||||
// The ex measurements are based on the number of W's that can fit inside the input
|
||||
// Extra space is left on the right hand side to allow for the Safari prefill icon
|
||||
// Linear regression estimation based on visual tests: y = 1.76 + 1.81x
|
||||
|
||||
.govuk-input--width-30 {
|
||||
max-width: 56ex + 3ex;
|
||||
}
|
||||
|
||||
.govuk-input--width-20 {
|
||||
max-width: 38ex + 3ex;
|
||||
}
|
||||
|
||||
.govuk-input--width-10 {
|
||||
max-width: 20ex + 3ex;
|
||||
}
|
||||
|
||||
.govuk-input--width-5 {
|
||||
max-width: 10.8ex;
|
||||
}
|
||||
|
||||
.govuk-input--width-4 {
|
||||
max-width: 9ex;
|
||||
}
|
||||
|
||||
.govuk-input--width-3 {
|
||||
max-width: 7.2ex;
|
||||
}
|
||||
|
||||
.govuk-input--width-2 {
|
||||
max-width: 5.4ex;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukInput(params) %}
|
||||
{% macro usaInput(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
{% from "../error-message/macro.njk" import govukErrorMessage -%}
|
||||
{% from "../hint/macro.njk" import govukHint %}
|
||||
{% from "../label/macro.njk" import govukLabel %}
|
||||
{% from "../error-message/macro.njk" import usaErrorMessage -%}
|
||||
{% from "../hint/macro.njk" import usaHint %}
|
||||
{% from "../label/macro.njk" import usaLabel %}
|
||||
|
||||
{#- a record of other elements that we need to associate with the input using
|
||||
aria-describedby – for example hints or error messages -#}
|
||||
{% set describedBy = params.describedBy if params.describedBy else "" %}
|
||||
<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
|
||||
{{ govukLabel({
|
||||
{{ usaLabel({
|
||||
html: params.label.html,
|
||||
text: params.label.text,
|
||||
classes: params.label.classes,
|
||||
@@ -17,7 +17,7 @@
|
||||
{% if params.hint %}
|
||||
{% set hintId = params.id + '-hint' %}
|
||||
{% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
|
||||
{{ govukHint({
|
||||
{{ usaHint({
|
||||
id: hintId,
|
||||
classes: params.hint.classes,
|
||||
attributes: params.hint.attributes,
|
||||
@@ -28,7 +28,7 @@
|
||||
{% if params.errorMessage %}
|
||||
{% set errorId = params.id + '-error' %}
|
||||
{% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
|
||||
{{ govukErrorMessage({
|
||||
{{ usaErrorMessage({
|
||||
id: errorId,
|
||||
classes: params.errorMessage.classes,
|
||||
attributes: params.errorMessage.attributes,
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@include govuk-exports("govuk/component/inset-text") {
|
||||
.govuk-inset-text {
|
||||
@include govuk-font($size: 19);
|
||||
@include govuk-text-colour;
|
||||
padding: govuk-spacing(3);
|
||||
// Margin top intended to collapse
|
||||
// This adds an additional 10px to the paragraph above
|
||||
@include govuk-responsive-margin(6, "top");
|
||||
@include govuk-responsive-margin(6, "bottom");
|
||||
|
||||
clear: both;
|
||||
|
||||
border-left: $govuk-border-width-wide solid $govuk-border-colour;
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> :only-child,
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukInsetText(params) %}
|
||||
{% macro usaInsetText(params) %}
|
||||
{%- include './template.njk' -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@include govuk-exports("govuk/component/label") {
|
||||
.govuk-label {
|
||||
@include govuk-font($size: 19);
|
||||
@include govuk-text-colour;
|
||||
|
||||
display: block;
|
||||
|
||||
margin-bottom: govuk-spacing(1);
|
||||
}
|
||||
|
||||
// Modifiers that make labels look more like their equivalent headings
|
||||
|
||||
.govuk-label--xl {
|
||||
@include govuk-font($size: 48, $weight: bold);
|
||||
margin-bottom: govuk-spacing(3);
|
||||
}
|
||||
|
||||
.govuk-label--l {
|
||||
@include govuk-font($size: 36, $weight: bold);
|
||||
margin-bottom: govuk-spacing(3);
|
||||
}
|
||||
|
||||
.govuk-label--m {
|
||||
@include govuk-font($size: 24, $weight: bold);
|
||||
margin-bottom: govuk-spacing(2);
|
||||
}
|
||||
|
||||
.govuk-label--s {
|
||||
@include govuk-font($size: 19, $weight: bold);
|
||||
}
|
||||
|
||||
// When the label is nested inside a heading, override the heading so that it
|
||||
// does not have a margin. Effectively we want to be able to treat the heading
|
||||
// as if it is not there.
|
||||
//
|
||||
// This breaks BEM conventions because it exists as a parent of the 'block',
|
||||
// so we can't really consider an element.
|
||||
.govuk-label-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukLabel(params) %}
|
||||
{% macro usaLabel(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@include govuk-exports("govuk/component/label") {
|
||||
.govuk-label {
|
||||
@include govuk-font($size: 19);
|
||||
@include govuk-text-colour;
|
||||
|
||||
display: block;
|
||||
|
||||
margin-bottom: govuk-spacing(1);
|
||||
}
|
||||
|
||||
// Modifiers that make labels look more like their equivalent headings
|
||||
|
||||
.govuk-label--xl {
|
||||
@include govuk-font($size: 48, $weight: bold);
|
||||
margin-bottom: govuk-spacing(3);
|
||||
}
|
||||
|
||||
.govuk-label--l {
|
||||
@include govuk-font($size: 36, $weight: bold);
|
||||
margin-bottom: govuk-spacing(3);
|
||||
}
|
||||
|
||||
.govuk-label--m {
|
||||
@include govuk-font($size: 24, $weight: bold);
|
||||
margin-bottom: govuk-spacing(2);
|
||||
}
|
||||
|
||||
.govuk-label--s {
|
||||
@include govuk-font($size: 19, $weight: bold);
|
||||
}
|
||||
|
||||
// When the label is nested inside a heading, override the heading so that it
|
||||
// does not have a margin. Effectively we want to be able to treat the heading
|
||||
// as if it is not there.
|
||||
//
|
||||
// This breaks BEM conventions because it exists as a parent of the 'block',
|
||||
// so we can't really consider an element.
|
||||
.govuk-label-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,348 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@import "../error-message/error-message";
|
||||
@import "../fieldset/fieldset";
|
||||
@import "../hint/hint";
|
||||
@import "../label/label";
|
||||
|
||||
@include govuk-exports("govuk/component/radios") {
|
||||
|
||||
$govuk-touch-target-size: 44px;
|
||||
$govuk-radios-size: 40px;
|
||||
$govuk-small-radios-size: 24px;
|
||||
$govuk-radios-label-padding-left-right: govuk-spacing(3);
|
||||
// When the default focus width is used on a curved edge it looks visually smaller.
|
||||
// So for the circular radios we bump the default to make it look visually consistent.
|
||||
$govuk-radios-focus-width: $govuk-focus-width + 1px;
|
||||
|
||||
.govuk-radios__item {
|
||||
@include govuk-font($size: 19);
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
min-height: $govuk-radios-size;
|
||||
|
||||
margin-bottom: govuk-spacing(2);
|
||||
padding-left: $govuk-radios-size;
|
||||
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.govuk-radios__item:last-child,
|
||||
.govuk-radios__item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.govuk-radios__input {
|
||||
$input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
// IE8 doesn’t support pseudo-elements, so we don’t want to hide native
|
||||
// elements there.
|
||||
@include govuk-not-ie8 {
|
||||
position: absolute;
|
||||
|
||||
z-index: 1;
|
||||
top: $input-offset * -1;
|
||||
left: $input-offset * -1;
|
||||
|
||||
width: $govuk-touch-target-size;
|
||||
height: $govuk-touch-target-size;
|
||||
margin: 0;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@include govuk-if-ie8 {
|
||||
margin-top: 10px;
|
||||
margin-right: $govuk-radios-size / -2;
|
||||
margin-left: $govuk-radios-size / -2;
|
||||
float: left;
|
||||
|
||||
// add focus outline to input
|
||||
&:focus {
|
||||
outline: $govuk-focus-width solid $govuk-focus-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-radios__label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
padding: 8px $govuk-radios-label-padding-left-right govuk-spacing(1);
|
||||
cursor: pointer;
|
||||
// remove 300ms pause on mobile
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
// ( ) Radio ring
|
||||
.govuk-radios__label::before {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: $govuk-radios-size;
|
||||
height: $govuk-radios-size;
|
||||
|
||||
border: $govuk-border-width-form-element solid currentColor;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// • Radio button
|
||||
//
|
||||
// We create the 'button' entirely out of 'border' so that they remain
|
||||
// 'filled' even when colours are overridden in the browser.
|
||||
.govuk-radios__label::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: govuk-spacing(2);
|
||||
left: govuk-spacing(2);
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border: govuk-spacing(2) solid currentColor;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.govuk-radios__hint {
|
||||
display: block;
|
||||
padding-right: $govuk-radios-label-padding-left-right;
|
||||
padding-left: $govuk-radios-label-padding-left-right;
|
||||
}
|
||||
|
||||
// Focused state
|
||||
.govuk-radios__input:focus + .govuk-radios__label::before {
|
||||
// Since box-shadows are removed when users customise their colours we set a
|
||||
// transparent outline that is shown instead.
|
||||
// https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
|
||||
outline: $govuk-focus-width solid transparent;
|
||||
outline-offset: $govuk-focus-width;
|
||||
box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
|
||||
}
|
||||
|
||||
// Selected state
|
||||
.govuk-radios__input:checked + .govuk-radios__label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.govuk-radios__input:disabled,
|
||||
.govuk-radios__input:disabled + .govuk-radios__label {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.govuk-radios__input:disabled + .govuk-radios__label {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
// Inline radios
|
||||
// =========================================================
|
||||
|
||||
.govuk-radios--inline {
|
||||
@include mq ($from: tablet) {
|
||||
@include govuk-clearfix;
|
||||
|
||||
.govuk-radios__item {
|
||||
margin-right: govuk-spacing(4);
|
||||
float: left;
|
||||
clear: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent inline modifier being used with conditional reveals
|
||||
&.govuk-radios--conditional {
|
||||
.govuk-radios__item {
|
||||
margin-right: 0;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
// Dividers ('or')
|
||||
// =========================================================
|
||||
|
||||
.govuk-radios__divider {
|
||||
$govuk-divider-size: $govuk-radios-size !default;
|
||||
@include govuk-font($size: 19);
|
||||
@include govuk-text-colour;
|
||||
width: $govuk-divider-size;
|
||||
margin-bottom: govuk-spacing(2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
// Conditional reveals
|
||||
// =========================================================
|
||||
|
||||
$conditional-border-width: $govuk-border-width-mobile;
|
||||
// Calculate the amount of padding needed to keep the border centered against the radios.
|
||||
$conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
|
||||
// Move the border centered with the radios
|
||||
$conditional-margin-left: $conditional-border-padding;
|
||||
// Move the contents of the conditional inline with the label
|
||||
$conditional-padding-left: $conditional-border-padding + $govuk-radios-label-padding-left-right;
|
||||
|
||||
.govuk-radios__conditional {
|
||||
@include govuk-responsive-margin(4, "bottom");
|
||||
margin-left: $conditional-margin-left;
|
||||
padding-left: $conditional-padding-left;
|
||||
border-left: $conditional-border-width solid $govuk-border-colour;
|
||||
|
||||
.js-enabled &--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
// Small checkboxes
|
||||
// =========================================================
|
||||
|
||||
.govuk-radios--small {
|
||||
|
||||
$input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2;
|
||||
$label-offset: $govuk-touch-target-size - $input-offset;
|
||||
|
||||
.govuk-radios__item {
|
||||
@include govuk-clearfix;
|
||||
min-height: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: $label-offset;
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Shift the touch target into the left margin so that the visible edge of
|
||||
// the control is aligned
|
||||
//
|
||||
// ┆Which colour is your favourite?
|
||||
// ┌┆───┐
|
||||
// │┆() │ Purple
|
||||
// └┆▲──┘
|
||||
// ▲┆└─ Radio pseudo element, aligned with margin
|
||||
// └─── Touch target (invisible input), shifted into the margin
|
||||
.govuk-radios__input {
|
||||
@include govuk-not-ie8 {
|
||||
left: $input-offset * -1;
|
||||
}
|
||||
|
||||
@include govuk-if-ie8 {
|
||||
margin-left: $govuk-small-radios-size * -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust the size and position of the label.
|
||||
//
|
||||
// Unlike larger radios, we also have to float the label in order to
|
||||
// 'shrink' it, preventing the hover state from kicking in across the full
|
||||
// width of the parent element.
|
||||
.govuk-radios__label {
|
||||
margin-top: -2px;
|
||||
padding: 13px govuk-spacing(3) 13px 1px;
|
||||
float: left;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
padding: 11px govuk-spacing(3) 10px 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// ( ) Radio ring
|
||||
//
|
||||
// Reduce the size of the control [1], vertically centering it within the
|
||||
// touch target [2]
|
||||
.govuk-radios__label::before {
|
||||
top: $input-offset - $govuk-border-width-form-element; // 2
|
||||
width: $govuk-small-radios-size; // 1
|
||||
height: $govuk-small-radios-size; // 1
|
||||
}
|
||||
|
||||
// • Radio button
|
||||
//
|
||||
// Reduce the size of the 'button' and center it within the ring
|
||||
.govuk-radios__label::after {
|
||||
top: 14px;
|
||||
left: 6px;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
// Fix position of hint with small radios
|
||||
//
|
||||
// Do not use hints with small radios – because they're within the input
|
||||
// wrapper they trigger the hover state, but clicking them doesn't actually
|
||||
// activate the control.
|
||||
//
|
||||
// (If you do use them, they won't look completely broken... but seriously,
|
||||
// don't use them)
|
||||
.govuk-radios__hint {
|
||||
padding: 0;
|
||||
clear: both;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Align conditional reveals with small radios
|
||||
.govuk-radios__conditional {
|
||||
$margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2);
|
||||
margin-left: $margin-left;
|
||||
padding-left: $label-offset - ($margin-left + $conditional-border-width);
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.govuk-radios__divider {
|
||||
width: $govuk-small-radios-size;
|
||||
margin-bottom: govuk-spacing(1);
|
||||
}
|
||||
|
||||
// Hover state for small radios.
|
||||
//
|
||||
// We use a hover state for small radios because the touch target size
|
||||
// is so much larger than their visible size, and so we need to provide
|
||||
// feedback to the user as to which radio they will select when their
|
||||
// cursor is outside of the visible area.
|
||||
.govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
|
||||
box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
|
||||
}
|
||||
|
||||
// Because we've overridden the border-shadow provided by the focus state,
|
||||
// we need to redefine that too.
|
||||
//
|
||||
// We use two box shadows, one that restores the original focus state [1]
|
||||
// and another that then applies the hover state [2].
|
||||
.govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
|
||||
// sass-lint:disable indentation
|
||||
box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
|
||||
0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
|
||||
}
|
||||
|
||||
// For devices that explicitly don't support hover, don't provide a hover
|
||||
// state (e.g. on touch devices like iOS).
|
||||
//
|
||||
// We can't use `@media (hover: hover)` because we wouldn't get the hover
|
||||
// state in browsers that don't support `@media (hover)` (like Internet
|
||||
// Explorer) – so we have to 'undo' the hover state instead.
|
||||
@media (hover: none), (pointer: coarse) {
|
||||
.govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
|
||||
box-shadow: initial;
|
||||
}
|
||||
|
||||
.govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
|
||||
box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukRadios(params) %}
|
||||
{% macro usaRadios(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% from "../error-message/macro.njk" import govukErrorMessage -%}
|
||||
{% from "../error-message/macro.njk" import usaErrorMessage -%}
|
||||
{% from "../fieldset/macro.njk" import govukFieldset %}
|
||||
{% from "../hint/macro.njk" import govukHint %}
|
||||
{% from "../label/macro.njk" import govukLabel %}
|
||||
{% from "../hint/macro.njk" import usaHint %}
|
||||
{% from "../label/macro.njk" import usaLabel %}
|
||||
|
||||
{#- If an id 'prefix' is not passed, fall back to using the name attribute
|
||||
instead. We need this for error messages and hints as well -#}
|
||||
@@ -23,7 +23,7 @@
|
||||
{% if params.hint %}
|
||||
{% set hintId = idPrefix + '-hint' %}
|
||||
{% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
|
||||
{{ govukHint({
|
||||
{{ usaHint({
|
||||
id: hintId,
|
||||
classes: params.hint.classes,
|
||||
attributes: params.hint.attributes,
|
||||
@@ -34,7 +34,7 @@
|
||||
{% if params.errorMessage %}
|
||||
{% set errorId = idPrefix + '-error' %}
|
||||
{% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
|
||||
{{ govukErrorMessage({
|
||||
{{ usaErrorMessage({
|
||||
id: errorId,
|
||||
classes: params.errorMessage.classes,
|
||||
attributes: params.errorMessage.attributes,
|
||||
@@ -61,7 +61,7 @@
|
||||
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
|
||||
{%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
|
||||
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
||||
{{ govukLabel({
|
||||
{{ usaLabel({
|
||||
html: item.html,
|
||||
text: item.text,
|
||||
classes: 'usa-radio__label' + (' ' + item.label.classes if item.label.classes),
|
||||
@@ -69,7 +69,7 @@
|
||||
for: id
|
||||
}) | indent(6) | trim }}
|
||||
{%- if hasHint %}
|
||||
{{ govukHint({
|
||||
{{ usaHint({
|
||||
id: itemHintId,
|
||||
classes: 'usa-checkbox__label-description',
|
||||
attributes: item.hint.attributes,
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@include govuk-exports("govuk/component/skip-link") {
|
||||
.govuk-skip-link {
|
||||
@include govuk-visually-hidden-focusable;
|
||||
@include govuk-link-common;
|
||||
@include govuk-link-style-text;
|
||||
@include govuk-typography-responsive($size: 16);
|
||||
|
||||
display: block;
|
||||
padding: govuk-spacing(2) govuk-spacing(3);
|
||||
|
||||
// Respect 'display cutout' safe area (avoids notches and rounded corners)
|
||||
@supports (padding: unquote("max(calc(0px))")) {
|
||||
$padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
|
||||
$padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
|
||||
|
||||
// Use max() to pick largest padding, default or with safe area
|
||||
// Escaped due to Sass max() vs. CSS native max()
|
||||
padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})");
|
||||
padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
{% macro govukSkipLink(params) %}
|
||||
{% macro usaSkipLink(params) %}
|
||||
{%- include "./template.njk" -%}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
@import "../../settings/all";
|
||||
@import "../../tools/all";
|
||||
@import "../../helpers/all";
|
||||
|
||||
@import "../error-message/error-message";
|
||||
@import "../hint/hint";
|
||||
@import "../label/label";
|
||||
|
||||
@include govuk-exports("govuk/component/textarea") {
|
||||
.govuk-textarea {
|
||||
@include govuk-font($size: 19, $line-height: 1.25);
|
||||
@include govuk-focusable;
|
||||
|
||||
box-sizing: border-box; // should this be global?
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
@include govuk-responsive-margin(6, "bottom");
|
||||
padding: govuk-spacing(1);
|
||||
|
||||
resize: vertical;
|
||||
|
||||
border: $govuk-border-width-form-element solid $govuk-input-border-colour;
|
||||
border-radius: 0;
|
||||
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.govuk-textarea--error {
|
||||
border: $govuk-border-width-form-element-error solid $govuk-error-colour;
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,12 @@
|
||||
{% from "../error-message/macro.njk" import govukErrorMessage -%}
|
||||
{% from "../hint/macro.njk" import govukHint %}
|
||||
{% from "../label/macro.njk" import govukLabel %}
|
||||
{% from "../error-message/macro.njk" import usaErrorMessage -%}
|
||||
{% from "../hint/macro.njk" import usaHint %}
|
||||
{% from "../label/macro.njk" import usaLabel %}
|
||||
|
||||
{#- a record of other elements that we need to associate with the input using
|
||||
aria-describedby – for example hints or error messages -#}
|
||||
{% set describedBy = params.describedBy if params.describedBy else "" %}
|
||||
<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
|
||||
{{ govukLabel({
|
||||
{{ usaLabel({
|
||||
html: params.label.html,
|
||||
text: params.label.text,
|
||||
classes: params.label.classes,
|
||||
@@ -17,7 +17,7 @@
|
||||
{% if params.hint %}
|
||||
{% set hintId = params.id + '-hint' %}
|
||||
{% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
|
||||
{{ govukHint({
|
||||
{{ usaHint({
|
||||
id: hintId,
|
||||
classes: params.hint.classes,
|
||||
attributes: params.hint.attributes,
|
||||
@@ -28,7 +28,7 @@
|
||||
{% if params.errorMessage %}
|
||||
{% set errorId = params.id + '-error' %}
|
||||
{% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
|
||||
{{ govukErrorMessage({
|
||||
{{ usaErrorMessage({
|
||||
id: errorId,
|
||||
classes: params.errorMessage.classes,
|
||||
attributes: params.errorMessage.attributes,
|
||||
@@ -37,7 +37,7 @@
|
||||
visuallyHiddenText: params.errorMessage.visuallyHiddenText
|
||||
}) | indent(2) | trim }}
|
||||
{% endif %}
|
||||
<textarea class="govuk-textarea {{- ' govuk-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
|
||||
<textarea class="usa-textarea {{- ' usa-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
|
||||
{%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
|
||||
{%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
|
||||
{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% macro file_upload(
|
||||
field,
|
||||
@@ -39,6 +39,6 @@
|
||||
{% endif %}
|
||||
<label class="file-upload-filename" for="{{ field.name }}"></label>
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||
{{ govukButton({ "text": "Submit", "classes": "file-upload-submit" }) }}
|
||||
{{ usaButton({ "text": "Submit", "classes": "file-upload-submit" }) }}
|
||||
</form>
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% from "components/components/fieldset/macro.njk" import govukFieldset %}
|
||||
{% from "components/components/error-message/macro.njk" import govukErrorMessage %}
|
||||
{% from "components/components/error-message/macro.njk" import usaErrorMessage %}
|
||||
|
||||
{% macro list_entry(
|
||||
field,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% macro page_footer(
|
||||
button_text=None,
|
||||
@@ -27,7 +27,7 @@
|
||||
}) %}
|
||||
{% endif %}
|
||||
|
||||
{{ govukButton(button_data) }}
|
||||
{{ usaButton(button_data) }}
|
||||
|
||||
{% endif %}
|
||||
{% if delete_link %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% from "components/components/error-message/macro.njk" import govukErrorMessage -%}
|
||||
{% from "components/components/error-message/macro.njk" import usaErrorMessage -%}
|
||||
{% from "components/components/fieldset/macro.njk" import govukFieldset %}
|
||||
{% from "components/components/hint/macro.njk" import govukHint %}
|
||||
{% from "components/components/hint/macro.njk" import usaHint %}
|
||||
{% from "components/components/radio-label/macro.njk" import usaRadioLabel %}
|
||||
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
{% if params.hint %}
|
||||
{% set hintId = idPrefix + '-hint' %}
|
||||
{% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
|
||||
{{ govukHint({
|
||||
{{ usaHint({
|
||||
id: hintId,
|
||||
classes: params.hint.classes,
|
||||
attributes: params.hint.attributes,
|
||||
@@ -64,7 +64,7 @@
|
||||
{% if params.errorMessage %}
|
||||
{% set errorId = idPrefix + '-error' %}
|
||||
{% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
|
||||
{{ govukErrorMessage({
|
||||
{{ usaErrorMessage({
|
||||
id: errorId,
|
||||
classes: params.errorMessage.classes,
|
||||
attributes: params.errorMessage.attributes,
|
||||
@@ -100,7 +100,7 @@
|
||||
for: id
|
||||
}) | indent(6) | trim }}
|
||||
{%- if hasHint %}
|
||||
{{ govukHint({
|
||||
{{ usaHint({
|
||||
id: itemHintId,
|
||||
classes: 'govuk-checkboxes__hint' + (' ' + item.hint.classes if item.hint.classes),
|
||||
attributes: item.hint.attributes,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% from "./components/components/skip-link/macro.njk" import govukSkipLink -%}
|
||||
{% from "./components/components/header/macro.njk" import govukHeader -%}
|
||||
{% from "./components/components/footer/macro.njk" import govukFooter -%}
|
||||
{% from "./components/components/skip-link/macro.njk" import usaSkipLink -%}
|
||||
{% from "./components/components/header/macro.njk" import usaHeader -%}
|
||||
{% from "./components/components/footer/macro.njk" import usaFooter -%}
|
||||
{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
|
||||
{%- set assetUrl = assetUrl | default(assetPath) -%}
|
||||
<!DOCTYPE html>
|
||||
@@ -37,14 +37,14 @@
|
||||
{% block bodyStart %}{% endblock %}
|
||||
|
||||
{% block skipLink %}
|
||||
{{ govukSkipLink({
|
||||
{{ usaSkipLink({
|
||||
"href": '#main-content',
|
||||
"text": 'Skip to main content'
|
||||
}) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
{{ govukHeader({}) }}
|
||||
{{ usaHeader({}) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
@@ -57,7 +57,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
{{ govukFooter({}) }}
|
||||
{{ usaFooter({}) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block bodyEnd %}{% endblock %}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
{% from "components/components/inset-text/macro.njk" import govukInsetText %}
|
||||
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
|
||||
|
||||
<h2 class="heading-medium">Formatting</h2>
|
||||
<p class="usa-body">
|
||||
To put a heading in your template, use a hash:
|
||||
</p>
|
||||
{{ govukInsetText({
|
||||
{{ usaInsetText({
|
||||
"text": "# This is a heading",
|
||||
"classes": ""})
|
||||
}}
|
||||
<p class="usa-body">
|
||||
To make bullet points, use asterisks:
|
||||
</p>
|
||||
{{ govukInsetText({
|
||||
{{ usaInsetText({
|
||||
"html": "* point 1<br/>
|
||||
* point 2<br/>
|
||||
* point 3<br/>",
|
||||
@@ -20,7 +20,7 @@
|
||||
<p class="usa-body">
|
||||
To insert a page break, use three asterisks:
|
||||
</p>
|
||||
{{ govukInsetText({
|
||||
{{ usaInsetText({
|
||||
"html": "Content on page 1<br/>
|
||||
<br/>
|
||||
***<br/>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
{% from "components/components/inset-text/macro.njk" import govukInsetText %}
|
||||
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
|
||||
|
||||
<h2 class="heading-medium">Formatting</h2>
|
||||
<p class="bottom-gutter-1-3">
|
||||
To put a title in your template, use a hash:
|
||||
</p>
|
||||
<div>
|
||||
{{ govukInsetText({"text": "# This is a title", "classes": ""})}}
|
||||
{{ usaInsetText({"text": "# This is a title", "classes": ""})}}
|
||||
</div>
|
||||
<p class="bottom-gutter-1-3">
|
||||
To make bullet points, use asterisks:
|
||||
</p>
|
||||
<div>
|
||||
{{ govukInsetText({
|
||||
{{ usaInsetText({
|
||||
"html": "* point 1<br/>
|
||||
* point 2<br/>
|
||||
* point 3<br/>",
|
||||
@@ -22,12 +22,12 @@
|
||||
To add inset text, use a caret:
|
||||
</p>
|
||||
<div>
|
||||
{{ govukInsetText({"text": "^ You must tell us if your circumstances change", "classes": ""})}}
|
||||
{{ usaInsetText({"text": "^ You must tell us if your circumstances change", "classes": ""})}}
|
||||
</div>
|
||||
<p class="bottom-gutter-1-3">
|
||||
To add a horizontal line, use three dashes:
|
||||
</p>
|
||||
{{ govukInsetText({
|
||||
{{ usaInsetText({
|
||||
"html": '<p class="usa-body">First paragraph</p>
|
||||
<p class="usa-body" style="letter-spacing: 1px;">---</p>
|
||||
<p class="usa-body">Second paragraph</p>',
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
{% from "components/components/inset-text/macro.njk" import govukInsetText %}
|
||||
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
|
||||
|
||||
<h2 class="font-body-lg">Links and URLs</h2>
|
||||
<p class="bottom-gutter-1-3">
|
||||
Always use full URLs, starting with https://. For example:
|
||||
{{ govukInsetText({
|
||||
{{ usaInsetText({
|
||||
"text": "Apply now at https://www.usa.gov/example",
|
||||
"classes": "usa-body"})
|
||||
}}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% from "components/components/inset-text/macro.njk" import govukInsetText %}
|
||||
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
|
||||
|
||||
<h2 class="font-body-lg">
|
||||
Optional content
|
||||
@@ -10,7 +10,7 @@
|
||||
For example if you only want to show something to people who are under
|
||||
18:
|
||||
</p>
|
||||
{{ govukInsetText({
|
||||
{{ usaInsetText({
|
||||
"text": "((under18??Please get your application signed by a parent or
|
||||
guardian.))",
|
||||
"classes": "usa-body"})
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% from "components/components/inset-text/macro.njk" import govukInsetText %}
|
||||
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
|
||||
|
||||
<h2 class="font-body-lg">
|
||||
Personalization
|
||||
@@ -6,7 +6,7 @@
|
||||
<p class="bottom-gutter-1-3">
|
||||
Use double brackets to personalize your message:
|
||||
</p>
|
||||
{{ govukInsetText({
|
||||
{{ usaInsetText({
|
||||
"text": "Hello ((first name)), your reference is ((ref number))",
|
||||
"classes": ""})
|
||||
}}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% from "components/components/inset-text/macro.njk" import govukInsetText %}
|
||||
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
|
||||
|
||||
<h2 class="heading-medium">
|
||||
Send a document by email
|
||||
@@ -6,7 +6,7 @@
|
||||
<p class="usa-body">
|
||||
Use double brackets to add a placeholder field to your template. This will contain a secure link to download the document.
|
||||
</p>
|
||||
{{ govukInsetText({
|
||||
{{ usaInsetText({
|
||||
"text": "Download your document at: ((link_to_file))",
|
||||
"classes": ""})
|
||||
}}
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/table.html" import mapping_table, row, text_field, edit_field, optional_text_field with context %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Callbacks
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Callbacks for delivery receipts
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for(back_link, service_id=current_service.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for(back_link, service_id=current_service.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Callbacks for received text messages
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('.api_callbacks', service_id=current_service.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('.api_callbacks', service_id=current_service.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -5,14 +5,14 @@
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/list-entry.html" import list_entry %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Guest list
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
{% extends "withnav_template.html" %}
|
||||
{% from "components/table.html" import list_table, field, hidden_field_heading %}
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
API keys
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
@@ -57,7 +57,7 @@
|
||||
</div>
|
||||
|
||||
<div class="js-stick-at-bottom-when-scrolling">
|
||||
{{ govukButton({
|
||||
{{ usaButton({
|
||||
"element": "a",
|
||||
"text": "Create an API key",
|
||||
"href": url_for('.create_api_key', service_id=current_service.id),
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/banner.html" import banner_wrapper %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Create an API key
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('main.api_keys', service_id=current_service.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('main.api_keys', service_id=current_service.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
{% from "components/radios.html" import radio_select %}
|
||||
{% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
|
||||
{% from "components/file-upload.html" import file_upload %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Error
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": back_link }) }}
|
||||
{{ usaBackLink({ "href": back_link }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
{% from "components/banner.html" import banner_wrapper %}
|
||||
{% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/skip-link/macro.njk" import govukSkipLink %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
{% from "components/components/skip-link/macro.njk" import usaSkipLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% set file_contents_header_id = 'file-preview' %}
|
||||
|
||||
@@ -14,14 +14,14 @@
|
||||
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": back_link }) }}
|
||||
{{ usaBackLink({ "href": back_link }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
{{ page_header('Preview of {}'.format(template.name)) }}
|
||||
|
||||
{{ govukSkipLink({
|
||||
{{ usaSkipLink({
|
||||
"text": "Skip to file contents",
|
||||
"href": "#" + file_contents_header_id
|
||||
}) }}
|
||||
@@ -44,7 +44,7 @@
|
||||
{% set button_text %}
|
||||
Send {{ count_of_recipients|message_count(template.template_type) }}
|
||||
{% endset %}
|
||||
{{ govukButton({ "text": button_text }) }}
|
||||
{{ usaButton({ "text": button_text }) }}
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
{% from "components/radios.html" import radio_select %}
|
||||
{% from "components/table.html" import mapping_table, row, field, text_field, index_field, hidden_field_heading %}
|
||||
{% from "components/file-upload.html" import file_upload %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Error
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": back_link }) }}
|
||||
{{ usaBackLink({ "href": back_link }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "withoutnav_template.html" %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% macro service_list(
|
||||
heading,
|
||||
@@ -108,7 +108,7 @@
|
||||
</div>
|
||||
<div class="grid-col-9">
|
||||
{% endif %}
|
||||
{{ govukButton({
|
||||
{{ usaButton({
|
||||
"element": "a",
|
||||
"text": "Add a new service",
|
||||
"href": url_for('.add_service'),
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% from "components/ajax-block.html" import ajax_block %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% extends "withnav_template.html" %}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for("main.inbox", service_id=current_service.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for("main.inbox", service_id=current_service.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -122,8 +122,8 @@
|
||||
<div class="cookie-settings__form-wrapper">
|
||||
<form data-module="cookie-settings">
|
||||
<div class="usa-form-group">
|
||||
<fieldset class="govuk-fieldset" aria-describedby="changed-name-hint">
|
||||
<legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
|
||||
<fieldset class="usa-fieldset" aria-describedby="changed-name-hint">
|
||||
<legend class="usa-fieldset__legend usa-fieldset__legend--s">
|
||||
Do you want to accept analytics cookies?
|
||||
</legend>
|
||||
<div class="usa-radios usa-radios--inline">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% extends "withnav_template.html" %}
|
||||
{% from "components/ajax-block.html" import ajax_block %}
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Received text messages
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('main.service_dashboard', service_id=current_service.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('main.service_dashboard', service_id=current_service.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import sticky_page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
{{ heading_action }} email template
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({
|
||||
{{ usaBackLink({
|
||||
"href": url_for('main.view_template', service_id=current_service.id, template_id=template.id) if template else url_for('main.choose_template', service_id=current_service.id, template_folder_id=template_folder_id)
|
||||
}) }}
|
||||
{% endblock %}
|
||||
|
||||
@@ -3,14 +3,15 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
{% from "components/components/alert/macro.njk" import usaAlert %}
|
||||
|
||||
{% block service_page_title %}
|
||||
{{ heading_action }} text message template
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({
|
||||
{{ usaBackLink({
|
||||
"href": url_for('main.choose_template', service_id=current_service.id, template_folder_id=template_folder_id) if template_folder_id else url_for('main.choose_template', service_id=current_service.id)
|
||||
}) }}
|
||||
{% endblock %}
|
||||
@@ -19,13 +20,11 @@
|
||||
|
||||
{{ page_header('{} text message template'.format(heading_action)) }}
|
||||
|
||||
<div class="usa-alert usa-alert--info usa-alert--slim">
|
||||
<div class="usa-alert__body">
|
||||
<p class="usa-alert__text">
|
||||
Don't worry, saving the template will not send
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ usaAlert({
|
||||
"type": "info",
|
||||
"text": "Don't worry, saving the template will not send",
|
||||
"classes": "margin-top-2 usa-button--secondary"
|
||||
}) }}
|
||||
|
||||
{% if current_service.prefix_sms %}
|
||||
{% set content_hint = 'Your service name will be added to the start of your message. You can turn this off in Settings.' %}
|
||||
@@ -35,7 +34,7 @@
|
||||
<div class="grid-row">
|
||||
<div class="grid-col-8">
|
||||
{{ form.name(param_extensions={
|
||||
"classes": "",
|
||||
"extra_form_group_classes": "margin-bottom-2",
|
||||
"hint": {"text": "Your recipients will not see this"}
|
||||
}) }}
|
||||
{{ textbox(
|
||||
@@ -44,6 +43,7 @@
|
||||
width='1-1',
|
||||
hint=content_hint,
|
||||
rows=5,
|
||||
extra_form_group_classes='margin-bottom-1',
|
||||
placeholder='Edit me! Check out the Personalization section below for details on cool ((stuff)) you can do with your messages!'
|
||||
) }}
|
||||
{% if current_user.platform_admin %}
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/banner.html" import banner %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
{{ user.name or user.email_localpart }}
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
{{ '{} email branding'.format('Update' if email_branding else 'Create')}}
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('.email_branding') }) }}
|
||||
{{ usaBackLink({ "href": url_for('.email_branding') }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block platform_admin_content %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% extends "views/platform-admin/_base_template.html" %}
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/live-search.html" import live_search %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% set page_title = "Email branding" %}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="js-stick-at-bottom-when-scrolling">
|
||||
{{ govukButton({
|
||||
{{ usaButton({
|
||||
"element": "a",
|
||||
"text": "New brand",
|
||||
"href": url_for('.create_email_branding'),
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "withoutnav_template.html" %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% block per_page_title %}
|
||||
Resend email link
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<p>Emails sometimes take a few minutes to arrive. If you do not receive an email link, Notify can send you a new one.</p>
|
||||
<p>
|
||||
{{ govukButton({
|
||||
{{ usaButton({
|
||||
"element": "a",
|
||||
"text": "Resend email link",
|
||||
"href": url_for('main.resend_email_link', next=redirect_url)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% extends "views/platform-admin/_base_template.html" %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% block per_page_title %}
|
||||
Find services by name
|
||||
@@ -22,7 +22,7 @@
|
||||
"label": {"text": "Find services by name, partial name, or service ID"}
|
||||
}) }}
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
{{ govukButton({
|
||||
{{ usaButton({
|
||||
"text": "Search",
|
||||
"classes": "usa-button search-form__button"
|
||||
}) }}
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block per_page_title %}
|
||||
Set auth type for {{ user.name }}
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('main.user_information', user_id=user.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('main.user_information', user_id=user.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block platform_admin_content %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% extends "views/platform-admin/_base_template.html" %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% block per_page_title %}
|
||||
Find users by email
|
||||
@@ -22,7 +22,7 @@
|
||||
"label": {"text": "Find users by email, or by partial email"}
|
||||
}) }}
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
{{ govukButton({
|
||||
{{ usaButton({
|
||||
"text": "Search",
|
||||
"classes": "search-form__button"
|
||||
}) }}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% extends "content_template.html" %}
|
||||
{% from "components/table.html" import mapping_table, row, text_field, edit_field, field with context %}
|
||||
{% from "components/sub-navigation.html" import sub_navigation %}
|
||||
{% from "components/components/details/macro.njk" import govukDetails %}
|
||||
{% from "components/components/details/macro.njk" import usaDetails %}
|
||||
|
||||
{% block per_page_title %}
|
||||
Get started
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Invite a team member
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% from "components/ajax-block.html" import ajax_block %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
{{ job.original_file_name }}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% from "components/previous-next-navigation.html" import previous_next_navigation %}
|
||||
{% extends "withnav_template.html" %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Uploads
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% extends "withnav_template.html" %}
|
||||
{% from "components/tick-cross.html" import tick_cross %}
|
||||
{% from "components/live-search.html" import live_search %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Team members
|
||||
@@ -86,7 +86,7 @@
|
||||
|
||||
{% if current_user.has_permissions('manage_service') %}
|
||||
<div class="js-stick-at-bottom-when-scrolling">
|
||||
{{ govukButton({
|
||||
{{ usaButton({
|
||||
"element": "a",
|
||||
"text": "Invite a team member",
|
||||
"href": url_for('.invite_user', service_id=current_service.id),
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block per_page_title %}
|
||||
Confirm change of email address
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('.edit_user_email', service_id=service_id, user_id=user.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('.edit_user_email', service_id=service_id, user_id=user.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block per_page_title %}
|
||||
Confirm change of mobile number
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('.edit_user_mobile_number', service_id=service_id, user_id=user.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('.edit_user_mobile_number', service_id=service_id, user_id=user.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block per_page_title %}
|
||||
Change team member’s email address
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('main.edit_user_permissions', service_id=current_service.id, user_id=user.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('main.edit_user_permissions', service_id=current_service.id, user_id=user.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block per_page_title %}
|
||||
Change team member’s mobile number
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('main.edit_user_permissions', service_id=current_service.id, user_id=user.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('main.edit_user_permissions', service_id=current_service.id, user_id=user.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% set page_title = (
|
||||
(99|message_count_label(message_type, suffix='')) | capitalize
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
{% extends "withnav_template.html" %}
|
||||
{% from "components/banner.html" import banner_wrapper %}
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% block service_page_title %}
|
||||
{{ "Error" if error else "Preview of ‘{}’".format(template.name) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": back_link }) }}
|
||||
{{ usaBackLink({ "href": back_link }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
@@ -55,7 +55,7 @@
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||
{% if not error %}
|
||||
{% set button_text %}Send 1 {{ 1|message_count_label(template.template_type, suffix='') }}{% endset %}
|
||||
{{ govukButton({ "text": button_text }) }}
|
||||
{{ usaButton({ "text": button_text }) }}
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% from "components/ajax-block.html" import ajax_block %}
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
{{ 1|message_count_label(template.template_type, suffix='') | capitalize }}
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
{% block backLink %}
|
||||
{% if back_link %}
|
||||
{{ govukBackLink({ "href": back_link }) }}
|
||||
{{ usaBackLink({ "href": back_link }) }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
{% from "components/radios.html" import radio, conditional_radio_panel %}
|
||||
{% from "components/select-input.html" import select_wrapper %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('main.request_to_go_live', service_id=current_service.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('main.request_to_go_live', service_id=current_service.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
{% from "components/page-footer.html" import sticky_page_footer %}
|
||||
{% from "components/live-search.html" import live_search %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block per_page_title %}
|
||||
{{ page_title }}
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('main.request_to_go_live', service_id=current_service.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('main.request_to_go_live', service_id=current_service.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "views/platform-admin/_base_template.html" %}
|
||||
{% from "components/live-search.html" import live_search %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% block per_page_title %}
|
||||
Organizations
|
||||
@@ -30,7 +30,7 @@
|
||||
</nav>
|
||||
|
||||
<div class="js-stick-at-bottom-when-scrolling">
|
||||
{{ govukButton({
|
||||
{{ usaButton({
|
||||
"element": "a",
|
||||
"text": "New organization",
|
||||
"href": url_for('main.add_organization'),
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/list-entry.html" import list_entry %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block org_page_title %}
|
||||
Known email domains
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/textbox.html" import textbox %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block org_page_title %}
|
||||
Edit request to go live notes
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block org_page_title %}
|
||||
Change organization name
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/textbox.html" import textbox %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block org_page_title %}
|
||||
Edit organization billing details
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/textbox.html" import textbox %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block org_page_title %}
|
||||
Edit organization notes
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block org_page_title %}
|
||||
Organization sector
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "org_template.html" %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
{% from "components/branding-preview.html" import email_branding_preview %}
|
||||
|
||||
{% block org_page_title %}
|
||||
@@ -17,7 +17,7 @@
|
||||
<div class="form-group">
|
||||
{{ form.hidden_tag() }}
|
||||
<div class="page-footer">
|
||||
{{ govukButton({ "text": "Save" }) }}
|
||||
{{ usaButton({ "text": "Save" }) }}
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/live-search.html" import live_search %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% set page_title = "Default email branding" %}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
{% from "components/table.html" import list_table, row, field, hidden_field_heading %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/live-search.html" import live_search %}
|
||||
{% from "components/components/button/macro.njk" import govukButton %}
|
||||
{% from "components/components/button/macro.njk" import usaButton %}
|
||||
|
||||
{% block org_page_title %}
|
||||
Team members
|
||||
@@ -64,7 +64,7 @@
|
||||
</div>
|
||||
|
||||
<div class="js-stick-at-bottom-when-scrolling">
|
||||
{{ govukButton({
|
||||
{{ usaButton({
|
||||
"element": "a",
|
||||
"text": "Invite team member",
|
||||
"href": url_for('.invite_org_user', org_id=current_org.id),
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/page-header.html" import page_header %}
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/components/back-link/macro.njk" import govukBackLink %}
|
||||
{% from "components/components/back-link/macro.njk" import usaBackLink %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Invite a team member
|
||||
{% endblock %}
|
||||
|
||||
{% block backLink %}
|
||||
{{ govukBackLink({ "href": url_for('.manage_org_users', org_id=current_org.id) }) }}
|
||||
{{ usaBackLink({ "href": url_for('.manage_org_users', org_id=current_org.id) }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user