@openui5/themelib_sap_horizon 1.114.3 → 1.114.5

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 (69) hide show
  1. package/package.json +18 -18
  2. package/src/sap/m/themes/sap_horizon/Avatar.less +12 -2
  3. package/src/sap/m/themes/sap_horizon/IconTabBar.less +221 -58
  4. package/src/sap/m/themes/sap_horizon/InputBase.less +3 -0
  5. package/src/sap/m/themes/sap_horizon/Link.less +25 -19
  6. package/src/sap/m/themes/sap_horizon/Panel.less +9 -3
  7. package/src/sap/m/themes/sap_horizon/Popover.less +13 -0
  8. package/src/sap/m/themes/sap_horizon/RangeSlider.less +2 -7
  9. package/src/sap/m/themes/sap_horizon/Select.less +8 -14
  10. package/src/sap/m/themes/sap_horizon/Slider.less +2 -1
  11. package/src/sap/m/themes/sap_horizon/TextArea.less +4 -0
  12. package/src/sap/m/themes/sap_horizon/Token.less +44 -37
  13. package/src/sap/m/themes/sap_horizon/Tokenizer.less +8 -1
  14. package/src/sap/m/themes/sap_horizon_dark/Avatar.less +12 -2
  15. package/src/sap/m/themes/sap_horizon_dark/IconTabBar.less +202 -36
  16. package/src/sap/m/themes/sap_horizon_dark/InputBase.less +3 -0
  17. package/src/sap/m/themes/sap_horizon_dark/Link.less +25 -19
  18. package/src/sap/m/themes/sap_horizon_dark/MessageToast.less +8 -0
  19. package/src/sap/m/themes/sap_horizon_dark/Panel.less +8 -3
  20. package/src/sap/m/themes/sap_horizon_dark/Popover.less +13 -0
  21. package/src/sap/m/themes/sap_horizon_dark/RangeSlider.less +2 -7
  22. package/src/sap/m/themes/sap_horizon_dark/Select.less +7 -14
  23. package/src/sap/m/themes/sap_horizon_dark/Slider.less +7 -1
  24. package/src/sap/m/themes/sap_horizon_dark/TextArea.less +4 -0
  25. package/src/sap/m/themes/sap_horizon_dark/Token.less +44 -37
  26. package/src/sap/m/themes/sap_horizon_dark/Tokenizer.less +7 -0
  27. package/src/sap/m/themes/sap_horizon_dark/library.source.less +1 -0
  28. package/src/sap/m/themes/sap_horizon_hcb/Avatar.less +6 -2
  29. package/src/sap/m/themes/sap_horizon_hcb/IconTabBar.less +10 -1
  30. package/src/sap/m/themes/sap_horizon_hcb/Link.less +21 -14
  31. package/src/sap/m/themes/sap_horizon_hcb/MessageToast.less +8 -0
  32. package/src/sap/m/themes/sap_horizon_hcb/Panel.less +8 -3
  33. package/src/sap/m/themes/sap_horizon_hcb/Popover.less +6 -0
  34. package/src/sap/m/themes/sap_horizon_hcb/Select.less +20 -0
  35. package/src/sap/m/themes/sap_horizon_hcb/SelectList.less +1 -0
  36. package/src/sap/m/themes/sap_horizon_hcb/Slider.less +2 -1
  37. package/src/sap/m/themes/sap_horizon_hcb/TextArea.less +5 -1
  38. package/src/sap/m/themes/sap_horizon_hcb/Token.less +20 -13
  39. package/src/sap/m/themes/sap_horizon_hcb/Tokenizer.less +7 -0
  40. package/src/sap/m/themes/sap_horizon_hcb/library.source.less +1 -0
  41. package/src/sap/m/themes/sap_horizon_hcw/Avatar.less +6 -2
  42. package/src/sap/m/themes/sap_horizon_hcw/IconTabBar.less +10 -0
  43. package/src/sap/m/themes/sap_horizon_hcw/Link.less +21 -14
  44. package/src/sap/m/themes/sap_horizon_hcw/MessageToast.less +8 -0
  45. package/src/sap/m/themes/sap_horizon_hcw/Panel.less +8 -4
  46. package/src/sap/m/themes/sap_horizon_hcw/Popover.less +6 -0
  47. package/src/sap/m/themes/sap_horizon_hcw/Select.less +21 -0
  48. package/src/sap/m/themes/sap_horizon_hcw/SelectList.less +1 -0
  49. package/src/sap/m/themes/sap_horizon_hcw/Slider.less +2 -1
  50. package/src/sap/m/themes/sap_horizon_hcw/TextArea.less +5 -1
  51. package/src/sap/m/themes/sap_horizon_hcw/Token.less +21 -13
  52. package/src/sap/m/themes/sap_horizon_hcw/Tokenizer.less +7 -0
  53. package/src/sap/m/themes/sap_horizon_hcw/library.source.less +1 -0
  54. package/src/sap/tnt/themes/sap_horizon/NavigationList.less +13 -4
  55. package/src/sap/tnt/themes/sap_horizon/SideNavigation.less +3 -1
  56. package/src/sap/tnt/themes/sap_horizon/ToolHeader.less +53 -23
  57. package/src/sap/tnt/themes/sap_horizon_dark/NavigationList.less +13 -4
  58. package/src/sap/tnt/themes/sap_horizon_dark/SideNavigation.less +3 -1
  59. package/src/sap/tnt/themes/sap_horizon_dark/ToolHeader.less +53 -23
  60. package/src/sap/tnt/themes/sap_horizon_hcb/NavigationList.less +16 -1
  61. package/src/sap/tnt/themes/sap_horizon_hcb/SideNavigation.less +4 -1
  62. package/src/sap/tnt/themes/sap_horizon_hcb/ToolHeader.less +50 -29
  63. package/src/sap/tnt/themes/sap_horizon_hcw/NavigationList.less +16 -1
  64. package/src/sap/tnt/themes/sap_horizon_hcw/SideNavigation.less +4 -1
  65. package/src/sap/tnt/themes/sap_horizon_hcw/ToolHeader.less +51 -30
  66. package/src/sap/ui/core/themes/sap_horizon/.theme +1 -1
  67. package/src/sap/ui/core/themes/sap_horizon_dark/.theme +1 -1
  68. package/src/sap/ui/core/themes/sap_horizon_hcb/.theme +1 -1
  69. package/src/sap/ui/core/themes/sap_horizon_hcw/.theme +1 -1
