@charset "utf-8"; | |
@import "util"; | |
$border-size: 2px; | |
#sidebar { | |
// box-shadow: 2px 2px 5px darken($dark-green, 15%); | |
// box-shadow: $choose-box-shadow; | |
outline: none; | |
display: block; | |
background-color: $dark-green; | |
position: fixed; | |
z-index: 7100; | |
color: $nearly-white; | |
width: $logo-left-distance; | |
top: 0; | |
left: 0; | |
height: 100%; | |
padding-top: 80px; | |
transition: all .3s ease-in-out; | |
> div { | |
overflow-y: auto; | |
overflow-x: visible; | |
max-height: 100%; | |
} | |
> * { | |
opacity: 1; | |
} | |
&::after { | |
display: block; | |
opacity: 0; | |
cursor: pointer; | |
position: absolute; | |
right: 0; | |
bottom: 0; | |
margin-right: -30px; | |
background-color: $dark-green; | |
content: '#'; | |
font-size: 16pt; | |
width: 16pt; | |
height: 17pt; | |
padding: 6pt; | |
border-top-right-radius: $standard-border-radius; | |
} | |
h2 { | |
font: { | |
size: 100%; | |
weight: bold; | |
} | |
line-height: 2em; | |
text-align: center; | |
padding: 0; | |
margin: 0; | |
} | |
ul { | |
list-style-type: none; | |
/* | |
background-color: $light-green; | |
*/ | |
margin: 0; | |
font-size: 10pt; | |
text-indent: 0; | |
padding: 0; | |
li { | |
padding: 0; | |
> a { | |
@include choose-item; | |
padding: $item-padding; | |
border-right: { | |
width: $border-size; | |
style: solid; | |
} | |
display: block; | |
&:link, &:visited { | |
color: inherited; | |
} | |
&:hover { | |
color: inherit; | |
transition: none; | |
@include choose-hover; | |
} | |
&.active, &:active { | |
@include choose-active; | |
} | |
} | |
h3 { | |
font: { | |
weight: bold; | |
size: 100%; | |
} | |
padding: 0; | |
margin: 0; | |
} | |
/* | |
&.active { | |
text-shadow: none; | |
h3 { | |
margin-bottom: 2pt; | |
padding-bottom: 2pt; | |
border-bottom: 1px solid black; | |
} | |
} | |
*/ | |
> a { | |
padding-left: 6pt; | |
} | |
li > a { | |
padding-left: 18pt; | |
} | |
li li > a { | |
padding-left: 36pt; | |
} | |
} | |
} | |
nav > ul > li > a { | |
font-weight: bold; | |
} | |
} | |
#sidebar:not(:focus):not(.active) { | |
margin-left: -1 * ($logo-left-distance - 15px); | |
// box-shadow: none; | |
/* | |
overflow-y: hidden; | |
overflow-x: visible; | |
*/ | |
&::after { | |
opacity: 1; | |
} | |
> * { | |
opacity: 0; | |
// TODO | |
transition: { | |
property: opacity; | |
duration: .3s; | |
} | |
} | |
} | |
/* | |
#sidebar { | |
text-shadow: none; | |
height: 105%; | |
margin-top: -10px; | |
background-color: #496000; | |
left: 0; | |
top: 0; | |
&.active { | |
box-shadow: 2px 2px 5px darken($dark-green, 15%); | |
margin-left: 0px; | |
left: 0; | |
top: 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; | |
} | |
dl.info { | |
font-size: 9pt; | |
padding: 0 10pt; | |
> dt { | |
font-weight: bold; | |
float: left; | |
} | |
> dd { | |
text-align: right; | |
} | |
} | |
} | |
*/ |