@vanduo-oss/framework 1.4.0 → 1.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.
- package/README.md +11 -9
- package/css/components/affix.css +11 -11
- package/css/components/alerts.css +55 -55
- package/css/components/avatar.css +62 -62
- package/css/components/badges.css +25 -25
- package/css/components/breadcrumbs.css +31 -31
- package/css/components/bubble.css +40 -40
- package/css/components/button-group.css +2 -2
- package/css/components/buttons.css +33 -33
- package/css/components/cards.css +76 -76
- package/css/components/chips.css +27 -27
- package/css/components/code-snippet.css +132 -132
- package/css/components/collapsible.css +60 -60
- package/css/components/collections.css +58 -58
- package/css/components/datepicker.css +55 -53
- package/css/components/doc-search.css +63 -63
- package/css/components/doc-tabs.css +1 -1
- package/css/components/draggable.css +69 -69
- package/css/components/dropdown.css +48 -48
- package/css/components/fab.css +60 -60
- package/css/components/flow.css +55 -55
- package/css/components/footer.css +52 -52
- package/css/components/forms.css +373 -373
- package/css/components/image-box.css +39 -39
- package/css/components/modals.css +53 -49
- package/css/components/music-player.css +150 -150
- package/css/components/navbar.css +71 -71
- package/css/components/pagination.css +50 -50
- package/css/components/preloader.css +18 -18
- package/css/components/progress.css +16 -16
- package/css/components/rating.css +18 -18
- package/css/components/ripple.css +10 -10
- package/css/components/sidenav.css +67 -67
- package/css/components/skeleton.css +13 -13
- package/css/components/spinner.css +30 -30
- package/css/components/spotlight.css +27 -27
- package/css/components/stepper.css +36 -36
- package/css/components/suggest.css +35 -35
- package/css/components/tabs.css +46 -46
- package/css/components/theme-customizer.css +73 -73
- package/css/components/timeline.css +43 -43
- package/css/components/timepicker.css +32 -30
- package/css/components/toast.css +27 -27
- package/css/components/tooltips.css +77 -77
- package/css/components/transfer.css +35 -35
- package/css/components/tree.css +25 -25
- package/css/components/waypoint.css +12 -12
- package/css/core/colors.css +610 -610
- package/css/core/grid.css +127 -127
- package/css/core/helpers.css +338 -338
- package/css/core/tokens.css +69 -81
- package/css/core/typography.css +91 -91
- package/css/effects/morph.css +17 -17
- package/css/effects/parallax.css +6 -6
- package/css/utilities/color-utilities.css +273 -273
- package/css/utilities/media.css +2 -2
- package/css/utilities/shadow.css +75 -75
- package/css/utilities/table.css +40 -40
- package/css/utilities/transitions.css +38 -38
- package/css/vanduo.css +1 -2
- package/dist/build-info.json +3 -3
- package/dist/vanduo.cjs.js +104 -29
- package/dist/vanduo.cjs.js.map +2 -2
- package/dist/vanduo.cjs.min.js +5 -5
- package/dist/vanduo.cjs.min.js.map +3 -3
- package/dist/vanduo.css +4042 -4133
- package/dist/vanduo.css.map +1 -1
- package/dist/vanduo.esm.js +104 -29
- package/dist/vanduo.esm.js.map +2 -2
- package/dist/vanduo.esm.min.js +5 -5
- package/dist/vanduo.esm.min.js.map +3 -3
- package/dist/vanduo.js +104 -29
- package/dist/vanduo.js.map +2 -2
- package/dist/vanduo.min.css +2 -2
- package/dist/vanduo.min.css.map +1 -1
- package/dist/vanduo.min.js +5 -5
- package/dist/vanduo.min.js.map +3 -3
- package/js/components/affix.js +2 -2
- package/js/components/datepicker.js +51 -4
- package/js/components/image-box.js +2 -2
- package/js/components/morph.js +1 -1
- package/js/components/music-player.js +11 -11
- package/js/components/navbar.js +1 -1
- package/js/components/preloader.js +1 -1
- package/js/components/theme-customizer.js +4 -4
- package/js/components/timepicker.js +48 -6
- package/js/components/vd-hex.js +8 -10
- package/package.json +1 -1
- 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
|
}
|