@jetbrains/kotlin-web-site-ui 4.13.0-alpha.1 → 4.13.0-alpha.3

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.
Files changed (8) hide show
  1. package/out/components/breakpoints-v2/constants.js +1 -1
  2. package/out/components/breakpoints-v2/hooks.js +12 -4
  3. package/out/components/breakpoints-v2/index.js +1 -1
  4. package/out/components/breakpoints-v2/media.pcss +5 -5
  5. package/out/components/footer/index.css +10 -10
  6. package/out/components/layout/index.css +5 -5
  7. package/out/components/layout-v2/index.css +10 -4
  8. package/package.json +1 -1
package/out/components/breakpoints-v2/constants.js CHANGED
@@ -1,7 +1,7 @@
1
1
  const BREAKPOINTS = {
2
2
  MS: 472,
3
3
  ML: 616,
4
- TM: 808,
4
+ TS: 808,
5
5
  TL: 1000,
6
6
  DS: 1190
7
7
  };
package/out/components/breakpoints-v2/hooks.js CHANGED
@@ -1,12 +1,16 @@
1
1
  import { useMedia } from 'the-platform/useMedia';
2
- import { BREAKPOINTS_MAX_MEDIA } from './constants.js';
2
+ import { BREAKPOINTS_MAX_MEDIA, BREAKPOINTS_MORE_MEDIA } from './constants.js';
3
3
 
4
4
  function useMS() {
5
5
  return useMedia(BREAKPOINTS_MAX_MEDIA.MS, false);
6
6
  }
7
7
 
