docs: refactor to new layout (vuematerial#1371)

* docs(MdSelect): update layout classes

* docs(MdAutocomplete): update layout classes

* docs(Form): update layout classes

* docs(MdSelect): update layout classes

Author: Samuell1

docs/app/pages/Components/Autocomplete/Autocomplete.vue

@@ -47,8 +47,8 @@
       <h2>Search Algorithms</h2>
 
       <p>Vue Material autocomplete comes with 2 ways of search: <a href="https://en.wikipedia.org/wiki/Approximate_string_matching" target="_blank">Fuzzy search</a> and search by whole term. The fuzzy search tries to match the results by approximation, finding patterns inside the available options. This will help with accidental type errors and improve the results. If you think that this may be confusing, you can disable this. Example:</p>
-      <div class="md-layout-row">
-        <div class="md-flex-40">
+      <div class="md-layout md-gutter">
+        <div class="md-layout-item md-size-40">
           <p>
             <strong>Fuzzy search</strong> - search term: <code>pam</code>
           </p>
@@ -66,7 +66,7 @@
           </div>
         </div>
 
-        <div class="md-flex-40">
+        <div class="md-layout-item md-size-40">
           <p>
             <strong>Normal Search</strong> - search term: <code>pam</code>
           </p>

docs/app/pages/Components/Form/examples/FormValidation.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <form novalidate class="md-layout-row md-gutter" @submit.prevent="validateUser">
-      <md-card class="md-flex-50 md-flex-small-100">
+    <form novalidate class="md-layout" @submit.prevent="validateUser">
+      <md-card class="md-layout-item md-size-50 md-small-size-100">
         <md-card-header>
           <div class="md-title">Users</div>
         </md-card-header>
 
         <md-card-content>
-          <div class="md-layout-row md-layout-wrap md-gutter">
-            <div class="md-flex md-flex-small-100">
+          <div class="md-layout md-gutter">
+            <div class="md-layout-item md-small-size-100">
               <md-field :class="getValidationClass('firstName')">
                 <label for="first-name">First Name</label>
                 <md-input name="first-name" id="first-name" autocomplete="given-name" v-model="form.firstName" :disabled="sending" />
@@ -17,7 +17,7 @@
               </md-field>
             </div>
 
-            <div class="md-flex md-flex-small-100">
+            <div class="md-layout-item md-small-size-100">
               <md-field :class="getValidationClass('lastName')">
                 <label for="last-name">Last Name</label>
                 <md-input name="last-name" id="last-name" autocomplete="family-name" v-model="form.lastName" :disabled="sending" />
@@ -27,8 +27,8 @@
             </div>
           </div>
 
-          <div class="md-layout-row md-gutter md-layout-wrap">
-            <div class="md-flex md-flex-small-100">
+          <div class="md-layout md-gutter">
+            <div class="md-layout-item md-small-size-100">
               <md-field :class="getValidationClass('gender')">
                 <label for="gender">Gender</label>
                 <md-select name="gender" id="gender" v-model="form.gender" md-dense :disabled="sending">
@@ -40,7 +40,7 @@
               </md-field>
             </div>
 
-            <div class="md-flex md-flex-small-100">
+            <div class="md-layout-item md-small-size-100">
               <md-field :class="getValidationClass('age')">
                 <label for="age">Age</label>
                 <md-input type="number" id="age" name="age" autocomplete="age" v-model="form.age" :disabled="sending" />

docs/app/pages/Components/Select/examples/BasicSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="md-layout-row md-gutter">
-      <div class="md-flex">
+    <div class="md-layout md-gutter">
+      <div class="md-layout-item">
         <md-field>
           <label for="movie">Movie</label>
           <md-select v-model="movie" name="movie" id="movie">
@@ -16,7 +16,7 @@
         </md-field>
       </div>
 
-      <div class="md-flex">
+      <div class="md-layout-item">
         <md-field>
           <md-select v-model="country" name="country" id="country" placeholder="Country">
             <md-option value="australia">Australia</md-option>
@@ -27,7 +27,7 @@
         </md-field>
       </div>
 
-      <div class="md-flex">
+      <div class="md-layout-item">
         <md-field>
           <label for="font">Font</label>
           <md-select v-model="font" name="font" id="font">

docs/app/pages/Components/Select/examples/DenseSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="md-layout-row md-gutter">
-      <div class="md-flex">
+    <div class="md-layout md-gutter">
+      <div class="md-layout-item">
         <md-field>
           <label for="movies">Movies</label>
           <md-select v-model="movies" name="movies" id="movies" md-dense multiple>
@@ -16,7 +16,7 @@
         </md-field>
       </div>
 
-      <div class="md-flex">
+      <div class="md-layout-item">
         <md-field>
           <label for="country">Country</label>
           <md-select v-model="country" name="country" id="country" md-dense>
@@ -28,7 +28,7 @@
         </md-field>
       </div>
 
-      <div class="md-flex">
+      <div class="md-layout-item">
         <md-field>
           <label for="font">Font</label>
           <md-select v-model="font" name="font" id="font" md-dense>

docs/app/pages/Components/Select/examples/DisabledSelect.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="md-layout-row md-gutter">
-    <div class="md-flex">
+  <div class="md-layout md-gutter">
+    <div class="md-layout-item">
       <md-field>
         <label for="movie">Disabled Select</label>
         <md-select v-model="movie" name="movie" id="movie" disabled>
@@ -15,7 +15,7 @@
       </md-field>
     </div>
 
-    <div class="md-flex">
+    <div class="md-layout-item">
       <md-field>
         <label for="country">Disabled Options</label>
         <md-select v-model="country" name="country" id="country">
@@ -27,7 +27,7 @@
       </md-field>
     </div>
 
-    <div class="md-flex">
+    <div class="md-layout-item">
       <md-field>
         <label for="food">Disabled groups</label>
         <md-select v-model="food" name="food" id="food">
@@ -64,9 +64,3 @@
     })
   }
 </script>
-
-<style lang="scss" scoped>
-  .md-field {
-    max-width: 300px;
-  }
-</style>

docs/app/pages/Components/Select/examples/MultipleSelect.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="md-layout-row md-gutter">
-    <div class="md-flex">
+  <div class="md-layout md-gutter">
+    <div class="md-layout-item">
       <md-field>
         <label for="movies">Movies</label>
         <md-select v-model="selectedMovies" name="movies" id="movies" multiple>

docs/app/pages/Components/Select/examples/OptgroupSelect.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="md-layout-row md-gutter">
-    <div class="md-flex">
+  <div class="md-layout md-gutter">
+    <div class="md-layout-item">
       <md-field>
         <label for="food">Food</label>
         <md-select v-model="food1" name="food" id="food">
@@ -25,7 +25,7 @@
       </md-field>
     </div>
 
-    <div class="md-flex">
+    <div class="md-layout-item">
       <md-field>
         <label for="food">Food</label>
         <md-select v-model="food2" name="food" id="food" md-dense>