add fullscreen dialog.

A first version of fullscreen dialogs as defined in the material spec
https://material.google.com/components/dialogs.html#dialogs-full-screen-dialogs

components/dialog/readme.md

@@ -54,7 +54,10 @@ If you want to provide a theme via context, the component key is `RTDialog`.
 | `onOverlayMouseMove`    | `Function`      |                 | Callback called when the mouse is moving over the overlay. |
 | `onOverlayMouseUp`      | `Function`      |                 | Callback called when the mouse button is released over the overlay. |
 | `title`                 | `String`        |                 | The text string to use as standar title of the dialog.|
-| `type`                  | `String`        | `normal`        | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
+| `type`                  | `String`        | `normal`        | Used to determine the size of the dialog. It can be `small`, `normal`, `large` or `fullscreen`. |
+
+Notice that the `fullscreen` option only applies on mobile devices with small screens (i.e. cellphones), and on other devices it behaves as a `large` dialog.
+
 
 ## Theme
 

components/dialog/theme.scss

@@ -47,6 +47,18 @@
   width: 96vw;
 }
 
+.fullscreen {
+  width: 96vw;
+
+  @media screen and (max-width: $layout-breakpoint-xs) {
+    max-width: 100vw;
+    max-height: 100vh;
+    min-height: 100vh;
+    width: 100vw;
+    border-radius: 0;
+  }
+}
+
 .title {
   @include typo-title();
   flex-grow: 0;

spec/components/dialog.js

@@ -1,10 +1,19 @@
 import React, { PropTypes } from 'react';
 import Button from '../../components/button';
 import Dialog from '../../components/dialog';
+import Dropdown from '../../components/dropdown';
+
+const dialogTypes = [
+  {value: 'small', label: 'small'},
+  {value: 'normal', label: 'normal'},
+  {value: 'large', label: 'large'},
+  {value: 'fullscreen', label: 'fullscreen'}
+];
 
 class DialogTest extends React.Component {
   state = {
-    active: false
+    active: false,
+    type: 'normal'
   };
 
   handleToggle = () => {
@@ -13,6 +22,10 @@ class DialogTest extends React.Component {
     });
   };
 
+  changeDialogType = (value) => {
+    this.setState({type: value});
+  };
+
   actions = [
     { label: 'Disagree', primary: true, onClick: this.handleToggle },
     { label: 'Agree', primary: true, onClick: this.handleToggle }
@@ -23,11 +36,19 @@ class DialogTest extends React.Component {
       <section>
         <h5>Dialog</h5>
         <p>lorem ipsum...</p>
+        <Dropdown
+          label='Dialog Type'
+          auto
+          onChange={this.changeDialogType}
+          source={dialogTypes}
+          value={this.state.type}
+        />
         <Button label='Show Dialog' raised primary onClick={this.handleToggle} />
         <ContextComponent>
           <Dialog
             actions={this.actions}
             active={this.state.active}
+            type={this.state.type}
             title="Use Google's location service?"
             onOverlayClick={this.handleToggle}
             onEscKeyDown={this.handleToggle}