@navikt/ds-css 3.1.2 → 3.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 +18 -0
- package/config/_mappings.js +5 -0
- package/copybutton.css +129 -0
- package/dist/component/copybutton.css +132 -0
- package/dist/component/copybutton.min.css +1 -0
- package/dist/component/index.css +132 -9
- package/dist/component/index.min.css +2 -2
- package/dist/component/togglegroup.css +25 -8
- package/dist/component/togglegroup.min.css +1 -1
- package/dist/components.css +131 -8
- package/dist/components.min.css +2 -2
- package/dist/global/tokens.css +1 -1
- package/dist/index.css +132 -9
- package/dist/index.min.css +2 -2
- package/index.css +1 -0
- package/package.json +2 -2
- package/toggle-group.css +25 -8
- package/tokens.json +16 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @navikt/ds-css
|
|
2
2
|
|
|
3
|
+
## 3.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#1982](https://github.com/navikt/aksel/pull/1982) [`affcab14c`](https://github.com/navikt/aksel/commit/affcab14c3d536929dfa64a36f5b43f9d0e8c3b7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Ny komponent `<CopyButton />`!
|
|
8
|
+
|
|
9
|
+
- Erstatter `<CopyToClipboard />` fra `@navikt/ds-react-internal`
|
|
10
|
+
- CopyToClipboard er markert som deprecated. Den vil fortsatt fungere, men noen lintere vil kunne ende opp med å klage på den.
|
|
11
|
+
|
|
12
|
+
## 3.1.3
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#1976](https://github.com/navikt/aksel/pull/1976) [`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert utseende for ToggleGroup
|
|
17
|
+
|
|
18
|
+
- Medium og Small er begge 10px lavere
|
|
19
|
+
- Mindre border-radius
|
|
20
|
+
|
|
3
21
|
## 3.1.2
|
|
4
22
|
|
|
5
23
|
## 3.1.1
|
package/config/_mappings.js
CHANGED
|
@@ -63,6 +63,11 @@ const StyleMappings = {
|
|
|
63
63
|
component: "ContentContainer",
|
|
64
64
|
main: "content-container.css",
|
|
65
65
|
},
|
|
66
|
+
{
|
|
67
|
+
component: "CopyButton",
|
|
68
|
+
main: "copybutton.css",
|
|
69
|
+
dependencies: [typoCss],
|
|
70
|
+
},
|
|
66
71
|
{ component: "Detail", main: typoCss },
|
|
67
72
|
{ component: "ErrorMessage", main: typoCss },
|
|
68
73
|
{ component: "ErrorSummary", main: formCss, dependencies: [typoCss] },
|
package/copybutton.css
ADDED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
[data-theme="dark"] .navds-copybutton,
|
|
2
|
+
[data-theme="dark"].navds-copybutton {
|
|
3
|
+
--a-text-action: var(--a-blue-300);
|
|
4
|
+
--a-surface-hover: rgb(214 231 255 /0.13);
|
|
5
|
+
--a-icon-success: rgb(51 170 95 /1);
|
|
6
|
+
--a-text-subtle: rgb(231 240 254 /0.69);
|
|
7
|
+
--a-text-default: rgb(251 252 254 /0.96);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.navds-copybutton {
|
|
11
|
+
--__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
|
|
12
|
+
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
margin: 0;
|
|
15
|
+
text-decoration: none;
|
|
16
|
+
border: none;
|
|
17
|
+
background: none;
|
|
18
|
+
border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
|
|
19
|
+
padding: var(--__ac-copybutton-padding);
|
|
20
|
+
display: grid;
|
|
21
|
+
place-content: center;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.navds-copybutton--small {
|
|
25
|
+
--__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
|
|
26
|
+
|
|
27
|
+
min-height: 2rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.navds-copybutton--icon-only {
|
|
31
|
+
--__ac-copybutton-padding: var(--a-spacing-3);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.navds-copybutton--small.navds-copybutton--icon-only {
|
|
35
|
+
--__ac-copybutton-padding: var(--a-spacing-1);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.navds-copybutton__icon {
|
|
39
|
+
font-size: 1.5rem;
|
|
40
|
+
display: flex;
|
|
41
|
+
margin-left: -4px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.navds-copybutton__icon:only-child {
|
|
45
|
+
margin: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.navds-copybutton:focus-visible {
|
|
49
|
+
outline: none;
|
|
50
|
+
box-shadow: var(--a-shadow-focus);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@supports not selector(:focus-visible) {
|
|
54
|
+
.navds-copybutton:focus {
|
|
55
|
+
outline: none;
|
|
56
|
+
box-shadow: var(--a-shadow-focus);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Variant/action */
|
|
61
|
+
.navds-copybutton--action {
|
|
62
|
+
color: var(--ac-copybutton-action-text, var(--a-text-action));
|
|
63
|
+
background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.navds-copybutton--action:hover {
|
|
67
|
+
color: var(--ac-copybutton-action-hover-text, var(--a-text-action));
|
|
68
|
+
background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.navds-copybutton--action:where(:disabled),
|
|
72
|
+
.navds-copybutton--action:hover:where(:disabled) {
|
|
73
|
+
color: var(--ac-copybutton-action-text, var(--a-text-action));
|
|
74
|
+
background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
|
|
75
|
+
box-shadow: none;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.navds-copybutton--active.navds-copybutton--action {
|
|
79
|
+
color: var(--ac-copybutton-action-active-text, var(--a-icon-success));
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Variant/neutral */
|
|
83
|
+
.navds-copybutton--neutral {
|
|
84
|
+
color: var(--ac-copybutton-neutral-text, var(--a-text-subtle));
|
|
85
|
+
background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.navds-copybutton--neutral:hover {
|
|
89
|
+
color: var(--ac-copybutton-neutral-hover-text, var(--a-text-default));
|
|
90
|
+
background-color: var(--ac-copybutton-neutral-hover-bg, var(--a-surface-hover));
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
|
|
94
|
+
.navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
|
|
95
|
+
color: var(--ac-copybutton-neutral-text, var(--a-text-default));
|
|
96
|
+
background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
|
|
97
|
+
box-shadow: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.navds-copybutton--active.navds-copybutton--neutral {
|
|
101
|
+
color: var(--ac-copybutton-neutral-active-text, var(--a-text-default));
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.navds-copybutton__content {
|
|
105
|
+
display: inline-flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
justify-content: center;
|
|
108
|
+
gap: var(--a-spacing-2);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.navds-copybutton--active > .navds-copybutton__content {
|
|
112
|
+
animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
@keyframes akselCopyButtonAnimation {
|
|
116
|
+
0% {
|
|
117
|
+
opacity: 0.4;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
100% {
|
|
121
|
+
opacity: 1;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* Disabled */
|
|
126
|
+
.navds-copybutton:where(:disabled) {
|
|
127
|
+
cursor: not-allowed;
|
|
128
|
+
opacity: 0.3;
|
|
129
|
+
}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
[data-theme="dark"] .navds-copybutton,
|
|
2
|
+
[data-theme="dark"].navds-copybutton {
|
|
3
|
+
--a-text-action: var(--a-blue-300);
|
|
4
|
+
--a-surface-hover: rgb(214 231 255 /0.13);
|
|
5
|
+
--a-icon-success: rgb(51 170 95 /1);
|
|
6
|
+
--a-text-subtle: rgb(231 240 254 /0.69);
|
|
7
|
+
--a-text-default: rgb(251 252 254 /0.96);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.navds-copybutton {
|
|
11
|
+
--__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
|
|
12
|
+
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
margin: 0;
|
|
15
|
+
text-decoration: none;
|
|
16
|
+
border: none;
|
|
17
|
+
background: none;
|
|
18
|
+
border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
|
|
19
|
+
padding: var(--__ac-copybutton-padding);
|
|
20
|
+
display: grid;
|
|
21
|
+
place-content: center;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.navds-copybutton--small {
|
|
25
|
+
--__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
|
|
26
|
+
|
|
27
|
+
min-height: 2rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.navds-copybutton--icon-only {
|
|
31
|
+
--__ac-copybutton-padding: var(--a-spacing-3);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.navds-copybutton--small.navds-copybutton--icon-only {
|
|
35
|
+
--__ac-copybutton-padding: var(--a-spacing-1);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.navds-copybutton__icon {
|
|
39
|
+
font-size: 1.5rem;
|
|
40
|
+
display: flex;
|
|
41
|
+
margin-left: -4px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.navds-copybutton__icon:only-child {
|
|
45
|
+
margin: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.navds-copybutton:focus-visible {
|
|
49
|
+
outline: none;
|
|
50
|
+
box-shadow: var(--a-shadow-focus);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@supports not selector(:focus-visible) {
|
|
54
|
+
.navds-copybutton:focus {
|
|
55
|
+
outline: none;
|
|
56
|
+
box-shadow: var(--a-shadow-focus);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Variant/action */
|
|
61
|
+
|
|
62
|
+
.navds-copybutton--action {
|
|
63
|
+
color: var(--ac-copybutton-action-text, var(--a-text-action));
|
|
64
|
+
background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.navds-copybutton--action:hover {
|
|
68
|
+
color: var(--ac-copybutton-action-hover-text, var(--a-text-action));
|
|
69
|
+
background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.navds-copybutton--action:where(:disabled),
|
|
73
|
+
.navds-copybutton--action:hover:where(:disabled) {
|
|
74
|
+
color: var(--ac-copybutton-action-text, var(--a-text-action));
|
|
75
|
+
background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
|
|
76
|
+
box-shadow: none;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.navds-copybutton--active.navds-copybutton--action {
|
|
80
|
+
color: var(--ac-copybutton-action-active-text, var(--a-icon-success));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Variant/neutral */
|
|
84
|
+
|
|
85
|
+
.navds-copybutton--neutral {
|
|
86
|
+
color: var(--ac-copybutton-neutral-text, var(--a-text-subtle));
|
|
87
|
+
background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.navds-copybutton--neutral:hover {
|
|
91
|
+
color: var(--ac-copybutton-neutral-hover-text, var(--a-text-default));
|
|
92
|
+
background-color: var(--ac-copybutton-neutral-hover-bg, var(--a-surface-hover));
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
|
|
96
|
+
.navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
|
|
97
|
+
color: var(--ac-copybutton-neutral-text, var(--a-text-default));
|
|
98
|
+
background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
|
|
99
|
+
box-shadow: none;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.navds-copybutton--active.navds-copybutton--neutral {
|
|
103
|
+
color: var(--ac-copybutton-neutral-active-text, var(--a-text-default));
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.navds-copybutton__content {
|
|
107
|
+
display: inline-flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
gap: var(--a-spacing-2);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.navds-copybutton--active > .navds-copybutton__content {
|
|
114
|
+
animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@keyframes akselCopyButtonAnimation {
|
|
118
|
+
0% {
|
|
119
|
+
opacity: 0.4;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
100% {
|
|
123
|
+
opacity: 1;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* Disabled */
|
|
128
|
+
|
|
129
|
+
.navds-copybutton:where(:disabled) {
|
|
130
|
+
cursor: not-allowed;
|
|
131
|
+
opacity: 0.3;
|
|
132
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
[data-theme=dark] .navds-copybutton,[data-theme=dark].navds-copybutton{--a-text-action:var(--a-blue-300);--a-surface-hover:rgba(214,231,255,.13);--a-icon-success:#33aa5f;--a-text-subtle:rgba(231,240,254,.69);--a-text-default:rgba(251,252,254,.96)}.navds-copybutton{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-5);background:none;border:none;border-radius:var(--ac-copybutton-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;margin:0;padding:var(--__ac-copybutton-padding);place-content:center;text-decoration:none}.navds-copybutton--small{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-3);min-height:2rem}.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-3)}.navds-copybutton--small.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-1)}.navds-copybutton__icon{display:flex;font-size:1.5rem;margin-left:-4px}.navds-copybutton__icon:only-child{margin:0}.navds-copybutton:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-copybutton:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-copybutton--action{background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));color:var(--ac-copybutton-action-text,var(--a-text-action))}.navds-copybutton--action:hover{background-color:var(--ac-copybutton-action-hover-bg,var(--a-surface-hover));color:var(--ac-copybutton-action-hover-text,var(--a-text-action))}.navds-copybutton--action:hover:where(:disabled),.navds-copybutton--action:where(:disabled){background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-action-text,var(--a-text-action))}.navds-copybutton--active.navds-copybutton--action{color:var(--ac-copybutton-action-active-text,var(--a-icon-success))}.navds-copybutton--neutral{background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));color:var(--ac-copybutton-neutral-text,var(--a-text-subtle))}.navds-copybutton--neutral:hover{background-color:var(--ac-copybutton-neutral-hover-bg,var(--a-surface-hover));color:var(--ac-copybutton-neutral-hover-text,var(--a-text-default))}.navds-copybutton--neutral:hover:where(:disabled,.navds-copybutton--disabled),.navds-copybutton--neutral:where(:disabled,.navds-copybutton--disabled){background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-neutral-text,var(--a-text-default))}.navds-copybutton--active.navds-copybutton--neutral{color:var(--ac-copybutton-neutral-active-text,var(--a-text-default))}.navds-copybutton__content{align-items:center;display:inline-flex;gap:var(--a-spacing-2);justify-content:center}.navds-copybutton--active>.navds-copybutton__content{-webkit-animation:var(--ac-copybutton-animation,akselCopyButtonAnimation .4s linear);animation:var(--ac-copybutton-animation,akselCopyButtonAnimation .4s linear)}@-webkit-keyframes akselCopyButtonAnimation{0%{opacity:.4}to{opacity:1}}@keyframes akselCopyButtonAnimation{0%{opacity:.4}to{opacity:1}}.navds-copybutton:where(:disabled){cursor:not-allowed;opacity:.3}
|
package/dist/component/index.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
/**
|
|
3
3
|
* Do not edit directly
|
|
4
|
-
* Generated on
|
|
4
|
+
* Generated on Tue, 16 May 2023 11:17:28 GMT
|
|
5
5
|
*/
|
|
6
6
|
:root, :host {
|
|
7
7
|
--a-spacing-05: 0.125rem;
|
|
@@ -1882,6 +1882,115 @@ body,
|
|
|
1882
1882
|
.navds-chips--small .navds-chips--icon-left {
|
|
1883
1883
|
padding-left: 0.375rem;
|
|
1884
1884
|
}
|
|
1885
|
+
[data-theme="dark"] .navds-copybutton,
|
|
1886
|
+
[data-theme="dark"].navds-copybutton {
|
|
1887
|
+
--a-text-action: var(--a-blue-300);
|
|
1888
|
+
--a-surface-hover: rgb(214 231 255 /0.13);
|
|
1889
|
+
--a-icon-success: rgb(51 170 95 /1);
|
|
1890
|
+
--a-text-subtle: rgb(231 240 254 /0.69);
|
|
1891
|
+
--a-text-default: rgb(251 252 254 /0.96);
|
|
1892
|
+
}
|
|
1893
|
+
.navds-copybutton {
|
|
1894
|
+
--__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
|
|
1895
|
+
|
|
1896
|
+
cursor: pointer;
|
|
1897
|
+
margin: 0;
|
|
1898
|
+
text-decoration: none;
|
|
1899
|
+
border: none;
|
|
1900
|
+
background: none;
|
|
1901
|
+
border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
|
|
1902
|
+
padding: var(--__ac-copybutton-padding);
|
|
1903
|
+
display: grid;
|
|
1904
|
+
place-content: center;
|
|
1905
|
+
}
|
|
1906
|
+
.navds-copybutton--small {
|
|
1907
|
+
--__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
|
|
1908
|
+
|
|
1909
|
+
min-height: 2rem;
|
|
1910
|
+
}
|
|
1911
|
+
.navds-copybutton--icon-only {
|
|
1912
|
+
--__ac-copybutton-padding: var(--a-spacing-3);
|
|
1913
|
+
}
|
|
1914
|
+
.navds-copybutton--small.navds-copybutton--icon-only {
|
|
1915
|
+
--__ac-copybutton-padding: var(--a-spacing-1);
|
|
1916
|
+
}
|
|
1917
|
+
.navds-copybutton__icon {
|
|
1918
|
+
font-size: 1.5rem;
|
|
1919
|
+
display: flex;
|
|
1920
|
+
margin-left: -4px;
|
|
1921
|
+
}
|
|
1922
|
+
.navds-copybutton__icon:only-child {
|
|
1923
|
+
margin: 0;
|
|
1924
|
+
}
|
|
1925
|
+
.navds-copybutton:focus-visible {
|
|
1926
|
+
outline: none;
|
|
1927
|
+
box-shadow: var(--a-shadow-focus);
|
|
1928
|
+
}
|
|
1929
|
+
@supports not selector(:focus-visible) {
|
|
1930
|
+
.navds-copybutton:focus {
|
|
1931
|
+
outline: none;
|
|
1932
|
+
box-shadow: var(--a-shadow-focus);
|
|
1933
|
+
}
|
|
1934
|
+
}
|
|
1935
|
+
/* Variant/action */
|
|
1936
|
+
.navds-copybutton--action {
|
|
1937
|
+
color: var(--ac-copybutton-action-text, var(--a-text-action));
|
|
1938
|
+
background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
|
|
1939
|
+
}
|
|
1940
|
+
.navds-copybutton--action:hover {
|
|
1941
|
+
color: var(--ac-copybutton-action-hover-text, var(--a-text-action));
|
|
1942
|
+
background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
|
|
1943
|
+
}
|
|
1944
|
+
.navds-copybutton--action:where(:disabled),
|
|
1945
|
+
.navds-copybutton--action:hover:where(:disabled) {
|
|
1946
|
+
color: var(--ac-copybutton-action-text, var(--a-text-action));
|
|
1947
|
+
background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
|
|
1948
|
+
box-shadow: none;
|
|
1949
|
+
}
|
|
1950
|
+
.navds-copybutton--active.navds-copybutton--action {
|
|
1951
|
+
color: var(--ac-copybutton-action-active-text, var(--a-icon-success));
|
|
1952
|
+
}
|
|
1953
|
+
/* Variant/neutral */
|
|
1954
|
+
.navds-copybutton--neutral {
|
|
1955
|
+
color: var(--ac-copybutton-neutral-text, var(--a-text-subtle));
|
|
1956
|
+
background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
|
|
1957
|
+
}
|
|
1958
|
+
.navds-copybutton--neutral:hover {
|
|
1959
|
+
color: var(--ac-copybutton-neutral-hover-text, var(--a-text-default));
|
|
1960
|
+
background-color: var(--ac-copybutton-neutral-hover-bg, var(--a-surface-hover));
|
|
1961
|
+
}
|
|
1962
|
+
.navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
|
|
1963
|
+
.navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
|
|
1964
|
+
color: var(--ac-copybutton-neutral-text, var(--a-text-default));
|
|
1965
|
+
background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
|
|
1966
|
+
box-shadow: none;
|
|
1967
|
+
}
|
|
1968
|
+
.navds-copybutton--active.navds-copybutton--neutral {
|
|
1969
|
+
color: var(--ac-copybutton-neutral-active-text, var(--a-text-default));
|
|
1970
|
+
}
|
|
1971
|
+
.navds-copybutton__content {
|
|
1972
|
+
display: inline-flex;
|
|
1973
|
+
align-items: center;
|
|
1974
|
+
justify-content: center;
|
|
1975
|
+
gap: var(--a-spacing-2);
|
|
1976
|
+
}
|
|
1977
|
+
.navds-copybutton--active > .navds-copybutton__content {
|
|
1978
|
+
animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
|
|
1979
|
+
}
|
|
1980
|
+
@keyframes akselCopyButtonAnimation {
|
|
1981
|
+
0% {
|
|
1982
|
+
opacity: 0.4;
|
|
1983
|
+
}
|
|
1984
|
+
|
|
1985
|
+
100% {
|
|
1986
|
+
opacity: 1;
|
|
1987
|
+
}
|
|
1988
|
+
}
|
|
1989
|
+
/* Disabled */
|
|
1990
|
+
.navds-copybutton:where(:disabled) {
|
|
1991
|
+
cursor: not-allowed;
|
|
1992
|
+
opacity: 0.3;
|
|
1993
|
+
}
|
|
1885
1994
|
.navds-expansioncard {
|
|
1886
1995
|
--__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
|
|
1887
1996
|
--__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
|
|
@@ -3673,7 +3782,7 @@ body,
|
|
|
3673
3782
|
gap: var(--a-spacing-2);
|
|
3674
3783
|
}
|
|
3675
3784
|
.navds-toggle-group {
|
|
3676
|
-
border-radius:
|
|
3785
|
+
border-radius: var(--a-border-radius-medium);
|
|
3677
3786
|
background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
|
|
3678
3787
|
box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
|
|
3679
3788
|
padding: calc(var(--a-spacing-1) + 1px);
|
|
@@ -3682,6 +3791,9 @@ body,
|
|
|
3682
3791
|
grid-auto-flow: column;
|
|
3683
3792
|
grid-auto-columns: 1fr;
|
|
3684
3793
|
}
|
|
3794
|
+
.navds-toggle-group--small {
|
|
3795
|
+
padding: calc(var(--a-spacing-05) + 1px);
|
|
3796
|
+
}
|
|
3685
3797
|
.navds-toggle-group--neutral {
|
|
3686
3798
|
background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
|
|
3687
3799
|
box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
|
|
@@ -3690,14 +3802,23 @@ body,
|
|
|
3690
3802
|
display: inline-flex;
|
|
3691
3803
|
align-items: center;
|
|
3692
3804
|
justify-content: center;
|
|
3693
|
-
padding: var(--a-spacing-3);
|
|
3694
|
-
min-height:
|
|
3805
|
+
padding: var(--a-spacing-1) var(--a-spacing-3);
|
|
3806
|
+
min-height: 38px;
|
|
3695
3807
|
border: none;
|
|
3696
3808
|
cursor: pointer;
|
|
3697
3809
|
background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
|
|
3698
3810
|
color: var(--ac-toggle-group-button-text, var(--a-text-default));
|
|
3699
|
-
border-radius:
|
|
3811
|
+
border-radius: 2px;
|
|
3700
3812
|
min-width: fit-content;
|
|
3813
|
+
font-weight: var(--a-font-weight-regular);
|
|
3814
|
+
}
|
|
3815
|
+
.navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
|
|
3816
|
+
border-start-start-radius: 1px;
|
|
3817
|
+
border-end-start-radius: 1px;
|
|
3818
|
+
}
|
|
3819
|
+
.navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
|
|
3820
|
+
border-start-end-radius: 1px;
|
|
3821
|
+
border-end-end-radius: 1px;
|
|
3701
3822
|
}
|
|
3702
3823
|
.navds-toggle-group--neutral > .navds-toggle-group__button {
|
|
3703
3824
|
background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
|
|
@@ -3705,7 +3826,7 @@ body,
|
|
|
3705
3826
|
}
|
|
3706
3827
|
.navds-toggle-group__button:hover {
|
|
3707
3828
|
background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
|
|
3708
|
-
color: var(--ac-toggle-group-button-hover-text, var(--a-text-
|
|
3829
|
+
color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
|
|
3709
3830
|
}
|
|
3710
3831
|
.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
|
|
3711
3832
|
background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
|
|
@@ -3743,6 +3864,7 @@ body,
|
|
|
3743
3864
|
display: flex;
|
|
3744
3865
|
align-items: center;
|
|
3745
3866
|
gap: var(--a-spacing-2);
|
|
3867
|
+
font-weight: inherit;
|
|
3746
3868
|
}
|
|
3747
3869
|
.navds-toggle-group__button-inner > * {
|
|
3748
3870
|
flex-shrink: 0;
|
|
@@ -3751,15 +3873,16 @@ body,
|
|
|
3751
3873
|
.navds-toggle-group__button[aria-checked="true"] {
|
|
3752
3874
|
background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
|
|
3753
3875
|
color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
|
|
3876
|
+
font-weight: var(--a-font-weight-bold);
|
|
3754
3877
|
}
|
|
3755
3878
|
.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
|
|
3756
3879
|
.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
|
|
3757
|
-
background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
|
|
3880
|
+
background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
|
|
3758
3881
|
color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
|
|
3759
3882
|
}
|
|
3760
3883
|
.navds-toggle-group--small > .navds-toggle-group__button {
|
|
3761
|
-
padding:
|
|
3762
|
-
min-height:
|
|
3884
|
+
padding: var(--a-spacing-05) var(--a-spacing-3);
|
|
3885
|
+
min-height: 26px;
|
|
3763
3886
|
min-width: fit-content;
|
|
3764
3887
|
}
|
|
3765
3888
|
.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
|