fix(layouts): interpolated values, validations, test & CSS fixes

* improved consistent use of `attrs.$observe( )` to watch for interpolated attribute values (for Layout attributes which support value specifiers).
* add validation of Layout attribute values with fallbacks to default value approprate to each attribute type
* significant code cleanup for use of `$observe( )`
* removed possible classname generation with raw, uninterpolated strings
* removed multiple classname generation
* fixed invalid classname generation when interpolation values are invalid
* remove `md-` prefix from layout class names
* remove all attribute selectors from layout.scss
* deprecated use of `offset` attribute; now uses `layout-offset`
* add box-sizing to all flex variants
* add max-width/height to flex variants
* fixed max-width/height for flex 33, 34, 66, and 67 variants.
* complete refactor for spec testing of Layouts

Fixes #5076. Fixes #5054. Refs #5014. Fixes #4994. Fixes #4959. Fixes #4902. Fixes #2954. Fixes #5014.
Closes #5090.

docs/app/css/layout-demo.css

@@ -42,7 +42,8 @@ demo-include {
  margin-top: 16px;
 }
 
-.layout-demo :not(.md-layout) {
+.layout-demo :not(.layout-row),
+.layout-demo :not(.layout-column) {
  border: 1px solid #eee;
  padding: 8px;
 }

docs/app/partials/layout-options.tmpl.html

@@ -80,8 +80,8 @@
  <demo-file name="index.html">
  <div layout="row" layout-wrap class="colorNested-noPad">
  <div flex="33">[flex=33]</div>
- <div flex="66">[flex=67]</div>
- <div flex="66">[flex=67]</div>
+ <div flex="67">[flex=67]</div>
+ <div flex="67">[flex=67]</div>
  <div flex="33">[flex=33]</div>
  </div>
  </demo-file>
@@ -98,10 +98,10 @@
  <docs-demo demo-title="Responsive Flex & Offset Attributes" class="small-demo">
  <demo-file name="index.html">
  <div layout="row" class="colorNested">
- <div flex="66" flex-sm="33">
+ <div flex="66" flex-sm="34">
  I flex to one-third of the space on mobile, and two-thirds on other devices.
  </div>
- <div flex="33" flex-sm="66">
+ <div flex="34" flex-sm="66">
  I flex to two-thirds of the space on mobile, and one-third on other devices.
  </div>
  </div>