@navikt/ds-css 4.7.4 → 4.8.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 (14) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/config/_mappings.js +13 -1
  3. package/dist/component/index.css +55 -1
  4. package/dist/component/index.min.css +3 -1
  5. package/dist/component/stack.css +54 -0
  6. package/dist/component/stack.min.css +3 -0
  7. package/dist/components.css +54 -0
  8. package/dist/components.min.css +3 -1
  9. package/dist/global/tokens.css +1 -1
  10. package/dist/index.css +55 -1
  11. package/dist/index.min.css +3 -1
  12. package/index.css +1 -0
  13. package/package.json +2 -2
  14. package/stack.css +61 -0
package/dist/component/stack.css ADDED
@@ -0,0 +1,54 @@
1
+ /* stylelint-disable csstools/value-no-unknown-custom-properties */
2
+ /* stylelint-disable aksel/design-token-exists */
3
+ .navds-stack {
4
+ --ac-stack-align: initial;
5
+ --ac-stack-justify: initial;
6
+ --ac-stack-direction: initial;
7
+ --ac-stack-wrap: initial;
8
+ --ac-stack-gap-xs: initial;
9
+ --ac-stack-gap-sm: initial;
10
+ --ac-stack-gap-md: initial;
11
+ --ac-stack-gap-lg: initial;
12
+ --ac-stack-gap-xl: initial;
13
+ --__ac-stack-gap: var(--ac-stack-gap-xs);
14
+
15
+ gap: var(--__ac-stack-gap);
16
+ display: flex;
17
+ align-items: var(--ac-stack-align);
18
+ justify-content: var(--ac-stack-justify);
19
+ flex-flow: var(--ac-stack-direction) var(--ac-stack-wrap);
20
+ }
21
+ .navds-stack__spacer {
22
+ flex: 1;
23
+ justify-self: stretch;
24
+ align-self: stretch;
25
+ }
26
+ .navds-stack > .navds-stack__spacer {
27
+ margin-block-start: calc(var(--__ac-stack-gap) * -1);
28
+ }
29
+ .navds-hstack > .navds-stack__spacer {
30
+ margin-inline-start: calc(var(--__ac-stack-gap) * -1);
31
+ }
32
+ @media (min-width: 480px) {
33
+ .navds-stack {
34
+ --__ac-stack-gap: var(--ac-stack-gap-sm, var(--ac-stack-gap-xs));
35
+ }
36
+ }
37
+ @media (min-width: 768px) {
38
+ .navds-stack {
39
+ --__ac-stack-gap: var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs)));
40
+ }
41
+ }
42
+ @media (min-width: 1024px) {
43
+ .navds-stack {
44
+ --__ac-stack-gap: var(--ac-stack-gap-lg, var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs))));
45
+ }
46
+ }
47
+ @media (min-width: 1280px) {
48
+ .navds-stack {
49
+ --__ac-stack-gap: var(
50
+ --ac-stack-gap-xl,
51
+ var(--ac-stack-gap-lg, var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs))))
52
+ );
53
+ }
54
+ }
package/dist/component/stack.min.css ADDED
@@ -0,0 +1,3 @@
1
+ .navds-stack{--ac-stack-align:initial;--ac-stack-justify:initial;--ac-stack-direction:initial;--ac-stack-wrap:initial;--ac-stack-gap-xs:initial;--ac-stack-gap-sm:initial;--ac-stack-gap-md:initial;--ac-stack-gap-lg:initial;--ac-stack-gap-xl:initial;--__ac-stack-gap:var(--ac-stack-gap-xs);align-items:var(--ac-stack-align);display:flex;flex-flow:var(--ac-stack-direction) var(--ac-stack-wrap);gap:var(--__ac-stack-gap);justify-content:var(--ac-stack-justify)}.navds-stack__spacer{align-self:stretch;flex:1;justify-self:stretch}.navds-stack>.navds-stack__spacer{-webkit-margin-before:calc(var(--__ac-stack-gap)*-1);margin-block-start:calc(var(--__ac-stack-gap)*-1)}.navds-hstack>.navds-stack__spacer{-webkit-margin-start:calc(var(--__ac-stack-gap)*-1);margin-inline-start:calc(var(--__ac-stack-gap)*-1)}@media (min-width:480px){.navds-stack{--__ac-stack-gap:var(--ac-stack-gap-sm,var(--ac-stack-gap-xs))}}@media (min-width:768px){.navds-stack{--__ac-stack-gap:var(--ac-stack-gap-md,var(--ac-stack-gap-sm,var(--ac-stack-gap-xs)))}}@media (min-width:1024px){.navds-stack{--__ac-stack-gap:var(--ac-stack-gap-lg,var(--ac-stack-gap-md,var(--ac-stack-gap-sm,var(--ac-stack-gap-xs))))}}@media (min-width:1280px){.navds-stack{--__ac-stack-gap:var(
2
+ --ac-stack-gap-xl,var(--ac-stack-gap-lg,var(--ac-stack-gap-md,var(--ac-stack-gap-sm,var(--ac-stack-gap-xs))))
3
+ )}}
package/dist/components.css CHANGED
@@ -4266,6 +4266,60 @@ button.navds-internalheader__title:active,
4266
4266
  opacity: 0.4;
