@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.
Files changed (89) 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 +55 -53
  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 +53 -49
  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 +32 -30
  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 +104 -29
  63. package/dist/vanduo.cjs.js.map +2 -2
  64. package/dist/vanduo.cjs.min.js +5 -5
  65. package/dist/vanduo.cjs.min.js.map +3 -3
  66. package/dist/vanduo.css +4042 -4133
  67. package/dist/vanduo.css.map +1 -1
  68. package/dist/vanduo.esm.js +104 -29
  69. package/dist/vanduo.esm.js.map +2 -2
  70. package/dist/vanduo.esm.min.js +5 -5
  71. package/dist/vanduo.esm.min.js.map +3 -3
  72. package/dist/vanduo.js +104 -29
  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 +5 -5
  77. package/dist/vanduo.min.js.map +3 -3
  78. package/js/components/affix.js +2 -2
  79. package/js/components/datepicker.js +51 -4
  80. package/js/components/image-box.js +2 -2
  81. package/js/components/morph.js +1 -1
  82. package/js/components/music-player.js +11 -11
  83. package/js/components/navbar.js +1 -1
  84. package/js/components/preloader.js +1 -1
  85. package/js/components/theme-customizer.js +4 -4
  86. package/js/components/timepicker.js +48 -6
  87. package/js/components/vd-hex.js +8 -10
  88. package/package.json +1 -1
  89. package/css/core/vd-aliases.css +0 -108
package/css/utilities/color-utilities.css CHANGED
@@ -17,336 +17,336 @@
17
17
  * RED
18
18
  * ═══════════════════════════════════════════════════════════════════════════ */
19
19
 
20
- .vd-bg-red-0 { background-color: var(--red-0); }
21
- .vd-bg-red-1 { background-color: var(--red-1); }
22
- .vd-bg-red-2 { background-color: var(--red-2); }
23
- .vd-bg-red-3 { background-color: var(--red-3); }
24
- .vd-bg-red-4 { background-color: var(--red-4); }
25
- .vd-bg-red-5 { background-color: var(--red-5); }
26
- .vd-bg-red-6 { background-color: var(--red-6); }
27
- .vd-bg-red-7 { background-color: var(--red-7); }
28
- .vd-bg-red-8 { background-color: var(--red-8); }
29
- .vd-bg-red-9 { background-color: var(--red-9); }
30
-
31
- .vd-text-red-0 { color: var(--red-0); }
32
- .vd-text-red-1 { color: var(--red-1); }
33
- .vd-text-red-2 { color: var(--red-2); }
34
- .vd-text-red-3 { color: var(--red-3); }
35
- .vd-text-red-4 { color: var(--red-4); }
36
- .vd-text-red-5 { color: var(--red-5); }
37
- .vd-text-red-6 { color: var(--red-6); }
38
- .vd-text-red-7 { color: var(--red-7); }
39
- .vd-text-red-8 { color: var(--red-8); }
40
- .vd-text-red-9 { color: var(--red-9); }
20
+ .vd-bg-red-0 { background-color: var(--vd-red-0); }
21
+ .vd-bg-red-1 { background-color: var(--vd-red-1); }
22
+ .vd-bg-red-2 { background-color: var(--vd-red-2); }
23
+ .vd-bg-red-3 { background-color: var(--vd-red-3); }
24
+ .vd-bg-red-4 { background-color: var(--vd-red-4); }
25
+ .vd-bg-red-5 { background-color: var(--vd-red-5); }
26
+ .vd-bg-red-6 { background-color: var(--vd-red-6); }
27
+ .vd-bg-red-7 { background-color: var(--vd-red-7); }
28
+ .vd-bg-red-8 { background-color: var(--vd-red-8); }
29
+ .vd-bg-red-9 { background-color: var(--vd-red-9); }
30
+
31
+ .vd-text-red-0 { color: var(--vd-red-0); }
32
+ .vd-text-red-1 { color: var(--vd-red-1); }
33
+ .vd-text-red-2 { color: var(--vd-red-2); }
34
+ .vd-text-red-3 { color: var(--vd-red-3); }
35
+ .vd-text-red-4 { color: var(--vd-red-4); }
36
+ .vd-text-red-5 { color: var(--vd-red-5); }
37
+ .vd-text-red-6 { color: var(--vd-red-6); }
38
+ .vd-text-red-7 { color: var(--vd-red-7); }
39
+ .vd-text-red-8 { color: var(--vd-red-8); }
40
+ .vd-text-red-9 { color: var(--vd-red-9); }
41
41
 
42
42
  /* ═══════════════════════════════════════════════════════════════════════════
43
43
  * ORANGE
44
44
  * ═══════════════════════════════════════════════════════════════════════════ */
45
45
 
