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

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

La couleur de survol du menu était flashy. Corrigeons donc.
On met un lien vers le contact dans le menu.

File size: 3.3 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                }
97        }
98
99        @include breakpoint(small) {
100                .inner {
101                        max-height: 100%;
102                        overflow-y: auto;
103                        overflow-x: hidden;
104
105                        .close {
106                                background-size: 1.5em 1.5em;
107                        }
108                }
109        }
110}
111
112body.is-menu-visible {
113        #page-wrapper {
114                // tue les perfs des navigateurs ...
115                /*@include vendor('filter', 'blur(1.5px)');*/
116        }
117
118        #menu {
119                @include vendor('pointer-events', 'auto');
120                opacity:    1;
121                visibility: visible;
122
123                .inner {
124                        @include vendor('transform', 'translateY(0)');
125                        opacity: 1;
126                }
127        }
128}
Note: See TracBrowser for help on using the repository browser.