/** This file is major component of this plugin so please don't try to edit here. */
@if( $page_wrapper != '' ) {
#{$page_wrapper} {
transition: transform $animation_speed;
}
}
// Menu hamburger toggle styling.
@if($menu_trigger_position_type == 'inside-element'){
.admin-bar #{$menu_trigger_id}{
margin-top: 0px !important;
}
}
#{$menu_trigger_id} {
width : $menu_trigger_width;
height : $menu_trigger_height;
@if($menu_trigger_position_type == 'inside-element'){
position: relative;
}@else{
position: $menu_trigger_position_type;
}
top : $menu_trigger_distance_from_top;
border-radius: $toggle_button_border_radius + px;
display: none;
text-decoration: none;
@if ( $menu_trigger_side == right ) {
right: $menu_trigger_distance_from_side;
} @else {
left: $menu_trigger_distance_from_side;
}
@if ( $menu_trigger_transparent_background == on ) {
background: transparent;
} @else {
background: $menu_trigger_background_color;
&:hover,
&:focus {
background: $menu_trigger_background_color_hover;
text-decoration: unset;
}
&.is-active {
background: $menu_trigger_active_color;
}
}
transition: transform $animation_speed, background-color $color_transition_speed;
.rmp-trigger-box {
width: $menu_trigger_line_width + $menu_trigger_line_width_unit;
color: $menu_trigger_title_color;
}
.rmp-trigger-icon-active,
.rmp-trigger-text-open {
display: none;
}
&.is-active .rmp-trigger-icon-active,
&.is-active .rmp-trigger-text-open {
display:inline;
}
&.is-active .rmp-trigger-icon-inactive,
&.is-active .rmp-trigger-text {
display: none;
}
.rmp-trigger-label {
color: $menu_trigger_title_color;
pointer-events: none;
line-height: $menu_trigger_title_line_height;
@if( $menu_trigger_title_font != '' ) {
font-family: $menu_trigger_title_font;
} @else {
font-family: inherit
}
font-size: $menu_trigger_title_font_size;
display: inline;
text-transform: inherit;
&.rmp-trigger-label-top {
display: block;
margin-bottom: 12px;
}
&.rmp-trigger-label-bottom {
display: block;
margin-top: 12px;
}
}
.responsive-menu-pro-inner {
display: block;
}
.responsive-menu-pro-inner,
.responsive-menu-pro-inner::before,
.responsive-menu-pro-inner::after {
width: $menu_trigger_line_width + $menu_trigger_line_width_unit;
height: $menu_trigger_line_height + $menu_trigger_line_height_unit;
background-color: $menu_trigger_line_color;
border-radius: 4px;
position: absolute;
}
&.is-active .responsive-menu-pro-inner,
&.is-active .responsive-menu-pro-inner::before,
&.is-active .responsive-menu-pro-inner::after {
background-color: $menu_trigger_line_active_color;
}
&:hover .responsive-menu-pro-inner,
&:hover .responsive-menu-pro-inner::before,
&:hover .responsive-menu-pro-inner::after {
background-color: $menu_trigger_line_color_hover;
}
.responsive-menu-pro-inner::before{
top: $menu_trigger_line_margin + $menu_trigger_line_margin_unit;
}
.responsive-menu-pro-inner::after{
bottom: $menu_trigger_line_margin + $menu_trigger_line_margin_unit;
}
&.is-active .responsive-menu-pro-inner::after {
bottom: 0;
}
}
/* Hamburger menu styling */
@media screen and ( max-width: $tablet_breakpoint ) {
@if( $menu_to_hide != '' ) {
#{$menu_to_hide} {
display: none !important;
}
}
#{$menu_trigger_id} {
display: block;
}
#{$menu_container} {
position: fixed;
top: 0;
margin: 0;
transition: transform $animation_speed;
overflow: auto;
@if ( $animation_type != 'fade' ) {
display:block;
}
@if ( $menu_width ) {
width: $menu_width + $menu_width_unit;
}
@if ( $menu_maximum_width != '' ) {
max-width: $menu_maximum_width+$menu_maximum_width_unit;
}
@if ( $menu_minimum_width != '' ) {
min-width: $menu_minimum_width + $menu_minimum_width_unit;
}
background-color: $menu_container_background_colour;
@if ( $menu_container_background_image ) {
background-image: url($menu_container_background_image);
}
height: 100%;
@if ( $menu_container_appear_from == "right" ) {
right:0;
} @else {
left:0;
}
@if( $menu_container_padding_top != '' ) {
padding-top : $menu_container_padding_top;
}
@if( $menu_container_padding_left != '' ) {
padding-left : $menu_container_padding_left;
}
@if( $menu_container_padding_bottom != '' ) {
padding-bottom : $menu_container_padding_bottom;
}
@if( $menu_container_padding_right != '' ) {
padding-right : $menu_container_padding_right;
}
}
#{$menu_wrap} {
@if( $menu_section_padding_top != '' ) {
padding-top : $menu_section_padding_top;
}
@if( $menu_section_padding_left != '' ) {
padding-left : $menu_section_padding_left;
}
@if( $menu_section_padding_bottom != '' ) {
padding-bottom : $menu_section_padding_bottom;
}
@if( $menu_section_padding_right != '' ) {
padding-right : $menu_section_padding_right;
}
@if( $menu_background_color != '' ) {
background-color: $menu_background_color;
}
.rmp-menu,
.rmp-submenu {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
}
@if( $menu_container_columns != '' ) {
.rmp-menu{
display: flex;
flex-wrap: wrap;
> .rmp-menu-item{
width: $menu_container_columns;
}
}
}
// If legacy setting is on then add these settings.
@if( $is_legacy == 'on' and $submenu_item_toggle_position == left) {
.rmp-submenu-depth-1 .rmp-menu-item-link {
padding-left: ( $submenu_item_toggle_width + 10 ) + $submenu_item_toggle_width_unit;
}
}@else{
.rmp-submenu-depth-1 .rmp-menu-item-link {
padding-#{$menu_depth_side} : ( $menu_item_padding_depth_1 + $menu_item_padding_depth_1_unit);
}
}
@if( $menu_item_padding_depth_2 != '' and $menu_item_padding_depth_2_unit != '') {
.rmp-submenu-depth-2 .rmp-menu-item-link {
padding-#{$menu_depth_side} : ( $menu_item_padding_depth_2 + $menu_item_padding_depth_2_unit);
}
}
@if( $menu_item_padding_depth_3 != '' and $menu_item_padding_depth_3_unit != '') {
.rmp-submenu-depth-3 .rmp-menu-item-link {
padding-#{$menu_depth_side} : ( $menu_item_padding_depth_3 + $menu_item_padding_depth_3_unit);
}
}
@if( $menu_item_padding_depth_4 != '' and $menu_item_padding_depth_4_unit != '') {
.rmp-submenu-depth-4 .rmp-menu-item-link {
padding-#{$menu_depth_side} : ( $menu_item_padding_depth_4 + $menu_item_padding_depth_4_unit);
}
}
.rmp-submenu.rmp-submenu-open {
display: block;
}
.rmp-menu-item {
width: 100%;
list-style: none;
margin:0;
}
.rmp-menu-item-link {
@if( $menu_item_height != '' ) {
height: ( $menu_item_height + $menu_item_height_unit);
}
@if( $menu_item_line_height != '' ) {
line-height: ( $menu_item_line_height + $menu_item_line_height_unit );
}
@if( $menu_item_font_size != '' ) {
font-size: ( $menu_item_font_size + $menu_item_font_size_unit );
}
@if( $menu_item_border_width != '' ) {
border-bottom: ( $menu_item_border_width + $menu_item_border_width_unit ) solid $menu_item_border_color;
} @else {
border-bottom: ( 0 + $menu_item_border_width_unit ) solid $menu_item_border_color;
}
@if( $menu_item_font_family != '' ) {
font-family: $menu_item_font_family;
} @else {
font-family: inherit;
}
color: $menu_item_text_color;
text-align: $menu_item_text_alignment;
background-color: $menu_item_background_color;
@if( $menu_title_font_weight != '' ) {
font-weight: $menu_item_font_weight;
}
letter-spacing: ($menu_item_letter_spacing + 'px');
display: block;
box-sizing: border-box;
width: 100%;
text-decoration: none;
position: relative;
overflow: hidden;
transition: background-color $color_transition_speed, border-color $color_transition_speed, $color_transition_speed;
@if ( $menu_word_wrap == 'on' ) {
word-wrap: break-word;
height: auto;
}
padding: 0 ( $menu_item_padding + $menu_item_padding_unit);
padding-#{$menu_item_toggle_position}: ( $menu_item_toggle_width + 10 ) + $menu_item_toggle_width_unit;
&:after,
&:before{
display: none;
}
&:hover,
&:focus {
color: $menu_item_text_color_hover;
border-color: $menu_item_border_color_hover;
background-color: $menu_item_background_color_hover;
}
&:focus {
outline: none;
border-color:unset;
box-shadow:unset;
}
.rmp-font-icon {
height: ( $menu_item_height + $menu_item_height_unit);
line-height: ( $menu_item_line_height + $menu_item_line_height_unit );
margin-right: 10px;
font-size: $menu_item_font_size + $menu_item_font_size_unit;
}
}
.rmp-menu-current-item {
.rmp-menu-item-link {
color: $menu_current_item_text_color;
border-color: $menu_current_item_border_color;
background-color: $menu_current_item_background_color;
&:hover,
&:focus {
color: $menu_current_item_text_color_hover;
border-color: $menu_current_item_border_color_hover;
background-color: $menu_current_item_background_color_hover;
}
}
}
.rmp-menu-subarrow {
position: absolute;
top: 0;
bottom: 0;
text-align: center;
overflow: hidden;
background-size: cover;
overflow: hidden;
@if ( $menu_item_toggle_position == 'left' ) {
left: 0;
border-right-style:solid;
@if ( $menu_item_toggle_border_color != '' ) {
border-right-color:$menu_item_toggle_border_color;
}
border-right-width: ( $menu_item_toggle_border_width + $menu_item_toggle_border_width_unit );
} @else {
right: 0;
border-left-style:solid;
@if ( $menu_item_toggle_border_color != '' ) {
border-left-color:$menu_item_toggle_border_color;
}
border-left-width: ( $menu_item_toggle_border_width + $menu_item_toggle_border_width_unit );
}
height: ($menu_item_toggle_height + $menu_item_toggle_height_unit);
width: ( $menu_item_toggle_width + $menu_item_toggle_width_unit );
color: $menu_item_toggle_text_color;
svg{
fill: $menu_item_toggle_text_color;
}
background-color: $menu_item_toggle_background_color;
&:hover {
@if ( $menu_item_toggle_text_color_hover != '' ) {
color: $menu_item_toggle_text_color_hover;
svg{
fill: $menu_item_toggle_text_color_hover;
}
}
@if ( $menu_item_toggle_border_color_hover != '' ) {
border-color: $menu_item_toggle_border_color_hover;
}
background-color: $menu_item_toggle_background_color_hover;
}
.rmp-font-icon {
margin-right: unset;
}
* {
vertical-align: middle;
line-height: ($menu_item_toggle_height + $menu_item_toggle_height_unit);
}
}
.rmp-menu-subarrow-active {
display: block;
background-size: cover;
@if ( $menu_current_item_toggle_text_color != '' ) {
color: $menu_current_item_toggle_text_color;
svg{
fill: $menu_current_item_toggle_text_color;
}
}
@if ( $menu_current_item_toggle_border_color != '' ) {
border-color: $menu_current_item_toggle_border_color;
}
background-color: $menu_current_item_toggle_background_color;
&:hover {
@if ( $menu_current_item_toggle_text_color_hover != '' ) {
color: $menu_current_item_toggle_text_color_hover;
svg{
fill: $menu_current_item_toggle_text_color_hover;
}
}
@if ( $menu_current_item_toggle_border_color_hover != '' ) {
border-color: $menu_current_item_toggle_border_color_hover;
}
background-color: $menu_current_item_toggle_background_color_hover;
}
}
.rmp-submenu {
display: none;
.rmp-menu-item-link {
@if( $submenu_item_height != '' ) {
height: ( $submenu_item_height + $submenu_item_height_unit );
}
@if( $submenu_item_line_height != '' ) {
line-height: ( $submenu_item_line_height + $submenu_item_line_height_unit );
}
letter-spacing: ($submenu_text_letter_spacing + px);
@if( $submenu_item_font_size != '' ) {
font-size: ( $submenu_item_font_size + $submenu_item_font_size_unit );
}
@if( $submenu_item_border_width != '' ) {
border-bottom: ( $submenu_item_border_width + $submenu_item_border_width_unit ) solid $submenu_item_border_color;
} @else {
border-bottom: ( 0 + $submenu_item_border_width_unit ) solid $submenu_item_border_color;
}
@if( $submenu_item_font_family != '' ) {
font-family: $submenu_item_font_family;
} @else {
font-family: inherit;
}
font-weight: $submenu_font_weight;
color: $submenu_item_text_color;
text-align: $submenu_item_text_alignment;
background-color: $submenu_item_background_color;
&:hover,
&:focus {
color: $submenu_item_text_color_hover;
@if( $submenu_item_border_color_hover != '' ) {
border-color: $submenu_item_border_color_hover;
}
background-color: $submenu_item_background_color_hover;
}
}
.rmp-menu-current-item {
.rmp-menu-item-link {
color: $submenu_current_item_text_color;
@if( $submenu_current_item_border_color != '' ) {
border-color: $submenu_current_item_border_color;
}
background-color: $submenu_current_item_background_color;
&:hover,
&:focus {
color: $submenu_current_item_text_color_hover;
@if( $submenu_current_item_border_color_hover != '' ) {
border-color: $submenu_current_item_border_color_hover;
}
background-color: $submenu_current_item_background_color_hover;
}
}
}
// If legacy setting is on then add these settings.
@if( $is_legacy == 'on' ) {
.rmp-menu-subarrow {
@if ( $submenu_item_toggle_position == 'left' ) {
left: 0;
border-left: unset;
border-right-style:solid;
border-right-color:$submenu_item_toggle_border_color;
border-right-width: ( $submenu_item_toggle_border_width + $submenu_item_toggle_border_width_unit );
} @else {
right: 0;
border-right: unset;
border-left-style:solid;
border-left-color:$submenu_item_toggle_border_color;
border-left-width: ( $submenu_item_toggle_border_width + $submenu_item_toggle_border_width_unit );
}
height: ($submenu_item_toggle_height + $submenu_item_toggle_height_unit);
line-height: ($submenu_item_toggle_height + $submenu_item_toggle_height_unit);
width: ( $submenu_item_toggle_width + $submenu_item_toggle_width_unit );
color: $submenu_item_toggle_text_color;
background-color: $submenu_item_toggle_background_color;
&:hover {
color: $submenu_item_toggle_text_color_hover;
border-color: $submenu_item_toggle_border_color_hover;
background-color: $submenu_item_toggle_background_color_hover;
}
}
.rmp-menu-subarrow-active {
color: $submenu_current_item_toggle_text_color;
border-color: $submenu_current_item_toggle_border_color;
background-color: $submenu_current_item_toggle_background_color;
&:hover {
color: $submenu_current_item_toggle_text_color_hover;
border-color: $submenu_current_item_toggle_border_color_hover;
background-color: $submenu_current_item_toggle_background_color_hover;
}
}
}
}
.rmp-menu-item-description {
margin: 0;
padding: 5px ( $menu_item_padding + $menu_item_padding_unit);
opacity: 0.8;
color: $menu_item_text_color;
}
}
#{$menu_search_box_wrap} {
display: block;
@if( $menu_search_section_padding_top != '' ) {
padding-top : $menu_search_section_padding_top;
}
@if( $menu_search_section_padding_left != '' ) {
padding-left : $menu_search_section_padding_left;
}
@if( $menu_search_section_padding_bottom != '' ) {
padding-bottom : $menu_search_section_padding_bottom;
}
@if( $menu_search_section_padding_right != '' ) {
padding-right : $menu_search_section_padding_right;
}
.rmp-search-form {
margin: 0;
}
.rmp-search-box {
background: $menu_search_box_background_color;
@if( $menu_search_box_border_color != '' ) {
border: 1px solid $menu_search_box_border_color;
}
color: $menu_search_box_text_color;
width: 100%;
padding: 0 5%;
@if( $menu_search_box_border_radius != '' ) {
border-radius: $menu_search_box_border_radius;
}
height: ( $menu_search_box_height + $menu_search_box_height_unit );
-webkit-appearance: none;
&::placeholder {
color : $menu_search_box_placeholder_color;
}
&:focus {
background-color: $menu_search_box_background_color;
@if( $menu_search_box_border_color != '' ) {
outline:2px solid $menu_search_box_border_color;
}
color: $menu_search_box_text_color;
}
}
}
/** Menu Title Style */
#{$menu_title_wrap} {
background-color: $menu_title_background;
@if( $menu_title_font_color != '' ) {
color: $menu_title_font_color;
}
@if( $menu_title_text_alignment != '' ) {
text-align: $menu_title_text_alignment;
}
@if( $menu_title_font_size != '' ) {
font-size: $menu_title_font_size;
}
@if( $menu_title_section_padding_top != '' ) {
padding-top : $menu_title_section_padding_top;
}
@if( $menu_title_section_padding_left != '' ) {
padding-left : $menu_title_section_padding_left;
}
@if( $menu_title_section_padding_bottom != '' ) {
padding-bottom : $menu_title_section_padding_bottom;
}
@if( $menu_title_section_padding_right != '' ) {
padding-right : $menu_title_section_padding_right;
}
@if( $menu_title_font_family != '' ) {
font-family : $menu_title_font_family;
}
@if( $menu_title_font_weight != '' ) {
font-weight: $menu_title_font_weight;
}
transition: background-color $color_transition_speed, border-color $color_transition_speed, color $color_transition_speed;
&:hover {
background-color: $menu_title_background_hover;
color:$menu_title_font_color_hover;
}
& > .rmp-menu-title-link {
color: $menu_title_font_color;
width: 100%;
background-color: unset;
text-decoration: none;
&:hover {
color:$menu_title_font_color_hover;
}
}
.rmp-font-icon {
font-size: $menu_title_font_size;
}
.rmp-menu-title-image {
@if( $menu_title_image_width != '' ) {
width: $menu_title_image_width;
}
@if( $menu_title_image_height != '' ) {
height: $menu_title_image_height;
}
}
}
/** Menu Additional Content Style */
#{$menu_additional_content_wrap} {
@if( $menu_additional_section_padding_top != '' ) {
padding-top : $menu_additional_section_padding_top;
}
@if( $menu_additional_section_padding_left != '' ) {
padding-left : $menu_additional_section_padding_left;
}
@if( $menu_additional_section_padding_bottom != '' ) {
padding-bottom : $menu_additional_section_padding_bottom;
}
@if( $menu_additional_section_padding_right != '' ) {
padding-right : $menu_additional_section_padding_right;
}
@if( $menu_additional_content_color != '' ) {
color: $menu_additional_content_color;
}
@if( $menu_additional_content_alignment != '' ) {
text-align: $menu_additional_content_alignment;
}
@if( $menu_additional_content_font_size != '' ) {
font-size: ($menu_additional_content_font_size + $menu_additional_content_font_size_unit) ;
}
}
}