46
- .vd-bg-orange-0 { background-color: var(--orange-0); }
47
- .vd-bg-orange-1 { background-color: var(--orange-1); }
48
- .vd-bg-orange-2 { background-color: var(--orange-2); }
49
- .vd-bg-orange-3 { background-color: var(--orange-3); }
50
- .vd-bg-orange-4 { background-color: var(--orange-4); }
51
- .vd-bg-orange-5 { background-color: var(--orange-5); }
52
- .vd-bg-orange-6 { background-color: var(--orange-6); }
53
- .vd-bg-orange-7 { background-color: var(--orange-7); }
54
- .vd-bg-orange-8 { background-color: var(--orange-8); }
55
- .vd-bg-orange-9 { background-color: var(--orange-9); }
56
-
57
- .vd-text-orange-0 { color: var(--orange-0); }
58
- .vd-text-orange-1 { color: var(--orange-1); }
59
- .vd-text-orange-2 { color: var(--orange-2); }
60
- .vd-text-orange-3 { color: var(--orange-3); }
61
- .vd-text-orange-4 { color: var(--orange-4); }
62
- .vd-text-orange-5 { color: var(--orange-5); }
63
- .vd-text-orange-6 { color: var(--orange-6); }
64
- .vd-text-orange-7 { color: var(--orange-7); }
65
- .vd-text-orange-8 { color: var(--orange-8); }
66
- .vd-text-orange-9 { color: var(--orange-9); }
46
+ .vd-bg-orange-0 { background-color: var(--vd-orange-0); }
47
+ .vd-bg-orange-1 { background-color: var(--vd-orange-1); }
48
+ .vd-bg-orange-2 { background-color: var(--vd-orange-2); }
49
+ .vd-bg-orange-3 { background-color: var(--vd-orange-3); }
50
+ .vd-bg-orange-4 { background-color: var(--vd-orange-4); }
51
+ .vd-bg-orange-5 { background-color: var(--vd-orange-5); }
52
+ .vd-bg-orange-6 { background-color: var(--vd-orange-6); }
53
+ .vd-bg-orange-7 { background-color: var(--vd-orange-7); }
54
+ .vd-bg-orange-8 { background-color: var(--vd-orange-8); }
55
+ .vd-bg-orange-9 { background-color: var(--vd-orange-9); }
56
+
57
+ .vd-text-orange-0 { color: var(--vd-orange-0); }
58
+ .vd-text-orange-1 { color: var(--vd-orange-1); }
59
+ .vd-text-orange-2 { color: var(--vd-orange-2); }
60
+ .vd-text-orange-3 { color: var(--vd-orange-3); }
61
+ .vd-text-orange-4 { color: var(--vd-orange-4); }
62
+ .vd-text-orange-5 { color: var(--vd-orange-5); }
63
+ .vd-text-orange-6 { color: var(--vd-orange-6); }
64
+ .vd-text-orange-7 { color: var(--vd-orange-7); }
65
+ .vd-text-orange-8 { color: var(--vd-orange-8); }
66
+ .vd-text-orange-9 { color: var(--vd-orange-9); }
67
67
 
68
68
  /* ═══════════════════════════════════════════════════════════════════════════
69
69
  * YELLOW
70
70
  * ═══════════════════════════════════════════════════════════════════════════ */
71
71
 
72
- .vd-bg-yellow-0 { background-color: var(--yellow-0); }
73
- .vd-bg-yellow-1 { background-color: var(--yellow-1); }
74
- .vd-bg-yellow-2 { background-color: var(--yellow-2); }
75
- .vd-bg-yellow-3 { background-color: var(--yellow-3); }
76
- .vd-bg-yellow-4 { background-color: var(--yellow-4); }
77
- .vd-bg-yellow-5 { background-color: var(--yellow-5); }
78
- .vd-bg-yellow-6 { background-color: var(--yellow-6); }
79
- .vd-bg-yellow-7 { background-color: var(--yellow-7); }
80
- .vd-bg-yellow-8 { background-color: var(--yellow-8); }
81
- .vd-bg-yellow-9 { background-color: var(--yellow-9); }
82
-
83
- .vd-text-yellow-0 { color: var(--yellow-0); }
84
- .vd-text-yellow-1 { color: var(--yellow-1); }
85
- .vd-text-yellow-2 { color: var(--yellow-2); }
86
- .vd-text-yellow-3 { color: var(--yellow-3); }
87
- .vd-text-yellow-4 { color: var(--yellow-4); }
88
- .vd-text-yellow-5 { color: var(--yellow-5); }
89
- .vd-text-yellow-6 { color: var(--yellow-6); }
90
- .vd-text-yellow-7 { color: var(--yellow-7); }
91
- .vd-text-yellow-8 { color: var(--yellow-8); }
92
- .vd-text-yellow-9 { color: var(--yellow-9); }
72
+ .vd-bg-yellow-0 { background-color: var(--vd-yellow-0); }
73
+ .vd-bg-yellow-1 { background-color: var(--vd-yellow-1); }
74
+ .vd-bg-yellow-2 { background-color: var(--vd-yellow-2); }
75
+ .vd-bg-yellow-3 { background-color: var(--vd-yellow-3); }
76
+ .vd-bg-yellow-4 { background-color: var(--vd-yellow-4); }
77
+ .vd-bg-yellow-5 { background-color: var(--vd-yellow-5); }
78
+ .vd-bg-yellow-6 { background-color: var(--vd-yellow-6); }
79
+ .vd-bg-yellow-7 { background-color: var(--vd-yellow-7); }
80
+ .vd-bg-yellow-8 { background-color: var(--vd-yellow-8); }
81
+ .vd-bg-yellow-9 { background-color: var(--vd-yellow-9); }
82
+
83
+ .vd-text-yellow-0 { color: var(--vd-yellow-0); }
84
+ .vd-text-yellow-1 { color: var(--vd-yellow-1); }
85
+ .vd-text-yellow-2 { color: var(--vd-yellow-2); }
86
+ .vd-text-yellow-3 { color: var(--vd-yellow-3); }
87
+ .vd-text-yellow-4 { color: var(--vd-yellow-4); }
88
+ .vd-text-yellow-5 { color: var(--vd-yellow-5); }
89
+ .vd-text-yellow-6 { color: var(--vd-yellow-6); }
90
+ .vd-text-yellow-7 { color: var(--vd-yellow-7); }
91
+ .vd-text-yellow-8 { color: var(--vd-yellow-8); }
92
+ .vd-text-yellow-9 { color: var(--vd-yellow-9); }
93
93
 
