1
0
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:
squidfunk 2021-11-21 23:35:41 +01:00
parent e44034d456
commit 1bd7f9d665
6 changed files with 13 additions and 7 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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 }}">

View File

@ -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);

View File

@ -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;
} }
} }