mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-13 01:44:08 -04:00
Update links, and things that look like links
Updates, and hacks, based on the changes in: https://github.com/alphagov/govuk-frontend/pull/1309/files
This commit is contained in:
Tom Byers
@@ -12,28 +12,39 @@ $govuk-compatibility-govukelements: true;
|
||||
$govuk-assets-path: "/static/";
|
||||
|
||||
@import "settings/all";
|
||||
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
|
||||
@import "./focus/settings";
|
||||
@import "tools/all";
|
||||
@import "helpers/all";
|
||||
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
|
||||
@import "./focus/helpers";
|
||||
|
||||
@import "core/all";
|
||||
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
|
||||
@import "./focus/core";
|
||||
@import "objects/all";
|
||||
|
||||
// section replacing @import 'components/all', specifying which components to include
|
||||
@import 'components/skip-link/_skip-link';
|
||||
@import 'components/header/_header';
|
||||
@import 'components/footer/_footer';
|
||||
@import 'components/back-link/_back-link';
|
||||
@import 'components/button/_button';
|
||||
@import 'components/details/_details';
|
||||
@import 'components/radios/_radios';
|
||||
@import 'components/checkboxes/_checkboxes';
|
||||
@import 'components/input/_input';
|
||||
// section replacing @import "components/all", specifying which components to include
|
||||
@import "components/skip-link/_skip-link";
|
||||
@import "components/header/_header";
|
||||
@import "components/footer/_footer";
|
||||
@import "components/back-link/_back-link";
|
||||
@import "components/button/_button";
|
||||
@import "components/details/_details";
|
||||
@import "components/radios/_radios";
|
||||
@import "components/checkboxes/_checkboxes";
|
||||
@import "components/input/_input";
|
||||
|
||||
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
|
||||
@import "./focus/components";
|
||||
|
||||
@import "utilities/all";
|
||||
@import "overrides/all";
|
||||
|
||||
// Styles extending those from GOV.UK Frontend
|
||||
@import './extensions';
|
||||
@import "./extensions";
|
||||
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
|
||||
@import "./focus/extensions";
|
||||
|
||||
// Styles for GOV.UK Frontend components specific to this application
|
||||
@import './overrides';
|
||||
@import "./overrides";
|
||||
|
||||
56
app/assets/stylesheets/govuk-frontend/focus/components.scss
Normal file
56
app/assets/stylesheets/govuk-frontend/focus/components.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
|
||||
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
|
||||
//
|
||||
// See the following for details of the update:
|
||||
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
|
||||
// - https://design-system.service.gov.uk/get-started/focus-states/
|
||||
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
|
||||
//
|
||||
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
|
||||
|
||||
// Updates to skip-link component
|
||||
.govuk-skip-link {
|
||||
@include govuk-typography-common;
|
||||
@include govuk-focusable-fill;
|
||||
}
|
||||
|
||||
// Updates to header component
|
||||
.govuk-header__link {
|
||||
@include govuk-focusable-text-link;
|
||||
}
|
||||
|
||||
.govuk-header__link--homepage {
|
||||
// Remove any borders that show when focused and hovered.
|
||||
&:focus {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Updates to back-link component
|
||||
.govuk-back-link {
|
||||
@include govuk-focusable-text-link;
|
||||
|
||||
// When the back link is focused, hide the bottom link border as the
|
||||
// focus styles has a bottom border.
|
||||
&:focus {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Updates to details component
|
||||
.govuk-details__summary {
|
||||
&:hover {
|
||||
color: $govuk-link-hover-colour;
|
||||
}
|
||||
|
||||
@include govuk-focusable-text-link;
|
||||
}
|
||||
|
||||
// Remove the underline when focussed to avoid duplicate borders
|
||||
.govuk-details__summary:focus .govuk-details__summary-text {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.govuk-details__summary:before {
|
||||
top: 0;
|
||||
}
|
||||
39
app/assets/stylesheets/govuk-frontend/focus/helpers.scss
Normal file
39
app/assets/stylesheets/govuk-frontend/focus/helpers.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
|
||||
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
|
||||
//
|
||||
// See the following for details of the update:
|
||||
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
|
||||
// - https://design-system.service.gov.uk/get-started/focus-states/
|
||||
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
|
||||
//
|
||||
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
|
||||
|
||||
/// Focusable with box-shadow
|
||||
///
|
||||
/// Removes the visible outline and replace with box-shadow and background colour.
|
||||
/// Used for interactive text-based elements.
|
||||
|
||||
@mixin govuk-focusable-text-link {
|
||||
&:focus {
|
||||
// When colours are overridden, for example when users have a dark mode,
|
||||
// backgrounds and box-shadows disappear, so we need to ensure there's a
|
||||
// transparent outline which will be set to a visible colour.
|
||||
|
||||
// Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
|
||||
@include govuk-not-ie8 {
|
||||
outline: $govuk-focus-width solid transparent;
|
||||
outline-offset: 0;
|
||||
}
|
||||
color: $govuk-text-colour;
|
||||
background-color: $govuk-focus-colour;
|
||||
// sass-lint:disable indentation
|
||||
box-shadow: -5px -1px 0 1px $govuk-focus-colour,
|
||||
5px -1px 0 1px $govuk-focus-colour,
|
||||
-3px 1px 0 3px $govuk-text-colour,
|
||||
3px 1px 0 3px $govuk-text-colour;
|
||||
// sass-lint:enable indentation
|
||||
// When link is focussed, hide the default underline since the
|
||||
// box shadow adds the "underline"
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
11
app/assets/stylesheets/govuk-frontend/focus/settings.scss
Normal file
11
app/assets/stylesheets/govuk-frontend/focus/settings.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
|
||||
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
|
||||
//
|
||||
// See the following for details of the update:
|
||||
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
|
||||
// - https://design-system.service.gov.uk/get-started/focus-states/
|
||||
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
|
||||
//
|
||||
// The new 'yellow' colour was added in https://github.com/alphagov/govuk-frontend/pull/1288
|
||||
|
||||
$govuk-focus-colour: #ffdd00; // assign new 'yellow' colour directly to limit impact of change
|
||||
Reference in New Issue
Block a user