@openui5/themelib_sap_horizon 1.129.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 (31) hide show
  1. package/THIRDPARTY.txt +1 -1
  2. package/package.json +18 -18
  3. package/src/sap/m/themes/sap_horizon/Carousel.less +2 -0
  4. package/src/sap/m/themes/sap_horizon/ColumnListItem.less +5 -5
  5. package/src/sap/m/themes/sap_horizon/IconTabBar.less +279 -212
  6. package/src/sap/m/themes/sap_horizon/Link.less +13 -10
  7. package/src/sap/m/themes/sap_horizon/SplitButton.less +18 -0
  8. package/src/sap/m/themes/sap_horizon_dark/Carousel.less +2 -0
  9. package/src/sap/m/themes/sap_horizon_dark/ColumnListItem.less +5 -5
  10. package/src/sap/m/themes/sap_horizon_dark/IconTabBar.less +217 -158
  11. package/src/sap/m/themes/sap_horizon_dark/Link.less +13 -10
  12. package/src/sap/m/themes/sap_horizon_dark/SplitButton.less +18 -0
  13. package/src/sap/m/themes/sap_horizon_hcb/Carousel.less +2 -0
  14. package/src/sap/m/themes/sap_horizon_hcb/ColumnListItem.less +5 -5
  15. package/src/sap/m/themes/sap_horizon_hcb/IconTabBar.less +90 -79
  16. package/src/sap/m/themes/sap_horizon_hcb/Link.less +12 -9
  17. package/src/sap/m/themes/sap_horizon_hcw/Carousel.less +2 -0
  18. package/src/sap/m/themes/sap_horizon_hcw/ColumnListItem.less +5 -6
  19. package/src/sap/m/themes/sap_horizon_hcw/IconTabBar.less +95 -83
  20. package/src/sap/m/themes/sap_horizon_hcw/Link.less +12 -9
  21. package/src/sap/ui/core/themes/sap_horizon/.theme +1 -1
  22. package/src/sap/ui/core/themes/sap_horizon_dark/.theme +1 -1
  23. package/src/sap/ui/core/themes/sap_horizon_hcb/.theme +1 -1
  24. package/src/sap/ui/core/themes/sap_horizon_hcw/.theme +1 -1
  25. package/src/sap/ui/integration/themes/sap_horizon/library.source.less +0 -1
  26. package/src/sap/ui/integration/themes/sap_horizon_dark/library.source.less +0 -1
  27. package/src/sap/ui/rta/themes/sap_horizon_dark/ChangeVisualization.less +0 -1
  28. package/src/sap/ui/rta/themes/sap_horizon_hcb/ChangeVisualization.less +0 -1
  29. package/src/sap/ui/rta/themes/sap_horizon_hcw/ChangeVisualization.less +0 -1
  30. package/src/sap/ui/integration/themes/sap_horizon/Paginator.less +0 -5
  31. package/src/sap/ui/integration/themes/sap_horizon_dark/Paginator.less +0 -5
@@ -4,32 +4,34 @@
4
4
  /* =========================== */
5
5
 
6
6
  .sapMLnkDsbl {
7
- opacity: @sapUiContentDisabledOpacity;
7
+ opacity: var(--sapContent_DisabledOpacity);
8
8
  outline: none;
9
9
  cursor: default;
10
10
  }
11
11
 
12
12
  .sapMLIBActive .sapMLnk {
13
- color: @sapUiListActiveTextColor;
13
+ color: var(--sapList_Active_TextColor);
14
14
  text-decoration: underline;
15
15
  }
16
16
 
17
17
  .sapMLnk.sapMLnkSubtle {
18
- color: @sapUiLinkSubtleColor;
18
+ color: var(--sapLink_SubtleColor);
19
19
  text-decoration: underline;
20
20
 
21
21
  &:not(.sapMLnkDsbl) {
22
+
22
23
  &:active {
23
- color: @sapUiLinkSubtleColor;
24
+ color: var(--sapLink_SubtleColor);
24
25
  }
25
26
  }
26
27
  }
27
28
 
28
29
  html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
