@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/object-header.html
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<script src="theme-manager.js"></script>
|
|
20
20
|
</head>
|
|
21
21
|
<body>
|
|
22
|
-
<div class="fd-theming">
|
|
22
|
+
<div class="fd-theming is-cozy">
|
|
23
23
|
<div class="fd-panel fd-panel--fixed">
|
|
24
24
|
<div class="fd-panel__header">
|
|
25
25
|
<h4 class="fd-panel__title">Object Header</h4>
|
|
@@ -79,10 +79,10 @@
|
|
|
79
79
|
<footer class="fd-bar fd-bar--floating-footer" style="position:relative">
|
|
80
80
|
<div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
|
|
81
81
|
<div class="fd-bar__element">
|
|
82
|
-
<button aria-label="button" class="fd-button fd-button--emphasized fd-button--
|
|
82
|
+
<button aria-label="button" class="fd-button fd-button--emphasized fd-button--cozy">Save</button>
|
|
83
83
|
</div>
|
|
84
84
|
<div class="fd-bar__element">
|
|
85
|
-
<button aria-label="button" class="fd-button fd-button--transparent fd-button--
|
|
85
|
+
<button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">Cancel</button>
|
|
86
86
|
</div>
|
|
87
87
|
</div>
|
|
88
88
|
</footer>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fundamental-styles/theming-preview",
|
|
3
|
-
"version": "0.30.0
|
|
3
|
+
"version": "0.30.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"homepage": "https://sap.github.io/fundamental-styles/",
|
|
6
6
|
"description": "Fundamental Library Styles - Theming Package Preview",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"url": "https://github.com/SAP/fundamental-styles"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"fundamental-styles": "0.30.0
|
|
12
|
+
"fundamental-styles": "0.30.0"
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
|
package/panel.html
CHANGED
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
<div class="fd-panel__header">
|
|
30
30
|
<h4 class="fd-panel__title">Panel Header</h4>
|
|
31
31
|
</div>
|
|
32
|
-
<div role="region" aria-labelledby="
|
|
32
|
+
<div role="region" aria-labelledby="__pane-1" class="fd-panel__content">
|
|
33
33
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
|
|
34
34
|
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
|
|
35
35
|
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
|
|
@@ -49,9 +49,9 @@
|
|
|
49
49
|
<i class="sap-icon--slim-arrow-right"></i>
|
|
50
50
|
</button>
|
|
51
51
|
</div>
|
|
52
|
-
<h4 class="fd-panel__title" id="
|
|
52
|
+
<h4 class="fd-panel__title" id="__pane-2">Panel Header Collapsed</h4>
|
|
53
53
|
</div>
|
|
54
|
-
<div role="region" aria-labelledby="
|
|
54
|
+
<div role="region" aria-labelledby="__pane-2" class="fd-panel__content" aria-hidden="true" id="fghqwe321">
|
|
55
55
|
<span>
|
|
56
56
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
|
|
57
57
|
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
|
|
@@ -71,9 +71,9 @@
|
|
|
71
71
|
<i class="sap-icon--slim-arrow-down"></i>
|
|
72
72
|
</button>
|
|
73
73
|
</div>
|
|
74
|
-
<h4 class="fd-panel__title" id="
|
|
74
|
+
<h4 class="fd-panel__title" id="__pane-3">Panel Header Expanded</h4>
|
|
75
75
|
</div>
|
|
76
|
-
<div role="region" aria-labelledby="
|
|
76
|
+
<div role="region" aria-labelledby="__pane-3" class="fd-panel__content" aria-hidden="false" id="fghqwe3214213">
|
|
77
77
|
<span>
|
|
78
78
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
|
|
79
79
|
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
|
|
@@ -90,16 +90,19 @@
|
|
|
90
90
|
<div class="fd-panel fd-panel--fixed" style="width: 60%;">
|
|
91
91
|
<div class="fd-panel__header">
|
|
92
92
|
<h4 class="fd-panel__title">Panel with Header Toolbar</h4>
|
|
93
|
-
<div class="fd-toolbar fd-toolbar--
|
|
94
|
-
<
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
93
|
+
<div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
|
|
94
|
+
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
|
|
95
|
+
<div class="fd-segmented-button" role="group" aria-label="Group label">
|
|
96
|
+
<button class="fd-button fd-button--transparent" aria-label="Settings">
|
|
97
|
+
<i class="sap-icon--settings"></i>
|
|
98
|
+
</button>
|
|
99
|
+
<button class="fd-button fd-button--transparent" aria-label="Dropdown">
|
|
100
|
+
<i class="sap-icon--drop-down-list"></i>
|
|
101
|
+
</button>
|
|
102
|
+
</div>
|
|
100
103
|
</div>
|
|
101
104
|
</div>
|
|
102
|
-
<div role="region" aria-labelledby="
|
|
105
|
+
<div role="region" aria-labelledby="__pane-4" class="fd-panel__content">
|
|
103
106
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
|
|
104
107
|
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
|
|
105
108
|
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
|
package/semantic-colors.html
CHANGED
|
@@ -225,42 +225,54 @@
|
|
|
225
225
|
</div>
|
|
226
226
|
<div class="fd-panel__content fd-theming__flex fd-theming__flex-column">
|
|
227
227
|
|
|
228
|
-
<div class="fd-message-strip fd-message-strip--information fd-message-strip--
|
|
229
|
-
role="note" aria-live="assertive" id="SsoiW592" aria-labelledby="
|
|
228
|
+
<div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible fd-theming__margin-bottom-03"
|
|
229
|
+
role="note" aria-live="assertive" id="SsoiW592" aria-labelledby="message-strip-1">
|
|
230
|
+
<div class="fd-message-strip__icon-container" aria-hidden="true" >
|
|
231
|
+
<span class="sap-icon sap-icon--message-information" focusable="false" role="presentation" aria-hidden="true"></span>
|
|
232
|
+
</div>
|
|
230
233
|
<p class="fd-message-strip__text">
|
|
231
234
|
Message of type "Information" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
|
|
232
235
|
</p>
|
|
233
|
-
<button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="
|
|
236
|
+
<button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="message-strip-1" aria-label="Close" title="Close">
|
|
234
237
|
<i class="sap-icon--decline"></i>
|
|
235
238
|
</button>
|
|
236
239
|
</div>
|
|
237
240
|
|
|
238
|
-
<div class="fd-message-strip fd-message-strip--success fd-message-strip--
|
|
239
|
-
role="note" aria-live="assertive" id="SsoiW593" aria-labelledby="
|
|
241
|
+
<div class="fd-message-strip fd-message-strip--success fd-message-strip--dismissible fd-theming__margin-bottom-03"
|
|
242
|
+
role="note" aria-live="assertive" id="SsoiW593" aria-labelledby="message-strip-2">
|
|
243
|
+
<div class="fd-message-strip__icon-container" aria-hidden="true">
|
|
244
|
+
<span class="sap-icon sap-icon--message-success" focusable="false" role="presentation" aria-hidden="true"></span>
|
|
245
|
+
</div>
|
|
240
246
|
<p class="fd-message-strip__text">
|
|
241
247
|
Message of type "Success" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
|
|
242
248
|
</p>
|
|
243
|
-
<button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="
|
|
249
|
+
<button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="message-strip-2" aria-label="Close" title="Close">
|
|
244
250
|
<i class="sap-icon--decline"></i>
|
|
245
251
|
</button>
|
|
246
252
|
</div>
|
|
247
253
|
|
|
248
|
-
<div class="fd-message-strip fd-message-strip--warning fd-message-strip--
|
|
249
|
-
role="note" aria-live="assertive" id="SsoiW594" aria-labelledby="
|
|
254
|
+
<div class="fd-message-strip fd-message-strip--warning fd-message-strip--dismissible fd-theming__margin-bottom-03"
|
|
255
|
+
role="note" aria-live="assertive" id="SsoiW594" aria-labelledby="message-strip-3">
|
|
256
|
+
<div class="fd-message-strip__icon-container" aria-hidden="true">
|
|
257
|
+
<span class="sap-icon sap-icon--message-warning" focusable="false" role="presentation" aria-hidden="true"></span>
|
|
258
|
+
</div>
|
|
250
259
|
<p class="fd-message-strip__text">
|
|
251
260
|
Message of type "Warning" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
|
|
252
261
|
</p>
|
|
253
|
-
<button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="
|
|
262
|
+
<button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="message-strip-3" aria-label="Close" title="Close">
|
|
254
263
|
<i class="sap-icon--decline"></i>
|
|
255
264
|
</button>
|
|
256
265
|
</div>
|
|
257
266
|
|
|
258
|
-
<div class="fd-message-strip fd-message-strip--error fd-message-strip--
|
|
259
|
-
role="note" aria-live="assertive" id="SsoiW595" aria-labelledby="
|
|
267
|
+
<div class="fd-message-strip fd-message-strip--error fd-message-strip--dismissible fd-theming__margin-bottom-03"
|
|
268
|
+
role="note" aria-live="assertive" id="SsoiW595" aria-labelledby="message-strip-4">
|
|
269
|
+
<div class="fd-message-strip__icon-container" aria-hidden="true">
|
|
270
|
+
<span class="sap-icon sap-icon--message-error" focusable="false" role="presentation" aria-hidden="true"></span>
|
|
271
|
+
</div>
|
|
260
272
|
<p class="fd-message-strip__text">
|
|
261
273
|
Message of type "Error" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
|
|
262
274
|
</p>
|
|
263
|
-
<button class="fd-button fd-button--transparent
|
|
275
|
+
<button class="fd-button fd-button--transparent is--compact fd-message-strip__close" aria-controls="message-strip-4" aria-label="Close" title="Close">
|
|
264
276
|
<i class="sap-icon--decline"></i>
|
|
265
277
|
</button>
|
|
266
278
|
</div>
|