vrembem 4.0.0-next.2 → 4.0.0-next.4
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/LICENSE +21 -0
- package/dev/index.css +553 -254
- package/dev/index.css.map +1 -1
- package/dev/index.js +938 -923
- package/dev/index.js.map +1 -1
- package/dev/index.umd.cjs +743 -728
- package/dev/index.umd.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +1060 -1044
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +6 -2
- package/dist/index.umd.cjs.map +1 -1
- package/index.js +0 -2
- package/index.scss +1 -2
- package/package.json +23 -24
package/dev/index.css
CHANGED
|
@@ -1,91 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--vrembem-variable-prefix: vb-;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
:root {
|
|
6
|
-
--vb-breakpoint-xs: 480px;
|
|
7
|
-
--vb-breakpoint-sm: 620px;
|
|
8
|
-
--vb-breakpoint-md: 760px;
|
|
9
|
-
--vb-breakpoint-lg: 990px;
|
|
10
|
-
--vb-breakpoint-xl: 1380px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:root {
|
|
14
|
-
--vb-primary-hs: 152deg, 60%;
|
|
15
|
-
--vb-primary: var(--vb-primary-50);
|
|
16
|
-
--vb-primary-0: hsl(var(--vb-primary-hs), 0%);
|
|
17
|
-
--vb-primary-10: hsl(var(--vb-primary-hs), 10%);
|
|
18
|
-
--vb-primary-20: hsl(var(--vb-primary-hs), 20%);
|
|
19
|
-
--vb-primary-30: hsl(var(--vb-primary-hs), 30%);
|
|
20
|
-
--vb-primary-40: hsl(var(--vb-primary-hs), 40%);
|
|
21
|
-
--vb-primary-50: hsl(var(--vb-primary-hs), 50%);
|
|
22
|
-
--vb-primary-60: hsl(var(--vb-primary-hs), 60%);
|
|
23
|
-
--vb-primary-70: hsl(var(--vb-primary-hs), 70%);
|
|
24
|
-
--vb-primary-80: hsl(var(--vb-primary-hs), 80%);
|
|
25
|
-
--vb-primary-90: hsl(var(--vb-primary-hs), 90%);
|
|
26
|
-
--vb-primary-95: hsl(var(--vb-primary-hs), 95%);
|
|
27
|
-
--vb-primary-98: hsl(var(--vb-primary-hs), 98%);
|
|
28
|
-
--vb-primary-100: hsl(var(--vb-primary-hs), 100%);
|
|
29
|
-
--vb-secondary-hs: 214deg, 50%;
|
|
30
|
-
--vb-secondary: var(--vb-secondary-50);
|
|
31
|
-
--vb-secondary-0: hsl(var(--vb-secondary-hs), 0%);
|
|
32
|
-
--vb-secondary-10: hsl(var(--vb-secondary-hs), 10%);
|
|
33
|
-
--vb-secondary-20: hsl(var(--vb-secondary-hs), 20%);
|
|
34
|
-
--vb-secondary-30: hsl(var(--vb-secondary-hs), 30%);
|
|
35
|
-
--vb-secondary-40: hsl(var(--vb-secondary-hs), 40%);
|
|
36
|
-
--vb-secondary-50: hsl(var(--vb-secondary-hs), 50%);
|
|
37
|
-
--vb-secondary-60: hsl(var(--vb-secondary-hs), 60%);
|
|
38
|
-
--vb-secondary-70: hsl(var(--vb-secondary-hs), 70%);
|
|
39
|
-
--vb-secondary-80: hsl(var(--vb-secondary-hs), 80%);
|
|
40
|
-
--vb-secondary-90: hsl(var(--vb-secondary-hs), 90%);
|
|
41
|
-
--vb-secondary-95: hsl(var(--vb-secondary-hs), 95%);
|
|
42
|
-
--vb-secondary-98: hsl(var(--vb-secondary-hs), 98%);
|
|
43
|
-
--vb-secondary-100: hsl(var(--vb-secondary-hs), 100%);
|
|
44
|
-
--vb-neutral-hs: 214deg, 20%;
|
|
45
|
-
--vb-neutral: var(--vb-neutral-50);
|
|
46
|
-
--vb-neutral-0: hsl(var(--vb-neutral-hs), 0%);
|
|
47
|
-
--vb-neutral-10: hsl(var(--vb-neutral-hs), 10%);
|
|
48
|
-
--vb-neutral-20: hsl(var(--vb-neutral-hs), 20%);
|
|
49
|
-
--vb-neutral-30: hsl(var(--vb-neutral-hs), 30%);
|
|
50
|
-
--vb-neutral-40: hsl(var(--vb-neutral-hs), 40%);
|
|
51
|
-
--vb-neutral-50: hsl(var(--vb-neutral-hs), 50%);
|
|
52
|
-
--vb-neutral-60: hsl(var(--vb-neutral-hs), 60%);
|
|
53
|
-
--vb-neutral-70: hsl(var(--vb-neutral-hs), 70%);
|
|
54
|
-
--vb-neutral-80: hsl(var(--vb-neutral-hs), 80%);
|
|
55
|
-
--vb-neutral-90: hsl(var(--vb-neutral-hs), 90%);
|
|
56
|
-
--vb-neutral-95: hsl(var(--vb-neutral-hs), 95%);
|
|
57
|
-
--vb-neutral-98: hsl(var(--vb-neutral-hs), 98%);
|
|
58
|
-
--vb-neutral-100: hsl(var(--vb-neutral-hs), 100%);
|
|
59
|
-
--vb-important-hs: 0deg, 80%;
|
|
60
|
-
--vb-important: var(--vb-important-50);
|
|
61
|
-
--vb-important-0: hsl(var(--vb-important-hs), 0%);
|
|
62
|
-
--vb-important-10: hsl(var(--vb-important-hs), 10%);
|
|
63
|
-
--vb-important-20: hsl(var(--vb-important-hs), 20%);
|
|
64
|
-
--vb-important-30: hsl(var(--vb-important-hs), 30%);
|
|
65
|
-
--vb-important-40: hsl(var(--vb-important-hs), 40%);
|
|
66
|
-
--vb-important-50: hsl(var(--vb-important-hs), 50%);
|
|
67
|
-
--vb-important-60: hsl(var(--vb-important-hs), 60%);
|
|
68
|
-
--vb-important-70: hsl(var(--vb-important-hs), 70%);
|
|
69
|
-
--vb-important-80: hsl(var(--vb-important-hs), 80%);
|
|
70
|
-
--vb-important-90: hsl(var(--vb-important-hs), 90%);
|
|
71
|
-
--vb-important-95: hsl(var(--vb-important-hs), 95%);
|
|
72
|
-
--vb-important-98: hsl(var(--vb-important-hs), 98%);
|
|
73
|
-
--vb-important-100: hsl(var(--vb-important-hs), 100%);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
:root {
|
|
77
|
-
--vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
|
|
78
|
-
--vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
|
|
79
|
-
--vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
|
|
80
|
-
--vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
|
|
81
|
-
--vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
|
|
82
|
-
--vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
|
|
83
|
-
--vb-border-color: rgba(0, 0, 0, 0.1);
|
|
84
|
-
--vb-border-color-dark: rgba(0, 0, 0, 0.2);
|
|
85
|
-
--vb-border-color-darker: rgba(0, 0, 0, 0.3);
|
|
86
|
-
--vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
1
|
*,
|
|
90
2
|
*::before,
|
|
91
3
|
*::after {
|
|
@@ -102,7 +14,7 @@ body {
|
|
|
102
14
|
html {
|
|
103
15
|
box-sizing: border-box;
|
|
104
16
|
font-size: 16px;
|
|
105
|
-
line-height: 1.
|
|
17
|
+
line-height: 1.625;
|
|
106
18
|
-moz-osx-font-smoothing: grayscale;
|
|
107
19
|
-webkit-text-size-adjust: 100%;
|
|
108
20
|
}
|
|
@@ -265,7 +177,7 @@ input::-moz-placeholder {
|
|
|
265
177
|
.code {
|
|
266
178
|
color: var(--vb-secondary-50, hsl(214, 50%, 50%));
|
|
267
179
|
font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
|
|
268
|
-
font-size:
|
|
180
|
+
font-size: 16px;
|
|
269
181
|
word-break: break-word;
|
|
270
182
|
}
|
|
271
183
|
|
|
@@ -331,6 +243,8 @@ input::-moz-placeholder {
|
|
|
331
243
|
.link {
|
|
332
244
|
color: var(--vb-primary-50, hsl(152, 60%, 50%));
|
|
333
245
|
text-decoration: underline;
|
|
246
|
+
text-decoration-thickness: 1px;
|
|
247
|
+
text-underline-offset: 2px;
|
|
334
248
|
}
|
|
335
249
|
.link:hover {
|
|
336
250
|
color: var(--vb-primary-40, hsl(152, 60%, 40%));
|
|
@@ -372,7 +286,7 @@ input::-moz-placeholder {
|
|
|
372
286
|
border: none;
|
|
373
287
|
background: none;
|
|
374
288
|
color: inherit;
|
|
375
|
-
font-size:
|
|
289
|
+
font-size: 16px;
|
|
376
290
|
}
|
|
377
291
|
|
|
378
292
|
.scroll-box {
|
|
@@ -389,13 +303,18 @@ input::-moz-placeholder {
|
|
|
389
303
|
border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
|
|
390
304
|
}
|
|
391
305
|
|
|
306
|
+
.type {
|
|
307
|
+
color: var(--vb-foreground-light, var(--vb-neutral-40, hsl(214, 20%, 40%)));
|
|
308
|
+
font-size: 1.125rem;
|
|
309
|
+
line-height: 1.7778;
|
|
310
|
+
}
|
|
392
311
|
.type h1,
|
|
393
312
|
.type h2,
|
|
394
313
|
.type h3,
|
|
395
314
|
.type h4,
|
|
396
315
|
.type h5,
|
|
397
316
|
.type h6 {
|
|
398
|
-
color:
|
|
317
|
+
color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
|
|
399
318
|
font-family: inherit;
|
|
400
319
|
font-weight: 600;
|
|
401
320
|
line-height: 1.375;
|
|
@@ -424,6 +343,8 @@ input::-moz-placeholder {
|
|
|
424
343
|
.type > :not(div) a {
|
|
425
344
|
color: var(--vb-primary-50, hsl(152, 60%, 50%));
|
|
426
345
|
text-decoration: underline;
|
|
346
|
+
text-decoration-thickness: 1px;
|
|
347
|
+
text-underline-offset: 2px;
|
|
427
348
|
}
|
|
428
349
|
.type > a:hover,
|
|
429
350
|
.type > :not(div) a:hover {
|
|
@@ -441,7 +362,7 @@ input::-moz-placeholder {
|
|
|
441
362
|
.type > :not(div) code {
|
|
442
363
|
color: var(--vb-secondary-50, hsl(214, 50%, 50%));
|
|
443
364
|
font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
|
|
444
|
-
font-size:
|
|
365
|
+
font-size: 16px;
|
|
445
366
|
word-break: break-word;
|
|
446
367
|
}
|
|
447
368
|
.type > hr {
|
|
@@ -497,7 +418,7 @@ input::-moz-placeholder {
|
|
|
497
418
|
border: none;
|
|
498
419
|
background: none;
|
|
499
420
|
color: inherit;
|
|
500
|
-
font-size:
|
|
421
|
+
font-size: 16px;
|
|
501
422
|
}
|
|
502
423
|
|
|
503
424
|
.button {
|
|
@@ -521,7 +442,7 @@ input::-moz-placeholder {
|
|
|
521
442
|
font-family: inherit;
|
|
522
443
|
font-size: 1em;
|
|
523
444
|
font-weight: inherit;
|
|
524
|
-
line-height: 1.
|
|
445
|
+
line-height: 1.625;
|
|
525
446
|
text-decoration: none;
|
|
526
447
|
white-space: nowrap;
|
|
527
448
|
cursor: pointer;
|
|
@@ -745,7 +666,7 @@ input::-moz-placeholder {
|
|
|
745
666
|
height: 3.125rem;
|
|
746
667
|
padding: calc(0.648rem - 1px) 1.5rem;
|
|
747
668
|
font-size: 1.125rem;
|
|
748
|
-
line-height: 1.
|
|
669
|
+
line-height: 1.875;
|
|
749
670
|
}
|
|
750
671
|
|
|
751
672
|
.card {
|
|
@@ -816,7 +737,7 @@ input::-moz-placeholder {
|
|
|
816
737
|
flex-grow: 1;
|
|
817
738
|
font-size: 1.125rem;
|
|
818
739
|
font-weight: 600;
|
|
819
|
-
line-height: 1.
|
|
740
|
+
line-height: 1.875;
|
|
820
741
|
}
|
|
821
742
|
|
|
822
743
|
.card__background,
|
|
@@ -1017,9 +938,10 @@ input::-moz-placeholder {
|
|
|
1017
938
|
flex-direction: column;
|
|
1018
939
|
overflow: auto;
|
|
1019
940
|
border-radius: 0.25rem;
|
|
1020
|
-
background:
|
|
941
|
+
background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
|
|
1021
942
|
background-clip: padding-box;
|
|
1022
943
|
box-shadow: 0 8px 18px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
|
|
944
|
+
color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
|
|
1023
945
|
-webkit-overflow-scrolling: touch;
|
|
1024
946
|
}
|
|
1025
947
|
|
|
@@ -1036,7 +958,7 @@ input::-moz-placeholder {
|
|
|
1036
958
|
z-index: 1;
|
|
1037
959
|
display: flex;
|
|
1038
960
|
align-items: center;
|
|
1039
|
-
background:
|
|
961
|
+
background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
|
|
1040
962
|
vertical-align: middle;
|
|
1041
963
|
}
|
|
1042
964
|
.dialog__header > * + *,
|
|
@@ -1065,7 +987,7 @@ input::-moz-placeholder {
|
|
|
1065
987
|
flex-grow: 1;
|
|
1066
988
|
font-size: 1.125rem;
|
|
1067
989
|
font-weight: 600;
|
|
1068
|
-
line-height: 1.
|
|
990
|
+
line-height: 1.875;
|
|
1069
991
|
}
|
|
1070
992
|
|
|
1071
993
|
.dialog > .dialog__close {
|
|
@@ -1077,6 +999,15 @@ input::-moz-placeholder {
|
|
|
1077
999
|
padding-right: 3.5em;
|
|
1078
1000
|
}
|
|
1079
1001
|
|
|
1002
|
+
:root {
|
|
1003
|
+
--vrembem-prefix: vb-;
|
|
1004
|
+
}
|
|
1005
|
+
|
|
1006
|
+
:root {
|
|
1007
|
+
--vb-drawer-transition-duration: var(--vb-transition-duration, 0.3s);
|
|
1008
|
+
--vb-drawer-transition-timing-function: var(--vb-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
|
|
1009
|
+
}
|
|
1010
|
+
|
|
1080
1011
|
/**
|
|
1081
1012
|
* Required structure styles
|
|
1082
1013
|
*/
|
|
@@ -1150,11 +1081,17 @@ input::-moz-placeholder {
|
|
|
1150
1081
|
overflow: visible;
|
|
1151
1082
|
}
|
|
1152
1083
|
|
|
1084
|
+
.drawer.is-opening,
|
|
1085
|
+
.drawer.is-closing {
|
|
1086
|
+
transition-property: background-color, opacity, transform;
|
|
1087
|
+
transition-duration: var(--vb-drawer-transition-duration);
|
|
1088
|
+
transition-timing-function: var(--vb-drawer-transition-timing-function);
|
|
1089
|
+
}
|
|
1153
1090
|
.drawer.is-opening .drawer__dialog,
|
|
1154
1091
|
.drawer.is-closing .drawer__dialog {
|
|
1155
1092
|
transition-property: opacity, transform;
|
|
1156
|
-
transition-duration:
|
|
1157
|
-
transition-timing-function:
|
|
1093
|
+
transition-duration: var(--vb-drawer-transition-duration);
|
|
1094
|
+
transition-timing-function: var(--vb-drawer-transition-timing-function);
|
|
1158
1095
|
}
|
|
1159
1096
|
|
|
1160
1097
|
.drawer.is-opening .drawer__dialog,
|
|
@@ -1170,21 +1107,86 @@ input::-moz-placeholder {
|
|
|
1170
1107
|
opacity: 0;
|
|
1171
1108
|
}
|
|
1172
1109
|
|
|
1110
|
+
/**
|
|
1111
|
+
* Drawer slide transition
|
|
1112
|
+
*/
|
|
1113
|
+
.drawer {
|
|
1114
|
+
left: 0;
|
|
1115
|
+
transform: translateX(-100%);
|
|
1116
|
+
}
|
|
1117
|
+
.drawer.is-opening,
|
|
1118
|
+
.drawer.is-opened {
|
|
1119
|
+
transform: translateX(0);
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
.drawer.is-closing {
|
|
1123
|
+
transform: translateX(-100%);
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
/**
|
|
1127
|
+
* Drawer switched slide transition
|
|
1128
|
+
*/
|
|
1129
|
+
.drawer_switch {
|
|
1130
|
+
right: 0;
|
|
1131
|
+
left: auto;
|
|
1132
|
+
transform: translateX(100%);
|
|
1133
|
+
}
|
|
1134
|
+
.drawer_switch.is-closing {
|
|
1135
|
+
transform: translateX(100%);
|
|
1136
|
+
}
|
|
1137
|
+
|
|
1138
|
+
/**
|
|
1139
|
+
* Drawer main margins
|
|
1140
|
+
*/
|
|
1141
|
+
.drawer:not(.drawer_modal, .drawer_switch).is-opening ~ .drawer-main, .drawer:not(.drawer_modal, .drawer_switch).is-opened ~ .drawer-main {
|
|
1142
|
+
margin-left: 18em;
|
|
1143
|
+
}
|
|
1144
|
+
|
|
1145
|
+
.drawer.drawer_switch:not(.drawer_modal).is-opening ~ .drawer-main, .drawer.drawer_switch:not(.drawer_modal).is-opened ~ .drawer-main {
|
|
1146
|
+
margin-right: 18em;
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
/**
|
|
1150
|
+
* Drawer modal styles
|
|
1151
|
+
*/
|
|
1173
1152
|
.drawer_modal {
|
|
1174
1153
|
z-index: 900;
|
|
1154
|
+
right: auto;
|
|
1155
|
+
left: 0;
|
|
1175
1156
|
width: 0;
|
|
1176
1157
|
height: 0;
|
|
1177
1158
|
overflow: hidden;
|
|
1178
|
-
|
|
1159
|
+
transform: translateX(0);
|
|
1160
|
+
}
|
|
1161
|
+
.drawer_modal::before {
|
|
1162
|
+
content: "";
|
|
1163
|
+
position: absolute;
|
|
1164
|
+
inset: 0;
|
|
1165
|
+
width: 100%;
|
|
1166
|
+
height: 100%;
|
|
1167
|
+
background-color: var(--vb-neutral-10, hsl(214, 20%, 10%));
|
|
1168
|
+
opacity: 0;
|
|
1179
1169
|
}
|
|
1180
1170
|
.drawer_modal .drawer__dialog {
|
|
1181
1171
|
position: absolute;
|
|
1182
1172
|
z-index: 901;
|
|
1173
|
+
left: 0;
|
|
1183
1174
|
width: 18em;
|
|
1184
1175
|
max-width: 80%;
|
|
1176
|
+
transform: translateX(-100%);
|
|
1185
1177
|
background-color: white;
|
|
1186
1178
|
box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
|
|
1187
1179
|
}
|
|
1180
|
+
.drawer_modal.drawer_switch {
|
|
1181
|
+
right: auto;
|
|
1182
|
+
left: 0;
|
|
1183
|
+
transform: translateX(0);
|
|
1184
|
+
}
|
|
1185
|
+
.drawer_modal.drawer_switch .drawer__dialog {
|
|
1186
|
+
right: 0;
|
|
1187
|
+
left: auto;
|
|
1188
|
+
transform: translateX(100%);
|
|
1189
|
+
}
|
|
1188
1190
|
.drawer_modal .dialog__header,
|
|
1189
1191
|
.drawer_modal .dialog__footer {
|
|
1190
1192
|
background: white;
|
|
@@ -1193,6 +1195,9 @@ input::-moz-placeholder {
|
|
|
1193
1195
|
background: white;
|
|
1194
1196
|
}
|
|
1195
1197
|
|
|
1198
|
+
/**
|
|
1199
|
+
* Drawer modal transition
|
|
1200
|
+
*/
|
|
1196
1201
|
.drawer_modal.is-opening,
|
|
1197
1202
|
.drawer_modal.is-opened,
|
|
1198
1203
|
.drawer_modal.is-closing {
|
|
@@ -1201,56 +1206,35 @@ input::-moz-placeholder {
|
|
|
1201
1206
|
height: 100%;
|
|
1202
1207
|
}
|
|
1203
1208
|
|
|
1204
|
-
.drawer_modal.is-opening,
|
|
1205
|
-
.drawer_modal.is-closing {
|
|
1206
|
-
transition:
|
|
1209
|
+
.drawer_modal.is-opening::before,
|
|
1210
|
+
.drawer_modal.is-closing::before {
|
|
1211
|
+
transition: opacity var(--vb-drawer-transition-duration) var(--vb-drawer-transition-timing-function);
|
|
1207
1212
|
}
|
|
1208
1213
|
|
|
1209
1214
|
.drawer_modal.is-opening,
|
|
1210
1215
|
.drawer_modal.is-opened {
|
|
1211
|
-
|
|
1212
|
-
}
|
|
1213
|
-
|
|
1214
|
-
.drawer_modal.is-closing {
|
|
1215
|
-
background-color: rgba(var(--vb-neutral-10, hsl(214, 20%, 10%)), 0);
|
|
1216
|
-
}
|
|
1217
|
-
|
|
1218
|
-
.drawer:not(.drawer_switch) {
|
|
1219
|
-
left: 0;
|
|
1220
|
-
}
|
|
1221
|
-
.drawer:not(.drawer_switch) .drawer__dialog {
|
|
1222
|
-
left: 0;
|
|
1223
|
-
transform: translateX(-100%);
|
|
1224
|
-
}
|
|
1225
|
-
|
|
1226
|
-
.drawer_switch {
|
|
1227
|
-
right: 0;
|
|
1228
|
-
}
|
|
1229
|
-
.drawer_switch .drawer__dialog {
|
|
1230
|
-
right: 0;
|
|
1231
|
-
transform: translateX(100%);
|
|
1216
|
+
transform: translateX(0);
|
|
1232
1217
|
}
|
|
1233
|
-
|
|
1234
|
-
.
|
|
1235
|
-
|
|
1236
|
-
margin-left: 18em;
|
|
1218
|
+
.drawer_modal.is-opening::before,
|
|
1219
|
+
.drawer_modal.is-opened::before {
|
|
1220
|
+
opacity: 0.8;
|
|
1237
1221
|
}
|
|
1238
|
-
|
|
1239
|
-
.
|
|
1240
|
-
|
|
1241
|
-
margin-right: 18em;
|
|
1222
|
+
.drawer_modal.is-opening .drawer__dialog,
|
|
1223
|
+
.drawer_modal.is-opened .drawer__dialog {
|
|
1224
|
+
transform: translateX(0);
|
|
1242
1225
|
}
|
|
1243
1226
|
|
|
1244
|
-
.
|
|
1245
|
-
.drawer.is-opened .drawer__dialog {
|
|
1227
|
+
.drawer_modal.is-closing {
|
|
1246
1228
|
transform: translateX(0);
|
|
1247
1229
|
}
|
|
1248
|
-
|
|
1249
|
-
.drawer:not(.drawer_switch).is-closing .drawer__dialog {
|
|
1230
|
+
.drawer_modal.is-closing .drawer__dialog {
|
|
1250
1231
|
transform: translateX(-100%);
|
|
1251
1232
|
}
|
|
1252
1233
|
|
|
1253
|
-
.drawer_switch.is-closing
|
|
1234
|
+
.drawer_modal.drawer_switch.is-closing {
|
|
1235
|
+
transform: translateX(0);
|
|
1236
|
+
}
|
|
1237
|
+
.drawer_modal.drawer_switch.is-closing .drawer__dialog {
|
|
1254
1238
|
transform: translateX(100%);
|
|
1255
1239
|
}
|
|
1256
1240
|
|
|
@@ -1846,39 +1830,42 @@ input::-moz-placeholder {
|
|
|
1846
1830
|
}
|
|
1847
1831
|
.icon {
|
|
1848
1832
|
stroke: currentcolor;
|
|
1849
|
-
stroke-width:
|
|
1833
|
+
stroke-width: 2;
|
|
1850
1834
|
fill: none;
|
|
1851
1835
|
display: inline-block;
|
|
1852
1836
|
box-sizing: content-box;
|
|
1853
1837
|
flex-shrink: 0;
|
|
1854
1838
|
width: 1em;
|
|
1855
1839
|
height: 1em;
|
|
1856
|
-
stroke-width: 2px;
|
|
1857
1840
|
stroke-linecap: round;
|
|
1858
1841
|
stroke-linejoin: round;
|
|
1859
|
-
font-size: 1.
|
|
1842
|
+
font-size: 1.5em;
|
|
1860
1843
|
vertical-align: top;
|
|
1861
1844
|
}
|
|
1862
1845
|
|
|
1863
1846
|
.icon_size_xs {
|
|
1847
|
+
stroke-width: 3.5;
|
|
1864
1848
|
font-size: 0.75em;
|
|
1865
1849
|
}
|
|
1866
1850
|
|
|
1867
1851
|
.icon_size_sm {
|
|
1868
|
-
|
|
1852
|
+
stroke-width: 2.5;
|
|
1853
|
+
font-size: 1.125em;
|
|
1869
1854
|
}
|
|
1870
1855
|
|
|
1871
1856
|
.icon_size_lg {
|
|
1872
|
-
|
|
1857
|
+
stroke-width: 1.75;
|
|
1858
|
+
font-size: 2em;
|
|
1873
1859
|
}
|
|
1874
1860
|
|
|
1875
1861
|
.icon_size_xl {
|
|
1876
|
-
|
|
1862
|
+
stroke-width: 1.3;
|
|
1863
|
+
font-size: 3em;
|
|
1877
1864
|
}
|
|
1878
1865
|
|
|
1879
1866
|
.icon_style_stroke {
|
|
1880
1867
|
stroke: currentcolor;
|
|
1881
|
-
stroke-width:
|
|
1868
|
+
stroke-width: 2;
|
|
1882
1869
|
fill: none;
|
|
1883
1870
|
}
|
|
1884
1871
|
|
|
@@ -1888,68 +1875,6 @@ input::-moz-placeholder {
|
|
|
1888
1875
|
fill: currentcolor;
|
|
1889
1876
|
}
|
|
1890
1877
|
|
|
1891
|
-
.icon-action {
|
|
1892
|
-
width: 24px;
|
|
1893
|
-
height: 24px;
|
|
1894
|
-
position: relative;
|
|
1895
|
-
display: inline-flex;
|
|
1896
|
-
flex-shrink: 0;
|
|
1897
|
-
align-items: center;
|
|
1898
|
-
justify-content: center;
|
|
1899
|
-
transition-property: box-shadow, outline, outline-offset;
|
|
1900
|
-
transition-duration: 0.15s;
|
|
1901
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1902
|
-
outline: none;
|
|
1903
|
-
border-radius: 9999px;
|
|
1904
|
-
background: rgba(0, 0, 0, 0.4);
|
|
1905
|
-
background-clip: border-box;
|
|
1906
|
-
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
1907
|
-
color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
|
|
1908
|
-
cursor: pointer;
|
|
1909
|
-
}
|
|
1910
|
-
.icon-action:disabled:not(.is-loading) {
|
|
1911
|
-
opacity: 0.6;
|
|
1912
|
-
pointer-events: none;
|
|
1913
|
-
}
|
|
1914
|
-
.icon-action:hover {
|
|
1915
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
1916
|
-
}
|
|
1917
|
-
.icon-action:focus {
|
|
1918
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
1919
|
-
box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
|
|
1920
|
-
}
|
|
1921
|
-
.icon-action:active {
|
|
1922
|
-
background-color: rgba(0, 0, 0, 0.6);
|
|
1923
|
-
}
|
|
1924
|
-
.icon-action .icon {
|
|
1925
|
-
stroke-width: 2.5px;
|
|
1926
|
-
font-size: 0.875rem;
|
|
1927
|
-
}
|
|
1928
|
-
.icon-action.is-loading {
|
|
1929
|
-
color: transparent !important;
|
|
1930
|
-
pointer-events: none;
|
|
1931
|
-
}
|
|
1932
|
-
.icon-action.is-loading::after {
|
|
1933
|
-
width: 0.7em;
|
|
1934
|
-
height: 0.7em;
|
|
1935
|
-
content: "";
|
|
1936
|
-
position: absolute;
|
|
1937
|
-
top: calc(50% - (0.7em * 0.5));
|
|
1938
|
-
left: calc(50% - (0.7em * 0.5));
|
|
1939
|
-
animation: spin 0.6s infinite linear;
|
|
1940
|
-
border: 2px solid;
|
|
1941
|
-
border-radius: 9999px;
|
|
1942
|
-
border-color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))) var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))) transparent transparent;
|
|
1943
|
-
}
|
|
1944
|
-
|
|
1945
|
-
@keyframes spin {
|
|
1946
|
-
from {
|
|
1947
|
-
transform: rotate(0deg);
|
|
1948
|
-
}
|
|
1949
|
-
to {
|
|
1950
|
-
transform: rotate(360deg);
|
|
1951
|
-
}
|
|
1952
|
-
}
|
|
1953
1878
|
.input {
|
|
1954
1879
|
position: relative;
|
|
1955
1880
|
display: block;
|
|
@@ -1968,7 +1893,7 @@ input::-moz-placeholder {
|
|
|
1968
1893
|
color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
|
|
1969
1894
|
font-family: blinkmacsystemfont, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
|
|
1970
1895
|
font-size: 16px;
|
|
1971
|
-
line-height: 1.
|
|
1896
|
+
line-height: 1.625;
|
|
1972
1897
|
-moz-appearance: none;
|
|
1973
1898
|
-webkit-appearance: none;
|
|
1974
1899
|
appearance: none;
|
|
@@ -2006,7 +1931,7 @@ input::-moz-placeholder {
|
|
|
2006
1931
|
height: 3.125rem;
|
|
2007
1932
|
padding: calc(0.648rem - 1px);
|
|
2008
1933
|
font-size: 1.125rem;
|
|
2009
|
-
line-height: 1.
|
|
1934
|
+
line-height: 1.875;
|
|
2010
1935
|
}
|
|
2011
1936
|
|
|
2012
1937
|
.input_error {
|
|
@@ -2267,7 +2192,7 @@ input::-moz-placeholder {
|
|
|
2267
2192
|
flex: 0 0 auto;
|
|
2268
2193
|
align-items: center;
|
|
2269
2194
|
max-width: 30%;
|
|
2270
|
-
min-height: 1.
|
|
2195
|
+
min-height: 1.625em;
|
|
2271
2196
|
}
|
|
2272
2197
|
|
|
2273
2198
|
.media_gap_none > * + * {
|
|
@@ -2638,14 +2563,18 @@ input::-moz-placeholder {
|
|
|
2638
2563
|
padding: 0.5em;
|
|
2639
2564
|
}
|
|
2640
2565
|
.menu__action:hover {
|
|
2641
|
-
background: rgba(0, 0, 0, 0.05);
|
|
2566
|
+
background: var(--vb-background-hover, rgba(0, 0, 0, 0.05));
|
|
2642
2567
|
}
|
|
2643
2568
|
.menu__action:focus {
|
|
2644
2569
|
outline: none;
|
|
2645
|
-
background: rgba(0, 0, 0, 0.05);
|
|
2570
|
+
background: var(--vb-background-focus, rgba(0, 0, 0, 0.05));
|
|
2571
|
+
}
|
|
2572
|
+
.menu__action:focus-visible {
|
|
2573
|
+
z-index: 1;
|
|
2574
|
+
outline: 2px solid var(--vb-focus-visible, var(--vb-primary-50, hsl(152, 60%, 50%)));
|
|
2646
2575
|
}
|
|
2647
2576
|
.menu__action:active {
|
|
2648
|
-
background: rgba(0, 0, 0, 0.1);
|
|
2577
|
+
background: var(--vb-background-active, rgba(0, 0, 0, 0.1));
|
|
2649
2578
|
}
|
|
2650
2579
|
.menu__action.is-active, .menu__action.is-active[disabled] {
|
|
2651
2580
|
background: none;
|
|
@@ -2881,7 +2810,7 @@ input::-moz-placeholder {
|
|
|
2881
2810
|
|
|
2882
2811
|
.menu_size_lg {
|
|
2883
2812
|
font-size: 1.125rem;
|
|
2884
|
-
line-height: 1.
|
|
2813
|
+
line-height: 1.875;
|
|
2885
2814
|
}
|
|
2886
2815
|
.menu_size_lg .menu__action {
|
|
2887
2816
|
min-width: 3.125rem;
|
|
@@ -2892,6 +2821,11 @@ input::-moz-placeholder {
|
|
|
2892
2821
|
padding: 0.648rem;
|
|
2893
2822
|
}
|
|
2894
2823
|
|
|
2824
|
+
:root {
|
|
2825
|
+
--vb-modal-transition-duration: var(--vb-transition-duration, 0.3s);
|
|
2826
|
+
--vb-modal-transition-timing-function: var(--vb-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
|
|
2827
|
+
}
|
|
2828
|
+
|
|
2895
2829
|
.modal {
|
|
2896
2830
|
position: fixed;
|
|
2897
2831
|
z-index: 1000;
|
|
@@ -2922,8 +2856,8 @@ input::-moz-placeholder {
|
|
|
2922
2856
|
overflow: auto;
|
|
2923
2857
|
transform: translateY(-5em);
|
|
2924
2858
|
transition-property: outline;
|
|
2925
|
-
transition-duration:
|
|
2926
|
-
transition-timing-function:
|
|
2859
|
+
transition-duration: var(--vb-modal-transition-duration);
|
|
2860
|
+
transition-timing-function: var(--vb-modal-transition-timing-function);
|
|
2927
2861
|
outline: 0 solid transparent;
|
|
2928
2862
|
box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
|
|
2929
2863
|
opacity: 0;
|
|
@@ -2950,13 +2884,13 @@ input::-moz-placeholder {
|
|
|
2950
2884
|
|
|
2951
2885
|
.modal.is-opening::before,
|
|
2952
2886
|
.modal.is-closing::before {
|
|
2953
|
-
transition: opacity
|
|
2887
|
+
transition: opacity var(--vb-modal-transition-duration) var(--vb-modal-transition-timing-function);
|
|
2954
2888
|
}
|
|
2955
2889
|
.modal.is-opening .modal__dialog,
|
|
2956
2890
|
.modal.is-closing .modal__dialog {
|
|
2957
2891
|
transition-property: opacity, transform;
|
|
2958
|
-
transition-duration:
|
|
2959
|
-
transition-timing-function:
|
|
2892
|
+
transition-duration: var(--vb-modal-transition-duration);
|
|
2893
|
+
transition-timing-function: var(--vb-modal-transition-timing-function);
|
|
2960
2894
|
}
|
|
2961
2895
|
|
|
2962
2896
|
.modal.is-opening::before,
|
|
@@ -2982,7 +2916,7 @@ input::-moz-placeholder {
|
|
|
2982
2916
|
transform: scale(1);
|
|
2983
2917
|
}
|
|
2984
2918
|
.modal_full.is-closing .modal__dialog {
|
|
2985
|
-
transform: scale(
|
|
2919
|
+
transform: scale(0.75);
|
|
2986
2920
|
}
|
|
2987
2921
|
|
|
2988
2922
|
.modal_pos_top {
|
|
@@ -3050,8 +2984,11 @@ input::-moz-placeholder {
|
|
|
3050
2984
|
|
|
3051
2985
|
.notice {
|
|
3052
2986
|
padding: 1em;
|
|
2987
|
+
border: var(--vb-notice-border);
|
|
3053
2988
|
border-radius: 0.25rem;
|
|
3054
|
-
background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
|
|
2989
|
+
background: var(--vb-notice-background, var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%))));
|
|
2990
|
+
box-shadow: var(--vb-notice-shadow);
|
|
2991
|
+
color: var(--vb-notice-foreground, var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))));
|
|
3055
2992
|
}
|
|
3056
2993
|
.notice > * + * {
|
|
3057
2994
|
margin-top: 0.5em;
|
|
@@ -3060,7 +2997,7 @@ input::-moz-placeholder {
|
|
|
3060
2997
|
.notice__title {
|
|
3061
2998
|
font-size: 1.125rem;
|
|
3062
2999
|
font-weight: 600;
|
|
3063
|
-
line-height: 1.
|
|
3000
|
+
line-height: 1.875;
|
|
3064
3001
|
}
|
|
3065
3002
|
|
|
3066
3003
|
.notice_theme_primary {
|
|
@@ -3083,6 +3020,15 @@ input::-moz-placeholder {
|
|
|
3083
3020
|
color: var(--vb-important-30, hsl(0, 80%, 30%));
|
|
3084
3021
|
}
|
|
3085
3022
|
|
|
3023
|
+
:root, .vb-theme-root {
|
|
3024
|
+
--vb-notice-background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
|
|
3025
|
+
--vb-notice-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
|
|
3026
|
+
}
|
|
3027
|
+
.vb-theme-light {
|
|
3028
|
+
--vb-notice-background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
|
|
3029
|
+
--vb-notice-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
|
|
3030
|
+
}
|
|
3031
|
+
|
|
3086
3032
|
:root {
|
|
3087
3033
|
--vb-popover-offset: 8;
|
|
3088
3034
|
--vb-popover-overflow-padding: 10;
|
|
@@ -3101,9 +3047,10 @@ input::-moz-placeholder {
|
|
|
3101
3047
|
margin: calc(var(--vb-popover-offset) * 1px) 0 0;
|
|
3102
3048
|
padding: 0.5em;
|
|
3103
3049
|
border-radius: 0.25rem;
|
|
3104
|
-
background:
|
|
3050
|
+
background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
|
|
3105
3051
|
background-clip: padding-box;
|
|
3106
3052
|
box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
|
|
3053
|
+
color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
|
|
3107
3054
|
font-size: 0.875rem;
|
|
3108
3055
|
}
|
|
3109
3056
|
.popover::before {
|
|
@@ -3227,7 +3174,6 @@ input::-moz-placeholder {
|
|
|
3227
3174
|
padding: 0.5rem 0.75rem;
|
|
3228
3175
|
background: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
|
|
3229
3176
|
color: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
|
|
3230
|
-
font-size: 0.75em;
|
|
3231
3177
|
}
|
|
3232
3178
|
|
|
3233
3179
|
.radio {
|
|
@@ -4114,10 +4060,22 @@ input::-moz-placeholder {
|
|
|
4114
4060
|
background-color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
|
|
4115
4061
|
}
|
|
4116
4062
|
|
|
4063
|
+
.background-primary-5 {
|
|
4064
|
+
background-color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
|
|
4065
|
+
}
|
|
4066
|
+
|
|
4117
4067
|
.background-primary-10 {
|
|
4118
4068
|
background-color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
|
|
4119
4069
|
}
|
|
4120
4070
|
|
|
4071
|
+
.background-primary-12 {
|
|
4072
|
+
background-color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
|
|
4073
|
+
}
|
|
4074
|
+
|
|
4075
|
+
.background-primary-15 {
|
|
4076
|
+
background-color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
|
|
4077
|
+
}
|
|
4078
|
+
|
|
4121
4079
|
.background-primary-20 {
|
|
4122
4080
|
background-color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
|
|
4123
4081
|
}
|
|
@@ -4170,10 +4128,22 @@ input::-moz-placeholder {
|
|
|
4170
4128
|
background-color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
|
|
4171
4129
|
}
|
|
4172
4130
|
|
|
4131
|
+
.background-secondary-5 {
|
|
4132
|
+
background-color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
|
|
4133
|
+
}
|
|
4134
|
+
|
|
4173
4135
|
.background-secondary-10 {
|
|
4174
4136
|
background-color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
|
|
4175
4137
|
}
|
|
4176
4138
|
|
|
4139
|
+
.background-secondary-12 {
|
|
4140
|
+
background-color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
|
|
4141
|
+
}
|
|
4142
|
+
|
|
4143
|
+
.background-secondary-15 {
|
|
4144
|
+
background-color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
|
|
4145
|
+
}
|
|
4146
|
+
|
|
4177
4147
|
.background-secondary-20 {
|
|
4178
4148
|
background-color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
|
|
4179
4149
|
}
|
|
@@ -4226,10 +4196,22 @@ input::-moz-placeholder {
|
|
|
4226
4196
|
background-color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
|
|
4227
4197
|
}
|
|
4228
4198
|
|
|
4199
|
+
.background-neutral-5 {
|
|
4200
|
+
background-color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
|
|
4201
|
+
}
|
|
4202
|
+
|
|
4229
4203
|
.background-neutral-10 {
|
|
4230
4204
|
background-color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
|
|
4231
4205
|
}
|
|
4232
4206
|
|
|
4207
|
+
.background-neutral-12 {
|
|
4208
|
+
background-color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
|
|
4209
|
+
}
|
|
4210
|
+
|
|
4211
|
+
.background-neutral-15 {
|
|
4212
|
+
background-color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
|
|
4213
|
+
}
|
|
4214
|
+
|
|
4233
4215
|
.background-neutral-20 {
|
|
4234
4216
|
background-color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
|
|
4235
4217
|
}
|
|
@@ -4282,10 +4264,22 @@ input::-moz-placeholder {
|
|
|
4282
4264
|
background-color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
|
|
4283
4265
|
}
|
|
4284
4266
|
|
|
4267
|
+
.background-important-5 {
|
|
4268
|
+
background-color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
|
|
4269
|
+
}
|
|
4270
|
+
|
|
4285
4271
|
.background-important-10 {
|
|
4286
4272
|
background-color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
|
|
4287
4273
|
}
|
|
4288
4274
|
|
|
4275
|
+
.background-important-12 {
|
|
4276
|
+
background-color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
|
|
4277
|
+
}
|
|
4278
|
+
|
|
4279
|
+
.background-important-15 {
|
|
4280
|
+
background-color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
|
|
4281
|
+
}
|
|
4282
|
+
|
|
4289
4283
|
.background-important-20 {
|
|
4290
4284
|
background-color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
|
|
4291
4285
|
}
|
|
@@ -4362,10 +4356,22 @@ input::-moz-placeholder {
|
|
|
4362
4356
|
color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
|
|
4363
4357
|
}
|
|
4364
4358
|
|
|
4359
|
+
.foreground-primary-5 {
|
|
4360
|
+
color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
|
|
4361
|
+
}
|
|
4362
|
+
|
|
4365
4363
|
.foreground-primary-10 {
|
|
4366
4364
|
color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
|
|
4367
4365
|
}
|
|
4368
4366
|
|
|
4367
|
+
.foreground-primary-12 {
|
|
4368
|
+
color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
|
|
4369
|
+
}
|
|
4370
|
+
|
|
4371
|
+
.foreground-primary-15 {
|
|
4372
|
+
color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
|
|
4373
|
+
}
|
|
4374
|
+
|
|
4369
4375
|
.foreground-primary-20 {
|
|
4370
4376
|
color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
|
|
4371
4377
|
}
|
|
@@ -4418,10 +4424,22 @@ input::-moz-placeholder {
|
|
|
4418
4424
|
color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
|
|
4419
4425
|
}
|
|
4420
4426
|
|
|
4427
|
+
.foreground-secondary-5 {
|
|
4428
|
+
color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
|
|
4429
|
+
}
|
|
4430
|
+
|
|
4421
4431
|
.foreground-secondary-10 {
|
|
4422
4432
|
color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
|
|
4423
4433
|
}
|
|
4424
4434
|
|
|
4435
|
+
.foreground-secondary-12 {
|
|
4436
|
+
color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
|
|
4437
|
+
}
|
|
4438
|
+
|
|
4439
|
+
.foreground-secondary-15 {
|
|
4440
|
+
color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
|
|
4441
|
+
}
|
|
4442
|
+
|
|
4425
4443
|
.foreground-secondary-20 {
|
|
4426
4444
|
color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
|
|
4427
4445
|
}
|
|
@@ -4474,10 +4492,22 @@ input::-moz-placeholder {
|
|
|
4474
4492
|
color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
|
|
4475
4493
|
}
|
|
4476
4494
|
|
|
4495
|
+
.foreground-neutral-5 {
|
|
4496
|
+
color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
|
|
4497
|
+
}
|
|
4498
|
+
|
|
4477
4499
|
.foreground-neutral-10 {
|
|
4478
4500
|
color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
|
|
4479
4501
|
}
|
|
4480
4502
|
|
|
4503
|
+
.foreground-neutral-12 {
|
|
4504
|
+
color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
|
|
4505
|
+
}
|
|
4506
|
+
|
|
4507
|
+
.foreground-neutral-15 {
|
|
4508
|
+
color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
|
|
4509
|
+
}
|
|
4510
|
+
|
|
4481
4511
|
.foreground-neutral-20 {
|
|
4482
4512
|
color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
|
|
4483
4513
|
}
|
|
@@ -4530,10 +4560,22 @@ input::-moz-placeholder {
|
|
|
4530
4560
|
color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
|
|
4531
4561
|
}
|
|
4532
4562
|
|
|
4563
|
+
.foreground-important-5 {
|
|
4564
|
+
color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
|
|
4565
|
+
}
|
|
4566
|
+
|
|
4533
4567
|
.foreground-important-10 {
|
|
4534
4568
|
color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
|
|
4535
4569
|
}
|
|
4536
4570
|
|
|
4571
|
+
.foreground-important-12 {
|
|
4572
|
+
color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
|
|
4573
|
+
}
|
|
4574
|
+
|
|
4575
|
+
.foreground-important-15 {
|
|
4576
|
+
color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
|
|
4577
|
+
}
|
|
4578
|
+
|
|
4537
4579
|
.foreground-important-20 {
|
|
4538
4580
|
color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
|
|
4539
4581
|
}
|
|
@@ -4658,59 +4700,87 @@ input::-moz-placeholder {
|
|
|
4658
4700
|
border-bottom-left-radius: 0.25rem !important;
|
|
4659
4701
|
}
|
|
4660
4702
|
|
|
4661
|
-
.radius-
|
|
4703
|
+
.radius-lg {
|
|
4704
|
+
border-radius: 0.5rem !important;
|
|
4705
|
+
}
|
|
4706
|
+
|
|
4707
|
+
.radius-lg-top,
|
|
4708
|
+
.radius-lg-left,
|
|
4709
|
+
.radius-lg-top-left {
|
|
4710
|
+
border-top-left-radius: 0.5rem !important;
|
|
4711
|
+
}
|
|
4712
|
+
|
|
4713
|
+
.radius-lg-top,
|
|
4714
|
+
.radius-lg-right,
|
|
4715
|
+
.radius-lg-top-right {
|
|
4716
|
+
border-top-right-radius: 0.5rem !important;
|
|
4717
|
+
}
|
|
4718
|
+
|
|
4719
|
+
.radius-lg-bottom,
|
|
4720
|
+
.radius-lg-right,
|
|
4721
|
+
.radius-lg-bottom-right {
|
|
4722
|
+
border-bottom-right-radius: 0.5rem !important;
|
|
4723
|
+
}
|
|
4724
|
+
|
|
4725
|
+
.radius-lg-bottom,
|
|
4726
|
+
.radius-lg-left,
|
|
4727
|
+
.radius-lg-bottom-left {
|
|
4728
|
+
border-bottom-left-radius: 0.5rem !important;
|
|
4729
|
+
}
|
|
4730
|
+
|
|
4731
|
+
.radius-lg-circle {
|
|
4662
4732
|
border-radius: 9999px !important;
|
|
4663
4733
|
}
|
|
4664
4734
|
|
|
4665
|
-
.radius-circle-top,
|
|
4666
|
-
.radius-circle-left,
|
|
4667
|
-
.radius-circle-top-left {
|
|
4735
|
+
.radius-lg-circle-top,
|
|
4736
|
+
.radius-lg-circle-left,
|
|
4737
|
+
.radius-lg-circle-top-left {
|
|
4668
4738
|
border-top-left-radius: 9999px !important;
|
|
4669
4739
|
}
|
|
4670
4740
|
|
|
4671
|
-
.radius-circle-top,
|
|
4672
|
-
.radius-circle-right,
|
|
4673
|
-
.radius-circle-top-right {
|
|
4741
|
+
.radius-lg-circle-top,
|
|
4742
|
+
.radius-lg-circle-right,
|
|
4743
|
+
.radius-lg-circle-top-right {
|
|
4674
4744
|
border-top-right-radius: 9999px !important;
|
|
4675
4745
|
}
|
|
4676
4746
|
|
|
4677
|
-
.radius-circle-bottom,
|
|
4678
|
-
.radius-circle-right,
|
|
4679
|
-
.radius-circle-bottom-right {
|
|
4747
|
+
.radius-lg-circle-bottom,
|
|
4748
|
+
.radius-lg-circle-right,
|
|
4749
|
+
.radius-lg-circle-bottom-right {
|
|
4680
4750
|
border-bottom-right-radius: 9999px !important;
|
|
4681
4751
|
}
|
|
4682
4752
|
|
|
4683
|
-
.radius-circle-bottom,
|
|
4684
|
-
.radius-circle-left,
|
|
4685
|
-
.radius-circle-bottom-left {
|
|
4753
|
+
.radius-lg-circle-bottom,
|
|
4754
|
+
.radius-lg-circle-left,
|
|
4755
|
+
.radius-lg-circle-bottom-left {
|
|
4686
4756
|
border-bottom-left-radius: 9999px !important;
|
|
4687
4757
|
}
|
|
4688
4758
|
|
|
4689
|
-
.radius-square {
|
|
4759
|
+
.radius-lg-circle-square {
|
|
4690
4760
|
border-radius: 0 !important;
|
|
4691
4761
|
}
|
|
4692
4762
|
|
|
4693
|
-
.radius-square-top,
|
|
4694
|
-
.radius-square-left,
|
|
4695
|
-
.radius-square-top-left {
|
|
4763
|
+
.radius-lg-circle-square-top,
|
|
4764
|
+
.radius-lg-circle-square-left,
|
|
4765
|
+
.radius-lg-circle-square-top-left {
|
|
4696
4766
|
border-top-left-radius: 0 !important;
|
|
4697
4767
|
}
|
|
4698
4768
|
|
|
4699
|
-
.radius-square-top,
|
|
4700
|
-
.radius-square-right,
|
|
4701
|
-
.radius-square-top-right {
|
|
4769
|
+
.radius-lg-circle-square-top,
|
|
4770
|
+
.radius-lg-circle-square-right,
|
|
4771
|
+
.radius-lg-circle-square-top-right {
|
|
4702
4772
|
border-top-right-radius: 0 !important;
|
|
4703
4773
|
}
|
|
4704
4774
|
|
|
4705
|
-
.radius-square-bottom,
|
|
4706
|
-
.radius-square-right,
|
|
4707
|
-
.radius-square-bottom-right {
|
|
4775
|
+
.radius-lg-circle-square-bottom,
|
|
4776
|
+
.radius-lg-circle-square-right,
|
|
4777
|
+
.radius-lg-circle-square-bottom-right {
|
|
4708
4778
|
border-bottom-right-radius: 0 !important;
|
|
4709
4779
|
}
|
|
4710
4780
|
|
|
4711
|
-
.radius-square-bottom,
|
|
4712
|
-
.radius-square-left,
|
|
4713
|
-
.radius-square-bottom-left {
|
|
4781
|
+
.radius-lg-circle-square-bottom,
|
|
4782
|
+
.radius-lg-circle-square-left,
|
|
4783
|
+
.radius-lg-circle-square-bottom-left {
|
|
4714
4784
|
border-bottom-left-radius: 0 !important;
|
|
4715
4785
|
}
|
|
4716
4786
|
|
|
@@ -5276,7 +5346,7 @@ input::-moz-placeholder {
|
|
|
5276
5346
|
}
|
|
5277
5347
|
|
|
5278
5348
|
.font-leading-base {
|
|
5279
|
-
line-height: 1.
|
|
5349
|
+
line-height: 1.625 !important;
|
|
5280
5350
|
}
|
|
5281
5351
|
|
|
5282
5352
|
.font-leading-sm {
|
|
@@ -5284,7 +5354,7 @@ input::-moz-placeholder {
|
|
|
5284
5354
|
}
|
|
5285
5355
|
|
|
5286
5356
|
.font-leading-lg {
|
|
5287
|
-
line-height: 1.
|
|
5357
|
+
line-height: 1.875 !important;
|
|
5288
5358
|
}
|
|
5289
5359
|
|
|
5290
5360
|
.font-kerning-0 {
|
|
@@ -5669,6 +5739,66 @@ input::-moz-placeholder {
|
|
|
5669
5739
|
max-width: 100% !important;
|
|
5670
5740
|
}
|
|
5671
5741
|
|
|
5742
|
+
.overflow-visible {
|
|
5743
|
+
overflow: visible !important;
|
|
5744
|
+
}
|
|
5745
|
+
|
|
5746
|
+
.overflow-x-visible {
|
|
5747
|
+
overflow-x: visible !important;
|
|
5748
|
+
}
|
|
5749
|
+
|
|
5750
|
+
.overflow-y-visible {
|
|
5751
|
+
overflow-y: visible !important;
|
|
5752
|
+
}
|
|
5753
|
+
|
|
5754
|
+
.overflow-hidden {
|
|
5755
|
+
overflow: hidden !important;
|
|
5756
|
+
}
|
|
5757
|
+
|
|
5758
|
+
.overflow-x-hidden {
|
|
5759
|
+
overflow-x: hidden !important;
|
|
5760
|
+
}
|
|
5761
|
+
|
|
5762
|
+
.overflow-y-hidden {
|
|
5763
|
+
overflow-y: hidden !important;
|
|
5764
|
+
}
|
|
5765
|
+
|
|
5766
|
+
.overflow-clip {
|
|
5767
|
+
overflow: clip !important;
|
|
5768
|
+
}
|
|
5769
|
+
|
|
5770
|
+
.overflow-x-clip {
|
|
5771
|
+
overflow-x: clip !important;
|
|
5772
|
+
}
|
|
5773
|
+
|
|
5774
|
+
.overflow-y-clip {
|
|
5775
|
+
overflow-y: clip !important;
|
|
5776
|
+
}
|
|
5777
|
+
|
|
5778
|
+
.overflow-scroll {
|
|
5779
|
+
overflow: scroll !important;
|
|
5780
|
+
}
|
|
5781
|
+
|
|
5782
|
+
.overflow-x-scroll {
|
|
5783
|
+
overflow-x: scroll !important;
|
|
5784
|
+
}
|
|
5785
|
+
|
|
5786
|
+
.overflow-y-scroll {
|
|
5787
|
+
overflow-y: scroll !important;
|
|
5788
|
+
}
|
|
5789
|
+
|
|
5790
|
+
.overflow-auto {
|
|
5791
|
+
overflow: auto !important;
|
|
5792
|
+
}
|
|
5793
|
+
|
|
5794
|
+
.overflow-x-auto {
|
|
5795
|
+
overflow-x: auto !important;
|
|
5796
|
+
}
|
|
5797
|
+
|
|
5798
|
+
.overflow-y-auto {
|
|
5799
|
+
overflow-y: auto !important;
|
|
5800
|
+
}
|
|
5801
|
+
|
|
5672
5802
|
.padding {
|
|
5673
5803
|
padding: 1em !important;
|
|
5674
5804
|
}
|
|
@@ -5945,4 +6075,173 @@ input::-moz-placeholder {
|
|
|
5945
6075
|
white-space: nowrap !important;
|
|
5946
6076
|
}
|
|
5947
6077
|
|
|
6078
|
+
:root {
|
|
6079
|
+
--vb-primary-hs: 152deg, 60%;
|
|
6080
|
+
--vb-primary: var(--vb-primary-50);
|
|
6081
|
+
--vb-primary-0: hsl(var(--vb-primary-hs), 0%);
|
|
6082
|
+
--vb-primary-5: hsl(var(--vb-primary-hs), 5%);
|
|
6083
|
+
--vb-primary-10: hsl(var(--vb-primary-hs), 10%);
|
|
6084
|
+
--vb-primary-12: hsl(var(--vb-primary-hs), 12%);
|
|
6085
|
+
--vb-primary-15: hsl(var(--vb-primary-hs), 15%);
|
|
6086
|
+
--vb-primary-20: hsl(var(--vb-primary-hs), 20%);
|
|
6087
|
+
--vb-primary-30: hsl(var(--vb-primary-hs), 30%);
|
|
6088
|
+
--vb-primary-40: hsl(var(--vb-primary-hs), 40%);
|
|
6089
|
+
--vb-primary-50: hsl(var(--vb-primary-hs), 50%);
|
|
6090
|
+
--vb-primary-60: hsl(var(--vb-primary-hs), 60%);
|
|
6091
|
+
--vb-primary-70: hsl(var(--vb-primary-hs), 70%);
|
|
6092
|
+
--vb-primary-80: hsl(var(--vb-primary-hs), 80%);
|
|
6093
|
+
--vb-primary-90: hsl(var(--vb-primary-hs), 90%);
|
|
6094
|
+
--vb-primary-95: hsl(var(--vb-primary-hs), 95%);
|
|
6095
|
+
--vb-primary-98: hsl(var(--vb-primary-hs), 98%);
|
|
6096
|
+
--vb-primary-100: hsl(var(--vb-primary-hs), 100%);
|
|
6097
|
+
--vb-secondary-hs: 214deg, 50%;
|
|
6098
|
+
--vb-secondary: var(--vb-secondary-50);
|
|
6099
|
+
--vb-secondary-0: hsl(var(--vb-secondary-hs), 0%);
|
|
6100
|
+
--vb-secondary-5: hsl(var(--vb-secondary-hs), 5%);
|
|
6101
|
+
--vb-secondary-10: hsl(var(--vb-secondary-hs), 10%);
|
|
6102
|
+
--vb-secondary-12: hsl(var(--vb-secondary-hs), 12%);
|
|
6103
|
+
--vb-secondary-15: hsl(var(--vb-secondary-hs), 15%);
|
|
6104
|
+
--vb-secondary-20: hsl(var(--vb-secondary-hs), 20%);
|
|
6105
|
+
--vb-secondary-30: hsl(var(--vb-secondary-hs), 30%);
|
|
6106
|
+
--vb-secondary-40: hsl(var(--vb-secondary-hs), 40%);
|
|
6107
|
+
--vb-secondary-50: hsl(var(--vb-secondary-hs), 50%);
|
|
6108
|
+
--vb-secondary-60: hsl(var(--vb-secondary-hs), 60%);
|
|
6109
|
+
--vb-secondary-70: hsl(var(--vb-secondary-hs), 70%);
|
|
6110
|
+
--vb-secondary-80: hsl(var(--vb-secondary-hs), 80%);
|
|
6111
|
+
--vb-secondary-90: hsl(var(--vb-secondary-hs), 90%);
|
|
6112
|
+
--vb-secondary-95: hsl(var(--vb-secondary-hs), 95%);
|
|
6113
|
+
--vb-secondary-98: hsl(var(--vb-secondary-hs), 98%);
|
|
6114
|
+
--vb-secondary-100: hsl(var(--vb-secondary-hs), 100%);
|
|
6115
|
+
--vb-neutral-hs: 214deg, 20%;
|
|
6116
|
+
--vb-neutral: var(--vb-neutral-50);
|
|
6117
|
+
--vb-neutral-0: hsl(var(--vb-neutral-hs), 0%);
|
|
6118
|
+
--vb-neutral-5: hsl(var(--vb-neutral-hs), 5%);
|
|
6119
|
+
--vb-neutral-10: hsl(var(--vb-neutral-hs), 10%);
|
|
6120
|
+
--vb-neutral-12: hsl(var(--vb-neutral-hs), 12%);
|
|
6121
|
+
--vb-neutral-15: hsl(var(--vb-neutral-hs), 15%);
|
|
6122
|
+
--vb-neutral-20: hsl(var(--vb-neutral-hs), 20%);
|
|
6123
|
+
--vb-neutral-30: hsl(var(--vb-neutral-hs), 30%);
|
|
6124
|
+
--vb-neutral-40: hsl(var(--vb-neutral-hs), 40%);
|
|
6125
|
+
--vb-neutral-50: hsl(var(--vb-neutral-hs), 50%);
|
|
6126
|
+
--vb-neutral-60: hsl(var(--vb-neutral-hs), 60%);
|
|
6127
|
+
--vb-neutral-70: hsl(var(--vb-neutral-hs), 70%);
|
|
6128
|
+
--vb-neutral-80: hsl(var(--vb-neutral-hs), 80%);
|
|
6129
|
+
--vb-neutral-90: hsl(var(--vb-neutral-hs), 90%);
|
|
6130
|
+
--vb-neutral-95: hsl(var(--vb-neutral-hs), 95%);
|
|
6131
|
+
--vb-neutral-98: hsl(var(--vb-neutral-hs), 98%);
|
|
6132
|
+
--vb-neutral-100: hsl(var(--vb-neutral-hs), 100%);
|
|
6133
|
+
--vb-important-hs: 0deg, 80%;
|
|
6134
|
+
--vb-important: var(--vb-important-50);
|
|
6135
|
+
--vb-important-0: hsl(var(--vb-important-hs), 0%);
|
|
6136
|
+
--vb-important-5: hsl(var(--vb-important-hs), 5%);
|
|
6137
|
+
--vb-important-10: hsl(var(--vb-important-hs), 10%);
|
|
6138
|
+
--vb-important-12: hsl(var(--vb-important-hs), 12%);
|
|
6139
|
+
--vb-important-15: hsl(var(--vb-important-hs), 15%);
|
|
6140
|
+
--vb-important-20: hsl(var(--vb-important-hs), 20%);
|
|
6141
|
+
--vb-important-30: hsl(var(--vb-important-hs), 30%);
|
|
6142
|
+
--vb-important-40: hsl(var(--vb-important-hs), 40%);
|
|
6143
|
+
--vb-important-50: hsl(var(--vb-important-hs), 50%);
|
|
6144
|
+
--vb-important-60: hsl(var(--vb-important-hs), 60%);
|
|
6145
|
+
--vb-important-70: hsl(var(--vb-important-hs), 70%);
|
|
6146
|
+
--vb-important-80: hsl(var(--vb-important-hs), 80%);
|
|
6147
|
+
--vb-important-90: hsl(var(--vb-important-hs), 90%);
|
|
6148
|
+
--vb-important-95: hsl(var(--vb-important-hs), 95%);
|
|
6149
|
+
--vb-important-98: hsl(var(--vb-important-hs), 98%);
|
|
6150
|
+
--vb-important-100: hsl(var(--vb-important-hs), 100%);
|
|
6151
|
+
}
|
|
6152
|
+
|
|
6153
|
+
:root, .vb-theme-root {
|
|
6154
|
+
--vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
|
|
6155
|
+
--vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
|
|
6156
|
+
--vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
|
|
6157
|
+
--vb-background-hover: rgba(0, 0, 0, 0.05);
|
|
6158
|
+
--vb-background-focus: rgba(0, 0, 0, 0.05);
|
|
6159
|
+
--vb-background-active: rgba(0, 0, 0, 0.1);
|
|
6160
|
+
--vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
|
|
6161
|
+
--vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
|
|
6162
|
+
--vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
|
|
6163
|
+
--vb-border-color: rgba(0, 0, 0, 0.1);
|
|
6164
|
+
--vb-border-color-dark: rgba(0, 0, 0, 0.2);
|
|
6165
|
+
--vb-border-color-darker: rgba(0, 0, 0, 0.3);
|
|
6166
|
+
--vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
|
|
6167
|
+
--vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
|
|
6168
|
+
color-scheme: light;
|
|
6169
|
+
}
|
|
6170
|
+
@media (prefers-color-scheme: dark) {
|
|
6171
|
+
:root, .vb-theme-root {
|
|
6172
|
+
--vb-background: var(--vb-neutral-10, hsl(214, 20%, 10%));
|
|
6173
|
+
--vb-background-dark: var(--vb-neutral-12, hsl(214, 20%, 12%));
|
|
6174
|
+
--vb-background-darker: var(--vb-neutral-15, hsl(214, 20%, 15%));
|
|
6175
|
+
--vb-background-hover: rgba(255, 255, 255, 0.05);
|
|
6176
|
+
--vb-background-focus: rgba(255, 255, 255, 0.05);
|
|
6177
|
+
--vb-background-active: rgba(255, 255, 255, 0.1);
|
|
6178
|
+
--vb-foreground: var(--vb-neutral-90, hsl(214, 20%, 90%));
|
|
6179
|
+
--vb-foreground-light: var(--vb-neutral-70, hsl(214, 20%, 70%));
|
|
6180
|
+
--vb-foreground-lighter: var(--vb-neutral-50, hsl(214, 20%, 50%));
|
|
6181
|
+
--vb-border-color: rgba(255, 255, 255, 0.1);
|
|
6182
|
+
--vb-border-color-dark: rgba(255, 255, 255, 0.2);
|
|
6183
|
+
--vb-border-color-darker: rgba(255, 255, 255, 0.3);
|
|
6184
|
+
--vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 0%, 20%);
|
|
6185
|
+
--vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
|
|
6186
|
+
color-scheme: dark;
|
|
6187
|
+
}
|
|
6188
|
+
}
|
|
6189
|
+
|
|
6190
|
+
.vb-theme-light {
|
|
6191
|
+
--vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
|
|
6192
|
+
--vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
|
|
6193
|
+
--vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
|
|
6194
|
+
--vb-background-hover: rgba(0, 0, 0, 0.05);
|
|
6195
|
+
--vb-background-focus: rgba(0, 0, 0, 0.05);
|
|
6196
|
+
--vb-background-active: rgba(0, 0, 0, 0.1);
|
|
6197
|
+
--vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
|
|
6198
|
+
--vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
|
|
6199
|
+
--vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
|
|
6200
|
+
--vb-border-color: rgba(0, 0, 0, 0.1);
|
|
6201
|
+
--vb-border-color-dark: rgba(0, 0, 0, 0.2);
|
|
6202
|
+
--vb-border-color-darker: rgba(0, 0, 0, 0.3);
|
|
6203
|
+
--vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
|
|
6204
|
+
--vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
|
|
6205
|
+
color-scheme: light;
|
|
6206
|
+
}
|
|
6207
|
+
|
|
6208
|
+
.vb-theme-dark {
|
|
6209
|
+
--vb-background: var(--vb-neutral-10, hsl(214, 20%, 10%));
|
|
6210
|
+
--vb-background-dark: var(--vb-neutral-12, hsl(214, 20%, 12%));
|
|
6211
|
+
--vb-background-darker: var(--vb-neutral-15, hsl(214, 20%, 15%));
|
|
6212
|
+
--vb-background-hover: rgba(255, 255, 255, 0.05);
|
|
6213
|
+
--vb-background-focus: rgba(255, 255, 255, 0.05);
|
|
6214
|
+
--vb-background-active: rgba(255, 255, 255, 0.1);
|
|
6215
|
+
--vb-foreground: var(--vb-neutral-90, hsl(214, 20%, 90%));
|
|
6216
|
+
--vb-foreground-light: var(--vb-neutral-70, hsl(214, 20%, 70%));
|
|
6217
|
+
--vb-foreground-lighter: var(--vb-neutral-50, hsl(214, 20%, 50%));
|
|
6218
|
+
--vb-border-color: rgba(255, 255, 255, 0.1);
|
|
6219
|
+
--vb-border-color-dark: rgba(255, 255, 255, 0.2);
|
|
6220
|
+
--vb-border-color-darker: rgba(255, 255, 255, 0.3);
|
|
6221
|
+
--vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 0%, 20%);
|
|
6222
|
+
--vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
|
|
6223
|
+
color-scheme: dark;
|
|
6224
|
+
}
|
|
6225
|
+
|
|
6226
|
+
:root {
|
|
6227
|
+
--vb-breakpoint-xs: 480px;
|
|
6228
|
+
--vb-breakpoint-sm: 620px;
|
|
6229
|
+
--vb-breakpoint-md: 760px;
|
|
6230
|
+
--vb-breakpoint-lg: 990px;
|
|
6231
|
+
--vb-breakpoint-xl: 1380px;
|
|
6232
|
+
}
|
|
6233
|
+
|
|
6234
|
+
:root {
|
|
6235
|
+
--vb-border-radius: 0.25rem;
|
|
6236
|
+
--vb-border-radius-lg: 0.5rem;
|
|
6237
|
+
--vb-border-radius-circle: 9999px;
|
|
6238
|
+
}
|
|
6239
|
+
|
|
6240
|
+
:root {
|
|
6241
|
+
--vb-transition-duration: 0.3s;
|
|
6242
|
+
--vb-transition-duration-short: 0.15s;
|
|
6243
|
+
--vb-transition-duration-long: 0.6s;
|
|
6244
|
+
--vb-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
6245
|
+
}
|
|
6246
|
+
|
|
5948
6247
|
/*# sourceMappingURL=index.css.map */
|