Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1
/***
2
Portlets
3
***/
4
 
5
/* Full Screen portlet mode */
6
 
7
.page-portlet-fullscreen {
8
    overflow: hidden;
9
}
10
 
11
/* Basic portlet */
12
 
13
.portlet  {
14
    margin-top: 0px;
15
    margin-bottom: 25px;
16
    padding: 0px;
17
 
18
    @include border-radius($general-border-radius);
19
 
20
    &.portlet-fullscreen {
21
        z-index: $zindex-modal + 10;
22
        margin: 0;
23
        position: fixed;
24
        top:0;
25
        left:0;
26
        bottom:0;
27
        right: 0;
28
        width: 100%;
29
        height: 100%;
30
        background: #fff;
31
 
32
        > .portlet-body {
33
            overflow-y: auto;
34
            overflow-x: hidden;
35
            padding: 0 10px;
36
        }
37
 
38
        > .portlet-title {
39
            padding: 0 10px;
40
        }
41
    }
42
 
43
    > .portlet-title {
44
        border-bottom: 1px solid #eee;
45
        padding: 0;
46
        margin-bottom: 10px;
47
        min-height: 41px;
48
 
49
        @include border-radius($general-border-radius $general-border-radius 0 0);
50
 
51
        @include clearfix();
52
 
53
        > .caption {
54
            float: left;
55
            display: inline-block;
56
            font-size: 18px;
57
            line-height: 18px;
58
            padding: 10px 0;
59
 
60
            &.bold {
61
                font-weight: 400;
62
            }
63
 
64
            > i {
65
                float: left;
66
                margin-top: 4px;
67
                display: inline-block;
68
                font-size: 13px;
69
                margin-right: 5px;
70
                color: #666;
71
 
72
                &.glyphicon {
73
                    margin-top: 2px;
74
                }
75
            }
76
 
77
            > .caption-helper {
78
                padding: 0;
79
                margin: 0;
80
                line-height: 13px;
81
                color: #9eacb4;
82
                font-size: 13px;
83
                font-weight: 400;
84
            }
85
        }
86
 
87
        > .actions {
88
            float: right;
89
            display: inline-block;
90
            padding: 6px 0;
91
 
92
            > .dropdown-menu i {
93
                color: #555555;
94
            }
95
 
96
            > .btn,
97
            > .btn.btn-sm,
98
            > .btn-group > .btn,
99
            > .btn-group > .btn.btn-sm, {
100
                padding: 4px 10px;
101
 
102
                &.btn-default {
103
                    padding: 3px 9px;
104
                }
105
 
106
                font-size: 13px;
107
                line-height: 1.5;
108
 
109
                > i {
110
                    font-size: 13px;
111
                }
112
            }
113
 
114
            .btn-icon-only {
115
                padding: 5px 7px 3px 7px;
116
 
117
                &.btn-default {
118
                    padding: 4px 6px 2px 6px;
119
 
120
                    > i {
121
                        font-size: 14px;
122
                    }
123
 
124
                    &.fullscreen {
125
                        font-family: FontAwesome;
126
                        color: lighten(#8c8c8c, 8%);
127
 
128
                        @if $theme-type == "material-design" {
129
                            padding-top: 4px;
130
                        } @else {
131
                            padding-top: 3px;
132
                        }
133
 
134
 
135
 
136
                        &.btn-sm {
137
                            padding: 3px 3px !important;
138
                            height: 27px;
139
                            width: 27px;
140
                        }
141
 
142
                        &:before {
143
                            content: "\f065";
144
                        }
145
 
146
                        &.on {
147
                            &:before {
148
                                content: "\f066";
149
                            }
150
                        }
151
                    }
152
                }
153
            }
154
        }
155
 
156
        > .tools {
157
            float: right;
158
            display: inline-block;
159
            padding: 12px 0 8px 0;
160
 
161
            > a {
162
                display: inline-block;
163
                height: 16px;
164
                margin-left:5px;
165
                @include opacity(1)
166
            }
167
 
168
            > a.remove {
169
                background-image:url(#{$global-img-path}portlet-remove-icon.png);
170
                background-repeat: no-repeat;
171
                width: 11px;
172
            }
173
 
174
            > a.config {
175
                background-image:url(#{$global-img-path}portlet-config-icon.png);
176
                background-repeat: no-repeat;
177
                width: 12px;
178
            }
179
 
180
            > a.reload {
181
                background-image:url(#{$global-img-path}portlet-reload-icon.png);
182
                width: 13px;
183
            }
184
 
185
            > a.expand {
186
                background-image:url(#{$global-img-path}portlet-expand-icon.png);
187
                width: 14px;
188
                visibility: visible;
189
            }
190
 
191
            > a.collapse {
192
                background-image:url(#{$global-img-path}portlet-collapse-icon.png);
193
                width: 14px;
194
                visibility: visible;
195
            }
196
 
197
            > a.fullscreen {
198
                display: inline-block;
199
                top: -3px;
200
                position: relative;
201
                font-size: 13px;
202
                font-family: FontAwesome;
203
                color: #ACACAC;
204
 
205
                &:before {
206
                    content: "\f065";
207
                }
208
 
209
                &.on {
210
                    &:before {
211
                        content: "\f066";
212
                    }
213
                }
214
            }
215
 
216
            > a:hover {
217
                text-decoration: none;
218
                -webkit-transition: all 0.1s ease-in-out;
219
                -moz-transition: all 0.1s ease-in-out;
220
                -o-transition: all 0.1s ease-in-out;
221
                -ms-transition: all 0.1s ease-in-out;
222
                transition: all 0.1s ease-in-out;
223
 
224
                @include opacity(0.8);
225
            }
226
        }
227
 
228
        > .pagination {
229
            float: right;
230
            display: inline-block;
231
            margin: 2px 0 0 0;
232
            border: 0;
233
            padding: 4px 0;
234
        }
235
 
236
        > .nav-tabs {
237
            background: none;
238
            margin: 1px 0 0 0;
239
            float: right;
240
            display: inline-block;
241
            border: 0;
242
 
243
            > li {
244
                background: none;
245
                margin: 0;
246
                border: 0;
247
 
248
                > a {
249
                    background: none;
250
                    margin: 5px 0 0 1px;
251
                    border: 0;
252
                    padding: 8px 10px;
253
                    color: #fff;
254
                }
255
 
256
                &.active > a,
257
                &:hover > a {
258
                    color: #333;
259
                    background: #fff;
260
                    border: 0;
261
                }
262
            }
263
        }
264
    }
265
 
266
    > .portlet-body {
267
        clear: both;
268
        @include border-radius(0 0 $general-border-radius $general-border-radius);
269
 
270
        p {
271
            margin-top: 0;
272
        }
273
    }
274
 
275
    > .portlet-empty {
276
        min-height: 125px;
277
    }
278
 
279
    &.full-height-content {
280
        margin-bottom: 0;
281
    }
282
}
283
 
284
/* Portlet background colors */
285
 
286
@mixin porlet-background($name, $color) {
287
 
288
    .portlet > .portlet-body.#{$name},
289
    .portlet.#{$name} {
290
        background-color: $color;
291
    }
292
 
293
}
294
 
295
//@include porlet-background("red", $metronic-red);
296
 
297
/* Side bordered portlet */
298
 
299
.portlet.bordered {
300
 
301
    @if $theme-type == "default" {
302
        border-left: 2px solid #e6e9ec !important;
303
    }
304
 
305
    > .portlet-title {
306
        border-bottom: 0;
307
    }
308
}
309
 
310
/* Solid colored portlet */
311
 
312
.portlet.solid {
313
    padding: 0 10px 10px 10px;
314
    border: 0px;
315
 
316
    > .portlet-title {
317
        border-bottom: 0;
318
        margin-bottom: 10px;
319
 
320
        > .caption {
321
            padding: 16px 0 2px 0;
322
        }
323
 
324
        > .actions {
325
            padding: 12px 0 6px 0;
326
        }
327
 
328
        > .tools {
329
            padding: 14px 0 6px 0;
330
        }
331
    }
332
}
333
 
334
@mixin porlet-solid($name, $color) {
335
 
336
    .portlet.solid.#{$name} {
337
 
338
        > .portlet-title,
339
        > .portlet-body {
340
            border: 0;
341
            color: $color;
342
        }
343
 
344
        > .portlet-title {
345
            > .caption {
346
                font-weight: 400;
347
                > i {
348
                    color: $color;
349
                }
350
            }
351
 
352
            > .tools {
353
                > a.remove {
354
                    background-image:url(#{$global-img-path}portlet-remove-icon-white.png);
355
                }
356
 
357
                > a.config {
358
                    background-image:url(#{$global-img-path}portlet-config-icon-white.png);
359
                }
360
 
361
                > a.reload {
362
                    background-image:url(#{$global-img-path}portlet-reload-icon-white.png);
363
                }
364
 
365
                > a.expand {
366
                    background-image:url(#{$global-img-path}portlet-expand-icon-white.png);
367
                }
368
 
369
                > a.collapse {
370
                    background-image:url(#{$global-img-path}portlet-collapse-icon-white.png);
371
                }
372
 
373
                > a.fullscreen {
374
                    color: #fdfdfd;
375
                }
376
            }
377
        }
378
    }
379
}
380
 
381
//@include porlet-solid("red", $metronic-blue-text);
382
 
383
/* Solid bordered portlet */
384
 
385
.portlet.solid.bordered > .portlet-title {
386
  margin-bottom: 10px;
387
}
388
 
389
/* Box portlet */
390
 
391
.portlet.box {
392
    padding:0px !important;
393
 
394
    > .portlet-title {
395
        border-bottom: 0;
396
        padding: 0 10px;
397
        margin-bottom: 0;
398
        color: #fff;
399
 
400
        > .caption {
401
            padding: 11px 0 9px 0;
402
        }
403
 
404
        > .tools {
405
            > a.remove {
406
                background-image:url(#{$global-img-path}portlet-remove-icon-white.png);
407
            }
408
 
409
            > a.config {
410
                background-image:url(#{$global-img-path}portlet-config-icon-white.png);
411
            }
412
 
413
            > a.reload {
414
                background-image:url(#{$global-img-path}portlet-reload-icon-white.png);
415
            }
416
 
417
            > a.expand {
418
                background-image:url(#{$global-img-path}portlet-expand-icon-white.png);
419
            }
420
 
421
            > a.collapse {
422
                background-image:url(#{$global-img-path}portlet-collapse-icon-white.png);
423
            }
424
 
425
            > a.fullscreen {
426
                color: #fdfdfd;
427
            }
428
        }
429
 
430
        > .actions {
431
            padding: 7px 0 5px 0;
432
        }
433
    }
434
 
435
    > .portlet-body {
436
        background-color: #fff;
437
        padding: 15px;
438
    }
439
}
440
 
441
@mixin porlet-box($name, $color, $text-color) {
442
 
443
    .portlet.box.#{$name} {
444
        border: 1px solid lighten($color, 10%);
445
        border-top: 0;
446
 
447
        > .portlet-title {
448
            background-color: $color;
449
 
450
            > .caption {
451
                color: $text-color;
452
                > i {
453
                    color: $text-color;
454
                }
455
            }
456
 
457
            > .actions {
458
                .btn-default {
459
                    background: transparent !important;
460
                    background-color: transparent !important;
461
                    border: 1px solid lighten($color, 22%);
462
                    color: lighten($color, 27%);
463
 
464
                    > i {
465
                        color: lighten($color, 30%);
466
                    }
467
 
468
                    &:hover,
469
                    &:focus,
470
                    &:active,
471
                    &.active {
472
                        border: 1px solid lighten($color, 32%);
473
                        color: lighten($color,37%);
474
                    }
475
 
476
                    @if $theme-type == "material-design" {
477
                        box-shadow: none;
478
 
479
                        &:hover {
480
                            @extend .md-shadow-z-2-hover;
481
                        }
482
 
483
                        &:active {
484
                            @extend .md-shadow-z-3-hover;
485
                        }
486
                    }
487
                }
488
            }
489
        }
490
    }
491
}
492
 
493
//@include porlet-box("red", $metronic-red, $metronic-red-text);
494
 
495
/* Light Portlet */
496
 
497
.portlet.light {
498
    padding: 12px 20px 15px 20px;
499
    background-color: #fff;
500
 
501
    &.bordered {
502
        border: 1px solid $general-panel-border-color !important;
503
 
504
        > .portlet-title {
505
            border-bottom: 1px solid lighten($general-panel-border-color, 2%);
506
        }
507
    }
508
 
509
    &.bg-inverse {
510
        background: $general-panel-bg-color;
511
    }
512
 
513
    > .portlet-title {
514
        padding: 0;
515
        min-height: 48px;
516
 
517
        > .caption {
518
            color: #666;
519
            padding: 10px 0;
520
 
521
            > .caption-subject {
522
                font-size: 16px;
523
            }
524
 
525
            > i {
526
                color: #777;
527
                font-size: 15px;
528
                font-weight: 300;
529
                margin-top: 3px;
530
            }
531
 
532
            &.caption-md {
533
                > .caption-subject {
534
                    font-size: 15px;
535
                }
536
 
537
                > i {
538
                    font-size: 14px;
539
                }
540
            }
541
        }
542
 
543
        > .actions {
544
            padding: 6px 0 14px 0;
545
 
546
            .btn-default {
547
                color: #666;
548
            }
549
 
550
            .btn-icon-only {
551
                height: 27px;
552
                width: 27px;
553
            }
554
 
555
            .dropdown-menu {
556
                li > a {
557
                    color: #555;
558
                }
559
            }
560
        }
561
 
562
        > .inputs {
563
            float: right;
564
            display: inline-block;
565
            padding: 4px 0;
566
 
567
            > .portlet-input {
568
                .input-icon {
569
                    > i {
570
                        font-size: 14px;
571
                        margin-top: 9px;
572
                    }
573
 
574
                    > .form-control {
575
                        height: 30px;
576
                        padding: 2px 26px 3px 10px;
577
                        font-size: 13px;
578
                    }
579
                }
580
 
581
                > .form-control {
582
                    height: 30px;
583
                    padding: 3px 10px;
584
                    font-size: 13px;
585
                }
586
            }
587
        }
588
 
589
        > .pagination {
590
            padding: 2px 0 13px 0;
591
        }
592
 
593
        > .tools {
594
            padding: 10px 0 13px 0;
595
            margin-top: 2px;
596
        }
597
 
598
        > .nav-tabs {
599
            > li {
600
                margin: 0;
601
                padding: 0;
602
 
603
                > a {
604
                    margin: 0;
605
                    padding: 12px 13px 13px 13px;
606
                    font-size: 13px;
607
                    color: #666;
608
                }
609
 
610
                &.active > a,
611
                &:hover > a {
612
                    margin: 0;
613
                    background: none;
614
                    color: #333;
615
                }
616
            }
617
        }
618
    }
619
 
620
    &.form-fit {
621
        padding: 0;
622
 
623
        > .portlet-title {
624
            padding: 17px 20px 10px 20px;
625
            margin-bottom: 0;
626
        }
627
    }
628
 
629
    .portlet-body {
630
        padding-top: 8px;
631
    }
632
 
633
    &.portlet-fullscreen {
634
        > .portlet-body {
635
            padding: 8px 0;
636
        }
637
    }
638
 
639
    &.portlet-fit {
640
        padding: 0;
641
 
642
        > .portlet-title {
643
            padding: 15px 20px 10px 20px;
644
        }
645
 
646
        > .portlet-body {
647
            padding: 10px 20px 20px 20px;
648
        }
649
    }
650
 
651
    &.portlet-fit.portlet-form {
652
        > .portlet-body {
653
            padding: 0;
654
        }
655
 
656
        > .portlet-body {
657
            padding: 0;
658
 
659
            .form-actions {
660
                background: none;
661
            }
662
        }
663
    }
664
 
665
 
666
    &.portlet-datatable.portlet-fit {
667
        > .portlet-body {
668
            padding-top: 10px;
669
            padding-bottom: 25px;
670
        }
671
    }
672
}
673
 
674
.tab-pane {
675
    > p:last-child {
676
        margin-bottom: 0px;
677
    }
678
}
679
 
680
/* Reverse aligned tabs */
681
 
682
.tabs-reversed {
683
    > li {
684
        float: right;
685
        margin-right: 0;
686
 
687
        > a {
688
            margin-right: 0;
689
        }
690
    }
691
}
692
 
693
/* jQuery UI Draggable Portlets */
694
.portlet-sortable:not(.portlet-fullscreen) {
695
    > .portlet-title {
696
        cursor: move;
697
    }
698
}
699
 
700
.portlet-sortable-placeholder {
701
    border: 2px dashed #eee;
702
    margin-bottom: 25px;
703
}
704
 
705
.portlet-sortable-empty {
706
    box-shadow: none !important;
707
    height: 45px;
708
}
709
 
710
.portlet-collapsed {
711
    display: none;
712
}
713
 
714
@media (max-width: $screen-sm-max) { /* 991px */
715
    .portlet-collapsed-on-mobile {
716
        display: none;
717
    }
718
}
719
 
720
@if $theme-type == "material-design" {
721
    .portlet {
722
        box-shadow: $general-shadow;
723
    }
724
}
725
 
726
/***
727
Custom colored portlets
728
***/
729
 
730
@each $name, $colors in $component-colors {
731
    @include porlet-background($name, map-get($colors, base));
732
    @include porlet-solid($name, map-get($colors, font));
733
    @include porlet-box($name, map-get($colors, base), map-get($colors, font));
734
}