diff --git a/docs/mixins.md b/docs/mixins.md index 2f249069..65a4d082 100644 --- a/docs/mixins.md +++ b/docs/mixins.md @@ -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; - } - ### css3 CSS3 helpers to abstract vendor prefixes. diff --git a/images/external-links/external-link-24x24.png b/images/external-links/external-link-24x24.png deleted file mode 100644 index e1228f88..00000000 Binary files a/images/external-links/external-link-24x24.png and /dev/null differ diff --git a/images/external-links/external-link-black-12x12.png b/images/external-links/external-link-black-12x12.png deleted file mode 100644 index f5049298..00000000 Binary files a/images/external-links/external-link-black-12x12.png and /dev/null differ diff --git a/images/external-links/external-link-black-24x24.png b/images/external-links/external-link-black-24x24.png deleted file mode 100644 index a829f4dc..00000000 Binary files a/images/external-links/external-link-black-24x24.png and /dev/null differ diff --git a/images/external-links/external-link.png b/images/external-links/external-link.png deleted file mode 100644 index 9a146b14..00000000 Binary files a/images/external-links/external-link.png and /dev/null differ diff --git a/stylesheets/_typography.scss b/stylesheets/_typography.scss index e52c2f42..1cc8b4af 100644 --- a/stylesheets/_typography.scss +++ b/stylesheets/_typography.scss @@ -247,90 +247,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; - } - } -} diff --git a/stylesheets/design-patterns/_buttons.scss b/stylesheets/design-patterns/_buttons.scss index c2fb4447..4b6b18c3 100644 --- a/stylesheets/design-patterns/_buttons.scss +++ b/stylesheets/design-patterns/_buttons.scss @@ -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"],