@utrecht/link-button-css 1.0.0 → 1.2.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 +19 -0
- package/dist/index.css +103 -0
- package/dist/index.min.css +5 -0
- package/dist/index.mjs +1 -0
- package/dist/index.mjs.d.ts +2 -0
- package/package.json +20 -4
- package/src/_mixin.scss +84 -0
- package/src/index.scss +59 -0
- package/src/tokens.json +5 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# @utrecht/link-button-css
|
|
2
|
+
|
|
3
|
+
## 1.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- e497b08: Export CSS string as default export in `dist/index.mjs`.
|
|
8
|
+
|
|
9
|
+
## 1.1.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- 62f1157: Add SCSS files to `src/` directory of CSS component packages.
|
|
14
|
+
|
|
15
|
+
## 1.0.0
|
|
16
|
+
|
|
17
|
+
### Major Changes
|
|
18
|
+
|
|
19
|
+
- 856d996: Switch from alpha releases to semantic versioning.
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license EUPL-1.2
|
|
3
|
+
* Copyright (c) 2020-2024 Frameless B.V.
|
|
4
|
+
* Copyright (c) 2021-2024 Gemeente Utrecht
|
|
5
|
+
*/
|
|
6
|
+
.utrecht-link-button {
|
|
7
|
+
--utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
|
|
8
|
+
color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
|
|
9
|
+
--_utrecht-link-forced-colors-color: linktext;
|
|
10
|
+
text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
|
|
11
|
+
text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
12
|
+
text-decoration-skip-ink: all;
|
|
13
|
+
text-decoration-thickness: max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
14
|
+
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
15
|
+
--utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
|
|
16
|
+
align-items: center;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
display: inline-flex;
|
|
19
|
+
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
20
|
+
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
21
|
+
font-weight: var(--utrecht-button-font-weight);
|
|
22
|
+
gap: var(--utrecht-button-icon-gap);
|
|
23
|
+
inline-size: var(--utrecht-button-inline-size, auto);
|
|
24
|
+
justify-content: center;
|
|
25
|
+
line-height: inherit;
|
|
26
|
+
min-block-size: var(--utrecht-button-min-block-size, 44px);
|
|
27
|
+
min-inline-size: var(--utrecht-button-min-inline-size, 44px);
|
|
28
|
+
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
29
|
+
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
30
|
+
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
31
|
+
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
32
|
+
text-transform: var(--utrecht-button-text-transform);
|
|
33
|
+
-webkit-user-select: none;
|
|
34
|
+
user-select: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.utrecht-link-button--hover, .utrecht-link-button--html-button:not(:disabled):hover {
|
|
38
|
+
--_utrecht-link-forced-colors-color: linktext;
|
|
39
|
+
--_utrecht-link-state-color: var(--utrecht-link-hover-color);
|
|
40
|
+
--_utrecht-link-state-text-decoration: var(--utrecht-link-hover-text-decoration);
|
|
41
|
+
--_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-hover-text-decoration-thickness);
|
|
42
|
+
text-decoration-skip: none;
|
|
43
|
+
text-decoration-skip-ink: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.utrecht-link-button--disabled {
|
|
47
|
+
--_utrecht-link-forced-colors-color: GrayText;
|
|
48
|
+
--_utrecht-link-state-color: var(--utrecht-link-placeholder-color);
|
|
49
|
+
cursor: var(--utrecht-action-disabled-cursor, not-allowed);
|
|
50
|
+
font-weight: var(--utrecht-link-placeholder-font-weight);
|
|
51
|
+
text-decoration-line: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus {
|
|
55
|
+
--_utrecht-link-state-color: var(--utrecht-link-focus-color);
|
|
56
|
+
background-color: var(--utrecht-link-focus-background-color, transparent);
|
|
57
|
+
text-decoration-skip: none;
|
|
58
|
+
text-decoration-skip-ink: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
|
|
62
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
63
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
64
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
65
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
66
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
67
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
68
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
69
|
+
--_utrecht-link-state-text-decoration: var(
|
|
70
|
+
--utrecht-link-focus-visible-text-decoration,
|
|
71
|
+
var(--utrecht-link-focus-text-decoration)
|
|
72
|
+
);
|
|
73
|
+
--_utrecht-link-state-text-decoration-thickness: var(
|
|
74
|
+
--utrecht-link-focus-visible-text-decoration-thickness,
|
|
75
|
+
var(--utrecht-link-focus-text-decoration-thickness)
|
|
76
|
+
);
|
|
77
|
+
z-index: var(--utrecht-stack-focus-z-index, 1);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.utrecht-link-button--active, .utrecht-link-button--html-button:not(:disabled):active {
|
|
81
|
+
--_utrecht-link-forced-colors-color: activetext;
|
|
82
|
+
--_utrecht-link-state-color: var(--utrecht-link-active-color);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.utrecht-link-button--inline {
|
|
86
|
+
--utrecht-icon-inset-block-start: var(--utrecht-icon-baseline-inset-block-start);
|
|
87
|
+
min-block-size: auto;
|
|
88
|
+
min-inline-size: auto;
|
|
89
|
+
padding-block-end: 0;
|
|
90
|
+
padding-block-start: 0;
|
|
91
|
+
padding-inline-end: 0;
|
|
92
|
+
padding-inline-start: 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.utrecht-link-button--pressed {
|
|
96
|
+
--_utrecht-link-forced-colors-color: activetext;
|
|
97
|
+
--_utrecht-link-state-color: var(--utrecht-link-active-color);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.utrecht-link-button--html-button {
|
|
101
|
+
background-color: transparent;
|
|
102
|
+
border-width: 0;
|
|
103
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
.utrecht-link-button{--utrecht-icon-size:var(--utrecht-link-icon-size,1em);color:var(--_utrecht-link-state-color,var(--utrecht-link-color,var(--_utrecht-link-forced-colors-color)));--_utrecht-link-forced-colors-color:linktext;text-decoration-color:var(--_utrecht-link-state-text-decoration-color,var(--utrecht-link-text-decoration-color,currentColor));text-decoration-line:var(--_utrecht-link-state-text-decoration,var(--utrecht-link-text-decoration,underline));text-decoration-skip-ink:all;text-decoration-thickness:max(var(--_utrecht-link-state-text-decoration-thickness,var(--utrecht-link-text-decoration-thickness)),1px);text-underline-offset:var(--utrecht-link-text-underline-offset);--utrecht-icon-size:var(--utrecht-button-icon-size,1em);align-items:center;cursor:pointer;display:inline-flex;font-family:var(--utrecht-button-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-button-font-size,var(--utrecht-document-font-family));font-weight:var(--utrecht-button-font-weight);gap:var(--utrecht-button-icon-gap);inline-size:var(--utrecht-button-inline-size,auto);justify-content:center;line-height:inherit;min-block-size:var(--utrecht-button-min-block-size,44px);min-inline-size:var(--utrecht-button-min-inline-size,44px);padding-block-end:var(--utrecht-button-padding-block-end);padding-block-start:var(--utrecht-button-padding-block-start);padding-inline-end:var(--utrecht-button-padding-inline-end);padding-inline-start:var(--utrecht-button-padding-inline-start);text-transform:var(--utrecht-button-text-transform);-webkit-user-select:none;user-select:none}.utrecht-link-button--hover,.utrecht-link-button--html-button:not(:disabled):hover{--_utrecht-link-forced-colors-color:linktext;--_utrecht-link-state-color:var(--utrecht-link-hover-color);--_utrecht-link-state-text-decoration:var(--utrecht-link-hover-text-decoration);--_utrecht-link-state-text-decoration-thickness:var(--utrecht-link-hover-text-decoration-thickness);text-decoration-skip:none;text-decoration-skip-ink:none}.utrecht-link-button--disabled{--_utrecht-link-forced-colors-color:GrayText;--_utrecht-link-state-color:var(--utrecht-link-placeholder-color);cursor:var(--utrecht-action-disabled-cursor,not-allowed);font-weight:var(--utrecht-link-placeholder-font-weight);text-decoration-line:none}.utrecht-link-button--focus,.utrecht-link-button--html-button:not(:disabled):focus{--_utrecht-link-state-color:var(--utrecht-link-focus-color);background-color:var(--utrecht-link-focus-background-color,transparent);text-decoration-skip:none;text-decoration-skip-ink:none}.utrecht-link-button--focus-visible,.utrecht-link-button--html-button:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);--_utrecht-link-state-text-decoration:var(
|
|
2
|
+
--utrecht-link-focus-visible-text-decoration,var(--utrecht-link-focus-text-decoration)
|
|
3
|
+
);--_utrecht-link-state-text-decoration-thickness:var(
|
|
4
|
+
--utrecht-link-focus-visible-text-decoration-thickness,var(--utrecht-link-focus-text-decoration-thickness)
|
|
5
|
+
);z-index:var(--utrecht-stack-focus-z-index,1)}.utrecht-link-button--active,.utrecht-link-button--html-button:not(:disabled):active{--_utrecht-link-forced-colors-color:activetext;--_utrecht-link-state-color:var(--utrecht-link-active-color)}.utrecht-link-button--inline{--utrecht-icon-inset-block-start:var(--utrecht-icon-baseline-inset-block-start);min-block-size:auto;min-inline-size:auto;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.utrecht-link-button--pressed{--_utrecht-link-forced-colors-color:activetext;--_utrecht-link-state-color:var(--utrecht-link-active-color)}.utrecht-link-button--html-button{background-color:transparent;border-width:0}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default ".utrecht-link-button{--utrecht-icon-size:var(--utrecht-link-icon-size,1em);color:var(--_utrecht-link-state-color,var(--utrecht-link-color,var(--_utrecht-link-forced-colors-color)));--_utrecht-link-forced-colors-color:linktext;text-decoration-color:var(--_utrecht-link-state-text-decoration-color,var(--utrecht-link-text-decoration-color,currentColor));text-decoration-line:var(--_utrecht-link-state-text-decoration,var(--utrecht-link-text-decoration,underline));text-decoration-skip-ink:all;text-decoration-thickness:max(var(--_utrecht-link-state-text-decoration-thickness,var(--utrecht-link-text-decoration-thickness)),1px);text-underline-offset:var(--utrecht-link-text-underline-offset);--utrecht-icon-size:var(--utrecht-button-icon-size,1em);align-items:center;cursor:pointer;display:inline-flex;font-family:var(--utrecht-button-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-button-font-size,var(--utrecht-document-font-family));font-weight:var(--utrecht-button-font-weight);gap:var(--utrecht-button-icon-gap);inline-size:var(--utrecht-button-inline-size,auto);justify-content:center;line-height:inherit;min-block-size:var(--utrecht-button-min-block-size,44px);min-inline-size:var(--utrecht-button-min-inline-size,44px);padding-block-end:var(--utrecht-button-padding-block-end);padding-block-start:var(--utrecht-button-padding-block-start);padding-inline-end:var(--utrecht-button-padding-inline-end);padding-inline-start:var(--utrecht-button-padding-inline-start);text-transform:var(--utrecht-button-text-transform);-webkit-user-select:none;user-select:none}.utrecht-link-button--hover,.utrecht-link-button--html-button:not(:disabled):hover{--_utrecht-link-forced-colors-color:linktext;--_utrecht-link-state-color:var(--utrecht-link-hover-color);--_utrecht-link-state-text-decoration:var(--utrecht-link-hover-text-decoration);--_utrecht-link-state-text-decoration-thickness:var(--utrecht-link-hover-text-decoration-thickness);text-decoration-skip:none;text-decoration-skip-ink:none}.utrecht-link-button--disabled{--_utrecht-link-forced-colors-color:GrayText;--_utrecht-link-state-color:var(--utrecht-link-placeholder-color);cursor:var(--utrecht-action-disabled-cursor,not-allowed);font-weight:var(--utrecht-link-placeholder-font-weight);text-decoration-line:none}.utrecht-link-button--focus,.utrecht-link-button--html-button:not(:disabled):focus{--_utrecht-link-state-color:var(--utrecht-link-focus-color);background-color:var(--utrecht-link-focus-background-color,transparent);text-decoration-skip:none;text-decoration-skip-ink:none}.utrecht-link-button--focus-visible,.utrecht-link-button--html-button:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);--_utrecht-link-state-text-decoration:var(\n --utrecht-link-focus-visible-text-decoration,var(--utrecht-link-focus-text-decoration)\n );--_utrecht-link-state-text-decoration-thickness:var(\n --utrecht-link-focus-visible-text-decoration-thickness,var(--utrecht-link-focus-text-decoration-thickness)\n );z-index:var(--utrecht-stack-focus-z-index,1)}.utrecht-link-button--active,.utrecht-link-button--html-button:not(:disabled):active{--_utrecht-link-forced-colors-color:activetext;--_utrecht-link-state-color:var(--utrecht-link-active-color)}.utrecht-link-button--inline{--utrecht-icon-inset-block-start:var(--utrecht-icon-baseline-inset-block-start);min-block-size:auto;min-inline-size:auto;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.utrecht-link-button--pressed{--_utrecht-link-forced-colors-color:activetext;--_utrecht-link-state-color:var(--utrecht-link-active-color)}.utrecht-link-button--html-button{background-color:transparent;border-width:0}";
|
package/package.json
CHANGED
|
@@ -1,18 +1,34 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.
|
|
2
|
+
"version": "1.2.0",
|
|
3
3
|
"author": "Community for NL Design System",
|
|
4
4
|
"description": "Link button component for the Municipality of Utrecht based on the NL Design System architecture",
|
|
5
5
|
"license": "EUPL-1.2",
|
|
6
6
|
"name": "@utrecht/link-button-css",
|
|
7
7
|
"files": [
|
|
8
|
-
"dist/"
|
|
8
|
+
"dist/",
|
|
9
|
+
"docs/",
|
|
10
|
+
"src/",
|
|
11
|
+
"*.md"
|
|
9
12
|
],
|
|
10
|
-
"
|
|
13
|
+
"main": "dist/index.css",
|
|
14
|
+
"devDependencies": {
|
|
15
|
+
"@utrecht/focus-ring-css": "2.1.0",
|
|
16
|
+
"@utrecht/link-css": "1.4.0",
|
|
17
|
+
"@utrecht/build-utils-css": "0.0.1"
|
|
18
|
+
},
|
|
11
19
|
"keywords": [
|
|
12
20
|
"nl-design-system"
|
|
13
21
|
],
|
|
14
22
|
"publishConfig": {
|
|
15
23
|
"access": "public"
|
|
16
24
|
},
|
|
17
|
-
"
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git+ssh",
|
|
27
|
+
"url": "git@github.com:nl-design-system/utrecht.git",
|
|
28
|
+
"directory": "components/link-button"
|
|
29
|
+
},
|
|
30
|
+
"scripts": {
|
|
31
|
+
"build": "build-css-package",
|
|
32
|
+
"clean": "rimraf dist"
|
|
33
|
+
}
|
|
18
34
|
}
|
package/src/_mixin.scss
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license EUPL-1.2
|
|
3
|
+
* Copyright (c) 2020-2024 Frameless B.V.
|
|
4
|
+
* Copyright (c) 2021-2024 Gemeente Utrecht
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
@import "~@utrecht/link-css/src/mixin";
|
|
8
|
+
@import "~@utrecht/focus-ring-css/src/mixin";
|
|
9
|
+
|
|
10
|
+
@mixin utrecht-link-button {
|
|
11
|
+
@include utrecht-link;
|
|
12
|
+
@include utrecht-link--any-link;
|
|
13
|
+
|
|
14
|
+
--utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
|
|
15
|
+
|
|
16
|
+
align-items: center;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
display: inline-flex;
|
|
19
|
+
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
20
|
+
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
21
|
+
font-weight: var(--utrecht-button-font-weight);
|
|
22
|
+
gap: var(--utrecht-button-icon-gap);
|
|
23
|
+
inline-size: var(--utrecht-button-inline-size, auto);
|
|
24
|
+
justify-content: center;
|
|
25
|
+
line-height: inherit;
|
|
26
|
+
min-block-size: var(--utrecht-button-min-block-size, 44px);
|
|
27
|
+
min-inline-size: var(--utrecht-button-min-inline-size, 44px);
|
|
28
|
+
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
29
|
+
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
30
|
+
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
31
|
+
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
32
|
+
text-transform: var(--utrecht-button-text-transform);
|
|
33
|
+
-webkit-user-select: none;
|
|
34
|
+
user-select: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@mixin utrecht-link-button--html-button {
|
|
38
|
+
background-color: transparent;
|
|
39
|
+
|
|
40
|
+
/* reset <button> styling */
|
|
41
|
+
border-width: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@mixin utrecht-link-button--pressed {
|
|
45
|
+
/* Copy `active` styles for now.
|
|
46
|
+
Later we can decide to:
|
|
47
|
+
- merge `active` and `pressed` and name the state `pressed`, or:
|
|
48
|
+
- merge `active` and `pressed` and name the state `active`, or:
|
|
49
|
+
- style `pressed` like the link state `current`, or:
|
|
50
|
+
- add `pressed` design tokens
|
|
51
|
+
*/
|
|
52
|
+
@include utrecht-link--active;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@mixin utrecht-link-button--hover {
|
|
56
|
+
@include utrecht-link--hover;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@mixin utrecht-link-button--active {
|
|
60
|
+
@include utrecht-link--active;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@mixin utrecht-link-button--disabled {
|
|
64
|
+
@include utrecht-link--placeholder;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@mixin utrecht-link-button--focus {
|
|
68
|
+
@include utrecht-link--focus;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@mixin utrecht-link-button--focus-visible {
|
|
72
|
+
@include utrecht-link--focus-visible;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@mixin utrecht-link-button--inline {
|
|
76
|
+
--utrecht-icon-inset-block-start: var(--utrecht-icon-baseline-inset-block-start);
|
|
77
|
+
|
|
78
|
+
min-block-size: auto;
|
|
79
|
+
min-inline-size: auto;
|
|
80
|
+
padding-block-end: 0;
|
|
81
|
+
padding-block-start: 0;
|
|
82
|
+
padding-inline-end: 0;
|
|
83
|
+
padding-inline-start: 0;
|
|
84
|
+
}
|
package/src/index.scss
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license EUPL-1.2
|
|
3
|
+
* Copyright (c) 2020-2024 Frameless B.V.
|
|
4
|
+
* Copyright (c) 2021-2024 Gemeente Utrecht
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
@import "./mixin";
|
|
8
|
+
|
|
9
|
+
.utrecht-link-button {
|
|
10
|
+
@include utrecht-link-button;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.utrecht-link-button--hover {
|
|
14
|
+
@include utrecht-link-button--hover;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.utrecht-link-button--disabled {
|
|
18
|
+
@include utrecht-link-button--disabled;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.utrecht-link-button--focus {
|
|
22
|
+
@include utrecht-link-button--focus;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.utrecht-link-button--focus-visible {
|
|
26
|
+
@include utrecht-link-button--focus-visible;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.utrecht-link-button--active {
|
|
30
|
+
@include utrecht-link-button--active;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.utrecht-link-button--inline {
|
|
34
|
+
@include utrecht-link-button--inline;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.utrecht-link-button--pressed {
|
|
38
|
+
@include utrecht-link-button--pressed;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.utrecht-link-button--html-button {
|
|
42
|
+
@include utrecht-link-button--html-button;
|
|
43
|
+
|
|
44
|
+
&:focus-visible {
|
|
45
|
+
@extend .utrecht-link-button--focus-visible;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&:not(:disabled):hover {
|
|
49
|
+
@extend .utrecht-link-button--hover;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&:not(:disabled):focus {
|
|
53
|
+
@extend .utrecht-link-button--focus;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&:not(:disabled):active {
|
|
57
|
+
@extend .utrecht-link-button--active;
|
|
58
|
+
}
|
|
59
|
+
}
|