@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.
Files changed (80) hide show
  1. package/REUSE.toml +0 -28
  2. package/THIRDPARTY.txt +0 -24
  3. package/package.json +18 -18
  4. package/src/sap/f/themes/sap_horizon/Card.less +0 -6
  5. package/src/sap/f/themes/sap_horizon/DynamicPage.less +52 -43
  6. package/src/sap/f/themes/sap_horizon/DynamicPageHeader.less +4 -4
  7. package/src/sap/f/themes/sap_horizon/ShellBar.less +174 -118
  8. package/src/sap/f/themes/sap_horizon_dark/Card.less +0 -6
  9. package/src/sap/f/themes/sap_horizon_dark/DynamicPage.less +48 -40
  10. package/src/sap/f/themes/sap_horizon_dark/DynamicPageHeader.less +3 -3
  11. package/src/sap/f/themes/sap_horizon_dark/ShellBar.less +192 -130
  12. package/src/sap/f/themes/sap_horizon_hcb/DynamicPage.less +48 -39
  13. package/src/sap/f/themes/sap_horizon_hcb/DynamicPageHeader.less +9 -8
  14. package/src/sap/f/themes/sap_horizon_hcb/ShellBar.less +111 -81
  15. package/src/sap/f/themes/sap_horizon_hcw/DynamicPage.less +47 -40
  16. package/src/sap/f/themes/sap_horizon_hcw/DynamicPageHeader.less +8 -7
  17. package/src/sap/f/themes/sap_horizon_hcw/ShellBar.less +115 -84
  18. package/src/sap/m/themes/sap_horizon/Button.less +5 -11
  19. package/src/sap/m/themes/sap_horizon/IconTabBar.less +0 -2
  20. package/src/sap/m/themes/sap_horizon/Page.less +10 -7
  21. package/src/sap/m/themes/sap_horizon_dark/Button.less +4 -4
  22. package/src/sap/m/themes/sap_horizon_dark/IconTabBar.less +0 -2
  23. package/src/sap/m/themes/sap_horizon_dark/Page.less +9 -5
  24. package/src/sap/m/themes/sap_horizon_hcb/Button.less +1 -1
  25. package/src/sap/m/themes/sap_horizon_hcb/Menu.less +19 -10
  26. package/src/sap/m/themes/sap_horizon_hcb/Page.less +9 -7
  27. package/src/sap/m/themes/sap_horizon_hcw/Button.less +1 -1
  28. package/src/sap/m/themes/sap_horizon_hcw/Menu.less +14 -5
  29. package/src/sap/m/themes/sap_horizon_hcw/Page.less +9 -7
  30. package/src/sap/tnt/themes/sap_horizon/NavigationList.less +0 -1
  31. package/src/sap/tnt/themes/sap_horizon/ToolHeader.less +3 -3
  32. package/src/sap/tnt/themes/sap_horizon_dark/NavigationList.less +0 -1
  33. package/src/sap/tnt/themes/sap_horizon_dark/ToolHeader.less +3 -3
  34. package/src/sap/tnt/themes/sap_horizon_hcb/NavigationList.less +0 -1
  35. package/src/sap/tnt/themes/sap_horizon_hcb/ToolHeader.less +3 -3
  36. package/src/sap/tnt/themes/sap_horizon_hcw/NavigationList.less +0 -1
  37. package/src/sap/tnt/themes/sap_horizon_hcw/ToolHeader.less +3 -3
  38. package/src/sap/ui/core/themes/sap_horizon/.theme +1 -1
  39. package/src/sap/ui/core/themes/sap_horizon/fonts/SAP-icons.ttf +0 -0
  40. package/src/sap/ui/core/themes/sap_horizon/fonts/SAP-icons.woff2 +0 -0
  41. package/src/sap/ui/core/themes/sap_horizon/global.less +4 -0
  42. package/src/sap/ui/core/themes/sap_horizon_dark/.theme +1 -1
  43. package/src/sap/ui/core/themes/sap_horizon_dark/fonts/SAP-icons.ttf +0 -0
  44. package/src/sap/ui/core/themes/sap_horizon_dark/fonts/SAP-icons.woff2 +0 -0
  45. package/src/sap/ui/core/themes/sap_horizon_dark/global.less +4 -0
  46. package/src/sap/ui/core/themes/sap_horizon_hcb/.theme +1 -1
  47. package/src/sap/ui/core/themes/sap_horizon_hcb/fonts/SAP-icons.ttf +0 -0
  48. package/src/sap/ui/core/themes/sap_horizon_hcb/fonts/SAP-icons.woff2 +0 -0
  49. package/src/sap/ui/core/themes/sap_horizon_hcb/global.less +4 -0
  50. package/src/sap/ui/core/themes/sap_horizon_hcw/.theme +1 -1
  51. package/src/sap/ui/core/themes/sap_horizon_hcw/fonts/SAP-icons.ttf +0 -0
  52. package/src/sap/ui/core/themes/sap_horizon_hcw/fonts/SAP-icons.woff2 +0 -0
  53. package/src/sap/ui/core/themes/sap_horizon_hcw/global.less +4 -0
  54. package/src/sap/ui/dt/themes/sap_horizon/ContextMenu.less +5 -5
  55. package/src/sap/ui/dt/themes/sap_horizon_dark/ContextMenu.less +5 -5
  56. package/src/sap/ui/dt/themes/sap_horizon_hcb/ContextMenu.less +15 -6
  57. package/src/sap/ui/dt/themes/sap_horizon_hcw/ContextMenu.less +14 -5
  58. package/src/sap/ui/mdc/themes/sap_horizon/Chart.less +5 -5
  59. package/src/sap/ui/mdc/themes/sap_horizon_dark/Chart.less +5 -5
  60. package/src/sap/ui/mdc/themes/sap_horizon_hcb/Chart.less +5 -5
  61. package/src/sap/ui/mdc/themes/sap_horizon_hcw/Chart.less +5 -5
  62. package/src/sap/ui/rta/themes/sap_horizon_hcb/ContextMenu.less +4 -4
  63. package/src/sap/ui/rta/themes/sap_horizon_hcw/ContextMenu.less +4 -4
  64. package/src/sap/ui/unified/themes/sap_horizon/Calendar.less +1 -1
  65. package/src/sap/ui/unified/themes/sap_horizon/CalendarRow.less +0 -25
  66. package/src/sap/ui/unified/themes/sap_horizon_dark/CalendarRow.less +0 -25
  67. package/src/sap/ui/unified/themes/sap_horizon_hcb/CalendarRow.less +0 -24
  68. package/src/sap/ui/unified/themes/sap_horizon_hcw/CalendarRow.less +0 -24
  69. package/src/sap/uxap/themes/sap_horizon/ObjectPageSection.less +14 -6
  70. package/src/sap/uxap/themes/sap_horizon/ObjectPageSubSection.less +10 -5
  71. package/src/sap/uxap/themes/sap_horizon_dark/ObjectPageSection.less +14 -6
  72. package/src/sap/uxap/themes/sap_horizon_dark/ObjectPageSubSection.less +10 -5
  73. package/src/sap/uxap/themes/sap_horizon_hcb/ObjectPageSection.less +14 -5
  74. package/src/sap/uxap/themes/sap_horizon_hcb/ObjectPageSubSection.less +9 -3
  75. package/src/sap/uxap/themes/sap_horizon_hcw/ObjectPageSection.less +14 -5
  76. package/src/sap/uxap/themes/sap_horizon_hcw/ObjectPageSubSection.less +9 -3
  77. package/src/sap/f/themes/sap_horizon/ProductSwitchItem.less +0 -4
  78. package/src/sap/f/themes/sap_horizon_dark/ProductSwitchItem.less +0 -4
  79. package/src/sap/f/themes/sap_horizon_hcb/ProductSwitchItem.less +0 -8
  80. 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: @sapUiShellShadow;
