@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,114 @@
|
|
|
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 is-selected">
|
|
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">
|
|
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">User Account</h2>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="fd-settings__content fd-settings__content--no-background">
|
|
67
|
+
<div class="fd-settings__profile-card">
|
|
68
|
+
<span
|
|
69
|
+
class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--thumbnail"
|
|
70
|
+
style="background-image: url('/assets/images/portraits/L_80x80_M2.png')"
|
|
71
|
+
role="img"
|
|
72
|
+
aria-label="Alain Chevallier"
|
|
73
|
+
>
|
|
74
|
+
<i
|
|
75
|
+
class="fd-avatar__zoom-icon sap-icon--edit"
|
|
76
|
+
role="presentation"
|
|
77
|
+
aria-hidden="true"
|
|
78
|
+
></i>
|
|
79
|
+
</span>
|
|
80
|
+
<h3 class="fd-settings__profile-card-name">Alain Chevallier</h3>
|
|
81
|
+
<div class="fd-settings__profile-card-subline">alain.chevallier@sap.com</div>
|
|
82
|
+
<div class="fd-settings__profile-card-subline">Delivery Manager, SAP SE</div>
|
|
83
|
+
<button class="fd-button" role="button" aria-label="Manage Account">
|
|
84
|
+
<i role="presentation" class="sap-icon--user-settings"></i>
|
|
85
|
+
<span class="fd-button__text">Manage Account</span>
|
|
86
|
+
</button>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="fd-settings__content-container">
|
|
89
|
+
<div
|
|
90
|
+
style="
|
|
91
|
+
background: cornsilk;
|
|
92
|
+
height: 17.3rem;
|
|
93
|
+
width: 100%;
|
|
94
|
+
display: flex;
|
|
95
|
+
justify-content: center;
|
|
96
|
+
align-items: center;
|
|
97
|
+
"
|
|
98
|
+
>
|
|
99
|
+
Content Area
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
107
|
+
<div class="fd-bar__right">
|
|
108
|
+
<div class="fd-bar__element">
|
|
109
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
</footer>
|
|
113
|
+
</div>
|
|
114
|
+
</section>
|
|
@@ -1,24 +1,38 @@
|
|
|
1
1
|
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
2
|
-
<div
|
|
3
|
-
|
|
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">
|
|
4
10
|
<div class="fd-settings__container">
|
|
5
11
|
<div class="fd-settings__list-area">
|
|
6
12
|
<div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
|
|
7
13
|
<div class="fd-bar__left">
|
|
8
14
|
<div class="fd-bar__element">
|
|
9
|
-
<
|
|
15
|
+
<h1 class="fd-title fd-title--h5" aria-label="text">Settings</h1>
|
|
10
16
|
</div>
|
|
11
17
|
</div>
|
|
12
18
|
</div>
|
|
13
19
|
<div class="fd-bar fd-bar--subheader">
|
|
14
20
|
<div class="fd-bar__middle">
|
|
15
21
|
<div class="fd-bar__element fd-bar__element--full-width">
|
|
16
|
-
<input
|
|
22
|
+
<input
|
|
23
|
+
class="fd-input fd-input-group__input"
|
|
24
|
+
type="text"
|
|
25
|
+
placeholder="Search"
|
|
26
|
+
aria-label="input"
|
|
27
|
+
/>
|
|
17
28
|
</div>
|
|
18
29
|
</div>
|
|
19
30
|
</div>
|
|
20
31
|
<div class="fd-settings__list-container">
|
|
21
|
-
<ul
|
|
32
|
+
<ul
|
|
33
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
|
|
34
|
+
role="list"
|
|
35
|
+
>
|
|
22
36
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
23
37
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
24
38
|
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
@@ -54,7 +68,7 @@
|
|
|
54
68
|
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
55
69
|
<span class="fd-list__title">Settings Item</span>
|
|
56
70
|
</a>
|
|
57
|
-
</li>
|
|
71
|
+
</li>
|
|
58
72
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
59
73
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
60
74
|
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
@@ -64,7 +78,7 @@
|
|
|
64
78
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
65
79
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
66
80
|
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
67
|
-
|
|
81
|
+
<span class="fd-list__title">Settings Item</span>
|
|
68
82
|
</a>
|
|
69
83
|
</li>
|
|
70
84
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
@@ -128,8 +142,11 @@
|
|
|
128
142
|
</a>
|
|
129
143
|
</li>
|
|
130
144
|
</ul>
|
|
131
|
-
|
|
132
|
-
<ul
|
|
145
|
+
|
|
146
|
+
<ul
|
|
147
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer"
|
|
148
|
+
role="list"
|
|
149
|
+
>
|
|
133
150
|
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
134
151
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
135
152
|
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
@@ -143,15 +160,21 @@
|
|
|
143
160
|
<div class="fd-bar fd-bar--header fd-settings__header">
|
|
144
161
|
<div class="fd-bar__left">
|
|
145
162
|
<div class="fd-bar__element">
|
|
146
|
-
<
|
|
163
|
+
<h2 class="fd-title fd-title--h5" aria-label="text">Settings Item</h2>
|
|
147
164
|
</div>
|
|
148
165
|
</div>
|
|
149
166
|
</div>
|
|
150
|
-
|
|
167
|
+
|
|
151
168
|
<div class="fd-icon-tab-bar fd-icon-tab-bar--sm fd-settings__tab-bar">
|
|
152
169
|
<ul role="tablist" class="fd-icon-tab-bar__header">
|
|
153
170
|
<li role="presentation" class="fd-icon-tab-bar__item">
|
|
154
|
-
<a
|
|
171
|
+
<a
|
|
172
|
+
role="tab"
|
|
173
|
+
class="fd-icon-tab-bar__tab"
|
|
174
|
+
aria-selected="true"
|
|
175
|
+
href="#section1"
|
|
176
|
+
id="tab1"
|
|
177
|
+
>
|
|
155
178
|
<span class="fd-icon-tab-bar__tag">Tab Text</span>
|
|
156
179
|
</a>
|
|
157
180
|
</li>
|
|
@@ -161,29 +184,94 @@
|
|
|
161
184
|
</a>
|
|
162
185
|
</li>
|
|
163
186
|
</ul>
|
|
164
|
-
<section
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
|
|
187
|
+
<section
|
|
188
|
+
role="tabpanel"
|
|
189
|
+
class="fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background"
|
|
190
|
+
id="section1"
|
|
191
|
+
aria-labelledby="tab1"
|
|
192
|
+
>
|
|
193
|
+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
|
|
194
|
+
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
|
195
|
+
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
|
|
196
|
+
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
|
197
|
+
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
|
|
198
|
+
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
|
|
199
|
+
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
|
|
200
|
+
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
|
|
201
|
+
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
|
|
202
|
+
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut
|
|
203
|
+
perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
|
204
|
+
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
|
|
205
|
+
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
|
|
206
|
+
aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
207
|
+
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
|
|
208
|
+
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
|
|
209
|
+
quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
|
|
210
|
+
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
|
|
211
|
+
reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
|
|
212
|
+
dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus
|
|
213
|
+
error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
|
|
214
|
+
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
|
215
|
+
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
|
|
216
|
+
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
|
|
217
|
+
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
|
|
218
|
+
modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad
|
|
219
|
+
minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
|
|
220
|
+
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
|
|
221
|
+
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
|
|
222
|
+
nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
|
223
|
+
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
|
|
224
|
+
quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
|
|
225
|
+
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
|
226
|
+
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
|
|
227
|
+
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
|
|
228
|
+
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
|
|
229
|
+
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
|
|
230
|
+
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
|
|
231
|
+
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut
|
|
232
|
+
perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
|
233
|
+
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
|
|
234
|
+
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
|
|
235
|
+
aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
236
|
+
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
|
|
237
|
+
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
|
|
238
|
+
quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
|
|
239
|
+
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
|
|
240
|
+
reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
|
|
241
|
+
dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus
|
|
242
|
+
error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
|
|
243
|
+
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
|
244
|
+
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
|
|
245
|
+
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
|
|
246
|
+
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
|
|
247
|
+
modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad
|
|
248
|
+
minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
|
|
249
|
+
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
|
|
250
|
+
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
|
|
251
|
+
nulla pariatur?
|
|
171
252
|
</section>
|
|
172
|
-
<section
|
|
253
|
+
<section
|
|
254
|
+
role="tabpanel"
|
|
255
|
+
class="fd-icon-tab-bar__panel fd-settings__content"
|
|
256
|
+
id="section2"
|
|
257
|
+
aria-labelledby="tab2"
|
|
258
|
+
hidden
|
|
259
|
+
>
|
|
173
260
|
Section
|
|
174
261
|
</section>
|
|
175
262
|
</div>
|
|
176
263
|
</div>
|
|
177
264
|
</div>
|
|
178
265
|
</div>
|
|
179
|
-
<footer class="fd-dialog__footer fd-bar fd-bar--footer">
|
|
266
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
180
267
|
<div class="fd-bar__right">
|
|
181
268
|
<div class="fd-bar__element">
|
|
182
|
-
<button class="fd-dialog__decisive-button fd-button fd-button--
|
|
183
|
-
|
|
184
|
-
|
|
269
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--emphasized">Save</button>
|
|
270
|
+
</div>
|
|
271
|
+
<div class="fd-bar__element">
|
|
272
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
185
273
|
</div>
|
|
186
274
|
</div>
|
|
187
275
|
</footer>
|
|
188
276
|
</div>
|
|
189
|
-
</section>
|
|
277
|
+
</section>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fundamental-styles/mcp",
|
|
3
|
-
"version": "0.41.9-rc.
|
|
3
|
+
"version": "0.41.9-rc.22",
|
|
4
4
|
"mcpName": "io.github.sap/fundamental-styles-mcp",
|
|
5
5
|
"description": "MCP server exposing fundamental-styles CSS component metadata for AI coding assistants",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
2
|
-
<div class="fd-dialog__content fd-settings__dialog-content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1" style="height: 800px;">
|
|
3
|
-
<div class="fd-dialog__body fd-settings__dialog-body" >
|
|
4
|
-
<div class="fd-settings__container">
|
|
5
|
-
<div class="fd-settings__list-area">
|
|
6
|
-
<div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
|
|
7
|
-
<div class="fd-bar__left">
|
|
8
|
-
<div class="fd-bar__element">
|
|
9
|
-
<h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
|
|
10
|
-
</div>
|
|
11
|
-
</div>
|
|
12
|
-
</div>
|
|
13
|
-
<div class="fd-bar fd-bar--subheader">
|
|
14
|
-
<div class="fd-bar__middle">
|
|
15
|
-
<div class="fd-bar__element fd-bar__element--full-width">
|
|
16
|
-
<input class="fd-input fd-input-group__input" type="text" placeholder="Search" aria-label="input">
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
</div>
|
|
20
|
-
<div class="fd-settings__list-container">
|
|
21
|
-
<ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list" role="list">
|
|
22
|
-
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
23
|
-
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
24
|
-
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
25
|
-
<span class="fd-list__title">Settings Item</span>
|
|
26
|
-
</a>
|
|
27
|
-
</li>
|
|
28
|
-
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
29
|
-
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
30
|
-
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
31
|
-
<span class="fd-list__title">Settings Item</span>
|
|
32
|
-
</a>
|
|
33
|
-
</li>
|
|
34
|
-
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
35
|
-
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
36
|
-
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
37
|
-
<span class="fd-list__title">Settings Item</span>
|
|
38
|
-
</a>
|
|
39
|
-
</li>
|
|
40
|
-
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
41
|
-
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
42
|
-
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
43
|
-
<span class="fd-list__title">Settings Item</span>
|
|
44
|
-
</a>
|
|
45
|
-
</li>
|
|
46
|
-
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
47
|
-
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
48
|
-
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
49
|
-
<span class="fd-list__title">Settings Item</span>
|
|
50
|
-
</a>
|
|
51
|
-
</li>
|
|
52
|
-
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
53
|
-
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
54
|
-
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
55
|
-
<span class="fd-list__title">Settings Item</span>
|
|
56
|
-
</a>
|
|
57
|
-
</li>
|
|
58
|
-
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
59
|
-
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
60
|
-
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
61
|
-
<span class="fd-list__title">Settings Item</span>
|
|
62
|
-
</a>
|
|
63
|
-
</li>
|
|
64
|
-
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
65
|
-
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
66
|
-
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
67
|
-
<span class="fd-list__title">Settings Item</span>
|
|
68
|
-
</a>
|
|
69
|
-
</li>
|
|
70
|
-
</ul>
|
|
71
|
-
|
|
72
|
-
<ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer" role="list">
|
|
73
|
-
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
74
|
-
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
75
|
-
<i role="presentation" class="fd-list__icon sap-icon--globe"></i>
|
|
76
|
-
<span class="fd-list__title">Fixed Settings Item</span>
|
|
77
|
-
</a>
|
|
78
|
-
</li>
|
|
79
|
-
</ul>
|
|
80
|
-
</div>
|
|
81
|
-
</div>
|
|
82
|
-
<div class="fd-settings__detail-area">
|
|
83
|
-
<div class="fd-bar fd-bar--header fd-settings__header">
|
|
84
|
-
<div class="fd-bar__left">
|
|
85
|
-
<div class="fd-bar__element">
|
|
86
|
-
<h5 class="fd-title fd-title--h5" aria-label="text">Settings Item</h5>
|
|
87
|
-
</div>
|
|
88
|
-
</div>
|
|
89
|
-
</div>
|
|
90
|
-
|
|
91
|
-
<div class="fd-settings__content fd-settings__content--no-background">
|
|
92
|
-
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
|
|
93
|
-
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
<footer class="fd-dialog__footer fd-bar fd-bar--footer">
|
|
99
|
-
<div class="fd-bar__right">
|
|
100
|
-
<div class="fd-bar__element">
|
|
101
|
-
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">
|
|
102
|
-
Close
|
|
103
|
-
</button>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</footer>
|
|
107
|
-
</div>
|
|
108
|
-
</section>
|