source: spip-zone/_squelettes_/html5up_solid_state/css/layout/_menu.scss @ 106004

Last change on this file since 106004 was 106004, checked in by marcimat@…, 3 years ago

Différentes adaptations pour le mobile.
Principalement le menu de langue est visible par défaut en grand écran, mais passe dans le menu hamburger en petit écran.

File size: 3.4 KB
Line 
1///
2/// Solid State by HTML5 UP
3/// html5up.net | @ajlkn
4/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5///
6
7/* Menu */
8
9#page-wrapper {
10        @include vendor('transition', 'filter 0.25s ease');
11}
12
13#menu {
14        @include vendor('align-items', 'center');
15        @include vendor('display', 'flex');
16        @include vendor('justify-content', 'center');
17        @include vendor('pointer-events', 'none');
18        @include vendor('transition', ('opacity #{_duration(menu)} ease', 'visibility #{_duration(menu)}'));
19        -moz-user-select:            none;
20        -webkit-user-select:         none;
21        -ms-user-select:             none;
22        user-select:                 none;
23        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
24        background:                  transparentize(_palette(bg), 0.2);
25        cursor:                      default;
26        height:                      100%;
27        left:                        0;
28        opacity:                     0;
29        position:                    fixed;
30        text-align:                  center;
31        top:                         0;
32        visibility:                  hidden;
33        width:                       100%;
34
35        .inner {
36                @include padding(2.5em, 1.5em);
37                @include vendor('transform', 'translateY(0.5em)');
38                @include vendor('transition', ('opacity #{_duration(menu)} ease', 'transform #{_duration(menu)} ease'));
39                -webkit-overflow-scrolling: touch;
40                background:                 _palette(accent);
41                border-radius:              _size(border-radius);
42                display:                    block;
43                max-width:                  100%;
44                opacity:                    0;
45                position:                   relative;
46                width:                      18em;
47        }
48
49        h2 {
50                border-bottom:  solid 2px _palette(border);
51                padding-bottom: 1em;
52        }
53
54        .close {
55                background-image:    url('images/close.svg');
56                background-position: 75% 25%;
57                background-repeat:   no-repeat;
58                background-size:     2em 2em;
59                border:              0;
60                content:             '';
61                display:             block;
62                height:              4em;
63                overflow:            hidden;
64                position:            absolute;
65                right:               0;
66                text-align:          center;
67                text-indent:         4em;
68                top:                 0;
69                width:               4em;
70        }
71
72        .links {
73                list-style:    none;
74                margin-bottom: (_size(element-margin) - 0.5em);
75                padding:       0;
76
77                li {
78                        padding: 0;
79
80                        a {
81                                border-radius: _size(border-radius);
82                                border: 0;
83                                display: block;
84                                font-family: _font(family-heading);
85                                font-size: 0.8em;
86                                font-weight: _font(weight-heading);
87                                letter-spacing: _font(kern-heading);
88                                line-height: 1.85em;
89                                padding: 0.75em 0;
90                                text-transform: uppercase;
91
92                                &:hover {
93                                        background: saturate(darken(_palette(accent), 3), 0.15);
94                                }
95                        }
96                        &.principal {
97                                display: none;
98                                flex-direction: row;
99                                justify-content: center;
100                                & .lang {
101                                        padding:1em;
102                                }
103                        }
104                }
105        }
106
107        @include breakpoint(small) {
108                .inner {
109                        max-height: 100%;
110                        overflow-y: auto;
111                        overflow-x: hidden;
112
113                        .close {
114                                background-size: 1.5em 1.5em;
115                        }
116                        .links .principal { display:flex; }
117                }
118        }
119}
120
121body.is-menu-visible {
122        #page-wrapper {
123                // tue les perfs des navigateurs ...
124                /*@include vendor('filter', 'blur(1.5px)');*/
125        }
126
127        #menu {
128                @include vendor('pointer-events', 'auto');
129                opacity:    1;
130                visibility: visible;
131
132                .inner {
133                        @include vendor('transform', 'translateY(0)');
134                        opacity: 1;
135                }
136        }
137}
Note: See TracBrowser for help on using the repository browser.