WIP: Squashed commit of the following:

commit cc107d7 Merge: 5eae605 da34cc9 Author: Andy Dvorak <advorak@google.com> Date: Thu Jan 11 17:37:51 2018 -0800 Merge branch 'master' into feat/demos/ready-all # Conflicts: # demos/button.html # demos/checkbox.html # demos/dialog.html # demos/drawer/persistent-drawer.html # demos/drawer/temporary-drawer.html # demos/fab.html # demos/grid-list.html # demos/icon-toggle.html # demos/linear-progress.html # demos/list.html # demos/radio.html # demos/ready.js # demos/ripple.html # demos/select.html # demos/simple-menu.html # demos/slider.html # demos/snackbar.html # demos/tabs.html # demos/text-field.html # demos/theme/index.html # demos/toolbar/default-flexible-toolbar.html # demos/toolbar/menu-toolbar.html # demos/toolbar/waterfall-flexible-toolbar-custom-style.html # demos/toolbar/waterfall-flexible-toolbar.html # demos/toolbar/waterfall-toolbar-fix-last-row.html # demos/toolbar/waterfall-toolbar.html commit da34cc9 Author: Andrew C. Dvorak <acdvorak@gmail.com> Date: Thu Jan 11 17:09:46 2018 -0800 feat(demos): Add global `demoReady()` function (#1919) For this PR, I only updated the button demo page to use the new `demoReady()` function. #1920 updates the remaining demo pages. Also note that our packaged JS is now being loaded with `async`, which speeds up initial rendering time over slow connections. Using "Mid-tier mobile" network emulation in Chrome devtools, the [TTFMP](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint) of the button demo page was reduced from ~10.5s to ~9.5s, and the time to render the Material icon font dropped from ~12s to ~10.5s. commit aeed3bd Author: Andrew C. Dvorak <acdvorak@gmail.com> Date: Thu Jan 11 16:18:24 2018 -0800 docs: Remove broken link from team README (#1940) Fixes #1929 commit ffff10c Author: Lynn Jepsen <lynnjepsen@google.com> Date: Thu Jan 11 15:47:46 2018 -0800 style(checkbox): Sort CSS so there is no descending specificity (#1939) commit 6b1cabb Author: Lynn Jepsen <lynnjepsen@google.com> Date: Thu Jan 11 13:34:51 2018 -0800 style(snackbar): Sort CSS so there is no descending specificity (#1936) commit fd0c675 Author: Lynn Jepsen <lynnjepsen@google.com> Date: Thu Jan 11 13:32:57 2018 -0800 fix(dialog): Remove code that does nothing (#1935) commit 3e5f6e0 Author: Lynn Jepsen <lynnjepsen@google.com> Date: Thu Jan 11 13:06:46 2018 -0800 fix(list): Fix the height of the dense avatar list (#1905) commit 2267e0f Author: Lynn Jepsen <lynnjepsen@google.com> Date: Thu Jan 11 12:15:15 2018 -0800 style(list): Sort CSS so there is no descending specificity (#1904) commit 271a05e Author: Lynn Jepsen <lynnjepsen@google.com> Date: Thu Jan 11 12:12:48 2018 -0800 style(grid-list): Sort CSS so there is no descending specificity (#1903) commit 103d9bd Author: Lynn Jepsen <lynnjepsen@google.com> Date: Thu Jan 11 09:38:23 2018 -0800 style(checkbox): Remove confusing nesting (#1874) commit 5eae605 Author: Andy Dvorak <advorak@google.com> Date: Wed Jan 10 10:18:26 2018 -0800 WIP: Remove arrow function for IE 11
material-components · Jan 12, 2018 · de04b7e · de04b7e
1 parent 030b3b2
commit de04b7e
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 126 deletions.
diff --git a/demos/button.html b/demos/button.html
@@ -76,7 +76,6 @@
         left: 36px;
         color: rgba(33, 33, 33, .38);
       }
-
     </style>
   </head>
   <body class="mdc-typography">

diff --git a/demos/theme/index.html b/demos/theme/index.html
@@ -23,6 +23,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="/assets/theme/index.css">
     <script src="/ready.js"></script>
     <script src="/uri.js"></script>
     <script src="/theme-loader.js"></script>

diff --git a/docs/team/README.md b/docs/team/README.md
@@ -2,7 +2,8 @@
 
 MDC Web team members write and review code in this repository.
 They work with other Material Design Engineers (Android and iOS)
