@muraldevkit/ui-toolkit 1.24.1 → 1.25.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/dist/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.d.ts +1 -1
- package/dist/components/button/MrlButton/MrlButton.d.ts +2 -5
- package/dist/components/button/MrlIconButton/MrlIconButton.d.ts +1 -1
- package/dist/components/modal/MrlModal/index.d.ts +3 -1
- package/dist/components/modal/MrlModalHeader/MrlModalHeaderNative.d.ts +14 -0
- package/dist/components/modal/MrlModalHeader/index.d.ts +2 -1
- package/dist/index.js +1 -1
- package/dist/styles/MrlModal/global.scss +17 -21
- package/dist/styles/MrlModal/module.scss +5 -0
- package/dist/styles/MrlModal/variables.scss +8 -0
- package/dist/styles/MrlModalContent/module.scss +11 -0
- package/dist/styles/MrlModalHeader/module.scss +1 -0
- package/dist/styles/MrlModalHeader/variables.scss +4 -0
- package/dist/styles/modal/variables.scss +5 -0
- package/package.json +1 -1
|
@@ -10,18 +10,28 @@
|
|
|
10
10
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 8%), var(--mrl-shadow-03);
|
|
11
11
|
height: auto;
|
|
12
12
|
margin: var(--mrl-spacing-08);
|
|
13
|
-
max-height:
|
|
13
|
+
max-height: var(--mrl-modal-max-height);
|
|
14
14
|
max-width: var(--mrl-modal-size);
|
|
15
15
|
}
|
|
16
|
-
}
|
|
17
16
|
|
|
18
|
-
.mrl-
|
|
19
|
-
display
|
|
17
|
+
.mrl-native-modal,
|
|
18
|
+
.mrl-display-modal {
|
|
19
|
+
max-height: calc(100vh - var(--mrl-spacing-09) - var(--mrl-spacing-08));
|
|
20
|
+
min-height: min(
|
|
21
|
+
var(--mrl-modal-max-height),
|
|
22
|
+
calc(100vh - var(--mrl-spacing-09) - var(--mrl-spacing-08))
|
|
23
|
+
);
|
|
24
|
+
}
|
|
20
25
|
}
|
|
21
26
|
|
|
22
|
-
.mrl-native-modal
|
|
23
|
-
|
|
24
|
-
|
|
27
|
+
.mrl-native-modal,
|
|
28
|
+
.mrl-display-modal {
|
|
29
|
+
border-radius: var(--mrl-modal-border-radius) var(--mrl-modal-border-radius) 0 0;
|
|
30
|
+
@media screen and (min-width: $mrl-breakpoint-01) {
|
|
31
|
+
border-radius: var(--mrl-modal-border-radius);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.mrl-modal-close {
|
|
25
35
|
display: none;
|
|
26
36
|
}
|
|
27
37
|
|
|
@@ -33,19 +43,5 @@
|
|
|
33
43
|
text-align: center;
|
|
34
44
|
width: 100%;
|
|
35
45
|
}
|
|
36
|
-
|
|
37
|
-
.mrl-native-button {
|
|
38
|
-
display: initial;
|
|
39
|
-
position: absolute;
|
|
40
|
-
top: var(--mrl-modal-close-offset);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.mrlButton--primary-native {
|
|
44
|
-
right: var(--mrl-modal-close-offset);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.mrlButton--secondary-native {
|
|
48
|
-
left: var(--mrl-modal-close-offset);
|
|
49
|
-
}
|
|
50
46
|
}
|
|
51
47
|
}
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
--mrl-modal-size: 600px;
|
|
15
15
|
--mrl-modal-border-radius: var(--mrl-radii-05);
|
|
16
16
|
--mrl-modal-background: var(--mrl-color-background);
|
|
17
|
+
--mrl-modal-max-height: 95vh;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
/// Media queries' styles for desktop
|
|
@@ -26,3 +27,10 @@
|
|
|
26
27
|
--mrl-modal-size: 800px;
|
|
27
28
|
}
|
|
28
29
|
}
|
|
30
|
+
|
|
31
|
+
.mrl-native-modal,
|
|
32
|
+
.mrl-display-modal {
|
|
33
|
+
--mrl-modal-border-radius: var(--mrl-radii-04);
|
|
34
|
+
--mrl-modal-size: 600px;
|
|
35
|
+
--mrl-modal-max-height: 642px;
|
|
36
|
+
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
|
|
1
2
|
@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
|
|
2
3
|
|
|
3
4
|
.mrl-modal-content {
|
|
@@ -10,4 +11,14 @@
|
|
|
10
11
|
flex-grow: 1;
|
|
11
12
|
overflow: auto;
|
|
12
13
|
padding: 0 var(--mrl-modal-padding-horizontal) 4px;
|
|
14
|
+
|
|
15
|
+
:global(.mrl-native-modal) &,
|
|
16
|
+
:global(.mrl-display-modal) & {
|
|
17
|
+
margin-top: var(--mrl-spacing-03);
|
|
18
|
+
padding-bottom: var(--mrl-spacing-09);
|
|
19
|
+
@media screen and (min-width: $mrl-breakpoint-01) {
|
|
20
|
+
margin-bottom: var(--mrl-spacing-05);
|
|
21
|
+
padding-bottom: 0;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
13
24
|
}
|