Project

General

Profile

1
// Name:            Section
2
// Description:     Component to create horizontal layout section
3
//
4
// Component:       `uk-section`
5
//
6
// Modifiers:       `uk-section-large`
7
//                  `uk-section-default`
8
//                  `uk-section-muted`
9
//                  `uk-section-primary`
10
//                  `uk-section-secondary`
11
//                  `uk-section-media`
12
//                  `uk-section-overlap`
13
//
14
// States:          `uk-preserve-color`
15
//
16
// ========================================================================
17

    
18

    
19
// Variables
20
// ========================================================================
21

    
22
@section-padding-vertical:                        @global-medium-margin;
23
@section-padding-vertical-m:                      @global-large-margin;
24

    
25
@section-xsmall-padding-vertical:                 @global-margin;
26

    
27
@section-small-padding-vertical:                  @global-medium-margin;
28

    
29
@section-large-padding-vertical:                  @global-large-margin;
30
@section-large-padding-vertical-m:                @global-xlarge-margin;
31

    
32
@section-xlarge-padding-vertical:                 @global-xlarge-margin;
33
@section-xlarge-padding-vertical-m:               (@global-large-margin + @global-xlarge-margin);
34

    
35
@section-default-background:                      @global-background;
36

    
37
@section-muted-background:                        @global-muted-background;
38

    
39
@section-primary-background:                      @global-primary-background;
40
@section-primary-color-mode:                      light;
41

    
42
@section-secondary-background:                    @global-secondary-background;
43
@section-secondary-color-mode:                    light;
44

    
45

    
46
/* ========================================================================
47
   Component: Section
48
 ========================================================================== */
49

    
50
/*
51
 * 1. Make it work with `100vh` and height in general
52
 */
53

    
54
.uk-section {
55
    box-sizing: border-box; /* 1 */
56
    padding-top: @section-padding-vertical;
57
    padding-bottom: @section-padding-vertical;
58
    .hook-section;
59
}
60

    
61
/* Desktop and bigger */
62
@media (min-width: @breakpoint-medium) {
63

    
64
    .uk-section {
65
        padding-top: @section-padding-vertical-m;
66
        padding-bottom: @section-padding-vertical-m;
67
    }
68

    
69
}
70

    
71
/*
72
 * Micro clearfix
73
 */
74

    
75
.uk-section::before,
76
.uk-section::after {
77
    content: "";
78
    display: table;
79
}
80

    
81
.uk-section::after { clear: both; }
82

    
83
/*
84
 * Remove margin from the last-child
85
 */
86

    
87
.uk-section > :last-child { margin-bottom: 0; }
88

    
89

    
90
/* Size modifiers
91
 ========================================================================== */
92

    
93
/*
94
 * XSmall
95
 */
96

    
97
.uk-section-xsmall {
98
    padding-top: @section-xsmall-padding-vertical;
99
    padding-bottom: @section-xsmall-padding-vertical;
100
}
101

    
102
/*
103
 * Small
104
 */
105

    
106
.uk-section-small {
107
    padding-top: @section-small-padding-vertical;
108
    padding-bottom: @section-small-padding-vertical;
109
}
110

    
111
/*
112
 * Large
113
 */
114

    
115
.uk-section-large {
116
    padding-top: @section-large-padding-vertical;
117
    padding-bottom: @section-large-padding-vertical;
118
}
119

    
120
/* Tablet landscape and bigger */
121
@media (min-width: @breakpoint-medium) {
122

    
123
    .uk-section-large {
124
        padding-top: @section-large-padding-vertical-m;
125
        padding-bottom: @section-large-padding-vertical-m;
126
    }
127

    
128
}
129

    
130

    
131
/*
132
 * XLarge
133
 */
134

    
135
.uk-section-xlarge {
136
    padding-top: @section-xlarge-padding-vertical;
137
    padding-bottom: @section-xlarge-padding-vertical;
138
}
139

    
140
/* Tablet landscape and bigger */
141
@media (min-width: @breakpoint-medium) {
142

    
143
    .uk-section-xlarge {
144
        padding-top: @section-xlarge-padding-vertical-m;
145
        padding-bottom: @section-xlarge-padding-vertical-m;
146
    }
147

    
148
}
149

    
150

    
151
/* Style modifiers
152
 ========================================================================== */
153

    
154
/*
155
 * Default
156
 */
157

    
158
.uk-section-default {
159
    background: @section-default-background;
160
    .hook-section-default;
161
}
162

    
163
/*
164
 * Muted
165
 */
166

    
167
.uk-section-muted {
168
    background: @section-muted-background;
169
    .hook-section-muted;
170
}
171

    
172
/*
173
 * Primary
174
 */
175

    
176
.uk-section-primary {
177
    background: @section-primary-background;
178
    .hook-section-primary;
179
}
180

    
181
.uk-section-primary:not(.uk-preserve-color):extend(.uk-light all) when (@section-primary-color-mode = light) {}
182
.uk-section-primary:not(.uk-preserve-color):extend(.uk-dark all) when (@section-primary-color-mode = dark) {}
183

    
184

    
185
/*
186
 * Secondary
187
 */
188

    
189
.uk-section-secondary {
190
    background: @section-secondary-background;
191
    .hook-section-secondary;
192
}
193

    
194
.uk-section-secondary:not(.uk-preserve-color):extend(.uk-light all) when (@section-secondary-color-mode = light) {}
195
.uk-section-secondary:not(.uk-preserve-color):extend(.uk-dark all) when (@section-secondary-color-mode = dark) {}
196

    
197

    
198
/*
199
 * Indicate that an image or video is used as background
200
 */
201

    
202
.uk-section-media {
203
    .hook-section-media;
204
}
205

    
206
/* Overlap modifier
207
 ========================================================================== */
208

    
209
/*
210
 * Reserved modifier to make a section overlap another section with an border image
211
 * Implemented by the theme
212
 */
213

    
214
.uk-section-overlap {
215
    .hook-section-overlap;
216
}
217

    
218

    
219
// Hooks
220
// ========================================================================
221

    
222
.hook-section-misc;
223

    
224
.hook-section() {}
225
.hook-section-default() {}
226
.hook-section-muted() {}
227
.hook-section-secondary() {}
228
.hook-section-primary() {}
229
.hook-section-media() {}
230
.hook-section-overlap() {}
231
.hook-section-misc() {}
(49-49/66)