94
94
  /* ═══════════════════════════════════════════════════════════════════════════
95
95
  * LIME
96
96
  * ═══════════════════════════════════════════════════════════════════════════ */
97
97
 
98
- .vd-bg-lime-0 { background-color: var(--lime-0); }
99
- .vd-bg-lime-1 { background-color: var(--lime-1); }
100
- .vd-bg-lime-2 { background-color: var(--lime-2); }
101
- .vd-bg-lime-3 { background-color: var(--lime-3); }
102
- .vd-bg-lime-4 { background-color: var(--lime-4); }
103
- .vd-bg-lime-5 { background-color: var(--lime-5); }
104
- .vd-bg-lime-6 { background-color: var(--lime-6); }
105
- .vd-bg-lime-7 { background-color: var(--lime-7); }
106
- .vd-bg-lime-8 { background-color: var(--lime-8); }
107
- .vd-bg-lime-9 { background-color: var(--lime-9); }
108
-
109
- .vd-text-lime-0 { color: var(--lime-0); }
110
- .vd-text-lime-1 { color: var(--lime-1); }
111
- .vd-text-lime-2 { color: var(--lime-2); }
112
- .vd-text-lime-3 { color: var(--lime-3); }
113
- .vd-text-lime-4 { color: var(--lime-4); }
114
- .vd-text-lime-5 { color: var(--lime-5); }
115
- .vd-text-lime-6 { color: var(--lime-6); }
116
- .vd-text-lime-7 { color: var(--lime-7); }
117
- .vd-text-lime-8 { color: var(--lime-8); }
118
- .vd-text-lime-9 { color: var(--lime-9); }
98
+ .vd-bg-lime-0 { background-color: var(--vd-lime-0); }
99
+ .vd-bg-lime-1 { background-color: var(--vd-lime-1); }
100
+ .vd-bg-lime-2 { background-color: var(--vd-lime-2); }
101
+ .vd-bg-lime-3 { background-color: var(--vd-lime-3); }
102
+ .vd-bg-lime-4 { background-color: var(--vd-lime-4); }
103
+ .vd-bg-lime-5 { background-color: var(--vd-lime-5); }
104
+ .vd-bg-lime-6 { background-color: var(--vd-lime-6); }
105
+ .vd-bg-lime-7 { background-color: var(--vd-lime-7); }
106
+ .vd-bg-lime-8 { background-color: var(--vd-lime-8); }
107
+ .vd-bg-lime-9 { background-color: var(--vd-lime-9); }
108
+
109
+ .vd-text-lime-0 { color: var(--vd-lime-0); }
110
+ .vd-text-lime-1 { color: var(--vd-lime-1); }
111
+ .vd-text-lime-2 { color: var(--vd-lime-2); }
112
+ .vd-text-lime-3 { color: var(--vd-lime-3); }
113
+ .vd-text-lime-4 { color: var(--vd-lime-4); }
114
+ .vd-text-lime-5 { color: var(--vd-lime-5); }
115
+ .vd-text-lime-6 { color: var(--vd-lime-6); }
116
+ .vd-text-lime-7 { color: var(--vd-lime-7); }
117
+ .vd-text-lime-8 { color: var(--vd-lime-8); }
118
+ .vd-text-lime-9 { color: var(--vd-lime-9); }
119
119
 
120
120
  /* ═══════════════════════════════════════════════════════════════════════════
121
121
  * GREEN
122
122
  * ═══════════════════════════════════════════════════════════════════════════ */
123
123
 
124
- .vd-bg-green-0 { background-color: var(--green-0); }
125
- .vd-bg-green-1 { background-color: var(--green-1); }
126
- .vd-bg-green-2 { background-color: var(--green-2); }
127
- .vd-bg-green-3 { background-color: var(--green-3); }
128
- .vd-bg-green-4 { background-color: var(--green-4); }
129
- .vd-bg-green-5 { background-color: var(--green-5); }
130
- .vd-bg-green-6 { background-color: var(--green-6); }
131
- .vd-bg-green-7 { background-color: var(--green-7); }
132
- .vd-bg-green-8 { background-color: var(--green-8); }
133
- .vd-bg-green-9 { background-color: var(--green-9); }
134
-
135
- .vd-text-green-0 { color: var(--green-0); }
136
- .vd-text-green-1 { color: var(--green-1); }
137
- .vd-text-green-2 { color: var(--green-2); }
138
- .vd-text-green-3 { color: var(--green-3); }
139
- .vd-text-green-4 { color: var(--green-4); }
140
- .vd-text-green-5 { color: var(--green-5); }
141
- .vd-text-green-6 { color: var(--green-6); }
142
- .vd-text-green-7 { color: var(--green-7); }
143
- .vd-text-green-8 { color: var(--green-8); }
144
- .vd-text-green-9 { color: var(--green-9); }
124
+ .vd-bg-green-0 { background-color: var(--vd-green-0); }
125
+ .vd-bg-green-1 { background-color: var(--vd-green-1); }
126
+ .vd-bg-green-2 { background-color: var(--vd-green-2); }
127
+ .vd-bg-green-3 { background-color: var(--vd-green-3); }
128
+ .vd-bg-green-4 { background-color: var(--vd-green-4); }
129
+ .vd-bg-green-5 { background-color: var(--vd-green-5); }
130
+ .vd-bg-green-6 { background-color: var(--vd-green-6); }
131
+ .vd-bg-green-7 { background-color: var(--vd-green-7); }
132
+ .vd-bg-green-8 { background-color: var(--vd-green-8); }
133
+ .vd-bg-green-9 { background-color: var(--vd-green-9); }
134
+
135
+ .vd-text-green-0 { color: var(--vd-green-0); }
136
+ .vd-text-green-1 { color: var(--vd-green-1); }
137
+ .vd-text-green-2 { color: var(--vd-green-2); }
138
+ .vd-text-green-3 { color: var(--vd-green-3); }
139
+ .vd-text-green-4 { color: var(--vd-green-4); }
140
+ .vd-text-green-5 { color: var(--vd-green-5); }
141
+ .vd-text-green-6 { color: var(--vd-green-6); }
142
+ .vd-text-green-7 { color: var(--vd-green-7); }
143
+ .vd-text-green-8 { color: var(--vd-green-8); }
144
+ .vd-text-green-9 { color: var(--vd-green-9); }
145
145
 
