@openui5/themelib_sap_horizon 1.128.0 → 1.130.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 (89) hide show
  1. package/THIRDPARTY.txt +2 -2
  2. package/package.json +18 -18
  3. package/src/sap/m/themes/sap_horizon/ActionSelect.less +13 -13
  4. package/src/sap/m/themes/sap_horizon/ActionSheet.less +12 -12
  5. package/src/sap/m/themes/sap_horizon/Avatar.less +12 -10
  6. package/src/sap/m/themes/sap_horizon/Bar.less +11 -9
  7. package/src/sap/m/themes/sap_horizon/Carousel.less +2 -0
  8. package/src/sap/m/themes/sap_horizon/ColorPalette.less +43 -16
  9. package/src/sap/m/themes/sap_horizon/ColumnListItem.less +5 -5
  10. package/src/sap/m/themes/sap_horizon/ComboBoxBase.less +3 -3
  11. package/src/sap/m/themes/sap_horizon/Dialog.less +29 -20
  12. package/src/sap/m/themes/sap_horizon/DynamicDateRange.less +1 -1
  13. package/src/sap/m/themes/sap_horizon/GenericTile.less +21 -21
  14. package/src/sap/m/themes/sap_horizon/IconTabBar.less +279 -212
  15. package/src/sap/m/themes/sap_horizon/Link.less +13 -10
  16. package/src/sap/m/themes/sap_horizon/RatingIndicator.less +0 -2
  17. package/src/sap/m/themes/sap_horizon/SlideTile.less +10 -10
  18. package/src/sap/m/themes/sap_horizon/SplitButton.less +18 -0
  19. package/src/sap/m/themes/sap_horizon/Token.less +27 -7
  20. package/src/sap/m/themes/sap_horizon_dark/ActionSelect.less +11 -10
  21. package/src/sap/m/themes/sap_horizon_dark/ActionSheet.less +11 -11
  22. package/src/sap/m/themes/sap_horizon_dark/Avatar.less +12 -10
  23. package/src/sap/m/themes/sap_horizon_dark/Bar.less +12 -10
  24. package/src/sap/m/themes/sap_horizon_dark/Carousel.less +2 -0
  25. package/src/sap/m/themes/sap_horizon_dark/ColorPalette.less +42 -16
  26. package/src/sap/m/themes/sap_horizon_dark/ColumnListItem.less +5 -5
  27. package/src/sap/m/themes/sap_horizon_dark/ComboBoxBase.less +3 -3
  28. package/src/sap/m/themes/sap_horizon_dark/Dialog.less +29 -21
  29. package/src/sap/m/themes/sap_horizon_dark/DynamicDateRange.less +1 -1
  30. package/src/sap/m/themes/sap_horizon_dark/GenericTile.less +24 -24
  31. package/src/sap/m/themes/sap_horizon_dark/IconTabBar.less +217 -158
  32. package/src/sap/m/themes/sap_horizon_dark/Link.less +13 -10
  33. package/src/sap/m/themes/sap_horizon_dark/SlideTile.less +10 -10
  34. package/src/sap/m/themes/sap_horizon_dark/SplitButton.less +18 -0
  35. package/src/sap/m/themes/sap_horizon_dark/Token.less +28 -8
  36. package/src/sap/m/themes/sap_horizon_hcb/ActionSelect.less +4 -3
  37. package/src/sap/m/themes/sap_horizon_hcb/ActionSheet.less +12 -12
  38. package/src/sap/m/themes/sap_horizon_hcb/Avatar.less +9 -8
  39. package/src/sap/m/themes/sap_horizon_hcb/Bar.less +12 -10
  40. package/src/sap/m/themes/sap_horizon_hcb/Carousel.less +2 -0
  41. package/src/sap/m/themes/sap_horizon_hcb/ColorPalette.less +25 -15
  42. package/src/sap/m/themes/sap_horizon_hcb/ColumnListItem.less +5 -5
  43. package/src/sap/m/themes/sap_horizon_hcb/ComboBoxBase.less +8 -8
  44. package/src/sap/m/themes/sap_horizon_hcb/Dialog.less +22 -13
  45. package/src/sap/m/themes/sap_horizon_hcb/DynamicDateRange.less +1 -1
  46. package/src/sap/m/themes/sap_horizon_hcb/GenericTile.less +5 -5
  47. package/src/sap/m/themes/sap_horizon_hcb/IconTabBar.less +90 -79
  48. package/src/sap/m/themes/sap_horizon_hcb/Link.less +12 -9
  49. package/src/sap/m/themes/sap_horizon_hcb/SlideTile.less +6 -6
  50. package/src/sap/m/themes/sap_horizon_hcb/Token.less +29 -4
  51. package/src/sap/m/themes/sap_horizon_hcw/ActionSelect.less +4 -3
  52. package/src/sap/m/themes/sap_horizon_hcw/ActionSheet.less +12 -12
  53. package/src/sap/m/themes/sap_horizon_hcw/Avatar.less +9 -8
  54. package/src/sap/m/themes/sap_horizon_hcw/Bar.less +12 -10
  55. package/src/sap/m/themes/sap_horizon_hcw/Carousel.less +2 -0
  56. package/src/sap/m/themes/sap_horizon_hcw/ColorPalette.less +25 -15
  57. package/src/sap/m/themes/sap_horizon_hcw/ColumnListItem.less +5 -6
  58. package/src/sap/m/themes/sap_horizon_hcw/ComboBoxBase.less +7 -7
  59. package/src/sap/m/themes/sap_horizon_hcw/Dialog.less +22 -13
  60. package/src/sap/m/themes/sap_horizon_hcw/DynamicDateRange.less +1 -1
  61. package/src/sap/m/themes/sap_horizon_hcw/GenericTile.less +6 -6
  62. package/src/sap/m/themes/sap_horizon_hcw/IconTabBar.less +95 -83
  63. package/src/sap/m/themes/sap_horizon_hcw/Link.less +12 -9
  64. package/src/sap/m/themes/sap_horizon_hcw/SlideTile.less +6 -6
  65. package/src/sap/m/themes/sap_horizon_hcw/Token.less +29 -4
  66. package/src/sap/ui/core/themes/sap_horizon/.theme +1 -1
  67. package/src/sap/ui/core/themes/sap_horizon/base.less +515 -7
  68. package/src/sap/ui/core/themes/sap_horizon/global.less +453 -7
  69. package/src/sap/ui/core/themes/sap_horizon_dark/.theme +1 -1
  70. package/src/sap/ui/core/themes/sap_horizon_dark/base.less +517 -9
  71. package/src/sap/ui/core/themes/sap_horizon_dark/global.less +453 -6
  72. package/src/sap/ui/core/themes/sap_horizon_hcb/.theme +1 -1
  73. package/src/sap/ui/core/themes/sap_horizon_hcb/base.less +524 -16
  74. package/src/sap/ui/core/themes/sap_horizon_hcb/global.less +453 -6
  75. package/src/sap/ui/core/themes/sap_horizon_hcw/.theme +1 -1
  76. package/src/sap/ui/core/themes/sap_horizon_hcw/base.less +521 -13
  77. package/src/sap/ui/core/themes/sap_horizon_hcw/global.less +453 -6
  78. package/src/sap/ui/dt/themes/sap_horizon/ContextMenu.less +0 -14
  79. package/src/sap/ui/dt/themes/sap_horizon_dark/ContextMenu.less +0 -14
  80. package/src/sap/ui/dt/themes/sap_horizon_hcb/ContextMenu.less +0 -10
  81. package/src/sap/ui/dt/themes/sap_horizon_hcw/ContextMenu.less +0 -10
  82. package/src/sap/ui/integration/themes/sap_horizon/library.source.less +0 -1
  83. package/src/sap/ui/integration/themes/sap_horizon_dark/library.source.less +0 -1
  84. package/src/sap/ui/rta/themes/sap_horizon_dark/ChangeVisualization.less +0 -1
  85. package/src/sap/ui/rta/themes/sap_horizon_dark/Toolbar.adaptation.less +1 -1
  86. package/src/sap/ui/rta/themes/sap_horizon_hcb/ChangeVisualization.less +0 -1
  87. package/src/sap/ui/rta/themes/sap_horizon_hcw/ChangeVisualization.less +0 -1
  88. package/src/sap/ui/integration/themes/sap_horizon/Paginator.less +0 -5
  89. package/src/sap/ui/integration/themes/sap_horizon_dark/Paginator.less +0 -5
