refactor(): change .md-padding to layout-padding

Closes #1304. Closes #2221.
angular · Apr 10, 2015 · f881b97 · f881b97
1 parent b47a878
commit f881b97
Show file tree

Hide file tree

Showing 20 changed files with 78 additions and 108 deletions.
diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html
@@ -120,7 +120,7 @@ <h2 class="md-toolbar-item md-breadcrumb">
 
     </md-toolbar>
 
-    <md-content ng-view md-scroll-y flex class="md-padding"></md-content>
+    <md-content ng-view md-scroll-y flex layout-padding></md-content>
 
   </div>
   <script>

diff --git a/docs/guides/component/_name_/demoBasicUsage/index.html b/docs/guides/component/_name_/demoBasicUsage/index.html
@@ -1,6 +1,6 @@
 
 <div ng-controller="AppCtrl">
-  <md-content class="md-padding">
+  <md-content layout-padding>
 
   </md-content>
 </div>
diff --git a/src/components/autocomplete/demoBasicUsage/index.html b/src/components/autocomplete/demoBasicUsage/index.html
@@ -1,5 +1,5 @@
 <div ng-app="autocompleteDemo" ng-controller="DemoCtrl as ctrl" layout="column">
-  <md-content class="md-padding" layout="column">
+  <md-content layout-padding layout="column">
     <form ng-submit="$event.preventDefault()">
       <p>Use <code>&lt;md-autocomplete&gt;</code> to search for matches from local or remote data sources.</p>
       <md-autocomplete

diff --git a/src/components/autocomplete/demoFloatingLabel/index.html b/src/components/autocomplete/demoFloatingLabel/index.html
@@ -1,5 +1,5 @@
 <div ng-app="autocompleteFloatingLabelDemo" ng-controller="DemoCtrl as ctrl" layout="column">
-  <md-content class="md-padding" layout="column">
+  <md-content layout-padding layout="column">
     <form ng-submit="$event.preventDefault()">
       <p>The following example demonstrates floating labels being used as a normal form element.</p>
       <div layout-gt-sm="row">

diff --git a/src/components/chips/demoBasicUsage/index.html b/src/components/chips/demoBasicUsage/index.html
@@ -1,6 +1,6 @@
 <div ng-app="inputBasicDemo" ng-controller="BasicDemoCtrl as ctrl" layout="column">
 
-  <md-content class="md-padding" layout="column">
+  <md-content layout-padding layout="column">
     <p>
       Use a cusom chip template.
     </p>

diff --git a/src/components/chips/demoCustomInputs/index.html b/src/components/chips/demoCustomInputs/index.html
@@ -1,20 +1,20 @@
 <div ng-app="customInputDemo" ng-controller="CustomInputDemoCtrl as ctrl" layout="column">
 
-  <md-content class="md-padding" layout="column">
+  <md-content layout-padding layout="column">
     <p>Use an <code>&lt;input&gt;</code> element with no model to build an ordered set of chips.</p>
     <md-chips ng-model="ctrl.numberChips">
       <input type="number" placeholder="Enter a number">
     </md-chips>
   </md-content>
 
-  <md-content class="md-padding" layout="column">
+  <md-content layout-padding layout="column">
     <p>Use an <code>&lt;input&gt;</code> element to build an ordered set of chips.</p>
     <md-chips ng-model="ctrl.numberChips2">
       <input type="number" ng-model="ctrl.numberBuffer" placeholder="Enter a number">
     </md-chips>
   </md-content>
 
-  <md-content class="md-padding autocomplete" layout="column">
+  <md-content layout-padding class="autocomplete" layout="column">
 
     <p>Use <code>&lt;md-autocomplete&gt;</code> to build an ordered set of chips.</p>
 

diff --git a/src/components/chips/demoStaticChips/index.html b/src/components/chips/demoStaticChips/index.html
@@ -1,6 +1,6 @@
 <div ng-app="inputBasicDemo" ng-controller="DemoCtrl as ctrl" layout="column">
 
-  <md-content class="md-padding" layout="column">
+  <md-content layout-padding layout="column">
     <p>Display a set of items as chips.</p>
 
     <md-chips>

