darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-23 07:46:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Convert all links to govuk frontend"

Browse Source
This commit is contained in:
Tom Byers
2020-02-24 11:56:38 +00:00
committed by GitHub
parent ae1b2d4c63
commit 5b306dde4d
163 changed files with 548 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/error_pages/5xx.html
View File

@@ -75,7 +75,7 @@
Try again later.
</p>
<p class="govuk-body">
You can check our <a class="govuk-link govuk-link--no-visited-state" href="https://status.notifications.service.gov.uk/">system status</a> page to see if there are any known issues.<br/>To report a problem, email <a href="mailto:notify-support@digital.cabinet-office.gov.uk">notify-support@digital.cabinet-office.gov.uk</a>
You can check our <a href="https://status.notifications.service.gov.uk/">system status</a> page to see if there are any known issues.<br/>To report a problem, email <a href="mailto:notify-support@digital.cabinet-office.gov.uk">notify-support@digital.cabinet-office.gov.uk</a>
</div>
</div>
</main>

2
app/assets/javascripts/templateFolderForm.js
View File

@@ -114,7 +114,7 @@
this.makeButton = (text, opts) => {
let $btn = $('<a href=""></a>')
.html(text)
.addClass('govuk-link govuk-link--no-visited-state js-cancel')
.addClass('js-cancel')
// isn't set if cancelSelector is undefined
.data('target', opts.cancelSelector || undefined)
.attr('tabindex', '0')

16
app/assets/stylesheets/_grids.scss
View File

@@ -120,3 +120,19 @@
.align-with-big-number-hint {
margin-top: $gutter / 0.6;
}
.global-cookie-message {
p {
@extend %site-width-container;
}
}
.footer-nav {
@include copy-16;
margin-bottom: $gutter-two-thirds;
a {
display: inline-block;
margin-right: $gutter-half;
}
}

6
app/assets/stylesheets/app.scss
View File

@@ -1,4 +1,10 @@
// Extra CSS overlaying elements
a {
&:visited {
color: $link-colour;
}
}
.form-control-1-1 {
width: 100%;
}

29
app/assets/stylesheets/components/banner.scss
View File

@@ -55,6 +55,19 @@
outline: 3px solid $yellow;
}
a {
&:link,
&:visited {
color: $error-colour;
}
&:hover {
color: $mellow-red;
}
}
.list {
margin-bottom: 0;
}
@@ -95,7 +108,7 @@
a {
font-weight: bold;
@include bold-19;
display: block;
padding: 0 ;
margin: 0 0 $gutter 0;
@@ -105,18 +118,18 @@
color: $white;
}
&:focus,
&:hover,
&:active {
color: $govuk-focus-text-colour;
outline: 10px solid $yellow;
}
&:hover {
color: $white;
background-color: $link-hover-colour;
outline: 10px solid $link-hover-colour;
}
&:active,
&:focus {
background-color: $yellow;
outline: 10px solid $yellow;
}
}
.greyed-out-step {

1
app/assets/stylesheets/components/big-number.scss
View File

@@ -130,6 +130,7 @@
&:active,
&:focus {
color: $black;
border-bottom: 1px solid $black;
}
}

17
app/assets/stylesheets/components/browse-list.scss
View File

@@ -17,7 +17,22 @@
}
&-link {
@include govuk-font(24, $weight: bold);
@include bold-24;
&-destructive {
@include bold-24;
color: $error-colour;
&:visited,
&:link {
@include bold-24;
color: $error-colour;
}
&:hover {
color: $mellow-red;
}
}
}
&-hint {

2
app/assets/stylesheets/components/file-upload.scss
View File

@@ -43,7 +43,7 @@
line-height: 35px;
a {
font-weight: bold;
@include bold-19;
}
}

11
app/assets/stylesheets/components/message.scss
View File

