@openui5/themelib_sap_horizon 1.108.20 → 1.108.22

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 (61) hide show
  1. package/.reuse/dep5 +0 -5
  2. package/THIRDPARTY.txt +0 -6
  3. package/package.json +18 -18
  4. package/src/sap/f/themes/sap_horizon/AvatarGroup.less +83 -25
  5. package/src/sap/f/themes/sap_horizon/ShellBar.less +10 -4
  6. package/src/sap/f/themes/sap_horizon_dark/AvatarGroup.less +82 -25
  7. package/src/sap/f/themes/sap_horizon_dark/ShellBar.less +10 -4
  8. package/src/sap/m/themes/sap_horizon/Avatar.less +2 -2
  9. package/src/sap/m/themes/sap_horizon/Breadcrumbs.less +44 -3
  10. package/src/sap/m/themes/sap_horizon/Button.less +16 -4
  11. package/src/sap/m/themes/sap_horizon/IconTabBar.less +0 -1
  12. package/src/sap/m/themes/sap_horizon/MenuButton.less +22 -4
  13. package/src/sap/m/themes/sap_horizon/ObjectNumber.less +107 -17
  14. package/src/sap/m/themes/sap_horizon/ObjectStatus.less +243 -20
  15. package/src/sap/m/themes/sap_horizon/ProgressIndicator.less +4 -0
  16. package/src/sap/m/themes/sap_horizon/RangeSlider.less +6 -8
  17. package/src/sap/m/themes/sap_horizon/SegmentedButton.less +133 -11
  18. package/src/sap/m/themes/sap_horizon/Select.less +8 -4
  19. package/src/sap/m/themes/sap_horizon/Slider.less +18 -22
  20. package/src/sap/m/themes/sap_horizon/SplitButton.less +73 -23
  21. package/src/sap/m/themes/sap_horizon_dark/Breadcrumbs.less +42 -0
  22. package/src/sap/m/themes/sap_horizon_dark/Button.less +16 -4
  23. package/src/sap/m/themes/sap_horizon_dark/IconTabBar.less +0 -1
  24. package/src/sap/m/themes/sap_horizon_dark/MenuButton.less +18 -3
  25. package/src/sap/m/themes/sap_horizon_dark/ObjectNumber.less +107 -17
  26. package/src/sap/m/themes/sap_horizon_dark/ObjectStatus.less +243 -20
  27. package/src/sap/m/themes/sap_horizon_dark/ProgressIndicator.less +4 -0
  28. package/src/sap/m/themes/sap_horizon_dark/RangeSlider.less +28 -8
  29. package/src/sap/m/themes/sap_horizon_dark/SegmentedButton.less +133 -11
  30. package/src/sap/m/themes/sap_horizon_dark/Select.less +8 -3
  31. package/src/sap/m/themes/sap_horizon_dark/Slider.less +18 -21
  32. package/src/sap/m/themes/sap_horizon_dark/SplitButton.less +73 -23
  33. package/src/sap/m/themes/sap_horizon_hcb/Breadcrumbs.less +35 -0
  34. package/src/sap/m/themes/sap_horizon_hcb/CheckBox.less +5 -1
  35. package/src/sap/m/themes/sap_horizon_hcb/MenuButton.less +4 -0
  36. package/src/sap/m/themes/sap_horizon_hcb/ObjectNumber.less +11 -14
  37. package/src/sap/m/themes/sap_horizon_hcb/ObjectStatus.less +124 -13
  38. package/src/sap/m/themes/sap_horizon_hcb/ProgressIndicator.less +4 -0
  39. package/src/sap/m/themes/sap_horizon_hcb/RangeSlider.less +4 -6
  40. package/src/sap/m/themes/sap_horizon_hcb/SegmentedButton.less +1 -1
  41. package/src/sap/m/themes/sap_horizon_hcb/Slider.less +20 -46
  42. package/src/sap/m/themes/sap_horizon_hcw/Breadcrumbs.less +35 -0
  43. package/src/sap/m/themes/sap_horizon_hcw/CheckBox.less +5 -1
  44. package/src/sap/m/themes/sap_horizon_hcw/MenuButton.less +4 -0
  45. package/src/sap/m/themes/sap_horizon_hcw/ObjectNumber.less +11 -14
  46. package/src/sap/m/themes/sap_horizon_hcw/ObjectStatus.less +124 -13
  47. package/src/sap/m/themes/sap_horizon_hcw/ProgressIndicator.less +4 -0
  48. package/src/sap/m/themes/sap_horizon_hcw/RangeSlider.less +4 -6
  49. package/src/sap/m/themes/sap_horizon_hcw/SegmentedButton.less +1 -1
  50. package/src/sap/m/themes/sap_horizon_hcw/Slider.less +20 -47
  51. package/src/sap/tnt/themes/sap_horizon_hcb/ToolHeader.less +2 -0
  52. package/src/sap/tnt/themes/sap_horizon_hcw/ToolHeader.less +2 -0
  53. package/src/sap/ui/commons/themes/sap_horizon/MenuButton.less +12 -0
  54. package/src/sap/ui/core/themes/sap_horizon/.theme +1 -1
  55. package/src/sap/ui/core/themes/sap_horizon/global.less +16 -16
  56. package/src/sap/ui/core/themes/sap_horizon_dark/.theme +1 -1
  57. package/src/sap/ui/core/themes/sap_horizon_dark/global.less +16 -16
  58. package/src/sap/ui/core/themes/sap_horizon_hcb/.theme +1 -1
  59. package/src/sap/ui/core/themes/sap_horizon_hcb/global.less +16 -16
  60. package/src/sap/ui/core/themes/sap_horizon_hcw/.theme +1 -1
  61. package/src/sap/ui/core/themes/sap_horizon_hcw/global.less +16 -16
