@djcali570/component-lib 0.0.3 → 0.0.5
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 +7 -56
- package/dist/Accordion5.svelte +147 -0
- package/dist/Accordion5.svelte.d.ts +14 -0
- package/dist/DatePicker5.svelte +117 -30
- package/dist/DropDown5.svelte +329 -0
- package/dist/DropDown5.svelte.d.ts +26 -0
- package/dist/Input5.svelte +412 -0
- package/dist/Input5.svelte.d.ts +20 -0
- package/dist/TimePicker5.svelte +687 -0
- package/dist/TimePicker5.svelte.d.ts +14 -0
- package/dist/index.d.ts +5 -1
- package/dist/index.js +5 -1
- package/package.json +66 -69
- package/dist/app.css +0 -1
package/README.md
CHANGED
|
@@ -1,58 +1,9 @@
|
|
|
1
|
-
#
|
|
1
|
+
# DJCali570 Component Library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Components:
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
# create a new project in the current directory
|
|
13
|
-
npx sv create
|
|
14
|
-
|
|
15
|
-
# create a new project in my-app
|
|
16
|
-
npx sv create my-app
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Developing
|
|
20
|
-
|
|
21
|
-
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npm run dev
|
|
25
|
-
|
|
26
|
-
# or start the server and open the app in a new browser tab
|
|
27
|
-
npm run dev -- --open
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
|
|
31
|
-
|
|
32
|
-
## Building
|
|
33
|
-
|
|
34
|
-
To build your library:
|
|
35
|
-
|
|
36
|
-
```bash
|
|
37
|
-
npm run package
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
To create a production version of your showcase app:
|
|
41
|
-
|
|
42
|
-
```bash
|
|
43
|
-
npm run build
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
You can preview the production build with `npm run preview`.
|
|
47
|
-
|
|
48
|
-
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
|
|
49
|
-
|
|
50
|
-
## Publishing
|
|
51
|
-
|
|
52
|
-
Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
|
|
53
|
-
|
|
54
|
-
To publish your library to [npm](https://www.npmjs.com):
|
|
55
|
-
|
|
56
|
-
```bash
|
|
57
|
-
npm publish
|
|
58
|
-
```
|
|
5
|
+
### Date Picker
|
|
6
|
+
### Time Picker
|
|
7
|
+
### Input
|
|
8
|
+
### Dropdown
|
|
9
|
+
### Accordion
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
|
|
4
|
+
// Define colorScheme type
|
|
5
|
+
interface Accordion5ColorScheme {
|
|
6
|
+
bgColor: string;
|
|
7
|
+
textColor: string;
|
|
8
|
+
triggerColor: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Props with typed colorScheme
|
|
12
|
+
let {
|
|
13
|
+
colorScheme: partialColorScheme = {},
|
|
14
|
+
title = 'Title',
|
|
15
|
+
panel
|
|
16
|
+
}: {
|
|
17
|
+
colorScheme?: Partial<Accordion5ColorScheme>;
|
|
18
|
+
title?: string;
|
|
19
|
+
panel: Snippet;
|
|
20
|
+
} = $props();
|
|
21
|
+
|
|
22
|
+
// Default colorScheme
|
|
23
|
+
const defaultColorScheme: Accordion5ColorScheme = {
|
|
24
|
+
bgColor: '#121212',
|
|
25
|
+
textColor: '#D6D6D6',
|
|
26
|
+
triggerColor: '#D6D6D6'
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
// Merge partial colorScheme with defaults
|
|
30
|
+
const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
|
|
31
|
+
|
|
32
|
+
let status = $state(false);
|
|
33
|
+
let panelHeight = $state('0px'); // Store dynamic height
|
|
34
|
+
let panelRef: HTMLDivElement | undefined = $state(); // Reference to inner panel
|
|
35
|
+
|
|
36
|
+
// Toggle panel and update height
|
|
37
|
+
function showPanel() {
|
|
38
|
+
status = !status;
|
|
39
|
+
if (status && panelRef) {
|
|
40
|
+
// Set max-height to content height when opening
|
|
41
|
+
panelHeight = `${panelRef.scrollHeight}px`;
|
|
42
|
+
} else {
|
|
43
|
+
// Reset to 0 when closing
|
|
44
|
+
panelHeight = '0px';
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// Update height on content change (if panel content is dynamic)
|
|
49
|
+
$effect(() => {
|
|
50
|
+
if (status && panelRef) {
|
|
51
|
+
panelHeight = `${panelRef.scrollHeight}px`;
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
<div
|
|
57
|
+
class="accordion5"
|
|
58
|
+
style="
|
|
59
|
+
--acc5-bgColor: {colorScheme.bgColor};
|
|
60
|
+
--acc5-textColor: {colorScheme.textColor};
|
|
61
|
+
--acc5-triggerColor: {colorScheme.triggerColor};
|
|
62
|
+
"
|
|
63
|
+
>
|
|
64
|
+
<button onclick={showPanel}>
|
|
65
|
+
<div class="panel-head">
|
|
66
|
+
<div class="panel-title">
|
|
67
|
+
<div>{title}</div>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="panel-head-icon-container">
|
|
70
|
+
<div class="panel-head-icon" class:open={status}>
|
|
71
|
+
<svg viewBox="0 0 200 200">
|
|
72
|
+
<path
|
|
73
|
+
fill="currentColor"
|
|
74
|
+
d="M96.5,63.4c1.9-1.9,5.1-1.9,7.1,0l65.8,65.8c1,1,1.5,2.2,1.5,3.5s-0.5,2.6-1.5,3.5c-1.9,1.9-5.1,1.9-7.1,0L100,74.1L37.5,136.6c-1.9,1.9-5.1,1.9-7.1,0c-0.9-1.1-1.4-2.3-1.4-3.6c0-1.3,0.5-2.6,1.5-3.5L96.5,63.4z"
|
|
75
|
+
/>
|
|
76
|
+
</svg>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</button>
|
|
81
|
+
<div class="accPanel" class:open={status} style="max-height: {panelHeight}">
|
|
82
|
+
<div class="accPanel-inner" bind:this={panelRef}>
|
|
83
|
+
{@render panel()}
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<style>
|
|
89
|
+
.accordion5 {
|
|
90
|
+
width: 100%;
|
|
91
|
+
max-width: 600px;
|
|
92
|
+
margin: 0 auto;
|
|
93
|
+
border-radius: 0.5rem;
|
|
94
|
+
background-color: var(--acc5-bgColor);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
button {
|
|
98
|
+
width: 100%;
|
|
99
|
+
padding: 0.5rem;
|
|
100
|
+
font-size: 1rem;
|
|
101
|
+
cursor: pointer;
|
|
102
|
+
border: none;
|
|
103
|
+
text-align: left;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.panel-head {
|
|
107
|
+
width: 100%;
|
|
108
|
+
display: grid;
|
|
109
|
+
grid-template-columns: 1fr min-content;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.panel-title {
|
|
113
|
+
display: flex;
|
|
114
|
+
justify-content: flex-start;
|
|
115
|
+
align-items: center;
|
|
116
|
+
width: 100%;
|
|
117
|
+
height: 100%;
|
|
118
|
+
color: var(--acc5-textColor);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.panel-head-icon-container {
|
|
122
|
+
display: flex;
|
|
123
|
+
justify-content: center;
|
|
124
|
+
align-items: center;
|
|
125
|
+
width: 1.5rem;
|
|
126
|
+
height: 1.5rem;
|
|
127
|
+
}
|
|
128
|
+
.panel-head-icon {
|
|
129
|
+
width: 1.2rem;
|
|
130
|
+
height: 1.2rem;
|
|
131
|
+
color: var(--acc5-triggerColor);
|
|
132
|
+
transition: transform 400ms ease-in-out;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.accPanel {
|
|
136
|
+
overflow: hidden;
|
|
137
|
+
max-height: 0;
|
|
138
|
+
transition: max-height 400ms ease-in-out;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.accPanel-inner {
|
|
142
|
+
padding: 1rem;
|
|
143
|
+
}
|
|
144
|
+
.panel-head-icon.open {
|
|
145
|
+
transform: rotate(180deg);
|
|
146
|
+
}
|
|
147
|
+
</style>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
interface Accordion5ColorScheme {
|
|
3
|
+
bgColor: string;
|
|
4
|
+
textColor: string;
|
|
5
|
+
triggerColor: string;
|
|
6
|
+
}
|
|
7
|
+
type $$ComponentProps = {
|
|
8
|
+
colorScheme?: Partial<Accordion5ColorScheme>;
|
|
9
|
+
title?: string;
|
|
10
|
+
panel: Snippet;
|
|
11
|
+
};
|
|
12
|
+
declare const Accordion5: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
13
|
+
type Accordion5 = ReturnType<typeof Accordion5>;
|
|
14
|
+
export default Accordion5;
|
package/dist/DatePicker5.svelte
CHANGED
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
import { browser } from '$app/environment';
|
|
3
3
|
import { fly } from 'svelte/transition';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Date Picker 5 v0.0.1
|
|
7
|
+
*/
|
|
8
|
+
|
|
6
9
|
let {
|
|
7
10
|
colorScheme = {
|
|
8
11
|
labelTextColor: '#989A9A',
|
|
@@ -319,18 +322,18 @@
|
|
|
319
322
|
readonly
|
|
320
323
|
bind:value={dateText}
|
|
321
324
|
/>
|
|
322
|
-
<div class="
|
|
325
|
+
<div class="dpicker-closeBtn-container">
|
|
323
326
|
{#if dateText && !disabled}
|
|
324
327
|
<button
|
|
325
328
|
aria-label="Close Date Picker"
|
|
326
329
|
id="dpicker-CloseBtn-{id}"
|
|
327
|
-
class="dpicker-closeBtn
|
|
330
|
+
class="dpicker-closeBtn"
|
|
328
331
|
onclick={(e) => {
|
|
329
332
|
e.stopPropagation();
|
|
330
333
|
clearDate();
|
|
331
334
|
}}
|
|
332
335
|
>
|
|
333
|
-
<div class="
|
|
336
|
+
<div class="close-btn">
|
|
334
337
|
<svg
|
|
335
338
|
version="1.1"
|
|
336
339
|
id="Layer_1"
|
|
@@ -364,21 +367,18 @@
|
|
|
364
367
|
style="box-shadow: 0px 1px 16px 0px rgba(0,0,0,0.12);"
|
|
365
368
|
transition:fly={{ y: 10 }}
|
|
366
369
|
>
|
|
367
|
-
<div
|
|
368
|
-
<div class="
|
|
370
|
+
<div style="height:100%;">
|
|
371
|
+
<div class="month-block">
|
|
369
372
|
<button
|
|
370
373
|
id="chev-prev-{id}"
|
|
371
374
|
type="button"
|
|
372
375
|
aria-label="Previous Month"
|
|
373
|
-
class="
|
|
376
|
+
class="month-block-btn"
|
|
374
377
|
disabled={showPrevMonthButton}
|
|
375
378
|
onclick={prevMonth}
|
|
376
379
|
>
|
|
377
|
-
<div
|
|
378
|
-
class="
|
|
379
|
-
class:disabled={showPrevMonthButton}
|
|
380
|
-
>
|
|
381
|
-
<div class="size-5">
|
|
380
|
+
<div class="chev" class:disabled={showPrevMonthButton}>
|
|
381
|
+
<div class="chev-svg">
|
|
382
382
|
<svg
|
|
383
383
|
version="1.1"
|
|
384
384
|
id="Layer_1"
|
|
@@ -399,7 +399,7 @@
|
|
|
399
399
|
</div>
|
|
400
400
|
</div>
|
|
401
401
|
</button>
|
|
402
|
-
<div class="
|
|
402
|
+
<div class="month-block-month">
|
|
403
403
|
{monthNames[viewDate.getMonth()]}
|
|
404
404
|
{viewDate.getFullYear()}
|
|
405
405
|
</div>
|
|
@@ -407,15 +407,12 @@
|
|
|
407
407
|
id="chev-next-{id}"
|
|
408
408
|
type="button"
|
|
409
409
|
aria-label="Next Month"
|
|
410
|
-
class="
|
|
410
|
+
class="month-block-btn"
|
|
411
411
|
disabled={showNextMonthButton}
|
|
412
412
|
onclick={nextMonth}
|
|
413
413
|
>
|
|
414
|
-
<div
|
|
415
|
-
class="
|
|
416
|
-
class:disabled={showNextMonthButton}
|
|
417
|
-
>
|
|
418
|
-
<div class="size-5">
|
|
414
|
+
<div class="chev" class:disabled={showNextMonthButton}>
|
|
415
|
+
<div class="chev-svg">
|
|
419
416
|
<svg
|
|
420
417
|
version="1.1"
|
|
421
418
|
id="Layer_1"
|
|
@@ -437,21 +434,21 @@
|
|
|
437
434
|
</div>
|
|
438
435
|
</button>
|
|
439
436
|
</div>
|
|
440
|
-
<div class="
|
|
437
|
+
<div class="week">
|
|
441
438
|
{#each weekAbv as weekday}
|
|
442
|
-
<div class="
|
|
439
|
+
<div class="week-days">
|
|
443
440
|
{weekday}
|
|
444
441
|
</div>
|
|
445
442
|
{/each}
|
|
446
443
|
</div>
|
|
447
|
-
<div class="
|
|
444
|
+
<div class="calendar-days">
|
|
448
445
|
{#each calendarDays as date, index (index)}
|
|
449
|
-
<div id="day-{index}" class="
|
|
446
|
+
<div id="day-{index}" class="calendar-days-day">
|
|
450
447
|
{#if date}
|
|
451
448
|
<button
|
|
452
449
|
id="day-btn-{index}"
|
|
453
450
|
type="button"
|
|
454
|
-
class="
|
|
451
|
+
class="calendar-day"
|
|
455
452
|
class:highlighted={(selectedDate &&
|
|
456
453
|
date.toDateString() === selectedDate.toDateString()) ||
|
|
457
454
|
(!selectedDate && date.toDateString() === today.toDateString())}
|
|
@@ -467,7 +464,7 @@
|
|
|
467
464
|
{date.getDate()}
|
|
468
465
|
</button>
|
|
469
466
|
{:else}
|
|
470
|
-
<div class="
|
|
467
|
+
<div class="calendar-day-else"></div>
|
|
471
468
|
{/if}
|
|
472
469
|
</div>
|
|
473
470
|
{/each}
|
|
@@ -483,6 +480,7 @@
|
|
|
483
480
|
display: inline-block;
|
|
484
481
|
width: 100%;
|
|
485
482
|
color: var(--dpicker-textColor);
|
|
483
|
+
font-family: Arial, sans-serif;
|
|
486
484
|
}
|
|
487
485
|
.outer {
|
|
488
486
|
background-color: var(--dpicker-inputBgColor);
|
|
@@ -506,6 +504,10 @@
|
|
|
506
504
|
position: relative;
|
|
507
505
|
box-sizing: border-box;
|
|
508
506
|
}
|
|
507
|
+
.close-btn {
|
|
508
|
+
height: 14px;
|
|
509
|
+
width: 14px;
|
|
510
|
+
}
|
|
509
511
|
.dpicker-title {
|
|
510
512
|
line-height: 20px;
|
|
511
513
|
color: var(--dpicker-labelTextColor);
|
|
@@ -532,6 +534,24 @@
|
|
|
532
534
|
appearance: none;
|
|
533
535
|
-webkit-appearance: none;
|
|
534
536
|
}
|
|
537
|
+
.dpicker-closeBtn-container {
|
|
538
|
+
display: flex;
|
|
539
|
+
justify-content: center;
|
|
540
|
+
align-items: center;
|
|
541
|
+
padding: 0.75rem;
|
|
542
|
+
}
|
|
543
|
+
.dpicker-closeBtn {
|
|
544
|
+
display: none;
|
|
545
|
+
width: 1.5rem;
|
|
546
|
+
height: 1.5rem;
|
|
547
|
+
justify-content: center;
|
|
548
|
+
align-items: center;
|
|
549
|
+
color: var(--dpicker-clearColor);
|
|
550
|
+
border-radius: calc(infinity * 1px);
|
|
551
|
+
background-color: transparent;
|
|
552
|
+
border: none;
|
|
553
|
+
cursor: pointer;
|
|
554
|
+
}
|
|
535
555
|
.dpicker-input {
|
|
536
556
|
display: flex;
|
|
537
557
|
opacity: 1;
|
|
@@ -547,10 +567,6 @@
|
|
|
547
567
|
border-top-right-radius: 0.5rem /* 8px */;
|
|
548
568
|
border-bottom-right-radius: 0.5rem /* 8px */;
|
|
549
569
|
}
|
|
550
|
-
.dpicker-closeBtn {
|
|
551
|
-
display: none;
|
|
552
|
-
color: var(--dpicker-clearColor);
|
|
553
|
-
}
|
|
554
570
|
|
|
555
571
|
.dpicker-closeBtn:hover {
|
|
556
572
|
background-color: var(--dpicker-clearHoverColor);
|
|
@@ -576,19 +592,76 @@
|
|
|
576
592
|
background-color: var(--dpicker-bgColor);
|
|
577
593
|
}
|
|
578
594
|
.month-block {
|
|
595
|
+
display: grid;
|
|
596
|
+
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
579
597
|
width: 100%;
|
|
580
598
|
background-color: var(--picker-monthBgColor);
|
|
581
599
|
}
|
|
600
|
+
.month-block-btn {
|
|
601
|
+
display: flex;
|
|
602
|
+
width: 100%;
|
|
603
|
+
justify-content: center;
|
|
604
|
+
align-items: center;
|
|
605
|
+
grid-column: span 1 / span 1;
|
|
606
|
+
cursor: pointer;
|
|
607
|
+
border: none;
|
|
608
|
+
background-color: transparent;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.month-block-month {
|
|
612
|
+
grid-column: span 5 / span 5;
|
|
613
|
+
display: flex;
|
|
614
|
+
justify-content: center;
|
|
615
|
+
align-items: center;
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
.chev {
|
|
619
|
+
display: flex;
|
|
620
|
+
align-items: center;
|
|
621
|
+
justify-content: center;
|
|
622
|
+
width: 32px;
|
|
623
|
+
height: 32px;
|
|
624
|
+
border-radius: calc(infinity * 1px);
|
|
625
|
+
}
|
|
582
626
|
.chev:hover {
|
|
583
627
|
background-color: var(--dpicker-clearHoverColor);
|
|
584
628
|
}
|
|
585
|
-
|
|
586
629
|
.chev.disabled {
|
|
587
630
|
color: var(--dpicker-inactiveDayColor);
|
|
588
631
|
}
|
|
632
|
+
.chev-svg {
|
|
633
|
+
width: 1.25rem;
|
|
634
|
+
height: 1.25rem;
|
|
635
|
+
color: var(--dpicker-textColor);
|
|
636
|
+
}
|
|
637
|
+
.calendar-days {
|
|
638
|
+
display: grid;
|
|
639
|
+
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
640
|
+
grid-template-rows: repeat(6, minmax(0, 1fr));
|
|
641
|
+
}
|
|
642
|
+
.calendar-days-day {
|
|
643
|
+
display: flex;
|
|
644
|
+
justify-content: center;
|
|
645
|
+
align-items: center;
|
|
646
|
+
}
|
|
589
647
|
.calendar-day {
|
|
648
|
+
display: flex;
|
|
649
|
+
justify-content: center;
|
|
650
|
+
align-items: center;
|
|
651
|
+
height: 2.5rem;
|
|
652
|
+
width: 2.5rem;
|
|
590
653
|
color: var(--dpicker-textColor);
|
|
591
654
|
border-radius: 50%;
|
|
655
|
+
background-color: transparent;
|
|
656
|
+
border: none;
|
|
657
|
+
cursor: pointer;
|
|
658
|
+
}
|
|
659
|
+
.calendar-day-else {
|
|
660
|
+
display: flex;
|
|
661
|
+
justify-content: center;
|
|
662
|
+
align-items: center;
|
|
663
|
+
height: 2.5rem;
|
|
664
|
+
width: 2.5rem;
|
|
592
665
|
}
|
|
593
666
|
.calendar-day:hover:not(:disabled) {
|
|
594
667
|
border: 1px solid var(--dpicker-textColor);
|
|
@@ -597,9 +670,12 @@
|
|
|
597
670
|
background-color: var(--dpicker-selectedDayBgColor);
|
|
598
671
|
color: var(--dpicker-selectedDayTextColor);
|
|
599
672
|
opacity: 1 !important; /* Ensure full opacity for highlighted dates */
|
|
673
|
+
border: none;
|
|
600
674
|
}
|
|
601
675
|
|
|
602
676
|
.other-month:not(.highlighted) {
|
|
677
|
+
background-color: transparent;
|
|
678
|
+
border: none;
|
|
603
679
|
color: var(--dpicker-textColor);
|
|
604
680
|
opacity: 0.65;
|
|
605
681
|
}
|
|
@@ -622,4 +698,15 @@
|
|
|
622
698
|
opacity: 0.5;
|
|
623
699
|
cursor: not-allowed;
|
|
624
700
|
}
|
|
701
|
+
.week {
|
|
702
|
+
display: grid;
|
|
703
|
+
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
704
|
+
}
|
|
705
|
+
.week-days {
|
|
706
|
+
display: flex;
|
|
707
|
+
justify-content: center;
|
|
708
|
+
align-items: center;
|
|
709
|
+
font-size: 0.875rem;
|
|
710
|
+
color: var(--dpicker-textColor);
|
|
711
|
+
}
|
|
625
712
|
</style>
|