30
+
29
31
  &:focus {
30
32
  border-radius: 0.125rem;
31
- background-color: @sapUiContentFocusColor;
32
- color: @sapUiContentContrastTextColor;
33
+ background-color: var(--sapContent_FocusColor);
34
+ color: var(--sapContent_ContrastTextColor);
33
35
  text-shadow: none;
34
36
  outline: none;
35
37
 
@@ -39,23 +41,24 @@ html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
39
41
  }
40
42
 
41
43
  &.sapMLnkSubtle {
44
+
42
45
  &:hover:not(:active):not(:focus) {
43
- color: @sapUiLinkSubtleColor;
46
+ color: var(--sapLink_SubtleColor);
44
47
  text-decoration: none;
45
48
  }
46
49
  }
47
50
  }
48
51
 
49
52
  .sapMLnk:not(.sapMLnkDsbl) {
50
- text-shadow: @sapUiContentTextShadow;
53
+ text-shadow: var(--sapContent_TextShadow);
51
54
  }
52
55
 
53
56
  /* align Link in Form with Label */
54
57
  .sapUiFormEdit .sapMLnk {
55
58
  margin-top: 0.875rem; /* don't use padding as this would stretch the focus outline */
56
- margin-bottom: 0.625rem; /* for some reason browser adds 4px, display: block would lead to stretched focus outline*/
59
+ margin-bottom: 0.625rem; /* for some reason browser adds 4px, display: block would lead to stretched focus outline */
57
60
  }
58
61
 
59
62
  .sapMListTblRow.sapMLIBSelected .sapMLnk:not(.sapMLnkDsbl) {
60
- text-shadow: @sapUiContentTextShadow;
63
+ text-shadow: var(--sapContent_TextShadow);
61
64
  }
@@ -277,6 +277,24 @@
277
277
  border-color: @sapUiContentContrastFocusColor;
278
278
  }
279
279
 
280
+ .sapMSB.sapMSBEmphasized:focus {
281
+ .sapMSBInner:has(.sapMBtn):has(.sapMBtnActive)::after {
282
+ border-color: transparent;
283
+ }
284
+ .sapMBtnActive.sapMFocusable:not(.sapMBadgeIndicator)::before {
285
+ content: '';
286
+ position: absolute;
287
+ box-sizing: border-box;
288
+ left: 0.0625rem;
289
+ top: 0.0625rem;
290
+ right: 0.0625rem;
291
+ bottom: 0.0625rem;
292
+ border: 0.125rem solid var(--sapContent_FocusColor);
293
+ pointer-events: none;
294
+ border-radius: 0.375rem;
295
+ }
296
+ }
297
+
280
298
  .sapMSB .sapMSBText:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
281
299
  margin-right: 2.25rem;
282
300
  }
@@ -9,6 +9,8 @@
9
9
 
10
10
  @_sap_m_Carousel_BackgroundColor: var(--sapBackgroundColor);
11
11
  @_sap_m_Carousel_MinWidth: 15.5rem;
12
+ @_sap_m_Carousel_PageIndicatorBarHeight: 2.75rem;
13
+ @_sap_m_Carousel_BottomArrowsOffset: calc(~'2.75rem + 1px');
12
14
  @_sap_m_Carousel_ControlsNoArrowsHeight: 2.75rem;
13
15
  @_sap_m_Carousel_NumericIndicatorTextColor: var(--sapPageFooter_TextColor);
14
16
  @_sap_m_Carousel_PrevAndNextSize: 2.125rem;
@@ -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
  }
@@ -3,11 +3,11 @@
3
3
  /* Horizon High Contrast Black theme */
4
4
  /* ================================== */
5
5
 
6
- // ==========================================================================
7
- // Variables overriding
8
- // ==========================================================================
6
+ /* ========================================================================== */
7
+ /* Variables overriding */
8
+ /* ========================================================================== */
9
9
 
10
- @_sap_m_IconTabBar_TextColor: @sapUiContentLabelColor;
10
+ @_sap_m_IconTabBar_TextColor: var(--sapContent_LabelColor);
11
11
  @_sap_m_IconTabBar_TextShadow: none;
12
12
  @_sap_m_IconTabBar_HeaderFocusBorderTopOffset: -1px;
13
13
  @_sap_m_IconTabBar_HeaderFocusBorderBottomOffset: -1px;
