@openui5/themelib_sap_horizon 1.130.1 → 1.131.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.
- package/THIRDPARTY.txt +1 -1
- package/package.json +18 -18
- package/src/sap/f/themes/sap_horizon/Card.less +0 -4
- package/src/sap/f/themes/sap_horizon/DynamicPageTitle.less +0 -7
- package/src/sap/f/themes/sap_horizon_dark/DynamicPageTitle.less +0 -7
- package/src/sap/m/themes/sap_horizon/Carousel.less +0 -1
- package/src/sap/m/themes/sap_horizon/CheckBox.less +54 -46
- package/src/sap/m/themes/sap_horizon/CustomTile.less +1 -1
- package/src/sap/m/themes/sap_horizon/FeedInput.less +2 -2
- package/src/sap/m/themes/sap_horizon/GenericTag.less +37 -37
- package/src/sap/m/themes/sap_horizon/GenericTile.less +201 -130
- package/src/sap/m/themes/sap_horizon/HeaderContainer.less +3 -3
- package/src/sap/m/themes/sap_horizon/IconTabBar.less +1 -1
- package/src/sap/m/themes/sap_horizon/InputBase.less +25 -23
- package/src/sap/m/themes/sap_horizon/Label.less +2 -2
- package/src/sap/m/themes/sap_horizon/LightBox.less +2 -3
- package/src/sap/m/themes/sap_horizon/ListBase.less +7 -7
- package/src/sap/m/themes/sap_horizon/ListItemBase.less +1 -1
- package/src/sap/m/themes/sap_horizon/MenuButton.less +21 -14
- package/src/sap/m/themes/sap_horizon/MessageBox.less +8 -8
- package/src/sap/m/themes/sap_horizon/NotificationListGroup.less +1 -1
- package/src/sap/m/themes/sap_horizon/ObjectAttribute.less +3 -3
- package/src/sap/m/themes/sap_horizon/ObjectListItem.less +3 -3
- package/src/sap/m/themes/sap_horizon/ObjectMarker.less +4 -2
- package/src/sap/m/themes/sap_horizon/ObjectNumber.less +71 -63
- package/src/sap/m/themes/sap_horizon/ObjectStatus.less +141 -116
- package/src/sap/m/themes/sap_horizon/OverflowToolbarAssociativePopover.less +12 -9
- package/src/sap/m/themes/sap_horizon/ProgressIndicator.less +2 -2
- package/src/sap/m/themes/sap_horizon_dark/Carousel.less +0 -1
- package/src/sap/m/themes/sap_horizon_dark/CheckBox.less +54 -46
- package/src/sap/m/themes/sap_horizon_dark/CustomTile.less +1 -1
- package/src/sap/m/themes/sap_horizon_dark/FeedInput.less +2 -2
- package/src/sap/m/themes/sap_horizon_dark/GenericTag.less +36 -36
- package/src/sap/m/themes/sap_horizon_dark/GenericTile.less +191 -124
- package/src/sap/m/themes/sap_horizon_dark/HeaderContainer.less +3 -3
- package/src/sap/m/themes/sap_horizon_dark/IconTabBar.less +1 -1
- package/src/sap/m/themes/sap_horizon_dark/InputBase.less +26 -24
- package/src/sap/m/themes/sap_horizon_dark/Label.less +2 -2
- package/src/sap/m/themes/sap_horizon_dark/LightBox.less +2 -3
- package/src/sap/m/themes/sap_horizon_dark/ListBase.less +7 -7
- package/src/sap/m/themes/sap_horizon_dark/ListItemBase.less +1 -1
- package/src/sap/m/themes/sap_horizon_dark/MenuButton.less +16 -10
- package/src/sap/m/themes/sap_horizon_dark/MessageBox.less +8 -8
- package/src/sap/m/themes/sap_horizon_dark/NotificationListGroup.less +1 -1
- package/src/sap/m/themes/sap_horizon_dark/ObjectAttribute.less +3 -3
- package/src/sap/m/themes/sap_horizon_dark/ObjectListItem.less +3 -3
- package/src/sap/m/themes/sap_horizon_dark/ObjectMarker.less +3 -1
- package/src/sap/m/themes/sap_horizon_dark/ObjectNumber.less +71 -63
- package/src/sap/m/themes/sap_horizon_dark/ObjectStatus.less +142 -118
- package/src/sap/m/themes/sap_horizon_dark/OverflowToolbarAssociativePopover.less +12 -9
- package/src/sap/m/themes/sap_horizon_dark/ProgressIndicator.less +2 -2
- package/src/sap/m/themes/sap_horizon_dark/Table.less +0 -4
- package/src/sap/m/themes/sap_horizon_hcb/Carousel.less +0 -1
- package/src/sap/m/themes/sap_horizon_hcb/CheckBox.less +55 -47
- package/src/sap/m/themes/sap_horizon_hcb/CustomTile.less +1 -1
- package/src/sap/m/themes/sap_horizon_hcb/FeedInput.less +20 -17
- package/src/sap/m/themes/sap_horizon_hcb/FeedListItem.less +3 -2
- package/src/sap/m/themes/sap_horizon_hcb/GenericTag.less +40 -40
- package/src/sap/m/themes/sap_horizon_hcb/GenericTile.less +98 -55
- package/src/sap/m/themes/sap_horizon_hcb/HeaderContainer.less +6 -6
- package/src/sap/m/themes/sap_horizon_hcb/IconTabBar.less +4 -0
- package/src/sap/m/themes/sap_horizon_hcb/InputBase.less +23 -20
- package/src/sap/m/themes/sap_horizon_hcb/Label.less +1 -1
- package/src/sap/m/themes/sap_horizon_hcb/LightBox.less +3 -2
- package/src/sap/m/themes/sap_horizon_hcb/ListBase.less +12 -12
- package/src/sap/m/themes/sap_horizon_hcb/ListItemBase.less +3 -3
- package/src/sap/m/themes/sap_horizon_hcb/MenuButton.less +9 -5
- package/src/sap/m/themes/sap_horizon_hcb/MenuListItem.less +1 -1
- package/src/sap/m/themes/sap_horizon_hcb/MessageBox.less +1 -1
- package/src/sap/m/themes/sap_horizon_hcb/NotificationListGroup.less +1 -1
- package/src/sap/m/themes/sap_horizon_hcb/ObjectAttribute.less +3 -3
- package/src/sap/m/themes/sap_horizon_hcb/ObjectListItem.less +4 -4
- package/src/sap/m/themes/sap_horizon_hcb/ObjectNumber.less +8 -8
- package/src/sap/m/themes/sap_horizon_hcb/ObjectStatus.less +140 -129
- package/src/sap/m/themes/sap_horizon_hcb/OverflowToolbarAssociativePopover.less +5 -2
- package/src/sap/m/themes/sap_horizon_hcb/ProgressIndicator.less +2 -2
- package/src/sap/m/themes/sap_horizon_hcw/Carousel.less +0 -1
- package/src/sap/m/themes/sap_horizon_hcw/CheckBox.less +55 -47
- package/src/sap/m/themes/sap_horizon_hcw/CustomTile.less +1 -1
- package/src/sap/m/themes/sap_horizon_hcw/FeedInput.less +17 -15
- package/src/sap/m/themes/sap_horizon_hcw/FeedListItem.less +3 -2
- package/src/sap/m/themes/sap_horizon_hcw/GenericTag.less +41 -41
- package/src/sap/m/themes/sap_horizon_hcw/GenericTile.less +100 -57
- package/src/sap/m/themes/sap_horizon_hcw/HeaderContainer.less +6 -6
- package/src/sap/m/themes/sap_horizon_hcw/IconTabBar.less +4 -0
- package/src/sap/m/themes/sap_horizon_hcw/InputBase.less +22 -20
- package/src/sap/m/themes/sap_horizon_hcw/Label.less +1 -1
- package/src/sap/m/themes/sap_horizon_hcw/LightBox.less +3 -4
- package/src/sap/m/themes/sap_horizon_hcw/ListBase.less +12 -12
- package/src/sap/m/themes/sap_horizon_hcw/ListItemBase.less +3 -3
- package/src/sap/m/themes/sap_horizon_hcw/MenuButton.less +9 -5
- package/src/sap/m/themes/sap_horizon_hcw/MenuListItem.less +1 -1
- package/src/sap/m/themes/sap_horizon_hcw/MessageBox.less +1 -1
- package/src/sap/m/themes/sap_horizon_hcw/NotificationListGroup.less +1 -1
- package/src/sap/m/themes/sap_horizon_hcw/ObjectAttribute.less +3 -3
- package/src/sap/m/themes/sap_horizon_hcw/ObjectListItem.less +4 -4
- package/src/sap/m/themes/sap_horizon_hcw/ObjectNumber.less +9 -8
- package/src/sap/m/themes/sap_horizon_hcw/ObjectStatus.less +141 -131
- package/src/sap/m/themes/sap_horizon_hcw/OverflowToolbarAssociativePopover.less +5 -2
- package/src/sap/m/themes/sap_horizon_hcw/ProgressIndicator.less +2 -2
- package/src/sap/tnt/themes/sap_horizon/SideNavigation.less +1 -3
- package/src/sap/tnt/themes/sap_horizon/ToolHeader.less +0 -21
- package/src/sap/tnt/themes/sap_horizon/ToolPage.less +2 -11
- package/src/sap/tnt/themes/sap_horizon_dark/SideNavigation.less +1 -3
- package/src/sap/tnt/themes/sap_horizon_dark/ToolHeader.less +0 -21
- package/src/sap/tnt/themes/sap_horizon_dark/ToolPage.less +2 -11
- package/src/sap/tnt/themes/sap_horizon_hcb/SideNavigation.less +1 -3
- package/src/sap/tnt/themes/sap_horizon_hcb/ToolHeader.less +0 -18
- package/src/sap/tnt/themes/sap_horizon_hcb/ToolPage.less +0 -10
- package/src/sap/tnt/themes/sap_horizon_hcw/SideNavigation.less +1 -3
- package/src/sap/tnt/themes/sap_horizon_hcw/ToolHeader.less +0 -18
- package/src/sap/tnt/themes/sap_horizon_hcw/ToolPage.less +0 -10
- package/src/sap/ui/core/themes/sap_horizon/.theme +1 -1
- package/src/sap/ui/core/themes/sap_horizon/base.less +414 -18
- package/src/sap/ui/core/themes/sap_horizon/fonts/SAP-icons.ttf +0 -0
- package/src/sap/ui/core/themes/sap_horizon/fonts/SAP-icons.woff2 +0 -0
- package/src/sap/ui/core/themes/sap_horizon/global.less +32 -0
- package/src/sap/ui/core/themes/sap_horizon_dark/.theme +1 -1
- package/src/sap/ui/core/themes/sap_horizon_dark/base.less +412 -16
- package/src/sap/ui/core/themes/sap_horizon_dark/fonts/SAP-icons.ttf +0 -0
- package/src/sap/ui/core/themes/sap_horizon_dark/fonts/SAP-icons.woff2 +0 -0
- package/src/sap/ui/core/themes/sap_horizon_dark/global.less +32 -0
- package/src/sap/ui/core/themes/sap_horizon_hcb/.theme +1 -1
- package/src/sap/ui/core/themes/sap_horizon_hcb/base.less +421 -25
- package/src/sap/ui/core/themes/sap_horizon_hcb/fonts/SAP-icons.ttf +0 -0
- package/src/sap/ui/core/themes/sap_horizon_hcb/fonts/SAP-icons.woff2 +0 -0
- package/src/sap/ui/core/themes/sap_horizon_hcb/global.less +32 -0
- package/src/sap/ui/core/themes/sap_horizon_hcw/.theme +1 -1
- package/src/sap/ui/core/themes/sap_horizon_hcw/base.less +420 -24
- package/src/sap/ui/core/themes/sap_horizon_hcw/fonts/SAP-icons.ttf +0 -0
- package/src/sap/ui/core/themes/sap_horizon_hcw/fonts/SAP-icons.woff2 +0 -0
- package/src/sap/ui/core/themes/sap_horizon_hcw/global.less +32 -0
- package/src/sap/ui/unified/themes/sap_horizon/Menu.less +1 -1
- package/src/sap/ui/unified/themes/sap_horizon_dark/Menu.less +1 -1
- package/src/sap/uxap/themes/sap_horizon/ObjectPageSubSection.less +0 -5
- package/src/sap/uxap/themes/sap_horizon_dark/ObjectPageSubSection.less +0 -5
|
@@ -4,81 +4,96 @@
|
|
|
4
4
|
/* ================================== */
|
|
5
5
|
|
|
6
6
|
.sapMGT.sapMGTBackgroundImage {
|
|
7
|
+
|
|
7
8
|
.sapMGTContent {
|
|
8
|
-
border-bottom-left-radius:
|
|
9
|
-
border-bottom-right-radius:
|
|
9
|
+
border-bottom-left-radius: var(--sapTile_BorderCornerRadius);
|
|
10
|
+
border-bottom-right-radius: var(--sapTile_BorderCornerRadius);
|
|
10
11
|
}
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
.sapMGT.sapMGTScopeActions.sapMGTBackgroundImage .sapMGTMoreIcon {
|
|
14
|
-
color:
|
|
15
|
+
color: var(--sapContent_ContrastTextColor);
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
.sapMGTTInfoContainer {
|
|
18
19
|
height: 2.5rem;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
.tileWithAppInfo{
|
|
22
|
-
.sapMGTTInfo{
|
|
22
|
+
.tileWithAppInfo {
|
|
23
|
+
.sapMGTTInfo {
|
|
23
24
|
padding: 0.125rem 1rem 0.125rem 0.25rem;
|
|
24
25
|
text-transform: uppercase;
|
|
25
26
|
margin-bottom: 0.7rem;
|
|
26
27
|
border-radius: 0.125rem 0 0 0.125rem;
|
|
27
|
-
background-color:
|
|
28
|
+
background-color: var(--sapInfobar_NonInteractive_Background);
|
|
28
29
|
width: fit-content;
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
|
|
31
|
+
.sapMText {
|
|
32
|
+
font-size: var(--sapFontSmallSize);
|
|
31
33
|
text-align: right !important;
|
|
32
34
|
}
|
|
33
|
-
|
|
35
|
+
|
|
36
|
+
.sapMGTSystemInfoText {
|
|
34
37
|
display: flex;
|
|
35
38
|
justify-content: flex-end;
|
|
39
|
+
|
|
36
40
|
.sapMText {
|
|
37
|
-
color:
|
|
41
|
+
color: var(--sapTile_TitleTextColor);
|
|
38
42
|
padding-left: 0.15rem;
|
|
39
43
|
}
|
|
40
44
|
}
|
|
45
|
+
|
|
41
46
|
.sapMGTAppAndSystemInfoDivider{
|
|
42
47
|
height: 0.25rem;
|
|
43
48
|
}
|
|
49
|
+
|
|
44
50
|
.sapMGTAppShortcutText {
|
|
45
51
|
display: flex;
|
|
46
52
|
justify-content: flex-end;
|
|
53
|
+
|
|
47
54
|
.sapMText {
|
|
48
|
-
color:
|
|
55
|
+
color: var(--sapTile_TextColor);
|
|
49
56
|
}
|
|
50
57
|
}
|
|
51
|
-
|
|
58
|
+
|
|
52
59
|
}
|
|
53
60
|
}
|
|
54
61
|
|
|
55
|
-
.sapMGT.sapMGTScopeActions.sapMGTBackgroundImage,
|
|
62
|
+
.sapMGT.sapMGTScopeActions.sapMGTBackgroundImage,
|
|
63
|
+
.sapMGT.sapMGTScopeSingleActions.sapMGTBackgroundImage {
|
|
64
|
+
|
|
56
65
|
.sapMGTContent {
|
|
57
|
-
|
|
58
|
-
|
|
66
|
+
|
|
67
|
+
&::before {
|
|
68
|
+
border-radius: var(--sapTile_BorderCornerRadius);
|
|
59
69
|
}
|
|
60
70
|
}
|
|
61
71
|
}
|
|
62
72
|
|
|
63
|
-
.sapMGT.sapMGTScopeActions:not(.sapMGTStateLoading){
|
|
64
|
-
|
|
65
|
-
|
|
73
|
+
.sapMGT.sapMGTScopeActions:not(.sapMGTStateLoading) {
|
|
74
|
+
|
|
75
|
+
.sapMTileCntContent {
|
|
76
|
+
|
|
77
|
+
&::after {
|
|
66
78
|
opacity: 0.4;
|
|
67
|
-
background-color:
|
|
79
|
+
background-color: var(--sapTile_Background);
|
|
68
80
|
|
|
69
81
|
}
|
|
70
82
|
}
|
|
71
83
|
}
|
|
72
84
|
|
|
73
|
-
.sapMGT.sapMGTScopeActions.OneByHalf:not(.sapMGTStateLoading)
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
85
|
+
.sapMGT.sapMGTScopeActions.OneByHalf:not(.sapMGTStateLoading),
|
|
86
|
+
.sapMGT.sapMGTScopeActions.TwoByHalf:not(.sapMGTStateLoading) {
|
|
87
|
+
|
|
88
|
+
.sapMTileCntContent {
|
|
89
|
+
|
|
90
|
+
&::after {
|
|
91
|
+
top: -0.3125rem;
|
|
78
92
|
}
|
|
93
|
+
}
|
|
79
94
|
}
|
|
80
95
|
|
|
81
|
-
|
|
96
|
+
/* LINE MODE LIST VIEW */
|
|
82
97
|
|
|
83
98
|
.sapMGT.sapMGTLineMode {
|
|
84
99
|
transition: background 0.2s;
|
|
@@ -86,15 +101,16 @@
|
|
|
86
101
|
}
|
|
87
102
|
|
|
88
103
|
.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
|
|
104
|
+
|
|
89
105
|
&:not(.sapMGTLineModePress):hover {
|
|
90
|
-
background:
|
|
91
|
-
box-shadow:
|
|
106
|
+
background: var(--sapTile_Hover_Background);
|
|
107
|
+
box-shadow: var(--sapContent_Shadow2);
|
|
92
108
|
}
|
|
93
109
|
}
|
|
94
110
|
|
|
95
|
-
.sapMGT.sapMGTLineMode:active{
|
|
96
|
-
background-color:
|
|
97
|
-
outline: 0.125rem solid
|
|
111
|
+
.sapMGT.sapMGTLineMode:active {
|
|
112
|
+
background-color: var(--sapTile_Active_Background);
|
|
113
|
+
outline: 0.125rem solid var(--sapContent_FocusColor) !important;
|
|
98
114
|
outline-offset: -0.125rem;
|
|
99
115
|
border: none;
|
|
100
116
|
}
|
|
@@ -109,7 +125,7 @@
|
|
|
109
125
|
|
|
110
126
|
.sapMGTLineMode .sapMGTLineModeFailedIcon {
|
|
111
127
|
cursor: pointer;
|
|
112
|
-
color:
|
|
128
|
+
color: var(--sapContent_NonInteractiveIconColor);
|
|
113
129
|
text-shadow: @sapUiShadowText;
|
|
114
130
|
}
|
|
115
131
|
|
|
@@ -122,21 +138,25 @@
|
|
|
122
138
|
}
|
|
123
139
|
|
|
124
140
|
.sapMGTLineMode .sapMGTActionsContainer .sapMGTRemoveButton {
|
|
125
|
-
background-color:
|
|
126
|
-
color:
|
|
141
|
+
background-color: var(--sapButton_Background);
|
|
142
|
+
color: var(--sapButton_TextColor);
|
|
127
143
|
|
|
128
|
-
|
|
129
|
-
color:
|
|
144
|
+
&::before {
|
|
145
|
+
color: var(--sapButton_IconColor);
|
|
130
146
|
}
|
|
131
147
|
}
|
|
132
148
|
|
|
133
|
-
.sapMGT.sapMGTScopeActions .sapMGTRemoveButton,
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
149
|
+
.sapMGT.sapMGTScopeActions .sapMGTRemoveButton,
|
|
150
|
+
.sapMGT.sapMGTScopeSingleAction .sapMGTRemoveButton {
|
|
151
|
+
|
|
152
|
+
.sapMBtnInner,
|
|
153
|
+
.sapMBtnActive.sapMBtnInner {
|
|
154
|
+
border-color: var(--sapButton_BorderColor);
|
|
155
|
+
background-color: var(--sapButton_Background);
|
|
137
156
|
}
|
|
157
|
+
|
|
138
158
|
.sapMBtnIcon {
|
|
139
|
-
color:
|
|
159
|
+
color: var(--sapButton_TextColor);
|
|
140
160
|
}
|
|
141
161
|
}
|
|
142
162
|
|
|
@@ -147,35 +167,44 @@
|
|
|
147
167
|
-webkit-mask-image: linear-gradient(to left, #FFF ~"calc(100% - 1.5rem)", transparent);
|
|
148
168
|
}
|
|
149
169
|
|
|
150
|
-
.sapMGTHdrTxt,
|
|
170
|
+
.sapMGTHdrTxt,
|
|
171
|
+
.sapMGTSubHdrTxt {
|
|
151
172
|
text-overflow: clip;
|
|
152
173
|
}
|
|
153
174
|
}
|
|
154
175
|
|
|
155
|
-
|
|
176
|
+
/* LINE MODE FLOATING VIEW */
|
|
156
177
|
|
|
157
178
|
.sapUiMedia-GenericTileDeviceSet-large {
|
|
179
|
+
|
|
158
180
|
.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
181
|
+
|
|
182
|
+
&:focus,
|
|
183
|
+
&.sapMGTLineModePress {
|
|
184
|
+
|
|
185
|
+
.sapMGTLineStyleHelperInner::before {
|
|
186
|
+
content: '';
|
|
162
187
|
position: absolute;
|
|
163
188
|
top: 1px;
|
|
164
189
|
left: 1px;
|
|
165
190
|
bottom: 1px;
|
|
166
191
|
right: 1px;
|
|
167
192
|
box-sizing: border-box;
|
|
168
|
-
border: 1px dotted
|
|
193
|
+
border: 1px dotted var(--sapContent_FocusColor);
|
|
169
194
|
}
|
|
170
195
|
}
|
|
171
196
|
}
|
|
172
197
|
}
|
|
198
|
+
|
|
173
199
|
.sapUiMedia-GenericTileDeviceSet-large {
|
|
200
|
+
|
|
174
201
|
.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
|
|
202
|
+
|
|
175
203
|
&:hover .sapMGTLineStyleHelperInner {
|
|
176
|
-
background:
|
|
204
|
+
background: var(--sapTile_Hover_Background);
|
|
177
205
|
}
|
|
178
206
|
}
|
|
207
|
+
|
|
179
208
|
.sapMGT.sapMGTLineMode {
|
|
180
209
|
font-size: @sapMFontMediumSize;
|
|
181
210
|
|
|
@@ -184,13 +213,16 @@
|
|
|
184
213
|
}
|
|
185
214
|
|
|
186
215
|
&.sapMGTDisabled {
|
|
187
|
-
|
|
216
|
+
|
|
217
|
+
.sapMGTHdrTxt,
|
|
218
|
+
.sapMGTSubHdrTxt {
|
|
188
219
|
opacity: 0.5;
|
|
189
220
|
}
|
|
190
221
|
}
|
|
191
|
-
|
|
222
|
+
|
|
192
223
|
|
|
193
224
|
.sapMGTLineStyleHelper {
|
|
225
|
+
|
|
194
226
|
&:first-child:not(:only-child) .sapMGTLineStyleHelperInner {
|
|
195
227
|
margin-right: 0.125rem;
|
|
196
228
|
}
|
|
@@ -198,6 +230,7 @@
|
|
|
198
230
|
&:not(:first-child) .sapMGTLineStyleHelperInner {
|
|
199
231
|
margin: 0 0.125rem;
|
|
200
232
|
}
|
|
233
|
+
|
|
201
234
|
&:last-child .sapMGTLineStyleHelperInner {
|
|
202
235
|
margin-right: 0;
|
|
203
236
|
}
|
|
@@ -218,25 +251,26 @@
|
|
|
218
251
|
}
|
|
219
252
|
|
|
220
253
|
&.sapMGTLineModePress:not(.sapMGTDisabled) {
|
|
221
|
-
|
|
254
|
+
|
|
255
|
+
&,
|
|
256
|
+
&:hover {
|
|
257
|
+
|
|
222
258
|
.sapMGTLineStyleHelperInner {
|
|
223
|
-
background:
|
|
259
|
+
background: var(--sapTile_Active_Background);
|
|
224
260
|
}
|
|
225
261
|
}
|
|
226
262
|
}
|
|
227
263
|
}
|
|
228
264
|
}
|
|
229
265
|
|
|
230
|
-
/************************************************************/
|
|
231
|
-
|
|
232
266
|
.sapMGTLineMode .sapMGTHdrTxt {
|
|
233
|
-
color:
|
|
267
|
+
color: var(--sapTile_TitleTextColor);
|
|
234
268
|
font-size: @sapMFontMediumSize;
|
|
235
269
|
text-shadow: @sapUiShadowText;
|
|
236
270
|
}
|
|
237
271
|
|
|
238
272
|
.sapMGTLineMode .sapMGTSubHdrTxt {
|
|
239
|
-
color:
|
|
273
|
+
color: var(--sapTile_TextColor);
|
|
240
274
|
font-size: @sapMFontMediumSize;
|
|
241
275
|
text-shadow: @sapUiShadowText;
|
|
242
276
|
}
|
|
@@ -270,10 +304,10 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
|
|
|
270
304
|
box-shadow: 0 0 0 1px fade(@sapUiContentShadowColor, 30);
|
|
271
305
|
|
|
272
306
|
&:not(.sapMGTBackgroundImage) {
|
|
273
|
-
background:
|
|
307
|
+
background: var(--sapTile_Active_Background);
|
|
274
308
|
}
|
|
275
309
|
|
|
276
|
-
&.sapMGTScopeActions .sapMTileCntContent
|
|
310
|
+
&.sapMGTScopeActions .sapMTileCntContent::after {
|
|
277
311
|
background-color: fade(@sapUiTileActiveBackground, 70);
|
|
278
312
|
}
|
|
279
313
|
}
|
|
@@ -287,7 +321,7 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
|
|
|
287
321
|
transition: background 0.2s;
|
|
288
322
|
|
|
289
323
|
&:not(.sapMGTBackgroundImage) {
|
|
290
|
-
background:
|
|
324
|
+
background: var(--sapTile_Hover_Background);
|
|
291
325
|
}
|
|
292
326
|
|
|
293
327
|
.sapMGTWithImageHoverOverlay {
|
|
@@ -295,70 +329,76 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
|
|
|
295
329
|
transition: background 0.2s;
|
|
296
330
|
}
|
|
297
331
|
|
|
298
|
-
&.sapMGTScopeActions .sapMTileCntContent
|
|
332
|
+
&.sapMGTScopeActions .sapMTileCntContent::after {
|
|
299
333
|
background-color: fade(@sapUiTileHoverBackground, 70);
|
|
300
334
|
transition: background 0.2s;
|
|
301
335
|
}
|
|
302
336
|
}
|
|
303
337
|
|
|
304
|
-
.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv,
|
|
338
|
+
.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, /* focus inside GridContainer */
|
|
305
339
|
.sapMGT:focus .sapMGTFocusDiv,
|
|
306
340
|
.sapMGT:active .sapMGTFocusDiv,
|
|
307
341
|
.sapMGTLineModePress .sapMGTFocusDiv {
|
|
308
|
-
border:
|
|
342
|
+
border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
|
|
309
343
|
}
|
|
310
344
|
|
|
311
|
-
.sapMGTActionButtonPress.sapMGT:active
|
|
312
|
-
|
|
313
|
-
.sapMGTFocusDiv{
|
|
345
|
+
.sapMGTActionButtonPress.sapMGT:active {
|
|
346
|
+
|
|
347
|
+
.sapMGTFocusDiv {
|
|
314
348
|
border: none;
|
|
315
349
|
}
|
|
316
350
|
}
|
|
317
351
|
|
|
318
|
-
.sapMGTActionButtonPress.sapMGT:focus-visible
|
|
319
|
-
|
|
320
|
-
.sapMGTFocusDiv{
|
|
321
|
-
|
|
322
|
-
|
|
352
|
+
.sapMGTActionButtonPress.sapMGT:focus-visible {
|
|
353
|
+
|
|
354
|
+
.sapMGTFocusDiv {
|
|
355
|
+
border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
|
|
356
|
+
border-radius: var(--sapTile_BorderCornerRadius);
|
|
323
357
|
}
|
|
324
358
|
}
|
|
325
359
|
|
|
326
360
|
.sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv,
|
|
327
361
|
.sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv {
|
|
328
|
-
|
|
329
|
-
|
|
362
|
+
|
|
363
|
+
&::after {
|
|
364
|
+
content: '';
|
|
330
365
|
.sapMGTOverlayMixin();
|
|
331
366
|
border-radius: 0.25rem;
|
|
332
|
-
border:
|
|
367
|
+
border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
|
|
333
368
|
z-index: 0;
|
|
334
369
|
}
|
|
335
370
|
}
|
|
336
371
|
|
|
337
372
|
|
|
338
|
-
large.sapUiSizeCompact .sapMGT.sapMGTLineMode,
|
|
373
|
+
large.sapUiSizeCompact .sapMGT.sapMGTLineMode,
|
|
374
|
+
.sapUiMedia-GenericTileDeviceSet-large .sapUiSizeCompact .sapMGT.sapMGTLineMode {
|
|
339
375
|
margin-right: 1rem;
|
|
340
|
-
border: 1px solid
|
|
376
|
+
border: 1px solid var(--sapTile_BorderColor);
|
|
341
377
|
}
|
|
342
378
|
|
|
343
379
|
.sapMGT {
|
|
344
|
-
border-radius:
|
|
345
|
-
border-color:
|
|
346
|
-
box-shadow:
|
|
347
|
-
|
|
348
|
-
|
|
380
|
+
border-radius: var(--sapTile_BorderCornerRadius);
|
|
381
|
+
border-color: var(--sapTile_BorderColor);
|
|
382
|
+
box-shadow: var(--sapContent_Shadow0);
|
|
383
|
+
|
|
384
|
+
.sapMGTContent {
|
|
385
|
+
border-radius: 0 0 var(--sapTile_BorderCornerRadius) var(--sapTile_BorderCornerRadius);
|
|
349
386
|
}
|
|
350
387
|
}
|
|
351
388
|
|
|
352
389
|
.sapMGT.tileWithAppInfo {
|
|
353
|
-
|
|
390
|
+
|
|
391
|
+
.sapMGTContent {
|
|
354
392
|
border-radius: 0;
|
|
355
393
|
}
|
|
356
394
|
}
|
|
357
395
|
|
|
358
396
|
.sapUshellSection {
|
|
397
|
+
|
|
359
398
|
.sapMGT.TwoByOne {
|
|
360
399
|
width: 23rem;
|
|
361
400
|
}
|
|
401
|
+
|
|
362
402
|
.sapMGT.TwoByHalf {
|
|
363
403
|
width: 23rem;
|
|
364
404
|
}
|
|
@@ -376,7 +416,7 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
|
|
|
376
416
|
width: 19rem;
|
|
377
417
|
}
|
|
378
418
|
|
|
379
|
-
.sapMTileSmallPhone .sapMTileCntContent{
|
|
419
|
+
.sapMTileSmallPhone .sapMTileCntContent {
|
|
380
420
|
height: 3.438rem;
|
|
381
421
|
}
|
|
382
422
|
|
|
@@ -384,9 +424,9 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
|
|
|
384
424
|
width: 22.5rem;
|
|
385
425
|
}
|
|
386
426
|
|
|
387
|
-
.sapMGTHdrTxt
|
|
427
|
+
.sapMGTHdrTxt > .sapMText {
|
|
388
428
|
font-weight: bold;
|
|
389
|
-
font-size:
|
|
429
|
+
font-size: var(--sapFontHeader6Size);
|
|
390
430
|
}
|
|
391
431
|
|
|
392
432
|
.sapMGTLineMode .sapMGTHdrTxt {
|
|
@@ -394,20 +434,22 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
|
|
|
394
434
|
}
|
|
395
435
|
|
|
396
436
|
.sapMGT.sapMGTLineMode {
|
|
397
|
-
border: 1px solid
|
|
398
|
-
border-radius:
|
|
399
|
-
box-shadow:
|
|
437
|
+
border: 1px solid var(--sapTile_BorderColor) !important;
|
|
438
|
+
border-radius: var(--sapTile_BorderCornerRadius) !important;
|
|
439
|
+
box-shadow: var(--sapContent_Shadow0) !important;
|
|
400
440
|
}
|
|
401
441
|
|
|
402
442
|
.sapMGT.sapMGTLineMode.sapMGTInfoRendered {
|
|
403
443
|
border: transparent !important;
|
|
404
|
-
|
|
405
|
-
|
|
444
|
+
|
|
445
|
+
.sapMGTTInfoWrapper {
|
|
446
|
+
border-radius: 0 var(--sapTile_BorderCornerRadius) var(--sapTile_BorderCornerRadius) 0 !important;
|
|
406
447
|
}
|
|
407
448
|
}
|
|
408
449
|
|
|
409
450
|
.sapMGT.sapMGTLineMode.sapMGTInfoRendered:focus {
|
|
410
|
-
|
|
451
|
+
|
|
452
|
+
.sapMGTFocusDiv {
|
|
411
453
|
inset: 0;
|
|
412
454
|
}
|
|
413
455
|
}
|
|
@@ -417,13 +459,13 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
|
|
|
417
459
|
}
|
|
418
460
|
|
|
419
461
|
.sapMGT.sapMGTLineMode:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
|
|
420
|
-
background:
|
|
421
|
-
border: 1px solid
|
|
422
|
-
box-shadow:
|
|
462
|
+
background: var(--sapTile_Hover_Background);
|
|
463
|
+
border: 1px solid var(--sapTile_BorderColor) !important;
|
|
464
|
+
box-shadow: var(--sapContent_Shadow2) !important;
|
|
423
465
|
}
|
|
424
466
|
|
|
425
467
|
.sapMGT:hover:not(.sapMGTPressActive) {
|
|
426
|
-
box-shadow:
|
|
468
|
+
box-shadow: var(--sapContent_Shadow2) !important;
|
|
427
469
|
}
|
|
428
470
|
|
|
429
471
|
.sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
|
|
@@ -436,48 +478,58 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
|
|
|
436
478
|
margin-right: 1px;
|
|
437
479
|
}
|
|
438
480
|
|
|
439
|
-
.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv,
|
|
440
|
-
|
|
481
|
+
.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv,
|
|
482
|
+
.sapMGT:focus .sapMGTFocusDiv,
|
|
483
|
+
.sapMGT:active .sapMGTFocusDiv,
|
|
484
|
+
.sapMGTLineModePress .sapMGTFocusDiv {
|
|
485
|
+
border-radius: var(--sapTile_BorderCornerRadius);
|
|
441
486
|
inset: -1px;
|
|
442
487
|
}
|
|
443
488
|
|
|
444
|
-
.sapMGT:active{
|
|
445
|
-
background-color:
|
|
446
|
-
border: 0.0625rem solid
|
|
447
|
-
|
|
448
|
-
|
|
489
|
+
.sapMGT:active {
|
|
490
|
+
background-color: var(--sapTile_Active_Background);
|
|
491
|
+
border: 0.0625rem solid var(--sapTile_Interactive_BorderColor);
|
|
492
|
+
|
|
493
|
+
&.sapMGTIconMode {
|
|
494
|
+
outline: 0.0625rem solid var(--sapTile_Interactive_BorderColor);
|
|
449
495
|
border: none;
|
|
450
496
|
}
|
|
451
|
-
|
|
497
|
+
|
|
498
|
+
&.sapMGTNewsContent {
|
|
452
499
|
overflow: hidden;
|
|
453
500
|
}
|
|
454
|
-
|
|
501
|
+
|
|
502
|
+
.sapMGTFocusDiv {
|
|
455
503
|
box-shadow: none;
|
|
456
504
|
border: none !important;
|
|
457
505
|
}
|
|
458
506
|
}
|
|
459
507
|
|
|
460
|
-
.sapMGT:focus .sapMGTFocusDiv{
|
|
461
|
-
border-radius:
|
|
508
|
+
.sapMGT:focus .sapMGTFocusDiv {
|
|
509
|
+
border-radius: var(--sapTile_BorderCornerRadius);
|
|
462
510
|
box-shadow: none;
|
|
463
511
|
inset: -1px;
|
|
464
512
|
}
|
|
465
513
|
|
|
466
|
-
.sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv{
|
|
514
|
+
.sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv {
|
|
467
515
|
inset: 0;
|
|
468
516
|
}
|
|
469
517
|
|
|
470
|
-
.sapMGT.sapMGTScopeActions,
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
518
|
+
.sapMGT.sapMGTScopeActions,
|
|
519
|
+
.sapMGT.sapMGTScopeSingleAction {
|
|
520
|
+
|
|
521
|
+
.sapMGTMoreIcon {
|
|
522
|
+
|
|
523
|
+
.sapMBtnIcon {
|
|
524
|
+
color: var(--sapButton_Lite_TextColor);
|
|
474
525
|
}
|
|
475
526
|
}
|
|
476
527
|
}
|
|
477
528
|
|
|
478
|
-
.sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv
|
|
529
|
+
.sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv::after,
|
|
530
|
+
.sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv::after {
|
|
479
531
|
border: none;
|
|
480
|
-
border-radius:
|
|
532
|
+
border-radius: var(--sapElement_BorderCornerRadius);
|
|
481
533
|
}
|
|
482
534
|
|
|
483
535
|
.sapMGTLineMode .sapMGTFocusDiv {
|
|
@@ -489,25 +541,30 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
|
|
|
489
541
|
}
|
|
490
542
|
|
|
491
543
|
.sapFGridContainer .sapFGridContainerItemWrapper:not(.sapFGridContainerItemWrapperNoVisualFocus):focus::before {
|
|
492
|
-
border: 2px solid
|
|
493
|
-
border-radius:
|
|
544
|
+
border: 2px solid var(--sapContent_FocusColor);
|
|
545
|
+
border-radius: var(--sapElement_BorderCornerRadius);
|
|
494
546
|
}
|
|
495
547
|
|
|
496
548
|
.miniTileBackground {
|
|
497
|
-
background:
|
|
498
|
-
box-shadow:
|
|
549
|
+
background: var(--sapTile_Background);
|
|
550
|
+
box-shadow: var(--sapContent_Shadow0) !important;
|
|
499
551
|
}
|
|
500
552
|
|
|
501
553
|
.miniTileContainer .sapMGT {
|
|
502
|
-
background:
|
|
503
|
-
box-shadow:
|
|
554
|
+
background: var(--sapTile_Background);
|
|
555
|
+
box-shadow: var(--sapContent_Shadow0) !important;
|
|
504
556
|
}
|
|
505
557
|
|
|
506
|
-
.sapUshellTile,
|
|
507
|
-
|
|
558
|
+
.sapUshellTile,
|
|
559
|
+
.sapUshellTileWrapper,
|
|
560
|
+
.sapUshellTileInner,
|
|
561
|
+
.sapUshellTileBase,
|
|
562
|
+
.sapUshellInner .sapUshellTile-placeholder,
|
|
563
|
+
.sapUshellInner .sapUshellLinkTile-placeholder {
|
|
564
|
+
border-radius: var(--sapElement_BorderCornerRadius);
|
|
508
565
|
}
|
|
509
566
|
|
|
510
|
-
.sapUshellTile{
|
|
567
|
+
.sapUshellTile {
|
|
511
568
|
margin: 0 1rem 1rem 0;
|
|
512
569
|
}
|
|
513
570
|
|
|
@@ -516,43 +573,53 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
|
|
|
516
573
|
}
|
|
517
574
|
|
|
518
575
|
.OneByOne.tileWithAppInfo {
|
|
576
|
+
|
|
519
577
|
.sapMGTTInfoContainer {
|
|
578
|
+
|
|
520
579
|
.sapMGTTInfo {
|
|
521
|
-
background-color:
|
|
580
|
+
background-color: var(--sapTile_Active_Background);
|
|
522
581
|
}
|
|
523
582
|
}
|
|
524
583
|
}
|
|
525
584
|
|
|
526
585
|
.TwoByOne.sapMGTActionMode {
|
|
527
586
|
border-radius: 1.25rem;
|
|
587
|
+
|
|
528
588
|
.sapMGTFocusDiv {
|
|
529
589
|
border-radius: 1.25rem !important;
|
|
530
590
|
}
|
|
531
591
|
}
|
|
532
592
|
|
|
533
|
-
.sapMGT.OneByOne
|
|
593
|
+
.sapMGT.OneByOne,
|
|
594
|
+
.sapMGT.TwoByOne {
|
|
595
|
+
|
|
534
596
|
.sapMTileCnt.News {
|
|
535
597
|
border-bottom-left-radius: 0.87rem;
|
|
536
598
|
border-bottom-right-radius: 0.87rem;
|
|
537
599
|
}
|
|
538
600
|
}
|
|
539
601
|
|
|
540
|
-
|
|
602
|
+
/* OVERLAYS AND HELPERS */
|
|
541
603
|
|
|
542
604
|
.sapMGTOverlay {
|
|
543
605
|
border-radius: inherit;
|
|
544
606
|
}
|
|
545
607
|
|
|
546
608
|
.sapMGT.sapMGTBackgroundImage {
|
|
609
|
+
|
|
547
610
|
.sapMGTOverlay {
|
|
548
611
|
border-radius: 0.9rem;
|
|
549
612
|
}
|
|
613
|
+
|
|
550
614
|
&.sapMGTStateFailed {
|
|
615
|
+
|
|
551
616
|
.sapMGTWithImageHoverOverlay {
|
|
552
|
-
border-radius:
|
|
617
|
+
border-radius: var(--sapTile_BorderCornerRadius);
|
|
553
618
|
}
|
|
554
619
|
}
|
|
620
|
+
|
|
555
621
|
&:active {
|
|
622
|
+
|
|
556
623
|
.sapMGTOverlay {
|
|
557
624
|
border-radius: 0.95rem;
|
|
558
625
|
}
|
|
@@ -18,15 +18,15 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.sapMHdrCntrBtnIcon{
|
|
21
|
-
color:
|
|
21
|
+
color: var(--sapContent_NonInteractiveIconColor);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.sapMHrdrCntrDvdrs.Horizontal .sapMHrdrCntrInner::after {
|
|
25
|
-
border-left: 1px solid
|
|
25
|
+
border-left: 1px solid var(--sapList_BorderColor);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.sapMHrdrCntrDvdrs.Vertical .sapMHrdrCntrInner::after {
|
|
29
|
-
border-top: 1px solid
|
|
29
|
+
border-top: 1px solid var(--sapList_BorderColor);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.sapMHdrCntrBGTransparent {
|