Update variables

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 * #2145 Fix #372 -> New indeterminate progress bars
 * #2206 Fix #2046 -> New variables `$table-head-background-color`, `$table-body-background-color` and `$table-foot-background-color` for the `.table` element
+* #592 -> Give arbitrary elements access to the image/ratio classes
 
 ### Improvements
 

docs/_data/variables/components/navbar.json

@@ -220,6 +220,13 @@
       "name": "$navbar-bottom-box-shadow-size",
       "value": "0 -2px 0 0",
       "type": "size"
+    },
+    "$navbar-breakpoint": {
+      "name": "$navbar-breakpoint",
+      "value": "$desktop",
+      "type": "variable",
+      "computed_type": "computed",
+      "computed_value": "960px + (2 * $gap)"
     }
   },
   "list": [
@@ -259,7 +266,8 @@
     "$navbar-dropdown-item-active-background-color",
     "$navbar-divider-background-color",
     "$navbar-divider-height",
-    "$navbar-bottom-box-shadow-size"
+    "$navbar-bottom-box-shadow-size",
+    "$navbar-breakpoint"
   ],
   "file_path": "components/navbar.sass"
 }

docs/_data/variables/components/pagination.json

@@ -19,6 +19,11 @@
       "value": "-0.25rem",
       "type": "size"
     },
+    "$pagination-min-width": {
+      "name": "$pagination-min-width",
+      "value": "$control-height",
+      "type": "variable"
+    },
     "$pagination-hover-color": {
       "name": "$pagination-hover-color",
       "value": "$link-hover",
@@ -115,6 +120,7 @@
     "$pagination-color",
     "$pagination-border-color",
     "$pagination-margin",
+    "$pagination-min-width",
     "$pagination-hover-color",
     "$pagination-hover-border-color",
     "$pagination-focus-color",

docs/_data/variables/elements/form.json

@@ -21,11 +21,21 @@
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 86%)"
     },
+    "$input-height": {
+      "name": "$input-height",
+      "value": "$control-height",
+      "type": "variable"
+    },
     "$input-shadow": {
       "name": "$input-shadow",
       "value": "inset 0 1px 2px rgba($black, 0.1)",
       "type": "size"
     },
+    "$input-placeholder-color": {
+      "name": "$input-placeholder-color",
+      "value": "rgba($input-color, 0.3)",
+      "type": "color"
+    },
     "$input-hover-color": {
       "name": "$input-hover-color",
       "value": "$grey-darker",
@@ -85,6 +95,11 @@
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 96%)"
     },
+    "$input-disabled-placeholder-color": {
+      "name": "$input-disabled-placeholder-color",
+      "value": "rgba($input-disabled-color, 0.3)",
+      "type": "color"
+    },
     "$input-arrow": {
       "name": "$input-arrow",
       "value": "$link",
@@ -203,7 +218,9 @@
     "$input-color",
     "$input-background-color",
     "$input-border-color",
+    "$input-height",
     "$input-shadow",
+    "$input-placeholder-color",
     "$input-hover-color",
     "$input-hover-border-color",
     "$input-focus-color",
@@ -213,6 +230,7 @@
     "$input-disabled-color",
     "$input-disabled-background-color",
     "$input-disabled-border-color",
+    "$input-disabled-placeholder-color",
     "$input-arrow",
     "$input-icon-color",
     "$input-icon-active-color",

docs/_data/variables/elements/progress.json

@@ -13,11 +13,17 @@
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 29%)"
+    },
+    "$progress-indeterminate-duration": {
+      "name": "$progress-indeterminate-duration",
+      "value": "1.5s",
+      "type": "string"
     }
   },
   "list": [
     "$progress-bar-background-color",
-    "$progress-value-background-color"
+    "$progress-value-background-color",
+    "$progress-indeterminate-duration"
   ],
   "file_path": "elements/progress.sass"
 }

docs/_data/variables/elements/table.json

