| OLD | NEW |
| 1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
| 2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.htm
l"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.htm
l"> |
| 3 <link rel="import" href="/animation/animation.html"> | 3 <link rel="import" href="/animation/animation.html"> |
| 4 | 4 |
| 5 <dom-module id="settings-section"> | 5 <dom-module id="settings-section"> |
| 6 <template> | 6 <template> |
| 7 <style> | 7 <style> |
| 8 :host { | 8 :host { |
| 9 display: flex; | 9 display: flex; |
| 10 flex-direction: column; | 10 flex-direction: column; |
| (...skipping 20 matching lines...) Expand all Loading... |
| 31 background-color: white; | 31 background-color: white; |
| 32 border-radius: 2px; | 32 border-radius: 2px; |
| 33 flex: 1; | 33 flex: 1; |
| 34 overflow: hidden; | 34 overflow: hidden; |
| 35 } | 35 } |
| 36 | 36 |
| 37 :host(.expanding) #card, | 37 :host(.expanding) #card, |
| 38 :host(.collapsing) #card, | 38 :host(.collapsing) #card, |
| 39 :host(.expanded) #card { | 39 :host(.expanded) #card { |
| 40 @apply(--shadow-elevation-4dp); | 40 @apply(--shadow-elevation-4dp); |
| 41 border-radius: 0; |
| 41 /* A stacking context constrains sliding sub-pages to the card. */ | 42 /* A stacking context constrains sliding sub-pages to the card. */ |
| 42 z-index: 0; | 43 z-index: 0; |
| 43 } | 44 } |
| 44 | 45 |
| 45 :host(:not(.expanding):not(.expanded)) #card { | 46 :host(:not(.expanding):not(.expanded)) #card { |
| 46 /* Keep the fading-out neon-animatable inside the card. */ | 47 /* Keep the fading-out neon-animatable inside the card. */ |
| 47 position: relative; | 48 position: relative; |
| 48 } | 49 } |
| 49 | 50 |
| 50 :host(.expanded) #header { | 51 :host(.expanded) #header { |
| 51 display: none; | 52 display: none; |
| 52 } | 53 } |
| 53 | 54 |
| 54 :host([hidden-by-search]) { | 55 :host([hidden-by-search]) { |
| 55 display: none; | 56 display: none; |
| 56 } | 57 } |
| 57 </style> | 58 </style> |
| 58 <div id="header"> | 59 <div id="header"> |
| 59 <h2 class="title">{{pageTitle}}</h2> | 60 <h2 class="title">{{pageTitle}}</h2> |
| 60 </div> | 61 </div> |
| 61 <div id="card"> | 62 <div id="card"> |
| 62 <content id="content"></content> | 63 <content id="content"></content> |
| 63 </div> | 64 </div> |
| 64 </template> | 65 </template> |
| 65 <script src="settings_section.js"></script> | 66 <script src="settings_section.js"></script> |
| 66 </dom-module> | 67 </dom-module> |
| OLD | NEW |