@openui5/themelib_sap_horizon 1.114.10 → 1.114.12

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 (39) hide show
  1. package/package.json +18 -18
  2. package/src/sap/f/themes/sap_horizon/AvatarGroup.less +4 -2
  3. package/src/sap/f/themes/sap_horizon/ShellBar.less +10 -4
  4. package/src/sap/f/themes/sap_horizon_dark/ShellBar.less +10 -4
  5. package/src/sap/m/themes/sap_horizon/Avatar.less +2 -2
  6. package/src/sap/m/themes/sap_horizon/Breadcrumbs.less +2 -1
  7. package/src/sap/m/themes/sap_horizon/Button.less +16 -4
  8. package/src/sap/m/themes/sap_horizon/MenuButton.less +22 -4
  9. package/src/sap/m/themes/sap_horizon/ObjectNumber.less +107 -17
  10. package/src/sap/m/themes/sap_horizon/ProgressIndicator.less +4 -0
  11. package/src/sap/m/themes/sap_horizon/SegmentedButton.less +133 -11
  12. package/src/sap/m/themes/sap_horizon/Select.less +4 -2
  13. package/src/sap/m/themes/sap_horizon/SplitButton.less +46 -23
  14. package/src/sap/m/themes/sap_horizon_dark/Button.less +16 -4
  15. package/src/sap/m/themes/sap_horizon_dark/MenuButton.less +18 -3
  16. package/src/sap/m/themes/sap_horizon_dark/ObjectNumber.less +107 -17
  17. package/src/sap/m/themes/sap_horizon_dark/ProgressIndicator.less +4 -0
  18. package/src/sap/m/themes/sap_horizon_dark/SegmentedButton.less +133 -11
  19. package/src/sap/m/themes/sap_horizon_dark/Select.less +4 -2
  20. package/src/sap/m/themes/sap_horizon_dark/SplitButton.less +46 -37
  21. package/src/sap/m/themes/sap_horizon_hcb/CheckBox.less +5 -1
  22. package/src/sap/m/themes/sap_horizon_hcb/MenuButton.less +4 -0
  23. package/src/sap/m/themes/sap_horizon_hcb/ObjectNumber.less +11 -14
  24. package/src/sap/m/themes/sap_horizon_hcb/ProgressIndicator.less +4 -0
  25. package/src/sap/m/themes/sap_horizon_hcb/SegmentedButton.less +1 -1
  26. package/src/sap/m/themes/sap_horizon_hcw/CheckBox.less +5 -1
  27. package/src/sap/m/themes/sap_horizon_hcw/MenuButton.less +4 -0
  28. package/src/sap/m/themes/sap_horizon_hcw/ObjectNumber.less +11 -14
  29. package/src/sap/m/themes/sap_horizon_hcw/ProgressIndicator.less +4 -0
  30. package/src/sap/m/themes/sap_horizon_hcw/SegmentedButton.less +1 -1
  31. package/src/sap/tnt/themes/sap_horizon/ToolHeader.less +0 -4
  32. package/src/sap/tnt/themes/sap_horizon_dark/ToolHeader.less +0 -4
  33. package/src/sap/tnt/themes/sap_horizon_hcb/ToolHeader.less +0 -4
  34. package/src/sap/tnt/themes/sap_horizon_hcw/ToolHeader.less +0 -4
  35. package/src/sap/ui/commons/themes/sap_horizon/MenuButton.less +12 -0
  36. package/src/sap/ui/core/themes/sap_horizon/.theme +1 -1
  37. package/src/sap/ui/core/themes/sap_horizon_dark/.theme +1 -1
  38. package/src/sap/ui/core/themes/sap_horizon_hcb/.theme +1 -1
  39. package/src/sap/ui/core/themes/sap_horizon_hcw/.theme +1 -1
@@ -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;
@@ -45,7 +43,7 @@
45
43
  }
46
44
 
47
45
  .sapMSB .sapMSBInner .sapMSBText:not(.sapMSBTextIE) .sapMBtnInner {
48
- margin-right: 2.3125rem;
46
+ margin-right: 2.25rem;
49
47
  }
50
48
 
