Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Header designs with focus on Mobile #55

Merged
merged 1 commit into from
Nov 14, 2023
Merged

Header designs with focus on Mobile #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions assets/css/woocommerce.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
.wc-block-product-on-sale .wc-block-grid__product-add-to-cart a{
width:100%!important;
}

.tab-included-products.chained_items_container li{
font-size: var(--wp--preset--font-size--x-small) !important;
line-height: 20px;
Expand Down Expand Up @@ -614,6 +615,25 @@
.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link, table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link{
color:#FF0000!important;
}
.woocommerce .woocommerce-info .button{
background-color: var(--wp--preset--color--secondary);
border-radius: 0;
border-width: 0;
color: var(--wp--preset--color--base);
font-family: inherit;
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700;
line-height: inherit;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-decoration: none;
}

/* Bundles ---------------------------------------------------------------------------- */
.bundle_sells_title h3{
Expand Down Expand Up @@ -729,4 +749,8 @@
font-size:36px;
text-align: center;
}
.woocommerce-cart-form__contents .cart_item.chained_item{display:none!important;}

.woocommerce .woocommerce-info .button{width:100%!important;}

}
5 changes: 4 additions & 1 deletion includes/patterns/header/header-default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,8 @@

<!-- wp:navigation {"layout":{"type":"flex","orientation":"horizontal"},"style":{"spacing":{"blockGap":"20px"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->',
<!-- /wp:group -->


',
);
14 changes: 14 additions & 0 deletions parts/header-cta.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!-- wp:group {"className":"header-cta has-base-background-color has-background"} -->
<div class="wp-block-group header-cta has-base-background-color has-background"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"20px","bottom":"10px"},"margin":{"top":"0px"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-contrast-color has-base-background-color has-text-color has-background has-link-color" style="margin-top:0px;padding-top:20px;padding-bottom:10px"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"className":"cta-row","layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide cta-row" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:site-logo {"width":100} /-->

<!-- wp:navigation {"icon":"menu","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"1.25rem"},"typography":{"lineHeight":"1"}}} /-->
<!-- wp:buttons {"className":"cta"} -->
<div class="wp-block-buttons cta"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">CTA Button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
19 changes: 9 additions & 10 deletions parts/header-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<!-- wp:group {"style":"backgroundColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-background-color has-background">
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"20px","bottom":"10px"},"margin":{"top":"0px"}}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-contrast-background-color has-background" style="margin-top:0px;padding-top:20px;padding-bottom:10px"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:site-logo {"width":100} /-->
<!-- wp:navigation {"textColor":"base","layout":{"type":"flex","orientation":"horizontal"},"style":{"spacing":{"blockGap":"var:preset|spacing|x-small"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"header-default has-base-background-color has-background"} -->
<div class="wp-block-group header-default has-base-background-color has-background"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"20px","bottom":"10px"},"margin":{"top":"0px"}}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-contrast-background-color has-background" style="margin-top:0px;padding-top:20px;padding-bottom:10px"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:site-logo {"width":100} /-->

<!-- wp:navigation {"textColor":"base","overlayBackgroundColor":"contrast","overlayTextColor":"base","layout":{"type":"flex","orientation":"horizontal"},"style":{"spacing":{"blockGap":"var:preset|spacing|x-small"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
26 changes: 11 additions & 15 deletions parts/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
<!-- wp:group {"style":"backgroundColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-background-color has-background">
<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|x-small","right":"0","bottom":"var:preset|spacing|x-small","left":"0"},"blockGap":"0"}},"layout":{"inherit":true,"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--x-small);padding-right:0;padding-bottom:var(--wp--preset--spacing--x-small);padding-left:0"><!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
<div class="wp-block-group alignwide" style="margin-top:0;margin-bottom:0"><!-- wp:group {"layout":{"type":"flex"}} -->
<div class="wp-block-group"><!-- wp:site-logo {"width":120} /-->
</div>
<!-- /wp:group -->

<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"1.25rem"},"typography":{"lineHeight":"1"}}} /-->
</div>
<!-- /wp:group --></div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- wp:group {"style":{"position":{"type":""}},"className":"header-default has-base-background-color has-background"} -->
<div class="wp-block-group header-default has-base-background-color has-background"><!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|x-small","right":"0","bottom":"var:preset|spacing|x-small","left":"0"},"blockGap":"0"}},"layout":{"inherit":true,"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--x-small);padding-right:0;padding-bottom:var(--wp--preset--spacing--x-small);padding-left:0"><!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
<div class="wp-block-group alignwide" style="margin-top:0;margin-bottom:0"><!-- wp:group {"layout":{"type":"flex"}} -->
<div class="wp-block-group"><!-- wp:site-logo /--></div>
<!-- /wp:group -->

<!-- wp:navigation {"icon":"menu","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"1.25rem"},"typography":{"lineHeight":"1"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
8 changes: 4 additions & 4 deletions parts/woo-header-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"backgroundColor":"contrast","textColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-color has-contrast-background-color has-text-color has-background has-link-color"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"backgroundColor":"contrast","textColor":"base","className":"woo-default","layout":{"type":"constrained"}} -->
<div class="wp-block-group woo-default has-base-color has-contrast-background-color has-text-color has-background has-link-color"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|x-small","top":"var:preset|spacing|x-small"}}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small)"><!-- wp:group {"layout":{"type":"flex"}} -->
<div class="wp-block-group"><!-- wp:site-logo {"width":169} /--></div>
<!-- /wp:group -->

<!-- wp:navigation {"textColor":"base","icon":"menu","overlayBackgroundColor":"contrast","overlayTextColor":"base","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"},"style":{"spacing":{"blockGap":"var:preset|spacing|x-small"},"typography":{"fontSize":"18px"}}} /-->
<!-- wp:navigation {"textColor":"base","backgroundColor":"contrast","icon":"menu","overlayBackgroundColor":"contrast","overlayTextColor":"base","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"1.25rem"},"typography":{"lineHeight":"1"}}} /-->

<!-- wp:group {"className":"minicart","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group minicart"><!-- wp:woocommerce/mini-cart {"addToCartBehaviour":"open_drawer","fontFamily":"primary","fontSize":"small"} /-->
<div class="wp-block-group minicart"><!-- wp:woocommerce/mini-cart {"addToCartBehaviour":"open_drawer","hasHiddenPrice":true,"fontSize":"small"} /-->

<!-- wp:woocommerce/customer-account {"displayStyle":"icon_only","iconClass":"wc-block-customer-account__account-icon","fontSize":"small"} /--></div>
<!-- /wp:group --></div>
Expand Down
8 changes: 4 additions & 4 deletions parts/woo-header-light.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<!-- wp:group {"className":"woo-default","layout":{"type":"constrained"}} -->
<div class="wp-block-group woo-default"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|x-small","top":"var:preset|spacing|x-small"}}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small)"><!-- wp:group {"layout":{"type":"flex"}} -->
<div class="wp-block-group"><!-- wp:site-logo {"width":169} /--></div>
<!-- /wp:group -->

<!-- wp:navigation {"textColor":"contrast","icon":"menu","overlayBackgroundColor":"base","overlayTextColor":"contrast","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"},"style":{"spacing":{"blockGap":"var:preset|spacing|x-small"},"typography":{"fontSize":"18px"}}} /-->
<!-- wp:navigation {"ref":1832,"icon":"menu","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"1.25rem"},"typography":{"lineHeight":"1"}}} /-->

<!-- wp:group {"className":"minicart","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group minicart"><!-- wp:woocommerce/mini-cart {"addToCartBehaviour":"open_drawer","fontFamily":"primary","fontSize":"small"} /-->
<div class="wp-block-group minicart"><!-- wp:woocommerce/mini-cart {"addToCartBehaviour":"open_drawer","hasHiddenPrice":true,"fontSize":"small"} /-->

<!-- wp:woocommerce/customer-account {"displayStyle":"icon_only","iconClass":"wc-block-customer-account__account-icon","fontSize":"small"} /--></div>
<!-- /wp:group --></div>
Expand Down
Loading
Loading