Skip to content

Commit 06cd0ef

Browse files
author
Simon L. Lange
committed
Bellcom theme: Updated hero sections with conditional logic and animations
1 parent 94d0769 commit 06cd0ef

File tree

7 files changed

+93
-664
lines changed

7 files changed

+93
-664
lines changed

‎web/themes/custom/subsites/bellcom_theme/assets/css/bundle.css

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -966,7 +966,6 @@ video {
966966
.hero-wrapper {
967967
min-height: 70vh;
968968
width: 100%;
969-
background-color: white;
970969
display: flex;
971970
align-items: center;
972971
padding: 80px 0;
@@ -1019,7 +1018,8 @@ video {
10191018
}
10201019
@media (max-width: 640px) {
10211020
.hero-wrapper .hero__inner-wrapper .hero__text-wrapper .hero__cta-wrapper {
1022-
flex-direction: column
1021+
flex-direction: column;
1022+
align-items: flex-start
10231023
}
10241024
}
10251025
.hero-wrapper .hero__inner-wrapper .hero__text-wrapper .hero__cta-wrapper .main-cta-btn-wrapper {
@@ -1067,11 +1067,35 @@ video {
10671067
display: flex;
10681068
align-items: center;
10691069
}
1070+
.hero-wrapper .hero__inner-wrapper .hero__text-wrapper .hero__cta-wrapper .secondary-cta-btn-wrapper .secondary-cta-btn:hover span:after {
1071+
transform: scaleX(1);
1072+
transform-origin: bottom left;
1073+
}
10701074
.hero-wrapper .hero__inner-wrapper .hero__text-wrapper .hero__cta-wrapper .secondary-cta-btn-wrapper .secondary-cta-btn .ext {
10711075
display: none;
10721076
}
10731077
.hero-wrapper .hero__inner-wrapper .hero__text-wrapper .hero__cta-wrapper .secondary-cta-btn-wrapper .secondary-cta-btn span {
10741078
margin-right: 20px;
1079+
position: relative;
1080+
display: inline-block;
1081+
}
1082+
.hero-wrapper .hero__inner-wrapper .hero__text-wrapper .hero__cta-wrapper .secondary-cta-btn-wrapper .secondary-cta-btn span:after {
1083+
content: '';
1084+
position: absolute;
1085+
width: 100%;
1086+
transform: scaleX(0);
1087+
height: 2px;
1088+
bottom: -5px;
1089+
left: 0;
1090+
transform-origin: bottom right;
1091+
transition: transform 0.25s ease-out;
1092+
}
1093+
.hero-wrapper .hero__inner-wrapper .hero__text-wrapper .hero__cta-wrapper .secondary-cta-btn-wrapper .secondary-cta-btn svg {
1094+
transition: 0.3s ease;
1095+
transform: translateX(0);
1096+
}
1097+
.hero-wrapper .hero__inner-wrapper .hero__text-wrapper .hero__cta-wrapper .secondary-cta-btn-wrapper .secondary-cta-btn:hover svg {
1098+
transform: translateX(10px);
10751099
}
10761100
.hero-wrapper .hero__inner-wrapper .hero__element-wrapper {
10771101
display: grid;

‎web/themes/custom/subsites/bellcom_theme/assets/images/arrow-right-small.svg

Lines changed: 2 additions & 1 deletion
Loading

‎web/themes/custom/subsites/bellcom_theme/assets/images/arrow-right.svg

Lines changed: 1 addition & 1 deletion
Loading

‎web/themes/custom/subsites/bellcom_theme/assets/js/bundle.js

Lines changed: 3 additions & 652 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/themes/custom/subsites/bellcom_theme/config/webpack.common.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ module.exports = {
4343
// new CleanWebpackPlugin(),
4444
new CopyPlugin({
4545
patterns: [
46-
{ context: 'src', from: 'images/!**!/!*.+(jpg|jpeg|png|gif|svg)' },
47-
{ context: 'src', from: 'fonts/!*.+(woff|woff2|otf|eot|svg)' },
46+
{ context: 'src', from: 'images/**/*.+(jpg|jpeg|png|gif|svg)' },
47+
{ context: 'src', from: 'fonts/*.+(woff|woff2|otf|eot|svg)' },
4848
],
4949
}),
5050
new ImageminPlugin({

‎web/themes/custom/subsites/bellcom_theme/src/scss/sections/hero.scss

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.hero-wrapper {
22
min-height: 70vh;
33
width: 100%;
4-
background-color: white;
54
display: flex;
65
align-items: center;
76
padding: 80px 0;
@@ -58,6 +57,7 @@
5857

5958
@media (max-width: 640px) {
6059
flex-direction: column;
60+
align-items: flex-start;
6161
}
6262
.main-cta-btn-wrapper {
6363
margin-right: 30px;
@@ -108,12 +108,38 @@
108108
display: flex;
109109
align-items: center;
110110

111+
&:hover span:after {
112+
transform: scaleX(1);
113+
transform-origin: bottom left;
114+
}
115+
111116
.ext {
112117
display: none;
113118
}
114119

115120
span {
116121
margin-right: 20px;
122+
position: relative;
123+
display: inline-block;
124+
125+
&:after {
126+
content: '';
127+
position: absolute;
128+
width: 100%;
129+
transform: scaleX(0);
130+
height: 2px;
131+
bottom: -5px;
132+
left: 0;
133+
transform-origin: bottom right;
134+
transition: transform 0.25s ease-out;
135+
}
136+
}
137+
svg {
138+
transition: 0.3s ease;
139+
transform: translateX(0);
140+
}
141+
&:hover svg {
142+
transform: translateX(10px);
117143
}
118144
}
119145
}

‎web/themes/custom/subsites/bellcom_theme/templates/paragraphs/paragraph--landingpage_hero_banner.html.twig

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,45 @@
1-
<div class="hero-wrapper">
1+
{% set selectedBackground = content.field_hero_bgcolor['#items'].getString() %}
2+
<div class="hero-wrapper" style="background-color:{% if selectedBackground == 'black' %} #212529;
3+
{% elseif selectedBackground == 'white' %} #fff; {% elseif selectedBackground == 'green' %} #344E41
4+
{% elseif selectedBackground == 'blue' %} #22223B; {% elseif selectedBackground == 'grey' %} #343A40;
5+
{% elseif selectedBackground == 'sand' %} #DAD7CD; {% endif %}">
26
<div class="hero__inner-wrapper">
37
<div class="hero__text-wrapper">
48
{% if paragraph.field_hero_heading.value %}
5-
<h1 data-aos="fade-in">{{ content.field_hero_heading }}</h1>
9+
<h1 style="color: {% if selectedBackground in ['black', 'blue', 'green', 'grey'] %} #fff; {% else %} #000; {% endif %}">{{ content.field_hero_heading }}</h1>
610
{% endif %}
711
{% if paragraph.field_hero_body.value %}
8-
<div class="hero__body-text">
12+
<div style="color: {% if selectedBackground in ['black', 'blue', 'green', 'grey'] %} #fff; {% else %} #000; {% endif %}" class="hero__body-text">
913
{{ content.field_hero_body }}
1014
</div>
1115
{% endif %}
1216
{% if paragraph.field_main_cta_button.value or paragraph.field_secondary_cta_button.value %}
1317
<div class="hero__cta-wrapper">
1418
{% if paragraph.field_main_cta_button.value %}
1519
<div class="main-cta-btn-wrapper">
16-
<a class="main-cta-btn" href="{{ paragraph.field_main_cta_button.0.url }}"><span>{{ paragraph.field_main_cta_button.0.title }}</span>{% include "@bellcom_theme/assets/images/arrow-right-small.svg" %}</a>
20+
<a style="{% if selectedBackground in ['black', 'grey', 'green', 'blue'] %}background-color: #fff; color: black;
21+
{% else %} background-color: #344e41; color: white; {% endif %}"
22+
class="main-cta-btn" href="{{ paragraph.field_main_cta_button.0.url }}">
23+
<span>{{ paragraph.field_main_cta_button.0.title }}</span>
24+
{% if selectedBackground in ['black', 'grey', 'green', 'blue'] %}
25+
{% include "@bellcom_theme/assets/images/arrow-right-small.svg" with { custom_color: "black" } %}
26+
{% else %}
27+
{% include "@bellcom_theme/assets/images/arrow-right-small.svg" with { custom_color: "white" } %}
28+
{% endif %}
29+
</a>
1730
</div>
1831
{% endif %}
1932
{% if paragraph.field_secondary_cta_button.value %}
2033
<div class="secondary-cta-btn-wrapper">
21-
<a class="secondary-cta-btn" href="{{ paragraph.field_secondary_cta_button.0.url }}"><span>{{ paragraph.field_secondary_cta_button.0.title }}</span> {% include "@bellcom_theme/assets/images/arrow-right.svg" %}</a>
34+
<a style="{% if selectedBackground in ['black', 'grey', 'green', 'blue'] %} color: white;
35+
{% else %} color: black; {% endif %}"
36+
class="secondary-cta-btn" href="{{ paragraph.field_secondary_cta_button.0.url }}">
37+
<span id="secondary-btn">{{ paragraph.field_secondary_cta_button.0.title }}</span>
38+
{% if selectedBackground in ['black', 'grey', 'green', 'blue'] %}
39+
{% include "@bellcom_theme/assets/images/arrow-right.svg" with { custom_color: "white" } %}
40+
{% else %}
41+
{% include "@bellcom_theme/assets/images/arrow-right.svg" with { custom_color: "black" } %}
42+
{% endif %}</a>
2243
</div>
2344
{% endif %}
2445
</div>
@@ -67,3 +88,9 @@
6788
</div>
6889
</div>
6990
</div>
91+
92+
<style>
93+
#secondary-btn:after {
94+
background-color: {% if selectedBackground in ['black', 'grey', 'green', 'blue'] %} white; {% else %} black; {% endif %}
95+
}
96+
</style>

0 commit comments

Comments
 (0)