package/THIRDPARTY.txt CHANGED
@@ -6,7 +6,7 @@ The full text of all referenced licenses is appended at the end of this file.
6
6
 
7
7
  Library: sap.m:
8
8
 
9
- Component: purify.js, version: 2.3.8
9
+ Component: purify.js, version: 3.1.7
10
10
  Copyright: Mario Heiderich
11
11
  License: Apache-2.0
12
12
  License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
@@ -468,7 +468,7 @@ License: Apache-2.0
468
468
  License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
469
469
  Contained in: lib/jsdoc/ui5/plugin.js
470
470
 
471
- Component: SAP Theming Base Content, version: 11.16.1
471
+ Component: SAP Theming Base Content, version: 11.18.0
472
472
  Copyright: SAP SE or an SAP affiliate company and Theming Base Content contributors
473
473
  License: Apache-2.0
474
474
  License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openui5/themelib_sap_horizon",
3
- "version": "1.128.0",
3
+ "version": "1.130.0",
4
4
  "description": "OpenUI5 Theme Library sap_horizon",
5
5
  "author": "SAP SE (https://www.sap.com)",
6
6
  "license": "Apache-2.0",
@@ -14,22 +14,22 @@
14
14
  "url": "https://github.com/SAP/openui5.git"
15
15
  },
