| <style include="cr-hidden-style"> |
| :host { |
| align-items: center; |
| display: flex; |
| gap: 4px; |
| height: 36px; |
| } |
| |
| :host([compact]) { |
| height: 28px; |
| } |
| |
| :host-context([chrome-refresh-2023]):host([compact]) { |
| height: 36px; |
| } |
| |
| #backButton, |
| ::slotted(cr-icon-button[slot=buttons]) { |
| --cr-icon-button-margin-start: -2px; |
| --cr-icon-button-margin-end: -2px; |
| --cr-icon-button-icon-size: 16px; |
| --cr-icon-button-size: 20px; |
| } |
| |
| :host-context([chrome-refresh-2023]) #backButton { |
| --cr-icon-button-fill-color: var(--cr-primary-text-color); |
| } |
| |
| :host-context([chrome-refresh-2023]) ::slotted(cr-icon-button[slot=buttons]) { |
| --cr-icon-button-fill-color: var(--cr-secondary-text-color); |
| } |
| |
| ::slotted([slot=heading]:is(h1, h2, h3, h4, h5, h6)) { |
| color: var(--cr-primary-text-color); |
| flex: 1; |
| font-size: 15px; |
| font-weight: 500; |
| line-height: 20px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| :host-context([chrome-refresh-2023]) |
| ::slotted([slot=heading]:is(h1, h2, h3, h4, h5, h6)) { |
| font-size: 14px; |
| } |
| |
| :host([compact]) ::slotted([slot=heading]:is(h1, h2, h3, h4, h5, h6)) { |
| color: var(--cr-secondary-text-color); |
| font-size: 11px; |
| font-weight: 600; |
| line-height: 16px; |
| text-transform: uppercase; |
| } |
| |
| :host-context([chrome-refresh-2023]):host([compact]) |
| ::slotted([slot=heading]:is(h1, h2, h3, h4, h5, h6)) { |
| color: var(--cr-primary-text-color); |
| font-size: 14px; |
| font-weight: 500; |
| line-height: 20px; |
| text-transform: none; |
| } |
| |
| ::slotted([slot=metadata]) { |
| color: var(--cr-secondary-text-color); |
| flex-shrink: 0; |
| font-size: 11px; |
| font-weight: 400; |
| line-height: 20px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| :host-context([chrome-refresh-2023]) ::slotted([slot=metadata]) { |
| line-height: 16px; |
| padding-inline-end: 4px; |
| } |
| |
| #suffixButtons { |
| align-items: center; |
| display: flex; |
| gap: 8px; |
| } |
| |
| ::slotted(cr-button[slot=buttons]) { |
| --hover-bg-color: var(--cr-hover-background-color); |
| --ripple-opacity: 0; |
| border: none; |
| color: var(--cr-secondary-text-color); |
| font-weight: 400; |
| gap: 4px; |
| height: 20px; |
| padding: 0; |
| } |
| |
| ::slotted(cr-button[slot=buttons]:active) { |
| background-color: var(--cr-active-background-color); |
| box-shadow: none; |
| } |
| </style> |
| |
| <cr-icon-button id="backButton" iron-icon="cr:arrow-back" |
| hidden$="[[hideBackButton]]" disabled$="[[disableBackButton]]" |
| on-click="onBackButtonClick_"> |
| </cr-icon-button> |
| |
| <slot name="heading"></slot> |
| <slot name="metadata"></slot> |
| <div id="suffixButtons"><slot name="buttons"></slot></div> |
