1 | @import "../core/index-noreset.scss";
|
2 | @import "../calendar2/scss/variable.scss";
|
3 | @import "../calendar2/scss/mixin.scss";
|
4 | @import "../input/scss/variable.scss";
|
5 | @import "../input/scss/mixin.scss";
|
6 | @import "scss/variable";
|
7 |
|
8 | @import "scss/footer.scss";
|
9 | @import "./rtl.scss";
|
10 |
|
11 | #{$date-picker2-prefix} {
|
12 | outline: none;
|
13 | display: inline-table;
|
14 | position: relative;
|
15 | width: inherit;
|
16 |
|
17 | &-overlay {
|
18 | vertical-align: top;
|
19 | padding: 4px 0px;
|
20 | }
|
21 |
|
22 | &-overlay-range {
|
23 | padding: 12px 0px;
|
24 | }
|
25 |
|
26 | &-wrapper {
|
27 | box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .12);
|
28 | background-color: $color-white;
|
29 | border: 1px solid $color-line1-1;
|
30 | border-radius: $corner-1;
|
31 |
|
32 | #{$calendar2-prefix} {
|
33 | &-panel {
|
34 | border-radius: $corner-1;
|
35 | }
|
36 | &-body {
|
37 | width: 272px;
|
38 | }
|
39 | &-cell::before {
|
40 | content: "";
|
41 | position: absolute;
|
42 | top: 50%;
|
43 | right: 0px;
|
44 | left: 0px;
|
45 | z-index: 1;
|
46 | height: 24px;
|
47 | transform: translateY(-50%);
|
48 | }
|
49 | &-cell:last-child::before {
|
50 | border-top-right-radius: 2px;
|
51 | border-bottom-right-radius: 2px;
|
52 | right: 8px;
|
53 | }
|
54 | &-cell:first-child::before {
|
55 | border-top-left-radius: 2px;
|
56 | border-bottom-left-radius: 2px;
|
57 | left: 8px;
|
58 | }
|
59 | }
|
60 | }
|
61 |
|
62 | &-input {
|
63 | display: inline-flex;
|
64 | align-items: center;
|
65 | outline: none;
|
66 | box-sizing: border-box;
|
67 | border: $input-border-width solid $input-border-color;
|
68 | vertical-align: middle;
|
69 | width: inherit;
|
70 | background-color: $input-bg-color;
|
71 |
|
72 | #{$input-prefix} {
|
73 | border: none;
|
74 |
|
75 | flex-basis: 100%;
|
76 | height: 100%;
|
77 | width: 100%;
|
78 | input {
|
79 | height: 100%;
|
80 | width: auto;
|
81 | }
|
82 | }
|
83 |
|
84 | &#{$date-picker2-prefix}-input-small {
|
85 | @include input-size(
|
86 | $form-element-small-height,
|
87 | $input-s-padding,
|
88 | $form-element-small-font-size,
|
89 | $input-s-label-padding-left,
|
90 | $input-s-icon-padding-right
|
91 | );
|
92 | @include input-icon-size($form-element-small-icon-size);
|
93 | @include input-border-radius($form-element-small-corner);
|
94 | }
|
95 |
|
96 | &#{$date-picker2-prefix}-input-medium {
|
97 | @include input-size(
|
98 | $form-element-medium-height,
|
99 | $input-m-padding,
|
100 | $form-element-medium-font-size,
|
101 | $input-m-label-padding-left,
|
102 | $input-m-icon-padding-right
|
103 | );
|
104 | @include input-icon-size($form-element-medium-icon-size);
|
105 | @include input-border-radius($form-element-medium-corner);
|
106 | }
|
107 |
|
108 | &#{$date-picker2-prefix}-input-large {
|
109 | @include input-size(
|
110 | $form-element-large-height,
|
111 | $input-l-padding,
|
112 | $form-element-large-font-size,
|
113 | $input-l-label-padding-left,
|
114 | $input-l-icon-padding-right
|
115 | );
|
116 | @include input-icon-size($form-element-large-icon-size);
|
117 | @include input-border-radius($form-element-large-corner);
|
118 | }
|
119 |
|
120 | &:hover {
|
121 | border-color: $input-hover-border-color;
|
122 | background-color: $input-hover-bg-color;
|
123 | }
|
124 |
|
125 | &#{$date-picker2-prefix}-input-focus {
|
126 | border-color: $input-focus-border-color;
|
127 | background-color: $input-focus-bg-color;
|
128 | box-shadow: 0 0 0 $input-focus-shadow-spread $color-calculate-input-focus-shadow;
|
129 | }
|
130 |
|
131 | &#{$date-picker2-prefix}-input-noborder {
|
132 | border-color: transparent !important;
|
133 | box-shadow: none !important;
|
134 | }
|
135 |
|
136 | &#{$date-picker2-prefix}-input-disabled {
|
137 | @include input-disabled();
|
138 | }
|
139 | }
|
140 |
|
141 | &-input-separator {
|
142 | color: $input-border-color;
|
143 | font-size: 12px;
|
144 | line-height: 12px;
|
145 | display: inline-block;
|
146 | min-width: 16px;
|
147 | text-align: center;
|
148 | }
|
149 | }
|
150 |
|
151 | .#{$css-prefix} {
|
152 | &range-picker2-panel,
|
153 | &date-picker2-panel {
|
154 | display: inline-flex;
|
155 | }
|
156 |
|
157 | &range-picker2-panel:not(.#{$css-prefix}range-picker2-panel-single) {
|
158 | .#{$css-prefix}range-picker-right .#{$css-prefix}calendar2-header-left-btn,
|
159 | .#{$css-prefix}range-picker-left .#{$css-prefix}calendar2-header-right-btn {
|
160 | visibility: hidden;
|
161 | }
|
162 | }
|
163 | }
|
164 |
|
165 | #{$range-picker2-prefix}-arrow {
|
166 | display: block;
|
167 | transform: translate(0, -50%) rotate(-45deg);
|
168 | position: absolute;
|
169 | z-index: 1;
|
170 | width: 10px;
|
171 | height: 10px;
|
172 | margin-left: 16.5px;
|
173 | border-color: $color-line1-1 $color-line1-1 transparent transparent;
|
174 | border-style: solid;
|
175 | border-width: 1px;
|
176 | transition: left .3s ease-out;
|
177 | background: $color-white;
|
178 | }
|
179 |
|
180 | #{$date-picker2-prefix}-tl-bl {
|
181 | #{$range-picker2-prefix}-arrow {
|
182 | top: 12.5px;
|
183 | }
|
184 | }
|
185 | #{$date-picker2-prefix}-bl-tl {
|
186 | #{$range-picker2-prefix}-arrow {
|
187 | bottom: 13px;
|
188 | transform: translate(0, 50%) rotate(135deg);
|
189 | }
|
190 | }
|
191 |
|
192 | .#{$css-prefix}date-time-picker-wrapper {
|
193 | border-left: 1px solid $color-line1-1;
|
194 | #{$calendar2-prefix}-body {
|
195 | padding-right: 0px;
|
196 | padding-left: 0px;
|
197 | }
|
198 | }
|
199 |
|
200 | #{$range-picker2-prefix}-panel:not(#{$range-picker2-prefix}-panel-single) {
|
201 | #{$calendar2-prefix}-cell-disabled {
|
202 | #{$calendar2-cell-inner} {
|
203 | @include calendar-disabled;
|
204 | }
|
205 | }
|
206 |
|
207 | #{$calendar2-prefix}-cell-current {
|
208 | &#{$calendar2-prefix}-cell-selected {
|
209 | &::before {
|
210 | color: $color-text1-3;
|
211 | background: $color-brand1-1;
|
212 | }
|
213 | #{$calendar2-cell-inner} {
|
214 | color: $color-text1-3;
|
215 | background: transparent;
|
216 | }
|
217 |
|
218 | &#{$calendar2-prefix}-cell-range-begin,
|
219 | &#{$calendar2-prefix}-cell-range-end {
|
220 | #{$calendar2-cell-inner} {
|
221 | z-index: 10;
|
222 | @include calendar-selected;
|
223 | }
|
224 | }
|
225 |
|
226 | &#{$calendar2-prefix}-cell-range-begin::before {
|
227 | left: 50%;
|
228 | }
|
229 | &#{$calendar2-prefix}-cell-range-end::before {
|
230 | right: 50%;
|
231 | }
|
232 | &#{$calendar2-prefix}-cell-range-begin-single::before,
|
233 | &#{$calendar2-prefix}-cell-range-end-single::before {
|
234 | display: none;
|
235 | }
|
236 | }
|
237 |
|
238 | &#{$calendar2-prefix}-cell-hover {
|
239 | &::after {
|
240 | content: "";
|
241 | position: absolute;
|
242 | top: 50%;
|
243 | right: 0;
|
244 | left: 0;
|
245 | z-index: 2;
|
246 | height: 24px;
|
247 | transform: translateY(-50%);
|
248 | border-color: $color-brand1-9 transparent;
|
249 | border-style: dashed;
|
250 | border-width: 1px;
|
251 | }
|
252 |
|
253 | &#{$calendar2-prefix}-cell-hover-begin::after,
|
254 | &:first-child::after {
|
255 | left: 8px;
|
256 | }
|
257 |
|
258 | &#{$calendar2-prefix}-cell-hover-end::after,
|
259 | &:last-child::after {
|
260 | right: 8px;
|
261 | }
|
262 |
|
263 | &#{$calendar2-prefix}-cell-selected {
|
264 | &#{$calendar2-prefix}-cell-hover-begin::after {
|
265 | left: 8px;
|
266 | }
|
267 | &#{$calendar2-prefix}-cell-hover-end::after {
|
268 | right: 8px;
|
269 | }
|
270 | }
|
271 |
|
272 |
|
273 | &:first-of-type::after {
|
274 | border-top-left-radius: 2px;
|
275 | border-bottom-left-radius: 2px;
|
276 | border-left: 1px dashed $color-brand1-9;
|
277 | }
|
278 | &:last-of-type::after {
|
279 | border-top-right-radius: 2px;
|
280 | border-bottom-right-radius: 2px;
|
281 | border-right: 1px dashed $color-brand1-9;
|
282 | }
|
283 | }
|
284 |
|
285 | &#{$calendar2-prefix}-cell-edge-end {
|
286 | &::before {
|
287 | right: 8px;
|
288 | }
|
289 | &::after {
|
290 | right: 8px;
|
291 | }
|
292 | &#{$calendar2-prefix}-cell-hover {
|
293 | &::after {
|
294 | border-top-right-radius: 2px;
|
295 | border-bottom-right-radius: 2px;
|
296 | border-right: 1px dashed $color-brand1-9;
|
297 | }
|
298 | }
|
299 | }
|
300 |
|
301 | &#{$calendar2-prefix}-cell-hover-begin::after {
|
302 | border-top: 1px dashed $color-brand1-9;
|
303 | border-left: 1px dashed $color-brand1-9;
|
304 | border-top-left-radius: 2px;
|
305 | border-bottom-left-radius: 2px;
|
306 | }
|
307 | &#{$calendar2-prefix}-cell-hover-end::after {
|
308 | border-top: 1px dashed $color-brand1-9;
|
309 | border-right: 1px dashed $color-brand1-9;
|
310 | border-top-right-radius: 2px;
|
311 | border-bottom-right-radius: 2px;
|
312 | }
|
313 | }
|
314 |
|
315 | #{$calendar2-prefix}-cell-edge-end + #{$calendar2-prefix}-cell-current:not(#{$calendar2-prefix}-cell-disabled) {
|
316 | &::before,
|
317 | &::after {
|
318 | left: 8px;
|
319 | }
|
320 |
|
321 | &#{$calendar2-prefix}-cell-hover {
|
322 | &::after {
|
323 | border-top-left-radius: 2px;
|
324 | border-bottom-left-radius: 2px;
|
325 | border-left: 1px dashed $color-brand1-9;
|
326 | }
|
327 | }
|
328 | }
|
329 | }
|
330 |
|
331 | #{$calendar2-prefix}-table-week {
|
332 | #{$calendar2-prefix}-cell-hover::after {
|
333 | display: none;
|
334 | }
|
335 |
|
336 | tr:hover #{$calendar2-prefix}-cell:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected)::before {
|
337 | @include calendar-hover;
|
338 | }
|
339 |
|
340 | #{$calendar2-prefix}-week-current {
|
341 | #{$calendar2-prefix}-cell#{$calendar2-prefix}-cell-selected {
|
342 | &::before,
|
343 | #{$calendar2-cell-inner} {
|
344 | color: $color-text1-3;
|
345 | background-color: $color-brand1-1;
|
346 | }
|
347 |
|
348 | &:last-child,
|
349 | &:nth-child(2) {
|
350 | #{$calendar2-cell-inner} {
|
351 | @include calendar-selected;
|
352 | }
|
353 | }
|
354 | &:nth-child(2)::before {
|
355 | left: 50%;
|
356 | }
|
357 | &:last-child::before {
|
358 | right: 50%;
|
359 | }
|
360 | }
|
361 | }
|
362 |
|
363 | tr:not(#{$calendar2-prefix}-week-current) {
|
364 | td#{$calendar2-prefix}-cell#{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
|
365 | &::before,
|
366 | #{$calendar2-cell-inner} {
|
367 | background-color: transparent;
|
368 | color: $color-text1-1;
|
369 | }
|
370 | }
|
371 | }
|
372 | }
|
373 |
|
374 | #{$range-picker2-prefix}-panel #{$calendar2-prefix}-week-current {
|
375 | #{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
|
376 | &:last-child,
|
377 | &:nth-child(2) {
|
378 | #{$calendar2-cell-inner} {
|
379 | background-color: $color-brand1-1;
|
380 | color: $color-text1-3;
|
381 | }
|
382 | }
|
383 | &#{$calendar2-prefix}-cell-week-range-begin,
|
384 | &#{$calendar2-prefix}-cell-week-range-end {
|
385 | &:last-child,
|
386 | &:nth-child(2) {
|
387 | #{$calendar2-cell-inner} {
|
388 | @include calendar-selected;
|
389 | }
|
390 | }
|
391 | }
|
392 | }
|
393 | }
|