@fundamental-styles/theming-preview 0.30.0-rc.2 → 0.30.0-rc.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/calendar.html +370 -288
- package/fundamental-styles.css +28 -27
- package/input.html +40 -0
- package/package.json +2 -2
- package/toolbar.html +2 -2
package/calendar.html
CHANGED
|
@@ -31,190 +31,280 @@
|
|
|
31
31
|
<div class="fd-panel__content fd-theming__flex" style="background-color: lightgrey;">
|
|
32
32
|
<div style="display: flex; justify-content: space-around;">
|
|
33
33
|
<section class="fd-calendar">
|
|
34
|
-
<header class="fd-
|
|
35
|
-
<div class="fd-
|
|
36
|
-
<
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
</button>
|
|
51
|
-
</div>
|
|
34
|
+
<header class="fd-calendar__navigation">
|
|
35
|
+
<div class="fd-calendar__action fd-calendar__action--arrow-left">
|
|
36
|
+
<button type="button" class="fd-button fd-button--transparent" aria-label="Previous">
|
|
37
|
+
<i class="sap-icon--slim-arrow-left"></i>
|
|
38
|
+
</button>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="fd-calendar__action">
|
|
41
|
+
<button type="button" class="fd-button fd-button--transparent">February</button>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="fd-calendar__action">
|
|
44
|
+
<button type="button" class="fd-button fd-button--transparent">2018</button>
|
|
45
|
+
</div>
|
|
46
|
+
<div class="fd-calendar__action fd-calendar__action--arrow-right">
|
|
47
|
+
<button type="button" class="fd-button fd-button--transparent" aria-label="Next">
|
|
48
|
+
<i class="sap-icon--slim-arrow-right"></i>
|
|
49
|
+
</button>
|
|
52
50
|
</div>
|
|
53
51
|
</header>
|
|
54
|
-
<
|
|
55
|
-
<
|
|
56
|
-
<
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
<
|
|
60
|
-
<span class="fd-calendar__text"
|
|
61
|
-
</
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
<span class="fd-calendar__text"
|
|
76
|
-
</
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
<
|
|
84
|
-
<
|
|
85
|
-
<span class="fd-calendar__text"
|
|
86
|
-
</
|
|
87
|
-
|
|
52
|
+
<table class="fd-calendar__content" id="IO0cp341" role="grid">
|
|
53
|
+
<thead class="fd-calendar__group">
|
|
54
|
+
<tr class="fd-calendar__row">
|
|
55
|
+
<th class="fd-calendar__item fd-calendar__item--side-helper"></th>
|
|
56
|
+
<th class="fd-calendar__item fd-calendar__item--side-helper">
|
|
57
|
+
<div class="fd-calendar__text-wrapper">
|
|
58
|
+
<span class="fd-calendar__text">S</span>
|
|
59
|
+
</div>
|
|
60
|
+
</th>
|
|
61
|
+
<th class="fd-calendar__item fd-calendar__item--side-helper">
|
|
62
|
+
<div class="fd-calendar__text-wrapper">
|
|
63
|
+
<span class="fd-calendar__text">M</span>
|
|
64
|
+
</div>
|
|
65
|
+
</th>
|
|
66
|
+
<th class="fd-calendar__item fd-calendar__item--side-helper">
|
|
67
|
+
<div class="fd-calendar__text-wrapper">
|
|
68
|
+
<span class="fd-calendar__text">T</span>
|
|
69
|
+
</div>
|
|
70
|
+
</th>
|
|
71
|
+
<th class="fd-calendar__item fd-calendar__item--side-helper">
|
|
72
|
+
<div class="fd-calendar__text-wrapper">
|
|
73
|
+
<span class="fd-calendar__text">W</span>
|
|
74
|
+
</div>
|
|
75
|
+
</th>
|
|
76
|
+
<th class="fd-calendar__item fd-calendar__item--side-helper">
|
|
77
|
+
<div class="fd-calendar__text-wrapper">
|
|
78
|
+
<span class="fd-calendar__text">T</span>
|
|
79
|
+
</div>
|
|
80
|
+
</th>
|
|
81
|
+
<th class="fd-calendar__item fd-calendar__item--side-helper">
|
|
82
|
+
<div class="fd-calendar__text-wrapper">
|
|
83
|
+
<span class="fd-calendar__text">F</span>
|
|
84
|
+
</div>
|
|
85
|
+
</th>
|
|
86
|
+
<th class="fd-calendar__item fd-calendar__item--side-helper">
|
|
87
|
+
<div class="fd-calendar__text-wrapper">
|
|
88
|
+
<span class="fd-calendar__text">S</span>
|
|
89
|
+
</div>
|
|
90
|
+
</th>
|
|
91
|
+
</tr>
|
|
92
|
+
</thead>
|
|
93
|
+
<tbody class="fd-calendar__group">
|
|
94
|
+
<tr class="fd-calendar__row">
|
|
95
|
+
<td class="fd-calendar__item fd-calendar__item--side-helper">
|
|
96
|
+
<div class="fd-calendar__text-wrapper">
|
|
97
|
+
<span class="fd-calendar__text">5</span>
|
|
98
|
+
</div>
|
|
99
|
+
</td>
|
|
100
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--other">
|
|
101
|
+
<div class="fd-calendar__text-wrapper">
|
|
88
102
|
<span class="fd-calendar__text" role="button">30</span>
|
|
89
|
-
</
|
|
90
|
-
|
|
103
|
+
</div>
|
|
104
|
+
</td>
|
|
105
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--other">
|
|
106
|
+
<div class="fd-calendar__text-wrapper">
|
|
91
107
|
<span class="fd-calendar__text" role="button">31</span>
|
|
92
|
-
</
|
|
93
|
-
|
|
108
|
+
</div>
|
|
109
|
+
</td>
|
|
110
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
111
|
+
<div class="fd-calendar__text-wrapper">
|
|
94
112
|
<span class="fd-calendar__text" role="button">1</span>
|
|
95
|
-
</
|
|
96
|
-
|
|
113
|
+
</div>
|
|
114
|
+
</td>
|
|
115
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
116
|
+
<div class="fd-calendar__text-wrapper">
|
|
97
117
|
<span class="fd-calendar__text" role="button">2</span>
|
|
98
|
-
</
|
|
99
|
-
|
|
118
|
+
</div>
|
|
119
|
+
</td>
|
|
120
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
121
|
+
<div class="fd-calendar__text-wrapper">
|
|
100
122
|
<span class="fd-calendar__text" role="button">3</span>
|
|
101
|
-
</
|
|
102
|
-
|
|
123
|
+
</div>
|
|
124
|
+
</td>
|
|
125
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--weekend">
|
|
126
|
+
<div class="fd-calendar__text-wrapper">
|
|
103
127
|
<span class="fd-calendar__text" role="button">4</span>
|
|
104
|
-
</
|
|
105
|
-
|
|
128
|
+
</div>
|
|
129
|
+
</td>
|
|
130
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--weekend">
|
|
131
|
+
<div class="fd-calendar__text-wrapper">
|
|
106
132
|
<span class="fd-calendar__text" role="button">5</span>
|
|
107
|
-
</
|
|
108
|
-
</
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
133
|
+
</div>
|
|
134
|
+
</td>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr class="fd-calendar__row">
|
|
137
|
+
<td class="fd-calendar__item fd-calendar__item--side-helper">
|
|
138
|
+
<div class="fd-calendar__text-wrapper">
|
|
139
|
+
<span class="fd-calendar__text">6</span>
|
|
140
|
+
</div>
|
|
141
|
+
</td>
|
|
142
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
143
|
+
<div class="fd-calendar__text-wrapper">
|
|
114
144
|
<span class="fd-calendar__text" role="button">6</span>
|
|
115
|
-
</
|
|
116
|
-
|
|
145
|
+
</div>
|
|
146
|
+
</td>
|
|
147
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
148
|
+
<div class="fd-calendar__text-wrapper">
|
|
117
149
|
<span class="fd-calendar__text" role="button">7</span>
|
|
118
|
-
</
|
|
119
|
-
|
|
150
|
+
</div>
|
|
151
|
+
</td>
|
|
152
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
153
|
+
<div class="fd-calendar__text-wrapper">
|
|
120
154
|
<span class="fd-calendar__text" role="button">8</span>
|
|
121
|
-
</
|
|
122
|
-
|
|
155
|
+
</div>
|
|
156
|
+
</td>
|
|
157
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
158
|
+
<div class="fd-calendar__text-wrapper">
|
|
123
159
|
<span class="fd-calendar__text" role="button">9</span>
|
|
124
|
-
</
|
|
125
|
-
|
|
160
|
+
</div>
|
|
161
|
+
</td>
|
|
162
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
163
|
+
<div class="fd-calendar__text-wrapper">
|
|
126
164
|
<span class="fd-calendar__text" role="button">10</span>
|
|
127
|
-
</
|
|
128
|
-
|
|
165
|
+
</div>
|
|
166
|
+
</td>
|
|
167
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--weekend">
|
|
168
|
+
<div class="fd-calendar__text-wrapper">
|
|
129
169
|
<span class="fd-calendar__text" role="button">11</span>
|
|
130
|
-
</
|
|
131
|
-
|
|
170
|
+
</div>
|
|
171
|
+
</td>
|
|
172
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--weekend">
|
|
173
|
+
<div class="fd-calendar__text-wrapper">
|
|
132
174
|
<span class="fd-calendar__text" role="button">12</span>
|
|
133
|
-
</
|
|
134
|
-
</
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
175
|
+
</div>
|
|
176
|
+
</td>
|
|
177
|
+
</tr>
|
|
178
|
+
<tr class="fd-calendar__row">
|
|
179
|
+
<td class="fd-calendar__item fd-calendar__item--side-helper">
|
|
180
|
+
<div class="fd-calendar__text-wrapper">
|
|
181
|
+
<span class="fd-calendar__text">7</span>
|
|
182
|
+
</div>
|
|
183
|
+
</td>
|
|
184
|
+
<td aria-selected="true" role="gridcell" class="fd-calendar__item fd-calendar__item--selected">
|
|
185
|
+
<div class="fd-calendar__text-wrapper">
|
|
140
186
|
<span class="fd-calendar__text" role="button">13</span>
|
|
141
|
-
</
|
|
142
|
-
|
|
187
|
+
</div>
|
|
188
|
+
</td>
|
|
189
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--range">
|
|
190
|
+
<div class="fd-calendar__text-wrapper">
|
|
143
191
|
<span class="fd-calendar__text" role="button">14</span>
|
|
144
|
-
</
|
|
145
|
-
|
|
192
|
+
</div>
|
|
193
|
+
</td>
|
|
194
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--range">
|
|
195
|
+
<div class="fd-calendar__text-wrapper">
|
|
146
196
|
<span class="fd-calendar__text" role="button">15</span>
|
|
147
|
-
</
|
|
148
|
-
|
|
197
|
+
</div>
|
|
198
|
+
</td>
|
|
199
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--range">
|
|
200
|
+
<div class="fd-calendar__text-wrapper">
|
|
149
201
|
<span class="fd-calendar__text" role="button">16</span>
|
|
150
|
-
</
|
|
151
|
-
|
|
202
|
+
</div>
|
|
203
|
+
</td>
|
|
204
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--range fd-calendar__item--legend-7">
|
|
205
|
+
<div class="fd-calendar__text-wrapper">
|
|
152
206
|
<span class="fd-calendar__text" role="button">17</span>
|
|
153
|
-
</
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
207
|
+
</div>
|
|
208
|
+
</td>
|
|
209
|
+
<td aria-selected="true" role="gridcell"
|
|
210
|
+
class="fd-calendar__item fd-calendar__item--weekend
|
|
211
|
+
fd-calendar__item--selected fd-calendar__item--legend-1">
|
|
212
|
+
<div class="fd-calendar__text-wrapper">
|
|
213
|
+
<span class="fd-calendar__text" role="button">18</span>
|
|
214
|
+
</div>
|
|
215
|
+
</td>
|
|
216
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--weekend fd-calendar__item--legend-5">
|
|
217
|
+
<div class="fd-calendar__text-wrapper">
|
|
160
218
|
<span class="fd-calendar__text" role="button">19</span>
|
|
161
|
-
</
|
|
162
|
-
</
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
219
|
+
</div>
|
|
220
|
+
</td>
|
|
221
|
+
</tr>
|
|
222
|
+
<tr class="fd-calendar__row">
|
|
223
|
+
<td class="fd-calendar__item fd-calendar__item--side-helper">
|
|
224
|
+
<div class="fd-calendar__text-wrapper">
|
|
225
|
+
<span class="fd-calendar__text">8</span>
|
|
226
|
+
</div>
|
|
227
|
+
</td>
|
|
228
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
229
|
+
<div class="fd-calendar__text-wrapper">
|
|
168
230
|
<span class="fd-calendar__text" role="button">20</span>
|
|
169
|
-
</
|
|
170
|
-
|
|
231
|
+
</div>
|
|
232
|
+
</td>
|
|
233
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
234
|
+
<div class="fd-calendar__text-wrapper">
|
|
171
235
|
<span class="fd-calendar__text" role="button">21</span>
|
|
172
|
-
</
|
|
173
|
-
|
|
236
|
+
</div>
|
|
237
|
+
</td>
|
|
238
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
239
|
+
<div class="fd-calendar__text-wrapper">
|
|
174
240
|
<span class="fd-calendar__text" role="button">22</span>
|
|
175
|
-
</
|
|
176
|
-
|
|
241
|
+
</div>
|
|
242
|
+
</td>
|
|
243
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
244
|
+
<div class="fd-calendar__text-wrapper">
|
|
177
245
|
<span class="fd-calendar__text" role="button">23</span>
|
|
178
|
-
</
|
|
179
|
-
|
|
246
|
+
</div>
|
|
247
|
+
</td>
|
|
248
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--legend-3">
|
|
249
|
+
<div class="fd-calendar__text-wrapper">
|
|
180
250
|
<span class="fd-calendar__text" role="button">24</span>
|
|
181
|
-
</
|
|
182
|
-
|
|
251
|
+
</div>
|
|
252
|
+
</td>
|
|
253
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--weekend fd-calendar__item--legend-9">
|
|
254
|
+
<div class="fd-calendar__text-wrapper">
|
|
183
255
|
<span class="fd-calendar__text" role="button">25</span>
|
|
184
|
-
</
|
|
185
|
-
|
|
256
|
+
</div>
|
|
257
|
+
</td>
|
|
258
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--weekend">
|
|
259
|
+
<div class="fd-calendar__text-wrapper">
|
|
186
260
|
<span class="fd-calendar__text" role="button">26</span>
|
|
187
|
-
</
|
|
188
|
-
</
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
261
|
+
</div>
|
|
262
|
+
</td>
|
|
263
|
+
</tr>
|
|
264
|
+
<tr class="fd-calendar__row">
|
|
265
|
+
<td class="fd-calendar__item fd-calendar__item--side-helper">
|
|
266
|
+
<div class="fd-calendar__text-wrapper">
|
|
267
|
+
<span class="fd-calendar__text">9</span>
|
|
268
|
+
</div>
|
|
269
|
+
</td>
|
|
270
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
271
|
+
<div class="fd-calendar__text-wrapper">
|
|
194
272
|
<span class="fd-calendar__text" role="button">27</span>
|
|
195
|
-
</
|
|
196
|
-
|
|
273
|
+
</div>
|
|
274
|
+
</td>
|
|
275
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
276
|
+
<div class="fd-calendar__text-wrapper">
|
|
197
277
|
<span class="fd-calendar__text" role="button">28</span>
|
|
198
|
-
</
|
|
199
|
-
|
|
278
|
+
</div>
|
|
279
|
+
</td>
|
|
280
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--other">
|
|
281
|
+
<div class="fd-calendar__text-wrapper">
|
|
200
282
|
<span class="fd-calendar__text" role="button">1</span>
|
|
201
|
-
</
|
|
202
|
-
|
|
283
|
+
</div>
|
|
284
|
+
</td>
|
|
285
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--other">
|
|
286
|
+
<div class="fd-calendar__text-wrapper">
|
|
203
287
|
<span class="fd-calendar__text" role="button">2</span>
|
|
204
|
-
</
|
|
205
|
-
|
|
288
|
+
</div>
|
|
289
|
+
</td>
|
|
290
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--other">
|
|
291
|
+
<div class="fd-calendar__text-wrapper">
|
|
206
292
|
<span class="fd-calendar__text" role="button">3</span>
|
|
207
|
-
</
|
|
208
|
-
|
|
293
|
+
</div>
|
|
294
|
+
</td>
|
|
295
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--other">
|
|
296
|
+
<div class="fd-calendar__text-wrapper">
|
|
209
297
|
<span class="fd-calendar__text" role="button">4</span>
|
|
210
|
-
</
|
|
211
|
-
|
|
298
|
+
</div>
|
|
299
|
+
</td>
|
|
300
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--other">
|
|
301
|
+
<div class="fd-calendar__text-wrapper">
|
|
212
302
|
<span class="fd-calendar__text" role="button">5</span>
|
|
213
|
-
</
|
|
214
|
-
</
|
|
215
|
-
</
|
|
216
|
-
</
|
|
217
|
-
</
|
|
303
|
+
</div>
|
|
304
|
+
</td>
|
|
305
|
+
</tr>
|
|
306
|
+
</tbody>
|
|
307
|
+
</table>
|
|
218
308
|
<div aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</div>
|
|
219
309
|
</section>
|
|
220
310
|
</div>
|
|
@@ -222,76 +312,72 @@
|
|
|
222
312
|
|
|
223
313
|
<div style="display: flex; justify-content: space-around;">
|
|
224
314
|
<section class="fd-calendar">
|
|
225
|
-
<header class="fd-
|
|
226
|
-
<div class="fd-
|
|
227
|
-
<
|
|
228
|
-
<
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
<
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
<
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
<
|
|
239
|
-
<
|
|
240
|
-
|
|
241
|
-
</button>
|
|
242
|
-
</div>
|
|
315
|
+
<header class="fd-calendar__navigation">
|
|
316
|
+
<div class="fd-calendar__action fd-calendar__action--arrow-left">
|
|
317
|
+
<button type="button" class="fd-button fd-button--transparent" aria-label="Previous">
|
|
318
|
+
<i class="sap-icon--slim-arrow-left"></i>
|
|
319
|
+
</button>
|
|
320
|
+
</div>
|
|
321
|
+
<div class="fd-calendar__action">
|
|
322
|
+
<button type="button" class="fd-button fd-button--transparent">January</button>
|
|
323
|
+
</div>
|
|
324
|
+
<div class="fd-calendar__action">
|
|
325
|
+
<button type="button" class="fd-button fd-button--transparent">2018</button>
|
|
326
|
+
</div>
|
|
327
|
+
<div class="fd-calendar__action fd-calendar__action--arrow-right">
|
|
328
|
+
<button type="button" class="fd-button fd-button--transparent" aria-label="Next">
|
|
329
|
+
<i class="sap-icon--slim-arrow-right"></i>
|
|
330
|
+
</button>
|
|
243
331
|
</div>
|
|
244
332
|
</header>
|
|
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
|
-
</table>
|
|
294
|
-
</div>
|
|
333
|
+
<table class="fd-calendar__content fd-calendar__content--months" id="1jjVw927" role="grid">
|
|
334
|
+
<tbody class="fd-calendar__group">
|
|
335
|
+
<tr class="fd-calendar__row">
|
|
336
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--current">
|
|
337
|
+
<span class="fd-calendar__text" role="button">January</span>
|
|
338
|
+
</td>
|
|
339
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
340
|
+
<span class="fd-calendar__text" role="button">February</span>
|
|
341
|
+
</td>
|
|
342
|
+
<td aria-selected="true" role="gridcell" class="fd-calendar__item is-active">
|
|
343
|
+
<span class="fd-calendar__text" role="button">March</span>
|
|
344
|
+
</td>
|
|
345
|
+
</tr>
|
|
346
|
+
<tr class="fd-calendar__row">
|
|
347
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
348
|
+
<span class="fd-calendar__text" role="button">April</span>
|
|
349
|
+
</td>
|
|
350
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
351
|
+
<span class="fd-calendar__text" role="button">May</span>
|
|
352
|
+
</td>
|
|
353
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
354
|
+
<span class="fd-calendar__text" role="button">June</span>
|
|
355
|
+
</td>
|
|
356
|
+
</tr>
|
|
357
|
+
<tr class="fd-calendar__row">
|
|
358
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
359
|
+
<span class="fd-calendar__text" role="button">July</span>
|
|
360
|
+
</td>
|
|
361
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
362
|
+
<span class="fd-calendar__text" role="button">August</span>
|
|
363
|
+
</td>
|
|
364
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
365
|
+
<span class="fd-calendar__text" role="button">September</span>
|
|
366
|
+
</td>
|
|
367
|
+
</tr>
|
|
368
|
+
<tr class="fd-calendar__row">
|
|
369
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
370
|
+
<span class="fd-calendar__text" role="button">October</span>
|
|
371
|
+
</td>
|
|
372
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
373
|
+
<span class="fd-calendar__text" role="button">November</span>
|
|
374
|
+
</td>
|
|
375
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
376
|
+
<span class="fd-calendar__text" role="button">December</span>
|
|
377
|
+
</td>
|
|
378
|
+
</tr>
|
|
379
|
+
</tbody>
|
|
380
|
+
</table>
|
|
295
381
|
<div aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">
|
|
296
382
|
Use arrow keys to navigate dates
|
|
297
383
|
</div>
|
|
@@ -301,80 +387,76 @@
|
|
|
301
387
|
|
|
302
388
|
<div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;">
|
|
303
389
|
<section class="fd-calendar" style="margin-bottom: 1rem;">
|
|
304
|
-
<header class="fd-
|
|
305
|
-
<div class="fd-
|
|
306
|
-
<
|
|
307
|
-
<
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
<
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
<
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
<
|
|
318
|
-
<
|
|
319
|
-
|
|
320
|
-
</button>
|
|
321
|
-
</div>
|
|
390
|
+
<header class="fd-calendar__navigation">
|
|
391
|
+
<div class="fd-calendar__action fd-calendar__action--arrow-left">
|
|
392
|
+
<button type="button" class="fd-button fd-button--transparent" aria-label="Previous">
|
|
393
|
+
<i class="sap-icon--slim-arrow-left"></i>
|
|
394
|
+
</button>
|
|
395
|
+
</div>
|
|
396
|
+
<div class="fd-calendar__action">
|
|
397
|
+
<button type="button" class="fd-button fd-button--transparent">January</button>
|
|
398
|
+
</div>
|
|
399
|
+
<div class="fd-calendar__action">
|
|
400
|
+
<button type="button" class="fd-button fd-button--transparent">2018</button>
|
|
401
|
+
</div>
|
|
402
|
+
<div class="fd-calendar__action fd-calendar__action--arrow-right">
|
|
403
|
+
<button type="button" class="fd-button fd-button--transparent" aria-label="Next">
|
|
404
|
+
<i class="sap-icon--slim-arrow-right"></i>
|
|
405
|
+
</button>
|
|
322
406
|
</div>
|
|
323
407
|
</header>
|
|
324
|
-
<
|
|
325
|
-
<
|
|
326
|
-
<
|
|
327
|
-
<
|
|
328
|
-
<
|
|
329
|
-
|
|
330
|
-
<
|
|
331
|
-
|
|
332
|
-
<
|
|
333
|
-
|
|
334
|
-
<
|
|
335
|
-
|
|
336
|
-
<
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
<
|
|
340
|
-
<
|
|
341
|
-
|
|
342
|
-
<
|
|
343
|
-
|
|
344
|
-
<
|
|
345
|
-
|
|
346
|
-
<
|
|
347
|
-
|
|
348
|
-
<
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
<
|
|
352
|
-
<
|
|
353
|
-
|
|
354
|
-
<
|
|
355
|
-
|
|
356
|
-
<
|
|
357
|
-
|
|
358
|
-
<
|
|
359
|
-
|
|
360
|
-
<
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
<
|
|
364
|
-
<
|
|
365
|
-
|
|
366
|
-
<
|
|
367
|
-
|
|
368
|
-
<
|
|
369
|
-
|
|
370
|
-
<
|
|
371
|
-
|
|
372
|
-
<
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
</table>
|
|
377
|
-
</div>
|
|
408
|
+
<table class="fd-calendar__content fd-calendar__content--years " id="57YUZ521" role="grid">
|
|
409
|
+
<tbody class="fd-calendar__group">
|
|
410
|
+
<tr class="fd-calendar__row">
|
|
411
|
+
<td role="gridcell" class="fd-calendar__item fd-calendar__item--current">
|
|
412
|
+
<span class="fd-calendar__text" role="button">2018</span></td>
|
|
413
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
414
|
+
<span class="fd-calendar__text" role="button">2019</span></td>
|
|
415
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
416
|
+
<span class="fd-calendar__text" role="button">2020</span></td>
|
|
417
|
+
<td role="gridcell" class="fd-calendar__item is-selected">
|
|
418
|
+
<span class="fd-calendar__text" role="button">2021</span></td>
|
|
419
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
420
|
+
<span class="fd-calendar__text" role="button">2022</span></td>
|
|
421
|
+
</tr>
|
|
422
|
+
<tr class="fd-calendar__row">
|
|
423
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
424
|
+
<span class="fd-calendar__text" role="button">2023</span></td>
|
|
425
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
426
|
+
<span class="fd-calendar__text" role="button">2024</span></td>
|
|
427
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
428
|
+
<span class="fd-calendar__text" role="button">2025</span></td>
|
|
429
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
430
|
+
<span class="fd-calendar__text" role="button">2026</span></td>
|
|
431
|
+
<td aria-selected="true" role="gridcell" class="fd-calendar__item is-active">
|
|
432
|
+
<span class="fd-calendar__text" role="button">2027</span></td>
|
|
433
|
+
</tr>
|
|
434
|
+
<tr class="fd-calendar__row">
|
|
435
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
436
|
+
<span class="fd-calendar__text" role="button">2028</span></td>
|
|
437
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
438
|
+
<span class="fd-calendar__text" role="button">2029</span></td>
|
|
439
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
440
|
+
<span class="fd-calendar__text" role="button">2030</span></td>
|
|
441
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
442
|
+
<span class="fd-calendar__text" role="button">2031</span></td>
|
|
443
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
444
|
+
<span class="fd-calendar__text" role="button">2032</span></td>
|
|
445
|
+
</tr>
|
|
446
|
+
<tr class="fd-calendar__row">
|
|
447
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
448
|
+
<span class="fd-calendar__text" role="button">2033</span></td>
|
|
449
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
450
|
+
<span class="fd-calendar__text" role="button">2034</span></td>
|
|
451
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
452
|
+
<span class="fd-calendar__text" role="button">2035</span></td>
|
|
453
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
454
|
+
<span class="fd-calendar__text" role="button">2036</span></td>
|
|
455
|
+
<td role="gridcell" class="fd-calendar__item">
|
|
456
|
+
<span class="fd-calendar__text" role="button">2037</span></td>
|
|
457
|
+
</tr>
|
|
458
|
+
</tbody>
|
|
459
|
+
</table>
|
|
378
460
|
<div aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</div>
|
|
379
461
|
</section>
|
|
380
462
|
</div>
|