starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-08-04 19:45:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactored Admonition styles

Browse Source
This commit is contained in:
squidfunk
2017-08-26 18:31:24 +07:00
committed by Martin Donath
parent 4768d78530
commit 35dbc1c0bb
8 changed files with 80 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,86 +24,90 @@
// Rules
// ----------------------------------------------------------------------------
// Admonition extension
.admonition {
position: relative;
margin: 1.5625em 0;
padding: 0.8rem 1.2rem;
border-left: 3.2rem solid transparentize($clr-blue-a200, 0.6);
border-radius: 0.2rem;
background-color: transparentize($clr-blue-a200, 0.85);
font-size: ms(-1);
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Icon
&::before {
@extend %md-icon;
// Admonition extension
.admonition {
@include z-depth(2);
position: absolute;
left: -2.6rem;
color: $md-color-white;
font-size: 2rem;
content: "edit";
vertical-align: -0.25em;
}
position: relative;
margin: 1.5625em 0;
padding: 0.8rem 1.2rem;
border-left: 0.4rem solid $clr-blue-a200;
border-radius: 0.2rem;
font-size: ms(-1);
// Remove spacing on first element
:first-child {
margin-top: 0;
}
// Remove spacing on first element
:first-child {
margin-top: 0;
}
// Remove spacing on last element
:last-child {
margin-bottom: 0;
}
// Remove spacing on last element
:last-child {
margin-bottom: 0;
}
// Build representational classes
@each $names, $appearance in (
summary tldr: $clr-light-blue-a400 "subject",
tip hint important : $clr-teal-a700 "whatshot",
success check done: $clr-green-a400 "done",
warning caution attention: $clr-orange-a400 "warning",
failure fail missing: $clr-red-a200 "clear",
danger error: $clr-red-a400 "flash_on",
bug: $clr-pink-a400 "bug_report",
quote cite: $clr-grey "format_quote"
) {
$tint: nth($appearance, 1);
$icon: nth($appearance, 2);
// Define base class
&%#{nth($names, 1)},
&.#{nth($names, 1)} {
border-color: transparentize($tint, 0.6);
background-color: transparentize($tint, 0.85);
// Title
.admonition-title {
margin: -0.8rem -1.2rem -0.4rem;
padding: 0.8rem 1.2rem;
border-bottom: 0.1rem solid transparentize($clr-blue-a200, 0.9);
background-color: transparentize($clr-blue-a200, 0.9);
font-weight: 700;
// Icon
&::before {
content: $icon;
@extend %md-icon;
margin-right: 0.8rem;
color: $clr-blue-a200;
font-size: 2rem;
content: "edit";
vertical-align: -0.25em;
}
}
// Define synonyms for base class
@if length($names) > 1 {
@for $n from 2 through length($names) {
&.#{nth($names, $n)} {
@extend .admonition%#{nth($names, 1)};
// Build representational classes
@each $names, $appearance in (
summary tldr: $clr-light-blue-a400 "subject",
tip hint important : $clr-teal-a700 "whatshot",
success check done: $clr-green-a700 "done",
warning caution attention: $clr-orange-a400 "warning",
failure fail missing: $clr-red-a200 "clear",
danger error: $clr-red-a400 "flash_on",
bug: $clr-pink-a400 "bug_report",
quote cite: $clr-grey "format_quote"
) {
$tint: nth($appearance, 1);
$icon: nth($appearance, 2);
// Define base class
&%#{nth($names, 1)},
&.#{nth($names, 1)} {
border-left: 0.4rem solid $tint;
// Title
.admonition-title {
border-bottom: 0.1rem solid transparentize($tint, 0.9);
background-color: transparentize($tint, 0.9);
// Icon
&::before {
color: $tint;
content: $icon;
}
}
}
// Define synonyms for base class
@if length($names) > 1 {
@for $n from 2 through length($names) {
&.#{nth($names, $n)} {
@extend .admonition%#{nth($names, 1)};
}
}
}
}
}
}
// Title
.admonition-title {
font-weight: 700;
// Remove bottom spacing for title
html & {
margin-bottom: 0;
}
// Remove top spacing for first element following title
html & + * {
margin-top: 0;
}
}