Skip to content

Commit a29eb0d

Browse files
author
Rick Butterfield
committed
Fixes #80 
1 parent f93895b commit a29eb0d

File tree

4 files changed

+157
-118
lines changed

4 files changed

+157
-118
lines changed

‎src/Umbraco.Cms.14.x/uSync/v14/Content/block-list-test.config

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<SortOrder>2</SortOrder>
1111
<Published Default="true" />
1212
<Schedule />
13-
<Template />
13+
<Template Key="c021e223-9e49-4725-b942-eb2562f00b84">BlockList</Template>
1414
</Info>
1515
<Properties>
1616
<content>

‎src/Umbraco.Cms.14.x/uSync/v14/Content/test-page.config

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<SortOrder>3</SortOrder>
1111
<Published Default="true" />
1212
<Schedule />
13-
<Template />
13+
<Template Key="09acf55b-fdd0-4cda-86fa-fa2caef695a9">BlockGrid</Template>
1414
</Info>
1515
<Properties>
1616
<content>

‎src/Umbraco.Cms.14.x/wwwroot/css/myblockgridlayout.css

Lines changed: 116 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
.umb-block-grid__layout-container {
1+
.umb-block-grid__layout-container,
2+
:scope .umb-block-grid__layout-container {
23
position: relative;
34
display: grid;
45
grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
@@ -8,15 +9,18 @@
89
row-gap: var(--umb-block-grid--row-gap, 0);
910
}
1011

11-
.umb-block-grid__layout-item {
12+
.umb-block-grid__layout-item,
13+
:scope .umb-block-grid__layout-item {
1214
position: relative;
1315
/* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
1416
grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
1517
grid-row: span var(--umb-block-grid--item-row-span, 1);
1618
}
1719

1820

19-
.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
21+
.umb-block-grid__area-container,
22+
:scope .umb-block-grid__area-container,
23+
.umb-block-grid__block--view::part(area-container) {
2024
position: relative;
2125
display: grid;
2226
grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
@@ -26,7 +30,8 @@
2630
row-gap: var(--umb-block-grid--areas-row-gap, 0);
2731
}
2832

29-
.umb-block-grid__area {
33+
.umb-block-grid__area,
34+
:scope .umb-block-grid__area {
3035
position: relative;
3136
height: 100%;
3237
display: flex;
@@ -48,7 +53,7 @@
4853

4954

5055
/**** Custom additions to the default Grid Layout Stylehseet: ****/
51-
:root, :host {
56+
:root, :host, :scope {
5257
--umb-block-grid--areas-column-gap: 60px;
5358
--umb-block-grid--areas-row-gap: 60px;
5459
--umb-block-grid--column-gap: 60px;
@@ -57,17 +62,20 @@
5762
--my-container-padding: 0 20px;
5863
}
5964

60-
/* additional CSS options for area-container and areas: */
61-
.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
62-
max-width: var(--my-container-max-width);
63-
padding: var(--my-container-padding);
64-
margin-left: auto;
65-
margin-right: auto;
66-
}
65+
/* additional CSS options for area-container and areas: */
66+
:scope .umb-block-grid__area-container,
67+
.umb-block-grid__area-container,
68+
.umb-block-grid__block--view::part(area-container) {
69+
max-width: var(--my-container-max-width);
70+
padding: var(--my-container-padding);
71+
margin-left: auto;
72+
margin-right: auto;
73+
}
6774

68-
.umb-block-grid__area {
69-
justify-content: center;
70-
}
75+
.umb-block-grid__area,
76+
:scope .umb-block-grid__area {
77+
justify-content: center;
78+
}
7179

7280
.umb-block-grid__layout-item[data-content-element-type-alias="oneColumnSectionBlock"] .umb-block-grid__layout-container {
7381
}
@@ -89,6 +97,7 @@
8997
.umb-block-grid {
9098
container-type: inline-size;
9199
}
100+
92101
@container (min-width: 720px) {
93102
.umb-block-grid__layout-container {
94103
--my-container-padding: 0 60px;
@@ -98,10 +107,11 @@
98107
section {
99108
padding: var(--section-padding, 60px 0);
100109
}
101-
section[bright-contrast] {
102-
color:white;
103-
--my-bright-contrast: ;
104-
}
110+
111+
section[bright-contrast] {
112+
color: white;
113+
--my-bright-contrast:;
114+
}
105115

106116

107117
/** only works on website. */
@@ -129,20 +139,20 @@ h2 {
129139

130140
/**umb_name:H3*/
131141
h3 {
132-
font-size: 30px;
133-
font-weight: 300;
134-
line-height: 1.2;
135-
margin:0;
136-
color: inherit;
142+
font-size: 30px;
143+
font-weight: 300;
144+
line-height: 1.2;
145+
margin: 0;
146+
color: inherit;
137147
}
138148

139149
/**umb_name:H4*/
140150
h4 {
141-
font-size: 21px;
142-
font-weight: 300;
143-
line-height: 1.2;
144-
margin:0;
145-
color: inherit;
151+
font-size: 21px;
152+
font-weight: 300;
153+
line-height: 1.2;
154+
margin: 0;
155+
color: inherit;
146156
}
147157

148158

@@ -171,9 +181,9 @@ img.image {
171181
column-gap: 60px;
172182
}
173183

174-
.rich-text > p:first-child {
175-
margin-top: 0;
176-
}
184+
.rich-text > p:first-child {
185+
margin-top: 0;
186+
}
177187

178188
/**umb_name:Lead Paragraph*/
179189
p.lead-paragraph {
@@ -185,7 +195,7 @@ p.lead-paragraph {
185195

186196
/** Hero */
187197

188-
.umb-block-grid__layout-item[data-content-element-type-alias="heroBlock"] .umb-block-grid__area-container,
198+
.umb-block-grid__layout-item[data-content-element-type-alias="heroBlock"] .umb-block-grid__area-container,
189199
.umb-block-grid__layout-item[data-content-element-type-alias="heroBlock"] .umb-block-grid__block--view::part(area-container) {
190200
padding: 0;
191201
}
@@ -199,38 +209,39 @@ p.lead-paragraph {
199209
padding: 60px 0;
200210
box-sizing: border-box;
201211
}
202-
.hero[bright-contrast] {
203-
color: white;
204-
--my-bright-contrast: ;
205-
}
206212

207-
.hero .hero-background {
208-
position: absolute;
209-
inset: 0;
210-
background-position: 50% 50%;
211-
background-size: cover;
212-
}
213+
.hero[bright-contrast] {
214+
color: white;
215+
--my-bright-contrast:;
216+
}
213217

214-
.hero .hero-background:after {
215-
content: '';
216-
position: absolute;
217-
inset: 0;
218-
background-color: rgba(0,0,0,.22);
219-
pointer-events: none;
220-
}
218+
.hero .hero-background {
219+
position: absolute;
220+
inset: 0;
221+
background-position: 50% 50%;
222+
background-size: cover;
223+
}
221224

222-
.hero .hero-content {
223-
position: relative;
224-
width: 100%;
225-
max-width: var(--my-container-max-width);
226-
padding: var(--my-container-padding);
227-
margin-left: auto;
228-
margin-right: auto;
229-
}
225+
.hero .hero-background:after {
226+
content: '';
227+
position: absolute;
228+
inset: 0;
229+
background-color: rgba(0,0,0,.22);
230+
pointer-events: none;
231+
}
232+
233+
.hero .hero-content {
234+
position: relative;
235+
width: 100%;
236+
max-width: var(--my-container-max-width);
237+
padding: var(--my-container-padding);
238+
margin-left: auto;
239+
margin-right: auto;
240+
}
230241

231-
.hero .hero-content > h1 {
232-
max-width: 14em;
233-
}
242+
.hero .hero-content > h1 {
243+
max-width: 14em;
244+
}
234245

235246

236247

@@ -257,15 +268,14 @@ p.lead-paragraph {
257268
/** Inspiration */
258269

259270
.inspiration[bright-contrast] {
260-
--my-bright-contrast: ;
271+
--my-bright-contrast:;
261272
}
262273

263274
.inspiration .area-container {
264275
max-width: var(--my-container-max-width);
265276
padding: var(--my-container-padding);
266277
margin-left: auto;
267278
margin-right: auto;
268-
269279
display: grid;
270280
grid-template-columns: 1fr 1fr 1fr 1fr;
271281
grid-auto-flow: row;
@@ -315,51 +325,51 @@ p.lead-paragraph {
315325
background-color: white;
316326
}
317327

318-
.card .card-media {
319-
position: relative;
320-
width: 100%;
321-
aspect-ratio: 16 / 9;
322-
overflow: hidden;
323-
}
324-
325-
.card .card-media img {
326-
object-fit: cover;
327-
height: 100%;
328-
width: 100%;
329-
}
330-
331-
.card .card-content {
332-
display: flex;
333-
flex-direction: column;
334-
gap: 10px;
335-
padding: 20px;
336-
font-weight: 300;
337-
}
338-
339-
.card .card-content p {
340-
margin: 0;
341-
}
328+
.card .card-media {
329+
position: relative;
330+
width: 100%;
331+
aspect-ratio: 16 / 9;
332+
overflow: hidden;
333+
}
342334

335+
.card .card-media img {
336+
object-fit: cover;
337+
height: 100%;
338+
width: 100%;
339+
}
340+
341+
.card .card-content {
342+
display: flex;
343+
flex-direction: column;
344+
gap: 10px;
345+
padding: 20px;
346+
font-weight: 300;
347+
}
343348

344-
.card.--medium {
345-
height: auto;
346-
}
349+
.card .card-content p {
350+
margin: 0;
351+
}
347352

348-
.card.--medium .card-media::after {
349-
content: '';
350-
position: absolute;
351-
inset: 0;
352-
background-color: rgba(0,0,0,.22);
353-
pointer-events: none;
354-
}
355353

356-
.card.--medium .card-content {
357-
position: absolute;
358-
z-index: 1;
359-
bottom: 0;
360-
color: white;
361-
}
354+
.card.--medium {
355+
height: auto;
356+
}
362357

363-
.card.--medium .card-content h4 {
364-
font-size: 30px;
365-
}
358+
.card.--medium .card-media::after {
359+
content: '';
360+
position: absolute;
361+
inset: 0;
362+
background-color: rgba(0,0,0,.22);
363+
pointer-events: none;
364+
}
365+
366+
.card.--medium .card-content {
367+
position: absolute;
368+
z-index: 1;
369+
bottom: 0;
370+
color: white;
371+
}
372+
373+
.card.--medium .card-content h4 {
374+
font-size: 30px;
375+
}

0 commit comments

Comments
 (0)