@@ -161,4 +161,10 @@
161
161
  /* pointing left arrow */
162
162
  .sapMPopoverArrLeft:after {
163
163
  margin: 0.125rem 0 0 0.3125rem;
164
+ }
165
+
166
+ .sapMPopoverResizeHandle {
167
+ top: -8px;
168
+ right: -3px;
169
+ color: @sapButton_Lite_TextColor;
164
170
  }
@@ -11,6 +11,27 @@
11
11
  border-radius: 0.365rem;
12
12
  }
13
13
 
14
+ /* arrow styles */
15
+
16
+ .sapMSlt > .sapMSltArrow {
17
+ line-height: 2.25rem;
18
+ }
19
+
20
+ .sapUiSizeCompact .sapMSlt > .sapMSltArrow {
21
+ line-height: 1.625rem;
22
+ }
23
+
24
+ .sapMSltArrow {
25
+ width: 2.25rem;
26
+ height: 2.25rem;
27
+ }
28
+
29
+ .sapUiSizeCompact .sapMSltArrow {
30
+ width: 2rem;
31
+ height: 1.625rem;
32
+ }
33
+
34
+
14
35
  /* hover and focus */
15
36
 
16
37
  .sapMSlt.sapMSltIconOnly.sapMSltHoverable:hover:not(.sapMSltState) {
@@ -25,6 +25,7 @@
25
25
  .sapMComboBoxBasePicker-CTX .sapMSelectListItemBaseSelected,
26
26
  /* focus */
27
27
  html.sap-desktop .sapMSelectListItemBase:focus {
28
+ outline: @sapUiContentFocusStyle;
28
29
  outline-offset: -0.1875rem;
29
30
  }
30
31
 
@@ -26,7 +26,8 @@
26
26
  top: -.0625rem;
27
27
  }
28
28
 
