UNPKG

6.68 kBSCSSView Raw
1@import "../core/index-noreset";
2
3@import "scss/variable";
4@import "scss/normalize";
5@import "scss/mixin";
6
7@import "./rtl.scss";
8
9
10#{$calendar2-prefix} {
11 font-size: 12px;
12 user-select: none;
13 background: $color-white;
14
15 &-header {
16 display: flex;
17 }
18
19 &-table {
20 width: 100%;
21 table-layout: fixed;
22 }
23
24 &-cell {
25 cursor: pointer;
26 position: relative;
27 transition: background-color .2s, border .2s;
28 }
29
30 #{$calendar2-cell-inner} {
31 color: $color-text1-1;
32 outline: none;
33 min-width: 24px;
34 position: relative;
35 border: 1px solid transparent;
36 }
37
38 &-cell-disabled {
39 &::before {
40 @include calendar-disabled;
41 }
42 }
43
44 &-fullscreen,
45 &-panel,
46 &-card {
47 #{$calendar2-prefix}-header {
48 &-actions {
49 margin-left: auto;
50 }
51 &-ranges,
52 &-actions {
53 & > *:not(:first-child) {
54 margin-left: 8px;
55 }
56 }
57
58 &-select-year,
59 &-select-month {
60 min-width: 88px;
61 .#{$css-prefix}input {
62 min-width: auto;
63 }
64 }
65 }
66
67 #{$calendar2-prefix}-body {
68 padding: 8px 0;
69 }
70 }
71
72 &-card,
73 &-panel {
74 #{$calendar2-cell-inner} {
75 z-index: 2;
76 height: 24px;
77 line-height: 22px;
78 border-radius: 2px;
79 display: inline-block;
80 }
81
82 #{$calendar2-prefix} {
83 min-height: 150px;
84 &-table {
85 thead > tr {
86 height: 24px;
87 color: $color-text1-2;
88 }
89
90 th,
91 td {
92 font-weight: 400;
93 text-align: center;
94 padding: 4px 0;
95 }
96
97 th {
98 height: 32px;
99 }
100 }
101
102 &-table-month,
103 &-table-year,
104 &-table-decade {
105 height: 145px;
106 #{$calendar2-prefix}-cell-inner {
107 min-width: 56px;
108 }
109 }
110 &-table-quarter {
111 height: 50px;
112 #{$calendar2-prefix}-cell-inner {
113 min-width: 56px;
114 }
115 }
116
117
118 &-table-decade {
119 #{$calendar2-prefix}-cell-inner {
120 min-width: 80px;
121 }
122 }
123 }
124
125
126 #{$calendar2-prefix}-cell-current {
127 &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected):not(#{$calendar2-prefix}-cell-today) {
128 #{$calendar2-cell-inner} {
129 @include calendar-current;
130 }
131
132 &:hover:not(#{$calendar2-prefix}-cell-hover) #{$calendar2-cell-inner} {
133 @include calendar-hover;
134 }
135 }
136
137 &#{$calendar2-prefix}-cell-today:not(#{$calendar2-prefix}-cell-disabled) {
138 #{$calendar2-cell-inner} {
139 color: $color-brand1-6;
140 }
141 }
142
143 &#{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
144 #{$calendar2-cell-inner} {
145 @include calendar-selected;
146 }
147 }
148 }
149 }
150
151 &-fullscreen {
152 #{$calendar2-prefix} {
153 &-cell-value,
154 &-table th {
155 text-align: right;
156 }
157
158 &-table th {
159 padding: 0 12px 5px 0;
160 }
161
162 &-cell-inner {
163 height: 80px;
164 border-top: 2px solid $color-line1-1;
165 margin: 0 4px;
166 padding: 4px 8px 0;
167 }
168 }
169
170 td #{$calendar2-prefix}-cell-inner {
171 height: 80px;
172 border-top: 2px solid $color-line1-1;
173 }
174
175 #{$calendar2-prefix}-cell-disabled #{$calendar2-cell-inner} {
176 @include calendar-disabled-fullscreen;
177 }
178
179 #{$calendar2-prefix}-cell-current {
180 &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected):not(#{$calendar2-prefix}-cell-today) {
181 #{$calendar2-cell-inner} {
182 @include calendar-current-fullscreen;
183 }
184
185 &:hover #{$calendar2-cell-inner} {
186 @include calendar-hover-fullscreen;
187 }
188 }
189
190 &#{$calendar2-prefix}-cell-today {
191 #{$calendar2-cell-inner} {
192 color: $color-brand1-6;
193 }
194 }
195
196 #{$calendar2-cell-inner} {
197 background-color: $color-white;
198 }
199
200 &#{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
201 #{$calendar2-cell-inner} {
202 @include calendar-selected-fullscreen;
203 }
204 }
205 }
206 }
207
208 &-card {
209 #{$calendar2-prefix} {
210 &-header {
211 padding: 8px 8px;
212 border-bottom: 1px solid $color-line1-1;
213 }
214 }
215 }
216
217 &-panel {
218 #{$calendar2-prefix}-header {
219 padding: 0 8px;
220 display: flex;
221 align-items: center;
222 border-bottom: 1px solid $color-line1-1;
223
224 &-btn {
225 min-width: 20px;
226 line-height: 20px;
227 color: $color-text1-3;
228 font-family: inherit;
229 vertical-align: initial;
230 border-radius: 2px;
231 }
232
233 &-btn > span,
234 &-text-field {
235 text-align: center;
236 font-size: 14px;
237 color: $color-text1-4;
238 font-weight: bolder;
239 vertical-align: initial;
240 }
241
242 &-btn:hover,
243 &-btn:hover > span {
244 color: $color-brand1-6;
245 }
246
247 &-right-btn:hover,
248 &-left-btn:hover {
249 @include calendar-hover;
250 }
251
252
253 &-text-field {
254 flex: 1;
255 height: 38px;
256 line-height: 38px;
257 #{$calendar2-prefix}-header-btn:not(:first-child) {
258 margin-left: 6px;
259 }
260 }
261 }
262 }
263}
264
265
266#{$calendar2-prefix}-header-select-month-popup,
267#{$calendar2-prefix}-header-select-year-popup {
268 min-width: auto;
269}