diff --git a/core/client/assets/sass/components/floatingheader.scss b/core/client/assets/sass/components/floatingheader.scss new file mode 100644 index 0000000000..9c236dad10 --- /dev/null +++ b/core/client/assets/sass/components/floatingheader.scss @@ -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 \ No newline at end of file diff --git a/core/client/assets/sass/screen.scss b/core/client/assets/sass/screen.scss index 4d55a80042..b3b73f9861 100644 --- a/core/client/assets/sass/screen.scss +++ b/core/client/assets/sass/screen.scss @@ -31,6 +31,7 @@ @import "components/navigation"; @import "components/dropdowns"; +@import "components/floatingheader"; // TODO: Remove //