Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1
/*--------------------------------------------------
2
	[Widgets]
3
----------------------------------------------------*/
4
 
5
//##  Widget Colors
6
$widget-color-white:                #fff !default;
7
$widget-color-purple:               #9a7caf !default;
8
$widget-color-purple-dark:          #4b365a !default;
9
$widget-color-purple-light:         #674d79 !default;
10
$widget-color-green:                #4db3a4 !default;
11
$widget-color-red:                  #f36a5a !default;
12
$widget-color-blue:                 #5b9bd1 !default;
13
$widget-color-gray:                 #323c45 !default;
14
$widget-color-gray-dark:            #144f57 !default;
15
$widget-color-heading:              #a1afbb !default;
16
$widget-color-title:                #3e4f5e !default;
17
$widget-color-title-light:          #8e9daa !default;
18
$widget-color-fb:                   #475e98 !default;
19
$widget-color-tw:                   #55acee !default;
20
$widget-color-placeholder:          lighten($widget-color-red, 50%) !default;
21
 
22
//##  Widget Font Size
23
$widget-font-size-sm:               14px !default;
24
$widget-font-size-md:               21px !default;
25
$widget-font-size-lg:               20px !default;
26
 
27
//##  Widget Space Size
28
$widget-space-sm-size:              10px !default;
29
$widget-space-md-size:              20px !default;
30
$widget-space-lg-size:              30px !default;
31
 
32
//##  Widget Height Size
33
$widget-height-size-xs:             250px !default;
34
$widget-height-size-sm:             300px !default;
35
$widget-height-size-md:             350px !default;
36
$widget-height-size-bg:             420px !default;
37
$widget-height-size-lg:             500px !default;
38
 
39
/*** Widget Background Colors ***/
40
.widget-bg-color-purple { background: $widget-color-purple; }
41
.widget-bg-color-purple-dark { background: $widget-color-purple-dark; }
42
.widget-bg-color-purple-light { background: $widget-color-purple-light; }
43
.widget-bg-color-green { background: $widget-color-green; }
44
.widget-bg-color-red { background: $widget-color-red; }
45
.widget-bg-color-blue { background: $widget-color-blue; }
46
.widget-bg-color-gray { background: $widget-color-gray; }
47
.widget-bg-color-gray-dark { background: $widget-color-gray-dark; }
48
.widget-bg-color-white { background: $widget-color-white; }
49
.widget-bg-color-dark { background: $widget-color-title; }
50
.widget-bg-color-dark-light { background: $widget-color-title-light; }
51
.widget-bg-color-fb { background: $widget-color-fb; }
52
.widget-bg-color-tw { background: $widget-color-tw; }
53
 
54
/*** Widget Title Colors ***/
55
.widget-title-color-purple { color: $widget-color-purple; }
56
.widget-title-color-purple-dark { color: $widget-color-purple-dark; }
57
.widget-title-color-purple-light { color: $widget-color-purple-light; }
58
.widget-title-color-green { color: $widget-color-green; }
59
.widget-title-color-red { color: $widget-color-red; }
60
.widget-title-color-blue { color: $widget-color-blue; }
61
.widget-title-color-gray { color: $widget-color-gray; }
62
.widget-title-color-gray-dark { color: $widget-color-gray-dark; }
63
.widget-title-color-white { color: $widget-color-white; }
64
.widget-title-color-dark { color: $widget-color-title; }
65
.widget-title-color-dark-light { color: $widget-color-title-light; }
66
.widget-title-color-fb { color: $widget-color-fb; }
67
.widget-title-color-tw { color: $widget-color-tw; }
68
 
69
.overflow-h {
70
    overflow: hidden;
71
}
72
 
73
 
74
/*** Widget Carousel ***/
75
.widget-carousel {
76
    .carousel-indicators {
77
        left: -18%;
78
        bottom: 10px;
79
        margin-left: 0;
80
    }
81
 
82
    .carousel-indicators-red {
83
        > li {
84
            border-color: $widget-color-red;
85
 
86
            &.active {
87
                background: $widget-color-red;
88
            }
89
        }
90
    }
91
}
92
 
