@quintype/arrow 3.27.0 → 3.28.0-components-kk.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/app.scss CHANGED
@@ -32,6 +32,11 @@
32
32
  --arrow-c-dark: #0d0d0d;
33
33
  --arrow-c-light: #ffffff;
34
34
  /* Spacing */
35
+ --space11_2: 9.2rem;
36
+ --space12_2: 11.2rem;
37
+ --space14_4: 14.4rem;
38
+ --space3_3: 2.5rem;
39
+ --border-color: var(--arrow-c-invert-mono3);
35
40
  --arrow-spacing-xxs: 4px;
36
41
  --arrow-spacing-xs: 8px;
37
42
  --arrow-spacing-s: 12px;
@@ -40,8 +45,14 @@
40
45
  --arrow-spacing-l: 24px;
41
46
  --arrow-spacing-xl: 32px;
42
47
  --arrow-spacing-28: 28px;
48
+ --arrow-spacing-40: 40px;
43
49
  --arrow-spacing-48: 48px;
50
+ --arrow-spacing-50: 50px;
44
51
  --arrow-spacing-96: 96px;
52
+ --arrow-spacing-88: 88px;
53
+ --arrow-spacing-112: 112px;
54
+ --arrow-spacing-144: 144px;
55
+
45
56
  /* Font Scale */
46
57
  --arrow-fs-tiny: 14px;
47
58
  --arrow-fs-xs: 16px;
@@ -89,6 +100,7 @@
89
100
  -webkit-font-smoothing: antialiased;
90
101
  -moz-osx-font-smoothing: grayscale;
91
102
  -moz-font-feature-settings: "liga" on;
103
+
92
104
  h1,
93
105
  h2,
94
106
  h3,
@@ -99,6 +111,7 @@
99
111
  ol {
100
112
  font-family: var(--arrow-typeface-primary);
101
113
  }
114
+
102
115
  p,
103
116
  li {
104
117
  font-size: var(--arrow-fs-xs);
@@ -109,6 +122,7 @@
109
122
  margin: 0;
110
123
  padding: 0;
111
124
  }
125
+
112
126
  /* Typescale */
113
127
  h1 {
114
128
  font-size: var(--arrow-fs-28);
@@ -117,10 +131,12 @@
117
131
  font-style: normal;
118
132
  line-height: var(--arrow-lh-3);
119
133
  letter-spacing: normal;
134
+
120
135
  @media only screen and (min-width: 768px) {
121
136
  font-size: var(--arrow-fs-big);
122
137
  }
123
138
  }
139
+
124
140
  h2 {
125
141
  font-size: var(--arrow-fs-l);
126
142
  font-weight: var(--arrow-fw-bold);
@@ -128,10 +144,12 @@
128
144
  font-style: normal;
129
145
  line-height: var(--arrow-lh-3);
130
146
  letter-spacing: normal;
147
+
131
148
  @media only screen and (min-width: 768px) {
132
149
  font-size: var(--arrow-fs-huge);
133
150
  }
134
151
  }
152
+
135
153
  h3 {
136
154
  font-size: var(--arrow-fs-m);
137
155
  font-weight: var(--arrow-fw-bold);
@@ -139,10 +157,12 @@
139
157
  font-style: normal;
140
158
  line-height: var(--arrow-lh-3);
141
159
  letter-spacing: normal;
160
+
142
161
  @media only screen and (min-width: 768px) {
143
162
  font-size: var(--arrow-fs-l);
144
163
  }
145
164
  }
165
+
146
166
  h4 {
147
167
  font-size: var(--arrow-fs-s);
148
168
  font-weight: var(--arrow-fw-bold);
@@ -150,10 +170,12 @@
150
170
  font-style: normal;
151
171
  line-height: var(--arrow-lh-3);
152
172
  letter-spacing: normal;
173
+
153
174
  @media only screen and (min-width: 768px) {
154
175
  font-size: var(--arrow-fs-m);
155
176
  }
156
177
  }
178
+
157
179
  h5 {
158
180
  font-size: var(--arrow-fs-xs);
159
181
  font-weight: var(--arrow-fw-bold);
@@ -161,10 +183,12 @@
161
183
  font-style: normal;
162
184
  line-height: var(--arrow-lh-3);
163
185
  letter-spacing: normal;
186
+
164
187
  @media only screen and (min-width: 768px) {
165
188
  font-size: var(--arrow-fs-s);
166
189
  }
167
190
  }
191
+
168
192
  h6 {
169
193
  font-size: var(--arrow-fs-xs);
170
194
  font-weight: var(--arrow-fw-bold);
@@ -173,6 +197,7 @@
173
197
  line-height: var(--arrow-lh-3);
174
198
  letter-spacing: normal;
175
199
  }
200
+
176
201
  p {
177
202
  font-size: var(--arrow-fs-m);
178
203
  font-weight: normal;
@@ -227,6 +252,7 @@
227
252
 
228
253
  .arr-hidden-desktop {
229
254
  display: none;
255
+
230
256
  @media only screen and (max-width: 768px) {
231
257
  display: block;
232
258
  }
@@ -234,6 +260,7 @@
234
260
 
235
261
  .arr-hidden-mob {
236
262
  display: block;
263
+
237
264
  @media only screen and (max-width: 768px) {
238
265
  display: none;
239
266
  }
@@ -250,6 +277,7 @@
250
277
  grid-template-columns: repeat(4, minmax(auto, 150px));
251
278
  position: relative;
252
279
  margin: 0 12px;
280
+
253
281
  @media only screen and (min-width: 768px) {
254
282
  grid-template-columns:
255
283
  [grid-start] minmax(48px, auto) [container-start] repeat(12, minmax(auto, 55px)) [container-end] minmax(
@@ -258,6 +286,7 @@
258
286
  )
259
287
  [grid-end];
260
288
  margin: unset;
289
+
261
290
  @media only screen and (min-width: 1025px) {
262
291
  grid-template-columns:
263
292
  [grid-start] minmax(56px, auto) [container-start] repeat(12, minmax(auto, 73px)) [container-end] minmax(