Init v1

docs/documentation/components/tabs.html

@@ -1,13 +1,14 @@
 ---
 title: Tabs
-layout: documentation
+layout: docs
+theme: library
 doc-tab: components
 doc-subtab: tabs
 breadcrumb:
-- home
-- documentation
-- components
-- components-tabs
+  - home
+  - documentation
+  - components
+  - components-tabs
 meta:
   colors: false
   sizes: true
@@ -23,9 +24,7 @@ meta:
     <li><a>Documents</a></li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_centered_example %}
+{% endcapture %} {% capture tabs_centered_example %}
 <div class="tabs is-centered">
   <ul>
     <li class="is-active"><a>Pictures</a></li>
@@ -34,9 +33,7 @@ meta:
     <li><a>Documents</a></li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_right_example %}
+{% endcapture %} {% capture tabs_right_example %}
 <div class="tabs is-right">
   <ul>
     <li class="is-active"><a>Pictures</a></li>
@@ -45,40 +42,44 @@ meta:
     <li><a>Documents</a></li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_icons_example %}
+{% endcapture %} {% capture tabs_icons_example %}
 <div class="tabs is-centered">
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-image" aria-hidden="true"></i
+        ></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-music" aria-hidden="true"></i
+        ></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-film" aria-hidden="true"></i
+        ></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="far fa-file-alt" aria-hidden="true"></i
+        ></span>
         <span>Documents</span>
       </a>
     </li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_small_example %}
+{% endcapture %} {% capture tabs_small_example %}
 <div class="tabs is-small">
   <ul>
     <li class="is-active"><a>Pictures</a></li>
@@ -87,9 +88,7 @@ meta:
     <li><a>Documents</a></li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_medium_example %}
+{% endcapture %} {% capture tabs_medium_example %}
 <div class="tabs is-medium">
   <ul>
     <li class="is-active"><a>Pictures</a></li>
@@ -98,9 +97,7 @@ meta:
     <li><a>Documents</a></li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_large_example %}
+{% endcapture %} {% capture tabs_large_example %}
 <div class="tabs is-large">
   <ul>
     <li class="is-active"><a>Pictures</a></li>
@@ -109,71 +106,81 @@ meta:
     <li><a>Documents</a></li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_boxed_example %}
+{% endcapture %} {% capture tabs_boxed_example %}
 <div class="tabs is-boxed">
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-image" aria-hidden="true"></i
+        ></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-music" aria-hidden="true"></i
+        ></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-film" aria-hidden="true"></i
+        ></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="far fa-file-alt" aria-hidden="true"></i
+        ></span>
         <span>Documents</span>
       </a>
     </li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_toggle_example %}
+{% endcapture %} {% capture tabs_toggle_example %}
 <div class="tabs is-toggle">
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-image" aria-hidden="true"></i
+        ></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-music" aria-hidden="true"></i
+        ></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-film" aria-hidden="true"></i
+        ></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="far fa-file-alt" aria-hidden="true"></i
+        ></span>
         <span>Documents</span>
       </a>
     </li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_toggle_rounded_example %}
+{% endcapture %} {% capture tabs_toggle_rounded_example %}
 <div class="tabs is-toggle is-toggle-rounded">
   <ul>
     <li class="is-active">
@@ -202,138 +209,162 @@ meta:
     </li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_fullwidth_example %}
+{% endcapture %} {% capture tabs_fullwidth_example %}
 <div class="tabs is-fullwidth">
   <ul>
     <li>
       <a>
-        <span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
+        <span class="icon"
+          ><i class="fas fa-angle-left" aria-hidden="true"></i
+        ></span>
         <span>Left</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
+        <span class="icon"
+          ><i class="fas fa-angle-up" aria-hidden="true"></i
+        ></span>
         <span>Up</span>
       </a>
     </li>
     <li>
       <a>
         <span>Right</span>
-        <span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
+        <span class="icon"
+          ><i class="fas fa-angle-right" aria-hidden="true"></i
+        ></span>
       </a>
     </li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_centered_boxed_example %}
