blob: e9c0f404257dbc08ba990c729085e9a02aeceab7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
.customized-date-picker {
margin-bottom: 24px;
display: flex;
> div:first-child {
flex: 1;
display: flex;
}
.react-datepicker-wrapper {
display: flex;
flex: 1;
}
.date-picker-label {
&.required {
&:before {
content: '*';
color: $red;
margin: 0 4px 0 0;
}
}
@extend .body-2-semibold;
color: $dark-gray;
margin-bottom: 8px;
}
.react-datepicker__input-container {
flex: 1;
cursor: pointer;
}
.datepicker-custom-input {
display: flex;
justify-content: space-between;
align-items: center;
height: 30px;
border-radius: 2px;
color: $dark-gray;
border: 1px solid $light-gray;
padding: 6px 8px 6px 12px;
.clear-input {
margin-left: auto;
margin-right: 8px;
.svg-icon {
fill: transparent;
height: 8px;
width: 8px;
}
}
&:hover {
border-color: $gray;
.clear-input {
.svg-icon {
fill: initial;
}
}
}
.datepicker-text {
cursor: pointer;
@extend .body-1;
&.placeholder {
color: $light-gray;
}
}
.calendar-input {
fill: $light-gray;
}
.svg-icon-wrapper.calendar {
.svg-icon {
fill: $dark-gray;
width: 17px;
height: 17px;
}
}
}
/* Out of namespace context for datepicker */
div.customized-date-picker-calendar {
@import 'common/variables';
@import 'common/typography';
border-color: $light-gray;
//margin-top: -8px;
color: $black;
.react-datepicker__triangle {
margin-top: 0px;
display: none;
}
.react-datepicker__navigation--previous::before,
.react-datepicker__navigation--next::before {
width: 8px;
height: 8px;
display: inline-block;
position: absolute;
top: -4px;
}
.react-datepicker__navigation--previous::before {
left: 0;
content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
}
.react-datepicker__navigation--next::before {
right: 0;
content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
}
.react-datepicker__navigation--previous,
.react-datepicker__navigation--next {
border: none;
}
.react-datepicker__month-container {
.react-datepicker__header {
background-color: $background-gray;
border-bottom: none;
.react-datepicker__current-month {
@extend .body-1-semibold;
background-color: $background-gray;
margin-bottom: 10px;
}
.react-datepicker__day-names {
@extend .body-1;
background-color: $white;
}
}
.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
@extend .body-1;
background-color: $blue;
color: $white;
}
.react-datepicker__day {
border-radius: 0px;
margin: 0;
flex: 1;
@extend .body-1;
}
.react-datepicker__day--in-range,
.react-datepicker__day--in-selecting-range {
background-color: $tlv-hover;
color: $black;
&.react-datepicker__day--selected,
&.react-datepicker__day--keyboard-selected,
&.react-datepicker__day--range-start,
&.react-datepicker__day--range-end {
background-color: $blue;
color: $white;
}
&.react-datepicker__day--selecting-range-start,
&.react-datepicker__day--selecting-range-end {
background-color: lighten($blue, 40%);
color: $black;
}
&.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
&.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
&.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
background-color: $blue;
color: $white;
}
}
.react-datepicker__week {
display: flex;
}
}
}
}
|
