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

Last change on this file since 75304 was 75304, checked in by arnaud.berard@…, 7 years ago
  • précisions sur les less et css dans les commentaires du modèle
  • ajout de la taille_logo et gestion de icones dans les menus listant les sites
  • Correction sur les couleurs de lien, les sous-menus ne décale plus les menu de niveau 1 au survol, ...
  • css minifié
  • Property svn:eol-style set to native
File size: 7.0 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@1linkColor : #FFFFFF ;   // Couleur ldes liens de menu niv1
18@menuContainerHeight : 48px ;
19@mobileColapser_background : "none no-repeat #353535";
20
21
22
23// MARK : MIXINS
24// Drop shadows
25.box-shadow(@shadow) {
26  -webkit-box-shadow: @shadow;
27     -moz-box-shadow: @shadow;
28          box-shadow: @shadow;
29}
30
31
32// MARK : THEME
33
34
35.spip_theme {
36    background: @spipMauve2; /* Old browsers */
37    .box-shadow(0px 3px 5px #aaa);
38}
39
40.menu_container.spip-theme {
41    .spip_theme;
42    > ul > li a {
43        color   :  @1linkColor;
44        font-family: @spipFont;
45        font-size: 16px;
46    }
47    > ul > li:hover > a {
48        background-color: @spipMauve ;   
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: absolute;
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 15px 5px 15px;
161    // MARK : SubMenu Styles
162    ul.menu_submenu {
163        list-style: none outside none;
164        padding: 0px;
165        margin: 0px 0px 10px;
166        li {
167            display: block;
168            > a {
169            display: block;
170            padding: 4px 0px;
171            text-decoration: none;
172            color: rgb(102, 102, 102);
173            //margin: 2px 0px;
174            font-family: @spipSansFont;
175                &:hover {
176                color: rgb(17, 17, 17);
177                background: none;
178                }
179                > img {
180                float:left;
181                margin-right:5px;
182                }
183            }
184        }
185    }
186}
187   
188   
189// MARK : Mobile Collapser
190.mobile_collapser {
191    display: none ; 
192    > label {
193        display: block;
194        height: 22px;
195        padding: 12px 25px;
196        color: rgb(255, 255, 255);
197        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
198        font-size: 16px;
199        line-height: 22px;
200        font-family: @spipSansFont;
201        text-align: left;
202        box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.2) inset;
203    }
204    .mobile_menu_icon {
205        display: block;
206        float: left;
207        width: 22px;
208        height: 22px;
209        background: url('../images/mobile-menu-icon.png') no-repeat scroll 50% 50% transparent;
210        margin-right: 10px;
211    }
212}
213
214#hidden_menu_collapser {
215    display: none ;
216    &:checked + ul {
217    height: auto;
218    min-height: 40px;
219    max-height: 2999px;
220    }
221}
222
223// MARK : MEDIA QUERIES
224// -----------------------------------------------------
225
226@media only screen and (max-width: 940px) and (min-width: 640px) { 
227        .menu_container > ul > li > a {
228            padding: 12px 15px;
229            font-size: 14px;
230        }
231
232        .menu_container > ul > li:hover > a {
233            padding-left: 16px
234        }
235}
236
237@media only screen and (max-width: 940px) { 
238    .mobile_collapser {
239        background: @mobileColapser_background;
240        display: block;
241        height: 46px;
242    }
243       
244    .menu_container {
245        padding: 0px;
246        height: auto;
247        //position:relative;
248        > ul {
249            position: relative;
250            transition: all 100ms linear 0s;
251            height: 0px;
252            background: inherit;
253            overflow: hidden;
254                > li {
255                    position: relative;
256                    float: none;
257                    background: inherit;
258                    &:hover { margin-left: 0px }
259                    > a {
260                        box-shadow: none;
261                        border-right: 0px none;
262                    }
263                    > .menu_dropdown_block {
264                        visibility: visible;
265                        position: relative;
266                        transition: all 100ms linear 0s;
267                        height: 0px;
268                        width: 100%;
269                    }
270                    &:hover > .menu_dropdown_block {
271                        height: auto;
272                        min-height: 40px;
273                        max-height: 3000px;
274                    }
275                    .right { float: none }
276                }
277        }
278    }
279    .menu_container > ul > li > .menu_dropdown_block [class^="span"],
280    .menu_container > ul > li > .menu_dropdown_block [class*=" span"] {
281        float: none;
282        width: auto ! important;
283    }
284
285}
Note: See TracBrowser for help on using the repository browser.