@@ -15,31 +15,31 @@
15
15
  @_sap_m_IconTabBar_HeaderFocusBorderLeftOffset: -1px;
16
16
  @_sap_m_IconTabBar_More_Button_Border_Radius: 0px;
17
17
 
18
- // ==================== Cozy size ====================
18
+ /* ==================== Cozy size ==================== */
19
19
 
20
- // Content arrow
20
+ /* Content arrow */
21
21
  @_sap_m_IconTabBar_ContentArrowBorderWidth: 0.313rem;
22
22
  @_sap_m_IconTabBar_ContentArrowHeight: 0.875rem;
23
23
 
24
- // Inline mode
24
+ /* Inline mode */
25
25
  @_sap_m_IconTabBar_InLineFilterMargin: 0.875rem 0 0 0;
26
26
  @_sap_m_IconTabBar_InLineTextOnlyVerticalHeight: 2.75rem;
27
27
  @_sap_m_IconTabBar_InLineTextOnlyContentArrowHeight: @_sap_m_IconTabBar_ContentArrowHeight;
28
28
 
29
- // TextOnly mode
29
+ /* TextOnly mode */
30
30
  @_sap_m_IconTabBar_TextOnlyTabPadding: 0 0 0.125rem 0;
31
31
  @_sap_m_IconTabBar_TextOnlyVerticalHeight: 3rem;
32
32
 
33
- // NoText mode
33
+ /* NoText mode */
34
34
  @_sap_m_IconTabBar_NoTextFilterWidth: 3.125rem;
35
35
  @_sap_m_IconTabBar_NoTextVerticalHeight: 3.75rem;
36
36
 
37
- // All tabs
37
+ /* All tabs */
38
38
  @_sap_m_IconTabBar_AllTabHeight: 2.875rem;
39
39
  @_sap_m_IconTabBar_AllTabLineHeight: 2.875rem;
40
40
  @_sap_m_IconTabBar_AllTabMarginBottom: 0.375rem;
41
41
 
42
- // Horizontal tabs
42
+ /* Horizontal tabs */
43
43
  @_sap_m_IconTabBar_HorizontalFilterHeight: 3.75rem;
44
44
  @_sap_m_IconTabBar_HorizontalTabHeight: 2.75rem;
45
45
  @_sap_m_IconTabBar_HorizontalWrapperHeight: 2.75rem;
@@ -48,20 +48,20 @@
48
48
  @_sap_m_IconTabBar_HorizontalTextPaddingTop: 0.375rem;
49
49
  @_sap_m_IconTabBar_HorizontalTextPaddingLeft: 0.125rem;
50
50
 
51
- // Vertical tabs
51
+ /* Vertical tabs */
52
52
  @_sap_m_IconTabBar_VerticalHeight: 4.625rem;
53
53
  @_sap_m_IconTabBar_VerticalContentArrowHeight: 0.625rem;
54
54
 
55
- // Filter icon
55
+ /* Filter icon */
56
56
  @_sap_m_IconTabBar_FilterIconHeight: 2.75rem;
57
57
  @_sap_m_IconTabBar_FilterIconWidth: 2.75rem;
58
58
  @_sap_m_IconTabFilter_Icon_Border_Radius: 0.375rem;
59
- @_sap_m_IconTabFilter_Icon_Border_Color: @sapUiButtonBorderColor;
59
+ @_sap_m_IconTabFilter_Icon_Border_Color: var(--sapButton_BorderColor);
60
60
 
61
- // Filter text
61
+ /* Filter text */
62
62
  @_sap_m_IconTabBar_FilterTextLineHeight: 0.875rem;
63
63
 
64
- // Separator
64
+ /* Separator */
65
65
  @_sap_m_IconTabBar_SeparatorHeight: 2rem;
66
66
  @_sap_m_IconTabBar_SeparatorMargin: 0.75rem 0.25rem 0;
67
67
  @_sap_m_IconTabBar_TextOnlySeparatorMargin: 0.375rem 0.25rem 0.375rem;
@@ -69,83 +69,83 @@
69
69
  @_sap_m_IconTabBar_SeparatorIconHeight: 2.75rem;
70
70
  @__sap_m_IconTabBar_SeparatorIconLineHeight: 2.75rem;
