Skip to content

Commit 0d4e9e8

Browse files
authored
Add variables in readme
1 parent 8842665 commit 0d4e9e8

File tree

1 file changed

+58
-1
lines changed

1 file changed

+58
-1
lines changed

README.md

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,65 @@ circle | Boolean / This is selected are circle or area
4646
and customize style with css variables
4747

4848
<img src="./resources/customize.png">
49-
DEMO (https://edisdev.github.io/vue-datepicker-ui)
5049

50+
```css
51+
element {
52+
--v-calendar-picker-color: #fff;
53+
--v-calendar-input-bg-color: #fff;
54+
--v-calendar-input-bg-disable-color:rgb(245, 245, 245);
55+
--v-calendar-input-text-disable-color:#b8b8b9;
56+
--v-calendar-select-bg-color: #fff;
57+
--v-calendar-border-color: #eaeaeb;
58+
--v-calendar-triangle-color: #eaeaeb;
59+
--v-calendar-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
60+
--v-calendar-top-shadow: 3px -14px 30px 0px rgba(0, 0, 0, 0.2);
61+
--v-calendar-text-color: #7b8187;
62+
--v-calendar-action-color: #7b8187;
63+
--v-calendar-text-disabled-color: #b8b8b9;
64+
--v-calendar-view-button-color: #7b8187;
65+
--v-calendar-view-button-font-weight: 400;
66+
--v-calendar-view-button-font-size: 1rem;
67+
--v-calendar-datepicker-icon-color: #1bba67;
68+
--v-calendar-datepicker-icon-size: 1.1rem;
69+
--v-calendar-active-bg-color: #1bba67;
70+
--v-calendar-active-text-color: #fff;
71+
--v-calendar-range-bg-color: #edfff9;
72+
--v-calendar-range-text-color: #7b8187;
73+
--v-calendar-range-radius: 100%;
74+
--v-calendar-day-hover-bg-color: #eaeaeb;
75+
--v-calendar-day-width: 40px;
76+
--v-calendar-day-height: 40px;
77+
--v-calendar-day-font-size: 0.9rem;
78+
--v-calendar-day-font-weight: 400;
79+
--v-calendar-day-name-font-size: 0.9rem;
80+
--v-calendar-day-name-font-weight: 500;
81+
--v-calendar-day-name-color: #7b8187;
82+
--v-calendar-input-border: 1px solid #eaeaeb;
83+
--v-calendar-input-text-color: #7b8187;
84+
--v-calendar-input-font-size: 0.9rem;
85+
--v-calendar-input-font-weight: 400;
86+
--v-calendar-content-radius: 0px;
87+
--v-calendar-year-font-size: 1.1rem;
88+
--v-calendar-year-color: #7b8187;
89+
--v-calendar-year-font-weight: 400;
90+
--v-calendar-year-disabled-color: #b8b8b9;
91+
--v-calendar-year-disabled-bg-color: transparent;
92+
--v-calendar-year-padding: 10px;
93+
--v-calendar-year-border: none;
94+
--v-calendar-year-border-radius: none;
95+
--v-calendar-month-font-size: 1.1rem;
96+
--v-calendar-month-color: #7b8187;
97+
--v-calendar-month-font-weight: 400;
98+
--v-calendar-month-disabled-color: #b8b8b9;
99+
--v-calendar-month-disabled-bg-color: transparent;
100+
--v-calendar-month-padding: 8px;
101+
--v-calendar-month-border: none;
102+
--v-calendar-month-border-radius: none;
103+
}
104+
```
105+
106+
107+
DEMO (https://edisdev.github.io/vue-datepicker-ui)
51108

52109
#### note:
53110
**date-format** object values is consists to toLocaleString in js. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString).

0 commit comments

Comments
 (0)