Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-12 10:00:52 +01:00
Code Issues Releases Wiki Activity

Refactored Admonitions with flex layout

Browse Source
This commit is contained in:
squidfunk 2020-03-16 11:42:41 +01:00
parent f3cca38f64
commit 6bf47b537f
2 changed files with 63 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/assets/stylesheets/extensions/_admonition.scss
View File

@ -21,7 +21,7 @@
////
// ----------------------------------------------------------------------------
// Rules
// Rules: layout
// ----------------------------------------------------------------------------
// Icon definitions
@ -82,81 +82,35 @@
.md-typeset__table {
padding: 0 px2rem(12px);
}
// Build representational classes
@each $names, $tint in (
abstract summary tldr: $clr-light-blue-a400,
info todo: $clr-cyan-a700,
tip hint important: $clr-teal-a700,
success check done: $clr-green-a700,
question help faq: $clr-light-green-a700,
warning caution attention: $clr-orange-a400,
failure fail missing: $clr-red-a200,
danger error: $clr-red-a400,
bug: $clr-pink-a400,
example: $clr-deep-purple-a400,
quote cite: $clr-grey
) {
$type: #{nth($names, 1)};
// Define base class
&.#{$type} {
border-left-color: $tint;
// Title
> :first-child {
background-color: transparentize($tint, 0.9);
// Icon
&::before {
background-color: $tint;
mask-image: var(--md-admonition-icon--#{$type});
}
}
}
// Define synonyms for base class
@if length($names) > 1 {
@for $n from 2 through length($names) {
&.#{nth($names, $n)} {
@extend .#{nth($names, 1)};
}
}
}
}
}
// Admonition title
.admonition-title {
display: flex;
margin: 0 px2rem(-12px);
padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
padding: px2rem(8px) px2rem(12px);
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
&:last-child {
html &:last-child {
margin-bottom: 0;
}
// Icon
&::before {
position: absolute;
flex-shrink: 0;
width: px2rem(20px);
height: px2rem(20px);
margin-left: px2rem(-28px);
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: px2rem(-28px);
margin-left: initial;
margin-right: initial;
margin-left: px2rem(8px);
}
}
@ -171,3 +125,48 @@
}
}
}
// ----------------------------------------------------------------------------
// Rules: different flavours
// ----------------------------------------------------------------------------
@each $names, $tint in (
abstract summary tldr: $clr-light-blue-a400,
info todo: $clr-cyan-a700,
tip hint important: $clr-teal-a700,
success check done: $clr-green-a700,
question help faq: $clr-light-green-a700,
warning caution attention: $clr-orange-a400,
failure fail missing: $clr-red-a200,
danger error: $clr-red-a400,
bug: $clr-pink-a400,
example: $clr-deep-purple-a400,
quote cite: $clr-grey
) {
$type: #{nth($names, 1)};
// Define base class
.md-typeset .admonition.#{$type} {
border-left-color: $tint;
}
// Define base class
.md-typeset .#{$type} > .admonition-title {
background-color: transparentize($tint, 0.9);
// Icon
&::before {
background-color: $tint;
mask-image: var(--md-admonition-icon--#{$type});
}
}
// Define synonyms for base class
@if length($names) > 1 {
@for $n from 2 through length($names) {
.#{nth($names, $n)} {
@extend .#{nth($names, 1)};
}
}
}
}

31
src/assets/stylesheets/extensions/pymdown/_details.scss
View File

@ -43,28 +43,17 @@
// Rotate title icon
&[open] > summary::after {
transform: rotate(180deg);
transform: rotate(0deg);
}
// Remove bottom spacing
&:not([open]) {
padding-bottom: 0;
// Remove bottom border if block is closed
> summary {
border-bottom: none;
}
}
// Increase spacing to the right - scoped here for higher specificity
// Ensure clickable area, even if no title is set
summary {
position: relative;
padding-right: px2rem(40px);
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-left: px2rem(40px);
}
min-height: px2rem(20px);
}
}
@ -73,7 +62,6 @@
@extend .admonition-title;
// Hack: set to block, so Firefox doesn't render marker
display: block;
outline: none;
cursor: pointer;
@ -84,18 +72,19 @@
// Icon
&::after {
position: absolute;
right: px2rem(12px);
flex-shrink: 0;
width: px2rem(20px);
height: px2rem(20px);
background-color: var(--md-default-fg-color--lighter);
mask-image: var(--md-details-icon);
margin-left: auto;
background-image: var(--md-details-icon);
transform: rotate(-90deg);
transition: transform 250ms;
content: "";
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(12px);
margin-right: auto;
margin-left: initial;
}
}
}