@navikt/ds-css 6.12.0 → 6.14.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 (31) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/baseline/baseline.css +1 -1
  3. package/baseline/fonts.css +109 -8
  4. package/dist/component/chat.min.css +1 -1
  5. package/dist/component/date.min.css +1 -1
  6. package/dist/component/expansioncard.min.css +1 -1
  7. package/dist/component/form.min.css +1 -1
  8. package/dist/component/index.css +209 -36
  9. package/dist/component/index.min.css +4 -4
  10. package/dist/component/modal.css +8 -3
  11. package/dist/component/modal.min.css +1 -1
  12. package/dist/component/primitives.css +107 -21
  13. package/dist/component/primitives.min.css +1 -1
  14. package/dist/component/skeleton.min.css +1 -1
  15. package/dist/component/stepper.min.css +1 -1
  16. package/dist/component/timeline.min.css +1 -1
  17. package/dist/component/togglegroup.min.css +1 -1
  18. package/dist/components.css +115 -24
  19. package/dist/components.min.css +2 -2
  20. package/dist/global/baseline.css +1 -1
  21. package/dist/global/baseline.min.css +1 -1
  22. package/dist/global/fonts.css +97 -8
  23. package/dist/global/fonts.min.css +1 -1
  24. package/dist/global/tokens.css +3 -3
  25. package/dist/global/tokens.min.css +1 -1
  26. package/dist/index.css +209 -36
  27. package/dist/index.min.css +4 -4
  28. package/modal.css +8 -3
  29. package/package.json +2 -2
  30. package/primitives/hgrid.css +26 -3
  31. package/primitives/stack.css +81 -18
package/dist/components.css CHANGED
@@ -4788,17 +4788,22 @@ button.navds-internalheader__title:active,
4788
4788
 
4789
4789
  @media (min-width: 480px) {
4790
4790
  .navds-modal {
4791
- max-width: calc(100% - 6px - 2em);
4791
+ max-width: calc(100% - 2em);
4792
4792
  }
4793
4793
 
4794
4794
  .navds-modal--autowidth {
4795
- max-width: min(700px, calc(100% - 6px - 2em));
4795
+ max-width: min(700px, calc(100% - 2em));
4796
4796
  }
4797
4797
  }
4798
4798
 
4799
4799
  @media (min-height: 480px) {
4800
4800
  .navds-modal {
4801
- max-height: calc(100% - 6px - 2em);
4801
+ max-height: calc(100% - 2em);
4802
+ }
4803
+
4804
+ .navds-modal--top {
4805
+ margin-top: 2em;
4806
+ max-height: calc(100% - 4em);
4802
4807
  }
4803
4808
  }
4804
4809
 