-and Designers to [write design docs](http://go/mdc-web-design-docs).
+and Designers to write design docs.
+
 The APIs across Web, Android, and iOS are expected to match, and the final code
 is expected to match [spec](https://material.io/guidelines).
 

diff --git a/packages/mdc-checkbox/mdc-checkbox.scss b/packages/mdc-checkbox/mdc-checkbox.scss
@@ -44,6 +44,22 @@
   @include mdc-checkbox--disabled_;
 }
 
+.mdc-checkbox__background {
+  @include mdc-checkbox__background_;
+}
+
+.mdc-checkbox__checkmark {
+  @include mdc-checkbox__checkmark_;
+}
+
+.mdc-checkbox__checkmark__path {
+  @include mdc-checkbox__checkmark__path_;
+}
+
+.mdc-checkbox__mixedmark {
+  @include mdc-checkbox__mixedmark_;
+}
+
 // JS checkbox
 .mdc-checkbox--upgraded {
   .mdc-checkbox__background,
@@ -58,26 +74,22 @@
   @include mdc-checkbox--anim_;
 }
 
-.mdc-checkbox__background {
-  @include mdc-checkbox__background_;
-
-  .mdc-checkbox__native-control:enabled:checked ~ &,
-  .mdc-checkbox__native-control:enabled:indeterminate ~ & {
-    @include mdc-checkbox__background--marked_;
-  }
+.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
+.mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
+  @include mdc-checkbox__background--marked_;
 }
 
 // The frame's ::before element is used as a focus indicator for the checkbox
 .mdc-checkbox__background::before {
   @include mdc-checkbox__focus-indicator_;
+}
 
-  .mdc-checkbox__native-control:focus ~ & {
-    @include mdc-checkbox__focus-indicator--focused_;
-  }
+.mdc-ripple-upgraded--unbounded .mdc-checkbox__background::before {
+  @include mdc-checkbox__focus-indicator--ripple-upgraded-unbounded_;
+}
 
-  .mdc-ripple-upgraded--unbounded & {
-    @include mdc-checkbox__focus-indicator--ripple-upgraded-unbounded_;
-  }
+.mdc-checkbox__native-control:focus ~ .mdc-checkbox__background::before {
+  @include mdc-checkbox__focus-indicator--focused_;
 }
 
 .mdc-checkbox__native-control {
@@ -88,37 +100,25 @@
   }
 }
 
-.mdc-checkbox__checkmark {
-  @include mdc-checkbox__checkmark_;
-
-  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background & {
-    @include mdc-checkbox__checkmark--checked_;
-  }
-
-  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background & {
-    @include mdc-checkbox__checkmark--indeterminate_;
-  }
+.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
+  @include mdc-checkbox__checkmark--checked_;
 }
 
-.mdc-checkbox__checkmark__path {
-  @include mdc-checkbox__checkmark__path_;
-
-  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background &,
-  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background & {
-    @include mdc-checkbox__checkmark__path--marked_;
-  }
+.mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
+  @include mdc-checkbox__checkmark--indeterminate_;
 }
 
-.mdc-checkbox__mixedmark {
-  @include mdc-checkbox__mixedmark_;
+.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__checkmark__path,
+.mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__checkmark__path {
+  @include mdc-checkbox__checkmark__path--marked_;
+}
 
-  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background & {
-    @include mdc-checkbox__mixedmark--checked_;
-  }
+.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {
+  @include mdc-checkbox__mixedmark--checked_;
+}
 
-  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background & {
-    @include mdc-checkbox__mixedmark--indeterminate_;
-  }
+.mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {
+  @include mdc-checkbox__mixedmark--indeterminate_;
 }
 
 // postcss-bem-linter: end
diff --git a/packages/mdc-dialog/mdc-dialog.scss b/packages/mdc-dialog/mdc-dialog.scss
@@ -165,10 +165,6 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
     transition: mdc-animation-enter(opacity, 120ms);
   }
 
-  .mdc-dialog--open .mdc-dialog__surface {
-    transition: mdc-animation-enter(opacity, 120ms), mdc-animation-enter(transform, 120ms);
-  }
-
   .mdc-dialog__surface {
     transition: mdc-animation-enter(opacity, 120ms), mdc-animation-enter(transform, 120ms);
   }

