blob: a4d3aaa7f0a1a2378bd1d27928ba2795cdd1d99e [file] [log] [blame]
<style include="cr-shared-style">
:host {
--computer-icon-padding-top: 11px;
--computer-icon-padding-bottom: 10px;
--computer-icon-padding-sides: 8px;
/* Same opacity as the native bubble, where the Skia range is 0-255.*/
--hairline-opacity: calc(96/255);
--hairline-width: 1px;
--hairline-color :
rgba(var(--google-grey-700-rgb), var(--hairline-opacity));
--outer-icon-size: 48px;
}
@media (prefers-color-scheme: dark) {
:host {
--hairline-color:
rgba(var(--google-grey-500-rgb), var(--hairline-opacity))
}
}
cr-dialog::part(body-container) {
height: 124px;
}
.icon-container {
height: var(--outer-icon-size);
position: relative;
width: var(--outer-icon-size);
}
settings-avatar-icon {
border: var(--hairline-width) solid var(--hairline-color);
border-radius: 50%;
display: flex;
flex-shrink: 0;
height: calc(var(--outer-icon-size) - 2 * var(--hairline-width));
width: calc(var(--outer-icon-size) - 2 * var(--hairline-width));
}
#computerIcon {
--iron-icon-height: calc(var(--outer-icon-size) - 2 * var(--hairline-width)
- var(--computer-icon-padding-top)
- var(--computer-icon-padding-bottom));
--iron-icon-width: calc(var(--outer-icon-size) - 2 * var(--hairline-width)
- 2 * var(--computer-icon-padding-sides));
border: var(--hairline-width) solid var(--hairline-color);
border-radius: 50%;
flex-shrink: 0;
padding-bottom: var(--computer-icon-padding-bottom);
padding-inline-end: var(--computer-icon-padding-sides);
padding-inline-start: var(--computer-icon-padding-sides);
padding-top: var(--computer-icon-padding-top);
}
site-favicon {
background-color: white;
border: var(--hairline-width) solid var(--hairline-color);
border-radius: 50%;
bottom: 0;
padding: 2px;
position: absolute;
right: 0;
}
@media (prefers-color-scheme: dark) {
site-favicon {
background-color: var(--google-grey-900-white-4-percent);
}
}
.cr-row {
display: flex;
justify-content: center;
}
#chevronIcon {
height: 16px;
margin: 0 16px;
width: 16px;
}
:host-context([dir=rtl]) #chevronIcon {
transform: scaleX(-1);
}
#dialogMessage {
margin-bottom: 24px;
}
</style>
<cr-dialog id="dialog" close-text="$i18n{close}">
<div slot="title">$i18n{passwordMoveToAccountDialogTitle}</div>
<div slot="body">
<div id="dialogMessage">
$i18n{passwordMoveToAccountDialogBody}
</div>
<div class="cr-row first">
<div class="icon-container">
<iron-icon id="computerIcon" icon="cr:computer">
</iron-icon>
<site-favicon url="[[passwordToMove.urls.link]]">
</site-favicon>
</div>
<iron-icon id="chevronIcon" icon="cr:chevron-right"></iron-icon>
<div class="icon-container">
<settings-avatar-icon></settings-avatar-icon>
<site-favicon url="[[passwordToMove.urls.link]]">
</site-favicon>
</div>
</div>
</div>
<div slot="button-container">
<cr-button class="cancel-button" id="cancelButton"
on-click="onCancelButtonClick_">
$i18n{passwordMoveToAccountDialogCancelButtonText}
</cr-button>
<cr-button class="action-button" id="moveButton"
on-click="onMoveButtonClick_">
$i18n{passwordMoveToAccountDialogMoveButtonText}
</cr-button>
</div>
</cr-dialog>