mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-30 18:24:35 +01:00
Fixed minor z-index issues for code annotations
This commit is contained in:
parent
e44034d456
commit
1bd7f9d665
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/main.6378942d.min.css.map
Normal file
1
material/assets/stylesheets/main.6378942d.min.css.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -34,7 +34,7 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block styles %}
|
{% block styles %}
|
||||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.e03ee9c3.min.css' | url }}">
|
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.6378942d.min.css' | url }}">
|
||||||
{% if config.theme.palette %}
|
{% if config.theme.palette %}
|
||||||
{% set palette = config.theme.palette %}
|
{% set palette = config.theme.palette %}
|
||||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.9204c3b2.min.css' | url }}">
|
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.9204c3b2.min.css' | url }}">
|
||||||
|
@ -94,7 +94,6 @@
|
|||||||
|
|
||||||
// Tab label
|
// Tab label
|
||||||
> label {
|
> label {
|
||||||
z-index: 1;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: auto;
|
width: auto;
|
||||||
padding: px2em(10px, 12.8px) 1.25em px2em(8px, 12.8px);
|
padding: px2em(10px, 12.8px) 1.25em px2em(8px, 12.8px);
|
||||||
|
@ -60,6 +60,9 @@
|
|||||||
calc(var(--md-tooltip-x) - #{px2rem(16px)}),
|
calc(var(--md-tooltip-x) - #{px2rem(16px)}),
|
||||||
calc(100vw - var(--md-tooltip-width) - #{px2rem(16px)})
|
calc(100vw - var(--md-tooltip-width) - #{px2rem(16px)})
|
||||||
);
|
);
|
||||||
|
// Hack: set an explicit `z-index` so we can transition it to ensure that any
|
||||||
|
// following elements are not overlaying the tooltip during the transition.
|
||||||
|
z-index: 0;
|
||||||
width: var(--md-tooltip-width);
|
width: var(--md-tooltip-width);
|
||||||
max-width: calc(100vw - 2 * #{px2rem(16px)});
|
max-width: calc(100vw - 2 * #{px2rem(16px)});
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
@ -74,7 +77,8 @@
|
|||||||
transition:
|
transition:
|
||||||
transform 0ms 250ms,
|
transform 0ms 250ms,
|
||||||
opacity 250ms,
|
opacity 250ms,
|
||||||
max-height 0ms 250ms;
|
max-height 0ms 250ms,
|
||||||
|
z-index 250ms;
|
||||||
|
|
||||||
// [reduced-motion]: Disable animation
|
// [reduced-motion]: Disable animation
|
||||||
@media (prefers-reduced-motion) {
|
@media (prefers-reduced-motion) {
|
||||||
@ -89,7 +93,8 @@
|
|||||||
transition:
|
transition:
|
||||||
transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||||
opacity 250ms,
|
opacity 250ms,
|
||||||
max-height 250ms;
|
max-height 250ms,
|
||||||
|
z-index 0ms;
|
||||||
|
|
||||||
// [reduced-motion]: Disable animation
|
// [reduced-motion]: Disable animation
|
||||||
@media (prefers-reduced-motion) {
|
@media (prefers-reduced-motion) {
|
||||||
@ -175,6 +180,7 @@
|
|||||||
margin: 0 1ch;
|
margin: 0 1ch;
|
||||||
color: hsla(0, 0%, 100%, 1);
|
color: hsla(0, 0%, 100%, 1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: z-index 250ms;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
// Code annotation index bubble – the bubble must be positioned absolutely
|
// Code annotation index bubble – the bubble must be positioned absolutely
|
||||||
@ -230,6 +236,7 @@
|
|||||||
|
|
||||||
// Code annotation index on focus
|
// Code annotation index on focus
|
||||||
:focus-within > & {
|
:focus-within > & {
|
||||||
|
transition: none;
|
||||||
animation: none;
|
animation: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user