diff --git a/docs/elements/anchor/index.scss b/docs/elements/anchor/index.scss index 44938ca..7590a6e 100644 --- a/docs/elements/anchor/index.scss +++ b/docs/elements/anchor/index.scss @@ -12,4 +12,12 @@ $name: 'anchor'; @include docs.demo($name, 'default') { @include anchor.styles; -}; +} + +@include docs.demo($name, 'no-visited-styles') { + @include anchor.styles( + ( + emit-visited: false, + ) + ); +} diff --git a/docs/elements/anchor/index.ts b/docs/elements/anchor/index.ts index d30f8ea..4496962 100644 --- a/docs/elements/anchor/index.ts +++ b/docs/elements/anchor/index.ts @@ -28,15 +28,24 @@ export const meta = { type: 'selector', default: 'a', }, + { + key: 'emit-visited', + type: 'boolean', + default: 'true', + }, ], } as const satisfies Meta; const html = /* html */` IBM.com +
+Visited link

IBM.com ${launchIcon} +
+Visited link${launchIcon} `; export const demos: Demo[] = [ @@ -47,4 +56,14 @@ export const demos: Demo[] = [ raw: html, }, }, + { + id: 'no-visited-styles', + name: 'No visited styles', + html: { + raw: html, + }, + config: { + 'emit-visited': 'false', + }, + }, ]; diff --git a/scss/elements/anchor/index.scss b/scss/elements/anchor/index.scss index c2e7f94..55e499d 100644 --- a/scss/elements/anchor/index.scss +++ b/scss/elements/anchor/index.scss @@ -17,13 +17,16 @@ $config: () !default; $-default-config: ( selector: 'a', + emit-visited: true, ); /// @group anchor /// @param {Map} config [()] /// @param {Selector} config.selector ['a'] +/// @param {Bool} config.emit-visited [true] - Enable visited link styles using theme.$link-visited @mixin styles($config: $config) { $props: map.deep-merge($-default-config, $config); + $emit-visited: map.get($props, 'emit-visited') == true; #{map.get($props, 'selector')} { display: inline-flex; @@ -31,12 +34,24 @@ $-default-config: ( column-gap: spacing.$spacing-03; color: theme.$link-primary; text-decoration: underline; - transition: color layout.$mode--transition-duration layout.$mode--transition-timing-function; + transition: if( + sass($emit-visited): none; else: color layout.$mode--transition-duration + layout.$mode--transition-timing-function + ); &:hover { color: theme.$link-primary-hover; } + @if $emit-visited { + &:visited { + color: theme.$link-visited; + } + &:visited svg { + fill: theme.$link-visited; + } + } + &:focus { @include focus-outline.focus-outline('outline'); }