|
/* |
|
I love Stripe Checkout, and have been using it for Citationsy (www.citationsy.com) since day one. |
|
Using these CSS styles, you can reset the button in order to style it yourself. |
|
|
|
Keep the reset above the styles, make everything !important, and have fun! |
|
|
|
*/ |
|
|
|
|
|
/* First, we reset the Stripe Button */ |
|
.stripe-button-el{ |
|
overflow:hidden; |
|
display:inline-block; |
|
visibility:visible !important; |
|
background-image:none !important; |
|
-webkit-font-smoothing:antialiased; |
|
border:0 !important; |
|
padding:0 !important; |
|
text-transform: none !important; |
|
text-decoration:none; |
|
letter-spacing: normal; |
|
-webkit-border-radius:0 !important; |
|
-moz-border-radius:0 !important; |
|
-ms-border-radius:0 !important; |
|
-o-border-radius:0 !important; |
|
border-radius:0 !important; |
|
-webkit-box-shadow:none !important; |
|
-moz-box-shadow:none !important; |
|
-ms-box-shadow:none !important; |
|
-o-box-shadow:none !important; |
|
box-shadow:none !important; |
|
-webkit-appearance: none; |
|
-webkit-touch-callout:none; |
|
-webkit-tap-highlight-color:transparent; |
|
-webkit-user-select:none; |
|
-moz-user-select:none; |
|
-ms-user-select:none; |
|
-o-user-select:none; |
|
user-select:none; |
|
cursor:pointer |
|
} |
|
.stripe-button-el::-moz-focus-inner{ |
|
border:0; |
|
padding:0 |
|
} |
|
.stripe-button-el span{ |
|
display:block; |
|
position:relative; |
|
padding:0 !important; |
|
height:30px !important; |
|
line-height:30px !important; |
|
background:#ddd !important; |
|
background-image:none !important; |
|
|
|
font-size:16px !important; |
|
color:#000 !important; |
|
font-weight: normal !important; |
|
font-family: inherit !important; |
|
text-shadow:none !important;; |
|
-webkit-box-shadow:none !important; |
|
-moz-box-shadow:none !important; |
|
-ms-box-shadow:none !important; |
|
-o-box-shadow:none !important; |
|
box-shadow:none !important; |
|
-webkit-border-radius:0 !important; |
|
-moz-border-radius:0 !important; |
|
-ms-border-radius:0 !important; |
|
-o-border-radius:0 !important; |
|
border-radius:0 !important; |
|
} |
|
.stripe-button-el:not(:disabled):active,.stripe-button-el.active{ |
|
background:#ddd !important; |
|
} |
|
.stripe-button-el:not(:disabled):active span,.stripe-button-el.active span{ |
|
color:#000; |
|
background:#ddd; |
|
background-image:none !important; |
|
-webkit-box-shadow:none !important; |
|
-moz-box-shadow:none !important; |
|
-ms-box-shadow:none !important; |
|
-o-box-shadow:none !important; |
|
box-shadow:none !important; |
|
} |
|
.stripe-button-el:disabled,.stripe-button-el.disabled{ |
|
background:#ddd !important; |
|
-webkit-box-shadow:none; |
|
-moz-box-shadow:none; |
|
-ms-box-shadow:none; |
|
-o-box-shadow:none; |
|
box-shadow:none |
|
} |
|
.stripe-button-el:disabled span,.stripe-button-el.disabled span{ |
|
color:#000 !important; |
|
background:#ddd !important; |
|
text-shadow:none !important; |
|
} |
|
|
|
|
|
|
|
/* Then, we style it. These are the components / states. |
|
Remember to make everything !important |
|
This is where we can change colours, padding, add shadows, etc. |
|
*/ |
|
|
|
/* The outside Button */ |
|
.stripe-button-el { |
|
|
|
} |
|
|
|
/* Text inside the button */ |
|
.stripe-button-el span { |
|
|
|
} |
|
|
|
|
|
/* Hover State */ |
|
.stripe-button-el:not(:disabled):hover span { |
|
background: yellow !important; |
|
} |
|
|
|
/* Active State */ |
|
.stripe-button-el:not(:disabled):active span,.stripe-button-el.active span { |
|
background: red !important; |
|
} |
|
|
|
|
|
/* Disabled State */ |
|
.stripe-button-el:disabled span,.stripe-button-el.disabled span{ |
|
background: grey !important; |
|
} |
