@openui5/themelib_sap_horizon 1.148.1 → 1.149.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 (74) hide show
  1. package/THIRDPARTY.txt +1 -1
  2. package/package.json +18 -18
  3. package/src/sap/f/themes/sap_horizon/GridListItem.less +1 -2
  4. package/src/sap/f/themes/sap_horizon_dark/GridListItem.less +1 -2
  5. package/src/sap/f/themes/sap_horizon_hcb/GridListItem.less +1 -2
  6. package/src/sap/f/themes/sap_horizon_hcw/GridListItem.less +1 -2
  7. package/src/sap/m/themes/sap_horizon/ActionListItem.less +1 -1
  8. package/src/sap/m/themes/sap_horizon/AdditionalTextButton.less +16 -11
  9. package/src/sap/m/themes/sap_horizon/Avatar.less +13 -11
  10. package/src/sap/m/themes/sap_horizon/Bar.less +2 -2
  11. package/src/sap/m/themes/sap_horizon/Breadcrumbs.less +18 -6
  12. package/src/sap/m/themes/sap_horizon/BusyIndicator.less +1 -1
  13. package/src/sap/m/themes/sap_horizon/Carousel.less +22 -22
  14. package/src/sap/m/themes/sap_horizon/ColorPalette.less +6 -4
  15. package/src/sap/m/themes/sap_horizon/Dialog.less +8 -8
  16. package/src/sap/m/themes/sap_horizon/Panel.less +3 -2
  17. package/src/sap/m/themes/sap_horizon/ViewSettingsDialog.less +4 -0
  18. package/src/sap/m/themes/sap_horizon_dark/AdditionalTextButton.less +16 -11
  19. package/src/sap/m/themes/sap_horizon_dark/Avatar.less +8 -6
  20. package/src/sap/m/themes/sap_horizon_dark/Bar.less +1 -1
  21. package/src/sap/m/themes/sap_horizon_dark/Breadcrumbs.less +17 -5
  22. package/src/sap/m/themes/sap_horizon_dark/Carousel.less +21 -21
  23. package/src/sap/m/themes/sap_horizon_dark/ColorPalette.less +5 -2
  24. package/src/sap/m/themes/sap_horizon_dark/Dialog.less +8 -8
  25. package/src/sap/m/themes/sap_horizon_dark/Panel.less +3 -2
  26. package/src/sap/m/themes/sap_horizon_dark/ViewSettingsDialog.less +4 -0
  27. package/src/sap/m/themes/sap_horizon_hcb/ActionListItem.less +1 -2
  28. package/src/sap/m/themes/sap_horizon_hcb/ActionTile.less +1 -1
  29. package/src/sap/m/themes/sap_horizon_hcb/Avatar.less +13 -11
  30. package/src/sap/m/themes/sap_horizon_hcb/Bar.less +1 -1
  31. package/src/sap/m/themes/sap_horizon_hcb/Breadcrumbs.less +15 -6
  32. package/src/sap/m/themes/sap_horizon_hcb/Carousel.less +23 -23
  33. package/src/sap/m/themes/sap_horizon_hcb/Dialog.less +8 -8
  34. package/src/sap/m/themes/sap_horizon_hcb/Link.less +0 -4
  35. package/src/sap/m/themes/sap_horizon_hcb/ObjectNumber.less +6 -8
  36. package/src/sap/m/themes/sap_horizon_hcb/Panel.less +3 -2
  37. package/src/sap/m/themes/sap_horizon_hcb/ViewSettingsDialog.less +4 -0
  38. package/src/sap/m/themes/sap_horizon_hcw/ActionListItem.less +1 -2
  39. package/src/sap/m/themes/sap_horizon_hcw/ActionTile.less +1 -1
  40. package/src/sap/m/themes/sap_horizon_hcw/Avatar.less +13 -11
  41. package/src/sap/m/themes/sap_horizon_hcw/Bar.less +1 -1
  42. package/src/sap/m/themes/sap_horizon_hcw/Breadcrumbs.less +15 -6
  43. package/src/sap/m/themes/sap_horizon_hcw/Carousel.less +23 -23
  44. package/src/sap/m/themes/sap_horizon_hcw/Dialog.less +8 -8
  45. package/src/sap/m/themes/sap_horizon_hcw/Link.less +0 -4
  46. package/src/sap/m/themes/sap_horizon_hcw/ObjectNumber.less +6 -8
  47. package/src/sap/m/themes/sap_horizon_hcw/Panel.less +3 -2
  48. package/src/sap/m/themes/sap_horizon_hcw/ViewSettingsDialog.less +4 -0
  49. package/src/sap/ui/codeeditor/themes/sap_horizon_hcb/CodeEditor.less +1 -0
  50. package/src/sap/ui/codeeditor/themes/sap_horizon_hcw/CodeEditor.less +1 -0
  51. package/src/sap/ui/core/themes/sap_horizon/.theme +1 -1
  52. package/src/sap/ui/core/themes/sap_horizon_dark/.theme +1 -1
  53. package/src/sap/ui/core/themes/sap_horizon_hcb/.theme +1 -1
  54. package/src/sap/ui/core/themes/sap_horizon_hcb/base.less +1 -1
  55. package/src/sap/ui/core/themes/sap_horizon_hcw/.theme +1 -1
  56. package/src/sap/ui/core/themes/sap_horizon_hcw/base.less +1 -1
  57. package/src/sap/ui/dt/themes/sap_horizon/ContextMenu.less +5 -2
  58. package/src/sap/ui/dt/themes/sap_horizon/Overlay.less +16 -14
  59. package/src/sap/ui/dt/themes/sap_horizon_dark/ContextMenu.less +5 -2
  60. package/src/sap/ui/dt/themes/sap_horizon_dark/Overlay.less +16 -14
  61. package/src/sap/ui/dt/themes/sap_horizon_hcb/ContextMenu.less +8 -6
  62. package/src/sap/ui/dt/themes/sap_horizon_hcb/Overlay.less +20 -18
  63. package/src/sap/ui/dt/themes/sap_horizon_hcw/ContextMenu.less +7 -5
  64. package/src/sap/ui/dt/themes/sap_horizon_hcw/Overlay.less +20 -18
  65. package/src/sap/ui/mdc/themes/sap_horizon/ValueHelpDialog.less +7 -12
  66. package/src/sap/ui/mdc/themes/sap_horizon_dark/ValueHelpDialog.less +6 -11
  67. package/src/sap/ui/mdc/themes/sap_horizon_hcb/library.source.less +0 -1
  68. package/src/sap/ui/mdc/themes/sap_horizon_hcw/library.source.less +0 -1
  69. package/src/sap/ui/unified/themes/sap_horizon/Calendar.less +20 -54
  70. package/src/sap/ui/unified/themes/sap_horizon_dark/Calendar.less +20 -54
  71. package/src/sap/ui/unified/themes/sap_horizon_hcb/Calendar.less +33 -54
  72. package/src/sap/ui/unified/themes/sap_horizon_hcw/Calendar.less +33 -54
  73. package/src/sap/ui/mdc/themes/sap_horizon_hcb/ValueHelpDialog.less +0 -9
  74. package/src/sap/ui/mdc/themes/sap_horizon_hcw/ValueHelpDialog.less +0 -9
