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 { |
8882fff9 | 30 | border-color: $wcfDropdownBorder transparent; |
5a961a44 AE |
31 | border-style: solid; |
32 | border-width: 0 8px 8px; | |
81f55d8f | 33 | |
5a961a44 | 34 | > span { |
8882fff9 | 35 | border-color: $wcfDropdownBackground transparent; |
5a961a44 AE |
36 | border-style: solid; |
37 | border-width: 0 6px 6px; | |
38 | left: -6px; | |
39 | position: absolute; | |
40 | top: 2px; | |
7b658f88 MW |
41 | } |
42 | ||
5a961a44 AE |
43 | &.flipVertical { |
44 | border-width: 8px 8px 0; | |
556973c1 | 45 | |
5a961a44 AE |
46 | > span { |
47 | border-width: 6px 6px 0; | |
556973c1 | 48 | } |
81f55d8f AE |
49 | } |
50 | } | |
51 | ||
5a961a44 AE |
52 | > header, |
53 | > footer { | |
6d8f7f47 | 54 | padding: 10px; |
5a961a44 AE |
55 | position: relative; |
56 | text-align: center; | |
57 | } | |
58 | ||
59 | > header > a { | |
60 | display: none; | |
61 | position: absolute; | |
62 | top: 50%; | |
63 | transform: translateY(-50%); | |
7b658f88 | 64 | |
5a961a44 AE |
65 | &.active { |
66 | display: block; | |
7b658f88 | 67 | } |
81f55d8f | 68 | |
5a961a44 | 69 | &.previous { |
6d8f7f47 | 70 | left: 10px; |
81f55d8f | 71 | } |
a2ae7499 | 72 | |
5a961a44 | 73 | &.next { |
6d8f7f47 | 74 | right: 10px; |
a2ae7499 MW |
75 | } |
76 | } | |
55b00c1c | 77 | |
6d8f7f47 AE |
78 | .selectDropdown + .selectDropdown { |
79 | margin-left: 5px; | |
80 | } | |
81 | ||
82 | > ul > li { | |
8882fff9 | 83 | border-top: 1px solid $wcfDropdownBorder; |
6d8f7f47 | 84 | display: flex; |
5a961a44 | 85 | |
6d8f7f47 AE |
86 | > a, |
87 | > span { | |
88 | display: block; | |
89 | flex: 1; | |
90 | padding: 5px 0; | |
91 | text-align: center; | |
92 | ||
93 | &:not(:last-child) { | |
94 | border-right: 1px solid $wcfDropdownBorder; | |
95 | } | |
96 | } | |
5a961a44 | 97 | |
6d8f7f47 AE |
98 | > a { |
99 | color: $wcfDropdownLink; | |
55b00c1c | 100 | |
6d8f7f47 AE |
101 | &:hover { |
102 | text-decoration: none; | |
55b00c1c MS |
103 | } |
104 | ||
6d8f7f47 AE |
105 | &.active, |
106 | &:not(.otherMonth):hover { | |
107 | background-color: $wcfDropdownBackgroundActive; | |
108 | color: $wcfDropdownLinkActive; | |
55b00c1c | 109 | } |
5a961a44 | 110 | |
6d8f7f47 AE |
111 | &.otherMonth { |
112 | color: $wcfContentDimmedText; | |
113 | cursor: default; | |
5a961a44 | 114 | } |
55b00c1c | 115 | } |
6d8f7f47 AE |
116 | |
117 | > span { | |
118 | text-transform: uppercase; | |
119 | @extend .wcfFontSmall; | |
120 | } | |
55b00c1c | 121 | } |
5a961a44 AE |
122 | |
123 | > footer { | |
124 | display: none; | |
125 | } | |
7b658f88 | 126 | } |