@vanduo-oss/framework 1.4.0 → 1.4.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.
Files changed (87) hide show
  1. package/README.md +11 -9
  2. package/css/components/affix.css +11 -11
  3. package/css/components/alerts.css +55 -55
  4. package/css/components/avatar.css +62 -62
  5. package/css/components/badges.css +25 -25
  6. package/css/components/breadcrumbs.css +31 -31
  7. package/css/components/bubble.css +40 -40
  8. package/css/components/button-group.css +2 -2
  9. package/css/components/buttons.css +33 -33
  10. package/css/components/cards.css +76 -76
  11. package/css/components/chips.css +27 -27
  12. package/css/components/code-snippet.css +132 -132
  13. package/css/components/collapsible.css +60 -60
  14. package/css/components/collections.css +58 -58
  15. package/css/components/datepicker.css +52 -52
  16. package/css/components/doc-search.css +63 -63
  17. package/css/components/doc-tabs.css +1 -1
  18. package/css/components/draggable.css +69 -69
  19. package/css/components/dropdown.css +48 -48
  20. package/css/components/fab.css +60 -60
  21. package/css/components/flow.css +55 -55
  22. package/css/components/footer.css +52 -52
  23. package/css/components/forms.css +373 -373
  24. package/css/components/image-box.css +39 -39
  25. package/css/components/modals.css +47 -47
  26. package/css/components/music-player.css +150 -150
  27. package/css/components/navbar.css +71 -71
  28. package/css/components/pagination.css +50 -50
  29. package/css/components/preloader.css +18 -18
  30. package/css/components/progress.css +16 -16
  31. package/css/components/rating.css +18 -18
  32. package/css/components/ripple.css +10 -10
  33. package/css/components/sidenav.css +67 -67
  34. package/css/components/skeleton.css +13 -13
  35. package/css/components/spinner.css +30 -30
  36. package/css/components/spotlight.css +27 -27
  37. package/css/components/stepper.css +36 -36
  38. package/css/components/suggest.css +35 -35
  39. package/css/components/tabs.css +46 -46
  40. package/css/components/theme-customizer.css +73 -73
  41. package/css/components/timeline.css +43 -43
  42. package/css/components/timepicker.css +29 -29
  43. package/css/components/toast.css +27 -27
  44. package/css/components/tooltips.css +77 -77
  45. package/css/components/transfer.css +35 -35
  46. package/css/components/tree.css +25 -25
  47. package/css/components/waypoint.css +12 -12
  48. package/css/core/colors.css +610 -610
  49. package/css/core/grid.css +127 -127
  50. package/css/core/helpers.css +338 -338
  51. package/css/core/tokens.css +69 -81
  52. package/css/core/typography.css +91 -91
  53. package/css/effects/morph.css +17 -17
  54. package/css/effects/parallax.css +6 -6
  55. package/css/utilities/color-utilities.css +273 -273
  56. package/css/utilities/media.css +2 -2
  57. package/css/utilities/shadow.css +75 -75
  58. package/css/utilities/table.css +40 -40
  59. package/css/utilities/transitions.css +38 -38
  60. package/css/vanduo.css +1 -2
  61. package/dist/build-info.json +3 -3
  62. package/dist/vanduo.cjs.js +20 -20
  63. package/dist/vanduo.cjs.js.map +2 -2
  64. package/dist/vanduo.cjs.min.js +4 -4
  65. package/dist/vanduo.cjs.min.js.map +2 -2
  66. package/dist/vanduo.css +4030 -4127
  67. package/dist/vanduo.css.map +1 -1
  68. package/dist/vanduo.esm.js +20 -20
  69. package/dist/vanduo.esm.js.map +2 -2
  70. package/dist/vanduo.esm.min.js +4 -4
  71. package/dist/vanduo.esm.min.js.map +2 -2
  72. package/dist/vanduo.js +20 -20
  73. package/dist/vanduo.js.map +2 -2
  74. package/dist/vanduo.min.css +2 -2
  75. package/dist/vanduo.min.css.map +1 -1
  76. package/dist/vanduo.min.js +4 -4
  77. package/dist/vanduo.min.js.map +2 -2
  78. package/js/components/affix.js +2 -2
  79. package/js/components/image-box.js +2 -2
  80. package/js/components/morph.js +1 -1
  81. package/js/components/music-player.js +11 -11
  82. package/js/components/navbar.js +1 -1
  83. package/js/components/preloader.js +1 -1
  84. package/js/components/theme-customizer.js +4 -4
  85. package/js/components/vd-hex.js +8 -10
  86. package/package.json +1 -1
  87. package/css/core/vd-aliases.css +0 -108
