uibee 2.2.10 → 2.3.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/dist/globals.css
CHANGED
|
@@ -234,6 +234,36 @@
|
|
|
234
234
|
bottom: 0;
|
|
235
235
|
}
|
|
236
236
|
}
|
|
237
|
+
.heading {
|
|
238
|
+
z-index: 2;
|
|
239
|
+
font-weight: 600;
|
|
240
|
+
font-size: 2.1rem;
|
|
241
|
+
margin: 1rem 0;
|
|
242
|
+
padding: .3em 0;
|
|
243
|
+
padding-left: 0px;
|
|
244
|
+
line-height: 1.2em;
|
|
245
|
+
@media only screen and (min-width: 400px) {
|
|
246
|
+
font-size: 3.5rem;
|
|
247
|
+
}
|
|
248
|
+
@media only screen and (min-width: 800px) {
|
|
249
|
+
&::before {
|
|
250
|
+
padding-left: 1.5rem;
|
|
251
|
+
font-size: 3.5rem;
|
|
252
|
+
z-index: -1;
|
|
253
|
+
content: "";
|
|
254
|
+
border-width: .7rem;
|
|
255
|
+
border-color: var(--color-login-500);
|
|
256
|
+
z-index: 2;
|
|
257
|
+
border-style: solid none none solid;
|
|
258
|
+
width: 2.6rem;
|
|
259
|
+
height: 2.6rem;
|
|
260
|
+
margin-top: -.8rem;
|
|
261
|
+
margin-left: -1.5rem;
|
|
262
|
+
transition: all .1s;
|
|
263
|
+
position: absolute;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
}
|
|
237
267
|
.sr-only {
|
|
238
268
|
position: absolute;
|
|
239
269
|
width: 1px;
|
|
@@ -320,6 +350,9 @@
|
|
|
320
350
|
.z-900 {
|
|
321
351
|
z-index: 900;
|
|
322
352
|
}
|
|
353
|
+
.col-start-3 {
|
|
354
|
+
grid-column-start: 3;
|
|
355
|
+
}
|
|
323
356
|
.m-auto {
|
|
324
357
|
margin: auto;
|
|
325
358
|
}
|
|
@@ -347,6 +380,15 @@
|
|
|
347
380
|
.ml-3 {
|
|
348
381
|
margin-left: calc(var(--spacing) * 3);
|
|
349
382
|
}
|
|
383
|
+
.page-container {
|
|
384
|
+
display: grid;
|
|
385
|
+
grid-template-columns: 1fr 1rem minmax(0, 72rem) 1rem 1fr;
|
|
386
|
+
padding-top: 0rem;
|
|
387
|
+
@media (min-width: 800px) {
|
|
388
|
+
grid-template-columns: 1fr 2rem minmax(0, 72rem) 2rem 1fr;
|
|
389
|
+
padding-top: 2rem;
|
|
390
|
+
}
|
|
391
|
+
}
|
|
350
392
|
.line-clamp-3 {
|
|
351
393
|
overflow: hidden;
|
|
352
394
|
display: -webkit-box;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export function PageContainer({ title, children }) {
|
|
3
|
+
return (_jsx("div", { className: 'w-full page-container', children: _jsxs("div", { className: 'flex flex-col col-start-3', children: [_jsx("h1", { className: 'heading', children: title }), children] }) }));
|
|
4
|
+
}
|
package/package.json
CHANGED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export function PageContainer({ title, children }: { title: string; children: React.ReactNode }) {
|
|
2
|
+
return (
|
|
3
|
+
<div className='w-full page-container'>
|
|
4
|
+
<div className='flex flex-col col-start-3'>
|
|
5
|
+
<h1 className='heading'>{title}</h1>
|
|
6
|
+
{children}
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
)
|
|
10
|
+
}
|
package/src/globals.css
CHANGED
|
@@ -128,4 +128,59 @@ body {
|
|
|
128
128
|
right: 0;
|
|
129
129
|
bottom: 0;
|
|
130
130
|
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@utility page-container {
|
|
134
|
+
display: grid;
|
|
135
|
+
grid-template-columns: 1fr 1rem minmax(0, 72rem) 1rem 1fr;
|
|
136
|
+
padding-top: 0rem;
|
|
137
|
+
|
|
138
|
+
@media (min-width: 800px) {
|
|
139
|
+
grid-template-columns: 1fr 2rem minmax(0, 72rem) 2rem 1fr;
|
|
140
|
+
padding-top: 2rem;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
@utility heading {
|
|
145
|
+
z-index: 2;
|
|
146
|
+
font-weight: 600;
|
|
147
|
+
font-size: 2.1rem;
|
|
148
|
+
margin: 1rem 0;
|
|
149
|
+
padding: .3em 0;
|
|
150
|
+
padding-left: 0px;
|
|
151
|
+
line-height: 1.2em;
|
|
152
|
+
|
|
153
|
+
@media only screen and (min-width: 400px) {
|
|
154
|
+
font-size: 3.5rem;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
@media only screen and (min-width: 800px) {
|
|
158
|
+
&::before {
|
|
159
|
+
padding-left: 1.5rem;
|
|
160
|
+
font-size: 3.5rem;
|
|
161
|
+
z-index: -1;
|
|
162
|
+
content: "";
|
|
163
|
+
border-width: .7rem;
|
|
164
|
+
border-color: var(--color-login-500);
|
|
165
|
+
z-index: 2;
|
|
166
|
+
border-style: solid none none solid;
|
|
167
|
+
width: 2.6rem;
|
|
168
|
+
height: 2.6rem;
|
|
169
|
+
margin-top: -.8rem;
|
|
170
|
+
margin-left: -1.5rem;
|
|
171
|
+
transition: all .1s;
|
|
172
|
+
position: absolute;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
@utility highlighted-section {
|
|
178
|
+
line-height: 1.8rem;
|
|
179
|
+
border-left: .3rem solid var(--color-login);
|
|
180
|
+
max-width: 50rem;
|
|
181
|
+
margin-top: 1.2rem;
|
|
182
|
+
margin-bottom: 1.2rem;
|
|
183
|
+
padding: .5rem 0 .5rem 1rem;
|
|
184
|
+
font-size: 1.2rem;
|
|
185
|
+
font-weight: 500;
|
|
131
186
|
}
|