source: spip-zone/_plugins_/menu_anime/trunk/css/menu_anime.less @ 94961

Last change on this file since 94961 was 94961, checked in by louis.possoz@…, 5 years ago

suppression appel jquery externe + divers details

File size: 17.9 KB
Line 
1/* Menu anime (v 1.0.9)
2   ==========
3        Procédure de modification de la feuille de style 'menu_anime.css'
4        1. Modifier les paramètres souhaités dans le présent fichier (menu_anime.less).
5        2. Compiler le fichier au moyen d'un compilateur 'less' (p.e. http://leafo.net/lessphp/editor.html).
6        3. Mettre le résultat dans un fichier nommé 'menu_anime.css' et le placer dans le répertoire 'squelettes/css/' de SPIP.
7*/     
8
9/* COULEURS */
10/* Valeurs importantes */
11@theme-basic: #5f5f5f; /* couleur moyenne de la barre de menu, correspond ici à rgb(95, 95, 95) */
12@theme-hover: #8a8a8a; /* couleur moyenne des boites de sous-menus, correspond ici à rgb(138, 138, 138) */
13/* Il est préférable que la 'couleur la plus grande' multipliée par le 'facteur le plus grand' reste inférieure à 256 */
14/* Ici on a bien : 138 * 1,2 = 165,6 < 256 */
15@text-basic: #ddd; /* couleur du texte */
16@text-hover: #fff; /* couleur du texte survole */
17
18/* Valeurs auxiliaires */
19@grad1-factor1: 1.20; /* gradient de couleur de la barre de menu */
20@grad1-factor2: 1.03;
21@grad1-factor3: 0.76;
22@grad1-factor4: 1.01; /* normalement, c'est mieux d'avoir: factor1 + factor2 + factor3 + factor4 = 4 */ 
23@grad2-factor1: 1.20; /* gradient de couleur des boites de sous-menus et de la barre de menu pour mobiles */
24@vborder-light-factor: 1.4;
25@vborder-dark-factor: 0.6;
26@hborder-light-factor: 1.3;
27@hborder-dark-factor: 0.7;
28
29@divider-v-factor1: 0.7; /* ligne de séparation barre de menu */
30@divider-h-factor1: 0.5; /* ligne de séparation boites de menu */
31@shadow-color: #bbb; /* couleur de l'ombrage des menus et boites de sous-menu */
32
33/* POLICE DE CARACTERES */
34@font-size: 12px;
35@font-family: Arial, Helvetica, sans-serif;
36
37/* DIMENSIONS */
38/* Valeurs importantes */
39@menu-width: 100%;
40@line-height: @font-size + 8;
41@box-width: 150px;
42
43/* Valeurs auxiliaires */
44@text-indent: 8px;
45@padding-x1: 20px;
46@padding-y1: 3px;
47@padding-x2: 7px;
48@padding-y2: 2px;
49
50/* Menu pour mobiles */
51@small-menu-font-size: 12px;
52@small-menu-bar-height: 30px;
53@small-menu-line-height: @small-menu-font-size + 4;
54@small-menu-padding-y1: 5px;
55@small-menu-padding-left: 20px;
56
57/* Selecteurs */
58@menu-selector: ~".menu_anime";
59@container-selector: ~".menu-conteneur";
60
61/* Valeurs dérivées */
62@top: @line-height + 2*@padding-y1 + 1;
63@grad2-factor2: 2 - @grad2-factor1;
64@divider-v-factor2: 2 - @divider-v-factor1;
65@divider-h-factor2: 2 - @divider-h-factor1;
66
67.font(@size: @font-size) {
68        font-family: @font-family;
69        font-size: @size;
70        font-weight: bold;
71}
72
73.gradient1(@gradtheme: @theme-basic) {
74        @color1: @gradtheme * @grad1-factor1;
75        @color2: @gradtheme * @grad1-factor2;
76        @color3: @gradtheme * @grad1-factor3;
77        @color4: @gradtheme * @grad1-factor4;
78        @list: top, @color1 0%, @color2 50%, @color3 51%, @color4 100%;
79        background: @gradtheme !important; 
80        background: -o-linear-gradient(@list) !important; 
81        background: -ms-linear-gradient(@list) !important; 
82        background: -moz-linear-gradient(@list) !important; 
83        background: -webkit-linear-gradient(@list) !important; 
84        background: linear-gradient(@list) !important;
85}
86
87.gradient2(@gradtheme: @theme-basic) {
88        @color1: @gradtheme * @grad2-factor1;
89        @color2: @gradtheme * @grad2-factor2;
90        @list: @color1, @color2;
91        background-color: @gradtheme !important;
92        background: -moz-linear-gradient(@list) !important; 
93        background: -webkit-linear-gradient(@list) !important; 
94        background: -o-linear-gradient(@list) !important;
95        background: -ms-linear-gradient(@list) !important;
96        background: linear-gradient(@list) !important;
97}
98
99.box-shadow-none() {
100        -moz-box-shadow: none;
101        -webkit-box-shadow: none;
102        box-shadow: none;
103}
104
105.box-shadow(@color: @shadow-color; @box-width: 2px) {
106        -moz-box-shadow: @box-width @box-width @box-width-1 @color;
107        -webkit-box-shadow: @box-width @box-width @box-width-1 @color;
108        box-shadow: @box-width @box-width @box-width-1 @color;
109}
110
111.box-shadow(@list1; @list2) {
112        -moz-box-shadow: @list1, @list2;
113        -webkit-box-shadow: @list1, @list2;
114        box-shadow: @list1, @list2;
115}
116
117.box-sizing(@type) {
118        -moz-box-sizing: @type;
119        -webkit-box-sizing: @type;
120        box-sizing: @type;
121}
122
123.vdivider(@color: @theme-basic) {
124        border-style: solid;
125        border-width: 0 1px 0 1px;
126        border-color: transparent @color * @vborder-dark-factor transparent @color * @vborder-light-factor;
127}       
128
129.hdivider(@color: @theme-basic) {
130        border-style: solid;
131        border-width: 1px 0 1px 0;
132        border-color: @color * @hborder-light-factor transparent @color * @hborder-dark-factor transparent;
133}       
134
135.border-radius-left(@radius: 3px) {
136        -moz-border-top-left-radius: @radius;
137        -webkit-border-top-left-radius: @radius;
138        border-top-left-radius: @radius;
139        -moz-border-bottom-left-radius: @radius;
140        -webkit-border-bottom-left-radius: @radius;
141        border-bottom-left-radius: @radius;
142}
143
144.border-radius-top(@radius: 3px) {
145        -moz-border-top-left-radius: @radius;
146        -webkit-border-top-left-radius: @radius;
147        border-top-left-radius: @radius;
148        -moz-border-top-right-radius: @radius;
149        -webkit-border-top-right-radius: @radius;
150        border-top-right-radius: @radius;
151}
152
153.border-radius-bottom(@radius: 3px) {
154        -moz-border-bottom-left-radius: @radius;
155        -webkit-border-bottom-left-radius: @radius;
156        border-bottom-left-radius: @radius;
157        -moz-border-bottom-right-radius: @radius;
158        -webkit-border-bottom-right-radius: @radius;
159        border-bottom-right-radius: @radius;
160}
161
162.border-radius(@radius: 3px) {
163        -moz-border-radius: @radius;
164        -webkit-border-radius: @radius;
165        border-radius: @radius;
166}
167
168.border-radius-none() {
169        -moz-border-radius: initial;
170        -webkit-border-radius: initial;
171        border-radius: initial;
172}
173
174.transition(@list) {
175        -webkit-transition: @list;
176        -moz-transition: @list;
177        -ms-transition: @list;
178        -o-transition: @list;
179        transition: all @list; 
180}
181
182.arrowup(@color: @theme-basic, @size: 6px) {
183        content: '';
184        position: absolute;
185        left: 40px;
186        top: -@size;
187        border-left: @size solid transparent;
188        border-right: @size solid transparent;
189        border-bottom: @size solid @color;
190}
191
192.arrowleft(@color: @theme-basic, @size: 6px) {
193        left: -@size + 1;
194        top: 50%;
195        margin-top: -@size;
196        border-left: 0; 
197        border-bottom: @size solid transparent;
198        border-top: @size solid transparent;
199        border-right: @size solid @color;
200}
201
202/* Menu principal */
203
204        @{menu-selector} {
205                width: @menu-width;
206                margin: 0px auto;
207                .gradient1(@theme-basic);
208                .border-radius(6px);
209                .box-shadow(2px 2px @shadow-color);
210        }
211       
212        @{menu-selector}:before,
213        @{menu-selector}:after {
214                content: "";
215                display: table;
216        }
217       
218        @{menu-selector}:after {
219                clear: both;
220        }
221       
222        @{menu-selector} {
223                zoom:1;
224        }
225       
226        @{menu-selector} ul {
227                width: @box-width;
228                list-style: none;
229                margin: 0;
230                padding: 0;
231                opacity: 0;
232                visibility: hidden;
233                position: absolute;
234                top: @top;
235                left: 0;
236                z-index: 1;
237                .gradient2(@theme-basic);   
238                .box-shadow(2px 2px @shadow-color);
239                .transition(all .2s ease-in-out);
240                .border-radius(3px);
241        }
242
243        @{menu-selector} ul ul {
244                top: 0;
245                left: @box-width + 1;
246        }
247       
248        @{menu-selector} li {
249                float: none;
250                display: block;
251                position: relative;
252                line-height: @line-height;
253                text-transform: none;
254                background: none;
255        }
256       
257        @{menu-selector} li:hover > a {
258                        color: @text-hover;
259        }
260
261        @{menu-selector} a {
262                .font(@font-size);
263                text-decoration: none;
264                color: @text-basic;
265                white-space: normal;
266                text-shadow: 0 1px 0 #000000;
267                background: none !important;
268        }
269       
270        @{menu-selector} > li:last-child {
271                border-right: 1px solid @theme-basic * @vborder-light-factor;
272        }
273
274        @{menu-selector} > li > a {
275                float: left;
276                padding: @padding-y1 @padding-x1;
277                text-transform: uppercase;
278                .vdivider(@theme-basic);
279        }
280       
281        @{menu-selector} ul a {
282                padding: @padding-y2 1px @padding-y2 @padding-x2 + @text-indent;
283                .box-sizing(content-box);
284                text-indent: -@text-indent;
285                display: block;
286                .hdivider(@theme-basic);       
287        }
288       
289        @{menu-selector} a:hover {
290                color: @text-hover;
291        }
292
293        @{menu-selector} > li > a:hover {
294                .gradient1(@theme-hover);
295                .vdivider(@theme-hover);
296        }
297
298        @{menu-selector} > li {
299                float: left;
300        }
301
302        @{menu-selector} ul li > a:hover {
303                .gradient2(@theme-hover);
304                .hdivider(@theme-hover);
305        }
306       
307        @{menu-selector} > li:first-child > a {
308                border-left: 0;
309        }
310       
311        @{menu-selector} > li:first-child > a:hover {
312                .border-radius-left(6px);
313        }
314
315        @{menu-selector} ul li:first-child > a {
316                border-top: 0;
317                .border-radius-top(3px);
318                &::after { .arrowup(@theme-basic * @grad2-factor1) }
319                &:hover::after { .arrowup(@theme-hover * @grad2-factor1) }
320        }
321
322        @{menu-selector} ul ul li:first-child > a {
323                &::after { .arrowleft(@theme-basic); }
324                &:hover::after { .arrowleft(@theme-hover); }
325        }
326
327        @{menu-selector} ul li:last-child > a {
328                border-bottom: 0;
329                .border-radius-bottom(3px);
330        }
331
332        @{menu-selector} a:focus, @{menu-selector} a:active, @{menu-selector} a:visited {
333                background: none !important;
334                color: @text-basic;
335        }
336       
337        @{menu-selector} li:hover > ul, @{menu-selector} li>a:focus + ul {
338                opacity: 1;
339                visibility: visible;
340                margin: 0;
341        }
342
343        /* Pas de menu pour l'impression        */
344        @media print {
345    @{menu-selector} { display: none; }
346}
347
348        /* Menu pour mobile */
349        .menu_anime-trigger {
350                display: none;
351        }
352
353        @media screen and (max-width: 600px) {
354
355                /* menu_conteneur */
356                @{container-selector} {
357                        position: relative;
358                }
359
360                @{container-selector} {
361                }
362
363                /* menu icon */
364                .menu_anime-trigger {
365                        display: block; /* show menu icon */
366                        height: @small-menu-bar-height;
367                        line-height: @small-menu-bar-height;
368                        cursor: pointer;               
369                        padding: 0 0 0 35px;
370                        color: #ffffff;
371                        font-weight: bold;
372                        background-color: @theme-basic;
373                        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -moz-linear-gradient(@theme-basic * @grad2-factor1, @theme-basic * @grad2-factor2); 
374                        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -webkit-linear-gradient(@theme-basic * @grad2-factor1, @theme-basic * @grad2-factor2);   
375                        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -o-linear-gradient(@theme-basic * @grad2-factor1, @theme-basic * @grad2-factor2);
376                        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -ms-linear-gradient(@theme-basic * @grad2-factor1, @theme-basic * @grad2-factor2);
377                        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(@theme-basic * @grad2-factor1, @theme-basic * @grad2-factor2);
378                        .border-radius(6px);
379                        .box-shadow();
380                }
381               
382                /* main nav */
383                @{menu-selector} {
384                        position: relative;
385                        top: 0;
386                        width: inherit;
387                        z-index: 1;
388                        padding: @small-menu-padding-y1 1px @small-menu-padding-y1 @small-menu-padding-left;
389                        display: none;
390                        .gradient2(@theme-basic);
391                        .box-shadow-none;
392                }       
393
394                @{menu-selector} ul, @{menu-selector} ul ul {
395                        position: static;
396                        visibility: visible;
397                        opacity: 1;
398                        padding: 0 1px 0 @small-menu-padding-left;
399                        background: none !important;
400                        .box-shadow-none;
401                }
402
403                @{menu-selector} li {
404                        position: static;
405                        display: block;
406                        float: none;
407                        line-height: @small-menu-line-height;
408                }
409
410                @{menu-selector} a {
411                        font-size: @small-menu-font-size
412                }
413               
414                @{menu-selector} > li > a {
415                        float: none;
416                        border: 0;
417                        padding: 0;
418                }
419               
420                @{menu-selector} ul a {
421                        border: 0;
422                        padding: 0;
423                        text-indent: 0;
424                }
425
426                @{menu-selector} > li > a:hover, @{menu-selector} ul li > a:hover {
427                        background: none !important;
428                        border: 0;
429                }
430
431                @{menu-selector} ul li > a, @{menu-selector} ul ul li > a,
432                @{menu-selector} ul li:first-child > a, @{menu-selector} ul li:first-child > a {
433                        border: 0;
434                        &::after, &:hover::after { border: 0; }
435                }
436                @{menu-selector} ul li:last-child > a, @{menu-selector} ul li:first-child > a,
437                @{menu-selector} ul ul li:first-child > a {
438                        .border-radius-none;
439                        &::after { border: 0; }
440                }                       
441        }
442
443        @media screen and (min-width: 600px) {
444                @{menu-selector} {
445                        display: block !important;
446                }
447        }       
448
449        /* Menu pour iPad */
450        .no-transition {
451                .transition(none);
452                opacity: 1;
453                visibility: visible;
454                display: none;                 
455        }
456
457        @{menu-selector} li:hover > .no-transition {
458                display: block;
459        }
Note: See TracBrowser for help on using the repository browser.