@miljodirektoratet/md-css 3.6.2 → 3.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.
@@ -1,6 +1,6 @@
1
1
  .md-input__outer-wrapper {
2
2
  font-family: 'Open sans';
3
- font-size: 16px;
3
+ font-size: 1rem;
4
4
  }
5
5
 
6
6
  .md-input__outer-wrapper--small {
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  .md-input {
11
- padding: 1em 2em 1em 1em;
11
+ padding: 1rem 2rem 1rem 1rem;
12
12
  max-width: 100%;
13
13
  width: 100%;
14
14
  background-color: #fff;
@@ -16,12 +16,12 @@
16
16
  border: 1px solid var(--mdGreyColor60);
17
17
  margin: 1px;
18
18
  color: var(--mdGreyColor);
19
- font-size: 16px;
19
+ font-size: 1rem;
20
20
  box-sizing: border-box;
21
21
  }
22
22
 
23
23
  .md-input--small {
24
- padding: 0.5em 2em 0.5em 1em;
24
+ padding: 0.5rem 2rem 0.5rem 1rem;
25
25
  }
26
26
 
27
27
  .md-input:not(.md-input.md-input--readonly):not(.md-input.md-input--disabled):active,
@@ -52,24 +52,24 @@
52
52
  }
53
53
 
54
54
  .md-input.md-input--has-suffix {
55
- padding-right: 5em;
55
+ padding-right: 5rem;
56
56
  }
57
57
 
58
58
  .md-input--small.md-input--has-suffix {
59
- padding-right: 3.5em;
59
+ padding-right: 3.5rem;
60
60
  }
61
61
 
62
62
  .md-input.md-input--has-prefix {
63
- padding-left: 2.5em;
63
+ padding-left: 2.5rem;
64
64
  }
65
65
 
66
66
  .md-input--small.md-input--has-prefix {
67
- padding-left: 1.8em;
67
+ padding-left: 1.8rem;
68
68
  }
69
69
 
70
70
  .md-input__wrapper {
71
71
  position: relative;
72
- margin: 0.7em 0 0.3em 0;
72
+ margin: 0.7rem 0 0.3rem 0;
73
73
  }
74
74
 
75
75
  .md-input__wrapper.md-input__wrapper--small {
@@ -83,7 +83,7 @@
83
83
  }
84
84
 
85
85
  .md-input__label > * + * {
86
- margin-left: 1em;
86
+ margin-left: 1rem;
87
87
  }
88
88
 
89
89
  .md-input__help-button {
@@ -93,7 +93,7 @@
93
93
 
94
94
  .md-input__error {
95
95
  color: var(--mdErrorColor);
96
- font-size: 0.88em;
96
+ font-size: 0.88rem;
97
97
  }
98
98
 
99
99
  .md-input__help-text {
@@ -103,17 +103,17 @@
103
103
  }
104
104
 
105
105
  .md-input__help-text--open {
106
- padding-top: 0.5em;
106
+ padding-top: 0.5rem;
107
107
  max-height: 2000px;
108
108
  transition: max-height 0.5s ease-in;
109
109
  }
110
110
 
111
111
  .md-input__prefix {
112
112
  position: absolute;
113
- top: 1.1em;
114
- left: 1em;
115
- height: 16px;
116
- width: 16px;
113
+ top: 1.1rem;
114
+ left: 1rem;
115
+ height: 1.25rem;
116
+ width: 1.25rem;
117
117
  display: flex;
118
118
  color: var(--mdPrimaryColor);
119
119
  }
@@ -123,35 +123,35 @@
123
123
  }
124
124
 
125
125
  .md-input__wrapper.md-input__wrapper--small .md-input__prefix {
126
- top: 0.65em;
127
- left: 0.5em;
126
+ top: 0.65rem;
127
+ left: 0.5rem;
128
128
  }
129
129
 
130
130
  .md-input__suffix {
131
131
  position: absolute;
132
- top: 1.05em;
133
- right: 0.9em;
132
+ top: 1.05rem;
133
+ right: 0.9rem;
134
134
  display: flex;
135
135
  }
