mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-11 12:25:38 +03:00
Merge pull request #2076 from google/hotfix/progress-bem
Fix BEM naming in progress
This commit is contained in:
commit
b1126ee2e3
@ -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.
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user