type-heading 0.0.13 → 0.0.14

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.
Files changed (12) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +28 -12
  3. data/stylesheets/type-heading/_settings.scss +57 -24
  4. data/stylesheets/type-heading/functions/_core.scss +67 -32
  5. data/stylesheets/type-heading/functions/_heading.scss +99 -102
  6. data/stylesheets/type-heading/functions/_helpers.scss +336 -267
  7. data/stylesheets/type-heading/functions/_property.scss +288 -296
  8. data/stylesheets/type-heading/mixins/_breakpoint.scss +19 -20
  9. data/stylesheets/type-heading/mixins/_core.scss +148 -31
  10. data/stylesheets/type-heading/mixins/_heading.scss +65 -144
  11. data/stylesheets/type-heading/mixins/_property.scss +237 -129
  12. metadata +2 -2
data/stylesheets/type-heading/mixins/_property.scss CHANGED
@@ -1,149 +1,257 @@
1
- // Property
2
- //
3
- // @group Mixins / Property
4
- // @author Elliot Mitchum
1
+ ////
2
+ /// Property
3
+ /// @group Property
4
+ ////
5
5
 
6
- // th-property-font-size
7
- // Output heading font size styles.
8
- //
9
- // @since 0.0.10
10
- // @type mixin
11
- //
12
- // @requires {function} th-property-font-size
13
- // @requires {function} _th-core-global-breakpoint
14
- //
15
- // @param {string} $heading A heading map key (required).
16
- // @param {number | boolean} $breakpoint (false) A heading list breakpoint.
17
- // @param {boolean} $convert (true) If returned value should be unit converted.
18
- // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
19
- //
20
- // @example scss Output h1 font size styles.
21
- // // @include th-property-font-size(h1)
22
- // @example scss Output h1 font size styles with 768px breakpoint.
23
- // // @include th-property-font-size(
24
- // // $heading: h1,
25
- // // $breakpoint: 768px
26
- // // )
6
+ // th-property()
7
+ /// Output heading property style.
8
+ ///
9
+ /// @since 0.0.14
10
+ ///
11
+ /// @param {list | string} $heading - A heading map key or list.
12
+ /// @param {string} $property-name - (font-size | line-height | margin-top | margin-bottom | breakpoint) A heading property name.
13
+ /// @param {number} $breakpoint [false] - A heading list breakpoint.
14
+ /// @param {boolean | string} $convert [true] - (true | false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
15
+ /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
16
+ ///
17
+ /// @example scss - Output h1 font size styles.
18
+ /// @include th-property-font-size(h1)
19
+ /// @example scss - Output h1 font size styles with 768px breakpoint.
20
+ /// @include th-property-font-size(
21
+ /// $heading: h1,
22
+ /// $breakpoint: 768px
23
+ /// )
24
+ /// @example scss - Output h1 font size styles without unit conversion.
25
+ /// @include th-property(
26
+ /// $heading: h1,
27
+ /// $property-name: font-size,
28
+ /// $convert: false
29
+ /// )
30
+ /// @example scss - Output h1 font size styles and unit override to percent.
31
+ /// @include th-property(
32
+ /// $heading: h1,
33
+ /// $property-name: font-size,
34
+ /// $convert: percent
35
+ /// )
36
+ /// @example scss - Output h1 font size styles with a base font size of 24px.
37
+ /// @include th-property(
38
+ /// $heading: h1,
39
+ /// $property-name: font-size,
40
+ /// $base-font-size: 24px
41
+ /// )
42
+
43
+ @mixin th-property(
44
+ $heading,
45
+ $property-name,
46
+ $breakpoint: false,
47
+ $convert: true,
48
+ $base-font-size: $th-base-font-size
49
+ ){
50
+ @if font-size != $property-name {
51
+ $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size);
52
+ }
53
+ @if th-list-has($_th-core-properties, $property-name) {
54
+ $breakpoint: _th-core-breakpoint-context($breakpoint);
55
+ #{$property-name}: call(th-property-#{$property-name},
56
+ $heading: $heading,
57
+ $breakpoint: $breakpoint,
58
+ $convert: $convert,
59
+ $base-font-size: $base-font-size
60
+ );
61
+ }
62
+ }
63
+
64
+ // th-property-font-size()
65
+ /// Output heading font size styles.
66
+ ///
67
+ /// @since 0.0.10
68
+ ///
69
+ /// @param {string} $heading - A heading map key.
70
+ /// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
71
+ /// @param {boolean | string} $convert [true] - (false | px | em | rem | rel | percent) - If returned value should be unit converted or overridden.
72
+ /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
73
+ ///
74
+ /// @example scss - Output h1 font size styles.
75
+ /// @include th-property-font-size(h1)
76
+ /// @example scss - Output h1 font size styles with 768px breakpoint.
77
+ /// @include th-property-font-size(
78
+ /// $heading: h1,
79
+ /// $breakpoint: 768px
80
+ /// )
81
+ /// @example scss - Output h1 font size styles without unit conversion.
82
+ /// @include th-property-font-size(
83
+ /// $heading: h1,
84
+ /// $convert: false
85
+ /// )
86
+ /// @example scss - Output h1 font size styles and unit override to percent.
87
+ /// @include th-property-font-size(
88
+ /// $heading: h1,
89
+ /// $convert: percent
90
+ /// )
91
+ /// @example scss - Output h1 font size with a base font size of 24px.
92
+ /// @include th-property-font-size(
93
+ /// $heading: h1,
94
+ /// $base-font-size: 24px
95
+ /// )
27
96
 
