| OLD | NEW |
| 1 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html"> | 1 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html"> |
| 2 <link rel="import" href="chrome://resources/cr_elements/icons.html"> | 2 <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| 3 <link rel="import" href="chrome://resources/html/assert.html"> | 3 <link rel="import" href="chrome://resources/html/assert.html"> |
| 4 <link rel="import" href="chrome://resources/html/polymer.html"> | 4 <link rel="import" href="chrome://resources/html/polymer.html"> |
| 5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> | 5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> |
| 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/default-th
eme.html"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/default-th
eme.html"> |
| 7 | 7 |
| 8 <dom-module id="cr-dialog"> | 8 <dom-module id="cr-dialog"> |
| 9 <template> | 9 <template> |
| 10 <style include="cr-hidden-style"> | 10 <style include="cr-hidden-style"> |
| 11 :host { | 11 :host { |
| 12 --scroll-border: 1px solid var(--paper-grey-300); | 12 --scroll-border: 1px solid var(--paper-grey-300); |
| 13 border: 0; | 13 border: 0; |
| 14 border-radius: 2px; | 14 border-radius: 2px; |
| 15 bottom: 0; | 15 bottom: 0; |
| 16 box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12), | 16 box-shadow: 0 0 16px rgba(0, 0, 0, 0.12), |
| 17 0px 16px 16px rgba(0, 0, 0, 0.24); | 17 0 16px 16px rgba(0, 0, 0, 0.24); |
| 18 color: inherit; | 18 color: inherit; |
| 19 padding: 0; | 19 padding: 0; |
| 20 top: 0; | 20 top: 0; |
| 21 width: 512px; | 21 width: 512px; |
| 22 } | 22 } |
| 23 | 23 |
| 24 :host([open]) { | 24 :host([open]) { |
| 25 /* Keep max-height within viewport, and flex content accordingly. */ | 25 /* Keep max-height within viewport, and flex content accordingly. */ |
| 26 display: flex; | 26 display: flex; |
| 27 flex-direction: column; | 27 flex-direction: column; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 42 position: fixed; | 42 position: fixed; |
| 43 right: 0; | 43 right: 0; |
| 44 top: 0; | 44 top: 0; |
| 45 } | 45 } |
| 46 | 46 |
| 47 :host ::content .body { | 47 :host ::content .body { |
| 48 padding: 12px 16px; | 48 padding: 12px 16px; |
| 49 } | 49 } |
| 50 | 50 |
| 51 :host ::content .title { | 51 :host ::content .title { |
| 52 flex: 1; |
| 52 font-size: calc(15 / 13 * 100%); | 53 font-size: calc(15 / 13 * 100%); |
| 53 line-height: 1; | 54 line-height: 1; |
| 54 padding: 16px 16px; | 55 padding: 16px 16px; |
| 55 flex: 1; | |
| 56 } | 56 } |
| 57 | 57 |
| 58 :host ::content .button-container { | 58 :host ::content .button-container { |
| 59 padding: 16px 16px; | |
| 60 display: flex; | 59 display: flex; |
| 61 justify-content: flex-end; | 60 justify-content: flex-end; |
| 61 padding: 16px; |
| 62 } | 62 } |
| 63 | 63 |
| 64 :host ::content .button-container .cancel-button { | 64 :host ::content .button-container .cancel-button { |
| 65 -webkit-margin-end: 8px; | 65 -webkit-margin-end: 8px; |
| 66 color: var(--paper-grey-600); | 66 color: var(--paper-grey-600); |
| 67 } | 67 } |
| 68 | 68 |
| 69 :host ::content .footer { | 69 :host ::content .footer { |
| 70 border-bottom-left-radius: inherit; | 70 border-bottom-left-radius: inherit; |
| 71 border-bottom-right-radius: inherit; | 71 border-bottom-right-radius: inherit; |
| 72 margin: 0; | 72 margin: 0; |
| 73 padding: 16px 20px; | 73 padding: 16px 20px; |
| 74 } | 74 } |
| 75 | 75 |
| 76 :host ::content .border-top-divider { | 76 :host ::content .border-top-divider { |
| 77 border-top: 1px solid var(--divider-color); | 77 border-top: 1px solid var(--divider-color); |
| 78 } | 78 } |
| 79 | 79 |
| 80 .body-container { | 80 .body-container { |
| 81 /* Prevent layout moving when border does appear. */ |
| 82 border-bottom: 1px solid transparent; |
| 83 border-top: 1px solid transparent; |
| 84 |
| 81 display: flex; | 85 display: flex; |
| 82 flex-direction: column; | 86 flex-direction: column; |
| 83 min-height: 60px; /* Minimum reasonably usable height. */ | 87 min-height: 60px; /* Minimum reasonably usable height. */ |
| 84 overflow: auto; | 88 overflow: auto; |
| 85 | 89 |
| 86 /* Prevent layout moving when border does appear. */ | |
| 87 border-bottom: 1px solid transparent; | |
| 88 border-top: 1px solid transparent; | |
| 89 | |
| 90 @apply(--cr-dialog-body-container); | 90 @apply(--cr-dialog-body-container); |
| 91 } | 91 } |
| 92 | 92 |
| 93 .body-container.bottom-scrollable { | 93 .body-container.bottom-scrollable { |
| 94 border-bottom: var(--scroll-border); | 94 border-bottom: var(--scroll-border); |
| 95 } | 95 } |
| 96 | 96 |
| 97 .body-container.top-scrollable { | 97 .body-container.top-scrollable { |
| 98 border-top: var(--scroll-border); | 98 border-top: var(--scroll-border); |
| 99 } | 99 } |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 138 <div class="body-container"> | 138 <div class="body-container"> |
| 139 <span id="bodyTopMarker"></span> | 139 <span id="bodyTopMarker"></span> |
| 140 <content select=".body"></content> | 140 <content select=".body"></content> |
| 141 <span id="bodyBottomMarker"></span> | 141 <span id="bodyBottomMarker"></span> |
| 142 </div> | 142 </div> |
| 143 <content select=".button-container"></content> | 143 <content select=".button-container"></content> |
| 144 <content select=".footer"></content> | 144 <content select=".footer"></content> |
| 145 </template> | 145 </template> |
| 146 <script src="cr_dialog.js"></script> | 146 <script src="cr_dialog.js"></script> |
| 147 </dom-module> | 147 </dom-module> |
| OLD | NEW |