@navikt/ds-css 6.7.0 → 6.7.1

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 (15) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/component/index.css +11 -8
  3. package/dist/component/index.min.css +1 -1
  4. package/dist/component/progressbar.css +7 -5
  5. package/dist/component/progressbar.min.css +1 -1
  6. package/dist/component/readmore.css +3 -2
  7. package/dist/component/readmore.min.css +1 -1
  8. package/dist/components.css +10 -7
  9. package/dist/components.min.css +1 -1
  10. package/dist/global/tokens.css +1 -1
  11. package/dist/index.css +11 -8
  12. package/dist/index.min.css +1 -1
  13. package/package.json +2 -2
  14. package/progress-bar.css +7 -5
  15. package/read-more.css +3 -2
package/dist/component/progressbar.css CHANGED
@@ -39,15 +39,14 @@
39
39
  }
40
40
 
41
41
  .navds-progress-bar__foreground--indeterminate {
42
- --__ac-progress-bar-duration: initial;
43
- --__ac-progress-bar-delay: initial;
42
+ --__ac-progress-bar-simulated: initial;
44
43
 
45
44
  animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
46
45
  animation-timing-function: ease-in-out, ease-in-out;
47
- animation-duration: var(--__ac-progress-bar-duration), 2500ms;
46
+ animation-duration: var(--__ac-progress-bar-simulated), 2500ms;
48
47
  animation-fill-mode: forwards, none;
49
48
  animation-iteration-count: 1, infinite;
50
- animation-delay: 0s, calc((var(--__ac-progress-bar-duration) + var(--__ac-progress-bar-delay)));
49
+ animation-delay: 0s, var(--__ac-progress-bar-simulated);
51
50
  }
52
51
 
53
52
  /* navds-progress-bar-indeterminate wave animation */
@@ -86,11 +85,14 @@
86
85
  transform: translateX(-40%);
87
86
  }
88
87
 
89
- 40%,
90
88
  50% {
91
89
  transform: translateX(-20%);
92
90
  }
93
91
 
92
+ 75% {
93
+ transform: translateX(-10%);
94
+ }
95
+
94
96
  100% {
95
97
  transform: translateX(-10%);
96
98
  }
