@linzjs/lui 21.36.0 → 21.37.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/CHANGELOG.md +8 -0
- package/dist/components/LuiModal/LuiAlertModalV2.d.ts +7 -0
- package/dist/components/LuiModal/LuiModal.d.ts +12 -0
- package/dist/components/LuiModal/LuiModalV2.d.ts +34 -0
- package/dist/components/common/Hooks.d.ts +1 -1
- package/dist/hooks/useClickedOutsideElement.d.ts +2 -2
- package/dist/index.d.ts +2 -0
- package/dist/index.js +133 -38
- package/dist/index.js.map +1 -1
- package/dist/lui.css +95 -0
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +132 -39
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/Modal/modal-v2.scss +121 -0
- package/dist/scss/base.scss +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
@use '../../Foundation/Variables/ColorVars.scss' as colors;
|
|
2
|
+
@use '../../Foundation/Variables/FontVars.scss' as fonts;
|
|
3
|
+
@use '../../Foundation/Variables/SpacingVars.scss' as spacing;
|
|
4
|
+
@use '../../Foundation/Utilities' as *;
|
|
5
|
+
|
|
6
|
+
.lui-modal-v2 {
|
|
7
|
+
position: relative;
|
|
8
|
+
max-height: 90vh;
|
|
9
|
+
min-width: 288px;
|
|
10
|
+
overflow: auto;
|
|
11
|
+
|
|
12
|
+
@include border-radius();
|
|
13
|
+
padding: spacing.$unit-md;
|
|
14
|
+
|
|
15
|
+
background: colors.$white;
|
|
16
|
+
|
|
17
|
+
display: grid;
|
|
18
|
+
grid-template-columns: min-content 1fr min-content min-content;
|
|
19
|
+
grid-template-rows: min-content 1fr;
|
|
20
|
+
|
|
21
|
+
&:not(.lui-max-width) {
|
|
22
|
+
width: 480px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&-alert {
|
|
26
|
+
border-width: 0;
|
|
27
|
+
border-left-width: spacing.$unit-xs;
|
|
28
|
+
border-style: solid;
|
|
29
|
+
padding-left: spacing.$unit-rg;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&-success {
|
|
33
|
+
border-color: colors.$success;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&-info {
|
|
37
|
+
border-color: colors.$info;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&-warning {
|
|
41
|
+
border-color: colors.$warning;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&-error {
|
|
45
|
+
border-color: colors.$error;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&-header {
|
|
49
|
+
grid-column: 1 / -1;
|
|
50
|
+
grid-row: 1;
|
|
51
|
+
display: grid;
|
|
52
|
+
grid-template-columns: subgrid;
|
|
53
|
+
grid-auto-flow: column;
|
|
54
|
+
align-items: start;
|
|
55
|
+
padding-bottom: spacing.$unit-rg;
|
|
56
|
+
|
|
57
|
+
&:not(:has(:first-child)) {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&-spinner,
|
|
62
|
+
&-icon {
|
|
63
|
+
grid-column: 1;
|
|
64
|
+
margin-right: spacing.$unit-xs;
|
|
65
|
+
margin-top: spacing.$unit-xxs;
|
|
66
|
+
display: inline-flex;
|
|
67
|
+
fill: colors.$gray;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&-title {
|
|
71
|
+
color: inherit;
|
|
72
|
+
grid-column: 2;
|
|
73
|
+
font-size: 1.25rem;
|
|
74
|
+
font-weight: 400;
|
|
75
|
+
margin: 0;
|
|
76
|
+
padding: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&-buttons {
|
|
80
|
+
display: contents;
|
|
81
|
+
margin-left: spacing.$unit-xs;
|
|
82
|
+
|
|
83
|
+
> button {
|
|
84
|
+
fill: colors.$gray;
|
|
85
|
+
background-color: transparent;
|
|
86
|
+
padding: spacing.$unit-xs;
|
|
87
|
+
margin-top: -1 * spacing.$unit-xxs;
|
|
88
|
+
margin-bottom: -1 * spacing.$unit-xs;
|
|
89
|
+
display: inline-flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&-help-btn {
|
|
95
|
+
grid-column: 3;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&-close-btn {
|
|
99
|
+
grid-column: 4;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&-contents {
|
|
104
|
+
grid-column: 1 / -1;
|
|
105
|
+
|
|
106
|
+
> p:first-child {
|
|
107
|
+
// this is a bit of a hacky "reset" due to 1) our <p>s having a very opinionated margin-top and 2) <p> being a very common first child of <LuiModalV2>... ideally we'd fix 1 or the consumers would do this reset themselves but I reckong having this reset in the modal css is the least painful option at the moment
|
|
108
|
+
margin-top: 0;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&-btn-row {
|
|
113
|
+
margin-top: spacing.$unit-md;
|
|
114
|
+
display: flex;
|
|
115
|
+
|
|
116
|
+
> button {
|
|
117
|
+
flex-grow: 1;
|
|
118
|
+
flex-basis: 0;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
package/dist/scss/base.scss
CHANGED
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
@forward './Components/MenuV2/menu-v2.scss';
|
|
52
52
|
@forward './Components/Messaging/messaging.scss';
|
|
53
53
|
@forward './Components/Modal/modal.scss';
|
|
54
|
+
@forward './Components/Modal/modal-v2.scss';
|
|
54
55
|
@forward './Components/LuiUpdateSplashModal/splashModal.scss';
|
|
55
56
|
@forward './Components/NavDrawer/nav-drawer.scss';
|
|
56
57
|
@forward './Components/Notifications/notifications.scss';
|
package/package.json
CHANGED