custom/plugins/WodkaHoverOnListingSW6/src/Resources/views/storefront/layout/meta.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/layout/meta.html.twig' %}
  3. {% block layout_head_stylesheet %}
  4.     {{ parent() }}
  5.     {% if context.extensions.WodkaHoverOnListingSW6 is defined %}
  6.         {% set config = context.extensions.WodkaHoverOnListingSW6 %}
  7.         {% if config.active %}
  8.             {% if config.useOnHoverColor and config.onHoverItemColor %}
  9.                 <style>
  10.                     .product-box:hover,
  11.                     .product-box:hover,
  12.                     .product-box:hover {
  13.                         background-color: {{ config.onHoverItemColor }};
  14.                     }
  15.                 </style>
  16.             {% endif %}
  18.             {% if config.activeImageHover %}
  19.                 {% if config.imageHoverEffects in 'zoom' %}
  20.                     <style>
  21.                         .product-image-wrapper:not(.wd--hover-on-listing-product-image) img {
  22.                             transition: transform .2s;
  23.                         }
  24.                         .product-image-wrapper:not(.wd--hover-on-listing-product-image) img:hover {
  25.                             transform: scale(1.1);
  26.                         }
  27.                     </style>
  28.                 {% endif %}
  30.                 {% if config.imageHoverEffects in 'square' %}
  31.                     <style>
  32.                         .product-wishlist :hover:after{
  33.                             animation: none !important;
  34.                         }
  35.                         .product-wishlist:hover::after {
  36.                             display: none;
  37.                         }
  38.                         .product-image-wrapper:not(.wd--hover-on-listing-product-image) ::after {
  39.                             position: absolute;
  40.                             top: 50%;
  41.                             left: 50%;
  42.                             content: '';
  43.                             width: 0;
  44.                             height: 0;
  45.                             background: rgba(255,255,255,.2);
  46.                             border-radius: 0;
  47.                             transform: translate(-50%, -50%);
  48.                         }
  49.                         .product-image-wrapper:not(.wd--hover-on-listing-product-image) :hover:after {
  50.                             animation: square .75s;
  51.                         }
  52.                         @keyframes square {
  53.                             0% {
  54.                                 opacity: 1;
  55.                             }
  56.                             40% {
  57.                                 opacity: 1;
  58.                             }
  59.                             100% {
  60.                                 width: 100%;
  61.                                 height: 120%;
  62.                                 opacity: 0;
  63.                             }
  64.                         }
  65.                     </style>
  66.                 {% endif %}
  68.                 {% if config.imageHoverEffects in 'circle' %}
  69.                     <style>
  70.                         .product-wishlist :hover:after{
  71.                             animation: none !important;
  72.                         }
  73.                         .product-wishlist:hover::after {
  74.                             display: none;
  75.                         }
  76.                         .product-image-wrapper:not(.wd--hover-on-listing-product-image) ::after {
  77.                             position: absolute;
  78.                             top: 50%;
  79.                             left: 50%;
  80.                             content: '';
  81.                             width: 0;
  82.                             height: 0;
  83.                             background: rgba(255,255,255,.2);
  84.                             border-radius: 100%;
  85.                             transform: translate(-50%, -50%);
  86.                         }
  87.                         .product-image-wrapper:not(.wd--hover-on-listing-product-image) :hover:after {
  88.                             animation: circle .75s;
  89.                         }
  90.                         @keyframes circle {
  91.                             0% {
  92.                                 opacity: 1;
  93.                             }
  94.                             40% {
  95.                                 opacity: 1;
  96.                             }
  97.                             100% {
  98.                                 width: 100%;
  99.                                 height: 120%;
  100.                                 opacity: 0;
  101.                             }
  102.                         }
  103.                     </style>
  104.                 {% endif %}
  106.             {% endif %}
  108.             {% if config.imageSliderActive
  109.                 and (
  110.                 config.navigationArrowsColor
  111.                 or config.activeNavigationDotColor
  112.                 or config.inactiveNavigationDotColor
  113.                 ) %}
  114.                 <style>
  115.                     {% if config.navigationArrowsColor %}
  116.                     .wd--hover-on-listing-image-slider .image-slider-controls-container .base-slider-controls .icon {
  117.                         color: {{ config.navigationArrowsColor }};
  118.                     }
  119.                     {% endif %}
  121.                     {% if config.activeNavigationDotColor %}
  122.                     .wd--hover-on-listing-image-slider .base-slider .tns-nav button.tns-nav-active {
  123.                         background-color: {{ config.activeNavigationDotColor }};
  124.                     }
  125.                     {% endif %}
  127.                     {% if config.inactiveNavigationDotColor %}
  128.                     .wd--hover-on-listing-image-slider .base-slider .tns-nav button {
  129.                         background-color: {{ config.inactiveNavigationDotColor }};
  130.                     }
  131.                     {% endif %}
  132.                 </style>
  133.             {% endif %}
  134.         {% endif %}
  135.     {% endif %}
  136. {% endblock %}