@phun-ky/speccer 3.5.1 → 4.1.0
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.
- package/CHANGELOG.md +9 -0
- package/README.md +15 -43
- package/package.json +70 -32
- package/speccer.css +614 -2
- package/speccer.js +1680 -1
- package/speccer.min.css +1 -0
- package/src/browser.js +87 -0
- package/src/dissect.js +204 -0
- package/src/index.js +21 -818
- package/src/lib/attributes.js +13 -0
- package/src/lib/classnames.js +37 -0
- package/src/lib/constants.js +5 -0
- package/src/lib/css.js +37 -0
- package/src/lib/debounce.js +22 -0
- package/src/lib/node.js +7 -0
- package/src/lib/number.js +4 -0
- package/src/lib/resize.js +13 -0
- package/src/lib/styles.js +27 -0
- package/src/measure.js +88 -0
- package/src/spec.js +183 -0
- package/src/{anatomy.styl → styles/anatomy.styl} +59 -73
- package/src/styles/index.styl +26 -0
- package/src/styles/measure.styl +85 -0
- package/src/styles/spacing.styl +142 -0
- package/src/{typography.styl → styles/typography.styl} +1 -1
- package/src/typography.js +138 -0
- package/src/lib/poly.js +0 -15
- package/src/lib/style.js +0 -12
- package/src/lib/throttle.js +0 -19
- package/src/speccer.styl +0 -162
package/src/lib/style.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export const addStyleToElement = (el, style) => {
|
|
2
|
-
Object.assign(el.style, style);
|
|
3
|
-
};
|
|
4
|
-
|
|
5
|
-
export const getCSSValue = cssValue => parseInt(cssValue, 10);
|
|
6
|
-
|
|
7
|
-
export const normalizeCSSValue = cssValue => {
|
|
8
|
-
const value = parseFloat(cssValue);
|
|
9
|
-
return (value >= 0 && value < 1) || (value <= 0 && value > -1) ? 0 : value;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export const getElementCSSStyle = el => (window.getComputedStyle ? getComputedStyle(el, null) : el.currentStyle);
|
package/src/lib/throttle.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
// throttle with RAF
|
|
2
|
-
const throttle = (type, name, obj) => {
|
|
3
|
-
obj = obj || window;
|
|
4
|
-
var running = false;
|
|
5
|
-
var func = function() {
|
|
6
|
-
if (running) {
|
|
7
|
-
return;
|
|
8
|
-
}
|
|
9
|
-
running = true;
|
|
10
|
-
requestAnimationFrame(function() {
|
|
11
|
-
obj.dispatchEvent(new CustomEvent(name));
|
|
12
|
-
running = false;
|
|
13
|
-
});
|
|
14
|
-
};
|
|
15
|
-
obj.removeEventListener(type, func);
|
|
16
|
-
obj.addEventListener(type, func);
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
export default throttle;
|
package/src/speccer.styl
DELETED
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
.speccer
|
|
4
|
-
font-family "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important
|
|
5
|
-
justify-content center
|
|
6
|
-
align-items center
|
|
7
|
-
z-index 99999
|
|
8
|
-
position absolute
|
|
9
|
-
display flex
|
|
10
|
-
font-size 12px
|
|
11
|
-
line-height 12px
|
|
12
|
-
box-sizing border-box
|
|
13
|
-
transition all .2s cubic-bezier(.4, 0, .2, 1)
|
|
14
|
-
&:hover
|
|
15
|
-
border 1px solid #333
|
|
16
|
-
&.measure
|
|
17
|
-
&.width
|
|
18
|
-
color red
|
|
19
|
-
border 1px solid red
|
|
20
|
-
border-bottom none
|
|
21
|
-
height 8px
|
|
22
|
-
&:after
|
|
23
|
-
content attr(data-measure)
|
|
24
|
-
position absolute
|
|
25
|
-
top calc(-100% - 10px)
|
|
26
|
-
&.bottom
|
|
27
|
-
color red
|
|
28
|
-
border 1px solid red
|
|
29
|
-
border-top none
|
|
30
|
-
&:after
|
|
31
|
-
content attr(data-measure)
|
|
32
|
-
position absolute
|
|
33
|
-
top calc(100% + 5px)
|
|
34
|
-
&.height
|
|
35
|
-
color red
|
|
36
|
-
border 1px solid red
|
|
37
|
-
border-right none
|
|
38
|
-
width 8px
|
|
39
|
-
&:after
|
|
40
|
-
content attr(data-measure)
|
|
41
|
-
position absolute
|
|
42
|
-
top 50%
|
|
43
|
-
left calc(-100% - 25px)
|
|
44
|
-
transform translateY(-50%) rotate(-90deg)
|
|
45
|
-
&.right
|
|
46
|
-
color red
|
|
47
|
-
border 1px solid red
|
|
48
|
-
border-left none
|
|
49
|
-
&:after
|
|
50
|
-
content attr(data-measure)
|
|
51
|
-
position absolute
|
|
52
|
-
top 50%
|
|
53
|
-
left 100%
|
|
54
|
-
transform translateY(-50%) rotate(90deg)
|
|
55
|
-
|
|
56
|
-
.speccer-isSpecced
|
|
57
|
-
&:hover
|
|
58
|
-
& ~ .speccer
|
|
59
|
-
&.margin
|
|
60
|
-
background-color #fff76f
|
|
61
|
-
&.padding
|
|
62
|
-
background-color #db6fff
|
|
63
|
-
color #fff
|
|
64
|
-
|
|
65
|
-
.speccer.margin,
|
|
66
|
-
.speccer.marginBottom,
|
|
67
|
-
.speccer.marginLeft,
|
|
68
|
-
.speccer.marginRight,
|
|
69
|
-
.speccer.marginTop
|
|
70
|
-
background-color rgba(255, 247, 111, .4)
|
|
71
|
-
color #333
|
|
72
|
-
|
|
73
|
-
.speccer.padding,
|
|
74
|
-
.speccer.paddingBottom,
|
|
75
|
-
.speccer.paddingLeft,
|
|
76
|
-
.speccer.paddingRight,
|
|
77
|
-
.speccer.paddingTop
|
|
78
|
-
background-color rgba(219, 111, 255, .4)
|
|
79
|
-
color #ff3aa8
|
|
80
|
-
|
|
81
|
-
.speccer.marginBottom:after,
|
|
82
|
-
.speccer.marginTop:after
|
|
83
|
-
content ""
|
|
84
|
-
position absolute
|
|
85
|
-
height 100%
|
|
86
|
-
border-top 1px solid #333
|
|
87
|
-
border-bottom 1px solid #333
|
|
88
|
-
width 9px
|
|
89
|
-
left 40%
|
|
90
|
-
|
|
91
|
-
.speccer.marginBottom:before,
|
|
92
|
-
.speccer.marginTop:before
|
|
93
|
-
content ""
|
|
94
|
-
position absolute
|
|
95
|
-
height 100%
|
|
96
|
-
border-left 1px solid #333
|
|
97
|
-
margin-left 4px
|
|
98
|
-
width 0
|
|
99
|
-
left 40%
|
|
100
|
-
|
|
101
|
-
.speccer.marginLeft:after,
|
|
102
|
-
.speccer.marginRight:after
|
|
103
|
-
content ""
|
|
104
|
-
position absolute
|
|
105
|
-
height 9px
|
|
106
|
-
border-right 1px solid #ff3aa8
|
|
107
|
-
border-left 1px solid #ff3aa8
|
|
108
|
-
width 100%
|
|
109
|
-
top 10%
|
|
110
|
-
|
|
111
|
-
.speccer.marginLeft:before,
|
|
112
|
-
.speccer.marginRight:before
|
|
113
|
-
content ""
|
|
114
|
-
position absolute
|
|
115
|
-
height 0
|
|
116
|
-
border-top 1px solid #ff3aa8
|
|
117
|
-
margin-top 4px
|
|
118
|
-
width 100%
|
|
119
|
-
top 10%
|
|
120
|
-
|
|
121
|
-
.speccer.paddingBottom:after,
|
|
122
|
-
.speccer.paddingTop:after
|
|
123
|
-
content ""
|
|
124
|
-
position absolute
|
|
125
|
-
height 100%
|
|
126
|
-
border-top 1px solid #ff3aa8
|
|
127
|
-
border-bottom 1px solid #ff3aa8
|
|
128
|
-
width 9px
|
|
129
|
-
left 40%
|
|
130
|
-
|
|
131
|
-
.speccer.paddingBottom:before,
|
|
132
|
-
.speccer.paddingTop:before
|
|
133
|
-
content ""
|
|
134
|
-
position absolute
|
|
135
|
-
height 100%
|
|
136
|
-
border-left 1px solid #ff3aa8
|
|
137
|
-
margin-left 4px
|
|
138
|
-
width 0
|
|
139
|
-
left 40%
|
|
140
|
-
|
|
141
|
-
.speccer.paddingLeft:after,
|
|
142
|
-
.speccer.paddingRight:after
|
|
143
|
-
content ""
|
|
144
|
-
position absolute
|
|
145
|
-
height 9px
|
|
146
|
-
border-right 1px solid #ff3aa8
|
|
147
|
-
border-left 1px solid #ff3aa8
|
|
148
|
-
width 100%
|
|
149
|
-
top 10%
|
|
150
|
-
|
|
151
|
-
.speccer.paddingLeft:before,
|
|
152
|
-
.speccer.paddingRight:before
|
|
153
|
-
content ""
|
|
154
|
-
position absolute
|
|
155
|
-
height 0
|
|
156
|
-
border-top 1px solid #ff3aa8
|
|
157
|
-
margin-top 4px
|
|
158
|
-
width 100%
|
|
159
|
-
top 10%
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
@require './typography.styl'
|