@fundamental-styles/theming-preview 0.30.0-rc.8 → 0.30.0
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/button.html +149 -139
- package/calendar.html +450 -289
- package/form.html +26 -26
- package/fundamental-styles.css +4 -140
- package/header-footer.html +15 -15
- package/icon.html +5 -5
- package/input.html +141 -61
- package/object-header.html +3 -3
- package/package.json +2 -2
- package/panel.html +16 -13
- package/semantic-colors.html +24 -12
- package/shell-tile-card.html +281 -199
- package/table.html +16 -16
- package/text.html +30 -18
- package/toolbar.html +31 -31
package/calendar.html
CHANGED
|
@@ -31,350 +31,511 @@
|
|
|
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>
|
|
221
311
|
   
|
|
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
|
-
<div class="fd-calendar__action fd-calendar__action--arrow-right">
|
|
239
|
-
<button type="button" class="fd-button fd-button--transparent" aria-label="Next">
|
|
240
|
-
<i class="sap-icon--slim-arrow-right"></i>
|
|
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">2018</button>
|
|
323
|
+
</div>
|
|
324
|
+
<div class="fd-calendar__action fd-calendar__action--arrow-right">
|
|
325
|
+
<button type="button" class="fd-button fd-button--transparent" aria-label="Next">
|
|
326
|
+
<i class="sap-icon--slim-arrow-right"></i>
|
|
327
|
+
</button>
|
|
243
328
|
</div>
|
|
244
329
|
</header>
|
|
245
|
-
<
|
|
246
|
-
<
|
|
247
|
-
<
|
|
248
|
-
<
|
|
249
|
-
<
|
|
250
|
-
<span class="fd-calendar__text"
|
|
251
|
-
</
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
<
|
|
267
|
-
<span class="fd-calendar__text"
|
|
268
|
-
</
|
|
269
|
-
</
|
|
270
|
-
|
|
271
|
-
<
|
|
272
|
-
<span class="fd-calendar__text"
|
|
273
|
-
</
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
<
|
|
289
|
-
<span class="fd-calendar__text"
|
|
290
|
-
</
|
|
291
|
-
</
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
330
|
+
<table class="fd-calendar__content fd-calendar__content--months" id="1jjVw927" role="grid">
|
|
331
|
+
<tbody class="fd-calendar__group">
|
|
332
|
+
<tr class="fd-calendar__row">
|
|
333
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
334
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
335
|
+
<span class="fd-calendar__text">January</span>
|
|
336
|
+
</button>
|
|
337
|
+
</td>
|
|
338
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
339
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
340
|
+
<span class="fd-calendar__text">February</span>
|
|
341
|
+
</button>
|
|
342
|
+
</td>
|
|
343
|
+
<td aria-selected="true" role="gridcell" class="fd-calendar__my-item">
|
|
344
|
+
<button class="fd-button fd-button--transparent fd-button--toggled fd-calendar__my-item-button" type="button">
|
|
345
|
+
<span class="fd-calendar__text">March</span>
|
|
346
|
+
</button>
|
|
347
|
+
</td>
|
|
348
|
+
</tr>
|
|
349
|
+
<tr class="fd-calendar__row">
|
|
350
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
351
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
352
|
+
<span class="fd-calendar__text">April</span>
|
|
353
|
+
</button>
|
|
354
|
+
</td>
|
|
355
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
356
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
357
|
+
<span class="fd-calendar__text">May</span>
|
|
358
|
+
</button>
|
|
359
|
+
</td>
|
|
360
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
361
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
362
|
+
<span class="fd-calendar__text">June</span>
|
|
363
|
+
</button>
|
|
364
|
+
</td>
|
|
365
|
+
</tr>
|
|
366
|
+
<tr class="fd-calendar__row">
|
|
367
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
368
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
369
|
+
<span class="fd-calendar__text">July</span>
|
|
370
|
+
</button>
|
|
371
|
+
</td>
|
|
372
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
373
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
374
|
+
<span class="fd-calendar__text">August</span>
|
|
375
|
+
</button>
|
|
376
|
+
</td>
|
|
377
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
378
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
379
|
+
<span class="fd-calendar__text">September</span>
|
|
380
|
+
</button>
|
|
381
|
+
</td>
|
|
382
|
+
</tr>
|
|
383
|
+
<tr class="fd-calendar__row">
|
|
384
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
385
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
386
|
+
<span class="fd-calendar__text">October</span>
|
|
387
|
+
</button>
|
|
388
|
+
</td>
|
|
389
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
390
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
391
|
+
<span class="fd-calendar__text">November</span>
|
|
392
|
+
</button>
|
|
393
|
+
</td>
|
|
394
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
395
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
396
|
+
<span class="fd-calendar__text">December</span>
|
|
397
|
+
</button>
|
|
398
|
+
</td>
|
|
399
|
+
</tr>
|
|
400
|
+
</tbody>
|
|
401
|
+
</table>
|
|
295
402
|
<div aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">
|
|
296
403
|
Use arrow keys to navigate dates
|
|
297
404
|
</div>
|
|
298
405
|
</section>
|
|
299
406
|
</div>
|
|
407
|
+
|
|
300
408
|
   
