@phun-ky/speccer 10.1.0 → 11.0.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/README.md +124 -33
- package/dist/speccer.css +313 -122
- package/dist/speccer.d.ts +32 -5
- package/dist/speccer.esm.js +2 -2
- package/dist/speccer.esm.js.map +1 -1
- package/dist/speccer.js +2 -2
- package/dist/speccer.js.map +1 -1
- package/dist/speccer.min.css +1 -1
- package/package.json +1 -1
package/dist/speccer.css
CHANGED
|
@@ -13,19 +13,22 @@
|
|
|
13
13
|
.ph-speccer.speccer{
|
|
14
14
|
--ph-speccer-base-color: var(--ph-speccer-color-artificialStrawberry);
|
|
15
15
|
--ph-speccer-spacing-color: var(--ph-speccer-base-color);
|
|
16
|
-
--ph-speccer-spacing-color
|
|
17
|
-
--ph-speccer-spacing-color-
|
|
18
|
-
--ph-speccer-spacing-color
|
|
19
|
-
--ph-speccer-spacing-color-
|
|
16
|
+
--ph-speccer-spacing-padding-color: var(--ph-speccer-color-carbon);
|
|
17
|
+
--ph-speccer-spacing-padding-color-background: rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b / var(--ph-speccer-opacity-40));
|
|
18
|
+
--ph-speccer-spacing-margin-color: var(--ph-speccer-color-red);
|
|
19
|
+
--ph-speccer-spacing-margin-color-background: rgb(from var(--ph-speccer-color-superBanana) r g b / var(--ph-speccer-opacity-40));
|
|
20
|
+
--ph-speccer-spacing-line-width: var(--ph-speccer-line-width);
|
|
20
21
|
--ph-speccer-typography-background-color: var(--ph-speccer-color-white);
|
|
21
22
|
--ph-speccer-typography-color-property: var(--ph-speccer-color-niuZaiSeDenim);
|
|
22
23
|
--ph-speccer-typography-color-text: var(--ph-speccer-base-color);
|
|
23
24
|
--ph-speccer-typography-color-value: var(--ph-speccer-base-color);
|
|
24
25
|
--ph-speccer-mark-background-color: rgb(from var(--ph-speccer-base-color) r g b / var(--ph-speccer-opacity-20));
|
|
25
26
|
--ph-speccer-mark-border-color: var(--ph-speccer-base-color);
|
|
26
|
-
--ph-speccer-mark-border-width:
|
|
27
|
+
--ph-speccer-mark-border-width: 1.5px;
|
|
27
28
|
--ph-speccer-mark-border-style: solid;
|
|
28
29
|
--ph-speccer-measure-color: var(--ph-speccer-color-red);
|
|
30
|
+
--ph-speccer-measure-line-width: 1.5px;
|
|
31
|
+
--ph-speccer-measure-border-style: dotted;
|
|
29
32
|
--ph-speccer-measure-size: 8px;
|
|
30
33
|
--ph-speccer-a11y-color-background: var(--ph-speccer-color-beautifulBlue);
|
|
31
34
|
--ph-speccer-a11y-landmark-color-background: var(--ph-speccer-color-fuchsiaBlue);
|
|
@@ -35,8 +38,8 @@
|
|
|
35
38
|
--ph-speccer-pin-size: 24px;
|
|
36
39
|
--ph-speccer-pin-space: 48px;
|
|
37
40
|
--ph-speccer-line-height: 12px;
|
|
38
|
-
--ph-speccer-line-width:
|
|
39
|
-
--ph-speccer-line-width-negative: -
|
|
41
|
+
--ph-speccer-line-width: 1.5px;
|
|
42
|
+
--ph-speccer-line-width-negative: -1.5px;
|
|
40
43
|
--ph-speccer-opacity-20: 0.2;
|
|
41
44
|
--ph-speccer-opacity-40: 0.4;
|
|
42
45
|
--ph-speccer-font-family: "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
|
@@ -88,7 +91,7 @@ svg.ph-speccer .ph-speccer.circle {
|
|
|
88
91
|
counter-reset: type;
|
|
89
92
|
}
|
|
90
93
|
.ph-speccer.speccer.pin {
|
|
91
|
-
font-family:
|
|
94
|
+
font-family: var(--ph-speccer-font-family);
|
|
92
95
|
height: var(--ph-speccer-pin-size);
|
|
93
96
|
width: var(--ph-speccer-pin-size);
|
|
94
97
|
display: flex;
|
|
@@ -113,6 +116,7 @@ svg.ph-speccer .ph-speccer.circle {
|
|
|
113
116
|
z-index: 99999;
|
|
114
117
|
}
|
|
115
118
|
.ph-speccer.speccer.pin.svg::after,
|
|
119
|
+
.ph-speccer.speccer.pin.text::after,
|
|
116
120
|
.ph-speccer.speccer.pin.curly::after {
|
|
117
121
|
content: none !important;
|
|
118
122
|
}
|
|
@@ -155,6 +159,59 @@ svg.ph-speccer .ph-speccer.circle {
|
|
|
155
159
|
top: 50%;
|
|
156
160
|
right: 100%;
|
|
157
161
|
}
|
|
162
|
+
.ph-speccer.path.speccer.text {
|
|
163
|
+
color: var(--ph-speccer-color-text-dark);
|
|
164
|
+
}
|
|
165
|
+
.ph-speccer.speccer.pin.text {
|
|
166
|
+
font-family: var(--ph-speccer-font-family);
|
|
167
|
+
height: auto;
|
|
168
|
+
min-height: var(--ph-speccer-pin-size);
|
|
169
|
+
display: flex;
|
|
170
|
+
position: absolute;
|
|
171
|
+
border-radius: 0;
|
|
172
|
+
background-color: transparent;
|
|
173
|
+
color: var(--ph-speccer-color-text-dark);
|
|
174
|
+
font-weight: 400;
|
|
175
|
+
align-items: flex-start;
|
|
176
|
+
justify-content: center;
|
|
177
|
+
line-height: 130%;
|
|
178
|
+
z-index: 100000;
|
|
179
|
+
flex-direction: column;
|
|
180
|
+
width: 250px;
|
|
181
|
+
grid-gap: 2px;
|
|
182
|
+
}
|
|
183
|
+
.ph-speccer.speccer.pin.text.right {
|
|
184
|
+
padding-left: 1rem;
|
|
185
|
+
}
|
|
186
|
+
.ph-speccer.speccer.pin.text.left {
|
|
187
|
+
padding-right: 1rem;
|
|
188
|
+
width: 170px;
|
|
189
|
+
}
|
|
190
|
+
.ph-speccer.speccer.pin.text.top {
|
|
191
|
+
padding-bottom: 1rem;
|
|
192
|
+
}
|
|
193
|
+
.ph-speccer.speccer.pin.text.bottom {
|
|
194
|
+
padding-top: 1rem;
|
|
195
|
+
}
|
|
196
|
+
.ph-speccer.speccer.pin.text .ph-speccer.title {
|
|
197
|
+
text-transform: uppercase;
|
|
198
|
+
font-weight: 500;
|
|
199
|
+
font-size: 11px;
|
|
200
|
+
}
|
|
201
|
+
.ph-speccer.speccer.pin.text .ph-speccer.description {
|
|
202
|
+
line-height: 130%;
|
|
203
|
+
position: relative;
|
|
204
|
+
font-weight: 600;
|
|
205
|
+
font-size: 0.875rem;
|
|
206
|
+
}
|
|
207
|
+
.ph-speccer.speccer.pin.text .ph-speccer.heading {
|
|
208
|
+
line-height: 130%;
|
|
209
|
+
position: relative;
|
|
210
|
+
font-weight: 600;
|
|
211
|
+
font-size: 0.875rem;
|
|
212
|
+
text-transform: uppercase;
|
|
213
|
+
color: var(--ph-speccer-base-color);
|
|
214
|
+
}
|
|
158
215
|
.ph-speccer.speccer.pin.enclose {
|
|
159
216
|
border-radius: 0;
|
|
160
217
|
background-color: transparent;
|
|
@@ -668,6 +725,13 @@ svg.ph-speccer .ph-speccer.circle {
|
|
|
668
725
|
}
|
|
669
726
|
.ph-speccer.speccer.typography.syntax > pre {
|
|
670
727
|
margin: 0;
|
|
728
|
+
padding: 0;
|
|
729
|
+
font-size: 12px;
|
|
730
|
+
line-height: 1.5;
|
|
731
|
+
font-family: var(--ph-speccer-font-family);
|
|
732
|
+
color: var(--ph-speccer-color-text-light);
|
|
733
|
+
background: transparent;
|
|
734
|
+
border-radius: 0;
|
|
671
735
|
}
|
|
672
736
|
.ph-speccer.speccer.typography.syntax {
|
|
673
737
|
--ph-speccer-color-code-color-1: #737373;
|
|
@@ -808,7 +872,7 @@ svg.ph-speccer .ph-speccer.circle {
|
|
|
808
872
|
left: -32px;
|
|
809
873
|
top: 100%;
|
|
810
874
|
width: 32px;
|
|
811
|
-
height: calc(var(--ph-speccer-grid-gap) + 2px);
|
|
875
|
+
height: calc(var(--ph-speccer-grid-row-gap) + 2px);
|
|
812
876
|
border-top-left-radius: 50%;
|
|
813
877
|
border-bottom-left-radius: 50%;
|
|
814
878
|
}
|
|
@@ -846,7 +910,7 @@ svg.ph-speccer .ph-speccer.circle {
|
|
|
846
910
|
left: -32px;
|
|
847
911
|
top: 100%;
|
|
848
912
|
width: 32px;
|
|
849
|
-
height: calc(var(--ph-speccer-grid-gap) + 2px);
|
|
913
|
+
height: calc(var(--ph-speccer-grid-row-gap) + 2px);
|
|
850
914
|
border-top-left-radius: 50%;
|
|
851
915
|
border-bottom-left-radius: 50%;
|
|
852
916
|
}
|
|
@@ -883,185 +947,312 @@ svg.ph-speccer .ph-speccer.circle {
|
|
|
883
947
|
bottom: calc((var(--ph-speccer-grid-row-gap) + 2px) / 2 * -1);
|
|
884
948
|
}
|
|
885
949
|
.ph-speccer.speccer.spacing {
|
|
886
|
-
pointer-events:
|
|
950
|
+
pointer-events: none;
|
|
887
951
|
transition: none;
|
|
888
|
-
|
|
889
|
-
}
|
|
890
|
-
.ph-speccer.speccer.spacing:hover {
|
|
891
|
-
border: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
|
|
892
|
-
}
|
|
893
|
-
.ph-speccer.speccer.spacing.margin {
|
|
894
|
-
background-color: var(--ph-speccer-spacing-color-margin);
|
|
895
|
-
color: var(--ph-speccer-color-text-dark);
|
|
952
|
+
white-space: nowrap;
|
|
896
953
|
}
|
|
897
954
|
.ph-speccer.speccer.spacing.padding {
|
|
898
|
-
background-color: var(--ph-speccer-spacing-color-
|
|
899
|
-
color: var(--ph-speccer-spacing-color);
|
|
900
|
-
}
|
|
901
|
-
.ph-speccer.speccer.spacing.margin.bottom::after,
|
|
902
|
-
.ph-speccer.speccer.spacing.margin.top::after {
|
|
903
|
-
transition: none;
|
|
904
|
-
content: "";
|
|
905
|
-
position: absolute;
|
|
906
|
-
height: 100%;
|
|
907
|
-
border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
|
|
908
|
-
border-bottom: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
|
|
909
|
-
width: 9px;
|
|
910
|
-
left: 40%;
|
|
955
|
+
background-color: var(--ph-speccer-spacing-padding-color-background);
|
|
956
|
+
color: var(--ph-speccer-spacing-padding-color);
|
|
911
957
|
}
|
|
912
|
-
.ph-speccer.speccer.spacing.
|
|
913
|
-
.ph-speccer.speccer.spacing.
|
|
958
|
+
.ph-speccer.speccer.spacing.padding::after,
|
|
959
|
+
.ph-speccer.speccer.spacing.padding::before {
|
|
914
960
|
transition: none;
|
|
915
961
|
content: "";
|
|
916
962
|
position: absolute;
|
|
917
|
-
height: 100%;
|
|
918
|
-
border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
|
|
919
|
-
margin-left: 4px;
|
|
920
|
-
width: 0;
|
|
921
|
-
left: 40%;
|
|
922
963
|
}
|
|
923
|
-
.ph-speccer.speccer.spacing.
|
|
924
|
-
.ph-speccer.speccer.spacing.
|
|
925
|
-
|
|
926
|
-
content:
|
|
927
|
-
|
|
928
|
-
height: 9px;
|
|
929
|
-
border-right: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
|
|
930
|
-
border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
|
|
931
|
-
width: 100%;
|
|
932
|
-
top: 10%;
|
|
933
|
-
}
|
|
934
|
-
.ph-speccer.speccer.spacing.margin.left::before,
|
|
935
|
-
.ph-speccer.speccer.spacing.margin.right::before {
|
|
936
|
-
transition: none;
|
|
937
|
-
content: "";
|
|
938
|
-
position: absolute;
|
|
939
|
-
height: 0;
|
|
940
|
-
border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
|
|
941
|
-
margin-top: 4px;
|
|
942
|
-
width: 100%;
|
|
943
|
-
top: 10%;
|
|
964
|
+
.ph-speccer.speccer.spacing.padding.bottom,
|
|
965
|
+
.ph-speccer.speccer.spacing.padding.top {
|
|
966
|
+
display: flex;
|
|
967
|
+
justify-content: flex-start;
|
|
968
|
+
padding-left: 4px;
|
|
944
969
|
}
|
|
945
970
|
.ph-speccer.speccer.spacing.padding.bottom::after,
|
|
946
971
|
.ph-speccer.speccer.spacing.padding.top::after {
|
|
947
|
-
|
|
948
|
-
content: "";
|
|
949
|
-
position: absolute;
|
|
972
|
+
left: calc(6ch - 5px);
|
|
950
973
|
height: 100%;
|
|
951
|
-
|
|
952
|
-
border-
|
|
953
|
-
|
|
954
|
-
left: 40%;
|
|
974
|
+
width: 10px;
|
|
975
|
+
border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
|
|
976
|
+
border-bottom: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
|
|
955
977
|
}
|
|
956
978
|
.ph-speccer.speccer.spacing.padding.bottom::before,
|
|
957
979
|
.ph-speccer.speccer.spacing.padding.top::before {
|
|
958
|
-
|
|
959
|
-
content: "";
|
|
960
|
-
position: absolute;
|
|
980
|
+
left: 6ch;
|
|
961
981
|
height: 100%;
|
|
962
|
-
border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
|
|
963
|
-
margin-left: 4px;
|
|
982
|
+
border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
|
|
964
983
|
width: 0;
|
|
965
|
-
|
|
984
|
+
}
|
|
985
|
+
.ph-speccer.speccer.spacing.padding.left,
|
|
986
|
+
.ph-speccer.speccer.spacing.padding.right {
|
|
987
|
+
display: flex;
|
|
988
|
+
justify-content: flex-end;
|
|
989
|
+
flex-direction: column;
|
|
990
|
+
padding-bottom: 4px;
|
|
966
991
|
}
|
|
967
992
|
.ph-speccer.speccer.spacing.padding.left::after,
|
|
968
993
|
.ph-speccer.speccer.spacing.padding.right::after {
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
position: absolute;
|
|
972
|
-
height: 9px;
|
|
973
|
-
border-right: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
|
|
974
|
-
border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
|
|
994
|
+
top: calc(100% - 24px - 10px);
|
|
995
|
+
height: 10px;
|
|
975
996
|
width: 100%;
|
|
976
|
-
|
|
997
|
+
border-right: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
|
|
998
|
+
border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
|
|
977
999
|
}
|
|
978
1000
|
.ph-speccer.speccer.spacing.padding.left::before,
|
|
979
1001
|
.ph-speccer.speccer.spacing.padding.right::before {
|
|
1002
|
+
top: calc(100% - 24px - 5px);
|
|
1003
|
+
height: 0;
|
|
1004
|
+
border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
|
|
1005
|
+
width: 100%;
|
|
1006
|
+
}
|
|
1007
|
+
.ph-speccer.speccer.spacing.margin {
|
|
1008
|
+
background-color: var(--ph-speccer-spacing-margin-color-background);
|
|
1009
|
+
color: var(--ph-speccer-spacing-margin-color);
|
|
1010
|
+
}
|
|
1011
|
+
.ph-speccer.speccer.spacing.margin.bottom,
|
|
1012
|
+
.ph-speccer.speccer.spacing.margin.top {
|
|
1013
|
+
display: flex;
|
|
1014
|
+
justify-content: flex-start;
|
|
1015
|
+
padding-left: 4px;
|
|
1016
|
+
}
|
|
1017
|
+
.ph-speccer.speccer.spacing.margin.right,
|
|
1018
|
+
.ph-speccer.speccer.spacing.margin.left {
|
|
1019
|
+
display: flex;
|
|
1020
|
+
justify-content: flex-end;
|
|
1021
|
+
flex-direction: column;
|
|
1022
|
+
padding-bottom: 4px;
|
|
1023
|
+
}
|
|
1024
|
+
.ph-speccer.speccer.spacing.margin::after,
|
|
1025
|
+
.ph-speccer.speccer.spacing.margin::before {
|
|
980
1026
|
transition: none;
|
|
981
1027
|
content: "";
|
|
982
1028
|
position: absolute;
|
|
1029
|
+
}
|
|
1030
|
+
.ph-speccer.speccer.spacing.margin.bottom::after,
|
|
1031
|
+
.ph-speccer.speccer.spacing.margin.top::after {
|
|
1032
|
+
left: calc(6ch - 5px);
|
|
1033
|
+
height: 100%;
|
|
1034
|
+
width: 10px;
|
|
1035
|
+
border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
|
|
1036
|
+
border-bottom: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
|
|
1037
|
+
}
|
|
1038
|
+
.ph-speccer.speccer.spacing.margin.bottom::before,
|
|
1039
|
+
.ph-speccer.speccer.spacing.margin.top::before {
|
|
1040
|
+
left: 6ch;
|
|
1041
|
+
height: 100%;
|
|
1042
|
+
border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
|
|
1043
|
+
width: 0;
|
|
1044
|
+
}
|
|
1045
|
+
.ph-speccer.speccer.spacing.margin.left::after,
|
|
1046
|
+
.ph-speccer.speccer.spacing.margin.right::after {
|
|
1047
|
+
height: 10px;
|
|
1048
|
+
border-right: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
|
|
1049
|
+
border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
|
|
1050
|
+
width: 100%;
|
|
1051
|
+
top: calc(100% - 24px - 10px);
|
|
1052
|
+
}
|
|
1053
|
+
.ph-speccer.speccer.spacing.margin.left::before,
|
|
1054
|
+
.ph-speccer.speccer.spacing.margin.right::before {
|
|
983
1055
|
height: 0;
|
|
984
|
-
border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
|
|
985
|
-
margin-top: 4px;
|
|
1056
|
+
border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
|
|
986
1057
|
width: 100%;
|
|
987
|
-
top:
|
|
1058
|
+
top: calc(100% - 24px - 5px);
|
|
988
1059
|
}
|
|
989
1060
|
.ph-speccer.speccer.measure {
|
|
990
1061
|
display: flex;
|
|
991
1062
|
}
|
|
992
|
-
.ph-speccer.speccer.measure.
|
|
1063
|
+
.ph-speccer.speccer.measure.height {
|
|
993
1064
|
color: var(--ph-speccer-measure-color);
|
|
994
|
-
border: var(--ph-speccer-line-width)
|
|
995
|
-
border-bottom:
|
|
996
|
-
height: var(--ph-speccer-measure-size);
|
|
1065
|
+
border-top: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
|
|
1066
|
+
border-bottom: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
|
|
997
1067
|
}
|
|
998
|
-
.ph-speccer.speccer.measure.
|
|
999
|
-
content:
|
|
1068
|
+
.ph-speccer.speccer.measure.height.left::before {
|
|
1069
|
+
content: '';
|
|
1070
|
+
display: block;
|
|
1071
|
+
height: calc(100% + var(--ph-speccer-measure-line-width));
|
|
1072
|
+
background: transparent;
|
|
1000
1073
|
position: absolute;
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
|
|
1006
|
-
border-top: none;
|
|
1074
|
+
left: calc(64px - 5px);
|
|
1075
|
+
width: 10px;
|
|
1076
|
+
border-top: var(--ph-speccer-measure-line-width) solid;
|
|
1077
|
+
border-bottom: var(--ph-speccer-measure-line-width) solid;
|
|
1007
1078
|
}
|
|
1008
|
-
.ph-speccer.speccer.measure.
|
|
1079
|
+
.ph-speccer.speccer.measure.height.left::after {
|
|
1080
|
+
position: static;
|
|
1009
1081
|
content: attr(data-measure);
|
|
1082
|
+
display: flex;
|
|
1083
|
+
width: 64px;
|
|
1084
|
+
height: 100%;
|
|
1085
|
+
line-height: 100%;
|
|
1086
|
+
margin-right: auto;
|
|
1087
|
+
border-right: var(--ph-speccer-measure-line-width) solid;
|
|
1088
|
+
justify-content: flex-end;
|
|
1089
|
+
padding-right: 8px;
|
|
1090
|
+
}
|
|
1091
|
+
.ph-speccer.speccer.measure.height.right::before {
|
|
1092
|
+
content: '';
|
|
1093
|
+
display: block;
|
|
1094
|
+
height: calc(100% + var(--ph-speccer-measure-line-width));
|
|
1095
|
+
background: transparent;
|
|
1010
1096
|
position: absolute;
|
|
1011
|
-
|
|
1097
|
+
left: calc(100% - 64px - 5px);
|
|
1098
|
+
width: 10px;
|
|
1099
|
+
border-top: var(--ph-speccer-measure-line-width) solid;
|
|
1100
|
+
border-bottom: var(--ph-speccer-measure-line-width) solid;
|
|
1012
1101
|
}
|
|
1013
|
-
.ph-speccer.speccer.measure.
|
|
1102
|
+
.ph-speccer.speccer.measure.height.right::after {
|
|
1103
|
+
position: static;
|
|
1104
|
+
content: attr(data-measure);
|
|
1105
|
+
display: flex;
|
|
1106
|
+
width: 64px;
|
|
1107
|
+
height: 100%;
|
|
1108
|
+
line-height: 100%;
|
|
1109
|
+
margin-left: auto;
|
|
1110
|
+
border-left: var(--ph-speccer-measure-line-width) solid;
|
|
1111
|
+
justify-content: flex-start;
|
|
1112
|
+
padding-left: 8px;
|
|
1113
|
+
}
|
|
1114
|
+
.ph-speccer.speccer.measure.width {
|
|
1115
|
+
flex-direction: column;
|
|
1116
|
+
align-items: center;
|
|
1117
|
+
justify-content: flex-start;
|
|
1014
1118
|
color: var(--ph-speccer-measure-color);
|
|
1015
|
-
border: var(--ph-speccer-line-width)
|
|
1016
|
-
border-
|
|
1119
|
+
border-left: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
|
|
1120
|
+
border-right: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
|
|
1121
|
+
}
|
|
1122
|
+
.ph-speccer.speccer.measure.width.top::before {
|
|
1123
|
+
content: '';
|
|
1124
|
+
display: block;
|
|
1125
|
+
width: calc(100% + var(--ph-speccer-measure-line-width));
|
|
1126
|
+
background: transparent;
|
|
1127
|
+
position: absolute;
|
|
1128
|
+
top: calc(36px - 5px);
|
|
1129
|
+
height: 10px;
|
|
1130
|
+
border-left: var(--ph-speccer-measure-line-width) solid;
|
|
1131
|
+
border-right: var(--ph-speccer-measure-line-width) solid;
|
|
1017
1132
|
}
|
|
1018
1133
|
.ph-speccer.speccer.measure.width.top::after {
|
|
1134
|
+
position: static;
|
|
1019
1135
|
content: attr(data-measure);
|
|
1136
|
+
display: flex;
|
|
1137
|
+
flex-direction: column;
|
|
1138
|
+
height: 36px;
|
|
1139
|
+
width: 100%;
|
|
1140
|
+
line-height: 18px;
|
|
1141
|
+
margin-bottom: auto;
|
|
1142
|
+
border-bottom: var(--ph-speccer-measure-line-width) solid;
|
|
1143
|
+
justify-content: flex-end;
|
|
1144
|
+
padding-bottom: 4px;
|
|
1145
|
+
}
|
|
1146
|
+
.ph-speccer.speccer.measure.width.bottom::before {
|
|
1147
|
+
content: '';
|
|
1148
|
+
display: block;
|
|
1149
|
+
width: calc(100% + var(--ph-speccer-measure-line-width));
|
|
1150
|
+
background: transparent;
|
|
1020
1151
|
position: absolute;
|
|
1021
|
-
|
|
1152
|
+
top: calc(100% - 36px - 5px);
|
|
1153
|
+
height: 10px;
|
|
1154
|
+
border-left: var(--ph-speccer-measure-line-width) solid;
|
|
1155
|
+
border-right: var(--ph-speccer-measure-line-width) solid;
|
|
1156
|
+
}
|
|
1157
|
+
.ph-speccer.speccer.measure.width.bottom::after {
|
|
1158
|
+
position: static;
|
|
1159
|
+
content: attr(data-measure);
|
|
1160
|
+
display: flex;
|
|
1161
|
+
height: 36px;
|
|
1162
|
+
width: 100%;
|
|
1163
|
+
line-height: 18px;
|
|
1164
|
+
margin-top: auto;
|
|
1165
|
+
flex-direction: column;
|
|
1166
|
+
border-top: var(--ph-speccer-measure-line-width) solid;
|
|
1167
|
+
justify-content: flex-start;
|
|
1168
|
+
padding-top: 4px;
|
|
1169
|
+
}
|
|
1170
|
+
.ph-speccer.speccer.measure.slim.height {
|
|
1171
|
+
width: var(--ph-speccer-measure-size);
|
|
1172
|
+
}
|
|
1173
|
+
.ph-speccer.speccer.measure.slim.height::before {
|
|
1174
|
+
content: none !important;
|
|
1022
1175
|
}
|
|
1023
|
-
.ph-speccer.speccer.measure.height.left {
|
|
1176
|
+
.ph-speccer.speccer.measure.slim.height.left {
|
|
1024
1177
|
color: var(--ph-speccer-measure-color);
|
|
1025
|
-
border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
|
|
1178
|
+
border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
|
|
1026
1179
|
border-right: none;
|
|
1027
|
-
width: var(--ph-speccer-measure-size);
|
|
1028
1180
|
}
|
|
1029
|
-
.ph-speccer.speccer.measure.height.
|
|
1030
|
-
|
|
1181
|
+
.ph-speccer.speccer.measure.slim.height.right {
|
|
1182
|
+
color: var(--ph-speccer-measure-color);
|
|
1183
|
+
border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
|
|
1184
|
+
border-left: none;
|
|
1185
|
+
}
|
|
1186
|
+
.ph-speccer.speccer.measure.slim.height.left::after {
|
|
1031
1187
|
position: absolute;
|
|
1032
1188
|
top: 50%;
|
|
1189
|
+
width: auto;
|
|
1190
|
+
height: auto;
|
|
1191
|
+
margin: 0;
|
|
1192
|
+
white-space: nowrap;
|
|
1193
|
+
padding: 0;
|
|
1194
|
+
border: none;
|
|
1033
1195
|
left: calc(-100% - 20px - var(--ph-speccer-line-width));
|
|
1034
1196
|
transform: translateY(-50%) rotate(-90deg);
|
|
1035
1197
|
}
|
|
1036
|
-
.ph-speccer.speccer.measure.height.right {
|
|
1037
|
-
color: var(--ph-speccer-measure-color);
|
|
1038
|
-
border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
|
|
1039
|
-
border-left: none;
|
|
1040
|
-
width: var(--ph-speccer-measure-size);
|
|
1041
|
-
}
|
|
1042
|
-
.ph-speccer.speccer.measure.height.right::after {
|
|
1043
|
-
content: attr(data-measure);
|
|
1198
|
+
.ph-speccer.speccer.measure.slim.height.right::after {
|
|
1044
1199
|
position: absolute;
|
|
1200
|
+
width: auto;
|
|
1201
|
+
height: auto;
|
|
1202
|
+
border: none;
|
|
1203
|
+
padding: 0;
|
|
1204
|
+
margin: 0;
|
|
1045
1205
|
top: 50%;
|
|
1206
|
+
white-space: nowrap;
|
|
1046
1207
|
left: calc(100% - var(--ph-speccer-measure-size));
|
|
1047
1208
|
transform: translateY(-50%) rotate(90deg);
|
|
1048
1209
|
}
|
|
1049
|
-
.ph-speccer.speccer.measure.
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
.ph-speccer.speccer.measure.
|
|
1210
|
+
.ph-speccer.speccer.measure.slim.width {
|
|
1211
|
+
height: var(--ph-speccer-measure-size);
|
|
1212
|
+
}
|
|
1213
|
+
.ph-speccer.speccer.measure.slim.width::before {
|
|
1214
|
+
content: none !important;
|
|
1215
|
+
}
|
|
1216
|
+
.ph-speccer.speccer.measure.slim.width.bottom {
|
|
1217
|
+
color: var(--ph-speccer-measure-color);
|
|
1218
|
+
border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
|
|
1219
|
+
border-top: none;
|
|
1220
|
+
}
|
|
1221
|
+
.ph-speccer.speccer.measure.slim.width.top {
|
|
1222
|
+
color: var(--ph-speccer-measure-color);
|
|
1223
|
+
border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
|
|
1224
|
+
border-bottom: none;
|
|
1225
|
+
}
|
|
1226
|
+
.ph-speccer.speccer.measure.slim.width.top::after {
|
|
1227
|
+
position: absolute;
|
|
1228
|
+
bottom: calc(100% + 5px);
|
|
1229
|
+
padding: 0;
|
|
1230
|
+
border: none;
|
|
1231
|
+
height: auto;
|
|
1232
|
+
}
|
|
1233
|
+
.ph-speccer.speccer.measure.slim.width.bottom::after {
|
|
1234
|
+
position: absolute;
|
|
1235
|
+
top: calc(100% + 5px);
|
|
1236
|
+
padding: 0;
|
|
1237
|
+
border: none;
|
|
1238
|
+
height: auto;
|
|
1239
|
+
}
|
|
1240
|
+
.ph-speccer.speccer.measure.slim.subtle.width.top,
|
|
1241
|
+
.ph-speccer.speccer.measure.slim.subtle.width.bottom,
|
|
1242
|
+
.ph-speccer.speccer.measure.slim.subtle.height.right,
|
|
1243
|
+
.ph-speccer.speccer.measure.slim.subtle.height.left {
|
|
1053
1244
|
border-style: dashed;
|
|
1054
1245
|
}
|
|
1055
|
-
.ph-speccer.speccer.measure.subtle.width.top {
|
|
1246
|
+
.ph-speccer.speccer.measure.slim.subtle.width.top {
|
|
1056
1247
|
border-bottom: none;
|
|
1057
1248
|
}
|
|
1058
|
-
.ph-speccer.speccer.measure.subtle.width.bottom {
|
|
1249
|
+
.ph-speccer.speccer.measure.slim.subtle.width.bottom {
|
|
1059
1250
|
border-top: none;
|
|
1060
1251
|
}
|
|
1061
|
-
.ph-speccer.speccer.measure.subtle.height.right {
|
|
1252
|
+
.ph-speccer.speccer.measure.slim.subtle.height.right {
|
|
1062
1253
|
border-left: none;
|
|
1063
1254
|
}
|
|
1064
|
-
.ph-speccer.speccer.measure.subtle.height.left {
|
|
1255
|
+
.ph-speccer.speccer.measure.slim.subtle.height.left {
|
|
1065
1256
|
border-right: none;
|
|
1066
1257
|
}
|
|
1067
1258
|
.ph-speccer.speccer.mark {
|
package/dist/speccer.d.ts
CHANGED
|
@@ -1,4 +1,31 @@
|
|
|
1
1
|
type SpeccerFunctionType = () => void;
|
|
2
|
+
type SpeccerFeatureType = 'pin' | 'grid' | 'mark' | 'typography' | 'measure' | 'spacing';
|
|
3
|
+
type SpeccerPositionType = 'top' | 'left' | 'right' | 'bottom';
|
|
4
|
+
interface SpeccerOptionsInterface {
|
|
5
|
+
slug: string;
|
|
6
|
+
position: SpeccerPositionType;
|
|
7
|
+
type: SpeccerFeatureType;
|
|
8
|
+
pin?: {
|
|
9
|
+
bracket: boolean;
|
|
10
|
+
enclose: boolean;
|
|
11
|
+
subtle: boolean;
|
|
12
|
+
parent: boolean;
|
|
13
|
+
text: boolean;
|
|
14
|
+
useSVGLine: boolean;
|
|
15
|
+
useCurlyBrackets: boolean;
|
|
16
|
+
};
|
|
17
|
+
measure?: {
|
|
18
|
+
slim: boolean;
|
|
19
|
+
height: boolean;
|
|
20
|
+
width: boolean;
|
|
21
|
+
};
|
|
22
|
+
typography?: {
|
|
23
|
+
useSyntaxHighlighting: boolean;
|
|
24
|
+
};
|
|
25
|
+
grid?: {
|
|
26
|
+
toggle: string;
|
|
27
|
+
};
|
|
28
|
+
}
|
|
2
29
|
|
|
3
30
|
/**
|
|
4
31
|
* Extends the global Window interface to add custom properties.
|
|
@@ -36,7 +63,7 @@ declare global {
|
|
|
36
63
|
//# sourceMappingURL=global.d.ts.map
|
|
37
64
|
|
|
38
65
|
declare const grid: {
|
|
39
|
-
create: (targetElement: HTMLElement, styles: CSSStyleDeclaration, options:
|
|
66
|
+
create: (targetElement: HTMLElement, styles: CSSStyleDeclaration, options: SpeccerOptionsInterface) => Promise<void>;
|
|
40
67
|
element: (targetElement: HTMLElement) => Promise<void>;
|
|
41
68
|
};
|
|
42
69
|
declare const spacing: {
|
|
@@ -44,12 +71,12 @@ declare const spacing: {
|
|
|
44
71
|
element: (targetElement: HTMLElement) => Promise<void>;
|
|
45
72
|
};
|
|
46
73
|
declare const pin: {
|
|
47
|
-
createPinElement: (
|
|
48
|
-
pinElement: (targetElement: HTMLElement,
|
|
74
|
+
createPinElement: (content: string | undefined, options: SpeccerOptionsInterface, id?: string, n?: string) => HTMLElement;
|
|
75
|
+
pinElement: (targetElement: HTMLElement, parentElement: HTMLElement, content: string, options: SpeccerOptionsInterface) => Promise<string | void>;
|
|
49
76
|
pinElements: (sectionElement: HTMLElement) => Promise<void>;
|
|
50
77
|
};
|
|
51
78
|
declare const measure: {
|
|
52
|
-
create: (text
|
|
79
|
+
create: (text: (string | number) | undefined, options: SpeccerOptionsInterface, tag?: string) => HTMLElement;
|
|
53
80
|
element: (targetElement: HTMLElement) => Promise<void>;
|
|
54
81
|
};
|
|
55
82
|
declare const mark: {
|
|
@@ -57,7 +84,7 @@ declare const mark: {
|
|
|
57
84
|
element: (targetElement: HTMLElement) => Promise<void>;
|
|
58
85
|
};
|
|
59
86
|
declare const typography: {
|
|
60
|
-
create: (html: string,
|
|
87
|
+
create: (html: string, options: SpeccerOptionsInterface) => HTMLElement;
|
|
61
88
|
element: (targetElement: HTMLElement) => Promise<void>;
|
|
62
89
|
};
|
|
63
90
|
declare const modes: {
|