//// /// Copyright (c) 2016-2019 Martin Donath /// /// Permission is hereby granted, free of charge, to any person obtaining a /// copy of this software and associated documentation files (the "Software"), /// to deal in the Software without restriction, including without limitation /// the rights to use, copy, modify, merge, publish, distribute, sublicense, /// and/or sell copies of the Software, and to permit persons to whom the /// Software is furnished to do so, subject to the following conditions: /// /// The above copyright notice and this permission notice shall be included in /// all copies or substantial portions of the Software. /// /// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR /// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, /// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL /// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER /// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING /// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER /// DEALINGS //// // ---------------------------------------------------------------------------- // Rules // ---------------------------------------------------------------------------- // Scoped in typesetted content to match specificity of regular content .md-typeset { // Admonition extension .admonition { @include z-depth(2); margin: 1.5625em 0; padding: 0 px2rem(12px); border-left: px2rem(4px) solid $clr-blue-a200; border-radius: px2rem(2px); font-size: ms(-1); overflow: auto; // Adjust for RTL languages [dir="rtl"] & { border-right: px2rem(4px) solid $clr-blue-a200; border-left: none; } // Adjust spacing on last element html & > :last-child { margin-bottom: px2rem(12px); } // Adjust margin for nested admonition blocks .admonition { margin: 1em 0; } // Title > .admonition-title { margin: 0 px2rem(-12px); padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px); border-bottom: px2rem(1px) solid transparentize($clr-blue-a200, 0.9); background-color: transparentize($clr-blue-a200, 0.9); font-weight: 700; // Adjust for RTL languages [dir="rtl"] & { padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px); } // Reset spacing, if title is the only element &:last-child { margin-bottom: 0; } // Icon &::before { @extend %md-icon; position: absolute; margin-left: px2rem(-28px); color: $clr-blue-a200; font-size: px2rem(20px); content: "\E3C9"; // edit // Adjust for RTL languages [dir="rtl"] & { margin-right: px2rem(-28px); margin-left: initial; } } } // Build representational classes @each $names, $appearance in ( abstract summary tldr: $clr-light-blue-a400 "\E8D2", // subject info todo: $clr-cyan-a700 "\E88E", // info tip hint important : $clr-teal-a700 "\E80E", // whatshot success check done: $clr-green-a700 "\E876", // done question help faq: $clr-light-green-a700 "\E887", // help warning caution attention: $clr-orange-a400 "\E002", // warning failure fail missing: $clr-red-a200 "\E14C", // clear danger error: $clr-red-a400 "\E3E7", // flash_on bug: $clr-pink-a400 "\E868", // bug_report example: $clr-deep-purple-a400 "\E242", // format_list_numbered quote cite: $clr-grey "\E244" // format_quote ) { $tint: nth($appearance, 1); $icon: nth($appearance, 2); // Define base class &%#{nth($names, 1)}, &.#{nth($names, 1)} { border-left-color: $tint; // Adjust for RTL languages [dir="rtl"] & { border-right-color: $tint; } // Title > .admonition-title { border-bottom-color: 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)}; } } } } } }