You are here

Home » API reference » Commerce Braintree 7.2

commerce_braintree_hostedfields.css in Commerce Braintree 7.2

Same filename and directory in other branches
  1. 7.3 modules/commerce_braintree_hostedfields/css/commerce_braintree_hostedfields.css
/* Commerce Braintree Hosted Fields -- Default Styles */
.braintree-form {
  overflow: hidden;
  margin: 1rem 0;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}

.braintree-form #edit-commerce-payment-payment-details-braintree-number,
.braintree-form #edit-commerce-payment-payment-details-braintree-cvv {
  width: auto;
}

.braintree-form .payment-details-method-title,
.braintree-form .paypal-method-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.braintree-form .form-item {
  margin-bottom: .5rem;
}

.braintree-form #edit-commerce-payment-payment-details-braintree-cc,
.braintree-form #edit-commerce-payment-payment-details-braintree-paypal,
.braintree-form #edit-payment-details-braintree-cc,
.braintree-form #edit-payment-details-braintree-paypal,
.braintree-form #edit-cc,
.braintree-form #edit-paypal {
  padding: 1rem 0;
}

.braintree-form #edit-commerce-payment-payment-details-braintree-paypal,
.braintree-form #edit-payment-details-braintree-paypal,
.braintree-form #edit-paypal{
  border-top: 1px solid #ececec;
}

.braintree-form #edit-commerce-payment-payment-details-braintree-cc-expiration .form-type-item,
.braintree-form #edit-payment-details-braintree-cc-expiration .form-type-item,
.braintree-form #edit-expiration .form-type-item {
  padding: 0;
}

.braintree-form .commerce-month-year-divider {
  display: none;
}

.braintree-hosted-field {
  height: 1.2em;
  border: 1px solid #D6D2C4;
  padding: 5px;
  background: #FFF;
  box-sizing: content-box;
  width: auto;
}

.braintree-hosted-fields-focused {
  border-color: #777;
}

.braintree-hosted-fields-invalid {
  border-color: red;
}

.braintree-hosted-fields-valid {
  border-color: limegreen;
}

/* Commerce Braintree Hosted Fields -- Responsive Styles */
@media only screen and (min-width: 768px) {
  .braintree-form {
    display: flex;
  }

  .braintree-form #edit-commerce-payment-payment-details-braintree-cc,
  .braintree-form #edit-commerce-payment-payment-details-braintree-paypal,
  .braintree-form #edit-payment-details-braintree-cc,
  .braintree-form #edit-payment-details-braintree-paypal,
  .braintree-form #edit-cc,
  .braintree-form #edit-paypal {
    border: none;
    width: calc(50% - 1rem - 1px);
    display: block;
    float: left;
  }

  .braintree-form #edit-commerce-payment-payment-details-braintree-cc,
  .braintree-form #edit-payment-details-braintree-cc,
  .braintree-form #edit-cc {
    padding-right: 1rem;
  }

  .braintree-form #edit-commerce-payment-payment-details-braintree-paypal,
  .braintree-form #edit-payment-details-braintree-paypal,
  .braintree-form #edit-paypal {
    padding-left: 1rem;
    border-left: 1px solid #ececec;
  }

  .braintree-form #edit-commerce-payment-payment-details-braintree-cc-expiration,
  .braintree-form #edit-payment-details-braintree-cc-expiration,
  .braintree-form #edit-expiration {
    display: flex;
  }

  .braintree-form #edit-commerce-payment-payment-details-braintree-cc-expiration .form-type-item,
  .braintree-form #edit-payment-details-braintree-cc-expiration .form-type-item,
  .braintree-form #edit-expiration .form-type-item {
    flex-grow: 2;
  }

  .braintree-form .commerce-month-year-divider {
    display: block;
    margin: auto 1rem .5rem 1rem;
    width: .75rem;
    text-align: center;
    line-height: 1.2em;
    height: 1.2em;
    padding: 5px 0;
  }
}

File

