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

Remove external link styles #293

Merged
merged 1 commit into from
Oct 25, 2016
Merged

Remove external link styles #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
55 changes: 0 additions & 55 deletions docs/mixins.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,61 +378,6 @@ Tabular numbers have numerals of a standard fixed width. As all numbers have the

[See an example of tabular numbers in a table](http://govuk-elements.herokuapp.com/data/#data-table-numeric)

#### external links

`external-link-default` sets up the background image for all external links.
This should be included on the default link style for a project.

After setting the default, apply includes from the following for different font sizes:

* `external-link-12`
* `external-link-12-no-hover`
* `external-link-13`
* `external-link-13-no-hover`
* `external-link-14`
* `external-link-14-bold-no-hover`
* `external-link-16`
* `external-link-16-bold-no-hover`
* `external-link-19`
* `external-link-19-no-hover`

`external-link-heading` is a unique style a background image for headings to groups of external links.

This uses the `file-url` helper which will by default output an `image-url` to
be used with Compass or Rails Asset Pipeline, if you want to use a static path
then set the `$path` variable to point to the public location of the toolkit
image assets.

#### Description

For a set style:

`@include external-link-[style]`

For a specific font size:

`@include external-link-[size]-[weight]-[no-hover]`

#### Usage

/* Default link style */
a[rel="external"] {
@include external-link-default;
@include external-link-19;
}

th.external-link {
@include external-link-heading;
}

.inner a[rel="external"] {
@include external-link-16;
}

.departments a[rel="external"] {
@include external-link-16-bold-no-hover;
}

### <a id="css3"></a>css3

CSS3 helpers to abstract vendor prefixes.
Expand Down
Binary file removed images/external-links/external-link-24x24.png
View file
Open in desktop
Binary file not shown.
Binary file removed images/external-links/external-link-black-12x12.png
View file
Open in desktop
Binary file not shown.
Binary file removed images/external-links/external-link-black-24x24.png
View file
Open in desktop
Binary file not shown.
Binary file removed images/external-links/external-link.png
View file
Open in desktop
Binary file not shown.
87 changes: 0 additions & 87 deletions stylesheets/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,90 +245,3 @@ $is-print: false !default;
padding-bottom: 5px;
}
}

// External link styles for all font sizes

// Private mixin for use solely by those below

@mixin external-link-size($content, $top, $top-hover: top) {
&:after {
content: $content;
background-position: right $top;
}

@if $top-hover == top {
$top-hover: $top;
}

&:hover:after {
background-position: right $top-hover;
}
}

@mixin external-link-12-no-hover {
@include external-link-size($content: "\A0\A0\A0\A0\A0\A0\A0\A0", $top: 0);
}

@mixin external-link-12 {
@include external-link-size($content: "\A0\A0\A0\A0\A0\A0\A0\A0", $top: 0, $top-hover: -388px);
}

@mixin external-link-13-no-hover {
@include external-link-size($content: "\A0\A0\A0\A0\A0", $top: 1px);
}

@mixin external-link-13 {
@include external-link-size($content: "\A0\A0\A0\A0\A0", $top: 1px, $top-hover: -387px);
}

@mixin external-link-14 {
@include external-link-size($content: "\A0\A0\A0\A0\A0", $top: 1px, $top-hover: -387px);
}

@mixin external-link-14-bold-no-hover {
@include external-link-size($content: "\A0\A0\A0\A0\A0\A0", $top: 2px);
}

@mixin external-link-16 {
@include external-link-size($content: "\A0\A0\A0\A0\A0", $top: 3px, $top-hover: -385px);
}

@mixin external-link-16-bold-no-hover {
@include external-link-size($content: "\A0\A0\A0\A0\A0\A0", $top: 3px);
}

@mixin external-link-19-no-hover {
@include external-link-size($content: "\A0\A0\A0\A0", $top: 6px);
}

@mixin external-link-19 {
@include external-link-size($content: "\A0\A0\A0\A0", $top: 6px, $top-hover: -382px);
}

@mixin external-link-19-bold-no-hover {
@include external-link-size($content: "\A0\A0\A0\A0\A0\A0", $top: 6px);
}

@mixin external-link-default {
&:after {
background-image: file-url("external-links/external-link.png");
background-repeat: no-repeat;

@include device-pixel-ratio() {
background-image: file-url("external-links/external-link-24x24.png");
background-size: 12px 400px;
}
}
}

@mixin external-link-heading {
&:after {
background-image: file-url("external-links/external-link-black-12x12.png");
background-repeat: no-repeat;

@include device-pixel-ratio() {
background-image: file-url("external-links/external-link-black-24x24.png");
background-size: 12px 400px;
}
}
}
8 changes: 0 additions & 8 deletions stylesheets/design-patterns/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,14 +126,6 @@
}
}

// Reset styles applied to external links
&[rel="external"]:after {
display: none;
content: none;
margin-left: 0;
margin-right: 0;
}

// Fixes a bug where IE puts a black border around certain elements
@include ie-lte(8) {
&[type="submit"],
Expand Down