146
146
  /* ═══════════════════════════════════════════════════════════════════════════
147
147
  * TEAL
148
148
  * ═══════════════════════════════════════════════════════════════════════════ */
149
149
 
150
- .vd-bg-teal-0 { background-color: var(--teal-0); }
151
- .vd-bg-teal-1 { background-color: var(--teal-1); }
152
- .vd-bg-teal-2 { background-color: var(--teal-2); }
153
- .vd-bg-teal-3 { background-color: var(--teal-3); }
154
- .vd-bg-teal-4 { background-color: var(--teal-4); }
155
- .vd-bg-teal-5 { background-color: var(--teal-5); }
156
- .vd-bg-teal-6 { background-color: var(--teal-6); }
157
- .vd-bg-teal-7 { background-color: var(--teal-7); }
158
- .vd-bg-teal-8 { background-color: var(--teal-8); }
159
- .vd-bg-teal-9 { background-color: var(--teal-9); }
160
-
161
- .vd-text-teal-0 { color: var(--teal-0); }
162
- .vd-text-teal-1 { color: var(--teal-1); }
163
- .vd-text-teal-2 { color: var(--teal-2); }
164
- .vd-text-teal-3 { color: var(--teal-3); }
165
- .vd-text-teal-4 { color: var(--teal-4); }
166
- .vd-text-teal-5 { color: var(--teal-5); }
167
- .vd-text-teal-6 { color: var(--teal-6); }
168
- .vd-text-teal-7 { color: var(--teal-7); }
169
- .vd-text-teal-8 { color: var(--teal-8); }
170
- .vd-text-teal-9 { color: var(--teal-9); }
150
+ .vd-bg-teal-0 { background-color: var(--vd-teal-0); }
151
+ .vd-bg-teal-1 { background-color: var(--vd-teal-1); }
152
+ .vd-bg-teal-2 { background-color: var(--vd-teal-2); }
153
+ .vd-bg-teal-3 { background-color: var(--vd-teal-3); }
154
+ .vd-bg-teal-4 { background-color: var(--vd-teal-4); }
155
+ .vd-bg-teal-5 { background-color: var(--vd-teal-5); }
156
+ .vd-bg-teal-6 { background-color: var(--vd-teal-6); }
157
+ .vd-bg-teal-7 { background-color: var(--vd-teal-7); }
158
+ .vd-bg-teal-8 { background-color: var(--vd-teal-8); }
159
+ .vd-bg-teal-9 { background-color: var(--vd-teal-9); }
160
+
161
+ .vd-text-teal-0 { color: var(--vd-teal-0); }
162
+ .vd-text-teal-1 { color: var(--vd-teal-1); }
163
+ .vd-text-teal-2 { color: var(--vd-teal-2); }
164
+ .vd-text-teal-3 { color: var(--vd-teal-3); }
165
+ .vd-text-teal-4 { color: var(--vd-teal-4); }
166
+ .vd-text-teal-5 { color: var(--vd-teal-5); }
167
+ .vd-text-teal-6 { color: var(--vd-teal-6); }
168
+ .vd-text-teal-7 { color: var(--vd-teal-7); }
169
+ .vd-text-teal-8 { color: var(--vd-teal-8); }
170
+ .vd-text-teal-9 { color: var(--vd-teal-9); }
171
171
 
172
172
  /* ═══════════════════════════════════════════════════════════════════════════
173
173
  * CYAN
174
174
  * ═══════════════════════════════════════════════════════════════════════════ */
175
175
 
