Commit | Line | Data |
---|---|---|
5a961a44 AE |
1 | .inputAddon > .inputDatePicker { |
2 | background-color: @wcfInputBackgroundColor !important; | |
3 | cursor: pointer; | |
4 | flex: 0 1 150px; | |
5 | min-width: 150px; | |
6 | } | |
7 | ||
8 | .datePicker { | |
7b658f88 MW |
9 | background-color: @wcfDropdownBackgroundColor; |
10 | border: 1px solid @wcfDropdownBorderColor; | |
5a961a44 | 11 | border-radius: 3px; |
7b658f88 | 12 | color: @wcfDropdownColor; |
5a961a44 AE |
13 | opacity: 0; |
14 | position: absolute; | |
15 | transition: visibility .3s linear .3s, opacity .3s linear; | |
16 | visibility: hidden; | |
17 | width: 240px; | |
18 | z-index: 450; | |
81f55d8f | 19 | |
7b658f88 | 20 | .boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px); |
d7f7f6eb | 21 | |
5a961a44 AE |
22 | &.active { |
23 | opacity: 1; | |
24 | transition-delay: 0s; | |
25 | visibility: visible; | |
81f55d8f AE |
26 | } |
27 | ||
5a961a44 AE |
28 | &.datePickerTime > footer { |
29 | display: block; | |
81f55d8f AE |
30 | } |
31 | ||
5a961a44 AE |
32 | > .elementPointer { |
33 | border-color: @wcfDropdownBorderColor transparent; | |
34 | border-style: solid; | |
35 | border-width: 0 8px 8px; | |
81f55d8f | 36 | |
5a961a44 AE |
37 | > span { |
38 | border-color: @wcfDropdownBackgroundColor transparent; | |
39 | border-style: solid; | |
40 | border-width: 0 6px 6px; | |
41 | left: -6px; | |
42 | position: absolute; | |
43 | top: 2px; | |
7b658f88 MW |
44 | } |
45 | ||
5a961a44 AE |
46 | &.flipVertical { |
47 | border-width: 8px 8px 0; | |
556973c1 | 48 | |
5a961a44 AE |
49 | > span { |
50 | border-width: 6px 6px 0; | |
556973c1 | 51 | } |
81f55d8f AE |
52 | } |
53 | } | |
54 | ||
5a961a44 AE |
55 | > header, |
56 | > footer { | |
57 | padding: @wcfGapSmall; | |
58 | position: relative; | |
59 | text-align: center; | |
60 | } | |
61 | ||
62 | > header > a { | |
63 | display: none; | |
64 | position: absolute; | |
65 | top: 50%; | |
66 | transform: translateY(-50%); | |
7b658f88 | 67 | |
5a961a44 AE |
68 | &.active { |
69 | display: block; | |
7b658f88 | 70 | } |
81f55d8f | 71 | |
5a961a44 AE |
72 | &.previous { |
73 | left: @wcfGapSmall; | |
81f55d8f | 74 | } |
a2ae7499 | 75 | |
5a961a44 AE |
76 | &.next { |
77 | right: @wcfGapSmall; | |
a2ae7499 MW |
78 | } |
79 | } | |
55b00c1c | 80 | |
5a961a44 AE |
81 | > ul { |
82 | border-top: 1px solid @wcfDropdownBorderColor; | |
83 | ||
84 | // hide borders | |
85 | margin: 0 -1px -1px 0; | |
86 | ||
87 | > li { | |
88 | display: flex; | |
55b00c1c | 89 | |
5a961a44 AE |
90 | > a, |
91 | > span { | |
92 | border: 1px solid @wcfDropdownBorderColor; | |
93 | border-width: 0 1px 1px 0; | |
94 | display: block; | |
95 | flex: 1; | |
96 | padding: @wcfGapTiny 0; | |
97 | text-align: center; | |
55b00c1c MS |
98 | } |
99 | ||
5a961a44 AE |
100 | > a { |
101 | background-color: @wcfContainerAccentBackgroundColor; | |
102 | color: @wcfColor; | |
103 | ||
104 | &:hover { | |
105 | text-decoration: none; | |
106 | } | |
55b00c1c | 107 | |
5a961a44 AE |
108 | &.active, |
109 | &:not(.otherMonth):hover { | |
110 | background-color: @wcfContainerHoverBackgroundColor; | |
55b00c1c MS |
111 | } |
112 | ||
5a961a44 AE |
113 | &.otherMonth { |
114 | background-color: @wcfContainerBackgroundColor; | |
115 | color: @wcfDimmedColor; | |
116 | cursor: default; | |
55b00c1c MS |
117 | } |
118 | } | |
5a961a44 AE |
119 | |
120 | > span { | |
121 | background-color: @wcfTabularBoxBackgroundColor; | |
122 | border-right-color: @wcfTabularBoxBackgroundColor; | |
123 | color: @wcfTabularBoxColor; | |
124 | font-size: .85rem; | |
125 | text-transform: uppercase; | |
126 | ||
127 | .textShadow(@wcfTabularBoxBackgroundColor); | |
128 | } | |
55b00c1c MS |
129 | } |
130 | } | |
5a961a44 AE |
131 | |
132 | > footer { | |
133 | display: none; | |
134 | } | |
135 | ||
7b658f88 | 136 | } |