@@ -60,6 +60,21 @@
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
+    "$table-head-background-color": {
+      "name": "$table-head-background-color",
+      "value": "transparent",
+      "type": "string"
+    },
+    "$table-body-background-color": {
+      "name": "$table-body-background-color",
+      "value": "transparent",
+      "type": "string"
+    },
+    "$table-foot-background-color": {
+      "name": "$table-foot-background-color",
+      "value": "transparent",
+      "type": "string"
+    },
     "$table-row-hover-background-color": {
       "name": "$table-row-hover-background-color",
       "value": "$white-bis",
@@ -107,6 +122,9 @@
     "$table-head-cell-color",
     "$table-foot-cell-border-width",
     "$table-foot-cell-color",
+    "$table-head-background-color",
+    "$table-body-background-color",
+    "$table-foot-background-color",
     "$table-row-hover-background-color",
     "$table-row-active-background-color",
     "$table-row-active-color",

docs/_data/variables/layout/footer.json

@@ -6,10 +6,16 @@
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 98%)"
+    },
+    "$footer-padding": {
+      "name": "$footer-padding",
+      "value": "3rem 1.5rem 6rem",
+      "type": "size"
     }
   },
   "list": [
-    "$footer-background-color"
+    "$footer-background-color",
+    "$footer-padding"
   ],
   "file_path": "layout/footer.sass"
 }

docs/_data/variables/utilities/controls.json

@@ -19,6 +19,16 @@
       "value": "1px",
       "type": "size"
     },
+    "$control-height": {
+      "name": "$control-height",
+      "value": "2.25em",
+      "type": "size"
+    },
+    "$control-line-height": {
+      "name": "$control-line-height",
+      "value": "1.5",
+      "type": "unitless"
+    },
     "$control-padding-vertical": {
       "name": "$control-padding-vertical",
       "value": "calc(0.375em - #{$control-border-width})",
@@ -34,6 +44,8 @@
     "$control-radius",
     "$control-radius-small",
     "$control-border-width",
+    "$control-height",
+    "$control-line-height",
     "$control-padding-vertical",
     "$control-padding-horizontal"
   ],

docs/_data/variables/utilities/derived-variables.json

@@ -161,13 +161,6 @@
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 96%)"
     },
-    "$footer-background-color": {
-      "name": "$footer-background-color",
-      "value": "$white-bis",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 98%)"
-    },
     "$border": {
       "name": "$border",
       "value": "$grey-lighter",
@@ -308,6 +301,13 @@
       "computed_type": "font-family",
       "computed_value": "BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif"
     },
+    "$family-secondary": {
+      "name": "$family-secondary",
+      "value": "$family-sans-serif",
+      "type": "variable",
+      "computed_type": "font-family",
+      "computed_value": "BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif"
+    },
     "$family-code": {
       "name": "$family-code",
       "value": "$family-monospace",
@@ -393,7 +393,6 @@
     "$light-invert",
     "$dark-invert",
     "$background",
-    "$footer-background-color",
     "$border",
     "$border-hover",
     "$text",
@@ -414,6 +413,7 @@
     "$link-active",
     "$link-active-border",
     "$family-primary",
+    "$family-secondary",
     "$family-code",
     "$size-small",
     "$size-normal",

docs/_includes/elements/new-tag.html

@@ -5,8 +5,11 @@
   {% if tag_version_value > current_version_value %}
     <span class="tag is-warning">Coming soon!</span>
     <span class="tag is-danger">{{ include.version }}</span>
-  {% else %}
+  {% elsif tag_version_value == current_version_value %}
     <span class="tag">New!</span>
+    <span class="tag is-success">{{ include.version }}</span>
+  {% else %}
+    <span class="tag">Since</span>
     <span class="tag is-info">{{ include.version }}</span>
   {% endif %}
 </div>

docs/documentation/elements/image.html

@@ -175,4 +175,14 @@ meta:
   <p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
 </div>
 
+{% include elements/anchor.html name="Arbitrary ratios with any element" %}
+
+{% include elements/new-tag.html version="0.7.3" %}
+
+<div class="content">
+  <p>
+    You can now use the
+  </p>
+</div>
+
 {% include elements/variables.html type='element' %}