unit.gl 0.0.1
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/LICENSE +171 -0
- package/README.md +85 -0
- package/dist/js/main.bundle.js +1 -0
- package/package.json +110 -0
- package/src/scss/_guide.scss +194 -0
- package/src/scss/_helper.scss +107 -0
- package/src/scss/_layer.scss +40 -0
- package/src/scss/_paper.scss +414 -0
- package/src/scss/_ratio.scss +97 -0
- package/src/scss/_reset.scss +186 -0
- package/src/scss/_scale.scss +272 -0
- package/src/scss/_unit.scss +60 -0
- package/src/scss/_unit_conversion.scss +77 -0
- package/src/scss/_unit_functions.scss +104 -0
- package/src/scss/_view.scss +117 -0
- package/src/scss/display/_device.scss +106 -0
- package/src/scss/display/_display_orientation.scss +93 -0
- package/src/scss/index.scss +51 -0
- package/src/scss/math/_math_arithmetic.scss +64 -0
- package/src/scss/math/_math_ratio.scss +172 -0
- package/src/scss/math/_math_scale.scss +58 -0
- package/src/scss/math/_math_sequence.scss +278 -0
- package/src/ts/index.ts +0 -0
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
// Copyright 2020 Scape Agency BV
|
|
2
|
+
|
|
3
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
// you may not use this file except in compliance with the License.
|
|
5
|
+
// You may obtain a copy of the License at
|
|
6
|
+
|
|
7
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
|
|
9
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
// See the License for the specific language governing permissions and
|
|
13
|
+
// limitations under the License.
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
// Shorthand helper mixins
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
// Dimensions
|
|
23
|
+
// ----------------------------------------------------------------------------
|
|
24
|
+
|
|
25
|
+
@mixin width($value) {
|
|
26
|
+
@include q($value, width);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@mixin height($value) {
|
|
30
|
+
@include q($value, height);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
// Typography
|
|
35
|
+
// ----------------------------------------------------------------------------
|
|
36
|
+
|
|
37
|
+
@mixin font-size($value) {
|
|
38
|
+
@include q($value, font-size);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@mixin line-height($value) {
|
|
42
|
+
@include q($value, line-height);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@mixin letter-spacing($value) {
|
|
46
|
+
@include q($value, letter-spacing);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
// Border
|
|
51
|
+
// ----------------------------------------------------------------------------
|
|
52
|
+
|
|
53
|
+
@mixin border-width($value) {
|
|
54
|
+
@include q($value, border-width);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@mixin border-radius($value) {
|
|
58
|
+
@include q($value, border-radius);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
// Padding
|
|
63
|
+
// ----------------------------------------------------------------------------
|
|
64
|
+
|
|
65
|
+
@mixin padding($value) {
|
|
66
|
+
@include q($value, padding);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@mixin padding-top($value) {
|
|
70
|
+
@include q($value, padding-top);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@mixin padding-right($value) {
|
|
74
|
+
@include q($value, padding-right);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@mixin padding-bottom($value) {
|
|
78
|
+
@include q($value, padding-bottom);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@mixin padding-left($value) {
|
|
82
|
+
@include q($value, padding-left);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
// Margin
|
|
87
|
+
// ----------------------------------------------------------------------------
|
|
88
|
+
|
|
89
|
+
@mixin margin($value) {
|
|
90
|
+
@include q($value, margin);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@mixin margin-top($value) {
|
|
94
|
+
@include q($value, margin-top);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
@mixin margin-right($value) {
|
|
98
|
+
@include q($value, margin-right);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@mixin margin-bottom($value) {
|
|
102
|
+
@include q($value, margin-bottom);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@mixin margin-left($value) {
|
|
106
|
+
@include q($value, margin-left);
|
|
107
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
// Copyright 2020 Scape Agency BV
|
|
2
|
+
|
|
3
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
// you may not use this file except in compliance with the License.
|
|
5
|
+
// You may obtain a copy of the License at
|
|
6
|
+
|
|
7
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
|
|
9
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
// See the License for the specific language governing permissions and
|
|
13
|
+
// limitations under the License.
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
/// Layer Map
|
|
19
|
+
/// Z-index Layers
|
|
20
|
+
$layers: (
|
|
21
|
+
'guides': 1000,
|
|
22
|
+
|
|
23
|
+
//
|
|
24
|
+
"max": 9999,
|
|
25
|
+
"mid": 0,
|
|
26
|
+
"min": -9999,
|
|
27
|
+
|
|
28
|
+
// Add more layers as needed
|
|
29
|
+
|
|
30
|
+
) !default;
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
/// Layer Function
|
|
34
|
+
/// Retrieve z-index from the layers map
|
|
35
|
+
@function z($layer) {
|
|
36
|
+
@if not map-has-key($layers, $layer) {
|
|
37
|
+
@warn "No layer found for `#{$layer}` in $z-layers map. Property omitted.";
|
|
38
|
+
}
|
|
39
|
+
@return map-get($layers, $layer);
|
|
40
|
+
}
|
|
@@ -0,0 +1,414 @@
|
|
|
1
|
+
// Copyright 2020 Scape Agency BV
|
|
2
|
+
|
|
3
|
+
// Licensed under the Apache License, Version 2.00 (the "License");
|
|
4
|
+
// you may not use this file except in compliance with the License.
|
|
5
|
+
// You may obtain a copy of the License at
|
|
6
|
+
|
|
7
|
+
// http://www.apache.org/licenses/LICENSE-2.00
|
|
8
|
+
|
|
9
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
// See the License for the specific language governing permissions and
|
|
13
|
+
// limitations under the License.
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
// ============================================================================
|
|
17
|
+
// Paper Module
|
|
18
|
+
// ============================================================================
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
// Paper Size Map
|
|
22
|
+
// ============================================================================
|
|
23
|
+
|
|
24
|
+
$paper_sizes: (
|
|
25
|
+
|
|
26
|
+
// Q Series
|
|
27
|
+
// ------------------------------------------------------------------------
|
|
28
|
+
"q0": (width: 720.00mm, height: 1080.00mm), // Q0
|
|
29
|
+
"q1": (width: 540.00mm, height: 720.00mm), // Q1
|
|
30
|
+
"q2": (width: 360.00mm, height: 540.00mm), // Q2
|
|
31
|
+
"q3": (width: 270.00mm, height: 360.00mm), // Q3
|
|
32
|
+
"q4": (width: 180.00mm, height: 270.00mm), // Q4
|
|
33
|
+
"q5": (width: 135.00mm, height: 180.00mm), // Q5
|
|
34
|
+
"q6": (width: 90.00mm, height: 135.00mm), // Q6
|
|
35
|
+
"q7": (width: 62.50mm, height: 90.00mm), // Q7
|
|
36
|
+
"q8": (width: 45.00mm, height: 62.50mm), // Q8
|
|
37
|
+
"q9": (width: 31.25mm, height: 45.00mm), // Q9
|
|
38
|
+
"q10": (width: 22.50mm, height: 31.25mm), // Q10
|
|
39
|
+
|
|
40
|
+
// ANSI Series
|
|
41
|
+
// ------------------------------------------------------------------------
|
|
42
|
+
"ansi_a": (width: 8.50in, height: 11.00in), // ANSI A (Letter)
|
|
43
|
+
"ansi_b": (width: 11.00in, height: 17.00in), // ANSI B (Ledger)
|
|
44
|
+
"ansi_c": (width: 17.00in, height: 22.00in), // ANSI C
|
|
45
|
+
"ansi_d": (width: 22.00in, height: 34.00in), // ANSI D
|
|
46
|
+
"ansi_e": (width: 34.00in, height: 44.00in), // ANSI E
|
|
47
|
+
|
|
48
|
+
// Arch Series (Engineering Drawing Sizes)
|
|
49
|
+
// ------------------------------------------------------------------------
|
|
50
|
+
"arch_a": (width: 9.00in, height: 12.00in), // Arch A
|
|
51
|
+
"arch_b": (width: 12.00in, height: 18.00in), // Arch B
|
|
52
|
+
"arch_c": (width: 18.00in, height: 24.00in), // Arch C
|
|
53
|
+
"arch_d": (width: 24.00in, height: 36.00in), // Arch D
|
|
54
|
+
"arch_e": (width: 36.00in, height: 48.00in), // Arch E
|
|
55
|
+
|
|
56
|
+
// DIN A Series
|
|
57
|
+
// ------------------------------------------------------------------------
|
|
58
|
+
"din_a0": (width: 841.00mm, height: 1189.00mm), // DIN A0
|
|
59
|
+
"din_a1": (width: 594.00mm, height: 841.00mm), // DIN A1
|
|
60
|
+
"din_a2": (width: 420.00mm, height: 594.00mm), // DIN A2
|
|
61
|
+
"din_a3": (width: 297.00mm, height: 420.00mm), // DIN A3
|
|
62
|
+
"din_a4": (width: 210.00mm, height: 297.00mm), // DIN A4
|
|
63
|
+
"din_a5": (width: 148.00mm, height: 210.00mm), // DIN A5
|
|
64
|
+
"din_a6": (width: 105.00mm, height: 148.00mm), // DIN A6
|
|
65
|
+
"din_a7": (width: 74.00mm, height: 105.00mm), // DIN A7
|
|
66
|
+
"din_a8": (width: 52.00mm, height: 74.00mm), // DIN A8
|
|
67
|
+
"din_a9": (width: 37.00mm, height: 52.00mm), // DIN A9
|
|
68
|
+
"din_a10": (width: 26.00mm, height: 37.00mm), // DIN A10
|
|
69
|
+
|
|
70
|
+
// ISO A Series
|
|
71
|
+
// ------------------------------------------------------------------------
|
|
72
|
+
"iso_a0": (width: 841.00mm, height: 1189.00mm), // ISO A0
|
|
73
|
+
"iso_a1": (width: 594.00mm, height: 841.00mm), // ISO A1
|
|
74
|
+
"iso_a2": (width: 420.00mm, height: 594.00mm), // ISO A2
|
|
75
|
+
"iso_a3": (width: 297.00mm, height: 420.00mm), // ISO A3
|
|
76
|
+
"iso_a4": (width: 210.00mm, height: 297.00mm), // ISO A4
|
|
77
|
+
"iso_a5": (width: 148.00mm, height: 210.00mm), // ISO A5
|
|
78
|
+
"iso_a6": (width: 105.00mm, height: 148.00mm), // ISO A6
|
|
79
|
+
"iso_a7": (width: 74.00mm, height: 105.00mm), // ISO A7
|
|
80
|
+
"iso_a8": (width: 52.00mm, height: 74.00mm), // ISO A8
|
|
81
|
+
"iso_a9": (width: 37.00mm, height: 52.00mm), // ISO A9
|
|
82
|
+
"iso_a10": (width: 26.00mm, height: 37.00mm), // ISO A10
|
|
83
|
+
|
|
84
|
+
// ISO B Series
|
|
85
|
+
// ------------------------------------------------------------------------
|
|
86
|
+
"iso_b0": (width: 1000.00mm, height: 1414.00mm), // ISO B0
|
|
87
|
+
"iso_b1": (width: 707.00mm, height: 1000.00mm), // ISO B1
|
|
88
|
+
"iso_b2": (width: 500.00mm, height: 707.00mm), // ISO B2
|
|
89
|
+
"iso_b3": (width: 353.00mm, height: 500.00mm), // ISO B3
|
|
90
|
+
"iso_b4": (width: 250.00mm, height: 353.00mm), // ISO B4
|
|
91
|
+
"iso_b5": (width: 176.00mm, height: 250.00mm), // ISO B5
|
|
92
|
+
"iso_b6": (width: 125.00mm, height: 176.00mm), // ISO B6
|
|
93
|
+
"iso_b7": (width: 88.00mm, height: 125.00mm), // ISO B7
|
|
94
|
+
"iso_b8": (width: 62.00mm, height: 88.00mm), // ISO B8
|
|
95
|
+
"iso_b9": (width: 44.00mm, height: 62.00mm), // ISO B9
|
|
96
|
+
"iso_b10": (width: 31.00mm, height: 44.00mm), // ISO B10
|
|
97
|
+
|
|
98
|
+
// ISO C Series (International Envelope Sizes)
|
|
99
|
+
// ------------------------------------------------------------------------
|
|
100
|
+
"iso_c0": (width: 917.00mm, height: 1297.00mm), // ISO C0
|
|
101
|
+
"iso_c1": (width: 648.00mm, height: 917.00mm), // ISO C1
|
|
102
|
+
"iso_c2": (width: 458.00mm, height: 648.00mm), // ISO C2
|
|
103
|
+
"iso_c3": (width: 324.00mm, height: 458.00mm), // ISO C3
|
|
104
|
+
"iso_c4": (width: 229.00mm, height: 324.00mm), // ISO C4
|
|
105
|
+
"iso_c5": (width: 162.00mm, height: 229.00mm), // ISO C5
|
|
106
|
+
"iso_c6": (width: 114.00mm, height: 162.00mm), // ISO C6
|
|
107
|
+
"iso_c7": (width: 81.00mm, height: 114.00mm), // ISO C7
|
|
108
|
+
"iso_c8": (width: 57.00mm, height: 81.00mm), // ISO C8
|
|
109
|
+
"iso_c9": (width: 40.00mm, height: 57.00mm), // ISO C9
|
|
110
|
+
"iso_c10": (width: 28.00mm, height: 40.00mm), // ISO C10
|
|
111
|
+
|
|
112
|
+
// ISO RA Series (ISO 217:2013)
|
|
113
|
+
// ------------------------------------------------------------------------
|
|
114
|
+
"iso_ra0": (width: 860.00mm, height: 1220.00mm), // ISO RA0
|
|
115
|
+
"iso_ra1": (width: 610.00mm, height: 860.00mm), // ISO RA1
|
|
116
|
+
"iso_ra2": (width: 430.00mm, height: 610.00mm), // ISO RA2
|
|
117
|
+
"iso_ra3": (width: 305.00mm, height: 430.00mm), // ISO RA3
|
|
118
|
+
"iso_ra4": (width: 215.00mm, height: 305.00mm), // ISO RA4
|
|
119
|
+
|
|
120
|
+
// ISO SRA Series (ISO 217:2013)
|
|
121
|
+
// ------------------------------------------------------------------------
|
|
122
|
+
"iso_sra0": (width: 900.00mm, height: 1280.00mm), // ISO SRA0
|
|
123
|
+
"iso_sra1": (width: 640.00mm, height: 900.00mm), // ISO SRA1
|
|
124
|
+
"iso_sra2": (width: 450.00mm, height: 640.00mm), // ISO SRA2
|
|
125
|
+
"iso_sra3": (width: 320.00mm, height: 450.00mm), // ISO SRA3
|
|
126
|
+
"iso_sra4": (width: 225.00mm, height: 320.00mm), // ISO SRA4
|
|
127
|
+
|
|
128
|
+
// JIS A Series
|
|
129
|
+
// ------------------------------------------------------------------------
|
|
130
|
+
"jis_a0": (width: 841.00mm, height: 1189.00mm), // JIS A0
|
|
131
|
+
"jis_a1": (width: 594.00mm, height: 841.00mm), // JIS A1
|
|
132
|
+
"jis_a2": (width: 420.00mm, height: 594.00mm), // JIS A2
|
|
133
|
+
"jis_a3": (width: 297.00mm, height: 420.00mm), // JIS A3
|
|
134
|
+
"jis_a4": (width: 210.00mm, height: 297.00mm), // JIS A4
|
|
135
|
+
"jis_a5": (width: 148.00mm, height: 210.00mm), // JIS A5
|
|
136
|
+
"jis_a6": (width: 105.00mm, height: 148.00mm), // JIS A6
|
|
137
|
+
"jis_a7": (width: 74.00mm, height: 105.00mm), // JIS A7
|
|
138
|
+
"jis_a8": (width: 52.00mm, height: 74.00mm), // JIS A8
|
|
139
|
+
"jis_a9": (width: 37.00mm, height: 52.00mm), // JIS A9
|
|
140
|
+
"jis_a10": (width: 26.00mm, height: 37.00mm), // JIS A10
|
|
141
|
+
|
|
142
|
+
// JIS B Series
|
|
143
|
+
// ------------------------------------------------------------------------
|
|
144
|
+
"jis_b0": (width: 1030.00mm, height: 1456.00mm), // JIS B0
|
|
145
|
+
"jis_b1": (width: 728.00mm, height: 1030.00mm), // JIS B1
|
|
146
|
+
"jis_b2": (width: 515.00mm, height: 728.00mm), // JIS B2
|
|
147
|
+
"jis_b3": (width: 364.00mm, height: 515.00mm), // JIS B3
|
|
148
|
+
"jis_b4": (width: 257.00mm, height: 364.00mm), // JIS B4
|
|
149
|
+
"jis_b5": (width: 182.00mm, height: 257.00mm), // JIS B5
|
|
150
|
+
"jis_b6": (width: 128.00mm, height: 182.00mm), // JIS B6
|
|
151
|
+
"jis_b7": (width: 91.00mm, height: 128.00mm), // JIS B7
|
|
152
|
+
"jis_b8": (width: 64.00mm, height: 91.00mm), // JIS B8
|
|
153
|
+
"jis_b9": (width: 45.00mm, height: 64.00mm), // JIS B9
|
|
154
|
+
"jis_b10": (width: 32.00mm, height: 45.00mm), // JIS B10
|
|
155
|
+
|
|
156
|
+
// JIS C Series
|
|
157
|
+
// ------------------------------------------------------------------------
|
|
158
|
+
"jis_c0": (width: 917.00mm, height: 1297.00mm), // JIS C0
|
|
159
|
+
"jis_c1": (width: 648.00mm, height: 917.00mm), // JIS C1
|
|
160
|
+
"jis_c2": (width: 458.00mm, height: 648.00mm), // JIS C2
|
|
161
|
+
"jis_c3": (width: 324.00mm, height: 458.00mm), // JIS C3
|
|
162
|
+
"jis_c4": (width: 229.00mm, height: 324.00mm), // JIS C4
|
|
163
|
+
"jis_c5": (width: 162.00mm, height: 229.00mm), // JIS C5
|
|
164
|
+
"jis_c6": (width: 114.00mm, height: 162.00mm), // JIS C6
|
|
165
|
+
"jis_c7": (width: 81.00mm, height: 114.00mm), // JIS C7
|
|
166
|
+
"jis_c8": (width: 57.00mm, height: 81.00mm), // JIS C8
|
|
167
|
+
"jis_c9": (width: 40.00mm, height: 57.00mm), // JIS C9
|
|
168
|
+
"jis_c10": (width: 28.00mm, height: 40.00mm), // JIS C10
|
|
169
|
+
|
|
170
|
+
// PA (Alternate) Series
|
|
171
|
+
// ------------------------------------------------------------------------
|
|
172
|
+
"pa0": (width: 840.00mm, height: 1120.00mm), // PA0
|
|
173
|
+
"pa1": (width: 560.00mm, height: 840.00mm), // PA1
|
|
174
|
+
"pa2": (width: 420.00mm, height: 560.00mm), // PA2
|
|
175
|
+
"pa3": (width: 280.00mm, height: 420.00mm), // PA3
|
|
176
|
+
"pa4": (width: 210.00mm, height: 280.00mm), // PA4
|
|
177
|
+
"pa5": (width: 140.00mm, height: 210.00mm), // PA5
|
|
178
|
+
"pa6": (width: 105.00mm, height: 140.00mm), // PA6
|
|
179
|
+
"pa7": (width: 70.00mm, height: 105.00mm), // PA7
|
|
180
|
+
"pa8": (width: 52.00mm, height: 70.00mm), // PA8
|
|
181
|
+
"pa9": (width: 35.00mm, height: 52.00mm), // PA9
|
|
182
|
+
"pa10": (width: 26.00mm, height: 35.00mm), // PA10
|
|
183
|
+
|
|
184
|
+
// Photographic Paper Sizes (ISO 1008)
|
|
185
|
+
// ------------------------------------------------------------------------
|
|
186
|
+
"photo_3x3": (width: 3.00in, height: 3.00in), // 3" x 3"
|
|
187
|
+
"photo_4x5": (width: 4.00in, height: 5.00in), // 4" x 5"
|
|
188
|
+
"photo_5x7": (width: 5.00in, height: 7.00in), // 5" x 7"
|
|
189
|
+
"photo_8x10": (width: 8.00in, height: 10.00in), // 8" x 10"
|
|
190
|
+
"photo_10x12": (width: 10.00in, height: 12.00in), // 10" x 12"
|
|
191
|
+
"photo_16x20": (width: 16.00in, height: 20.00in), // 16" x 20"
|
|
192
|
+
|
|
193
|
+
// Photographic Paper Sizes (US)
|
|
194
|
+
// ------------------------------------------------------------------------
|
|
195
|
+
"photo_2r": (width: 2.50in, height: 3.50in), // 2R (Wallet)
|
|
196
|
+
"photo_3r": (width: 3.50in, height: 5.00in), // 3R
|
|
197
|
+
"photo_4r": (width: 4.00in, height: 6.00in), // 4R
|
|
198
|
+
"photo_5r": (width: 5.00in, height: 7.00in), // 5R
|
|
199
|
+
"photo_6r": (width: 6.00in, height: 8.00in), // 6R
|
|
200
|
+
"photo_8r": (width: 8.00in, height: 10.00in), // 8R
|
|
201
|
+
"photo_8r_plus": (width: 8.00in, height: 12.00in), // 8R+
|
|
202
|
+
"photo_10r": (width: 10.00in, height: 12.00in), // 10R
|
|
203
|
+
"photo_10r_plus": (width: 10.00in, height: 15.00in), // 10R+
|
|
204
|
+
"photo_11r": (width: 11.00in, height: 14.00in), // 11R
|
|
205
|
+
"photo_11r_plus": (width: 11.00in, height: 17.00in), // 11R+
|
|
206
|
+
"photo_12r": (width: 12.00in, height: 15.00in), // 12R
|
|
207
|
+
"photo_12r_plus": (width: 12.00in, height: 18.00in), // 12R+
|
|
208
|
+
"photo_14r": (width: 14.00in, height: 17.00in), // 14R
|
|
209
|
+
"photo_16r": (width: 16.00in, height: 20.00in), // 16R
|
|
210
|
+
"photo_16r_plus": (width: 16.00in, height: 24.00in), // 16R+
|
|
211
|
+
"photo_20r": (width: 20.00in, height: 24.00in), // 20R
|
|
212
|
+
"photo_20r_plus": (width: 20.00in, height: 28.00in), // 20R+
|
|
213
|
+
"photo_22r": (width: 20.00in, height: 29.50in), // 22R
|
|
214
|
+
"photo_24r": (width: 24.00in, height: 31.50in), // 24R
|
|
215
|
+
"photo_24r_plus": (width: 24.00in, height: 35.50in), // 24R+
|
|
216
|
+
"photo_30r": (width: 30.00in, height: 40.00in), // 30R
|
|
217
|
+
|
|
218
|
+
// US Paper Sizes
|
|
219
|
+
// ------------------------------------------------------------------------
|
|
220
|
+
"us_letter": (width: 8.50in, height: 11.00in), // US Letter
|
|
221
|
+
"us_legal": (width: 8.50in, height: 14.00in), // US Legal
|
|
222
|
+
"us_ledger": (width: 11.00in, height: 17.00in), // US Ledger/Tabloid
|
|
223
|
+
"us_junior": (width: 5.00in, height: 8.00in), // US Junior Legal
|
|
224
|
+
"us_half_letter": (width: 5.50in, height: 8.50in), // US Half Letter
|
|
225
|
+
"us_government_letter": (width: 8.00in, height: 10.50in), // US Government Letter
|
|
226
|
+
"us_executive": (width: 7.25in, height: 10.50in), // US Executive
|
|
227
|
+
"us_statement": (width: 5.50in, height: 8.50in), // US Statement
|
|
228
|
+
"us_folio": (width: 8.50in, height: 13.00in), // US Folio
|
|
229
|
+
"us_quarto": (width: 8.00in, height: 10.00in), // US Quarto
|
|
230
|
+
"us_tabloid_extra": (width: 12.00in, height: 18.00in), // US Tabloid Extra
|
|
231
|
+
|
|
232
|
+
// US Poster Sizes
|
|
233
|
+
// ------------------------------------------------------------------------
|
|
234
|
+
'poster_small': (width: 11.00in, height: 17.00in), // Small Poster
|
|
235
|
+
'poster_medium': (width: 18.00in, height: 24.00in), // Medium Poster
|
|
236
|
+
'poster_large': (width: 24.00in, height: 36.00in), // Large Poster
|
|
237
|
+
'poster_movie': (width: 27.00in, height: 40.00in), // Movie Poster
|
|
238
|
+
'poster_xlarge': (width: 36.00in, height: 48.00in), // Extra Large Poster
|
|
239
|
+
|
|
240
|
+
// Art Canvas Sizes
|
|
241
|
+
// ------------------------------------------------------------------------
|
|
242
|
+
"canvas_8x10": (width: 8.00in, height: 10.00in), // 8" x 10" (4:5 ratio)
|
|
243
|
+
"canvas_10x14": (width: 10.00in, height: 14.00in), // 10" x 14"
|
|
244
|
+
"canvas_10x24": (width: 10.00in, height: 24.00in), // 10" x 24" (5:12 ratio)
|
|
245
|
+
"canvas_12x12": (width: 12.00in, height: 12.00in), // 12" x 12" (1:1 ratio)
|
|
246
|
+
"canvas_12x36": (width: 12.00in, height: 36.00in), // 12" x 36" (1:3 ratio)
|
|
247
|
+
"canvas_16x16": (width: 16.00in, height: 16.00in), // 16" x 16" (1:1 ratio)
|
|
248
|
+
"canvas_16x20": (width: 16.00in, height: 20.00in), // 16" x 20" (4:5 ratio)
|
|
249
|
+
"canvas_18x24": (width: 18.00in, height: 24.00in), // 18" x 24" (3:4 ratio)
|
|
250
|
+
"canvas_20x30": (width: 20.00in, height: 30.00in), // 20" x 30" (2:3 ratio)
|
|
251
|
+
"canvas_20x60": (width: 20.00in, height: 60.00in), // 20" x 60" (1:3 ratio)
|
|
252
|
+
"canvas_24x36": (width: 24.00in, height: 36.00in), // 24" x 36" (2:3 ratio)
|
|
253
|
+
"canvas_30x40": (width: 30.00in, height: 40.00in), // 30" x 40" (3:4 ratio)
|
|
254
|
+
"canvas_30x90": (width: 30.00in, height: 90.00in), // 30" x 90" (1:3 ratio)
|
|
255
|
+
"canvas_36x48": (width: 36.00in, height: 48.00in), // 36" x 48" (3:4 ratio)
|
|
256
|
+
"canvas_40x40": (width: 40.00in, height: 40.00in), // 40" x 40" (1:1 ratio)
|
|
257
|
+
"canvas_40x60": (width: 40.00in, height: 60.00in), // 40" x 60" (2:3 ratio)
|
|
258
|
+
"canvas_48x72": (width: 48.00in, height: 72.00in), // 48" x 72" (2:3 ratio)
|
|
259
|
+
|
|
260
|
+
// Book Sizes (Common in Publishing)
|
|
261
|
+
// ------------------------------------------------------------------------
|
|
262
|
+
'book_small': (width: 5in, height: 8in), // Small Book
|
|
263
|
+
'book_medium': (width: 6in, height: 9in), // Medium Book
|
|
264
|
+
'book_large': (width: 7in, height: 10in), // Large Book
|
|
265
|
+
'book_collectors': (width: 9in, height: 12in), // Collectors Edition Book
|
|
266
|
+
'book_coffee_table': (width: 12in, height: 15in), // Coffee Table Book
|
|
267
|
+
|
|
268
|
+
// Business Card Standard Sizes
|
|
269
|
+
// ------------------------------------------------------------------------
|
|
270
|
+
'business_card_us': (width: 3.5in, height: 2in), // US Standard Business Card
|
|
271
|
+
'business_card_eu': (width: 85mm, height: 55mm), // EU Standard Business Card
|
|
272
|
+
'business_card_iso': (width: 90mm, height: 55mm), // ISO Standard Business Card
|
|
273
|
+
|
|
274
|
+
// Index Card Sizes
|
|
275
|
+
// ------------------------------------------------------------------------
|
|
276
|
+
'index_card_3x5': (width: 3in, height: 5in), // 3" x 5" Index Card
|
|
277
|
+
'index_card_4x6': (width: 4in, height: 6in), // 4" x 6" Index Card
|
|
278
|
+
'index_card_5x8': (width: 5in, height: 8in), // 5" x 8" Index Card
|
|
279
|
+
|
|
280
|
+
// Commercial Printing Sizes
|
|
281
|
+
// ------------------------------------------------------------------------
|
|
282
|
+
'brochure_8x10': (width: 8in, height: 10in), // 8" x 10" Brochure
|
|
283
|
+
'brochure_11x17': (width: 11in, height: 17in), // 11" x 17" Brochure
|
|
284
|
+
|
|
285
|
+
// Advertising Flyer Sizes
|
|
286
|
+
// ------------------------------------------------------------------------
|
|
287
|
+
'flyer_small': (width: 4.25in, height: 5.5in), // Small Flyer
|
|
288
|
+
'flyer_medium': (width: 5.5in, height: 8.5in), // Medium Flyer
|
|
289
|
+
'flyer_large': (width: 8.5in, height: 11in), // Large Flyer
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
// Academic Paper Sizes
|
|
293
|
+
// ------------------------------------------------------------------------
|
|
294
|
+
'journal_standard': (width: 6in, height: 9in), // Standard Academic Journal
|
|
295
|
+
'journal_large': (width: 7in, height: 10in), // Large Academic Journal
|
|
296
|
+
'thesis_standard': (width: 8.5in, height: 11in), // Standard Thesis Paper
|
|
297
|
+
'thesis_large': (width: 11in, height: 17in), // Large Thesis Paper
|
|
298
|
+
|
|
299
|
+
|
|
300
|
+
// Other Standard Sizes
|
|
301
|
+
// ------------------------------------------------------------------------
|
|
302
|
+
'comic_book': (width: 6.625in, height: 10.25in), // Standard Comic Book
|
|
303
|
+
'music_sheet': (width: 9in, height: 12in), // Standard Music Sheet
|
|
304
|
+
'playing_card': (width: 2.5in, height: 3.5in), // Standard Playing Card
|
|
305
|
+
|
|
306
|
+
) !default;
|
|
307
|
+
|
|
308
|
+
|
|
309
|
+
// Apply Function
|
|
310
|
+
// ============================================================================
|
|
311
|
+
|
|
312
|
+
@mixin set_paper_size($size) {
|
|
313
|
+
@if map-has-key($paper-sizes, $size) {
|
|
314
|
+
$size-map: map-get($paper-sizes, $size);
|
|
315
|
+
width: map-get($size-map, width);
|
|
316
|
+
height: map-get($size-map, height);
|
|
317
|
+
} @else {
|
|
318
|
+
@warn "Invalid paper size: #{$size}.";
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
|
|
323
|
+
$paper_size_ansi_a: map-get($paper_sizes, 'ansi_a');
|
|
324
|
+
$paper_size_ansi_b: map-get($paper_sizes, 'ansi_b');
|
|
325
|
+
$paper_size_ansi_c: map-get($paper_sizes, 'ansi_c');
|
|
326
|
+
$paper_size_ansi_d: map-get($paper_sizes, 'ansi_d');
|
|
327
|
+
$paper_size_ansi_e: map-get($paper_sizes, 'ansi_e');
|
|
328
|
+
|
|
329
|
+
$paper_size_ansi_a_width: map-get($paper_size_ansi_a, width);
|
|
330
|
+
$paper_size_ansi_a_height: map-get($paper_size_ansi_a, height);
|
|
331
|
+
|
|
332
|
+
.paper {
|
|
333
|
+
&.ansi_a {
|
|
334
|
+
width: map-get($paper_size_ansi_a, width);
|
|
335
|
+
height: map-get($paper_size_ansi_a, height);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
// Add similar classes for other sizes...
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
// Usage
|
|
342
|
+
// ============================================================================
|
|
343
|
+
|
|
344
|
+
.paper {
|
|
345
|
+
|
|
346
|
+
// Q Series
|
|
347
|
+
// ------------------------------------------------------------------------
|
|
348
|
+
&.q0 { @include set_paper_size("q0"); }
|
|
349
|
+
&.q1 { @include set_paper_size("q1"); }
|
|
350
|
+
&.q2 { @include set_paper_size("q2"); }
|
|
351
|
+
&.q3 { @include set_paper_size("q3"); }
|
|
352
|
+
&.q4 { @include set_paper_size("q4"); }
|
|
353
|
+
&.q5 { @include set_paper_size("q5"); }
|
|
354
|
+
&.q6 { @include set_paper_size("q6"); }
|
|
355
|
+
&.q7 { @include set_paper_size("q7"); }
|
|
356
|
+
&.q8 { @include set_paper_size("q8"); }
|
|
357
|
+
&.q9 { @include set_paper_size("q9"); }
|
|
358
|
+
&.q10 { @include set_paper_size("q10"); }
|
|
359
|
+
|
|
360
|
+
// ISO A Series
|
|
361
|
+
// ------------------------------------------------------------------------
|
|
362
|
+
&.iso_a0 { @include set_paper_size("iso_a0"); }
|
|
363
|
+
&.iso_a1 { @include set_paper_size("iso_a1"); }
|
|
364
|
+
&.iso_a2 { @include set_paper_size("iso_a2"); }
|
|
365
|
+
&.iso_a3 { @include set_paper_size("iso_a3"); }
|
|
366
|
+
&.iso_a4 { @include set_paper_size("iso_a4"); }
|
|
367
|
+
&.iso_a5 { @include set_paper_size("iso_a5"); }
|
|
368
|
+
&.iso_a6 { @include set_paper_size("iso_a6"); }
|
|
369
|
+
&.iso_a7 { @include set_paper_size("iso_a7"); }
|
|
370
|
+
&.iso_a8 { @include set_paper_size("iso_a8"); }
|
|
371
|
+
&.iso_a9 { @include set_paper_size("iso_a9"); }
|
|
372
|
+
&.iso_a10 { @include set_paper_size("iso_a10"); }
|
|
373
|
+
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
// Function to calculate ISO paper sizes
|
|
377
|
+
// @function iso-paper-size($number) {
|
|
378
|
+
// $base-width: 841mm;
|
|
379
|
+
// $base-height: 1189mm;
|
|
380
|
+
|
|
381
|
+
// @for $i from 0 through $number {
|
|
382
|
+
// $base-width: $base-width / if($i > 0, 2, 1);
|
|
383
|
+
// $base-height: $base-height / if($i > 0 and $i % 2 == 0, 2, 1);
|
|
384
|
+
// }
|
|
385
|
+
|
|
386
|
+
// @return (width: $base-width, height: $base-height);
|
|
387
|
+
// }
|
|
388
|
+
|
|
389
|
+
|
|
390
|
+
// Function to calculate ISO B-series paper sizes
|
|
391
|
+
// @function iso-paper-size-b($number) {
|
|
392
|
+
// $base-width: 1000mm; // Approximate base width for B0
|
|
393
|
+
// $base-height: 1414mm; // Approximate base height for B0
|
|
394
|
+
|
|
395
|
+
// @for $i from 0 through $number {
|
|
396
|
+
// $base-width: $base-width / if($i > 0, sqrt(2), 1);
|
|
397
|
+
// $base-height: $base-height / if($i > 0 and $i % 2 == 0, sqrt(2), 1);
|
|
398
|
+
// }
|
|
399
|
+
|
|
400
|
+
// @return (width: $base-width, height: $base-height);
|
|
401
|
+
// }
|
|
402
|
+
|
|
403
|
+
// Function to calculate ISO C-series paper sizes
|
|
404
|
+
// @function iso-paper-size-c($number) {
|
|
405
|
+
// $base-width: 917mm; // Approximate base width for C0
|
|
406
|
+
// $base-height: 1297mm; // Approximate base height for C0
|
|
407
|
+
|
|
408
|
+
// @for $i from 0 through $number {
|
|
409
|
+
// $base-width: $base-width / if($i > 0, sqrt(2), 1);
|
|
410
|
+
// $base-height: $base-height / if($i > 0 and $i % 2 == 0, sqrt(2), 1);
|
|
411
|
+
// }
|
|
412
|
+
|
|
413
|
+
// @return (width: $base-width, height: $base-height);
|
|
414
|
+
// }
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
// Copyright 2020 Scape Agency BV
|
|
2
|
+
|
|
3
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
// you may not use this file except in compliance with the License.
|
|
5
|
+
// You may obtain a copy of the License at
|
|
6
|
+
|
|
7
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
|
|
9
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
// See the License for the specific language governing permissions and
|
|
13
|
+
// limitations under the License.
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
// ============================================================================
|
|
17
|
+
// Layout | Ratio
|
|
18
|
+
// ============================================================================
|
|
19
|
+
|
|
20
|
+
@mixin ratio ($val01, $val02) {
|
|
21
|
+
aspect-ratio: calc($val01 / $val02);
|
|
22
|
+
width: 100%;
|
|
23
|
+
position: relative;
|
|
24
|
+
overflow: hidden;
|
|
25
|
+
display: inline-block;
|
|
26
|
+
// vertical-align: top;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@mixin ratio_1x1 { @include ratio(1, 1); }
|
|
30
|
+
@mixin ratio_1x2 { @include ratio(1, 2); }
|
|
31
|
+
@mixin ratio_2x1 { @include ratio(2, 1); }
|
|
32
|
+
@mixin ratio_1x3 { @include ratio(1, 3); }
|
|
33
|
+
@mixin ratio_3x1 { @include ratio(3, 1); }
|
|
34
|
+
@mixin ratio_1x4 { @include ratio(1, 4); }
|
|
35
|
+
@mixin ratio_4x1 { @include ratio(4, 1); }
|
|
36
|
+
@mixin ratio_3x2 { @include ratio(3, 2); }
|
|
37
|
+
@mixin ratio_2x3 { @include ratio(2, 3); }
|
|
38
|
+
@mixin ratio_4x3 { @include ratio(4, 3); }
|
|
39
|
+
@mixin ratio_3x4 { @include ratio(3, 4); }
|
|
40
|
+
@mixin ratio_16x9 { @include ratio(16, 9); }
|
|
41
|
+
@mixin ratio_16x10 { @include ratio(16, 10); }
|
|
42
|
+
|
|
43
|
+
.ratio_1x1 { @include ratio_1x1; }
|
|
44
|
+
.ratio_1x2 { @include ratio_1x2; }
|
|
45
|
+
.ratio_2x1 { @include ratio_2x1; }
|
|
46
|
+
.ratio_1x3 { @include ratio_1x3; }
|
|
47
|
+
.ratio_3x1 { @include ratio_3x1; }
|
|
48
|
+
.ratio_1x4 { @include ratio_1x4; }
|
|
49
|
+
.ratio_4x1 { @include ratio_4x1; }
|
|
50
|
+
.ratio_3x2 { @include ratio_3x2; }
|
|
51
|
+
.ratio_2x3 { @include ratio_2x3; }
|
|
52
|
+
.ratio_4x3 { @include ratio_4x3; }
|
|
53
|
+
.ratio_3x4 { @include ratio_3x4; }
|
|
54
|
+
.ratio_16x9 { @include ratio_16x9; }
|
|
55
|
+
.ratio_16x10 { @include ratio_16x10; }
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
// .
|
|
59
|
+
// ----------------------------------------------------------------------------
|
|
60
|
+
|
|
61
|
+
@mixin ratio_p ($val01) {
|
|
62
|
+
padding-bottom: $val01;
|
|
63
|
+
width: 100%;
|
|
64
|
+
position: relative;
|
|
65
|
+
overflow: hidden;
|
|
66
|
+
display: inline-block;
|
|
67
|
+
// vertical-align: top;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@mixin ratio_p_1x1 { @include ratio_p(100.00%); }
|
|
71
|
+
@mixin ratio_p_1x2 { @include ratio_p(200.00%); }
|
|
72
|
+
@mixin ratio_p_2x1 { @include ratio_p( 50.00%); }
|
|
73
|
+
@mixin ratio_p_1x3 { @include ratio_p(300.00%); }
|
|
74
|
+
@mixin ratio_p_3x1 { @include ratio_p( 33.33%); }
|
|
75
|
+
@mixin ratio_p_1x4 { @include ratio_p(400.00%); }
|
|
76
|
+
@mixin ratio_p_4x1 { @include ratio_p( 25.00%); }
|
|
77
|
+
@mixin ratio_p_2x3 { @include ratio_p(150.00%); }
|
|
78
|
+
@mixin ratio_p_3x2 { @include ratio_p( 66.67%); }
|
|
79
|
+
@mixin ratio_p_3x4 { @include ratio_p(133.33%); }
|
|
80
|
+
@mixin ratio_p_4x3 { @include ratio_p( 75.00%); }
|
|
81
|
+
@mixin ratio_p_16x9 { @include ratio_p( 56.25%); }
|
|
82
|
+
@mixin ratio_p_16x10 { @include ratio_p( 62.50%); }
|
|
83
|
+
|
|
84
|
+
.ratio_p_1x1 { @include ratio_p_1x1; }
|
|
85
|
+
.ratio_p_1x2 { @include ratio_p_1x2; }
|
|
86
|
+
.ratio_p_2x1 { @include ratio_p_2x1; }
|
|
87
|
+
.ratio_p_1x3 { @include ratio_p_1x3; }
|
|
88
|
+
.ratio_p_3x1 { @include ratio_p_3x1; }
|
|
89
|
+
.ratio_p_1x4 { @include ratio_p_1x4; }
|
|
90
|
+
.ratio_p_4x1 { @include ratio_p_4x1; }
|
|
91
|
+
.ratio_p_3x2 { @include ratio_p_3x2; }
|
|
92
|
+
.ratio_p_2x3 { @include ratio_p_2x3; }
|
|
93
|
+
.ratio_p_4x3 { @include ratio_p_4x3; }
|
|
94
|
+
.ratio_p_3x4 { @include ratio_p_3x4; }
|
|
95
|
+
.ratio_p_16x9 { @include ratio_p_16x9; }
|
|
96
|
+
.ratio_p_16x10 { @include ratio_p_16x10; }
|
|
97
|
+
|