@kitconcept/volto-light-theme 7.0.0-alpha.8 → 7.0.0-alpha.9
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.draft +6 -4
- package/CHANGELOG.md +10 -0
- package/package.json +1 -1
- package/src/theme/_variables.scss +1 -0
- package/src/theme/blocks/_teaser.scss +6 -0
- package/src/theme/person.scss +42 -3
package/.changelog.draft
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
## 7.0.0-alpha.
|
|
1
|
+
## 7.0.0-alpha.9 (2025-06-09)
|
|
2
2
|
|
|
3
3
|
### Bugfix
|
|
4
4
|
|
|
5
|
-
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
- Fixed Teaser styling @sneridagh [#573](https://github.com/kitconcept/volto-light-theme/pull/573)
|
|
6
|
+
|
|
7
|
+
### Internal
|
|
8
|
+
|
|
9
|
+
- Fix aspect ratio for images in file teaser block @iRohitSingh
|
|
8
10
|
|
|
9
11
|
|
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,16 @@
|
|
|
8
8
|
|
|
9
9
|
<!-- towncrier release notes start -->
|
|
10
10
|
|
|
11
|
+
## 7.0.0-alpha.9 (2025-06-09)
|
|
12
|
+
|
|
13
|
+
### Bugfix
|
|
14
|
+
|
|
15
|
+
- Fixed Teaser styling @sneridagh [#573](https://github.com/kitconcept/volto-light-theme/pull/573)
|
|
16
|
+
|
|
17
|
+
### Internal
|
|
18
|
+
|
|
19
|
+
- Fix aspect ratio for images in file teaser block @iRohitSingh
|
|
20
|
+
|
|
11
21
|
## 7.0.0-alpha.8 (2025-06-06)
|
|
12
22
|
|
|
13
23
|
### Bugfix
|
package/package.json
CHANGED
|
@@ -13,6 +13,12 @@
|
|
|
13
13
|
// We want the image to extend in all its container width
|
|
14
14
|
height: 100%;
|
|
15
15
|
|
|
16
|
+
&.file-teaser .card .card-inner .image-wrapper {
|
|
17
|
+
img {
|
|
18
|
+
aspect-ratio: var(--file-image-aspect-ratio, $aspect-ratio-A4) !important;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
16
22
|
a.external {
|
|
17
23
|
.card-summary h2:after {
|
|
18
24
|
@include external-link-icon();
|
package/src/theme/person.scss
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
.card {
|
|
2
2
|
.person-teaser.has--align--left:not(.contained) &,
|
|
3
3
|
.has--align--left:not(.contained) .person-teaser &,
|
|
4
|
+
.has--align--right:not(.contained) .person-teaser &,
|
|
5
|
+
.has--align--center:not(.contained) .person-teaser &,
|
|
4
6
|
.person-teaser.has--align--right:not(.contained) & {
|
|
5
7
|
.card-inner {
|
|
6
8
|
.image-wrapper {
|
|
@@ -28,18 +30,48 @@
|
|
|
28
30
|
}
|
|
29
31
|
}
|
|
30
32
|
|
|
33
|
+
// Teaser (standalone) top
|
|
34
|
+
.has--align--center:not(.contained) .person-teaser & {
|
|
35
|
+
width: calc(var(--default-container-width) / 2);
|
|
36
|
+
margin-right: auto;
|
|
37
|
+
margin-left: auto;
|
|
38
|
+
|
|
39
|
+
.image-wrapper {
|
|
40
|
+
display: flex;
|
|
41
|
+
justify-content: center;
|
|
42
|
+
}
|
|
43
|
+
.card-summary {
|
|
44
|
+
padding-right: 0px;
|
|
45
|
+
padding-left: 0px;
|
|
46
|
+
text-align: center;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.summary-extra-info,
|
|
50
|
+
.summary-room-phone {
|
|
51
|
+
justify-content: center;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// Teaser in Grid
|
|
31
56
|
.contained.person-teaser & {
|
|
57
|
+
// Exploration for rounded images in person-teasers
|
|
58
|
+
// --person-image-height: auto;
|
|
59
|
+
// --person-image-border-radius: 10000px;
|
|
60
|
+
// --person-image-aspect-ratio: 1/1;
|
|
32
61
|
.image-wrapper {
|
|
33
62
|
display: flex;
|
|
34
|
-
height: 255px;
|
|
63
|
+
height: var(--person-image-height, 255px);
|
|
35
64
|
justify-content: center;
|
|
36
|
-
|
|
65
|
+
// Removed since it was causing the cards to have more width than the available container
|
|
66
|
+
// for +2 columns
|
|
67
|
+
// aspect-ratio: var(--image-aspect-ratio, 1.7777777778);
|
|
37
68
|
|
|
38
69
|
img {
|
|
39
70
|
max-width: 198px; // 255x198px Roughly 3:4 (enough to cover the 16:9 portrait height)
|
|
40
71
|
height: 100%;
|
|
41
72
|
flex: 0 1 auto;
|
|
42
|
-
|
|
73
|
+
border-radius: var(--person-image-border-radius, 0px);
|
|
74
|
+
aspect-ratio: var(--person-image-aspect-ratio, initial) !important;
|
|
43
75
|
object-fit: cover;
|
|
44
76
|
object-position: top center;
|
|
45
77
|
}
|
|
@@ -103,6 +135,13 @@ body .block.gridBlock .block.teaser.contained.person-teaser .card-inner {
|
|
|
103
135
|
gap: $spacing-small;
|
|
104
136
|
}
|
|
105
137
|
|
|
138
|
+
// One person teaser in Grid, edit mode
|
|
139
|
+
.block.gridBlock .one .cell-wrapper:has(.person-teaser) {
|
|
140
|
+
max-width: var(--default-container-width) / 2;
|
|
141
|
+
margin-right: auto;
|
|
142
|
+
margin-left: auto;
|
|
143
|
+
}
|
|
144
|
+
|
|
106
145
|
// Listings (no card)
|
|
107
146
|
.block.listing {
|
|
108
147
|
.listing-item.person-listing {
|