29
- .sapMSliderInner:not(.sapMSliderInnerDisabled):hover > .sapMSliderHandle {
29
+ .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderProgress:hover ~ .sapMSliderHandle,
30
+ .sapMSliderHandle:hover {
30
31
  background: @sapUiSliderHoverHandleBackground;
31
32
  border-color: @sapUiSliderHoverHandleBorderColor;
32
33
  box-shadow: @sapUiContentSelectedShadow;
@@ -24,4 +24,8 @@
24
24
 
25
25
  .sapMInputBase.sapMTextArea .sapMTextAreaInner {
26
26
  line-height: 1.5;
27
- }
27
+ }
28
+
29
+ .sapMTextAreaMirror {
30
+ line-height: 1.5;
31
+ }
@@ -12,6 +12,8 @@
12
12
  .sapMToken {
13
13
  padding-left: @_sap_m_Token_LeftPadding;
14
14
  border-radius: 0.25rem;
15
+ color: @sapTextColor;
16
+ font-size: @sapFontSize;
15
17
  }
16
18
 
17
19
  html.sap-desktop .sapMToken:not(.sapMTokenReadOnly):hover {
@@ -24,6 +26,11 @@ html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
24
26
  border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
25
27
  }
26
28
 
29
+ html.sap-desktop .sapMToken:focus {
30
+ outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
31
+ outline-offset: -0.1875rem;
32
+ }
33
+
27
34
  html.sap-desktop .sapMToken {
28
35
  &.sapMTokenReadOnly,
29
36
  &.sapMTokenReadOnly:hover,
@@ -34,19 +41,20 @@ html.sap-desktop .sapMToken {
34
41
  border: @sapUiButtonBorderWidth solid @sapUiFieldReadOnlyBorderColor;
35
42
  }
36
43
  }
37
- html.sap-desktop .sapMToken:focus {
38
- outline: none;
44
+
45
+ .sapMToken.sapMTokenReadOnly {
46
+ padding: 0.25rem 0.3125rem;
47
+ color: @sapUiContentLabelColor;
48
+
49
+ .sapMTokenText {
50
+ line-height: 1rem;
51
+ }
39
52
  }
40
53
 
41
- html.sap-desktop .sapMToken:focus::after {
42
- content: '';
43
- position: absolute;
44
- pointer-events: none;
45
- z-index: 2;
46
- border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiFieldActiveBorderColor;
47
- border-radius: 0.25rem;
48
- top: 0.0625rem;
49
- bottom: 0.0625rem;
50
- left: 0.0625rem;
51
- right: 0.0625rem;
54
+ .sapUiSizeCompact .sapMToken.sapMTokenReadOnly {
55
+ padding: 0.125rem 0.25rem;
56
+
57
+ .sapMTokenText {
58
+ line-height: 0.875rem;
59
+ }
52
60
  }
@@ -36,9 +36,16 @@ html.sap-desktop .sapMTokenizer.sapMTokenizerReadonly {
36
36
  }
37
37
  }
38
38
 
39
+ .sapMTokenizer.sapMTokenizerReadonly .sapMToken.sapMTokenReadOnly {
40
+ padding: 0.25rem 0.3125rem;
41
+ }
42
+
39
43
  .sapUiSizeCompact {
40
44
  .sapMTokenizer {
41
45
  padding-left: 0.25rem;
46
+ &.sapMTokenizerReadonly .sapMToken.sapMTokenReadOnly {
47
+ padding: 0.125rem 0.25rem;
48
+ }
42
49
  .sapMToken {
43
50
  margin-right: 0.25rem;
44
51
  margin-top: 0.0625rem;
@@ -56,6 +56,7 @@
56
56
  @import "MessagePage.less";
57
57
  @import "MessageView.less";
58
58
  @import "MessageStrip.less";
59
+ @import "MessageToast.less";
59
60
  @import "MultiComboBox.less";
60
61
  @import "NewsContent.less";
61
62
  @import "NotificationListGroup.less";
@@ -7,19 +7,28 @@
7
7
  @_sap_tnt_NavigationList_IconColor: @sapUiListTextColor;
8
8
  @_sap_tnt_NavigationList_IconFontSize: 1.125rem;
9
9
  @_sap_tnt_NavigationList_ExpandIconColor: @sapUiListTextColor;
10
+ @_sap_tnt_NavigationList_GroupBorderStyleColor: none;
10
11
  @_sap_tnt_NavigationList_ItemHeight: 2.5rem;
11
12
  @_sap_tnt_NavigationList_ItemBorderRadius: 0.375rem;
12
13
  @_sap_tnt_NavigationList_ItemBottomMargin: 0.125rem;
13
14
  @_sap_tnt_NavigationList_ItemBottomMarginCompact: 0.5rem;
14
15
  @_sap_tnt_NavigationList_ItemFocusBorderOffset: -@sapUiContentFocusWidth;
15
- @_sap_tnt_NavigationList_SelectedItemBorder: none;
16
- @_sap_tnt_NavigationList_Collapsed_SelectedItemBorder: 0.125rem solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
16
+ @_sap_tnt_NavigationList_ItemFocusBorderRadius: @_sap_tnt_NavigationList_ItemBorderRadius + @sapUiContentFocusWidth;
17
+ @_sap_tnt_NavigationList_ItemTransition: background-color 0.3s ease-in-out;
18
+ @_sap_tnt_NavigationList_SelectedBorderStyleColor: none;
19
+ @_sap_tnt_NavigationList_Collapsed_SelectedItemBorderStyleColor: solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
17
20
  @_sap_tnt_NavigationList_GroupIconWidth: 2rem;
18
- @_sap_tnt_NavigationList_GroupBorder: none;
19
21
  @_sap_tnt_NavigationList_GroupBottomMarginInPopup: 0.75rem;
20
22
  @_sap_tnt_NavigationList_GroupTextWeight: bold;
21
23
  @_sap_tnt_NavigationList_NoIconsNestedItemPadding: 2rem;
22
24
  @_sap_tnt_NavigationList_Padding: 0.5rem;
23
25
  @_sap_tnt_NavigationList_PaddingCompact: 1.5rem 0.75rem 0.75rem 0.75rem;
24
- @_sap_tnt_NavigationList_PopupPadding: 0.5rem;
26
+ @_sap_tnt_NavigationList_ParentPopupPadding: 0.75rem;
27
+ @_sap_tnt_NavigationList_ParentPopupBorderRadius: 0.75rem;
28
+ @_sap_tnt_NavigationList_PopupItemPadding: 0 0.5rem;
29
+ @_sap_tnt_NavigationList_PopupIconWidth: 0.5rem;
30
+ @_sap_tnt_NavigationList_PopupBoxShadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 48), 0 1rem 2rem 0 fade(@sapUiContentShadowColor, 16);
31
+ @_sap_tnt_NavigationList_PopupArrowBoxShadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 48), 0 1rem 2rem 0 fade(@sapUiContentShadowColor, 16);
32
+ @_sap_tnt_NavigationList_PopupTitleTextSize: 1.25rem;
33
+ @_sap_tnt_NavigationList_PopupTitleLineHeight: 1.5rem;
25
34
  @_sap_tnt_NavigationList_SelectionIndicatorDisplay: inline-block;
@@ -11,7 +11,9 @@
11
11
  @_sap_tnt_SideNavigation_NavigationSeparatorRadius: 0.125rem;
12
12
  @_sap_tnt_SideNavigation_NavigationSeparatorHeight: 0.0625rem;
13
13
  @_sap_tnt_SideNavigation_TriangleColor: @sapUiContentNonInteractiveIconColor;
14
+ @_sap_tnt_SideNavigation_BorderRight: 0;
14
15
  @_sap_tnt_SideNavigation_BorderRadius: 0.5rem 0.5rem 0 0;
15
16
  @_sap_tnt_SideNavigation_PhoneBorderRadius: 0.5rem;
16
17
  @_sap_tnt_SideNavigation_BoxShadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 16), 0 0.5rem 1rem 0 fade(@sapUiContentShadowColor, 16);
17
- @_sap_tnt_SideNavigation_SeparatorMargin: 0.3125rem 0.5rem 0.3125rem 0.5rem;
18
+ @_sap_tnt_SideNavigation_SeparatorMargin: 0.3125rem 0.5rem 0.3125rem 0.5rem;
19
+ @_sap_tnt_SideNavigation_TriangleDisplay: none;
@@ -195,24 +195,52 @@
195
195
  .sapMSF {
196
196
  height: 2.5rem;
197
197
  padding-top: 0px;
198
+
199
+ &:not(.sapMSFVal) .sapMSFS {
200
+ pointer-events: none;
201
+ }
198
202
  }
199
203
 
200
204
  .sapMSF .sapMSFF {
201
205
  border-radius: 2rem;
202
206
  height: 2.5rem;
207
+ background-color: @sapUiShellInteractiveBackground;
208
+
209
+ &:hover {
210
+ background: @sapUiShellHoverBackground;
211
+ box-shadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 16), 0 0.5rem 1rem 0 fade(@sapUiContentShadowColor, 16);
212
+ }
213
+
214
+ .sapMSFI {
215
+ color: @sapUiShellTextColor;
216
+ }
217
+ }
218
+
219
+ .sapMSF.sapMFocus .sapMSFF {
220
+ background: @sapUiShellActiveBackground;
203
221
  }
204
222
 
205
223
  .sapMSFB {
206
- line-height: 2.5rem;
207
- width: 1.875rem;
224
+ width: 2rem;
225
+ height: 2rem;
226
+ margin-top: 0.25rem;
227
+ display: flex;
228
+ align-items: center;
229
+ justify-content: center;
230
+ }
231
+
232
+ .sapMSFB.sapMSFBA {
233
+ background: none;
234
+ box-shadow: none;
208
235
  }
209
236
 
210
237
  .sapMSFSSI {
211
238
  display: inline;
212
239
  }
213
240
 
214
- .sapMSFF .sapMSFSSI:before {
241
+ .sapMSFF .sapMSFSSI:before {
215
242
  content: "\e00d";
243
+ color: @sapUiContentNonInteractiveIconColor;
216
244
  display: block;
217
245
  font-style: normal;
218
246
  width: 1rem;
@@ -233,12 +261,11 @@
233
261
  height: 1.25rem;
234
262
  border-radius: 0.75rem;
235
263
  font-size: 0.75rem;
236
- margin-top: 0.625rem;
237
264
  line-height: 1.25rem;
238
265
  }
239
266
 
240
267
  .sapMSFS {
241
- width: 1.625rem;
268
+ margin-right: 0.25rem;
242
269
  border: none;
243
270
  }
244
271
 
@@ -252,17 +279,28 @@
252
279
  }
253
280
 
254
281
  .sapMSFS:active::after,
282
+ .sapMSFS.sapMSFBA::after,
255
283
  .sapMSFR:active::after {
256
284
  background: @sapActiveColor;
257
285
  color: @sapContent_IconColor;
258
- margin-top: 0.625rem;
259
286
  }
260
287
 
261
288
  .sapMSFS:hover::after,
262
289
  .sapMSFR:hover::after {
263
290
  background: @sapHoverColor;
264
291
  color: @sapContent_IconColor;
265
- margin-top: 0.625rem;
292
+ }
293
+
294
+ .sapMSFVal.sapMFocus .sapMSFF {
295
+ box-shadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 16), 0 0.5rem 1rem 0 fade(@sapUiContentShadowColor, 16);
296
+
297
+ &::before {
298
+ display: none;
299
+ }
300
+
301
+ .sapMSFS.sapMSFB::after {
302
+ outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
303
+ }
266
304
  }