93
/*** Widget Gradient ***/
94
.widget-gradient {
95
    position: relative;
96
    min-height: $widget-height-size-md;
97
    overflow: hidden;
98
    background-size: cover;
99
    background-position:  50% 50%;
100
 
101
    border-radius: $general-border-radius;
102
 
103
	.widget-gradient-body {
104
		position: absolute;
105
		top: 0;
106
		left: 0;
107
		right: 0;
108
		bottom: 0;
109
		width: auto;
110
		height: auto;
111
		padding: $widget-space-md-size;
112
 
113
        .widget-gradient-title {
114
            font-size: $widget-font-size-md;
115
            font-weight: 600;
116
            color: $widget-color-white;
117
            margin: 0;
118
        }
119
 
120
		.widget-gradient-body-actions {
121
			position: absolute;
122
			right: 20px;
123
			bottom: 20px;
124
			padding: 0;
125
			margin: 0;
126
 
127
			li {
128
				font-size: $widget-font-size-sm;
129
				padding: 0 0 0 8px;
130
 
131
				&:first-child {
132
					padding-left: 0;
133
				}
134
 
135
				a {
136
					color: $widget-color-white;
137
 
138
					&:hover {
139
						color: $widget-color-heading;
140
						text-decoration: none;
141
					}
142
				}
143
			}
144
		}
145
	}
146
}
147
 
148
/*** Widget Gradient ***/
149
.widget-wrap-img {
150
    border-radius: $general-border-radius;
151
    position: relative;
152
    min-height: $widget-height-size-md;
153
	padding: $widget-space-md-size;
154
 
155
    .widget-wrap-img-title {
156
        font-size: $widget-font-size-md;
157
        font-weight: 600;
158
        color: $widget-color-title;
159
        margin: 0 0 20px;
160
    }
161
 
162
	.widget-wrap-img-element {
163
        position: absolute;
164
        bottom: 0;
165
        right: 0;
166
	}
167
}
168
 
169
/*** Widget Tab ***/
170
.widget-tab {
171
    min-height: $widget-height-size-bg;
172
    border-radius: $general-border-radius;
173
 
174
	.nav-tabs {
175
        margin: 0;
176
        border-color: #eff1f3;
177
 
178
        > li {
179
        	margin: 0 10px;
180
 
181
        	&:first-child {
182
        		margin-left: 20px;
183
        	}
184
 
185
            > a {
186
                border: 0;
187
                font-weight: bold;
188
                color: $widget-color-title-light;
189
                text-transform: uppercase;
190
                padding: 20px 0;
191
 
192
                > i {
193
                    color: $widget-color-title-light;
194
                }
195
            }
196
 
197
            &.open,
198
            &:hover {
199
                border-bottom: 1px solid $widget-color-red;
200
 
201
                > a {
202
                    border: 0;
203
                    background: inherit;
204
                    color: $widget-color-red;
205
 
206
                    > i {
207
                        color: $widget-color-red;
208
                    }
209
                }
210
            }
211
 
212
            &.active {
213
                border-bottom: 1px solid $widget-color-red;
214
                position: relative;
215
 
216
                > a {
217
                    border: 0;
218
                    color: $widget-color-red;
219
 
220
                    > i {
221
                        color: $widget-color-red;
222
                    }
223
                }
224
            }
225
        }
226
    }
227
 
228
	.tab-content {
229
		padding: $widget-space-md-size;
230
		color: $widget-color-title-light;
231
	}
232
 
233
    .slimScrollBar {
234
        right: 10px !important;
235
        margin-top: 17px !important;
236
        margin-bottom: 17px !important;
237
    }
238
}
239
 
