Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add inverse link mixin and modifier class #2213

Merged
merged 2 commits into from
Apr 30, 2021
Merged

Add inverse link mixin and modifier class #2213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
182e1e8
Add inverse link mixin and modifier class
36degrees Apr 9, 2021
2dbff2b
Add examples of inverse links
36degrees Apr 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions app/views/examples/links/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
'Link': '',
'Link with no visited state': 'govuk-link--no-visited-state',
'Text link': 'govuk-link--text-colour',
'Muted link': 'govuk-link--muted'
'Muted link': 'govuk-link--muted',
'Inverse': 'govuk-link--inverse'
} %}

{% set states = {
Expand Down Expand Up @@ -49,8 +50,8 @@

{% for variant_description, variant_class in variants %}

<section class="govuk-!-margin-top-8">
<h2 class="govuk-heading-l">{{ variant_description }}</h2>
<section class="govuk-!-margin-top-8"{% if variant_class == "govuk-link--inverse"%} style="background: #1d70b8; padding: 15px; margin: -15px;"{% endif %}>
<h2 class="govuk-heading-l"{% if variant_class == "govuk-link--inverse"%} style="color: #fff;"{% endif %}>{{ variant_description }}</h2>

{% for state_description, state_class in states %}
<p class="govuk-body">
Expand Down
4 changes: 4 additions & 0 deletions src/govuk/core/_links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
@include govuk-link-style-text;
}

.govuk-link--inverse {
@include govuk-link-style-inverse;
}

.govuk-link--no-underline {
@include govuk-link-style-no-underline;
}
Expand Down
38 changes: 37 additions & 1 deletion src/govuk/helpers/_links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,6 @@
/// @access public

@mixin govuk-link-style-text {
// Override link colour to use text colour
&:link,
&:visited,
&:hover,
Expand All @@ -236,6 +235,43 @@
}
}

/// Inverse style link mixin
///
/// Overrides the colour of links to work on a dark background.
///
/// If you use this mixin in a component you must also include the
/// govuk-link-common mixin in order to get the focus state.
///
/// @example scss
/// .govuk-component__link {
/// @include govuk-link-common;
/// @include govuk-link-style-inverse;
/// }
///
/// @access public

@mixin govuk-link-style-inverse {
&:link,
&:visited,
&:hover,
&:active {
color: govuk-colour("white");
}

&: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 {
color: $govuk-focus-text-colour;
}
}
}

/// No visited state link mixin
///
/// Used in cases where it is not helpful to distinguish between visited and
Expand Down