package/dist/component/progressbar.min.css CHANGED
@@ -1 +1 @@
1
- .navds-progress-bar{background:var(--a-surface-neutral-subtle);border-radius:var(--a-border-radius-full);box-shadow:inset 0 1px 3px 0 #00000026,inset 0 0 1px 0 #0003;overflow:hidden;position:relative}.navds-progress-bar--small{height:12px;min-width:12px}.navds-progress-bar--medium{height:16px;min-width:16px}.navds-progress-bar--large{height:24px;min-width:24px}.navds-progress-bar__foreground{--__ac-progress-bar-translate:initial;background:var(--ac-progress-bar-fg,var(--a-surface-alt-3));border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform:translateX(var(--__ac-progress-bar-translate));transform-origin:left;transition:transform .2s ease;width:100%}.navds-progress-bar__foreground--indeterminate{--__ac-progress-bar-duration:initial;--__ac-progress-bar-delay:initial;animation-delay:0s,calc(var(--__ac-progress-bar-duration) + var(--__ac-progress-bar-delay));animation-duration:var(--__ac-progress-bar-duration),2.5s;animation-fill-mode:forwards,none;animation-iteration-count:1,infinite;animation-name:navds-progress-bar-indeterminate-grow,navds-progress-bar-indeterminate;animation-timing-function:ease-in-out,ease-in-out}@keyframes navds-progress-bar-indeterminate{0%{left:-50%;transform:translateX(0);width:50%}50%{animation-direction:reverse;left:100%;transform:translateX(0);width:50%}to{left:-50%;transform:translateX(0);width:50%}}@keyframes navds-progress-bar-indeterminate-grow{0%{transform:translateX(-100%)}20%{transform:translateX(-80%)}30%{transform:translateX(-40%)}40%,50%{transform:translateX(-20%)}to{transform:translateX(-10%)}}@media (forced-colors:active){.navds-progress-bar__foreground{background:Highlight}.navds-progress-bar{outline:1px solid #0000}}
1
+ .navds-progress-bar{background:var(--a-surface-neutral-subtle);border-radius:var(--a-border-radius-full);box-shadow:inset 0 1px 3px 0 #00000026,inset 0 0 1px 0 #0003;overflow:hidden;position:relative}.navds-progress-bar--small{height:12px;min-width:12px}.navds-progress-bar--medium{height:16px;min-width:16px}.navds-progress-bar--large{height:24px;min-width:24px}.navds-progress-bar__foreground{--__ac-progress-bar-translate:initial;background:var(--ac-progress-bar-fg,var(--a-surface-alt-3));border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform:translateX(var(--__ac-progress-bar-translate));transform-origin:left;transition:transform .2s ease;width:100%}.navds-progress-bar__foreground--indeterminate{--__ac-progress-bar-simulated:initial;animation-delay:0s,var(--__ac-progress-bar-simulated);animation-duration:var(--__ac-progress-bar-simulated),2.5s;animation-fill-mode:forwards,none;animation-iteration-count:1,infinite;animation-name:navds-progress-bar-indeterminate-grow,navds-progress-bar-indeterminate;animation-timing-function:ease-in-out,ease-in-out}@keyframes navds-progress-bar-indeterminate{0%{left:-50%;transform:translateX(0);width:50%}50%{animation-direction:reverse;left:100%;transform:translateX(0);width:50%}to{left:-50%;transform:translateX(0);width:50%}}@keyframes navds-progress-bar-indeterminate-grow{0%{transform:translateX(-100%)}20%{transform:translateX(-80%)}30%{transform:translateX(-40%)}50%{transform:translateX(-20%)}75%{transform:translateX(-10%)}to{transform:translateX(-10%)}}@media (forced-colors:active){.navds-progress-bar__foreground{background:Highlight}.navds-progress-bar{outline:1px solid #0000}}
package/dist/component/readmore.css CHANGED
@@ -79,7 +79,8 @@
79
79
  }
80
80
 
81
81
  .navds-read-more__button:hover > .navds-read-more__expand-icon {
82
- transform: translateY(1px);
82
+ position: relative;
83
+ top: 1px;
83
84
  }
84
85
 
85
86
  .navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
@@ -87,5 +88,5 @@
87
88
  }
88
89
 
89
90
  .navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
90
- transform: translateY(-1px) rotate(-180deg);
91
+ top: -1px;
91
92
  }