@@ -19,10 +19,14 @@
19
19
  text-shadow: none;
20
20
  color: @sapUiButtonTextColor;
21
21
  border-top: 1px solid @sapUiButtonBorderColor;
22
- border-left: 1px solid @sapUiButtonBorderColor;
22
+ border-left: 1px solid transparent;
23
23
  border-bottom: 1px solid @sapUiButtonBorderColor;
24
24
  border-right: 1px solid transparent;
25
- background-color: @sapUiButtonBackground;
25
+ background-color: transparent;
26
+ margin-left: 1px;
27
+ margin-right: 1px;
28
+ margin-top: -1px;
29
+ margin-bottom: -1px;
26
30
  }
27
31
  &:not(.sapMSegBBtnMixed) .sapMImg {
28
32
  padding-left: 0.5625rem;
@@ -31,20 +35,39 @@
31
35
  }
32
36
  }
33
37
 
38
+ .sapMSegB .sapMSegBBtn .sapMSegBBtnInnerWrapper {
39
+ border-top: 1px solid @sapUiButtonBorderColor;
40
+ border-bottom: 1px solid @sapUiButtonBorderColor;
41
+ background-color: @sapUiButtonBackground;
42
+ }
43
+
34
44
  .sapMSegB .sapMSegBBtn {
35
45
  position: relative;
36
46
  }
37
47
 
38
- .sapMSegBBtn:first-child .sapMSegBBtnInner,
48
+ .sapMSegBBtn:first-child .sapMSegBBtnInner {
49
+ border-top-left-radius: @sapUiButtonBorderCornerRadius;
50
+ border-bottom-left-radius: @sapUiButtonBorderCornerRadius;
51
+ border-left: 1px solid @sapUiButtonBorderColor;
52
+ margin-left: -1px;
53
+ }
54
+
39
55
  .sapMSegBBtn:first-child .sapMSegBBtnInnerWrapper {
40
56
  border-top-left-radius: @sapUiButtonBorderCornerRadius;
41
57
  border-bottom-left-radius: @sapUiButtonBorderCornerRadius;
42
58
  }
43
59
 
44
- .sapMSegBBtn:last-child .sapMSegBBtnInner,
45
- .sapMSegBBtn:last-child .sapMSegBBtnInnerWrapper {
60
+ .sapMSegBBtn.sapMSegBtnLastVisibleButton .sapMSegBBtnInnerWrapper {
61
+ border-top-right-radius: @sapUiButtonBorderCornerRadius;
62
+ border-bottom-right-radius: @sapUiButtonBorderCornerRadius;
63
+ border-right: 1px solid @sapUiButtonBorderColor;
64
+ }
65
+
66
+ .sapMSegBBtn.sapMSegBtnLastVisibleButton .sapMSegBBtnInner{
46
67
  border-top-right-radius: @sapUiButtonBorderCornerRadius;
47
68
  border-bottom-right-radius: @sapUiButtonBorderCornerRadius;
69
+ border-right: 1px solid @sapUiButtonBorderColor;
70
+ margin-right: -1px;
48
71
  }
49
72
 
50
73
  html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
@@ -54,7 +77,7 @@ html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
54
77
  }