28
97
  @mixin th-property-font-size(
29
- $heading,
30
- $breakpoint: false,
31
- $convert: true,
32
- $base-font-size: $th-base-font-size
98
+ $heading,
99
+ $breakpoint: false,
100
+ $convert: true,
101
+ $base-font-size: $th-base-font-size
33
102
  ){
34
- $breakpoint: _th-core-global-breakpoint($breakpoint);
35
- font-size: th-property-font-size(
36
- $heading: $heading,
37
- $breakpoint: $breakpoint,
38
- $convert: $convert,
39
- $base-font-size: $base-font-size
40
- );
103
+ @include th-property(
104
+ $property-name: font-size,
105
+ $heading: $heading,
106
+ $breakpoint: $breakpoint,
107
+ $convert: $convert,
108
+ $base-font-size: $base-font-size
109
+ );
41
110
  }
42
111
 
43
- // th-property-line-height
44
- // Output heading line height styles.
45
- //
46
- // @since 0.0.10
47
- // @type mixin
48
- //
49
- // @requires {function} th-property-line-height
50
- //
51
- // @param {string} $heading A heading map key (required).
52
- // @param {number | boolean} $breakpoint (false) A heading list breakpoint.
53
- // @param {boolean} $convert (true) If returned value should be unit converted.
54
- // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
55
- //
56
- // @example scss Output h1 line height styles.
57
- // // @include th-property-line-height(h1)
58
- // @example scss Output h1 line height styles with 768px breakpoint.
59
- // // @include th-property-line-height(
60
- // // $heading: h1,
61
- // // $breakpoint: 768px
62
- // // )
112
+ // th-property-line-height()
113
+ /// Output heading line height styles.
114
+ ///
115
+ /// @since 0.0.10
116
+ ///
117
+ /// @param {string} $heading - A heading map key.
118
+ /// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
119
+ /// @param {boolean | string} $convert [true] - (false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
120
+ /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
121
+ ///
122
+ /// @example scss - Output h1 line height styles.
123
+ /// @include th-property-line-height(h1)
124
+ /// @example scss - Output h1 line height styles with 768px breakpoint.
125
+ /// @include th-property-line-height(
126
+ /// $heading: h1,
127
+ /// $breakpoint: 768px
128
+ /// )
129
+ /// @example scss - Output h1 line height styles without unit conversion.
130
+ /// @include th-property-line-height(
131
+ /// $heading: h1,
132
+ /// $convert: false
133
+ /// )
134
+ /// @example scss - Output h1 line height styles and unit override to percent.
135
+ /// @include th-property-line-height(
136
+ /// $heading: h1,
137
+ /// $convert: percent
138
+ /// )
139
+ /// @example scss - Output h1 line height with a base font size of 24px.
140
+ /// @include th-property-line-height(
141
+ /// $heading: h1,
142
+ /// $base-font-size: 24px
143
+ /// )
63
144
 
