custom/plugins/SolidAdvancedSliderElements/src/Resources/views/storefront/layout/meta.html.twig line 8

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/layout/meta.html.twig' %}
  2. {% block layout_head_stylesheet %}
  3.   {{ parent() }}
  4.   {% block solid_ase_content_slider_styles %}
  5.     {% set cmsPage = page.cmsPage %}
  6.     {% if page.landingPage.cmsPage %}
  7.         {% set cmsPage = page.landingPage.cmsPage %}
  8.     {% endif %}
  9.     {% if cmsPage %}
  10.       {% for section in cmsPage.sections %}
  11.         {% for block in section.blocks %}
  12.           {% for element in block.slots.elements %}
  13.             {% if element.type == 'solid-ase-content-slider' %}
  14.               {% set sliderSettings = element.translated.config.sliderSettings.value %}
  15.               {% set settings = element.translated.config.settings.value %}
  16.               {% block solid_ase_content_slider_style_tag %}
  17.                 <style>
  18.                   {% block solid_ase_content_slider_styles_responsive_min_height %}
  19.                     {# responsive min height #}
  20.                     {% if settings.sizingMode == 'responsive-min-height' %}
  21.                       {% if settings.minHeightMobile %}
  22.                         .solid-ase-content-slider-{{ element.id }}
  23.                           .slide-container {
  24.                           min-height: {{ settings.minHeightMobile }};
  25.                         }
  26.                       {% endif %}
  27.                       {% if settings.minHeightTablet %}
  28.                         @media (min-width: 768px) {
  29.                           .solid-ase-content-slider-{{ element.id }}
  30.                             .slide-container {
  31.                             min-height: {{ settings.minHeightTablet }};
  32.                           }
  33.                         }
  34.                       {% endif %}
  35.                       {% if settings.minHeightDesktop %}
  36.                         @media (min-width: 1200px) {
  37.                           .solid-ase-content-slider-{{ element.id }}
  38.                             .slide-container {
  39.                             min-height: {{ settings.minHeightDesktop }};
  40.                           }
  41.                         }
  42.                       {% endif %}
  43.                     {% endif %}
  44.                   {% endblock %}
  45.                   {% block solid_ase_content_slider_styles_min_aspect_ratio %}
  46.                     {# min aspect ratio #}
  47.                     {% if settings.sizingMode == 'min-aspect-ratio' %}
  48.                       {% if settings.minAspectRatioWidth and
  49.                         settings.minAspectRatioHeight %}
  50.                         .solid-ase-content-slider-{{ element.id }}::before {
  51.                           padding-top: {{ (settings.minAspectRatioHeight /
  52.                             settings.minAspectRatioWidth * 100) ~ '%' }};
  53.                         }
  54.                       {% endif %}
  55.                     {% endif %}
  56.                   {% endblock %}
  57.                   {% block solid_ase_content_slider_styles_content_animation %}
  58.                     {# content animation #}
  59.                     {% if settings.contentAnimation != 'none' %}
  60.                       .solid-ase-content-slider-{{ element.id }} .content {
  61.                         transition-delay: {{ (sliderSettings.speed + 200) ~ 'ms' }};
  62.                       }
  63.                     {% endif %}
  64.                   {% endblock %}
  65.                   {% block solid_ase_content_slider_styles_small_headline_size %}
  66.                     {# small headline size #}
  67.                     {% if settings.smallHeadlineSizeMobile %}
  68.                       .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  69.                         font-size: {{ settings.smallHeadlineSizeMobile }};
  70.                       }
  71.                     {% endif %}
  72.                     {% if settings.smallHeadlineSizeTablet %}
  73.                       @media (min-width: 768px) {
  74.                         .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  75.                           font-size: {{ settings.smallHeadlineSizeTablet }};
  76.                         }
  77.                       }
  78.                     {% endif %}
  79.                     {% if settings.smallHeadlineSizeDesktop %}
  80.                       @media (min-width: 1200px) {
  81.                         .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  82.                           font-size: {{ settings.smallHeadlineSizeDesktop }};
  83.                         }
  84.                       }
  85.                     {% endif %}
  86.                   {% endblock %}
  87.                   {% block solid_ase_content_slider_styles_small_headline_weight %}
  88.                     {# small headline weight #}
  89.                     {% if settings.smallHeadlineWeight %}
  90.                       .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  91.                         font-weight: {{ settings.smallHeadlineWeight }};
  92.                       }
  93.                     {% endif %}
  94.                   {% endblock %}
  95.                   {% block solid_ase_content_slider_styles_headline_size %}
  96.                     {# headline size #}
  97.                     {% if settings.headlineSizeMobile %}
  98.                       .solid-ase-content-slider-{{ element.id }} .content .headline {
  99.                         font-size: {{ settings.headlineSizeMobile }};
  100.                       }
  101.                     {% endif %}
  102.                     {% if settings.headlineSizeTablet %}
  103.                       @media (min-width: 768px) {
  104.                         .solid-ase-content-slider-{{ element.id }} .content .headline {
  105.                           font-size: {{ settings.headlineSizeTablet }};
  106.                         }
  107.                       }
  108.                     {% endif %}
  109.                     {% if settings.headlineSizeDesktop %}
  110.                       @media (min-width: 1200px) {
  111.                         .solid-ase-content-slider-{{ element.id }} .content .headline {
  112.                           font-size: {{ settings.headlineSizeDesktop }};
  113.                         }
  114.                       }
  115.                     {% endif %}
  116.                   {% endblock %}
  117.                   {% block solid_ase_content_slider_styles_headline_weight %}
  118.                     {# headline weight #}
  119.                     {% if settings.headlineWeight %}
  120.                       .solid-ase-content-slider-{{ element.id }} .content .headline {
  121.                         font-weight: {{ settings.headlineWeight }};
  122.                       }
  123.                     {% endif %}
  124.                   {% endblock %}
  125.                   {% block solid_ase_content_slider_styles_text_size %}
  126.                     {# text size #}
  127.                     {% if settings.textSizeMobile %}
  128.                       .solid-ase-content-slider-{{ element.id }} .content .text {
  129.                         font-size: {{ settings.textSizeMobile }};
  130.                       }
  131.                     {% endif %}
  132.                     {% if settings.textSizeTablet %}
  133.                       @media (min-width: 768px) {
  134.                         .solid-ase-content-slider-{{ element.id }} .content .text {
  135.                           font-size: {{ settings.textSizeTablet }};
  136.                         }
  137.                       }
  138.                     {% endif %}
  139.                     {% if settings.textSizeDesktop %}
  140.                       @media (min-width: 1200px) {
  141.                         .solid-ase-content-slider-{{ element.id }} .content .text {
  142.                           font-size: {{ settings.textSizeDesktop }};
  143.                         }
  144.                       }
  145.                     {% endif %}
  146.                   {% endblock %}
  147.                   {% block solid_ase_content_slider_styles_text_weight %}
  148.                     {# text weight #}
  149.                     {% if settings.textWeight %}
  150.                       .solid-ase-content-slider-{{ element.id }} .content .text {
  151.                         font-weight: {{ settings.textWeight }};
  152.                       }
  153.                     {% endif %}
  154.                   {% endblock %}
  155.                   {% block solid_ase_content_slider_styles_button_label_size %}
  156.                     {# button label size #}
  157.                     {% if settings.buttonLabelSizeMobile %}
  158.                       .solid-ase-content-slider-{{ element.id }} .content .btn {
  159.                         font-size: {{ settings.buttonLabelSizeMobile }};
  160.                       }
  161.                     {% endif %}
  162.                     {% if settings.buttonLabelSizeTablet %}
  163.                       @media (min-width: 768px) {
  164.                         .solid-ase-content-slider-{{ element.id }} .content .btn {
  165.                           font-size: {{ settings.buttonLabelSizeTablet }};
  166.                         }
  167.                       }
  168.                     {% endif %}
  169.                     {% if settings.buttonLabelSizeDesktop %}
  170.                       @media (min-width: 1200px) {
  171.                         .solid-ase-content-slider-{{ element.id }} .content .btn {
  172.                           font-size: {{ settings.buttonLabelSizeDesktop }};
  173.                         }
  174.                       }
  175.                     {% endif %}
  176.                   {% endblock %}
  177.                   {% block solid_ase_content_slider_styles_button_label_weight %}
  178.                     {# button label weight #}
  179.                     {% if settings.buttonLabelWeight %}
  180.                       .solid-ase-content-slider-{{ element.id }} .content .btn {
  181.                         font-weight: {{ settings.buttonLabelWeight }};
  182.                       }
  183.                     {% endif %}
  184.                   {% endblock %}
  185.                   {% block solid_ase_content_slider_styles_small_headline_margin_bottom %}
  186.                     {# small headline margin bottom #}
  187.                     {% if settings.smallHeadlineMarginBottomMobile %}
  188.                       .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  189.                         margin-bottom: {{ settings.smallHeadlineMarginBottomMobile }};
  190.                       }
  191.                     {% endif %}
  192.                     {% if settings.smallHeadlineMarginBottomTablet %}
  193.                       @media (min-width: 768px) {
  194.                         .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  195.                           margin-bottom: {{ settings.smallHeadlineMarginBottomTablet }};
  196.                         }
  197.                       }
  198.                     {% endif %}
  199.                     {% if settings.smallHeadlineMarginBottomDesktop %}
  200.                       @media (min-width: 1200px) {
  201.                         .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  202.                           margin-bottom: {{ settings.smallHeadlineMarginBottomDesktop }};
  203.                         }
  204.                       }
  205.                     {% endif %}
  206.                   {% endblock %}
  207.                   {% block solid_ase_content_slider_styles_headline_margin_bottom %}
  208.                     {# headline margin bottom #}
  209.                     {% if settings.headlineMarginBottomMobile %}
  210.                       .solid-ase-content-slider-{{ element.id }} .content .headline {
  211.                         margin-bottom: {{ settings.headlineMarginBottomMobile }};
  212.                       }
  213.                     {% endif %}
  214.                     {% if settings.headlineMarginBottomTablet %}
  215.                       @media (min-width: 768px) {
  216.                         .solid-ase-content-slider-{{ element.id }} .content .headline {
  217.                           margin-bottom: {{ settings.headlineMarginBottomTablet }};
  218.                         }
  219.                       }
  220.                     {% endif %}
  221.                     {% if settings.headlineMarginBottomDesktop %}
  222.                       @media (min-width: 1200px) {
  223.                         .solid-ase-content-slider-{{ element.id }} .content .headline {
  224.                           margin-bottom: {{ settings.headlineMarginBottomDesktop }};
  225.                         }
  226.                       }
  227.                     {% endif %}
  228.                   {% endblock %}
  229.                   {% block solid_ase_content_slider_styles_text_margin_bottom %}
  230.                     {# text margin bottom #}
  231.                     {% if settings.textMarginBottomMobile %}
  232.                       .solid-ase-content-slider-{{ element.id }} .content .text {
  233.                         margin-bottom: {{ settings.textMarginBottomMobile }};
  234.                       }
  235.                     {% endif %}
  236.                     {% if settings.textMarginBottomTablet %}
  237.                       @media (min-width: 768px) {
  238.                         .solid-ase-content-slider-{{ element.id }} .content .text {
  239.                           margin-bottom: {{ settings.textMarginBottomTablet }};
  240.                         }
  241.                       }
  242.                     {% endif %}
  243.                     {% if settings.textMarginBottomDesktop %}
  244.                       @media (min-width: 1200px) {
  245.                         .solid-ase-content-slider-{{ element.id }} .content .text {
  246.                           margin-bottom: {{ settings.textMarginBottomDesktop }};
  247.                         }
  248.                       }
  249.                     {% endif %}
  250.                   {% endblock %}
  251.                   {% block solid_ase_content_slider_styles_small_headline_color %}
  252.                     {# small headline color #}
  253.                     {% if settings.smallHeadlineColor %}
  254.                       .solid-ase-content-slider-{{ element.id }} .content .small-headline {
  255.                         color: {{ settings.smallHeadlineColor }};
  256.                       }
  257.                     {% endif %}
  258.                   {% endblock %}
  259.                   {% block solid_ase_content_slider_styles_headline_color %}
  260.                     {# headline color #}
  261.                     {% if settings.headlineColor %}
  262.                       .solid-ase-content-slider-{{ element.id }} .content .headline {
  263.                         color: {{ settings.headlineColor }} !important;
  264.                       }
  265.                     {% endif %}
  266.                   {% endblock %}
  267.                   {% block solid_ase_content_slider_styles_text_color %}
  268.                     {# text color #}
  269.                     {% if settings.textColor %}
  270.                       .solid-ase-content-slider-{{ element.id }} .content .text {
  271.                         color: {{ settings.textColor }};
  272.                       }
  273.                     {% endif %}
  274.                   {% endblock %}
  275.                   {% block solid_ase_content_slider_styles_button_color %}
  276.                     {# button color #}
  277.                     {% if settings.buttonColor %}
  278.                       {% if 'outline' in settings.buttonVariant %}
  279.                         .solid-ase-content-slider-{{ element.id }} .content .btn {
  280.                           color: {{ settings.buttonColor }};
  281.                           border-color: {{ settings.buttonColor }};
  282.                         }
  283.                         .solid-ase-content-slider-{{ element.id }} .content .btn:hover,
  284.                         .solid-ase-content-slider-{{ element.id }} .content .btn:active {
  285.                           color: {{ hexContrast(settings.buttonColor) }} !important;
  286.                           border-color: {{ settings.buttonColor }} !important;
  287.                           background-color: {{ settings.buttonColor }} !important;
  288.                         }
  289.                       {% else %}
  290.                         .solid-ase-content-slider-{{ element.id }} .content .btn {
  291.                           color: {{ hexContrast(settings.buttonColor) }};
  292.                           border-color: {{ settings.buttonColor }};
  293.                           background-color: {{ settings.buttonColor }};
  294.                         }
  295.                         .solid-ase-content-slider-{{ element.id }} .content .btn:hover {
  296.                           border-color: {{ hexDarken(settings.buttonColor, '36%') }} !important;
  297.                           background-color: {{ hexDarken(settings.buttonColor, '24%') }} !important;
  298.                         }
  299.                         .solid-ase-content-slider-{{ element.id }} .content .btn:active {
  300.                           color: {{ hexContrast(settings.buttonColor) }} !important;
  301.                           border-color: {{ hexDarken(settings.buttonColor, '45%') }} !important;
  302.                           background-color: {{ hexDarken(settings.buttonColor, '36%') }} !important;
  303.                         }
  304.                       {% endif %}
  305.                     {% endif %}
  306.                   {% endblock %}
  307.                   {% block solid_ase_content_slider_styles_content_background_color %}
  308.                     {# content background color #}
  309.                     {% if settings.contentBackgroundColor %}
  310.                       {% if 'boxed' in settings.layoutVariant %}
  311.                         .solid-ase-content-slider-{{ element.id }} .content {
  312.                           background-color: {{ settings.contentBackgroundColor }} !important;
  313.                         }
  314.                       {% elseif settings.layoutVariant == 'gradient-top' %}
  315.                         .solid-ase-content-slider-{{ element.id }} .content-container {
  316.                           background: linear-gradient({{ settings.contentBackgroundColor }}, {{ hexOpacity(settings.contentBackgroundColor, 0) }}) !important;
  317.                         }
  318.                       {% elseif settings.layoutVariant == 'gradient-bottom' %}
  319.                         .solid-ase-content-slider-{{ element.id }} .content-container {
  320.                           background: linear-gradient({{ hexOpacity(settings.contentBackgroundColor, 0) }}, {{ settings.contentBackgroundColor }}) !important;
  321.                         }
  322.                       {% else %}
  323.                         .solid-ase-content-slider-{{ element.id }} .content-container {
  324.                           background-color: {{ settings.contentBackgroundColor }} !important;
  325.                         }
  326.                       {% endif %}
  327.                     {% endif %}
  328.                   {% endblock %}
  329.                   {% block solid_ase_content_slider_styles_controls_color %}
  330.                     {# controls color #}
  331.                     {% if settings.controlsColor %}
  332.                       {% if 'icon' in settings.controlsVariant %}
  333.                         .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:not(:disabled) .icon {
  334.                           color: {{ settings.controlsColor }};
  335.                         }
  336.                         {% if 'outside' in settings.controlsPosition %}
  337.                           .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:hover:not(:disabled) .icon {
  338.                             color: {{ hexDarken(settings.controlsColor, '24%') }};
  339.                           }
  340.                         {% endif %}
  341.                         .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:active:not(:disabled) .icon {
  342.                           color: {{ hexDarken(settings.controlsColor, '36%') }};
  343.                         }
  344.                       {% else %}
  345.                         .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:not(:disabled) {
  346.                           border-color: {{ settings.controlsColor }};
  347.                           background-color: {{ settings.controlsColor }};
  348.                         }
  349.                         .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:not(:disabled) .icon {
  350.                           color: {{ hexContrast(settings.controlsColor) }};
  351.                         }
  352.                         {% if 'inside' in settings.controlsPosition %}
  353.                           .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:hover:not(:disabled) {
  354.                             border-color: {{ settings.controlsColor }} !important;
  355.                             background-color: {{ settings.controlsColor }} !important;
  356.                           }
  357.                         {% else %}
  358.                           .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:hover:not(:disabled) {
  359.                             border-color: {{ hexDarken(settings.controlsColor, '36%') }} !important;
  360.                             background-color: {{ hexDarken(settings.controlsColor, '24%') }} !important;
  361.                           }
  362.                         {% endif %}
  363.                         .solid-ase-content-slider-{{ element.id }} .solid-ase-content-slider-control:active:not(:disabled) {
  364.                           border-color: {{ hexDarken(settings.controlsColor, '45%') }} !important;
  365.                           background-color: {{ hexDarken(settings.controlsColor, '36%') }} !important;
  366.                         }
  367.                       {% endif %}
  368.                     {% endif %}
  369.                   {% endblock %}
  370.                   {% block solid_ase_content_slider_styles_nav_color %}
  371.                     {# nav color #}
  372.                     {% if settings.navColor %}
  373.                       {% if settings.navVariant == 'dots-fill' %}
  374.                         .solid-ase-content-slider-{{ element.id }} .tns-nav button {
  375.                           border-color: {{ settings.navColor }} !important;
  376.                         }
  377.                         .solid-ase-content-slider-{{ element.id }} .tns-nav button::after {
  378.                           background-color: {{ settings.navColor }} !important;
  379.                         }
  380.                       {% else %}
  381.                         .solid-ase-content-slider-{{ element.id }} .tns-nav button {
  382.                           background-color: {{ settings.navColor }} !important;
  383.                         }
  384.                       {% endif %}
  385.                     {% endif %}
  386.                   {% endblock %}
  387.                   {% block solid_ase_content_slider_styles_custom_css %}
  388.                     {# custom css #}
  389.                     {% if settings.customCss %}
  390.                       {{ settings.customCss | raw }}
  391.                     {% endif %}
  392.                   {% endblock %}
  393.                 </style>
  394.               {% endblock %}
  395.             {% endif %}
  396.           {% endfor %}
  397.         {% endfor %}
  398.       {% endfor %}
  399.     {% endif %}
  400.   {% endblock %}
  401. {% endblock %}