@openui5/themelib_sap_horizon 1.136.2 → 1.138.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/REUSE.toml +0 -28
- package/THIRDPARTY.txt +0 -24
- package/package.json +18 -18
- package/src/sap/f/themes/sap_horizon/Card.less +0 -6
- package/src/sap/f/themes/sap_horizon/DynamicPage.less +52 -43
- package/src/sap/f/themes/sap_horizon/DynamicPageHeader.less +4 -4
- package/src/sap/f/themes/sap_horizon/ShellBar.less +174 -118
- package/src/sap/f/themes/sap_horizon_dark/Card.less +0 -6
- package/src/sap/f/themes/sap_horizon_dark/DynamicPage.less +48 -40
- package/src/sap/f/themes/sap_horizon_dark/DynamicPageHeader.less +3 -3
- package/src/sap/f/themes/sap_horizon_dark/ShellBar.less +192 -130
- package/src/sap/f/themes/sap_horizon_hcb/DynamicPage.less +48 -39
- package/src/sap/f/themes/sap_horizon_hcb/DynamicPageHeader.less +9 -8
- package/src/sap/f/themes/sap_horizon_hcb/ShellBar.less +111 -81
- package/src/sap/f/themes/sap_horizon_hcw/DynamicPage.less +47 -40
- package/src/sap/f/themes/sap_horizon_hcw/DynamicPageHeader.less +8 -7
- package/src/sap/f/themes/sap_horizon_hcw/ShellBar.less +115 -84
- package/src/sap/m/themes/sap_horizon/Button.less +5 -11
- package/src/sap/m/themes/sap_horizon/IconTabBar.less +0 -2
- package/src/sap/m/themes/sap_horizon/Page.less +10 -7
- package/src/sap/m/themes/sap_horizon_dark/Button.less +4 -4
- package/src/sap/m/themes/sap_horizon_dark/IconTabBar.less +0 -2
- package/src/sap/m/themes/sap_horizon_dark/Page.less +9 -5
- package/src/sap/m/themes/sap_horizon_hcb/Button.less +1 -1
- package/src/sap/m/themes/sap_horizon_hcb/Menu.less +19 -10
- package/src/sap/m/themes/sap_horizon_hcb/Page.less +9 -7
- package/src/sap/m/themes/sap_horizon_hcw/Button.less +1 -1
- package/src/sap/m/themes/sap_horizon_hcw/Menu.less +14 -5
- package/src/sap/m/themes/sap_horizon_hcw/Page.less +9 -7
- package/src/sap/tnt/themes/sap_horizon/NavigationList.less +0 -1
- package/src/sap/tnt/themes/sap_horizon/ToolHeader.less +3 -3
- package/src/sap/tnt/themes/sap_horizon_dark/NavigationList.less +0 -1
- package/src/sap/tnt/themes/sap_horizon_dark/ToolHeader.less +3 -3
- package/src/sap/tnt/themes/sap_horizon_hcb/NavigationList.less +0 -1
- package/src/sap/tnt/themes/sap_horizon_hcb/ToolHeader.less +3 -3
- package/src/sap/tnt/themes/sap_horizon_hcw/NavigationList.less +0 -1
- package/src/sap/tnt/themes/sap_horizon_hcw/ToolHeader.less +3 -3
- package/src/sap/ui/core/themes/sap_horizon/.theme +1 -1
- package/src/sap/ui/core/themes/sap_horizon/fonts/SAP-icons.ttf +0 -0
- package/src/sap/ui/core/themes/sap_horizon/fonts/SAP-icons.woff2 +0 -0
- package/src/sap/ui/core/themes/sap_horizon/global.less +4 -0
- package/src/sap/ui/core/themes/sap_horizon_dark/.theme +1 -1
- package/src/sap/ui/core/themes/sap_horizon_dark/fonts/SAP-icons.ttf +0 -0
- package/src/sap/ui/core/themes/sap_horizon_dark/fonts/SAP-icons.woff2 +0 -0
- package/src/sap/ui/core/themes/sap_horizon_dark/global.less +4 -0
- package/src/sap/ui/core/themes/sap_horizon_hcb/.theme +1 -1
- package/src/sap/ui/core/themes/sap_horizon_hcb/fonts/SAP-icons.ttf +0 -0
- package/src/sap/ui/core/themes/sap_horizon_hcb/fonts/SAP-icons.woff2 +0 -0
- package/src/sap/ui/core/themes/sap_horizon_hcb/global.less +4 -0
- package/src/sap/ui/core/themes/sap_horizon_hcw/.theme +1 -1
- package/src/sap/ui/core/themes/sap_horizon_hcw/fonts/SAP-icons.ttf +0 -0
- package/src/sap/ui/core/themes/sap_horizon_hcw/fonts/SAP-icons.woff2 +0 -0
- package/src/sap/ui/core/themes/sap_horizon_hcw/global.less +4 -0
- package/src/sap/ui/dt/themes/sap_horizon/ContextMenu.less +5 -5
- package/src/sap/ui/dt/themes/sap_horizon_dark/ContextMenu.less +5 -5
- package/src/sap/ui/dt/themes/sap_horizon_hcb/ContextMenu.less +15 -6
- package/src/sap/ui/dt/themes/sap_horizon_hcw/ContextMenu.less +14 -5
- package/src/sap/ui/mdc/themes/sap_horizon/Chart.less +5 -5
- package/src/sap/ui/mdc/themes/sap_horizon_dark/Chart.less +5 -5
- package/src/sap/ui/mdc/themes/sap_horizon_hcb/Chart.less +5 -5
- package/src/sap/ui/mdc/themes/sap_horizon_hcw/Chart.less +5 -5
- package/src/sap/ui/rta/themes/sap_horizon_hcb/ContextMenu.less +4 -4
- package/src/sap/ui/rta/themes/sap_horizon_hcw/ContextMenu.less +4 -4
- package/src/sap/ui/unified/themes/sap_horizon/Calendar.less +1 -1
- package/src/sap/ui/unified/themes/sap_horizon/CalendarRow.less +0 -25
- package/src/sap/ui/unified/themes/sap_horizon_dark/CalendarRow.less +0 -25
- package/src/sap/ui/unified/themes/sap_horizon_hcb/CalendarRow.less +0 -24
- package/src/sap/ui/unified/themes/sap_horizon_hcw/CalendarRow.less +0 -24
- package/src/sap/uxap/themes/sap_horizon/ObjectPageSection.less +14 -6
- package/src/sap/uxap/themes/sap_horizon/ObjectPageSubSection.less +10 -5
- package/src/sap/uxap/themes/sap_horizon_dark/ObjectPageSection.less +14 -6
- package/src/sap/uxap/themes/sap_horizon_dark/ObjectPageSubSection.less +10 -5
- package/src/sap/uxap/themes/sap_horizon_hcb/ObjectPageSection.less +14 -5
- package/src/sap/uxap/themes/sap_horizon_hcb/ObjectPageSubSection.less +9 -3
- package/src/sap/uxap/themes/sap_horizon_hcw/ObjectPageSection.less +14 -5
- package/src/sap/uxap/themes/sap_horizon_hcw/ObjectPageSubSection.less +9 -3
- package/src/sap/f/themes/sap_horizon/ProductSwitchItem.less +0 -4
- package/src/sap/f/themes/sap_horizon_dark/ProductSwitchItem.less +0 -4
- package/src/sap/f/themes/sap_horizon_hcb/ProductSwitchItem.less +0 -8
- package/src/sap/f/themes/sap_horizon_hcw/ProductSwitchItem.less +0 -8
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* =============================== */
|
|
2
2
|
/* CSS for control sap.f/ShellBar */
|
|
3
|
-
/* Horizon theme
|
|
3
|
+
/* Morning Horizon theme */
|
|
4
4
|
/* =============================== */
|
|
5
5
|
|
|
6
6
|
.alwaysCozyOverrideByParent(~"sapFShellBar");
|
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
|
|
23
23
|
.sapFShellBar.sapFShellBarFCLFPHeader,
|
|
24
24
|
.sapMPageHeader .sapFShellBar {
|
|
25
|
-
box-shadow:
|
|
25
|
+
box-shadow: var(--sapShell_Shadow);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.sapFShellBar {
|
|
29
|
-
background:
|
|
29
|
+
background: var(--sapShellColor);
|
|
30
30
|
height: 3.25rem;
|
|
31
|
-
box-shadow: inset 0 -0.0625rem 0 0
|
|
31
|
+
box-shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor);
|
|
32
32
|
|
|
33
33
|
.sapFShellBarOTB.sapMIBar.sapMTB {
|
|
34
34
|
height: 3.25rem;
|
|
@@ -38,47 +38,49 @@
|
|
|
38
38
|
.sapMIBar {
|
|
39
39
|
height: 3.25rem;
|
|
40
40
|
}
|
|
41
|
+
|
|
41
42
|
.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive) {
|
|
42
|
-
border-color:
|
|
43
|
+
border-color: var(--sapShell_Hover_Background);
|
|
43
44
|
}
|
|
45
|
+
|
|
44
46
|
.sapMToggleBtnPressed:not(.sapMBtnDisabled),
|
|
45
47
|
.sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
|
|
46
|
-
background-color:
|
|
47
|
-
border-color:
|
|
48
|
+
background-color: var(--sapShell_Active_Background);
|
|
49
|
+
border-color: var(--sapShell_Active_Background);
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
.sapFShellBarProfile:not(:focus):hover {
|
|
51
53
|
box-shadow: 0 0 0.125rem 0 fade(@sapContent_ShadowColor, 72);
|
|
52
54
|
}
|
|
53
55
|
|
|
54
|
-
|
|
56
|
+
/* Mega Menu */
|
|
55
57
|
.sapFSHMegaMenu {
|
|
56
|
-
color:
|
|
58
|
+
color: var(--sapShell_TextColor);
|
|
57
59
|
overflow: visible;
|
|
58
|
-
font-size:
|
|
60
|
+
font-size: var(--sapFontHeader5Size);
|
|
59
61
|
font-weight: bold;
|
|
60
62
|
|
|
61
63
|
.sapMBtn:not(:hover) .sapMBtnInner.sapMBtnTransparent::after,
|
|
62
64
|
.sapMBtnTransparent {
|
|
63
|
-
color:
|
|
64
|
-
background:
|
|
65
|
+
color: var(--sapShell_TextColor);
|
|
66
|
+
background: var(--sapButton_Lite_Background);
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
.sapMBtn:hover > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) bdi,
|
|
68
70
|
&.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnTransparent:not(.sapMBtnActive)::after {
|
|
69
|
-
color:
|
|
71
|
+
color: var(--sapShell_TextColor);
|
|
70
72
|
}
|
|
71
73
|
|
|
72
74
|
.sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
|
|
73
|
-
background:
|
|
74
|
-
border: 1px solid
|
|
75
|
-
color:
|
|
75
|
+
background: var(--sapShell_Hover_Background);
|
|
76
|
+
border: 1px solid var(--sapButton_Lite_Hover_BorderColor);
|
|
77
|
+
color: var(--sapShell_TextColor);
|
|
76
78
|
}
|
|
77
79
|
|
|
78
80
|
.sapMBtn:hover > .sapMBtnHoverable.sapMBtnActive {
|
|
79
|
-
background:
|
|
80
|
-
border: 1px solid
|
|
81
|
-
color:
|
|
81
|
+
background: var(--sapShell_Active_Background);
|
|
82
|
+
border: 1px solid var(--sapButton_Lite_Active_BorderColor);
|
|
83
|
+
color: var(--sapShell_Active_TextColor);
|
|
82
84
|
}
|
|
83
85
|
|
|
84
86
|
.sapMBtnInner,
|
|
@@ -89,19 +91,19 @@
|
|
|
89
91
|
|
|
90
92
|
.sapMBtnInner::after {
|
|
91
93
|
content: '\e1ef';
|
|
92
|
-
font-family:
|
|
94
|
+
font-family: var(--sapContent_IconFontFamily);
|
|
93
95
|
}
|
|
94
96
|
}
|
|
95
97
|
|
|
96
|
-
|
|
98
|
+
/* Home Icon */
|
|
97
99
|
.sapFShellBarHomeIcon {
|
|
98
100
|
max-height: 2rem;
|
|
99
101
|
padding: 0.25rem;
|
|
100
102
|
overflow-clip-margin: border-box;
|
|
101
103
|
|
|
102
104
|
&:hover {
|
|
103
|
-
background:
|
|
104
|
-
box-shadow:
|
|
105
|
+
background: var(--sapShell_Hover_Background);
|
|
106
|
+
box-shadow: var(--sapContent_Interaction_Shadow);
|
|
105
107
|
border-radius: 0.5rem;
|
|
106
108
|
}
|
|
107
109
|
|
|
@@ -110,27 +112,27 @@
|
|
|
110
112
|
}
|
|
111
113
|
}
|
|
112
114
|
|
|
113
|
-
|
|
115
|
+
/* Primary Title */
|
|
114
116
|
.sapFShellBarPrimaryTitle {
|
|
115
117
|
color: var(--sapShell_SubBrand_TextColor);
|
|
116
118
|
}
|
|
117
119
|
|
|
118
|
-
|
|
120
|
+
/* Second Title */
|
|
119
121
|
.sapFShellBarSecondTitle {
|
|
120
|
-
font-size:
|
|
121
|
-
color:
|
|
122
|
+
font-size: var(--sapFontSmallSize);
|
|
123
|
+
color: var(--sapShell_TextColor);
|
|
122
124
|
text-overflow: ellipsis;
|
|
123
125
|
}
|
|
124
126
|
|
|
125
|
-
|
|
127
|
+
/* Search */
|
|
126
128
|
.sapFShellBarSearch {
|
|
127
|
-
max-width: 35rem;
|
|
129
|
+
max-width: 35rem; /* max width of searchField + button width */
|
|
128
130
|
|
|
129
131
|
.sapMSF {
|
|
130
132
|
max-width: 35rem;
|
|
131
133
|
}
|
|
132
134
|
|
|
133
|
-
|
|
135
|
+
/* Reflection: styles overwritten */
|
|
134
136
|
.sapMBtn:not(.sapFShellBarSearchCancelButton) {
|
|
135
137
|
width: 1.75rem;
|
|
136
138
|
height: 1.75rem;
|
|
@@ -143,10 +145,12 @@
|
|
|
143
145
|
right: 0;
|
|
144
146
|
top: 0;
|
|
145
147
|
bottom: 0;
|
|
148
|
+
|
|
146
149
|
.sapMBtnInner {
|
|
147
150
|
min-width: 1.75rem;
|
|
148
151
|
border-radius: 1.125rem;
|
|
149
|
-
color:
|
|
152
|
+
color: var(--sapButton_Emphasized_TextColor);
|
|
153
|
+
|
|
150
154
|
.sapMBtnIcon {
|
|
151
155
|
width: 1.75rem;
|
|
152
156
|
height: 1.75rem;
|
|
@@ -156,10 +160,10 @@
|
|
|
156
160
|
}
|
|
157
161
|
|
|
158
162
|
.sapMSFVal + .sapMBtn .sapMBtnInner {
|
|
159
|
-
background-color:
|
|
163
|
+
background-color: var(--sapButton_Emphasized_Background);
|
|
160
164
|
|
|
161
165
|
.sapMBtnIcon {
|
|
162
|
-
color:
|
|
166
|
+
color: var(--sapButton_Emphasized_TextColor);
|
|
163
167
|
}
|
|
164
168
|
}
|
|
165
169
|
}
|
|
@@ -182,12 +186,13 @@
|
|
|
182
186
|
|
|
183
187
|
.sapFShellBarSearchWrap {
|
|
184
188
|
position: relative;
|
|
189
|
+
|
|
185
190
|
.sapMSFF {
|
|
186
|
-
background:
|
|
187
|
-
background-color:
|
|
188
|
-
box-shadow:
|
|
191
|
+
background: var(--sapField_BackgroundStyle);
|
|
192
|
+
background-color: var(--sapShell_InteractiveBackground);
|
|
193
|
+
box-shadow: var(--sapField_Shadow);
|
|
189
194
|
border: none;
|
|
190
|
-
color:
|
|
195
|
+
color: var(--sapShell_InteractiveTextColor);
|
|
191
196
|
border-radius: 1.125rem;
|
|
192
197
|
height: 2.25rem;
|
|
193
198
|
|
|
@@ -205,19 +210,19 @@
|
|
|
205
210
|
}
|
|
206
211
|
|
|
207
212
|
.sapMSFB:hover {
|
|
208
|
-
background:
|
|
209
|
-
box-shadow:
|
|
213
|
+
background: var(--sapShell_Hover_Background);
|
|
214
|
+
box-shadow: var(--sapButton_Lite_Hover_BorderColor);
|
|
210
215
|
border-radius: 1.125rem;
|
|
211
216
|
height: 1.75rem;
|
|
212
|
-
color:
|
|
217
|
+
color: var(--sapShell_InteractiveTextColor);
|
|
213
218
|
}
|
|
214
219
|
|
|
215
220
|
.sapMSFB:active,
|
|
216
221
|
.sapMSFB.sapMSFBA {
|
|
217
|
-
background:
|
|
218
|
-
box-shadow:
|
|
222
|
+
background: var(--sapShell_Active_Background);
|
|
223
|
+
box-shadow: var(--sapContent_Selected_Shadow);
|
|
219
224
|
border-radius: 1.125rem;
|
|
220
|
-
color:
|
|
225
|
+
color: var(--sapShell_Active_TextColor);
|
|
221
226
|
}
|
|
222
227
|
}
|
|
223
228
|
|
|
@@ -231,29 +236,31 @@
|
|
|
231
236
|
}
|
|
232
237
|
|
|
233
238
|
.sapMSF:not(.sapMSFDisabled):hover .sapMSFF {
|
|
234
|
-
background-color:
|
|
235
|
-
box-shadow:
|
|
236
|
-
border-bottom: 1px solid
|
|
239
|
+
background-color: var(--sapShell_Hover_Background);
|
|
240
|
+
box-shadow: var(--sapField_Hover_Shadow);
|
|
241
|
+
border-bottom: 1px solid var(--sapField_Hover_BorderColor);
|
|
237
242
|
}
|
|
238
243
|
|
|
239
244
|
.sapMSFI {
|
|
240
|
-
color:
|
|
245
|
+
color: var(--sapField_PlaceholderTextColor);
|
|
241
246
|
font-weight: italic;
|
|
242
247
|
}
|
|
243
248
|
|
|
244
|
-
|
|
245
|
-
|
|
249
|
+
/* sap.m.Button
|
|
250
|
+
Reflection: styles overwritten */
|
|
246
251
|
.sapMBtn:not(.sapFShellBarSearchCancelButton) {
|
|
247
252
|
height: 2.25rem;
|
|
248
253
|
line-height: 2.25rem;
|
|
249
254
|
width: 1.75rem;
|
|
250
|
-
padding: 0.
|
|
255
|
+
padding: 0.25rem 0;
|
|
251
256
|
margin-right: 0.25rem;
|
|
257
|
+
|
|
252
258
|
.sapMBtnInner {
|
|
253
259
|
height: 1.75rem;
|
|
254
260
|
min-width: 1.75rem;
|
|
255
261
|
border-radius: 1.125rem;
|
|
256
262
|
}
|
|
263
|
+
|
|
257
264
|
.sapMBtnInner.sapMBtnText {
|
|
258
265
|
padding-left: 0.625rem;
|
|
259
266
|
padding-right: 0.625rem;
|
|
@@ -268,24 +275,27 @@
|
|
|
268
275
|
padding: 0;
|
|
269
276
|
}
|
|
270
277
|
}
|
|
278
|
+
|
|
271
279
|
.sapMSF {
|
|
272
280
|
margin-right: 0;
|
|
273
281
|
}
|
|
274
282
|
}
|
|
275
283
|
}
|
|
276
284
|
|
|
277
|
-
|
|
278
|
-
html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelButton):focus > .sapMFocusable:not(.sapMBadgeIndicator)
|
|
285
|
+
/* Overriding styles comming from other controls */
|
|
286
|
+
html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelButton):focus > .sapMFocusable:not(.sapMBadgeIndicator)::before {
|
|
279
287
|
border-radius: 1.125rem;
|
|
280
288
|
}
|
|
281
289
|
|
|
282
|
-
html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelButton):focus > .sapMFocusable:not(.sapMBadgeIndicator)
|
|
290
|
+
html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelButton):focus > .sapMFocusable:not(.sapMBadgeIndicator)::before {
|
|
283
291
|
border-radius: 0.375rem;
|
|
284
292
|
}
|
|
285
293
|
|
|
286
|
-
|
|
294
|
+
/* Resets of sizes for "Compact" mode - controls should remain in cozy mode */
|
|
287
295
|
.alwaysCozyOverrideByParent(@controlClass) {
|
|
296
|
+
|
|
288
297
|
.sapUiSizeCompact {
|
|
298
|
+
|
|
289
299
|
.@{controlClass} {
|
|
290
300
|
height: 3.25rem;
|
|
291
301
|
|
|
@@ -294,17 +304,17 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
|
|
|
294
304
|
height: 3.25rem;
|
|
295
305
|
}
|
|
296
306
|
|
|
297
|
-
|
|
298
|
-
|
|
307
|
+
/* Reflection: styles overwritten
|
|
308
|
+
sap.m.MegaMenu */
|
|
299
309
|
.sapFSHMegaMenu {
|
|
300
310
|
height: 2.75rem;
|
|
301
311
|
}
|
|
302
312
|
|
|
303
|
-
|
|
304
|
-
|
|
313
|
+
/* Reflection: styles overwritten
|
|
314
|
+
sap.m.Button */
|
|
305
315
|
.sapMBtn {
|
|
306
316
|
height: 2.75rem;
|
|
307
|
-
padding: 0.
|
|
317
|
+
padding: 0.25rem 0;
|
|
308
318
|
}
|
|
309
319
|
|
|
310
320
|
.sapMBtnInner {
|
|
@@ -329,14 +339,17 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
|
|
|
329
339
|
margin: 0;
|
|
330
340
|
padding: 0;
|
|
331
341
|
}
|
|
342
|
+
|
|
332
343
|
.sapMBtnIconLeft + .sapMBtnIconLeft {
|
|
333
344
|
left: 0;
|
|
334
345
|
}
|
|
346
|
+
|
|
335
347
|
.sapMBtnText {
|
|
336
348
|
.sapMBtnIconLeft + .sapMBtnIconLeft {
|
|
337
349
|
left: 2.875rem;
|
|
338
350
|
}
|
|
339
351
|
}
|
|
352
|
+
|
|
340
353
|
.sapMBtnInner > img {
|
|
341
354
|
width: 2.5rem;
|
|
342
355
|
margin-top: 0.2rem;
|
|
@@ -344,31 +357,35 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
|
|
|
344
357
|
}
|
|
345
358
|
|
|
346
359
|
html.sap-desktop & .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed, .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
|
|
347
|
-
background-color:
|
|
360
|
+
background-color: var(--sapShell_Active_Background);
|
|
348
361
|
}
|
|
349
362
|
|
|
350
|
-
|
|
351
|
-
|
|
363
|
+
/* sap.m.MenuButton
|
|
364
|
+
Reflection: styles overwritten */
|
|
352
365
|
.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
|
|
353
|
-
height:
|
|
366
|
+
height: 2.375rem;
|
|
354
367
|
line-height: 2.2rem;
|
|
355
368
|
padding-right: 0.75rem;
|
|
356
369
|
padding-left: 0.5625rem;
|
|
357
370
|
}
|
|
371
|
+
|
|
358
372
|
.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner:not(.sapMBtnText) {
|
|
359
373
|
padding-right: 1.625rem;
|
|
360
374
|
}
|
|
375
|
+
|
|
361
376
|
.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner {
|
|
362
377
|
padding-right: 2rem;
|
|
363
378
|
}
|
|
379
|
+
|
|
364
380
|
.sapMMenuBtn .sapMBtnIconFirst .sapMBtnIcon {
|
|
365
381
|
padding-right: 0.75rem;
|
|
366
382
|
}
|
|
367
383
|
|
|
368
|
-
|
|
369
|
-
|
|
384
|
+
/* Reflection: styles overwritten
|
|
385
|
+
sap.m.SearchField */
|
|
370
386
|
.sapFShellBarSearch {
|
|
371
387
|
max-width: 35rem;
|
|
388
|
+
|
|
372
389
|
.sapMSF {
|
|
373
390
|
max-width: 35rem;
|
|
374
391
|
}
|
|
@@ -384,9 +401,11 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
|
|
|
384
401
|
position: absolute;
|
|
385
402
|
top: 0;
|
|
386
403
|
bottom: 0;
|
|
404
|
+
|
|
387
405
|
.sapMBtnInner {
|
|
388
406
|
min-width: 1.75rem;
|
|
389
407
|
border-radius: 1.125rem;
|
|
408
|
+
|
|
390
409
|
.sapMBtnIcon {
|
|
391
410
|
width: 1.75rem;
|
|
392
411
|
height: 1.75rem;
|
|
@@ -409,19 +428,22 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
|
|
|
409
428
|
}
|
|
410
429
|
|
|
411
430
|
.sapFShellBarSearchWrap {
|
|
412
|
-
|
|
413
|
-
|
|
431
|
+
|
|
432
|
+
/* sap.m.Button
|
|
433
|
+
Reflection: styles overwritten */
|
|
414
434
|
.sapMBtn:not(.sapFShellBarSearchCancelButton) {
|
|
415
435
|
height: 2.25rem;
|
|
416
436
|
line-height: 2.25rem;
|
|
417
437
|
width: 1.75rem;
|
|
418
|
-
padding: 0.
|
|
438
|
+
padding: 0.25rem 0;
|
|
419
439
|
margin-right: 0.25rem;
|
|
440
|
+
|
|
420
441
|
.sapMBtnInner {
|
|
421
442
|
height: 1.75rem;
|
|
422
443
|
min-width: 1.75rem;
|
|
423
444
|
border-radius: 1.125rem;
|
|
424
445
|
}
|
|
446
|
+
|
|
425
447
|
.sapMBtnInner.sapMBtnText {
|
|
426
448
|
padding-left: 0.625rem;
|
|
427
449
|
padding-right: 0.625rem;
|
|
@@ -436,25 +458,31 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
|
|
|
436
458
|
padding: 0;
|
|
437
459
|
}
|
|
438
460
|
}
|
|
461
|
+
|
|
439
462
|
.sapMSF {
|
|
440
463
|
margin-right: 0;
|
|
441
464
|
}
|
|
442
465
|
}
|
|
466
|
+
|
|
443
467
|
.sapMSF {
|
|
444
468
|
min-width: 7rem;
|
|
445
469
|
height: 2.75rem;
|
|
446
470
|
padding: 0.25rem 0;
|
|
471
|
+
|
|
447
472
|
.sapMSFI {
|
|
448
473
|
height: 2.125rem
|
|
449
474
|
}
|
|
475
|
+
|
|
450
476
|
.sapMSFF {
|
|
451
477
|
height: 2.25rem;
|
|
452
478
|
line-height: 2.125rem;
|
|
453
479
|
padding-left: 0.625rem;
|
|
454
480
|
}
|
|
481
|
+
|
|
455
482
|
.sapMSFR:not(.sapMSFNS) {
|
|
456
483
|
right: 2.375rem;
|
|
457
484
|
}
|
|
485
|
+
|
|
458
486
|
.sapMSFB {
|
|
459
487
|
width: 1.75rem;
|
|
460
488
|
height: 1.75rem;
|
|
@@ -466,25 +494,31 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
|
|
|
466
494
|
right: 0;
|
|
467
495
|
top: 0;
|
|
468
496
|
}
|
|
497
|
+
|
|
469
498
|
.sapMSFB:hover {
|
|
470
499
|
height: 1.75rem;
|
|
471
500
|
}
|
|
472
501
|
}
|
|
473
|
-
|
|
474
|
-
|
|
502
|
+
|
|
503
|
+
/* sap.m.Select
|
|
504
|
+
Reflection: styles overwritten */
|
|
475
505
|
.sapMSlt {
|
|
476
506
|
height: 2.5rem;
|
|
507
|
+
|
|
477
508
|
.sapMSltArrow {
|
|
478
509
|
line-height: 2.5rem;
|
|
479
510
|
width: 2.5rem;
|
|
480
511
|
}
|
|
512
|
+
|
|
481
513
|
.sapMSltLabel {
|
|
482
514
|
line-height: 2.375rem;
|
|
483
515
|
padding: 0 3rem 0 0.625rem;
|
|
484
516
|
}
|
|
517
|
+
|
|
485
518
|
.sapMSelectListItem {
|
|
486
519
|
line-height: 2.5rem;
|
|
487
520
|
}
|
|
521
|
+
|
|
488
522
|
.sapMSelectListItemBase {
|
|
489
523
|
height: 2.5rem;
|
|
490
524
|
}
|
|
@@ -493,67 +527,78 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
|
|
|
493
527
|
}
|
|
494
528
|
}
|
|
495
529
|
|
|
496
|
-
|
|
530
|
+
/* Resets all the styles of controls to align with the dark fiori 3 theme */
|
|
497
531
|
.alwaysDarkModeOverrideByParent(@controlClass) {
|
|
498
532
|
.@{controlClass} {
|
|
499
533
|
|
|
500
|
-
|
|
534
|
+
/* sap.m.Button */
|
|
501
535
|
.sapFShellBarItem.sapMBtn,
|
|
502
536
|
.sapFShellBarItem:not(.sapFSHMegaMenu ) .sapMBtn,
|
|
503
537
|
.sapMTB-Transparent-CTX .sapFShellBarItem.sapMBtn,
|
|
504
538
|
.sapMTB-Transparent-CTX .sapFShellBarItem .sapMBtn {
|
|
539
|
+
|
|
505
540
|
.sapMBtnInner::after,
|
|
506
541
|
.sapMBtnIcon {
|
|
507
542
|
background: transparent;
|
|
508
|
-
color:
|
|
543
|
+
color: var(--sapShell_InteractiveTextColor);
|
|
509
544
|
}
|
|
510
|
-
|
|
511
|
-
{
|
|
545
|
+
|
|
546
|
+
.sapMBtnContent {
|
|
512
547
|
background: transparent;
|
|
513
|
-
color:
|
|
548
|
+
color: var(--sapShell_TextColor);
|
|
514
549
|
}
|
|
550
|
+
|
|
515
551
|
&:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnActive {
|
|
516
|
-
background:
|
|
517
|
-
border-color:
|
|
552
|
+
background: var(--sapShell_Active_Background);
|
|
553
|
+
border-color: var(--sapShell_Active_Background);
|
|
518
554
|
}
|
|
555
|
+
|
|
519
556
|
&:hover:not(.sapMBtnDisabled) {
|
|
520
|
-
|
|
557
|
+
|
|
558
|
+
> span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) {
|
|
559
|
+
|
|
521
560
|
&:not(.sapMBtnActive) {
|
|
522
|
-
background:
|
|
561
|
+
background: var(--sapShell_Hover_Background);
|
|
523
562
|
}
|
|
563
|
+
|
|
524
564
|
&.sapMBtnActive,
|
|
525
565
|
&.sapMBtnActive .sapMBtnContent,
|
|
526
566
|
&.sapMBtnActive .sapMBtnContent bdi {
|
|
527
|
-
background:
|
|
528
|
-
color:
|
|
529
|
-
border: 1px solid
|
|
567
|
+
background: var(--sapShell_Active_Background);
|
|
568
|
+
color: var(--sapShell_Active_TextColor);
|
|
569
|
+
border: 1px solid var(--sapButton_Lite_Active_BorderColor);
|
|
530
570
|
}
|
|
531
|
-
|
|
532
|
-
&.sapMBtnActive
|
|
533
|
-
|
|
571
|
+
|
|
572
|
+
&.sapMBtnActive::after,
|
|
573
|
+
&.sapMBtnActive > .sapMBtnIcon {
|
|
574
|
+
color: var(--sapShell_Active_TextColor);
|
|
534
575
|
}
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
576
|
+
|
|
577
|
+
&::after,
|
|
578
|
+
> .sapMBtnIcon {
|
|
579
|
+
color: var(--sapShell_InteractiveTextColor);
|
|
538
580
|
}
|
|
539
|
-
|
|
540
|
-
|
|
581
|
+
|
|
582
|
+
> .sapMBtnContent,
|
|
583
|
+
> .sapMBtnContent bdi
|
|
541
584
|
{
|
|
542
|
-
color:
|
|
585
|
+
color: var(--sapShell_TextColor);
|
|
543
586
|
}
|
|
544
|
-
|
|
545
587
|
}
|
|
588
|
+
|
|
546
589
|
&.sapFShellBarSearchCancelButton:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) {
|
|
547
590
|
&.sapMBtnActive .sapMBtnContent,
|
|
548
591
|
&.sapMBtnActive .sapMBtnContent bdi {
|
|
549
592
|
border: none;
|
|
550
593
|
}
|
|
551
594
|
}
|
|
595
|
+
|
|
552
596
|
&:active {
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
597
|
+
|
|
598
|
+
> .sapMBtnContent,
|
|
599
|
+
> .sapMBtnInner,
|
|
600
|
+
> .sapMBtnIcon {
|
|
601
|
+
color: var(--sapShell_TextColor);
|
|
557
602
|
}
|
|
558
603
|
}
|
|
559
604
|
}
|
|
@@ -564,67 +609,78 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
|
|
|
564
609
|
}
|
|
565
610
|
|
|
566
611
|
.sapMBtnBase.sapMBtn.sapFShellBarItem.sapMBarChild:hover {
|
|
612
|
+
|
|
567
613
|
.sapMBtnInner.sapMBtnHoverable.sapMFocusable.sapMBtnIconFirst{
|
|
568
|
-
background:
|
|
614
|
+
background: var(--sapShell_Hover_Background);
|
|
569
615
|
}
|
|
570
616
|
}
|
|
571
617
|
|
|
572
|
-
|
|
618
|
+
/* sap.m.Label */
|
|
573
619
|
.sapMTB > .sapMLabel {
|
|
574
|
-
color:
|
|
620
|
+
color: var(--sapShell_TextColor);
|
|
575
621
|
}
|
|
576
622
|
|
|
577
|
-
|
|
623
|
+
/* sap.m.SearchField */
|
|
578
624
|
.sapMSF {
|
|
579
625
|
|
|
580
626
|
&.sapMSFDisabled {
|
|
581
627
|
opacity: 0.4;
|
|
582
628
|
}
|
|
583
|
-
|
|
584
629
|
}
|
|
585
630
|
|
|
586
|
-
|
|
631
|
+
/* sap.m.Select */
|
|
587
632
|
.sapMSlt {
|
|
588
633
|
background-color: transparent;
|
|
589
|
-
border-color: lighten(@sapUiShellBorderColor,
|
|
590
|
-
color:
|
|
634
|
+
border-color: lighten(@sapUiShellBorderColor, 30);
|
|
635
|
+
color: var(--sapShell_TextColor);
|
|
636
|
+
|
|
591
637
|
&.sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover {
|
|
592
638
|
background-color: transparent;
|
|
593
|
-
border-color: lighten(@sapUiShellBorderColor,
|
|
594
|
-
color:
|
|
639
|
+
border-color: lighten(@sapUiShellBorderColor, 30);
|
|
640
|
+
color: var(--sapShell_TextColor);
|
|
641
|
+
|
|
595
642
|
.sapMSltArrow {
|
|
596
643
|
background-color: transparent;
|
|
644
|
+
|
|
597
645
|
&:hover {
|
|
598
|
-
background:
|
|
646
|
+
background: var(--sapShell_Hover_Background);
|
|
599
647
|
}
|
|
600
648
|
}
|
|
601
649
|
}
|
|
650
|
+
|
|
602
651
|
&.sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState) {
|
|
603
|
-
border-color:lighten(@sapUiShellBorderColor,
|
|
652
|
+
border-color:lighten(@sapUiShellBorderColor, 30);
|
|
604
653
|
}
|
|
654
|
+
|
|
605
655
|
.sapMSltLabel {
|
|
606
|
-
color:
|
|
656
|
+
color: var(--sapShell_TextColor);
|
|
657
|
+
|
|
607
658
|
&:hover {
|
|
608
|
-
background-color:
|
|
609
|
-
|
|
610
|
-
|
|
659
|
+
background-color: var(--sapShell_Hover_Background);
|
|
660
|
+
|
|
661
|
+
& > .sapMSltArrow {
|
|
662
|
+
background: var(--sapShell_Hover_Background);
|
|
611
663
|
}
|
|
612
664
|
}
|
|
613
665
|
}
|
|
666
|
+
|
|
614
667
|
.sapMSltArrow {
|
|
615
668
|
background-color: transparent;
|
|
616
|
-
color:
|
|
669
|
+
color: var(--sapShell_InteractiveTextColor);
|
|
670
|
+
|
|
617
671
|
&:hover {
|
|
618
|
-
background:
|
|
672
|
+
background: var(--sapShell_Hover_Background);
|
|
619
673
|
}
|
|
674
|
+
|
|
620
675
|
&:active {
|
|
621
|
-
background:
|
|
622
|
-
color:
|
|
676
|
+
background: var(--sapShell_Active_Background);
|
|
677
|
+
color: var(--sapShell_Active_TextColor);
|
|
623
678
|
}
|
|
624
679
|
}
|
|
680
|
+
|
|
625
681
|
&.sapMSltDisabled {
|
|
626
682
|
opacity: 0.4;
|
|
627
683
|
}
|
|
628
684
|
}
|
|
629
685
|
}
|
|
630
|
-
}
|
|
686
|
+
}
|
|
@@ -8,17 +8,11 @@
|
|
|
8
8
|
@_sap_f_Card_FocusBorderLeftOffset: 0;
|
|
9
9
|
@_sap_f_Card_FocusBorderRightOffset: 0;
|
|
10
10
|
@_sap_f_Card_FocusBorderRadius: inherit;
|
|
11
|
-
@_sap_f_Card_BorderRadius: 1rem;
|
|
12
11
|
@_sap_f_Card_HoverBoxShadow: var(--sapContent_Shadow2);
|
|
13
12
|
@_sap_f_Card_Badge_Background: var(--sapHighlightColor);
|
|
14
13
|
|
|
15
14
|
.sapFCard {
|
|
16
15
|
|
|
17
|
-
&.sapFCardNoContent .sapFCardHeader::before,
|
|
18
|
-
&.sapFCardNoHeader::before {
|
|
19
|
-
border-radius: @_sap_f_Card_BorderRadius;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
16
|
.sapFCardHeader {
|
|
23
17
|
border-bottom: none;
|
|
24
18
|
}
|