267
305
  }
268
306
 
@@ -270,7 +308,6 @@
270
308
  .sapTntToolHeader {
271
309
  .sapMSF {
272
310
  height: 2rem;
273
- padding-top: 1px;
274
311
  }
275
312
 
276
313
  .sapMSF .sapMSFF {
@@ -278,25 +315,18 @@
278
315
  }
279
316
 
280
317
  .sapMSFB {
281
- line-height: 2rem;
282
- width: 1.5rem;
318
+ margin-top: 0.1875rem;
319
+ width: 1.625rem;
320
+ height: 1.625rem;
283
321
  }
284
322
 
285
- .sapMSFF .sapMSFSSI:before {
286
- margin-top: 0.5rem;
323
+ .sapMSFS {
324
+ margin-right: 0.1875rem;
287
325
  }
288
- }
289
326
 
290
- .sapMSFS:hover::after,
291
- .sapMSFR:hover::after,
292
- .sapMSFS:active::after,
293
- .sapMSFR:active::after {
294
- margin-top: 0.375rem;
295
- }
296
-
297
- .sapMSFS::after,
298
- .sapMSFR::after {
299
- margin-top: 0.375rem;
327
+ .sapMSFF .sapMSFSSI:before {
328
+ margin-top: 0.5rem;
329
+ }
300
330
  }
301
331
  }