136
136
 
137
137
  .md-input__suffix > * + * {
138
- margin-left: 0.5em;
138
+ margin-left: 0.5rem;
139
139
  }
140
140
 
141
141
  .md-input__error-icon {
142
- width: 20px;
143
- height: 20px;
144
- margin-left: 0.5em;
142
+ width: 1.25rem;
143
+ height: 1.25rem;
144
+ margin-left: 0.5rem;
145
145
  color: var(--mdErrorColor);
146
146
  }
147
147
 
148
148
  .md-input__wrapper.md-input__wrapper--small .md-input__suffix {
149
- top: 0.55em;
150
- right: 0.7em;
149
+ top: 0.55rem;
150
+ right: 0.7rem;
151
151
  }
152
152
 
153
153
  .md-input__wrapper.md-input__wrapper--small .md-input__suffix > * + * {
154
- margin-left: 0.3em;
154
+ margin-left: 0.3rem;
155
155
  }
156
156
 
157
157
  /* Placeholder "hacks" */
@@ -20,11 +20,11 @@
20
20
  display: flex;
21
21
  align-items: flex-end;
22
22
  font-weight: 600;
23
- padding-bottom: 0.5em;
23
+ padding-bottom: 0.5rem;
24
24
  }
25
25
 
26
26
  .md-multiautocomplete__label > * + * {
27
- margin-left: 1em;
27
+ margin-left: 1rem;
28
28
  }
29
29
 
30
30
  .md-multiautocomplete__input {
@@ -35,11 +35,11 @@
35
35
  color: var(--mdGreyColor);
36
36
  box-sizing: border-box;
37
37
  font-family: 'Open sans';
38
- font-size: 1em;
38
+ font-size: 1rem;
39
39
  display: flex;
40
40
  align-items: center;
41
41
  justify-content: space-between;
42
- padding: 1em;
42
+ padding: 1rem;
43
43
  border: 1px solid var(--mdGreyColor60);
44
44
  text-align: left;
45
45
  cursor: pointer;
@@ -52,7 +52,7 @@
52
52
  }
53
53
 
54
54
  .md-multiautocomplete--small > .md-multiautocomplete__input {
55
- padding: 0.75em;
55
+ padding: 0.75rem;
56
56
  }
57
57
 
