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.
- checksums.yaml +4 -4
- data/README.md +28 -12
- data/stylesheets/type-heading/_settings.scss +57 -24
- data/stylesheets/type-heading/functions/_core.scss +67 -32
- data/stylesheets/type-heading/functions/_heading.scss +99 -102
- data/stylesheets/type-heading/functions/_helpers.scss +336 -267
- data/stylesheets/type-heading/functions/_property.scss +288 -296
- data/stylesheets/type-heading/mixins/_breakpoint.scss +19 -20
- data/stylesheets/type-heading/mixins/_core.scss +148 -31
- data/stylesheets/type-heading/mixins/_heading.scss +65 -144
- data/stylesheets/type-heading/mixins/_property.scss +237 -129
- metadata +2 -2
|
@@ -1,24 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
////
|
|
2
|
+
/// Breakpoint
|
|
3
|
+
/// @group Breakpoint
|
|
4
|
+
////
|
|
5
5
|
|
|
6
|
-
//
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
// // }
|
|
6
|
+
// th-breakpoint()
|
|
7
|
+
/// Output styles with a breakpoint within a media query. Requires the
|
|
8
|
+
/// Breakpoint gem (https://github.com/at-import/breakpoint).
|
|
9
|
+
///
|
|
10
|
+
/// @since 0.0.10
|
|
11
|
+
/// @output Styles to output within the breakpoint.
|
|
12
|
+
/// @throw th-breakpoint() requires the Breakpoint gem - https://github.com/at-import/breakpoint
|
|
13
|
+
///
|
|
14
|
+
/// @param {list} $query - Media query to parse (https://github.com/at-import/breakpoint/wiki/Basic-Media-Queries).
|
|
15
|
+
/// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
|
|
16
|
+
///
|
|
17
|
+
/// @example scss - Output a heading with a 768px within a 768px min-width media query.
|
|
18
|
+
/// @include th-breakpoint(min-width 768px, 768px) {
|
|
19
|
+
/// @include th-heading(h1);
|
|
20
|
+
/// }
|
|
22
21
|
|
|
23
22
|
@mixin th-breakpoint(
|
|
24
23
|
$query,
|
|
@@ -1,37 +1,154 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
// _th-core-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
$_th-core-
|
|
14
|
-
|
|
15
|
-
//
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
//
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
1
|
+
////
|
|
2
|
+
/// Core
|
|
3
|
+
/// @group Core
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
// _th-core-breakpoint-context
|
|
7
|
+
/// Global breakpoint variable for various mixins and functions.
|
|
8
|
+
///
|
|
9
|
+
/// @since 0.0.12
|
|
10
|
+
/// @type Bool | Number
|
|
11
|
+
/// @access private
|
|
12
|
+
|
|
13
|
+
$_th-core-breakpoint-context: false !default;
|
|
14
|
+
|
|
15
|
+
// _th-core-with
|
|
16
|
+
/// Map of heading property values within a th-with loop.
|
|
17
|
+
///
|
|
18
|
+
/// @since 0.0.14
|
|
19
|
+
/// @see {function} th-with
|
|
20
|
+
/// @type Map
|
|
21
|
+
/// @access private
|
|
22
|
+
|
|
23
|
+
$_th-core-with: () !default;
|
|
24
|
+
|
|
25
|
+
// th-with-breakpoint()
|
|
26
|
+
/// Use a breakpoint for a section of code.
|
|
27
|
+
///
|
|
28
|
+
/// @since 0.0.12
|
|
29
|
+
/// @content
|
|
30
|
+
///
|
|
31
|
+
/// @param {number} $breakpoint - A heading list breakpoint.
|
|
32
|
+
///
|
|
33
|
+
/// @example scss - Output a heading with a 768px breakpoint.
|
|
34
|
+
/// @include th-with-breakpoint(768px) {
|
|
35
|
+
/// @include th-heading(h1);
|
|
36
|
+
/// }
|
|
29
37
|
|
|
30
38
|
@mixin th-with-breakpoint(
|
|
31
39
|
$breakpoint
|
|
32
40
|
){
|
|
33
|
-
$cache: $_th-core-
|
|
34
|
-
$_th-core-
|
|
41
|
+
$cache: $_th-core-breakpoint-context;
|
|
42
|
+
$_th-core-breakpoint-context: $breakpoint !global;
|
|
35
43
|
@content;
|
|
36
|
-
$_th-core-
|
|
44
|
+
$_th-core-breakpoint-context: $cache !global;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// _th-heading-loop
|
|
48
|
+
/// Loops through a heading map and outputs @content with breakpoint context.
|
|
49
|
+
///
|
|
50
|
+
/// @since 0.0.14
|
|
51
|
+
/// @access private
|
|
52
|
+
/// @content
|
|
53
|
+
///
|
|
54
|
+
/// @param {type} $name
|
|
55
|
+
/// @param {list | string} $heading - A heading map key or list.
|
|
56
|
+
|
|
57
|
+
@mixin _th-heading-loop(
|
|
58
|
+
$heading
|
|
59
|
+
){
|
|
60
|
+
$heading-map: th-heading-get-map($heading);
|
|
61
|
+
@if _th-heading-has-next($heading-map) {
|
|
62
|
+
@each $heading-list in $heading-map {
|
|
63
|
+
$breakpoint: _th-property-get($heading-list, breakpoint);
|
|
64
|
+
@if $breakpoint {
|
|
65
|
+
@include th-breakpoint($breakpoint, $breakpoint) {
|
|
66
|
+
@content;
|
|
67
|
+
}
|
|
68
|
+
} @else {
|
|
69
|
+
@content;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
} @else {
|
|
73
|
+
@content;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// _th-with-var-set()
|
|
78
|
+
/// Sets $_th-core-with global variable with contextual heading property values.
|
|
79
|
+
///
|
|
80
|
+
/// @since 0.0.14
|
|
81
|
+
/// @see th-with
|
|
82
|
+
/// @access private
|
|
83
|
+
///
|
|
84
|
+
/// @param {list} $heading-list - A list of heading property values.
|
|
85
|
+
/// @param {boolean} $convert [false] - If returned value should be unit converted.
|
|
86
|
+
/// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
|
|
87
|
+
|
|
88
|
+
@mixin _th-with-var-set(
|
|
89
|
+
$heading-list,
|
|
90
|
+
$convert: false,
|
|
91
|
+
$base-font-size: $th-base-font-size
|
|
92
|
+
){
|
|
93
|
+
$th-with-vars: ();
|
|
94
|
+
$font-size: th-property-font-size(
|
|
95
|
+
$heading: $heading-list,
|
|
96
|
+
$base-font-size: $base-font-size,
|
|
97
|
+
$convert: false
|
|
98
|
+
);
|
|
99
|
+
@each $property in $_th-core-properties {
|
|
100
|
+
$base: th-if(font-size == $property, $base-font-size, $font-size);
|
|
101
|
+
$th-with-vars: map-merge($th-with-vars, (
|
|
102
|
+
$property: call(th-property-#{$property},
|
|
103
|
+
$heading: $heading-list,
|
|
104
|
+
$convert: $convert,
|
|
105
|
+
$base-font-size: $base
|
|
106
|
+
))
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
$_th-core-with: $th-with-vars !global;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// _th-with-var-reset()
|
|
113
|
+
/// Resets $th-with-vars global variable.
|
|
114
|
+
///
|
|
115
|
+
/// @since 0.0.14
|
|
116
|
+
/// @access private
|
|
117
|
+
|
|
118
|
+
@mixin _th-with-var-reset {
|
|
119
|
+
$_th-core-with: false !global;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// th-with()
|
|
123
|
+
/// Loop through a headings breakpoints with access to it's
|
|
124
|
+
/// property values as a global variable. $th-font-size, $th-line-height,
|
|
125
|
+
/// $th-margin-top, $th-margin-bottom will become available to you within the
|
|
126
|
+
/// mixin.
|
|
127
|
+
///
|
|
128
|
+
/// @since 0.0.14
|
|
129
|
+
/// @see {function} th-with-get
|
|
130
|
+
/// @content [Styles for the contextual heading list]
|
|
131
|
+
///
|
|
132
|
+
/// @param {list | string} $heading - A heading map key or list.
|
|
133
|
+
/// @param {boolean} $convert [false] - If returned value should be unit converted.
|
|
134
|
+
/// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
|
|
135
|
+
///
|
|
136
|
+
/// @example scss - Output font-size, line-height, margin-top and margin-bottom properties individually for a heading.
|
|
137
|
+
/// @include th-with(h1) {
|
|
138
|
+
/// margin-top: th-with-get(margin-top);
|
|
139
|
+
/// margin-bottom: th-with-get(margin-bottom);
|
|
140
|
+
/// font-size: th-with-get(font-size);;
|
|
141
|
+
/// line-height: th-with-get(line-height);
|
|
142
|
+
/// }
|
|
143
|
+
|
|
144
|
+
@mixin th-with(
|
|
145
|
+
$heading,
|
|
146
|
+
$convert: false,
|
|
147
|
+
$base-font-size: $th-base-font-size
|
|
148
|
+
){
|
|
149
|
+
@include _th-heading-loop($heading) {
|
|
150
|
+
@include _th-with-var-set($heading, $convert, $base-font-size);
|
|
151
|
+
@content;
|
|
152
|
+
@include _th-with-var-reset;
|
|
153
|
+
}
|
|
37
154
|
}
|
|
@@ -1,167 +1,88 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
////
|
|
2
|
+
/// Heading
|
|
3
|
+
/// @group Heading
|
|
4
|
+
////
|
|
5
5
|
|
|
6
|
-
//
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
// // )
|
|
34
|
-
// @example scss Output h1 styles without unit conversion.
|
|
35
|
-
// // th-heading(
|
|
36
|
-
// // $heading: h1,
|
|
37
|
-
// // $convert: false
|
|
38
|
-
// // )
|
|
39
|
-
// @example scss Output h1 styles with a base font size of 48px.
|
|
40
|
-
// // th-heading(
|
|
41
|
-
// // $heading: h1,
|
|
42
|
-
// // $base-font-size: 48px
|
|
43
|
-
// // )
|
|
44
|
-
// @example scss Output h1 styles but only include font-size and line-height
|
|
45
|
-
// // th-heading(
|
|
46
|
-
// // $heading: h1,
|
|
47
|
-
// // $include: (font-size line-height)
|
|
48
|
-
// // )
|
|
6
|
+
// th-heading()
|
|
7
|
+
/// Output styles for a heading list.
|
|
8
|
+
///
|
|
9
|
+
/// @since 0.0.10
|
|
10
|
+
///
|
|
11
|
+
/// @param {string} $heading - A heading map key.
|
|
12
|
+
/// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
|
|
13
|
+
/// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
|
|
14
|
+
/// @param {list | boolean} $include [false] - (font-size | line-height | margin-top | margin-bottom) Restrict output properties.
|
|
15
|
+
///
|
|
16
|
+
/// @example scss Output h1 styles.
|
|
17
|
+
/// th-heading(h1)
|
|
18
|
+
/// @example scss - Output h1 styles with 768px breakpoint.
|
|
19
|
+
/// th-heading(
|
|
20
|
+
/// $heading: h1,
|
|
21
|
+
/// $breakpoint: 768px
|
|
22
|
+
/// )
|
|
23
|
+
/// @example scss - Output h1 styles with a base font size of 48px.
|
|
24
|
+
/// th-heading(
|
|
25
|
+
/// $heading: h1,
|
|
26
|
+
/// $base-font-size: 48px
|
|
27
|
+
/// )
|
|
28
|
+
/// @example scss - Output h1 styles but only include font-size and line-height.
|
|
29
|
+
/// th-heading(
|
|
30
|
+
/// $heading: h1,
|
|
31
|
+
/// $include: (font-size line-height)
|
|
32
|
+
/// )
|
|
49
33
|
|
|
50
34
|
@mixin th-heading(
|
|
51
35
|
$heading,
|
|
52
36
|
$breakpoint: false,
|
|
53
|
-
$convert: true,
|
|
54
37
|
$base-font-size: $th-base-font-size,
|
|
55
38
|
$include: false
|
|
56
39
|
){
|
|
57
|
-
$
|
|
58
|
-
|
|
59
|
-
$
|
|
60
|
-
);
|
|
61
|
-
$font-size: th-property-font-size(
|
|
62
|
-
$heading: $heading,
|
|
63
|
-
$breakpoint: $breakpoint,
|
|
64
|
-
$base-font-size: $base-font-size,
|
|
65
|
-
$convert: false
|
|
66
|
-
);
|
|
67
|
-
$breakpoint: _th-core-global-breakpoint($breakpoint);
|
|
68
|
-
@if not $include or th-list-has($include, margin-top) {
|
|
69
|
-
@include th-property-margin-top(
|
|
40
|
+
$breakpoint: _th-core-breakpoint-context($breakpoint);
|
|
41
|
+
@include th-with-breakpoint($breakpoint) {
|
|
42
|
+
$font-size: th-property-font-size(
|
|
70
43
|
$heading: $heading,
|
|
71
|
-
$
|
|
72
|
-
$convert:
|
|
73
|
-
$base-font-size: $font-size
|
|
74
|
-
);
|
|
75
|
-
}
|
|
76
|
-
@if not $include or th-list-has($include, margin-bottom) {
|
|
77
|
-
@include th-property-margin-bottom(
|
|
78
|
-
$heading: $heading,
|
|
79
|
-
$breakpoint: $breakpoint,
|
|
80
|
-
$convert: $convert,
|
|
81
|
-
$base-font-size: $font-size
|
|
82
|
-
);
|
|
83
|
-
}
|
|
84
|
-
@if not $include or th-list-has($include, font-size) {
|
|
85
|
-
@include th-property-font-size(
|
|
86
|
-
$heading: $heading,
|
|
87
|
-
$breakpoint: $breakpoint,
|
|
88
|
-
$convert: $convert,
|
|
89
|
-
$base-font-size: $base-font-size
|
|
90
|
-
);
|
|
91
|
-
}
|
|
92
|
-
@if not $include or th-list-has($include, line-height) {
|
|
93
|
-
@include th-property-line-height(
|
|
94
|
-
$heading: $heading,
|
|
95
|
-
$breakpoint: $breakpoint,
|
|
96
|
-
$convert: $convert,
|
|
97
|
-
$base-font-size: $font-size
|
|
44
|
+
$base-font-size: $base-font-size,
|
|
45
|
+
$convert: false
|
|
98
46
|
);
|
|
47
|
+
@each $property in $_th-core-properties {
|
|
48
|
+
@if not $include or th-list-has($include, $property) {
|
|
49
|
+
@include th-property(
|
|
50
|
+
$property-name: $property,
|
|
51
|
+
$heading: $heading,
|
|
52
|
+
$base-font-size: th-if(font-size == $property, $base-font-size, $font-size)
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
99
56
|
}
|
|
100
57
|
}
|
|
101
58
|
|
|
102
|
-
//
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
|
|
119
|
-
//
|
|
120
|
-
// @example scss Output all h1 styles across all breakpoints.
|
|
121
|
-
// // @include th-headings(h1)
|
|
122
|
-
// @example scss Output font-size and line-height h1 styles across all breakpoints.
|
|
123
|
-
// // th-headings(
|
|
124
|
-
// // $heading: h1,
|
|
125
|
-
// // $include: (font-size line-height)
|
|
126
|
-
// // )
|
|
59
|
+
// th-headings
|
|
60
|
+
/// Output styles for a heading across all breakpoints.
|
|
61
|
+
///
|
|
62
|
+
/// @since 0.0.10
|
|
63
|
+
///
|
|
64
|
+
/// @param {list | string} $heading - A heading map key or list.
|
|
65
|
+
/// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
|
|
66
|
+
/// @param {list | boolean} $include [false] - (font-size | line-height | margin-top | margin-bottom) Restrict output properties.
|
|
67
|
+
///
|
|
68
|
+
/// @example scss - Output all h1 styles across all breakpoints.
|
|
69
|
+
/// @include th-headings(h1)
|
|
70
|
+
/// @example scss - Output font-size and line-height h1 styles across all breakpoints.
|
|
71
|
+
/// th-headings(
|
|
72
|
+
/// $heading: h1,
|
|
73
|
+
/// $include: (font-size line-height)
|
|
74
|
+
/// )
|
|
127
75
|
|
|
128
76
|
@mixin th-headings(
|
|
129
77
|
$heading,
|
|
130
|
-
$convert: true,
|
|
131
78
|
$base-font-size: $th-base-font-size,
|
|
132
79
|
$include: false
|
|
133
80
|
){
|
|
134
|
-
|
|
135
|
-
@if _th-heading-has-next($heading-map) {
|
|
136
|
-
@each $heading in $heading-map {
|
|
137
|
-
$breakpoint: th-property($heading, breakpoint);
|
|
138
|
-
@if $breakpoint {
|
|
139
|
-
@include th-breakpoint(
|
|
140
|
-
$query: $breakpoint,
|
|
141
|
-
$breakpoint: $breakpoint
|
|
142
|
-
){
|
|
143
|
-
@include th-heading(
|
|
144
|
-
$heading: $heading,
|
|
145
|
-
$convert: $convert,
|
|
146
|
-
$base-font-size: $base-font-size,
|
|
147
|
-
$include: $include
|
|
148
|
-
);
|
|
149
|
-
}
|
|
150
|
-
} @else {
|
|
151
|
-
@include th-heading(
|
|
152
|
-
$heading: $heading,
|
|
153
|
-
$convert: $convert,
|
|
154
|
-
$base-font-size: $base-font-size,
|
|
155
|
-
$include: $include
|
|
156
|
-
);
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
} @else {
|
|
81
|
+
@include _th-heading-loop($heading) {
|
|
160
82
|
@include th-heading(
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
$include: $include
|
|
83
|
+
$heading: $heading,
|
|
84
|
+
$base-font-size: $base-font-size,
|
|
85
|
+
$include: $include
|
|
165
86
|
);
|
|
166
87
|
}
|
|
167
88
|
}
|