302
332
 
@@ -7,19 +7,28 @@
7
7
  @_sap_tnt_NavigationList_IconColor: @sapUiListTextColor;
8
8
  @_sap_tnt_NavigationList_IconFontSize: 1.125rem;
9
9
  @_sap_tnt_NavigationList_ExpandIconColor: @sapUiListTextColor;
10
+ @_sap_tnt_NavigationList_GroupBorderStyleColor: none;
10
11
  @_sap_tnt_NavigationList_ItemHeight: 2.5rem;
11
12
  @_sap_tnt_NavigationList_ItemBorderRadius: 0.375rem;
12
13
  @_sap_tnt_NavigationList_ItemBottomMargin: 0.125rem;
13
14
  @_sap_tnt_NavigationList_ItemBottomMarginCompact: 0.5rem;
14
15
  @_sap_tnt_NavigationList_ItemFocusBorderOffset: -@sapUiContentFocusWidth;
15
- @_sap_tnt_NavigationList_SelectedItemBorder: none;
16
- @_sap_tnt_NavigationList_Collapsed_SelectedItemBorder: 0.125rem solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
16
+ @_sap_tnt_NavigationList_ItemFocusBorderRadius: @_sap_tnt_NavigationList_ItemBorderRadius + @sapUiContentFocusWidth;
17
+ @_sap_tnt_NavigationList_ItemTransition: background-color 0.3s ease-in-out;
18
+ @_sap_tnt_NavigationList_SelectedBorderStyleColor: none;
19
+ @_sap_tnt_NavigationList_Collapsed_SelectedItemBorderStyleColor: solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
17
20
  @_sap_tnt_NavigationList_GroupIconWidth: 2rem;
