docs: fix numerous IE11 layout issues

- most of them have to do with IE11's poor support
  for nested `layout="column"` elements
- remove some unnecessary wrapper `<div>` elements
- remove unused CSS
- fix CSS file with SCSS content
- simplify some CSS and remove some usages of `layout` and `layout-align`

docs/app/css/style.css

@@ -519,14 +519,12 @@ md-tabs.demo-source-tabs .active md-tab-label {
 .small-demo .demo-content {
   min-height: 128px;
 }
-
 .doc-content > * {
   flex: 1 1 auto;
 }
 .demo-content > * {
-  flex: 1 1 0;
+  flex: 1 1 100%;
 }
-
 .demo-content > div[layout-fill] {
   min-height: 448px;
 }

docs/config/template/index.template.html

@@ -151,7 +151,7 @@ <h2 class="md-toolbar-item md-breadcrumb md-headline" tabindex="-1">
 
     </md-toolbar>
 
-    <md-content md-scroll-y layout="column" flex>
+    <md-content md-scroll-y flex>
       <div ng-view layout-padding flex="noshrink" class="docs-ng-view" cache-scroll-position></div>
 
       <div layout="row" flex="noshrink" layout-align="center center">

package.json

@@ -132,4 +132,4 @@
     "node": ">=10",
     "npm": ">=6"
   }
-}
+}

src/components/autocomplete/demoBasicUsage/index.html

@@ -1,4 +1,4 @@
-<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
+<div ng-controller="DemoCtrl as ctrl" ng-cloak>
   <md-content class="md-padding">
     <form ng-submit="$event.preventDefault()">
       <p id="autocompleteDescription">

src/components/autocomplete/demoCustomTemplate/index.html

@@ -1,4 +1,4 @@
-<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
+<div ng-controller="DemoCtrl as ctrl" ng-cloak>
   <md-content layout-padding layout="column">
     <form ng-submit="$event.preventDefault()">
       <p>Use <code>&lt;md-autocomplete&gt;</code> with custom templates to show styled autocomplete results.</p>

src/components/autocomplete/demoFloatingLabel/index.html

@@ -1,4 +1,4 @@
-<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
+<div ng-controller="DemoCtrl as ctrl" ng-cloak>
   <md-content class="md-padding">
     <form ng-submit="$event.preventDefault()" name="searchForm">
       <p>The following example demonstrates floating labels being used as a normal form element.</p>

src/components/autocomplete/demoInsideDialog/index.html

@@ -1,9 +1,8 @@
-<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
+<div ng-controller="DemoCtrl as ctrl" ng-cloak>
   <md-content class="md-padding">
     <p>
       Click the button below to open the dialog with an autocomplete.
     </p>
-
     <md-button ng-click="ctrl.openDialog($event)" class="md-raised">Open Dialog</md-button>
   </md-content>
 </div>

src/components/autocomplete/demoRepeatMode/index.html

@@ -1,103 +1,101 @@
-<div layout="column" ng-cloak>
-  <md-content class="md-padding">
-    <div layout="row" layout-xs="column">
-      <div class="instance-wrapper" flex-gt-xs="50" ng-controller="DemoCtrl as ctrl">
-        <form ng-submit="$event.preventDefault()">
-          <p id="standard-autocomplete-description">
-            Specify the <code>md-mode</code> as <code>standard</code> to fall back to
-            <code>ng-repeat</code> for the autocomplete options. This allows
-            options in the list to have varying heights. Note that large lists in
-            <code>standard</code> mode will have a negative performance impact
-            on your application.
-          </p>
-          <h4>Standard mode</h4>
-          <md-autocomplete
-              id="standard-autocomplete"
-              ng-disabled="ctrl.isDisabled"
-              md-no-cache="ctrl.noCache"
-              md-selected-item="ctrl.selectedItem"
-              md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
-              md-search-text="ctrl.searchText"
-              md-selected-item-change="ctrl.selectedItemChange(item)"
-              md-items="item in ctrl.querySearch(ctrl.searchText)"
-              md-item-text="item.name"
-              md-min-length="0"
-              md-escape-options="clear"
-              input-aria-describedby="standard-autocomplete-description"
-              input-aria-label="Current Repository"
-              placeholder="Pick an Angular repository"
-              md-menu-class="autocomplete-standard-template"
-              md-menu-container-class="standard-container"
-              md-mode="standard">
-            <md-item-template>
-              <span class="item-title">
-                <md-icon md-svg-icon="img/icons/octicon-repo.svg" aria-hidden="true"></md-icon>
-                <span> {{item.name}} </span>
+<md-content class="md-padding" ng-cloak>
+  <div layout="row" layout-xs="column">
+    <div class="instance-wrapper" flex-gt-xs="50" ng-controller="DemoCtrl as ctrl">
+      <form ng-submit="$event.preventDefault()">
+        <p id="standard-autocomplete-description">
+          Specify the <code>md-mode</code> as <code>standard</code> to fall back to
+          <code>ng-repeat</code> for the autocomplete options. This allows
+          options in the list to have varying heights. Note that large lists in
+          <code>standard</code> mode will have a negative performance impact
+          on your application.
+        </p>
+        <h4>Standard mode</h4>
+        <md-autocomplete
+            id="standard-autocomplete"
+            ng-disabled="ctrl.isDisabled"
+            md-no-cache="ctrl.noCache"
+            md-selected-item="ctrl.selectedItem"
+            md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
+            md-search-text="ctrl.searchText"
+            md-selected-item-change="ctrl.selectedItemChange(item)"
+            md-items="item in ctrl.querySearch(ctrl.searchText)"
+            md-item-text="item.name"
+            md-min-length="0"
+            md-escape-options="clear"
+            input-aria-describedby="standard-autocomplete-description"
+            input-aria-label="Current Repository"
+            placeholder="Pick an Angular repository"
+            md-menu-class="autocomplete-standard-template"
+            md-menu-container-class="standard-container"
+            md-mode="standard">
+          <md-item-template>
+            <span class="item-title">
+              <md-icon md-svg-icon="img/icons/octicon-repo.svg" aria-hidden="true"></md-icon>
+              <span> {{item.name}} </span>
+            </span>
+            <p class="item-desc">{{item.desc}}</p>
+            <span class="item-metadata">
+              <span>
+                <strong>{{item.watchers}}</strong> watchers
               </span>
