@import "colors"; | |
#sidebar { | |
color: #fff; | |
text-shadow: none; | |
transition: all .3s ease-in-out; | |
position: fixed; | |
z-index: 500; | |
height: 105%; | |
margin-top: -10px; | |
background-color: #496000; | |
width: 230px; | |
margin-left: -215px; | |
padding-top: 80px; | |
left: 0; | |
top: 0; | |
&.active { | |
box-shadow: 2px 2px 5px darken($dark-green, 15%); | |
margin-left: 0px; | |
left: 0; | |
top: 0; | |
} | |
> * { | |
opacity: 0; | |
// TODO | |
transition: { | |
property: opacity; | |
duration: .3s; | |
} | |
} | |
&.active { | |
> * { | |
opacity: 1; | |
} | |
> i.fa-bars { | |
opacity: 0; | |
} | |
} | |
&:not(.active) > i.fa-bars { | |
opacity: 1; | |
cursor: pointer; | |
background-color: #496000; | |
position: fixed; | |
font-size: 16pt; | |
width: 16pt; | |
height: 17pt; | |
padding: 6pt; | |
bottom: 0; | |
left: 0; | |
border-top-right-radius: 5pt; | |
} | |
h2 { | |
font: { | |
size: 100%; | |
weight: bold; | |
} | |
text-align: center; | |
padding: 0; | |
margin: 0 0 5pt 0; | |
} | |
ul { | |
list-style-type: none; | |
margin: 0; | |
font-size: 10pt; | |
text-indent: 0; | |
padding: 0; | |
li { | |
padding: 4pt 10pt; | |
h3 { | |
font: { | |
weight: bold; | |
size: 100%; | |
} | |
padding: 0; | |
margin: 0; | |
} | |
&.active { | |
background-color: $light-green; | |
text-shadow: 1px 1px rgba(0, 0, 0, 0.4); | |
h3 { | |
margin-bottom: 2pt; | |
padding-bottom: 2pt; | |
border-bottom: 1px solid black; | |
} | |
} | |
} | |
} | |
dl.info { | |
font-size: 9pt; | |
padding: 0 10pt; | |
> dt { | |
font-weight: bold; | |
float: left; | |
} | |
> dd { | |
text-align: right; | |
} | |
} | |
} |