25
+ box-shadow: var(--sapShell_Shadow);
26
26
  }
27
27
 
28
28
  .sapFShellBar {
29
- background: @sapUiShellColor;
29
+ background: var(--sapShellColor);
30
30
  height: 3.25rem;
31
- box-shadow: inset 0 -0.0625rem 0 0 @sapUiShellBorderColor;
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: @sapUiShellHoverBackground;
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: @sapUiShellActiveBackground;
47
- border-color: @sapUiShellActiveBackground;
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
- // Mega Menu
56
+ /* Mega Menu */
55
57
  .sapFSHMegaMenu {
56
- color: @sapUiShellTextColor;
58
+ color: var(--sapShell_TextColor);
57
59
  overflow: visible;
58
- font-size: @sapMFontHeader5Size;
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: @sapUiShellTextColor;
64
- background: @sapUiButtonLiteBackground;
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: @sapUiShellTextColor;
71
+ color: var(--sapShell_TextColor);
70
72
  }
71
73
 
72
74
  .sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
73
- background: @sapUiShellHoverBackground;
74
- border: 1px solid @sapUiButtonLiteHoverBorderColor;
75
- color: @sapUiShellTextColor;
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: @sapUiShellActiveBackground;
80
- border: 1px solid @sapUiButtonLiteActiveBorderColor;
81
- color: @sapUiShellActiveTextColor;
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: 'SAP-icons';
94
+ font-family: var(--sapContent_IconFontFamily);
93
95
  }