package/css/core/grid.css CHANGED
@@ -5,106 +5,106 @@
5
5
 
6
6
  :root {
7
7
  /* Container (Fibonacci: 987px) */
8
- --container-max-width: 987px;
9
- --container-max-width-wide: 1597px;
8
+ --vd-container-max-width: 987px;
9
+ --vd-container-max-width-wide: 1597px;
10
10
  /* next Fibonacci */
11
- --container-padding: 0.8125rem;
11
+ --vd-container-padding: 0.8125rem;
12
12
  /* 13px - fib */
13
13
 
14
14
  /* Breakpoints */
15
- --breakpoint-sm: 576px;
16
- --breakpoint-md: 768px;
17
- --breakpoint-lg: 992px;
18
- --breakpoint-xl: 1200px;
19
- --breakpoint-2xl: 1400px;
15
+ --vd-breakpoint-sm: 576px;
16
+ --vd-breakpoint-md: 768px;
17
+ --vd-breakpoint-lg: 992px;
18
+ --vd-breakpoint-xl: 1200px;
19
+ --vd-breakpoint-2xl: 1400px;
20
20
 
21
21
  /* Grid Gutter (Fibonacci: 13px) */
22
- --grid-gutter: 0.8125rem;
22
+ --vd-grid-gutter: 0.8125rem;
23
23
 
24
24
  /* Fibonacci Gap Scale */
25
- --gap-fib-2: 0.125rem;
25
+ --vd-gap-fib-2: 0.125rem;
26
26
  /* 2px */
27
- --gap-fib-3: 0.1875rem;
27
+ --vd-gap-fib-3: 0.1875rem;
28
28
  /* 3px */
29
- --gap-fib-5: 0.3125rem;
29
+ --vd-gap-fib-5: 0.3125rem;
30
30
  /* 5px */
31
- --gap-fib-8: 0.5rem;
31
+ --vd-gap-fib-8: 0.5rem;
32
32
  /* 8px */
33
- --gap-fib-13: 0.8125rem;
33
+ --vd-gap-fib-13: 0.8125rem;
34
34
  /* 13px */
35
- --gap-fib-21: 1.3125rem;
35
+ --vd-gap-fib-21: 1.3125rem;
36
36
  /* 21px */
37
37
 
38
38
  /* Responsive Container Widths (Fibonacci-derived)
39
39
  * Using Fibonacci: 377, 610, 987, 1597
40
40
  * Lucas numbers (related to Fibonacci): 521, 843, 1364 for intermediate sizes */
41
- --container-sm: 521px;
41
+ --vd-container-sm: 521px;
42
42
  /* Lucas - between fib 377 and 610 */
43
- --container-md: 610px;
43
+ --vd-container-md: 610px;
44
44
  /* Fibonacci */
45
- --container-lg: 987px;
46
- /* Fibonacci - matches --container-max-width */
47
- --container-xl: 1364px;
45
+ --vd-container-lg: 987px;
46
+ /* Fibonacci - matches --vd-container-max-width */
47
+ --vd-container-xl: 1364px;
48
48
  /* Lucas - between fib 987 and 1597 */
49
- --container-2xl: 1597px;
50
- /* Fibonacci - matches --container-max-width-wide */
49
+ --vd-container-2xl: 1597px;
50
+ /* Fibonacci - matches --vd-container-max-width-wide */
51
51
  }
