@norges-domstoler/dds-components 0.0.0-dev-20241014074420 → 0.0.0-dev-20241015083410

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/dist/index.css CHANGED
@@ -560,6 +560,35 @@
560
560
  visibility: hidden;
561
561
  }
562
562
 
563
+ /* src/components/helpers/Backdrop/Backdrop.module.css */
564
+ .Backdrop_backdrop {
565
+ position: fixed;
566
+ display: flex;
567
+ align-items: center;
568
+ justify-content: center;
569
+ overflow-y: auto;
570
+ top: 0;
571
+ right: 0;
572
+ bottom: 0;
573
+ left: 0;
574
+ z-index: 200;
575
+ background-color: var(--dds-color-surface-backdrop-default);
576
+ @media (prefers-reduced-motion: no-preference) {
577
+ transition: opacity 0.2s;
578
+ }
579
+ }
580
+ .Backdrop_backdrop--visible {
581
+ opacity: 1;
582
+ }
583
+ .Backdrop_backdrop--hidden {
584
+ opacity: 0;
585
+ }
586
+
587
+ /* src/utils/RequiredMarker/RequiredMarker.module.css */
588
+ .RequiredMarker_wrapper {
589
+ color: var(--dds-color-text-requiredfield);
590
+ }
591
+
563
592
  /* src/components/helpers/Chevron/Chevron.module.css */
564
593
  :root {
565
594
  --dds-chevron-transition: transform 0.2s linear;
@@ -601,11 +630,6 @@
601
630
  transform: rotate(0) translateY(0);
602
631
  }
603
632
 
604
- /* src/utils/RequiredMarker/RequiredMarker.module.css */
605
- .RequiredMarker_wrapper {
606
- color: var(--dds-color-text-requiredfield);
607
- }
608
-
609
633
  /* src/components/helpers/Input/Input.module.css */
610
634
  :root {
611
635
  --dds-input-default-width: 320px;
@@ -2558,28 +2582,6 @@
2558
2582
  }
2559
2583
 
2560
2584
  /* src/components/Modal/Modal.module.css */
2561
- .Modal_backdrop {
2562
- position: fixed;
2563
- display: flex;
2564
- align-items: center;
2565
- justify-content: center;
2566
- overflow-y: auto;
2567
- top: 0;
2568
- right: 0;
2569
- bottom: 0;
2570
- left: 0;
2571
- z-index: 200;
2572
- background-color: var(--dds-color-surface-backdrop-default);
2573
- @media (prefers-reduced-motion: no-preference) {
2574
- transition: opacity 0.2s;
2575
- }
2576
- }
2577
- .Modal_backdrop--visible {
2578
- opacity: 1;
2579
- }
2580
- .Modal_backdrop--hidden {
2581
- opacity: 0;
2582
- }
2583
2585
  .Modal_container {
2584
2586
  --dds-modal-content-padding: var(--dds-spacing-x0-25);
2585
2587
  --dds-modal-container-padding: calc( var(--dds-spacing-x1) - var(--dds-modal-content-padding) ) calc(var(--dds-spacing-x1) - var(--dds-modal-content-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-modal-content-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-modal-content-padding));
@@ -2985,6 +2987,53 @@
2985
2987
  text-decoration-color: var(--dds-color-text-medium);
2986
2988
  }
2987
2989
 
2990
+ /* src/components/ProgressBar/ProgressBar.module.css */
2991
+ .ProgressBar_container {
2992
+ width: 100%;
2993
+ }
2994
+ .ProgressBar_progress {
2995
+ width: var(--dds-progressbar-width);
2996
+ height: 48px;
2997
+ background-color: var(--dds-color-surface-medium);
2998
+ border: 1px solid var(--dds-color-border-default);
2999
+ border-radius: var(--dds-border-radius-surface);
3000
+ }
3001
+ .ProgressBar_progress--small {
3002
+ height: var(--dds-spacing-x0-75);
3003
+ }
3004
+ .ProgressBar_progress--medium {
3005
+ height: var(--dds-spacing-x1-5);
3006
+ }
3007
+ .ProgressBar_fill {
3008
+ height: 100%;
3009
+ width: var(--dds-progressbar-fill-width);
3010
+ background-color: var(--dds-color-surface-action-resting);
3011
+ @media (prefers-reduced-motion: no-preference) {
3012
+ transition: width 0.2s, background-color 0.2s;
3013
+ }
3014
+ }
3015
+ .ProgressBar_fill--done {
3016
+ background-color: var(--dds-color-surface-success-strong);
3017
+ }
3018
+ .ProgressBar_fill--error {
3019
+ background-color: var(--dds-color-surface-action-danger-resting);
3020
+ }
3021
+ .ProgressBar_fill--indeterminate {
3022
+ width: 25%;
3023
+ animation: ProgressBar_indeterminate 2s infinite linear;
3024
+ }
3025
+ @keyframes ProgressBar_indeterminate {
3026
+ 0% {
3027
+ transform: translateX(0);
3028
+ }
3029
+ 50% {
3030
+ transform: translateX(300%);
3031
+ }
3032
+ 100% {
3033
+ transform: translateX(0);
3034
+ }
3035
+ }
3036
+
2988
3037
  /* src/components/Search/Search.module.css */
2989
3038
  .Search_container {
2990
3039
  display: flex;