@miljodirektoratet/md-css 4.2.0 → 4.3.1

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 (11) hide show
  1. package/package.json +1 -1
  2. package/src/colors.css +16 -1
  3. package/src/formElements/checkboxgroup/checkboxgroup.css +7 -1
  4. package/src/formElements/combobox/combobox.css +0 -1
  5. package/src/formElements/input/input.css +7 -20
  6. package/src/formElements/multiselect/multiselect.css +5 -2
  7. package/src/formElements/radiogroup/radiogroup.css +7 -1
  8. package/src/formElements/select/select.css +5 -2
  9. package/src/formElements/textarea/textarea.css +5 -21
  10. package/src/infoTag/infoTag.css +1 -1
  11. package/src/messages/alertMessage.css +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@miljodirektoratet/md-css",
3
- "version": "4.2.0",
3
+ "version": "4.3.1",
4
4
  "description": "CSS for Miljødirektoratet",
5
5
  "author": "Miljødirektoratet",
6
6
  "main": "./src/index.css",
package/src/colors.css CHANGED
@@ -1,8 +1,13 @@
1
1
  :root {
2
2
  --mdPrimaryColor: #005e5d;
3
3
  --mdPrimaryColor160: #003b3a;
4
+ --mdPrimaryColor140: #004646;
4
5
  --mdPrimaryColor120: #005251;
6
+ --mdPrimaryColor90: #196d6c;
5
7
  --mdPrimaryColor80: #337e7d;
8
+ --mdPrimaryColor70: #4c8e8d;
9
+ --mdPrimaryColor60: #669e9d;
10
+ --mdPrimaryColor50: #7faead;
6
11
  --mdPrimaryColor40: #99bebe;
7
12
  --mdPrimaryColor30: #b2cece;
8
13
  --mdPrimaryColor20: #ccdfde;
@@ -17,13 +22,23 @@
17
22
  --mdSecondaryColor40: #f7f5ed;
18
23
  --mdSecondaryColor20: #fbfaf6;
19
24
 
25
+ --mdTertiaryBlueColor: #1472ce;
26
+ --mdTertiaryBlueLightColor: #b9d9eb;
27
+ --mdTertiaryPinkColor: #ab5c57;
28
+ --mdTertiaryPinkLightColor: #e6baa8;
29
+ --mdTertiaryYellowColor: #d69a2d;
30
+ --mdTertiaryYellowLightColor: #ecd898;
31
+ --mdTertiaryBrownColor: #584446;
32
+ --mdTertiaryBrownLightColor: #d6d2c4;
33
+
20
34
  --mdTextColor: #222222;
21
35
 
22
- --mdWarningBackgoundColor: #fce4ca;
36
+ --mdWarningBackgroundColor: #fce4ca;
23
37
  --mdWarningColor: #de8215;
24
38
 
25
39
  --mdErrorColor: #ca0000;
26
40
  --mdErrorColor120: #b7090d;
41
+ --mdErrorBackgroundColor: #f5cccc;
27
42
 
28
43
  --mdGreyColor: #222222;
29
44
  --mdGreyColor10: #e8e8e8;
package/src/formElements/checkboxgroup/checkboxgroup.css CHANGED
@@ -3,12 +3,18 @@
3
3
  font-size: 1rem;
4
4
  border: none;
5
5
  padding: 0;
6
+ margin: 0;
7
+ }
8
+
9
+ .md-checkboxgroup .md-checkboxgroup__label-wrapper {
10
+ margin-bottom: 0.5rem;
6
11
  }
7
12
 
8
13
  .md-checkboxgroup .md-checkboxgroup__label {
9
14
  display: flex;
10
15
  align-items: center;
11
16
  font-weight: 600;
17
+ padding: 0;
12
18
  }
13
19
 
14
20
  .md-checkboxgroup .md-checkboxgroup__label > * + * {
@@ -30,7 +36,6 @@
30
36
  .md-checkboxgroup .md-checkboxgroup__options {
31
37
  display: flex;
32
38
  flex-direction: row;
33
- margin: 0.7rem 0;
34
39
  gap: 1rem;
35
40
  }
36
41
 
@@ -46,4 +51,5 @@
46
51
  .md-checkboxgroup__error {
47
52
  color: var(--mdErrorColor);
48
53
  font-size: 0.88rem;
54
+ margin-top: 0.5rem;
49
55
  }
package/src/formElements/combobox/combobox.css CHANGED
@@ -178,7 +178,6 @@
178
178
  }
