xaymar/com.xaymar.www
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add a hotfix for :has() selector

Browse Source 
This hotfix requires not using that selector at all, which worsens the experience in Chrome.
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2023-06-22 20:57:27 +02:00
parent ba118e206f
commit 797ece883e
2 changed files with 31 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_sass/_block-details.scss
+20 -15
View File
@@ -16,51 +16,56 @@ details.block > summary {
cursor: pointer;
}
details.block > summary:has(h1),
/* details.block > summary:has(h1),
details.block > summary:has(h2),
details.block > summary:has(h3),
details.block > summary:has(h4),
details.block > summary:has(h5),
details.block > summary:has(h6),
details.block > summary[data-heading] {
details.block > summary:has(h6), */
details.block > summary[data-has~=h1],
details.block > summary[data-has~=h2],
details.block > summary[data-has~=h3],
details.block > summary[data-has~=h4],
details.block > summary[data-has~=h5],
details.block > summary[data-has~=h6] {
font-variant: small-caps;
font-weight: bold;
line-height: 1.333em;
padding: 0.5rem 0.75rem;
}
details.block > summary:has(h1),
details.block > summary[data-heading="1"] {
/* details.block > summary:has(h1), */
details.block > summary[data-has~=h1]{
font-size: 2.0rem;
background: $theme-article-heading-h1-background;
}
details.block > summary:has(h2),
details.block > summary[data-heading="2"] {
/* details.block > summary:has(h2), */
details.block > summary[data-has~=h2] {
font-size: 1.8rem;
background: $theme-article-heading-h2-background;
}
details.block > summary:has(h3),
details.block > summary[data-heading="3"] {
/* details.block > summary:has(h3), */
details.block > summary[data-has~=h3] {
font-size: 1.6667rem;
background: $theme-article-heading-h3-background;
}
details.block > summary:has(h4),
details.block > summary[data-heading="4"] {
/* details.block > summary:has(h4), */
details.block > summary[data-has~=h4] {
font-size: 1.45rem;
background: $theme-article-heading-h4-background;
}
details.block > summary:has(h5),
details.block > summary[data-heading="5"] {
/* details.block > summary:has(h5), */
details.block > summary[data-has~=h5] {
font-size: 1.3333rem;
background: $theme-article-heading-h5-background;
}
details.block > summary:has(h6),
details.block > summary[data-heading="6"] {
/* details.block > summary:has(h6), */
details.block > summary[data-has~=h6] {
font-size: 1.2rem;
background: $theme-article-heading-h6-background;
}