Project

General

Profile

1
// Name:            Tile
2
// Description:     Component to create tiled boxes
3
//
4
// Component:       `uk-tile`
5
//
6
// Modifiers:       `uk-tile-default`
7
//                  `uk-tile-muted`
8
//                  `uk-tile-primary`
9
//                  `uk-tile-secondary`
10
//
11
// States:          `uk-preserve-color`
12
//
13
// ========================================================================
14

    
15

    
16
// Variables
17
// ========================================================================
18

    
19
@tile-padding-horizontal:                      @global-gutter;
20
@tile-padding-vertical:                        @global-gutter;
21

    
22
@tile-padding-horizontal-l:                    @global-medium-gutter;
23
@tile-padding-vertical-l:                      @global-medium-gutter;
24

    
25
@tile-default-background:                      @global-background;
26

    
27
@tile-muted-background:                        @global-muted-background;
28

    
29
@tile-primary-background:                      @global-primary-background;
30
@tile-primary-color-mode:                      light;
31

    
32
@tile-secondary-background:                    @global-secondary-background;
33
@tile-secondary-color-mode:                    light;
34

    
35

    
36
/* ========================================================================
37
   Component: Tile
38
 ========================================================================== */
39

    
40
.uk-tile {
41
    position: relative;
42
    box-sizing: border-box;
43
    padding: @tile-padding-vertical @tile-padding-horizontal;
44
    .hook-tile;
45
}
46

    
47
/* Desktop and bigger */
48
@media (min-width: @breakpoint-large) {
49

    
50
    .uk-tile { padding: @tile-padding-vertical-l @tile-padding-horizontal-l; }
51

    
52
}
53

    
54
/*
55
 * Micro clearfix
56
 */
57

    
58
.uk-tile::before,
59
.uk-tile::after {
60
    content: "";
61
    display: table;
62
}
63

    
64
.uk-tile::after { clear: both; }
65

    
66
/*
67
 * Remove margin from the last-child
68
 */
69

    
70
.uk-tile > :last-child { margin-bottom: 0; }
71

    
72

    
73
/* Style modifiers
74
 ========================================================================== */
75

    
76
/*
77
 * Default
78
 */
79

    
80
.uk-tile-default {
81
    background: @tile-default-background;
82
    .hook-tile-default;
83
}
84

    
85
/*
86
 * Muted
87
 */
88

    
89
.uk-tile-muted {
90
    background: @tile-muted-background;
91
    .hook-tile-muted;
92
}
93

    
94
/*
95
 * Primary
96
 */
97

    
98
.uk-tile-primary {
99
    background: @tile-primary-background;
100
    .hook-tile-primary;
101
}
102

    
103
// Color Mode
104
.uk-tile-primary:not(.uk-preserve-color):extend(.uk-light all) when (@tile-primary-color-mode = light) {}
105
.uk-tile-primary:not(.uk-preserve-color):extend(.uk-dark all) when (@tile-primary-color-mode = dark) {}
106

    
107
/*
108
 * Secondary
109
 */
110

    
111
.uk-tile-secondary {
112
    background: @tile-secondary-background;
113
    .hook-tile-secondary;
114
}
115

    
116
// Color Mode
117
.uk-tile-secondary:not(.uk-preserve-color):extend(.uk-light all) when (@tile-secondary-color-mode = light) {}
118
.uk-tile-secondary:not(.uk-preserve-color):extend(.uk-dark all) when (@tile-secondary-color-mode = dark) {}
119

    
120

    
121
// Hooks
122
// ========================================================================
123

    
124
.hook-tile-misc;
125

    
126
.hook-tile() {}
127
.hook-tile-default() {}
128
.hook-tile-muted() {}
129
.hook-tile-primary() {}
130
.hook-tile-secondary() {}
131
.hook-tile-misc() {}
(59-59/66)