@financial-times/cp-content-pipeline-ui 3.0.0 → 3.0.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/CHANGELOG.md
CHANGED
|
@@ -363,6 +363,14 @@
|
|
|
363
363
|
* @financial-times/cp-content-pipeline-client bumped from ^1.3.11 to ^1.3.12
|
|
364
364
|
* @financial-times/cp-content-pipeline-schema bumped from ^1.3.8 to ^1.3.9
|
|
365
365
|
|
|
366
|
+
## [3.0.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v3.0.0...cp-content-pipeline-ui-v3.0.1) (2023-09-28)
|
|
367
|
+
|
|
368
|
+
|
|
369
|
+
### Bug Fixes
|
|
370
|
+
|
|
371
|
+
* fix seek styling in clips ([afe8ff7](https://github.com/Financial-Times/cp-content-pipeline/commit/afe8ff7916acdc9e4885ca4e4d7b80b5de21fb34))
|
|
372
|
+
* make progress bar shorter for mobile ([d1d33a7](https://github.com/Financial-Times/cp-content-pipeline/commit/d1d33a73dc8a776c7624bdb9df935eb9f07e012f))
|
|
373
|
+
|
|
366
374
|
## [3.0.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v2.0.6...cp-content-pipeline-ui-v3.0.0) (2023-09-28)
|
|
367
375
|
|
|
368
376
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
.cp-clip__video-progress-bar {
|
|
2
2
|
pointer-events: none;
|
|
3
|
+
position: absolute;
|
|
4
|
+
bottom: 0;
|
|
5
|
+
// Affects the clickable area of the progress bar
|
|
3
6
|
padding-top: 20px;
|
|
4
|
-
margin-top: -20px;
|
|
5
7
|
background: none;
|
|
6
8
|
width: 100%;
|
|
7
9
|
z-index: 2;
|
|
@@ -13,10 +15,14 @@
|
|
|
13
15
|
.cp-clip__progress-main-bar {
|
|
14
16
|
display: block;
|
|
15
17
|
width: 100%;
|
|
16
|
-
height:
|
|
18
|
+
height: 3px;
|
|
17
19
|
transition: margin 0.1s linear, height 0.1s linear;
|
|
18
|
-
|
|
19
20
|
background-color: oColorsByName('ft-grey');
|
|
21
|
+
|
|
22
|
+
@include oGridRespondTo(L) {
|
|
23
|
+
height: 4px;
|
|
24
|
+
}
|
|
25
|
+
|
|
20
26
|
&.cp-clip__progress-enlarged {
|
|
21
27
|
height: 8px;
|
|
22
28
|
margin-top: -4px;
|
|
@@ -31,28 +37,21 @@
|
|
|
31
37
|
|
|
32
38
|
}
|
|
33
39
|
.cp-clip__progress-time {
|
|
40
|
+
$progress-time-left-offset: -12px;
|
|
41
|
+
$progress-time-height-offset: -33px;
|
|
34
42
|
display: inline-block;
|
|
35
|
-
transform: translate(-
|
|
43
|
+
transform: translate($progress-time-left-offset, calc($progress-time-height-offset - 2px));
|
|
36
44
|
color: oColorsByName('white');
|
|
37
45
|
font-size: 14px;
|
|
38
46
|
font-family: MetricWeb;
|
|
47
|
+
@include oGridRespondTo(L) {
|
|
48
|
+
transform: translate($progress-time-left-offset, $progress-time-height-offset);
|
|
49
|
+
}
|
|
39
50
|
&.cp-clip__time-text-fixed-left {
|
|
40
|
-
position: absolute;
|
|
41
51
|
left: calc(10% - 20px);
|
|
42
|
-
top: -15px;
|
|
43
|
-
transform: none;
|
|
44
|
-
@include oGridRespondTo(L) {
|
|
45
|
-
top: -12px;
|
|
46
|
-
}
|
|
47
52
|
}
|
|
48
53
|
&.cp-clip__time-text-fixed-right {
|
|
49
|
-
position: absolute;
|
|
50
54
|
right: calc(10% - 15px);
|
|
51
|
-
top: -15px;
|
|
52
|
-
transform: none;
|
|
53
|
-
@include oGridRespondTo(L) {
|
|
54
|
-
top: -12px;
|
|
55
|
-
}
|
|
56
55
|
}
|
|
57
56
|
}
|
|
58
57
|
}
|