@code-coaching/vuetiful 0.8.1 → 0.10.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/style.css +1 -1
- package/dist/styles/all.css +387 -19
- package/dist/types/components/atoms/VBadge.vue.d.ts +1 -1
- package/dist/types/components/atoms/VButton.vue.d.ts +14 -7
- package/dist/types/components/atoms/VChip.vue.d.ts +1 -1
- package/dist/types/components/molecules/VShell.vue.d.ts +8 -0
- package/dist/types/services/drawer.service.test.d.ts +1 -0
- package/dist/types/services/rail.service.test.d.ts +1 -0
- package/dist/types/utils/code-block/code-block.vue.d.ts +13 -55
- package/dist/types/utils/dark-mode/dark-mode.vue.d.ts +1 -1
- package/dist/types/utils/theme/theme-switcher.vue.d.ts +1 -1
- package/dist/vuetiful.es.mjs +149 -172
- package/dist/vuetiful.umd.js +10 -10
- package/package.json +1 -1
- package/src/components/atoms/VBadge.vue +1 -6
- package/src/components/atoms/VButton.test.ts +109 -2
- package/src/components/atoms/VButton.vue +32 -5
- package/src/components/atoms/VChip.vue +1 -6
- package/src/components/molecules/VDrawer.vue +2 -6
- package/src/components/molecules/VRail.vue +2 -9
- package/src/components/molecules/VRailTile.vue +36 -25
- package/src/components/molecules/VShell.vue +1 -3
- package/src/services/rail.service.test.ts +5 -3
- package/src/utils/code-block/code-block.vue +25 -50
package/dist/styles/all.css
CHANGED
|
@@ -18,7 +18,7 @@ Tailwind directives should only be included ONCE per project.
|
|
|
18
18
|
These directives should preceed ALL Skeleton stylesheets.
|
|
19
19
|
*/
|
|
20
20
|
|
|
21
|
-
/* ! tailwindcss v3.
|
|
21
|
+
/* ! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com */
|
|
22
22
|
|
|
23
23
|
/*
|
|
24
24
|
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
|
@@ -49,6 +49,7 @@ These directives should preceed ALL Skeleton stylesheets.
|
|
|
49
49
|
3. Use a more readable tab size.
|
|
50
50
|
4. Use the user's configured `sans` font-family by default.
|
|
51
51
|
5. Use the user's configured `sans` font-feature-settings by default.
|
|
52
|
+
6. Use the user's configured `sans` font-variation-settings by default.
|
|
52
53
|
*/
|
|
53
54
|
|
|
54
55
|
html {
|
|
@@ -65,6 +66,8 @@ html {
|
|
|
65
66
|
/* 4 */
|
|
66
67
|
font-feature-settings: normal;
|
|
67
68
|
/* 5 */
|
|
69
|
+
font-variation-settings: normal;
|
|
70
|
+
/* 6 */
|
|
68
71
|
}
|
|
69
72
|
|
|
70
73
|
/*
|
|
@@ -646,9 +649,9 @@ a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not
|
|
|
646
649
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
647
650
|
}
|
|
648
651
|
|
|
649
|
-
.dark a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(
|
|
652
|
+
:is(.dark a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(
|
|
650
653
|
.logo-item
|
|
651
|
-
):not(a.card):not(.list-nav a) {
|
|
654
|
+
):not(a.card):not(.list-nav a)) {
|
|
652
655
|
--tw-text-opacity: 1;
|
|
653
656
|
color: rgb(var(--color-primary-500) / var(--tw-text-opacity));
|
|
654
657
|
}
|
|
@@ -744,7 +747,7 @@ code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
|
|
|
744
747
|
line-height:1rem;
|
|
745
748
|
}
|
|
746
749
|
|
|
747
|
-
.dark code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
|
|
750
|
+
:is(.dark code:not(.unstyled):is(:not(.prose *)):is(:not(pre *))) {
|
|
748
751
|
--tw-text-opacity: 1;
|
|
749
752
|
color: rgb(var(--color-primary-400) / var(--tw-text-opacity));
|
|
750
753
|
}
|
|
@@ -753,7 +756,7 @@ code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
|
|
|
753
756
|
background-color: rgb(var(--color-primary-500) / 0.3);
|
|
754
757
|
}
|
|
755
758
|
|
|
756
|
-
.dark code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
|
|
759
|
+
:is(.dark code:not(.unstyled):is(:not(.prose *)):is(:not(pre *))) {
|
|
757
760
|
background-color: rgb(var(--color-primary-500) / 0.2);
|
|
758
761
|
}
|
|
759
762
|
|
|
@@ -820,7 +823,7 @@ time:not(.unstyled):is(:not(.prose *)) {
|
|
|
820
823
|
line-height:1.25rem;
|
|
821
824
|
}
|
|
822
825
|
|
|
823
|
-
.dark time:not(.unstyled):is(:not(.prose *)) {
|
|
826
|
+
:is(.dark time:not(.unstyled):is(:not(.prose *))) {
|
|
824
827
|
--tw-text-opacity: 1;
|
|
825
828
|
color: rgb(var(--color-surface-400) / var(--tw-text-opacity));
|
|
826
829
|
}
|
|
@@ -861,7 +864,7 @@ fieldset,
|
|
|
861
864
|
|
|
862
865
|
/* Date Calendar Picker (Webkit) */
|
|
863
866
|
|
|
864
|
-
.dark ::-webkit-calendar-picker-indicator {
|
|
867
|
+
:is(.dark )::-webkit-calendar-picker-indicator {
|
|
865
868
|
--tw-invert: invert(100%);
|
|
866
869
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
867
870
|
}
|
|
@@ -921,7 +924,7 @@ progress::-webkit-progress-value {
|
|
|
921
924
|
width:100%;
|
|
922
925
|
}
|
|
923
926
|
|
|
924
|
-
.dark [type="range"] {
|
|
927
|
+
:is(.dark [type="range"]) {
|
|
925
928
|
accent-color: rgb(var(--color-surface-50) / 1);
|
|
926
929
|
}
|
|
927
930
|
|
|
@@ -1087,6 +1090,9 @@ progress::-webkit-progress-value {
|
|
|
1087
1090
|
|
|
1088
1091
|
.dark .variant-soft,.dark .variant-soft-surface {
|
|
1089
1092
|
color:rgb(var(--color-surface-200));
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
:is(.dark .variant-soft),:is(.dark .variant-soft-surface) {
|
|
1090
1096
|
background-color: rgb(var(--color-surface-500) / 0.2);
|
|
1091
1097
|
}
|
|
1092
1098
|
|
|
@@ -1212,6 +1218,188 @@ progress::-webkit-progress-value {
|
|
|
1212
1218
|
line-height:1.25rem;
|
|
1213
1219
|
}
|
|
1214
1220
|
|
|
1221
|
+
.btn-icon {
|
|
1222
|
+
display: inline-flex;
|
|
1223
|
+
align-items: center;
|
|
1224
|
+
justify-content: center;
|
|
1225
|
+
}
|
|
1226
|
+
|
|
1227
|
+
.btn-icon > :not([hidden]) ~ :not([hidden]) {
|
|
1228
|
+
--tw-space-x-reverse: 0;
|
|
1229
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1230
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1231
|
+
}
|
|
1232
|
+
|
|
1233
|
+
.btn-icon {
|
|
1234
|
+
white-space: nowrap;
|
|
1235
|
+
padding-left: 1.25rem;
|
|
1236
|
+
padding-right: 1.25rem;
|
|
1237
|
+
padding-top: 9px;
|
|
1238
|
+
padding-bottom: 9px;
|
|
1239
|
+
font-size: 1rem;
|
|
1240
|
+
line-height: 1.5rem;
|
|
1241
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1242
|
+
transition-duration: 150ms;
|
|
1243
|
+
align-items:center;
|
|
1244
|
+
justify-content:center;
|
|
1245
|
+
text-align:center;
|
|
1246
|
+
transition-property:all;
|
|
1247
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1248
|
+
transition-duration:.15s;
|
|
1249
|
+
}
|
|
1250
|
+
|
|
1251
|
+
.btn-icon:hover {
|
|
1252
|
+
--tw-brightness: brightness(1.15);
|
|
1253
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1254
|
+
}
|
|
1255
|
+
|
|
1256
|
+
.btn-icon {
|
|
1257
|
+
/* Size (match base) */
|
|
1258
|
+
padding-left: 1.25rem;
|
|
1259
|
+
padding-right: 1.25rem;
|
|
1260
|
+
padding-top: 9px;
|
|
1261
|
+
padding-bottom: 9px;
|
|
1262
|
+
font-size: 1rem;
|
|
1263
|
+
line-height: 1.5rem;
|
|
1264
|
+
/* Core */
|
|
1265
|
+
white-space: nowrap;
|
|
1266
|
+
text-align:center;
|
|
1267
|
+
/* Flex Columns */
|
|
1268
|
+
display: inline-flex;
|
|
1269
|
+
align-items: center;
|
|
1270
|
+
justify-content: center;
|
|
1271
|
+
}
|
|
1272
|
+
|
|
1273
|
+
.btn-icon > :not([hidden]) ~ :not([hidden]) {
|
|
1274
|
+
--tw-space-x-reverse: 0;
|
|
1275
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1276
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1277
|
+
}
|
|
1278
|
+
|
|
1279
|
+
.btn-icon{
|
|
1280
|
+
align-items:center;
|
|
1281
|
+
justify-content:center
|
|
1282
|
+
/* States */
|
|
1283
|
+
}
|
|
1284
|
+
|
|
1285
|
+
.btn-icon:hover {
|
|
1286
|
+
--tw-brightness: brightness(1.15);
|
|
1287
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1288
|
+
}
|
|
1289
|
+
|
|
1290
|
+
.btn-icon {
|
|
1291
|
+
/* Transitions */
|
|
1292
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1293
|
+
transition-duration: 150ms;
|
|
1294
|
+
transition-property:all;
|
|
1295
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1296
|
+
transition-duration:.15s;
|
|
1297
|
+
border-radius:var(--theme-rounded-base);
|
|
1298
|
+
}
|
|
1299
|
+
|
|
1300
|
+
.btn-icon:active {
|
|
1301
|
+
--tw-scale-x: 95%;
|
|
1302
|
+
--tw-scale-y: 95%;
|
|
1303
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1304
|
+
--tw-brightness: brightness(.9);
|
|
1305
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1308
|
+
.btn-icon {
|
|
1309
|
+
display: inline-flex;
|
|
1310
|
+
align-items: center;
|
|
1311
|
+
justify-content: center;
|
|
1312
|
+
}
|
|
1313
|
+
|
|
1314
|
+
.btn-icon > :not([hidden]) ~ :not([hidden]) {
|
|
1315
|
+
--tw-space-x-reverse: 0;
|
|
1316
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1317
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1318
|
+
}
|
|
1319
|
+
|
|
1320
|
+
.btn-icon {
|
|
1321
|
+
white-space: nowrap;
|
|
1322
|
+
padding-left: 1.25rem;
|
|
1323
|
+
padding-right: 1.25rem;
|
|
1324
|
+
padding-top: 9px;
|
|
1325
|
+
padding-bottom: 9px;
|
|
1326
|
+
font-size: 1rem;
|
|
1327
|
+
line-height: 1.5rem;
|
|
1328
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1329
|
+
transition-duration: 150ms;
|
|
1330
|
+
align-items:center;
|
|
1331
|
+
justify-content:center;
|
|
1332
|
+
text-align:center;
|
|
1333
|
+
transition-property:all;
|
|
1334
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1335
|
+
transition-duration:.15s;
|
|
1336
|
+
}
|
|
1337
|
+
|
|
1338
|
+
.btn-icon:hover {
|
|
1339
|
+
--tw-brightness: brightness(1.15);
|
|
1340
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1341
|
+
}
|
|
1342
|
+
|
|
1343
|
+
.btn-icon {
|
|
1344
|
+
/* Size (match base) */
|
|
1345
|
+
padding-left: 1.25rem;
|
|
1346
|
+
padding-right: 1.25rem;
|
|
1347
|
+
padding-top: 9px;
|
|
1348
|
+
padding-bottom: 9px;
|
|
1349
|
+
font-size: 1rem;
|
|
1350
|
+
line-height: 1.5rem;
|
|
1351
|
+
/* Core */
|
|
1352
|
+
white-space: nowrap;
|
|
1353
|
+
text-align:center;
|
|
1354
|
+
/* Flex Columns */
|
|
1355
|
+
display: inline-flex;
|
|
1356
|
+
align-items: center;
|
|
1357
|
+
justify-content: center;
|
|
1358
|
+
}
|
|
1359
|
+
|
|
1360
|
+
.btn-icon > :not([hidden]) ~ :not([hidden]) {
|
|
1361
|
+
--tw-space-x-reverse: 0;
|
|
1362
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1363
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1364
|
+
}
|
|
1365
|
+
|
|
1366
|
+
.btn-icon{
|
|
1367
|
+
align-items:center;
|
|
1368
|
+
justify-content:center
|
|
1369
|
+
/* States */
|
|
1370
|
+
}
|
|
1371
|
+
|
|
1372
|
+
.btn-icon:hover {
|
|
1373
|
+
--tw-brightness: brightness(1.15);
|
|
1374
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1375
|
+
}
|
|
1376
|
+
|
|
1377
|
+
.btn-icon {
|
|
1378
|
+
/* Transitions */
|
|
1379
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1380
|
+
transition-duration: 150ms;
|
|
1381
|
+
transition-property:all;
|
|
1382
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1383
|
+
transition-duration:.15s;
|
|
1384
|
+
border-radius:var(--theme-rounded-base);
|
|
1385
|
+
}
|
|
1386
|
+
|
|
1387
|
+
.btn-icon:active {
|
|
1388
|
+
--tw-scale-x: 95%;
|
|
1389
|
+
--tw-scale-y: 95%;
|
|
1390
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1391
|
+
--tw-brightness: brightness(.9);
|
|
1392
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1393
|
+
}
|
|
1394
|
+
|
|
1395
|
+
.btn-icon {
|
|
1396
|
+
width: 43px;
|
|
1397
|
+
font-size: 1rem;
|
|
1398
|
+
line-height: 1.5rem;
|
|
1399
|
+
aspect-ratio:1 / 1;
|
|
1400
|
+
border-radius: 9999px;
|
|
1401
|
+
}
|
|
1402
|
+
|
|
1215
1403
|
.chip {
|
|
1216
1404
|
white-space: nowrap;
|
|
1217
1405
|
padding-left: 0.75rem;
|
|
@@ -1483,6 +1671,191 @@ button:disabled:active {
|
|
|
1483
1671
|
|
|
1484
1672
|
/* A circular button meant for housing icons. */
|
|
1485
1673
|
|
|
1674
|
+
.btn-icon {
|
|
1675
|
+
/* Extend Base Button Clases */
|
|
1676
|
+
display: inline-flex;
|
|
1677
|
+
align-items: center;
|
|
1678
|
+
justify-content: center;
|
|
1679
|
+
}
|
|
1680
|
+
|
|
1681
|
+
.btn-icon > :not([hidden]) ~ :not([hidden]) {
|
|
1682
|
+
--tw-space-x-reverse: 0;
|
|
1683
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1684
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1685
|
+
}
|
|
1686
|
+
|
|
1687
|
+
.btn-icon {
|
|
1688
|
+
white-space: nowrap;
|
|
1689
|
+
padding-left: 1.25rem;
|
|
1690
|
+
padding-right: 1.25rem;
|
|
1691
|
+
padding-top: 9px;
|
|
1692
|
+
padding-bottom: 9px;
|
|
1693
|
+
font-size: 1rem;
|
|
1694
|
+
line-height: 1.5rem;
|
|
1695
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1696
|
+
transition-duration: 150ms;
|
|
1697
|
+
align-items:center;
|
|
1698
|
+
justify-content:center;
|
|
1699
|
+
text-align:center;
|
|
1700
|
+
transition-property:all;
|
|
1701
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1702
|
+
transition-duration:.15s;
|
|
1703
|
+
}
|
|
1704
|
+
|
|
1705
|
+
.btn-icon:hover {
|
|
1706
|
+
--tw-brightness: brightness(1.15);
|
|
1707
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1708
|
+
}
|
|
1709
|
+
|
|
1710
|
+
.btn-icon {
|
|
1711
|
+
/* Size (match base) */
|
|
1712
|
+
padding-left: 1.25rem;
|
|
1713
|
+
padding-right: 1.25rem;
|
|
1714
|
+
padding-top: 9px;
|
|
1715
|
+
padding-bottom: 9px;
|
|
1716
|
+
font-size: 1rem;
|
|
1717
|
+
line-height: 1.5rem;
|
|
1718
|
+
/* Core */
|
|
1719
|
+
white-space: nowrap;
|
|
1720
|
+
text-align:center;
|
|
1721
|
+
/* Flex Columns */
|
|
1722
|
+
display: inline-flex;
|
|
1723
|
+
align-items: center;
|
|
1724
|
+
justify-content: center;
|
|
1725
|
+
}
|
|
1726
|
+
|
|
1727
|
+
.btn-icon > :not([hidden]) ~ :not([hidden]) {
|
|
1728
|
+
--tw-space-x-reverse: 0;
|
|
1729
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1730
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1731
|
+
}
|
|
1732
|
+
|
|
1733
|
+
.btn-icon{
|
|
1734
|
+
align-items:center;
|
|
1735
|
+
justify-content:center
|
|
1736
|
+
/* States */
|
|
1737
|
+
}
|
|
1738
|
+
|
|
1739
|
+
.btn-icon:hover {
|
|
1740
|
+
--tw-brightness: brightness(1.15);
|
|
1741
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1742
|
+
}
|
|
1743
|
+
|
|
1744
|
+
.btn-icon {
|
|
1745
|
+
/* Transitions */
|
|
1746
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1747
|
+
transition-duration: 150ms;
|
|
1748
|
+
transition-property:all;
|
|
1749
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1750
|
+
transition-duration:.15s;
|
|
1751
|
+
border-radius:var(--theme-rounded-base);
|
|
1752
|
+
}
|
|
1753
|
+
|
|
1754
|
+
.btn-icon:active {
|
|
1755
|
+
--tw-scale-x: 95%;
|
|
1756
|
+
--tw-scale-y: 95%;
|
|
1757
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1758
|
+
--tw-brightness: brightness(.9);
|
|
1759
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1760
|
+
}
|
|
1761
|
+
|
|
1762
|
+
.btn-icon {
|
|
1763
|
+
display: inline-flex;
|
|
1764
|
+
align-items: center;
|
|
1765
|
+
justify-content: center;
|
|
1766
|
+
}
|
|
1767
|
+
|
|
1768
|
+
.btn-icon > :not([hidden]) ~ :not([hidden]) {
|
|
1769
|
+
--tw-space-x-reverse: 0;
|
|
1770
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1771
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1772
|
+
}
|
|
1773
|
+
|
|
1774
|
+
.btn-icon {
|
|
1775
|
+
white-space: nowrap;
|
|
1776
|
+
padding-left: 1.25rem;
|
|
1777
|
+
padding-right: 1.25rem;
|
|
1778
|
+
padding-top: 9px;
|
|
1779
|
+
padding-bottom: 9px;
|
|
1780
|
+
font-size: 1rem;
|
|
1781
|
+
line-height: 1.5rem;
|
|
1782
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1783
|
+
transition-duration: 150ms;
|
|
1784
|
+
align-items:center;
|
|
1785
|
+
justify-content:center;
|
|
1786
|
+
text-align:center;
|
|
1787
|
+
transition-property:all;
|
|
1788
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1789
|
+
transition-duration:.15s;
|
|
1790
|
+
}
|
|
1791
|
+
|
|
1792
|
+
.btn-icon:hover {
|
|
1793
|
+
--tw-brightness: brightness(1.15);
|
|
1794
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1795
|
+
}
|
|
1796
|
+
|
|
1797
|
+
.btn-icon {
|
|
1798
|
+
/* Size (match base) */
|
|
1799
|
+
padding-left: 1.25rem;
|
|
1800
|
+
padding-right: 1.25rem;
|
|
1801
|
+
padding-top: 9px;
|
|
1802
|
+
padding-bottom: 9px;
|
|
1803
|
+
font-size: 1rem;
|
|
1804
|
+
line-height: 1.5rem;
|
|
1805
|
+
/* Core */
|
|
1806
|
+
white-space: nowrap;
|
|
1807
|
+
text-align:center;
|
|
1808
|
+
/* Flex Columns */
|
|
1809
|
+
display: inline-flex;
|
|
1810
|
+
align-items: center;
|
|
1811
|
+
justify-content: center;
|
|
1812
|
+
}
|
|
1813
|
+
|
|
1814
|
+
.btn-icon > :not([hidden]) ~ :not([hidden]) {
|
|
1815
|
+
--tw-space-x-reverse: 0;
|
|
1816
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1817
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1818
|
+
}
|
|
1819
|
+
|
|
1820
|
+
.btn-icon{
|
|
1821
|
+
align-items:center;
|
|
1822
|
+
justify-content:center
|
|
1823
|
+
/* States */
|
|
1824
|
+
}
|
|
1825
|
+
|
|
1826
|
+
.btn-icon:hover {
|
|
1827
|
+
--tw-brightness: brightness(1.15);
|
|
1828
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1829
|
+
}
|
|
1830
|
+
|
|
1831
|
+
.btn-icon {
|
|
1832
|
+
/* Transitions */
|
|
1833
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1834
|
+
transition-duration: 150ms;
|
|
1835
|
+
transition-property:all;
|
|
1836
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1837
|
+
transition-duration:.15s;
|
|
1838
|
+
border-radius:var(--theme-rounded-base);
|
|
1839
|
+
}
|
|
1840
|
+
|
|
1841
|
+
.btn-icon:active {
|
|
1842
|
+
--tw-scale-x: 95%;
|
|
1843
|
+
--tw-scale-y: 95%;
|
|
1844
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1845
|
+
--tw-brightness: brightness(.9);
|
|
1846
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1847
|
+
}
|
|
1848
|
+
|
|
1849
|
+
.btn-icon {
|
|
1850
|
+
/* Size (match base) */
|
|
1851
|
+
width: 43px;
|
|
1852
|
+
font-size: 1rem;
|
|
1853
|
+
line-height: 1.5rem;
|
|
1854
|
+
aspect-ratio:1 / 1;
|
|
1855
|
+
/* Rounded */
|
|
1856
|
+
border-radius: 9999px;
|
|
1857
|
+
}
|
|
1858
|
+
|
|
1486
1859
|
/* Icon Button: Size */
|
|
1487
1860
|
|
|
1488
1861
|
/* File Input Button */
|
|
@@ -1919,6 +2292,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
|
1919
2292
|
.dark .variant-soft,.dark
|
|
1920
2293
|
.variant-soft-surface {
|
|
1921
2294
|
color:rgb(var(--color-surface-200));
|
|
2295
|
+
}
|
|
2296
|
+
|
|
2297
|
+
:is(.dark .variant-soft),:is(.dark
|
|
2298
|
+
.variant-soft-surface) {
|
|
1922
2299
|
background-color: rgb(var(--color-surface-500) / 0.2);
|
|
1923
2300
|
}
|
|
1924
2301
|
|
|
@@ -2256,11 +2633,6 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
|
2256
2633
|
--tw-ring-color: rgb(var(--color-surface-500) / 0.3);
|
|
2257
2634
|
}
|
|
2258
2635
|
|
|
2259
|
-
.blur {
|
|
2260
|
-
--tw-blur: blur(8px);
|
|
2261
|
-
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
2262
|
-
}
|
|
2263
|
-
|
|
2264
2636
|
.transition {
|
|
2265
2637
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
|
2266
2638
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
@@ -3773,7 +4145,8 @@ html{
|
|
|
3773
4145
|
-o-tab-size:4;
|
|
3774
4146
|
tab-size:4;
|
|
3775
4147
|
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
|
|
3776
|
-
font-feature-settings:normal
|
|
4148
|
+
font-feature-settings:normal;
|
|
4149
|
+
font-variation-settings:normal
|
|
3777
4150
|
}
|
|
3778
4151
|
|
|
3779
4152
|
body{
|
|
@@ -4376,11 +4749,6 @@ img,video{
|
|
|
4376
4749
|
--tw-ring-color: rgb(var(--color-surface-500) / .3)
|
|
4377
4750
|
}
|
|
4378
4751
|
|
|
4379
|
-
.blur{
|
|
4380
|
-
--tw-blur: blur(8px);
|
|
4381
|
-
filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
|
|
4382
|
-
}
|
|
4383
|
-
|
|
4384
4752
|
.transition{
|
|
4385
4753
|
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
|
|
4386
4754
|
transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default:
|
|
1
|
+
declare const _default: any;
|
|
2
2
|
export default _default;
|
|
@@ -1,20 +1,27 @@
|
|
|
1
1
|
declare const _default: import("vue").DefineComponent<{
|
|
2
|
+
icon: {
|
|
3
|
+
type: () => boolean;
|
|
4
|
+
default: boolean;
|
|
5
|
+
};
|
|
2
6
|
tag: {
|
|
3
7
|
type: () => string;
|
|
4
8
|
default: string;
|
|
5
9
|
};
|
|
6
|
-
|
|
7
|
-
|
|
10
|
+
}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
11
|
+
click: () => void;
|
|
12
|
+
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
13
|
+
icon: {
|
|
14
|
+
type: () => boolean;
|
|
15
|
+
default: boolean;
|
|
8
16
|
};
|
|
9
|
-
}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
10
17
|
tag: {
|
|
11
18
|
type: () => string;
|
|
12
19
|
default: string;
|
|
13
20
|
};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
21
|
+
}>> & {
|
|
22
|
+
onClick?: (() => any) | undefined;
|
|
23
|
+
}, {
|
|
24
|
+
icon: boolean;
|
|
18
25
|
tag: string;
|
|
19
26
|
}>;
|
|
20
27
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default:
|
|
1
|
+
declare const _default: any;
|
|
2
2
|
export default _default;
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @slot fixedHeader - Insert fixed header content, such as Skeleton's App Bar component.
|
|
3
|
+
* @slot sidebarLeft - Hidden when empty. Allows you to set fixed left sidebar content.
|
|
4
|
+
* @slot sidebarRight - Hidden when empty. Allows you to set fixed right sidebar content.
|
|
5
|
+
* @slot pageHeader - Insert content that resides above your page content. Great for global alerts.
|
|
6
|
+
* @slot pageFooter - Insert content that resides below your page content. Recommended for most layouts.
|
|
7
|
+
* @slot fixedFooter - Insert fixed footer content. Not recommended for most layouts.
|
|
8
|
+
*/
|
|
1
9
|
export declare type CssClasses = string;
|
|
2
10
|
declare const _default: import("vue").DefineComponent<{
|
|
3
11
|
regionPage: {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -9,39 +9,21 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
9
9
|
type: StringConstructor;
|
|
10
10
|
default: string;
|
|
11
11
|
};
|
|
12
|
-
|
|
12
|
+
headerClass: {
|
|
13
13
|
type: () => CssClasses;
|
|
14
|
-
default: string;
|
|
15
|
-
};
|
|
16
|
-
blur: {
|
|
17
|
-
type: () => CssClasses;
|
|
18
|
-
default: string;
|
|
19
|
-
};
|
|
20
|
-
text: {
|
|
21
|
-
type: () => CssClasses;
|
|
22
|
-
default: string;
|
|
23
14
|
};
|
|
24
|
-
|
|
15
|
+
preClass: {
|
|
25
16
|
type: () => CssClasses;
|
|
26
|
-
default: string;
|
|
27
|
-
};
|
|
28
|
-
rounded: {
|
|
29
|
-
type: () => CssClasses;
|
|
30
|
-
default: string;
|
|
31
|
-
};
|
|
32
|
-
shadow: {
|
|
33
|
-
type: () => CssClasses;
|
|
34
|
-
default: string;
|
|
35
17
|
};
|
|
36
|
-
|
|
18
|
+
buttonClass: {
|
|
37
19
|
type: () => CssClasses;
|
|
38
20
|
default: string;
|
|
39
21
|
};
|
|
40
|
-
|
|
22
|
+
buttonText: {
|
|
41
23
|
type: StringConstructor;
|
|
42
24
|
default: string;
|
|
43
25
|
};
|
|
44
|
-
|
|
26
|
+
buttonCopiedText: {
|
|
45
27
|
type: StringConstructor;
|
|
46
28
|
default: string;
|
|
47
29
|
};
|
|
@@ -56,55 +38,31 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
56
38
|
type: StringConstructor;
|
|
57
39
|
default: string;
|
|
58
40
|
};
|
|
59
|
-
|
|
41
|
+
headerClass: {
|
|
60
42
|
type: () => CssClasses;
|
|
61
|
-
default: string;
|
|
62
|
-
};
|
|
63
|
-
blur: {
|
|
64
|
-
type: () => CssClasses;
|
|
65
|
-
default: string;
|
|
66
|
-
};
|
|
67
|
-
text: {
|
|
68
|
-
type: () => CssClasses;
|
|
69
|
-
default: string;
|
|
70
43
|
};
|
|
71
|
-
|
|
44
|
+
preClass: {
|
|
72
45
|
type: () => CssClasses;
|
|
73
|
-
default: string;
|
|
74
|
-
};
|
|
75
|
-
rounded: {
|
|
76
|
-
type: () => CssClasses;
|
|
77
|
-
default: string;
|
|
78
|
-
};
|
|
79
|
-
shadow: {
|
|
80
|
-
type: () => CssClasses;
|
|
81
|
-
default: string;
|
|
82
46
|
};
|
|
83
|
-
|
|
47
|
+
buttonClass: {
|
|
84
48
|
type: () => CssClasses;
|
|
85
49
|
default: string;
|
|
86
50
|
};
|
|
87
|
-
|
|
51
|
+
buttonText: {
|
|
88
52
|
type: StringConstructor;
|
|
89
53
|
default: string;
|
|
90
54
|
};
|
|
91
|
-
|
|
55
|
+
buttonCopiedText: {
|
|
92
56
|
type: StringConstructor;
|
|
93
57
|
default: string;
|
|
94
58
|
};
|
|
95
59
|
}>> & {
|
|
96
60
|
onCopy?: (() => any) | undefined;
|
|
97
61
|
}, {
|
|
98
|
-
button: string;
|
|
99
62
|
language: string;
|
|
100
63
|
code: string;
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
color: string;
|
|
105
|
-
rounded: string;
|
|
106
|
-
shadow: string;
|
|
107
|
-
buttonLabel: string;
|
|
108
|
-
buttonCopied: string;
|
|
64
|
+
buttonClass: string;
|
|
65
|
+
buttonText: string;
|
|
66
|
+
buttonCopiedText: string;
|
|
109
67
|
}>;
|
|
110
68
|
export default _default;
|
|
@@ -79,7 +79,6 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
79
79
|
default: string;
|
|
80
80
|
};
|
|
81
81
|
}>>, {
|
|
82
|
-
rounded: string;
|
|
83
82
|
bgLight: string;
|
|
84
83
|
bgDark: string;
|
|
85
84
|
textLight: string;
|
|
@@ -87,5 +86,6 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
87
86
|
width: string;
|
|
88
87
|
height: string;
|
|
89
88
|
ring: string;
|
|
89
|
+
rounded: string;
|
|
90
90
|
}>;
|
|
91
91
|
export default _default;
|