@navikt/ds-css 5.6.4 → 5.7.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.
Files changed (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/copybutton.css +41 -3
  3. package/dist/component/copybutton.css +41 -3
  4. package/dist/component/copybutton.min.css +1 -1
  5. package/dist/component/index.css +36 -4
  6. package/dist/component/index.min.css +1 -1
  7. package/dist/components.css +41 -3
  8. package/dist/components.min.css +1 -1
  9. package/dist/global/tokens.css +1 -1
  10. package/dist/index.css +36 -4
  11. package/dist/index.min.css +1 -1
  12. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 5.7.0
4
+
5
+ ### Patch Changes
6
+
7
+ - :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))
8
+
9
+ ## 5.6.5
10
+
3
11
  ## 5.6.4
4
12
 
5
13
  ## 5.6.3
package/copybutton.css CHANGED
@@ -15,7 +15,7 @@
15
15
  }
16
16
 
17
17
  .navds-copybutton {
18
- --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
18
+ --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);
19
19
 
20
20
  cursor: pointer;
21
21
  margin: 0;
@@ -28,18 +28,30 @@
28
28
  place-content: center;
29
29
  }
30
30
 
31
+ .navds-copybutton--icon-right {
32
+ --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
33
+ }
34
+
31
35
  .navds-copybutton--small {
32
- --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
36
+ --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);
33
37
 
34
38
  min-height: 2rem;
35
39
  }
36
40
 
41
+ .navds-copybutton--small.navds-copybutton--icon-right {
42
+ --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3);
43
+ }
44
+
37
45
  .navds-copybutton--xsmall {
38
- --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2);
46
+ --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);
39
47
 
40
48
  min-height: 1.5rem;
41
49
  }
42
50
 
51
+ .navds-copybutton--xsmall.navds-copybutton--icon-right {
52
+ --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2);
53
+ }
54
+
43
55
  .navds-copybutton--icon-only {
44
56
  --__ac-copybutton-padding: var(--a-spacing-3);
45
57
  }
@@ -73,6 +85,28 @@
73
85
  margin: 0;
74
86
  }
75
87
 
88
+ .navds-copybutton--active .navds-copybutton__icon {
89
+ animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.215, 0.61, 0.355, 1);
90
+ }
91
+
92
+ @keyframes akselCopyButtonIconAnimation {
93
+ 8% {
94
+ transform: translateY(0);
95
+ }
96
+
97
+ 17% {
98
+ transform: translateY(-10%);
99
+ }
100
+
101
+ 25% {
102
+ transform: translateY(2%);
103
+ }
104
+
105
+ 30% {
106
+ transform: translateY(0);
107
+ }
108
+ }
109
+
76
110
  :where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
77
111
  margin: -0.125rem;
78
112
  }
@@ -140,6 +174,10 @@
140
174
  gap: var(--a-spacing-2);
141
175
  }
142
176
 
177
+ .navds-copybutton--small > .navds-copybutton__content {
178
+ gap: 0.375rem;
179
+ }
180
+
143
181
  .navds-copybutton--xsmall > .navds-copybutton__content {
144
182
  gap: var(--a-spacing-1);
145
183
  }
package/dist/component/copybutton.css CHANGED
@@ -15,7 +15,7 @@
15
15
  }
16
16
 
17
17
  .navds-copybutton {
18
- --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
18
+ --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);
19
19
 
20
20
  cursor: pointer;
21
21
  margin: 0;
@@ -28,18 +28,30 @@
28
28
  place-content: center;
29
29
  }
30
30
 
31
+ .navds-copybutton--icon-right {
32
+ --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
33
+ }
34
+
31
35
  .navds-copybutton--small {
32
- --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
36
+ --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);
33
37
 
34
38
  min-height: 2rem;
35
39
  }
36
40
 
41
+ .navds-copybutton--small.navds-copybutton--icon-right {
42
+ --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3);
43
+ }
44
+
37
45
  .navds-copybutton--xsmall {
38
- --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2);
46
+ --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);
39
47
 
40
48
  min-height: 1.5rem;
41
49
  }
42
50
 
51
+ .navds-copybutton--xsmall.navds-copybutton--icon-right {
52
+ --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2);
53
+ }
54
+
43
55
  .navds-copybutton--icon-only {
44
56
  --__ac-copybutton-padding: var(--a-spacing-3);
45
57
  }
@@ -73,6 +85,28 @@
73
85
  margin: 0;
74
86
  }
75
87
 
