You are here

Home » API reference » Commerce add to cart confirmation 7

commerce_add_to_cart_confirmation.css in Commerce add to cart confirmation 7

Same filename and directory in other branches
  1. 1.x css/commerce_add_to_cart_confirmation.css
/**
* Add to cart popin.
*/
/* Overlay */
div.commerce_add_to_cart_confirmation_overlay {
  background: transparent url('../images/bg_add_to_cart_overlay.png') left top;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

div.messages.commerce-add-to-cart-confirmation {
  background-color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  left: 50%;
  margin-left: -30% !important; /* width/2 */
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 450px;
  width: 60%;
  z-index: 1001;
}
div.messages.commerce-add-to-cart-confirmation .message-inner {
  padding: 0 15px 25px;
}
/* Close button */
div.messages.commerce-add-to-cart-confirmation .message-inner .commerce-add-to-cart-confirmation-close {
  background: url('../images/btn_add-to-cart-close.png') no-repeat 0 0;
  display: block;
  height: 17px;
  position: absolute;
  right: 15px; /* LTR */
  top: 15px;
  width: 18px;
}
/* Title */
div.messages.commerce-add-to-cart-confirmation .message-inner .added-product-title {
  float: left; /* LTR */
  font-size: 14px;
  font-weight: bold;
  padding: 10px 30px 10px 20px;
  text-align: center;
  text-transform: uppercase;
  width: 65%;
}

/* Button */
div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper {
  height: 100%;
  padding: 45px 4%;
  position: absolute;
  right: 0; /* LTR */
  top: 0;
  width: 35%;
}
div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper .button a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 10px;
  text-align: center;
  display: block;
  font-weight: bold;
  word-wrap: break-word;
  color: #fff;
}
div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper .button.continue .commerce-add-to-cart-confirmation-close {
  background: #ccc;
  height: auto;
  position: static;
  width: auto;
}
div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper .button.checkout a:hover,
div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper .button.continue a:hover {
  cursor: pointer;
  background-color: #555;
  text-decoration: none;
}

/* Product display */
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display {
  clear: both;
  padding: 15px;
  width: 65%;
}
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display:after {
  clear:both;
}
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .content .field-name-field-images {
  position: absolute;
  top: 0;
  left: -130px;
  width: 130px;
  margin: 0;
  text-align: center;
}
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .commerce-product-sku .commerce-product-sku-label,
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .field .views-label,
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .field .field-label {
  float: left; /* LTR */
  font-weight: bold;
  padding-right: 5px; /* LTR */
}
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .views-field {
  clear: both;
  margin: 0;
  text-align: left; /* LTR */
}
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .field .field-label {
  display: inline;
  float: left; /* LTR */
}
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .views-field-commerce-total {
  clear: both;
  font-size: 20px;
  margin-top: 25px;
}
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .views-field-commerce-total .views-label {
  float: left; /* LTR */
  padding-right: 5px; /* LTR */
}
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .views-field-commerce-total .field-content {
  display: inline;
  float: right; /* LTR */
}

/*
 * Style
 */
/* Overlay */
div.messages.commerce-add-to-cart-confirmation {
  border-color: #6bb0cb;
  -moz-box-shadow: 0 2px 15px #57595a;
  -webkit-box-shadow: 0 2px 15px #57595a;
  box-shadow: 0 2px 15px #57595a;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#57595A', direction='180', strength='5');
  color: #aeaaa5;
}
/* Close button */
div.messages.commerce-add-to-cart-confirmation .message-inner .commerce-add-to-cart-confirmation-close {
  background: url('../images/btn_add-to-cart-close.png') no-repeat 0 0;
}
/* Title */
div.messages.commerce-add-to-cart-confirmation .message-inner .added-product-title {
  color: #2698f2;
}
/* Button */
div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper {
  background-color: #e4eef3;
}
div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper .button.checkout a {
  background-color: #2698f2;
}
/* Product display */
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .content .field-name-field-images img {
  border: #d7d7d7 solid 1px;
}
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .commerce-product-sku .commerce-product-sku-label,
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .field .views-label,
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .field .field-label {
  color: #878380;
}
div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .views-field-commerce-total .field-content {
  color: #2698f2;
}

