| 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 11 matching lines...) Expand all Loading... |
| 22 color: var(--paper-grey-600); | 22 color: var(--paper-grey-600); |
| 23 font-size: 13px; | 23 font-size: 13px; |
| 24 font-weight: 500; | 24 font-weight: 500; |
| 25 margin-bottom: 0; | 25 margin-bottom: 0; |
| 26 margin-top: var(--settings-page-vertical-margin); | 26 margin-top: var(--settings-page-vertical-margin); |
| 27 } | 27 } |
| 28 | 28 |
| 29 #card { | 29 #card { |
| 30 @apply(--shadow-elevation-2dp); | 30 @apply(--shadow-elevation-2dp); |
| 31 background-color: white; | 31 background-color: white; |
| 32 border-radius: 2px; |
| 32 flex: 1; | 33 flex: 1; |
| 33 overflow: hidden; | 34 overflow: hidden; |
| 34 } | 35 } |
| 35 | 36 |
| 36 :host(.expanding) #card, | 37 :host(.expanding) #card, |
| 37 :host(.collapsing) #card, | 38 :host(.collapsing) #card, |
| 38 :host(.expanded) #card { | 39 :host(.expanded) #card { |
| 39 @apply(--shadow-elevation-4dp); | 40 @apply(--shadow-elevation-4dp); |
| 40 /* A stacking context constrains sliding sub-pages to the card. */ | 41 /* A stacking context constrains sliding sub-pages to the card. */ |
| 41 z-index: 0; | 42 z-index: 0; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 56 </style> | 57 </style> |
| 57 <div id="header"> | 58 <div id="header"> |
| 58 <h2 class="title">{{pageTitle}}</h2> | 59 <h2 class="title">{{pageTitle}}</h2> |
| 59 </div> | 60 </div> |
| 60 <div id="card"> | 61 <div id="card"> |
| 61 <content id="content"></content> | 62 <content id="content"></content> |
| 62 </div> | 63 </div> |
| 63 </template> | 64 </template> |
| 64 <script src="settings_section.js"></script> | 65 <script src="settings_section.js"></script> |
| 65 </dom-module> | 66 </dom-module> |
| OLD | NEW |