fix(list): fixes line-height issues with list items and checkboxes/ic…

…ons/switches
angular · Apr 27, 2015 · 4b045b5 · 4b045b5
1 parent 5e39ca3
commit 4b045b5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 18 deletions.
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
@@ -16,6 +16,8 @@ md-checkbox {
   padding-left: $checkbox-width;
   position: relative;
   line-height: $checkbox-width + $checkbox-margin;
+  min-width: $checkbox-width;
+  min-height: $checkbox-width;
 
   *,
   *:before,

diff --git a/src/components/list/demoListControls/index.html b/src/components/list/demoListControls/index.html
@@ -1,10 +1,12 @@
 <md-list ng-controller="ListCtrl">
   <md-subheader class="md-no-sticky">Single Action Checkboxes</md-subheader>
-  <md-list-item ng-repeat="topping in toppings" style="height: 48px;">
+  <md-list-item ng-repeat="topping in toppings">
     <p> {{ topping.name }} </p>
     <md-checkbox class="md-secondary" ng-model="topping.wanted"></md-checkbox>
   </md-list-item>
+
   <md-divider></md-divider>
+
   <md-subheader class="md-no-sticky">Clickable Items with Secondary Controls</md-subheader>
   <md-list-item ng-click="navigateTo(setting.extraScreen, $event)" ng-repeat="setting in settings">
     <md-icon md-svg-icon="{{setting.icon}}"></md-icon>
@@ -15,14 +17,18 @@
     <md-icon md-svg-icon="cached"></md-icon>
     <p>Data Usage</p>
   </md-list-item>
+
   <md-divider></md-divider>
+
   <md-subheader class="md-no-sticky">Checkbox with Secondary Action</md-subheader>
-  <md-list-item ng-repeat="message in messages" style="height: 48px;">
+  <md-list-item ng-repeat="message in messages">
     <md-checkbox ng-model="message.selected"></md-checkbox>
     <p>{{message.title}}</p>
     <md-icon class="md-secondary" ng-click="doSecondaryAction($event)" aria-label="Chat" md-svg-icon="communication:message"></md-icon>
   </md-list-item>
+
   <md-divider></md-divider>
+
   <md-subheader class="md-no-sticky">Avatar with Secondary Action Icon</md-subheader>
   <md-list-item ng-repeat="person in people" ng-click="goToPerson(person.name, $event)">
     <img alt="{{ person.name }}" ng-src="{{ person.img }}" class="md-avatar" />

diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -79,7 +79,7 @@ md-list-item, md-list-item .md-list-item-inner {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-
+  min-height: 48px;
 
   // Layout for controls in primary or secondary divs, or auto-infered first child
   & > div.md-primary > md-icon,
@@ -90,27 +90,13 @@ md-list-item, md-list-item .md-list-item-inner {
     margin-top: 12px;
     margin-bottom: 12px;
     box-sizing: content-box;
-    &:focus {
-      border-radius: 2px;
-      outline: none;
-      padding: 6px;
-      margin-top: 6px;
-      margin-bottom: 6px;
-      margin-right: -6px;
-    }
   }
   & > div.md-primary > md-checkbox,
   & > div.md-secondary > md-checkbox,
   & > md-checkbox:first-child,
   md-checkbox.md-secondary {
     align-self: center;
     .md-label { display: none; }
-    &:not(:first-child):focus {
-      padding: 6px;
-      margin-right: -6px;
-      margin-top: 8px;
-      margin-bottom: 6px;
-    }
   }
 
   & > md-icon:first-child {
@@ -134,6 +120,8 @@ md-list-item, md-list-item .md-list-item-inner {
   md-checkbox.md-secondary,
   md-switch.md-secondary {
     margin-right: 0;
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
   button.md-button.md-secondary-container {
@@ -153,7 +141,8 @@ md-list-item, md-list-item .md-list-item-inner {
     margin-left: $list-item-secondary-left-margin;
     position: absolute;
     right: $list-item-padding-horizontal;
-    top: 0;
+    top: 50%;
+    transform: translate3d(0, -50%, 0);
   }
 
   & > .md-button.md-secondary-container > .md-secondary {