Skip to content

Commit 4e4b513

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 4e4b513

File tree

2 files changed

+224
-0
lines changed

2 files changed

+224
-0
lines changed

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

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

‎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)