li {
- --bg: var(--sk-back-1);
+ --bg: var(--sk-back-3);
--inset: calc((var(--depth) * 1.2rem) + 1.5rem);
display: flex;
position: relative;
@@ -189,19 +189,6 @@
color: var(--sk-theme-1);
}
- [aria-current='true']::after {
- content: '';
- position: absolute;
- width: 1rem;
- height: 1rem;
- top: 0.3rem;
- right: calc(-0.6rem - 2px);
- background-color: var(--sk-back-3);
- border: 1px solid var(--sk-back-4);
- transform: translate(0, 0.2rem) rotate(45deg);
- z-index: 2;
- }
-
[aria-current='true']:has(:focus-visible)::after,
:global(.mobile-filetree) [aria-current='true']::after {
display: none;
diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte
index 31c08cbc70..93ca37b817 100644
--- a/packages/site-kit/src/lib/components/Dropdown.svelte
+++ b/packages/site-kit/src/lib/components/Dropdown.svelte
@@ -27,8 +27,9 @@
opacity: 0;
pointer-events: none;
position: absolute;
- left: 0;
- top: calc(100% - 1rem);
+ left: -1rem;
+ /* this is a bit of a kludge, but it ensures a contiguous hit area (50% + 50%) while also working for tall links like `Docs` (50% + 1.5rem) */
+ top: calc(50% + min(50%, 1.5rem));
background-color: var(--sk-back-2);
z-index: 1;
box-shadow: var(--sk-shadow);
@@ -38,7 +39,7 @@
&.align-right {
left: auto;
- right: 0;
+ right: -1rem;
}
:global {
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index c31208e035..ad40421c7e 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -156,7 +156,6 @@ button {
background-color: transparent;
border: none;
color: currentColor;
- cursor: pointer;
}
button[disabled] {
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
index b8cacdbb1f..a0a925c9e4 100644
--- a/packages/site-kit/src/lib/styles/index.css
+++ b/packages/site-kit/src/lib/styles/index.css
@@ -10,4 +10,5 @@
@import './base.css';
@import './text.css';
@import './utils/buttons.css';
+@import './utils/dividers.css';
@import './utils/twoslash.css';
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 6a74b62ce2..f7573ce365 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -16,7 +16,7 @@
--sk-secondary-nav-height: 5rem;
--sk-page-padding-top: 6rem;
--sk-page-padding-bottom: 6rem;
- --sk-page-padding-side: 2.4rem;
+ --sk-page-padding-side: 1.6rem;
--sk-thick-border-width: 0.3rem;
--sk-border-radius: 0.4rem;
--sk-page-content-width: 84rem;
diff --git a/packages/site-kit/src/lib/styles/utils/dividers.css b/packages/site-kit/src/lib/styles/utils/dividers.css
new file mode 100644
index 0000000000..c43f3e1840
--- /dev/null
+++ b/packages/site-kit/src/lib/styles/utils/dividers.css
@@ -0,0 +1,6 @@
+.divider {
+ z-index: 2;
+ &::after {
+ background-color: var(--sk-back-5) !important;
+ }
+}