| @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; |
| } |
| } |
| } |