Project

General

Profile

1
// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */
2

    
3
@import "uikit/uikit.less";
4

    
5
/* ========================================================================
6
   Warp theme
7
 ========================================================================== */
8

    
9

    
10
/* Theme Variables
11
 ========================================================================== */
12

    
13
// Block
14
@theme-block-divider-icon:                          "";
15
@theme-block-divider-left:                          50%;
16
@theme-block-divider-width:                         100px;
17
@theme-block-divider-large-width:                   150px;
18
@theme-block-divider-height:                        1px;
19
@theme-block-divider-background:                    @global-border;
20
@theme-block-primary-divider-background:            @global-contrast-color;
21
@theme-block-secondary-divider-background:          @global-border;
22
@theme-block-divider-font-size:                     @theme-block-divider-height;
23
@theme-block-divider-color:                         rgba(0,0,0,0);
24
@theme-block-primary-divider-color:                 rgba(0,0,0,0);
25
@theme-block-secondary-divider-color:               rgba(0,0,0,0);
26

    
27
// Logo
28
@theme-logo-color:                                  #444;
29
@theme-logo-footer-color:                           #444;
30

    
31
// Headerbar
32
@theme-headerbar-padding-horizontal:                30px;
33
@theme-headerbar-padding-large-horizontal:          80px;
34

    
35
// Blog
36
@theme-article-featured-image-height:               450px;
37
@theme-article-divider-width:                       100px;
38
@theme-article-divider-height:                      1px;
39
@theme-article-divider-background:                  @global-border;
40
@theme-article-date-font-size:                      68px;
41
@theme-article-date-line-height:                    @theme-article-date-font-size;
42

    
43
// Totop Scroller
44
@theme-totop-scroller-color:                        @global-muted-color;
45
@theme-toptop-scroller-hover-color:                 @global-color;
46

    
47
// Container width
48
@theme-container-small-max-width:                   980px;
49

    
50
// Search
51
@theme-dropdown-search-navbar-margin-top:           15px;
52

    
53
// Theme components
54
@theme-margin-large:                                40px;
55

    
56
@theme-blockquote-font-size:                        18px;
57
@theme-blockquote-line-height:                      30px;
58
@theme-blockquote-large-font-size:                  22px;
59
@theme-blockquote-large-line-height:                34px;
60

    
61
@theme-switcher-title-overlay-padding-vertical:     10px;
62
@theme-switcher-title-overlay-padding-horizontal:   30px;
63

    
64
@theme-list-line-dotted-padding:                    25px;
65
@theme-list-line-dotted-font-family:                @global-alt-font-family;
66
@theme-list-line-dotted-text-transform:             @global-text-transform;
67
@theme-list-line-dotted-border-width:               2px;
68
@theme-list-line-dotted-border:                     fade(@global-muted-color,30%);
69

    
70
// Widgetkit
71
@theme-popover-toggle-width:                        26px;
72
@theme-popover-dropdown-width:                      240px;
73

    
74

    
75
/* Layout
76
 ========================================================================== */
