| 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 |