71
71
 
72
- // Left and Right arrows
72
+ /* Left and Right arrows */
73
73
  @_sap_m_IconTabBar_ArrowScrollPadding: 0.875rem 0.4rem;
74
74
  @_sap_m_IconTabBar_SplitContainerArrowScrollPadding: 0.875rem 0.4rem;
75
75
 
76
- // Header
77
- @_sap_m_IconTabBar_HeaderBackgroundTranslucent: @sapUiObjectHeaderBackground;
76
+ /* Header */
77
+ @_sap_m_IconTabBar_HeaderBackgroundTranslucent: var(--sapObjectHeader_Background);
78
78
 
79
79
  @_sap_m_IconTabBar_HeaderBorderBottom: none;
80
80
  @_sap_m_IconTabBar_HeaderShadow: none;
81
81
 
82
- // Content
83
- @_sap_m_IconTabBar_ContentBackground: @sapUiBaseBG;
84
- @_sap_m_IconTabBar_ContentBackgroundTranslucent: @sapUiGroupContentBackground;
82
+ /* Content */
83
+ @_sap_m_IconTabBar_ContentBackground: var(--sapBackgroundColor);
84
+ @_sap_m_IconTabBar_ContentBackgroundTranslucent: var(--sapGroup_ContentBackground);
85
85
 
86
- // ==================== Compact size ====================
86
+ /* ==================== Compact size ==================== */
87
87
 
88
- // Content arrow
88
+ /* Content arrow */
89
89
  @_sap_m_IconTabBar_Compact_NoTextContentArrowHeight: 1rem;
90
90
  @_sap_m_IconTabBar_Compact_ContentArrowHeight: 1rem;
91
91
  @_sap_m_IconTabBar_Compact_NoTextContentArrowWidth: 2.375rem;
92
92
 
93
- // Inline mode (same as cozy)
93
+ /* Inline mode (same as cozy) */
94
94
  @_sap_m_IconTabBar_Compact_InLineVerticalTabHeight: @_sap_m_IconTabBar_InLineTextOnlyVerticalHeight;
95
95
  @_sap_m_IconTabBar_Compact_InLineFilterTextMargin: @_sap_m_IconTabBar_InLineFilterMargin;
96
96
  @_sap_m_IconTabBar_Compact_TextOnlyContentArrowHeight: @_sap_m_IconTabBar_VerticalContentArrowHeight;
97
97
 
98
- // TextOnly (same as cozy)
98
+ /* TextOnly (same as cozy) */
99
99
  @_sap_m_IconTabBar_Compact_TextOnlyVerticalHeight: @_sap_m_IconTabBar_TextOnlyVerticalHeight;
100
100
  @_sap_m_IconTabBar_Compact_TextOnlyTabPadding: @_sap_m_IconTabBar_TextOnlyTabPadding;
101
101
  @_sap_m_IconTabBar_Compact_TextOnlyHeadPadding: 0 0.925rem 0 0.1875rem;
102
102
  @_sap_m_IconTabBar_Compact_TextOnlyTextLineHeight: 1rem;
103
103
  @_sap_m_IconTabBar_Compact_TextOnlyTextPadding: 0;
104
104
 
105
- // NoText
105
+ /* NoText */
106
106
  @_sap_m_IconTabBar_Compact_NoTextTabWidth: 2.375rem;
107
107
  @_sap_m_IconTabBar_Compact_NoTextVerticalHeight: 3rem;
108
108
 
109
- // Horizontal
109
+ /* Horizontal */
110
110
  @_sap_m_IconTabBar_Compact_HorizontalHeight: 3rem;
111
111
  @_sap_m_IconTabBar_Compact_HorizontalContentArrowHeight: 1rem;
112
112
 
113
- // Vertical
113
+ /* Vertical */
114
114
  @_sap_m_IconTabBar_Compact_VerticalHeight: 3.875rem;
115
115
 
116
- // Filter text
116
+ /* Filter text */
117
117
  @_sap_m_IconTabBar_Compact_FilterTextPadding: 0.375rem 0 0;
118
118
 
119
- // Focus border
119
+ /* Focus border */
120
120
  @_sap_m_IconTabBar_Compact_HorizontalFocusBottom: 1rem;
