@miljodirektoratet/md-css 6.1.0 → 6.2.1
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 +1 -1
- package/src/modal/README.md +35 -23
- package/src/modal/modal.css +123 -34
- package/src/tooltip/tooltip.css +1 -0
package/package.json
CHANGED
package/src/modal/README.md
CHANGED
|
@@ -7,26 +7,40 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
|
|
|
7
7
|
See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
10
|
+
<!-- Modal overlay/backdrop -->
|
|
11
|
+
<div class="md-modal__overlay"></div>
|
|
12
|
+
|
|
13
|
+
<!-- Modal dialog -->
|
|
14
|
+
<div class="md-modal [md-modal--error]">
|
|
15
|
+
<div class="md-modal__header-wrapper">
|
|
16
|
+
<div class="md-modal__header">
|
|
17
|
+
<div class="md-modal__header-content">
|
|
18
|
+
<!-- Optional heading icon -->
|
|
19
|
+
{headingIcon}
|
|
20
|
+
<!-- Modal heading text -->
|
|
21
|
+
{heading}
|
|
22
|
+
</div>
|
|
23
|
+
<!-- Close button -->
|
|
24
|
+
<button type="button" class="md-modal__close-button" aria-label="Lukk">
|
|
25
|
+
<!-- Use MdIconClose or icon from Material Symbols here -->
|
|
26
|
+
<MdIconClose />
|
|
27
|
+
</button>
|
|
28
|
+
</div>
|
|
29
|
+
<!-- Optional divider below header -->
|
|
30
|
+
<div class="md-modal__header-divider"></div>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<!-- Modal content -->
|
|
34
|
+
<div class="md-modal__content">
|
|
35
|
+
<!-- Modal children/content goes here -->
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<!-- Optional footer -->
|
|
39
|
+
<div class="md-modal__footer-wrapper">
|
|
40
|
+
<!-- Optional divider above footer -->
|
|
41
|
+
<div class="md-modal__footer-divider"></div>
|
|
42
|
+
<div class="md-modal__footer">
|
|
43
|
+
<!-- Footer content goes here -->
|
|
30
44
|
</div>
|
|
31
45
|
</div>
|
|
32
46
|
</div>
|
|
@@ -37,6 +51,4 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
|
|
|
37
51
|
This component uses z-index to place itself as the top layer in the viewport. The default z-indexes are:
|
|
38
52
|
|
|
39
53
|
- `md-modal`: 900
|
|
40
|
-
- `md-
|
|
41
|
-
|
|
42
|
-
If these z-indexes collide with other z-indexes in you stylesheet, please override the `z-index` for the two classes mentioned above in your own css.
|
|
54
|
+
- `md-modal__overlay`: 800
|
package/src/modal/modal.css
CHANGED
|
@@ -1,55 +1,109 @@
|
|
|
1
1
|
.md-modal {
|
|
2
2
|
position: fixed;
|
|
3
|
-
|
|
4
|
-
right: 0;
|
|
5
|
-
bottom: 0;
|
|
6
|
-
left: 0;
|
|
3
|
+
inset: var(--inset);
|
|
7
4
|
z-index: 900;
|
|
5
|
+
margin: auto;
|
|
6
|
+
display: flex;
|
|
7
|
+
height: fit-content;
|
|
8
|
+
max-height: calc(100dvh - var(--inset) * 2);
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
gap: 0.5rem;
|
|
11
|
+
background-color: #fff;
|
|
12
|
+
border: 1px solid var(--mdGreyColor20);
|
|
13
|
+
padding: 1rem 0;
|
|
14
|
+
color: black;
|
|
15
|
+
box-shadow: 0px 0.75rem 1.5rem 0px rgba(0, 0, 0, 0.16), 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.16),
|
|
16
|
+
0px 0px 1px 0px rgba(0, 0, 0, 0.12);
|
|
17
|
+
--inset: 0.75rem;
|
|
18
|
+
transform-origin: center;
|
|
19
|
+
opacity: 0;
|
|
20
|
+
transition-property: opacity, transform;
|
|
21
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
22
|
+
transition-duration: 150ms;
|
|
23
|
+
transform: scale(0.95);
|
|
8
24
|
font-family: 'Open sans';
|
|
9
25
|
}
|
|
10
26
|
|
|
11
|
-
|
|
12
|
-
|
|
27
|
+
@media (min-width: 640px) {
|
|
28
|
+
.md-modal {
|
|
29
|
+
gap: 1rem;
|
|
30
|
+
top: 10vh;
|
|
31
|
+
bottom: 10vh;
|
|
32
|
+
margin-top: 0px;
|
|
33
|
+
max-height: 80vh;
|
|
34
|
+
min-width: 325px;
|
|
35
|
+
width: 80%;
|
|
36
|
+
max-width: 800px;
|
|
37
|
+
padding: 1.5rem 0;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.md-modal[data-enter] {
|
|
42
|
+
opacity: 1;
|
|
43
|
+
transform: scale(1);
|
|
44
|
+
}
|
|
45
|
+
.md-modal.md-modal--error {
|
|
46
|
+
border: 2px solid var(--mdErrorColor);
|
|
13
47
|
}
|
|
14
48
|
|
|
49
|
+
/* OVERLAY */
|
|
15
50
|
.md-modal__overlay {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
overflow-y: auto;
|
|
51
|
+
background: rgba(34, 34, 34, 0.4);
|
|
52
|
+
-webkit-backdrop-filter: blur(2px);
|
|
53
|
+
opacity: 0;
|
|
54
|
+
transition-property: opacity, backdrop-filter;
|
|
55
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
56
|
+
transition-duration: 150ms;
|
|
57
|
+
backdrop-filter: blur(0);
|
|
24
58
|
z-index: 800;
|
|
25
59
|
}
|
|
60
|
+
.md-modal__overlay[data-enter] {
|
|
61
|
+
opacity: 1;
|
|
62
|
+
backdrop-filter: blur(2px);
|
|
63
|
+
}
|
|
26
64
|
|
|
65
|
+
/* CONTENT */
|
|
27
66
|
.md-modal__content {
|
|
28
67
|
display: flex;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
68
|
+
flex: 1 1 auto;
|
|
69
|
+
gap: 0.5rem;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
max-width: 100%;
|
|
72
|
+
padding: 0.5rem 1rem;
|
|
73
|
+
overflow: auto;
|
|
32
74
|
}
|
|
33
|
-
|
|
34
|
-
.md-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
min-width: 325px;
|
|
38
|
-
max-width: 80%;
|
|
39
|
-
border: 1px solid var(--mdGreyColor20);
|
|
40
|
-
box-shadow: 8px 8px 16px var(--mdGreyColor60);
|
|
75
|
+
@media (min-width: 640px) {
|
|
76
|
+
.md-modal__content {
|
|
77
|
+
padding: 0.5rem 2rem;
|
|
78
|
+
}
|
|
41
79
|
}
|
|
42
80
|
|
|
43
|
-
|
|
44
|
-
|
|
81
|
+
/* HEADER */
|
|
82
|
+
.md-modal__header-wrapper {
|
|
83
|
+
flex: 0 0 auto;
|
|
45
84
|
}
|
|
46
|
-
|
|
47
85
|
.md-modal__header {
|
|
48
86
|
display: flex;
|
|
87
|
+
flex-direction: row;
|
|
49
88
|
justify-content: space-between;
|
|
50
|
-
align-items:
|
|
51
|
-
padding
|
|
52
|
-
font-size: 1.
|
|
89
|
+
align-items: center;
|
|
90
|
+
padding: 0 1rem 0.5rem 1rem;
|
|
91
|
+
font-size: 1.4375rem;
|
|
92
|
+
line-height: 2.125rem;
|
|
93
|
+
font-family: 'SofiaPro-Regular', 'Sofia Pro';
|
|
94
|
+
font-weight: 400;
|
|
95
|
+
}
|
|
96
|
+
@media (min-width: 640px) {
|
|
97
|
+
.md-modal__header {
|
|
98
|
+
padding: 0 2rem 0.5rem 2rem;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.md-modal__header-divider {
|
|
103
|
+
height: 1px;
|
|
104
|
+
width: 100%;
|
|
105
|
+
margin: 0.5rem 0;
|
|
106
|
+
background-color: var(--mdGreyColor20);
|
|
53
107
|
}
|
|
54
108
|
|
|
55
109
|
.md-modal__header-content {
|
|
@@ -59,9 +113,44 @@
|
|
|
59
113
|
}
|
|
60
114
|
|
|
61
115
|
.md-modal__close-button {
|
|
62
|
-
|
|
116
|
+
all: unset;
|
|
117
|
+
cursor: pointer;
|
|
118
|
+
width: 1.875rem;
|
|
119
|
+
height: 1.875rem;
|
|
120
|
+
border-radius: 50%;
|
|
121
|
+
display: flex;
|
|
122
|
+
align-items: center;
|
|
123
|
+
justify-content: center;
|
|
124
|
+
outline: none;
|
|
125
|
+
}
|
|
126
|
+
.md-modal__close-button svg {
|
|
127
|
+
width: 1.25rem;
|
|
128
|
+
}
|
|
129
|
+
.md-modal__close-button:hover {
|
|
130
|
+
outline: 1px solid var(--mdPrimaryColor);
|
|
131
|
+
}
|
|
132
|
+
.md-modal__close-button:focus-visible {
|
|
133
|
+
outline: 2px solid var(--mdPrimaryColor);
|
|
63
134
|
}
|
|
64
135
|
|
|
65
|
-
|
|
66
|
-
|
|
136
|
+
/* FOOTER */
|
|
137
|
+
.md-modal__footer-wrapper {
|
|
138
|
+
flex: 0 0 auto;
|
|
139
|
+
display: flex;
|
|
140
|
+
flex-direction: column;
|
|
141
|
+
}
|
|
142
|
+
.md-modal__footer {
|
|
143
|
+
padding: 0 1rem;
|
|
144
|
+
}
|
|
145
|
+
@media (min-width: 640px) {
|
|
146
|
+
.md-modal__footer {
|
|
147
|
+
padding: 0 2rem;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
.md-modal__footer-divider {
|
|
151
|
+
height: 1px;
|
|
152
|
+
width: 100%;
|
|
153
|
+
margin: 0.5rem 0;
|
|
154
|
+
background-color: var(--mdGreyColor20);
|
|
155
|
+
margin-bottom: 1.5rem;
|
|
67
156
|
}
|