modules/commerce_braintree_hostedfields/css/commerce_braintree_hostedfields.css
View source 
  1. /* Commerce Braintree Hosted Fields -- Default Styles */

  2. .braintree-form {

  3.   overflow: hidden;

  4.   margin: 1rem 0;

  5.   border-top: 1px solid #ececec;

  6.   border-bottom: 1px solid #ececec;

  7. }

  8. 

  9. .braintree-form #edit-commerce-payment-payment-details-braintree-number,

  10. .braintree-form #edit-commerce-payment-payment-details-braintree-cvv {

  11.   width: auto;

  12. }

  13. 

  14. .braintree-form .payment-details-method-title,

  15. .braintree-form .paypal-method-title {

  16.   font-size: 1.25rem;

  17.   margin-bottom: 1rem;

  18.   font-weight: bold;

  19. }

  20. 

  21. .braintree-form .form-item {

  22.   margin-bottom: .5rem;

  23. }

  24. 

  25. .braintree-form #edit-commerce-payment-payment-details-braintree-cc,

  26. .braintree-form #edit-commerce-payment-payment-details-braintree-paypal,

  27. .braintree-form #edit-payment-details-braintree-cc,

  28. .braintree-form #edit-payment-details-braintree-paypal,

  29. .braintree-form #edit-cc,

  30. .braintree-form #edit-paypal {

  31.   padding: 1rem 0;

  32. }

  33. 

  34. .braintree-form #edit-commerce-payment-payment-details-braintree-paypal,

  35. .braintree-form #edit-payment-details-braintree-paypal,

  36. .braintree-form #edit-paypal{

  37.   border-top: 1px solid #ececec;

  38. }

  39. 

  40. .braintree-form #edit-commerce-payment-payment-details-braintree-cc-expiration .form-type-item,

  41. .braintree-form #edit-payment-details-braintree-cc-expiration .form-type-item,

  42. .braintree-form #edit-expiration .form-type-item {

  43.   padding: 0;

  44. }

  45. 

  46. .braintree-form .commerce-month-year-divider {

  47.   display: none;

  48. }

  49. 

  50. .braintree-hosted-field {

  51.   height: 1.2em;

  52.   border: 1px solid #D6D2C4;

  53.   padding: 5px;

  54.   background: #FFF;

  55.   box-sizing: content-box;

  56.   width: auto;

  57. }

  58. 

  59. .braintree-hosted-fields-focused {

  60.   border-color: #777;

  61. }

  62. 

  63. .braintree-hosted-fields-invalid {

  64.   border-color: red;

  65. }

  66. 

  67. .braintree-hosted-fields-valid {

  68.   border-color: limegreen;

  69. }

  70. 

  71. /* Commerce Braintree Hosted Fields -- Responsive Styles */

  72. @media only screen and (min-width: 768px) {

  73.   .braintree-form {

  74.     display: flex;

  75.   }

  76. 

  77.   .braintree-form #edit-commerce-payment-payment-details-braintree-cc,

  78.   .braintree-form #edit-commerce-payment-payment-details-braintree-paypal,

  79.   .braintree-form #edit-payment-details-braintree-cc,

  80.   .braintree-form #edit-payment-details-braintree-paypal,

  81.   .braintree-form #edit-cc,

  82.   .braintree-form #edit-paypal {

  83.     border: none;

  84.     width: calc(50% - 1rem - 1px);

  85.     display: block;

  86.     float: left;

  87.   }

  88. 

  89.   .braintree-form #edit-commerce-payment-payment-details-braintree-cc,

  90.   .braintree-form #edit-payment-details-braintree-cc,

  91.   .braintree-form #edit-cc {

  92.     padding-right: 1rem;

  93.   }

  94. 

  95.   .braintree-form #edit-commerce-payment-payment-details-braintree-paypal,

  96.   .braintree-form #edit-payment-details-braintree-paypal,

  97.   .braintree-form #edit-paypal {

  98.     padding-left: 1rem;

  99.     border-left: 1px solid #ececec;

  100.   }

  101. 

  102.   .braintree-form #edit-commerce-payment-payment-details-braintree-cc-expiration,

  103.   .braintree-form #edit-payment-details-braintree-cc-expiration,

  104.   .braintree-form #edit-expiration {

  105.     display: flex;

  106.   }

  107. 

  108.   .braintree-form #edit-commerce-payment-payment-details-braintree-cc-expiration .form-type-item,

  109.   .braintree-form #edit-payment-details-braintree-cc-expiration .form-type-item,

  110.   .braintree-form #edit-expiration .form-type-item {

  111.     flex-grow: 2;

  112.   }

  113. 

  114.   .braintree-form .commerce-month-year-divider {

  115.     display: block;

  116.     margin: auto 1rem .5rem 1rem;

  117.     width: .75rem;

  118.     text-align: center;

  119.     line-height: 1.2em;

  120.     height: 1.2em;

  121.     padding: 5px 0;

  122.   }

  123. }