broad/stylesheet.less at master · markjeffries/broad · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
// -------------------------------------
// BaseKit Standard Template: Stylesheet
// -------------------------------------


// -----------------------------
// #Table of Contents
// -----------------------------


// 1. #LESS INCLUDES
// 2. #PAGE SETTINGS
// 3. #Mixins


// -----------------------------
// 1. #LESS Includes
// -----------------------------


@import "@{templateCommon}/bk-less-framework-v8.less"; // BaseKit LESS Framework

// @import "@{templateLocal}/bk-v8-test.less";

// ** BaseKit LESS Framework is a set of non obtrusive LESS files that can be pulled into
//    your template to guarentee widgets come to life. Proivides default styles for all widgets.

// Template Includes
@import "@{templateLocal}/less/template.less"; // Global styles
@import "@{templateLocal}/less/widgets.less"; // Widgets

// Plugin Includes
@import "@{templateLocal}/less/plugins/plugin-blog.less"; // Plugin: Blog CSS
@import "@{templateLocal}/less/plugins/plugin-menu.less"; // Plugin: Menu CSS
@import "@{templateLocal}/less/plugins/plugin-ecommerce.less"; // Plugin: Ecommerce CSS

@import "@{templateLocal}/less/fork-variables.less"; // Forked Templates


// -----------------------------
// 2. #Page Settings
// -----------------------------


// Page Container
// --------------


.site-container {
    width: auto;
    @media only screen and (min-width: 1140px) {
        width: @value__container--width;
        margin: 0 auto;
    }
}


// Widgets
// -------

.widget {
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    margin-top: 0;
    margin-bottom: 20px;
    @media only screen and (min-width: 1140px) {
        width: @value__widget--width;
        margin: @value__widget--margin--desktop;
    }
}

// Widgets in Responsive Columns
.site-container {
    // Two Columns
    .columns-two-left,
    .columns-two-right,
    // Three Columns
    .columns-three-left,
    .columns-three-middle,
    .columns-three-right,
    // Four Columns
    .columns-four-first,
    .columns-four-second,
    .columns-four-third,
    .columns-four-fourth {
        .widget {
            width: auto;
            margin: 10px 0;
            @media only screen and (min-width: 1140px) {
                width: auto;
                margin: 0 auto 20px;
            }
        }
    }
}

.brand .widget,
.widget[data-widget-type="profile"] {
    width: 100%;
    margin: 0;
}


// -----------------------------
// 3. #Mixins
// -----------------------------


.border-radius (@radius: 3px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.transition (@prop: all, @time: 0.5s, @ease: ease) {
    -webkit-transition: @prop @time @ease;
    -moz-transition:    @prop @time @ease;
    -ms-transition:     @prop @time @ease;
    -o-transition:      @prop @time @ease;
    transition:         @prop @time @ease;
}