type-heading 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/README.md +22 -0
- data/lib/compass-type-heading.rb +1 -0
- data/lib/type-heading.rb +14 -0
- data/stylesheets/_type-heading.scss +12 -0
- data/stylesheets/type-heading/_settings.scss +46 -0
- data/stylesheets/type-heading/functions/_heading.scss +141 -0
- data/stylesheets/type-heading/functions/_helpers.scss +471 -0
- data/stylesheets/type-heading/functions/_property.scss +396 -0
- data/stylesheets/type-heading/mixins/_breakpoint.scss +51 -0
- data/stylesheets/type-heading/mixins/_heading.scss +139 -0
- data/stylesheets/type-heading/mixins/_property.scss +140 -0
- data/templates/project/manifest.rb +1 -0
- data/templates/project/style.scss +1 -0
- metadata +97 -0
|
@@ -0,0 +1,396 @@
|
|
|
1
|
+
// Property
|
|
2
|
+
//
|
|
3
|
+
// @group Functions / Property
|
|
4
|
+
// @author Elliot Mitchum
|
|
5
|
+
|
|
6
|
+
// th-properties
|
|
7
|
+
// An ordered list of available properties.
|
|
8
|
+
//
|
|
9
|
+
// @since 0.0.10
|
|
10
|
+
// @type List
|
|
11
|
+
// @access private
|
|
12
|
+
|
|
13
|
+
$th-properties: (
|
|
14
|
+
font-size,
|
|
15
|
+
line-height,
|
|
16
|
+
(margin-top margin-bottom),
|
|
17
|
+
breakpoint
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
// th-property
|
|
21
|
+
// Return heading list property value.
|
|
22
|
+
//
|
|
23
|
+
// @since 0.0.10
|
|
24
|
+
// @type function
|
|
25
|
+
//
|
|
26
|
+
// @requires {function} th-heading
|
|
27
|
+
// @requires {function} th-property-get
|
|
28
|
+
// @requires {function} th-property-default
|
|
29
|
+
// @requires {function} _th-property-unit-convert
|
|
30
|
+
//
|
|
31
|
+
// @param {list | string} $heading A heading map key or list (required).
|
|
32
|
+
// @param {string} $property-name (font-size | line-height | margin-top | margin-bottom | breakpoint) A heading property name (required).
|
|
33
|
+
// @param {number} $breakpoint A heading list breakpoint.
|
|
34
|
+
// @param {boolean} $convert (true) If returned value should be unit converted.
|
|
35
|
+
// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
|
|
36
|
+
//
|
|
37
|
+
// @returns {number} Heading property value.
|
|
38
|
+
//
|
|
39
|
+
// @example scss Return font size from a h1 heading map.
|
|
40
|
+
// // th-property(
|
|
41
|
+
// // $heading: h1,
|
|
42
|
+
// // $property-name: font-size
|
|
43
|
+
// // )
|
|
44
|
+
// @example scss Return font size from a h1 heading map with a breakpoint of 768px.
|
|
45
|
+
// // th-property(
|
|
46
|
+
// // $heading: h1,
|
|
47
|
+
// // $property-name: font-size,
|
|
48
|
+
// // $breakpoint: 768px
|
|
49
|
+
// // )
|
|
50
|
+
// @example scss Return font size from a h1 heading map without unit conversion.
|
|
51
|
+
// // th-property(
|
|
52
|
+
// // $heading: h1,
|
|
53
|
+
// // $property-name: font-size,
|
|
54
|
+
// // $convert: false
|
|
55
|
+
// // )
|
|
56
|
+
// @example scss Return font size from a h1 with a base font size of 24px.
|
|
57
|
+
// // th-property(
|
|
58
|
+
// // $heading: h1,
|
|
59
|
+
// // $property-name: font-size,
|
|
60
|
+
// // $base-font-size: 24px
|
|
61
|
+
// // )
|
|
62
|
+
|
|
63
|
+
@function th-property(
|
|
64
|
+
$heading,
|
|
65
|
+
$property-name,
|
|
66
|
+
$breakpoint: false,
|
|
67
|
+
$convert: true,
|
|
68
|
+
$base-font-size: $th-base-font-size
|
|
69
|
+
){
|
|
70
|
+
$_return: false;
|
|
71
|
+
$heading: th-heading($heading, $breakpoint);
|
|
72
|
+
$_return: _th-property-get($heading, $property-name);
|
|
73
|
+
@if $_return == default or $_return == false {
|
|
74
|
+
$_return: th-property-default($property-name, $base-font-size, false);
|
|
75
|
+
}
|
|
76
|
+
@if $convert == true {
|
|
77
|
+
$_return: _th-property-unit-convert($property-name, $_return, $base-font-size);
|
|
78
|
+
}
|
|
79
|
+
@return $_return;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// _th-property-get
|
|
83
|
+
// Return heading list property value.
|
|
84
|
+
//
|
|
85
|
+
// @since 0.0.11
|
|
86
|
+
// @type function
|
|
87
|
+
// @access private
|
|
88
|
+
//
|
|
89
|
+
// @requires {function} th-list-get-index-deep
|
|
90
|
+
// @requires {function} th-list-has-index
|
|
91
|
+
//
|
|
92
|
+
// @param {list} $heading A heading list (required).
|
|
93
|
+
// @param {string} $property-name (font-size | line-height | margin-top | margin-bottom | breakpoint) A heading property name (required).
|
|
94
|
+
//
|
|
95
|
+
// @returns {number} The heading property value.
|
|
96
|
+
//
|
|
97
|
+
// @example scss Return font size from a heading.
|
|
98
|
+
// // _th-property-get(h1, font-size)
|
|
99
|
+
|
|
100
|
+
@function _th-property-get(
|
|
101
|
+
$heading,
|
|
102
|
+
$property-name
|
|
103
|
+
){
|
|
104
|
+
$_return: false;
|
|
105
|
+
$property-indexes: th-list-get-index-deep($th-properties, $property-name);
|
|
106
|
+
@if list == type-of($heading) {
|
|
107
|
+
$_return: $heading;
|
|
108
|
+
@for $i from 1 through length($property-indexes) {
|
|
109
|
+
@if th-list-has-index($_return, nth($property-indexes, $i)) {
|
|
110
|
+
$_return: nth($_return, nth($property-indexes, $i));
|
|
111
|
+
} @else if $i == 1 {
|
|
112
|
+
$_return: false;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
} @else if $property-indexes == 1 {
|
|
116
|
+
$_return: $heading;
|
|
117
|
+
}
|
|
118
|
+
@return $_return;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// th-property-font-size
|
|
122
|
+
// Return heading font size value.
|
|
123
|
+
//
|
|
124
|
+
// @since 0.0.10
|
|
125
|
+
// @type function
|
|
126
|
+
//
|
|
127
|
+
// @requires th-property
|
|
128
|
+
//
|
|
129
|
+
// @param {list | string} $heading A heading map key or list (required).
|
|
130
|
+
// @param {number | boolean} $breakpoint A heading list breakpoint.
|
|
131
|
+
// @param {boolean} $convert (true) If returned value should be unit converted.
|
|
132
|
+
// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
|
|
133
|
+
//
|
|
134
|
+
// @returns {number} The heading font size value.
|
|
135
|
+
//
|
|
136
|
+
// @example scss Return font size from a h1 heading map.
|
|
137
|
+
// // th-property-font-size(h1)
|
|
138
|
+
// @example scss Return font size from a h1 heading map with a breakpoint of 768px.
|
|
139
|
+
// // th-property-font-size(
|
|
140
|
+
// // $heading: h1,
|
|
141
|
+
// // $breakpoint: 768px
|
|
142
|
+
// // )
|
|
143
|
+
// @example scss Return font size from a h1 heading map without unit conversion.
|
|
144
|
+
// // th-property-font-size(
|
|
145
|
+
// // $heading: h1,
|
|
146
|
+
// // $convert: false
|
|
147
|
+
// // )
|
|
148
|
+
// @example scss Return font size from a h1 with a base font size of 24px.
|
|
149
|
+
// // th-property-font-size(
|
|
150
|
+
// // $heading: h1,
|
|
151
|
+
// // $base-font-size: 24px
|
|
152
|
+
// // )
|
|
153
|
+
|
|
154
|
+
@function th-property-font-size(
|
|
155
|
+
$heading,
|
|
156
|
+
$breakpoint: false,
|
|
157
|
+
$convert: true,
|
|
158
|
+
$base-font-size: $th-base-font-size
|
|
159
|
+
){
|
|
160
|
+
$_return: th-property(
|
|
161
|
+
$heading: $heading,
|
|
162
|
+
$property-name: font-size,
|
|
163
|
+
$breakpoint: $breakpoint,
|
|
164
|
+
$convert: $convert,
|
|
165
|
+
$base-font-size: $base-font-size
|
|
166
|
+
);
|
|
167
|
+
@return $_return;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
// th-property-line-height
|
|
171
|
+
// Return heading line height value.
|
|
172
|
+
//
|
|
173
|
+
// @since 0.0.10
|
|
174
|
+
// @type function
|
|
175
|
+
//
|
|
176
|
+
// @requires th-property
|
|
177
|
+
//
|
|
178
|
+
// @param {list | string} $heading A heading map key or list (required).
|
|
179
|
+
// @param {number} $breakpoint A heading list breakpoint.
|
|
180
|
+
// @param {boolean} $convert (true) If returned value should be unit converted.
|
|
181
|
+
// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
|
|
182
|
+
//
|
|
183
|
+
// @returns {number} The heading line height value.
|
|
184
|
+
//
|
|
185
|
+
// @example scss Return line height from a h1 heading map.
|
|
186
|
+
// // th-property-line-height(h1)
|
|
187
|
+
// @example scss Return line height from a h1 heading map with a breakpoint of 768px.
|
|
188
|
+
// // th-property-line-height(
|
|
189
|
+
// // $heading: h1,
|
|
190
|
+
// // $breakpoint: 768px
|
|
191
|
+
// // )
|
|
192
|
+
// @example scss Return line height from a h1 heading map without unit conversion.
|
|
193
|
+
// // th-property-line-height(
|
|
194
|
+
// // $heading: h1,
|
|
195
|
+
// // $convert: false
|
|
196
|
+
// // )
|
|
197
|
+
// @example scss Return line height from a h1 with a base font size of 24px.
|
|
198
|
+
// // th-property-line-height(
|
|
199
|
+
// // $heading: h1,
|
|
200
|
+
// // $base-font-size: 24px
|
|
201
|
+
// // )
|
|
202
|
+
|
|
203
|
+
@function th-property-line-height(
|
|
204
|
+
$heading,
|
|
205
|
+
$breakpoint: false,
|
|
206
|
+
$base-font-size: $th-base-font-size,
|
|
207
|
+
$convert: true
|
|
208
|
+
){
|
|
209
|
+
$_return: th-property(
|
|
210
|
+
$heading: $heading,
|
|
211
|
+
$property-name: line-height,
|
|
212
|
+
$breakpoint: $breakpoint,
|
|
213
|
+
$convert: $convert,
|
|
214
|
+
$base-font-size: $base-font-size
|
|
215
|
+
);
|
|
216
|
+
@return $_return;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
// th-property-margin-top
|
|
220
|
+
// Return heading margin top value.
|
|
221
|
+
//
|
|
222
|
+
// @since 0.0.10
|
|
223
|
+
// @type function
|
|
224
|
+
//
|
|
225
|
+
// @requires th-property
|
|
226
|
+
//
|
|
227
|
+
// @param {list | string} $heading A heading map key or list (required).
|
|
228
|
+
// @param {number | boolean} $breakpoint (false) A heading list breakpoint.
|
|
229
|
+
// @param {boolean} $convert (true) If returned value should be unit converted.
|
|
230
|
+
// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
|
|
231
|
+
//
|
|
232
|
+
// @returns {number} The heading margin top value.
|
|
233
|
+
//
|
|
234
|
+
// @example scss Return margin top from a h1 heading map.
|
|
235
|
+
// // th-property-margin-top(h1)
|
|
236
|
+
// @example scss Return margin top from a h1 heading map with a breakpoint of 768px.
|
|
237
|
+
// // th-property-margin-top(
|
|
238
|
+
// // $heading: h1,
|
|
239
|
+
// // $breakpoint: 768px
|
|
240
|
+
// // )
|
|
241
|
+
// @example scss Return margin top from a h1 heading map without unit conversion.
|
|
242
|
+
// // th-property-margin-top(
|
|
243
|
+
// // $heading: h1,
|
|
244
|
+
// // $convert: false
|
|
245
|
+
// // )
|
|
246
|
+
// @example scss Return margin top from a h1 with a base font size of 24px.
|
|
247
|
+
// // th-property-margin-top(
|
|
248
|
+
// // $heading: h1,
|
|
249
|
+
// // $base-font-size: 24px
|
|
250
|
+
// // )
|
|
251
|
+
|
|
252
|
+
@function th-property-margin-top(
|
|
253
|
+
$heading,
|
|
254
|
+
$breakpoint: false,
|
|
255
|
+
$base-font-size: $th-base-font-size,
|
|
256
|
+
$convert: true
|
|
257
|
+
){
|
|
258
|
+
$_return: th-property(
|
|
259
|
+
$heading: $heading,
|
|
260
|
+
$property-name: margin-top,
|
|
261
|
+
$breakpoint: $breakpoint,
|
|
262
|
+
$convert: $convert,
|
|
263
|
+
$base-font-size: $base-font-size
|
|
264
|
+
);
|
|
265
|
+
@return $_return;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
// th-property-margin-bottom
|
|
269
|
+
// Return heading margin bottom value.
|
|
270
|
+
//
|
|
271
|
+
// @since 0.0.10
|
|
272
|
+
// @type function
|
|
273
|
+
//
|
|
274
|
+
// @requires th-property
|
|
275
|
+
//
|
|
276
|
+
// @param {list | string} $heading A heading map key or list (required).
|
|
277
|
+
// @param {number | boolean} $breakpoint (false) A heading list breakpoint.
|
|
278
|
+
// @param {boolean} $convert (true) If returned value should be unit converted.
|
|
279
|
+
// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
|
|
280
|
+
//
|
|
281
|
+
// @returns {number} The heading margin bottom value.
|
|
282
|
+
//
|
|
283
|
+
// @example scss Return margin bottom from a h1 heading map.
|
|
284
|
+
// // th-property-margin-bottom(h1)
|
|
285
|
+
// @example scss Return margin bottom from a h1 heading map with a breakpoint of 768px.
|
|
286
|
+
// // th-property-margin-bottom(
|
|
287
|
+
// // $heading: h1,
|
|
288
|
+
// // $breakpoint: 768px
|
|
289
|
+
// // )
|
|
290
|
+
// @example scss Return margin bottom from a h1 heading map without unit conversion.
|
|
291
|
+
// // th-property-margin-bottom(
|
|
292
|
+
// // $heading: h1,
|
|
293
|
+
// // $convert: false
|
|
294
|
+
// // )
|
|
295
|
+
// @example scss Return margin bottom from a h1 with a base font size of 24px.
|
|
296
|
+
// // th-property-margin-bottom(
|
|
297
|
+
// // $heading: h1,
|
|
298
|
+
// // $base-font-size: 24px
|
|
299
|
+
// // )
|
|
300
|
+
|
|
301
|
+
@function th-property-margin-bottom(
|
|
302
|
+
$heading,
|
|
303
|
+
$breakpoint: false,
|
|
304
|
+
$base-font-size: $th-base-font-size,
|
|
305
|
+
$convert: true
|
|
306
|
+
){
|
|
307
|
+
$_return: th-property(
|
|
308
|
+
$heading: $heading,
|
|
309
|
+
$property-name: margin-bottom,
|
|
310
|
+
$breakpoint: $breakpoint,
|
|
311
|
+
$convert: $convert,
|
|
312
|
+
$base-font-size: $base-font-size
|
|
313
|
+
);
|
|
314
|
+
@return $_return;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
// th-property-default
|
|
318
|
+
// Return default property value.
|
|
319
|
+
//
|
|
320
|
+
// @since 0.0.10
|
|
321
|
+
// @type function
|
|
322
|
+
//
|
|
323
|
+
// @requires _th-property-unit-convert
|
|
324
|
+
//
|
|
325
|
+
// @param {string} $property-name (font-size | line-height | margin-top | margin-bottom | breakpoint) A property name (required).
|
|
326
|
+
// @param {boolean} $convert (true) If returned value should be unit converted.
|
|
327
|
+
// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
|
|
328
|
+
//
|
|
329
|
+
// @returns {number} The default property value.
|
|
330
|
+
//
|
|
331
|
+
// @example scss Get default font size.
|
|
332
|
+
// // th-property-default(font-size)
|
|
333
|
+
|
|
334
|
+
@function th-property-default(
|
|
335
|
+
$property-name,
|
|
336
|
+
$convert: true,
|
|
337
|
+
$base-font-size: $th-base-font-size
|
|
338
|
+
){
|
|
339
|
+
$_return: $property-name;
|
|
340
|
+
$_return: map-get($th-property-defaults, $property-name);
|
|
341
|
+
@if $convert == true {
|
|
342
|
+
$_return: _th-property-unit-convert(
|
|
343
|
+
$property-name: $property-name,
|
|
344
|
+
$property-value: $_return,
|
|
345
|
+
$base-font-size: $base-font-size
|
|
346
|
+
);
|
|
347
|
+
}
|
|
348
|
+
@return $_return;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
// _th-property-unit-convert
|
|
352
|
+
// Returns a property's converted unit value.
|
|
353
|
+
//
|
|
354
|
+
// @since 0.0.11
|
|
355
|
+
// @type function
|
|
356
|
+
// @access private
|
|
357
|
+
//
|
|
358
|
+
// @requires th-unit-convert-em
|
|
359
|
+
// @requires th-unit-convert-rem
|
|
360
|
+
// @requires th-unit-convert-rel
|
|
361
|
+
// @requires th-unit-convert-px
|
|
362
|
+
//
|
|
363
|
+
// @param {string} $property-name (font-size | line-height | margin-top | margin-bottom | breakpoint) A property name (required).
|
|
364
|
+
// @param {number} $property-value The number value of the property (required).
|
|
365
|
+
// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
|
|
366
|
+
//
|
|
367
|
+
// @returns {number} The converted unit value.
|
|
368
|
+
//
|
|
369
|
+
// @example scss Convert heading font size of 14px.
|
|
370
|
+
// // _th-property-unit-convert(
|
|
371
|
+
// // $property-name: font-size,
|
|
372
|
+
// // $property-value: 14px
|
|
373
|
+
// // )
|
|
374
|
+
// @example scss Convert heading font size of 14px with base font size of 20px.
|
|
375
|
+
// // _th-property-unit-convert(
|
|
376
|
+
// // $property-name: font-size,
|
|
377
|
+
// // $property-value: 14px,
|
|
378
|
+
// // $base-font-size: 20px
|
|
379
|
+
// // )
|
|
380
|
+
|
|
381
|
+
@function _th-property-unit-convert(
|
|
382
|
+
$property-name,
|
|
383
|
+
$property-value,
|
|
384
|
+
$base-font-size: $th-base-font-size
|
|
385
|
+
){
|
|
386
|
+
$_return: $property-value;
|
|
387
|
+
$unit: map-get($th-property-units, $property-name);
|
|
388
|
+
@if not $unit or $unit == unit($property-value) {
|
|
389
|
+
@return $_return;
|
|
390
|
+
}
|
|
391
|
+
$function: th-unit-convert-#{$unit};
|
|
392
|
+
@if function-exists($function) {
|
|
393
|
+
$_return: call($function, $property-value, $base-font-size);
|
|
394
|
+
}
|
|
395
|
+
@return $_return;
|
|
396
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
// Breakpoint
|
|
2
|
+
//
|
|
3
|
+
// @group Mixins / Breakpoint
|
|
4
|
+
// @author Elliot Mitchum
|
|
5
|
+
|
|
6
|
+
// th-breakpoint-heading
|
|
7
|
+
// Output styles for a heading list within a media query.
|
|
8
|
+
//
|
|
9
|
+
// @since 0.0.10
|
|
10
|
+
// @type mixin
|
|
11
|
+
//
|
|
12
|
+
// @requires {mixin} th-heading
|
|
13
|
+
//
|
|
14
|
+
// @param {list | string} $heading A heading map key or list (required).
|
|
15
|
+
// @param {number | boolean} $breakpoint (false) A heading list breakpoint (required).
|
|
16
|
+
// @param {string} $direction (min-width | max-width) Media query direction.
|
|
17
|
+
// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
|
|
18
|
+
//
|
|
19
|
+
// @example scss Output h1 styles with min width media query.
|
|
20
|
+
// // @include th-breakpoint-heading(
|
|
21
|
+
// // $heading: h1,
|
|
22
|
+
// // $breakpoint: 768px
|
|
23
|
+
// // )
|
|
24
|
+
// @example scss Output h1 styles with max width media query.
|
|
25
|
+
// // @include th-breakpoint-heading(
|
|
26
|
+
// // $heading: h1,
|
|
27
|
+
// // $breakpoint: 768px,
|
|
28
|
+
// // $direction: max-width
|
|
29
|
+
// // )
|
|
30
|
+
// @example scss Output h1 styles with a base font size of 48px.
|
|
31
|
+
// // @include th-breakpoint-heading(
|
|
32
|
+
// // $heading: h1,
|
|
33
|
+
// // $base-font-size: 48px
|
|
34
|
+
// // )
|
|
35
|
+
|
|
36
|
+
@mixin th-breakpoint-heading(
|
|
37
|
+
$heading,
|
|
38
|
+
$breakpoint,
|
|
39
|
+
$direction: min-width,
|
|
40
|
+
$convert: true,
|
|
41
|
+
$base-font-size: $th-base-font-size
|
|
42
|
+
){
|
|
43
|
+
@media screen and (#{$direction}: #{$breakpoint}){
|
|
44
|
+
@include th-heading(
|
|
45
|
+
$heading: $heading,
|
|
46
|
+
$breakpoint: $breakpoint,
|
|
47
|
+
$convert: $convert,
|
|
48
|
+
$base-font-size: $base-font-size
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
// Heading
|
|
2
|
+
//
|
|
3
|
+
// @group Mixins / Heading
|
|
4
|
+
// @author Elliot Mitchum
|
|
5
|
+
|
|
6
|
+
// th-heading
|
|
7
|
+
// Output styles for a heading list.
|
|
8
|
+
//
|
|
9
|
+
// @since 0.0.10
|
|
10
|
+
// @type mixin
|
|
11
|
+
//
|
|
12
|
+
// @requires {function} th-heading
|
|
13
|
+
// @requires {function} th-property-font-size
|
|
14
|
+
// @requires {mixin} th-property-margin-top
|
|
15
|
+
// @requires {mixin} th-property-margin-bottom
|
|
16
|
+
// @requires {mixin} th-property-font-size
|
|
17
|
+
// @requires {mixin} th-property-line-height
|
|
18
|
+
//
|
|
19
|
+
// @param {string} $heading A heading map key (required).
|
|
20
|
+
// @param {number | boolean} $breakpoint (false) A heading list breakpoint.
|
|
21
|
+
// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
|
|
22
|
+
//
|
|
23
|
+
// @example scss Output h1 styles.
|
|
24
|
+
// // th-heading(h1)
|
|
25
|
+
// @example scss Output h1 styles with 768px breakpoint.
|
|
26
|
+
// // th-heading(
|
|
27
|
+
// // $heading: h1,
|
|
28
|
+
// // $breakpoint: 768px
|
|
29
|
+
// // )
|
|
30
|
+
// @example scss Output h1 styles without unit conversion.
|
|
31
|
+
// // th-heading(
|
|
32
|
+
// // $heading: h1,
|
|
33
|
+
// // $convert: false
|
|
34
|
+
// // )
|
|
35
|
+
// @example scss Output h1 styles with a base font size of 48px.
|
|
36
|
+
// // th-heading(
|
|
37
|
+
// // $heading: h1,
|
|
38
|
+
// // $base-font-size: 48px
|
|
39
|
+
// // )
|
|
40
|
+
|
|
41
|
+
@mixin th-heading(
|
|
42
|
+
$heading,
|
|
43
|
+
$breakpoint: false,
|
|
44
|
+
$convert: true,
|
|
45
|
+
$base-font-size: $th-base-font-size
|
|
46
|
+
){
|
|
47
|
+
$heading: th-heading(
|
|
48
|
+
$heading: $heading,
|
|
49
|
+
$breakpoint: $breakpoint
|
|
50
|
+
);
|
|
51
|
+
$font-size: th-property-font-size(
|
|
52
|
+
$heading: $heading,
|
|
53
|
+
$breakpoint: $breakpoint,
|
|
54
|
+
$base-font-size: $base-font-size,
|
|
55
|
+
$convert: false
|
|
56
|
+
);
|
|
57
|
+
@include th-property-margin-top(
|
|
58
|
+
$heading: $heading,
|
|
59
|
+
$breakpoint: $breakpoint,
|
|
60
|
+
$convert: $convert,
|
|
61
|
+
$base-font-size: $font-size
|
|
62
|
+
);
|
|
63
|
+
@include th-property-margin-bottom(
|
|
64
|
+
$heading: $heading,
|
|
65
|
+
$breakpoint: $breakpoint,
|
|
66
|
+
$convert: $convert,
|
|
67
|
+
$base-font-size: $font-size
|
|
68
|
+
);
|
|
69
|
+
@include th-property-font-size(
|
|
70
|
+
$heading: $heading,
|
|
71
|
+
$breakpoint: $breakpoint,
|
|
72
|
+
$convert: $convert,
|
|
73
|
+
$base-font-size: $base-font-size
|
|
74
|
+
);
|
|
75
|
+
@include th-property-line-height(
|
|
76
|
+
$heading: $heading,
|
|
77
|
+
$breakpoint: $breakpoint,
|
|
78
|
+
$convert: $convert,
|
|
79
|
+
$base-font-size: $font-size
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// th-headings
|
|
84
|
+
// Output styles for a heading accross all breakpoints.
|
|
85
|
+
//
|
|
86
|
+
// @since 0.0.10
|
|
87
|
+
// @type mixin
|
|
88
|
+
//
|
|
89
|
+
// @requires {function} th-heading-get-map
|
|
90
|
+
// @requires {function} _th-heading-has-next
|
|
91
|
+
// @requires {function} th-property
|
|
92
|
+
// @requires {mixin} th-breakpoint-heading
|
|
93
|
+
// @requires {mixin} th-heading
|
|
94
|
+
//
|
|
95
|
+
// @param {list | string} $heading A heading map key or list (required).
|
|
96
|
+
// @param {string} $direction (min-width | max-width) Media query direction.
|
|
97
|
+
// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
|
|
98
|
+
//
|
|
99
|
+
// @example scss Output all h1 styles.
|
|
100
|
+
// // @include th-headings(h1)
|
|
101
|
+
// @example scss Output all h1 styles with max width media queries.
|
|
102
|
+
// // @include th-headings(
|
|
103
|
+
// // $heading: h1,
|
|
104
|
+
// // $direction: max-width
|
|
105
|
+
// // )
|
|
106
|
+
|
|
107
|
+
@mixin th-headings(
|
|
108
|
+
$heading,
|
|
109
|
+
$direction: min-width,
|
|
110
|
+
$convert: true,
|
|
111
|
+
$base-font-size: $th-base-font-size
|
|
112
|
+
){
|
|
113
|
+
$heading-map: th-heading-get-map($heading);
|
|
114
|
+
@if _th-heading-has-next($heading-map) {
|
|
115
|
+
@each $heading in $heading-map {
|
|
116
|
+
$breakpoint: th-property($heading, breakpoint);
|
|
117
|
+
@if $breakpoint {
|
|
118
|
+
@include th-breakpoint-heading(
|
|
119
|
+
$heading: $heading,
|
|
120
|
+
$breakpoint: $breakpoint,
|
|
121
|
+
$direction: $direction,
|
|
122
|
+
$convert: $convert,
|
|
123
|
+
$base-font-size: $base-font-size
|
|
124
|
+
);
|
|
125
|
+
} @else {
|
|
126
|
+
@include th-heading(
|
|
127
|
+
$heading: $heading,
|
|
128
|
+
$convert: $convert,
|
|
129
|
+
$base-font-size: $base-font-size
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
} @else {
|
|
134
|
+
@include th-heading(
|
|
135
|
+
$heading: $heading,
|
|
136
|
+
$base-font-size: $base-font-size
|
|
137
|
+
);
|
|
138
|
+
}
|
|
139
|
+
}
|