|
|
301
409
|
|
|
302
410
|
<div style="display: flex; justify-content: space-around; margin-bottom: 1rem; flex-wrap: wrap;">
|
|
303
411
|
<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
|
-
<div class="fd-calendar__action fd-calendar__action--arrow-right">
|
|
318
|
-
<button type="button" class="fd-button fd-button--transparent" aria-label="Next">
|
|
319
|
-
<i class="sap-icon--slim-arrow-right"></i>
|
|
320
|
-
</button>
|
|
321
|
-
</div>
|
|
412
|
+
<header class="fd-calendar__navigation">
|
|
413
|
+
<div class="fd-calendar__action fd-calendar__action--arrow-left">
|
|
414
|
+
<button type="button" class="fd-button fd-button--transparent" aria-label="Previous">
|
|
415
|
+
<i class="sap-icon--slim-arrow-left"></i>
|
|
416
|
+
</button>
|
|
417
|
+
</div>
|
|
418
|
+
<div class="fd-calendar__action">
|
|
419
|
+
<button type="button" class="fd-button fd-button--transparent">2018 - 2037</button>
|
|
420
|
+
</div>
|
|
421
|
+
<div class="fd-calendar__action fd-calendar__action--arrow-right">
|
|
422
|
+
<button type="button" class="fd-button fd-button--transparent" aria-label="Next">
|
|
423
|
+
<i class="sap-icon--slim-arrow-right"></i>
|
|
424
|
+
</button>
|
|
322
425
|
</div>
|
|
323
426
|
</header>
|
|
324
|
-
<
|
|
325
|
-
<
|
|
326
|
-
<
|
|
327
|
-
<
|
|
328
|
-
<
|
|
329
|
-
<span class="fd-calendar__text"
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
<
|
|
349
|
-
<span class="fd-calendar__text"
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
<
|
|
361
|
-
<span class="fd-calendar__text"
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
<
|
|
371
|
-
<span class="fd-calendar__text"
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
427
|
+
<table class="fd-calendar__content fd-calendar__content--years " id="57YUZ521" role="grid">
|
|
428
|
+
<tbody class="fd-calendar__group">
|
|
429
|
+
<tr class="fd-calendar__row">
|
|
430
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
431
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
432
|
+
<span class="fd-calendar__text">2018</span>
|
|
433
|
+
</button>
|
|
434
|
+
</td>
|
|
435
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
436
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
437
|
+
<span class="fd-calendar__text">2019</span>
|
|
438
|
+
</button>
|
|
439
|
+
</td>
|
|
440
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
441
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
442
|
+
<span class="fd-calendar__text">2020</span>
|
|
443
|
+
</button>
|
|
444
|
+
</td>
|
|
445
|
+
<td role="gridcell" class="fd-calendar__my-item is-selected">
|
|
446
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
447
|
+
<span class="fd-calendar__text">2021</span>
|
|
448
|
+
</button>
|
|
449
|
+
</td>
|
|
450
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
451
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
452
|
+
<span class="fd-calendar__text">2022</span>
|
|
453
|
+
</button>
|
|
454
|
+
</td>
|
|
455
|
+
</tr>
|
|
456
|
+
<tr class="fd-calendar__row">
|
|
457
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
458
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
459
|
+
<span class="fd-calendar__text">2023</span>
|
|
460
|
+
</button>
|
|
461
|
+
</td>
|
|
462
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
463
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
464
|
+
<span class="fd-calendar__text">2024</span>
|
|
465
|
+
</button>
|
|
466
|
+
</td>
|
|
467
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
468
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
469
|
+
<span class="fd-calendar__text">2025</span>
|
|
470
|
+
</button>
|
|
471
|
+
</td>
|
|
472
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
473
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
474
|
+
<span class="fd-calendar__text">2026</span>
|
|
475
|
+
</button>
|
|
476
|
+
</td>
|
|
477
|
+
<td aria-selected="true" role="gridcell" class="fd-calendar__my-item">
|
|
478
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button is-active" type="button">
|
|
479
|
+
<span class="fd-calendar__text">2027</span>
|
|
480
|
+
</button>
|
|
481
|
+
</td>
|
|
482
|
+
</tr>
|
|
483
|
+
<tr class="fd-calendar__row">
|
|
484
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
485
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
486
|
+
<span class="fd-calendar__text">2028</span>
|
|
487
|
+
</button>
|
|
488
|
+
</td>
|
|
489
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
490
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
491
|
+
<span class="fd-calendar__text">2029</span>
|
|
492
|
+
</button>
|
|
493
|
+
</td>
|
|
494
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
495
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
496
|
+
<span class="fd-calendar__text">2030</span>
|
|
497
|
+
</button>
|
|
498
|
+
</td>
|
|
499
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
500
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
501
|
+
<span class="fd-calendar__text">2031</span>
|
|
502
|
+
</button>
|
|
503
|
+
</td>
|
|
504
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
505
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
506
|
+
<span class="fd-calendar__text">2032</span>
|
|
507
|
+
</button>
|
|
508
|
+
</td>
|
|
509
|
+
</tr>
|
|
510
|
+
<tr class="fd-calendar__row">
|
|
511
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
512
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
513
|
+
<span class="fd-calendar__text">2033</span>
|
|
514
|
+
</button>
|
|
515
|
+
</td>
|
|
516
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
517
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
518
|
+
<span class="fd-calendar__text">2034</span>
|
|
519
|
+
</button>
|
|
520
|
+
</td>
|
|
521
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
522
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
523
|
+
<span class="fd-calendar__text">2035</span>
|
|
524
|
+
</button>
|
|
525
|
+
</td>
|
|
526
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
527
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
528
|
+
<span class="fd-calendar__text">2036</span>
|
|
529
|
+
</button>
|
|
530
|
+
</td>
|
|
531
|
+
<td role="gridcell" class="fd-calendar__my-item">
|
|
532
|
+
<button class="fd-button fd-button--transparent fd-calendar__my-item-button" type="button">
|
|
533
|
+
<span class="fd-calendar__text">2037</span>
|
|
534
|
+
</button>
|
|
535
|
+
</td>
|
|
536
|
+
</tr>
|
|
537
|
+
</tbody>
|
|
538
|
+
</table>
|
|
378
539
|
<div aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</div>
|
|
379
540
|
</section>
|
|
380
541
|
</div>
|