@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,240 @@
|
|
|
1
|
+
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
2
|
+
<div
|
|
3
|
+
class="fd-dialog__content fd-settings__dialog-content"
|
|
4
|
+
role="dialog"
|
|
5
|
+
aria-modal="true"
|
|
6
|
+
aria-labelledby="dialog-title-1"
|
|
7
|
+
style="height: 800px"
|
|
8
|
+
>
|
|
9
|
+
<div class="fd-dialog__body fd-settings__dialog-body">
|
|
10
|
+
<div class="fd-settings__container">
|
|
11
|
+
<div class="fd-settings__list-area">
|
|
12
|
+
<div class="fd-bar fd-bar--header">
|
|
13
|
+
<div class="fd-bar__left">
|
|
14
|
+
<div class="fd-bar__element">
|
|
15
|
+
<h1 class="fd-title fd-title--h5" aria-label="text">Settings</h1>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="fd-settings__list-container">
|
|
20
|
+
<ul
|
|
21
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
|
|
22
|
+
role="list"
|
|
23
|
+
>
|
|
24
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
25
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
26
|
+
<i role="presentation" class="fd-list__icon sap-icon--user-settings"></i>
|
|
27
|
+
<div class="fd-list__title">User Account</div>
|
|
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
|
+
<div class="fd-list__title">Appearance</div>
|
|
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
|
+
<div class="fd-list__title">Language & Region</div>
|
|
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
|
+
<div class="fd-list__title">SAP Mobile Start Application</div>
|
|
46
|
+
</a>
|
|
47
|
+
</li>
|
|
48
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link is-selected">
|
|
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
|
+
<div class="fd-list__title">Notifications</div>
|
|
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
|
+
<button aria-label="button" class="fd-button fd-button--transparent">
|
|
62
|
+
<i class="sap-icon--navigation-left-arrow"></i>
|
|
63
|
+
</button>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="fd-bar__element">
|
|
66
|
+
<h2 class="fd-title fd-title--h5" aria-label="text">Notifications Type</h2>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div class="fd-settings__content fd-settings__content--no-background">
|
|
72
|
+
<p class="fd-text">Description Text</p>
|
|
73
|
+
|
|
74
|
+
<div class="fd-settings__spacing" role="presentation" aria-hidden="true"></div>
|
|
75
|
+
|
|
76
|
+
<h3 class="fd-title fd-title--h5">Notification Preferences</h3>
|
|
77
|
+
|
|
78
|
+
<div class="fd-settings__spacing" role="presentation" aria-hidden="true"></div>
|
|
79
|
+
|
|
80
|
+
<ul class="fd-list fd-list--byline fd-list--notification" role="list">
|
|
81
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
82
|
+
<div class="fd-list__content">
|
|
83
|
+
<div class="fd-list__title">Notifications Panel</div>
|
|
84
|
+
<div class="fd-list__byline">
|
|
85
|
+
Receive notifications through the central panel in the web application.
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
<label class="fd-switch">
|
|
89
|
+
<span class="fd-switch__control">
|
|
90
|
+
<input checked class="fd-switch__input" type="checkbox" value="" />
|
|
91
|
+
<div class="fd-switch__slider">
|
|
92
|
+
<div class="fd-switch__track">
|
|
93
|
+
<i
|
|
94
|
+
role="presentation"
|
|
95
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
96
|
+
></i>
|
|
97
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
98
|
+
<i
|
|
99
|
+
role="presentation"
|
|
100
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
101
|
+
></i>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</span>
|
|
105
|
+
</label>
|
|
106
|
+
</li>
|
|
107
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
108
|
+
<div class="fd-list__content">
|
|
109
|
+
<div class="fd-list__title">Banner Alerts</div>
|
|
110
|
+
<div class="fd-list__byline">
|
|
111
|
+
In addition, receive notifications instantly as a fly-in banner while working
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
<label class="fd-switch">
|
|
115
|
+
<span class="fd-switch__control">
|
|
116
|
+
<input checked class="fd-switch__input" type="checkbox" value="" />
|
|
117
|
+
<div class="fd-switch__slider">
|
|
118
|
+
<div class="fd-switch__track">
|
|
119
|
+
<i
|
|
120
|
+
role="presentation"
|
|
121
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
122
|
+
></i>
|
|
123
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
124
|
+
<i
|
|
125
|
+
role="presentation"
|
|
126
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
127
|
+
></i>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</span>
|
|
131
|
+
</label>
|
|
132
|
+
</li>
|
|
133
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
134
|
+
<div class="fd-list__content">
|
|
135
|
+
<div class="fd-list__title">
|
|
136
|
+
Push Notifications Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
137
|
+
Eveniet doloremque modi deserunt ipsam
|
|
138
|
+
</div>
|
|
139
|
+
<div class="fd-list__byline">
|
|
140
|
+
Receive notifications instantly on your mobile device cupiditate neque sed fuga
|
|
141
|
+
nemo blanditiis vel aliquam possimus inventore. Iure molestias culpa minima
|
|
142
|
+
voluptates, dolorum enim.
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
<label class="fd-switch">
|
|
146
|
+
<span class="fd-switch__control">
|
|
147
|
+
<input checked class="fd-switch__input" type="checkbox" value="" />
|
|
148
|
+
<div class="fd-switch__slider">
|
|
149
|
+
<div class="fd-switch__track">
|
|
150
|
+
<i
|
|
151
|
+
role="presentation"
|
|
152
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
153
|
+
></i>
|
|
154
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
155
|
+
<i
|
|
156
|
+
role="presentation"
|
|
157
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
158
|
+
></i>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
</span>
|
|
162
|
+
</label>
|
|
163
|
+
</li>
|
|
164
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
165
|
+
<div class="fd-list__content">
|
|
166
|
+
<div class="fd-list__title">Email</div>
|
|
167
|
+
<div class="fd-list__byline">
|
|
168
|
+
Receive notifications by email at your registered email address
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
<label class="fd-switch">
|
|
172
|
+
<span class="fd-switch__control">
|
|
173
|
+
<input checked class="fd-switch__input" type="checkbox" value="" />
|
|
174
|
+
<div class="fd-switch__slider">
|
|
175
|
+
<div class="fd-switch__track">
|
|
176
|
+
<i
|
|
177
|
+
role="presentation"
|
|
178
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
179
|
+
></i>
|
|
180
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
181
|
+
<i
|
|
182
|
+
role="presentation"
|
|
183
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
184
|
+
></i>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</span>
|
|
188
|
+
</label>
|
|
189
|
+
</li>
|
|
190
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
191
|
+
<div class="fd-list__content">
|
|
192
|
+
<div class="fd-list__title">Frequency</div>
|
|
193
|
+
<div class="fd-list__byline">Choose the frequency of receiving a notification</div>
|
|
194
|
+
</div>
|
|
195
|
+
<div class="fd-popover">
|
|
196
|
+
<div class="fd-popover__control" aria-expanded="false" aria-haspopup="true">
|
|
197
|
+
<div class="fd-select">
|
|
198
|
+
<div
|
|
199
|
+
role="combobox"
|
|
200
|
+
aria-roledescription="Contains item list for selection"
|
|
201
|
+
aria-haspopup="listbox"
|
|
202
|
+
aria-expanded="false"
|
|
203
|
+
class="fd-select__control"
|
|
204
|
+
value="Immediate"
|
|
205
|
+
tabindex="0"
|
|
206
|
+
>
|
|
207
|
+
<span class="fd-select__text-content">Immediate</span>
|
|
208
|
+
|
|
209
|
+
<span
|
|
210
|
+
role="button"
|
|
211
|
+
tabindex="-1"
|
|
212
|
+
aria-label="Selection options"
|
|
213
|
+
title="Selection options"
|
|
214
|
+
class="fd-button fd-button--transparent fd-select__button"
|
|
215
|
+
>
|
|
216
|
+
<i
|
|
217
|
+
class="sap-icon--slim-arrow-down"
|
|
218
|
+
role="presentation"
|
|
219
|
+
aria-hidden="true"
|
|
220
|
+
></i>
|
|
221
|
+
</span>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</li>
|
|
227
|
+
</ul>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
233
|
+
<div class="fd-bar__right">
|
|
234
|
+
<div class="fd-bar__element">
|
|
235
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
</footer>
|
|
239
|
+
</div>
|
|
240
|
+
</section>
|
|
@@ -0,0 +1,370 @@
|
|
|
1
|
+
<section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
|
|
2
|
+
<div
|
|
3
|
+
class="fd-dialog__content fd-settings__dialog-content"
|
|
4
|
+
role="dialog"
|
|
5
|
+
aria-modal="true"
|
|
6
|
+
aria-labelledby="dialog-title-1"
|
|
7
|
+
style="height: 800px"
|
|
8
|
+
>
|
|
9
|
+
<div class="fd-dialog__body fd-settings__dialog-body">
|
|
10
|
+
<div class="fd-settings__container">
|
|
11
|
+
<div class="fd-settings__list-area">
|
|
12
|
+
<div class="fd-bar fd-bar--header">
|
|
13
|
+
<div class="fd-bar__left">
|
|
14
|
+
<div class="fd-bar__element">
|
|
15
|
+
<h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="fd-settings__list-container">
|
|
20
|
+
<ul
|
|
21
|
+
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
|
|
22
|
+
role="list"
|
|
23
|
+
>
|
|
24
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
|
|
25
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
26
|
+
<i role="presentation" class="fd-list__icon sap-icon--user-settings"></i>
|
|
27
|
+
<div class="fd-list__title">User Account</div>
|
|
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
|
+
<div class="fd-list__title">Appearance</div>
|
|
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
|
+
<div class="fd-list__title">Language & Region</div>
|
|
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
|
+
<div class="fd-list__title">SAP Mobile Start Application</div>
|
|
46
|
+
</a>
|
|
47
|
+
</li>
|
|
48
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link is-selected">
|
|
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
|
+
<div class="fd-list__title">Notifications</div>
|
|
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
|
+
<h5 class="fd-title fd-title--h5" aria-label="text">Notifications</h5>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="fd-settings__content fd-settings__content--no-background">
|
|
67
|
+
<div
|
|
68
|
+
role="note"
|
|
69
|
+
aria-labelledby="message-strip-hidden-text message-strip-text"
|
|
70
|
+
class="fd-message-strip fd-message-strip--information"
|
|
71
|
+
>
|
|
72
|
+
<span class="fd-message-strip__sr-only" id="message-strip-hidden-text"
|
|
73
|
+
>Information Bar</span
|
|
74
|
+
>
|
|
75
|
+
|
|
76
|
+
<div class="fd-message-strip__icon-container" aria-hidden="true">
|
|
77
|
+
<span
|
|
78
|
+
class="sap-icon sap-icon--message-information"
|
|
79
|
+
role="presentation"
|
|
80
|
+
aria-hidden="true"
|
|
81
|
+
></span>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<p class="fd-message-strip__text" id="message-strip-text">
|
|
85
|
+
Some settings are managed by your organization and cannot be changed.
|
|
86
|
+
</p>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div class="fd-settings__spacing" role="presentation" aria-hidden="true"></div>
|
|
90
|
+
|
|
91
|
+
<ul class="fd-list fd-list--byline fd-list--notification" role="list">
|
|
92
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
93
|
+
<div class="fd-list__content">
|
|
94
|
+
<div class="fd-list__title">Allow Notifications</div>
|
|
95
|
+
</div>
|
|
96
|
+
<label class="fd-switch">
|
|
97
|
+
<span class="fd-switch__control">
|
|
98
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
99
|
+
<div class="fd-switch__slider">
|
|
100
|
+
<div class="fd-switch__track">
|
|
101
|
+
<i
|
|
102
|
+
role="presentation"
|
|
103
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
104
|
+
></i>
|
|
105
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
106
|
+
<i
|
|
107
|
+
role="presentation"
|
|
108
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
109
|
+
></i>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
</span>
|
|
113
|
+
</label>
|
|
114
|
+
</li>
|
|
115
|
+
</ul>
|
|
116
|
+
|
|
117
|
+
<ul class="fd-list fd-list--byline fd-list--notification" role="list">
|
|
118
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
119
|
+
<div class="fd-list__content">
|
|
120
|
+
<div class="fd-list__title">Allow Banner Alerts</div>
|
|
121
|
+
<div class="fd-list__byline">Switch on Banner for Notifications</div>
|
|
122
|
+
</div>
|
|
123
|
+
<label class="fd-switch">
|
|
124
|
+
<span class="fd-switch__control">
|
|
125
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
126
|
+
<div class="fd-switch__slider">
|
|
127
|
+
<div class="fd-switch__track">
|
|
128
|
+
<i
|
|
129
|
+
role="presentation"
|
|
130
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
131
|
+
></i>
|
|
132
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
133
|
+
<i
|
|
134
|
+
role="presentation"
|
|
135
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
136
|
+
></i>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
</span>
|
|
140
|
+
</label>
|
|
141
|
+
</li>
|
|
142
|
+
</ul>
|
|
143
|
+
|
|
144
|
+
<div class="fd-settings__spacing" role="presentation" aria-hidden="true"></div>
|
|
145
|
+
|
|
146
|
+
<ul class="fd-list fd-list--byline fd-list--notification" role="list">
|
|
147
|
+
<li role="listitem" class="fd-list__group-header">
|
|
148
|
+
<div class="fd-list__title">Notification Group Title</div>
|
|
149
|
+
</li>
|
|
150
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
151
|
+
<div class="fd-list__content">
|
|
152
|
+
<div class="fd-list__title">Notification Type</div>
|
|
153
|
+
</div>
|
|
154
|
+
<label class="fd-switch">
|
|
155
|
+
<span class="fd-switch__control">
|
|
156
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
157
|
+
<div class="fd-switch__slider">
|
|
158
|
+
<div class="fd-switch__track">
|
|
159
|
+
<i
|
|
160
|
+
role="presentation"
|
|
161
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
162
|
+
></i>
|
|
163
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
164
|
+
<i
|
|
165
|
+
role="presentation"
|
|
166
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
167
|
+
></i>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</span>
|
|
171
|
+
</label>
|
|
172
|
+
<button
|
|
173
|
+
role="button"
|
|
174
|
+
title="Click to navigate"
|
|
175
|
+
class="fd-button fd-button--transparent"
|
|
176
|
+
>
|
|
177
|
+
<i
|
|
178
|
+
class="sap-icon--navigation-right-arrow"
|
|
179
|
+
role="presentation"
|
|
180
|
+
aria-hidden="true"
|
|
181
|
+
></i>
|
|
182
|
+
</button>
|
|
183
|
+
</li>
|
|
184
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
185
|
+
<div class="fd-list__content">
|
|
186
|
+
<div class="fd-list__title">Notification Type</div>
|
|
187
|
+
</div>
|
|
188
|
+
<label class="fd-switch">
|
|
189
|
+
<span class="fd-switch__control">
|
|
190
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
191
|
+
<div class="fd-switch__slider">
|
|
192
|
+
<div class="fd-switch__track">
|
|
193
|
+
<i
|
|
194
|
+
role="presentation"
|
|
195
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
196
|
+
></i>
|
|
197
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
198
|
+
<i
|
|
199
|
+
role="presentation"
|
|
200
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
201
|
+
></i>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</span>
|
|
205
|
+
</label>
|
|
206
|
+
<button
|
|
207
|
+
role="button"
|
|
208
|
+
title="Click to navigate"
|
|
209
|
+
class="fd-button fd-button--transparent"
|
|
210
|
+
>
|
|
211
|
+
<i
|
|
212
|
+
class="sap-icon--navigation-right-arrow"
|
|
213
|
+
role="presentation"
|
|
214
|
+
aria-hidden="true"
|
|
215
|
+
></i>
|
|
216
|
+
</button>
|
|
217
|
+
</li>
|
|
218
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
219
|
+
<div class="fd-list__content">
|
|
220
|
+
<div class="fd-list__title">Notification Type</div>
|
|
221
|
+
</div>
|
|
222
|
+
<label class="fd-switch">
|
|
223
|
+
<span class="fd-switch__control">
|
|
224
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
225
|
+
<div class="fd-switch__slider">
|
|
226
|
+
<div class="fd-switch__track">
|
|
227
|
+
<i
|
|
228
|
+
role="presentation"
|
|
229
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
230
|
+
></i>
|
|
231
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
232
|
+
<i
|
|
233
|
+
role="presentation"
|
|
234
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
235
|
+
></i>
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
</span>
|
|
239
|
+
</label>
|
|
240
|
+
<button
|
|
241
|
+
role="button"
|
|
242
|
+
title="Click to navigate"
|
|
243
|
+
class="fd-button fd-button--transparent"
|
|
244
|
+
>
|
|
245
|
+
<i
|
|
246
|
+
class="sap-icon--navigation-right-arrow"
|
|
247
|
+
role="presentation"
|
|
248
|
+
aria-hidden="true"
|
|
249
|
+
></i>
|
|
250
|
+
</button>
|
|
251
|
+
</li>
|
|
252
|
+
<li role="listitem" class="fd-list__group-header">
|
|
253
|
+
<div class="fd-list__title">Notification Group Title</div>
|
|
254
|
+
</li>
|
|
255
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
256
|
+
<div class="fd-list__content">
|
|
257
|
+
<div class="fd-list__title">Notification Type</div>
|
|
258
|
+
</div>
|
|
259
|
+
<label class="fd-switch">
|
|
260
|
+
<span class="fd-switch__control">
|
|
261
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
262
|
+
<div class="fd-switch__slider">
|
|
263
|
+
<div class="fd-switch__track">
|
|
264
|
+
<i
|
|
265
|
+
role="presentation"
|
|
266
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
267
|
+
></i>
|
|
268
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
269
|
+
<i
|
|
270
|
+
role="presentation"
|
|
271
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
272
|
+
></i>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
</span>
|
|
276
|
+
</label>
|
|
277
|
+
<button
|
|
278
|
+
role="button"
|
|
279
|
+
title="Click to navigate"
|
|
280
|
+
class="fd-button fd-button--transparent"
|
|
281
|
+
>
|
|
282
|
+
<i
|
|
283
|
+
class="sap-icon--navigation-right-arrow"
|
|
284
|
+
role="presentation"
|
|
285
|
+
aria-hidden="true"
|
|
286
|
+
></i>
|
|
287
|
+
</button>
|
|
288
|
+
</li>
|
|
289
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
290
|
+
<div class="fd-list__content">
|
|
291
|
+
<div class="fd-list__title">Notification Type</div>
|
|
292
|
+
</div>
|
|
293
|
+
<label class="fd-switch">
|
|
294
|
+
<span class="fd-switch__control">
|
|
295
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
296
|
+
<div class="fd-switch__slider">
|
|
297
|
+
<div class="fd-switch__track">
|
|
298
|
+
<i
|
|
299
|
+
role="presentation"
|
|
300
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
301
|
+
></i>
|
|
302
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
303
|
+
<i
|
|
304
|
+
role="presentation"
|
|
305
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
306
|
+
></i>
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
</span>
|
|
310
|
+
</label>
|
|
311
|
+
<button
|
|
312
|
+
role="button"
|
|
313
|
+
title="Click to navigate"
|
|
314
|
+
class="fd-button fd-button--transparent"
|
|
315
|
+
>
|
|
316
|
+
<i
|
|
317
|
+
class="sap-icon--navigation-right-arrow"
|
|
318
|
+
role="presentation"
|
|
319
|
+
aria-hidden="true"
|
|
320
|
+
></i>
|
|
321
|
+
</button>
|
|
322
|
+
</li>
|
|
323
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
324
|
+
<div class="fd-list__content">
|
|
325
|
+
<div class="fd-list__title">Notification Type</div>
|
|
326
|
+
</div>
|
|
327
|
+
<label class="fd-switch">
|
|
328
|
+
<span class="fd-switch__control">
|
|
329
|
+
<input checked class="fd-switch__input" type="checkbox" name="" value="" />
|
|
330
|
+
<div class="fd-switch__slider">
|
|
331
|
+
<div class="fd-switch__track">
|
|
332
|
+
<i
|
|
333
|
+
role="presentation"
|
|
334
|
+
class="fd-switch__icon fd-switch__icon--on sap-icon--accept"
|
|
335
|
+
></i>
|
|
336
|
+
<span class="fd-switch__handle" role="presentation"></span>
|
|
337
|
+
<i
|
|
338
|
+
role="presentation"
|
|
339
|
+
class="fd-switch__icon fd-switch__icon--off sap-icon--less"
|
|
340
|
+
></i>
|
|
341
|
+
</div>
|
|
342
|
+
</div>
|
|
343
|
+
</span>
|
|
344
|
+
</label>
|
|
345
|
+
<button
|
|
346
|
+
role="button"
|
|
347
|
+
title="Click to navigate"
|
|
348
|
+
class="fd-button fd-button--transparent"
|
|
349
|
+
>
|
|
350
|
+
<i
|
|
351
|
+
class="sap-icon--navigation-right-arrow"
|
|
352
|
+
role="presentation"
|
|
353
|
+
aria-hidden="true"
|
|
354
|
+
></i>
|
|
355
|
+
</button>
|
|
356
|
+
</li>
|
|
357
|
+
</ul>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
363
|
+
<div class="fd-bar__right">
|
|
364
|
+
<div class="fd-bar__element">
|
|
365
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
</footer>
|
|
369
|
+
</div>
|
|
370
|
+
</section>
|