77

    
78
//
79
// Blocks
80
//
81

    
82
// Adjust padding between equally colored blocks
83
.uk-block-default:not(.tm-block-padding-collapse) + .uk-block-default:not(.tm-block-divider),
84
.uk-block-muted:not(.tm-block-padding-collapse) + .uk-block-muted:not(.tm-block-divider),
85
.uk-block-primary:not(.tm-block-padding-collapse) + .uk-block-primary:not(.tm-block-divider),
86
.uk-block-secondary:not(.tm-block-padding-collapse) + .uk-block-secondary:not(.tm-block-divider) { padding-top: 0; }
87

    
88
// Add padding to article, if main top or main bottom are published
89
.tm-main-top + .tm-content,
90
.tm-content + .tm-main-bottom {
91

    
92
    padding-top:  @grid-gutter-vertical;
93

    
94
    // Large screen
95
    @media (min-width: @breakpoint-xlarge) { padding-top:  @grid-gutter-large-vertical; }
96

    
97
}
98

    
99
// Block padding collapse
100
.tm-block-padding-collapse {
101
    padding-top: 0;
102
    padding-bottom: 0;
103
}
104

    
105
// Block divider
106

    
107
.tm-block-divider { position: relative; }
108

    
109
.tm-block-divider:before {
110
    content: @theme-block-divider-icon;
111
    position: absolute;
112
    top: -(@theme-block-divider-height / 2);
113
    left: @theme-block-divider-left;
114
    margin-left: -(@theme-block-divider-width / 2);
115
    width: @theme-block-divider-width;
116
    height: @theme-block-divider-height;
117
    background: @theme-block-divider-background;
118
    font-family: 'Chester Divider';
119
    font-size: @theme-block-divider-font-size;
120
    line-height: @theme-block-divider-font-size;
121
    color: @theme-block-divider-color;
122

    
123
    // Large screen and bigger
124
    @media (min-width: @breakpoint-xlarge) {
125
        margin-left: -(@theme-block-divider-large-width / 2);
126
        width: @theme-block-divider-large-width;
127
    }
128

    
129
}
130

    
131
.uk-block-primary.tm-block-divider:before {
132
    background: @theme-block-primary-divider-background;
133
    color: @theme-block-primary-divider-color
134
}
135

    
136
.uk-block-secondary.tm-block-divider:before {
137
    background: @theme-block-secondary-divider-background;
138
    color: @theme-block-secondary-divider-color;
139
}
140

    
141

    
142
// Container width
143
.tm-container-small { max-width: @theme-container-small-max-width; }
144

    
145
//
146
// Logo
147
//
148

    
149
svg#tm-logo > path,
150
svg#tm-logo-small > path { fill: @theme-logo-color; }
151
svg#tm-logo-footer > path { fill: @theme-logo-footer-color; }
152

    
153
//
154
// Headerbar
155
//
156

    
157
.tm-headerbar {
158
    position: relative;
159
    padding: 0 @utility-container-padding-horizontal;
160
}
161

    
162
// Large screen and bigger
163
@media (min-width: @breakpoint-xlarge) { .tm-headerbar { padding: 0 @utility-container-large-padding-horizontal; } }
164

    
165
// Headerbar position
166
.tm-panel-headerbar {
167
    padding-top: @global-margin-large;
168
    padding-bottom: @global-margin-large;
169
}
170

    
171
// Search
172
.tm-search {
173
    position: absolute;
174
    right: @theme-headerbar-padding-horizontal;
175
    top: 50%;
176
}
177

    
178
.uk-dropdown-search {
179
    margin-top: @theme-dropdown-search-navbar-margin-top;
180
    text-align: left !important;
181
}
182

    
183
// Large screen and bigger
184
@media (min-width: @breakpoint-xlarge) { .tm-search { right: @theme-headerbar-padding-large-horizontal } }
185

    
186
//
187
// Toolbar
188
//
189

    
190
.tm-toolbar {
191
    padding: 10px @theme-headerbar-padding-horizontal;
192
    background: @global-muted-background;
193
}
194

    
195
@media (min-width: @breakpoint-xlarge) { .tm-toolbar { padding: 10px @theme-headerbar-padding-large-horizontal } }
196

    
197
//
198
// Navbar
199
//
200

    
201
.tm-navbar { display: inline-block; }
202
.tm-navbar .uk-dropdown { text-align: left; }
203

    
204
.tm-navbar-left {
205
  position: absolute;
206
  top: 0;
207
  left: @theme-headerbar-padding-horizontal;
208
  bottom: 0;
209
}
210

    
211
.tm-navbar-left .uk-navbar-toggle { padding-left: 0; }
212

    
213
.tm-navbar-right {
214
  position: absolute;
215
  top: 0;
216
  right: @theme-headerbar-padding-horizontal;
217
  bottom: 0;
218
}
219

    
220
@media (min-width: @breakpoint-xlarge) {
221

    
222
    .tm-navbar-left { left: @theme-headerbar-padding-large-horizontal }
223
    .tm-navbar-right { right: @theme-headerbar-padding-large-horizontal }
224

    
225
}
226

    
227
@media (min-width: @breakpoint-large) {
228

    
229
    .uk-sticky-placeholder .tm-navbar-default.tm-navbar-container:not(.uk-active) .tm-navbar-left { display: none; }
230
    .uk-sticky-placeholder .tm-navbar-default.tm-navbar-container:not(.uk-active) .tm-navbar-right { display: none; }
231

    
232
}
233

    
234
.tm-navbar-container {
235
    padding-top: @global-margin;
236
    padding-bottom: @global-margin;
237
}
238

    
239
[data-uk-sticky].uk-active { z-index: 1030; }
240

    
241
//
242
// To-top scroller
243
//
244

    
245
.tm-footer { position: relative; }
246

    
247
.tm-totop-scroller {
248

    
249
    display: inline-block;
250
    top: 0;
251
    right: 0;
252
    width: 16px;
253
    height: 30px;
254
    color: @theme-totop-scroller-color;
255

    
256
    // Tablet and desktop
257
    @media (min-width: @breakpoint-medium) { position: absolute; }
258

    
259
    // Phone only
260
    @media (max-width: @breakpoint-small-max) { margin-top: @global-margin; }
261

    
262
    &:hover,
263
    &:focus {
264
        color: @theme-toptop-scroller-hover-color;
265
        text-decoration: none;
266
    }
267

    
268
    &:before {
269
        font-family: "Chester";
270
        content: "\e905";
271
        font-size: 9px;
272
    }
273

    
274
}
275

    
276
/* Blog
277
 ========================================================================== */
