Subversion Repositories bacoAlunos

Rev

Rev 1306 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
1044 jmachado 1
//
2
// Variables
3
// --------------------------------------------------
4
 
5
 
6
// Global values
7
// --------------------------------------------------
8
 
9
// Grays
10
// -------------------------
11
 
12
@gray-darker:            lighten(#000, 13.5%); // #222
13
@gray-dark:              #a67b50;   // #333
14
@gray:                   #f98106; // #555
15
@gray-light:             #c28b50;   // #999
16
@gray-lighter:           #aaabab; // #eee
17
 
18
// Brand colors
19
// -------------------------
20
 
21
@brand-primary:         #f67e09;
22
@brand-success:         #5cb85c;
23
@brand-warning:         #f0ad4e;
24
@brand-danger:          #d9534f;
25
@brand-info:            #5bc0de;
26
 
27
// Scaffolding
28
// -------------------------
29
 
30
@body-bg:               #fbfbfa;
31
@text-color:            @gray-dark;
32
 
33
// Links
34
// -------------------------
35
 
36
@link-color:            @brand-primary;
37
@link-hover-color:      darken(@link-color, 15%);
38
 
39
// Typography
40
// -------------------------
41
 
42
@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
43
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
44
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
45
@font-family-base:        @font-family-sans-serif;
46
 
47
@font-size-base:          14px;
48
@font-size-large:         ceil(@font-size-base * 1.25); // ~18px
49
@font-size-small:         ceil(@font-size-base * 0.85); // ~12px
50
 
51
@line-height-base:        1.428571429; // 20/14
52
@line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px
53
 
54
@headings-font-family:    @font-family-base;
55
@headings-font-weight:    500;
56
@headings-line-height:    1.1;
57
 
58
// Iconography
59
// -------------------------
60
 
61
@icon-font-path:          "../fonts/";
62
@icon-font-name:          "glyphicons-halflings-regular";
63
 
64
 
65
// Components
66
// -------------------------
67
// Based on 14px font-size and 1.428 line-height (~20px to start)
68
 
69
@padding-base-vertical:          6px;
70
@padding-base-horizontal:        12px;
71
 
72
@padding-large-vertical:         10px;
73
@padding-large-horizontal:       16px;
74
 
75
@padding-small-vertical:         5px;
76
@padding-small-horizontal:       10px;
77
 
78
@line-height-large:              1.33;
79
@line-height-small:              1.5;
80
 
81
@border-radius-base:             4px;
82
@border-radius-large:            6px;
83
@border-radius-small:            3px;
84
 
85
@component-active-bg:            @brand-primary;
86
 
87
@caret-width-base:               4px;
88
@caret-width-large:              5px;
89
 
90
// Tables
91
// -------------------------
92
 
93
@table-cell-padding:                 8px;
94
@table-condensed-cell-padding:       5px;
95
 
96
@table-bg:                           transparent; // overall background-color
97
@table-bg-accent:                    #f9f9f9; // for striping
98
@table-bg-hover:                     #f5f5f5;
99
@table-bg-active:                    @table-bg-hover;
100
 
101
@table-border-color:                 #a67b50; // table and cell border
102
 
103
 
104
// Buttons
105
// -------------------------
106
 
107
@btn-font-weight:                normal;
108
 
109
@btn-default-color:              #333;
110
@btn-default-bg:                 #fff;
111
@btn-default-border:             #ccc;
112
 
113
@btn-primary-color:              #fff;
114
@btn-primary-bg:                 @brand-primary;
115
@btn-primary-border:             darken(@btn-primary-bg, 5%);
116
 
117
@btn-success-color:              #fff;
118
@btn-success-bg:                 @brand-success;
119
@btn-success-border:             darken(@btn-success-bg, 5%);
120
 
121
@btn-warning-color:              #fff;
122
@btn-warning-bg:                 @brand-warning;
123
@btn-warning-border:             darken(@btn-warning-bg, 5%);
124
 
125
@btn-danger-color:               #fff;
126
@btn-danger-bg:                  @brand-danger;
127
@btn-danger-border:              darken(@btn-danger-bg, 5%);
128
 
129
@btn-info-color:                 #fff;
130
@btn-info-bg:                    @brand-info;
131
@btn-info-border:                darken(@btn-info-bg, 5%);
132
 
133
@btn-link-disabled-color:        @gray-light;
134
 
135
 
136
// Forms
137
// -------------------------
138
 
139
@input-bg:                       #fff;
140
@input-bg-disabled:              @gray-lighter;
141
 
142
@input-color:                    @gray;
143
@input-border:                   #ccc;
144
@input-border-radius:            @border-radius-base;
145
@input-border-focus:             #66afe9;
146
 
147
@input-color-placeholder:        @gray-light;
148
 
149
@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
150
@input-height-large:             (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
151
@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
152
 
153
@legend-color:                   @gray-dark;
154
@legend-border-color:            #e5e5e5;
155
 
156
@input-group-addon-bg:           @gray-lighter;
157
@input-group-addon-border-color: @input-border;
158
 
159
 
160
// Dropdowns
161
// -------------------------
162
 
163
@dropdown-bg:                    #fff;
164
@dropdown-border:                rgba(0,0,0,.15);
165
@dropdown-fallback-border:       #ccc;
166
@dropdown-divider-bg:            #e5e5e5;
167
 
168
@dropdown-link-active-color:     #fff;
169
@dropdown-link-active-bg:        @component-active-bg;
170
 
171
@dropdown-link-color:            @gray-dark;
172
@dropdown-link-hover-color:      #fff;
173
@dropdown-link-hover-bg:         @dropdown-link-active-bg;
174
 
175
@dropdown-link-disabled-color:   @gray-light;
176
 
177
@dropdown-header-color:          @gray-light;
178
 
179
@dropdown-caret-color:           #000;
180
 
181
 
182
// COMPONENT VARIABLES
183
// --------------------------------------------------
184
 
185
 
186
// Z-index master list
187
// -------------------------
188
// Used for a bird's eye view of components dependent on the z-axis
189
// Try to avoid customizing these :)
190
 
191
@zindex-navbar:            1000;
192
@zindex-dropdown:          1000;
193
@zindex-popover:           1010;
194
@zindex-tooltip:           1030;
195
@zindex-navbar-fixed:      1030;
196
@zindex-modal-background:  1040;
197
@zindex-modal:             1050;
198
 
199
// Media queries breakpoints
200
// --------------------------------------------------
201
 
202
// Extra small screen / phone
203
@screen-xs:                  480px;
204
@screen-phone:               @screen-xs;
205
 
206
// Small screen / tablet
207
@screen-sm:                  768px;
208
@screen-tablet:              @screen-sm;
209
 
210
// Medium screen / desktop
211
@screen-md:                  992px;
212
@screen-desktop:             @screen-md;
213
 
214
// Large screen / wide desktop
215
@screen-lg:                  1200px;
216
@screen-lg-desktop:          @screen-lg;
217
 
218
// So media queries don't overlap when required, provide a maximum
219
@screen-xs-max:              (@screen-sm - 1);
220
@screen-sm-max:              (@screen-md - 1);
221
@screen-md-max:              (@screen-lg - 1);
222
 
223
 
224
// Grid system
225
// --------------------------------------------------
226
 
227
// Number of columns in the grid system
228
@grid-columns:              12;
229
// Padding, to be divided by two and applied to the left and right of all columns
230
@grid-gutter-width:         30px;
231
// Point at which the navbar stops collapsing
232
@grid-float-breakpoint:     @screen-tablet;
233
 
234
 
235
// Navbar
236
// -------------------------
237
 
238
// Basics of a navbar
239
@navbar-height:                    50px;
240
@navbar-margin-bottom:             @line-height-computed;
241
@navbar-default-color:             #777;
242
@navbar-default-bg:                #f8f8f8;
243
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
244
@navbar-border-radius:             @border-radius-base;
245
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
246
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
247
 
248
// Navbar links
249
@navbar-default-link-color:                #777;
250
@navbar-default-link-hover-color:          #333;
251
@navbar-default-link-hover-bg:             transparent;
252
@navbar-default-link-active-color:         #555;
253
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
254
@navbar-default-link-disabled-color:       #ccc;
255
@navbar-default-link-disabled-bg:          transparent;
256
 
257
// Navbar brand label
258
@navbar-default-brand-color:               @navbar-default-link-color;
259
@navbar-default-brand-hover-color:         darken(@navbar-default-link-color, 10%);
260
@navbar-default-brand-hover-bg:            transparent;
261
 
262
// Navbar toggle
263
@navbar-default-toggle-hover-bg:           #ddd;
264
@navbar-default-toggle-icon-bar-bg:        #ccc;
265
@navbar-default-toggle-border-color:       #ddd;
266
 
267
 
268
// Inverted navbar
269
//
270
// Reset inverted navbar basics
271
@navbar-inverse-color:                      @gray-light;
272
@navbar-inverse-bg:                         #757c80;
273
@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
274
 
275
// Inverted navbar links
276
@navbar-inverse-link-color:                 @gray-light;
277
@navbar-inverse-link-hover-color:           #fff;
278
@navbar-inverse-link-hover-bg:              transparent;
279
@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
280
@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
281
@navbar-inverse-link-disabled-color:        #444;
282
@navbar-inverse-link-disabled-bg:           transparent;
283
 
284
// Inverted navbar brand label
285
@navbar-inverse-brand-color:                @navbar-inverse-link-color;
286
@navbar-inverse-brand-hover-color:          #fff;
287
@navbar-inverse-brand-hover-bg:             transparent;
288
 
289
// Inverted navbar search
290
// Normal navbar needs no special styles or vars
291
@navbar-inverse-search-bg:                  lighten(@navbar-inverse-bg, 25%);
292
@navbar-inverse-search-bg-focus:            #fff;
293
@navbar-inverse-search-border:              @navbar-inverse-bg;
294
@navbar-inverse-search-placeholder-color:   #ccc;
295
 
296
// Inverted navbar toggle
297
@navbar-inverse-toggle-hover-bg:            #333;
298
@navbar-inverse-toggle-icon-bar-bg:         #fff;
299
@navbar-inverse-toggle-border-color:        #333;
300
 
301
 
302
// Navs
303
// -------------------------
304
 
305
@nav-link-padding:                          10px 15px;
306
@nav-link-hover-bg:                         @gray-lighter;
307
 
308
@nav-disabled-link-color:                   @gray-light;
309
@nav-disabled-link-hover-color:             @gray-light;
310
 
311
@nav-open-link-hover-color:                 #fff;
312
@nav-open-caret-border-color:               #fff;
313
 
314
// Tabs
315
@nav-tabs-border-color:                     #ddd;
316
 
317
@nav-tabs-link-hover-border-color:          @gray-lighter;
318
 
319
@nav-tabs-active-link-hover-bg:             @body-bg;
320
@nav-tabs-active-link-hover-color:          @gray;
321
@nav-tabs-active-link-hover-border-color:   #ddd;
322
 
323
@nav-tabs-justified-link-border-color:            #ddd;
324
@nav-tabs-justified-active-link-border-color:     @body-bg;
325
 
326
// Pills
327
@nav-pills-active-link-hover-bg:            @component-active-bg;
328
@nav-pills-active-link-hover-color:         #fff;
329
 
330
 
331
// Pagination
332
// -------------------------
333
 
334
@pagination-bg:                        #fff;
335
@pagination-border:                    #ddd;
336
 
337
@pagination-hover-bg:                  @gray-lighter;
338
 
339
@pagination-active-bg:                 @brand-primary;
340
@pagination-active-color:              #fff;
341
 
342
@pagination-disabled-color:            @gray-light;
343
 
344
 
345
// Pager
346
// -------------------------
347
 
348
@pager-border-radius:                  15px;
349
@pager-disabled-color:                 @gray-light;
350
 
351
 
352
// Jumbotron
353
// -------------------------
354
 
355
@jumbotron-padding:              30px;
356
@jumbotron-color:                inherit;
357
@jumbotron-bg:                   @gray-lighter;
358
 
359
@jumbotron-heading-color:        inherit;
360
 
361
 
362
// Form states and alerts
363
// -------------------------
364
 
365
@state-warning-text:             #c09853;
366
@state-warning-bg:               #fcf8e3;
367
@state-warning-border:           darken(spin(@state-warning-bg, -10), 3%);
368
 
369
@state-danger-text:              #b94a48;
370
@state-danger-bg:                #f2dede;
371
@state-danger-border:            darken(spin(@state-danger-bg, -10), 3%);
372
 
373
@state-success-text:             #468847;
374
@state-success-bg:               #dff0d8;
375
@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
376
 
377
@state-info-text:                #3a87ad;
378
@state-info-bg:                  #d9edf7;
379
@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
380
 
381
 
382
// Tooltips
383
// -------------------------
384
@tooltip-max-width:           200px;
385
@tooltip-color:               #fff;
386
@tooltip-bg:                  #000;
387
 
388
@tooltip-arrow-width:         5px;
389
@tooltip-arrow-color:         @tooltip-bg;
390
 
391
 
392
// Popovers
393
// -------------------------
394
@popover-bg:                          #fff;
395
@popover-max-width:                   276px;
396
@popover-border-color:                rgba(0,0,0,.2);
397
@popover-fallback-border-color:       #ccc;
398
 
399
@popover-title-bg:                    darken(@popover-bg, 3%);
400
 
401
@popover-arrow-width:                 10px;
402
@popover-arrow-color:                 #fff;
403
 
404
@popover-arrow-outer-width:           (@popover-arrow-width + 1);
405
@popover-arrow-outer-color:           rgba(0,0,0,.25);
406
@popover-arrow-outer-fallback-color:  #999;
407
 
408
 
409
// Labels
410
// -------------------------
411
 
412
@label-default-bg:            @gray-light;
413
@label-primary-bg:            @brand-primary;
414
@label-success-bg:            @brand-success;
415
@label-info-bg:               @brand-info;
416
@label-warning-bg:            @brand-warning;
417
@label-danger-bg:             @brand-danger;
418
 
419
@label-color:                 #fff;
420
@label-link-hover-color:      #fff;
421
 
422
 
423
// Modals
424
// -------------------------
425
@modal-inner-padding:         20px;
426
 
427
@modal-title-padding:         15px;
428
@modal-title-line-height:     @line-height-base;
429
 
430
@modal-content-bg:                             #fff;
431
@modal-content-border-color:                   rgba(0,0,0,.2);
432
@modal-content-fallback-border-color:          #999;
433
 
434
@modal-backdrop-bg:           #000;
435
@modal-header-border-color:   #e5e5e5;
436
@modal-footer-border-color:   @modal-header-border-color;
437
 
438
 
439
// Alerts
440
// -------------------------
441
@alert-padding:               15px;
442
@alert-border-radius:         @border-radius-base;
443
@alert-link-font-weight:      bold;
444
 
445
@alert-success-bg:            @state-success-bg;
446
@alert-success-text:          @state-success-text;
447
@alert-success-border:        @state-success-border;
448
 
449
@alert-info-bg:               @state-info-bg;
450
@alert-info-text:             @state-info-text;
451
@alert-info-border:           @state-info-border;
452
 
453
@alert-warning-bg:            @state-warning-bg;
454
@alert-warning-text:          @state-warning-text;
455
@alert-warning-border:        @state-warning-border;
456
 
457
@alert-danger-bg:             @state-danger-bg;
458
@alert-danger-text:           @state-danger-text;
459
@alert-danger-border:         @state-danger-border;
460
 
461
 
462
// Progress bars
463
// -------------------------
464
@progress-bg:                 #f5f5f5;
465
@progress-bar-color:          #fff;
466
 
467
@progress-bar-bg:             @brand-primary;
468
@progress-bar-success-bg:     @brand-success;
469
@progress-bar-warning-bg:     @brand-warning;
470
@progress-bar-danger-bg:      @brand-danger;
471
@progress-bar-info-bg:        @brand-info;
472
 
473
 
474
// List group
475
// -------------------------
476
@list-group-bg:               #fff;
477
@list-group-border:           #ddd;
478
@list-group-border-radius:    @border-radius-base;
479
 
480
@list-group-hover-bg:         #f5f5f5;
481
@list-group-active-color:     #fff;
482
@list-group-active-bg:        @component-active-bg;
483
@list-group-active-border:    @list-group-active-bg;
484
 
485
@list-group-link-color:          #555;
486
@list-group-link-heading-color:  #333;
487
 
488
 
489
// Panels
490
// -------------------------
491
@panel-bg:                    #fff;
492
@panel-inner-border:          #ddd;
493
@panel-border-radius:         @border-radius-base;
494
@panel-footer-bg:             #f5f5f5;
495
 
496
@panel-default-text:          @gray-dark;
497
@panel-default-border:        #ddd;
498
@panel-default-heading-bg:    #f5f5f5;
499
 
500
@panel-primary-text:          #fff;
501
@panel-primary-border:        @brand-primary;
502
@panel-primary-heading-bg:    @brand-primary;
503
 
504
@panel-success-text:          @state-success-text;
505
@panel-success-border:        @state-success-border;
506
@panel-success-heading-bg:    @state-success-bg;
507
 
508
@panel-warning-text:          @state-warning-text;
509
@panel-warning-border:        @state-warning-border;
510
@panel-warning-heading-bg:    @state-warning-bg;
511
 
512
@panel-danger-text:           @state-danger-text;
513
@panel-danger-border:         @state-danger-border;
514
@panel-danger-heading-bg:     @state-danger-bg;
515
 
516
@panel-info-text:             @state-info-text;
517
@panel-info-border:           @state-info-border;
518
@panel-info-heading-bg:       @state-info-bg;
519
 
520
 
521
// Thumbnails
522
// -------------------------
523
@thumbnail-padding:           4px;
524
@thumbnail-bg:                @body-bg;
525
@thumbnail-border:            #ddd;
526
@thumbnail-border-radius:     @border-radius-base;
527
 
528
@thumbnail-caption-color:     @text-color;
529
@thumbnail-caption-padding:   9px;
530
 
531
 
532
// Wells
533
// -------------------------
534
@well-bg:                     #f5f5f5;
535
 
536
 
537
// Badges
538
// -------------------------
539
@badge-color:                 #fff;
540
@badge-link-hover-color:      #fff;
541
@badge-bg:                    @gray-light;
542
 
543
@badge-active-color:          @link-color;
544
@badge-active-bg:             #fff;
545
 
546
@badge-font-weight:           bold;
547
@badge-line-height:           1;
548
@badge-border-radius:         10px;
549
 
550
 
551
// Breadcrumbs
552
// -------------------------
553
@breadcrumb-bg:               #f5f5f5;
554
@breadcrumb-color:            #ccc;
555
@breadcrumb-active-color:     @gray-light;
556
 
557
 
558
// Carousel
559
// ------------------------
560
 
561
@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
562
 
563
@carousel-control-color:                      #fff;
564
@carousel-control-width:                      15%;
565
@carousel-control-opacity:                    .5;
566
@carousel-control-font-size:                  20px;
567
 
568
@carousel-indicator-active-bg:                #fff;
569
@carousel-indicator-border-color:             #fff;
570
 
571
@carousel-caption-color:                      #fff;
572
 
573
 
574
// Close
575
// ------------------------
576
@close-color:                 #000;
577
@close-font-weight:           bold;
578
@close-text-shadow:           0 1px 0 #fff;
579
 
580
 
581
// Code
582
// ------------------------
583
@code-color:                  #c7254e;
584
@code-bg:                     #f9f2f4;
585
 
586
@pre-bg:                      #f5f5f5;
587
@pre-color:                   @gray-dark;
588
@pre-border-color:            #ccc;
589
@pre-scrollable-max-height:   340px;
590
 
591
// Type
592
// ------------------------
593
@text-muted:                  @gray-light;
594
@abbr-border-color:           @gray-light;
595
@headings-small-color:        @gray-light;
596
@blockquote-small-color:      @gray-light;
597
@blockquote-border-color:     @gray-lighter;
598
@page-header-border-color:    @gray-lighter;
599
 
600
// Miscellaneous
601
// -------------------------
602
 
603
// Hr border color
604
@hr-border:                   @gray-lighter;
605
 
606
// Horizontal forms & lists
607
@component-offset-horizontal: 180px;
608
 
609
 
610
// Container sizes
611
// --------------------------------------------------
612
 
613
// Small screen / tablet
614
@container-tablet:            ((720px + @grid-gutter-width));
615
 
616
// Medium screen / desktop
617
@container-desktop:           ((940px + @grid-gutter-width));
618
 
619
// Large screen / wide desktop
620
@container-lg-desktop:        ((1140px + @grid-gutter-width));