@fundamental-styles/mcp 0.41.9-rc.21 → 0.41.9-rc.22
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/data/CHANGELOG.md +9 -3
- package/data/components/dialog-docs-static-settings.md +1490 -130
- package/data/examples/Components/settings/md.example.html +124 -30
- package/data/examples/Components/settings/sm.example.html +64 -27
- package/data/examples/Components/settings/xl-appearance.example.html +370 -0
- package/data/examples/Components/settings/xl-language-region.example.html +284 -0
- package/data/examples/Components/settings/xl-notifications-details.example.html +240 -0
- package/data/examples/Components/settings/xl-notifications.example.html +370 -0
- package/data/examples/Components/settings/xl-user-account.example.html +114 -0
- package/data/examples/Components/settings/xl.example.html +113 -25
- package/package.json +1 -1
- package/data/examples/Components/settings/xl-default.example.html +0 -108
|
@@ -0,0 +1,370 @@
|
|
|
1
|
+
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
2
|
+
<div
|
|
3
|
+
class="fd-dialog__content fd-settings__dialog-content"
|
|
4
|
+
role="dialog"
|
|
5
|
+
aria-modal="true"
|
|
6
|
+
aria-labelledby="dialog-title-1"
|
|
7
|
+
style="height: 800px"
|
|
8
|
+
>
|
|
9
|
+
<div class="fd-dialog__body fd-settings__dialog-body">
|
|
10
|
+
<div class="fd-settings__container">
|
|
11
|
+
<div class="fd-settings__list-area">
|
|
12
|
+
<div class="fd-bar fd-bar--header">
|
|
13
|
+
<div class="fd-bar__left">
|
|
14
|
+
<div class="fd-bar__element">
|
|
15
|
+
<h1 class="fd-title fd-title--h5" aria-label="text">Settings</h1>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="fd-settings__list-container">
|
|
20
|
+
<ul
|
|
21
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
|
|
22
|
+
role="list"
|
|
23
|
+
>
|
|
24
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
25
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
26
|
+
<i role="presentation" class="fd-list__icon sap-icon--user-settings"></i>
|
|
27
|
+
<span class="fd-list__title">User Account</span>
|
|
28
|
+
</a>
|
|
29
|
+
</li>
|
|
30
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link is-selected">
|
|
31
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
32
|
+
<i role="presentation" class="fd-list__icon sap-icon--palette"></i>
|
|
33
|
+
<span class="fd-list__title">Appearance</span>
|
|
34
|
+
</a>
|
|
35
|
+
</li>
|
|
36
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
37
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
38
|
+
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
39
|
+
<span class="fd-list__title">Language & Region</span>
|
|
40
|
+
</a>
|
|
41
|
+
</li>
|
|
42
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
43
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
44
|
+
<i role="presentation" class="fd-list__icon sap-icon--iphone"></i>
|
|
45
|
+
<span class="fd-list__title">SAP Mobile Start Application</span>
|
|
46
|
+
</a>
|
|
47
|
+
</li>
|
|
48
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
49
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
50
|
+
<i role="presentation" class="fd-list__icon sap-icon--bell"></i>
|
|
51
|
+
<span class="fd-list__title">Notifications</span>
|
|
52
|
+
</a>
|
|
53
|
+
</li>
|
|
54
|
+
</ul>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="fd-settings__detail-area">
|
|
58
|
+
<div class="fd-bar fd-bar--header fd-settings__header">
|
|
59
|
+
<div class="fd-bar__left">
|
|
60
|
+
<div class="fd-bar__element">
|
|
61
|
+
<h2 class="fd-title fd-title--h5" aria-label="text">Appearance</h2>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="fd-settings__content fd-settings__content--no-background">
|
|
67
|
+
<div class="fd-settings__content-container">
|
|
68
|
+
<div
|
|
69
|
+
style="
|
|
70
|
+
background: cornsilk;
|
|
71
|
+
height: 5rem;
|
|
72
|
+
width: 100%;
|
|
73
|
+
display: flex;
|
|
74
|
+
justify-content: center;
|
|
75
|
+
align-items: center;
|
|
76
|
+
"
|
|
77
|
+
>
|
|
78
|
+
Content Area
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div class="fd-toolbar fd-toolbar--title" role="toolbar" aria-label="Title toolbar">
|
|
83
|
+
<h3 class="fd-title fd-title--h4 fd-toolbar__title">Themes</h3>
|
|
84
|
+
</div>
|
|
85
|
+
<ul class="fd-list fd-list--theme" role="list">
|
|
86
|
+
<li role="listitem" class="fd-list__group-header">
|
|
87
|
+
<span class="fd-list__title">Coca Cola</span>
|
|
88
|
+
</li>
|
|
89
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
90
|
+
<span
|
|
91
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
92
|
+
role="img"
|
|
93
|
+
aria-label="Avatar"
|
|
94
|
+
>
|
|
95
|
+
<i
|
|
96
|
+
role="presentation"
|
|
97
|
+
aria-hidden="true"
|
|
98
|
+
aria-label="Product placeholder"
|
|
99
|
+
class="fd-avatar__icon sap-icon--product"
|
|
100
|
+
></i>
|
|
101
|
+
</span>
|
|
102
|
+
<div class="fd-list__content">
|
|
103
|
+
<span class="fd-list__title"
|
|
104
|
+
>Automatic (based on your operating system settings)</span
|
|
105
|
+
>
|
|
106
|
+
</div>
|
|
107
|
+
</li>
|
|
108
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
109
|
+
<span
|
|
110
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
111
|
+
role="img"
|
|
112
|
+
aria-label="Avatar"
|
|
113
|
+
>
|
|
114
|
+
<i
|
|
115
|
+
role="presentation"
|
|
116
|
+
aria-hidden="true"
|
|
117
|
+
aria-label="Product placeholder"
|
|
118
|
+
class="fd-avatar__icon sap-icon--product"
|
|
119
|
+
></i>
|
|
120
|
+
</span>
|
|
121
|
+
<div class="fd-list__content">
|
|
122
|
+
<span class="fd-list__title">Coca Cola Light</span>
|
|
123
|
+
</div>
|
|
124
|
+
</li>
|
|
125
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
126
|
+
<span
|
|
127
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
128
|
+
role="img"
|
|
129
|
+
aria-label="Avatar"
|
|
130
|
+
>
|
|
131
|
+
<i
|
|
132
|
+
role="presentation"
|
|
133
|
+
aria-hidden="true"
|
|
134
|
+
aria-label="Product placeholder"
|
|
135
|
+
class="fd-avatar__icon sap-icon--product"
|
|
136
|
+
></i>
|
|
137
|
+
</span>
|
|
138
|
+
<div class="fd-list__content">
|
|
139
|
+
<span class="fd-list__title">Coca Cola Dark</span>
|
|
140
|
+
</div>
|
|
141
|
+
</li>
|
|
142
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
143
|
+
<span
|
|
144
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
145
|
+
role="img"
|
|
146
|
+
aria-label="Avatar"
|
|
147
|
+
>
|
|
148
|
+
<i
|
|
149
|
+
role="presentation"
|
|
150
|
+
aria-hidden="true"
|
|
151
|
+
aria-label="Product placeholder"
|
|
152
|
+
class="fd-avatar__icon sap-icon--product"
|
|
153
|
+
></i>
|
|
154
|
+
</span>
|
|
155
|
+
<div class="fd-list__content">
|
|
156
|
+
<span class="fd-list__title">Coca Cola Light (High Contrast)</span>
|
|
157
|
+
</div>
|
|
158
|
+
</li>
|
|
159
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
160
|
+
<span
|
|
161
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
162
|
+
role="img"
|
|
163
|
+
aria-label="Avatar"
|
|
164
|
+
>
|
|
165
|
+
<i
|
|
166
|
+
role="presentation"
|
|
167
|
+
aria-hidden="true"
|
|
168
|
+
aria-label="Product placeholder"
|
|
169
|
+
class="fd-avatar__icon sap-icon--product"
|
|
170
|
+
></i>
|
|
171
|
+
</span>
|
|
172
|
+
<div class="fd-list__content">
|
|
173
|
+
<span class="fd-list__title">Coca Cola Dark (High Contrast)</span>
|
|
174
|
+
</div>
|
|
175
|
+
</li>
|
|
176
|
+
|
|
177
|
+
<li role="listitem" class="fd-list__group-header">
|
|
178
|
+
<span class="fd-list__title">SAP Horizon</span>
|
|
179
|
+
</li>
|
|
180
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
181
|
+
<span
|
|
182
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
183
|
+
role="img"
|
|
184
|
+
aria-label="Avatar"
|
|
185
|
+
>
|
|
186
|
+
<i
|
|
187
|
+
role="presentation"
|
|
188
|
+
aria-hidden="true"
|
|
189
|
+
aria-label="Product placeholder"
|
|
190
|
+
class="fd-avatar__icon sap-icon--product"
|
|
191
|
+
></i>
|
|
192
|
+
</span>
|
|
193
|
+
<div class="fd-list__content">
|
|
194
|
+
<span class="fd-list__title"
|
|
195
|
+
>Automatic (based on your operating system settings)</span
|
|
196
|
+
>
|
|
197
|
+
</div>
|
|
198
|
+
</li>
|
|
199
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
200
|
+
<span
|
|
201
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
202
|
+
role="img"
|
|
203
|
+
aria-label="Avatar"
|
|
204
|
+
>
|
|
205
|
+
<i
|
|
206
|
+
role="presentation"
|
|
207
|
+
aria-hidden="true"
|
|
208
|
+
aria-label="Product placeholder"
|
|
209
|
+
class="fd-avatar__icon sap-icon--product"
|
|
210
|
+
></i>
|
|
211
|
+
</span>
|
|
212
|
+
<div class="fd-list__content">
|
|
213
|
+
<span class="fd-list__title">Morning Horizon</span>
|
|
214
|
+
</div>
|
|
215
|
+
</li>
|
|
216
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
217
|
+
<span
|
|
218
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
219
|
+
role="img"
|
|
220
|
+
aria-label="Avatar"
|
|
221
|
+
>
|
|
222
|
+
<i
|
|
223
|
+
role="presentation"
|
|
224
|
+
aria-hidden="true"
|
|
225
|
+
aria-label="Product placeholder"
|
|
226
|
+
class="fd-avatar__icon sap-icon--product"
|
|
227
|
+
></i>
|
|
228
|
+
</span>
|
|
229
|
+
<div class="fd-list__content">
|
|
230
|
+
<span class="fd-list__title">Evening Horizon</span>
|
|
231
|
+
</div>
|
|
232
|
+
</li>
|
|
233
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
234
|
+
<span
|
|
235
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
236
|
+
role="img"
|
|
237
|
+
aria-label="Avatar"
|
|
238
|
+
>
|
|
239
|
+
<i
|
|
240
|
+
role="presentation"
|
|
241
|
+
aria-hidden="true"
|
|
242
|
+
aria-label="Product placeholder"
|
|
243
|
+
class="fd-avatar__icon sap-icon--product"
|
|
244
|
+
></i>
|
|
245
|
+
</span>
|
|
246
|
+
<div class="fd-list__content">
|
|
247
|
+
<span class="fd-list__title">High Contrast White (Horizon)</span>
|
|
248
|
+
</div>
|
|
249
|
+
</li>
|
|
250
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
251
|
+
<span
|
|
252
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
253
|
+
role="img"
|
|
254
|
+
aria-label="Avatar"
|
|
255
|
+
>
|
|
256
|
+
<i
|
|
257
|
+
role="presentation"
|
|
258
|
+
aria-hidden="true"
|
|
259
|
+
aria-label="Product placeholder"
|
|
260
|
+
class="fd-avatar__icon sap-icon--product"
|
|
261
|
+
></i>
|
|
262
|
+
</span>
|
|
263
|
+
<div class="fd-list__content">
|
|
264
|
+
<span class="fd-list__title">High Contrast Black (Horizon)</span>
|
|
265
|
+
</div>
|
|
266
|
+
</li>
|
|
267
|
+
<li role="listitem" class="fd-list__group-header">
|
|
268
|
+
<span class="fd-list__title">SAP Quartz</span>
|
|
269
|
+
</li>
|
|
270
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
271
|
+
<span
|
|
272
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
273
|
+
role="img"
|
|
274
|
+
aria-label="Avatar"
|
|
275
|
+
>
|
|
276
|
+
<i
|
|
277
|
+
role="presentation"
|
|
278
|
+
aria-hidden="true"
|
|
279
|
+
aria-label="Product placeholder"
|
|
280
|
+
class="fd-avatar__icon sap-icon--product"
|
|
281
|
+
></i>
|
|
282
|
+
</span>
|
|
283
|
+
<div class="fd-list__content">
|
|
284
|
+
<span class="fd-list__title"
|
|
285
|
+
>Automatic (based on your operating system settings)</span
|
|
286
|
+
>
|
|
287
|
+
</div>
|
|
288
|
+
</li>
|
|
289
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
290
|
+
<span
|
|
291
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
292
|
+
role="img"
|
|
293
|
+
aria-label="Avatar"
|
|
294
|
+
>
|
|
295
|
+
<i
|
|
296
|
+
role="presentation"
|
|
297
|
+
aria-hidden="true"
|
|
298
|
+
aria-label="Product placeholder"
|
|
299
|
+
class="fd-avatar__icon sap-icon--product"
|
|
300
|
+
></i>
|
|
301
|
+
</span>
|
|
302
|
+
<div class="fd-list__content">
|
|
303
|
+
<span class="fd-list__title">Quartz Light</span>
|
|
304
|
+
</div>
|
|
305
|
+
</li>
|
|
306
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
307
|
+
<span
|
|
308
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
309
|
+
role="img"
|
|
310
|
+
aria-label="Avatar"
|
|
311
|
+
>
|
|
312
|
+
<i
|
|
313
|
+
role="presentation"
|
|
314
|
+
aria-hidden="true"
|
|
315
|
+
aria-label="Product placeholder"
|
|
316
|
+
class="fd-avatar__icon sap-icon--product"
|
|
317
|
+
></i>
|
|
318
|
+
</span>
|
|
319
|
+
<div class="fd-list__content">
|
|
320
|
+
<span class="fd-list__title">Quartz Dark</span>
|
|
321
|
+
</div>
|
|
322
|
+
</li>
|
|
323
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
324
|
+
<span
|
|
325
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
326
|
+
role="img"
|
|
327
|
+
aria-label="Avatar"
|
|
328
|
+
>
|
|
329
|
+
<i
|
|
330
|
+
role="presentation"
|
|
331
|
+
aria-hidden="true"
|
|
332
|
+
aria-label="Product placeholder"
|
|
333
|
+
class="fd-avatar__icon sap-icon--product"
|
|
334
|
+
></i>
|
|
335
|
+
</span>
|
|
336
|
+
<div class="fd-list__content">
|
|
337
|
+
<span class="fd-list__title">High Contrast White (Quartz)</span>
|
|
338
|
+
</div>
|
|
339
|
+
</li>
|
|
340
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
341
|
+
<span
|
|
342
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
343
|
+
role="img"
|
|
344
|
+
aria-label="Avatar"
|
|
345
|
+
>
|
|
346
|
+
<i
|
|
347
|
+
role="presentation"
|
|
348
|
+
aria-hidden="true"
|
|
349
|
+
aria-label="Product placeholder"
|
|
350
|
+
class="fd-avatar__icon sap-icon--product"
|
|
351
|
+
></i>
|
|
352
|
+
</span>
|
|
353
|
+
<div class="fd-list__content">
|
|
354
|
+
<span class="fd-list__title">High Contrast Black (Quartz)</span>
|
|
355
|
+
</div>
|
|
356
|
+
</li>
|
|
357
|
+
</ul>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
363
|
+
<div class="fd-bar__right">
|
|
364
|
+
<div class="fd-bar__element">
|
|
365
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
</footer>
|
|
369
|
+
</div>
|
|
370
|
+
</section>
|
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
2
|
+
<div
|
|
3
|
+
class="fd-dialog__content fd-settings__dialog-content"
|
|
4
|
+
role="dialog"
|
|
5
|
+
aria-modal="true"
|
|
6
|
+
aria-labelledby="dialog-title-1"
|
|
7
|
+
style="height: 800px"
|
|
8
|
+
>
|
|
9
|
+
<div class="fd-dialog__body fd-settings__dialog-body">
|
|
10
|
+
<div class="fd-settings__container">
|
|
11
|
+
<div class="fd-settings__list-area">
|
|
12
|
+
<div class="fd-bar fd-bar--header">
|
|
13
|
+
<div class="fd-bar__left">
|
|
14
|
+
<div class="fd-bar__element">
|
|
15
|
+
<h1 class="fd-title fd-title--h5" aria-label="text">Settings</h1>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="fd-settings__list-container">
|
|
20
|
+
<ul
|
|
21
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
|
|
22
|
+
role="list"
|
|
23
|
+
>
|
|
24
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
25
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
26
|
+
<i role="presentation" class="fd-list__icon sap-icon--user-settings"></i>
|
|
27
|
+
<span class="fd-list__title">User Account</span>
|
|
28
|
+
</a>
|
|
29
|
+
</li>
|
|
30
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
31
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
32
|
+
<i role="presentation" class="fd-list__icon sap-icon--palette"></i>
|
|
33
|
+
<span class="fd-list__title">Appearance</span>
|
|
34
|
+
</a>
|
|
35
|
+
</li>
|
|
36
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link is-selected">
|
|
37
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
38
|
+
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
39
|
+
<span class="fd-list__title">Language & Region</span>
|
|
40
|
+
</a>
|
|
41
|
+
</li>
|
|
42
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
43
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
44
|
+
<i role="presentation" class="fd-list__icon sap-icon--iphone"></i>
|
|
45
|
+
<span class="fd-list__title">SAP Mobile Start Application</span>
|
|
46
|
+
</a>
|
|
47
|
+
</li>
|
|
48
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
49
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
50
|
+
<i role="presentation" class="fd-list__icon sap-icon--bell"></i>
|
|
51
|
+
<span class="fd-list__title">Notifications</span>
|
|
52
|
+
</a>
|
|
53
|
+
</li>
|
|
54
|
+
</ul>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="fd-settings__detail-area">
|
|
58
|
+
<div class="fd-bar fd-bar--header fd-settings__header">
|
|
59
|
+
<div class="fd-bar__left">
|
|
60
|
+
<div class="fd-bar__element">
|
|
61
|
+
<h2 class="fd-title fd-title--h5" aria-label="text">Language & Region</h2>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="fd-settings__content fd-settings__content--no-background">
|
|
67
|
+
<div
|
|
68
|
+
role="note"
|
|
69
|
+
aria-labelledby="message-strip-hidden-text message-strip-text"
|
|
70
|
+
class="fd-message-strip fd-message-strip--information"
|
|
71
|
+
>
|
|
72
|
+
<span class="fd-message-strip__sr-only" id="message-strip-hidden-text"
|
|
73
|
+
>Information Bar</span
|
|
74
|
+
>
|
|
75
|
+
|
|
76
|
+
<div class="fd-message-strip__icon-container" aria-hidden="true">
|
|
77
|
+
<span
|
|
78
|
+
class="sap-icon sap-icon--message-information"
|
|
79
|
+
role="presentation"
|
|
80
|
+
aria-hidden="true"
|
|
81
|
+
></span>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<p class="fd-message-strip__text" id="message-strip-text">
|
|
85
|
+
Close to apply your chosen language - the page will reload.
|
|
86
|
+
</p>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div
|
|
90
|
+
class="fd-settings__spacing fd-settings__spacing--small"
|
|
91
|
+
role="presentation"
|
|
92
|
+
aria-hidden="true"
|
|
93
|
+
></div>
|
|
94
|
+
|
|
95
|
+
<div class="fd-form-group">
|
|
96
|
+
<div class="fd-form-item">
|
|
97
|
+
<label for="form-item-1" class="fd-form-label">Display Language:</label>
|
|
98
|
+
<div class="fd-input-group fd-input-group--control">
|
|
99
|
+
<input
|
|
100
|
+
type="text"
|
|
101
|
+
class="fd-input fd-input-group__input"
|
|
102
|
+
id="form-item-1"
|
|
103
|
+
value="English (United States)"
|
|
104
|
+
/>
|
|
105
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
106
|
+
<button
|
|
107
|
+
aria-label="show/hide language options"
|
|
108
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
109
|
+
>
|
|
110
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
111
|
+
</button>
|
|
112
|
+
</span>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div
|
|
117
|
+
class="fd-settings__spacing fd-settings__spacing--form"
|
|
118
|
+
role="presentation"
|
|
119
|
+
aria-hidden="true"
|
|
120
|
+
></div>
|
|
121
|
+
|
|
122
|
+
<div class="fd-form-item">
|
|
123
|
+
<label for="form-item-1" class="fd-form-label">Region:</label>
|
|
124
|
+
<div class="fd-input-group fd-input-group--control">
|
|
125
|
+
<input
|
|
126
|
+
type="text"
|
|
127
|
+
class="fd-input fd-input-group__input"
|
|
128
|
+
id="form-item-2"
|
|
129
|
+
value="United States"
|
|
130
|
+
/>
|
|
131
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
132
|
+
<button
|
|
133
|
+
aria-label="show/hide region options"
|
|
134
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
135
|
+
>
|
|
136
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
137
|
+
</button>
|
|
138
|
+
</span>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<div
|
|
143
|
+
class="fd-settings__spacing fd-settings__spacing--form"
|
|
144
|
+
role="presentation"
|
|
145
|
+
aria-hidden="true"
|
|
146
|
+
></div>
|
|
147
|
+
|
|
148
|
+
<div class="fd-form-item">
|
|
149
|
+
<label for="form-item-3" class="fd-form-label">Date Format:</label>
|
|
150
|
+
<div class="fd-input-group fd-input-group--control">
|
|
151
|
+
<input
|
|
152
|
+
type="text"
|
|
153
|
+
class="fd-input fd-input-group__input"
|
|
154
|
+
id="form-item-3"
|
|
155
|
+
value="MM.DD.YYYY"
|
|
156
|
+
/>
|
|
157
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
158
|
+
<button
|
|
159
|
+
aria-label="show/hide date format options"
|
|
160
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
161
|
+
>
|
|
162
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
163
|
+
</button>
|
|
164
|
+
</span>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
<div
|
|
169
|
+
class="fd-settings__spacing fd-settings__spacing--form"
|
|
170
|
+
role="presentation"
|
|
171
|
+
aria-hidden="true"
|
|
172
|
+
></div>
|
|
173
|
+
|
|
174
|
+
<div class="fd-form-item">
|
|
175
|
+
<label for="form-item-4" class="fd-form-label">Time Format:</label>
|
|
176
|
+
<div class="fd-input-group fd-input-group--control">
|
|
177
|
+
<input
|
|
178
|
+
type="text"
|
|
179
|
+
class="fd-input fd-input-group__input"
|
|
180
|
+
id="form-item-4"
|
|
181
|
+
value="12 Hour"
|
|
182
|
+
/>
|
|
183
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
184
|
+
<button
|
|
185
|
+
aria-label="show/hide time format options"
|
|
186
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
187
|
+
>
|
|
188
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
189
|
+
</button>
|
|
190
|
+
</span>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<div
|
|
195
|
+
class="fd-settings__spacing fd-settings__spacing--form"
|
|
196
|
+
role="presentation"
|
|
197
|
+
aria-hidden="true"
|
|
198
|
+
></div>
|
|
199
|
+
|
|
200
|
+
<div class="fd-form-item">
|
|
201
|
+
<label for="form-item-5" class="fd-form-label">Time Zone:</label>
|
|
202
|
+
<div class="fd-input-group fd-input-group--control">
|
|
203
|
+
<input
|
|
204
|
+
type="text"
|
|
205
|
+
class="fd-input fd-input-group__input"
|
|
206
|
+
id="form-item-5"
|
|
207
|
+
value="GMT-5:00 Eastern Time (US & Canada)"
|
|
208
|
+
/>
|
|
209
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
210
|
+
<button
|
|
211
|
+
aria-label="show/hide time zone options"
|
|
212
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
213
|
+
>
|
|
214
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
215
|
+
</button>
|
|
216
|
+
</span>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
<div
|
|
221
|
+
class="fd-settings__spacing fd-settings__spacing--form"
|
|
222
|
+
role="presentation"
|
|
223
|
+
aria-hidden="true"
|
|
224
|
+
></div>
|
|
225
|
+
|
|
226
|
+
<div class="fd-form-item">
|
|
227
|
+
<label for="form-item-6" class="fd-form-label">Currency:</label>
|
|
228
|
+
<div class="fd-input-group fd-input-group--control">
|
|
229
|
+
<input
|
|
230
|
+
type="text"
|
|
231
|
+
class="fd-input fd-input-group__input"
|
|
232
|
+
id="form-item-6"
|
|
233
|
+
value="USD - United States Dollar"
|
|
234
|
+
/>
|
|
235
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
236
|
+
<button
|
|
237
|
+
aria-label="show/hide currency options"
|
|
238
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
239
|
+
>
|
|
240
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
241
|
+
</button>
|
|
242
|
+
</span>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div
|
|
247
|
+
class="fd-settings__spacing fd-settings__spacing--form"
|
|
248
|
+
role="presentation"
|
|
249
|
+
aria-hidden="true"
|
|
250
|
+
></div>
|
|
251
|
+
|
|
252
|
+
<div class="fd-form-item">
|
|
253
|
+
<label for="form-item-7" class="fd-form-label">Number Format:</label>
|
|
254
|
+
<div class="fd-input-group fd-input-group--control">
|
|
255
|
+
<input
|
|
256
|
+
type="text"
|
|
257
|
+
class="fd-input fd-input-group__input"
|
|
258
|
+
id="form-item-7"
|
|
259
|
+
value="1,234.56"
|
|
260
|
+
/>
|
|
261
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
262
|
+
<button
|
|
263
|
+
aria-label="show/hide number format options"
|
|
264
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
265
|
+
>
|
|
266
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
267
|
+
</button>
|
|
268
|
+
</span>
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
277
|
+
<div class="fd-bar__right">
|
|
278
|
+
<div class="fd-bar__element">
|
|
279
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
</footer>
|
|
283
|
+
</div>
|
|
284
|
+
</section>
|