google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2076 from google/hotfix/progress-bem 

Fix BEM naming in progress
master
Surma 2016-01-04 13:02:06 +00:00
parent fdf5575b1b a33aa8e6c3
commit b1126ee2e3
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/progress/README.md
View File

@ -27,7 +27,7 @@ A static (non-animated) progress indicator.
An active (animated) progress indicator.
```html
<div id="progactive" style="width:200px" class="mdl-js-progress
mdl-progress__indeterminate"></div>
mdl-progress--indeterminate"></div>
```
## Configuration options
@ -37,4 +37,6 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| MDL class | Effect | Remarks |
|-----------|--------|---------|
| `mdl-js-progress` | Assigns basic MDL behavior to progress indicator | Required |
| `mdl-progress__indeterminate` | Applies animation effect | Optional |
| `mdl-progress--indeterminate` | Applies animation effect | Optional |
> Note: `mdl-progress__intermediate` does exist within the codebase. It is deprecated since the name is not in BEM alignment. It will be removed in 2.0.

4
src/progress/_progress.scss
View File

@ -52,6 +52,7 @@
// Webkit only
@supports (-webkit-appearance:none) {
.mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
.mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
linear-gradient(to right, $progress-main-color, $progress-main-color);
@ -59,11 +60,13 @@
}
}
.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
background-image: linear-gradient(to right, $progress-fallback-buffer-color, $progress-fallback-buffer-color),
linear-gradient(to right, $progress-main-color, $progress-main-color);
}
.mdl-progress.mdl-progress--indeterminate > .bar1,
.mdl-progress.mdl-progress__indeterminate > .bar1 {
background-color: $progress-main-color;
animation-name: indeterminate1;
@ -72,6 +75,7 @@
animation-timing-function: linear;
}
.mdl-progress.mdl-progress--indeterminate > .bar3,
.mdl-progress.mdl-progress__indeterminate > .bar3 {
background-image: none;
background-color: $progress-main-color;