Commit | Line | Data |
---|---|---|
5a961a44 | 1 | .inputAddon > .inputDatePicker { |
5a961a44 AE |
2 | cursor: pointer; |
3 | flex: 0 1 150px; | |
4 | min-width: 150px; | |
5 | } | |
6 | ||
7 | .datePicker { | |
8882fff9 MS |
8 | background-color: $wcfDropdownBackground; |
9 | border: 1px solid $wcfDropdownBorder; | |
6d8f7f47 | 10 | box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2); |
8882fff9 | 11 | color: $wcfDropdownText; |
5a961a44 AE |
12 | opacity: 0; |
13 | position: absolute; | |
14 | transition: visibility .3s linear .3s, opacity .3s linear; | |
15 | visibility: hidden; | |
16 | width: 240px; | |
17 | z-index: 450; | |
81f55d8f | 18 | |
5a961a44 AE |
19 | &.active { |
20 | opacity: 1; | |
21 | transition-delay: 0s; | |
22 | visibility: visible; | |
81f55d8f AE |
23 | } |
24 | ||
5a961a44 AE |
25 | &.datePickerTime > footer { |
26 | display: block; | |
81f55d8f AE |
27 | } |
28 | ||
5a961a44 | 29 | > .elementPointer { |
1fddbbab AE |
30 | border: 10px solid transparent; |
31 | border-bottom-color: $wcfDropdownBorder; | |
32 | border-top-width: 0; | |
81f55d8f | 33 | |
5a961a44 | 34 | > span { |
1fddbbab AE |
35 | border: 9px solid transparent; |
36 | border-bottom-color: $wcfDropdownBackground; | |
37 | border-top-width: 0; | |
38 | left: -9px; | |
5a961a44 | 39 | position: absolute; |
1fddbbab | 40 | top: 1px; |
7b658f88 MW |
41 | } |
42 | ||
5a961a44 | 43 | &.flipVertical { |
1fddbbab AE |
44 | border: 10px transparent solid; |
45 | border-top-color: $wcfDropdownBorder; | |
46 | border-bottom-width: 0; | |
47 | bottom: 0; | |
48 | top: auto; | |
556973c1 | 49 | |
5a961a44 | 50 | > span { |
1fddbbab AE |
51 | border: 9px transparent solid; |
52 | border-top-color: $wcfDropdownBackground; | |
53 | border-bottom-width: 0; | |
54 | bottom: 1px; | |
55 | top: auto; | |
556973c1 | 56 | } |
81f55d8f AE |
57 | } |
58 | } | |
59 | ||
5a961a44 AE |
60 | > header, |
61 | > footer { | |
6d8f7f47 | 62 | padding: 10px; |
5a961a44 AE |
63 | position: relative; |
64 | text-align: center; | |
65 | } | |
66 | ||
67 | > header > a { | |
68 | display: none; | |
69 | position: absolute; | |
70 | top: 50%; | |
71 | transform: translateY(-50%); | |
7b658f88 | 72 | |
5a961a44 AE |
73 | &.active { |
74 | display: block; | |
7b658f88 | 75 | } |
81f55d8f | 76 | |
5a961a44 | 77 | &.previous { |
6d8f7f47 | 78 | left: 10px; |
81f55d8f | 79 | } |
a2ae7499 | 80 | |
5a961a44 | 81 | &.next { |
6d8f7f47 | 82 | right: 10px; |
a2ae7499 MW |
83 | } |
84 | } | |
55b00c1c | 85 | |
6d8f7f47 AE |
86 | .selectDropdown + .selectDropdown { |
87 | margin-left: 5px; | |
88 | } | |
89 | ||
90 | > ul > li { | |
1fddbbab | 91 | border-top: 1px solid $wcfDropdownBorderInner; |
6d8f7f47 | 92 | display: flex; |
5a961a44 | 93 | |
1fddbbab AE |
94 | &.weekdays, |
95 | &.weekdays + li { | |
96 | border-top-color: $wcfDropdownBorder; | |
97 | } | |
98 | ||
6d8f7f47 AE |
99 | > a, |
100 | > span { | |
101 | display: block; | |
102 | flex: 1; | |
103 | padding: 5px 0; | |
104 | text-align: center; | |
105 | ||
106 | &:not(:last-child) { | |
1fddbbab | 107 | border-right: 1px solid $wcfDropdownBorderInner; |
6d8f7f47 AE |
108 | } |
109 | } | |
5a961a44 | 110 | |
6d8f7f47 AE |
111 | > a { |
112 | color: $wcfDropdownLink; | |
55b00c1c | 113 | |
6d8f7f47 AE |
114 | &:hover { |
115 | text-decoration: none; | |
55b00c1c MS |
116 | } |
117 | ||
6d8f7f47 AE |
118 | &.active, |
119 | &:not(.otherMonth):hover { | |
120 | background-color: $wcfDropdownBackgroundActive; | |
121 | color: $wcfDropdownLinkActive; | |
55b00c1c | 122 | } |
5a961a44 | 123 | |
6d8f7f47 AE |
124 | &.otherMonth { |
125 | color: $wcfContentDimmedText; | |
126 | cursor: default; | |
5a961a44 | 127 | } |
55b00c1c | 128 | } |
6d8f7f47 AE |
129 | |
130 | > span { | |
1fddbbab | 131 | color: $wcfContentDimmedText; |
6d8f7f47 | 132 | text-transform: uppercase; |
1fddbbab | 133 | |
5908f54f | 134 | @include wcfFontSmall; |
6d8f7f47 | 135 | } |
55b00c1c | 136 | } |
5a961a44 AE |
137 | |
138 | > footer { | |
139 | display: none; | |
140 | } | |
7b658f88 | 141 | } |