@openui5/themelib_sap_horizon 1.114.0 → 1.115.1

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 (47) 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/Card.less +7 -13
  5. package/src/sap/f/themes/sap_horizon_dark/Card.less +7 -13
  6. package/src/sap/f/themes/sap_horizon_hcb/Card.less +1 -1
  7. package/src/sap/f/themes/sap_horizon_hcw/Card.less +1 -1
  8. package/src/sap/m/themes/sap_horizon/Button.less +10 -4
  9. package/src/sap/m/themes/sap_horizon/GenericTile.less +1 -1
  10. package/src/sap/m/themes/sap_horizon/Link.less +2 -10
  11. package/src/sap/m/themes/sap_horizon/MenuListItem.less +13 -0
  12. package/src/sap/m/themes/sap_horizon/Popover.less +13 -0
  13. package/src/sap/m/themes/sap_horizon/RatingIndicator.less +2 -5
  14. package/src/sap/m/themes/sap_horizon/library.source.less +1 -0
  15. package/src/sap/m/themes/sap_horizon_dark/Button.less +10 -4
  16. package/src/sap/m/themes/sap_horizon_dark/GenericTile.less +1 -1
  17. package/src/sap/m/themes/sap_horizon_dark/Link.less +2 -10
  18. package/src/sap/m/themes/sap_horizon_dark/MenuListItem.less +13 -0
  19. package/src/sap/m/themes/sap_horizon_dark/library.source.less +1 -0
  20. package/src/sap/m/themes/sap_horizon_hcb/Link.less +5 -12
  21. package/src/sap/m/themes/sap_horizon_hcw/Link.less +5 -12
  22. package/src/sap/tnt/themes/sap_horizon/NavigationList.less +18 -4
  23. package/src/sap/tnt/themes/sap_horizon/SideNavigation.less +9 -1
  24. package/src/sap/tnt/themes/sap_horizon/ToolHeader.less +202 -351
  25. package/src/sap/tnt/themes/sap_horizon/ToolPage.less +16 -3
  26. package/src/sap/tnt/themes/sap_horizon_dark/NavigationList.less +18 -4
  27. package/src/sap/tnt/themes/sap_horizon_dark/SideNavigation.less +10 -2
  28. package/src/sap/tnt/themes/sap_horizon_dark/ToolHeader.less +202 -351
  29. package/src/sap/tnt/themes/sap_horizon_dark/ToolPage.less +16 -3
  30. package/src/sap/tnt/themes/sap_horizon_hcb/NavigationList.less +9 -2
  31. package/src/sap/tnt/themes/sap_horizon_hcb/SideNavigation.less +4 -1
  32. package/src/sap/tnt/themes/sap_horizon_hcb/ToolHeader.less +319 -2
  33. package/src/sap/tnt/themes/sap_horizon_hcb/ToolPage.less +17 -3
  34. package/src/sap/tnt/themes/sap_horizon_hcw/NavigationList.less +9 -2
  35. package/src/sap/tnt/themes/sap_horizon_hcw/SideNavigation.less +4 -1
  36. package/src/sap/tnt/themes/sap_horizon_hcw/ToolHeader.less +319 -2
  37. package/src/sap/tnt/themes/sap_horizon_hcw/ToolPage.less +17 -3
  38. package/src/sap/ui/core/themes/sap_horizon/.theme +1 -1
  39. package/src/sap/ui/core/themes/sap_horizon_dark/.theme +1 -1
  40. package/src/sap/ui/core/themes/sap_horizon_hcb/.theme +1 -1
  41. package/src/sap/ui/core/themes/sap_horizon_hcw/.theme +1 -1
  42. package/src/sap/ui/unified/themes/sap_horizon/Menu.less +48 -6
  43. package/src/sap/ui/unified/themes/sap_horizon_dark/Menu.less +36 -7
  44. package/src/sap/uxap/themes/sap_horizon/ObjectPageSection.less +10 -1
  45. package/src/sap/uxap/themes/sap_horizon_dark/ObjectPageSection.less +10 -1
  46. package/src/sap/uxap/themes/sap_horizon_hcb/ObjectPageSection.less +10 -1
  47. package/src/sap/uxap/themes/sap_horizon_hcw/ObjectPageSection.less +10 -1
@@ -3,7 +3,9 @@
3
3
  /* Evening Horizon theme */