@@ -32,7 +32,7 @@
32
32
  box-sizing: border-box;
33
33
  }
34
34
 
35
- .sapMDialog > header .sapMDialogTitleGroup .sapMDialogIcon.sapUiIcon {
35
+ .sapMDialog > .sapMDialogHeader .sapMDialogTitleGroup .sapMDialogIcon.sapUiIcon {
36
36
  font-size: 1rem;
37
37
  }
38
38
 
@@ -47,7 +47,7 @@
47
47
  /* buttons on phone must be to the right side (in LTR mode) */
48
48
  html.sap-phone .sapMDialog {
49
49
 
50
- & > footer .sapMFooter-CTX {
50
+ & > .sapMDialogFooter .sapMFooter-CTX {
51
51
  justify-content: flex-end;
52
52
  }
53
53
  }
@@ -58,18 +58,18 @@ html.sap-phone .sapMDialog {
58
58
 
59
59
  .sapMDialog {
60
60
 
61
- header .sapMBarLeft,
62
- header .sapMBarPH {
61
+ .sapMDialogHeader .sapMBarLeft,
62
+ .sapMDialogHeader .sapMBarPH {
63
63
  padding-left: 1rem;
64
64
  }
65
65
 
66
- header .sapMBarRight,
67
- header .sapMBarPH {
66
+ .sapMDialogHeader .sapMBarRight,
67
+ .sapMDialogHeader .sapMBarPH {
68
68
  padding-right: 1rem;
69
69
  }
70
70
 
71
- header .sapMTB,
72
- footer .sapMTB {
71
+ .sapMDialogHeader .sapMTB,
72
+ .sapMDialogFooter .sapMTB {
73
73
  padding: 0 1rem;
74
74
  }
75
75
  }
@@ -59,14 +59,15 @@
59
59
  border: none;
60
60
  }
61
61
 
62
- .sapMPanelContent:not(.sapMPanelBGTransparent) {
62
+ .sapMPanelContentWrapper:not(:has(> .sapMPanelBGTransparent)) {
63
63
  border-bottom: none;
64
64
  }
65
65
 
66
- .sapMPanelContent {
66
+ .sapMPanelContentWrapper {
67
67
  padding: 0.625rem 1rem;
68
68
  border-bottom-left-radius: inherit;
69
69
  border-bottom-right-radius: inherit;
70
+ background-color: var(--sapGroup_ContentBackground);
70
71
  }
71
72
 
72
73
  .sapMPanel.sapMPanelExpanded.sapMPanelAnimating {
@@ -8,6 +8,10 @@
8
8
  .sapMVSD .sapMPageHeader {
9
9
  z-index: 2;
10
10
 
11
+ .sapMBarPH {
12
+ padding-left: 1rem;
13
+ }
14
+
11
15
  .sapMBarTitleStart .sapMBarPH {
12
16
  padding-left: 0rem;
13
17
  }
@@ -22,10 +22,9 @@
22
22
 
23
23
  .sapMALI > .sapMLIBContent {
24
24
  height: 2.5rem;
25
- border: 0.0625rem solid @sapUiButtonActionSelectBorderColor;
25
+ border: 0.0625rem solid var(--sapList_BorderColor);
26
26
  border-radius: 0.375rem;
27
27
  box-sizing: border-box;
28
- -webkit-box-align: center;
29
28
  align-items: center;
30
29
  }
31
30
 
@@ -4,7 +4,7 @@
4
4
  /* ================================== */
5
5
 
6
6
  .sapMAT:hover {
7
- outline:solid 0.1875rem var(--sapTile_Interactive_BorderColor);
7
+ outline: solid 0.1875rem var(--sapTile_Interactive_BorderColor);
8
8
  background-color: var(--sapTile_Background);
9
9
  box-shadow: none;
10
10
  }
@@ -3,12 +3,14 @@
3
3
  /* Horizon High Contrast Black theme */
4
4
  /* ================================== */
5
5
 
6
- @_sap_m_Avatar_Font_Size_XL: 3rem;
7
- @_sap_m_Avatar_Font_Size_L: 2.25rem;
8
- @_sap_m_Avatar_Font_Size_M: 1.5rem;
9
- @_sap_m_Avatar_Font_Size_S: 1.125rem;
10
- @_sap_m_Avatar_Font_Size_XS: 1rem;
11
- @_sap_m_Avatar_Hover_Box_Shadow_Offset: 0px;
6
+ .sapFAvatar {
7
+ --_sap_m_Avatar_Font_Size_XL: 3rem;
8
+ --_sap_m_Avatar_Font_Size_L: 2.25rem;
9
+ --_sap_m_Avatar_Font_Size_M: 1.5rem;
10
+ --_sap_m_Avatar_Font_Size_S: 1.125rem;
11
+ --_sap_m_Avatar_Font_Size_XS: 1rem;
12
+ --_sap_m_Avatar_Hover_Box_Shadow_Offset: 0;
13
+ }
12
14
 
13
15
  .sapFAvatarImageContain,
14
16
  .sapFAvatarIcon,
@@ -63,19 +65,19 @@
63
65
  }
64
66
 
65
67
  .generateColor (@accentIndex) {
66
- @css-selector: ~"sapFAvatarColorAccent@{accentIndex}"; // Create the css selector string
67
- @background-param: ~"sapUiAvatar@{accentIndex}Background"; // Build the color param which is a sapUiAccent
68
+ @css-selector: ~"sapFAvatarColorAccent@{accentIndex}"; /* Create the css selector string */
69
+ @background-param: ~"sapUiAvatar@{accentIndex}Background"; /* Build the color param which is a sapUiAccent */
68
70
  @color-param: ~"sapUiAvatar@{accentIndex}TextColor";
69
71
  @hover-color: ~"sapUiAvatar@{accentIndex}HoverBackground";
70
72
 
71
- // Build the real CSS selector.
72
- // The output would be something like this: .sapFAvatar.sapFAvatarColorAccent6 {background-color: #0092d1;}
73
+ /* Build the real CSS selector. */
74
+ /* The output would be something like this: .sapFAvatar.sapFAvatarColorAccent6 {background-color: #0092d1;} */
73
75
  .@{css-selector} {
74
76
  background-color: @@background-param;
75
77
  &.sapFAvatarImage.sapFAvatarFocusable:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover,
76
78
  &.sapFAvatarFocusable:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
77
79
  background-color: @@hover-color;
78
- box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset var(--sapAvatar_Hover_BorderColor);
80
+ box-shadow: var(--_sap_m_Avatar_Hover_Box_Shadow_Offset) var(--sapAvatar_Hover_BorderColor);
79
81
  }
80
82
  }
81
83
 
@@ -79,7 +79,7 @@
79
79
  justify-content: flex-start;
80
80
  }
81
81
 
82
- html[data-sap-ui-browser^="ff"].sap-desktop .sapMBarTitleAlignAuto .sapMBarPH {
82
+ html[data-sap-ui-browser^='ff'].sap-desktop .sapMBarTitleAlignAuto .sapMBarPH {
83
83
  justify-content: start;
84
84
  }
85
85
 
@@ -19,7 +19,7 @@
19
19
  color: var(--sapTextColor);
20
20
 
21
21
  &:focus {
22
- outline: 0.125rem dotted @sapUiHcStandardForeground;
22
+ outline: 0.125rem dotted var(--sapContent_FocusColor);
23
23
  outline-offset: -0.125rem;
24
24
  }
25
25
  }
@@ -28,7 +28,7 @@
28
28
  color: var(--sapTextColor);
29
29
  }
30
30
 
31
- .sapMBreadcrumbsItem.sapMBreadcrumbsSelectItem>.sapMSlt.sapMSltIconOnly.sapMSltWithIcon.sapMSltHoverable.sapMSltWithArrow {
31
+ .sapMBreadcrumbsItem.sapMBreadcrumbsSelectItem>.sapMSlt.sapMSltIconOnly.sapMSltWithIcon.sapMSltWithArrow {
32
32
  background: transparent;
33
33
  border: none;
34
34
 
@@ -37,7 +37,7 @@
37
37
  display: flex;
38
38
  align-items: center;
39
39
  gap: 0.2rem;
40
- margin-top: 0.1rem;
40
+ margin-top: -0.125rem;
41
41
 
42
42
  &::before,
43
43
  &::after {
@@ -52,7 +52,7 @@
52
52
  &::after {
53
53
  content: '\e1ef';
54
54
  font-family: var(--sapContent_IconFontFamily);
55
- font-size: @sapMFontMediumSize;
55
+ font-size: var(--sapFontSize);
56
56
  color: var(--sapLinkColor);
57
57
  speak: none;
58
58
  }
@@ -60,12 +60,21 @@
60
60
 
61
61
  &.sapMSltFocused,
62
62
  &:hover {
63
- outline: 0.125rem dotted @sapUiHcStandardForeground;
63
+ outline: 0.125rem dotted var(--sapContent_FocusColor);
64
64
  outline-offset: -0.125rem;
65
65
 
66
66
  .sapMSltIcon::before {
67
67
  border-bottom: none;
68
68
  }
69
69
  }
70
+
71
+ /* Override base theme specificity (.sapMSltHoverable) for border-bottom */
72
+ &.sapMSltHoverable:hover,
73
+ &.sapMSltHoverable.sapMSltFocused {
74
+
75
+ .sapMSltIcon::before {
76
+ border-bottom: none;
77
+ }
78
+ }
70
79
  }
71
- }
80
+ }
@@ -3,28 +3,28 @@
3
3
  /* Horizon High Contrast Black theme */
4
4
  /* ================================== */
5
5
 
6
- /* ========================================================================== */
7
6
  /* Variables overriding */
8
- /* ========================================================================== */
9
7
 
10
- @_sap_m_Carousel_BackgroundColor: var(--sapBackgroundColor);
11
- @_sap_m_Carousel_MinWidth: 11.25rem;
12
- @_sap_m_Carousel_PageIndicatorBarHeight: 2.75rem;
13
- @_sap_m_Carousel_BottomArrowsOffset: calc(~'2.75rem + 1px');
14
- @_sap_m_Carousel_ControlsNoArrowsHeight: 2.75rem;
15
- @_sap_m_Carousel_NumericIndicatorTextColor: var(--sapPageFooter_TextColor);
16
- @_sap_m_Carousel_PrevAndNextSize: 2.125rem;
17
- @_sap_m_Carousel_PrevAndNextPosition: 0.5rem;
18
- @_sap_m_Carousel_PageIndicatorWidthSizeS: 9rem;
19
- @_sap_m_Carousel_PageIndicatorWidthSizeM: @_sap_m_Carousel_PageIndicatorWidthSizeS;
20
- @_sap_m_Carousel_PageIndicatorWidthSizeL: @_sap_m_Carousel_PageIndicatorWidthSizeS;
21
- @_sap_m_Carousel_PageIndicatorWidthSizeXL: @_sap_m_Carousel_PageIndicatorWidthSizeS;
22
- @_sap_m_Carousel_PageIndicatorContainerPadding: 0.5rem;
23
- @_sap_m_Carousel_BulletInactiveBackground: transparent;
24
- @_sap_m_Carousel_BulletInactiveBorderColor: var(--sapContent_ForegroundBorderColor);
25
- @_sap_m_Carousel_BulletActiveBackground: var(--sapContent_Selected_ForegroundColor);
26
- @_sap_m_Carousel_BulletActiveBorder: var(--sapContent_Selected_ForegroundColor);
27
- @_sap_m_Carousel_BulletInactiveWidth: 0.375rem;
28
- @_sap_m_Carousel_BulletInactiveMargin: 0 0.25rem;
29
- @_sap_m_Carousel_FocusBorderOffsetArrow: -0.3125rem;
30
- @_sap_m_Carousel_ContrastFocusBorder: var(--sapContent_FocusWidth) solid var(--sapBackgroundColor);
8
+ .sapMCrsl {
9
+ --_sap_m_Carousel_BackgroundColor: var(--sapBackgroundColor);
10
+ --_sap_m_Carousel_MinWidth: 11.25rem;
11
+ --_sap_m_Carousel_PageIndicatorBarHeight: 2.75rem;
12
+ --_sap_m_Carousel_BottomArrowsOffset: ~'calc(2.75rem + 1px)';
13
+ --_sap_m_Carousel_ControlsNoArrowsHeight: 2.75rem;
14
+ --_sap_m_Carousel_NumericIndicatorTextColor: var(--sapPageFooter_TextColor);
15
+ --_sap_m_Carousel_PrevAndNextSize: 2.125rem;
16
+ --_sap_m_Carousel_PrevAndNextPosition: 0.5rem;
17
+ --_sap_m_Carousel_PageIndicatorWidthSizeS: 9rem;
18
+ --_sap_m_Carousel_PageIndicatorWidthSizeM: var(--_sap_m_Carousel_PageIndicatorWidthSizeS);
19
+ --_sap_m_Carousel_PageIndicatorWidthSizeL: var(--_sap_m_Carousel_PageIndicatorWidthSizeS);
20
+ --_sap_m_Carousel_PageIndicatorWidthSizeXL: var(--_sap_m_Carousel_PageIndicatorWidthSizeS);
21
+ --_sap_m_Carousel_PageIndicatorContainerPadding: 0.5rem;
22
+ --_sap_m_Carousel_BulletInactiveBackground: transparent;
23
+ --_sap_m_Carousel_BulletInactiveBorderColor: var(--sapContent_ForegroundBorderColor);
24
+ --_sap_m_Carousel_BulletActiveBackground: var(--sapContent_Selected_ForegroundColor);
25
+ --_sap_m_Carousel_BulletActiveBorder: var(--sapContent_Selected_ForegroundColor);
26
+ --_sap_m_Carousel_BulletInactiveWidth: 0.375rem;
27
+ --_sap_m_Carousel_BulletInactiveMargin: 0 0.25rem;
28
+ --_sap_m_Carousel_FocusBorderOffsetArrow: -0.3125rem;
29
+ --_sap_m_Carousel_ContrastFocusBorder: var(--sapContent_FocusWidth) solid var(--sapBackgroundColor);
30
+ }
@@ -19,7 +19,7 @@
19
19
  box-sizing: border-box;
20
20
  }
21
21
 
22
- .sapMDialog > header .sapMDialogTitleGroup .sapMDialogIcon.sapUiIcon {
22
+ .sapMDialog > .sapMDialogHeader .sapMDialogTitleGroup .sapMDialogIcon.sapUiIcon {
23
23
  font-size: 1rem;
24
24
  }
25
25
 
@@ -34,7 +34,7 @@
34
34
  /* buttons on phone must be to the right side (in LTR mode) */
35
35
  html.sap-phone .sapMDialog {
36
36
 
37
- & > footer .sapMFooter-CTX {
37
+ & > .sapMDialogFooter .sapMFooter-CTX {
38
38
  justify-content: flex-end;
39
39
  }
40
40
  }
@@ -45,18 +45,18 @@ html.sap-phone .sapMDialog {
45
45
 
46
46
  .sapMDialog {
47
47
 
48
- header .sapMBarLeft,
49
- header .sapMBarPH {
48
+ .sapMDialogHeader .sapMBarLeft,
49
+ .sapMDialogHeader .sapMBarPH {
50
50
  padding-left: 1rem;
51
51
  }
52
52
 
53
- header .sapMBarRight,
54
- header .sapMBarPH {
53
+ .sapMDialogHeader .sapMBarRight,
54
+ .sapMDialogHeader .sapMBarPH {
55
55
  padding-right: 1rem;
56
56
  }
57
57
 
58
- header .sapMTB,
59
- footer .sapMTB {
58
+ .sapMDialogHeader .sapMTB,
59
+ .sapMDialogFooter .sapMTB {
60
60
  padding: 0 1rem;
61
61
  }
62
62
  }
@@ -30,10 +30,6 @@ html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
30
30
 
31
31
  &:focus {
32
32
  outline: 0.125rem dotted var(--sapContent_FocusColor);
33
-
34
- &:hover:not(:active) {
35
- text-decoration: none;
36
- }
37
33
  }
38
34
 
39
35
  &.sapMLnkSubtle {
@@ -35,14 +35,12 @@ html.sap-desktop .sapMObjectNumberActive:focus {
35
35
  left: 1px;
36
36
  bottom: -1px;
37
37
  right: 1px;
38
- outline: 2px dotted var(--sapContent_FocusColor);
38
+ outline: 0.125rem dotted var(--sapContent_FocusColor);
39
39
  }
40
40
 
41
41
  &.sapMObjectNumberInverted .sapMObjectNumberInner::after {
42
+ outline-offset: -0.125rem;
42
43
  top: 0.125rem;
43
- left: 0.125rem;
44
- bottom: 0.0625rem;
45
- right: 0.125rem;
46
44
  outline: 0.125rem dotted var(--sapContent_FocusColor);
47
45
  }
48
46
 
@@ -56,11 +54,11 @@ html.sap-desktop .sapMObjectNumberActive:focus {
56
54
  }
57
55
 
58
56
  &.sapMObjectNumberInverted .sapMObjectNumberInner::after {
59
- top: 3px;
60
- left: 3px;
57
+ top: 2px;
58
+ left: 2px;
61
59
  bottom: 3px;
62
- right: 3px;
63
- outline: 2px dotted var(--sapContent_ContrastFocusColor);
60
+ right: 2px;
61
+ outline: 0.125rem dotted var(--sapContent_ContrastFocusColor);
64
62
  }
65
63
  }
66
64
  }
@@ -37,12 +37,13 @@
37
37
  border: none;
38
38
  }
39
39
 
40
- .sapMPanelContent:not(.sapMPanelBGTransparent) {
40
+ .sapMPanelContentWrapper:not(:has(> .sapMPanelBGTransparent)) {
41
41
  border-bottom: @sapGroup_TitleBorderWidth solid @sapUiGroupTitleBorderColor;
42
42
  }
43
43
 
44
- .sapMPanelContent {
44
+ .sapMPanelContentWrapper {
45
45
  padding: 0.625rem 1rem;
46
+ background-color: var(--sapGroup_ContentBackground);
46
47
  }
47
48
 
48
49
  .sapMPanel .sapMPanelHdr {
@@ -8,6 +8,10 @@
8
8
  .sapMVSD .sapMPageHeader {
9
9
  z-index: 2;
10
10
 
11
+ .sapMBarPH {
12
+ padding-left: 1rem;
13
+ }
14
+
11
15
  .sapMBarTitleStart .sapMBarPH {
12
16
  padding-left: 0rem;
13
17
  }
@@ -22,10 +22,9 @@
22
22
 
23
23
  .sapMALI > .sapMLIBContent {
24
24
  height: 2.5rem;
25
- border: 0.0625rem solid @sapUiButtonActionSelectBorderColor;
25
+ border: 0.0625rem solid var(--sapList_BorderColor);
26
26
  border-radius: 0.375rem;
27
27
  box-sizing: border-box;
28
- -webkit-box-align: center;
29
28
  align-items: center;
30
29
  }
31
30
 
@@ -4,7 +4,7 @@
4
4
  /* ================================== */
5
5
 
6
6
  .sapMAT:hover {
7
- outline:solid 0.1875rem var(--sapTile_Interactive_BorderColor);
7
+ outline: solid 0.1875rem var(--sapTile_Interactive_BorderColor);
8
8
  background-color: var(--sapTile_Background);
9
9
  box-shadow: none;
10
10
  }
@@ -3,12 +3,14 @@
3
3
  /* Horizon High Contrast White theme */
4
4
  /* ================================== */
5
5
 
6
- @_sap_m_Avatar_Font_Size_XL: 3rem;
7
- @_sap_m_Avatar_Font_Size_L: 2.25rem;
8
- @_sap_m_Avatar_Font_Size_M: 1.5rem;
9
- @_sap_m_Avatar_Font_Size_S: 1.125rem;
10
- @_sap_m_Avatar_Font_Size_XS: 1rem;
11
- @_sap_m_Avatar_Hover_Box_Shadow_Offset: 0px;
6
+ .sapFAvatar {
7
+ --_sap_m_Avatar_Font_Size_XL: 3rem;
8
+ --_sap_m_Avatar_Font_Size_L: 2.25rem;
9
+ --_sap_m_Avatar_Font_Size_M: 1.5rem;
10
+ --_sap_m_Avatar_Font_Size_S: 1.125rem;
11
+ --_sap_m_Avatar_Font_Size_XS: 1rem;
12
+ --_sap_m_Avatar_Hover_Box_Shadow_Offset: 0;
13
+ }
12
14
 
13
15
  .sapFAvatarImageContain,
14
16
  .sapFAvatarIcon,
@@ -62,19 +64,19 @@
62
64
  }
63
65
 
64
66
  .generateColor (@accentIndex) {
65
- @css-selector: ~"sapFAvatarColorAccent@{accentIndex}"; // Create the css selector string
66
- @background-param: ~"sapUiAvatar@{accentIndex}Background"; // Build the color param which is a sapUiAccent
67
+ @css-selector: ~"sapFAvatarColorAccent@{accentIndex}"; /* Create the css selector string */
68
+ @background-param: ~"sapUiAvatar@{accentIndex}Background"; /* Build the color param which is a sapUiAccent */
67
69
  @color-param: ~"sapUiAvatar@{accentIndex}TextColor";
68
70
  @hover-color: ~"sapUiAvatar@{accentIndex}HoverBackground";
69
71
 
70
- // Build the real CSS selector.
71
- // The output would be something like this: .sapFAvatar.sapFAvatarColorAccent6 {background-color: #0092d1;}
72
+ /* Build the real CSS selector. */
73
+ /* The output would be something like this: .sapFAvatar.sapFAvatarColorAccent6 {background-color: #0092d1;} */
72
74
  .@{css-selector} {
73
75
  background-color: @@background-param;
74
76
  &.sapFAvatarImage.sapFAvatarFocusable:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover,
75
77
  &.sapFAvatarFocusable:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
76
78
  background-color: @@hover-color;
77
- box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset var(--sapAvatar_Hover_BorderColor);
79
+ box-shadow: var(--_sap_m_Avatar_Hover_Box_Shadow_Offset) var(--sapAvatar_Hover_BorderColor);
78
80
  }
79
81
  }
80
82
 
@@ -79,7 +79,7 @@
79
79
  justify-content: flex-start;
80
80
  }
81
81
 
82
- html[data-sap-ui-browser^="ff"].sap-desktop .sapMBarTitleAlignAuto .sapMBarPH {
82
+ html[data-sap-ui-browser^='ff'].sap-desktop .sapMBarTitleAlignAuto .sapMBarPH {
83
83
  justify-content: start;
84
84
  }
85
85
 
@@ -19,7 +19,7 @@
19
19
  color: var(--sapTextColor);
20
20
 
21
21
  &:focus {
22
- outline: 0.125rem dotted @sapUiHcStandardForeground;
22
+ outline: 0.125rem dotted var(--sapContent_FocusColor);
23
23
  outline-offset: -0.125rem;
24
24
  }
25
25
  }
@@ -28,7 +28,7 @@
28
28
  color: var(--sapTextColor);
29
29
  }
30
30
 
31
- .sapMBreadcrumbsItem.sapMBreadcrumbsSelectItem>.sapMSlt.sapMSltIconOnly.sapMSltWithIcon.sapMSltHoverable.sapMSltWithArrow {
31
+ .sapMBreadcrumbsItem.sapMBreadcrumbsSelectItem>.sapMSlt.sapMSltIconOnly.sapMSltWithIcon.sapMSltWithArrow {
32
32
  background: transparent;
33
33
  border: none;
34
34
 
@@ -37,7 +37,7 @@
37
37
  display: flex;
38
38
  align-items: center;
39
39
  gap: 0.2rem;
40
- margin-top: 0.1rem;
40
+ margin-top: -0.125rem;
41
41
 
42
42
  &::before,
43
43
  &::after {
@@ -52,7 +52,7 @@
52
52
  &::after {
53
53
  content: '\e1ef';
54
54
  font-family: var(--sapContent_IconFontFamily);
55
- font-size: @sapMFontMediumSize;
55
+ font-size: var(--sapFontSize);
56
56
  color: var(--sapLinkColor);
57
57
  speak: none;
58
58
  }
@@ -60,12 +60,21 @@
60
60
 
61
61
  &.sapMSltFocused,
62
62
  &:hover {
63
- outline: 0.125rem dotted @sapUiHcStandardForeground;
63
+ outline: 0.125rem dotted var(--sapContent_FocusColor);
64
64
  outline-offset: -0.125rem;
65
65
 
66
66
  .sapMSltIcon::before {
67
67
  border-bottom: none;
68
68
  }
69
69
  }
70
+
71
+ /* Override base theme specificity (.sapMSltHoverable) for border-bottom */
72
+ &.sapMSltHoverable:hover,
73
+ &.sapMSltHoverable.sapMSltFocused {
74
+
75
+ .sapMSltIcon::before {
76
+ border-bottom: none;
77
+ }
78
+ }
70
79
  }
71
- }
80
+ }
@@ -3,28 +3,28 @@
3
3
  /* Horizon High Contrast White theme */
4
4
  /* ================================== */
5
5
 
6
- /* ========================================================================== */
7
6
  /* Variables overriding */
8
- /* ========================================================================== */
9
7
 
10
- @_sap_m_Carousel_BackgroundColor: var(--sapBackgroundColor);
11
- @_sap_m_Carousel_MinWidth: 11.25rem;
12
- @_sap_m_Carousel_PageIndicatorBarHeight: 2.75rem;
13
- @_sap_m_Carousel_BottomArrowsOffset: calc(~'2.75rem + 1px');
14
- @_sap_m_Carousel_ControlsNoArrowsHeight: 2.75rem;
15
- @_sap_m_Carousel_NumericIndicatorTextColor: var(--sapPageFooter_TextColor);
16
- @_sap_m_Carousel_PrevAndNextSize: 2.125rem;
17
- @_sap_m_Carousel_PrevAndNextPosition: 0.5rem;
18
- @_sap_m_Carousel_PageIndicatorWidthSizeS: 9rem;
19
- @_sap_m_Carousel_PageIndicatorWidthSizeM: @_sap_m_Carousel_PageIndicatorWidthSizeS;
20
- @_sap_m_Carousel_PageIndicatorWidthSizeL: @_sap_m_Carousel_PageIndicatorWidthSizeS;
21
- @_sap_m_Carousel_PageIndicatorWidthSizeXL: @_sap_m_Carousel_PageIndicatorWidthSizeS;
22
- @_sap_m_Carousel_PageIndicatorContainerPadding: 0.5rem;
23
- @_sap_m_Carousel_BulletInactiveBackground: transparent;
24
- @_sap_m_Carousel_BulletInactiveBorderColor: var(--sapContent_ForegroundBorderColor);
25
- @_sap_m_Carousel_BulletActiveBackground: var(--sapContent_Selected_ForegroundColor);
26
- @_sap_m_Carousel_BulletActiveBorder: var(--sapContent_Selected_ForegroundColor);
27
- @_sap_m_Carousel_BulletInactiveWidth: 0.375rem;
28
- @_sap_m_Carousel_BulletInactiveMargin: 0 0.25rem;
29
- @_sap_m_Carousel_FocusBorderOffsetArrow: -0.3125rem;
30
- @_sap_m_Carousel_ContrastFocusBorder: var(--sapContent_FocusWidth) solid var(--sapBackgroundColor);
8
+ .sapMCrsl {
9
+ --_sap_m_Carousel_BackgroundColor: var(--sapBackgroundColor);
10
+ --_sap_m_Carousel_MinWidth: 11.25rem;
11
+ --_sap_m_Carousel_PageIndicatorBarHeight: 2.75rem;
12
+ --_sap_m_Carousel_BottomArrowsOffset: ~'calc(2.75rem + 1px)';
13
+ --_sap_m_Carousel_ControlsNoArrowsHeight: 2.75rem;
14
+ --_sap_m_Carousel_NumericIndicatorTextColor: var(--sapPageFooter_TextColor);
15
+ --_sap_m_Carousel_PrevAndNextSize: 2.125rem;
16
+ --_sap_m_Carousel_PrevAndNextPosition: 0.5rem;
17
+ --_sap_m_Carousel_PageIndicatorWidthSizeS: 9rem;
18
+ --_sap_m_Carousel_PageIndicatorWidthSizeM: var(--_sap_m_Carousel_PageIndicatorWidthSizeS);
19
+ --_sap_m_Carousel_PageIndicatorWidthSizeL: var(--_sap_m_Carousel_PageIndicatorWidthSizeS);
20
+ --_sap_m_Carousel_PageIndicatorWidthSizeXL: var(--_sap_m_Carousel_PageIndicatorWidthSizeS);
21
+ --_sap_m_Carousel_PageIndicatorContainerPadding: 0.5rem;
22
+ --_sap_m_Carousel_BulletInactiveBackground: transparent;
23
+ --_sap_m_Carousel_BulletInactiveBorderColor: var(--sapContent_ForegroundBorderColor);
24
+ --_sap_m_Carousel_BulletActiveBackground: var(--sapContent_Selected_ForegroundColor);
25
+ --_sap_m_Carousel_BulletActiveBorder: var(--sapContent_Selected_ForegroundColor);
26
+ --_sap_m_Carousel_BulletInactiveWidth: 0.375rem;
27
+ --_sap_m_Carousel_BulletInactiveMargin: 0 0.25rem;
28
+ --_sap_m_Carousel_FocusBorderOffsetArrow: -0.3125rem;
29
+ --_sap_m_Carousel_ContrastFocusBorder: var(--sapContent_FocusWidth) solid var(--sapBackgroundColor);
30
+ }
@@ -19,7 +19,7 @@
19
19
  box-sizing: border-box;
20
20
  }
21
21
 
22
- .sapMDialog > header .sapMDialogTitleGroup .sapMDialogIcon.sapUiIcon {
22
+ .sapMDialog > .sapMDialogHeader .sapMDialogTitleGroup .sapMDialogIcon.sapUiIcon {
23
23
  font-size: 1rem;
24
24
  }
25
25
 
@@ -34,7 +34,7 @@
34
34
  /* buttons on phone must be to the right side (in LTR mode) */
35
35
  html.sap-phone .sapMDialog {
36
36
 
37
- & > footer .sapMFooter-CTX {
37
+ & > .sapMDialogFooter .sapMFooter-CTX {
38
38
  justify-content: flex-end;
39
39
  }
40
40
  }
@@ -45,18 +45,18 @@ html.sap-phone .sapMDialog {
45
45
 
46
46
  .sapMDialog {
47
47
 
48
- header .sapMBarLeft,
49
- header .sapMBarPH {
48
+ .sapMDialogHeader .sapMBarLeft,
49
+ .sapMDialogHeader .sapMBarPH {
50
50
  padding-left: 1rem;
51
51
  }
52
52
 
53
- header .sapMBarRight,
54
- header .sapMBarPH {
53
+ .sapMDialogHeader .sapMBarRight,
54
+ .sapMDialogHeader .sapMBarPH {
55
55
  padding-right: 1rem;
56
56
  }
57
57
 
58
- header .sapMTB,
59
- footer .sapMTB {
58
+ .sapMDialogHeader .sapMTB,
59
+ .sapMDialogFooter .sapMTB {
60
60
  padding: 0 1rem;
61
61
  }
62
62
  }
@@ -30,10 +30,6 @@ html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
30
30
 
31
31
  &:focus {
32
32
  outline: 0.125rem dotted var(--sapContent_FocusColor);
33
-
34
- &:hover:not(:active) {
35
- text-decoration: none;
36
- }
37
33
  }
38
34
 
39
35
  &.sapMLnkSubtle {
@@ -35,14 +35,12 @@ html.sap-desktop .sapMObjectNumberActive:focus {
35
35
  left: 1px;
36
36
  bottom: -1px;
37
37
  right: 1px;
38
- outline: 2px dotted var(--sapContent_FocusColor);
38
+ outline: 0.125rem dotted var(--sapContent_FocusColor);
39
39
  }
40
40
 
41
41
  &.sapMObjectNumberInverted .sapMObjectNumberInner::after {
42
+ outline-offset: -0.125rem;
42
43
  top: 0.125rem;
43
- left: 0.125rem;
44
- bottom: 0.0625rem;
45
- right: 0.125rem;
46
44
  outline: 0.125rem dotted var(--sapContent_FocusColor);
47
45
  }
48
46
 
@@ -56,11 +54,11 @@ html.sap-desktop .sapMObjectNumberActive:focus {
56
54
  }
57
55
 
58
56
  &.sapMObjectNumberInverted .sapMObjectNumberInner::after {
59
- top: 3px;
60
- left: 3px;
57
+ top: 2px;
58
+ left: 2px;
61
59
  bottom: 3px;
62
- right: 3px;
63
- outline: 2px dotted var(--sapContent_ContrastFocusColor);
60
+ right: 2px;
61
+ outline: 0.125rem dotted var(--sapContent_ContrastFocusColor);
64
62
  }
65
63
  }
66
64
  }