Skip to content

Commit 6980e8f

Browse files
ilhan007ilhan007
authored
refactor(listitembase): keep styles in Base theme only (#174)
1 parent bac1515 commit 6980e8f

File tree

4 files changed

+58
-82
lines changed

4 files changed

+58
-82
lines changed

‎packages/main/src/themes/base/ListItemBase.less‎

Lines changed: 53 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,55 @@
66
@import "./global.less";
77

88
/* =================================== */
9-
/* CSS for control sap.m/ListItemBase */
9+
/* CSS for ListItemBase */
1010
/* Base theme */
1111
/* =================================== */
12-
:host(ui5-li),
12+
@_ui5_listitembase_focus_width: 1px;
13+
14+
:host(ui5-li) {
15+
display: block;
16+
}
17+
18+
:host(ui5-li) .sap-phone .sapMLIB {
19+
outline: none;
20+
}
21+
22+
:host(ui5-li-custom) .sap-phone .sapMLIB {
23+
outline: none;
24+
}
25+
1326
:host(ui5-li-custom) {
1427
display: block;
1528
}
1629

30+
ui5-li {
31+
display: block;
32+
}
33+
34+
ui5-li-custom {
35+
display: block;
36+
}
37+
38+
ui5-li .sap-phone .sapMLIB {
39+
outline: none;
40+
}
41+
42+
ui5-li-custom .sap-phone .sapMLIB {
43+
outline: none;
44+
}
45+
1746
.sapMLIB {
18-
height: 3rem;
19-
padding: 0 1rem 0 1rem;
2047
position: relative;
2148
display: flex;
49+
height: 3rem;
50+
width: 100%;
51+
padding: 0 1rem 0 1rem;
2252
background: @sapUiListBackground;
2353
box-sizing: border-box;
54+
}
2455

25-
&.sapMCustomLI {
26-
padding: 0;
27-
}
56+
.sapMLIB.sapMCustomLI {
57+
padding: 0;
2858
}
2959

3060
.sapMLIBHoverable:hover {
@@ -55,7 +85,7 @@
5585
.sapMLIB.sapMLIBFocusable:focus:after,
5686
.sapMLIB.sapMLIBFocusable .sapMLIBContent:focus:after {
5787
content: "";
58-
border: 1px dotted @sapUiContentFocusColor;
88+
border: @_ui5_listitembase_focus_width dotted @sapUiContentFocusColor;
5989
position: absolute;
6090
top: 0;
6191
right: 0;
@@ -81,7 +111,6 @@
81111
color: @sapUiListActiveTextColor;
82112
}
83113

84-
85114
.sapMLIBIcon {
86115
color: @sapUiContentNonInteractiveIconColor;
87116
padding-right: 1rem;
@@ -93,31 +122,6 @@
93122
font-family: @sapUiFontFamily;
94123
}
95124

96-
/* IE ignores outline-offset. Use an overlay: */
97-
.sapMLIBLegacyOutline:focus {
98-
outline: none;
99-
position: relative;
100-
}
101-
102-
//Overide for Checkbox in List in IE
103-
ui5-li > span {
104-
.sapMCb {
105-
height: 3rem;
106-
}
107-
}
108-
109-
.sapMLIBLegacyOutline:focus::before {
110-
content: "";
111-
border: 0;
112-
position: absolute;
113-
top: 0;
114-
left: 0;
115-
right: 0;
116-
bottom: 0;
117-
pointer-events: none;
118-
border: 1px dotted @sapUiContentFocusColor;
119-
}
120-
121125
.sapMLIBActionable,
122126
.sapMLIBActionable > .sapMLIBIcon {
123127
cursor: pointer;
@@ -127,33 +131,21 @@ ui5-li > span {
127131
outline: none;
128132
}
129133

130-
// Remove focus outline on Mobile
131-
:host(ui5-li),
132-
:host(ui5-li-custom) {
133-
.sap-phone {
134-
.sapMLIB {
135-
outline: none;
136-
}
137-
}
134+
// RTL
135+
:host(ui5-li) span[dir="rtl"] .sapMLIBIcon {
136+
padding-left: 1rem;
137+
padding-right: 0;
138138
}
139139

140-
// RTL
141-
:host(ui5-li) span[dir="rtl"] {
142-
.sapMLIBIcon {
143-
padding-left: 1rem;
144-
padding-right: 0;
145-
}
146-
.sapMSLIImg {
147-
margin: .5rem 0 .5rem 0.75rem;
148-
}
149-
}
150-
151-
ui5-li span[dir="rtl"] {
152-
.sapMLIBIcon {
153-
padding-left: 1rem;
154-
padding-right: 0;
155-
}
156-
.sapMSLIImg {
157-
margin: .5rem 0 .5rem 0.75rem;
158-
}
140+
:host(ui5-li) span[dir="rtl"] .sapMSLIImg {
141+
margin: .5rem 0 .5rem 0.75rem;
142+
}
143+
144+
ui5-li span[dir="rtl"] .sapMLIBIcon {
145+
padding-left: 1rem;
146+
padding-right: 0;
147+
}
148+
149+
ui5-li span[dir="rtl"] .sapMSLIImg {
150+
margin: .5rem 0 .5rem 0.75rem;
159151
}

‎packages/main/src/themes/sap_belize/ListItemBase.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@
1010
@import "./global.less";
1111

1212
/* =================================== */
13-
/* CSS for control sap.m/ListItemBase */
13+
/* CSS for ListItemBase */
1414
/* Belize theme */
1515
/* =================================== */

‎packages/main/src/themes/sap_belize_hcb/ListItemBase.less‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,9 @@
55
@import "../sap_belize/ListItemBase.less";
66

77
/* ============================= */
8-
/* Global Belize parameters */
8+
/* Global Belize HCB parameters */
99
/* ============================= */
1010
@import "./base.less";
1111
@import "./global.less";
1212

13-
html[data-sap-ui-browser='ie11'] .sapMLIBFocusable:focus {
14-
outline-width: 3px;
15-
}
16-
17-
.sapMLIBFocusable:focus {
18-
outline: 2px dotted @sapUiContentFocusColor;
19-
outline-offset: -2px;
20-
}
21-
22-
/* IE ignores outline-offset. Use an overlay: */
23-
.sapMLIBLegacyOutline:focus::before {
24-
border: 0.125rem dotted @sapUiContentFocusColor;
25-
}
26-
27-
.sapMLIB.sapMLIBFocusable:focus:after {
28-
border-width: 0.125rem;
29-
}
13+
@_ui5_listitembase_focus_width: 0.125rem;

‎packages/main/src/themes/sap_fiori_3/ListItemBase.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@
1010
@import "./global.less";
1111

1212
/* =================================== */
13-
/* CSS for control sap.m/ListItemBase */
14-
/* Belize theme */
13+
/* CSS for ListItemBase */
14+
/* Fiori 3 theme */
1515
/* =================================== */

0 commit comments

Comments
 (0)