#39, Finish tabs shortcode

assets/_shortcode.scss

@@ -9,6 +9,7 @@
   }
 }
 
+// {{< expand "Label" "icon" >}}
 .book-expand {
   border: 1px solid $gray-200;
 
@@ -28,29 +29,34 @@
   }
 }
 
+// {{< tabs >}}
 .book-tabs {
   border: 1px solid $gray-200;
+  display: flex;
+  flex-wrap: wrap;
 
-  .book-tabs-head {
-    border-bottom: $padding-1 solid $gray-100;
-
-    label {
-      display: inline-block;
-      padding: $padding-8 $padding-16;
-      cursor: pointer;
-    }
+  label {
+    display: inline-block;
+    padding: $padding-8 $padding-16;
+    cursor: pointer;
   }
 
   .book-tabs-content {
+    order: 999; //Move content blocks to the end
+    border-top: $padding-1 solid $gray-100;
     padding: $padding-16;
     display: none;
   }
 
-  input[type="radio"]:checked + .book-tabs-content {
+  input[type="radio"]:checked + label {
+    border-bottom: $padding-1 solid $color-link;
+  }
+  input[type="radio"]:checked + label + .book-tabs-content {
     display: block;
   }
 }
 
+// {{< columns >}}
 .book-columns > {
   div + div {
     margin-left: $padding-16 * 2;

exampleSite/resources/_gen/assets/scss/book.scss_48b060fe05b0a273d182ef83c0605941.json

@@ -1 +1 @@
-{"Target":"book.min.321975a033bb785de7028de6f009001beb23305b2dd699f53eb5987690eb5265.css","MediaType":"text/css","Data":{"Integrity":"sha256-Mhl1oDO7eF3nAo3m8AkAG+sjMFst1pn1PrWYdpDrUmU="}}
+{"Target":"book.min.1eed0ce8b9904e3795315033369d6179d45f04b26f5d726c6248ce01da3922da.css","MediaType":"text/css","Data":{"Integrity":"sha256-Hu0M6LmQTjeVMVAzNp1hedRfBLJvXXJsYkjOAdo5Ito="}}

layouts/shortcodes/mermaid.html

@@ -1,6 +1,6 @@
 {{ if not (.Page.Scratch.Get "mermaid") }}
 <!-- Include mermaid only first time -->
-<script src="{{ "mermaid.min.js" | absURL }}"></script>
+<script src="{{ "mermaid.min.js" | relURL }}"></script>
 {{ .Page.Scratch.Set "mermaid" true }}
 {{ end }}
 

layouts/shortcodes/tabs.html

@@ -2,18 +2,32 @@
 {{ $id := .Get 0 }}
 {{ $group := printf "tabs-%s" $id }}
 
+<!-- 
 <div class="book-tabs">
   <div class="book-tabs-head">
-  {{ range $index, $tab :=  .Scratch.Get $group}}
+  {{ range $index, $tab :=  .Scratch.Get $group }}
     <label for="{{ printf "%s-%d" $group $index }}">
-      <span>{{ $tab.Name }}</span>
+      {{ $tab.Name }}
     </label>
   {{ end }}
   </div>
-  {{ 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 }} />
-  <div class="book-tabs-content markdown-inner">
-    <span>{{ .Content | markdownify }}</span>
+  <div class="book-tabs-content book-tabs-{{ $index }} markdown-inner">
+    {{ .Content | markdownify }}
   </div>
   {{ end }}
 </div>
+-->
+
+<div class="book-tabs">
+{{ 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 }} />
+  <label for="{{ printf "%s-%d" $group $index }}">
+    {{ $tab.Name }}
+  </label>
+  <div class="book-tabs-content markdown-inner">
+    {{ .Content | markdownify }}
+  </div>
+{{ end }}
+</div>