Skip to content

Commit e0cea6e

Browse files
itxchandanitxchandan
committed
Update _mobilemenu.scss
1 parent bb9e363 commit e0cea6e

File tree

1 file changed

+92
-84
lines changed

1 file changed

+92
-84
lines changed

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

Lines changed: 92 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
$burger-layer-width: 30px !default;
2+
$close-btn-height: 50px !default;
3+
24

35
.astroid-mobilemenu{
46
position: fixed;
@@ -14,83 +16,93 @@ $burger-layer-width: 30px !default;
1416
-webkit-transition: all 0.5s;
1517
transition: all 0.5s;
1618
max-width: 100vw !important;
17-
a {
18-
small {
19-
display: block !important;
20-
}
21-
}
22-
.burger-menu-button {
23-
padding: 10px;
19+
a small {
20+
display: block !important;
2421
}
22+
.burger-menu-button{
23+
padding: 10px;
24+
position: sticky;
25+
top: 0;
26+
left: 0;
27+
width: 100%;
28+
z-index: 9;
29+
background: #fff;
30+
}
2531
}
2632

27-
.astroid-mobilemenu-container{
28-
.astroid-mobilemenu-inner {
29-
ul{
30-
padding: 0;
31-
height: 100%;
32-
display: block;
33-
position: relative;
34-
width: 100%;
35-
}
36-
.menu-item {
37-
border-bottom: 1px solid #ddd;
38-
display: table;
39-
width: 100%;
33+
.astroid-mobilemenu-container .astroid-mobilemenu-inner {
34+
ul{
35+
padding: 0;
36+
display: block;
37+
position: relative;
38+
width: 100%;
39+
height: 100%;
40+
> li.menu-item:first-child{
41+
border-top: 1px solid #ddd;
4042
}
41-
.menu-item a {
42-
outline: 0;
43-
width: 80%;
44-
text-decoration: none;
45-
vertical-align: middle;
46-
display: table-cell;
47-
color: $black;
48-
padding: 15px 15px;
43+
li.menu-item.menu-go-back{
44+
margin-top: $close-btn-height;
45+
border-top: 0;
4946
}
50-
.menu-item span.separator,.menu-item span.nav-header {
47+
}
48+
.menu-item {
49+
border-bottom: 1px solid #ddd;
50+
display: table;
51+
width: 100%;
52+
}
53+
.menu-item a {
54+
outline: 0;
55+
width: 80%;
56+
text-decoration: none;
57+
vertical-align: middle;
58+
display: table-cell;
59+
color: $black;
60+
padding: 15px;
61+
}
62+
.menu-item span.separator,
63+
.menu-item span.nav-header {
64+
cursor: pointer;
65+
outline: 0;
66+
width: 80%;
67+
text-decoration: none;
68+
vertical-align: middle;
69+
display: table-cell;
70+
color: $black;
71+
padding: 15px;
72+
}
73+
.menu-item .menu-indicator {
74+
width: 20%;
75+
text-align: center;
76+
display: table-cell;
77+
vertical-align: middle;
78+
border-left: 1px solid #ddd;
79+
cursor: pointer;
80+
}
81+
.dropdown-menus {
82+
position: fixed;
83+
left: -120%;
84+
top: 0;
85+
height: 100vh;
86+
width: 100% !important;
87+
transition: all 0.5s;
88+
background: $white;
89+
.menu-indicator-back {
90+
text-align: left;
91+
width: 100%;
5192
cursor: pointer;
52-
outline: 0;
53-
width: 80%;
54-
text-decoration: none;
55-
vertical-align: middle;
56-
display: table-cell;
57-
color: $black;
58-
padding: 15px 15px;
93+
display: block;
94+
padding: 15px;
95+
box-sizing: border-box;
5996
}
60-
.menu-item .menu-indicator {
61-
width: 20%;
62-
text-align: center;
63-
display: table-cell;
64-
vertical-align: middle;
65-
border-left: 1px solid #ddd;
66-
cursor: pointer;
97+
.menu-indicator-back i {
98+
margin-right: 10px;
6799
}
68-
.dropdown-menus {
69-
position: fixed;
70-
left: -100%;
71-
top: 30px;
100+
.dropdown-menus-item {
72101
width: 100%;
73-
height: 100vh;
74-
transition: all 0.5s;
75-
background: $white;
76-
.menu-indicator-back {
77-
text-align: left;
78-
width: 100%;
79-
cursor: pointer;
80-
display: block;
81-
padding: 15px;
82-
box-sizing: border-box;
83-
}
84-
.menu-indicator-back i {
85-
margin-right: 10px;
86-
}
87-
.dropdown-menus-item {
88-
width: 100%;
89-
}
90-
&.menu_open {
91-
left: 0;
92-
z-index: 1;
93-
}
102+
}
103+
&.menu_open {
104+
left: 0;
105+
z-index: 1;
94106
}
95107
}
96108
}
@@ -126,22 +138,18 @@ body.astroid-mobilemenu-opened{
126138
.astroid-mobilemenu-open{
127139
overflow-x: hidden;
128140
}
129-
.astroid-content{
130-
&:after{
131-
width: 100%;
132-
height: 100%;
133-
opacity: 1;
134-
-webkit-transition: opacity 0.5s;
135-
transition: opacity 0.5s;
136-
}
141+
.astroid-content:after{
142+
width: 100%;
143+
height: 100%;
144+
opacity: 1;
145+
-webkit-transition: opacity 0.5s;
146+
transition: opacity 0.5s;
137147
}
138-
.astroid-mobilemenu{
139-
&:after{
140-
width: 0;
141-
height: 0;
142-
opacity: 0;
143-
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
144-
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
145-
}
148+
.astroid-mobilemenu:after{
149+
width: 0;
150+
height: 0;
151+
opacity: 0;
152+
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
153+
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
146154
}
147155
}

0 commit comments

Comments
 (0)