55
78
 
56
79
  html.sap-desktop .sapMSegBBtnFocusable.sapMSegBBtnSel:hover .sapMSegBBtnInner {
57
- border-color: inherit;
80
+ border-color: @sapUiButtonSelectedBorderColor;
58
81
  }
59
82
 
60
83
  html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
@@ -63,22 +86,121 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
63
86
 
64
87
  /* Custom focus outline: */
65
88
  html.sap-desktop {
66
- .sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
89
+ .sapMSegBBtn:first-child.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
67
90
  content: "";
68
91
  position: absolute;
69
92
  box-sizing: border-box;
70
93
  left: 0.125rem;
71
94
  top: 0.375rem;
95
+ right: 0.2rem;
96
+ bottom: 0.375rem;
97
+ pointer-events: none;
98
+ border: 0.125rem solid @sapUiContentFocusColor;
99
+ border-radius: 0.375rem;
100
+ }
101
+ .sapUiSizeCompact .sapMSegBBtn:first-child.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after,
102
+ &.sapUiSizeCompact .sapMSegBBtn:first-child.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
103
+ top: 0.3rem;
104
+ bottom: 0.3rem;
105
+ }
106
+ }
107
+
108
+ /* Custom focus outline: */
109
+ html.sap-desktop {
110
+ .sapMSegBBtn.sapMSegBtnLastVisibleButton.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
111
+ content: "";
112
+ position: absolute;
113
+ box-sizing: border-box;
114
+ left: 0.2rem;
115
+ top: 0.375rem;
72
116
  right: 0.125rem;
73
117
  bottom: 0.375rem;
74
118
  pointer-events: none;
75
119
  border: 0.125rem solid @sapUiContentFocusColor;
76
120
  border-radius: 0.375rem;
77
121
  }
122
+ .sapUiSizeCompact .sapMSegBBtn.sapMSegBtnLastVisibleButton.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after,
123
+ &.sapUiSizeCompact .sapMSegBBtn.sapMSegBtnLastVisibleButton.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
124
+ top: 0.3rem;
125
+ bottom: 0.3rem;
126
+ }
127
+ }
128
+
129
+ html.sap-desktop {
130
+ .sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
131
+ content: "";
132
+ position: absolute;
133
+ box-sizing: border-box;
134
+ left: 0.2rem;
135
+ top: 0.375rem;
136
+ right: 0.2rem;
137
+ bottom: 0.375rem;
138
+ pointer-events: none;
139
+ border: 0.125rem solid @sapUiContentFocusColor;
140
+ border-radius: 0.375rem;
141
+ }
78
142
  .sapUiSizeCompact .sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after,
79
143
  &.sapUiSizeCompact .sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
