Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
refactor(css): Identify private CSS classes.
Browse files Browse the repository at this point in the history 
Many components use classes that should be noted as private/internal
classes. Update components accordingly by prefixing classes with
`_md-`.

Refactor the following components:

 * FAB SpeedDial/Toolbar
 * Backdrop
 * Subheader
 * Chips
 * Content

Refactor the `md-visually-hidden` class to `_md-visually-hidden`
across multiple components.

Also make a slight change to icon docs for better readability.

Refactor `<md-content>`'s `autoScroll` class to `md-no-momentum`
for better clarity and to define it as a public API class and add
appropriate docs.

BREAKING CHANGE

The `autoScroll` class of the `<md-content>` directive has been
renamed to `md-no-momentum` to increase clarity and mark it as
an API-level class.

If you use the `autoScroll` class in your code, please update
it to the new name `md-no-momentum`.

Changed classes:
* button:
	md-focused		-> _md-focused
* checkbox:
	md-label		-> _md-label
	md-checked 		->_md-checked
	md-icon 		->_md-icon
	md-container		-> _md-container
	md-focused		-> _md-focused
* progress-circular:
	md-spinner-wrapper	-> _md-spinner-wrapper
	md-inner		-> _md-inner
	md-gap			-> _md-gap
	md-left			-> _md-left
	md-right		-> _md-right
	md-half-circle		-> _md-half-circle
	md-scale-wrapper	-> _md-scale-wrapper
	md-mode-indeterminate	-> _md-mode-indeterminate
* progress-linear:
	md-container		-> _md-container
	md-bar			-> _md-bar
	md-dashed		-> _md-dashed
	md-bar1			-> _md-bar1
	md-bar2			-> _md-bar2
	md-mode-query		-> _md-mode-query
	md-mode-determinate	-> _md-mode-determinate
	md-mode-indeterminate	-> _md-mode-indeterminate
	md-mode-buffer		-> _md-mode-buffer
* radio-button:
	md-container		-> _md-container
	md-off			-> _md-off
	md-on			-> _md-on
	md-checked		-> _md-checked
	md-label		-> _md-label
	md-focu	sed		-> _md-focused
	circle			-> DELETED
* sidenav:
	md-closed		-> _md-closed
	md-locked-open		-> _md-locked-open
	md-sidenav-backdrop	-> _md-sidenav-backdrop
* slider:
	md-dragging		-> _md-dragging
	md-active		-> _md-active
	md-slider-wrapper	-> _md-slider-wrapper
	md-track-container	-> _md-track-container
	md-track		-> _md-track
	md-track-fill		-> _md-track-fill
	md-track-ticks		-> _md-track-ticks
	md-thumb-container	-> _md-thumb-container
	md-thumb		-> _md-thumb
	md-sign			-> _md-sign
	md-thumb-text		-> _md-thumb-text
	md-focus-thumb		-> _md-focus-thumb
	md-focus-ring		-> _md-focus-ring
	md-disabled-thumb	-> _md-disabled-thumb
	md-min			-> _md-min
* switch:
	md-container		-> _md-container
	md-dragging		-> _md-dragging
	md-focused		-> _md-focused
	md-thumb		-> _md-thumb
	md-bar			-> _md-bar
	md-thumb-container	-> _md-thumb-container
	md-checked		-> _md-checked
* toast:
	md-toast-animating	-> _md-toast-animating
	md-bottom		-> _md-bottom
	md-left			-> _md-left
	md-right		-> _md-right
	md-top			-> _md-top
	md-swipeleft		-> _md-swipeleft
	md-swiperight		-> _md-swiperight
	md-swipeup		-> _md-swipeup
	md-swipedown		-> _md-swipedown
* tooltip:
	md-content		-> _md-content
	md-show		-> _md-show
	md-hide			-> _md-hide

References #6653.  Closes #6706. Closes #7239. Closes #7248.
  • Loading branch information
