Skip to content

Commit 3517be5

Browse files
itxchandanitxchandan
committed
Mobile and Offcanvas color Improvement
1 parent 5e87f28 commit 3517be5

File tree

2 files changed

+55
-81
lines changed

2 files changed

+55
-81
lines changed

‎astroid/astroid-template-zero/frontend/colors.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@
132132
$mobilemenu_styles[] = '.astroid-offcanvas, .astroid-mobilemenu, .astroid-mobilemenu-container .astroid-mobilemenu-inner .dropdown-menus{ background-color: ' . $mobile_background_color . ' !important;}';
133133
}
134134
if (!empty($mobile_menu_text_color)) {
135-
$mobilemenu_styles[] = '.astroid-offcanvas, .astroid-mobilemenu { color: ' . $mobile_menu_text_color . ' !important;}';
135+
$mobilemenu_styles[] = '.astroid-offcanvas, .astroid-mobilemenu, .menu_open .menu-indicator-back .fas { color: ' . $mobile_menu_text_color . ' !important;}';
136136
}
137137
if (!empty($mobile_link_color)) {
138138
$mobilemenu_styles[] = '.astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item a, .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-indicator .menu-item .fas{ color: ' . $mobile_link_color . ' !important;}';
@@ -141,7 +141,7 @@
141141
$mobilemenu_styles[] = '.fgfdfd{ background-color: ' . $mobile_hover_background_color . ' !important;}';
142142
}
143143
if (!empty($mobile_active_link_color)) {
144-
$mobilemenu_styles[] = '.astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active > a, .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active > a,.astroid-mobilemenu-container .menu-indicator-back, .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active .fas, .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active .fas{ color: ' . $mobile_active_link_color . ' !important;}';
144+
$mobilemenu_styles[] = '.astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active > a, .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active > .nav-header, .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active > a, .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active > .menu-indicator .fas, .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active .fas{ color: ' . $mobile_active_link_color . ' !important;}';
145145
}
146146
if (!empty($mobile_active_background_color)) {
147147
$mobilemenu_styles[] = '.astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active, .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active, .menu-go-back { background-color: ' . $mobile_active_background_color . ' !important;}';

‎astroid/astroid-template-zero/scss/astroid/_offcanvas.scss‎

Lines changed: 53 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
$burger-layer-width: 30px !default;
22
$burger-layer-height: 3px !default;
33
$burger-layer-spacing: 7px !default;
4+
$offcanvas-btn: 50px !default;
45

56
.header-offcanvas-trigger {
67
background: none;
@@ -28,31 +29,41 @@ $burger-layer-spacing: 7px !default;
2829
border: 0;
2930
margin: 0;
3031
overflow: visible;
31-
3232
&:hover {
3333
opacity: 0.7;
3434
}
35-
3635
width: $burger-layer-width;
3736
height: $burger-layer-width;
38-
3937
&:focus {
4038
outline: 0;
4139
}
4240
}
4341

42+
.offcanvas-close-btn .inner {
43+
transform: rotate(225deg);
44+
transition-delay: 0.12s;
45+
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
46+
&::before {
47+
top: 0;
48+
opacity: 0;
49+
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
50+
}
51+
&::after {
52+
bottom: 0;
53+
transform: rotate(-90deg);
54+
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
55+
}
56+
}
4457
.box {
4558
width: $burger-layer-width;
4659
height: $burger-layer-width;
4760
display: inline-block;
4861
position: relative;
4962
}
50-
5163
.inner {
5264
display: block;
5365
top: 50%;
5466
margin-top: $burger-layer-height / -2;
55-
5667
&,
5768
&::before,
5869
&::after {
@@ -64,17 +75,14 @@ $burger-layer-spacing: 7px !default;
6475
transition-duration: 0.15s;
6576
transition-timing-function: ease;
6677
}
67-
6878
&::before,
6979
&::after {
7080
content: "";
7181
display: block;
7282
}
73-
7483
&::before {
7584
top: ($burger-layer-spacing + $burger-layer-height) * -1;
7685
}
77-
7886
&::after {
7987
bottom: ($burger-layer-spacing + $burger-layer-height) * -1;
8088
}
@@ -83,57 +91,30 @@ $burger-layer-spacing: 7px !default;
8391
.inner {
8492
transition-duration: 0.22s;
8593
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
86-
8794
&::before {
8895
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
8996
}
90-
9197
&::after {
9298
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
9399
}
94100
}
95101

96-
&.active {
97-
.inner {
98-
transform: rotate(225deg);
99-
transition-delay: 0.12s;
100-
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
101-
102-
&::before {
103-
top: 0;
104-
opacity: 0;
105-
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
106-
}
107-
108-
&::after {
109-
bottom: 0;
110-
transform: rotate(-90deg);
111-
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
112-
}
113-
}
114-
}
115-
116102
&.header-offcanvas-trigger {
117103
.inner {
118104
&::before {
119105
width: $burger-layer-width - 10px;
120106
margin-left: 10px;
121107
}
122-
123108
&::after {
124109
width: $burger-layer-width - 5px;
125110
margin-left: 5px;
126111
}
127112
}
128-
129-
&.active {
130-
.inner {
131-
132-
&::before,
133-
&::after {
134-
width: $burger-layer-width;
135-
margin-left: 0;
136-
}
113+
&.active .inner {
114+
&::before,
115+
&::after {
116+
width: $burger-layer-width;
117+
margin-left: 0;
137118
}
138119
}
139120
}
@@ -144,15 +125,13 @@ $burger-layer-spacing: 7px !default;
144125
top: 0;
145126
height: 100%;
146127
z-index: 10001;
147-
148128
.off-page-inner {
149129
position: relative;
150130
z-index: 2;
151131
background: $white;
152132
height: 100%;
153133
overflow-y: auto;
154134
}
155-
156135
.off-page-close {
157136
width: 40px;
158137
height: 40px;
@@ -168,12 +147,10 @@ $burger-layer-spacing: 7px !default;
168147
cursor: pointer;
169148
border-bottom: 1px solid #eee;
170149
border-left: 1px solid #eee;
171-
172150
&:after {
173151
content: "\2715";
174152
}
175153
}
176-
177154
.off-page-overlay {
178155
position: fixed;
179156
display: none;
@@ -192,23 +169,27 @@ $burger-layer-spacing: 7px !default;
192169
left: 0;
193170
z-index: $zindex-popover;
194171
visibility: hidden;
195-
height: 100%;
196-
overflow: auto;
172+
height: 100vh;
173+
overflow-x: hidden;
174+
overflow-y: auto;
197175
-webkit-overflow-scrolling: touch;
198176
background: $white;
199177
-webkit-transition: all 0.5s;
200178
transition: all 0.5s;
201179
max-width: 100vw !important;
202-
203180
.burger-menu-button{
204181
padding: 10px;
182+
position: sticky;
183+
top: 0;
184+
left: 0;
185+
width: 100%;
186+
z-index: 9;
187+
background: #fff;
205188
}
206-
207189
.astroid-offcanvas-inner {
208-
overflow: auto;
209190
position: relative;
210191
display: block;
211-
height: 100%;
192+
height: calc(100% - $offcanvas-btn);
212193
padding: 0 15px;
213194
.moduletable {
214195
margin: 0 -15px;
@@ -218,7 +199,9 @@ $burger-layer-spacing: 7px !default;
218199
margin: 0;
219200
}
220201
}
221-
202+
li.menu-item.menu-go-back{
203+
margin-top: $offcanvas-btn;
204+
}
222205
.close-offcanvas,
223206
.close-offcanvas:hover {
224207
display: inline-block;
@@ -227,7 +210,6 @@ $burger-layer-spacing: 7px !default;
227210
right: 0;
228211
z-index: 999999;
229212
}
230-
231213
.burger-menu-button .inner,
232214
.burger-menu-button .inner::before,
233215
.burger-menu-button .inner::after {
@@ -236,32 +218,24 @@ $burger-layer-spacing: 7px !default;
236218
}
237219
}
238220

239-
body {
240-
&.astroid-offcanvas-opened {
241-
max-height: 100vh;
242-
overflow: hidden;
243-
.astroid-content {
244-
&:after {
245-
width: 100%;
246-
height: 100%;
247-
opacity: 1;
248-
-webkit-transition: opacity 0.5s;
249-
transition: opacity 0.5s;
250-
}
251-
}
252-
253-
.astroid-offcanvas {
254-
&:after {
255-
width: 0;
256-
height: 0;
257-
opacity: 0;
258-
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
259-
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
260-
}
261-
}
262-
263-
.astroid-offcanvas-open {
264-
overflow-x: hidden;
265-
}
221+
body.astroid-offcanvas-opened {
222+
max-height: 100vh;
223+
overflow: hidden;
224+
.astroid-content:after {
225+
width: 100%;
226+
height: 100%;
227+
opacity: 1;
228+
-webkit-transition: opacity 0.5s;
229+
transition: opacity 0.5s;
230+
}
231+
.astroid-offcanvas:after {
232+
width: 0;
233+
height: 0;
234+
opacity: 0;
235+
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
236+
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
237+
}
238+
.astroid-offcanvas-open {
239+
overflow-x: hidden;
266240
}
267241
}

0 commit comments

Comments
 (0)