fix expand and tabs shortcodes to work with strict Content-Security-Policy

When the Content-Security-Policy header has "style-src 'self';"
inine style elements like style="display: none" are not honored
by browsers, so add CSS to the markup classes and style them
display: none
This commit is contained in:
Paul Twohey 2019-08-28 21:00:00 -07:00 committed by Alex Shpak
parent 8f1cdb6aee
commit 99bd271b35
3 changed files with 10 additions and 2 deletions

View file

@ -31,6 +31,10 @@
padding: $padding-16; padding: $padding-16;
} }
.book-expand-expander {
display: none;
}
input[type="checkbox"]:checked + .book-expand-content { input[type="checkbox"]:checked + .book-expand-content {
display: block; display: block;
} }
@ -56,6 +60,10 @@
cursor: pointer; cursor: pointer;
} }
.book-tabs-radio {
display: none;
}
.book-tabs-content { .book-tabs-content {
order: 999; //Move content blocks to the end order: 999; //Move content blocks to the end
width: 100%; width: 100%;

View file

@ -4,7 +4,7 @@
<span>{{ default "Expand" (.Get 0) }}</span> <span>{{ default "Expand" (.Get 0) }}</span>
<span>{{ default "↕" (.Get 1) }}</span> <span>{{ default "↕" (.Get 1) }}</span>
</div> </div>
<input type="checkbox" style="display: none" /> <input type="checkbox" class="book-expand-expander" />
<div class="book-expand-content markdown-inner"> <div class="book-expand-content markdown-inner">
{{ .Inner | markdownify }} {{ .Inner | markdownify }}
</div> </div>

View file

@ -4,7 +4,7 @@
<div class="book-tabs"> <div class="book-tabs">
{{ range $index, $tab := .Scratch.Get $group }} {{ range $index, $tab := .Scratch.Get $group }}
<input type="radio" name="{{ $group }}" style="display: none;" id="{{ printf "%s-%d" $group $index }}" {{ if not $index }}checked="checked"{{ end }} /> <input type="radio" class="book-tabs-radio" name="{{ $group }}" id="{{ printf "%s-%d" $group $index }}" {{ if not $index }}checked="checked"{{ end }} />
<label for="{{ printf "%s-%d" $group $index }}"> <label for="{{ printf "%s-%d" $group $index }}">
{{ $tab.Name }} {{ $tab.Name }}
</label> </label>