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

Updated mini footer to have proper naming in addition to old non-BEM naming. (Closes #993)

master
Jonathan Garbee 2015-07-12 17:17:41 -04:00 committed by Addy Osmani
parent ad403aa13c
commit 92e06bfca6
2 changed files with 108 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
src/footer/README.md
View File

@ -27,13 +27,13 @@ To use any MDL component, you must include the minified CSS and JavaScript files
 1b. Add the appropriate MDL classes to the footer and divs using the `class` attribute.
```html
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">
<div class="mdl-mega-footer__top-section">
...
</div>
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer__middle-section">
...
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-mega-footer__bottom-section">
...
</div>
</footer>
@ -41,7 +41,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;2a. Inside the top section div, code two sibling "inner" divs for the *left* and *right* content sections.
```html
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">
<div class="mdl-mega-footer__top-section">
<div>
...
</div>
@ -49,10 +49,10 @@ To use any MDL component, you must include the minified CSS and JavaScript files
...
</div>
</div>
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer__middle-section">
...
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-mega-footer__bottom-section">
...
</div>
</footer>
@ -60,18 +60,18 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;2b. Add the appropriate MDL classes to the two "inner" left and right divs using the `class` attribute.
```html
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">
<div class="mdl-mega-footer--left-section">
<div class="mdl-mega-footer__top-section">
<div class="mdl-mega-footer__left-section">
...
</div>
<div class="mdl-mega-footer--right-section">
<div class="mdl-mega-footer__right-section">
...
</div>
</div>
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer__middle-section">
...
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-mega-footer__bottom-section">
...
</div>
</footer>
@ -79,15 +79,15 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;3a. Inside the middle section div, code one or more sibling "inner" divs for the *drop-down* content sections. That is, for two drop-down sections, you would code two divs.
```html
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">
<div class="mdl-mega-footer--left-section">
<div class="mdl-mega-footer__top-section">
<div class="mdl-mega-footer__left-section">
...
</div>
<div class="mdl-mega-footer--right-section">
<div class="mdl-mega-footer__right-section">
...
</div>
</div>
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer__middle-section">
<div>
...
</div>
@ -95,7 +95,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
...
</div>
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-mega-footer__bottom-section">
...
</div>
</footer>
@ -103,23 +103,23 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;3b. Add the appropriate MDL classes to the two "inner" drop-down divs using the `class` attribute.
```html
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">
<div class="mdl-mega-footer--left-section">
<div class="mdl-mega-footer__top-section">
<div class="mdl-mega-footer__left-section">
...
</div>
<div class="mdl-mega-footer--right-section">
<div class="mdl-mega-footer__right-section">
...
</div>
</div>
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer--drop-down-section">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
...
</div>
<div class="mdl-mega-footer--drop-down-section">
<div class="mdl-mega-footer__drop-down-section">
...
</div>
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-mega-footer__bottom-section">
...
</div>
</footer>
@ -127,23 +127,23 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;4a. Inside the bottom section div, code an "inner" div for the section heading and a sibling unordered list for the bottom section links.
```html
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">
<div class="mdl-mega-footer--left-section">
<div class="mdl-mega-footer__top-section">
<div class="mdl-mega-footer__left-section">
...
</div>
<div class="mdl-mega-footer--right-section">
<div class="mdl-mega-footer__right-section">
...
</div>
</div>
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer--drop-down-section">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
...
</div>
<div class="mdl-mega-footer--drop-down-section">
<div class="mdl-mega-footer__drop-down-section">
...
</div>
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-mega-footer__bottom-section">
<div>
...
</div>
@ -156,26 +156,26 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;4b. Add the appropriate MDL classes to the "inner" div heading and list using the `class` attribute.
```html
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">
<div class="mdl-mega-footer--left-section">
<div class="mdl-mega-footer__top-section">
<div class="mdl-mega-footer__left-section">
...
</div>
<div class="mdl-mega-footer--right-section">
<div class="mdl-mega-footer__right-section">
...
</div>
</div>
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer--drop-down-section">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
...
</div>
<div class="mdl-mega-footer--drop-down-section">
<div class="mdl-mega-footer__drop-down-section">
...
</div>
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-mega-footer__bottom-section">
<div class="mdl-logo">
</div>
<ul class="mdl-mega-footer--link-list">
<ul class="mdl-mega-footer__link-list">
...
</ul>
</div>
@ -184,42 +184,42 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;5. Add content to the top (left and right), middle (drop-downs), and bottom (text and links) sections of the footer; include any appropriate MDL classes using the `class` attribute.
```html
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">
<div class="mdl-mega-footer--left-section">
<button class="mdl-mega-footer--social-btn"></button>
<button class="mdl-mega-footer--social-btn"></button>
<button class="mdl-mega-footer--social-btn"></button>
<div class="mdl-mega-footer__top-section">
<div class="mdl-mega-footer__left-section">
<button class="mdl-mega-footer__social-btn"></button>
<button class="mdl-mega-footer__social-btn"></button>
<button class="mdl-mega-footer__social-btn"></button>
</div>
<div class="mdl-mega-footer--right-section">
<div class="mdl-mega-footer__right-section">
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
</div>
</div>
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer--drop-down-section">
<h1 class="mdl-mega-footer--heading">Drop-down 1 Heading</h1>
<ul class="mdl-mega-footer--link-list">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
<h1 class="mdl-mega-footer__heading">Drop-down 1 Heading</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="">Link A</a></li>
<li><a href="">Link B</a></li>
<li><a href="">Link C</a></li>
<li><a href="">Link D</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<h1 class="mdl-mega-footer--heading">Drop-down 2 Heading</h1>
<ul class="mdl-mega-footer--link-list">
<div class="mdl-mega-footer__drop-down-section">
<h1 class="mdl-mega-footer__heading">Drop-down 2 Heading</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="">Link A</a></li>
<li><a href="">Link B</a></li>
<li><a href="">Link C</a></li>
</ul>
</div>
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-mega-footer__bottom-section">
<div class="mdl-logo">
Mega-Footer Bottom Section Heading
</div>
<ul class="mdl-mega-footer--link-list">
<ul class="mdl-mega-footer__link-list">
<li><a href="">Link A</a></li>
<li><a href="">Link B</a></li>
</ul>
@ -234,22 +234,22 @@ The mega-footer component is ready for use.
A mega-footer component with three sections and two drop-down sections in the middle section.
```html
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">
<div class="mdl-mega-footer--left-section">
<button class="mdl-mega-footer--social-btn"></button>
<button class="mdl-mega-footer--social-btn"></button>
<button class="mdl-mega-footer--social-btn"></button>
<div class="mdl-mega-footer__top-section">
<div class="mdl-mega-footer__left-section">
<button class="mdl-mega-footer__social-btn"></button>
<button class="mdl-mega-footer__social-btn"></button>
<button class="mdl-mega-footer__social-btn"></button>
</div>
<div class="mdl-mega-footer--right-section">
<div class="mdl-mega-footer__right-section">
<a href="#">Introduction</a>
<a href="#">App Status Dashboard</a>
<a href="#">Terms of Service</a>
</div>
</div>
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer--drop-down-section">
<h1 class="mdl-mega-footer--heading">Learning and Support</h1>
<ul class="mdl-mega-footer--link-list">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
<h1 class="mdl-mega-footer__heading">Learning and Support</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Resource Center</a></li>
<li><a href="#">Help Center</a></li>
<li><a href="#">Community</a></li>
@ -258,9 +258,9 @@ A mega-footer component with three sections and two drop-down sections in the mi
<li><a href="#">Think Insights</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<h1 class="mdl-mega-footer--heading">Just for Developers</h1>
<ul class="mdl-mega-footer--link-list">
<div class="mdl-mega-footer__drop-down-section">
<h1 class="mdl-mega-footer__heading">Just for Developers</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Google Developers</a></li>
<li><a href="#">AdWords API</a></li>
<li><a href="#">AdWords Scipts</a></li>
@ -268,11 +268,11 @@ A mega-footer component with three sections and two drop-down sections in the mi
</ul>
</div>
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-mega-footer__bottom-section">
<div class="mdl-logo">
More Information
</div>
<ul class="mdl-mega-footer--link-list">
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy and Terms</a></li>
</ul>
@ -296,10 +296,10 @@ A mega-footer component with three sections and two drop-down sections in the mi
&nbsp;1b. Add the appropriate MDL classes to the footer and divs using the `class` attribute.
```html
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<div class="mdl-mini-footer__left-section">
...
</div>
<div class="mdl-mini-footer--right-section">
<div class="mdl-mini-footer__right-section">
...
</div>
</footer>
@ -307,7 +307,7 @@ A mega-footer component with three sections and two drop-down sections in the mi
&nbsp;2a. Inside the left section div, code an "inner" div for the section heading and a sibling unordered list for the left section links.
```html
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<div class="mdl-mini-footer__left-section">
<div>
...
</div>
@ -315,7 +315,7 @@ A mega-footer component with three sections and two drop-down sections in the mi
...
</ul>
</div>
<div class="mdl-mini-footer--right-section">
<div class="mdl-mini-footer__right-section">
...
</div>
</footer>
@ -323,15 +323,15 @@ A mega-footer component with three sections and two drop-down sections in the mi
&nbsp;2b. Add the appropriate MDL classes to the "inner" div and list using the `class` attribute.
```html
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">
...
</div>
<ul class="mdl-mini-footer--link-list">
<ul class="mdl-mini-footer__link-list">
...
</ul>
</div>
<div class="mdl-mini-footer--right-section">
<div class="mdl-mini-footer__right-section">
...
</div>
</footer>
@ -339,20 +339,20 @@ A mega-footer component with three sections and two drop-down sections in the mi
&nbsp;3. Add content to the left (text and links) and right (text or decoration) sections of the footer; include any appropriate MDL classes using the `class` attribute.
```html
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">
Mini-footer Heading
</div>
<ul class="mdl-mini-footer--link-list">
<ul class="mdl-mini-footer__link-list">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</div>
<div class="mdl-mini-footer--right-section">
<button class="mdl-mini-footer--social-btn"></button>
<button class="mdl-mini-footer--social-btn"></button>
<button class="mdl-mini-footer--social-btn"></button>
<div class="mdl-mini-footer__right-section">
<button class="mdl-mini-footer__social-btn"></button>
<button class="mdl-mini-footer__social-btn"></button>
<button class="mdl-mini-footer__social-btn"></button>
</div>
</footer>
```
@ -365,20 +365,20 @@ A mini-footer with left and right sections.
```html
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">
More Information
</div>
<ul class="mdl-mini-footer--link-list">
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy and Terms</a></li>
<li><a href="#">User Agreement</a></li>
</ul>
</div>
<div class="mdl-mini-footer--right-section">
<button class="mdl-mini-footer--social-btn"></button>
<button class="mdl-mini-footer--social-btn"></button>
<button class="mdl-mini-footer--social-btn"></button>
<div class="mdl-mini-footer__right-section">
<button class="mdl-mini-footer__social-btn"></button>
<button class="mdl-mini-footer__social-btn"></button>
<button class="mdl-mini-footer__social-btn"></button>
</div>
</footer>
```
@ -389,18 +389,18 @@ The MDL CSS classes apply various predefined visual enhancements to the footer.
| MDL class | Effect | Remarks |
|-----------|--------|---------|
| `mdl-mega-footer` | Defines container as an MDL mega-footer component | Required on footer element |
| `mdl-mega-footer--top-section` | Defines container as a footer top section | Required on top section "outer" div element |
| `mdl-mega-footer--left-section` | Defines container as a left section | Required on left section "inner" div element |
| `mdl-mega-footer--social-btn` | Defines a decorative square within mega-footer | Required on button element (if used) |
| `mdl-mega-footer--right-section` | Defines container as a right section | Required on right section "inner" div element |
| `mdl-mega-footer--middle-section` | Defines container as a footer middle section | Required on middle section "outer" div element |
| `mdl-mega-footer--drop-down-section` | Defines container as a drop-down (vertical) content area | Required on drop-down "inner" div elements |
| `mdl-mega-footer--heading` | Defines a heading as a mega-footer heading | Required on h1 element inside drop-down section |
| `mdl-mega-footer--link-list` | Defines an unordered list as a drop-down (vertical) list | Required on ul element inside drop-down section |
| `mdl-mega-footer--bottom-section` | Defines container as a footer bottom section | Required on bottom section "outer" div element |
| `mdl-mega-footer__top-section` | Defines container as a footer top section | Required on top section "outer" div element |
| `mdl-mega-footer__left-section` | Defines container as a left section | Required on left section "inner" div element |
| `mdl-mega-footer__social-btn` | Defines a decorative square within mega-footer | Required on button element (if used) |
| `mdl-mega-footer__right-section` | Defines container as a right section | Required on right section "inner" div element |
| `mdl-mega-footer__middle-section` | Defines container as a footer middle section | Required on middle section "outer" div element |
| `mdl-mega-footer__drop-down-section` | Defines container as a drop-down (vertical) content area | Required on drop-down "inner" div elements |
| `mdl-mega-footer__heading` | Defines a heading as a mega-footer heading | Required on h1 element inside drop-down section |
| `mdl-mega-footer__link-list` | Defines an unordered list as a drop-down (vertical) list | Required on ul element inside drop-down section |
| `mdl-mega-footer__bottom-section` | Defines container as a footer bottom section | Required on bottom section "outer" div element |
| `mdl-logo` | Defines a container as a styled section heading | Required on "inner" div element in mega-footer bottom-section or mini-footer left-section |
| `mdl-mini-footer` | Defines container as an MDL mini-footer component | Required on footer element |
| `mdl-mini-footer--left-section` | Defines container as a left section | Required on left section "inner" div element |
| `mdl-mini-footer--link-list` | Defines an unordered list as an inline (horizontal) list | Required on ul element sibling to "mdl-logo" div element |
| `mdl-mini-footer--right-section` | Defines container as a right section | Required on right section "inner" div element |
| `mdl-mini-footer--social-btn` | Defines a decorative square within mini-footer | Required on button element (if used) |
| `mdl-mini-footer__left-section` | Defines container as a left section | Required on left section "inner" div element |
| `mdl-mini-footer__link-list` | Defines an unordered list as an inline (horizontal) list | Required on ul element sibling to "mdl-logo" div element |
| `mdl-mini-footer__right-section` | Defines container as a right section | Required on right section "inner" div element |
| `mdl-mini-footer__social-btn` | Defines a decorative square within mini-footer | Required on button element (if used) |

12
src/footer/_mini_footer.scss
View File

@ -36,7 +36,8 @@
}
}
.mdl-mini-footer--link-list {
.mdl-mini-footer--link-list,
.mdl-mini-footer__link-list {
display: flex;
flex-flow: row nowrap;
@ -61,17 +62,20 @@
}
}
.mdl-mini-footer--left-section {
.mdl-mini-footer--left-section,
.mdl-mini-footer__left-section {
display: inline-block;
order: 0;
}
.mdl-mini-footer--right-section {
.mdl-mini-footer--right-section,
.mdl-mini-footer__right-section {
display: inline-block;
order: 1;
}
.mdl-mini-footer--social-btn {
.mdl-mini-footer--social-btn,
.mdl-mini-footer__social-btn {
width: $footer-btn-size;
height: $footer-btn-size;