blob: ad383e620fee7f7642fd90c85f737fff4765ec74 [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="../animation/animation.html">
<dom-module id="settings-section">
<template>
<style>
:host {
display: flex;
flex-direction: column;
/* Margin so the box-shadow isn't clipped during animations. */
margin-inline-end: 3px;
margin-inline-start: 3px;
outline: none;
position: relative;
}
#header {
margin-bottom: 12px;
}
#header .title {
color: var(--google-grey-900);
font-size: 108%;
font-weight: 400;
letter-spacing: .25px;
margin-bottom: 0;
margin-top: var(--settings-page-vertical-margin);
padding-bottom: 4px;
padding-top: 8px;
}
#card {
@apply --cr-card-elevation;
background-color: white;
border-radius: var(--cr-card-border-radius);
flex: 1;
}
:host(.expanded) #card {
border-radius: 0;
}
:host(.expanding) #card,
:host(.collapsing) #card,
:host(.expanded) #card {
@apply --cr-card-elevation;
overflow: hidden;
/* A stacking context constrains sliding sub-pages to the card. */
z-index: 0;
}
:host(:not(.expanding):not(.expanded)) #card {
/* Keep the fading-out neon-animatable inside the card. */
position: relative;
}
:host(.expanded) #header {
display: none;
}
:host([hidden-by-search]) {
display: none;
}
</style>
<div id="header">
<h2 class="title"
aria-hidden$="[[getTitleHiddenStatus_(pageTitle)]]">[[pageTitle]]</h2>
</div>
<div id="card">
<slot></slot>
</div>
</template>
<script src="settings_section.js"></script>
</dom-module>