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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
<style include="cr-page-host-style settings-shared">
:host {
display: flex;
flex-direction: column;
height: 100%;
--settings-menu-width: 266px;
/* Centered cards has a max-width of var(--cr-centered-card-max-width)
* and a width of a certain percentage. Therefore, to make room for the
* cards to be at their max width, the flex-basis of #main needs to be
* whatever value the percentage of would equal to the max width. */
--settings-main-basis: calc(var(--cr-centered-card-max-width) /
var(--cr-centered-card-width-percentage));
}
cr-toolbar {
min-height: 56px;
--cr-toolbar-center-basis: var(--settings-main-basis);
}
cr-toolbar:not([narrow]) {
--cr-toolbar-left-spacer-width: var(--settings-menu-width);
}
@media (prefers-color-scheme: light) {
cr-toolbar {
--iron-icon-fill-color: white;
}
}
#cr-container-shadow-top {
/* Needs to be higher than #container's z-index to appear above
* scrollbars. */
z-index: 2;
}
#container {
/* CrContainerShadowMixin creates a div inside of #container to
* calculate when the div is off-screen, indicating that the user has
* scrolled #container. Since this div needs to be at the top of
* #container, set align-items to flex-start. Otherwise, the flex layout
* will stretch the div across the entire height of #container and never
* appear off-screen. */
align-items: flex-start;
display: flex;
flex: 1;
overflow: overlay;
position: relative;
}
#left,
#main,
#right {
flex: 1 1 0;
}
#left {
height: 100%;
position: sticky;
top: 0;
}
#left settings-menu {
max-height: 100%;
overflow: auto;
overscroll-behavior: contain;
width: var(--settings-menu-width);
}
#main {
flex-basis: var(--settings-main-basis);
}
/* The breakpoint of 980px was decided on by the rounded sum of
* var(--settings-main-basis), var(--settings-menu-width), and
* var(--cr-section-padding). */
@media (max-width: 980px) {
#main {
min-width: auto;
/* Add some padding to make room for borders and to prevent focus
* indicators from being cropped. */
padding: 0 3px;
}
}
</style>
<settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs>
<cr-toolbar id="toolbar"
page-name="$i18n{settings}"
clear-label="$i18n{clearSearch}"
autofocus
search-prompt="$i18n{searchPrompt}"
on-cr-toolbar-menu-click="onMenuButtonClick_"
spinner-active="[[toolbarSpinnerActive_]]"
menu-label="$i18n{menuButtonLabel}"
on-search-changed="onSearchChanged_"
role="banner"
narrow="{{narrow_}}"
narrow-threshold="980"
show-menu="[[narrow_]]">
</cr-toolbar>
<cr-drawer id="drawer" on-close="onMenuClose_" heading="$i18n{settings}"
align="$i18n{textdirection}">
<div slot="body">
<template is="dom-if" id="drawerTemplate">
<settings-menu id="drawerMenu" on-iron-activate="onIronActivate_">
</settings-menu>
</template>
</div>
</cr-drawer>
<div id="container" class="no-outline">
<div id="left" hidden$="[[narrow_]]">
<settings-menu id="leftMenu" on-iron-activate="onIronActivate_">
</settings-menu>
</div>
<settings-main id="main" prefs="{{prefs}}"
toolbar-spinner-active="{{toolbarSpinnerActive_}}">
</settings-main>
<!-- An additional child of the flex #container to take up space,
aligned with the right-hand child of the flex toolbar. -->
<div id="right" hidden$="[[narrow_]]"></div>
</div>
|
