@navikt/ds-css 5.3.2 → 5.3.4

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 +12 -0
  2. package/alert.css +16 -6
  3. package/dist/component/alert.css +16 -6
  4. package/dist/component/alert.min.css +1 -1
  5. package/dist/component/hgrid.css +2 -0
  6. package/dist/component/hgrid.min.css +1 -1
  7. package/dist/component/index.css +16 -7
  8. package/dist/component/index.min.css +2 -2
  9. package/dist/components.css +15 -6
  10. package/dist/components.min.css +2 -2
  11. package/dist/global/tokens.css +1 -1
  12. package/dist/index.css +16 -7
  13. package/dist/index.min.css +2 -2
  14. package/hgrid.css +2 -0
  15. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 5.3.4
4
+
5
+ ### Patch Changes
6
+
7
+ - Alert: 12px -> 8px gap mellom tekst og ikon ved `size="small"` ([#2240](https://github.com/navikt/aksel/pull/2240))
8
+
9
+ ## 5.3.3
10
+
11
+ ### Patch Changes
12
+
13
+ - HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))
14
+
3
15
  ## 5.3.2
4
16
 
5
17
  ### Patch Changes
package/alert.css CHANGED
@@ -11,8 +11,17 @@
11
11
  max-width: 43.5rem;
12
12
  }
13
13
 
14
+ .navds-alert--close-button > .navds-alert__wrapper {
15
+ margin-block-start: var(--a-spacing-05);
16
+ }
17
+
18
+ .navds-alert--small.navds-alert--close-button > .navds-alert__wrapper {
19
+ margin-block-start: var(--a-spacing-1);
20
+ }
21
+
14
22
  .navds-alert--small {
15
23
  padding: var(--a-spacing-2) var(--a-spacing-4);
24
+ gap: var(--a-spacing-2);
16
25
  }
17
26
 
18
27
  .navds-alert--full-width {
@@ -24,19 +33,20 @@
24
33
  font-size: 1.5rem;
25
34
  align-self: flex-start;
26
35
  height: var(--a-font-line-height-xlarge);
27
- margin-inline: var(--a-spacing-1);
28
- margin-block: 0;
29
- margin-block-start: -1px;
30
36
  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
31
37
  }
32
38
 
33
- .navds-alert--close-button > .navds-alert__icon,
34
39
  .navds-alert--small > .navds-alert__icon {
35
40
  margin-block-start: 0;
41
+ height: var(--a-font-line-height-large);
36
42
  }
37
43
 
