188 lines
2.9 KiB
SCSS
188 lines
2.9 KiB
SCSS
@import "vars";
|
|
@import "mixins";
|
|
|
|
#header {
|
|
top: 0;
|
|
position: fixed;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
padding: $gutter-b;
|
|
pointer-events: none;
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
|
|
.home {
|
|
margin-top: -20px;
|
|
margin-left: -20px;
|
|
.icon {
|
|
color: $dark;
|
|
}
|
|
}
|
|
.header-left,
|
|
.header-right {
|
|
pointer-events: auto;
|
|
position: relative;
|
|
z-index: 10;
|
|
> * {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
|
|
.header-center {
|
|
width: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
> * {
|
|
pointer-events: auto;
|
|
|
|
font-size: 20px;
|
|
line-height: 44px;
|
|
color: $darker;
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
|
|
.header-left > * { margin-right: 10px; }
|
|
.header-right > * { margin-left: 5px; }
|
|
|
|
.title {
|
|
width: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
font-size: $font-size*0.75;
|
|
font-weight: bold;
|
|
color: $medium;
|
|
display: inline-block;
|
|
margin-top: -14px;
|
|
pointer-events: all;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.author {
|
|
float: left;
|
|
.btn {
|
|
margin-right: 10px;
|
|
}
|
|
.author-date {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
position: absolute;
|
|
top: 0;
|
|
@include transition( all 0.25s ease-in-out);
|
|
@include backface-visibility(hidden);
|
|
z-index: 3000;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
|
|
.actions {
|
|
margin: 0;
|
|
}
|
|
|
|
@include scale(0,0);
|
|
|
|
&.left { left: 0;}
|
|
&.right { right: 0;}
|
|
|
|
&.in {
|
|
@include scale(1,1);
|
|
opacity: 1;
|
|
* {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
#global-actions {
|
|
margin: 10px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
left: 54px;
|
|
top: 0;
|
|
.btn {
|
|
padding: 0 8px;
|
|
&:first-child {padding-left: 20px; }
|
|
&:last-child {padding-right: 20px; }
|
|
}
|
|
}
|
|
|
|
#search-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
.icon {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 0;
|
|
}
|
|
#search-input {
|
|
text-align: left;
|
|
@include transition( width 0.25s ease-in-out, background-color 0.25s ease-in-out);
|
|
width: 100px;
|
|
&:focus {
|
|
width: 250px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#home-actions {
|
|
width: 100%;
|
|
img {
|
|
margin: auto;
|
|
display: block;
|
|
opacity: 0.1;
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
|
|
#no-profile-actions,
|
|
#profile-actions {
|
|
right: 0;
|
|
}
|
|
|
|
#user-actions {
|
|
#profile-toggle {
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
}
|
|
|
|
#space-actions {
|
|
right: 0;
|
|
.btn {
|
|
text-transform: uppercase;
|
|
}
|
|
#space-version {
|
|
position: absolute;
|
|
right: 50px;
|
|
}
|
|
#space-pub-save {
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
height: 44px;
|
|
.btn {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
@include perspective-origin(center right);
|
|
}
|
|
}
|
|
} |