Update references to variables in docs (#1238)

* Update navbar variables in component docs page

* Update pagination variables in component docs page

* Update tabs variables in component docs page

* Update button variables in element docs page

* Update table variables in element docs page

* Update title variables in element docs page

* Update variables template to support layout

* Add section variables in relevant docs page

* Add footer variables in relevant docs page

* Update variables template to support custom messages

* Add form generic variables in relevant docs page

* Update derived variables in relevant docs page

* Add generic variables to variables docs page

* Update sass files count in docs Modular page

docs/documentation/layout/footer.html

@@ -3,6 +3,9 @@ title: Footer
 layout: documentation
 doc-tab: layout
 doc-subtab: footer
+variables:
+- name: $footer-background-color
+  value: $background
 ---
 
 {% include subnav-layout.html %}
@@ -51,5 +54,7 @@ doc-subtab: footer
   </div>
 </footer>
 {% endhighlight %}
+
+    {% include variables.html layout=true %}
   </div>
 </section>

docs/documentation/layout/section.html

@@ -3,6 +3,13 @@ title: Section
 layout: documentation
 doc-tab: layout
 doc-subtab: section
+variables:
+- name: $section-padding
+  value: 3rem 1.5rem
+- name: $section-padding-medium
+  value: 9rem 1.5rem
+- name: $section-padding-large
+  value: 18rem 1.5rem
 ---
 
 {% include subnav-layout.html %}
@@ -37,5 +44,7 @@ doc-subtab: section
       <p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
     </div>
 
+    {% include variables.html layout=true %}
+
   </div>
 </section>