oscarviedma

Estilos para el mini carrito dropdown menu woo

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