| 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/iron-icons/iron-icons.h
tml"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h
tml"> |
| 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/p
aper-dialog-behavior.html"> | 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/p
aper-dialog-behavior.html"> |
| 4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/p
aper-dialog-shared-styles.html"> | 4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/p
aper-dialog-shared-styles.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 | 6 |
| 7 <dom-module id="settings-dialog"> | 7 <dom-module id="settings-dialog"> |
| 8 <template> | 8 <template> |
| 9 <style include="paper-dialog-shared-styles"></style> | 9 <style include="paper-dialog-shared-styles"></style> |
| 10 <style> | 10 <style> |
| 11 .body-content { | 11 .body-content { |
| 12 display: flex; | 12 display: flex; |
| 13 flex-direction: column; | 13 flex-direction: column; |
| 14 font-size: 1em; | |
| 15 min-height: 120px; | 14 min-height: 120px; |
| 16 } | 15 } |
| 17 | 16 |
| 18 .dialog-content { | 17 .dialog-content { |
| 19 -webkit-padding-end: 0; | 18 -webkit-padding-end: 0; |
| 20 -webkit-padding-start: 0; | 19 -webkit-padding-start: 0; |
| 21 margin-bottom: 0; | 20 margin-bottom: 0; |
| 22 margin-top: 0; | 21 margin-top: 0; |
| 23 } | 22 } |
| 24 | 23 |
| (...skipping 10 matching lines...) Expand all Loading... |
| 35 } | 34 } |
| 36 | 35 |
| 37 paper-icon-button { | 36 paper-icon-button { |
| 38 height: 20px; | 37 height: 20px; |
| 39 margin: 16px; | 38 margin: 16px; |
| 40 padding: 0; | 39 padding: 0; |
| 41 width: 20px; | 40 width: 20px; |
| 42 } | 41 } |
| 43 | 42 |
| 44 :host { | 43 :host { |
| 44 border-radius: 2px; |
| 45 max-width: 800px; | 45 max-width: 800px; |
| 46 min-width: 512px; | 46 min-width: 512px; |
| 47 overflow: auto; | 47 overflow: auto; |
| 48 } | 48 } |
| 49 | 49 |
| 50 :host ::content .body, |
| 51 :host ::content .footer, |
| 52 :host ::content paper-button { |
| 53 font-size: 92.86%; /* (13px / 14px) * 100 */ |
| 54 } |
| 55 |
| 50 :host ::content .body { | 56 :host ::content .body { |
| 51 flex: 1; | |
| 52 margin: 12px 0 24px 0; | 57 margin: 12px 0 24px 0; |
| 53 } | 58 } |
| 54 | 59 |
| 55 :host ::content .button-container { | 60 :host ::content .button-container { |
| 61 -webkit-padding-end: 16px; |
| 62 -webkit-padding-start: 16px; |
| 56 display: flex; | 63 display: flex; |
| 57 justify-content: flex-end; | 64 justify-content: flex-end; |
| 58 margin-bottom: 12px; | 65 margin-bottom: 12px; |
| 59 } | 66 } |
| 60 | 67 |
| 61 :host ::content .button-container .cancel-button { | 68 :host ::content .button-container .cancel-button { |
| 62 -webkit-margin-end: 8px; | 69 -webkit-margin-end: 8px; |
| 63 color: var(--paper-grey-600); | 70 color: var(--paper-grey-600); |
| 64 font-weight: 500; | 71 font-weight: 500; |
| 65 } | 72 } |
| 66 | 73 |
| 67 :host ::content .footer { | 74 :host ::content .footer { |
| 68 background-color: var(--paper-grey-200); | 75 background-color: var(--paper-grey-200); |
| 69 margin: 0; | 76 margin: 0; |
| 70 padding: 20px; | 77 padding: 20px; |
| 71 } | 78 } |
| 72 | 79 |
| 73 :host ::content .row { | 80 :host ::content .row { |
| 74 align-items: center; | 81 align-items: center; |
| 75 display: flex; | 82 display: flex; |
| 76 min-height: 40px; | 83 min-height: 40px; |
| 77 } | 84 } |
| 78 | 85 |
| 79 :host ::content .row .start { | 86 :host ::content .row .start { |
| 80 flex: 1; | 87 flex: 1; |
| 81 } | 88 } |
| 82 | 89 |
| 83 :host ::content .title { | 90 :host ::content .title { |
| 84 flex: 1; | |
| 85 font-size: 114.28%; /* (16px / 14px) * 100 */ | 91 font-size: 114.28%; /* (16px / 14px) * 100 */ |
| 86 } | 92 } |
| 87 | 93 |
| 88 :host ::content .title, | 94 :host ::content .body, |
| 89 .body-content { | 95 :host ::content .title { |
| 90 -webkit-padding-end: 24px; | 96 -webkit-padding-end: 24px; |
| 91 -webkit-padding-start: 24px; | 97 -webkit-padding-start: 24px; |
| 98 flex: 1; |
| 92 } | 99 } |
| 93 </style> | 100 </style> |
| 94 <div class="dialog-content"> | 101 <div class="dialog-content"> |
| 95 <div class="top-row"> | 102 <div class="top-row"> |
| 96 <content select=".title"></content> | 103 <content select=".title"></content> |
| 97 <paper-icon-button icon="clear" on-tap="cancel" id="close"> | 104 <paper-icon-button icon="clear" on-tap="cancel" id="close"> |
| 98 </paper-icon-button> | 105 </paper-icon-button> |
| 99 </div> | 106 </div> |
| 100 <div class="body-content"> | 107 <div class="body-content"> |
| 101 <content select=".body"></content> | 108 <content select=".body"></content> |
| 102 <content select=".button-container"></content> | 109 <content select=".button-container"></content> |
| 103 </div> | 110 </div> |
| 104 </div> | 111 </div> |
| 105 <div class="footer-container"> | 112 <div class="footer-container"> |
| 106 <content select=".footer"></content> | 113 <content select=".footer"></content> |
| 107 </div> | 114 </div> |
| 108 </template> | 115 </template> |
| 109 <script src="settings_dialog.js"></script> | 116 <script src="settings_dialog.js"></script> |
| 110 </dom-module> | 117 </dom-module> |
| OLD | NEW |