refactor: Revert CSS privatization.

Revert previous changes to privatize much of our CSS. > See public announcement [**Revisiting the decision to rename private CSS classes in 1.1**](https://groups.google.com/forum/#!msg/ngmaterial/mLJrRW9qrLA/C_Ni3LSrBQAJ) Also fixes an erroneously passing chips test. Closes #8874
angular · Jul 11, 2016 · 82fdd2c · 82fdd2c
1 parent d593229
commit 82fdd2c
Show file tree

Hide file tree

Showing 92 changed files with 660 additions and 662 deletions.
diff --git a/docs/app/partials/menu-link.tmpl.html b/docs/app/partials/menu-link.tmpl.html
@@ -3,7 +3,7 @@
     ng-href="{{section.url}}"
     ng-click="focusSection()">
   {{section | humanizeDoc}}
-  <span class="_md-visually-hidden"
+  <span class="md-visually-hidden"
     ng-if="isSelected()">
     current page
   </span>

diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html
@@ -65,7 +65,7 @@ <h2 class="md-toolbar-item md-breadcrumb md-headline">
             <span ng-if="menu.currentPage.name !== menu.currentSection.name">
               <span hide-sm hide-md>{{menu.currentSection.name}}</span>
               <span class="docs-menu-separator-icon" hide-sm hide-md style="transform: translate3d(0, 1px, 0)">
-                <span class="_md-visually-hidden">-</span>
+                <span class="md-visually-hidden">-</span>
                 <md-icon
                     aria-hidden="true"
                     md-svg-src="img/icons/ic_chevron_right_24px.svg"

diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss
@@ -82,7 +82,7 @@ md-autocomplete {
         left: 2px;
         width: auto;
       }
-      ._md-mode-indeterminate {
+      .md-mode-indeterminate {
         position: absolute;
         top: 0;
         left: 0;

diff --git a/src/components/autocomplete/js/autocompleteDirective.js b/src/components/autocomplete/js/autocompleteDirective.js
@@ -207,7 +207,7 @@ function MdAutocomplete ($$mdSvgRegistry) {
           </md-virtual-repeat-container>\
         </md-autocomplete-wrap>\
         <aria-status\
-            class="_md-visually-hidden"\
+            class="md-visually-hidden"\
             role="status"\
             aria-live="assertive">\
           <p ng-repeat="message in $mdAutocompleteCtrl.messages track by $index" ng-if="message">{{message}}</p>\
@@ -291,7 +291,7 @@ function MdAutocomplete ($$mdSvgRegistry) {
                 ng-if="$mdAutocompleteCtrl.scope.searchText && !$mdAutocompleteCtrl.isDisabled"\
                 ng-click="$mdAutocompleteCtrl.clear($event)">\
               <md-icon md-svg-src="' + $$mdSvgRegistry.mdClose + '"></md-icon>\
-              <span class="_md-visually-hidden">Clear</span>\
+              <span class="md-visually-hidden">Clear</span>\
             </button>\
                 ';
         }

diff --git a/src/components/backdrop/backdrop.scss b/src/components/backdrop/backdrop.scss
@@ -12,26 +12,26 @@ md-backdrop {
 
   z-index: $z-index-backdrop;
 
-  &._md-menu-backdrop {
+  &.md-menu-backdrop {
     position: fixed !important;
     z-index: $z-index-menu - 1;
   }
-  &._md-select-backdrop {
+  &.md-select-backdrop {
     z-index: $z-index-dialog + 1;
     transition-duration: 0;
   }
-  &._md-dialog-backdrop {
+  &.md-dialog-backdrop {
     z-index: $z-index-dialog - 1;
   }
-  &._md-bottom-sheet-backdrop {
+  &.md-bottom-sheet-backdrop {
     z-index: $z-index-bottom-sheet - 1;
   }
-  &._md-sidenav-backdrop {
+  &.md-sidenav-backdrop {
     z-index: $z-index-sidenav - 1;
   }
 
 
-  &._md-click-catcher {
+  &.md-click-catcher {
     position: absolute;
   }
 

diff --git a/src/components/bottomSheet/bottom-sheet.js b/src/components/bottomSheet/bottom-sheet.js
@@ -170,7 +170,7 @@ function MdBottomSheetProvider($$interimElementProvider) {
 
       if (!options.disableBackdrop) {
         // Add a backdrop that will close on click
-        backdrop = $mdUtil.createBackdrop(scope, "_md-bottom-sheet-backdrop md-opaque");
+        backdrop = $mdUtil.createBackdrop(scope, "md-bottom-sheet-backdrop md-opaque");
 
         // Prevent mouse focus on backdrop; ONLY programatic focus allowed.
         // This allows clicks on backdrop to propogate to the $rootElement and

diff --git a/src/components/bottomSheet/demoBasicUsage/style.css b/src/components/bottomSheet/demoBasicUsage/style.css
@@ -22,7 +22,7 @@
   }
 
 
-md-list-item, md-list-item ._md-list-item-inner {
+md-list-item, md-list-item .md-list-item-inner {
   min-height: 48px;
 
 }
@@ -33,7 +33,7 @@ h2 {
 }
 
 
-.md-subheader ._md-subheader-inner {
+.md-subheader .md-subheader-inner {
   padding: 0;
 }
 

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -180,7 +180,7 @@ button.md-button.md-fab {
   }
 }
 
-._md-toast-open-top {
+.md-toast-open-top {
   .md-button.md-fab-top-left,
   .md-button.md-fab-top-right {
     transition: $swift-ease-out;
@@ -194,7 +194,7 @@ button.md-button.md-fab {
   }
 }
 
-._md-toast-open-bottom {
+.md-toast-open-bottom {
   .md-button.md-fab-bottom-left,
   .md-button.md-fab-bottom-right {
     transition: $swift-ease-out;

diff --git a/src/components/checkbox/checkbox-theme.scss b/src/components/checkbox/checkbox-theme.scss
@@ -7,7 +7,7 @@ md-checkbox.md-THEME_NAME-theme {
     color: '{{background-600}}';
   }
 
-  &.md-checked.md-focused ._md-container:before {
+  &.md-checked.md-focused .md-container:before {
     background-color: '{{accent-color-0.26}}';
   }
 
@@ -19,15 +19,15 @@ md-checkbox.md-THEME_NAME-theme {
     color: '{{accent-color-0.87}}';
   }
 
-  ._md-icon {
+  .md-icon {
     border-color: '{{foreground-2}}';
   }
 
-  &.md-checked ._md-icon {
+  &.md-checked .md-icon {
     background-color: '{{accent-color-0.87}}';
   }
 
-  &.md-checked ._md-icon:after {
+  &.md-checked .md-icon:after {
     border-color: '{{accent-contrast-0.87}}';
   }
 
@@ -49,42 +49,42 @@ md-checkbox.md-THEME_NAME-theme {
         color: '{{warn-color-0.87}}';
       }
 
-      ._md-icon {
+      .md-icon {
         border-color: '{{foreground-2}}';
       }
 
-      &.md-checked ._md-icon {
+      &.md-checked .md-icon {
         background-color: '{{warn-color-0.87}}';
       }
 
-      &.md-checked.md-focused:not([disabled]) ._md-container:before {
+      &.md-checked.md-focused:not([disabled]) .md-container:before {
         background-color: '{{warn-color-0.26}}';
       }
 
-      &.md-checked ._md-icon:after {
+      &.md-checked .md-icon:after {
         border-color: '{{background-200}}';
       }
     }
   }
 
   &[disabled] {
-    ._md-icon {
+    .md-icon {
       border-color: '{{foreground-3}}';
     }
 
-    &.md-checked ._md-icon {
+    &.md-checked .md-icon {
       background-color: '{{foreground-3}}';
     }
 
-    &.md-checked ._md-icon:after {
+    &.md-checked .md-icon:after {
       border-color: '{{background-200}}';
     }
 
-    ._md-icon:after {
+    .md-icon:after {
       border-color: '{{foreground-3}}';
     }
 
-    ._md-label {
+    .md-label {
       color: '{{foreground-3}}';
     }
   }

diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
@@ -64,10 +64,10 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
     require: '?ngModel',
     priority: 210, // Run before ngAria
     template:
-      '<div class="_md-container" md-ink-ripple md-ink-ripple-checkbox>' +
-        '<div class="_md-icon"></div>' +
+      '<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' +
+        '<div class="md-icon"></div>' +
       '</div>' +
-      '<div ng-transclude class="_md-label"></div>',
+      '<div ng-transclude class="md-label"></div>',
     compile: compile
   };
 

diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
@@ -35,27 +35,27 @@ md-checkbox {
   }
 
   &.md-focused:not([disabled]) {
-    ._md-container:before {
+    .md-container:before {
       left: -8px;
       top: -8px;
       right: -8px;
       bottom: -8px;
     }
 
     &:not(.md-checked) {
-      ._md-container:before {
+      .md-container:before {
         background-color: rgba(0, 0, 0, 0.12);
       }
     }
   }
 
-  &.md-align-top-left > div._md-container {
+  &.md-align-top-left > div.md-container {
     top: $checkbox-top;
   }
 
   @include checkbox-container;
 
-  ._md-label {
+  .md-label {
     box-sizing: border-box;
     position: relative;
     display: inline-block;

diff --git a/src/components/checkbox/checkbox.spec.js b/src/components/checkbox/checkbox.spec.js
@@ -143,7 +143,7 @@ describe('mdCheckbox', function() {
     document.body.appendChild(checkbox[0]);
 
     var container = checkbox.children().eq(0);
-    expect(container[0]).toHaveClass('_md-container');
+    expect(container[0]).toHaveClass('md-container');
 
     // We simulate IE11's focus bug, which always focuses an unfocusable div
     // https://connect.microsoft.com/IE/feedback/details/1028411/

diff --git a/src/components/chips/chips-theme.scss b/src/components/chips/chips-theme.scss
@@ -7,7 +7,7 @@ md-chips.md-THEME_NAME-theme {
       box-shadow: 0 2px '{{primary-color}}';
     }
 
-    ._md-chip-input-container {
+    .md-chip-input-container {
       input {
         @include input-placeholder-color('\'{{foreground-3}}\'');
         color: '{{foreground-1}}';

diff --git a/src/components/chips/chips.scss b/src/components/chips/chips.scss
@@ -60,7 +60,7 @@ $contact-chip-name-width: rem(12) !default;
   @include rtl(padding, $chip-wrap-padding, rtl-value($chip-wrap-padding));
   vertical-align: middle;
 
-  &.md-readonly ._md-chip-input-container {
+  &.md-readonly .md-chip-input-container {
     min-height: $chip-height;
   }
 
@@ -73,7 +73,7 @@ $contact-chip-name-width: rem(12) !default;
     md-chip {
       @include rtl-prop(padding-right, padding-left, $chip-remove-padding-right);
 
-      ._md-chip-content {
+      .md-chip-content {
         @include rtl-prop(padding-right, padding-left, rem(0.4));
       }
     }
@@ -93,7 +93,7 @@ $contact-chip-name-width: rem(12) !default;
     max-width: 100%;
     position: relative;
 
-    ._md-chip-content {
+    .md-chip-content {
       display: block;
       @include rtl(float, left, right);
       white-space: nowrap;
@@ -110,12 +110,12 @@ $contact-chip-name-width: rem(12) !default;
       -khtml-user-select: none; /* webkit (konqueror) browsers */
       -ms-user-select: none; /* IE10+ */
     }
-    ._md-chip-remove-container {
+    .md-chip-remove-container {
       position: absolute;
       @include rtl-prop(right, left, 0);
       line-height: $chip-remove-line-height;
     }
-    ._md-chip-remove {
+    .md-chip-remove {
       text-align: center;
       width: $chip-height;
       height: $chip-height;
@@ -136,7 +136,7 @@ $contact-chip-name-width: rem(12) !default;
       }
     }
   }
-  ._md-chip-input-container {
+  .md-chip-input-container {
     display: block;
     line-height: $chip-height;
     @include rtl(margin, $chip-margin, rtl-value($chip-margin));
@@ -199,11 +199,11 @@ $contact-chip-name-width: rem(12) !default;
 }
 // IE only
 @media screen and (-ms-high-contrast: active) {
-  ._md-chip-input-container,
+  .md-chip-input-container,
   md-chip {
     border: 1px solid #fff;
   }
-  ._md-chip-input-container md-autocomplete {
+  .md-chip-input-container md-autocomplete {
     border: none;
   }
 }

diff --git a/src/components/chips/chips.spec.js b/src/components/chips/chips.spec.js
@@ -217,7 +217,7 @@ describe('<md-chips>', function() {
 
           expect(containers.length).toBe(0);
 
-          var removeContainer = wrap[0].querySelector('._md-chip-remove-container');
+          var removeContainer = wrap[0].querySelector('.md-chip-remove-container');
           expect(removeContainer).not.toBeTruthy();
         });
 
@@ -270,10 +270,10 @@ describe('<md-chips>', function() {
           // and a user-provided value.
           expect(controller.removable).toBe(undefined);
 
-          var containers = wrap[0].querySelectorAll("._md-chip-input-container");
+          var containers = wrap[0].querySelectorAll(".md-chip-input-container");
           expect(containers.length).not.toBe(0);
 
-          var removeContainer = wrap[0].querySelector('._md-chip-remove-container');
+          var removeContainer = wrap[0].querySelector('.md-chip-remove-container');
           expect(removeContainer).toBeTruthy();
         });
 
@@ -289,15 +289,15 @@ describe('<md-chips>', function() {
           expect(wrap.hasClass("md-removable")).toBe(false);
           expect(controller.removable).toBe(false);
 
-          var containers = wrap[0].querySelectorAll("._md-chip-remove-container");
+          var containers = wrap[0].querySelectorAll(".md-chip-remove-container");
           expect(containers.length).toBe(0);
 
           scope.$apply('removable = true');
 
           expect(wrap.hasClass("md-removable")).toBe(true);
           expect(controller.removable).toBe(true);
 
-          containers = wrap[0].querySelector("._md-chip-remove-container");
+          containers = wrap[0].querySelector(".md-chip-remove-container");
           expect(containers).toBeTruthy();
         });
 
@@ -367,12 +367,12 @@ describe('<md-chips>', function() {
 
           expect(ctrl.removable).toBeUndefined();
 
-          var removeContainer = wrap[0].querySelector('._md-chip-remove-container');
+          var removeContainer = wrap[0].querySelector('.md-chip-remove-container');
           expect(removeContainer).toBeFalsy();
 
           scope.$apply('isRemovable = true');
 
-          removeContainer = wrap[0].querySelector('._md-chip-remove-container');
+          removeContainer = wrap[0].querySelector('.md-chip-remove-container');
           expect(removeContainer).toBeTruthy();
         });