4267
4267
  }
4268
4268
  }
4269
+ /* stylelint-disable csstools/value-no-unknown-custom-properties */
4270
+ /* stylelint-disable aksel/design-token-exists */
4271
+ .navds-stack {
4272
+ --ac-stack-align: initial;
4273
+ --ac-stack-justify: initial;
4274
+ --ac-stack-direction: initial;
4275
+ --ac-stack-wrap: initial;
4276
+ --ac-stack-gap-xs: initial;
4277
+ --ac-stack-gap-sm: initial;
4278
+ --ac-stack-gap-md: initial;
4279
+ --ac-stack-gap-lg: initial;
4280
+ --ac-stack-gap-xl: initial;
4281
+ --__ac-stack-gap: var(--ac-stack-gap-xs);
4282
+
4283
+ gap: var(--__ac-stack-gap);
4284
+ display: flex;
4285
+ align-items: var(--ac-stack-align);
4286
+ justify-content: var(--ac-stack-justify);
4287
+ flex-flow: var(--ac-stack-direction) var(--ac-stack-wrap);
4288
+ }
4289
+ .navds-stack__spacer {
4290
+ flex: 1;
4291
+ justify-self: stretch;
4292
+ align-self: stretch;
4293
+ }
4294
+ .navds-stack > .navds-stack__spacer {
4295
+ margin-block-start: calc(var(--__ac-stack-gap) * -1);
4296
+ }
4297
+ .navds-hstack > .navds-stack__spacer {
4298
+ margin-inline-start: calc(var(--__ac-stack-gap) * -1);
4299
+ }
4300
+ @media (min-width: 480px) {
4301
+ .navds-stack {
4302
+ --__ac-stack-gap: var(--ac-stack-gap-sm, var(--ac-stack-gap-xs));
4303
+ }
4304
+ }
4305
+ @media (min-width: 768px) {
4306
+ .navds-stack {
4307
+ --__ac-stack-gap: var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs)));
4308
+ }
4309
+ }
4310
+ @media (min-width: 1024px) {
4311
+ .navds-stack {
4312
+ --__ac-stack-gap: var(--ac-stack-gap-lg, var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs))));
4313
+ }
4314
+ }
4315
+ @media (min-width: 1280px) {
4316
+ .navds-stack {
4317
+ --__ac-stack-gap: var(
4318
+ --ac-stack-gap-xl,
4319
+ var(--ac-stack-gap-lg, var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs))))
4320
+ );
4321
+ }
4322
+ }
4269
4323
  .navds-stepper {
4270
4324
  --navds-stepper-circle-size: 1.75rem;
4271
4325
  --navds-stepper-border-width: 2px;