@miljodirektoratet/md-css 1.0.30 → 1.0.32
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/README.md +0 -2
- package/package.json +1 -1
- package/src/colors.css +3 -0
- package/src/infoTag/infoTag.css +34 -5
package/README.md
CHANGED
|
@@ -22,5 +22,3 @@ const MyComponent = () => {
|
|
|
22
22
|
**For HTML structure for each component, see the README.md for each css-file, located in /src, or the `Docs`-section in the [Storybook](https://miljodir.github.io/md-components/) for each component. This must be followed if stylesheets are used as standalone, without React components.**
|
|
23
23
|
|
|
24
24
|
_For React components, see [@miljodirektoratet/md-react](https://www.npmjs.com/package/@miljodirektoratet/md-react)_
|
|
25
|
-
|
|
26
|
-
**Ny test for å se om worker får pushet endringer med PAT, nå bør dette fikses. (alle disse skal squashes senere)**
|
package/package.json
CHANGED
package/src/colors.css
CHANGED
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
--mdTextColor: #222222;
|
|
18
18
|
|
|
19
19
|
--mdWarningBackgoundColor: #fce4ca;
|
|
20
|
+
--mdWarningColor: #de8215;
|
|
20
21
|
|
|
21
22
|
--mdErrorColor: #ca0000;
|
|
22
23
|
--mdErrorColor120: #b7090d;
|
|
@@ -27,4 +28,6 @@
|
|
|
27
28
|
--mdGreyColor40: #a6a6a6;
|
|
28
29
|
--mdGreyColor60: #808080;
|
|
29
30
|
--mdGreyColor80: #4e4e4e;
|
|
31
|
+
|
|
32
|
+
--mdGreenColor60: #b3e8c2;
|
|
30
33
|
}
|
package/src/infoTag/infoTag.css
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
.md-info-tag {
|
|
2
|
-
display:
|
|
2
|
+
display: flex;
|
|
3
3
|
justify-content: flex-start;
|
|
4
|
+
align-items: center;
|
|
5
|
+
max-width: fit-content;
|
|
4
6
|
z-index: 2;
|
|
5
7
|
background-color: var(--mdPrimaryColor20);
|
|
6
8
|
color: var(--mdGreyColor);
|
|
7
|
-
align-items: center;
|
|
8
9
|
padding: 4px 12px 4px 12px;
|
|
9
10
|
border-radius: 4px;
|
|
10
11
|
font-family: 'Open Sans';
|
|
@@ -12,6 +13,14 @@
|
|
|
12
13
|
white-space: nowrap;
|
|
13
14
|
overflow: hidden;
|
|
14
15
|
text-overflow: ellipsis;
|
|
16
|
+
border: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.md-info-tag--button:hover {
|
|
20
|
+
outline: 2px solid var(--mdPrimaryColor);
|
|
21
|
+
outline-offset: -2px;
|
|
22
|
+
text-decoration: underline;
|
|
23
|
+
cursor: pointer;
|
|
15
24
|
}
|
|
16
25
|
|
|
17
26
|
.md-info-tag--secondary {
|
|
@@ -20,24 +29,44 @@
|
|
|
20
29
|
.md-info-tag--warning {
|
|
21
30
|
background-color: var(--mdWarningBackgoundColor);
|
|
22
31
|
}
|
|
32
|
+
.md-info-tag--warning.md-info-tag--button:hover {
|
|
33
|
+
outline: 2px solid var(--mdWarningColor);
|
|
34
|
+
outline-offset: -2px;
|
|
35
|
+
}
|
|
36
|
+
|
|
23
37
|
.md-info-tag--danger {
|
|
24
38
|
background-color: var(--mdErrorColor);
|
|
25
39
|
color: #fff;
|
|
26
40
|
}
|
|
41
|
+
.md-info-tag--success {
|
|
42
|
+
background-color: var(--mdGreenColor60);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.md-info-tag--outline {
|
|
46
|
+
outline: 1px solid var(--mdGreyColor80);
|
|
47
|
+
outline-offset: -1px;
|
|
48
|
+
}
|
|
27
49
|
|
|
28
50
|
.md-info-tag__label {
|
|
29
51
|
display: flex;
|
|
30
52
|
max-width: 0;
|
|
31
53
|
overflow: hidden;
|
|
32
|
-
|
|
54
|
+
justify-content: center;
|
|
55
|
+
align-items: center;
|
|
33
56
|
font-size: 14px;
|
|
34
57
|
line-height: 18px;
|
|
35
58
|
}
|
|
59
|
+
.md-info-tag:hover .md-info-tag__label {
|
|
60
|
+
max-width: 100%;
|
|
61
|
+
padding-right: 16px;
|
|
62
|
+
transition: max-width 0.3s ease-in;
|
|
63
|
+
white-space: nowrap;
|
|
64
|
+
}
|
|
36
65
|
|
|
37
66
|
.md-info-tag__label--show {
|
|
38
67
|
max-width: 100%;
|
|
39
|
-
|
|
40
|
-
|
|
68
|
+
padding-right: 16px;
|
|
69
|
+
transition: max-width 0.3s ease-in;
|
|
41
70
|
white-space: nowrap;
|
|
42
71
|
}
|
|
43
72
|
|