58
58
  .md-multiautocomplete--disabled .md-multiautocomplete__input {
@@ -69,31 +69,31 @@
69
69
  .md-multiautocomplete__input-text {
70
70
  display: flex;
71
71
  flex-grow: 1;
72
- padding-right: 1em;
72
+ padding-right: 1rem;
73
73
  }
74
74
 
75
75
  .md-multiautocomplete__input.md-multiautocomplete__input--has-prefix {
76
- padding-left: 2.5em;
76
+ padding-left: 2.5rem;
77
77
  }
78
78
 
79
79
  .md-multiautocomplete__input--small.md-multiautocomplete__input--has-prefix {
80
- padding-left: 1.8em;
80
+ padding-left: 1.8rem;
81
81
  }
82
82
 
83
83
  .md-multiautocomplete__input__prefix {
84
84
  position: absolute;
85
- top: 1.3em;
86
- left: 1em;
87
- height: 16px;
88
- width: 16px;
85
+ top: 1.1rem;
86
+ left: 1rem;
87
+ height: 1.25rem;
88
+ width: 1.25rem;
89
89
  display: flex;
90
90
  color: var(--mdPrimaryColor);
91
91
  z-index: 2;
92
92
  }
93
93
 
94
94
  .md-multiautocomplete--small > .md-multiautocomplete__input__prefix {
95
- top: 1em;
96
- left: 1em;
95
+ top: 1rem;
96
+ left: 1rem;
97
97
  }
98
98
 
99
99
  .md-multiautocomplete__input__prefix.md-multiautocomplete__input__prefix--disabled {
@@ -102,23 +102,23 @@
102
102
 
103
103
  .md-multiautocomplete__input-icon {
104
104
  position: absolute;
105
- top: 1.3em;
105
+ top: 1.3rem;
106
106
  right: 0.9em;
107
107
  display: flex;
108
- width: 16px;
109
- height: 16px;
108
+ width: 1rem;
109
+ height: 1rem;
110
110
  rotate: 90deg;
111
111
  color: var(--mdGreyColor);
112
112
  z-index: 0;
113
113
  }
114
114
 
115
115
  .md-multiautocomplete--small > .md-multiautocomplete__input-icon {
116
- top: 1em;
117
- right: 1em;
116
+ top: 1rem;
117
+ right: 1rem;
118
118
  }
119
119
 
120
120
  .md-multiautocomplete__button-text {
121
- padding-right: 0.5em;
121
+ padding-right: 0.5rem;
122
122
  width: 90%;
123
123
  overflow: hidden;
124
124
  white-space: nowrap;
@@ -127,11 +127,11 @@
127
127
 
128
128
  .md-multiautocomplete__button-hasmultiple {
129
129
  position: absolute;
130
- top: 1.5em;
131
- right: 4.5em;
130
+ top: 1.5rem;
131
+ right: 4.5rem;
132
132
  display: flex;
133
133
  z-index: 0;
134
- font-size: 0.8em;
134
+ font-size: 0.8rem;
135
135
  }
136
136
 
137
137
  .md-multiautocomplete__help-text {
@@ -141,8 +141,8 @@
141
141
  }
142
142
 
143
143
  .md-multiautocomplete__help-text--open {
144
- padding-top: 0.5em;
145
- padding-bottom: 0.5em;
144
+ padding-top: 0.5rem;
145
+ padding-bottom: 0.5rem;
146
146
  max-height: 2000px;
147
147
  transition: max-height 0.5s ease-in;
148
148
  }
@@ -154,7 +154,7 @@
154
154
  z-index: -1;
155
155
  opacity: 0;
156
156
  transition: max-height 0.5s ease-in-out;
157
- width: calc(100% - 4px); /* Full width minus border-width */
157
+ width: 100%;
158
158
  }
159
159
 
160
160
  .md-multiautocomplete__dropdown-item {
@@ -162,11 +162,11 @@
162
162
  align-items: center;
163
163
  font-family: 'Open sans';
164
164
  border: 0;
165
- font-size: 1em;
165
+ font-size: 1rem;
166
166
  background-color: #fff;
167
167
  width: 100%;
168
168
  text-align: left;
169
- padding: 0.9em;
169
+ padding: 0.9rem;
170
170
  transition: background-color 0.15s ease-in-out;
171
171
  cursor: pointer;
172
172
  }
@@ -190,22 +190,22 @@
190
190
  .md-multiautocomplete__dropdown-item-clear {
191
191
  display: flex;
192
192
  flex-shrink: 0;
193
- height: 12px;
194
- width: 12px;
193
+ height: 0.75rem;
194
+ width: 0.75rem;
195
195
  color: var(--mdPrimaryColor);
196
196
  }
197
197
 
198
198
  .md-multiautocomplete__dropdown-no-results {
199
- padding: 0.9em;
199
+ padding: 0.9rem;
200
200
  background-color: #fff;
201
201
  font-style: italic;
202
202
  }
203
203
 
204
204
  .md-multiautocomplete__chips {
205
205
  display: flex;
206
- margin-top: 0.7em;
206
+ margin-top: 0.7rem;
207
207
  flex-wrap: wrap;
208
- gap: 0.5em;
208
+ gap: 0.5rem;
209
209
  }
210
210
 
211
211
  /* Open state */
@@ -213,10 +213,10 @@
213
213
  border-left: 2px solid var(--mdPrimaryColor);
214
214
  border-right: 2px solid var(--mdPrimaryColor);
215
215
  border-top: 2px solid var(--mdPrimaryColor);
216
- padding-bottom: calc(1em - 1px);
216
+ padding-bottom: calc(1rem - 1px);
217
217
  }
218
218
  .md-multiautocomplete--open.md-multiautocomplete--small .md-multiautocomplete__input {
219
- padding-bottom: calc(0.75em - 1px);
219
+ padding-bottom: calc(0.75rem - 1px);
220
220
  }
221
221
 
222
222
  .md-multiautocomplete--open .md-multiautocomplete__dropdown {
@@ -247,5 +247,5 @@
247
247
  /* Error text */
248
248
  .md-multiautocomplete__error {
249
249
  color: var(--mdErrorColor);
250
- font-size: 0.88em;
250
+ font-size: 0.88rem;
251
251
  }
@@ -15,22 +15,22 @@
15
15
  display: flex;
16
16
  align-items: flex-end;
17
17
  font-weight: 600;
18
- padding-bottom: 0.5em;
18
+ padding-bottom: 0.5rem;
19
19
  }
20
20
 
21
21
  .md-multiselect__label > * + * {
22
- margin-left: 1em;
22
+ margin-left: 1rem;
23
23
  }
24
24
 
25
25
  .md-multiselect__button {
26
26
  font-family: 'Open sans';
27
- font-size: 1em;
27
+ font-size: 1rem;
28
28
  width: 100%;
29
29
  display: flex;
30
30
  align-items: center;
31
31
  justify-content: space-between;
32
32
  background-color: #fff;
33
- padding: 1em;
33
+ padding: 1rem;
34
34
  border: 1px solid var(--mdGreyColor60);
35
35
  color: var(--mdGreyColor);
36
36
  text-align: left;
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  .md-multiselect__button.md-multiselect--small {
41
- padding: 0.75em;
41
+ padding: 0.75rem;
42
42
  }
43
43
 
44
44
  .md-multiselect--disabled .md-multiselect__button {
@@ -55,13 +55,13 @@
55
55
  .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus,
56
56
  .md-multiselect:not(.md-multiselect--disabled)
57
57
  .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-within {
58
- padding: calc(0.75em - 1px);
58
+ padding: calc(0.75rem - 1px);
59
59
  border: 2px solid var(--mdPrimaryColor80);
60
60
  }
61
61
 
62
62
  .md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus,
63
63
  .md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus-within {
64
- padding: calc(1em - 1px);
64
+ padding: calc(1rem - 1px);
65
65
  border: 2px solid var(--mdPrimaryColor80);
66
66
  }
67
67
 
@@ -70,7 +70,7 @@
70
70
  }
71
71
 
72
72
  .md-multiselect__button-text {
73
- padding-right: 0.5em;
73
+ padding-right: 0.5rem;
74
74
  width: 90%;
75
75
  overflow: hidden;
76
76
  white-space: nowrap;
@@ -80,15 +80,15 @@
80
80
  .md-multiselect__button-icon {
81
81
  display: flex;
82
82
  flex-shrink: 0;
83
- width: 15px;
84
- height: 15px;
83
+ width: 0.9375rem;
84
+ height: 0.9375rem;
85
85
  rotate: 90deg;
86
86
  color: var(--mdGreyColor);
87
87
  }
88
88
 
89
89
  .md-multiselect__button-hasmultiple {
90
- margin-right: 1em;
91
- font-size: 0.8em;
90
+ margin-right: 1rem;
91
+ font-size: 0.8rem;
92
92
  }
93
93
 
94
94
  .md-multiselect__help-text {
@@ -98,8 +98,8 @@
98
98
  }
99
99
 
100
100
  .md-multiselect__help-text--open {
101
- padding-top: 0.5em;
102
- padding-bottom: 0.5em;
101
+ padding-top: 0.5rem;
102
+ padding-bottom: 0.5rem;
103
103
  max-height: 2000px;
104
104
  transition: max-height 0.5s ease-in;
105
105
  }
@@ -111,7 +111,7 @@
111
111
  .md-multiselect__dropdown {
112
112
  position: absolute;
113
113
  z-index: -1;
114
- width: calc(100% - 4px);
114
+ width: 100%;
115
115
  max-height: 0;
116
116
  overflow: hidden;
117
117
  opacity: 0;
@@ -122,7 +122,7 @@
122
122
  display: flex;
123
123
  align-items: center;
124
124
  font-family: 'Open sans';
125
- font-size: 1em;
125
+ font-size: 1rem;
126
126
  border: 0;
127
127
  background-color: #fff;
128
128
  text-align: left;
@@ -140,7 +140,7 @@
140
140
  display: flex;
141
141
  flex-shrink: 0;
142
142
  flex-grow: 1;
143
- padding: 0.75em;
143
+ padding: 0.75rem;
144
144
  }
145
145
 
146
146
  .md-multiselect__dropdown-item .md-checkbox .md-checkbox__label .md-checkbox__labelText {
@@ -149,10 +149,10 @@
149
149
 
150
150
  .md-multiselect__dropdown-item .md-checkbox__labelText {
151
151
  font-family: 'Open Sans';
152
- font-size: 16px;
152
+ font-size: 1rem;
153
153
  font-style: normal;
154
154
  font-weight: 400;
155
- line-height: 22px;
155
+ line-height: 1.375rem;
156
156
  color: var(--mdGreyColor);
157
157
  }
158
158
 
@@ -179,7 +179,7 @@
179
179
  .md-multiselect__dropdown-item-text {
180
180
  display: flex;
181
181
  flex-grow: 1;
182
- margin-left: 1em;
182
+ margin-left: 1rem;
183
183
  }
184
184
 
185
185
  .md-multiselect__dropdown-item-checkbox {
@@ -187,8 +187,8 @@
187
187
  border: 1px solid var(--mdGreyColor60);
188
188
  content: '';
189
189
  cursor: pointer;
190
- height: 20px;
191
- width: 20px;
190
+ height: 1.25rem;
191
+ width: 1.25rem;
192
192
  }
193
193
 
194
194
  .md-multiselect__dropdown-item--selected .md-multiselect__dropdown-item-checkbox {
@@ -196,7 +196,7 @@
196
196
  background-repeat: no-repeat;
197
197
  background-position-y: 2px;
198
198
  background-position-x: 1px;
199
- background-size: 18px;
199
+ background-size: 1.125rem;
200
200
  }
201
201
 
202
202
  .md-multiselect__error {
@@ -206,9 +206,9 @@
206
206
 
207
207
  .md-multiselect__chips {
208
208
  display: flex;
209
- margin-top: 0.7em;
209
+ margin-top: 0.7rem;
210
210
  flex-wrap: wrap;
211
- gap: 0.5em;
211
+ gap: 0.5rem;
212
212
  }
213
213
 
214
214
  /* Open state */
@@ -216,27 +216,27 @@
216
216
  border-top: 2px solid var(--mdPrimaryColor80);
217
217
  border-right: 2px solid var(--mdPrimaryColor80);
218
218
  border-left: 2px solid var(--mdPrimaryColor80);
219
- padding: calc(1em - 1px);
220
- padding-bottom: 1em;
219
+ padding: calc(1rem - 1px);
220
+ padding-bottom: 1rem;
221
221
  }
222
222
 
223
223
  .md-multiselect--open .md-multiselect__button.md-multiselect--small {
224
224
  border-top: 2px solid var(--mdPrimaryColor80);
225
225
  border-right: 2px solid var(--mdPrimaryColor80);
226
226
  border-left: 2px solid var(--mdPrimaryColor80);
227
- padding: calc(0.75em - 1px);
228
- padding-bottom: 0.75em;
227
+ padding: calc(0.75rem - 1px);
228
+ padding-bottom: 0.75rem;
229
229
  }
230
230
 
231
231
  .md-multiselect__button:not(.md-multiselect__button--open):focus,
232
232
  .md-multiselect__button:not(.md-multiselect__button--open):focus-within {
233
- padding: calc(1em - 1px);
233
+ padding: calc(1rem - 1px);
234
234
  border: 2px solid var(--mdPrimaryColor80);
235
235
  }
236
236
 
237
237
  .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus,
238
238
  .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-within {
239
- padding: calc(0.75em - 1px);
239
+ padding: calc(0.75rem - 1px);
240
240
  border: 2px solid var(--mdPrimaryColor80);
241
241
  }
242
242
 
@@ -1,6 +1,6 @@
1
1
  .md-radiobutton {
2
2
  font-family: 'Open sans';
3
- font-size: 16px;
3
+ font-size: 1rem;
4
4
  border: none;
5
5
  padding: 0;
6
6
  }
@@ -8,7 +8,6 @@
8
8
  .md-radiobutton {
9
9
  display: flex;
10
10
  align-items: center;
11
- cursor: pointer;
12
11
  position: relative;
13
12
  }
14
13
 
@@ -17,10 +16,6 @@
17
16
  outline-offset: 2px;
18
17
  }
19
18
 
20
- .md-radiobutton:hover {
21
- text-decoration: underline;
22
- }
23
-
24
19
  .md-radiobutton input[type='radio'] {
25
20
  position: absolute;
26
21
  left: 0;
@@ -28,6 +23,11 @@
28
23
  cursor: pointer;
29
24
  }
30
25
 
26
+ .md-radiobutton__label:hover {
27
+ text-decoration: underline;
28
+ cursor: pointer;
29
+ }
30
+
31
31
  .md-radiobutton__check-area {
32
32
  width: 1.45rem;
33
33
  flex-shrink: 0;
@@ -48,8 +48,8 @@
48
48
  }
49
49
 
50
50
  .md-radiobutton__selected-dot {
51
- width: 0.6em;
52
- height: 0.6em;
51
+ width: 0.6rem;
52
+ height: 0.6rem;
53
53
  display: block;
54
54
  background-color: var(--mdPrimaryColor);
55
55
  border-radius: 50%;
@@ -1,6 +1,6 @@
1
1
  .md-radiogroup {
2
2
  font-family: 'Open sans';
3
- font-size: 16px;
3
+ font-size: 1rem;
4
4
  border: none;
5
5
  padding: 0;
6
6
  }
@@ -12,7 +12,7 @@
12
12
  }
13
13
 
14
14
  .md-radiogroup__label > * + * {
15
- margin-left: 1em;
15
+ margin-left: 1rem;
16
16
  }
17
17
 
18
18
  .md-radiogroup__help-text {
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  .md-radiogroup__help-text--open {
25
- padding-top: 0.5em;
25
+ padding-top: 0.5rem;
26
26
  max-height: 2000px;
27
27
  transition: max-height 0.5s ease-in;
28
28
  }
@@ -30,8 +30,8 @@
30
30
  .md-radiogroup__options {
31
31
  display: flex;
32
32
  flex-direction: row;
33
- gap: 1em;
34
- margin: 0.7em 0;
33
+ gap: 1rem;
34
+ margin: 0.7rem 0;
35
35
  }
36
36
 
37
37
  .md-radiogroup__options--vertical {
@@ -47,15 +47,15 @@
47
47
  }
48
48
 
49
49
  .md-radiogroup__options--vertical .md-radiogroup-option {
50
- margin-bottom: 1em;
50
+ margin-bottom: 1rem;
51
51
  }
52
52
  .md-radiogroup__options--vertical .md-radiogroup-option:last-child {
53
- margin-bottom: 0.2em;
53
+ margin-bottom: 0.2rem;
54
54
  }
55
55
 
56
56
  .md-radiogroup__error {
57
57
  color: var(--mdErrorColor);
58
- font-size: 0.88em;
58
+ font-size: 0.88rem;
59
59
  }
60
60
 
61
61
  /* Disabled */
@@ -77,7 +77,7 @@
77
77
  flex-wrap: wrap;
78
78
  }
79
79
  .md-radiogroup-option {
80
- margin-bottom: 0.5em;
80
+ margin-bottom: 0.5rem;
81
81
  }
82
82
  .md-radiogroup__help-text {
83
83
  width: 100%;