64
145
  @mixin th-property-line-height(
65
- $heading,
66
- $breakpoint: false,
67
- $convert: true,
68
- $base-font-size: $th-base-font-size
146
+ $heading,
147
+ $breakpoint: false,
148
+ $convert: true,
149
+ $base-font-size: $th-base-font-size
69
150
  ){
70
- $breakpoint: _th-core-global-breakpoint($breakpoint);
71
- line-height: th-property-line-height(
72
- $heading: $heading,
73
- $breakpoint: $breakpoint,
74
- $convert: $convert,
75
- $base-font-size: $base-font-size
76
- );
151
+ $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size);
152
+ @include th-property(
153
+ $property-name: line-height,
154
+ $heading: $heading,
155
+ $breakpoint: $breakpoint,
156
+ $convert: $convert,
157
+ $base-font-size: $base-font-size
158
+ );
77
159
  }
78
160
 
79
- // th-property-margin-top
80
- // Output heading margin top styles.
81
- //
82
- // @since 0.0.10
83
- // @type mixin
84
- //
85
- // @requires {function} th-property-margin-top
86
- //
87
- // @param {string} $heading A heading map key (required).
88
- // @param {number | boolean} $breakpoint (false) A heading list breakpoint.
89
- // @param {boolean} $convert (true) If returned value should be unit converted.
90
- // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
91
- //
92
- // @example scss Output h1 margin top styles.
93
- // // @include th-property-margin-top(h1)
94
- // @example scss Output h1 margin top styles with 768px breakpoint.
95
- // // @include th-property-margin-top(
96
- // // $heading: h1,
97
- // // $breakpoint: 768px
98
- // // )
161
+ // th-property-margin-top()
162
+ /// Output heading margin top styles.
163
+ ///
164
+ /// @since 0.0.10
165
+ ///
166
+ /// @param {string} $heading - A heading map key.
167
+ /// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
168
+ /// @param {boolean | string} $convert [true] - (false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
169
+ /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
170
+ ///
171
+ /// @example scss - Output h1 margin top styles.
172
+ /// @include th-property-margin-top(h1)
173
+ /// @example scss - Output h1 margin top styles with 768px breakpoint.
174
+ /// @include th-property-margin-top(
175
+ /// $heading: h1,
176
+ /// $breakpoint: 768px
177
+ /// )
178
+ /// @example scss - Output h1 margin top styles without unit conversion.
179
+ /// @include th-property-margin-top(
180
+ /// $heading: h1,
181
+ /// $convert: false
182
+ /// )
183
+ /// @example scss - Output h1 margin top styles and unit override to percent.
184
+ /// @include th-property-margin-top(
185
+ /// $heading: h1,
186
+ /// $convert: percent
187
+ /// )
188
+ /// @example scss - Output h1 margin top with a base font size of 24px.
189
+ /// @include th-property-margin-top(
190
+ /// $heading: h1,
191
+ /// $base-font-size: 24px
192
+ /// )
99
193
 
100
194
  @mixin th-property-margin-top(
101
- $heading,
102
- $breakpoint: false,
103
- $convert: true,
104
- $base-font-size: $th-base-font-size
195
+ $heading,
196
+ $breakpoint: false,
197
+ $convert: true,
198
+ $base-font-size: $th-base-font-size
105
199
  ){
106
- $breakpoint: _th-core-global-breakpoint($breakpoint);
107
- margin-top: th-property-margin-top(
108
- $heading: $heading,
109
- $breakpoint: $breakpoint,
110
- $convert: $convert,
111
- $base-font-size: $base-font-size
112
- );
200
+ $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size);
201
+ @include th-property(
202
+ $property-name: margin-top,
203
+ $heading: $heading,
204
+ $breakpoint: $breakpoint,
205
+ $convert: $convert,
206
+ $base-font-size: $base-font-size
207
+ );
113
208
  }
