UNPKG

11.6 kBSCSSView Raw
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 // use flex-basis instead width to be compiable with safari
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}