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,9 +24,12 @@
 
     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 %}
 
+{% capture variables_size %}{{ variables | size }}{% endcapture %}
+{% capture variables_keys_size %}{{ include.variables_keys | size }}{% endcapture %}
+
+{% if variables_size != '0' or variables_keys_size != '0' %}
   {% unless include.hide_anchor %}
     {% include elements/anchor.html name=anchor_name %}
   {% endunless %}
@@ -71,3 +73,4 @@
       </tbody>
     </table>
   </div>
+{% endif %}

docs/_sass/main.sass

@@ -72,19 +72,30 @@
 
 .bd-tabs
   margin-bottom: $main-spacing
+
++mobile
+  .bd-tabs
+    margin-left: -1.5rem
+    margin-right: -1.5rem
+    .tabs
+      ul
+        flex-wrap: nowrap
+
++tablet
+  .bd-tabs
     .tabs
       overflow: visible
       ul,
       a
         border-bottom-color: $white-ter
         border-bottom-width: 2px
-    ul
-      flex-wrap: wrap
-      max-width: 100%
       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;
 }
 
+@media screen and (max-width: 768px) {
+  .bd-tabs {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+  }
+  .bd-tabs .tabs ul {
+    flex-wrap: nowrap;
+  }
+}
+
+@media screen and (min-width: 769px), print {
   .bd-tabs .tabs {
     overflow: visible;
   }
-
   .bd-tabs .tabs ul,
   .bd-tabs .tabs a {
     border-bottom-color: whitesmoke;
     border-bottom-width: 2px;
   }
-
+  .bd-tabs .tabs a {
+    margin-bottom: -2px;
+  }
+  .bd-tabs .tabs li:not(.is-active) a:hover {
+    border-bottom-color: #dbdbdb;
+  }
   .bd-tabs .tabs ul {
     flex-wrap: wrap;
     max-width: 100%;
   }
-
-.bd-tabs .tabs a {
-  margin-bottom: -2px;
-}
-
-.bd-tabs .tabs li:not(.is-active) a:hover {
-  border-bottom-color: #dbdbdb;
 }
 
 .bd-content hr:first-child {