Project

General

Profile

1
// Name:            Align
2
// Description:     Utilities to align embedded content
3
//
4
// Component:       `uk-align-left-*`
5
//                  `uk-align-right-*`
6
//                  `uk-align-center`
7
//
8
// ========================================================================
9

    
10

    
11
// Variables
12
// ========================================================================
13

    
14
@align-margin-horizontal:                       @global-gutter;
15
@align-margin-vertical:                         @global-gutter;
16

    
17
@align-margin-horizontal-l:                     @global-medium-gutter;
18

    
19

    
20
/* ========================================================================
21
   Component: Align
22
 ========================================================================== */
23

    
24
/*
25
 * Default
26
 */
27

    
28
[class*='uk-align'] {
29
    display: block;
30
    margin-bottom: @align-margin-vertical;
31
}
32

    
33
* + [class*='uk-align'] { margin-top: @align-margin-vertical; }
34

    
35
/*
36
 * Center
37
 */
38

    
39
.uk-align-center {
40
    margin-left: auto;
41
    margin-right: auto;
42
}
43

    
44
/*
45
 * Left/Right
46
 */
47

    
48
.uk-align-left {
49
    margin-top: 0;
50
    margin-right: @align-margin-horizontal;
51
    float: left;
52
}
53

    
54
.uk-align-right {
55
    margin-top: 0;
56
    margin-left: @align-margin-horizontal;
57
    float: right;
58
}
59

    
60
/* Phone landscape and bigger */
61
@media (min-width: @breakpoint-small) {
62

    
63
    .uk-align-left\@s {
64
        margin-top: 0;
65
        margin-right: @align-margin-horizontal;
66
        float: left;
67
    }
68

    
69
    .uk-align-right\@s {
70
        margin-top: 0;
71
        margin-left: @align-margin-horizontal;
72
        float: right;
73
    }
74

    
75
}
76

    
77
/* Tablet landscape and bigger */
78
@media (min-width: @breakpoint-medium) {
79

    
80
    .uk-align-left\@m {
81
        margin-top: 0;
82
        margin-right: @align-margin-horizontal;
83
        float: left;
84
    }
85

    
86
    .uk-align-right\@m {
87
        margin-top: 0;
88
        margin-left: @align-margin-horizontal;
89
        float: right;
90
    }
91

    
92
}
93

    
94
/* Desktop and bigger */
95
@media (min-width: @breakpoint-large) {
96

    
97
    .uk-align-left\@l {
98
        margin-top: 0;
99
        float: left;
100
    }
101

    
102
    .uk-align-right\@l {
103
        margin-top: 0;
104
        float: right;
105
    }
106

    
107
    .uk-align-left,
108
    .uk-align-left\@s,
109
    .uk-align-left\@m,
110
    .uk-align-left\@l { margin-right: @align-margin-horizontal-l; }
111

    
112
    .uk-align-right,
113
    .uk-align-right\@s,
114
    .uk-align-right\@m,
115
    .uk-align-right\@l { margin-left: @align-margin-horizontal-l; }
116

    
117
}
118

    
119
/* Large screen and bigger */
120
@media (min-width: @breakpoint-xlarge) {
121

    
122
    .uk-align-left\@xl {
123
        margin-top: 0;
124
        margin-right: @align-margin-horizontal-l;
125
        float: left;
126
    }
127

    
128
    .uk-align-right\@xl {
129
        margin-top: 0;
130
        margin-left: @align-margin-horizontal-l;
131
        float: right;
132
    }
133

    
134
}
135

    
136

    
137
// Hooks
138
// ========================================================================
139

    
140
.hook-align-misc;
141

    
142
.hook-align-misc() {}
(5-5/66)