Project

General

Profile

1
// Name:            Card
2
// Description:     Component to create boxed content containers
3
//
4
// Component:       `uk-card`
5
//
6
// Sub-objects:     `uk-card-body`
7
//                  `uk-card-header`
8
//                  `uk-card-footer`
9
//                  `uk-card-media-*`
10
//                  `uk-card-title`
11
//                  `uk-card-badge`
12
//
13
// Modifiers:       `uk-card-hover`
14
//                  `uk-card-default`
15
//                  `uk-card-primary`
16
//                  `uk-card-secondary`
17
//                  `uk-card-small`
18
//                  `uk-card-large`
19
//
20
// Uses:            `uk-grid-stack`
21
//
22
// ========================================================================
23

    
24

    
25
// Variables
26
// ========================================================================
27

    
28
@card-body-padding-horizontal:                 @global-gutter;
29
@card-body-padding-vertical:                   @global-gutter;
30

    
31
@card-body-padding-horizontal-l:               @global-medium-gutter;
32
@card-body-padding-vertical-l:                 @global-medium-gutter;
33

    
34
@card-header-padding-horizontal:               @global-gutter;
35
@card-header-padding-vertical:                 round(@global-gutter / 2);
36

    
37
@card-header-padding-horizontal-l:             @global-medium-gutter;
38
@card-header-padding-vertical-l:               round(@global-medium-gutter / 2);
39

    
40
@card-footer-padding-horizontal:               @global-gutter;
41
@card-footer-padding-vertical:                 (@global-gutter / 2);
42

    
43
@card-footer-padding-horizontal-l:             @global-medium-gutter;
44
@card-footer-padding-vertical-l:               round(@global-medium-gutter / 2);
45

    
46
@card-title-font-size:                         @global-large-font-size;
47
@card-title-line-height:                       1.4;
48

    
49
@card-badge-top:                               @global-gutter;
50
@card-badge-right:                             @card-badge-top;
51

    
52
@card-hover-background:                        @global-muted-background;
53

    
54
@card-default-background:                      @global-muted-background;
55
@card-default-color:                           @global-color;
56
@card-default-title-color:                     @global-emphasis-color;
57
@card-default-hover-background:                darken(@card-default-background, 5%);
58

    
59
@card-primary-background:                      @global-primary-background;
60
@card-primary-color:                           @global-inverse-color;
61
@card-primary-title-color:                     @card-primary-color;
62
@card-primary-hover-background:                darken(@card-primary-background, 5%);
63
@card-primary-color-mode:                      light;
64

    
65
@card-secondary-background:                    @global-secondary-background;
66
@card-secondary-color:                         @global-inverse-color;
67
@card-secondary-title-color:                   @card-secondary-color;
68
@card-secondary-hover-background:              darken(@card-secondary-background, 5%);
69
@card-secondary-color-mode:                    light;
70

    
71
@card-small-body-padding-horizontal:           @global-margin;
72
@card-small-body-padding-vertical:             @global-margin;
73
@card-small-header-padding-horizontal:         @global-margin;
74
@card-small-header-padding-vertical:           round(@global-margin / 1.5);
75
@card-small-footer-padding-horizontal:         @global-margin;
76
@card-small-footer-padding-vertical:           round(@global-margin / 1.5);
77

    
78
@card-large-body-padding-horizontal-l:         @global-large-gutter;
79
@card-large-body-padding-vertical-l:           @global-large-gutter;
80
@card-large-header-padding-horizontal-l:       @global-large-gutter;
81
@card-large-header-padding-vertical-l:         round(@global-large-gutter / 2);
82
@card-large-footer-padding-horizontal-l:       @global-large-gutter;
83
@card-large-footer-padding-vertical-l:         round(@global-large-gutter / 2);
84

    
85

    
86
/* ========================================================================
87
   Component: Card
88
 ========================================================================== */
89

    
90
.uk-card {
91
    position: relative;
92
    box-sizing: border-box;
93
    .hook-card;
94
}
95

    
96

    
97
/* Sections
98
 ========================================================================== */
