| 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-flex-layout/classe
s/iron-flex-layout.html"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classe
s/iron-flex-layout.html"> |
| 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/pap
er-toggle-button.html"> | 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/pap
er-toggle-button.html"> |
| 4 | 4 |
| 5 <dom-module name="oobe-a11y-option"> | 5 <dom-module name="oobe-a11y-option"> |
| 6 <template> | 6 <template> |
| 7 <style> |
| 8 :root { |
| 9 --oobe-toggle-button-size: { |
| 10 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); |
| 11 height: 16px; |
| 12 top: -2px; |
| 13 width: 16px; |
| 14 }; |
| 15 --oobe-toggle-bar-size: { |
| 16 height: 12px; |
| 17 left: 4px; |
| 18 width: 24px; |
| 19 }; |
| 20 --paper-toggle-button-checked-bar: var(--oobe-toggle-bar-size); |
| 21 --paper-toggle-button-checked-button: { |
| 22 @apply(--oobe-toggle-button-size); |
| 23 transform: translate(14px, 0); |
| 24 }; |
| 25 --paper-toggle-button-label-spacing: 0; |
| 26 --paper-toggle-button-unchecked-bar: var(--oobe-toggle-bar-size); |
| 27 --paper-toggle-button-unchecked-button: |
| 28 var(--oobe-toggle-button-size); |
| 29 } |
| 30 </style> |
| 7 <link rel="stylesheet" href="oobe_a11y_option.css"> | 31 <link rel="stylesheet" href="oobe_a11y_option.css"> |
| 8 <div id="elementBox" class="layout horizontal"> | 32 <div id="elementBox" class="layout horizontal"> |
| 9 <div class="flex layout vertical center-justified"> | 33 <div class="flex layout vertical center-justified"> |
| 10 <div id="titleContainer"> | 34 <div id="titleContainer"> |
| 11 <content select=".title"></content> | 35 <content select=".title"></content> |
| 12 </div> | 36 </div> |
| 13 <div class="display-value" hidden="[[!checked]]"> | 37 <div class="display-value" hidden="[[!checked]]"> |
| 14 <content select=".checked-value"></content> | 38 <content select=".checked-value"></content> |
| 15 </div> | 39 </div> |
| 16 <div class="display-value" hidden="[[checked]]"> | 40 <div class="display-value" hidden="[[checked]]"> |
| 17 <content select=".unchecked-value"></content> | 41 <content select=".unchecked-value"></content> |
| 18 </div> | 42 </div> |
| 19 </div> | 43 </div> |
| 20 <paper-toggle-button checked="{{checked}}" aria-label$="[[ariaLabel]]"> | 44 <paper-toggle-button checked="{{checked}}" aria-label$="[[ariaLabel]]"> |
| 21 </paper-toggle-button> | 45 </paper-toggle-button> |
| 22 </div> | 46 </div> |
| 23 </template> | 47 </template> |
| 24 </dom-module> | 48 </dom-module> |
| OLD | NEW |