oscarviedma

Estilos CSS para el mini carrito woocommerce divi

Aug 15th, 2020 (edited)
1,020
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.72 KB | None | 0 0
  1. /* Estilos icono carrito */
  2. #clickBotonCarrito {
  3.   cursor: pointer;
  4.   transition: all 0.3s;
  5.   position: fixed !important;
  6.   bottom: 40px;
  7.   right: 40px;
  8.   z-index: 99999;
  9. }
  10.  
  11. .cart-sc {
  12.   list-style: none;
  13. }
  14.  
  15. .cart-contents {
  16.   position: relative;
  17.   height: 65px;
  18.   width: 65px;
  19.   display: flex;
  20.   justify-content: center;
  21.   align-items: center;
  22.   cursor: pointer;
  23.   border-radius: 4px;
  24.   background: #4d2def; /* color de fondo */
  25.   box-shadow: rgba(0,0,0,.15) 0px 0px 20px;
  26.   transition: all 0.3s;
  27. }
  28. .cart-contents:hover {
  29.   background: #270bba; /* color de fondo hover */
  30.   transition: all 0.3s;
  31. }
  32.  
  33. .cart-contents:before {
  34.   font-family: 'ETMODULES';
  35.   content: '\e07a';
  36.   color: #ffffff; /* color icono carrito */
  37.   font-size: 26px; /* tamaño icono carrito */
  38.   position: absolute;
  39. }
  40. .mover-icono-carrito .cart-contents:before {
  41.   content: '\4d';
  42.   font-size: 48px; /* tamaño icono carrito X */
  43. }
  44.  
  45. .cart-contents-count {
  46.   position: absolute;
  47.   top: -10px;
  48.   right: -10px;
  49.   font-weight: 600;
  50.   font-size: 14px;
  51.   height: 25px;
  52.   width: 25px;
  53.   vertical-align: middle;
  54.   text-align: center;
  55.   color: #fff; /* color texto contador */
  56.   background: #de0000; /* color fondo contador */
  57.   border-radius: 50%;
  58. }
  59.  
  60. /* Estilos sección menu mini carrito */
  61. .seccion-mini-carrito {
  62.   max-width: 360px;
  63.   width: 100%;
  64.   height: 100vh;
  65.   overflow-y: auto;
  66.   z-index: 9999;
  67.   box-shadow: 6px 6px 18px 0px rgba(0,45,76,0.2);
  68.   position: fixed!important;
  69.   top: 0px;
  70.   bottom: auto;
  71.   left: auto;
  72.   right: 0;
  73.   transform: translateX(360px) translateY(0px);
  74.   transition: 0.3s;
  75.   background-color: #ffffff; /* fondo sección menu carrito */
  76.   padding: 30px;
  77. }
  78.  
  79. .seccion-mini-carrito .widget_shopping_cart_content::before {
  80.   content: 'Mi carrito';
  81.   font-size: 18px;
  82.   font-weight: bold;
  83. }
  84.  
  85. .seccion-mini-carrito .woocommerce-mini-cart {
  86.   margin-top: 10px !important;
  87. }
  88.  
  89. .seccion-mini-carrito ul.cart_list li img {
  90.   float: left;
  91.   margin-right: 24px;
  92.   width: 64px;
  93.   height: auto;
  94.   box-shadow: none;
  95. }
  96.  
  97. .seccion-mini-carrito .woocommerce-mini-cart .woocommerce-mini-cart-item {
  98.   padding-bottom: 20px;
  99.   border-bottom: 1px solid #f2f2f2;
  100. }
  101.  
  102. .seccion-mini-carrito .woocommerce-mini-cart .woocommerce-mini-cart-item a {
  103.   font-size: 15px;
  104. }
  105.  
  106. .seccion-mini-carrito .woocommerce-mini-cart .woocommerce-mini-cart-item .remove {
  107.   font-size: 26px;
  108.   margin-bottom: 6px;
  109. }
  110.  
  111. .seccion-mini-carrito .woocommerce-mini-cart .woocommerce-mini-cart-item .quantity {
  112.   font-weight: 600;
  113. }
  114.  
  115. .seccion-mini-carrito .woocommerce-mini-cart__total {
  116.   font-size: 18px;
  117.   margin-top: 24px;
  118.   margin-bottom: 20px;
  119. }
  120.  
  121. .seccion-mini-carrito .woocommerce-mini-cart__total .woocommerce-Price-amount {
  122.   font-weight: 600;
  123. }
  124.  
  125. .seccion-mini-carrito .woocommerce-mini-cart__buttons {
  126.   margin-bottom: 20px;
  127. }
  128. .seccion-mini-carrito .woocommerce-mini-cart__buttons a {
  129.   font-size: 16px !important;
  130. }
  131. .seccion-mini-carrito .woocommerce-mini-cart__buttons a:first-child {
  132.   margin-right: 14px;
  133.   margin-bottom: 16px;
  134. }
  135. .seccion-mini-carrito .woocommerce-mini-cart__buttons a:after {
  136.   display: none;
  137. }
  138. .seccion-mini-carrito .woocommerce-mini-cart__buttons a:hover {
  139.   padding: .3em 1em .3em 1em;
  140. }
  141.  
  142. .seccion-mini-carrito .woocommerce-mini-cart__empty-message {
  143.   font-size: 16px;
  144.   margin-top: 16px;
  145. }
  146.  
  147. /* Eliminar icono de carrito del menu divi */
  148. #main-header .et-cart-info {
  149.   display: none;
  150. }
  151.  
  152. /* Desplazamientos */
  153. .mover-icono-carrito {
  154.   right: 400px !important;
  155. }
  156. .desplazar-mini-carrito {
  157.   transform: translateX(0px) translateY(0px) !important;
  158. }
  159.  
  160. /* Overlay menu carrito */
  161. .overlay-menu-carrito {
  162.   height: 100%;
  163.   width: 100%;
  164.   position: fixed!important;
  165.   top: 0px;
  166.   bottom: auto;
  167.   left: 0px;
  168.   right: auto;
  169.   background-color: rgba(0,0,0,0.65)!important;
  170.   opacity: 0;
  171.   visibility: hidden;
  172.   transition: all 0.3s;
  173. }
  174. .overlay-menu-carrito-mostrar {
  175.   opacity: 1 !important;
  176.   visibility: visible !important;
  177. }
  178.  
  179. /* Estilos posicionamiento pie de página */
  180. .et-l--footer .et_builder_inner_content, .et-l--footer {
  181.     position: relative;
  182.     z-index: 9999999999999999999 !important;
  183. }
  184.  
  185. /* Estilos menu carrito responsive */
  186. @media only screen and (max-width: 600px) {
  187.   #clickBotonCarrito {
  188.     bottom: 20px;
  189.     right: 25px;
  190.   }
  191.   .cart-contents {
  192.     height: 45px;
  193.     width: 45px;
  194.   }
  195.   .cart-contents:before {
  196.     font-size: 18px;  
  197.   }
  198.   .mover-icono-carrito .cart-contents:before {
  199.     font-size: 30px;  
  200.   }
  201.   .seccion-mini-carrito {
  202.     max-width: 320px;
  203.     transform: translateX(320px) translateY(0px);
  204.     padding: 20px;
  205.     }
  206.   .mover-icono-carrito {
  207.     right: 345px !important;
  208.   }
  209.   .seccion-mini-carrito .widget_shopping_cart_content::before {
  210.     font-size: 17px;
  211.   }
  212.   .seccion-mini-carrito ul.cart_list li img {
  213.     margin-right: 20px;
  214.     width: 50px;
  215.   }
  216.   .seccion-mini-carrito .woocommerce-mini-cart .woocommerce-mini-cart-item a {
  217.     font-size: 14px;
  218.   }
  219.   .seccion-mini-carrito .woocommerce-mini-cart .woocommerce-mini-cart-item .remove {
  220.     font-size: 24px;
  221.   }
  222.   .seccion-mini-carrito .woocommerce-mini-cart__total {
  223.     font-size: 16px;
  224.     margin-top: 20px;
  225.     margin-bottom: 16px;
  226.   }
  227.   .seccion-mini-carrito .woocommerce-mini-cart__buttons a {
  228.     font-size: 15px !important;
  229.     }
  230. }
  231.  
  232. @media only screen and (max-width: 410px) {
  233.   .mover-icono-carrito {
  234.     right: 25px !important;
  235.   }
  236. }
  237.  
  238. /* Estilo botón añadir carrito */
  239. .woocommerce a.button.added::after {
  240.   font-family: 'ETMODULES';
  241.   font-size: 16px;
  242.   content: '\4e';
  243.   top: 10px;
  244.   right: 10px;
  245. }
  246. .woocommerce a.button.loading::after {
  247.   font-family: 'ETMODULES';
  248.   font-size: 16px;
  249.   content: '\e02d';
  250.   top: 10px;
  251.   right: 10px;
  252. }
Add Comment
Please, Sign In to add comment