99

    
100
.uk-card-body {
101
    padding: @card-body-padding-vertical @card-body-padding-horizontal;
102
    .hook-card-body;
103
}
104

    
105
.uk-card-header {
106
    padding: @card-header-padding-vertical @card-header-padding-horizontal;
107
    .hook-card-header;
108
}
109

    
110
.uk-card-footer {
111
    padding: @card-footer-padding-vertical @card-footer-padding-horizontal;
112
    .hook-card-footer;
113
}
114

    
115
/* Desktop and bigger */
116
@media (min-width: @breakpoint-large) {
117

    
118
    .uk-card-body { padding: @card-body-padding-vertical-l @card-body-padding-horizontal-l; }
119

    
120
    .uk-card-header { padding: @card-header-padding-vertical-l @card-header-padding-horizontal-l; }
121

    
122
    .uk-card-footer { padding: @card-footer-padding-vertical-l @card-footer-padding-horizontal-l; }
123

    
124
}
125

    
126
/*
127
 * Micro clearfix
128
 */
129

    
130
.uk-card-body::before,
131
.uk-card-body::after,
132
.uk-card-header::before,
133
.uk-card-header::after,
134
.uk-card-footer::before,
135
.uk-card-footer::after {
136
    content: "";
137
    display: table;
138
}
139

    
140
.uk-card-body::after,
141
.uk-card-header::after,
142
.uk-card-footer::after { clear: both; }
143

    
144
/*
145
 * Remove margin from the last-child
146
 */
147

    
148
.uk-card-body > :last-child,
149
.uk-card-header > :last-child,
150
.uk-card-footer > :last-child { margin-bottom: 0; }
151

    
152

    
153
/* Media
154
 ========================================================================== */
155

    
156
/*
157
 * Reserved alignment modifier to style the media element, e.g. with `border-radius`
158
 * Implemented by the theme
159
 */
160

    
161
[class*='uk-card-media'] {
162
    .hook-card-media;
163
}
164

    
165
.uk-card-media-top,
166
.uk-grid-stack > .uk-card-media-left,
167
.uk-grid-stack > .uk-card-media-right  {
168
    .hook-card-media-top;
169
}
170

    
171
.uk-card-media-bottom {
172
    .hook-card-media-bottom;
173
}
174

    
175
:not(.uk-grid-stack) > .uk-card-media-left {
176
    .hook-card-media-left;
177
}
178

    
179
:not(.uk-grid-stack) > .uk-card-media-right {
180
    .hook-card-media-right;
181
}
182

    
183

    
184
/* Title
185
 ========================================================================== */
186

    
187
.uk-card-title {
188
    font-size: @card-title-font-size;
189
    line-height: @card-title-line-height;
190
    .hook-card-title;
191
}
192

    
193

    
194
/* Badge
195
 ========================================================================== */
196

    
197
.uk-card-badge {
198
    position: absolute;
199
    top: @card-badge-top;
200
    right: @card-badge-right;
201
    z-index: 1;
202
    .hook-card-badge;
203
}
204

    
205
/*
206
 * Remove margin from adjacent element
207
 */
208

    
209
.uk-card-badge:first-child + * { margin-top: 0; }
210

    
211

    
212
/* Hover modifier
213
 ========================================================================== */
214

    
215
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
216
    background: @card-hover-background;
217
    .hook-card-hover;
218
}
219

    
220

    
221
/* Style modifiers
222
 ========================================================================== */
223

    
224
/*
225
 * Default
226
 * Note: Header and Footer are only implemented for the default style
227
 */
228

    
229
.uk-card-default {
230
    background: @card-default-background;
231
    color: @card-default-color;
232
    .hook-card-default;
233
}
234

    
235
.uk-card-default .uk-card-title {
236
    color: @card-default-title-color;
237
    .hook-card-default-title;
238
}
239

    
240
.uk-card-default.uk-card-hover:hover {
241
    background-color: @card-default-hover-background;
242
    .hook-card-default-hover;
243
}
244

    
245
.uk-card-default .uk-card-header {
246
    .hook-card-default-header;
247
}
248

    
249
.uk-card-default .uk-card-footer {
250
    .hook-card-default-footer;
251
}
252

    
253
/*
254
 * Primary
255
 */
