basic styling Support page
[people/shoehn/ipfire.org.git] / static / scss / _nav.scss
1 #mask {
2         width: 100vw;
3         height: 100vh;
4         position: fixed;
5         top: 0;
6         left: 0;
7         background-color: rgba(0, 0, 0, .4);
8         display: none;
9         visibility: hidden;
10         &.open {
11                 display: block;
12                 visibility: visible;
13         }
14 }
15
16 .tux {
17         position: absolute;
18         top: 12px;
19         left:50%;
20         transform: translateX(-50%);
21         h1 {
22                 font-weight: 300 !important;
23                 color: $blue-grey-900;
24                 font-size: 20px;
25                 line-height: 28px;
26                 margin-bottom: 0;
27                 strong {
28                         font-weight: 700 !important;
29                 }
30         }
31         h1:before {
32                 content: "";
33                 height: 32px;
34                 width: 25px;
35                 background-image: url('../img/ipfire-tux.png');
36                 background-repeat: no-repeat;
37                 background-position: center center;
38                 background-size: contain;
39                 display: inline-block;
40                 position: relative;
41         }
42 }
43
44 .menu-text {
45         transition: opacity .25s ease-in-out;
46 }
47
48 .menu-text.hidden {
49         opacity: 0;
50         transition: opacity .35s ease-in-out;
51 }
52
53 .fixed-top {
54         transition: background-color .25s linear;
55         height: 56px;
56         @include media-breakpoint-up(sm) {
57                 height: 72px;
58         }
59         @include media-breakpoint-up(lg) {
60                 height: 96px;
61         }
62         .navbar {
63                 width: 100%;
64                 a {
65                         color: $blue-grey-900;
66                         @include media-breakpoint-up(sm) {
67                                 margin-top: 8px;
68                         }
69                 }
70                 .navbar-toggler-left {
71                         left: -12px;
72                         top: 8px;
73                         @include media-breakpoint-up(sm) {
74                                 top: 17px;
75                         }
76                 }
77                 .btn {
78                         margin-top: .15rem;
79                 }
80         }
81 }
82
83 .navbar-brand {
84         font-size: 20px;
85         font-weight: 300;
86         opacity: 0;
87         margin: 0;
88         transition: opacity .7s linear;
89         @include media-breakpoint-up(lg) {
90                 opacity: 1;
91                 font-size: 36px;
92         }
93         strong {
94                 font-weight: 900;
95         }
96         img {
97                 margin-right: 4px;
98                 transform: translateY(-5px);
99                 height: 32px;
100                 width: auto;
101                 @include media-breakpoint-up(lg) {
102                         height: 40px;
103                 }
104         }
105 }
106
107 .scrolled {
108         background-color: rgba(255, 255, 255, .96);
109         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
110         height: 56px;
111         @include media-breakpoint-up(sm) {
112                 height: 72px;
113         }
114         @include media-breakpoint-up(lg) {
115                 height: 96px;
116         }
117         .navbar-brand {
118                 opacity: 1;
119         }
120 }
121
122 .scrolled.fadeout {
123         background-color: rgba(100, 100, 100, .5);
124         a.btn-donate {
125                 opacity: .5;
126         }
127         a.navbar-brand {
128                 opacity: .5;
129         }
130 }
131
132 #navbarSupportedContent {
133         width: 100%;
134         @include media-breakpoint-down(md) {
135                 background: white;
136                 position: fixed;
137                 top: 0;
138                 left: 0;
139                 width: 256px;
140                 height: 100vh;
141                 padding-top: 64px;
142                 transform: translateX(-256px);
143                 transition: all .15s ease-in-out;
144                 &.open {
145                         transform: translateX(0);
146                         transition: all .15s ease-in-out;
147                         box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26);
148                 }
149         }
150 }
151
152 .navbar-nav {
153         @include media-breakpoint-up(lg) {
154                 padding-top: 2px;
155
156         }
157 }
158
159 .navbar-nav .nav-link {
160         color: $blue-grey-900;
161         padding: 16px !important;
162         display: block;
163         position: relative;
164         @include media-breakpoint-up(lg) {
165                 margin-right: 16px;
166                 display: block;
167                 position: relative;
168                 &:after {
169                         content: "";
170                         border-bottom: 2px solid $red_900;
171                         position: absolute;
172                         transform: scaleX(0);
173                         width: 100%;
174                         left: 0;
175                         top: 44px;
176                         padding: inherit;
177                         transition: transform .3s ease-out, color .3s ease-out;
178                 }
179         }
180 }
181
182 .navbar-nav .nav-link:active {
183         @include media-breakpoint-down(lg) {
184                 color: $red_900
185         }
186 }
187
188 .navbar-nav .nav-link:active:before {
189         @include media-breakpoint-down(lg) {
190                 content: "";
191                 border-left: 2px solid $red_900;
192                 position: absolute;
193                 left: 0;
194                 height: 36px;
195                 transform: translateY(-4px);
196         }
197 }
198
199 .navbar-nav .nav-link:hover {
200         @include media-breakpoint-up(lg) {
201                 color: $red_900;
202         }
203 }
204
205 .navbar-nav .nav-link:hover:after {
206         @include media-breakpoint-up(lg) {
207                 transform: scaleX(1);
208         }
209 }
210
211 body.About li.nav-item a.about,
212 body.Download li.nav-item a.download,
213 body.Involved li.nav-item a.support {
214         @include media-breakpoint-up(lg) {
215                 color: $red_900;
216                 &:after {
217                         content: "";
218                         border-bottom: 2px solid $red_900;
219                         position: absolute;
220                         width: 100%;
221                         left: 0;
222                         top: 44px;
223                         padding: inherit;
224                         transform: scale(1);
225                 }
226         }
227 }
228
229 #sidebar {
230         padding: 0;
231         @include media-breakpoint-down(md) {
232                 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16),
233                                 0 1px 2px 0 rgba(0, 0, 0, 0.23);
234                 position: fixed;
235                 top: 52px;
236                 z-index: 9999;
237                 background-color: white;
238         }
239         ul {
240                 list-style: none;
241                 &.features_nav {
242                         padding: 0 0 24px 0;
243                         overflow-x: auto;
244                         &.fixed {
245                                 position: fixed;
246                                 top: 100px;
247                                 outline: 1px solid grey;
248                         }
249                 }
250                 ul {
251                         margin: 0;
252                         padding-left: 0;
253                         li:last-child {
254                                 margin-bottom: 0;
255                         }
256                 }
257                 li {
258                         padding: 0 16px;
259                         margin: 8px 0;
260                         a.nav-link {
261                                 padding: inherit;
262                                 color: $blue-grey-900;
263                                 height: 32px;
264                                 padding: 0 8px;
265                                 line-height: 2;
266                                 &.active {
267                                         color: $red_900;
268                                         border-left: 2px solid $red_900;
269                                         padding: 0 8px 0 6px;
270                                 }
271                         }
272                 }
273         }
274 }
275
276 // Feature mobile Menu
277
278 /* Fix for Android */
279 body {
280         -webkit-animation: bugfix infinite 1s; 
281 }
282 @-webkit-keyframes bugfix {
283         from { padding: 0; }
284         to { padding: 0; } 
285 }
286
287 /* default checkbox */
288 input[type=checkbox] {
289         position: absolute;
290         top: -9999px;
291         left: -9999px;
292 }
293
294 label {
295         cursor: pointer;
296         user-select: none;
297 }
298
299 nav[role="dropdown"] {
300         label { display: none; }
301 }
302
303 @media screen and (max-width: 44em) {
304         nav[role="dropdown"] {
305                 ul {
306                         height: 48px;
307                         overflow: hidden;
308                 }
309                 
310                 label {
311                         position: relative;
312                         display: block;
313                         width: 100%;
314                 }
315                 
316                 label:after {
317                         font-family: FontAwesome;
318                         font-size: 24px;
319                         content: "\f107";
320                         position: absolute;
321                         top: 0;
322                         right: 0;
323                         z-index: 9999;
324                         width: 100%;
325                         height: 56px;
326                         padding: 12px 12px 0;
327                         text-align: right;
328                 }
329                 
330                 input:checked ~ label:after {
331                         content: "\f106";
332                 }
333                 
334                 input:checked ~ ul {
335                         display: block;
336                         height: 40vh;
337                         overflow-y: scroll;
338                 }
339         }
340 }