94
96
  }
95
97
 
96
- // Home Icon
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: @sapUiShellHoverBackground;
104
- box-shadow: @sapUiContentInteractionShadow;
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
- //Primary Title
115
+ /* Primary Title */
114
116
  .sapFShellBarPrimaryTitle {
115
117
  color: var(--sapShell_SubBrand_TextColor);
116
118
  }
117
119
 
118
- //Second Title
120
+ /* Second Title */
119
121
  .sapFShellBarSecondTitle {
120
- font-size: @sapMFontSmallSize;
121
- color: @sapUiShellTextColor;
122
+ font-size: var(--sapFontSmallSize);
123
+ color: var(--sapShell_TextColor);
122
124
  text-overflow: ellipsis;
123
125
  }
124
126
 
125
- // Search
127
+ /* Search */
126
128
  .sapFShellBarSearch {
127
- max-width: 35rem; // max width of searchField + button width
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
- // Reflection: styles overwritten
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: @sapUiButtonEmphasizedTextColor;
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: @sapUiButtonEmphasizedBackground;
163
+ background-color: var(--sapButton_Emphasized_Background);
160
164
 
161
165
  .sapMBtnIcon {
162
- color: @sapUiButtonEmphasizedTextColor;
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: @sapUiFieldBackgroundStyle;
187
- background-color: @sapUiShellInteractiveBackground;
188
- box-shadow: @sapUiFieldShadow;
191
+ background: var(--sapField_BackgroundStyle);
192
+ background-color: var(--sapShell_InteractiveBackground);
193
+ box-shadow: var(--sapField_Shadow);
189
194
  border: none;
190
- color: @sapUiShellInteractiveTextColor;
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: @sapUiShellHoverBackground;
209
- box-shadow: @sapUiButtonLiteHoverBorderColor;
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: @sapUiShellInteractiveTextColor;
217
+ color: var(--sapShell_InteractiveTextColor);
213
218
  }
214
219
 
215
220
  .sapMSFB:active,
216
221
  .sapMSFB.sapMSFBA {
217
- background: @sapUiShellActiveBackground;
218
- box-shadow: @sapUiContentSelectedShadow;
222
+ background: var(--sapShell_Active_Background);
223
+ box-shadow: var(--sapContent_Selected_Shadow);
219
224
  border-radius: 1.125rem;
220
- color: @sapUiShellActiveTextColor;
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: @sapUiShellHoverBackground;
235
- box-shadow: @sapUiFieldHoverShadow;
236
- border-bottom: 1px solid @sapUiFieldHoverBorderColor;
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: @sapUiFieldPlaceholderTextColor;
245
+ color: var(--sapField_PlaceholderTextColor);
241
246
  font-weight: italic;
242
247
  }
243
248
 
244
- // sap.m.Button
245
- // Reflection: styles overwritten
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.250rem 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
- // Overriding styles comming from other controls
278
- html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelButton):focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
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):before {
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
- // Resets of sizes for "Compact" mode - controls should remain in cozy mode
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
- // Reflection: styles overwritten
298
- // sap.m.MegaMenu
307
+ /* Reflection: styles overwritten
308
+ sap.m.MegaMenu */
299
309
  .sapFSHMegaMenu {
300
310
  height: 2.75rem;
301
311
  }
302
312
 
303
- // Reflection: styles overwritten
304
- // sap.m.Button
313
+ /* Reflection: styles overwritten
314
+ sap.m.Button */
305
315
  .sapMBtn {
306
316
  height: 2.75rem;
307
- padding: 0.250rem 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: @sapUiShellActiveBackground;
360
+ background-color: var(--sapShell_Active_Background);
348
361
  }
349
362
 
350
- // sap.m.MenuButton
351
- // Reflection: styles overwritten
363
+ /* sap.m.MenuButton
364
+ Reflection: styles overwritten */
352
365
  .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
353
- height: 38px; //ie does not accept rem for height in pseudo elements, but it works with px when you zoom
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
- // Reflection: styles overwritten
369
- // sap.m.SearchField
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
- // sap.m.Button
413
- // Reflection: styles overwritten
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.250rem 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
- // sap.m.Select
474
- // Reflection: styles overwritten
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
- // Resets all the styles of controls to align with the dark fiori 3 theme
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
- // sap.m.Button
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: @sapUiShellInteractiveTextColor;
543
+ color: var(--sapShell_InteractiveTextColor);
509
544
  }