256

    
257
.uk-card-primary {
258
    background: @card-primary-background;
259
    color: @card-primary-color;
260
    .hook-card-primary;
261
}
262

    
263
.uk-card-primary .uk-card-title {
264
    color: @card-primary-title-color;
265
    .hook-card-primary-title;
266
}
267

    
268
.uk-card-primary.uk-card-hover:hover {
269
    background-color: @card-primary-hover-background;
270
    .hook-card-primary-hover;
271
}
272

    
273
// Color Mode
274
.uk-card-primary.uk-card-body:extend(.uk-light all) when (@card-primary-color-mode = light) {}
275
.uk-card-primary > :not([class*='uk-card-media']):extend(.uk-light all) when (@card-primary-color-mode = light) {}
276
.uk-card-primary.uk-card-body:extend(.uk-dark all) when (@card-primary-color-mode = dark) {}
277
.uk-card-primary > :not([class*='uk-card-media']):extend(.uk-dark all) when (@card-primary-color-mode = dark) {}
278

    
279
/*
280
 * Secondary
281
 */
282

    
283
.uk-card-secondary {
284
    background: @card-secondary-background;
285
    color: @card-secondary-color;
286
    .hook-card-secondary;
287
}
288

    
289
.uk-card-secondary .uk-card-title {
290
    color: @card-secondary-title-color;
291
    .hook-card-secondary-title;
292
}
293

    
294
.uk-card-secondary.uk-card-hover:hover {
295
    background-color: @card-secondary-hover-background;
296
    .hook-card-secondary-hover;
297
}
298

    
299
// Color Mode
300
.uk-card-secondary.uk-card-body:extend(.uk-light all) when (@card-secondary-color-mode = light) {}
301
.uk-card-secondary > :not([class*='uk-card-media']):extend(.uk-light all) when (@card-secondary-color-mode = light) {}
302
.uk-card-secondary.uk-card-body:extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
303
.uk-card-secondary > :not([class*='uk-card-media']):extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
304

    
305

    
306
/* Size modifier
307
 ========================================================================== */
308

    
309
/*
310
 * Small
311
 */
312

    
313
.uk-card-small.uk-card-body,
314
.uk-card-small .uk-card-body { padding: @card-small-body-padding-vertical @card-small-body-padding-horizontal; }
315

    
316
.uk-card-small .uk-card-header { padding: @card-small-header-padding-vertical @card-small-header-padding-horizontal; }
317
.uk-card-small .uk-card-footer { padding: @card-small-footer-padding-vertical @card-small-footer-padding-horizontal; }
318

    
319
/*
320
 * Large
321
 */
322

    
323
/* Desktop and bigger */
324
@media (min-width: @breakpoint-large) {
325

    
326
    .uk-card-large.uk-card-body,
327
    .uk-card-large .uk-card-body { padding: @card-large-body-padding-vertical-l @card-large-body-padding-horizontal-l; }
328

    
329
    .uk-card-large .uk-card-header { padding: @card-large-header-padding-vertical-l @card-large-header-padding-horizontal-l; }
330
    .uk-card-large .uk-card-footer { padding: @card-large-footer-padding-vertical-l @card-large-footer-padding-horizontal-l; }
331

    
332
}
333

    
334

    
335
// Hooks
336
// ========================================================================
337

    
338
.hook-card-misc;
339

    
340
.hook-card() {}
341
.hook-card-body() {}
342
.hook-card-header() {}
343
.hook-card-footer() {}
344
.hook-card-media() {}
345
.hook-card-media-top() {}
346
.hook-card-media-bottom() {}
347
.hook-card-media-left() {}
348
.hook-card-media-right() {}
349
.hook-card-title() {}
350
.hook-card-badge() {}
351
.hook-card-hover() {}
352
.hook-card-default() {}
353
.hook-card-default-title() {}
354
.hook-card-default-hover() {}
355
.hook-card-default-header() {}
356
.hook-card-default-footer() {}
357
.hook-card-primary() {}
358
.hook-card-primary-title() {}
359
.hook-card-primary-hover() {}
360
.hook-card-secondary() {}
361
.hook-card-secondary-title() {}
362
.hook-card-secondary-hover() {}
363
.hook-card-misc() {}
(13-13/66)