176
- .vd-bg-cyan-0 { background-color: var(--cyan-0); }
177
- .vd-bg-cyan-1 { background-color: var(--cyan-1); }
178
- .vd-bg-cyan-2 { background-color: var(--cyan-2); }
179
- .vd-bg-cyan-3 { background-color: var(--cyan-3); }
180
- .vd-bg-cyan-4 { background-color: var(--cyan-4); }
181
- .vd-bg-cyan-5 { background-color: var(--cyan-5); }
182
- .vd-bg-cyan-6 { background-color: var(--cyan-6); }
183
- .vd-bg-cyan-7 { background-color: var(--cyan-7); }
184
- .vd-bg-cyan-8 { background-color: var(--cyan-8); }
185
- .vd-bg-cyan-9 { background-color: var(--cyan-9); }
186
-
187
- .vd-text-cyan-0 { color: var(--cyan-0); }
188
- .vd-text-cyan-1 { color: var(--cyan-1); }
189
- .vd-text-cyan-2 { color: var(--cyan-2); }
190
- .vd-text-cyan-3 { color: var(--cyan-3); }
191
- .vd-text-cyan-4 { color: var(--cyan-4); }
192
- .vd-text-cyan-5 { color: var(--cyan-5); }
193
- .vd-text-cyan-6 { color: var(--cyan-6); }
194
- .vd-text-cyan-7 { color: var(--cyan-7); }
195
- .vd-text-cyan-8 { color: var(--cyan-8); }
196
- .vd-text-cyan-9 { color: var(--cyan-9); }
176
+ .vd-bg-cyan-0 { background-color: var(--vd-cyan-0); }
177
+ .vd-bg-cyan-1 { background-color: var(--vd-cyan-1); }
178
+ .vd-bg-cyan-2 { background-color: var(--vd-cyan-2); }
179
+ .vd-bg-cyan-3 { background-color: var(--vd-cyan-3); }
180
+ .vd-bg-cyan-4 { background-color: var(--vd-cyan-4); }
181
+ .vd-bg-cyan-5 { background-color: var(--vd-cyan-5); }
182
+ .vd-bg-cyan-6 { background-color: var(--vd-cyan-6); }
183
+ .vd-bg-cyan-7 { background-color: var(--vd-cyan-7); }
184
+ .vd-bg-cyan-8 { background-color: var(--vd-cyan-8); }
185
+ .vd-bg-cyan-9 { background-color: var(--vd-cyan-9); }
186
+
187
+ .vd-text-cyan-0 { color: var(--vd-cyan-0); }
188
+ .vd-text-cyan-1 { color: var(--vd-cyan-1); }
189
+ .vd-text-cyan-2 { color: var(--vd-cyan-2); }
190
+ .vd-text-cyan-3 { color: var(--vd-cyan-3); }
191
+ .vd-text-cyan-4 { color: var(--vd-cyan-4); }
192
+ .vd-text-cyan-5 { color: var(--vd-cyan-5); }
193
+ .vd-text-cyan-6 { color: var(--vd-cyan-6); }
194
+ .vd-text-cyan-7 { color: var(--vd-cyan-7); }
195
+ .vd-text-cyan-8 { color: var(--vd-cyan-8); }
196
+ .vd-text-cyan-9 { color: var(--vd-cyan-9); }
197
197
 
198
198
  /* ═══════════════════════════════════════════════════════════════════════════
199
199
  * BLUE
200
200
  * ═══════════════════════════════════════════════════════════════════════════ */
201
201
 
202
- .vd-bg-blue-0 { background-color: var(--blue-0); }
203
- .vd-bg-blue-1 { background-color: var(--blue-1); }
204
- .vd-bg-blue-2 { background-color: var(--blue-2); }
205
- .vd-bg-blue-3 { background-color: var(--blue-3); }
206
- .vd-bg-blue-4 { background-color: var(--blue-4); }
207
- .vd-bg-blue-5 { background-color: var(--blue-5); }
208
- .vd-bg-blue-6 { background-color: var(--blue-6); }
209
- .vd-bg-blue-7 { background-color: var(--blue-7); }
210
- .vd-bg-blue-8 { background-color: var(--blue-8); }
211
- .vd-bg-blue-9 { background-color: var(--blue-9); }
212
-
213
- .vd-text-blue-0 { color: var(--blue-0); }
214
- .vd-text-blue-1 { color: var(--blue-1); }
215
- .vd-text-blue-2 { color: var(--blue-2); }
216
- .vd-text-blue-3 { color: var(--blue-3); }
217
- .vd-text-blue-4 { color: var(--blue-4); }
218
- .vd-text-blue-5 { color: var(--blue-5); }
219
- .vd-text-blue-6 { color: var(--blue-6); }
220
- .vd-text-blue-7 { color: var(--blue-7); }
221
- .vd-text-blue-8 { color: var(--blue-8); }
222
- .vd-text-blue-9 { color: var(--blue-9); }
202
+ .vd-bg-blue-0 { background-color: var(--vd-blue-0); }
203
+ .vd-bg-blue-1 { background-color: var(--vd-blue-1); }
204
+ .vd-bg-blue-2 { background-color: var(--vd-blue-2); }
205
+ .vd-bg-blue-3 { background-color: var(--vd-blue-3); }
206
+ .vd-bg-blue-4 { background-color: var(--vd-blue-4); }
207
+ .vd-bg-blue-5 { background-color: var(--vd-blue-5); }
208
+ .vd-bg-blue-6 { background-color: var(--vd-blue-6); }
209
+ .vd-bg-blue-7 { background-color: var(--vd-blue-7); }
210
+ .vd-bg-blue-8 { background-color: var(--vd-blue-8); }
211
+ .vd-bg-blue-9 { background-color: var(--vd-blue-9); }
212
+
213
+ .vd-text-blue-0 { color: var(--vd-blue-0); }
214
+ .vd-text-blue-1 { color: var(--vd-blue-1); }
215
+ .vd-text-blue-2 { color: var(--vd-blue-2); }
216
+ .vd-text-blue-3 { color: var(--vd-blue-3); }
217
+ .vd-text-blue-4 { color: var(--vd-blue-4); }
218
+ .vd-text-blue-5 { color: var(--vd-blue-5); }
219
+ .vd-text-blue-6 { color: var(--vd-blue-6); }
220
+ .vd-text-blue-7 { color: var(--vd-blue-7); }
221
+ .vd-text-blue-8 { color: var(--vd-blue-8); }
222
+ .vd-text-blue-9 { color: var(--vd-blue-9); }
223
223
 
224
224
  /* ═══════════════════════════════════════════════════════════════════════════
225
225
  * INDIGO
226
226
  * ═══════════════════════════════════════════════════════════════════════════ */
227
227
 
