Floating header

This commit is contained in:
John O'Nolan 2014-07-30 07:59:43 +03:00
parent db305054a5
commit 62fa89cd23
2 changed files with 99 additions and 0 deletions

View File

@ -0,0 +1,98 @@
//
// Floating Header
// --------------------------------------------------
// Semi-opaque fixed-position headers - used on content/editor
.floatingheader {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 400;
height: 40px;
padding: 6px 15px 14px;
text-transform: uppercase;
color: $brown;
//Transparent gradient to make bg fade out as it goes out the top.
@include linear-gradient(top, white 0%, white 25%, rgba(255,255,255,0.9) 100%, $fallback: transparent);
// button,
.button {
display: inline-block;
font-size: 10px;
min-height: 20px;
height: 20px;
padding: 3px 4px;
vertical-align: top;
&.button-back {
position: relative;
top: -2px;
left: 3px;
display: none;
padding: 0 6px 0 3px;
&:active {
box-shadow: none;
}
&:before {
left: -8px;
border-width: 10px 8px 10px 0;
}
@media (max-width: 800px) {
display: inline-block;
}
}
}
small {
font-size: 0.85em;
}
a,
button {
color: $brown;
&:hover {
color: $darkgrey;
}
}
} // .floatingheader
//
// Scroll Shadows
// --------------------------------------------------
.scrolling {
.floatingheader {
box-shadow:
rgba(0,0,0,0.02) 0 1px 2px,
rgba(255, 255, 255, 0.5) 0 -1px 0 inset;
&:before {
content: "";
height: 40px;
width: 80%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -40%;
box-shadow: rgba(0,0,0,0.02) 0 2px 2px;
}
&:after {
content: "";
height: 40px;
width: 30%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -15%;
box-shadow: rgba(0,0,0,0.02) 0 3px 3px;
}
} // .floatingheader
} // .scrolling

View File

@ -31,6 +31,7 @@
@import "components/navigation";
@import "components/dropdowns";
@import "components/floatingheader"; // TODO: Remove
//