@navikt/ds-css 0.18.2 → 0.18.5

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 (3) hide show
  1. package/alert.css +8 -50
  2. package/dist/index.css +11 -50
  3. package/package.json +3 -3
package/alert.css CHANGED
@@ -16,22 +16,13 @@
16
16
  --navds-semantic-color-feedback-success-border
17
17
  );
18
18
  --navds-alert-color-success-background: var(--navds-global-color-green-50);
19
- --navds-alert-color-error-icon: var(
20
- --navds-semantic-color-feedback-danger-icon
21
- );
22
- --navds-alert-color-warning-icon: var(--navds-global-color-orange-600);
23
- --navds-alert-color-info-icon: var(--navds-semantic-color-feedback-info-icon);
24
- --navds-alert-color-success-icon: var(
25
- --navds-semantic-color-feedback-success-icon
26
- );
27
- --navds-alert-color-icon-background: var(--navds-global-color-white);
28
19
  }
29
20
 
30
21
  .navds-alert {
31
22
  border-radius: var(--navds-border-radius-medium);
32
23
  border: 1px solid;
33
24
  border-color: var(--navds-alert-color-border);
34
- padding: calc(var(--navds-spacing-4) + 1px) calc(var(--navds-spacing-4) + 1px);
25
+ padding: var(--navds-spacing-4);
35
26
  display: flex;
36
27
  gap: var(--navds-spacing-3);
37
28
  align-items: center;
@@ -42,13 +33,19 @@
42
33
  }
43
34
 
44
35
  .navds-alert--small {
45
- padding: calc(var(--navds-spacing-1) - 1px) var(--navds-spacing-4);
36
+ padding: var(--navds-spacing-2);
37
+ gap: var(--navds-spacing-2);
46
38
  }
47
39
 
48
40
  .navds-alert--full-width {
49
41
  border-radius: 0;
50
42
  }
51
43
 
44
+ .navds-alert--full-width.navds-alert--small {
45
+ padding-right: var(--navds-spacing-4);
46
+ padding-left: var(--navds-spacing-4);
47
+ }
48
+
52
49
  .navds-alert > .navds-alert__icon {
53
50
  flex-shrink: 0;
54
51
  font-size: 1.5rem;
@@ -66,60 +63,21 @@
66
63
  background-color: var(--navds-alert-color-error-background);
67
64
  }
68
65
 
69
- .navds-alert--error > .navds-alert__icon {
70
- color: var(--navds-alert-color-error-icon);
71
- background: radial-gradient(
72
- circle,
73
- var(--navds-alert-color-icon-background) 50%,
74
- 0,
75
- transparent
76
- );
77
- }
78
-
79
66
  .navds-alert--warning {
80
67
  border-color: var(--navds-alert-color-warning-border);
81
68
  background-color: var(--navds-alert-color-warning-background);
82
69
  }
83
70
 
84
- .navds-alert--warning > .navds-alert__icon {
85
- color: var(--navds-alert-color-warning-icon);
86
- background: linear-gradient(
87
- var(--navds-alert-color-icon-background),
88
- var(--navds-alert-color-icon-background)
89
- )
90
- center / 16% 60% no-repeat;
91
- }
92
-
93
71
  .navds-alert--info {
94
72
  border-color: var(--navds-alert-color-info-border);
95
73
  background-color: var(--navds-alert-color-info-background);
96
74
  }
97
75
 
98
- .navds-alert--info > .navds-alert__icon {
99
- color: var(--navds-alert-color-info-icon);
100
- background: radial-gradient(
101
- circle,
102
- var(--navds-alert-color-icon-background) 50%,
103
- 0,
104
- transparent
105
- );
106
- }
107
-
108
76
  .navds-alert--success {
109
77
  border-color: var(--navds-alert-color-success-border);
110
78
  background-color: var(--navds-alert-color-success-background);
111
79
  }
112
80
 
113
- .navds-alert--success > .navds-alert__icon {
114
- color: var(--navds-alert-color-success-icon);
115
- background: radial-gradient(
116
- circle,
117
- var(--navds-alert-color-icon-background) 50%,
118
- 0,
119
- transparent
120
- );
121
- }
122
-
123
81
  .navds-alert--inline {
124
82
  background-color: transparent;
125
83
  border-color: transparent;