enhance(sidebar,toc): improve style of current item (#11063)

* enhance(sidebar): round border of current item * enhance(toc): round border of current item * enhance(sidebar): reduce width of current item * enhance(sidebar): add padding-right * enhance(toc): reduce width of current item * fix(curriculum): reduce width of current sidebar item
mdn · Jul 9, 2024 · 2e15a84 · 2e15a84
1 parent ce52c70
commit 2e15a84
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/client/src/curriculum/index.scss b/client/src/curriculum/index.scss
@@ -98,13 +98,14 @@
 
     li > em {
       background-color: var(--background-toc-active);
+      border-bottom-right-radius: 0.25rem;
       border-left: 2px solid var(--category-color);
+      border-top-right-radius: 0.25rem;
       display: inline-block;
       font-style: normal;
       font-variation-settings: normal;
       font-weight: 600;
-      padding: 0.25rem 0.25rem 0.25rem 0.5rem;
-      width: 100%;
+      padding: 0.25rem 0.5rem;
     }
   }
 }

diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
@@ -16,15 +16,15 @@
 
   em {
     background-color: var(--background-toc-active);
+    border-bottom-right-radius: 0.25rem;
     border-left: 2px solid var(--category-color);
+    border-top-right-radius: 0.25rem;
     display: inline-block;
     font-style: normal;
     font-variation-settings: normal;
     font-weight: 600;
     hyphens: auto;
-    padding: 0.25rem;
-    padding-left: 0.5rem;
-    width: 100%;
+    padding: 0.25rem 0.5rem;
   }
 
   a {

diff --git a/client/src/document/organisms/toc/index.scss b/client/src/document/organisms/toc/index.scss
@@ -32,7 +32,7 @@
   &-link.document-toc-link:not(.button) {
     border-left: 2px solid var(--border-secondary);
     color: var(--text-secondary);
-    display: block;
+    display: inline-block;
     padding: 0.5rem 1rem;
     text-decoration: none;
 
@@ -42,7 +42,9 @@
 
     &[aria-current]:not([aria-current=""]):not([aria-current="false"]) {
       background-color: var(--background-toc-active);
+      border-bottom-right-radius: 0.25rem;
       border-left: 2px solid var(--category-color);
+      border-top-right-radius: 0.25rem;
       color: var(--text-primary);
       font-weight: 600;
     }