16
16
  "devDependencies": {
17
- "@openui5/sap.f": "1.128.0",
18
- "@openui5/sap.m": "1.128.0",
19
- "@openui5/sap.tnt": "1.128.0",
20
- "@openui5/sap.ui.codeeditor": "1.128.0",
21
- "@openui5/sap.ui.commons": "1.128.0",
22
- "@openui5/sap.ui.core": "1.128.0",
23
- "@openui5/sap.ui.dt": "1.128.0",
24
- "@openui5/sap.ui.fl": "1.128.0",
25
- "@openui5/sap.ui.mdc": "1.128.0",
26
- "@openui5/sap.ui.integration": "1.128.0",
27
- "@openui5/sap.ui.layout": "1.128.0",
28
- "@openui5/sap.ui.rta": "1.128.0",
29
- "@openui5/sap.ui.suite": "1.128.0",
30
- "@openui5/sap.ui.table": "1.128.0",
31
- "@openui5/sap.ui.unified": "1.128.0",
32
- "@openui5/sap.ui.ux3": "1.128.0",
33
- "@openui5/sap.uxap": "1.128.0"
17
+ "@openui5/sap.f": "1.130.0",
18
+ "@openui5/sap.m": "1.130.0",
19
+ "@openui5/sap.tnt": "1.130.0",
20
+ "@openui5/sap.ui.codeeditor": "1.130.0",
21
+ "@openui5/sap.ui.commons": "1.130.0",
22
+ "@openui5/sap.ui.core": "1.130.0",
23
+ "@openui5/sap.ui.dt": "1.130.0",
24
+ "@openui5/sap.ui.fl": "1.130.0",
25
+ "@openui5/sap.ui.mdc": "1.130.0",
26
+ "@openui5/sap.ui.integration": "1.130.0",
27
+ "@openui5/sap.ui.layout": "1.130.0",
28
+ "@openui5/sap.ui.rta": "1.130.0",
29
+ "@openui5/sap.ui.suite": "1.130.0",
30
+ "@openui5/sap.ui.table": "1.130.0",
31
+ "@openui5/sap.ui.unified": "1.130.0",
32
+ "@openui5/sap.ui.ux3": "1.130.0",
33
+ "@openui5/sap.uxap": "1.130.0"
34
34
  }
35
35
  }
@@ -8,8 +8,9 @@
8
8
  /* ----------------------------- */
9
9
 
10
10
  html.sap-desktop .sapMActionSelectPicker .sapMBtn {
11
+
11
12
  .sapMBtnInner {
12
- border-top: 1px solid @sapUiListBorderColor;
13
+ border-top: 1px solid var(--sapList_BorderColor);
13
14
  border-bottom: 0;
14
15
  border-left: 0;
15
16
  border-right: 0;
@@ -26,23 +27,22 @@ html.sap-desktop .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent .sapMBtn
26
27
  }
27
28
 
28
29
  html.sap-phone .sapMActionSelectPicker .sapMBtn .sapMBtnInner {
29
- border: none;
30
+ border: none;
30
31
  }
31
32
 
32
33
  html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent > .sapMBtn {
33
- border: 1px solid @sapUiListBorderColor;
34
- border-bottom: none;
34
+ border: 1px solid var(--sapList_BorderColor);
35
+ border-bottom: none;
35
36
  }
36
37
 
37
38
  html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent > .sapMBtn ~ .sapMBtn {
38
- border: 1px solid @sapUiListBorderColor;
39
+ border: 1px solid var(--sapList_BorderColor);
39
40
  }
40
41
 
41
42
  /* override standard buttons inside the action select */
42
-
43
43
  .sapMActionSelectPicker .sapMBtnDefault {
44
- background: @sapUiListBackground;
45
- border-color: @sapUiListBorderColor;
44
+ background: var(--sapList_Background);
45
+ border-color: var(--sapList_BorderColor);
46
46
 
47
47
  /* override the default text-shadow */
48
48
  text-shadow: none;
@@ -50,11 +50,11 @@ html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent > .sapMBtn
50
50
 
51
51
  .sapMActionSelectPicker .sapMBtn,
52
52
  .sapMActionSelectPicker .sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
53
- border-color: @sapUiListBorderColor;
53
+ border-color: var(--sapList_BorderColor);
54
54
  }
55
55
 
56
56
  html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled) .sapMBtnDefault:not(.sapMBtnActive):hover {
57
- background: @sapUiListHoverBackground;
57
+ background: var(--sapList_Hover_Background);
58
58
  }
59
59
 
60
60
  /* ======================================================================== */
@@ -75,18 +75,18 @@ html.sap-desktop .sapUiSizeCompact.sapMActionSelectPicker .sapMBtnInner {
75
75
  height: 2rem;
76
76
  border-radius: 0;
77
77
  border: 0;
78
- border-top: 1px solid @sapUiListBorderColor;
78
+ border-top: 1px solid var(--sapList_BorderColor);
79
79
 
80
80
  .sapMBtnContent {
81
81
  line-height: 2rem;
82
82
  }
83
83
  }
