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

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

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