52
52
 
53
53
  /* Container */
54
54
  .vd-container {
55
55
  width: 100%;
56
- max-width: var(--container-max-width);
56
+ max-width: var(--vd-container-max-width);
57
57
  margin-left: auto;
58
58
  margin-right: auto;
59
- padding-left: var(--container-padding);
60
- padding-right: var(--container-padding);
59
+ padding-left: var(--vd-container-padding);
60
+ padding-right: var(--vd-container-padding);
61
61
  }
62
62
 
63
63
  .vd-container-fluid {
64
64
  width: 100%;
65
- padding-left: var(--container-padding);
66
- padding-right: var(--container-padding);
65
+ padding-left: var(--vd-container-padding);
66
+ padding-right: var(--vd-container-padding);
67
67
  }
68
68
 
69
69
  /* Container XL - Intermediate size (1364px Lucas number) */
70
70
  .vd-container-xl {
71
71
  width: 100%;
72
- max-width: var(--container-xl);
72
+ max-width: var(--vd-container-xl);
73
73
  margin-left: auto;
74
74
  margin-right: auto;
75
- padding-left: var(--container-padding);
76
- padding-right: var(--container-padding);
75
+ padding-left: var(--vd-container-padding);
76
+ padding-right: var(--vd-container-padding);
77
77
  }
78
78
 
79
79
  /* Container Wide - Full Fibonacci wide (1597px) */
80
80
  .vd-container-wide {
81
81
  width: 100%;
82
- max-width: var(--container-max-width-wide);
82
+ max-width: var(--vd-container-max-width-wide);
83
83
  margin-left: auto;
84
84
  margin-right: auto;
85
- padding-left: var(--container-padding);
86
- padding-right: var(--container-padding);
85
+ padding-left: var(--vd-container-padding);
86
+ padding-right: var(--vd-container-padding);
87
87
  }
88
88
 
89
89
  /* Container Responsive - Grows with viewport at XL+ breakpoints */
90
90
  .vd-container-responsive {
91
91
  width: 100%;
92
- max-width: var(--container-max-width);
92
+ max-width: var(--vd-container-max-width);
93
93
  margin-left: auto;
94
94
  margin-right: auto;
95
- padding-left: var(--container-padding);
96
- padding-right: var(--container-padding);
95
+ padding-left: var(--vd-container-padding);
96
+ padding-right: var(--vd-container-padding);
97
97
  }
98
98
 
99
99
  @media (min-width: 1200px) {
100
100
  .vd-container-responsive {
101
- max-width: var(--container-xl);
101
+ max-width: var(--vd-container-xl);
102
102
  }
103
103
  }
104
104
 
105
105
  @media (min-width: 1400px) {
106
106
  .vd-container-responsive {
107
- max-width: var(--container-2xl);
107
+ max-width: var(--vd-container-2xl);
108
108
  }
109
109
  }
110
110
 
@@ -112,15 +112,15 @@
112
112
  .vd-row {
113
113
  display: flex;
114
114
  flex-wrap: wrap;
115
- margin-left: calc(var(--grid-gutter) * -0.5);
116
- margin-right: calc(var(--grid-gutter) * -0.5);
115
+ margin-left: calc(var(--vd-grid-gutter) * -0.5);
116
+ margin-right: calc(var(--vd-grid-gutter) * -0.5);
117
117
  }
118
118
 
119
119
  /* Columns */
120
120
  [class*="col-"] {
121
121
  flex: 1 0 0%;
122
- padding-left: calc(var(--grid-gutter) * 0.5);
123
- padding-right: calc(var(--grid-gutter) * 0.5);
122
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
123
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
124
124
  }
125
125
 
126
126
  /* Column Sizes - Mobile First (12-column system) */
