API tools faq
paste
Advertisement
BackuPs-nl

Responsive menu app.css.twig fix php 7.4

BackuPs-nl
Feb 26th, 2020
873
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 29.86 KB | None | 0 0
raw download clone embed print report
  1. button#responsive-menu-button,
  2. #responsive-menu-container {
  3.    display: none;
  4.     -webkit-text-size-adjust: 100%;
  5. }
  6.  
  7. @media screen and (max-width: {{ options.breakpoint }}px) {
  8.  
  9.     #responsive-menu-container {
  10.        display: block;
  11.         position: fixed;
  12.         top: 0;
  13.         bottom: 0;
  14.         z-index: 99998;
  15.         padding-bottom: 5px;
  16.         margin-bottom: -5px;
  17.         outline: 1px solid transparent;
  18.         overflow-y: auto;
  19.         overflow-x: hidden;
  20.     }
  21.  
  22.     #responsive-menu-container .responsive-menu-search-box {
  23.        width: 100%;
  24.         padding: 0 2%;
  25.         border-radius: 2px;
  26.         height: 50px;
  27.         -webkit-appearance: none;
  28.     }
  29.  
  30.     #responsive-menu-container.push-left,
  31.    #responsive-menu-container.slide-left {
  32.        transform: translateX(-100%);
  33.         -ms-transform: translateX(-100%);
  34.         -webkit-transform: translateX(-100%);
  35.         -moz-transform: translateX(-100%);
  36.     }
  37.  
  38.     .responsive-menu-open #responsive-menu-container.push-left,
  39.    .responsive-menu-open #responsive-menu-container.slide-left {
  40.        transform: translateX(0);
  41.         -ms-transform: translateX(0);
  42.         -webkit-transform: translateX(0);
  43.         -moz-transform: translateX(0);
  44.     }
  45.  
  46.     #responsive-menu-container.push-top,
  47.    #responsive-menu-container.slide-top {
  48.        transform: translateY(-100%);
  49.         -ms-transform: translateY(-100%);
  50.         -webkit-transform: translateY(-100%);
  51.         -moz-transform: translateY(-100%);
  52.     }
  53.  
  54.     .responsive-menu-open #responsive-menu-container.push-top,
  55.    .responsive-menu-open #responsive-menu-container.slide-top {
  56.        transform: translateY(0);
  57.         -ms-transform: translateY(0);
  58.         -webkit-transform: translateY(0);
  59.         -moz-transform: translateY(0);
  60.     }
  61.  
  62.     #responsive-menu-container.push-right,
  63.    #responsive-menu-container.slide-right {
  64.        transform: translateX(100%);
  65.         -ms-transform: translateX(100%);
  66.         -webkit-transform: translateX(100%);
  67.         -moz-transform: translateX(100%);
  68.     }
  69.  
  70.     .responsive-menu-open #responsive-menu-container.push-right,
  71.    .responsive-menu-open #responsive-menu-container.slide-right {
  72.        transform: translateX(0);
  73.         -ms-transform: translateX(0);
  74.         -webkit-transform: translateX(0);
  75.         -moz-transform: translateX(0);
  76.     }
  77.  
  78.     #responsive-menu-container.push-bottom,
  79.    #responsive-menu-container.slide-bottom {
  80.        transform: translateY(100%);
  81.         -ms-transform: translateY(100%);
  82.         -webkit-transform: translateY(100%);
  83.         -moz-transform: translateY(100%);
  84.     }
  85.  
  86.     .responsive-menu-open #responsive-menu-container.push-bottom,
  87.    .responsive-menu-open #responsive-menu-container.slide-bottom {
  88.        transform: translateY(0);
  89.         -ms-transform: translateY(0);
  90.         -webkit-transform: translateY(0);
  91.         -moz-transform: translateY(0);
  92.     }
  93.  
  94.     #responsive-menu-container,
  95.    #responsive-menu-container:before,
  96.    #responsive-menu-container:after,
  97.    #responsive-menu-container *,
  98.    #responsive-menu-container *:before,
  99.    #responsive-menu-container *:after {
  100.         box-sizing: border-box;
  101.          margin: 0;
  102.          padding: 0;
  103.     }
  104.  
  105.     #responsive-menu-container #responsive-menu-search-box,
  106.    #responsive-menu-container #responsive-menu-additional-content,
  107.    #responsive-menu-container #responsive-menu-title {
  108.        padding: 25px 5%;
  109.     }
  110.  
  111.     #responsive-menu-container #responsive-menu,
  112.    #responsive-menu-container #responsive-menu ul {
  113.        width: 100%;
  114.     }
  115.     #responsive-menu-container #responsive-menu ul.responsive-menu-submenu {
  116.        display: none;
  117.     }
  118.  
  119.     #responsive-menu-container #responsive-menu ul.responsive-menu-submenu.responsive-menu-submenu-open {
  120.         display: block;
  121.     }
  122.  
  123.     #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-1 a.responsive-menu-item-link {
  124.        padding-{{ options.menu_depth_side }}: {{ options.menu_depth_1 }}%;
  125.     }
  126.  
  127.     #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-2 a.responsive-menu-item-link {
  128.        padding-{{ options.menu_depth_side }}: {{ options.menu_depth_2 }}%;
  129.     }
  130.  
  131.     #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-3 a.responsive-menu-item-link {
  132.        padding-{{ options.menu_depth_side }}: {{ options.menu_depth_3 }}%;
  133.     }
  134.  
  135.     #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-4 a.responsive-menu-item-link {
  136.        padding-{{ options.menu_depth_side }}: {{ options.menu_depth_4 }}%;
  137.     }
  138.  
  139.     #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-5 a.responsive-menu-item-link {
  140.        padding-{{ options.menu_depth_side }}: {{ options.menu_depth_5 }}%;
  141.     }
  142.  
  143.     #responsive-menu-container li.responsive-menu-item {
  144.        width: 100%;
  145.         list-style: none;
  146.     }
  147.  
  148.     #responsive-menu-container li.responsive-menu-item a {
  149.        width: 100%;
  150.         display: block;
  151.         text-decoration: none;
  152.         padding: 0 {{ ' ' ~ options.menu_depth_0 }}%;
  153.         position: relative;
  154.     }
  155.  
  156.  
  157.      #responsive-menu-container #responsive-menu li.responsive-menu-item a {
  158.        {% if options.menu_text_alignment == 'left' and options.arrow_position == 'left' %}
  159.             padding-left: {{options.submenu_arrow_width + 5}}px;
  160.         {% elseif options.menu_text_alignment == 'right' and options.arrow_position == 'right' %}
  161.             padding-right: {{options.submenu_arrow_width + 5}}px;
  162.         {% else %}
  163.             padding: 0 {{ ' ' ~ options.menu_depth_0 }}%;
  164.         {% endif %}
  165.     }
  166.  
  167.     #responsive-menu-container .responsive-menu-submenu li.responsive-menu-item a {
  168.        {% if options.submenu_text_alignment == 'left' and options.submenu_arrow_position == 'left' %}
  169.             padding-left: {{options.submenu_submenu_arrow_width + 5}}px !important;
  170.             padding-right:unset !important;
  171.         {% elseif options.submenu_text_alignment == 'right' and options.submenu_arrow_position == 'right' %}
  172.             padding-right: {{options.submenu_submenu_arrow_width + 5}}px  !important;
  173.             padding-left:unset  !important;
  174.         {% else %}
  175.             padding: 0 {{ ' ' ~ options.menu_depth_0 }}%;
  176.         {% endif %}
  177.     }
  178.  
  179.     #responsive-menu-container li.responsive-menu-item a .fa {
  180.        margin-right: 15px;
  181.     }
  182.  
  183.     #responsive-menu-container li.responsive-menu-item a .responsive-menu-subarrow {
  184.        position: absolute;
  185.         top: 0;
  186.         bottom: 0;
  187.         text-align: center;
  188.         overflow: hidden;
  189.     }
  190.  
  191.     #responsive-menu-container li.responsive-menu-item a .responsive-menu-subarrow  .fa {
  192.        margin-right: 0;
  193.     }
  194.  
  195.     button#responsive-menu-button .responsive-menu-button-icon-inactive {
  196.        display: none;
  197.     }
  198.  
  199.     button#responsive-menu-button {
  200.        z-index: 99999;
  201.         display: none;
  202.         overflow: hidden;
  203.         outline: none;
  204.     }
  205.  
  206.     button#responsive-menu-button img {
  207.        max-width: 100%;
  208.     }
  209.  
  210.     .responsive-menu-label {
  211.         display: inline-block;
  212.         font-weight: 600;
  213.         margin: 0 5px;
  214.         vertical-align: middle;
  215.     }
  216.  
  217.     .responsive-menu-label .responsive-menu-button-text-open {
  218.         display: none;
  219.     }
  220.  
  221.     .responsive-menu-accessible {
  222.         display: inline-block;
  223.     }
  224.  
  225.     .responsive-menu-accessible .responsive-menu-box {
  226.         display: inline-block;
  227.         vertical-align: middle;
  228.     }
  229.  
  230.     .responsive-menu-label.responsive-menu-label-top,
  231.     .responsive-menu-label.responsive-menu-label-bottom
  232.     {
  233.         display: block;
  234.         margin: 0 auto;
  235.     }
  236.  
  237.     button#responsive-menu-button {
  238.        padding: 0 0;
  239.         display: inline-block;
  240.         cursor: pointer;
  241.         transition-property: opacity, filter;
  242.         transition-duration: 0.15s;
  243.         transition-timing-function: linear;
  244.         font: inherit;
  245.         color: inherit;
  246.         text-transform: none;
  247.         background-color: transparent;
  248.         border: 0;
  249.         margin: 0;
  250.         overflow: visible;
  251.     }
  252.  
  253.     .responsive-menu-box {
  254.         width: {{ options.button_line_width }}px;
  255.         height: {{ options.button_line_height * 3 + options.button_line_margin * 2 }}px;
  256.         display: inline-block;
  257.         position: relative;
  258.     }
  259.  
  260.     .responsive-menu-inner {
  261.         display: block;
  262.         top: 50%;
  263.         margin-top: {{ options.button_line_height / -2 }}px;
  264.     }
  265.  
  266.     .responsive-menu-inner,
  267.     .responsive-menu-inner::before,
  268.     .responsive-menu-inner::after {
  269.          width: {{ options.button_line_width }}px;
  270.          height: {{ options.button_line_height }}px;
  271.          background-color: {{ options.button_line_colour }};
  272.          border-radius: 4px;
  273.          position: absolute;
  274.          transition-property: transform;
  275.          transition-duration: 0.15s;
  276.          transition-timing-function: ease;
  277.     }
  278.  
  279.     .responsive-menu-open .responsive-menu-inner,
  280.     .responsive-menu-open .responsive-menu-inner::before,
  281.     .responsive-menu-open .responsive-menu-inner::after {
  282.         background-color: {{ options.button_line_colour_active }};
  283.     }
  284.  
  285.     button#responsive-menu-button:hover .responsive-menu-inner,
  286.    button#responsive-menu-button:hover .responsive-menu-inner::before,
  287.    button#responsive-menu-button:hover .responsive-menu-inner::after,
  288.    button#responsive-menu-button:hover .responsive-menu-open .responsive-menu-inner,
  289.    button#responsive-menu-button:hover .responsive-menu-open .responsive-menu-inner::before,
  290.    button#responsive-menu-button:hover .responsive-menu-open .responsive-menu-inner::after,
  291.    button#responsive-menu-button:focus .responsive-menu-inner,
  292.    button#responsive-menu-button:focus .responsive-menu-inner::before,
  293.    button#responsive-menu-button:focus .responsive-menu-inner::after,
  294.    button#responsive-menu-button:focus .responsive-menu-open .responsive-menu-inner,
  295.    button#responsive-menu-button:focus .responsive-menu-open .responsive-menu-inner::before,
  296.    button#responsive-menu-button:focus .responsive-menu-open .responsive-menu-inner::after {
  297.        background-color: {{ options.button_line_colour_hover }};
  298.     }
  299.  
  300.     .responsive-menu-inner::before,
  301.     .responsive-menu-inner::after {
  302.          content: "";
  303.          display: block;
  304.     }
  305.  
  306.     .responsive-menu-inner::before {
  307.          top: {{ (options.button_line_margin + options.button_line_height) * -1 }}px;
  308.     }
  309.  
  310.     .responsive-menu-inner::after {
  311.          bottom: {{ (options.button_line_margin + options.button_line_height) * -1 }}px;
  312.     }
  313.  
  314.     {% if options.button_click_animation %}
  315.         {% include 'css/animations/' ~ options.button_click_animation ~ '.css.twig' %}
  316.     {% else %}
  317.         {% include 'css/animations/off.css.twig' %}
  318.     {% endif %}
  319.  
  320.     button#responsive-menu-button {
  321.        width: {{ options.button_width }}px;
  322.         height: {{ options.button_height }}px;
  323.         position: {{ options.button_position_type }};
  324.         top: {{ options.button_top }}px;
  325.         {{ options.button_left_or_right }}: {{ options.button_distance_from_side }}%;
  326.         {% if options.button_transparent_background == 'off' %}
  327.             background: {{ options.button_background_colour }}
  328.         {% endif %}
  329.     }
  330.  
  331.     {% if options.button_transparent_background == 'off' %}
  332.         .responsive-menu-open button#responsive-menu-button {
  333.            background: {{ options.button_background_colour_active }}
  334.         }
  335.     {% endif %}
  336.  
  337.     {% if options.button_transparent_background == 'off' %}
  338.         .responsive-menu-open button#responsive-menu-button:hover,
  339.        .responsive-menu-open button#responsive-menu-button:focus,
  340.        button#responsive-menu-button:hover,
  341.        button#responsive-menu-button:focus {
  342.            background: {{ options.button_background_colour_hover }}
  343.         }
  344.     {% endif %}
  345.  
  346.     button#responsive-menu-button .responsive-menu-box {
  347.        color: {{ options.button_line_colour }};
  348.     }
  349.  
  350.     .responsive-menu-open button#responsive-menu-button .responsive-menu-box {
  351.        color: {{ options.button_line_colour_active }};
  352.     }
  353.  
  354.     .responsive-menu-label {
  355.         color: {{ options.button_text_colour }};
  356.         font-size: {{ options.button_font_size }}px;
  357.         line-height: {{ options.button_title_line_height }}px;
  358.         {% if options.button_font %}
  359.             font-family: '{{ options.button_font }}';
  360.         {% endif %}
  361.     }
  362.  
  363.     button#responsive-menu-button {
  364.        display: inline-block;
  365.         transition: transform {{ ' ' ~ options.animation_speed }}s, background-color {{ ' ' ~ options.transition_speed }}s;
  366.     }
  367.  
  368.     {% if options.menu_close_on_body_click == 'on' %}
  369.         html.responsive-menu-open {
  370.             cursor: pointer;
  371.         }
  372.  
  373.         #responsive-menu-container {
  374.            cursor: initial;
  375.         }
  376.     {% endif %}
  377.  
  378.     {% if options.page_wrapper %}
  379.         {{ options.page_wrapper }} {
  380.             transition: transform {{ ' ' ~ options.animation_speed }}s;
  381.         }
  382.  
  383.         html.responsive-menu-open,
  384.         .responsive-menu-open body {
  385.             width: 100%;
  386.         }
  387.     {% endif %}
  388.  
  389.     #responsive-menu-container {
  390.        width: {{ options.menu_width }}%;
  391.         {{ options.menu_appear_from }}: 0;
  392.         transition: transform {{ ' ' ~ options.animation_speed }}s;
  393.         text-align: {{ options.menu_text_alignment }};
  394.         {% if options.menu_maximum_width %}
  395.             max-width: {{ options.menu_maximum_width }}px;
  396.         {% endif %}
  397.         {% if options.menu_minimum_width %}
  398.             min-width: {{ options.menu_minimum_width }}px;
  399.         {% endif %}
  400.         {% if options.menu_font %}
  401.             font-family: '{{ options.menu_font }}';
  402.         {% endif %}
  403.         {% if options.menu_background_image %}
  404.             background-image: url('{{ options.menu_background_image }}');
  405.             background-size: cover;
  406.         {% else %}
  407.             background: {{ options.menu_container_background_colour }};
  408.         {% endif %}
  409.     }
  410.  
  411.     #responsive-menu-container #responsive-menu-wrapper {
  412.        background: {{ options.menu_background_colour }};
  413.     }
  414.  
  415.     #responsive-menu-container #responsive-menu-additional-content {
  416.        color: {{ options.menu_additional_content_colour }};
  417.     }
  418.  
  419.     #responsive-menu-container .responsive-menu-search-box {
  420.        background: {{ options.menu_search_box_background_colour }};
  421.         border: 2px solid {{ ' ' ~ options.menu_search_box_border_colour }};
  422.         color: {{ options.menu_search_box_text_colour }};
  423.     }
  424.  
  425.     #responsive-menu-container .responsive-menu-search-box:-ms-input-placeholder {
  426.        color: {{ options.menu_search_box_placeholder_colour }};
  427.     }
  428.  
  429.     #responsive-menu-container .responsive-menu-search-box::-webkit-input-placeholder {
  430.        color: {{ options.menu_search_box_placeholder_colour }};
  431.     }
  432.  
  433.     #responsive-menu-container .responsive-menu-search-box:-moz-placeholder {
  434.        color: {{ options.menu_search_box_placeholder_colour }};
  435.         opacity: 1;
  436.     }
  437.  
  438.     #responsive-menu-container .responsive-menu-search-box::-moz-placeholder {
  439.        color: {{ options.menu_search_box_placeholder_colour }};
  440.         opacity: 1;
  441.     }
  442.  
  443.     #responsive-menu-container .responsive-menu-item-link,
  444.    #responsive-menu-container #responsive-menu-title,
  445.    #responsive-menu-container .responsive-menu-subarrow {
  446.        transition: background-color {{ ' ' ~ options.transition_speed }}s, border-color {{ ' ' ~ options.transition_speed }}s, color {{ ' ' ~  options.transition_speed }}s;
  447.     }
  448.  
  449.     #responsive-menu-container #responsive-menu-title {
  450.        background-color: {{ options.menu_title_background_colour }};
  451.         color: {{ options.menu_title_colour }};
  452.         font-size: {{ options.menu_title_font_size }}px;
  453.         text-align: {{ options.menu_title_alignment }};
  454.     }
  455.  
  456.     #responsive-menu-container #responsive-menu-title a {
  457.        color: {{ options.menu_title_colour }};
  458.         font-size: {{ options.menu_title_font_size }}px;
  459.         text-decoration: none;
  460.     }
  461.  
  462.     #responsive-menu-container #responsive-menu-title a:hover {
  463.        color: {{ options.menu_title_hover_colour }};
  464.     }
  465.  
  466.     #responsive-menu-container #responsive-menu-title:hover {
  467.        background-color: {{ options.menu_title_background_hover_colour }};
  468.         color: {{ options.menu_title_hover_colour }};
  469.     }
  470.  
  471.     #responsive-menu-container #responsive-menu-title:hover a {
  472.        color: {{ options.menu_title_hover_colour }};
  473.     }
  474.  
  475.     #responsive-menu-container #responsive-menu-title #responsive-menu-title-image {
  476.        display: inline-block;
  477.         vertical-align: middle;
  478.         max-width: 100%;
  479.         margin-bottom: 15px;
  480.     }
  481.  
  482.     #responsive-menu-container #responsive-menu-title #responsive-menu-title-image img {
  483.        {% if options.menu_title_image_height %}
  484.             height: {{ options.menu_title_image_height }}{{ options.menu_title_image_height_unit }};
  485.         {% endif %}
  486.         {% if options.menu_title_image_width %}
  487.             width: {{ options.menu_title_image_width }}{{ options.menu_title_image_width_unit }};
  488.         {% endif %}
  489.         max-width: 100%;
  490.     }
  491.  
  492.     #responsive-menu-container #responsive-menu > li.responsive-menu-item:first-child > a {
  493.        border-top: {{ options.menu_border_width }}px solid {{ options.menu_item_border_colour }};
  494.     }
  495.  
  496.     #responsive-menu-container #responsive-menu li.responsive-menu-item .responsive-menu-item-link {
  497.        font-size: {{ options.menu_font_size }}px;
  498.     }
  499.  
  500.     #responsive-menu-container #responsive-menu li.responsive-menu-item a {
  501.        line-height: {{ options.menu_links_line_height }}px;
  502.         border-bottom: {{ options.menu_border_width }}px solid {{ ' ' ~ options.menu_item_border_colour }};
  503.         color: {{ options.menu_link_colour }};
  504.         background-color: {{ options.menu_item_background_colour }};
  505.         {% if options.menu_word_wrap != 'off' %}
  506.             word-wrap: break-word;
  507.             height: auto;
  508.             padding-right: {{ options.submenu_arrow_width }}px;
  509.         {% else %}
  510.             height: {{ options.menu_links_height }}px;
  511.         {% endif %}
  512.     }
  513.  
  514.     #responsive-menu-container #responsive-menu li.responsive-menu-item a:hover {
  515.        color: {{ options.menu_link_hover_colour }};
  516.         background-color: {{ options.menu_item_background_hover_colour }};
  517.         border-color: {{ options.menu_item_border_colour_hover }};
  518.     }
  519.  
  520.     #responsive-menu-container #responsive-menu li.responsive-menu-item a:hover .responsive-menu-subarrow {
  521.        color: {{ options.menu_sub_arrow_shape_hover_colour }};
  522.         border-color: {{ options.menu_sub_arrow_border_hover_colour }};
  523.         background-color: {{ options.menu_sub_arrow_background_hover_colour }};
  524.     }
  525.  
  526.     #responsive-menu-container #responsive-menu li.responsive-menu-item a:hover .responsive-menu-subarrow.responsive-menu-subarrow-active {
  527.        color: {{ options.menu_sub_arrow_shape_hover_colour_active }};
  528.         border-color: {{ options.menu_sub_arrow_border_hover_colour_active }};
  529.         background-color: {{ options.menu_sub_arrow_background_hover_colour_active }};
  530.     }
  531.  
  532.     #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow {
  533.        {{ options.arrow_position }}: 0;
  534.         height: {{ options.submenu_arrow_height }}px;
  535.         line-height: {{ options.submenu_arrow_height }}px;
  536.         width: {{ options.submenu_arrow_width }}px;
  537.         color: {{ options.menu_sub_arrow_shape_colour }};
  538.         {% if options.arrow_position == 'left' %}
  539.         border-right: {{ options.menu_border_width }}px
  540.         {% endif %}
  541.         {% if options.arrow_position == 'right' %}
  542.         border-left: {{ options.menu_border_width }}px
  543.         {% endif %}
  544.         solid {{ options.menu_sub_arrow_border_colour }};
  545.         background-color: {{ options.menu_sub_arrow_background_colour }};
  546.     }
  547.  
  548.     #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active {
  549.        color: {{ options.menu_sub_arrow_shape_colour_active }};
  550.         border-color: {{ options.menu_sub_arrow_border_colour_active }};
  551.         background-color: {{ options.menu_sub_arrow_background_colour_active }};
  552.     }
  553.  
  554.     #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active:hover {
  555.        color: {{ options.menu_sub_arrow_shape_hover_colour_active }};
  556.         border-color: {{ options.menu_sub_arrow_border_hover_colour_active }};
  557.         background-color: {{ options.menu_sub_arrow_background_hover_colour_active }};
  558.     }
  559.  
  560.     #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow:hover {
  561.        color: {{ options.menu_sub_arrow_shape_hover_colour }};
  562.         border-color: {{ options.menu_sub_arrow_border_hover_colour }};
  563.         background-color: {{ options.menu_sub_arrow_background_hover_colour }};
  564.     }
  565.  
  566.     #responsive-menu-container #responsive-menu li.responsive-menu-current-item > .responsive-menu-item-link {
  567.        background-color: {{ options.menu_current_item_background_colour }};
  568.         color: {{ options.menu_current_link_colour }};
  569.         border-color: {{ options.menu_current_item_border_colour }};
  570.     }
  571.  
  572.     #responsive-menu-container #responsive-menu li.responsive-menu-current-item > .responsive-menu-item-link:hover {
  573.        background-color: {{ options.menu_current_item_background_hover_colour }};
  574.         color: {{ options.menu_current_link_hover_colour }};
  575.         border-color: {{ options.menu_current_item_border_hover_colour }};
  576.     }
  577.  
  578.     {# ---> Sub Menu Styles #}
  579.        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item .responsive-menu-item-link {
  580.            {% if options.submenu_font %}
  581.                 font-family: {{ "'" ~ options.submenu_font ~ "'" }};
  582.             {% endif %}
  583.             font-size: {{ options.submenu_font_size }}px;
  584.             text-align: {{ options.submenu_text_alignment }};
  585.         }
  586.  
  587.         #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a {
  588.            {% if options.menu_word_wrap != 'off' %}
  589.                 word-wrap: break-word;
  590.                 height: auto;
  591.                 padding-right: {{ options.submenu_arrow_width }}px;
  592.             {% else %}
  593.                 height: {{ options.menu_links_height }}px;
  594.             {% endif %}
  595.             line-height: {{ options.submenu_links_line_height }}px;
  596.             border-bottom: {{ options.submenu_border_width }}px solid {{ ' ' ~ options.submenu_item_border_colour }};
  597.             color: {{ options.submenu_link_colour }};
  598.             background-color: {{ options.submenu_item_background_colour }};
  599.         }
  600.  
  601.         #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a:hover {
  602.            color: {{ options.submenu_link_hover_colour }};
  603.             background-color: {{ options.submenu_item_background_hover_colour }};
  604.             border-color: {{ options.submenu_item_border_colour_hover }};
  605.         }
  606.  
  607.         #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a:hover .responsive-menu-subarrow {
  608.            color: {{ options.submenu_sub_arrow_shape_hover_colour }};
  609.             border-color: {{ options.submenu_sub_arrow_border_hover_colour }};
  610.             background-color: {{ options.submenu_sub_arrow_background_hover_colour }};
  611.         }
  612.  
  613.         #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a:hover .responsive-menu-subarrow.responsive-menu-subarrow-active {
  614.            color: {{ options.submenu_sub_arrow_shape_hover_colour_active }};
  615.             border-color: {{ options.submenu_sub_arrow_border_hover_colour_active }};
  616.             background-color: {{ options.submenu_sub_arrow_background_hover_colour_active }};
  617.         }
  618.  
  619.         #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a .responsive-menu-subarrow {
  620.            {% if options.submenu_arrow_position == 'left' %}
  621.                 left:0;
  622.                 right:unset;
  623.             {% endif %}
  624.             {% if options.submenu_arrow_position == 'right' %}
  625.                 left:unset;
  626.                 right:0;
  627.             {% endif %}
  628.             height: {{ options.submenu_submenu_arrow_height }}px;
  629.             line-height: {{ options.submenu_submenu_arrow_height }}px;
  630.             width: {{ options.submenu_submenu_arrow_width }}px;
  631.             color: {{ options.submenu_sub_arrow_shape_colour }};
  632.             {% if options.submenu_arrow_position == 'left' %}
  633.                 border-right: {{ options.submenu_border_width }}px solid {{ ' ' ~ options.submenu_sub_arrow_border_colour }}  !important;
  634.                 border-left:unset !important;
  635.             {% endif %}
  636.             {% if options.submenu_arrow_position == 'right' %}
  637.                 border-left: {{ options.submenu_border_width }}px solid {{ ' ' ~ options.submenu_sub_arrow_border_colour }}  !important;
  638.                 border-right:unset  !important;
  639.             {% endif %}
  640.             background-color: {{ options.submenu_sub_arrow_background_colour }};
  641.         }
  642.  
  643.         #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active {
  644.            color: {{ options.submenu_sub_arrow_shape_colour_active }};
  645.             border-color: {{ options.submenu_sub_arrow_border_colour_active }};
  646.             background-color: {{ options.submenu_sub_arrow_background_colour_active }};
  647.         }
  648.  
  649.         #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active:hover {
  650.            color: {{ options.submenu_sub_arrow_shape_hover_colour_active }};
  651.             border-color: {{ options.submenu_sub_arrow_border_hover_colour_active }};
  652.             background-color: {{ options.submenu_sub_arrow_background_hover_colour_active }};
  653.         }
  654.  
  655.         #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a .responsive-menu-subarrow:hover {
  656.            color: {{ options.submenu_sub_arrow_shape_hover_colour }};
  657.             border-color: {{ options.submenu_sub_arrow_border_hover_colour }};
  658.             background-color: {{ options.submenu_sub_arrow_background_hover_colour }};
  659.         }
  660.  
  661.         #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-current-item > .responsive-menu-item-link {
  662.            background-color: {{ options.submenu_current_item_background_colour }};
  663.             color: {{ options.submenu_current_link_colour }};
  664.             border-color: {{ options.submenu_current_item_border_colour }};
  665.         }
  666.  
  667.         #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-current-item > .responsive-menu-item-link:hover {
  668.            background-color: {{ options.submenu_current_item_background_hover_colour }};
  669.             color: {{ options.submenu_current_link_hover_colour }};
  670.             border-color: {{ options.submenu_current_item_border_hover_colour }};
  671.         }
  672.     {# <-- End Sub-Menu Styles #}
  673.  
  674.     {% if options.menu_background_image %}
  675.         #responsive-menu-container #responsive-menu-title,
  676.        #responsive-menu-container #responsive-menu-title:hover,
  677.        #responsive-menu-container #responsive-menu li.responsive-menu-item a,
  678.        #responsive-menu-container #responsive-menu li.responsive-menu-item a:hover,
  679.        #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow,
  680.        #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow:hover,
  681.        #responsive-menu-container #responsive-menu li.responsive-menu-item a:hover .responsive-menu-subarrow,
  682.        #responsive-menu-container #responsive-menu li.responsive-menu-item a:hover .responsive-menu-subarrow.responsive-menu-subarrow-active,
  683.        #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active,
  684.        #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active:hover,
  685.        #responsive-menu-container #responsive-menu li.responsive-menu-item.responsive-menu-current-item > .responsive-menu-item-link,
  686.        #responsive-menu-container #responsive-menu li.responsive-menu-item.responsive-menu-current-item > .responsive-menu-item-link:hover,
  687.        #responsive-menu-container #responsive-menu > li.responsive-menu-item:first-child > a,
  688.        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a,
  689.        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a:hover,
  690.        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a .responsive-menu-subarrow,
  691.        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a .responsive-menu-subarrow:hover,
  692.        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a:hover .responsive-menu-subarrow,
  693.        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a:hover .responsive-menu-subarrow.responsive-menu-subarrow-active,
  694.        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active,
  695.        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active:hover,
  696.        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item.responsive-menu-current-item > .responsive-menu-item-link,
  697.        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item.responsive-menu-current-item > .responsive-menu-item-link:hover,
  698.        #responsive-menu-container #responsive-menu ul.responsive-menu-submenu > li.responsive-menu-item:first-child > a,
  699.        #responsive-menu-container #responsive-menu-wrapper {
  700.            background: none;
  701.             border: 0;
  702.         }
  703.     {% endif %}
  704.  
  705.     {% if options.menu_to_hide %}
  706.         {{ options.menu_to_hide }} {
  707.             display: none !important;
  708.         }
  709.     {% endif %}
  710. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!