From 1345f69306cf3d7e3191efb96620736a7408cadf Mon Sep 17 00:00:00 2001 From: Vaibhav sasulkar Date: Thu, 13 Jun 2024 19:57:20 +0530 Subject: [PATCH 1/3] done --- blocks/header/header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 741e2da19..cd480986e 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -80,7 +80,7 @@ header nav .nav-hamburger button { header nav .nav-hamburger-icon, header nav .nav-hamburger-icon::before, -header nav .nav-hamburger-icon::after { +header nav .nav-hamburger-icon::after{ box-sizing: border-box; display: block; position: relative; From 88037b2314f21012579139018ea3bcbae6101f4f Mon Sep 17 00:00:00 2001 From: Smit Shah Date: Fri, 14 Jun 2024 00:28:12 +0530 Subject: [PATCH 2/3] header css added --- blocks/footer/footer.css | 106 +++++++++++++++++++++++++++++++++++++- component-definition.json | 15 ++++++ component-filters.json | 3 +- component-models.json | 11 ++++ 4 files changed, 133 insertions(+), 2 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 1976b7342..aa9689443 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,4 +1,4 @@ -footer { +/* footer { padding: 2rem; background-color: var(--light-color); font-size: var(--body-font-size-s); @@ -11,4 +11,108 @@ footer .footer { footer .footer p { margin: 0; +} */ + +footer.footer-wrapper{ + padding: 0px; + background: #365069 !important; +} +/* Footer Background Color */ + +/* Footer max Width Container */ +footer.footer-wrapper .footer{ + margin: 0 auto; + max-width: 1320px; + padding: 2rem 0.75rem; +} +.footer-wrapper p { + color: #fff; +} + +.footer-section-first { + border-bottom: 1px solid rgb(94 115 119); +} +.footer-section-second { + border-bottom: 1px solid rgb(94 115 119); + padding: 1rem; +} +.footer-section-third { + border-bottom: 1px solid rgb(94 115 119); + padding: 1rem; +} +.footer-section-second { + border-bottom: 1px solid rgb(94 115 119); + padding: 1rem; +} +.footer-section-first .columns-img-col{ +margin-bottom: 30PX; +} +.footer-section-first .columns-img-col img { + width: 9.5rem; + height: 4.25rem; +} + +.footer-section-first .columns-wrapper p { + font-size: 1rem; + line-height: 1.5rem; + font-weight: 700; + color: #fff; + text-align: right; + margin-right: 150px; +} + +.footer-section-third .columns-2-cols > div > div{ + display: flex; + gap: 20px; +} + +.footer-section-third .columns-2-cols > div > div p{ + margin-top: 1em; + font-size: .875rem; + margin-bottom: 1em; +} + +.footer-section-third .columns-2-cols > div > div:first-child img{ + width: 124px; + height: 38px; +} + +.footer-section-third .columns > div{ + display: flex; + justify-content: space-between; +} +.footer-section-third .columns > div > div:second-child { + display: flex; + justify-content: space-between; +} + +.footer-section-four .default-content-wrapper p{ + font-size: 1rem; + text-align: center; + color: rgb(175 185 195); } + +.footer-section-second .columns >div { + align-items: unset; +} +.footer-section-second ul>li>p{ + font-size: 18px; + font-weight: 700; + color: #fff; +} + +.footer-section-second ul>li> ul>li{ + font-size: 16px; + color: #fff; + margin-left: -40px; +} + +.footer-section-second ul>li::marker{ + color: transparent; +} + +/* .footer-section-second .columns ul>li> ul>li{ + font-size: 16px; + color: #fff; + margin-left: -40px; +} */ \ No newline at end of file diff --git a/component-definition.json b/component-definition.json index 5100d0bcd..619a2452f 100644 --- a/component-definition.json +++ b/component-definition.json @@ -135,6 +135,21 @@ } } } + }, + { + "title": "Product Components", + "id": "productcomponent", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/block/v1/block", + "template": { + "name": "productcomponent", + "model": "productcomponent" + } + } + } + } } ] } diff --git a/component-filters.json b/component-filters.json index 1f64a7565..338616e5a 100644 --- a/component-filters.json +++ b/component-filters.json @@ -27,7 +27,8 @@ "title", "hero", "cards", - "columns" + "columns", + "productcomponent" ] }, { diff --git a/component-models.json b/component-models.json index ef3635215..146c47bf3 100644 --- a/component-models.json +++ b/component-models.json @@ -185,5 +185,16 @@ "valueType": "string" } ] + }, + { + "id": "aem-tag-picker", + "fields": [ + { + "component": "aem-tag", + "label": "AEM Tag Picker", + "name": "cq:tags", + "valueType": "string" + } + ] } ] From 4056d0e14805d8e8057c07b72145050af1eeecfb Mon Sep 17 00:00:00 2001 From: Vaibhav sasulkar Date: Fri, 14 Jun 2024 00:31:54 +0530 Subject: [PATCH 3/3] header desktop ui done --- blocks/header/header.css | 294 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 294 insertions(+) diff --git a/blocks/header/header.css b/blocks/header/header.css index cd480986e..bc75459f8 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -273,3 +273,297 @@ header nav .nav-sections ul > li > ul > li { header nav .nav-tools { grid-area: tools; } + +/* header custom css */ + +.header-wrapper .nav-wrapper { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.05); + height: 112px; + background-color: #fff; + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + display: flex; + align-items: center; + flex-wrap: nowrap; + justify-content: flex-start; +} + +.header-wrapper .nav-wrapper nav { + display: flex; + justify-content: space-between; + max-width: 1320px; + width: 100%; + margin: 0 auto; + gap: 0; + padding: 0 12px; +} + +.header-wrapper .nav-wrapper nav .nav-brand .default-content-wrapper>picture>img { + width: 108px; + height: 58px; +} + +.header-wrapper .nav-wrapper nav .nav-sections { + display: flex; + flex-basis: auto; + background-color: #fff; + flex-grow: 1; + align-items: center; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper { + margin-left: auto; +} + +.header-wrapper .nav-wrapper nav .nav-brand .default-content-wrapper a img { + width: 100%; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li { + font-size: 16px; + font-weight: 700; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li[aria-expanded="true"]>ul { + display: flex; + flex-wrap: wrap; + gap: unset; + padding-top: 1rem; + padding-bottom: 1rem; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li[aria-expanded="true"]>ul::before { + content: unset; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li[aria-expanded="true"]>ul>li>p { + font-size: 16px; + font-weight: 700; + margin-bottom: 12px; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul>li>ul { + display: block; + width: 100%; + margin-top: 8px; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul>li>ul>li { + font-family: 'Nunito-Regular', sans-serif; + font-size: 14px; + margin-bottom: 12px; + color: rgb(51 51 51); + font-weight: 300; + line-height: normal; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li.nav-drop { + position: relative; + padding-right: 20px; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li:last-child { + margin-right: 0; +} + + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li.nav-drop { + padding-right: 20px; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li { + position: unset; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li.nav-drop { + position: unset; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul { + width: 100%; + left: 0; + padding: 0 8.7%; + background-color: rgb(239 239 239); + position: absolute; + top: 100%; + margin-top: 0; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul>li { + width: 20%; + display: flex; + flex-wrap: wrap; + padding-left: 8px; + padding-right: 8px; + height: max-content; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul>li>ul { + display: block; + width: 100%; + margin-top: 8px; +} + +.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul>li>ul>li { + font-family: 'Nunito-Regular', sans-serif; + font-size: 14px; + margin-bottom: 12px; + color: rgb(51 51 51); + font-weight: 300; + line-height: normal; +} + + +.header-wrapper .nav-wrapper nav .nav-tools .default-content-wrapper p { + min-width: 70px; + border-radius: 19px; + color: #f26841; + border: 1px solid #f26841; + text-align: center; + padding: 3px 4px 3px 12px; + font-size: 12px; + display: flex; + align-items: center; + background-color: #fef0ec; +} + +.header-wrapper .nav-wrapper nav .nav-tools .default-content-wrapper p a img { + width: 28px; + height: 28px; +} + + +@media screen and (min-width: 768px) { + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li.nav-drop[aria-expanded="true"]>picture::before { + content: ""; + position: absolute; + left: 0; + bottom: -35px; + width: calc(100% + 15px); + height: 2.5px; + background-color: #f26841; + transition: all ease 0.3s; + } +} + +@media screen and (max-width: 767.99px) { + .header-wrapper .nav-wrapper nav{ + min-height: unset !important; + } + + .header-wrapper .nav-wrapper { + height: 71px; + } + + .header-wrapper .nav-wrapper .nav-hamburger { + position: absolute; + height: 30px; + width: 30px; + right: 1rem; + } + + .header-wrapper .nav-wrapper .nav-hamburger button { + height: 30px; + width: 30px; + } + + .header-wrapper .nav-wrapper .nav-hamburger button .nav-hamburger-icon { + height: 1.5px; + background: #666666; + width: 26px; + } + + .header-wrapper .nav-wrapper .nav-hamburger button .nav-hamburger-icon::before, + .header-wrapper .nav-wrapper .nav-hamburger button .nav-hamburger-icon::after { + width: 26px; + background: #666666; + } + + .header-wrapper .nav-wrapper .nav-hamburger button .nav-hamburger-icon::before { + top: -8.5px; + } + + .header-wrapper .nav-wrapper .nav-hamburger button .nav-hamburger-icon::after { + top: 7.5px; + } + + .header-wrapper .nav-wrapper nav .nav-tools { + margin-right: calc(1rem + 30px); + } + + .header-wrapper .nav-wrapper nav .nav-sections { + display: none; + } + + .header-wrapper .nav-wrapper nav[aria-expanded="true"] .nav-sections { + display: block; + position: absolute; + top: 100%; + overflow-y: auto; + overflow-x: hidden; + height: calc(100vh - 71px); + left: 0; + background-color: rgb(250 250 250); + width: 100%; + } + + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul { + position: unset; + } + + .header-wrapper .nav-wrapper .nav-hamburger button[aria-label="Close navigation"] .nav-hamburger-icon { + width: 0; + } + + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li{ + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + padding: 16px; + } + + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul{ + background-color: transparent; + } + + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul{ + padding: 0 !important; + } + + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li[aria-expanded="true"]>ul{ + display: none; + background-color: #fff; + } + + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul>li{ + width: 100%; + background-color: #fff; + padding: 16px 12px; + padding-bottom: 0; + } + + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul>li>ul{ + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + margin-left: 0; + padding-left: 30px; + } + + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul>li:last-child > ul{ + border-bottom: 0; + } + + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li.nav-drop{ + padding-right: 0; + } + + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li.nav-drop.active > ul{ + display: flex; + } + + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul>li:last-child{ + padding-bottom: 16px; + } +} + +/* header custom css */