| <!-- Copyright 2019 The Chromium Authors. All rights reserved. |
| -- Use of this source code is governed by a BSD-style license that can be |
| -- found in the LICENSE file. |
| --> |
| |
| <style> |
| :host([hidden]) { |
| display: none; |
| } |
| |
| :host { |
| border-bottom: 1px solid var(--google-grey-refresh-300); |
| color: var(--cr-primary-text-color); |
| display: flex; |
| height: 36px; |
| justify-content: space-between; |
| padding: 5px 0; |
| white-space: nowrap; |
| } |
| |
| cr-icon-button:not([iron-icon]) { |
| margin: 0; |
| visibility: hidden; |
| width: 16px; |
| } |
| |
| cr-icon-button[iron-icon] { |
| margin: 0 8px; |
| } |
| |
| cr-icon-button[role=img] { |
| --iron-icon-fill-color: var(--google-red-600); |
| pointer-events: none; |
| } |
| |
| #text[aria-label]::after { |
| content: attr(aria-label); |
| } |
| |
| #text[aria-label] { |
| margin-inline-end: 8px; |
| } |
| |
| #dismiss:not([aria-label]), |
| #action:not([aria-label]) { |
| display: none; |
| } |
| |
| #dismiss[aria-label]::after, |
| #action[aria-label]::after { |
| content: attr(aria-label); |
| } |
| |
| #dismiss, |
| #action { |
| padding: 0 calc(12px - 1px); |
| } |
| </style> |
| |
| <div role='alert'> |
| <cr-icon-button id='icon'></cr-icon-button> |
| <span id='text'></span> |
| </div> |
| <div> |
| <cr-button id='dismiss'></cr-button> |
| <cr-button id='action'></cr-button> |
| <cr-icon-button id='close'></cr-icon-button> |
| </div> |