8
- function useTM() {
9
- return useMedia(BREAKPOINTS_MAX_MEDIA.TM, false);
8
+ function useML() {
9
+ return useMedia(BREAKPOINTS_MAX_MEDIA.ML, false);
10
+ }
11
+
12
+ function useTS() {
13
+ return useMedia(BREAKPOINTS_MAX_MEDIA.TS, false);
10
14
  }
11
15
 
12
16
  function useTL() {
@@ -17,4 +21,8 @@ function useDS() {
17
21
  return useMedia(BREAKPOINTS_MAX_MEDIA.DS, false);
18
22
  }
19
23
 
20
- export { useDS, useMS, useTL, useTM };
24
+ function useDL() {
25
+ return useMedia(BREAKPOINTS_MORE_MEDIA.DS, false);
26
+ }
27
+
28
+ export { useDL, useDS, useML, useMS, useTL, useTS };
package/out/components/breakpoints-v2/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export { BREAKPOINTS, BREAKPOINTS_IN_MEDIA, BREAKPOINTS_LESS_MEDIA, BREAKPOINTS_MAX_MEDIA, BREAKPOINTS_MIN_MEDIA, BREAKPOINTS_MORE_MEDIA, BREAKPOINTS_NAMES } from './constants.js';
2
- export { useDS, useMS, useTL, useTM } from './hooks.js';
2
+ export { useDL, useDS, useML, useMS, useTL, useTS } from './hooks.js';
package/out/components/breakpoints-v2/media.pcss CHANGED
@@ -1,24 +1,24 @@
1
1
  @custom-media --ktl-ms (max-width: 472px);
2
2
  @custom-media --ktl-ml (max-width: 616px);
3
- @custom-media --ktl-tm (max-width: 808px);
3
+ @custom-media --ktl-ts (max-width: 808px);
4
4
  @custom-media --ktl-tl (max-width: 1000px);
5
5
  @custom-media --ktl-ds (max-width: 1190px);
6
6
  @custom-media --ktl-ms-min (min-width: 473px);
7
7
  @custom-media --ktl-ml-min (min-width: 617px);
8
- @custom-media --ktl-tm-min (min-width: 809px);
8
+ @custom-media --ktl-ts-min (min-width: 809px);
9
9
  @custom-media --ktl-tl-min (min-width: 1001px);
10
10
  @custom-media --ktl-ds-min (min-width: 1191px);
11
11
  @custom-media --ktl-ms-in (width <= 472px);
12
12
  @custom-media --ktl-ml-in (472px < width <= 616px);
13
- @custom-media --ktl-tm-in (616px < width <= 808px);
13
+ @custom-media --ktl-ts-in (616px < width <= 808px);
14
14
  @custom-media --ktl-tl-in (808px < width <= 1000px);
15
15
  @custom-media --ktl-ds-in (1000px < width <= 1190px);
16
16
  @custom-media --ktl-ms-more (width > 472px);
17
17
  @custom-media --ktl-ml-more (width > 616px);
18
- @custom-media --ktl-tm-more (width > 808px);
18
+ @custom-media --ktl-ts-more (width > 808px);
19
19
  @custom-media --ktl-tl-more (width > 1000px);
20
20
  @custom-media --ktl-ds-more (width > 1190px);
21
21
  @custom-media --ktl-ml-less (width < 472px);
22
- @custom-media --ktl-tm-less (width < 616px);
22
+ @custom-media --ktl-ts-less (width < 616px);
23
23
  @custom-media --ktl-tl-less (width < 808px);
24
24
  @custom-media --ktl-ds-less (width < 1000px);
package/out/components/footer/index.css CHANGED
@@ -4,7 +4,7 @@
4
4
  justify-content: start;
5
5
  }
6
6
 
7
- @media (max-width: 616px) {.ktl-social-list-module_social-list_K2Nqu {
7
+ @media (max-width: 808px) {.ktl-social-list-module_social-list_K2Nqu {
8
8
  -moz-column-gap: var(--ktl-box-block-l);
9
9
  column-gap: var(--ktl-box-block-l)
10
10
  }
@@ -78,7 +78,7 @@
78
78
  list-style: none;
79
79
  }
80
80
 
81
- @media (max-width: 616px) {.ktl-nav-list-module_nav-list_-k4np {
81
+ @media (max-width: 808px) {.ktl-nav-list-module_nav-list_-k4np {
82
82
  padding: var(--ktl-box-section-s) 0;
83
83
  margin: var(--ktl-box-section-s) 0 0;
84
84
  border-top: 1px solid rgba(255, 255, 255, 0.2);
@@ -166,7 +166,7 @@
166
166
  background-color: rgba(255, 255, 255, 0.2)
167
167
  }
168
168
 
169
- @media (max-width: 616px) {
169
+ @media (max-width: 808px) {
170
170
  .ktl-nav-item-module_nav-item_isoyN {
171
171
  margin: 0;
172
172
  padding: 0;
@@ -265,13 +265,13 @@
265
265
  display: none;
266
266
  }
267
267
 
268
- @media (width < 616px) {
268
+ @media (max-width: 808px) {
269
269
  .ktl-footer-module_footer_m67Up {
270
270
  padding: var(--ktl-box-section-l) 0;
271
271
  }
272
272
  }
273
273
 
274
- @media (max-width: 616px) {
274
+ @media (max-width: 808px) {
275
275
  .ktl-footer-module_social-list-area_bS3eE {
276
276
  display: block;
277
277
  }
@@ -299,23 +299,23 @@
299
299
  --ktl-layout-width: 1144px;
300
300
  }
301
301
 
302
- @media (width < 1000px) {.ktl-layout {
302
+ @media (max-width: 1190px) {.ktl-layout {
303
303
  --ktl-layout-width: 952px;
304
304
  }
305
305
  }
306
306
 
307
- @media (width < 808px) {.ktl-layout {
307
+ @media (max-width: 1000px) {.ktl-layout {
308
308
  --ktl-layout-spacing: 48px;
309
309
  --ktl-layout-width: 760px;
310
310
  }
311
311
  }
312
312
 
313
- @media (width < 616px) {.ktl-layout {
313
+ @media (max-width: 808px) {.ktl-layout {
314
314
  --ktl-layout-width: 568px;
315
315
  }
316
316
  }
317
317
 
318
- @media (max-width: 616px) {.ktl-layout {
318
+ @media (max-width: 808px) {.ktl-layout {
319
319
  --ktl-layout-width: 424px;
320
320
  }
321
321
  }
@@ -325,7 +325,7 @@
325
325
  }
326
326
  }
327
327
 
328
- @media (width > 472px) {.ktl-layout {
328
+ @media (max-width: 472px) {.ktl-layout {
329
329
  --ktl-layout-width: 272px;
330
330
  }
331
331
  }
package/out/components/layout/index.css CHANGED
@@ -3,23 +3,23 @@
3
3
  --ktl-layout-width: 1144px;
4
4
  }
5
5
 
6
- @media (width < 1000px) {.ktl-layout {
6
+ @media (max-width: 1190px) {.ktl-layout {
7
7
  --ktl-layout-width: 952px;
8
8
  }
9
9
  }
10
10
 
11
- @media (width < 808px) {.ktl-layout {
11
+ @media (max-width: 1000px) {.ktl-layout {
12
12
  --ktl-layout-spacing: 48px;
13
13
  --ktl-layout-width: 760px;
14
14
  }
15
15
  }
16
16
 
17
- @media (width < 616px) {.ktl-layout {
17
+ @media (max-width: 808px) {.ktl-layout {
18
18
  --ktl-layout-width: 568px;
19
19
  }
20
20
  }
21
21
 
22
- @media (max-width: 616px) {.ktl-layout {
22
+ @media (max-width: 808px) {.ktl-layout {
23
23
  --ktl-layout-width: 424px;
24
24
  }
25
25
  }
@@ -29,7 +29,7 @@
29
29
  }
30
30
  }
31
31
 
32
- @media (width > 472px) {.ktl-layout {
32
+ @media (max-width: 472px) {.ktl-layout {
33
33
  --ktl-layout-width: 272px;
34
34
  }
35
35
  }
package/out/components/layout-v2/index.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --ktl-layout-width: 1144px;
6
6
  }
7
7
 
8
- @media (width < 1000px) {.ktl-layout-v2,
8
+ @media (1000px < width <= 1190px) {.ktl-layout-v2,
9
9
  .ktl-layout-to-2 .ktl-layout,
10
10
  .ktl-layout-to-2 .ktl-layout {
11
11
  --ktl-layout-width: 952px;
@@ -16,25 +16,31 @@
16
16
  .ktl-layout-to-2 .ktl-layout,
17
17
  .ktl-layout-to-2 .ktl-layout {
18
18
  --ktl-layout-spacing: 48px;
19
+ }
20
+ }
21
+
22
+ @media (808px < width <= 1000px) {.ktl-layout-v2,
23
+ .ktl-layout-to-2 .ktl-layout,
24
+ .ktl-layout-to-2 .ktl-layout {
19
25
  --ktl-layout-width: 760px;
20
26
  }
21
27
  }
22
28
 
23
- @media (max-width: 616px) {.ktl-layout-v2,
29
+ @media (616px < width <= 808px) {.ktl-layout-v2,
24
30
  .ktl-layout-to-2 .ktl-layout,
25
31
  .ktl-layout-to-2 .ktl-layout {
26
32
  --ktl-layout-width: 568px;
27
33
  }
28
34
  }
29
35
 
30
- @media (width < 472px) {.ktl-layout-v2,
36
+ @media (472px < width <= 616px) {.ktl-layout-v2,
31
37
  .ktl-layout-to-2 .ktl-layout,
32
38
  .ktl-layout-to-2 .ktl-layout {
33
39
  --ktl-layout-width: 424px;
34
40
  }
35
41
  }
36
42
 
37
- @media (width > 472px) {.ktl-layout-v2,
43
+ @media (width <= 472px) {.ktl-layout-v2,
38
44
  .ktl-layout-to-2 .ktl-layout,
39
45
  .ktl-layout-to-2 .ktl-layout {
40
46
  --ktl-layout-width: 312px;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@jetbrains/kotlin-web-site-ui",
3
3
  "description": "UI components for Kotlin web sites development",
4
- "version": "4.13.0-alpha.1",
4
+ "version": "4.13.0-alpha.3",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
7
7
  "files": [