240
/*** Widget News ***/
241
.widget-news {
242
	overflow: hidden;
243
    margin-right: 10px;
244
    border-radius: $general-border-radius;
245
 
246
	.widget-news-left-elem {
247
		float: left;
248
		width: 100px;
249
		height: auto;
250
		margin-right: 15px;
251
	}
252
 
253
	.widget-news-right-body {
254
		overflow: hidden;
255
 
256
		.widget-news-right-body-title {
257
			font-size: 16px;
258
			font-weight: 600;
259
			color: #3e4f5e;
260
			margin: 0 0 5px;
261
			clear: both;
262
 
263
			.label {
264
				float: right;
265
				font-weight: 600;
266
				background: $widget-color-heading;
267
				border-radius: 3px !important;
268
			}
269
		}
270
 
271
		p {
272
			font-size: 13px;
273
		}
274
	}
275
}
276
 
277
/*** Widget Thumb ***/
278
.widget-thumb {
279
	padding: $widget-space-md-size;
280
    border-radius: $general-border-radius;
281
 
282
    &.bordered {
283
        border: 1px solid $general-panel-border-color;
284
    }
285
 
286
	.widget-thumb-heading {
287
        font-size: $widget-font-size-sm;
288
		font-weight: bold;
289
        color: $widget-color-title-light;
290
		margin: 0 0 20px 0;
291
	}
292
 
293
	.widget-thumb-wrap {
294
		overflow: hidden;
295
 
296
		.widget-thumb-icon {
297
			float: left;
298
			width: 60px;
299
			height: 60px;
300
			display: inline-block;
301
            font-size: $widget-font-size-lg;
302
			line-height: 41px;
303
			color: $widget-color-white;
304
			text-align: center;
305
			padding: 10px;
306
			margin-right: 15px;
307
		}
308
	}
309
 
310
	.widget-thumb-body {
311
		overflow: hidden;
312
 
313
        .widget-thumb-subtitle {
314
            padding-top: 2px;
315
			display: block;
316
            font-size: $widget-font-size-sm;
317
			font-weight: 600;
318
            color: $widget-color-title-light;
319
        }
320
 
321
        .widget-thumb-body-stat {
322
            display: block;
323
            font-size: 30px;
324
            font-weight: 600;
325
            color: $widget-color-title;
326
        }
327
	}
328
}
329
 
330
/*** Widget Socials ***/
331
.widget-socials {
332
    border-radius: $general-border-radius;
333
    min-height: $widget-height-size-xs;
334
    padding: $widget-space-md-size;
335
 
336
    .widget-socials-title {
337
        font-size: 25px;
338
        font-weight: 700;
339
        line-height: 1.4;
340
        color: $widget-color-white;
341
        margin: 0 0 20px;
342
    }
343
 
344
    .widget-social-subtitle {
345
        color: $widget-color-white;
346
        font-weight: 200;
347
        line-height: 1.4;
348
 
349
        a {
350
            color: $widget-color-white;
351
        }
352
    }
353
 
354
    .widget-socials-paragraph {
355
        display: block;
356
        color: #65727d;
357
    }
358
 
359
    %widget-social-icon {
360
        font-size: 30px;
361
        margin: 30px 0;
362
    }
363
    .widget-social-icon-fb {
364
        @extend %widget-social-icon;
365
        color: #2b3f72;
366
    }
367
    .widget-social-icon-tw {
368
        @extend %widget-social-icon;
369
        color: #3686c3;
370
    }
371
}
372
 
373
/*** Widget Comments ***/
374
.widget-comments {
375
    min-height: $widget-height-size-bg;
376
}
377
 
