OLD | NEW |
1 <link rel="import" href="chrome://resources/html/icon.html"> | 1 <link rel="import" href="chrome://resources/html/icon.html"> |
2 <link rel="import" href="chrome://resources/html/polymer.html"> | 2 <link rel="import" href="chrome://resources/html/polymer.html"> |
3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt
on.html"> | 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt
on.html"> |
4 <link rel="import" href="cr_profile_avatar_selector_grid.html"> | 4 <link rel="import" href="cr_profile_avatar_selector_grid.html"> |
5 | 5 |
6 <dom-module id="cr-profile-avatar-selector"> | 6 <dom-module id="cr-profile-avatar-selector"> |
7 <template> | 7 <template> |
8 <style> | 8 <style> |
9 :host { | 9 :host { |
10 --avatar-size: 48px; | 10 --avatar-size: 48px; |
11 --avatar-spacing: 24px; | 11 --avatar-spacing: 24px; |
12 display: inline-flex; | 12 display: inline-flex; |
13 | 13 |
14 @apply(--avatar-selector); | 14 @apply(--avatar-selector); |
15 } | 15 } |
16 | 16 |
17 #avatar-grid .avatar { | 17 #avatar-grid .avatar { |
18 --paper-button: { | 18 --paper-button: { |
19 background: var(--paper-grey-300); | 19 background: var(--paper-grey-300); |
20 }; | 20 }; |
21 --paper-button-flat-keyboard-focus: { | 21 --paper-button-flat-keyboard-focus: { |
22 background: var(--paper-grey-400); | 22 background: var(--paper-grey-400); |
23 }; | 23 }; |
24 background-position: center; | 24 background-position: center; |
25 background-repeat: no-repeat; | 25 background-repeat: no-repeat; |
| 26 border: 1px solid rgba(0, 0, 0, .12); |
26 border-radius: 2px; | 27 border-radius: 2px; |
27 border: 1px solid rgba(0, 0, 0, .12); | |
28 display: flex; | 28 display: flex; |
29 height: var(--avatar-size); | 29 height: var(--avatar-size); |
30 margin: calc(var(--avatar-spacing) / 2); | 30 margin: calc(var(--avatar-spacing) / 2); |
31 min-width: 0; | 31 min-width: 0; |
32 padding: 0; | 32 padding: 0; |
33 width: var(--avatar-size); | 33 width: var(--avatar-size); |
34 | 34 |
35 @apply(--avatar-selector-avatar); | 35 @apply(--avatar-selector-avatar); |
36 } | 36 } |
37 | 37 |
38 #avatar-grid .avatar.iron-selected { | 38 #avatar-grid .avatar.iron-selected { |
39 border: 1px solid var(--google-blue-500); | 39 border: 1px solid var(--google-blue-500); |
40 | 40 |
41 @apply(--avatar-selector-avatar-selected); | 41 @apply(--avatar-selector-avatar-selected); |
42 } | 42 } |
43 </style> | 43 </style> |
44 <cr-profile-avatar-selector-grid id="avatar-grid" | 44 <cr-profile-avatar-selector-grid id="avatar-grid" |
45 selected="{{selectedAvatarUrl}}" attr-for-selected="data-avatar-url" | 45 selected="{{selectedAvatarUrl}}" attr-for-selected="data-avatar-url" |
46 ignore-modified-key-events="[[ignoreModifiedKeyEvents]]"> | 46 ignore-modified-key-events="[[ignoreModifiedKeyEvents]]"> |
47 <template is="dom-repeat" items="[[avatars]]"> | 47 <template is="dom-repeat" items="[[avatars]]"> |
48 <paper-button class="avatar" data-avatar-url$="[[item.url]]" | 48 <paper-button class="avatar" data-avatar-url$="[[item.url]]" |
49 title="[[item.label]]" data-is-gaia-avatar$="[[item.isGaiaAvatar]]" | 49 title="[[item.label]]" data-is-gaia-avatar$="[[item.isGaiaAvatar]]" |
50 style$="background-image: [[getIconImageset_(item.url)]]"> | 50 style$="background-image: [[getIconImageset_(item.url)]]"> |
51 </paper-button> | 51 </paper-button> |
52 </template> | 52 </template> |
53 </cr-profile-avatar-selector-grid> | 53 </cr-profile-avatar-selector-grid> |
54 </template> | 54 </template> |
55 <script src="cr_profile_avatar_selector.js"></script> | 55 <script src="cr_profile_avatar_selector.js"></script> |
56 </dom-module> | 56 </dom-module> |
OLD | NEW |