Showing preview only (1,187K chars total). Download the full file or copy to clipboard to get everything.
Repository: google/material-design-lite
Branch: mdl-1.x
Commit: 60f441a22ed9
Files: 311
Total size: 1.1 MB
Directory structure:
gitextract_8efnjcsx/
├── .drone.sec
├── .drone.yml
├── .editorconfig
├── .gitattributes
├── .github/
│ └── ISSUE_TEMPLATE.md
├── .gitignore
├── .jscsrc
├── .jshintrc
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bower.json
├── docs/
│ ├── _assets/
│ │ ├── codepen.js
│ │ ├── components.css
│ │ ├── components.js
│ │ ├── customizer.css
│ │ ├── customizer.js
│ │ ├── ie.css
│ │ ├── index.js
│ │ ├── main.css
│ │ ├── main.js
│ │ └── snippets.js
│ ├── _pages/
│ │ ├── components.md
│ │ ├── customize.md
│ │ ├── faq.md
│ │ ├── index.md
│ │ ├── showcase.md
│ │ ├── started.md
│ │ ├── styles.md
│ │ └── templates.md
│ └── _templates/
│ ├── component.html
│ ├── components.html
│ ├── customize.html
│ ├── demo.html
│ ├── layout.html
│ ├── page.html
│ ├── showcase.html
│ ├── snippets.html
│ ├── started.html
│ ├── styles.html
│ └── templates.html
├── gulpfile.babel.js
├── package.json
├── src/
│ ├── INTRODUCTION.md
│ ├── _color-definitions.scss
│ ├── _functions.scss
│ ├── _mixins.scss
│ ├── _variables.scss
│ ├── animation/
│ │ ├── _animation.scss
│ │ ├── demo.css
│ │ ├── demo.html
│ │ └── demo.js
│ ├── badge/
│ │ ├── README.md
│ │ ├── _badge.scss
│ │ └── snippets/
│ │ ├── badge-on-icon-icon-demo.html
│ │ ├── badge-on-icon-icon.html
│ │ ├── badge-on-icon-text-demo.html
│ │ ├── badge-on-icon-text.html
│ │ ├── badge-on-text-icon-demo.html
│ │ ├── badge-on-text-icon.html
│ │ ├── badge-on-text-text-demo.html
│ │ └── badge-on-text-text.html
│ ├── button/
│ │ ├── README.md
│ │ ├── _button.scss
│ │ ├── button.js
│ │ └── snippets/
│ │ ├── fab-colored-ripple.html
│ │ ├── fab-colored.html
│ │ ├── fab-disabled.html
│ │ ├── fab-mini-colored.html
│ │ ├── fab-mini.html
│ │ ├── fab-ripple.html
│ │ ├── fab.html
│ │ ├── flat-accent.html
│ │ ├── flat-disabled.html
│ │ ├── flat-primary.html
│ │ ├── flat-ripple.html
│ │ ├── flat.html
│ │ ├── icon-colored.html
│ │ ├── icon.html
│ │ ├── raised-accent.html
│ │ ├── raised-colored.html
│ │ ├── raised-disabled.html
│ │ ├── raised-ripple-accent.html
│ │ ├── raised-ripple.html
│ │ └── raised.html
│ ├── card/
│ │ ├── README.md
│ │ ├── _card.scss
│ │ └── snippets/
│ │ ├── event.html
│ │ ├── image.html
│ │ ├── square.html
│ │ └── wide.html
│ ├── checkbox/
│ │ ├── README.md
│ │ ├── _checkbox.scss
│ │ ├── checkbox.js
│ │ └── snippets/
│ │ ├── check-off.html
│ │ └── check-on.html
│ ├── chip/
│ │ ├── README.md
│ │ ├── _chip.scss
│ │ └── snippets/
│ │ ├── basic.html
│ │ ├── button.html
│ │ ├── contact.html
│ │ ├── deletable-contact.html
│ │ └── deletable.html
│ ├── data-table/
│ │ ├── README.md
│ │ ├── _data-table.scss
│ │ ├── data-table.js
│ │ └── snippets/
│ │ └── data-table.html
│ ├── demos.css
│ ├── dialog/
│ │ ├── README.md
│ │ └── _dialog.scss
│ ├── expansion/
│ │ ├── README.md
│ │ ├── _expansion.scss
│ │ └── snippets/
│ │ └── expansion.html
│ ├── footer/
│ │ ├── README.md
│ │ ├── _mega_footer.scss
│ │ ├── _mini_footer.scss
│ │ └── snippets/
│ │ ├── mega-footer.html
│ │ └── mini-footer.html
│ ├── grid/
│ │ ├── README.md
│ │ ├── _grid.scss
│ │ └── snippets/
│ │ ├── codepen-grid.css
│ │ ├── grid-demo.html
│ │ └── grid.html
│ ├── icon-toggle/
│ │ ├── README.md
│ │ ├── _icon-toggle.scss
│ │ ├── icon-toggle.js
│ │ └── snippets/
│ │ ├── icon-off.html
│ │ └── icon-on.html
│ ├── index.html
│ ├── layout/
│ │ ├── README.md
│ │ ├── _layout.scss
│ │ ├── layout.js
│ │ └── snippets/
│ │ ├── fixed-drawer-demo.html
│ │ ├── fixed-drawer.html
│ │ ├── fixed-header-demo.html
│ │ ├── fixed-header-drawer-demo.html
│ │ ├── fixed-header-drawer.html
│ │ ├── fixed-header.html
│ │ ├── fixed-tabs-demo.html
│ │ ├── fixed-tabs.html
│ │ ├── scrollable-tabs-demo.html
│ │ ├── scrollable-tabs.html
│ │ ├── scrolling-header-demo.html
│ │ ├── scrolling-header.html
│ │ ├── transparent-demo.html
│ │ ├── transparent.html
│ │ ├── waterfall-header-demo.html
│ │ └── waterfall-header.html
│ ├── list/
│ │ ├── README.md
│ │ ├── _list.scss
│ │ └── snippets/
│ │ ├── action.html
│ │ ├── icon.html
│ │ ├── list-control.html
│ │ ├── list-item.html
│ │ ├── three-line.html
│ │ └── two-line.html
│ ├── material-design-lite-grid.scss
│ ├── material-design-lite.scss
│ ├── mdlComponentHandler.js
│ ├── menu/
│ │ ├── README.md
│ │ ├── _menu.scss
│ │ ├── menu.js
│ │ └── snippets/
│ │ ├── codepen-lower-buttons.css
│ │ ├── codepen-top-buttons.css
│ │ ├── lower-left-demo.html
│ │ ├── lower-left.html
│ │ ├── lower-right-demo.html
│ │ ├── lower-right.html
│ │ ├── top-left-demo.html
│ │ ├── top-left.html
│ │ ├── top-right-demo.html
│ │ └── top-right.html
│ ├── palette/
│ │ ├── _palette.scss
│ │ ├── demo.css
│ │ └── demo.html
│ ├── progress/
│ │ ├── README.md
│ │ ├── _progress.scss
│ │ ├── progress.js
│ │ └── snippets/
│ │ ├── progress-buffering-demo.html
│ │ ├── progress-buffering.html
│ │ ├── progress-default-demo.html
│ │ ├── progress-default.html
│ │ ├── progress-indeterminate-demo.html
│ │ └── progress-indeterminate.html
│ ├── radio/
│ │ ├── README.md
│ │ ├── _radio.scss
│ │ ├── radio.js
│ │ └── snippets/
│ │ ├── radio-off.html
│ │ └── radio-on.html
│ ├── resets/
│ │ ├── _h5bp.scss
│ │ ├── _mobile.scss
│ │ └── _resets.scss
│ ├── ripple/
│ │ ├── _ripple.scss
│ │ └── ripple.js
│ ├── shadow/
│ │ ├── README.md
│ │ ├── _shadow.scss
│ │ ├── demo.css
│ │ └── demo.html
│ ├── slider/
│ │ ├── README.md
│ │ ├── _slider.scss
│ │ ├── slider.js
│ │ └── snippets/
│ │ ├── demo.html
│ │ ├── slider-default-demo.html
│ │ ├── slider-default.html
│ │ ├── slider-starting-value-demo.html
│ │ └── slider-starting-value.html
│ ├── snackbar/
│ │ ├── README.md
│ │ ├── _snackbar.scss
│ │ ├── snackbar.js
│ │ └── snippets/
│ │ ├── snackbar.html
│ │ └── toast.html
│ ├── spinner/
│ │ ├── README.md
│ │ ├── _spinner.scss
│ │ ├── snippets/
│ │ │ ├── spinner-default.html
│ │ │ └── spinner-single-color.html
│ │ └── spinner.js
│ ├── styleguide.scss
│ ├── switch/
│ │ ├── README.md
│ │ ├── _switch.scss
│ │ ├── snippets/
│ │ │ ├── switch-off.html
│ │ │ └── switch-on.html
│ │ └── switch.js
│ ├── tabs/
│ │ ├── README.md
│ │ ├── _tabs.scss
│ │ ├── snippets/
│ │ │ └── tabs.html
│ │ └── tabs.js
│ ├── template.scss
│ ├── textfield/
│ │ ├── README.md
│ │ ├── _textfield.scss
│ │ ├── snippets/
│ │ │ ├── textfield-expanding-demo.html
│ │ │ ├── textfield-expanding.html
│ │ │ ├── textfield-floating-numeric-demo.html
│ │ │ ├── textfield-floating-numeric.html
│ │ │ ├── textfield-floating-text-demo.html
│ │ │ ├── textfield-floating-text.html
│ │ │ ├── textfield-multi-line-demo.html
│ │ │ ├── textfield-multi-line.html
│ │ │ ├── textfield-numeric-demo.html
│ │ │ ├── textfield-numeric.html
│ │ │ ├── textfield-text-demo.html
│ │ │ └── textfield-text.html
│ │ └── textfield.js
│ ├── third_party/
│ │ └── rAF.js
│ ├── tooltip/
│ │ ├── README.md
│ │ ├── _tooltip.scss
│ │ ├── snippets/
│ │ │ ├── tooltip-large.html
│ │ │ ├── tooltip-multiline.html
│ │ │ ├── tooltip-rich.html
│ │ │ └── tooltip-simple.html
│ │ └── tooltip.js
│ └── typography/
│ ├── README.md
│ ├── _typography.scss
│ ├── demo.css
│ └── demo.html
├── templates/
│ ├── android-dot-com/
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── material.scss
│ │ └── styles.css
│ ├── article/
│ │ ├── index.html
│ │ └── styles.css
│ ├── blog/
│ │ ├── entry.html
│ │ ├── index.html
│ │ └── styles.css
│ ├── dashboard/
│ │ ├── index.html
│ │ └── styles.css
│ ├── portfolio/
│ │ ├── Tutorial/
│ │ │ ├── step01-initial-HTML-setup.html
│ │ │ ├── step02-MDL-layout-component.html
│ │ │ ├── step03-the-grid-component.html
│ │ │ ├── step04-customising-the-layout.html
│ │ │ ├── step05-individual-pages/
│ │ │ │ ├── about.html
│ │ │ │ ├── blog.html
│ │ │ │ ├── contact.html
│ │ │ │ ├── index.html
│ │ │ │ └── portfolio-example01.html
│ │ │ └── styles.css
│ │ ├── about.html
│ │ ├── blog.html
│ │ ├── contact.html
│ │ ├── index.html
│ │ ├── portfolio-example01.html
│ │ └── styles.css
│ └── text-only/
│ ├── index.html
│ └── styles.css
├── test/
│ ├── index.html
│ ├── memory/
│ │ ├── blank.html
│ │ ├── menu.js
│ │ ├── snackbar.js
│ │ ├── test.js
│ │ ├── upgrade-downgrade.js
│ │ └── utils.js
│ ├── unit/
│ │ ├── button.js
│ │ ├── checkbox.js
│ │ ├── componentHandler.js
│ │ ├── data-table.js
│ │ ├── icon-toggle.js
│ │ ├── layout.js
│ │ ├── menu.js
│ │ ├── progress.js
│ │ ├── radio.js
│ │ ├── ripple.js
│ │ ├── slider.js
│ │ ├── snackbar.js
│ │ ├── spinner.js
│ │ ├── switch.js
│ │ ├── tabs.js
│ │ ├── textfield.js
│ │ └── tooltip.js
│ └── visual/
│ ├── index.html
│ ├── style.css
│ └── welcome.html
└── utils/
└── uniffe.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .drone.sec
================================================
eyJhbGciOiJSU0EtT0FFUCIsImVuYyI6IkExMjhHQ00ifQ.j9veXnMfiC38KqZqVlEv-j3kQ4P8M9bmPYrCb3gkGhYNxJAs43Hzj30_rFiPJvW_JFjX2yGIVqGmxImJxDq9EXU0burdWRIcdKywASKtO5UCigwaBx0q_bPcXiPYCvT21ADX9HcukA_e04XcKExPJUJTlOJhfAA747p8lqheBXQjcidZJ6nVc6xt8dLpqyhcRZIX6wbKOKX3p8K60BnlHzqZ2YnnTuqk9XblJRwKwSIuSlJWqSKhYwLpJmWf8mtB9n7_Rn2vU1W3nK4o1j_-o1R6skxraNmdw9sbk26UNBUb8UtTdwbaMt0LnE_CD1TNSHW7gy05bmKjmZxGEXMH_w.gHtDLk7eq3RvXES7.f0peFsiIVOy7XTiYxakjJzPS_3U0rMesmc3PEjXbfz_ywNiGrSpbvA7lvnIgY6VgWNZyXZUmVjj34_FuwRCi6O6dqtRyYVy2-q5cJIVFWvpOtUdlQGcOfSL-TiyJS49AsbiXk0RI6-pi2hA9sfwOX8fbZK4YC1rcvEHc5xUd5WJhn0zRjyV0SowVGktVwjKXznHyxV5FCFqBHq83R7uOQIEm-nmMdlooUqQrWc3sKpwJv7fhyHfu5N5L33SIdrPHVhnc4HfCeuSESTvxV2XwZjzFxcj9Kr4BlnZyG7Dbn8WBaYEDkJ0HTie2h4MbeOewY9_SQ4YfYVhWwFzZTDCmD-Ou09G5siDA_0SyHZpS1JZI0NkKibdIkLEHB_BdpSSyFDTOFRbjf_2beXNOtD8-DCis0ZYR5h3coz6sOZaSde2Sh3IcCOLolaQvt5pZN4JB1JJspLjv6iD5R2VYGTJy8fYfH7juZi6NVq4316eQepoFgtjsjusTkTKcczkSPYxvgnjegdmNQvqKWMgZKcgV9IWdtDZCgBr3W3_K92G0xRkyMnmHevEfC0WzSTYE5SY4spDix2WF-of1SF_jrIjC3LSQlwXCHdeF8yoouWlVDqFvVB5jLlSjJG0yWi7GYgxwnweIhmduO4ojZbHUIX3UGDMYbxZkXiEegLXMCqQtTrkvutZsZFSnmULHCS1J-JF6JVgifnPOn6TSOh7h-FG-x72AtgX6W7_gmZRl_wPFTzDFtkvgsB5g6aB8jycAQfQhFSSOtNfMl4mfwqcT2dAf_orKohwGCwMfnamLOIfzfNcRXE1xHyClHTiTiDK3Nf7MMnvcxxmGq_yVjF9mSffBJMP25hMSMlg3DYqdbT88JVHXHRgE3vrl15BocpHU3E1ZEKF4VEV4bGE2MKkOOW0dBzKqFwAbFBivoD3vZEzKXpwTwg88cLwLPLnqsWyoNRKpWNFhnu6X_BmcCXNI7JP_gQxyRTe7ZHOCOW_oL93cDgA0nGWQG05pI1H87SYhZhByiaUlAwtMbo-wE_aMzwiLYjBdJ4QiOUk4Kzf4-P5QaWBEPEAHwbfuRjtSCPd9LYJzqGdCdabsv3mtgVPNdzDOTnI7mvdD5oLd9XEHV9vNuOI-xjpF4Tz130G_6V0Cvq3-oR2hCHE8ZugX9Qja7KqIwSM6sxV4JAlGv2etfJRqV01mdD2W_CnkSfWBoz6soTHTqrg1y1380DS42WvXNFAUhNj92J6n-W0MNfXWcsaFGRBwjTExerTK3HveEt3iB-gmx3DcPhXyM1FM39DbyQiHbwFV2Aw7cuQP6uYc5qgYPVdxrfrasvwPZweubHtrttZJNbbbBY2wJTbXrUX0X08U4NpDcTf80s43XNjO_P19to-tIz8WBr2BHY_-jA-ea7zIVlZGdn624tUcubHWxUsoci0jBlPX8jWQnhx4MI5vDDVKRSOotJdD7t4BD47SNJLi2H31wGOgi8MS9JTw9g8-ZXdN-WfCN4nNi5NTMhq3FbRBXIV1BRbVhvcWrpp2g4eAsDlv7ycUjcGFfExaePB1RhiqQwj-RSmXz_GbWPwOoUw3lacjoKEcf8787l6NWh9dYRXiaSzM1rNvHg4vNb2LPTkUGsPhtxUj-xO-S4ENw2FBQnPkgN0IHRKPPcagdUEWWGMEMBLFjZrTF1ihMEFLga6MnTMOoFPR7y9NjpBIHBm324aEV0IUfi2o4ML-IitbFhWSUeeyIKqBOW3ZFZMuNOQYlt0obuZYhS77vT-VIgNdr2OiGj8FSNkN6uqi-IxvjRqKBAnQaBuRgfPtMAg2AoQ4FiiALEZIEg3V9SunpmNH8WEonz3Pka-_en9dcRXffzrlVKyUAPs45Tg5330JN6OaI6jOtTSLZN0KEY2p77sTPxuPQsG5TuIX9g6mZiRZVFlzlJsi2VfhFdmR0GtZV8cwp0Sc9PVtUHkuAfZlHGaWTBGB4P7ttJlHu9iU3pEXMWrOABgf5JWan4uBwPDw_faU7vKvZ6s6PEIG7uM13RPTAnmQKCcn5xC_8Rao_GIseAQG-BKDZAsAKnJFXuUmwrwoaMOxyF6S8pw-1IFh-vr0FMne3DIl-K9T5NEjD7nF-HAXciVi4dGd1ayTymq6adh68nkNis4-ANauctQlFzGNp0_Na-3BaiDJi_DGhjXFY-w5ckLLlTuEaYVc99y8DQcTuOjfhTKo1AKcprKBe_FNmpwxjA6Pb4PO8NLOG7jksyPueFRgjfnITeTzRXuW-L4v63jR20It9wiW4T26NsYGo0sdz7C7DW3apD6Tv2wcqdr7_rbNhzqjDKBlFG-cuGBWkTaDdb5QiMxAqpBp71xt7IE4zh9vpUEUo0jL7uliKzPKch8nttjcNbhXBVkplWRwCzOLK9Kwbb1WPgNIt5Z_-qigFeHWo6p1r9ZZnO2uIhX5fXQ7ufja3NN2D5tJ1DjnHT0J-ubJd-pq2U5tOOuDRKuDlVXxa_0vWDLGEp5pOp0BQa6vUj9f8X8g5N9iajAappzI_zLG4HzEG8P0t4xDO6pO8NWSwcHgXl5VVIsXf7dVhlquH_ewkOUVNRXBk7GrhGxYjygX_yscHo57fY4O0ePexeuXoZxQw-dob99C4ZrnQQ0RhSU0n7WpByssezhB04pYbAzx_A998b5MP2gxTe4kVARgv5AgInzwx4KlrgCLpXt7bq3ZpDvk2SHSNVbGpkNFVNj3frYfo7NVxET9EAJ7VvoVeuyb7PBL-ix4cdbHkbEjp14PvvZEzJxz6ad7RflXkrd2PMJEiJ6ay8wYPFEPjO8v31cEwp9d8TOhsDfQ0O2nTGmcK_BG9ZFjIvZpIyYlrgSdcXOncL4i7LCDOmMlJdwEvAm4HMhnuMUwdLzty_V0iXqPyJR7gSpyhEgV0e7XEieUsPTNDcZ6yw14zQW6m7rjqg8XFXPw9JCTbqUIGgDAHDrSLGaknemFzlek6nq_KrTAhxlFFyopNNHMgMkjbqgw8kyFo-YVZ5dkvwgX8ux0pxW8MgBVTI4wz3vonPX-ilBKAOdrujRd6282Nih0u9ri6UjFSqikoUN_hu_K6O7gQdATrUNKEjYJc_sMKegaOk1jraogA8_YG8t-oWu8YEjzTjkehdPkhiqrCLZUDHsq3mFu0yqT4AyRjb-4S53Zfs6DqtQv8THl-iimvCV1GFTquN0fBnQRjdJh.YLmdpxyEz-RjqU8lHkRGYg
================================================
FILE: .drone.yml
================================================
# Note: if you modify this file, don't forget to update
# checksum in .drone.sec with:
# drone secure --repo google/material-design-lite --checksum
clone:
depth: 1
cache:
mount:
- node_modules
matrix:
NODE_VERSION:
- 4
- 5
build:
image: crhym3/ci:node$$NODE_VERSION-go15
environment:
- CHROME=https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
- WEBDRIVER=http://chromedriver.storage.googleapis.com/2.16/chromedriver_linux64.zip
- DISPLAY=:99
commands:
- npm update -qq
# build and unit test
- gulp all
- gulp mocha:closure
# additional browser tests
# do this after the build and unit tests to fail fast
- Xvfb $DISPLAY &
- curl -sSLo chrome.deb $CHROME && dpkg -i chrome.deb
- curl -sSLo driver.zip $WEBDRIVER && unzip -q driver.zip -d /usr/bin
publish:
# see http://addons.drone.io/google_cloud_storage/ for details
gcs:
when:
repo: google/material-design-lite
branch: master
event: push
matrix:
NODE_VERSION: 5
auth_key: >
$$SERVICE_ACCOUNT_KEY
source: dist
target: mdl-staging
cache_control: public,max-age=0
acl:
- allUsers:READER
gzip:
- html
- css
- js
- svg
================================================
FILE: .editorconfig
================================================
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .gitattributes
================================================
* text=auto
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
** PLEASE READ THIS BEFORE FILING AN ISSUE **
## Feature Requests / Breaking Changes in mdl-1.x
The MDL core team has actively begun work on the next major version of MDL, dubbed **MDL v2**. Because we are a small team that's hyper-focused on delivering the best Material Design Library possible for the web, _it is highly unlikely that we will be actively working on new features or making backwards-incompatible changes for MDL as it currently exists._
If there is a non-breaking feature you would like to see implemented in `mdl-1.x` and are willing to contribute, we'd be happy to offer assistance with you doing so. But we will not personally be actively working on said features.
While we are just getting started with our next version of MDL, you can see our current progress on [master](https://github.com/google/material-design-lite/tree/master) as well as an overview of the direction we're headed in our [(WIP) developer guide](https://github.com/google/material-design-lite/blob/master/docs/DEVELOPER.md) as well as our [initial POC branch](https://github.com/google/material-design-lite/tree/experimental/v2-architecture-poc) for our new architecture.
If you're interested in information for a specific MDL v2 component, check out our [v2-component issues](https://github.com/google/material-design-lite/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Av2-component) to see which v2 milestone it's associated with and feel free to subscribe to that issue for updates.
## Bugs
Please include the following information with your bug report:
> What MDL Version are you using? (please be specific, e.g. _major.minor.patch_)
> What browser(s) is this bug affecting (including version)?
> What OS (and version) are you using?
> What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it?
> What is the expected behavior?
> What is the actual behavior?
> Any other information you believe would be useful?
================================================
FILE: .gitignore
================================================
node_modules
.tmp
gulp-cache
.DS_Store
docs/out
.publish
/dist
.drone.sec.yml
================================================
FILE: .jscsrc
================================================
{
"preset": "google",
"disallowSpacesInAnonymousFunctionExpression": null,
"validateLineBreaks": "LF",
"validateIndentation": 2,
"excludeFiles": ["node_modules/**"],
"maximumLineLength": 130,
"validateQuoteMarks": "'",
"requireDotNotation": false,
"requireCamelCaseOrUpperCaseIdentifiers": {"allowedPrefixes": ["opt_"]},
"jsDoc": {
"checkAnnotations": {
"preset": "closurecompiler",
"extra": {
"type": true,
"suppress": true
}
},
"checkTypes": "strictNativeCase",
"enforceExistence": "exceptExports"
}
}
================================================
FILE: .jshintrc
================================================
{
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"newcap": true,
"noarg": true,
"undef": true,
"unused": "vars",
"strict": true,
"sub": true,
"globals": {
"componentHandler": true
}
}
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to Material Design Lite
We'd love for you to contribute to our source code and to make Material Design Lite even better than it is today! Here are the guidelines we'd like you to follow:
- [Code of Conduct](#coc)
- [Question or Problem?](#question)
- [Issues and Bugs](#issue)
- [Feature Requests](#feature)
- [Submission Guidelines](#submit)
- [Coding Rules](#rules)
- [Signing the CLA](#cla)
## <a name="coc"></a> Code of Conduct
As contributors and maintainers of the Material Design Lite project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities.
Communication through any of Material Design Lite's channels (GitHub, StackOverflow, Google+, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to the Material Design Lite project to do the same.
If any member of the community violates this code of conduct, the maintainers of the Material Design Lite project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate.
If you are subject to or witness unacceptable behavior, or have any other concerns, please drop us a line at addyo@google.com.
## <a name="question"></a> Got a Question or Problem?
If you have questions about how to use Material Design Lite, please direct these to [StackOverflow][stackoverflow] and use the `material-design-lite` tag. We are also available on GitHub issues.
If you feel that we're missing an important bit of documentation, feel free to
file an issue so we can help. Here's an example to get you started:
```
Component (if any):
What are you trying to do or find out more about?
Where have you looked?
Where did you expect to find this information?
```
Or, if you're looking for a new design template:
```
Please provide a short summary of the template you’re looking for.
What makes this template interesting or challenging from a design perspective?
Please provide any URLs to good examples of this type of page that you may have come across.
```
## <a name="issue"></a> Found an Issue?
If you find a bug in the source code or a mistake in the documentation, you can help us by
submitting an issue to our [GitHub Repository][github]. Even better you can submit a Pull Request
with a fix.
See [below](#submit) for some guidelines.
## <a name="feature"></a> Want a Feature?
You can request a new feature by submitting an issue to our [GitHub Repository][github].
Here is a template to get you started:
```
Is this a new component, or a missing feature in an existing one?
Component name:
Material Design spec URL for the component (if any):
What does this component or feature allow you to do which isn’t possible at the moment?
Please provide any URLs or screenshots of good examples of usage of this component or feature that you may have come across.
```
If you would like to implement a new feature then consider what kind of change it is:
* **Major Changes** that you wish to contribute to the project should be discussed first on our
[issue tracker][] so that we can better coordinate our efforts, prevent
duplication of work, and help you to craft the change so that it is successfully accepted into the
project.
* **Small Changes** can be crafted and submitted to the [GitHub Repository][github] as a Pull Request.
## <a name="submit"></a> Submission Guidelines
### Submitting an Issue
Before you submit your issue search the archive, maybe your question was already answered.
If your issue appears to be a bug, and hasn't been reported, open a new issue.
Help us to maximize the effort we can spend fixing issues and adding new
features, by not reporting duplicate issues. Providing the following information will increase the
chances of your issue being dealt with quickly:
* **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
* **Motivation for or Use Case** - explain why this is a bug for you
* **Material Design Lite Version(s)** - is it a regression?
* **Browsers and Operating System** - is this a problem with all browsers or only IE9?
* **Reproduce the Error** - provide a live example (using JSBin) or a unambiguous set of steps.
* **Related Issues** - has a similar issue been reported before?
* **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
causing the problem (line of code or commit)
**If you get help, help others. Good karma rulez!**
Here's a template to get you started:
```
MDL version:
Browser:
Browser version:
Operating system:
Operating system version:
URL, if applicable (you can use a [codepen as a starting point][http://codepen.io/pen/def?fork=xGWgXa]):
What steps will reproduce the problem:
1.
2.
3.
What is the expected result?
What happens instead of that?
Please provide any other information below, and attach a screenshot if possible.
```
### Submitting a Pull Request
Before you submit your pull request consider the following guidelines:
* Search [GitHub](https://github.com/google/material-design-lite/pulls) for an open or closed Pull Request
that relates to your submission. You don't want to duplicate effort.
* Please sign our [Contributor License Agreement (CLA)](#cla) before sending pull
requests. We cannot accept code without this.
* Make your changes in a new git branch:
```shell
git checkout -b my-fix-branch master
```
* Create your patch, **including appropriate test cases**.
* Follow our [Coding Rules](#rules).
* Run the full Material Design Lite test suite (`gulp test`),
and ensure that all tests pass.
* Avoid checking in files that shouldn't be tracked (e.g `node_modules`, `gulp-cache`, `.tmp`, `.idea`). We recommend using a [global .gitignore](https://help.github.com/articles/ignoring-files/#create-a-global-gitignore) for this.
* Make sure **not** to include a recompiled version of the files found in `/css` and `/js` as part of your PR. We will generate these automatically.
* Commit your changes using a descriptive commit message.
```shell
git commit -a
```
Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
* Build your changes locally to ensure all the tests pass:
```shell
gulp
```
* Push your branch to GitHub:
```shell
git push origin my-fix-branch
```
* In GitHub, send a pull request to `material-design-lite:master`.
* If we suggest changes then:
* Make the required updates.
* Re-run the Material Design Lite test suite to ensure tests are still passing.
* Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
```shell
git rebase master -i
git push origin my-fix-branch -f
```
That's it! Thank you for your contribution!
#### After your pull request is merged
After your pull request is merged, you can safely delete your branch and pull the changes
from the main (upstream) repository:
* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:
```shell
git push origin --delete my-fix-branch
```
* Check out the master branch:
```shell
git checkout master -f
```
* Delete the local branch:
```shell
git branch -D my-fix-branch
```
* Update your master with the latest upstream version:
```shell
git pull --ff upstream master
```
## <a name="rules"></a> Coding Rules
We generally follow the [Google JavaScript style guide][js-style-guide] with a few minor exceptions documented in our [JSCS configuration][jscs-config].
[JSCS](http://jscs.info) is a tool for linting code against a style guide and has plugins available for both editors and build tools. Should
you find that you would prefer to automatically format your code to match our style guide, you can use the JSCS [autoformatting][autoformatting]
feature.
## <a name="cla"></a> Signing the CLA
Please sign our Contributor License Agreement (CLA) before sending pull requests. For any code
changes to be accepted, the CLA must be signed. It's a quick process, we promise!
* For individuals we have a [simple click-through form][individual-cla].
* For corporations we'll need you to
[print, sign and one of scan+email, fax or mail the form][corporate-cla].
*This guide was inspired by the [AngularJS contribution guidelines](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md).*
[github]: https://github.com/google/material-design-lite
[issue tracker]: https://github.com/google/material-design-lite/issues
[individual-cla]: http://code.google.com/legal/individual-cla-v1.0.html
[corporate-cla]: http://code.google.com/legal/corporate-cla-v1.0.html
[js-style-guide]: http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
[jsbin]: http://jsbin.com/
[stackoverflow]: http://stackoverflow.com/questions/tagged/material-design-lite
[global-gitignore]: https://help.github.com/articles/ignoring-files/#create-a-global-gitignore
[autoformatting]: https://medium.com/@addyosmani/auto-formatting-javascript-code-style-fe0f98a923b8
[jscs-config]: https://github.com/google/material-design-lite/blob/master/.jscsrc
================================================
FILE: LICENSE
================================================
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright 2015 Google Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
All code in any directories or sub-directories that end with *.html or
*.css is licensed under the Creative Commons Attribution International
4.0 License, which full text can be found here:
https://creativecommons.org/licenses/by/4.0/legalcode.
As an exception to this license, all html or css that is generated by
the software at the direction of the user is copyright the user. The
user has full ownership and control over such content, including
whether and how they wish to license it.
================================================
FILE: README.md
================================================
# Material Design Lite
[](https://badge.fury.io/gh/google%2Fmaterial-design-lite)
[](https://badge.fury.io/js/material-design-lite)
[](https://badge.fury.io/bo/material-design-lite)
[](https://gitter.im/google/material-design-lite)
[](https://david-dm.org/google/material-design-lite)
> An implementation of [Material Design](http://www.google.com/design/spec/material-design/introduction.html)
components in vanilla CSS, JS, and HTML.
Material Design Lite (MDL) lets you add a Material Design look and feel to your
static content websites. It doesn't rely on any JavaScript frameworks or
libraries. Optimized for cross-device use, gracefully degrades in older
browsers, and offers an experience that is accessible from the get-go.
> ### Limited support
> Material Design Lite is now in limited support, with development having moved to the
> [Material Components for the web](https://github.com/material-components/material-components-web) repository.
> No further development is taking place in MDL by the core team, but we are happy to review PRs, fix critical bugs and
> push out new releases. No breaking changes will be accepted.
## Use MDL on your site?
**This document is targeted at developers that will contribute to or compile
MDL. If you are looking to use MDL on your website or web app please head to
[getmdl.io](http://getmdl.io).**
## Browser Support
| IE9 | IE10 | IE11 | Chrome | Opera | Firefox | Safari | Chrome (Android) | Mobile Safari |
|-----|------|------|--------|-------|---------|--------|------------------|---------------|
| B | A | A | A | A | A | A | A | A |
A-grade browsers are fully supported. B-grade browsers will gracefully degrade
to our CSS-only experience.
### Download / Clone
Clone the repo using Git:
```bash
git clone https://github.com/google/material-design-lite.git
```
Alternatively you can [download](https://github.com/google/material-design-lite/archive/master.zip)
this repository.
Windows users, if you have trouble compiling due to line endings then make sure
you configure git to checkout the repository with `lf` (unix) line endings. This
can be achieved by setting `core.eol`.
```bash
git config core.eol lf
git config core.autocrlf input
git rm --cached -r .
git reset --hard
```
> Remember, the master branch is considered unstable. Do not use this in
production. Use a tagged state of the repository, npm, or bower for stability!
## Feature requests
MDL is currently in limited support mode, with no further development taking place by the core team.
We are happy to accept and review pull requests for new functionality, however, as long as there are no breaking
changes.
## Want to contribute?
If you found a bug, have any questions or want to contribute. Follow our
[guidelines](https://github.com/google/material-design-lite/blob/mdl-1.x/CONTRIBUTING.md),
and help improve the Material Design Lite. For more information visit our
[wiki](https://github.com/google/material-design-lite/wiki).
Please use the default branch, `mdl-1.x`.
Take note that [Material Components for Web](https://github.com/material-components/material-components-web), which is MDL v2, is under early Alpha stages (which means everything is a moving target, and we can change anything at any moment). Use with caution.
However, we would absolutely love to have people testing MCW and provide feedback about their experiences using it, especially integrating with other frameworks and libraries.
## License
© Google, 2015. Licensed under an
[Apache-2](https://github.com/google/material-design-lite/blob/master/LICENSE)
license.
================================================
FILE: bower.json
================================================
{
"name": "material-design-lite",
"version": "1.3.0",
"homepage": "https://github.com/google/material-design-lite",
"authors": [
"Material Design Lite team"
],
"description": "Material Design Components in CSS, JS and HTML",
"main": [
"material.min.css",
"material.min.js"
],
"keywords": [
"material",
"design",
"styleguide",
"style",
"guide"
],
"license": "Apache-2",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"./lib/.bower_components",
"test",
"tests"
]
}
================================================
FILE: docs/_assets/codepen.js
================================================
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
function CodeBlockCodePen() {
'use strict';
this.codepenButtons = document.getElementsByClassName('codepen-button');
this.init();
}
// Also insert the MDL Library.
CodeBlockCodePen.prototype.MDLIBS = [
'<!-- Material Design Lite -->',
'<script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>',
'<link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.indigo-pink.min.css">',
'<!-- Material Design icon font -->',
'<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">'
];
/**
* Creates CodePen buttons in all code blocks (`pre`) that are HTML.
*/
CodeBlockCodePen.prototype.init = function() {
'use strict';
[].slice.call(this.codepenButtons).forEach(function(form) {
// Attach the click event to the codepen button.
form.addEventListener('click', this.clickHandler(form, form.parentNode));
}, this);
};
/**
* Extracts the parts of the text that is inside occurrences of the tag and
* endTag.
* @param {String} tag The start tag which content we need to extract
* @param {String} endTag The end tag which content we need to extract
* @param {String} text The text for which we need to extract the content in
* the given tags
* @return {Object} An Object with 2 attributes: textRemainder which contains
* the text not inside any of the given tag. and tagContent
* which contains a concatenation of what was inside the tags
*/
CodeBlockCodePen.prototype.extractTagsContent = function(tag, endTag, text) {
'use strict';
var tagStartIndex;
var tagEndIndex;
var tagText = '';
while (text.indexOf(tag) !== -1) {
tagStartIndex = text.indexOf(tag);
tagEndIndex = text.indexOf(endTag);
tagText += text.substring(tagStartIndex + tag.length, tagEndIndex);
text = text.substring(0, tagStartIndex).trim() + '\n' +
text.substr(tagEndIndex + endTag.length).trim();
}
return {textRemainder: text, tagContent: tagText};
};
/**
* Click handler for CodePen buttons. Prepares the content for CodePen and
* submits the form.
* @param {HTMLElement} form The CodePen form
* @param {HTMLElement} pre The pre containing the code to send to CodePen
* @return {function} The click handler
*/
CodeBlockCodePen.prototype.clickHandler = function(form, pre) {
'use strict';
return function() {
// Track codepen button clicks
if (typeof ga !== 'undefined') {
ga('send', {
hitType: 'event',
eventCategory: 'codepen',
eventAction: 'click',
eventLabel: window.location.pathname +
(window.location.hash ? window.location.hash : '')
});
}
// Modify relative URLs to make them absolute.
var code = pre.textContent.replace('../assets/demos/',
window.location.origin + '/assets/demos/');
// Extract <style> blocks from the source code.
var cssExtractResult = this.extractTagsContent('<style>', '</style>',
code);
code = cssExtractResult.textRemainder;
var css = cssExtractResult.tagContent.trim();
// Extract <script> blocks from the source code.
var jsExtractResult = this.extractTagsContent('<script>', '</script>',
code);
code = jsExtractResult.textRemainder.trim();
var js = jsExtractResult.tagContent.trim();
// Remove <input> children from previous clicks.
while (form.firstChild) {
form.removeChild(form.firstChild);
}
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'data');
input.setAttribute('value', JSON.stringify(
{
title: 'Material Design Lite components demo',
html:
'<html>\n' +
' <head>\n ' + this.MDLIBS.join('\n ') + '\n </head>\n' +
' <body>\n ' + code.split('\n').join('\n ') + '\n </body>\n' +
'</html>',
css: css,
js: js}));
form.appendChild(input);
form.submit();
}.bind(this);
};
window.addEventListener('load', function() {
'use strict';
new CodeBlockCodePen();
});
================================================
FILE: docs/_assets/components.css
================================================
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.mdl-components {
display: flex;
}
.mdl-components-index {
box-sizing: border-box;
position: relative;
padding-top: 64px;
}
.mdl-components-index-text {
max-width: 960px;
margin: 0;
}
.mdl-components-index-text .mdl-components-dl {
justify-content: flex-start;
margin-left: 40px;
}
.mdl-components-img {
position: absolute;
margin-top: 24px;
left: 40px;
height: 90%;
width: 90%;
max-height: 600px;
background: url('../assets/compindex_2x.png') no-repeat top left / contain;
}
.mdl-components-text {
margin: 0;
padding: 0;
}
mdl-components-dl {
padding: 0.5em;
width: 80%;
}
mdl-components-dt {
float: left;
clear: left;
width: 150px;
font-weight: bold;
}
mdl-components-dd {
margin: 0 0 0 150px;
padding: 0 0 0.5em 0;
}
.mdl-components .mdl-components__nav {
display: inline-block;
background: #fff;
width: 200px;
box-sizing: border-box;
padding: 24px 0;
flex-shrink: 0;
z-index: 1;
}
.mdl-components .mdl-components__pages {
display: inline-block;
flex-grow: 1;
}
.mdl-components .mdl-components__pages {
padding-bottom: 120px;
}
.mdl-components .mdl-components__link {
margin: 16px;
font-weight: normal;
color: rgba(0, 0, 0, 0.66);
position: relative;
padding-left: 72px;
min-height: 48px;
display: table;
line-height: 48px;
}
.mdl-components .mdl-components__link.is-active {
font-weight: bold;
color: #c2185b;
}
.content {
background: #fafafa;
}
.mdl-components .mdl-components__page {
display: none;
min-height: 1000px;
}
.mdl-components .docs-toc {
margin-bottom: 60px;
margin-left: 32px;
}
.mdl-components .component-title {
margin-bottom: 60px;
margin-top: 30px;
margin-left: 32px;
}
.mdl-components .component-title h3 {
font-size: 16px;
font-weight: 500;
margin-top: 80px;
text-transform: uppercase;
}
.mdl-components .snippet-code pre.language-markup code {
padding-left: 40px;
}
.mdl-components .mdl-components__page.is-active {
display: block;
}
.mdl-components__link-image {
display: inline-block;
margin: 0 10px;
position: absolute;
left: 0;
top: 0;
background-color: #ddd;
background-position: center;
background-repeat: no-repeat;
background-size: auto 48px;
border-radius: 50%;
height: 46px;
width: 46px;
}
.mdl-components__warning {
width: 100%;
max-width: 640px;
margin: 0 auto;
background-color: #FFF9C4;
padding: 16px;
border-radius: 2px;
color: #212121;
}
.mdl-components__link.is-active .mdl-components__link-image {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
0 3px 3px -2px rgba(0, 0, 0, 0.2),
0 1px 8px 0 rgba(0, 0, 0, 0.12);
}
.docs-readme {
width: 100%;
max-width: 640px;
margin: 0 auto;
}
.docs-readme .language-markup {
width: 100%;
}
@media (max-width: 850px) {
.mdl-components .component-title,
.mdl-components .docs-toc {
margin-left: 0;
}
.mdl-components .snippet-code pre.language-markup code {
padding-left: 8px;
}
.docs-layout-content {
position: relative;
height: 100%;
overflow: hidden !important;
}
.mdl-components .mdl-components__nav {
position: fixed;
top: 64px;
left: 0;
display: block;
flex-wrap: nowrap;
width: 100%;
height: 120px;
overflow-x: auto;
overflow-y: hidden;
padding: 8px;
z-index: 100;
white-space: nowrap;
}
.mdl-components-index-text .mdl-components-dl {
margin: 0px;
}
.mdl-components-img {
left: 8px;
}
.components .content .about-panel {
padding: 8px;
}
.mdl-components__nav .mdl-components__link {
display: inline-block;
vertical-align: top;
height: 100%;
margin: 0;
width: auto;
min-width: 48px;
margin-right: 8px;
padding-left: 0px;
padding-top: 10px;
}
.mdl-components__nav .mdl-components__link > *{
display: block;
width: auto;
margin: 0 auto;
text-align: center;
}
.mdl-components__nav .mdl-components__link > .mdl-components__link-image {
position: static;
width: 48px;
}
.content {
padding-top: 64px !important;
padding-left: 0 !important;
overflow-y: auto;
height: 100%;
}
}
================================================
FILE: docs/_assets/components.js
================================================
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
function MaterialComponentsNav() {
'use strict';
this.element_ = document.querySelector('.mdl-js-components');
if (this.element_) {
this.componentLinks = this.element_.querySelectorAll('.mdl-components__link');
this.activeLink = null;
this.activePage = null;
this.init();
}
}
/**
* Stores a Map of the components links using their corresponding hashFragment
* as key.
* @type {Object.<string, HTMLElement>}
* @private
*/
MaterialComponentsNav.prototype.linksMap_ = {};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
* @enum {string}
* @private
*/
MaterialComponentsNav.prototype.CssClasses_ = {
ACTIVE: 'is-active'
};
/**
* Initializes the MaterialComponentsNav component.
*/
MaterialComponentsNav.prototype.init = function() {
'use strict';
for (var i = 0; i < this.componentLinks.length; i++) {
this.componentLinks[i].addEventListener('click',
this.clickHandler(this.componentLinks[i]));
// Mapping the list of links using their hash fragment.
this.linksMap_['#' + this.componentLinks[i].href.split('#')[1]] =
this.componentLinks[i];
}
// If a Hash fragment is available on the page then display the section.
this.displaySectionForFragment(window.location.hash.split('/')[0]);
// If the hash fragment changes we display the corresponding section.
// We won't support older browser as it's not efficient.
if ('onhashchange' in window) {
var this_ = this;
window.onhashchange = function () {
this_.displaySectionForFragment(window.location.hash.split('/')[0]);
};
}
};
/**
* Displays the section for the given hash fragment.
* @param {String} fragment The hash fragment used in the link to the section
*/
MaterialComponentsNav.prototype.displaySectionForFragment = function(fragment) {
'use strict';
if (fragment && this.linksMap_[fragment] && this.linksMap_[fragment].click) {
this.linksMap_[fragment].click();
} else if (!fragment || fragment === '' || fragment === '#') {
this.displayIndexPage();
}
};
/**
* Displays the index page for the components.
*/
MaterialComponentsNav.prototype.displayIndexPage = function() {
'use strict';
if (this.activeLink) {
this.activeLink.classList.remove(this.CssClasses_.ACTIVE);
}
this.activeLink = null;
if (this.activePage) {
this.activePage.classList.remove(this.CssClasses_.ACTIVE);
}
this.activePage = this.element_.querySelector('#index-section');
this.activePage.classList.add(this.CssClasses_.ACTIVE);
}
/**
* Returns a clickHandler for a navigation link.
* @param {HTMLElement} link the navigation link
* @return {function} the click handler
*/
MaterialComponentsNav.prototype.clickHandler = function(link) {
'use strict';
return function(e) {
e.preventDefault();
var page = this.findPage(link);
if (this.activePage) {
this.activePage.classList.remove(this.CssClasses_.ACTIVE);
}
if (this.activeLink) {
this.activeLink.classList.remove(this.CssClasses_.ACTIVE);
}
this.activePage = page;
this.activeLink = link;
link.classList.add(this.CssClasses_.ACTIVE);
page.classList.add(this.CssClasses_.ACTIVE);
// Add an history entry and display the hash fragment in the URL.
var section = window.location.hash.split('/')[0];
var linkWithoutHash = link.href.split('#')[1];
if (section !== '#' + linkWithoutHash) {
history.pushState(null, 'Material Design Lite', link);
// Scroll to top of page
document.getElementById('content').scrollTop = 0;
// Track the specific component page view in Google analytics
if (ga) {
ga('send', 'pageview', '/components/' + linkWithoutHash);
}
}
return true;
}.bind(this);
};
/**
* Finds the corresponding page for a navigation link.
* @param {HTMLElement} link the navigation link
* @return {HTMLElement} the corresponding page
*/
MaterialComponentsNav.prototype.findPage = function(link) {
'use strict';
var href = link.href.split('#')[1];
return this.element_.querySelector('#' + href);
};
window.addEventListener('load', function() {
'use strict';
new MaterialComponentsNav();
});
================================================
FILE: docs/_assets/customizer.css
================================================
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
#wheel {
position: relative;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.is-small-screen .mdl-gen #wheel {
min-height: 100vw;
}
#wheel svg {
width: 100%;
height: 100%;
}
@media (min-width: 840px) {
#wheel svg {
max-width: 100%;
width: 100%;
}
}
#wheel .mdl-gen-download {
position: absolute;
left: 50%;
top: 50%;
}
#wheel .mdl-gen-download .mdl-button {
transform: translate(-50%, -50%);
}
#wheel g[data-color] {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0.0, 1, 1);
}
#wheel .selector {
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.4, 0.0, 1, 1);
fill: #BDBDBD;
}
#wheel .selected .selector {
opacity: 1;
}
#wheel .label {
text-anchor: middle;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.4, 0.0, 1, 1);
fill: white;
font-size: 24px;
}
#wheel .selected--1 .label--1,
#wheel .selected--2 .label--2 {
opacity: 1;
}
#wheel svg.hide-nonaccents g[data-color="Blue Grey"]:not(.selected),
#wheel svg.hide-nonaccents g[data-color="Brown"]:not(.selected),
#wheel svg.hide-nonaccents g[data-color="Grey"]:not(.selected) {
opacity: 0.12;
}
#wheel .selected {
opacity: 1 !important;
}
.mdl-gen > .mdl-grid {
max-width: 1280px;
padding: 0;
}
.mdl-gen__preview {
position: relative;
height: 350px;
}
.mdl-gen__preview .mdl-layout__container {
height: auto;
}
.mdl-gen__preview .mdl-layout__content {
padding: 32px;
background-color: #EFEFEF;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.mdl-gen__preview .mdl-layout__content .mdl-button {
margin: 0;
}
.mdl-gen__preview .mdl-layout__content .mdl-button--fab {
align-self: flex-end;
}
.mdl-gen__preview .mdl-layout__content h3 {
margin-top: 0;
}
.mdl-gen__panel--right {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
padding-bottom: 0;
}
.mdl-gen__desc strong,
.mdl-gen__desc p {
display: block;
margin-bottom: 32px;
color: rgba(0, 0, 0, 0.54);
}
.mdl-gen__cdn .demo-code {
box-sizing: border-box;
}
.content {
margin-left: auto;
margin-right: auto;
max-width: 1280px;
margin-bottom: 80px;
}
================================================
FILE: docs/_assets/customizer.js
================================================
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*global MaterialCustomizer:true,Prism:true,ga:true*/
/* exported init */
function init() {
'use strict';
var wheel = document.querySelector('#wheel > svg');
var cdn = document.querySelector('.mdl-gen__cdn .mdl-gen__cdn-link');
var mc = new MaterialCustomizer(wheel, cdn);
// Workaround for IE.
var dl = document.querySelector('#download');
dl.addEventListener('click', function() {
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(this.blob, 'material.min.css');
}
}.bind(mc));
// Hook up GA event
dl.addEventListener('click', function() {
ga('send', {
hitType: 'event',
eventCategory: 'customizer',
eventAction: 'download',
eventLabel: mc.getSelectedPrimary() + '-' + mc.getSelectedSecondary()
});
});
var clickCtr = 0;
cdn.addEventListener('click', function() {
var selection = window.getSelection();
selection.removeAllRanges();
var range = document.createRange();
if (clickCtr === 0) {
var link = cdn.querySelectorAll('.token.attr-value')[1];
range.setStart(link, 2);
range.setEnd(link, 3);
} else {
range.setStart(cdn, 1);
range.setEnd(cdn, 2);
}
selection.addRange(range);
clickCtr = (clickCtr + 1) % 2;
});
// Prevent browser's selection handling
cdn.addEventListener('mouseup', function(ev) {
ev.preventDefault();
});
cdn.addEventListener('mousedown', function(ev) {
ev.preventDefault();
});
document.addEventListener('mouseup', function() {
if (window.getSelection().toString().indexOf('.min.css') !== -1) {
ga('send', {
hitType: 'event',
eventCategory: 'customizer',
eventAction: 'copy',
eventLabel: mc.getSelectedPrimary() + '-' + mc.getSelectedSecondary()
});
}
});
// Download template
var req = new XMLHttpRequest();
req.onload = function() {
mc.template = this.responseText;
mc.highlightField('Indigo');
mc.highlightField('Pink');
window.requestAnimationFrame(function() {
mc.updateCDN();
mc.updateStylesheet();
});
};
req.open('get', '../material.min.css.template', true);
req.send();
}
MaterialCustomizer = (function() {
'use strict';
var COLORS = ['Cyan', 'Teal', 'Green', 'Light Green', 'Lime',
'Yellow', 'Amber', 'Orange', 'Brown', 'Blue Grey',
'Grey', 'Deep Orange', 'Red', 'Pink', 'Purple',
'Deep Purple', 'Indigo', 'Blue', 'Light Blue'];
var FORBIDDEN_ACCENTS = ['Blue Grey', 'Brown', 'Grey'];
var MD_COLORS = ['Red', 'Pink', 'Purple', 'Deep Purple', 'Indigo',
'Blue', 'Light Blue', 'Cyan', 'Teal', 'Green',
'Light Green', 'Lime', 'Yellow', 'Amber', 'Orange',
'Deep Orange', 'Brown', 'Grey', 'Blue Grey'];
var MD_SHADES = ['50', '100', '200', '300', '400',
'500', '600', '700', '800', '900',
'A100', 'A200', 'A400', 'A700'];
var MD_PALETTE = [
['255,235,238', '255,205,210', '239,154,154', '229,115,115', '239,83,80',
'244,67,54', '229,57,53', '211,47,47', '198,40,40', '183,28,28',
'255,138,128', '255,82,82', '255,23,68', '213,0,0'],
['252,228,236', '248,187,208', '244,143,177', '240,98,146', '236,64,122',
'233,30,99', '216,27,96', '194,24,91', '173,20,87', '136,14,79',
'255,128,171', '255,64,129', '245,0,87', '197,17,98'],
['243,229,245', '225,190,231', '206,147,216', '186,104,200', '171,71,188',
'156,39,176', '142,36,170', '123,31,162', '106,27,154', '74,20,140',
'234,128,252', '224,64,251', '213,0,249', '170,0,255'],
['237,231,246', '209,196,233', '179,157,219', '149,117,205', '126,87,194',
'103,58,183', '94,53,177', '81,45,168', '69,39,160', '49,27,146',
'179,136,255', '124,77,255', '101,31,255', '98,0,234'],
['232,234,246', '197,202,233', '159,168,218', '121,134,203', '92,107,192',
'63,81,181', '57,73,171', '48,63,159', '40,53,147', '26,35,126',
'140,158,255', '83,109,254', '61,90,254', '48,79,254'],
['227,242,253', '187,222,251', '144,202,249', '100,181,246', '66,165,245',
'33,150,243', '30,136,229', '25,118,210', '21,101,192', '13,71,161',
'130,177,255', '68,138,255', '41,121,255', '41,98,255'],
['225,245,254', '179,229,252', '129,212,250', '79,195,247', '41,182,246',
'3,169,244', '3,155,229', '2,136,209', '2,119,189', '1,87,155',
'128,216,255', '64,196,255', '0,176,255', '0,145,234'],
['224,247,250', '178,235,242', '128,222,234', '77,208,225', '38,198,218',
'0,188,212', '0,172,193', '0,151,167', '0,131,143', '0,96,100',
'132,255,255', '24,255,255', '0,229,255', '0,184,212'],
['224,242,241', '178,223,219', '128,203,196', '77,182,172', '38,166,154',
'0,150,136', '0,137,123', '0,121,107', '0,105,92', '0,77,64',
'167,255,235', '100,255,218', '29,233,182', '0,191,165'],
['232,245,233', '200,230,201', '165,214,167', '129,199,132', '102,187,106',
'76,175,80', '67,160,71', '56,142,60', '46,125,50', '27,94,32',
'185,246,202', '105,240,174', '0,230,118', '0,200,83'],
['241,248,233', '220,237,200', '197,225,165', '174,213,129', '156,204,101',
'139,195,74', '124,179,66', '104,159,56', '85,139,47', '51,105,30',
'204,255,144', '178,255,89', '118,255,3', '100,221,23'],
['249,251,231', '240,244,195', '230,238,156', '220,231,117', '212,225,87',
'205,220,57', '192,202,51', '175,180,43', '158,157,36', '130,119,23',
'244,255,129', '238,255,65', '198,255,0', '174,234,0'],
['255,253,231', '255,249,196', '255,245,157', '255,241,118', '255,238,88',
'255,235,59', '253,216,53', '251,192,45', '249,168,37', '245,127,23',
'255,255,141', '255,255,0', '255,234,0', '255,214,0'],
['255,248,225', '255,236,179', '255,224,130', '255,213,79', '255,202,40',
'255,193,7', '255,179,0', '255,160,0', '255,143,0', '255,111,0',
'255,229,127', '255,215,64', '255,196,0', '255,171,0'],
['255,243,224', '255,224,178', '255,204,128', '255,183,77', '255,167,38',
'255,152,0', '251,140,0', '245,124,0', '239,108,0', '230,81,0',
'255,209,128', '255,171,64', '255,145,0', '255,109,0'],
['251,233,231', '255,204,188', '255,171,145', '255,138,101', '255,112,67',
'255,87,34', '244,81,30', '230,74,25', '216,67,21', '191,54,12',
'255,158,128', '255,110,64', '255,61,0', '221,44,0'],
['239,235,233', '215,204,200', '188,170,164', '161,136,127', '141,110,99',
'121,85,72', '109,76,65', '93,64,55', '78,52,46', '62,39,35'],
['250,250,250', '245,245,245', '238,238,238', '224,224,224', '189,189,189',
'158,158,158', '117,117,117', '97,97,97', '66,66,66', '33,33,33'],
['236,239,241', '207,216,220', '176,190,197', '144,164,174', '120,144,156',
'96,125,139', '84,110,122', '69,90,100', '55,71,79', '38,50,56']
];
function parentWrapper(p) {
return p.parentElement || p.parentNode;
}
var MaterialCustomizer = function(wheel, cdn) {
this.wheel = wheel;
this.cdn = cdn;
if (this.cdn) {
this.cdnTpl = cdn.textContent;
}
this.paletteIndices = MD_COLORS;
this.lightnessIndices = MD_SHADES;
this.palettes = MD_PALETTE;
this.init_();
};
MaterialCustomizer.prototype.init_ = function() {
this.config = {
width: 650, // width of the SVG panel
height: 650, // height of the SVG panel
r: 250, // radius of the wheel
ri: 100, // radius of the inner hole
hd: 40, // height of the dark section
c: 40, // Distance(center of selector circle, border of wheel)
mrs: 0.5, // Percent of available width to use as radius for selector circle
alphaIncr: 0.005, // Value to add to alpha to make tiles overlap slightly
colors: COLORS
};
this.forbiddenAccents = FORBIDDEN_ACCENTS;
this.calculateValues_();
if (this.wheel) {
this.buildWheel_();
}
return;
};
MaterialCustomizer.prototype.calculateValues_ = function() {
var config = this.config;
// Calculated values
// Angle of each piece of the wheel
config.alphaDeg = 360.0 / config.colors.length;
config.alphaRad = config.alphaDeg * Math.PI / 180;
// Radius of selector circle
config.rs = (config.c + config.r) * Math.sin(config.alphaRad / 2);
config.rs *= config.mrs;
// Angle of selector cone
config.selectorAlphaRad = Math.atan(config.rs / config.c) * 2;
// Angles of cone tangetial point
config.gamma1 = config.alphaRad / 2 - config.selectorAlphaRad / 2;
config.gamma2 = config.alphaRad / 2 + config.selectorAlphaRad / 2;
// Center of selector circle
config.cx = (config.c + config.r) * Math.sin(config.alphaRad) / 2;
config.cy = -(config.c + config.r) * (1 + Math.cos(config.alphaRad)) / 2;
this.config = config;
};
MaterialCustomizer.prototype.buildWheel_ = function() {
var config = this.config;
var mainG = this.wheel.querySelector('g.wheel--maing');
var wheelContainer = this.wheel.parentNode;
this.wheel.setAttribute('viewBox', '0 0 ' +
this.config.width + ' ' + this.config.height);
this.wheel.setAttribute('preserveAspectRatio', 'xMidYMid meet');
this.wheel.setAttribute('width', this.config.width);
this.wheel.setAttribute('height', this.config.height);
var fieldTpl = this.generateFieldTemplate_();
var svgNS = 'http://www.w3.org/2000/svg';
config.colors.forEach(function(color, idx) {
var field = fieldTpl.cloneNode(true);
var tooltip = document.createElement('div');
for (var i = 1; i <= 2; i++) {
var g = document.createElementNS(svgNS, 'g');
var label = document.createElementNS(svgNS, 'text');
label.setAttribute('class', 'label label--' + i);
label.setAttribute('transform',
'rotate(' + (-config.alphaDeg * idx) + ')');
label.setAttribute('dy', '0.5ex');
label.textContent = '' + i;
g.appendChild(label);
g.setAttribute('transform',
'translate(' + config.cx + ',' + config.cy + ')');
field.appendChild(g);
}
field.setAttribute('data-color', color);
field.id = color;
field.querySelector('.polygons > *:nth-child(1)').style.fill =
'rgb(' + this.getColor(color, '500') + ')';
field.querySelector('.polygons > *:nth-child(2)').style.fill =
'rgb(' + this.getColor(color, '700') + ')';
field.querySelector('.polygons').
addEventListener('click', this.fieldClicked_.bind(this));
field.setAttribute('transform', 'rotate(' + config.alphaDeg * idx + ')');
mainG.appendChild(field);
tooltip.setAttribute('for', color);
tooltip.className = 'mdl-tooltip mdl-tooltip--large';
tooltip.innerHTML = color;
wheelContainer.appendChild(tooltip);
}.bind(this));
mainG.setAttribute('transform',
'translate(' + config.width / 2 + ',' + config.height / 2 + ')');
};
MaterialCustomizer.prototype.generateFieldTemplate_ = function() {
var svgNS = 'http://www.w3.org/2000/svg';
var config = this.config;
var fieldTpl = document.createElementNS(svgNS, 'g');
var polygons = document.createElementNS(svgNS, 'g');
var lightField = document.createElementNS(svgNS, 'polygon');
lightField.setAttribute('points', [
[
config.ri * Math.sin(config.alphaRad + config.alphaIncr),
-config.ri * Math.cos(config.alphaRad + config.alphaIncr)
].join(','),
[
config.r * Math.sin(config.alphaRad + config.alphaIncr),
-config.r * Math.cos(config.alphaRad + config.alphaIncr)
].join(','),
[0, -config.r].join(','),
[0, -(config.ri + config.hd)].join(','),
].join(' '));
var darkField = document.createElementNS(svgNS, 'polygon');
darkField.setAttribute('points', [
[
config.ri * Math.sin(config.alphaRad + config.alphaIncr),
-config.ri * Math.cos(config.alphaRad + config.alphaIncr)
].join(','),
[
(config.ri + config.hd) * Math.sin(config.alphaRad + config.alphaIncr),
-(config.ri + config.hd) * Math.cos(config.alphaRad + config.alphaIncr)
].join(','),
[0, -(config.ri + config.hd)].join(','),
[0, -config.ri].join(','),
].join(' '));
polygons.appendChild(lightField);
polygons.appendChild(darkField);
polygons.setAttribute('class', 'polygons');
fieldTpl.appendChild(polygons);
var selector = document.createElementNS(svgNS, 'path');
selector.setAttribute('class', 'selector');
selector.setAttribute('d',
' M ' +
(config.r * Math.sin(config.alphaRad) / 2) +
' ' +
-(config.r * (1 + Math.cos(config.alphaRad)) / 2) +
' L ' +
(config.cx - config.rs * Math.cos(config.gamma1)) +
' ' +
(config.cy - config.rs * Math.sin(config.gamma1)) +
' A ' +
config.rs +
' ' +
config.rs +
' ' +
config.alphaDeg +
' 1 1 ' +
(config.cx + config.rs * Math.cos(config.gamma2)) +
' ' +
(config.cy + config.rs * Math.sin(config.gamma2)) +
' z '
);
fieldTpl.appendChild(selector);
return fieldTpl;
};
MaterialCustomizer.prototype.getNumSelected = function() {
if (this.wheel.querySelector('.selected--2')) {
return 2;
} else if (this.wheel.querySelector('.selected--1')) {
return 1;
}
return 0;
};
MaterialCustomizer.prototype.fieldClicked_ = function (ev) {
var g = parentWrapper(parentWrapper(ev.target));
var selectedColor = g.getAttribute('data-color');
var numSelected = this.getNumSelected();
// Ignore clicks on already selected fields
if ((g.getAttribute('class') || '').indexOf('selected--1') !== -1 && numSelected === 1) {
return;
}
switch (numSelected) {
case 1:
if (this.forbiddenAccents.indexOf(selectedColor) !== -1) {
return;
}
this.highlightField(g.getAttribute('data-color'));
this.wheel.setAttribute('class', '');
window.requestAnimationFrame(function() {
this.updateCDN();
this.updateStylesheet();
}.bind(this));
break;
case 2:
Array.prototype.forEach.call(
this.wheel.querySelector('g.wheel--maing').childNodes,
function(f) {
f.setAttribute('class', '');
f.querySelector('.polygons').setAttribute('filter', '');
}
);
/* falls through */
case 0:
this.highlightField(g.getAttribute('data-color'));
window.requestAnimationFrame(function() {
this.wheel.setAttribute('class', 'hide-nonaccents');
}.bind(this));
break;
}
};
MaterialCustomizer.prototype.replaceDict = function(s, dict) {
for (var key in dict) {
s = s.replace(new RegExp(key, 'g'), dict[key]);
}
return s;
};
MaterialCustomizer.prototype.urlsafeName = function(s) {
return s.toLowerCase().replace(' ', '_');
};
MaterialCustomizer.prototype.getSelectedPrimary = function() {
return this.wheel.querySelector('.selected--1')
.getAttribute('data-color');
};
MaterialCustomizer.prototype.getSelectedSecondary = function() {
return this.wheel.querySelector('.selected--2')
.getAttribute('data-color');
};
MaterialCustomizer.prototype.updateCDN = function() {
var primaryColor = this.getSelectedPrimary();
var secondaryColor = this.getSelectedSecondary();
this.cdn.textContent = this.replaceDict(this.cdnTpl, {
'\\$primary': this.urlsafeName(primaryColor),
'\\$accent': this.urlsafeName(secondaryColor)
});
Prism.highlightElement(this.cdn);
};
MaterialCustomizer.prototype.highlightField = function(color) {
var g = this.wheel.querySelector('[data-color="' + color + '"]');
var parent = parentWrapper(g);
// Make the current polygon the last child of its parent
// so shadows are visible.
parent.removeChild(g);
parent.appendChild(g);
// We changed the DOM hierarchy, CSS animations might not show until
// DOM has updated internally.
g.setAttribute('class', 'selected selected--' + (this.getNumSelected() + 1));
var isIE = window.navigator.msPointerEnabled;
// FIXME: Shadows in IE10 don't disappear, for now they are disabled
if (!isIE) {
g.querySelector('.polygons')
.setAttribute('filter', 'url(#drop-shadow)');
}
};
MaterialCustomizer.prototype.getColor = function(name, lightness) {
var r = this.palettes[this.paletteIndices.indexOf(name)];
if (!r) {
return null;
}
return r[this.lightnessIndices.indexOf(lightness)];
};
MaterialCustomizer.prototype.processTemplate = function(primaryColor, secondaryColor) {
var primary = this.getColor(primaryColor, '500');
var primaryDark = this.getColor(primaryColor, '700');
var accent = this.getColor(secondaryColor, 'A200');
return this.replaceDict(this.template, {
'\\$color-primary-dark': primaryDark,
'\\$color-primary-contrast': this.calculateTextColor(primary),
'\\$color-accent-contrast': this.calculateTextColor(accent),
'\\$color-primary': primary,
'\\$color-accent': accent
});
};
MaterialCustomizer.prototype.calculateChannel = function(component) {
component = component / 255;
return component < 0.03928 ?
component / 12.92 : Math.pow((component + 0.055) / 1.055, 2.4);
};
MaterialCustomizer.prototype.calculateLuminance = function(color) {
var components = color.split(',');
var red = this.calculateChannel(parseInt(components[0]));
var green = this.calculateChannel(parseInt(components[1]));
var blue = this.calculateChannel(parseInt(components[2]));
return (0.2126 * red) + (0.7152 * green) + (0.0722 * blue);
};
MaterialCustomizer.prototype.calculateContrast =
function(background, foreground) {
var backLum = this.calculateLuminance(background) + 0.05;
var foreLum = this.calculateLuminance(foreground) + 0.05;
return Math.max(backLum, foreLum) / Math.min(backLum, foreLum);
};
MaterialCustomizer.prototype.calculateTextColor = function(background) {
var minimumContrast = 3.1;
var light = '255,255,255';
var dark = '66,66,66';
// Most colors will be dark, so check light text color first.
var whiteContrast = this.calculateContrast(background, light);
if (whiteContrast >= minimumContrast) {
return light;
} else {
var blackContrast = this.calculateContrast(background, dark);
return blackContrast > whiteContrast ? dark : light;
}
};
MaterialCustomizer.prototype.replaceKeyword = function(str, key, val) {
return str.replace(new RegExp(key, 'g'), val);
};
MaterialCustomizer.prototype.updateStylesheet = function() {
var oldStyle = document.getElementById('main-stylesheet');
var newStyle = document.createElement('style');
newStyle.id = 'main-stylesheet';
var style = this.processTemplate(
this.getSelectedPrimary(),
this.getSelectedSecondary());
if (oldStyle && oldStyle.parentNode) {
oldStyle.parentNode.removeChild(oldStyle);
}
newStyle.textContent = style;
document.head.appendChild(newStyle);
this.prepareDownload(style);
};
MaterialCustomizer.prototype.prepareDownload = function(content) {
var link = document.getElementById('download');
var blob = new Blob([content], {type: 'text/css'});
this.blob = blob;
var url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', 'material.min.css');
};
return MaterialCustomizer;
})();
// For NodeJS usage
if (typeof module !== 'undefined') {
module.exports = MaterialCustomizer;
}
================================================
FILE: docs/_assets/ie.css
================================================
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* Header navigation fix to ensure display */
.docs-layout .docs-layout-header.mdl-layout__header {
display: block;
}
body > div.mdl-layout__container > div > main > div > section.about-panel.about-panel--components.mdl-color-text--white.mdl-cell.mdl-cell--6-col,
body > div.mdl-layout__container > div > main > div > section.about-panel.about-panel--styles.mdl-color-text--white.mdl-cell.mdl-cell--6-col {
width: 50%;
float: left;
}
================================================
FILE: docs/_assets/index.js
================================================
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
(function() {
Array.prototype.forEach.call(document.querySelectorAll('[data-target]'), function(el) {
var target = el.getAttribute('data-target');
el.addEventListener('click', function() {
location.href = target;
});
});
})();
================================================
FILE: docs/_assets/main.css
================================================
html > body {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
background-color: #FAFAFA;
}
.docs-layout .docs-layout-header.mdl-layout__header {
height: 560px;
max-height: 50%;
flex-shrink: 0;
background-size: auto;
background-repeat: no-repeat;
background-position: center center;
box-shadow: none !important;
align-items: flex-start;
padding: 40px;
flex-shrink: 0;
position: relative;
display: flex !important;
}
body.about .docs-layout.is-small-screen .docs-layout-header.mdl-layout__header {
height: 280px;
}
body.about .docs-layout.is-small-screen .docs-layout-header.mdl-layout__header {
background-size: auto 58px, cover;
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
}
.docs-layout-header .mdl-textfield {
padding-top: 0;
}
.docs-layout-header > .mdl-layout__header-row {
padding: 0px;
align-items: flex-start;
height: auto;
}
.docs-layout-header .docs-navigation .github,
.docs-layout-header .docs-navigation .download {
text-transform: none;
}
.docs-layout-title {
font-weight: 500;
text-transform: uppercase;
line-height: 1.5em;
font-size: 1rem;
}
.docs-layout .docs-layout-title a {
font-weight: inherit;
color: white;
}
.docs-layout-header .mdl-textfield .mdl-button {
right: 0;
}
.docs-layout-header .mdl-textfield .mdl-textfield__expandable-holder {
margin-right: 32px;
}
.docs-layout-header .mdl-textfield label:after {
background-color: rgba(255, 255, 255, 0.12);
}
.about .docs-layout-header.mdl-layout__header {
background-color: #37474f;
background: url('logo.svg'), url('header.jpg');
background-size: auto 118px, cover;
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
}
@media (max-height: 600px){
.about .docs-layout-header.mdl-layout__header {
background-size: auto 80px, cover;
}
}
body:not(.about) .docs-layout .docs-layout-header.mdl-layout__header {
background-repeat: no-repeat;
background-position: center center;
}
.templates .docs-layout-header.mdl-layout__header {
background-color: #263238;
background-image: url('templates.png');
background-size: auto 29px;
}
.showcase .docs-layout-header.mdl-layout__header {
background-color: #3E82F7;
background-image: url('templates.png');
background-size: auto 29px;
}
.started .docs-layout-header.mdl-layout__header,
.faq .docs-layout-header.mdl-layout__header {
background-color: #2E2E2E;
background-image: url('logo.png');
background-size: auto 32px;
}
.components .docs-layout-header.mdl-layout__header {
background-color: #C2185B;
background-image: url('components.png');
background-size: auto 34px;
}
.styles .docs-layout-header.mdl-layout__header {
background-color: #8E24AA;
background-image: url('styles.png');
background-size: auto 41px;
}
.customize .docs-layout-header.mdl-layout__header {
background-color: #1A237E;
background-image: url('customize.png');
background-size: auto 36px;
}
body:not(.about) .docs-layout .docs-layout-header.mdl-layout__header {
box-sizing: border-box;
height: 144px;
background-position: 40px 32px;
}
body:not(.about) .docs-layout-title {
display: none;
}
.docs-navigation__container {
overflow: hidden;
position: absolute;
height: 64px;
width: 100%;
bottom: 0;
left: 0;
}
.docs-navigation {
box-shadow: none !important;
border: 0 !important;
padding: 0 16px;
width: 100%;
height: 85px;
flex-shrink: 0;
padding-left: 24px;
overflow-x: auto;
overflow-y: hidden;
user-select: none;
margin-bottom: -16px;
}
.docs-layout.is-small-screen .docs-navigation {
padding: 0;
}
.docs-layout.is-small-screen .docs-navigation .mdl-navigation__link .material-icons {
display: none;
}
.docs-navigation::-webkit-scrollbar {
display: none;
}
body:not(.about) .docs-layout.is-small-screen .docs-layout-header {
background-image: none;
}
.docs-layout.mdl-layout.is-small-screen .docs-layout-header.mdl-layout__header {
padding: 0;
height: 64px;
}
.docs-layout.is-small-screen .docs-layout-header .docs-layout-title,
.docs-layout.is-small-screen .docs-layout-header .mdl-textfield {
display: none;
}
.docs-layout.is-small-screen .docs-navigation__container {
top: 0;
bottom: auto;
left: 48px;
width: calc(100% - 2 * 48px);
padding: 0 !important;
}
.docs-layout .scrollindicator {
position: absolute;
top: 0;
line-height: 64px;
height: 64px;
width: 48px;
display: none;
margin-right: 0;
text-align: center;
cursor: pointer;
user-select: none;
}
.docs-layout .scrollindicator.disabled {
opacity: 0.12;
cursor: default;
}
.docs-layout .scrollindicator.scrollindicator--right {
right: 0;
}
.docs-layout .scrollindicator.scrollindicator--left {
left: 0;
}
.docs-layout.is-small-screen .scrollindicator.scrollindicator.scrollindicator {
display: block;
}
.mdl-navigation__link--icon > span, .mdl-navigation__link--icon > .material-icons {
line-height: 64px;
margin-right: 8px;
line-height: inherit;
}
.docs-navigation .mdl-navigation__link {
display: flex;
flex-shrink: 0;
user-select: inherit;
height: 64px;
}
.docs-navigation .mdl-navigation__link:hover,
.docs-navigation .mdl-navigation__link.download:hover > span,
.docs-navigation .mdl-navigation__link.download:hover > .material-icons {
background-color: inherit;
opacity: 1 !important;
}
.docs-navigation .mdl-navigation__link:not(.download),
.docs-navigation .mdl-navigation__link.download > span,
.docs-navigation .mdl-navigation__link.download > .material-icons {
opacity: 0.65;
}
.docs-navigation .mdl-navigation__link, section.download {
font-weight: 500;
font-size: 13px;
text-transform: uppercase;
line-height: 64px;
padding: 0 16px;
color: white;
box-sizing: border-box;
border-bottom: 3px solid transparent;
}
.docs-layout.is-small-screen .docs-navigation .mdl-navigation__link,
.docs-layouy.is-small-screen section.download {
padding: 0 12px;
}
.about .docs-layout:not(.is-small-screen) .mdl-navigation__link.download > .material-icons {
display: none;
}
.about .docs-layout.is-small-screen .mdl-navigation__link.download > button,
body:not(.about) .mdl-navigation__link.download > button {
display: none;
}
.docs-navigation .download button .material-icons {
color: black;
opacity: 0.54;
}
.about .docs-navigation .about,
.templates .docs-navigation .templates,
.showcase .docs-navigation .showcase,
.started .docs-navigation .started,
.styles .docs-navigation .styles,
.components .docs-navigation .components,
.faq .docs-navigation .faq,
.customize .docs-navigation .customize {
opacity: 1;
border-bottom-color: #18FFFF;
}
.mdl-layout__content.docs-layout-content {
overflow: visible;
}
.docs-layout-content > .download {
width: 100%;
height: 6rem;
display: flex;
justify-content: center;
align-items: center;
}
.docs-layout-content > .download > a {
font-weight: 500;
text-transform: uppercase;
}
.docs-footer.mdl-mini-footer {
flex-direction: column;
align-items: stretch;
justify-content: center;
height: 120px;
}
.docs-footer.mdl-mini-footer ul {
padding: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.docs-footer.mdl-mini-footer ul > li > a {
margin: 0 8px;
font-weight: 400;
font-size: 12px;
}
.docs-footer .docs-link-list li {
margin-left: 0.5em;
margin-right: 0.5em;
}
.about-panel {
box-sizing: border-box;
width: 100%;
flex-grow: 1;
}
.about-panel--text {
padding: 100px;
}
.about-panel--text p {
width: 640px;
margin: 0 auto;
line-height: 2em;
}
.about-panel--text dl {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
}
.about-panel--text dl dt {
text-align: right;
vertical-align: top;
display: inline-table;
margin-right: 24px;
line-height: 2em;
}
.about-panel--text dl dd {
text-align: left;
line-height: 2em;
vertical-align: top;
width: 700px;
margin: 0;
margin-left: 24px;
}
.docs-layout.is-small-screen .about-panel {
padding: 40px;
}
.docs-layout.is-small-screen .about-panel--text:not(:first-of-type) {
display: none;
}
.docs-layout.is-small-screen .about-panel--text dl {
flex-direction: column;
}
.docs-layout.is-small-screen .about-panel--text dd,
.docs-layout.is-small-screen .about-panel--text dt {
margin: 0;
padding: 0;
text-align: left;
width: 100%;
}
.about-panel--components,
.about-panel--styles,
.about-panel--customize,
.about-panel--templates {
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 40px;
color: white;
text-transform: uppercase;
font-size: 1.4rem;
width: auto;
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
}
.docs-layout-content .about-panel--start > p {
color: rgb(66,66,66);
text-transform: uppercase;
font-size: 1.6rem;
margin-top: 20px;
margin-bottom: 0px;
}
.about-panel--templates {
background-color: #B3E0E1;
background-image: url(templates.svg);
background-size: 287px auto;
}
.about-panel--templates:hover {
background-image: url(templates_mo.svg);
}
.about-panel--components {
background-color: #E90974;
background-image: url(components.svg);
background-size: 174px auto;
}
.about-panel--components:hover {
background-image: url(components_mo.svg);
}
.about-panel--styles {
background-color: #8F4099;
background-image: url(styles.svg);
background-size: 252px auto;
}
.about-panel--styles:hover {
background-image: url(styles_mo.svg);
background-size: 331px auto;
background-position-x: calc(50% + 40px);
}
.about-panel--customize {
height: 400px;
background-color: #191E80;
background-image: url(customize.svg);
background-size: 156px auto;
}
.about-panel--customize:hover {
background-image: url(customize_mo.svg);
}
.image-preloader {
position: fixed;
visibility: hidden;
width: 0px;
height: 0px;
top: -100px;
left: -100px;
background-image: url(templates_mo.svg), url(components_mo.svg), url(styles_mo.svg), url(customize_mo.svg);
}
.templates .content {
padding-left: 24px !important;
max-width: 960px;
}
.templates .docs-layout-content .content {
padding: 40px 0;
}
.templates .docs-layout .template {
margin-left: -16px;
}
.showcase .content {
padding-left: 24px !important;
max-width: 960px;
}
.showcase .docs-layout-content .content {
padding: 40px 0;
}
.showcase .docs-layout .template {
margin-left: -16px;
}
.template {
width: 100%;
margin-bottom: 72px;
align-items: flex-start;
}
.template > .template__meta {
align-content: flex-start;
padding-left: 24px;
}
.templates .docs-layout.is-small-screen .template > .template__meta {
padding-left: 0;
}
.showcase .docs-layout.is-small-screen .template > .template__meta {
padding-left: 0;
}
.template > .template__meta.template__meta > * {
margin-bottom: 24px;
}
.template > .template__meta > *:last-child {
margin-bottom: 0px;
}
.template > .template__meta a {
color:inherit;
margin-left: -8px !important;
}
.template > .template__preview {
height: auto;
}
.docs-layout-content dd {
font-size: 13px;
}
.docs-layout-content p {
font-size: 13px;
margin-bottom: 32px;
max-width: 640px;
/* Override */
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}
.docs-text-styling ol li {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}
.docs-text-styling h1 {
color: #c2185b;
font-size: 2.5em;
margin: .67em 0;
}
.docs-text-styling h2 {
padding-top: 48px;
font-size: 24px;
font-weight: 400;
line-height: 32px;
margin-bottom: 30px;
color: #c2185b;
}
.docs-text-styling h1,
.docs-text-styling h2,
.docs-text-styling h3,
.docs-text-styling h4 {
font-size: 16px;
color: rgba(0, 0, 0, 0.54);
font-weight: 500;
text-transform: uppercase;
}
.docs-layout-content h2.mdl-card__title-text {
padding-top: 0;
margin-bottom: 0;
}
.docs-text-styling a {
text-decoration: none;
}
.docs-layout-content .mdl-download {
color: #000;
font-weight: normal;
}
.docs-layout-title a {
color: inherit;
text-decoration: none;
}
.component-description {
max-width: 720px;
padding: 40px;
}
.component-description .mdl-button:first-of-type {
margin-top: 8px;
}
.docs-footer.mdl-mini-footer .mdl-mini-footer--social-btn {
background-color: transparent;
margin: 0 16px;
width: 24px;
height: 24px;
}
.docs-footer.mdl-mini-footer .social-btn {
display: block;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
cursor: pointer;
}
.social-btn__twitter {
background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_twitter_white_24dp.png');
}
.social-btn__github {
background-image: url('github_white_24.svg');
width: 22px;
height: 22px;
}
.social-btn__gplus {
background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_gplus_white_24dp.png');
}
.subpageheader {
margin-top: 60px;
margin-bottom: 40px;
display: flex;
color: rgba(0, 0, 0, .54);
align-items: center;
flex-shrink: 0;
text-transform: uppercase;
font-size: 16px;
font-weight: 500;
}
.about .subpageheader,
.components .subpageheader {
display: none;
}
.started .subpageheader,
.customize .subpageheader,
.styles .subpageheader,
.faq .subpageheader,
.templates .subpageheader,
.showcase .subpageheader {
width: 960px;
margin: 40px auto;
}
/* Components Snippets */
.snippet-group {
margin-left: -16px;
margin-right: -16px;
margin-bottom: 84px;
}
.snippet-group .snippet-header {
display: table;
border-collapse:collapse;
border-spacing: 0;
width: 100%;
}
.snippet-group .snippet-demos,
.snippet-group .snippet-captions {
display: table-row;
}
.snippet-group .snippet-demo .snippet-demo-container {
text-align: left;
display: inline-block;
}
.snippet-group .snippet-captions {
background-color: white;
height: 48px;
}
.snippet-group .snippet-demo,
.snippet-group .snippet-demo-padding,
.snippet-group .snippet-caption,
.snippet-group .snippet-caption-padding {
display: table-cell;
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
}
.snippet-group .snippet-caption {
font-size: 13px;
padding: 0px 40px;
white-space: nowrap;
text-align: center;
position: relative;
}
.snippet-group .snippet-demo {
padding: 0px 40px 40px 40px;
}
.snippet-group .snippet-demos .snippet-demo-padding {
width: 50%;
}
_:-ms-input-placeholder, :root .snippet-group .snippet-demo {
width: 1px;
}
_:-ms-input-placeholder, :root .snippet-group .snippet-demos .snippet-demo-padding {
width: auto;
}
.snippet-group .snippet-code {
position: relative;
overflow: hidden;
}
.snippet-group .snippet-code pre {
margin: 0;
border-radius: 0;
display: block;
padding: 0;
overflow: hidden;
}
.snippet-group .snippet-code code {
padding: 8px 16px;
position: relative;
max-height: none;
width: 100%;
box-sizing: border-box;
}
.snippet-group .snippet-code pre[class*=language-]>code[data-language] {
max-height: none;
}
.snippet-group .snippet-code code:first-of-type {
padding-top: 16px;
}
.snippet-group .snippet-code code:last-of-type {
padding-bottom: 16px;
}
.snippet-group .snippet-code code:hover {
background-color: rgba(0,0,0,0.05);
}
.snippet-group .snippet-code code:hover:only-of-type {
background-color: transparent;
}
.snippet-group .snippet-code code::before,
.snippet-group .snippet-code code::after {
display: none;
}
.snippet-group .snippet-code code:hover::before {
display: inline-block;
content: 'click to copy';
color: rgba(0,0,0,0.5);
font-size: 13px;
background-color: rgba(0,0,0,0.1);
border-top-left-radius: 5px;
position: absolute;
right: 0;
bottom: 0;
padding: 3px 10px;
}
.snippet-group .snippet-code code:active::before {
content: '';
}
.snippet-group .snippet-code code.copied::before {
content: 'copied';
color: rgba(255,255,255,0.5);
background-color: rgba(0,0,0,0.6);
}
.snippet-group .snippet-code code.nosupport::before {
content: "browser not supported :'(";
color: rgba(255,255,255,0.5);
background-color: rgba(0,0,0,0.6);
}
.snippet-group .snippet-code .codepen-extra-css {
display:none;
}
@media (max-width: 850px) {
.snippet-group .snippet-demo {
padding-left: 5px;
padding-right: 5px;
}
}
.snippet-group.is-full-width .snippet-demo-container {
width: 100%;
}
.snippet-group.is-full-width .snippet-demos > .snippet-demo {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.snippet-group.is-full-width .snippet-demo-padding {
width: 0;
padding: 8px;
margin: 0;
}
/* Open with CodePen Button */
.codepen-button {
z-index: 50;
cursor: pointer;
background-image: url('codepen-logo.png');
background-repeat: no-repeat;
background-position: 5px center;
background-size: 26px 26px;
position: absolute;
top: 0;
right: -125px;
width: 165px;
height: 46px;
display: none;
opacity: 0.6;
overflow: hidden;
box-sizing: border-box;
white-space: nowrap;
color: black;
padding: 13px 15px 5px 50px;
transition: right 0.5s, background-color 0.5s, opacity 0.5s, background-size 0.3s;
}
.codepen-button::after {
content: 'Open in CodePen';
}
.codepen-button:hover {
opacity: 1;
right: 0;
background-size: 36px 36px;
background-color: rgb(248,248,248);
border-bottom-left-radius: 10px;
}
.docs-layout .docs-text-styling pre[class*=language-markup] {
max-width: calc(100vw - 32px);
}
.docs-layout pre[class*=language-markup] {
max-width: 100vw;
box-sizing: border-box;
overflow: hidden;
}
.docs-layout pre[class*=language-markup].codepen-button-enabled {
padding-right: 0;
}
.docs-layout pre[class*=language-markup].codepen-button-enabled code {
padding-right: 50px;
}
.codepen-button-enabled .codepen-button {
display: inline-block;
}
/* Prism and code blocks styling and overrides */
.token.attr-name, .token.builtin, .token.selector, .token.string {
color: #E91E63;
}
.token.boolean, .token.constant, .token.number, .token.property, .token.symbol, .token.tag {
color: #9D1DB3;
}
.token.atrule, .token.attr-value, .token.keyword {
color: #00BCD4;
}
.docs-layout code,
.docs-layout pre {
display: inline-block;
background-color: rgba(0,0,0,0.06);
border-radius: 3px;
font-size: 85%;
white-space: pre-wrap;
}
.docs-layout pre {
padding: 16px;
font-size: 87%;
box-sizing: border-box;
}
.docs-layout code:before,
.docs-layout code:after {
letter-spacing: -0.2em;
content: "\00a0";
}
.docs-layout pre > code:before,
.docs-layout pre > code:after {
letter-spacing: 0;
content: "";
}
.docs-layout pre > code {
background-color: rgba(0,0,0,0);
padding: 0px;
font-size: 100%;
width: 100%;
box-sizing: border-box;
word-break: break-word;
}
.docs-layout pre[class*=language-]>code[data-language] {
overflow: hidden;
}
pre[class*=language-]>code[data-language]::before {
content: "";
background: none;
}
.token.cr:before,
.token.lf:before {
display: none;
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url,
.token.variable {
color: #9D1DB3;
background: none;
}
code[class*=language-], pre[class*=language-] {
color: rgba(0,0,0,0.87);
text-shadow: none;
}
.token.function {
color: #009688;
}
.code-with-text {
position: relative;
width: auto;
display: block;
border-spacing: 0;
border-collapse: collapse;
background-color: white;
padding: 15px;
border-radius: 3px;
font-size: 13px;
}
.code-with-text pre {
margin: 15px -15px -15px -15px;
border-top-left-radius: 0;
border-top-right-radius: 0;
display: block;
width: auto;
}
/* Table of content widget */
.docs-toc ul {
border-left: solid 3px #C0EbF1;
padding-left: 20px;
line-height: 28px;
}
.docs-toc a {
font-weight: 400;
color: #00BCD4;
}
.docs-toc li {
font-size: 16px;
list-style: none;
}
/* Getting started guide */
.started .mdl-tabs__tab-bar {
justify-content: flex-start;
border-bottom: 0;
}
.started .download-button-container {
text-align: center;
margin-bottom: 20px;
}
.started .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
color: #00ACC1;
}
.started .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
background-color: #00ACC1;
}
.started .docs-layout-content {
text-align: center;
}
.started .chapter-toc {
display: table;
}
.started .code-with-text {
width: 640px;
box-sizing: border-box;
}
.started .docs-layout .content section {
max-width: 960px;
margin: 0 auto;
}
.started a,
.about a,
.faq a,
.customize a {
color: #00BCD4;
}
.customize .docs-layout .content {
max-width: 960px;
margin: 0 auto;
display: block;
margin-bottom: 120px;
padding: 40px;
}
.started .content h3,
.started .content h4 {
display: table-cell;
font-size: 15px;
padding-right: 60px;
line-height: 25px;
text-transform: none;
}
.started .content h3 {
width: 140px;
}
.started .content section {
margin-bottom: 30px;
}
.started .section-content {
display: table-cell;
}
.started .content,
.styles .content,
.faq .content {
padding: 40px;
display: inline-block;
text-align: left;
width: 100%;
box-sizing: border-box;
}
.docs-layout ul {
list-style-type: none;
}
.docs-layout li {
position: relative;
}
.styles .content li:before,
.docs-readme .content li:before {
position: absolute;
top: 2px;
left: -28px;
content: '•';
font-size: 32px;
}
.started .content p {
margin-top: 10px;
margin-bottom: 15px;
}
.started .mdl-tabs {
margin-bottom: 22px;
}
.started .content .mdl-tabs__panel {
padding-top: 10px;
}
.started .caption {
font-size: 13px;
max-width: 640px;
box-sizing: border-box;
margin-top: 15px;
padding: 15px;
background-color: rgb(255, 255, 255);
border-radius: 3px;
}
.started .caption h4 {
font-size: 13px;
font-weight: normal;
font-style: italic;
margin-top: 0;
}
.started .use-components pre {
margin-top: 0;
}
.started .component-example {
margin: 30px 0;
}
.started ol {
padding-left: 18px;
font-size: 13px;
max-width: 640px;
box-sizing: border-box;
}
.started pre {
width: 640px;
box-sizing: border-box;
position: relative;
}
.started .snippet-group {
max-width: 640px;
margin: 60px 0 40px 0;
}
@media (max-width: 850px) {
.started .chapter-toc {
display: block;
}
.started .content h3,
.started .content h4 {
display: block;
width: auto;
}
.started .section-content {
display: block;
}
.started pre {
width: auto;
margin-left: -40px;
margin-right: -40px;
padding: 15px 40px;
box-sizing: content-box;
display: block;
max-width: none;
}
.started .caption {
margin-left: -40px;
margin-right: -40px;
max-width: none;
box-sizing: content-box;
padding: 15px 40px;
}
.started .mdl-tabs__tab-bar {
margin-left: -40px;
margin-right: -40px;
justify-content: center;
}
.started .mdl-tabs__tab {
padding: 0 3%;
}
.started .content {
display: block;
}
.started .snippet-group {
margin-left: -40px;
margin-right: -40px;
max-width: none;
}
.started .snippet-group code {
padding-left: 40px;
padding-right: 40px;
}
}
/*Styles page*/
.styles a {
color: #00BCD4;
}
.styles .styles__content h2 {
text-transform: none;
}
.styles .typo-styles {
margin-bottom: 40px;
}
.styles .typo-styles dt {
display: block;
float: left;
color: white;
background-color: rgba(0, 0, 0, 0.24);
width: 32px;
height: 32px;
border-radius: 16px;
line-height: 32px;
text-align: center;
font-weight: 500;
margin-top: 5px;
}
.styles .typo-styles dd {
display: block;
margin-left: 60px;
margin-bottom: 20px;
}
.styles .typo-styles .typo-styles__demo {
margin-bottom: 8px;
}
.styles .typo-styles .typo-styles__desc {
font-weight: 300;
}
.styles .typo-styles .typo-styles__desc .typo-styles__name {
margin-right: 8px;
font-weight: 400;
}
.styles .download-btn {
color: rgba(0, 0, 0, 0.54);
line-height: 20px;
display: flex;
font-weight: 300;
margin-bottom: 20px;
}
.styles .download-btn.download-btn--customizer .material-icons {
margin-top: -2px;
}
.styles .download-btn > * {
margin-right: 8px;
}
.styles .styles__ribbon {
background-color: #4A148C;
width: 100vw;
margin: 80px 0;
margin-left: -40px;
height: 320px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
}
.styles .styles__ribbon > .ribbon__imagecontainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__image {
display: block;
margin-bottom: 48px;
border: 0;
}
.styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__caption {
color: white;
text-transform: uppercase;
font-size: 16px;
font-weight: 500;
height: 24px;
line-height: 24px;
text-align: center;
}
.styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__caption.ribbon__caption--split {
width: 100%;
text-align: left;
}
.styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__caption > .material-icons {
height: 24px;
line-height: 24px;
vertical-align: middle;
margin-top: -1px;
}
.styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__caption.ribbon__caption--split > .material-icons {
float: right;
}
.styles .content .docs-text-styling h3 {
text-transform: none;
margin: 0;
font-size: 14px;
font-weight: 700;
}
.styles .content .docs-text-styling p {
margin-top: 0;
}
.styles img.customizer {
max-width: 450px;
}
.styles .code-with-text {
margin-right: 40px;
}
.styles .docs-layout.is-small-screen .code-with-text pre[class*=language-markup]{
width: 100vw;
max-width: none;
}
.styles .content ul,
.components .content ul {
font-size: 13px;
}
.styles .content li:before {
font-size: 16px;
}
.styles .content .mdl-cell.left-col {
padding-right: 40px;
}
.styles .content .mdl-cell.right-col {
margin-bottom: 40px;
}
.styles .code-with-text {
margin-bottom: 20px;
}
.styles .content .styles__content {
max-width: 960px;
margin: 0 auto;
}
.styles .styles__download {
display: flex;
}
.styles .styles__download a {
font-weight: 500;
margin-right: 16px;
}
.styles .styles__content a .customizer {
border: 0;
}
@media (max-width: 850px) {
.started .docs-layout .docs-text-styling pre[class*=language-markup] {
max-width: none;
}
.docs-layout .code-with-text {
width: 100%;
margin-left: -40px;
margin-right: -40px;
padding: 15px 40px;
display: block;
box-sizing: content-box;
}
.docs-layout .code-with-text pre {
width: auto;
padding-left: 40px;
padding-right: 40px;
margin-left: -40px;
margin-right: -40px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) /* dppx fallback */ {
.social-btn__twitter {
background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_twitter_white_24dp.png');
}
.social-btn__gplus {
background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_gplus_white_24dp.png');
}
.templates .docs-layout-header {
background-image: url('templates_2x.png');
}
.showcase .docs-layout-header {
background-image: url('templates_2x.png');
}
.components .docs-layout-header {
background-image: url('components_2x.png');
}
.styles .docs-layout-header {
background-image: url('styles_2x.png');
}
.customize .docs-layout-header {
background-image: url('customize_2x.png');
}
.about .docs-layout-header {
background: url('logo.svg'), url('header_2x.jpg');
background-size: auto 30%, cover;
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
}
}
.docs-navigation .spacer {
flex-grow: 1;
}
.components .docs-layout.is-small-screen .docs-text-styling pre {
margin: 0 -16px;
width: 100vw;
max-width: 640px;
}
.docs-text-styling p {
margin-top: 16px;
margin-bottom: 16px;
}
.components .content blockquote {
font-size: 13px;
max-width: 640px;
box-sizing: border-box;
margin-top: 15px;
padding: 15px;
background-color: rgb(255, 255, 255);
border-radius: 3px;
margin-left: 0;
}
.components .content blockquote:before,
.components .content blockquote:after {
display: none;
}
/* .started .caption h4 {
font-size: 13px;
font-weight: normal;
font-style: italic;
margin-top: 0;
}
*/
/* faq */
.faq .docs-text-styling > section {
max-width: 960px;
margin: 0 auto;
}
.faq img {
max-width: 100%;
}
.faq .mdl-tabs__tab-bar {
justify-content: flex-start;
border-bottom: 0;
}
.faq .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
color: #00ACC1;
}
.faq .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
background-color: #00ACC1;
}
.faq .docs-layout-content {
text-align: center;
}
.faq .chapter-toc {
display: table;
}
.faq .content h3 {
display: table-cell;
width: 140px;
font-size: 15px;
font-weight: bold;
padding-right: 60px;
line-height: 25px;
}
.faq .content section {
margin-bottom: 30px;
}
.faq .section-content {
display: table-cell;
}
.faq .content p {
margin-top: 10px;
margin-bottom: 15px;
}
.faq .mdl-tabs {
margin-bottom: 22px;
}
.faq .content h4 {
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
margin-top: 20px;
}
.faq .content .mdl-tabs__panel {
padding-top: 10px;
}
.faq .docs-layout.is-small-screen .docs-toc > * {
display: block;
}
.faq .caption {
font-size: 13px;
max-width: 640px;
box-sizing: border-box;
margin-top: 15px;
padding: 15px;
background-color: rgb(255, 255, 255);
border-radius: 3px;
}
.faq .caption h4 {
font-size: 13px;
font-weight: normal;
font-style: italic;
margin-top: 0;
}
.faq ol {
padding-left: 18px;
font-size: 13px;
max-width: 640px;
box-sizing: border-box;
}
.faq pre {
width: 640px;
box-sizing: border-box;
word-wrap: break-word;
}
.faq .snippet-group {
max-width: 640px;
margin: 60px 0 40px 0;
}
================================================
FILE: docs/_assets/main.js
================================================
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*global MaterialCustomizer:true,Prism:true,ga:true*/
// Navbar scroll buttons
(function() {
'use strict';
var rightScroll = document.querySelector('.scrollindicator.scrollindicator--right');
var leftScroll = document.querySelector('.scrollindicator.scrollindicator--left');
var menuBar = document.querySelector('.docs-navigation');
var delta = 40;
function updateScrollIndicator() {
leftScroll.classList.remove('disabled');
rightScroll.classList.remove('disabled');
if (menuBar.scrollLeft <= 0) {
leftScroll.classList.add('disabled');
}
// 5px tolerance because browsers!
if (menuBar.scrollLeft + menuBar.clientWidth + 5 >= menuBar.scrollWidth) {
rightScroll.classList.add('disabled');
}
}
menuBar.addEventListener('scroll', updateScrollIndicator);
updateScrollIndicator();
function scrollMenuBar(delta) {
menuBar.scrollLeft += delta;
}
rightScroll.addEventListener('click', scrollMenuBar.bind(null, delta));
rightScroll.addEventListener('tap', scrollMenuBar.bind(null, delta));
leftScroll.addEventListener('click', scrollMenuBar.bind(null, -delta));
leftScroll.addEventListener('tap', scrollMenuBar.bind(null, -delta));
})();
(function() {
'use strict';
var downloadButton = document.querySelector('.download-button-container');
if (downloadButton) {
downloadButton.addEventListener('click', function() {
ga('send', {
hitType: 'event',
eventCategory: 'click',
eventAction: 'mdl-download'
});
});
}
})();
// Disable empty links in demo's to prevent refresh page
(function () {
'use strict';
var emptyLinks = document.querySelectorAll('[href=""]');
Array.prototype.forEach.call(emptyLinks, function(link) {
link.addEventListener('click', function (event){
event.preventDefault();
});
});
})();
================================================
FILE: docs/_assets/snippets.js
================================================
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
function MaterialComponentsSnippets() {
'use strict';
// Find all code snippets.
this.snippets = document.querySelectorAll('code.language-markup');
this.init();
}
/**
* Initializes the MaterialComponentsSnippets components.
*/
MaterialComponentsSnippets.prototype.init = function() {
'use strict';
[].slice.call(this.snippets).forEach(function(snippet) {
snippet.addEventListener('click', this.onMouseClickHandler(snippet));
snippet.addEventListener('mouseout', this.onMouseOutHandler(snippet));
}, this);
};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
* @enum {string}
* @private
*/
MaterialComponentsSnippets.prototype.CssClasses_ = {
COPIED: 'copied',
NOT_SUPPORTED: 'nosupport'
};
/**
* Copies content of a <code> element into the system clipboard.
* Not all browsers may be supported. See the following for details:
* http://caniuse.com/clipboard
* https://developers.google.com/web/updates/2015/04/cut-and-copy-commands
* @param {HTMLElement} snippet The <code> element containing the snippet code
* @return {bool} whether the copy operation is succeeded
*/
MaterialComponentsSnippets.prototype.copyToClipboard = function(snippet) {
'use strict';
var sel = window.getSelection();
var snipRange = document.createRange();
snipRange.selectNodeContents(snippet);
sel.removeAllRanges();
sel.addRange(snipRange);
var res = false;
try {
res = document.execCommand('copy');
} catch (err) {
// copy command is not available
console.error(err);
}
sel.removeAllRanges();
return res;
};
/**
* Returns a mouseClickHandler for a snippet <code> element.
* @param {HTMLElement} snippet The <code> element containing the snippet code
* @return {function} the click handler
*/
MaterialComponentsSnippets.prototype.onMouseClickHandler = function(snippet) {
'use strict';
return function() {
if (window.getSelection().toString().length > 0) {
// user has selected some text manually
// don't do anything
return;
}
var cls = this.CssClasses_.COPIED;
if (!this.copyToClipboard(snippet)) {
cls = this.CssClasses_.NOT_SUPPORTED;
}
snippet.classList.add(cls);
}.bind(this);
};
/**
* Returns a mouseOutHandler for a snippet <code> element.
* @param {HTMLElement} snippet The <code> element containing the snippet code
* @return {function} the click handler
*/
MaterialComponentsSnippets.prototype.onMouseOutHandler = function(snippet) {
'use strict';
return function() {
snippet.classList.remove(this.CssClasses_.COPIED);
}.bind(this);
};
window.addEventListener('load', function() {
'use strict';
new MaterialComponentsSnippets();
});
================================================
FILE: docs/_pages/components.md
================================================
---
layout: components
title: Components
bodyclass: components
include_prefix: ../
categories:
- name: badges
title: Badges
description: Small status descriptors for UI elements.
components:
- name: badge
class: mdl-badge
snippets:
- snippet_group:
- caption: Number
file: badge-on-icon-text.html
demo_file: badge-on-icon-text-demo.html
- caption: Icon
file: badge-on-icon-icon.html
demo_file: badge-on-icon-icon-demo.html
- snippet_group:
- caption: Number
file: badge-on-text-text.html
demo_file: badge-on-text-text-demo.html
- caption: Icon
file: badge-on-text-icon.html
demo_file: badge-on-text-icon-demo.html
- name: buttons
title: Buttons
description: Variations on Material Design buttons.
components:
- name: button
class: mdl-button
snippets:
- snippet_group:
- caption: Colored FAB
file: fab-colored.html
- caption: With ripple
file: fab-colored-ripple.html
- snippet_group:
- caption: Plain FAB
file: fab.html
- caption: With ripple
file: fab-ripple.html
- caption: Disabled
file: fab-disabled.html
- snippet_group:
- caption: Raised Button
file: raised.html
- caption: With ripple
file: raised-ripple.html
- caption: Disabled
file: raised-disabled.html
- snippet_group:
- caption: Colored button
file: raised-colored.html
- caption: Accent colored
file: raised-accent.html
- caption: With Ripples
file: raised-ripple-accent.html
- snippet_group:
- caption: Flat button
file: flat.html
- caption: With ripple
file: flat-ripple.html
- caption: Disabled
file: flat-disabled.html
- snippet_group:
- caption: Primary colored flat
file: flat-primary.html
- caption: Accent colored flat
file: flat-accent.html
- snippet_group:
- caption: Icon button
file: icon.html
- caption: Colored
file: icon-colored.html
- snippet_group:
- caption: Mini FAB
file: fab-mini.html
- caption: Colored
file: fab-mini-colored.html
- name: cards
title: Cards
description: Self-contained pieces of paper with data.
components:
- name: card
class: mdl-card
snippets:
- snippet_group:
- caption: Wide
file: wide.html
- snippet_group:
- caption: Square
file: square.html
- snippet_group:
- caption: Image
file: image.html
- caption: Event
file: event.html
- name: chips
title: Chips
description: Represents complex entities in small blocks.
components:
- name: chip
class: mdl-chip
snippets:
- snippet_group:
- caption: Basic Chip
file: basic.html
- caption: Deletable Chip
file: deletable.html
- caption: Button Chip
file: button.html
- snippet_group:
- caption: Contact Chip
file: contact.html
- caption: Deletable Contact Chip
file: deletable-contact.html
- name: dialog
title: Dialogs
description: Modal windows for dedicated user input.
components:
- name: dialog
class: mdl-dialog
warning: Dialogs use the HTML <dialog> element, which currently has very
limited cross-browser support. To ensure support across all modern
browsers, please consider using a polyfill or creating your own.
There is no polyfill included with MDL.
- name: expansion
title: Expansion
description: Collapsible content sections.
components:
- name: expansion
class: mdl-expansion
snippets:
- snippet_group:
- caption: Example Expansion
file: expansion.html
full_width: true
- name: layout
title: Layout
description: Building blocks for constructing a page layout.
components:
- name: layout
caption: Navigation layouts
class: mdl-layout
snippets:
- snippet_group:
- caption: Transparent header
file: transparent.html
demo_file: transparent-demo.html
full_width: true
- snippet_group:
- caption: Fixed drawer, no header
file: fixed-drawer.html
demo_file: fixed-drawer-demo.html
full_width: true
- snippet_group:
- caption: Fixed header
file: fixed-header.html
demo_file: fixed-header-demo.html
full_width: true
- snippet_group:
- caption: Fixed header and drawer
file: fixed-header-drawer.html
demo_file: fixed-header-drawer-demo.html
full_width: true
- snippet_group:
- caption: Scrolling header
file: scrolling-header.html
demo_file: scrolling-header-demo.html
full_width: true
- snippet_group:
- caption: Waterfall header
file: waterfall-header.html
demo_file: waterfall-header-demo.html
full_width: true
- snippet_group:
- caption: Scrollable tabs
file: scrollable-tabs.html
demo_file: scrollable-tabs-demo.html
full_width: true
- snippet_group:
- caption: Fixed tabs
file: fixed-tabs.html
demo_file: fixed-tabs-demo.html
full_width: true
- name: grid
caption: Grid
class: mdl-grid
snippets:
- snippet_group:
- caption: Responsive grid
file: grid.html
demo_file: grid-demo.html
extra_codepen_css: codepen-grid.css
full_width: true
- name: tabs
caption: Tabs
class: mdl-tabs
snippets:
- snippet_group:
- caption: Content tabs
file: tabs.html
- name: footer
caption: Footer
class: mdl-mega-footer / mdl-mini-footer
snippets:
- snippet_group:
- caption: Mega footer
file: mega-footer.html
full_width: true
- snippet_group:
- caption: Mini footer
file: mini-footer.html
full_width: true
- name: lists
title: Lists
description: Customizable scrollable lists.
components:
- name: list
class: mdl-list
snippets:
- snippet_group:
- caption: Simple list
file: list-item.html
- snippet_group:
- caption: Icons
file: icon.html
- snippet_group:
- caption: Avatars and actions
file: action.html
- snippet_group:
- caption: Avatars and controls
file: list-control.html
- snippet_group:
- caption: Two line
file: two-line.html
- snippet_group:
- caption: Three line
file: three-line.html
- name: loading
title: Loading
description: Indicate loading and progress states.
components:
- name: progress
caption: Progress bar
class: mdl-progress
snippets:
- snippet_group:
- caption: Default
file: progress-default.html
demo_file: progress-default-demo.html
- snippet_group:
- caption: Indeterminate
file: progress-indeterminate.html
demo_file: progress-indeterminate-demo.html
- snippet_group:
- caption: Buffering
file: progress-buffering.html
demo_file: progress-buffering-demo.html
- name: spinner
caption: Spinner
class: mdl-spinner
snippets:
- snippet_group:
- caption: Default
file: spinner-default.html
- caption: Single color
file: spinner-single-color.html
- name: menus
title: Menus
description: Lists of clickable actions.
components:
- name: menu
class: mdl-menu
snippets:
- snippet_group:
- caption: Lower left
file: lower-left.html
demo_file: lower-left-demo.html
extra_codepen_css: codepen-lower-buttons.css
- caption: Lower right
file: lower-right.html
demo_file: lower-right-demo.html
- snippet_group:
- caption: Top left
file: top-left.html
demo_file: top-left-demo.html
extra_codepen_css: codepen-top-buttons.css
- caption: Top right
file: top-right.html
demo_file: top-right-demo.html
- name: sliders
title: Sliders
description: Selecting a value out of a range.
components:
- name: slider
class: mdl-slider
snippets:
- snippet_group:
- caption: Default slider
file: slider-default.html
demo_file: slider-default-demo.html
- caption: Starting value
file: slider-starting-value.html
demo_file: slider-starting-value-demo.html
- name: snackbar
title: Snackbar
description: Transient popup notifications.
components:
- name: snackbar
class: mdl-snackbar
snippets:
- snippet_group:
- caption: Snackbar
file: snackbar.html
- snippet_group:
- caption: Toast
file: toast.html
- name: toggles
title: Toggles
description: Choose between states.
components:
- name: checkbox
caption: Checkbox
class: mdl-checkbox
snippets:
- snippet_group:
- caption: Check on
file: check-on.html
- caption: Check off
file: check-off.html
- name: radio
caption: Radio button
class: mdl-radio
snippets:
- snippet_group:
- caption: Radio on
file: radio-on.html
- caption: Radio off
file: radio-off.html
- name: icon-toggle
caption: Icon toggle
class: mdl-icon-toggle
snippets:
- snippet_group:
- caption: Icon on
file: icon-on.html
- caption: Icon off
file: icon-off.html
- name: switch
caption: Switch
class: mdl-switch
snippets:
- snippet_group:
- caption: Switch on
file: switch-on.html
- caption: Switch off
file: switch-off.html
- name: tables
title: Tables
description: Organize data.
components:
- name: data-table
class: mdl-data-table
snippets:
- snippet_group:
- caption: Data table
file: data-table.html
- name: textfields
title: Text Fields
description: Textual input components.
components:
- name: textfield
class: mdl-textfield
snippets:
- snippet_group:
- caption: Text
file: textfield-text.html
demo_file: textfield-text-demo.html
- caption: Numeric
file: textfield-numeric.html
demo_file: textfield-numeric-demo.html
- snippet_group:
- caption: Text with floating label
file: textfield-floating-text.html
demo_file: textfield-floating-text-demo.html
- caption: Numeric with floating label
file: textfield-floating-numeric.html
demo_file: textfield-floating-numeric-demo.html
- snippet_group:
- caption: Multiple line
file: textfield-multi-line.html
demo_file: textfield-multi-line-demo.html
- caption: Expanding
file: textfield-expanding.html
demo_file: textfield-expanding-demo.html
- name: tooltips
title: Tooltips
description: Useful information on hover.
components:
- name: tooltip
class: mdl-tooltip
snippets:
- snippet_group:
- caption: Simple
file: tooltip-simple.html
- caption: Large
file: tooltip-large.html
- snippet_group:
- caption: Rich
file: tooltip-rich.html
- caption: Multiple lines
file: tooltip-multiline.html
---
================================================
FILE: docs/_pages/customize.md
================================================
---
layout: customize
title: Customize & Download
bodyclass: customize
include_prefix: ../
---
================================================
FILE: docs/_pages/faq.md
================================================
---
layout: styles
title: FAQ
bodyclass: faq
include_prefix: ../
---
<div class="docs-text-styling">
<section class="docs-toc">
<h3>Contents</h3>
<nav class="section-content">
<ul>
<li><a href="#where-should-i-use">Where should I use Material Design Lite (MDL)?</a></li>
<li><a href="#css-naming-conventions">What CSS naming conventions does MDL use?</a></li>
<li><a href="#progressive-enhancement">Does MDL support progressive enhancement?</a></li>
<li><a href="#browser-support">Which browsers does MDL support?</a></li>
<li><a href="#polymer">Does MDL play nicely with Polymer?</a></li>
<li><a href="#bootstrap">Is MDL comparable to Bootstrap?</a></li>
<li><a href="#existing-implementations">How does it compare to existing Material CSS implementations?</a></li>
<li><a href="#options-available">Should I use the minified, CDN or Sass versions of MDL?</a></li>
<li><a href="#official-cdn">What service does the official CDN use?</a></li>
<li><a href="#web-starter-kit">How does MDL relate to Web Starter Kit?</a></li>
<li><a href="#mdl-in-production">Do any Google properties use MDL in production?</a></li>
<li><a href="#mdl-showcase">Is there a showcase available of sites using MDL?</a></li>
<li><a href="#individual-components">Can I build or use individual MDL components (e.g a button)?</a></li>
<li><a href="#report-an-issue">How do I report a problem with MDL?</a></li>
<li><a href="#getting-help">Where can I get help with questions about using MDL?</a>
<li><a href="#slide-decks">Are there any presentations or slide-decks available on MDL?</a></li>
<li><a href="#new-components">Can I request or contribute components to MDL?</a></li>
<li><a href="#alternate-preprocessor">Will MDL support non-Sass preprocessors?</a></li>
<li><a href="#issue-updates">How do I keep updated with issues I'm interested in?</a></li>
</ul>
</nav>
</section>
<h2 id="where-should-i-use">Where should I use Material Design Lite (MDL)?</h2>
If you’re interested in a [Material Design](https://www.google.com/design/spec/material-design/introduction.html) experience using vanilla Web technologies like CSS, JavaScript and HTML, MDL might be a useful option to consider. We optimise for websites heavy on content, such as marketing pages, articles, blogs and general web content that isn’t particularly app-y. If you just want to pick some colors, customise a template and ship a Material experience, we try to help make that process simpler.
Whilst there exist several community-driven options for Material Design, our experience has shown that there are several gaps in the Material specification when it comes to the web. Rather than guessing how these gaps should be filled (something we know the community has struggled with), we’ve opted for a close collaboration with the Material Design team to provide a Material library that is both spec compatible for today and provides guidance on aspects of the spec still being evolved.
<h2 id="css-naming-conventions">What CSS naming conventions does MDL use?</h2>
MDL was written using [BEM](https://en.bem.info/method/). BEM stands for Block, Element, Modifier. It is a method used to construct CSS class-names so they are consistent, isolated, and expressive. A few good resources for learning more about BEM methods are:
* [CSSWizardry](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
* [CSS-Tricks](https://css-tricks.com/bem-101/)
* [Smashing Magazine](http://www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/)
These are great resources that simplify the data needed to understand BEM. If you want to read the methodology from the inventors, [Yandex provides the resource](https://en.bem.info/). This reference goes way beyond just the CSS and into the full JavaScript setup they use as well.
Our [wiki](https://github.com/google/material-design-lite/wiki/Understanding-BEM) includes a section on the namespacing used for MDL specifically.
<h2 id="progressive-enhancement">Does MDL support progressive enhancement?</h2>
MDL’s components were designed from the ground up with progressive enhancement in mind. We attempt to build on native HTML elements as much as possible, relying on JavaScript where absolutely necessary for ‘enhancements’.
One example of this is our ‘Text only’ Material Design template. Switching JavaScript off in Chrome DevTools, the page still renders CSS fine:
This allows us to render important content first and then ‘enhance’ the page with things like Material Design button ripples and pop-out menu components.
MDL will degrade to a no-JavaScript experience on IE9, though you can pull in polyfills for an enhanced experience. If components require JavaScript to function, such as Layout, these will otherwise need to be planned for in development. IE10+ and evergreen browsers are fully supported. For more details on our browser support, see ‘Which browsers does MDL support?’.
Note: the MDL site itself attempts to use progressive enhancement where possible. We do however have aspects of the site (e.g our component page) that rely more heavily on JS. The MDL Templates and Components otherwise try to render as well as they can with JS off.
<h2 id="browser-support">Which browsers does MDL support?</h2>
The complete MDL experience should work in the last two versions of all evergreen browsers, whilst we gracefully degrade to CSS-only in browsers like IE9 that don’t pass our [Cutting-the-mustard](https://github.com/google/material-design-lite/blob/9e6c6ec9237715bfa04b307f786e9073f943e6be/src/mdlComponentHandler.js#L333) test.
Our [browser compatibility matrix](https://github.com/google/material-design-lite/#browser-support) has the most up to date information on the browsers we officially support. For components, at minimum we require support for [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) and [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener), which can be [polyfilled](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) as needed. Our Templates will work in IE10+, primarily due to our use of Flexbox.
The polyfills that we’re currently using for the MDL site to improve support in oldIE are the following:
```html
<!--[if IE]>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.2.0/es5-shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
```
IE10 standards mode [removes](http://bit.ly/1dypChT) support for conditional comments, so the above will only get interpreted by older versions of IE, such as IE9.
We do not officially support IE8. That said, some components will degrade using the CSS-only (or native HTML element) experience there better than others. For example:
**Buttons**
<img alt="Buttons rendering in IE8" src="../assets/button_degradation.png">
**Tables**
<img alt="Tables gracefully degrading in IE8" src="../assets/table_degradation.png">
**Sliders (degrade to input fields)**
<img alt="Sliders degrading in IE8 to input fields" src="../assets/sliders_degradation.png">
<h2 id="polymer">Does MDL play nicely with Polymer? Is it a replacement for the Paper elements?</h2>
MDL focuses on delivering an experience that is optimised for static content sites, like blogs, marketing pages and more traditional text-based web pages.
The <a href="https://elements.polymer-project.org/browse?package=paper-elements">Paper</a> elements built with <a href="http://polymer-project.org">Polymer</a> are fully encapsulated components that can be used individually or composed together to create a material design-style site, and support more advanced user interaction.
That said, MDL can be used alongside the Polymer element counterparts. Polymer uses the power of Web Components to encapsulate the designs used for those components. MDL does not affect the styling within custom components.
<h2 id="bootstrap">Is MDL comparable to Bootstrap?</h2>
*If we're using it instead of Bootstrap, can we expect the same level of component styling?*
Material Design can replace many parts of Bootstrap. However, it does not intend to feature-match everything Bootstrap offers. Instead MDL intends to implement the components specified by the Material Design specification. This allows it to provide the most comprehensive and accurate solution available.
<h2 id="existing-implementations">How does it compare to existing Material CSS implementations?</h2>
*Materialize, Material Bootstrap, etc*
We think the community does a great job offering their own take on how Material Design should be implemented for CSS libraries.
That said, the large, diverse number of implementations available are often quite liberal with their interpretation of the spec (not their fault!) and their opinions don’t always reflect what the Material Design team would consider ‘correct’. MDL was developed in close collaboration with the Material Design and Chrome UX teams and undergoes regular reviews for spec compliance. When we run into an area of the spec that isn’t yet fully fleshed out, MDL is able to offer reviewed opinions on how these should be solved in a way that tries to stay true to Material Design.
<h2 id="options-available">Should I use the minified, CDN or Sass versions of MDL?</h2>
*Should I build my own version or download the minified version or simply refer to CDN objects?*
**Minified: **If it’s your first time using MDL, we recommend downloading one of the default packages from the ‘Getting Started’ page that include a minified version of our CSS/JS and optionally our pre-made Templates.
**CDN: **If you’re just prototyping or want to avoid hosting your own copy of the MDL CSS and JS files, you can use our CDN to pull down a heavily edge-cached version.
**Customiser: **If you’re creating a new site with MDL and are using a custom color scheme, we recommend downloading the default package then generating a custom build using the Customiser tool. You can use this to override the material.min.css file for your own needs.
**Sass: **If you would prefer to go all in, you can get the Sass version of MDL, which includes our original sources, docs and templates. This version allows maximum customisation using CSS variables and the rest of the Sass goodness you’re used to.
<h2 id="official-cdn">What service does the official CDN use?</h2>
The official CDN is hosted using [Google Cloud Storage](https://cloud.google.com/storage/).
<h2 id="web-starter-kit">How does MDL relate to Web Starter Kit?</h2>
MDL is an evolutionary step from the styleguide provided in Web Starter Kit. The more [Web Starter Kit](https://developers.google.com/web/tools/starter-kit/) was used, the more it became clear that many developers simply wanted Material Design in their sites.
The WSK Styleguide also did not align to Material Design fully, it was simply based on the idea. From the WSK project, MDL was born to try and fill this need for developers. In the process making the implementation as faithful as possible to the specification.
<h2 id="mdl-in-production">Do any Google properties use MDL in production?</h2>
MDL is used in production by a few different Google properties. These use an older, incomplete version but demonstrate what deployed experiences can look like. Examples include:
The [Google Services](https://developers.google.com/mobile/add) site:
[RichMediaGallery](http://www.richmediagallery.com/) by DoubleClick:
and is being used by many other teams on upcoming projects, including Google Shopping.
<h2 id="mdl-showcase">Is there a showcase available of sites using MDL?</h2>
See the <a href="/showcase/">Showcase</a> for an early list of Google sites using MDL in production.
To request your site be added, please file a [new issue](https://github.com/Google/material-design-lite/issues/new?title=Site%20Showcase%20Request&body=Please%20include:%0A*%20Description%0A*%20Primary%20Link%0A*%20Screenshot) on our GitHub issue tracker. The issue should include a link, a description of the site and a suggested screenshot.
We hope to add a properly polished showcase to the site in the near future.
<h2 id="individual-components">Can I build or use individual MDL components (e.g a button)?</h2>
For V1 of MDL we are focused on the use-case of folks who are likely to need a few different components on their page and will want to include most of the MDL library. This means that support and docs around just plucking single components on their own is minimal.
That said, if you need to generate a build using just a single (or smaller number of) components, you will need to use Gulp with our Sass build. You can [comment out](https://github.com/google/material-design-lite/blob/master/src/material-design-lite.scss) those components you don’t need in material-design-lite.scss, [comment out](https://github.com/google/material-design-lite/blob/master/gulpfile.js#L191) the scripts you don’t need in the Gulpfile and then run `gulp` to create your build.
We have talked about offering up components in a more modular fashion but will be exploring this in the post V1 timeline.
<h2 id="report-an-issue">How do I report an issue with MDL?</h2>
Please let us know about any problems by opening an issue on our [GitHub repo](https://github.com/google/material-design-lite/issues).
<h2 id="getting-help">Where can I get help with questions about using MDL?</h2>
We encourage the MDL user and developer community to ask questions, and help answer questions, on [Stack Overflow](http://stackoverflow.com), using the `Material-Design-Lite` tag.
<h2 id="slide-decks">Are there any presentations or slide-decks available on MDL?</h2>
We did a preview talk at Google I/O 2015 on MDL and the slides for that talk can be found on [SpeakerDeck](https://speakerdeck.com/gauntface/material-design-lite-preview).
<h2 id="new-components">Can I request or contribute components to MDL?</h2>
Sure! There may be components or templates you would like to see implemented in MDL that we don't yet provide. Please feel free to propose them on the <a href="https://github.com/Google/material-design-lite/issues/new?title=%5BComponent%20Request%5D%20%7BComponent%7D&body=Please%20include:%0A*%20Description%0A*%20Material%20Design%20Spec%20link%0A*%20Use%20Case%28s%29">Issue Tracker</a>. While we can't guarantee we'll be able to implement them all, we will consider requests and review them at regular intervals.
<h2 id="alternate-preprocessor">Will MDL support non-Sass preprocessors?</h2>
*Stylus, Less, PostCSS, etc.*
MDL is implemented using Sass and there are no current plans to change this. If you wish to maintain a port to another preprocessor, you are more than welcome to.
<h2 id="issue-updates">How do I keep updated with issues I'm interested in?</h2>
Watching the whole repository can introduce a lot of extra noise in your stream. To keep updated with just issues you are interested in you only need to subscribe to that issue. This is done on the issue page by clicking the "Subscribe" button in the right hand sidebar.
<img alt="Subscribing to a single issue" src="../assets/faq/subscribe-single-issue.png">
================================================
FILE: docs/_pages/index.md
================================================
---
layout: layout
bodyclass: about
include_prefix: ./
---
<!-- TODO: Try to separate markup and content -->
<section class="docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
<dl>
<dt>Material Design Lite</dt>
<dd>
Material Design Lite lets you add a [Material Design](http://google.com/design/spec) look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. [Get started now](started/index.html).
</dd>
</dl>
</section>
<section class="about-panel about-panel--templates mdl-cell mdl-cell--12-col" data-target="templates/index.html">
Templates
</section>
<section class="docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
<p>
The MDL components are created with CSS, JavaScript, and HTML. You can use the components to construct web pages and web apps that are attractive, consistent, and functional. Pages developed with MDL will adhere to modern web design principles like browser portability, device independence, and graceful degradation.
</p>
</section>
<section class="about-panel about-panel--components mdl-color-text--white mdl-cell mdl-cell--6-col" data-target="components/index.html">
Components
</section>
<section class="about-panel about-panel--styles mdl-color-text--white mdl-cell mdl-cell--6-col" data-target="styles/index.html">
Styles
</section>
<section class="about-panel about-panel--customize mdl-color-text--white mdl-cell mdl-cell--12-col" data-target="customize/index.html">
Customize
</section>
<section class="docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
<p>
The MDL component library includes new versions of common user interface controls such as buttons, check boxes, and text fields, adapted to follow Material Design concepts. The library also includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and more. MDL is free to download and use, and may be used with or without any library or development environment (such as [Web Starter Kit](https://developers.google.com/web/starter-kit/)). It is a cross-browser, cross-OS web developer's toolkit that can be used by anyone who wants to write more productive, portable, and — most importantly — usable web pages.
</p>
</section>
<script src="assets/index.js" async></script>
================================================
FILE: docs/_pages/showcase.md
================================================
---
layout: showcase
title: 'Showcase: sites using MDL'
bodyclass: showcase
include_prefix: ../
sites:
- name: wallet
title: Google Wallet
description: Google Wallet allows you to send money to anyone in the US with an email address. It's fast, easy, and free to send directly from your debit card, bank account, or Wallet Balance.
url: https://www.google.com/wallet/
- name: contributor
title: Google Contributor
description: Contribute a few dollars each month. See fewer ads. It's that simple. The money you contribute helps fund the sites you visit.
url: https://www.google.com/contributor/welcome/
- name: work_partners
title: Google for Work
description: The Google for Work Partner Program enables you to sell, service, and innovate by leveraging our products and platforms across the Google for Work suite.
url: https://www.google.com/work/partners/
- name: rework
title: reWork with Google
description: Practices, research, and ideas from Google and other organizations to put people first.
url: https://rework.withgoogle.com/
- name: developers
title: Google Developers
description: Web Fundamentals is a comprehensive resource for multi-device web development hosted by Google Developers.
url: https://developers.google.com/web/fundamentals/
- name: sunroof
title: Google Project Sunroof
description: Project Sunroof puts Google's expansive data in mapping and computing resources to use, helping calculate the best solar plan for you.
url: https://www.google.com/get/sunroof/about/
---
<div class="sites__content">
<p>Material Design Lite is used on a wide range of sites. Below are just a small selection of the <strong>Google.com</strong> sites that have launched using us. We hope to expand the showcase to cover third-party and community sites built using MDL in the near future. To request your site be added, please file a <a href="https://github.com/Google/material-design-lite/issues/new?title=Site%20Showcase%20Request&body=Please%20include:%0A*%20Description%0A*%20Primary%20Link%0A*%20Screenshot">new issue</a> on our GitHub issue tracker.</p>
</div>
================================================
FILE: docs/_pages/started.md
================================================
---
layout: started
title: Getting started
bodyclass: started
include_prefix: ../
snippets:
- component_name: button
snippet_group:
- caption: Raised button
file: raised-ripple-accent.html
- caption: Colored FAB
file: fab-colored.html
---
================================================
FILE: docs/_pages/styles.md
================================================
---
layout: styles
title: Styles
bodyclass: styles
include_prefix: ../
---
<div class="styles__content">
<p>
Material Design Lite is a light-weight implementation of Material Design,
specifically crafted for the web. For more detailed guidelines and
specifications for other platforms please refer to the
<a href="https://www.google.com/design/spec/material-design">
Material Design site
</a>
</p>
<h2 class="mdl-typography--subhead">Typography</h2>
<dl class="typo-styles">
<dt>h1</dt>
<dd>
<div class="typo-styles__demo mdl-typography--display-4">Light 112sp</div>
<div class="typo-styles__desc">
<span class="typo-styles__name">display-4</span>
<span class="typo-styles__weight">font weight 300</span>
</div>
</dd>
<dt>h2</dt>
<dd>
<div class="typo-styles__demo mdl-typography--display-3">Regular 56sp</div>
<div class="typo-styles__desc">
<span class="typo-styles__name">display-3</span>
<span class="typo-styles__weight">font weight 400</span>
</div>
</dd>
<dt>h3</dt>
<dd>
<div class="typo-styles__demo mdl-typography--display-2">Regular 45sp</div>
<div class="typo-styles__desc">
<span class="typo-styles__name">display-2</span>
<span class="typo-styles__weight">font weight 400</span>
</div>
</dd>
<dt>h4</dt>
<dd>
<div class="typo-styles__demo mdl-typography--display-1">Regular 34sp</div>
<div class="typo-styles__desc">
<span class="typo-styles__name">display-1</span>
<span class="typo-styles__weight">font weight 400</span>
</div>
</dd>
<dt>h5</dt>
<dd>
<div class="typo-styles__demo mdl-typography--headline">Regular 24sp</div>
<div class="typo-styles__desc">
<span class="typo-styles__name">headline</span>
<span class="typo-styles__weight">font weight 400</span>
</div>
</dd>
<dt>h6</dt>
<dd>
<div class="typo-styles__demo mdl-typography--title">Regular 20sp</div>
<div class="typo-styles__desc">
<span class="typo-styles__name">title</span>
<span class="typo-styles__weight">font weight 500</span>
</div>
</dd>
</dl>
<div class="code-with-text">
<strong>Note</strong>: This portion is only to demonstrate header and display styles for out CSS. For more typography guidelines, please refer to the <a href="https://www.google.com/design/spec/material-design">Material Design spec</a>.
</div>
<div class="styles__download">
<a class="download-btn download-btn--font" href="http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B0J8hsRkk91LRjU4U1NSeXdjd1U/RobotoTTF.zip">
<i class="material-icons">file_download</i>
Download Roboto Font
</a>
<span class="download__size">1.21 MB (.zip)</span>
</div>
<div class="code-with-text">
To embed Roboto into your web page, copy the code as the first element in the <code><head></code> of your HTML document.
<pre class="language-markup"><code><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css"></code></pre>
</div>
</div>
<div class="styles__ribbon styles__ribbon--icons">
<a href="http://google.github.io/material-design-icons/" class="ribbon__imagecontainer">
<img src="../assets/icons.svg" class="ribbon__image">
<div class="ribbon__caption ribbon__caption--split">
Preview icons <i class="material-icons">arrow_forward</i>
</div>
</a>
</div>
<div class="styles__content mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Icons</h3>
<p>Material Design Icons are the official open-source icons featured in the Google Material Design specification. What’s included:</p>
</div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<ul>
<li>SVG versions of all icons in both 24px and 48px flavours</li>
<li>SVG and CSS sprites of all icons</li>
<li>1x, 2x icons targeted at the Web (PNG)</li>
<li>1x, 2x, 3x icons targeted at iOS (PNG)</li>
<li>Hi-dpi version of all icons (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG)</li>
</ul>
</div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Getting Started</h3>
<p>You have a few options for getting the icons.</p>
<h3>Download the Zip</h3>
<p>Grab the latest stable zip archive (~57MB) of all icons of the bleeding-edge version from master.</p>
<div class="styles__download">
<a class="download-btn download-btn--icons" href="https://github.com/google/material-design-icons/releases/download/2.0.0/material-design-icons-2.0.0.zip">
<i class="material-icons">file_download</i>
Download
</a>
</div>
</div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<h3>Bower</h3>
<div class="code-with-text">
Install the icons using the <strong>Bower</strong> package manager.
<pre class="language-markup"><code>$ bower install material-design-icons --save</code></pre>
</div>
<h3>npm</h3>
<div class="code-with-text">
You can also find all the icons on <strong>npm</strong>.
<pre class="language-markup"><code>$ npm install material-design-icons --save</code></pre>
</div>
<h3>Usage</h3>
<p>Take a look at the included index.html file for a preview of all icons included in the set. You are free to use the icons in the way that makes most sense to your project.</p>
<h3>Structure</h3>
<p>In general, an icon category (e.g. action) will include the following directories, containing multiple resolutions of our icons.</p>
<ul>
<li>1x, 2x Web</li>
<li>1x, 2x, 3x iOS</li>
<li>drawable hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi</li>
<li>svg</li>
</ul>
<p>Decide on the icon resolution required for your project and copy, then reference the icons you wish to use.</p>
</div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Spritesheets</h3>
<p>Material Design icons come with SVG and CSS sprites for each category of icon we include. These can be found in the sprites directory, under svg-sprite and css-sprite.</p>
<h3>Using CSS Sprites</h3>
<p>To use a CSS spritesheet, reference the stylesheet for the icon category you wish to use, then include the icon definition in your markup. E.g. to use one of the play icons in css-sprite-av.</p>
<p>That’s it! Don’t forget to publish the corresponding CSS and SVG/PNG files when deploying your project.</p>
</div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<div class="code-with-text">
Reference the stylesheet:
<pre class="language-markup"><code><link href="css-sprite/sprite-av-black.css" rel="stylesheet"></code></pre>
</div>
<div class="code-with-text">
Create an element which will use the icon as a background:
<pre class="language-markup"><code><div></div></code></pre>
</div>
<div class="code-with-text">
Add a class referencing the <code>icon</code> spritesheet and specific <code>icon icon-ic_play-circle_outline_black_24dp</code>, which you can get from the above stylesheet.
<pre class="language-markup"><code><div class="icon icon-ic_play-circle_outline_black_24dp"></div></code></pre>
</div>
</div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Using SVG Sprites</h3>
<p>Similarly, to use an SVG spritesheet, reference the stylesheet for the icon category, then include the icon definition in your markup.</p>
</div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<div class="code-with-text">
E.g: to use one of the play icons in <code>svg-sprite-av</code>, reference the stylesheet:
<pre class="language-markup"><code><link href="svg-sprite/svg-sprite-av.css" rel="stylesheet"></code></pre>
</div>
<div class="code-with-text">
Create an element which will use the icon as a background:
<pre class="language-markup"><code><div></div></code></pre>
</div>
<div class="code-with-text">
Next, make sure to set a dimension for the icon. This can either be done inline or via a class. We’ll use a class for this example.
<pre class="language-markup"><code><style>
.svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; }
</style></code></pre>
</div>
<div class="code-with-text">
Finally, set the dimension and specific ifcon <code>svg-ic_play_circle_outline_24px</code>, which you can get from the above stylesheet.
<pre class="language-markup"><code><div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims"> </div></code></pre>
</div>
<h3>Polymer Icons</h3>
<p>If you wish to use the icon set with Polymer, we recommend consuming them via the <strong><iron-icons>-element</strong>.
<h3>License</h3>
<p>All icons are released under <strong>Attribution 4.0 International license</strong>.</p>
</div>
</div>
<div class="styles__ribbon styles__ribbon--colors">
<a class="ribbon__imagecontainer">
<img src="../assets/colors.svg" class="ribbon__image">
<div class="ribbon__caption">
Color palette
</div>
</a>
</div>
<div class="styles__content mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Color palette</h3>
<p>If you’re using the extended color palette, use the first color as the primary color in your app and the other colors as accents.</p>
<p><strong>See all colors and their accessibility ratios</strong>. This resource includes info on the appropriate contrast ratios and alpha values when using white or black text on a colored background.</p>
<div class="styles__download">
<a class="download-btn download-btn--swatches" href="http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B0J8hsRkk91LSGx6b0w3WWpMQ1k/color_swatches.zip">
<i class="material-icons">file_download</i>
Download color swatches
</a>
<span class="download__size">0.02 MB (.zip)</span>
</div>
<div class="styles__download">
<a class="download-btn download-btn--customizer" href="../customize/index.html">
<i class="material-icons">arrow_forward</i>
Try the custom CSS Theme Builder
</a>
</div>
</div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<a href="../customize/index.html"><img class="customizer" src="../assets/customizer.png"></a>
</div>
</div>
================================================
FILE: docs/_pages/templates.md
================================================
---
layout: templates
title: Templates
bodyclass: templates
include_prefix: ../
templates:
- name: blog
title: Blog
description: A mobile focused responsive template that showcases image or text based blog entries, a subscription CTA, search & share links, and an expanded article page with comments, counters and bookmarking capabilities built-in.
- name: android-dot-com
title: Android.com MDL skin
description: A Material Design Lite version of the current android.com site, using the same content with a horizontal navigation, feature carousel and long form scrolling sub pages.
- name: dashboard
title: Dashboard
description: A modular responsive template built to display data visualizations and information with a clear vertical nav, user profile, search and dedicated space for updates and filters.
- name: portfolio
title: Portfolio
description: A modern and clean looking template for a portfolio/blog build with Material Design Lite. Included are a top nav bar that comes with the waterfall header component, cards to display different types of content and a footer.
- name: text-only
title: Text-heavy webpage
description: Built for presenting content that is information dense, easily updatable, and optimized for legibility, this template has a sticky horizontal top nav on mobile, feature callouts, cards and a site map footer with a deep-linked table of contents.
- name: article
title: Stand-alone article
description: A clean layout optimized for presenting text-based content with a breadcrumb nav, search, clear headers and a footer that utilizes a card-like structure to showcase the content.
---
================================================
FILE: docs/_templates/component.html
================================================
{% block content %}
{{content|safe}}
{% endblock %}
================================================
FILE: docs/_templates/components.html
================================================
{% extends 'layout.html' %}
{% block content %}
<link href="{{page.include_prefix}}assets/components.css" rel="stylesheet">
<script src="{{page.include_prefix}}assets/snippets.js"></script>
<script src="{{page.include_prefix}}assets/components.js"></script>
<link rel="stylesheet" href="{{page.include_prefix}}components/demos.css">
<div class="mdl-components mdl-js-components mdl-cell mdl-cell--12-col">
<aside class="mdl-components__nav docs-text-styling mdl-shadow--4dp">
{% for category in page.categories %}
<a href="#{{ category.name }}-section" class="mdl-components__link mdl-component {{ category.name }}">
<div class="mdl-components__link-image"
style="background-image: url('{{page.include_prefix}}assets/comp_{{ category.name }}.png')">
</div>
<span class="mdl-components__link-text">{{ category.title }}</span>
</a>
{%- endfor %}
</aside>
<main class="mdl-components__pages">
<section id="index-section" class="mdl-components-index mdl-components__page">
<div class="mdl-components-index-text mdl-grid">
<div class="mdl-components-text docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
<dl class="mdl-components-dl">
<dt class="mdl-components-dt">COMPONENTS</dt>
<dd class="mdl_components-dd">
Material Design Lite (MDL) is a library of components for web developers
based on Google's Material Design Philosophy: "A visual language for our
users that synthesizes the classic principles of good design with the
innovation and possibility of technology and science." Understanding the
goals and principles of Material Design is critical to the proper use of
the Material Design Lite components. If you have not yet read the
<a href="http://www.google.com/design/spec/material-design/introduction.html">Material Design Introduction</a>
you should do so before attempting to use the components.
</dd>
</dl>
</div>
</div>
<div class="mdl-components-img"></div>
</section>
{% for category in page.categories -%}
<section id="{{ category.name }}-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>{{ category.title }}</h3>
<p>{{ category.description }}</p>
</div>
{% if category.components.length > 1 %}
<section class="docs-toc docs-text-styling">
<nav class="section-content">
<ul>
{% for component in category.components %}
<li><a href="#{{ category.name }}-section/{{ component.name }}">{{ component.caption }}</a></li>
{%- endfor %}
</ul>
</nav>
</section>
{%- endif %}
{% for component in category.components %}
{% if component.caption %}
<span class="docs-text-styling">
<h1 class="mdl-components__classname" id="{{ category.name }}-section/{{ component.name }}">{{ component.caption }}</h1>
</span>
{%- endif %}
<!-- Add warning, if the component has one -->
{% if component.warning %}
<div class="mdl-components__warning"><b>Note: </b>{{ component.warning }}</div>
{%- endif %}
<!-- Generating snippets -->
{% for snippet_group in component.snippets %}
{% set snippet_group["component_name"] = component.name %}
{% include "./snippets.html" with snippet_group only %}
{%- endfor %}
<!-- Adding the demo page -->
{% set demo_css = "../../dist/components/" + component.name + "/demo.css" %}
<style>
{% include demo_css ignore missing %}
</style>
{% set demo_js = "../../dist/components/" + component.name + "/demo.js" %}
<script>
{% include demo_js ignore missing %}
</script>
{% set demo = "../../src/" + component.name + "/demo.html" %}
{% include demo ignore missing %}
<div class="docs-text-styling docs-readme">
{% set doc = "../../dist/components/" + component.name + "/index.html" %}
{% include doc ignore missing %}
</div>
{%- endfor %}
</div>
</section>
{%- endfor %}
</main>
</div>
{% endblock %}
================================================
FILE: docs/_templates/customize.html
================================================
{% extends 'layout.html' %}
{% block content %}
<link rel="stylesheet" href="{{page.include_prefix}}assets/customizer.css">
<div class="mdl-gen mdl-cell mdl-cell--12-col">
<div class="mdl-grid">
<div class="mdl-gen__panel mdl-gen__panel--left mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
<div id="wheel">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3.2" />
<feOffset dx="0" dy="0" result="offsetblur" />
<feFlood flood-color="rgba(0,0,0,1)" />
<feComposite in2="offsetblur" operator="in" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g class="wheel--maing"></g>
</svg>
<div class="mdl-gen-download">
<a href="#" id="download" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--fab"><i class="material-icons">file_download</i></a>
</div>
</div>
</div>
<div class="mdl-gen__panel--right mdl-gen__panel mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
<div class="mdl-gen__desc docs-text-styling">
<strong>Custom CSS theme builder</strong>
<p>Click on the color wheel to choose a primary (1) and accent (2) color to preview the theme below. When you’ve selected a color combination you like, either reference our <a href="#cdn-code">hosted CSS</a> or download the CSS by clicking the white button in the middle. You will need to include MDL’s JavaScript alongside your customised CSS to get the full experience. This is included in our default Download from the <a href="../started/index.html#download">Getting Started guide</a>.</p>
</div>
<div class="mdl-gen__preview">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<svg class="mdl-layout-icon" width="411px" height="406px" viewBox="0 0 411 406" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-51.000000, -54.000000)" fill="currentColor">
<path d="M253.532807,381.627 L205.905373,459.1512 L75.2987939,365.2047 L137.208794,290.0547 L51,265.8834 L100.217083,116.7498 L183.176447,150.0543 L176.402456,54 L337.901996,54 L331.203531,149.0202 L409.306732,116.4465 L461.243662,265.7448 L371.760263,290.7036 L429.826513,365.6628 L302.333596,459.2493 L253.532807,381.627 Z M222.176831,106.2 L291.098533,106.2 L282.729084,224.796484 L383.182429,182.939488 L404.947387,245.446521 L297.795289,275.304737 L368.114228,365.995226 L313.701833,405.9 L252.592681,308.789934 L192.876775,405.9 L137.348587,365.995226 L212.130699,275.304737 L105.539492,245.446521 L126.18666,182.939488 L230.548276,224.796484 L222.176831,106.2 Z"></path>
</g>
</g>
</svg>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Theme Preview</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Theme Preview</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Some</a>
<a class="mdl-navigation__link" href="#">Links</a>
<a class="mdl-navigation__link" href="#">Here</a>
</nav>
</div>
<main class="mdl-layout__content">
<h3>Try it out</h3>
<p>
Lorem ipsum dolor sit amet.
</p>
<button class="mdl-button mdl-button--colored mdl-button--raised mdl-js-button mdl-js-ripple-effect">BUTTON</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
<i class="material-icons">email</i>
</button>
</main>
</div>
</div>
</div>
<div class="mdl-gen__cdn mdl-cell mdl-cell--12-col">
<div class="code-with-text" id="cdn-code">
CSS hosted on our CDN (17.6kB gzipped):
<pre class="demo-code language-markup codepen-button-disabled"><code class="language-markup mdl-gen__cdn-link" data-language="markup"> <link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.$primary-$accent.min.css" /> </code></pre>
</div>
</div>
</div>
</div>
<script src="{{page.include_prefix}}assets/customizer.js"></script>
<script>init();</script>
{% endblock %}
================================================
FILE: docs/_templates/demo.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.component }} test</title>
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Page styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
<link rel="stylesheet" href="{{page.include_prefix}}material.min.css">
<link rel="stylesheet" href="{{page.include_prefix}}components/demos.css">
<script src="{{page.include_prefix}}material.min.js"></script>
{% set demo_css = "../../dist/components/" + page.component + "/demo.css" %}
<style>
{% include demo_css ignore missing %}
</style>
</head>
<body>
<div style="padding-top: 24px;">
{% block content %}
{{content|safe}}
{% endblock %}
</div>
<!-- Built with love using Material Design Lite -->
{% set demo_js = "../../dist/components/" + page.component + "/demo.js" %}
<script>
{% include demo_js ignore missing %}
</script>
</body>
</html>
================================================
FILE: docs/_templates/layout.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Material Design Lite</title>
<!-- Add to homescreen -->
<link rel="manifest" href="manifest.json">
<!-- Fallback to homescreen for Chrome <39 on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Material Design Lite">
<link rel="icon" sizes="192x192" href="{{page.include_prefix}}assets/android-desktop.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon" href="{{page.include_prefix}}assets/ios-desktop.png">
<!-- TODO: Tile icon for Win8 (144x144 + tile color) -->
<!-- <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> -->
<!-- <meta name="msapplication-TileColor" content="#3372DF"> -->
<meta name="theme-color" content="#263238">
<link rel="shortcut icon" href="{{page.include_prefix}}assets/favicon.png">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<!-- Page styles -->
<link rel="stylesheet" href="{{page.include_prefix}}assets/prism-default.css">
<link rel="stylesheet" href="{{page.include_prefix}}material.min.css">
<link rel="stylesheet" href="{{page.include_prefix}}assets/main.css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="{{page.bodyclass}}">
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
// if (document.location.hostname !== 'localhost' &&
// document.location.hostname !== '127.0.0.1' &&
// document.location.hostname.search('.corp.') === -1) {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-25993200-9', 'auto');
// If a specific component page is loaded directly we'll attribute the
// page view to the specific component's page
if (window.location.pathname.indexOf('/components/') !== -1 &&
window.location.hash.indexOf('-section') !== -1) {
ga('send', 'pageview', '/components/' +
window.location.hash.split('#')[1].split('/')[0]);
} else {
ga('send', 'pageview');
}
// }
// Setup error tracking before anything else runs.
window.onerror = function(message, file, lineNumber, columnNumber, error) {
try {
if (error !== undefined) {
message = error.stack;
}
ga('send', 'event', 'error', file + ':' + lineNumber, String(message));
} catch (e) {
// no-op
}
};
</script>
<div class="image-preloader"></div>
<div class="docs-layout mdl-layout mdl-js-layout">
<header class="docs-layout-header mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="docs-layout-title mdl-layout-title"><a href="{{page.include_prefix}}">Material<br>Design<br>Lite</a></span>
</div>
<div class="docs-navigation__container">
<nav class="docs-navigation mdl-navigation">
<a href="{{page.include_prefix}}index.html" class="mdl-navigation__link about">About</a>
<a href="{{page.include_prefix}}started/index.html" class="mdl-navigation__link started">Getting Started</a>
<a href="{{page.include_prefix}}templates/index.html" class="mdl-navigation__link templates">Templates</a>
<a href="{{page.include_prefix}}components/index.html" class="mdl-navigation__link components">Components</a>
<a href="{{page.include_prefix}}styles/index.html" class="mdl-navigation__link styles">Styles</a>
<a href="{{page.include_prefix}}customize/index.html" class="mdl-navigation__link customize">Customize</a>
<a href="{{page.include_prefix}}showcase/index.html" class="mdl-navigation__link showcase">Showcase</a>
<a href="{{page.include_prefix}}faq/index.html" class="mdl-navigation__link faq">FAQ</a>
<div class="spacer"></div>
<a href="https://github.com/google/material-design-lite" class="mdl-navigation__link mdl-navigation__link--icon github"><i class="material-icons">link</i><span>GitHub</span></a>
<a href="{{page.include_prefix}}started/index.html#download" class="mdl-navigation__link mdl-navigation__link--icon download">
<i class="material-icons"></i><span>Download</span>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-button--mini-fab mdl-color--lime-A200">
<i class="material-icons"></i>
</button>
</a>
</nav>
</div>
<i class="material-icons scrollindicator scrollindicator--right"></i>
<i class="material-icons scrollindicator scrollindicator--left"></i>
</header>
<main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600">
<div class="content mdl-grid mdl-grid--no-spacing" id="content">
<div class="subpageheader mdl-cell--12-col">{{page.title}}</div>
{% block content %}
{{content|safe}}
{% endblock %}
</div>
<section class="docs-text-styling download mdl-color--grey-800">
<a href="{{page.include_prefix}}started/index.html#download" class="mdl-color-text--grey-50">Download Kit</a>
</section>
<footer class="docs-text-styling docs-footer mdl-mini-footer mdl-color--grey-900">
<ul>
<li class="mdl-mini-footer--social-btn">
<a href="https://twitter.com/googledesign" class="social-btn social-btn__twitter" role="button" title="Twitter"></a>
</li>
<li class="mdl-mini-footer--social-btn">
<a href="https://github.com/google/material-design-lite" class="social-btn social-btn__github" role="button" title="GitHub"></a>
</li>
<li class="mdl-mini-footer--social-btn">
<a href="https://plus.google.com/+googledesign" class="social-btn social-btn__gplus" role="button" title="Google+"></a>
</li>
</ul>
<ul class="docs-link-list">
<li><a class="mdl-color-text--grey-600" href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li>
<li><a class="mdl-color-text--grey-600" href="https://github.com/google/material-design-lite/issues">Help</a></li>
</ul>
</footer>
</main>
</div>
<!-- IE Compatibility shims -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js""></script>
<![endif]-->
<!--[if IE]>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexie/1.0.3/flexie.min.js"></script>
<link href="{{page.include_prefix}}assets/ie.css" rel="stylesheet">
<![endif]-->
<!-- end shims -->
<!-- Material Design Lite -->
<script src="{{page.include_prefix}}material.min.js"></script>
<!-- Add Copy-to-CodePen buttons to code blocks -->
<script src="{{page.include_prefix}}assets/codepen.js"></script>
<!-- Enable Prism syntax highlighting -->
<script src="{{page.include_prefix}}assets/prism.js"></script>
<script src="{{page.include_prefix}}assets/prism-markup.min.js"></script>
<script src="{{page.include_prefix}}assets/prism-javascript.min.js"></script>
<script src="{{page.include_prefix}}assets/prism-css.min.js"></script>
<script src="{{page.include_prefix}}assets/prism-bash.min.js"></script>
<script src="{{page.include_prefix}}assets/main.js"></script>
<!-- Built with love using Material Design Lite -->
</body>
</html>
================================================
FILE: docs/_templates/page.html
================================================
{% extends 'layout.html' %}
{% block content %}
{{content|safe}}
{% endblock %}
================================================
FILE: docs/_templates/showcase.html
================================================
{% extends 'layout.html' %}
{% block content %}
{{content|safe}}
{% for template in page.sites %}
<section class="template template--{{ template.name }} docs-text-styling mdl-grid mdl-cell mdl-cell--12-col">
<img src="{{page.include_prefix}}assets/showcase/{{ template.name }}.jpg"
srcset="{{page.include_prefix}}assets/showcase/{{ template.name }}.jpg 1x, {{page.include_prefix}}assets/showcase/{{ template.name }}_2x.jpg 2x"
class="template__preview mdl-cell mdl-cell--8-col">
<div class="template__meta mdl-cell mdl-cell--4-col mdl-grid mdl-grid--no-spacing">
<h3 class="template__header mdl-cell mdl-cell--12-col mdl-typography--body-2">{{ template.title }}</h3>
<p class="mdl-cell mdl-cell--12-col">
{{ template.description }}
</p>
<a href="{{page.include_prefix}}assets/showcase/{{ template.name }}_2x.jpg" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons">image</i>
</button>
Screenshot
</a>
<a href="{{ template.url }}" target="_blank" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons">arrow_forward</i>
</button>
Visit
</a>
</div>
</section>
{% endfor %}
{% endblock %}
================================================
FILE: docs/_templates/snippets.html
================================================
{% if snippet_group.length === 1 && snippet_group[0].full_width %}
<div class="snippet-group is-full-width">
{% else %}
<div class="snippet-group">
{% endif %}
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
{% for snippet in snippet_group %}
{% if snippet.demo_file %}
{% set snippet_file = "../../src/" + component_name + "/snippets/" + snippet.demo_file %}
{% else %}
{% set snippet_file = "../../src/" + component_name + "/snippets/" + snippet.file %}
{% endif %}
<div class="snippet-demo">
<div class="snippet-demo-container demo-{{component_name}} demo-{{component_name}}__{{snippet.file | replace('.html', '')}}">
{% include snippet_file ignore missing %}
</div>
</div>
{%- endfor %}
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
{% for snippet in snippet_group %}
<div class="snippet-caption">
{{ snippet.caption }}
</div>
{%- endfor %}
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled">{% for snippet in snippet_group %}{% set snippet_file = "../../src/" + component_name + "/snippets/" + snippet.file %}<code id="{{ component_name }}/{{ snippet.file }}">{% filter e('html') %}{% include snippet_file ignore missing %}{% endfilter %}</code><div class="codepen-extra-css"><style>{% set extra_css_file = "../../src/" + component_name + "/snippets/" + snippet.extra_codepen_css %}{% include extra_css_file ignore missing %}</style></div>{%- endfor %}{% if snippet_group.length !== 1 || !snippet_group[0].full_width %}<div class="codepen-extra-css"><style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style></div>{% endif %}<form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
================================================
FILE: docs/_templates/started.html
================================================
{% extends 'layout.html' %}
{% block content %}
<script src="{{page.include_prefix}}assets/snippets.js"></script>
<div class="docs-text-styling">
<section class="docs-toc">
<h3>Contents</h3>
<nav class="section-content">
<ul>
<li><a href="#download">Include the master CSS & JavaScript</a></li>
<li><a href="#use-components">Use the components</a></li>
<li><a href="#general-rules">General rules and principles</a></li>
<li><a href="#dynamic">Use MDL on dynamic websites</a></li>
<li><a href="#responsibilities">What are MDL's responsibilities?</a></li>
<li><a href="#whats-next">What's next?</a></li>
<li><a href="#license">License</a></li>
</ul>
</nav>
</section>
<section id="download">
<h3>Include the master CSS & JavaScript</h3>
<div class="section-content">
<p>
Include the Material Lite CSS and JavaScript files in each HTML page in your project. We recommend that you use the <strong>files hosted on our CDN</strong>. You can also <strong>customize and download</strong> them to host them yourself, <strong>build</strong> them from our source code or install them in your <strong>npm</strong>/<strong>Bower</strong> project.
</p>
<div class="mdl-tabs mdl-js-tabs">
<div class="mdl-tabs__tab-bar">
<a href="#tab1" class="mdl-tabs__tab is-active">Hosted</a>
<a href="#tab2" class="mdl-tabs__tab">Download</a>
<a href="#tab3" class="mdl-tabs__tab">Build</a>
<a href="#tab4" class="mdl-tabs__tab">Bower</a>
<a href="#tab5" class="mdl-tabs__tab">npm</a>
</div>
<div class="mdl-tabs__panel is-active" id="tab1">
<div class="code-with-text">
Just add the following <code><link></code> and <code><script></code> elements into your HTML pages (27kB gzipped):
<pre class="language-markup"><code><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.indigo-pink.min.css">
<script defer src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script></code></pre>
</div>
<h4>Choose color scheme</h4>
<p>
<a href="http://www.google.com/design/spec/style/color.html">Color schemes used in Material Design</a> are based on a primary and an accent colors which you may want to personalize. These colors are specified in the CSS file name by following this pattern: <code>material.{primary}-{accent}.min.css</code> (e.g. <code>material.indigo-pink.min.css</code>). Our CDN hosts a number of color combinations based on common Material Design colors. To discover and preview available color combinations use our <a href="../customize/index.html">Customize and Preview tool</a>.
</p>
</div>
<div class="mdl-tabs__panel" id="tab2">
<p>
Download the minified CSS and Javascript now (27kB gzipped):
</p>
<div class="download-button-container">
<a href="$$hosted_libs_prefix$$/$$version$$/mdl.zip">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Download MDL v$$version$$
</button>
</a>
</div>
<div class="code-with-text">
Refer to these files by adding a <code><link></code> and a <code><script></code> elements into your HTML pages and also include the Material Icon font:
<pre class="language-markup"><code><link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"></code></pre>
</div>
<h4>Choose color scheme</h4>
<p>
<a href="http://www.google.com/design/spec/style/color.html">Color schemes used in Material Design</a> are based on a primary and an accent colors which you may want to personalize. Use the <a href="../customize/index.html">Customize and Preview tool</a> to select and preview primary and accent colors combinations for your site. Then download your customized Material Design Lite CSS using the button and simply replace the `material.min.css` with the customized one.
</p>
</div>
<div class="mdl-tabs__panel" id="tab3">
<p>
Our source code is hosted <a href="https://github.com/google/material-design-lite">on GitHub</a>. You'll need to download the code and build it.
</p>
<div class="code-with-text">
Run the following commands in a shell:
<pre class="language-bash"><code># Clone/copy the Material Design lite source code.
git clone https://github.com/google/material-design-lite.git
# Go into the newly created folder containing the source code.
cd material-design-lite
# Install necessary dependencies.
npm install && npm install -g gulp
# Build a production version of the components.
gulp</code></pre>
</div>
<p>You'll find the Material Design Lite library's file in the <code>dist</code> folder. Copy them to your project.
</p>
<div class="code-with-text">
Refer to these files by adding a <code><link></code> and a <code><script></code> element into your HTML pages and also include the Material Icon font:
<pre class="language-markup"><code><link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"></code></pre>
</div>
<div class="caption">
<h4>
Note:
</h4>
Using this method you will not be able to customize the color scheme of the MDL elements. If you'd like to customize the color scheme prefer the CDN hosted or downloadable libraries. In this case use our <a href="../customize/index.html">Customize and Preview tool</a>.
</div>
</div>
<div class="mdl-tabs__panel" id="tab4">
<p>
Simply install Material Design Lite files in your <a href="http://bower.io/">Bower</a> enabled project using:
</p>
<div class="code-with-text">
Run the following command in a shell:
<pre class="language-bash"><code>bower install material-design-lite --save</code></pre>
</div>
<p>
This will install the Material Design Lite library files in your project's <code>bower_components</code> folder.
</p>
<div class="code-with-text">
Refer to these files by adding a <code><link></code> and a <code><script></code> element into your HTML pages and also include the Material Icon font:
<pre class="language-markup"><code><link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
<script src="/bower_components/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"></code></pre>
</div>
<div class="caption">
<h4>
Note:
</h4>
Using this method you will not be able to customize the color scheme of the MDL elements. If you'd like to customize the color scheme prefer the CDN hosted or downloadable libraries. In this case use our <a href="../customize/index.html">Customize and Preview tool</a>.
</div>
</div>
<div class="mdl-tabs__panel" id="tab5">
<p>
Simply install Material Design Lite files in your <a href="https://www.npmjs.com/">npm</a> enabled project using:
</p>
<div class="code-with-text">
Run the following command in a shell:
<pre class="language-bash"><code>npm install material-design-lite --save</code></pre>
</div>
<p>
This will install the Material Design Lite library files in your project's <code>node_modules</code> folder.
</p>
<div class="code-with-text">
Refer to these files by adding a <code><link></code> and a <code><script></code> element into your HTML pages and also include the Material Icon font:
<pre class="language-markup"><code><link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"></code></pre>
</div>
<div class="caption">
<h4>
Note:
</h4>
Using this method you will not be able to customize the color scheme of the MDL elements. If you'd like to customize the color scheme prefer the CDN hosted or downloadable libraries. In this case use our <a href="../customize/index.html">Customize and Preview tool</a>.
</div>
</div>
</div>
<p>
That's it! You are now ready to add MDL components on your site.
</p>
</div>
</section>
<section id="use-components">
<h3>Use the components</h3>
<div class="section-content">
<p>
You'll find below a couple of examples of MDL <a href="../components/index.html#buttons-section">Button</a> elements: a Button with ripples and a FAB Button. Just copy & paste the corresponding source code in the <code><body></code> of an HTML page of your project and the elements will render as shown below.
</p>
<!-- Generating snippets -->
{% for snippet_group in page.snippets %}
{% include "./snippets.html" with snippet_group only %}
{%- endfor %}
<p>
MDL elements can be tweaked and configured by adding CSS classes. For example adding <code>mdl-js-ripple-effect</code> to an MDL <a href="../components/index.html#buttons-section">Button</a> will add a Ripple effect when the button is clicked and adding <code>mdl-button--fab</code> will change the style of the button to a FAB button.
</p>
<p>
There are many other elements available such as <a href="../components/index.html#cards-section">Card containers</a>, <a href="../components/index.html#sliders-section">Sliders</a>, <a href="../components/index.html#tables-section">Tables</a>, <a href="../components/index.html#menus-section">Menus</a>... For the complete set of MDL elements and options have a look at the <a href="../components/index.html">components</a> page.
</p>
<p>
We also recommend that you check out our <a href="../templates/index.html">templates</a>. These are ready to use website templates using MDL components. Feel free to have a look at them to get started quickly on your next project.
</p>
</div>
</section>
<section id="general-rules">
<h3>General rules and principles</h3>
<div class="section-content">
<p>
In general, follow these basic steps to use an MDL component in your HTML page:
</p>
<ol>
<li>Start with a standard HTML element, such as <code><button></code>, <code><div></code>, or <code><ul></code>, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification.</li>
<li>Add one or more MDL-specific CSS classes to the element, such as <code>mdl-button</code> or <code>mdl-tabs__panel</code>, again depending on the component. The classes apply the MDL enhancements to the element and turn it into an MDL component.</li>
</ol>
<p>
Remember to include the <a href="https://developers.google.com/speed/docs/insights/ConfigureViewport">meta viewport</a> tag in your document so mobile devices will render correctly.
</p>
<pre class="language-markup"><code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code></pre>
<div class="caption">
<h4>
A note about HTML elements and MDL CSS classes
</h4>
Material Design Lite uses namespaced <a href="https://en.bem.info/method/">BEM</a> classes—which can apply to almost any HTML element—to construct components. For some components you can use almost any element. The examples in <a href="../components/index.html">each component's documentation</a> use elements that perform well as that component. If you must use elements other than those shown in the examples, we encourage you to experiment to find the best combination of HTML elements and MDL CSS classes for your application.
</div>
</div>
</section>
<section id="dynamic">
<h3>Use MDL on dynamic websites</h3>
<div class="section-content">
<p>
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load.
However in the case where you are creating DOM elements dynamically you need to register new elements using the <code>upgradeElement</code> function. Here is how you can dynamically create the same raised button with ripples shown in the section above:
</p>
<pre class="language-markup codepen-button-enabled"><code><div id="container"/>
<script>
var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');
button.appendChild(textNode);
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);
</script></code><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</section>
<section id="responsibilities">
<h3>What are MDL's responsibilities?</h3>
<div class="section-content">
<p>
Material Design Lite is built to provide a lightweight and basic set of Material Design components and templates for web sites.
The project does not intend to provide structures to create all possible UX needs, but to provide a low-friction Material Design implementation you can build on.
Even within Material Design itself, cards specifically, it is unfeasible to provide every combination in a seamless manner.
When you find something not provided, such as dropdowns in the drawer, you may need to code your own component.
</p>
<p>
gitextract_8efnjcsx/
├── .drone.sec
├── .drone.yml
├── .editorconfig
├── .gitattributes
├── .github/
│ └── ISSUE_TEMPLATE.md
├── .gitignore
├── .jscsrc
├── .jshintrc
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bower.json
├── docs/
│ ├── _assets/
│ │ ├── codepen.js
│ │ ├── components.css
│ │ ├── components.js
│ │ ├── customizer.css
│ │ ├── customizer.js
│ │ ├── ie.css
│ │ ├── index.js
│ │ ├── main.css
│ │ ├── main.js
│ │ └── snippets.js
│ ├── _pages/
│ │ ├── components.md
│ │ ├── customize.md
│ │ ├── faq.md
│ │ ├── index.md
│ │ ├── showcase.md
│ │ ├── started.md
│ │ ├── styles.md
│ │ └── templates.md
│ └── _templates/
│ ├── component.html
│ ├── components.html
│ ├── customize.html
│ ├── demo.html
│ ├── layout.html
│ ├── page.html
│ ├── showcase.html
│ ├── snippets.html
│ ├── started.html
│ ├── styles.html
│ └── templates.html
├── gulpfile.babel.js
├── package.json
├── src/
│ ├── INTRODUCTION.md
│ ├── _color-definitions.scss
│ ├── _functions.scss
│ ├── _mixins.scss
│ ├── _variables.scss
│ ├── animation/
│ │ ├── _animation.scss
│ │ ├── demo.css
│ │ ├── demo.html
│ │ └── demo.js
│ ├── badge/
│ │ ├── README.md
│ │ ├── _badge.scss
│ │ └── snippets/
│ │ ├── badge-on-icon-icon-demo.html
│ │ ├── badge-on-icon-icon.html
│ │ ├── badge-on-icon-text-demo.html
│ │ ├── badge-on-icon-text.html
│ │ ├── badge-on-text-icon-demo.html
│ │ ├── badge-on-text-icon.html
│ │ ├── badge-on-text-text-demo.html
│ │ └── badge-on-text-text.html
│ ├── button/
│ │ ├── README.md
│ │ ├── _button.scss
│ │ ├── button.js
│ │ └── snippets/
│ │ ├── fab-colored-ripple.html
│ │ ├── fab-colored.html
│ │ ├── fab-disabled.html
│ │ ├── fab-mini-colored.html
│ │ ├── fab-mini.html
│ │ ├── fab-ripple.html
│ │ ├── fab.html
│ │ ├── flat-accent.html
│ │ ├── flat-disabled.html
│ │ ├── flat-primary.html
│ │ ├── flat-ripple.html
│ │ ├── flat.html
│ │ ├── icon-colored.html
│ │ ├── icon.html
│ │ ├── raised-accent.html
│ │ ├── raised-colored.html
│ │ ├── raised-disabled.html
│ │ ├── raised-ripple-accent.html
│ │ ├── raised-ripple.html
│ │ └── raised.html
│ ├── card/
│ │ ├── README.md
│ │ ├── _card.scss
│ │ └── snippets/
│ │ ├── event.html
│ │ ├── image.html
│ │ ├── square.html
│ │ └── wide.html
│ ├── checkbox/
│ │ ├── README.md
│ │ ├── _checkbox.scss
│ │ ├── checkbox.js
│ │ └── snippets/
│ │ ├── check-off.html
│ │ └── check-on.html
│ ├── chip/
│ │ ├── README.md
│ │ ├── _chip.scss
│ │ └── snippets/
│ │ ├── basic.html
│ │ ├── button.html
│ │ ├── contact.html
│ │ ├── deletable-contact.html
│ │ └── deletable.html
│ ├── data-table/
│ │ ├── README.md
│ │ ├── _data-table.scss
│ │ ├── data-table.js
│ │ └── snippets/
│ │ └── data-table.html
│ ├── demos.css
│ ├── dialog/
│ │ ├── README.md
│ │ └── _dialog.scss
│ ├── expansion/
│ │ ├── README.md
│ │ ├── _expansion.scss
│ │ └── snippets/
│ │ └── expansion.html
│ ├── footer/
│ │ ├── README.md
│ │ ├── _mega_footer.scss
│ │ ├── _mini_footer.scss
│ │ └── snippets/
│ │ ├── mega-footer.html
│ │ └── mini-footer.html
│ ├── grid/
│ │ ├── README.md
│ │ ├── _grid.scss
│ │ └── snippets/
│ │ ├── codepen-grid.css
│ │ ├── grid-demo.html
│ │ └── grid.html
│ ├── icon-toggle/
│ │ ├── README.md
│ │ ├── _icon-toggle.scss
│ │ ├── icon-toggle.js
│ │ └── snippets/
│ │ ├── icon-off.html
│ │ └── icon-on.html
│ ├── index.html
│ ├── layout/
│ │ ├── README.md
│ │ ├── _layout.scss
│ │ ├── layout.js
│ │ └── snippets/
│ │ ├── fixed-drawer-demo.html
│ │ ├── fixed-drawer.html
│ │ ├── fixed-header-demo.html
│ │ ├── fixed-header-drawer-demo.html
│ │ ├── fixed-header-drawer.html
│ │ ├── fixed-header.html
│ │ ├── fixed-tabs-demo.html
│ │ ├── fixed-tabs.html
│ │ ├── scrollable-tabs-demo.html
│ │ ├── scrollable-tabs.html
│ │ ├── scrolling-header-demo.html
│ │ ├── scrolling-header.html
│ │ ├── transparent-demo.html
│ │ ├── transparent.html
│ │ ├── waterfall-header-demo.html
│ │ └── waterfall-header.html
│ ├── list/
│ │ ├── README.md
│ │ ├── _list.scss
│ │ └── snippets/
│ │ ├── action.html
│ │ ├── icon.html
│ │ ├── list-control.html
│ │ ├── list-item.html
│ │ ├── three-line.html
│ │ └── two-line.html
│ ├── material-design-lite-grid.scss
│ ├── material-design-lite.scss
│ ├── mdlComponentHandler.js
│ ├── menu/
│ │ ├── README.md
│ │ ├── _menu.scss
│ │ ├── menu.js
│ │ └── snippets/
│ │ ├── codepen-lower-buttons.css
│ │ ├── codepen-top-buttons.css
│ │ ├── lower-left-demo.html
│ │ ├── lower-left.html
│ │ ├── lower-right-demo.html
│ │ ├── lower-right.html
│ │ ├── top-left-demo.html
│ │ ├── top-left.html
│ │ ├── top-right-demo.html
│ │ └── top-right.html
│ ├── palette/
│ │ ├── _palette.scss
│ │ ├── demo.css
│ │ └── demo.html
│ ├── progress/
│ │ ├── README.md
│ │ ├── _progress.scss
│ │ ├── progress.js
│ │ └── snippets/
│ │ ├── progress-buffering-demo.html
│ │ ├── progress-buffering.html
│ │ ├── progress-default-demo.html
│ │ ├── progress-default.html
│ │ ├── progress-indeterminate-demo.html
│ │ └── progress-indeterminate.html
│ ├── radio/
│ │ ├── README.md
│ │ ├── _radio.scss
│ │ ├── radio.js
│ │ └── snippets/
│ │ ├── radio-off.html
│ │ └── radio-on.html
│ ├── resets/
│ │ ├── _h5bp.scss
│ │ ├── _mobile.scss
│ │ └── _resets.scss
│ ├── ripple/
│ │ ├── _ripple.scss
│ │ └── ripple.js
│ ├── shadow/
│ │ ├── README.md
│ │ ├── _shadow.scss
│ │ ├── demo.css
│ │ └── demo.html
│ ├── slider/
│ │ ├── README.md
│ │ ├── _slider.scss
│ │ ├── slider.js
│ │ └── snippets/
│ │ ├── demo.html
│ │ ├── slider-default-demo.html
│ │ ├── slider-default.html
│ │ ├── slider-starting-value-demo.html
│ │ └── slider-starting-value.html
│ ├── snackbar/
│ │ ├── README.md
│ │ ├── _snackbar.scss
│ │ ├── snackbar.js
│ │ └── snippets/
│ │ ├── snackbar.html
│ │ └── toast.html
│ ├── spinner/
│ │ ├── README.md
│ │ ├── _spinner.scss
│ │ ├── snippets/
│ │ │ ├── spinner-default.html
│ │ │ └── spinner-single-color.html
│ │ └── spinner.js
│ ├── styleguide.scss
│ ├── switch/
│ │ ├── README.md
│ │ ├── _switch.scss
│ │ ├── snippets/
│ │ │ ├── switch-off.html
│ │ │ └── switch-on.html
│ │ └── switch.js
│ ├── tabs/
│ │ ├── README.md
│ │ ├── _tabs.scss
│ │ ├── snippets/
│ │ │ └── tabs.html
│ │ └── tabs.js
│ ├── template.scss
│ ├── textfield/
│ │ ├── README.md
│ │ ├── _textfield.scss
│ │ ├── snippets/
│ │ │ ├── textfield-expanding-demo.html
│ │ │ ├── textfield-expanding.html
│ │ │ ├── textfield-floating-numeric-demo.html
│ │ │ ├── textfield-floating-numeric.html
│ │ │ ├── textfield-floating-text-demo.html
│ │ │ ├── textfield-floating-text.html
│ │ │ ├── textfield-multi-line-demo.html
│ │ │ ├── textfield-multi-line.html
│ │ │ ├── textfield-numeric-demo.html
│ │ │ ├── textfield-numeric.html
│ │ │ ├── textfield-text-demo.html
│ │ │ └── textfield-text.html
│ │ └── textfield.js
│ ├── third_party/
│ │ └── rAF.js
│ ├── tooltip/
│ │ ├── README.md
│ │ ├── _tooltip.scss
│ │ ├── snippets/
│ │ │ ├── tooltip-large.html
│ │ │ ├── tooltip-multiline.html
│ │ │ ├── tooltip-rich.html
│ │ │ └── tooltip-simple.html
│ │ └── tooltip.js
│ └── typography/
│ ├── README.md
│ ├── _typography.scss
│ ├── demo.css
│ └── demo.html
├── templates/
│ ├── android-dot-com/
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── material.scss
│ │ └── styles.css
│ ├── article/
│ │ ├── index.html
│ │ └── styles.css
│ ├── blog/
│ │ ├── entry.html
│ │ ├── index.html
│ │ └── styles.css
│ ├── dashboard/
│ │ ├── index.html
│ │ └── styles.css
│ ├── portfolio/
│ │ ├── Tutorial/
│ │ │ ├── step01-initial-HTML-setup.html
│ │ │ ├── step02-MDL-layout-component.html
│ │ │ ├── step03-the-grid-component.html
│ │ │ ├── step04-customising-the-layout.html
│ │ │ ├── step05-individual-pages/
│ │ │ │ ├── about.html
│ │ │ │ ├── blog.html
│ │ │ │ ├── contact.html
│ │ │ │ ├── index.html
│ │ │ │ └── portfolio-example01.html
│ │ │ └── styles.css
│ │ ├── about.html
│ │ ├── blog.html
│ │ ├── contact.html
│ │ ├── index.html
│ │ ├── portfolio-example01.html
│ │ └── styles.css
│ └── text-only/
│ ├── index.html
│ └── styles.css
├── test/
│ ├── index.html
│ ├── memory/
│ │ ├── blank.html
│ │ ├── menu.js
│ │ ├── snackbar.js
│ │ ├── test.js
│ │ ├── upgrade-downgrade.js
│ │ └── utils.js
│ ├── unit/
│ │ ├── button.js
│ │ ├── checkbox.js
│ │ ├── componentHandler.js
│ │ ├── data-table.js
│ │ ├── icon-toggle.js
│ │ ├── layout.js
│ │ ├── menu.js
│ │ ├── progress.js
│ │ ├── radio.js
│ │ ├── ripple.js
│ │ ├── slider.js
│ │ ├── snackbar.js
│ │ ├── spinner.js
│ │ ├── switch.js
│ │ ├── tabs.js
│ │ ├── textfield.js
│ │ └── tooltip.js
│ └── visual/
│ ├── index.html
│ ├── style.css
│ └── welcome.html
└── utils/
└── uniffe.js
SYMBOL INDEX (39 symbols across 18 files)
FILE: docs/_assets/codepen.js
function CodeBlockCodePen (line 17) | function CodeBlockCodePen() {
FILE: docs/_assets/components.js
function MaterialComponentsNav (line 17) | function MaterialComponentsNav() {
FILE: docs/_assets/customizer.js
function init (line 20) | function init() {
function parentWrapper (line 170) | function parentWrapper(p) {
FILE: docs/_assets/main.js
function updateScrollIndicator (line 28) | function updateScrollIndicator() {
function scrollMenuBar (line 42) | function scrollMenuBar(delta) {
FILE: docs/_assets/snippets.js
function MaterialComponentsSnippets (line 17) | function MaterialComponentsSnippets() {
FILE: gulpfile.babel.js
constant AUTOPREFIXER_BROWSERS (line 58) | const AUTOPREFIXER_BROWSERS = [
constant SOURCES (line 70) | const SOURCES = [
function applyTemplate (line 335) | function applyTemplate() {
function getComponentFolders (line 401) | function getComponentFolders() {
function watch (line 493) | function watch() {
function getSubDirectories (line 550) | function getSubDirectories(dir) {
function mdlPublish (line 634) | function mdlPublish(pubScope) {
FILE: src/animation/demo.js
function DemoAnimation (line 23) | function DemoAnimation(element) {
FILE: src/layout/layout.js
function MaterialLayoutTab (line 547) | function MaterialLayoutTab(tab, tabs, panels, layout) {
FILE: src/mdlComponentHandler.js
function findRegisteredClass_ (line 104) | function findRegisteredClass_(name, optReplace) {
function getUpgradedListOfElement_ (line 123) | function getUpgradedListOfElement_(element) {
function isElementUpgraded_ (line 138) | function isElementUpgraded_(element, jsClass) {
function createEvent_ (line 151) | function createEvent_(eventType, bubbles, cancelable) {
function upgradeDomInternal (line 173) | function upgradeDomInternal(optJsClass, optCssClass) {
function upgradeElementInternal (line 203) | function upgradeElementInternal(element, optJsClass) {
function upgradeElementsInternal (line 268) | function upgradeElementsInternal(elements) {
function registerInternal (line 292) | function registerInternal(config) {
function registerUpgradedCallbackInternal (line 346) | function registerUpgradedCallbackInternal(jsClass, callback) {
function upgradeAllRegisteredInternal (line 357) | function upgradeAllRegisteredInternal() {
function deconstructComponentInternal (line 370) | function deconstructComponentInternal(component) {
function downgradeNodesInternal (line 390) | function downgradeNodesInternal(nodes) {
FILE: src/tabs/tabs.js
function MaterialTab (line 147) | function MaterialTab(tab, ctx) {
FILE: test/unit/checkbox.js
function createCheckbox (line 19) | function createCheckbox() {
FILE: test/unit/componentHandler.js
function createNestedElementsForComponentHandlerTest (line 24) | function createNestedElementsForComponentHandlerTest() {
function createCheckbox (line 38) | function createCheckbox(){
FILE: test/unit/icon-toggle.js
function createToggle (line 19) | function createToggle() {
FILE: test/unit/radio.js
function createRadio (line 19) | function createRadio() {
function createRadioWithValues (line 23) | function createRadioWithValues(name, value) {
FILE: test/unit/snackbar.js
function createSnackbarMarkup (line 19) | function createSnackbarMarkup() {
FILE: test/unit/switch.js
function createSwitch (line 19) | function createSwitch() {
FILE: test/unit/textfield.js
function createSingleLineTextfield (line 19) | function createSingleLineTextfield() {
FILE: utils/uniffe.js
function uniffe (line 25) | function uniffe(contents) {
Condensed preview — 311 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,199K chars).
[
{
"path": ".drone.sec",
"chars": 3630,
"preview": "eyJhbGciOiJSU0EtT0FFUCIsImVuYyI6IkExMjhHQ00ifQ.j9veXnMfiC38KqZqVlEv-j3kQ4P8M9bmPYrCb3gkGhYNxJAs43Hzj30_rFiPJvW_JFjX2yGIV"
},
{
"path": ".drone.yml",
"chars": 1262,
"preview": "# Note: if you modify this file, don't forget to update\n# checksum in .drone.sec with:\n# drone secure --repo google/mate"
},
{
"path": ".editorconfig",
"chars": 207,
"preview": "# editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_"
},
{
"path": ".gitattributes",
"chars": 12,
"preview": "* text=auto\n"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 1984,
"preview": "** PLEASE READ THIS BEFORE FILING AN ISSUE **\n\n## Feature Requests / Breaking Changes in mdl-1.x\n\nThe MDL core team has "
},
{
"path": ".gitignore",
"chars": 78,
"preview": "node_modules\n.tmp\ngulp-cache\n.DS_Store\ndocs/out\n.publish\n/dist\n.drone.sec.yml\n"
},
{
"path": ".jscsrc",
"chars": 576,
"preview": "{\n \"preset\": \"google\",\n \"disallowSpacesInAnonymousFunctionExpression\": null,\n \"validateLineBreaks\": \"LF\",\n \"validate"
},
{
"path": ".jshintrc",
"chars": 281,
"preview": "{\n \"node\": true,\n \"browser\": true,\n \"esnext\": true,\n \"bitwise\": true,\n \"curly\": true,\n \"eqeqeq\": true,\n \"immed\": "
},
{
"path": "CONTRIBUTING.md",
"chars": 9569,
"preview": "\n# Contributing to Material Design Lite\n\nWe'd love for you to contribute to our source code and to make Material Design "
},
{
"path": "LICENSE",
"chars": 11857,
"preview": "\n Apache License\n Version 2.0, January 2004\n "
},
{
"path": "README.md",
"chars": 4006,
"preview": "# Material Design Lite\n\n[](https://badge.fu"
},
{
"path": "bower.json",
"chars": 555,
"preview": "{\n \"name\": \"material-design-lite\",\n \"version\": \"1.3.0\",\n \"homepage\": \"https://github.com/google/material-design-lite\""
},
{
"path": "docs/_assets/codepen.js",
"chars": 4736,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "docs/_assets/components.css",
"chars": 4776,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "docs/_assets/components.js",
"chars": 4932,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "docs/_assets/customizer.css",
"chars": 2842,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "docs/_assets/customizer.js",
"chars": 20271,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "docs/_assets/ie.css",
"chars": 1078,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "docs/_assets/index.js",
"chars": 857,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "docs/_assets/main.css",
"chars": 30244,
"preview": "html > body {\n font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;\n background-color: #FAFAFA;\n}\n.docs"
},
{
"path": "docs/_assets/main.js",
"chars": 2469,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "docs/_assets/snippets.js",
"chars": 3446,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "docs/_pages/components.md",
"chars": 13335,
"preview": "---\nlayout: components\ntitle: Components\nbodyclass: components\ninclude_prefix: ../\ncategories:\n - name: badges\n titl"
},
{
"path": "docs/_pages/customize.md",
"chars": 99,
"preview": "---\nlayout: customize\ntitle: Customize & Download\nbodyclass: customize\ninclude_prefix: ../\n---\n"
},
{
"path": "docs/_pages/faq.md",
"chars": 15828,
"preview": "---\nlayout: styles\ntitle: FAQ\nbodyclass: faq\ninclude_prefix: ../\n---\n\n<div class=\"docs-text-styling\">\n <section class=\""
},
{
"path": "docs/_pages/index.md",
"chars": 2510,
"preview": "---\nlayout: layout\nbodyclass: about\ninclude_prefix: ./\n---\n<!-- TODO: Try to separate markup and content -->\n<section cl"
},
{
"path": "docs/_pages/showcase.md",
"chars": 2160,
"preview": "---\nlayout: showcase\ntitle: 'Showcase: sites using MDL'\nbodyclass: showcase\ninclude_prefix: ../\nsites:\n - name: wallet\n"
},
{
"path": "docs/_pages/started.md",
"chars": 265,
"preview": "---\nlayout: started\ntitle: Getting started\nbodyclass: started\ninclude_prefix: ../\nsnippets:\n - component_name: button\n "
},
{
"path": "docs/_pages/styles.md",
"chars": 11291,
"preview": "---\nlayout: styles\ntitle: Styles\nbodyclass: styles\ninclude_prefix: ../\n---\n\n <div class=\"styles__content\">\n <p>\n "
},
{
"path": "docs/_pages/templates.md",
"chars": 1678,
"preview": "---\nlayout: templates\ntitle: Templates\nbodyclass: templates\ninclude_prefix: ../\ntemplates:\n - name: blog\n title: Blo"
},
{
"path": "docs/_templates/component.html",
"chars": 54,
"preview": "\n{% block content %}\n\n{{content|safe}}\n{% endblock %}\n"
},
{
"path": "docs/_templates/components.html",
"chars": 4483,
"preview": "{% extends 'layout.html' %}\n\n{% block content %}\n<link href=\"{{page.include_prefix}}assets/components.css\" rel=\"styleshe"
},
{
"path": "docs/_templates/customize.html",
"chars": 4795,
"preview": "{% extends 'layout.html' %}\n\n{% block content %}\n<link rel=\"stylesheet\" href=\"{{page.include_prefix}}assets/customizer.c"
},
{
"path": "docs/_templates/demo.html",
"chars": 1506,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE="
},
{
"path": "docs/_templates/layout.html",
"chars": 8997,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE="
},
{
"path": "docs/_templates/page.html",
"chars": 83,
"preview": "{% extends 'layout.html' %}\n\n{% block content %}\n\n{{content|safe}}\n\n{% endblock %}\n"
},
{
"path": "docs/_templates/showcase.html",
"chars": 1465,
"preview": "{% extends 'layout.html' %}\n{% block content %}\n{{content|safe}}\n{% for template in page.sites %}\n<section class=\"templa"
},
{
"path": "docs/_templates/snippets.html",
"chars": 2112,
"preview": "{% if snippet_group.length === 1 && snippet_group[0].full_width %}\n<div class=\"snippet-group is-full-width\">\n{% else %}\n"
},
{
"path": "docs/_templates/started.html",
"chars": 15537,
"preview": "{% extends 'layout.html' %}\n\n{% block content %}\n<script src=\"{{page.include_prefix}}assets/snippets.js\"></script>\n\n<div"
},
{
"path": "docs/_templates/styles.html",
"chars": 162,
"preview": "{% extends 'layout.html' %}\n\n{% block content %}\n\n<div class=\"docs-text-styling\">\n <section id=\"include\">\n {{content|s"
},
{
"path": "docs/_templates/templates.html",
"chars": 1528,
"preview": "{% extends 'layout.html' %}\n{% block content %}\n{% for template in page.templates %}\n<section class=\"template template--"
},
{
"path": "gulpfile.babel.js",
"chars": 23713,
"preview": "/**\n *\n * Material Design Lite\n * Copyright 2015 Google Inc. All rights reserved.\n *\n * Licensed under the Apache Lic"
},
{
"path": "package.json",
"chars": 2115,
"preview": "{\n \"name\": \"material-design-lite\",\n \"version\": \"1.3.0\",\n \"description\": \"Material Design Components in CSS, JS and HT"
},
{
"path": "src/INTRODUCTION.md",
"chars": 4259,
"preview": "# Material Design Lite\n\n## Introduction\n**Material Design Light (MDL)** is a library of components for web developers ba"
},
{
"path": "src/_color-definitions.scss",
"chars": 16665,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/_functions.scss",
"chars": 693,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/_mixins.scss",
"chars": 7607,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/_variables.scss",
"chars": 21056,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/animation/_animation.scss",
"chars": 1046,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/animation/demo.css",
"chars": 2206,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/animation/demo.html",
"chars": 384,
"preview": " <div class=\"demo-preview-block demo-animation demo-js-animation\">\n <div class=\"demo-animation__container\">\n "
},
{
"path": "src/animation/demo.js",
"chars": 3482,
"preview": "/**\n * @license\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 "
},
{
"path": "src/badge/README.md",
"chars": 3522,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **badge** component is an onscreen notification element. A badge consist"
},
{
"path": "src/badge/_badge.scss",
"chars": 1726,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/badge/snippets/badge-on-icon-icon-demo.html",
"chars": 215,
"preview": "<style>\n.demo-badge__badge-on-icon-icon .mdl-badge {\n color: rgba(0, 0, 0, 0.24);\n}\n.demo-badge__badge-on-icon-icon .md"
},
{
"path": "src/badge/snippets/badge-on-icon-icon.html",
"chars": 118,
"preview": "<!-- Icon badge on icon -->\n<div class=\"material-icons mdl-badge mdl-badge--overlap\" data-badge=\"♥\">account_box</div>\n"
},
{
"path": "src/badge/snippets/badge-on-icon-text-demo.html",
"chars": 215,
"preview": "<style>\n.demo-badge__badge-on-icon-text .mdl-badge {\n color: rgba(0, 0, 0, 0.24);\n}\n.demo-badge__badge-on-icon-text .md"
},
{
"path": "src/badge/snippets/badge-on-icon-text.html",
"chars": 120,
"preview": "<!-- Number badge on icon -->\n<div class=\"material-icons mdl-badge mdl-badge--overlap\" data-badge=\"1\">account_box</div>\n"
},
{
"path": "src/badge/snippets/badge-on-text-icon-demo.html",
"chars": 134,
"preview": "<style>\n.demo-badge__badge-on-text-icon .mdl-badge {\n color: rgba(0, 0, 0, 0.24);\n}\n</style>\n{% include \"badge-on-text-"
},
{
"path": "src/badge/snippets/badge-on-text-icon.html",
"chars": 71,
"preview": "<!-- Icon badge -->\n<span class=\"mdl-badge\" data-badge=\"♥\">Mood</span>\n"
},
{
"path": "src/badge/snippets/badge-on-text-text-demo.html",
"chars": 135,
"preview": "<style>\n.demo-badge__badge-on-text-text .mdl-badge {\n color: rgba(0, 0, 0, 0.24);\n}\n</style>\n\n{% include \"badge-on-text"
},
{
"path": "src/badge/snippets/badge-on-text-text.html",
"chars": 74,
"preview": "<!-- Number badge -->\n<span class=\"mdl-badge\" data-badge=\"4\">Inbox</span>\n"
},
{
"path": "src/button/README.md",
"chars": 3837,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **button** component is an enhanced version of the standard HTML `<butto"
},
{
"path": "src/button/_button.scss",
"chars": 7388,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/button/button.js",
"chars": 3613,
"preview": "/**\n * @license\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 "
},
{
"path": "src/button/snippets/fab-colored-ripple.html",
"chars": 185,
"preview": "<!-- Colored FAB button with ripple -->\n<button class=\"mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl"
},
{
"path": "src/button/snippets/fab-colored.html",
"chars": 152,
"preview": "<!-- Colored FAB button -->\n<button class=\"mdl-button mdl-js-button mdl-button--fab mdl-button--colored\">\n <i class=\"ma"
},
{
"path": "src/button/snippets/fab-disabled.html",
"chars": 142,
"preview": "<!-- Disabled FAB button -->\n<button class=\"mdl-button mdl-js-button mdl-button--fab\" disabled>\n <i class=\"material-ico"
},
{
"path": "src/button/snippets/fab-mini-colored.html",
"chars": 178,
"preview": "<!-- Colored mini FAB button -->\n<button class=\"mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button"
},
{
"path": "src/button/snippets/fab-mini.html",
"chars": 150,
"preview": "<!-- Mini FAB button -->\n<button class=\"mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab\">\n <i class=\"mate"
},
{
"path": "src/button/snippets/fab-ripple.html",
"chars": 157,
"preview": "<!-- FAB button with ripple -->\n<button class=\"mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect\">\n <i clas"
},
{
"path": "src/button/snippets/fab.html",
"chars": 124,
"preview": "<!-- FAB button -->\n<button class=\"mdl-button mdl-js-button mdl-button--fab\">\n <i class=\"material-icons\">add</i>\n</butt"
},
{
"path": "src/button/snippets/flat-accent.html",
"chars": 116,
"preview": "<!-- Accent-colored flat button -->\n<button class=\"mdl-button mdl-js-button mdl-button--accent\">\n Button\n</button>\n"
},
{
"path": "src/button/snippets/flat-disabled.html",
"chars": 100,
"preview": "<!-- Disabled flat button -->\n<button class=\"mdl-button mdl-js-button\" disabled>\n Button\n</button>\n"
},
{
"path": "src/button/snippets/flat-primary.html",
"chars": 118,
"preview": "<!-- Primary-colored flat button -->\n<button class=\"mdl-button mdl-js-button mdl-button--primary\">\n Button\n</button>\n"
},
{
"path": "src/button/snippets/flat-ripple.html",
"chars": 115,
"preview": "<!-- Flat button with ripple -->\n<button class=\"mdl-button mdl-js-button mdl-js-ripple-effect\">\n Button\n</button>\n"
},
{
"path": "src/button/snippets/flat.html",
"chars": 82,
"preview": "<!-- Flat button -->\n<button class=\"mdl-button mdl-js-button\">\n Button\n</button>\n"
},
{
"path": "src/button/snippets/icon-colored.html",
"chars": 155,
"preview": "<!-- Colored icon button -->\n<button class=\"mdl-button mdl-js-button mdl-button--icon mdl-button--colored\">\n <i class=\""
},
{
"path": "src/button/snippets/icon.html",
"chars": 127,
"preview": "<!-- Icon button -->\n<button class=\"mdl-button mdl-js-button mdl-button--icon\">\n <i class=\"material-icons\">mood</i>\n</b"
},
{
"path": "src/button/snippets/raised-accent.html",
"chars": 137,
"preview": "<!-- Accent-colored raised button -->\n<button class=\"mdl-button mdl-js-button mdl-button--raised mdl-button--accent\">\n "
},
{
"path": "src/button/snippets/raised-colored.html",
"chars": 131,
"preview": "<!-- Colored raised button -->\n<button class=\"mdl-button mdl-js-button mdl-button--raised mdl-button--colored\">\n Button"
},
{
"path": "src/button/snippets/raised-disabled.html",
"chars": 121,
"preview": "<!-- Raised disabled button -->\n<button class=\"mdl-button mdl-js-button mdl-button--raised\" disabled>\n Button\n</button>"
},
{
"path": "src/button/snippets/raised-ripple-accent.html",
"chars": 170,
"preview": "<!-- Accent-colored raised button with ripple -->\n<button class=\"mdl-button mdl-js-button mdl-button--raised mdl-js-ripp"
},
{
"path": "src/button/snippets/raised-ripple.html",
"chars": 136,
"preview": "<!-- Raised button with ripple -->\n<button class=\"mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect\">\n B"
},
{
"path": "src/button/snippets/raised.html",
"chars": 103,
"preview": "<!-- Raised button -->\n<button class=\"mdl-button mdl-js-button mdl-button--raised\">\n Button\n</button>\n"
},
{
"path": "src/card/README.md",
"chars": 5606,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **card** component is a user interface element representing a virtual pi"
},
{
"path": "src/card/_card.scss",
"chars": 2824,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/card/snippets/event.html",
"chars": 1130,
"preview": "<!-- Event card -->\n<style>\n.demo-card-event.mdl-card {\n width: 256px;\n height: 256px;\n background: #3E4EB8;\n}\n.demo-"
},
{
"path": "src/card/snippets/image.html",
"chars": 584,
"preview": "<!-- Image card -->\n<style>\n.demo-card-image.mdl-card {\n width: 256px;\n height: 256px;\n background: url('../assets/de"
},
{
"path": "src/card/snippets/square.html",
"chars": 717,
"preview": "<!-- Square card -->\n<style>\n.demo-card-square.mdl-card {\n width: 320px;\n height: 320px;\n}\n.demo-card-square > .mdl-ca"
},
{
"path": "src/card/snippets/wide.html",
"chars": 971,
"preview": "<!-- Wide card with share menu button -->\n<style>\n.demo-card-wide.mdl-card {\n width: 512px;\n}\n.demo-card-wide > .mdl-ca"
},
{
"path": "src/checkbox/README.md",
"chars": 3581,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **checkbox** component is an enhanced version of the standard HTML `<inp"
},
{
"path": "src/checkbox/_checkbox.scss",
"chars": 4060,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/checkbox/checkbox.js",
"chars": 7962,
"preview": "/**\n * @license\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 "
},
{
"path": "src/checkbox/snippets/check-off.html",
"chars": 214,
"preview": "<label class=\"mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect\" for=\"checkbox-2\">\n <input type=\"checkbox\" id=\"checkbox"
},
{
"path": "src/checkbox/snippets/check-on.html",
"chars": 222,
"preview": "<label class=\"mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect\" for=\"checkbox-1\">\n <input type=\"checkbox\" id=\"checkbox"
},
{
"path": "src/chip/README.md",
"chars": 2616,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **chip** component is a small, interactive element.\nChips are commonly u"
},
{
"path": "src/chip/_chip.scss",
"chars": 2166,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/chip/snippets/basic.html",
"chars": 102,
"preview": "<!-- Basic Chip -->\n<span class=\"mdl-chip\">\n <span class=\"mdl-chip__text\">Basic Chip</span>\n</span>"
},
{
"path": "src/chip/snippets/button.html",
"chars": 122,
"preview": "<!-- Button Chip -->\n<button type=\"button\" class=\"mdl-chip\">\n <span class=\"mdl-chip__text\">Button Chip</span>\n</butto"
},
{
"path": "src/chip/snippets/contact.html",
"chars": 208,
"preview": "<!-- Contact Chip -->\n<span class=\"mdl-chip mdl-chip--contact\">\n <span class=\"mdl-chip__contact mdl-color--teal mdl-c"
},
{
"path": "src/chip/snippets/deletable-contact.html",
"chars": 331,
"preview": "<!-- Deletable Contact Chip -->\n<span class=\"mdl-chip mdl-chip--contact mdl-chip--deletable\">\n <img class=\"mdl-chip__"
},
{
"path": "src/chip/snippets/deletable.html",
"chars": 227,
"preview": "<!-- Deletable Chip -->\n<span class=\"mdl-chip mdl-chip--deletable\">\n <span class=\"mdl-chip__text\">Deletable Chip</spa"
},
{
"path": "src/data-table/README.md",
"chars": 6309,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **data-table** component is an enhanced version of the standard HTML `<t"
},
{
"path": "src/data-table/_data-table.scss",
"chars": 2862,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/data-table/data-table.js",
"chars": 5984,
"preview": "/**\n * @license\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 "
},
{
"path": "src/data-table/snippets/data-table.html",
"chars": 685,
"preview": "<table class=\"mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp\">\n <thead>\n <tr>\n <th"
},
{
"path": "src/demos.css",
"chars": 918,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/dialog/README.md",
"chars": 4679,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **dialog** component allows for verification of\nuser actions, simple dat"
},
{
"path": "src/dialog/_dialog.scss",
"chars": 1613,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/expansion/README.md",
"chars": 2645,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **expansion** component provides a clean interface\nto show collapsable c"
},
{
"path": "src/expansion/_expansion.scss",
"chars": 2402,
"preview": "/**\n * Copyright 2016 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/expansion/snippets/expansion.html",
"chars": 1740,
"preview": "<details class=\"mdl-expansion\">\n <summary class=\"mdl-expansion__summary\">\n <span class=\"mdl-expansion__header\">Trip "
},
{
"path": "src/footer/README.md",
"chars": 13802,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **footer** component is a comprehensive container intended to present a "
},
{
"path": "src/footer/_mega_footer.scss",
"chars": 7257,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/footer/_mini_footer.scss",
"chars": 1762,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/footer/snippets/mega-footer.html",
"chars": 1997,
"preview": "<footer class=\"mdl-mega-footer\">\n <div class=\"mdl-mega-footer__middle-section\">\n\n <div class=\"mdl-mega-footer__drop-"
},
{
"path": "src/footer/snippets/mini-footer.html",
"chars": 277,
"preview": "<footer class=\"mdl-mini-footer\">\n <div class=\"mdl-mini-footer__left-section\">\n <div class=\"mdl-logo\">Title</div>\n "
},
{
"path": "src/grid/README.md",
"chars": 7075,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **grid** component is a simplified method for laying out content for mul"
},
{
"path": "src/grid/_grid.scss",
"chars": 5809,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/grid/snippets/codepen-grid.css",
"chars": 197,
"preview": ".mdl-cell {\n box-sizing: border-box;\n background-color: #BDBDBD;\n height: 200px;\n padding-left: 8px;\n padding-top: "
},
{
"path": "src/grid/snippets/grid-demo.html",
"chars": 263,
"preview": "<style>\n.demo-grid .mdl-cell {\n box-sizing: border-box;\n background-color: #BDBDBD;\n height: 200px;\n padding-left: 8"
},
{
"path": "src/grid/snippets/grid.html",
"chars": 1228,
"preview": "<div class=\"mdl-grid\">\n <div class=\"mdl-cell mdl-cell--1-col\">1</div>\n <div class=\"mdl-cell mdl-cell--1-col\">1</div>\n "
},
{
"path": "src/icon-toggle/README.md",
"chars": 3611,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **icon-toggle** component is an enhanced version of the standard HTML `<"
},
{
"path": "src/icon-toggle/_icon-toggle.scss",
"chars": 2801,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/icon-toggle/icon-toggle.js",
"chars": 7388,
"preview": "/**\n * @license\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 "
},
{
"path": "src/icon-toggle/snippets/icon-off.html",
"chars": 246,
"preview": "<label class=\"mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect\" for=\"icon-toggle-2\">\n <input type=\"checkbox\" id="
},
{
"path": "src/icon-toggle/snippets/icon-on.html",
"chars": 252,
"preview": "<label class=\"mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect\" for=\"icon-toggle-1\">\n <input type=\"checkbox\" id="
},
{
"path": "src/index.html",
"chars": 7100,
"preview": "<!doctype html>\n<html lang=\"\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=ed"
},
{
"path": "src/layout/README.md",
"chars": 15919,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **layout** component is a comprehensive approach to page layout that use"
},
{
"path": "src/layout/_layout.scss",
"chars": 16040,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/layout/layout.js",
"chars": 20572,
"preview": "/**\n * @license\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 "
},
{
"path": "src/layout/snippets/fixed-drawer-demo.html",
"chars": 377,
"preview": "<style>\n.demo-layout.demo-layout__fixed-drawer {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 3px 1px "
},
{
"path": "src/layout/snippets/fixed-drawer.html",
"chars": 622,
"preview": "<!-- No header, and the drawer stays open on larger screens (fixed drawer). -->\n<div class=\"mdl-layout mdl-js-layout mdl"
},
{
"path": "src/layout/snippets/fixed-header-demo.html",
"chars": 377,
"preview": "<style>\n.demo-layout.demo-layout__fixed-header {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 3px 1px "
},
{
"path": "src/layout/snippets/fixed-header-drawer-demo.html",
"chars": 397,
"preview": "<style>\n.demo-layout.demo-layout__fixed-header-drawer {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 3"
},
{
"path": "src/layout/snippets/fixed-header-drawer.html",
"chars": 1360,
"preview": "<!-- The drawer is always open in large screens. The header is always shown,\n even in small screens. -->\n<div class=\"md"
},
{
"path": "src/layout/snippets/fixed-header.html",
"chars": 1238,
"preview": "<!-- Always shows a header, even in smaller screens. -->\n<div class=\"mdl-layout mdl-js-layout mdl-layout--fixed-header\">"
},
{
"path": "src/layout/snippets/fixed-tabs-demo.html",
"chars": 371,
"preview": "<style>\n.demo-layout.demo-layout__fixed-tabs {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 3px 1px -2"
},
{
"path": "src/layout/snippets/fixed-tabs.html",
"chars": 1193,
"preview": "<!-- Simple header with fixed tabs. -->\n<div class=\"mdl-layout mdl-js-layout mdl-layout--fixed-header\n mdl-la"
},
{
"path": "src/layout/snippets/scrollable-tabs-demo.html",
"chars": 386,
"preview": "<style>\n.demo-layout.demo-layout__scrollable-tabs {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 3px 1"
},
{
"path": "src/layout/snippets/scrollable-tabs.html",
"chars": 1802,
"preview": "<!-- Simple header with scrollable tabs. -->\n<div class=\"mdl-layout mdl-js-layout mdl-layout--fixed-header\">\n <header c"
},
{
"path": "src/layout/snippets/scrolling-header-demo.html",
"chars": 399,
"preview": "<style>\n.demo-layout.demo-layout__scrolling-header {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 3px "
},
{
"path": "src/layout/snippets/scrolling-header.html",
"chars": 1214,
"preview": "<!-- Uses a header that scrolls with the text, rather than staying\n locked at the top -->\n<div class=\"mdl-layout mdl-js"
},
{
"path": "src/layout/snippets/transparent-demo.html",
"chars": 290,
"preview": "<style>\n.demo-layout.demo-layout__transparent {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 3px 1px -"
},
{
"path": "src/layout/snippets/transparent.html",
"chars": 1512,
"preview": "<!-- Uses a transparent header that draws on top of the layout's background -->\n<style>\n.demo-layout-transparent {\n bac"
},
{
"path": "src/layout/snippets/waterfall-header-demo.html",
"chars": 399,
"preview": "<style>\n.demo-layout.demo-layout__waterfall-header {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 3px "
},
{
"path": "src/layout/snippets/waterfall-header.html",
"chars": 1966,
"preview": "<!-- Uses a header that contracts as the page scrolls down. -->\n<style>\n.demo-layout-waterfall .mdl-layout__header-row ."
},
{
"path": "src/list/README.md",
"chars": 2550,
"preview": "## Introduction\nLists present multiple line items vertically as a single continuous element. Refer the [Material Design\n"
},
{
"path": "src/list/_list.scss",
"chars": 4060,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/list/snippets/action.html",
"chars": 1092,
"preview": "<!-- List items with avatar and action -->\n<style>\n.demo-list-action {\n width: 300px;\n}\n</style>\n\n<div class=\"demo-list"
},
{
"path": "src/list/snippets/icon.html",
"chars": 642,
"preview": "<!-- Icon List -->\n<style>\n.demo-list-icon {\n width: 300px;\n}\n</style>\n\n<ul class=\"demo-list-icon mdl-list\">\n <li clas"
},
{
"path": "src/list/snippets/list-control.html",
"chars": 1543,
"preview": "<!-- List with avatar and controls -->\n<style>\n.demo-list-control {\n width: 300px;\n}\n\n.demo-list-radio {\n display: inl"
},
{
"path": "src/list/snippets/list-item.html",
"chars": 475,
"preview": "<!-- Simple list -->\n<style>\n.demo-list-item {\n width: 300px;\n}\n</style>\n\n<ul class=\"demo-list-item mdl-list\">\n <li cl"
},
{
"path": "src/list/snippets/three-line.html",
"chars": 1911,
"preview": "<!-- Three Line List with secondary info and action -->\n<style>\n.demo-list-three {\n width: 650px;\n}\n</style>\n\n<ul class"
},
{
"path": "src/list/snippets/two-line.html",
"chars": 1553,
"preview": "<!-- Two Line List with secondary info and action -->\n<style>\n.demo-list-two {\n width: 300px;\n}\n</style>\n\n<ul class=\"de"
},
{
"path": "src/material-design-lite-grid.scss",
"chars": 710,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/material-design-lite.scss",
"chars": 1547,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/mdlComponentHandler.js",
"chars": 17305,
"preview": "/**\n * @license\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 "
},
{
"path": "src/menu/README.md",
"chars": 6094,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **menu** component is a user interface element that allows users to sele"
},
{
"path": "src/menu/_menu.scss",
"chars": 3816,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/menu/menu.js",
"chars": 17543,
"preview": "/**\n * @license\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 "
},
{
"path": "src/menu/snippets/codepen-lower-buttons.css",
"chars": 46,
"preview": "#demo-menu-lower-left {\n margin-left: 40%;\n}\n"
},
{
"path": "src/menu/snippets/codepen-top-buttons.css",
"chars": 112,
"preview": "#demo-menu-top-left {\n margin-left: 40%;\n}\n\n#demo-menu-top-left,\n#demo-menu-top-right {\n margin-top: 250px;\n}\n"
},
{
"path": "src/menu/snippets/lower-left-demo.html",
"chars": 522,
"preview": "<style>\n .demo-menu.demo-menu__lower-left .container {\n position: relative;\n width: 200px;\n }\n .demo-menu.demo-"
},
{
"path": "src/menu/snippets/lower-left.html",
"chars": 542,
"preview": "<!-- Left aligned menu below button -->\n<button id=\"demo-menu-lower-left\"\n class=\"mdl-button mdl-js-button mdl-bu"
},
{
"path": "src/menu/snippets/lower-right-demo.html",
"chars": 727,
"preview": "<style>\n .demo-menu.demo-menu__lower-right .container {\n position: relative;\n width: 200px;\n }\n .demo-menu.demo"
},
{
"path": "src/menu/snippets/lower-right.html",
"chars": 511,
"preview": "<!-- Right aligned menu below button -->\n<button id=\"demo-menu-lower-right\"\n class=\"mdl-button mdl-js-button mdl-"
},
{
"path": "src/menu/snippets/top-left-demo.html",
"chars": 514,
"preview": "<style>\n .demo-menu.demo-menu__top-left .container {\n position: relative;\n width: 200px;\n }\n .demo-menu.demo-me"
},
{
"path": "src/menu/snippets/top-left.html",
"chars": 514,
"preview": "<!-- Left aligned menu on top of button -->\n<button id=\"demo-menu-top-left\"\n class=\"mdl-button mdl-js-button mdl"
},
{
"path": "src/menu/snippets/top-right-demo.html",
"chars": 717,
"preview": "<style>\n .demo-menu.demo-menu__top-right .container {\n position: relative;\n width: 200px;\n }\n .demo-menu.demo-m"
},
{
"path": "src/menu/snippets/top-right.html",
"chars": 518,
"preview": "<!-- Right aligned menu on top of button -->\n<button id=\"demo-menu-top-right\"\n class=\"mdl-button mdl-js-button m"
},
{
"path": "src/palette/_palette.scss",
"chars": 58263,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/palette/demo.css",
"chars": 1240,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/palette/demo.html",
"chars": 26320,
"preview": " <div class=\"demo-preview-block demo-page--palette\">\n <div class=\"demo-palette\">\n <div class=\"demo-palett"
},
{
"path": "src/progress/README.md",
"chars": 2247,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **progress** component is a visual indicator of background activity in a"
},
{
"path": "src/progress/_progress.scss",
"chars": 3037,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/progress/progress.js",
"chars": 3493,
"preview": "/**\n * @license\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 "
},
{
"path": "src/progress/snippets/progress-buffering-demo.html",
"chars": 154,
"preview": "<style>\n .demo-progress__progress-buffering .mdl-progress {\n width: 50vw;\n max-width: 260px;\n }\n</style>\n\n{% inc"
},
{
"path": "src/progress/snippets/progress-buffering.html",
"chars": 294,
"preview": "<!-- MDL Progress Bar with Buffering -->\n<div id=\"p3\" class=\"mdl-progress mdl-js-progress\"></div>\n<script>\n document.qu"
},
{
"path": "src/progress/snippets/progress-default-demo.html",
"chars": 149,
"preview": "<style>\n .demo-progress__progress-default .mdl-progress {\n width: 50vw;\n max-width: 260px;\n }\n</style>\n{% includ"
},
{
"path": "src/progress/snippets/progress-default.html",
"chars": 245,
"preview": "<!-- Simple MDL Progress Bar -->\n<div id=\"p1\" class=\"mdl-progress mdl-js-progress\"></div>\n<script>\n document.querySelec"
},
{
"path": "src/progress/snippets/progress-indeterminate-demo.html",
"chars": 161,
"preview": "<style>\n .demo-progress__progress-indeterminate .mdl-progress {\n width: 50vw;\n max-width: 260px;\n }\n</style>\n{% "
},
{
"path": "src/progress/snippets/progress-indeterminate.html",
"chars": 139,
"preview": "<!-- MDL Progress Bar with Indeterminate Progress -->\n<div id=\"p2\" class=\"mdl-progress mdl-js-progress mdl-progress__ind"
},
{
"path": "src/radio/README.md",
"chars": 4875,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **radio** component is an enhanced version of the standard HTML `<input "
},
{
"path": "src/radio/_radio.scss",
"chars": 3464,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/radio/radio.js",
"chars": 8115,
"preview": "/**\n * @license\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 "
},
{
"path": "src/radio/snippets/radio-off.html",
"chars": 219,
"preview": "<label class=\"mdl-radio mdl-js-radio mdl-js-ripple-effect\" for=\"option-2\">\n <input type=\"radio\" id=\"option-2\" class=\"md"
},
{
"path": "src/radio/snippets/radio-on.html",
"chars": 226,
"preview": "<label class=\"mdl-radio mdl-js-radio mdl-js-ripple-effect\" for=\"option-1\">\n <input type=\"radio\" id=\"option-1\" class=\"md"
},
{
"path": "src/resets/_h5bp.scss",
"chars": 6138,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/resets/_mobile.scss",
"chars": 974,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/resets/_resets.scss",
"chars": 1349,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/ripple/_ripple.scss",
"chars": 1273,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/ripple/ripple.js",
"chars": 8496,
"preview": "/**\n * @license\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 "
},
{
"path": "src/shadow/README.md",
"chars": 2511,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **shadow** is not a component in the same sense as an MDL card, menu, or"
},
{
"path": "src/shadow/_shadow.scss",
"chars": 997,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/shadow/demo.css",
"chars": 1112,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "src/shadow/demo.html",
"chars": 424,
"preview": " <div class=\"demo-preview-block demo-page--shadow\">\n <div class=\"demo-shadow-card mdl-shadow--2dp\">2dp</div>\n <di"
},
{
"path": "src/slider/README.md",
"chars": 3445,
"preview": "## Introduction\n\nThe Material Design Lite (MDL) **slider** component is an enhanced version of the new HTML5 `<input typ"
},
{
"path": "src/slider/_slider.scss",
"chars": 10354,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
}
]
// ... and 111 more files (download for full content)
About this extraction
This page contains the full source code of the google/material-design-lite GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 311 files (1.1 MB), approximately 298.1k tokens, and a symbol index with 39 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.