@@ -1224,24 +1224,24 @@
1224
1224
  max-width: 610px;
1225
1225
  margin-left: auto;
1226
1226
  margin-right: auto;
1227
- padding-left: var(--container-padding);
1228
- padding-right: var(--container-padding);
1227
+ padding-left: var(--vd-container-padding);
1228
+ padding-right: var(--vd-container-padding);
1229
1229
  }
1230
1230
 
1231
1231
  .vd-container-fib-987 {
1232
1232
  max-width: 987px;
1233
1233
  margin-left: auto;
1234
1234
  margin-right: auto;
1235
- padding-left: var(--container-padding);
1236
- padding-right: var(--container-padding);
1235
+ padding-left: var(--vd-container-padding);
1236
+ padding-right: var(--vd-container-padding);
1237
1237
  }
1238
1238
 
1239
1239
  .vd-container-fib-1597 {
1240
1240
  max-width: 1597px;
1241
1241
  margin-left: auto;
1242
1242
  margin-right: auto;
1243
- padding-left: var(--container-padding);
1244
- padding-right: var(--container-padding);
1243
+ padding-left: var(--vd-container-padding);
1244
+ padding-right: var(--vd-container-padding);
1245
1245
  }
1246
1246
 
1247
1247
  /* ===================================================
@@ -1257,77 +1257,77 @@
1257
1257
  width: 100%;
1258
1258
  margin-left: auto;
1259
1259
  margin-right: auto;
1260
- padding-left: var(--container-padding);
1261
- padding-right: var(--container-padding);
1260
+ padding-left: var(--vd-container-padding);
1261
+ padding-right: var(--vd-container-padding);
1262
1262
  }
1263
1263
 
1264
1264
  @media (min-width: 576px) {
1265
1265
  .vd-container-sm {
1266
- max-width: var(--container-sm);
1266
+ max-width: var(--vd-container-sm);
1267
1267
  }
1268
1268
  }
1269
1269
 
1270
1270
  @media (min-width: 768px) {
1271
1271
  .vd-container-sm {
1272
- max-width: var(--container-md);
1272
+ max-width: var(--vd-container-md);
1273
1273
  }
1274
1274
 
1275
1275
  .vd-container-md {
1276
- max-width: var(--container-md);
1276
+ max-width: var(--vd-container-md);
1277
1277
  }
1278
1278
  }
1279
1279
 
1280
1280
  @media (min-width: 992px) {
1281
1281
  .vd-container-sm {
1282
- max-width: var(--container-lg);
1282
+ max-width: var(--vd-container-lg);
1283
1283
  }
1284
1284
 
1285
1285
  .vd-container-md {
1286
- max-width: var(--container-lg);
1286
+ max-width: var(--vd-container-lg);
1287
1287
  }
1288
1288
 
1289
1289
  .vd-container-lg {
1290
- max-width: var(--container-lg);
1290
+ max-width: var(--vd-container-lg);
1291
1291
  }
1292
1292
  }
1293
1293
 
1294
1294
  @media (min-width: 1200px) {
1295
1295
  .vd-container-sm {
1296
- max-width: var(--container-xl);
1296
+ max-width: var(--vd-container-xl);
1297
1297
  }
1298
1298
 
1299
1299
  .vd-container-md {
1300
- max-width: var(--container-xl);
1300
+ max-width: var(--vd-container-xl);
1301
1301
  }
1302
1302
 
1303
1303
  .vd-container-lg {
1304
- max-width: var(--container-xl);
1304
+ max-width: var(--vd-container-xl);
1305
1305
  }
1306
1306
 
1307
1307
  .vd-container-xl {
1308
- max-width: var(--container-xl);
1308
+ max-width: var(--vd-container-xl);
1309
1309
  }
1310
1310
  }
1311
1311
 
1312
1312
  @media (min-width: 1400px) {
1313
1313
  .vd-container-sm {
1314
- max-width: var(--container-2xl);
1314
+ max-width: var(--vd-container-2xl);
1315
1315
  }
1316
1316
 
1317
1317
  .vd-container-md {
1318
- max-width: var(--container-2xl);
1318
+ max-width: var(--vd-container-2xl);
1319
1319
  }
1320
1320
 
1321
1321
  .vd-container-lg {
1322
- max-width: var(--container-2xl);
1322
+ max-width: var(--vd-container-2xl);
1323
1323
  }
1324
1324
 
1325
1325
  .vd-container-xl {
1326
- max-width: var(--container-2xl);
1326
+ max-width: var(--vd-container-2xl);
1327
1327
  }
1328
1328
 
1329
1329
  .vd-container-2xl {
1330
- max-width: var(--container-2xl);
1330
+ max-width: var(--vd-container-2xl);
1331
1331
  }
1332
1332
  }
1333
1333
 
@@ -1335,78 +1335,78 @@
1335
1335
  .vd-row-golden {
1336
1336
  display: flex;
1337
1337
  flex-wrap: wrap;
1338
- margin-left: calc(var(--grid-gutter) * -0.5);
1339
- margin-right: calc(var(--grid-gutter) * -0.5);
1338
+ margin-left: calc(var(--vd-grid-gutter) * -0.5);
1339
+ margin-right: calc(var(--vd-grid-gutter) * -0.5);
1340
1340
  }
1341
1341
 
1342
1342
  .vd-row-golden>.vd-col-golden-minor {
1343
1343
  flex: 0 0 auto;
1344
1344
  width: 38.196601%;
1345
- padding-left: calc(var(--grid-gutter) * 0.5);
1346
- padding-right: calc(var(--grid-gutter) * 0.5);
1345
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1346
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1347
1347
  }
1348
1348
 
1349
1349
  .vd-row-golden>.vd-col-golden-major {
1350
1350
  flex: 0 0 auto;
1351
1351
  width: 61.803399%;
1352
- padding-left: calc(var(--grid-gutter) * 0.5);
1353
- padding-right: calc(var(--grid-gutter) * 0.5);
1352
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1353
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1354
1354
  }
1355
1355
 
1356
1356
  /* Fibonacci Two-Column: 5:8 proportions */
