15
15
--desktop-sidebar-width : 200px ;
16
16
--src-sidebar-width : 300px ;
17
17
--desktop-sidebar-z-index : 100 ;
18
+ --sidebar-elems-left-padding : 24px ;
18
19
}
19
20
20
21
/* See FiraSans-LICENSE.txt for the Fira Sans license. */
@@ -559,8 +560,11 @@ ul.block, .block li {
559
560
.sidebar > h2 a {
560
561
display : block;
561
562
padding : 0.25rem ; /* 4px */
562
- margin-left : -0.25rem ;
563
563
margin-right : 0.25rem ;
564
+ /* extend click target to far edge of screen (mile wide bar) */
565
+ border-left : solid var (--sidebar-elems-left-padding ) transparent;
566
+ margin-left : calc (-0.25rem - var (--sidebar-elems-left-padding ));
567
+ background-clip : padding-box;
564
568
}
565
569
566
570
.sidebar h2 {
@@ -578,7 +582,7 @@ ul.block, .block li {
578
582
.sidebar-elems ,
579
583
.sidebar > .version ,
580
584
.sidebar > h2 {
581
- padding-left : 24 px ;
585
+ padding-left : var ( --sidebar-elems-left-padding ) ;
582
586
}
583
587
584
588
.sidebar a {
@@ -632,13 +636,17 @@ ul.block, .block li {
632
636
.sidebar-crate .logo-container {
633
637
/* The logo is expected to have 8px "slop" along its edges, so we can optically
634
638
center it. */
635
- margin : 0 -16px 0 -16px ;
639
+ margin : 0 calc (-16px - var (--sidebar-elems-left-padding ));
640
+ padding : 0 var (--sidebar-elems-left-padding );
636
641
text-align : center;
637
642
}
638
643
639
644
.sidebar-crate h2 a {
640
645
display : block;
641
- margin : 0 calc (-24px + 0.25rem ) 0 -0.2rem ;
646
+ /* extend click target to far edge of screen (mile wide bar) */
647
+ border-left : solid var (--sidebar-elems-left-padding ) transparent;
648
+ background-clip : padding-box;
649
+ margin : 0 calc (-24px + 0.25rem ) 0 calc (-0.2rem - var (--sidebar-elems-left-padding ));
642
650
/* Align the sidebar crate link with the search bar, which have different
643
651
font sizes.
644
652
0 commit comments