121
121
 
122
- // =========== Phone ===========
122
+ /* =========== Phone =========== */
123
123
 
124
- // Content arrow
124
+ /* Content arrow */
125
125
  @_sap_m_IconTabBar_Phone_ContentArrowHeight: 0.625rem;
126
126
 
127
127
  @_sap_m_IconTabBar_Phone_TextOnlyContentArrowHeight: 0.5rem;
128
128
  @_sap_m_IconTabBar_Phone_Compact_TextOnlyContentArrowHeight: 0.75rem;
129
129
 
130
- // ==========================================================================
131
- // Variables
132
- // ==========================================================================
130
+ /* ========================================================================== */
131
+ /* Variables */
132
+ /* ========================================================================== */
133
133
 
134
134
  @_sap_m_IconTabBar_TextHoverColor: darken(@sapUiGroupTitleTextColor, 10);
135
- @_sap_m_IconTabBar_SelectedTextColor: @sapUiContentLabelColor;
135
+ @_sap_m_IconTabBar_SelectedTextColor: var(--sapContent_LabelColor);
136
136
  @_sap_m_IconTabBar_SelectedTextHoverColor: darken(@sapUiSelected, 10);
137
137
  @_sap_m_IconTabBar_ArrowScroll_AfterHeight: 1px;
138
138
 
139
- // =========== Shell ===========
140
- @_sap_m_IconTabBar_ShellHeaderShadow: @sapUiShellShadow;
139
+ /* =========== Shell =========== */
140
+ @_sap_m_IconTabBar_ShellHeaderShadow: var(--sapShell_Shadow);
141
141
  @_sap_m_IconTabBar_ShellContentArrowHeight: 0.313rem;
142
- @_sap_m_IconTabBar_ShellOverflowBorderColor: @sapUiButtonBorderColor;
143
- @_sap_m_IconTabBar_ShellOverflowHoverBorderColor: @sapUiButtonHoverBorderColor;
144
- @_sap_m_IconTabBar_ShellOverflowPressedBorderColor: @sapUiButtonActiveBorderColor;
142
+ @_sap_m_IconTabBar_ShellOverflowBorderColor: var(--sapButton_BorderColor);
143
+ @_sap_m_IconTabBar_ShellOverflowHoverBorderColor: var(--sapButton_Hover_BorderColor);
144
+ @_sap_m_IconTabBar_ShellOverflowPressedBorderColor: var(--sapButton_Active_BorderColor);
145
145
 
146
146
  /* Head Container */