+{% endcapture %} {% capture tabs_centered_boxed_example %}
 <div class="tabs is-centered is-boxed">
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-image" aria-hidden="true"></i
+        ></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-music" aria-hidden="true"></i
+        ></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-film" aria-hidden="true"></i
+        ></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="far fa-file-alt" aria-hidden="true"></i
+        ></span>
         <span>Documents</span>
       </a>
     </li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_toggle_fullwidth_example %}
+{% endcapture %} {% capture tabs_toggle_fullwidth_example %}
 <div class="tabs is-toggle is-fullwidth">
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-image" aria-hidden="true"></i
+        ></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-music" aria-hidden="true"></i
+        ></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-film" aria-hidden="true"></i
+        ></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="far fa-file-alt" aria-hidden="true"></i
+        ></span>
         <span>Documents</span>
       </a>
     </li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_centered_boxed_medium_example %}
+{% endcapture %} {% capture tabs_centered_boxed_medium_example %}
 <div class="tabs is-centered is-boxed is-medium">
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-image" aria-hidden="true"></i
+        ></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-music" aria-hidden="true"></i
+        ></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="fas fa-film" aria-hidden="true"></i
+        ></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
+        <span class="icon is-small"
+          ><i class="far fa-file-alt" aria-hidden="true"></i
+        ></span>
         <span>Documents</span>
       </a>
     </li>
   </ul>
 </div>
-{% endcapture %}
-
-{% capture tabs_toggle_fullwidth_large_example %}
+{% endcapture %} {% capture tabs_toggle_fullwidth_large_example %}
 <div class="tabs is-toggle is-fullwidth is-large">
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
+        <span class="icon"
+          ><i class="fas fa-image" aria-hidden="true"></i
+        ></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
+        <span class="icon"
+          ><i class="fas fa-music" aria-hidden="true"></i
+        ></span>
         <span>Music</span>
       </a>
     </li>
@@ -345,7 +376,9 @@ meta:
     </li>
     <li>
       <a>
-        <span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
+        <span class="icon"
+          ><i class="far fa-file-alt" aria-hidden="true"></i
+        ></span>
         <span>Documents</span>
       </a>
     </li>
@@ -355,98 +388,103 @@ meta:
 
 <div class="content">
   <p>
-    The Bulma <code>tabs</code> are a straightforward navigation component that come in a variety of versions. They only require the following structure:
+    The Bulma <code>tabs</code> are a straightforward navigation component that
+    come in a variety of versions. They only require the following structure:
   </p>
   <ul>
-    <li>
-      a <code>tabs</code> container
-    </li>
-    <li>
-      a <code>&lt;ul&gt;</code> HTML element
-    </li>
-    <li>
-      a list of <code>&lt;li&gt;</code> HTML element
-    </li>
-    <li>
-      <code>&lt;a&gt;</code> HTML anchor elements for each link
-    </li>
+    <li>a <code>tabs</code> container</li>
+    <li>a <code>&lt;ul&gt;</code> HTML element</li>
+    <li>a list of <code>&lt;li&gt;</code> HTML element</li>
+    <li><code>&lt;a&gt;</code> HTML anchor elements for each link</li>
   </ul>
   <p>
     The <strong>default</strong> tabs style has a single border at the bottom.
   </p>
 </div>
 
-{% include elements/snippet.html content=tabs_example horizontal=true %}
-
-{% include elements/anchor.html name="Alignment" %}
+{% include docs/elements/snippet.html content=tabs_example horizontal=true %} {%
+include docs/elements/anchor.html name="Alignment" %}
 
 <div class="content">
   <p>
-    To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
+    To align the tabs list, use the <code>is-centered</code> or
+    <code>is-right</code> modifier on the <code>.tabs</code> container:
   </p>
 </div>
 
-{% include elements/snippet.html content=tabs_centered_example horizontal=true more=true %}
-
-{% include elements/snippet.html content=tabs_right_example horizontal=true more=true %}
-
-{% include elements/anchor.html name="Icons" %}
+{% include docs/elements/snippet.html content=tabs_centered_example
+horizontal=true more=true %} {% include docs/elements/snippet.html
+content=tabs_right_example horizontal=true more=true %} {% include
+docs/elements/anchor.html name="Icons" %}
 
 <div class="content">
