OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
2 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> | 2 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
3 | 3 |
4 <dom-module id="cr-action-menu"> | 4 <dom-module id="cr-action-menu"> |
5 <template> | 5 <template> |
6 <style> | 6 <style> |
7 :host { | 7 :host { |
8 background-color: white; | 8 background-color: white; |
9 border: none; | 9 border: none; |
10 box-shadow: 0 2px 6px var(--paper-grey-500); | 10 box-shadow: 0 2px 6px var(--paper-grey-500); |
| 11 color: inherit; |
11 margin: 0; | 12 margin: 0; |
12 outline: none; | 13 outline: none; |
13 padding: 8px 0; | 14 padding: 8px 0; |
14 } | 15 } |
15 | 16 |
16 :host::backdrop { | 17 :host::backdrop { |
17 background-color: transparent; | 18 background-color: transparent; |
18 } | 19 } |
19 | 20 |
20 :host ::content .dropdown-item { | 21 :host ::content .dropdown-item { |
21 background: none; | 22 background: none; |
22 border: none; | 23 border: none; |
23 box-sizing: border-box; | 24 box-sizing: border-box; |
24 color: var(--paper-grey-800); | 25 color: inherit; |
25 font: inherit; | 26 font: inherit; |
26 min-height: 32px; | 27 min-height: 32px; |
27 padding: 0 24px; | 28 padding: 0 24px; |
28 text-align: start; | 29 text-align: start; |
29 width: 100%; | 30 width: 100%; |
30 } | 31 } |
31 | 32 |
32 :host ::content .dropdown-item:not([hidden]) { | 33 :host ::content .dropdown-item:not([hidden]) { |
33 align-items: center; | 34 align-items: center; |
34 display: flex; | 35 display: flex; |
35 } | 36 } |
36 | 37 |
| 38 :host ::content .dropdown-item[disabled] { |
| 39 opacity: 0.65; |
| 40 } |
| 41 |
37 :host ::content .dropdown-item:not([disabled]) { | 42 :host ::content .dropdown-item:not([disabled]) { |
38 @apply(--cr-actionable); | 43 @apply(--cr-actionable); |
39 } | 44 } |
40 | 45 |
41 :host ::content .dropdown-item:focus { | 46 :host ::content .dropdown-item:focus { |
42 background-color: var(--paper-grey-300); | 47 background-color: var(--paper-grey-300); |
43 outline: none; | 48 outline: none; |
44 } | 49 } |
45 | 50 |
46 .item-wrapper { | 51 .item-wrapper { |
47 outline: none; | 52 outline: none; |
48 } | 53 } |
49 </style> | 54 </style> |
50 <div class="item-wrapper" tabindex="-1"> | 55 <div class="item-wrapper" tabindex="-1"> |
51 <content select=".dropdown-item,hr"></content> | 56 <content select=".dropdown-item,hr"></content> |
52 </div> | 57 </div> |
53 </template> | 58 </template> |
54 <script src="cr_action_menu.js"></script> | 59 <script src="cr_action_menu.js"></script> |
55 </dom-module> | 60 </dom-module> |
OLD | NEW |