Skip to content

Commit 626b1cb

Browse files
sethiddensethidden
committed
feat(theme): add our own styles for the default Magento Luma theme CMS blocks
feat(theme): fix some luma's shortcomings feat(theme): fix erin wrap feat(theme): reduce button margin so it fits on men's category page align img to the right
1 parent 0a7a2ec commit 626b1cb

File tree

2 files changed

+238
-0
lines changed

2 files changed

+238
-0
lines changed

‎packages/theme/components/Category/CmsContent.scss‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
::v-deep {
2+
$magento-specific-image-gray: #f4f4f4;
3+
$magento-specific-image-yellow: #ffdd17;
4+
5+
@mixin for-luma-mobile {
6+
@media (max-width: 767px) {
7+
@content;
8+
}
9+
}
10+
11+
@mixin promo-columns($number_of_columns) {
12+
display: grid;
13+
gap: var(--spacer-sm);
14+
grid-template-columns: repeat($number_of_columns, calc((100% - ( $number_of_columns - 1 ) * var(--spacer-sm)) / $number_of_columns));
15+
16+
@include for-luma-mobile {
17+
grid-template-columns: 1fr;
18+
grid-template-rows: repeat($number_of_columns, auto);
19+
}
20+
}
21+
22+
.block-promo-2columns {
23+
@include promo-columns(2)
24+
}
25+
26+
.block-promo-3columns {
27+
@include promo-columns(3)
28+
}
29+
30+
.more.icon {
31+
&::after {
32+
content: '\203a';
33+
margin-left: var(--spacer-xs)
34+
}
35+
}
36+
37+
img {
38+
height: auto;
39+
border: 0;
40+
}
41+
42+
.block-promo {
43+
display: inline-grid;
44+
margin-bottom: var(--spacer-sm);
45+
overflow: hidden;
46+
47+
.content {
48+
padding: var(--spacer-base);
49+
}
50+
}
51+
52+
.content {
53+
display: flex;
54+
flex-direction: column;
55+
gap: var(--spacer-xs);
56+
font-family: var(--font-family--secondary);
57+
color: var(--c-text);
58+
}
59+
60+
.title {
61+
font-size: var(--h2-font-size);
62+
font-weight: var(--font-family--semibold);
63+
}
64+
65+
.info {
66+
font-weight: var(--font-weight--light)
67+
}
68+
69+
.more.button {
70+
background-color: var(--c-primary);
71+
color: var(--c-white);
72+
73+
max-width: max-content;
74+
padding: var(--spacer-sm) var(--spacer-base);
75+
76+
font-weight: var(--font-weight-semibold);
77+
font-family: var(--font-family--secondary);
78+
text-align: center;
79+
text-transform: uppercase;
80+
}
81+
82+
.womens-erin {
83+
background-color: $magento-specific-image-gray;
84+
display: flex;
85+
justify-content: space-between;
86+
flex-wrap: wrap;
87+
88+
img {
89+
height: 100%;
90+
width: auto;
91+
}
92+
93+
.more.icon {
94+
margin-top: var(--spacer-base);
95+
}
96+
}
97+
98+
.womens-main, .home-main, .mens-main, .new-main, .sale-main, .gear-main {
99+
width: 100%;
100+
position: relative;
101+
102+
.content {
103+
position: absolute;
104+
top: var(--spacer-xl);
105+
right: var(--spacer-xl);
106+
background-color: var(--c-white);
107+
width: 40%;
108+
display: flex;
109+
gap: var(--spacer-base);
110+
111+
@include for-luma-mobile {
112+
top: unset;
113+
right: unset;
114+
bottom: var(--spacer-base);
115+
left: 50%;
116+
transform: translate(-50%, 0);
117+
align-items: center;
118+
text-align: center;
119+
}
120+
}
121+
122+
img {
123+
height: auto;
124+
width: 100%;
125+
126+
@include for-luma-mobile {
127+
height: 100%;
128+
width: auto;
129+
}
130+
}
131+
}
132+
133+
.womens-pants, .mens-pants {
134+
position: relative;
135+
margin-left: auto; /* ugly hack but the "-pants" images aspect ratios don't allow for evenly lining up cms blocks */
136+
137+
@include for-luma-mobile {
138+
margin-left: initial;
139+
}
140+
141+
.content {
142+
$space: var(--spacer-sm);
143+
position: absolute;
144+
left: $space;
145+
top: $space;
146+
background-color: $magento-specific-image-gray;
147+
opacity: 0.9;
148+
width: 35%;
149+
150+
display: flex;
151+
flex-direction: column;
152+
gap: var(--spacer-base);
153+
154+
@include for-luma-mobile {
155+
gap: 0;
156+
width: 45%;
157+
}
158+
}
159+
160+
img {
161+
height: 100%;
162+
width: auto;
163+
164+
@include for-luma-mobile {
165+
height: auto;
166+
width: 100%;
167+
}
168+
}
169+
}
170+
171+
.womens-t-shirts, .mens-t-shirts {
172+
background-color: $magento-specific-image-yellow;
173+
174+
.content {
175+
display: flex;
176+
flex-direction: column;
177+
gap: var(--spacer-sm)
178+
}
179+
180+
img {
181+
width: min(100%, 440px);
182+
}
183+
}
184+
185+
.content {
186+
font-family: var(--font-family--secondary);
187+
color: var(--c-text);
188+
}
189+
190+
.block-promo .content {
191+
padding: var(--spacer-base);
192+
}
193+
194+
.womens-category-pants,
195+
.womens-category-tanks,
196+
.womens-category-shorts,
197+
.mens-category-tees,
198+
.mens-category-hoodies,
199+
.mens-category-shorts,
200+
.gear-category-bags,
201+
.gear-category-equipment,
202+
.gear-category-watches {
203+
background-color: $magento-specific-image-gray;
204+
display: flex;
205+
justify-content: space-between;
206+
height: 210px;
207+
position: relative;
208+
overflow: hidden;
209+
210+
img {
211+
position: absolute;
212+
left: 60%;
213+
}
214+
215+
.content {
216+
position: relative;
217+
display: flex;
218+
flex-direction: column;
219+
padding: var(--spacer-sm);
220+
padding-right: 0;
221+
width: 55%;
222+
}
223+
224+
.title {
225+
font-size: var(--h4-font-size);
226+
margin-bottom: var(--spacer-xs);
227+
}
228+
229+
.more.icon {
230+
position: absolute;
231+
bottom: var(--spacer-base);
232+
}
233+
}
234+
}

‎packages/theme/components/Category/CmsContent.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,7 @@ export default defineComponent({
1717
},
1818
});
1919
</script>
20+
21+
<style lang='scss' scoped>
22+
@import './CmsContent.scss';
23+
</style>

0 commit comments

Comments
 (0)