51
49
  .sapMSB .sapMSBInner {
@@ -61,10 +59,10 @@
61
59
 
62
60
  .sapUiSizeCompact {
63
61
  .sapMSB .sapMSBInner {
64
- padding: 0.15rem 0;
62
+ padding: 0.1875rem 0;
65
63
  }
66
64
  .sapMSB .sapMSBText {
67
- height: 1.75rem;
65
+ height: 1.625rem;
68
66
  }
69
67
  }
70
68
 
@@ -100,8 +98,13 @@
100
98
  background-color: @sapUiButtonAttentionBackground;
101
99
  }
102
100
 
103
- .sapMSB .sapMBtnInner {
104
- border: none;
101
+ .sapMMenuBtnSplit {
102
+ .sapMBtnInner,
103
+ span.sapMBtnInner.sapMBtnAccept,
104
+ span.sapMBtnInner.sapMBtnAttention,
105
+ span.sapMBtnInner.sapMBtnReject {
106
+ border-color: transparent;
107
+ }
105
108
  }
106
109
 
107
110
  .sapMSB .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
@@ -117,12 +120,18 @@
117
120
  border-radius: 0.35rem;
118
121
  }
119
122
 
120
- .sapMSB.sapMSBEmphasized .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before,
121
- .sapMSB.sapMSBNeutral .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before,
123
+ .sapMSB.sapMSBEmphasized .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
124
+ background-color: @sapUiButtonEmphasizedTextColor;
125
+ }
126
+
127
+ .sapMSB.sapMSBNeutral .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
128
+ background-color: @sapUiButtonInformationTextColor;
129
+ }
130
+
122
131
  .sapMSB.sapMSBSuccess .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before,
123
132
  .sapMSB.sapMSBCritical .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before,
124
133
  .sapMSB.sapMSBNegative .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
125
- background-color: @sapUiButtonEmphasizedTextColor;
134
+ background-color: @sapUiButtonSuccessTextColor;
126
135
  }
127
136
 
128
137
  .sapMSB.sapMSBAccept .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
@@ -158,7 +167,10 @@
158
167
  border-radius: 0.375rem;
159
168
  }
160
169
 
161
- .sapMSB.sapMSBEmphasized:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after {
170
+ .sapMSB.sapMSBEmphasized:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after,
171
+ .sapMSB.sapMSBCritical:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after,
172
+ .sapMSB.sapMSBNegative:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after,
173
+ .sapMSB.sapMSBSuccess:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after {
162
174
  border-color: @sapUiContentContrastFocusColor;
163
175
  }
164
176
 
@@ -167,7 +179,7 @@
167
179
  }
168
180
 
169
181
  .sapMSB :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
170
- border: 0.125rem solid @sapUiContentFocusColor;
182
+ border: 0.0625rem solid @sapUiContentFocusColor;
171
183
  min-width: 2.3125rem;
172
184
 
