Skip to content

Commit bb9e363

Browse files
itxchandanitxchandan
committed
Revert "Mobile and Offcanvas color Improvement"
This reverts commit 3517be5.
1 parent 3517be5 commit bb9e363

File tree

2 files changed

+81
-55
lines changed

2 files changed

+81
-55
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, .menu_open .menu-indicator-back .fas { color: ' . $mobile_menu_text_color . ' !important;}';
135+
$mobilemenu_styles[] = '.astroid-offcanvas, .astroid-mobilemenu { 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.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;}';
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;}';
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: 79 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
$burger-layer-width: 30px !default;
22
$burger-layer-height: 3px !default;
33
$burger-layer-spacing: 7px !default;
4-
$offcanvas-btn: 50px !default;
54

65
.header-offcanvas-trigger {
76
background: none;
@@ -29,41 +28,31 @@ $offcanvas-btn: 50px !default;
2928
border: 0;
3029
margin: 0;
3130
overflow: visible;
31+
3232
&:hover {
3333
opacity: 0.7;
3434
}
35+
3536
width: $burger-layer-width;
3637
height: $burger-layer-width;
38+
3739
&:focus {
3840
outline: 0;
3941
}
4042
}
4143

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-
}
5744
.box {
5845
width: $burger-layer-width;
5946
height: $burger-layer-width;
6047
display: inline-block;
6148
position: relative;
6249
}
50+
6351
.inner {
6452
display: block;
6553
top: 50%;
6654
margin-top: $burger-layer-height / -2;
55+
6756
&,
6857
&::before,
6958
&::after {
@@ -75,14 +64,17 @@ $offcanvas-btn: 50px !default;
7564
transition-duration: 0.15s;
7665
transition-timing-function: ease;
7766
}
67+
7868
&::before,
7969
&::after {
8070
content: "";
8171
display: block;
8272
}
73+
8374
&::before {
8475
top: ($burger-layer-spacing + $burger-layer-height) * -1;
8576
}
77+
8678
&::after {
8779
bottom: ($burger-layer-spacing + $burger-layer-height) * -1;
8880
}
@@ -91,30 +83,57 @@ $offcanvas-btn: 50px !default;
9183
.inner {
9284
transition-duration: 0.22s;
9385
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
86+
9487
&::before {
9588
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
9689
}
90+
9791
&::after {
9892
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
9993
}
10094
}
10195

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+
102116
&.header-offcanvas-trigger {
103117
.inner {
104118
&::before {
105119
width: $burger-layer-width - 10px;
106120
margin-left: 10px;
107121
}
122+
108123
&::after {
109124
width: $burger-layer-width - 5px;
110125
margin-left: 5px;
111126
}
112127
}
113-
&.active .inner {
114-
&::before,
115-
&::after {
116-
width: $burger-layer-width;
117-
margin-left: 0;
128+
129+
&.active {
130+
.inner {
131+
132+
&::before,
133+
&::after {
134+
width: $burger-layer-width;
135+
margin-left: 0;
136+
}
118137
}
119138
}
120139
}
@@ -125,13 +144,15 @@ $offcanvas-btn: 50px !default;
125144
top: 0;
126145
height: 100%;
127146
z-index: 10001;
147+
128148
.off-page-inner {
129149
position: relative;
130150
z-index: 2;
131151
background: $white;
132152
height: 100%;
133153
overflow-y: auto;
134154
}
155+
135156
.off-page-close {
136157
width: 40px;
137158
height: 40px;
@@ -147,10 +168,12 @@ $offcanvas-btn: 50px !default;
147168
cursor: pointer;
148169
border-bottom: 1px solid #eee;
149170
border-left: 1px solid #eee;
171+
150172
&:after {
151173
content: "\2715";
152174
}
153175
}
176+
154177
.off-page-overlay {
155178
position: fixed;
156179
display: none;
@@ -169,27 +192,23 @@ $offcanvas-btn: 50px !default;
169192
left: 0;
170193
z-index: $zindex-popover;
171194
visibility: hidden;
172-
height: 100vh;
173-
overflow-x: hidden;
174-
overflow-y: auto;
195+
height: 100%;
196+
overflow: auto;
175197
-webkit-overflow-scrolling: touch;
176198
background: $white;
177199
-webkit-transition: all 0.5s;
178200
transition: all 0.5s;
179201
max-width: 100vw !important;
202+
180203
.burger-menu-button{
181204
padding: 10px;
182-
position: sticky;
183-
top: 0;
184-
left: 0;
185-
width: 100%;
186-
z-index: 9;
187-
background: #fff;
188205
}
206+
189207
.astroid-offcanvas-inner {
208+
overflow: auto;
190209
position: relative;
191210
display: block;
192-
height: calc(100% - $offcanvas-btn);
211+
height: 100%;
193212
padding: 0 15px;
194213
.moduletable {
195214
margin: 0 -15px;
@@ -199,9 +218,7 @@ $offcanvas-btn: 50px !default;
199218
margin: 0;
200219
}
201220
}
202-
li.menu-item.menu-go-back{
203-
margin-top: $offcanvas-btn;
204-
}
221+
205222
.close-offcanvas,
206223
.close-offcanvas:hover {
207224
display: inline-block;
@@ -210,6 +227,7 @@ $offcanvas-btn: 50px !default;
210227
right: 0;
211228
z-index: 999999;
212229
}
230+
213231
.burger-menu-button .inner,
214232
.burger-menu-button .inner::before,
215233
.burger-menu-button .inner::after {
@@ -218,24 +236,32 @@ $offcanvas-btn: 50px !default;
218236
}
219237
}
220238

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;
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+
}
240266
}
241267
}

0 commit comments

Comments
 (0)