0ct0pu5/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Refactor mini-cart for better a11y in mobile views.

Browse source
This commit is contained in:
Allan Cole 2019-10-24 12:11:02 -04:00
parent 199740a2c1
commit 2789e7c298
8 changed files with 130 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
varia/inc/woocommerce.php
View file

@ -185,15 +185,29 @@ function varia_add_cart_menu( $nav, $args ) {
if ( $args->theme_location == 'menu-1' ) {
return sprintf(
'%1$s
<li class="menu-item woocommerce-menu-item %6$s" title="%2$s">
%4$s
</ul></div>
<input type="checkbox" role="button" aria-haspopup="true" id="woocommerce-toggle" class="hide-visually">
<label for="woocommerce-toggle" id="toggle-cart" class="button">%2$s %3$s
<span class="dropdown-icon open">+</span>
<span class="dropdown-icon close">×</span>
<span class="hide-visually expanded-text">%4$s</span>
<span class="hide-visually collapsed-text">%5$s</span>
</label>
<div class="woocommerce-menu-container">
<ul id="woocommerce-menu" class="main-menu" aria-label="submenu">
<li class="menu-item woocommerce-menu-item %10$s" title="%6$s">
%8$s
<ul class="sub-menu">
<li class="woocommerce-cart-widget" title="%3$s">
%5$s
<li class="woocommerce-cart-widget" title="%7$s">
%9$s
</li>
</ul>
</li>',
$nav,
varia_get_icon_svg( 'shopping_cart', 16 ),
esc_html__( 'Cart', 'varia' ),
esc_html__( 'expanded', 'varia' ),
esc_html__( 'collapsed', 'varia' ),
esc_attr__( 'View your shopping cart', 'varia' ),
esc_attr__( 'View your shopping list', 'varia' ),
varia_cart_link(),

4
varia/sass/components/header/_site-main-navigation.scss
View file

@ -16,7 +16,7 @@
}
// Checkbox hack
#toggle:checked ~ div {
#toggle:checked ~ div:not(.woocommerce-menu-container) {
display: block;
}
@ -43,7 +43,7 @@
@include media(mobile) {
& > div {
display: block;
display: inline-block;
}
#toggle-menu {

48
varia/sass/vendors/woocommerce/components/_mini-cart.scss vendored
View file

@ -11,6 +11,44 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
.main-navigation {
// Mobile menu toggle
#toggle-cart {
display: inline-block;
margin: 0;
}
// Checkbox hack
#woocommerce-toggle:checked ~ div {
display: block;
}
#woocommerce-toggle:focus + #toggle-cart {
background-color: #{map-deep-get($config-header, "main-nav", "color", "link-hover")};
outline: inherit;
text-decoration: underline;
}
#woocommerce-toggle:checked + #toggle-cart {
.open {
display: none;
}
.close {
display: inline;
}
}
@include media(mobile) {
& > div:not(:last-of-type) {
margin-right: #{ 2 * map-deep-get($config-global, "spacing", "horizontal")};
}
#toggle-cart {
display: none;
}
}
.woocommerce-cart-link {
text-decoration: none;
@ -34,16 +72,6 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
height: #{map-deep-get($config-header, "main-nav", "font", "size")};
width: #{map-deep-get($config-header, "main-nav", "font", "size")};
}
& + .sub-menu {
padding: 0 #{map-deep-get($config-header, "main-nav", "link-padding")};
}
@include media(mobile) {
& + .sub-menu {
padding: 0;
}
}
}
.woocommerce-cart-widget {

4
varia/style-editor.css
View file

@ -1085,7 +1085,7 @@ body:not(.fse-enabled) .site-description {
margin: 0;
}
.main-navigation #toggle:checked ~ div {
.main-navigation #toggle:checked ~ div:not(.woocommerce-menu-container) {
display: block;
}
@ -1109,7 +1109,7 @@ body:not(.fse-enabled) .site-description {
@media only screen and (min-width: 560px) {
.main-navigation > div {
display: block;
display: inline-block;
}
.main-navigation #toggle-menu {
display: none;

4
varia/style-rtl.css
View file

@ -2457,7 +2457,7 @@ body:not(.fse-enabled) .site-description {
margin: 0;
}
.main-navigation #toggle:checked ~ div {
.main-navigation #toggle:checked ~ div:not(.woocommerce-menu-container) {
display: block;
}
@ -2481,7 +2481,7 @@ body:not(.fse-enabled) .site-description {
@media only screen and (min-width: 560px) {
.main-navigation > div {
display: block;
display: inline-block;
}
.main-navigation #toggle-menu {
display: none;

46
varia/style-woocommerce-rtl.css
View file

@ -732,6 +732,38 @@ body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_c
text-decoration: none;
}
body[class*="woocommerce"] #page .main-navigation #toggle-cart {
display: inline-block;
margin: 0;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~ div {
display: block;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #toggle-cart {
background-color: indigo;
outline: inherit;
text-decoration: underline;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked + #toggle-cart .open {
display: none;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked + #toggle-cart .close {
display: inline;
}
@media only screen and (min-width: 560px) {
body[class*="woocommerce"] #page .main-navigation > div:not(:last-of-type) {
margin-left: 32px;
}
body[class*="woocommerce"] #page .main-navigation #toggle-cart {
display: none;
}
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
text-decoration: none;
line-height: 1;
@ -756,16 +788,6 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .svg-ic
width: 1.2rem;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
padding: 0 16px;
}
@media only screen and (min-width: 560px) {
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
padding: 0;
}
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
background-color: white;
color: #444444;
@ -781,11 +803,11 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list {
border-bottom: 1px solid #FAFAFA;
border-bottom: 1px solid #DDDDDD;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list li {
border-top: 1px solid #FAFAFA;
border-top: 1px solid #DDDDDD;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a.remove:hover,

42
varia/style-woocommerce.css
View file

@ -732,6 +732,38 @@ body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_c
text-decoration: none;
}
body[class*="woocommerce"] #page .main-navigation #toggle-cart {
display: inline-block;
margin: 0;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~ div {
display: block;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #toggle-cart {
background-color: indigo;
outline: inherit;
text-decoration: underline;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked + #toggle-cart .open {
display: none;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked + #toggle-cart .close {
display: inline;
}
@media only screen and (min-width: 560px) {
body[class*="woocommerce"] #page .main-navigation > div:not(:last-of-type) {
margin-right: 32px;
}
body[class*="woocommerce"] #page .main-navigation #toggle-cart {
display: none;
}
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
text-decoration: none;
line-height: 1;
@ -756,16 +788,6 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .svg-ic
width: 1.2rem;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
padding: 0 16px;
}
@media only screen and (min-width: 560px) {
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
padding: 0;
}
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
background-color: white;
color: #444444;

4
varia/style.css
View file

@ -2474,7 +2474,7 @@ body:not(.fse-enabled) .site-description {
margin: 0;
}
.main-navigation #toggle:checked ~ div {
.main-navigation #toggle:checked ~ div:not(.woocommerce-menu-container) {
display: block;
}
@ -2498,7 +2498,7 @@ body:not(.fse-enabled) .site-description {
@media only screen and (min-width: 560px) {
.main-navigation > div {
display: block;
display: inline-block;
}
.main-navigation #toggle-menu {
display: none;