source: spip-zone/_plugins_/boussole/trunk/css/boussole_topnav.less @ 75301

Last change on this file since 75301 was 75301, checked in by eric@…, 7 years ago

On renomme nav en topnav puisque c'est bien le but de ce modèle.
Correction du traitement de l'argument titre_boussole et des commentaires.
Ajout du modèle topnav dans la page de démo.
Prise en charge du slogan pour les groupes ce qui permettra de ne pas perdre les traductions exitantes pour la boussole SPIP et puis c'est pas plus mal.

  • Property svn:eol-style set to native
File size: 6.7 KB
Line 
1/*
2
3Selecteur conditionels pour EI
4http://romy.tetue.net/selecteurs-conditionnels-pour-ie
5
6*/
7
8
9// #MARK: SPIP colors
10
11
12@spipMauve : #660E5C ;
13@spipMauve2 : #A887B8;
14@spipFont : "Georgia,Cambria,Times New Roman,Times,serif";
15@spipSansFont : "Georgia,Cambria,Times New Roman,Times,serif";
16
17@menuContainerHeight : 48px ;
18@mobileColapser_background : "none no-repeat #353535";
19
20
21
22//MARK : MIXINS
23// Drop shadows
24.box-shadow(@shadow) {
25  -webkit-box-shadow: @shadow;
26     -moz-box-shadow: @shadow;
27          box-shadow: @shadow;
28}
29
30
31// MARK : THEME
32
33
34.spip_theme {
35    background: @spipMauve2; /* Old browsers */
36    .box-shadow(0px 3px 5px #aaa);
37}
38
39.menu_container.spip-theme {
40    .spip_theme;
41    > ul > li a {
42        color:@white;
43        font-family: @spipFont;
44        font-size: 16px;
45    }
46    > ul > li:hover > a {
47        background-color: @spipMauve ;
48       
49    }
50    ul.menu_submenu_block li a:hover {
51        background: none repeat scroll 0% 0% @spipMauve2;
52    }
53}
54   
55
56// MARK : STYLES
57// -----------------------------------------------------   
58// ------------------------------------------------
59
60
61.menu_container {
62    margin-bottom: 0;
63    height: @menuContainerHeight ;
64    clear: both;
65    float: left;
66    position: absolute;
67    top: 0;
68}
69
70.menu_container.full_width {
71    width: 100%
72}
73
74.menu_container > ul {
75    list-style: none outside none;
76    margin: 0px;
77    padding: 0px;
78    float: left;
79    position: relative;
80    width: 100%;
81    height: inherit;
82    > li {
83        display: block;
84        float: left;
85        padding: 0px;
86        margin: 0px;
87        text-align: left;
88    }
89    > li > a {
90        padding: 12px 15px;
91        display: block;
92        color: rgb(255, 255, 255);
93        text-decoration: none;
94        box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
95        border-right: 1px solid rgba(255, 255, 255, 0.25);
96        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
97        transition: background-color 200ms linear 0s;
98        font-size: 13px;
99        font-family: @spipFont ;
100    }
101    > li.right {
102        float: right
103    }
104    > li.last > a {
105        box-shadow: none;
106        border-right: 0px none;
107    }
108    > li:hover {
109        margin-left: -1px;
110        > a {
111            box-shadow: 2px 0px 10px -5px rgba(0, 0, 0, 0.6) inset, -2px 0px 10px -5px rgba(0, 0, 0, 0.6) inset;
112        }
113        > a.icn_home {
114            box-shadow: none;
115            padding-left: 0;
116            border-right : 1px solid #383838;
117        }
118    }
119    // Sous Menus
120    > li > .menu_dropdown_block {
121        visibility: hidden;
122        display:none;
123        position: relative;
124        border-right: 1px solid rgb(221, 221, 221);
125        border-width: 0px 1px 1px;
126        border-style: none solid solid;
127        border-color: -moz-use-text-color rgb(221, 221, 221) rgb(221, 221, 221);
128        -moz-border-top-colors: none;
129        -moz-border-right-colors: none;
130        -moz-border-bottom-colors: none;
131        -moz-border-left-colors: none;
132        border-image: none;
133        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
134        background: none repeat scroll 0% 0% rgb(255, 255, 255);
135        top: 100%;
136        color: rgb(87, 87, 87);
137        opacity: 0;
138        text-align: left;
139        transition: opacity 100ms linear 0s;
140        -moz-box-sizing: border-box;
141        overflow: hidden;
142        z-index: 30;
143    }
144    > li:hover > .menu_dropdown_block {
145        visibility: visible;
146        display: block;
147        opacity: 1;
148        margin-left: -1px;
149    }
150}
151
152
153.menu_container > ul > li > .menu_dropdown_block.full_width {
154    left: 0px;
155    //width: 100%;
156    margin-left: 0px;   
157}
158
159.menu_container > ul > li > .menu_dropdown_block .ssmenu_container {
160    padding: 15px 20px;
161}
162   
163 
164// MARK : SubMenu Styles
165
166ul.menu_submenu {
167    list-style: none outside none;
168    padding: 0px;
169    margin: 0px 0px 10px;
170    li {
171        display: block;
172        > a {
173        display: block;
174        padding: 4px 0px;
175        text-decoration: none;
176        color: rgb(102, 102, 102);
177        margin: 2px 0px;
178        font-family: @spipSansFont;
179        &:hover {
180            color: rgb(17, 17, 17);
181            background: none;
182            }
183        }
184    }
185}
186
187 
188       
189// MARK : Mobile Collapser
190
191.mobile_collapser {
192    display: none ; 
193    > label {
194        display: block;
195        height: 22px;
196        padding: 12px 25px;
197        color: rgb(255, 255, 255);
198        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
199        font-size: 16px;
200        line-height: 22px;
201        font-family: @spipSansFont;
202        text-align: left;
203        box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.2) inset;
204    }
205    .mobile_menu_icon {
206        display: block;
207        float: left;
208        width: 22px;
209        height: 22px;
210        background: url('../images/mobile-menu-icon.png') no-repeat scroll 50% 50% transparent;
211        margin-right: 10px;
212    }
213}
214
215#hidden_menu_collapser {
216    display: none ;
217    &:checked + ul {
218    height: auto;
219    min-height: 40px;
220    max-height: 2999px;
221    }
222}
223
224// MARK : MEDIA QUERIES
225// -----------------------------------------------------
226
227@media only screen and (max-width: 940px) and (min-width: 640px) { 
228        .menu_container > ul > li > a {
229            padding: 12px 15px;
230            font-size: 14px;
231        }
232
233        .menu_container > ul > li:hover > a {
234            padding-left: 16px
235        }
236}
237
238@media only screen and (max-width: 980px) { 
239    .mobile_collapser {
240        background: @mobileColapser_background;
241        display: block;
242        height: 46px;
243    }
244       
245    .menu_container {
246        padding: 0px;
247        height: auto;
248        //position:relative;
249        > ul {
250            position: relative;
251            transition: all 100ms linear 0s;
252            height: 0px;
253            background: inherit;
254            overflow: hidden;
255                > li {
256                    position: relative;
257                    float: none;
258                    background: inherit;
259                    &:hover { margin-left: 0px }
260                    > a {
261                        box-shadow: none;
262                        border-right: 0px none;
263                    }
264                    > .menu_dropdown_block {
265                        visibility: visible;
266                        position: relative;
267                        transition: all 100ms linear 0s;
268                        height: 0px;
269                        width: 100%;
270                    }
271                    &:hover > .menu_dropdown_block {
272                        height: auto;
273                        min-height: 40px;
274                        max-height: 3000px;
275                    }
276                    .right { float: none }
277                }
278        }
279    }
280    .menu_container > ul > li > .menu_dropdown_block [class^="span"],
281    .menu_container > ul > li > .menu_dropdown_block [class*=" span"] {
282        float: none;
283        width: auto ! important;
284    }
285
286}
Note: See TracBrowser for help on using the repository browser.