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