diff --git a/src/components/content/content.js b/src/components/content/content.js
@@ -23,13 +23,12 @@ angular.module('material.components.content', [
  * @description
  * The `<md-content>` directive is a container element useful for scrollable content
  *
- * ### Restrictions
+ * @usage
  *
- * - Add the `md-padding` class to make the content padded.
+ * - Add the `[layout-padding]` attribute to make the content padded.
  *
- * @usage
  * <hljs lang="html">
- *  <md-content class="md-padding">
+ *  <md-content layout-padding>
  *      Lorem ipsum dolor sit amet, ne quod novum mei.
  *  </md-content>
  * </hljs>

diff --git a/src/components/content/content.scss b/src/components/content/content.scss
@@ -15,14 +15,5 @@ md-content {
   }
   &[md-scroll-xy] {
   }
-
-  &.md-padding {
-    padding: 8px;
-  }
 }
 
-@media (min-width: $layout-breakpoint-sm) {
-  md-content.md-padding {
-    padding: 16px;
-  }
-}
diff --git a/src/components/content/demoBasicUsage/index.html b/src/components/content/demoBasicUsage/index.html
@@ -6,7 +6,7 @@ <h2 class="md-flex">Toolbar: md-warn</h2>
     </div>
   </md-toolbar>
 
-  <md-content class="md-padding" style="height: 600px;padding: 24px;">
+  <md-content layout-padding style="height: 600px;padding: 24px;">
     <p>Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare, cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.</p>
 
     <p>

diff --git a/src/components/gridList/demoResponsiveUsage/index.html b/src/components/gridList/demoResponsiveUsage/index.html
@@ -1,5 +1,5 @@
 <div ng-controller="AppCtrl as appCtrl">
-  <md-content class="md-padding">
+  <md-content layout-padding>
     <md-grid-list
         md-cols-gt-md="12" md-cols-sm="3" md-cols-md="8"
         md-row-height-gt-md="1:1" md-row-height="4:3"

diff --git a/src/components/input/demoBasicUsage/index.html b/src/components/input/demoBasicUsage/index.html
@@ -1,6 +1,6 @@
 <div ng-app="inputBasicDemo" ng-controller="DemoCtrl" layout="column">
 
-  <md-content md-theme="docs-dark" class="md-padding" layout="row" layout-sm="column">
+  <md-content md-theme="docs-dark" layout-padding layout="row" layout-sm="column">
     <md-input-container>
       <label>Title</label>
       <input ng-model="user.title">
@@ -11,7 +11,7 @@
     </md-input-container>
   </md-content>
 
-  <md-content class="md-padding">
+  <md-content layout-padding>
     <form name="userForm">
 
       <div layout layout-sm="column">

diff --git a/src/components/input/demoErrors/index.html b/src/components/input/demoErrors/index.html
@@ -6,7 +6,7 @@ <h1 class="md-toolbar-tools">
     </h1>
   </md-toolbar>
 
-  <md-content class="md-padding">
+  <md-content layout-padding>
     <form name="projectForm">
       <md-input-container>
         <label>Description</label>

diff --git a/src/components/input/demoIcons/index.html b/src/components/input/demoIcons/index.html
@@ -1,7 +1,7 @@
 <div ng-app="inputIconDemo" ng-controller="DemoCtrl" layout="column">
 
   <br/>
-  <md-content class="md-padding">
+  <md-content layout-padding>
     <md-input-container md-no-float>
       <md-icon md-svg-src="/demo-partials/input/demoIcons/icons/ic_person_24px.svg" class="name"></md-icon>
       <input ng-model="user.name" type="text" placeholder="Name">

diff --git a/src/components/sidenav/demoBasicUsage/index.html b/src/components/sidenav/demoBasicUsage/index.html
@@ -8,7 +8,7 @@
       <md-toolbar class="md-theme-indigo">
         <h1 class="md-toolbar-tools">Sidenav Left</h1>
       </md-toolbar>
-      <md-content class="md-padding" ng-controller="LeftCtrl">
+      <md-content layout-padding ng-controller="LeftCtrl">
         <md-button ng-click="close()" class="md-primary" hide-gt-md>
           Close Sidenav Left
         </md-button>
@@ -20,7 +20,7 @@ <h1 class="md-toolbar-tools">Sidenav Left</h1>
 
     </md-sidenav>
 
-    <md-content flex class="md-padding">
+    <md-content flex layout-padding>
 
       <div layout="column" layout-fill layout-align="top center">
         <p>
@@ -54,7 +54,7 @@ <h1 class="md-toolbar-tools">Sidenav Left</h1>
       <md-toolbar class="md-theme-light">
         <h1 class="md-toolbar-tools">Sidenav Right</h1>
       </md-toolbar>
-      <md-content ng-controller="RightCtrl" class="md-padding">
+      <md-content ng-controller="RightCtrl" layout-padding>
         <form>
           <md-input-container>
             <label for="testInput">Test input</label>

diff --git a/src/components/slider/demoBasicUsage/index.html b/src/components/slider/demoBasicUsage/index.html
@@ -1,14 +1,14 @@
 
 <div ng-controller="AppCtrl">
-  <md-content class="md-padding">
+  <md-content style="margin: 16px; padding:16px">
 
     <h3>
       RGB <span ng-attr-style="border: 1px solid #333; background: rgb({{color.red}},{{color.green}},{{color.blue}})">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
     </h3>
 
     <div layout>
       <div flex="10" layout layout-align="center center">
-        <span>R</span>
+        <span class="md-body-1">R</span>
       </div>
       <md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" class="">
       </md-slider>
@@ -19,7 +19,7 @@ <h3>
 
     <div layout>
       <div flex="10" layout layout-align="center center">
-        <span>G</span>
+        <span class="md-body-1">G</span>
       </div>
       <md-slider flex ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider" class="md-accent">
       </md-slider>
@@ -30,7 +30,7 @@ <h3>
 
     <div layout>
       <div flex="10" layout layout-align="center center">
-        <span>B</span>
+        <span class="md-body-1">B</span>
       </div>
       <md-slider flex ng-model="color.blue" min="0" max="255" aria-label="blue" id="blue-slider" class="md-primary">
       </md-slider>
@@ -42,21 +42,21 @@ <h3>
     <h3>Rating: {{rating}}/5 - demo of theming classes</h3>
     <div layout>
       <div flex="10" layout layout-align="center center">
-        <span>default</span>
+        <span class="md-body-1">default</span>
       </div>
       <md-slider flex md-discrete ng-model="rating1" step="1" min="1" max="5" aria-label="rating">
       </md-slider>
     </div>
     <div layout>
       <div flex="10" layout layout-align="center center">
-        <span>md-warn</span>
+        <span class="md-body-1">md-warn</span>
       </div>
       <md-slider flex class="md-warn" md-discrete ng-model="rating2" step="1" min="1" max="5" aria-label="rating">
       </md-slider>
     </div>
     <div layout>
       <div flex="10" layout layout-align="center center">
-        <span>md-primary</span>
+        <span class="md-body-1">md-primary</span>
       </div>
       <md-slider flex class="md-primary" md-discrete ng-model="rating3" step="1" min="1" max="5" aria-label="rating">
       </md-slider>

diff --git a/src/components/subheader/demoBasicUsage/index.html b/src/components/subheader/demoBasicUsage/index.html
@@ -3,78 +3,62 @@
   <md-content style="height: 600px;">
     <section>
       <md-subheader class="md-primary">Unread Messages</md-subheader>
-      <md-list layout="column">
-        <md-item ng-repeat="message in messages">
-          <md-item-content>
-            <div class="md-tile-left">
-                <img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
-            </div>
-            <div class="md-tile-content">
+      <md-list layout-padding>
+        <md-list-item class="md-3-line" ng-repeat="message in messages">
+            <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
+            <div class="md-list-item-text">
               <h3>{{message.what}}</h3>
               <h4>{{message.who}}</h4>
               <p>
                 {{message.notes}}
               </p>
             </div>
-          </md-item-content>
-        </md-item>
+        </md-list-item>
       </md-list>
     </section>
     <section>
       <md-subheader class="md-warn">Late Messages</md-subheader>
-      <md-list layout="column">
-        <md-item ng-repeat="message in messages">
-          <md-item-content>
-            <div class="md-tile-left">
-                <img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
-            </div>
-            <div class="md-tile-content">
-              <h3>{{message.what}}</h3>
-              <h4>{{message.who}}</h4>
-              <p>
-                {{message.notes}}
-              </p>
-            </div>
-          </md-item-content>
-        </md-item>
+      <md-list layout="column" layout-padding>
+        <md-list-item class="md-3-line" ng-repeat="message in messages">
+          <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
+          <div class="md-list-item-text">
+            <h3>{{message.what}}</h3>
+            <h4>{{message.who}}</h4>
+            <p>
+              {{message.notes}}
+            </p>
+          </div>
+        </md-list-item>
       </md-list>
     </section>
     <section>
       <md-subheader>Read Messages</md-subheader>
-      <md-list layout="column">
-        <md-item ng-repeat="message in messages">
-          <md-item-content>
-            <div class="md-tile-left">
-                <img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
-            </div>
-            <div class="md-tile-content">
-              <h3>{{message.what}}</h3>
-              <h4>{{message.who}}</h4>
-              <p>
-                {{message.notes}}
-              </p>
-            </div>
-          </md-item-content>
-        </md-item>
+      <md-list layout="column" layout-padding>
+        <md-list-item class="md-3-line" ng-repeat="message in messages">
+          <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
+          <div class="md-list-item-text">
+            <h3>{{message.what}}</h3>
+            <h4>{{message.who}}</h4>
+            <p>
+              {{message.notes}}
+            </p>
+          </div>
+        </md-list-item>
       </md-list>
     </section>
     <section>
       <md-subheader class="md-accent">Archived messages</md-subheader>
-      <md-list layout="column">
-        <md-item ng-repeat="message in messages">
-          <md-item-content>
-            <div class="md-tile-left">
-                <img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
-            </div>
-            <div class="md-tile-content">
-              <h3>{{message.what}}</h3>
-              <h4>{{message.who}}</h4>
-              <p>
-                {{message.notes}}
-              </p>
-            </div>
-          </md-item-content>
-        </md-item>
+      <md-list layout="column" layout-padding>
+        <md-list-item class="md-3-line" ng-repeat="message in messages">
+          <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
+          <div class="md-list-item-text">
+            <h3>{{message.what}}</h3>
+            <h4>{{message.who}}</h4>
+            <p>
+              {{message.notes}}
+            </p>
+          </div>
+        </md-list-item>
       </md-list>
     </section>
   </md-content>

diff --git a/src/components/toolbar/demoScrollShrink/index.html b/src/components/toolbar/demoScrollShrink/index.html
@@ -12,21 +12,17 @@ <h3>
 
     <md-list>
 
-      <md-item ng-repeat="item in todos">
-        <md-item-content>
-          <div class="md-tile-left">
-            <img ng-src="{{item.face}}" alt="{{item.who}}" class="face">
-          </div>
-          <div class="md-tile-content">
-            <h3>{{item.what}}</h3>
-            <h4>{{item.who}}</h4>
-            <p>
-              {{item.notes}}
-            </p>
-          </div>
-        </md-item-content>
+      <md-list-item class="md-3-line" ng-repeat="item in todos">
+        <img ng-src="{{item.face}}" alt="{{item.who}}" class="md-avatar">
+        <div class="md-tile-content">
+          <h3>{{item.what}}</h3>
+          <h4>{{item.who}}</h4>
+          <p>
+            {{item.notes}}
+          </p>
+        </div>
         <md-divider inset></md-divider>
-      </md-item>
+      </md-list-item>
 
     </md-list>
 

diff --git a/src/components/tooltip/demoBasicUsage/index.html b/src/components/tooltip/demoBasicUsage/index.html
@@ -12,7 +12,7 @@ <h2 class="md-toolbar-tools">
       </md-button>
     </h2>
   </md-toolbar>
-  <md-content class="md-padding">
+  <md-content layout-padding>
 
     <p>
       The tooltip is visible when the button is hovered, focused, or touched.