89 lines
2.4 KiB
Stylus
89 lines
2.4 KiB
Stylus
|
// showing default values
|
||
|
|
$accentColor = #0984e3
|
||
|
|
$textColor = #2c3e50
|
||
|
|
$borderColor = #eaecef
|
||
|
|
$codeBgColor = #282c34
|
||
|
|
|
||
|
|
$admonition
|
||
|
|
box-shadow 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)
|
||
|
|
position relative
|
||
|
|
margin 1.5625em 0
|
||
|
|
padding 0 1.2rem
|
||
|
|
border-left .4rem solid #448aff
|
||
|
|
border-radius .2rem
|
||
|
|
overflow auto
|
||
|
|
|
||
|
|
html .admonition>:last-child
|
||
|
|
margin-bottom 1.2rem
|
||
|
|
|
||
|
|
.admonition .admonition
|
||
|
|
margin 1em 0
|
||
|
|
|
||
|
|
.admonition p
|
||
|
|
margin-top: 0.5em
|
||
|
|
|
||
|
|
$admonition-icon
|
||
|
|
position absolute
|
||
|
|
left 1.2rem
|
||
|
|
font-family: "Material Icons"
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
font-size: 24px
|
||
|
|
display: inline-block;
|
||
|
|
line-height: 1;
|
||
|
|
text-transform: none;
|
||
|
|
letter-spacing: normal;
|
||
|
|
word-wrap: normal;
|
||
|
|
white-space: nowrap;
|
||
|
|
direction: ltr;
|
||
|
|
|
||
|
|
/* Support for all WebKit browsers. */
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
/* Support for Safari and Chrome. */
|
||
|
|
text-rendering: optimizeLegibility;
|
||
|
|
|
||
|
|
/* Support for Firefox. */
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
|
||
|
|
/* Support for IE. */
|
||
|
|
font-feature-settings: 'liga';
|
||
|
|
|
||
|
|
$admonition-title
|
||
|
|
margin 0 -1.2rem
|
||
|
|
padding .8rem 1.2rem .8rem 4rem
|
||
|
|
border-bottom .1rem solid rgba(68,138,255,.1)
|
||
|
|
background-color rgba(68,138,255,.1)
|
||
|
|
font-weight 700
|
||
|
|
|
||
|
|
.admonition>.admonition-title:last-child
|
||
|
|
margin-bottom 0
|
||
|
|
|
||
|
|
admonition_types = {
|
||
|
|
note: {color: #0288D1, icon: "edit_sharp"},
|
||
|
|
abstract: {color: #c5d845, icon: "speaker_notes_filled"},
|
||
|
|
info: {color: #19d8f5, icon: "info"}
|
||
|
|
tip: {color: #00bfa5, icon: "code"},
|
||
|
|
success: {color: #00c853, icon: "check_circle_outline"},
|
||
|
|
question: {color: #64dd17, icon: "help"},
|
||
|
|
warning: {color: #ff9100, icon: "warning"},
|
||
|
|
failure: {color: #ff5252, icon: "close"},
|
||
|
|
danger: {color: #c2185b, icon: "flash_on"},
|
||
|
|
bug: {color: #e040fb, icon: "bug_report"},
|
||
|
|
example: {color: #651fff, icon: "format_list_numbered_rtl"},
|
||
|
|
quote: {color: #9e9e9e, icon: "format_quote"}
|
||
|
|
}
|
||
|
|
|
||
|
|
for name, val in admonition_types
|
||
|
|
.admonition.{name}
|
||
|
|
@extend $admonition
|
||
|
|
border-left-color: val[color]
|
||
|
|
|
||
|
|
.admonition.{name}>.admonition-title
|
||
|
|
@extend $admonition-title
|
||
|
|
border-bottom-color: .1rem solid rgba(val[color], 0.2)
|
||
|
|
background-color: rgba(val[color], 0.2)
|
||
|
|
|
||
|
|
.admonition.{name}>.admonition-title:before
|
||
|
|
@extend $admonition-icon
|
||
|
|
color: val[color]
|
||
|
|
content: val[icon]
|