228
- .vd-bg-indigo-0 { background-color: var(--indigo-0); }
229
- .vd-bg-indigo-1 { background-color: var(--indigo-1); }
230
- .vd-bg-indigo-2 { background-color: var(--indigo-2); }
231
- .vd-bg-indigo-3 { background-color: var(--indigo-3); }
232
- .vd-bg-indigo-4 { background-color: var(--indigo-4); }
233
- .vd-bg-indigo-5 { background-color: var(--indigo-5); }
234
- .vd-bg-indigo-6 { background-color: var(--indigo-6); }
235
- .vd-bg-indigo-7 { background-color: var(--indigo-7); }
236
- .vd-bg-indigo-8 { background-color: var(--indigo-8); }
237
- .vd-bg-indigo-9 { background-color: var(--indigo-9); }
238
-
239
- .vd-text-indigo-0 { color: var(--indigo-0); }
240
- .vd-text-indigo-1 { color: var(--indigo-1); }
241
- .vd-text-indigo-2 { color: var(--indigo-2); }
242
- .vd-text-indigo-3 { color: var(--indigo-3); }
243
- .vd-text-indigo-4 { color: var(--indigo-4); }
244
- .vd-text-indigo-5 { color: var(--indigo-5); }
245
- .vd-text-indigo-6 { color: var(--indigo-6); }
246
- .vd-text-indigo-7 { color: var(--indigo-7); }
247
- .vd-text-indigo-8 { color: var(--indigo-8); }
248
- .vd-text-indigo-9 { color: var(--indigo-9); }
228
+ .vd-bg-indigo-0 { background-color: var(--vd-indigo-0); }
229
+ .vd-bg-indigo-1 { background-color: var(--vd-indigo-1); }
230
+ .vd-bg-indigo-2 { background-color: var(--vd-indigo-2); }
231
+ .vd-bg-indigo-3 { background-color: var(--vd-indigo-3); }
232
+ .vd-bg-indigo-4 { background-color: var(--vd-indigo-4); }
233
+ .vd-bg-indigo-5 { background-color: var(--vd-indigo-5); }
234
+ .vd-bg-indigo-6 { background-color: var(--vd-indigo-6); }
235
+ .vd-bg-indigo-7 { background-color: var(--vd-indigo-7); }
236
+ .vd-bg-indigo-8 { background-color: var(--vd-indigo-8); }
237
+ .vd-bg-indigo-9 { background-color: var(--vd-indigo-9); }
238
+
239
+ .vd-text-indigo-0 { color: var(--vd-indigo-0); }
240
+ .vd-text-indigo-1 { color: var(--vd-indigo-1); }
241
+ .vd-text-indigo-2 { color: var(--vd-indigo-2); }
242
+ .vd-text-indigo-3 { color: var(--vd-indigo-3); }
243
+ .vd-text-indigo-4 { color: var(--vd-indigo-4); }
244
+ .vd-text-indigo-5 { color: var(--vd-indigo-5); }
245
+ .vd-text-indigo-6 { color: var(--vd-indigo-6); }
246
+ .vd-text-indigo-7 { color: var(--vd-indigo-7); }
247
+ .vd-text-indigo-8 { color: var(--vd-indigo-8); }
248
+ .vd-text-indigo-9 { color: var(--vd-indigo-9); }
249
249
 
250
250
  /* ═══════════════════════════════════════════════════════════════════════════
251
251
  * VIOLET
252
252
  * ═══════════════════════════════════════════════════════════════════════════ */
253
253
 
254
- .vd-bg-violet-0 { background-color: var(--violet-0); }
255
- .vd-bg-violet-1 { background-color: var(--violet-1); }
256
- .vd-bg-violet-2 { background-color: var(--violet-2); }
257
- .vd-bg-violet-3 { background-color: var(--violet-3); }
258
- .vd-bg-violet-4 { background-color: var(--violet-4); }
259
- .vd-bg-violet-5 { background-color: var(--violet-5); }
260
- .vd-bg-violet-6 { background-color: var(--violet-6); }
261
- .vd-bg-violet-7 { background-color: var(--violet-7); }
262
- .vd-bg-violet-8 { background-color: var(--violet-8); }
263
- .vd-bg-violet-9 { background-color: var(--violet-9); }
264
-
265
- .vd-text-violet-0 { color: var(--violet-0); }
266
- .vd-text-violet-1 { color: var(--violet-1); }
267
- .vd-text-violet-2 { color: var(--violet-2); }
268
- .vd-text-violet-3 { color: var(--violet-3); }
269
- .vd-text-violet-4 { color: var(--violet-4); }
270
- .vd-text-violet-5 { color: var(--violet-5); }
271
- .vd-text-violet-6 { color: var(--violet-6); }
272
- .vd-text-violet-7 { color: var(--violet-7); }
273
- .vd-text-violet-8 { color: var(--violet-8); }
274
- .vd-text-violet-9 { color: var(--violet-9); }
254
+ .vd-bg-violet-0 { background-color: var(--vd-violet-0); }
255
+ .vd-bg-violet-1 { background-color: var(--vd-violet-1); }
256
+ .vd-bg-violet-2 { background-color: var(--vd-violet-2); }
257
+ .vd-bg-violet-3 { background-color: var(--vd-violet-3); }
258
+ .vd-bg-violet-4 { background-color: var(--vd-violet-4); }
259
+ .vd-bg-violet-5 { background-color: var(--vd-violet-5); }
260
+ .vd-bg-violet-6 { background-color: var(--vd-violet-6); }
261
+ .vd-bg-violet-7 { background-color: var(--vd-violet-7); }
262
+ .vd-bg-violet-8 { background-color: var(--vd-violet-8); }
263
+ .vd-bg-violet-9 { background-color: var(--vd-violet-9); }
264
+
265
+ .vd-text-violet-0 { color: var(--vd-violet-0); }
266
+ .vd-text-violet-1 { color: var(--vd-violet-1); }
267
+ .vd-text-violet-2 { color: var(--vd-violet-2); }
268
+ .vd-text-violet-3 { color: var(--vd-violet-3); }
269
+ .vd-text-violet-4 { color: var(--vd-violet-4); }
270
+ .vd-text-violet-5 { color: var(--vd-violet-5); }
271
+ .vd-text-violet-6 { color: var(--vd-violet-6); }
272
+ .vd-text-violet-7 { color: var(--vd-violet-7); }
273
+ .vd-text-violet-8 { color: var(--vd-violet-8); }
274
+ .vd-text-violet-9 { color: var(--vd-violet-9); }
275
275
 
