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
    Theme Colors
5
    ***********/
6
    .theme-font-color {
7
        color: $brand-main-color;
8
    }
9
 
10
    /***********
11
    Body bg color
12
    ***********/
13
 
14
    body {
15
        background: $bg-color;
16
    }
17
 
18
    /***********
19
    Page Header
20
    ***********/
21
 
22
    /* Header search bar, toggler button & top menu */
23
    .page-header.navbar {
24
        background: $header-bg-color;
25
        border-bottom: 1px solid $bg-color;
26
 
27
        /* Top notification menu/bar */
28
        .top-menu {
29
            .navbar-nav {
30
                > li.dropdown {
31
                    .dropdown-toggle {
32
                        &:hover {
33
                            background-color: $header-top-menu-bg-hover-color;
34
                        }
35
 
36
                        > i {
37
                            color: $header-top-menu-icon-font-color;
38
                        }
39
 
40
                        .badge.badge-default {
41
                            background-color: $header-top-menu-badge-bg-color;
42
                            color: $header-top-menu-badge-font-color;
43
                        }
44
                    }
45
 
46
                    &.open {
47
                        .dropdown-toggle {
48
                            background-color: $header-top-menu-bg-hover-color-on-dropdown-open;
49
                        }
50
                    }
51
 
52
                    .dropdown-menu {
53
                        &:before {
54
                            border-bottom-color: $header-top-menu-extended-dropdown-border-color;
55
                        }
56
                    }
57
                }
58
 
59
                > li.separator {
60
                    background: $header-top-menu-extended-separator-bg-color;
61
                }
62
 
63
                /* Extended Dropdowns */
64
                > li.dropdown-extended {
65
 
66
                    .dropdown-menu {
67
                        border: 1px solid $header-top-menu-extended-dropdown-border-color;
68
 
69
                        &:before {
70
                            border-bottom-color: darken($header-top-menu-extended-dropdown-border-color, 5%);
71
                        }
72
 
73
                        &:after {
74
                            border-bottom-color: $header-top-menu-extended-dropdown-header-bg-color;
75
                        }
76
 
77
                        > li.external {
78
                            background: $header-top-menu-extended-dropdown-header-bg-color;
79
 
80
                            > h3 {
81
                                color: $header-top-menu-extended-dropdown-header-font-color;
82
                            }
83
 
84
                            > a {
85
                                color: $link-color;
86
 
87
                                &:hover {
88
                                    color: $link-hover-color;
89
                                    text-decoration: none;
90
                                }
91
                            }
92
                        }
93
 
94
                        .dropdown-menu-list {
95
                            > li {
96
                                > a {
97
                                    border-bottom: 1px solid $header-top-menu-extended-dropdown-item-border-color !important;
98
                                    color: $header-top-menu-extended-dropdown-item-font-color;
99
 
100
                                    &:hover {
101
                                        background: $header-top-menu-extended-dropdown-item-bg-color-on-hover;
102
                                    }
103
                                }
104
                            }
105
                        }
106
                    }
107
                }
108
 
109
                /* Notification */
110
                > li.dropdown-notification {
111
                    .dropdown-menu {
112
                        .dropdown-menu-list {
113
                            > li {
114
                                > a {
115
                                    .time {
116
                                        background: $header-top-menu-notification-time-bg-color;
117
                                    }
118
 
119
                                    &:hover {
120
                                        .time {
121
                                            background: darken($header-top-menu-notification-time-bg-color, 5%);
122
                                        }
123
                                    }
124
                                }
125
                            }
126
                        }
127
                    }
128
                }
129
 
130
                /* Inbox */
131
                > li.dropdown-inbox {
132
                    > .dropdown-toggle {
133
                        > .circle {
134
                            background-color: $brand-main-color;
135
                            color: $brand-main-font-color;
136
                        }
137
 
138
                        > .corner {
139
                            border-color: transparent transparent transparent $brand-main-color;
140
                        }
141
                    }
142
 
143
                    .dropdown-menu {
144
                        .dropdown-menu-list {
145
                            .subject {
146
                                .from {
147
                                    color: $header-top-menu-inbox-dropdown-from-font-color;
148
                                }
149
                            }
150
                        }
151
                    }
152
                }
153
 
154
                /* Tasks */
155
                > li.dropdown-tasks {
156
 
157
                    .dropdown-menu {
158
                        .dropdown-menu-list {
159
                            .progress {
160
                                background-color: $header-top-menu-task-dropdown-progress-bg-color;
161
                            }
162
                        }
163
                    }
164
                }
165
 
166
                /* User */
167
                > li.dropdown-user {
168
                    > .dropdown-toggle {
169
 
170
                        > .username {
171
                            color: $header-top-menu-user-font-color;
172
                        }
173
 
174
                        > i {
175
                            color: $header-top-menu-user-font-color;
176
                        }
177
                    }
178
 
179
                    > .dropdown-menu {
180
                        width: 195px;
181
                    }
182
                }
183
 
184
                /* Language */
185
                > li.dropdown-language {
186
 
187
                    > .dropdown-toggle {
188
                        > .langname {
189
                            color: $header-top-menu-user-font-color;
190
                        }
191
                    }
192
                }
193
 
194
                /* Dark version */
195
                > li.dropdown-dark {
196
                    .dropdown-menu {
197
                        background: $header-top-menu-dropdown-dark-bg-color;
198
                        border: 0;
199
 
200
                        &:after {
201
                            border-bottom-color: $header-top-menu-dropdown-dark-bg-color;
202
                        }
203
 
204
                        > li.external {
205
                            background: $header-top-menu-dropdown-dark-header-bg-color;
206
 
207
                            > h3 {
208
                                color: $header-top-menu-dropdown-dark-header-font-color;
209
                            }
210
 
211
                            > a {
212
                                &:hover {
213
                                    color: lighten($link-color, 11%);
214
                                }
215
                            }
216
                        }
217
 
218
                        &.dropdown-menu-default,
219
                        .dropdown-menu-list {
220
                            > li {
221
                                a {
222
                                    color: $header-top-menu-dropdown-dark-item-font-color;
223
                                    border-bottom: 1px solid $header-top-menu-dropdown-dark-item-border-color !important;
224
 
225
                                    > i {
226
                                        color: $header-top-menu-dropdown-dark-item-icon-color;
227
                                    }
228
 
229
                                    &:hover {
230
                                        background: $header-top-menu-dropdown-dark-item-bg-color-on-hover;
231
                                    }
232
                                }
233
                            }
234
                        }
235
 
236
                        &.dropdown-menu-default {
237
                            > li {
238
                                a {
239
                                    border-bottom: 0 !important;
240
                                }
241
 
242
                                &.divider {
243
                                    background: $header-top-menu-dropdown-dark-default-menu-divider;
244
                                }
245
                            }
246
                        }
247
                    }
248
                }
249
 
250
                > li.dropdown-notification.dropdown-dark {
251
                    .dropdown-menu {
252
                        .dropdown-menu-list {
253
                            > li {
254
                                > a {
255
                                    .time {
256
                                        background: $header-top-menu-dropdown-dark-notification-time-bg-color;
257
                                    }
258
 
259
                                    &:hover {
260
                                        .time {
261
                                            background: darken($header-top-menu-dropdown-dark-notification-time-bg-color, 5%);
262
                                        }
263
                                    }
264
                                }
265
                            }
266
                        }
267
                    }
268
                }
269
            }
270
        }
271
 
272
        /* Header seaech box */
273
        .search-form {
274
            background: $header-bg-color;
275
 
276
            .input-group {
277
                border: 1px solid $header-search-font-color;
278
 
279
                &:hover {
280
                    border-color: darken($header-search-font-color, 5%);
281
                }
282
 
283
                .form-control {
284
                    color: $header-search-font-color;
285
 
286
                    @include placeholder($header-search-placeholder-font-color);
287
                }
288
 
289
                .input-group-btn {
290
                    .btn.submit {
291
                        > i {
292
                            color: $header-search-font-color;
293
                        }
294
                    }
295
                }
296
            }
297
        }
298
 
299
        /* Menu Toggler */
300
        .menu-toggler {
301
            background-image: url(../../img/#{$header-toggler-img});
302
        }
303
 
304
        .page-actions .btn-group .btn-sm.btn-transparent {
305
            background: none;
306
            border: 1px solid lighten($header-bg-color, 10%);
307
            color: lighten($header-bg-color, 20%);
308
 
309
            > i {
310
                color: lighten($header-bg-color, 20%);
311
            }
312
 
313
            &:hover,
314
            &:focus,
315
            &.active {
316
                background: none;
317
                border: 1px solid lighten($header-bg-color, 25%);
318
                color: lighten($header-bg-color, 25%);
319
 
320
                > i {
321
                    color: lighten($header-bg-color, 25%);
322
                }
323
            }
324
        }
325
    }
326
 
327
    /* Page sidebar */
328
 
329
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
330
    .page-sidebar {
331
        background-color: $sidebar-bg-color;
332
 
333
        /* Default sidebar */
334
        .page-sidebar-menu {
335
 
336
            /* 1st level links */
337
            > li {
338
 
339
                &.heading {
340
                    > h3 {
341
                        color: $sidebar-menu-heading-font-color;
342
                    }
343
                }
344
 
345
                > a {
346
                    color: $sidebar-menu-link-font-color;
347
 
348
                    @media (max-width: $screen-sm-max) { /* 991px */
349
                        border-top: 1px solid lighten($sidebar-bg-color, 8%);
350
                    }
351
 
352
                    > i {
353
                        color: $sidebar-menu-link-icon-font-color;
354
                    }
355
 
356
                    > i[class^="icon-"],
357
                    > i[class*="icon-"] {
358
                        @if $theme-name == "light" {
359
                            color: darken($sidebar-menu-link-icon-font-color, 15%);
360
                        } @else if $theme-name == "light2" {
361
                            color: darken($sidebar-menu-link-icon-font-color, 15%);
362
                        } @else {
363
                            color: lighten($sidebar-menu-link-icon-font-color, 5%);
364
                        }
365
                    }
366
 
367
                    > .arrow {
368
                        &:before,
369
                        &.open:before {
370
                            color: $sidebar-menu-arrow-color;
371
                        }
372
                    }
373
                }
374
 
375
                &:hover,
376
                &.open {
377
                    > a {
378
                        background: $sidebar-menu-link-bg-color-on-hover;
379
                        color: $sidebar-menu-link-font-color-on-hover;
380
 
381
                        > i {
382
                            color: $sidebar-menu-link-icon-font-color-on-hover;
383
                        }
384
 
385
                        > .arrow {
386
                            &:before,
387
                            &.open:before {
388
                                color: $sidebar-menu-arrow-color-on-hover;
389
                            }
390
                        }
391
                    }
392
                }
393
 
394
                &.active,
395
                &.active.open {
396
                    > a {
397
                        background: $sidebar-menu-link-bg-color-on-active;
398
                        color: $sidebar-menu-link-font-color-on-active;
399
 
400
                        &:hover {
401
                            background: $sidebar-menu-link-bg-color-on-active;;
402
                        }
403
 
404
                        > i {
405
                            color: $sidebar-menu-link-icon-font-color-on-active;
406
                        }
407
 
408
                        > .arrow {
409
                            &:before,
410
                            &.open:before {
411
                                color: $sidebar-menu-arrow-color-on-active;
412
                            }
413
                        }
414
                    }
415
                }
416
 
417
                &.active {
418
                    > a {
419
                        border-left: 3px solid $sidebar-menu-heading-font-color !important;
420
                        margin-left: -3px;
421
                        padding-left: 15px;
422
                    }
423
                }
424
            }
425
 
426
            /* All links */
427
 
428
            li {
429
                > a {
430
                    > .arrow {
431
                        &:before,
432
                        &.open:before {
433
                            color: $sidebar-menu-arrow-color;
434
                        }
435
                    }
436
                }
437
 
438
                &:hover {
439
                    > a {
440
                        > .arrow {
441
                            &:before,
442
                            &.open:before {
443
                                color: $sidebar-menu-arrow-color-on-hover;
444
                            }
445
                        }
446
                    }
447
                }
448
 
449
                &.active {
450
                    > a {
451
                        > .arrow {
452
                            &:before,
453
                            &.open:before {
454
                                color: $sidebar-menu-arrow-color-on-active;
455
                            }
456
                        }
457
                    }
458
                }
459
            }
460
 
461
            .page-sidebar-closed &:hover {
462
                .sub-menu {
463
                    background: $sidebar-menu-hover-sub-menu-bg-color;
464
                }
465
            }
466
 
467
            .sub-menu {
468
                > li {
469
                    > a {
470
                        color: $sidebar-menu-sub-menu-link-font-color;
471
 
472
                        > i {
473
                            color: $sidebar-menu-sub-menu-link-icon-font-color;
474
                        }
475
 
476
                        > i[class^="icon-"],
477
                        > i[class*="icon-"] {
478
                            @if $theme-name == "light" {
479
                                color: darken($sidebar-menu-sub-menu-link-icon-font-color, 15%);
480
                            } @else if $theme-name == "light2" {
481
                                color: darken($sidebar-menu-sub-menu-link-icon-font-color, 15%);
482
                            } @else {
483
                                color: lighten($sidebar-menu-sub-menu-link-icon-font-color, 5%);
484
                            }
485
                        }
486
 
487
                        > .arrow {
488
                            &:before,
489
                            &.open:before {
490
                                color: $sidebar-menu-arrow-color;
491
                            }
492
                        }
493
                    }
494
 
495
                    &:hover,
496
                    &.open,
497
                    &.active {
498
                        > a {
499
                            color: $sidebar-menu-sub-menu-link-font-color-on-hover;
500
 
501
                            background: $sidebar-menu-sub-menu-link-bg-color-on-hover !important;
502
 
503
                            > i {
504
                                color: $sidebar-menu-sub-menu-link-icon-font-color-on-hover;
505
                            }
506
 
507
                            > .arrow {
508
                                &:before,
509
                                &.open:before {
510
                                    color: $sidebar-menu-arrow-color-on-hover;
511
                                }
512
                            }
513
                        }
514
                    }
515
                }
516
            }
517
        }
518
    }
519
 
520
    /******
521
    Page Footer
522
    ******/
523
 
524
    .page-footer {
525
 
526
        .page-footer-inner {
527
            color: $footer-fluid-font-color;
528
        }
529
 
530
        .page-footer-fixed & {
531
            background-color: $footer-fixed-bg-color;
532
 
533
            .page-footer-inner {
534
                color: $footer-default-font-color;
535
            }
536
        }
537
    }
538
 
539
    .page-boxed {
540
        .page-footer {
541
            .page-footer-inner {
542
                color: $footer-default-font-color;
543
            }
544
 
545
            .page-footer-fixed & {
546
                background-color: $footer-fixed-bg-color;
547
            }
548
        }
549
    }
550
 
551
    @media (min-width: $screen-md-min) { /* 992px */
552
 
553
        /* Sidebar menu closed */
554
        .page-sidebar-menu.page-sidebar-menu-hover-submenu {
555
            li:hover {
556
                > .sub-menu {
557
                    box-shadow: 5px 5px rgba($sidebar-menu-sub-menu-box-shadow-color, 0.2);
558
                }
559
            }
560
        }
561
 
562
        .page-sidebar-menu.page-sidebar-menu-closed {
563
 
564
            > li:hover {
565
                box-shadow: 5px 5px rgba($sidebar-menu-sub-menu-box-shadow-color, 0.2);
566
 
567
                > .sub-menu {
568
                    box-shadow: 5px 5px rgba($sidebar-menu-sub-menu-box-shadow-color, 0.2);
569
                }
570
            }
571
        }
572
 
573
        /* Fixed Sidebar */
574
 
575
        .page-sidebar-fixed:not(.page-footer-fixed) {
576
            .page-content {
577
                border-bottom: 0;
578
            }
579
 
580
            .page-footer {
581
                .page-footer-inner {
582
                    color: #333;
583
                }
584
            }
585
        }
586
 
587
        /* Boxed Layout */
588
 
589
        .page-boxed {
590
 
591
            /* Page container */
592
            .page-container {
593
                background-color: $bg-color;
594
            }
595
 
596
            &.page-sidebar-reversed {
597
                .page-container {
598
                    border-left: 0;
599
                }
600
            }
601
 
602
            &.page-sidebar-fixed {
603
                .page-container {
604
                    border-left: 0;
605
                    border-bottom: 0;
606
                }
607
            }
608
 
609
            &.page-sidebar-reversed.page-sidebar-fixed {
610
                .page-container {
611
                    border-left: 0;
612
                    border-right: 0;
613
                    border-bottom: 0;
614
                }
615
            }
616
        }
617
 
618
         /* Sidebar Menu Wirh Hoverable Submenu */
619
 
620
        .page-sidebar-menu-hover-submenu {
621
            li {
622
                &:hover {
623
                    a {
624
                        > .arrow {
625
                            border-right:8px solid $sidebar-menu-hover-sub-menu-bg-color;
626
 
627
                            .page-sidebar-reversed & {
628
                                border-left:8px solid $sidebar-menu-hover-sub-menu-bg-color;
629
                            }
630
                        }
631
                    }
632
 
633
                    > .sub-menu {
634
                        background: $sidebar-menu-hover-sub-menu-bg-color !important;
635
                    }
636
                }
637
            }
638
        }
639
    }
640
 
641
    @media (max-width: $screen-sm-max) { /* 991px */
642
        .page-header.navbar {
643
            padding: 0;
644
 
645
            /* Top menu */
646
            .top-menu {
647
 
648
                .navbar-nav {
649
                    > li.dropdown {
650
                        > .dropdown-toggle:hover {
651
                            background-color: darken($header-top-menu-bg-hover-color, 1%);
652
                        }
653
                    }
654
                }
655
            }
656
        }
657
    }
658
 
659
    @media (max-width: $screen-xs-max) { /* 767px */
660
 
661
        .page-header.navbar {
662
             background: $header-bg-color;
663
             border-bottom: 1px solid $header-mobile-menu-border;
664
 
665
            /* Top menu */
666
            .page-top {
667
                background: $header-bg-color;
668
            }
669
 
670
            .top-menu {
671
 
672
                .navbar-nav {
673
                    > li.dropdown {
674
                        > .dropdown-toggle:hover {
675
                            background-color: darken($header-top-menu-bg-hover-color, 3%);
676
                        }
677
                    }
678
                }
679
            }
680
        }
681
    }
682
 
683
/****
684
 CSS3 Spinner Bar
685
****/
686
 
687
.page-spinner-bar > div,
688
.block-spinner-bar > div {
689
    background: lighten($brand-main-color, 5%);
690
}
691