Skip to content

Commit 3419d5e

Browse files
samuelreichertsamuelreichert
committed
feat(date-time-picker-web): add styles for date time picker widget
1 parent 4cc20cb commit 3419d5e

File tree

1 file changed

+242
-0
lines changed

1 file changed

+242
-0
lines changed

‎packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
.widget-datetimepicker {
2+
align-items: center;
3+
color: var(--font-color-default);
4+
display: flex;
5+
font-size: var(--font-size-small);
6+
margin: 0 -15px 16px -15px;
7+
8+
&-label-wrapper {
9+
flex: 0 0 25%;
10+
max-width: 25%;
11+
padding: 0 16px;
12+
}
13+
14+
&-label {
15+
font-size: var(--font-size-default);
16+
font-weight: 600;
17+
text-align: right;
18+
text-overflow: ellipsis;
19+
width: 100%;
20+
}
21+
22+
&-wrapper {
23+
align-items: center;
24+
display: flex;
25+
flex: 0 0 75%;
26+
max-width: 75%;
27+
padding: 0 16px;
28+
}
29+
30+
&-input {
31+
background-color: var(--bg-color-secondary);
32+
border: 1px solid var(--gray-primary);
33+
border-radius: 4px;
34+
display: flex;
35+
flex: 1;
36+
font-size: var(--font-size-default);
37+
height: auto;
38+
39+
min-width: 50px;
40+
padding: var(--spacing-small);
41+
transition:
42+
border-color ease-in-out 0.15s,
43+
box-shadow ease-in-out 0.15s;
44+
45+
&:focus-within {
46+
border-color: var(--link-color);
47+
}
48+
}
49+
50+
&-input-button {
51+
background: var(--bg-color-secondary);
52+
border: 1px solid var(--gray-primary);
53+
border-radius: 4px;
54+
color: var(--link-color);
55+
font-size: var(--font-size-default);
56+
line-height: var(--line-height-base);
57+
margin: 0;
58+
margin-left: var(--spacing-small);
59+
padding: 0.6em 1em;
60+
61+
&[data-pressed] {
62+
box-shadow: none;
63+
background: var(--gray-primary);
64+
}
65+
66+
&[data-focus-visible] {
67+
outline: 2px solid var(--link-color);
68+
outline-offset: 2px;
69+
}
70+
71+
svg {
72+
width: 14px;
73+
height: 14px;
74+
}
75+
}
76+
77+
&-calendar {
78+
background-color: var(--bg-color);
79+
border: 1px solid var(--gray-primary);
80+
border-radius: var(--border-radius-default);
81+
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
82+
font-size: var(--font-size-small);
83+
padding: var(--spacing-small);
84+
85+
.react-datepicker__current-month {
86+
color: var(--font-color-default);
87+
font-size: var(--font-size-default);
88+
font-weight: 600;
89+
}
90+
91+
.react-datepicker__month-select,
92+
.react-datepicker__year-select {
93+
background-color: transparent;
94+
border: none;
95+
border-radius: 4px;
96+
box-sizing: border-box;
97+
color: var(--font-color-default);
98+
cursor: pointer;
99+
display: flex;
100+
flex: 1;
101+
justify-content: space-between;
102+
align-items: center;
103+
font-family: inherit;
104+
font-size: inherit;
105+
line-height: inherit;
106+
margin: 0;
107+
min-width: 50px;
108+
padding: 0;
109+
padding-inline: 4px;
110+
transition: all 0.4s allow-discrete;
111+
112+
&:focus-within {
113+
outline: 2px solid var(--link-color);
114+
outline-offset: 1px;
115+
}
116+
117+
&,
118+
&::picker(select) {
119+
appearance: base-select;
120+
}
121+
122+
&:hover,
123+
&:focus {
124+
background-color: var(--brand-default);
125+
color: var(--link-color);
126+
}
127+
128+
&::picker(select) {
129+
border: none;
130+
border-radius: 4px;
131+
min-width: 100px;
132+
opacity: 0;
133+
left: anchor(0%);
134+
top: calc(anchor(bottom) + 4px);
135+
transition: all 0.4s allow-discrete;
136+
137+
&:popover-open {
138+
height: calc-size(auto, size);
139+
opacity: 1;
140+
}
141+
}
142+
143+
&::picker-icon {
144+
content: "";
145+
width: 14px;
146+
height: 14px;
147+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%230a1325' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
148+
transition: rotate 0.2s ease-out;
149+
}
150+
151+
&:open::picker-icon {
152+
rotate: 180deg;
153+
}
154+
155+
option {
156+
background: white;
157+
border: 1px solid #e7e7e9;
158+
cursor: pointer;
159+
padding: 8px;
160+
transition-property: color, background;
161+
transition-duration: 0.2s;
162+
transition-timing-function: ease-out;
163+
164+
&:first-of-type {
165+
border-radius: 4px 4px 0 0;
166+
}
167+
168+
&:last-of-type {
169+
border-radius: 0 0 4px 4px;
170+
}
171+
172+
&:not(&:last-of-type) {
173+
border-bottom: none;
174+
}
175+
176+
&:hover,
177+
&:focus {
178+
background-color: #e7e7e9;
179+
color: #264ae5;
180+
}
181+
182+
&:checked {
183+
background-color: #264ae5;
184+
color: #f8f8f8;
185+
}
186+
187+
&::checkmark {
188+
display: none;
189+
}
190+
}
191+
}
192+
193+
.react-datepicker__day-name,
194+
.react-datepicker__day {
195+
display: flex;
196+
align-items: center;
197+
justify-content: center;
198+
margin: 0;
199+
height: 35px;
200+
width: 35px;
201+
}
202+
203+
.react-datepicker__day-name {
204+
color: var(--link-color);
205+
font-weight: bold;
206+
}
207+
208+
.react-datepicker__month {
209+
margin: 0;
210+
}
211+
212+
.react-datepicker__day-names,
213+
.react-datepicker__week {
214+
display: flex;
215+
gap: 4px;
216+
margin-bottom: 4px;
217+
}
218+
219+
.react-datepicker__day {
220+
cursor: pointer;
221+
222+
&:hover,
223+
&[data-pressed] {
224+
background-color: var(--brand-default);
225+
border-radius: 50%;
226+
color: var(--link-color);
227+
}
228+
229+
&:focus-within {
230+
border-radius: 50%;
231+
outline: 2px solid var(--link-color);
232+
outline-offset: 1px;
233+
}
234+
235+
&--selected {
236+
background-color: var(--link-color);
237+
border-radius: 50%;
238+
color: var(--bg-color);
239+
}
240+
}
241+
}
242+
}

0 commit comments

Comments
 (0)