Skip to content

Commit ed87ba5

Browse files
hardlhardl
authored
fix(ui5-breadcrumbs): remove text-decoration from separator (#4568)
Remove underline text decoration shown on mouse hover from separator.
1 parent f872c45 commit ed87ba5

File tree

3 files changed

+107
-103
lines changed

3 files changed

+107
-103
lines changed

‎packages/main/src/Breadcrumbs.hbs

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@keydown="{{_onkeydown}}"
55
@keyup="{{_onkeyup}}">
66

7-
<li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper"
7+
<li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper"
88
?hidden="{{_isOverflowEmpty}}">
99
<ui5-link @click="{{_openRespPopover}}"
1010
accessible-role="button"
@@ -16,7 +16,8 @@
1616
</li>
1717

1818
{{#each _linksData}}
19-
<li class="ui5-breadcrumbs-link-wrapper" @click="{{../_onLinkPress}}">
19+
<li class="ui5-breadcrumbs-link-wrapper" @click="{{../_onLinkPress}}"
20+
id="{{this._id}}-link-wrapper">
2021
<ui5-link
2122
href="{{this.href}}"
2223
target="{{this.target}}"

‎packages/main/src/Breadcrumbs.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,7 @@ class Breadcrumbs extends UI5Element {
314314

315315
for (let i = this._overflowSize; i < items.length; i++) {
316316
const item = items[i],
317-
link = this.shadowRoot.querySelector(`.ui5-breadcrumbs-link-wrapper #${item._id}-link`);
317+
link = this.shadowRoot.querySelector(`#${item._id}-link-wrapper`);
318318
map.set(item, this._getElementWidth(link) || 0);
319319
}
320320

@@ -324,7 +324,9 @@ class Breadcrumbs extends UI5Element {
324324
}
325325

326326
if (!this._isOverflowEmpty) {
327-
this._dropdownArrowLinkWidth = this._getElementWidth(this._dropdownArrowLink);
327+
this._dropdownArrowLinkWidth = this._getElementWidth(
328+
this.shadowRoot.querySelector(".ui5-breadcrumbs-dropdown-arrow-link-wrapper"),
329+
);
328330
}
329331
}
330332

‎packages/main/src/themes/Breadcrumbs.css

Lines changed: 100 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,100 @@
1-
.ui5-breadcrumbs-root {
2-
white-space: nowrap;
3-
outline: none;
4-
margin: 0 0 0.5rem 0;
5-
}
6-
7-
.ui5-breadcrumbs-root > ol {
8-
margin: 0;
9-
padding: 0;
10-
list-style-type: none;
11-
display: -webkit-box;
12-
display: -webkit-flex;
13-
display: flex;
14-
}
15-
16-
.ui5-breadcrumbs-root > ol > li {
17-
display: inline;
18-
}
19-
20-
.ui5-breadcrumbs-current-location {
21-
min-width: 1%;
22-
-webkit-flex: 1;
23-
-webkit-box-flex: 1;
24-
flex: 1 1 auto;
25-
}
26-
27-
.ui5-breadcrumbs-current-location > span:focus {
28-
outline-offset: -1px;
29-
outline: 1px dotted var(--sapContent_FocusColor);
30-
}
31-
32-
.ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
33-
display: none
34-
}
35-
36-
.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon] {
37-
width: var(--sapFontSize);
38-
height: var(--sapFontSize);
39-
padding-left: .675rem;
40-
vertical-align: text-top;
41-
color: var(--sapLinkColor);
42-
}
43-
44-
.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
45-
content: "...";
46-
vertical-align: middle;
47-
position: absolute;
48-
left: 0;
49-
bottom: 0;
50-
}
51-
52-
/* underline icon on hover */
53-
.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon]::after,
54-
.ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]::after {
55-
content: "";
56-
position: absolute;
57-
border-bottom: 0.0625rem solid;
58-
top: 0;
59-
left: 0;
60-
bottom: 1px;
61-
right: 0;
62-
}
63-
64-
/* links separator */
65-
[ui5-link]::after {
66-
content: "/"; /* default separator is "Slash" */
67-
padding: 0 .25rem;
68-
cursor: auto;
69-
color: var(--sapContent_LabelColor);
70-
display: flex;
71-
align-items: flex-end;
72-
}
73-
74-
.ui5-breadcrumbs-popover-footer {
75-
display: flex;
76-
justify-content: flex-end;
77-
width: 100%;
78-
}
79-
80-
/* separator styles */
81-
:host([separator-style="BackSlash"]) [ui5-link]::after {
82-
content: "\\";
83-
}
84-
85-
:host([separator-style="DoubleBackSlash"]) [ui5-link]::after {
86-
content: "\\\\";
87-
}
88-
89-
:host([separator-style="DoubleGreaterThan"]) [ui5-link]::after {
90-
content: ">>";
91-
}
92-
93-
:host([separator-style="DoubleSlash"]) [ui5-link]::after {
94-
content: "//";
95-
}
96-
97-
:host([separator-style="GreaterThan"]) [ui5-link]::after {
98-
content: ">";
99-
}
1+
.ui5-breadcrumbs-root {
2+
white-space: nowrap;
3+
outline: none;
4+
margin: 0 0 0.5rem 0;
5+
}
6+
7+
.ui5-breadcrumbs-root > ol {
8+
margin: 0;
9+
padding: 0;
10+
list-style-type: none;
11+
display: -webkit-box;
12+
display: -webkit-flex;
13+
display: flex;
14+
}
15+
16+
.ui5-breadcrumbs-root > ol > li {
17+
display: inline;
18+
}
19+
20+
.ui5-breadcrumbs-current-location {
21+
min-width: 1%;
22+
-webkit-flex: 1;
23+
-webkit-box-flex: 1;
24+
flex: 1 1 auto;
25+
}
26+
27+
.ui5-breadcrumbs-current-location > span:focus {
28+
outline-offset: -1px;
29+
outline: 1px dotted var(--sapContent_FocusColor);
30+
}
31+
32+
.ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
33+
display: none
34+
}
35+
36+
.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon] {
37+
width: var(--sapFontSize);
38+
height: var(--sapFontSize);
39+
padding-left: .675rem;
40+
vertical-align: text-top;
41+
color: var(--sapLinkColor);
42+
}
43+
44+
.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
45+
content: "...";
46+
vertical-align: middle;
47+
position: absolute;
48+
left: 0;
49+
bottom: 0;
50+
}
51+
52+
/* underline icon on hover */
53+
.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon]::after,
54+
.ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]::after {
55+
content: "";
56+
position: absolute;
57+
border-bottom: 0.0625rem solid;
58+
top: 0;
59+
left: 0;
60+
bottom: 1px;
61+
right: 0;
62+
}
63+
64+
/* links separator */
65+
li:not(.ui5-breadcrumbs-current-location)::after {
66+
content: "/"; /* default separator is "Slash" */
67+
padding: 0 .25rem;
68+
cursor: auto;
69+
color: var(--sapContent_LabelColor);
70+
display: inline-block;
71+
font-family: "72override",var(--sapFontFamily);
72+
font-size: var(--sapFontSize);
73+
}
74+
75+
.ui5-breadcrumbs-popover-footer {
76+
display: flex;
77+
justify-content: flex-end;
78+
width: 100%;
79+
}
80+
81+
/* separator styles */
82+
:host([separator-style="BackSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
83+
content: "\\";
84+
}
85+
86+
:host([separator-style="DoubleBackSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
87+
content: "\\\\";
88+
}
89+
90+
:host([separator-style="DoubleGreaterThan"]) li:not(.ui5-breadcrumbs-current-location)::after {
91+
content: ">>";
92+
}
93+
94+
:host([separator-style="DoubleSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
95+
content: "//";
96+
}
97+
98+
:host([separator-style="GreaterThan"]) li:not(.ui5-breadcrumbs-current-location)::after {
99+
content: ">";
100+
}

0 commit comments

Comments
 (0)