1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<style>
cr-dialog {
--cr-dialog-width: 448px;
}
cr-dialog [slot=title] {
color: var(--cros-sys-on_surface);
/* TODO(austinct): replace once proper font is in cros_typography */
font: var(--cros-display-7-font);
padding: 24px 24px 16px;
}
cr-dialog [slot=body] {
color: var(--cros-sys-on_surface_variant);
font: var(--cros-body-2-font);
padding: 0 24px;
}
cr-dialog [slot=button-container] {
padding: 49px 24px 24px;
}
cr-button {
--active-bg: transparent;
--active-shadow: none;
--active-shadow-action: none;
--bg-action: var(--cros-sys-primary);
--cr-button-height: 36px;
--disabled-bg-action:
var(--cros-sys-disabled_container);
--disabled-bg: var(--cros-sys-disabled_container);;
--disabled-text-color: var(--cros-sys-disabled);
/* Use the default bg color as hover color because we
rely on hoverBackground layer below. */
--hover-bg-action: var(--cros-sys-primary);
--hover-bg-color: var(--cros-sys-primary_container);
--ink-color: var(--cros-sys-ripple_primary);
--ripple-opacity-action: 1;
--ripple-opacity: 1;
--text-color-action: var(--cros-sys-on_primary);
--text-color: var(--cros-sys-on_primary_container);
border: none;
border-radius: 18px;
box-shadow: none;
}
cr-button.cancel-button {
background-color: var(--cros-sys-primary_container);
}
cr-button.cancel-button:hover::part(hoverBackground) {
background-color: var(--cros-sys-hover_on_subtle);
display: block;
}
cr-button.action-button:hover::part(hoverBackground) {
background-color: var(--cros-sys-hover_on_prominent);
display: block;
}
:host-context(.focus-outline-visible) cr-button:focus {
outline: 2px solid var(--cros-sys-focus_ring);
outline-offset: 2px;
}
</style>
<cr-dialog>
<div slot="title">$i18n{cancelSetupTitle}</div>
<div slot="body">$i18n{cancelSetupBodyText}</div>
<div slot="button-container">
<cr-button class="cancel-button">$i18n{cancelSetup}</cr-button>
<cr-button class="action-button">$i18n{continueSetup}</cr-button>
</div>
</cr-dialog>
|
