Merge with dev

components/app_bar/_config.scss

@@ -2,5 +2,7 @@ $appbar-color: $color-primary-dark !default;
 $appbar-contrast: $color-primary-contrast !default;
 $appbar-title-total-distance: 8 * $unit !default;
 $appbar-height: 6.4 * $unit !default;
+$appbar-height-m-portrait: 5.6 * $unit !default;
+$appbar-height-m-landscape: 4.8 * $unit !default;
 $appbar-h-padding: 2.4 * $unit !default;
 $appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;

components/app_bar/theme.scss

@@ -9,6 +9,14 @@
   color: $appbar-contrast;
   background: $appbar-color;
 
+  @media screen and (max-width: $layout-breakpoint-xxs) and (orientation: portrait) {
+    height: $appbar-height-m-portrait;
+  }
+
+  @media screen and (max-width: $layout-breakpoint-xs) and (orientation: landscape) {
+    height: $appbar-height-m-landscape;
+  }
+
   &:not(.flat) {
     z-index: $z-index-high;
     box-shadow: 0 2px 5px rgba(0,0,0,.26);

components/autocomplete/Autocomplete.js

@@ -8,9 +8,9 @@ import InjectInput from '../input/Input.js';
 import events from '../utils/events.js';
 
 const POSITION = {
- AUTO: 'auto',
- DOWN: 'down',
- UP: 'up'
+  AUTO: 'auto',
+  DOWN: 'down',
+  UP: 'up'
 };
 
 const factory = (Chip, Input) => {
@@ -59,7 +59,9 @@ const factory = (Chip, Input) => {
 
    componentWillReceiveProps (nextProps) {
      if (!this.props.multiple) {
-       this.setState({query: nextProps.value});
+       this.setState({
+         query: this.query(nextProps.value)
+       });
      }
    }
 

components/button/theme.scss

@@ -8,7 +8,7 @@
 %button {
   @include typo-button();
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   height: $button-height;
   flex-direction: row;
   align-content: center;

components/utils/events.js

@@ -1,15 +1,15 @@
 export default {
   getMousePosition (event) {
     return {
-      x: event.pageX - window.scrollX,
-      y: event.pageY - window.scrollY
+      x: event.pageX - (window.scrollX || window.pageXOffset),
+      y: event.pageY - (window.scrollY || window.pageYOffset)
     };
   },
 
   getTouchPosition (event) {
     return {
-      x: event.touches[0].pageX - window.scrollX,
-      y: event.touches[0].pageY - window.scrollY
+      x: event.touches[0].pageX - (window.scrollX || window.pageXOffset),
+      y: event.touches[0].pageY - (window.scrollY || window.pageYOffset)
     };
   },