378
/*** Widget Media ***/
379
.widget-media {
380
    border-radius: $general-border-radius;
381
    border-bottom: 1px solid #f6f9fc;
382
    overflow: hidden;
383
    padding-bottom: 15px;
384
    margin-bottom: 15px;
385
 
386
    .widget-media-elements {
387
        float: left;
388
        margin-right: 20px;
389
    }
390
 
391
    .widget-media-avatar {
392
        width: 55px;
393
        height: 55px;
394
        display: block;
395
    }
396
 
397
    .widget-btn-default {
398
        display: inline-block;
399
        font-size: 12px;
400
        color: #96a2b1;
401
        border: 1px solid #ebf0f6;
402
        padding: 3px 10px;
403
 
404
        .widget-btn-icon {
405
            line-height: 1.5;
406
        }
407
 
408
        &:hover {
409
            background: #ebf0f6;
410
            text-decoration: none;
411
        }
412
    }
413
 
414
    .widget-btn-red {
415
        display: inline-block;
416
        font-size: 12px;
417
        color: #f36a5a;
418
        border: 1px solid #ebf0f6;
419
        padding: 3px 10px;
420
 
421
        .widget-btn-icon {
422
            line-height: 1.5;
423
        }
424
 
425
        &:hover {
426
            color: $widget-color-white;
427
            background: #f36a5a;
428
            text-decoration: none;
429
        }
430
    }
431
 
432
    .widget-btn-blue {
433
        display: inline-block;
434
        font-size: 12px;
435
        color: $widget-color-white;
436
        border: 1px solid #ebf0f6;
437
        padding: 3px 10px;
438
        background: $link-color;
439
 
440
        .widget-btn-icon {
441
            line-height: 1.5;
442
        }
443
 
444
        &:hover {
445
            color: $link-color;
446
            background: $widget-color-white;
447
            text-decoration: none;
448
        }
449
    }
450
 
451
    .widget-media-body {
452
        overflow: hidden;
453
 
454
        .widget-media-body-title {
455
            font-size: 15px;
456
            font-weight: 600;
457
            color: #5b9bd1;
458
            margin: 0 0 7px;
459
        }
460
 
461
        .widget-media-body-subtitle {
462
            font-size: 13px;
463
            color: #7e8c9e;
464
        }
465
    }
466
}
467
 
468
/*** Widget Blog ***/
469
.widget-blog {
470
    border-radius: $general-border-radius;
471
    background: $widget-color-white;
472
    padding: $widget-space-md-size;
473
    background-position: center center;
474
    background-size: cover;
475
 
476
    padding-top: 30px;
477
 
478
    .widget-blog-heading {
479
        position: relative;
480
        margin-bottom: 30px;
481
 
482
        &:before {
483
            position: absolute;
484
            bottom: -15px;
485
            left: 50%;
486
            width: 50px;
487
            height: 1px;
488
            border-width: 1px;
489
            background: $widget-color-title-light;
490
            margin-left: -25px;
491
            content: " ";
492
        }
493
    }
494
 
495
    .widget-blog-title {
496
        font-size: $widget-font-size-lg;
497
        font-weight: 400;
498
        color: $widget-color-title;
499
        margin: 0 0 15px;
500
 
501
        a {
502
            color: $widget-color-title;
503
        }
504
    }
505
 
506
    .widget-blog-subtitle {
507
        display: block;
508
        font-size: 13px;
509
        color: $widget-color-title-light;
510
        letter-spacing: 3px;
511
    }
512
 
513
    .btn-widget-purple {
514
        display: inline-block;
515
        font-size: 13px;
516
        color: $widget-color-title-light;
517
        border: 1px solid $widget-color-title-light;
518
        padding: 7px 17px;
519
 
520
        &:hover {
521
            color: $widget-color-white;
522
            background: $widget-color-title-light;
523
            text-decoration: none;
524
        }
525
    }
526
}
527
 
528
/*** Widget Progress ***/
529
.widget-progress {
530
    min-height: $widget-height-size-bg;
531
 
532
    .widget-progress-element {
533
        border-radius: $general-border-radius;
534
        overflow: hidden;
535
        padding: 30px 10px;
536
    }
537
 
538
    .widget-progress-title {
539
        display: block;
540
        color: $widget-color-white;
541
        margin-bottom: 5px;
542
    }
543
 
544
    .progress {
545
        height: 3px;
546
        @include background-opacity($widget-color-white, .2);
547
        margin-bottom: 0;
548
    }
549
}
550
 
551
 
