<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" | |
page-visibility="[[pageVisibility_]]" | |
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" | |
page-visibility="[[pageVisibility_]]" | |
on-iron-activate="onIronActivate_"> | |
</settings-menu> | |
</div> | |
<settings-main id="main" prefs="{{prefs}}" | |
toolbar-spinner-active="{{toolbarSpinnerActive_}}" | |
page-visibility="[[pageVisibility_]]"> | |
</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> |