diff options
Diffstat (limited to 'src/scss/layouts/_header.scss')
| -rwxr-xr-x | src/scss/layouts/_header.scss | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/src/scss/layouts/_header.scss b/src/scss/layouts/_header.scss new file mode 100755 index 0000000..dc71569 --- /dev/null +++ b/src/scss/layouts/_header.scss @@ -0,0 +1,112 @@ +#header { + display: block; + width: 100%; + height: map-get($header, height); + background: map-get($header, background); + position: fixed; + top: 0; + border: map-get($header, border); + color: map-get($header, color); + // used to animate the header on small screen with javascript + //@include prefix(transition, top 0.25s ease-in-out, 'webkit' 'moz' 'ms' 'o'); + z-index: map-get($z-indexes, l-header); + // Sidebar animation + // Transition style (push) + transition: transform .25s ease-in-out; + -webkit-transition: -webkit-transform .25s ease-in-out; + // Eliminate any flickering of elements while they are in a state of being animated + -webkit-backface-visibility: hidden; + -webkit-perspective: 1000; + + #btn-open-sidebar { + position: absolute; + // vertical center + top: 20px; + left: 20px; + cursor: pointer; + } + .header-right-picture { + position: absolute; + // vertical center + top: 12.5px; + right: 20px; + display: block; + width: 30px; + height: 30px; + color: map-get($header, color); + + .header-picture { + display: block; + width: 30px; + height: 30px; + border-radius: 15px; + } + } + .header-right-icon { + position: absolute; + // vertical center + top: 12.5px; + right: 20px; + color: map-get($header, color); + } + .header-title { + text-align: center; + font-size: $font-size-base; + line-height: 55px; + margin: 0; + + .header-title-link { + color: map-get($header, color); + font-weight: normal; + + &:hover, + &:active { + color: darken(map-get($header, color), 10); + text-decoration: none; + } + } + } + // Class used to swipe to the top the header on small screen when the user scroll down + &.header-up { + @include prefix(transform, translate3d(0, -#{map-get($header, height)}, 0), 'webkit' 'moz'); + } + + // Push the header from the size of the large sidebar + &[data-behavior="1"], + &[data-behavior="2"], + &[data-behavior="4"], + &[data-behavior="5"] { + @include header-pushed-lg; + } + + // Push the header from the size of the medium sidebar + &[data-behavior="3"], + &[data-behavior="6"] { + @include header-pushed-md; + } +} + +@media #{$medium-and-up} { + #header { + // Hide header + &[data-behavior="1"], + &[data-behavior="2"], + &[data-behavior="3"] { + display: none; + } + } +} + +// Push the header from the size of the extra large sidebar +@media #{$xlarge-and-up} { + #header { + &[data-behavior="1"], + &[data-behavior="4"] { + @include header-pushed-xlg; + } + &[data-behavior="2"], + &[data-behavior="5"] { + @include header-pushed-lg; + } + } +}
\ No newline at end of file |