@jetbrains/kotlin-web-site-ui 4.3.0-next-layout → 4.3.0-next-layout.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 (6) hide show
  1. package/out/components/breakpoints/constants.js +6 -5
  2. package/out/components/breakpoints/hooks.js +32 -0
  3. package/out/components/breakpoints/index.js +1 -0
  4. package/out/components/breakpoints/medias.pcss +14 -0
  5. package/out/components/layout/index.css +6 -6
  6. package/package.json +4 -1
package/out/components/breakpoints/constants.js CHANGED
@@ -1,4 +1,4 @@
1
- const BREAKPOINTS = Object.freeze({
1
+ const POINTS = {
2
2
  MS: 376,
3
3
  MM: 472,
4
4
  TS: 616,
@@ -6,14 +6,15 @@ const BREAKPOINTS = Object.freeze({
6
6
  TL: 1000,
7
7
  DS: 1190,
8
8
  DM: 1144
9
- });
10
- const BREAKPOINTS_KEYS = Object.keys(BREAKPOINTS);
9
+ };
10
+ const BREAKPOINTS = Object.freeze(POINTS);
11
+ const BREAKPOINTS_KEYS = Object.keys(POINTS);
11
12
  const BREAKPOINTS_MAX_MEDIA = Object.freeze(BREAKPOINTS_KEYS.reduce(function (result, name) {
12
- result[name] = `screen and (max-width: ${BREAKPOINTS[name]}px)`;
13
+ result[name] = `(max-width: ${BREAKPOINTS[name]}px)`;
13
14
  return result;
14
15
  }, {}));
15
16
  const BREAKPOINTS_MIN_MEDIA = Object.freeze(BREAKPOINTS_KEYS.reduce(function (result, name) {
16
- result[name] = `screen and (min-width: ${BREAKPOINTS[name] + 1}px)`;
17
+ result[name] = `(min-width: ${BREAKPOINTS[name] + 1}px)`;
17
18
  return result;
18
19
  }, {}));
19
20
  export { BREAKPOINTS, BREAKPOINTS_KEYS, BREAKPOINTS_MAX_MEDIA, BREAKPOINTS_MIN_MEDIA };
package/out/components/breakpoints/hooks.js ADDED
@@ -0,0 +1,32 @@
1
+ import { useMedia } from 'the-platform/useMedia';
2
+ import { BREAKPOINTS_MAX_MEDIA } from './constants.js';
3
+
4
+ function useMS() {
5
+ return useMedia(BREAKPOINTS_MAX_MEDIA.MS, false);
6
+ }
7
+
8
+ function useMM() {
9
+ return useMedia(BREAKPOINTS_MAX_MEDIA.MM, false);
10
+ }
11
+
12
+ function useTS() {
13
+ return useMedia(BREAKPOINTS_MAX_MEDIA.TS, false);
14
+ }
15
+
16
+ function useTM() {
17
+ return useMedia(BREAKPOINTS_MAX_MEDIA.TM, false);
18
+ }
19
+
20
+ function useTL() {
21
+ return useMedia(BREAKPOINTS_MAX_MEDIA.TL, false);
22
+ }
23
+
24
+ function useDM() {
25
+ return useMedia(BREAKPOINTS_MAX_MEDIA.DM, false);
26
+ }
27
+
28
+ function useDS() {
29
+ return useMedia(BREAKPOINTS_MAX_MEDIA.DS, false);
30
+ }
31
+
32
+ export { useDM, useDS, useMM, useMS, useTL, useTM, useTS };
package/out/components/breakpoints/index.js CHANGED
@@ -1 +1,2 @@
1
1
  export { BREAKPOINTS, BREAKPOINTS_KEYS, BREAKPOINTS_MAX_MEDIA, BREAKPOINTS_MIN_MEDIA } from './constants.js';
2
+ export { useDM, useDS, useMM, useMS, useTL, useTM, useTS } from './hooks.js';
package/out/components/breakpoints/medias.pcss ADDED
@@ -0,0 +1,14 @@
1
+ @custom-media --ktl-ms-min (min-width: 377px);
2
+ @custom-media --ktl-mm-min (min-width: 473px);
3
+ @custom-media --ktl-ts-min (min-width: 617px);
4
+ @custom-media --ktl-tm-min (min-width: 809px);
5
+ @custom-media --ktl-tl-min (min-width: 1001px);
6
+ @custom-media --ktl-ds-min (min-width: 1191px);
7
+ @custom-media --ktl-dm-min (min-width: 1145px);
8
+ @custom-media --ktl-ms (max-width: 376px);
9
+ @custom-media --ktl-mm (max-width: 472px);
10
+ @custom-media --ktl-ts (max-width: 616px);
11
+ @custom-media --ktl-tm (max-width: 808px);
12
+ @custom-media --ktl-tl (max-width: 1000px);
13
+ @custom-media --ktl-ds (max-width: 1190px);
14
+ @custom-media --ktl-dm (max-width: 1144px);
package/out/components/layout/index.css CHANGED
@@ -3,32 +3,32 @@
3
3
  --ktl-layout-width: 1144px;
4
4
  }
5
5
 
6
- @media screen and (max-width: 1190px) {:root {
6
+ @media (max-width: 1190px) {:root {
7
7
  --ktl-layout-width: 952px
8
8
  }
9
9
  }
10
10
 
11
- @media screen and (max-width: 1000px) {:root {
11
+ @media (max-width: 1000px) {:root {
12
12
  --ktl-layout-width: 760px
13
13
  }
14
14
  }
15
15
 
16
- @media screen and (max-width: 808px) {:root {
16
+ @media (max-width: 808px) {:root {
17
17
  --ktl-layout-width: 568px
18
18
  }
19
19
  }
20
20
 
21
- @media screen and (max-width: 616px) {:root {
21
+ @media (max-width: 616px) {:root {
22
22
  --ktl-layout-width: 424px
23
23
  }
24
24
  }
25
25
 
26
- @media screen and (max-width: 472px) {:root {
26
+ @media (max-width: 472px) {:root {
27
27
  --ktl-layout-width: 328px
28
28
  }
29
29
  }
30
30
 
31
- @media screen and (max-width: 376px) {:root {
31
+ @media (max-width: 376px) {:root {
32
32
  --ktl-layout-width: 272px
33
33
  }
34
34
  }
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.3.0-next-layout",
4
+ "version": "4.3.0-next-layout.3",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
7
7
  "files": [
@@ -128,5 +128,8 @@
128
128
  "webpack": "^5.30.0",
129
129
  "webpack-cli": "^4.6.0",
130
130
  "whatwg-fetch": "^3.6.2"
131
+ },
132
+ "dependencies": {
133
+ "the-platform": "^0.10.1"
131
134
  }
132
135
  }