38
- .navds-alert--small > .navds-alert__icon {
39
- height: var(--a-font-line-height-large);
44
+ .navds-alert--close-button > .navds-alert__icon {
45
+ margin-block-start: var(--a-spacing-05);
46
+ }
47
+
48
+ .navds-alert--small.navds-alert--close-button > .navds-alert__icon {
49
+ margin-block-start: var(--a-spacing-1);
40
50
  }
41
51
 
42
52
  .navds-alert--error {
package/dist/component/alert.css CHANGED
@@ -11,8 +11,17 @@
11
11
  max-width: 43.5rem;
12
12
  }
13
13
 
14
+ .navds-alert--close-button > .navds-alert__wrapper {
15
+ margin-block-start: var(--a-spacing-05);
16
+ }
17
+
18
+ .navds-alert--small.navds-alert--close-button > .navds-alert__wrapper {
19
+ margin-block-start: var(--a-spacing-1);
20
+ }
21
+
14
22
  .navds-alert--small {
15
23
  padding: var(--a-spacing-2) var(--a-spacing-4);
24
+ gap: var(--a-spacing-2);
16
25
  }
17
26
 
18
27
  .navds-alert--full-width {
@@ -24,19 +33,20 @@
24
33
  font-size: 1.5rem;
25
34
  align-self: flex-start;
26
35
  height: var(--a-font-line-height-xlarge);
27
- margin-inline: var(--a-spacing-1);
28
- margin-block: 0;
29
- margin-block-start: -1px;
30
36
  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
31
37
  }
32
38
 
33
- .navds-alert--close-button > .navds-alert__icon,
34
39
  .navds-alert--small > .navds-alert__icon {
35
40
  margin-block-start: 0;
41
+ height: var(--a-font-line-height-large);
36
42
  }
37
43
 
38
- .navds-alert--small > .navds-alert__icon {
39
- height: var(--a-font-line-height-large);
44
+ .navds-alert--close-button > .navds-alert__icon {
45
+ margin-block-start: var(--a-spacing-05);
46
+ }
47
+
48
+ .navds-alert--small.navds-alert--close-button > .navds-alert__icon {
49
+ margin-block-start: var(--a-spacing-1);
40
50
  }
41
51
 
42
52
  .navds-alert--error {
package/dist/component/alert.min.css CHANGED
@@ -1 +1 @@
1
- .navds-alert{align-items:center;border:1px solid;border-radius:var(--a-border-radius-medium);display:flex;gap:var(--a-spacing-3);padding:var(--a-spacing-4)}.navds-alert__wrapper{max-width:43.5rem}.navds-alert--small{padding:var(--a-spacing-2) var(--a-spacing-4)}.navds-alert--full-width{border-radius:0}.navds-alert>.navds-alert__icon{-webkit-margin-before:-1px;align-self:flex-start;background:radial-gradient(circle,var(--a-surface-default) 50%,0,transparent);flex-shrink:0;font-size:1.5rem;height:var(--a-font-line-height-xlarge);margin-block:0;margin-block-start:-1px;margin-inline:var(--a-spacing-1)}.navds-alert--close-button>.navds-alert__icon,.navds-alert--small>.navds-alert__icon{-webkit-margin-before:0;margin-block-start:0}.navds-alert--small>.navds-alert__icon{height:var(--a-font-line-height-large)}.navds-alert--error{background-color:var(--ac-alert-error-bg,var(--a-surface-danger-subtle));border-color:var(--ac-alert-error-border,var(--a-border-danger))}.navds-alert--error>.navds-alert__icon{color:var(--ac-alert-icon-error-color,var(--a-icon-danger))}.navds-alert--warning{background-color:var(--ac-alert-warning-bg,var(--a-surface-warning-subtle));border-color:var(--ac-alert-warning-border,var(--a-border-warning))}.navds-alert--warning>.navds-alert__icon{background:radial-gradient(circle at 50% 57%,var(--a-surface-default) 32%,0,transparent);color:var(--ac-alert-icon-warning-color,var(--a-icon-warning))}.navds-alert--info{background-color:var(--ac-alert-info-bg,var(--a-surface-info-subtle));border-color:var(--ac-alert-info-border,var(--a-border-info))}.navds-alert--info>.navds-alert__icon{color:var(--ac-alert-icon-info-color,var(--a-icon-info))}.navds-alert--success{background-color:var(--ac-alert-success-bg,var(--a-surface-success-subtle));border-color:var(--ac-alert-success-border,var(--a-border-success))}.navds-alert--success>.navds-alert__icon{color:var(--ac-alert-icon-success-color,var(--a-icon-success))}.navds-alert--inline{background-color:transparent;border:none;padding:0}.navds-alert__button-wrapper{align-self:flex-start;display:flex;flex:1;flex-flow:row nowrap;justify-content:flex-end}
1
+ .navds-alert{align-items:center;border:1px solid;border-radius:var(--a-border-radius-medium);display:flex;gap:var(--a-spacing-3);padding:var(--a-spacing-4)}.navds-alert__wrapper{max-width:43.5rem}.navds-alert--close-button>.navds-alert__wrapper{-webkit-margin-before:var(--a-spacing-05);margin-block-start:var(--a-spacing-05)}.navds-alert--small.navds-alert--close-button>.navds-alert__wrapper{-webkit-margin-before:var(--a-spacing-1);margin-block-start:var(--a-spacing-1)}.navds-alert--small{gap:var(--a-spacing-2);padding:var(--a-spacing-2) var(--a-spacing-4)}.navds-alert--full-width{border-radius:0}.navds-alert>.navds-alert__icon{align-self:flex-start;background:radial-gradient(circle,var(--a-surface-default) 50%,0,transparent);flex-shrink:0;font-size:1.5rem;height:var(--a-font-line-height-xlarge)}.navds-alert--small>.navds-alert__icon{-webkit-margin-before:0;height:var(--a-font-line-height-large);margin-block-start:0}.navds-alert--close-button>.navds-alert__icon{-webkit-margin-before:var(--a-spacing-05);margin-block-start:var(--a-spacing-05)}.navds-alert--small.navds-alert--close-button>.navds-alert__icon{-webkit-margin-before:var(--a-spacing-1);margin-block-start:var(--a-spacing-1)}.navds-alert--error{background-color:var(--ac-alert-error-bg,var(--a-surface-danger-subtle));border-color:var(--ac-alert-error-border,var(--a-border-danger))}.navds-alert--error>.navds-alert__icon{color:var(--ac-alert-icon-error-color,var(--a-icon-danger))}.navds-alert--warning{background-color:var(--ac-alert-warning-bg,var(--a-surface-warning-subtle));border-color:var(--ac-alert-warning-border,var(--a-border-warning))}.navds-alert--warning>.navds-alert__icon{background:radial-gradient(circle at 50% 57%,var(--a-surface-default) 32%,0,transparent);color:var(--ac-alert-icon-warning-color,var(--a-icon-warning))}.navds-alert--info{background-color:var(--ac-alert-info-bg,var(--a-surface-info-subtle));border-color:var(--ac-alert-info-border,var(--a-border-info))}.navds-alert--info>.navds-alert__icon{color:var(--ac-alert-icon-info-color,var(--a-icon-info))}.navds-alert--success{background-color:var(--ac-alert-success-bg,var(--a-surface-success-subtle));border-color:var(--ac-alert-success-border,var(--a-border-success))}.navds-alert--success>.navds-alert__icon{color:var(--ac-alert-icon-success-color,var(--a-icon-success))}.navds-alert--inline{background-color:transparent;border:none;padding:0}.navds-alert__button-wrapper{align-self:flex-start;display:flex;flex:1;flex-flow:row nowrap;justify-content:flex-end}
package/dist/component/hgrid.css CHANGED
@@ -11,10 +11,12 @@
11
11
  --__ac-hgrid-gap-lg: initial;
12
12
  --__ac-hgrid-gap-xl: initial;
13
13
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
14
+ --__ac-hgrid-align: initial;
14
15
 
15
16
  display: grid;
16
17
  grid-template-columns: var(--__ac-hgrid-columns);
17
18
  gap: var(--__ac-hgrid-gap);
19
+ align-items: var(--__ac-hgrid-align);
18
20
  }
19
21
 
20
22
  @media (min-width: 480px) {
package/dist/component/hgrid.min.css CHANGED
@@ -1,4 +1,4 @@
1
- .navds-hgrid{--__ac-hgrid-columns-xs:initial;--__ac-hgrid-columns-sm:initial;--__ac-hgrid-columns-md:initial;--__ac-hgrid-columns-lg:initial;--__ac-hgrid-columns-xl:initial;--__ac-hgrid-columns:var(--__ac-hgrid-columns-xs);--__ac-hgrid-gap-xs:initial;--__ac-hgrid-gap-sm:initial;--__ac-hgrid-gap-md:initial;--__ac-hgrid-gap-lg:initial;--__ac-hgrid-gap-xl:initial;--__ac-hgrid-gap:var(--__ac-hgrid-gap-xs);display:grid;gap:var(--__ac-hgrid-gap);grid-template-columns:var(--__ac-hgrid-columns)}@media (min-width:480px){.navds-hgrid{--__ac-hgrid-columns:var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs));--__ac-hgrid-gap:var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))}}@media (min-width:768px){.navds-hgrid{--__ac-hgrid-columns:var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs)));--__ac-hgrid-gap:var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs)))}}@media (min-width:1024px){.navds-hgrid{--__ac-hgrid-columns:var(
1
+ .navds-hgrid{--__ac-hgrid-columns-xs:initial;--__ac-hgrid-columns-sm:initial;--__ac-hgrid-columns-md:initial;--__ac-hgrid-columns-lg:initial;--__ac-hgrid-columns-xl:initial;--__ac-hgrid-columns:var(--__ac-hgrid-columns-xs);--__ac-hgrid-gap-xs:initial;--__ac-hgrid-gap-sm:initial;--__ac-hgrid-gap-md:initial;--__ac-hgrid-gap-lg:initial;--__ac-hgrid-gap-xl:initial;--__ac-hgrid-gap:var(--__ac-hgrid-gap-xs);--__ac-hgrid-align:initial;align-items:var(--__ac-hgrid-align);display:grid;gap:var(--__ac-hgrid-gap);grid-template-columns:var(--__ac-hgrid-columns)}@media (min-width:480px){.navds-hgrid{--__ac-hgrid-columns:var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs));--__ac-hgrid-gap:var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))}}@media (min-width:768px){.navds-hgrid{--__ac-hgrid-columns:var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs)));--__ac-hgrid-gap:var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs)))}}@media (min-width:1024px){.navds-hgrid{--__ac-hgrid-columns:var(
2
2
  --__ac-hgrid-columns-lg,var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs)))
