danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
Merge branch 'develop' into feat/r20-53-card
author
Jason Smith
date
(Aug 10, 2022, 3:28 PM +1000)
commit
366bde42
366bde42fa89dfa5cba0375bdbec11c93e7ce220
parent
d3c57aeb
d3c57aeb1e02ab2a751cb1a393399eff87db79da
+28
-27
+17
-22
packages/ripple-ui-core/src/components/timeline/timeline.css
+17
-22
packages/ripple-ui-core/src/components/timeline/timeline.css
···
19
19
position: relative;
20
20
min-height: calc(var(--local-title-height) * 2);
21
21
padding-bottom: var(--rpl-sp-5);
22
-
padding-left: calc(var(--local-point-thickness) * 6);
22
+
padding-left: var(--rpl-sp-7);
23
23
border-left: var(--local-point-thickness) solid var(--local-clr-border);
24
24
25
25
&::before {
···
29
29
height: var(--local-point-thickness);
30
30
width: calc(var(--local-point-thickness) * 4); /* 16px */
31
31
background-color: var(--local-clr-border);
32
-
top: calc(1em - var(--local-point-thickness) / 2);
32
+
top: calc(1em - (var(--local-point-thickness) * 2) / 2);
33
33
left: 0;
34
34
}
35
35
···
45
45
background-color: var(--local-clr-border);
46
46
height: 100%;
47
47
width: var(--local-point-thickness);
48
-
top: calc(
49
-
var(--local-title-height) + (var(--local-point-thickness) / 2)
50
-
);
48
+
top: var(--local-title-height);
51
49
bottom: 0;
52
50
left: calc(var(--local-point-thickness) * -1);
53
51
}
···
63
61
64
62
&:last-child {
65
63
&::after {
66
-
/* title + 6px */
67
-
height: calc(1em + var(--local-point-thickness) / 2);
64
+
height: 1em;
68
65
top: 0;
69
66
z-index: 3;
70
67
}
···
78
75
border-radius: var(--rpl-border-radius-full);
79
76
}
80
77
81
-
&-title {
82
-
font-size: var(--rpl-type-size-3);
83
-
font-weight: var(--rpl-type-weight-bold);
84
-
line-height: var(--rpl-type-lh-5);
85
-
letter-spacing: var(--rpl-type-ls-2);
86
-
}
87
-
88
78
&-link {
89
79
display: inline-block;
90
80
}
···
99
89
color: var(--rpl-clr-link);
100
90
}
101
91
92
+
&-link:active {
93
+
text-decoration: underline;
94
+
}
95
+
102
96
&-description {
103
97
margin-top: var(--rpl-sp-2);
104
98
···
117
111
}
118
112
119
113
&-subtitle + &-description {
120
-
margin-top: 1rem;
114
+
margin-top: var(--rpl-sp-2);
121
115
}
122
116
123
117
&--with-image {
124
118
&::before {
125
-
top: calc((var(--local-img-height) - var(--local-point-thickness)) / 2);
119
+
top: calc(var(--local-img-height) / 2);
126
120
}
127
121
128
122
&:first-child::after {
129
-
top: calc((var(--local-img-height) - var(--local-point-thickness)) / 2);
123
+
top: calc(var(--local-img-height) / 2);
130
124
}
131
125
132
126
&:last-child::after {
133
127
height: calc(
134
-
(var(--local-img-height) + var(--local-point-thickness)) / 2
128
+
(var(--local-img-height) + (var(--local-point-thickness) * 2)) / 2
135
129
);
136
130
}
137
131
}
···
154
148
155
149
&.rpl-timeline__item--with-image::after {
156
150
height: calc(
157
-
100% - var(--local-img-height) / 2 + var(--local-title-height) +
158
-
var(--local-point-thickness)
151
+
100% - (var(--local-img-height) / 2) + var(--local-title-height)
159
152
);
160
153
}
161
154
}
···
178
171
position: absolute;
179
172
z-index: 2;
180
173
background-color: var(--rpl-clr-link);
181
-
height: calc(var(--local-img-height) / 2);
174
+
height: calc(
175
+
(var(--local-img-height) + var(--local-point-thickness)) / 2
176
+
);
182
177
width: var(--local-point-thickness);
183
178
top: calc(var(--local-point-thickness) / 2);
184
179
bottom: 0;
···
194
189
&:last-child::after {
195
190
top: 0;
196
191
height: calc(
197
-
(var(--local-img-height) + var(--local-point-thickness)) / 2
192
+
(var(--local-img-height) + (var(--local-point-thickness) * 2)) / 2
198
193
);
199
194
}
200
195
}
+9
-3
packages/ripple-ui-core/src/components/timeline/timeline.vue
+9
-3
packages/ripple-ui-core/src/components/timeline/timeline.vue
···
46
46
47
47
<template>
48
48
<div class="rpl-timeline">
49
-
<h2 v-if="title" class="rpl-type-h2 rpl-timeline__heading">
49
+
<h2 v-if="title" class="rpl-type-h2-fixed rpl-timeline__heading">
50
50
{{ title }}
51
51
</h2>
52
52
<ul v-if="items.length > 1" class="rpl-timeline__items rpl-type-p">
···
62
62
alt=""
63
63
class="rpl-timeline__item-image"
64
64
/>
65
-
<h3 v-if="item.title" class="rpl-timeline__item-title">
65
+
<h3
66
+
v-if="item.title"
67
+
class="rpl-type-h3-fixed rpl-timeline__item-title"
68
+
>
66
69
<RplTextLink
67
70
v-if="item.url"
68
71
class="rpl-timeline__item-link"
···
71
74
>
72
75
<template v-else>{{ item.title }}</template>
73
76
</h3>
74
-
<p v-if="hasSubtitle(item)" class="rpl-timeline__item-subtitle rpl-type-p">
77
+
<p
78
+
v-if="hasSubtitle(item)"
79
+
class="rpl-timeline__item-subtitle rpl-type-p"
80
+
>
75
81
{{ subtitle(item) }}
76
82
</p>
77
83
<div