278

    
279
.tm-article-blog {
280

    
281
    .tm-leading-article + .uk-grid { margin-top: 0; }
282

    
283
    // Tablets and bigger
284
    @media (max-width: @breakpoint-small-max) {
285

    
286
        .tm-article > .uk-grid { margin-left: 0; }
287
        .tm-article-container { padding-left: 0; }
288

    
289
    }
290

    
291
    .tm-leading-article + * .tm-article:first-child,
292
    .tm-article + .tm-article {
293

    
294
        position: relative;
295
        margin-top: @block-padding-vertical;
296

    
297
        // Tablets and bigger
298
        @media (min-width: @breakpoint-medium) { margin-top: @block-large-padding-vertical-medium; }
299

    
300
        // Desktop and bigger
301
        @media (min-width: @breakpoint-large) { margin-top: @block-large-padding-vertical-large; }
302

    
303
    }
304

    
305
    .tm-article-date {
306
        position: absolute;
307
        margin-right: @global-margin-large;
308
    }
309

    
310
    // Desktop
311
    @media (min-width: @breakpoint-large) {
312

    
313
        .tm-article-date + div { padding-left: (@global-grid-gutter + @theme-article-date-line-height); }
314

    
315
    }
316

    
317
    [class*='tm-article-date-'] {
318
        display: block;
319
        font-size: @theme-article-date-font-size;
320
        line-height: @theme-article-date-line-height;
321
        color: @global-heading-color;
322
    }
323

    
324
    // Tablets portrait
325
    @media (min-width: @breakpoint-medium) and (max-width: @breakpoint-medium-max) {
326

    
327
        .tm-article-date + .uk-grid { padding-left: @grid-gutter-horizontal; }
328

    
329
    }
330

    
331
    .tm-featured-image { min-height: @theme-article-featured-image-height; }
332

    
333
    .tm-article-header {
334

    
335
        position: relative;
336
        padding-bottom: @global-grid-gutter;
337
        margin-bottom: @global-grid-gutter;
338

    
339
        // Large screen and bigger
340
        @media (min-width: @breakpoint-xlarge) {
341
            padding-bottom: @global-grid-gutter-large;
342
            margin-bottom: @global-grid-gutter-large;
343
        }
344

    
345
        &:before {
346
            position: absolute;
347
            content: '';
348
            bottom: 0;
349
            width: @theme-article-divider-width;
350
            height: @theme-article-divider-height;
351
            background: @theme-article-divider-background;
352
        }
353

    
354
    }
355

    
356
    // Blog in multi-column layout
357
    .tm-article-column-item .uk-grid-width-medium-1-2 > div { width: 100%; }
358
    .tm-article-column-item .tm-article-container { padding-left: 0; }
359

    
360
    // Featured Image right
361
    .uk-article > .uk-grid > .uk-flex-order-last-medium + .tm-article-container {
362

    
363
        padding-right: @grid-gutter-horizontal;
364

    
365
        // Large screen
366
        @media (min-width: @breakpoint-xlarge) { padding-right: @grid-gutter-large-horizontal; }
367

    
368
    }
369

    
370
}
371

    
372
// Pagination margin
373
.uk-grid + .uk-pagination { margin-top: @utility-margin-large; }
374

    
375

    
376
/* Theme components
377
 ========================================================================== */