1357
1357
  .vd-row-fib-2 {
1358
1358
  display: flex;
1359
1359
  flex-wrap: wrap;
1360
- margin-left: calc(var(--grid-gutter) * -0.5);
1361
- margin-right: calc(var(--grid-gutter) * -0.5);
1360
+ margin-left: calc(var(--vd-grid-gutter) * -0.5);
1361
+ margin-right: calc(var(--vd-grid-gutter) * -0.5);
1362
1362
  }
1363
1363
 
1364
1364
  .vd-row-fib-2>.vd-col-fib-5 {
1365
1365
  flex: 0 0 auto;
1366
1366
  width: 38.461538%;
1367
1367
  /* 5/13 */
1368
- padding-left: calc(var(--grid-gutter) * 0.5);
1369
- padding-right: calc(var(--grid-gutter) * 0.5);
1368
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1369
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1370
1370
  }
1371
1371
 
1372
1372
  .vd-row-fib-2>.vd-col-fib-8 {
1373
1373
  flex: 0 0 auto;
1374
1374
  width: 61.538462%;
1375
1375
  /* 8/13 */
1376
- padding-left: calc(var(--grid-gutter) * 0.5);
1377
- padding-right: calc(var(--grid-gutter) * 0.5);
1376
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1377
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1378
1378
  }
1379
1379
 
1380
1380
  /* Fibonacci Three-Column: 2:3:5 proportions */
1381
1381
  .vd-row-fib-3 {
1382
1382
  display: flex;
1383
1383
  flex-wrap: wrap;
1384
- margin-left: calc(var(--grid-gutter) * -0.5);
1385
- margin-right: calc(var(--grid-gutter) * -0.5);
1384
+ margin-left: calc(var(--vd-grid-gutter) * -0.5);
1385
+ margin-right: calc(var(--vd-grid-gutter) * -0.5);
1386
1386
  }
