ofco/mccans-theme
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

shop changes

Browse Source
This commit is contained in:
Kurtis Holsapple
2025-06-25 16:04:19 -07:00
parent 8d33ce2dc7
commit b0635919b1
30 changed files with 550 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
dist/app.css vendored
View File

@@ -12327,7 +12327,7 @@ input, label, textarea {
.top-bar a.account-button {
border: 0;
text-transform: uppercase;
color: #ae1716;
color: #c80000;
font-weight: bold;
background: transparent;
text-decoration: none;
@@ -12342,16 +12342,31 @@ input, label, textarea {
}
.main-nav {
z-index: 3;
padding: 2rem 0;
position: relative;
z-index: 2;
}
.main-nav .logo-wrapper {
.shop-nav {
z-index: 2;
padding: 1rem 0;
}
.shop-nav #menu-shop-navigation {
justify-content: center;
width: 100%;
}
.shop-nav .menu-shop-navigation-container {
width: 100%;
}
.main-nav, .shop-nav {
position: relative;
}
.main-nav .logo-wrapper, .shop-nav .logo-wrapper {
max-width: 400px;
width: 20%;
}
@media (max-width: 991.98px) {
.main-nav .logo-wrapper {
.main-nav .logo-wrapper, .shop-nav .logo-wrapper {
width: 100%;
display: flex;
justify-content: space-between;
@@ -12359,69 +12374,69 @@ input, label, textarea {
gap: 3rem;
align-items: center;
}
.main-nav .logo-wrapper img {
.main-nav .logo-wrapper img, .shop-nav .logo-wrapper img {
max-width: 250px;
}
.main-nav .logo-wrapper a {
.main-nav .logo-wrapper a, .shop-nav .logo-wrapper a {
color: #000;
}
.main-nav .logo-wrapper svg {
.main-nav .logo-wrapper svg, .shop-nav .logo-wrapper svg {
width: 50px;
height: 50px;
}
}
@media (max-width: 575.98px) {
.main-nav .logo-wrapper {
.main-nav .logo-wrapper, .shop-nav .logo-wrapper {
gap: 1rem !important;
}
}
@media (min-width: 992px) {
.main-nav .logo-wrapper #mobile-nav-toggle {
.main-nav .logo-wrapper #mobile-nav-toggle, .shop-nav .logo-wrapper #mobile-nav-toggle {
display: none;
}
}
.main-nav .logo-wrapper #mobile-nav-toggle svg:first-of-type {
.main-nav .logo-wrapper #mobile-nav-toggle svg:first-of-type, .shop-nav .logo-wrapper #mobile-nav-toggle svg:first-of-type {
display: block;
}
.main-nav .logo-wrapper #mobile-nav-toggle svg:last-of-type {
.main-nav .logo-wrapper #mobile-nav-toggle svg:last-of-type, .shop-nav .logo-wrapper #mobile-nav-toggle svg:last-of-type {
display: none;
}
.mobile-nav-open .main-nav .logo-wrapper #mobile-nav-toggle svg:first-of-type {
.mobile-nav-open .main-nav .logo-wrapper #mobile-nav-toggle svg:first-of-type, .mobile-nav-open .shop-nav .logo-wrapper #mobile-nav-toggle svg:first-of-type {
display: none;
}
.mobile-nav-open .main-nav .logo-wrapper #mobile-nav-toggle svg:last-of-type {
.mobile-nav-open .main-nav .logo-wrapper #mobile-nav-toggle svg:last-of-type, .mobile-nav-open .shop-nav .logo-wrapper #mobile-nav-toggle svg:last-of-type {
display: block;
}
.main-nav .logo-wrapper img {
.main-nav .logo-wrapper img, .shop-nav .logo-wrapper img {
width: 100%;
}
.main-nav nav.main-nav {
.main-nav nav.main-nav, .main-nav nav.shop-nav, .shop-nav nav.main-nav, .shop-nav nav.shop-nav {
display: none;
width: 100%;
}
.mobile-nav-open .main-nav nav.main-nav {
.mobile-nav-open .main-nav nav.main-nav, .mobile-nav-open .main-nav nav.shop-nav, .mobile-nav-open .shop-nav nav.main-nav, .mobile-nav-open .shop-nav nav.shop-nav {
display: flex;
flex-direction: column;
}
@media (min-width: 992px) {
.main-nav nav.main-nav {
.main-nav nav.main-nav, .main-nav nav.shop-nav, .shop-nav nav.main-nav, .shop-nav nav.shop-nav {
display: flex;
width: auto;
}
}
.main-nav .menu-main-menu-container {
.main-nav .menu-main-menu-container, .main-nav .menu-shop-navigation-container, .shop-nav .menu-main-menu-container, .shop-nav .menu-shop-navigation-container {
display: flex;
align-items: center;
}
@media (max-width: 991.98px) {
.main-nav .menu-main-menu-container {
.main-nav .menu-main-menu-container, .main-nav .menu-shop-navigation-container, .shop-nav .menu-main-menu-container, .shop-nav .menu-shop-navigation-container {
width: 100%;
}
.main-nav .menu-main-menu-container > ul {
.main-nav .menu-main-menu-container > ul, .main-nav .menu-shop-navigation-container > ul, .shop-nav .menu-main-menu-container > ul, .shop-nav .menu-shop-navigation-container > ul {
width: 100%;
}
}
.main-nav #menu-main-menu {
.main-nav #menu-main-menu, .main-nav #menu-shop-navigation, .shop-nav #menu-main-menu, .shop-nav #menu-shop-navigation {
display: flex;
margin: 0;
padding: 0;
@@ -12429,20 +12444,20 @@ input, label, textarea {
gap: 1rem;
}
@media (max-width: 991.98px) {
.main-nav #menu-main-menu {
.main-nav #menu-main-menu, .main-nav #menu-shop-navigation, .shop-nav #menu-main-menu, .shop-nav #menu-shop-navigation {
flex-direction: column;
}
}
.main-nav #menu-main-menu a {
.main-nav #menu-main-menu a, .main-nav #menu-shop-navigation a, .shop-nav #menu-main-menu a, .shop-nav #menu-shop-navigation a {
text-transform: uppercase;
color: #000;
text-decoration: none;
}
.main-nav #menu-main-menu > li {
.main-nav #menu-main-menu > li, .main-nav #menu-shop-navigation > li, .shop-nav #menu-main-menu > li, .shop-nav #menu-shop-navigation > li {
position: relative;
}
@media (min-width: 1200px) {
.main-nav #menu-main-menu > li:hover > ul {
.main-nav #menu-main-menu > li:hover > ul, .main-nav #menu-shop-navigation > li:hover > ul, .shop-nav #menu-main-menu > li:hover > ul, .shop-nav #menu-shop-navigation > li:hover > ul {
display: block;
position: absolute;
top: 100%;
@@ -12453,7 +12468,7 @@ input, label, textarea {
padding: 10px 15px;
transform: translate(-5px, -5px);
}
.main-nav #menu-main-menu > li:hover > ul li a {
.main-nav #menu-main-menu > li:hover > ul li a, .main-nav #menu-shop-navigation > li:hover > ul li a, .shop-nav #menu-main-menu > li:hover > ul li a, .shop-nav #menu-shop-navigation > li:hover > ul li a {
padding-top: 5px;
padding-bottom: 5px;
display: inline-block;
@@ -12461,25 +12476,25 @@ input, label, textarea {
}
}
@media (max-width: 991.98px) {
.main-nav #menu-main-menu > li.children-showing ul {
.main-nav #menu-main-menu > li.children-showing ul, .main-nav #menu-shop-navigation > li.children-showing ul, .shop-nav #menu-main-menu > li.children-showing ul, .shop-nav #menu-shop-navigation > li.children-showing ul {
display: flex;
flex-direction: column;
list-style-type: none;
}
.main-nav #menu-main-menu > li.children-showing ul li {
.main-nav #menu-main-menu > li.children-showing ul li, .main-nav #menu-shop-navigation > li.children-showing ul li, .shop-nav #menu-main-menu > li.children-showing ul li, .shop-nav #menu-shop-navigation > li.children-showing ul li {
position: relative;
}
.main-nav #menu-main-menu > li.children-showing ul a {
.main-nav #menu-main-menu > li.children-showing ul a, .main-nav #menu-shop-navigation > li.children-showing ul a, .shop-nav #menu-main-menu > li.children-showing ul a, .shop-nav #menu-shop-navigation > li.children-showing ul a {
width: 100%;
}
.main-nav #menu-main-menu > li.children-showing .toggle-sub-nav {
.main-nav #menu-main-menu > li.children-showing .toggle-sub-nav, .main-nav #menu-shop-navigation > li.children-showing .toggle-sub-nav, .shop-nav #menu-main-menu > li.children-showing .toggle-sub-nav, .shop-nav #menu-shop-navigation > li.children-showing .toggle-sub-nav {
transform: rotate(180deg);
}
}
.main-nav #menu-main-menu ul {
.main-nav #menu-main-menu ul, .main-nav #menu-shop-navigation ul, .shop-nav #menu-main-menu ul, .shop-nav #menu-shop-navigation ul {
display: none;
}
.main-nav .toggle-sub-nav {
.main-nav .toggle-sub-nav, .shop-nav .toggle-sub-nav {
width: 16px;
height: 16px;
background-image: url("/wp-content/themes/mccans-theme/assets/chevron-down.svg");
@@ -12490,7 +12505,7 @@ input, label, textarea {
background-color: transparent;
}
@media (max-width: 991.98px) {
.main-nav .toggle-sub-nav {
.main-nav .toggle-sub-nav, .shop-nav .toggle-sub-nav {
width: 30px;
height: 30px;
position: absolute;
@@ -12539,7 +12554,7 @@ footer.site-footer nav#social-nav ul a {
}
footer.site-footer nav#social-nav ul a:hover {
background-color: #fff;
color: #ae1716;
color: #c80000;
}
footer.site-footer .logo-col {
max-width: 336px;
@@ -12695,7 +12710,7 @@ footer.sub-footer {
font-size: 20px;
}
.testimonials-section .testimonials .slick-dots li.slick-active button:before {
color: #ae1716;
color: #c80000;
}
.testimonials-section .testimonials .testimonial {
background: #fff;
@@ -13062,11 +13077,17 @@ div.product-tile a.learn-more, div.page-tile a.learn-more {
.page-tile h2, .page-tile .h2 {
text-align: left !important;
font-size: 32px !important;
line-height: 37px !important;
font-size: 24px !important;
line-height: 30px !important;
text-transform: uppercase;
margin: 1rem 0;
}
@media (min-width: 1200px) {
.page-tile h2, .page-tile .h2 {
font-size: 32px !important;
line-height: 37px !important;
}
}
.category-slice-top {
background-color: #f2f2f2;
@@ -13158,7 +13179,7 @@ div.product-tile a.learn-more, div.page-tile a.learn-more {
height: 500px;
}
.post-type-archive-location .location-tile h2, .post-type-archive-location .location-tile .h2 {
color: #ae1716;
color: #c80000;
text-transform: uppercase;
margin-bottom: 0;
}
@@ -13206,3 +13227,21 @@ div.product-tile a.learn-more, div.page-tile a.learn-more {
.search-results .tile-wrapper {
margin-bottom: 1.5rem;
}
.category-sub-cats-wrapper .sub-cats {
flex-wrap: wrap;
margin-top: 2rem;
}
.category-sub-cats-wrapper .sub-cats .page-tile {
width: 100%;
}
@media (min-width: 768px) {
.category-sub-cats-wrapper .sub-cats .page-tile {
width: calc(50% - 0.5rem);
}
}
@media (min-width: 992px) {
.category-sub-cats-wrapper .sub-cats .page-tile {
width: calc(25% - 0.75rem);
}
}