378

    
379
//
380
// Sidepanel
381
//
382

    
383
.tm-sidepanel {
384

    
385
    position: fixed;
386
    z-index: 999;
387
    margin-top: @global-margin-large;
388
    transition: all .4s ease-in;
389
    -webkit-transform: translateX(-100%);
390
    transform: translateX(-100%);
391

    
392
    &.uk-open {
393
        -webkit-transform: translateX(0);
394
        transform: translateX(0);
395
    }
396

    
397
    > .uk-button {
398

    
399
        position: fixed;
400
        top: 0;
401

    
402
        &:focus { background-color: @button-primary-background; }
403
        &:focus:hover { background-color: @button-primary-hover-background; }
404

    
405
        &.uk-visible-small { left: 100%; }
406

    
407
        &.uk-hidden-small {
408
            right: 0;
409
            -webkit-transform: rotateZ(-90deg);
410
            transform: rotateZ(-90deg);
411
            -webkit-transform-origin: 100% 0;
412
            transform-origin: 100% 0;
413
        }
414

    
415
    }
416

    
417
}
418

    
419
//
420
// Alternative Font
421
//
422

    
423
.tm-alt-font {
424
    font-family: @global-alt-font-family;
425
    text-transform: @global-text-transform;
426
}
427

    
428
//
429
// Blockquote
430
//
431

    
432
.tm-blockquote {
433

    
434
    padding: 0;
435
    border-left: none;
436
    font-style: normal;
437

    
438
    p {
439

    
440
        font-size: @theme-blockquote-font-size;
441
        line-height: @theme-blockquote-line-height;
442
        color: @global-color !important;
443

    
444
        // Large screen
445
        @media (min-width: @breakpoint-xlarge) {
446
            font-size: @theme-blockquote-large-font-size;
447
            line-height: @theme-blockquote-large-line-height;
448
        }
449

    
450
    }
451

    
452
    small {
453

    
454
        display: block;
455
        margin-top: @global-margin-large !important;
456
        font-size: @text-small-font-size;
457
        color: @global-muted-color;
458

    
459
        // Large screen
460
        @media (min-width: @breakpoint-xlarge) { font-size: @global-font-size;}
461

    
462
    }
463

    
464
}
465

    
466
//
467
// Panel subtitle
468
//
469

    
470
.tm-panel-subtitle {
471
    margin: @global-margin-large auto;
472
    font-family: @article-lead-font-family;
473
    text-transform: @article-lead-text-transform;
474
    color: @article-lead-color;
475
    font-size: @article-lead-font-size;
476
    line-height: @article-lead-line-height;
477
}
478

    
479
//
480
// Pricing grid
481
//
482

    
483
.tm-price {
484

    
485
    text-align: right;
486

    
487
    > h4 {
488
        margin-bottom: 0;
489
        font-size: @base-h1-font-size;
490
        line-height: @base-h1-font-size;
491
    }
492

    
493
    .tm-sup {
494
        top: -20px;
495
        font-size: @base-h3-font-size;
496
    }
497

    
498
    .tm-alt-font {
499
        margin-top: 0;
500
        font-size: @text-small-font-size;
501
        color: @global-muted-color;
502
    }
503

    
504
}
505

    
506
//
507
// List angle
508
//
509

    
510
.tm-list-angle > li {
511

    
512
    position: relative;
513
    padding-left: 30px;
514

    
515
    &:before {
516
        position: absolute;
517
        left: 0;
518
        font-family: 'FontAwesome';
519
        content: "\f105";
520
    }
521

    
522
}
523

    
524
//
525
// Large margin
526
//
527

    
528
.tm-margin-large {
529
    margin-top: @theme-margin-large;
530
    margin-bottom: @theme-margin-large;
531
}
532

    
533
.tm-margin-large-top { margin-top: @theme-margin-large !important; }
534
.tm-margin-large-bottom { margin-bottom: @theme-margin-large !important; }
535

    
536
//
537
// List line dotted
538
//
539

    
540
.tm-list-line-dotted > li {
541

    
542
    padding: @theme-list-line-dotted-padding 0;
543

    
544
    // Phone landscape and bigger
545
    @media (min-width: @breakpoint-small) {
546
        display: -ms-flexbox;
547
        display: -webkit-flex;
548
        display: flex;
549
    }
550

    
551
    > h5 {
552
        margin: 0;
553
        font-family: @theme-list-line-dotted-font-family;
554
        text-transform: @theme-list-line-dotted-text-transform;
555
    }
556

    
557
}
558

    
559
.tm-list-line-dotted-space {
560

    
561
    height: @global-font-size;
562
    margin: 0 @utility-margin-small;
563
    -ms-flex: 1;
564
    -webkit-flex: 1;
565
    flex: 1;
566
    border-bottom: @theme-list-line-dotted-border-width dotted @theme-list-line-dotted-border;
567

    
568
    // Phone portrait only
569
    @media (max-width: @breakpoint-mini-max) { display: none; }
570

    
571
}
572

    
573

    
574
/* Error
575
 ========================================================================== */
