refactor(list): simplify list component scss

* Simplifies the List components SCSS * Fixes Dense Mode for List and introduces super elegant approach * Make SCSS more modular by having a base and dynamic variables * Remove unnecessary DOM node level for button wrap. * No longer wrap proxied elements inside of buttons * Multiple Secondary Items should align properly and have consistent spacing. * Dense Mode should not cut characaters on different environments. Fixes angular#6152. Fixes angular#8890 References angular#8482.
devversion · Jul 31, 2016 · 77ff050 · 77ff050
1 parent 1eb1037
commit 77ff050
Show file tree

Hide file tree

Showing 6 changed files with 450 additions and 434 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/list-base.scss b/src/components/list/list-base.scss
@@ -0,0 +1,300 @@
+/** External component calculations */
+$md-checkbox-width: 3 * $baseline-grid !default;
+//TODO(devversion): use shared variable from buttons.scss
+$md-button-spacing: $button-left-right-padding + rem(0.800) !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);
+  }
+}
+
+/** 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%;
+    @include rtl-prop(margin-left, margin-right, 0);
+  }
+
+  .md-avatar {
+    width: $_list-avatar-width;
+    height: $_list-avatar-width;
+    @include rtl-prop(margin-right, margin-left, $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-prop(margin-right, margin-left, $md-list-item-indention - $avatar-icon-width);
+  }
+
+  > md-icon:first-child:not(.md-avatar-icon) {
+    @include md-icon-size($_list-icon-width);
+    @include rtl-prop(margin-right, margin-left, $md-list-item-indention - $_list-icon-width);
+  }
+
+  md-checkbox {
+    width: $md-checkbox-width;
+  }
+
+  > md-checkbox:first-child {
+    @include rtl-prop(margin-right, margin-left, $md-list-item-indention - $md-checkbox-width);
+  }
+
+  .md-button:last-of-type {
+    @include rtl-prop(margin-right, margin-left, 0px);
+  }
+
+  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);
+      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);
+    }
+
+    &.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;
+
+    /** Move Container to the End */
+    margin: auto;
+    @include rtl(margin-right, 0, auto);
+    @include rtl(margin-left, auto, 0);
+
+    // md-checkbox should have same spacing as other secondary buttons.
+    md-checkbox:not(:last-child) {
+      @include rtl-prop(margin-right, margin-left, $md-button-spacing);
+    }
+  }
+
+  @include md-button-wrap();
+  @include md-reset-checkbox();
+  @include md-reset-switch();
+  @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
+    );
+  }
+
+}