3
3
  );--__ac-hgrid-gap:var(--__ac-hgrid-gap-lg,var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))))}}@media (min-width:1280px){.navds-hgrid{--__ac-hgrid-columns:var(
4
4
  --__ac-hgrid-columns-xl,var(--__ac-hgrid-columns-lg,var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs))))
package/dist/component/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Wed, 06 Sep 2023 09:14:55 GMT
4
+ * Generated on Thu, 07 Sep 2023 07:13:58 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-05: 0.125rem;
@@ -1362,8 +1362,15 @@ body,
1362
1362
  .navds-alert__wrapper {
1363
1363
  max-width: 43.5rem;
1364
1364
  }
1365
+ .navds-alert--close-button > .navds-alert__wrapper {
1366
+ margin-block-start: var(--a-spacing-05);
1367
+ }
1368
+ .navds-alert--small.navds-alert--close-button > .navds-alert__wrapper {
1369
+ margin-block-start: var(--a-spacing-1);
1370
+ }
1365
1371
  .navds-alert--small {
1366
1372
  padding: var(--a-spacing-2) var(--a-spacing-4);
1373
+ gap: var(--a-spacing-2);
1367
1374
  }
1368
1375
  .navds-alert--full-width {
1369
1376
  border-radius: 0;
@@ -1373,18 +1380,18 @@ body,
1373
1380
  font-size: 1.5rem;
1374
1381
  align-self: flex-start;
1375
1382
  height: var(--a-font-line-height-xlarge);
1376
- margin-inline: var(--a-spacing-1);
1377
- margin-block: 0;
1378
- margin-block-start: -1px;
1379
1383
  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
1380
1384
  }
