stripes for warnings

This commit is contained in:
Heydon Pickering 2017-06-20 21:01:15 +08:00
parent 69aea402d1
commit 5e201b8d71
3 changed files with 24 additions and 13 deletions

View File

@ -22,7 +22,18 @@ tags = ["animated", "interactive"]
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue.</p>
{{<demo>}} {{<demo>}}
<p>You must be having a laugh.</p>
<style>
p {
color: red !important;
font-family: cursive;
}
</style>
<script>
demo.querySelector('p').addEventListener('click', function() {
alert('hello');
})
</script>
{{</demo>}} {{</demo>}}
<p>Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Nulla lobortis tempus commodo. </p> <p>Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Nulla lobortis tempus commodo. </p>

View File

@ -3,18 +3,7 @@
<div id="demo-{{ $uniq }}"> <div id="demo-{{ $uniq }}">
</div> </div>
<template id="template-{{ $uniq }}"> <template id="template-{{ $uniq }}">
<p>You must be joking.</p> {{ .Inner }}
<style>
p {
color: red !important;
font-family: cursive;
}
</style>
<script>
demo.querySelector('p').addEventListener('click', function() {
alert('hello');
})
</script>
</template> </template>
<script> <script>
(function() { (function() {

View File

@ -314,6 +314,17 @@ th:empty {
margin-top: 0; margin-top: 0;
} }
.note.warning {
border-left: 0;
background-image: url(images/stripe.svg);
background-size: 0.5rem auto;
background-repeat: repeat-y;
}
.note.warning > div {
margin-left: 1.25rem;
}
/* Tick lists */ /* Tick lists */
.ticks li { .ticks li {