@x-plat/design-system 0.4.0 → 0.4.2

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.
Files changed (6) hide show
  1. package/dist/components/Calendar/index.css +1 -0
  2. package/dist/components/DatePicker/index.css +8 -8
  3. package/dist/components/Modal/index.css +3 -7
  4. package/dist/components/index.css +9 -8
  5. package/dist/index.css +9 -8
  6. package/package.json +1 -1
package/dist/components/Calendar/index.css CHANGED
@@ -1,6 +1,7 @@
1
1
  /* src/components/Calendar/calendar.scss */
2
2
  .lib-xplat-calendar {
3
3
  width: 100%;
4
+ min-width: 280px;
4
5
  user-select: none;
5
6
  container-type: inline-size;
6
7
  }
package/dist/components/DatePicker/index.css CHANGED
@@ -88,6 +88,7 @@
88
88
  .lib-xplat-datepicker {
89
89
  user-select: none;
90
90
  container-type: inline-size;
91
+ width: 280px;
91
92
  }
92
93
  .lib-xplat-datepicker .datepicker-header {
93
94
  display: flex;
@@ -205,9 +206,11 @@
205
206
  .lib-xplat-datepicker.range {
206
207
  display: flex;
207
208
  gap: 1.5rem;
209
+ width: auto;
208
210
  }
209
211
  .lib-xplat-datepicker .datepicker-range-panel {
210
- flex: 1;
212
+ width: 280px;
213
+ flex-shrink: 0;
211
214
  }
212
215
  .lib-xplat-datepicker .datepicker-range-label {
213
216
  display: block;
@@ -219,6 +222,7 @@
219
222
  }
220
223
  .lib-xplat-datepicker.input-datepicker {
221
224
  position: relative;
225
+ width: auto;
222
226
  }
223
227
  .lib-xplat-datepicker.input-datepicker .input-datepicker-dropdown {
224
228
  position: absolute;
@@ -295,26 +299,22 @@
295
299
  z-index: 11;
296
300
  }
297
301
  .lib-xplat-modal.modal-box {
298
- position: fixed;
299
- top: 50%;
300
- left: 50%;
301
302
  border-radius: 12px;
302
303
  background-color: #fff;
303
304
  padding: 24px;
304
- width: fit-content;
305
305
  max-width: calc(100vw - 2rem);
306
306
  max-height: calc(100vh - 2rem);
307
307
  overflow: auto;
308
- transform: translate(-50%, -50%) scale(0.9);
308
+ transform: scale(0.9);
309
309
  opacity: 0;
310
310
  transition: transform 0.2s ease, opacity 0.2s ease;
311
311
  }
312
312
  .lib-xplat-modal.modal-box.enter {
313
- transform: translate(-50%, -50%) scale(1);
313
+ transform: scale(1);
314
314
  opacity: 1;
315
315
  }
316
316
  .lib-xplat-modal.modal-box.exit {
317
- transform: translate(-50%, -50%) scale(0.9);
317
+ transform: scale(0.9);
318
318
  opacity: 0;
319
319
  }
320
320
  .lib-xplat-modal.dim {
package/dist/components/Modal/index.css CHANGED
@@ -3,26 +3,22 @@
3
3
  z-index: 11;
4
4
  }
5
5
  .lib-xplat-modal.modal-box {
6
- position: fixed;
7
- top: 50%;
8
- left: 50%;
9
6
  border-radius: 12px;
10
7
  background-color: #fff;
11
8
  padding: 24px;
12
- width: fit-content;
13
9
  max-width: calc(100vw - 2rem);
14
10
  max-height: calc(100vh - 2rem);
15
11
  overflow: auto;
16
- transform: translate(-50%, -50%) scale(0.9);
12
+ transform: scale(0.9);
17
13
  opacity: 0;
18
14
  transition: transform 0.2s ease, opacity 0.2s ease;
19
15
  }
20
16
  .lib-xplat-modal.modal-box.enter {
21
- transform: translate(-50%, -50%) scale(1);
17
+ transform: scale(1);
22
18
  opacity: 1;
23
19
  }
24
20
  .lib-xplat-modal.modal-box.exit {
25
- transform: translate(-50%, -50%) scale(0.9);
21
+ transform: scale(0.9);
26
22
  opacity: 0;
27
23
  }
28
24
  .lib-xplat-modal.dim {
package/dist/components/index.css CHANGED
@@ -676,6 +676,7 @@
676
676
  /* src/components/Calendar/calendar.scss */
677
677
  .lib-xplat-calendar {
678
678
  width: 100%;
679
+ min-width: 280px;
679
680
  user-select: none;
680
681
  container-type: inline-size;
681
682
  }
@@ -1157,6 +1158,7 @@
1157
1158
  .lib-xplat-datepicker {
1158
1159
  user-select: none;
1159
1160
  container-type: inline-size;
1161
+ width: 280px;
1160
1162
  }
1161
1163
  .lib-xplat-datepicker .datepicker-header {
1162
1164
  display: flex;
@@ -1274,9 +1276,11 @@
1274
1276
  .lib-xplat-datepicker.range {
1275
1277
  display: flex;
1276
1278
  gap: 1.5rem;
1279
+ width: auto;
1277
1280
  }
1278
1281
  .lib-xplat-datepicker .datepicker-range-panel {
1279
- flex: 1;
1282
+ width: 280px;
1283
+ flex-shrink: 0;
1280
1284
  }
1281
1285
  .lib-xplat-datepicker .datepicker-range-label {
1282
1286
  display: block;
@@ -1288,6 +1292,7 @@
1288
1292
  }
1289
1293
  .lib-xplat-datepicker.input-datepicker {
1290
1294
  position: relative;
1295
+ width: auto;
1291
1296
  }
1292
1297
  .lib-xplat-datepicker.input-datepicker .input-datepicker-dropdown {
1293
1298
  position: absolute;
@@ -1320,26 +1325,22 @@
1320
1325
  z-index: 11;
1321
1326
  }
1322
1327
  .lib-xplat-modal.modal-box {
1323
- position: fixed;
1324
- top: 50%;
1325
- left: 50%;
1326
1328
  border-radius: 12px;
1327
1329
  background-color: #fff;
1328
1330
  padding: 24px;
1329
- width: fit-content;
1330
1331
  max-width: calc(100vw - 2rem);
1331
1332
  max-height: calc(100vh - 2rem);
1332
1333
  overflow: auto;
1333
- transform: translate(-50%, -50%) scale(0.9);
1334
+ transform: scale(0.9);
1334
1335
  opacity: 0;
1335
1336
  transition: transform 0.2s ease, opacity 0.2s ease;
1336
1337
  }
1337
1338
  .lib-xplat-modal.modal-box.enter {
1338
- transform: translate(-50%, -50%) scale(1);
1339
+ transform: scale(1);
1339
1340
  opacity: 1;
1340
1341
  }
1341
1342
  .lib-xplat-modal.modal-box.exit {
1342
- transform: translate(-50%, -50%) scale(0.9);
1343
+ transform: scale(0.9);
1343
1344
  opacity: 0;
1344
1345
  }
1345
1346
  .lib-xplat-modal.dim {
package/dist/index.css CHANGED
@@ -676,6 +676,7 @@
676
676
  /* src/components/Calendar/calendar.scss */
677
677
  .lib-xplat-calendar {
678
678
  width: 100%;
679
+ min-width: 280px;
679
680
  user-select: none;
680
681
  container-type: inline-size;
681
682
  }
@@ -1157,6 +1158,7 @@
1157
1158
  .lib-xplat-datepicker {
1158
1159
  user-select: none;
1159
1160
  container-type: inline-size;
1161
+ width: 280px;
1160
1162
  }
1161
1163
  .lib-xplat-datepicker .datepicker-header {
1162
1164
  display: flex;
@@ -1274,9 +1276,11 @@
1274
1276
  .lib-xplat-datepicker.range {
1275
1277
  display: flex;
1276
1278
  gap: 1.5rem;
1279
+ width: auto;
1277
1280
  }
1278
1281
  .lib-xplat-datepicker .datepicker-range-panel {
1279
- flex: 1;
1282
+ width: 280px;
1283
+ flex-shrink: 0;
1280
1284
  }
1281
1285
  .lib-xplat-datepicker .datepicker-range-label {
1282
1286
  display: block;
@@ -1288,6 +1292,7 @@
1288
1292
  }
1289
1293
  .lib-xplat-datepicker.input-datepicker {
1290
1294
  position: relative;
1295
+ width: auto;
1291
1296
  }
1292
1297
  .lib-xplat-datepicker.input-datepicker .input-datepicker-dropdown {
1293
1298
  position: absolute;
@@ -1320,26 +1325,22 @@
1320
1325
  z-index: 11;
1321
1326
  }
1322
1327
  .lib-xplat-modal.modal-box {
1323
- position: fixed;
1324
- top: 50%;
1325
- left: 50%;
1326
1328
  border-radius: 12px;
1327
1329
  background-color: #fff;
1328
1330
  padding: 24px;
1329
- width: fit-content;
1330
1331
  max-width: calc(100vw - 2rem);
1331
1332
  max-height: calc(100vh - 2rem);
1332
1333
  overflow: auto;
1333
- transform: translate(-50%, -50%) scale(0.9);
1334
+ transform: scale(0.9);
1334
1335
  opacity: 0;
1335
1336
  transition: transform 0.2s ease, opacity 0.2s ease;
1336
1337
  }
1337
1338
  .lib-xplat-modal.modal-box.enter {
1338
- transform: translate(-50%, -50%) scale(1);
1339
+ transform: scale(1);
1339
1340
  opacity: 1;
1340
1341
  }
1341
1342
  .lib-xplat-modal.modal-box.exit {
1342
- transform: translate(-50%, -50%) scale(0.9);
1343
+ transform: scale(0.9);
1343
1344
  opacity: 0;
1344
1345
  }
1345
1346
  .lib-xplat-modal.dim {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.4.0",
3
+ "version": "0.4.2",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",