Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1
//## Base theme color file
2
 
3
/****
4
Boby
5
****/
6
 
7
body {
8
  background-color: $bg-color;
9
}
10
 
11
/******
12
General
13
******/
14
 
15
/* Theme Font Color */
16
.theme-font {
17
    color: $brand-main-color !important;
18
}
19
 
20
/* Pace - Page Progress */
21
.pace .pace-progress {
22
    background: $brand-main-color;
23
}
24
 
25
/* Theme Light Portlet */
26
.portlet.light {
27
    .btn.btn-circle.btn-icon-only.btn-default {
28
        border-color: lighten(#ACB5C3, 5%);
29
 
30
        > i {
31
            font-size: 13px;
32
            color: darken(#ACB5C3, 2%);
33
        }
34
 
35
        &:hover,
36
        &.active {
37
            color: #fff;
38
            background: $brand-main-color;
39
            border-color: $brand-main-color;
40
 
41
            > i {
42
                color: #fff;
43
            }
44
        }
45
    }
46
}
47
 
48
/******
49
Page Header
50
******/
51
 
52
.page-header {
53
    background-color: $header-bg-color;
54
 
55
    /* Page Header Top */
56
    .page-header-top {
57
 
58
        &.fixed {
59
            background: $header-bg-color !important;
60
            box-shadow: $header-top-menu-fixed-border-box;
61
        }
62
 
63
        /* Top menu */
64
        .top-menu {
65
            .navbar-nav {
66
 
67
                /* Top Links */
68
                > li.dropdown {
69
 
70
                    .separator {
71
                        border-left: 1px solid $header-top-menu-separator-color;
72
                    }
73
 
74
                    > .dropdown-toggle {
75
                        > i {
76
                            color: $header-top-menu-icon-font-color;
77
                        }
78
 
79
                        &:hover {
80
                            background-color: $header-top-menu-bg-hover-color;
81
 
82
                            > i {
83
                                color: darken($header-top-menu-icon-font-color, 10%);
84
                            }
85
                        }
86
 
87
                        .badge.badge-default {
88
                            background-color: $brand-main-red-color;
89
                            color: $header-top-menu-badge-font-color;
90
                        }
91
                    }
92
 
93
                    &.open {
94
                        .dropdown-toggle {
95
                            background-color: $header-top-menu-bg-hover-color-on-dropdown-open;
96
 
97
                            > i {
98
                                color: darken($header-top-menu-icon-font-color, 10%);
99
                            }
100
                        }
101
                    }
102
                }
103
 
104
                /* Separator */
105
                > li.dropdown-separator {
106
 
107
                    .separator {
108
                        border-left: 1px solid $header-top-menu-separator-color;
109
                    }
110
                }
111
 
112
                /* Extended Dropdowns */
113
                > li.dropdown-extended {
114
 
115
                    .dropdown-menu {
116
 
117
                        &:after {
118
                            border-bottom-color: $header-top-menu-extended-dropdown-header-bg-color;
119
                        }
120
 
121
                        > li.external {
122
                            background: $header-top-menu-extended-dropdown-header-bg-color;
123
 
124
                            > h3 {
125
                                color: $header-top-menu-extended-dropdown-header-font-color;
126
                            }
127
 
128
                            > a {
129
                                color: $link-color;
130
 
131
                                &:hover {
132
                                    color: $link-hover-color;
133
                                    text-decoration: none;
134
                                }
135
                            }
136
                        }
137
 
138
                        .dropdown-menu-list {
139
                            > li {
140
                                > a {
141
                                    border-bottom: 1px solid $header-top-menu-extended-dropdown-item-border-color !important;
142
                                    color: $header-top-menu-extended-dropdown-item-font-color;
143
 
144
                                    &:hover {
145
                                        background: $header-top-menu-extended-dropdown-item-bg-color-on-hover;
146
                                    }
147
                                }
148
                            }
149
                        }
150
                    }
151
                }
152
 
153
                /* Notification */
154
                > li.dropdown-notification {
155
                    .dropdown-menu {
156
                        .dropdown-menu-list {
157
                            > li {
158
                                > a {
159
                                    .time {
160
                                        background: $header-top-menu-notification-time-bg-color;
161
                                    }
162
 
163
                                    &:hover {
164
                                        .time {
165
                                            background: darken($header-top-menu-notification-time-bg-color, 5%);
166
                                        }
167
                                    }
168
                                }
169
                            }
170
                        }
171
                    }
172
                }
173
 
174
                /* Inbox */
175
                > li.dropdown-inbox {
176
                    > .dropdown-toggle {
177
                        > .circle {
178
                            background-color: $brand-main-color;
179
                            color: $brand-main-font-color;
180
                        }
181
 
182
                        > .corner {
183
                            border-color: transparent transparent transparent $brand-main-color;
184
                        }
185
                    }
186
 
187
                    .dropdown-menu {
188
                        .dropdown-menu-list {
189
                            .subject {
190
                                .from {
191
                                    color: $header-top-menu-inbox-dropdown-from-font-color;
192
                                }
193
                            }
194
                        }
195
                    }
196
                }
197
 
198
                /* Tasks */
199
                > li.dropdown-tasks {
200
 
201
                    .dropdown-menu {
202
                        .dropdown-menu-list {
203
                            .progress {
204
                                background-color: $header-top-menu-task-dropdown-progress-bg-color;
205
                            }
206
                        }
207
                    }
208
                }
209
 
210
                /* User */
211
                > li.dropdown-user {
212
                    > .dropdown-toggle {
213
 
214
                        > .username {
215
                            color: $header-top-menu-user-font-color;
216
                        }
217
 
218
                        > i {
219
                            color: $header-top-menu-user-font-color;
220
                        }
221
                    }
222
 
223
                    > .dropdown-menu {
224
                        width: 195px;
225
                    }
226
 
227
                    &:hover,
228
                    &.open {
229
                        > .dropdown-toggle {
230
                            > .username,
231
                            > i {
232
                                color: $header-top-menu-user-font-color-on-hover;
233
                            }
234
                        }
235
                    }
236
                }
237
 
238
                /* Language */
239
                > li.dropdown-language {
240
 
241
                    > .dropdown-toggle {
242
                        > .langname {
243
                            color: $header-top-menu-user-font-color;
244
                        }
245
                    }
246
 
247
                    &:hover,
248
                    &.open {
249
                        > .dropdown-toggle {
250
                            > .langname {
251
                                color: $header-top-menu-user-font-color-on-hover;
252
                            }
253
                        }
254
                    }
255
                }
256
 
257
                /* Dark version */
258
                > li.dropdown-dark {
259
                    .dropdown-menu {
260
                        background: $header-top-menu-dropdown-dark-bg-color;
261
                        border: 0;
262
 
263
                        &:after {
264
                            border-bottom-color: $header-top-menu-dropdown-dark-bg-color;
265
                        }
266
 
267
                        > li.external {
268
                            background: $header-top-menu-dropdown-dark-header-bg-color;
269
 
270
                            > h3 {
271
                                color: $header-top-menu-dropdown-dark-header-font-color;
272
                            }
273
 
274
                            > a {
275
                                &:hover {
276
                                    color: lighten($link-color, 11%);
277
                                }
278
                            }
279
                        }
280
 
281
                        &.dropdown-menu-default,
282
                        .dropdown-menu-list {
283
                            > li {
284
                                a {
285
                                    color: $header-top-menu-dropdown-dark-item-font-color;
286
                                    border-bottom: 1px solid $header-top-menu-dropdown-dark-item-border-color !important;
287
 
288
                                    > i {
289
                                        color: $header-top-menu-dropdown-dark-item-icon-color;
290
                                    }
291
 
292
                                    &:hover {
293
                                        background: $header-top-menu-dropdown-dark-item-bg-color-on-hover;
294
                                    }
295
                                }
296
                            }
297
                        }
298
 
299
                        &.dropdown-menu-default {
300
                            > li {
301
                                a {
302
                                    border-bottom: 0 !important;
303
                                }
304
 
305
                                &.divider {
306
                                    background: $header-top-menu-dropdown-dark-default-menu-divider;
307
                                }
308
                            }
309
                        }
310
                    }
311
                }
312
 
313
                > li.dropdown-notification.dropdown-dark {
314
                    .dropdown-menu {
315
                        .dropdown-menu-list {
316
                            > li {
317
                                > a {
318
                                    .time {
319
                                        background: $header-top-menu-dropdown-dark-notification-time-bg-color;
320
                                    }
321
 
322
                                    &:hover {
323
                                        .time {
324
                                            background: darken($header-top-menu-dropdown-dark-notification-time-bg-color, 5%);
325
                                        }
326
                                    }
327
                                }
328
                            }
329
                        }
330
                    }
331
                }
332
            }
333
        }
334
    }
335
 
336
    /* Page Header Menu */
337
    .page-header-menu {
338
        background: $header-hor-menu-bg-color;
339
 
340
        &.fixed {
341
            box-shadow: $header-hor-menu-fixed-border-box;
342
        }
343
 
344
        /* Default Mega Menu */
345
        .hor-menu {
346
            .navbar-nav {
347
                /* Mega menu content */
348
                > li.mega-menu-dropdown {
349
 
350
                        > .dropdown-menu {
351
                            box-shadow: $header-hor-menu-box-shadow;
352
 
353
                            .mega-menu-content {
354
 
355
                                .mega-menu-submenu {
356
 
357
                                    li {
358
                                        > h3 {
359
                                            color: $header-hor-menu-mega-menu-header-font-color;
360
                                        }
361
                                    }
362
                                }
363
                            }
364
                        }
365
                }
366
 
367
                /* Classic menu */
368
                > li {
369
                    > a {
370
                        color: $header-hor-menu-default-link-font-color;
371
 
372
                        > i {
373
                            color: $header-hor-menu-default-link-icon-color;
374
                        }
375
                    }
376
 
377
                    &.open > a,
378
                    > a:hover {
379
                        color: $header-hor-menu-default-link-font-color-on-hover ;
380
                        background: $header-hor-menu-default-link-bg-color-on-hover !important;
381
 
382
                        > i {
383
                            color: $header-hor-menu-default-link-icon-color-on-hover;
384
                        }
385
                    }
386
 
387
                    &.active,
388
                    &.current {
389
                        > a,
390
                        > a:hover {
391
                            color: $header-hor-menu-default-link-font-color-on-active;
392
                            background: $header-hor-menu-default-link-bg-color-on-active;
393
 
394
                            > i {
395
                                color: $header-hor-menu-default-link-icon-color;
396
                            }
397
                        }
398
                    }
399
 
400
                    .dropdown-menu {
401
                        box-shadow: $header-hor-menu-box-shadow;
402
                        background: $header-hor-menu-dropdown-menu-bg-color;
403
 
404
                        li {
405
 
406
                            > a {
407
                                color: $header-hor-menu-dropdown-menu-link-font-color;
408
 
409
                                > i {
410
                                    color: $header-hor-menu-dropdown-menu-link-icon-color;
411
                                }
412
                            }
413
 
414
                            &:hover {
415
                                > a {
416
                                    color: $header-hor-menu-dropdown-menu-link-font-color-on-hover;
417
                                    background: $header-hor-menu-dropdown-menu-link-bg-color-on-hover;
418
 
419
                                    > i {
420
                                        color: $header-hor-menu-dropdown-menu-link-icon-color-on-hover;
421
                                    }
422
                                }
423
                            }
424
 
425
                            &.active,
426
                            &.current {
427
                                > a,
428
                                > a:hover {
429
                                    color: $header-hor-menu-dropdown-menu-link-font-color-on-active;
430
                                    background: $header-hor-menu-dropdown-menu-link-bg-color-on-active;
431
 
432
                                    > i {
433
                                        color: $header-hor-menu-dropdown-menu-link-icon-color-on-active;
434
                                    }
435
                                }
436
                            }
437
 
438
                            &.divider {
439
                                background-color: lighten($header-hor-menu-dropdown-menu-bg-color, 5%);
440
                            }
441
                        }
442
                    }
443
 
444
                    .dropdown-submenu {
445
                        > a:after {
446
                            color: $header-hor-menu-dropdown-menu-link-icon-color;
447
                        }
448
                    }
449
                }
450
            }
451
        }
452
 
453
        /* Light Mega Menu */
454
        .hor-menu.hor-menu-light {
455
            .navbar-nav {
456
                /* Mega menu content */
457
                > li.mega-menu-dropdown {
458
 
459
                        > .dropdown-menu {
460
                            box-shadow: $header-light-hor-menu-box-shadow;
461
 
462
                            .mega-menu-content {
463
 
464
                                .mega-menu-submenu {
465
 
466
                                    li {
467
                                        > h3 {
468
                                            color: $header-light-hor-menu-mega-menu-header-font-color;
469
                                        }
470
                                    }
471
                                }
472
                            }
473
                        }
474
                }
475
 
476
                /* Classic menu */
477
                > li {
478
                    > a {
479
                        color: $header-light-hor-menu-default-link-font-color;
480
 
481
                        > i {
482
                            color: $header-light-hor-menu-default-link-icon-color;
483
                        }
484
                    }
485
 
486
                    > a:hover {
487
                        color: $header-light-hor-menu-default-link-font-color-on-hover;
488
                        background: $header-light-hor-menu-default-link-bg-color-on-hover;
489
 
490
                        > i {
491
                            color: $header-light-hor-menu-default-link-icon-color-on-hover;
492
                        }
493
                    }
494
 
495
                    &.open > a {
496
                        color: $header-light-hor-menu-default-link-font-color-on-onen !important;
497
                        background: $header-light-hor-menu-default-link-bg-color-on-onen !important;
498
 
499
                        > i {
500
                            color: $header-light-hor-menu-default-link-icon-color-on-onen !important;
501
                        }
502
                    }
503
 
504
                    &.active,
505
                    &.current {
506
                        > a,
507
                        > a:hover {
508
                            color: $header-light-hor-menu-default-link-font-color-on-active;
509
                            background: $header-light-hor-menu-default-link-bg-color-on-active;
510
 
511
                            > i {
512
                                color: $header-light-hor-menu-default-link-icon-color;
513
                            }
514
                        }
515
                    }
516
 
517
                    .dropdown-menu {
518
                        box-shadow: $header-light-hor-menu-box-shadow;
519
                        background: $header-light-hor-menu-dropdown-menu-bg-color;
520
 
521
                        li {
522
 
523
                            > a {
524
                                color: $header-light-hor-menu-dropdown-menu-link-font-color;
525
 
526
                                > i {
527
                                    color: $header-light-hor-menu-dropdown-menu-link-icon-color;
528
                                }
529
                            }
530
 
531
                            &:hover {
532
                                > a {
533
                                    color: $header-light-hor-menu-dropdown-menu-link-font-color-on-hover;
534
                                    background: $header-light-hor-menu-dropdown-menu-link-bg-color-on-hover;
535
 
536
                                    > i {
537
                                        color: $header-light-hor-menu-dropdown-menu-link-icon-color-on-hover;
538
                                    }
539
                                }
540
                            }
541
 
542
                            &.active,
543
                            &.current {
544
                                > a,
545
                                > a:hover {
546
                                    color: $header-light-hor-menu-dropdown-menu-link-font-color-on-active;
547
                                    background: $header-light-hor-menu-dropdown-menu-link-bg-color-on-active;
548
 
549
                                    > i {
550
                                        color: $header-light-hor-menu-dropdown-menu-link-icon-color-on-active;
551
                                    }
552
                                }
553
                            }
554
 
555
                            &.divider {
556
                                background-color: darken($header-light-hor-menu-dropdown-menu-bg-color, 4%);
557
                            }
558
                        }
559
                    }
560
 
561
                    > .dropdown-menu {
562
                        border: 1px solid darken($header-light-hor-menu-default-link-bg-color-on-onen, 5%);
563
                        border-top: 0;
564
                    }
565
                }
566
            }
567
        }
568
 
569
        /* Header seaech box */
570
        .search-form {
571
            background: $header-search-bg-color;
572
 
573
            .input-group {
574
                background: $header-search-bg-color;
575
 
576
                .form-control {
577
                    color: $header-search-font-color;
578
                    background: $header-search-bg-color;
579
                    @include placeholder($header-search-placeholder-font-color);
580
                }
581
 
582
                .input-group-btn {
583
                    .btn.submit {
584
                        > i {
585
                            color: $header-search-font-color;
586
                        }
587
                    }
588
                }
589
            }
590
        }
591
    }
592
}
593
 
594
/******
595
Page Footer
596
******/
597
.page-prefooter {
598
    background: $footer-pre-bg-color;
599
    color: $footer-pre-font-color;
600
 
601
    h2 {
602
        color: $brand-main-color;
603
    }
604
 
605
    .subscribe-form {
606
        .form-control {
607
            background: darken($footer-pre-bg-color, 9%);
608
            border-color: darken($footer-pre-bg-color, 9%);
609
            color: $footer-pre-font-color;
610
 
611
            @include placeholder(darken($footer-pre-font-color, 5%));
612
        }
613
 
614
        .btn {
615
            @include button-variant(#fff, lighten($brand-main-color, 3%), "");
616
        }
617
    }
618
}
619
 
620
.page-footer {
621
    background: $footer-bg-color;
622
    color: $footer-default-font-color;
623
}
624
 
625
/* Scroll Top */
626
 
627
.scroll-to-top {
628
    > i {
629
        color: $footer-scroll-top-icon-color;
630
        font-size: 32px;
631
        @include opacity(0.7);
632
    }
633
}
634
 
635
@media (min-width: $screen-md-min) { /* 992px */
636
    .page-header {
637
        /* Page Header Menu */
638
        .page-header-menu {
639
            &.fixed {
640
                width: 100%;
641
                position: fixed;
642
                top: 0;
643
                left: 0;
644
                z-index: $zindex-header-fixed;
645
            }
646
        }
647
    }
648
}
649
 
650
@media (max-width: $screen-sm-max) { /* 991px */
651
    .page-header {
652
 
653
        .page-header-menu {
654
            background: $page-content-bg-color;
655
 
656
            /* Horizontal mega menu */
657
            .hor-menu {
658
                .navbar-nav {
659
                    background: #fff !important;
660
 
661
                    /* Mega menu content */
662
                    > li.mega-menu-dropdown {
663
 
664
                        > .dropdown-menu {
665
                            box-shadow: none;
666
 
667
                            .mega-menu-content {
668
 
669
                                .mega-menu-submenu {
670
                                    border-right: none !important;
671
 
672
                                    li {
673
                                        > h3 {
674
                                            color: #72808a;
675
                                        }
676
                                    }
677
                                }
678
                            }
679
                        }
680
                    }
681
 
682
                    /* Classic menu */
683
                    > li {
684
                        border-bottom: 1px solid #F0F0F0;
685
 
686
                        &:last-child {
687
                            border-bottom: 0;
688
                        }
689
 
690
                        > a {
691
                            background: none !important;
692
                            color: $header-mobile-hor-menu-default-link-font-color !important;
693
 
694
                            > i {
695
                                color: $header-mobile-hor-menu-default-link-font-color !important;
696
                            }
697
                        }
698
 
699
                        &:hover > {
700
                            a {
701
                                background: none !important;
702
                                color: $header-mobile-hor-menu-default-link-font-color-on-hover !important;
703
 
704
                                > i {
705
                                    color: $header-mobile-hor-menu-default-link-font-color-on-hover !important;
706
                                }
707
                            }
708
                        }
709
 
710
                        &.open,
711
                        &.active,
712
                        &.current {
713
                            > a,
714
                            > a:hover {
715
                                color: $header-mobile-hor-menu-default-link-font-color-on-active !important;
716
                                background: $header-mobile-hor-menu-default-link-bg-color-on-active !important;
717
 
718
                                > i {
719
                                    color: $header-mobile-hor-menu-default-link-font-color-on-active !important;
720
                                }
721
                            }
722
                        }
723
 
724
                        .dropdown-menu {
725
                            border: 0 !important;
726
                            border-top: 1px solid #eee;
727
                            box-shadow: none !important;
728
                            background: #fff !important;
729
 
730
                            li {
731
                                &.divider {
732
                                    border-bottom: 1px solid #F0F0F0;
733
                                }
734
 
735
                                &:first-child {
736
                                    margin-top: 1px;
737
                                }
738
 
739
                                > a {
740
                                    color: $header-mobile-hor-menu-default-link-font-color !important;
741
 
742
                                    > i {
743
                                        color: $header-mobile-hor-menu-default-link-font-color !important;
744
                                    }
745
                                }
746
 
747
                                &:hover > {
748
                                    a {
749
                                        background: none !important;
750
                                        color: $header-mobile-hor-menu-default-link-font-color-on-hover !important;
751
 
752
                                        > i {
753
                                            color: $header-mobile-hor-menu-default-link-font-color-on-hover !important;
754
                                        }
755
                                    }
756
                                }
757
 
758
                                &.open,
759
                                &.active,
760
                                &.current {
761
                                    > a,
762
                                    > a:hover {
763
                                        color: $header-mobile-hor-menu-default-link-font-color-on-active !important;
764
                                        background: $header-mobile-hor-menu-default-link-bg-color-on-active !important;
765
 
766
                                        > i {
767
                                            color: $header-mobile-hor-menu-default-link-font-color-on-active !important;
768
                                        }
769
                                    }
770
                                }
771
                            }
772
                        }
773
                    }
774
 
775
                    > li.classic-menu-dropdown {
776
                        .dropdown-menu > {
777
                            li.dropdown-submenu.active > a:after,
778
                            li.dropdown-submenu.open > a:after {
779
                                color: $header-mobile-hor-menu-default-link-font-color-on-active !important;
780
                            }
781
                        }
782
                    }
783
                }
784
 
785
                .nav {
786
                    border: 0 !important;
787
                    margin: 0 !important;
788
 
789
                    .dropdown-submenu.open > a,
790
                    .dropdown-submenu.open > a:hover {
791
                        border: 0 !important;
792
                        margin: 0 !important;
793
                        color: #fff !important;
794
                        background: lighten($brand-main-color, 5%) !important;
795
 
796
                        > i {
797
                            color: #fff !important;
798
                        }
799
                    }
800
                }
801
            }
802
        }
803
 
804
        .search-form {
805
            background: #fff !important;
806
 
807
            .input-group {
808
                background: #fff !important;
809
 
810
                .form-control {
811
                    background: #fff !important;
812
                }
813
 
814
                .input-group-btn {
815
                    .btn.submit {
816
                        i {
817
                            color: #fff !important;
818
                        }
819
 
820
                        background: $brand-main-color;
821
 
822
                        &:hover,
823
                        &:focus,
824
                        &:active,
825
                        &.active {
826
                            background: darken($brand-main-color, 8%);
827
                        }
828
                    }
829
                }
830
            }
831
        }
832
    }
833
}
834
 
835
@media (max-width: $screen-xs-min) { /* 480px */
836
 
837
    .page-header {
838
        /* Top menu */
839
        .top-menu {
840
            background-color: $bg-color;
841
 
842
            .page-header-fixed-mobile & {
843
                background-color: $header-bg-color;
844
            }
845
 
846
            .navbar-nav {
847
                > li.dropdown-user {
848
                    .dropdown-toggle {
849
                        background-color: lighten($header-top-menu-bg-hover-color, 1%);
850
 
851
                        .page-header-fixed-mobile & {
852
                            background: none;
853
                        }
854
 
855
                        &:hover {
856
                            background-color: $header-top-menu-bg-hover-color;
857
                        }
858
                    }
859
                }
860
            }
861
        }
862
    }
863
 
864
}
865
 
866
/****
867
 CSS3 Spinner Bar
868
****/
869
 
870
.page-spinner-bar > div,
871
.block-spinner-bar > div {
872
    background: lighten($brand-main-color, 5%);
873
}