4
4
  /* =================================== */
5
5
 
6
- @_sap_tnt_ToolHeader_Height: 3.5rem;
6
+ @_sap_tnt_ToolHeader_Height: 3.25rem;
7
+ @_sap_tnt_ToolHeader_BorderRadius: 0.5rem;
8
+ @_sap_tnt_ToolHeader_BoxShadow: @_sap_tnt_ToolHeader_Shadow;
7
9
  @_sap_tnt_ToolHeader_IconHeight: 0.75rem;
8
10
  @_sap_tnt_ToolHeader_DisabledOpacity: @sapUiContentDisabledOpacity;
9
11
  @_sap_tnt_ToolHeader_ArrowHeight: 0.125rem;
@@ -11,15 +13,30 @@
11
13
  @_sap_tnt_ToolHeader_Padding: 0 0.75rem;
12
14
  @_sap_tnt_ToolHeader_ArrowMarginBottom: 0.25rem;
13
15
  @_sap_tnt_ToolHeader_IconTabHeader_Height: auto;
16
+ @_sap_tnt_ToolHeader_Shadow: 0 0 0.125rem 0 fade(@sapContent_ShadowColor,16), 0 0.5rem 1rem 0 fade(@sapContent_ShadowColor, 32);
17
+
18
+ // ==========================================================================
19
+ // sap.m.Toolbar overriding
20
+ // ==========================================================================
14
21
 
15
22
  .sapTntToolHeader {
16
23
  &.sapMTB {
17
24
  background-color: @sapUiShellColor;
25
+ padding: 0 1.25rem 0 0.75rem ;
18
26
  }
19
27
 
20
28
  &.sapMTBStandard {
21
29
  border-bottom: none;
22
30
  }
31
+
32
+ &.sapMIBar.sapMTB .sapMBarChild ~ .sapMBarChild {
33
+ margin: 0 0 0 0.375rem
34
+ }
35
+
36
+ &.sapMIBar.sapMTB .sapMBarChild.sapMTBSeparator {
37
+ background: none;
38
+ width: 0.75rem;
39
+ }
23
40
  }
24
41
 
25
42
  // ==========================================================================
@@ -27,437 +44,271 @@
27
44
  // ==========================================================================
28
45
 
