source: spip-zone/_squelettes_/spipr-educ/trunk/css/variables1.less @ 110940

Last change on this file since 110940 was 110940, checked in by johan.pustoch@…, 19 months ago

Premier depot des squelettes issus de divers developpements (bases sur spipr-dist).
Encore beaucoup de menage a faire (en particulier dans les fichiers less).
Pas vraiment de personnalisation simple pour le moment.
On peut surcharger variables.less et modifier les color1, color2, color3 pour changer les couleurs de base.
Le plugin est compatible avec menus (sinon un menu de liens et de rubriques est genere)

  • Property svn:executable set to *
File size: 9.1 KB
Line 
1@import "css/colors.less";
2
3// Variables
4// --------------------------------------------------
5
6
7// Global values
8// --------------------------------------------------
9
10// Grays
11// -------------------------
12@black:                 #000;
13@grayDarker:            #222;
14@grayDarkerAlpha:       rgba(22,22,22,0.6);
15@grayDark:              #363636;
16@grayDarkAlpha:         rgba(36,36,36,0.5);
17@gray:                  #555;
18@grayAlpha:             rgba(55,55,55,0.4);
19@grayLight:             #E0E2E4;
20@grayLighter:           #E0E2E4;
21@white:                 #fafafa;
22@blueDesaturate:        #005981;
23@grayBlue:              #B4C9C6;
24
25
26
27// Accent colors
28// -------------------------
29
30
31
32// Scaffolding
33// -------------------------
34@bodyBackground:        @white;
35@textColor:             @grayDark;
36
37
38// Links
39// -------------------------
40@linkColor:             @color2;
41@linkColorHover:        darken(@linkColor, 15%);
42
43
44// Typography
45// -------------------------
46@sansFontFamily:        'OpenSans',Arial,Helvetica,sans-serif;
47@sansFontLightFamily:   'OpenSansLight',Arial,Helvetica,sans-serif;
48@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
49@monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
50
51@baseFontSize:          15px;
52@baseFontFamily:        @sansFontFamily;
53@baseLineHeight:        22px;
54@altFontFamily:         @serifFontFamily;
55
56@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
57@headingsFontWeight:    bold;    // instead of browser default, bold
58@headingsColor:         inherit; // empty to use BS default, @textColor
59
60
61// Component sizing
62// -------------------------
63// Based on 14px font-size and 20px line-height
64
65@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
66@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
67@fontSizeMini:          @baseFontSize * 0.75; // ~11px
68
69@paddingLarge:          11px 19px; // 44px
70@paddingSmall:          2px 10px;  // 26px
71@paddingMini:           1px 6px;   // 24px
72
73@baseBorderRadius:      15px;
74@borderRadiusLarge:     15px;
75@borderRadiusMedium:    10px;
76@borderRadiusSmall:     4px;
77@borderRadiusBlocs:     0;
78
79// Tables
80// -------------------------
81@tableBackground:                   transparent; // overall background-color
82@tableBackgroundAccent:             #f9f9f9; // for striping
83@tableBackgroundHover:              #eeeeee; // for hover
84@tableBorder:                       #ddd; // table and cell border
85
86// Buttons
87// -------------------------
88@btnBackground:                     @white;
89@btnBackgroundHighlight:            darken(@white, 10%);
90@btnBorder:                         darken(@white, 20%);
91
92@btnPrimaryBackground:              @turquoise;
93@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
94
95@btnInfoBackground:                 lighten(@orange, 15%);
96@btnInfoBackgroundHighlight:        @orange;
97
98@btnSuccessBackground:              #62c462;
99@btnSuccessBackgroundHighlight:     #51a351;
100
101@btnWarningBackground:              lighten(@orange, 15%);
102@btnWarningBackgroundHighlight:     @orange;
103
104@btnDangerBackground:               #ee5f5b;
105@btnDangerBackgroundHighlight:      #bd362f;
106
107@btnInverseBackground:              @gray;
108@btnInverseBackgroundHighlight:     @grayDarker;
109
110
111// Forms
112// -------------------------
113@inputBackground:               @white;
114@inputBorder:                   #ccc;
115@inputBorderRadius:             3px;
116@inputDisabledBackground:       @grayLighter;
117@formActionsBackground:         transparent;
118@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
119
120
121// Dropdowns
122// -------------------------
123@dropdownBackground:            @white;
124@dropdownBorder:                rgba(0,0,0,.2);
125@dropdownDividerTop:            #e5e5e5;
126@dropdownDividerBottom:         @white;
127
128@dropdownLinkColor:             @linkColor;
129@dropdownLinkColorHover:        @white;
130@dropdownLinkColorActive:       @dropdownLinkColor;
131
132@dropdownLinkBackgroundActive:  @color1;
133@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
134
135
136
137// COMPONENT VARIABLES
138// --------------------------------------------------
139
140
141// Z-index master list
142// -------------------------
143// Used for a bird's eye view of components dependent on the z-axis
144// Try to avoid customizing these :)
145@zindexDropdown:          1000;
146@zindexPopover:           1010;
147@zindexTooltip:           1030;
148@zindexFixedNavbar:       1030;
149@zindexModalBackdrop:     1040;
150@zindexModal:             1050;
151
152
153// Sprite icons path
154// -------------------------
155@iconSpritePath:          "../img/glyphicons-halflings.png";
156@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
157
158
159// Input placeholder text color
160// -------------------------
161@placeholderText:         @grayLight;
162
163
164// Hr border color
165// -------------------------
166@hrBorder:                @grayLighter;
167
168
169// Horizontal forms & lists
170// -------------------------
171@horizontalComponentOffset:       180px;
172
173
174// Wells
175// -------------------------
176@wellBackground:                  @grayLight;
177
178
179// Navbar
180// -------------------------
181@navbarCollapseWidth:             767px;
182@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
183
184@navbarHeight:                    40px;
185@navbarBackgroundHighlight:       #CE4213;
186@navbarBackground:                @gray;
187@navbarBorder:                    darken(@navbarBackground, 15%);
188
189@navbarText:                      @white;
190@navbarLinkColor:                 @white;
191@navbarLinkColorHover:            @white;
192@navbarLinkColorActive:           @navbarLinkColorHover;
193@navbarLinkBackgroundHover:       rgba(0,0,0,.2);
194@navbarLinkBackgroundActive:      rgba(0,0,0,.2);
195
196@navbarBrandColor:                @navbarLinkColor;
197
198// Inverted navbar
199@navbarInverseBackground:                @grayLighter;
200@navbarInverseBackgroundHighlight:       @grayLighter;
201@navbarInverseBorder:                    darken(@navbarInverseBackground, 5%);
202
203@navbarInverseText:                      @black;
204@navbarInverseLinkColor:                 @black;
205@navbarInverseLinkColorHover:            @white;
206@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
207@navbarInverseLinkBackgroundHover:       @color1;
208@navbarInverseLinkBackgroundActive:      @color1;
209
210@navbarInverseBrandColor:                @navbarInverseLinkColor;
211
212
213// Pagination
214// -------------------------
215@paginationBackground:                @grayDark;
216@paginationBorder:                    @yellow;
217@paginationActiveBackground:          @color1;
218
219
220// Hero unit
221// -------------------------
222@heroUnitBackground:              @grayLighter;
223@heroUnitHeadingColor:            inherit;
224@heroUnitLeadColor:               inherit;
225
226
227// Form states and alerts
228// -------------------------
229@warningText:             #ECA918;
230@warningBackground:       lighten(@warningText, 40%);
231@warningBorder:           darken(spin(@warningBackground, -10), 3%);
232
233@errorText:               #DF382C;
234@errorBackground:         lighten(@errorText, 40%);
235@errorBorder:             darken(spin(@errorBackground, -10), 3%);
236
237@successText:             #38B44A;
238@successBackground:       lighten(@successText, 40%);
239@successBorder:           darken(spin(@successBackground, -10), 5%);
240
241@infoText:                @color2;
242@infoBackground:          lighten(@color2, 50%);
243@infoBorder:              darken(spin(@infoBackground, -10), 7%);
244
245
246// Tooltips and popovers
247// -------------------------
248@tooltipColor:            #fff;
249@tooltipBackground:       #000;
250@tooltipArrowWidth:       5px;
251@tooltipArrowColor:       @tooltipBackground;
252
253@popoverBackground:       #fff;
254@popoverArrowWidth:       10px;
255@popoverArrowColor:       #fff;
256@popoverTitleBackground:  darken(@popoverBackground, 3%);
257
258// Special enhancement for popovers
259@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
260@popoverArrowOuterColor:  rgba(0,0,0,.25);
261
262/* pour plugin bootstrap >2.0 */
263@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
264@navbarInverseSearchBackgroundFocus:     @white;
265@navbarInverseSearchBorder:              @navbarInverseBackground;
266@navbarInverseSearchPlaceholderColor:    #ccc;
267
268// GRID
269// --------------------------------------------------
270
271
272// Default 940px grid
273// -------------------------
274@gridColumns:             12;
275@gridColumnWidth:         60px;
276@gridGutterWidth:         20px;
277@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
278
279// 1200px min
280@gridColumnWidth1200:     70px;
281@gridGutterWidth1200:     30px;
282@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
283
284// 768px-979px
285@gridColumnWidth768:      42px;
286@gridGutterWidth768:      20px;
287@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
288
289
290// Fluid grid
291// -------------------------
292@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
293@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);
294
295// 1200px min
296@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
297@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);
298
299// 768px-979px
300@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
301@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);
Note: See TracBrowser for help on using the repository browser.