mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-04 13:41:38 -04:00
ad3b391e46
ListEntry component uses FieldList field to group textboxes. Textboxes can be text inputs, email fields or international phone number fields. This converts all field-lists to use: - GovukTextInputField - GovukEmailField - InternationalPhoneNumber Affects these forms: - OrganisationDomainsForm - GuestList Also changes to related Javascript: Update list-entry JS tests to match new HTML Updates the HTML the JS operates on in the test (a fixture representing the HTML in the page on load) to match the new GOVUK Frontend we are generating. Make list-entry JS work with GOVUK Frontend HTML The existing list-entry JS did a few things that clashed with how the new HTML works: - added a 'input-' prefix to the id attributes of all text-inputs - did not make its name and id attributes values match The new HTML has id and name attributes that match so these changes remove the prefix for id attributes and makes them match the name attribute. To understand these changes, it is useful to know how the values for id and name attributes are generated: 1. the id attribute for the component element is stored 2. the 'list-entry-' prefix is removed and the remainder is used to generate ids For example, if the component's id is 'list-entry-domains', the id will be 'domains-1', where the text-input is the first one. This also adds some logic to the HoganJS template to make the value attribute optional, so it is only added if it has a non-null value. This matches the behaviour of the text-input component used in the new list-entry component. Also change whitelist references to guestlist in tests - we forgot to do it earlier, when we moved from calling this feature whitelist to calling it guestlist.
84 lines
1.9 KiB
SCSS
84 lines
1.9 KiB
SCSS
// Extends footer column styles to allow 4 columns
|
|
@include mq ($from: desktop) {
|
|
.govuk-footer__list--columns-4 {
|
|
// TODO: Move support for legacy properties to something like Post-CSS's auto-prefixer
|
|
-webkit-column-count: 4;
|
|
-moz-column-count: 4;
|
|
column-count: 4;
|
|
}
|
|
}
|
|
|
|
// Extends govuk-link to create a class of link that causes a destructive action
|
|
// Based on styles of link in:
|
|
// https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/helpers/_links.scss
|
|
//
|
|
// Note: all destructive actions must have a confirmation step these links navigate to
|
|
@mixin govuk-link-style-destructive-no-visited-state {
|
|
&:link,
|
|
&:visited {
|
|
color: $govuk-error-colour;
|
|
}
|
|
|
|
&:hover {
|
|
color: govuk-tint($govuk-error-colour, 25%);
|
|
}
|
|
|
|
// When focussed, the text colour needs to be darker to ensure that colour
|
|
// contrast is still acceptable against the focus colour
|
|
// Activated links are usually focused so this applies to them as well
|
|
&:active,
|
|
&:focus {
|
|
color: $govuk-focus-text-colour;
|
|
}
|
|
}
|
|
|
|
.govuk-link--destructive {
|
|
@include govuk-link-style-destructive-no-visited-state;
|
|
}
|
|
$govuk-grid-widths: (
|
|
one-eighth: 12.5%,
|
|
one-sixth: 16.6666%,
|
|
one-quarter: 25%,
|
|
one-third: 33.3333%,
|
|
one-half: 50%,
|
|
five-eighths: 62.5%,
|
|
two-thirds: 66.6666%,
|
|
three-quarters: 75%,
|
|
five-sixths: 83.3333%,
|
|
seven-eighths: 87.5%,
|
|
full: 100%
|
|
);
|
|
|
|
.govuk-input--width-6 {
|
|
max-width: 14ex;
|
|
}
|
|
|
|
// extensions to govuk-input to allow numbering by label
|
|
.govuk-input--numbered {
|
|
padding-left: 1.84em;
|
|
|
|
@include media(desktop) {
|
|
@include inline-block;
|
|
}
|
|
}
|
|
|
|
.govuk-input--numbered__label {
|
|
float: left;
|
|
width: 1.6em;
|
|
margin: 8px -1.6em 0 0;
|
|
position: relative;
|
|
left: 10px;
|
|
color: $govuk-secondary-text-colour;
|
|
font-weight: bold;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.govuk-input--numbered__label--error {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
|
|
@include govuk-media-query(desktop) {
|
|
bottom: 7px;
|
|
}
|
|
}
|