276
276
  /* ═══════════════════════════════════════════════════════════════════════════
277
277
  * GRAPE
278
278
  * ═══════════════════════════════════════════════════════════════════════════ */
279
279
 
280
- .vd-bg-grape-0 { background-color: var(--grape-0); }
281
- .vd-bg-grape-1 { background-color: var(--grape-1); }
282
- .vd-bg-grape-2 { background-color: var(--grape-2); }
283
- .vd-bg-grape-3 { background-color: var(--grape-3); }
284
- .vd-bg-grape-4 { background-color: var(--grape-4); }
285
- .vd-bg-grape-5 { background-color: var(--grape-5); }
286
- .vd-bg-grape-6 { background-color: var(--grape-6); }
287
- .vd-bg-grape-7 { background-color: var(--grape-7); }
288
- .vd-bg-grape-8 { background-color: var(--grape-8); }
289
- .vd-bg-grape-9 { background-color: var(--grape-9); }
290
-
291
- .vd-text-grape-0 { color: var(--grape-0); }
292
- .vd-text-grape-1 { color: var(--grape-1); }
293
- .vd-text-grape-2 { color: var(--grape-2); }
294
- .vd-text-grape-3 { color: var(--grape-3); }
295
- .vd-text-grape-4 { color: var(--grape-4); }
296
- .vd-text-grape-5 { color: var(--grape-5); }
297
- .vd-text-grape-6 { color: var(--grape-6); }
298
- .vd-text-grape-7 { color: var(--grape-7); }
299
- .vd-text-grape-8 { color: var(--grape-8); }
300
- .vd-text-grape-9 { color: var(--grape-9); }
280
+ .vd-bg-grape-0 { background-color: var(--vd-grape-0); }
281
+ .vd-bg-grape-1 { background-color: var(--vd-grape-1); }
282
+ .vd-bg-grape-2 { background-color: var(--vd-grape-2); }
283
+ .vd-bg-grape-3 { background-color: var(--vd-grape-3); }
284
+ .vd-bg-grape-4 { background-color: var(--vd-grape-4); }
285
+ .vd-bg-grape-5 { background-color: var(--vd-grape-5); }
286
+ .vd-bg-grape-6 { background-color: var(--vd-grape-6); }
287
+ .vd-bg-grape-7 { background-color: var(--vd-grape-7); }
288
+ .vd-bg-grape-8 { background-color: var(--vd-grape-8); }
289
+ .vd-bg-grape-9 { background-color: var(--vd-grape-9); }
290
+
291
+ .vd-text-grape-0 { color: var(--vd-grape-0); }
292
+ .vd-text-grape-1 { color: var(--vd-grape-1); }
293
+ .vd-text-grape-2 { color: var(--vd-grape-2); }
294
+ .vd-text-grape-3 { color: var(--vd-grape-3); }
295
+ .vd-text-grape-4 { color: var(--vd-grape-4); }
296
+ .vd-text-grape-5 { color: var(--vd-grape-5); }
297
+ .vd-text-grape-6 { color: var(--vd-grape-6); }
298
+ .vd-text-grape-7 { color: var(--vd-grape-7); }
299
+ .vd-text-grape-8 { color: var(--vd-grape-8); }
300
+ .vd-text-grape-9 { color: var(--vd-grape-9); }
301
301
 
302
302
  /* ═══════════════════════════════════════════════════════════════════════════
303
303
  * PINK
304
304
  * ═══════════════════════════════════════════════════════════════════════════ */
305
305
 