80
- top: 0.325rem;
81
- bottom: 0.325rem;
144
+ top: 0.3rem;
145
+ bottom: 0.3rem;
146
+ }
147
+ }
148
+
149
+ .sapMSegB.sapMSegBIcons {
150
+ .sapMSegBBtn.sapMSegBtnLastVisibleButton:not(.sapMSegBBtnMixed) .sapMSegBBtnInner {
151
+ margin-right: -1px;
152
+ }
153
+ }
154
+
155
+ .sapMSegB.sapMSegBIcons {
156
+ .sapMSegBBtn.sapMSegBtnLastVisibleButton:not(.sapMSegBBtnMixed) .sapMSegBBtnInner {
157
+ margin-right: -1px;
158
+ }
159
+ }
160
+
161
+ /* Custom focus outline: */
162
+ html.sap-desktop {
163
+ .sapMSegB.sapMSegBIcons {
164
+ .sapMSegBBtn.sapMSegBBtnFocusable:not(.sapMSegBtnLastVisibleButton):not(.sapMSegBBtnMixed):focus .sapMSegBBtnInner:after {
165
+ content: "";
166
+ position: absolute;
167
+ box-sizing: border-box;
168
+ left: 0.2rem;
169
+ top: 0.375rem;
170
+ right: 0.15rem;
171
+ bottom: 0.375rem;
172
+ pointer-events: none;
173
+ border: 0.125rem solid @sapUiContentFocusColor;
174
+ border-radius: 0.375rem;
175
+ }
176
+ }
177
+ .sapUiSizeCompact .sapMSegB.sapMSegBIcons .sapMSegBBtn.sapMSegBBtnFocusable:not(.sapMSegBBtnMixed):not(.sapMSegBtnLastVisibleButton):focus .sapMSegBBtnInner:after,
178
+ &.sapUiSizeCompact .sapMSegB.sapMSegBIcons .sapMSegBBtn.sapMSegBBtnFocusable:not(.sapMSegBBtnMixed):not(.sapMSegBtnLastVisibleButton):focus .sapMSegBBtnInner:after {
179
+ top: 0.3rem;
180
+ bottom: 0.3rem;
181
+ }
182
+ }
183
+
184
+ /* Custom focus outline: */
185
+ html.sap-desktop {
186
+ .sapMSegB.sapMSegBIcons {
187
+ .sapMSegBBtn.sapMSegBBtnFocusable:not(.sapMSegBBtnMixed):first-child:focus .sapMSegBBtnInner:after {
188
+ content: "";
189
+ position: absolute;
190
+ box-sizing: border-box;
191
+ left: 0.15rem;
192
+ top: 0.375rem;
193
+ right: 0.15rem;
194
+ bottom: 0.375rem;
195
+ pointer-events: none;
196
+ border: 0.125rem solid @sapUiContentFocusColor;
197
+ border-radius: 0.375rem;
198
+ }
199
+ .sapUiSizeCompact .sapMSegBBtn.sapMSegBBtnFocusable:not(.sapMSegBBtnMixed):first-child:focus .sapMSegBBtnInner:after,
200
+ &.sapUiSizeCompact .sapMSegBBtn.sapMSegBBtnFocusable:not(.sapMSegBBtnMixed):first-child:focus .sapMSegBBtnInner:after {
201
+ top: 0.3rem;
202
+ bottom: 0.3rem;
203
+ }
82
204
  }
83
205
  }
84
206
 
@@ -127,7 +249,7 @@ html.sap-desktop {
127
249
 
128
250
  .sapMSegBBtn.sapMSegBBtnSel:hover {
129
251
  .sapMSegBBtnInner {
130
- border-color: @sapUiButtonSelectedHoverBorderColor;
252
+ border-color: @sapUiButtonSelectedBorderColor;
131
253
  }
132
254
  }
133
255
 
@@ -206,7 +328,7 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
206
328
  border-bottom-left-radius: 0.5rem;
207
329
  }
208
330
 