1387
1387
 
1388
1388
  .vd-row-fib-3>.vd-col-fib-2 {
1389
1389
  flex: 0 0 auto;
1390
1390
  width: 20%;
1391
1391
  /* 2/10 */
1392
- padding-left: calc(var(--grid-gutter) * 0.5);
1393
- padding-right: calc(var(--grid-gutter) * 0.5);
1392
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1393
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1394
1394
  }
1395
1395
 
1396
1396
  .vd-row-fib-3>.vd-col-fib-3 {
1397
1397
  flex: 0 0 auto;
1398
1398
  width: 30%;
1399
1399
  /* 3/10 */
1400
- padding-left: calc(var(--grid-gutter) * 0.5);
1401
- padding-right: calc(var(--grid-gutter) * 0.5);
1400
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1401
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1402
1402
  }
1403
1403
 
1404
1404
  .vd-row-fib-3>.vd-col-fib-5 {
1405
1405
  flex: 0 0 auto;
1406
1406
  width: 50%;
1407
1407
  /* 5/10 */
1408
- padding-left: calc(var(--grid-gutter) * 0.5);
1409
- padding-right: calc(var(--grid-gutter) * 0.5);
1408
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1409
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1410
1410
  }
1411
1411
 
1412
1412
  /* CSS Grid Golden Ratio layouts */
@@ -1414,93 +1414,93 @@
1414
1414
  .grid-golden {
1415
1415
  display: grid;
1416
1416
  grid-template-columns: 1fr 1.618fr;
1417
- gap: var(--grid-gutter);
1417
+ gap: var(--vd-grid-gutter);
1418
1418
  }
1419
1419
 
1420
1420
  .vd-grid-golden-reverse,
1421
1421
  .grid-golden-reverse {
1422
1422
  display: grid;
1423
1423
  grid-template-columns: 1.618fr 1fr;
1424
- gap: var(--grid-gutter);
1424
+ gap: var(--vd-grid-gutter);
1425
1425
  }
1426
1426
 
1427
1427
  .vd-grid-fib-3,
1428
1428
  .grid-fib-3 {
1429
1429
  display: grid;
1430
1430
  grid-template-columns: 2fr 3fr 5fr;
1431
- gap: var(--grid-gutter);
1431
+ gap: var(--vd-grid-gutter);
1432
1432
  }
1433
1433
 
1434
1434
  /* Fibonacci Four-Column: 1:2:3:5 proportions */
1435
1435
  .vd-row-fib-4 {
1436
1436
  display: flex;
1437
1437
  flex-wrap: wrap;
1438
- margin-left: calc(var(--grid-gutter) * -0.5);
1439
- margin-right: calc(var(--grid-gutter) * -0.5);
1438
+ margin-left: calc(var(--vd-grid-gutter) * -0.5);
1439
+ margin-right: calc(var(--vd-grid-gutter) * -0.5);
1440
1440
  }
1441
1441
 
1442
1442
  .vd-row-fib-4>.vd-col-fib-1 {
1443
1443
  flex: 0 0 auto;
1444
1444
  width: 9.090909%;
1445
1445
  /* 1/11 */
1446
- padding-left: calc(var(--grid-gutter) * 0.5);
1447
- padding-right: calc(var(--grid-gutter) * 0.5);
1446
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1447
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1448
1448
  }
1449
1449
 
1450
1450
  .vd-row-fib-4>.vd-col-fib-2 {
1451
1451
  flex: 0 0 auto;
1452
1452
  width: 18.181818%;
1453
1453
  /* 2/11 */
1454
- padding-left: calc(var(--grid-gutter) * 0.5);
1455
- padding-right: calc(var(--grid-gutter) * 0.5);
1454
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1455
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1456
1456
  }
1457
1457
 
