Skip to content

Commit 538eb33

Browse files
author
Simon L. Lange
committed
Bellcom theme: lots of changes
1 parent 4c4e33f commit 538eb33

File tree

15 files changed

+1227
-26
lines changed

15 files changed

+1227
-26
lines changed

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

Lines changed: 518 additions & 12 deletions
Large diffs are not rendered by default.

‎web/themes/custom/subsites/bellcom_theme/assets/images/arrowcircleright.svg

Lines changed: 2 additions & 1 deletion
Loading

‎web/themes/custom/subsites/bellcom_theme/assets/images/directright.svg

Lines changed: 3 additions & 0 deletions
Loading

‎web/themes/custom/subsites/bellcom_theme/assets/images/headphone.svg

Lines changed: 3 additions & 0 deletions
Loading

‎web/themes/custom/subsites/bellcom_theme/assets/images/ktc.png

-17.1 KB
Binary file not shown.

‎web/themes/custom/subsites/bellcom_theme/assets/images/monitor.svg

Lines changed: 3 additions & 0 deletions
Loading

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

Lines changed: 1 addition & 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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,4 @@ subscribeBtnTextImage.addEventListener('click', (e) => {
5252
});
5353

5454

55+

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

Lines changed: 164 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
align-items: center;
1515
width: 100%;
1616
padding: 0 10px;
17+
position: relative;
1718

1819
.hamburger {
1920
border: none;
@@ -54,6 +55,7 @@
5455

5556
.region--header {
5657
width: 50%;
58+
height: 100%;
5759

5860
@media only screen and (max-width: 1024px) {
5961
width: 70%;
@@ -76,6 +78,8 @@
7678

7779

7880
nav {
81+
height: 100%;
82+
position: static;
7983

8084
@media only screen and (max-width: 768px) {
8185
height: 80%;
@@ -86,41 +90,184 @@
8690
text-transform: uppercase;
8791
justify-content: space-between;
8892
align-items: center;
93+
height: 100%;
8994

9095
@media only screen and (max-width: 768px) {
9196
flex-direction: column;
9297
align-items: flex-start;
9398
}
9499

95-
li {
96-
position: relative;
97-
display: inline-block;
100+
.digital {
101+
position: static;
98102

99-
.menu-children {
100-
display: none;
103+
&:hover ul {
104+
visibility: visible;
105+
transition-delay: 0s;
106+
opacity: 1;
107+
transform: translateY(0);
108+
}
109+
ul {
101110
position: absolute;
102111
background-color: white;
112+
top: 94px;
113+
width: 100%;
114+
height: auto;
115+
display: flex;
116+
align-items: flex-start;
117+
flex-direction: column;
103118
border-radius: 10px;
104-
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
119+
left: 0;
120+
gap: 45px;
121+
visibility: hidden;
122+
transform: translateY(-10px);
123+
opacity: 0;
124+
transition: 0.2s 0.2s;
125+
}
126+
}
127+
128+
.services {
129+
position: relative;
130+
131+
&:hover ul {
132+
visibility: visible;
133+
opacity: 1;
134+
transition-delay: 0s;
135+
transform: translateY(0);
136+
}
137+
&:focus ul {
138+
visibility: visible;
139+
opacity: 1;
140+
transition-delay: 0s;
141+
transform: translateY(0);
142+
}
143+
ul {
144+
position: absolute;
145+
background-color: white;
146+
top: 100px;
147+
width: 400px;
148+
height: auto;
149+
display: flex;
105150
flex-direction: column;
106-
top: 58px;
107-
right: 0;
108151
align-items: flex-start;
109-
padding: 30px;
110-
gap: 10px;
152+
padding: 10px 10px 45px 10px;
153+
border-radius: 10px;
154+
right: 0;
155+
gap: 45px;
156+
visibility: hidden;
157+
transform: translateY(-10px);
158+
opacity: 0;
159+
transition: 0.2s 0.2s;
111160

161+
&:after {
162+
content: '';
163+
position: absolute;
164+
background-color: white;
165+
width: 8px;
166+
height: 8px;
167+
transform: rotate(45deg);
168+
top: -4px;
169+
right: 9%;
170+
}
171+
172+
li {
173+
width: 100%;
174+
height: 100%;
175+
a {
176+
width: 95%;
177+
margin: 0 auto;
178+
font-weight: 500;
179+
font-size: 16px;
180+
text-transform: none;
181+
padding: 10px 10px 0 65px;
182+
border-top-right-radius: 10px;
183+
border-top-left-radius: 10px;
184+
transition: 0.3s ease;
185+
&:hover {
186+
background-color: #f5f5f5;
187+
188+
&:after {
189+
background-color: #f5f5f5;
190+
border-bottom-left-radius: 10px;
191+
border-bottom-right-radius: 10px;
192+
}
193+
194+
}
195+
&:after {
196+
content: attr(data-description);
197+
position: absolute;
198+
left: 0;
199+
width: 100%;
200+
color: #7C7C7C;
201+
font-size: 14px;
202+
padding-left: 65px;
203+
text-transform: none;
204+
height: 100%;
205+
bottom: -100%;
206+
transition: 0.3s ease;
207+
}
208+
209+
}
210+
.hosting:before {
211+
content: '';
212+
background-image: url('../images/monitor.svg');
213+
width: 24px;
214+
height: 24px;
215+
background-size: 24px 24px;
216+
background-repeat: no-repeat;
217+
display: block;
218+
position: absolute;
219+
left: 20px;
220+
top: 50%;
221+
z-index: 2;
222+
}
223+
.support:before {
224+
content: '';
225+
background-image: url('../images/headphone.svg');
226+
width: 24px;
227+
height: 24px;
228+
background-size: 24px 24px;
229+
background-repeat: no-repeat;
230+
display: block;
231+
position: absolute;
232+
left: 20px;
233+
top: 50%;
234+
z-index: 2;
235+
}
236+
.udvikling:before {
237+
content: '';
238+
background-image: url('../images/directright.svg');
239+
width: 24px;
240+
height: 24px;
241+
background-size: 24px 24px;
242+
background-repeat: no-repeat;
243+
display: block;
244+
position: absolute;
245+
left: 20px;
246+
top: 50%;
247+
z-index: 2;
248+
}
249+
}
250+
}
251+
}
252+
253+
li {
254+
height: 115%;
255+
display: flex;
256+
align-items: center;
257+
.contextual-region {
258+
position: static;
112259
}
113260

114261
@media only screen and (max-width: 768px) {
115262
margin-bottom: 50px;
116263
}
117264

118-
&:hover:after {
265+
&:hover a:not([data-description]):after {
119266
transform: scaleX(1);
120267
transform-origin: bottom left;
121268
}
122269

123-
&:after {
270+
a:not([data-description]):after {
124271
content: '';
125272
position: absolute;
126273
width: 100%;
@@ -132,6 +279,11 @@
132279
transition: transform 0.25s ease-out;
133280
background-color: black;
134281
}
282+
283+
a {
284+
position: relative;
285+
display: inline-block;
286+
}
135287
}
136288
}
137289
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@
55
@import './client_showcase.scss';
66
@import './page_banner.scss';
77
@import './contact_form.scss';
8+
@import './simple_accordion.scss';
9+
@import './sidebar_accordion.scss';

0 commit comments

Comments
 (0)