209
- .sapMSegBBtn:last-child .sapMSegBBtnInner {
331
+ .sapMSegBBtn.sapMSegBtnLastVisibleButton .sapMSegBBtnInner {
210
332
  border-top-right-radius: 0.5rem;
211
333
  border-bottom-right-radius: 0.5rem;
212
334
  }
@@ -118,8 +118,10 @@ html.sap-desktop .sapMSltIconOnly.focus:not(.sapMSltExpanded):not(.sapMSltDisabl
118
118
  }
119
119
 
120
120
  .sapMSlt.sapMSltReadonly {
121
- background: @sapUiFieldReadOnlyBackground;
122
- border-bottom: dashed @sapUiElementBorderWidth @sapUiFieldReadOnlyBorderColor;
121
+ border-color: @sapUiFieldReadOnlyBorderColor;
122
+ background:@sapUiFieldReadOnlyBackgroundStyle;
123
+ background-color: @sapUiFieldReadOnlyBackground;
124
+ box-shadow: none;
123
125
  }
124
126
 
125
127
  div.sapMSltPicker .sapMSltPickerValueState {
@@ -164,18 +166,20 @@ div.sapMSltPicker .sapMSltPickerValueState {
164
166
  .sapMSltArrow {
165
167
  width: 2.25rem;
166
168
  height: 2.25rem;
169
+
170
+ &:hover {
171
+ box-shadow: @sapUiFieldHoverShadow;
172
+ }
167
173
  }
168
174
 
169
175
  .sapUiSizeCompact .sapMSltArrow {
170
176
  width: 2rem;
171
177
  height: 1.625rem;
172
-
173
178
  }
174
179
 
175
180
  .sapMSltPressed >.sapMSltArrow,
176
181
  .sapMSlt:hover > .sapMSltArrow {
177
182
  background-color: @sapUiButtonActiveBackground;
178
- box-shadow: @sapUiFieldHoverShadow;
179
183
  overflow: none;
180
184
  border-radius: 0.125rem;
181
185
  }
@@ -12,10 +12,6 @@
12
12
  height: 1.5rem;
13
13
  margin-left: -1rem;
14
14
  top: -0.625rem;
15
-
16
- &:not(:focus) {
17
- box-shadow: @sapUiContentSelectedShadow;
18
- }
19
15
  }
20
16
 
21
17
  .sapMSlider {
@@ -23,21 +19,22 @@
23
19
  align-items: center;
24
20
  }
25
21
 
26
- .sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
22
+ .sapMSliderInner .sapMSliderHandle:not(:focus):not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
27
23
  font-family: SAP-icons;
28
24
  content: "\e29c";
29
25
  position: absolute;
30
- top: 4px;
26
+ top: 0.25rem;
31
27
  right: 0.5rem;
32
28
  overflow: hidden;
33
29
  vertical-align: middle;
34
- font-size:14px;
30
+ font-size: 0.875rem;
31
+ line-height: 0.875rem;
35
32
  color: @sapContent_Selected_ForegroundColor;
36
33
  }
37
34
 
38
35
  .sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover>.sapMSliderHandle):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):focus {
39
36
  &:after {
40
- top: 3px;
37
+ top: 0.1875rem;
41
38
  right: 0.4375rem;
42
39
  }
43
40
  }
@@ -47,15 +44,13 @@
47
44
  &:not(:focus) {
48
45
  border-color: @sapUiSliderHoverHandleBorderColor;
49
46
  background: @sapUiSliderHoverHandleBackground;
50
- box-shadow: @sapUiContentSelectedShadow;
51
47
  }
52
48
  }
53
49
 
54
50
  .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
55
- background: @sapUiSliderActiveHandleBackground;
56
- border: 0.125rem solid #0070F2;
51
+ background: @sapUiSliderActiveRangeHandleBackground;
52
+ border: @sapUiContentFocusWidth solid @sapUiContentFocusColor;
57
53
  outline: none;
58
- box-shadow: none;
59
54
  top: -0.625rem;
60
55
  }
61
56
 
@@ -89,8 +84,8 @@
89
84
  border-radius: 50%;
90
85
  width: 0.5rem;
91
86
  height: 0.5rem;
92
- left: -14px;
93
- top: -2px;
87
+ left: -0.875rem;
88
+ top: -0.125rem;
94
89
  }
95
90
 
96
91
  .sapMSlider::after {
@@ -102,8 +97,8 @@
102
97
  border-radius: 50%;
103
98
  width: 0.5rem;
104
99
  height: 0.5rem;
105
- right: 2px;
106
- top: 22px;
100
+ right: 0.125rem;
101
+ top: 1.375rem;
107
102
  }
108
103
 
109
104
  .sapMSliderTooltip {
@@ -120,13 +115,14 @@
120
115
  }
121
116
 
122
117
  .sapMSliderTickmarks {
118
+ top: -0.75rem;
123
119
  display: flex;
124
- top: initial;
125
120
  box-sizing: border-box;
126
121
  align-items: center;
127
122
  }
128
123
 
129
124
  .sapMSliderTick {
125
+ border-color: @sapUiContentMeasureIndicatorColor;
130
126
  margin: 0;
131
127
  height: .5rem;
132
128
  }
@@ -149,12 +145,12 @@
149
145
  }
150
146
 
151
147
  .sapMSlider::after {
152
- top: 12px;
153
- right: 6px;
148
+ top: 0.75rem;
149
+ right: 0.375rem;
154
150
  }
155
151
 
156
152
  .sapMSliderInner::before {
157
- left: -12px;
153
+ left: -0.75rem;
158
154
  }
