Blame view

src/styles/components/calendar.less 8.23 KB
e80b805f   chenhaodong   初始化
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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
  @calendar-prefix-cls: ~"@{css-prefix}calendar";
  @picker-prefix-cls: ~"@{css-prefix}picker";
  
  @calendar-cells-width: 0px;
  @calendar-cells-width-with-weeknumbers: 0px;
  
  .@{calendar-prefix-cls} {
      //position: relative;
      display: inline-block;
      line-height: normal;
      &-rel{
          position: relative;
      }
      .@{select-dropdown-prefix-cls} {
          width: auto;
          padding: 0;
          overflow: visible;
          max-height: none;
      }
      &-cells{
          min-width:500px;
          white-space: normal;
          span{
              display: inline-block;
              width: 14.285%;
              min-height: 50px; // hd
              text-align: center;
              em{
                  display: inline-block;
                  width: 48px;
                  height: 48px;
                  line-height: 50px;
                  text-align: center;
                  font-style: normal;
                  border-radius: @btn-border-radius-small;
                  text-align: center;
                  transition: all @transition-time @ease-in-out;
              }
          }
          &-header span{
              line-height: 24px;
              color: @btn-disable-color;
          }
          &-cell:hover{
              em{
                  background: @calendar-cell-hover-bg;
              }
          }
          &-focused{
              em{
                  box-shadow: 0 0 0 1px @primary-color inset;
              }
          }
          
          &-cell{
              span&{
                  width: 14.285%;
                  min-height: 112px; // hd
                  cursor: pointer;
                  display: inline-flex; // hd
                  flex-direction: column; // hd
                  align-items: center; // hd
              }
              &-prev-month,&-next-month{
                  em{
                     
                      color: @btn-disable-color;
                      margin: 0 atuto;
                  }
                  &:hover{
                      em{
                          background: transparent;
                      }
                  }
              }
              span&-week-label,span&-week-label:hover,span&-disabled,span&-disabled:hover{
                  cursor: @cursor-disabled;
                  color: @btn-disable-color;
                  em{
                      
                      color: inherit;
                      background: inherit;
                  }
              }
              span&-disabled,span&-disabled:hover{
                  background: @btn-disable-bg;
              }
              &-today{
                  em {
                      position: relative;
                      &:after{
                          content: '';
                          display: block;
                          width: 6px;
                          height: 6px;
                          border-radius: 50%;
                          background: @primary-color;
                          position: absolute;
                          top: 1px;
                          right: 1px;
                      }
                  }
              }
              &-range{
                  position: relative;
                  em{
                      position: relative;
                      z-index: 1;
                  }
                  &:before{
                      content: '';
                      display: block;
                      background: @calendar-cell-hover-bg;
                      border-radius: 0;
                      border: 0;
                      position: absolute;
                      top: 2px;
                      bottom: 2px;
                      left: 0;
                      right: 0;
                  }
              }
              &-selected,&-selected:hover
              {
                  em{
                      background: @primary-color;
                      color: #fff;
                  }
              }
              span&-disabled&-selected{
                  em {
                      background: @btn-disable-color;
                      color: @btn-disable-bg;
                  }
              }
              &-today&-selected
              {
                  em{
                      &:after{
                          background: #fff;
                      }
                  }
              }
          }
      }
  
      &-cells-show-week-numbers {
          width: @calendar-cells-width-with-weeknumbers;
      }
  
      &-cells-year,&-cells-month{
          margin-top: 14px;
          span{
              width: 40px;
              height: 28px;
              line-height: 28px;
              margin: 10px 12px;
              border-radius: @btn-border-radius-small;
              em{
                  width: 40px;
                  height: 28px;
                  line-height: 28px;
                  margin: 0;
              }
          }
  
          .@{calendar-prefix-cls}-cells-cell-focused{
              background-color: tint(@primary-color, 80%);
          }
  
      }
  
      &-header{
          height: 32px;
          line-height: 32px;
          text-align: center;
          border-bottom: 1px solid @border-color-split;
          &-label{
              cursor: pointer;
              transition: color @transition-time @ease-in-out;
              &:hover{
                  color: @primary-color;
              }
          }
      }
      &-btn-pulse{
          background-color: tint(@primary-color, 80%) !important;
          border-radius: @border-radius-small;
          transition: background-color @transition-time @ease-in-out;
      }
      &-prev-btn{
          float: left;
          &-arrow-double{
              margin-left: 10px;
              i:after{
                  content: "\F115";
                  margin-left: -8px;
              }
          }
      }
      &-next-btn{
          float: right;
          &-arrow-double{
              margin-right: 10px;
              i:after{
                  content: "\F11F";
                  margin-left: -8px;
              }
          }
      }
  
      &-with-range{
          .@{picker-prefix-cls}-panel{
              &-body{
                  min-width: (@calendar-cells-width + 20) * 2;
              }
              &-content{
                  float: left;
              }
          }
          .@{picker-prefix-cls}-cells-show-week-numbers {
              min-width: (@calendar-cells-width-with-weeknumbers + 20) * 2;
          }
  
      }
  
      &-with-week-numbers{
          .@{picker-prefix-cls}-panel{
              &-body-date {
                  min-width: (@calendar-cells-width-with-weeknumbers + 20) * 2;
              }
          }
      }
  
      &-transfer{
          z-index: @zindex-transfer;
          max-height: none;
          width: auto;
      }
  
      &-focused input{
          .active();
      }
  }
  
  .@{picker-prefix-cls} {
      &-panel{
          &-icon-btn{
              display: inline-block;
              width: 20px;
              height: 24px;
              line-height: 26px;
              margin-top: 4px;
              text-align: center;
              cursor: pointer;
              color: @btn-disable-color;
              transition: color @transition-time @ease-in-out;
              &:hover{
                  color: @primary-color;
              }
              i{
                  font-size: 14px;
              }
          }
  
          &-body-wrapper&-with-sidebar{
              padding-left: 92px;
          }
          &-sidebar{
              width: 92px;
              float: left;
              margin-left: -92px;
              position: absolute;
              top: 0;
              bottom: 0;
              background: @table-thead-bg;
              border-right: 1px solid @border-color-split;
              border-radius: @border-radius-small 0 0 @border-radius-small;
              overflow: auto;
          }
          &-shortcut{
              padding: @btn-padding-large;
              transition: all @transition-time @ease-in-out;
              cursor: pointer;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
  
              &:hover{
                  background: @border-color-split;
              }
          }
          &-body{
              float: left;
          }
      }
  
      &-confirm{
          border-top: 1px solid @border-color-split;
          text-align: right;
          padding: 8px;
          clear: both;
          & > span{
              color: @link-color;
              cursor: pointer;
              user-select: none;
              float: left;
              padding: 2px 0;
              transition: all @transition-time @ease-in-out;
              &:hover{
                  color: @link-hover-color;
              }
              &:active{
                  color: @link-active-color;
              }
          }
  
          &-time{
              float: left;
          }
      }
  }