1
|
// Name: Text
|
2
|
// Description: Utilities for text
|
3
|
//
|
4
|
// Component: `uk-text-*`
|
5
|
//
|
6
|
// ========================================================================
|
7
|
|
8
|
|
9
|
// Variables
|
10
|
// ========================================================================
|
11
|
|
12
|
$text-lead-font-size: $global-large-font-size !default;
|
13
|
$text-lead-line-height: 1.5 !default;
|
14
|
$text-lead-color: $global-emphasis-color !default;
|
15
|
|
16
|
$text-meta-font-size: $global-small-font-size !default;
|
17
|
$text-meta-line-height: 1.4 !default;
|
18
|
$text-meta-color: $global-muted-color !default;
|
19
|
|
20
|
$text-small-font-size: $global-small-font-size !default;
|
21
|
$text-small-line-height: 1.5 !default;
|
22
|
|
23
|
$text-large-font-size: $global-large-font-size !default;
|
24
|
$text-large-line-height: 1.5 !default;
|
25
|
|
26
|
$text-muted-color: $global-muted-color !default;
|
27
|
$text-primary-color: $global-primary-background !default;
|
28
|
$text-success-color: $global-success-background !default;
|
29
|
$text-warning-color: $global-warning-background !default;
|
30
|
$text-danger-color: $global-danger-background !default;
|
31
|
|
32
|
$text-background-color: $global-primary-background !default;
|
33
|
|
34
|
|
35
|
/* ========================================================================
|
36
|
Component: Text
|
37
|
========================================================================== */
|
38
|
|
39
|
|
40
|
/* Style modifiers
|
41
|
========================================================================== */
|
42
|
|
43
|
.uk-text-lead {
|
44
|
font-size: $text-lead-font-size;
|
45
|
line-height: $text-lead-line-height;
|
46
|
color: $text-lead-color;
|
47
|
@if(mixin-exists(hook-text-lead)) {@include hook-text-lead();}
|
48
|
}
|
49
|
|
50
|
.uk-text-meta {
|
51
|
font-size: $text-meta-font-size;
|
52
|
line-height: $text-meta-line-height;
|
53
|
color: $text-meta-color;
|
54
|
@if(mixin-exists(hook-text-meta)) {@include hook-text-meta();}
|
55
|
}
|
56
|
|
57
|
|
58
|
/* Size modifiers
|
59
|
========================================================================== */
|
60
|
|
61
|
.uk-text-small {
|
62
|
font-size: $text-small-font-size;
|
63
|
line-height: $text-small-line-height;
|
64
|
@if(mixin-exists(hook-text-small)) {@include hook-text-small();}
|
65
|
}
|
66
|
|
67
|
.uk-text-large {
|
68
|
font-size: $text-large-font-size;
|
69
|
line-height: $text-large-line-height;
|
70
|
@if(mixin-exists(hook-text-large)) {@include hook-text-large();}
|
71
|
}
|
72
|
|
73
|
|
74
|
/* Weight modifier
|
75
|
========================================================================== */
|
76
|
|
77
|
.uk-text-bold { font-weight: bolder; }
|
78
|
|
79
|
|
80
|
/* Transform modifier
|
81
|
========================================================================== */
|
82
|
|
83
|
.uk-text-uppercase { text-transform: uppercase !important; }
|
84
|
.uk-text-capitalize { text-transform: capitalize !important; }
|
85
|
.uk-text-lowercase { text-transform: lowercase !important; }
|
86
|
|
87
|
|
88
|
/* Color modifiers
|
89
|
========================================================================== */
|
90
|
|
91
|
.uk-text-muted { color: $text-muted-color !important; }
|
92
|
.uk-text-primary { color: $text-primary-color !important; }
|
93
|
.uk-text-success { color: $text-success-color !important; }
|
94
|
.uk-text-warning { color: $text-warning-color !important; }
|
95
|
.uk-text-danger { color: $text-danger-color !important; }
|
96
|
|
97
|
|
98
|
/* Background modifier
|
99
|
========================================================================== */
|
100
|
|
101
|
/*
|
102
|
* 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera
|
103
|
* Default color is set to transparent
|
104
|
* 2. Container fits the text
|
105
|
* 3. Fallback color for IE11
|
106
|
*/
|
107
|
|
108
|
.uk-text-background {
|
109
|
/* 1 */
|
110
|
-webkit-background-clip: text;
|
111
|
-webkit-text-fill-color: transparent;
|
112
|
/* 2 */
|
113
|
display: inline-block;
|
114
|
/* 3 */
|
115
|
color: $text-background-color !important;
|
116
|
}
|
117
|
|
118
|
@supports (-webkit-background-clip: text) {
|
119
|
|
120
|
.uk-text-background {
|
121
|
background-color: $text-background-color;
|
122
|
@if(mixin-exists(hook-text-background)) {@include hook-text-background();}
|
123
|
}
|
124
|
|
125
|
}
|
126
|
|
127
|
|
128
|
/* Alignment modifiers
|
129
|
========================================================================== */
|
130
|
|
131
|
.uk-text-left { text-align: left !important; }
|
132
|
.uk-text-right { text-align: right !important; }
|
133
|
.uk-text-center { text-align: center !important; }
|
134
|
.uk-text-justify { text-align: justify !important; }
|
135
|
|
136
|
/* Phone landscape and bigger */
|
137
|
@media (min-width: $breakpoint-small) {
|
138
|
|
139
|
.uk-text-left\@s { text-align: left !important; }
|
140
|
.uk-text-right\@s { text-align: right !important; }
|
141
|
.uk-text-center\@s { text-align: center !important; }
|
142
|
|
143
|
}
|
144
|
|
145
|
/* Tablet landscape and bigger */
|
146
|
@media (min-width: $breakpoint-medium) {
|
147
|
|
148
|
.uk-text-left\@m { text-align: left !important; }
|
149
|
.uk-text-right\@m { text-align: right !important; }
|
150
|
.uk-text-center\@m { text-align: center !important; }
|
151
|
|
152
|
}
|
153
|
|
154
|
/* Desktop and bigger */
|
155
|
@media (min-width: $breakpoint-large) {
|
156
|
|
157
|
.uk-text-left\@l { text-align: left !important; }
|
158
|
.uk-text-right\@l { text-align: right !important; }
|
159
|
.uk-text-center\@l { text-align: center !important; }
|
160
|
|
161
|
}
|
162
|
|
163
|
/* Large screen and bigger */
|
164
|
@media (min-width: $breakpoint-xlarge) {
|
165
|
|
166
|
.uk-text-left\@xl { text-align: left !important; }
|
167
|
.uk-text-right\@xl { text-align: right !important; }
|
168
|
.uk-text-center\@xl { text-align: center !important; }
|
169
|
|
170
|
}
|
171
|
|
172
|
/*
|
173
|
* Vertical
|
174
|
*/
|
175
|
|
176
|
.uk-text-top { vertical-align: top !important; }
|
177
|
.uk-text-middle { vertical-align: middle !important; }
|
178
|
.uk-text-bottom { vertical-align: bottom !important; }
|
179
|
.uk-text-baseline { vertical-align: baseline !important; }
|
180
|
|
181
|
|
182
|
/* Wrap modifiers
|
183
|
========================================================================== */
|
184
|
|
185
|
/*
|
186
|
* Prevent text from wrapping onto multiple lines
|
187
|
*/
|
188
|
|
189
|
.uk-text-nowrap { white-space: nowrap; }
|
190
|
|
191
|
/*
|
192
|
* 1. Make sure a max-width is set after which truncation can occur
|
193
|
* 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
|
194
|
* 3. Fix for table cells
|
195
|
*/
|
196
|
|
197
|
.uk-text-truncate {
|
198
|
/* 1 */
|
199
|
max-width: 100%;
|
200
|
/* 2 */
|
201
|
overflow: hidden;
|
202
|
text-overflow: ellipsis;
|
203
|
white-space: nowrap;
|
204
|
}
|
205
|
|
206
|
/* 2 */
|
207
|
th.uk-text-truncate,
|
208
|
td.uk-text-truncate { max-width: 0; }
|
209
|
|
210
|
|
211
|
/*
|
212
|
* 1. Wrap long words onto the next line and break them if they are too long to fit
|
213
|
* 2. Legacy `word-wrap` as fallback for `overflow-wrap`
|
214
|
* 3. Add a hyphen where the word breaks
|
215
|
* 4. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge
|
216
|
* Must use `break-all` to support IE11 and Edge
|
217
|
*/
|
218
|
|
219
|
.uk-text-break {
|
220
|
/* 1 */
|
221
|
overflow-wrap: break-word;
|
222
|
/* 2 */
|
223
|
word-wrap: break-word;
|
224
|
/* 3 */
|
225
|
-webkit-hyphens: auto;
|
226
|
-ms-hyphens: auto;
|
227
|
-moz-hyphens: auto;
|
228
|
hyphens: auto;
|
229
|
}
|
230
|
|
231
|
/* 4 */
|
232
|
th.uk-text-break,
|
233
|
td.uk-text-break { word-break: break-all; }
|
234
|
|
235
|
|
236
|
|
237
|
// Hooks
|
238
|
// ========================================================================
|
239
|
|
240
|
@if(mixin-exists(hook-text-misc)) {@include hook-text-misc();}
|
241
|
|
242
|
// @mixin hook-text-lead(){}
|
243
|
// @mixin hook-text-meta(){}
|
244
|
// @mixin hook-text-small(){}
|
245
|
// @mixin hook-text-large(){}
|
246
|
// @mixin hook-text-background(){}
|
247
|
// @mixin hook-text-misc(){}
|
248
|
|
249
|
|
250
|
// Inverse
|
251
|
// ========================================================================
|
252
|
|
253
|
$inverse-text-lead-color: $inverse-global-color !default;
|
254
|
$inverse-text-meta-color: $inverse-global-muted-color !default;
|
255
|
$inverse-text-muted-color: $inverse-global-muted-color !default;
|
256
|
$inverse-text-primary-color: $inverse-global-color !default;
|
257
|
|
258
|
|
259
|
|
260
|
// @mixin hook-inverse-text-lead(){}
|
261
|
// @mixin hook-inverse-text-meta(){}
|