-
Notifications
You must be signed in to change notification settings - Fork 0
/
_mobile.sass
149 lines (114 loc) · 3.63 KB
/
_mobile.sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
$header-height-mobile: 50px
@media only screen and (max-width: 767px)
.hidden-on-mobile
display: none
.show-on-mobile
display: block
#app
display: flex
flex-direction: column
background-color: red
min-height: 100vh
position: relative
header
order: 1
background-color: orange
height: $header-height-mobile
width: 100%
.header-wrapper
position: fixed
top: 0
left: 0
right: 0
max-height: $header-height-mobile
height: $header-height-mobile
display: flex
flex-direction: row
align-items: center
z-index: 1000
.header-left, .header-right, .header-mobile-menu
width: 100%
flex-grow: 1
display: flex
align-items: center
min-height: $header-height-mobile
max-height: $header-height-mobile
height: 100%
.header-mobile-menu
order: 1
display: flex
background: yellow
justify-content: flex-start
padding: 0 10px
.btn-open-sidebar
cursor: pointer
.header-left
order: 2
background: green
justify-content: center
padding: 0 10px
.header-right
order: 3
background: teal
justify-content: flex-end
padding: 0 10px
.header-center
display: none
main
background: pink
flex-grow: 2
order: 2
position: relative
width: 100%
aside
background: grey
height: 100%
position: fixed
top: 0
left: 0
&.aside-opened
display: block
width: 90%
background: #fff
opacity: 0.95
z-index: 1001
transition: width 0.3s ease
&.aside-closed
width: 0%
transition: width 0.3s ease
.sidebar-menu
.sidebar-header
text-align: right
.btn-close-sidebar
padding-right: 20px
cursor: pointer
div
margin: 20px 0
width: 100%
div#content
background: cyan
position: relative
top: 0
left: 0
right: 0
margin: 0
padding: 10px
min-height: 100%
height: 100%
overflow-x: hidden
.container
aside
overflow: hidden
aside.aside-opened
overflow: hidden
height: 100%
.sidebar-menu
position: absolute
top: 0
left: 0
right: 0
bottom: 0
box-sizing: content-box
height: 100%
width: 100%
overflow-y: scroll