$overview-height: 64px;
$link-width: 48px;
$path-height: 48px;
$file-height: 42px;
$file-path-padding: 24px;
$files-anim: 0.2s;
@mixin hoverable() {
@include clickable();
transition: background-color 0.1s ease;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
&:hover {
background-color: hsl($hue, $saturation, 97%);
}
}
@mixin header() {
#header {
@include font-mono();
.comment {
padding-bottom: 0 !important;
}
header {
.file-path {
position: relative;
#project-overview {
@include hoverable();
font-weight: bold;
}
#project-overview,
.files-menu #filename {
display: block;
border-bottom: 1px solid $code-border-color;
}
#project-overview {
height: $overview-height + 1px;
line-height: $overview-height + 1px;
}
#filename {
display: block;
height: $path-height;
line-height: $path-height;
}
.files-menu .file a {
display: block;
height: $file-height;
line-height: $file-height;
}
.files-menu .files {
background-color: $comment-bg;
width: 100%;
}
.file.separator {
border-top: 1px solid $comment-border-color;
}
.files-menu .file a {
@include hoverable();
position: relative;
overflow: hidden;
.language {
$language-size: 14px;
display: inline-block;
width: $language-size;
height: $language-size;
border-radius: $language-size;
font-size: 0;
position: absolute;
right: 8px;
top: ($file-height - $language-size) * 0.5;
}
.filename {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.links {
position: absolute;
top: 0;
right: 0;
height: $overview-height;
display: block;
padding: 0 ($overview-height - $link-width) * 0.5;
.link {
list-style-type: none;
display: inline-block;
padding: ($overview-height - $link-width) * 0.5 0;
}
.link a {
background-image: url('links.png');
font-size: 0;
display: block;
width: $link-width;
height: $link-width;
opacity: 0.5;
&:hover {
opacity: 0.7;
}
&:active {
opacity: 0.3;
}
}
.link a.github {
background-position: 0 0;
}
.link a.home {
background-position: 48px 0;
}
.link a.twitter {
background-position: 96px 0;
}
}
}
}
}
@mixin header-comment-padding($vert, $left, $right) {
#project-overview,
.files-menu #filename,
.files-menu .file a {
padding-right: $right;
padding-left: $left;
}
}
@mixin header-single-column() {
}
@mixin header-two-column() {
#header {
.files-path {
position: fixed;
@include comment-width();
padding-right: 1px;
}
#filename {
@include hoverable();
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: $path-height !important;
position: relative;
&:after {
display: block;
content: '';
position: absolute;
right: 0;
top: 0;
width: $path-height;
height: $path-height;
background-image: url('dropdown.png');
background-size: $path-height $path-height;
}
}
.files-menu .files {
position: absolute;
border-bottom: 1px solid $code-border-color;
overflow-y: auto;
max-height: calc(100vh - #{$path-height} - #{$overview-height} - 1px);
transition: opacity $files-anim ease;
}
&.files-hidden {
.files-menu .files {
opacity: 0;
pointer-events: none;
}
}
}
}
@mixin header-code() {
}
@mixin header-index() {
#header {
#project-overview {
width: auto;
.name {
font-size: 24px;
}
#version {
font-weight: 700;
float: none;
margin-left: 2em;
}
}
#filename {
display: none !important;
}
.files-menu .files {
border-bottom: none !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
}
}