@@ -7760,6 +7765,12 @@ button.navds-stepper__step {
7760
7765
  --__ac-hgrid-columns-xl: var(--__ac-hgrid-columns-lg);
7761
7766
  --__ac-hgrid-columns-2xl: var(--__ac-hgrid-columns-xl);
7762
7767
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
7768
+
7769
+ display: grid;
7770
+ grid-template-columns: var(--__ac-hgrid-columns);
7771
+ }
7772
+
7773
+ .navds-hgrid-gap {
7763
7774
  --__ac-hgrid-gap-xs: initial;
7764
7775
  --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
7765
7776
  --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
@@ -7767,17 +7778,22 @@ button.navds-stepper__step {
7767
7778
  --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
7768
7779
  --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
7769
7780
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
7770
- --__ac-hgrid-align: initial;
7771
7781
 
7772
- display: grid;
7773
- grid-template-columns: var(--__ac-hgrid-columns);
7774
7782
  gap: var(--__ac-hgrid-gap);
7783
+ }
7784
+
7785
+ .navds-hgrid-align {
7786
+ --__ac-hgrid-align: initial;
7787
+
7775
7788
  align-items: var(--__ac-hgrid-align);
7776
7789
  }
7777
7790
 
7778
7791
  @media (min-width: 480px) {
7779
7792
  .navds-hgrid {
7780
7793
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
7794
+ }
7795
+
7796
+ .navds-hgrid-gap {
7781
7797
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
7782
7798
  }
7783
7799
  }
@@ -7785,6 +7801,9 @@ button.navds-stepper__step {
7785
7801
  @media (min-width: 768px) {
7786
7802
  .navds-hgrid {
7787
7803
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
7804
+ }
7805
+
7806
+ .navds-hgrid-gap {
7788
7807
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
7789
7808
  }
7790
7809
  }
@@ -7792,6 +7811,9 @@ button.navds-stepper__step {
7792
7811
  @media (min-width: 1024px) {
7793
7812
  .navds-hgrid {
7794
7813
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
7814
+ }
7815
+
7816
+ .navds-hgrid-gap {
7795
7817
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
7796
7818
  }
7797
7819
  }
@@ -7799,6 +7821,9 @@ button.navds-stepper__step {
7799
7821
  @media (min-width: 1280px) {
7800
7822
  .navds-hgrid {
7801
7823
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
7824
+ }
7825
+
7826
+ .navds-hgrid-gap {
7802
7827
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
7803
7828
  }
7804
7829
  }
@@ -7806,12 +7831,18 @@ button.navds-stepper__step {
7806
7831
  @media (min-width: 1440px) {
7807
7832
  .navds-hgrid {
7808
7833
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
7834
+ }
7835
+
7836
+ .navds-hgrid-gap {
7809
7837
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
7810
7838
  }
7811
7839
  }
7812
7840
 
7813
7841
  .navds-stack {
7814
- --__ac-stack-wrap: initial;
7842
+ display: flex;
7843
+ }
7844
+
7845
+ .navds-stack-gap {
7815
7846
  --__ac-stack-gap-xs: initial;
7816
7847
  --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
7817
7848
  --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
@@ -7819,13 +7850,11 @@ button.navds-stepper__step {
7819
7850
  --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
7820
7851
  --__ac-stack-gap-2xl: var(--__ac-stack-gap-xl);
7821
7852
  --__ac-stack-gap: var(--__ac-stack-gap-xs);
7822
- --__ac-stack-justify-xs: initial;
7823
- --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
7824
- --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
7825
- --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
7826
- --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
7827
- --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
7828
- --__ac-stack-justify: var(--__ac-stack-justify-xs);
7853
+
7854
+ gap: var(--__ac-stack-gap);
7855
+ }
7856
+
7857
+ .navds-stack-align {
7829
7858
  --__ac-stack-align-xs: initial;
7830
7859
  --__ac-stack-align-sm: var(--__ac-stack-align-xs);
7831
7860
  --__ac-stack-align-md: var(--__ac-stack-align-sm);
@@ -7833,6 +7862,23 @@ button.navds-stepper__step {
7833
7862
  --__ac-stack-align-xl: var(--__ac-stack-align-lg);
7834
7863
  --__ac-stack-align-2xl: var(--__ac-stack-align-xl);
7835
7864
  --__ac-stack-align: var(--__ac-stack-align-xs);
7865
+
7866
+ align-items: var(--__ac-stack-align);
7867
+ }
7868
+
7869
+ .navds-stack-justify {
7870
+ --__ac-stack-justify-xs: initial;
7871
+ --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
7872
+ --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
7873
+ --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
7874
+ --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
7875
+ --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
7876
+ --__ac-stack-justify: var(--__ac-stack-justify-xs);
7877
+
7878
+ justify-content: var(--__ac-stack-justify);
7879
+ }
7880
+
7881
+ .navds-stack-direction {
7836
7882
  --__ac-stack-direction-xs: initial;
7837
7883
  --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
7838
7884
  --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
@@ -7841,11 +7887,11 @@ button.navds-stepper__step {
7841
7887
  --__ac-stack-direction-2xl: var(--__ac-stack-direction-xl);
7842
7888
  --__ac-stack-direction: var(--__ac-stack-direction-xs);
7843
7889
 
7844
- gap: var(--__ac-stack-gap);
7845
- display: flex;
7846
- align-items: var(--__ac-stack-align);
7847
- justify-content: var(--__ac-stack-justify);
7848
- flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
7890
+ flex-direction: var(--__ac-stack-direction);
7891
+ }
7892
+
7893
+ .navds-stack-wrap {
7894
+ flex-wrap: wrap;
7849
7895
  }
7850
7896
 
7851
7897
  .navds-stack__spacer {
@@ -7860,46 +7906,91 @@ button.navds-stepper__step {
7860
7906
  }
7861
7907
 
7862
7908
  @media (min-width: 480px) {
7863
- .navds-stack {
7909
+ .navds-stack-gap {
7864
7910
  --__ac-stack-gap: var(--__ac-stack-gap-sm);
7911
+ }
7912
+
7913
+ .navds-stack-align {
7865
7914
  --__ac-stack-align: var(--__ac-stack-align-sm);
7915
+ }
7916
+
7917
+ .navds-stack-justify {
7866
7918
  --__ac-stack-justify: var(--__ac-stack-justify-sm);
7919
+ }
7920
+
7921
+ .navds-stack-direction {
7867
7922
  --__ac-stack-direction: var(--__ac-stack-direction-sm);
7868
7923
  }
7869
7924
  }
7870
7925
 
7871
7926
  @media (min-width: 768px) {
7872
- .navds-stack {
7927
+ .navds-stack-gap {
7873
7928
  --__ac-stack-gap: var(--__ac-stack-gap-md);
7929
+ }
7930
+
7931
+ .navds-stack-align {
7874
7932
  --__ac-stack-align: var(--__ac-stack-align-md);
7933
+ }
7934
+
7935
+ .navds-stack-justify {
7875
7936
  --__ac-stack-justify: var(--__ac-stack-justify-md);
7937
+ }
7938
+
7939
+ .navds-stack-direction {
7876
7940
  --__ac-stack-direction: var(--__ac-stack-direction-md);
7877
7941
  }
7878
7942
  }
7879
7943
 
7880
7944
  @media (min-width: 1024px) {
7881
- .navds-stack {
7945
+ .navds-stack-gap {
7882
7946
  --__ac-stack-gap: var(--__ac-stack-gap-lg);
7947
+ }
7948
+
7949
+ .navds-stack-align {
7883
7950
  --__ac-stack-align: var(--__ac-stack-align-lg);
7951
+ }
7952
+
7953
+ .navds-stack-justify {
7884
7954
  --__ac-stack-justify: var(--__ac-stack-justify-lg);
7955
+ }
7956
+
7957
+ .navds-stack-direction {
7885
7958
  --__ac-stack-direction: var(--__ac-stack-direction-lg);
7886
7959
  }
7887
7960
  }
7888
7961
 
7889
7962
  @media (min-width: 1280px) {
7890
- .navds-stack {
7963
+ .navds-stack-gap {
7891
7964
  --__ac-stack-gap: var(--__ac-stack-gap-xl);
7965
+ }
7966
+
7967
+ .navds-stack-align {
7892
7968
  --__ac-stack-align: var(--__ac-stack-align-xl);
7969
+ }
7970
+
7971
+ .navds-stack-justify {
7893
7972
  --__ac-stack-justify: var(--__ac-stack-justify-xl);
7973
+ }
7974
+
7975
+ .navds-stack-direction {
7894
7976
  --__ac-stack-direction: var(--__ac-stack-direction-xl);
7895
7977
  }
7896
7978
  }
7897
7979
 
7898
7980
  @media (min-width: 1440px) {
7899
- .navds-stack {
7981
+ .navds-stack-gap {
7900
7982
  --__ac-stack-gap: var(--__ac-stack-gap-2xl);
7983
+ }
7984
+
7985
+ .navds-stack-align {
7901
7986
  --__ac-stack-align: var(--__ac-stack-align-2xl);
7987
+ }
7988
+
7989
+ .navds-stack-justify {
7902
7990
  --__ac-stack-justify: var(--__ac-stack-justify-2xl);
7991
+ }
7992
+
7993
+ .navds-stack-direction {
7903
7994
  --__ac-stack-direction: var(--__ac-stack-direction-2xl);
7904
7995
  }
7905
7996
  }