Material Design Liteのクラスを抽出してみた

Qiita初投稿です。正直まだなにを書いていいかまだよく分かっていません（汗）
初回投稿は、最近趣味で触り始めた [Material Design Lite](https://getmdl.io/started/index.html#download)（以降、MDL）について。

MDLはBEM（Block, Element, Modifier）を採用しているとのことで、どんなクラスがあるか調べてみました。（といっても、ただCSSファイルからクラスのセレクタを抽出しただけですが）あくまで一覧を表示しているだけなので、設定内容については、元ファイルを参照してください。

対象はMDL V1.1.3（2016年5月29日時点の最新）です。
※ `(^( )*\..*)|((^ .*{$))` でgrepして取り出しただけなので、漏れがあるかもしれません。

### Block: animation
```css:animation
.mdl-animation--default { ... }
.mdl-animation--fast-out-linear-in { ... }
.mdl-animation--fast-out-slow-in { ... }
.mdl-animation--linear-out-slow-in { ... }
```

### Block: button
```css:button
.mdl-button { ... }
.mdl-button__ripple-container { ... }
.mdl-button--accent.mdl-button--accent { ... }
.mdl-button--fab { ... }
.mdl-button--icon { ... }
.mdl-button--primary.mdl-button--primary { ... }
.mdl-button--raised { ... }
```

### Block: button (disabled)
```css:button(disabled)
.mdl-button[disabled][disabled], .mdl-button.mdl-button--disabled.mdl-button--disabled { ... }
.mdl-button--colored[disabled][disabled], .mdl-button--colored.mdl-button--disabled.mdl-button--disabled { ... }
.mdl-button--fab[disabled][disabled], .mdl-button--fab.mdl-button--disabled.mdl-button--disabled { ... }
.mdl-button--raised[disabled][disabled], .mdl-button--raised.mdl-button--disabled.mdl-button--disabled { ... }
.mdl-button .material-icons { ... }
```

### Block: card
```css:card
.mdl-card { ... }
.mdl-card--expand { ... }
.mdl-card__actions { ... }
.mdl-card__media { ... }
.mdl-card__menu { ... }
.mdl-card__subtitle-text { ... }
.mdl-card__supporting-text { ... }
.mdl-card__title { ... }
.mdl-card__title-text { ... }
```

### Block: cell
```css:cell
.mdl-cell { ... }
.mdl-cell--top { ... }
.mdl-cell--middle { ... }
.mdl-cell--bottom { ... }
.mdl-cell--stretch { ... }
.mdl-cell--order-X { ... }  /* X = 1 ~ 12 (整数) */
```

### Block: checkbox
```css:checkbox
.mdl-checkbox { ... }
.mdl-checkbox__box-outline { ... }
.mdl-checkbox__focus-helper { ... }
.mdl-checkbox__input { ... }
.mdl-checkbox__label { ... }
.mdl-checkbox__ripple-container { ... }
.mdl-checkbox__tick-outline { ... }
```

### Block: color
```css:color
.mdl-color--accent { ... }
.mdl-color--accent-contrast { ... }
.mdl-color--black { ... }
.mdl-color--white { ... }
.mdl-color--primary { ... }
.mdl-color--primary-contrast { ... }
.mdl-color--primary-dark { ... }
.mdl-color--XXX { ... }
.mdl-color--XXX-YYY { ... }
```
#### XXXおよびYYYについての補足

XXXの値によってYYYに設定できる値が異なるらしい。

| XXX | YYY |
| :--: | :--: |
| blue-grey, brown, grey | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 |
| amber, blue, cyan, deep-orange, deep-purple, green, indigo, light-blue, light-green, lime, orange, pink, purple, red, teal, yellow | 上記に加え、 A100, A200, A400, A700 |

### Block: color-text
```css:color-text
.mdl-color-text--accent { ... }
.mdl-color-text--accent-contrast { ... }
.mdl-color-text--black { ... }
.mdl-color-text--white { ... }
.mdl-color-text--primary { ... }
.mdl-color-text--primary-contrast { ... }
.mdl-color-text--primary-dark { ... }
.mdl-color-text--XXX { ... }
.mdl-color-text--XXX-YYY { ... }
```

XXXおよびYYYについては「Block: color」と同様

### Block: data-table
```css:data-table
.mdl-data-table { ... }
.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric { ... }
.mdl-data-table__select { ... }
```

### Block: icon-toggle
```css:icon-toggle
.mdl-icon-toggle { ... }
.mdl-icon-toggle__input { ... }
.mdl-icon-toggle__label { ... }
.mdl-icon-toggle__ripple-container { ... }
.mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab { ... }
```

### Block: layout
```css:layout
.mdl-layout { ... }
.mdl-layout__container { ... }
.mdl-layout__content { ... }
.mdl-layout__drawer { ... }
.mdl-layout__drawer-button { ... }
.mdl-layout__header { ... }
.mdl-layout__header--scroll { ... }
.mdl-layout__header--seamed { ... }
.mdl-layout__header--transparent.mdl-layout__header--transparent { ... }
.mdl-layout__header--waterfall { ... }
.mdl-layout__header-row { ... }
.mdl-layout__obfuscator { ... }
.mdl-layout__tab { ... }
.mdl-layout__tab-bar { ... }
.mdl-layout__tab-bar-button { ... }
.mdl-layout__tab-bar-container { ... }
.mdl-layout__tab-bar-left-button { ... }
.mdl-layout__tab-bar-right-button { ... }
.mdl-layout__tab-panel { ... }
.mdl-layout__title,
.mdl-layout-spacer { ... }
.mdl-layout-title { ... }
.mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only { ... }
.mdl-layout.is-small-screen .mdl-layout--large-screen-only { ... }
```

### Block: list
```css:list
.mdl-list { ... }
.mdl-list__item { ... }
.mdl-list__item--three-line { ... }
.mdl-list__item--two-line { ... }
.mdl-list__item-avatar,
.mdl-list__item-avatar.material-icons { ... }
.mdl-list__item-icon,
.mdl-list__item-icon.material-icons { ... }
```

### Block: mega-footer
```css:mega-fotter
.mdl-mega-footer { ... }
.mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li { ... }
.mdl-mega-footer__bottom-section { ... }
.mdl-mega-footer__bottom-section:after { ... }
.mdl-mega-footer__drop-down-section { ... }
.mdl-mega-footer__heading { ... }
.mdl-mega-footer__heading-checkbox { ... }
.mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list { ... }
.mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading:after { ... }
.mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
.mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading:after,
.mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer__link-list,
.mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer--link-list,
.mdl-mega-footer__heading:after { ... }
.mdl-mega-footer__left-section { ... }
.mdl-mega-footer__link-list { ... }
.mdl-mega-footer__link-list a { ... }
.mdl-mega-footer__link-list li { ... }
.mdl-mega-footer__middle-section:after,
.mdl-mega-footer__right-section { ... }
.mdl-mega-footer__right-section a { ... }
.mdl-mega-footer__social-btn { ... }
.mdl-mega-footer__top-section:after,
.mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
.mdl-mega-footer--bottom-section,
.mdl-mega-footer--bottom-section:after,
.mdl-mega-footer--drop-down-section,
.mdl-mega-footer--heading-checkbox,
.mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
.mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading:after,
.mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
.mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading:after,
.mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer__link-list,
.mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer--link-list,
.mdl-mega-footer--heading,
.mdl-mega-footer--heading:after,
.mdl-mega-footer--left-section,
.mdl-mega-footer--link-list a,
.mdl-mega-footer--link-list li,
.mdl-mega-footer--link-list,
.mdl-mega-footer--middle-section:after,
.mdl-mega-footer--right-section a,
.mdl-mega-footer--right-section,
.mdl-mega-footer--social-btn,
.mdl-mega-footer--top-section:after,
```

### Block: mini-footer
```css:mini-footer
.mdl-mini-footer { ... }
.mdl-mini-footer__left-section { ... }
.mdl-mini-footer__link-list { ... }
.mdl-mini-footer__right-section { ... }
.mdl-mini-footer__social-btn { ... }
.mdl-mini-footer--left-section,
.mdl-mini-footer--link-list,
.mdl-mini-footer--right-section,
.mdl-mini-footer--social-btn,
```

### Block: menu
```css:menu
.mdl-menu { ... }
.mdl-menu__container { ... }
.mdl-menu__item { ... }
.mdl-menu__item--ripple-container { ... }
.mdl-menu__outline { ... }
```

### Block: navigation
```css:navigation
.mdl-navigation { ... }
.mdl-navigation__link { ... }
```

### Block: progress
```css:progress
.mdl-progress { ... }
.mdl-progress > .auxbar { ... }
.mdl-progress > .bar { ... }
.mdl-progress > .bufferbar { ... }
.mdl-progress > .progressbar { ... }
.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar { ... }
.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
.mdl-progress.mdl-progress__indeterminate > .bar1 { ... }
.mdl-progress.mdl-progress__indeterminate > .bar3 { ... }
.mdl-progress.mdl-progress--indeterminate > .bar1,
.mdl-progress.mdl-progress--indeterminate > .bar3,
```

### Block: radio
```css:radio
.mdl-radio { ... }
.mdl-radio__button { ... }
.mdl-radio__inner-circle { ... }
.mdl-radio__label { ... }
.mdl-radio__outer-circle { ... }
.mdl-radio__ripple-container { ... }
```

### Block: shadow
```css:shadow
.mdl-shadow--16dp { ... }
.mdl-shadow--24dp { ... }
.mdl-shadow--2dp { ... }
.mdl-shadow--3dp { ... }
.mdl-shadow--4dp { ... }
.mdl-shadow--6dp { ... }
.mdl-shadow--8dp { ... }
```

### Block: slider
```css:slider
.mdl-slider { ... }
.mdl-slider__background-flex { ... }
.mdl-slider__background-flex > .mdl-slider__background-lower { ... }
.mdl-slider__background-flex > .mdl-slider__background-upper { ... }
.mdl-slider__background-flex > .mdl-slider__background-upper { ... }
.mdl-slider__background-flex > .mdl-slider__background-upper { ... }
.mdl-slider__background-flex > .mdl-slider__background-upper { ... }
.mdl-slider__background-lower { ... }
.mdl-slider__background-upper { ... }
.mdl-slider__container { ... }
.mdl-slider__ie-container { ... }
```

### Block: spinner
```css:spinner
.mdl-spinner { ... }
.mdl-spinner__circle { ... }
.mdl-spinner__circle-clipper { ... }
.mdl-spinner__gap-patch { ... }
.mdl-spinner__layer { ... }
.mdl-spinner__layer-X { ... }  /* X = 1, 2, 3, 4 */
```

### Block: switch
```css:switch
.mdl-switch { ... }
.mdl-switch__focus-helper { ... }
.mdl-switch__input { ... }
.mdl-switch__label { ... }
.mdl-switch__ripple-container { ... }
.mdl-switch__thumb { ... }
.mdl-switch__track { ... }
```

### Block: tabs
```css:tabs
.mdl-tabs { ... }
.mdl-tabs__panel { ... }
.mdl-tabs__tab { ... }
.mdl-tabs__tab-bar { ... }
.mdl-textfield { ... }
```

### Block: textfield
```css:textfield
.mdl-textfield textarea.mdl-textfield__input { ... }
.mdl-textfield__error { ... }
.mdl-textfield__expandable-holder { ... }
.mdl-textfield__input { ... }
.mdl-textfield__label { ... }
.mdl-textfield--align-right { ... }
.mdl-textfield--expandable { ... }
.mdl-textfield--full-width { ... }
```

### Block: tooltip
```css:tooltip
.mdl-tooltip { ... }
.mdl-tooltip--large { ... }
.mdl-tooltip.is-active { ... }
```

### Block: typography
```css:typography
.mdl-typography--body-X { ... }
.mdl-typography--body-X-color-contrast { ... }
.mdl-typography--body-X-force-preferred-font { ... }
.mdl-typography--body-X-force-preferred-font-color-contrast { ... }  /* X = 1, 2 */
.mdl-typography--button { ... }
.mdl-typography--button-color-contrast { ... }
.mdl-typography--caption { ... }
.mdl-typography--caption-color-contrast { ... }
.mdl-typography--caption-force-preferred-font { ... }
.mdl-typography--caption-force-preferred-font-color-contrast { ... }
.mdl-typography--display-Y { ... }
.mdl-typography--display-Y-color-contrast { ... }  /* Y = 1, 2, 3, 4 */
.mdl-typography--font-black { ... }
.mdl-typography--font-weight { ... }  /* weight = bold, light, medium, regular, thin */
.mdl-typography--headline { ... }
.mdl-typography--headline-color-contrast { ... }
.mdl-typography--menu { ... }
.mdl-typography--menu-color-contrast { ... }
.mdl-typography--subhead { ... }
.mdl-typography--subhead-color-contrast { ... }
.mdl-typography--text-modi { ... }  /* modi = capitalize, left, center, right, justify, lowercase, uppercase, nowrap */
.mdl-typography--title { ... }
.mdl-typography--title-color-contrast { ... }
```

### その他
```css:その他
.visuallyhidden.focusable:focus { ... }
.browserupgrade { ... }
.clearfix:before, .clearfix:after { ... }
.clearfix:after { ... }
.material-icons { ... }
.mdl-badge { ... }
.mdl-dialog { ... }
.mdl-grid.mdl-grid--no-spacing > .mdl-cell { ... }
.mdl-snackbar { ... }
.mdl-ripple { ... }
.mdl-logo { ... }
```

## おわりに
今回はそろそろ疲れてきたのでこの辺で。
※最後にざっと照合してみて、どうもいくつか漏れがあるような気がします。
（時間のある時にでも見直します）