@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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@miljodirektoratet/md-css",
3
- "version": "3.6.2",
3
+ "version": "3.8.0",
4
4
  "description": "CSS for Miljødirektoratet",
5
5
  "author": "Miljødirektoratet",
6
6
  "main": "./src/index.css",
@@ -3,12 +3,12 @@
3
3
  border: 1px solid var(--mdGreyColor60);
4
4
  color: var(--mdGreyColor);
5
5
  font-family: 'Open sans';
6
- margin-bottom: 1em;
6
+ margin-bottom: 1rem;
7
7
  transition: all 0.2s linear;
8
8
  }
9
9
 
10
10
  .md-accordion-item.md-accordion-item--rounded {
11
- border-radius: 4px;
11
+ border-radius: 0.25rem;
12
12
  }
13
13
 
14
14
  .md-accordion-item.md-accordion-item--secondary {
@@ -52,7 +52,7 @@
52
52
  padding: 1.5em 1.8em;
53
53
  cursor: pointer;
54
54
  text-align: left;
55
- line-height: 24px;
55
+ line-height: 1.5rem;
56
56
  }
57
57
 
58
58
  .md-accordion-item__header:focus {
@@ -67,9 +67,9 @@
67
67
 
68
68
  .md-accordion-item__header .md-accordion-item__header-icon {
69
69
  position: relative;
70
- width: 12px;
71
- height: 12px;
72
- min-width: 12px;
70
+ width: 0.75rem;
71
+ height: 0.75rem;
72
+ min-width: 0.75rem;
73
73
  }
74
74
  .md-accordion-item__header .md-accordion-item__header-icon:before,
75
75
  .md-accordion-item__header .md-accordion-item__header-icon:after {
@@ -82,7 +82,7 @@
82
82
  .md-accordion-item__header .md-accordion-item__header-icon:before {
83
83
  top: 0;
84
84
  left: 50%;
85
- width: 2px;
85
+ width: 0.125rem;
86
86
  height: 100%;
87
87
  margin-left: -1px;
88
88
  }
@@ -91,7 +91,7 @@
91
91
  top: 50%;
92
92
  left: 0;
93
93
  width: 100%;
94
- height: 2px;
94
+ height: 0.125rem;
95
95
  margin-top: -1px;
96
96
  }
97
97
  .md-accordion-item__header--expanded .md-accordion-item__header-icon:before {
@@ -102,7 +102,7 @@
102
102
  }
103
103
 
104
104
  .md-accordion-item__header-label {
105
- font-size: 20px;
105
+ font-size: 1.25rem;
106
106
  margin-left: 1em;
107
107
  }
108
108
  .md-accordion-item__header:hover .md-accordion-item__header-label {
@@ -111,26 +111,26 @@
111
111
 
112
112
  /* CONTENT */
113
113
  .md-accordion-item__content {
114
- padding: 0 1.8em;
114
+ padding: 0 1.8rem;
115
115
  max-height: 0;
116
116
  overflow: hidden;
117
117
  transition: all 0.15s linear;
118
118
  }
119
119
  .md-accordion-item__content--expanded {
120
120
  max-height: 5000px;
121
- padding: 1em 1.8em 1.5em 1.8em;
121
+ padding: 1rem 1.8rem 1.5rem 1.8rem;
122
122
  transition: all 0.15s linear;
123
123
  }
124
124
 
125
125
  .md-accordion-item__close-button {
126
126
  display: flex;
127
- gap: 1em;
127
+ gap: 1rem;
128
128
  padding: 0;
129
129
  background: none;
130
130
  border: 0;
131
- margin: 2em 0 0 -0.2em;
131
+ margin: 2rem 0 0 -0.2rem;
132
132
  cursor: pointer;
133
- font-size: 16px;
133
+ font-size: 1rem;
134
134
  }
135
135
 
136
136
  .md-accordion-item__close-button:hover {
@@ -143,8 +143,8 @@
143
143
  }
144
144
 
145
145
  .md-accordion-item__close-button__icon {
146
- height: 20px;
147
- width: 20px;
146
+ height: 1.25rem;
147
+ width: 1.25rem;
148
148
  }
149
149
 
150
150
  /* DISABLED */
@@ -78,11 +78,11 @@
78
78
  background-color: #ffffff;
79
79
  border: 2px solid var(--mdPrimaryColor);
80
80
  color: var(--mdPrimaryColor);
81
- padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
81
+ padding: 0.75rem 1.5rem;
82
82
  }
83
83
 
84
84
  .md-button--small.md-button--secondary {
85
- padding: calc(0.4rem - 2px) calc(0.8rem - 2px);
85
+ padding: 0.5rem 0.75rem;
86
86
  }
87
87
 
88
88
  .md-button--secondary:hover:enabled {
@@ -116,11 +116,11 @@
116
116
  border: none;
117
117
  border-radius: 0.43rem;
118
118
  color: var(--mdPrimaryColor);
119
- padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
119
+ padding: 0.75rem 1.5rem;
120
120
  }
121
121
 
122
122
  .md-button--small.md-button--tertiary {
123
- padding: calc(0.4rem - 2px) calc(0.8rem - 2px);
123
+ padding: 0.5rem 0.75rem;
124
124
  }
125
125
 
126
126
  .md-button--tertiary:hover:enabled {
@@ -5,12 +5,12 @@
5
5
  outline: 1px solid var(--mdPrimaryColor);
6
6
  outline-offset: -1px;
7
7
  border: none;
8
- border-radius: 10em;
8
+ border-radius: 10rem;
9
9
  color: var(--mdPrimaryColor);
10
10
  font-weight: 400;
11
11
  font-family: 'Open sans';
12
12
  font-size: 1rem;
13
- line-height: 22px;
13
+ line-height: 1.375rem;
14
14
  padding: 0.5rem 1rem;
15
15
  cursor: pointer;
16
16
  text-align: left;
@@ -59,9 +59,9 @@
59
59
 
60
60
  .md-chip__left-icon {
61
61
  display: flex;
62
- width: 16px;
63
- height: 16px;
64
- margin-right: 0.66em;
62
+ width: 1rem;
63
+ height: 1rem;
64
+ margin-right: 0.66rem;
65
65
  }
66
66
 
67
67
  .md-chip__label {
@@ -70,7 +70,7 @@
70
70
 
71
71
  .md-chip__right-icon {
72
72
  display: flex;
73
- width: 16px;
74
- height: 16px;
75
- margin-left: 0.8em;
73
+ width: 1rem;
74
+ height: 1rem;
75
+ margin-left: 0.8rem;
76
76
  }
@@ -1,14 +1,14 @@
1
1
  .md-filelist {
2
2
  display: flex;
3
3
  flex-direction: column;
4
- gap: 0.5em;
4
+ gap: 0.5rem;
5
5
  }
6
6
 
7
7
  .md-filelist__file {
8
8
  display: flex;
9
9
  justify-content: space-between;
10
10
  border: 1px solid var(--mdPrimaryColor);
11
- padding: 0.8em 1.1em;
11
+ padding: 0.8rem 1.1rem;
12
12
  font-family: 'Open sans';
13
13
  background-color: #fff;
14
14
  transition: background 0.2s linear;
@@ -21,36 +21,36 @@
21
21
 
22
22
  .md-filelist__file-label {
23
23
  display: flex;
24
- gap: 1em;
25
- font-size: 16px;
24
+ gap: 1rem;
25
+ font-size: 1rem;
26
26
  }
27
27
 
28
28
  .md-filelist__file-icon {
29
- width: 32px;
29
+ width: 2rem;
30
30
  }
31
31
 
32
32
  .md-filelist__file-size {
33
- font-size: 14px;
34
- margin-top: 0.3em;
33
+ font-size: 0.875rem;
34
+ margin-top: 0.3rem;
35
35
  }
36
36
 
37
37
  /* File actions */
38
38
  .md-filelist__file-actions {
39
39
  display: flex;
40
40
  align-items: center;
41
- gap: 1em;
41
+ gap: 1rem;
42
42
  }
43
43
 
44
44
  .md-filelist__file-actions-button {
45
45
  display: flex;
46
46
  align-items: center;
47
47
  justify-content: center;
48
- width: 40px;
49
- height: 40px;
48
+ width: 2.5rem;
49
+ height: 2.5rem;
50
50
  background-color: transparent;
51
- border-radius: 100px;
51
+ border-radius: 6.25rem;
52
52
  border: 0;
53
- padding: 0.2em;
53
+ padding: 0.2rem;
54
54
  cursor: pointer;
55
55
  transition: background 0.1s linear;
56
56
  }
@@ -61,6 +61,6 @@
61
61
  }
62
62
 
63
63
  .md-filelist__file-action-icon {
64
- width: 20px;
65
- height: 20px;
64
+ width: 1.25rem;
65
+ height: 1.25rem;
66
66
  }
@@ -4,11 +4,11 @@
4
4
  }
5
5
 
6
6
  .md-autocomplete--medium {
7
- max-width: 440px;
7
+ max-width: 27.5rem;
8
8
  }
9
9
 
10
10
  .md-autocomplete--small {
11
- max-width: 260px;
11
+ max-width: 16.25rem;
12
12
  }
13
13
 
14
14
  .md-autocomplete__container {
@@ -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-autocomplete__label > * + * {
27
- margin-left: 1em;
27
+ margin-left: 1rem;
28
28
  }
29
29
 
30
30
  .md-autocomplete__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-autocomplete--small > .md-autocomplete__input {
55
- padding: 0.75em;
55
+ padding: 0.75rem;
56
56
  }
57
57
 
58
58
  .md-autocomplete--disabled .md-autocomplete__input {
@@ -69,31 +69,31 @@
69
69
  .md-autocomplete__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-autocomplete__input.md-autocomplete__input--has-prefix {
76
- padding-left: 2.5em;
76
+ padding-left: 2.5rem;
77
77
  }
78
78
 
79
79
  .md-autocomplete__input--small.md-autocomplete__input--has-prefix {
80
- padding-left: 1.8em;
80
+ padding-left: 1.8rem;
81
81
  }
82
82
 
83
83
  .md-autocomplete__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-autocomplete--small > .md-autocomplete__input__prefix {
95
- top: 1em;
96
- left: 1em;
95
+ top: 1rem;
96
+ left: 1rem;
97
97
  }
98
98
 
99
99
  .md-autocomplete__input__prefix.md-autocomplete__input__prefix--disabled {
@@ -102,19 +102,19 @@
102
102
 
103
103
  .md-autocomplete__input-icon {
104
104
  position: absolute;
105
- top: 1.3em;
106
- right: 0.9em;
105
+ top: 1.3rem;
106
+ right: 0.9rem;
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-autocomplete--small > .md-autocomplete__input-icon {
116
- top: 1em;
117
- right: 1em;
116
+ top: 1rem;
117
+ right: 1rem;
118
118
  }
119
119
 
120
120
  .md-autocomplete__help-text {
@@ -124,8 +124,8 @@
124
124
  }
125
125
 
126
126
  .md-autocomplete__help-text--open {
127
- padding-top: 0.5em;
128
- padding-bottom: 0.5em;
127
+ padding-top: 0.5rem;
128
+ padding-bottom: 0.5rem;
129
129
  max-height: 2000px;
130
130
  transition: max-height 0.5s ease-in;
131
131
  }
@@ -137,19 +137,19 @@
137
137
  z-index: -1;
138
138
  opacity: 0;
139
139
  transition: max-height 0.5s ease-in-out;
140
- width: calc(100% - 4px); /* Full width minus border-width */
140
+ width: 100%;
141
141
  }
142
142
 
143
143
  .md-autocomplete__dropdown-item {
144
144
  display: flex;
145
145
  align-items: center;
146
146
  font-family: 'Open sans';
147
- font-size: 1em;
147
+ font-size: 1rem;
148
148
  border: 0;
149
149
  background-color: #fff;
150
150
  width: 100%;
151
151
  text-align: left;
152
- padding: 0.9em;
152
+ padding: 0.9rem;
153
153
  transition: background-color 0.15s ease-in-out;
154
154
  cursor: pointer;
155
155
  }
@@ -173,13 +173,13 @@
173
173
  .md-autocomplete__dropdown-item-clear {
174
174
  display: flex;
175
175
  flex-shrink: 0;
176
- height: 12px;
177
- width: 12px;
176
+ height: 0.75rem;
177
+ width: 0.75rem;
178
178
  color: var(--mdPrimaryColor);
179
179
  }
180
180
 
181
181
  .md-autocomplete__dropdown-no-results {
182
- padding: 0.9em;
182
+ padding: 0.9rem;
183
183
  background-color: #fff;
184
184
  font-style: italic;
185
185
  }
@@ -189,14 +189,14 @@
189
189
  border-left: 2px solid var(--mdPrimaryColor);
190
190
  border-right: 2px solid var(--mdPrimaryColor);
191
191
  border-top: 2px solid var(--mdPrimaryColor);
192
- padding-bottom: calc(1em - 1px);
192
+ padding-bottom: calc(1rem - 1px);
193
193
  }
194
194
  .md-autocomplete--open.md-autocomplete--small .md-autocomplete__input {
195
- padding-bottom: calc(0.75em - 1px);
195
+ padding-bottom: calc(0.75rem - 1px);
196
196
  }
197
197
 
198
198
  .md-autocomplete--open .md-autocomplete__dropdown {
199
- max-height: 350px;
199
+ max-height: 21.875rem;
200
200
  overflow-y: auto;
201
201
  opacity: 1;
202
202
  transition: max-height 0.5s ease-in-out;
@@ -223,5 +223,5 @@
223
223
  /* Error text */
224
224
  .md-autocomplete__error {
225
225
  color: var(--mdErrorColor);
226
- font-size: 0.88em;
226
+ font-size: 0.88rem;
227
227
  }
@@ -21,9 +21,9 @@
21
21
  border: 1px solid var(--mdGreyColor60);
22
22
  content: '';
23
23
  cursor: pointer;
24
- height: 20px;
25
- width: 20px;
26
- min-width: 20px;
24
+ height: 1.25rem;
25
+ width: 1.25rem;
26
+ min-width: 1.25rem;
27
27
  }
28
28
 
29
29
  .md-checkbox:focus-within .md-checkbox__label::before,
@@ -39,9 +39,9 @@
39
39
  .md-checkbox__input:checked + .md-checkbox__label::before {
40
40
  background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iZTk2NWRkN2EtN2NlNS00MTc0LThjMjEtY2UwNjIzYmFmNTJhIiBkYXRhLW5hbWU9ImNoZWNrbWFyay1ncmVlbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTMgMTAuMDIiPjx0aXRsZT5jaGVja21hcmstZ3JlZW48L3RpdGxlPjxwYXRoIGQ9Ik0xMS4xNCwwLDQuODMsNi4zMWwtMy0zTDAsNS4xOSw0LjgzLDEwLDEzLDEuODZaIiBmaWxsPSIjMDA2MTVjIiAvPjwvc3ZnPg==);
41
41
  background-repeat: no-repeat;
42
- background-position-y: 2px;
43
- background-position-x: 1px;
44
- background-size: 18px;
42
+ background-position-y: 0.125rem;
43
+ background-position-x: 0.0625rem;
44
+ background-size: 1.125rem;
45
45
  }
46
46
 
47
47
  .md-checkbox--disabled .md-checkbox__input:checked + .md-checkbox__label::before {
@@ -63,9 +63,9 @@
63
63
 
64
64
  .md-checkbox__labelText {
65
65
  font-size: 1rem;
66
- left: 8px;
66
+ left: 0.5rem;
67
67
  position: relative;
68
- padding-right: 8px;
68
+ padding-right: 0.5rem;
69
69
  }
70
70
 
71
71
  .md-checkbox:not(.md-checkbox--disabled):hover .md-checkbox__labelText {
@@ -1,6 +1,6 @@
1
1
  .md-checkboxgroup {
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-checkboxgroup .md-checkboxgroup__label > * + * {
15
- margin-left: 1em;
15
+ margin-left: 1rem;
16
16
  }
17
17
 
18
18
  .md-checkboxgroup .md-checkboxgroup__help-text {
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  .md-checkboxgroup .md-checkboxgroup__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-checkboxgroup .md-checkboxgroup__options {
31
31
  display: flex;
32
32
  flex-direction: row;
33
- margin: 0.7em 0;
34
- gap: 1em;
33
+ margin: 0.7rem 0;
34
+ gap: 1rem;
35
35
  }
36
36
 
37
37
  .md-checkboxgroup .md-checkboxgroup__options--vertical {
@@ -45,5 +45,5 @@
45
45
 
46
46
  .md-checkboxgroup__error {
47
47
  color: var(--mdErrorColor);
48
- font-size: 0.88em;
48
+ font-size: 0.88rem;
49
49
  }
@@ -6,9 +6,9 @@
6
6
  display: flex;
7
7
  flex-direction: column;
8
8
  align-items: center;
9
- padding: 2em;
9
+ padding: 2rem;
10
10
  border: 1px dashed var(--mdGreyColor80);
11
- margin-bottom: 4em;
11
+ margin-bottom: 4rem;
12
12
  background-color: #fff;
13
13
  transition: background 0.2s linear;
14
14
  }
@@ -27,27 +27,27 @@
27
27
  }
28
28
 
29
29
  .md-fileupload__droparea-icon {
30
- width: 32px;
31
- height: 32px;
30
+ width: 2rem;
31
+ height: 2rem;
32
32
  color: #000;
33
- margin-bottom: 1.5em;
33
+ margin-bottom: 1.5rem;
34
34
  }
35
35
 
36
36
  .md-fileupload__droparea-content {
37
37
  font-family: 'Open sans';
38
- font-size: 16px;
38
+ font-size: 1rem;
39
39
  }
40
40
  .md-fileupload__droparea-content--count {
41
41
  text-align: center;
42
- margin: 0.5em 0;
43
- font-size: 0.888em;
42
+ margin: 0.5rem 0;
43
+ font-size: 0.888rem;
44
44
  font-style: italic;
45
45
  }
46
46
 
47
47
  .md-fileupload__droparea-content button {
48
48
  background: none;
49
49
  border: 0;
50
- font-size: 16px;
50
+ font-size: 1rem;
51
51
  color: var(--mdPrimaryColor);
52
52
  text-decoration: underline;
53
53
  padding: 0;
@@ -61,8 +61,8 @@
61
61
 
62
62
  .md-fileupload__files-wrapper {
63
63
  width: 100%;
64
- margin: 1.5em 0 0 0;
65
- padding: 1.5em 0 0 0;
64
+ margin: 1.5rem 0 0 0;
65
+ padding: 1.5rem 0 0 0;
66
66
  border-top: 1px solid #000;
67
67
  }
68
68
 
@@ -72,9 +72,9 @@
72
72
  }
73
73
 
74
74
  .md-fileupload__actions > * + * {
75
- margin-left: 1em;
75
+ margin-left: 1rem;
76
76
  }
77
77
 
78
78
  .md-fileupload__button {
79
- margin-left: 4px !important;
79
+ margin-left: 0.25rem !important;
80
80
  }