blob: 632d9c1989a27f881758f30d5bf82e69c7c73d63 [file] [log] [blame]
<style>
:host {
color: var(--cr-primary-text-color);
}
.left-illustration,
.right-illustration {
position: absolute;
top:0;
width: 20vw;
}
.left-illustration {
content: url(images/left_illustration.svg);
left: 0;
}
.right-illustration {
content: url(images/right_illustration.svg);
right: 0;
}
.button-container {
bottom: 0;
display: flex;
position: absolute;
width: 100%;
}
cr-button {
margin: 25px;
}
.first-button {
margin-inline-end: auto;
}
.second-button {
margin-inline-start: auto;
}
.content-container {
align-items: center;
display: flex;
flex-direction: column;
margin: auto;
max-width: 472px;
text-align: center;
}
.title {
font-weight: 400;
margin-top: 68px;
}
.subtitle {
color: var(--cr-seconday-text-color);
font-size: 0.88rem;
line-height: 22px;
}
.image-placeholder {
background-color: blue;
height: 70px;
width: 250px;
}
.choice-list {
display: flex;
flex-direction: column;
gap: 1px;
}
.choice {
align-items: center;
background-color: var(--google-grey-200);
display: flex;
flex-direction: row;
gap: 16px;
height: 24px;
padding: 16px 24px;
width: 424px;
}
.choice:first-child {
border-top-left-radius: 24px;
border-top-right-radius: 24px;
}
div.choice:last-of-type {
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
}
.choice-icon {
background-color: green;
height: 24px;
width: 24px;
}
.choice-text {
font-size: 0.88rem;
line-height: 20px;
}
cr-checkbox {
margin-inline-start: auto;
}
@media (prefers-color-scheme: dark) {
.left-illustration {
content: url(images/left_illustration_dark.svg);
}
.right-illustration {
content: url(images/right_illustration_dark.svg);
}
}
</style>
<img class="left-illustration" alt="">
<img class="right-illustration" alt="">
<div class="content-container">
<h1 class="title">$i18n{title}</h1>
<div class="image-placeholder"></div>
<p class="subtitle">$i18n{subtitle}</p>
<div class="choice-list">
<template is="dom-repeat" items="[[choiceList_]]">
<div class="choice">
<div class="choice-icon"></div>
<div class="choice-text">[[item.name]]</div>
<cr-checkbox></cr-checkbox>
</div>
</template>
</div>
</div>
<div class="button-container">
<cr-button class="first-button">$i18n{firstButton}</cr-button>
<cr-button class="second-button action-button" disabled>
$i18n{secondButton}</cr-button>
</div>