@jetbrains/kotlin-web-site-ui 4.1.1 → 4.1.3-alpha.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.
Files changed (28) hide show
  1. package/out/components/footer/index.css +6 -3
  2. package/out/components/footer/nav/nav-item.js +2 -2
  3. package/out/components/header/full-search/chapters/chapters.js +1 -1
  4. package/out/components/header/full-search/chapters/chapters.module.pcss.js +1 -0
  5. package/out/components/header/full-search/hit-list/hit-list.js +1 -1
  6. package/out/components/header/full-search/hit-list/hit-list.module.pcss.js +2 -1
  7. package/out/components/header/header.js +3 -2
  8. package/out/components/header/index.css +131 -71
  9. package/out/components/header/index.js +1 -1
  10. package/out/components/header/logo-small/logo-small.js +1 -1
  11. package/out/components/header/menu-popup/menu-button/menu-button.js +8 -5
  12. package/out/components/header/menu-popup/menu-list/menu-list.js +33 -0
  13. package/out/components/header/menu-popup/menu-list/menu-list.module.pcss.js +4 -0
  14. package/out/components/header/menu-popup/menu-list-item/menu-list-item.js +28 -0
  15. package/out/components/header/menu-popup/menu-list-item/menu-list-item.module.pcss.js +7 -0
  16. package/out/components/header/menu-popup/menu-popup.js +2 -42
  17. package/out/components/header/menu-popup/menu-popup.module.pcss.js +0 -4
  18. package/out/components/header/nav-scheme.js +9 -3
  19. package/out/components/header/search-button/search-button.js +13 -2
  20. package/out/components/header/search-button/search-button.module.pcss.js +2 -1
  21. package/out/components/top-menu/dropdown-menu/dropdown-menu.js +16 -5
  22. package/out/components/top-menu/dropdown-menu/dropdown-menu.module.pcss.js +3 -2
  23. package/out/components/top-menu/index.css +106 -91
  24. package/out/components/typography/index.css +2 -1
  25. package/out/components/youtube-player/index.css +2 -1
  26. package/package.json +2 -2
  27. package/out/components/header/menu-popup/menu-button/close-icon.svg.js +0 -35
  28. package/out/components/header/menu-popup/menu-button/hamburger-icon.svg.js +0 -35
@@ -29,7 +29,8 @@
29
29
  --ktl-overlay-z-index: 900;
30
30
  --ktl-top-menu-z-index: 905;
31
31
  --ktl-header-z-index: 906;
32
- --ktl-header-height-mobile: 48px;
32
+ --ktl-mobile-dropdown-list-z-index: 907;
33
+ --ktl-header-height-mobile: 52px;
33
34
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
34
35
  --rs-font-family-ui: var(--ktl-font-family-inter);
35
36
  }
@@ -85,7 +86,8 @@
85
86
  --ktl-overlay-z-index: 900;
86
87
  --ktl-top-menu-z-index: 905;
87
88
  --ktl-header-z-index: 906;
88
- --ktl-header-height-mobile: 48px;
89
+ --ktl-mobile-dropdown-list-z-index: 907;
90
+ --ktl-header-height-mobile: 52px;
89
91
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
90
92
  --rs-font-family-ui: var(--ktl-font-family-inter);
91
93
  }
@@ -141,7 +143,8 @@
141
143
  --ktl-overlay-z-index: 900;
142
144
  --ktl-top-menu-z-index: 905;
143
145
  --ktl-header-z-index: 906;
144
- --ktl-header-height-mobile: 48px;
146
+ --ktl-mobile-dropdown-list-z-index: 907;
147
+ --ktl-header-height-mobile: 52px;
145
148
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
146
149
  --rs-font-family-ui: var(--ktl-font-family-inter);
147
150
  }
