mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-12 01:50:52 +01:00
Fixed details layout in Safari
This commit is contained in:
parent
6892fdebd9
commit
0982cbe2e1
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user