Adds a custom-style module

bennypowers · Jan 17, 2018 · cc318bf · cc318bf
1 parent 858cf0a
commit cc318bf
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 35 deletions.
diff --git a/stripe-elements-custom-styles.html b/stripe-elements-custom-styles.html
@@ -0,0 +1,32 @@
+<link rel="import" href="../polymer/lib/elements/custom-style.html">
+
+<custom-style>
+  <style id="stripe-styles" is="custom-style">
+  .StripeElement {
+    background-color: white;
+    padding: 8px 12px;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    box-shadow: 0 1px 3px 0 #e6ebf1;
+    -webkit-transition: box-shadow 150ms ease;
+    transition: box-shadow 150ms ease;
+    min-width: var(--stripe-elements-width, 300px);
+    @apply --stripe-elements-element;
+  }
+
+  .StripeElement--focus {
+    box-shadow: 0 1px 3px 0 #cfd7df;
+    @apply --stripe-elements-element-focus;
+  }
+
+  .StripeElement--invalid {
+    border-color: #fa755a;
+    @apply --stripe-elements-element-invalid;
+  }
+
+  .StripeElement--webkit-autofill {
+    background-color: #fefde5 !important;
+    @apply --stripe-elements-element-webkit-autofill;
+  }
+  </style>
+</custom-style>
diff --git a/stripe-elements.html b/stripe-elements.html
@@ -1,9 +1,9 @@
 <link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../polymer/lib/mixins/template-stamp.html">
-<link rel="import" href="../polymer/lib/elements/custom-style.html">
 <link rel="import" href="../paper-button/paper-button.html">
 <link rel="import" href="../paper-toast/paper-toast.html">
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="./stripe-elements-custom-styles.html">
 
 <dom-module id="stripe-elements">
   <template>
@@ -21,10 +21,6 @@
         display: flex;
       }
 
-      #card {
-        width: 100%;
-      }
-
     </style>
 
     <template id="stripeCardTemplate">
@@ -39,40 +35,12 @@
 
         </form>
       </div>
-      <custom-style>
-        <style id="stripe-styles">
-        .StripeElement {
-          background-color: white;
-          padding: 8px 12px;
-          border-radius: 4px;
-          border: 1px solid transparent;
-          box-shadow: 0 1px 3px 0 #e6ebf1;
-          -webkit-transition: box-shadow 150ms ease;
-          transition: box-shadow 150ms ease;
-          min-width: var(--stripe-elements-width, 300px);
-          @apply --stripe-elements-element;
-        }
-
-        .StripeElement--focus {
-          box-shadow: 0 1px 3px 0 #cfd7df;
-          @apply --stripe-elements-element-focus;
-        }
-
-        .StripeElement--invalid {
-          border-color: #fa755a;
-          @apply --stripe-elements-element-invalid;
-        }
-
-        .StripeElement--webkit-autofill {
-          background-color: #fefde5 !important;
-          @apply --stripe-elements-element-webkit-autofill;
-        }
-        </style>
-      </custom-style>
     </template>
 
     <slot name="stripe-card"></slot>
 
+    <div id="error">[[error.message]]</div>
+
     <paper-toast id="toast"
         text="[[error.message]]"
         duration="Infinity"