29
46
  .sapTntToolHeader {
30
- .sapMBtn .sapMBtnTransparent,
31
- .sapMBtn .sapMBtnDefault,
32
- .sapMBtn .sapMBtnBack,
33
- .sapMBtn .sapMBtnUp {
34
- color: @sapUiShellInteractiveTextColor;
35
- background-color: transparent;
36
- border-color: transparent;
37
-
38
- .sapUiIcon {
39
- color: @sapUiShellInteractiveTextColor;
47
+ .sapMBarChild:not(.sapMMenuBtn) {
48
+ &.sapMBtn {
49
+ padding-top: 0.125rem;
40
50
  }
41
- }
42
-
43
- .sapMBtn .sapMBtnEmphasized {
44
- color: @sapUiShellTextColor;
45
- background: transparent;
46
- border-color: transparent;
47
51
 
48
- .sapUiIcon {
49
- color: @sapUiShellInteractiveTextColor;
50
- }
51
- }
52
-
53
- .sapMBtn:focus .sapMBtnTransparent.sapMFocusable,
54
- .sapMBtn:focus .sapMBtnEmphasized.sapMFocusable,
55
- .sapMBtn:focus .sapMBtnDefault.sapMFocusable,
56
- .sapMBtn:focus .sapMBtnBack.sapMFocusable,
57
- .sapMBtn:focus .sapMBtnUp.sapMFocusable {
58
- &::before {
59
- outline-color: @_sap_tnt_ToolHeader_BorderColor;
60
- border-color: @_sap_tnt_ToolHeader_BorderColor !important;
61
- }
62
- }
63
-
64
- .sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnTransparent,
65
- .sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnDefault,
66
- .sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnBack,
67
- .sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnUp {
68
- background: @sapUiShellHoverBackground;
69
- border-color: transparent;
70
- }
52
+ &.sapMBtn .sapMBtnTransparent,
53
+ &.sapMBtn .sapMBtnDefault,
54
+ &.sapMBtn .sapMBtnBack,
55
+ &.sapMBtn .sapMBtnUp {
56
+ color: @sapContent_IconColor;
57
+ border-radius: 0.375rem;
58
+ background-color: @sapButton_Lite_Background;
59
+ height: 2.5rem;
60
+ min-width: 2.5rem;
61
+
62
+ .sapUiIcon {
63
+ color: @sapContent_IconColor;
64
+ line-height: 2.5rem;
65
+ width: 2.5rem;
66
+ height: 2.5rem;
67
+ }
71
68
 
72
- .sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnEmphasized {
73
- color: @sapUiShellTextColor;
74
- background: @sapUiShellHoverBackground;
75
- border-color: transparent;
76
- .sapUiIcon {
77
- color: @sapUiShellInteractiveTextColor;
69
+ bdi {
70
+ line-height: 2.5rem;
71
+ }
78
72
  }
79
- }
80
-
81
- .sapMBtn:not(.sapMBtnDisabled) .sapMBtnEmphasized.sapMBtnActive,
82
- .sapMBtn:not(.sapMBtnDisabled) .sapMToggleBtnPressed {
83
- background: @sapUiShellActiveBackground;
84
- color: @sapUiShellActiveTextColor;
85
- border-color: transparent;
86
73
 
87
- &::after {
88
- color: @sapUiShellActiveTextColor;
89
- background: @sapUiShellActiveBackground;
74
+ &.sapMBtn:focus .sapMBtnTransparent.sapMFocusable,
75
+ &.sapMBtn:focus .sapMBtnEmphasized.sapMFocusable,
76
+ &.sapMBtn:focus .sapMBtnDefault.sapMFocusable,
77
+ &.sapMBtn:focus .sapMBtnBack.sapMFocusable,
78
+ &.sapMBtn:focus .sapMBtnUp.sapMFocusable {
79
+ &::before {
80
+ outline: @sapContent_FocusStyle @sapContent_FocusWidth @sapContent_FocusColor;
81
+ border: none !important;
82
+ }
90
83
  }
91
84
 
92
- .sapUiIcon {
93
- color: @sapUiShellInteractiveTextColor;
85
+ &.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnTransparent,
86
+ &.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnDefault,
87
+ &.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnBack,
88
+ &.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnUp {
89
+ background: @sapButton_Lite_Hover_Background;
90
+ color: @sapContent_IconColor;
91
+ box-shadow: none;
94
92
  }
95
- }
96
93
 
97
- .sapMBtn:not(.sapMBtnDisabled) .sapMBtnIconFirst.sapMBtnTransparent.sapMBtnActive,
98
- .sapMBtn:not(.sapMBtnDisabled) .sapMBtnIconFirst.sapMBtnDefault.sapMBtnActive,
99
- .sapMBtn:not(.sapMBtnDisabled) .sapMBtnIconFirst.sapMBtnBack.sapMBtnActive,
100
- .sapMBtn:not(.sapMBtnDisabled) .sapMBtnIconFirst.sapMBtnUp.sapMBtnActive {
101
- background: @sapUiShellActiveBackground;
102
- color: @sapUiShellInteractiveTextColor;
103
- border-color: transparent;
104
-
105
- &::after {
106
- color: @sapUiShellInteractiveTextColor;
107
- background: @sapUiShellActiveBackground;
94
+ &.sapMBtn:active:not(.sapMBtnDisabled) .sapMBtnTransparent,
95
+ &.sapMBtn:active:not(.sapMBtnDisabled) .sapMBtnDefault,
96
+ &.sapMBtn:active:not(.sapMBtnDisabled) .sapMBtnBack,
97
+ &.sapMBtn:active:not(.sapMBtnDisabled) .sapMBtnUp {
98
+ background: @sapActiveColor;
99
+ color: @sapContent_IconColor;
100
+ box-shadow: none;
108
101
  }
109
102
 
110
- .sapUiIcon {
111
- color: @sapUiShellInteractiveTextColor
103
+ &.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized) .sapUiIcon {
104
+ color: @sapContent_IconColor;
112
105
  }
113
106
  }
107
+ }
114
108
 
115
- .sapMBtn:not(.sapMBtnDisabled) .sapMFocusable.sapMBtnTransparent.sapMBtnActive,
116
- .sapMBtn:not(.sapMBtnDisabled) .sapMFocusable.sapMBtnEmphasized.sapMBtnActive,
117
- .sapMBtn:not(.sapMBtnDisabled) .sapMFocusable.sapMBtnDefault.sapMBtnActive,
118
- .sapMBtn:not(.sapMBtnDisabled) .sapMFocusable.sapMBtnBack.sapMBtnActive,
119
- .sapMBtn:not(.sapMBtnDisabled) .sapMFocusable.sapMBtnUp.sapMBtnActive {
120
- outline-color: @_sap_tnt_ToolHeader_BorderColor;
121
- background: @sapUiShellActiveBackground;
122
- }
123
-
124
- .sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnTransparent:not(.sapMBtnActive):focus,
125
- .sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized:not(.sapMBtnActive):focus,
126
- .sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnDefault:not(.sapMBtnActive):focus,
127
- .sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnBack:not(.sapMBtnActive):focus,
128
- .sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnUp:not(.sapMBtnActive):focus {
129
- outline-color: @_sap_tnt_ToolHeader_BorderColor;
130
- }
109
+ .sapUiSizeCompact {
110
+ .sapTntToolHeader {
111
+ .sapMBarChild:not(.sapMMenuBtn) {
112
+ &.sapMBtn {
113
+ padding-top: 0;
114
+ }
131
115
 
132
- .sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnHoverable.sapMBtnTransparent:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
133
- .sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnHoverable.sapMBtnDefault:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
134
- .sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnHoverable.sapMBtnBack:not(.sapMBtnActive):not(.sapMToggleBtnPressed),
135
- .sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnHoverable.sapMBtnUp:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
136
- background: @sapUiShellHoverBackground;
137
- border-color: transparent;
138
- bdi {
139
- color:@sapUiShellInteractiveTextColor
140
- }
141
- }
116
+ &.sapMBtn .sapMBtnTransparent,
117
+ &.sapMBtn .sapMBtnDefault,
118
+ &.sapMBtn .sapMBtnBack,
119
+ &.sapMBtn .sapMBtnUp {
120
+ height: 2rem;
121
+ min-width: 2rem;
122
+
123
+ .sapUiIcon {
124
+ width: 2rem;
125
+ max-height: 2rem;
126
+ height: 2rem;
127
+ line-height: 2rem;
128
+ }
142
129
 
143
- .sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
144
- background: @sapUiShellHoverBackground;
145
- border-color: transparent;
146
- bdi {
147
- color: @sapUiShellTextColor;
130
+ bdi {
131
+ line-height: 2rem;
132
+ }
133
+ }
148
134
  }
149
135
  }
150
-
151
- .sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnTransparent:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
152
- .sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
153
- .sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnDefault:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
154
- .sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnBack:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
155
- .sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnUp:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon {
156
- color: @sapUiShellInteractiveTextColor;
157
- border-color: transparent;
158
- }
159
-
160
- .sapMBtn.sapMBtnDisabled {
161
- opacity: @_sap_tnt_ToolHeader_DisabledOpacity;
162
- }
163
-
164
- .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnTransparent:not(.sapMToggleBtnPressed),
165
- .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnEmphasized:not(.sapMToggleBtnPressed),
166
- .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnDefault:not(.sapMToggleBtnPressed),
167
- .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnBack:not(.sapMToggleBtnPressed),
168
- .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnUp:not(.sapMToggleBtnPressed) {
169
- border-color: transparent;
170
- }
171
- }
172
-
173
- html.sap-desktop .sapTntToolHeader .sapMFooter-CTX .sapMBtn:focus .sapMBtnFocusDiv,
174
- .sapTntToolHeader .sapMBtn:focus .sapMBtnFocusDiv {
175
- border-color: @_sap_tnt_ToolHeader_BorderColor;
176
- }
177
-
178
- html.sap-desktop .sapTntToolHeader .sapMFooter-CTX .sapMBtn:focus > .sapMBtnEmphasized.sapMBtnActive > .sapMBtnFocusDiv,
179
- html.sap-desktop .sapTntToolHeader .sapMBtn:focus > .sapMBtnEmphasized > .sapMBtnFocusDiv {
180
- border-color: @_sap_tnt_ToolHeader_BorderColor;
181
136
  }
182
137
 
183
138
  // ==========================================================================
184
- // sap.m.MenuButton overriding
139
+ // sap.m.Text, sap.m.Title and sap.m.Label overriding
185
140
  // ==========================================================================
186
141
 
187
- .sapTntToolHeader.sapMIBar {
188
- .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
189
- color: @sapUiShellInteractiveTextColor;
190
- }
191
-
192
- .sapMSB:focus .sapMSBInner::after {
193
- border-color: @_sap_tnt_ToolHeader_BorderColor;
194
- }
195
-
196
- .sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnActive {
197
- background: @sapUiShellActiveBackground;
142
+ .sapTntToolHeader {
143
+ .sapMTitle {
144
+ text-shadow: none;
145
+ font-family: @sapFontBlackFamily;
146
+ font-size: 1.125rem;
147
+ line-height: 1.625rem;
198
148
  }
199
149
 
200
- .sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnActive::after {
201
- color: @sapUiShellInteractiveTextColor;
202
- background-color: transparent;
150
+ .sapMText,
151
+ .sapMLabel {
152
+ line-height: @sapContent_LineHeight;
153
+ color: @sapContent_LabelColor;
203
154
  }
204
155
 
205
- .sapMMenuBtn .sapMBtn:hover > .sapMBtnHoverable.sapMBtnEmphasized, .sapMMenuBtn span.sapMBtnInner.sapMBtnEmphasized {
206
- border-left: transparent;
156
+ &.sapMIBar.sapMTB .sapMBarChild.sapMText,
157
+ &.sapMIBar.sapMTB .sapMBarChild.sapMLabel {
158
+ margin-top: 2px; // to align the text/label with the title
159
+ margin-left: 0.75rem;
207
160
  }
161
+ }
208
162
 
209
- .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnActive.sapMBtnInner::after {
210
- height: auto;
163
+ .sapUiSizeCompact {
164
+ .sapTntToolHeader {
165
+ &.sapMIBar.sapMTB .sapMBarChild.sapMText,
166
+ &.sapMIBar.sapMTB .sapMBarChild.sapMLabel {
167
+ margin-top: 3px; // to align the text/label with the title
168
+ }
211
169
  }
212
170
  }
213
171
 
214
172
  // ==========================================================================
215
- // sap.m.Text, sap.m.Title and sap.m.Label overriding
173
+ // sap.m.SearchField overriding
216
174
  // ==========================================================================
217
175
 
218
176
  .sapTntToolHeader {
219
- .sapMText,
220
- .sapMTitle,
221
- .sapMLabel {
222
- color: @sapUiShellTextColor;
177
+ .sapMSF {
178
+ height: 2.5rem;
179
+ padding-top: 0px;
223
180
  }
224
181
 
225
- .sapMTitle {
226
- text-shadow: none;
182
+ .sapMSF .sapMSFF {
183
+ border-radius: 2rem;
184
+ height: 2.5rem;
227
185
  }
228
- }
229
186
 
230
- // ==========================================================================
231
- // sap.m.Select overriding
232
- // ==========================================================================
233
-
234
- .sapTntToolHeader {
235
- .sapMSlt,
236
- .sapMSlt:hover {
237
- background: transparent;
238
- border-color: lighten(@sapUiShellBorderColor,30);
239
- color: @sapUiShellTextColor;
187
+ .sapMSFB {
188
+ line-height: 2.5rem;
189
+ width: 1.875rem;
240
190
  }
241
191
 
242
- .sapMSlt.sapMSltExpanded {
243
- border-color: lighten(@sapUiShellBorderColor,30);
192
+ .sapMSFSSI {
193
+ display: inline;
244
194
  }
245
195
 
246
- .sapMSltHoverable:not(.sapMSltPressed):hover > .sapMSltArrow {
247
- background-color: transparent;
248
- border-color: lighten(@sapUiShellBorderColor,30);
196
+ .sapMSFF .sapMSFSSI:before {
197
+ content: "\e00d";
198
+ display: block;
199
+ font-style: normal;
200
+ width: 1rem;
201
+ height: 1rem;
202
+ font-family: 'SAP-icons';
203
+ margin-right: 0.375rem;
204
+ margin-top: 0.75rem;
249
205
  }
250
206
 
251
- .sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover {
252
- background: @sapUiShellHoverBackground;
253
- border-color: lighten(@sapUiShellInteractiveBorderColor, 10);
207
+ .sapMSFS::after {
208
+ content: "\e1ed";
254
209
  }
255
- }
256
- html.sap-desktop .sapTntToolHeader .sapMSlt:not(.sapMSltExpanded):not(.sapMSltDisabled):not(.sapMSltState):focus {
257
- outline-color: @_sap_tnt_ToolHeader_BorderColor;
258
- }
259
-
260
- html.sap-desktop .sapTntToolHeader .sapMSlt:not(.sapMSltExpanded):not(.sapMSltDisabled):not(.sapMSltState):focus::before {
261
- outline-color: @_sap_tnt_ToolHeader_BorderColor;
262
- }
263
210
 
264
- .sapTntToolHeader {
265
- .sapMSlt .sapUiIcon,
266
- .sapMSlt .sapMSelectListItemText,
267
- .sapMSlt .sapMSltArrow {
268
- color: @sapUiShellTextColor;
211
+ .sapMSFR::after,
212
+ .sapMSFS::after {
213
+ display: block;
214
+ width: 1.25rem;
215
+ height: 1.25rem;
216
+ border-radius: 0.75rem;
217
+ font-size: 0.75rem;
218
+ margin-top: 0.625rem;
219
+ line-height: 1.25rem;
269
220
  }
270
221
 
271
- .sapMSltPressed > .sapMSltArrow {
272
- background: transparent;
222
+ .sapMSFS {
223
+ width: 1.625rem;
224
+ border: none;
273
225
  }
274
226
 
275
- .sapMSlt.sapMSltPressed:not(.sapMSltDisabled) {
276
- background-color: @sapUiShellActiveBackground;
277
-
278
- &.sapMSltExpanded {
279
- background-color: @sapUiShellActiveBackground;
280
- }
227
+ .sapMSFS:active,
228
+ .sapMSFS:hover,
229
+ .sapMSFR:active,
230
+ .sapMSFR:hover {
231
+ background: none;
232
+ box-shadow: none;
233
+ line-height: 1.25rem;
281
234
  }
282
-
283
- .sapMSltDisabled {
284
- opacity: @_sap_tnt_ToolHeader_DisabledOpacity;
235
+
236
+ .sapMSFS:active::after,
237
+ .sapMSFR:active::after {
238
+ background: @sapActiveColor;
239
+ color: @sapContent_IconColor;
240
+ margin-top: 0.625rem;
285
241
  }
286
- }
287
-
288
- /* IconOnly */
289
242
 
290
- .sapTntToolHeader {
291
- .sapMSltIconOnly.sapMSltHoverable:hover:not(.sapMSltState) {
292
- background-color: @sapUiShellHoverBackground;
293
- border-color: transparent;
243
+ .sapMSFS:hover::after,
244
+ .sapMSFR:hover::after {
245
+ background: @sapHoverColor;
246
+ color: @sapContent_IconColor;
247
+ margin-top: 0.625rem;
294
248
  }
249
+ }
295
250
 
296
- .sapMSltIconOnly.sapMSltExpanded.sapMSltPressed.sapMSltHoverable:hover {
297
- background-color: @sapUiShellHoverBackground;
298
- border-color: transparent;
299
- }
251
+ .sapUiSizeCompact {
252
+ .sapTntToolHeader {
253
+ .sapMSF {
254
+ height: 2rem;
255
+ padding-top: 1px;
256
+ }
300
257
 
301
- .sapMSltIconOnly.sapMSltHoverable .sapUiIcon {
302
- color: @sapUiShellInteractiveTextColor;
303
- }
258
+ .sapMSF .sapMSFF {
259
+ height: 2rem;
260
+ }
304
261
 
305
- .sapMSltIconOnly.sapMSltHoverable:active .sapUiIcon {
306
- color: @sapUiShellActiveTextColor;
307
- }
262
+ .sapMSFB {
263
+ line-height: 2rem;
264
+ width: 1.5rem;
265
+ }
308
266
 
309
- .sapMSltIconOnly.sapMSltExpanded.sapMSltPressed:not(.sapMSltDisabled) {
310
- background-color: @sapUiShellActiveBackground;
311
- .sapUiIcon {
312
- color: @sapUiShellActiveTextColor;
267
+ .sapMSFF .sapMSFSSI:before {
268
+ margin-top: 0.5rem;
313
269
  }
314
270
  }
315
271
 
316
- .sapMSltIconOnly.sapMSltPressed.sapMSltHoverable:not(.sapMSltState):hover {
317
- background-color: @sapUiShellActiveBackground;
272
+ .sapMSFS:hover::after,
273
+ .sapMSFR:hover::after,
274
+ .sapMSFS:active::after,
275
+ .sapMSFR:active::after {
276
+ margin-top: 0.375rem;
318
277
  }
319
278
 
320
- .sapMSltPressed.sapMSltIconOnly:not(.sapMSltDisabled) {
321
- background-color: @sapUiShellActiveBackground;
322
- border-color: transparent;
279
+ .sapMSFS::after,
280
+ .sapMSFR::after {
281
+ margin-top: 0.375rem;
323
282
  }
324
283
  }
325
284
 
326
285
  // ==========================================================================
327
- // sap.m.SearchField overriding
286
+ // sap.m.IconTabHeader overriding
328
287
  // ==========================================================================
329
288
 
330
289
  .sapTntToolHeader {
331
- .sapMSF .sapMSFF {
332
- background: transparent;
333
- border-color: lighten(@sapUiShellBorderColor,30);
334
- color: @sapUiShellInteractiveTextColor;
335
- }
336
-
337
- .sapMSFDisabled {
338
- opacity: @_sap_tnt_ToolHeader_DisabledOpacity;
339
- }
340
-
341
- .sapMSF:not(.sapMSFDisabled) .sapMSFF:hover {
342
- border-color: lighten(@sapUiShellInteractiveBorderColor, 10);
343
- }
344
-
345
- .sapMSFF>.sapMSFB,
346
- .sapMSF.sapMFocus>.sapMSFF>.sapMSFB,
347
- .sapMSFI::placeholder {
348
- color: @sapUiShellInteractiveTextColor;
349
- }
350
-
351
- .sapMSFI,
352
- .sapMSFB {
353
- color: @sapUiShellTextColor;
354
- }
355
-
356
- .sapMSFB:hover {
357
- background-color: @sapUiShellHoverBackground;
358
- }
359
-
360
- .sapMSFF>.sapMSFB:not(.sapMSFBF):active,
361
- .sapMSFF>.sapMSFB.sapMSFBA {
362
- background-color: @sapUiButtonLiteActiveBackground;
363
- color: @sapUiShellInteractiveTextColor;
364
- }
365
-
366
- .sapMSFF > .sapMSFB:not(.sapMSFBF):active,
367
- .sapMSFF > .sapMSFB.sapMSFBA {
368
- background-color: @sapUiShellActiveBackground;
369
- color: @sapUiShellActiveTextColor;
370
- }
371
-
372
- .sapMFocus > .sapMSFF > .sapMSFB {
373
- color: @sapUiShellInteractiveTextColor;
290
+ .sapUshellShellTabBar .sapMITH,
291
+ .sapUshellShellTabBar.sapMITH {
292
+ box-shadow: none;
374
293
  }
375
294
  }
376
295
 
377
296
  // ==========================================================================
378
- // sap.m.IconTabHeader overriding
297
+ // sap.m.Image overriding
379
298
  // ==========================================================================
380
299
 
381
- .sapTntToolHeader:not(.sapUshellShellToolHeader) {
382
- .sapMITH .sapMITBText {
383
- color: @sapUiShellInteractiveTextColor;
384
- text-shadow: none;
385
- }
386
-
387
- .sapMITH .sapMITBDisabled {
388
- opacity: @_sap_tnt_ToolHeader_DisabledOpacity;
389
- }
390
-
391
- .sapMITH {
392
- border-color: transparent;
393
- }
394
-
395
- .sapMITH {
396
- .sapMITHStartOverflow,
397
- .sapMITHEndOverflow {
398
- .sapMITBItem {
399
- background-color: transparent;
400
- border: none;
401
-
402
- &:hover {
403
- background: @sapUiShellHoverBackground;
404
- }
405
-
406
- &:active {
407
- background: @sapUiShellActiveBackground;
408
- color: @sapUiShellActiveTextColor;
409
- }
410
-
411
- .sapMITBText {
412
- color: @sapUiShellInteractiveTextColor;
413
-
414
- .sapMITHShowSubItemsIcon .sapUiIcon {
415
- color: @sapUiShellInteractiveTextColor;
416
- }
417
- }
418
- }
419
- }
420
- }
421
-
422
- .sapMITBHead .sapMITBFilter .sapMITBText + .sapMITBContentArrow {
423
- height: 0.875rem;
424
- margin: 0 -0.1875rem;
425
- }
426
- }
427
-
428
- /* Focus Colors*/
429
-
430
- html.sap-desktop .sapTntToolHeader {
431
-
432
- /* Custom focus outline */
433
- .sapMITBTextOnly .sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBText,
434
- .sapMITBItem:not(.sapUiDnDDragging):focus.sapMITBAll {
435
- &::after {
436
- border-color: @_sap_tnt_ToolHeader_BorderColor;
437
- }
438
- }
439
-
440
- .sapMITHStartOverflow,
441
- .sapMITHEndOverflow {
442
- .sapMITBItem:not(.sapUiDnDDragging) {
443
- &:focus::after {
444
- border-color: @_sap_tnt_ToolHeader_BorderColor;
445
- }
446
- }
300
+ .sapTntToolHeader {
301
+ .sapMImg {
302
+ height: 1.625rem;
447
303
  }
448
- }
449
304
 
450
- // ==========================================================================
451
- // sap.f.Breadcrumbs overriding
452
- // ==========================================================================
453
- .sapTntToolHeader .sapMBreadcrumbs {
454
- .sapMBreadcrumbsItem,
455
- .sapMLnk,
456
- .sapMSltIcon:before{
457
- color: @sapUiShellInteractiveTextColor;
305
+ &.sapMIBar.sapMTB .sapMBarChild.sapMImg {
306
+ margin-left: 0.75rem;
458
307
  }
459
308
 
460
- .sapMBreadcrumbsSeparator {
461
- color: @sapUiShellTextColor;
309
+ .sapMImgFocusable:focus {
310
+ outline: @sapContent_FocusStyle @sapContent_FocusWidth @sapContent_FocusColor;
311
+ outline-offset: 0.125rem;
312
+ border-radius: 0.25rem;
462
313
  }
463
314
  }
@@ -3,6 +3,19 @@
3
3
  /* Evening Horizon theme */
4
4
  /* ================================= */
5
5
 
6
- @_sap_tnt_ToolPage_AsideWidthOnTablet: 3.5rem;
7
- @_sap_tnt_ToolPage_HeaderHeight: 3.5rem;
8
- @_sap_tnt_ToolPage_HeaderShadow: @sapUiContentShadow0;
6
+ @_sap_tnt_ToolPage_Paddings: 0.5rem 0.5rem 0 0.5rem;
7
+ @_sap_tnt_ToolPage_PaddingsTablet: 0.5rem;
8
+ @_sap_tnt_ToolPage_PaddingsPhone: 0.25rem;
9
+ @_sap_tnt_ToolPage_AsideMargins: 0.5rem 0.5rem 0 0;
10
+ @_sap_tnt_ToolPage_AsideMarginsPhone: 0.25rem 0.25rem 0 0;
11
+ @_sap_tnt_ToolPage_ContentMargins: 0.5rem 0 0 0;
12
+ @_sap_tnt_ToolPage_ContentMarginsPhone: 0.25rem 0 0 0;
13
+ @_sap_tnt_ToolPage_ContentShadow: 0 0 0.125rem 0 fade(@sapContent_ShadowColor,16), 0 0.5rem 1rem 0 fade(@sapContent_ShadowColor, 32);
14
+ @_sap_tnt_ToolPage_ContentBackgroundStandard: @sapBackgroundColor;
15
+ @_sap_tnt_ToolPage_ContentBackgroundSolid: @sapBackgroundColor;
16
+ @_sap_tnt_ToolPage_ContentBackgroundTransparent: transparent;
17
+ @_sap_tnt_ToolPage_ContentBackgroundList: @sapGroup_ContentBackground;
18
+ @_sap_tnt_ToolPage_ContentBorderRadius: 0.5rem 0.5rem 0 0;
19
+ @_sap_tnt_ToolPage_ContentBorderRadiusTabletPhone: 0.5rem;
20
+ @_sap_tnt_ToolPage_AsideCollapsedPhoneTransform: calc(~"-100% - 0.25rem");
21
+ @_sap_tnt_ToolPage_AsideCollapsedPhoneTransformRtl: calc(~"100% + 0.25rem");