Skip to content

Commit 1e0b375

Browse files
thollebellcomthollebellcom
committed
Merge branch 'develop' of github.com:OS2web/os2web8 into develop
2 parents 5e8ea9f + 3525ad4 commit 1e0b375

File tree

5 files changed

+227
-8
lines changed

5 files changed

+227
-8
lines changed

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

Lines changed: 83 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1113,16 +1113,79 @@ footer .footer_inner-wrapper .footer_newsletter form input {
11131113
outline: none;
11141114
width: 100%;
11151115
}
1116+
footer .footer_inner-wrapper .footer_newsletter form input::placeholder {
1117+
font-size: 14px;
1118+
}
11161119
footer .footer_inner-wrapper .footer_newsletter form button {
1117-
display: inline-block;
1118-
padding: 10px 20px;
11191120
background-color: #344E41;
11201121
border-top-right-radius: 10px;
11211122
border-bottom-right-radius: 10px;
11221123
color: white;
11231124
font-weight: 600;
1124-
font-size: 15px;
1125+
display: block;
1126+
width: 200px;
1127+
height: 45px;
1128+
overflow: hidden;
1129+
position: relative;
1130+
transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400);
11251131
}
1132+
footer .footer_inner-wrapper .footer_newsletter form button span,
1133+
footer .footer_inner-wrapper .footer_newsletter form button .icon {
1134+
display: block;
1135+
height: 100%;
1136+
text-align: center;
1137+
position: absolute;
1138+
top: 0;
1139+
}
1140+
footer .footer_inner-wrapper .footer_newsletter form button span {
1141+
width: 70%;
1142+
font-size: 14px;
1143+
left: 0;
1144+
position: relative;
1145+
display: flex;
1146+
justify-content: center;
1147+
align-items: center;
1148+
transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400);;
1149+
}
1150+
footer .footer_inner-wrapper .footer_newsletter form button .icon {
1151+
width: 50%;
1152+
right: 0;
1153+
display: flex;
1154+
align-items: center;
1155+
justify-content: center;
1156+
transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400);
1157+
}
1158+
footer .footer_inner-wrapper .footer_newsletter form button .icon .fa-regular, footer .footer_inner-wrapper .footer_newsletter form button .icon .fa-solid {
1159+
font-size: 15px;
1160+
vertical-align: middle;
1161+
transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400), height 0.25s ease;
1162+
}
1163+
footer .footer_inner-wrapper .footer_newsletter form button .icon .fa-check {
1164+
display: none;
1165+
}
1166+
footer .footer_inner-wrapper .footer_newsletter form button.success span, footer .footer_inner-wrapper .footer_newsletter form button:hover span {
1167+
left: -72%;
1168+
opacity: 0;
1169+
}
1170+
footer .footer_inner-wrapper .footer_newsletter form button.success .icon, footer .footer_inner-wrapper .footer_newsletter form button:hover .icon {
1171+
width: 100%;
1172+
}
1173+
footer .footer_inner-wrapper .footer_newsletter form button.success {
1174+
background-color: #27ae60;
1175+
width: 50px;
1176+
}
1177+
footer .footer_inner-wrapper .footer_newsletter form button.success .icon .fa-paper-plane {
1178+
display: none;
1179+
}
1180+
footer .footer_inner-wrapper .footer_newsletter form button.success .icon .fa-check {
1181+
display: inline-block;
1182+
}
1183+
footer .footer_inner-wrapper .footer_newsletter form button:hover {
1184+
opacity: .9;
1185+
}
1186+
footer .footer_inner-wrapper .footer_newsletter form button:active {
1187+
opacity: 1;
1188+
}
11261189
footer .footer_inner-wrapper .footer_logo_links {
11271190
display: flex;
11281191
gap: 50px;
@@ -1256,6 +1319,8 @@ footer .bottom__footer .bottom__footer-inner .right-side p {
12561319
footer .bottom__footer .bottom__footer-inner .right-side .footer-socials {
12571320
display: flex;
12581321
gap: 20px;
1322+
1323+
12591324
}
12601325
footer .bottom__footer .bottom__footer-inner .right-side .footer-socials .footer-icon {
12611326
width: 40px;
@@ -1266,6 +1331,21 @@ footer .bottom__footer .bottom__footer-inner .right-side .footer-socials .footer
12661331
border: 1px solid #d7d7d7;
12671332
border-radius: 50%;
12681333
}
1334+
footer .bottom__footer .bottom__footer-inner .right-side .footer-socials .footer-icon:hover i {
1335+
color: white;
1336+
}
1337+
footer .bottom__footer .bottom__footer-inner .right-side .footer-socials .facebook:hover {
1338+
background-color: #4267B2;
1339+
border-color: transparent;
1340+
}
1341+
footer .bottom__footer .bottom__footer-inner .right-side .footer-socials .linkedin:hover {
1342+
background-color: #0077b5;
1343+
border-color: transparent;
1344+
}
1345+
footer .bottom__footer .bottom__footer-inner .right-side .footer-socials .instagram:hover {
1346+
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
1347+
border-color: transparent;
1348+
}
12691349
.hero-wrapper {
12701350
min-height: 70vh;
12711351
width: 100%;

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

Lines changed: 12 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/themes/custom/subsites/bellcom_theme/src/js/main.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,19 @@ window.onresize = function () {
2424
hamburgerBtn.classList.remove('active');
2525
}
2626
};
27+
28+
const subscribeBtn = document.querySelector('#subscribe-btn');
29+
30+
function removeSuccess() {
31+
subscribeBtn.classList.remove('success');
32+
}
33+
34+
subscribeBtn.addEventListener('click', (e) => {
35+
subscribeBtn.classList.add('success');
36+
e.preventDefault();
37+
setTimeout(() => {
38+
removeSuccess();
39+
}, 3000);
40+
});
41+
42+

‎web/themes/custom/subsites/bellcom_theme/src/scss/components/footer.scss

Lines changed: 109 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,98 @@ footer {
4646
border-bottom-left-radius: 10px;
4747
outline: none;
4848
width: 100%;
49+
50+
&::placeholder {
51+
font-size: 14px;
52+
}
4953
}
5054
button {
51-
display: inline-block;
52-
padding: 10px 20px;
5355
background-color: #344E41;
5456
border-top-right-radius: 10px;
5557
border-bottom-right-radius: 10px;
5658
color: white;
5759
font-weight: 600;
58-
font-size: 15px;
60+
display: block;
61+
width: 200px;
62+
height: 45px;
63+
overflow: hidden;
64+
position: relative;
65+
transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400);
66+
span,
67+
.icon {
68+
display: block;
69+
height: 100%;
70+
text-align: center;
71+
position: absolute;
72+
top: 0;
73+
}
74+
75+
span {
76+
width: 70%;
77+
font-size: 14px;
78+
left: 0;
79+
position: relative;
80+
display: flex;
81+
justify-content: center;
82+
align-items: center;
83+
transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400);;
84+
}
85+
86+
.icon {
87+
width: 50%;
88+
right: 0;
89+
display: flex;
90+
align-items: center;
91+
justify-content: center;
92+
transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400);;
93+
94+
.fa-regular, .fa-solid {
95+
font-size: 15px;
96+
vertical-align: middle;
97+
transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400), height 0.25s ease;
98+
}
99+
100+
.fa-check {
101+
display: none;
102+
}
103+
}
104+
105+
&.success,
106+
&:hover {
107+
108+
span {
109+
left: -72%;
110+
opacity: 0;
111+
}
112+
113+
.icon {
114+
width: 100%;
115+
}
116+
}
117+
118+
&.success {
119+
background-color: #27ae60;
120+
width: 50px;
121+
122+
.icon {
123+
124+
.fa-paper-plane {
125+
display: none;
126+
}
127+
128+
.fa-check {
129+
display: inline-block;
130+
}
131+
}
132+
}
133+
134+
&:hover {
135+
opacity: .9;
136+
}
137+
138+
&:active {
139+
opacity: 1;
140+
}
59141
}
60142
}
61143
}
@@ -223,7 +305,31 @@ footer {
223305
align-items: center;
224306
border: 1px solid #d7d7d7;
225307
border-radius: 50%;
308+
309+
&:hover i {
310+
color: white;
311+
}
226312
}
313+
.facebook {
314+
&:hover {
315+
background-color: #4267B2;
316+
border-color: transparent;
317+
}
318+
}
319+
.linkedin {
320+
&:hover {
321+
background-color: #0077b5;
322+
border-color: transparent;
323+
}
324+
}
325+
.instagram {
326+
&:hover {
327+
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
328+
border-color: transparent;
329+
}
330+
}
331+
332+
227333
}
228334

229335
}

‎web/themes/custom/subsites/bellcom_theme/templates/pages/page.html.twig

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,13 @@
5858
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
5959
<form>
6060
<input type="email" placeholder="Skriv din e-mail her...">
61-
<button type="submit" value="Abonnér">Abonnér</button>
61+
<button id="subscribe-btn" type="submit">
62+
<span>Abonnér</span>
63+
<div class="icon">
64+
<i class="fa-regular fa-paper-plane"></i>
65+
<i class="fa-solid fa-check"></i>
66+
</div>
67+
</button>
6268
</form>
6369

6470
</div>

0 commit comments

Comments
 (0)