-              <p class="item-desc">{{item.desc}}</p>
-              <span class="item-metadata">
-                <span>
-                  <strong>{{item.watchers}}</strong> watchers
-                </span>
-                <span>
-                  <strong>{{item.forks}}</strong> forks
-                </span>
+              <span>
+                <strong>{{item.forks}}</strong> forks
               </span>
-            </md-item-template>
-          </md-autocomplete>
-        </form>
-      </div>
+            </span>
+          </md-item-template>
+        </md-autocomplete>
+      </form>
+    </div>
 
-      <div class="instance-wrapper" flex-gt-xs="50" ng-controller="DemoCtrl as ctrl">
-        <form ng-submit="$event.preventDefault()">
-          <p id="virtual-autocomplete-description">
-            Omit the <code>md-mode</code> attribute (or specify <code>virtual</code>) to
-            use <code>md-virtual-repeat</code> for the autocomplete options.
-            <a ng-href="api/directive/mdVirtualRepeat">Virtual repeat</a>
-            renders only enough DOM nodes to fill the container, recycling them as the
-            user scrolls. This provides smooth and performant scrolling through large
-            lists of options. Note that all options in a <code>md-virtual-repeat</code>
-            list must have the same height.
-          </p>
-          <h4>Virtual mode</h4>
-          <md-autocomplete
-              id="virtual-autocomplete"
-              ng-disabled="ctrl.isDisabled"
-              md-no-cache="ctrl.noCache"
-              md-selected-item="ctrl.selectedItem"
-              md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
-              md-search-text="ctrl.searchText"
-              md-selected-item-change="ctrl.selectedItemChange(item)"
-              md-items="item in ctrl.querySearch(ctrl.searchText)"
-              md-item-text="item.name"
-              md-min-length="0"
-              md-escape-options="clear"
-              input-aria-describedby="virtual-autocomplete-description"
-              input-aria-label="Current Repository"
-              placeholder="Pick an Angular repository"
-              md-menu-class="autocomplete-virtual-template"
-              md-menu-container-class="virtual-container"
-              md-mode="virtual">
-            <md-item-template>
-              <span class="item-title">
-                <md-icon md-svg-icon="img/icons/octicon-repo.svg" aria-hidden="true"></md-icon>
-                <span> {{item.name}} </span>
+    <div class="instance-wrapper" flex-gt-xs="50" ng-controller="DemoCtrl as ctrl">
+      <form ng-submit="$event.preventDefault()">
+        <p id="virtual-autocomplete-description">
+          Omit the <code>md-mode</code> attribute (or specify <code>virtual</code>) to
+          use <code>md-virtual-repeat</code> for the autocomplete options.
+          <a ng-href="api/directive/mdVirtualRepeat">Virtual repeat</a>
+          renders only enough DOM nodes to fill the container, recycling them as the
+          user scrolls. This provides smooth and performant scrolling through large
+          lists of options. Note that all options in a <code>md-virtual-repeat</code>
+          list must have the same height.
+        </p>
+        <h4>Virtual mode</h4>
+        <md-autocomplete
+            id="virtual-autocomplete"
+            ng-disabled="ctrl.isDisabled"
+            md-no-cache="ctrl.noCache"
+            md-selected-item="ctrl.selectedItem"
+            md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
+            md-search-text="ctrl.searchText"
+            md-selected-item-change="ctrl.selectedItemChange(item)"
+            md-items="item in ctrl.querySearch(ctrl.searchText)"
+            md-item-text="item.name"
+            md-min-length="0"
+            md-escape-options="clear"
+            input-aria-describedby="virtual-autocomplete-description"
+            input-aria-label="Current Repository"
+            placeholder="Pick an Angular repository"
+            md-menu-class="autocomplete-virtual-template"
+            md-menu-container-class="virtual-container"
+            md-mode="virtual">
+          <md-item-template>
+            <span class="item-title">
+              <md-icon md-svg-icon="img/icons/octicon-repo.svg" aria-hidden="true"></md-icon>
+              <span> {{item.name}} </span>
+            </span>
+            <p class="item-desc">
+              {{item.desc | limitTo:40}}{{item.desc.length > 40 ? '...': ''}}
+            </p>
+            <span class="item-metadata">
+              <span>
+                <strong>{{item.watchers}}</strong> watchers
               </span>