1458
1458
  .vd-row-fib-4>.vd-col-fib-3 {
1459
1459
  flex: 0 0 auto;
1460
1460
  width: 27.272727%;
1461
1461
  /* 3/11 */
1462
- padding-left: calc(var(--grid-gutter) * 0.5);
1463
- padding-right: calc(var(--grid-gutter) * 0.5);
1462
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1463
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1464
1464
  }
1465
1465
 
1466
1466
  .vd-row-fib-4>.vd-col-fib-5 {
1467
1467
  flex: 0 0 auto;
1468
1468
  width: 45.454545%;
1469
1469
  /* 5/11 */
1470
- padding-left: calc(var(--grid-gutter) * 0.5);
1471
- padding-right: calc(var(--grid-gutter) * 0.5);
1470
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1471
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1472
1472
  }
1473
1473
 
1474
1474
  /* Fibonacci Three-Column: 3:5:8 proportions */
1475
1475
  .vd-row-fib-3-alt {
1476
1476
  display: flex;
1477
1477
  flex-wrap: wrap;
1478
- margin-left: calc(var(--grid-gutter) * -0.5);
1479
- margin-right: calc(var(--grid-gutter) * -0.5);
1478
+ margin-left: calc(var(--vd-grid-gutter) * -0.5);
1479
+ margin-right: calc(var(--vd-grid-gutter) * -0.5);
1480
1480
  }
1481
1481
 
1482
1482
  .vd-row-fib-3-alt>.vd-col-fib-3 {
1483
1483
  flex: 0 0 auto;
1484
1484
  width: 18.75%;
1485
1485
  /* 3/16 */
1486
- padding-left: calc(var(--grid-gutter) * 0.5);
1487
- padding-right: calc(var(--grid-gutter) * 0.5);
1486
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1487
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1488
1488
  }
1489
1489
 
1490
1490
  .vd-row-fib-3-alt>.vd-col-fib-5 {
1491
1491
  flex: 0 0 auto;
1492
1492
  width: 31.25%;
1493
1493
  /* 5/16 */
1494
- padding-left: calc(var(--grid-gutter) * 0.5);
1495
- padding-right: calc(var(--grid-gutter) * 0.5);
1494
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1495
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1496
1496
  }
1497
1497
 
1498
1498
  .vd-row-fib-3-alt>.vd-col-fib-8 {
1499
1499
  flex: 0 0 auto;
1500
1500
  width: 50%;
1501
1501
  /* 8/16 */
1502
- padding-left: calc(var(--grid-gutter) * 0.5);
1503
- padding-right: calc(var(--grid-gutter) * 0.5);
1502
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1503
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1504
1504
  }
1505
1505
 
1506
1506
  /* CSS Grid Fibonacci variants */
@@ -1508,14 +1508,14 @@
1508
1508
  .grid-fib-4 {
1509
1509
  display: grid;
1510
1510
  grid-template-columns: 1fr 2fr 3fr 5fr;
1511
- gap: var(--grid-gutter);
1511
+ gap: var(--vd-grid-gutter);
1512
1512
  }
1513
1513
 
1514
1514
  .vd-grid-fib-3-alt,
1515
1515
  .grid-fib-3-alt {
1516
1516
  display: grid;
1517
1517
  grid-template-columns: 3fr 5fr 8fr;
1518
- gap: var(--grid-gutter);
1518
+ gap: var(--vd-grid-gutter);
1519
1519
  }
1520
1520
 
1521
1521
  /* ===================================================
@@ -1524,75 +1524,75 @@
1524
1524
  * =================================================== */
1525
1525
 
1526
1526
  .vd-gap-fib-2 {
1527
- gap: var(--gap-fib-2);
1527
+ gap: var(--vd-gap-fib-2);
1528
1528
  }
1529
1529
 
1530
1530
  .vd-gap-fib-3 {
1531
- gap: var(--gap-fib-3);
1531
+ gap: var(--vd-gap-fib-3);
1532
1532
  }
