Skip to content

Commit bc83eb4

Browse files
louismaximepitonnilloq
louismaximepiton
authored and
nilloq
committed
Proposal
1 parent 927ca25 commit bc83eb4

File tree

5 files changed

+138
-134
lines changed

5 files changed

+138
-134
lines changed

‎scss/_links.scss‎

Lines changed: 85 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -4,148 +4,117 @@
44

55
%chevron-properties {
66
display: inline-block;
7-
width: $ouds-link-size-icon-medium;
8-
min-width: $ouds-link-size-icon-medium;
9-
height: $ouds-link-size-icon-medium;
7+
width: var(--#{$prefix}link-icon-size);
8+
min-width: var(--#{$prefix}link-icon-size);
9+
height: var(--#{$prefix}link-icon-size);
1010
vertical-align: middle;
1111
content: "";
12-
background-color: $ouds-link-color-arrow-enabled;
12+
background-color: var(--#{$prefix}link-arrow-color);
1313
mask: var(--#{$prefix}chevron-icon) center no-repeat;
14-
mask-size: $ouds-link-size-icon-medium;
14+
mask-size: var(--#{$prefix}link-icon-size);
1515
}
1616

17-
.link,
18-
.link-chevron,
19-
.icon-link {
20-
// scss-docs-start link-css-vars
21-
--#{$prefix}link-color-rgb: #{$ouds-link-color-content-enabled};
22-
// scss-docs-end link-css-vars
17+
.link {
18+
--#{$prefix}link-icon-size: #{$ouds-link-size-icon-medium};
19+
--#{$prefix}link-icon-gap: #{$ouds-link-space-column-gap-icon-medium};
2320

21+
@extend a;
2422
@include get-font-size("label-large");
25-
display: inline-block;
23+
display: inline-flex;
24+
align-items: center;
2625
min-width: $ouds-link-size-min-width-medium;
2726
min-height: $ouds-link-size-min-height-medium;
2827
padding: $ouds-link-space-padding-block $ouds-link-space-padding-inline;
29-
font-weight: $link-font-weight;
30-
color: var(--#{$prefix}link-color-rgb);
31-
text-decoration: $link-decoration;// OUDS mod
28+
text-align: start;
3229
text-wrap: pretty;
33-
34-
&:hover {
35-
--#{$prefix}link-color-rgb: #{$ouds-link-color-content-hover};
36-
37-
text-decoration: $link-hover-decoration;
30+
background: transparent;
31+
border: 0;
32+
33+
svg,
34+
img,
35+
.icon {
36+
width: 1em;
37+
height: 1em;
38+
margin-right: var(--#{$prefix}link-icon-gap);
39+
overflow: hidden;
40+
font-size: var(--#{$prefix}link-icon-size);
41+
line-height: 1;
3842
}
43+
}
44+
45+
.link-chevron {
46+
--#{$prefix}link-arrow-gap: #{$ouds-link-space-column-gap-arrow-medium};
47+
--#{$prefix}link-arrow-color: #{$ouds-link-color-arrow-enabled};
48+
--#{$prefix}link-arrow-hover-color: #{$ouds-link-color-arrow-hover};
49+
--#{$prefix}link-arrow-focus-color: #{$ouds-link-color-arrow-focus};
50+
--#{$prefix}link-arrow-pressed-color: #{$ouds-link-color-arrow-pressed};
51+
--#{$prefix}link-arrow-disabled-color: #{$ouds-color-action-disabled};
3952

40-
&:focus-visible,
41-
&:focus[data-focus-visible-added] {
42-
--#{$prefix}link-color-rgb: #{$ouds-link-color-content-focus};
53+
@extend .link;
54+
text-decoration: none;
4355

44-
text-decoration: $link-hover-decoration;
56+
&:hover::before,
57+
&:hover::after {
58+
background-color: var(--#{$prefix}link-arrow-hover-color);
4559
}
4660

47-
&:active {
48-
--#{$prefix}link-color-rgb: #{$ouds-link-color-content-pressed};
61+
&:focus-visible::before,
62+
&:focus[data-focus-visible]::before,
63+
&:focus-visible::after,
64+
&:focus[data-focus-visible]::after {
65+
background-color: var(--#{$prefix}link-arrow-focus-color);
4966
}
5067

51-
&.link-sm{
52-
@include get-font-size("label-medium");
53-
min-width: $ouds-link-size-min-width-small;
54-
min-height: $ouds-link-size-min-height-small;
68+
&:active::before,
69+
&:active::after {
70+
background-color: var(--#{$prefix}link-arrow-pressed-color);
5571
}
5672

57-
// OUDS Chevron links
58-
59-
&.link-chevron {
60-
61-
&:not(:hover):not(:active):not(:focus) {
62-
text-decoration: none;
63-
}
64-
65-
// Chevron right is the default position if no class '.back' is added
66-
&:not(.back)::after {
67-
@extend %chevron-properties;
68-
margin-left: $ouds-link-space-column-gap-arrow-medium;
69-
transform: $ouds-link-chevron-after-transform;
70-
}
71-
72-
// Chevron small size
73-
&.link-sm::after,
74-
&.link-sm::before {
75-
width: $ouds-link-size-icon-small;
76-
min-width: $ouds-link-size-icon-small;
77-
mask-size: $ouds-link-size-icon-small;
78-
}
79-
80-
// Chevron right margin for small size
81-
&.link-sm::after {
82-
margin-left: $ouds-link-space-column-gap-arrow-small;
83-
}
84-
85-
// Chevron is set on left side when class '.back' is added
86-
87-
// Left chevron is aligned with the center of the text link on multiple lines
88-
&.back {
89-
display: inline-flex;
90-
align-items: center;
91-
}
92-
93-
&.back::before {
94-
@extend %chevron-properties;
95-
margin-right: $ouds-link-space-column-gap-arrow-medium;
96-
}
97-
98-
// Chevron left margin for small size
99-
&.link-sm::before {
100-
margin-right: $ouds-link-space-column-gap-arrow-small;
101-
}
102-
103-
// When link is disabled, chevron is styled accordingly
104-
&[aria-disabled="true"] {
105-
&::after,
106-
&::before {
107-
background-color: var(--#{$prefix}color-action-disabled);
108-
}
109-
}
73+
&[aria-disabled="true"]::before,
74+
&[aria-disabled="true"]::after {
75+
background-color: var(--#{$prefix}link-arrow-disabled-color);
11076
}
11177

112-
// OUDS Icon links
113-
114-
&.icon-link {
115-
display: inline-flex;
116-
gap: $ouds-link-space-column-gap-icon-medium;
117-
align-items: center;
118-
backface-visibility: hidden;
119-
120-
> .bi {
121-
flex-shrink: 0;
122-
width: $ouds-link-size-icon-medium;
123-
height: $ouds-link-size-icon-medium;
124-
fill: currentcolor;
125-
@include transition($icon-link-icon-transition);
126-
}
127-
128-
&.link-sm {
129-
gap: $ouds-link-space-column-gap-icon-small;
130-
131-
> .bi {
132-
width: $ouds-link-size-icon-small;
133-
height: $ouds-link-size-icon-small;
134-
}
135-
}
78+
&.back::before,
79+
&:not(.back)::after {
80+
@extend %chevron-properties;
81+
margin-right: var(--#{$prefix}link-arrow-gap);
82+
transform: translateY(-1px); // TODO: RTL
13683
}
13784

138-
&.icon-link-hover {
139-
&:hover,
140-
&:focus-visible {
141-
> .bi {
142-
transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
143-
}
144-
}
85+
&:not(.back)::after {
86+
margin-right: 0;
87+
margin-left: var(--#{$prefix}link-arrow-gap);
88+
transform: rotate(180deg) translateY(1px); // TODO: RTL
14589
}
14690
}
14791

148-
.visited-links a:not(.icon-link):not(.link-chevron):visited {
149-
color: var(--#{$prefix}color-action-visited);
92+
.link-on-colored-bg {
93+
--#{$prefix}link-color: #{$ouds-link-color-content-enabled-mono};
94+
--#{$prefix}link-hover-color: #{$ouds-link-color-content-hover-mono};
95+
--#{$prefix}link-focus-color: #{$ouds-link-color-content-focus-mono};
96+
--#{$prefix}link-active-color: #{$ouds-link-color-content-pressed-mono};
97+
--#{$prefix}link-disabled-color: #{$ouds-link-color-content-disabled-mono};
98+
--#{$prefix}link-visited-color: #{$ouds-link-color-content-enabled-mono};
99+
--#{$prefix}link-arrow-color: #{$ouds-link-color-content-enabled-mono};
100+
--#{$prefix}link-arrow-hover-color: #{$ouds-link-color-content-hover-mono};
101+
--#{$prefix}link-arrow-focus-color: #{$ouds-link-color-content-focus-mono};
102+
--#{$prefix}link-arrow-pressed-color: #{$ouds-link-color-content-pressed-mono};
103+
--#{$prefix}link-arrow-disabled-color: #{$ouds-link-color-content-disabled-mono};
150104
}
151105

106+
.link-sm {
107+
--#{$prefix}link-icon-size: #{$ouds-link-size-icon-small};
108+
--#{$prefix}link-icon-gap: #{$ouds-link-space-column-gap-icon-small};
109+
--#{$prefix}link-arrow-gap: #{$ouds-link-space-column-gap-arrow-small};
110+
111+
@include get-font-size("label-medium");
112+
min-width: $ouds-link-size-min-width-small;
113+
min-height: $ouds-link-size-min-height-small;
114+
}
115+
116+
@if $enable-bootstrap-compatibility {
117+
.icon-link {
118+
@extend .link;
119+
}
120+
}

‎scss/_reboot.scss‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -350,34 +350,42 @@ sup { top: -.5em; }
350350
// Links
351351

352352
a {
353-
--#{$prefix}link-color-rgb: #{$ouds-link-color-content-enabled}; // OUDS mod
353+
--#{$prefix}link-color: #{$ouds-link-color-content-enabled};
354+
--#{$prefix}link-hover-color: #{$ouds-link-color-content-hover};
355+
--#{$prefix}link-focus-color: #{$ouds-link-color-content-focus};
356+
--#{$prefix}link-active-color: #{$ouds-link-color-content-pressed};
357+
--#{$prefix}link-disabled-color: #{$ouds-color-action-disabled};
358+
--#{$prefix}link-visited-color: #{$ouds-color-action-visited};
354359

355360
font-weight: $link-font-weight;
356-
color: var(--#{$prefix}link-color-rgb);
361+
color: var(--#{$prefix}link-color);
357362
text-decoration: $link-decoration;
358363

359-
&:hover {
360-
--#{$prefix}link-color-rgb: #{$ouds-link-color-content-hover};
364+
.visited-links &,
365+
&.visited-links {
366+
color: var(--#{$prefix}link-visited-color);
367+
}
361368

369+
&:hover {
370+
color: var(--#{$prefix}link-hover-color);
362371
text-decoration: $link-hover-decoration;
363372
}
364373

365374
&:focus-visible,
366375
&:focus[data-focus-visible-added] {
367-
--#{$prefix}link-color-rgb: #{$ouds-link-color-content-focus};
368-
376+
color: var(--#{$prefix}link-focus-color);
369377
text-decoration: $link-hover-decoration;
370378
}
371379

372380
&:active {
373-
--#{$prefix}link-color-rgb: #{$ouds-link-color-content-pressed};
381+
color: var(--#{$prefix}link-active-color);
382+
text-decoration: $link-hover-decoration;
374383
}
375-
}
376384

377-
// OUDS mod: disabled links
378-
a[aria-disabled="true"] {
379-
color: var(--#{$prefix}color-action-disabled);
380-
pointer-events: none;
385+
&[aria-disabled="true"] {
386+
color: var(--#{$prefix}link-disabled-color);
387+
pointer-events: none;
388+
}
381389
}
382390

383391
// And undo these styles for placeholder links/named anchors (without href).

‎scss/_variables.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -492,22 +492,22 @@ $link-decoration: underline !default;
492492
$link-font-weight: $ouds-font-weight-strong !default;
493493
$link-shade-percentage: 20% !default;
494494
$link-hover-color: $primary !default; // OUDS mod
495-
$link-hover-decoration: null !default;
495+
$link-hover-decoration: $link-decoration !default;
496496

497497
$stretched-link-pseudo-element: after !default;
498498
$stretched-link-z-index: 1 !default;
499499

500500
// OUDS mod
501-
$ouds-link-chevron-after-transform: rotate(.5turn) translateY(1px) !default;
501+
// $ouds-link-chevron-after-transform: rotate(.5turn) translateY(1px) !default;
502502
// End mod
503503

504504
// Icon links
505505
// $icon-link-gap: .3125rem !default; // OUDS mod: instead of `.375rem`
506506
// $icon-link-underline-offset: .25em !default;
507507
// $icon-link-icon-size: 1em !default;
508508
// scss-docs-start icon-link-variables
509-
$icon-link-icon-transition: .2s ease-in-out transform !default;
510-
$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
509+
// $icon-link-icon-transition: .2s ease-in-out transform !default;
510+
// $icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
511511
// scss-docs-end icon-link-variables
512512

513513

‎site/content/docs/0.1/components/links.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,27 @@ Visited links don't have a specific style by default. The `:visited` status can
2222
</div>
2323
{{< /example >}}
2424

25+
{{< example class="p-none">}}
26+
<div class="bg-brand-primary p-tall">
27+
<div data-bs-theme="light">
28+
<div><a class="link link-on-colored-bg" href="#">This is an example of a base link</a></div>
29+
<div><a class="link link-on-colored-bg link-sm" href="#">This is an example of a small base link</a></div>
30+
<div class="visited-links">
31+
<a class="link link-on-colored-bg" href=".">This is an example of a visited link</a>
32+
</div>
33+
</div>
34+
</div>
35+
<div class="bg-status-negative-emphasized p-tall">
36+
<div data-bs-theme="root-inverted">
37+
<div><a class="link link-on-colored-bg" href="#">This is an example of a base link</a></div>
38+
<div><a class="link link-on-colored-bg link-sm" href="#">This is an example of a small base link</a></div>
39+
<div class="visited-links">
40+
<a class="link link-on-colored-bg" href=".">This is an example of a visited link</a>
41+
</div>
42+
</div>
43+
</div>
44+
{{< /example >}}
45+
2546
The `.link` class is intended to be used in conjunction with our link variants used to display chevron or icon, or to serve as a basis for your own custom styles.
2647

2748
## Link chevron

‎site/content/docs/0.1/content/reboot.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,17 +125,23 @@ Links have a default `color` and underline applied. While links change on `:hove
125125
Links have a disabled style when using an `aria-disabled="true"` attribute.
126126

127127
{{< example >}}
128-
<a href="#" aria-disabled="true">This is an example of a disabled link</a>
128+
<a aria-disabled="true">This is an example of a disabled link</a>
129129
{{< /example >}}
130130

131131
Visited links don't have a specific style by default. The `:visited` status can be styled with the additional `.visited-links` utility class that can be applied to a parent element to style all the child links.
132132

133133
{{< example >}}
134134
<div class="visited-links">
135-
<a href="#" >This is an example of a visited link</a>
135+
<a href="#">This is an example of a visited link</a>
136136
</div>
137137
{{< /example >}}
138138

139+
Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.
140+
141+
{{< example >}}
142+
<a>This is a placeholder link</a>
143+
{{< /example >}}
144+
139145
## Horizontal rules
140146

141147
The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.

0 commit comments

Comments
 (0)