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