147
147
  .sapMITH {
148
- z-index: 1; // shows the bottom shadow of the ITHeader over the content of the ITB
148
+ z-index: 1; /* shows the bottom shadow of the ITHeader over the content of the ITB */
149
149
 
150
150
  .sapMITBHead {
151
151
  padding-top: 0.875rem;
@@ -246,9 +246,9 @@
246
246
  border-bottom: none;
247
247
  position: relative;
248
248
 
249
- // creates border bottom with rounded top corners
249
+ /* creates border bottom with rounded top corners */
250
250
  &::after {
251
- content: "";
251
+ content: '';
252
252
  position: absolute;
253
253
  bottom: 0;
254
254
  left: 0;
@@ -269,12 +269,13 @@
269
269
  /* Content Container */
270
270
 
271
271
  .sapMITBContent {
272
- border: 0.125rem solid @sapUiObjectHeaderBorderColor;
272
+ border: 0.125rem solid var(--sapObjectHeader_BorderColor);
273
273
  }
274
274
 
275
275
  .sapMITBContainerContent {
276
+
276
277
  &.sapMITBContentClosed {
277
- border-bottom: 0.125rem solid @sapUiObjectHeaderBorderColor;
278
+ border-bottom: 0.125rem solid var(--sapObjectHeader_BorderColor);
278
279
  }
279
280
  }
280
281
 
@@ -294,17 +295,17 @@
294
295
  }
295
296
 
296
297
  .sapMITBFilterIcon {
297
- border: 1px solid @sapUiGroupTitleTextColor;
298
+ border: 1px solid var(--sapGroup_TitleTextColor);
298
299
  }
299
300
 
300
301
  .sapMITBFilterDefault {
301
- color: @sapUiContentContrastIconColor;
302
+ color: var(--sapContent_ContrastIconColor);
302
303
  }
303
304
 
304
305
  .sapMITBSelected {
305
306
 
306
307
  .sapMITBContentArrow::after {
307
- background: @sapUiListSelectionBorderColor;
308
+ background: var(--sapList_SelectionBorderColor);
308
309
  }
309
310
 
310
311
  .sapMITBFilterDefault,
@@ -312,8 +313,8 @@
312
313
  .sapMITBFilterPositive,
313
314
  .sapMITBFilterNegative,
314
315
  .sapMITBFilterCritical {
315
- background: @sapUiSelected;
316
- color: @sapUiContentContrastIconColor;
316
+ background: var(--sapSelectedColor);
317
+ color: var(--sapContent_ContrastIconColor);
317
318
  }
318
319
  }
319
320
 
@@ -337,6 +338,7 @@
337
338
  }
338
339
 
339
340
  .sapMITH.sapMITBNoText .sapMITBHead {
341
+
340
342
  > .sapMITBSepLine {
341
343
  margin: 0.25rem 0.25rem 0 0;
342
344
  }
@@ -345,6 +347,7 @@
345
347
  .sapMITH.sapUiSizeCompact {
346
348
 
347
349
  &.sapMITBNoText .sapMITBHead {
350
+
348
351
  > .sapMITBSepLine {
349
352
  margin: 0 0.125rem 0 0.125rem;
350
353
  }
@@ -352,7 +355,7 @@
352
355
 
353
356
  .sapMITBSepLine {
354
357
  border: unset;
355
- border-right: 1px solid @sapUiGroupTitleBorderColor;
358
+ border-right: 1px solid var(--sapGroup_TitleBorderColor);
356
359
  margin: 0.625rem 0.125rem 0 0.125rem;
357
360
  }
358
361
  }
@@ -364,9 +367,11 @@
364
367
  }
365
368
 
366
369
  &.sapMITBHorizontal {
370
+
367
371
  .sapMITBTab {
368
372
  margin-top: 0;
369
373
  }
374
+
370
375
  + .sapMITBSepLine {
371
376
  margin-top: 0.5rem;
372
377
  }
@@ -375,7 +380,7 @@
375
380
 
376
381
  .sapMITBSepLine {
377
382
  border: unset;
378
- border-right: 1px solid @sapUiGroupTitleBorderColor;
383
+ border-right: 1px solid var(--sapGroup_TitleBorderColor);
379
384
  }
380
385
 
381
386
  .sapUiMedia-Std-Phone {
@@ -387,7 +392,9 @@
387
392
 
388
393
  /* Custom focus outline */
389
394
  html.sap-desktop {
395
+
390
396
  .sapMITBTextOnly .sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBText {
397
+
391
398
  &::after {
392
399
  top: -0.1875rem;
393
400
  bottom: -0.1875rem;
@@ -406,6 +413,7 @@ html.sap-desktop {
406
413
  .sapMITH.sapUiSizeCompact {
407
414
 
408
415
  .sapMITBItem:focus.sapMITBAll {
416
+
409
417
  &::after {
410
418
  bottom: 1.3rem;
411
419
  top: 0.125rem;
@@ -420,10 +428,10 @@ html.sap-desktop {
420
428
  position: relative;
421
429
  }
422
430
 
423
- .sapMITBFilter .sapMITBText:before,
424
- .sapMITBFilter.sapMITBVertical .sapMITBTab:after,
425
- .sapMITBSelectItem .sapMITBText:before {
426
- font-family: 'SAP-icons';
431
+ .sapMITBFilter .sapMITBText::before,
432
+ .sapMITBFilter.sapMITBVertical .sapMITBTab::after,
433
+ .sapMITBSelectItem .sapMITBText::before {
434
+ font-family: var(--sapContent_IconFontFamily);
427
435
  font-size: 0.75rem;
428
436
  margin-right: 0.5rem;
429
437
  speak: none;
@@ -434,41 +442,41 @@ html.sap-desktop {
434
442
  .sapMITBTextOnly .sapMITBFilterPositive .sapMITBText:before,
435
443
  .sapMITBVertical.sapMITBFilterPositive .sapMITBTab:after,
436
444
  .sapMITBSelectItem.sapMITBFilterPositive .sapMITBText:before {
437
- color: @sapUiPositiveText;
438
- content: "\e1c1";
445
+ color: var(--sapPositiveTextColor);
446
+ content: '\e1c1';
439
447
  }
440
448
 
441
- .sapMITBHorizontal.sapMITBFilterNegative .sapMITBText:before,
442
- .sapMITBTextOnly .sapMITBFilterNegative .sapMITBText:before,
443
- .sapMITBVertical.sapMITBFilterNegative .sapMITBTab:after,
444
- .sapMITBSelectItem.sapMITBFilterNegative .sapMITBText:before {
445
- color: @sapUiNegativeText;
446
- content: "\e1ec";
449
+ .sapMITBHorizontal.sapMITBFilterNegative .sapMITBText::before,
450
+ .sapMITBTextOnly .sapMITBFilterNegative .sapMITBText::before,
451
+ .sapMITBVertical.sapMITBFilterNegative .sapMITBTab::after,
452
+ .sapMITBSelectItem.sapMITBFilterNegative .sapMITBText::before {
453
+ color: var(--sapNegativeTextColor);
454
+ content: '\e1ec';
447
455
  }
448
456
 
449
- .sapMITBHorizontal.sapMITBFilterCritical .sapMITBText:before,
450
- .sapMITBTextOnly .sapMITBFilterCritical .sapMITBText:before,
451
- .sapMITBVertical.sapMITBFilterCritical .sapMITBTab:after,
452
- .sapMITBSelectItem.sapMITBFilterCritical .sapMITBText:before {
453
- color: @sapUiCriticalText;
454
- content: "\e053";
457
+ .sapMITBHorizontal.sapMITBFilterCritical .sapMITBText::before,
458
+ .sapMITBTextOnly .sapMITBFilterCritical .sapMITBText::before,
459
+ .sapMITBVertical.sapMITBFilterCritical .sapMITBTab::after,
460
+ .sapMITBSelectItem.sapMITBFilterCritical .sapMITBText::before {
461
+ color: var(--sapCriticalTextColor);
462
+ content: '\e053';
455
463
  }
456
464
 
457
- .sapMITBVertical.sapMITBFilter .sapMITBTab:after {
465
+ .sapMITBVertical.sapMITBFilter .sapMITBTab::after {
458
466
  bottom: 0;
459
467
  margin-right: -1rem;
460
468
  position: absolute;
461
469
  }
462
470
 
463
- .sapMITBTextOnly .sapMITBTab:after {
471
+ .sapMITBTextOnly .sapMITBTab::after {
464
472
  display: none;
465
473
  }
466
474
 
467
- .sapMITBHorizontal.sapMITBFilter .sapMITBText:before {
475
+ .sapMITBHorizontal.sapMITBFilter .sapMITBText::before {
468
476
  margin-right: 0.25rem;
469
477
  }
470
478
 
471
- // Semantic icons in Select List
479
+ /* Semantic icons in Select List */
472
480
  .sapMITBSelectItem .sapMITBText::before {
473
481
  position: absolute;
474
482
  margin-left: -3.5rem;
@@ -480,6 +488,7 @@ html.sap-desktop {
480
488
  }
481
489
 
482
490
  .sapUiSizeCompact {
491
+
483
492
  .sapMITBSelectItem .sapMITBText::before {
484
493
  position: absolute;
485
494
  margin-left: -2.75rem;
@@ -492,11 +501,13 @@ html.sap-desktop {
492
501
  }
493
502
 
494
503
  /* ------------------------------------------------ */
495
- /* IconTabBar Badge */
504
+ /* IconTabBar Badge */
496
505
  /* ------------------------------------------------ */
497
506
 
498
- .sapMITH, .sapMITBFilterPopover {
507
+ .sapMITH,
508
+ .sapMITBFilterPopover {
509
+
499
510
  .sapMBadge .sapMBadgeAttention {
500
- background-color: @sapUiContentIconColor;
511
+ background-color: var(--sapContent_IconColor);
501
512
  }
502
513
  }
@@ -4,30 +4,32 @@
4
4
  /* ================================== */
5
5
 
6
6
  .sapMLnkDsbl {
7
- opacity: @sapUiContentDisabledOpacity;
7
+ opacity: var(--sapContent_DisabledOpacity);
8
8
  outline: none;
9
9
  cursor: default;
10
10
  }
11
11
 
12
12
  .sapMLIBActive .sapMLnk {
13
- color: @sapUiListActiveTextColor;
13
+ color: var(--sapList_Active_TextColor);
14
14
  text-decoration: underline;
15
15
  }
16
16
 
17
17
  .sapMLnk.sapMLnkSubtle {
18
- color: @sapUiLinkSubtleColor;
18
+ color: var(--sapLink_SubtleColor);
19
19
  text-decoration: underline;
20
20
 
21
21
  &:not(.sapMLnkDsbl) {
22
+
22
23
  &:active {
23
- color: @sapUiLinkSubtleColor;
24
+ color: var(--sapLink_SubtleColor);
24
25
  }
25
26
  }
26
27
  }
27
28
 
28
29
  html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
30
+
29
31
  &:focus {
30
- outline: 0.125rem dotted @sapUiContentFocusColor;
32
+ outline: 0.125rem dotted var(--sapContent_FocusColor);
31
33
 
32
34
  &:hover:not(:active) {
33
35
  text-decoration: none;
@@ -35,23 +37,24 @@ html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
35
37
  }
36
38
 
37
39
  &.sapMLnkSubtle {
40
+
38
41
  &:hover:not(:active):not(:focus) {
39
- color: @sapUiLinkSubtleColor;
42
+ color: var(--sapLink_SubtleColor);
40
43
  text-decoration: none;
41
44
  }
42
45
  }
43
46
  }
44
47
 
45
48
  .sapMLnk:not(.sapMLnkDsbl) {
46
- text-shadow: @sapUiContentTextShadow;
49
+ text-shadow: var(--sapContent_TextShadow);
47
50
  }
48
51
 
49
52
  /* align Link in Form with Label */
50
53
  .sapUiFormEdit .sapMLnk {
51
54
  margin-top: 0.875rem; /* don't use padding as this would stretch the focus outline */
52
- margin-bottom: 0.625rem; /* for some reason browser adds 4px, display: block would lead to stretched focus outline*/
55
+ margin-bottom: 0.625rem; /* for some reason browser adds 4px, display: block would lead to stretched focus outline */
53
56
  }
54
57
 
55
58
  .sapMListTblRow.sapMLIBSelected .sapMLnk:not(.sapMLnkDsbl) {
56
- text-shadow: @sapUiContentTextShadow;
59
+ text-shadow: var(--sapContent_TextShadow);
57
60
  }
@@ -9,6 +9,8 @@
9
9
 
10
10
  @_sap_m_Carousel_BackgroundColor: var(--sapBackgroundColor);
11
11
  @_sap_m_Carousel_MinWidth: 15.5rem;
12
+ @_sap_m_Carousel_PageIndicatorBarHeight: 2.75rem;
13
+ @_sap_m_Carousel_BottomArrowsOffset: calc(~'2.75rem + 1px');
12
14
  @_sap_m_Carousel_ControlsNoArrowsHeight: 2.75rem;
13
15
  @_sap_m_Carousel_NumericIndicatorTextColor: var(--sapPageFooter_TextColor);
14
16
  @_sap_m_Carousel_PrevAndNextSize: 2.125rem;
@@ -10,20 +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;
21
-
20
+ box-shadow: inset 0px -0.125rem var(--sapList_SelectionBorderColor);
22
21
  }
23
22
 
24
- // Safari work-around as box-shadow is not supported on the <tr> element,
25
- // 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 */
26
25
  html[data-sap-ui-browser^="sf"] .sapMTableTBody:not(.sapMListTblHasPopin) > .sapMLIBSelected > td,
27
26
  html[data-sap-ui-browser^="sf"] .sapMTableTBody.sapMListTblHasPopin > .sapMLIBSelected + .sapMListTblSubRow > td {
28
- box-shadow: inset 0px -0.0625rem @sapUiListSelectionBorderColor;
27
+ box-shadow: inset 0px -0.0625rem var(--sapList_SelectionBorderColor);
29
28
  }