306
- .vd-bg-pink-0 { background-color: var(--pink-0); }
307
- .vd-bg-pink-1 { background-color: var(--pink-1); }
308
- .vd-bg-pink-2 { background-color: var(--pink-2); }
309
- .vd-bg-pink-3 { background-color: var(--pink-3); }
310
- .vd-bg-pink-4 { background-color: var(--pink-4); }
311
- .vd-bg-pink-5 { background-color: var(--pink-5); }
312
- .vd-bg-pink-6 { background-color: var(--pink-6); }
313
- .vd-bg-pink-7 { background-color: var(--pink-7); }
314
- .vd-bg-pink-8 { background-color: var(--pink-8); }
315
- .vd-bg-pink-9 { background-color: var(--pink-9); }
316
-
317
- .vd-text-pink-0 { color: var(--pink-0); }
318
- .vd-text-pink-1 { color: var(--pink-1); }
319
- .vd-text-pink-2 { color: var(--pink-2); }
320
- .vd-text-pink-3 { color: var(--pink-3); }
321
- .vd-text-pink-4 { color: var(--pink-4); }
322
- .vd-text-pink-5 { color: var(--pink-5); }
323
- .vd-text-pink-6 { color: var(--pink-6); }
324
- .vd-text-pink-7 { color: var(--pink-7); }
325
- .vd-text-pink-8 { color: var(--pink-8); }
326
- .vd-text-pink-9 { color: var(--pink-9); }
306
+ .vd-bg-pink-0 { background-color: var(--vd-pink-0); }
307
+ .vd-bg-pink-1 { background-color: var(--vd-pink-1); }
308
+ .vd-bg-pink-2 { background-color: var(--vd-pink-2); }
309
+ .vd-bg-pink-3 { background-color: var(--vd-pink-3); }
310
+ .vd-bg-pink-4 { background-color: var(--vd-pink-4); }
311
+ .vd-bg-pink-5 { background-color: var(--vd-pink-5); }
312
+ .vd-bg-pink-6 { background-color: var(--vd-pink-6); }
313
+ .vd-bg-pink-7 { background-color: var(--vd-pink-7); }
314
+ .vd-bg-pink-8 { background-color: var(--vd-pink-8); }
315
+ .vd-bg-pink-9 { background-color: var(--vd-pink-9); }
316
+
317
+ .vd-text-pink-0 { color: var(--vd-pink-0); }
318
+ .vd-text-pink-1 { color: var(--vd-pink-1); }
319
+ .vd-text-pink-2 { color: var(--vd-pink-2); }
320
+ .vd-text-pink-3 { color: var(--vd-pink-3); }
321
+ .vd-text-pink-4 { color: var(--vd-pink-4); }
322
+ .vd-text-pink-5 { color: var(--vd-pink-5); }
323
+ .vd-text-pink-6 { color: var(--vd-pink-6); }
324
+ .vd-text-pink-7 { color: var(--vd-pink-7); }
325
+ .vd-text-pink-8 { color: var(--vd-pink-8); }
326
+ .vd-text-pink-9 { color: var(--vd-pink-9); }
327
327
 
328
328
  /* ═══════════════════════════════════════════════════════════════════════════
329
329
  * GRAY
330
330
  * ═══════════════════════════════════════════════════════════════════════════ */
331
331
 
332
- .vd-bg-gray-0 { background-color: var(--gray-0); }
333
- .vd-bg-gray-1 { background-color: var(--gray-1); }
334
- .vd-bg-gray-2 { background-color: var(--gray-2); }
335
- .vd-bg-gray-3 { background-color: var(--gray-3); }
336
- .vd-bg-gray-4 { background-color: var(--gray-4); }
337
- .vd-bg-gray-5 { background-color: var(--gray-5); }
338
- .vd-bg-gray-6 { background-color: var(--gray-6); }
339
- .vd-bg-gray-7 { background-color: var(--gray-7); }
340
- .vd-bg-gray-8 { background-color: var(--gray-8); }
341
- .vd-bg-gray-9 { background-color: var(--gray-9); }
342
-
343
- .vd-text-gray-0 { color: var(--gray-0); }
344
- .vd-text-gray-1 { color: var(--gray-1); }
345
- .vd-text-gray-2 { color: var(--gray-2); }
346
- .vd-text-gray-3 { color: var(--gray-3); }
347
- .vd-text-gray-4 { color: var(--gray-4); }
348
- .vd-text-gray-5 { color: var(--gray-5); }
349
- .vd-text-gray-6 { color: var(--gray-6); }
350
- .vd-text-gray-7 { color: var(--gray-7); }
351
- .vd-text-gray-8 { color: var(--gray-8); }
352
- .vd-text-gray-9 { color: var(--gray-9); }
332
+ .vd-bg-gray-0 { background-color: var(--vd-gray-0); }
333
+ .vd-bg-gray-1 { background-color: var(--vd-gray-1); }
334
+ .vd-bg-gray-2 { background-color: var(--vd-gray-2); }
335
+ .vd-bg-gray-3 { background-color: var(--vd-gray-3); }
336
+ .vd-bg-gray-4 { background-color: var(--vd-gray-4); }
337
+ .vd-bg-gray-5 { background-color: var(--vd-gray-5); }
338
+ .vd-bg-gray-6 { background-color: var(--vd-gray-6); }
339
+ .vd-bg-gray-7 { background-color: var(--vd-gray-7); }
340
+ .vd-bg-gray-8 { background-color: var(--vd-gray-8); }
341
+ .vd-bg-gray-9 { background-color: var(--vd-gray-9); }
342
+
343
+ .vd-text-gray-0 { color: var(--vd-gray-0); }
344
+ .vd-text-gray-1 { color: var(--vd-gray-1); }
345
+ .vd-text-gray-2 { color: var(--vd-gray-2); }
346
+ .vd-text-gray-3 { color: var(--vd-gray-3); }
347
+ .vd-text-gray-4 { color: var(--vd-gray-4); }
348
+ .vd-text-gray-5 { color: var(--vd-gray-5); }
349
+ .vd-text-gray-6 { color: var(--vd-gray-6); }
350
+ .vd-text-gray-7 { color: var(--vd-gray-7); }
351
+ .vd-text-gray-8 { color: var(--vd-gray-8); }
352
+ .vd-text-gray-9 { color: var(--vd-gray-9); }
package/css/utilities/media.css CHANGED
@@ -123,7 +123,7 @@
123
123
 
124
124
  /* Image Styles */
125
125
  .img-rounded {
126
- border-radius: var(--btn-border-radius);
126
+ border-radius: var(--vd-btn-border-radius);
127
127
  }
128
128
 
129
129
  .img-circle {
@@ -134,7 +134,7 @@
134
134
  padding: 0.1875rem; /* 3px - fib */
135
135
  background-color: var(--vd-color-white);
136
136
  border: 1px solid var(--vd-border-color);
137
- border-radius: var(--radius-fib-5);
137
+ border-radius: var(--vd-radius-fib-5);
138
138
  max-width: 100%;
139
139
  height: auto;
140
140
  }