@@ -34,8 +34,15 @@
margin-bottom: -$gutter;
padding-bottom: $gutter;
&:hover .message-name-separator:before {
border-color: $link-hover-colour;
&:hover {
color: $link-hover-colour;
.message-name-separator {
&:before {
border-color: $link-hover-colour;
}
}
}
&:focus {

72
app/assets/stylesheets/components/navigation.scss
View File

@@ -1,74 +1,64 @@
.navigation {
@include govuk-font($size: 19);
padding: 0 $gutter 0 0;
$padding-top: 14px;
$padding-bottom: 11px;
&-service-name,
&-organisation-link {
display: inline-block;
overflow: hidden;
// aligning to the baseline with overflow: hidden adds to the parent's height
// aligning to the top doesn't
// see: https://stackoverflow.com/questions/23529369/why-does-x-overflowhidden-cause-extra-space-below#answer-51088033
vertical-align: top;
white-space: nowrap;
text-overflow: ellipsis;
}
&-service-switch,
&-service-back-to,
&-organisation-link {
&:link,
&:visited {
text-decoration: none;
}
&:hover {
text-decoration: underline;
}
}
&-service {
@include govuk-font($size: 19);
border-bottom: 1px solid $border-colour;
margin: 0 0 10px;
position: relative;
font-size: 0;
&-name {
@include bold-19;
padding: $padding-top 0 $padding-bottom 0;
display: inline-block;
max-width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-switch {
@include core-19;
text-decoration: none;
text-align: right;
position: absolute;
top: 0;
right: 0;
padding: $padding-top 0 $padding-bottom $gutter-half;
&:hover {
color: $link-hover-colour;
text-decoration: underline;
}
&:focus {
outline: none;
border-bottom: 1px solid $yellow;
border-left: 10px solid $yellow;
border-right: 3px solid $yellow;
right: -3px;
color: $text-colour;
}
}
&-back-to {
@include core-19;
padding: $padding-top $gutter-half $padding-bottom 0;
display: inline-block;
text-decoration: none;
&:hover {
text-decoration: underline;
color: $link-hover-colour;
}
}
@@ -76,7 +66,14 @@
&-organisation-link {
@include core-19;
display: inline-block;
max-width: 25%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
text-decoration: none;
padding: $padding-top 20px $padding-bottom 0;
margin-right: 7px;
box-sizing: border-box;
@@ -100,8 +97,13 @@
border-color: $secondary-text-colour;
}
// hack to make the focus style fit in the navigation bar
&:hover {
color: $link-hover-colour;
text-decoration: underline;
}
&:focus {
color: $text-colour;
outline: none;
box-shadow: 0 1px 0 0 $focus-colour, -3px 0 0 0 $focus-colour, -3px 1px 0 0 $focus-colour;
}
@@ -109,6 +111,7 @@
}
li {
@include core-19;
margin: 0;
list-style-type: none;
}
@@ -126,9 +129,14 @@
}
&:hover {
color: $link-hover-colour;
text-decoration: underline;
}
&:focus {
color: $text-colour;
}
&.selected {
@include bold-19;
position: relative;

17
app/assets/stylesheets/components/page-footer.scss
View File

@@ -8,9 +8,26 @@
line-height: 40px;
padding: 1px 0 0 15px;
a {
&:visited,
&:link {
color: $error-colour;
display: inline-block;
vertical-align: center;
}
&:hover,
&:active {
color: $mellow-red;
}
}
}
&-delete-link-without-button {
@include core-19;
padding: 0;
display: inline-block;
}

31
app/assets/stylesheets/components/table.scss
View File

@@ -212,6 +212,15 @@
color: $error-colour;
font-weight: bold;
a {
&:link,
&:visited {
color: $error-colour;
}
}
.status-hint {
display: block;
font-weight: normal;
@@ -347,12 +356,22 @@
background: transparent;
}
&:active:before,
&:focus:before {
border-color: $yellow;
border-style: solid;
border-width: 15px 3px 15px 15px;
right: -3px;
&:hover {
color: $link-hover-colour;
}
&:active,
&:focus {
color: $black;
&:before {
border-color: $yellow;
border-style: solid;
border-width: 15px 3px 15px 15px;
right: -3px;
}
}
}

5
app/assets/stylesheets/components/task-list.scss
View File

@@ -31,8 +31,13 @@ $indicator-colour: $black;
padding-right: 20%;
position: relative;
&:hover {
color: $link-hover-colour;
}
&:focus {
outline: none;
color: $black;
box-shadow: -3px 0 0 0 $focus-colour, 3px 0 0 0 $focus-colour;
border-color: transparent;
top: -1px;

22
app/assets/stylesheets/components/tick-cross.scss
View File

@@ -61,12 +61,22 @@
background: transparent;
}
&:active:before,
&:focus:before {
border-color: $yellow;
border-style: solid;
border-width: 15px 3px 15px 15px;
right: -3px;
&:hover {
color: $link-hover-colour;
}
&:active,
&:focus {
color: $black;
&:before {
border-color: $yellow;
border-style: solid;
border-width: 15px 3px 15px 15px;
right: -3px;
}
}
}

4
app/assets/stylesheets/components/vendor/previous-next-navigation.scss vendored
View File

@@ -54,6 +54,10 @@ $is-ie: false !default;
padding: $gutter-half;
text-decoration: none;
&:visited {
color: $link-colour;
}
&:hover,
&:active {
background-color: $canvas-colour;

38
app/assets/stylesheets/globals.scss
View File

@@ -5,16 +5,6 @@
width: device-width;
}
// To be removed when all text uses the GOV.UK Frontend New Transport font styles.
// At present, some text gets these styles due to being in a GOV.UK Frontend component
// or a link.
// This ensures all text will have these styles applied, until it can be moved to use
// the GOV.UK Frontend font styles.
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
b,
strong {
font-weight: 600;
@@ -51,6 +41,34 @@ input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// To be removed when all links follow the GOV.UK Frontend conventions:
// https://design-system.service.gov.uk/styles/typography/#links
a {
/* Give a strong clear visual idea as to what is currently in focus */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
&:link {
color: $link-colour;
}
&:visited {
color: $link-visited-colour;
}
&:hover {
color: $link-hover-colour;
}
&:active {
color: $link-active-colour;
}
&:focus {
background-color: $focus-colour;
outline: 3px solid $focus-colour;
}
}
// Each selector, and then the whole block when only one remains, to be removed when the
// element comes from the corresponding GOV.UK Frontend component:
// - https://design-system.service.gov.uk/components/text-input/

27
app/assets/stylesheets/govuk-frontend/extensions.scss
View File

@@ -8,30 +8,3 @@
}
}
// 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;
}

62
app/assets/stylesheets/local/_typography.scss
View File

@@ -1,62 +0,0 @@
@import 'settings/all';
@import 'helpers/all';
@mixin destructive-link-style-default {
&:link {
color: $govuk-error-colour;
}
&:visited {
color: $govuk-link-visited-colour;
}
&:hover {
color: govuk-tint( $govuk-error-colour, 25% );
}
&:active {
color: $govuk-link-active-colour;
}
// When focussed, the text colour needs to be darker to ensure that colour
// contrast is still acceptable
&:focus {
color: $govuk-focus-text-colour;
}
}
@mixin destructive-link-style-no-visited-state {
&:link {
color: $govuk-error-colour;
}
&:visited {
color: $govuk-error-colour;
}
&:hover {
color: govuk-tint( $govuk-error-colour, 25% );
}
&:active {
color: $govuk-link-active-colour;
}
// When focussed, the text colour needs to be darker to ensure that colour
// contrast is still acceptable
&:focus {
color: $govuk-focus-text-colour;
}
}
// mimics styles for govuk-link:
// https://github.com/alphagov/govuk-frontend/blob/063cd8e2470b62b824c6e50ca66342ac7a95d2d8/package/core/_links.scss#L7
.destructive-link {
@include govuk-link-common;
@include destructive-link-style-default;
@include govuk-link-print-friendly;
}
.destructive-link--no-visited-state {
@include destructive-link-style-no-visited-state;
}

1
app/assets/stylesheets/main.scss
View File

@@ -36,7 +36,6 @@ $path: '/static/images/';
@import './govuk-frontend/all';
// Specific to this application
@import 'local/typography';
@import 'grids';
@import 'components/cookie-message';
@import 'components/site-footer';

8
app/assets/stylesheets/views/notification.scss
View File

@@ -6,14 +6,18 @@
&.error {
color: $govuk-error-colour;
color: $error-colour;
font-weight: bold;
a {
color: $error-colour;
}
}
&-cancelled {
@include bold-19;
color: $govuk-error-colour;
color: $error-colour;
}
}