typey 1.0.0.alpha.3 → 1.0.0.alpha.4
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 +109 -13
- data/stylesheets/_typey.scss +3 -1
- data/stylesheets/config.codekit +943 -0
- data/stylesheets/typey/_font-size.scss +4 -5
- data/stylesheets/typey/_helpers.scss +1 -1
- data/stylesheets/typey/_line-height.scss +7 -6
- data/stylesheets/typey/_margin.scss +143 -0
- data/stylesheets/typey/_padding.scss +143 -0
- data/typey.gemspec +1 -1
- metadata +5 -2
|
@@ -32,14 +32,13 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
// Define font-size (with fallback).
|
|
35
|
-
// This is only necessary to use if you want to provide fallbacks when you are
|
|
36
|
-
// using rem as $base-unit.
|
|
37
35
|
//
|
|
38
36
|
// @param string $size
|
|
39
37
|
// A size from the $font-size map.
|
|
40
|
-
// @param number $context
|
|
41
|
-
// (optional) Only used if em is the $base-unit. The value of the
|
|
42
|
-
// font-size if differs from $base-font-size.
|
|
38
|
+
// @param number|string $context
|
|
39
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
40
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
41
|
+
// value in the same unit as the $font-size map.
|
|
43
42
|
@mixin font-size($size, $context: $base-font-size) {
|
|
44
43
|
$map-size: map-get($font-size, $size);
|
|
45
44
|
@if $base-unit == rem {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
//
|
|
17
17
|
// @param number $number
|
|
18
18
|
// The number (with unit) to convert. Allowed units: px, pt
|
|
19
|
-
// @param number $context
|
|
19
|
+
// @param number|string $context
|
|
20
20
|
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
21
21
|
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
22
22
|
// value in the same unit as the $font-size map.
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
// Generate a value to be used as line-height
|
|
2
|
-
//
|
|
1
|
+
// Generate a value to be used as line-height from either:
|
|
2
|
+
// a) a multiple of $base-line-height
|
|
3
|
+
// b) a static px or pt value
|
|
3
4
|
//
|
|
4
5
|
// Example usage with multiple:
|
|
5
6
|
// line-height: line-height(2);
|
|
@@ -8,8 +9,8 @@
|
|
|
8
9
|
//
|
|
9
10
|
// @param number $x
|
|
10
11
|
// Multiple of line height to be used or px/pt value to be converted.
|
|
11
|
-
// @param number $context
|
|
12
|
-
// (optional) Only used if em is the $base-unit. The value of the elements
|
|
12
|
+
// @param number|string $context
|
|
13
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
13
14
|
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
14
15
|
// value in the same unit as the $font-size map.
|
|
15
16
|
//
|
|
@@ -46,8 +47,8 @@
|
|
|
46
47
|
//
|
|
47
48
|
// @param number $x
|
|
48
49
|
// Multiple of line height to be used or px/pt value to be converted.
|
|
49
|
-
// @param number $context
|
|
50
|
-
// (optional) Only used if em is the $base-unit. The value of the elements
|
|
50
|
+
// @param number|string $context
|
|
51
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
51
52
|
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
52
53
|
// value in the same unit as the $font-size map.
|
|
53
54
|
@mixin line-height($x, $context: $base-font-size) {
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
// Generate a value to be used as margin from either:
|
|
2
|
+
// a) a multiple of $base-line-height
|
|
3
|
+
// b) a static px or pt value
|
|
4
|
+
//
|
|
5
|
+
// Example usage with multiple:
|
|
6
|
+
// margin: margin(2);
|
|
7
|
+
// Example usage with static value:
|
|
8
|
+
// margin: margin(18px);
|
|
9
|
+
//
|
|
10
|
+
// @param number $x
|
|
11
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
|
12
|
+
// @param number|string $context
|
|
13
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
14
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
15
|
+
// value in the same unit as the $font-size map.
|
|
16
|
+
//
|
|
17
|
+
// @return number
|
|
18
|
+
// The caculated height in $base-unit.
|
|
19
|
+
@function margin($x, $context: $base-font-size) {
|
|
20
|
+
@return line-height($x, $context);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Define margin (with fallback).
|
|
24
|
+
// This is only necessary to use if you want to provide fallbacks when you are
|
|
25
|
+
// using rem as $base-unit.
|
|
26
|
+
//
|
|
27
|
+
// @param number|list $x
|
|
28
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
|
29
|
+
// Uses the same parameters as the CSS margin property:
|
|
30
|
+
// i.e. top right bottom left, 1 0 2 0.
|
|
31
|
+
// @param number|string $context
|
|
32
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
33
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
34
|
+
// value in the same unit as the $font-size map.
|
|
35
|
+
@mixin margin($list, $context: $base-font-size) {
|
|
36
|
+
$px-list: ();
|
|
37
|
+
$converted-list: ();
|
|
38
|
+
@each $x in $list {
|
|
39
|
+
@if $base-unit == rem {
|
|
40
|
+
@if type-of($x) == 'number' and unitless($x) {
|
|
41
|
+
$margin: $x * $base-line-height;
|
|
42
|
+
$px-list: join($px-list, $margin, $separator: space);
|
|
43
|
+
}
|
|
44
|
+
@if type-of($x) == 'number' and not unitless($x) {
|
|
45
|
+
$px-list: join($px-list, $x, $separator: space);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
$margin: line-height($x, $context);
|
|
49
|
+
$converted-list: join($converted-list, $margin, $separator: space);
|
|
50
|
+
}
|
|
51
|
+
@if $base-unit == rem {
|
|
52
|
+
margin: $px-list;
|
|
53
|
+
}
|
|
54
|
+
margin: $converted-list;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Define margin-top (with fallback).
|
|
58
|
+
// This is only necessary to use if you want to provide fallbacks when you are
|
|
59
|
+
// using rem as $base-unit.
|
|
60
|
+
//
|
|
61
|
+
// @param number $x
|
|
62
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
|
63
|
+
// @param number|string $context
|
|
64
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
65
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
66
|
+
// value in the same unit as the $font-size map.
|
|
67
|
+
@mixin margin-top($x, $context: $base-font-size) {
|
|
68
|
+
@if $base-unit == rem {
|
|
69
|
+
@if type-of($x) == 'number' and unitless($x) {
|
|
70
|
+
margin-top: $x * $base-line-height;
|
|
71
|
+
}
|
|
72
|
+
@if type-of($x) == 'number' and not unitless($x) {
|
|
73
|
+
margin-top: $x;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
margin-top: line-height($x, $context);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Define margin-bottom (with fallback).
|
|
80
|
+
// This is only necessary to use if you want to provide fallbacks when you are
|
|
81
|
+
// using rem as $base-unit.
|
|
82
|
+
//
|
|
83
|
+
// @param number $x
|
|
84
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
|
85
|
+
// @param number|string $context
|
|
86
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
87
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
88
|
+
// value in the same unit as the $font-size map.
|
|
89
|
+
@mixin margin-bottom($x, $context: $base-font-size) {
|
|
90
|
+
@if $base-unit == rem {
|
|
91
|
+
@if type-of($x) == 'number' and unitless($x) {
|
|
92
|
+
margin-bottom: $x * $base-line-height;
|
|
93
|
+
}
|
|
94
|
+
@if type-of($x) == 'number' and not unitless($x) {
|
|
95
|
+
margin-bottom: $x;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
margin-bottom: line-height($x, $context);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// Define margin-left (with fallback).
|
|
102
|
+
// This is only necessary to use if you want to provide fallbacks when you are
|
|
103
|
+
// using rem as $base-unit.
|
|
104
|
+
//
|
|
105
|
+
// @param number $x
|
|
106
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
|
107
|
+
// @param number|string $context
|
|
108
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
109
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
110
|
+
// value in the same unit as the $font-size map.
|
|
111
|
+
@mixin margin-left($x, $context: $base-font-size) {
|
|
112
|
+
@if $base-unit == rem {
|
|
113
|
+
@if type-of($x) == 'number' and unitless($x) {
|
|
114
|
+
margin-left: $x * $base-line-height;
|
|
115
|
+
}
|
|
116
|
+
@if type-of($x) == 'number' and not unitless($x) {
|
|
117
|
+
margin-left: $x;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
margin-left: line-height($x, $context);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Define margin-right (with fallback).
|
|
124
|
+
// This is only necessary to use if you want to provide fallbacks when you are
|
|
125
|
+
// using rem as $base-unit.
|
|
126
|
+
//
|
|
127
|
+
// @param number $x
|
|
128
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
|
129
|
+
// @param number|string $context
|
|
130
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
131
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
132
|
+
// value in the same unit as the $font-size map.
|
|
133
|
+
@mixin margin-right($x, $context: $base-font-size) {
|
|
134
|
+
@if $base-unit == rem {
|
|
135
|
+
@if type-of($x) == 'number' and unitless($x) {
|
|
136
|
+
margin-right: $x * $base-line-height;
|
|
137
|
+
}
|
|
138
|
+
@if type-of($x) == 'number' and not unitless($x) {
|
|
139
|
+
margin-right: $x;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
margin-right: line-height($x, $context);
|
|
143
|
+
}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
// Generate a value to be used as padding from either:
|
|
2
|
+
// a) a multiple of $base-line-height
|
|
3
|
+
// b) a static px or pt value
|
|
4
|
+
//
|
|
5
|
+
// Example usage with multiple:
|
|
6
|
+
// padding: padding(2);
|
|
7
|
+
// Example usage with static value:
|
|
8
|
+
// padding: padding(18px);
|
|
9
|
+
//
|
|
10
|
+
// @param number $x
|
|
11
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
|
12
|
+
// @param number|string $context
|
|
13
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
14
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
15
|
+
// value in the same unit as the $font-size map.
|
|
16
|
+
//
|
|
17
|
+
// @return number
|
|
18
|
+
// The calcuated height in $base-unit.
|
|
19
|
+
@function padding($x, $context: $base-font-size) {
|
|
20
|
+
@return line-height($x, $context);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Define padding (with fallback).
|
|
24
|
+
// This is only necessary to use if you want to provide fallbacks when you are
|
|
25
|
+
// using rem as $base-unit.
|
|
26
|
+
//
|
|
27
|
+
// @param number|list $x
|
|
28
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
|
29
|
+
// Uses the same parameters as the CSS padding property:
|
|
30
|
+
// i.e. top right bottom left, 1 0 2 0.
|
|
31
|
+
// @param number|string $context
|
|
32
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
33
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
34
|
+
// value in the same unit as the $font-size map.
|
|
35
|
+
@mixin padding($list, $context: $base-font-size) {
|
|
36
|
+
$px-list: ();
|
|
37
|
+
$converted-list: ();
|
|
38
|
+
@each $x in $list {
|
|
39
|
+
@if $base-unit == rem {
|
|
40
|
+
@if type-of($x) == 'number' and unitless($x) {
|
|
41
|
+
$padding: $x * $base-line-height;
|
|
42
|
+
$px-list: join($px-list, $padding, $separator: space);
|
|
43
|
+
}
|
|
44
|
+
@if type-of($x) == 'number' and not unitless($x) {
|
|
45
|
+
$px-list: join($px-list, $x, $separator: space);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
$padding: line-height($x, $context);
|
|
49
|
+
$converted-list: join($converted-list, $padding, $separator: space);
|
|
50
|
+
}
|
|
51
|
+
@if $base-unit == rem {
|
|
52
|
+
padding: $px-list;
|
|
53
|
+
}
|
|
54
|
+
padding: $converted-list;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Define padding-top (with fallback).
|
|
58
|
+
// This is only necessary to use if you want to provide fallbacks when you are
|
|
59
|
+
// using rem as $base-unit.
|
|
60
|
+
//
|
|
61
|
+
// @param number $x
|
|
62
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
|
63
|
+
// @param number|string $context
|
|
64
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
65
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
66
|
+
// value in the same unit as the $font-size map.
|
|
67
|
+
@mixin padding-top($x, $context: $base-font-size) {
|
|
68
|
+
@if $base-unit == rem {
|
|
69
|
+
@if type-of($x) == 'number' and unitless($x) {
|
|
70
|
+
padding-top: $x * $base-line-height;
|
|
71
|
+
}
|
|
72
|
+
@if type-of($x) == 'number' and not unitless($x) {
|
|
73
|
+
padding-top: $x;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
padding-top: line-height($x, $context);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Define padding-bottom (with fallback).
|
|
80
|
+
// This is only necessary to use if you want to provide fallbacks when you are
|
|
81
|
+
// using rem as $base-unit.
|
|
82
|
+
//
|
|
83
|
+
// @param number $x
|
|
84
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
|
85
|
+
// @param number|string $context
|
|
86
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
87
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
88
|
+
// value in the same unit as the $font-size map.
|
|
89
|
+
@mixin padding-bottom($x, $context: $base-font-size) {
|
|
90
|
+
@if $base-unit == rem {
|
|
91
|
+
@if type-of($x) == 'number' and unitless($x) {
|
|
92
|
+
padding-bottom: $x * $base-line-height;
|
|
93
|
+
}
|
|
94
|
+
@if type-of($x) == 'number' and not unitless($x) {
|
|
95
|
+
padding-bottom: $x;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
padding-bottom: line-height($x, $context);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// Define padding-left (with fallback).
|
|
102
|
+
// This is only necessary to use if you want to provide fallbacks when you are
|
|
103
|
+
// using rem as $base-unit.
|
|
104
|
+
//
|
|
105
|
+
// @param number $x
|
|
106
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
|
107
|
+
// @param number|string $context
|
|
108
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
109
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
110
|
+
// value in the same unit as the $font-size map.
|
|
111
|
+
@mixin padding-left($x, $context: $base-font-size) {
|
|
112
|
+
@if $base-unit == rem {
|
|
113
|
+
@if type-of($x) == 'number' and unitless($x) {
|
|
114
|
+
padding-left: $x * $base-line-height;
|
|
115
|
+
}
|
|
116
|
+
@if type-of($x) == 'number' and not unitless($x) {
|
|
117
|
+
padding-left: $x;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
padding-left: line-height($x, $context);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Define padding-right (with fallback).
|
|
124
|
+
// This is only necessary to use if you want to provide fallbacks when you are
|
|
125
|
+
// using rem as $base-unit.
|
|
126
|
+
//
|
|
127
|
+
// @param number $x
|
|
128
|
+
// Multiple of line height to be used or px/pt value to be converted.
|
|
129
|
+
// @param number|string $context
|
|
130
|
+
// (optional) Only used if em is the $base-unit. The value of the elements/parents
|
|
131
|
+
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
|
|
132
|
+
// value in the same unit as the $font-size map.
|
|
133
|
+
@mixin padding-right($x, $context: $base-font-size) {
|
|
134
|
+
@if $base-unit == rem {
|
|
135
|
+
@if type-of($x) == 'number' and unitless($x) {
|
|
136
|
+
padding-right: $x * $base-line-height;
|
|
137
|
+
}
|
|
138
|
+
@if type-of($x) == 'number' and not unitless($x) {
|
|
139
|
+
padding-right: $x;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
padding-right: line-height($x, $context);
|
|
143
|
+
}
|
data/typey.gemspec
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: typey
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.0.0.alpha.
|
|
4
|
+
version: 1.0.0.alpha.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jack Taranto
|
|
@@ -32,12 +32,15 @@ extra_rdoc_files: []
|
|
|
32
32
|
files:
|
|
33
33
|
- lib/typey.rb
|
|
34
34
|
- stylesheets/_typey.scss
|
|
35
|
+
- stylesheets/config.codekit
|
|
35
36
|
- stylesheets/typey/_defaults.scss
|
|
36
37
|
- stylesheets/typey/_font-size.scss
|
|
37
38
|
- stylesheets/typey/_font-stacks.scss
|
|
38
39
|
- stylesheets/typey/_font-weight.scss
|
|
39
40
|
- stylesheets/typey/_helpers.scss
|
|
40
41
|
- stylesheets/typey/_line-height.scss
|
|
42
|
+
- stylesheets/typey/_margin.scss
|
|
43
|
+
- stylesheets/typey/_padding.scss
|
|
41
44
|
- LICENSE.txt
|
|
42
45
|
- README.md
|
|
43
46
|
- typey.gemspec
|
|
@@ -60,7 +63,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
60
63
|
- !ruby/object:Gem::Version
|
|
61
64
|
version: 1.3.1
|
|
62
65
|
requirements: []
|
|
63
|
-
rubyforge_project: 1.0.0.alpha.
|
|
66
|
+
rubyforge_project: 1.0.0.alpha.4
|
|
64
67
|
rubygems_version: 2.0.14
|
|
65
68
|
signing_key:
|
|
66
69
|
specification_version: 4
|