1 |
|
2 |
|
3 |
|
4 | @import "~@blueprintjs/colors/lib/scss/colors";
|
5 | @import "~@blueprintjs/core/src/components/popover/common";
|
6 | @import "./common";
|
7 |
|
8 | $cell-size: $pt-grid-size * 3 !default;
|
9 | $header-height: $pt-grid-size * 4 !default;
|
10 | $header-margin: ($header-height - $pt-input-height) * 0.5 !default;
|
11 |
|
12 | @mixin calendar-day() {
|
13 | display: table-cell;
|
14 | height: $datepicker-day-size;
|
15 | line-height: 1;
|
16 | text-align: center;
|
17 | vertical-align: middle;
|
18 | width: $datepicker-day-size;
|
19 | }
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | .#{$ns}-datepicker {
|
26 | background: $datepicker-background-color;
|
27 | border-radius: $pt-border-radius;
|
28 | display: flex;
|
29 | padding: $datepicker-padding;
|
30 | position: relative;
|
31 | user-select: none;
|
32 |
|
33 | .DayPicker {
|
34 | display: inline-block;
|
35 | min-width: $datepicker-min-width;
|
36 | position: relative;
|
37 | vertical-align: top;
|
38 |
|
39 | &:focus {
|
40 | outline: none;
|
41 | }
|
42 | }
|
43 |
|
44 | .#{$ns}-datepicker-day-wrapper {
|
45 | border-radius: $pt-border-radius;
|
46 | padding: 7px;
|
47 | }
|
48 |
|
49 | .DayPicker-Month {
|
50 | border-collapse: collapse;
|
51 | border-spacing: 0;
|
52 | display: inline-table;
|
53 | margin: 0 $datepicker-padding $datepicker-padding;
|
54 | user-select: none;
|
55 |
|
56 |
|
57 | & + & {
|
58 | margin-left: $pt-grid-size;
|
59 | }
|
60 | }
|
61 |
|
62 | .DayPicker-Caption {
|
63 | display: table-caption;
|
64 | }
|
65 |
|
66 | .DayPicker-Weekdays {
|
67 | display: table-header-group;
|
68 | }
|
69 |
|
70 | .DayPicker-WeekdaysRow {
|
71 | display: table-row;
|
72 | }
|
73 |
|
74 | .DayPicker-Weekday {
|
75 | @include calendar-day();
|
76 | font-weight: 600;
|
77 | padding-top: $datepicker-padding;
|
78 |
|
79 |
|
80 | abbr[title] {
|
81 | text-decoration: none;
|
82 | }
|
83 | }
|
84 |
|
85 | .DayPicker-Body {
|
86 | display: table-row-group;
|
87 | }
|
88 |
|
89 | .DayPicker-Week {
|
90 | display: table-row;
|
91 | }
|
92 |
|
93 | .DayPicker-WeekNumber {
|
94 | @include calendar-day();
|
95 | color: $pt-text-color-disabled;
|
96 | font-size: $pt-font-size;
|
97 | }
|
98 |
|
99 | .DayPicker-Day {
|
100 | @include calendar-day();
|
101 | border-radius: $pt-border-radius;
|
102 | cursor: pointer;
|
103 |
|
104 |
|
105 | &.DayPicker-Day--outside {
|
106 | color: $pt-text-color-disabled;
|
107 | }
|
108 |
|
109 | &.DayPicker-Day--isToday {
|
110 | .#{$ns}-datepicker-day-wrapper {
|
111 | border: 1px solid $pt-divider-black;
|
112 | }
|
113 | }
|
114 |
|
115 | &:hover,
|
116 | &:focus {
|
117 | background: $datepicker-day-background-color-hover;
|
118 | color: $pt-text-color;
|
119 | }
|
120 |
|
121 | &:active {
|
122 | background: $datepicker-day-background-color-active;
|
123 | }
|
124 |
|
125 | &.DayPicker-Day--selected {
|
126 | background-color: $blue3;
|
127 | border-radius: $pt-border-radius;
|
128 | color: $white;
|
129 |
|
130 | &:hover {
|
131 | background-color: $blue2;
|
132 | }
|
133 |
|
134 | &:active {
|
135 | background-color: $blue1;
|
136 | }
|
137 | }
|
138 |
|
139 |
|
140 | &.DayPicker-Day--disabled {
|
141 | background: none;
|
142 | color: $pt-text-color-disabled;
|
143 | cursor: not-allowed;
|
144 | }
|
145 | }
|
146 | }
|
147 |
|
148 | .#{$ns}-datepicker-navbar {
|
149 | align-items: center;
|
150 | display: flex;
|
151 | height: $pt-button-height;
|
152 | left: 0;
|
153 | position: absolute;
|
154 | right: 0;
|
155 | top: 0;
|
156 |
|
157 | > .DayPicker-NavButton--prev {
|
158 | margin-right: auto;
|
159 | }
|
160 |
|
161 | > .DayPicker-NavButton--next {
|
162 | margin-left: auto;
|
163 | }
|
164 | }
|
165 |
|
166 | .#{$ns}-datepicker-caption {
|
167 | @include pt-flex-container(row, $fill: ":first-child");
|
168 | justify-content: space-between;
|
169 | margin: 0 ($pt-button-height - $datepicker-padding) $datepicker-padding;
|
170 |
|
171 |
|
172 | select {
|
173 | font-weight: 600;
|
174 | padding-left: $datepicker-padding;
|
175 | padding-right: $pt-icon-size-standard;
|
176 |
|
177 | + .#{$ns}-icon {
|
178 | right: 2px;
|
179 | }
|
180 | }
|
181 |
|
182 | + .#{$ns}-divider {
|
183 | margin: 0;
|
184 | }
|
185 | }
|
186 |
|
187 | .#{$ns}-datepicker-month-select {
|
188 | flex-shrink: 1;
|
189 | }
|
190 |
|
191 | .#{$ns}-datepicker-year-select {
|
192 | flex-shrink: 1;
|
193 | min-width: 60px;
|
194 | }
|
195 |
|
196 | .#{$ns}-datepicker-caption-measure {
|
197 | font-weight: 600;
|
198 | padding-left: $datepicker-padding;
|
199 | }
|
200 |
|
201 | .#{$ns}-datepicker-footer {
|
202 | display: flex;
|
203 | justify-content: space-between;
|
204 | }
|
205 |
|
206 | .#{$ns}-dark .#{$ns}-datepicker {
|
207 | background: $dark-datepicker-background-color;
|
208 |
|
209 | .DayPicker-WeekNumber {
|
210 | color: $pt-dark-text-color-disabled;
|
211 | }
|
212 |
|
213 | .DayPicker-Day {
|
214 | &.DayPicker-Day--outside {
|
215 | color: $pt-dark-text-color-disabled;
|
216 | }
|
217 |
|
218 | &.DayPicker-Day--isToday {
|
219 | .#{$ns}-datepicker-day-wrapper {
|
220 | border: 1px solid $pt-dark-divider-white;
|
221 | }
|
222 | }
|
223 |
|
224 | &:hover,
|
225 | &:focus {
|
226 | background: $dark-datepicker-day-background-color-hover;
|
227 | color: $white;
|
228 | }
|
229 |
|
230 | &:active {
|
231 | background: $dark-datepicker-day-background-color-active;
|
232 | }
|
233 |
|
234 | &.DayPicker-Day--selected {
|
235 | background-color: $blue3;
|
236 |
|
237 | &:hover {
|
238 | background-color: $blue2;
|
239 | }
|
240 |
|
241 | &:active {
|
242 | background-color: $blue1;
|
243 | }
|
244 | }
|
245 |
|
246 | &.DayPicker-Day--disabled {
|
247 | background: none;
|
248 | color: $pt-dark-text-color-disabled;
|
249 | }
|
250 | }
|
251 |
|
252 | .#{$ns}-datepicker-footer {
|
253 | border-top-color: $pt-dark-divider-black;
|
254 | }
|
255 | }
|
256 |
|
257 | .#{$ns}-datepicker-timepicker-wrapper {
|
258 | align-items: center;
|
259 | display: flex;
|
260 | flex-direction: column;
|
261 | }
|