@miljodirektoratet/md-css 4.3.0 → 4.4.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 (10) hide show
  1. package/package.json +1 -1
  2. package/src/button/button.css +48 -9
  3. package/src/formElements/checkbox/checkbox.css +5 -5
  4. package/src/formElements/checkboxgroup/checkboxgroup.css +7 -1
  5. package/src/formElements/combobox/combobox.css +0 -1
  6. package/src/formElements/input/input.css +7 -20
  7. package/src/formElements/multiselect/multiselect.css +5 -2
  8. package/src/formElements/radiogroup/radiogroup.css +7 -1
  9. package/src/formElements/select/select.css +5 -2
  10. package/src/formElements/textarea/textarea.css +5 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@miljodirektoratet/md-css",
3
- "version": "4.3.0",
3
+ "version": "4.4.0",
4
4
  "description": "CSS for Miljødirektoratet",
5
5
  "author": "Miljødirektoratet",
6
6
  "main": "./src/index.css",
package/src/button/button.css CHANGED
@@ -6,7 +6,7 @@
6
6
  font-weight: 400;
7
7
  font-family: 'Open sans';
8
8
  font-size: 1rem;
9
- padding: 0.75rem 1.5rem;
9
+ padding: 0.75rem 1rem;
10
10
  width: fit-content;
11
11
  border: none;
12
12
  }
@@ -23,8 +23,8 @@
23
23
  }
24
24
 
25
25
  .md-button--small {
26
- padding: 0.4rem 0.8rem;
27
- border-radius: 0.43rem;
26
+ padding: 0.5rem 0.75rem;
27
+ border-radius: 0.5rem;
28
28
  }
29
29
 
30
30
  .md-button__topIcon {
@@ -41,7 +41,7 @@
41
41
  height: 1.25rem;
42
42
  width: 1.25rem;
43
43
  flex-shrink: 0;
44
- margin-right: 1rem;
44
+ margin-right: 0.5rem;
45
45
  }
46
46
 
47
47
  .md-button--small > .md-button__leftIcon {
@@ -52,7 +52,7 @@
52
52
  height: 1.25rem;
53
53
  width: 1.25rem;
54
54
  flex-shrink: 0;
55
- margin-left: 1rem;
55
+ margin-left: 0.5rem;
56
56
  }
57
57
  .md-button__rightIcon .md-loading-spinner {
58
58
  width: 1rem;
@@ -90,7 +90,7 @@
90
90
  background-color: #ffffff;
91
91
  border: 2px solid var(--mdPrimaryColor);
92
92
  color: var(--mdPrimaryColor);
93
- padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
93
+ padding: calc(0.75rem - 2px) calc(1rem - 2px);
94
94
  }
95
95
 
96
96
  .md-button--small.md-button--secondary {
@@ -111,7 +111,7 @@
111
111
 
112
112
  .md-button--secondary:disabled {
113
113
  background-color: #fff;
114
- color: var(--mdGreyColor20);
114
+ color: var(--mdGreyColor60);
115
115
  border-color: var(--mdGreyColor20);
116
116
  }
117
117
 
@@ -120,7 +120,7 @@
120
120
  }
121
121
 
122
122
  .md-button--secondary:disabled > .md-button__rightIcon {
123
- color: var(--mdGreyColor20);
123
+ color: var(--mdGreyColor60);
124
124
  }
125
125
 
126
126
  .md-button--tertiary {
@@ -128,7 +128,7 @@
128
128
  border: none;
129
129
  border-radius: 0.43rem;
130
130
  color: var(--mdPrimaryColor);
131
- padding: 0.75rem 1.5rem;
131
+ padding: 0.75rem 1rem;
132
132
  }
133
133
 
134
134
  .md-button--small.md-button--tertiary {
@@ -178,3 +178,42 @@
178
178
  .md-button--danger:hover:enabled {
179
179
  background-color: var(--mdErrorColor120);
180
180
  }
181
+
182
+ /* Danger secondary */
183
+ .md-button--danger-secondary {
184
+ background-color: #ffffff;
185
+ border: 2px solid var(--mdErrorColor);
186
+ color: var(--mdErrorColor);
187
+ padding: calc(0.75rem - 2px) calc(1rem - 2px);
188
+ }
189
+
190
+ .md-button--small.md-button--danger-secondary {
191
+ padding: 0.5rem 0.75rem;
192
+ }
193
+
194
+ .md-button--danger-secondary:hover:enabled {
195
+ background-color: var(--mdErrorBackgroundColor);
196
+ border-color: var(--mdErrorColor);
197
+ }
198
+
199
+ .md-button--danger-secondary:focus:enabled {
200
+ background-color: #ffffff;
201
+ border-color: var(--mdErrorColor);
202
+ color: var(--mdErrorColor);
203
+ outline: 2px var(--mdErrorColor) solid;
204
+ outline-offset: -6px;
205
+ }
206
+
207
+ .md-button--danger-secondary:disabled {
208
+ background-color: #fff;
209
+ color: var(--mdGreyColor60);
210
+ border-color: var(--mdGreyColor20);
211
+ }
212
+
213
+ .md-button--danger-secondary > .md-button__rightIcon {
214
+ color: var(--mdErrorColor);
215
+ }
216
+
217
+ .md-button--danger-secondary:disabled > .md-button__rightIcon {
218
+ color: var(--mdGreyColor60);
219
+ }
package/src/formElements/checkbox/checkbox.css CHANGED
@@ -44,18 +44,18 @@
44
44
  background-size: 1.125rem;
45
45
  }
46
46
 
47
- .md-checkbox--disabled .md-checkbox__input:checked + .md-checkbox__label::before {
48
- filter: grayscale(100%);
49
- }
50
-
51
47
  .md-checkbox--disabled .md-checkbox__label::before,
52
48
  .md-checkbox--disabled:focus-within .md-checkbox__label::before,
53
49
  .md-checkbox--disabled:hover .md-checkbox__label::before {
54
50
  background-color: var(--mdGreyColor20);
55
- border-color: var(--mdGreyColor80);
51
+ border-color: var(--mdGreyColor60);
56
52
  cursor: default;
57
53
  }
58
54
 
55
+ .md-checkbox--disabled .md-checkbox__input:checked + .md-checkbox__label::before {
56
+ background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iZTk2NWRkN2EtN2NlNS00MTc0LThjMjEtY2UwNjIzYmFmNTJhIiBkYXRhLW5hbWU9ImNoZWNrbWFyay1ncmVlbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTMgMTAuMDIiPjx0aXRsZT5jaGVja21hcmstZ3JlZW48L3RpdGxlPjxwYXRoIGQ9Ik0xMS4xNCwwLDQuODMsNi4zMWwtMy0zTDAsNS4xOSw0LjgzLDEwLDEzLDEuODZaIiBmaWxsPSIjODA4MDgwIiAvPjwvc3ZnPg==);
57
+ }
58
+
59
59
  .md-checkbox--disabled .md-checkbox__labelText,
60
60
  .md-checkbox--disabled .md-checkbox__label {
61
61
  cursor: default;
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
  }