add stripe elements styling guidelines for reference

relates #25
FAC10 · May 9, 2017 · 7dcb94a · 7dcb94a
1 parent 4396403
commit 7dcb94a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 7 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -24,12 +24,6 @@
   background-color: #fefde5 !important;
 }
 
-.test{
-  background-color: red;
-  min-height: 800px;
-}
-
-
 .github-login-button {
   min-height: 60px;
   min-width: 100px;

diff --git a/public/main.css b/public/main.css
diff --git a/src/scss/_stripe-elements-guide.scss b/src/scss/_stripe-elements-guide.scss
@@ -0,0 +1,25 @@
+/**
+ * The CSS shown here will not be introduced in the Quickstart guide, but shows
+ * how you can use CSS to style your Element's container.
+ */
+.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;
+}
+
+.StripeElement--focus {
+  box-shadow: 0 1px 3px 0 #cfd7df;
+}
+
+.StripeElement--invalid {
+  border-color: #fa755a;
+}
+
+.StripeElement--webkit-autofill {
+  background-color: #fefde5 !important;
+}
diff --git a/src/scss/_test.scss b/src/scss/_test.scss
@@ -13,3 +13,13 @@ body {
   min-height: 100px;
   color: red;
 }
+
+
+.github-login-button {
+  min-height: 60px;
+  min-width: 100px;
+  font-size: 1.5em;
+  background: rebeccapurple;
+  color: white;
+  padding: 10px;
+}