1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
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;
}
}
}
|