18
- @_sap_tnt_NavigationList_GroupBorder: none;
19
21
  @_sap_tnt_NavigationList_GroupBottomMarginInPopup: 0.75rem;
20
22
  @_sap_tnt_NavigationList_GroupTextWeight: bold;
21
23
  @_sap_tnt_NavigationList_NoIconsNestedItemPadding: 2rem;
22
24
  @_sap_tnt_NavigationList_Padding: 0.5rem;
23
25
  @_sap_tnt_NavigationList_PaddingCompact: 1.5rem 0.75rem 0.75rem 0.75rem;
24
- @_sap_tnt_NavigationList_PopupPadding: 0.5rem;
26
+ @_sap_tnt_NavigationList_ParentPopupPadding: 0.75rem;
27
+ @_sap_tnt_NavigationList_ParentPopupBorderRadius: 0.75rem;
28
+ @_sap_tnt_NavigationList_PopupItemPadding: 0 0.5rem;
29
+ @_sap_tnt_NavigationList_PopupIconWidth: 0.5rem;
30
+ @_sap_tnt_NavigationList_PopupBoxShadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 48), 0 1rem 2rem 0 fade(@sapUiContentShadowColor, 64);
31
+ @_sap_tnt_NavigationList_PopupArrowBoxShadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 48), 0 1rem 2rem 0 fade(@sapUiContentShadowColor, 64);
32
+ @_sap_tnt_NavigationList_PopupTitleTextSize: 1.25rem;
33
+ @_sap_tnt_NavigationList_PopupTitleLineHeight: 1.5rem;
25
34
  @_sap_tnt_NavigationList_SelectionIndicatorDisplay: inline-block;
@@ -11,7 +11,9 @@
11
11
  @_sap_tnt_SideNavigation_NavigationSeparatorRadius: 0.125rem;
12
12
  @_sap_tnt_SideNavigation_NavigationSeparatorHeight: 0.0625rem;
13
13
  @_sap_tnt_SideNavigation_TriangleColor: @sapUiContentNonInteractiveIconColor;
14
+ @_sap_tnt_SideNavigation_BorderRight: 0;
14
15
  @_sap_tnt_SideNavigation_BorderRadius: 0.5rem 0.5rem 0 0;
15
16
  @_sap_tnt_SideNavigation_PhoneBorderRadius: 0.5rem;
16
17
  @_sap_tnt_SideNavigation_BoxShadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 16), 0 0.5rem 1rem 0 fade(@sapUiContentShadowColor, 16);
17
- @_sap_tnt_SideNavigation_SeparatorMargin: 0.3125rem 0.5rem 0.3125rem 0.5rem;
18
+ @_sap_tnt_SideNavigation_SeparatorMargin: 0.3125rem 0.5rem 0.3125rem 0.5rem;
19
+ @_sap_tnt_SideNavigation_TriangleDisplay: none;
@@ -195,24 +195,52 @@
195
195
  .sapMSF {
196
196
  height: 2.5rem;
197
197
  padding-top: 0px;
198
+
199
+ &:not(.sapMSFVal) .sapMSFS {
200
+ pointer-events: none;
201
+ }
198
202
  }
