1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-28 09:20:52 +01:00

Fixed details layout in Safari

This commit is contained in:
squidfunk 2020-03-17 16:43:24 +01:00
parent 6892fdebd9
commit 0982cbe2e1
5 changed files with 49 additions and 14 deletions

View File

@ -214,7 +214,6 @@ kbd {
position: relative;
margin: 1em 0;
line-height: 1.4;
-webkit-overflow-scrolling: touch;
// Actual container with code, overflowing
> code {
@ -225,6 +224,7 @@ kbd {
word-break: normal;
box-shadow: none;
box-decoration-break: slice;
-webkit-overflow-scrolling: touch;
// Override native scrollbar styles
&::-webkit-scrollbar {

View File

@ -31,7 +31,7 @@
.headerlink {
display: inline-block;
margin-left: px2rem(10px);
// Hack: If we don't set visibility hidden, the text content of the node
// Hack: if we don't set visibility hidden, the text content of the node
// will include the headerlink character, which is why Google indexes them.
visibility: hidden;
opacity: 0;

View File

@ -26,7 +26,7 @@
// Icon definitions
:root {
--md-details-icon: url("{{ chevron-down }}");
--md-details-icon: url("{{ chevron-right }}");
}
// ----------------------------------------------------------------------------
@ -43,24 +43,21 @@
// Rotate title icon
&[open] > summary::after {
transform: rotateZ(0deg);
transform: rotate(90deg);
}
// Remove bottom spacing
&:not([open]) {
padding-bottom: 0;
}
// Ensure clickable area, even if no title is set
summary {
min-height: px2rem(20px);
}
}
// Title
summary {
@extend .admonition-title;
box-sizing: border-box;
min-height: px2rem(20px);
outline: none;
cursor: pointer;
@ -69,14 +66,14 @@
display: none;
}
// Icon
// Details marker
&::after {
flex-shrink: 0;
width: px2rem(20px);
height: px2rem(20px);
margin-left: auto;
background-image: var(--md-details-icon);
transform: rotateZ(-90deg);
transform: rotate(0deg);
transition: transform 250ms;
content: "";
@ -84,7 +81,45 @@
[dir="rtl"] & {
margin-right: auto;
margin-left: initial;
transform: rotateZ(90deg);
transform: rotate(180deg);
}
}
// Hack: absolute positioning for summary elements in Safari 9+ because,
// of course, they cannot be flex containers: https://bit.ly/2IW5g4O
_:default:not(:root:root), & { // stylelint-disable-line
position: relative;
padding: px2rem(8px) px2rem(40px);
// Icon and details marker
&::before,
&::after {
position: absolute;
flex-shrink: initial;
margin: initial;
}
// Icon
&::before {
margin-left: px2rem(-28px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(-28px);
margin-left: initial;
}
}
// Details marker
&::after {
top: px2rem(8px);
right: px2rem(12px);
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(12px);
}
}
}
}

View File

@ -169,7 +169,7 @@ hr {
// Skip link
.md-skip {
position: fixed;
// Hack: If we don't set the negative z-index, the skip link will induce the
// Hack: if we don't set the negative z-index, the skip link will induce the
// creation of new layers when code blocks are near the header on scrolling
z-index: -1;
margin: px2rem(10px);

View File

@ -518,7 +518,7 @@
// Rotate icon for expanded lists
.md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link & {
transform: rotateZ(90deg);
transform: rotate(90deg);
}
}
}