0001-scss-add-mode-to-get-a-bottom-navigation-bar-on-mobi.patch
| help/fr/misc-scss.page | ||
|---|---|---|
| 257 | 257 |
<td><p>Hauteur de l'éventuel bandeau image.</p></td> |
| 258 | 258 |
<td><p><var>300px</var></p></td> |
| 259 | 259 |
</tr> |
| 260 |
<tr> |
|
| 261 |
<td><p><code>$nav-mobile-mode</code></p></td> |
|
| 262 |
<td><p>Rendu de la navigation en mode mobile, <var>none</var> pour conserver |
|
| 263 |
le rendu « desktop », <var>hamburger</var> pour placer la navigation dans un |
|
| 264 |
menu « hamburger », <var>bottom-bar</var> pour placer la navigation dans une |
|
| 265 |
barre en bas d'écran.</p></td> |
|
| 266 |
<td><p><var>hamburger</var></p></td> |
|
| 267 |
</tr> |
|
| 268 |
<tr> |
|
| 269 |
<td><p><code>$nav-mobile-bottom-bar-height</code></p></td> |
|
| 270 |
<td><p>Hauteur de la barre de navigation en mode mobile.</p></td> |
|
| 271 |
<td><p><var>64px</var></p></td> |
|
| 272 |
</tr> |
|
| 260 | 273 |
</table> |
| 261 | 274 |
</section> |
| 262 | 275 | |
| static/clapotis-les-canards/_vars.scss | ||
|---|---|---|
| 14 | 14 |
$button-background: $primary-color; |
| 15 | 15 |
$title-background: $primary-color; |
| 16 | 16 |
$title-color: white; |
| 17 |
$nav-mobile-mode: bottom-bar; |
|
| static/includes/_nav.scss | ||
|---|---|---|
| 37 | 37 |
$nav-after-image: true !default; |
| 38 | 38 |
$nav-after-image-height: 300px !default; |
| 39 | 39 | |
| 40 |
$nav-mobile-bottom-bar-height: 64px; |
|
| 41 | ||
| 40 | 42 | |
| 41 | 43 |
@if $nav-full-width-background == true {
|
| 42 | 44 |
div.gru-nav-wrapper {
|
| ... | ... | |
| 325 | 327 |
} |
| 326 | 328 |
} |
| 327 | 329 | |
| 330 |
@if $nav-mobile-mode == bottom-bar {
|
|
| 331 |
@media screen and (max-width: $mobile-limit) {
|
|
| 332 |
div#header h1 {
|
|
| 333 |
padding-left: 0; |
|
| 334 |
background-position: 0; |
|
| 335 |
} |
|
| 336 |
nav {
|
|
| 337 |
background: white; // make sure it is opaque |
|
| 338 |
height: $nav-mobile-bottom-bar-height; |
|
| 339 |
position: fixed; |
|
| 340 |
bottom: 0; |
|
| 341 |
z-index: 1000; |
|
| 342 |
width: 100%; |
|
| 343 |
#nav-wrapper {
|
|
| 344 |
padding: 0; |
|
| 345 |
margin: 0; |
|
| 346 |
} |
|
| 347 |
div#nav ul {
|
|
| 348 |
margin-top: 0; |
|
| 349 |
padding-top: 0; |
|
| 350 |
display: flex; |
|
| 351 |
li {
|
|
| 352 |
flex: 1; |
|
| 353 |
position: relative; |
|
| 354 |
margin-left: 0; |
|
| 355 |
text-align: center; |
|
| 356 |
&:hover a {
|
|
| 357 |
background: $nav-item-hover-background; |
|
| 358 |
color: $nav-item-hover-color; |
|
| 359 |
} |
|
| 360 |
&.selected a {
|
|
| 361 |
background: $nav-item-selected-background; |
|
| 362 |
color: $nav-item-selected-color; |
|
| 363 |
} |
|
| 364 |
a {
|
|
| 365 |
span {
|
|
| 366 |
overflow: hidden; |
|
| 367 |
text-overflow: ellipsis; |
|
| 368 |
} |
|
| 369 |
width: 100%; |
|
| 370 |
line-height: 0.8em; |
|
| 371 |
padding: 0px 4px; |
|
| 372 |
height: $nav-mobile-bottom-bar-height; |
|
| 373 |
padding-top: $nav-mobile-bottom-bar-height / 2; |
|
| 374 |
box-sizing: border-box; |
|
| 375 |
border-bottom: 0; |
|
| 376 |
span {
|
|
| 377 |
display: block; |
|
| 378 |
height: $nav-mobile-bottom-bar-height / 2; |
|
| 379 |
font-size: 10px; |
|
| 380 |
} |
|
| 381 |
} |
|
| 382 |
&::before {
|
|
| 383 |
position: absolute; |
|
| 384 |
background-position: 50% 2px; |
|
| 385 |
width: 100%; |
|
| 386 |
} |
|
| 387 |
} |
|
| 388 |
} |
|
| 389 |
} |
|
| 390 |
body.has-picture[data-picture] nav::after {
|
|
| 391 |
content: none; |
|
| 392 |
} |
|
| 393 |
footer {
|
|
| 394 |
margin-bottom: $nav-mobile-bottom-bar-height; |
|
| 395 |
} |
|
| 396 |
} |
|
| 397 |
} |
|
| 398 | ||
| 328 | 399 |
@if $nav-after-image == true {
|
| 329 | 400 |
@supports (background-image: var(--page-picture)) {
|
| 330 | 401 |
body.has-picture nav::after {
|
| 331 |
- |
|