@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +885 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +144 -0
- package/custom-elements.json +1186 -0
- package/demo/a11y.html +58 -0
- package/demo/a11y.md +161 -0
- package/demo/api.html +57 -0
- package/demo/api.js +21 -0
- package/demo/api.md +694 -0
- package/demo/api.min.js +21 -0
- package/demo/auro-hyperlink.min.js +1291 -0
- package/demo/index.html +57 -0
- package/demo/index.js +23 -0
- package/demo/index.md +294 -0
- package/demo/index.min.js +35 -0
- package/dist/auro-hyperlink-ML2We8vn.js +1227 -0
- package/dist/index.d.ts +123 -0
- package/dist/index.js +6 -0
- package/dist/properties.js +64 -0
- package/dist/properties.jsdoc.js +65 -0
- package/dist/registered.js +8 -0
- package/package.json +90 -0
package/demo/api.md
ADDED
|
@@ -0,0 +1,694 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
.exampleWrapper--ondark {
|
|
3
|
+
color: var(--ds-color-text-primary-inverse);
|
|
4
|
+
}
|
|
5
|
+
</style>
|
|
6
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
7
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
8
|
+
|
|
9
|
+
# auro-hyperlink
|
|
10
|
+
|
|
11
|
+
`<auro-hyperlink>` is a component that wraps an HTML `<a>` element, providing additional styling and behavior.
|
|
12
|
+
|
|
13
|
+
## Properties
|
|
14
|
+
|
|
15
|
+
| Property | Attribute | Modifiers | Type | Default | Description |
|
|
16
|
+
|------------------|------------------|-----------|-----------|-----------|--------------------------------------------------|
|
|
17
|
+
| [download](#download) | `download` | | `boolean` | false | If true, the linked resource will be downloaded when the hyperlink is clicked. |
|
|
18
|
+
| [fluid](#fluid) | `fluid` | | `boolean` | | If true and `type="cta"`, the hyperlink will have a fluid-width UI. |
|
|
19
|
+
| [href](#href) | `href` | | `string` | | Defines the URL of the linked page. |
|
|
20
|
+
| [ondark](#ondark) | `ondark` | | `boolean` | false | If true, the hyperlink will be styled for use on a dark background. |
|
|
21
|
+
| [referrerpolicy](#referrerpolicy) | `referrerpolicy` | | `boolean` | | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. |
|
|
22
|
+
| [rel](#rel) | `rel` | | `string` | | Defines the relationship between the current document and the linked document. |
|
|
23
|
+
| [relative](#relative) | `relative` | | `boolean` | false | If true, the auto URL re-write feature will be disabled. |
|
|
24
|
+
| [role](#role) | | | `String` | | Defines ARIA roles; currently supports `button` for extended experiences. |
|
|
25
|
+
| [safeUri](#safeUri) | | readonly | `string` | | Returns a safe URI based on the provided `href` and `relative` parameters.<br />If `href` is truthy, it generates a safe URL using the `safeUrl` function.<br />Otherwise, it returns an empty string. |
|
|
26
|
+
| [target](#target) | `target` | | `string` | | Defines where to open the linked document. |
|
|
27
|
+
| [type](#type) | `type` | | `string` | | Defines the type of hyperlink; accepts `nav` or `cta`. |
|
|
28
|
+
| [variant](#variant) | `variant` | | `string` | "primary" | Sets button variant option. |
|
|
29
|
+
|
|
30
|
+
## CSS Shadow Parts
|
|
31
|
+
|
|
32
|
+
| Part | Description |
|
|
33
|
+
|--------------|--------------------------------------------------|
|
|
34
|
+
| [link](#link) | Allows styling to be applied to the `a` element. |
|
|
35
|
+
| [targetIcon](#targetIcon) | Allows styling to be applied to the icon that appears next to the hyperlink. |
|
|
36
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
37
|
+
|
|
38
|
+
## API Examples
|
|
39
|
+
|
|
40
|
+
### Basic
|
|
41
|
+
|
|
42
|
+
<div class="exampleWrapper">
|
|
43
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
44
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
45
|
+
<auro-hyperlink>No href supplied</auro-hyperlink><br>
|
|
46
|
+
Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
|
|
47
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
48
|
+
</div>
|
|
49
|
+
<div class="exampleWrapper--ondark">
|
|
50
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-ondark.html) -->
|
|
51
|
+
<!-- The below content is automatically added from ./../apiExamples/basic-ondark.html -->
|
|
52
|
+
<auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
|
|
53
|
+
Welcome to <auro-hyperlink ondark href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
|
|
54
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
55
|
+
</div>
|
|
56
|
+
<auro-accordion alignRight>
|
|
57
|
+
<span slot="trigger">See code</span>
|
|
58
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
59
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
<auro-hyperlink>No href supplied</auro-hyperlink><br>
|
|
63
|
+
Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
|
|
64
|
+
```
|
|
65
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
66
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-ondark.html) -->
|
|
67
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic-ondark.html -->
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
|
|
71
|
+
Welcome to <auro-hyperlink ondark href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
|
|
72
|
+
```
|
|
73
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
74
|
+
</auro-accordion>
|
|
75
|
+
|
|
76
|
+
## External Links
|
|
77
|
+
|
|
78
|
+
Hyperlinks when used with the `target="_blank"` attribute are domain aware and return either an internal domain new-window icon versus an icon that communicates users will be taken to a new domain.
|
|
79
|
+
|
|
80
|
+
For link security purposes, when using the `target="_blank"` attribute, this implicitly provides the same `rel` behavior as setting `rel="noopener"`. For additional security, Auro applies `noreferrer` to the `rel` attribute by default.
|
|
81
|
+
|
|
82
|
+
<div class="exampleWrapper">
|
|
83
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external.html) -->
|
|
84
|
+
<!-- The below content is automatically added from ./../apiExamples/external.html -->
|
|
85
|
+
Example link with
|
|
86
|
+
<auro-hyperlink
|
|
87
|
+
target="_blank"
|
|
88
|
+
href="https://www.alaskaair.com">
|
|
89
|
+
external target
|
|
90
|
+
</auro-hyperlink>
|
|
91
|
+
but same domain
|
|
92
|
+
|
|
93
|
+
<br>
|
|
94
|
+
Example link with
|
|
95
|
+
<auro-hyperlink
|
|
96
|
+
target="_blank"
|
|
97
|
+
href="https://www.portseattle.org/sea-tac">
|
|
98
|
+
external target
|
|
99
|
+
</auro-hyperlink>
|
|
100
|
+
with external domain
|
|
101
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
102
|
+
</div>
|
|
103
|
+
<div class="exampleWrapper--ondark">
|
|
104
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-ondark.html) -->
|
|
105
|
+
<!-- The below content is automatically added from ./../apiExamples/external-ondark.html -->
|
|
106
|
+
Example link with
|
|
107
|
+
<auro-hyperlink
|
|
108
|
+
ondark
|
|
109
|
+
target="_blank"
|
|
110
|
+
href="https://www.alaskaair.com">
|
|
111
|
+
external target
|
|
112
|
+
</auro-hyperlink>
|
|
113
|
+
but same domain
|
|
114
|
+
|
|
115
|
+
<br>
|
|
116
|
+
Example link with
|
|
117
|
+
<auro-hyperlink
|
|
118
|
+
ondark
|
|
119
|
+
target="_blank"
|
|
120
|
+
href="https://www.portseattle.org/sea-tac">
|
|
121
|
+
external target
|
|
122
|
+
</auro-hyperlink>
|
|
123
|
+
with external domain
|
|
124
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
125
|
+
</div>
|
|
126
|
+
<auro-accordion alignRight>
|
|
127
|
+
<span slot="trigger">See code</span>
|
|
128
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external.html) -->
|
|
129
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/external.html -->
|
|
130
|
+
|
|
131
|
+
```html
|
|
132
|
+
Example link with
|
|
133
|
+
<auro-hyperlink
|
|
134
|
+
target="_blank"
|
|
135
|
+
href="https://www.alaskaair.com">
|
|
136
|
+
external target
|
|
137
|
+
</auro-hyperlink>
|
|
138
|
+
but same domain
|
|
139
|
+
|
|
140
|
+
<br>
|
|
141
|
+
Example link with
|
|
142
|
+
<auro-hyperlink
|
|
143
|
+
target="_blank"
|
|
144
|
+
href="https://www.portseattle.org/sea-tac">
|
|
145
|
+
external target
|
|
146
|
+
</auro-hyperlink>
|
|
147
|
+
with external domain
|
|
148
|
+
```
|
|
149
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
150
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-ondark.html) -->
|
|
151
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/external-ondark.html -->
|
|
152
|
+
|
|
153
|
+
```html
|
|
154
|
+
Example link with
|
|
155
|
+
<auro-hyperlink
|
|
156
|
+
ondark
|
|
157
|
+
target="_blank"
|
|
158
|
+
href="https://www.alaskaair.com">
|
|
159
|
+
external target
|
|
160
|
+
</auro-hyperlink>
|
|
161
|
+
but same domain
|
|
162
|
+
|
|
163
|
+
<br>
|
|
164
|
+
Example link with
|
|
165
|
+
<auro-hyperlink
|
|
166
|
+
ondark
|
|
167
|
+
target="_blank"
|
|
168
|
+
href="https://www.portseattle.org/sea-tac">
|
|
169
|
+
external target
|
|
170
|
+
</auro-hyperlink>
|
|
171
|
+
with external domain
|
|
172
|
+
```
|
|
173
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
174
|
+
</auro-accordion>
|
|
175
|
+
|
|
176
|
+
### External links with referrerpolicy
|
|
177
|
+
|
|
178
|
+
When using the `target="_blank"` attribute, to override the default use of `rel="noreferrer"` use the `referrerpolicy` attribute.
|
|
179
|
+
|
|
180
|
+
Using this attribute will use the `strict-origin-when-cross-origin` policy type. This sends a full URL when performing a same-origin request, only sends the origin when the protocol security level stays the same (HTTPS→HTTPS), and sends no header to a less secure destination (HTTPS→HTTP).
|
|
181
|
+
|
|
182
|
+
This will also set the `rel` attribute to `external`.
|
|
183
|
+
|
|
184
|
+
<div class="exampleWrapper">
|
|
185
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer.html) -->
|
|
186
|
+
<!-- The below content is automatically added from ./../apiExamples/external-referrer.html -->
|
|
187
|
+
Example link with
|
|
188
|
+
<auro-hyperlink
|
|
189
|
+
target="_blank"
|
|
190
|
+
referrerpolicy
|
|
191
|
+
href="https://www.portseattle.org/sea-tac">
|
|
192
|
+
external target
|
|
193
|
+
</auro-hyperlink>
|
|
194
|
+
, external domain with referrerpolicy attribute
|
|
195
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
196
|
+
</div>
|
|
197
|
+
<div class="exampleWrapper--ondark">
|
|
198
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-ondark.html) -->
|
|
199
|
+
<!-- The below content is automatically added from ./../apiExamples/external-referrer-ondark.html -->
|
|
200
|
+
Example link with
|
|
201
|
+
<auro-hyperlink
|
|
202
|
+
ondark
|
|
203
|
+
target="_blank"
|
|
204
|
+
referrerpolicy
|
|
205
|
+
href="https://www.portseattle.org/sea-tac">
|
|
206
|
+
external target
|
|
207
|
+
</auro-hyperlink>
|
|
208
|
+
, external domain with referrerpolicy attribute
|
|
209
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
210
|
+
</div>
|
|
211
|
+
<auro-accordion alignRight>
|
|
212
|
+
<span slot="trigger">See code</span>
|
|
213
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer.html) -->
|
|
214
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/external-referrer.html -->
|
|
215
|
+
|
|
216
|
+
```html
|
|
217
|
+
Example link with
|
|
218
|
+
<auro-hyperlink
|
|
219
|
+
target="_blank"
|
|
220
|
+
referrerpolicy
|
|
221
|
+
href="https://www.portseattle.org/sea-tac">
|
|
222
|
+
external target
|
|
223
|
+
</auro-hyperlink>
|
|
224
|
+
, external domain with referrerpolicy attribute
|
|
225
|
+
```
|
|
226
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
227
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-ondark.html) -->
|
|
228
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/external-referrer-ondark.html -->
|
|
229
|
+
|
|
230
|
+
```html
|
|
231
|
+
Example link with
|
|
232
|
+
<auro-hyperlink
|
|
233
|
+
ondark
|
|
234
|
+
target="_blank"
|
|
235
|
+
referrerpolicy
|
|
236
|
+
href="https://www.portseattle.org/sea-tac">
|
|
237
|
+
external target
|
|
238
|
+
</auro-hyperlink>
|
|
239
|
+
, external domain with referrerpolicy attribute
|
|
240
|
+
```
|
|
241
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
242
|
+
</auro-accordion>
|
|
243
|
+
|
|
244
|
+
## Navigation style links
|
|
245
|
+
|
|
246
|
+
When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alternate UI. With this type, links will appear without an underline, but present the underline feedback on hover.
|
|
247
|
+
|
|
248
|
+
<div class="exampleWrapper">
|
|
249
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle.html) -->
|
|
250
|
+
<!-- The below content is automatically added from ./../apiExamples/navStyle.html -->
|
|
251
|
+
<auro-hyperlink
|
|
252
|
+
type="nav"
|
|
253
|
+
href="https://www.alaskaair.com">
|
|
254
|
+
Navigation style link
|
|
255
|
+
</auro-hyperlink>
|
|
256
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
257
|
+
</div>
|
|
258
|
+
<div class="exampleWrapper--ondark">
|
|
259
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle-ondark.html) -->
|
|
260
|
+
<!-- The below content is automatically added from ./../apiExamples/navStyle-ondark.html -->
|
|
261
|
+
<auro-hyperlink
|
|
262
|
+
ondark
|
|
263
|
+
type="nav"
|
|
264
|
+
href="https://www.alaskaair.com">
|
|
265
|
+
Navigation style link
|
|
266
|
+
</auro-hyperlink>
|
|
267
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
268
|
+
</div>
|
|
269
|
+
<auro-accordion alignRight>
|
|
270
|
+
<span slot="trigger">See code</span>
|
|
271
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle.html) -->
|
|
272
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/navStyle.html -->
|
|
273
|
+
|
|
274
|
+
```html
|
|
275
|
+
<auro-hyperlink
|
|
276
|
+
type="nav"
|
|
277
|
+
href="https://www.alaskaair.com">
|
|
278
|
+
Navigation style link
|
|
279
|
+
</auro-hyperlink>
|
|
280
|
+
```
|
|
281
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
282
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle-ondark.html) -->
|
|
283
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/navStyle-ondark.html -->
|
|
284
|
+
|
|
285
|
+
```html
|
|
286
|
+
<auro-hyperlink
|
|
287
|
+
ondark
|
|
288
|
+
type="nav"
|
|
289
|
+
href="https://www.alaskaair.com">
|
|
290
|
+
Navigation style link
|
|
291
|
+
</auro-hyperlink>
|
|
292
|
+
```
|
|
293
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
294
|
+
</auro-accordion>
|
|
295
|
+
|
|
296
|
+
## Relative vs absolute URLs and https enforcement
|
|
297
|
+
|
|
298
|
+
By default the `auro-hyperlink` will assume that the url passed is an absolute URL to `www.alaskaair.com` with the `https` protocol.
|
|
299
|
+
|
|
300
|
+
<div class="exampleWrapper">
|
|
301
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relativevsabsolute.html) -->
|
|
302
|
+
<!-- The below content is automatically added from ./../apiExamples/relativevsabsolute.html -->
|
|
303
|
+
Relative href converted to absolute URL to <auro-hyperlink href="/route-map">route map</auro-hyperlink>.
|
|
304
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
305
|
+
</div>
|
|
306
|
+
<auro-accordion alignRight>
|
|
307
|
+
<span slot="trigger">See code</span>
|
|
308
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relativevsabsolute_code.html) -->
|
|
309
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/relativevsabsolute_code.html -->
|
|
310
|
+
|
|
311
|
+
```html
|
|
312
|
+
<!-- Web component example -->
|
|
313
|
+
Relative href converted to absolute URL to <auro-hyperlink href="/route-map">route map</auro-hyperlink>.
|
|
314
|
+
|
|
315
|
+
<!-- Output code in shadow DOM element -->
|
|
316
|
+
Relative href converted to absolute URL to <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>route map</slot></a>.
|
|
317
|
+
```
|
|
318
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
319
|
+
</auro-accordion>
|
|
320
|
+
|
|
321
|
+
#### https enforcement
|
|
322
|
+
|
|
323
|
+
Regardless of protocol used with `http` property, `auro-hyperlink` will rewrite the final reference with the correct `https` protocol.
|
|
324
|
+
|
|
325
|
+
<div class="exampleWrapper">
|
|
326
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/httpsEnforcement.html) -->
|
|
327
|
+
<!-- The below content is automatically added from ./../apiExamples/httpsEnforcement.html -->
|
|
328
|
+
http absolute URL <auro-hyperlink href="http://www.alaskaair.com/route-map">to route map</auro-hyperlink> or
|
|
329
|
+
no hypertext transfer protocol absolute URL to <auro-hyperlink href="//www.alaskaair.com/route-map">route map</auro-hyperlink>
|
|
330
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
331
|
+
</div>
|
|
332
|
+
<auro-accordion alignRight>
|
|
333
|
+
<span slot="trigger">See code</span>
|
|
334
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/httpsEnforcement_code.html) -->
|
|
335
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/httpsEnforcement_code.html -->
|
|
336
|
+
|
|
337
|
+
```html
|
|
338
|
+
<!-- Web component example -->
|
|
339
|
+
http absolute URL <auro-hyperlink href="http://www.alaskaair.com/route-map">to route map</auro-hyperlink> or
|
|
340
|
+
no hypertext transfer protocol absolute URL to <auro-hyperlink href="//www.alaskaair.com/route-map">route map</auro-hyperlink>
|
|
341
|
+
<!-- Output code in shadow DOM element -->
|
|
342
|
+
http absolute URL <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>to route map</slot></a>
|
|
343
|
+
no hypertext transfer protocol absolute URL to <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>route map</slot></a>
|
|
344
|
+
```
|
|
345
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
346
|
+
</auro-accordion>
|
|
347
|
+
|
|
348
|
+
#### Relative URLs
|
|
349
|
+
|
|
350
|
+
Absolute URLs are not always preferred. When using relative URLs, use the `relative` attribute and `auro-hyperlink` will ignore the domain and the protocol.
|
|
351
|
+
|
|
352
|
+
<div class="exampleWrapper">
|
|
353
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relativeUrl.html) -->
|
|
354
|
+
<!-- The below content is automatically added from ./../apiExamples/relativeUrl.html -->
|
|
355
|
+
Example of a <auro-hyperlink relative href="#">relative URL</auro-hyperlink>.
|
|
356
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
357
|
+
</div>
|
|
358
|
+
<auro-accordion alignRight>
|
|
359
|
+
<span slot="trigger">See code</span>
|
|
360
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relativeUrl_code.html) -->
|
|
361
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/relativeUrl_code.html -->
|
|
362
|
+
|
|
363
|
+
```html
|
|
364
|
+
<!-- Web component example -->
|
|
365
|
+
Example of a <auro-hyperlink relative href="#">relative URL</auro-hyperlink>
|
|
366
|
+
<!-- Output code in shadow DOM element -->
|
|
367
|
+
Example of a <a class="hyperlink" href="#"><slot>relative URL</slot></a>
|
|
368
|
+
```
|
|
369
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
370
|
+
</auro-accordion>
|
|
371
|
+
|
|
372
|
+
#### Using telephone/text/mailto URLs protocols
|
|
373
|
+
|
|
374
|
+
<div class="exampleWrapper">
|
|
375
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/URLscheme.html) -->
|
|
376
|
+
<!-- The below content is automatically added from ./../apiExamples/URLscheme.html -->
|
|
377
|
+
Example <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>.
|
|
378
|
+
Example <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink>.
|
|
379
|
+
Example <auro-hyperlink href="mailto:someone@alaskaair.com?cc=someone-else@alaskaair.com&bcc=someone-else-else@alaskaiar.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">email link</auro-hyperlink>.
|
|
380
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
381
|
+
</div>
|
|
382
|
+
<auro-accordion alignRight>
|
|
383
|
+
<span slot="trigger">See code</span>
|
|
384
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/URLscheme.html) -->
|
|
385
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/URLscheme.html -->
|
|
386
|
+
|
|
387
|
+
```html
|
|
388
|
+
Example <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>.
|
|
389
|
+
Example <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink>.
|
|
390
|
+
Example <auro-hyperlink href="mailto:someone@alaskaair.com?cc=someone-else@alaskaair.com&bcc=someone-else-else@alaskaiar.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">email link</auro-hyperlink>.
|
|
391
|
+
```
|
|
392
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
393
|
+
</auro-accordion>
|
|
394
|
+
|
|
395
|
+
## Call to action buttons
|
|
396
|
+
|
|
397
|
+
Call to action (CTA) buttons combine hyperlink functionality with button styling. While semantically these are hyperlinks, they visually appear as buttons. Use the `variant` attribute with values `primary`, `secondary`, `tertiary`, `ghost`, or `flat` to modify their appearance as shown below. The `ondark` attribute can be combined with any `type="cta"` option.
|
|
398
|
+
|
|
399
|
+
<div class="exampleWrapper">
|
|
400
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta.html) -->
|
|
401
|
+
<!-- The below content is automatically added from ./../apiExamples/cta.html -->
|
|
402
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
|
|
403
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
|
|
404
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
|
|
405
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="ghost">Ghost</auro-hyperlink>
|
|
406
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
|
|
407
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
408
|
+
</div>
|
|
409
|
+
<div class="exampleWrapper--ondark">
|
|
410
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-ondark.html) -->
|
|
411
|
+
<!-- The below content is automatically added from ./../apiExamples/cta-ondark.html -->
|
|
412
|
+
<auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
|
|
413
|
+
<auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
|
|
414
|
+
<auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
|
|
415
|
+
<auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="ghost">Ghost</auro-hyperlink>
|
|
416
|
+
<auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
|
|
417
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
418
|
+
</div>
|
|
419
|
+
<auro-accordion alignRight>
|
|
420
|
+
<span slot="trigger">See code</span>
|
|
421
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta.html) -->
|
|
422
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/cta.html -->
|
|
423
|
+
|
|
424
|
+
```html
|
|
425
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
|
|
426
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
|
|
427
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
|
|
428
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="ghost">Ghost</auro-hyperlink>
|
|
429
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
|
|
430
|
+
```
|
|
431
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
432
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-ondark.html) -->
|
|
433
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/cta-ondark.html -->
|
|
434
|
+
|
|
435
|
+
```html
|
|
436
|
+
<auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
|
|
437
|
+
<auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
|
|
438
|
+
<auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
|
|
439
|
+
<auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="ghost">Ghost</auro-hyperlink>
|
|
440
|
+
<auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
|
|
441
|
+
```
|
|
442
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
443
|
+
</auro-accordion>
|
|
444
|
+
|
|
445
|
+
### CTA External links
|
|
446
|
+
|
|
447
|
+
(CTA) buttons can also be used in combinaton with external links. In the following example, see how the `target="_blank"` attribute acts like external links.
|
|
448
|
+
|
|
449
|
+
CTA buttons share the same icon support as the standard hyperlink for targets that open new browser tabs.
|
|
450
|
+
|
|
451
|
+
<div class="exampleWrapper">
|
|
452
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-external-link.html) -->
|
|
453
|
+
<!-- The below content is automatically added from ./../apiExamples/cta-external-link.html -->
|
|
454
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
|
|
455
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
|
|
456
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
|
|
457
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="ghost">Ghost</auro-hyperlink>
|
|
458
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
|
|
459
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
460
|
+
</div>
|
|
461
|
+
<div class="exampleWrapper--ondark">
|
|
462
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-external-link-ondark.html) -->
|
|
463
|
+
<!-- The below content is automatically added from ./../apiExamples/cta-external-link-ondark.html -->
|
|
464
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="primary">Primary</auro-hyperlink>
|
|
465
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="secondary">Secondary</auro-hyperlink>
|
|
466
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="tertiary">Tertiary</auro-hyperlink>
|
|
467
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="ghost">Ghost</auro-hyperlink>
|
|
468
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="flat">Flat</auro-hyperlink>
|
|
469
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
470
|
+
</div>
|
|
471
|
+
<auro-accordion alignRight>
|
|
472
|
+
<span slot="trigger">See code</span>
|
|
473
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-external-link.html) -->
|
|
474
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/cta-external-link.html -->
|
|
475
|
+
|
|
476
|
+
```html
|
|
477
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
|
|
478
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
|
|
479
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
|
|
480
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="ghost">Ghost</auro-hyperlink>
|
|
481
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
|
|
482
|
+
```
|
|
483
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
484
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-external-link-ondark.html) -->
|
|
485
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/cta-external-link-ondark.html -->
|
|
486
|
+
|
|
487
|
+
```html
|
|
488
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="primary">Primary</auro-hyperlink>
|
|
489
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="secondary">Secondary</auro-hyperlink>
|
|
490
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="tertiary">Tertiary</auro-hyperlink>
|
|
491
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="ghost">Ghost</auro-hyperlink>
|
|
492
|
+
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="flat">Flat</auro-hyperlink>
|
|
493
|
+
```
|
|
494
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
495
|
+
</auro-accordion>
|
|
496
|
+
|
|
497
|
+
### Fluid CTA links
|
|
498
|
+
|
|
499
|
+
In the following example, see how the `fluid` attribute alters the shape of the button to take up the full width of its parent container.
|
|
500
|
+
|
|
501
|
+
<div class="exampleWrapper">
|
|
502
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-fluid.html) -->
|
|
503
|
+
<!-- The below content is automatically added from ./../apiExamples/cta-fluid.html -->
|
|
504
|
+
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
|
505
|
+
<auro-hyperlink type="cta" fluid href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
|
|
506
|
+
<auro-hyperlink type="cta" fluid variant="secondary" href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
|
|
507
|
+
<auro-hyperlink type="cta" fluid variant="tertiary" href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
|
|
508
|
+
</div>
|
|
509
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
510
|
+
</div>
|
|
511
|
+
<auro-accordion alignRight>
|
|
512
|
+
<span slot="trigger">See code</span>
|
|
513
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-fluid.html) -->
|
|
514
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/cta-fluid.html -->
|
|
515
|
+
|
|
516
|
+
```html
|
|
517
|
+
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
|
518
|
+
<auro-hyperlink type="cta" fluid href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
|
|
519
|
+
<auro-hyperlink type="cta" fluid variant="secondary" href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
|
|
520
|
+
<auro-hyperlink type="cta" fluid variant="tertiary" href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
|
|
521
|
+
</div>
|
|
522
|
+
```
|
|
523
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
524
|
+
</auro-accordion>
|
|
525
|
+
|
|
526
|
+
### CTA sizes
|
|
527
|
+
|
|
528
|
+
In the following example, see how the `size` attribute alters the size of the cta link. Available sizes are `xs`, `sm`, `md`, `lg`, `xl`.
|
|
529
|
+
|
|
530
|
+
<div class="exampleWrapper">
|
|
531
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-size.html) -->
|
|
532
|
+
<!-- The below content is automatically added from ./../apiExamples/cta-size.html -->
|
|
533
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" size="xs">Extra Small</auro-hyperlink>
|
|
534
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" size="sm">Small</auro-hyperlink>
|
|
535
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" size="md">Medium</auro-hyperlink>
|
|
536
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" size="lg">Large</auro-hyperlink>
|
|
537
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" size="xl">Extra Large</auro-hyperlink>
|
|
538
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
539
|
+
</div>
|
|
540
|
+
<auro-accordion alignRight>
|
|
541
|
+
<span slot="trigger">See code</span>
|
|
542
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-size.html) -->
|
|
543
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/cta-size.html -->
|
|
544
|
+
|
|
545
|
+
```html
|
|
546
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" size="xs">Extra Small</auro-hyperlink>
|
|
547
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" size="sm">Small</auro-hyperlink>
|
|
548
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" size="md">Medium</auro-hyperlink>
|
|
549
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" size="lg">Large</auro-hyperlink>
|
|
550
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" size="xl">Extra Large</auro-hyperlink>
|
|
551
|
+
```
|
|
552
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
553
|
+
</auro-accordion>
|
|
554
|
+
|
|
555
|
+
### CTA shape
|
|
556
|
+
|
|
557
|
+
The `shape` attribute accepts three values: `rounded`, `pill`, or `circle`.
|
|
558
|
+
|
|
559
|
+
<div class="exampleWrapper">
|
|
560
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-shape.html) -->
|
|
561
|
+
<!-- The below content is automatically added from ./../apiExamples/cta-shape.html -->
|
|
562
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" shape="rounded">Rounded</auro-hyperlink>
|
|
563
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" shape="pill">Pill</auro-hyperlink>
|
|
564
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" aria-label="in-flight" shape="pill">
|
|
565
|
+
Back to Top
|
|
566
|
+
<auro-icon customColor category="interface" name="arrow-up"></auro-icon>
|
|
567
|
+
</auro-hyperlink>
|
|
568
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" shape="circle">
|
|
569
|
+
<auro-icon customcolor category="interface" name="account-filled" ondark></auro-icon>
|
|
570
|
+
</auro-hyperlink>
|
|
571
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
572
|
+
</div>
|
|
573
|
+
<auro-accordion alignRight>
|
|
574
|
+
<span slot="trigger">See code</span>
|
|
575
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-shape.html) -->
|
|
576
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/cta-shape.html -->
|
|
577
|
+
|
|
578
|
+
```html
|
|
579
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" shape="rounded">Rounded</auro-hyperlink>
|
|
580
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" shape="pill">Pill</auro-hyperlink>
|
|
581
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" aria-label="in-flight" shape="pill">
|
|
582
|
+
Back to Top
|
|
583
|
+
<auro-icon customColor category="interface" name="arrow-up"></auro-icon>
|
|
584
|
+
</auro-hyperlink>
|
|
585
|
+
<auro-hyperlink type="cta" href="https://www.alaskaair.com" shape="circle">
|
|
586
|
+
<auro-icon customcolor category="interface" name="account-filled" ondark></auro-icon>
|
|
587
|
+
</auro-hyperlink>
|
|
588
|
+
```
|
|
589
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
590
|
+
</auro-accordion>
|
|
591
|
+
|
|
592
|
+
## Theme Support
|
|
593
|
+
|
|
594
|
+
The component may be restyled using the following code sample and changing the values of the following token(s).
|
|
595
|
+
|
|
596
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
597
|
+
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
598
|
+
|
|
599
|
+
```scss
|
|
600
|
+
/* stylelint-disable custom-property-empty-line-before */
|
|
601
|
+
|
|
602
|
+
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|
|
603
|
+
|
|
604
|
+
:host(:not([type='cta'])) {
|
|
605
|
+
// default hyperlink
|
|
606
|
+
|
|
607
|
+
--ds-auro-hyperlink-default-color-default: var(--ds-advanced-color-hyperlink-text, #{v.$ds-advanced-color-hyperlink-text});
|
|
608
|
+
--ds-auro-hyperlink-default-container-color-default: transparent;
|
|
609
|
+
--ds-auro-hyperlink-default-outline-color-default: transparent;
|
|
610
|
+
--ds-auro-hyperlink-default-border-color-default: transparent;
|
|
611
|
+
|
|
612
|
+
--ds-auro-hyperlink-visited-color-default: var(--ds-advanced-color-hyperlink-text, #{v.$ds-advanced-color-hyperlink-text});
|
|
613
|
+
--ds-auro-hyperlink-visited-container-color-default: transparent;
|
|
614
|
+
--ds-auro-hyperlink-visited-outline-color-default: transparent;
|
|
615
|
+
--ds-auro-hyperlink-visited-border-color-default: transparent;
|
|
616
|
+
|
|
617
|
+
--ds-auro-hyperlink-focus-color-default: var(--ds-advanced-color-hyperlink-text, #{v.$ds-advanced-color-hyperlink-text});
|
|
618
|
+
--ds-auro-hyperlink-focus-container-color-default: transparent;
|
|
619
|
+
--ds-auro-hyperlink-focus-outline-color-default: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
|
|
620
|
+
--ds-auro-hyperlink-focus-border-color-default: transparent;
|
|
621
|
+
|
|
622
|
+
--ds-auro-hyperlink-hover-color-default: var(--ds-advanced-color-hyperlink-text-hover, #{v.$ds-advanced-color-hyperlink-text-hover});
|
|
623
|
+
--ds-auro-hyperlink-hover-container-color-default: transparent;
|
|
624
|
+
--ds-auro-hyperlink-hover-outline-color-default: transparent;
|
|
625
|
+
--ds-auro-hyperlink-hover-border-color-default: transparent;
|
|
626
|
+
|
|
627
|
+
// default ondark hyperlink
|
|
628
|
+
|
|
629
|
+
--ds-auro-hyperlink-default-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #{v.$ds-advanced-color-hyperlink-text-inverse});
|
|
630
|
+
--ds-auro-hyperlink-default-container-color-inverse: transparent;
|
|
631
|
+
--ds-auro-hyperlink-default-outline-color-inverse: transparent;
|
|
632
|
+
--ds-auro-hyperlink-default-border-color-inverse: transparent;
|
|
633
|
+
|
|
634
|
+
--ds-auro-hyperlink-visited-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #{v.$ds-advanced-color-hyperlink-text-inverse});
|
|
635
|
+
--ds-auro-hyperlink-visited-container-color-inverse: transparent;
|
|
636
|
+
--ds-auro-hyperlink-visited-outline-color-inverse: transparent;
|
|
637
|
+
--ds-auro-hyperlink-visited-border-color-inverse: transparent;
|
|
638
|
+
|
|
639
|
+
--ds-auro-hyperlink-focus-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #{v.$ds-advanced-color-hyperlink-text-inverse});
|
|
640
|
+
--ds-auro-hyperlink-focus-container-color-inverse: transparent;
|
|
641
|
+
--ds-auro-hyperlink-focus-outline-color-inverse: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
|
|
642
|
+
--ds-auro-hyperlink-focus-border-color-inverse: transparent;
|
|
643
|
+
|
|
644
|
+
--ds-auro-hyperlink-hover-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #{v.$ds-advanced-color-hyperlink-text-inverse});
|
|
645
|
+
--ds-auro-hyperlink-hover-container-color-inverse: transparent;
|
|
646
|
+
--ds-auro-hyperlink-hover-outline-color-inverse: transparent;
|
|
647
|
+
--ds-auro-hyperlink-hover-border-color-inverse: transparent;
|
|
648
|
+
|
|
649
|
+
// nav hyperlink
|
|
650
|
+
|
|
651
|
+
--ds-auro-hyperlink-nav-default-color-default: var(--ds-advanced-color-hyperlink-text, #{v.$ds-advanced-color-hyperlink-text});
|
|
652
|
+
--ds-auro-hyperlink-nav-default-container-color-default: transparent;
|
|
653
|
+
--ds-auro-hyperlink-nav-default-outline-color-default: transparent;
|
|
654
|
+
--ds-auro-hyperlink-nav-default-border-color-default: transparent;
|
|
655
|
+
|
|
656
|
+
--ds-auro-hyperlink-nav-visited-color-default: var(--ds-advanced-color-hyperlink-text, #{v.$ds-advanced-color-hyperlink-text});
|
|
657
|
+
--ds-auro-hyperlink-nav-visited-container-color-default: transparent;
|
|
658
|
+
--ds-auro-hyperlink-nav-visited-outline-color-default: transparent;
|
|
659
|
+
--ds-auro-hyperlink-nav-visited-border-color-default: transparent;
|
|
660
|
+
|
|
661
|
+
--ds-auro-hyperlink-nav-focus-color-default: var(--ds-advanced-color-hyperlink-text-inverse, #{v.$ds-advanced-color-hyperlink-text-inverse});
|
|
662
|
+
--ds-auro-hyperlink-nav-focus-container-color-default: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
|
|
663
|
+
--ds-auro-hyperlink-nav-focus-outline-color-default: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
|
|
664
|
+
--ds-auro-hyperlink-nav-focus-border-color-default: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
|
|
665
|
+
|
|
666
|
+
--ds-auro-hyperlink-nav-hover-color-default: var(--ds-advanced-color-hyperlink-text-hover, #{v.$ds-advanced-color-hyperlink-text-hover});
|
|
667
|
+
--ds-auro-hyperlink-nav-hover-container-color-default: transparent;
|
|
668
|
+
--ds-auro-hyperlink-nav-hover-outline-color-default: transparent;
|
|
669
|
+
--ds-auro-hyperlink-nav-hover-border-color-default: transparent;
|
|
670
|
+
|
|
671
|
+
// nav ondark hyperlink
|
|
672
|
+
|
|
673
|
+
--ds-auro-hyperlink-nav-default-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #{v.$ds-advanced-color-hyperlink-text-inverse});
|
|
674
|
+
--ds-auro-hyperlink-nav-default-container-color-inverse: transparent;
|
|
675
|
+
--ds-auro-hyperlink-nav-default-outline-color-inverse: transparent;
|
|
676
|
+
--ds-auro-hyperlink-nav-default-border-color-inverse: transparent;
|
|
677
|
+
|
|
678
|
+
--ds-auro-hyperlink-nav-visited-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #{v.$ds-advanced-color-hyperlink-text-inverse});
|
|
679
|
+
--ds-auro-hyperlink-nav-visited-container-color-inverse: transparent;
|
|
680
|
+
--ds-auro-hyperlink-nav-visited-outline-color-inverse: transparent;
|
|
681
|
+
--ds-auro-hyperlink-nav-visited-border-color-inverse: transparent;
|
|
682
|
+
|
|
683
|
+
--ds-auro-hyperlink-nav-focus-color-inverse: var(--ds-advanced-color-hyperlink-text, #{v.$ds-advanced-color-hyperlink-text});
|
|
684
|
+
--ds-auro-hyperlink-nav-focus-container-color-inverse: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
|
|
685
|
+
--ds-auro-hyperlink-nav-focus-outline-color-inverse: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
|
|
686
|
+
--ds-auro-hyperlink-nav-focus-border-color-inverse: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
|
|
687
|
+
|
|
688
|
+
--ds-auro-hyperlink-nav-hover-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #{v.$ds-advanced-color-hyperlink-text-inverse});
|
|
689
|
+
--ds-auro-hyperlink-nav-hover-container-color-inverse: transparent;
|
|
690
|
+
--ds-auro-hyperlink-nav-hover-outline-color-inverse: transparent;
|
|
691
|
+
--ds-auro-hyperlink-nav-hover-border-color-inverse: transparent;
|
|
692
|
+
}
|
|
693
|
+
```
|
|
694
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|