1533
1533
 
1534
1534
  .vd-gap-fib-5 {
1535
- gap: var(--gap-fib-5);
1535
+ gap: var(--vd-gap-fib-5);
1536
1536
  }
1537
1537
 
1538
1538
  .vd-gap-fib-8 {
1539
- gap: var(--gap-fib-8);
1539
+ gap: var(--vd-gap-fib-8);
1540
1540
  }
1541
1541
 
1542
1542
  .vd-gap-fib-13 {
1543
- gap: var(--gap-fib-13);
1543
+ gap: var(--vd-gap-fib-13);
1544
1544
  }
1545
1545
 
1546
1546
  .vd-gap-fib-21 {
1547
- gap: var(--gap-fib-21);
1547
+ gap: var(--vd-gap-fib-21);
1548
1548
  }
1549
1549
 
1550
1550
  .vd-row-gap-fib-2 {
1551
- row-gap: var(--gap-fib-2);
1551
+ row-gap: var(--vd-gap-fib-2);
1552
1552
  }
1553
1553
 
1554
1554
  .vd-row-gap-fib-3 {
1555
- row-gap: var(--gap-fib-3);
1555
+ row-gap: var(--vd-gap-fib-3);
1556
1556
  }
1557
1557
 
1558
1558
  .vd-row-gap-fib-5 {
1559
- row-gap: var(--gap-fib-5);
1559
+ row-gap: var(--vd-gap-fib-5);
1560
1560
  }
1561
1561
 
1562
1562
  .vd-row-gap-fib-8 {
1563
- row-gap: var(--gap-fib-8);
1563
+ row-gap: var(--vd-gap-fib-8);
1564
1564
  }
1565
1565
 
1566
1566
  .vd-row-gap-fib-13 {
1567
- row-gap: var(--gap-fib-13);
1567
+ row-gap: var(--vd-gap-fib-13);
1568
1568
  }
1569
1569
 
1570
1570
  .vd-row-gap-fib-21 {
1571
- row-gap: var(--gap-fib-21);
1571
+ row-gap: var(--vd-gap-fib-21);
1572
1572
  }
1573
1573
 
1574
1574
  .vd-col-gap-fib-2 {
1575
- column-gap: var(--gap-fib-2);
1575
+ column-gap: var(--vd-gap-fib-2);
1576
1576
  }
1577
1577
 
1578
1578
  .vd-col-gap-fib-3 {
1579
- column-gap: var(--gap-fib-3);
1579
+ column-gap: var(--vd-gap-fib-3);
1580
1580
  }
1581
1581
 
1582
1582
  .vd-col-gap-fib-5 {
1583
- column-gap: var(--gap-fib-5);
1583
+ column-gap: var(--vd-gap-fib-5);
1584
1584
  }
1585
1585
 
1586
1586
  .vd-col-gap-fib-8 {
1587
- column-gap: var(--gap-fib-8);
1587
+ column-gap: var(--vd-gap-fib-8);
1588
1588
  }
1589
1589
 
1590
1590
  .vd-col-gap-fib-13 {
1591
- column-gap: var(--gap-fib-13);
1591
+ column-gap: var(--vd-gap-fib-13);
1592
1592
  }
1593
1593
 
1594
1594
  .vd-col-gap-fib-21 {
1595
- column-gap: var(--gap-fib-21);
1595
+ column-gap: var(--vd-gap-fib-21);
1596
1596
  }
1597
1597
 
1598
1598
  /* ===================================================
@@ -1611,7 +1611,7 @@
1611
1611
  .vd-grid-fibonacci>.vd-row,
1612
1612
  .grid-fibonacci>.vd-row {
1613
1613
  display: grid;
1614
- gap: var(--grid-gutter);
1614
+ gap: var(--vd-grid-gutter);
1615
1615
  margin-left: 0;
1616
1616
  margin-right: 0;
1617
1617
  }