From e809b60fd3a53aab3ccba3e026805a835953373f Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Mon, 26 Apr 2021 15:59:17 -0700 Subject: [PATCH 1/3] Fix positioning for detail toggles on mobile. The rule that was supposed to put these in the right place on mobile had an extra class (item-list) in its selector, but that class isn't actually part of the DOM for everything we care about. After removing that extra class, I found the rule wasn't firing. That's because @media doesn't increase specificity (https://css-tricks.com/how-much-specificity-do-rules-have-like-keyframes-and-media/), and the rule was being overridden by the later rule with the exact same selector. I moved all the details-related rules above the @media queries because in general I think we expect rules inside @media to override others. However, I didn't move the rules that I haven't touched, since I don't know all the places to check that they are working as expected. --- src/librustdoc/html/static/rustdoc.css | 110 ++++++++++++------------- 1 file changed, 55 insertions(+), 55 deletions(-) diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index a024fa49b0e8b..cc0f969d7de0f 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -1355,6 +1355,60 @@ h4 > .notable-traits { border-top: 1px solid; } +/* The hideme class is used on summary tags that contain a span with + placeholder text shown only when the toggle is closed. For instance, + "Expand description" or "Show methods". */ +details.rustdoc-toggle > summary.hideme { + cursor: pointer; +} + +details.rustdoc-toggle > summary::-webkit-details-marker { + display: none; +} + +details.rustdoc-toggle > summary.hideme > span { + margin-left: 9px; +} + +details.rustdoc-toggle > summary::before { + content: "[+]"; + font-weight: 300; + font-size: 0.8em; + letter-spacing: 1px; + cursor: pointer; +} + +details.rustdoc-toggle > summary.hideme::before { + position: relative; +} + +details.rustdoc-toggle > summary:not(.hideme)::before { + position: absolute; + left: -23px; +} + +/* When a "hideme" summary is open and the "Expand description" or "Show + methods" text is hidden, we want the [-] toggle that remains to not + affect the layout of the items to its right. To do that, we use + absolute positioning. Note that we also set position: relative + on the parent
to make this work properly. */ +details.rustdoc-toggle[open] > summary.hideme { + position: absolute; +} + +details.rustdoc-toggle[open] { + position: relative; +} + +details.rustdoc-toggle[open] > summary.hideme > span { + display: none; +} + +details.rustdoc-toggle[open] > summary::before { + content: "[−]"; + display: inline; +} + /* Media Queries */ @media (min-width: 701px) { @@ -1573,7 +1627,7 @@ h4 > .notable-traits { left: -10px; } - .item-list > details.rustdoc-toggle > summary:not(.hideme)::before { + details.rustdoc-toggle > summary:not(.hideme)::before { left: -10px; } @@ -1770,57 +1824,3 @@ div.name.expand::before { left: -15px; top: 2px; } - -/* The hideme class is used on summary tags that contain a span with - placeholder text shown only when the toggle is closed. For instance, - "Expand description" or "Show methods". */ -details.rustdoc-toggle > summary.hideme { - cursor: pointer; -} - -details.rustdoc-toggle > summary::-webkit-details-marker { - display: none; -} - -details.rustdoc-toggle > summary.hideme > span { - margin-left: 9px; -} - -details.rustdoc-toggle > summary::before { - content: "[+]"; - font-weight: 300; - font-size: 0.8em; - letter-spacing: 1px; - cursor: pointer; -} - -details.rustdoc-toggle > summary.hideme::before { - position: relative; -} - -details.rustdoc-toggle > summary:not(.hideme)::before { - position: absolute; - left: -23px; -} - -/* When a "hideme" summary is open and the "Expand description" or "Show - methods" text is hidden, we want the [-] toggle that remains to not - affect the layout of the items to its right. To do that, we use - absolute positioning. Note that we also set position: relative - on the parent
to make this work properly. */ -details.rustdoc-toggle[open] > summary.hideme { - position: absolute; -} - -details.rustdoc-toggle[open] { - position: relative; -} - -details.rustdoc-toggle[open] > summary.hideme > span { - display: none; -} - -details.rustdoc-toggle[open] > summary::before { - content: "[−]"; - display: inline; -} From 84beadc3f1790b35f00bc0515d4c6dfe324b680f Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Tue, 27 Apr 2021 13:37:38 -0700 Subject: [PATCH 2/3] Replace .hideme class with .hide-me. --- src/librustdoc/html/render/print_item.rs | 2 +- src/librustdoc/html/static/rustdoc.css | 18 +++++++++--------- src/librustdoc/html/static/themes/ayu.css | 2 +- src/librustdoc/html/static/themes/dark.css | 2 +- src/librustdoc/html/static/themes/light.css | 2 +- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/librustdoc/html/render/print_item.rs b/src/librustdoc/html/render/print_item.rs index f1d79ab097b9f..c03617a14b911 100644 --- a/src/librustdoc/html/render/print_item.rs +++ b/src/librustdoc/html/render/print_item.rs @@ -140,7 +140,7 @@ fn toggle_open(w: &mut Buffer, text: &str) { write!( w, "
\ - \ + \ Show {}\ ", text diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index cc0f969d7de0f..65594d177969b 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -1355,10 +1355,10 @@ h4 > .notable-traits { border-top: 1px solid; } -/* The hideme class is used on summary tags that contain a span with +/* The hide-me class is used on summary tags that contain a span with placeholder text shown only when the toggle is closed. For instance, "Expand description" or "Show methods". */ -details.rustdoc-toggle > summary.hideme { +details.rustdoc-toggle > summary.hide-me { cursor: pointer; } @@ -1366,7 +1366,7 @@ details.rustdoc-toggle > summary::-webkit-details-marker { display: none; } -details.rustdoc-toggle > summary.hideme > span { +details.rustdoc-toggle > summary.hide-me > span { margin-left: 9px; } @@ -1378,21 +1378,21 @@ details.rustdoc-toggle > summary::before { cursor: pointer; } -details.rustdoc-toggle > summary.hideme::before { +details.rustdoc-toggle > summary.hide-me::before { position: relative; } -details.rustdoc-toggle > summary:not(.hideme)::before { +details.rustdoc-toggle > summary:not(.hide-me)::before { position: absolute; left: -23px; } -/* When a "hideme" summary is open and the "Expand description" or "Show +/* When a "hide-me" summary is open and the "Expand description" or "Show methods" text is hidden, we want the [-] toggle that remains to not affect the layout of the items to its right. To do that, we use absolute positioning. Note that we also set position: relative on the parent
to make this work properly. */ -details.rustdoc-toggle[open] > summary.hideme { +details.rustdoc-toggle[open] > summary.hide-me { position: absolute; } @@ -1400,7 +1400,7 @@ details.rustdoc-toggle[open] { position: relative; } -details.rustdoc-toggle[open] > summary.hideme > span { +details.rustdoc-toggle[open] > summary.hide-me > span { display: none; } @@ -1627,7 +1627,7 @@ details.rustdoc-toggle[open] > summary::before { left: -10px; } - details.rustdoc-toggle > summary:not(.hideme)::before { + details.rustdoc-toggle > summary:not(.hide-me)::before { left: -10px; } diff --git a/src/librustdoc/html/static/themes/ayu.css b/src/librustdoc/html/static/themes/ayu.css index 72396ec6b76bd..850771bf088b8 100644 --- a/src/librustdoc/html/static/themes/ayu.css +++ b/src/librustdoc/html/static/themes/ayu.css @@ -225,7 +225,7 @@ a { } .collapse-toggle, -details.rustdoc-toggle > summary.hideme > span, +details.rustdoc-toggle > summary.hide-me > span, details.rustdoc-toggle > summary::before { color: #999; } diff --git a/src/librustdoc/html/static/themes/dark.css b/src/librustdoc/html/static/themes/dark.css index b2003b5274120..0540680c07fcc 100644 --- a/src/librustdoc/html/static/themes/dark.css +++ b/src/librustdoc/html/static/themes/dark.css @@ -187,7 +187,7 @@ a.test-arrow { } .collapse-toggle, -details.rustdoc-toggle > summary.hideme > span, +details.rustdoc-toggle > summary.hide-me > span, details.rustdoc-toggle > summary::before { color: #999; } diff --git a/src/librustdoc/html/static/themes/light.css b/src/librustdoc/html/static/themes/light.css index 04187773b64db..d79bfb1451e60 100644 --- a/src/librustdoc/html/static/themes/light.css +++ b/src/librustdoc/html/static/themes/light.css @@ -185,7 +185,7 @@ a.test-arrow { } .collapse-toggle, -details.rustdoc-toggle > summary.hideme > span, +details.rustdoc-toggle > summary.hide-me > span, details.rustdoc-toggle > summary::before { color: #999; } From f7498b92494ed18e474da29765c762089f70be08 Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Tue, 27 Apr 2021 13:54:35 -0700 Subject: [PATCH 3/3] Add Firefox style for hiding details marker. --- src/librustdoc/html/static/rustdoc.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 65594d177969b..9d1b34e076ed3 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -1362,6 +1362,10 @@ details.rustdoc-toggle > summary.hide-me { cursor: pointer; } +details.rustdoc-toggle > summary::marker { + display: none; +} + details.rustdoc-toggle > summary::-webkit-details-marker { display: none; }