diff --git a/packages/mdc-grid-list/mdc-grid-list.scss b/packages/mdc-grid-list/mdc-grid-list.scss
@@ -83,42 +83,6 @@ $mdc-grid-list-tile-secondary-icon-size: 24px;
 .mdc-grid-list--tile-aspect-3x4 {
   @include mdc-grid-list-tile-aspect(3 / 4);
 }
-
-// stylelint-disable plugin/selector-bem-pattern
-// We need to disable linter here because we are nesting grid-tile under grid list here.
-.mdc-grid-list--twoline-caption .mdc-grid-tile__secondary {
-  height: $mdc-grid-list-twoline-cap-secondary-height;
-}
-
-.mdc-grid-list--header-caption .mdc-grid-tile__secondary {
-  top: 0;
-  bottom: auto;
-}
-
-.mdc-grid-list--with-icon-align-start {
-  .mdc-grid-tile__secondary {
-    @include mdc-rtl-reflexive-property(padding, $mdc-grid-list-tile-secondary-padding * 2 + $mdc-grid-list-tile-secondary-icon-size, $mdc-grid-list-tile-secondary-padding-narrow, ".mdc-grid-list");
-  }
-
-  .mdc-grid-tile__icon {
-    @include mdc-rtl-reflexive-position(left, $mdc-grid-list-tile-secondary-padding, ".mdc-grid-list");
-
-    font-size: $mdc-grid-list-tile-secondary-icon-size;
-  }
-}
-
-.mdc-grid-list--with-icon-align-end {
-  .mdc-grid-tile__secondary {
-    @include mdc-rtl-reflexive-property(padding, $mdc-grid-list-tile-secondary-padding, $mdc-grid-list-tile-secondary-padding * 2 + $mdc-grid-list-tile-secondary-icon-size, ".mdc-grid-list");
-  }
-
-  .mdc-grid-tile__icon {
-    @include mdc-rtl-reflexive-position(right, $mdc-grid-list-tile-secondary-padding, ".mdc-grid-list");
-
-    font-size: $mdc-grid-list-tile-secondary-icon-size;
-  }
-}
-// stylelint-enable plugin/selector-bem-pattern
 // postcss-bem-linter: end
 
 // postcss-bem-linter: define grid-tile
@@ -189,4 +153,40 @@ $mdc-grid-list-tile-secondary-icon-size: 24px;
   top: calc(50% - #{$mdc-grid-list-tile-secondary-icon-size} / 2);
   font-size: 0;
 }
+
+// stylelint-disable plugin/selector-bem-pattern
+// Linter disabled because we are nesting grid-tile under grid-list.
+.mdc-grid-list--twoline-caption .mdc-grid-tile__secondary {
+  height: $mdc-grid-list-twoline-cap-secondary-height;
+}
+
+.mdc-grid-list--header-caption .mdc-grid-tile__secondary {
+  top: 0;
+  bottom: auto;
+}
+
+.mdc-grid-list--with-icon-align-start {
+  .mdc-grid-tile__secondary {
+    @include mdc-rtl-reflexive-property(padding, $mdc-grid-list-tile-secondary-padding * 2 + $mdc-grid-list-tile-secondary-icon-size, $mdc-grid-list-tile-secondary-padding-narrow, ".mdc-grid-list");
+  }
+
+  .mdc-grid-tile__icon {
+    @include mdc-rtl-reflexive-position(left, $mdc-grid-list-tile-secondary-padding, ".mdc-grid-list");
+
+    font-size: $mdc-grid-list-tile-secondary-icon-size;
+  }
+}
+
+.mdc-grid-list--with-icon-align-end {
+  .mdc-grid-tile__secondary {
+    @include mdc-rtl-reflexive-property(padding, $mdc-grid-list-tile-secondary-padding, $mdc-grid-list-tile-secondary-padding * 2 + $mdc-grid-list-tile-secondary-icon-size, ".mdc-grid-list");
+  }
+
+  .mdc-grid-tile__icon {
+    @include mdc-rtl-reflexive-position(right, $mdc-grid-list-tile-secondary-padding, ".mdc-grid-list");
+
+    font-size: $mdc-grid-list-tile-secondary-icon-size;
+  }
+}
+// stylelint-enable plugin/selector-bem-pattern
 // postcss-bem-linter: end
diff --git a/packages/mdc-list/mdc-list.scss b/packages/mdc-list/mdc-list.scss
@@ -71,10 +71,16 @@
   @include mdc-typography-overflow-ellipsis;
 
   display: flex;
