From ea88bf94280419270ab1df6178cb032ac3a26ce7 Mon Sep 17 00:00:00 2001
From: Keanu Lee <keanulee@google.com>
Date: Mon, 16 May 2016 16:48:24 -0700
Subject: [PATCH 1/2] Replace switch with checkbox

---
 src/shop-checkbox.html |  91 ++++++++++++++++++++++++++++++++++
 src/shop-checkout.html |  13 ++---
 src/shop-switch.html   | 108 -----------------------------------------
 3 files changed, 98 insertions(+), 114 deletions(-)
 create mode 100644 src/shop-checkbox.html
 delete mode 100644 src/shop-switch.html

diff --git a/src/shop-checkbox.html b/src/shop-checkbox.html
new file mode 100644
index 00000000..a82f8b1f
--- /dev/null
+++ b/src/shop-checkbox.html
@@ -0,0 +1,91 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<dom-module id="shop-checkbox">
+  <template>
+    <style>
+
+      shop-checkbox {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        position: relative;
+      }
+
+      shop-checkbox > input[type=checkbox] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        opacity: 0;
+      }
+
+      /* Unchecked state background */
+      shop-checkbox > shop-md-decorator {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: none;
+        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23172C50%22%20d%3D%22M19%205v14H5V5h14m0-2H5c-1.1%200-2%20.9-2%202v14c0%201.1.9%202%202%202h14c1.1%200%202-.9%202-2V5c0-1.1-.9-2-2-2z%22%2F%3E%3C%2Fsvg%3E');
+      }
+
+      /* Checked state overlay */
+      shop-checkbox > shop-md-decorator::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        content: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23172C50%22%20d%3D%22M19%203H5c-1.11%200-2%20.9-2%202v14c0%201.1.89%202%202%202h14c1.11%200%202-.9%202-2V5c0-1.1-.89-2-2-2zm-9%2014l-5-5%201.41-1.41L10%2014.17l7.59-7.59L19%208l-9%209z%22%2F%3E%3C%2Fsvg%3E');
+        -webkit-transform: scale3d(0, 0, 0);
+        transform: scale3d(0, 0, 0);
+        transition: -webkit-transform 0.1s ease-out;
+        transition: transform 0.1s ease-out;
+        will-change: transform;
+      }
+
+      shop-checkbox > input[type=checkbox]:checked + shop-md-decorator::after {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+      }
+
+      /* Focused state */
+      shop-checkbox > shop-md-decorator::before {
+        content: '';
+        pointer-events: none;
+        position: absolute;
+        top: -8px;
+        left: -8px;
+        width: 40px;
+        height: 40px;
+        background-color: var(--app-accent-color);
+        border-radius: 50%;
+        opacity: 0.2;
+        -webkit-transform: scale3d(0, 0, 0);
+        transform: scale3d(0, 0, 0);
+        transition: -webkit-transform 0.1s ease-out;
+        transition: transform 0.1s ease-out;
+        will-change: transform;
+      }
+
+      shop-checkbox > input[type=checkbox]:focus + shop-md-decorator::before {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+      }
+
+    </style>
+  </template>
+</dom-module>
diff --git a/src/shop-checkout.html b/src/shop-checkout.html
index c5f2f6d4..bef64ccc 100644
--- a/src/shop-checkout.html
+++ b/src/shop-checkout.html
@@ -16,7 +16,7 @@
 <link rel="import" href="shop-form-styles.html">
 <link rel="import" href="shop-input.html">
 <link rel="import" href="shop-select.html">
-<link rel="import" href="shop-switch.html">
+<link rel="import" href="shop-checkbox.html">
 
 <!-- resources loaded by lazy-resources.html -->
 <!--
@@ -29,7 +29,7 @@
 <dom-module id="shop-checkout">
 
   <template>