-              <p class="item-desc">
-                {{item.desc | limitTo:40}}{{item.desc.length > 40 ? '...': ''}}
-              </p>
-              <span class="item-metadata">
-                <span>
-                  <strong>{{item.watchers}}</strong> watchers
-                </span>
-                <span>
-                  <strong>{{item.forks}}</strong> forks
-                </span>
+              <span>
+                <strong>{{item.forks}}</strong> forks
               </span>
-            </md-item-template>
-          </md-autocomplete>
-        </form>
-      </div>
+            </span>
+          </md-item-template>
+        </md-autocomplete>
+      </form>
     </div>
-  </md-content>
-</div>
+  </div>
+</md-content>

src/components/checkbox/demoBasicUsage/index.html

@@ -1,9 +1,8 @@
-
 <div ng-controller="AppCtrl" class="md-padding" ng-cloak>
   <div>
     <fieldset class="standard">
       <legend>Using &lt;ng-model&gt;</legend>
-      <div layout-wrap layout-gt-sm="row" >
+      <div layout-wrap layout-gt-sm="row">
         <div flex-gt-sm="50">
           <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
             Checkbox 1: {{ data.cb1 }}

src/components/checkbox/demoBasicUsage/style.css

@@ -1,11 +1,9 @@
 div.flex-xs {
   min-height:40px;
-
 }
 .checkboxDemo1 div {
   clear: both;
 }
-
 p {
   padding-left: 8px;
 }
@@ -16,11 +14,6 @@ fieldset.standard {
 legend {
   color: #3F51B5;
 }
-legend code {
-  color: #3F51B5;
-  font-weight: normal;
-}
-
 .ipsum {
   color: saddlebrown;
 }

src/components/checkbox/demoSelectAll/index.html

@@ -1,29 +1,20 @@
-<div ng-controller="AppCtrl" class="md-padding demo">
-  <div layout="row" layout-wrap>
-    <div flex="100" layout="column">
-      <div>
-        <!--
-          In IE, we cannot apply flex directly to <fieldset>
-          @see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
-        -->
-        <fieldset class="demo-fieldset" >
-          <legend class="demo-legend">Using &lt;md-checkbox&gt; with the 'indeterminate' attribute </legend>
-          <div layout="row" layout-wrap flex>
-          <div flex-xs flex="50">
-            <md-checkbox aria-label="Select All"
-                         ng-checked="isChecked()"
-                         md-indeterminate="isIndeterminate()"
-                         ng-click="toggleAll()">
-              <span ng-if="isChecked()">Un-</span>Select All
-            </md-checkbox>
-          </div>
-            <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
-              <md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)">
-               {{ item }}
-              </md-checkbox>
-            </div>
-          </div>
-        </fieldset>
+<div ng-controller="AppCtrl" class="md-padding">
+  <!--
+    In IE, we cannot apply flex directly to <fieldset>
+    @see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
+  -->
+  <fieldset>
+    <legend>Using &lt;md-checkbox&gt; with the 'indeterminate' attribute</legend>
+      <md-checkbox aria-label="Select All"
+                   ng-checked="isChecked()"
+                   md-indeterminate="isIndeterminate()"
+                   ng-click="toggleAll()">
+        <span ng-if="isChecked()">Un-</span>Select All
+      </md-checkbox>
+      <div class="demo-select-all-checkboxes" ng-repeat="item in items">
+        <md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)">
+          {{ item }}
+        </md-checkbox>
       </div>
-    </div>
+  </fieldset>
 </div>

src/components/checkbox/demoSelectAll/style.css

@@ -1,15 +1,10 @@
-.demo {
-  &-legend {
-    color: #3F51B5;
-  }
-
-  &-fieldset {
-    border-style: solid;
-    border-width: 1px;
-    height: 100%;
-  }
-
-  &-select-all-checkboxes {
-    padding-left: 30px;
-  }
+legend {
+  color: #3F51B5;
+}
+fieldset {
+  border-style: solid;
+  border-width: 1px;
+}
+.demo-select-all-checkboxes {
+  padding-left: 30px;
 }