-  <p>You can use any of the <a href="https://fontawesome.com/">Font Awesome</a> <strong>icons</strong>.</p>
+  <p>
+    You can use any of the <a href="https://fontawesome.com/">Font Awesome</a>
+    <strong>icons</strong>.
+  </p>
 </div>
 
-{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %}
-
-{% include elements/anchor.html name="Sizes" %}
+{% include docs/elements/snippet.html content=tabs_icons_example horizontal=true
+more=true %} {% include docs/elements/anchor.html name="Sizes" %}
 <div class="content">
-  <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
+  <p>
+    You can choose between <strong>3 additional sizes</strong>:
+    <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.
+  </p>
 </div>
 
-{% include elements/snippet.html content=tabs_small_example horizontal=true more=true %}
-
-{% include elements/snippet.html content=tabs_medium_example horizontal=true more=true %}
-
-{% include elements/snippet.html content=tabs_large_example horizontal=true more=true %}
-
-{% include elements/anchor.html name="Styles" %}
+{% include docs/elements/snippet.html content=tabs_small_example horizontal=true
+more=true %} {% include docs/elements/snippet.html content=tabs_medium_example
+horizontal=true more=true %} {% include docs/elements/snippet.html
+content=tabs_large_example horizontal=true more=true %} {% include
+docs/elements/anchor.html name="Styles" %}
 
 <div class="content">
-  If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
+  If you want a more classic style with <strong>borders</strong>, just append
+  the <code>is-boxed</code> modifier.
 </div>
 
-{% include elements/snippet.html content=tabs_boxed_example horizontal=true more=true %}
+{% include docs/elements/snippet.html content=tabs_boxed_example horizontal=true
+more=true %}
 
 <p class="content">
-  If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
+  If you want <strong>mutually exclusive</strong> tabs (like radio buttons where
+  clicking one deselects all other ones), use the
+  <code>is-toggle</code> modifier.
 </p>
 
-{% include elements/snippet.html content=tabs_toggle_example horizontal=true more=true %}
+{% include docs/elements/snippet.html content=tabs_toggle_example
+horizontal=true more=true %}
 
 <p class="content">
-  If you use both <code>is-toggle</code> and <code>is-toggle-rounded</code>, the first and last items will be <strong>rounded</strong>.
+  If you use both <code>is-toggle</code> and <code>is-toggle-rounded</code>, the
+  first and last items will be <strong>rounded</strong>.
 </p>
 
-{% include elements/snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
+{% include docs/elements/snippet.html content=tabs_toggle_rounded_example
+horizontal=true more=true %}
 
 <p class="content">
-  If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
+  If you want the tabs to take up the <strong>whole width</strong> available,
+  use <code>is-fullwidth</code>.
 </p>
 
-{% include elements/snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
-
-{% include elements/anchor.html name="Combining" %}
+{% include docs/elements/snippet.html content=tabs_fullwidth_example
+horizontal=true more=true %} {% include docs/elements/anchor.html
+name="Combining" %}
 
 <div class="content">
-  <p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
+  <p>
+    You can <strong>combine</strong> different modifiers. For example, you can
+    have <strong>centered boxed</strong> tabs, or
+    <strong>fullwidth toggle</strong> ones.
+  </p>
 </div>
 
-{% include elements/snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
-
-{% include elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
-
-{% include elements/snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
-
-{% include elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
-
-{% include components/variables.html type='component' %}
+{% include docs/elements/snippet.html content=tabs_centered_boxed_example
+horizontal=true more=true %} {% include docs/elements/snippet.html
+content=tabs_toggle_fullwidth_example horizontal=true more=true %} {% include
+docs/elements/snippet.html content=tabs_centered_boxed_medium_example
+horizontal=true more=true %} {% include docs/elements/snippet.html
+content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} {%
+include docs/components/variables.html type='component' %}