576

    
577
.tm-error-icon { font-size: 250px; }
578

    
579
.tm-error-headline { font-size: 100px; }
580

    
581

    
582
/* Offline
583
 ========================================================================== */
584

    
585
.tm-offline { width: 300px; }
586

    
587

    
588
/* Socialbuttons
589
 ========================================================================== */
590

    
591
 .tm-socialbuttons {
592

    
593
     line-height: 1;
594

    
595
     > div {
596
         margin-right: 10px;
597
         float: left;
598
     }
599
 }
600

    
601

    
602
/* WordPress only
603
 ========================================================================== */
604

    
605
.alignleft {
606
    display: block;
607
    margin-right: @utility-align-horizontal;
608
    float: left;
609
}
610

    
611
.alignright {
612
    display: block;
613
    margin-left: @utility-align-horizontal;
614
    float: right;
615
}
616

    
617
.aligncenter {
618
    display: block;
619
    margin-left: auto;
620
    margin-right: auto;
621
}
622

    
623

    
624
/* Widgetkit
625
 ========================================================================== */
626

    
627
.tm-popover-chester {
628

    
629
    .wk-popover-toggle {
630
        display: block;
631
        width: @theme-popover-toggle-width;
632
        height: @theme-popover-toggle-width;
633
        border-radius: 100%;
634
        background: @button-primary-background;
635
    }
636

    
637
    .uk-open .wk-popover-toggle {
638
        position: relative;
639
        z-index: 1024;
640
    }
641

    
642
    .uk-dropdown-blank { width: @theme-popover-dropdown-width; }
643
    .uk-dropdown-blank > .uk-panel-box { padding: @global-margin; }
644

    
645
    [data-uk-dropdown*="left-top"] > .uk-dropdown-top,
646
    [data-uk-dropdown*="left-top"] > .uk-dropdown-left,
647
    [data-uk-dropdown*="right-top"] > .uk-dropdown-top {
648
        margin-left: (@theme-popover-toggle-width / 2);
649
        margin-top: (@theme-popover-toggle-width / 2);
650
    }
651

    
652
    [data-uk-dropdown*="left-top"] > .uk-dropdown-right,
653
    [data-uk-dropdown*="left-bottom"] > .uk-dropdown-left,
654
    [data-uk-dropdown*="right-bottom"] > .uk-dropdown-left,
655
    [data-uk-dropdown*="right-bottom"] > .uk-dropdown-bottom {
656
        margin-left: (@theme-popover-toggle-width / 2);
657
        margin-top: -(@theme-popover-toggle-width / 2);
658
    }
659

    
660
    [data-uk-dropdown*="right-top"] > .uk-dropdown-right {
661
        margin-left: -(@theme-popover-toggle-width / 2);
662
        margin-top: (@theme-popover-toggle-width / 2);
663
    }
664

    
665
    [data-uk-dropdown*="left-bottom"] > .uk-dropdown-right,
666
    [data-uk-dropdown*="right-bottom"] > .uk-dropdown-right {
667
        margin-left: -(@theme-popover-toggle-width / 2);
668
        margin-top: -(@theme-popover-toggle-width / 2);
669
    }
670

    
671
}
672

    
673
.tm-switcher-nav {
674

    
675
    position: relative;
676
    top: @global-margin-large;
677
    padding: 0;
678
    list-style: none;
679
    z-index: 1;
680

    
681
    > li {
682

    
683
        position: relative;
684
        box-sizing: border-box;
685
        padding: @global-margin;
686

    
687
        @media (min-width: @breakpoint-medium) { padding: @global-margin-large; }
688

    
689
        &:hover,
690
        &.uk-active { background: @global-muted-background; }
691

    
692
    }
693

    
694
    &:not(.tm-switcher-nav-left):not(.tm-switcher-nav-right) > li:not(:first-child) {
695

    
696
        margin-left: @global-margin;
697

    
698
        @media (min-width: @breakpoint-medium) { margin-left: @global-margin-large; }
699

    
700
    }
701

    
702
}
703

    
704
.tm-switcher-nav-left,
705
.tm-switcher-nav-right { top: 0; }
706

    
707
.tm-switcher-nav-left { left: @global-margin-large; }
708

    
709
.tm-switcher-chester-nav .tm-title-overlay {
710
    display: inline-block;
711
    position: absolute;
712
    left: 50%;
713
    bottom: 0;
714
    margin-bottom: 0;
715
    padding: @theme-switcher-title-overlay-padding-vertical @theme-switcher-title-overlay-padding-horizontal;
716
    background: @global-primary-background;
717
    color: @global-contrast-color;
718
    transform: translateX(-50%);
719
}
720

    
721
.tm-switcher-chester .uk-thumbnav > * > * { background: transparent; }
722

    
723
.tm-slider-chester {
724

    
725
    .uk-slider > li { width: 65vw; }
726

    
727
    .uk-slider > li > div {
728
        margin-left: 5vw;
729
        margin-right: 5vw;
730
    }
731

    
732
    .uk-overlay { display: block; }
733

    
734
}
735

    
736

    
737
// Styles Overrides
738
// ==========================================================================
739

    
740
.body-style();
741

    
742
.body-style () when (@global-style = 'dove'), (@global-style = 'moss'), (@global-style = 'gold') {
743

    
744
    .uk-block-secondary { &:extend(.uk-contrast all); }
745

    
746
}
747

    
748
.body-style () when (@global-style = 'default'), (@global-style = 'rose'), (@global-style = 'dove'), (@global-style = 'moss'), (@global-style = 'gold') {
749

    
750
    .uk-block-primary .uk-panel-box:not(.uk-panel-box-primary):not(.uk-panel-box-secondary) { &:extend(.uk-contrast all); }
751

    
752
}
753

    
754
.body-style () when (@global-style = 'dove'), (@global-style = 'moss'), (@global-style = 'gold') {
755

    
756
    .uk-block-secondary .uk-panel-box:not(.uk-panel-box-primary):not(.uk-panel-box-secondary) { &:extend(.uk-contrast all); }
757

    
758
}
(4-4/4)