Skip to content

Commit c514cde

Browse files
ilhan007ilhan007
authored
refactor(ui5-timeline, ui5-timeline-item): clean up styles (#687)
1 parent 6af3302 commit c514cde

File tree

6 files changed

+81
-59
lines changed

6 files changed

+81
-59
lines changed

‎packages/main/src/Timeline.hbs

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<div class="{{classes.main}}">
2-
<ul class="sapWCTimelineList">
1+
<div class="ui5-timeline-root">
2+
<ul class="ui5-timeline-list">
33
{{#each items}}
4-
<li class="sapWCTimelineListItem">
4+
<li class="ui5-timeline-list-item">
55
<slot name="{{this._individualSlot}}"></slot>
66
</li>
77
{{/each}}

‎packages/main/src/Timeline.js

-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
4-
import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js";
54
import TimelineItem from "./TimelineItem.js";
65
import TimelineTemplate from "./generated/templates/TimelineTemplate.lit.js";
76

@@ -82,15 +81,6 @@ class Timeline extends UI5Element {
8281

8382
this._delegates.push(this._itemNavigation);
8483
}
85-
86-
get classes() {
87-
return {
88-
main: {
89-
sapWCTimeline: true,
90-
sapUiSizeCompact: getCompactSize(),
91-
},
92-
};
93-
}
9484
}
9585

9686
Timeline.define();

‎packages/main/src/TimelineItem.hbs

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<div
2-
class="{{classes.main}}"
2+
class="ui5-tli-root"
33
dir="{{rtl}}"
44
>
5-
<div class="{{classes.indicator}}">
5+
<div class="ui5-tli-indicator">
66
{{#if icon}}
7-
<div class="sapWCTimelineItemIconOuter">
8-
<ui5-icon class="sapWCTimelineItemIcon" src="{{icon}}"></ui5-icon>
7+
<div class="ui5-tli-icon-outer">
8+
<ui5-icon class="ui5-tli-icon" src="{{icon}}"></ui5-icon>
99
</div>
1010
{{/if}}
1111
</div>

‎packages/main/src/TimelineItem.js

-14
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
3-
import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js";
43
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
54
import Icon from "./Icon.js";
65
import Link from "./Link.js";
@@ -145,19 +144,6 @@ class TimelineItem extends UI5Element {
145144
this.fireEvent("itemNameClick", {});
146145
}
147146

148-
get classes() {
149-
return {
150-
main: {
151-
sapWCTimelineItem: true,
152-
sapUiSizeCompact: getCompactSize(),
153-
},
154-
indicator: {
155-
sapWCTimelineIndicator: true,
156-
sapWCTimelineIndicatorNoIcon: !this.icon,
157-
},
158-
};
159-
}
160-
161147
get rtl() {
162148
return getRTL() ? "rtl" : undefined;
163149
}

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

+27-12
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,55 @@
1-
:host(ui5-timeline:not([hidden])) {
1+
:host(:not([hidden])) {
22
display: block;
33
}
44

5-
ui5-timeline:not([hidden]) {
6-
display: block;
7-
}
8-
9-
.sapWCTimeline {
5+
.ui5-timeline-root {
106
background-color: var(--sapUiBaseBG);
117
padding: 1rem 1rem 1rem .5rem;
128
box-sizing: border-box;
139
overflow: hidden;
1410
}
1511

16-
.sapWCTimelineList {
12+
.ui5-timeline-list {
1713
list-style: none;
1814
margin: 0;
1915
padding: 0;
2016
}
2117

22-
.sapWCTimelineListItem {
18+
.ui5-timeline-list-item {
2319
margin-bottom: 1.625rem;
2420
}
2521

26-
.sapWCTimelineListItem:last-child {
22+
.ui5-timeline-list-item:last-child {
2723
margin-bottom: 0;
2824
}
2925

30-
.sapUiSizeCompact.sapWCTimeline {
26+
/* Compact size */
27+
:host([data-ui5-compact-size]) .ui5-timeline-root {
3128
padding: .5rem;
3229
}
3330

34-
.sapUiSizeCompact .sapWCTimelineListItem {
31+
:host([data-ui5-compact-size]) .ui5-timeline-list-item {
3532
margin-bottom: .5rem;
3633
}
3734

38-
.sapUiSizeCompact .sapWCTimelineListItem :last-child {
35+
:host([data-ui5-compact-size]) .ui5-timeline-list-item :last-child {
3936
margin-bottom: 0;
4037
}
38+
39+
/* IE pair of stlyes */
40+
ui5-timeline:not([hidden]) {
41+
display: block;
42+
}
43+
44+
/* Compact size */
45+
ui5-timeline[data-ui5-compact-size] .ui5-timeline-root {
46+
padding: .5rem;
47+
}
48+
49+
ui5-timeline[data-ui5-compact-size] .ui5-timeline-list-item {
50+
margin-bottom: .5rem;
51+
}
52+
53+
ui5-timeline[data-ui5-compact-size] .ui5-timeline-list-item :last-child {
54+
margin-bottom: 0;
55+
}

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

+47-16
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
1-
:host(ui5-timeline-item:not([hidden])) {
1+
:host(:not([hidden])) {
22
display: block;
33
}
44

5-
ui5-timeline-item:not([hidden]) {
6-
display: block;
7-
}
8-
9-
.sapWCTimelineItem {
5+
.ui5-tli-root {
106
display: flex;
117
}
128

13-
.sapWCTimelineIndicator {
9+
.ui5-tli-indicator {
1410
position: relative;
1511
width: 2rem;
1612
}
1713

18-
.sapWCTimelineIndicator::before {
14+
.ui5-tli-indicator::before {
1915
content: "";
2016
display: inline-block;
2117
background-color: var(--sapUiContentForegroundBorderColor);
@@ -27,13 +23,13 @@ ui5-timeline-item:not([hidden]) {
2723
}
2824

2925
/* Line when no Icon is provided */
30-
.sapWCTimelineIndicatorNoIcon::before {
26+
:host(:not([icon])) .ui5-tli-indicator::before {
3127
bottom: -2.125rem;
3228
top: 1.875rem;
3329
}
3430

3531
/* No Icon Dot */
36-
.sapWCTimelineIndicatorNoIcon::after {
32+
:host(:not([icon])) .ui5-tli-indicator::after {
3733
content: "";
3834
display: inline-block;
3935
box-sizing: border-box;
@@ -48,15 +44,15 @@ ui5-timeline-item:not([hidden]) {
4844
transform: translateX(-50%);
4945
}
5046

51-
:host(ui5-timeline-item:last-child) .sapWCTimelineIndicator::before {
47+
:host(ui5-timeline-item:last-child) .ui5-tli-indicator::before {
5248
display: none;
5349
}
5450

55-
ui5-timeline-item:last-child .sapWCTimelineIndicator::before {
51+
ui5-timeline-item:last-child .ui5-tli-indicator::before {
5652
display: none;
5753
}
5854

59-
.sapWCTimelineItemIconOuter {
55+
.ui5-tli-icon-outer {
6056
display: flex;
6157
justify-content: center;
6258
align-items: center;
@@ -65,7 +61,7 @@ ui5-timeline-item:last-child .sapWCTimelineIndicator::before {
6561
width: 2rem;
6662
}
6763

68-
.sapWCTimelineItemIcon {
64+
.ui5-tli-icon {
6965
color: var(--sapContent_NonInteractiveIconColor);
7066
height: 1.375rem;
7167
width: 1.375rem;
@@ -168,11 +164,11 @@ ui5-timeline-item:last-child .sapWCTimelineIndicator::before {
168164
padding-top: .75rem;
169165
}
170166

171-
.sapUiSizeCompact .sapWCTimelineBubble {
167+
:host([data-ui5-compact-size]) .sapWCTimelineBubble {
172168
padding: .5rem;
173169
}
174170

175-
.sapUiSizeCompact .sapWCTimelineIndicator::before {
171+
:host([data-ui5-compact-size]) .ui5-tli-indicator::before {
176172
bottom: -.5rem;
177173
}
178174

@@ -196,3 +192,38 @@ ui5-timeline-item:last-child .sapWCTimelineIndicator::before {
196192
left: var(--_ui5_TimelineItem_bubble_rtl_left_offset);
197193
right: var(--_ui5_TimelineItem_bubble_rtl_right_offset);
198194
}
195+
196+
/* IE pair of styles */
197+
ui5-timeline-item:not([hidden]) {
198+
display: block;
199+
}
200+
201+
ui5-timeline-item[data-ui5-compact-size] .sapWCTimelineBubble {
202+
padding: .5rem;
203+
}
204+
205+
ui5-timeline-item[data-ui5-compact-size] .ui5-tli-indicator::before {
206+
bottom: -.5rem;
207+
}
208+
209+
/* Line when no Icon is provided */
210+
ui5-timeline-item:not([icon]) .ui5-tli-indicator::before {
211+
bottom: -2.125rem;
212+
top: 1.875rem;
213+
}
214+
215+
/* No Icon Dot */
216+
ui5-timeline-item:not([icon]) .ui5-tli-indicator::after {
217+
content: "";
218+
display: inline-block;
219+
box-sizing: border-box;
220+
border: 1px solid var(--sapContent_NonInteractiveIconColor);
221+
background-color: var(--sapContent_NonInteractiveIconColor);
222+
border-radius: 50%;
223+
width: .4375rem;
224+
height: .4375rem;
225+
position: absolute;
226+
top: 0.9375rem;
227+
left: 50%;
228+
transform: translateX(-50%);
229+
}

0 commit comments

Comments
 (0)