-    <style include="shop-common-styles shop-button shop-form-styles shop-input shop-select shop-switch">
+    <style include="shop-common-styles shop-button shop-form-styles shop-input shop-select shop-checkbox">
 
       .main-frame {
         transition: opacity 0.5s;
@@ -54,12 +54,13 @@
       }
 
       .billing-address-picker {
-        margin: 30px 0;
+        margin: 26px 0;
+        @apply(--layout-horizontal);
+        @apply(--layout-center);
       }
 
       .billing-address-picker > label {
         margin-left: 10px;
-        vertical-align: middle;
       }
 
       .grid {
@@ -224,11 +225,11 @@ <h2 id="shipAddressHeading">Shipping Address</h2>
                 </div>
                 <h2 id="billAddressHeading">Billing Address</h2>
                 <div class="billing-address-picker">
-                  <shop-switch>
+                  <shop-checkbox>
                     <input type="checkbox" id="setBilling" name="setBilling"
                         checked$="[[hasBillingAddress]]" on-change="_toggleBillingAddress">
                     <shop-md-decorator></shop-md-decorator aria-hidden="true">
-                  </shop-switch>
+                  </shop-checkbox>
                   <label for="setBilling">Use different billing address</label>
                 </div>
                 <div hidden$="[[!hasBillingAddress]]">
diff --git a/src/shop-switch.html b/src/shop-switch.html
deleted file mode 100644
index 7139cd25..00000000
--- a/src/shop-switch.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!--
-@license
-Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<link rel="import" href="../bower_components/polymer/polymer.html">
-
-<dom-module id="shop-switch">
-  <template>
-    <style>
-
-      shop-switch {
-        display: inline-block;
-        isolation: isolate;
-        width: 36px;
-        height: 16px;
-        background-color: #ccc;
-        position: relative;
-        border-radius: 8px;
-        vertical-align: middle;
-        -webkit-transform: translateZ(0);
-        transform: translateZ(0);
-      }
-
-      shop-switch > shop-md-decorator {
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border-radius: 8px;
-        pointer-events: none;
-      }
-
-      shop-switch > shop-md-decorator::after {
-        content: '';
-        display: block;
-        pointer-events: none;
-        position: absolute;
-        top: -3px;
-        left: -3px;
-        width: 22px;
-        height: 22px;
-        background-color: white;
-        border-radius: 50%;
-        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
-        -webkit-transform: translateZ(0);
-        transform: translateZ(0);
-        transition: -webkit-transform 0.1s ease-out;
-        transition: transform 0.1s ease-out;
-      }
-
-      shop-switch > shop-md-decorator::before {
-        content: '';
-        display: block;
-        pointer-events: none;
-        position: absolute;
-        top: -11px;
-        left: -11px;
-        width: 38px;
-        height: 38px;
-        background-color: var(--app-accent-color);
-        border-radius: 50%;
-        opacity: 0;
-        -webkit-transform: scale3d(0, 0, 0);
-        transform: scale3d(0, 0, 0);
-        transition-properties: -webkit-transform, opacity;
-        transition-properties: transform, opacity;
-        transition-duration: 0.1s;
-        transition-timing-function: ease-out;
-      }
-
-      shop-switch > input[type=checkbox]:focus + shop-md-decorator::before {
-        opacity: 0.3;
-        -webkit-transform: scale3d(1, 1, 1);
-        transform: scale3d(1, 1, 1);
-      }
-
-      shop-switch > input[type=checkbox] {
-        width: 100%;
-        height: 44px;
-        position: absolute;
-        top: -15px;
-        left: -4px;
-        opacity: 0;
-      }
-
-      shop-switch > input[type=checkbox]:checked + shop-md-decorator::after {
-        -webkit-transform: translate3d(22px, 0px, 0px);
-        transform: translate3d(22px, 0px, 0px);
-        background-color: var(--app-accent-color);
-      }
-
-      shop-switch > input[type=checkbox]:checked + shop-md-decorator::before {
-        -webkit-transform: translate3d(22px, 0px, 0px);
-        transform: translate3d(22px, 0px, 0px);
-        background-color: var(--app-accent-color);
-      }
-
-    </style>
-  </template>
-</dom-module>

From 09ae1501641142343f25ebdf83189e96fc2b2b36 Mon Sep 17 00:00:00 2001
From: Keanu Lee <keanulee@google.com>
Date: Tue, 17 May 2016 09:45:27 -0700
Subject: [PATCH 2/2] Use opacity and border in checkbox

---
 src/shop-checkbox.html | 43 ++++++++++++++++++------------------------
 src/shop-checkout.html |  6 +++---
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/shop-checkbox.html b/src/shop-checkbox.html
index a82f8b1f..b637efdb 100644
--- a/src/shop-checkbox.html
+++ b/src/shop-checkbox.html
@@ -16,9 +16,11 @@
 
       shop-checkbox {
         display: inline-block;
-        width: 24px;
-        height: 24px;
+        width: 14px;
+        height: 14px;
         position: relative;
+        border: 2px solid var(--app-accent-color);
+        border-radius: 2px;
       }
 
       shop-checkbox > input[type=checkbox] {
@@ -31,35 +33,26 @@
         opacity: 0;
       }
 
-      /* Unchecked state background */
       shop-checkbox > shop-md-decorator {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
         pointer-events: none;
-        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23172C50%22%20d%3D%22M19%205v14H5V5h14m0-2H5c-1.1%200-2%20.9-2%202v14c0%201.1.9%202%202%202h14c1.1%200%202-.9%202-2V5c0-1.1-.9-2-2-2z%22%2F%3E%3C%2Fsvg%3E');
       }
 
       /* Checked state overlay */
       shop-checkbox > shop-md-decorator::after {
+        content: '';
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        content: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23172C50%22%20d%3D%22M19%203H5c-1.11%200-2%20.9-2%202v14c0%201.1.89%202%202%202h14c1.11%200%202-.9%202-2V5c0-1.1-.89-2-2-2zm-9%2014l-5-5%201.41-1.41L10%2014.17l7.59-7.59L19%208l-9%209z%22%2F%3E%3C%2Fsvg%3E');
-        -webkit-transform: scale3d(0, 0, 0);
-        transform: scale3d(0, 0, 0);
-        transition: -webkit-transform 0.1s ease-out;
-        transition: transform 0.1s ease-out;
-        will-change: transform;
+        top: -5px;
+        left: -5px;
+        right: -5px;
+        bottom: -5px;
+        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23172C50%22%20d%3D%22M19%203H5c-1.11%200-2%20.9-2%202v14c0%201.1.89%202%202%202h14c1.11%200%202-.9%202-2V5c0-1.1-.89-2-2-2zm-9%2014l-5-5%201.41-1.41L10%2014.17l7.59-7.59L19%208l-9%209z%22%2F%3E%3C%2Fsvg%3E');
+        opacity: 0;
+        transition: opacity 0.1s;
+        will-change: opacity;
       }
 
       shop-checkbox > input[type=checkbox]:checked + shop-md-decorator::after {
-        -webkit-transform: scale3d(1, 1, 1);
-        transform: scale3d(1, 1, 1);
+        opacity: 1;
       }
 
       /* Focused state */
@@ -67,8 +60,8 @@
         content: '';
         pointer-events: none;
         position: absolute;
-        top: -8px;
-        left: -8px;
+        top: -13px;
+        left: -13px;
         width: 40px;
         height: 40px;
         background-color: var(--app-accent-color);
@@ -76,8 +69,8 @@
         opacity: 0.2;
         -webkit-transform: scale3d(0, 0, 0);
         transform: scale3d(0, 0, 0);
-        transition: -webkit-transform 0.1s ease-out;
-        transition: transform 0.1s ease-out;
+        transition: -webkit-transform 0.1s;
+        transition: transform 0.1s;
         will-change: transform;
       }
 
diff --git a/src/shop-checkout.html b/src/shop-checkout.html
index bef64ccc..fc846c88 100644
--- a/src/shop-checkout.html
+++ b/src/shop-checkout.html
@@ -54,13 +54,13 @@
       }
 
       .billing-address-picker {
-        margin: 26px 0;
+        margin: 28px 0;
+        height: 20px;
         @apply(--layout-horizontal);
-        @apply(--layout-center);
       }
 
       .billing-address-picker > label {
-        margin-left: 10px;
+        margin-left: 12px;
       }
 
       .grid {