88
+ .navds-copybutton--active .navds-copybutton__icon {
89
+ animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.215, 0.61, 0.355, 1);
90
+ }
91
+
92
+ @keyframes akselCopyButtonIconAnimation {
93
+ 8% {
94
+ transform: translateY(0);
95
+ }
96
+
97
+ 17% {
98
+ transform: translateY(-10%);
99
+ }
100
+
101
+ 25% {
102
+ transform: translateY(2%);
103
+ }
104
+
105
+ 30% {
106
+ transform: translateY(0);
107
+ }
108
+ }
109
+
76
110
  :where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
77
111
  margin: -0.125rem;
78
112
  }
@@ -142,6 +176,10 @@
142
176
  gap: var(--a-spacing-2);
143
177
  }
144
178
 
179
+ .navds-copybutton--small > .navds-copybutton__content {
180
+ gap: 0.375rem;
181
+ }
182
+
145
183
  .navds-copybutton--xsmall > .navds-copybutton__content {
146
184
  gap: var(--a-spacing-1);
147
185
  }
package/dist/component/copybutton.min.css CHANGED
@@ -1 +1 @@
1
- [data-theme=dark]{--__ac-copybutton-action-text:var(--a-blue-300);--__ac-copybutton-bg-hover:rgba(214,231,255,.13);--__ac-copybutton-icon-success:#33aa5f;--__ac-copybutton-neutral-text:rgba(231,240,254,.69);--__ac-copybutton-text:rgba(251,252,254,.96)}[data-theme=light]{--__ac-copybutton-action-text:initial;--__ac-copybutton-bg-hover:initial;--__ac-copybutton-icon-success:initial;--__ac-copybutton-neutral-text:initial;--__ac-copybutton-text:initial}.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--xsmall{--__ac-copybutton-padding:var(--a-spacing-05) var(--a-spacing-2);min-height:1.5rem}.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--xsmall.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-05)}.navds-copybutton--xsmall .navds-copybutton__icon{font-size:1.25rem}.navds-copybutton__icon{display:flex;font-size:1.5rem}.navds-copybutton__icon:first-of-type{margin-left:-.25rem}.navds-copybutton__icon:last-of-type{margin-right:-.25rem}.navds-copybutton__icon:only-child{margin:0}:where(.navds-copybutton--small,.navds-copybutton--xsmall):where(:not(:only-child)){margin:-.125rem}.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(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--action:hover{background-color:var(--ac-copybutton-action-hover-bg,var(--__ac-copybutton-bg-hover,var(--a-surface-hover)));color:var(--ac-copybutton-action-hover-text,var(--__ac-copybutton-action-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(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--active.navds-copybutton--action{color:var(--ac-copybutton-action-active-text,var(--__ac-copybutton-icon-success,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(--__ac-copybutton-neutral-text,var(--a-text-subtle)))}.navds-copybutton--neutral:hover{background-color:var(--ac-copybutton-neutral-hover-bg,var(--__ac-copybutton-bg-hover,var(--a-surface-hover)));color:var(--ac-copybutton-neutral-hover-text,var(--__ac-copybutton-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(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton--active.navds-copybutton--neutral{color:var(--ac-copybutton-neutral-active-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton__content{align-items:center;display:inline-flex;gap:var(--a-spacing-2);justify-content:center}.navds-copybutton--xsmall>.navds-copybutton__content{gap:var(--a-spacing-1)}.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}
1
+ [data-theme=dark]{--__ac-copybutton-action-text:var(--a-blue-300);--__ac-copybutton-bg-hover:rgba(214,231,255,.13);--__ac-copybutton-icon-success:#33aa5f;--__ac-copybutton-neutral-text:rgba(231,240,254,.69);--__ac-copybutton-text:rgba(251,252,254,.96)}[data-theme=light]{--__ac-copybutton-action-text:initial;--__ac-copybutton-bg-hover:initial;--__ac-copybutton-icon-success:initial;--__ac-copybutton-neutral-text:initial;--__ac-copybutton-text:initial}.navds-copybutton{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);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--icon-right{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5)}.navds-copybutton--small{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);min-height:2rem}.navds-copybutton--small.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3)}.navds-copybutton--xsmall{--__ac-copybutton-padding:var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);min-height:1.5rem}.navds-copybutton--xsmall.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2)}.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--xsmall.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-05)}.navds-copybutton--xsmall .navds-copybutton__icon{font-size:1.25rem}.navds-copybutton__icon{display:flex;font-size:1.5rem}.navds-copybutton__icon:first-of-type{margin-left:-.25rem}.navds-copybutton__icon:last-of-type{margin-right:-.25rem}.navds-copybutton__icon:only-child{margin:0}.navds-copybutton--active .navds-copybutton__icon{-webkit-animation:akselCopyButtonIconAnimation 2s cubic-bezier(.215,.61,.355,1);animation:akselCopyButtonIconAnimation 2s cubic-bezier(.215,.61,.355,1)}@-webkit-keyframes akselCopyButtonIconAnimation{8%{-webkit-transform:translateY(0);transform:translateY(0)}17%{-webkit-transform:translateY(-10%);transform:translateY(-10%)}25%{-webkit-transform:translateY(2%);transform:translateY(2%)}30%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes akselCopyButtonIconAnimation{8%{-webkit-transform:translateY(0);transform:translateY(0)}17%{-webkit-transform:translateY(-10%);transform:translateY(-10%)}25%{-webkit-transform:translateY(2%);transform:translateY(2%)}30%{-webkit-transform:translateY(0);transform:translateY(0)}}:where(.navds-copybutton--small,.navds-copybutton--xsmall):where(:not(:only-child)){margin:-.125rem}.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(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--action:hover{background-color:var(--ac-copybutton-action-hover-bg,var(--__ac-copybutton-bg-hover,var(--a-surface-hover)));color:var(--ac-copybutton-action-hover-text,var(--__ac-copybutton-action-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(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--active.navds-copybutton--action{color:var(--ac-copybutton-action-active-text,var(--__ac-copybutton-icon-success,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(--__ac-copybutton-neutral-text,var(--a-text-subtle)))}.navds-copybutton--neutral:hover{background-color:var(--ac-copybutton-neutral-hover-bg,var(--__ac-copybutton-bg-hover,var(--a-surface-hover)));color:var(--ac-copybutton-neutral-hover-text,var(--__ac-copybutton-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(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton--active.navds-copybutton--neutral{color:var(--ac-copybutton-neutral-active-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton__content{align-items:center;display:inline-flex;gap:var(--a-spacing-2);justify-content:center}.navds-copybutton--small>.navds-copybutton__content{gap:.375rem}.navds-copybutton--xsmall>.navds-copybutton__content{gap:var(--a-spacing-1)}.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 Mon, 09 Oct 2023 11:21:26 GMT
4
+ * Generated on Fri, 13 Oct 2023 08:12:47 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-05: 0.125rem;
@@ -2390,7 +2390,7 @@ body,
2390
2390
  padding-right: var(--a-spacing-05);
2391
2391
  }
2392
2392
  .navds-copybutton {
2393
- --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
2393
+ --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);
2394
2394
 
2395
2395
  cursor: pointer;
2396
2396
  margin: 0;
@@ -2402,16 +2402,25 @@ body,
2402
2402
  display: grid;
2403
2403
  place-content: center;
2404
2404
  }
