refactor(list): simplify list component scss (#9194)

Fixes #6152. Fixes #8890. References #8482.
angular · Jan 4, 2017 · 085c5fd · 085c5fd
1 parent 54a1d0d
commit 085c5fd
Show file tree

Hide file tree

Showing 7 changed files with 546 additions and 528 deletions.
diff --git a/src/components/list/demoBasicUsage/index.html b/src/components/list/demoBasicUsage/index.html
@@ -54,11 +54,11 @@ <h3>{{ todos[1].who }}</h3>
         </md-list-item>
         <md-divider ></md-divider>
         <md-subheader class="md-no-sticky">Classes</md-subheader>
-        <md-list-item class="md-2-line" ng-repeat="phone in phones">
+        <md-list-item class="md-2-line" ng-repeat="phone in phones" ng-class="{'md-offset': phone.options.offset }">
           <md-icon md-svg-icon="{{phone.options.icon}}" ng-if="phone.options.icon" ng-class="{'md-avatar-icon': phone.options.avatarIcon}"></md-icon>
           <img ng-src="{{phone.options.face}}?25" class="md-avatar" alt="{{phone.options.face}}"
                ng-if="phone.options.face"/>
-          <div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
+          <div class="md-list-item-text">
             <h3> {{ phone.number }} </h3>
             <p> {{ phone.type }} </p>
           </div>
@@ -127,11 +127,11 @@ <h3>{{ todos[1].who }}</h3>
         </md-list-item>
         <md-divider ></md-divider>
         <md-subheader class="md-no-sticky">Classes</md-subheader>
-        <md-list-item class="md-2-line" ng-repeat="phone in phones">
+        <md-list-item class="md-2-line" ng-repeat="phone in phones" ng-class="{'md-offset': phone.options.offset }">
           <md-icon md-svg-icon="{{phone.options.icon}}" ng-if="phone.options.icon" ng-class="{'md-avatar-icon': phone.options.avatarIcon}"></md-icon>
           <img ng-src="{{phone.options.face}}?25" class="md-avatar" alt="{{phone.options.face}}"
                ng-if="phone.options.face"/>
-          <div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
+          <div class="md-list-item-text">
             <h3> {{ phone.number }} </h3>
             <p> {{ phone.type }} </p>
           </div>

diff --git a/src/components/list/demoListControls/style.css b/src/components/list/demoListControls/style.css
@@ -1,17 +1,16 @@
 md-divider {
-    margin-top: 0;
-    margin-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 md-list {
-    padding-top:0;
+  padding-top: 0;
 }
-md-list-item > p,
-md-list-item > .md-list-item-inner > p,
-md-list-item .md-list-item-inner > p,
-md-list-item .md-list-item-inner > .md-list-item-inner > p {
-    -webkit-user-select: none; /* Chrome all / Safari all */
-    -moz-user-select: none; /* Firefox all */
-    -ms-user-select: none; /* IE 10+ */
-    user-select: none; /* Likely future */
+
+md-list-item.md-list-item-content > p,
+md-list-item .md-list-item-content > p {
+  -webkit-user-select: none; /* Chrome all / Safari all */
+  -moz-user-select: none; /* Firefox all */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Likely future */
 }
diff --git a/src/components/list/list-base.scss b/src/components/list/list-base.scss
@@ -0,0 +1,317 @@
+/** External component calculations */
+$md-checkbox-width: 3 * $baseline-grid !default;
+$md-button-margin: rem(0.800) !default;
+$md-button-spacing: $button-left-right-padding + $md-button-margin !default;
+
+/** Static List Item Variables */
+$md-list-item-indention: $baseline-grid * 7 !default;
+$md-list-item-padding: $baseline-grid * 2 !default;
+$md-list-item-h3-margin: 0 0 0px 0 !default;
+$md-list-item-h4-margin: 3px 0 1px 0 !default;
+$md-list-item-h4-font-weight: 400 !default;
+$md-list-item-p-margin: 0 0 0 0 !default;
+$md-list-item-subheader-height: 6 * $baseline-grid !default;
+
+/** Resets the checkbox component */
+@mixin md-reset-checkbox() {
+  md-checkbox {
+    align-self: center;
+    margin: 0;
+
+    .md-label {
+      display: none;
+    }
+  }
+}
+
+/** Resets the switch component to properly align */
+@mixin md-reset-switch() {
+  md-switch {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    @include rtl-prop(margin-right, margin-left, -6px, 0);
+  }
+}
+
+/** Reset browsers default paragraph styles */
+@mixin md-reset-paragraph() {
+  p {
+    margin: 0;
+    flex: 1;
+  }
+}
+
+/** Reset default md-button behavior like uppercase and text alignment */
+@mixin md-reset-button() {
+  &.md-button {
+    font-size: inherit;
+    text-transform: none;
+
+    @include rtl(text-align, left, right);
+
+    &, > .md-ripple-container {
+      border-radius: 0;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
+/** Mixin to overwrite the size of an md-icon element */
+@mixin md-icon-size($icon-size) {
+  min-width: $icon-size;
+  min-height: $icon-size;
+  height: $icon-size;
+  width: $icon-size;
+
+  svg {
+    width: $icon-size;
+    height: $icon-size;
+  }
+}
+
+/** Creates an overlaying button, which will be used to execute the primary action */
+@mixin md-button-wrap() {
+  &.md-button-wrap {
+    position: relative;
+
+    .md-button-wrap-executor {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      height: 100%;
+      width: 100%;
+
+      @include md-reset-button();
+    }
+  }
+}
+
+/**
+ * Mixin to style user specified content inside of the list item.
+ */
+@mixin md-list-item-content($list-icon-width, $list-avatar-width, $list-avatar-padding-dense) {
+
+  .md-avatar, .md-avatar-icon, > md-icon:first-child {
+    box-sizing: content-box;
+    margin-top: $baseline-grid;
+    margin-bottom: $baseline-grid;
+    border-radius: 50%;
+
+    flex-shrink: 0; // Per https://bugs.webkit.org/show_bug.cgi?id=146020
+  }
+
+  .md-avatar {
+    width: $list-avatar-width;
+    height: $list-avatar-width;
+
+    @include rtl(margin-right, $md-list-item-indention - $list-avatar-width, 0);
+    @include rtl(margin-left, 0, $md-list-item-indention - $list-avatar-width);
+  }
+
+  .md-avatar-icon {
+    $avatar-icon-width: $list-icon-width + ($list-avatar-padding-dense * 2);
+    padding: $list-avatar-padding-dense;
+
+    @include md-icon-size($list-icon-width);
+
+    @include rtl(margin-right, $md-list-item-indention - $avatar-icon-width, 0);
+    @include rtl(margin-left, 0, $md-list-item-indention - $avatar-icon-width);
+  }
+
+  /* Primary elements at start of the list item content. */
+  > md-icon:first-child:not(.md-avatar-icon) {
+    @include md-icon-size($list-icon-width);
+
+    @include rtl(margin-right, $md-list-item-indention - $list-icon-width, 0);
+    @include rtl(margin-left, 0, $md-list-item-indention - $list-icon-width);
+  }
+
+  > md-checkbox:first-child {
+    @include rtl(margin-right, $md-list-item-indention - $md-checkbox-width, 0);
+    @include rtl(margin-left, 0, $md-list-item-indention - $md-checkbox-width);
+  }
+
+  md-checkbox {
+    width: $md-checkbox-width;
+  }
+
+  md-divider {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+
+    &[md-inset] {
+      @include rtl-prop(left, right, $md-list-item-indention + $md-list-item-padding, auto);
+      width: calc(100% - #{$md-list-item-indention + $md-list-item-padding});
+      margin: 0 !important;
+    }
+  }
+
+}
+
+/**
+ * Mixin to enable multi-line support in the current list item.
+ */
+@mixin md-list-item-multi-line($list-height-2, $list-height-3, $list-title-font-size,
+                               $list-title-line-height, $list-subtitle-font-size,
+                               $list-subtitle-line-height) {
+
+  &.md-2-line {
+    min-height: $list-height-2;
+    @include ie11-min-height-flexbug($list-height-2);
+  }
+
+  &.md-3-line {
+    min-height: $list-height-3;
+    @include ie11-min-height-flexbug($list-height-3);
+
+    &.md-list-item-content, .md-list-item-content {
+      > md-icon:first-child, > .md-avatar, > .md-avatar-icon {
+        margin-top: $baseline-grid * 2;
+        margin-bottom: auto;
+      }
+    }
+  }
+
+  &.md-3-line, &.md-2-line {
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    &.md-offset {
+      @include rtl-prop(margin-left, margin-right, $md-list-item-indention, 0);
+    }
+
+    &.md-long-text {
+      margin-top: $baseline-grid;
+      margin-bottom: $baseline-grid;
+    }
+
+    &.md-list-item-content, .md-list-item-content {
+
+      h3 {
+        font-size: $list-title-font-size;
+        font-weight: 400;
+        letter-spacing: 0.010em;
+        margin: $md-list-item-h3-margin;
+        line-height: $list-title-line-height;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      h4 {
+        font-size: $list-subtitle-font-size;
+        letter-spacing: 0.010em;
+        margin: $md-list-item-h4-margin;
+        font-weight: $md-list-item-h4-font-weight;
+        line-height: $list-title-line-height;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      p {
+        font-size: $list-subtitle-font-size;
+        font-weight: 500;
+        letter-spacing: 0.010em;
+        margin: $md-list-item-p-margin;
+        line-height: $list-subtitle-line-height;
+      }
+
+    }
+  }
+}
+
+
+/**
+ * Creates the basic md-list with the specific dynamic variables.
+ */
+@mixin md-list($list-font-size, $list-padding-vertical) {
+  display: block;
+  padding: $list-padding-vertical 0;
+  font-size: $list-font-size;
+
+  .md-subheader {
+    font-size: $body-font-size-base;
+    font-weight: 500;
+    letter-spacing: 0.010em;
+    height: $md-list-item-subheader-height;
+  }
+}
+
+/**
+ * Creates the md-list-item styles with the specific dynamic variables.
+ */
+@mixin md-list-item($list-height-base, $list-height-2, $list-height-3, $list-avatar-width,
+                    $list-icon-width, $list-title-font-size, $list-title-line-height,
+                    $list-subtitle-font-size, $list-subtitle-line-height,
+                    $list-avatar-padding-dense) {
+
+  position: relative;
+  display: flex;
+  flex: 1;
+
+  min-height: $list-height-base;
+  @include ie11-min-height-flexbug($list-height-base);
+
+  &.md-clickable {
+    cursor: pointer;
+  }
+
+  .md-secondary-container {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0; // Per https://bugs.webkit.org/show_bug.cgi?id=146020
+
+    /** Move Container to the End */
+    margin: auto;
+    @include rtl(margin-right, 0, auto);
+    @include rtl(margin-left, auto, 0);
+
+    /** Reset component styles */
+    @include md-reset-switch();
+
+    // md-checkbox should have same spacing as other secondary buttons.
+    md-checkbox {
+      margin: 0 $md-button-spacing;
+
+      &:last-child {
+        @include rtl-prop(margin-right, margin-left, 0, $md-button-spacing);
+      }
+    }
+
+    // md-button should not have any margin when being the last secondary item.
+    .md-button:last-child, md-menu:last-child > .md-button {
+      @include rtl-prop(margin-right, margin-left, 0, $md-button-margin);
+    }
+  }
+
+  @include md-button-wrap();
+  @include md-reset-checkbox();
+  @include md-reset-paragraph();
+  @include md-list-item-multi-line(
+      $list-height-2, $list-height-3, $list-title-font-size, $list-title-line-height,
+      $list-subtitle-font-size, $list-subtitle-line-height
+  );
+
+  &.md-list-item-content, .md-list-item-content {
+    /** Vertical Alignment */
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+
+    padding: 0 $md-list-item-padding;
+
+    /** Custom styling for child content */
+    @include md-list-item-content(
+        $list-icon-width, $list-avatar-width, $list-avatar-padding-dense
+    );
+  }
+
+}