summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-01-12 10:31:29 +0100
committerVolpeon <git@volpeon.ink>2024-01-12 10:31:29 +0100
commitc10511e0e6c44f75b476fb30901a30c4ba97cc2c (patch)
treefe10a325c5fcd5430384a0c3a7d5dfd62c613e3f /src/scopes
parentIcon valign (diff)
downloadiro-design-c10511e0e6c44f75b476fb30901a30c4ba97cc2c.tar.gz
iro-design-c10511e0e6c44f75b476fb30901a30c4ba97cc2c.tar.bz2
iro-design-c10511e0e6c44f75b476fb30901a30c4ba97cc2c.zip
GitHub-style semitransparent link underline
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_links.scss23
1 files changed, 17 insertions, 6 deletions
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 4d9e571..e946d33 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -4,8 +4,11 @@
4@include iro.props-namespace('links') { 4@include iro.props-namespace('links') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --colors: ( 6 --colors: (
7 --idle: fn.global-color(--accent --link-idle --quiet --fg), 7 --underline: fn.global-color(--fg-hi2),
8 --visited: fn.global-color(--accent --link-visited --quiet --fg), 8
9 --idle: fn.global-color(--accent --link-idle --quiet --fg),
10 --visited: fn.global-color(--accent --link-visited --quiet --fg),
11 --colored-underline: fn.global-color(--accent --link-idle --quiet --fg-hi),
9 12
10 --key-focus: ( 13 --key-focus: (
11 --border: fn.global-color(--focus --fill), 14 --border: fn.global-color(--focus --fill),
@@ -14,12 +17,19 @@
14 ) 17 )
15 ), 'colors'); 18 ), 'colors');
16 19
20 @include iro.props-store((
21 --colors: (
22 --underline: fn.global-color(--fg-hi),
23 )
24 ), 'colors-dark');
25
17 @include iro.bem-scope(iro.props-namespace()) { 26 @include iro.bem-scope(iro.props-namespace()) {
18 :link, 27 :link,
19 :visited { 28 :visited {
20 border-radius: .5px; 29 border-radius: .5px;
21 color: currentColor; 30 color: currentColor;
22 text-decoration: underline; 31 text-decoration: underline;
32 text-decoration-color: fn.color(--underline);
23 33
24 &:hover { 34 &:hover {
25 text-decoration: underline; 35 text-decoration: underline;
@@ -41,7 +51,8 @@
41 51
42 @include iro.bem-modifier('colored') { 52 @include iro.bem-modifier('colored') {
43 :link { 53 :link {
44 color: fn.color(--idle); 54 color: fn.color(--idle);
55 text-decoration-color: fn.color(--colored-underline);
45 } 56 }
46 57
47 :visited { 58 :visited {