159
155
 
160
156
  .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
@@ -173,13 +169,13 @@
173
169
  }
174
170
 
175
171
  .sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover>.sapMSliderHandle):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
176
- top: 2px;
172
+ top: 0.125rem;
177
173
  right: 0.25rem;
178
174
  }
179
175
 
180
176
  .sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover>.sapMSliderHandle):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):focus {
181
177
  &:after {
182
- top: 1px;
178
+ top: 0.0625rem;
183
179
  right: 0.1875rem;
184
180
  }
185
181
  }
@@ -8,13 +8,11 @@
8
8
  border-color: @sapUiContentContrastFocusColor;
9
9
  }
10
10
 
11
- .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnTransparent:not(.sapMToggleBtnPressed),
12
11
  .sapContrast.sapMIBar-CTX .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnTransparent:not(.sapMToggleBtnPressed),
13
12
  .sapContrast .sapMIBar-CTX .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnTransparent:not(.sapMToggleBtnPressed) {
14
13
  border-left-color: @sapUiButtonBorderColor;
15
14
  }
16
15
 
17
- .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnActive.sapMBtnTransparent:not(.sapMToggleBtnPressed),
18
16
  .sapContrast.sapMIBar-CTX .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnActive.sapMBtnTransparent:not(.sapMToggleBtnPressed),
19
17
  .sapContrast .sapMIBar-CTX .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnActive.sapMBtnTransparent:not(.sapMToggleBtnPressed) {
20
18
  border-left-color: @sapUiButtonLiteActiveBorderColor;
@@ -41,7 +39,7 @@
41
39
  }
42
40
 
43
41
  .sapMSB .sapMSBInner .sapMSBText:not(.sapMSBTextIE) .sapMBtnInner {
44
- margin-right: 2.3rem;
42
+ margin-right: 2.25rem;
45
43
  }
46
44
 
47
45
  .sapMSB .sapMSBInner {
@@ -57,10 +55,10 @@
57
55
 
58
56
  .sapUiSizeCompact {
59
57
  .sapMSB .sapMSBInner {
60
- padding: 0.15rem 0;
58
+ padding: 0.1875rem 0;
61
59
  }
62
60
  .sapMSB .sapMSBText {
63
- height: 1.75rem;
61
+ height: 1.625rem;
64
62
  }
65
63
  }
66
64
 
@@ -96,8 +94,13 @@
96
94
  background-color: @sapUiButtonAttentionBackground;
97
95
  }
98
96
 
99
- .sapMSB .sapMBtnInner {
100
- border: none;
97
+ .sapMMenuBtnSplit {
98
+ .sapMBtnInner,
99
+ span.sapMBtnInner.sapMBtnAccept,
100
+ span.sapMBtnInner.sapMBtnAttention,
101
+ span.sapMBtnInner.sapMBtnReject {
102
+ border-color: transparent;
103
+ }
101
104
  }
102
105
 
103
106
  .sapMSB .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
@@ -113,12 +116,18 @@
113
116
  border-radius: 0.35rem;
114
117
  }
115
118
 
116
- .sapMSB.sapMSBEmphasized .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before,
117
- .sapMSB.sapMSBNeutral .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before,
119
+ .sapMSB.sapMSBEmphasized .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
120
+ background-color: @sapUiButtonEmphasizedTextColor;
121
+ }
122
+
123
+ .sapMSB.sapMSBNeutral .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
124
+ background-color: @sapUiButtonInformationTextColor;
125
+ }
126
+
118
127
  .sapMSB.sapMSBSuccess .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before,
119
128
  .sapMSB.sapMSBCritical .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before,
120
129
  .sapMSB.sapMSBNegative .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
121
- background-color: @sapUiButtonEmphasizedTextColor;
130
+ background-color: @sapUiButtonSuccessTextColor;
122
131
  }
123
132
 
124
133
  .sapMSB.sapMSBAccept .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
@@ -154,30 +163,64 @@
154
163
  border-radius: 0.375rem;
155
164
  }
156
165
 