/*
 * @media rules
 */

@media (max-width: 967px) {
  div.messages.commerce-add-to-cart-confirmation {
    width: 90%;
    margin: 0 !important;
    left: 5%;
  }
  div.messages.commerce-add-to-cart-confirmation .message-inner .added-product-title {
    width: 100%;
	float: none;
  }
  div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper {
    position: relative;
    width: 100%;
    padding: 15px;
    clear: both;
    margin-top: 25px;
  }
  div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display {
    width: 100%;
  }
}

File

css/commerce_add_to_cart_confirmation.css
View source 
  1. /**

  2. * Add to cart popin.

  3. */

  4. /* Overlay */

  5. div.commerce_add_to_cart_confirmation_overlay {

  6.   background: transparent url('../images/bg_add_to_cart_overlay.png') left top;

  7.   height: 100%;

  8.   left: 0;

  9.   position: fixed;

  10.   top: 0;

  11.   width: 100%;

  12.   z-index: 1000;

  13. }

  14. 

  15. div.messages.commerce-add-to-cart-confirmation {

  16.   background-color: #fff;

  17.   -webkit-border-radius: 3px;

  18.   -moz-border-radius: 3px;

  19.   border-radius: 3px;

  20.   left: 50%;

  21.   margin-left: -30% !important; /* width/2 */

  22.   overflow: hidden;

  23.   padding: 0;

  24.   position: absolute;

  25.   width: 450px;

  26.   width: 60%;

  27.   z-index: 1001;

  28. }

  29. div.messages.commerce-add-to-cart-confirmation .message-inner {

  30.   padding: 0 15px 25px;

  31. }

  32. /* Close button */

  33. div.messages.commerce-add-to-cart-confirmation .message-inner .commerce-add-to-cart-confirmation-close {

  34.   background: url('../images/btn_add-to-cart-close.png') no-repeat 0 0;

  35.   display: block;

  36.   height: 17px;

  37.   position: absolute;

  38.   right: 15px; /* LTR */

  39.   top: 15px;

  40.   width: 18px;

  41. }

  42. /* Title */

  43. div.messages.commerce-add-to-cart-confirmation .message-inner .added-product-title {

  44.   float: left; /* LTR */

  45.   font-size: 14px;

  46.   font-weight: bold;

  47.   padding: 10px 30px 10px 20px;

  48.   text-align: center;

  49.   text-transform: uppercase;

  50.   width: 65%;

  51. }

  52. 

  53. /* Button */

  54. div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper {

  55.   height: 100%;

  56.   padding: 45px 4%;

  57.   position: absolute;

  58.   right: 0; /* LTR */

  59.   top: 0;

  60.   width: 35%;

  61. }

  62. div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper:after {

  63.   clear: both;

  64.   content: ".";

  65.   display: block;

  66.   height: 0;

  67.   visibility: hidden;

  68. }

  69. div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper .button a {

  70.   -webkit-border-radius: 5px;

  71.   -moz-border-radius: 5px;

  72.   border-radius: 5px;

  73.   font-weight: bold;

  74.   margin-bottom: 10px;

  75.   padding: 10px;

  76.   text-align: center;

  77.   display: block;

  78.   font-weight: bold;

  79.   word-wrap: break-word;

  80.   color: #fff;

  81. }

  82. div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper .button.continue .commerce-add-to-cart-confirmation-close {

  83.   background: #ccc;

  84.   height: auto;

  85.   position: static;

  86.   width: auto;

  87. }

  88. div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper .button.checkout a:hover,

  89. div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper .button.continue a:hover {

  90.   cursor: pointer;

  91.   background-color: #555;

  92.   text-decoration: none;

  93. }

  94. 

  95. /* Product display */

  96. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display {

  97.   clear: both;

  98.   padding: 15px;

  99.   width: 65%;

  100. }

  101. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display:after {

  102.   clear:both;

  103. }

  104. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .content .field-name-field-images {

  105.   position: absolute;

  106.   top: 0;

  107.   left: -130px;

  108.   width: 130px;

  109.   margin: 0;

  110.   text-align: center;

  111. }

  112. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .commerce-product-sku .commerce-product-sku-label,

  113. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .field .views-label,

  114. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .field .field-label {

  115.   float: left; /* LTR */

  116.   font-weight: bold;

  117.   padding-right: 5px; /* LTR */

  118. }

  119. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .views-field {

  120.   clear: both;

  121.   margin: 0;

  122.   text-align: left; /* LTR */

  123. }

  124. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .field .field-label {

  125.   display: inline;

  126.   float: left; /* LTR */

  127. }

  128. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .views-field-commerce-total {

  129.   clear: both;

  130.   font-size: 20px;

  131.   margin-top: 25px;

  132. }

  133. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .views-field-commerce-total .views-label {

  134.   float: left; /* LTR */

  135.   padding-right: 5px; /* LTR */

  136. }

  137. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .views-field-commerce-total .field-content {

  138.   display: inline;

  139.   float: right; /* LTR */

  140. }

  141. 

  142. /*

  143.  * Style

  144.  */

  145. /* Overlay */

  146. div.messages.commerce-add-to-cart-confirmation {

  147.   border-color: #6bb0cb;

  148.   -moz-box-shadow: 0 2px 15px #57595a;

  149.   -webkit-box-shadow: 0 2px 15px #57595a;

  150.   box-shadow: 0 2px 15px #57595a;

  151.   filter: progid:DXImageTransform.Microsoft.Shadow(color='#57595A', direction='180', strength='5');

  152.   color: #aeaaa5;

  153. }

  154. /* Close button */

  155. div.messages.commerce-add-to-cart-confirmation .message-inner .commerce-add-to-cart-confirmation-close {

  156.   background: url('../images/btn_add-to-cart-close.png') no-repeat 0 0;

  157. }

  158. /* Title */

  159. div.messages.commerce-add-to-cart-confirmation .message-inner .added-product-title {

  160.   color: #2698f2;

  161. }

  162. /* Button */

  163. div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper {

  164.   background-color: #e4eef3;

  165. }

  166. div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper .button.checkout a {

  167.   background-color: #2698f2;

  168. }

  169. /* Product display */

  170. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .content .field-name-field-images img {

  171.   border: #d7d7d7 solid 1px;

  172. }

  173. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .commerce-product-sku .commerce-product-sku-label,

  174. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .field .views-label,

  175. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .field .field-label {

  176.   color: #878380;

  177. }

  178. div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display .view-content .views-field-commerce-total .field-content {

  179.   color: #2698f2;

  180. }

  181. 

  182. /*

  183.  * @media rules

  184.  */

  185. 

  186. @media (max-width: 967px) {

  187.   div.messages.commerce-add-to-cart-confirmation {

  188.     width: 90%;

  189.     margin: 0 !important;

  190.     left: 5%;

  191.   }

  192.   div.messages.commerce-add-to-cart-confirmation .message-inner .added-product-title {

  193.     width: 100%;

  194. 	float: none;

  195.   }

  196.   div.messages.commerce-add-to-cart-confirmation .message-inner .button-wrapper {

  197.     position: relative;

  198.     width: 100%;

  199.     padding: 15px;

  200.     clear: both;

  201.     margin-top: 25px;

  202.   }

  203.   div.messages.commerce-add-to-cart-confirmation .view-confirm-message-product-display {

  204.     width: 100%;

  205.   }

  206. }