78 lines
1.4 KiB
Sass
78 lines
1.4 KiB
Sass
$side-menu-width: 222px
|
|
.side-menu
|
|
background-color: #444
|
|
position: fixed
|
|
//display: none
|
|
left: -$side-menu-width
|
|
top: 0
|
|
width: $side-menu-width
|
|
height: 100%
|
|
z-index: 157
|
|
opacity: 0.9
|
|
border-right: 2px solid black
|
|
&.active
|
|
left: 0
|
|
+animation(sideMenuActive 0.5s)
|
|
.toggle-side-menu
|
|
right: 5px
|
|
&.closed
|
|
&.clicked
|
|
+animation(sideMenuClosed 0.3s)
|
|
> ul
|
|
list-style: none
|
|
a
|
|
color: white
|
|
li
|
|
margin-bottom: 11px
|
|
font-size: 1.2em
|
|
&.title
|
|
border-bottom: 1px solid #aaa
|
|
h3
|
|
color: white
|
|
margin-bottom: 3px
|
|
.scan-qr-icon
|
|
margin-right: 18px
|
|
@extend .fa
|
|
@extend .fa-qrcode
|
|
.fa-glass
|
|
margin-right: 5px
|
|
.active-list-icon
|
|
margin-right: 18px
|
|
@extend .fa
|
|
@extend .fa-list
|
|
.settings-icon
|
|
margin-right: 18px
|
|
@extend .fa
|
|
@extend .fa-gears
|
|
.about-mozo-icon
|
|
margin-right: 18px
|
|
@extend .fa
|
|
@extend .fa-info-circle
|
|
a.active
|
|
color: $current-color
|
|
|
|
.toggle-side-menu
|
|
position: absolute
|
|
width: 28px
|
|
height: 28px
|
|
color: white
|
|
right: -30px
|
|
cursor: pointer
|
|
//z-index: 158
|
|
font-size: 1.6em
|
|
span
|
|
@extend .fa
|
|
@extend .fa-lg
|
|
@extend .fa-bars
|
|
|
|
+keyframes(sideMenuActive)
|
|
from
|
|
left: -$side-menu-width
|
|
to
|
|
left: 0
|
|
+keyframes(sideMenuClosed)
|
|
from
|
|
left: 0
|
|
to
|
|
left: -$side-menu-width
|