[2640] | 1 | /* *** MODULE sidebar off-canvas *** */ |
---|
| 2 | // En version mobile, si js est actif un bouton |
---|
| 3 | // est créé. Il permet de faire glisser le sidebar |
---|
| 4 | // depuis la droite de l'écran en repoussant le |
---|
| 5 | // main à gauche. |
---|
| 6 | |
---|
| 7 | // Par défaut le bouton n'est pas affiché ; il ne |
---|
| 8 | // le sera que sur les petits écrans. |
---|
| 9 | #offcanvas-on { |
---|
| 10 | display: none; |
---|
| 11 | } |
---|
| 12 | // Sexy glissando |
---|
[2670] | 13 | .sidebar, #main { |
---|
[2640] | 14 | @include transition(.3s all linear); |
---|
| 15 | } |
---|
[2645] | 16 | // Dégager la place de l'icône d'ouverture |
---|
| 17 | .js #content-info h2, |
---|
| 18 | .js .content-info__feed { |
---|
| 19 | margin-right: 3.5em; |
---|
| 20 | } |
---|
[2640] | 21 | |
---|
| 22 | @media screen and(max-width: $xlarge-screen) { |
---|
| 23 | // les boutons |
---|
| 24 | #offcanvas-on, |
---|
| 25 | #offcanvas-off { |
---|
| 26 | position: absolute; |
---|
| 27 | top: .5em; |
---|
| 28 | right: .5em; |
---|
| 29 | height: 2.5em; |
---|
| 30 | width: 2.5em; |
---|
| 31 | background-repeat: no-repeat; |
---|
| 32 | background-position: 50% 50%; |
---|
| 33 | border: none; |
---|
| 34 | padding: 0; |
---|
| 35 | } |
---|
| 36 | #offcanvas-on:hover, |
---|
| 37 | #offcanvas-on:focus, |
---|
| 38 | #offcanvas-off:hover, |
---|
| 39 | #offcanvas-off:focus { |
---|
| 40 | background-color: $gray-very-dark; |
---|
| 41 | } |
---|
| 42 | //ouverture |
---|
| 43 | #offcanvas-on { |
---|
| 44 | display: block; |
---|
| 45 | background-color: $white; |
---|
[2949] | 46 | background-image: inline-image('icon_open-sidebar.png'); |
---|
| 47 | background-image: inline-image('icon_open-sidebar.svg'), none; |
---|
[2640] | 48 | border: .1em solid $gray-dark; |
---|
| 49 | border-radius: .25em; |
---|
| 50 | } |
---|
| 51 | // fermeture |
---|
| 52 | #offcanvas-off { |
---|
| 53 | background-color: $gray-very-dark; |
---|
[2949] | 54 | background-image: inline-image('icon_close.png'); |
---|
| 55 | background-image: inline-image('icon_close.svg'), none; |
---|
[2640] | 56 | border: 1px solid $white; |
---|
| 57 | } |
---|
| 58 | // le layout de positionnement du sidebar |
---|
| 59 | #wrapper { |
---|
| 60 | position: relative; |
---|
| 61 | } |
---|
[2673] | 62 | .off-canvas #main, .footer.off-canvas { |
---|
[2640] | 63 | float: left; |
---|
| 64 | margin-left: -1*(zen-grid-item-width(8)); |
---|
| 65 | } |
---|
[2670] | 66 | .off-canvas .sidebar { |
---|
[2640] | 67 | position: relative; |
---|
| 68 | @include zen-grid-item (11, 1, right); |
---|
| 69 | } |
---|
| 70 | } |
---|