@miljodirektoratet/md-css 4.3.1 → 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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@miljodirektoratet/md-css",
3
- "version": "4.3.1",
3
+ "version": "4.4.0",
4
4
  "description": "CSS for Miljødirektoratet",
5
5
  "author": "Miljødirektoratet",
6
6
  "main": "./src/index.css",
@@ -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
+ }
@@ -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;