Last active
September 5, 2016 17:46
-
-
Save monecchi/042b0db481f93f30b13e495272945d84 to your computer and use it in GitHub Desktop.
Cielo WooCommerce - Webservice - Credit Card Icons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Cielo WooCommerce Webservice - Credit Card brand icons on input background | |
| * by Adriano Monecchi - Twitter: @dico_monecchi | |
| * Download Cielo Credit Card Icons sprite images bellow: | |
| * Cielo Credit Cards: https://cldup.com/UrOOO8uMsm.png | |
| * Cielo Debit Card: https://cldup.com/LrSaBXSM-Z.png | |
| * See Demo: http://pizzariameurancho.co.nf/home/checkout/ | |
| */ | |
| /* Cielo Credit Cards */ | |
| #cielo-card-number { | |
| background-image: url("../images/cielo-cartoes-credito.png"), url("../images/cielo-cartoes-credito.png") !important; | |
| background-position: 8px -42px, 100% 18px !important; | |
| background-size: 44px 500px, 54px 600px !important; | |
| background-repeat: no-repeat !important; | |
| padding-left: 65px !important; | |
| width: 100% !important; | |
| -moz-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; | |
| -o-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; | |
| -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; | |
| transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; | |
| } | |
| #cielo-card-number.unknown { | |
| background-position: 8px -43px, 100% 19px !important; | |
| } | |
| #cielo-card-number.visa { | |
| background-position: 8px -84px, 100% -16px !important; | |
| } | |
| #cielo-card-number.visa-electron { | |
| background-position: 8px -133px, 100% -16px !important; | |
| } | |
| #cielo-card-number.mastercard { | |
| background-position: 8px -168px, 100% -16px !important; | |
| } | |
| #cielo-card-number.mastercard-maestro { | |
| background-position: 8px -217px, 100% -16px !important; | |
| } | |
| #cielo-card-number.amex { | |
| background-position: 8px -252px, 100% -16px !important; | |
| } | |
| #cielo-card-number.discover { | |
| background-position: 8px -294px, 100% -16px !important; | |
| } | |
| #cielo-card-number.dinersclub { | |
| background-position: 8px -335px, 100% -16px !important; | |
| } | |
| #cielo-card-number.jcb { | |
| background-position: 8px -378px, 100% -16px !important; | |
| } | |
| #cielo-card-number.elo { | |
| background-position: 8px -420px, 100% -16px !important; | |
| } | |
| #cielo-card-number.aura { | |
| background-position: 8px -461px, 100% -16px !important; | |
| } | |
| /* Cielo Debit Cards */ | |
| #cielo-debit-payment-form #cielo-card-number { | |
| background-image: url("../images/cielo-cartoes-debito.png"), url("../images/cielo-cartoes-debito.png") !important; | |
| background-position: 8px -42px, 100% 18px !important; | |
| background-size: 44px 165px, 54px 195px !important; | |
| background-repeat: no-repeat !important; | |
| padding-left: 65px !important; | |
| width: 100% !important; | |
| -moz-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; | |
| -o-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; | |
| -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; | |
| transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; | |
| } | |
| /* Cielo Debit - Visa electron */ | |
| #cielo-debit-payment-form #cielo-card-number.visa { | |
| background-position: 8px -84px, 100% -16px !important; | |
| } | |
| /* Cielo Debit - Maestro */ | |
| #cielo-debit-payment-form #cielo-card-number.mastercard { | |
| background-position: 8px -127px, 100% -16px !important; | |
| } | |
| /* Cielo Debit - Display unknown icon if a credit card number is placed */ | |
| #cielo-debit-payment-form #cielo-card-number.amex, | |
| #cielo-debit-payment-form #cielo-card-number.discover, | |
| #cielo-debit-payment-form #cielo-card-number.dinersclub, | |
| #cielo-debit-payment-form #cielo-card-number.jcb, | |
| #cielo-debit-payment-form #cielo-card-number.elo, | |
| #cielo-debit-payment-form #cielo-card-number.aura { | |
| background-position: 8px -42px, 100% 18px !important; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #cielo-card-number,#cielo-debit-payment-form #cielo-card-number{background-repeat:no-repeat!important;padding-left:65px!important;width:100%!important}#cielo-card-number{background-image:url(../images/cielo-cartoes-credito.png),url(../images/cielo-cartoes-credito.png)!important;background-position:8px -42px,100% 18px!important;background-size:44px 500px,54px 600px!important;-moz-transition:all 1s cubic-bezier(.25,.46,.45,.94)!important;-o-transition:all 1s cubic-bezier(.25,.46,.45,.94)!important;-webkit-transition:all 1s cubic-bezier(.25,.46,.45,.94)!important;transition:all 1s cubic-bezier(.25,.46,.45,.94)!important}#cielo-card-number.unknown{background-position:8px -43px,100% 19px!important}#cielo-card-number.visa{background-position:8px -84px,100% -16px!important}#cielo-card-number.visa-electron{background-position:8px -133px,100% -16px!important}#cielo-card-number.mastercard{background-position:8px -168px,100% -16px!important}#cielo-card-number.mastercard-maestro{background-position:8px -217px,100% -16px!important}#cielo-card-number.amex{background-position:8px -252px,100% -16px!important}#cielo-card-number.discover{background-position:8px -294px,100% -16px!important}#cielo-card-number.dinersclub{background-position:8px -335px,100% -16px!important}#cielo-card-number.jcb{background-position:8px -378px,100% -16px!important}#cielo-card-number.elo{background-position:8px -420px,100% -16px!important}#cielo-card-number.aura{background-position:8px -461px,100% -16px!important}#cielo-debit-payment-form #cielo-card-number{background-image:url(../images/cielo-cartoes-debito.png),url(../images/cielo-cartoes-debito.png)!important;background-position:8px -42px,100% 18px!important;background-size:44px 165px,54px 195px!important;-moz-transition:all 1s cubic-bezier(.25,.46,.45,.94)!important;-o-transition:all 1s cubic-bezier(.25,.46,.45,.94)!important;-webkit-transition:all 1s cubic-bezier(.25,.46,.45,.94)!important;transition:all 1s cubic-bezier(.25,.46,.45,.94)!important}#cielo-debit-payment-form #cielo-card-number.visa{background-position:8px -84px,100% -16px!important}#cielo-debit-payment-form #cielo-card-number.mastercard{background-position:8px -127px,100% -16px!important}#cielo-debit-payment-form #cielo-card-number.amex,#cielo-debit-payment-form #cielo-card-number.aura,#cielo-debit-payment-form #cielo-card-number.dinersclub,#cielo-debit-payment-form #cielo-card-number.discover,#cielo-debit-payment-form #cielo-card-number.elo,#cielo-debit-payment-form #cielo-card-number.jcb{background-position:8px -42px,100% 18px!important} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment