@fundamental-styles/theming-preview 0.30.0-rc.8 → 0.30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/button.html +149 -139
- package/calendar.html +450 -289
- package/form.html +26 -26
- package/fundamental-styles.css +4 -140
- package/header-footer.html +15 -15
- package/icon.html +5 -5
- package/input.html +141 -61
- package/object-header.html +3 -3
- package/package.json +2 -2
- package/panel.html +16 -13
- package/semantic-colors.html +24 -12
- package/shell-tile-card.html +281 -199
- package/table.html +16 -16
- package/text.html +30 -18
- package/toolbar.html +31 -31
package/shell-tile-card.html
CHANGED
|
@@ -1,101 +1,147 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
3
|
+
<head>
|
|
4
4
|
<link href="fundamental-styles.css" rel="stylesheet">
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
5
|
+
<style type="text/css">
|
|
6
|
+
.fd-theming .fd-theming__flex {
|
|
7
|
+
display: flex;
|
|
8
|
+
}
|
|
9
|
+
.fd-theming .fd-theming__flex-column {
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
}
|
|
12
|
+
.fd-theming .fd-theming__margin-right-1 {
|
|
13
|
+
margin-right: 1rem;
|
|
14
|
+
}
|
|
15
15
|
.fd-theming .fd-theming__margin-bottom-03{
|
|
16
16
|
margin-bottom: .3rem;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
</head>
|
|
21
|
-
<body>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
</
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
19
|
+
<script src="theme-manager.js"></script>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<div class="fd-theming">
|
|
23
|
+
<div class="fd-panel fd-panel--fixed">
|
|
24
|
+
<div class="fd-panel__header">
|
|
25
|
+
<h4 class="fd-panel__title">Shell</h4>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="fd-theming__flex">
|
|
28
|
+
<div style="width:100%">
|
|
29
|
+
<div class="fd-shellbar">
|
|
30
|
+
<div class="fd-shellbar__group fd-shellbar__group--product">
|
|
31
|
+
<span class="fd-shellbar__logo">
|
|
32
|
+
<img
|
|
33
|
+
src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
|
|
34
|
+
srcset="
|
|
35
|
+
//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,
|
|
36
|
+
//unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,
|
|
37
|
+
//unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x
|
|
38
|
+
"
|
|
39
|
+
width="48"
|
|
40
|
+
height="24"
|
|
41
|
+
alt="SAP"
|
|
42
|
+
/>
|
|
43
|
+
</span>
|
|
44
|
+
<div class="fd-popover">
|
|
45
|
+
<div class="fd-popover__control">
|
|
46
|
+
<button
|
|
47
|
+
class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu"
|
|
48
|
+
onclick="onPopoverClick('9GLB26941');"
|
|
49
|
+
aria-controls="9GLB26941"
|
|
50
|
+
aria-haspopup="true"
|
|
51
|
+
aria-expanded="false"
|
|
52
|
+
>
|
|
53
|
+
<span class="fd-shellbar__title">Corporate Portal</span>
|
|
54
|
+
<i class="sap-icon--megamenu fd-shellbar__button--icon"></i>
|
|
55
|
+
</button>
|
|
56
|
+
</div>
|
|
57
|
+
<div
|
|
58
|
+
class="fd-popover__body fd-popover__body--no-arrow"
|
|
59
|
+
aria-hidden="true"
|
|
60
|
+
id="9GLB26941"
|
|
61
|
+
>
|
|
62
|
+
<nav class="fd-menu">
|
|
63
|
+
<ul class="fd-menu__list fd-menu__list--no-shadow">
|
|
64
|
+
<li class="fd-menu__item">
|
|
65
|
+
<a role="button" class="fd-menu__link">
|
|
66
|
+
<span class="fd-menu__title">Application A</span>
|
|
67
|
+
</a>
|
|
68
|
+
</li>
|
|
69
|
+
<li class="fd-menu__item">
|
|
70
|
+
<a role="button" class="fd-menu__link">
|
|
71
|
+
<span class="fd-menu__title">Application B</span>
|
|
72
|
+
</a>
|
|
73
|
+
</li>
|
|
74
|
+
<li class="fd-menu__item">
|
|
75
|
+
<a role="button" class="fd-menu__link">
|
|
76
|
+
<span class="fd-menu__title">Application C</span>
|
|
77
|
+
</a>
|
|
78
|
+
</li>
|
|
79
|
+
<li class="fd-menu__item">
|
|
80
|
+
<a role="button" class="fd-menu__link">
|
|
81
|
+
<span class="fd-menu__title">Application D</span>
|
|
82
|
+
</a>
|
|
83
|
+
</li>
|
|
84
|
+
</ul>
|
|
85
|
+
</nav>
|
|
86
|
+
</div>
|
|
66
87
|
</div>
|
|
88
|
+
<div class="fd-shellbar__subtitle">Subtitle</div>
|
|
67
89
|
</div>
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
90
|
+
<div class="fd-shellbar__group fd-shellbar__group--actions">
|
|
91
|
+
<div class="fd-shellbar__action fd-shellbar__action--grow">
|
|
92
|
+
<div id="JKHhjk7234k2" class="fd-input-group fd-shellbar__search-field">
|
|
93
|
+
<input
|
|
94
|
+
aria-label="search-input"
|
|
95
|
+
type="text"
|
|
96
|
+
onfocus="addClass('JKHhjk7234k2', 'is-focus')"
|
|
97
|
+
onblur="removeClass('JKHhjk7234k2', 'is-focus')"
|
|
98
|
+
class="fd-input fd-input-group__input fd-shellbar__search-field-input"
|
|
99
|
+
id="F4GcX348b1"
|
|
100
|
+
placeholder="Search everything"
|
|
101
|
+
/>
|
|
102
|
+
<div
|
|
103
|
+
class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-cancel fd-input-group__addon--button"
|
|
104
|
+
>
|
|
105
|
+
<button
|
|
106
|
+
aria-label="button-search"
|
|
107
|
+
class="fd-shellbar__button fd-button fd-button--transparent"
|
|
108
|
+
>
|
|
109
|
+
<i class="sap-icon--decline"></i>
|
|
110
|
+
</button>
|
|
111
|
+
</div>
|
|
112
|
+
<div
|
|
113
|
+
class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-submit fd-input-group__addon--button"
|
|
114
|
+
>
|
|
115
|
+
<button
|
|
116
|
+
aria-label="button-search"
|
|
117
|
+
class="fd-shellbar__button fd-button fd-button--transparent"
|
|
118
|
+
>
|
|
119
|
+
<i class="sap-icon--search"></i>
|
|
120
|
+
</button>
|
|
81
121
|
</div>
|
|
122
|
+
<div class="fd-shellbar__search-field-helper"></div>
|
|
82
123
|
</div>
|
|
83
124
|
</div>
|
|
84
125
|
</div>
|
|
85
|
-
<div class="fd-
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
126
|
+
<div class="fd-shellbar__group fd-shellbar__group--actions">
|
|
127
|
+
<div class="fd-shellbar__action">
|
|
128
|
+
<div class="fd-popover fd-popover--right">
|
|
129
|
+
<div class="fd-popover__control">
|
|
130
|
+
<div
|
|
131
|
+
class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
|
|
132
|
+
aria-controls="ZY3AY276"
|
|
133
|
+
onclick="onPopoverClick('ZY3AY276')"
|
|
134
|
+
aria-expanded="false"
|
|
135
|
+
aria-haspopup="true"
|
|
136
|
+
role="button"
|
|
137
|
+
>
|
|
138
|
+
<span
|
|
139
|
+
class="fd-avatar fd-avatar--xs fd-avatar--circle fd-shellbar__avatar--circle"
|
|
140
|
+
style="background-image: url('assets/images/avatars/1.svg')"
|
|
141
|
+
aria-label="William Wallingham"
|
|
142
|
+
>WW
|
|
143
|
+
</span>
|
|
144
|
+
</div>
|
|
99
145
|
</div>
|
|
100
146
|
</div>
|
|
101
147
|
</div>
|
|
@@ -104,144 +150,180 @@
|
|
|
104
150
|
</div>
|
|
105
151
|
</div>
|
|
106
152
|
</div>
|
|
107
|
-
</div>
|
|
108
153
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
154
|
+
<div class="fd-panel fd-panel--fixed">
|
|
155
|
+
<div class="fd-panel__header">
|
|
156
|
+
<h4 class="fd-panel__title">Tiles</h4>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="fd-panel__content fd-theming__flex">
|
|
159
|
+
<div role="button" tabindex="0" class="fd-tile fd-tile--launch">
|
|
160
|
+
<div class="fd-tile__header">
|
|
161
|
+
<div class="fd-tile__title">My Tasks</div>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="fd-tile__content">
|
|
164
|
+
<div class="fd-numeric-content">
|
|
165
|
+
<div class="fd-numeric-content fd-numeric-content--small-tile">
|
|
166
|
+
<div class="fd-numeric-content__launch-icon-container">
|
|
167
|
+
<i
|
|
168
|
+
role="presentation"
|
|
169
|
+
class="fd-numeric-content__launch-icon sap-icon--task"
|
|
170
|
+
></i>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="fd-numeric-content__kpi-container">
|
|
173
|
+
<div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">12</div>
|
|
174
|
+
</div>
|
|
126
175
|
</div>
|
|
127
176
|
</div>
|
|
128
177
|
</div>
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
178
|
+
<div class="fd-tile__footer fd-tile__footer--1-col">
|
|
179
|
+
<div class="fd-tile__section">
|
|
180
|
+
<span class="fd-tile__footer-text">Tasks</span>
|
|
181
|
+
</div>
|
|
133
182
|
</div>
|
|
134
183
|
</div>
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
184
|
+
     
|
|
185
|
+
<div role="button" tabindex="0" class="fd-tile fd-tile--launch">
|
|
186
|
+
<div class="fd-tile__header">
|
|
187
|
+
<div class="fd-tile__title">My Leave Requests</div>
|
|
188
|
+
</div>
|
|
189
|
+
<div class="fd-tile__content">
|
|
190
|
+
<div class="fd-numeric-content">
|
|
191
|
+
<div class="fd-numeric-content fd-numeric-content--small-tile">
|
|
192
|
+
<div class="fd-numeric-content__launch-icon-container">
|
|
193
|
+
<i
|
|
194
|
+
role="presentation"
|
|
195
|
+
class="fd-numeric-content__launch-icon sap-icon--general-leave-request"
|
|
196
|
+
></i>
|
|
197
|
+
</div>
|
|
198
|
+
<div class="fd-numeric-content__kpi-container">
|
|
199
|
+
<div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">3</div>
|
|
200
|
+
</div>
|
|
149
201
|
</div>
|
|
150
202
|
</div>
|
|
151
203
|
</div>
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
204
|
+
<div class="fd-tile__footer fd-tile__footer--1-col">
|
|
205
|
+
<div class="fd-tile__section">
|
|
206
|
+
<span class="fd-tile__footer-text">Requests</span>
|
|
207
|
+
</div>
|
|
156
208
|
</div>
|
|
157
209
|
</div>
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
210
|
+
     
|
|
211
|
+
<div role="button" tabindex="0" class="fd-tile fd-tile--launch">
|
|
212
|
+
<div class="fd-tile__header">
|
|
213
|
+
<div class="fd-tile__title">Lunch Menu</div>
|
|
214
|
+
<div class="fd-tile__subtitle">Weekly Menu</div>
|
|
215
|
+
</div>
|
|
216
|
+
<div class="fd-tile__content">
|
|
217
|
+
<div class="fd-numeric-content">
|
|
218
|
+
<div class="fd-numeric-content fd-numeric-content--small-tile">
|
|
219
|
+
<div class="fd-numeric-content__launch-icon-container">
|
|
220
|
+
<i
|
|
221
|
+
role="presentation"
|
|
222
|
+
class="fd-numeric-content__launch-icon sap-icon--menu"
|
|
223
|
+
></i>
|
|
224
|
+
</div>
|
|
170
225
|
</div>
|
|
171
226
|
</div>
|
|
172
227
|
</div>
|
|
173
228
|
</div>
|
|
174
229
|
</div>
|
|
175
230
|
</div>
|
|
176
|
-
</div>
|
|
177
231
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
<
|
|
232
|
+
<div class="fd-panel fd-panel--fixed">
|
|
233
|
+
<div class="fd-panel__header">
|
|
234
|
+
<h4 class="fd-panel__title">Card</h4>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="fd-panel__content fd-theming__flex">
|
|
237
|
+
<div style="width: 300px; height: 400px; margin: 1rem">
|
|
238
|
+
<div class="fd-card" role="region" aria-label="Card Anatomy Example 1">
|
|
239
|
+
<a class="fd-card__header" tabindex="0">
|
|
240
|
+
<span
|
|
241
|
+
class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
|
|
242
|
+
style="background-image: url('/assets/images/backgrounds/city.jpg')"
|
|
243
|
+
role="img"
|
|
244
|
+
aria-label="John Doe"
|
|
245
|
+
>JD</span
|
|
246
|
+
>
|
|
247
|
+
<div class="fd-card__header-text">
|
|
248
|
+
<div class="fd-card__title-area">
|
|
249
|
+
<div class="fd-card__title">Card Title</div>
|
|
250
|
+
<span class="fd-object-status fd-card__counter">Counter</span>
|
|
251
|
+
</div>
|
|
252
|
+
<div class="fd-card__subtitle-area">
|
|
253
|
+
<div class="fd-card__subtitle">Card Subtitle</div>
|
|
254
|
+
</div>
|
|
195
255
|
</div>
|
|
196
|
-
|
|
197
|
-
|
|
256
|
+
</a>
|
|
257
|
+
<div class="fd-card__content" role="group" aria-label="Card Content">
|
|
258
|
+
<div class="fd-card__content-container">
|
|
259
|
+
<div class="fd-card__content-section">
|
|
260
|
+
<div class="fd-card__content-title-container"></div>
|
|
261
|
+
<div class="fd-card__content-group-text">
|
|
262
|
+
<span>
|
|
263
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
|
|
264
|
+
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
|
|
265
|
+
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
|
|
266
|
+
</span>
|
|
267
|
+
</div>
|
|
268
|
+
</div>
|
|
198
269
|
</div>
|
|
270
|
+
|
|
271
|
+
</div>
|
|
272
|
+
<div class="fd-card__footer">
|
|
273
|
+
<a class="fd-link fd-card__footer-link" href="#">
|
|
274
|
+
<span class="fd-link__content">
|
|
275
|
+
Footer with a long link Lorem ipsum dolor sit amet,
|
|
276
|
+
consectetur adipisicing elit. Accusantium
|
|
277
|
+
</span>
|
|
278
|
+
</a>
|
|
279
|
+
<button class="fd-button fd-button--transparent">
|
|
280
|
+
<i class="sap-icon sap-icon--overflow"></i>
|
|
281
|
+
</button>
|
|
199
282
|
</div>
|
|
200
|
-
</
|
|
201
|
-
<div class="fd-card__content" role="group" aria-label="Card Content"></div>
|
|
283
|
+
</div>
|
|
202
284
|
</div>
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
285
|
+
<div style="width: 300px; height: 100%; margin: 1rem">
|
|
286
|
+
<div class="fd-card" role="region" aria-label="List Card Example 1">
|
|
287
|
+
<div class="fd-card__header fd-card__header--non-interactive">
|
|
288
|
+
<div class="fd-card__header-text">
|
|
289
|
+
<div class="fd-card__title-area">
|
|
290
|
+
<div class="fd-card__title">Quick Links</div>
|
|
291
|
+
<span class="fd-object-status fd-card__counter">6 of 20</span>
|
|
292
|
+
</div>
|
|
211
293
|
</div>
|
|
212
294
|
</div>
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
</
|
|
240
|
-
</
|
|
295
|
+
<div class="fd-card__content" role="group" aria-label="Card Content">
|
|
296
|
+
<ul class="fd-list fd-list--no-border" role="list">
|
|
297
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
298
|
+
<i role="presentation" class="fd-list__icon sap-icon--cart"></i>
|
|
299
|
+
<span class="fd-list__title">List item 1</span>
|
|
300
|
+
</li>
|
|
301
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
302
|
+
<i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
|
|
303
|
+
<span class="fd-list__title">List item 2</span>
|
|
304
|
+
</li>
|
|
305
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
306
|
+
<i role="presentation" class="fd-list__icon sap-icon--leads"></i>
|
|
307
|
+
<span class="fd-list__title">List item 3</span>
|
|
308
|
+
</li>
|
|
309
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
310
|
+
<i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
|
|
311
|
+
<span class="fd-list__title">List item 4</span>
|
|
312
|
+
</li>
|
|
313
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
314
|
+
<i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
|
|
315
|
+
<span class="fd-list__title">List item 3</span>
|
|
316
|
+
</li>
|
|
317
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
318
|
+
<i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
|
|
319
|
+
<span class="fd-list__title">List item 4</span>
|
|
320
|
+
</li>
|
|
321
|
+
</ul>
|
|
322
|
+
</div>
|
|
241
323
|
</div>
|
|
242
324
|
</div>
|
|
243
325
|
</div>
|
|
244
326
|
</div>
|
|
245
327
|
</div>
|
|
246
|
-
</
|
|
247
|
-
</
|
|
328
|
+
</body>
|
|
329
|
+
</html>
|
package/table.html
CHANGED
|
@@ -177,40 +177,40 @@
|
|
|
177
177
|
<input checked aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="5">
|
|
178
178
|
<label class="fd-checkbox__label" for="5"></label>
|
|
179
179
|
</td>
|
|
180
|
-
<td class="fd-table__cell">Apple</td>
|
|
181
|
-
<td class="fd-table__cell">98311</td>
|
|
182
|
-
<td class="fd-table__cell">200</td>
|
|
183
|
-
<td class="fd-table__cell">$1.30</td>
|
|
180
|
+
<td class="fd-table__cell"><span class="fd-table__text">Apple</span></td>
|
|
181
|
+
<td class="fd-table__cell"><span class="fd-table__text">98311</span></td>
|
|
182
|
+
<td class="fd-table__cell"><span class="fd-table__text">200</span></td>
|
|
183
|
+
<td class="fd-table__cell"><span class="fd-table__text">$1.30</span></td>
|
|
184
184
|
</tr>
|
|
185
185
|
<tr class="fd-table__row fd-table__row--hoverable fd-table__row--activable">
|
|
186
186
|
<td class="fd-table__cell fd-table__cell--checkbox">
|
|
187
187
|
<input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="6">
|
|
188
188
|
<label class="fd-checkbox__label" for="6"></label>
|
|
189
189
|
</td>
|
|
190
|
-
<td class="fd-table__cell">Banana</td>
|
|
191
|
-
<td class="fd-table__cell">3612</td>
|
|
192
|
-
<td class="fd-table__cell">500</td>
|
|
193
|
-
<td class="fd-table__cell">$0.50</td>
|
|
190
|
+
<td class="fd-table__cell"><span class="fd-table__text">Banana</span></td>
|
|
191
|
+
<td class="fd-table__cell"><span class="fd-table__text">3612</span></td>
|
|
192
|
+
<td class="fd-table__cell"><span class="fd-table__text">500</span></td>
|
|
193
|
+
<td class="fd-table__cell"><span class="fd-table__text">$0.50</span></td>
|
|
194
194
|
</tr>
|
|
195
195
|
<tr class="fd-table__row fd-table__row--hoverable fd-table__row--activable">
|
|
196
196
|
<td class="fd-table__cell fd-table__cell--checkbox">
|
|
197
197
|
<input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="7">
|
|
198
198
|
<label class="fd-checkbox__label" for="7"></label>
|
|
199
199
|
</td>
|
|
200
|
-
<td class="fd-table__cell">Pineapple</td>
|
|
201
|
-
<td class="fd-table__cell">63125</td>
|
|
202
|
-
<td class="fd-table__cell">80</td>
|
|
203
|
-
<td class="fd-table__cell">$5.10</td>
|
|
200
|
+
<td class="fd-table__cell"><span class="fd-table__text">Pineapple</span></td>
|
|
201
|
+
<td class="fd-table__cell"><span class="fd-table__text">63125</span></td>
|
|
202
|
+
<td class="fd-table__cell"><span class="fd-table__text">80</span></td>
|
|
203
|
+
<td class="fd-table__cell"><span class="fd-table__text">$5.10</span></td>
|
|
204
204
|
</tr>
|
|
205
205
|
<tr class="fd-table__row fd-table__row--hoverable fd-table__row--activable">
|
|
206
206
|
<td class="fd-table__cell fd-table__cell--checkbox">
|
|
207
207
|
<input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="8">
|
|
208
208
|
<label class="fd-checkbox__label" for="8"></label>
|
|
209
209
|
</td>
|
|
210
|
-
<td class="fd-table__cell">Orange</td>
|
|
211
|
-
<td class="fd-table__cell">37012</td>
|
|
212
|
-
<td class="fd-table__cell">200</td>
|
|
213
|
-
<td class="fd-table__cell">$2.50</td>
|
|
210
|
+
<td class="fd-table__cell"><span class="fd-table__text">Orange</span></td>
|
|
211
|
+
<td class="fd-table__cell"><span class="fd-table__text">37012</span></td>
|
|
212
|
+
<td class="fd-table__cell"><span class="fd-table__text">200</span></td>
|
|
213
|
+
<td class="fd-table__cell"><span class="fd-table__text">$2.50</span></td>
|
|
214
214
|
</tr>
|
|
215
215
|
</tbody>
|
|
216
216
|
</table>
|