Advertisement
oscarviedma

Estilos CSS del mini carrito drop down woocommerce

Apr 30th, 2021 (edited)
779
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.99 KB | None | 0 0
  1. .woocommerce-page span.onsale, .woocommerce span.onsale {
  2.   z-index: 1;
  3. }
  4.  
  5. /* Estilos icono carrito */
  6. .cart-sc {
  7.   list-style: none;
  8. }
  9.  
  10. .cart-contents {
  11.   position: relative;
  12.   cursor: pointer;
  13. }
  14.  
  15. .cart-contents:before {
  16.   font-family: 'ETMODULES';
  17.   content: '\e07a';
  18.   color: #000; /* color icono carrito */
  19.   font-size: 22px; /* tamaño icono carrito */
  20.   position: absolute;
  21. }
  22.  
  23. .cart-contents-count {
  24.   position: absolute;
  25.   top: -6px;
  26.   left: 26px;
  27.   font-weight: 600;
  28.   font-size: 12px;
  29.   height: 16px;
  30.   width: 16px;
  31.   vertical-align: middle;
  32.   line-height: 1.3;
  33.   text-align: center;
  34.   color: #fff; /* color numero contador */
  35.   background: #de0000; /* color contador */
  36.   border-radius: 50%;
  37. }
  38.  
  39. .ov-icono-carrito {
  40.   position: absolute !important;
  41.   top: -8px;
  42.   right: 28px;
  43. }
  44.  
  45. @-moz-document url-prefix() {
  46. .ov-icono-carrito {
  47.   top: 0px;
  48.  }
  49.   .cart-contents-count {
  50.    top: -10px;
  51.   }
  52. }
  53.  
  54. /* Estilos dropdown menu mini carrito */
  55. .ov-mini-carrito-dropdown {
  56.   position: absolute !important;
  57.   top: 35px;
  58.   right: -25px;
  59.   border-radius: 6px;
  60.   border-top: none;
  61.   box-shadow: 0px 2px 16px rgba(0, 0, 0, .2);
  62.   padding: 12px 20px !important;
  63.   width: 280px;
  64.   background: #ffffff;
  65. }
  66. .ov-mini-carrito-dropdown:before {
  67.   position: absolute;
  68.   content: '';
  69.   right: 30px;
  70.   top: -26px;
  71.   border-style: solid;
  72.   border-width: 14px;
  73.   border-color: transparent transparent #fff;
  74. }
  75.  
  76. .ov-mini-carrito-dropdown .widget_shopping_cart_content {
  77.   margin-top: 6px;
  78. }
  79.  
  80. .ov-mini-carrito-dropdown .widget_shopping_cart_content::before {
  81.   content: 'Mi carrito';
  82.   font-size: 18px;
  83.   font-weight: bold;
  84. }
  85.  
  86. .ov-mini-carrito-dropdown .woocommerce-mini-cart {
  87.   margin-top: 5px !important;
  88. }
  89.  
  90. .ov-mini-carrito-dropdown ul.cart_list li img {
  91.   float: left;
  92.   margin-right: 24px;
  93.   width: 60px;
  94.   height: auto;
  95.   box-shadow: none;
  96. }
  97.  
  98. .ov-mini-carrito-dropdown .woocommerce-mini-cart .woocommerce-mini-cart-item {
  99.   padding-top: 14px;
  100.   padding-bottom: 14px;
  101.   border-bottom: 1px solid #f2f2f2;
  102.   list-style: none;
  103.   position: relative;
  104.   padding-left: 25px;
  105. }
  106.  
  107. .ov-mini-carrito-dropdown .woocommerce-mini-cart .woocommerce-mini-cart-item a {
  108.   font-size: 14px;
  109.   line-height: 1.2;
  110. }
  111.  
  112. .ov-mini-carrito-dropdown .woocommerce-mini-cart .woocommerce-mini-cart-item .remove {
  113.   font-size: 26px;
  114.   margin-bottom: 6px;
  115.   display: inline-block;
  116.   position: absolute;
  117.   top: 30px;
  118.   left: -6px;
  119. }
  120.  
  121. .ov-mini-carrito-dropdown .woocommerce-mini-cart .woocommerce-mini-cart-item .remove:hover {
  122.   line-height: 25px;
  123. }
  124.  
  125. .ov-mini-carrito-dropdown .woocommerce-mini-cart .woocommerce-mini-cart-item .quantity {
  126.   font-weight: 600;
  127. }
  128.  
  129. .ov-mini-carrito-dropdown .woocommerce-mini-cart__total {
  130.   font-size: 16px;
  131.   margin-top: 24px;
  132. }
  133.  
  134. .ov-mini-carrito-dropdown .woocommerce-mini-cart__total .woocommerce-Price-amount {
  135.   font-weight: 600;
  136. }
  137.  
  138. .ov-mini-carrito-dropdown .woocommerce-mini-cart__buttons {
  139.   margin-bottom: 12px;
  140. }
  141.  
  142. .ov-mini-carrito-dropdown .woocommerce-mini-cart__buttons a {
  143.   font-size: 14px !important;
  144. }
  145.  
  146. .ov-mini-carrito-dropdown .woocommerce-mini-cart__buttons a:first-child {
  147.   border-radius: 0 !important;
  148.   font-weight: 700;
  149.   padding: 5px 0 !important;
  150.   margin-bottom: 12px;
  151.   border: none;
  152.   background: 0 0;
  153.   margin-right: 12px;
  154.   display: block;
  155.   background-color: transparent !important;
  156.   color: #333333 !important;
  157. }
  158. body #page-container .et-boc .ov-mini-carrito-dropdown .woocommerce-mini-cart__buttons a:first-child:hover {
  159.   color: #000000!important;
  160.   background-color: transparent !important;
  161.   border-color: transparent !important;
  162.   padding: 5px 0 !important;
  163. }
  164.  
  165. .ov-mini-carrito-dropdown .woocommerce-mini-cart__buttons a:last-child {
  166.   width: 100%;
  167.   text-transform: uppercase;
  168.   text-align: center;
  169.   padding-top: 8px;
  170.   padding-bottom: 8px;
  171.   font-weight: 700;
  172. }
  173. .ov-mini-carrito-dropdown .woocommerce-mini-cart__buttons a:last-child:hover {
  174.   padding-top: 8px;
  175.   padding-bottom: 8px;
  176. }
  177.  
  178. .ov-mini-carrito-dropdown .woocommerce-mini-cart__buttons a:after {
  179.   display: none;
  180. }
  181. .ov-mini-carrito-dropdown .woocommerce-mini-cart__buttons a:hover {
  182.   padding: .3em 1em .3em 1em;
  183. }
  184.  
  185. .ov-mini-carrito-dropdown .woocommerce-mini-cart__empty-message {
  186.   font-size: 16px;
  187.   margin-top: 16px;
  188. }
  189.  
  190. .mostrar-dropdown-carrito {
  191.   visibility: visible !important;
  192.   opacity: 1 !important;
  193. }
  194.  
  195. .ov-mini-carrito-dropdown .h-icono-cerrar {
  196.   display: none;
  197. }
  198. @media only screen and (max-width: 980px) {
  199.  .ov-mini-carrito-dropdown .h-icono-cerrar {
  200.    position: absolute;
  201.    top: 0;
  202.    right: 0;
  203.    font-size: 26px;
  204.    width: 28px;
  205.    height: 28px;
  206.    background-color: #e7e7e7;
  207.    color: #000000;
  208.    display: flex;
  209.    align-items: center;
  210.    justify-content: center;
  211.    cursor: pointer;
  212.  }
  213. }
  214.  
  215. /* Estilos menu hamburguesa movil */
  216. @media only screen and (max-width: 980px) {
  217.  .ov-menu-h .et_mobile_menu {
  218.    top: 45px !important;
  219.    left: -80% !important;
  220.    width: 260% !important;
  221.  }
  222. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement