UNPKG

3.58 kBSCSSView Raw
1// Name: Column
2// Description: Utilities for text columns
3//
4// Component: `uk-column-*`
5//
6// Sub-objects: `uk-column-span`
7//
8// Modifiers: `uk-column-divider`
9//
10// ========================================================================
11
12
13// Variables
14// ========================================================================
15
16$column-gutter: $global-gutter !default;
17$column-gutter-l: $global-medium-gutter !default;
18
19$column-divider-rule-color: $global-border !default;
20$column-divider-rule-width: 1px !default;
21
22
23/* ========================================================================
24 Component: Column
25 ========================================================================== */
26
27[class*='uk-column-'] { column-gap: $column-gutter; }
28
29/* Desktop and bigger */
30@media (min-width: $breakpoint-large) {
31
32 [class*='uk-column-'] { column-gap: $column-gutter-l; }
33
34}
35
36/*
37 * Fix image 1px line wrapping into the next column in Chrome
38 */
39
40[class*='uk-column-'] img { transform: translate3d(0,0,0); }
41
42
43/* Divider
44 ========================================================================== */
45
46/*
47 * 1. Double the column gap
48 */
49
50.uk-column-divider {
51 column-rule: $column-divider-rule-width solid $column-divider-rule-color;
52 /* 1 */
53 column-gap: ($column-gutter * 2);
54}
55
56/* Desktop and bigger */
57@media (min-width: $breakpoint-large) {
58
59 .uk-column-divider {
60 column-gap: ($column-gutter-l * 2);
61 }
62
63}
64
65
66/* Width modifiers
67 ========================================================================== */
68
69.uk-column-1-2 { column-count: 2;}
70.uk-column-1-3 { column-count: 3; }
71.uk-column-1-4 { column-count: 4; }
72.uk-column-1-5 { column-count: 5; }
73.uk-column-1-6 { column-count: 6; }
74
75/* Phone landscape and bigger */
76@media (min-width: $breakpoint-small) {
77
78 .uk-column-1-2\@s { column-count: 2; }
79 .uk-column-1-3\@s { column-count: 3; }
80 .uk-column-1-4\@s { column-count: 4; }
81 .uk-column-1-5\@s { column-count: 5; }
82 .uk-column-1-6\@s { column-count: 6; }
83
84}
85
86/* Tablet landscape and bigger */
87@media (min-width: $breakpoint-medium) {
88
89 .uk-column-1-2\@m { column-count: 2; }
90 .uk-column-1-3\@m { column-count: 3; }
91 .uk-column-1-4\@m { column-count: 4; }
92 .uk-column-1-5\@m { column-count: 5; }
93 .uk-column-1-6\@m { column-count: 6; }
94
95}
96
97/* Desktop and bigger */
98@media (min-width: $breakpoint-large) {
99
100 .uk-column-1-2\@l { column-count: 2; }
101 .uk-column-1-3\@l { column-count: 3; }
102 .uk-column-1-4\@l { column-count: 4; }
103 .uk-column-1-5\@l { column-count: 5; }
104 .uk-column-1-6\@l { column-count: 6; }
105
106}
107
108/* Large screen and bigger */
109@media (min-width: $breakpoint-xlarge) {
110
111 .uk-column-1-2\@xl { column-count: 2; }
112 .uk-column-1-3\@xl { column-count: 3; }
113 .uk-column-1-4\@xl { column-count: 4; }
114 .uk-column-1-5\@xl { column-count: 5; }
115 .uk-column-1-6\@xl { column-count: 6; }
116
117}
118
119/* Make element span across all columns
120 * Does not work in Firefox yet
121 ========================================================================== */
122
123.uk-column-span { column-span: all; }
124
125
126// Hooks
127// ========================================================================
128
129@if(mixin-exists(hook-column-misc)) {@include hook-column-misc();}
130
131// @mixin hook-column-misc(){}
132
133
134// Inverse
135// ========================================================================
136
137$inverse-column-divider-rule-color: $inverse-global-border !default;
138