@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
|
@@ -6,8 +6,8 @@ selector: fd-dialog-docs-static
|
|
|
6
6
|
cssFile: dialog-docs-static.css
|
|
7
7
|
sourcePath: packages/styles/stories/Components/settings/settings.stories.js
|
|
8
8
|
tags: ["uxc"]
|
|
9
|
-
dependencies: ["bar","button","dialog","icon","icon-tab-bar","input","list","settings","title","toolbar"]
|
|
10
|
-
relatedComponents: ["bar","button","dialog","icon","icon-tab-bar","input","list","title","toolbar"]
|
|
9
|
+
dependencies: ["avatar","bar","button","dialog","form-group","form-item","form-label","icon","icon-tab-bar","input","input-group","list","message-strip","popover","select","settings","switch","title","toolbar"]
|
|
10
|
+
relatedComponents: ["avatar","bar","button","dialog","form-group","form-item","form-label","icon","icon-tab-bar","input","input-group","list","message-strip","popover","select","switch","title","toolbar"]
|
|
11
11
|
stability: stable
|
|
12
12
|
---
|
|
13
13
|
|
|
@@ -40,14 +40,23 @@ The Settings Dialog allows users to personalize their Fiori experience by adjust
|
|
|
40
40
|
|
|
41
41
|
This component depends on the following CSS files:
|
|
42
42
|
|
|
43
|
+
- `avatar.css`
|
|
43
44
|
- `bar.css`
|
|
44
45
|
- `button.css`
|
|
45
46
|
- `dialog.css`
|
|
47
|
+
- `form-group.css`
|
|
48
|
+
- `form-item.css`
|
|
49
|
+
- `form-label.css`
|
|
46
50
|
- `icon.css`
|
|
47
51
|
- `icon-tab-bar.css`
|
|
48
52
|
- `input.css`
|
|
53
|
+
- `input-group.css`
|
|
49
54
|
- `list.css`
|
|
55
|
+
- `message-strip.css`
|
|
56
|
+
- `popover.css`
|
|
57
|
+
- `select.css`
|
|
50
58
|
- `settings.css`
|
|
59
|
+
- `switch.css`
|
|
51
60
|
- `title.css`
|
|
52
61
|
- `toolbar.css`
|
|
53
62
|
|
|
@@ -65,14 +74,23 @@ npm install fundamental-styles
|
|
|
65
74
|
<link href="node_modules/fundamental-styles/dist/dialog-docs-static.css" rel="stylesheet">
|
|
66
75
|
|
|
67
76
|
<!-- Include dependencies -->
|
|
77
|
+
<link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
|
|
68
78
|
<link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
|
|
69
79
|
<link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
|
|
70
80
|
<link href="node_modules/fundamental-styles/dist/dialog.css" rel="stylesheet">
|
|
81
|
+
<link href="node_modules/fundamental-styles/dist/form-group.css" rel="stylesheet">
|
|
82
|
+
<link href="node_modules/fundamental-styles/dist/form-item.css" rel="stylesheet">
|
|
83
|
+
<link href="node_modules/fundamental-styles/dist/form-label.css" rel="stylesheet">
|
|
71
84
|
<link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
|
|
72
85
|
<link href="node_modules/fundamental-styles/dist/icon-tab-bar.css" rel="stylesheet">
|
|
73
86
|
<link href="node_modules/fundamental-styles/dist/input.css" rel="stylesheet">
|
|
87
|
+
<link href="node_modules/fundamental-styles/dist/input-group.css" rel="stylesheet">
|
|
74
88
|
<link href="node_modules/fundamental-styles/dist/list.css" rel="stylesheet">
|
|
89
|
+
<link href="node_modules/fundamental-styles/dist/message-strip.css" rel="stylesheet">
|
|
90
|
+
<link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
|
|
91
|
+
<link href="node_modules/fundamental-styles/dist/select.css" rel="stylesheet">
|
|
75
92
|
<link href="node_modules/fundamental-styles/dist/settings.css" rel="stylesheet">
|
|
93
|
+
<link href="node_modules/fundamental-styles/dist/switch.css" rel="stylesheet">
|
|
76
94
|
<link href="node_modules/fundamental-styles/dist/title.css" rel="stylesheet">
|
|
77
95
|
<link href="node_modules/fundamental-styles/dist/toolbar.css" rel="stylesheet">
|
|
78
96
|
```
|
|
@@ -81,81 +99,694 @@ npm install fundamental-styles
|
|
|
81
99
|
|
|
82
100
|
```html
|
|
83
101
|
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
84
|
-
<div
|
|
85
|
-
|
|
102
|
+
<div
|
|
103
|
+
class="fd-dialog__content fd-settings__dialog-content"
|
|
104
|
+
role="dialog"
|
|
105
|
+
aria-modal="true"
|
|
106
|
+
aria-labelledby="dialog-title-1"
|
|
107
|
+
|
|
108
|
+
>
|
|
109
|
+
<div class="fd-dialog__body fd-settings__dialog-body">
|
|
86
110
|
<div class="fd-settings__container">
|
|
87
111
|
<div class="fd-settings__list-area">
|
|
88
|
-
<div class="fd-bar fd-bar--header
|
|
112
|
+
<div class="fd-bar fd-bar--header">
|
|
89
113
|
<div class="fd-bar__left">
|
|
90
114
|
<div class="fd-bar__element">
|
|
91
|
-
<
|
|
115
|
+
<h1 class="fd-title fd-title--h5" aria-label="text">Settings</h1>
|
|
92
116
|
</div>
|
|
93
117
|
</div>
|
|
94
118
|
</div>
|
|
95
|
-
<div class="fd-
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
119
|
+
<div class="fd-settings__list-container">
|
|
120
|
+
<ul
|
|
121
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
|
|
122
|
+
role="list"
|
|
123
|
+
>
|
|
124
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link is-selected">
|
|
125
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
126
|
+
<i role="presentation" class="fd-list__icon sap-icon--user-settings"></i>
|
|
127
|
+
<span class="fd-list__title">User Account</span>
|
|
128
|
+
</a>
|
|
129
|
+
</li>
|
|
130
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
131
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
132
|
+
<i role="presentation" class="fd-list__icon sap-icon--palette"></i>
|
|
133
|
+
<span class="fd-list__title">Appearance</span>
|
|
134
|
+
</a>
|
|
135
|
+
</li>
|
|
136
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
137
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
138
|
+
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
139
|
+
<span class="fd-list__title">Language & Region</span>
|
|
140
|
+
</a>
|
|
141
|
+
</li>
|
|
142
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
143
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
144
|
+
<i role="presentation" class="fd-list__icon sap-icon--iphone"></i>
|
|
145
|
+
<span class="fd-list__title">SAP Mobile Start Application</span>
|
|
146
|
+
</a>
|
|
147
|
+
</li>
|
|
148
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
149
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
150
|
+
<i role="presentation" class="fd-list__icon sap-icon--bell"></i>
|
|
151
|
+
<span class="fd-list__title">Notifications</span>
|
|
152
|
+
</a>
|
|
153
|
+
</li>
|
|
154
|
+
</ul>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="fd-settings__detail-area">
|
|
158
|
+
<div class="fd-bar fd-bar--header fd-settings__header">
|
|
159
|
+
<div class="fd-bar__left">
|
|
160
|
+
<div class="fd-bar__element">
|
|
161
|
+
<h2 class="fd-title fd-title--h5" aria-label="text">User Account</h2>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<div class="fd-settings__content fd-settings__content--no-background">
|
|
167
|
+
<div class="fd-settings__profile-card">
|
|
168
|
+
<span
|
|
169
|
+
class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--thumbnail"
|
|
170
|
+
|
|
171
|
+
role="img"
|
|
172
|
+
aria-label="Alain Chevallier"
|
|
173
|
+
>
|
|
174
|
+
<i
|
|
175
|
+
class="fd-avatar__zoom-icon sap-icon--edit"
|
|
176
|
+
role="presentation"
|
|
177
|
+
aria-hidden="true"
|
|
178
|
+
></i>
|
|
179
|
+
</span>
|
|
180
|
+
<h3 class="fd-settings__profile-card-name">Alain Chevallier</h3>
|
|
181
|
+
<div class="fd-settings__profile-card-subline">alain.chevallier@sap.com</div>
|
|
182
|
+
<div class="fd-settings__profile-card-subline">Delivery Manager, SAP SE</div>
|
|
183
|
+
<button class="fd-button" role="button" aria-label="Manage Account">
|
|
184
|
+
<i role="presentation" class="sap-icon--user-settings"></i>
|
|
185
|
+
<span class="fd-button__text">Manage Account</span>
|
|
186
|
+
</button>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="fd-settings__content-container">
|
|
189
|
+
<div
|
|
190
|
+
style="
|
|
191
|
+
background: cornsilk;
|
|
192
|
+
height: 17.3rem;
|
|
193
|
+
width: 100%;
|
|
194
|
+
display: flex;
|
|
195
|
+
justify-content: center;
|
|
196
|
+
align-items: center;
|
|
197
|
+
"
|
|
198
|
+
>
|
|
199
|
+
Content Area
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
206
|
+
<div class="fd-bar__right">
|
|
207
|
+
<div class="fd-bar__element">
|
|
208
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
</footer>
|
|
212
|
+
</section>
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
## States
|
|
216
|
+
|
|
217
|
+
| Class | Description |
|
|
218
|
+
|-------|-------------|
|
|
219
|
+
| `is-selected` | Selected state |
|
|
220
|
+
|
|
221
|
+
## Related Components
|
|
222
|
+
|
|
223
|
+
This component works with or depends on:
|
|
224
|
+
|
|
225
|
+
- `avatar`
|
|
226
|
+
- `bar`
|
|
227
|
+
- `button`
|
|
228
|
+
- `dialog`
|
|
229
|
+
- `form-group`
|
|
230
|
+
- `form-item`
|
|
231
|
+
- `form-label`
|
|
232
|
+
- `icon`
|
|
233
|
+
- `icon-tab-bar`
|
|
234
|
+
- `input`
|
|
235
|
+
- `input-group`
|
|
236
|
+
- `list`
|
|
237
|
+
- `message-strip`
|
|
238
|
+
- `popover`
|
|
239
|
+
- `select`
|
|
240
|
+
- `switch`
|
|
241
|
+
- `title`
|
|
242
|
+
- `toolbar`
|
|
243
|
+
|
|
244
|
+
## Examples
|
|
245
|
+
|
|
246
|
+
### User Account (L-XL-XXL)
|
|
247
|
+
|
|
248
|
+
```html
|
|
249
|
+
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
250
|
+
<div
|
|
251
|
+
class="fd-dialog__content fd-settings__dialog-content"
|
|
252
|
+
role="dialog"
|
|
253
|
+
aria-modal="true"
|
|
254
|
+
aria-labelledby="dialog-title-1"
|
|
255
|
+
|
|
256
|
+
>
|
|
257
|
+
<div class="fd-dialog__body fd-settings__dialog-body">
|
|
258
|
+
<div class="fd-settings__container">
|
|
259
|
+
<div class="fd-settings__list-area">
|
|
260
|
+
<div class="fd-bar fd-bar--header">
|
|
261
|
+
<div class="fd-bar__left">
|
|
262
|
+
<div class="fd-bar__element">
|
|
263
|
+
<h1 class="fd-title fd-title--h5" aria-label="text">Settings</h1>
|
|
99
264
|
</div>
|
|
100
265
|
</div>
|
|
101
266
|
</div>
|
|
102
267
|
<div class="fd-settings__list-container">
|
|
103
|
-
<ul
|
|
268
|
+
<ul
|
|
269
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
|
|
270
|
+
role="list"
|
|
271
|
+
>
|
|
272
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link is-selected">
|
|
273
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
274
|
+
<i role="presentation" class="fd-list__icon sap-icon--user-settings"></i>
|
|
275
|
+
<span class="fd-list__title">User Account</span>
|
|
276
|
+
</a>
|
|
277
|
+
</li>
|
|
104
278
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
105
279
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
106
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
107
|
-
<span class="fd-list__title">
|
|
280
|
+
<i role="presentation" class="fd-list__icon sap-icon--palette"></i>
|
|
281
|
+
<span class="fd-list__title">Appearance</span>
|
|
108
282
|
</a>
|
|
109
283
|
</li>
|
|
110
284
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
111
285
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
112
286
|
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
113
|
-
<span class="fd-list__title">
|
|
287
|
+
<span class="fd-list__title">Language & Region</span>
|
|
114
288
|
</a>
|
|
115
289
|
</li>
|
|
116
290
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
117
291
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
118
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
119
|
-
<span class="fd-list__title">
|
|
292
|
+
<i role="presentation" class="fd-list__icon sap-icon--iphone"></i>
|
|
293
|
+
<span class="fd-list__title">SAP Mobile Start Application</span>
|
|
120
294
|
</a>
|
|
121
295
|
</li>
|
|
122
296
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
123
297
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
124
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
125
|
-
<span class="fd-list__title">
|
|
298
|
+
<i role="presentation" class="fd-list__icon sap-icon--bell"></i>
|
|
299
|
+
<span class="fd-list__title">Notifications</span>
|
|
126
300
|
</a>
|
|
127
301
|
</li>
|
|
302
|
+
</ul>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
<div class="fd-settings__detail-area">
|
|
306
|
+
<div class="fd-bar fd-bar--header fd-settings__header">
|
|
307
|
+
<div class="fd-bar__left">
|
|
308
|
+
<div class="fd-bar__element">
|
|
309
|
+
<h2 class="fd-title fd-title--h5" aria-label="text">User Account</h2>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
</div>
|
|
313
|
+
|
|
314
|
+
<div class="fd-settings__content fd-settings__content--no-background">
|
|
315
|
+
<div class="fd-settings__profile-card">
|
|
316
|
+
<span
|
|
317
|
+
class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--thumbnail"
|
|
318
|
+
|
|
319
|
+
role="img"
|
|
320
|
+
aria-label="Alain Chevallier"
|
|
321
|
+
>
|
|
322
|
+
<i
|
|
323
|
+
class="fd-avatar__zoom-icon sap-icon--edit"
|
|
324
|
+
role="presentation"
|
|
325
|
+
aria-hidden="true"
|
|
326
|
+
></i>
|
|
327
|
+
</span>
|
|
328
|
+
<h3 class="fd-settings__profile-card-name">Alain Chevallier</h3>
|
|
329
|
+
<div class="fd-settings__profile-card-subline">alain.chevallier@sap.com</div>
|
|
330
|
+
<div class="fd-settings__profile-card-subline">Delivery Manager, SAP SE</div>
|
|
331
|
+
<button class="fd-button" role="button" aria-label="Manage Account">
|
|
332
|
+
<i role="presentation" class="sap-icon--user-settings"></i>
|
|
333
|
+
<span class="fd-button__text">Manage Account</span>
|
|
334
|
+
</button>
|
|
335
|
+
</div>
|
|
336
|
+
<div class="fd-settings__content-container">
|
|
337
|
+
<div
|
|
338
|
+
style="
|
|
339
|
+
background: cornsilk;
|
|
340
|
+
height: 17.3rem;
|
|
341
|
+
width: 100%;
|
|
342
|
+
display: flex;
|
|
343
|
+
justify-content: center;
|
|
344
|
+
align-items: center;
|
|
345
|
+
"
|
|
346
|
+
>
|
|
347
|
+
Content Area
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
354
|
+
<div class="fd-bar__right">
|
|
355
|
+
<div class="fd-bar__element">
|
|
356
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
</footer>
|
|
360
|
+
</section>
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
### Appearance (L-XL-XXL)
|
|
364
|
+
|
|
365
|
+
```html
|
|
366
|
+
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
367
|
+
<div
|
|
368
|
+
class="fd-dialog__content fd-settings__dialog-content"
|
|
369
|
+
role="dialog"
|
|
370
|
+
aria-modal="true"
|
|
371
|
+
aria-labelledby="dialog-title-1"
|
|
372
|
+
|
|
373
|
+
>
|
|
374
|
+
<div class="fd-dialog__body fd-settings__dialog-body">
|
|
375
|
+
<div class="fd-settings__container">
|
|
376
|
+
<div class="fd-settings__list-area">
|
|
377
|
+
<div class="fd-bar fd-bar--header">
|
|
378
|
+
<div class="fd-bar__left">
|
|
379
|
+
<div class="fd-bar__element">
|
|
380
|
+
<h1 class="fd-title fd-title--h5" aria-label="text">Settings</h1>
|
|
381
|
+
</div>
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
<div class="fd-settings__list-container">
|
|
385
|
+
<ul
|
|
386
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
|
|
387
|
+
role="list"
|
|
388
|
+
>
|
|
128
389
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
129
390
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
130
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
131
|
-
<span class="fd-list__title">
|
|
391
|
+
<i role="presentation" class="fd-list__icon sap-icon--user-settings"></i>
|
|
392
|
+
<span class="fd-list__title">User Account</span>
|
|
393
|
+
</a>
|
|
394
|
+
</li>
|
|
395
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link is-selected">
|
|
396
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
397
|
+
<i role="presentation" class="fd-list__icon sap-icon--palette"></i>
|
|
398
|
+
<span class="fd-list__title">Appearance</span>
|
|
132
399
|
</a>
|
|
133
400
|
</li>
|
|
134
401
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
135
402
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
136
403
|
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
137
|
-
<span class="fd-list__title">
|
|
404
|
+
<span class="fd-list__title">Language & Region</span>
|
|
138
405
|
</a>
|
|
139
406
|
</li>
|
|
140
407
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
141
408
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
142
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
143
|
-
<span class="fd-list__title">
|
|
409
|
+
<i role="presentation" class="fd-list__icon sap-icon--iphone"></i>
|
|
410
|
+
<span class="fd-list__title">SAP Mobile Start Application</span>
|
|
144
411
|
</a>
|
|
145
412
|
</li>
|
|
146
413
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
147
414
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
148
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
149
|
-
<span class="fd-list__title">
|
|
415
|
+
<i role="presentation" class="fd-list__icon sap-icon--bell"></i>
|
|
416
|
+
<span class="fd-list__title">Notifications</span>
|
|
150
417
|
</a>
|
|
151
418
|
</li>
|
|
152
419
|
</ul>
|
|
420
|
+
</div>
|
|
421
|
+
</div>
|
|
422
|
+
<div class="fd-settings__detail-area">
|
|
423
|
+
<div class="fd-bar fd-bar--header fd-settings__header">
|
|
424
|
+
<div class="fd-bar__left">
|
|
425
|
+
<div class="fd-bar__element">
|
|
426
|
+
<h2 class="fd-title fd-title--h5" aria-label="text">Appearance</h2>
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
</div>
|
|
430
|
+
|
|
431
|
+
<div class="fd-settings__content fd-settings__content--no-background">
|
|
432
|
+
<div class="fd-settings__content-container">
|
|
433
|
+
<div
|
|
434
|
+
style="
|
|
435
|
+
background: cornsilk;
|
|
436
|
+
height: 5rem;
|
|
437
|
+
width: 100%;
|
|
438
|
+
display: flex;
|
|
439
|
+
justify-content: center;
|
|
440
|
+
align-items: center;
|
|
441
|
+
"
|
|
442
|
+
>
|
|
443
|
+
Content Area
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
153
446
|
|
|
154
|
-
<
|
|
447
|
+
<div class="fd-toolbar fd-toolbar--title" role="toolbar" aria-label="Title toolbar">
|
|
448
|
+
<h3 class="fd-title fd-title--h4 fd-toolbar__title">Themes</h3>
|
|
449
|
+
</div>
|
|
450
|
+
<ul class="fd-list fd-list--theme" role="list">
|
|
451
|
+
<li role="listitem" class="fd-list__group-header">
|
|
452
|
+
<span class="fd-list__title">Coca Cola</span>
|
|
453
|
+
</li>
|
|
454
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
455
|
+
<span
|
|
456
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
457
|
+
role="img"
|
|
458
|
+
aria-label="Avatar"
|
|
459
|
+
>
|
|
460
|
+
<i
|
|
461
|
+
role="presentation"
|
|
462
|
+
aria-hidden="true"
|
|
463
|
+
aria-label="Product placeholder"
|
|
464
|
+
class="fd-avatar__icon sap-icon--product"
|
|
465
|
+
></i>
|
|
466
|
+
</span>
|
|
467
|
+
<div class="fd-list__content">
|
|
468
|
+
<span class="fd-list__title"
|
|
469
|
+
>Automatic (based on your operating system settings)</span
|
|
470
|
+
>
|
|
471
|
+
</div>
|
|
472
|
+
</li>
|
|
473
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
474
|
+
<span
|
|
475
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
476
|
+
role="img"
|
|
477
|
+
aria-label="Avatar"
|
|
478
|
+
>
|
|
479
|
+
<i
|
|
480
|
+
role="presentation"
|
|
481
|
+
aria-hidden="true"
|
|
482
|
+
aria-label="Product placeholder"
|
|
483
|
+
class="fd-avatar__icon sap-icon--product"
|
|
484
|
+
></i>
|
|
485
|
+
</span>
|
|
486
|
+
<div class="fd-list__content">
|
|
487
|
+
<span class="fd-list__title">Coca Cola Light</span>
|
|
488
|
+
</div>
|
|
489
|
+
</li>
|
|
490
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
491
|
+
<span
|
|
492
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
493
|
+
role="img"
|
|
494
|
+
aria-label="Avatar"
|
|
495
|
+
>
|
|
496
|
+
<i
|
|
497
|
+
role="presentation"
|
|
498
|
+
aria-hidden="true"
|
|
499
|
+
aria-label="Product placeholder"
|
|
500
|
+
class="fd-avatar__icon sap-icon--product"
|
|
501
|
+
></i>
|
|
502
|
+
</span>
|
|
503
|
+
<div class="fd-list__content">
|
|
504
|
+
<span class="fd-list__title">Coca Cola Dark</span>
|
|
505
|
+
</div>
|
|
506
|
+
</li>
|
|
507
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
508
|
+
<span
|
|
509
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
510
|
+
role="img"
|
|
511
|
+
aria-label="Avatar"
|
|
512
|
+
>
|
|
513
|
+
<i
|
|
514
|
+
role="presentation"
|
|
515
|
+
aria-hidden="true"
|
|
516
|
+
aria-label="Product placeholder"
|
|
517
|
+
class="fd-avatar__icon sap-icon--product"
|
|
518
|
+
></i>
|
|
519
|
+
</span>
|
|
520
|
+
<div class="fd-list__content">
|
|
521
|
+
<span class="fd-list__title">Coca Cola Light (High Contrast)</span>
|
|
522
|
+
</div>
|
|
523
|
+
</li>
|
|
524
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
525
|
+
<span
|
|
526
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
527
|
+
role="img"
|
|
528
|
+
aria-label="Avatar"
|
|
529
|
+
>
|
|
530
|
+
<i
|
|
531
|
+
role="presentation"
|
|
532
|
+
aria-hidden="true"
|
|
533
|
+
aria-label="Product placeholder"
|
|
534
|
+
class="fd-avatar__icon sap-icon--product"
|
|
535
|
+
></i>
|
|
536
|
+
</span>
|
|
537
|
+
<div class="fd-list__content">
|
|
538
|
+
<span class="fd-list__title">Coca Cola Dark (High Contrast)</span>
|
|
539
|
+
</div>
|
|
540
|
+
</li>
|
|
541
|
+
|
|
542
|
+
<li role="listitem" class="fd-list__group-header">
|
|
543
|
+
<span class="fd-list__title">SAP Horizon</span>
|
|
544
|
+
</li>
|
|
545
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
546
|
+
<span
|
|
547
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
548
|
+
role="img"
|
|
549
|
+
aria-label="Avatar"
|
|
550
|
+
>
|
|
551
|
+
<i
|
|
552
|
+
role="presentation"
|
|
553
|
+
aria-hidden="true"
|
|
554
|
+
aria-label="Product placeholder"
|
|
555
|
+
class="fd-avatar__icon sap-icon--product"
|
|
556
|
+
></i>
|
|
557
|
+
</span>
|
|
558
|
+
<div class="fd-list__content">
|
|
559
|
+
<span class="fd-list__title"
|
|
560
|
+
>Automatic (based on your operating system settings)</span
|
|
561
|
+
>
|
|
562
|
+
</div>
|
|
563
|
+
</li>
|
|
564
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
565
|
+
<span
|
|
566
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
567
|
+
role="img"
|
|
568
|
+
aria-label="Avatar"
|
|
569
|
+
>
|
|
570
|
+
<i
|
|
571
|
+
role="presentation"
|
|
572
|
+
aria-hidden="true"
|
|
573
|
+
aria-label="Product placeholder"
|
|
574
|
+
class="fd-avatar__icon sap-icon--product"
|
|
575
|
+
></i>
|
|
576
|
+
</span>
|
|
577
|
+
<div class="fd-list__content">
|
|
578
|
+
<span class="fd-list__title">Morning Horizon</span>
|
|
579
|
+
</div>
|
|
580
|
+
</li>
|
|
581
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
582
|
+
<span
|
|
583
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
584
|
+
role="img"
|
|
585
|
+
aria-label="Avatar"
|
|
586
|
+
>
|
|
587
|
+
<i
|
|
588
|
+
role="presentation"
|
|
589
|
+
aria-hidden="true"
|
|
590
|
+
aria-label="Product placeholder"
|
|
591
|
+
class="fd-avatar__icon sap-icon--product"
|
|
592
|
+
></i>
|
|
593
|
+
</span>
|
|
594
|
+
<div class="fd-list__content">
|
|
595
|
+
<span class="fd-list__title">Evening Horizon</span>
|
|
596
|
+
</div>
|
|
597
|
+
</li>
|
|
598
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
599
|
+
<span
|
|
600
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
601
|
+
role="img"
|
|
602
|
+
aria-label="Avatar"
|
|
603
|
+
>
|
|
604
|
+
<i
|
|
605
|
+
role="presentation"
|
|
606
|
+
aria-hidden="true"
|
|
607
|
+
aria-label="Product placeholder"
|
|
608
|
+
class="fd-avatar__icon sap-icon--product"
|
|
609
|
+
></i>
|
|
610
|
+
</span>
|
|
611
|
+
<div class="fd-list__content">
|
|
612
|
+
<span class="fd-list__title">High Contrast White (Horizon)</span>
|
|
613
|
+
</div>
|
|
614
|
+
</li>
|
|
615
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
616
|
+
<span
|
|
617
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
618
|
+
role="img"
|
|
619
|
+
aria-label="Avatar"
|
|
620
|
+
>
|
|
621
|
+
<i
|
|
622
|
+
role="presentation"
|
|
623
|
+
aria-hidden="true"
|
|
624
|
+
aria-label="Product placeholder"
|
|
625
|
+
class="fd-avatar__icon sap-icon--product"
|
|
626
|
+
></i>
|
|
627
|
+
</span>
|
|
628
|
+
<div class="fd-list__content">
|
|
629
|
+
<span class="fd-list__title">High Contrast Black (Horizon)</span>
|
|
630
|
+
</div>
|
|
631
|
+
</li>
|
|
632
|
+
<li role="listitem" class="fd-list__group-header">
|
|
633
|
+
<span class="fd-list__title">SAP Quartz</span>
|
|
634
|
+
</li>
|
|
635
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
636
|
+
<span
|
|
637
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
638
|
+
role="img"
|
|
639
|
+
aria-label="Avatar"
|
|
640
|
+
>
|
|
641
|
+
<i
|
|
642
|
+
role="presentation"
|
|
643
|
+
aria-hidden="true"
|
|
644
|
+
aria-label="Product placeholder"
|
|
645
|
+
class="fd-avatar__icon sap-icon--product"
|
|
646
|
+
></i>
|
|
647
|
+
</span>
|
|
648
|
+
<div class="fd-list__content">
|
|
649
|
+
<span class="fd-list__title"
|
|
650
|
+
>Automatic (based on your operating system settings)</span
|
|
651
|
+
>
|
|
652
|
+
</div>
|
|
653
|
+
</li>
|
|
654
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
655
|
+
<span
|
|
656
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
657
|
+
role="img"
|
|
658
|
+
aria-label="Avatar"
|
|
659
|
+
>
|
|
660
|
+
<i
|
|
661
|
+
role="presentation"
|
|
662
|
+
aria-hidden="true"
|
|
663
|
+
aria-label="Product placeholder"
|
|
664
|
+
class="fd-avatar__icon sap-icon--product"
|
|
665
|
+
></i>
|
|
666
|
+
</span>
|
|
667
|
+
<div class="fd-list__content">
|
|
668
|
+
<span class="fd-list__title">Quartz Light</span>
|
|
669
|
+
</div>
|
|
670
|
+
</li>
|
|
671
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
672
|
+
<span
|
|
673
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
674
|
+
role="img"
|
|
675
|
+
aria-label="Avatar"
|
|
676
|
+
>
|
|
677
|
+
<i
|
|
678
|
+
role="presentation"
|
|
679
|
+
aria-hidden="true"
|
|
680
|
+
aria-label="Product placeholder"
|
|
681
|
+
class="fd-avatar__icon sap-icon--product"
|
|
682
|
+
></i>
|
|
683
|
+
</span>
|
|
684
|
+
<div class="fd-list__content">
|
|
685
|
+
<span class="fd-list__title">Quartz Dark</span>
|
|
686
|
+
</div>
|
|
687
|
+
</li>
|
|
688
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
689
|
+
<span
|
|
690
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
691
|
+
role="img"
|
|
692
|
+
aria-label="Avatar"
|
|
693
|
+
>
|
|
694
|
+
<i
|
|
695
|
+
role="presentation"
|
|
696
|
+
aria-hidden="true"
|
|
697
|
+
aria-label="Product placeholder"
|
|
698
|
+
class="fd-avatar__icon sap-icon--product"
|
|
699
|
+
></i>
|
|
700
|
+
</span>
|
|
701
|
+
<div class="fd-list__content">
|
|
702
|
+
<span class="fd-list__title">High Contrast White (Quartz)</span>
|
|
703
|
+
</div>
|
|
704
|
+
</li>
|
|
705
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
706
|
+
<span
|
|
707
|
+
class="fd-avatar fd-avatar--sm fd-avatar--accent-color-7"
|
|
708
|
+
role="img"
|
|
709
|
+
aria-label="Avatar"
|
|
710
|
+
>
|
|
711
|
+
<i
|
|
712
|
+
role="presentation"
|
|
713
|
+
aria-hidden="true"
|
|
714
|
+
aria-label="Product placeholder"
|
|
715
|
+
class="fd-avatar__icon sap-icon--product"
|
|
716
|
+
></i>
|
|
717
|
+
</span>
|
|
718
|
+
<div class="fd-list__content">
|
|
719
|
+
<span class="fd-list__title">High Contrast Black (Quartz)</span>
|
|
720
|
+
</div>
|
|
721
|
+
</li>
|
|
722
|
+
</ul>
|
|
723
|
+
</div>
|
|
724
|
+
</div>
|
|
725
|
+
</div>
|
|
726
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
727
|
+
<div class="fd-bar__right">
|
|
728
|
+
<div class="fd-bar__element">
|
|
729
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
730
|
+
</div>
|
|
731
|
+
</div>
|
|
732
|
+
</footer>
|
|
733
|
+
</section>
|
|
734
|
+
```
|
|
735
|
+
|
|
736
|
+
### Language & Region (L-XL-XXL)
|
|
737
|
+
|
|
738
|
+
```html
|
|
739
|
+
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
740
|
+
<div
|
|
741
|
+
class="fd-dialog__content fd-settings__dialog-content"
|
|
742
|
+
role="dialog"
|
|
743
|
+
aria-modal="true"
|
|
744
|
+
aria-labelledby="dialog-title-1"
|
|
745
|
+
|
|
746
|
+
>
|
|
747
|
+
<div class="fd-dialog__body fd-settings__dialog-body">
|
|
748
|
+
<div class="fd-settings__container">
|
|
749
|
+
<div class="fd-settings__list-area">
|
|
750
|
+
<div class="fd-bar fd-bar--header">
|
|
751
|
+
<div class="fd-bar__left">
|
|
752
|
+
<div class="fd-bar__element">
|
|
753
|
+
<h1 class="fd-title fd-title--h5" aria-label="text">Settings</h1>
|
|
754
|
+
</div>
|
|
755
|
+
</div>
|
|
756
|
+
</div>
|
|
757
|
+
<div class="fd-settings__list-container">
|
|
758
|
+
<ul
|
|
759
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
|
|
760
|
+
role="list"
|
|
761
|
+
>
|
|
762
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
763
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
764
|
+
<i role="presentation" class="fd-list__icon sap-icon--user-settings"></i>
|
|
765
|
+
<span class="fd-list__title">User Account</span>
|
|
766
|
+
</a>
|
|
767
|
+
</li>
|
|
155
768
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
769
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
770
|
+
<i role="presentation" class="fd-list__icon sap-icon--palette"></i>
|
|
771
|
+
<span class="fd-list__title">Appearance</span>
|
|
772
|
+
</a>
|
|
773
|
+
</li>
|
|
774
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link is-selected">
|
|
156
775
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
157
776
|
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
158
|
-
<span class="fd-list__title">
|
|
777
|
+
<span class="fd-list__title">Language & Region</span>
|
|
778
|
+
</a>
|
|
779
|
+
</li>
|
|
780
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
781
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
782
|
+
<i role="presentation" class="fd-list__icon sap-icon--iphone"></i>
|
|
783
|
+
<span class="fd-list__title">SAP Mobile Start Application</span>
|
|
784
|
+
</a>
|
|
785
|
+
</li>
|
|
786
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
787
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
788
|
+
<i role="presentation" class="fd-list__icon sap-icon--bell"></i>
|
|
789
|
+
<span class="fd-list__title">Notifications</span>
|
|
159
790
|
</a>
|
|
160
791
|
</li>
|
|
161
792
|
</ul>
|
|
@@ -165,126 +796,604 @@ npm install fundamental-styles
|
|
|
165
796
|
<div class="fd-bar fd-bar--header fd-settings__header">
|
|
166
797
|
<div class="fd-bar__left">
|
|
167
798
|
<div class="fd-bar__element">
|
|
168
|
-
<
|
|
799
|
+
<h2 class="fd-title fd-title--h5" aria-label="text">Language & Region</h2>
|
|
169
800
|
</div>
|
|
170
801
|
</div>
|
|
171
802
|
</div>
|
|
172
803
|
|
|
173
804
|
<div class="fd-settings__content fd-settings__content--no-background">
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
<div class="fd-bar__element">
|
|
183
|
-
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">
|
|
184
|
-
Close
|
|
185
|
-
</button>
|
|
186
|
-
</div>
|
|
187
|
-
</div>
|
|
188
|
-
</footer>
|
|
189
|
-
</div>
|
|
190
|
-
</section>
|
|
191
|
-
```
|
|
805
|
+
<div
|
|
806
|
+
role="note"
|
|
807
|
+
aria-labelledby="message-strip-hidden-text message-strip-text"
|
|
808
|
+
class="fd-message-strip fd-message-strip--information"
|
|
809
|
+
>
|
|
810
|
+
<span class="fd-message-strip__sr-only" id="message-strip-hidden-text"
|
|
811
|
+
>Information Bar</span
|
|
812
|
+
>
|
|
192
813
|
|
|
193
|
-
|
|
814
|
+
<div class="fd-message-strip__icon-container" aria-hidden="true">
|
|
815
|
+
<span
|
|
816
|
+
class="sap-icon sap-icon--message-information"
|
|
817
|
+
role="presentation"
|
|
818
|
+
aria-hidden="true"
|
|
819
|
+
></span>
|
|
820
|
+
</div>
|
|
194
821
|
|
|
195
|
-
|
|
822
|
+
<p class="fd-message-strip__text" id="message-strip-text">
|
|
823
|
+
Close to apply your chosen language - the page will reload.
|
|
824
|
+
</p>
|
|
825
|
+
</div>
|
|
196
826
|
|
|
197
|
-
-
|
|
198
|
-
-
|
|
199
|
-
-
|
|
200
|
-
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
-
|
|
204
|
-
-
|
|
205
|
-
|
|
827
|
+
<div class="fd-form-group">
|
|
828
|
+
<div class="fd-form-item">
|
|
829
|
+
<label for="form-item-1" class="fd-form-label">Display Language:</label>
|
|
830
|
+
<div class="fd-input-group fd-input-group--control">
|
|
831
|
+
<input
|
|
832
|
+
type="text"
|
|
833
|
+
class="fd-input fd-input-group__input"
|
|
834
|
+
id="form-item-1"
|
|
835
|
+
value="English (United States)"
|
|
836
|
+
/>
|
|
837
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
838
|
+
<button
|
|
839
|
+
aria-label="show/hide language options"
|
|
840
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
841
|
+
>
|
|
842
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
843
|
+
</button>
|
|
844
|
+
</span>
|
|
845
|
+
</div>
|
|
846
|
+
</div>
|
|
206
847
|
|
|
207
|
-
|
|
848
|
+
<div class="fd-form-item">
|
|
849
|
+
<label for="form-item-1" class="fd-form-label">Region:</label>
|
|
850
|
+
<div class="fd-input-group fd-input-group--control">
|
|
851
|
+
<input
|
|
852
|
+
type="text"
|
|
853
|
+
class="fd-input fd-input-group__input"
|
|
854
|
+
id="form-item-2"
|
|
855
|
+
value="United States"
|
|
856
|
+
/>
|
|
857
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
858
|
+
<button
|
|
859
|
+
aria-label="show/hide region options"
|
|
860
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
861
|
+
>
|
|
862
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
863
|
+
</button>
|
|
864
|
+
</span>
|
|
865
|
+
</div>
|
|
866
|
+
</div>
|
|
867
|
+
|
|
868
|
+
<div class="fd-form-item">
|
|
869
|
+
<label for="form-item-3" class="fd-form-label">Date Format:</label>
|
|
870
|
+
<div class="fd-input-group fd-input-group--control">
|
|
871
|
+
<input
|
|
872
|
+
type="text"
|
|
873
|
+
class="fd-input fd-input-group__input"
|
|
874
|
+
id="form-item-3"
|
|
875
|
+
value="MM.DD.YYYY"
|
|
876
|
+
/>
|
|
877
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
878
|
+
<button
|
|
879
|
+
aria-label="show/hide date format options"
|
|
880
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
881
|
+
>
|
|
882
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
883
|
+
</button>
|
|
884
|
+
</span>
|
|
885
|
+
</div>
|
|
886
|
+
</div>
|
|
887
|
+
|
|
888
|
+
<div class="fd-form-item">
|
|
889
|
+
<label for="form-item-4" class="fd-form-label">Time Format:</label>
|
|
890
|
+
<div class="fd-input-group fd-input-group--control">
|
|
891
|
+
<input
|
|
892
|
+
type="text"
|
|
893
|
+
class="fd-input fd-input-group__input"
|
|
894
|
+
id="form-item-4"
|
|
895
|
+
value="12 Hour"
|
|
896
|
+
/>
|
|
897
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
898
|
+
<button
|
|
899
|
+
aria-label="show/hide time format options"
|
|
900
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
901
|
+
>
|
|
902
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
903
|
+
</button>
|
|
904
|
+
</span>
|
|
905
|
+
</div>
|
|
906
|
+
</div>
|
|
208
907
|
|
|
209
|
-
|
|
908
|
+
<div class="fd-form-item">
|
|
909
|
+
<label for="form-item-5" class="fd-form-label">Time Zone:</label>
|
|
910
|
+
<div class="fd-input-group fd-input-group--control">
|
|
911
|
+
<input
|
|
912
|
+
type="text"
|
|
913
|
+
class="fd-input fd-input-group__input"
|
|
914
|
+
id="form-item-5"
|
|
915
|
+
value="GMT-5:00 Eastern Time (US & Canada)"
|
|
916
|
+
/>
|
|
917
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
918
|
+
<button
|
|
919
|
+
aria-label="show/hide time zone options"
|
|
920
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
921
|
+
>
|
|
922
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
923
|
+
</button>
|
|
924
|
+
</span>
|
|
925
|
+
</div>
|
|
926
|
+
|
|
927
|
+
<div class="fd-form-item">
|
|
928
|
+
<label for="form-item-6" class="fd-form-label">Currency:</label>
|
|
929
|
+
<div class="fd-input-group fd-input-group--control">
|
|
930
|
+
<input
|
|
931
|
+
type="text"
|
|
932
|
+
class="fd-input fd-input-group__input"
|
|
933
|
+
id="form-item-6"
|
|
934
|
+
value="USD - United States Dollar"
|
|
935
|
+
/>
|
|
936
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
937
|
+
<button
|
|
938
|
+
aria-label="show/hide currency options"
|
|
939
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
940
|
+
>
|
|
941
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
942
|
+
</button>
|
|
943
|
+
</span>
|
|
944
|
+
</div>
|
|
945
|
+
|
|
946
|
+
<div class="fd-form-item">
|
|
947
|
+
<label for="form-item-7" class="fd-form-label">Number Format:</label>
|
|
948
|
+
<div class="fd-input-group fd-input-group--control">
|
|
949
|
+
<input
|
|
950
|
+
type="text"
|
|
951
|
+
class="fd-input fd-input-group__input"
|
|
952
|
+
id="form-item-7"
|
|
953
|
+
value="1,234.56"
|
|
954
|
+
/>
|
|
955
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
956
|
+
<button
|
|
957
|
+
aria-label="show/hide number format options"
|
|
958
|
+
class="fd-input-group__button fd-button fd-button--transparent"
|
|
959
|
+
>
|
|
960
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
961
|
+
</button>
|
|
962
|
+
</span>
|
|
963
|
+
</div>
|
|
964
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
965
|
+
<div class="fd-bar__right">
|
|
966
|
+
<div class="fd-bar__element">
|
|
967
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
968
|
+
</div>
|
|
969
|
+
</div>
|
|
970
|
+
</footer>
|
|
971
|
+
</section>
|
|
972
|
+
```
|
|
973
|
+
|
|
974
|
+
### Notifications (L-XL-XXL)
|
|
210
975
|
|
|
211
976
|
```html
|
|
212
977
|
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
213
|
-
<div
|
|
214
|
-
|
|
978
|
+
<div
|
|
979
|
+
class="fd-dialog__content fd-settings__dialog-content"
|
|
980
|
+
role="dialog"
|
|
981
|
+
aria-modal="true"
|
|
982
|
+
aria-labelledby="dialog-title-1"
|
|
983
|
+
|
|
984
|
+
>
|
|
985
|
+
<div class="fd-dialog__body fd-settings__dialog-body">
|
|
215
986
|
<div class="fd-settings__container">
|
|
216
987
|
<div class="fd-settings__list-area">
|
|
217
|
-
<div class="fd-bar fd-bar--header
|
|
988
|
+
<div class="fd-bar fd-bar--header">
|
|
218
989
|
<div class="fd-bar__left">
|
|
219
990
|
<div class="fd-bar__element">
|
|
220
991
|
<h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
|
|
221
992
|
</div>
|
|
222
993
|
</div>
|
|
223
994
|
</div>
|
|
224
|
-
<div class="fd-bar fd-bar--subheader">
|
|
225
|
-
<div class="fd-bar__middle">
|
|
226
|
-
<div class="fd-bar__element fd-bar__element--full-width">
|
|
227
|
-
<input class="fd-input fd-input-group__input" type="text" placeholder="Search" aria-label="input">
|
|
228
|
-
</div>
|
|
229
|
-
</div>
|
|
230
|
-
</div>
|
|
231
995
|
<div class="fd-settings__list-container">
|
|
232
|
-
<ul
|
|
996
|
+
<ul
|
|
997
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
|
|
998
|
+
role="list"
|
|
999
|
+
>
|
|
233
1000
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
234
1001
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
235
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
236
|
-
<
|
|
1002
|
+
<i role="presentation" class="fd-list__icon sap-icon--user-settings"></i>
|
|
1003
|
+
<div class="fd-list__title">User Account</div>
|
|
237
1004
|
</a>
|
|
238
1005
|
</li>
|
|
239
1006
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
240
1007
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
241
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
242
|
-
<
|
|
1008
|
+
<i role="presentation" class="fd-list__icon sap-icon--palette"></i>
|
|
1009
|
+
<div class="fd-list__title">Appearance</div>
|
|
243
1010
|
</a>
|
|
244
1011
|
</li>
|
|
245
1012
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
246
1013
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
247
1014
|
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
248
|
-
<
|
|
1015
|
+
<div class="fd-list__title">Language & Region</div>
|
|
249
1016
|
</a>
|
|
250
1017
|
</li>
|
|
251
1018
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
252
1019
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
253
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
254
|
-
<
|
|
1020
|
+
<i role="presentation" class="fd-list__icon sap-icon--iphone"></i>
|
|
1021
|
+
<div class="fd-list__title">SAP Mobile Start Application</div>
|
|
255
1022
|
</a>
|
|
256
1023
|
</li>
|
|
257
|
-
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
1024
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link is-selected">
|
|
258
1025
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
259
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
260
|
-
<
|
|
1026
|
+
<i role="presentation" class="fd-list__icon sap-icon--bell"></i>
|
|
1027
|
+
<div class="fd-list__title">Notifications</div>
|
|
261
1028
|
</a>
|
|
262
1029
|
</li>
|
|
1030
|
+
</ul>
|
|
1031
|
+
</div>
|
|
1032
|
+
</div>
|
|
1033
|
+
<div class="fd-settings__detail-area">
|
|
1034
|
+
<div class="fd-bar fd-bar--header fd-settings__header">
|
|
1035
|
+
<div class="fd-bar__left">
|
|
1036
|
+
<div class="fd-bar__element">
|
|
1037
|
+
<h5 class="fd-title fd-title--h5" aria-label="text">Notifications</h5>
|
|
1038
|
+
</div>
|
|
1039
|
+
</div>
|
|
1040
|
+
</div>
|
|
1041
|
+
|
|
1042
|
+
<div class="fd-settings__content fd-settings__content--no-background">
|
|
1043
|
+
<div
|
|
1044
|
+
role="note"
|
|
1045
|
+
aria-labelledby="message-strip-hidden-text message-strip-text"
|
|
1046
|
+
class="fd-message-strip fd-message-strip--information"
|
|
1047
|
+
>
|
|
1048
|
+
<span class="fd-message-strip__sr-only" id="message-strip-hidden-text"
|
|
1049
|
+
>Information Bar</span
|
|
1050
|
+
>
|
|
1051
|
+
|
|
1052
|
+
<div class="fd-message-strip__icon-container" aria-hidden="true">
|
|
1053
|
+
<span
|
|
1054
|
+
class="sap-icon sap-icon--message-information"
|
|
1055
|
+
role="presentation"
|
|
1056
|
+
aria-hidden="true"
|
|
1057
|
+
></span>
|
|
1058
|
+
</div>
|
|
1059
|
+
|
|
1060
|
+
<p class="fd-message-strip__text" id="message-strip-text">
|
|
1061
|
+
Some settings are managed by your organization and cannot be changed.
|
|
1062
|
+
</p>
|
|
1063
|
+
</div>
|
|
1064
|
+
|
|
1065
|
+
<ul class="fd-list fd-list--byline fd-list--notification" role="list">
|
|
1066
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1067
|
+
<div class="fd-list__content">
|
|
1068
|
+
<div class="fd-list__title">Allow Notifications</div>
|
|
1069
|
+
</div>
|
|
1070
|
+
<label class="fd-switch">
|
|
1071
|
+
<span class="fd-switch__control">
|
|
1072
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
1073
|
+
<div class="fd-switch__slider">
|
|
1074
|
+
<div class="fd-switch__track">
|
|
1075
|
+
<i
|
|
1076
|
+
role="presentation"
|
|
1077
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
1078
|
+
></i>
|
|
1079
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
1080
|
+
<i
|
|
1081
|
+
role="presentation"
|
|
1082
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
1083
|
+
></i>
|
|
1084
|
+
</div>
|
|
1085
|
+
</div>
|
|
1086
|
+
</span>
|
|
1087
|
+
</label>
|
|
1088
|
+
</li>
|
|
1089
|
+
</ul>
|
|
1090
|
+
|
|
1091
|
+
<ul class="fd-list fd-list--byline fd-list--notification" role="list">
|
|
1092
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1093
|
+
<div class="fd-list__content">
|
|
1094
|
+
<div class="fd-list__title">Allow Banner Alerts</div>
|
|
1095
|
+
<div class="fd-list__byline">Switch on Banner for Notifications</div>
|
|
1096
|
+
</div>
|
|
1097
|
+
<label class="fd-switch">
|
|
1098
|
+
<span class="fd-switch__control">
|
|
1099
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
1100
|
+
<div class="fd-switch__slider">
|
|
1101
|
+
<div class="fd-switch__track">
|
|
1102
|
+
<i
|
|
1103
|
+
role="presentation"
|
|
1104
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
1105
|
+
></i>
|
|
1106
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
1107
|
+
<i
|
|
1108
|
+
role="presentation"
|
|
1109
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
1110
|
+
></i>
|
|
1111
|
+
</div>
|
|
1112
|
+
</div>
|
|
1113
|
+
</span>
|
|
1114
|
+
</label>
|
|
1115
|
+
</li>
|
|
1116
|
+
</ul>
|
|
1117
|
+
|
|
1118
|
+
<ul class="fd-list fd-list--byline fd-list--notification" role="list">
|
|
1119
|
+
<li role="listitem" class="fd-list__group-header">
|
|
1120
|
+
<div class="fd-list__title">Notification Group Title</div>
|
|
1121
|
+
</li>
|
|
1122
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1123
|
+
<div class="fd-list__content">
|
|
1124
|
+
<div class="fd-list__title">Notification Type</div>
|
|
1125
|
+
</div>
|
|
1126
|
+
<label class="fd-switch">
|
|
1127
|
+
<span class="fd-switch__control">
|
|
1128
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
1129
|
+
<div class="fd-switch__slider">
|
|
1130
|
+
<div class="fd-switch__track">
|
|
1131
|
+
<i
|
|
1132
|
+
role="presentation"
|
|
1133
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
1134
|
+
></i>
|
|
1135
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
1136
|
+
<i
|
|
1137
|
+
role="presentation"
|
|
1138
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
1139
|
+
></i>
|
|
1140
|
+
</div>
|
|
1141
|
+
</div>
|
|
1142
|
+
</span>
|
|
1143
|
+
</label>
|
|
1144
|
+
<button
|
|
1145
|
+
role="button"
|
|
1146
|
+
title="Click to navigate"
|
|
1147
|
+
class="fd-button fd-button--transparent"
|
|
1148
|
+
>
|
|
1149
|
+
<i
|
|
1150
|
+
class="sap-icon--navigation-right-arrow"
|
|
1151
|
+
role="presentation"
|
|
1152
|
+
aria-hidden="true"
|
|
1153
|
+
></i>
|
|
1154
|
+
</button>
|
|
1155
|
+
</li>
|
|
1156
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1157
|
+
<div class="fd-list__content">
|
|
1158
|
+
<div class="fd-list__title">Notification Type</div>
|
|
1159
|
+
</div>
|
|
1160
|
+
<label class="fd-switch">
|
|
1161
|
+
<span class="fd-switch__control">
|
|
1162
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
1163
|
+
<div class="fd-switch__slider">
|
|
1164
|
+
<div class="fd-switch__track">
|
|
1165
|
+
<i
|
|
1166
|
+
role="presentation"
|
|
1167
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
1168
|
+
></i>
|
|
1169
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
1170
|
+
<i
|
|
1171
|
+
role="presentation"
|
|
1172
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
1173
|
+
></i>
|
|
1174
|
+
</div>
|
|
1175
|
+
</div>
|
|
1176
|
+
</span>
|
|
1177
|
+
</label>
|
|
1178
|
+
<button
|
|
1179
|
+
role="button"
|
|
1180
|
+
title="Click to navigate"
|
|
1181
|
+
class="fd-button fd-button--transparent"
|
|
1182
|
+
>
|
|
1183
|
+
<i
|
|
1184
|
+
class="sap-icon--navigation-right-arrow"
|
|
1185
|
+
role="presentation"
|
|
1186
|
+
aria-hidden="true"
|
|
1187
|
+
></i>
|
|
1188
|
+
</button>
|
|
1189
|
+
</li>
|
|
1190
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1191
|
+
<div class="fd-list__content">
|
|
1192
|
+
<div class="fd-list__title">Notification Type</div>
|
|
1193
|
+
</div>
|
|
1194
|
+
<label class="fd-switch">
|
|
1195
|
+
<span class="fd-switch__control">
|
|
1196
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
1197
|
+
<div class="fd-switch__slider">
|
|
1198
|
+
<div class="fd-switch__track">
|
|
1199
|
+
<i
|
|
1200
|
+
role="presentation"
|
|
1201
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
1202
|
+
></i>
|
|
1203
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
1204
|
+
<i
|
|
1205
|
+
role="presentation"
|
|
1206
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
1207
|
+
></i>
|
|
1208
|
+
</div>
|
|
1209
|
+
</div>
|
|
1210
|
+
</span>
|
|
1211
|
+
</label>
|
|
1212
|
+
<button
|
|
1213
|
+
role="button"
|
|
1214
|
+
title="Click to navigate"
|
|
1215
|
+
class="fd-button fd-button--transparent"
|
|
1216
|
+
>
|
|
1217
|
+
<i
|
|
1218
|
+
class="sap-icon--navigation-right-arrow"
|
|
1219
|
+
role="presentation"
|
|
1220
|
+
aria-hidden="true"
|
|
1221
|
+
></i>
|
|
1222
|
+
</button>
|
|
1223
|
+
</li>
|
|
1224
|
+
<li role="listitem" class="fd-list__group-header">
|
|
1225
|
+
<div class="fd-list__title">Notification Group Title</div>
|
|
1226
|
+
</li>
|
|
1227
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1228
|
+
<div class="fd-list__content">
|
|
1229
|
+
<div class="fd-list__title">Notification Type</div>
|
|
1230
|
+
</div>
|
|
1231
|
+
<label class="fd-switch">
|
|
1232
|
+
<span class="fd-switch__control">
|
|
1233
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
1234
|
+
<div class="fd-switch__slider">
|
|
1235
|
+
<div class="fd-switch__track">
|
|
1236
|
+
<i
|
|
1237
|
+
role="presentation"
|
|
1238
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
1239
|
+
></i>
|
|
1240
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
1241
|
+
<i
|
|
1242
|
+
role="presentation"
|
|
1243
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
1244
|
+
></i>
|
|
1245
|
+
</div>
|
|
1246
|
+
</div>
|
|
1247
|
+
</span>
|
|
1248
|
+
</label>
|
|
1249
|
+
<button
|
|
1250
|
+
role="button"
|
|
1251
|
+
title="Click to navigate"
|
|
1252
|
+
class="fd-button fd-button--transparent"
|
|
1253
|
+
>
|
|
1254
|
+
<i
|
|
1255
|
+
class="sap-icon--navigation-right-arrow"
|
|
1256
|
+
role="presentation"
|
|
1257
|
+
aria-hidden="true"
|
|
1258
|
+
></i>
|
|
1259
|
+
</button>
|
|
1260
|
+
</li>
|
|
1261
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1262
|
+
<div class="fd-list__content">
|
|
1263
|
+
<div class="fd-list__title">Notification Type</div>
|
|
1264
|
+
</div>
|
|
1265
|
+
<label class="fd-switch">
|
|
1266
|
+
<span class="fd-switch__control">
|
|
1267
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
1268
|
+
<div class="fd-switch__slider">
|
|
1269
|
+
<div class="fd-switch__track">
|
|
1270
|
+
<i
|
|
1271
|
+
role="presentation"
|
|
1272
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
1273
|
+
></i>
|
|
1274
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
1275
|
+
<i
|
|
1276
|
+
role="presentation"
|
|
1277
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
1278
|
+
></i>
|
|
1279
|
+
</div>
|
|
1280
|
+
</div>
|
|
1281
|
+
</span>
|
|
1282
|
+
</label>
|
|
1283
|
+
<button
|
|
1284
|
+
role="button"
|
|
1285
|
+
title="Click to navigate"
|
|
1286
|
+
class="fd-button fd-button--transparent"
|
|
1287
|
+
>
|
|
1288
|
+
<i
|
|
1289
|
+
class="sap-icon--navigation-right-arrow"
|
|
1290
|
+
role="presentation"
|
|
1291
|
+
aria-hidden="true"
|
|
1292
|
+
></i>
|
|
1293
|
+
</button>
|
|
1294
|
+
</li>
|
|
1295
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1296
|
+
<div class="fd-list__content">
|
|
1297
|
+
<div class="fd-list__title">Notification Type</div>
|
|
1298
|
+
</div>
|
|
1299
|
+
<label class="fd-switch">
|
|
1300
|
+
<span class="fd-switch__control">
|
|
1301
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
1302
|
+
<div class="fd-switch__slider">
|
|
1303
|
+
<div class="fd-switch__track">
|
|
1304
|
+
<i
|
|
1305
|
+
role="presentation"
|
|
1306
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
1307
|
+
></i>
|
|
1308
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
1309
|
+
<i
|
|
1310
|
+
role="presentation"
|
|
1311
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
1312
|
+
></i>
|
|
1313
|
+
</div>
|
|
1314
|
+
</div>
|
|
1315
|
+
</span>
|
|
1316
|
+
</label>
|
|
1317
|
+
<button
|
|
1318
|
+
role="button"
|
|
1319
|
+
title="Click to navigate"
|
|
1320
|
+
class="fd-button fd-button--transparent"
|
|
1321
|
+
>
|
|
1322
|
+
<i
|
|
1323
|
+
class="sap-icon--navigation-right-arrow"
|
|
1324
|
+
role="presentation"
|
|
1325
|
+
aria-hidden="true"
|
|
1326
|
+
></i>
|
|
1327
|
+
</button>
|
|
1328
|
+
</li>
|
|
1329
|
+
</ul>
|
|
1330
|
+
</div>
|
|
1331
|
+
</div>
|
|
1332
|
+
</div>
|
|
1333
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
1334
|
+
<div class="fd-bar__right">
|
|
1335
|
+
<div class="fd-bar__element">
|
|
1336
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
1337
|
+
</div>
|
|
1338
|
+
</div>
|
|
1339
|
+
</footer>
|
|
1340
|
+
</section>
|
|
1341
|
+
```
|
|
1342
|
+
|
|
1343
|
+
### Notifications Details (L-XL-XXL)
|
|
1344
|
+
|
|
1345
|
+
```html
|
|
1346
|
+
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
1347
|
+
<div
|
|
1348
|
+
class="fd-dialog__content fd-settings__dialog-content"
|
|
1349
|
+
role="dialog"
|
|
1350
|
+
aria-modal="true"
|
|
1351
|
+
aria-labelledby="dialog-title-1"
|
|
1352
|
+
|
|
1353
|
+
>
|
|
1354
|
+
<div class="fd-dialog__body fd-settings__dialog-body">
|
|
1355
|
+
<div class="fd-settings__container">
|
|
1356
|
+
<div class="fd-settings__list-area">
|
|
1357
|
+
<div class="fd-bar fd-bar--header">
|
|
1358
|
+
<div class="fd-bar__left">
|
|
1359
|
+
<div class="fd-bar__element">
|
|
1360
|
+
<h1 class="fd-title fd-title--h5" aria-label="text">Settings</h1>
|
|
1361
|
+
</div>
|
|
1362
|
+
</div>
|
|
1363
|
+
</div>
|
|
1364
|
+
<div class="fd-settings__list-container">
|
|
1365
|
+
<ul
|
|
1366
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
|
|
1367
|
+
role="list"
|
|
1368
|
+
>
|
|
263
1369
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
264
1370
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
265
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
266
|
-
<
|
|
1371
|
+
<i role="presentation" class="fd-list__icon sap-icon--user-settings"></i>
|
|
1372
|
+
<div class="fd-list__title">User Account</div>
|
|
267
1373
|
</a>
|
|
268
1374
|
</li>
|
|
269
1375
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
270
1376
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
271
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
272
|
-
<
|
|
1377
|
+
<i role="presentation" class="fd-list__icon sap-icon--palette"></i>
|
|
1378
|
+
<div class="fd-list__title">Appearance</div>
|
|
273
1379
|
</a>
|
|
274
1380
|
</li>
|
|
275
1381
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
276
1382
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
277
1383
|
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
278
|
-
<
|
|
1384
|
+
<div class="fd-list__title">Language & Region</div>
|
|
279
1385
|
</a>
|
|
280
1386
|
</li>
|
|
281
|
-
</ul>
|
|
282
|
-
|
|
283
|
-
<ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer" role="list">
|
|
284
1387
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
285
1388
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
286
|
-
<i role="presentation" class="fd-list__icon sap-icon--
|
|
287
|
-
<
|
|
1389
|
+
<i role="presentation" class="fd-list__icon sap-icon--iphone"></i>
|
|
1390
|
+
<div class="fd-list__title">SAP Mobile Start Application</div>
|
|
1391
|
+
</a>
|
|
1392
|
+
</li>
|
|
1393
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link is-selected">
|
|
1394
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
1395
|
+
<i role="presentation" class="fd-list__icon sap-icon--bell"></i>
|
|
1396
|
+
<div class="fd-list__title">Notifications</div>
|
|
288
1397
|
</a>
|
|
289
1398
|
</li>
|
|
290
1399
|
</ul>
|
|
@@ -294,55 +1403,233 @@ This component works with or depends on:
|
|
|
294
1403
|
<div class="fd-bar fd-bar--header fd-settings__header">
|
|
295
1404
|
<div class="fd-bar__left">
|
|
296
1405
|
<div class="fd-bar__element">
|
|
297
|
-
<
|
|
1406
|
+
<button aria-label="button" class="fd-button fd-button--transparent">
|
|
1407
|
+
<i class="sap-icon--navigation-left-arrow"></i>
|
|
1408
|
+
</button>
|
|
1409
|
+
</div>
|
|
1410
|
+
<div class="fd-bar__element">
|
|
1411
|
+
<h2 class="fd-title fd-title--h5" aria-label="text">Notifications Type</h2>
|
|
298
1412
|
</div>
|
|
299
1413
|
</div>
|
|
300
1414
|
</div>
|
|
301
1415
|
|
|
302
1416
|
<div class="fd-settings__content fd-settings__content--no-background">
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
1417
|
+
<p class="fd-text">Description Text</p>
|
|
1418
|
+
|
|
1419
|
+
<h3 class="fd-title fd-title--h5">Notification Preferences</h3>
|
|
1420
|
+
|
|
1421
|
+
<ul class="fd-list fd-list--byline fd-list--notification" role="list">
|
|
1422
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1423
|
+
<div class="fd-list__content">
|
|
1424
|
+
<div class="fd-list__title">Notifications Panel</div>
|
|
1425
|
+
<div class="fd-list__byline">
|
|
1426
|
+
Receive notifications through the central panel in the web application.
|
|
1427
|
+
</div>
|
|
1428
|
+
</div>
|
|
1429
|
+
<label class="fd-switch">
|
|
1430
|
+
<span class="fd-switch__control">
|
|
1431
|
+
<input checked class="fd-switch__input" type="checkbox" value="" />
|
|
1432
|
+
<div class="fd-switch__slider">
|
|
1433
|
+
<div class="fd-switch__track">
|
|
1434
|
+
<i
|
|
1435
|
+
role="presentation"
|
|
1436
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
1437
|
+
></i>
|
|
1438
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
1439
|
+
<i
|
|
1440
|
+
role="presentation"
|
|
1441
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
1442
|
+
></i>
|
|
1443
|
+
</div>
|
|
1444
|
+
</div>
|
|
1445
|
+
</span>
|
|
1446
|
+
</label>
|
|
1447
|
+
</li>
|
|
1448
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1449
|
+
<div class="fd-list__content">
|
|
1450
|
+
<div class="fd-list__title">Banner Alerts</div>
|
|
1451
|
+
<div class="fd-list__byline">
|
|
1452
|
+
In addition, receive notifications instantly as a fly-in banner while working
|
|
1453
|
+
</div>
|
|
1454
|
+
</div>
|
|
1455
|
+
<label class="fd-switch">
|
|
1456
|
+
<span class="fd-switch__control">
|
|
1457
|
+
<input checked class="fd-switch__input" type="checkbox" value="" />
|
|
1458
|
+
<div class="fd-switch__slider">
|
|
1459
|
+
<div class="fd-switch__track">
|
|
1460
|
+
<i
|
|
1461
|
+
role="presentation"
|
|
1462
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
1463
|
+
></i>
|
|
1464
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
1465
|
+
<i
|
|
1466
|
+
role="presentation"
|
|
1467
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
1468
|
+
></i>
|
|
1469
|
+
</div>
|
|
1470
|
+
</div>
|
|
1471
|
+
</span>
|
|
1472
|
+
</label>
|
|
1473
|
+
</li>
|
|
1474
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1475
|
+
<div class="fd-list__content">
|
|
1476
|
+
<div class="fd-list__title">
|
|
1477
|
+
Push Notifications Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
1478
|
+
Eveniet doloremque modi deserunt ipsam
|
|
1479
|
+
</div>
|
|
1480
|
+
<div class="fd-list__byline">
|
|
1481
|
+
Receive notifications instantly on your mobile device cupiditate neque sed fuga
|
|
1482
|
+
nemo blanditiis vel aliquam possimus inventore. Iure molestias culpa minima
|
|
1483
|
+
voluptates, dolorum enim.
|
|
1484
|
+
</div>
|
|
1485
|
+
</div>
|
|
1486
|
+
<label class="fd-switch">
|
|
1487
|
+
<span class="fd-switch__control">
|
|
1488
|
+
<input checked class="fd-switch__input" type="checkbox" value="" />
|
|
1489
|
+
<div class="fd-switch__slider">
|
|
1490
|
+
<div class="fd-switch__track">
|
|
1491
|
+
<i
|
|
1492
|
+
role="presentation"
|
|
1493
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
1494
|
+
></i>
|
|
1495
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
1496
|
+
<i
|
|
1497
|
+
role="presentation"
|
|
1498
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
1499
|
+
></i>
|
|
1500
|
+
</div>
|
|
1501
|
+
</div>
|
|
1502
|
+
</span>
|
|
1503
|
+
</label>
|
|
1504
|
+
</li>
|
|
1505
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1506
|
+
<div class="fd-list__content">
|
|
1507
|
+
<div class="fd-list__title">Email</div>
|
|
1508
|
+
<div class="fd-list__byline">
|
|
1509
|
+
Receive notifications by email at your registered email address
|
|
1510
|
+
</div>
|
|
1511
|
+
</div>
|
|
1512
|
+
<label class="fd-switch">
|
|
1513
|
+
<span class="fd-switch__control">
|
|
1514
|
+
<input checked class="fd-switch__input" type="checkbox" value="" />
|
|
1515
|
+
<div class="fd-switch__slider">
|
|
1516
|
+
<div class="fd-switch__track">
|
|
1517
|
+
<i
|
|
1518
|
+
role="presentation"
|
|
1519
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
1520
|
+
></i>
|
|
1521
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
1522
|
+
<i
|
|
1523
|
+
role="presentation"
|
|
1524
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
1525
|
+
></i>
|
|
1526
|
+
</div>
|
|
1527
|
+
</div>
|
|
1528
|
+
</span>
|
|
1529
|
+
</label>
|
|
1530
|
+
</li>
|
|
1531
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
1532
|
+
<div class="fd-list__content">
|
|
1533
|
+
<div class="fd-list__title">Frequency</div>
|
|
1534
|
+
<div class="fd-list__byline">Choose the frequency of receiving a notification</div>
|
|
1535
|
+
</div>
|
|
1536
|
+
<div class="fd-popover">
|
|
1537
|
+
<div class="fd-popover__control" aria-expanded="false" aria-haspopup="true">
|
|
1538
|
+
<div class="fd-select">
|
|
1539
|
+
<div
|
|
1540
|
+
role="combobox"
|
|
1541
|
+
aria-roledescription="Contains item list for selection"
|
|
1542
|
+
aria-haspopup="listbox"
|
|
1543
|
+
aria-expanded="false"
|
|
1544
|
+
class="fd-select__control"
|
|
1545
|
+
value="Immediate"
|
|
1546
|
+
tabindex="0"
|
|
1547
|
+
>
|
|
1548
|
+
<span class="fd-select__text-content">Immediate</span>
|
|
1549
|
+
|
|
1550
|
+
<span
|
|
1551
|
+
role="button"
|
|
1552
|
+
tabindex="-1"
|
|
1553
|
+
aria-label="Selection options"
|
|
1554
|
+
title="Selection options"
|
|
1555
|
+
class="fd-button fd-button--transparent fd-select__button"
|
|
1556
|
+
>
|
|
1557
|
+
<i
|
|
1558
|
+
class="sap-icon--slim-arrow-down"
|
|
1559
|
+
role="presentation"
|
|
1560
|
+
aria-hidden="true"
|
|
1561
|
+
></i>
|
|
1562
|
+
</span>
|
|
1563
|
+
</div>
|
|
1564
|
+
</div>
|
|
1565
|
+
</div>
|
|
1566
|
+
</div>
|
|
1567
|
+
</li>
|
|
1568
|
+
</ul>
|
|
1569
|
+
</div>
|
|
1570
|
+
</div>
|
|
1571
|
+
</div>
|
|
1572
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
1573
|
+
<div class="fd-bar__right">
|
|
1574
|
+
<div class="fd-bar__element">
|
|
1575
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
1576
|
+
</div>
|
|
1577
|
+
</div>
|
|
1578
|
+
</footer>
|
|
1579
|
+
</section>
|
|
320
1580
|
```
|
|
321
1581
|
|
|
322
1582
|
### L-XL-XXL (with Tabs and overflowing content)
|
|
323
1583
|
|
|
1584
|
+
For large screen sizes, the Settings Dialog uses a fixed-width layout with scrollable content:
|
|
1585
|
+
<ul>
|
|
1586
|
+
<li><b>L (1024px - 1439px)</b></li>
|
|
1587
|
+
<li><b>XL (1440px - 1919px)</b></li>
|
|
1588
|
+
<li><b>XXL (1920px and above)</b></li>
|
|
1589
|
+
</ul>
|
|
1590
|
+
<b>Dimensions:</b>
|
|
1591
|
+
<ul>
|
|
1592
|
+
<li><b>Width:</b> Fixed at 960px</li>
|
|
1593
|
+
<li><b>Height:</b> 680px or 88% of screen height (whichever is smaller)</li>
|
|
1594
|
+
</ul>
|
|
1595
|
+
If the content height exceeds the available space, users can scroll through the content area.
|
|
1596
|
+
|
|
324
1597
|
```html
|
|
325
1598
|
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
326
|
-
<div
|
|
327
|
-
|
|
1599
|
+
<div
|
|
1600
|
+
class="fd-dialog__content fd-settings__dialog-content"
|
|
1601
|
+
role="dialog"
|
|
1602
|
+
aria-modal="true"
|
|
1603
|
+
aria-labelledby="dialog-title-1"
|
|
1604
|
+
|
|
1605
|
+
>
|
|
1606
|
+
<div class="fd-dialog__body fd-settings__dialog-body">
|
|
328
1607
|
<div class="fd-settings__container">
|
|
329
1608
|
<div class="fd-settings__list-area">
|
|
330
1609
|
<div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
|
|
331
1610
|
<div class="fd-bar__left">
|
|
332
1611
|
<div class="fd-bar__element">
|
|
333
|
-
<
|
|
1612
|
+
<h1 class="fd-title fd-title--h5" aria-label="text">Settings</h1>
|
|
334
1613
|
</div>
|
|
335
1614
|
</div>
|
|
336
1615
|
</div>
|
|
337
1616
|
<div class="fd-bar fd-bar--subheader">
|
|
338
1617
|
<div class="fd-bar__middle">
|
|
339
1618
|
<div class="fd-bar__element fd-bar__element--full-width">
|
|
340
|
-
<input
|
|
1619
|
+
<input
|
|
1620
|
+
class="fd-input fd-input-group__input"
|
|
1621
|
+
type="text"
|
|
1622
|
+
placeholder="Search"
|
|
1623
|
+
aria-label="input"
|
|
1624
|
+
/>
|
|
341
1625
|
</div>
|
|
342
1626
|
</div>
|
|
343
1627
|
</div>
|
|
344
1628
|
<div class="fd-settings__list-container">
|
|
345
|
-
<ul
|
|
1629
|
+
<ul
|
|
1630
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
|
|
1631
|
+
role="list"
|
|
1632
|
+
>
|
|
346
1633
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
347
1634
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
348
1635
|
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
@@ -453,7 +1740,10 @@ This component works with or depends on:
|
|
|
453
1740
|
</li>
|
|
454
1741
|
</ul>
|
|
455
1742
|
|
|
456
|
-
<ul
|
|
1743
|
+
<ul
|
|
1744
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer"
|
|
1745
|
+
role="list"
|
|
1746
|
+
>
|
|
457
1747
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
458
1748
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
459
1749
|
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
@@ -467,7 +1757,7 @@ This component works with or depends on:
|
|
|
467
1757
|
<div class="fd-bar fd-bar--header fd-settings__header">
|
|
468
1758
|
<div class="fd-bar__left">
|
|
469
1759
|
<div class="fd-bar__element">
|
|
470
|
-
<
|
|
1760
|
+
<h2 class="fd-title fd-title--h5" aria-label="text">Settings Item</h2>
|
|
471
1761
|
</div>
|
|
472
1762
|
</div>
|
|
473
1763
|
</div>
|
|
@@ -475,7 +1765,13 @@ This component works with or depends on:
|
|
|
475
1765
|
<div class="fd-icon-tab-bar fd-icon-tab-bar--sm fd-settings__tab-bar">
|
|
476
1766
|
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
477
1767
|
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
478
|
-
<a
|
|
1768
|
+
<a
|
|
1769
|
+
role="tab"
|
|
1770
|
+
class="fd-icon-tab-bar__tab"
|
|
1771
|
+
aria-selected="true"
|
|
1772
|
+
href="#section1"
|
|
1773
|
+
id="tab1"
|
|
1774
|
+
>
|
|
479
1775
|
<span class="fd-icon-tab-bar__tag">Tab Text</span>
|
|
480
1776
|
</a>
|
|
481
1777
|
</li>
|
|
@@ -485,32 +1781,96 @@ This component works with or depends on:
|
|
|
485
1781
|
</a>
|
|
486
1782
|
</li>
|
|
487
1783
|
</ul>
|
|
488
|
-
<section
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
|
|
1784
|
+
<section
|
|
1785
|
+
role="tabpanel"
|
|
1786
|
+
class="fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background"
|
|
1787
|
+
id="section1"
|
|
1788
|
+
aria-labelledby="tab1"
|
|
1789
|
+
>
|
|
1790
|
+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
|
|
1791
|
+
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
|
1792
|
+
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
|
|
1793
|
+
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
|
1794
|
+
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
|
|
1795
|
+
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
|
|
1796
|
+
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
|
|
1797
|
+
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
|
|
1798
|
+
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
|
|
1799
|
+
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut
|
|
1800
|
+
perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
|
1801
|
+
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
|
|
1802
|
+
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
|
|
1803
|
+
aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
1804
|
+
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
|
|
1805
|
+
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
|
|
1806
|
+
quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
|
|
1807
|
+
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
|
|
1808
|
+
reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
|
|
1809
|
+
dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus
|
|
1810
|
+
error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
|
|
1811
|
+
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
|
1812
|
+
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
|
|
1813
|
+
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
|
|
1814
|
+
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
|
|
1815
|
+
modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad
|
|
1816
|
+
minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
|
|
1817
|
+
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
|
|
1818
|
+
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
|
|
1819
|
+
nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
|
1820
|
+
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
|
|
1821
|
+
quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
|
|
1822
|
+
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
|
1823
|
+
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
|
|
1824
|
+
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
|
|
1825
|
+
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
|
|
1826
|
+
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
|
|
1827
|
+
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
|
|
1828
|
+
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut
|
|
1829
|
+
perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
|
1830
|
+
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
|
|
1831
|
+
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
|
|
1832
|
+
aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
1833
|
+
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
|
|
1834
|
+
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
|
|
1835
|
+
quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
|
|
1836
|
+
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
|
|
1837
|
+
reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
|
|
1838
|
+
dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus
|
|
1839
|
+
error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
|
|
1840
|
+
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
|
1841
|
+
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
|
|
1842
|
+
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
|
|
1843
|
+
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
|
|
1844
|
+
modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad
|
|
1845
|
+
minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
|
|
1846
|
+
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
|
|
1847
|
+
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
|
|
1848
|
+
nulla pariatur?
|
|
495
1849
|
</section>
|
|
496
|
-
<section
|
|
1850
|
+
<section
|
|
1851
|
+
role="tabpanel"
|
|
1852
|
+
class="fd-icon-tab-bar__panel fd-settings__content"
|
|
1853
|
+
id="section2"
|
|
1854
|
+
aria-labelledby="tab2"
|
|
1855
|
+
hidden
|
|
1856
|
+
>
|
|
497
1857
|
Section
|
|
498
1858
|
</section>
|
|
499
1859
|
</div>
|
|
500
1860
|
</div>
|
|
501
1861
|
</div>
|
|
502
1862
|
</div>
|
|
503
|
-
<footer class="fd-dialog__footer fd-bar fd-bar--footer">
|
|
1863
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
504
1864
|
<div class="fd-bar__right">
|
|
505
1865
|
<div class="fd-bar__element">
|
|
506
|
-
<button class="fd-dialog__decisive-button fd-button fd-button--
|
|
507
|
-
|
|
508
|
-
|
|
1866
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--emphasized">Save</button>
|
|
1867
|
+
</div>
|
|
1868
|
+
<div class="fd-bar__element">
|
|
1869
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
509
1870
|
</div>
|
|
510
1871
|
</div>
|
|
511
1872
|
</footer>
|
|
512
|
-
</
|
|
513
|
-
</section>
|
|
1873
|
+
</section>
|
|
514
1874
|
```
|
|
515
1875
|
|
|
516
1876
|
## Accessibility
|