510
- .sapMBtnContent
511
- {
545
+
546
+ .sapMBtnContent {
512
547
  background: transparent;
513
- color: @sapUiShellTextColor;
548
+ color: var(--sapShell_TextColor);
514
549
  }
550
+
515
551
  &:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnActive {
516
- background: @sapUiShellActiveBackground;
517
- border-color: @sapUiShellActiveBackground;
552
+ background: var(--sapShell_Active_Background);
553
+ border-color: var(--sapShell_Active_Background);
518
554
  }
555
+
519
556
  &:hover:not(.sapMBtnDisabled) {
520
- >span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) {
557
+
558
+ > span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) {
559
+
521
560
  &:not(.sapMBtnActive) {
522
- background: @sapUiShellHoverBackground;
561
+ background: var(--sapShell_Hover_Background);
523
562
  }
563
+
524
564
  &.sapMBtnActive,
525
565
  &.sapMBtnActive .sapMBtnContent,
526
566
  &.sapMBtnActive .sapMBtnContent bdi {
527
- background: @sapUiShellActiveBackground;
528
- color: @sapUiShellActiveTextColor;
529
- border: 1px solid @sapUiButtonLiteActiveBorderColor;
567
+ background: var(--sapShell_Active_Background);
568
+ color: var(--sapShell_Active_TextColor);
569
+ border: 1px solid var(--sapButton_Lite_Active_BorderColor);
530
570
  }
531
- &.sapMBtnActive:after,
532
- &.sapMBtnActive >.sapMBtnIcon {
533
- color: @sapUiShellActiveTextColor;
571
+
572
+ &.sapMBtnActive::after,
573
+ &.sapMBtnActive > .sapMBtnIcon {
574
+ color: var(--sapShell_Active_TextColor);
534
575
  }
535
- &:after,
536
- >.sapMBtnIcon {
537
- color: @sapUiShellInteractiveTextColor;
576
+
577
+ &::after,
578
+ > .sapMBtnIcon {
579
+ color: var(--sapShell_InteractiveTextColor);
538
580
  }
539
- >.sapMBtnContent,
540
- >.sapMBtnContent bdi
581
+
582
+ > .sapMBtnContent,
583
+ > .sapMBtnContent bdi
541
584
  {
542
- color: @sapUiShellTextColor;
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
- >.sapMBtnContent,
554
- >.sapMBtnInner,
555
- >.sapMBtnIcon {
556
- color: @sapUiShellTextColor;
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: @sapUiShellHoverBackground;
614
+ background: var(--sapShell_Hover_Background);
569
615
  }
570
616
  }
571
617
 
572
- //sap.m.Label
618
+ /* sap.m.Label */
573
619
  .sapMTB > .sapMLabel {
574
- color: @sapUiShellTextColor;
620
+ color: var(--sapShell_TextColor);
575
621
  }
576
622
 
577
- //sap.m.SearchField
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
- // sap.m.Select
631
+ /* sap.m.Select */
587
632
  .sapMSlt {
588
633
  background-color: transparent;
589
- border-color: lighten(@sapUiShellBorderColor, 30);
590
- color: @sapUiShellTextColor;
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, 30);
594
- color: @sapUiShellTextColor;
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: @sapUiShellHoverBackground;
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, 30);
652
+ border-color:lighten(@sapUiShellBorderColor, 30);
604
653
  }
654
+
605
655
  .sapMSltLabel {
606
- color: @sapUiShellTextColor;
656
+ color: var(--sapShell_TextColor);
657
+
607
658
  &:hover {
608
- background-color: @sapUiShellHoverBackground;
609
- &>.sapMSltArrow {
610
- background: @sapUiShellHoverBackground;
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: @sapUiShellInteractiveTextColor;
669
+ color: var(--sapShell_InteractiveTextColor);
670
+
617
671
  &:hover {
618
- background: @sapUiShellHoverBackground;
672
+ background: var(--sapShell_Hover_Background);
619
673
  }
674
+
620
675
  &:active {
621
- background: @sapUiShellActiveBackground;
622
- color: @sapUiShellActiveTextColor;
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
  }