package/dist/component/readmore.min.css CHANGED
@@ -1 +1 @@
1
- .navds-read-more__button{align-items:flex-start;background:none;border:none;border-radius:var(--a-border-radius-small);color:var(--ac-read-more-text,var(--a-text-action));cursor:pointer;display:flex;gap:var(--a-spacing-05);margin:0;padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);text-align:start}.navds-read-more--small .navds-read-more__button{padding:var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05)}@media (forced-colors:active){.navds-read-more__button{background-color:ButtonFace;border:1px solid ButtonText;color:ButtonText}.navds-read-more__button.navds-read-more__button:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}}.navds-read-more__button:hover{background-color:var(--ac-read-more-hover-bg,var(--a-surface-hover));color:var(--ac-read-more-hover-text,var(--a-text-action-hover))}.navds-read-more__button:active{background-color:var(--ac-read-more-active-bg,var(--a-surface-active))}.navds-read-more__button:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-read-more__button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-read-more__content{border-left:2px solid var(--ac-read-more-line,var(--a-border-divider));color:var(--a-text-default);margin-left:.8125rem;margin-top:var(--a-spacing-1);padding-left:.8125rem}.navds-read-more--small .navds-read-more__content{margin-left:.6875rem;padding-left:.6875rem}.navds-read-more__content--closed{display:none}.navds-read-more__expand-icon{flex-shrink:0;font-size:1.5rem}.navds-read-more--small .navds-read-more__expand-icon{font-size:1.25rem}.navds-read-more__button:hover>.navds-read-more__expand-icon{transform:translateY(1px)}.navds-read-more--open>.navds-read-more__button>.navds-read-more__expand-icon{transform:rotate(-180deg)}.navds-read-more--open>.navds-read-more__button:hover>.navds-read-more__expand-icon{transform:translateY(-1px) rotate(-180deg)}
1
+ .navds-read-more__button{align-items:flex-start;background:none;border:none;border-radius:var(--a-border-radius-small);color:var(--ac-read-more-text,var(--a-text-action));cursor:pointer;display:flex;gap:var(--a-spacing-05);margin:0;padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);text-align:start}.navds-read-more--small .navds-read-more__button{padding:var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05)}@media (forced-colors:active){.navds-read-more__button{background-color:ButtonFace;border:1px solid ButtonText;color:ButtonText}.navds-read-more__button.navds-read-more__button:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}}.navds-read-more__button:hover{background-color:var(--ac-read-more-hover-bg,var(--a-surface-hover));color:var(--ac-read-more-hover-text,var(--a-text-action-hover))}.navds-read-more__button:active{background-color:var(--ac-read-more-active-bg,var(--a-surface-active))}.navds-read-more__button:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-read-more__button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-read-more__content{border-left:2px solid var(--ac-read-more-line,var(--a-border-divider));color:var(--a-text-default);margin-left:.8125rem;margin-top:var(--a-spacing-1);padding-left:.8125rem}.navds-read-more--small .navds-read-more__content{margin-left:.6875rem;padding-left:.6875rem}.navds-read-more__content--closed{display:none}.navds-read-more__expand-icon{flex-shrink:0;font-size:1.5rem}.navds-read-more--small .navds-read-more__expand-icon{font-size:1.25rem}.navds-read-more__button:hover>.navds-read-more__expand-icon{position:relative;top:1px}.navds-read-more--open>.navds-read-more__button>.navds-read-more__expand-icon{transform:rotate(-180deg)}.navds-read-more--open>.navds-read-more__button:hover>.navds-read-more__expand-icon{top:-1px}
package/dist/components.css CHANGED
@@ -6415,7 +6415,8 @@ button.navds-internalheader__title:active,
6415
6415
  }
6416
6416
 
6417
6417
  .navds-read-more__button:hover > .navds-read-more__expand-icon {
6418
- transform: translateY(1px);
6418
+ position: relative;
6419
+ top: 1px;
6419
6420
  }
6420
6421
 
6421
6422
  .navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
@@ -6423,7 +6424,7 @@ button.navds-internalheader__title:active,
6423
6424
  }
6424
6425
 
6425
6426
  .navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
6426
- transform: translateY(-1px) rotate(-180deg);
6427
+ top: -1px;
6427
6428
  }
6428
6429
 
6429
6430
  .navds-progress-bar {
@@ -6467,15 +6468,14 @@ button.navds-internalheader__title:active,
6467
6468
  }
6468
6469
 
6469
6470
  .navds-progress-bar__foreground--indeterminate {
6470
- --__ac-progress-bar-duration: initial;
6471
- --__ac-progress-bar-delay: initial;
6471
+ --__ac-progress-bar-simulated: initial;
6472
6472
 
6473
6473
  animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
6474
6474
  animation-timing-function: ease-in-out, ease-in-out;
6475
- animation-duration: var(--__ac-progress-bar-duration), 2500ms;
6475
+ animation-duration: var(--__ac-progress-bar-simulated), 2500ms;
6476
6476
  animation-fill-mode: forwards, none;
6477
6477
  animation-iteration-count: 1, infinite;
6478
- animation-delay: 0s, calc((var(--__ac-progress-bar-duration) + var(--__ac-progress-bar-delay)));
6478
+ animation-delay: 0s, var(--__ac-progress-bar-simulated);
6479
6479
  }
6480
6480
 
6481
6481
  /* navds-progress-bar-indeterminate wave animation */
@@ -6514,11 +6514,14 @@ button.navds-internalheader__title:active,
6514
6514
  transform: translateX(-40%);
6515
6515
  }
6516
6516
 
6517
- 40%,
6518
6517
  50% {
6519
6518
  transform: translateX(-20%);
6520
6519
  }
6521
6520
 
6521
+ 75% {
6522
+ transform: translateX(-10%);
6523
+ }
6524
+
6522
6525
  100% {
6523
6526
  transform: translateX(-10%);
6524
6527
  }