552
/*** Widget Gradient ***/
553
.widget-map {
554
    border-radius: $general-border-radius;
555
    min-height: $widget-height-size-md;
556
    border-radius: 3px;
557
 
558
    .widget-map-mapplic {
559
        border-top-right-radius: 3px;
560
        border-top-left-radius: 3px;
561
 
562
        .mapplic-container {
563
           background: $widget-color-blue;
564
        }
565
 
566
        .mapplic-layer.world {
567
            > img {
568
                opacity: .3;
569
            }
570
        }
571
    }
572
 
573
    .widget-map-body {
574
        background: $widget-color-white;
575
        border-bottom-right-radius: 3px;
576
        border-bottom-left-radius: 3px;
577
        padding: $widget-space-md-size;
578
        overflow: hidden;
579
    }
580
 
581
    .widget-sparkline-chart {
582
        width: 25%;
583
        float: left;
584
        border-left: 1px solid #e7eff7;
585
        padding: 0 15px;
586
 
587
        &:first-child {
588
            border-left: none;
589
        }
590
 
591
        .widget-sparkline-title {
592
            display: block;
593
            font-size: 12px;
594
            font-weight: 600;
595
            color: $widget-color-heading;
596
        }
597
    }
598
}
599
 
600
/* Widget Map for max-width 480px */
601
@media (max-width: $screen-xs-min) { /* 480px */
602
    .widget-map {
603
        .widget-sparkline-chart {
604
            width: 50%;
605
            border-left: none;
606
            margin-top: 10px;
607
            margin-bottom: 10px;
608
        }
609
    }
610
}
611
 
612
/*** Widget Subscribe ***/
613
.widget-subscribe {
614
    border-radius: $general-border-radius;
615
    min-height: $widget-height-size-xs;
616
    overflow: hidden;
617
    padding: $widget-space-lg-size;
618
 
619
    .widget-subscribe-no {
620
        float: left;
621
        font-size: 67px;
622
        font-weight: 600;
623
        line-height: 1;
624
        color: $widget-color-purple;
625
    }
626
 
627
    .widget-subscribe-title {
628
        font-size: 25px;
629
        font-weight: 700;
630
        line-height: 1.4;
631
        margin: 0 0 15px 45px;
632
    }
633
 
634
    .widget-subscribe-subtitle {
635
        font-size: 15px;
636
        font-weight: 600;
637
    }
638
 
639
    .widget-subscribe-subtitle-link {
640
        color: #cab0dd;
641
    }
642
 
643
    &.widget-subscribe-quote {
644
        position: relative;
645
 
646
        &:before {
647
            position: absolute;
648
            top: 2px;
649
            font-size: 70px;
650
            color: $widget-color-white;
651
            content: "\201C";
652
        }
653
    }
654
}
655
 
656
/* Widget Subscribe for media queries */
657
@media (max-width: $screen-xs-max) {  /* 767px */
658
    .widget-subscribe {
659
        &.widget-subscribe-border {
660
            border-top: 1px solid #f5f8fb;
661
            border-bottom: 1px solid #f5f8fb;
662
            border-right: none;
663
        }
664
    }
665
}
666
 
667
@media (min-width: $screen-sm-min) {  /* 768px */
668
    .widget-subscribe {
669
        &.widget-subscribe-border {
670
            border-left: 1px solid #f5f8fb;
671
            border-right: 1px solid #f5f8fb;
672
        }
673
    }
674
}
675
 
676
@media (min-width: $screen-xs-max) and (max-width: $screen-sm-max) {  /* 767px & 991px */
677
    .widget-subscribe {
678
        &.widget-subscribe-border {
679
            border-left: none;
680
        }
681
 
682
        &.widget-subscribe-border-top {
683
            border-top: 1px solid #f5f8fb;
684
        }
685
    }
686
}
687
 
688
 
689
/*--------------------------------------------------
690
    [Material Design]
691
----------------------------------------------------*/
692
 
693
.page-md {
694
    .widget-bg-color-white,
695
    .widget-map,
696
    .widget-carousel,
697
    .widget-progress-element,
698
    .widget-socials,
699
    .widget-blog {
700
        box-shadow: $general-shadow;
701
    }
702
}