You are here

Home » API reference » Commerce Ajax Add to Cart 7.2

dc_ajax_add_cart.css in Commerce Ajax Add to Cart 7.2

Same filename and directory in other branches
  1. 7 css/dc_ajax_add_cart.css
.add-to-cart-overlay {
  background-image: url(../images/overlay.png);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}

.add-cart-message-wrapper {
  background-color: #fff;
  border: 2px solid #ccc;
  color: #7f7f7f;
  border-radius: 20px;
  left: 30%;
  padding: 20px;
  position: fixed;
  box-shadow: 0 1px 5px #333;
  right: 30%;
  top: 100px;
  z-index: 101;
}

.add-to-cart-close {
  background: url(../images/cancel.png) no-repeat;
  cursor: pointer;
  float: right;
  height: 26px;
  margin-right: -30px;
  margin-top: -30px;
  width: 26px;
}

.shopping-cart-header th {
  font-size: 15px;
  font-weight: bold;
}

.option-button-wrapper {
  float: right;
}

.option-button {
  cursor: pointer;
  margin-bottom: 20px;
  padding: 5px 10px;
  text-align: center;
}

.option-button.checkout {
  background-color: #bbdcff;
}

.option-button.continue {
  background-color: #969696;
  font-weight: bold;
  color: #fff;
}

.option-button.checkout a {
  font-weight: bold;
  color: #626262;
}

.new-item-details {
  float: left;
  margin-top: 20px;
}

.new-item-details div {
  margin-bottom: 10px;
}

.new-item-details p {
  display: inline-block;
  margin-bottom: 0;
}

.cart-image,
.cart-product-quantity,
.cart-product-total {
  float: left;
  margin-right: 10px;
}

.ajax-shopping-cart-wrapper {
  width: 370px;
}

.ajax-shopping-cart-table {
  width: 100%;
}

.ajax-shopping-cart-total {
  float: left;
}

.ajax-shopping-cart-checkout {
  float: right;
}

.ajax-shopping-cart-shipping {
  clear: both;
  float: left;
  margin-bottom: 10px;
}

File

css/dc_ajax_add_cart.css
View source 
  1. .add-to-cart-overlay {

  2.   background-image: url(../images/overlay.png);

  3.   bottom: 0;

  4.   left: 0;

  5.   position: fixed;

  6.   right: 0;

  7.   top: 0;

  8.   z-index: 100;

  9. }

  10. 

  11. .add-cart-message-wrapper {

  12.   background-color: #fff;

  13.   border: 2px solid #ccc;

  14.   color: #7f7f7f;

  15.   border-radius: 20px;

  16.   left: 30%;

  17.   padding: 20px;

  18.   position: fixed;

  19.   box-shadow: 0 1px 5px #333;

  20.   right: 30%;

  21.   top: 100px;

  22.   z-index: 101;

  23. }

  24. 

  25. .add-to-cart-close {

  26.   background: url(../images/cancel.png) no-repeat;

  27.   cursor: pointer;

  28.   float: right;

  29.   height: 26px;

  30.   margin-right: -30px;

  31.   margin-top: -30px;

  32.   width: 26px;

  33. }

  34. 

  35. .shopping-cart-header th {

  36.   font-size: 15px;

  37.   font-weight: bold;

  38. }

  39. 

  40. .option-button-wrapper {

  41.   float: right;

  42. }

  43. 

  44. .option-button {

  45.   cursor: pointer;

  46.   margin-bottom: 20px;

  47.   padding: 5px 10px;

  48.   text-align: center;

  49. }

  50. 

  51. .option-button.checkout {

  52.   background-color: #bbdcff;

  53. }

  54. 

  55. .option-button.continue {

  56.   background-color: #969696;

  57.   font-weight: bold;

  58.   color: #fff;

  59. }

  60. 

  61. .option-button.checkout a {

  62.   font-weight: bold;

  63.   color: #626262;

  64. }

  65. 

  66. .new-item-details {

  67.   float: left;

  68.   margin-top: 20px;

  69. }

  70. 

  71. .new-item-details div {

  72.   margin-bottom: 10px;

  73. }

  74. 

  75. .new-item-details p {

  76.   display: inline-block;

  77.   margin-bottom: 0;

  78. }

  79. 

  80. .cart-image,

  81. .cart-product-quantity,

  82. .cart-product-total {

  83.   float: left;

  84.   margin-right: 10px;

  85. }

  86. 

  87. .ajax-shopping-cart-wrapper {

  88.   width: 370px;

  89. }

  90. 

  91. .ajax-shopping-cart-table {

  92.   width: 100%;

  93. }

  94. 

  95. .ajax-shopping-cart-total {

  96.   float: left;

  97. }

  98. 

  99. .ajax-shopping-cart-checkout {

  100.   float: right;

  101. }

  102. 

  103. .ajax-shopping-cart-shipping {

  104.   clear: both;

  105.   float: left;

  106.   margin-bottom: 10px;

  107. }