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

Add full bleed modifier for menu items.

master
Jonathan Garbee 2015-10-19 00:20:42 -04:00
parent 714fe21d7c
commit fc37d1fbb6
4 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/_variables.scss
View File

@ -280,6 +280,7 @@ $default-item-outline-color: unquote("rgb(#{$palette-grey-400})") !default;
$default-item-hover-bg-color: unquote("rgb(#{$palette-grey-200})") !default; $default-item-hover-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
$default-item-focus-bg-color: unquote("rgb(#{$palette-grey-200})") !default; $default-item-focus-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
$default-item-active-bg-color: unquote("rgb(#{$palette-grey-300})") !default; $default-item-active-bg-color: unquote("rgb(#{$palette-grey-300})") !default;
$default-item-divider-color: unquote("rgba(#{$color-black}, 0.12)") !default;
// Disabled Button Colors // Disabled Button Colors
$disabled-item-text-color: unquote("rgb(#{$palette-grey-400})") !default; $disabled-item-text-color: unquote("rgb(#{$palette-grey-400})") !default;

1
src/menu/README.md
View File

@ -91,6 +91,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-menu` | Defines an unordered list container as an MDL component | Required on ul element | | `mdl-menu` | Defines an unordered list container as an MDL component | Required on ul element |
| `mdl-js-menu` | Assigns basic MDL behavior to menu | Required on ul element | | `mdl-js-menu` | Assigns basic MDL behavior to menu | Required on ul element |
| `mdl-menu__item` | Defines buttons as MDL menu options and assigns basic MDL behavior | Required on list item elements | | `mdl-menu__item` | Defines buttons as MDL menu options and assigns basic MDL behavior | Required on list item elements |
| `mdl-menu__item--full-bleed-divider` | Modifies an item to have a full bleed divider between it and the next list item. | Optional on list item elements |
| `mdl-js-ripple-effect` | Applies *ripple* click effect to option links | Optional; goes on unordered list element | | `mdl-js-ripple-effect` | Applies *ripple* click effect to option links | Optional; goes on unordered list element |
| `mdl-menu--top-left` | Positions menu above button, aligns left edge of menu with button | Optional; goes on unordered list element | | `mdl-menu--top-left` | Positions menu above button, aligns left edge of menu with button | Optional; goes on unordered list element |
| (none) | Positions menu below button, aligns left edge of menu with button | Default | | (none) | Positions menu below button, aligns left edge of menu with button | Default |

4
src/menu/_menu.scss
View File

@ -151,6 +151,10 @@
border: 0; border: 0;
} }
&--full-bleed-divider {
border-bottom: 1px solid $default-item-divider-color;
}
&[disabled], &[data-mdl-disabled] { &[disabled], &[data-mdl-disabled] {
color: $disabled-item-text-color; color: $disabled-item-text-color;
background-color: transparent; background-color: transparent;

2
src/menu/snippets/lower-left.html
View File

@ -7,7 +7,7 @@
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-left"> for="demo-menu-lower-left">
<li class="mdl-menu__item">Some Action</li> <li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li> <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li> <li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li> <li class="mdl-menu__item">Yet Another Action</li>
</ul> </ul>