| <style include="cr-shared-style settings-shared iron-flex"> |
| :host([row-clickable]) .cr-row { |
| cursor: pointer; |
| } |
| |
| :host([row-clickable]) #managedIcon { |
| /* Make the managed icon and the row clickable indicator closer. */ |
| padding-inline-end: 0; |
| } |
| |
| iron-icon { |
| display: flex; |
| flex-shrink: 0; |
| padding-inline-end: var(--cr-icon-button-margin-start); |
| width: var(--cr-link-row-icon-width, var(--cr-icon-size)); |
| } |
| |
| .icon-blue { |
| fill: var(--google-blue-600); |
| } |
| |
| .icon-red { |
| fill: var(--google-red-600); |
| } |
| |
| /* dark mode */ |
| @media (prefers-color-scheme: dark) { |
| .icon-blue { |
| fill: var(--google-blue-refresh-300); |
| } |
| |
| .icon-red { |
| fill: var(--google-red-refresh-300); |
| } |
| } |
| </style> |
| <div class="cr-row"> |
| <iron-icon id="statusIcon" |
| icon="[[getStatusIcon_(iconStatus)]]" |
| src="[[getStatusIconSrc_(iconStatus)]]" |
| class$="[[getStatusIconClass_(iconStatus)]]" |
| role="img" |
| aria-label="[[getStatusIconAriaLabel_(iconStatus)]]"> |
| </iron-icon> |
| <div class="flex cr-padded-text"> |
| <div id="label">[[label]]</div> |
| <div id="subLabel" class="secondary" no-search |
| inner-h-t-m-l="[[subLabel]]"> |
| </div> |
| </div> |
| <template is="dom-if" if="[[showButton_(buttonLabel)]]" restamp> |
| <cr-button id="button" class$="[[buttonClass]]" on-click="onButtonClick_" |
| aria-label="[[buttonAriaLabel]]" no-search> |
| [[buttonLabel]] |
| </cr-button> |
| </template> |
| <template is="dom-if" if="[[showManagedIcon_(managedIcon)]]"> |
| <iron-icon id="managedIcon" icon="[[managedIcon]]" aria-hidden="true"> |
| </iron-icon> |
| </template> |
| <template is="dom-if" if="[[rowClickable]]"> |
| <cr-icon-button id="rowClickableIndicator" |
| iron-icon="[[rowClickableIcon_]]" |
| aria-describedby="subLabel" |
| aria-labelledby="label" |
| aria-roledescription$="[[getRoleDescription_(rowClickableIcon_)]]"> |
| </cr-icon-button> |
| </template> |
| </div> |
