woocommerce/storefront
2
0
Fork 0
mirror of https://github.com/woocommerce/storefront.git synced 2025-08-21 04:11:59 +08:00
Code Issues Packages Wiki Activity Actions

automate the styling of the menu toggle button. closes #342

Browse source
This commit is contained in:
James Koster 2016-03-15 15:57:26 +00:00
parent 63afa8d5d5
commit f66f11ce9d
2 changed files with 30 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

18
assets/sass/components/_menu.scss
View file

@ -9,10 +9,18 @@
display: none;
}
.menu-toggle {
button.menu-toggle {
cursor: pointer;
text-align: left;
float: right;
border: 2px solid transparent;
box-shadow: none;
border-radius: 2px;
background-image: none;
&:hover {
background-image: none;
}
&:before {
font-family: "FontAwesome";
@ -22,6 +30,14 @@
}
}
.toggled {
button.menu-toggle {
&:before {
content: "\f00d";
}
}
}
.primary-navigation {
display: none;
}

17
inc/customizer/class-storefront-customizer.php
View file

@ -479,10 +479,17 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
.site-title a,
ul.menu li a,
.site-branding h1 a,
.site-footer .storefront-handheld-footer-bar a:not(.button) {
.site-footer .storefront-handheld-footer-bar a:not(.button),
button.menu-toggle,
button.menu-toggle:hover {
color: ' . $header_link_color . ';
}
button.menu-toggle,
button.menu-toggle:hover {
border-color: ' . $header_link_color . ';
}
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-title a:hover,
@ -494,7 +501,6 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
}
.site-header,
.main-navigation ul ul,
.secondary-navigation ul ul,
.main-navigation ul.menu > li.menu-item-has-children:after,
.secondary-navigation ul.menu ul,
@ -502,7 +508,9 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
.main-navigation ul.nav-menu ul,
.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.search .site-search {
.storefront-handheld-footer-bar ul li.search .site-search,
button.menu-toggle,
button.menu-toggle:hover {
background-color: ' . $header_background_color . ';
}
@ -607,7 +615,8 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
color: ' . storefront_adjust_color_brightness( $header_text_color, $brighten_factor ) . ';
}
.main-navigation ul.menu ul {
.main-navigation ul.menu ul,
.main-navigation ul ul {
background-color: ' . $header_background_color . ';
}