Fix variables component, Fix doc tabs

docs/_includes/elements/variables.html

@@ -1,5 +1,4 @@
 {% capture content %}
-
   {% assign anchor_name = include.anchor_name | default: 'Variables' %}
   {% assign tab         = include.tab         | default: page.doc-tab %}
   {% assign subtab      = include.subtab      | default: page.doc-subtab %}
@@ -25,49 +24,53 @@
 
     You can use {{ variables_link | strip }} to <strong>customize</strong> this {{ type }}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
   {% endif %}
-
 {% endcapture %}
 
-{% unless include.hide_anchor %}
+{% capture variables_size %}{{ variables | size }}{% endcapture %}
-  {% include elements/anchor.html name=anchor_name %}
+{% capture variables_keys_size %}{{ include.variables_keys | size }}{% endcapture %}
-{% endunless %}
 
-{% unless include.hide_content %}
+{% if variables_size != '0' or variables_keys_size != '0' %}
-  <div class="content">
+  {% unless include.hide_anchor %}
-    <p>{{ content | strip }}</p>
+    {% include elements/anchor.html name=anchor_name %}
+  {% endunless %}
+
+  {% unless include.hide_content %}
+    <div class="content">
+      <p>{{ content | strip }}</p>
+    </div>
+  {% endunless %}
+
+  <div class="table-container">
+    <table class="table {{ table_class }}">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Default value</th>
+          <th>Computed value</th>
+        </tr>
+      </thead>
+      <tfoot>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Default value</th>
+          <th>Computed value</th>
+        </tr>
+      </tfoot>
+      <tbody>
+        {% if include.variables_keys %}
+          {% for key in include.variables_keys %}
+            {% assign variable = site.data.variables[include.folder][include.file].by_name[key] %}
+            {% include elements/variable-row.html variable=variable %}
+          {% endfor %}
+        {% else %}
+          {% for variable_name in variables %}
+            {% assign variable = data.by_name[variable_name] %}
+            {% include elements/variable-row.html variable=variable %}
+          {% endfor %}
+        {% endif %}
+      </tbody>
+    </table>
   </div>
-{% endunless %}
+{% endif %}
-
-<div class="table-container">
-  <table class="table {{ table_class }}">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default value</th>
-        <th>Computed value</th>
-      </tr>
-    </thead>
-    <tfoot>
-      <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default value</th>
-        <th>Computed value</th>
-      </tr>
-    </tfoot>
-    <tbody>
-      {% if include.variables_keys %}
-        {% for key in include.variables_keys %}
-          {% assign variable = site.data.variables[include.folder][include.file].by_name[key] %}
-          {% include elements/variable-row.html variable=variable %}
-        {% endfor %}
-      {% else %}
-        {% for variable_name in variables %}
-          {% assign variable = data.by_name[variable_name] %}
-          {% include elements/variable-row.html variable=variable %}
-        {% endfor %}
-      {% endif %}
-    </tbody>
-  </table>
-</div>

docs/_sass/main.sass

@@ -72,19 +72,30 @@
 
 .bd-tabs
   margin-bottom: $main-spacing
-  .tabs
+
-    overflow: visible
++mobile
-    ul,
+  .bd-tabs
-    a
+    margin-left: -1.5rem
-      border-bottom-color: $white-ter
+    margin-right: -1.5rem
-      border-bottom-width: 2px
+    .tabs
-    ul
+      ul
-      flex-wrap: wrap
+        flex-wrap: nowrap
-      max-width: 100%
+
-    a
++tablet
-      margin-bottom: -2px
+  .bd-tabs
-    li:not(.is-active) a:hover
+    .tabs
-        border-bottom-color: $border
+      overflow: visible
+      ul,
+      a
+        border-bottom-color: $white-ter
+        border-bottom-width: 2px
+      a
+        margin-bottom: -2px
+      li:not(.is-active) a:hover
+          border-bottom-color: $border
+      ul
+        flex-wrap: wrap
+        max-width: 100%
 
 .bd-content
   hr:first-child

docs/css/bulma-docs.css

@@ -4204,54 +4204,13 @@ a.box:active {
 }
 
 .control {
+  box-sizing: border-box;
   clear: both;
   font-size: 1rem;
   position: relative;
   text-align: left;
 }
 
-.control.has-icon .icon {
-  color: #dbdbdb;
-  height: 2.25em;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  width: 2.25em;
-  z-index: 4;
-}
-
-.control.has-icon .input:focus + .icon {
-  color: #7a7a7a;
-}
-
-.control.has-icon .input.is-small + .icon {
-  font-size: 0.75rem;
-}
-
-.control.has-icon .input.is-medium + .icon {
-  font-size: 1.25rem;
-}
-
-.control.has-icon .input.is-large + .icon {
-  font-size: 1.5rem;
-}
-
-.control.has-icon:not(.has-icon-right) .icon {
-  left: 0;
-}
-
-.control.has-icon:not(.has-icon-right) .input {
-  padding-left: 2.25em;
-}
-
-.control.has-icon.has-icon-right .icon {
-  right: 0;
-}
-
-.control.has-icon.has-icon-right .input {
-  padding-right: 2.25em;
-}
-
 .control.has-icons-left .input:focus ~ .icon,
 .control.has-icons-left .select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon,
 .control.has-icons-right .select:focus ~ .icon {
@@ -10404,27 +10363,35 @@ label.panel-block:hover {
   margin-bottom: 3rem;
 }
 
-.bd-tabs .tabs {
+@media screen and (max-width: 768px) {
-  overflow: visible;
+  .bd-tabs {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+  }
+  .bd-tabs .tabs ul {
+    flex-wrap: nowrap;
+  }
 }
 
-.bd-tabs .tabs ul,
+@media screen and (min-width: 769px), print {
-.bd-tabs .tabs a {
+  .bd-tabs .tabs {
-  border-bottom-color: whitesmoke;
+    overflow: visible;
-  border-bottom-width: 2px;
+  }
-}
+  .bd-tabs .tabs ul,
-
+  .bd-tabs .tabs a {
-.bd-tabs .tabs ul {
+    border-bottom-color: whitesmoke;
-  flex-wrap: wrap;
+    border-bottom-width: 2px;
-  max-width: 100%;
+  }
-}
+  .bd-tabs .tabs a {
-
+    margin-bottom: -2px;
-.bd-tabs .tabs a {
+  }
-  margin-bottom: -2px;
+  .bd-tabs .tabs li:not(.is-active) a:hover {
-}
+    border-bottom-color: #dbdbdb;
-
+  }
-.bd-tabs .tabs li:not(.is-active) a:hover {
+  .bd-tabs .tabs ul {
-  border-bottom-color: #dbdbdb;
+    flex-wrap: wrap;
+    max-width: 100%;
+  }
 }
 
 .bd-content hr:first-child {