@@ -10,14 +10,14 @@ const NavItem = ({
10
10
  const textCn = useTextStyles();
11
11
  const theme = useTheme();
12
12
  return React__default.createElement("li", {
13
- className: classNames(styles.navItem, {
13
+ className: classNames(styles.navItem, textCn('rs-text-2'), {
14
14
  [styles.navItemDarkTheme]: theme == 'dark'
15
15
  })
16
16
  }, React__default.createElement("a", {
17
17
  target: data.isTargetBlank ? '_blank' : undefined,
18
18
  href: data.url,
19
19
  title: data.title,
20
- className: classNames(textCn('rs-text-2'), textCn('rs-link', {
20
+ className: classNames(textCn('rs-link', {
21
21
  hardness: 'average',
22
22
  mode: 'clear'
23
23
  }))
@@ -42,7 +42,7 @@ const Chapters = ({
42
42
  __html: title
43
43
  }
44
44
  })), React__default.createElement("div", {
45
- className: classNames(textCn('rs-text-2'), styles.snippet),
45
+ className: classNames(textCn('rs-text-2'), styles.chapterSnippet),
46
46
  dangerouslySetInnerHTML: {
47
47
  __html: snippet
48
48
  }
@@ -4,6 +4,7 @@ var styles = {
4
4
  "singleChapter": "ktl-chapters-module_singleChapter_zSmx2",
5
5
  "headliner": "ktl-chapters-module_headliner_ZBuf9",
6
6
  "snippet": "ktl-chapters-module_snippet_yROJo",
7
+ "chapterSnippet": "ktl-chapters-module_chapterSnippet_8Pwb2",
7
8
  "extraSection": "ktl-chapters-module_extraSection_lsZfw",
8
9
  "visibleSection": "ktl-chapters-module_visibleSection_wQyvM",
9
10
  "moreButton": "ktl-chapters-module_moreButton_98oqy"
@@ -38,7 +38,7 @@ const HitList = ({
38
38
  chapters: chapters,
39
39
  hitIndex: pageIndex
40
40
  }) : React__default.createElement("div", {
41
- className: classNames(textCn('rs-text-2')),
41
+ className: classNames(textCn('rs-text-2'), styles.snippet),
42
42
  dangerouslySetInnerHTML: {
43
43
  __html: snippet
44
44
  }
@@ -1,5 +1,6 @@
1
1
  var styles = {
2
2
  "hitList": "ktl-hit-list-module_hitList_1MP6m",
3
- "titleLink": "ktl-hit-list-module_titleLink_rdJ6u"
3
+ "titleLink": "ktl-hit-list-module_titleLink_rdJ6u",
4
+ "snippet": "ktl-hit-list-module_snippet_WmrYL"
4
5
  };
5
6
  export { styles as default };
@@ -35,6 +35,7 @@ const Header = forwardRef(({
35
35
  const [isSearchBoxVisible, setSearchBoxVisible] = useState(false);
36
36
  const [fullSearchActive, setFullSearchActive] = useState(false);
37
37
  const items = useMemo(() => getNavScheme(isUrlActive, currentUrl, isPlayground), [isUrlActive, currentUrl, isPlayground]);
38
+ const itemsWithoutHomeSection = useMemo(() => items.slice(1), [items]);
38
39
  const headerRef = useRef(null);
39
40
  useImperativeHandle(forwardedRef, () => headerRef.current);
40
41
  useLayoutEffect(() => {
@@ -102,10 +103,10 @@ const Header = forwardRef(({
102
103
  fullSearchActive: fullSearchActive,
103
104
  setFullSearchActive: setFullSearchActive
104
105
  })) : React__default.createElement(React__default.Fragment, null, !isMenuPopupVisible && React__default.createElement(HorizontalMenu, {
105
- items: items,
106
+ items: itemsWithoutHomeSection,
106
107
  theme: dropdownTheme,
107
108
  linkHandler: linkHandler
108
- }), React__default.createElement(SearchButton, {
109
+ }), !menuPopupExpanded && React__default.createElement(SearchButton, {
109
110
  onClick: handleSearchButtonClick,
110
111
  isActive: hasSearch
111
112
  }), isMenuPopupVisible && React__default.createElement(MenuPopup, {
@@ -38,7 +38,8 @@
38
38
  --ktl-overlay-z-index: 900;
39
39
  --ktl-top-menu-z-index: 905;
40
40
  --ktl-header-z-index: 906;
41
- --ktl-header-height-mobile: 48px;
41
+ --ktl-mobile-dropdown-list-z-index: 907;
42
+ --ktl-header-height-mobile: 52px;
42
43
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
43
44
  --rs-font-family-ui: var(--ktl-font-family-inter);
44
45
  }
@@ -60,7 +61,7 @@
60
61
 
61
62
  @media (max-width: 640px) {
62
63
  .ktl-header-module_header-menu_wh71L {
63
- padding: 0 16px;
64
+ padding: 0 0 0 16px;
64
65
  height: var(--ktl-header-height-mobile);
65
66
  }
66
67
 
@@ -84,7 +85,8 @@
84
85
  --ktl-overlay-z-index: 900;
85
86
  --ktl-top-menu-z-index: 905;
86
87
  --ktl-header-z-index: 906;
87
- --ktl-header-height-mobile: 48px;
88
+ --ktl-mobile-dropdown-list-z-index: 907;
89
+ --ktl-header-height-mobile: 52px;
88
90
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
89
91
  --rs-font-family-ui: var(--ktl-font-family-inter);
90
92
  }
@@ -226,7 +228,8 @@
226
228
  --ktl-overlay-z-index: 900;
227
229
  --ktl-top-menu-z-index: 905;
228
230
  --ktl-header-z-index: 906;
229
- --ktl-header-height-mobile: 48px;
231
+ --ktl-mobile-dropdown-list-z-index: 907;
232
+ --ktl-header-height-mobile: 52px;
230
233
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
231
234
  --rs-font-family-ui: var(--ktl-font-family-inter);
232
235
  }
@@ -264,12 +267,13 @@
264
267
  @media (max-width: 640px) {
265
268
  .ktl-search-button-module_button_YHJPv {
266
269
  display: none;
267
- margin: 0 16px 0 0;
268
270
  }
271
+ }
269
272
 
270
- .ktl-search-button-module_button_YHJPv.ktl-search-button-module_active_lUmdh {
271
- display: flex;
272
- }
273
+ @media (min-width: 641px) {
274
+ .ktl-search-button-module_mobileButton_KT2YP {
275
+ display: none;
276
+ }
273
277
  }
274
278
 
275
279
  .ktl-result-module_result_EKhUw {
@@ -445,14 +449,6 @@
445
449
  margin-top: 24px;
446
450
  }
447
451
 
448
- .ktl-chapters-module_chapterTitle_b6Rdz {
449
- //border-bottom-color: transparent;
450
- }
451
-
452
- .ktl-chapters-module_chapterTitle_b6Rdz:hover {
453
- //border-bottom-color: #19191C;
454
- }
455
-
456
452
  .ktl-chapters-module_chapterTitle_b6Rdz em {
457
453
  background: rgba(127, 82, 255, 0.2);
458
454
  font-style: normal;
@@ -476,6 +472,11 @@
476
472
  font-style: normal;
477
473
  }
478
474
 
475
+ .ktl-chapters-module_chapterSnippet_8Pwb2 em {
476
+ background: rgba(127, 82, 255, 0.2);
477
+ font-style: normal;
478
+ }
479
+
479
480
  .ktl-chapters-module_extraSection_lsZfw {
480
481
  display: none;
481
482
  }
@@ -487,6 +488,7 @@
487
488
  .ktl-chapters-module_moreButton_98oqy {
488
489
  margin-top: 12px;
489
490
  }
491
+
490
492
  .ktl-hit-list-module_hitList_1MP6m {
491
493
  margin: 40px 0 50px 0;
492
494
  }
@@ -496,6 +498,11 @@
496
498
  font-style: normal;
497
499
  }
498
500
 
501
+ .ktl-hit-list-module_snippet_WmrYL em {
502
+ background: rgba(127, 82, 255, 0.2);
503
+ font-style: normal;
504
+ }
505
+
499
506
  .ktl-full-search-module_fullSearch_MTU8t {
500
507
  display: none;
501
508
  box-sizing: border-box;
@@ -668,64 +675,27 @@
668
675
  --ktl-overlay-z-index: 900;
669
676
  --ktl-top-menu-z-index: 905;
670
677
  --ktl-header-z-index: 906;
671
- --ktl-header-height-mobile: 48px;
678
+ --ktl-mobile-dropdown-list-z-index: 907;
679
+ --ktl-header-height-mobile: 52px;
672
680
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
673
681
  --rs-font-family-ui: var(--ktl-font-family-inter);
674
682
  }
675
683
 
676
684
  .ktl-menu-popup-module_menu-popup_Q68IE {
677
- display: none;
678
- padding: 8px 0;
679
- background: var(--ktl-dark-100);
680
- position: fixed;
681
- top: var(--ktl-header-height-mobile);
682
- bottom: 0;
683
- left: 0;
684
- right: 0;
685
- overflow: auto;
686
- z-index: var(--ktl-top-menu-z-index);
687
- }
688
-
689
- .ktl-menu-popup-module_menu-item_fPvF- {
690
- --level: 0;
691
- display: flex;
692
- align-items: center;
693
- font-size: 16px;
694
- line-height: 24px;
695
- font-weight: 400;
696
- color: rgba(255, 255, 255, 0.75);
697
- text-decoration: none;
698
- padding: 8px 16px 8px calc(16px + (var(--level) * 24px));
699
- transition: color var(--ktl-transition-xfast),
700
- background-color var(--ktl-transition-xfast);
701
- }
702
-
703
- .ktl-menu-popup-module_menu-item_fPvF-:hover {
704
- color: rgba(255, 255, 255, 1);
705
- background: rgba(255, 255, 255, 0.1);
706
- text-decoration: none;
707
- }
708
-
709
- .ktl-menu-popup-module_menu-item_fPvF-.ktl-menu-popup-module_active_iqTAj {
710
- color: var(--ktl-light-text-hard);
711
- background: rgba(255, 255, 255, 1);
712
- cursor: default;
713
- text-decoration: none;
714
- }
715
-
716
- .ktl-menu-popup-module_menu-item_fPvF-.ktl-menu-popup-module_active-with-child_tAzCG {
717
- background: none;
718
- color: rgba(255, 255, 255, 1);
719
- }
720
-
721
- .ktl-menu-popup-module_menu-item-root_gA9d2 {
722
- font-size: 20px;
723
- line-height: 32px;
724
- font-weight: 600;
685
+ display: none;
686
+ padding: 8px 0;
687
+ background: var(--ktl-dark-100);
688
+ position: fixed;
689
+ top: var(--ktl-header-height-mobile);
690
+ bottom: 0;
691
+ left: 0;
692
+ right: 0;
693
+ overflow: auto;
694
+ z-index: var(--ktl-top-menu-z-index);
725
695
  }
726
696
 
727
697
  .ktl-menu-popup-module_menu-popup-expanded_ggrp9 {
728
- display: block;
698
+ display: block;
729
699
  }
730
700
 
731
701
  .ktl-menu-button-module_button_wB9Mx {
@@ -739,8 +709,8 @@
739
709
  background: none;
740
710
  padding: 0;
741
711
  margin: 0;
742
- width: 24px;
743
- height: 24px;
712
+ width: var(--ktl-header-height-mobile);
713
+ height: var(--ktl-header-height-mobile);
744
714
  align-items: center;
745
715
  justify-content: center;
746
716
  transition: color var(--ktl-transition-xfast),
@@ -753,6 +723,97 @@
753
723
  color: #ffffff;
754
724
  }
755
725
 
726
+ :root {
727
+ --ktl-light-grey: #f4f4f4;
728
+ --ktl-dark-100: rgba(39, 40, 44, 1);
729
+ --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
730
+ --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
731
+ --ktl-color-white-light: rgba(255, 255, 255, 0.75);
732
+ --ktl-transition-xfast: 100ms;
733
+ --ktl-transition-fast: 300ms;
734
+ --ktl-color-primary-light-theme: #7f52ff;
735
+ --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
736
+ --ktl-light-text-hard: rgba(39, 40, 44, 1);
737
+ --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
738
+ --ktl-overlay-z-index: 900;
739
+ --ktl-top-menu-z-index: 905;
740
+ --ktl-header-z-index: 906;
741
+ --ktl-mobile-dropdown-list-z-index: 907;
742
+ --ktl-header-height-mobile: 52px;
743
+ --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
744
+ --rs-font-family-ui: var(--ktl-font-family-inter);
745
+ }
746
+
747
+ .ktl-menu-list-item-module_menu-item_Aruue {
748
+ --level: 0;
749
+ display: flex;
750
+ align-items: center;
751
+ font-size: 19px;
752
+ line-height: 28px;
753
+ font-weight: 400;
754
+ color: rgba(255, 255, 255, 0.75);
755
+ text-decoration: none;
756
+ padding: 12px 16px 12px 16px;
757
+ transition: color var(--ktl-transition-xfast),
758
+ background-color var(--ktl-transition-xfast);
759
+ }
760
+
761
+ .ktl-menu-list-item-module_menu-item_Aruue:hover {
762
+ color: rgba(255, 255, 255, 1);
763
+ background: rgba(255, 255, 255, 0.1);
764
+ text-decoration: none;
765
+ }
766
+
767
+ .ktl-menu-list-item-module_menu-item_Aruue.ktl-menu-list-item-module_active_jHfJR {
768
+ color: var(--ktl-light-text-hard);
769
+ background: rgba(255, 255, 255, 1);
770
+ cursor: default;
771
+ text-decoration: none;
772
+ }
773
+
774
+ .ktl-menu-list-item-module_menu-item_Aruue.ktl-menu-list-item-module_active-with-child_ier2a {
775
+ background: none;
776
+ color: rgba(255, 255, 255, 0.7);
777
+ }
778
+
779
+ .ktl-menu-list-item-module_menu-item-root_Rzcqb:not(a) {
780
+ font-size: 13px;
781
+ text-transform: uppercase;
782
+ line-height: 20px;
783
+ color: rgba(255, 255, 255, 0.7);
784
+ }
785
+
786
+ :root {
787
+ --ktl-light-grey: #f4f4f4;
788
+ --ktl-dark-100: rgba(39, 40, 44, 1);
789
+ --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
790
+ --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
791
+ --ktl-color-white-light: rgba(255, 255, 255, 0.75);
792
+ --ktl-transition-xfast: 100ms;
793
+ --ktl-transition-fast: 300ms;
794
+ --ktl-color-primary-light-theme: #7f52ff;
795
+ --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
796
+ --ktl-light-text-hard: rgba(39, 40, 44, 1);
797
+ --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
798
+ --ktl-overlay-z-index: 900;
799
+ --ktl-top-menu-z-index: 905;
800
+ --ktl-header-z-index: 906;
801
+ --ktl-mobile-dropdown-list-z-index: 907;
802
+ --ktl-header-height-mobile: 52px;
803
+ --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
804
+ --rs-font-family-ui: var(--ktl-font-family-inter);
805
+ }
806
+
807
+ .ktl-menu-list-module_menu-item-group_mFvUE {
808
+ margin: 8px 0;
809
+ padding: 8px 0;
810
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
811
+ }
812
+
813
+ .ktl-menu-list-module_menu-item-group_mFvUE:not(:last-child) {
814
+ border-bottom: 1px solid rgba(255, 255, 255, 0.3);
815
+ }
816
+
756
817
  .ktl-logo-small-module_logo-small_iGY12 {
757
818
  flex-grow: 1;
758
819
  display: flex;
@@ -763,6 +824,7 @@
763
824
  .ktl-logo-small-module_link_SKXAa {
764
825
  color: rgba(255, 255, 255, 1);
765
826
  text-decoration: none;
827
+ font-size: 16px;
766
828
  }
767
829
 
768
830
  .ktl-logo-small-module_icon-wrap_6hRnO {
@@ -771,9 +833,7 @@
771
833
  align-items: center;
772
834
  justify-items: center;
773
835
  height: 100%;
774
- margin-right: 16px;
775
- padding-right: 16px;
776
- border-right: 1px solid rgba(255, 255, 255, 0.2);
836
+ margin-right: 12px;
777
837
  }
778
838
 
779
839
  .ktl-logo-small-module_icon_NyEog {
@@ -1,4 +1,4 @@
1
1
  import './index.css';
2
2
  import { Header } from './header.js';
3
3
  export { Header as default } from './header.js';
4
- export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme } from './nav-scheme.js';
4
+ export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme } from './nav-scheme.js';
@@ -20,7 +20,7 @@ const LogoSmall = ({
20
20
  className: styles.icon
21
21
  })), React__default.createElement("a", {
22
22
  href: homeUrl,
23
- className: classNames(styles.link, textCn('rs-h3'))
23
+ className: classNames(styles.link, textCn('rs-h4'))
24
24
  }, homeTitle));
25
25
  };
26
26
 
@@ -1,20 +1,23 @@
1
1
  import React__default from 'react';
2
2
  import styles from './menu-button.module.pcss.js';
3
3
  import classNames from 'classnames';
4
- import SvgHamburgerIcon from './hamburger-icon.svg.js';
5
- import SvgCloseIcon from './close-icon.svg.js';
4
+ import Button from '@rescui/button';
5
+ import { CloseIcon, HamburgerIcon } from '@rescui/icons';
6
6
 
7
7
  const MenuButton = ({
8
8
  onClick,
9
9
  isExpanded
10
10
  }) => {
11
- return React__default.createElement("button", {
11
+ return React__default.createElement(Button, {
12
12
  type: "button",
13
13
  className: classNames(styles.button),
14
14
  "aria-haspopup": "true",
15
15
  "aria-label": "Open the navigation",
16
- onClick: onClick
17
- }, isExpanded ? React__default.createElement(SvgCloseIcon, null) : React__default.createElement(SvgHamburgerIcon, null));
16
+ onClick: onClick,
17
+ size: 'l',
18
+ mode: 'clear',
19
+ icon: isExpanded ? React__default.createElement(CloseIcon, null) : React__default.createElement(HamburgerIcon, null)
20
+ });
18
21
  };
19
22
 
20
23
  export { MenuButton };
@@ -0,0 +1,33 @@
1
+ import React__default, { Fragment } from 'react';
2
+ import { MenuListItem } from '../menu-list-item/menu-list-item.js';
3
+ import styles from './menu-list.module.pcss.js';
4
+
5
+ const MenuList = ({
6
+ items,
7
+ level,
8
+ linkHandler
9
+ }) => {
10
+ return React__default.createElement(React__default.Fragment, null, items.map((item, i) => React__default.createElement(Fragment, {
11
+ key: i
12
+ }, item.items && item.items.length > 0 ? React__default.createElement("div", {
13
+ className: styles.menuItemGroup
14
+ }, React__default.createElement(MenuListItem, {
15
+ item: item,
16
+ level: level,
17
+ linkHandler: linkHandler
18
+ }), item.items && item.items.length > 0 && React__default.createElement(MenuList, {
19
+ items: item.items,
20
+ level: level + 1,
21
+ linkHandler: linkHandler
22
+ })) : React__default.createElement(React__default.Fragment, null, React__default.createElement(MenuListItem, {
23
+ item: item,
24
+ level: level,
25
+ linkHandler: linkHandler
26
+ }), item.items && React__default.createElement(MenuList, {
27
+ items: item.items,
28
+ level: level + 1,
29
+ linkHandler: linkHandler
30
+ })))));
31
+ };
32
+
33
+ export { MenuList };
@@ -0,0 +1,4 @@
1
+ var styles = {
2
+ "menuItemGroup": "ktl-menu-list-module_menu-item-group_mFvUE"
3
+ };
4
+ export { styles as default };
@@ -0,0 +1,28 @@
1
+ import React__default, { useCallback } from 'react';
2
+ import classNames from 'classnames';
3
+ import styles from './menu-list-item.module.pcss.js';
4
+
5
+ const MenuListItem = ({
6
+ item,
7
+ level,
8
+ linkHandler
9
+ }) => {
10
+ const Tag = item.url ? 'a' : 'span';
11
+ const style = {
12
+ '--level': level
13
+ };
14
+ const handleClick = useCallback(event => linkHandler && item.url && linkHandler(event, item.url), []);
15
+ return React__default.createElement(Tag, Object.assign({}, item.url ? {
16
+ href: item.url,
17
+ onClick: handleClick
18
+ } : {}, {
19
+ className: classNames(styles.menuItem, {
20
+ [styles.menuItemRoot]: level === 0,
21
+ [styles.active]: item.isActive,
22
+ [styles.activeWithChild]: item.items && item.items.length
23
+ }),
24
+ style: style
25
+ }), item.title);
26
+ };
27
+
28
+ export { MenuListItem };
@@ -0,0 +1,7 @@
1
+ var styles = {
2
+ "menuItem": "ktl-menu-list-item-module_menu-item_Aruue",
3
+ "active": "ktl-menu-list-item-module_active_jHfJR",
4
+ "activeWithChild": "ktl-menu-list-item-module_active-with-child_ier2a",
5
+ "menuItemRoot": "ktl-menu-list-item-module_menu-item-root_Rzcqb"
6
+ };
7
+ export { styles as default };
@@ -1,51 +1,11 @@
1
- import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback, Fragment } from 'react';
1
+ import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
2
2
  import styles from './menu-popup.module.pcss.js';
3
3
  import classNames from 'classnames';
4
4
  import { MenuButton } from './menu-button/menu-button.js';
5
+ import { MenuList } from './menu-list/menu-list.js';
5
6
  import { useTextStyles } from '@rescui/typography';
6
7
  import { clearAllBodyScrollLocks, enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
7
8
 
8
- const MenuListItem = ({
9
- item,
10
- level,
11
- linkHandler
12
- }) => {
13
- const Tag = item.url ? 'a' : 'span';
14
- const style = {
15
- '--level': level
16
- };
17
- const handleClick = useCallback(event => linkHandler && item.url && linkHandler(event, item.url), []);
18
- return React__default.createElement(Tag, Object.assign({}, item.url ? {
19
- href: item.url,
20
- onClick: handleClick
21
- } : {}, {
22
- className: classNames(styles.menuItem, {
23
- [styles.menuItemRoot]: level === 0,
24
- [styles.active]: item.isActive,
25
- [styles.activeWithChild]: item.items && item.items.length
26
- }),
27
- style: style
28
- }), item.title);
29
- };
30
-
31
- const MenuList = ({
32
- items,
33
- level,
34
- linkHandler
35
- }) => {
36
- return React__default.createElement(React__default.Fragment, null, items.map((item, i) => React__default.createElement(Fragment, {
37
- key: i
38
- }, React__default.createElement(MenuListItem, {
39
- item: item,
40
- level: level,
41
- linkHandler: linkHandler
42
- }), item.items && item.items.length > 0 && React__default.createElement(MenuList, {
43
- items: item.items,
44
- level: level + 1,
45
- linkHandler: linkHandler
46
- }))));
47
- };
48
-
49
9
  const MenuPopup = ({
50
10
  items,
51
11
  isExpanded,
@@ -1,9 +1,5 @@
1
1
  var styles = {
2
2
  "menuPopup": "ktl-menu-popup-module_menu-popup_Q68IE",
3
- "menuItem": "ktl-menu-popup-module_menu-item_fPvF-",
4
- "active": "ktl-menu-popup-module_active_iqTAj",
5
- "activeWithChild": "ktl-menu-popup-module_active-with-child_tAzCG",
6
- "menuItemRoot": "ktl-menu-popup-module_menu-item-root_gA9d2",
7
3
  "menuPopupExpanded": "ktl-menu-popup-module_menu-popup-expanded_ggrp9"
8
4
  };
9
5
  export { styles as default };
@@ -1,4 +1,6 @@
1
1
  import { PLAYGROUND_URL, KOTLINLANG_URL } from './consts.js';
2
+ const HOME_TITLE = 'Home';
3
+ const HOME_URL = '/';
2
4
  const SOLUTIONS_TITLE = 'Solutions';
3
5
  const MULTIPLATFORM_MOBILE_TITLE = 'Multiplatform Mobile';
4
6
  const MULTIPLATFORM_MOBILE_URL = `/lp/mobile/`;
@@ -32,6 +34,9 @@ const KOTLIN_DOCS_URL = `/docs/home.html`;
32
34
  const KMM_DOCS_TITLE = 'KMM';
33
35
  const KMM_DOCS_URL = `/docs/mobile/home.html`;
34
36
  const navScheme = [{
37
+ title: HOME_TITLE,
38
+ url: HOME_URL
39
+ }, {
35
40
  title: SOLUTIONS_TITLE,
36
41
  url: null,
37
42
  items: [{
@@ -80,8 +85,9 @@ const navScheme = [{
80
85
  }]
81
86
  }];
82
87
 
83
- function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground) {
84
- return navScheme.map(({
88
+ function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground, withoutHomeSection) {
89
+ const controlledNavScheme = withoutHomeSection ? navScheme.slice(1) : navScheme;
90
+ return controlledNavScheme.map(({
85
91
  title,
86
92
  url,
87
93
  items
@@ -132,4 +138,4 @@ function makeExternalUrl(url, currentUrl, isPlayground) {
132
138
  return url;
133
139
  }
134
140
 
135
- export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme };
141
+ export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme };
@@ -2,13 +2,15 @@ import React__default from 'react';
2
2
  import styles from './search-button.module.pcss.js';
3
3
  import classNames from 'classnames';
4
4
  import SvgSearch from './search.svg.js';
5
+ import { SearchIcon } from '@rescui/icons';
6
+ import Button from '@rescui/button';
5
7
  const DATA_TEST_HEADER_SEARCH_BUTTON = 'header-search-button';
6
8
 
7
9
  const SearchButton = ({
8
10
  onClick,
9
11
  isActive
10
12
  }) => {
11
- return React__default.createElement("button", {
13
+ return React__default.createElement(React__default.Fragment, null, React__default.createElement("button", {
12
14
  type: "button",
13
15
  className: classNames(styles.button, {
14
16
  [styles.active]: isActive
@@ -16,7 +18,16 @@ const SearchButton = ({
16
18
  "data-test": DATA_TEST_HEADER_SEARCH_BUTTON,
17
19
  "aria-label": "Search",
18
20
  onClick: onClick
19
- }, React__default.createElement(SvgSearch, null));
21
+ }, React__default.createElement(SvgSearch, null)), React__default.createElement("div", {
22
+ className: styles.mobileButton
23
+ }, React__default.createElement(Button, {
24
+ "data-test": DATA_TEST_HEADER_SEARCH_BUTTON,
25
+ "aria-label": "Search",
26
+ onClick: onClick,
27
+ mode: 'clear',
28
+ size: 'l',
29
+ icon: React__default.createElement(SearchIcon, null)
30
+ })));
20
31
  };
21
32
 
22
33
  export { DATA_TEST_HEADER_SEARCH_BUTTON, SearchButton };
@@ -1,5 +1,6 @@
1
1
  var styles = {
2
2
  "button": "ktl-search-button-module_button_YHJPv",
3
- "active": "ktl-search-button-module_active_lUmdh"
3
+ "active": "ktl-search-button-module_active_lUmdh",
4
+ "mobileButton": "ktl-search-button-module_mobileButton_KT2YP"
4
5
  };
5
6
  export { styles as default };
@@ -5,6 +5,8 @@ import styles from './dropdown-menu.module.pcss.js';
5
5
  import { useTextStyles } from '@rescui/typography';
6
6
  import SvgArrowDropdownIcon from './arrow-dropdown-icon.svg.js';
7
7
  import { useTheme } from '@rescui/ui-contexts';
8
+ import Button from '@rescui/button';
9
+ import { CloseIcon } from '@rescui/icons';
8
10
 
9
11
  const DropdownMenu = ({
10
12
  homeUrl,
@@ -39,11 +41,11 @@ const DropdownMenu = ({
39
41
  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
40
42
  className: classNames(styles.dropdownMenu, {
41
43
  [styles.dropdownMenuExpanded]: isExpanded
42
- }),
43
- onClick: handleClick
44
+ })
44
45
  }, React__default.createElement("button", {
45
46
  className: classNames(styles.button, textCn('rs-text-2')),
46
- "aria-haspopup": "true"
47
+ "aria-haspopup": "true",
48
+ onClick: handleClick
47
49
  }, React__default.createElement("span", {
48
50
  className: styles.buttonText
49
51
  }, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
@@ -52,10 +54,19 @@ const DropdownMenu = ({
52
54
  className: classNames(styles.dropdownList, {
53
55
  [styles.dropdownListDarkTheme]: theme === 'dark'
54
56
  })
55
- }, _items.map((item, index) => React__default.createElement("a", {
57
+ }, React__default.createElement("div", {
58
+ className: styles.dropdownHeader
59
+ }, React__default.createElement("div", {
60
+ className: textCn('rs-text-2')
61
+ }, title), React__default.createElement(Button, {
62
+ mode: 'clear',
63
+ size: 'l',
64
+ icon: React__default.createElement(CloseIcon, null),
65
+ onClick: handleClick
66
+ })), _items.map((item, index) => React__default.createElement("a", {
56
67
  key: item.url,
57
68
  href: item.url,
58
- className: classNames(styles.dropdownItem, textCn('rs-text-2'), {
69
+ className: classNames(styles.dropdownItem, textCn('rs-text-1'), {
59
70
  [styles.dropdownItemActive]: index === _activeIndex
60
71
  }),
61
72
  onClick: event => linkHandler?.(event, item.url),
@@ -1,13 +1,14 @@
1
1
  var styles = {
2
+ "overlay": "ktl-dropdown-menu-module_overlay_segRo",
3
+ "fadein": "ktl-dropdown-menu-module_fadein_MySnq",
2
4
  "dropdownMenu": "ktl-dropdown-menu-module_dropdown-menu_tq2uU",
3
5
  "button": "ktl-dropdown-menu-module_button_OYsuv",
4
6
  "buttonText": "ktl-dropdown-menu-module_button-text_SJmh-",
5
7
  "icon": "ktl-dropdown-menu-module_icon_GGhMI",
8
+ "dropdownHeader": "ktl-dropdown-menu-module_dropdown-header_fa92T",
6
9
  "dropdownList": "ktl-dropdown-menu-module_dropdown-list_Ylkvt",
7
- "fadein": "ktl-dropdown-menu-module_fadein_MySnq",
8
10
  "dropdownItem": "ktl-dropdown-menu-module_dropdown-item_X3tZ-",
9
11
  "dropdownItemActive": "ktl-dropdown-menu-module_dropdown-item-active_99q9X",
10
- "overlay": "ktl-dropdown-menu-module_overlay_segRo",
11
12
  "overlayVisible": "ktl-dropdown-menu-module_overlay-visible_MjwEF",
12
13
  "dropdownMenuExpanded": "ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy",
13
14
  "dropdownListDarkTheme": "ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol"
@@ -13,7 +13,8 @@
13
13
  --ktl-overlay-z-index: 900;
14
14
  --ktl-top-menu-z-index: 905;
15
15
  --ktl-header-z-index: 906;
16
- --ktl-header-height-mobile: 48px;
16
+ --ktl-mobile-dropdown-list-z-index: 907;
17
+ --ktl-header-height-mobile: 52px;
17
18
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
18
19
  --rs-font-family-ui: var(--ktl-font-family-inter);
19
20
  }
@@ -29,7 +30,6 @@
29
30
  height: 64px;
30
31
  background: #ffffff;
31
32
  padding: 0 32px;
32
- z-index: var(--ktl-top-menu-z-index);
33
33
  box-shadow: inset 0 -1px 0 0 var(--ktl-light-dark-20);
34
34
  transition: color var(--ktl-transition-fast),
35
35
  background-color var(--ktl-transition-fast);
@@ -48,7 +48,7 @@
48
48
 
49
49
  @media (max-width: 640px) {
50
50
  .ktl-top-menu-module_top-menu_PRX9X {
51
- height: 48px;
51
+ height: var(--ktl-header-height-mobile);
52
52
  padding: 0 16px;
53
53
  grid-gap: 16px;
54
54
  grid-template-columns: 1fr auto;
@@ -96,140 +96,155 @@
96
96
  --ktl-overlay-z-index: 900;
97
97
  --ktl-top-menu-z-index: 905;
98
98
  --ktl-header-z-index: 906;
99
- --ktl-header-height-mobile: 48px;
99
+ --ktl-mobile-dropdown-list-z-index: 907;
100
+ --ktl-header-height-mobile: 52px;
100
101
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
101
102
  --rs-font-family-ui: var(--ktl-font-family-inter);
102
103
  }
103
104
 
105
+ .ktl-dropdown-menu-module_overlay_segRo {
106
+ display: none;
107
+ position: fixed;
108
+ top: 0;
109
+ right: 0;
110
+ bottom: 0;
111
+ left: 0;
112
+ width: 100%;
113
+ height: 100%;
114
+ opacity: 0;
115
+ background-color: var(--ktl-color-dark-40);
116
+ z-index: var(--ktl-overlay-z-index);
117
+ -webkit-animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
118
+ animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
119
+ }
120
+
104
121
  .ktl-dropdown-menu-module_dropdown-menu_tq2uU {
105
- display: none;
106
- height: 100%;
107
- justify-self: flex-start;
108
- white-space: nowrap;
109
- min-width: 0;
110
- max-width: 100%;
122
+ display: none;
123
+ height: 100%;
124
+ justify-self: flex-start;
125
+ white-space: nowrap;
126
+ width: 100%;
127
+ min-width: 0;
128
+ max-width: 100%;
111
129
  }
112
130
 
113
131
  .ktl-dropdown-menu-module_button_OYsuv {
114
- border: none;
115
- background: none;
116
- height: 100%;
117
- max-width: 100%;
118
- padding: 0;
119
- margin: 0;
120
- display: flex;
121
- align-items: center;
122
- justify-content: space-between;
123
- cursor: pointer;
132
+ border: none;
133
+ background: none;
134
+ height: 100%;
135
+ width: 100%;
136
+ max-width: 100%;
137
+ padding: 0;
138
+ margin: 0;
139
+ display: flex;
140
+ align-items: center;
141
+ cursor: pointer;
124
142
  }
125
143
 
126
144
  .ktl-dropdown-menu-module_button-text_SJmh- {
127
- overflow: hidden;
128
- text-overflow: ellipsis;
129
- flex: 0 1 auto;
145
+ overflow: hidden;
146
+ text-overflow: ellipsis;
147
+ flex: 0 1 auto;
130
148
  }
131
149
 
132
150
  .ktl-dropdown-menu-module_icon_GGhMI {
133
- width: 12px;
134
- height: 6px;
135
- margin-left: 6px;
136
- transition: transform ease-in-out var(--ktl-transition-xfast);
137
- flex: 0 0 auto;
151
+ width: 12px;
152
+ height: 6px;
153
+ margin-left: 6px;
154
+ transition: transform ease-in-out var(--ktl-transition-xfast);
155
+ flex: 0 0 auto;
156
+ }
157
+
158
+ .ktl-dropdown-menu-module_dropdown-header_fa92T {
159
+ display: flex;
160
+ color: #ffffff;
161
+ align-items: center;
162
+ height: var(--ktl-header-height-mobile);
163
+ padding: 0 0 0 16px;
164
+ border-bottom: 1px solid rgba(255, 255, 255, 0.3);
165
+ justify-content: space-between;
138
166
  }
139
167
 
140
168
  .ktl-dropdown-menu-module_dropdown-list_Ylkvt {
141
- display: none;
142
- position: absolute;
143
- left: 0;
144
- right: 0;
145
- background: #ffffff;
146
- opacity: 0;
147
- -webkit-animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
148
- animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
169
+ display: none;
170
+ position: fixed;
171
+ top: 0;
172
+ left: 0;
173
+ right: 0;
174
+ bottom: 0;
175
+ background: #ffffff;
176
+ opacity: 0;
177
+ -webkit-animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
178
+ animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
179
+ z-index: var(--ktl-mobile-dropdown-list-z-index);
149
180
  }
150
181
 
151
182
  .ktl-dropdown-menu-module_dropdown-item_X3tZ- {
152
- padding: 8px 16px;
153
- text-decoration: none;
154
- transition: color var(--ktl-transition-xfast),
183
+ padding: 12px 16px;
184
+ text-decoration: none;
185
+ transition: color var(--ktl-transition-xfast),
155
186
  background-color var(--ktl-transition-xfast);
156
187
  }
157
188
 
158
189
  .ktl-dropdown-menu-module_dropdown-item_X3tZ-:hover {
159
- background: rgba(39, 40, 44, 0.1);
160
- color: #27282c;
161
- }
190
+ background: rgba(39, 40, 44, 0.1);
191
+ color: #27282c;
192
+ }
162
193
 
163
194
  .ktl-dropdown-menu-module_dropdown-item_X3tZ-.ktl-dropdown-menu-module_dropdown-item-active_99q9X {
164
- background: var(--ktl-dark-100);
165
- color: #ffffff;
166
- }
167
-
168
- .ktl-dropdown-menu-module_overlay_segRo {
169
- display: none;
170
- position: fixed;
171
- top: 0;
172
- right: 0;
173
- bottom: 0;
174
- left: 0;
175
- width: 100%;
176
- height: 100%;
177
- opacity: 0;
178
- background-color: var(--ktl-color-dark-40);
179
- z-index: var(--ktl-overlay-z-index);
180
- -webkit-animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
181
- animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
182
- }
195
+ background: var(--ktl-dark-100);
196
+ color: #ffffff;
197
+ }
183
198
 
184
199
  .ktl-dropdown-menu-module_overlay-visible_MjwEF {
185
- display: block;
186
- opacity: 1;
200
+ display: block;
201
+ opacity: 1;
187
202
  }
188
203
 
189
204
  .ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy .ktl-dropdown-menu-module_icon_GGhMI {
190
- transform: scale(1, -1);
191
- }
205
+ transform: scale(1, -1);
206
+ }
192
207
 
193
208
  .ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy .ktl-dropdown-menu-module_dropdown-list_Ylkvt {
194
- display: flex;
195
- flex-direction: column;
196
- opacity: 1;
197
- }
209
+ display: flex;
210
+ flex-direction: column;
211
+ opacity: 1;
212
+ }
198
213
 
199
214
  .ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol {
200
- background: var(--ktl-dark-bg-hard);
215
+ background: rgba(39, 40, 44, 1);
201
216
  }
202
217
 
203
218
  .ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol .ktl-dropdown-menu-module_dropdown-item_X3tZ-:hover {
204
- background: rgba(255, 255, 255, 0.1);
205
- color: #ffffff;
206
- }
219
+ background: rgba(255, 255, 255, 0.1);
220
+ color: #ffffff;
221
+ }
207
222
 
208
223
  .ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol .ktl-dropdown-menu-module_dropdown-item_X3tZ-.ktl-dropdown-menu-module_dropdown-item-active_99q9X {
209
- color: var(--ktl-light-text-hard);
210
- background: #ffffff;
211
- }
224
+ color: var(--ktl-light-text-hard);
225
+ background: #ffffff;
226
+ }
212
227
 
213
228
  @media (max-width: 640px) {
214
- .ktl-dropdown-menu-module_dropdown-menu_tq2uU {
215
- display: block;
216
- }
229
+ .ktl-dropdown-menu-module_dropdown-menu_tq2uU {
230
+ display: block;
231
+ }
217
232
  }
218
233
 
219
234
  @-webkit-keyframes ktl-dropdown-menu-module_fadein_MySnq {
220
- 0% {
221
- opacity: 0;
222
- }
223
- 100% {
224
- opacity: 1;
225
- }
235
+ 0% {
236
+ opacity: 0;
237
+ }
238
+ 100% {
239
+ opacity: 1;
240
+ }
226
241
  }
227
242
 
228
243
  @keyframes ktl-dropdown-menu-module_fadein_MySnq {
229
- 0% {
230
- opacity: 0;
231
- }
232
- 100% {
233
- opacity: 1;
234
- }
244
+ 0% {
245
+ opacity: 0;
246
+ }
247
+ 100% {
248
+ opacity: 1;
249
+ }
235
250
  }
@@ -13,7 +13,8 @@
13
13
  --ktl-overlay-z-index: 900;
14
14
  --ktl-top-menu-z-index: 905;
15
15
  --ktl-header-z-index: 906;
16
- --ktl-header-height-mobile: 48px;
16
+ --ktl-mobile-dropdown-list-z-index: 907;
17
+ --ktl-header-height-mobile: 52px;
17
18
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
18
19
  --rs-font-family-ui: var(--ktl-font-family-inter);
19
20
  }
@@ -13,7 +13,8 @@
13
13
  --ktl-overlay-z-index: 900;
14
14
  --ktl-top-menu-z-index: 905;
15
15
  --ktl-header-z-index: 906;
16
- --ktl-header-height-mobile: 48px;
16
+ --ktl-mobile-dropdown-list-z-index: 907;
17
+ --ktl-header-height-mobile: 52px;
17
18
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
18
19
  --rs-font-family-ui: var(--ktl-font-family-inter);
19
20
  }
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.1.1",
4
+ "version": "4.1.3-alpha.1",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
7
7
  "files": [
@@ -47,7 +47,7 @@
47
47
  "@babel/preset-typescript": "^7.13.0",
48
48
  "@babel/register": "^7.11.5",
49
49
  "@react-hook/resize-observer": "^1.2.5",
50
- "@rescui/button": "^0.2.1",
50
+ "@rescui/button": "^0.6.9",
51
51
  "@rescui/checkbox": "^0.1.0",
52
52
  "@rescui/focus-manager": "^0.1.1",
53
53
  "@rescui/icons": "^0.8.2",
@@ -1,35 +0,0 @@
1
- import * as React from 'react';
2
-
3
- var _path;
4
-
5
- function _extends() {
6
- _extends = Object.assign || function (target) {
7
- for (var i = 1; i < arguments.length; i++) {
8
- var source = arguments[i];
9
-
10
- for (var key in source) {
11
- if (Object.prototype.hasOwnProperty.call(source, key)) {
12
- target[key] = source[key];
13
- }
14
- }
15
- }
16
-
17
- return target;
18
- };
19
-
20
- return _extends.apply(this, arguments);
21
- }
22
-
23
- const SvgCloseIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
24
- width: 16,
25
- height: 16,
26
- fill: "none",
27
- xmlns: "http://www.w3.org/2000/svg"
28
- }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
29
- fillRule: "evenodd",
30
- clipRule: "evenodd",
31
- d: "M15.707 1.707 14.293.293 8 6.586 1.707.293.293 1.707 6.586 8 .293 14.293l1.414 1.414L8 9.414l6.293 6.293 1.414-1.414L9.414 8l6.293-6.293Z",
32
- fill: "currentColor"
33
- })));
34
-
35
- export { SvgCloseIcon as default };
@@ -1,35 +0,0 @@
1
- import * as React from 'react';
2
-
3
- var _path;
4
-
5
- function _extends() {
6
- _extends = Object.assign || function (target) {
7
- for (var i = 1; i < arguments.length; i++) {
8
- var source = arguments[i];
9
-
10
- for (var key in source) {
11
- if (Object.prototype.hasOwnProperty.call(source, key)) {
12
- target[key] = source[key];
13
- }
14
- }
15
- }
16
-
17
- return target;
18
- };
19
-
20
- return _extends.apply(this, arguments);
21
- }
22
-
23
- const SvgHamburgerIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
24
- width: 24,
25
- height: 24,
26
- fill: "none",
27
- xmlns: "http://www.w3.org/2000/svg"
28
- }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
29
- fillRule: "evenodd",
30
- clipRule: "evenodd",
31
- d: "M4 5h16v2H4V5Zm0 6h16v2H4v-2Zm16 6H4v2h16v-2Z",
32
- fill: "currentColor"
33
- })));
34
-
35
- export { SvgHamburgerIcon as default };