@brillout/docpress 0.8.7 → 0.8.8-commit-7641299

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 +12 -13
  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,12 @@
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);
38
+ text-decoration-thickness: .18em;
39
+ transition: text-decoration-thickness 0.5s ease-in-out;
43
40
  }
44
- :hover > .nav-item-level-1,
45
- .nav-item-level-1.is-relevant {
46
- text-decoration-color: var(--category-color) !important;
41
+ .nav-category:hover .nav-item-level-1 {
42
+ text-decoration-thickness: .24em;
47
43
  }
48
44
  .nav-item-level-2 {
49
45
  font-size: 14.4px;
@@ -106,14 +102,17 @@
106
102
  content: "";
107
103
  }
108
104
 
105
+ .nav-category {
106
+ position: relative
107
+ }
109
108
  .category-border {
110
109
  position: absolute;
111
110
  top: 0;
112
- opacity: 0.15;
113
- transform: translate(3px, 16px);
114
- transition: opacity 0.5s ease-in-out;
111
+ transform: translate(0, 13px);
112
+ width: 4px;
113
+ transition: width 0.5s ease-in-out;
115
114
  }
116
- :hover > .category-border,
117
- .category-border.is-relevant{
115
+ .nav-category:hover .category-border {
118
116
  opacity: 1;
117
+ width: 6px;
119
118
  }
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-7641299",
4
4
  "type": "module",
5
5
  "dependencies": {
6
6
  "@brillout/picocolors": "^1.0.10",