199
203
 
200
204
  .sapMSF .sapMSFF {
201
205
  border-radius: 2rem;
202
206
  height: 2.5rem;
207
+ background-color: @sapUiShellInteractiveBackground;
208
+
209
+ &:hover {
210
+ background: @sapUiShellHoverBackground;
211
+ box-shadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 16), 0 0.5rem 1rem 0 fade(@sapUiContentShadowColor, 32), 0 0 0 0.0625rem fade(@sapUiFieldBorderColor, 16);
212
+ }
213
+
214
+ .sapMSFI {
215
+ color: @sapUiShellTextColor;
216
+ }
217
+ }
218
+
219
+ .sapMSF.sapMFocus .sapMSFF {
220
+ background: @sapUiShellActiveBackground;
203
221
  }
204
222
 
205
223
  .sapMSFB {
206
- line-height: 2.5rem;
207
- width: 1.875rem;
224
+ width: 2rem;
225
+ height: 2rem;
226
+ margin-top: 0.25rem;
227
+ display: flex;
228
+ align-items: center;
229
+ justify-content: center;
230
+ }
231
+
232
+ .sapMSFB.sapMSFBA {
233
+ background: none;
234
+ box-shadow: none;
208
235
  }
209
236
 
210
237
  .sapMSFSSI {
211
238
  display: inline;
212
239
  }
213
240
 
214
- .sapMSFF .sapMSFSSI:before {
241
+ .sapMSFF .sapMSFSSI:before {
215
242
  content: "\e00d";
243
+ color: @sapUiContentNonInteractiveIconColor;
216
244
  display: block;
217
245
  font-style: normal;
218
246
  width: 1rem;
@@ -233,12 +261,11 @@
233
261
  height: 1.25rem;
234
262
  border-radius: 0.75rem;
235
263
  font-size: 0.75rem;
236
- margin-top: 0.625rem;
237
264
  line-height: 1.25rem;
238
265
  }
239
266
 
240
267
  .sapMSFS {
241
- width: 1.625rem;
268
+ margin-right: 0.25rem;
242
269
  border: none;
243
270
  }
244
271
 
@@ -252,17 +279,28 @@
252
279
  }
253
280
 
254
281
  .sapMSFS:active::after,
282
+ .sapMSFS.sapMSFBA::after,
255
283
  .sapMSFR:active::after {
256
284
  background: @sapActiveColor;
257
285
  color: @sapContent_IconColor;
258
- margin-top: 0.625rem;
259
286
  }
260
287
 
261
288
  .sapMSFS:hover::after,
262
289
  .sapMSFR:hover::after {
263
290
  background: @sapHoverColor;
264
291
  color: @sapContent_IconColor;
265
- margin-top: 0.625rem;
292
+ }
293
+
294
+ .sapMSFVal.sapMFocus .sapMSFF {
295
+ box-shadow: 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 16), 0 0.5rem 1rem 0 fade(@sapUiContentShadowColor, 32), 0 0 0 0.0625rem fade(@sapUiFieldBorderColor, 16);
296
+
297
+ &::before {
298
+ display: none;
299
+ }
300
+
301
+ .sapMSFS.sapMSFB::after {
302
+ outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
303
+ }
266
304
  }
267
305
  }
268
306
 
@@ -270,7 +308,6 @@
270
308
  .sapTntToolHeader {
271
309
  .sapMSF {
272
310
  height: 2rem;
273
- padding-top: 1px;
274
311
  }
275
312
 
276
313
  .sapMSF .sapMSFF {
@@ -278,25 +315,18 @@
278
315
  }
279
316
 
280
317
  .sapMSFB {
281
- line-height: 2rem;
282
- width: 1.5rem;
318
+ margin-top: 0.1875rem;
319
+ width: 1.625rem;
320
+ height: 1.625rem;
283
321
  }
284
322
 
285
- .sapMSFF .sapMSFSSI:before {
286
- margin-top: 0.5rem;
323
+ .sapMSFS {
324
+ margin-right: 0.1875rem;
287
325
  }
288
- }
289
326
 
290
- .sapMSFS:hover::after,
291
- .sapMSFR:hover::after,
292
- .sapMSFS:active::after,
293
- .sapMSFR:active::after {
294
- margin-top: 0.375rem;
295
- }
296
-
297
- .sapMSFS::after,
298
- .sapMSFR::after {
299
- margin-top: 0.375rem;
327
+ .sapMSFF .sapMSFSSI:before {
328
+ margin-top: 0.5rem;
329
+ }
300
330
  }
301
331
  }