84
84
 
85
- .sapMActionSelectPicker.sapMSltPicker-CTX .sapMSelectListItemBaseSelected.sapMActionSelectItemWithoutFocus:after {
85
+ .sapMActionSelectPicker.sapMSltPicker-CTX .sapMSelectListItemBaseSelected.sapMActionSelectItemWithoutFocus::after {
86
86
  display: none;
87
87
  }
88
88
 
89
- html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled):focus > .sapMBtnInner:before {
89
+ html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled):focus > .sapMBtnInner::before {
90
90
  border-radius: 0;
91
91
  left: 0.125rem;
92
92
  top: 0.125rem;
@@ -4,26 +4,26 @@
4
4
  /* ================================== */
5
5
 
6
6
  .sapMActionSheetPopover.sapMPopover {
7
- box-shadow: @sapUiContentShadow2;
7
+ box-shadow: var(--sapContent_Shadow2);
8
8
  }
9
9
 
10
10
  .sapMActionSheetDialog .sapMBar.sapMHeader-CTX > .sapMBarMiddle > .sapMBarPH > .sapMDialogTitle {
11
- color: @sapUiPageHeaderTextColor;
12
- font-size: @sapMFontHeader5Size;
13
- font-family: @sapFontHeaderFamily;
11
+ color: var(--sapPageHeader_TextColor);
12
+ font-size: var(--sapFontHeader5Size);
13
+ font-family: var(--sapFontHeaderFamily);
14
14
  }
15
15
 
16
16
  .sapMDialog.sapMActionSheetDialog {
17
- background-color: @sapUiPageHeaderBackground;
18
- border-top-left-radius: @sapUiElementBorderCornerRadius;
19
- border-top-right-radius: @sapUiElementBorderCornerRadius;
20
- box-shadow: @sapUiContentShadow3;
17
+ background-color: var(--sapPageHeader_Background);
18
+ border-top-left-radius: var(--sapElement_BorderCornerRadius);
19
+ border-top-right-radius: var(--sapElement_BorderCornerRadius);
20
+ box-shadow: var(--sapContent_Shadow3);
21
21
 
22
22
  &.sapMDialogPhone .sapMIBar.sapMHeader-CTX {
23
- box-shadow: @sapUiContentHeaderShadow;
24
- background-color: @sapUiPageHeaderBackground;
25
- border-top-left-radius: @sapUiElementBorderCornerRadius;
26
- border-top-right-radius: @sapUiElementBorderCornerRadius;
23
+ box-shadow: var(--sapContent_HeaderShadow);
24
+ background-color: var(--sapPageHeader_Background);
25
+ border-top-left-radius: var(--sapElement_BorderCornerRadius);
26
+ border-top-right-radius: var(--sapElement_BorderCornerRadius);
27
27
  }
28
28
 
29
29
  &.sapUiPopupWithPadding:not(.sapUiNoContentPadding) .sapMDialogScrollCont {
@@ -10,10 +10,10 @@
10
10
  @_sap_m_Avatar_Font_Size_XS: 1rem;
11
11
 
12
12
  .sapFAvatarSquare {
13
- border-radius: @sapUiElementBorderCornerRadius;
13
+ border-radius: var(--sapElement_BorderCornerRadius);
14
14
 
15
15
  .sapFAvatarImageHolder {
16
- border-radius: @sapUiElementBorderCornerRadius;
16
+ border-radius: var(--sapElement_BorderCornerRadius);
17
17
  }
18
18
  }
19
19
 
@@ -22,23 +22,24 @@
22
22
  }
23
23
 
24
24
  .sapFAvatarFocusable.sapMAvatarPressed {
25
- box-shadow: 0px 0px 0px @sapUiButtonBorderWidth @sapUiButtonSelectedBorderColor;
25
+ box-shadow: 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Selected_BorderColor);
26
26
 
27
27
  &:hover {
28
- box-shadow: 0px 0px 0px @sapUiButtonBorderWidth @sapUiButtonSelectedHoverBorderColor;
28
+ box-shadow: 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Selected_Hover_BorderColor);
29
29
  }
30
30
  }
31
31
 
32
32
  .sapFAvatarFocusable:focus {
33
- outline-offset: .125rem;
33
+ outline-offset: 0.125rem;
34
+
34
35
  &.sapFAvatarSquare {
35
- outline-offset: .125rem;
36
+ outline-offset: 0.125rem;
36
37
  }
37
38
  }
38
39
 