2405
+ .navds-copybutton--icon-right {
2406
+ --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
2407
+ }
2405
2408
  .navds-copybutton--small {
2406
- --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
2409
+ --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);
2407
2410
 
2408
2411
  min-height: 2rem;
2409
2412
  }
2413
+ .navds-copybutton--small.navds-copybutton--icon-right {
2414
+ --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3);
2415
+ }
2410
2416
  .navds-copybutton--xsmall {
2411
- --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2);
2417
+ --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);
2412
2418
 
2413
2419
  min-height: 1.5rem;
2414
2420
  }
2421
+ .navds-copybutton--xsmall.navds-copybutton--icon-right {
2422
+ --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2);
2423
+ }
2415
2424
  .navds-copybutton--icon-only {
2416
2425
  --__ac-copybutton-padding: var(--a-spacing-3);
2417
2426
  }
@@ -2437,6 +2446,26 @@ body,
2437
2446
  .navds-copybutton__icon:only-child {
2438
2447
  margin: 0;
2439
2448
  }
2449
+ .navds-copybutton--active .navds-copybutton__icon {
2450
+ animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.215, 0.61, 0.355, 1);
2451
+ }
2452
+ @keyframes akselCopyButtonIconAnimation {
2453
+ 8% {
2454
+ transform: translateY(0);
2455
+ }
2456
+
2457
+ 17% {
2458
+ transform: translateY(-10%);
2459
+ }
2460
+
2461
+ 25% {
2462
+ transform: translateY(2%);
2463
+ }
2464
+
2465
+ 30% {
2466
+ transform: translateY(0);
2467
+ }
2468
+ }
2440
2469
  :where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
2441
2470
  margin: -0.125rem;
2442
2471
  }
@@ -2492,6 +2521,9 @@ body,
2492
2521
  justify-content: center;
2493
2522
  gap: var(--a-spacing-2);
2494
2523
  }
2524
+ .navds-copybutton--small > .navds-copybutton__content {
2525
+ gap: 0.375rem;
2526
+ }
2495
2527
  .navds-copybutton--xsmall > .navds-copybutton__content {
2496
2528
  gap: var(--a-spacing-1);
2497
2529
  }