@norges-domstoler/dds-components 17.3.1 → 17.5.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/dist/index.css +198 -33
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +132 -8
- package/dist/index.d.ts +132 -8
- package/dist/index.js +2326 -1256
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2307 -1232
- package/dist/index.mjs.map +1 -1
- package/package.json +14 -14
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;
|
|
@@ -725,7 +749,7 @@
|
|
|
725
749
|
:where(.Input_char-counter) {
|
|
726
750
|
margin-left: auto;
|
|
727
751
|
}
|
|
728
|
-
:where(.
|
|
752
|
+
:where(.Input_input-group__absolute-element) {
|
|
729
753
|
position: absolute;
|
|
730
754
|
top: 50%;
|
|
731
755
|
transform: translate(0, -50%);
|
|
@@ -1816,7 +1840,7 @@
|
|
|
1816
1840
|
}
|
|
1817
1841
|
.Feedback_button {
|
|
1818
1842
|
border-radius: var(--dds-border-radius-button);
|
|
1819
|
-
color: var(--dds-color-
|
|
1843
|
+
color: var(--dds-color-icon-medium);
|
|
1820
1844
|
&:hover {
|
|
1821
1845
|
background-color: var(--dds-color-surface-hover-default);
|
|
1822
1846
|
color: var(--dds-color-icon-action-hover);
|
|
@@ -2481,7 +2505,7 @@
|
|
|
2481
2505
|
}
|
|
2482
2506
|
}
|
|
2483
2507
|
.List_li {
|
|
2484
|
-
line-height:
|
|
2508
|
+
line-height: var(--dds-font-lineheight-list);
|
|
2485
2509
|
}
|
|
2486
2510
|
|
|
2487
2511
|
/* src/components/LocalMessage/LocalMessage.module.css */
|
|
@@ -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));
|
|
@@ -2824,7 +2826,7 @@
|
|
|
2824
2826
|
}
|
|
2825
2827
|
.NativeSelect_select--tiny {
|
|
2826
2828
|
height: calc(1.5em + var(--dds-spacing-x0-25) + var(--dds-spacing-x0-25) + 2px);
|
|
2827
|
-
padding-right: var(--dds-spacing-x1);
|
|
2829
|
+
padding-right: var(--dds-spacing-x1-5);
|
|
2828
2830
|
}
|
|
2829
2831
|
.NativeSelect_select--multiple {
|
|
2830
2832
|
padding-right: 0;
|
|
@@ -2840,6 +2842,119 @@
|
|
|
2840
2842
|
pointer-events: none;
|
|
2841
2843
|
}
|
|
2842
2844
|
|
|
2845
|
+
/* src/components/PhoneInput/PhoneInput.module.css */
|
|
2846
|
+
.PhoneInput_inputs-container {
|
|
2847
|
+
display: flex;
|
|
2848
|
+
flex-direction: row;
|
|
2849
|
+
.PhoneInput_input {
|
|
2850
|
+
border-top-left-radius: 0;
|
|
2851
|
+
border-bottom-left-radius: 0;
|
|
2852
|
+
width: var(--dds-phone-input-width);
|
|
2853
|
+
}
|
|
2854
|
+
.PhoneInput_select {
|
|
2855
|
+
width: 8rem;
|
|
2856
|
+
border-top-right-radius: 0;
|
|
2857
|
+
border-bottom-right-radius: 0;
|
|
2858
|
+
margin-right: -1px;
|
|
2859
|
+
}
|
|
2860
|
+
.PhoneInput_select--tiny {
|
|
2861
|
+
width: 5rem;
|
|
2862
|
+
}
|
|
2863
|
+
}
|
|
2864
|
+
.PhoneInput_inputs-container--small-screen-xs {
|
|
2865
|
+
@media only screen and (max-width: 600px) {
|
|
2866
|
+
flex-direction: column;
|
|
2867
|
+
width: var(--dds-phone-input-width);
|
|
2868
|
+
.PhoneInput_input {
|
|
2869
|
+
border-top-left-radius: 0;
|
|
2870
|
+
border-top-right-radius: 0;
|
|
2871
|
+
width: 100%;
|
|
2872
|
+
}
|
|
2873
|
+
.PhoneInput_select {
|
|
2874
|
+
border-bottom-left-radius: 0;
|
|
2875
|
+
border-bottom-right-radius: 0;
|
|
2876
|
+
width: 100%;
|
|
2877
|
+
margin-bottom: -1px;
|
|
2878
|
+
}
|
|
2879
|
+
}
|
|
2880
|
+
}
|
|
2881
|
+
.PhoneInput_inputs-container--small-screen-sm {
|
|
2882
|
+
@media only screen and (max-width: 960px) {
|
|
2883
|
+
flex-direction: column;
|
|
2884
|
+
width: var(--dds-phone-input-width);
|
|
2885
|
+
.PhoneInput_input {
|
|
2886
|
+
border-top-left-radius: 0;
|
|
2887
|
+
border-top-right-radius: 0;
|
|
2888
|
+
width: 100%;
|
|
2889
|
+
}
|
|
2890
|
+
.PhoneInput_select {
|
|
2891
|
+
border-bottom-left-radius: 0;
|
|
2892
|
+
border-bottom-right-radius: 0;
|
|
2893
|
+
width: 100%;
|
|
2894
|
+
margin-bottom: -1px;
|
|
2895
|
+
}
|
|
2896
|
+
}
|
|
2897
|
+
}
|
|
2898
|
+
.PhoneInput_inputs-container--small-screen-md {
|
|
2899
|
+
@media only screen and (max-width: 1280px) {
|
|
2900
|
+
flex-direction: column;
|
|
2901
|
+
width: var(--dds-phone-input-width);
|
|
2902
|
+
.PhoneInput_input {
|
|
2903
|
+
border-top-left-radius: 0;
|
|
2904
|
+
border-top-right-radius: 0;
|
|
2905
|
+
width: 100%;
|
|
2906
|
+
}
|
|
2907
|
+
.PhoneInput_select {
|
|
2908
|
+
border-bottom-left-radius: 0;
|
|
2909
|
+
border-bottom-right-radius: 0;
|
|
2910
|
+
width: 100%;
|
|
2911
|
+
margin-bottom: -1px;
|
|
2912
|
+
}
|
|
2913
|
+
}
|
|
2914
|
+
}
|
|
2915
|
+
.PhoneInput_inputs-container--small-screen-lg {
|
|
2916
|
+
@media only screen and (max-width: 1920px) {
|
|
2917
|
+
flex-direction: column;
|
|
2918
|
+
width: var(--dds-phone-input-width);
|
|
2919
|
+
.PhoneInput_input {
|
|
2920
|
+
border-top-left-radius: 0;
|
|
2921
|
+
border-top-right-radius: 0;
|
|
2922
|
+
width: 100%;
|
|
2923
|
+
}
|
|
2924
|
+
.PhoneInput_select {
|
|
2925
|
+
border-bottom-left-radius: 0;
|
|
2926
|
+
border-bottom-right-radius: 0;
|
|
2927
|
+
width: 100%;
|
|
2928
|
+
margin-bottom: -1px;
|
|
2929
|
+
}
|
|
2930
|
+
}
|
|
2931
|
+
}
|
|
2932
|
+
.PhoneInput_inputs-container--small-screen-xl {
|
|
2933
|
+
flex-direction: column;
|
|
2934
|
+
width: var(--dds-phone-input-width);
|
|
2935
|
+
.PhoneInput_input {
|
|
2936
|
+
border-top-left-radius: 0;
|
|
2937
|
+
border-top-right-radius: 0;
|
|
2938
|
+
width: 100%;
|
|
2939
|
+
}
|
|
2940
|
+
.PhoneInput_select {
|
|
2941
|
+
border-bottom-left-radius: 0;
|
|
2942
|
+
border-bottom-right-radius: 0;
|
|
2943
|
+
width: 100%;
|
|
2944
|
+
margin-bottom: -1px;
|
|
2945
|
+
}
|
|
2946
|
+
}
|
|
2947
|
+
.PhoneInput_select:focus-visible,
|
|
2948
|
+
.PhoneInput_select:hover {
|
|
2949
|
+
z-index: 1;
|
|
2950
|
+
& ~ svg {
|
|
2951
|
+
z-index: 1;
|
|
2952
|
+
}
|
|
2953
|
+
}
|
|
2954
|
+
.PhoneInput_calling-code {
|
|
2955
|
+
left: var(--dds-spacing-x0-5);
|
|
2956
|
+
}
|
|
2957
|
+
|
|
2843
2958
|
/* src/components/Popover/Popover.module.css */
|
|
2844
2959
|
.Popover_container {
|
|
2845
2960
|
position: absolute;
|
|
@@ -2985,6 +3100,53 @@
|
|
|
2985
3100
|
text-decoration-color: var(--dds-color-text-medium);
|
|
2986
3101
|
}
|
|
2987
3102
|
|
|
3103
|
+
/* src/components/ProgressBar/ProgressBar.module.css */
|
|
3104
|
+
.ProgressBar_container {
|
|
3105
|
+
width: 100%;
|
|
3106
|
+
}
|
|
3107
|
+
.ProgressBar_progress {
|
|
3108
|
+
width: var(--dds-progressbar-width);
|
|
3109
|
+
height: 48px;
|
|
3110
|
+
background-color: var(--dds-color-surface-medium);
|
|
3111
|
+
border: 1px solid var(--dds-color-border-default);
|
|
3112
|
+
border-radius: var(--dds-border-radius-surface);
|
|
3113
|
+
}
|
|
3114
|
+
.ProgressBar_progress--small {
|
|
3115
|
+
height: var(--dds-spacing-x0-75);
|
|
3116
|
+
}
|
|
3117
|
+
.ProgressBar_progress--medium {
|
|
3118
|
+
height: var(--dds-spacing-x1-5);
|
|
3119
|
+
}
|
|
3120
|
+
.ProgressBar_fill {
|
|
3121
|
+
height: 100%;
|
|
3122
|
+
width: var(--dds-progressbar-fill-width);
|
|
3123
|
+
background-color: var(--dds-color-surface-action-resting);
|
|
3124
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
3125
|
+
transition: width 0.2s, background-color 0.2s;
|
|
3126
|
+
}
|
|
3127
|
+
}
|
|
3128
|
+
.ProgressBar_fill--done {
|
|
3129
|
+
background-color: var(--dds-color-surface-success-strong);
|
|
3130
|
+
}
|
|
3131
|
+
.ProgressBar_fill--error {
|
|
3132
|
+
background-color: var(--dds-color-surface-action-danger-resting);
|
|
3133
|
+
}
|
|
3134
|
+
.ProgressBar_fill--indeterminate {
|
|
3135
|
+
width: 25%;
|
|
3136
|
+
animation: ProgressBar_indeterminate 2s infinite linear;
|
|
3137
|
+
}
|
|
3138
|
+
@keyframes ProgressBar_indeterminate {
|
|
3139
|
+
0% {
|
|
3140
|
+
transform: translateX(0);
|
|
3141
|
+
}
|
|
3142
|
+
50% {
|
|
3143
|
+
transform: translateX(300%);
|
|
3144
|
+
}
|
|
3145
|
+
100% {
|
|
3146
|
+
transform: translateX(0);
|
|
3147
|
+
}
|
|
3148
|
+
}
|
|
3149
|
+
|
|
2988
3150
|
/* src/components/Search/Search.module.css */
|
|
2989
3151
|
.Search_container {
|
|
2990
3152
|
display: flex;
|
|
@@ -3751,9 +3913,9 @@
|
|
|
3751
3913
|
cursor: pointer;
|
|
3752
3914
|
width: -moz-fit-content;
|
|
3753
3915
|
width: fit-content;
|
|
3754
|
-
border: 1px solid;
|
|
3916
|
+
border: 1px solid var(--dds-color-border-default);
|
|
3755
3917
|
border-radius: var(--dds-border-radius-rounded);
|
|
3756
|
-
gap: var(--dds-spacing-x0-
|
|
3918
|
+
gap: var(--dds-spacing-x0-25);
|
|
3757
3919
|
padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
|
|
3758
3920
|
background-color: var(--dds-color-surface-default);
|
|
3759
3921
|
color: var(--dds-color-text-default);
|
|
@@ -3768,6 +3930,9 @@
|
|
|
3768
3930
|
background-color: var(--dds-color-surface-hover-default);
|
|
3769
3931
|
}
|
|
3770
3932
|
}
|
|
3933
|
+
.ToggleButton_content--with-icon {
|
|
3934
|
+
padding-inline-start: var(--dds-spacing-x0-75);
|
|
3935
|
+
}
|
|
3771
3936
|
input:checked + .ToggleButton_content {
|
|
3772
3937
|
color: var(--dds-color-text-on-action);
|
|
3773
3938
|
background-color: var(--dds-color-surface-action-resting);
|