Reverted Admonition flex layout

This commit is contained in:
squidfunk 2020-03-18 11:00:43 +01:00
parent 71b2f5a591
commit 37f2208ef0
11 changed files with 69 additions and 72 deletions

View File

@ -1,10 +1,10 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.906bc732.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.906bc732.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.c56f44eb.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.c56f44eb.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.0c35f0aa.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.0c35f0aa.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.2613054f.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.2613054f.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.5aea94d2.min.css",
"assets/stylesheets/main.css": "assets/stylesheets/main.b463eb70.min.css",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.31180ff2.min.css"
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -41,7 +41,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.5aea94d2.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.b463eb70.min.css' | url }}">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.31180ff2.min.css' | url }}">
{% endif %}
@ -178,7 +178,7 @@
{% endblock %}
{% block scripts %}
<script src="{{ 'assets/javascripts/vendor.0c35f0aa.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.906bc732.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.c56f44eb.min.js' | url }}"></script>
{%- set translations = {} -%}
{%- for key in [
"clipboard.copy",

10
package-lock.json generated
View File

@ -7928,6 +7928,16 @@
"integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=",
"dev": true
},
"string-replace-loader": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/string-replace-loader/-/string-replace-loader-2.2.0.tgz",
"integrity": "sha512-Ukt4ZC8+xVWdBRut3/iwnPJCNL1yV8AbVKXn8UcWdYrHgtuW4UDDAbBSi/J/CQDEWQBt824AJvPYahF23eJLRg==",
"dev": true,
"requires": {
"loader-utils": "^1.2.3",
"schema-utils": "^1.0.0"
}
},
"string-width": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",

View File

@ -69,12 +69,12 @@
"material-shadows": "^3.0.1",
"modularscale-sass": "^3.0.10",
"postcss-loader": "^3.0.0",
"postcss-replace": "^1.1.0",
"preact": "^10.3.4",
"resize-observer-polyfill": "^1.5.1",
"rimraf": "^3.0.2",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"string-replace-loader": "^2.2.0",
"stylelint": "^13.2.1",
"stylelint-config-rational-order": "^0.1.2",
"stylelint-config-standard": "^20.0.0",

View File

@ -45,7 +45,7 @@
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Admonition
// Admonition extension
.admonition {
margin: 1.5625em 0;
padding: 0 px2rem(12px);
@ -64,7 +64,7 @@
border-left: none;
}
// Omit rendering errors for print
// Hack: omit rendering errors for print
@media print {
box-shadow: none;
}
@ -92,12 +92,17 @@
// Admonition title
.admonition-title {
display: flex;
position: relative;
margin: 0 px2rem(-12px);
padding: px2rem(8px) px2rem(12px);
padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
font-weight: 700;
background-color: transparentize($clr-blue-a200, 0.9);
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
}
// Reset spacing, if title is the only element
html &:last-child {
margin-bottom: 0;
@ -105,18 +110,18 @@
// Icon
&::before {
flex-shrink: 0;
position: absolute;
left: px2rem(12px);
width: px2rem(20px);
height: px2rem(20px);
margin-right: px2rem(8px);
background-color: $clr-blue-a200;
mask-image: var(--md-admonition-icon--note);
content: "";
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: initial;
margin-left: px2rem(8px);
right: px2rem(12px);
left: initial;
}
// Hack: mask-image is not supported in PDFs

View File

@ -40,6 +40,7 @@
display: block;
padding-top: 0;
overflow: visible;
// Rotate title icon
&[open] > summary::after {
@ -50,17 +51,28 @@
&:not([open]) {
padding-bottom: 0;
}
// Hack: omit margin collapse
&::after {
display: table;
content: "";
}
}
// Title
// Details title
summary {
@extend .admonition-title;
box-sizing: border-box;
min-height: px2rem(20px);
outline: none;
padding: px2rem(8px) px2rem(36px) px2rem(8px) px2rem(40px);
cursor: pointer;
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(36px);
}
// Remove default details marker
&::-webkit-details-marker {
display: none;
@ -68,10 +80,11 @@
// Details marker
&::after {
flex-shrink: 0;
position: absolute;
top: px2rem(8px);
right: px2rem(8px);
width: px2rem(20px);
height: px2rem(20px);
margin-left: auto;
background-image: var(--md-details-icon);
transform: rotate(0deg);
transition: transform 250ms;
@ -79,48 +92,10 @@
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: auto;
margin-left: initial;
right: initial;
left: px2rem(8px);
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

@ -104,23 +104,30 @@ function config(args: Configuration): Configuration {
sourceMap: args.mode !== "production"
}
},
{
loader: "string-replace-loader",
options: {
multiple: [
{
search: "\\{{2}([^}]+)\\}{2}",
replace(_: string, name: string) {
return `data:image/svg+xml;utf8,${
icon.getSVG(path.basename(name.trim(), ".json"))
.replace(/"/g, "\\\"")
}`
},
flags: "g"
}
]
}
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: () => [
require("autoprefixer")(),
require("css-mqpacker"),
require("postcss-replace")({
data: new Proxy(data, {
get(_, name: string) {
return `data:image/svg+xml;utf8,${
icon.getSVG(path.basename(name, ".json"))
.replace(/"/g, "\\\"")
}`
}
})
})
require("css-mqpacker")
],
sourceMap: args.mode !== "production"
}