302
332
 
@@ -7,11 +7,26 @@
7
7
  @_sap_tnt_NavigationList_IconFontSize: 1.125rem;
8
8
  @_sap_tnt_NavigationList_ExpandIconColor: @sapUiContentNonInteractiveIconColor;
9
9
  @_sap_tnt_NavigationList_ItemHeight: 2.5rem;
10
+ @_sap_tnt_NavigationList_ItemBorderStyleColor: solid @sapUiListBorderColor;
11
+ @_sap_tnt_NavigationList_ItemBorderWidth: 0 0 0.0625rem 0;
12
+ @_sap_tnt_NavigationList_ItemFocusBorderOffset: @sapUiContentFocusWidth;
13
+ @_sap_tnt_NavigationList_LastItemBorderStyleColor: solid transparent;
14
+ @_sap_tnt_NavigationList_HoverBorderStyleColor: solid @sapUiListSelectionBorderColor;
15
+ @_sap_tnt_NavigationList_HoverBorderWidth: 0.0625rem;
16
+ @_sap_tnt_NavigationList_SelectedBorderWidth: 0.0625rem;
17
+ @_sap_tnt_NavigationList_Collapsed_SelectedItemBackground: @sapUiListSelectionBackgroundColor;
10
18
  @_sap_tnt_NavigationList_ItemBottomMargin: 0.125rem;
11
19
  @_sap_tnt_NavigationList_ItemBottomMarginCompact: 0.5rem;
12
20
  @_sap_tnt_NavigationList_GroupTextWeight: bold;
13
21
  @_sap_tnt_NavigationList_NoIconsNestedItemPadding: 2rem;
14
22
  @_sap_tnt_NavigationList_Padding: 0.5rem;
15
23
  @_sap_tnt_NavigationList_PaddingCompact: 1.5rem 0.75rem 0.75rem 0.75rem;
16
- @_sap_tnt_NavigationList_PopupPadding: 0.5rem;
24
+ @_sap_tnt_NavigationList_PopupItemPadding: 0 0.5rem;
25
+ @_sap_tnt_NavigationList_PopupIconWidth: 0.5rem;
26
+ @_sap_tnt_NavigationList_ParentPopupPadding: 0.75rem;
27
+ @_sap_tnt_NavigationList_ParentPopupBorderRadius: 0.75rem;
28
+ @_sap_tnt_NavigationList_PopupBoxShadow: 0 0 0 0.0625rem @sapUiContentShadowColor, 0 1rem 2rem 0 fade(@sapUiContentShadowColor, 16);
29
+ @_sap_tnt_NavigationList_PopupArrowBoxShadow: 0 0 0 0.0625rem @sapUiContentShadowColor, 0 1rem 2rem 0 fade(@sapUiContentShadowColor, 16);
30
+ @_sap_tnt_NavigationList_PopupTitleTextSize: 1.25rem;
31
+ @_sap_tnt_NavigationList_PopupTitleLineHeight: 1.5rem;
17
32
  @_sap_tnt_NavigationList_SelectionIndicatorDisplay: inline-block;
@@ -6,5 +6,8 @@
6
6
  @_sap_tnt_SideNavigation_Width: 16rem;
7
7
  @_sap_tnt_SideNavigation_CollapsedWidth: 3.5rem;
8
8
  @_sap_tnt_SideNavigation_NavigationSeparatorHeight: 0.0625rem;
9
+ @_sap_tnt_SideNavigation_BorderRight: 0;
9
10
  @_sap_tnt_SideNavigation_BorderRadius: 0.5rem 0.5rem 0 0;
10
- @_sap_tnt_SideNavigation_PhoneBorderRadius: 0.5rem;
11
+ @_sap_tnt_SideNavigation_PhoneBorderRadius: 0.5rem;
12
+ @_sap_tnt_SideNavigation_BoxShadow: 0 0 0 0.0625rem @sapContent_ShadowColor, 0 0.5rem 1rem 0 fade(@sapContent_ShadowColor, 16);
13
+ @_sap_tnt_SideNavigation_TriangleDisplay: none;