179
179
  .md-combobox__help-text--open {
180
180
  padding-top: 0.5rem;
181
- padding-bottom: 0.5rem;
182
181
  max-height: 2000px;
183
182
  transition: max-height 0.5s ease-in;
184
183
  }
package/src/formElements/input/input.css CHANGED
@@ -69,13 +69,16 @@
69
69
 
70
70
  .md-input__wrapper {
71
71
  position: relative;
72
- margin: 0.7rem 0 0.3rem 0;
73
72
  }
74
73
 
75
74
  .md-input__wrapper.md-input__wrapper--small {
76
75
  max-width: 336px;
77
76
  }
78
77
 
78
+ .md-input__label-wrapper {
79
+ margin-bottom: 0.5rem;
80
+ }
81
+
79
82
  .md-input__label {
80
83
  display: flex;
81
84
  align-items: flex-end;
@@ -94,6 +97,7 @@
94
97
  .md-input__error {
95
98
  color: var(--mdErrorColor);
96
99
  font-size: 0.88rem;
100
+ margin-top: 0.5rem;
97
101
  }
98
102
 
99
103
  .md-input__help-text {
@@ -154,25 +158,8 @@
154
158
  margin-left: 0.3rem;
155
159
  }
156
160
 
157
- /* Placeholder "hacks" */
158
- .md-input::-webkit-input-placeholder {
159
- /* Chrome/Opera/Safari */
160
- color: var(--mdGreyColor40);
161
- font-family: 'Open sans';
162
- }
163
- .md-input::-moz-placeholder {
164
- /* Firefox 19+ */
165
- color: var(--mdGreyColor40);
166
- font-family: 'Open sans';
167
- }
168
- .md-input:-ms-input-placeholder {
169
- /* IE 10+ */
170
- color: var(--mdGreyColor40);
171
- font-family: 'Open sans';
172
- }
173
- .md-input:-moz-placeholder {
174
- /* Firefox 18- */
175
- color: var(--mdGreyColor40);
161
+ .md-input::placeholder {
162
+ color: var(--mdGreyColor60);
176
163
  font-family: 'Open sans';
177
164
  }
178
165
 
package/src/formElements/multiselect/multiselect.css CHANGED
@@ -15,7 +15,10 @@
15
15
  display: flex;
16
16
  align-items: flex-end;
17
17
  font-weight: 600;
18
- padding-bottom: 0.5rem;
18
+ }
19
+
20
+ .md-multiselect__label-wrapper {
21
+ margin-bottom: 0.5rem;
19
22
  }
20
23
 
21
24
  .md-multiselect__label > * + * {
@@ -99,7 +102,6 @@
99
102
 
100
103
  .md-multiselect__help-text--open {
101
104
  padding-top: 0.5rem;
102
- padding-bottom: 0.5rem;
103
105
  max-height: 2000px;
104
106
  transition: max-height 0.5s ease-in;
105
107
  }
@@ -202,6 +204,7 @@
202
204
  .md-multiselect__error {
203
205
  color: var(--mdErrorColor);
204
206
  font-size: 0.88em;
207
+ margin-top: 0.5rem;
205
208
  }
206
209
 
207
210
  .md-multiselect__chips {
package/src/formElements/radiogroup/radiogroup.css CHANGED
@@ -3,12 +3,18 @@
3
3
  font-size: 1rem;
4
4
  border: none;
5
5
  padding: 0;
6
+ margin: 0;
7
+ }
8
+
9
+ .md-radiogroup__label-wrapper {
10
+ margin-bottom: 0.5rem;
6
11
  }
7
12
 
8
13
  .md-radiogroup__label {
9
14
  display: flex;
10
15
  align-items: center;
11
16
  font-weight: 600;
17
+ padding: 0;
12
18
  }
13
19
 
14
20
  .md-radiogroup__label > * + * {
@@ -31,7 +37,6 @@
31
37
  display: flex;
32
38
  flex-direction: row;
33
39
  gap: 1rem;
34
- margin: 0.7rem 0;
35
40
  }
36
41
 
37
42
  .md-radiogroup__options--vertical {
@@ -56,6 +61,7 @@
56
61
  .md-radiogroup__error {
57
62
  color: var(--mdErrorColor);
58
63
  font-size: 0.88rem;
64
+ margin-top: 0.5rem;
59
65
  }
60
66
 
61
67
  /* Disabled */
package/src/formElements/select/select.css CHANGED
@@ -19,7 +19,10 @@
19
19
  display: flex;
20
20
  align-items: flex-end;
21
21
  font-weight: 600;
22
- padding-bottom: 0.5rem;
22
+ }
23
+
24
+ .md-select__label-wrapper {
25
+ margin-bottom: 0.5rem;
23
26
  }
24
27
 
25
28
  .md-select__label > * + * {
@@ -103,7 +106,6 @@
103
106
 
104
107
  .md-select__help-text--open {
105
108
  padding-top: 0.5rem;
106
- padding-bottom: 0.5rem;
107
109
  max-height: 2000px;
108
110
  transition: max-height 0.5s ease-in;
109
111
  }
@@ -191,4 +193,5 @@
191
193
  .md-select__error {
192
194
  color: var(--mdErrorColor);
193
195
  font-size: 0.88rem;
196
+ margin-top: 0.5rem;
194
197
  }
package/src/formElements/textarea/textarea.css CHANGED
@@ -43,8 +43,8 @@
43
43
  border-color: var(--mdErrorColor);
44
44
  }
45
45
 
46
- .md-textarea__wrapper {
47
- margin: 0.7rem 0 0.3rem 0;
46
+ .md-textarea__label-wrapper {
47
+ margin-bottom: 0.5rem;
48
48
  }
49
49
 
50
50
  .md-textarea__label {
@@ -65,6 +65,7 @@
65
65
  .md-textarea__error {
66
66
  color: var(--mdErrorColor);
67
67
  font-size: 0.88rem;
68
+ margin-top: 0.5rem;
68
69
  }
69
70
 
70
71
  .md-textarea__help-text {
@@ -79,24 +80,7 @@
79
80
  transition: max-height 0.5s ease-in;
80
81
  }
81
82
 
82
- /* Placeholder "hacks" */
83
- .md-textarea::-webkit-input-placeholder {
84
- /* Chrome/Opera/Safari */
85
- color: var(--mdGreyColor40);
86
- font-family: 'Open sans';
87
- }
88
- .md-textarea::-moz-placeholder {
89
- /* Firefox 19+ */
90
- color: var(--mdGreyColor40);
91
- font-family: 'Open sans';
92
- }
93
- .md-textarea:-ms-input-placeholder {
94
- /* IE 10+ */
95
- color: var(--mdGreyColor40);
96
- font-family: 'Open sans';
97
- }
98
- .md-textarea:-moz-placeholder {
99
- /* Firefox 18- */
100
- color: var(--mdGreyColor40);
83
+ .md-textarea::placeholder {
84
+ color: var(--mdGreyColor60);
101
85
  font-family: 'Open sans';
102
86
  }
package/src/infoTag/infoTag.css CHANGED
@@ -27,7 +27,7 @@
27
27
  background-color: var(--mdSecondaryColor40);
28
28
  }
29
29
  .md-info-tag--warning {
30
- background-color: var(--mdWarningBackgoundColor);
30
+ background-color: var(--mdWarningBackgroundColor);
31
31
  }
32
32
  .md-info-tag--warning.md-info-tag--button:hover {
33
33
  outline: 2px solid var(--mdWarningColor);
package/src/messages/alertMessage.css CHANGED
@@ -32,7 +32,7 @@
32
32
  background-color: var(--mdPrimaryColor20);
33
33
  }
34
34
  .md-alert-message--warning {
35
- background-color: var(--mdWarningBackgoundColor);
35
+ background-color: var(--mdWarningBackgroundColor);
36
36
  }
37
37
  .md-alert-message--error {
38
38
  background-color: var(--mdErrorColor);