@jetbrains/kotlin-web-site-ui 4.13.0-alpha.4 → 4.13.0-alpha.6
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.
|
@@ -3,7 +3,8 @@ const BREAKPOINTS = {
|
|
|
3
3
|
ML: 640,
|
|
4
4
|
TS: 808,
|
|
5
5
|
TL: 1000,
|
|
6
|
-
DS: 1190
|
|
6
|
+
DS: 1190,
|
|
7
|
+
DL: Infinity
|
|
7
8
|
};
|
|
8
9
|
const BREAKPOINTS_NAMES = Object.freeze(Object.keys(BREAKPOINTS));
|
|
9
10
|
|
|
@@ -14,7 +15,7 @@ function isBreakpointKey(key) {
|
|
|
14
15
|
|
|
15
16
|
function generateInMediaItem([name, value], index, list) {
|
|
16
17
|
if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
|
|
17
|
-
let result = `width <= ${value}px`;
|
|
18
|
+
let result = value === Infinity ? 'width' : `width <= ${value}px`;
|
|
18
19
|
|
|
19
20
|
if (index > 0) {
|
|
20
21
|
result = `${list[index - 1][1]}px < ${result}`;
|
|
@@ -30,13 +31,13 @@ function generateMoreMediaItem([name, value]) {
|
|
|
30
31
|
return [name, `(width > ${value}px)`];
|
|
31
32
|
}
|
|
32
33
|
|
|
33
|
-
const BREAKPOINTS_MORE_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateMoreMediaItem)); // --- Generate media queries for width < min ---
|
|
34
|
+
const BREAKPOINTS_MORE_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).filter(([, value]) => value !== Infinity).map(generateMoreMediaItem)); // --- Generate media queries for width < min ---
|
|
34
35
|
|
|
35
36
|
function generateLessMediaItem([name], index, list) {
|
|
36
37
|
if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
|
|
37
38
|
if (index === 0) return null;
|
|
38
39
|
const value = list[index - 1][1];
|
|
39
|
-
return [name, `(width
|
|
40
|
+
return [name, `(width <= ${value}px)`];
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
const BREAKPOINTS_LESS_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateLessMediaItem).filter(Boolean)); // ===== BACKWARD COMPATIBILITY =====
|
|
@@ -47,12 +48,12 @@ function generateMaxMediaItem([name, value]) {
|
|
|
47
48
|
return [name, `(max-width: ${value}px)`];
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
const BREAKPOINTS_MAX_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateMaxMediaItem)); // --- Generate media queries for (max-width: max) ---
|
|
51
|
+
const BREAKPOINTS_MAX_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).filter(([, value]) => value !== Infinity).map(generateMaxMediaItem)); // --- Generate media queries for (max-width: max) ---
|
|
51
52
|
|
|
52
53
|
function generateMinMediaItem([name, value]) {
|
|
53
54
|
if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
|
|
54
55
|
return [name, `(min-width: ${value + 1}px)`];
|
|
55
56
|
}
|
|
56
57
|
|
|
57
|
-
const BREAKPOINTS_MIN_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateMinMediaItem));
|
|
58
|
+
const BREAKPOINTS_MIN_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).filter(([, value]) => value !== Infinity).map(generateMinMediaItem));
|
|
58
59
|
export { BREAKPOINTS, BREAKPOINTS_IN_MEDIA, BREAKPOINTS_LESS_MEDIA, BREAKPOINTS_MAX_MEDIA, BREAKPOINTS_MIN_MEDIA, BREAKPOINTS_MORE_MEDIA, BREAKPOINTS_NAMES };
|
|
@@ -13,12 +13,14 @@
|
|
|
13
13
|
@custom-media --ktl-ts-in (640px < width <= 808px);
|
|
14
14
|
@custom-media --ktl-tl-in (808px < width <= 1000px);
|
|
15
15
|
@custom-media --ktl-ds-in (1000px < width <= 1190px);
|
|
16
|
+
@custom-media --ktl-dl-in (1190px < width);
|
|
16
17
|
@custom-media --ktl-ms-more (width > 472px);
|
|
17
18
|
@custom-media --ktl-ml-more (width > 640px);
|
|
18
19
|
@custom-media --ktl-ts-more (width > 808px);
|
|
19
20
|
@custom-media --ktl-tl-more (width > 1000px);
|
|
20
21
|
@custom-media --ktl-ds-more (width > 1190px);
|
|
21
|
-
@custom-media --ktl-ml-less (width
|
|
22
|
-
@custom-media --ktl-ts-less (width
|
|
23
|
-
@custom-media --ktl-tl-less (width
|
|
24
|
-
@custom-media --ktl-ds-less (width
|
|
22
|
+
@custom-media --ktl-ml-less (width <= 472px);
|
|
23
|
+
@custom-media --ktl-ts-less (width <= 640px);
|
|
24
|
+
@custom-media --ktl-tl-less (width <= 808px);
|
|
25
|
+
@custom-media --ktl-ds-less (width <= 1000px);
|
|
26
|
+
@custom-media --ktl-dl-less (width <= 1190px);
|
package/package.json
CHANGED