114
209
 
115
- // th-property-margin-bottom
116
- // Output heading margin bottom styles.
117
- //
118
- // @since 0.0.10
119
- // @type mixin
120
- //
121
- // @requires {function} th-property-margin-bottom
122
- //
123
- // @param {string} $heading A heading map key (required).
124
- // @param {number | boolean} $breakpoint (false) A heading list breakpoint.
125
- // @param {boolean} $convert (true) If returned value should be unit converted.
126
- // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
127
- //
128
- // @example scss Output h1 margin bottom styles.
129
- // // @include th-property-margin-bottom(h1)
130
- // @example scss Output h1 margin bottom styles with 768px breakpoint.
131
- // // @include th-property-margin-bottom(
132
- // // $heading: h1,
133
- // // $breakpoint: 768px
134
- // // )
210
+ // th-property-margin-bottom()
211
+ /// Output heading margin bottom styles.
212
+ ///
213
+ /// @since 0.0.10
214
+ ///
215
+ /// @param {string} $heading - A heading map key.
216
+ /// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
217
+ /// @param {boolean | string} $convert [true] - (false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
218
+ /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
219
+ ///
220
+ /// @example scss - Output h1 margin bottom styles.
221
+ /// @include th-property-margin-bottom(h1)
222
+ /// @example scss - Output h1 margin bottom styles with 768px breakpoint.
223
+ /// @include th-property-margin-bottom(
224
+ /// $heading: h1,
225
+ /// $breakpoint: 768px
226
+ /// )
227
+ /// @example scss - Output h1 margin bottom styles without unit conversion.
228
+ /// @include th-property-margin-bottom(
229
+ /// $heading: h1,
230
+ /// $convert: false
231
+ /// )
232
+ /// @example scss - Output h1 margin bottom styles and unit override to percent.
233
+ /// @include th-property-margin-bottom(
234
+ /// $heading: h1,
235
+ /// $convert: percent
236
+ /// )
237
+ /// @example scss - Output h1 margin bottom with a base font size of 24px.
238
+ /// @include th-property-margin-bottom(
239
+ /// $heading: h1,
240
+ /// $base-font-size: 24px
241
+ /// )
135
242
 
136
243
  @mixin th-property-margin-bottom(
137
- $heading,
138
- $breakpoint: false,
139
- $convert: true,
140
- $base-font-size: $th-base-font-size
244
+ $heading,
245
+ $breakpoint: false,
246
+ $convert: true,
247
+ $base-font-size: $th-base-font-size
141
248
  ){
142
- $breakpoint: _th-core-global-breakpoint($breakpoint);
143
- margin-bottom: th-property-margin-bottom(
144
- $heading: $heading,
145
- $breakpoint: $breakpoint,
146
- $convert: $convert,
147
- $base-font-size: $base-font-size
148
- );
249
+ $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size);
250
+ @include th-property(
251
+ $property-name: margin-bottom,
252
+ $heading: $heading,
253
+ $breakpoint: $breakpoint,
254
+ $convert: $convert,
255
+ $base-font-size: $base-font-size
256
+ );
149
257
  }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: type-heading
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.13
4
+ version: 0.0.14
5
5
  platform: ruby
6
6
  authors:
7
7
  - Elliot Mitchum
@@ -92,7 +92,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
92
92
  version: '0'
93
93
  requirements: []
94
94
  rubyforge_project:
95
- rubygems_version: 2.4.3
95
+ rubygems_version: 2.4.8
96
96
  signing_key:
97
97
  specification_version: 4
98
98
  summary: A responsive typography tool.