@brillout/docpress 0.8.7 → 0.8.8-commit-4e4a6e4

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 (4) hide show
  1. package/dist/navigation/Navigation.js +4 -9
  2. package/navigation/Navigation.css +8 -15
  3. package/navigation/Navigation.tsx +4 -9
  4. package/package.json +1 -1
package/dist/navigation/Navigation.js CHANGED
@@ -31,25 +31,22 @@ function NavigationContent(props) {
31
31
  assert(!props.showOnlyRelevant);
32
32
  var navItemsColumnLayout = groupByColumnLayout(navItemsWithComputed);
33
33
  var paddingBottom_1 = 40;
34
- var categoryBorderParentPosition_1 = 'relative';
35
34
  navContent = (React.createElement(React.Fragment, null, navItemsColumnLayout.map(function (_a, i) {
36
35
  var navItemsColumnEntries = _a.navItemsColumnEntries, isFullWidth = _a.isFullWidth;
37
36
  return (React.createElement("div", { key: i, style: {
38
37
  display: 'flex',
39
38
  justifyContent: 'center',
40
39
  } },
41
- React.createElement("div", { className: "column-layout-".concat(i), style: {
40
+ React.createElement("div", { className: "column-layout-".concat(i) + (!isFullWidth ? '' : ' nav-category'), style: {
42
41
  flexGrow: 1,
43
42
  columnGap: 20,
44
43
  paddingBottom: isFullWidth ? paddingBottom_1 : undefined,
45
- position: categoryBorderParentPosition_1,
46
44
  } },
47
45
  React.createElement(CategoryBorder, { navItemLevel1: !isFullWidth ? undefined : navItemsColumnEntries[0], paddingBottom: paddingBottom_1 }),
48
- navItemsColumnEntries.map(function (navItemColumnEntry, j) { return (React.createElement("div", { key: j, className: "column-layout-entry", style: {
46
+ navItemsColumnEntries.map(function (navItemColumnEntry, j) { return (React.createElement("div", { key: j, className: 'column-layout-entry' + (isFullWidth ? '' : ' nav-category'), style: {
49
47
  breakInside: 'avoid',
50
48
  paddingBottom: !isFullWidth ? paddingBottom_1 : undefined,
51
49
  width: '100%',
52
- position: categoryBorderParentPosition_1,
53
50
  } },
54
51
  React.createElement(CategoryBorder, { navItemLevel1: isFullWidth ? undefined : navItemColumnEntry, paddingBottom: paddingBottom_1 }),
55
52
  React.createElement(NavItemComponent, { navItem: navItemColumnEntry }),
@@ -60,10 +57,9 @@ function NavigationContent(props) {
60
57
  }
61
58
  function CategoryBorder(_a) {
62
59
  var navItemLevel1 = _a.navItemLevel1, paddingBottom = _a.paddingBottom;
63
- return !navItemLevel1 ? null : (React.createElement("div", { className: 'category-border' + ((navItemLevel1.isRelevant && ' is-relevant') || ''), style: {
64
- width: 6,
60
+ return !navItemLevel1 ? null : (React.createElement("div", { className: "category-border", style: {
65
61
  background: navItemLevel1.color,
66
- height: "calc(100% - ".concat(paddingBottom, "px - 19px)"),
62
+ height: "calc(100% - ".concat(paddingBottom, "px - 13px)"),
67
63
  } }));
68
64
  }
69
65
  function NavItemComponent(_a) {
@@ -95,7 +91,6 @@ function NavItemComponent(_a) {
95
91
  navItem.url && navItem.isActive && ' is-active',
96
92
  navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
97
93
  navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
98
- navItem.isRelevant && 'is-relevant',
99
94
  ]
100
95
  .filter(Boolean)
101
96
  .join(' '),
package/navigation/Navigation.css CHANGED
@@ -34,16 +34,8 @@
34
34
  padding-right: 4px;
35
35
  text-decoration: underline;
36
36
  text-underline-offset: .2em;
37
- text-decoration-thickness: .18em;
38
37
  text-decoration-color: var(--category-color);
39
- transition: text-decoration-color 0.5s ease-in-out;
40
- }
41
- #menu-modal .nav-item-level-1 {
42
- text-decoration-color: color-mix(in srgb, var(--category-color) 15%, transparent);
43
- }
44
- :hover > .nav-item-level-1,
45
- .nav-item-level-1.is-relevant {
46
- text-decoration-color: var(--category-color) !important;
38
+ text-decoration-thickness: .2em;
47
39
  }
48
40
  .nav-item-level-2 {
49
41
  font-size: 14.4px;
@@ -106,14 +98,15 @@
106
98
  content: "";
107
99
  }
108
100
 
101
+ .nav-category {
102
+ position: relative
103
+ }
109
104
  .category-border {
110
105
  position: absolute;
111
106
  top: 0;
112
- opacity: 0.15;
113
- transform: translate(3px, 16px);
114
- transition: opacity 0.5s ease-in-out;
107
+ transform: translate(0, 13px);
108
+ width: 3px;
115
109
  }
116
- :hover > .category-border,
117
- .category-border.is-relevant{
118
- opacity: 1;
110
+ .nav-category:hover .category-border {
111
+ width: 4px;
119
112
  }
package/navigation/Navigation.tsx CHANGED
@@ -40,7 +40,6 @@ function NavigationContent(props: {
40
40
  assert(!props.showOnlyRelevant)
41
41
  const navItemsColumnLayout = groupByColumnLayout(navItemsWithComputed)
42
42
  const paddingBottom = 40
43
- const categoryBorderParentPosition = 'relative'
44
43
  navContent = (
45
44
  <>
46
45
  {navItemsColumnLayout.map(({ navItemsColumnEntries, isFullWidth }, i) => (
@@ -52,12 +51,11 @@ function NavigationContent(props: {
52
51
  }}
53
52
  >
54
53
  <div
55
- className={`column-layout-${i}`}
54
+ className={`column-layout-${i}` + (!isFullWidth ? '' : ' nav-category')}
56
55
  style={{
57
56
  flexGrow: 1,
58
57
  columnGap: 20,
59
58
  paddingBottom: isFullWidth ? paddingBottom : undefined,
60
- position: categoryBorderParentPosition,
61
59
  }}
62
60
  >
63
61
  <CategoryBorder
@@ -67,12 +65,11 @@ function NavigationContent(props: {
67
65
  {navItemsColumnEntries.map((navItemColumnEntry, j) => (
68
66
  <div
69
67
  key={j}
70
- className="column-layout-entry"
68
+ className={'column-layout-entry' + (isFullWidth ? '' : ' nav-category')}
71
69
  style={{
72
70
  breakInside: 'avoid',
73
71
  paddingBottom: !isFullWidth ? paddingBottom : undefined,
74
72
  width: '100%',
75
- position: categoryBorderParentPosition,
76
73
  }}
77
74
  >
78
75
  <CategoryBorder
@@ -101,11 +98,10 @@ function NavigationContent(props: {
101
98
  function CategoryBorder({ navItemLevel1, paddingBottom }: { navItemLevel1?: NavItemComputed; paddingBottom: number }) {
102
99
  return !navItemLevel1 ? null : (
103
100
  <div
104
- className={'category-border' + ((navItemLevel1.isRelevant && ' is-relevant') || '')}
101
+ className="category-border"
105
102
  style={{
106
- width: 6,
107
103
  background: navItemLevel1.color!,
108
- height: `calc(100% - ${paddingBottom}px - 19px)`,
104
+ height: `calc(100% - ${paddingBottom}px - 13px)`,
109
105
  }}
110
106
  />
111
107
  )
@@ -146,7 +142,6 @@ function NavItemComponent({
146
142
  navItem.url && navItem.isActive && ' is-active',
147
143
  navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
148
144
  navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
149
- navItem.isRelevant && 'is-relevant',
150
145
  ]
151
146
  .filter(Boolean)
152
147
  .join(' '),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brillout/docpress",
3
- "version": "0.8.7",
3
+ "version": "0.8.8-commit-4e4a6e4",
4
4
  "type": "module",
5
5
  "dependencies": {
6
6
  "@brillout/picocolors": "^1.0.10",