157
- .sapMSB.sapMSBEmphasized:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after {
166
+ .sapMSB.sapMSBEmphasized:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after,
167
+ .sapMSB.sapMSBCritical:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after,
168
+ .sapMSB.sapMSBNegative:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after,
169
+ .sapMSB.sapMSBSuccess:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after {
158
170
  border-color: @sapUiContentContrastFocusColor;
159
171
  }
160
172
 
161
173
  .sapMSB :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
162
- border: 0.125rem solid @sapUiContentFocusColor;
163
- .sapMBtnContent,
164
- .sapUiIcon {
165
- position: absolute;
166
- top: -2px;
174
+ border: 0.0625rem solid @sapUiContentFocusColor;
175
+ min-width: 2.3125rem;
176
+
177
+ &.sapMBtnText > .sapUiIcon {
178
+ left: 0.4375rem;
167
179
  }
180
+
168
181
  .sapUiIcon {
169
- left: 0.4375rem;
182
+ position: absolute;
183
+ left: 0.0625rem;
184
+ padding-right: 0.0625rem;
185
+ }
186
+
187
+ .sapUiIcon + .sapMBtnContent {
188
+ padding-left: 1.4375rem;
170
189
  }
171
- &.sapMBtnIconFirst .sapMBtnContent {
172
- left: 1.8rem;
190
+ }
191
+
192
+ .sapUiSizeCompact .sapMSB {
193
+ .sapMSBText:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
194
+ margin-right: 2rem;
173
195
  }
174
- .sapMBtnContent {
175
- left: 0.4rem;
196
+
197
+ :not(.sapMBtnDisabled) > span.sapMBtnInner {
198
+ &.sapMBtnInner.sapMBtnText {
199
+ padding-right: 0.3125rem;
200
+ padding-left: 0.3125rem;
201
+ }
202
+ &.sapMBtnEmphasized.sapMBtnActive {
203
+ min-width: 2rem;
204
+
205
+ &.sapMBtnText > .sapUiIcon {
206
+ left: 0.3125rem;
207
+ }
208
+ }
176
209
  }
177
210
  }
178
211
 
179
- .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive .sapUiIcon {
180
- left: -0.0625rem;
212
+ .sapUiSizeCompact {
213
+ .sapMSB :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
214
+ .sapUiIcon {
215
+ position: absolute;
216
+ left: 0;
217
+ padding-right: 0;
218
+ }
219
+
220
+ .sapMBtnContent {
221
+ top: 0;
222
+ }
223
+ }
181
224
  }
182
225
 
183
226
  .sapMMenuBtn .sapMBtnDisabled {
@@ -202,6 +245,13 @@ html.sap-desktop .sapMMenuBtnSplit .sapMBtn:focus > .sapMFocusable:after {
202
245
  right: 0.125rem;
203
246
  }
204
247
 
248
+ .sapUiSizeCompact {
249
+ .sapMSB:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after {
250
+ left: 0.0625rem;
251
+ right: 0.0625rem;
252
+ }
253
+ }
254
+
205
255
  html.sap-desktop .sapMSB .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
206
256
  width: auto;
207
257
  height: auto;
@@ -14,4 +14,46 @@
14
14
  .sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState), .sapMSlt.sapMSltFocused:not(.sapMSltDisabled):not(.sapMSltState) {
15
15
  outline-offset: 0;
16
16
  }
17
+
18
+ .sapMSltIcon:before,
19
+ .sapMSltIcon:after {
20
+ font-size: @sapMFontMediumSize;
21
+ color: @sapUiLink;
22
+ padding-bottom: 0.0625rem;
23
+ speak: none;
24
+ }
25
+
26
+ .sapMSltIcon:before {
27
+ font-family: @sapUiFontLightFamily;
28
+ content: "••• ";
29
+ vertical-align: bottom;
30
+ }
31
+
32
+ .sapMSltIcon:after {
33
+ font-family: @sapUiContentIconFontFamily;
34
+ content: "\e1ef";
35
+ }
36
+
37
+ .sapMBreadcrumbsItem.sapMBreadcrumbsSelectItem >
38
+ .sapMSlt.sapMSltIconOnly.sapMSltWithIcon.sapMSltHoverable.sapMSltWithArrow {
39
+ background: transparent;
40
+ border: none;
41
+
42
+ &.sapMSltFocused,
43
+ &:hover {
44
+ .sapMSltIcon {
45
+ background-color: @sapUiContentFocusColor;
46
+ border-bottom: @sapUiContentFocusColor 0.0625rem solid;
47
+ }
48
+
49
+ .sapMSltIcon:before {
50
+ border-bottom: none;
51
+ }
52
+
53
+ .sapMSltIcon:before,
54
+ .sapMSltIcon:after {
55
+ color: @sapUiButtonHoverBackground;
56
+ }
57
+ }
58
+ }
17
59
  }
@@ -159,6 +159,19 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMBtnActive.sapMFocusable
159
159
  border-color: @sapUiContentFocusColor;
160
160
  }