@topherfangio @ThomasBurleson
topherfangio authored and ThomasBurleson committed Feb 26, 2016
1 parent 1efe816 commit 78ccef6
Show file tree
Hide file tree
Showing 85 changed files with 714 additions and 723 deletions.
2 changes: 1 addition & 1 deletion docs/app/partials/menu-link.tmpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/config/template/index.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions src/components/autocomplete/js/autocompleteDirective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ function MdAutocomplete () {
</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>\
Expand Down Expand Up @@ -281,7 +281,7 @@ function MdAutocomplete () {
ng-if="$mdAutocompleteCtrl.scope.searchText && !$mdAutocompleteCtrl.isDisabled"\
ng-click="$mdAutocompleteCtrl.clear()">\
<md-icon md-svg-icon="md-close"></md-icon>\
<span class="md-visually-hidden">Clear</span>\
<span class="_md-visually-hidden">Clear</span>\
</button>\
';
}
Expand Down
12 changes: 6 additions & 6 deletions src/components/backdrop/backdrop.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/bottomSheet/bottom-sheet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ function MdBottomSheetProvider($$interimElementProvider) {
element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');

// 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");

if (options.clickOutsideToClose) {
backdrop.on('click', function() {
Expand Down
13 changes: 0 additions & 13 deletions src/components/bottomSheet/bottom-sheet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,6 @@ md-bottom-sheet {
align-items: center;
height: $bottom-sheet-list-item-height;

div.md-icon-container {
display: inline-block;
height: 3 * $baseline-grid;
margin-right: $bottom-sheet-icon-after-margin;
}
}
}

Expand Down Expand Up @@ -155,14 +150,6 @@ md-bottom-sheet {
width: 10 * $baseline-grid;
}

.md-icon-container {
display: inline-block;
box-sizing: border-box;
height: 6 * $baseline-grid;
width: 6 * $baseline-grid;
margin: 0 0;
}

.md-grid-text {
font-weight: $bottom-sheet-grid-font-weight;
line-height: 2 * $baseline-grid;
Expand Down
8 changes: 4 additions & 4 deletions src/components/bottomSheet/demoBasicUsage/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
}


md-list-item, md-list-item .md-list-item-inner {
md-list-item, md-list-item ._md-list-item-inner {
min-height: 48px;

}
Expand All @@ -32,12 +32,12 @@ h2 {
}


.md-subheader .md-subheader-inner {
padding: 0px;
.md-subheader ._md-subheader-inner {
padding: 0;
}


md-toast {
md-toast .md-toast-content {
background-color: #B14141;
}

Expand Down
38 changes: 19 additions & 19 deletions src/components/button/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ button.md-button::-moz-focus-inner {
}
}

.md-toast-open-top {
._md-toast-open-top {
.md-button.md-fab-top-left,
.md-button.md-fab-top-right {
transition: $swift-ease-out;
Expand All @@ -182,7 +182,7 @@ button.md-button::-moz-focus-inner {
}
}

.md-toast-open-bottom {
._md-toast-open-bottom {
.md-button.md-fab-bottom-left,
.md-button.md-fab-bottom-right {
transition: $swift-ease-out;
Expand All @@ -200,30 +200,30 @@ button.md-button::-moz-focus-inner {
display: flex;
flex: 1;
width: 100%;
}

.md-button-group > .md-button {
flex: 1;
& > .md-button {
flex: 1;

display: block;
display: block;

overflow: hidden;
overflow: hidden;

width: 0;
width: 0;

border-width: 1px 0px 1px 1px;
border-radius: 0;
border-width: 1px 0px 1px 1px;
border-radius: 0;

text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;

&:first-child {
border-radius: 2px 0px 0px 2px;
}
&:last-child {
border-right-width: 1px;
border-radius: 0px 2px 2px 0px;
&:first-child {
border-radius: 2px 0px 0px 2px;
}
&:last-child {
border-right-width: 1px;
border-radius: 0px 2px 2px 0px;
}
}
}
// IE only
Expand Down
32 changes: 16 additions & 16 deletions src/components/checkbox/checkbox-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ md-checkbox.md-THEME_NAME-theme {
&.md-checked .md-ripple {
color: '{{background-600}}';
}
&.md-checked.md-focused .md-container:before {
&.md-checked.md-focused ._md-container:before {
background-color: '{{accent-color-0.26}}';
}

Expand All @@ -18,14 +18,14 @@ 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}}';
}

Expand All @@ -46,18 +46,18 @@ md-checkbox.md-THEME_NAME-theme {
color: '{{primary-color-0.87}}';
}

.md-icon {
._md-icon {
border-color: '{{foreground-2}}';
}
&.md-checked .md-icon {
&.md-checked ._md-icon {
background-color: '{{primary-color-0.87}}';
}

&.md-checked.md-focused .md-container:before {
&.md-checked.md-focused ._md-container:before {
background-color: '{{primary-color-0.26}}';
}

&.md-checked .md-icon:after {
&.md-checked ._md-icon:after {
border-color: '{{primary-contrast-0.87}}';
}
}
Expand All @@ -75,36 +75,36 @@ 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-label {
._md-label {
color: '{{foreground-3}}';
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/checkbox/checkbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,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
};

Expand Down
16 changes: 8 additions & 8 deletions src/components/checkbox/checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,21 +32,21 @@ 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-container {
._md-container {
position: absolute;
top: 50%;
transform: translateY(-50%);
Expand Down Expand Up @@ -97,12 +97,12 @@ md-checkbox {
}
}

&.md-align-top-left > div.md-container {
&.md-align-top-left > div._md-container {
top: $checkbox-top;
}

// unchecked
.md-icon {
._md-icon {
box-sizing: border-box;
transition: 240ms;
position: absolute;
Expand All @@ -115,7 +115,7 @@ md-checkbox {
border-radius: $checkbox-border-radius;
}

&.md-checked .md-icon {
&.md-checked ._md-icon {
border: none;
}

Expand All @@ -125,7 +125,7 @@ md-checkbox {
}


&.md-checked .md-icon:after {
&.md-checked ._md-icon:after {
box-sizing: border-box;
transform: rotate(45deg);
position: absolute;
Expand All @@ -141,7 +141,7 @@ md-checkbox {
content: '';
}

.md-label {
._md-label {
box-sizing: border-box;
position: relative;
display: inline-block;
Expand Down
Loading

2 comments on commit 78ccef6

@sierraindiagolf
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seriously now ?

@EladBezalel
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sierraindiagolf - rest assured that we committed these changes with some reluctance. Obviously we want to avoid large, global changes. Nevertheless, these changes will allow us to distinguish between bugs and feature requests... and we can better support the community with CSS related-issues.

Please sign in to comment.