+  position: relative;
   align-items: center;
   justify-content: flex-start;
   height: 48px;
   padding: 0 $mdc-list-side-padding;
+  overflow: hidden;
+
+  &:focus {
+    outline: none;
+  }
 }
 
 // "Selected" is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.
@@ -132,11 +138,27 @@
   border-radius: 50%;
 }
 
-.mdc-list--avatar-list.mdc-list--dense .mdc-list__item {
+// List items should support states by default, but it should be possible to opt out.
+// Direct child combinator is necessary for non-interactive modifier on parent to not match this selector.
+:not(.mdc-list--non-interactive) > .mdc-list-item {
+  @include mdc-ripple-surface;
+  @include mdc-ripple-radius;
+  @include mdc-states;
+  @include mdc-states-activated(primary);
+  @include mdc-states-selected(primary);
+
+  @include mdc-theme-dark(".mdc-list") {
+    @include mdc-states(white);
+    @include mdc-states-activated(primary);
+    @include mdc-states-selected(primary);
+  }
+}
+
+.mdc-list--avatar-list.mdc-list--dense .mdc-list-item {
   height: 48px;
 }
 
-.mdc-list--avatar-list.mdc-list--dense .mdc-list__item__graphic {
+.mdc-list--avatar-list.mdc-list--dense .mdc-list-item__graphic {
   @include mdc-list-graphic-size_(36px);
 }
 
@@ -157,31 +179,6 @@ a.mdc-list-item {
 }
 // stylelint-enable selector-max-type,selector-no-qualifying-type
 
-.mdc-list-item {
-  position: relative;
-  overflow: hidden;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-// List items should support states by default, but it should be possible to opt out.
-// Direct child combinator is necessary for non-interactive modifier on parent to not match this selector.
-:not(.mdc-list--non-interactive) > .mdc-list-item {
-  @include mdc-ripple-surface;
-  @include mdc-ripple-radius;
-  @include mdc-states;
-  @include mdc-states-activated(primary);
-  @include mdc-states-selected(primary);
-
-  @include mdc-theme-dark(".mdc-list") {
-    @include mdc-states(white);
-    @include mdc-states-activated(primary);
-    @include mdc-states-selected(primary);
-  }
-}
-
 // postcss-bem-linter: define list-divider
 
 .mdc-list-divider {

diff --git a/packages/mdc-snackbar/mdc-snackbar.scss b/packages/mdc-snackbar/mdc-snackbar.scss
@@ -95,19 +95,6 @@
   flex-direction: column;
 }
 
-.mdc-snackbar--action-on-bottom .mdc-snackbar__text {
-  margin-right: inherit;
-}
-
-.mdc-snackbar--action-on-bottom .mdc-snackbar__action-wrapper {
-  @include mdc-rtl-reflexive-box(margin, left, auto);
-
-  flex-direction: column;
-  justify-content: flex-start;
-  margin-top: -12px;
-  margin-bottom: 8px;
-}
-
 .mdc-snackbar__text {
   @include mdc-typography(body1);
   @include mdc-rtl-reflexive-box(margin, right, auto, ".mdc-snackbar");
@@ -128,15 +115,22 @@
   }
 }
 
-.mdc-snackbar--multiline .mdc-snackbar__text {
-  height: 80px;
+.mdc-snackbar--action-on-bottom .mdc-snackbar__text {
+  margin-right: inherit;
 }
 
-/* stylelint-disable plugin/selector-bem-pattern */
-.mdc-snackbar--multiline.mdc-snackbar--action-on-bottom .mdc-snackbar__text {
-  margin: 0;
+.mdc-snackbar--action-on-bottom .mdc-snackbar__action-wrapper {
+  @include mdc-rtl-reflexive-box(margin, left, auto);
+
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-top: -12px;
+  margin-bottom: 8px;
+}
+
+.mdc-snackbar--multiline .mdc-snackbar__text {
+  height: 80px;
 }
-/* stylelint-enable plugin/selector-bem-pattern */
 
 .mdc-snackbar__action-button {
   @include mdc-typography(button);
@@ -175,4 +169,10 @@
   opacity: 1;
 }
 
+/* stylelint-disable plugin/selector-bem-pattern */
+.mdc-snackbar--multiline.mdc-snackbar--action-on-bottom .mdc-snackbar__text {
+  margin: 0;
+}
+/* stylelint-enable plugin/selector-bem-pattern */
+
 /* postcss-bem-linter: end */