161
161
 
162
+ // Value State Message buttons
163
+ :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnCritical.sapMBtnActive {
164
+ border-color: @sapUiButtonCriticalBorderColor;
165
+ }
166
+
167
+ :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnNegative.sapMBtnActive {
168
+ border-color: @sapUiButtonNegativeBorderColor;
169
+ }
170
+
171
+ :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnSuccess.sapMBtnActive {
172
+ border-color: @sapButton_Success_BorderColor;
173
+ }
174
+
162
175
  html.sap-desktop .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
163
176
  content: "";
164
177
  position: absolute;
@@ -173,10 +186,9 @@ html.sap-desktop .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before
173
186
  }
174
187
 
175
188
  html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBadgeIndicator):before,
176
- html.sap-desktop .sapMBtn:focus > .sapMBtnCritical.sapMFocusable:not(.sapMBadgeIndicator):before,
177
- html.sap-desktop .sapMBtn:focus > .sapMBtnNegative.sapMFocusable:not(.sapMBadgeIndicator):before,
178
- html.sap-desktop .sapMBtn:focus > .sapMBtnSuccess.sapMFocusable:not(.sapMBadgeIndicator):before,
179
- html.sap-desktop .sapMBtn:focus > .sapMBtnNeutral.sapMFocusable:not(.sapMBadgeIndicator):before {
189
+ html.sap-desktop .sapMBtn:focus > .sapMBtnCritical.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator):before,
190
+ html.sap-desktop .sapMBtn:focus > .sapMBtnNegative.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator):before,
191
+ html.sap-desktop .sapMBtn:focus > .sapMBtnSuccess.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator):before {
180
192
  border: 0.125rem solid @sapUiContentContrastFocusColor;
181
193
  }
182
194
 
@@ -10,7 +10,6 @@
10
10
  @_sap_m_IconTabBar_TextColor: @sapTextColor;
11
11
  @_sap_m_IconTabBar_TextShadow: none;
12
12
  @_sap_m_IconTabBar_Separator_Font_Size:@sapFontLargeSize;
13
- @_sap_m_IconTabBar_More_Button_Font_size: 1rem;
14
13
  @_sap_m_IconTabBar_More_Button_Focus_Offset: -0.3125rem;
15
14
  @_sap_m_IconTabBar_Arrow_SubItem_Left_Padding: 0.5rem;
16
15
 
@@ -60,9 +60,6 @@
60
60
  }
61
61
 
62
62
  .sapMMenuBtnSplit .sapMSB:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
63
- padding-right: 0.4375rem;
64
- padding-left: 0.4375rem;
65
-
66
63
  .sapMBtnContent {
67
64
  position: relative;
68
65
  left: 0;
@@ -74,4 +71,22 @@
74
71
  padding-right: 0.3125rem;
75
72
  padding-left: 0.3125rem;
76
73
  }
74
+ .sapMMenuBtn .sapMBtn:not(.sapMSBArrow) .sapMBtnInner .sapMBtnIcon,
75
+ .sapMMenuBtn .sapMBtn:not(.sapMSBArrow) .sapMBtnInner .sapMBtnContent {
76
+ position: relative;
77
+ top: 0;
78
+ left: 0;
79
+ }
80
+ }
81
+
82
+ .sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnNegative.sapMBtnActive::after {
83
+ color: @sapUiButtonNegativeActiveTextColor;
84
+ }
85
+
86
+ .sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnCritical.sapMBtnActive::after {
87
+ color: @sapUiButtonCriticalActiveTextColor;
88
+ }
89
+
90
+ .sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnSuccess.sapMBtnActive::after {
91
+ color: @sapUiButtonSuccessActiveTextColor;
77
92
  }