source: spip-zone/_squelettes_/spipr-educ/trunk/css/spipr_dist.lessOLD @ 118102

Last change on this file since 118102 was 118102, checked in by olivier.gautier@…, 4 months ago

Une première version fonctionnelle de SPIPr éduc

File size: 15.1 KB
Line 
1@import "css/navbar.less";
2@import "css/navs.less";
3@import "css/responsive-navbar.less";
4@import "css/responsive-utilities.less";
5@import "css/dropdowns.less";
6@import "css/spip.variables.less";
7@import "css/mixins.less";
8
9/* Ici les variables issues de bootstrap2, fichier d'origine variables.less */
10//
11// Variables
12// --------------------------------------------------
13
14
15// Global values
16// --------------------------------------------------
17
18
19// Grays
20// -------------------------
21@black:                 #000;
22@grayDarker:            #222;
23@grayDark:              #333;
24@gray:                  #555;
25@grayLight:             #999;
26@grayLighter:           #eee;
27@white:                 #fff;
28
29
30// Accent colors
31// -------------------------
32@blue:                  #049cdb;
33@blueDark:              #0064cd;
34@green:                 #46a546;
35@red:                   #9d261d;
36@yellow:                #ffc40d;
37@orange:                #f89406;
38@pink:                  #c3325f;
39@purple:                #7a43b6;
40
41
42// Scaffolding
43// -------------------------
44@bodyBackground:        @white;
45@textColor:             @grayDark;
46
47
48// Links
49// -------------------------
50@linkColor:             #900;
51@linkColorHover:        darken(@linkColor, 15%);
52
53
54// Typography
55// -------------------------
56@sansFontFamily:        "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
57@serifFontFamily:       Georgia, Cambria, "Times New Roman", Times, serif;
58@monoFontFamily:        "Courier New", Courier, monospace;
59
60@baseFontSize:          14px;
61@baseFontFamily:        @serifFontFamily;
62@baseLineHeight:        20px;
63@altFontFamily:         @sansFontFamily;
64
65@headingsFontFamily:    @baseFontFamily; // empty to use BS default, @baseFontFamily
66@headingsFontWeight:    normal;    // instead of browser default, bold
67@headingsColor:         inherit; // empty to use BS default, @textColor
68
69
70// Component sizing
71// -------------------------
72// Based on 14px font-size and 20px line-height
73
74@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
75@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
76@fontSizeMini:          @baseFontSize * 0.75; // ~11px
77
78@paddingLarge:          11px 19px; // 44px
79@paddingSmall:          2px 10px;  // 26px
80@paddingMini:           0 6px;   // 22px
81
82@baseBorderRadius:      4px;
83@borderRadiusLarge:     6px;
84@borderRadiusSmall:     3px;
85
86
87// Tables
88// -------------------------
89@tableBackground:                   transparent; // overall background-color
90@tableBackgroundAccent:             #f9f9f9; // for striping
91@tableBackgroundHover:              #f5f5f5; // for hover
92@tableBorder:                       #ddd; // table and cell border
93
94// Buttons
95// -------------------------
96@btnBackground:                     @white;
97@btnBackgroundHighlight:            darken(@white, 10%);
98@btnBorder:                         #bbb;
99
100@btnPrimaryBackground:              @linkColor;
101@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
102
103@btnInfoBackground:                 #5bc0de;
104@btnInfoBackgroundHighlight:        #2f96b4;
105
106@btnSuccessBackground:              #62c462;
107@btnSuccessBackgroundHighlight:     #51a351;
108
109@btnWarningBackground:              lighten(@orange, 15%);
110@btnWarningBackgroundHighlight:     @orange;
111
112@btnDangerBackground:               #ee5f5b;
113@btnDangerBackgroundHighlight:      #bd362f;
114
115@btnInverseBackground:              #444;
116@btnInverseBackgroundHighlight:     @grayDarker;
117
118
119// Forms
120// -------------------------
121@inputBackground:               @white;
122@inputBorder:                   #ccc;
123@inputBorderRadius:             @baseBorderRadius;
124@inputDisabledBackground:       @grayLighter;
125@formActionsBackground:         #f5f5f5;
126@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
127
128
129// Dropdowns
130// -------------------------
131@dropdownBackground:            @white;
132@dropdownBorder:                rgba(0,0,0,.2);
133@dropdownDividerTop:            #e5e5e5;
134@dropdownDividerBottom:         @white;
135
136@dropdownLinkColor:             @grayDark;
137@dropdownLinkColorHover:        @white;
138@dropdownLinkColorActive:       @white;
139
140@dropdownLinkBackgroundActive:  @linkColor;
141@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
142
143
144
145// COMPONENT VARIABLES
146// --------------------------------------------------
147
148
149// Z-index master list
150// -------------------------
151// Used for a bird's eye view of components dependent on the z-axis
152// Try to avoid customizing these :)
153@zindexDropdown:          1000;
154@zindexPopover:           1010;
155@zindexTooltip:           1030;
156@zindexFixedNavbar:       1030;
157@zindexModalBackdrop:     1040;
158@zindexModal:             1050;
159
160
161// Sprite icons path
162// -------------------------
163@iconSpritePath:          "./img/sprite.png";
164@iconWhiteSpritePath:     "./img/sprite.png";
165
166
167// Input placeholder text color
168// -------------------------
169@placeholderText:         @grayLight;
170
171
172// Hr border color
173// -------------------------
174@hrBorder:                @grayLighter;
175
176
177// Horizontal forms & lists
178// -------------------------
179@horizontalComponentOffset:       180px;
180
181
182// Wells
183// -------------------------
184@wellBackground:                  #f5f5f5;
185
186
187// Navbar
188// -------------------------
189@navbarCollapseWidth:             767px;
190@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
191
192@navbarHeight:                    40px;
193@navbarBackgroundHighlight:       #ffffff;
194@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
195@navbarBorder:                    darken(@navbarBackground, 12%);
196
197@navbarText:                      #777;
198@navbarLinkColor:                 #777;
199@navbarLinkColorHover:            @grayDark;
200@navbarLinkColorActive:           @gray;
201@navbarLinkBackgroundHover:       transparent;
202@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
203
204@navbarBrandColor:                @navbarLinkColor;
205
206// Inverted navbar
207@navbarInverseBackground:                #111111;
208@navbarInverseBackgroundHighlight:       #222222;
209@navbarInverseBorder:                    #252525;
210
211@navbarInverseText:                      @grayLight;
212@navbarInverseLinkColor:                 @grayLight;
213@navbarInverseLinkColorHover:            @white;
214@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
215@navbarInverseLinkBackgroundHover:       @navbarBackground/2;
216@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;
217
218@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
219@navbarInverseSearchBackgroundFocus:     @white;
220@navbarInverseSearchBorder:              @navbarInverseBackground;
221@navbarInverseSearchPlaceholderColor:    #ccc;
222
223@navbarInverseBrandColor:                @navbarInverseLinkColor;
224
225
226// Pagination
227// -------------------------
228@paginationBackground:                #fff;
229@paginationBorder:                    #ddd;
230@paginationActiveBackground:          #f5f5f5;
231
232
233// Hero unit
234// -------------------------
235@heroUnitBackground:              @grayLighter;
236@heroUnitHeadingColor:            inherit;
237@heroUnitLeadColor:               inherit;
238
239
240// Form states and alerts
241// -------------------------
242@warningText:             #c09853;
243@warningBackground:       #fcf8e3;
244@warningBorder:           darken(spin(@warningBackground, -10), 3%);
245
246@errorText:               #b94a48;
247@errorBackground:         #f2dede;
248@errorBorder:             darken(spin(@errorBackground, -10), 3%);
249
250@successText:             #468847;
251@successBackground:       #dff0d8;
252@successBorder:           darken(spin(@successBackground, -10), 5%);
253
254@infoText:                #3a87ad;
255@infoBackground:          #d9edf7;
256@infoBorder:              darken(spin(@infoBackground, -10), 7%);
257
258
259// Tooltips and popovers
260// -------------------------
261@tooltipColor:            #fff;
262@tooltipBackground:       #000;
263@tooltipArrowWidth:       5px;
264@tooltipArrowColor:       @tooltipBackground;
265
266@popoverBackground:       #fff;
267@popoverArrowWidth:       10px;
268@popoverArrowColor:       #fff;
269@popoverTitleBackground:  darken(@popoverBackground, 3%);
270
271// Special enhancement for popovers
272@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
273@popoverArrowOuterColor:  rgba(0,0,0,.25);
274
275
276
277// GRID
278// --------------------------------------------------
279
280
281// Default 940px grid
282// -------------------------
283@gridColumns:             12;
284@gridColumnWidth:         60px;
285@gridGutterWidth:         20px;
286@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
287
288// 1200px min
289@gridColumnWidth1200:     70px;
290@gridGutterWidth1200:     30px;
291@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
292
293// 768px-979px
294@gridColumnWidth768:      42px;
295@gridGutterWidth768:      20px;
296@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
297
298
299// Fluid grid
300// -------------------------
301@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
302@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);
303
304// 1200px min
305@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
306@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);
307
308// 768px-979px
309@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
310@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);
311
312
313
314
315/* Quelques éléments spécifiques à SPIPr */
316
317.header {position: relative;}
318.header .accueil a {color: inherit;}
319.header .spip_logos {float:left;margin: @paddingLarge;margin-left: 0;margin-top:0;}
320.header .accueil {}
321#logo_site_spip {line-height: 1em;}
322#slogan_site_spip {display: block;}
323
324.header .formulaire_menu_lang {width: 100%;}
325.header .formulaire_menu_lang select {width: 100%;}
326
327.hero-unit .postmeta {clear: both;}
328
329.formulaire_recherche,.secondary .formulaire_recherche {padding-right: 42px+2*14px;} /* provisionner la largeur du bouton+padding sur le input.search */
330.formulaire_recherche form .input-append {width:100%;}
331.formulaire_recherche form input.search {width:100%;}
332
333.footer {
334  .clearfix;
335  margin-top:4em;
336  padding-top: 2em;
337  border-top:2px solid;
338  padding-bottom: 2em;
339  margin-bottom:0;
340  text-align: left;
341  position:relative;
342  .colophon {padding-right: 100px}
343  .generator {position: absolute;top:2em;right:0;max-width: 100px;}
344}
345
346.cartouche {margin-bottom: @emLineHeight;}
347.content.primary {min-height: 320px;}
348.content {
349  .postmeta .tags .inline {display: inline;}
350}
351
352.page_sommaire .breadcrumb {display: none}
353#nav > .navbar-inner {padding-left: 0;padding-right: 0}
354
355/* Pour NavBar, en provenance de SPIPr-educ */
356/* surcharge des règles issue de bootstrap + on surcharge les images dans le /img de notre dossier css */
357[class^="icon-"],
358[class*=" icon-"]{
359  background-image:url("@{iconSpritePath}");
360  margin-top: 3px;
361}
362.icon-white,
363.nav-pills > .active > a > [class^="icon-"],
364.nav-pills > .active > a > [class*=" icon-"],
365.nav-list > .active > a > [class^="icon-"],
366.nav-list > .active > a > [class*=" icon-"],
367.navbar-inverse .nav > .active > a > [class^="icon-"],
368.navbar-inverse .nav > .active > a > [class*=" icon-"],
369.dropdown-menu > li > a:hover > [class^="icon-"],
370.dropdown-menu > li > a:focus > [class^="icon-"],
371.dropdown-menu > li > a:hover > [class*=" icon-"],
372.dropdown-menu > li > a:focus > [class*=" icon-"],
373.dropdown-menu > .active > a > [class^="icon-"],
374.dropdown-menu > .active > a > [class*=" icon-"],
375.dropdown-submenu:hover > a > [class^="icon-"],
376.dropdown-submenu:focus > a > [class^="icon-"],
377.dropdown-submenu:hover > a > [class*=" icon-"],
378.dropdown-submenu:focus > a > [class*=" icon-"]{
379    background-image:url("@{iconWhiteSpritePath}");
380}
381.navbar .nav > li > a {padding: 9px 10px;}
382.navbar .nav > li.item-picto > a {padding: 9px 15px;}
383/* icones en sprite css */
384[class^="icon-nav"], [class*=" icon-nav"]{
385    background-image:url("./img/sprite.png");
386    height:22px;
387    width:22px;
388    background-repeat:no-repeat;
389    display:inline-block;
390    vertical-align:text-top;
391    margin:0;
392    &:hover{background-color:@grayDark;}
393}
394.icone{
395    display: inline-block;
396    vertical-align: middle;
397    padding:5px;
398    width: 30px;
399    height: 30px;
400    .border-radius(20px);
401    background-color: @blue ;
402    &:hover,&:active,&:focus{background-color: @blue ;}
403}
404#nav{
405    .menu-container{
406        border-top:1px solid @blue;
407        border-bottom:1px solid @blue;
408        .border-radius(0);
409        .nav{
410            margin:0 auto;
411            float:none;
412            .dropdown-menu {
413                min-width: 240px;
414                .border-radius(@baseBorderRadius);
415                .box-shadow(0 2px 2px rgba(0,0,0,.2));
416            }
417            .item{               
418                li.item{
419                    text-transform:none;
420                    background:none;
421                    list-style: none;
422                    a{
423                        display: block;
424                        &:hover,&:focus,&:active{background-color:@blue;color:@white;}
425                    }
426                }
427                &.tout_voir{text-align:right;}
428                .on,&.on{font-weight: normal;}
429                &.item-picto {
430                    >a{
431                        &.icon-nav-home{
432                            background-position:12px -30px;
433                            &:hover,&:focus,&:active{background-position:12px 9px;}
434                        }
435                        &.icon-nav-calendar{
436                            background-position:-25px -30px;
437                            &:hover,&:focus,&:active{background-position:-27px 9px;}
438                        }
439                        &.icon-nav-contact{
440                            background-position:-187px -30px;
441                            &:hover,&:focus,&:active{background-position:-187px 9px;}
442                        }
443                        &.icon-nav-themes{
444                            background-position:-266px -30px;
445                            &:hover,&:focus,&:active{background-position:-266px 9px;}
446                        }
447                        &.icon-nav-star{
448                            background-position:-228px -30px;
449                            &:hover,&:focus,&:active{background-position:-228px 9px;}
450                        }
451                    }
452                }
453            }
454        }
455    }
456}
457
458/* Gestion des layoutgala */
459@import "css/layoutgala/9";
460@import "css/layoutgala/33";
461@import "css/layoutgala/27";
462
463/* par defaut : 2 colonnes en largeurs fixes */
464#layoutgala33 > .core(8,4,4,@gridColumnWidth,@gridGutterWidth);
465
466/* largeur>1200px : 3 colonnes en largeurs fixes sur les ecrans larges */
467@media (min-width: 1200px) {
468  #layoutgala9 > .core(6,3,3,@gridColumnWidth1200,@gridGutterWidth1200);
469}
470
471/* entre 768px et 979px : 2 colonnes en largeurs fixes, mais grille plus etroite*/
472@media (min-width: 768px) and (max-width: 979px) {
473  #layoutgala33 > .core(8,4,4,@gridColumnWidth768,@gridGutterWidth768);
474}
475/* largeur < 767px : content en pleine largeur, aside et extra en 2 colonnes en dessous */
476@media (max-width: 767px) {
477  #layoutgala27 > .core(auto,48%,48%,@gridColumnWidth768,@gridGutterWidth768);
478}
479
480/* largeur < 450px : on garde le layout de dessus, mais on verticalise tout (content puis aside puis extra) */
481@media (max-width: 450px) {
482  div#aside {float:none;width:100%;}
483  div#extra {float:none;width:100%;}
484}
Note: See TracBrowser for help on using the repository browser.