1381
- .navds-alert--close-button > .navds-alert__icon,
1382
1385
  .navds-alert--small > .navds-alert__icon {
1383
1386
  margin-block-start: 0;
1384
- }
1385
- .navds-alert--small > .navds-alert__icon {
1386
1387
  height: var(--a-font-line-height-large);
1387
1388
  }
1389
+ .navds-alert--close-button > .navds-alert__icon {
1390
+ margin-block-start: var(--a-spacing-05);
1391
+ }
1392
+ .navds-alert--small.navds-alert--close-button > .navds-alert__icon {
1393
+ margin-block-start: var(--a-spacing-1);
1394
+ }
1388
1395
  .navds-alert--error {
1389
1396
  border-color: var(--ac-alert-error-border, var(--a-border-danger));
1390
1397
  background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
@@ -3758,10 +3765,12 @@ body,
3758
3765
  --__ac-hgrid-gap-lg: initial;
3759
3766
  --__ac-hgrid-gap-xl: initial;
3760
3767
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
3768
+ --__ac-hgrid-align: initial;
3761
3769
 
3762
3770
  display: grid;
3763
3771
  grid-template-columns: var(--__ac-hgrid-columns);
3764
3772
  gap: var(--__ac-hgrid-gap);
3773
+ align-items: var(--__ac-hgrid-align);
3765
3774
  }
3766
3775
  @media (min-width: 480px) {
3767
3776
  .navds-hgrid {