simplify bottom bar examples

Author: marcosmoura

docs/src/pages/components/BottomBar.vue

@@ -75,30 +75,6 @@
                 <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
               </md-bottom-bar>
             </div>
-
-            <div class="phone-viewport">
-              <md-bottom-bar class="md-accent">
-                <md-bottom-bar-item href="#/components/bottom-bar" md-icon="history">Recents</md-bottom-bar-item>
-                <md-bottom-bar-item href="#/components/bottom-bar" md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
-                <md-bottom-bar-item href="#/components/bottom-bar" md-icon="near_me">Nearby</md-bottom-bar-item>
-              </md-bottom-bar>
-            </div>
-
-            <div class="phone-viewport">
-              <md-bottom-bar class="md-warn">
-                <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
-              </md-bottom-bar>
-            </div>
-
-            <div class="phone-viewport">
-              <md-bottom-bar class="md-transparent">
-                <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
-              </md-bottom-bar>
-            </div>
           </div>
 
           <div slot="code">
@@ -108,24 +84,6 @@
                 &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
                 &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
               &lt;/md-bottom-bar&gt;
-
-              &lt;md-bottom-bar class=&quot;md-accent&quot;&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
-              &lt;/md-bottom-bar&gt;
-
-              &lt;md-bottom-bar class=&quot;md-warn&quot;&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
-              &lt;/md-bottom-bar&gt;
-
-              &lt;md-bottom-bar class=&quot;md-transparent&quot;&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
-              &lt;/md-bottom-bar&gt;
             </code-block>
           </div>
         </example-box>
@@ -140,33 +98,6 @@
                 <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
               </md-bottom-bar>
             </div>
-
-            <div class="phone-viewport">
-              <md-bottom-bar class="md-accent" md-shift>
-                <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
-              </md-bottom-bar>
-            </div>
-
-            <div class="phone-viewport">
-              <md-bottom-bar class="md-warn" md-shift>
-                <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
-              </md-bottom-bar>
-            </div>
-
-            <div class="phone-viewport">
-              <md-bottom-bar class="md-transparent" md-shift>
-                <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
-              </md-bottom-bar>
-            </div>
           </div>
 
           <div slot="code">
@@ -177,41 +108,12 @@
                 &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
                 &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
               &lt;/md-bottom-bar&gt;
-
-              &lt;md-bottom-bar class=&quot;md-accent&quot; md-shift&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-              &lt;/md-bottom-bar&gt;
-
-              &lt;md-bottom-bar class=&quot;md-warn&quot; md-shift&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-              &lt;/md-bottom-bar&gt;
-
-              &lt;md-bottom-bar class=&quot;md-transparent&quot; md-shift&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-              &lt;/md-bottom-bar&gt;
             </code-block>
           </div>
         </example-box>
 
         <example-box card-title="Themes">
           <div slot="demo">
-            <div class="phone-viewport">
-              <md-bottom-bar md-theme="orange">
-                <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
-              </md-bottom-bar>
-            </div>
-
             <div class="phone-viewport">
               <md-bottom-bar md-theme="teal">
                 <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
@@ -220,15 +122,6 @@
               </md-bottom-bar>
             </div>
 
-            <div class="phone-viewport">
-              <md-bottom-bar md-shift md-theme="green">
-                <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
-                <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
-              </md-bottom-bar>
-            </div>
-
             <div class="phone-viewport">
               <md-bottom-bar md-shift md-theme="indigo">
                 <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
@@ -241,14 +134,6 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;div class=&quot;phone-viewport&quot;&gt;
-                &lt;md-bottom-bar md-theme=&quot;orange&quot;&gt;
-                  &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
-                  &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
-                  &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
-                &lt;/md-bottom-bar&gt;
-              &lt;/div&gt;
-
               &lt;div class=&quot;phone-viewport&quot;&gt;
                 &lt;md-bottom-bar md-theme=&quot;teal&quot;&gt;
                   &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
@@ -257,15 +142,6 @@
                 &lt;/md-bottom-bar&gt;
               &lt;/div&gt;
 
-              &lt;div class=&quot;phone-viewport&quot;&gt;
-                &lt;md-bottom-bar md-shift md-theme=&quot;green&quot;&gt;
-                  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-                  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-                  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-                  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-                &lt;/md-bottom-bar&gt;
-              &lt;/div&gt;
-
               &lt;div class=&quot;phone-viewport&quot;&gt;
                 &lt;md-bottom-bar md-shift md-theme=&quot;indigo&quot;&gt;
                   &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;