173
185
  &.sapMBtnText > .sapUiIcon {
@@ -176,16 +188,10 @@
176
188
 
177
189
  .sapUiIcon {
178
190
  position: absolute;
179
- top: -0.0625rem;
180
- left: -0.0625rem;
181
- padding-left: 0.0625rem;
191
+ left: 0.0625rem;
182
192
  padding-right: 0.0625rem;
183
193
  }
184
194
 
185
- .sapMBtnContent {
186
- padding-left: 0.0625rem;
187
- }
188
-
189
195
  .sapUiIcon + .sapMBtnContent {
190
196
  padding-left: 1.4375rem;
191
197
  }
@@ -198,8 +204,8 @@
198
204
 
199
205
  :not(.sapMBtnDisabled) > span.sapMBtnInner {
200
206
  &.sapMBtnInner.sapMBtnText {
201
- padding-left: 0.4375rem;
202
- padding-right: 0.5rem;
207
+ padding-right: 0.3125rem;
208
+ padding-left: 0.3125rem;
203
209
  }
204
210
  &.sapMBtnEmphasized.sapMBtnActive {
205
211
  min-width: 2rem;
@@ -211,8 +217,18 @@
211
217
  }
212
218
  }
213
219
 
214
- .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive .sapUiIcon {
215
- left: -0.0625rem;
220
+ .sapUiSizeCompact {
221
+ .sapMSB :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
222
+ .sapUiIcon {
223
+ position: absolute;
224
+ left: 0;
225
+ padding-right: 0;
226
+ }
227
+
228
+ .sapMBtnContent {
229
+ top: 0;
230
+ }
231
+ }
216
232
  }
217
233
 
218
234
  .sapMMenuBtn .sapMBtnDisabled {
@@ -237,6 +253,13 @@ html.sap-desktop .sapMMenuBtnSplit .sapMBtn:focus > .sapMFocusable:after {
237
253
  right: 0.125rem;
238
254
  }
239
255
 
256
+ .sapUiSizeCompact {
257
+ .sapMSB:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after {
258
+ left: 0.0625rem;
259
+ right: 0.0625rem;
260
+ }
261
+ }
262
+
240
263
  html.sap-desktop .sapMSB .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
241
264
  width: auto;
242
265
  height: auto;
@@ -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
 
@@ -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
  }
@@ -3,17 +3,21 @@
3
3
  /* Evening Horizon theme */
4
4
  /* =================================== */
5
5
 
6
- .sapMObjectNumberInverted .sapMObjectNumberText,
7
- .sapMObjectNumberInverted .sapMObjectNumberUnit {
8
- text-shadow: @sapUiContentContrastTextShadow;
9
- }
10
-
11
6
  .sapMObjectNumberInverted {
12
- .sapMObjectNumberInner {
13
- border-radius: 0.25rem;
7
+ box-sizing: border-box;
8
+ &:not(.sapMObjectNumberLarge) .sapMObjectNumberInner {
9
+ min-height: 1rem;
10
+ height: auto;
14
11
  }
15
12
  }
16
13
 
14
+ .sapMObjectNumberInverted .sapMObjectNumberInner {
15
+ border: 0.0625rem solid;
16
+ border-radius: @sapUiButtonBorderCornerRadius;
17
+ padding: 0.1875rem 0.25rem;
18
+ vertical-align: middle;
19
+ }
20
+
17
21
  html.sap-desktop .sapMObjectNumberActive:focus {
18
22
  .sapMObjectNumberInner::after {
19
23
  left: -0.0625rem;
@@ -33,7 +37,7 @@ html.sap-desktop .sapMObjectNumberActive:focus {
33
37
  bottom: -0.0625rem;
34
38
  height: auto;
35
39
  outline: none;
36
- border-radius: 0.25rem;
40
+ border-radius: @sapUiButtonBorderCornerRadius;
37
41
  border: 0.125rem solid @sapUiContentFocusColor;
38
42
  }
39
43
 
@@ -52,29 +56,115 @@ html.sap-desktop .sapMObjectNumberActive:focus {
52
56
  bottom: -0.0625rem;
53
57
  height: auto;
54
58
  outline: none;
55
- border-radius: 0.25rem;
59
+ border-radius: @sapUiButtonBorderCornerRadius;
56
60
  border: 0.125rem solid @sapUiContentFocusColor;
57
61
  }
58
62
  }
59
63
  }
60
64
 
61
- .objectNumberStatusMixIn(@class, @innerBackgroundColor, @innerColor, @activeInnerBackgroundColor, @activeInnerColor, @pressedInnerBackgroundColor) {
65
+ .objectNumberStatusMixIn(@class, @regularBackgroundColor, @regularTextColor,
66
+ @hoverBackgroundColor, @hoverTextColor,
67
+ @activeBackgroundColor, @activeTextColor,
68
+ @regularTextShadow, @activeTextShadow,
69
+ @regularBorderColor, @hoverBorderColor, @activeBorderColor) {
62
70
  .sapMObjectNumberInverted.@{class} {
71
+ .sapMObjectNumberText,
72
+ .sapMObjectNumberUnit {
73
+ text-shadow: @regularTextShadow;
74
+ }
63
75
  .sapMObjectNumberInner {
64
- background-color: @innerBackgroundColor;
65
- color: @innerColor;
76
+ border-color: @regularBorderColor;
77
+ background-color: @regularBackgroundColor;
78
+ color: @regularTextColor;
66
79
  }
67
80
 
68
81
  &.sapMObjectNumberActive {
69
82
  .sapMObjectNumberInner:hover {
70
- background-color: @activeInnerBackgroundColor;
71
- color: @activeInnerColor;
83
+ border-color: @hoverBorderColor;
84
+ background-color: @hoverBackgroundColor;
85
+ color: @hoverTextColor;
72
86
  }
73
87
  .sapMObjectNumberInner:active,
74
88
  &.sapMObjectNumberPressed .sapMObjectNumberInner {
75
- background-color: @pressedInnerBackgroundColor;
76
- color: @innerColor;
89
+ border-color: @activeBorderColor;
90
+ background-color: @activeBackgroundColor;
91
+ color: @activeTextColor;
92
+
93
+ .sapMObjectNumberText,
94
+ .sapMObjectNumberUnit {
95
+ text-shadow: @activeTextShadow;
96
+ }
77
97
  }
78
98
  }
79
99
  }
80
- }
100
+ }
101
+
102
+ .objectNumberStatusMixIn(sapMObjectNumberStatusNone,
103
+ @sapNeutralBackground,
104
+ @sapTextColor,
105
+ @sapUiButtonNeutralHoverBackground,
106
+ @sapUiButtonNeutralHoverTextColor,
107
+ @sapUiButtonNeutralActiveBackground,
108
+ @sapUiButtonActiveTextColor,
109
+ @sapUiContentTextShadow,
110
+ @sapUiContentTextShadow,
111
+ @sapNeutralBorderColor,
112
+ @sapUiButtonNeutralHoverBorderColor,
113
+ @sapUiButtonNeutralActiveBorderColor
114
+ );
115
+
116
+ .objectNumberStatusMixIn(sapMObjectNumberStatusInformation,
117
+ @sapUiButtonInformationBackground,
118
+ @sapUiButtonInformationTextColor,
119
+ @sapUiButtonInformationHoverBackground,
120
+ @sapUiButtonInformationHoverTextColor,
121
+ @sapUiButtonInformationActiveBackground,
122
+ @sapUiButtonSelectedTextColor,
123
+ @sapUiContentTextShadow,
124
+ @sapUiContentTextShadow,
125
+ @sapUiButtonInformationBorderColor,
126
+ @sapUiButtonInformationHoverBorderColor,
127
+ @sapUiButtonInformationActiveBorderColor
128
+ );
129
+
130
+ .objectNumberStatusMixIn(sapMObjectNumberStatusError,
131
+ @sapUiButtonNegativeBackground,
132
+ @sapUiButtonNegativeTextColor,
133
+ @sapUiButtonNegativeHoverBackground,
134
+ @sapUiButtonNegativeHoverTextColor,
135
+ @sapUiButtonNegativeActiveBackground,
136
+ @sapUiButtonRejectSelectedTextColor,
137
+ @sapUiContentContrastTextShadow,
138
+ @sapUiContentTextShadow,
139
+ @sapUiButtonNegativeBorderColor,
140
+ @sapUiButtonNegativeHoverBorderColor,
141
+ @sapUiButtonNegativeActiveBorderColor
142
+ );
143
+
144
+ .objectNumberStatusMixIn(sapMObjectNumberStatusWarning,
145
+ @sapUiButtonCriticalBackground,
146
+ @sapUiButtonCriticalTextColor,
147
+ @sapUiButtonCriticalHoverBackground,
148
+ @sapUiButtonCriticalHoverTextColor,
149
+ @sapUiButtonCriticalActiveBackground,
150
+ @sapUiButtonAttentionSelectedTextColor,
151
+ @sapUiContentContrastTextShadow,
152
+ @sapUiContentTextShadow,
153
+ @sapUiButtonCriticalBorderColor,
154
+ @sapUiButtonCriticalHoverBorderColor,
155
+ @sapUiButtonCriticalActiveBorderColor
156
+ );
157
+
158
+ .objectNumberStatusMixIn(sapMObjectNumberStatusSuccess,
159
+ @sapUiButtonSuccessBackground,
160
+ @sapUiButtonSuccessTextColor,
161
+ @sapUiButtonSuccessHoverBackground,
162
+ @sapUiButtonSuccessHoverTextColor,
163
+ @sapUiButtonSuccessActiveBackground,
164
+ @sapUiButtonAcceptSelectedTextColor,
165
+ @sapUiContentContrastTextShadow,
166
+ @sapUiContentTextShadow,
167
+ @sapUiButtonSuccessBorderColor,
168
+ @sapUiButtonSuccessHoverBorderColor,
169
+ @sapUiButtonSuccessActiveBorderColor
170
+ );
@@ -29,6 +29,10 @@
29
29
  }
30
30
  }
31
31
 
32
+ .sapMPIValueMax .sapMPIBarRemaining {
33
+ display: flex;
34
+ }
35
+
32
36
  .sapMPIBarRemaining {
33
37
  position: absolute;
34
38
  width: ~'calc(100% - 1.25rem)';
@@ -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 {