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
75
76
77
78
79
80
81
82
83
84
85
86
|
<style>
a {
color: var(--cros-sys-primary);
}
#error-message {
align-items: center;
color: var(--cros-sys-error);
display: flex;
}
#error-message[hidden] {
/* display: flex overrides the hidden visibility */
display: none;
}
.icon {
-webkit-mask-image: url(icons/error.svg);
background-color: var(--cros-sys-error);
height: 16px;
width: 17px;
}
.error-text {
margin-inline-start: 5px;
}
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>
<svg slot="header-image" viewBox="0 0 448 200">
<use href="images/connect_one_drive.svg#EXPORT_image"></use>
</svg>
<div slot="title">$i18n{connectToOneDriveTitle}</div>
<div slot="body">
<div id="error-message" hidden>
<div class="icon"></div>
<span class="error-text">$i18n{cantConnectOneDrive}</span>
</div>
<p>$i18nRaw{connectToOneDriveSignInFlowBodyText}</p>
</div>
<div slot="button-container">
<cr-button class="cancel-button">$i18n{cancel}</cr-button>
<cr-button class="action-button">$i18n{connectOneDrive}</cr-button>
</div>
|