39
40
  .sapFAvatarColorTileIcon {
40
- background-color: @sapUiTileBackground;
41
- color: @sapUiTileIconColor;
41
+ background-color: var(--sapTile_Background);
42
+ color: var(--sapTile_IconColor);
42
43
 
43
44
  .sapFAvatarInitialsHolder {
44
45
  color: currentColor;
@@ -46,8 +47,9 @@
46
47
  }
47
48
 
48
49
  .sapFAvatarColorPlaceholder {
49
- background-color: @sapUiContentImagePlaceholderBackground;
50
- color: @sapUiContentImagePlaceholderForegroundColor;;
50
+ background-color: var(--sapContent_ImagePlaceholderBackground);
51
+ color: var(--sapContent_ImagePlaceholderForegroundColor);
52
+
51
53
  .sapFAvatarInitialsHolder {
52
54
  color: currentColor;
53
55
  }
@@ -7,7 +7,7 @@
7
7
  text-shadow: none;
8
8
  }
9
9
 
10
- .sapMBarLeft{
10
+ .sapMBarLeft {
11
11
  padding-left: 1rem;
12
12
  padding-right: 0.25rem;
13
13
  }
@@ -24,25 +24,25 @@
24
24
 
25
25
  .sapMBar .sapMBarRight.sapMBarContainer > *:first-child,
26
26
  .sapMBar .sapMBarLeft.sapMBarContainer > *:first-child,
27
- .sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child{
27
+ .sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child {
28
28
  margin: 0 0.25rem 0 0;
29
29
  }
30
30
 
31
31
  .sapMBar .sapMBarRight.sapMBarContainer > *:last-child,
32
32
  .sapMBar .sapMBarLeft.sapMBarContainer > *:last-child,
33
- .sapMBar .sapMBarMiddle .sapMBarContainer > *:last-child{
33
+ .sapMBar .sapMBarMiddle .sapMBarContainer > *:last-child {
34
34
  margin: 0 0 0 0.25rem;
35
35
  }
36
36
 
37
37
  .sapMBar .sapMBarRight.sapMBarContainer > *:not(:first-child):not(:last-child),
38
38
  .sapMBar .sapMBarLeft.sapMBarContainer > *:not(:first-child):not(:last-child),
39
- .sapMBar .sapMBarMiddle .sapMBarContainer > *:not(:first-child):not(:last-child){
39
+ .sapMBar .sapMBarMiddle .sapMBarContainer > *:not(:first-child):not(:last-child) {
40
40
  margin: 0 0.5rem;
41
41
  }
42
42
 
43
43
  .sapMBar .sapMBarRight.sapMBarContainer > *:first-child:last-child,
44
44
  .sapMBar .sapMBarLeft.sapMBarContainer > *:first-child:last-child,
45
- .sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child:last-child{
45
+ .sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child:last-child {
46
46
  margin: 0;
47
47
  }
48
48
 
@@ -51,7 +51,9 @@
51
51
  line-height: 2.75rem;
52
52
  }
53
53
 
54
- .sapMBarLeft, .sapMBarRight, .sapMBarPH {
54
+ .sapMBarLeft,
55
+ .sapMBarRight,
56
+ .sapMBarPH {
55
57
  height: 2.75rem;
56
58
  line-height: 2.75rem;
57
59
  }
@@ -59,14 +61,14 @@
59
61
  /* in Master page the bar should have different color */
60
62
  .sapMSplitContainerMaster .sapMIBar .sapMHeader-CTX,
61
63
  .sapMSplitContainerMaster .sapMIBar.sapMSubHeader-CTX {
62
- background-color: @sapUiGroupContentBackground;
64
+ background-color: var(--sapGroup_ContentBackground);
63
65
  }
64
66
 
65
67
  /* in Master page the bar should have a different color shadow only if we don't have subHeader (e.g. another bar) */
66
68
  .sapMSplitContainerMaster .sapMIBar .sapMHeader-CTX:only-of-type,
67
69
  /* in Master page the bar should have a different color shadow */
68
70
  .sapMSplitContainerMaster .sapMIBar.sapMSubHeader-CTX {
69
- box-shadow: inset 0 -0.0625rem @sapUiGroupContentBorderColor;
71
+ box-shadow: inset 0 -0.0625rem var(--sapGroup_ContentBorderColor);
70
72
  }
71
73
 
72
74
  /* Bar Title Alignment */
@@ -79,5 +81,5 @@ html[data-sap-ui-browser^="ff"].sap-desktop .sapMBarTitleAlignAuto .sapMBarPH {
79
81
  }
80
82
 
81
83
  .sapMIBar-CTX.sapMFooter-CTX {
82
- border-top: 0.0625rem solid @sapUiPageFooterBorderColor;
84
+ border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
83
85
  }
@@ -10,6 +10,8 @@
10
10
  @_sap_m_Carousel_BackgroundColorSolid: var(--sapGroup_ContentBackground);
11
11
  @_sap_m_Carousel_BackgroundColorTranslucent: var(--sapBackgroundColor);
12
12
  @_sap_m_Carousel_MinWidth: 15.5rem;
13
+ @_sap_m_Carousel_PageIndicatorBarHeight: 2.75rem;
14
+ @_sap_m_Carousel_BottomArrowsOffset: calc(~'2.75rem + 1px');
13
15
  @_sap_m_Carousel_ControlsNoArrowsHeight: 2.75rem;
14
16
  @_sap_m_Carousel_NumericIndicatorTextColor: var(--sapPageFooter_TextColor);
15
17
  @_sap_m_Carousel_PrevAndNextSize: 2.125rem;
@@ -8,68 +8,80 @@
8
8
 
9
9
  html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare {
10
10
  border-radius: 0.25rem;
11
+
11
12
  &:hover,
12
13
  &.sapMColorPaletteSquareSelected {
13
14
  border-radius: 0.4375rem;
14
15
  margin: 0.0625rem;
15
16
  width: 2.25rem;
16
17
  height: 2.25rem;
18
+
17
19
  & > div {
18
20
  border-radius: 0.375rem;
19
21
  }
20
22
  }
23
+
21
24
  div {
22
25
  border-radius: 0.1875rem;
23
26
  }
24
27
  }
25
28
 
26
29
  .sap-desktop .sapMColorPalette .sapMBtn:focus {
27
- &:after {
28
- border-color: @sapUiContentFocusColor;
30
+
31
+ &::after {
32
+ border-color: var(--sapContent_FocusColor);
29
33
  }
30
34
  }
31
35
 
32
36
  .sap-desktop .sapContrast,
33
37
  .sap-desktop.sapContrast {
38
+
34
39
  .sapMColorPalette .sapMBtn {
35
- &:focus:after {
36
- border-color: @sapUiContentFocusColor;
40
+
41
+ &:focus::after {
42
+ border-color: var(--sapContent_FocusColor);
37
43
 
38
44
  }
45
+
39
46
  &:active,
40
47
  > .sapMBtnActive,
41
48
  &:hover > .sapMBtnActive,
42
49
  &:active > .sapMBtnActive {
43
- color: @sapUiListTextColor;
50
+ color: var(--sapList_TextColor);
44
51
  }
45
52
  }
46
53
  }
47
54
 
48
55
  html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare:focus {
49
- &:after {
56
+
57
+ &::after {
50
58
  display: none;
51
59
  }
52
- &:before {
53
- border: 0.125rem solid @sapUiContentFocusColor;
60
+
61
+ &::before {
62
+ border: 0.125rem solid var(--sapContent_FocusColor);
54
63
  border-radius: 0.4375rem;
55
64
  top: -0.3125rem;
56
65
  left: -0.3125rem;
57
66
  bottom: -0.3125rem;
58
67
  right: -0.3125rem;
59
68
  }
69
+
60
70
  &:hover,
61
71
  &.sapMColorPaletteSquareSelected {
62
- &:after {
72
+
73
+ &::after {
63
74
  display: block;
64
- border: 0.0625rem solid @sapUiContentContrastFocusColor;
75
+ border: 0.0625rem solid var(--sapContent_ContrastFocusColor);
65
76
  border-radius: 0.3125rem;
66
77
  top: 0.0625rem;
67
78
  left: 0.0625rem;
68
79
  bottom: 0.0625rem;
69
80
  right: 0.0625rem;
70
81
  }
71
- &:before {
72
- border: 0.125rem solid @sapUiContentFocusColor;
82
+
83
+ &::before {
84
+ border: 0.125rem solid var(--sapContent_FocusColor);
73
85
  border-radius: 0.4375rem;
74
86
  top: -0.0625rem;
75
87
  left: -0.0625rem;
@@ -81,38 +93,50 @@ html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare:focus {
81
93
 
82
94
  html:not(.sap-phone) .sapMColorPalette,
83
95
  .sapMColorPalette {
96
+
84
97
  .sapMBtn {
98
+
85
99
  &:focus {
100
+
86
101
  .sap-desktop & {
87
- &:after {
102
+
103
+ &::after {
88
104
  border-radius: 0.5rem;
89
- border: 0.125rem solid @sapUiContentFocusColor;
105
+ border: 0.125rem solid var(--sapContent_FocusColor);
90
106
  }
91
107
  }
92
108
  }
109
+
93
110
  .sapMBtnInner {
94
111
  height: 2.75rem;
112
+
95
113
  .sapMBtnContent {
96
114
  line-height: 2.75rem;
97
115
  }
116
+
98
117
  &.sapMBtnText {
99
118
  padding: 0;
100
119
  }
101
120
  }
102
121
  }
122
+
103
123
  .sapMBtnInner {
104
124
  border-radius: 0;
105
125
  }
106
126
  }
107
127
 
108
128
  html:not(.sap-phone) .sapUiSizeCompact .sapMColorPalette {
129
+
109
130
  .sapMBtn .sapMBtnInner {
110
131
  height: 2rem;
132
+
111
133
  .sapMBtnContent {
112
134
  line-height: 2rem;
113
135
  }
114
136
  }
137
+
115
138
  .sapMColorPaletteSquare {
139
+
116
140
  &:hover,
117
141
  &.sapMColorPaletteSquareSelected {
118
142
  margin: 0.0625rem;
@@ -120,7 +144,8 @@ html:not(.sap-phone) .sapUiSizeCompact .sapMColorPalette {
120
144
  height: 1.625rem;
121
145
  }
122
146
  }
123
- .sapMColorPaletteSquare:focus:not(:hover):not(.sapMColorPaletteSquareSelected):before {
147
+
148
+ .sapMColorPaletteSquare:focus:not(:hover):not(.sapMColorPaletteSquareSelected)::before {
124
149
  top: -0.25rem;
125
150
  left: -0.25rem;
126
151
  bottom: -0.25rem;
@@ -128,13 +153,15 @@ html:not(.sap-phone) .sapUiSizeCompact .sapMColorPalette {
128
153
  }
129
154
  }
130
155
 
131
- html.sap-desktop .sapMColorPalette .sapMBtn:focus > .sapMFocusable:before {
156
+ html.sap-desktop .sapMColorPalette .sapMBtn:focus > .sapMFocusable::before {
132
157
  display: none;
133
158
  }
134
159
 
135
160
  .sap-phone .sapMColorPalette .sapMColorPaletteSquare {
161
+
136
162
  & > div {
137
163
  border-radius: 0.25rem;
164
+
138
165
  &:active {
139
166
  border-radius: 0.4375rem;
140
167
  }
@@ -10,19 +10,19 @@
10
10
  /* note: adding border-top to the sibling row is not suitable as the sibling row can be hidden and in such case the selection border is lost */
11
11
  .sapMTableTBody:not(.sapMListTblHasPopin) > .sapMLIBSelected,
12
12
  .sapMTableTBody.sapMListTblHasPopin > .sapMLIBSelected + .sapMListTblSubRow {
13
- box-shadow: inset 0px -0.0625rem @sapUiListSelectionBorderColor;
13
+ box-shadow: inset 0px -0.0625rem var(--sapList_SelectionBorderColor);
14
14
  }
15
15
 
16
16
  /* selection border indicator was not visible on the last row as the td elements within the last row have a bottom border */
17
17
  /* hence applying -0.125rem so that the selection border is visible */
18
18
  .sapMTableTBody:not(.sapMListTblHasPopin) > .sapMLIBSelected:last-child,
19
19
  .sapMTableTBody.sapMListTblHasPopin > .sapMLIBSelected + .sapMListTblSubRow:last-child {
20
- box-shadow: inset 0px -0.125rem @sapUiListSelectionBorderColor;
20
+ box-shadow: inset 0px -0.125rem var(--sapList_SelectionBorderColor);
21
21
  }
22
22
 
23
- // Safari work-around as box-shadow is not supported on the <tr> element,
24
- // hence adding the selection indicator box-shadow to the <td> element
23
+ /* Safari work-around as box-shadow is not supported on the <tr> element, */
24
+ /* hence adding the selection indicator box-shadow to the <td> element */
25
25
  html[data-sap-ui-browser^="sf"] .sapMTableTBody:not(.sapMListTblHasPopin) > .sapMLIBSelected > td,
26
26
  html[data-sap-ui-browser^="sf"] .sapMTableTBody.sapMListTblHasPopin > .sapMLIBSelected + .sapMListTblSubRow > td {
27
- box-shadow: inset 0px -0.0625rem @sapUiListSelectionBorderColor;
27
+ box-shadow: inset 0px -0.0625rem var(--sapList_SelectionBorderColor);
28
28
  }
@@ -9,11 +9,11 @@
9
9
  box-shadow: none;
10
10
 
11
11
  &:active {
12
- background-color: @sapField_Focus_Background;
13
- box-shadow: @sapContent_Interaction_Shadow;
12
+ background-color: var(--sapField_Focus_Background);
13
+ box-shadow: var(--sapContent_Interaction_Shadow);
14
14
  }
15
15
  }
16
16
 
17
17
  .sapMInputBaseIconPressed .sapMComboBoxBaseClearIcon::before {
18
- color: @sapUiContentIconColor;
18
+ color: var(--sapContent_IconColor);
19
19
  }
@@ -3,27 +3,27 @@
3
3
  /* Horizon theme */
4
4
  /* ============================= */
5
5
 
6
- // ==========================================================================
7
- // Variables
8
- // ==========================================================================
6
+ /* ========================================================================== */
7
+ /* Variables */
8
+ /* ========================================================================== */
9
9
 
10
10
  @_sap_m_Dialog_VerticalMargin: 3%;
11
11
  @_sap_m_Dialog_BarHeight: 2.75rem;
12
12
  @_sap_m_Dialog_SubHeaderCompactHeight: 2.25rem;
13
13
 
14
- @_sap_m_Dialog_NoStateHeaderShadow: @sapUiContentHeaderShadow;
15
- @_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.0625rem @sapUiSuccessBorder, @sapUiContentHeaderShadow;
16
- @_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.0625rem @sapUiErrorBorder, @sapUiContentHeaderShadow;
17
- @_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.0625rem @sapUiWarningBorder, @sapUiContentHeaderShadow;
18
- @_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.0625rem @sapUiInformationBorder, @sapUiContentHeaderShadow;
14
+ @_sap_m_Dialog_NoStateHeaderShadow: var(--sapContent_HeaderShadow);
15
+ @_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.0625rem var(--sapSuccessBorderColor), var(--sapContent_HeaderShadow);
16
+ @_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.0625rem var(--sapErrorBorderColor), var(--sapContent_HeaderShadow);
17
+ @_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.0625rem var(--sapWarningBorderColor), var(--sapContent_HeaderShadow);
18
+ @_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.0625rem var(--sapInformationBorderColor), var(--sapContent_HeaderShadow);
19
19
 
20
20
  @_sap_m_Dialog_HeaderFocusBorderBottomOffset: 0.125rem;
21
21
  @_sap_m_Dialog_HeaderFocusBorderTopOffset: 0.0625rem;
22
22
  @_sap_m_Dialog_HeaderFocusBorderLeftOffset: 0.0625rem;
23
23
  @_sap_m_Dialog_HeaderFocusBorderRightOffset: 0.0625rem;
24
- @_sap_m_Dialog_HeaderFocusBorderRadius: @sapUiElementBorderCornerRadius;
24
+ @_sap_m_Dialog_HeaderFocusBorderRadius: var(--sapElement_BorderCornerRadius);
25
25
 
26
- // This parameter is used in sap.m.Select. TODO: remove it when it is removed from there.
26
+ /* This parameter is used in sap.m.Select. TODO: remove it when it is removed from there. */
27
27
  @_sap_m_Dialog_HeaderShadowColor: darken(@sapUiGroupContentBackground, 8);
28
28
 
29
29
  .sapMDialogSubHeader .sapMIBar {
@@ -41,21 +41,23 @@
41
41
  }
42
42
 
43
43
  .sapMDialogTitleGroup {
44
- z-index: 3; // to hide the shadow from the header when there is sub-header
44
+ z-index: 3; /* to hide the shadow from the header when there is sub-header */
45
45
  }
46
46
 
47
- // buttons on phone must be to the right side (in LTR mode)
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
51
  justify-content: flex-end;
51
52
  }
52
53
  }
53
54
 
54
- // ==========================================================================
55
- // header, sub-header, footer
56
- // ==========================================================================
55
+ /* ========================================================================== */
56
+ /* header, sub-header, footer */
57
+ /* ========================================================================== */
57
58
 
58
59
  .sapMDialog {
60
+
59
61
  header .sapMBarLeft,
60
62
  header .sapMBarPH {
61
63
  padding-left: 1rem;
@@ -72,11 +74,17 @@ html.sap-phone .sapMDialog {
72
74
  }
73
75
  }
74
76
 
75
- // Responsive paddings
76
- .sapMDialogTitleGroup, .sapMDialogSubHeader {
77
- .sapUi-Std-PaddingS, .sapUi-Std-PaddingM,
78
- .sapUi-Std-PaddingL, .sapUi-Std-PaddingXL {
77
+ /* Responsive paddings */
78
+ .sapMDialogTitleGroup,
79
+ .sapMDialogSubHeader {
80
+
81
+ .sapUi-Std-PaddingS,
82
+ .sapUi-Std-PaddingM,
83
+ .sapUi-Std-PaddingL,
84
+ .sapUi-Std-PaddingXL {
85
+
79
86
  &.sapMIBar {
87
+
80
88
  .sapMBarMiddle .sapMBarPH {
81
89
  padding-left: 0;
82
90
  padding-right: 0;
@@ -102,6 +110,7 @@ html.sap-phone .sapMDialog {
102
110
  }
103
111
 
104
112
  .sapMDialog:not(.sapUiResponsiveContentPadding):not(.sapUiContentPadding) {
113
+
105
114
  &.sapMDialog-NoHeader .sapMDialogScroll {
106
115
  padding-top: 0.25rem;
107
116
 
@@ -117,4 +126,4 @@ html.sap-phone .sapMDialog {
117
126
  padding-bottom: 0;
118
127
  }
119
128
  }
120
- }
129
+ }
@@ -4,7 +4,7 @@
4
4
  /* ======================================= */
5
5
 
6
6
  .sapUiIcon.sapMDDRDateOption {
7
- color: @sapUiButtonActiveTextColor;
7
+ color: var(--sapButton_Active_TextColor);
8
8
  }
9
9
 
10
10
  .sapMDynamicDateRangePopover section > .sapMLabel {