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

Qiita初投稿です。正直まだなにを書いていいかまだよく分かっていません（汗）
初回投稿は、最近趣味で触り始めた Material Design Lite（以降、MDL）について。

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

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

Block: animation

animation

.mdl-animation--default { ... }
.mdl-animation--fast-out-linear-in { ... }
.mdl-animation--fast-out-slow-in { ... }
.mdl-animation--linear-out-slow-in { ... }

Block: button

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)

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

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

cell

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

Block: checkbox

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

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

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

data-table

.mdl-data-table { ... }
.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric { ... }
.mdl-data-table__select { ... }

Block: icon-toggle

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

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

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

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

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

menu

.mdl-menu { ... }
.mdl-menu__container { ... }
.mdl-menu__item { ... }
.mdl-menu__item--ripple-container { ... }
.mdl-menu__outline { ... }

Block: navigation

navigation

.mdl-navigation { ... }
.mdl-navigation__link { ... }

Block: progress

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

radio

.mdl-radio { ... }
.mdl-radio__button { ... }
.mdl-radio__inner-circle { ... }
.mdl-radio__label { ... }
.mdl-radio__outer-circle { ... }
.mdl-radio__ripple-container { ... }

Block: shadow

shadow

.mdl-shadow--16dp { ... }
.mdl-shadow--24dp { ... }
.mdl-shadow--2dp { ... }
.mdl-shadow--3dp { ... }
.mdl-shadow--4dp { ... }
.mdl-shadow--6dp { ... }
.mdl-shadow--8dp { ... }

Block: slider

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

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

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

tabs

.mdl-tabs { ... }
.mdl-tabs__panel { ... }
.mdl-tabs__tab { ... }
.mdl-tabs__tab-bar { ... }
.mdl-textfield { ... }

Block: textfield

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

tooltip

.mdl-tooltip { ... }
.mdl-tooltip--large { ... }
.mdl-tooltip.is-active { ... }

Block: typography

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 { ... }

その他

その他

.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 { ... }

おわりに

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