From 00f1229563cb071bca07938c244c026060e98b8a Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 25 Apr 2024 12:37:17 +0530 Subject: [PATCH 01/88] Merged Footer CSS to JS --- blocks/footer/footer-dev.css | 28 -------------- blocks/footer/footer.css | 73 ------------------------------------ blocks/footer/footer.js | 9 +++++ build-css.js | 4 -- styles/styles.css | 59 ++++++++++++++++++----------- styles/tailwind.css | 11 ------ 6 files changed, 47 insertions(+), 137 deletions(-) delete mode 100644 blocks/footer/footer-dev.css delete mode 100644 blocks/footer/footer.css diff --git a/blocks/footer/footer-dev.css b/blocks/footer/footer-dev.css deleted file mode 100644 index 898303027..000000000 --- a/blocks/footer/footer-dev.css +++ /dev/null @@ -1,28 +0,0 @@ - -.sticky-footer { - @apply fixed w-full flex gap-x-2 justify-center bottom-3 px-5 transition z-10; - } - - .sticky-footer button, .sticky-footer a { - @apply gap-x-2 px-3.5 py-2.5 text-white bg-danahergray-900 hover:bg-danaherpurple-500; - } - - .sticky-footer svg.users { - @apply fill-transparent; - } - - .sticky-footer .btn-group a:first-child { - @apply !rounded-l-full; - } - - .sticky-footer .btn-group button:last-child { - @apply !rounded-r-full; - } - - .sticky-footer button.accessibility { - @apply gap-x-1 px-2.5 py-2.5 text-white rounded-full bg-danahergray-900 hover:bg-danaherpurple-500; - } - - .sticky-footer button.accessibility svg { - @apply fill-none stroke-white; - } diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css deleted file mode 100644 index b53e30393..000000000 --- a/blocks/footer/footer.css +++ /dev/null @@ -1,73 +0,0 @@ -.sticky-footer { - position: fixed; - bottom: 0.75rem; - z-index: 10; - display: flex; - width: 100%; - justify-content: center; - -moz-column-gap: 0.5rem; - column-gap: 0.5rem; - padding-left: 1.25rem; - padding-right: 1.25rem; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms -} - -.sticky-footer button, .sticky-footer a { - -moz-column-gap: 0.5rem; - column-gap: 0.5rem; - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); - padding-left: 0.875rem; - padding-right: 0.875rem; - padding-top: 0.625rem; - padding-bottom: 0.625rem; - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)) -} - -.sticky-footer button:hover, .sticky-footer a:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)) -} - -.sticky-footer svg.users { - fill: transparent -} - -.sticky-footer .btn-group a:first-child { - border-top-left-radius: 9999px !important; - border-bottom-left-radius: 9999px !important -} - -.sticky-footer .btn-group button:last-child { - border-top-right-radius: 9999px !important; - border-bottom-right-radius: 9999px !important -} - -.sticky-footer button.accessibility { - -moz-column-gap: 0.25rem; - column-gap: 0.25rem; - border-radius: 9999px; - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); - padding-left: 0.625rem; - padding-right: 0.625rem; - padding-top: 0.625rem; - padding-bottom: 0.625rem; - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)) -} - -.sticky-footer button.accessibility:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)) -} - -.sticky-footer button.accessibility svg { - fill: none; - stroke: #fff -} diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 80cddb8d4..529cb19c0 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -11,6 +11,15 @@ function scrollToTop() { function generateStickyFooter(stickyFooter) { const stickyFooterClone = stickyFooter[0].cloneNode(true); + stickyFooterClone.classList.add(...'fixed w-full flex gap-x-2 justify-center bottom-3 px-5 transition z-10'.split(' ')); + const firstButton = stickyFooterClone.querySelectorAll('button:not(.accessibility), a'); + firstButton.forEach((btn, index) => { + if (index === 0) btn?.classList.add('rounded-l-full'); + else btn?.classList.add('rounded-r-full'); + btn?.classList.add(...'gap-x-2 px-3.5 py-2.5 text-white bg-danahergray-900 hover:bg-danaherpurple-500'.split(' ')); + }); + stickyFooterClone.querySelector('svg.users')?.classList.add('fill-transparent'); + stickyFooterClone.querySelector('button.accessibility')?.classList.add(...'gap-x-1 px-2.5 py-2.5 text-white rounded-full bg-danahergray-900 hover:bg-danaherpurple-500'.split(' ')); const accessibeBtn = stickyFooterClone.children[stickyFooterClone.children.length - 1]; const topBtn = stickyFooterClone.querySelector('button.scroll-top'); topBtn.addEventListener('click', scrollToTop); diff --git a/build-css.js b/build-css.js index 2c5d4dd30..a868fb55c 100644 --- a/build-css.js +++ b/build-css.js @@ -22,10 +22,6 @@ const fileMappings = [ input: './blocks/timeline/timeline-dev.css', output: './blocks/timeline/timeline.css', }, - { - input: './blocks/footer/footer-dev.css', - output: './blocks/footer/footer.css', - }, { input: './blocks/side-nav/side-nav-dev.css', output: './blocks/side-nav/side-nav.css', diff --git a/styles/styles.css b/styles/styles.css index ecf6fa27d..20faf0fe2 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -846,27 +846,6 @@ main .section.carousel-container { display: inline-flex; } -.btn-group>.btn { - border-radius: 0px; -} - -.btn-group>.btn:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-offset-width: 0px; -} - -.btn-group>.btn:first-child { - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; -} - -.btn-group>.btn:last-child { - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; -} - /* START OF CORE STYLES */ .btn-primary-purple { @@ -1151,6 +1130,10 @@ header { bottom: 0px; } +.bottom-3 { + bottom: 0.75rem; +} + .bottom-4 { bottom: 1rem; } @@ -2368,11 +2351,21 @@ header { border-bottom-left-radius: 0.25rem; } +.rounded-l-full { + border-top-left-radius: 9999px; + border-bottom-left-radius: 9999px; +} + .rounded-r { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } +.rounded-r-full { + border-top-right-radius: 9999px; + border-bottom-right-radius: 9999px; +} + .rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; @@ -2515,6 +2508,11 @@ header { background-color: rgb(118 118 118 / var(--tw-bg-opacity)); } +.bg-danahergray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + .bg-danaherlightblue-50 { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -2596,6 +2594,10 @@ header { fill: currentColor; } +.fill-transparent { + fill: transparent; +} + .stroke-black { stroke: #000; } @@ -2709,16 +2711,31 @@ header { padding-right: 0.5rem; } +.px-2\.5 { + padding-left: 0.625rem; + padding-right: 0.625rem; +} + .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } +.px-3\.5 { + padding-left: 0.875rem; + padding-right: 0.875rem; +} + .px-4 { padding-left: 1rem; padding-right: 1rem; } +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; diff --git a/styles/tailwind.css b/styles/tailwind.css index 210f80879..972a936d3 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -125,17 +125,6 @@ @apply relative inline-flex; } - .btn-group>.btn { - @apply rounded-none focus:ring-0 focus:ring-offset-0; - } - - .btn-group>.btn:first-child { - @apply rounded-tl rounded-bl; - } - - .btn-group>.btn:last-child { - @apply rounded-tr rounded-br; - } /* START OF CORE STYLES */ .btn-primary-purple { From dcfc5842b799f0ad1c2c9ebd3dc19b1a275467f4 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Mon, 29 Apr 2024 10:23:55 +0530 Subject: [PATCH 02/88] 968 [SEO] Do we still need Typekit? --- styles/fonts.css | 1 - 1 file changed, 1 deletion(-) diff --git a/styles/fonts.css b/styles/fonts.css index 837260550..5c4a9ec0e 100644 --- a/styles/fonts.css +++ b/styles/fonts.css @@ -1,4 +1,3 @@ -@import url("https://use.typekit.net/oip4drb.css"); @font-face { font-family: roboto; From 0b2c10940ff2b17ff3396a492227b68a668b797d Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Mon, 29 Apr 2024 13:50:44 +0530 Subject: [PATCH 03/88] 1017 [SEO] Remove We See code and library --- blocks/we-see/we-see.js | 30 - fragments/wesee.html | 721 ------------------ .../convert/test/fixtures/en-converted.html | 6 - tools/actions/convert/test/fixtures/en.html | 1 - tools/importer/transformers/index.js | 2 - tools/importer/transformers/weSee.js | 8 - 6 files changed, 768 deletions(-) delete mode 100644 blocks/we-see/we-see.js delete mode 100644 fragments/wesee.html delete mode 100644 tools/importer/transformers/weSee.js diff --git a/blocks/we-see/we-see.js b/blocks/we-see/we-see.js deleted file mode 100644 index a51a69352..000000000 --- a/blocks/we-see/we-see.js +++ /dev/null @@ -1,30 +0,0 @@ -import { loadScript } from '../../scripts/lib-franklin.js'; -import { getFragmentFromFile } from '../../scripts/scripts.js'; - -export default async function decorate(block) { - try { - // get the content - const fragment = await getFragmentFromFile('/fragments/wesee.html'); - block.innerHTML = ''; - if (fragment) { - block.innerHTML = fragment; - // prepare the animations - await loadScript('https://unpkg.com/scroll-out/dist/scroll-out.min.js'); - // eslint-disable-next-line no-undef - ScrollOut({ - // eslint-disable-next-line func-names, object-shorthand - onShown: function (el) { - const ani = el.getAttribute('data-animation'); - el.classList.remove(ani); - // eslint-disable-next-line no-void - void el.offsetWidth; - el.classList.add(ani); - }, - }); - } - } catch (e) { - block.textContent = ''; - // eslint-disable-next-line no-console - console.warn(`cannot load we see snippet: ${e}`); - } -} diff --git a/fragments/wesee.html b/fragments/wesee.html deleted file mode 100644 index 46e4f891b..000000000 --- a/fragments/wesee.html +++ /dev/null @@ -1,721 +0,0 @@ -<div class="outer"> - <div id="wesee-main" class="main relative mx-auto max-w-7xl px-4 lg:px-0 pt-6 pb-6"> - <div class="mx-auto lg:max-w-4xl px-4 mt-2 mb-12 lg:mb-0 z-10"> - <h1 class="heading rellax" data-scroll data-animation="fadeInGrowFast"> - We see a way to accelerate the drug development time curve by 50% - </h1> - </div> - <div class="section1 relative"> - <div - class="text-rap rellax z-10" - data-rellax-speed="0" - data-scroll - data-animation="fadeInLeftUp" - > - <h2>We partner deep</h2> - <p class="my-2 md:my-4"> - The right team will help you achieve measurably improved outcomes in utilization, cost, - capacity, risk, and time. By offering you one point of contact, we source the right - expertise from Danaher Life Sciences’ entire ecosystem of engineering, science, and - technology innovators. - </p> - <a class="cta h-full" href="/us/en/expert.html">Talk to an Expert</a> - </div> - <div class="img-rap rellax" data-rellax-speed="1" data-scroll data-animation="fadeInUp"> - <picture> - <source type="image/webp" srcset="/images/wesee/scientist-microscope.webp"> - <img loading="lazy" class="w-full h-full object-cover" alt="scientist" src="/images/wesee/scientist-microscope.png"> - </picture> - </div> - </div> - <div - class="bubble1 rellax rounded-full flex flex-col items-center justify-center" - data-rellax-speed="0" - > - <div class="text-left" data-scroll data-animation="fadeInGrow"> - <p class="heading">We see a way</p> - <p>to identify high</p> - <p>producers in</p> - <p class="number"><15</p> - <p>minutes in cell</p> - <p>line development</p> - </div> - </div> - <div class="section2 relative"> - <div class="text-rap rellax" data-rellax-speed="1" data-scroll data-animation="fadeInRightUp"> - <h2 data-scroll>Integrated workflows</h2> - <p class="my-2 md:my-4"> - Critical to your team and unique to Danaher are Solution Architects, who look at your - entire bioprocess—not just fragments of it— to eliminate bottlenecks, pain points, and - redundant steps along your R&D pathway. How? We innovatively integrate, automate, and - digitalize your complex workflows— end to end—to deliver quantifiable value across your - labs. - </p> - <a class="cta h-full" href="/us/en/solutions.html">See Our Workflows</a> - </div> - <div class="img-rap rellax" data-rellax-speed="2" data-scroll data-animation="fadeInUp"> - <picture> - <source type="image/webp" srcset="/images/wesee/automation.webp"> - <img loading="lazy" class="w-full h-full object-cover" alt="Echo 525" src="/images/wesee/automation.png"> - </picture> - </div> - </div> - <div - class="bubble2 rellax rounded-full flex flex-col items-center justify-center" - data-rellax-speed="1" - > - <div class="text-left pl-5" data-scroll data-animation="fadeInGrow"> - <div><span class="font-medium">We see a way</span> to cut</div> - <p>the per-sample cost</p> - <p>of purifying AAV by</p> - <p class="number">250x</p> - <p>vs affinity chromatography</p> - </div> - </div> - <div class="section3 relative"> - <div class="text-rap rellax" data-rellax-speed="1" data-scroll data-animation="fadeInLeftUp"> - <h2>Driving efficiency</h2> - <p class="my-2 md:my-4"> - The Danaher Business System powers our constant cycle of change and improvement. This - unique approach allows our exceptional people to develop innovative recommendations, then - realize them using world-class solutions and products to construct sustainable processes, - resulting in superior outcomes. - </p> - <a class="cta h-full" href="/us/en/about-us/danaher-business-system.html">See Our Process</a> - </div> - <div class="img-rap rellax" data-rellax-speed="2" data-scroll data-animation="fadeInUp"> - <picture> - <source type="image/webp" srcset="/images/wesee/petri-dish.webp"> - <img loading="lazy" class="w-full h-full object-cover" alt="petri dish" src="/images/wesee/petri-dish.png"> - </picture> - </div> - </div> - <div - class="bubble3 rellax rounded-full flex flex-col items-center justify-center" - data-rellax-speed="1" - > - <div class="text-left pl-8" data-scroll data-animation="fadeInGrow"> - <p><span class="font-medium">We see a way</span> to save over</p> - <p class="number">14,000</p> - <p>hours of manual data-handling</p> - <p>time per year in a cell line</p> - <p>development department</p> - </div> - </div> - </div> -</div> - -<style> - html { - scroll-behavior: smooth; - } - - .section.we-see-container { - overflow: hidden !important; - background: #fcf6fe; - background: linear-gradient(90deg, #fcf6fe, #efedfe); - } - - .main { - font-family: fort; - min-width: 360px; - font-size: 18px; - font-weight: 400; - line-height: 1.25; - } - - .main, - h1.heading { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); - } - - h1.heading { - text-align: center; - text-transform: capitalize; - margin-bottom: -4.5rem; - font-size: 47px; - font-weight: 500; - line-height: 1.125; - } - - h2 { - font-size: 36px; - font-weight: 500; - } - - .text-rap, - h1 { - z-index: 10; - } - - .cta { - display: inline-block; - margin-top: 1.5rem; - border-radius: 0.5rem; - padding-left: 1.25rem; - padding-right: 1.25rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 500; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, - opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 0.15s; - } - - .cta:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) - var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) - var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-offset-width: 1px; - } - - .cta { - border: 1px solid #6b4098; - background: hsla(0, 0%, 100%, 0.1); - color: #6b4098; - font-size: 20px; - } - - .cta:hover, - cta:active { - background: #6b4098; - color: #fff; - } - - @media (max-width: 12440px) { - .section1 { - height: 750px; - } - - .section1 .text-rap { - max-width: 22.5rem; - position: absolute; - top: 11rem; - left: 17%; - } - - .section1 .img-rap { - position: absolute; - top: 3.5rem; - right: 0; - width: 52%; - height: 40.5rem; - } - - .section2 { - height: 650px; - margin-top: 2rem; - } - - .section2 .text-rap { - max-width: 24rem; - position: absolute; - top: -2rem; - right: 17%; - } - - .section2 .img-rap { - position: absolute; - top: 0; - left: 0; - height: 36.5rem; - width: 50%; - } - - .section3 { - height: 840px; - } - - .section3 .text-rap { - max-width: 30rem; - position: absolute; - top: 0; - left: 7%; - } - - .section3 .img-rap { - position: absolute; - top: 5rem; - right: 0; - width: 56%; - height: 32.5rem; - } - - .bubble1 { - height: 24rem; - width: 24rem; - background: #e4f1fc; - position: absolute; - top: 26%; - left: 2rem; - z-index: 10; - color: #6b4098; - font-size: 26px; - font-weight: 400; - } - - .bubble1 .heading { - font-weight: 500; - color: #6b4098; - } - - .bubble1 .number { - font-size: 144px; - font-weight: 300; - letter-spacing: 2px; - line-height: 1; - } - - .bubble2 { - height: 27.5rem; - width: 27.5rem; - background: #e6dbf1; - position: absolute; - top: 52%; - right: 2rem; - z-index: 10; - color: #6b4098; - font-size: 26px; - font-weight: 400; - } - - .bubble2 .heading { - display: inline-block; - font-weight: 500; - color: #6b4098; - } - - .bubble2 .number { - font-size: 144px; - font-weight: 300; - letter-spacing: 2px; - line-height: 1; - } - - .bubble3 { - height: 32.5rem; - width: 32.5rem; - background: #e4f1fc; - position: absolute; - top: 77%; - left: 4rem; - z-index: 10; - color: #6b4098; - font-size: 26px; - font-weight: 400; - } - - .bubble3 .heading { - font-weight: 700; - color: #6b4098; - } - - .bubble3 .number { - font-size: 144px; - font-weight: 300; - letter-spacing: 2px; - line-height: 1; - } - } - - @media (max-width: 1023px) { - .section1 { - height: 29rem; - } - - .section1 .text-rap { - max-width: 50%; - position: relative; - top: 7rem; - left: 0; - } - - .section1 .img-rap { - position: absolute; - top: 2.5rem; - right: 0; - width: 52%; - height: 36.5rem; - } - - .bubble1 { - position: relative; - top: revert; - left: 4rem; - height: 21rem; - width: 21rem; - font-size: 22px; - } - - .bubble1 .number { - font-size: 128px; - } - - .section2 { - height: 24rem; - margin-top: 2rem; - } - - .section2 .text-rap { - max-width: 50%; - right: 4%; - } - - .section2 .img-rap { - position: absolute; - top: 0; - left: 0; - height: 33.5rem; - width: 53%; - } - - .bubble2 { - top: 0; - left: 46%; - height: 23.5rem; - width: 23.5rem; - font-size: 22px; - position: relative; - } - - .bubble2 .number { - font-size: 128px; - } - - .section3 { - height: 24rem; - margin-top: 2rem; - } - - .section3 .text-rap { - top: 0; - left: 0; - position: relative; - max-width: 30rem; - } - - .section3 .img-rap { - width: 42%; - height: 81%; - } - - .bubble3 { - position: relative; - top: -5rem; - left: 3%; - } - - .cta { - background: hsla(0, 0%, 100%, 0.6); - color: #6b4098; - } - } - - @media (max-width: 768px) { - h1.heading { - font-size: 36px; - font-weight: 600; - line-height: 1.125; - text-align: center; - } - - .section1 { - height: 24rem; - } - - .section1 .text-rap { - position: relative; - top: 4rem; - max-width: 56%; - } - - .section1 .img-rap { - position: absolute; - top: 2rem; - left: 53%; - width: 47%; - height: 100%; - } - - .section2 { - margin-top: 1rem; - height: 26rem; - } - - .section2 .text-rap { - position: relative; - top: 2rem; - left: 0; - left: 50%; - max-width: 50%; - } - - .section2 .img-rap { - position: absolute; - top: 0; - left: 0; - width: 51%; - height: 100%; - } - - .section3 { - height: 21rem; - margin-top: 2rem; - } - - .section3 .text-rap { - position: relative; - top: revert; - right: revert; - left: revert; - max-width: 63%; - } - - .section3 .img-rap { - position: absolute; - top: 0; - width: 58%; - height: 97%; - left: 53%; - } - - .bubble1 { - position: relative; - top: revert; - left: revert; - height: 20rem; - width: 20rem; - margin: auto; - font-size: 18px; - } - - .bubble1 .number { - font-size: 110px; - } - - .bubble2 { - position: relative; - top: revert; - left: revert; - right: revert; - height: 20rem; - width: 20rem; - margin: auto; - font-size: 18px; - } - - .bubble2 .number { - font-size: 110px; - } - - .bubble3 { - position: relative; - top: revert; - left: revert; - right: revert; - height: 20rem; - width: 20rem; - margin: auto; - font-size: 18px; - } - - .bubble3 .number { - font-size: 90px; - } - } - - @media (max-width: 767px) { - h1.heading { - font-size: 32px; - font-weight: 600; - line-height: 1.125; - text-align: left; - } - - h2 { - font-size: 26px; - } - - .section1 { - height: auto; - } - - .section1 .text-rap { - position: relative; - top: 4rem; - max-width: 100%; - border-radius: 1em; - } - - .section1 .img-rap { - position: relative; - top: 7px; - left: 32%; - width: 75%; - height: 68%; - } - - .section2 { - margin-top: 0; - height: auto; - } - - .section2 .text-rap { - position: relative; - top: 1rem; - right: revert; - left: revert; - max-width: 100%; - } - - .section2 .img-rap { - position: relative; - width: 75%; - height: 45%; - } - - .section3 { - height: 31.5rem; - margin-top: 1rem; - } - - .section3 .text-rap { - position: relative; - top: revert; - right: revert; - left: revert; - max-width: 100%; - } - - .section3 .img-rap { - position: relative; - left: 31%; - width: 91%; - height: 47%; - } - - .bubble1 { - position: relative; - top: revert; - left: revert; - height: 20rem; - width: 20rem; - margin: auto; - font-size: 18px; - } - - .bubble1 .number { - font-size: 110px; - } - - .bubble2 { - position: relative; - top: revert; - left: revert; - right: revert; - height: 20rem; - width: 20rem; - margin: auto; - font-size: 18px; - } - - .bubble2 .number { - font-size: 110px; - } - - .bubble3 { - position: relative; - top: revert; - left: revert; - right: revert; - height: 20rem; - width: 20rem; - margin: auto; - font-size: 18px; - } - - .bubble3 .number { - font-size: 90px; - } - } - - @keyframes fadeInLeftUp-4453a1f9 { - 0% { - opacity: 0; - transform: translate3d(0, 35%, 0); - } - - to { - opacity: 1; - transform: translateZ(0); - } - } - - .fadeInLeftUp { - animation: fadeInLeftUp-4453a1f9 1.5s; - } - - @keyframes fadeInRightUp-4453a1f9 { - 0% { - opacity: 0; - transform: translate3d(0, 35%, 0); - } - - to { - opacity: 1; - transform: translateZ(0); - } - } - - .fadeInRightUp { - animation: fadeInRightUp-4453a1f9 1.5s; - } - - @keyframes fadeInUp-4453a1f9 { - 0% { - opacity: 0; - transform: translate3d(0, 35%, 0); - } - - to { - opacity: 1; - transform: translateZ(0); - } - } - - .fadeInUp { - animation: fadeInUp-4453a1f9 1s; - } - - @keyframes fadeInGrow-4453a1f9 { - 0% { - opacity: 0; - transform: scale3d(0, 0, 0); - } - - to { - opacity: 1; - transform: scaleX(1); - } - } - - .fadeInGrow { - animation: fadeInGrow-4453a1f9 1.5s; - } - - .fadeInGrowFast { - animation: fadeInGrow-4453a1f9 1.4s; - } -</style> diff --git a/tools/actions/convert/test/fixtures/en-converted.html b/tools/actions/convert/test/fixtures/en-converted.html index d48ead3a3..a74e24208 100644 --- a/tools/actions/convert/test/fixtures/en-converted.html +++ b/tools/actions/convert/test/fixtures/en-converted.html @@ -126,12 +126,6 @@ <h2>Innovatively integrated solutions from Danaher Life Sciences</h2> </div> </div> <hr> - <div class="we-see"> - <div> - <div></div> - </div> - </div> - <hr> <div class="columns"> <div> <div> diff --git a/tools/actions/convert/test/fixtures/en.html b/tools/actions/convert/test/fixtures/en.html index 046f173c7..2c2714898 100644 --- a/tools/actions/convert/test/fixtures/en.html +++ b/tools/actions/convert/test/fixtures/en.html @@ -643,7 +643,6 @@ <h2 data-v-3bc57c87="" class="inline-flex leading-10 text-danahergray-900" style </template> </logo-cloud> </div> -<div class="wesee aem-GridColumn aem-GridColumn--default--12"><wesee></wesee></div> <div class="container-fullwidth aem-GridColumn aem-GridColumn--default--12"> <fulllayout class="max-w-7xl mx-auto w-full"> diff --git a/tools/importer/transformers/index.js b/tools/importer/transformers/index.js index 57c3d49c9..bf246b46b 100644 --- a/tools/importer/transformers/index.js +++ b/tools/importer/transformers/index.js @@ -21,7 +21,6 @@ import articles from './sideBarArticles.js'; import cardList from './cardList.js'; import pdfEmbed from './pdfEmbed.js'; import fullLayout from './fullLayoutSection.js'; -import weSee from './weSee.js'; import metadata from './metadata.js'; import testmonial from './testmonial.js'; import bannerAEM from './bannerAEM.js'; @@ -70,7 +69,6 @@ export const transformers = [ pdfEmbed, takeaway, fullLayout, - weSee, testmonial, bannerAEM, product, diff --git a/tools/importer/transformers/weSee.js b/tools/importer/transformers/weSee.js deleted file mode 100644 index 2f4f05860..000000000 --- a/tools/importer/transformers/weSee.js +++ /dev/null @@ -1,8 +0,0 @@ -/* global WebImporter */ -const createWeSee = (main, document) => { - const weSee = main.querySelector('wesee'); - if (weSee) { - weSee.after(WebImporter.DOMUtils.createTable([['We See'], ['']], document), document.createElement('hr')); - } -}; -export default createWeSee; From f5433393456403d5bf70a4e3fe9723ad505a4d08 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Mon, 29 Apr 2024 16:16:33 +0530 Subject: [PATCH 04/88] updated README.md --- styles/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/README.md b/styles/README.md index d122c8872..8126ba4a5 100644 --- a/styles/README.md +++ b/styles/README.md @@ -3,7 +3,7 @@ ## Fonts Main fonts are: -- `Fort` +- `TWKLausannePan` - `Inter` (for paragraphs and `h3` in cards) Fallback font is `Roboto`. @@ -12,7 +12,7 @@ Fallback font is `Roboto`. - `.text-[sm,xl]` - `.font-[bold,semibold,medium]` -- `.text-[lg,xl,2xl,11rem,leading-10]` - `text-11-rem`is used to render the percentange number in "wesee" element; .`text-leading-10` for section titles (like the one of the logo-cloud element) +- `.text-[lg,xl,2xl,leading-10]` - .`text-leading-10` for section titles (like the one of the logo-cloud element) - `.text-[left,center,right]` - `.uppercase` From dda89dd6bc18e8082358bedfa9e90491a577bbfa Mon Sep 17 00:00:00 2001 From: David Zochowski <david.zochowski@dhlifesciences.com> Date: Mon, 29 Apr 2024 08:19:14 -0400 Subject: [PATCH 05/88] updating coveo events --- blocks/header/header.txt | 709 +++++++++++++++++++++++++++++++++++++++ scripts/delayed.js | 7 +- 2 files changed, 714 insertions(+), 2 deletions(-) create mode 100644 blocks/header/header.txt diff --git a/blocks/header/header.txt b/blocks/header/header.txt new file mode 100644 index 000000000..b1316e14f --- /dev/null +++ b/blocks/header/header.txt @@ -0,0 +1,709 @@ +import { + span, div, a, input, button, +} from '../../scripts/dom-builder.js'; +import { decorateIcons } from '../../scripts/lib-franklin.js'; +import { + getAuthorization, getCommerceBase, isLoggedInUser, + makeCoveoApiRequest, +} from '../../scripts/commerce.js'; +import { getCookie } from '../../scripts/scripts.js'; + +const baseURL = getCommerceBase(); + +const COVEO_SEARCH_HUB = 'DanaherMainSearch'; +const COVEO_PIPELINE = 'Danaher Marketplace'; +const COVEO_MAX_RECENT_SEARCHES = 3; + +let selectedSuggestionIndex = -1; + +function shortName(user) { + if (user) { + return `${user.fname[0].toUpperCase()}${user.lname[0].toUpperCase()}`; + } + return ''; +} + +function getUser() { + if (isLoggedInUser()) { + return { fname: getCookie('first_name'), lname: getCookie('last_name') }; + } + return undefined; +} + +function formatSuggestionString(highlightedText, inputText) { + return highlightedText.replace(/\[([^\]]+)\]/g, inputText ? '<span class="font-bold">$1</span>' : '$1').replace(/\{([^}]+)\}/g, '$1'); +} + +function getMenuIdFromPath(menuPath) { + const menuPathTokens = menuPath.split('|'); + const menuId = menuPathTokens.join('--').toLowerCase().replace(' ', '-'); + return menuId; +} + +function getRecentSearches() { + const recentSearchesString = localStorage.getItem('coveo-recent-queries'); + const recentSearches = recentSearchesString ? JSON.parse(recentSearchesString) : []; + return recentSearches; +} + +function setRecentSearches(searchValue) { + const recentSearches = getRecentSearches(); + const searchValueIndex = recentSearches.findIndex((search) => search === searchValue); + if (searchValueIndex > -1) recentSearches.splice(searchValueIndex, 1); + recentSearches.unshift(searchValue); + localStorage.setItem('coveo-recent-queries', JSON.stringify(recentSearches.slice(0, COVEO_MAX_RECENT_SEARCHES))); +} + +function toggleSearchBoxMobile(e) { + e.preventDefault(); + const searchBox = document.querySelector('.mobile-search'); + searchBox.classList.toggle('show', '!block'); + if (!searchBox.classList.contains('show')) searchBox.querySelector('input').focus(); +} + +function getCoveoApiPayload(searchValue, type) { + const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; + const userTimestamp = new Date().toISOString(); + const clientId = getCookie('coveo_visitorId'); + const searchHistoryString = localStorage.getItem('__coveo.analytics.history'); + const searchHistory = searchHistoryString ? JSON.parse(searchHistoryString) : []; + const payload = { + analytics: { + clientId, + clientTimestamp: userTimestamp, + documentLocation: window.location.href, + documentReferrer: document.referrer, + originContext: 'Search', + }, + locale: 'en', + pipeline: COVEO_PIPELINE, + q: searchValue, + searchHub: COVEO_SEARCH_HUB, + timezone: userTimeZone, + visitorId: clientId, + }; + + if (type === 'search') { + payload.actionsHistory = searchHistory.map(({ time, value, name }) => ({ time, value, name })); + payload.clientId = clientId; + payload.clientTimestamp = userTimestamp; + payload.originContext = 'Search'; + payload.count = 8; + payload.referrer = document.referrer; + } + return payload; +} + +async function submitSearchQuery(searchInput, actionCause = '') { + let searchLocation = '/us/en/search.html'; + const redirectList = []; + const searchTerm = searchInput.value.trim(); + if (searchTerm) { + const requestPayload = getCoveoApiPayload(searchTerm, 'search'); + const triggerRequestPayload = getCoveoApiPayload(searchTerm, 'trigger'); + requestPayload.analytics.actionCause = actionCause || searchInput.getAttribute('data-action-cause') || 'searchFromLink'; + await makeCoveoApiRequest('/rest/search/v2', 'searchKey', requestPayload); + const triggerResponseData = await makeCoveoApiRequest('/rest/search/v2/plan', 'searchKey', triggerRequestPayload); + const { preprocessingOutput } = triggerResponseData; + const { triggers } = preprocessingOutput; + if (triggers != null && triggers.length > 0) { + triggers.forEach(({ content, type }) => { + if (type === 'redirect') { + redirectList.push(content); + } + }); + } + setRecentSearches(searchTerm); + searchLocation = `${searchLocation}#q=${encodeURIComponent(searchTerm)}`; + } + if (redirectList.length > 0) { + const [redirect] = redirectList; + window.location = redirect; + } else { + window.location = searchLocation; + } +} + +function buildSearchSuggestion(searchText, suggestionType = 'suggestion') { + const searchSuggestion = button( + { + class: 'suggestion flex px-4 min-h-[40px] items-center text-left cursor-pointer hover:bg-danahergray-100', + 'data-suggestion-type': suggestionType, + }, + div( + { + class: 'flex items-center', + }, + span({ + class: 'w-4 h-4 mr-2 shrink-0 search-suggestion-icon', + }), + span({ class: 'search-suggestion-text break-all line-clamp-2' }), + ), + ); + searchSuggestion.querySelector('span.search-suggestion-icon').innerHTML = suggestionType === 'recent' + ? ` + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" fill="none"> + <circle r="7.5" cy="8" cx="8"></circle><path d="m8.5 4.5v4"></path><path d="m10.3066 10.1387-1.80932-1.5768"></path> + </svg> + ` + : ` + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> + <path d="m6.4 0c3.5 0 6.4 2.9 6.4 6.4 0 1.4-.4 2.7-1.2 3.7l4 4c.4.4.4 1 .1 1.5l-.1.1c-.2.2-.5.3-.8.3s-.6-.1-.8-.3l-4-4c-1 .7-2.3 1.2-3.7 1.2-3.4-.1-6.3-3-6.3-6.5s2.9-6.4 6.4-6.4zm0 2.1c-2.3 0-4.3 1.9-4.3 4.3s1.9 4.3 4.3 4.3 4.3-1.9 4.3-4.3-1.9-4.3-4.3-4.3z"></path> + </svg> + `; + searchSuggestion.querySelector('span.search-suggestion-text').innerHTML = searchText; + searchSuggestion.addEventListener('click', async (e) => { + const searchInput = e.target.closest('.searchbox').querySelector('input'); + searchInput.value = e.target.closest('button').querySelector('span.search-suggestion-text').innerText; + searchInput.focus(); + await submitSearchQuery(searchInput, suggestionType === 'recent' ? 'searchFromLink' : 'omniboxFromLink'); + }); + return searchSuggestion; +} + +async function buildSearchSuggestions(searchbox) { + selectedSuggestionIndex = -1; + const searchboxInput = searchbox.querySelector('input'); + const inputText = searchboxInput.value; + const requestPayload = getCoveoApiPayload(inputText, 'search'); + const suggestionsResponseData = await makeCoveoApiRequest('/rest/search/v2/querySuggest', 'searchKey', requestPayload); + const suggestions = suggestionsResponseData.completions; + const wrapper = searchbox.querySelector('.search-suggestions-wrapper'); + const searchSuggestions = wrapper.querySelector('.search-suggestions'); + searchSuggestions.innerHTML = ''; + const recentSearches = getRecentSearches(); + if (!inputText && recentSearches.length > 0) { + const recentSearchesHeading = div( + { class: 'flex items-center px-4 py-2 text-danahergrey-900' }, + span({ class: 'font-bold' }, 'Recent Searches'), + button({ + class: 'ml-auto text-sm hover:text-cyan-600', + onclick: () => { + localStorage.removeItem('coveo-recent-queries'); + buildSearchSuggestions(searchbox); + searchboxInput.focus(); + }, + }, 'Clear'), + ); + searchSuggestions.append(recentSearchesHeading); + recentSearches.forEach((recentSearch) => searchSuggestions.append(buildSearchSuggestion(recentSearch, 'recent'))); + } + suggestions.forEach((suggestion) => searchSuggestions.append( + buildSearchSuggestion(formatSuggestionString(suggestion.highlighted, inputText), 'suggestion'), + )); +} + +function handleSearchClear(searchBox, searchInput) { + const clearIcon = searchBox.querySelector('.searchbox-clear'); + if (searchInput.value) { + clearIcon.classList.remove('hidden'); + } else { + clearIcon.classList.add('hidden'); + } +} + +async function handleSearchInput(e) { + const { target } = e; + const searchBox = target.closest('.searchbox'); + handleSearchClear(searchBox, target); + await buildSearchSuggestions(searchBox); +} + +function addEventToSearchInput(searchBlock) { + const searchbox = searchBlock.querySelector('.searchbox'); + const searchInput = searchbox.querySelector('input'); + searchBlock.querySelector('.searchbox-clear').addEventListener('click', async (e) => { + const { target } = e; + searchInput.value = ''; + searchInput.focus(); + target.closest('.searchbox-clear').classList.add('hidden'); + await buildSearchSuggestions(searchbox); + }); + searchInput.addEventListener('input', handleSearchInput); + searchInput.addEventListener('focusin', async () => { + await buildSearchSuggestions(searchbox); + searchbox.querySelector('.search-suggestions-wrapper').classList.remove('hidden'); + }); + searchInput.addEventListener('focusout', (e) => { + setTimeout(() => { + if (!searchInput.matches(':focus')) { + e.target.closest('.searchbox').querySelector('.search-suggestions-wrapper').classList.add('hidden'); + } + }, 200); + }); + searchInput.addEventListener('keydown', async (e) => { + const { key } = e; + const suggestionChildren = Array.from(searchbox.querySelectorAll('.search-suggestions button.suggestion')) || []; + const suggestionCount = suggestionChildren.length; + const handleKeyNavigation = () => { + searchInput.value = suggestionChildren[selectedSuggestionIndex].querySelector('span.search-suggestion-text').innerText; + setTimeout(() => { + searchInput.selectionStart = searchInput.value.length; + searchInput.selectionEnd = searchInput.value.length; + handleSearchClear(searchbox, searchInput); + }, 100); + suggestionChildren.forEach((suggestionItem, idx) => { + suggestionItem.classList.toggle('selected', idx === selectedSuggestionIndex); + }); + const actionCause = suggestionChildren[selectedSuggestionIndex].getAttribute('data-suggestion-type') === 'recent' + ? 'searchFromLink' : 'omniboxFromLink'; + searchInput.setAttribute('data-action-cause', actionCause); + }; + if (key === 'Enter') { + await submitSearchQuery(searchInput); + } else if (e.key === 'ArrowUp') { + selectedSuggestionIndex = selectedSuggestionIndex > 0 + ? selectedSuggestionIndex - 1 + : suggestionCount - 1; + handleKeyNavigation(); + } else if (e.key === 'ArrowDown') { + selectedSuggestionIndex = selectedSuggestionIndex < suggestionCount - 1 + ? selectedSuggestionIndex + 1 + : 0; + handleKeyNavigation(); + } + }); + searchBlock.querySelector('.searchbox .search-enter-button').addEventListener('click', async () => { + await submitSearchQuery(searchInput); + }); +} + +function getSearchInput() { + const inputWrapper = div( + { + class: 'w-full relative flex bg-gray-50 border border-gray-600 rounded-lg focus-within:ring focus-within:border-primary focus-within:ring-ring-primary', + }, + div( + { + class: 'grow flex items-center', + }, + input({ + type: 'text', + placeholder: 'Search', + class: 'h-full outline-none bg-transparent w-full grow px-4 py-3.5 text-lg', + title: 'Search field with suggestions. Suggestions may be available under this field. To send, press Enter.', + }), + ), + div( + { class: 'py-2' }, + button( + { + class: 'hidden searchbox-clear shrink-0 transparent w-8 h-8 fill-danahergrey-900 hover:fill-cyan-600', + 'aria-label': 'Clear', + }, + div({ class: 'w-3 h-3 mx-auto search-clear-icon' }), + ), + ), + div( + { class: 'p-2' }, + button( + { + class: 'search-enter-button btn-primary-purple flex items-center justify-center w-9 h-full rounded-md -my-px -mr-px shrink-0', + title: 'Search field with suggestions. Suggestions may be available under this field. To send, press Enter.', + 'aria-label': 'Search', + }, + span({ class: 'w-4 h-4 searchbox-icon', style: 'filter: brightness(0) invert(1);' }), + ), + ), + ); + inputWrapper.querySelector('span.searchbox-icon').innerHTML = ` + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> + <path d="m6.4 0c3.5 0 6.4 2.9 6.4 6.4 0 1.4-.4 2.7-1.2 3.7l4 4c.4.4.4 1 .1 1.5l-.1.1c-.2.2-.5.3-.8.3s-.6-.1-.8-.3l-4-4c-1 .7-2.3 1.2-3.7 1.2-3.4-.1-6.3-3-6.3-6.5s2.9-6.4 6.4-6.4zm0 2.1c-2.3 0-4.3 1.9-4.3 4.3s1.9 4.3 4.3 4.3 4.3-1.9 4.3-4.3-1.9-4.3-4.3-4.3z"></path> + </svg> + `; + inputWrapper.querySelector('.searchbox-clear .search-clear-icon').innerHTML = ` + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" class="w-3 h-3"> + <path d="m18 2-1.8-2-7.1 7.1-7.1-7.1-2 2 7.1 7.1-7.1 7.1 2 1.8 7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"></path> + </svg> + `; + + const searchSuggestionsWrapper = div( + { + class: 'search-suggestions-wrapper hidden flex w-full z-10 absolute left-0 top-full rounded-md bg-white border', + }, + div({ + class: 'search-suggestions flex flex-grow basis-1/2 flex-col', + }), + ); + const searchbox = div( + { class: 'searchbox relative flex-grow' }, + inputWrapper, + searchSuggestionsWrapper, + ); + + return searchbox; +} + +function showFlyoutMenu(menuPath) { + const menuId = getMenuIdFromPath(menuPath); + const menuEl = document.getElementById(menuId); + menuEl.classList.remove('hidden'); +} + +function hideFlyoutMenu(e) { + e.preventDefault(); + const { target } = e; + target.closest('.menu-flyout').classList.add('hidden'); +} + +function buildLogosBlock(headerBlock) { + const logoHtmlBlock = headerBlock.children[0]; + logoHtmlBlock.className = 'bg-danahergray-150 hidden lg:block'; + const logoUl = logoHtmlBlock.querySelector('ul'); + logoUl.className = 'h-14 flex justify-center'; + const logoLis = logoUl.querySelectorAll(':scope > li'); + logoLis.forEach((logoLi) => { + logoLi.className = 'group md:mx-5 mx-10'; + const logoLink = logoLi.querySelector(':scope > a'); + const logoPicture = logoLi.querySelector(':scope > picture'); + const logoImg = logoPicture.querySelector('img'); + logoImg.className = 'h-7 w-auto px-4'; + const logoTitle = logoLink.textContent; + logoImg.setAttribute('alt', logoTitle); + logoImg.setAttribute('style', 'filter: brightness(0) invert(1);'); + logoLink.textContent = ''; + logoLink.className = 'h-full flex items-center group-hover:bg-danahergray-200'; + logoLink.append(logoPicture); + logoLi.innerHTML = ''; + logoLi.append(logoLink); + }); +} + +function buildSearchBlockMobile() { + const searchBlockMobile = div( + { class: 'mobile-search w-full bg-black py-4 hidden' }, + div( + { class: 'flex items-center gap-2 md:block mx-6 lg:my-4' }, + getSearchInput(), + div({ class: 'close', onclick: toggleSearchBoxMobile }), + ), + ); + searchBlockMobile.querySelector('div.close').innerHTML = ` + <svg data-v-7a6a1796="" class="w-8 h-8 md:hidden" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> + <path data-v-7a6a1796="" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path> + </svg> + `; + addEventToSearchInput(searchBlockMobile); + return searchBlockMobile; +} + +function buildLoginBlock(loginLink) { + loginLink.className = 'text-black hover:text-black relative lg:inline-flex text-xs font-semibold'; + const loginIcon = loginLink.querySelector('span'); + loginIcon.className = ''; + loginIcon.innerHTML = ` + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-6 h-6 rounded-full"> + <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0zM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632z"/> + </svg> + `; + const loginSpan = span({ class: 'w-12 pl-2 lg:block hidden lg:inline' }, loginLink.textContent); + loginLink.setAttribute('aria-label', loginLink.textContent.trim()); + loginLink.textContent = ''; + loginLink.append(loginIcon); + loginLink.append(loginSpan); +} + +function buildLoggedInUserBlock(loginLink, user) { + loginLink.className = 'relative flex items-center justify-between h-15 w-15'; + loginLink.href = '/us/en/signin/dashboard.html'; + const loginUser = span({ class: 'w-12 h-12 p-2 mb-2 overflow-hidden border rounded-full bg-danaherlightblue-500' }, span(shortName(user))); + const loginSpan = span({ class: 'pl-1 text-xs font-semibold text-black' }, 'My Account'); + loginLink.setAttribute('aria-label', 'My Account'); + loginLink.textContent = ''; + loginLink.append(loginUser); + loginLink.append(loginSpan); +} + +function buildSearchBlock(headerBlock) { + const searchHtmlBlock = headerBlock.children[1]; + searchHtmlBlock.className = 'navbar-wrapper bg-white z-50 py-2 md:py-4 lg:pt-4 lg:pb-1 mb-[2px] space-y-2 shadow-sm'; + searchHtmlBlock.id = 'sticky-header'; + const searchHtmlBlockInner = div({ class: 'w-full flex flex-row flex-wrap justify-between' }); + const searchNewBlock = div({ class: 'bg-white flex items-center mx-auto max-w-7xl flex-row lg:px-8' }); + const extendedSectionBlock = div({ class: 'extended-section md:w-full grid grid-rows-1 lg:grid-rows-2 ml-auto md:ml-14 mr-2 md:mr-4' }); + extendedSectionBlock.id = 'extended-section'; + + // danaher logo + const logoPictureBlock = searchHtmlBlock.querySelector(':scope > p > picture'); + const logoLinkBlock = searchHtmlBlock.querySelector(':scope > p > a'); + logoPictureBlock.setAttribute('alt', logoLinkBlock.textContent); + if (window.location.pathname === '/') logoLinkBlock.href = 'https://danaher.com/?utm_source=dhls_website&utm_medium=referral&utm_content=header'; + const logoImg = logoPictureBlock.querySelector('img'); + logoImg.className = 'brand-logo max-w-full w-14 md:w-20 lg:w-44 h-full object-contain'; + logoLinkBlock.className = 'ml-2 mb-2'; + logoLinkBlock.innerHTML = ''; + logoLinkBlock.append(logoPictureBlock); + + const hamburgerIcon = button({ + id: 'nav-hamburger', + type: 'button', + class: 'open-side-menu block lg:hidden btn btn-sm h-full my-auto bg-transparent hover:bg-transparent text-danaherpurple-500 hover:text-danaherpurple-800', + 'aria-label': 'Menu', + 'aria-expanded': false, + 'aria-controls': 'mega-menu-icons', + 'data-collapse-toggle': 'mega-menu-icons', + }); + hamburgerIcon.innerHTML = '<svg xmlns=\'http://www.w3.org/2000/svg\' aria-hidden=\'true\' viewBox=\'0 0 24 24\' fill=\'currentColor\' class=\'w-8 h-8\'><path fill-rule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75zM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75z" clip-rule="evenodd"/></svg>'; + + searchNewBlock.append(hamburgerIcon); + searchNewBlock.append(logoLinkBlock); + + // log in + const loginBlock = div({ class: 'flex flex-row justify-end items-center gap-5 order-none md:order-last pr-3' }); + // const loginBlockInner = div({ class: 'flex flex-row items-center + // lg:justify-start justify-end gap-2', id: 'login-block' }); + const searchLinks = searchHtmlBlock.querySelectorAll(':scope > ul > li > a'); + const loginLink = searchLinks[0]; + + const user = getUser(); + if (user) buildLoggedInUserBlock(loginLink, user); + else buildLoginBlock(loginLink); + + // quote + const quoteLink = searchLinks[1]; + quoteLink.className = 'quote text-black hover:text-black relative lg:inline-flex text-xs font-semibold'; + const quoteIcon = quoteLink.querySelector('span'); + quoteIcon.className = ''; + quoteIcon.innerHTML = ` + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-6 h-6 rounded-full"> + <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/> + </svg> + `; + const quoteSpan = span({ class: 'w-12 pl-2 lg:block hidden lg:inline' }, quoteLink.textContent); + const quoteCount = span({ class: 'quantity absolute lg:pl-2 top-4 left-6 text-danaherpurple-500' }, 0); + const quoteDot = span( + { class: 'dot hidden absolute top-0 flex w-2 h-2 ml-1 left-4' }, + span({ class: 'absolute inline-flex w-full h-full rounded-full opacity-75 animate-ping bg-danaherorange-500' }), + span({ class: 'relative inline-flex w-2 h-2 rounded-full bg-danaherpurple-500' }), + ); + + quoteLink.textContent = ''; + quoteLink.append(quoteIcon); + quoteLink.append(quoteSpan); + quoteLink.append(quoteCount); + quoteLink.append(quoteDot); + const searchIcon = div({ class: 'search-icon md:hidden' }); + searchIcon.innerHTML = ` + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="text-black" aria-hidden="true" class="h-6 w-6"> + <path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" clip-rule="evenodd"></path> + </svg> + `; + loginBlock.append(searchIcon); + loginBlock.append(loginLink); + loginBlock.append(quoteLink); + // loginBlock.append(loginBlockInner); + searchHtmlBlockInner.append(loginBlock); + + // search box + searchHtmlBlockInner.append(div( + { class: 'hidden md:block w-full md:w-3/5 order-last md:order-none' }, + getSearchInput(), + )); + + // aggregation + extendedSectionBlock.append(searchHtmlBlockInner); + searchNewBlock.append(extendedSectionBlock); + searchHtmlBlock.innerHTML = searchNewBlock.outerHTML; + searchHtmlBlock.append(buildSearchBlockMobile()); + searchHtmlBlock.querySelector('div.search-icon').addEventListener('click', toggleSearchBoxMobile); + searchHtmlBlock.querySelector('#nav-hamburger').addEventListener('click', (e) => { + e.preventDefault(); + showFlyoutMenu('Menu'); + }); + addEventToSearchInput(searchHtmlBlock); +} + +function buildNavBlock(headerBlock) { + const extendedSectionBlock = headerBlock.querySelector('div.extended-section'); + const menuLinks = []; + [...headerBlock.children].slice(2).forEach((menuItemEl) => { + menuItemEl.className = menuItemEl.innerHTML ? 'menu-flyout hidden' : ''; + if (menuItemEl.querySelector(':scope > p')?.textContent === 'Menu') { + menuItemEl.querySelectorAll(':scope > ul > li').forEach((childMenuItem) => { + menuLinks.push(childMenuItem); + }); + } + }); + const navHtmlBlock = div({ class: 'mega-menu-off-scroll hidden lg:flex items-center gap-x-4' }); + + // home link + const homeLink = a({ class: 'hidden lg:flex text-danaherpurple-500 hover:text-danaherpurple-800 lifesciences-logo-link font-semibold', href: '/' }, 'Life Sciences'); + + // main nav + navHtmlBlock.append(homeLink); + menuLinks.forEach((item) => { + const menuItemName = item.innerText; + const expandIcon = item.querySelector('span.icon-arrow-right'); + const menuItemEl = a( + { + class: 'btn !bg-transparent !text-black !font-medium !ring-0 !border-0 !ring-offset-0 group relative', + href: item.querySelector('a')?.href || '#', + }, + menuItemName, + ); + if (expandIcon) { + menuItemEl.innerHTML += ` + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="chevy h-5 w-5 fill-danaherpurple-500 transition group-hover:rotate-180 ml-1"> + <path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd"></path> + </svg>`; + menuItemEl.addEventListener('click', (e) => { + e.preventDefault(); + showFlyoutMenu(`Menu|${menuItemName}`); + }); + } + navHtmlBlock.append(menuItemEl); + }); + extendedSectionBlock.append(navHtmlBlock); +} + +function buildFlyoutMenus(headerBlock) { + headerBlock.querySelectorAll('.menu-flyout').forEach((menuItemEl) => { + menuItemEl.className = 'menu-flyout hidden flex fixed top-0 left-0 h-screen space-y-5 text-white duration-1000 ease-out transition-all w-full backdrop-brightness-50 z-50'; + menuItemEl.addEventListener('click', (e) => { + if (!menuItemEl.querySelector(':scope > div').contains(e.target)) { + menuItemEl.classList.add('hidden'); + } + }); + const menuPath = menuItemEl.querySelector(':scope > p').textContent; + const menuPathTokens = menuPath.split('|'); + menuItemEl.id = getMenuIdFromPath(menuPath); + const menuTitle = menuPathTokens[menuPathTokens.length - 1]; + const linkList = menuItemEl.querySelector(':scope > ul'); + linkList.className = 'space-y-1'; + linkList.querySelectorAll(':scope > li').forEach((linkItem) => { + linkItem.className = ''; + const linkItemName = linkItem.innerText; + const linkItemArrowRight = linkItem.querySelector('span.icon-arrow-right'); + + if (linkItemArrowRight) { + const arrowRight = span({ class: 'icon-arrow-right inline-block' }); + arrowRight.innerHTML = ` + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="w-3 h-3"> + <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd"></path> + </svg> + `; + linkItem.innerHTML = ''; + linkItem.className = 'min-w-[320px]'; + linkItem.append(a( + { + href: '#', + onclick: (e) => { + e.preventDefault(); + hideFlyoutMenu(e); + showFlyoutMenu(`${menuPath}|${linkItemName}`); + }, + }, + span(linkItemName), + arrowRight, + )); + } + linkItem.querySelector('a').className = 'w-80 flex items-center justify-between text-base text-gray-600 tracking-wide leading-6 hover:font-medium hover:bg-danaherlightblue-500 hover:text-white cursor-pointer transition rounded-md p-2'; + }); + const flyoutBlock = div( + { class: 'grid grid-flow-col grid-cols-1 fixed h-full justify-evenly duration-300 ease-out transition-all' }, + div( + { class: 'bg-white text-black overflow-auto space-y-3 max-w-sm' }, + div( + { class: 'flex items-center justify-between px-3 mt-2' }, + a({ + class: 'back-button', + href: '#', + onclick: (e) => { + e.preventDefault(); + hideFlyoutMenu(e); + showFlyoutMenu(menuPathTokens.slice(0, menuPathTokens.length - 1).join('|')); + }, + }), + a({ + class: 'close-button ml-auto text-3xl text-gray-500', + href: '#', + onclick: hideFlyoutMenu, + }, '×'), + ), + div( + { class: 'flex flex-col px-3 secCol' }, + div( + { class: 'inline-flex justify-between items-center mb-2' }, + span({ class: 'text-left text-xl font-bold py-2 pl-1 text-gray-900 w-1/2' }, menuTitle), + menuItemEl.querySelector(':scope > p > a') + ? a({ class: 'btn btn-info rounded-full', href: menuItemEl.querySelector(':scope > p > a').href }, 'Explore All') : '', + ), + linkList, + ), + ), + ); + flyoutBlock.querySelector('a.back-button').innerHTML = ` + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="chevy w-5 h-5"> + <path fill-rule="evenodd" d="M11.03 3.97a.75.75 0 010 1.06l-6.22 6.22H21a.75.75 0 010 1.5H4.81l6.22 6.22a.75.75 0 11-1.06 1.06l-7.5-7.5a.75.75 0 010-1.06l7.5-7.5a.75.75 0 011.06 0z" clip-rule="evenodd"></path> + </svg> + `; + menuItemEl.innerHTML = ''; + menuItemEl.append(flyoutBlock); + if (menuTitle === 'Menu') { + menuItemEl.querySelector('a.back-button').classList.add('hidden'); + } + }); +} + +function handleScroll() { + if (window.scrollY >= 95) { + document.getElementById('sticky-header').classList.add('remove-descedents', 'fixed', 'inset-x-0', 'top-0', 'w-full', 'lg:!pb-4', 'shadow-lg'); + document.getElementById('sticky-header').firstElementChild.classList.add('bg-white'); + } else if (window.scrollY < 95) { + document.getElementById('sticky-header').classList.remove('remove-descedents', 'fixed', 'inset-x-0', 'top-0', 'w-full', 'lg:!pb-4', 'shadow-lg'); + document.getElementById('sticky-header').firstElementChild.classList.remove('bg-danaherblue-600'); + } +} + +async function getQuote(headerBlock, authHeader) { + const quoteRequest = await fetch(`${baseURL}/rfqcart/-`, { headers: authHeader }); + if (quoteRequest.ok) { + const data = await quoteRequest.json(); + if (data && data.items) { + const rfqQuantity = data.items.length; + if (rfqQuantity !== 0) { + const quantityElement = headerBlock.querySelector('a.quote span.quantity'); + if (quantityElement) quantityElement.textContent = rfqQuantity; + const dotElement = headerBlock.querySelector('a.quote span.dot'); + if (dotElement) dotElement.classList.remove('hidden'); + } + } + } else if (quoteRequest.status !== 404) { + // eslint-disable-next-line no-console + console.warn('Failed to load quote cart'); + } +} + +/** + * decorates the header, mainly the nav + * @param {Element} block The header block element + */ +export default async function decorate(block) { + const resp = await fetch('/fragments/header/master.plain.html'); + + if (resp.ok) { + const html = await resp.text(); + + // build header DOM + const headerBlock = div({ class: 'nav-container pt-0 pb-0 md:p-0 bg-danaherpurple-800 relative z-20' }); + headerBlock.innerHTML = html; + + buildLogosBlock(headerBlock); + buildSearchBlock(headerBlock); + buildNavBlock(headerBlock); + buildFlyoutMenus(headerBlock); + + decorateIcons(headerBlock); + + window.addEventListener('scroll', handleScroll); + block.innerHTML = ''; + block.append(headerBlock); + + const authHeader = getAuthorization(); + if (authHeader && (authHeader.has('authentication-token') || authHeader.has('Authorization'))) { + getQuote(headerBlock, authHeader); + } + } + + return block; +} diff --git a/scripts/delayed.js b/scripts/delayed.js index 052aef42c..e5a901c30 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -84,7 +84,8 @@ function sendCoveoEventPage() { language: 'en', username: 'anonymous', title: title, - location: document.location.href + location: document.location.href, + originLevel1: "DanaherMainSearch", }); } @@ -112,7 +113,9 @@ function sendCoveoEventProduct() { }); coveoua('ec:setAction', 'detail'); - coveoua('send', 'event'); + coveoua('send', 'event', { + "searchHub": "DanaherMainSearch" + }); } // Coveo Events - end From e9ec9b6b63b855c7d641703d1dd046a7cf90ddc1 Mon Sep 17 00:00:00 2001 From: David Zochowski <david.zochowski@dhlifesciences.com> Date: Mon, 29 Apr 2024 08:21:52 -0400 Subject: [PATCH 06/88] removing mistake file --- blocks/header/header.txt | 709 --------------------------------------- 1 file changed, 709 deletions(-) delete mode 100644 blocks/header/header.txt diff --git a/blocks/header/header.txt b/blocks/header/header.txt deleted file mode 100644 index b1316e14f..000000000 --- a/blocks/header/header.txt +++ /dev/null @@ -1,709 +0,0 @@ -import { - span, div, a, input, button, -} from '../../scripts/dom-builder.js'; -import { decorateIcons } from '../../scripts/lib-franklin.js'; -import { - getAuthorization, getCommerceBase, isLoggedInUser, - makeCoveoApiRequest, -} from '../../scripts/commerce.js'; -import { getCookie } from '../../scripts/scripts.js'; - -const baseURL = getCommerceBase(); - -const COVEO_SEARCH_HUB = 'DanaherMainSearch'; -const COVEO_PIPELINE = 'Danaher Marketplace'; -const COVEO_MAX_RECENT_SEARCHES = 3; - -let selectedSuggestionIndex = -1; - -function shortName(user) { - if (user) { - return `${user.fname[0].toUpperCase()}${user.lname[0].toUpperCase()}`; - } - return ''; -} - -function getUser() { - if (isLoggedInUser()) { - return { fname: getCookie('first_name'), lname: getCookie('last_name') }; - } - return undefined; -} - -function formatSuggestionString(highlightedText, inputText) { - return highlightedText.replace(/\[([^\]]+)\]/g, inputText ? '<span class="font-bold">$1</span>' : '$1').replace(/\{([^}]+)\}/g, '$1'); -} - -function getMenuIdFromPath(menuPath) { - const menuPathTokens = menuPath.split('|'); - const menuId = menuPathTokens.join('--').toLowerCase().replace(' ', '-'); - return menuId; -} - -function getRecentSearches() { - const recentSearchesString = localStorage.getItem('coveo-recent-queries'); - const recentSearches = recentSearchesString ? JSON.parse(recentSearchesString) : []; - return recentSearches; -} - -function setRecentSearches(searchValue) { - const recentSearches = getRecentSearches(); - const searchValueIndex = recentSearches.findIndex((search) => search === searchValue); - if (searchValueIndex > -1) recentSearches.splice(searchValueIndex, 1); - recentSearches.unshift(searchValue); - localStorage.setItem('coveo-recent-queries', JSON.stringify(recentSearches.slice(0, COVEO_MAX_RECENT_SEARCHES))); -} - -function toggleSearchBoxMobile(e) { - e.preventDefault(); - const searchBox = document.querySelector('.mobile-search'); - searchBox.classList.toggle('show', '!block'); - if (!searchBox.classList.contains('show')) searchBox.querySelector('input').focus(); -} - -function getCoveoApiPayload(searchValue, type) { - const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; - const userTimestamp = new Date().toISOString(); - const clientId = getCookie('coveo_visitorId'); - const searchHistoryString = localStorage.getItem('__coveo.analytics.history'); - const searchHistory = searchHistoryString ? JSON.parse(searchHistoryString) : []; - const payload = { - analytics: { - clientId, - clientTimestamp: userTimestamp, - documentLocation: window.location.href, - documentReferrer: document.referrer, - originContext: 'Search', - }, - locale: 'en', - pipeline: COVEO_PIPELINE, - q: searchValue, - searchHub: COVEO_SEARCH_HUB, - timezone: userTimeZone, - visitorId: clientId, - }; - - if (type === 'search') { - payload.actionsHistory = searchHistory.map(({ time, value, name }) => ({ time, value, name })); - payload.clientId = clientId; - payload.clientTimestamp = userTimestamp; - payload.originContext = 'Search'; - payload.count = 8; - payload.referrer = document.referrer; - } - return payload; -} - -async function submitSearchQuery(searchInput, actionCause = '') { - let searchLocation = '/us/en/search.html'; - const redirectList = []; - const searchTerm = searchInput.value.trim(); - if (searchTerm) { - const requestPayload = getCoveoApiPayload(searchTerm, 'search'); - const triggerRequestPayload = getCoveoApiPayload(searchTerm, 'trigger'); - requestPayload.analytics.actionCause = actionCause || searchInput.getAttribute('data-action-cause') || 'searchFromLink'; - await makeCoveoApiRequest('/rest/search/v2', 'searchKey', requestPayload); - const triggerResponseData = await makeCoveoApiRequest('/rest/search/v2/plan', 'searchKey', triggerRequestPayload); - const { preprocessingOutput } = triggerResponseData; - const { triggers } = preprocessingOutput; - if (triggers != null && triggers.length > 0) { - triggers.forEach(({ content, type }) => { - if (type === 'redirect') { - redirectList.push(content); - } - }); - } - setRecentSearches(searchTerm); - searchLocation = `${searchLocation}#q=${encodeURIComponent(searchTerm)}`; - } - if (redirectList.length > 0) { - const [redirect] = redirectList; - window.location = redirect; - } else { - window.location = searchLocation; - } -} - -function buildSearchSuggestion(searchText, suggestionType = 'suggestion') { - const searchSuggestion = button( - { - class: 'suggestion flex px-4 min-h-[40px] items-center text-left cursor-pointer hover:bg-danahergray-100', - 'data-suggestion-type': suggestionType, - }, - div( - { - class: 'flex items-center', - }, - span({ - class: 'w-4 h-4 mr-2 shrink-0 search-suggestion-icon', - }), - span({ class: 'search-suggestion-text break-all line-clamp-2' }), - ), - ); - searchSuggestion.querySelector('span.search-suggestion-icon').innerHTML = suggestionType === 'recent' - ? ` - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" fill="none"> - <circle r="7.5" cy="8" cx="8"></circle><path d="m8.5 4.5v4"></path><path d="m10.3066 10.1387-1.80932-1.5768"></path> - </svg> - ` - : ` - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> - <path d="m6.4 0c3.5 0 6.4 2.9 6.4 6.4 0 1.4-.4 2.7-1.2 3.7l4 4c.4.4.4 1 .1 1.5l-.1.1c-.2.2-.5.3-.8.3s-.6-.1-.8-.3l-4-4c-1 .7-2.3 1.2-3.7 1.2-3.4-.1-6.3-3-6.3-6.5s2.9-6.4 6.4-6.4zm0 2.1c-2.3 0-4.3 1.9-4.3 4.3s1.9 4.3 4.3 4.3 4.3-1.9 4.3-4.3-1.9-4.3-4.3-4.3z"></path> - </svg> - `; - searchSuggestion.querySelector('span.search-suggestion-text').innerHTML = searchText; - searchSuggestion.addEventListener('click', async (e) => { - const searchInput = e.target.closest('.searchbox').querySelector('input'); - searchInput.value = e.target.closest('button').querySelector('span.search-suggestion-text').innerText; - searchInput.focus(); - await submitSearchQuery(searchInput, suggestionType === 'recent' ? 'searchFromLink' : 'omniboxFromLink'); - }); - return searchSuggestion; -} - -async function buildSearchSuggestions(searchbox) { - selectedSuggestionIndex = -1; - const searchboxInput = searchbox.querySelector('input'); - const inputText = searchboxInput.value; - const requestPayload = getCoveoApiPayload(inputText, 'search'); - const suggestionsResponseData = await makeCoveoApiRequest('/rest/search/v2/querySuggest', 'searchKey', requestPayload); - const suggestions = suggestionsResponseData.completions; - const wrapper = searchbox.querySelector('.search-suggestions-wrapper'); - const searchSuggestions = wrapper.querySelector('.search-suggestions'); - searchSuggestions.innerHTML = ''; - const recentSearches = getRecentSearches(); - if (!inputText && recentSearches.length > 0) { - const recentSearchesHeading = div( - { class: 'flex items-center px-4 py-2 text-danahergrey-900' }, - span({ class: 'font-bold' }, 'Recent Searches'), - button({ - class: 'ml-auto text-sm hover:text-cyan-600', - onclick: () => { - localStorage.removeItem('coveo-recent-queries'); - buildSearchSuggestions(searchbox); - searchboxInput.focus(); - }, - }, 'Clear'), - ); - searchSuggestions.append(recentSearchesHeading); - recentSearches.forEach((recentSearch) => searchSuggestions.append(buildSearchSuggestion(recentSearch, 'recent'))); - } - suggestions.forEach((suggestion) => searchSuggestions.append( - buildSearchSuggestion(formatSuggestionString(suggestion.highlighted, inputText), 'suggestion'), - )); -} - -function handleSearchClear(searchBox, searchInput) { - const clearIcon = searchBox.querySelector('.searchbox-clear'); - if (searchInput.value) { - clearIcon.classList.remove('hidden'); - } else { - clearIcon.classList.add('hidden'); - } -} - -async function handleSearchInput(e) { - const { target } = e; - const searchBox = target.closest('.searchbox'); - handleSearchClear(searchBox, target); - await buildSearchSuggestions(searchBox); -} - -function addEventToSearchInput(searchBlock) { - const searchbox = searchBlock.querySelector('.searchbox'); - const searchInput = searchbox.querySelector('input'); - searchBlock.querySelector('.searchbox-clear').addEventListener('click', async (e) => { - const { target } = e; - searchInput.value = ''; - searchInput.focus(); - target.closest('.searchbox-clear').classList.add('hidden'); - await buildSearchSuggestions(searchbox); - }); - searchInput.addEventListener('input', handleSearchInput); - searchInput.addEventListener('focusin', async () => { - await buildSearchSuggestions(searchbox); - searchbox.querySelector('.search-suggestions-wrapper').classList.remove('hidden'); - }); - searchInput.addEventListener('focusout', (e) => { - setTimeout(() => { - if (!searchInput.matches(':focus')) { - e.target.closest('.searchbox').querySelector('.search-suggestions-wrapper').classList.add('hidden'); - } - }, 200); - }); - searchInput.addEventListener('keydown', async (e) => { - const { key } = e; - const suggestionChildren = Array.from(searchbox.querySelectorAll('.search-suggestions button.suggestion')) || []; - const suggestionCount = suggestionChildren.length; - const handleKeyNavigation = () => { - searchInput.value = suggestionChildren[selectedSuggestionIndex].querySelector('span.search-suggestion-text').innerText; - setTimeout(() => { - searchInput.selectionStart = searchInput.value.length; - searchInput.selectionEnd = searchInput.value.length; - handleSearchClear(searchbox, searchInput); - }, 100); - suggestionChildren.forEach((suggestionItem, idx) => { - suggestionItem.classList.toggle('selected', idx === selectedSuggestionIndex); - }); - const actionCause = suggestionChildren[selectedSuggestionIndex].getAttribute('data-suggestion-type') === 'recent' - ? 'searchFromLink' : 'omniboxFromLink'; - searchInput.setAttribute('data-action-cause', actionCause); - }; - if (key === 'Enter') { - await submitSearchQuery(searchInput); - } else if (e.key === 'ArrowUp') { - selectedSuggestionIndex = selectedSuggestionIndex > 0 - ? selectedSuggestionIndex - 1 - : suggestionCount - 1; - handleKeyNavigation(); - } else if (e.key === 'ArrowDown') { - selectedSuggestionIndex = selectedSuggestionIndex < suggestionCount - 1 - ? selectedSuggestionIndex + 1 - : 0; - handleKeyNavigation(); - } - }); - searchBlock.querySelector('.searchbox .search-enter-button').addEventListener('click', async () => { - await submitSearchQuery(searchInput); - }); -} - -function getSearchInput() { - const inputWrapper = div( - { - class: 'w-full relative flex bg-gray-50 border border-gray-600 rounded-lg focus-within:ring focus-within:border-primary focus-within:ring-ring-primary', - }, - div( - { - class: 'grow flex items-center', - }, - input({ - type: 'text', - placeholder: 'Search', - class: 'h-full outline-none bg-transparent w-full grow px-4 py-3.5 text-lg', - title: 'Search field with suggestions. Suggestions may be available under this field. To send, press Enter.', - }), - ), - div( - { class: 'py-2' }, - button( - { - class: 'hidden searchbox-clear shrink-0 transparent w-8 h-8 fill-danahergrey-900 hover:fill-cyan-600', - 'aria-label': 'Clear', - }, - div({ class: 'w-3 h-3 mx-auto search-clear-icon' }), - ), - ), - div( - { class: 'p-2' }, - button( - { - class: 'search-enter-button btn-primary-purple flex items-center justify-center w-9 h-full rounded-md -my-px -mr-px shrink-0', - title: 'Search field with suggestions. Suggestions may be available under this field. To send, press Enter.', - 'aria-label': 'Search', - }, - span({ class: 'w-4 h-4 searchbox-icon', style: 'filter: brightness(0) invert(1);' }), - ), - ), - ); - inputWrapper.querySelector('span.searchbox-icon').innerHTML = ` - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> - <path d="m6.4 0c3.5 0 6.4 2.9 6.4 6.4 0 1.4-.4 2.7-1.2 3.7l4 4c.4.4.4 1 .1 1.5l-.1.1c-.2.2-.5.3-.8.3s-.6-.1-.8-.3l-4-4c-1 .7-2.3 1.2-3.7 1.2-3.4-.1-6.3-3-6.3-6.5s2.9-6.4 6.4-6.4zm0 2.1c-2.3 0-4.3 1.9-4.3 4.3s1.9 4.3 4.3 4.3 4.3-1.9 4.3-4.3-1.9-4.3-4.3-4.3z"></path> - </svg> - `; - inputWrapper.querySelector('.searchbox-clear .search-clear-icon').innerHTML = ` - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" class="w-3 h-3"> - <path d="m18 2-1.8-2-7.1 7.1-7.1-7.1-2 2 7.1 7.1-7.1 7.1 2 1.8 7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"></path> - </svg> - `; - - const searchSuggestionsWrapper = div( - { - class: 'search-suggestions-wrapper hidden flex w-full z-10 absolute left-0 top-full rounded-md bg-white border', - }, - div({ - class: 'search-suggestions flex flex-grow basis-1/2 flex-col', - }), - ); - const searchbox = div( - { class: 'searchbox relative flex-grow' }, - inputWrapper, - searchSuggestionsWrapper, - ); - - return searchbox; -} - -function showFlyoutMenu(menuPath) { - const menuId = getMenuIdFromPath(menuPath); - const menuEl = document.getElementById(menuId); - menuEl.classList.remove('hidden'); -} - -function hideFlyoutMenu(e) { - e.preventDefault(); - const { target } = e; - target.closest('.menu-flyout').classList.add('hidden'); -} - -function buildLogosBlock(headerBlock) { - const logoHtmlBlock = headerBlock.children[0]; - logoHtmlBlock.className = 'bg-danahergray-150 hidden lg:block'; - const logoUl = logoHtmlBlock.querySelector('ul'); - logoUl.className = 'h-14 flex justify-center'; - const logoLis = logoUl.querySelectorAll(':scope > li'); - logoLis.forEach((logoLi) => { - logoLi.className = 'group md:mx-5 mx-10'; - const logoLink = logoLi.querySelector(':scope > a'); - const logoPicture = logoLi.querySelector(':scope > picture'); - const logoImg = logoPicture.querySelector('img'); - logoImg.className = 'h-7 w-auto px-4'; - const logoTitle = logoLink.textContent; - logoImg.setAttribute('alt', logoTitle); - logoImg.setAttribute('style', 'filter: brightness(0) invert(1);'); - logoLink.textContent = ''; - logoLink.className = 'h-full flex items-center group-hover:bg-danahergray-200'; - logoLink.append(logoPicture); - logoLi.innerHTML = ''; - logoLi.append(logoLink); - }); -} - -function buildSearchBlockMobile() { - const searchBlockMobile = div( - { class: 'mobile-search w-full bg-black py-4 hidden' }, - div( - { class: 'flex items-center gap-2 md:block mx-6 lg:my-4' }, - getSearchInput(), - div({ class: 'close', onclick: toggleSearchBoxMobile }), - ), - ); - searchBlockMobile.querySelector('div.close').innerHTML = ` - <svg data-v-7a6a1796="" class="w-8 h-8 md:hidden" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> - <path data-v-7a6a1796="" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path> - </svg> - `; - addEventToSearchInput(searchBlockMobile); - return searchBlockMobile; -} - -function buildLoginBlock(loginLink) { - loginLink.className = 'text-black hover:text-black relative lg:inline-flex text-xs font-semibold'; - const loginIcon = loginLink.querySelector('span'); - loginIcon.className = ''; - loginIcon.innerHTML = ` - <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-6 h-6 rounded-full"> - <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0zM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632z"/> - </svg> - `; - const loginSpan = span({ class: 'w-12 pl-2 lg:block hidden lg:inline' }, loginLink.textContent); - loginLink.setAttribute('aria-label', loginLink.textContent.trim()); - loginLink.textContent = ''; - loginLink.append(loginIcon); - loginLink.append(loginSpan); -} - -function buildLoggedInUserBlock(loginLink, user) { - loginLink.className = 'relative flex items-center justify-between h-15 w-15'; - loginLink.href = '/us/en/signin/dashboard.html'; - const loginUser = span({ class: 'w-12 h-12 p-2 mb-2 overflow-hidden border rounded-full bg-danaherlightblue-500' }, span(shortName(user))); - const loginSpan = span({ class: 'pl-1 text-xs font-semibold text-black' }, 'My Account'); - loginLink.setAttribute('aria-label', 'My Account'); - loginLink.textContent = ''; - loginLink.append(loginUser); - loginLink.append(loginSpan); -} - -function buildSearchBlock(headerBlock) { - const searchHtmlBlock = headerBlock.children[1]; - searchHtmlBlock.className = 'navbar-wrapper bg-white z-50 py-2 md:py-4 lg:pt-4 lg:pb-1 mb-[2px] space-y-2 shadow-sm'; - searchHtmlBlock.id = 'sticky-header'; - const searchHtmlBlockInner = div({ class: 'w-full flex flex-row flex-wrap justify-between' }); - const searchNewBlock = div({ class: 'bg-white flex items-center mx-auto max-w-7xl flex-row lg:px-8' }); - const extendedSectionBlock = div({ class: 'extended-section md:w-full grid grid-rows-1 lg:grid-rows-2 ml-auto md:ml-14 mr-2 md:mr-4' }); - extendedSectionBlock.id = 'extended-section'; - - // danaher logo - const logoPictureBlock = searchHtmlBlock.querySelector(':scope > p > picture'); - const logoLinkBlock = searchHtmlBlock.querySelector(':scope > p > a'); - logoPictureBlock.setAttribute('alt', logoLinkBlock.textContent); - if (window.location.pathname === '/') logoLinkBlock.href = 'https://danaher.com/?utm_source=dhls_website&utm_medium=referral&utm_content=header'; - const logoImg = logoPictureBlock.querySelector('img'); - logoImg.className = 'brand-logo max-w-full w-14 md:w-20 lg:w-44 h-full object-contain'; - logoLinkBlock.className = 'ml-2 mb-2'; - logoLinkBlock.innerHTML = ''; - logoLinkBlock.append(logoPictureBlock); - - const hamburgerIcon = button({ - id: 'nav-hamburger', - type: 'button', - class: 'open-side-menu block lg:hidden btn btn-sm h-full my-auto bg-transparent hover:bg-transparent text-danaherpurple-500 hover:text-danaherpurple-800', - 'aria-label': 'Menu', - 'aria-expanded': false, - 'aria-controls': 'mega-menu-icons', - 'data-collapse-toggle': 'mega-menu-icons', - }); - hamburgerIcon.innerHTML = '<svg xmlns=\'http://www.w3.org/2000/svg\' aria-hidden=\'true\' viewBox=\'0 0 24 24\' fill=\'currentColor\' class=\'w-8 h-8\'><path fill-rule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75zM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75z" clip-rule="evenodd"/></svg>'; - - searchNewBlock.append(hamburgerIcon); - searchNewBlock.append(logoLinkBlock); - - // log in - const loginBlock = div({ class: 'flex flex-row justify-end items-center gap-5 order-none md:order-last pr-3' }); - // const loginBlockInner = div({ class: 'flex flex-row items-center - // lg:justify-start justify-end gap-2', id: 'login-block' }); - const searchLinks = searchHtmlBlock.querySelectorAll(':scope > ul > li > a'); - const loginLink = searchLinks[0]; - - const user = getUser(); - if (user) buildLoggedInUserBlock(loginLink, user); - else buildLoginBlock(loginLink); - - // quote - const quoteLink = searchLinks[1]; - quoteLink.className = 'quote text-black hover:text-black relative lg:inline-flex text-xs font-semibold'; - const quoteIcon = quoteLink.querySelector('span'); - quoteIcon.className = ''; - quoteIcon.innerHTML = ` - <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-6 h-6 rounded-full"> - <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/> - </svg> - `; - const quoteSpan = span({ class: 'w-12 pl-2 lg:block hidden lg:inline' }, quoteLink.textContent); - const quoteCount = span({ class: 'quantity absolute lg:pl-2 top-4 left-6 text-danaherpurple-500' }, 0); - const quoteDot = span( - { class: 'dot hidden absolute top-0 flex w-2 h-2 ml-1 left-4' }, - span({ class: 'absolute inline-flex w-full h-full rounded-full opacity-75 animate-ping bg-danaherorange-500' }), - span({ class: 'relative inline-flex w-2 h-2 rounded-full bg-danaherpurple-500' }), - ); - - quoteLink.textContent = ''; - quoteLink.append(quoteIcon); - quoteLink.append(quoteSpan); - quoteLink.append(quoteCount); - quoteLink.append(quoteDot); - const searchIcon = div({ class: 'search-icon md:hidden' }); - searchIcon.innerHTML = ` - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="text-black" aria-hidden="true" class="h-6 w-6"> - <path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" clip-rule="evenodd"></path> - </svg> - `; - loginBlock.append(searchIcon); - loginBlock.append(loginLink); - loginBlock.append(quoteLink); - // loginBlock.append(loginBlockInner); - searchHtmlBlockInner.append(loginBlock); - - // search box - searchHtmlBlockInner.append(div( - { class: 'hidden md:block w-full md:w-3/5 order-last md:order-none' }, - getSearchInput(), - )); - - // aggregation - extendedSectionBlock.append(searchHtmlBlockInner); - searchNewBlock.append(extendedSectionBlock); - searchHtmlBlock.innerHTML = searchNewBlock.outerHTML; - searchHtmlBlock.append(buildSearchBlockMobile()); - searchHtmlBlock.querySelector('div.search-icon').addEventListener('click', toggleSearchBoxMobile); - searchHtmlBlock.querySelector('#nav-hamburger').addEventListener('click', (e) => { - e.preventDefault(); - showFlyoutMenu('Menu'); - }); - addEventToSearchInput(searchHtmlBlock); -} - -function buildNavBlock(headerBlock) { - const extendedSectionBlock = headerBlock.querySelector('div.extended-section'); - const menuLinks = []; - [...headerBlock.children].slice(2).forEach((menuItemEl) => { - menuItemEl.className = menuItemEl.innerHTML ? 'menu-flyout hidden' : ''; - if (menuItemEl.querySelector(':scope > p')?.textContent === 'Menu') { - menuItemEl.querySelectorAll(':scope > ul > li').forEach((childMenuItem) => { - menuLinks.push(childMenuItem); - }); - } - }); - const navHtmlBlock = div({ class: 'mega-menu-off-scroll hidden lg:flex items-center gap-x-4' }); - - // home link - const homeLink = a({ class: 'hidden lg:flex text-danaherpurple-500 hover:text-danaherpurple-800 lifesciences-logo-link font-semibold', href: '/' }, 'Life Sciences'); - - // main nav - navHtmlBlock.append(homeLink); - menuLinks.forEach((item) => { - const menuItemName = item.innerText; - const expandIcon = item.querySelector('span.icon-arrow-right'); - const menuItemEl = a( - { - class: 'btn !bg-transparent !text-black !font-medium !ring-0 !border-0 !ring-offset-0 group relative', - href: item.querySelector('a')?.href || '#', - }, - menuItemName, - ); - if (expandIcon) { - menuItemEl.innerHTML += ` - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="chevy h-5 w-5 fill-danaherpurple-500 transition group-hover:rotate-180 ml-1"> - <path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd"></path> - </svg>`; - menuItemEl.addEventListener('click', (e) => { - e.preventDefault(); - showFlyoutMenu(`Menu|${menuItemName}`); - }); - } - navHtmlBlock.append(menuItemEl); - }); - extendedSectionBlock.append(navHtmlBlock); -} - -function buildFlyoutMenus(headerBlock) { - headerBlock.querySelectorAll('.menu-flyout').forEach((menuItemEl) => { - menuItemEl.className = 'menu-flyout hidden flex fixed top-0 left-0 h-screen space-y-5 text-white duration-1000 ease-out transition-all w-full backdrop-brightness-50 z-50'; - menuItemEl.addEventListener('click', (e) => { - if (!menuItemEl.querySelector(':scope > div').contains(e.target)) { - menuItemEl.classList.add('hidden'); - } - }); - const menuPath = menuItemEl.querySelector(':scope > p').textContent; - const menuPathTokens = menuPath.split('|'); - menuItemEl.id = getMenuIdFromPath(menuPath); - const menuTitle = menuPathTokens[menuPathTokens.length - 1]; - const linkList = menuItemEl.querySelector(':scope > ul'); - linkList.className = 'space-y-1'; - linkList.querySelectorAll(':scope > li').forEach((linkItem) => { - linkItem.className = ''; - const linkItemName = linkItem.innerText; - const linkItemArrowRight = linkItem.querySelector('span.icon-arrow-right'); - - if (linkItemArrowRight) { - const arrowRight = span({ class: 'icon-arrow-right inline-block' }); - arrowRight.innerHTML = ` - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="w-3 h-3"> - <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd"></path> - </svg> - `; - linkItem.innerHTML = ''; - linkItem.className = 'min-w-[320px]'; - linkItem.append(a( - { - href: '#', - onclick: (e) => { - e.preventDefault(); - hideFlyoutMenu(e); - showFlyoutMenu(`${menuPath}|${linkItemName}`); - }, - }, - span(linkItemName), - arrowRight, - )); - } - linkItem.querySelector('a').className = 'w-80 flex items-center justify-between text-base text-gray-600 tracking-wide leading-6 hover:font-medium hover:bg-danaherlightblue-500 hover:text-white cursor-pointer transition rounded-md p-2'; - }); - const flyoutBlock = div( - { class: 'grid grid-flow-col grid-cols-1 fixed h-full justify-evenly duration-300 ease-out transition-all' }, - div( - { class: 'bg-white text-black overflow-auto space-y-3 max-w-sm' }, - div( - { class: 'flex items-center justify-between px-3 mt-2' }, - a({ - class: 'back-button', - href: '#', - onclick: (e) => { - e.preventDefault(); - hideFlyoutMenu(e); - showFlyoutMenu(menuPathTokens.slice(0, menuPathTokens.length - 1).join('|')); - }, - }), - a({ - class: 'close-button ml-auto text-3xl text-gray-500', - href: '#', - onclick: hideFlyoutMenu, - }, '×'), - ), - div( - { class: 'flex flex-col px-3 secCol' }, - div( - { class: 'inline-flex justify-between items-center mb-2' }, - span({ class: 'text-left text-xl font-bold py-2 pl-1 text-gray-900 w-1/2' }, menuTitle), - menuItemEl.querySelector(':scope > p > a') - ? a({ class: 'btn btn-info rounded-full', href: menuItemEl.querySelector(':scope > p > a').href }, 'Explore All') : '', - ), - linkList, - ), - ), - ); - flyoutBlock.querySelector('a.back-button').innerHTML = ` - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="chevy w-5 h-5"> - <path fill-rule="evenodd" d="M11.03 3.97a.75.75 0 010 1.06l-6.22 6.22H21a.75.75 0 010 1.5H4.81l6.22 6.22a.75.75 0 11-1.06 1.06l-7.5-7.5a.75.75 0 010-1.06l7.5-7.5a.75.75 0 011.06 0z" clip-rule="evenodd"></path> - </svg> - `; - menuItemEl.innerHTML = ''; - menuItemEl.append(flyoutBlock); - if (menuTitle === 'Menu') { - menuItemEl.querySelector('a.back-button').classList.add('hidden'); - } - }); -} - -function handleScroll() { - if (window.scrollY >= 95) { - document.getElementById('sticky-header').classList.add('remove-descedents', 'fixed', 'inset-x-0', 'top-0', 'w-full', 'lg:!pb-4', 'shadow-lg'); - document.getElementById('sticky-header').firstElementChild.classList.add('bg-white'); - } else if (window.scrollY < 95) { - document.getElementById('sticky-header').classList.remove('remove-descedents', 'fixed', 'inset-x-0', 'top-0', 'w-full', 'lg:!pb-4', 'shadow-lg'); - document.getElementById('sticky-header').firstElementChild.classList.remove('bg-danaherblue-600'); - } -} - -async function getQuote(headerBlock, authHeader) { - const quoteRequest = await fetch(`${baseURL}/rfqcart/-`, { headers: authHeader }); - if (quoteRequest.ok) { - const data = await quoteRequest.json(); - if (data && data.items) { - const rfqQuantity = data.items.length; - if (rfqQuantity !== 0) { - const quantityElement = headerBlock.querySelector('a.quote span.quantity'); - if (quantityElement) quantityElement.textContent = rfqQuantity; - const dotElement = headerBlock.querySelector('a.quote span.dot'); - if (dotElement) dotElement.classList.remove('hidden'); - } - } - } else if (quoteRequest.status !== 404) { - // eslint-disable-next-line no-console - console.warn('Failed to load quote cart'); - } -} - -/** - * decorates the header, mainly the nav - * @param {Element} block The header block element - */ -export default async function decorate(block) { - const resp = await fetch('/fragments/header/master.plain.html'); - - if (resp.ok) { - const html = await resp.text(); - - // build header DOM - const headerBlock = div({ class: 'nav-container pt-0 pb-0 md:p-0 bg-danaherpurple-800 relative z-20' }); - headerBlock.innerHTML = html; - - buildLogosBlock(headerBlock); - buildSearchBlock(headerBlock); - buildNavBlock(headerBlock); - buildFlyoutMenus(headerBlock); - - decorateIcons(headerBlock); - - window.addEventListener('scroll', handleScroll); - block.innerHTML = ''; - block.append(headerBlock); - - const authHeader = getAuthorization(); - if (authHeader && (authHeader.has('authentication-token') || authHeader.has('Authorization'))) { - getQuote(headerBlock, authHeader); - } - } - - return block; -} From 6c54d5343f116d1eab82ad19a13d66d67e2897d2 Mon Sep 17 00:00:00 2001 From: Dave Nichols <dave_nichols@europe.pall.com> Date: Tue, 30 Apr 2024 10:58:19 +0100 Subject: [PATCH 07/88] 2023 to 2024 --- fragments/footer.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fragments/footer.html b/fragments/footer.html index 754ceb1c3..faae1142a 100644 --- a/fragments/footer.html +++ b/fragments/footer.html @@ -50,7 +50,7 @@ <a href="/us/en/connect/newsletter.html" class="btn btn-outline-trending-brand px-9 py-2.5 rounded-full h-max my-auto">Subscribe</a> </div> <div class="flex flex-wrap gap-x-16 gap-y-8 justify-between py-8"> - <p>© 2023 DH Life Sciences, LLC. All Rights Reserved.</p> + <p>© 2024 DH Life Sciences, LLC. All Rights Reserved.</p> <a href="https://www.linkedin.com/company/danaher-life-sciences/"> <span class="sr-only">LinkedIn</span> <svg xmlns="http://www.w3.org/2000/svg" class="hover:fill-danaherpurple-800" width="24" height="24" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg> From 5a3ebd2d70b3f4fa5ea407dac67bc7ee783bab91 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 30 Apr 2024 15:34:45 +0530 Subject: [PATCH 08/88] Splited all CSS for each block --- blocks/accordion/accordion.css | 803 ++++ blocks/articles-list/articles-list.css | 686 ++++ blocks/banner/banner.css | 625 +++ blocks/blog-hero/blog-hero.css | 734 ++++ blocks/breadcrumb/breadcrumb.css | 659 +++ blocks/call-to-action/call-to-action.css | 716 ++++ blocks/card-list/card-list.css | 1018 +++++ blocks/cards/cards.css | 844 ++++ blocks/carousel/carousel.css | 961 +++++ blocks/category-family/category-family.css | 1167 ++++++ blocks/download/download.css | 715 ++++ blocks/embed/embed.css | 586 +++ blocks/footer/footer.css | 803 +++- blocks/header/header.css | 1440 +++++++ blocks/hero/hero.css | 789 ++++ blocks/logo-clouds/logo-clouds.css | 723 ++++ blocks/marketo-form/marketo-form.css | 690 ++++ blocks/mini-teasers/mini-teasers.css | 685 ++++ blocks/page-jump-menu/page-jump-menu.css | 710 ++++ blocks/popular-articles/popular-articles.css | 540 +++ blocks/product-card/product-card.css | 815 ++++ .../product-category-list.css | 876 ++++ .../product-citations/product-citations.css | 590 +++ blocks/product-menu/product-menu.css | 694 ++++ blocks/product-overview/product-overview.css | 601 +++ blocks/product-parts/product-parts.css | 682 ++++ .../product-recommendations.css | 667 +++ .../product-specifications.css | 683 ++++ blocks/recent-articles/recent-articles.css | 749 ++++ blocks/related-articles/related-articles.css | 650 +++ blocks/side-nav/side-nav.css | 711 ++++ blocks/social-feeds/social-feeds.css | 540 +++ blocks/social-media/social-media.css | 600 +++ blocks/stats/stats.css | 629 +++ blocks/table/table.css | 610 +++ blocks/tags-list/tags-list.css | 604 +++ blocks/takeway/takeway.css | 611 +++ blocks/testimonial/testimonial.css | 690 ++++ blocks/topic-list/topic-list.css | 644 +++ .../workflow-carousel/workflow-carousel.css | 820 ++++ blocks/workflow-tabs/workflow-tabs.css | 696 ++++ build-css.js | 225 +- styles/styles.css | 3583 +++-------------- tailwind.config.js | 3 +- 44 files changed, 30732 insertions(+), 3135 deletions(-) create mode 100644 blocks/accordion/accordion.css create mode 100644 blocks/articles-list/articles-list.css create mode 100644 blocks/banner/banner.css create mode 100644 blocks/blog-hero/blog-hero.css create mode 100644 blocks/breadcrumb/breadcrumb.css create mode 100644 blocks/call-to-action/call-to-action.css create mode 100644 blocks/card-list/card-list.css create mode 100644 blocks/cards/cards.css create mode 100644 blocks/carousel/carousel.css create mode 100644 blocks/category-family/category-family.css create mode 100644 blocks/download/download.css create mode 100644 blocks/embed/embed.css create mode 100644 blocks/header/header.css create mode 100644 blocks/hero/hero.css create mode 100644 blocks/logo-clouds/logo-clouds.css create mode 100644 blocks/marketo-form/marketo-form.css create mode 100644 blocks/mini-teasers/mini-teasers.css create mode 100644 blocks/page-jump-menu/page-jump-menu.css create mode 100644 blocks/popular-articles/popular-articles.css create mode 100644 blocks/product-card/product-card.css create mode 100644 blocks/product-category-list/product-category-list.css create mode 100644 blocks/product-citations/product-citations.css create mode 100644 blocks/product-menu/product-menu.css create mode 100644 blocks/product-overview/product-overview.css create mode 100644 blocks/product-parts/product-parts.css create mode 100644 blocks/product-recommendations/product-recommendations.css create mode 100644 blocks/product-specifications/product-specifications.css create mode 100644 blocks/recent-articles/recent-articles.css create mode 100644 blocks/related-articles/related-articles.css create mode 100644 blocks/side-nav/side-nav.css create mode 100644 blocks/social-feeds/social-feeds.css create mode 100644 blocks/social-media/social-media.css create mode 100644 blocks/stats/stats.css create mode 100644 blocks/table/table.css create mode 100644 blocks/tags-list/tags-list.css create mode 100644 blocks/takeway/takeway.css create mode 100644 blocks/testimonial/testimonial.css create mode 100644 blocks/topic-list/topic-list.css create mode 100644 blocks/workflow-carousel/workflow-carousel.css create mode 100644 blocks/workflow-tabs/workflow-tabs.css diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css new file mode 100644 index 000000000..52e822088 --- /dev/null +++ b/blocks/accordion/accordion.css @@ -0,0 +1,803 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.accordion-wrapper :is(.absolute) { + position: absolute; +} + +.accordion-wrapper :is(.relative) { + position: relative; +} + +.accordion-wrapper :is(.right-0) { + right: 0px; +} + +.accordion-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.accordion-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.accordion-wrapper :is(.mr-12) { + margin-right: 3rem; +} + +.accordion-wrapper :is(.block) { + display: block; +} + +.accordion-wrapper :is(.flex) { + display: flex; +} + +.accordion-wrapper :is(.grid) { + display: grid; +} + +.accordion-wrapper :is(.hidden) { + display: none; +} + +.accordion-wrapper :is(.h-6) { + height: 1.5rem; +} + +.accordion-wrapper :is(.h-full) { + height: 100%; +} + +.accordion-wrapper :is(.w-6) { + width: 1.5rem; +} + +.accordion-wrapper :is(.w-full) { + width: 100%; +} + +.accordion-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.accordion-wrapper :is(.rotate-0) { + --tw-rotate: 0deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.accordion-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.accordion-wrapper :is(.cursor-pointer) { + cursor: pointer; +} + +.accordion-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.accordion-wrapper :is(.grid-rows-\[0fr\]) { + grid-template-rows: 0fr; +} + +.accordion-wrapper :is(.items-center) { + align-items: center; +} + +.accordion-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.accordion-wrapper :is(.gap-16) { + gap: 4rem; +} + +.accordion-wrapper :is(.divide-y > :not([hidden]) ~ :not([hidden])) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.accordion-wrapper :is(.divide-gray-900\/10 > :not([hidden]) ~ :not([hidden])) { + border-color: rgb(17 24 39 / 0.1); +} + +.accordion-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.accordion-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.accordion-wrapper :is(.fill-current) { + fill: currentColor; +} + +.accordion-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.accordion-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.accordion-wrapper :is(.text-left) { + text-align: left; +} + +.accordion-wrapper :is(.align-middle) { + vertical-align: middle; +} + +.accordion-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.accordion-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.accordion-wrapper :is(.text-xl) { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.accordion-wrapper :is(.font-bold) { + font-weight: 700; +} + +.accordion-wrapper :is(.font-medium) { + font-weight: 500; +} + +.accordion-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.accordion-wrapper :is(.leading-7) { + line-height: 1.75rem; +} + +.accordion-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.accordion-wrapper :is(.text-gray-400) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.accordion-wrapper :is(.\!no-underline) { + text-decoration-line: none !important; +} + +.accordion-wrapper :is(.opacity-0) { + opacity: 0; +} + +.accordion-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.accordion-wrapper :is(.transition-all) { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.accordion-wrapper :is(.duration-300) { + transition-duration: 300ms; +} + +.accordion-wrapper :is(.ease-in-out) { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.accordion-wrapper :is(.peer:checked ~ .peer-checked\:grid-rows-\[1fr\]) { + grid-template-rows: 1fr; +} + +.accordion-wrapper :is(.peer:checked ~ .peer-checked\:py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.accordion-wrapper :is(.peer:checked ~ .peer-checked\:opacity-100) { + opacity: 1; +} + +.accordion-wrapper :is(.peer ~ .peer-\[\&_span\.minus\]\:rotate-90 span.minus) { + --tw-rotate: 90deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.accordion-wrapper :is(.peer ~ .peer-\[\&_span\.minus\]\:opacity-0 span.minus) { + opacity: 0; +} + +.accordion-wrapper :is(.peer ~ .peer-\[\&_span\.plus\]\:opacity-100 span.plus) { + opacity: 1; +} + +@media (min-width: 1024px) { + .accordion-wrapper :is(.lg\:block) { + display: block; + } + + .accordion-wrapper :is(.lg\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .accordion-wrapper :is(.lg\:pl-44) { + padding-left: 11rem; + } + + .accordion-wrapper :is(.lg\:text-center) { + text-align: center; + } +} + +.accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.minus\]\:rotate-180 span.minus) { + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.minus\]\:opacity-100 span.minus) { + opacity: 1; +} + +.accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.plus\]\:rotate-45 span.plus) { + --tw-rotate: 45deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.plus\]\:opacity-0 span.plus) { + opacity: 0; +} + +.accordion-wrapper :is(.\[\&_svg\>use\]\:stroke-black svg>use) { + stroke: #000; +} \ No newline at end of file diff --git a/blocks/articles-list/articles-list.css b/blocks/articles-list/articles-list.css new file mode 100644 index 000000000..c29917b66 --- /dev/null +++ b/blocks/articles-list/articles-list.css @@ -0,0 +1,686 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.articles-list-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.articles-list-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.articles-list-wrapper :is(.block) { + display: block; +} + +.articles-list-wrapper :is(.flex) { + display: flex; +} + +.articles-list-wrapper :is(.grid) { + display: grid; +} + +.articles-list-wrapper :is(.w-full) { + width: 100%; +} + +.articles-list-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.articles-list-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.articles-list-wrapper :is(.items-center) { + align-items: center; +} + +.articles-list-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.articles-list-wrapper :is(.justify-items-center) { + justify-items: center; +} + +.articles-list-wrapper :is(.gap-6) { + gap: 1.5rem; +} + +.articles-list-wrapper :is(.space-y-6 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); +} + +.articles-list-wrapper :is(.border-t) { + border-top-width: 1px; +} + +.articles-list-wrapper :is(.border-solid) { + border-style: solid; +} + +.articles-list-wrapper :is(.border-black) { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); +} + +.articles-list-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.articles-list-wrapper :is(.px-3) { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.articles-list-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.articles-list-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.articles-list-wrapper :is(.font-bold) { + font-weight: 700; +} + +.articles-list-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.articles-list-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +@media (min-width: 640px) { + .articles-list-wrapper :is(.sm\:grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .articles-list-wrapper :is(.sm\:px-0) { + padding-left: 0px; + padding-right: 0px; + } +} + +@media (min-width: 1024px) { + .articles-list-wrapper :is(.lg\:grid-cols-3) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} \ No newline at end of file diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css new file mode 100644 index 000000000..318f194f0 --- /dev/null +++ b/blocks/banner/banner.css @@ -0,0 +1,625 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.banner-wrapper :is(.relative) { + position: relative; +} + +.banner-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.banner-wrapper :is(.block) { + display: block; +} + +.banner-wrapper :is(.flex) { + display: flex; +} + +.banner-wrapper :is(.h-max) { + height: -moz-max-content; + height: max-content; +} + +.banner-wrapper :is(.min-h-\[13rem\]) { + min-height: 13rem; +} + +.banner-wrapper :is(.w-full) { + width: 100%; +} + +.banner-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.banner-wrapper :is(.items-center) { + align-items: center; +} + +.banner-wrapper :is(.justify-start) { + justify-content: flex-start; +} + +.banner-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.banner-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.banner-wrapper :is(.py-4) { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.banner-wrapper :is(.text-4xl) { + font-size: 2.25rem; + line-height: 2.5rem; +} + +.banner-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.banner-wrapper :is(.font-extrabold) { + font-weight: 800; +} + +.banner-wrapper :is(.font-normal) { + font-weight: 200; +} + +.banner-wrapper :is(.tracking-tight) { + letter-spacing: -0.025em; +} + +.banner-wrapper :is(.text-white) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +@media (min-width: 768px) { + .banner-wrapper :is(.md\:w-3\/4) { + width: 75%; + } +} \ No newline at end of file diff --git a/blocks/blog-hero/blog-hero.css b/blocks/blog-hero/blog-hero.css new file mode 100644 index 000000000..d5485cbbc --- /dev/null +++ b/blocks/blog-hero/blog-hero.css @@ -0,0 +1,734 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.blog-hero-wrapper :is(.col-span-1) { + grid-column: span 1 / span 1; +} + +.blog-hero-wrapper :is(.col-span-2) { + grid-column: span 2 / span 2; +} + +.blog-hero-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.blog-hero-wrapper :is(.my-2) { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.blog-hero-wrapper :is(.my-4) { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.blog-hero-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.blog-hero-wrapper :is(.ml-2) { + margin-left: 0.5rem; +} + +.blog-hero-wrapper :is(.ml-4) { + margin-left: 1rem; +} + +.blog-hero-wrapper :is(.mr-4) { + margin-right: 1rem; +} + +.blog-hero-wrapper :is(.mr-7) { + margin-right: 1.75rem; +} + +.blog-hero-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.blog-hero-wrapper :is(.mt-8) { + margin-top: 2rem; +} + +.blog-hero-wrapper :is(.block) { + display: block; +} + +.blog-hero-wrapper :is(.flex) { + display: flex; +} + +.blog-hero-wrapper :is(.grid) { + display: grid; +} + +.blog-hero-wrapper :is(.hidden) { + display: none; +} + +.blog-hero-wrapper :is(.h-16) { + height: 4rem; +} + +.blog-hero-wrapper :is(.w-16) { + width: 4rem; +} + +.blog-hero-wrapper :is(.w-full) { + width: 100%; +} + +.blog-hero-wrapper :is(.w-max) { + width: -moz-max-content; + width: max-content; +} + +.blog-hero-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.blog-hero-wrapper :is(.grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.blog-hero-wrapper :is(.items-center) { + align-items: center; +} + +.blog-hero-wrapper :is(.justify-start) { + justify-content: flex-start; +} + +.blog-hero-wrapper :is(.justify-end) { + justify-content: flex-end; +} + +.blog-hero-wrapper :is(.gap-x-20) { + -moz-column-gap: 5rem; + column-gap: 5rem; +} + +.blog-hero-wrapper :is(.space-y-1 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + +.blog-hero-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.blog-hero-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.blog-hero-wrapper :is(.px-2) { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.blog-hero-wrapper :is(.pl-1) { + padding-left: 0.25rem; +} + +.blog-hero-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.blog-hero-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.blog-hero-wrapper :is(.text-xl) { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.blog-hero-wrapper :is(.font-medium) { + font-weight: 500; +} + +.blog-hero-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.blog-hero-wrapper :is(.leading-8) { + line-height: 2rem; +} + +.blog-hero-wrapper :is(.text-danaherblack-500) { + --tw-text-opacity: 1; + color: rgb(51 51 51 / var(--tw-text-opacity)); +} + +.blog-hero-wrapper :is(.text-danahergray-500) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.blog-hero-wrapper :is(.text-danaherpurple-800) { + --tw-text-opacity: 1; + color: rgb(64 0 165 / var(--tw-text-opacity)); +} + +.blog-hero-wrapper :is(.text-gray-500) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.blog-hero-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +@media (min-width: 1024px) { + .blog-hero-wrapper :is(.lg\:h-20) { + height: 5rem; + } + + .blog-hero-wrapper :is(.lg\:w-20) { + width: 5rem; + } + + .blog-hero-wrapper :is(.lg\:grid-cols-4) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} \ No newline at end of file diff --git a/blocks/breadcrumb/breadcrumb.css b/blocks/breadcrumb/breadcrumb.css new file mode 100644 index 000000000..2558607e9 --- /dev/null +++ b/blocks/breadcrumb/breadcrumb.css @@ -0,0 +1,659 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.breadcrumb-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.breadcrumb-wrapper :is(.block) { + display: block; +} + +.breadcrumb-wrapper :is(.flex) { + display: flex; +} + +.breadcrumb-wrapper :is(.h-5) { + height: 1.25rem; +} + +.breadcrumb-wrapper :is(.h-5\/6) { + height: 83.333333%; +} + +.breadcrumb-wrapper :is(.w-5) { + width: 1.25rem; +} + +.breadcrumb-wrapper :is(.w-6) { + width: 1.5rem; +} + +.breadcrumb-wrapper :is(.w-full) { + width: 100%; +} + +.breadcrumb-wrapper :is(.max-w-screen-xl) { + max-width: 1280px; +} + +.breadcrumb-wrapper :is(.flex-shrink-0) { + flex-shrink: 0; +} + +.breadcrumb-wrapper :is(.items-center) { + align-items: center; +} + +.breadcrumb-wrapper :is(.gap-4) { + gap: 1rem; +} + +.breadcrumb-wrapper :is(.gap-x-3) { + -moz-column-gap: 0.75rem; + column-gap: 0.75rem; +} + +.breadcrumb-wrapper :is(.overflow-x-auto) { + overflow-x: auto; +} + +.breadcrumb-wrapper :is(.whitespace-nowrap) { + white-space: nowrap; +} + +.breadcrumb-wrapper :is(.border-b) { + border-bottom-width: 1px; +} + +.breadcrumb-wrapper :is(.border-gray-200) { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); +} + +.breadcrumb-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.breadcrumb-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.breadcrumb-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.breadcrumb-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.breadcrumb-wrapper :is(.font-medium) { + font-weight: 500; +} + +.breadcrumb-wrapper :is(.text-gray-300) { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + +.breadcrumb-wrapper :is(.text-gray-500) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.breadcrumb-wrapper :is(.hover\:text-gray-700:hover) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +@media (min-width: 640px) { + .breadcrumb-wrapper :is(.sm\:px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; + } +} + +@media (min-width: 1024px) { + .breadcrumb-wrapper :is(.lg\:px-7) { + padding-left: 1.75rem; + padding-right: 1.75rem; + } +} \ No newline at end of file diff --git a/blocks/call-to-action/call-to-action.css b/blocks/call-to-action/call-to-action.css new file mode 100644 index 000000000..4a0cd37d6 --- /dev/null +++ b/blocks/call-to-action/call-to-action.css @@ -0,0 +1,716 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.btn-outline-trending-brand { + color: #7523FF; + background-color: rgb(255 255 255); + border-color: #7523FF; + border-width: 2px; +} + +.btn-outline-trending-brand:hover { + color: rgb(255 255 255); + background-color: #7523FF; +} + +.call-to-action-wrapper :is(.m-0) { + margin: 0px; +} + +.call-to-action-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.call-to-action-wrapper :is(.block) { + display: block; +} + +.call-to-action-wrapper :is(.w-full) { + width: 100%; +} + +.call-to-action-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.call-to-action-wrapper :is(.max-w-sm) { + max-width: 24rem; +} + +.call-to-action-wrapper :is(.shrink-0) { + flex-shrink: 0; +} + +.call-to-action-wrapper :is(.items-center) { + align-items: center; +} + +.call-to-action-wrapper :is(.space-y-8 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); +} + +.call-to-action-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.call-to-action-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.call-to-action-wrapper :is(.bg-danaherpurple-800) { + --tw-bg-opacity: 1; + background-color: rgb(64 0 165 / var(--tw-bg-opacity)); +} + +.call-to-action-wrapper :is(.p-0) { + padding: 0px; +} + +.call-to-action-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.call-to-action-wrapper :is(.py-3) { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.call-to-action-wrapper :is(.py-8) { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.call-to-action-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + +.call-to-action-wrapper :is(.text-2xl) { + font-size: 1.5rem; + line-height: 2rem; +} + +.call-to-action-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.call-to-action-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.call-to-action-wrapper :is(.font-normal) { + font-weight: 200; +} + +.call-to-action-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.call-to-action-wrapper :is(.tracking-tight) { + letter-spacing: -0.025em; +} + +.call-to-action-wrapper :is(.tracking-wide) { + letter-spacing: 0.025em; +} + +.call-to-action-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.call-to-action-wrapper :is(.text-white) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.call-to-action-wrapper :is(.\!no-underline) { + text-decoration-line: none !important; +} + +@media (min-width: 640px) { + .call-to-action-wrapper :is(.sm\:text-3xl) { + font-size: 1.875rem; + line-height: 2.25rem; + } +} + +@media (min-width: 768px) { + .call-to-action-wrapper :is(.md\:flex) { + display: flex; + } + + .call-to-action-wrapper :is(.md\:flex-row) { + flex-direction: row; + } + + .call-to-action-wrapper :is(.md\:justify-between) { + justify-content: space-between; + } + + .call-to-action-wrapper :is(.md\:space-y-0 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0px * var(--tw-space-y-reverse)); + } + + .call-to-action-wrapper :is(.md\:px-12) { + padding-left: 3rem; + padding-right: 3rem; + } + + .call-to-action-wrapper :is(.md\:py-16) { + padding-top: 4rem; + padding-bottom: 4rem; + } +} + +@media (min-width: 1024px) { + .call-to-action-wrapper :is(.lg\:max-w-2xl) { + max-width: 42rem; + } + + .call-to-action-wrapper :is(.lg\:py-8) { + padding-top: 2rem; + padding-bottom: 2rem; + } +} \ No newline at end of file diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css new file mode 100644 index 000000000..686e95111 --- /dev/null +++ b/blocks/card-list/card-list.css @@ -0,0 +1,1018 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.card-list-wrapper :is(.relative) { + position: relative; +} + +.card-list-wrapper :is(.col-span-1) { + grid-column: span 1 / span 1; +} + +.card-list-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.card-list-wrapper :is(.my-2) { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.card-list-wrapper :is(.\!mb-4) { + margin-bottom: 1rem !important; +} + +.card-list-wrapper :is(.-mt-px) { + margin-top: -1px; +} + +.card-list-wrapper :is(.mb-3) { + margin-bottom: 0.75rem; +} + +.card-list-wrapper :is(.mb-4) { + margin-bottom: 1rem; +} + +.card-list-wrapper :is(.mt-3) { + margin-top: 0.75rem; +} + +.card-list-wrapper :is(.mt-8) { + margin-top: 2rem; +} + +.card-list-wrapper :is(.mt-auto) { + margin-top: auto; +} + +.card-list-wrapper :is(.\!line-clamp-3) { + overflow: hidden !important; + display: -webkit-box !important; + -webkit-box-orient: vertical !important; + -webkit-line-clamp: 3 !important; +} + +.card-list-wrapper :is(.line-clamp-3) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + +.card-list-wrapper :is(.line-clamp-4) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; +} + +.card-list-wrapper :is(.block) { + display: block; +} + +.card-list-wrapper :is(.inline-block) { + display: inline-block; +} + +.card-list-wrapper :is(.flex) { + display: flex; +} + +.card-list-wrapper :is(.inline-flex) { + display: inline-flex; +} + +.card-list-wrapper :is(.grid) { + display: grid; +} + +.card-list-wrapper :is(.hidden) { + display: none; +} + +.card-list-wrapper :is(.\!h-20) { + height: 5rem !important; +} + +.card-list-wrapper :is(.h-20) { + height: 5rem; +} + +.card-list-wrapper :is(.h-full) { + height: 100%; +} + +.card-list-wrapper :is(.w-0) { + width: 0px; +} + +.card-list-wrapper :is(.w-full) { + width: 100%; +} + +.card-list-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.card-list-wrapper :is(.max-w-xl) { + max-width: 36rem; +} + +.card-list-wrapper :is(.flex-1) { + flex: 1 1 0%; +} + +.card-list-wrapper :is(.grow) { + flex-grow: 1; +} + +.card-list-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.card-list-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.card-list-wrapper :is(.flex-col) { + flex-direction: column; +} + +.card-list-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + +.card-list-wrapper :is(.items-center) { + align-items: center; +} + +.card-list-wrapper :is(.justify-end) { + justify-content: flex-end; +} + +.card-list-wrapper :is(.justify-center) { + justify-content: center; +} + +.card-list-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.card-list-wrapper :is(.justify-items-center) { + justify-items: center; +} + +.card-list-wrapper :is(.gap-2) { + gap: 0.5rem; +} + +.card-list-wrapper :is(.gap-6) { + gap: 1.5rem; +} + +.card-list-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.card-list-wrapper :is(.\!break-words) { + overflow-wrap: break-word !important; +} + +.card-list-wrapper :is(.break-words) { + overflow-wrap: break-word; +} + +.card-list-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.card-list-wrapper :is(.rounded-lg) { + border-radius: 0.5rem; +} + +.card-list-wrapper :is(.border) { + border-width: 1px; +} + +.card-list-wrapper :is(.border-t) { + border-top-width: 1px; +} + +.card-list-wrapper :is(.border-t-2) { + border-top-width: 2px; +} + +.card-list-wrapper :is(.border-danaherpurple-500) { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +.card-list-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.card-list-wrapper :is(.bg-danaherpurple-50) { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + +.card-list-wrapper :is(.bg-danaherpurple-500) { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +.card-list-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.card-list-wrapper :is(.\!px-6) { + padding-left: 1.5rem !important; + padding-right: 1.5rem !important; +} + +.card-list-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.card-list-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.card-list-wrapper :is(.py-1) { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.card-list-wrapper :is(.py-4) { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.card-list-wrapper :is(.py-5) { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + +.card-list-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.card-list-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.card-list-wrapper :is(.pl-2) { + padding-left: 0.5rem; +} + +.card-list-wrapper :is(.pt-0) { + padding-top: 0px; +} + +.card-list-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.card-list-wrapper :is(.text-center) { + text-align: center; +} + +.card-list-wrapper :is(.\!text-lg) { + font-size: 1.125rem !important; + line-height: 1.75rem !important; +} + +.card-list-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.card-list-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.card-list-wrapper :is(.text-xl) { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.card-list-wrapper :is(.\!font-semibold) { + font-weight: 700 !important; +} + +.card-list-wrapper :is(.font-extralight) { + font-weight: 200; +} + +.card-list-wrapper :is(.font-medium) { + font-weight: 500; +} + +.card-list-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.card-list-wrapper :is(.leading-5) { + line-height: 1.25rem; +} + +.card-list-wrapper :is(.\!text-danahergray-900) { + --tw-text-opacity: 1 !important; + color: rgb(17 24 39 / var(--tw-text-opacity)) !important; +} + +.card-list-wrapper :is(.text-black) { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.card-list-wrapper :is(.text-danaherblue-600) { + --tw-text-opacity: 1; + color: rgb(13 49 114 / var(--tw-text-opacity)); +} + +.card-list-wrapper :is(.text-danahergray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.card-list-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.card-list-wrapper :is(.text-gray-500) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.card-list-wrapper :is(.text-white) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.card-list-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.card-list-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.card-list-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.card-list-wrapper :is(.duration-500) { + transition-duration: 500ms; +} + +.card-list-wrapper :is(.hover\:scale-105:hover) { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.card-list-wrapper :is(.hover\:border-t-2:hover) { + border-top-width: 2px; +} + +.card-list-wrapper :is(.hover\:border-gray-300:hover) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.card-list-wrapper :is(.hover\:bg-danaherpurple-500:hover) { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +.card-list-wrapper :is(.hover\:text-gray-700:hover) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.card-list-wrapper :is(.hover\:text-white:hover) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +@media (min-width: 640px) { + .card-list-wrapper :is(.sm\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .card-list-wrapper :is(.sm\:px-0) { + padding-left: 0px; + padding-right: 0px; + } +} + +@media (min-width: 768px) { + .card-list-wrapper :is(.md\:mt-12) { + margin-top: 3rem; + } + + .card-list-wrapper :is(.md\:flex) { + display: flex; + } + + .card-list-wrapper :is(.md\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .card-list-wrapper :is(.md\:py-0) { + padding-top: 0px; + padding-bottom: 0px; + } +} + +@media (min-width: 1024px) { + .card-list-wrapper :is(.lg\:grid-cols-3) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .card-list-wrapper :is(.lg\:grid-cols-4) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} \ No newline at end of file diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css new file mode 100644 index 000000000..d3aa88cfc --- /dev/null +++ b/blocks/cards/cards.css @@ -0,0 +1,844 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.cards-wrapper :is(.relative) { + position: relative; +} + +.cards-wrapper :is(.col-span-1) { + grid-column: span 1 / span 1; +} + +.cards-wrapper :is(.m-0) { + margin: 0px; +} + +.cards-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.cards-wrapper :is(.my-2) { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.cards-wrapper :is(.mb-4) { + margin-bottom: 1rem; +} + +.cards-wrapper :is(.\!line-clamp-2) { + overflow: hidden !important; + display: -webkit-box !important; + -webkit-box-orient: vertical !important; + -webkit-line-clamp: 2 !important; +} + +.cards-wrapper :is(.\!line-clamp-3) { + overflow: hidden !important; + display: -webkit-box !important; + -webkit-box-orient: vertical !important; + -webkit-line-clamp: 3 !important; +} + +.cards-wrapper :is(.\!line-clamp-4) { + overflow: hidden !important; + display: -webkit-box !important; + -webkit-box-orient: vertical !important; + -webkit-line-clamp: 4 !important; +} + +.cards-wrapper :is(.\!block) { + display: block !important; +} + +.cards-wrapper :is(.block) { + display: block; +} + +.cards-wrapper :is(.flex) { + display: flex; +} + +.cards-wrapper :is(.inline-flex) { + display: inline-flex; +} + +.cards-wrapper :is(.grid) { + display: grid; +} + +.cards-wrapper :is(.\!h-16) { + height: 4rem !important; +} + +.cards-wrapper :is(.\!h-20) { + height: 5rem !important; +} + +.cards-wrapper :is(.h-48) { + height: 12rem; +} + +.cards-wrapper :is(.h-52) { + height: 13rem; +} + +.cards-wrapper :is(.w-full) { + width: 100%; +} + +.cards-wrapper :is(.max-w-xl) { + max-width: 36rem; +} + +.cards-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.cards-wrapper :is(.cursor-pointer) { + cursor: pointer; +} + +.cards-wrapper :is(.list-none) { + list-style-type: none; +} + +.cards-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.cards-wrapper :is(.flex-col) { + flex-direction: column; +} + +.cards-wrapper :is(.justify-center) { + justify-content: center; +} + +.cards-wrapper :is(.gap-x-8) { + -moz-column-gap: 2rem; + column-gap: 2rem; +} + +.cards-wrapper :is(.gap-y-16) { + row-gap: 4rem; +} + +.cards-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.cards-wrapper :is(.\!break-words) { + overflow-wrap: break-word !important; +} + +.cards-wrapper :is(.rounded-lg) { + border-radius: 0.5rem; +} + +.cards-wrapper :is(.rounded-b) { + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} + +.cards-wrapper :is(.rounded-t) { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + +.cards-wrapper :is(.border) { + border-width: 1px; +} + +.cards-wrapper :is(.border-l-\[0\.5px\]) { + border-left-width: 0.5px; +} + +.cards-wrapper :is(.border-gray-300) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.cards-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.cards-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.cards-wrapper :is(.\!object-contain) { + -o-object-fit: contain !important; + object-fit: contain !important; +} + +.cards-wrapper :is(.p-0) { + padding: 0px; +} + +.cards-wrapper :is(.p-4) { + padding: 1rem; +} + +.cards-wrapper :is(.px-0) { + padding-left: 0px; + padding-right: 0px; +} + +.cards-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.cards-wrapper :is(.pl-2) { + padding-left: 0.5rem; +} + +.cards-wrapper :is(.pl-8) { + padding-left: 2rem; +} + +.cards-wrapper :is(.pr-2) { + padding-right: 0.5rem; +} + +.cards-wrapper :is(.pt-5) { + padding-top: 1.25rem; +} + +.cards-wrapper :is(.\!text-2xl) { + font-size: 1.5rem !important; + line-height: 2rem !important; +} + +.cards-wrapper :is(.text-3xl) { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.cards-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.cards-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.cards-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.cards-wrapper :is(.\!font-normal) { + font-weight: 200 !important; +} + +.cards-wrapper :is(.font-extrabold) { + font-weight: 800; +} + +.cards-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.cards-wrapper :is(.leading-5) { + line-height: 1.25rem; +} + +.cards-wrapper :is(.text-danahergray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.cards-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.cards-wrapper :is(.text-gray-500) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.cards-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.cards-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.cards-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.cards-wrapper :is(.duration-500) { + transition-duration: 500ms; +} + +.cards-wrapper :is(.hover\:scale-105:hover) { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +@media (min-width: 640px) { + .cards-wrapper :is(.sm\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (min-width: 1024px) { + .cards-wrapper :is(.lg\:grid-cols-3) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cards-wrapper :is(.lg\:grid-cols-4) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} \ No newline at end of file diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css new file mode 100644 index 000000000..3ae92e972 --- /dev/null +++ b/blocks/carousel/carousel.css @@ -0,0 +1,961 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.btn-outline-trending-brand { + color: #7523FF; + background-color: rgb(255 255 255); + border-color: #7523FF; + border-width: 2px; +} + +.btn-outline-trending-brand:hover { + color: rgb(255 255 255); + background-color: #7523FF; +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.carousel-wrapper :is(.sr-only) { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.carousel-wrapper :is(.absolute) { + position: absolute; +} + +.carousel-wrapper :is(.relative) { + position: relative; +} + +.carousel-wrapper :is(.inset-0) { + inset: 0px; +} + +.carousel-wrapper :is(.bottom-0) { + bottom: 0px; +} + +.carousel-wrapper :is(.z-10) { + z-index: 10; +} + +.carousel-wrapper :is(.m-0) { + margin: 0px; +} + +.carousel-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.carousel-wrapper :is(.mt-10) { + margin-top: 2.5rem; +} + +.carousel-wrapper :is(.mt-6) { + margin-top: 1.5rem; +} + +.carousel-wrapper :is(.block) { + display: block; +} + +.carousel-wrapper :is(.flex) { + display: flex; +} + +.carousel-wrapper :is(.inline-flex) { + display: inline-flex; +} + +.carousel-wrapper :is(.grid) { + display: grid; +} + +.carousel-wrapper :is(.hidden) { + display: none; +} + +.carousel-wrapper :is(.h-3) { + height: 0.75rem; +} + +.carousel-wrapper :is(.h-48) { + height: 12rem; +} + +.carousel-wrapper :is(.h-5) { + height: 1.25rem; +} + +.carousel-wrapper :is(.h-8) { + height: 2rem; +} + +.carousel-wrapper :is(.h-auto) { + height: auto; +} + +.carousel-wrapper :is(.h-full) { + height: 100%; +} + +.carousel-wrapper :is(.min-h-\[30rem\]) { + min-height: 30rem; +} + +.carousel-wrapper :is(.w-3) { + width: 0.75rem; +} + +.carousel-wrapper :is(.w-5) { + width: 1.25rem; +} + +.carousel-wrapper :is(.w-8) { + width: 2rem; +} + +.carousel-wrapper :is(.w-full) { + width: 100%; +} + +.carousel-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.carousel-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.carousel-wrapper :is(.cursor-pointer) { + cursor: pointer; +} + +.carousel-wrapper :is(.snap-x) { + scroll-snap-type: x var(--tw-scroll-snap-strictness); +} + +.carousel-wrapper :is(.snap-mandatory) { + --tw-scroll-snap-strictness: mandatory; +} + +.carousel-wrapper :is(.snap-start) { + scroll-snap-align: start; +} + +.carousel-wrapper :is(.list-none) { + list-style-type: none; +} + +.carousel-wrapper :is(.grid-flow-col) { + grid-auto-flow: column; +} + +.carousel-wrapper :is(.flex-col) { + flex-direction: column; +} + +.carousel-wrapper :is(.items-center) { + align-items: center; +} + +.carousel-wrapper :is(.justify-center) { + justify-content: center; +} + +.carousel-wrapper :is(.gap-5) { + gap: 1.25rem; +} + +.carousel-wrapper :is(.gap-6) { + gap: 1.5rem; +} + +.carousel-wrapper :is(.gap-x-2) { + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} + +.carousel-wrapper :is(.gap-x-4) { + -moz-column-gap: 1rem; + column-gap: 1rem; +} + +.carousel-wrapper :is(.space-x-2 > :not([hidden]) ~ :not([hidden])) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.carousel-wrapper :is(.space-x-3 > :not([hidden]) ~ :not([hidden])) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} + +.carousel-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.carousel-wrapper :is(.overflow-x-auto) { + overflow-x: auto; +} + +.carousel-wrapper :is(.scroll-smooth) { + scroll-behavior: smooth; +} + +.carousel-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.carousel-wrapper :is(.rounded-md) { + border-radius: 0.375rem; +} + +.carousel-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.carousel-wrapper :is(.bg-danaherpurple-50) { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + +.carousel-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.carousel-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.carousel-wrapper :is(.\!px-6) { + padding-left: 1.5rem !important; + padding-right: 1.5rem !important; +} + +.carousel-wrapper :is(.\!py-16) { + padding-top: 4rem !important; + padding-bottom: 4rem !important; +} + +.carousel-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.carousel-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.carousel-wrapper :is(.py-8) { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.carousel-wrapper :is(.text-2xl) { + font-size: 1.5rem; + line-height: 2rem; +} + +.carousel-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.carousel-wrapper :is(.text-xl) { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.carousel-wrapper :is(.font-bold) { + font-weight: 700; +} + +.carousel-wrapper :is(.font-extralight) { + font-weight: 200; +} + +.carousel-wrapper :is(.font-medium) { + font-weight: 500; +} + +.carousel-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.carousel-wrapper :is(.leading-7) { + line-height: 1.75rem; +} + +.carousel-wrapper :is(.tracking-tight) { + letter-spacing: -0.025em; +} + +.carousel-wrapper :is(.tracking-wide) { + letter-spacing: 0.025em; +} + +.carousel-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.carousel-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.carousel-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.carousel-wrapper :is(.transition-transform) { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.carousel-wrapper :is(.ease-in-out) { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.carousel-wrapper :is(.focus\:outline-none:focus) { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.carousel-wrapper :is(.group:hover .group-hover\:translate-x-1) { + --tw-translate-x: 0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +@media (min-width: 768px) { + .carousel-wrapper :is(.md\:absolute) { + position: absolute; + } + + .carousel-wrapper :is(.md\:bottom-16) { + bottom: 4rem; + } + + .carousel-wrapper :is(.md\:h-\[35rem\]) { + height: 35rem; + } + + .carousel-wrapper :is(.md\:min-h-\[37rem\]) { + min-height: 37rem; + } + + .carousel-wrapper :is(.md\:flex-row) { + flex-direction: row; + } + + .carousel-wrapper :is(.md\:text-4xl) { + font-size: 2.25rem; + line-height: 2.5rem; + } + + .carousel-wrapper :is(.md\:leading-\[44px\]) { + line-height: 44px; + } + + .carousel-wrapper :is(.md\:tracking-tight) { + letter-spacing: -0.025em; + } +} + +@media (min-width: 1024px) { + .carousel-wrapper :is(.lg\:absolute) { + position: absolute; + } + + .carousel-wrapper :is(.lg\:inset-y-0) { + top: 0px; + bottom: 0px; + } + + .carousel-wrapper :is(.lg\:right-0) { + right: 0px; + } + + .carousel-wrapper :is(.lg\:m-auto) { + margin: auto; + } + + .carousel-wrapper :is(.lg\:w-1\/2) { + width: 50%; + } + + .carousel-wrapper :is(.lg\:px-8) { + padding-left: 2rem; + padding-right: 2rem; + } + + .carousel-wrapper :is(.lg\:py-0) { + padding-top: 0px; + padding-bottom: 0px; + } + + .carousel-wrapper :is(.lg\:text-\[40px\]) { + font-size: 40px; + } +} + +@media (min-width: 1280px) { + .carousel-wrapper :is(.xl\:pr-10) { + padding-right: 2.5rem; + } +} \ No newline at end of file diff --git a/blocks/category-family/category-family.css b/blocks/category-family/category-family.css new file mode 100644 index 000000000..c9306a220 --- /dev/null +++ b/blocks/category-family/category-family.css @@ -0,0 +1,1167 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.category-family-wrapper :is(.pointer-events-none) { + pointer-events: none; +} + +.category-family-wrapper :is(.absolute) { + position: absolute; +} + +.category-family-wrapper :is(.relative) { + position: relative; +} + +.category-family-wrapper :is(.left-0) { + left: 0px; +} + +.category-family-wrapper :is(.z-10) { + z-index: 10; +} + +.category-family-wrapper :is(.col-span-1) { + grid-column: span 1 / span 1; +} + +.category-family-wrapper :is(.col-span-2) { + grid-column: span 2 / span 2; +} + +.category-family-wrapper :is(.col-span-4) { + grid-column: span 4 / span 4; +} + +.category-family-wrapper :is(.m-1) { + margin: 0.25rem; +} + +.category-family-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.category-family-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.category-family-wrapper :is(.mb-4) { + margin-bottom: 1rem; +} + +.category-family-wrapper :is(.mt-3) { + margin-top: 0.75rem; +} + +.category-family-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.category-family-wrapper :is(.mt-6) { + margin-top: 1.5rem; +} + +.category-family-wrapper :is(.\!line-clamp-3) { + overflow: hidden !important; + display: -webkit-box !important; + -webkit-box-orient: vertical !important; + -webkit-line-clamp: 3 !important; +} + +.category-family-wrapper :is(.line-clamp-4) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; +} + +.category-family-wrapper :is(.block) { + display: block; +} + +.category-family-wrapper :is(.flex) { + display: flex; +} + +.category-family-wrapper :is(.inline-flex) { + display: inline-flex; +} + +.category-family-wrapper :is(.grid) { + display: grid; +} + +.category-family-wrapper :is(.contents) { + display: contents; +} + +.category-family-wrapper :is(.hidden) { + display: none; +} + +.category-family-wrapper :is(.\!h-14) { + height: 3.5rem !important; +} + +.category-family-wrapper :is(.\!h-20) { + height: 5rem !important; +} + +.category-family-wrapper :is(.h-10) { + height: 2.5rem; +} + +.category-family-wrapper :is(.h-2) { + height: 0.5rem; +} + +.category-family-wrapper :is(.h-24) { + height: 6rem; +} + +.category-family-wrapper :is(.h-3) { + height: 0.75rem; +} + +.category-family-wrapper :is(.h-4) { + height: 1rem; +} + +.category-family-wrapper :is(.h-48) { + height: 12rem; +} + +.category-family-wrapper :is(.h-5) { + height: 1.25rem; +} + +.category-family-wrapper :is(.h-7) { + height: 1.75rem; +} + +.category-family-wrapper :is(.h-72) { + height: 18rem; +} + +.category-family-wrapper :is(.h-8) { + height: 2rem; +} + +.category-family-wrapper :is(.h-full) { + height: 100%; +} + +.category-family-wrapper :is(.w-2\/4) { + width: 50%; +} + +.category-family-wrapper :is(.w-2\/5) { + width: 40%; +} + +.category-family-wrapper :is(.w-3\/4) { + width: 75%; +} + +.category-family-wrapper :is(.w-4) { + width: 1rem; +} + +.category-family-wrapper :is(.w-4\/5) { + width: 80%; +} + +.category-family-wrapper :is(.w-64) { + width: 16rem; +} + +.category-family-wrapper :is(.w-9) { + width: 2.25rem; +} + +.category-family-wrapper :is(.w-\[15rem\]) { + width: 15rem; +} + +.category-family-wrapper :is(.w-full) { + width: 100%; +} + +.category-family-wrapper :is(.max-w-5xl) { + max-width: 64rem; +} + +.category-family-wrapper :is(.max-w-sm) { + max-width: 24rem; +} + +.category-family-wrapper :is(.max-w-xl) { + max-width: 36rem; +} + +.category-family-wrapper :is(.max-w-xs) { + max-width: 20rem; +} + +.category-family-wrapper :is(.grow) { + flex-grow: 1; +} + +.category-family-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +@keyframes pulse { + 50% { + opacity: .5; + } +} + +.category-family-wrapper :is(.animate-pulse) { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +.category-family-wrapper :is(.cursor-pointer) { + cursor: pointer; +} + +.category-family-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.category-family-wrapper :is(.grid-cols-3) { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.category-family-wrapper :is(.grid-rows-1) { + grid-template-rows: repeat(1, minmax(0, 1fr)); +} + +.category-family-wrapper :is(.flex-row) { + flex-direction: row; +} + +.category-family-wrapper :is(.flex-col) { + flex-direction: column; +} + +.category-family-wrapper :is(.items-start) { + align-items: flex-start; +} + +.category-family-wrapper :is(.items-center) { + align-items: center; +} + +.category-family-wrapper :is(.justify-center) { + justify-content: center; +} + +.category-family-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.category-family-wrapper :is(.gap-1) { + gap: 0.25rem; +} + +.category-family-wrapper :is(.gap-2) { + gap: 0.5rem; +} + +.category-family-wrapper :is(.gap-4) { + gap: 1rem; +} + +.category-family-wrapper :is(.gap-5) { + gap: 1.25rem; +} + +.category-family-wrapper :is(.gap-6) { + gap: 1.5rem; +} + +.category-family-wrapper :is(.gap-x-10) { + -moz-column-gap: 2.5rem; + column-gap: 2.5rem; +} + +.category-family-wrapper :is(.gap-y-2) { + row-gap: 0.5rem; +} + +.category-family-wrapper :is(.gap-y-4) { + row-gap: 1rem; +} + +.category-family-wrapper :is(.space-x-2 > :not([hidden]) ~ :not([hidden])) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.category-family-wrapper :is(.space-x-4 > :not([hidden]) ~ :not([hidden])) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + +.category-family-wrapper :is(.space-y-1 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + +.category-family-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.category-family-wrapper :is(.truncate) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.category-family-wrapper :is(.\!break-words) { + overflow-wrap: break-word !important; +} + +.category-family-wrapper :is(.break-words) { + overflow-wrap: break-word; +} + +.category-family-wrapper :is(.\!rounded-full) { + border-radius: 9999px !important; +} + +.category-family-wrapper :is(.rounded) { + border-radius: 0.25rem; +} + +.category-family-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.category-family-wrapper :is(.rounded-lg) { + border-radius: 0.5rem; +} + +.category-family-wrapper :is(.rounded-md) { + border-radius: 0.375rem; +} + +.category-family-wrapper :is(.rounded-none) { + border-radius: 0px; +} + +.category-family-wrapper :is(.border) { + border-width: 1px; +} + +.category-family-wrapper :is(.border-8) { + border-width: 8px; +} + +.category-family-wrapper :is(.\!border-gray-300) { + --tw-border-opacity: 1 !important; + border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important; +} + +.category-family-wrapper :is(.bg-danaheratomicgrey-200) { + --tw-bg-opacity: 1; + background-color: rgb(229 232 232 / var(--tw-bg-opacity)); +} + +.category-family-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.category-family-wrapper :is(.bg-gray-100) { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.category-family-wrapper :is(.bg-neutral-300) { + --tw-bg-opacity: 1; + background-color: rgb(212 212 212 / var(--tw-bg-opacity)); +} + +.category-family-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.category-family-wrapper :is(.\!fill-current) { + fill: currentColor !important; +} + +.category-family-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.category-family-wrapper :is(.p-0) { + padding: 0px; +} + +.category-family-wrapper :is(.p-0\.5) { + padding: 0.125rem; +} + +.category-family-wrapper :is(.p-1) { + padding: 0.25rem; +} + +.category-family-wrapper :is(.p-4) { + padding: 1rem; +} + +.category-family-wrapper :is(.\!px-7) { + padding-left: 1.75rem !important; + padding-right: 1.75rem !important; +} + +.category-family-wrapper :is(.px-2) { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.category-family-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.category-family-wrapper :is(.px-9) { + padding-left: 2.25rem; + padding-right: 2.25rem; +} + +.category-family-wrapper :is(.py-1) { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.category-family-wrapper :is(.py-4) { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.category-family-wrapper :is(.py-5) { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + +.category-family-wrapper :is(.py-\[0\.625rem\]) { + padding-top: 0.625rem; + padding-bottom: 0.625rem; +} + +.category-family-wrapper :is(.pl-0) { + padding-left: 0px; +} + +.category-family-wrapper :is(.pr-2) { + padding-right: 0.5rem; +} + +.category-family-wrapper :is(.pt-10) { + padding-top: 2.5rem; +} + +.category-family-wrapper :is(.text-left) { + text-align: left; +} + +.category-family-wrapper :is(.align-middle) { + vertical-align: middle; +} + +.category-family-wrapper :is(.\!text-lg) { + font-size: 1.125rem !important; + line-height: 1.75rem !important; +} + +.category-family-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.category-family-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.category-family-wrapper :is(.text-xs) { + font-size: 0.75rem; + line-height: 1rem; +} + +.category-family-wrapper :is(.\!font-semibold) { + font-weight: 700 !important; +} + +.category-family-wrapper :is(.font-bold) { + font-weight: 700; +} + +.category-family-wrapper :is(.\!text-danahergray-900) { + --tw-text-opacity: 1 !important; + color: rgb(17 24 39 / var(--tw-text-opacity)) !important; +} + +.category-family-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.category-family-wrapper :is(.shadow) { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.category-family-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.category-family-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.category-family-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.category-family-wrapper :is(.duration-500) { + transition-duration: 500ms; +} + +.category-family-wrapper :is(.hover\:scale-105:hover) { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.category-family-wrapper :is(.hover\:bg-gray-100:hover) { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +@media (min-width: 768px) { + .category-family-wrapper :is(.md\:h-6) { + height: 1.5rem; + } + + .category-family-wrapper :is(.md\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .category-family-wrapper :is(.md\:flex-row) { + flex-direction: row; + } +} + +@media (min-width: 1024px) { + .category-family-wrapper :is(.lg\:grid-cols-3) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .category-family-wrapper :is(.lg\:grid-cols-5) { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .category-family-wrapper :is(.lg\:flex-row) { + flex-direction: row; + } +} + +.category-family-wrapper :is(.\[\&\:not\(\:first-child\)\:even\]\:opacity-40:not(:first-child):even) { + opacity: 0.4; +} + +.category-family-wrapper :is(.\[\&\:not\(\:first-child\)\:odd\]\:opacity-20:not(:first-child):odd) { + opacity: 0.2; +} + +.category-family-wrapper :is(.\[\&\:not\(\:first-child\)\]\:opacity-20:not(:first-child)) { + opacity: 0.2; +} + +.category-family-wrapper :is(.\[\&\:not\(\:first-child\)\]\:opacity-40:not(:first-child)) { + opacity: 0.4; +} \ No newline at end of file diff --git a/blocks/download/download.css b/blocks/download/download.css new file mode 100644 index 000000000..a0c03787f --- /dev/null +++ b/blocks/download/download.css @@ -0,0 +1,715 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.download-wrapper :is(.mb-3) { + margin-bottom: 0.75rem; +} + +.download-wrapper :is(.block) { + display: block; +} + +.download-wrapper :is(.flex) { + display: flex; +} + +.download-wrapper :is(.aspect-video) { + aspect-ratio: 16 / 9; +} + +.download-wrapper :is(.h-64) { + height: 16rem; +} + +.download-wrapper :is(.w-64) { + width: 16rem; +} + +.download-wrapper :is(.w-full) { + width: 100%; +} + +.download-wrapper :is(.shrink-0) { + flex-shrink: 0; +} + +.download-wrapper :is(.flex-col) { + flex-direction: column; +} + +.download-wrapper :is(.items-start) { + align-items: flex-start; +} + +.download-wrapper :is(.gap-5) { + gap: 1.25rem; +} + +.download-wrapper :is(.gap-x-2) { + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} + +.download-wrapper :is(.gap-y-4) { + row-gap: 1rem; +} + +.download-wrapper :is(.space-x-2 > :not([hidden]) ~ :not([hidden])) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.download-wrapper :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.download-wrapper :is(.divide-y > :not([hidden]) ~ :not([hidden])) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.download-wrapper :is(.break-words) { + overflow-wrap: break-word; +} + +.download-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.download-wrapper :is(.rounded-md) { + border-radius: 0.375rem; +} + +.download-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.download-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.download-wrapper :is(.px-3) { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.download-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.download-wrapper :is(.py-1) { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.download-wrapper :is(.py-4) { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.download-wrapper :is(.font-sans) { + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +.download-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.download-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.download-wrapper :is(.text-xs) { + font-size: 0.75rem; + line-height: 1rem; +} + +.download-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.download-wrapper :is(.tracking-tight) { + letter-spacing: -0.025em; +} + +.download-wrapper :is(.tracking-wide) { + letter-spacing: 0.025em; +} + +.download-wrapper :is(.text-danaherlightblue-500) { + --tw-text-opacity: 1; + color: rgb(59 199 229 / var(--tw-text-opacity)); +} + +.download-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.download-wrapper :is(.\!no-underline) { + text-decoration-line: none !important; +} + +@media (min-width: 768px) { + .download-wrapper :is(.md\:mb-0) { + margin-bottom: 0px; + } + + .download-wrapper :is(.md\:h-36) { + height: 9rem; + } + + .download-wrapper :is(.md\:w-52) { + width: 13rem; + } + + .download-wrapper :is(.md\:flex-row) { + flex-direction: row; + } + + .download-wrapper :is(.md\:items-center) { + align-items: center; + } +} \ No newline at end of file diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css new file mode 100644 index 000000000..9f4f30bba --- /dev/null +++ b/blocks/embed/embed.css @@ -0,0 +1,586 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.embed-wrapper :is(.absolute) { + position: absolute; +} + +.embed-wrapper :is(.relative) { + position: relative; +} + +.embed-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.embed-wrapper :is(.my-8) { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.embed-wrapper :is(.block) { + display: block; +} + +.embed-wrapper :is(.flex) { + display: flex; +} + +.embed-wrapper :is(.max-w-3xl) { + max-width: 48rem; +} + +.embed-wrapper :is(.justify-center) { + justify-content: center; +} + +.embed-wrapper :is(.border) { + border-width: 1px; +} + +.embed-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.embed-wrapper :is(.text-center) { + text-align: center; +} + +.embed-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} \ No newline at end of file diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index b53e30393..c1c270c39 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,73 +1,772 @@ -.sticky-footer { - position: fixed; - bottom: 0.75rem; - z-index: 10; +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.btn-outline-trending-brand { + color: #7523FF; + background-color: rgb(255 255 255); + border-color: #7523FF; + border-width: 2px; +} + +.btn-outline-trending-brand:hover { + color: rgb(255 255 255); + background-color: #7523FF; +} + +.footer-wrapper :is(.sr-only) { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.footer-wrapper :is(.m-0) { + margin: 0px; +} + +.footer-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.footer-wrapper :is(.my-auto) { + margin-top: auto; + margin-bottom: auto; +} + +.footer-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.footer-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.footer-wrapper :is(.block) { + display: block; +} + +.footer-wrapper :is(.flex) { display: flex; - width: 100%; - justify-content: center; - -moz-column-gap: 0.5rem; - column-gap: 0.5rem; - padding-left: 1.25rem; - padding-right: 1.25rem; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms -} - -.sticky-footer button, .sticky-footer a { - -moz-column-gap: 0.5rem; - column-gap: 0.5rem; - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); - padding-left: 0.875rem; - padding-right: 0.875rem; - padding-top: 0.625rem; - padding-bottom: 0.625rem; - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)) } -.sticky-footer button:hover, .sticky-footer a:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)) +.footer-wrapper :is(.hidden) { + display: none; +} + +.footer-wrapper :is(.h-5) { + height: 1.25rem; +} + +.footer-wrapper :is(.h-full) { + height: 100%; +} + +.footer-wrapper :is(.h-max) { + height: -moz-max-content; + height: max-content; +} + +.footer-wrapper :is(.w-5) { + width: 1.25rem; +} + +.footer-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.footer-wrapper :is(.flex-col) { + flex-direction: column; } -.sticky-footer svg.users { - fill: transparent +.footer-wrapper :is(.flex-wrap) { + flex-wrap: wrap; } -.sticky-footer .btn-group a:first-child { - border-top-left-radius: 9999px !important; - border-bottom-left-radius: 9999px !important +.footer-wrapper :is(.justify-between) { + justify-content: space-between; } -.sticky-footer .btn-group button:last-child { - border-top-right-radius: 9999px !important; - border-bottom-right-radius: 9999px !important +.footer-wrapper :is(.gap-x-16) { + -moz-column-gap: 4rem; + column-gap: 4rem; } -.sticky-footer button.accessibility { - -moz-column-gap: 0.25rem; - column-gap: 0.25rem; +.footer-wrapper :is(.gap-y-8) { + row-gap: 2rem; +} + +.footer-wrapper :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.footer-wrapper :is(.divide-y > :not([hidden]) ~ :not([hidden])) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.footer-wrapper :is(.divide-danaherpurple-500 > :not([hidden]) ~ :not([hidden])) { + --tw-divide-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-divide-opacity)); +} + +.footer-wrapper :is(.rounded-full) { border-radius: 9999px; +} + +.footer-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.footer-wrapper :is(.bg-danaherpurple-50) { --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); - padding-left: 0.625rem; - padding-right: 0.625rem; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + +.footer-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.footer-wrapper :is(.px-9) { + padding-left: 2.25rem; + padding-right: 2.25rem; +} + +.footer-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.footer-wrapper :is(.py-2\.5) { padding-top: 0.625rem; padding-bottom: 0.625rem; +} + +.footer-wrapper :is(.py-6) { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.footer-wrapper :is(.py-8) { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.footer-wrapper :is(.align-top) { + vertical-align: top; +} + +.footer-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.footer-wrapper :is(.font-bold) { + font-weight: 700; +} + +.footer-wrapper :is(.font-normal) { + font-weight: 200; +} + +.footer-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.footer-wrapper :is(.hover\:fill-danaherpurple-800:hover) { + fill: #4000A5; +} + +.footer-wrapper :is(.hover\:text-danaherpurple-800:hover) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)) + color: rgb(64 0 165 / var(--tw-text-opacity)); } -.sticky-footer button.accessibility:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)) +.footer-wrapper :is(.hover\:underline:hover) { + text-decoration-line: underline; +} + +@media (min-width: 640px) { + .footer-wrapper :is(.sm\:px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; + } +} + +@media (min-width: 768px) { + .footer-wrapper :is(.md\:block) { + display: block; + } + + .footer-wrapper :is(.md\:h-6) { + height: 1.5rem; + } + + .footer-wrapper :is(.md\:w-6) { + width: 1.5rem; + } + + .footer-wrapper :is(.md\:flex-row) { + flex-direction: row; + } + + .footer-wrapper :is(.md\:flex-wrap) { + flex-wrap: wrap; + } } -.sticky-footer button.accessibility svg { - fill: none; - stroke: #fff +@media (min-width: 1024px) { + .footer-wrapper :is(.lg\:px-8) { + padding-left: 2rem; + padding-right: 2rem; + } } + +@media print { + .footer-wrapper :is(.print\:hidden) { + display: none; + } +} \ No newline at end of file diff --git a/blocks/header/header.css b/blocks/header/header.css new file mode 100644 index 000000000..3b1a35b40 --- /dev/null +++ b/blocks/header/header.css @@ -0,0 +1,1440 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.header-wrapper :is(.fixed) { + position: fixed; +} + +.header-wrapper :is(.absolute) { + position: absolute; +} + +.header-wrapper :is(.relative) { + position: relative; +} + +.header-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.header-wrapper :is(.left-0) { + left: 0px; +} + +.header-wrapper :is(.left-4) { + left: 1rem; +} + +.header-wrapper :is(.left-6) { + left: 1.5rem; +} + +.header-wrapper :is(.top-0) { + top: 0px; +} + +.header-wrapper :is(.top-4) { + top: 1rem; +} + +.header-wrapper :is(.top-full) { + top: 100%; +} + +.header-wrapper :is(.z-10) { + z-index: 10; +} + +.header-wrapper :is(.z-20) { + z-index: 20; +} + +.header-wrapper :is(.z-40) { + z-index: 40; +} + +.header-wrapper :is(.z-50) { + z-index: 50; +} + +.header-wrapper :is(.order-last) { + order: 9999; +} + +.header-wrapper :is(.order-none) { + order: 0; +} + +.header-wrapper :is(.-my-px) { + margin-top: -1px; + margin-bottom: -1px; +} + +.header-wrapper :is(.mx-10) { + margin-left: 2.5rem; + margin-right: 2.5rem; +} + +.header-wrapper :is(.mx-2) { + margin-left: 0.5rem; + margin-right: 0.5rem; +} + +.header-wrapper :is(.mx-6) { + margin-left: 1.5rem; + margin-right: 1.5rem; +} + +.header-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.header-wrapper :is(.my-auto) { + margin-top: auto; + margin-bottom: auto; +} + +.header-wrapper :is(.-mr-px) { + margin-right: -1px; +} + +.header-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.header-wrapper :is(.mb-\[2px\]) { + margin-bottom: 2px; +} + +.header-wrapper :is(.ml-1) { + margin-left: 0.25rem; +} + +.header-wrapper :is(.ml-2) { + margin-left: 0.5rem; +} + +.header-wrapper :is(.ml-auto) { + margin-left: auto; +} + +.header-wrapper :is(.mr-2) { + margin-right: 0.5rem; +} + +.header-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.header-wrapper :is(.mt-3) { + margin-top: 0.75rem; +} + +.header-wrapper :is(.line-clamp-2) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.header-wrapper :is(.block) { + display: block; +} + +.header-wrapper :is(.flex) { + display: flex; +} + +.header-wrapper :is(.inline-flex) { + display: inline-flex; +} + +.header-wrapper :is(.grid) { + display: grid; +} + +.header-wrapper :is(.hidden) { + display: none; +} + +.header-wrapper :is(.h-10) { + height: 2.5rem; +} + +.header-wrapper :is(.h-12) { + height: 3rem; +} + +.header-wrapper :is(.h-14) { + height: 3.5rem; +} + +.header-wrapper :is(.h-2) { + height: 0.5rem; +} + +.header-wrapper :is(.h-3) { + height: 0.75rem; +} + +.header-wrapper :is(.h-4) { + height: 1rem; +} + +.header-wrapper :is(.h-6) { + height: 1.5rem; +} + +.header-wrapper :is(.h-7) { + height: 1.75rem; +} + +.header-wrapper :is(.h-8) { + height: 2rem; +} + +.header-wrapper :is(.h-full) { + height: 100%; +} + +.header-wrapper :is(.h-screen) { + height: 100vh; +} + +.header-wrapper :is(.min-h-\[40px\]) { + min-height: 40px; +} + +.header-wrapper :is(.w-12) { + width: 3rem; +} + +.header-wrapper :is(.w-14) { + width: 3.5rem; +} + +.header-wrapper :is(.w-2) { + width: 0.5rem; +} + +.header-wrapper :is(.w-3) { + width: 0.75rem; +} + +.header-wrapper :is(.w-4) { + width: 1rem; +} + +.header-wrapper :is(.w-6) { + width: 1.5rem; +} + +.header-wrapper :is(.w-8) { + width: 2rem; +} + +.header-wrapper :is(.w-9) { + width: 2.25rem; +} + +.header-wrapper :is(.w-\[360px\]) { + width: 360px; +} + +.header-wrapper :is(.w-auto) { + width: auto; +} + +.header-wrapper :is(.w-full) { + width: 100%; +} + +.header-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.header-wrapper :is(.max-w-full) { + max-width: 100%; +} + +.header-wrapper :is(.max-w-sm) { + max-width: 24rem; +} + +.header-wrapper :is(.shrink-0) { + flex-shrink: 0; +} + +.header-wrapper :is(.flex-grow) { + flex-grow: 1; +} + +.header-wrapper :is(.grow) { + flex-grow: 1; +} + +.header-wrapper :is(.basis-1\/2) { + flex-basis: 50%; +} + +@keyframes ping { + 75%, 100% { + transform: scale(2); + opacity: 0; + } +} + +.header-wrapper :is(.animate-ping) { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} + +.header-wrapper :is(.cursor-pointer) { + cursor: pointer; +} + +.header-wrapper :is(.select-none) { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.header-wrapper :is(.grid-rows-1) { + grid-template-rows: repeat(1, minmax(0, 1fr)); +} + +.header-wrapper :is(.flex-row) { + flex-direction: row; +} + +.header-wrapper :is(.flex-col) { + flex-direction: column; +} + +.header-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + +.header-wrapper :is(.items-center) { + align-items: center; +} + +.header-wrapper :is(.justify-end) { + justify-content: flex-end; +} + +.header-wrapper :is(.justify-center) { + justify-content: center; +} + +.header-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.header-wrapper :is(.gap-2) { + gap: 0.5rem; +} + +.header-wrapper :is(.gap-5) { + gap: 1.25rem; +} + +.header-wrapper :is(.gap-x-1) { + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} + +.header-wrapper :is(.gap-x-4) { + -moz-column-gap: 1rem; + column-gap: 1rem; +} + +.header-wrapper :is(.gap-y-2) { + row-gap: 0.5rem; +} + +.header-wrapper :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} + +.header-wrapper :is(.overflow-auto) { + overflow: auto; +} + +.header-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.header-wrapper :is(.break-all) { + word-break: break-all; +} + +.header-wrapper :is(.rounded) { + border-radius: 0.25rem; +} + +.header-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.header-wrapper :is(.rounded-lg) { + border-radius: 0.5rem; +} + +.header-wrapper :is(.rounded-md) { + border-radius: 0.375rem; +} + +.header-wrapper :is(.border) { + border-width: 1px; +} + +.header-wrapper :is(.border-0) { + border-width: 0px; +} + +.header-wrapper :is(.border-b) { + border-bottom-width: 1px; +} + +.header-wrapper :is(.border-black) { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); +} + +.header-wrapper :is(.border-gray-600) { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); +} + +.header-wrapper :is(.bg-black) { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.bg-danaherblue-600) { + --tw-bg-opacity: 1; + background-color: rgb(13 49 114 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.bg-danahergray-150) { + --tw-bg-opacity: 1; + background-color: rgb(118 118 118 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.bg-danaherlightblue-500) { + --tw-bg-opacity: 1; + background-color: rgb(59 199 229 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.bg-danaherorange-500) { + --tw-bg-opacity: 1; + background-color: rgb(220 96 22 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.bg-danaherpurple-500) { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.bg-danaherpurple-800) { + --tw-bg-opacity: 1; + background-color: rgb(64 0 165 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.bg-gray-50) { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.bg-transparent) { + background-color: transparent; +} + +.header-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.fill-current) { + fill: currentColor; +} + +.header-wrapper :is(.object-contain) { + -o-object-fit: contain; + object-fit: contain; +} + +.header-wrapper :is(.p-1) { + padding: 0.25rem; +} + +.header-wrapper :is(.p-2) { + padding: 0.5rem; +} + +.header-wrapper :is(.px-2) { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.header-wrapper :is(.px-3) { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.header-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.header-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.header-wrapper :is(.py-3) { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.header-wrapper :is(.py-3\.5) { + padding-top: 0.875rem; + padding-bottom: 0.875rem; +} + +.header-wrapper :is(.py-4) { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.header-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.header-wrapper :is(.pl-1) { + padding-left: 0.25rem; +} + +.header-wrapper :is(.pl-2) { + padding-left: 0.5rem; +} + +.header-wrapper :is(.pr-3) { + padding-right: 0.75rem; +} + +.header-wrapper :is(.pt-0) { + padding-top: 0px; +} + +.header-wrapper :is(.text-left) { + text-align: left; +} + +.header-wrapper :is(.text-2xl) { + font-size: 1.5rem; + line-height: 2rem; +} + +.header-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.header-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.header-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.header-wrapper :is(.text-xs) { + font-size: 0.75rem; + line-height: 1rem; +} + +.header-wrapper :is(.font-bold) { + font-weight: 700; +} + +.header-wrapper :is(.font-extralight) { + font-weight: 200; +} + +.header-wrapper :is(.font-medium) { + font-weight: 500; +} + +.header-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.header-wrapper :is(.tracking-wider) { + letter-spacing: 0.05em; +} + +.header-wrapper :is(.text-black) { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.header-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.header-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.header-wrapper :is(.opacity-75) { + opacity: 0.75; +} + +.header-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.header-wrapper :is(.shadow-sm) { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.header-wrapper :is(.outline-none) { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.header-wrapper :is(.ring-0) { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.header-wrapper :is(.ring-offset-0) { + --tw-ring-offset-width: 0px; +} + +.header-wrapper :is(.invert) { + --tw-invert: invert(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.header-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.header-wrapper :is(.backdrop-brightness-50) { + --tw-backdrop-brightness: brightness(.5); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.header-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.header-wrapper :is(.transition-all) { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.header-wrapper :is(.transition-transform) { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.header-wrapper :is(.ease-out) { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); +} + +.header-wrapper :is(.focus-within\:ring:focus-within) { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.header-wrapper :is(.hover\:bg-danahergray-100:hover) { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.hover\:bg-danaherpurple-50:hover) { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.hover\:bg-gray-200\/30:hover) { + background-color: rgb(229 231 235 / 0.3); +} + +.header-wrapper :is(.hover\:bg-transparent:hover) { + background-color: transparent; +} + +.header-wrapper :is(.hover\:fill-cyan-600:hover) { + fill: #0891b2; +} + +.header-wrapper :is(.hover\:font-medium:hover) { + font-weight: 500; +} + +.header-wrapper :is(.hover\:text-black:hover) { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.header-wrapper :is(.hover\:text-cyan-600:hover) { + --tw-text-opacity: 1; + color: rgb(8 145 178 / var(--tw-text-opacity)); +} + +.header-wrapper :is(.hover\:text-danaherpurple-800:hover) { + --tw-text-opacity: 1; + color: rgb(64 0 165 / var(--tw-text-opacity)); +} + +.header-wrapper :is(.group:hover .group-hover\:-translate-x-0) { + --tw-translate-x: -0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.header-wrapper :is(.group:hover .group-hover\:-translate-x-0\.5) { + --tw-translate-x: -0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.header-wrapper :is(.group:hover .group-hover\:translate-x-0) { + --tw-translate-x: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.header-wrapper :is(.group:hover .group-hover\:translate-x-0\.5) { + --tw-translate-x: 0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.header-wrapper :is(.group:hover .group-hover\:rotate-180) { + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.header-wrapper :is(.group:hover .group-hover\:bg-danahergray-200) { + --tw-bg-opacity: 1; + background-color: rgb(97 97 97 / var(--tw-bg-opacity)); +} + +@media (min-width: 768px) { + .header-wrapper :is(.md\:order-last) { + order: 9999; + } + + .header-wrapper :is(.md\:order-none) { + order: 0; + } + + .header-wrapper :is(.md\:mx-5) { + margin-left: 1.25rem; + margin-right: 1.25rem; + } + + .header-wrapper :is(.md\:ml-14) { + margin-left: 3.5rem; + } + + .header-wrapper :is(.md\:mr-4) { + margin-right: 1rem; + } + + .header-wrapper :is(.md\:block) { + display: block; + } + + .header-wrapper :is(.md\:hidden) { + display: none; + } + + .header-wrapper :is(.md\:w-20) { + width: 5rem; + } + + .header-wrapper :is(.md\:w-3\/5) { + width: 60%; + } + + .header-wrapper :is(.md\:w-full) { + width: 100%; + } + + .header-wrapper :is(.md\:p-0) { + padding: 0px; + } + + .header-wrapper :is(.md\:py-4) { + padding-top: 1rem; + padding-bottom: 1rem; + } +} + +@media (min-width: 1024px) { + .header-wrapper :is(.lg\:my-4) { + margin-top: 1rem; + margin-bottom: 1rem; + } + + .header-wrapper :is(.lg\:block) { + display: block; + } + + .header-wrapper :is(.lg\:inline) { + display: inline; + } + + .header-wrapper :is(.lg\:flex) { + display: flex; + } + + .header-wrapper :is(.lg\:inline-flex) { + display: inline-flex; + } + + .header-wrapper :is(.lg\:hidden) { + display: none; + } + + .header-wrapper :is(.lg\:w-44) { + width: 11rem; + } + + .header-wrapper :is(.lg\:grid-rows-2) { + grid-template-rows: repeat(2, minmax(0, 1fr)); + } + + @media (min-width: 1024px) { + .header-wrapper :is(.lg\:lg\:grid-rows-1) { + grid-template-rows: repeat(1, minmax(0, 1fr)); + } + + .header-wrapper :is(.lg\:lg\:grid-rows-2) { + grid-template-rows: repeat(2, minmax(0, 1fr)); + } + } + + .header-wrapper :is(.lg\:px-8) { + padding-left: 2rem; + padding-right: 2rem; + } + + .header-wrapper :is(.lg\:\!pb-4) { + padding-bottom: 1rem !important; + } + + .header-wrapper :is(.lg\:pb-1) { + padding-bottom: 0.25rem; + } + + .header-wrapper :is(.lg\:pl-2) { + padding-left: 0.5rem; + } + + .header-wrapper :is(.lg\:pt-4) { + padding-top: 1rem; + } +} + +.header-wrapper :is(.\[\&\>a\]\:w-full>a) { + width: 100%; +} + +.header-wrapper :is(.\[\&\>li\.active\]\:bg-danaherpurple-50>li.active) { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + +.header-wrapper :is(.\[\&\>li\.active\]\:font-bold>li.active) { + font-weight: 700; +} + +.header-wrapper :is(.\[\&_svg\>use\]\:stroke-black svg>use) { + stroke: #000; +} + +.header-wrapper :is(.\[\&_svg\>use\]\:stroke-danaherpurple-500 svg>use) { + stroke: #7523FF; +} + +.header-wrapper :is(.\[\&_svg\>use\]\:stroke-gray-500\/70 svg>use) { + stroke: rgb(107 114 128 / 0.7); +} + +.header-wrapper :is(.\[\&_svg\>use\]\:stroke-2 svg>use) { + stroke-width: 2; +} + +.header-wrapper :is(.\[\&_svg\>use\]\:hover\:stroke-black:hover svg>use) { + stroke: #000; +} + +.header-wrapper :is(.\[\&_svg\>use\]\:hover\:stroke-danaherpurple-800:hover svg>use) { + stroke: #4000A5; +} + +.header-wrapper :is(.\[\&_svg\]\:stroke-white svg) { + stroke: #fff; +} \ No newline at end of file diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css new file mode 100644 index 000000000..682f64b29 --- /dev/null +++ b/blocks/hero/hero.css @@ -0,0 +1,789 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.hero-wrapper :is(.fixed) { + position: fixed; +} + +.hero-wrapper :is(.absolute) { + position: absolute; +} + +.hero-wrapper :is(.relative) { + position: relative; +} + +.hero-wrapper :is(.inset-0) { + inset: 0px; +} + +.hero-wrapper :is(.left-0) { + left: 0px; +} + +.hero-wrapper :is(.top-0) { + top: 0px; +} + +.hero-wrapper :is(.z-50) { + z-index: 50; +} + +.hero-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.hero-wrapper :is(.mb-1) { + margin-bottom: 0.25rem; +} + +.hero-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.hero-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.hero-wrapper :is(.mt-8) { + margin-top: 2rem; +} + +.hero-wrapper :is(.block) { + display: block; +} + +.hero-wrapper :is(.flex) { + display: flex; +} + +.hero-wrapper :is(.hidden) { + display: none; +} + +.hero-wrapper :is(.h-12) { + height: 3rem; +} + +.hero-wrapper :is(.h-80) { + height: 20rem; +} + +.hero-wrapper :is(.w-12) { + width: 3rem; +} + +.hero-wrapper :is(.w-full) { + width: 100%; +} + +.hero-wrapper :is(.\!max-w-\[unset\]) { + max-width: unset !important; +} + +.hero-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.hero-wrapper :is(.max-w-full) { + max-width: 100%; +} + +.hero-wrapper :is(.max-w-sm) { + max-width: 24rem; +} + +.hero-wrapper :is(.flex-col) { + flex-direction: column; +} + +.hero-wrapper :is(.justify-center) { + justify-content: center; +} + +.hero-wrapper :is(.place-self-end) { + place-self: end; +} + +.hero-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.hero-wrapper :is(.rounded) { + border-radius: 0.25rem; +} + +.hero-wrapper :is(.rounded-lg) { + border-radius: 0.5rem; +} + +.hero-wrapper :is(.rounded-xl) { + border-radius: 0.75rem; +} + +.hero-wrapper :is(.border) { + border-width: 1px; +} + +.hero-wrapper :is(.border-purple-200) { + --tw-border-opacity: 1; + border-color: rgb(125 86 164 / var(--tw-border-opacity)); +} + +.hero-wrapper :is(.bg-black\/25) { + background-color: rgb(0 0 0 / 0.25); +} + +.hero-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.hero-wrapper :is(.bg-transparent) { + background-color: transparent; +} + +.hero-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.hero-wrapper :is(.\!p-0) { + padding: 0px !important; +} + +.hero-wrapper :is(.p-2) { + padding: 0.5rem; +} + +.hero-wrapper :is(.p-4) { + padding: 1rem; +} + +.hero-wrapper :is(.pb-\[56\.25\%\]) { + padding-bottom: 56.25%; +} + +.hero-wrapper :is(.text-2xl) { + font-size: 1.5rem; + line-height: 2rem; +} + +.hero-wrapper :is(.text-6xl) { + font-size: 3.75rem; + line-height: 1; +} + +.hero-wrapper :is(.font-extrabold) { + font-weight: 800; +} + +.hero-wrapper :is(.font-normal) { + font-weight: 200; +} + +.hero-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.hero-wrapper :is(.leading-none) { + line-height: 1; +} + +.hero-wrapper :is(.tracking-wide) { + letter-spacing: 0.025em; +} + +.hero-wrapper :is(.text-gray-600) { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} + +.hero-wrapper :is(.text-purple-200) { + --tw-text-opacity: 1; + color: rgb(125 86 164 / var(--tw-text-opacity)); +} + +.hero-wrapper :is(.text-white) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.hero-wrapper :is(.backdrop-brightness-50) { + --tw-backdrop-brightness: brightness(.5); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.hero-wrapper :is(.hover\:bg-purple-200:hover) { + --tw-bg-opacity: 1; + background-color: rgb(125 86 164 / var(--tw-bg-opacity)); +} + +.hero-wrapper :is(.hover\:text-white:hover) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +@media (min-width: 768px) { + .hero-wrapper :is(.md\:mt-16) { + margin-top: 4rem; + } + + .hero-wrapper :is(.md\:h-full) { + height: 100%; + } + + .hero-wrapper :is(.md\:p-6) { + padding: 1.5rem; + } + + .hero-wrapper :is(.md\:px-8) { + padding-left: 2rem; + padding-right: 2rem; + } +} + +@media (min-width: 1024px) { + .hero-wrapper :is(.lg\:mb-8) { + margin-bottom: 2rem; + } + + .hero-wrapper :is(.lg\:text-\[11rem\]) { + font-size: 11rem; + } +} \ No newline at end of file diff --git a/blocks/logo-clouds/logo-clouds.css b/blocks/logo-clouds/logo-clouds.css new file mode 100644 index 000000000..0ffd77bc5 --- /dev/null +++ b/blocks/logo-clouds/logo-clouds.css @@ -0,0 +1,723 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.logo-clouds-wrapper :is(.relative) { + position: relative; +} + +.logo-clouds-wrapper :is(.col-span-1) { + grid-column: span 1 / span 1; +} + +.logo-clouds-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.logo-clouds-wrapper :is(.my-2) { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.logo-clouds-wrapper :is(.mt-8) { + margin-top: 2rem; +} + +.logo-clouds-wrapper :is(.block) { + display: block; +} + +.logo-clouds-wrapper :is(.flex) { + display: flex; +} + +.logo-clouds-wrapper :is(.grid) { + display: grid; +} + +.logo-clouds-wrapper :is(.h-12) { + height: 3rem; +} + +.logo-clouds-wrapper :is(.h-full) { + height: 100%; +} + +.logo-clouds-wrapper :is(.w-60) { + width: 15rem; +} + +.logo-clouds-wrapper :is(.w-full) { + width: 100%; +} + +.logo-clouds-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.logo-clouds-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.logo-clouds-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.logo-clouds-wrapper :is(.grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.logo-clouds-wrapper :is(.items-center) { + align-items: center; +} + +.logo-clouds-wrapper :is(.justify-center) { + justify-content: center; +} + +.logo-clouds-wrapper :is(.gap-0) { + gap: 0px; +} + +.logo-clouds-wrapper :is(.gap-0\.5) { + gap: 0.125rem; +} + +.logo-clouds-wrapper :is(.gap-x-6) { + -moz-column-gap: 1.5rem; + column-gap: 1.5rem; +} + +.logo-clouds-wrapper :is(.rounded-xl) { + border-radius: 0.75rem; +} + +.logo-clouds-wrapper :is(.border-2) { + border-width: 2px; +} + +.logo-clouds-wrapper :is(.border-transparent) { + border-color: transparent; +} + +.logo-clouds-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.logo-clouds-wrapper :is(.bg-gray-200) { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} + +.logo-clouds-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.logo-clouds-wrapper :is(.px-8) { + padding-left: 2rem; + padding-right: 2rem; +} + +.logo-clouds-wrapper :is(.py-8) { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.logo-clouds-wrapper :is(.text-3xl) { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.logo-clouds-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.logo-clouds-wrapper :is(.font-medium) { + font-weight: 500; +} + +.logo-clouds-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.logo-clouds-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.logo-clouds-wrapper :is(.duration-500) { + transition-duration: 500ms; +} + +.logo-clouds-wrapper :is(.hover\:scale-105:hover) { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +@media (min-width: 768px) { + .logo-clouds-wrapper :is(.md\:grid-cols-3) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (min-width: 1024px) { + .logo-clouds-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .logo-clouds-wrapper :is(.lg\:grid) { + display: grid; + } + + .logo-clouds-wrapper :is(.lg\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .logo-clouds-wrapper :is(.lg\:items-center) { + align-items: center; + } + + .logo-clouds-wrapper :is(.lg\:gap-8) { + gap: 2rem; + } +} \ No newline at end of file diff --git a/blocks/marketo-form/marketo-form.css b/blocks/marketo-form/marketo-form.css new file mode 100644 index 000000000..eaebbd91c --- /dev/null +++ b/blocks/marketo-form/marketo-form.css @@ -0,0 +1,690 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.marketo-form-wrapper :is(.relative) { + position: relative; +} + +.marketo-form-wrapper :is(.z-0) { + z-index: 0; +} + +.marketo-form-wrapper :is(.z-\[9\]) { + z-index: 9; +} + +.marketo-form-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.marketo-form-wrapper :is(.mb-0) { + margin-bottom: 0px; +} + +.marketo-form-wrapper :is(.mb-4) { + margin-bottom: 1rem; +} + +.marketo-form-wrapper :is(.mb-8) { + margin-bottom: 2rem; +} + +.marketo-form-wrapper :is(.ml-0) { + margin-left: 0px; +} + +.marketo-form-wrapper :is(.mr-4) { + margin-right: 1rem; +} + +.marketo-form-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.marketo-form-wrapper :is(.block) { + display: block; +} + +.marketo-form-wrapper :is(.flex) { + display: flex; +} + +.marketo-form-wrapper :is(.h-80) { + height: 20rem; +} + +.marketo-form-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.marketo-form-wrapper :is(.flex-col) { + flex-direction: column; +} + +.marketo-form-wrapper :is(.items-center) { + align-items: center; +} + +.marketo-form-wrapper :is(.justify-center) { + justify-content: center; +} + +.marketo-form-wrapper :is(.break-all) { + word-break: break-all; +} + +.marketo-form-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.marketo-form-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.marketo-form-wrapper :is(.text-3xl) { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.marketo-form-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.marketo-form-wrapper :is(.font-bold) { + font-weight: 700; +} + +.marketo-form-wrapper :is(.font-normal) { + font-weight: 200; +} + +.marketo-form-wrapper :is(.text-gray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.marketo-form-wrapper :is(.underline) { + text-decoration-line: underline; +} + +.marketo-form-wrapper :is(.decoration-\[\#7523FF\]) { + text-decoration-color: #7523FF; +} + +.marketo-form-wrapper :is(.decoration-\[3px\]) { + text-decoration-thickness: 3px; +} + +.marketo-form-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.marketo-form-wrapper :is(.duration-700) { + transition-duration: 700ms; +} + +.marketo-form-wrapper :is(.ease-in-out) { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.marketo-form-wrapper :is(.hover\:bg-\[\#7523FF\]:hover) { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +.marketo-form-wrapper :is(.hover\:text-white:hover) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +@media (min-width: 768px) { + .marketo-form-wrapper :is(.md\:mb-16) { + margin-bottom: 4rem; + } + + .marketo-form-wrapper :is(.md\:break-normal) { + overflow-wrap: normal; + word-break: normal; + } +} \ No newline at end of file diff --git a/blocks/mini-teasers/mini-teasers.css b/blocks/mini-teasers/mini-teasers.css new file mode 100644 index 000000000..29e8c7fe1 --- /dev/null +++ b/blocks/mini-teasers/mini-teasers.css @@ -0,0 +1,685 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.mini-teasers-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.mini-teasers-wrapper :is(.my-10) { + margin-top: 2.5rem; + margin-bottom: 2.5rem; +} + +.mini-teasers-wrapper :is(.my-6) { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + +.mini-teasers-wrapper :is(.mb-0) { + margin-bottom: 0px; +} + +.mini-teasers-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.mini-teasers-wrapper :is(.line-clamp-2) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.mini-teasers-wrapper :is(.line-clamp-3) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + +.mini-teasers-wrapper :is(.\!block) { + display: block !important; +} + +.mini-teasers-wrapper :is(.block) { + display: block; +} + +.mini-teasers-wrapper :is(.grid) { + display: grid; +} + +.mini-teasers-wrapper :is(.h-16) { + height: 4rem; +} + +.mini-teasers-wrapper :is(.h-20) { + height: 5rem; +} + +.mini-teasers-wrapper :is(.h-24) { + height: 6rem; +} + +.mini-teasers-wrapper :is(.w-16) { + width: 4rem; +} + +.mini-teasers-wrapper :is(.w-full) { + width: 100%; +} + +.mini-teasers-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.mini-teasers-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.mini-teasers-wrapper :is(.items-center) { + align-items: center; +} + +.mini-teasers-wrapper :is(.gap-6) { + gap: 1.5rem; +} + +.mini-teasers-wrapper :is(.break-words) { + overflow-wrap: break-word; +} + +.mini-teasers-wrapper :is(.border-b) { + border-bottom-width: 1px; +} + +.mini-teasers-wrapper :is(.border-t) { + border-top-width: 1px; +} + +.mini-teasers-wrapper :is(.border-solid) { + border-style: solid; +} + +.mini-teasers-wrapper :is(.border-black) { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); +} + +.mini-teasers-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.mini-teasers-wrapper :is(.px-2) { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.mini-teasers-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.mini-teasers-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.mini-teasers-wrapper :is(.font-bold) { + font-weight: 700; +} + +.mini-teasers-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +@media (min-width: 640px) { + .mini-teasers-wrapper :is(.sm\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (min-width: 1024px) { + .mini-teasers-wrapper :is(.lg\:grid-cols-3) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .mini-teasers-wrapper :is(.lg\:grid-cols-4) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} \ No newline at end of file diff --git a/blocks/page-jump-menu/page-jump-menu.css b/blocks/page-jump-menu/page-jump-menu.css new file mode 100644 index 000000000..29cb4c9ae --- /dev/null +++ b/blocks/page-jump-menu/page-jump-menu.css @@ -0,0 +1,710 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.page-jump-menu-wrapper :is(.fixed) { + position: fixed; +} + +.page-jump-menu-wrapper :is(.relative) { + position: relative; +} + +.page-jump-menu-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.page-jump-menu-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.page-jump-menu-wrapper :is(.z-10) { + z-index: 10; +} + +.page-jump-menu-wrapper :is(.-mt-20) { + margin-top: -5rem; +} + +.page-jump-menu-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + +.page-jump-menu-wrapper :is(.block) { + display: block; +} + +.page-jump-menu-wrapper :is(.hidden) { + display: none; +} + +.page-jump-menu-wrapper :is(.w-full) { + width: 100%; +} + +.page-jump-menu-wrapper :is(.justify-center) { + justify-content: center; +} + +.page-jump-menu-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.page-jump-menu-wrapper :is(.rounded-none) { + border-radius: 0px; +} + +.page-jump-menu-wrapper :is(.\!bg-danaherpurple-500) { + --tw-bg-opacity: 1 !important; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)) !important; +} + +.page-jump-menu-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.page-jump-menu-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.page-jump-menu-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.page-jump-menu-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.page-jump-menu-wrapper :is(.px-0) { + padding-left: 0px; + padding-right: 0px; +} + +.page-jump-menu-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.page-jump-menu-wrapper :is(.\!text-white) { + --tw-text-opacity: 1 !important; + color: rgb(255 255 255 / var(--tw-text-opacity)) !important; +} + +.page-jump-menu-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.page-jump-menu-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +@media (min-width: 768px) { + .page-jump-menu-wrapper :is(.md\:block) { + display: block; + } + + .page-jump-menu-wrapper :is(.md\:px-4) { + padding-left: 1rem; + padding-right: 1rem; + } +} + +@media (min-width: 1024px) { + .page-jump-menu-wrapper :is(.lg\:px-0) { + padding-left: 0px; + padding-right: 0px; + } +} + +.page-jump-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:mx-auto .page-jump-menu-wrapper) { + margin-left: auto; + margin-right: auto; +} + +.page-jump-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:flex .page-jump-menu-wrapper) { + display: flex; +} + +@media (min-width: 768px) { + .page-jump-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .page-jump-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.page-jump-menu-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); +} \ No newline at end of file diff --git a/blocks/popular-articles/popular-articles.css b/blocks/popular-articles/popular-articles.css new file mode 100644 index 000000000..fdf55a346 --- /dev/null +++ b/blocks/popular-articles/popular-articles.css @@ -0,0 +1,540 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.popular-articles-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} \ No newline at end of file diff --git a/blocks/product-card/product-card.css b/blocks/product-card/product-card.css new file mode 100644 index 000000000..304082b4b --- /dev/null +++ b/blocks/product-card/product-card.css @@ -0,0 +1,815 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.product-card-wrapper :is(.relative) { + position: relative; +} + +.product-card-wrapper :is(.col-span-1) { + grid-column: span 1 / span 1; +} + +.product-card-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.product-card-wrapper :is(.mb-3) { + margin-bottom: 0.75rem; +} + +.product-card-wrapper :is(.mb-4) { + margin-bottom: 1rem; +} + +.product-card-wrapper :is(.mt-3) { + margin-top: 0.75rem; +} + +.product-card-wrapper :is(.\!line-clamp-3) { + overflow: hidden !important; + display: -webkit-box !important; + -webkit-box-orient: vertical !important; + -webkit-line-clamp: 3 !important; +} + +.product-card-wrapper :is(.line-clamp-4) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; +} + +.product-card-wrapper :is(.block) { + display: block; +} + +.product-card-wrapper :is(.flex) { + display: flex; +} + +.product-card-wrapper :is(.inline-flex) { + display: inline-flex; +} + +.product-card-wrapper :is(.grid) { + display: grid; +} + +.product-card-wrapper :is(.\!h-14) { + height: 3.5rem !important; +} + +.product-card-wrapper :is(.\!h-20) { + height: 5rem !important; +} + +.product-card-wrapper :is(.w-full) { + width: 100%; +} + +.product-card-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.product-card-wrapper :is(.max-w-xl) { + max-width: 36rem; +} + +.product-card-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.product-card-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.product-card-wrapper :is(.flex-col) { + flex-direction: column; +} + +.product-card-wrapper :is(.items-center) { + align-items: center; +} + +.product-card-wrapper :is(.justify-center) { + justify-content: center; +} + +.product-card-wrapper :is(.justify-items-center) { + justify-items: center; +} + +.product-card-wrapper :is(.gap-6) { + gap: 1.5rem; +} + +.product-card-wrapper :is(.space-x-4 > :not([hidden]) ~ :not([hidden])) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + +.product-card-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.product-card-wrapper :is(.\!break-words) { + overflow-wrap: break-word !important; +} + +.product-card-wrapper :is(.break-words) { + overflow-wrap: break-word; +} + +.product-card-wrapper :is(.\!rounded-full) { + border-radius: 9999px !important; +} + +.product-card-wrapper :is(.rounded-lg) { + border-radius: 0.5rem; +} + +.product-card-wrapper :is(.border) { + border-width: 1px; +} + +.product-card-wrapper :is(.border-8) { + border-width: 8px; +} + +.product-card-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.product-card-wrapper :is(.bg-gray-100) { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.product-card-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.product-card-wrapper :is(.\!px-7) { + padding-left: 1.75rem !important; + padding-right: 1.75rem !important; +} + +.product-card-wrapper :is(.px-2) { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.product-card-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.product-card-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.product-card-wrapper :is(.py-5) { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + +.product-card-wrapper :is(.pt-8) { + padding-top: 2rem; +} + +.product-card-wrapper :is(.\!text-lg) { + font-size: 1.125rem !important; + line-height: 1.75rem !important; +} + +.product-card-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.product-card-wrapper :is(.\!font-semibold) { + font-weight: 700 !important; +} + +.product-card-wrapper :is(.\!text-danahergray-900) { + --tw-text-opacity: 1 !important; + color: rgb(17 24 39 / var(--tw-text-opacity)) !important; +} + +.product-card-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.product-card-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-card-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.product-card-wrapper :is(.duration-500) { + transition-duration: 500ms; +} + +.product-card-wrapper :is(.hover\:scale-105:hover) { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +@media (min-width: 640px) { + .product-card-wrapper :is(.sm\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .product-card-wrapper :is(.sm\:px-0) { + padding-left: 0px; + padding-right: 0px; + } +} + +@media (min-width: 1024px) { + .product-card-wrapper :is(.lg\:grid-cols-4) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} \ No newline at end of file diff --git a/blocks/product-category-list/product-category-list.css b/blocks/product-category-list/product-category-list.css new file mode 100644 index 000000000..084e52637 --- /dev/null +++ b/blocks/product-category-list/product-category-list.css @@ -0,0 +1,876 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.product-category-list-wrapper :is(.relative) { + position: relative; +} + +.product-category-list-wrapper :is(.col-span-1) { + grid-column: span 1 / span 1; +} + +.product-category-list-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.product-category-list-wrapper :is(.my-2) { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.product-category-list-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.product-category-list-wrapper :is(.mb-3) { + margin-bottom: 0.75rem; +} + +.product-category-list-wrapper :is(.mb-4) { + margin-bottom: 1rem; +} + +.product-category-list-wrapper :is(.mt-2) { + margin-top: 0.5rem; +} + +.product-category-list-wrapper :is(.mt-3) { + margin-top: 0.75rem; +} + +.product-category-list-wrapper :is(.block) { + display: block; +} + +.product-category-list-wrapper :is(.inline-block) { + display: inline-block; +} + +.product-category-list-wrapper :is(.flex) { + display: flex; +} + +.product-category-list-wrapper :is(.grid) { + display: grid; +} + +.product-category-list-wrapper :is(.h-16) { + height: 4rem; +} + +.product-category-list-wrapper :is(.h-24) { + height: 6rem; +} + +.product-category-list-wrapper :is(.h-52) { + height: 13rem; +} + +.product-category-list-wrapper :is(.w-48) { + width: 12rem; +} + +.product-category-list-wrapper :is(.w-full) { + width: 100%; +} + +.product-category-list-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.product-category-list-wrapper :is(.max-w-xl) { + max-width: 36rem; +} + +.product-category-list-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.product-category-list-wrapper :is(.grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.product-category-list-wrapper :is(.flex-col) { + flex-direction: column; +} + +.product-category-list-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + +.product-category-list-wrapper :is(.justify-center) { + justify-content: center; +} + +.product-category-list-wrapper :is(.justify-items-center) { + justify-items: center; +} + +.product-category-list-wrapper :is(.gap-2) { + gap: 0.5rem; +} + +.product-category-list-wrapper :is(.gap-6) { + gap: 1.5rem; +} + +.product-category-list-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.product-category-list-wrapper :is(.break-words) { + overflow-wrap: break-word; +} + +.product-category-list-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.product-category-list-wrapper :is(.border-l) { + border-left-width: 1px; +} + +.product-category-list-wrapper :is(.border-danahergray-300) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.product-category-list-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.product-category-list-wrapper :is(.bg-danaherpurple-50) { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + +.product-category-list-wrapper :is(.bg-danaherpurple-500) { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +.product-category-list-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.product-category-list-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.product-category-list-wrapper :is(.px-1) { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +.product-category-list-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.product-category-list-wrapper :is(.py-1) { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.product-category-list-wrapper :is(.py-4) { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.product-category-list-wrapper :is(.\!pb-0) { + padding-bottom: 0px !important; +} + +.product-category-list-wrapper :is(.pl-6) { + padding-left: 1.5rem; +} + +.product-category-list-wrapper :is(.pr-6) { + padding-right: 1.5rem; +} + +.product-category-list-wrapper :is(.pr-8) { + padding-right: 2rem; +} + +.product-category-list-wrapper :is(.text-center) { + text-align: center; +} + +.product-category-list-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.product-category-list-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.product-category-list-wrapper :is(.font-bold) { + font-weight: 700; +} + +.product-category-list-wrapper :is(.font-normal) { + font-weight: 200; +} + +.product-category-list-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.product-category-list-wrapper :is(.text-danahergray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.product-category-list-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.product-category-list-wrapper :is(.text-white) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.product-category-list-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.product-category-list-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.product-category-list-wrapper :is(.duration-500) { + transition-duration: 500ms; +} + +.product-category-list-wrapper :is(.hover\:scale-105:hover) { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.product-category-list-wrapper :is(.hover\:bg-gray-100:hover) { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.product-category-list-wrapper :is(.hover\:text-gray-500:hover) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +@media (min-width: 640px) { + .product-category-list-wrapper :is(.sm\:px-0) { + padding-left: 0px; + padding-right: 0px; + } +} + +@media (min-width: 768px) { + .product-category-list-wrapper :is(.md\:grid-cols-3) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (min-width: 1024px) { + .product-category-list-wrapper :is(.lg\:w-44) { + width: 11rem; + } + + .product-category-list-wrapper :is(.lg\:grid-cols-4) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .product-category-list-wrapper :is(.lg\:px-4) { + padding-left: 1rem; + padding-right: 1rem; + } + + .product-category-list-wrapper :is(.lg\:pr-0) { + padding-right: 0px; + } +} + +@media (min-width: 1280px) { + .product-category-list-wrapper :is(.xl\:grid-cols-6) { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } +} \ No newline at end of file diff --git a/blocks/product-citations/product-citations.css b/blocks/product-citations/product-citations.css new file mode 100644 index 000000000..1c97d4786 --- /dev/null +++ b/blocks/product-citations/product-citations.css @@ -0,0 +1,590 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.product-citations-wrapper :is(.float-none) { + float: none; +} + +.product-citations-wrapper :is(.mb-0) { + margin-bottom: 0px; +} + +.product-citations-wrapper :is(.ml-0) { + margin-left: 0px; +} + +.product-citations-wrapper :is(.block) { + display: block; +} + +.product-citations-wrapper :is(.h-3) { + height: 0.75rem; +} + +.product-citations-wrapper :is(.h-48) { + height: 12rem; +} + +.product-citations-wrapper :is(.w-3) { + width: 0.75rem; +} + +.product-citations-wrapper :is(.w-full) { + width: 100%; +} + +.product-citations-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.product-citations-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.product-citations-wrapper :is(.align-top) { + vertical-align: top; +} + +.product-citations-wrapper :is(.text-xs) { + font-size: 0.75rem; + line-height: 1rem; +} + +.product-citations-wrapper :is(.text-danaherblue-900) { + --tw-text-opacity: 1; + color: rgb(6 28 68 / var(--tw-text-opacity)); +} \ No newline at end of file diff --git a/blocks/product-menu/product-menu.css b/blocks/product-menu/product-menu.css new file mode 100644 index 000000000..faf14b45f --- /dev/null +++ b/blocks/product-menu/product-menu.css @@ -0,0 +1,694 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.product-menu-wrapper :is(.block) { + display: block; +} + +.product-menu-wrapper :is(.flex) { + display: flex; +} + +.product-menu-wrapper :is(.hidden) { + display: none; +} + +.product-menu-wrapper :is(.h-20) { + height: 5rem; +} + +.product-menu-wrapper :is(.\!w-full) { + width: 100% !important; +} + +.product-menu-wrapper :is(.w-20) { + width: 5rem; +} + +.product-menu-wrapper :is(.w-full) { + width: 100%; +} + +.product-menu-wrapper :is(.scale-95) { + --tw-scale-x: .95; + --tw-scale-y: .95; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.product-menu-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.product-menu-wrapper :is(.cursor-pointer) { + cursor: pointer; +} + +.product-menu-wrapper :is(.flex-col) { + flex-direction: column; +} + +.product-menu-wrapper :is(.items-center) { + align-items: center; +} + +.product-menu-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.product-menu-wrapper :is(.gap-10) { + gap: 2.5rem; +} + +.product-menu-wrapper :is(.gap-2) { + gap: 0.5rem; +} + +.product-menu-wrapper :is(.space-x-3 > :not([hidden]) ~ :not([hidden])) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} + +.product-menu-wrapper :is(.self-center) { + align-self: center; +} + +.product-menu-wrapper :is(.rounded-md) { + border-radius: 0.375rem; +} + +.product-menu-wrapper :is(.border-2) { + border-width: 2px; +} + +.product-menu-wrapper :is(.border-white) { + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); +} + +.product-menu-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.product-menu-wrapper :is(.object-contain) { + -o-object-fit: contain; + object-fit: contain; +} + +.product-menu-wrapper :is(.object-center) { + -o-object-position: center; + object-position: center; +} + +.product-menu-wrapper :is(.p-3) { + padding: 0.75rem; +} + +.product-menu-wrapper :is(.py-4) { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.product-menu-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.product-menu-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.product-menu-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.product-menu-wrapper :is(.shadow-md) { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-menu-wrapper :is(.duration-300) { + transition-duration: 300ms; +} + +.product-menu-wrapper :is(.hover\:scale-95:hover) { + --tw-scale-x: .95; + --tw-scale-y: .95; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.product-menu-wrapper :is(.hover\:bg-danaherlightblue-50:hover) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +@media (min-width: 768px) { + .product-menu-wrapper :is(.md\:w-1\/3) { + width: 33.333333%; + } + + .product-menu-wrapper :is(.md\:flex-row) { + flex-direction: row; + } +} + +@media (min-width: 1024px) { + .product-menu-wrapper :is(.lg\:flex-shrink-0) { + flex-shrink: 0; + } +} \ No newline at end of file diff --git a/blocks/product-overview/product-overview.css b/blocks/product-overview/product-overview.css new file mode 100644 index 000000000..591dcadd3 --- /dev/null +++ b/blocks/product-overview/product-overview.css @@ -0,0 +1,601 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.href-text a { + position: relative; + z-index: 0; + text-decoration-line: underline; + text-decoration-color: #7523FF; + text-decoration-thickness: 2px; + text-underline-offset: 4px; + text-decoration-style: solid; + word-break: break-all; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-duration: 500ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.href-text a:hover { + color: rgb(255 255 255); + background-color: #7523FF; +} + +.product-overview-wrapper :is(.block) { + display: block; +} + +.product-overview-wrapper :is(.list-disc) { + list-style-type: disc; +} + +.product-overview-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.product-overview-wrapper :is(.pl-12) { + padding-left: 3rem; +} + +.product-overview-wrapper :is(.pt-2) { + padding-top: 0.5rem; +} + +.product-overview-wrapper :is(.pt-2\.5) { + padding-top: 0.625rem; +} + +.product-overview-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.product-overview-wrapper :is(.leading-7) { + line-height: 1.75rem; +} + +.product-overview-wrapper :is(.text-danahergray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +@media (min-width: 1280px) { + .product-overview-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} \ No newline at end of file diff --git a/blocks/product-parts/product-parts.css b/blocks/product-parts/product-parts.css new file mode 100644 index 000000000..2b27a59dc --- /dev/null +++ b/blocks/product-parts/product-parts.css @@ -0,0 +1,682 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.product-parts-wrapper :is(.col-span-2) { + grid-column: span 2 / span 2; +} + +.product-parts-wrapper :is(.col-span-4) { + grid-column: span 4 / span 4; +} + +.product-parts-wrapper :is(.col-span-8) { + grid-column: span 8 / span 8; +} + +.product-parts-wrapper :is(.block) { + display: block; +} + +.product-parts-wrapper :is(.flex) { + display: flex; +} + +.product-parts-wrapper :is(.grid) { + display: grid; +} + +.product-parts-wrapper :is(.hidden) { + display: none; +} + +.product-parts-wrapper :is(.h-16) { + height: 4rem; +} + +.product-parts-wrapper :is(.w-16) { + width: 4rem; +} + +.product-parts-wrapper :is(.grid-cols-12) { + grid-template-columns: repeat(12, minmax(0, 1fr)); +} + +.product-parts-wrapper :is(.flex-row) { + flex-direction: row; +} + +.product-parts-wrapper :is(.flex-col) { + flex-direction: column; +} + +.product-parts-wrapper :is(.\!content-center) { + align-content: center !important; +} + +.product-parts-wrapper :is(.items-start) { + align-items: flex-start; +} + +.product-parts-wrapper :is(.justify-center) { + justify-content: center; +} + +.product-parts-wrapper :is(.gap-y-4) { + row-gap: 1rem; +} + +.product-parts-wrapper :is(.rounded-md) { + border-radius: 0.375rem; +} + +.product-parts-wrapper :is(.border-b) { + border-bottom-width: 1px; +} + +.product-parts-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.product-parts-wrapper :is(.pb-2) { + padding-bottom: 0.5rem; +} + +.product-parts-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.product-parts-wrapper :is(.pl-4) { + padding-left: 1rem; +} + +.product-parts-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.product-parts-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.product-parts-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.product-parts-wrapper :is(.text-xs) { + font-size: 0.75rem; + line-height: 1rem; +} + +.product-parts-wrapper :is(.font-bold) { + font-weight: 700; +} + +.product-parts-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.product-parts-wrapper :is(.text-black) { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.product-parts-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +@media (min-width: 768px) { + .product-parts-wrapper :is(.md\:col-span-2) { + grid-column: span 2 / span 2; + } + + .product-parts-wrapper :is(.md\:flex) { + display: flex; + } +} + +@media (min-width: 1024px) { + .product-parts-wrapper :is(.lg\:col-span-1) { + grid-column: span 1 / span 1; + } + + .product-parts-wrapper :is(.lg\:col-span-10) { + grid-column: span 10 / span 10; + } +} \ No newline at end of file diff --git a/blocks/product-recommendations/product-recommendations.css b/blocks/product-recommendations/product-recommendations.css new file mode 100644 index 000000000..695bd7263 --- /dev/null +++ b/blocks/product-recommendations/product-recommendations.css @@ -0,0 +1,667 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.product-recommendations-wrapper :is(.mt-12) { + margin-top: 3rem; +} + +.product-recommendations-wrapper :is(.block) { + display: block; +} + +.product-recommendations-wrapper :is(.flex) { + display: flex; +} + +.product-recommendations-wrapper :is(.inline-flex) { + display: inline-flex; +} + +.product-recommendations-wrapper :is(.grid) { + display: grid; +} + +.product-recommendations-wrapper :is(.hidden) { + display: none; +} + +.product-recommendations-wrapper :is(.snap-x) { + scroll-snap-type: x var(--tw-scroll-snap-strictness); +} + +.product-recommendations-wrapper :is(.snap-mandatory) { + --tw-scroll-snap-strictness: mandatory; +} + +.product-recommendations-wrapper :is(.auto-cols-\[calc\(100\%\)\]) { + grid-auto-columns: calc(100%); +} + +.product-recommendations-wrapper :is(.grid-flow-col) { + grid-auto-flow: column; +} + +.product-recommendations-wrapper :is(.items-center) { + align-items: center; +} + +.product-recommendations-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.product-recommendations-wrapper :is(.gap-6) { + gap: 1.5rem; +} + +.product-recommendations-wrapper :is(.gap-x-4) { + -moz-column-gap: 1rem; + column-gap: 1rem; +} + +.product-recommendations-wrapper :is(.space-x-2 > :not([hidden]) ~ :not([hidden])) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.product-recommendations-wrapper :is(.space-y-3 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); +} + +.product-recommendations-wrapper :is(.overflow-x-auto) { + overflow-x: auto; +} + +.product-recommendations-wrapper :is(.scroll-smooth) { + scroll-behavior: smooth; +} + +.product-recommendations-wrapper :is(.rounded-md) { + border-radius: 0.375rem; +} + +.product-recommendations-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.product-recommendations-wrapper :is(.pb-2) { + padding-bottom: 0.5rem; +} + +.product-recommendations-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.product-recommendations-wrapper :is(.font-bold) { + font-weight: 700; +} + +.product-recommendations-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.product-recommendations-wrapper :is(.hover\:scale-105:hover) { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +@media (min-width: 768px) { + .product-recommendations-wrapper :is(.md\:auto-cols-\[calc\(100\%\/2\)\]) { + grid-auto-columns: calc(100% / 2); + } +} + +@media (min-width: 1024px) { + .product-recommendations-wrapper :is(.lg\:auto-cols-\[calc\(\(100\%\/3\)-20px\)\]) { + grid-auto-columns: calc((100% / 3) - 20px); + } +} + +@media (min-width: 1280px) { + .product-recommendations-wrapper :is(.xl\:auto-cols-\[calc\(\(100\%\/4\)-20px\)\]) { + grid-auto-columns: calc((100% / 4) - 20px); + } +} \ No newline at end of file diff --git a/blocks/product-specifications/product-specifications.css b/blocks/product-specifications/product-specifications.css new file mode 100644 index 000000000..9422907cc --- /dev/null +++ b/blocks/product-specifications/product-specifications.css @@ -0,0 +1,683 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.product-specifications-wrapper :is(.my-auto) { + margin-top: auto; + margin-bottom: auto; +} + +.product-specifications-wrapper :is(.mt-2) { + margin-top: 0.5rem; +} + +.product-specifications-wrapper :is(.block) { + display: block; +} + +.product-specifications-wrapper :is(.flex) { + display: flex; +} + +.product-specifications-wrapper :is(.h-full) { + height: 100%; +} + +.product-specifications-wrapper :is(.w-full) { + width: 100%; +} + +.product-specifications-wrapper :is(.min-w-full) { + min-width: 100%; +} + +.product-specifications-wrapper :is(.flex-row) { + flex-direction: row; +} + +.product-specifications-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + +.product-specifications-wrapper :is(.divide-y > :not([hidden]) ~ :not([hidden])) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.product-specifications-wrapper :is(.divide-gray-300 > :not([hidden]) ~ :not([hidden])) { + --tw-divide-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-divide-opacity)); +} + +.product-specifications-wrapper :is(.break-words) { + overflow-wrap: break-word; +} + +.product-specifications-wrapper :is(.rounded-lg) { + border-radius: 0.5rem; +} + +.product-specifications-wrapper :is(.border) { + border-width: 1px; +} + +.product-specifications-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.product-specifications-wrapper :is(.bg-gray-100) { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.product-specifications-wrapper :is(.p-4) { + padding: 1rem; +} + +.product-specifications-wrapper :is(.px-1) { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +.product-specifications-wrapper :is(.pt-12) { + padding-top: 3rem; +} + +.product-specifications-wrapper :is(.align-middle) { + vertical-align: middle; +} + +.product-specifications-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.product-specifications-wrapper :is(.text-xl) { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.product-specifications-wrapper :is(.font-medium) { + font-weight: 500; +} + +.product-specifications-wrapper :is(.font-normal) { + font-weight: 200; +} + +.product-specifications-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.product-specifications-wrapper :is(.text-black) { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.product-specifications-wrapper :is(.text-gray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.product-specifications-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +@media (min-width: 640px) { + .product-specifications-wrapper :is(.sm\:flex) { + display: flex; + } + + .product-specifications-wrapper :is(.sm\:flex-auto) { + flex: 1 1 auto; + } + + .product-specifications-wrapper :is(.sm\:items-center) { + align-items: center; + } +} + +@media (min-width: 768px) { + .product-specifications-wrapper :is(.md\:w-1\/4) { + width: 25%; + } + + .product-specifications-wrapper :is(.md\:w-2\/4) { + width: 50%; + } +} \ No newline at end of file diff --git a/blocks/recent-articles/recent-articles.css b/blocks/recent-articles/recent-articles.css new file mode 100644 index 000000000..7844e1145 --- /dev/null +++ b/blocks/recent-articles/recent-articles.css @@ -0,0 +1,749 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.recent-articles-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.recent-articles-wrapper :is(.mb-0) { + margin-bottom: 0px; +} + +.recent-articles-wrapper :is(.ml-0) { + margin-left: 0px; +} + +.recent-articles-wrapper :is(.ml-0\.5) { + margin-left: 0.125rem; +} + +.recent-articles-wrapper :is(.mt-2) { + margin-top: 0.5rem; +} + +.recent-articles-wrapper :is(.block) { + display: block; +} + +.recent-articles-wrapper :is(.flex) { + display: flex; +} + +.recent-articles-wrapper :is(.hidden) { + display: none; +} + +.recent-articles-wrapper :is(.h-4) { + height: 1rem; +} + +.recent-articles-wrapper :is(.w-4) { + width: 1rem; +} + +.recent-articles-wrapper :is(.flex-shrink-0) { + flex-shrink: 0; +} + +.recent-articles-wrapper :is(.shrink-0) { + flex-shrink: 0; +} + +.recent-articles-wrapper :is(.items-center) { + align-items: center; +} + +.recent-articles-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.recent-articles-wrapper :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.recent-articles-wrapper :is(.divide-y > :not([hidden]) ~ :not([hidden])) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.recent-articles-wrapper :is(.rounded) { + border-radius: 0.25rem; +} + +.recent-articles-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.recent-articles-wrapper :is(.bg-danaherpurple-25) { + --tw-bg-opacity: 1; + background-color: rgb(245 239 255 / var(--tw-bg-opacity)); +} + +.recent-articles-wrapper :is(.p-1) { + padding: 0.25rem; +} + +.recent-articles-wrapper :is(.p-1\.5) { + padding: 0.375rem; +} + +.recent-articles-wrapper :is(.\!py-28) { + padding-top: 7rem !important; + padding-bottom: 7rem !important; +} + +.recent-articles-wrapper :is(.px-2) { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.recent-articles-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.recent-articles-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.recent-articles-wrapper :is(.pb-2) { + padding-bottom: 0.5rem; +} + +.recent-articles-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.recent-articles-wrapper :is(.pt-0) { + padding-top: 0px; +} + +.recent-articles-wrapper :is(.pt-2) { + padding-top: 0.5rem; +} + +.recent-articles-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.recent-articles-wrapper :is(.text-xl) { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.recent-articles-wrapper :is(.text-xs) { + font-size: 0.75rem; + line-height: 1rem; +} + +.recent-articles-wrapper :is(.\!font-normal) { + font-weight: 200 !important; +} + +.recent-articles-wrapper :is(.font-bold) { + font-weight: 700; +} + +.recent-articles-wrapper :is(.font-medium) { + font-weight: 500; +} + +.recent-articles-wrapper :is(.font-normal) { + font-weight: 200; +} + +.recent-articles-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.recent-articles-wrapper :is(.leading-5) { + line-height: 1.25rem; +} + +.recent-articles-wrapper :is(.leading-7) { + line-height: 1.75rem; +} + +.recent-articles-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.recent-articles-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.recent-articles-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.recent-articles-wrapper :is(.transition-transform) { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.recent-articles-wrapper :is(.hover\:scale-\[\.99\]:hover) { + --tw-scale-x: .99; + --tw-scale-y: .99; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.recent-articles-wrapper :is(.hover\:bg-danaherpurple-50:hover) { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + +.recent-articles-wrapper :is(.hover\:font-bold:hover) { + font-weight: 700; +} + +@media (min-width: 1024px) { + .recent-articles-wrapper :is(.lg\:block) { + display: block; + } + + .recent-articles-wrapper :is(.lg\:w-recent-articles) { + width: 23rem; + } +} \ No newline at end of file diff --git a/blocks/related-articles/related-articles.css b/blocks/related-articles/related-articles.css new file mode 100644 index 000000000..940d75ffa --- /dev/null +++ b/blocks/related-articles/related-articles.css @@ -0,0 +1,650 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.related-articles-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.related-articles-wrapper :is(.mb-3) { + margin-bottom: 0.75rem; +} + +.related-articles-wrapper :is(.mt-3) { + margin-top: 0.75rem; +} + +.related-articles-wrapper :is(.block) { + display: block; +} + +.related-articles-wrapper :is(.grid) { + display: grid; +} + +.related-articles-wrapper :is(.w-full) { + width: 100%; +} + +.related-articles-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.related-articles-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.related-articles-wrapper :is(.justify-items-center) { + justify-items: center; +} + +.related-articles-wrapper :is(.gap-6) { + gap: 1.5rem; +} + +.related-articles-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.related-articles-wrapper :is(.px-3) { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.related-articles-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.related-articles-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.related-articles-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +@media (min-width: 640px) { + .related-articles-wrapper :is(.sm\:grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .related-articles-wrapper :is(.sm\:px-0) { + padding-left: 0px; + padding-right: 0px; + } +} + +@media (min-width: 1024px) { + .related-articles-wrapper :is(.lg\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} \ No newline at end of file diff --git a/blocks/side-nav/side-nav.css b/blocks/side-nav/side-nav.css new file mode 100644 index 000000000..788a7fe5b --- /dev/null +++ b/blocks/side-nav/side-nav.css @@ -0,0 +1,711 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.side-nav-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.side-nav-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.side-nav-wrapper :is(.block) { + display: block; +} + +.side-nav-wrapper :is(.flex) { + display: flex; +} + +.side-nav-wrapper :is(.grid) { + display: grid; +} + +.side-nav-wrapper :is(.hidden) { + display: none; +} + +.side-nav-wrapper :is(.w-full) { + width: 100%; +} + +.side-nav-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.side-nav-wrapper :is(.flex-1) { + flex: 1 1 0%; +} + +.side-nav-wrapper :is(.flex-col) { + flex-direction: column; +} + +.side-nav-wrapper :is(.items-start) { + align-items: flex-start; +} + +.side-nav-wrapper :is(.gap-3) { + gap: 0.75rem; +} + +.side-nav-wrapper :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.side-nav-wrapper :is(.border-b) { + border-bottom-width: 1px; +} + +.side-nav-wrapper :is(.border-gray-300) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.side-nav-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.side-nav-wrapper :is(.bg-danaherpurple-50) { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + +.side-nav-wrapper :is(.p-0) { + padding: 0px; +} + +.side-nav-wrapper :is(.p-2) { + padding: 0.5rem; +} + +.side-nav-wrapper :is(.px-2) { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.side-nav-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.side-nav-wrapper :is(.py-4) { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.side-nav-wrapper :is(.pt-0) { + padding-top: 0px; +} + +.side-nav-wrapper :is(.pt-16) { + padding-top: 4rem; +} + +.side-nav-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + +.side-nav-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.side-nav-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.side-nav-wrapper :is(.font-bold) { + font-weight: 700; +} + +.side-nav-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.side-nav-wrapper :is(.hover\:bg-danaherpurple-25:hover) { + --tw-bg-opacity: 1; + background-color: rgb(245 239 255 / var(--tw-bg-opacity)); +} + +.side-nav-wrapper :is(.hover\:bg-danaherpurple-50:hover) { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + +@media (min-width: 1024px) { + .side-nav-wrapper :is(.lg\:col-span-3) { + grid-column: span 3 / span 3; + } + + .side-nav-wrapper :is(.lg\:col-span-8) { + grid-column: span 8 / span 8; + } + + .side-nav-wrapper :is(.lg\:col-start-1) { + grid-column-start: 1; + } + + .side-nav-wrapper :is(.lg\:col-start-5) { + grid-column-start: 5; + } + + .side-nav-wrapper :is(.lg\:row-span-6) { + grid-row: span 6 / span 6; + } + + .side-nav-wrapper :is(.lg\:block) { + display: block; + } + + .side-nav-wrapper :is(.lg\:grid-cols-12) { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .side-nav-wrapper :is(.lg\:px-0) { + padding-left: 0px; + padding-right: 0px; + } + + .side-nav-wrapper :is(.lg\:pt-4) { + padding-top: 1rem; + } +} \ No newline at end of file diff --git a/blocks/social-feeds/social-feeds.css b/blocks/social-feeds/social-feeds.css new file mode 100644 index 000000000..1f2239f3a --- /dev/null +++ b/blocks/social-feeds/social-feeds.css @@ -0,0 +1,540 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.social-feeds-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} \ No newline at end of file diff --git a/blocks/social-media/social-media.css b/blocks/social-media/social-media.css new file mode 100644 index 000000000..3d3c717cc --- /dev/null +++ b/blocks/social-media/social-media.css @@ -0,0 +1,600 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.social-media-wrapper :is(.relative) { + position: relative; +} + +.social-media-wrapper :is(.z-10) { + z-index: 10; +} + +.social-media-wrapper :is(.my-auto) { + margin-top: auto; + margin-bottom: auto; +} + +.social-media-wrapper :is(.mb-4) { + margin-bottom: 1rem; +} + +.social-media-wrapper :is(.block) { + display: block; +} + +.social-media-wrapper :is(.flex) { + display: flex; +} + +.social-media-wrapper :is(.items-center) { + align-items: center; +} + +.social-media-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.social-media-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.social-media-wrapper :is(.pb-2) { + padding-bottom: 0.5rem; +} + +.social-media-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + +.social-media-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.social-media-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.social-media-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.social-media-wrapper :is(.text-gray-600) { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} \ No newline at end of file diff --git a/blocks/stats/stats.css b/blocks/stats/stats.css new file mode 100644 index 000000000..ceabedd33 --- /dev/null +++ b/blocks/stats/stats.css @@ -0,0 +1,629 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.stats-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.stats-wrapper :is(.mt-3) { + margin-top: 0.75rem; +} + +.stats-wrapper :is(.block) { + display: block; +} + +.stats-wrapper :is(.max-w-4xl) { + max-width: 56rem; +} + +.stats-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.stats-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.stats-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.stats-wrapper :is(.pt-12) { + padding-top: 3rem; +} + +.stats-wrapper :is(.text-center) { + text-align: center; +} + +.stats-wrapper :is(.text-3xl) { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.stats-wrapper :is(.text-xl) { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.stats-wrapper :is(.font-extrabold) { + font-weight: 800; +} + +.stats-wrapper :is(.tracking-tight) { + letter-spacing: -0.025em; +} + +.stats-wrapper :is(.text-gray-500) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.stats-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +@media (min-width: 640px) { + .stats-wrapper :is(.sm\:mt-4) { + margin-top: 1rem; + } + + .stats-wrapper :is(.sm\:px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .stats-wrapper :is(.sm\:pt-16) { + padding-top: 4rem; + } + + .stats-wrapper :is(.sm\:text-4xl) { + font-size: 2.25rem; + line-height: 2.5rem; + } +} + +@media (min-width: 1024px) { + .stats-wrapper :is(.lg\:px-8) { + padding-left: 2rem; + padding-right: 2rem; + } +} \ No newline at end of file diff --git a/blocks/table/table.css b/blocks/table/table.css new file mode 100644 index 000000000..2d217d7af --- /dev/null +++ b/blocks/table/table.css @@ -0,0 +1,610 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.table-wrapper :is(.block) { + display: block; +} + +.table-wrapper :is(.table) { + display: table; +} + +.table-wrapper :is(.w-full) { + width: 100%; +} + +.table-wrapper :is(.max-w-full) { + max-width: 100%; +} + +.table-wrapper :is(.table-auto) { + table-layout: auto; +} + +.table-wrapper :is(.divide-y > :not([hidden]) ~ :not([hidden])) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.table-wrapper :is(.divide-gray-200 > :not([hidden]) ~ :not([hidden])) { + --tw-divide-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-divide-opacity)); +} + +.table-wrapper :is(.overflow-x-auto) { + overflow-x: auto; +} + +.table-wrapper :is(.border) { + border-width: 1px; +} + +.table-wrapper :is(.border-b) { + border-bottom-width: 1px; +} + +.table-wrapper :is(.border-b-gray-200) { + --tw-border-opacity: 1; + border-bottom-color: rgb(229 231 235 / var(--tw-border-opacity)); +} + +.table-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.table-wrapper :is(.p-2) { + padding: 0.5rem; +} + +.table-wrapper :is(.py-6) { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.table-wrapper :is(.text-left) { + text-align: left; +} + +.table-wrapper :is(.font-bold) { + font-weight: 700; +} + +.table-wrapper :is(.text-gray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} \ No newline at end of file diff --git a/blocks/tags-list/tags-list.css b/blocks/tags-list/tags-list.css new file mode 100644 index 000000000..2c9f61d67 --- /dev/null +++ b/blocks/tags-list/tags-list.css @@ -0,0 +1,604 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.tags-list-wrapper :is(.my-10) { + margin-top: 2.5rem; + margin-bottom: 2.5rem; +} + +.tags-list-wrapper :is(.mt-10) { + margin-top: 2.5rem; +} + +.tags-list-wrapper :is(.block) { + display: block; +} + +.tags-list-wrapper :is(.flex) { + display: flex; +} + +.tags-list-wrapper :is(.flex-col) { + flex-direction: column; +} + +.tags-list-wrapper :is(.gap-x-2) { + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} + +.tags-list-wrapper :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} + +.tags-list-wrapper :is(.border-gray-300) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.tags-list-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.tags-list-wrapper :is(.pt-0) { + padding-top: 0px; +} + +.tags-list-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.tags-list-wrapper :is(.font-bold) { + font-weight: 700; +} + +.tags-list-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +@media (min-width: 768px) { + .tags-list-wrapper :is(.md\:flex-row) { + flex-direction: row; + } + + .tags-list-wrapper :is(.md\:justify-between) { + justify-content: space-between; + } +} \ No newline at end of file diff --git a/blocks/takeway/takeway.css b/blocks/takeway/takeway.css new file mode 100644 index 000000000..5485b4b58 --- /dev/null +++ b/blocks/takeway/takeway.css @@ -0,0 +1,611 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.takeway-wrapper :is(.mb-20) { + margin-bottom: 5rem; +} + +.takeway-wrapper :is(.block) { + display: block; +} + +.takeway-wrapper :is(.list-disc) { + list-style-type: disc; +} + +.takeway-wrapper :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.takeway-wrapper :is(.border-t-8) { + border-top-width: 8px; +} + +.takeway-wrapper :is(.border-danaherpurple-500) { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +.takeway-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.takeway-wrapper :is(.bg-danaherpurple-50) { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + +.takeway-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.takeway-wrapper :is(.py-6) { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.takeway-wrapper :is(.pb-2) { + padding-bottom: 0.5rem; +} + +.takeway-wrapper :is(.pl-8) { + padding-left: 2rem; +} + +.takeway-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.takeway-wrapper :is(.leading-7) { + line-height: 1.75rem; +} + +.takeway-wrapper :is(.text-danahergray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +@media (min-width: 1024px) { + .takeway-wrapper :is(.lg\:px-10) { + padding-left: 2.5rem; + padding-right: 2.5rem; + } +} \ No newline at end of file diff --git a/blocks/testimonial/testimonial.css b/blocks/testimonial/testimonial.css new file mode 100644 index 000000000..836b85c25 --- /dev/null +++ b/blocks/testimonial/testimonial.css @@ -0,0 +1,690 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.testimonial-wrapper :is(.absolute) { + position: absolute; +} + +.testimonial-wrapper :is(.relative) { + position: relative; +} + +.testimonial-wrapper :is(.left-28) { + left: 7rem; +} + +.testimonial-wrapper :is(.top-16) { + top: 4rem; +} + +.testimonial-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.testimonial-wrapper :is(.block) { + display: block; +} + +.testimonial-wrapper :is(.flex) { + display: flex; +} + +.testimonial-wrapper :is(.hidden) { + display: none; +} + +.testimonial-wrapper :is(.h-16) { + height: 4rem; +} + +.testimonial-wrapper :is(.h-36) { + height: 9rem; +} + +.testimonial-wrapper :is(.h-64) { + height: 16rem; +} + +.testimonial-wrapper :is(.w-16) { + width: 4rem; +} + +.testimonial-wrapper :is(.w-36) { + width: 9rem; +} + +.testimonial-wrapper :is(.w-64) { + width: 16rem; +} + +.testimonial-wrapper :is(.-translate-x-8) { + --tw-translate-x: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.testimonial-wrapper :is(.-translate-y-24) { + --tw-translate-y: -6rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.testimonial-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.testimonial-wrapper :is(.flex-col) { + flex-direction: column; +} + +.testimonial-wrapper :is(.items-center) { + align-items: center; +} + +.testimonial-wrapper :is(.justify-center) { + justify-content: center; +} + +.testimonial-wrapper :is(.gap-4) { + gap: 1rem; +} + +.testimonial-wrapper :is(.gap-8) { + gap: 2rem; +} + +.testimonial-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.testimonial-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.testimonial-wrapper :is(.py-6) { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.testimonial-wrapper :is(.text-2xl) { + font-size: 1.5rem; + line-height: 2rem; +} + +.testimonial-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.testimonial-wrapper :is(.font-medium) { + font-weight: 500; +} + +.testimonial-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.testimonial-wrapper :is(.leading-9) { + line-height: 2.25rem; +} + +.testimonial-wrapper :is(.text-danahergray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.testimonial-wrapper :is(.text-danahergreyblue-500) { + --tw-text-opacity: 1; + color: rgb(3 93 103 / var(--tw-text-opacity)); +} + +.testimonial-wrapper :is(.text-indigo-200) { + --tw-text-opacity: 1; + color: rgb(199 210 254 / var(--tw-text-opacity)); +} + +.testimonial-wrapper :is(.opacity-50) { + opacity: 0.5; +} + +@media (min-width: 1024px) { + .testimonial-wrapper :is(.lg\:block) { + display: block; + } + + .testimonial-wrapper :is(.lg\:flex-shrink-0) { + flex-shrink: 0; + } +} \ No newline at end of file diff --git a/blocks/topic-list/topic-list.css b/blocks/topic-list/topic-list.css new file mode 100644 index 000000000..e6904f12a --- /dev/null +++ b/blocks/topic-list/topic-list.css @@ -0,0 +1,644 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.btn-outline-trending-brand { + color: #7523FF; + background-color: rgb(255 255 255); + border-color: #7523FF; + border-width: 2px; +} + +.btn-outline-trending-brand:hover { + color: rgb(255 255 255); + background-color: #7523FF; +} + +.topic-list-wrapper :is(.ml-auto) { + margin-left: auto; +} + +.topic-list-wrapper :is(.block) { + display: block; +} + +.topic-list-wrapper :is(.flex) { + display: flex; +} + +.topic-list-wrapper :is(.h-1) { + height: 0.25rem; +} + +.topic-list-wrapper :is(.w-full) { + width: 100%; +} + +.topic-list-wrapper :is(.min-w-\[40\%\]) { + min-width: 40%; +} + +.topic-list-wrapper :is(.flex-col) { + flex-direction: column; +} + +.topic-list-wrapper :is(.items-start) { + align-items: flex-start; +} + +.topic-list-wrapper :is(.items-center) { + align-items: center; +} + +.topic-list-wrapper :is(.gap-3) { + gap: 0.75rem; +} + +.topic-list-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.topic-list-wrapper :is(.bg-black) { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + +.topic-list-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.topic-list-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.topic-list-wrapper :is(.py-3) { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.topic-list-wrapper :is(.py-9) { + padding-top: 2.25rem; + padding-bottom: 2.25rem; +} + +.topic-list-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.topic-list-wrapper :is(.pt-10) { + padding-top: 2.5rem; +} + +.topic-list-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.topic-list-wrapper :is(.text-xl) { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.topic-list-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +@media (min-width: 768px) { + .topic-list-wrapper :is(.md\:min-w-\[20\%\]) { + min-width: 20%; + } +} \ No newline at end of file diff --git a/blocks/workflow-carousel/workflow-carousel.css b/blocks/workflow-carousel/workflow-carousel.css new file mode 100644 index 000000000..7906a2a48 --- /dev/null +++ b/blocks/workflow-carousel/workflow-carousel.css @@ -0,0 +1,820 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.workflow-carousel-wrapper :is(.relative) { + position: relative; +} + +.workflow-carousel-wrapper :is(.mx-px) { + margin-left: 1px; + margin-right: 1px; +} + +.workflow-carousel-wrapper :is(.mb-1) { + margin-bottom: 0.25rem; +} + +.workflow-carousel-wrapper :is(.mb-3) { + margin-bottom: 0.75rem; +} + +.workflow-carousel-wrapper :is(.mr-2) { + margin-right: 0.5rem; +} + +.workflow-carousel-wrapper :is(.mt-2) { + margin-top: 0.5rem; +} + +.workflow-carousel-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.workflow-carousel-wrapper :is(.mt-auto) { + margin-top: auto; +} + +.workflow-carousel-wrapper :is(.line-clamp-4) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; +} + +.workflow-carousel-wrapper :is(.block) { + display: block; +} + +.workflow-carousel-wrapper :is(.flex) { + display: flex; +} + +.workflow-carousel-wrapper :is(.inline-flex) { + display: inline-flex; +} + +.workflow-carousel-wrapper :is(.grid) { + display: grid; +} + +.workflow-carousel-wrapper :is(.h-36) { + height: 9rem; +} + +.workflow-carousel-wrapper :is(.h-full) { + height: 100%; +} + +.workflow-carousel-wrapper :is(.w-full) { + width: 100%; +} + +.workflow-carousel-wrapper :is(.flex-initial) { + flex: 0 1 auto; +} + +.workflow-carousel-wrapper :is(.flex-shrink-0) { + flex-shrink: 0; +} + +.workflow-carousel-wrapper :is(.cursor-pointer) { + cursor: pointer; +} + +.workflow-carousel-wrapper :is(.snap-x) { + scroll-snap-type: x var(--tw-scroll-snap-strictness); +} + +.workflow-carousel-wrapper :is(.snap-mandatory) { + --tw-scroll-snap-strictness: mandatory; +} + +.workflow-carousel-wrapper :is(.snap-start) { + scroll-snap-align: start; +} + +.workflow-carousel-wrapper :is(.list-none) { + list-style-type: none; +} + +.workflow-carousel-wrapper :is(.auto-cols-\[calc\(100\%\)\]) { + grid-auto-columns: calc(100%); +} + +.workflow-carousel-wrapper :is(.grid-flow-col) { + grid-auto-flow: column; +} + +.workflow-carousel-wrapper :is(.flex-row) { + flex-direction: row; +} + +.workflow-carousel-wrapper :is(.flex-col) { + flex-direction: column; +} + +.workflow-carousel-wrapper :is(.items-center) { + align-items: center; +} + +.workflow-carousel-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.workflow-carousel-wrapper :is(.gap-1) { + gap: 0.25rem; +} + +.workflow-carousel-wrapper :is(.gap-3) { + gap: 0.75rem; +} + +.workflow-carousel-wrapper :is(.gap-6) { + gap: 1.5rem; +} + +.workflow-carousel-wrapper :is(.gap-x-4) { + -moz-column-gap: 1rem; + column-gap: 1rem; +} + +.workflow-carousel-wrapper :is(.space-x-2 > :not([hidden]) ~ :not([hidden])) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.workflow-carousel-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.workflow-carousel-wrapper :is(.overflow-x-auto) { + overflow-x: auto; +} + +.workflow-carousel-wrapper :is(.scroll-smooth) { + scroll-behavior: smooth; +} + +.workflow-carousel-wrapper :is(.break-words) { + overflow-wrap: break-word; +} + +.workflow-carousel-wrapper :is(.rounded-md) { + border-radius: 0.375rem; +} + +.workflow-carousel-wrapper :is(.rounded-sm) { + border-radius: 0.125rem; +} + +.workflow-carousel-wrapper :is(.border) { + border-width: 1px; +} + +.workflow-carousel-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.workflow-carousel-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.workflow-carousel-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.workflow-carousel-wrapper :is(.p-4) { + padding: 1rem; +} + +.workflow-carousel-wrapper :is(.pb-2) { + padding-bottom: 0.5rem; +} + +.workflow-carousel-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.workflow-carousel-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.workflow-carousel-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.workflow-carousel-wrapper :is(.text-xl) { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.workflow-carousel-wrapper :is(.font-bold) { + font-weight: 700; +} + +.workflow-carousel-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.workflow-carousel-wrapper :is(.leading-tight) { + line-height: 1.25; +} + +.workflow-carousel-wrapper :is(.tracking-normal) { + letter-spacing: 0em; +} + +.workflow-carousel-wrapper :is(.text-danaherblue-600) { + --tw-text-opacity: 1; + color: rgb(13 49 114 / var(--tw-text-opacity)); +} + +.workflow-carousel-wrapper :is(.text-gray-400) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.workflow-carousel-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.workflow-carousel-wrapper :is(.shadow-md) { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.workflow-carousel-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.workflow-carousel-wrapper :is(.hover\:shadow-lg:hover) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.workflow-carousel-wrapper :is(.group:hover .group-hover\:font-bold) { + font-weight: 700; +} + +.workflow-carousel-wrapper :is(.group:hover .group-hover\:underline) { + text-decoration-line: underline; +} + +@media (min-width: 768px) { + .workflow-carousel-wrapper :is(.md\:auto-cols-\[calc\(\(100\%\/2\)-20px\)\]) { + grid-auto-columns: calc((100% / 2) - 20px); + } +} + +@media (min-width: 1024px) { + .workflow-carousel-wrapper :is(.lg\:auto-cols-\[calc\(\(100\%\/3\)-20px\)\]) { + grid-auto-columns: calc((100% / 3) - 20px); + } +} \ No newline at end of file diff --git a/blocks/workflow-tabs/workflow-tabs.css b/blocks/workflow-tabs/workflow-tabs.css new file mode 100644 index 000000000..3b5998d2b --- /dev/null +++ b/blocks/workflow-tabs/workflow-tabs.css @@ -0,0 +1,696 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.workflow-tabs-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.workflow-tabs-wrapper :is(.\!ml-0) { + margin-left: 0px !important; +} + +.workflow-tabs-wrapper :is(.\!mt-0) { + margin-top: 0px !important; +} + +.workflow-tabs-wrapper :is(.block) { + display: block; +} + +.workflow-tabs-wrapper :is(.flex) { + display: flex; +} + +.workflow-tabs-wrapper :is(.inline-flex) { + display: inline-flex; +} + +.workflow-tabs-wrapper :is(.h-full) { + height: 100%; +} + +.workflow-tabs-wrapper :is(.h-max) { + height: -moz-max-content; + height: max-content; +} + +.workflow-tabs-wrapper :is(.w-full) { + width: 100%; +} + +.workflow-tabs-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.workflow-tabs-wrapper :is(.cursor-pointer) { + cursor: pointer; +} + +.workflow-tabs-wrapper :is(.flex-col) { + flex-direction: column; +} + +.workflow-tabs-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + +.workflow-tabs-wrapper :is(.items-center) { + align-items: center; +} + +.workflow-tabs-wrapper :is(.justify-start) { + justify-content: flex-start; +} + +.workflow-tabs-wrapper :is(.justify-center) { + justify-content: center; +} + +.workflow-tabs-wrapper :is(.gap-x-2) { + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} + +.workflow-tabs-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.workflow-tabs-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.workflow-tabs-wrapper :is(.border) { + border-width: 1px; +} + +.workflow-tabs-wrapper :is(.border-solid) { + border-style: solid; +} + +.workflow-tabs-wrapper :is(.border-gray-300) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.workflow-tabs-wrapper :is(.bg-danaherblue-600) { + --tw-bg-opacity: 1; + background-color: rgb(13 49 114 / var(--tw-bg-opacity)); +} + +.workflow-tabs-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.workflow-tabs-wrapper :is(.bg-danaherpurple-500) { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +.workflow-tabs-wrapper :is(.\!py-0) { + padding-top: 0px !important; + padding-bottom: 0px !important; +} + +.workflow-tabs-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.workflow-tabs-wrapper :is(.py-1) { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.workflow-tabs-wrapper :is(.text-xs) { + font-size: 0.75rem; + line-height: 1rem; +} + +.workflow-tabs-wrapper :is(.font-medium) { + font-weight: 500; +} + +.workflow-tabs-wrapper :is(.capitalize) { + text-transform: capitalize; +} + +.workflow-tabs-wrapper :is(.leading-5) { + line-height: 1.25rem; +} + +.workflow-tabs-wrapper :is(.text-white) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.workflow-tabs-wrapper :is(.shadow-md) { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.workflow-tabs-wrapper :is(.hover\:text-white:hover) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +@media (min-width: 768px) { + .workflow-tabs-wrapper :is(.md\:w-2\/5) { + width: 40%; + } +} \ No newline at end of file diff --git a/build-css.js b/build-css.js index 1b5844c56..268fc5bd9 100644 --- a/build-css.js +++ b/build-css.js @@ -6,60 +6,243 @@ const fileMappings = [ input: './styles/tailwind.css', output: './styles/styles.css', }, + { + content: './blocks/accordion/accordion.js', + output: './blocks/accordion/accordion.css', + wrapper: 'accordion-wrapper', + }, + { + content: './blocks/articles-list/articles-list.js', + output: './blocks/articles-list/articles-list.css', + wrapper: 'articles-list-wrapper', + }, + { + content: './blocks/banner/banner.js', + output: './blocks/banner/banner.css', + wrapper: 'banner-wrapper', + }, + { + content: './blocks/blog-hero/blog-hero.js', + output: './blocks/blog-hero/blog-hero.css', + wrapper: 'blog-hero-wrapper', + }, + { + content: './blocks/breadcrumb/breadcrumb.js', + output: './blocks/breadcrumb/breadcrumb.css', + wrapper: 'breadcrumb-wrapper', + }, + { + content: './blocks/call-to-action/call-to-action.js', + output: './blocks/call-to-action/call-to-action.css', + wrapper: 'call-to-action-wrapper', + }, + { + content: ['./blocks/card-list/card-list.js', './blocks/card-list/applicationCard.js', './blocks/card-list/articleCard.js', './blocks/card-list/libraryCard.js'], + output: './blocks/card-list/card-list.css', + wrapper: 'card-list-wrapper', + }, + { + content: './blocks/cards/cards.js', + output: './blocks/cards/cards.css', + wrapper: 'cards-wrapper', + }, + { + content: './blocks/carousel/carousel.js', + output: './blocks/carousel/carousel.css', + wrapper: 'carousel-wrapper', + }, + { + content: './blocks/category-family/category-family.js', + output: './blocks/category-family/category-family.css', + wrapper: 'category-family-wrapper', + }, { input: './blocks/columns/columns-dev.css', output: './blocks/columns/columns.css', + wrapper: 'columns-wrapper', }, { - input: './blocks/product-hero/product-hero-dev.css', - output: './blocks/product-hero/product-hero.css', + content: './blocks/download/download.js', + output: './blocks/download/download.css', + wrapper: 'download-wrapper', }, { - input: './blocks/page-tabs/page-tabs-dev.css', - output: './blocks/page-tabs/page-tabs.css', + content: './blocks/embed/embed.js', + output: './blocks/embed/embed.css', + wrapper: 'embed-wrapper', }, { - input: './blocks/timeline/timeline-dev.css', - output: './blocks/timeline/timeline.css', + content: ['./blocks/footer/footer.js', './fragments/footer.html'], + output: './blocks/footer/footer.css', + wrapper: 'footer-wrapper', }, { - input: './blocks/footer/footer-dev.css', - output: './blocks/footer/footer.css', + content: './blocks/header/header.js', + output: './blocks/header/header.css', + wrapper: 'header-wrapper', }, { - input: './blocks/workflow-carousel/workflow-carousel-dev.css', - output: './blocks/workflow-carousel/workflow-carousel.css', + content: './blocks/hero/hero.js', + output: './blocks/hero/hero.css', + wrapper: 'hero-wrapper', + }, + { + content: './blocks/logo-clouds/logo-clouds.js', + output: './blocks/logo-clouds/logo-clouds.css', + wrapper: 'logo-clouds-wrapper', + }, + { + content: './blocks/marketo-form/marketo-form.js', + output: './blocks/marketo-form/marketo-form.css', + wrapper: 'marketo-form-wrapper', + }, + { + content: './blocks/mini-teasers/mini-teasers.js', + output: './blocks/mini-teasers/mini-teasers.css', + wrapper: 'mini-teasers-wrapper', + }, + { + content: './blocks/page-jump-menu/page-jump-menu.js', + output: './blocks/page-jump-menu/page-jump-menu.css', + wrapper: 'page-jump-menu-wrapper', + }, + { + input: './blocks/page-tabs/page-tabs-dev.css', + output: './blocks/page-tabs/page-tabs.css', + wrapper: 'page-tabs-wrapper', + }, + { + content: './blocks/popular-articles/popular-articles.js', + output: './blocks/popular-articles/popular-articles.css', + wrapper: 'popular-articles-wrapper', + }, + { + content: './blocks/product-card/product-card.js', + output: './blocks/product-card/product-card.css', + wrapper: 'product-card-wrapper', }, { input: './blocks/product-category/product-category-dev.css', output: './blocks/product-category/product-category.css', + wrapper: 'product-category-wrapper', + }, + { + content: ['./blocks/product-category-list/product-category-list.js', './blocks/product-category-list/filter.js'], + output: './blocks/product-category-list/product-category-list.css', + wrapper: 'product-category-list-wrapper', }, { - input: './styles/coveo-atomic.css', - output: './blocks/product-resources/product-resources.css', + content: './blocks/product-citations/product-citations.js', + output: './blocks/product-citations/product-citations.css', + wrapper: 'product-citations-wrapper', }, { - input: './styles/coveo-atomic.css', - output: './blocks/product-children/product-children.css', + input: './blocks/product-hero/product-hero-dev.css', + output: './blocks/product-hero/product-hero.css', + wrapper: 'product-hero-wrapper', }, { - input: './templates/processStep/processStep-dev.css', - output: './templates/processStep/processStep.css', + content: './blocks/product-menu/product-menu.js', + output: './blocks/product-menu/product-menu.css', + wrapper: 'product-menu-wrapper', }, { - input: './templates/application/application-dev.css', - output: './templates/application/application.css', + content: './blocks/product-overview/product-overview.js', + output: './blocks/product-overview/product-overview.css', + wrapper: 'product-overview-wrapper', + }, + { + content: './blocks/product-parts/product-parts.js', + output: './blocks/product-parts/product-parts.css', + wrapper: 'product-parts-wrapper', + }, + { + content: './blocks/product-recommendations/product-recommendations.js', + output: './blocks/product-recommendations/product-recommendations.css', + wrapper: 'product-recommendations-wrapper', + }, + { + content: './blocks/product-specifications/product-specifications.js', + output: './blocks/product-specifications/product-specifications.css', + wrapper: 'product-specifications-wrapper', + }, + { + content: './blocks/recent-articles/recent-articles.js', + output: './blocks/recent-articles/recent-articles.css', + wrapper: 'recent-articles-wrapper', + }, + { + content: './blocks/related-articles/related-articles.js', + output: './blocks/related-articles/related-articles.css', + wrapper: 'related-articles-wrapper', + }, + { + content: './blocks/side-nav/side-nav.js', + output: './blocks/side-nav/side-nav.css', + wrapper: 'side-nav-wrapper', + }, + { + content: './blocks/social-feeds/social-feeds.js', + output: './blocks/social-feeds/social-feeds.css', + wrapper: 'social-feeds-wrapper', + }, + { + content: './blocks/social-media/social-media.js', + output: './blocks/social-media/social-media.css', + wrapper: 'social-media-wrapper', + }, + { + content: './blocks/stats/stats.js', + output: './blocks/stats/stats.css', + wrapper: 'stats-wrapper', + }, + { + content: './blocks/table/table.js', + output: './blocks/table/table.css', + wrapper: 'table-wrapper', + }, + { + content: './blocks/tags-list/tags-list.js', + output: './blocks/tags-list/tags-list.css', + wrapper: 'tags-list-wrapper', + }, + { + content: './blocks/takeway/takeway.js', + output: './blocks/takeway/takeway.css', + wrapper: 'takeway-wrapper', + }, + { + content: './blocks/testimonial/testimonial.js', + output: './blocks/testimonial/testimonial.css', + wrapper: 'testimonial-wrapper', + }, + { + input: './blocks/timeline/timeline-dev.css', + output: './blocks/timeline/timeline.css', + wrapper: 'timeline-wrapper', + }, + { + content: './blocks/topic-list/topic-list.js', + output: './blocks/topic-list/topic-list.css', + wrapper: 'topic-list-wrapper', + }, + { + content: './blocks/workflow-carousel/workflow-carousel.js', + output: './blocks/workflow-carousel/workflow-carousel.css', + wrapper: 'workflow-carousel-wrapper', }, { - input: './templates/brandHome/brandHome-dev.css', - output: './templates/brandHome/brandHome.css', + content: './blocks/workflow-tabs/workflow-tabs.js', + output: './blocks/workflow-tabs/workflow-tabs.css', + wrapper: 'workflow-tabs-wrapper', }, ]; const watch = process.argv[2]; // Loop through each file mapping and run Tailwind CSS CLI -fileMappings.forEach(({ content, input, output }) => { +fileMappings.forEach(({ content, input, output, wrapper }) => { + process.env.IMPORTANT_WRAPPER = `.${wrapper}` || '.default-wrapper'; const command = `npx tailwindcss ${input ? `-i ${input}` : ''} ${content ? `--content ${content}` : ''} -o ${output} ${watch ? '--watch' : ''}`; exec(command, (error, stdout, stderr) => { if (error) { diff --git a/styles/styles.css b/styles/styles.css index 14408564d..a831a7ba6 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -507,20 +507,6 @@ h6 { font-weight: 200; } -.eyebrow { - font-size: 1.125rem; - line-height: 1.75rem; - --tw-text-opacity: 1; - color: rgb(64 0 165 / var(--tw-text-opacity)); -} - -.eyebrow-sm { - font-size: 0.875rem; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(64 0 165 / var(--tw-text-opacity)); -} - main .default-content-wrapper h1 { font-size: 2.25rem; line-height: 2.5rem; @@ -671,27 +657,6 @@ main .default-content-wrapper h2 { } } -.href-text a { - position: relative; - z-index: 0; - text-decoration-line: underline; - text-decoration-color: #7523FF; - text-decoration-thickness: 2px; - text-underline-offset: 4px; - text-decoration-style: solid; - word-break: break-all; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-duration: 500ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -.href-text a:hover { - color: rgb(255 255 255); - background-color: #7523FF; -} - .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); @@ -804,20 +769,6 @@ main .section.carousel-container { outline-offset: 2px; } -.btn-sm { - padding-top: 0.125rem; - padding-bottom: 0.125rem; - font-size: 0.875rem; - line-height: 1.25rem; -} - -.btn-lg { - padding-top: 0.625rem; - padding-bottom: 0.625rem; - font-size: 1.125rem; - line-height: 1.75rem; -} - .btn:disabled { cursor: not-allowed; opacity: 0.5; @@ -1098,7 +1049,7 @@ header { } } -.sr-only { +.undefined :is(.sr-only) { position: absolute; width: 1px; height: 1px; @@ -1110,3414 +1061,924 @@ header { border-width: 0; } -.pointer-events-none { +.undefined :is(.pointer-events-none) { pointer-events: none; } -.pointer-events-auto { +.undefined :is(.pointer-events-auto) { pointer-events: auto; } -.visible { +.undefined :is(.visible) { visibility: visible; } -.static { +.undefined :is(.static) { position: static; } -.fixed { +.undefined :is(.fixed) { position: fixed; } -.absolute { +.undefined :is(.absolute) { position: absolute; } -.relative { +.undefined :is(.relative) { position: relative; } -.inset-0 { - inset: 0px; +.undefined :is(.bottom-0) { + bottom: 0px; } -.inset-x-0 { +.undefined :is(.left-0) { left: 0px; +} + +.undefined :is(.right-0) { right: 0px; } -.bottom-0 { - bottom: 0px; +.undefined :is(.top-0) { + top: 0px; } -.bottom-4 { - bottom: 1rem; +.undefined :is(.z-10) { + z-index: 10; } -.left-0 { - left: 0px; +.undefined :is(.z-\[9999\]) { + z-index: 9999; } -.left-28 { - left: 7rem; +.undefined :is(.m-0) { + margin: 0px; } -.left-4 { - left: 1rem; +.undefined :is(.mx-auto) { + margin-left: auto; + margin-right: auto; } -.left-6 { - left: 1.5rem; +.undefined :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; } -.right-0 { - right: 0px; +.undefined :is(.my-2) { + margin-top: 0.5rem; + margin-bottom: 0.5rem; } -.top-0 { - top: 0px; +.undefined :is(.my-auto) { + margin-top: auto; + margin-bottom: auto; } -.top-14 { - top: 3.5rem; +.undefined :is(.mb-12) { + margin-bottom: 3rem; } -.top-16 { - top: 4rem; +.undefined :is(.mb-2) { + margin-bottom: 0.5rem; } -.top-4 { - top: 1rem; +.undefined :is(.mb-5) { + margin-bottom: 1.25rem; } -.top-\[83px\] { - top: 83px; +.undefined :is(.ml-2) { + margin-left: 0.5rem; } -.top-full { - top: 100%; +.undefined :is(.ml-auto) { + margin-left: auto; } -.z-0 { - z-index: 0; +.undefined :is(.mt-0) { + margin-top: 0px; } -.z-10 { - z-index: 10; +.undefined :is(.mt-12) { + margin-top: 3rem; } -.z-20 { - z-index: 20; +.undefined :is(.mt-2) { + margin-top: 0.5rem; } -.z-40 { - z-index: 40; +.undefined :is(.mt-3) { + margin-top: 0.75rem; } -.z-50 { - z-index: 50; +.undefined :is(.mt-4) { + margin-top: 1rem; } -.z-\[9999\] { - z-index: 9999; +.undefined :is(.mt-6) { + margin-top: 1.5rem; } -.z-\[9\] { - z-index: 9; +.undefined :is(.line-clamp-2) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; } -.order-last { - order: 9999; +.undefined :is(.block) { + display: block; } -.order-none { - order: 0; +.undefined :is(.inline) { + display: inline; } -.col-span-1 { - grid-column: span 1 / span 1; +.undefined :is(.flex) { + display: flex; } -.col-span-10 { - grid-column: span 10 / span 10; +.undefined :is(.inline-flex) { + display: inline-flex; } -.col-span-2 { - grid-column: span 2 / span 2; +.undefined :is(.table) { + display: table; } -.col-span-4 { - grid-column: span 4 / span 4; +.undefined :is(.grid) { + display: grid; } -.col-span-8 { - grid-column: span 8 / span 8; +.undefined :is(.contents) { + display: contents; } -.float-right { - float: right; +.undefined :is(.hidden) { + display: none; } -.float-none { - float: none; +.undefined :is(.h-10) { + height: 2.5rem; } -.m-0 { - margin: 0px; +.undefined :is(.h-24) { + height: 6rem; } -.m-1 { - margin: 0.25rem; +.undefined :is(.h-4) { + height: 1rem; } -.-my-px { - margin-top: -1px; - margin-bottom: -1px; +.undefined :is(.h-48) { + height: 12rem; } -.mx-10 { - margin-left: 2.5rem; - margin-right: 2.5rem; +.undefined :is(.h-5) { + height: 1.25rem; } -.mx-2 { - margin-left: 0.5rem; - margin-right: 0.5rem; +.undefined :is(.h-full) { + height: 100%; } -.mx-6 { - margin-left: 1.5rem; - margin-right: 1.5rem; +.undefined :is(.h-max) { + height: -moz-max-content; + height: max-content; } -.mx-auto { - margin-left: auto; - margin-right: auto; +.undefined :is(.w-10) { + width: 2.5rem; } -.mx-px { - margin-left: 1px; - margin-right: 1px; +.undefined :is(.w-24) { + width: 6rem; } -.my-0 { - margin-top: 0px; - margin-bottom: 0px; +.undefined :is(.w-4) { + width: 1rem; } -.my-10 { - margin-top: 2.5rem; - margin-bottom: 2.5rem; +.undefined :is(.w-5) { + width: 1.25rem; } -.my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; +.undefined :is(.w-8\/12) { + width: 66.666667%; } -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; +.undefined :is(.w-auto) { + width: auto; } -.my-6 { - margin-top: 1.5rem; - margin-bottom: 1.5rem; +.undefined :is(.w-full) { + width: 100%; } -.my-8 { - margin-top: 2rem; - margin-bottom: 2rem; +.undefined :is(.max-w-7xl) { + max-width: 80rem; } -.my-auto { - margin-top: auto; - margin-bottom: auto; +.undefined :is(.max-w-md) { + max-width: 28rem; } -.\!mb-4 { - margin-bottom: 1rem !important; +.undefined :is(.max-w-xl) { + max-width: 36rem; } -.\!ml-0 { - margin-left: 0px !important; +.undefined :is(.flex-1) { + flex: 1 1 0%; } -.\!mt-0 { - margin-top: 0px !important; +.undefined :is(.flex-shrink-0) { + flex-shrink: 0; } -.-mr-px { - margin-right: -1px; +.undefined :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.-mt-20 { - margin-top: -5rem; +.undefined :is(.cursor-pointer) { + cursor: pointer; } -.-mt-\[21px\] { - margin-top: -21px; +.undefined :is(.select-none) { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } -.-mt-px { - margin-top: -1px; +.undefined :is(.resize) { + resize: both; } -.mb-0 { - margin-bottom: 0px; +.undefined :is(.snap-none) { + scroll-snap-type: none; } -.mb-1 { - margin-bottom: 0.25rem; +.undefined :is(.snap-x) { + scroll-snap-type: x var(--tw-scroll-snap-strictness); } -.mb-12 { - margin-bottom: 3rem; +.undefined :is(.snap-mandatory) { + --tw-scroll-snap-strictness: mandatory; } -.mb-2 { - margin-bottom: 0.5rem; +.undefined :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); } -.mb-20 { - margin-bottom: 5rem; +.undefined :is(.flex-col) { + flex-direction: column; } -.mb-3 { - margin-bottom: 0.75rem; +.undefined :is(.flex-wrap) { + flex-wrap: wrap; } -.mb-4 { - margin-bottom: 1rem; +.undefined :is(.items-center) { + align-items: center; } -.mb-5 { - margin-bottom: 1.25rem; +.undefined :is(.justify-start) { + justify-content: flex-start; } -.mb-8 { - margin-bottom: 2rem; +.undefined :is(.justify-center) { + justify-content: center; } -.mb-\[2px\] { - margin-bottom: 2px; +.undefined :is(.justify-between) { + justify-content: space-between; } -.ml-0 { - margin-left: 0px; +.undefined :is(.gap-2) { + gap: 0.5rem; } -.ml-0\.5 { - margin-left: 0.125rem; +.undefined :is(.gap-4) { + gap: 1rem; } -.ml-1 { - margin-left: 0.25rem; +.undefined :is(.gap-x-16) { + -moz-column-gap: 4rem; + column-gap: 4rem; } -.ml-2 { - margin-left: 0.5rem; +.undefined :is(.gap-x-6) { + -moz-column-gap: 1.5rem; + column-gap: 1.5rem; } -.ml-4 { - margin-left: 1rem; +.undefined :is(.gap-y-12) { + row-gap: 3rem; } -.ml-auto { - margin-left: auto; +.undefined :is(.gap-y-8) { + row-gap: 2rem; } -.mr-12 { - margin-right: 3rem; +.undefined :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } -.mr-2 { - margin-right: 0.5rem; +.undefined :is(.overflow-hidden) { + overflow: hidden; } -.mr-4 { - margin-right: 1rem; +.undefined :is(.scroll-auto) { + scroll-behavior: auto; } -.mr-7 { - margin-right: 1.75rem; +.undefined :is(.scroll-smooth) { + scroll-behavior: smooth; } -.mt-0 { - margin-top: 0px; +.undefined :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; } -.mt-10 { - margin-top: 2.5rem; +.undefined :is(.rounded) { + border-radius: 0.25rem; } -.mt-12 { - margin-top: 3rem; +.undefined :is(.rounded-full) { + border-radius: 9999px; } -.mt-2 { - margin-top: 0.5rem; +.undefined :is(.rounded-md) { + border-radius: 0.375rem; } -.mt-3 { - margin-top: 0.75rem; +.undefined :is(.rounded-r) { + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; } -.mt-4 { - margin-top: 1rem; +.undefined :is(.border) { + border-width: 1px; } -.mt-5 { - margin-top: 1.25rem; +.undefined :is(.border-2) { + border-width: 2px; } -.mt-6 { - margin-top: 1.5rem; +.undefined :is(.border-danaherpurple-500) { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); } -.mt-8 { - margin-top: 2rem; +.undefined :is(.border-gray-300) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.mt-\[-1px\] { - margin-top: -1px; +.undefined :is(.border-red-500) { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity)); } -.mt-\[-256px\] { - margin-top: -256px; +.undefined :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.mt-auto { - margin-top: auto; +.undefined :is(.bg-danaherlightblue-500) { + --tw-bg-opacity: 1; + background-color: rgb(59 199 229 / var(--tw-bg-opacity)); } -.\!line-clamp-2 { - overflow: hidden !important; - display: -webkit-box !important; - -webkit-box-orient: vertical !important; - -webkit-line-clamp: 2 !important; +.undefined :is(.bg-danaherpurple-500) { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); } -.\!line-clamp-3 { - overflow: hidden !important; - display: -webkit-box !important; - -webkit-box-orient: vertical !important; - -webkit-line-clamp: 3 !important; +.undefined :is(.bg-gray-200) { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } -.\!line-clamp-4 { - overflow: hidden !important; - display: -webkit-box !important; - -webkit-box-orient: vertical !important; - -webkit-line-clamp: 4 !important; +.undefined :is(.bg-red-50) { + --tw-bg-opacity: 1; + background-color: rgb(254 242 242 / var(--tw-bg-opacity)); } -.line-clamp-2 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; +.undefined :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.line-clamp-3 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; +.undefined :is(.bg-opacity-10) { + --tw-bg-opacity: 0.1; } -.line-clamp-4 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 4; +.undefined :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; } -.\!block { - display: block !important; +.undefined :is(.p-1) { + padding: 0.25rem; } -.block { - display: block; +.undefined :is(.p-2) { + padding: 0.5rem; } -.inline-block { - display: inline-block; +.undefined :is(.p-3) { + padding: 0.75rem; } -.inline { - display: inline; +.undefined :is(.p-4) { + padding: 1rem; } -.flex { - display: flex; +.undefined :is(.px-1) { + padding-left: 0.25rem; + padding-right: 0.25rem; } -.inline-flex { - display: inline-flex; +.undefined :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; } -.table { - display: table; +.undefined :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; } -.grid { - display: grid; +.undefined :is(.px-8) { + padding-left: 2rem; + padding-right: 2rem; } -.contents { - display: contents; +.undefined :is(.px-9) { + padding-left: 2.25rem; + padding-right: 2.25rem; } -.hidden { - display: none; +.undefined :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; } -.aspect-video { - aspect-ratio: 16 / 9; +.undefined :is(.py-2\.5) { + padding-top: 0.625rem; + padding-bottom: 0.625rem; } -.\!h-14 { - height: 3.5rem !important; +.undefined :is(.py-3) { + padding-top: 0.75rem; + padding-bottom: 0.75rem; } -.\!h-16 { - height: 4rem !important; +.undefined :is(.py-4) { + padding-top: 1rem; + padding-bottom: 1rem; } -.\!h-20 { - height: 5rem !important; +.undefined :is(.py-40) { + padding-top: 10rem; + padding-bottom: 10rem; } -.h-1 { - height: 0.25rem; +.undefined :is(.py-8) { + padding-top: 2rem; + padding-bottom: 2rem; } -.h-10 { - height: 2.5rem; +.undefined :is(.pb-0) { + padding-bottom: 0px; } -.h-12 { - height: 3rem; +.undefined :is(.pb-10) { + padding-bottom: 2.5rem; } -.h-14 { - height: 3.5rem; +.undefined :is(.pb-4) { + padding-bottom: 1rem; } -.h-16 { - height: 4rem; +.undefined :is(.pb-6) { + padding-bottom: 1.5rem; } -.h-2 { - height: 0.5rem; +.undefined :is(.pl-5) { + padding-left: 1.25rem; } -.h-20 { - height: 5rem; +.undefined :is(.pl-8) { + padding-left: 2rem; } -.h-24 { - height: 6rem; +.undefined :is(.pr-3) { + padding-right: 0.75rem; } -.h-3 { - height: 0.75rem; +.undefined :is(.pt-12) { + padding-top: 3rem; } -.h-36 { - height: 9rem; +.undefined :is(.pt-4) { + padding-top: 1rem; } -.h-4 { - height: 1rem; +.undefined :is(.pt-6) { + padding-top: 1.5rem; } -.h-48 { - height: 12rem; -} - -.h-5 { - height: 1.25rem; -} - -.h-5\/6 { - height: 83.333333%; -} - -.h-52 { - height: 13rem; -} - -.h-6 { - height: 1.5rem; -} - -.h-64 { - height: 16rem; -} - -.h-7 { - height: 1.75rem; -} - -.h-72 { - height: 18rem; -} - -.h-8 { - height: 2rem; -} - -.h-80 { - height: 20rem; -} - -.h-\[17rem\] { - height: 17rem; -} - -.h-auto { - height: auto; -} - -.h-full { - height: 100%; -} - -.h-max { - height: -moz-max-content; - height: max-content; -} - -.h-screen { - height: 100vh; -} - -.min-h-\[13rem\] { - min-height: 13rem; -} - -.min-h-\[30rem\] { - min-height: 30rem; -} - -.min-h-\[40px\] { - min-height: 40px; +.undefined :is(.text-left) { + text-align: left; } -.\!w-\[15\%\] { - width: 15% !important; +.undefined :is(.align-top) { + vertical-align: top; } -.\!w-full { - width: 100% !important; +.undefined :is(.align-middle) { + vertical-align: middle; } -.w-0 { - width: 0px; +.undefined :is(.font-sans) { + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } -.w-10 { - width: 2.5rem; +.undefined :is(.font-serif) { + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } -.w-12 { - width: 3rem; +.undefined :is(.text-2xl) { + font-size: 1.5rem; + line-height: 2rem; } -.w-14 { - width: 3.5rem; +.undefined :is(.text-4xl) { + font-size: 2.25rem; + line-height: 2.5rem; } -.w-16 { - width: 4rem; +.undefined :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; } -.w-2 { - width: 0.5rem; +.undefined :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; } -.w-2\/4 { - width: 50%; +.undefined :is(.text-xs) { + font-size: 0.75rem; + line-height: 1rem; } -.w-2\/5 { - width: 40%; +.undefined :is(.font-bold) { + font-weight: 700; } -.w-20 { - width: 5rem; +.undefined :is(.font-extrabold) { + font-weight: 800; } -.w-24 { - width: 6rem; +.undefined :is(.font-medium) { + font-weight: 500; } -.w-3 { - width: 0.75rem; +.undefined :is(.font-normal) { + font-weight: 200; } -.w-3\/4 { - width: 75%; +.undefined :is(.font-semibold) { + font-weight: 700; } -.w-36 { - width: 9rem; +.undefined :is(.uppercase) { + text-transform: uppercase; } -.w-4 { - width: 1rem; +.undefined :is(.capitalize) { + text-transform: capitalize; } -.w-4\/5 { - width: 80%; +.undefined :is(.leading-5) { + line-height: 1.25rem; } -.w-48 { - width: 12rem; +.undefined :is(.leading-6) { + line-height: 1.5rem; } -.w-5 { - width: 1.25rem; +.undefined :is(.tracking-tight) { + letter-spacing: -0.025em; } -.w-6 { - width: 1.5rem; +.undefined :is(.tracking-wide) { + letter-spacing: 0.025em; } -.w-60 { - width: 15rem; +.undefined :is(.text-danaherblue-600) { + --tw-text-opacity: 1; + color: rgb(13 49 114 / var(--tw-text-opacity)); } -.w-64 { - width: 16rem; +.undefined :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); } -.w-8 { - width: 2rem; +.undefined :is(.text-gray-500) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); } -.w-8\/12 { - width: 66.666667%; +.undefined :is(.text-gray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); } -.w-9 { - width: 2.25rem; +.undefined :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); } -.w-\[15rem\] { - width: 15rem; +.undefined :is(.text-indigo-300) { + --tw-text-opacity: 1; + color: rgb(165 180 252 / var(--tw-text-opacity)); } -.w-\[360px\] { - width: 360px; +.undefined :is(.text-lightblue-500) { + --tw-text-opacity: 1; + color: rgb(59 199 229 / var(--tw-text-opacity)); } -.w-\[47\%\] { - width: 47%; +.undefined :is(.text-red-600) { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity)); } -.w-\[85\%\] { - width: 85%; +.undefined :is(.text-red-800) { + --tw-text-opacity: 1; + color: rgb(153 27 27 / var(--tw-text-opacity)); } -.w-\[98\%\] { - width: 98%; +.undefined :is(.text-white) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); } -.w-auto { - width: auto; +.undefined :is(.shadow) { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.w-full { - width: 100%; +.undefined :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.w-max { - width: -moz-max-content; - width: max-content; +.undefined :is(.shadow-sm) { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.min-w-\[40\%\] { - min-width: 40%; +.undefined :is(.shadow-xl) { + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.min-w-full { - min-width: 100%; +.undefined :is(.outline) { + outline-style: solid; } -.\!max-w-\[unset\] { - max-width: unset !important; +.undefined :is(.blur) { + --tw-blur: blur(8px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.max-w-3xl { - max-width: 48rem; +.undefined :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.max-w-4xl { - max-width: 56rem; +.undefined :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } -.max-w-5xl { - max-width: 64rem; +.undefined :is(.transition-all) { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } -.max-w-7xl { +.undefined :is(main .section.top-border) { + margin: auto; + margin-top: 2.5rem; max-width: 80rem; + border-top-width: 1px; + border-style: solid; + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); } -.max-w-full { - max-width: 100%; +.undefined :is(.hover\:bg-danaherpurple-800:hover) { + --tw-bg-opacity: 1; + background-color: rgb(64 0 165 / var(--tw-bg-opacity)); } -.max-w-md { - max-width: 28rem; +.undefined :is(.hover\:fill-danaherpurple-800:hover) { + fill: #4000A5; } -.max-w-screen-xl { - max-width: 1280px; +.undefined :is(.hover\:text-danaherblue-500:hover) { + --tw-text-opacity: 1; + color: rgb(0 74 89 / var(--tw-text-opacity)); } -.max-w-sm { - max-width: 24rem; +.undefined :is(.hover\:text-danaherpurple-800:hover) { + --tw-text-opacity: 1; + color: rgb(64 0 165 / var(--tw-text-opacity)); } -.max-w-xl { - max-width: 36rem; +.undefined :is(.hover\:text-white:hover) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); } -.max-w-xs { - max-width: 20rem; +.undefined :is(.hover\:underline:hover) { + text-decoration-line: underline; } -.flex-1 { - flex: 1 1 0%; +.undefined :is(.focus\:border-gray-300:focus) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.flex-initial { - flex: 0 1 auto; +.undefined :is(.focus\:ring-gray-300:focus) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); } -.flex-shrink-0 { - flex-shrink: 0; +.undefined :is(.group:hover .group-hover\:translate-x-1) { + --tw-translate-x: 0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.shrink-0 { - flex-shrink: 0; +.undefined :is(.group:hover .group-hover\:font-semibold) { + font-weight: 700; } -.flex-grow { - flex-grow: 1; +.undefined :is(.group:hover .group-hover\:tracking-wide) { + letter-spacing: 0.025em; } -.grow { - flex-grow: 1; -} +@media (min-width: 640px) { + .undefined :is(.sm\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } -.basis-1\/2 { - flex-basis: 50%; -} + .undefined :is(.sm\:flex-row) { + flex-direction: row; + } -.table-auto { - table-layout: auto; -} + .undefined :is(.sm\:px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; + } -.-translate-x-8 { - --tw-translate-x: -2rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} + .undefined :is(.sm\:pt-8) { + padding-top: 2rem; + } -.-translate-y-24 { - --tw-translate-y: -6rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} + .undefined :is(.sm\:text-5xl) { + font-size: 3rem; + line-height: 1; + } -.rotate-0 { - --tw-rotate: 0deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + .undefined :is(.sm\:text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; + } } -.scale-95 { - --tw-scale-x: .95; - --tw-scale-y: .95; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} +@media (min-width: 768px) { + .undefined :is(.md\:my-4) { + margin-top: 1rem; + margin-bottom: 1rem; + } -.transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} + .undefined :is(.md\:mt-4) { + margin-top: 1rem; + } -@keyframes ping { - 75%, 100% { - transform: scale(2); - opacity: 0; + .undefined :is(.md\:block) { + display: block; } -} -.animate-ping { - animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; -} + .undefined :is(.md\:h-6) { + height: 1.5rem; + } -@keyframes pulse { - 50% { - opacity: .5; + .undefined :is(.md\:w-6) { + width: 1.5rem; } -} -.animate-pulse { - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} + .undefined :is(.md\:flex-row) { + flex-direction: row; + } -.cursor-pointer { - cursor: pointer; -} + .undefined :is(.md\:flex-wrap) { + flex-wrap: wrap; + } -.select-none { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} + .undefined :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } -.resize { - resize: both; + .undefined :is(.md\:pb-24) { + padding-bottom: 6rem; + } } -.snap-none { - scroll-snap-type: none; -} +@media (min-width: 1024px) { + .undefined :is(.lg\:col-span-3) { + grid-column: span 3 / span 3; + } -.snap-x { - scroll-snap-type: x var(--tw-scroll-snap-strictness); -} + .undefined :is(.lg\:col-span-4) { + grid-column: span 4 / span 4; + } -.snap-mandatory { - --tw-scroll-snap-strictness: mandatory; -} + .undefined :is(.lg\:mb-0) { + margin-bottom: 0px; + } -.snap-start { - scroll-snap-align: start; -} + .undefined :is(.lg\:mt-0) { + margin-top: 0px; + } -.list-disc { - list-style-type: disc; -} + .undefined :is(.lg\:w-1\/3) { + width: 33.333333%; + } -.list-none { - list-style-type: none; -} + .undefined :is(.lg\:w-2\/3) { + width: 66.666667%; + } -.auto-cols-\[calc\(100\%\)\] { - grid-auto-columns: calc(100%); -} + .undefined :is(.lg\:max-w-4xl) { + max-width: 56rem; + } -.grid-flow-col { - grid-auto-flow: column; -} + .undefined :is(.lg\:max-w-7xl) { + max-width: 80rem; + } -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} + .undefined :is(.lg\:grid-cols-7) { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } -.grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); -} + .undefined :is(.lg\:px-0) { + padding-left: 0px; + padding-right: 0px; + } -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} + .undefined :is(.lg\:px-8) { + padding-left: 2rem; + padding-right: 2rem; + } -.grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} + .undefined :is(.lg\:pb-80) { + padding-bottom: 20rem; + } -.grid-rows-1 { - grid-template-rows: repeat(1, minmax(0, 1fr)); + .undefined :is(.lg\:pt-14) { + padding-top: 3.5rem; + } } -.grid-rows-\[0fr\] { - grid-template-rows: 0fr; -} +@media (min-width: 1280px) { + .undefined :is(.xl\:col-start-1) { + grid-column-start: 1; + } -.flex-row { - flex-direction: row; -} - -.flex-col { - flex-direction: column; -} - -.flex-wrap { - flex-wrap: wrap; -} - -.\!content-center { - align-content: center !important; -} - -.items-start { - align-items: flex-start; -} - -.items-center { - align-items: center; -} - -.items-stretch { - align-items: stretch; -} - -.justify-start { - justify-content: flex-start; -} - -.justify-end { - justify-content: flex-end; -} - -.justify-center { - justify-content: center; -} - -.justify-between { - justify-content: space-between; -} - -.justify-items-center { - justify-items: center; -} - -.gap-0 { - gap: 0px; -} - -.gap-0\.5 { - gap: 0.125rem; -} - -.gap-1 { - gap: 0.25rem; -} - -.gap-10 { - gap: 2.5rem; -} - -.gap-16 { - gap: 4rem; -} - -.gap-2 { - gap: 0.5rem; -} - -.gap-3 { - gap: 0.75rem; -} - -.gap-4 { - gap: 1rem; -} - -.gap-5 { - gap: 1.25rem; -} - -.gap-6 { - gap: 1.5rem; -} - -.gap-8 { - gap: 2rem; -} - -.gap-x-1 { - -moz-column-gap: 0.25rem; - column-gap: 0.25rem; -} - -.gap-x-10 { - -moz-column-gap: 2.5rem; - column-gap: 2.5rem; -} - -.gap-x-16 { - -moz-column-gap: 4rem; - column-gap: 4rem; -} - -.gap-x-2 { - -moz-column-gap: 0.5rem; - column-gap: 0.5rem; -} - -.gap-x-20 { - -moz-column-gap: 5rem; - column-gap: 5rem; -} - -.gap-x-3 { - -moz-column-gap: 0.75rem; - column-gap: 0.75rem; -} - -.gap-x-4 { - -moz-column-gap: 1rem; - column-gap: 1rem; -} - -.gap-x-6 { - -moz-column-gap: 1.5rem; - column-gap: 1.5rem; -} - -.gap-x-8 { - -moz-column-gap: 2rem; - column-gap: 2rem; -} - -.gap-y-12 { - row-gap: 3rem; -} - -.gap-y-16 { - row-gap: 4rem; -} - -.gap-y-2 { - row-gap: 0.5rem; -} - -.gap-y-4 { - row-gap: 1rem; -} - -.gap-y-8 { - row-gap: 2rem; -} - -.space-x-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-x-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.75rem * var(--tw-space-x-reverse)); - margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-x-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-y-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); -} - -.space-y-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); -} - -.space-y-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} - -.space-y-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - -.space-y-6 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); -} - -.space-y-8 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(2rem * var(--tw-space-y-reverse)); -} - -.divide-y > :not([hidden]) ~ :not([hidden]) { - --tw-divide-y-reverse: 0; - border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); -} - -.divide-danaherpurple-500 > :not([hidden]) ~ :not([hidden]) { - --tw-divide-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-divide-opacity)); -} - -.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { - --tw-divide-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-divide-opacity)); -} - -.divide-gray-300 > :not([hidden]) ~ :not([hidden]) { - --tw-divide-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-divide-opacity)); -} - -.divide-gray-900\/10 > :not([hidden]) ~ :not([hidden]) { - border-color: rgb(17 24 39 / 0.1); -} - -.place-self-end { - place-self: end; -} - -.self-center { - align-self: center; -} - -.overflow-auto { - overflow: auto; -} - -.overflow-hidden { - overflow: hidden; -} - -.overflow-x-auto { - overflow-x: auto; -} - -.scroll-auto { - scroll-behavior: auto; -} - -.scroll-smooth { - scroll-behavior: smooth; -} - -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.whitespace-nowrap { - white-space: nowrap; -} - -.break-normal { - overflow-wrap: normal; - word-break: normal; -} - -.\!break-words { - overflow-wrap: break-word !important; -} - -.break-words { - overflow-wrap: break-word; -} - -.break-all { - word-break: break-all; -} - -.\!rounded-full { - border-radius: 9999px !important; -} - -.rounded { - border-radius: 0.25rem; -} - -.rounded-full { - border-radius: 9999px; -} - -.rounded-lg { - border-radius: 0.5rem; -} - -.rounded-md { - border-radius: 0.375rem; -} - -.rounded-none { - border-radius: 0px; -} - -.rounded-sm { - border-radius: 0.125rem; -} - -.rounded-xl { - border-radius: 0.75rem; -} - -.rounded-b { - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; -} - -.rounded-r { - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; -} - -.rounded-t { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; -} - -.border { - border-width: 1px; -} - -.border-0 { - border-width: 0px; -} - -.border-2 { - border-width: 2px; -} - -.border-8 { - border-width: 8px; -} - -.border-b { - border-bottom-width: 1px; -} - -.border-l { - border-left-width: 1px; -} - -.border-l-\[0\.5px\] { - border-left-width: 0.5px; -} - -.border-t { - border-top-width: 1px; -} - -.border-t-2 { - border-top-width: 2px; -} - -.border-t-8 { - border-top-width: 8px; -} - -.border-solid { - border-style: solid; -} - -.\!border-gray-300 { - --tw-border-opacity: 1 !important; - border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important; -} - -.border-black { - --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); -} - -.border-danahergray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - -.border-danaherpurple-500 { - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); -} - -.border-gray-200 { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); -} - -.border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - -.border-gray-600 { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); -} - -.border-purple-200 { - --tw-border-opacity: 1; - border-color: rgb(125 86 164 / var(--tw-border-opacity)); -} - -.border-red-500 { - --tw-border-opacity: 1; - border-color: rgb(239 68 68 / var(--tw-border-opacity)); -} - -.border-transparent { - border-color: transparent; -} - -.border-white { - --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); -} - -.border-b-gray-200 { - --tw-border-opacity: 1; - border-bottom-color: rgb(229 231 235 / var(--tw-border-opacity)); -} - -.\!bg-danaherpurple-500 { - --tw-bg-opacity: 1 !important; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)) !important; -} - -.bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); -} - -.bg-black\/25 { - background-color: rgb(0 0 0 / 0.25); -} - -.bg-danaheratomicgrey-200 { - --tw-bg-opacity: 1; - background-color: rgb(229 232 232 / var(--tw-bg-opacity)); -} - -.bg-danaherblue-600 { - --tw-bg-opacity: 1; - background-color: rgb(13 49 114 / var(--tw-bg-opacity)); -} - -.bg-danaherblue-900 { - --tw-bg-opacity: 1; - background-color: rgb(6 28 68 / var(--tw-bg-opacity)); -} - -.bg-danahergray-150 { - --tw-bg-opacity: 1; - background-color: rgb(118 118 118 / var(--tw-bg-opacity)); -} - -.bg-danaherlightblue-50 { - --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); -} - -.bg-danaherlightblue-500 { - --tw-bg-opacity: 1; - background-color: rgb(59 199 229 / var(--tw-bg-opacity)); -} - -.bg-danaherorange-500 { - --tw-bg-opacity: 1; - background-color: rgb(220 96 22 / var(--tw-bg-opacity)); -} - -.bg-danaherpurple-25 { - --tw-bg-opacity: 1; - background-color: rgb(245 239 255 / var(--tw-bg-opacity)); -} - -.bg-danaherpurple-50 { - --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); -} - -.bg-danaherpurple-500 { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); -} - -.bg-danaherpurple-800 { - --tw-bg-opacity: 1; - background-color: rgb(64 0 165 / var(--tw-bg-opacity)); -} - -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - -.bg-gray-200 { - --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); -} - -.bg-gray-50 { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); -} - -.bg-neutral-300 { - --tw-bg-opacity: 1; - background-color: rgb(212 212 212 / var(--tw-bg-opacity)); -} - -.bg-red-50 { - --tw-bg-opacity: 1; - background-color: rgb(254 242 242 / var(--tw-bg-opacity)); -} - -.bg-transparent { - background-color: transparent; -} - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.bg-opacity-10 { - --tw-bg-opacity: 0.1; -} - -.\!fill-current { - fill: currentColor !important; -} - -.fill-current { - fill: currentColor; -} - -.stroke-black { - stroke: #000; -} - -.stroke-danaherpurple-500 { - stroke: #7523FF; -} - -.stroke-white { - stroke: #fff; -} - -.stroke-1 { - stroke-width: 1; -} - -.\!object-contain { - -o-object-fit: contain !important; - object-fit: contain !important; -} - -.object-contain { - -o-object-fit: contain; - object-fit: contain; -} - -.object-cover { - -o-object-fit: cover; - object-fit: cover; -} - -.object-center { - -o-object-position: center; - object-position: center; -} - -.\!p-0 { - padding: 0px !important; -} - -.p-0 { - padding: 0px; -} - -.p-0\.5 { - padding: 0.125rem; -} - -.p-1 { - padding: 0.25rem; -} - -.p-1\.5 { - padding: 0.375rem; -} - -.p-2 { - padding: 0.5rem; -} - -.p-3 { - padding: 0.75rem; -} - -.p-4 { - padding: 1rem; -} - -.\!px-6 { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; -} - -.\!px-7 { - padding-left: 1.75rem !important; - padding-right: 1.75rem !important; -} - -.\!py-0 { - padding-top: 0px !important; - padding-bottom: 0px !important; -} - -.\!py-16 { - padding-top: 4rem !important; - padding-bottom: 4rem !important; -} - -.\!py-28 { - padding-top: 7rem !important; - padding-bottom: 7rem !important; -} - -.px-0 { - padding-left: 0px; - padding-right: 0px; -} - -.px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; -} - -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -.px-8 { - padding-left: 2rem; - padding-right: 2rem; -} - -.px-9 { - padding-left: 2.25rem; - padding-right: 2.25rem; -} - -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.py-2\.5 { - padding-top: 0.625rem; - padding-bottom: 0.625rem; -} - -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} - -.py-3\.5 { - padding-top: 0.875rem; - padding-bottom: 0.875rem; -} - -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.py-40 { - padding-top: 10rem; - padding-bottom: 10rem; -} - -.py-5 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; -} - -.py-6 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} - -.py-8 { - padding-top: 2rem; - padding-bottom: 2rem; -} - -.py-9 { - padding-top: 2.25rem; - padding-bottom: 2.25rem; -} - -.py-\[0\.625rem\] { - padding-top: 0.625rem; - padding-bottom: 0.625rem; -} - -.\!pb-0 { - padding-bottom: 0px !important; -} - -.pb-0 { - padding-bottom: 0px; -} - -.pb-1 { - padding-bottom: 0.25rem; -} - -.pb-10 { - padding-bottom: 2.5rem; -} - -.pb-2 { - padding-bottom: 0.5rem; -} - -.pb-4 { - padding-bottom: 1rem; -} - -.pb-6 { - padding-bottom: 1.5rem; -} - -.pb-8 { - padding-bottom: 2rem; -} - -.pb-\[56\.25\%\] { - padding-bottom: 56.25%; -} - -.pl-0 { - padding-left: 0px; -} - -.pl-1 { - padding-left: 0.25rem; -} - -.pl-10 { - padding-left: 2.5rem; -} - -.pl-12 { - padding-left: 3rem; -} - -.pl-2 { - padding-left: 0.5rem; -} - -.pl-3 { - padding-left: 0.75rem; -} - -.pl-4 { - padding-left: 1rem; -} - -.pl-5 { - padding-left: 1.25rem; -} - -.pl-6 { - padding-left: 1.5rem; -} - -.pl-8 { - padding-left: 2rem; -} - -.pr-2 { - padding-right: 0.5rem; -} - -.pr-3 { - padding-right: 0.75rem; -} - -.pr-6 { - padding-right: 1.5rem; -} - -.pr-8 { - padding-right: 2rem; -} - -.pt-0 { - padding-top: 0px; -} - -.pt-10 { - padding-top: 2.5rem; -} - -.pt-12 { - padding-top: 3rem; -} - -.pt-16 { - padding-top: 4rem; -} - -.pt-2 { - padding-top: 0.5rem; -} - -.pt-2\.5 { - padding-top: 0.625rem; -} - -.pt-4 { - padding-top: 1rem; -} - -.pt-5 { - padding-top: 1.25rem; -} - -.pt-6 { - padding-top: 1.5rem; -} - -.pt-8 { - padding-top: 2rem; -} - -.text-left { - text-align: left; -} - -.text-center { - text-align: center; -} - -.align-top { - vertical-align: top; -} - -.align-middle { - vertical-align: middle; -} - -.font-sans { - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -} - -.font-serif { - font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; -} - -.\!text-2xl { - font-size: 1.5rem !important; - line-height: 2rem !important; -} - -.\!text-lg { - font-size: 1.125rem !important; - line-height: 1.75rem !important; -} - -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} - -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - -.text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; -} - -.text-6xl { - font-size: 3.75rem; - line-height: 1; -} - -.text-base { - font-size: 1rem; - line-height: 1.5rem; -} - -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} - -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - -.text-xs { - font-size: 0.75rem; - line-height: 1rem; -} - -.\!font-normal { - font-weight: 200 !important; -} - -.\!font-semibold { - font-weight: 700 !important; -} - -.font-bold { - font-weight: 700; -} - -.font-extrabold { - font-weight: 800; -} - -.font-extralight { - font-weight: 200; -} - -.font-medium { - font-weight: 500; -} - -.font-normal { - font-weight: 200; -} - -.font-semibold { - font-weight: 700; -} - -.uppercase { - text-transform: uppercase; -} - -.capitalize { - text-transform: capitalize; -} - -.not-italic { - font-style: normal; -} - -.leading-4 { - line-height: 1rem; -} - -.leading-5 { - line-height: 1.25rem; -} - -.leading-6 { - line-height: 1.5rem; -} - -.leading-7 { - line-height: 1.75rem; -} - -.leading-8 { - line-height: 2rem; -} - -.leading-9 { - line-height: 2.25rem; -} - -.leading-none { - line-height: 1; -} - -.leading-tight { - line-height: 1.25; -} - -.tracking-normal { - letter-spacing: 0em; -} - -.tracking-tight { - letter-spacing: -0.025em; -} - -.tracking-wide { - letter-spacing: 0.025em; -} - -.tracking-wider { - letter-spacing: 0.05em; -} - -.\!text-danahergray-900 { - --tw-text-opacity: 1 !important; - color: rgb(17 24 39 / var(--tw-text-opacity)) !important; -} - -.\!text-white { - --tw-text-opacity: 1 !important; - color: rgb(255 255 255 / var(--tw-text-opacity)) !important; -} - -.text-black { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); -} - -.text-danaherblack-500 { - --tw-text-opacity: 1; - color: rgb(51 51 51 / var(--tw-text-opacity)); -} - -.text-danaherblue-600 { - --tw-text-opacity: 1; - color: rgb(13 49 114 / var(--tw-text-opacity)); -} - -.text-danaherblue-900 { - --tw-text-opacity: 1; - color: rgb(6 28 68 / var(--tw-text-opacity)); -} - -.text-danahergray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.text-danahergray-700 { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.text-danahergray-900 { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.text-danahergreyblue-500 { - --tw-text-opacity: 1; - color: rgb(3 93 103 / var(--tw-text-opacity)); -} - -.text-danaherlightblue-500 { - --tw-text-opacity: 1; - color: rgb(59 199 229 / var(--tw-text-opacity)); -} - -.text-danaherpurple-500 { - --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); -} - -.text-danaherpurple-800 { - --tw-text-opacity: 1; - color: rgb(64 0 165 / var(--tw-text-opacity)); -} - -.text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -.text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.text-gray-600 { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.text-gray-700 { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.text-gray-900 { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.text-indigo-200 { - --tw-text-opacity: 1; - color: rgb(199 210 254 / var(--tw-text-opacity)); -} - -.text-indigo-300 { - --tw-text-opacity: 1; - color: rgb(165 180 252 / var(--tw-text-opacity)); -} - -.text-lightblue-500 { - --tw-text-opacity: 1; - color: rgb(59 199 229 / var(--tw-text-opacity)); -} - -.text-purple-200 { - --tw-text-opacity: 1; - color: rgb(125 86 164 / var(--tw-text-opacity)); -} - -.text-red-600 { - --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); -} - -.text-red-800 { - --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity)); -} - -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.underline { - text-decoration-line: underline; -} - -.\!no-underline { - text-decoration-line: none !important; -} - -.decoration-\[\#7523FF\] { - text-decoration-color: #7523FF; -} - -.decoration-\[3px\] { - text-decoration-thickness: 3px; -} - -.opacity-0 { - opacity: 0; -} - -.opacity-50 { - opacity: 0.5; -} - -.opacity-75 { - opacity: 0.75; -} - -.shadow { - --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-md { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-none { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-xl { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.outline-none { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.outline { - outline-style: solid; -} - -.ring-0 { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.ring-offset-0 { - --tw-ring-offset-width: 0px; -} - -.blur { - --tw-blur: blur(8px); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -.brightness-0 { - --tw-brightness: brightness(0); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -.invert { - --tw-invert: invert(100%); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -.filter { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -.backdrop-brightness-50 { - --tw-backdrop-brightness: brightness(.5); - -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); -} - -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-transform { - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.duration-300 { - transition-duration: 300ms; -} - -.duration-500 { - transition-duration: 500ms; -} - -.duration-700 { - transition-duration: 700ms; -} - -.ease-in-out { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -.ease-out { - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); -} - -main .section.top-border { - margin: auto; - margin-top: 2.5rem; - max-width: 80rem; - border-top-width: 1px; - border-style: solid; - --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); -} - -.off-screen { - visibility: hidden; - position: absolute; - left: 0px; - right: 0px; - opacity: 0; -} - -@media (min-width: 768px) { - .md\:btn-lg { - padding-top: 0.625rem; - padding-bottom: 0.625rem; - font-size: 1.125rem; - line-height: 1.75rem; - } -} - -.focus-within\:ring:focus-within { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.hover\:scale-105:hover { - --tw-scale-x: 1.05; - --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:scale-95:hover { - --tw-scale-x: .95; - --tw-scale-y: .95; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:scale-\[\.99\]:hover { - --tw-scale-x: .99; - --tw-scale-y: .99; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:border-t-2:hover { - border-top-width: 2px; -} - -.hover\:border-gray-300:hover { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - -.hover\:bg-\[\#7523FF\]:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); -} - -.hover\:bg-danahergray-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - -.hover\:bg-danaherlightblue-50:hover { - --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); -} - -.hover\:bg-danaherpurple-25:hover { - --tw-bg-opacity: 1; - background-color: rgb(245 239 255 / var(--tw-bg-opacity)); -} - -.hover\:bg-danaherpurple-50:hover { - --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); -} - -.hover\:bg-danaherpurple-500:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); -} - -.hover\:bg-danaherpurple-800:hover { - --tw-bg-opacity: 1; - background-color: rgb(64 0 165 / var(--tw-bg-opacity)); -} - -.hover\:bg-gray-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - -.hover\:bg-gray-200\/30:hover { - background-color: rgb(229 231 235 / 0.3); -} - -.hover\:bg-purple-200:hover { - --tw-bg-opacity: 1; - background-color: rgb(125 86 164 / var(--tw-bg-opacity)); -} - -.hover\:bg-transparent:hover { - background-color: transparent; -} - -.hover\:fill-cyan-600:hover { - fill: #0891b2; -} - -.hover\:fill-danaherpurple-800:hover { - fill: #4000A5; -} - -.hover\:font-bold:hover { - font-weight: 700; -} - -.hover\:font-medium:hover { - font-weight: 500; -} - -.hover\:text-black:hover { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); -} - -.hover\:text-cyan-600:hover { - --tw-text-opacity: 1; - color: rgb(8 145 178 / var(--tw-text-opacity)); -} - -.hover\:text-danaherblue-500:hover { - --tw-text-opacity: 1; - color: rgb(0 74 89 / var(--tw-text-opacity)); -} - -.hover\:text-danaherpurple-800:hover { - --tw-text-opacity: 1; - color: rgb(64 0 165 / var(--tw-text-opacity)); -} - -.hover\:text-gray-500:hover { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.hover\:text-gray-700:hover { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.hover\:text-white:hover { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.hover\:underline:hover { - text-decoration-line: underline; -} - -.hover\:shadow-lg:hover { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.hover\:shadow-sm:hover { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.focus\:border-gray-300:focus { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.focus\:ring-gray-300:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); -} - -.group:hover .group-hover\:-translate-x-0 { - --tw-translate-x: -0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .group-hover\:-translate-x-0\.5 { - --tw-translate-x: -0.125rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .group-hover\:translate-x-0 { - --tw-translate-x: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .group-hover\:translate-x-0\.5 { - --tw-translate-x: 0.125rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .group-hover\:translate-x-1 { - --tw-translate-x: 0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .group-hover\:rotate-180 { - --tw-rotate: 180deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .group-hover\:bg-danahergray-200 { - --tw-bg-opacity: 1; - background-color: rgb(97 97 97 / var(--tw-bg-opacity)); -} - -.group:hover .group-hover\:bg-danaherpurple-500 { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); -} - -.group:hover .group-hover\:stroke-white { - stroke: #fff; -} - -.group:hover .group-hover\:font-bold { - font-weight: 700; -} - -.group:hover .group-hover\:font-semibold { - font-weight: 700; -} - -.group:hover .group-hover\:tracking-wide { - letter-spacing: 0.025em; -} - -.group:hover .group-hover\:text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.group:hover .group-hover\:underline { - text-decoration-line: underline; -} - -.peer:checked ~ .peer-checked\:grid-rows-\[1fr\] { - grid-template-rows: 1fr; -} - -.peer:checked ~ .peer-checked\:border-0 { - border-width: 0px; -} - -.peer:checked ~ .peer-checked\:bg-danaherpurple-500 { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); -} - -.peer:checked ~ .peer-checked\:py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.peer:checked ~ .peer-checked\:opacity-100 { - opacity: 1; -} - -.peer:checked ~ .peer-checked\:shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.peer:hover ~ .peer-hover\:border-0 { - border-width: 0px; -} - -.peer:hover ~ .peer-hover\:bg-danaherpurple-500 { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); -} - -.peer ~ .peer-\[\&_span\.minus\]\:rotate-90 span.minus { - --tw-rotate: 90deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.peer ~ .peer-\[\&_span\.minus\]\:opacity-0 span.minus { - opacity: 0; -} - -.peer ~ .peer-\[\&_span\.plus\]\:opacity-100 span.plus { - opacity: 1; -} - -@media (min-width: 640px) { - .sm\:mt-4 { - margin-top: 1rem; - } - - .sm\:flex { - display: flex; - } - - .sm\:flex-auto { - flex: 1 1 auto; - } - - .sm\:grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .sm\:flex-row { - flex-direction: row; - } - - .sm\:items-center { - align-items: center; - } - - .sm\:px-0 { - padding-left: 0px; - padding-right: 0px; - } - - .sm\:px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; - } - - .sm\:pt-16 { - padding-top: 4rem; - } - - .sm\:pt-8 { - padding-top: 2rem; - } - - .sm\:text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; - } - - .sm\:text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; - } - - .sm\:text-5xl { - font-size: 3rem; - line-height: 1; - } - - .sm\:text-sm { - font-size: 0.875rem; - line-height: 1.25rem; - } -} - -@media (min-width: 768px) { - .md\:absolute { - position: absolute; - } - - .md\:bottom-16 { - bottom: 4rem; - } - - .md\:order-last { - order: 9999; - } - - .md\:order-none { - order: 0; - } - - .md\:col-span-2 { - grid-column: span 2 / span 2; - } - - .md\:mx-5 { - margin-left: 1.25rem; - margin-right: 1.25rem; - } - - .md\:my-4 { - margin-top: 1rem; - margin-bottom: 1rem; - } - - .md\:mb-0 { - margin-bottom: 0px; - } - - .md\:mb-16 { - margin-bottom: 4rem; - } - - .md\:ml-14 { - margin-left: 3.5rem; - } - - .md\:mr-4 { - margin-right: 1rem; - } - - .md\:mt-12 { - margin-top: 3rem; - } - - .md\:mt-16 { - margin-top: 4rem; - } - - .md\:mt-4 { - margin-top: 1rem; - } - - .md\:line-clamp-3 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - } - - .md\:block { - display: block; - } - - .md\:flex { - display: flex; - } - - .md\:inline-flex { - display: inline-flex; - } - - .md\:hidden { - display: none; - } - - .md\:h-20 { - height: 5rem; - } - - .md\:h-36 { - height: 9rem; - } - - .md\:h-6 { - height: 1.5rem; - } - - .md\:h-\[35rem\] { - height: 35rem; - } - - .md\:h-full { - height: 100%; - } - - .md\:min-h-\[37rem\] { - min-height: 37rem; - } - - .md\:w-1\/3 { - width: 33.333333%; - } - - .md\:w-1\/4 { - width: 25%; - } - - .md\:w-10 { - width: 2.5rem; - } - - .md\:w-2\/4 { - width: 50%; - } - - .md\:w-2\/5 { - width: 40%; - } - - .md\:w-20 { - width: 5rem; - } - - .md\:w-3\/4 { - width: 75%; - } - - .md\:w-3\/5 { - width: 60%; - } - - .md\:w-52 { - width: 13rem; - } - - .md\:w-6 { - width: 1.5rem; - } - - .md\:w-full { - width: 100%; - } - - .md\:min-w-\[20\%\] { - min-width: 20%; - } - - .md\:auto-cols-\[calc\(\(100\%\/2\)-20px\)\] { - grid-auto-columns: calc((100% / 2) - 20px); - } - - .md\:auto-cols-\[calc\(100\%\/2\)\] { - grid-auto-columns: calc(100% / 2); - } - - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .md\:flex-row { - flex-direction: row; - } - - .md\:flex-wrap { - flex-wrap: wrap; - } - - .md\:items-center { - align-items: center; - } - - .md\:justify-between { - justify-content: space-between; - } - - .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0px * var(--tw-space-y-reverse)); - } - - .md\:break-normal { - overflow-wrap: normal; - word-break: normal; - } - - .md\:p-0 { - padding: 0px; - } - - .md\:p-6 { - padding: 1.5rem; - } - - .md\:px-12 { - padding-left: 3rem; - padding-right: 3rem; - } - - .md\:px-4 { - padding-left: 1rem; - padding-right: 1rem; - } - - .md\:px-8 { - padding-left: 2rem; - padding-right: 2rem; - } - - .md\:py-0 { - padding-top: 0px; - padding-bottom: 0px; - } - - .md\:py-16 { - padding-top: 4rem; - padding-bottom: 4rem; - } - - .md\:py-4 { - padding-top: 1rem; - padding-bottom: 1rem; - } - - .md\:pb-10 { - padding-bottom: 2.5rem; - } - - .md\:pb-2 { - padding-bottom: 0.5rem; - } - - .md\:pb-24 { - padding-bottom: 6rem; - } - - .md\:text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; - } - - .md\:leading-7 { - line-height: 1.75rem; - } - - .md\:leading-\[44px\] { - line-height: 44px; - } - - .md\:tracking-tight { - letter-spacing: -0.025em; - } -} - -@media (min-width: 1024px) { - .lg\:absolute { - position: absolute; - } - - .lg\:inset-y-0 { - top: 0px; - bottom: 0px; - } - - .lg\:right-0 { - right: 0px; - } - - .lg\:col-span-1 { - grid-column: span 1 / span 1; - } - - .lg\:col-span-10 { - grid-column: span 10 / span 10; - } - - .lg\:col-span-3 { - grid-column: span 3 / span 3; - } - - .lg\:col-span-4 { - grid-column: span 4 / span 4; - } - - .lg\:col-span-8 { - grid-column: span 8 / span 8; - } - - .lg\:col-start-1 { - grid-column-start: 1; - } - - .lg\:col-start-5 { - grid-column-start: 5; - } - - .lg\:row-span-6 { - grid-row: span 6 / span 6; - } - - .lg\:m-auto { - margin: auto; - } - - .lg\:my-4 { - margin-top: 1rem; - margin-bottom: 1rem; - } - - .lg\:mb-0 { - margin-bottom: 0px; - } - - .lg\:mb-8 { - margin-bottom: 2rem; - } - - .lg\:mt-0 { - margin-top: 0px; - } - - .lg\:block { - display: block; - } - - .lg\:inline { - display: inline; - } - - .lg\:flex { - display: flex; - } - - .lg\:inline-flex { - display: inline-flex; - } - - .lg\:grid { - display: grid; - } - - .lg\:hidden { - display: none; - } - - .lg\:h-20 { - height: 5rem; - } - - .lg\:\!w-\[47\%\] { - width: 47% !important; - } - - .lg\:\!w-\[6\%\] { - width: 6% !important; - } - - .lg\:w-1\/2 { - width: 50%; - } - - .lg\:w-1\/3 { - width: 33.333333%; - } - - .lg\:w-2\/3 { - width: 66.666667%; - } - - .lg\:w-20 { - width: 5rem; - } - - .lg\:w-44 { - width: 11rem; - } - - .lg\:w-55 { - width: 14rem; - } - - .lg\:w-recent-articles { - width: 23rem; - } - - .lg\:max-w-2xl { - max-width: 42rem; - } - - .lg\:max-w-4xl { - max-width: 56rem; - } - - .lg\:max-w-7xl { - max-width: 80rem; - } - - .lg\:flex-shrink-0 { - flex-shrink: 0; - } - - .lg\:auto-cols-\[calc\(\(100\%\/3\)-20px\)\] { - grid-auto-columns: calc((100% / 3) - 20px); - } - - .lg\:grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .lg\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .lg\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .lg\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .lg\:grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .lg\:grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } - - .lg\:grid-rows-2 { - grid-template-rows: repeat(2, minmax(0, 1fr)); - } - - @media (min-width: 1024px) { - .lg\:lg\:grid-rows-1 { - grid-template-rows: repeat(1, minmax(0, 1fr)); - } - - .lg\:lg\:grid-rows-2 { - grid-template-rows: repeat(2, minmax(0, 1fr)); - } - } - - .lg\:flex-row { - flex-direction: row; - } - - .lg\:flex-row-reverse { - flex-direction: row-reverse; - } - - .lg\:items-center { - align-items: center; - } - - .lg\:gap-8 { - gap: 2rem; - } - - .lg\:px-0 { - padding-left: 0px; - padding-right: 0px; - } - - .lg\:px-10 { - padding-left: 2.5rem; - padding-right: 2.5rem; - } - - .lg\:px-4 { - padding-left: 1rem; - padding-right: 1rem; - } - - .lg\:px-7 { - padding-left: 1.75rem; - padding-right: 1.75rem; - } - - .lg\:px-8 { - padding-left: 2rem; - padding-right: 2rem; - } - - .lg\:py-0 { - padding-top: 0px; - padding-bottom: 0px; - } - - .lg\:py-8 { - padding-top: 2rem; - padding-bottom: 2rem; - } - - .lg\:\!pb-4 { - padding-bottom: 1rem !important; - } - - .lg\:pb-1 { - padding-bottom: 0.25rem; - } - - .lg\:pb-80 { - padding-bottom: 20rem; - } - - .lg\:pl-2 { - padding-left: 0.5rem; - } - - .lg\:pl-44 { - padding-left: 11rem; - } - - .lg\:pr-0 { - padding-right: 0px; - } - - .lg\:pt-14 { - padding-top: 3.5rem; - } - - .lg\:pt-4 { - padding-top: 1rem; - } - - .lg\:text-center { - text-align: center; - } - - .lg\:text-\[11rem\] { - font-size: 11rem; - } - - .lg\:text-\[40px\] { - font-size: 40px; - } -} - -@media (min-width: 1280px) { - .xl\:col-start-1 { - grid-column-start: 1; - } - - .xl\:w-1\/4 { + .undefined :is(.xl\:w-1\/4) { width: 25%; } - .xl\:w-3\/4 { + .undefined :is(.xl\:w-3\/4) { width: 75%; } - - .xl\:auto-cols-\[calc\(\(100\%\/4\)-20px\)\] { - grid-auto-columns: calc((100% / 4) - 20px); - } - - .xl\:grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .xl\:pr-10 { - padding-right: 2.5rem; - } -} - -@media print { - .print\:hidden { - display: none; - } -} - -.\[\&\:not\(\:first-child\)\:even\]\:opacity-40:not(:first-child):even { - opacity: 0.4; -} - -.\[\&\:not\(\:first-child\)\:odd\]\:opacity-20:not(:first-child):odd { - opacity: 0.2; -} - -.\[\&\:not\(\:first-child\)\]\:opacity-20:not(:first-child) { - opacity: 0.2; -} - -.\[\&\:not\(\:first-child\)\]\:opacity-40:not(:first-child) { - opacity: 0.4; -} - -.\[\&\>a\]\:w-full>a { - width: 100%; -} - -.\[\&\>li\.active\]\:bg-danaherpurple-50>li.active { - --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); -} - -.\[\&\>li\.active\]\:font-bold>li.active { - font-weight: 700; -} - -.peer:checked ~ .peer-checked\:\[\&_\*\]\:text-white * { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.peer:hover ~ .peer-hover\:\[\&_\*\]\:text-white * { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.\[\&_\.page-jump-menu-wrapper\]\:mx-auto .page-jump-menu-wrapper { - margin-left: auto; - margin-right: auto; -} - -.\[\&_\.page-jump-menu-wrapper\]\:flex .page-jump-menu-wrapper { - display: flex; -} - -@media (min-width: 768px) { - .\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper { - max-width: 80rem; - } - - .\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.\[\&_\.page-tabs-wrapper\]\:mx-auto .page-tabs-wrapper { - margin-left: auto; - margin-right: auto; -} - -.\[\&_\.page-tabs-wrapper\]\:flex .page-tabs-wrapper { - display: flex; -} - -@media (min-width: 768px) { - .\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper { - max-width: 80rem; - } - - .\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down { - display: none; -} - -.peer:checked ~ .peer-checked\:\[\&_span\.minus\]\:rotate-180 span.minus { - --tw-rotate: 180deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.peer:checked ~ .peer-checked\:\[\&_span\.minus\]\:opacity-100 span.minus { - opacity: 1; -} - -.peer:checked ~ .peer-checked\:\[\&_span\.plus\]\:rotate-45 span.plus { - --tw-rotate: 45deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.peer:checked ~ .peer-checked\:\[\&_span\.plus\]\:opacity-0 span.plus { - opacity: 0; -} - -.\[\&_svg\>use\]\:stroke-black svg>use { - stroke: #000; -} - -.\[\&_svg\>use\]\:stroke-danaherpurple-500 svg>use { - stroke: #7523FF; -} - -.\[\&_svg\>use\]\:stroke-gray-500\/70 svg>use { - stroke: rgb(107 114 128 / 0.7); -} - -.\[\&_svg\>use\]\:stroke-2 svg>use { - stroke-width: 2; -} - -.\[\&_svg\>use\]\:hover\:stroke-black:hover svg>use { - stroke: #000; -} - -.\[\&_svg\>use\]\:hover\:stroke-danaherpurple-800:hover svg>use { - stroke: #4000A5; -} - -.\[\&_svg\]\:h-6 svg { - height: 1.5rem; -} - -.\[\&_svg\]\:w-6 svg { - width: 1.5rem; -} - -.\[\&_svg\]\:fill-white svg { - fill: #fff; -} - -.\[\&_svg\]\:stroke-danaherpurple-500 svg { - stroke: #7523FF; -} - -.\[\&_svg\]\:stroke-white svg { - stroke: #fff; -} - -.\[\&_svg\]\:stroke-1 svg { - stroke-width: 1; -} - -.\[\&_svg\]\:duration-300 svg { - transition-duration: 300ms; -} - -.group:hover .\[\&_svg\]\:group-hover\:translate-y-1 svg { - --tw-translate-y: 0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .\[\&_svg\]\:group-hover\:stroke-white svg { - stroke: #fff; -} - -.\[\&_ul\>li\>a\]\:h-40 ul>li>a { - height: 10rem; -} - -.\[\&_ul\>li\>a\]\:h-full ul>li>a { - height: 100%; -} - -.\[\&_ul\>li\>a\]\:flex-row ul>li>a { - flex-direction: row; -} - -.\[\&_ul\>li\>a\]\:flex-col ul>li>a { - flex-direction: column; -} - -.\[\&_ul\>li\>a\]\:items-center ul>li>a { - align-items: center; -} - -.\[\&_ul\>li\>a\]\:justify-center ul>li>a { - justify-content: center; -} - -.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden]) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } diff --git a/tailwind.config.js b/tailwind.config.js index f8c85aacd..6f1c6a0a0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,7 +2,8 @@ const plugin = require('tailwindcss/plugin') module.exports = { - content: ['./blocks/**/*.js', './scripts/*.js', '!./scripts/at-lsig.js', './fragments/*.html', './404.html'], // https://tailwindcss.com/docs/content-configuration#class-detection-in-depth + important: process.env.IMPORTANT_WRAPPER || '.default-wrapper', + content: ['./scripts/*.js', '!./scripts/at-lsig.js', './fragments/*.html', './404.html'], // https://tailwindcss.com/docs/content-configuration#class-detection-in-depth darkMode: 'media', // or 'media' or 'class' plugins: [ plugin(function ({ addComponents, theme }) { From 167cae219fe48f47f04a1c60964c5593de853bf6 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 30 Apr 2024 15:59:52 +0530 Subject: [PATCH 09/88] Fixed lint issues --- build-css.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/build-css.js b/build-css.js index 268fc5bd9..b32ee8738 100644 --- a/build-css.js +++ b/build-css.js @@ -100,7 +100,7 @@ const fileMappings = [ content: './blocks/mini-teasers/mini-teasers.js', output: './blocks/mini-teasers/mini-teasers.css', wrapper: 'mini-teasers-wrapper', - }, + }, { content: './blocks/page-jump-menu/page-jump-menu.js', output: './blocks/page-jump-menu/page-jump-menu.css', @@ -241,7 +241,9 @@ const fileMappings = [ const watch = process.argv[2]; // Loop through each file mapping and run Tailwind CSS CLI -fileMappings.forEach(({ content, input, output, wrapper }) => { +fileMappings.forEach(({ + content, input, output, wrapper, +}) => { process.env.IMPORTANT_WRAPPER = `.${wrapper}` || '.default-wrapper'; const command = `npx tailwindcss ${input ? `-i ${input}` : ''} ${content ? `--content ${content}` : ''} -o ${output} ${watch ? '--watch' : ''}`; exec(command, (error, stdout, stderr) => { From 5309fb31d53d1c37937ba788a4d820dcc42fd80e Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 30 Apr 2024 19:33:02 +0530 Subject: [PATCH 10/88] Fixed footer issue --- blocks/accordion/accordion.css | 4 ++++ blocks/articles-list/articles-list.css | 4 ++++ blocks/banner/banner.css | 4 ++++ blocks/blog-hero/blog-hero.css | 4 ++++ blocks/breadcrumb/breadcrumb.css | 4 ++++ blocks/call-to-action/call-to-action.css | 4 ++++ blocks/card-list/card-list.css | 4 ++++ blocks/cards/cards.css | 4 ++++ blocks/carousel/carousel.css | 4 ++++ blocks/category-family/category-family.css | 4 ++++ blocks/download/download.css | 4 ++++ blocks/embed/embed.css | 4 ++++ blocks/footer/footer.css | 4 ++++ blocks/footer/footer.js | 2 +- blocks/header/header.css | 4 ++++ blocks/hero/hero.css | 4 ++++ blocks/logo-clouds/logo-clouds.css | 4 ++++ blocks/marketo-form/marketo-form.css | 4 ++++ blocks/mini-teasers/mini-teasers.css | 4 ++++ blocks/page-jump-menu/page-jump-menu.css | 4 ++++ blocks/popular-articles/popular-articles.css | 4 ++++ blocks/product-card/product-card.css | 4 ++++ blocks/product-category-list/product-category-list.css | 4 ++++ blocks/product-citations/product-citations.css | 4 ++++ blocks/product-menu/product-menu.css | 4 ++++ blocks/product-overview/product-overview.css | 4 ++++ blocks/product-parts/product-parts.css | 4 ++++ blocks/product-recommendations/product-recommendations.css | 4 ++++ blocks/product-specifications/product-specifications.css | 4 ++++ blocks/recent-articles/recent-articles.css | 4 ++++ blocks/related-articles/related-articles.css | 4 ++++ blocks/side-nav/side-nav.css | 4 ++++ blocks/social-feeds/social-feeds.css | 4 ++++ blocks/social-media/social-media.css | 4 ++++ blocks/stats/stats.css | 4 ++++ blocks/table/table.css | 4 ++++ blocks/tags-list/tags-list.css | 4 ++++ blocks/takeway/takeway.css | 4 ++++ blocks/testimonial/testimonial.css | 4 ++++ blocks/topic-list/topic-list.css | 4 ++++ blocks/workflow-carousel/workflow-carousel.css | 4 ++++ blocks/workflow-tabs/workflow-tabs.css | 4 ++++ styles/styles.css | 4 ++++ tailwind.config.js | 3 +++ 44 files changed, 172 insertions(+), 1 deletion(-) diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index 52e822088..dfa713595 100644 --- a/blocks/accordion/accordion.css +++ b/blocks/accordion/accordion.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .accordion-wrapper :is(.absolute) { position: absolute; } diff --git a/blocks/articles-list/articles-list.css b/blocks/articles-list/articles-list.css index c29917b66..24957a953 100644 --- a/blocks/articles-list/articles-list.css +++ b/blocks/articles-list/articles-list.css @@ -568,6 +568,10 @@ video { } } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .articles-list-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css index 318f194f0..b521c6bd0 100644 --- a/blocks/banner/banner.css +++ b/blocks/banner/banner.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .banner-wrapper :is(.relative) { position: relative; } diff --git a/blocks/blog-hero/blog-hero.css b/blocks/blog-hero/blog-hero.css index d5485cbbc..bced2af56 100644 --- a/blocks/blog-hero/blog-hero.css +++ b/blocks/blog-hero/blog-hero.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .blog-hero-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } diff --git a/blocks/breadcrumb/breadcrumb.css b/blocks/breadcrumb/breadcrumb.css index 2558607e9..47fc8f9ba 100644 --- a/blocks/breadcrumb/breadcrumb.css +++ b/blocks/breadcrumb/breadcrumb.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .breadcrumb-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/blocks/call-to-action/call-to-action.css b/blocks/call-to-action/call-to-action.css index 4a0cd37d6..9ce980727 100644 --- a/blocks/call-to-action/call-to-action.css +++ b/blocks/call-to-action/call-to-action.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index 686e95111..fa8819fa1 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -568,6 +568,10 @@ video { } } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .card-list-wrapper :is(.relative) { position: relative; } diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index d3aa88cfc..4ac3a3dcb 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .cards-wrapper :is(.relative) { position: relative; } diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index 3ae92e972..9061413cd 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); diff --git a/blocks/category-family/category-family.css b/blocks/category-family/category-family.css index c9306a220..a2e27d422 100644 --- a/blocks/category-family/category-family.css +++ b/blocks/category-family/category-family.css @@ -568,6 +568,10 @@ video { } } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .category-family-wrapper :is(.pointer-events-none) { pointer-events: none; } diff --git a/blocks/download/download.css b/blocks/download/download.css index a0c03787f..08e166eda 100644 --- a/blocks/download/download.css +++ b/blocks/download/download.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .download-wrapper :is(.mb-3) { margin-bottom: 0.75rem; } diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css index 9f4f30bba..e9d6044b4 100644 --- a/blocks/embed/embed.css +++ b/blocks/embed/embed.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .embed-wrapper :is(.absolute) { position: absolute; } diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index cf7924e28..e2703038c 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 529cb19c0..6f34caa6b 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -27,7 +27,7 @@ function generateStickyFooter(stickyFooter) { accessibeBtn.addEventListener('click', loadAccessibe); stickyFooterClone.append(accessibeBtn); decorateIcons(stickyFooterClone); - document.body.appendChild(stickyFooterClone); + document.querySelector('footer').appendChild(stickyFooterClone); } /** diff --git a/blocks/header/header.css b/blocks/header/header.css index 3b1a35b40..f8c570fe0 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .header-wrapper :is(.fixed) { position: fixed; } diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 682f64b29..7017ec331 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .hero-wrapper :is(.fixed) { position: fixed; } diff --git a/blocks/logo-clouds/logo-clouds.css b/blocks/logo-clouds/logo-clouds.css index 0ffd77bc5..fd9fff9bd 100644 --- a/blocks/logo-clouds/logo-clouds.css +++ b/blocks/logo-clouds/logo-clouds.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .logo-clouds-wrapper :is(.relative) { position: relative; } diff --git a/blocks/marketo-form/marketo-form.css b/blocks/marketo-form/marketo-form.css index eaebbd91c..28cf54252 100644 --- a/blocks/marketo-form/marketo-form.css +++ b/blocks/marketo-form/marketo-form.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .marketo-form-wrapper :is(.relative) { position: relative; } diff --git a/blocks/mini-teasers/mini-teasers.css b/blocks/mini-teasers/mini-teasers.css index 29e8c7fe1..b50a4b405 100644 --- a/blocks/mini-teasers/mini-teasers.css +++ b/blocks/mini-teasers/mini-teasers.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .mini-teasers-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/blocks/page-jump-menu/page-jump-menu.css b/blocks/page-jump-menu/page-jump-menu.css index 20dc09022..2d108c994 100644 --- a/blocks/page-jump-menu/page-jump-menu.css +++ b/blocks/page-jump-menu/page-jump-menu.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .page-jump-menu-wrapper :is(.fixed) { position: fixed; } diff --git a/blocks/popular-articles/popular-articles.css b/blocks/popular-articles/popular-articles.css index fdf55a346..6de8102ce 100644 --- a/blocks/popular-articles/popular-articles.css +++ b/blocks/popular-articles/popular-articles.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .popular-articles-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); diff --git a/blocks/product-card/product-card.css b/blocks/product-card/product-card.css index 304082b4b..66dac3ea9 100644 --- a/blocks/product-card/product-card.css +++ b/blocks/product-card/product-card.css @@ -568,6 +568,10 @@ video { } } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .product-card-wrapper :is(.relative) { position: relative; } diff --git a/blocks/product-category-list/product-category-list.css b/blocks/product-category-list/product-category-list.css index 084e52637..e8d3547ee 100644 --- a/blocks/product-category-list/product-category-list.css +++ b/blocks/product-category-list/product-category-list.css @@ -568,6 +568,10 @@ video { } } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .product-category-list-wrapper :is(.relative) { position: relative; } diff --git a/blocks/product-citations/product-citations.css b/blocks/product-citations/product-citations.css index 1c97d4786..cc216a7ed 100644 --- a/blocks/product-citations/product-citations.css +++ b/blocks/product-citations/product-citations.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .product-citations-wrapper :is(.float-none) { float: none; } diff --git a/blocks/product-menu/product-menu.css b/blocks/product-menu/product-menu.css index faf14b45f..6c35ab8a5 100644 --- a/blocks/product-menu/product-menu.css +++ b/blocks/product-menu/product-menu.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .product-menu-wrapper :is(.block) { display: block; } diff --git a/blocks/product-overview/product-overview.css b/blocks/product-overview/product-overview.css index 591dcadd3..2cebee286 100644 --- a/blocks/product-overview/product-overview.css +++ b/blocks/product-overview/product-overview.css @@ -555,6 +555,10 @@ video { background-color: #7523FF; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .product-overview-wrapper :is(.block) { display: block; } diff --git a/blocks/product-parts/product-parts.css b/blocks/product-parts/product-parts.css index 2b27a59dc..bb168a91b 100644 --- a/blocks/product-parts/product-parts.css +++ b/blocks/product-parts/product-parts.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .product-parts-wrapper :is(.col-span-2) { grid-column: span 2 / span 2; } diff --git a/blocks/product-recommendations/product-recommendations.css b/blocks/product-recommendations/product-recommendations.css index 695bd7263..c7fd3701e 100644 --- a/blocks/product-recommendations/product-recommendations.css +++ b/blocks/product-recommendations/product-recommendations.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } diff --git a/blocks/product-specifications/product-specifications.css b/blocks/product-specifications/product-specifications.css index 9422907cc..2c5121cfb 100644 --- a/blocks/product-specifications/product-specifications.css +++ b/blocks/product-specifications/product-specifications.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .product-specifications-wrapper :is(.my-auto) { margin-top: auto; margin-bottom: auto; diff --git a/blocks/recent-articles/recent-articles.css b/blocks/recent-articles/recent-articles.css index 7844e1145..901371d6c 100644 --- a/blocks/recent-articles/recent-articles.css +++ b/blocks/recent-articles/recent-articles.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .recent-articles-wrapper :is(.my-0) { margin-top: 0px; margin-bottom: 0px; diff --git a/blocks/related-articles/related-articles.css b/blocks/related-articles/related-articles.css index 940d75ffa..e519cda92 100644 --- a/blocks/related-articles/related-articles.css +++ b/blocks/related-articles/related-articles.css @@ -568,6 +568,10 @@ video { } } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .related-articles-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/blocks/side-nav/side-nav.css b/blocks/side-nav/side-nav.css index 788a7fe5b..d3c2bba7b 100644 --- a/blocks/side-nav/side-nav.css +++ b/blocks/side-nav/side-nav.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .side-nav-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/blocks/social-feeds/social-feeds.css b/blocks/social-feeds/social-feeds.css index 1f2239f3a..9a6d3f4d5 100644 --- a/blocks/social-feeds/social-feeds.css +++ b/blocks/social-feeds/social-feeds.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .social-feeds-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); diff --git a/blocks/social-media/social-media.css b/blocks/social-media/social-media.css index 3d3c717cc..11dfa64b3 100644 --- a/blocks/social-media/social-media.css +++ b/blocks/social-media/social-media.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .social-media-wrapper :is(.relative) { position: relative; } diff --git a/blocks/stats/stats.css b/blocks/stats/stats.css index ceabedd33..0726541b3 100644 --- a/blocks/stats/stats.css +++ b/blocks/stats/stats.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .stats-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/blocks/table/table.css b/blocks/table/table.css index 2d217d7af..0a95de568 100644 --- a/blocks/table/table.css +++ b/blocks/table/table.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .table-wrapper :is(.block) { display: block; } diff --git a/blocks/tags-list/tags-list.css b/blocks/tags-list/tags-list.css index 2c9f61d67..1f9ff5ff3 100644 --- a/blocks/tags-list/tags-list.css +++ b/blocks/tags-list/tags-list.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .tags-list-wrapper :is(.my-10) { margin-top: 2.5rem; margin-bottom: 2.5rem; diff --git a/blocks/takeway/takeway.css b/blocks/takeway/takeway.css index 5485b4b58..88809fafc 100644 --- a/blocks/takeway/takeway.css +++ b/blocks/takeway/takeway.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .takeway-wrapper :is(.mb-20) { margin-bottom: 5rem; } diff --git a/blocks/testimonial/testimonial.css b/blocks/testimonial/testimonial.css index 836b85c25..a9275c62b 100644 --- a/blocks/testimonial/testimonial.css +++ b/blocks/testimonial/testimonial.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .testimonial-wrapper :is(.absolute) { position: absolute; } diff --git a/blocks/topic-list/topic-list.css b/blocks/topic-list/topic-list.css index e6904f12a..1726140fc 100644 --- a/blocks/topic-list/topic-list.css +++ b/blocks/topic-list/topic-list.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); diff --git a/blocks/workflow-carousel/workflow-carousel.css b/blocks/workflow-carousel/workflow-carousel.css index 7906a2a48..8bce972ae 100644 --- a/blocks/workflow-carousel/workflow-carousel.css +++ b/blocks/workflow-carousel/workflow-carousel.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } diff --git a/blocks/workflow-tabs/workflow-tabs.css b/blocks/workflow-tabs/workflow-tabs.css index 3b5998d2b..312fb17a6 100644 --- a/blocks/workflow-tabs/workflow-tabs.css +++ b/blocks/workflow-tabs/workflow-tabs.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .workflow-tabs-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/styles/styles.css b/styles/styles.css index 9c0bd985f..f7fb20c3f 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -657,6 +657,10 @@ main .default-content-wrapper h2 { } } +bg-danaherpurple-50 { + background-color: #EADEFF; +} + .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); diff --git a/tailwind.config.js b/tailwind.config.js index 6f1c6a0a0..ead9566d1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -26,6 +26,9 @@ module.exports = { backgroundColor: theme('colors.danaherpurple.500'), }, }, + 'bg-danaherpurple-50': { + backgroundColor: theme('colors.danaherpurple.50'), + }, '.btn-outline-trending-brand': { color: theme('colors.danaherpurple.500'), backgroundColor: 'rgb(255 255 255)', From 703ed2e44985500aaa4836f8a86bcc8533109a92 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 30 Apr 2024 19:35:53 +0530 Subject: [PATCH 11/88] Fixed footer issue --- blocks/accordion/accordion.css | 4 ---- blocks/articles-list/articles-list.css | 4 ---- blocks/banner/banner.css | 4 ---- blocks/blog-hero/blog-hero.css | 4 ---- blocks/breadcrumb/breadcrumb.css | 4 ---- blocks/call-to-action/call-to-action.css | 4 ---- blocks/card-list/card-list.css | 2 +- blocks/cards/cards.css | 4 ---- blocks/carousel/carousel.css | 2 +- blocks/category-family/category-family.css | 4 ---- blocks/download/download.css | 4 ---- blocks/embed/embed.css | 4 ---- blocks/footer/footer.css | 2 +- blocks/header/header.css | 12 ++++++++---- blocks/hero/hero.css | 4 ---- blocks/logo-clouds/logo-clouds.css | 4 ---- blocks/marketo-form/marketo-form.css | 4 ---- blocks/mini-teasers/mini-teasers.css | 4 ---- blocks/page-jump-menu/page-jump-menu.css | 4 ---- blocks/popular-articles/popular-articles.css | 4 ---- blocks/product-card/product-card.css | 4 ---- .../product-category-list/product-category-list.css | 2 +- blocks/product-citations/product-citations.css | 4 ---- blocks/product-menu/product-menu.css | 4 ---- blocks/product-overview/product-overview.css | 4 ---- blocks/product-parts/product-parts.css | 4 ---- .../product-recommendations.css | 4 ---- .../product-specifications.css | 4 ---- blocks/recent-articles/recent-articles.css | 8 ++++---- blocks/related-articles/related-articles.css | 4 ---- blocks/side-nav/side-nav.css | 6 +++++- blocks/social-feeds/social-feeds.css | 4 ---- blocks/social-media/social-media.css | 4 ---- blocks/stats/stats.css | 4 ---- blocks/table/table.css | 4 ---- blocks/tags-list/tags-list.css | 4 ---- blocks/takeway/takeway.css | 2 +- blocks/testimonial/testimonial.css | 4 ---- blocks/topic-list/topic-list.css | 4 ---- blocks/workflow-carousel/workflow-carousel.css | 4 ---- blocks/workflow-tabs/workflow-tabs.css | 4 ---- styles/styles.css | 4 ---- tailwind.config.js | 2 +- 43 files changed, 23 insertions(+), 151 deletions(-) diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index dfa713595..52e822088 100644 --- a/blocks/accordion/accordion.css +++ b/blocks/accordion/accordion.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .accordion-wrapper :is(.absolute) { position: absolute; } diff --git a/blocks/articles-list/articles-list.css b/blocks/articles-list/articles-list.css index 24957a953..c29917b66 100644 --- a/blocks/articles-list/articles-list.css +++ b/blocks/articles-list/articles-list.css @@ -568,10 +568,6 @@ video { } } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .articles-list-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css index b521c6bd0..318f194f0 100644 --- a/blocks/banner/banner.css +++ b/blocks/banner/banner.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .banner-wrapper :is(.relative) { position: relative; } diff --git a/blocks/blog-hero/blog-hero.css b/blocks/blog-hero/blog-hero.css index bced2af56..d5485cbbc 100644 --- a/blocks/blog-hero/blog-hero.css +++ b/blocks/blog-hero/blog-hero.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .blog-hero-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } diff --git a/blocks/breadcrumb/breadcrumb.css b/blocks/breadcrumb/breadcrumb.css index 47fc8f9ba..2558607e9 100644 --- a/blocks/breadcrumb/breadcrumb.css +++ b/blocks/breadcrumb/breadcrumb.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .breadcrumb-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/blocks/call-to-action/call-to-action.css b/blocks/call-to-action/call-to-action.css index 9ce980727..4a0cd37d6 100644 --- a/blocks/call-to-action/call-to-action.css +++ b/blocks/call-to-action/call-to-action.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index fa8819fa1..aef7a8032 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -568,7 +568,7 @@ video { } } -bg-danaherpurple-50 { +.bg-danaherpurple-50 { background-color: #EADEFF; } diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 4ac3a3dcb..d3aa88cfc 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .cards-wrapper :is(.relative) { position: relative; } diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index 9061413cd..99fa39316 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -534,7 +534,7 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { +.bg-danaherpurple-50 { background-color: #EADEFF; } diff --git a/blocks/category-family/category-family.css b/blocks/category-family/category-family.css index a2e27d422..c9306a220 100644 --- a/blocks/category-family/category-family.css +++ b/blocks/category-family/category-family.css @@ -568,10 +568,6 @@ video { } } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .category-family-wrapper :is(.pointer-events-none) { pointer-events: none; } diff --git a/blocks/download/download.css b/blocks/download/download.css index 08e166eda..a0c03787f 100644 --- a/blocks/download/download.css +++ b/blocks/download/download.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .download-wrapper :is(.mb-3) { margin-bottom: 0.75rem; } diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css index e9d6044b4..9f4f30bba 100644 --- a/blocks/embed/embed.css +++ b/blocks/embed/embed.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .embed-wrapper :is(.absolute) { position: absolute; } diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index e2703038c..8d482337b 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -534,7 +534,7 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { +.bg-danaherpurple-50 { background-color: #EADEFF; } diff --git a/blocks/header/header.css b/blocks/header/header.css index f8c570fe0..d81a35912 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .header-wrapper :is(.fixed) { position: fixed; } @@ -1207,6 +1203,14 @@ bg-danaherpurple-50 { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } +.hover\:bg-danaherpurple-50:hover { + background-color: #EADEFF; +} + +.\[\&\>li\.active\]\:bg-danaherpurple-50>li.active { + background-color: #EADEFF; +} + .header-wrapper :is(.focus-within\:ring:focus-within) { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 7017ec331..682f64b29 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .hero-wrapper :is(.fixed) { position: fixed; } diff --git a/blocks/logo-clouds/logo-clouds.css b/blocks/logo-clouds/logo-clouds.css index fd9fff9bd..0ffd77bc5 100644 --- a/blocks/logo-clouds/logo-clouds.css +++ b/blocks/logo-clouds/logo-clouds.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .logo-clouds-wrapper :is(.relative) { position: relative; } diff --git a/blocks/marketo-form/marketo-form.css b/blocks/marketo-form/marketo-form.css index 28cf54252..eaebbd91c 100644 --- a/blocks/marketo-form/marketo-form.css +++ b/blocks/marketo-form/marketo-form.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .marketo-form-wrapper :is(.relative) { position: relative; } diff --git a/blocks/mini-teasers/mini-teasers.css b/blocks/mini-teasers/mini-teasers.css index b50a4b405..29e8c7fe1 100644 --- a/blocks/mini-teasers/mini-teasers.css +++ b/blocks/mini-teasers/mini-teasers.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .mini-teasers-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/blocks/page-jump-menu/page-jump-menu.css b/blocks/page-jump-menu/page-jump-menu.css index 2d108c994..20dc09022 100644 --- a/blocks/page-jump-menu/page-jump-menu.css +++ b/blocks/page-jump-menu/page-jump-menu.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .page-jump-menu-wrapper :is(.fixed) { position: fixed; } diff --git a/blocks/popular-articles/popular-articles.css b/blocks/popular-articles/popular-articles.css index 6de8102ce..fdf55a346 100644 --- a/blocks/popular-articles/popular-articles.css +++ b/blocks/popular-articles/popular-articles.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .popular-articles-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); diff --git a/blocks/product-card/product-card.css b/blocks/product-card/product-card.css index 66dac3ea9..304082b4b 100644 --- a/blocks/product-card/product-card.css +++ b/blocks/product-card/product-card.css @@ -568,10 +568,6 @@ video { } } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .product-card-wrapper :is(.relative) { position: relative; } diff --git a/blocks/product-category-list/product-category-list.css b/blocks/product-category-list/product-category-list.css index e8d3547ee..9f7626939 100644 --- a/blocks/product-category-list/product-category-list.css +++ b/blocks/product-category-list/product-category-list.css @@ -568,7 +568,7 @@ video { } } -bg-danaherpurple-50 { +.bg-danaherpurple-50 { background-color: #EADEFF; } diff --git a/blocks/product-citations/product-citations.css b/blocks/product-citations/product-citations.css index cc216a7ed..1c97d4786 100644 --- a/blocks/product-citations/product-citations.css +++ b/blocks/product-citations/product-citations.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .product-citations-wrapper :is(.float-none) { float: none; } diff --git a/blocks/product-menu/product-menu.css b/blocks/product-menu/product-menu.css index 6c35ab8a5..faf14b45f 100644 --- a/blocks/product-menu/product-menu.css +++ b/blocks/product-menu/product-menu.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .product-menu-wrapper :is(.block) { display: block; } diff --git a/blocks/product-overview/product-overview.css b/blocks/product-overview/product-overview.css index 2cebee286..591dcadd3 100644 --- a/blocks/product-overview/product-overview.css +++ b/blocks/product-overview/product-overview.css @@ -555,10 +555,6 @@ video { background-color: #7523FF; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .product-overview-wrapper :is(.block) { display: block; } diff --git a/blocks/product-parts/product-parts.css b/blocks/product-parts/product-parts.css index bb168a91b..2b27a59dc 100644 --- a/blocks/product-parts/product-parts.css +++ b/blocks/product-parts/product-parts.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .product-parts-wrapper :is(.col-span-2) { grid-column: span 2 / span 2; } diff --git a/blocks/product-recommendations/product-recommendations.css b/blocks/product-recommendations/product-recommendations.css index c7fd3701e..695bd7263 100644 --- a/blocks/product-recommendations/product-recommendations.css +++ b/blocks/product-recommendations/product-recommendations.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } diff --git a/blocks/product-specifications/product-specifications.css b/blocks/product-specifications/product-specifications.css index 2c5121cfb..9422907cc 100644 --- a/blocks/product-specifications/product-specifications.css +++ b/blocks/product-specifications/product-specifications.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .product-specifications-wrapper :is(.my-auto) { margin-top: auto; margin-bottom: auto; diff --git a/blocks/recent-articles/recent-articles.css b/blocks/recent-articles/recent-articles.css index 901371d6c..c161799d2 100644 --- a/blocks/recent-articles/recent-articles.css +++ b/blocks/recent-articles/recent-articles.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .recent-articles-wrapper :is(.my-0) { margin-top: 0px; margin-bottom: 0px; @@ -727,6 +723,10 @@ bg-danaherpurple-50 { transition-duration: 150ms; } +.hover\:bg-danaherpurple-50:hover { + background-color: #EADEFF; +} + .recent-articles-wrapper :is(.hover\:scale-\[\.99\]:hover) { --tw-scale-x: .99; --tw-scale-y: .99; diff --git a/blocks/related-articles/related-articles.css b/blocks/related-articles/related-articles.css index e519cda92..940d75ffa 100644 --- a/blocks/related-articles/related-articles.css +++ b/blocks/related-articles/related-articles.css @@ -568,10 +568,6 @@ video { } } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .related-articles-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/blocks/side-nav/side-nav.css b/blocks/side-nav/side-nav.css index d3c2bba7b..66f1b683f 100644 --- a/blocks/side-nav/side-nav.css +++ b/blocks/side-nav/side-nav.css @@ -534,7 +534,7 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { +.bg-danaherpurple-50 { background-color: #EADEFF; } @@ -665,6 +665,10 @@ bg-danaherpurple-50 { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.hover\:bg-danaherpurple-50:hover { + background-color: #EADEFF; +} + .side-nav-wrapper :is(.hover\:bg-danaherpurple-25:hover) { --tw-bg-opacity: 1; background-color: rgb(245 239 255 / var(--tw-bg-opacity)); diff --git a/blocks/social-feeds/social-feeds.css b/blocks/social-feeds/social-feeds.css index 9a6d3f4d5..1f2239f3a 100644 --- a/blocks/social-feeds/social-feeds.css +++ b/blocks/social-feeds/social-feeds.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .social-feeds-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); diff --git a/blocks/social-media/social-media.css b/blocks/social-media/social-media.css index 11dfa64b3..3d3c717cc 100644 --- a/blocks/social-media/social-media.css +++ b/blocks/social-media/social-media.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .social-media-wrapper :is(.relative) { position: relative; } diff --git a/blocks/stats/stats.css b/blocks/stats/stats.css index 0726541b3..ceabedd33 100644 --- a/blocks/stats/stats.css +++ b/blocks/stats/stats.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .stats-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/blocks/table/table.css b/blocks/table/table.css index 0a95de568..2d217d7af 100644 --- a/blocks/table/table.css +++ b/blocks/table/table.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .table-wrapper :is(.block) { display: block; } diff --git a/blocks/tags-list/tags-list.css b/blocks/tags-list/tags-list.css index 1f9ff5ff3..2c9f61d67 100644 --- a/blocks/tags-list/tags-list.css +++ b/blocks/tags-list/tags-list.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .tags-list-wrapper :is(.my-10) { margin-top: 2.5rem; margin-bottom: 2.5rem; diff --git a/blocks/takeway/takeway.css b/blocks/takeway/takeway.css index 88809fafc..48a3e0c6d 100644 --- a/blocks/takeway/takeway.css +++ b/blocks/takeway/takeway.css @@ -534,7 +534,7 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { +.bg-danaherpurple-50 { background-color: #EADEFF; } diff --git a/blocks/testimonial/testimonial.css b/blocks/testimonial/testimonial.css index a9275c62b..836b85c25 100644 --- a/blocks/testimonial/testimonial.css +++ b/blocks/testimonial/testimonial.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .testimonial-wrapper :is(.absolute) { position: absolute; } diff --git a/blocks/topic-list/topic-list.css b/blocks/topic-list/topic-list.css index 1726140fc..e6904f12a 100644 --- a/blocks/topic-list/topic-list.css +++ b/blocks/topic-list/topic-list.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); diff --git a/blocks/workflow-carousel/workflow-carousel.css b/blocks/workflow-carousel/workflow-carousel.css index 8bce972ae..7906a2a48 100644 --- a/blocks/workflow-carousel/workflow-carousel.css +++ b/blocks/workflow-carousel/workflow-carousel.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } diff --git a/blocks/workflow-tabs/workflow-tabs.css b/blocks/workflow-tabs/workflow-tabs.css index 312fb17a6..3b5998d2b 100644 --- a/blocks/workflow-tabs/workflow-tabs.css +++ b/blocks/workflow-tabs/workflow-tabs.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .workflow-tabs-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/styles/styles.css b/styles/styles.css index f7fb20c3f..9c0bd985f 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -657,10 +657,6 @@ main .default-content-wrapper h2 { } } -bg-danaherpurple-50 { - background-color: #EADEFF; -} - .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); diff --git a/tailwind.config.js b/tailwind.config.js index ead9566d1..ae25bc03f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -26,7 +26,7 @@ module.exports = { backgroundColor: theme('colors.danaherpurple.500'), }, }, - 'bg-danaherpurple-50': { + '.bg-danaherpurple-50': { backgroundColor: theme('colors.danaherpurple.50'), }, '.btn-outline-trending-brand': { From 5c5721bcb0eb74a32ec927a6e4bd29f8d7e8f912 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 30 Apr 2024 20:16:19 +0530 Subject: [PATCH 12/88] Fixed style issue for home page --- blocks/accordion/accordion.css | 8 ++++++++ blocks/card-list/card-list.css | 8 ++++++++ blocks/carousel/carousel.css | 8 ++++++++ styles/styles.css | 6 +++--- styles/tailwind.css | 2 +- tailwind.config.js | 14 ++++++++++++++ 6 files changed, 42 insertions(+), 4 deletions(-) diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index 52e822088..eca17bb1b 100644 --- a/blocks/accordion/accordion.css +++ b/blocks/accordion/accordion.css @@ -534,6 +534,14 @@ video { --tw-backdrop-sepia: ; } +.eyebrow { + color: #004A59; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.125em; + text-transform: uppercase; +} + .accordion-wrapper :is(.absolute) { position: absolute; } diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index aef7a8032..db4ab2d2c 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -572,6 +572,14 @@ video { background-color: #EADEFF; } +.eyebrow-sm { + color: #004A59; + font-size: 0.625rem; + font-weight: 700; + letter-spacing: 0.125em; + text-transform: uppercase; +} + .card-list-wrapper :is(.relative) { position: relative; } diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index 99fa39316..93ba024d2 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -538,6 +538,14 @@ video { background-color: #EADEFF; } +.eyebrow { + color: #004A59; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.125em; + text-transform: uppercase; +} + .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); diff --git a/styles/styles.css b/styles/styles.css index 9c0bd985f..62664bd92 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -484,9 +484,9 @@ h2 { } h3 { - font-size: 1.5rem; - font-weight: 500; - line-height: 2rem; + font-size: 1.5rem !important; + font-weight: 500 !important; + line-height: 2rem !important; } h4 { diff --git a/styles/tailwind.css b/styles/tailwind.css index 0f27b1274..717dff3a9 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -39,7 +39,7 @@ } h3 { - @apply leading-8 font-medium text-2xl; + @apply !leading-8 !font-medium !text-2xl; } h4 { diff --git a/tailwind.config.js b/tailwind.config.js index ae25bc03f..8591cc638 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -29,6 +29,20 @@ module.exports = { '.bg-danaherpurple-50': { backgroundColor: theme('colors.danaherpurple.50'), }, + '.eyebrow': { + color: theme('colors.danaherblue.500'), + fontSize: '0.75rem', + fontWeight: '700', + letterSpacing: '0.125em', + textTransform: 'uppercase', + }, + '.eyebrow-sm': { + color: theme('colors.danaherblue.500'), + fontSize: '0.625rem', + fontWeight: '700', + letterSpacing: '0.125em', + textTransform: 'uppercase', + }, '.btn-outline-trending-brand': { color: theme('colors.danaherpurple.500'), backgroundColor: 'rgb(255 255 255)', From 20d77f9a431fb96aabe0d6485b3cb7e124e75de2 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 30 Apr 2024 20:26:37 +0530 Subject: [PATCH 13/88] Fixed style for banner --- blocks/banner/banner.css | 47 ++++++++++++++++++++-------------------- blocks/banner/banner.js | 2 +- build-css.js | 2 +- 3 files changed, 25 insertions(+), 26 deletions(-) diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css index 318f194f0..a73293d96 100644 --- a/blocks/banner/banner.css +++ b/blocks/banner/banner.css @@ -534,92 +534,91 @@ video { --tw-backdrop-sepia: ; } -.banner-wrapper :is(.relative) { +.banner :is(.relative) { position: relative; } -.banner-wrapper :is(.mx-auto) { +.banner :is(.mx-auto) { margin-left: auto; margin-right: auto; } -.banner-wrapper :is(.block) { +.banner :is(.block) { display: block; } -.banner-wrapper :is(.flex) { +.banner :is(.flex) { display: flex; } -.banner-wrapper :is(.h-max) { +.banner :is(.h-max) { height: -moz-max-content; height: max-content; } -.banner-wrapper :is(.min-h-\[13rem\]) { +.banner :is(.min-h-\[13rem\]) { min-height: 13rem; } -.banner-wrapper :is(.w-full) { +.banner :is(.w-full) { width: 100%; } -.banner-wrapper :is(.max-w-7xl) { +.banner :is(.max-w-7xl) { max-width: 80rem; } -.banner-wrapper :is(.items-center) { +.banner :is(.items-center) { align-items: center; } -.banner-wrapper :is(.justify-start) { +.banner :is(.justify-start) { justify-content: flex-start; } -.banner-wrapper :is(.bg-danaherlightblue-50) { +.banner :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.banner-wrapper :is(.px-6) { - padding-left: 1.5rem; - padding-right: 1.5rem; +.banner :is(.p-4) { + padding: 1rem; } -.banner-wrapper :is(.py-4) { - padding-top: 1rem; - padding-bottom: 1rem; +.banner :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; } -.banner-wrapper :is(.text-4xl) { +.banner :is(.text-4xl) { font-size: 2.25rem; line-height: 2.5rem; } -.banner-wrapper :is(.text-lg) { +.banner :is(.text-lg) { font-size: 1.125rem; line-height: 1.75rem; } -.banner-wrapper :is(.font-extrabold) { +.banner :is(.font-extrabold) { font-weight: 800; } -.banner-wrapper :is(.font-normal) { +.banner :is(.font-normal) { font-weight: 200; } -.banner-wrapper :is(.tracking-tight) { +.banner :is(.tracking-tight) { letter-spacing: -0.025em; } -.banner-wrapper :is(.text-white) { +.banner :is(.text-white) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } @media (min-width: 768px) { - .banner-wrapper :is(.md\:w-3\/4) { + .banner :is(.md\:w-3\/4) { width: 75%; } } \ No newline at end of file diff --git a/blocks/banner/banner.js b/blocks/banner/banner.js index 4ae0c2cee..e6a289c17 100644 --- a/blocks/banner/banner.js +++ b/blocks/banner/banner.js @@ -5,7 +5,7 @@ export default function decorate(block) { content.parentNode.classList.add(...'px-6'.split(' ')); content.classList.add(...'relative min-h-[13rem] h-max w-full flex justify-start items-center'.split(' ')); const innerContent = content?.querySelector('div'); - innerContent.classList.add(...'relative max-w-7xl mx-auto w-full py-4 text-white'.split(' ')); + innerContent.classList.add(...'relative max-w-7xl mx-auto w-full p-4 text-white'.split(' ')); const contentH1 = innerContent?.querySelector('h1'); contentH1.classList.add(...'text-4xl font-extrabold tracking-tight text-white'.split(' ')); if (innerContent?.querySelector('h2')) { diff --git a/build-css.js b/build-css.js index b32ee8738..d8a1037b4 100644 --- a/build-css.js +++ b/build-css.js @@ -19,7 +19,7 @@ const fileMappings = [ { content: './blocks/banner/banner.js', output: './blocks/banner/banner.css', - wrapper: 'banner-wrapper', + wrapper: 'banner', }, { content: './blocks/blog-hero/blog-hero.js', From 6a595e36529efeeb6a361c08a6fd9a51086d3cbb Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 1 May 2024 13:19:05 +0530 Subject: [PATCH 14/88] Removed some unused css from style.css --- build-css.js | 2 +- styles/styles.css | 529 +++++++++++++++------------------------------ tailwind.config.js | 7 +- 3 files changed, 182 insertions(+), 356 deletions(-) diff --git a/build-css.js b/build-css.js index d8a1037b4..badf557ef 100644 --- a/build-css.js +++ b/build-css.js @@ -244,7 +244,7 @@ const watch = process.argv[2]; fileMappings.forEach(({ content, input, output, wrapper, }) => { - process.env.IMPORTANT_WRAPPER = `.${wrapper}` || '.default-wrapper'; + process.env.IMPORTANT_WRAPPER = `.${wrapper}`; const command = `npx tailwindcss ${input ? `-i ${input}` : ''} ${content ? `--content ${content}` : ''} -o ${output} ${watch ? '--watch' : ''}`; exec(command, (error, stdout, stderr) => { if (error) { diff --git a/styles/styles.css b/styles/styles.css index 62664bd92..405703adc 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -657,18 +657,6 @@ main .default-content-wrapper h2 { } } -.btn-outline-trending-brand { - color: #7523FF; - background-color: rgb(255 255 255); - border-color: #7523FF; - border-width: 2px; -} - -.btn-outline-trending-brand:hover { - color: rgb(255 255 255); - background-color: #7523FF; -} - .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } @@ -792,11 +780,6 @@ main .section.carousel-container { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.btn-group { - position: relative; - display: inline-flex; -} - /* START OF CORE STYLES */ .btn-primary-purple { @@ -849,23 +832,6 @@ main .section.carousel-container { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.btn-outline-trending-brand { - border-width: 2px; - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); -} - -.btn-outline-trending-brand:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - .container-two-col .col-right { font-size: 1rem; line-height: 1.75rem; @@ -1028,728 +994,638 @@ header { } } -.undefined :is(.sr-only) { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - -.undefined :is(.pointer-events-none) { +.pointer-events-none { pointer-events: none; } -.undefined :is(.pointer-events-auto) { +.pointer-events-auto { pointer-events: auto; } -.undefined :is(.visible) { +.visible { visibility: visible; } -.undefined :is(.static) { +.static { position: static; } -.undefined :is(.fixed) { +.fixed { position: fixed; } -.undefined :is(.absolute) { - position: absolute; -} - -.undefined :is(.relative) { +.relative { position: relative; } -.undefined :is(.bottom-0) { +.bottom-0 { bottom: 0px; } -.undefined :is(.left-0) { +.left-0 { left: 0px; } -.undefined :is(.right-0) { +.right-0 { right: 0px; } -.undefined :is(.top-0) { +.top-0 { top: 0px; } -.undefined :is(.z-10) { - z-index: 10; -} - -.undefined :is(.z-\[9999\]) { +.z-\[9999\] { z-index: 9999; } -.undefined :is(.m-0) { +.m-0 { margin: 0px; } -.undefined :is(.mx-auto) { +.mx-auto { margin-left: auto; margin-right: auto; } -.undefined :is(.my-0) { +.my-0 { margin-top: 0px; margin-bottom: 0px; } -.undefined :is(.my-2) { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - -.undefined :is(.my-auto) { +.my-auto { margin-top: auto; margin-bottom: auto; } -.undefined :is(.mb-12) { - margin-bottom: 3rem; -} - -.undefined :is(.mb-2) { +.mb-2 { margin-bottom: 0.5rem; } -.undefined :is(.mb-5) { +.mb-5 { margin-bottom: 1.25rem; } -.undefined :is(.ml-2) { +.ml-2 { margin-left: 0.5rem; } -.undefined :is(.ml-auto) { +.ml-auto { margin-left: auto; } -.undefined :is(.mt-0) { +.mt-0 { margin-top: 0px; } -.undefined :is(.mt-12) { +.mt-12 { margin-top: 3rem; } -.undefined :is(.mt-2) { +.mt-2 { margin-top: 0.5rem; } -.undefined :is(.mt-3) { +.mt-3 { margin-top: 0.75rem; } -.undefined :is(.mt-4) { +.mt-4 { margin-top: 1rem; } -.undefined :is(.mt-6) { +.mt-6 { margin-top: 1.5rem; } -.undefined :is(.line-clamp-2) { +.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } -.undefined :is(.block) { +.block { display: block; } -.undefined :is(.inline) { +.inline { display: inline; } -.undefined :is(.flex) { +.flex { display: flex; } -.undefined :is(.inline-flex) { +.inline-flex { display: inline-flex; } -.undefined :is(.table) { +.table { display: table; } -.undefined :is(.grid) { +.grid { display: grid; } -.undefined :is(.contents) { +.contents { display: contents; } -.undefined :is(.hidden) { +.hidden { display: none; } -.undefined :is(.h-10) { +.h-10 { height: 2.5rem; } -.undefined :is(.h-24) { +.h-24 { height: 6rem; } -.undefined :is(.h-4) { +.h-4 { height: 1rem; } -.undefined :is(.h-48) { +.h-48 { height: 12rem; } -.undefined :is(.h-5) { - height: 1.25rem; -} - -.undefined :is(.h-full) { +.h-full { height: 100%; } -.undefined :is(.h-max) { - height: -moz-max-content; - height: max-content; -} - -.undefined :is(.w-10) { +.w-10 { width: 2.5rem; } -.undefined :is(.w-24) { +.w-24 { width: 6rem; } -.undefined :is(.w-4) { +.w-4 { width: 1rem; } -.undefined :is(.w-5) { - width: 1.25rem; -} - -.undefined :is(.w-8\/12) { +.w-8\/12 { width: 66.666667%; } -.undefined :is(.w-auto) { +.w-auto { width: auto; } -.undefined :is(.w-full) { +.w-full { width: 100%; } -.undefined :is(.max-w-7xl) { +.max-w-7xl { max-width: 80rem; } -.undefined :is(.max-w-md) { +.max-w-md { max-width: 28rem; } -.undefined :is(.max-w-xl) { +.max-w-xl { max-width: 36rem; } -.undefined :is(.flex-1) { +.flex-1 { flex: 1 1 0%; } -.undefined :is(.flex-shrink-0) { +.flex-shrink-0 { flex-shrink: 0; } -.undefined :is(.transform) { +.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.undefined :is(.cursor-pointer) { +.cursor-pointer { cursor: pointer; } -.undefined :is(.select-none) { +.select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } -.undefined :is(.resize) { +.resize { resize: both; } -.undefined :is(.snap-none) { +.snap-none { scroll-snap-type: none; } -.undefined :is(.snap-x) { +.snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } -.undefined :is(.snap-mandatory) { +.snap-mandatory { --tw-scroll-snap-strictness: mandatory; } -.undefined :is(.grid-cols-1) { +.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } -.undefined :is(.flex-col) { +.flex-col { flex-direction: column; } -.undefined :is(.flex-wrap) { +.flex-wrap { flex-wrap: wrap; } -.undefined :is(.items-center) { +.items-center { align-items: center; } -.undefined :is(.justify-start) { +.justify-start { justify-content: flex-start; } -.undefined :is(.justify-center) { +.justify-center { justify-content: center; } -.undefined :is(.justify-between) { +.justify-between { justify-content: space-between; } -.undefined :is(.gap-2) { +.gap-2 { gap: 0.5rem; } -.undefined :is(.gap-4) { +.gap-4 { gap: 1rem; } -.undefined :is(.gap-x-16) { - -moz-column-gap: 4rem; - column-gap: 4rem; -} - -.undefined :is(.gap-x-6) { +.gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; } -.undefined :is(.gap-y-12) { +.gap-y-12 { row-gap: 3rem; } -.undefined :is(.gap-y-8) { - row-gap: 2rem; -} - -.undefined :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) { +.space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } -.undefined :is(.overflow-hidden) { +.overflow-hidden { overflow: hidden; } -.undefined :is(.scroll-auto) { +.scroll-auto { scroll-behavior: auto; } -.undefined :is(.scroll-smooth) { +.scroll-smooth { scroll-behavior: smooth; } -.undefined :is(.break-normal) { +.break-normal { overflow-wrap: normal; word-break: normal; } -.undefined :is(.rounded) { +.rounded { border-radius: 0.25rem; } -.undefined :is(.rounded-full) { +.rounded-full { border-radius: 9999px; } -.undefined :is(.rounded-md) { +.rounded-md { border-radius: 0.375rem; } -.undefined :is(.rounded-r) { +.rounded-r { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } -.undefined :is(.border) { +.border { border-width: 1px; } -.undefined :is(.border-2) { +.border-2 { border-width: 2px; } -.undefined :is(.border-danaherpurple-500) { +.border-danaherpurple-500 { --tw-border-opacity: 1; border-color: rgb(117 35 255 / var(--tw-border-opacity)); } -.undefined :is(.border-gray-300) { +.border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.undefined :is(.border-red-500) { +.border-red-500 { --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity)); } -.undefined :is(.bg-danaherlightblue-50) { +.bg-danaherlightblue-50 { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.undefined :is(.bg-danaherlightblue-500) { +.bg-danaherlightblue-500 { --tw-bg-opacity: 1; background-color: rgb(59 199 229 / var(--tw-bg-opacity)); } -.undefined :is(.bg-danaherpurple-500) { +.bg-danaherpurple-500 { --tw-bg-opacity: 1; background-color: rgb(117 35 255 / var(--tw-bg-opacity)); } -.undefined :is(.bg-gray-200) { +.bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } -.undefined :is(.bg-red-50) { +.bg-red-50 { --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity)); } -.undefined :is(.bg-white) { +.bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.undefined :is(.bg-opacity-10) { +.bg-opacity-10 { --tw-bg-opacity: 0.1; } -.undefined :is(.object-cover) { +.object-cover { -o-object-fit: cover; object-fit: cover; } -.undefined :is(.p-1) { +.p-1 { padding: 0.25rem; } -.undefined :is(.p-2) { +.p-2 { padding: 0.5rem; } -.undefined :is(.p-3) { +.p-3 { padding: 0.75rem; } -.undefined :is(.p-4) { +.p-4 { padding: 1rem; } -.undefined :is(.px-1) { +.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } -.undefined :is(.px-4) { +.px-4 { padding-left: 1rem; padding-right: 1rem; } -.undefined :is(.px-6) { +.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } -.undefined :is(.px-8) { +.px-8 { padding-left: 2rem; padding-right: 2rem; } -.undefined :is(.px-9) { - padding-left: 2.25rem; - padding-right: 2.25rem; -} - -.undefined :is(.py-2) { +.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } -.undefined :is(.py-2\.5) { - padding-top: 0.625rem; - padding-bottom: 0.625rem; -} - -.undefined :is(.py-3) { +.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } -.undefined :is(.py-4) { +.py-4 { padding-top: 1rem; padding-bottom: 1rem; } -.undefined :is(.py-40) { +.py-40 { padding-top: 10rem; padding-bottom: 10rem; } -.undefined :is(.py-8) { - padding-top: 2rem; - padding-bottom: 2rem; -} - -.undefined :is(.pb-0) { +.pb-0 { padding-bottom: 0px; } -.undefined :is(.pb-10) { +.pb-10 { padding-bottom: 2.5rem; } -.undefined :is(.pb-4) { +.pb-4 { padding-bottom: 1rem; } -.undefined :is(.pb-6) { - padding-bottom: 1.5rem; -} - -.undefined :is(.pl-5) { - padding-left: 1.25rem; -} - -.undefined :is(.pl-8) { - padding-left: 2rem; -} - -.undefined :is(.pr-3) { +.pr-3 { padding-right: 0.75rem; } -.undefined :is(.pt-12) { +.pt-12 { padding-top: 3rem; } -.undefined :is(.pt-4) { +.pt-4 { padding-top: 1rem; } -.undefined :is(.pt-6) { +.pt-6 { padding-top: 1.5rem; } -.undefined :is(.text-left) { +.text-left { text-align: left; } -.undefined :is(.align-top) { - vertical-align: top; -} - -.undefined :is(.align-middle) { +.align-middle { vertical-align: middle; } -.undefined :is(.font-sans) { +.font-sans { font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } -.undefined :is(.font-serif) { +.font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } -.undefined :is(.text-2xl) { +.text-2xl { font-size: 1.5rem; line-height: 2rem; } -.undefined :is(.text-4xl) { +.text-4xl { font-size: 2.25rem; line-height: 2.5rem; } -.undefined :is(.text-base) { +.text-base { font-size: 1rem; line-height: 1.5rem; } -.undefined :is(.text-sm) { +.text-sm { font-size: 0.875rem; line-height: 1.25rem; } -.undefined :is(.text-xs) { +.text-xs { font-size: 0.75rem; line-height: 1rem; } -.undefined :is(.font-bold) { +.font-bold { font-weight: 700; } -.undefined :is(.font-extrabold) { +.font-extrabold { font-weight: 800; } -.undefined :is(.font-medium) { +.font-medium { font-weight: 500; } -.undefined :is(.font-normal) { +.font-normal { font-weight: 200; } -.undefined :is(.font-semibold) { +.font-semibold { font-weight: 700; } -.undefined :is(.uppercase) { +.uppercase { text-transform: uppercase; } -.undefined :is(.capitalize) { - text-transform: capitalize; -} - -.undefined :is(.leading-5) { +.leading-5 { line-height: 1.25rem; } -.undefined :is(.leading-6) { +.leading-6 { line-height: 1.5rem; } -.undefined :is(.tracking-tight) { +.tracking-tight { letter-spacing: -0.025em; } -.undefined :is(.tracking-wide) { +.tracking-wide { letter-spacing: 0.025em; } -.undefined :is(.text-danaherblue-600) { +.text-danaherblue-600 { --tw-text-opacity: 1; color: rgb(13 49 114 / var(--tw-text-opacity)); } -.undefined :is(.text-danaherpurple-500) { +.text-danaherpurple-500 { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)); } -.undefined :is(.text-gray-500) { +.text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); } -.undefined :is(.text-gray-700) { +.text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } -.undefined :is(.text-gray-900) { +.text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } -.undefined :is(.text-indigo-300) { +.text-indigo-300 { --tw-text-opacity: 1; color: rgb(165 180 252 / var(--tw-text-opacity)); } -.undefined :is(.text-lightblue-500) { +.text-lightblue-500 { --tw-text-opacity: 1; color: rgb(59 199 229 / var(--tw-text-opacity)); } -.undefined :is(.text-red-600) { +.text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); } -.undefined :is(.text-red-800) { +.text-red-800 { --tw-text-opacity: 1; color: rgb(153 27 27 / var(--tw-text-opacity)); } -.undefined :is(.text-white) { +.text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.undefined :is(.shadow) { +.shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.undefined :is(.shadow-lg) { +.shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.undefined :is(.shadow-sm) { +.shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.undefined :is(.shadow-xl) { +.shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.undefined :is(.outline) { - outline-style: solid; -} - -.undefined :is(.blur) { +.blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.undefined :is(.filter) { +.filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.undefined :is(.transition) { +.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; @@ -1757,13 +1633,13 @@ header { transition-duration: 150ms; } -.undefined :is(.transition-all) { +.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.undefined :is(main .section.top-border) { +main .section.top-border { margin: auto; margin-top: 2.5rem; max-width: 80rem; @@ -1773,191 +1649,140 @@ header { border-color: rgb(0 0 0 / var(--tw-border-opacity)); } -.undefined :is(.hover\:bg-danaherpurple-800:hover) { +.hover\:bg-danaherpurple-800:hover { --tw-bg-opacity: 1; background-color: rgb(64 0 165 / var(--tw-bg-opacity)); } -.undefined :is(.hover\:fill-danaherpurple-800:hover) { - fill: #4000A5; -} - -.undefined :is(.hover\:text-danaherblue-500:hover) { +.hover\:text-danaherblue-500:hover { --tw-text-opacity: 1; color: rgb(0 74 89 / var(--tw-text-opacity)); } -.undefined :is(.hover\:text-danaherpurple-800:hover) { - --tw-text-opacity: 1; - color: rgb(64 0 165 / var(--tw-text-opacity)); -} - -.undefined :is(.hover\:text-white:hover) { +.hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.undefined :is(.hover\:underline:hover) { - text-decoration-line: underline; -} - -.undefined :is(.focus\:border-gray-300:focus) { +.focus\:border-gray-300:focus { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.undefined :is(.focus\:ring-gray-300:focus) { +.focus\:ring-gray-300:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); } -.undefined :is(.group:hover .group-hover\:translate-x-1) { +.group:hover .group-hover\:translate-x-1 { --tw-translate-x: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.undefined :is(.group:hover .group-hover\:font-semibold) { +.group:hover .group-hover\:font-semibold { font-weight: 700; } -.undefined :is(.group:hover .group-hover\:tracking-wide) { +.group:hover .group-hover\:tracking-wide { letter-spacing: 0.025em; } @media (min-width: 640px) { - .undefined :is(.sm\:grid-cols-2) { + .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .undefined :is(.sm\:flex-row) { + .sm\:flex-row { flex-direction: row; } - .undefined :is(.sm\:px-6) { + .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } - .undefined :is(.sm\:pt-8) { + .sm\:pt-8 { padding-top: 2rem; } - .undefined :is(.sm\:text-5xl) { + .sm\:text-5xl { font-size: 3rem; line-height: 1; } - .undefined :is(.sm\:text-sm) { + .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; } } @media (min-width: 768px) { - .undefined :is(.md\:my-4) { + .md\:mt-4 { margin-top: 1rem; - margin-bottom: 1rem; } - .undefined :is(.md\:mt-4) { - margin-top: 1rem; - } - - .undefined :is(.md\:block) { - display: block; - } - - .undefined :is(.md\:h-6) { - height: 1.5rem; - } - - .undefined :is(.md\:w-6) { - width: 1.5rem; - } - - .undefined :is(.md\:flex-row) { - flex-direction: row; - } - - .undefined :is(.md\:flex-wrap) { - flex-wrap: wrap; - } - - .undefined :is(.md\:pb-10) { + .md\:pb-10 { padding-bottom: 2.5rem; } - .undefined :is(.md\:pb-24) { + .md\:pb-24 { padding-bottom: 6rem; } } @media (min-width: 1024px) { - .undefined :is(.lg\:col-span-3) { + .lg\:col-span-3 { grid-column: span 3 / span 3; } - .undefined :is(.lg\:col-span-4) { + .lg\:col-span-4 { grid-column: span 4 / span 4; } - .undefined :is(.lg\:mb-0) { - margin-bottom: 0px; - } - - .undefined :is(.lg\:mt-0) { + .lg\:mt-0 { margin-top: 0px; } - .undefined :is(.lg\:w-1\/3) { + .lg\:w-1\/3 { width: 33.333333%; } - .undefined :is(.lg\:w-2\/3) { + .lg\:w-2\/3 { width: 66.666667%; } - .undefined :is(.lg\:max-w-4xl) { - max-width: 56rem; - } - - .undefined :is(.lg\:max-w-7xl) { + .lg\:max-w-7xl { max-width: 80rem; } - .undefined :is(.lg\:grid-cols-7) { + .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } - .undefined :is(.lg\:px-0) { - padding-left: 0px; - padding-right: 0px; - } - - .undefined :is(.lg\:px-8) { + .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } - .undefined :is(.lg\:pb-80) { + .lg\:pb-80 { padding-bottom: 20rem; } - .undefined :is(.lg\:pt-14) { + .lg\:pt-14 { padding-top: 3.5rem; } } @media (min-width: 1280px) { - .undefined :is(.xl\:col-start-1) { + .xl\:col-start-1 { grid-column-start: 1; } - .undefined :is(.xl\:w-1\/4) { + .xl\:w-1\/4 { width: 25%; } - .undefined :is(.xl\:w-3\/4) { + .xl\:w-3\/4 { width: 75%; } } diff --git a/tailwind.config.js b/tailwind.config.js index 8591cc638..b3d7c0035 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,9 +1,10 @@ /** @type {import('tailwindcss').Config} */ const plugin = require('tailwindcss/plugin') - +console.log(process.env.IMPORTANT_WRAPPER); +const wrapper = (process.env.IMPORTANT_WRAPPER && process.env.IMPORTANT_WRAPPER !== '.undefined') ? process.env.IMPORTANT_WRAPPER : false; module.exports = { - important: process.env.IMPORTANT_WRAPPER || '.default-wrapper', - content: ['./scripts/*.js', '!./scripts/at-lsig.js', './fragments/*.html', './404.html'], // https://tailwindcss.com/docs/content-configuration#class-detection-in-depth + important: wrapper, + content: ['./scripts/*.js', '!./scripts/at-lsig.js', './404.html'], // https://tailwindcss.com/docs/content-configuration#class-detection-in-depth darkMode: 'media', // or 'media' or 'class' plugins: [ plugin(function ({ addComponents, theme }) { From 3feda27b84d2dcda96a0afbc3c716c0de84a7a75 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Mon, 6 May 2024 14:44:33 +0530 Subject: [PATCH 15/88] Fixed for home page --- blocks/accordion/accordion.css | 2 +- blocks/card-list/card-list.css | 9 ++++----- blocks/carousel/carousel.css | 9 ++++++++- blocks/footer/footer.css | 5 +++++ blocks/hero/hero.css | 9 +++++++++ blocks/mini-teasers/mini-teasers.css | 4 ++-- blocks/mini-teasers/mini-teasers.js | 2 +- blocks/page-jump-menu/page-jump-menu.css | 4 ---- blocks/page-jump-menu/page-jump-menu.js | 2 +- blocks/side-nav/side-nav.js | 4 ++++ tailwind.config.js | 21 +++++++++++++++------ 11 files changed, 50 insertions(+), 21 deletions(-) diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index eca17bb1b..18809b7d4 100644 --- a/blocks/accordion/accordion.css +++ b/blocks/accordion/accordion.css @@ -535,7 +535,7 @@ video { } .eyebrow { - color: #004A59; + color: #7523FF; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.125em; diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index db4ab2d2c..9e0b83793 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -573,11 +573,10 @@ video { } .eyebrow-sm { - color: #004A59; - font-size: 0.625rem; - font-weight: 700; - letter-spacing: 0.125em; - text-transform: uppercase; + color: #7523FF; + font-size: 0.875rem; + line-height: 1.25rem; + opacity: 1; } .card-list-wrapper :is(.relative) { diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index 93ba024d2..ae4cbe0a6 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -538,8 +538,15 @@ video { background-color: #EADEFF; } +.btn-lg { + padding-top: .625rem; + padding-bottom: .625rem; + font-size: 1.125rem; + line-height: 1.75rem; +} + .eyebrow { - color: #004A59; + color: #7523FF; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.125em; diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 8d482337b..3cd0165a6 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -538,6 +538,11 @@ video { background-color: #EADEFF; } +.btn-group { + display: inline-flex; + position: relative; +} + .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 682f64b29..5a7f6595d 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -749,6 +749,15 @@ video { backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } +@media (min-width: 768px) { + .md\:btn-lg { + padding-top: .625rem; + padding-bottom: .625rem; + font-size: 1.125rem; + line-height: 1.75rem; + } +} + .hero-wrapper :is(.hover\:bg-purple-200:hover) { --tw-bg-opacity: 1; background-color: rgb(125 86 164 / var(--tw-bg-opacity)); diff --git a/blocks/mini-teasers/mini-teasers.css b/blocks/mini-teasers/mini-teasers.css index 29e8c7fe1..7dd16b9e4 100644 --- a/blocks/mini-teasers/mini-teasers.css +++ b/blocks/mini-teasers/mini-teasers.css @@ -591,8 +591,8 @@ video { height: 5rem; } -.mini-teasers-wrapper :is(.h-24) { - height: 6rem; +.mini-teasers-wrapper :is(.h-\[5\.5rem\]) { + height: 5.5rem; } .mini-teasers-wrapper :is(.w-16) { diff --git a/blocks/mini-teasers/mini-teasers.js b/blocks/mini-teasers/mini-teasers.js index 8c6aa09c7..88c563968 100644 --- a/blocks/mini-teasers/mini-teasers.js +++ b/blocks/mini-teasers/mini-teasers.js @@ -14,7 +14,7 @@ export default function decorate(block) { } const pEl = element.querySelector('p'); if (pEl) { - pEl.classList.add(...'line-clamp-3 h-24 pt-4 break-words'.split(' ')); + pEl.classList.add(...'line-clamp-3 h-[5.5rem] pt-4 break-words'.split(' ')); pEl.title = pEl.textContent; } if (pEl.firstElementChild !== null) pEl?.parentNode?.firstElementChild?.classList.remove('h-20'); diff --git a/blocks/page-jump-menu/page-jump-menu.css b/blocks/page-jump-menu/page-jump-menu.css index 20dc09022..6bb179594 100644 --- a/blocks/page-jump-menu/page-jump-menu.css +++ b/blocks/page-jump-menu/page-jump-menu.css @@ -567,10 +567,6 @@ video { display: block; } -.page-jump-menu-wrapper :is(.hidden) { - display: none; -} - .page-jump-menu-wrapper :is(.w-full) { width: 100%; } diff --git a/blocks/page-jump-menu/page-jump-menu.js b/blocks/page-jump-menu/page-jump-menu.js index 1e573ce7a..fb94e6a45 100644 --- a/blocks/page-jump-menu/page-jump-menu.js +++ b/blocks/page-jump-menu/page-jump-menu.js @@ -52,7 +52,7 @@ export default async function decorate(block) { block.innerHTML = ''; block.append(navList); - pageJumpMenuContainer.classList.add(...'hidden md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-jump-menu-wrapper]:flex [&_.page-jump-menu-wrapper]:mx-auto [&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + pageJumpMenuContainer.classList.add(...'md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-jump-menu-wrapper]:flex [&_.page-jump-menu-wrapper]:mx-auto [&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); document.querySelector('.page-jump-menu-container li[aria-selected="true"] a')?.classList.add('!text-white', '!bg-danaherpurple-500'); const selectEl = document.getElementById('selectedTabId'); selectEl.addEventListener('change', (event) => { diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index 773361e8c..6058d3db1 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -51,6 +51,7 @@ export default async function decorate(block) { .filter(({ path }) => path === `/us/en/products/${category}`) .first(); sideNavTitle = categoryObj?.title || category || sideNavTitle; + console.log('sideNavTitle', sideNavTitle); } else if (block.classList.contains('products')) { sideNavItems = await fetchAllProductCategories(); sideNavTitle = 'Products'; @@ -66,6 +67,7 @@ export default async function decorate(block) { .filter(({ solution }) => solution === solutionType).all(); } sideNavElements = renderSideNav(sideNavItems); + console.log('sideNavElements', sideNavElements); selectedNavItem = sideNavElements.querySelector(`.side-nav-item a[href="${window.location.pathname}"]`)?.closest('.side-nav-item'); if (selectedNavItem) selectedNavItem.classList.add(...'font-bold bg-danaherpurple-50 hover:bg-danaherpurple-50'.split(' ')); const navHeadingDiv = div({ class: 'text-lg' }, strong(sideNavTitle)); @@ -74,7 +76,9 @@ export default async function decorate(block) { } else { navHeadingDiv.classList.add('pt-16'); } + block.innerHTML = ''; block.append(navHeadingDiv, sideNavElements); + console.log('block', block); block.classList.add(...'pt-6 p-2'.split(' ')); const topicsHub = blockParent?.parentElement?.querySelector(':scope > div:nth-child(2)'); topicsHub?.classList.add(...'lg:col-span-8 lg:col-start-5 space-y-4 mb-2 flex-1 p-0'.split(' ')); diff --git a/tailwind.config.js b/tailwind.config.js index b3d7c0035..ba483c5e8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -30,19 +30,28 @@ module.exports = { '.bg-danaherpurple-50': { backgroundColor: theme('colors.danaherpurple.50'), }, + '.btn-lg': { + paddingTop: '.625rem', + paddingBottom: '.625rem', + fontSize: '1.125rem', + lineHeight: '1.75rem', + }, + '.btn-group': { + display: 'inline-flex', + position : 'relative', + }, '.eyebrow': { - color: theme('colors.danaherblue.500'), + color: theme('colors.danaherpurple.500'), fontSize: '0.75rem', fontWeight: '700', letterSpacing: '0.125em', textTransform: 'uppercase', }, '.eyebrow-sm': { - color: theme('colors.danaherblue.500'), - fontSize: '0.625rem', - fontWeight: '700', - letterSpacing: '0.125em', - textTransform: 'uppercase', + color: theme('colors.danaherpurple.500'), + fontSize: '0.875rem', + lineHeight: '1.25rem', + opacity: '1', }, '.btn-outline-trending-brand': { color: theme('colors.danaherpurple.500'), From 6f46c58dc5890df13f0b12a02f6b3c8654373f87 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Mon, 6 May 2024 17:01:17 +0530 Subject: [PATCH 16/88] fixed partially on page jump menu --- blocks/page-jump-menu/page-jump-menu.css | 187 +++++++++++++++++++++++ blocks/page-jump-menu/page-jump-menu.js | 4 +- build-css.js | 2 +- 3 files changed, 190 insertions(+), 3 deletions(-) diff --git a/blocks/page-jump-menu/page-jump-menu.css b/blocks/page-jump-menu/page-jump-menu.css index 6bb179594..97121915e 100644 --- a/blocks/page-jump-menu/page-jump-menu.css +++ b/blocks/page-jump-menu/page-jump-menu.css @@ -555,10 +555,22 @@ video { z-index: 10; } +.page-jump-menu-wrapper :is(.order-last) { + order: 9999; +} + .page-jump-menu-wrapper :is(.-mt-20) { margin-top: -5rem; } +.page-jump-menu-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.page-jump-menu-wrapper :is(.mt-4) { + margin-top: 1rem; +} + .page-jump-menu-wrapper :is(.mt-\[-1px\]) { margin-top: -1px; } @@ -567,10 +579,47 @@ video { display: block; } +.page-jump-menu-wrapper :is(.flex) { + display: flex; +} + +.page-jump-menu-wrapper :is(.hidden) { + display: none; +} + +.page-jump-menu-wrapper :is(.h-8) { + height: 2rem; +} + +.page-jump-menu-wrapper :is(.w-48) { + width: 12rem; +} + +.page-jump-menu-wrapper :is(.w-8) { + width: 2rem; +} + +.page-jump-menu-wrapper :is(.w-auto) { + width: auto; +} + .page-jump-menu-wrapper :is(.w-full) { width: 100%; } +.page-jump-menu-wrapper :is(.gap-x-2) { + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} + +.page-jump-menu-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.page-jump-menu-wrapper :is(.rounded) { + border-radius: 0.25rem; +} + .page-jump-menu-wrapper :is(.rounded-full) { border-radius: 9999px; } @@ -579,6 +628,15 @@ video { border-radius: 0px; } +.page-jump-menu-wrapper :is(.border) { + border-width: 1px; +} + +.page-jump-menu-wrapper :is(.border-gray-300) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + .page-jump-menu-wrapper :is(.\!bg-danaherpurple-500) { --tw-bg-opacity: 1 !important; background-color: rgb(117 35 255 / var(--tw-bg-opacity)) !important; @@ -594,6 +652,10 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.page-jump-menu-wrapper :is(.stroke-black) { + stroke: #000; +} + .page-jump-menu-wrapper :is(.stroke-danaherpurple-500) { stroke: #7523FF; } @@ -602,21 +664,74 @@ video { stroke: #fff; } +.page-jump-menu-wrapper :is(.stroke-1) { + stroke-width: 1; +} + .page-jump-menu-wrapper :is(.px-0) { padding-left: 0px; padding-right: 0px; } +.page-jump-menu-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + .page-jump-menu-wrapper :is(.py-2) { padding-top: 0.5rem; padding-bottom: 0.5rem; } +.page-jump-menu-wrapper :is(.pl-3) { + padding-left: 0.75rem; +} + +.page-jump-menu-wrapper :is(.pl-4) { + padding-left: 1rem; +} + +.page-jump-menu-wrapper :is(.pr-2) { + padding-right: 0.5rem; +} + +.page-jump-menu-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.page-jump-menu-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.page-jump-menu-wrapper :is(.font-bold) { + font-weight: 700; +} + +.page-jump-menu-wrapper :is(.capitalize) { + text-transform: capitalize; +} + +.page-jump-menu-wrapper :is(.tracking-wider) { + letter-spacing: 0.05em; +} + .page-jump-menu-wrapper :is(.\!text-white) { --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity)) !important; } +.page-jump-menu-wrapper :is(.text-danaherblack-500) { + --tw-text-opacity: 1; + color: rgb(51 51 51 / var(--tw-text-opacity)); +} + +.page-jump-menu-wrapper :is(.text-danaherblue-600) { + --tw-text-opacity: 1; + color: rgb(13 49 114 / var(--tw-text-opacity)); +} + .page-jump-menu-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); @@ -629,11 +744,38 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.page-jump-menu-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.page-jump-menu-wrapper :is(.focus\:outline-none:focus) { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.page-jump-menu-wrapper :is(.group:hover .group-hover\:bg-danaherpurple-500) { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +.page-jump-menu-wrapper :is(.group:hover .group-hover\:stroke-white) { + stroke: #fff; +} + +.page-jump-menu-wrapper :is(.group:hover .group-hover\:text-white) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + @media (min-width: 768px) { .page-jump-menu-wrapper :is(.md\:block) { display: block; } + .page-jump-menu-wrapper :is(.md\:hidden) { + display: none; + } + .page-jump-menu-wrapper :is(.md\:px-4) { padding-left: 1rem; padding-right: 1rem; @@ -667,10 +809,55 @@ video { } } +.page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:mx-auto .page-tabs-wrapper) { + margin-left: auto; + margin-right: auto; +} + +.page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:flex .page-tabs-wrapper) { + display: flex; +} + +@media (min-width: 768px) { + .page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + .page-jump-menu-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { display: none; } +.page-jump-menu-wrapper :is(.\[\&_svg\]\:stroke-danaherpurple-500 svg) { + stroke: #7523FF; +} + +.page-jump-menu-wrapper :is(.\[\&_svg\]\:stroke-white svg) { + stroke: #fff; +} + +.page-jump-menu-wrapper :is(.\[\&_svg\]\:stroke-1 svg) { + stroke-width: 1; +} + +.page-jump-menu-wrapper :is(.\[\&_svg\]\:duration-300 svg) { + transition-duration: 300ms; +} + +.page-jump-menu-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:translate-y-1 svg) { + --tw-translate-y: 0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.page-jump-menu-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:stroke-white svg) { + stroke: #fff; +} + .page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { height: 10rem; } diff --git a/blocks/page-jump-menu/page-jump-menu.js b/blocks/page-jump-menu/page-jump-menu.js index fb94e6a45..06e2ff098 100644 --- a/blocks/page-jump-menu/page-jump-menu.js +++ b/blocks/page-jump-menu/page-jump-menu.js @@ -25,7 +25,7 @@ function scrollJumpMenuFixed(pageJumpMenuContainer) { export default async function decorate(block) { const main = block.closest('main'); - const pageJumpMenuContainer = block.closest('.page-jump-menu-container'); + const pageJumpMenuContainer = block.closest('.page-jump-menu'); const pageMenus = block.children; const currentTab = window.location.pathname.split('/').pop().replace('.html', ''); @@ -52,7 +52,7 @@ export default async function decorate(block) { block.innerHTML = ''; block.append(navList); - pageJumpMenuContainer.classList.add(...'md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-jump-menu-wrapper]:flex [&_.page-jump-menu-wrapper]:mx-auto [&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + pageJumpMenuContainer.classList.add(...'hidden md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-jump-menu-wrapper]:flex [&_.page-jump-menu-wrapper]:mx-auto [&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); document.querySelector('.page-jump-menu-container li[aria-selected="true"] a')?.classList.add('!text-white', '!bg-danaherpurple-500'); const selectEl = document.getElementById('selectedTabId'); selectEl.addEventListener('change', (event) => { diff --git a/build-css.js b/build-css.js index badf557ef..487209cad 100644 --- a/build-css.js +++ b/build-css.js @@ -102,7 +102,7 @@ const fileMappings = [ wrapper: 'mini-teasers-wrapper', }, { - content: './blocks/page-jump-menu/page-jump-menu.js', + content: ['./blocks/page-jump-menu/page-jump-menu.js', './blocks/page-tabs/page-tabs.js'], output: './blocks/page-jump-menu/page-jump-menu.css', wrapper: 'page-jump-menu-wrapper', }, From e827bd3b126fbf86cccdc4cffb27af2d031797b3 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 7 May 2024 12:30:36 +0530 Subject: [PATCH 17/88] Fixed side nav issues --- blocks/side-nav/side-nav.css | 73 --------------------------- blocks/side-nav/side-nav.js | 33 +++--------- styles/styles.css | 98 ++++++++++++++++++++++++++++++++++++ styles/tailwind.css | 40 +++++++++++++++ 4 files changed, 146 insertions(+), 98 deletions(-) diff --git a/blocks/side-nav/side-nav.css b/blocks/side-nav/side-nav.css index 66f1b683f..fa1faf8ff 100644 --- a/blocks/side-nav/side-nav.css +++ b/blocks/side-nav/side-nav.css @@ -538,15 +538,6 @@ video { background-color: #EADEFF; } -.side-nav-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.side-nav-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - .side-nav-wrapper :is(.block) { display: block; } @@ -555,10 +546,6 @@ video { display: flex; } -.side-nav-wrapper :is(.grid) { - display: grid; -} - .side-nav-wrapper :is(.hidden) { display: none; } @@ -567,14 +554,6 @@ video { width: 100%; } -.side-nav-wrapper :is(.max-w-7xl) { - max-width: 80rem; -} - -.side-nav-wrapper :is(.flex-1) { - flex: 1 1 0%; -} - .side-nav-wrapper :is(.flex-col) { flex-direction: column; } @@ -587,12 +566,6 @@ video { gap: 0.75rem; } -.side-nav-wrapper :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - .side-nav-wrapper :is(.border-b) { border-bottom-width: 1px; } @@ -612,10 +585,6 @@ video { background-color: rgb(234 222 255 / var(--tw-bg-opacity)); } -.side-nav-wrapper :is(.p-0) { - padding: 0px; -} - .side-nav-wrapper :is(.p-2) { padding: 0.5rem; } @@ -625,20 +594,11 @@ video { padding-right: 0.5rem; } -.side-nav-wrapper :is(.px-4) { - padding-left: 1rem; - padding-right: 1rem; -} - .side-nav-wrapper :is(.py-4) { padding-top: 1rem; padding-bottom: 1rem; } -.side-nav-wrapper :is(.pt-0) { - padding-top: 0px; -} - .side-nav-wrapper :is(.pt-16) { padding-top: 4rem; } @@ -680,40 +640,7 @@ video { } @media (min-width: 1024px) { - .side-nav-wrapper :is(.lg\:col-span-3) { - grid-column: span 3 / span 3; - } - - .side-nav-wrapper :is(.lg\:col-span-8) { - grid-column: span 8 / span 8; - } - - .side-nav-wrapper :is(.lg\:col-start-1) { - grid-column-start: 1; - } - - .side-nav-wrapper :is(.lg\:col-start-5) { - grid-column-start: 5; - } - - .side-nav-wrapper :is(.lg\:row-span-6) { - grid-row: span 6 / span 6; - } - .side-nav-wrapper :is(.lg\:block) { display: block; } - - .side-nav-wrapper :is(.lg\:grid-cols-12) { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .side-nav-wrapper :is(.lg\:px-0) { - padding-left: 0px; - padding-right: 0px; - } - - .side-nav-wrapper :is(.lg\:pt-4) { - padding-top: 1rem; - } } \ No newline at end of file diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index 6058d3db1..3220fffdb 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -17,9 +17,13 @@ function renderSideNav(sideNavItems) { const sideNavElements = div({ class: 'flex flex-col items-start pt-6' }); sideNavItems.forEach((sideNavItem) => { sideNavElements.append(div( - { class: 'w-full side-nav-item hover:bg-danaherpurple-25 border-b border-gray-300' }, + { + class: 'w-full side-nav-item hover:bg-danaherpurple-25 border-b border-gray-300', + }, div( - { class: 'flex gap-3' }, + { + class: 'flex gap-3', + }, a({ class: 'py-4 px-2 text-base', href: makePublicUrl(sideNavItem.path), @@ -35,15 +39,6 @@ export default async function decorate(block) { let sideNavTitle = 'Side Navigation'; let selectedNavItem = null; let sideNavElements = div(); - const blockParent = block?.parentElement?.parentElement; - if (blockParent?.classList.contains('default-content-wrapper')) { - blockParent?.classList.add(...'grid px-4 lg:px-0 max-w-7xl mx-auto lg:grid-cols-12'.split(' ')); - blockParent?.children[0]?.classList.add(...'hidden lg:block lg:col-span-3 lg:col-start-1 lg:row-span-6 lg:pt-4 p-0'.split(' ')); - blockParent?.children[1]?.classList.add(...'lg:col-span-8 lg:col-start-5 space-y-4 mb-2 flex-1 p-0'.split(' ')); - } else { - blockParent?.parentElement?.classList.add(...'grid px-4 lg:px-0 max-w-7xl mx-auto lg:grid-cols-12'.split(' ')); - blockParent?.classList.add(...'hidden lg:block lg:col-span-3 lg:col-start-1 lg:row-span-6 lg:pt-4 p-0'.split(' ')); - } if (block.classList.contains('topics')) { const category = getMetadata('fullcategory'); sideNavItems = await fetchTopicsForCategory(category); @@ -51,7 +46,6 @@ export default async function decorate(block) { .filter(({ path }) => path === `/us/en/products/${category}`) .first(); sideNavTitle = categoryObj?.title || category || sideNavTitle; - console.log('sideNavTitle', sideNavTitle); } else if (block.classList.contains('products')) { sideNavItems = await fetchAllProductCategories(); sideNavTitle = 'Products'; @@ -67,20 +61,9 @@ export default async function decorate(block) { .filter(({ solution }) => solution === solutionType).all(); } sideNavElements = renderSideNav(sideNavItems); - console.log('sideNavElements', sideNavElements); selectedNavItem = sideNavElements.querySelector(`.side-nav-item a[href="${window.location.pathname}"]`)?.closest('.side-nav-item'); if (selectedNavItem) selectedNavItem.classList.add(...'font-bold bg-danaherpurple-50 hover:bg-danaherpurple-50'.split(' ')); - const navHeadingDiv = div({ class: 'text-lg' }, strong(sideNavTitle)); - if (blockParent?.classList.contains('default-content-wrapper')) { - navHeadingDiv.classList.add('pt-0'); - } else { - navHeadingDiv.classList.add('pt-16'); - } - block.innerHTML = ''; - block.append(navHeadingDiv, sideNavElements); - console.log('block', block); + block.append(div({ class: 'text-lg pt-16' }, strong(sideNavTitle)), sideNavElements); block.classList.add(...'pt-6 p-2'.split(' ')); - const topicsHub = blockParent?.parentElement?.querySelector(':scope > div:nth-child(2)'); - topicsHub?.classList.add(...'lg:col-span-8 lg:col-start-5 space-y-4 mb-2 flex-1 p-0'.split(' ')); return block; -} +} \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 405703adc..6a58e4aa0 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -994,6 +994,104 @@ header { } } +.topic main, .topichub main { + margin-left: auto; + margin-right: auto; + display: grid; + max-width: 80rem; + padding-left: 1rem; + padding-right: 1rem; +} + +@media (min-width: 1024px) { + .topic main, .topichub main { + grid-template-columns: repeat(12, minmax(0, 1fr)); + padding-left: 0px; + padding-right: 0px; + } +} + +.topic main > div, .topichub main > div { + margin-bottom: 0.5rem; + flex: 1 1 0%; +} + +.topic main > div > :not([hidden]) ~ :not([hidden]), .topichub main > div > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.topic main > div, .topichub main > div { + padding: 0px; +} + +@media (min-width: 1024px) { + .topic main > div, .topichub main > div { + grid-column: span 8 / span 8; + grid-column-start: 5; + } +} + +.topic main > .side-nav-container, .topichub main > .side-nav-container { + display: none; + padding: 0px; +} + +@media (min-width: 1024px) { + .topic main > .side-nav-container, .topichub main > .side-nav-container { + grid-column: span 3 / span 3; + grid-column-start: 1; + grid-row: span 6 / span 6; + display: block; + } + + .topic main > .side-nav-container + .section, .topichub main > .side-nav-container + .section { + padding-top: 1rem; + } +} + +.topic main p:not(.show-modal-btn) { + margin-bottom: 1rem; + font-size: 1.125rem; + line-height: 1.75rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.topic main .section.social-media-container, main .section.takeway-container, main .section.call-to-action-container { + padding: 0px; +} + +.processstep main .default-content-wrapper.section.side-nav-container { + margin-left: auto; + margin-right: auto; + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +@media (min-width: 1024px) { + .processstep main .default-content-wrapper.section.side-nav-container { + flex-direction: row; + } +} + +.processstep main .default-content-wrapper.section.side-nav-container div:nth-child(2) { + width: 75% !important; +} + +.processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper { + width: 20rem !important; + padding-left: 1rem !important; +} + +.processstep main .default-content-wrapper.section.side-nav-container > div { + margin-right: 0px !important; + margin-left: 0px !important; + max-width: 64rem !important; +} + .pointer-events-none { pointer-events: none; } diff --git a/styles/tailwind.css b/styles/tailwind.css index 717dff3a9..7abb3591a 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -206,6 +206,46 @@ header { @apply h-[52px] md:h-[80px] lg:h-[179px] bg-white print:hidden; } + + .topic main, .topichub main { + @apply grid px-4 lg:px-0 max-w-7xl mx-auto lg:grid-cols-12; + } + + .topic main > div, .topichub main > div { + @apply lg:col-span-8 lg:col-start-5 space-y-4 mb-2 flex-1 p-0; + } + + .topic main > .side-nav-container, .topichub main > .side-nav-container { + @apply hidden lg:block lg:col-span-3 lg:col-start-1 lg:row-span-6 p-0; + } + + .topic main > .side-nav-container + .section, .topichub main > .side-nav-container + .section { + @apply lg:pt-4 + } + + .topic main p:not(.show-modal-btn) { + @apply leading-7 text-lg mb-4 text-danahergray-700; + } + + .topic main .section.social-media-container, main .section.takeway-container, main .section.call-to-action-container { + @apply p-0; + } + + .processstep main .default-content-wrapper.section.side-nav-container { + @apply flex flex-col lg:flex-row mx-auto gap-6; + } + + .processstep main .default-content-wrapper.section.side-nav-container div:nth-child(2) { + @apply !w-9/12; + } + + .processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper{ + @apply !pl-4 !w-80; + } + + .processstep main .default-content-wrapper.section.side-nav-container > div{ + @apply !max-w-5xl !mr-0 !ml-0; + } } @layer utilities { From b2033e87ca1fefbaacfb17515b1ab3bc24d704ec Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 7 May 2024 13:24:58 +0530 Subject: [PATCH 18/88] Fixed blog and library issues --- blocks/recent-articles/recent-articles.js | 2 +- build-css.js | 23 + styles/styles.css | 118 ++++ styles/tailwind.css | 25 +- tailwind.config.js | 1 - templates/blog/blog.js | 2 - templates/library/library.js | 2 +- templates/processstep/processstep-dev.css | 11 - templates/processstep/processstep.css | 555 ++++++++++++++++++- templates/productDetail/productDetail.css | 540 +++++++++++++++++++ templates/topic/topic.css | 628 ++++++++++++++++++++++ 11 files changed, 1869 insertions(+), 38 deletions(-) delete mode 100644 templates/processstep/processstep-dev.css create mode 100644 templates/productDetail/productDetail.css create mode 100644 templates/topic/topic.css diff --git a/blocks/recent-articles/recent-articles.js b/blocks/recent-articles/recent-articles.js index 99bb85d34..f63eda219 100644 --- a/blocks/recent-articles/recent-articles.js +++ b/blocks/recent-articles/recent-articles.js @@ -6,7 +6,7 @@ import { formatDateUTCSeconds, makePublicUrl } from '../../scripts/scripts.js'; import { getMetadata } from '../../scripts/lib-franklin.js'; export default async function decorate(block) { - if (block.parentElement.parentElement.className.includes('recent-articles-container')) block.parentElement.parentElement.classList.add(...'hidden lg:block lg:w-recent-articles bg-danaherpurple-25 space-y-4 !py-28 shrink-0'.split(' ')); + //if (block.parentElement.parentElement.className.includes('recent-articles-container')) block.parentElement.parentElement.classList.add(...'hidden lg:block lg:w-recent-articles bg-danaherpurple-25 space-y-4 !py-28 shrink-0'.split(' ')); if (block.className.includes('recent-articles')) block.classList.add(...'flex-shrink-0 bg-danaherpurple-25'.split(' ')); const articleType = getMetadata('template').toLowerCase(); const url = new URL(getMetadata('og:url')); diff --git a/build-css.js b/build-css.js index 487209cad..f8da59532 100644 --- a/build-css.js +++ b/build-css.js @@ -236,6 +236,29 @@ const fileMappings = [ output: './blocks/workflow-tabs/workflow-tabs.css', wrapper: 'workflow-tabs-wrapper', }, + { + content: './templates/processstep/processstep.js', + output: './templates/processstep/processstep.css', + wrapper: 'processstep', + }, + { + content: './templates/topic/topic.js', + output: './templates/topic/topic.css', + wrapper: 'topic', + }, + { + content: './templates/productDetail/productDetail.js', + output: './templates/productDetail/productDetail.css', + wrapper: 'productDetail', + }, + { + input: './templates/application/application-dev.css', + output: './templates/application/application.css', + }, + { + input: './templates/brandHome/brandHome-dev.css', + output: './templates/brandHome/brandHome.css', + }, ]; const watch = process.argv[2]; diff --git a/styles/styles.css b/styles/styles.css index 6a58e4aa0..dc3a14438 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1092,6 +1092,124 @@ header { max-width: 64rem !important; } +.blog main { + margin-left: auto; + margin-right: auto; + display: flex; + width: 100%; + max-width: 80rem; + flex-direction: row; + gap: 2rem; +} + +.blog main > div { + padding-top: 2.5rem !important; + padding-bottom: 2.5rem !important; +} + +.blog main > div:empty { + display: none; +} + +@media (min-width: 640px) { + .blog main > div { + padding-top: 2rem !important; + padding-bottom: 2rem !important; + } +} + +@media (min-width: 768px) { + .blog main > div { + padding-left: 1.25rem !important; + padding-right: 1.25rem !important; + } +} + +.blog main .recent-articles-container { + display: none; + flex-shrink: 0; +} + +.blog main .recent-articles-container > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.blog main .recent-articles-container { + --tw-bg-opacity: 1; + background-color: rgb(245 239 255 / var(--tw-bg-opacity)); + padding-top: 7rem !important; + padding-bottom: 7rem !important; +} + +@media (min-width: 1024px) { + .blog main .recent-articles-container { + display: block; + width: 23rem; + } +} + +.library main { + margin-left: auto; + margin-right: auto; + display: flex; + width: 100%; + max-width: 80rem; + flex-direction: row; + gap: 2rem; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.library main > div { + padding-top: 2.5rem !important; + padding-bottom: 2.5rem !important; +} + +.library main > div:empty { + display: none; +} + +@media (min-width: 640px) { + .library main > div { + padding-top: 2rem !important; + padding-bottom: 2rem !important; + } +} + +@media (min-width: 768px) { + .library main > div { + padding-left: 1.25rem !important; + padding-right: 1.25rem !important; + } +} + +.library main .recent-articles-container { + display: none; + flex-shrink: 0; +} + +.library main .recent-articles-container > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.library main .recent-articles-container { + --tw-bg-opacity: 1; + background-color: rgb(245 239 255 / var(--tw-bg-opacity)); + padding-top: 7rem !important; + padding-bottom: 7rem !important; +} + +@media (min-width: 1024px) { + .library main .recent-articles-container { + display: block; + width: 23rem; + } +} + .pointer-events-none { pointer-events: none; } diff --git a/styles/tailwind.css b/styles/tailwind.css index 7abb3591a..aa4fd18a1 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -9,7 +9,6 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - @import '../styles/modal/modal.css'; @tailwind base; @@ -246,6 +245,30 @@ .processstep main .default-content-wrapper.section.side-nav-container > div{ @apply !max-w-5xl !mr-0 !ml-0; } + + .blog main { + @apply mx-auto max-w-7xl flex flex-row gap-8 w-full; + } + + .blog main > div { + @apply !py-10 sm:!py-8 md:!px-5 empty:hidden; + } + + .blog main .recent-articles-container { + @apply hidden lg:block lg:w-recent-articles bg-danaherpurple-25 space-y-4 !py-28 shrink-0; + } + + .library main { + @apply flex flex-row gap-8 max-w-7xl mx-auto w-full bg-white; + } + + .library main > div { + @apply !py-10 sm:!py-8 md:!px-5 empty:hidden; + } + + .library main .recent-articles-container { + @apply hidden lg:block lg:w-recent-articles bg-danaherpurple-25 space-y-4 !py-28 shrink-0; + } } @layer utilities { diff --git a/tailwind.config.js b/tailwind.config.js index ba483c5e8..88839fcd9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,5 @@ /** @type {import('tailwindcss').Config} */ const plugin = require('tailwindcss/plugin') -console.log(process.env.IMPORTANT_WRAPPER); const wrapper = (process.env.IMPORTANT_WRAPPER && process.env.IMPORTANT_WRAPPER !== '.undefined') ? process.env.IMPORTANT_WRAPPER : false; module.exports = { important: wrapper, diff --git a/templates/blog/blog.js b/templates/blog/blog.js index 5160f6677..bf609ddf4 100644 --- a/templates/blog/blog.js +++ b/templates/blog/blog.js @@ -3,9 +3,7 @@ import { buildArticleSchema } from '../../scripts/schema.js'; export default async function buildAutoBlocks() { const main = document.querySelector('main'); - main.classList.add(...'mx-auto max-w-7xl flex flex-row gap-8 w-full'.split(' ')); const mainWrapper = main.querySelector(':scope > div:nth-child(2)'); - mainWrapper.classList.add(...'py-10 sm:py-8 md:px-5 empty:hidden'.split(' ')); let blogH1 = ''; let blogHeroP1 = ''; let blogHeroP2 = ''; diff --git a/templates/library/library.js b/templates/library/library.js index 83f74fa7d..abffa6b23 100644 --- a/templates/library/library.js +++ b/templates/library/library.js @@ -3,7 +3,7 @@ import { buildBlock } from '../../scripts/lib-franklin.js'; export default async function buildAutoBlocks() { const main = document.querySelector('main'); - main.classList.add(...'flex flex-row gap-8 max-w-7xl mx-auto w-full bg-white'.split(' ')); + // main.classList.add(...'flex flex-row gap-8 max-w-7xl mx-auto w-full bg-white'.split(' ')); const mainWrapper = main.querySelector(':scope > div:nth-child(2)'); mainWrapper.prepend( buildBlock('social-media', { elems: [] }), diff --git a/templates/processstep/processstep-dev.css b/templates/processstep/processstep-dev.css deleted file mode 100644 index 4e118e63d..000000000 --- a/templates/processstep/processstep-dev.css +++ /dev/null @@ -1,11 +0,0 @@ -.processstep main .default-content-wrapper.section.side-nav-container { - @apply flex flex-col lg:flex-row px-6 lg:!pl-48 lg:!pr-40 mx-auto gap-4; -} - -.processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper{ - @apply !pl-36; -} - -.processstep main .default-content-wrapper.section.side-nav-container > div{ - @apply !max-w-5xl !mr-0 !ml-0; -} \ No newline at end of file diff --git a/templates/processstep/processstep.css b/templates/processstep/processstep.css index abca6f333..07e666a1a 100644 --- a/templates/processstep/processstep.css +++ b/templates/processstep/processstep.css @@ -1,27 +1,540 @@ -.processstep main .default-content-wrapper.section.side-nav-container { - margin-left: auto; - margin-right: auto; - display: flex; - flex-direction: column; - gap: 1rem; - padding-left: 1.5rem; - padding-right: 1.5rem +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; } -@media (min-width: 1024px) { - .processstep main .default-content-wrapper.section.side-nav-container { - flex-direction: row; - padding-left: 12rem !important; - padding-right: 10rem !important - } +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } -.processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper { - padding-left: 9rem !important +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } -.processstep main .default-content-wrapper.section.side-nav-container > div { - margin-right: 0px !important; - margin-left: 0px !important; - max-width: 64rem !important -} \ No newline at end of file +.processstep :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} \ No newline at end of file diff --git a/templates/productDetail/productDetail.css b/templates/productDetail/productDetail.css new file mode 100644 index 000000000..8ea6ce524 --- /dev/null +++ b/templates/productDetail/productDetail.css @@ -0,0 +1,540 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.productDetail :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} \ No newline at end of file diff --git a/templates/topic/topic.css b/templates/topic/topic.css new file mode 100644 index 000000000..3d0f234f0 --- /dev/null +++ b/templates/topic/topic.css @@ -0,0 +1,628 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.topic :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.topic :is(.my-2) { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.topic :is(.mb-4) { + margin-bottom: 1rem; +} + +.topic :is(.mt-10) { + margin-top: 2.5rem; +} + +.topic :is(.grid) { + display: grid; +} + +.topic :is(.hidden) { + display: none; +} + +.topic :is(.w-full) { + width: 100%; +} + +.topic :is(.max-w-7xl) { + max-width: 80rem; +} + +.topic :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.topic :is(.p-0) { + padding: 0px; +} + +.topic :is(.px-0) { + padding-left: 0px; + padding-right: 0px; +} + +.topic :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.topic :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.topic :is(.pt-8) { + padding-top: 2rem; +} + +@media (min-width: 1024px) { + .topic :is(.lg\:col-span-3) { + grid-column: span 3 / span 3; + } + + .topic :is(.lg\:col-start-1) { + grid-column-start: 1; + } + + .topic :is(.lg\:row-span-6) { + grid-row: span 6 / span 6; + } + + .topic :is(.lg\:block) { + display: block; + } + + .topic :is(.lg\:grid-cols-12) { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .topic :is(.lg\:px-0) { + padding-left: 0px; + padding-right: 0px; + } + + .topic :is(.lg\:pt-4) { + padding-top: 1rem; + } +} \ No newline at end of file From 50deaaf2631a1afe5cca8cf3b293f318deb3da6e Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 7 May 2024 14:22:02 +0530 Subject: [PATCH 19/88] fixed lint issues --- blocks/recent-articles/recent-articles.css | 29 ---------------------- blocks/recent-articles/recent-articles.js | 1 - blocks/side-nav/side-nav.js | 2 +- 3 files changed, 1 insertion(+), 31 deletions(-) diff --git a/blocks/recent-articles/recent-articles.css b/blocks/recent-articles/recent-articles.css index c161799d2..23969df4f 100644 --- a/blocks/recent-articles/recent-articles.css +++ b/blocks/recent-articles/recent-articles.css @@ -563,10 +563,6 @@ video { display: flex; } -.recent-articles-wrapper :is(.hidden) { - display: none; -} - .recent-articles-wrapper :is(.h-4) { height: 1rem; } @@ -579,10 +575,6 @@ video { flex-shrink: 0; } -.recent-articles-wrapper :is(.shrink-0) { - flex-shrink: 0; -} - .recent-articles-wrapper :is(.items-center) { align-items: center; } @@ -591,12 +583,6 @@ video { justify-content: space-between; } -.recent-articles-wrapper :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - .recent-articles-wrapper :is(.divide-y > :not([hidden]) ~ :not([hidden])) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); @@ -625,11 +611,6 @@ video { padding: 0.375rem; } -.recent-articles-wrapper :is(.\!py-28) { - padding-top: 7rem !important; - padding-bottom: 7rem !important; -} - .recent-articles-wrapper :is(.px-2) { padding-left: 0.5rem; padding-right: 0.5rem; @@ -740,14 +721,4 @@ video { .recent-articles-wrapper :is(.hover\:font-bold:hover) { font-weight: 700; -} - -@media (min-width: 1024px) { - .recent-articles-wrapper :is(.lg\:block) { - display: block; - } - - .recent-articles-wrapper :is(.lg\:w-recent-articles) { - width: 23rem; - } } \ No newline at end of file diff --git a/blocks/recent-articles/recent-articles.js b/blocks/recent-articles/recent-articles.js index f63eda219..557e43101 100644 --- a/blocks/recent-articles/recent-articles.js +++ b/blocks/recent-articles/recent-articles.js @@ -6,7 +6,6 @@ import { formatDateUTCSeconds, makePublicUrl } from '../../scripts/scripts.js'; import { getMetadata } from '../../scripts/lib-franklin.js'; export default async function decorate(block) { - //if (block.parentElement.parentElement.className.includes('recent-articles-container')) block.parentElement.parentElement.classList.add(...'hidden lg:block lg:w-recent-articles bg-danaherpurple-25 space-y-4 !py-28 shrink-0'.split(' ')); if (block.className.includes('recent-articles')) block.classList.add(...'flex-shrink-0 bg-danaherpurple-25'.split(' ')); const articleType = getMetadata('template').toLowerCase(); const url = new URL(getMetadata('og:url')); diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index 3220fffdb..73ff6f997 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -66,4 +66,4 @@ export default async function decorate(block) { block.append(div({ class: 'text-lg pt-16' }, strong(sideNavTitle)), sideNavElements); block.classList.add(...'pt-6 p-2'.split(' ')); return block; -} \ No newline at end of file +} From b62ff73845fcaffd3dda382421af55a032bb7334 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 7 May 2024 15:12:38 +0530 Subject: [PATCH 20/88] Removed timeline css --- blocks/timeline/timeline-dev.css | 5 -- blocks/timeline/timeline.css | 38 ------------ build-css.js | 4 -- styles/styles.css | 103 +++++++++++++++++++++++-------- styles/tailwind.css | 6 ++ 5 files changed, 84 insertions(+), 72 deletions(-) delete mode 100644 blocks/timeline/timeline-dev.css delete mode 100644 blocks/timeline/timeline.css diff --git a/blocks/timeline/timeline-dev.css b/blocks/timeline/timeline-dev.css deleted file mode 100644 index 278a568b4..000000000 --- a/blocks/timeline/timeline-dev.css +++ /dev/null @@ -1,5 +0,0 @@ -.timeline > *:not(:last-child) { - .t-line::after { - @apply content-[""] left-[38%] md:left-[18%] lg:left-[28%] w-px h-full absolute top-14 bottom-0 bg-danahergray-300; - } -} \ No newline at end of file diff --git a/blocks/timeline/timeline.css b/blocks/timeline/timeline.css deleted file mode 100644 index 7d3804ec1..000000000 --- a/blocks/timeline/timeline.css +++ /dev/null @@ -1,38 +0,0 @@ -.timeline > *:not(:last-child) { - .t-line::after { - position: absolute - } - .t-line::after { - left: 38% - } - .t-line::after { - top: 3.5rem - } - .t-line::after { - bottom: 0px - } - .t-line::after { - height: 100% - } - .t-line::after { - width: 1px - } - .t-line::after { - --tw-bg-opacity: 1; - background-color: rgb(209 213 219 / var(--tw-bg-opacity)) - } - .t-line::after { - --tw-content: ""; - content: var(--tw-content) - } - @media (min-width: 768px) { - .t-line::after { - left: 18% - } - } - @media (min-width: 1024px) { - .t-line::after { - left: 28% - } - } -} \ No newline at end of file diff --git a/build-css.js b/build-css.js index 3947940cc..0a07d7977 100644 --- a/build-css.js +++ b/build-css.js @@ -18,10 +18,6 @@ const fileMappings = [ input: './blocks/page-tabs/page-tabs-dev.css', output: './blocks/page-tabs/page-tabs.css', }, - { - input: './blocks/timeline/timeline-dev.css', - output: './blocks/timeline/timeline.css', - }, { input: './blocks/workflow-carousel/workflow-carousel-dev.css', output: './blocks/workflow-carousel/workflow-carousel.css', diff --git a/styles/styles.css b/styles/styles.css index 8a85d55b2..d3edab455 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1077,6 +1077,84 @@ header { } } +.\!timeline > *:not(:last-child) { + { + position: absolute; + } + { + left: 38%; + } + { + top: 3.5rem; + } + { + bottom: 0px; + } + { + height: 100%; + } + { + width: 1px; + } + { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); + } + { + --tw-content: ""; + content: var(--tw-content); + } + @media (min-width: 768px) { + { + left: 18%; + } + } + @media (min-width: 1024px) { + { + left: 28%; + } + } +} + +.timeline > *:not(:last-child) { + .t-line::after { + position: absolute; + } + .t-line::after { + left: 38%; + } + .t-line::after { + top: 3.5rem; + } + .t-line::after { + bottom: 0px; + } + .t-line::after { + height: 100%; + } + .t-line::after { + width: 1px; + } + .t-line::after { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); + } + .t-line::after { + --tw-content: ""; + content: var(--tw-content); + } + @media (min-width: 768px) { + .t-line::after { + left: 18%; + } + } + @media (min-width: 1024px) { + .t-line::after { + left: 28%; + } + } +} + .sr-only { position: absolute; width: 1px; @@ -1355,10 +1433,6 @@ header { margin-bottom: 0.25rem; } -.mb-12 { - margin-bottom: 3rem; -} - .mb-2 { margin-bottom: 0.5rem; } @@ -2830,10 +2904,6 @@ header { padding-bottom: 1rem; } -.pb-6 { - padding-bottom: 1.5rem; -} - .pb-8 { padding-bottom: 2rem; } @@ -2870,10 +2940,6 @@ header { padding-left: 1rem; } -.pl-5 { - padding-left: 1.25rem; -} - .pl-6 { padding-left: 1.5rem; } @@ -3791,11 +3857,6 @@ main .section.top-border { margin-right: 1.25rem; } - .md\:my-4 { - margin-top: 1rem; - margin-bottom: 1rem; - } - .md\:mb-0 { margin-bottom: 0px; } @@ -4085,10 +4146,6 @@ main .section.top-border { margin-bottom: 1rem; } - .lg\:mb-0 { - margin-bottom: 0px; - } - .lg\:mb-8 { margin-bottom: 2rem; } @@ -4165,10 +4222,6 @@ main .section.top-border { max-width: 42rem; } - .lg\:max-w-4xl { - max-width: 56rem; - } - .lg\:max-w-7xl { max-width: 80rem; } diff --git a/styles/tailwind.css b/styles/tailwind.css index 0f27b1274..1a3323b70 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -206,6 +206,12 @@ header { @apply h-[52px] md:h-[80px] lg:h-[179px] bg-white print:hidden; } + + .timeline > *:not(:last-child) { + .t-line::after { + @apply content-[""] left-[38%] md:left-[18%] lg:left-[28%] w-px h-full absolute top-14 bottom-0 bg-danahergray-300; + } + } } @layer utilities { From 725f19e2273e1e2d2407de5c12fb9d48f2e8d98d Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 7 May 2024 17:42:22 +0530 Subject: [PATCH 21/88] Fixed timeline block --- blocks/timeline/timeline.css | 934 +++++++++++++++++++++++++++++++++++ build-css.js | 2 +- styles/styles.css | 216 ++++++++ styles/tailwind.css | 64 +++ 4 files changed, 1215 insertions(+), 1 deletion(-) create mode 100644 blocks/timeline/timeline.css diff --git a/blocks/timeline/timeline.css b/blocks/timeline/timeline.css new file mode 100644 index 000000000..a7357067c --- /dev/null +++ b/blocks/timeline/timeline.css @@ -0,0 +1,934 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.timeline-wrapper :is(.pointer-events-none) { + pointer-events: none; +} + +.timeline-wrapper :is(.relative) { + position: relative; +} + +.timeline-wrapper :is(.bottom-0) { + bottom: 0px; +} + +.timeline-wrapper :is(.bottom-4) { + bottom: 1rem; +} + +.timeline-wrapper :is(.top-14) { + top: 3.5rem; +} + +.timeline-wrapper :is(.float-right) { + float: right; +} + +.timeline-wrapper :is(.m-0) { + margin: 0px; +} + +.timeline-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.timeline-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.timeline-wrapper :is(.mb-8) { + margin-bottom: 2rem; +} + +.timeline-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.timeline-wrapper :is(.mt-auto) { + margin-top: auto; +} + +.timeline-wrapper :is(.line-clamp-2) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.timeline-wrapper :is(.block) { + display: block; +} + +.timeline-wrapper :is(.flex) { + display: flex; +} + +.timeline-wrapper :is(.inline-flex) { + display: inline-flex; +} + +.timeline-wrapper :is(.grid) { + display: grid; +} + +.timeline-wrapper :is(.hidden) { + display: none; +} + +.timeline-wrapper :is(.h-10) { + height: 2.5rem; +} + +.timeline-wrapper :is(.h-full) { + height: 100%; +} + +.timeline-wrapper :is(.\!w-\[15\%\]) { + width: 15% !important; +} + +.timeline-wrapper :is(.w-9) { + width: 2.25rem; +} + +.timeline-wrapper :is(.w-\[47\%\]) { + width: 47%; +} + +.timeline-wrapper :is(.w-\[85\%\]) { + width: 85%; +} + +.timeline-wrapper :is(.w-full) { + width: 100%; +} + +.timeline-wrapper :is(.cursor-pointer) { + cursor: pointer; +} + +.timeline-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.timeline-wrapper :is(.flex-row) { + flex-direction: row; +} + +.timeline-wrapper :is(.flex-col) { + flex-direction: column; +} + +.timeline-wrapper :is(.items-center) { + align-items: center; +} + +.timeline-wrapper :is(.items-stretch) { + align-items: stretch; +} + +.timeline-wrapper :is(.justify-center) { + justify-content: center; +} + +.timeline-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.timeline-wrapper :is(.gap-1) { + gap: 0.25rem; +} + +.timeline-wrapper :is(.gap-3) { + gap: 0.75rem; +} + +.timeline-wrapper :is(.gap-4) { + gap: 1rem; +} + +.timeline-wrapper :is(.\!rounded-full) { + border-radius: 9999px !important; +} + +.timeline-wrapper :is(.rounded) { + border-radius: 0.25rem; +} + +.timeline-wrapper :is(.border) { + border-width: 1px; +} + +.timeline-wrapper :is(.border-black) { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); +} + +.timeline-wrapper :is(.bg-danaherblue-600) { + --tw-bg-opacity: 1; + background-color: rgb(13 49 114 / var(--tw-bg-opacity)); +} + +.timeline-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.timeline-wrapper :is(.bg-gray-50) { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} + +.timeline-wrapper :is(.p-4) { + padding: 1rem; +} + +.timeline-wrapper :is(.px-2) { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.timeline-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.timeline-wrapper :is(.py-4) { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.timeline-wrapper :is(.py-8) { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.timeline-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.timeline-wrapper :is(.pb-2) { + padding-bottom: 0.5rem; +} + +.timeline-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.timeline-wrapper :is(.text-xl) { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.timeline-wrapper :is(.text-xs) { + font-size: 0.75rem; + line-height: 1rem; +} + +.timeline-wrapper :is(.font-bold) { + font-weight: 700; +} + +.timeline-wrapper :is(.font-extralight) { + font-weight: 200; +} + +.timeline-wrapper :is(.font-normal) { + font-weight: 200; +} + +.timeline-wrapper :is(.not-italic) { + font-style: normal; +} + +.timeline-wrapper :is(.leading-4) { + line-height: 1rem; +} + +.timeline-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.timeline-wrapper :is(.tracking-wider) { + letter-spacing: 0.05em; +} + +.timeline-wrapper :is(.text-danahergray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.timeline-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.timeline-wrapper :is(.text-gray-400) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.timeline-wrapper :is(.text-white) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.timeline-wrapper :is(.shadow-md) { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.timeline-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.timeline-wrapper :is(.hover\:shadow-sm:hover) { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.timeline-wrapper :is(.peer:checked ~ .peer-checked\:border-0) { + border-width: 0px; +} + +.timeline-wrapper :is(.peer:checked ~ .peer-checked\:bg-danaherpurple-500) { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +.timeline-wrapper :is(.peer:checked ~ .peer-checked\:shadow-sm) { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.timeline-wrapper :is(.peer:hover ~ .peer-hover\:border-0) { + border-width: 0px; +} + +.timeline-wrapper :is(.peer:hover ~ .peer-hover\:bg-danaherpurple-500) { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +@media (min-width: 640px) { + .timeline-wrapper :is(.sm\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (min-width: 768px) { + .timeline-wrapper :is(.md\:line-clamp-3) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + } + + .timeline-wrapper :is(.md\:inline-flex) { + display: inline-flex; + } + + .timeline-wrapper :is(.md\:h-20) { + height: 5rem; + } + + .timeline-wrapper :is(.md\:w-10) { + width: 2.5rem; + } + + .timeline-wrapper :is(.md\:flex-row) { + flex-direction: row; + } + + .timeline-wrapper :is(.md\:pb-2) { + padding-bottom: 0.5rem; + } + + .timeline-wrapper :is(.md\:leading-7) { + line-height: 1.75rem; + } +} + +@media (min-width: 1024px) { + .timeline-wrapper :is(.lg\:block) { + display: block; + } + + .timeline-wrapper :is(.lg\:\!w-\[47\%\]) { + width: 47% !important; + } + + .timeline-wrapper :is(.lg\:\!w-\[6\%\]) { + width: 6% !important; + } + + .timeline-wrapper :is(.lg\:grid-cols-4) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .timeline-wrapper :is(.lg\:flex-row-reverse) { + flex-direction: row-reverse; + } +} + +.timeline-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_\*\]\:text-white *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.timeline-wrapper :is(.peer:hover ~ .peer-hover\:\[\&_\*\]\:text-white *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.timeline-wrapper :is(.\[\&_svg\]\:h-6 svg) { + height: 1.5rem; +} + +.timeline-wrapper :is(.\[\&_svg\]\:w-6 svg) { + width: 1.5rem; +} + +.timeline-wrapper :is(.\[\&_svg\]\:fill-white svg) { + fill: #fff; +} \ No newline at end of file diff --git a/build-css.js b/build-css.js index f8da59532..3aa983924 100644 --- a/build-css.js +++ b/build-css.js @@ -217,7 +217,7 @@ const fileMappings = [ wrapper: 'testimonial-wrapper', }, { - input: './blocks/timeline/timeline-dev.css', + content: './blocks/timeline/timeline.js', output: './blocks/timeline/timeline.css', wrapper: 'timeline-wrapper', }, diff --git a/styles/styles.css b/styles/styles.css index 405703adc..dc3a14438 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -994,6 +994,222 @@ header { } } +.topic main, .topichub main { + margin-left: auto; + margin-right: auto; + display: grid; + max-width: 80rem; + padding-left: 1rem; + padding-right: 1rem; +} + +@media (min-width: 1024px) { + .topic main, .topichub main { + grid-template-columns: repeat(12, minmax(0, 1fr)); + padding-left: 0px; + padding-right: 0px; + } +} + +.topic main > div, .topichub main > div { + margin-bottom: 0.5rem; + flex: 1 1 0%; +} + +.topic main > div > :not([hidden]) ~ :not([hidden]), .topichub main > div > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.topic main > div, .topichub main > div { + padding: 0px; +} + +@media (min-width: 1024px) { + .topic main > div, .topichub main > div { + grid-column: span 8 / span 8; + grid-column-start: 5; + } +} + +.topic main > .side-nav-container, .topichub main > .side-nav-container { + display: none; + padding: 0px; +} + +@media (min-width: 1024px) { + .topic main > .side-nav-container, .topichub main > .side-nav-container { + grid-column: span 3 / span 3; + grid-column-start: 1; + grid-row: span 6 / span 6; + display: block; + } + + .topic main > .side-nav-container + .section, .topichub main > .side-nav-container + .section { + padding-top: 1rem; + } +} + +.topic main p:not(.show-modal-btn) { + margin-bottom: 1rem; + font-size: 1.125rem; + line-height: 1.75rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.topic main .section.social-media-container, main .section.takeway-container, main .section.call-to-action-container { + padding: 0px; +} + +.processstep main .default-content-wrapper.section.side-nav-container { + margin-left: auto; + margin-right: auto; + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +@media (min-width: 1024px) { + .processstep main .default-content-wrapper.section.side-nav-container { + flex-direction: row; + } +} + +.processstep main .default-content-wrapper.section.side-nav-container div:nth-child(2) { + width: 75% !important; +} + +.processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper { + width: 20rem !important; + padding-left: 1rem !important; +} + +.processstep main .default-content-wrapper.section.side-nav-container > div { + margin-right: 0px !important; + margin-left: 0px !important; + max-width: 64rem !important; +} + +.blog main { + margin-left: auto; + margin-right: auto; + display: flex; + width: 100%; + max-width: 80rem; + flex-direction: row; + gap: 2rem; +} + +.blog main > div { + padding-top: 2.5rem !important; + padding-bottom: 2.5rem !important; +} + +.blog main > div:empty { + display: none; +} + +@media (min-width: 640px) { + .blog main > div { + padding-top: 2rem !important; + padding-bottom: 2rem !important; + } +} + +@media (min-width: 768px) { + .blog main > div { + padding-left: 1.25rem !important; + padding-right: 1.25rem !important; + } +} + +.blog main .recent-articles-container { + display: none; + flex-shrink: 0; +} + +.blog main .recent-articles-container > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.blog main .recent-articles-container { + --tw-bg-opacity: 1; + background-color: rgb(245 239 255 / var(--tw-bg-opacity)); + padding-top: 7rem !important; + padding-bottom: 7rem !important; +} + +@media (min-width: 1024px) { + .blog main .recent-articles-container { + display: block; + width: 23rem; + } +} + +.library main { + margin-left: auto; + margin-right: auto; + display: flex; + width: 100%; + max-width: 80rem; + flex-direction: row; + gap: 2rem; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.library main > div { + padding-top: 2.5rem !important; + padding-bottom: 2.5rem !important; +} + +.library main > div:empty { + display: none; +} + +@media (min-width: 640px) { + .library main > div { + padding-top: 2rem !important; + padding-bottom: 2rem !important; + } +} + +@media (min-width: 768px) { + .library main > div { + padding-left: 1.25rem !important; + padding-right: 1.25rem !important; + } +} + +.library main .recent-articles-container { + display: none; + flex-shrink: 0; +} + +.library main .recent-articles-container > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.library main .recent-articles-container { + --tw-bg-opacity: 1; + background-color: rgb(245 239 255 / var(--tw-bg-opacity)); + padding-top: 7rem !important; + padding-bottom: 7rem !important; +} + +@media (min-width: 1024px) { + .library main .recent-articles-container { + display: block; + width: 23rem; + } +} + .pointer-events-none { pointer-events: none; } diff --git a/styles/tailwind.css b/styles/tailwind.css index 222e20944..83969f7d8 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -206,6 +206,70 @@ @apply h-[52px] md:h-[80px] lg:h-[179px] bg-white print:hidden; } + .topic main, .topichub main { + @apply grid px-4 lg:px-0 max-w-7xl mx-auto lg:grid-cols-12; + } + + .topic main > div, .topichub main > div { + @apply lg:col-span-8 lg:col-start-5 space-y-4 mb-2 flex-1 p-0; + } + + .topic main > .side-nav-container, .topichub main > .side-nav-container { + @apply hidden lg:block lg:col-span-3 lg:col-start-1 lg:row-span-6 p-0; + } + + .topic main > .side-nav-container + .section, .topichub main > .side-nav-container + .section { + @apply lg:pt-4 + } + + .topic main p:not(.show-modal-btn) { + @apply leading-7 text-lg mb-4 text-danahergray-700; + } + + .topic main .section.social-media-container, main .section.takeway-container, main .section.call-to-action-container { + @apply p-0; + } + + .processstep main .default-content-wrapper.section.side-nav-container { + @apply flex flex-col lg:flex-row mx-auto gap-6; + } + + .processstep main .default-content-wrapper.section.side-nav-container div:nth-child(2) { + @apply !w-9/12; + } + + .processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper{ + @apply !pl-4 !w-80; + } + + .processstep main .default-content-wrapper.section.side-nav-container > div{ + @apply !max-w-5xl !mr-0 !ml-0; + } + + .blog main { + @apply mx-auto max-w-7xl flex flex-row gap-8 w-full; + } + + .blog main > div { + @apply !py-10 sm:!py-8 md:!px-5 empty:hidden; + } + + .blog main .recent-articles-container { + @apply hidden lg:block lg:w-recent-articles bg-danaherpurple-25 space-y-4 !py-28 shrink-0; + } + + .library main { + @apply flex flex-row gap-8 max-w-7xl mx-auto w-full bg-white; + } + + .library main > div { + @apply !py-10 sm:!py-8 md:!px-5 empty:hidden; + } + + .library main .recent-articles-container { + @apply hidden lg:block lg:w-recent-articles bg-danaherpurple-25 space-y-4 !py-28 shrink-0; + } + .timeline > *:not(:last-child) { .t-line::after { @apply content-[""] left-[38%] md:left-[18%] lg:left-[28%] w-px h-full absolute top-14 bottom-0 bg-danahergray-300; From b5fa985a419cd1c16a0f9ec5360b8a756ac933bd Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 7 May 2024 17:58:12 +0530 Subject: [PATCH 22/88] Removed dropdown jump menu for desktop --- blocks/page-jump-menu/page-jump-menu.css | 49 ------------------------ blocks/page-tabs/page-tabs.js | 4 +- styles/styles.css | 39 +++++++++++++++++++ styles/tailwind.css | 8 ++++ 4 files changed, 49 insertions(+), 51 deletions(-) diff --git a/blocks/page-jump-menu/page-jump-menu.css b/blocks/page-jump-menu/page-jump-menu.css index 97121915e..f6a90ed24 100644 --- a/blocks/page-jump-menu/page-jump-menu.css +++ b/blocks/page-jump-menu/page-jump-menu.css @@ -555,10 +555,6 @@ video { z-index: 10; } -.page-jump-menu-wrapper :is(.order-last) { - order: 9999; -} - .page-jump-menu-wrapper :is(.-mt-20) { margin-top: -5rem; } @@ -599,10 +595,6 @@ video { width: 2rem; } -.page-jump-menu-wrapper :is(.w-auto) { - width: auto; -} - .page-jump-menu-wrapper :is(.w-full) { width: 100%; } @@ -616,10 +608,6 @@ video { overflow: hidden; } -.page-jump-menu-wrapper :is(.rounded) { - border-radius: 0.25rem; -} - .page-jump-menu-wrapper :is(.rounded-full) { border-radius: 9999px; } @@ -628,15 +616,6 @@ video { border-radius: 0px; } -.page-jump-menu-wrapper :is(.border) { - border-width: 1px; -} - -.page-jump-menu-wrapper :is(.border-gray-300) { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - .page-jump-menu-wrapper :is(.\!bg-danaherpurple-500) { --tw-bg-opacity: 1 !important; background-color: rgb(117 35 255 / var(--tw-bg-opacity)) !important; @@ -673,11 +652,6 @@ video { padding-right: 0px; } -.page-jump-menu-wrapper :is(.px-4) { - padding-left: 1rem; - padding-right: 1rem; -} - .page-jump-menu-wrapper :is(.py-2) { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -687,19 +661,10 @@ video { padding-left: 0.75rem; } -.page-jump-menu-wrapper :is(.pl-4) { - padding-left: 1rem; -} - .page-jump-menu-wrapper :is(.pr-2) { padding-right: 0.5rem; } -.page-jump-menu-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .page-jump-menu-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; @@ -727,11 +692,6 @@ video { color: rgb(51 51 51 / var(--tw-text-opacity)); } -.page-jump-menu-wrapper :is(.text-danaherblue-600) { - --tw-text-opacity: 1; - color: rgb(13 49 114 / var(--tw-text-opacity)); -} - .page-jump-menu-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); @@ -748,11 +708,6 @@ video { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.page-jump-menu-wrapper :is(.focus\:outline-none:focus) { - outline: 2px solid transparent; - outline-offset: 2px; -} - .page-jump-menu-wrapper :is(.group:hover .group-hover\:bg-danaherpurple-500) { --tw-bg-opacity: 1; background-color: rgb(117 35 255 / var(--tw-bg-opacity)); @@ -772,10 +727,6 @@ video { display: block; } - .page-jump-menu-wrapper :is(.md\:hidden) { - display: none; - } - .page-jump-menu-wrapper :is(.md\:px-4) { padding-left: 1rem; padding-right: 1rem; diff --git a/blocks/page-tabs/page-tabs.js b/blocks/page-tabs/page-tabs.js index 40089f1d0..ef0dbd15c 100644 --- a/blocks/page-tabs/page-tabs.js +++ b/blocks/page-tabs/page-tabs.js @@ -85,9 +85,9 @@ export function createTabList(tabs, currentTab, isJumpMenu) { // For mobile view export function createDropdownList(tabs, currentTab, isJumpMenu) { const dropdownWrapper = div( - { class: 'block w-full px-4 py-2 bg-white md:hidden order-last' }, + { class: 'mobile-jump-menu' }, select( - { id: 'selectedTabId', class: 'block w-auto py-2 pl-4 text-base border border-gray-300 rounded text-danaherblue-600 focus:outline-none', 'aria-label': 'selectedTabId' }, + { id: 'selectedTabId', 'aria-label': 'selectedTabId' }, ...tabs.map((tab) => { const value = isJumpMenu ? tab.link : tab.id; const isSelectedTab = tab.id === currentTab; diff --git a/styles/styles.css b/styles/styles.css index dc3a14438..c5220ac74 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1210,6 +1210,45 @@ header { } } +.appear > div.mobile-jump-menu { + order: 9999; + display: block; + width: 100%; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +@media (min-width: 768px) { + .appear > div.mobile-jump-menu { + display: none; + } +} + +body > div > select#selectedTabId { + display: block; + width: auto; + border-radius: 0.25rem; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgb(13 49 114 / var(--tw-text-opacity)); +} + +body > div > select#selectedTabId:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + .pointer-events-none { pointer-events: none; } diff --git a/styles/tailwind.css b/styles/tailwind.css index 83969f7d8..ab05a8c7f 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -275,6 +275,14 @@ @apply content-[""] left-[38%] md:left-[18%] lg:left-[28%] w-px h-full absolute top-14 bottom-0 bg-danahergray-300; } } + + .appear > div.mobile-jump-menu { + @apply block w-full px-4 py-2 bg-white md:hidden order-last; + } + + body > div > select#selectedTabId { + @apply block w-auto py-2 pl-4 text-base border border-gray-300 rounded text-danaherblue-600 focus:outline-none; + } } @layer utilities { From 42bb1b37f9a5f3a9e221e76c1b80be8c4dc1fce3 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 7 May 2024 18:05:12 +0530 Subject: [PATCH 23/88] Fixed lint issues --- blocks/page-tabs/page-tabs.js | 2 +- styles/styles.css | 4 ++-- styles/tailwind.css | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/blocks/page-tabs/page-tabs.js b/blocks/page-tabs/page-tabs.js index ef0dbd15c..6f8e85798 100644 --- a/blocks/page-tabs/page-tabs.js +++ b/blocks/page-tabs/page-tabs.js @@ -87,7 +87,7 @@ export function createDropdownList(tabs, currentTab, isJumpMenu) { const dropdownWrapper = div( { class: 'mobile-jump-menu' }, select( - { id: 'selectedTabId', 'aria-label': 'selectedTabId' }, + { id: 'selectedTabId', class: 'selected-tab', 'aria-label': 'selectedTabId' }, ...tabs.map((tab) => { const value = isJumpMenu ? tab.link : tab.id; const isSelectedTab = tab.id === currentTab; diff --git a/styles/styles.css b/styles/styles.css index c5220ac74..83f158cad 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1228,7 +1228,7 @@ header { } } -body > div > select#selectedTabId { +.appear > div > select.selected-tab { display: block; width: auto; border-radius: 0.25rem; @@ -1244,7 +1244,7 @@ body > div > select#selectedTabId { color: rgb(13 49 114 / var(--tw-text-opacity)); } -body > div > select#selectedTabId:focus { +.appear > div > select.selected-tab:focus { outline: 2px solid transparent; outline-offset: 2px; } diff --git a/styles/tailwind.css b/styles/tailwind.css index ab05a8c7f..97893a654 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -280,7 +280,7 @@ @apply block w-full px-4 py-2 bg-white md:hidden order-last; } - body > div > select#selectedTabId { + .appear > div > select.selected-tab { @apply block w-auto py-2 pl-4 text-base border border-gray-300 rounded text-danaherblue-600 focus:outline-none; } } From e7376e783afdeb83974d155354b7893c3ba7866d Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 7 May 2024 20:58:17 +0530 Subject: [PATCH 24/88] Style updated for page jump menu From ecea6ccee3bdaf526f0564972d6732928a369783 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Wed, 8 May 2024 14:03:55 +0530 Subject: [PATCH 25/88] Accordion title colour (eyebrow) css not working --- blocks/accordion/accordion.css | 9 ++++----- blocks/card-list/card-list.css | 2 +- blocks/carousel/carousel.css | 9 ++++----- tailwind.config.js | 11 +++++------ 4 files changed, 14 insertions(+), 17 deletions(-) diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index 18809b7d4..035ffab80 100644 --- a/blocks/accordion/accordion.css +++ b/blocks/accordion/accordion.css @@ -535,11 +535,10 @@ video { } .eyebrow { - color: #7523FF; - font-size: 0.75rem; - font-weight: 700; - letter-spacing: 0.125em; - text-transform: uppercase; + color: #4000A5; + font-size: 1.125rem; + font-weight: 500; + line-height: 1.75rem; } .accordion-wrapper :is(.absolute) { diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index 9e0b83793..6e039df82 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -573,7 +573,7 @@ video { } .eyebrow-sm { - color: #7523FF; + color: #4000A5; font-size: 0.875rem; line-height: 1.25rem; opacity: 1; diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index ae4cbe0a6..ed336f95e 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -546,11 +546,10 @@ video { } .eyebrow { - color: #7523FF; - font-size: 0.75rem; - font-weight: 700; - letter-spacing: 0.125em; - text-transform: uppercase; + color: #4000A5; + font-size: 1.125rem; + font-weight: 500; + line-height: 1.75rem; } .btn-outline-trending-brand { diff --git a/tailwind.config.js b/tailwind.config.js index 88839fcd9..f1835a751 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -40,14 +40,13 @@ module.exports = { position : 'relative', }, '.eyebrow': { - color: theme('colors.danaherpurple.500'), - fontSize: '0.75rem', - fontWeight: '700', - letterSpacing: '0.125em', - textTransform: 'uppercase', + color: theme('colors.danaherpurple.800'), + fontSize: '1.125rem', + fontWeight: '500', + lineHeight: '1.75rem', }, '.eyebrow-sm': { - color: theme('colors.danaherpurple.500'), + color: theme('colors.danaherpurple.800'), fontSize: '0.875rem', lineHeight: '1.25rem', opacity: '1', From 33ecc7aa07fdfff4b1ae8dc0e27571cc0cd771fe Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Wed, 8 May 2024 18:25:39 +0530 Subject: [PATCH 26/88] News/Blog, Library cards styling issue --- blocks/card-list/articleCard.js | 2 +- blocks/card-list/card-list.css | 4 ++++ blocks/card-list/libraryCard.js | 2 +- blocks/cards/cards.css | 4 ++++ blocks/cards/cards.js | 2 +- 5 files changed, 11 insertions(+), 3 deletions(-) diff --git a/blocks/card-list/articleCard.js b/blocks/card-list/articleCard.js index ac6853a23..7d5f6a4fb 100644 --- a/blocks/card-list/articleCard.js +++ b/blocks/card-list/articleCard.js @@ -28,7 +28,7 @@ export default function createCard(article, firstCard = false) { h2( { class: - 'text-xl text-black font-medium mb-4 line-clamp-3 break-words !h-20', + 'text-xl text-black font-medium mb-4 mt-4 line-clamp-3 break-words !h-20', }, cardTitle, ), diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index 6e039df82..c66618b6c 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -617,6 +617,10 @@ video { margin-top: 0.75rem; } +.card-list-wrapper :is(.mt-4) { + margin-top: 1rem; +} + .card-list-wrapper :is(.mt-8) { margin-top: 2rem; } diff --git a/blocks/card-list/libraryCard.js b/blocks/card-list/libraryCard.js index f1ceda9bc..92f80aa26 100644 --- a/blocks/card-list/libraryCard.js +++ b/blocks/card-list/libraryCard.js @@ -20,7 +20,7 @@ export default function createCard(article, firstCard = false) { h2( { class: - 'text-xl text-black font-medium mb-4 line-clamp-3 break-words !h-20', + 'text-xl text-black font-medium mb-4 mt-4 line-clamp-3 break-words !h-20', }, cardTitle, ), diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index d3aa88cfc..25ebb4656 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -609,6 +609,10 @@ video { height: 5rem !important; } +.cards-wrapper :is(.\!h-24) { + height: 6rem !important; +} + .cards-wrapper :is(.h-48) { height: 12rem; } diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js index 36c2485da..653c32d4a 100644 --- a/blocks/cards/cards.js +++ b/blocks/cards/cards.js @@ -39,7 +39,7 @@ export default function decorate(block) { elem.className = 'cards-card-body p-4 bg-white rounded-b px-0 py-2'; } if (elem?.querySelector('h3')) elem.querySelector('h3').className = '!line-clamp-2 !h-16 !text-2xl !font-normal'; - if (elem?.querySelector('h3') && !block.classList.contains('opco')) elem.querySelector('h3').className = 'pl-2 text-lg font-semibold text-danahergray-900 !line-clamp-3 !break-words !h-20'; + if (elem?.querySelector('h3') && !block.classList.contains('opco')) elem.querySelector('h3').className = 'pl-2 text-lg font-semibold text-danahergray-900 !line-clamp-3 !break-words !h-24'; if (elem?.querySelector('p')) elem.querySelector('p').className = 'mb-4 text-sm text-gray-500 !h-20 !line-clamp-4 !break-words'; if (elem?.querySelector('p') && !block.classList.contains('opco')) elem.querySelector('p').className = 'pl-2 mb-4 text-sm text-gray-500 !h-20 !line-clamp-4 !break-words'; }); From 84ab8ef3eaa16bf17ce9c193a5380dc340b982ed Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 8 May 2024 18:37:51 +0530 Subject: [PATCH 27/88] Column CSS merged in JS --- blocks/columns/columns-dev.css | 143 ------------- blocks/columns/columns.css | 377 --------------------------------- blocks/columns/columns.js | 45 +++- styles/styles.css | 266 +++++++++++++++++++++++ styles/tailwind.css | 80 +++++++ 5 files changed, 386 insertions(+), 525 deletions(-) diff --git a/blocks/columns/columns-dev.css b/blocks/columns/columns-dev.css index 15690a428..b28b04f64 100644 --- a/blocks/columns/columns-dev.css +++ b/blocks/columns/columns-dev.css @@ -1,146 +1,3 @@ -.columns-2-cols > div { - @apply container max-w-7xl mx-auto grid grid-cols-1 gap-x-12 gap-y-4 lg:grid-cols-2 justify-items-center; -} -.columns-3-cols > div { - @apply container max-w-7xl mx-auto grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-3 justify-items-center items-center; -} -.columns-3-cols > div div > h4 { - @apply font-bold; -} -.columns > div > div { - @apply w-full order-1; -} - -.columns > div > div:first-child { - @apply align-text-top pb-7 py-0 my-0; -} - -.columns h2 { - @apply my-0 lg:my-4 font-medium text-4xl2 inline-flex leading-10 text-danahergray-900; -} - -.columns:not(.columns-2-cols) > div div > p:not(.button-container) { - @apply text-lg block leading-5; -} - -.columns > div > div .button-container > a { - @apply bg-transparent no-underline text-lg px-5 py-3 text-danaherpurple-500 border border-danaherpurple-500 leading-5 rounded-full font-medium mt-6 ease-in-out duration-150 transition-all; -} - -.columns > div > div .button-container > a:hover { - @apply bg-danaherpurple-500 text-white; -} - -.columns > div > .columns-img-col img { - @apply block; -} - -.columns.bottom-border-right > div > div > p.link { - @apply border-b border-solid border-black my-6; -} - -.columns.bottom-border-right > div > div > p:last-child { - @apply !border-0; -} - -main .top-border > div.columns-wrapper:first-child { - @apply !py-0; -} - -.columns.bg-color-right > div > div:nth-child(2) > p { - @apply href-text; -} - -.columns.bg-color-right > div > div:nth-child(2) > p:last-child > a { - @apply btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline; -} - -.columns.bg-color-right > div > div:nth-child(2) { - @apply bg-danaherred-800 pb-10; -} - -.columns.bg-color-right > div > div:nth-child(2) > p:not(.button-container) { - @apply py-2 px-6 leading-7 text-base !text-white; -} - -.columns.bg-color-right > div > div:nth-child(2) > h2, -.columns.bg-color-right > div > div:nth-child(2) > h3, -.columns.bg-color-right > div > div:nth-child(2) > h4 { - @apply py-2 px-6 !text-white; -} - -/* productdetail changes from here */ - -.productdetail main .columns p.embed-vimeo { - @apply my-2; -} - -.productdetail main .columns.columns-2-cols .picdiv p:not(picture) + p:last-child, -.productdetail main .columns p.embed-vimeo~p { - @apply text-sm leading-5 text-gray-300; -} - -.productdetail main .columns p > strong{ - @apply !font-medium !text-lg !leading-5 !text-gray-900; -} - -.productdetail main .columns p { - @apply pt-2 !text-base text-danahergray-700; -} - -.productdetail main .columns.columns-2-cols .h-full { - @apply text-base text-danahergray-700 py-2; -} - -.productdetail main .columns.columns-2-cols .icon svg { - @apply stroke-white stroke-0; -} - -.productdetail main .columns.columns-3-cols { - @apply text-center mb-3; -} - -.productdetail main .default-content-wrapper > p { - @apply w-3/4; -} - -.productdetail main .default-content-wrapper > h2:only-child { - @apply text-center; -} - -.columns.features-card-left > div > div.h-full > .card { - @apply flex flex-row pb-6; -} - -.columns.features-card-left > div > div.h-full > div.card > .left-content { - @apply pr-3; -} - -/* productdetail changes till here */ - -.blog main .section.default-content-wrapper > p { - @apply mt-3 leading-7 text-base text-danahergray-700; -} - -.blog main > .section:first-child { - @apply lg:w-recent-articles-left; -} - -.blog main .columns h2 { - @apply inline-flex font-semibold text-xl text-danahergray-900; -} - -.blog main .columns > div > div > p:not(.button-container) { - @apply mt-3 leading-7 text-base text-danahergray-700; -} - -.blog main > div.columns-container > div.columns-wrapper > div.columns > div { - @apply py-0; -} - -.blog main > div.columns-container > div.columns-wrapper { - @apply bg-white; -} \ No newline at end of file diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index cbf056592..b28b04f64 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -1,380 +1,3 @@ -.columns-2-cols > div { - width: 100%; -} -@media (min-width: 640px) { - .columns-2-cols > div { - max-width: 640px; - } -} -@media (min-width: 768px) { - .columns-2-cols > div { - max-width: 768px; - } -} -@media (min-width: 1024px) { - .columns-2-cols > div { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .columns-2-cols > div { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .columns-2-cols > div { - max-width: 1536px; - } -} - -.columns-2-cols > div { - margin-left: auto; - margin-right: auto; - display: grid; - max-width: 80rem; - grid-template-columns: repeat(1, minmax(0, 1fr)); - justify-items: center; - -moz-column-gap: 3rem; - column-gap: 3rem; - row-gap: 1rem; -} - -@media (min-width: 1024px) { - .columns-2-cols > div { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} - -.columns-3-cols > div { - width: 100%; -} - -@media (min-width: 640px) { - .columns-3-cols > div { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .columns-3-cols > div { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .columns-3-cols > div { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .columns-3-cols > div { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .columns-3-cols > div { - max-width: 1536px; - } -} - -.columns-3-cols > div { - margin-left: auto; - margin-right: auto; - display: grid; - max-width: 80rem; - grid-template-columns: repeat(1, minmax(0, 1fr)); - align-items: center; - justify-items: center; - -moz-column-gap: 2rem; - column-gap: 2rem; - row-gap: 1rem; -} - -@media (min-width: 1024px) { - .columns-3-cols > div { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } -} - -.columns-3-cols > div div > h4 { - font-weight: 700; -} - -.columns > div > div { - order: 1; - width: 100%; -} - -.columns > div > div:first-child { - margin-top: 0px; - margin-bottom: 0px; - padding-top: 0px; - padding-bottom: 0px; - padding-bottom: 1.75rem; - vertical-align: text-top; -} - -.columns h2 { - margin-top: 0px; - margin-bottom: 0px; - display: inline-flex; - font-size: 2.5rem; - font-weight: 500; - line-height: 2.5rem; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -@media (min-width: 1024px) { - .columns h2 { - margin-top: 1rem; - margin-bottom: 1rem; - } -} - -.columns:not(.columns-2-cols) > div div > p:not(.button-container) { - display: block; - font-size: 1.125rem; - line-height: 1.25rem; -} - -.columns > div > div .button-container > a { - margin-top: 1.5rem; - border-radius: 9999px; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); - background-color: transparent; - padding-left: 1.25rem; - padding-right: 1.25rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - font-size: 1.125rem; - font-weight: 500; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); - text-decoration-line: none; - transition-property: all; - transition-duration: 150ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -.columns > div > div .button-container > a:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.columns > div > .columns-img-col img { - display: block; -} - -.columns.bottom-border-right > div > div > p.link { - margin-top: 1.5rem; - margin-bottom: 1.5rem; - border-bottom-width: 1px; - border-style: solid; - --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); -} - -.columns.bottom-border-right > div > div > p:last-child { - border-width: 0px !important; -} - -main .top-border > div.columns-wrapper:first-child { - padding-top: 0px !important; - padding-bottom: 0px !important; -} - -.columns.bg-color-right > div > div:nth-child(2) > p a { - position: relative; - z-index: 0; - text-decoration-line: underline; - text-decoration-color: #7523FF; - text-decoration-thickness: 2px; - text-underline-offset: 4px; - text-decoration-style: solid; - word-break: break-all; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-duration: 500ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -.columns.bg-color-right > div > div:nth-child(2) > p a:hover { - color: rgb(255 255 255); - background-color: #7523FF; -} - -.columns.bg-color-right > div > div:nth-child(2) > p:last-child > a { - color: #7523FF; - background-color: rgb(255 255 255); - border-color: #7523FF; - border-width: 2px; -} - -.columns.bg-color-right > div > div:nth-child(2) > p:last-child > a:hover { - color: rgb(255 255 255); - background-color: #7523FF; -} - -.columns.bg-color-right > div > div:nth-child(2) > p:last-child > a { - border-radius: 9999px; - padding-left: 1.5rem; - padding-right: 1.5rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - font-size: 1.125rem; - line-height: 1.75rem; - text-decoration-line: none !important; -} - -.columns.bg-color-right > div > div:nth-child(2) { - --tw-bg-opacity: 1; - background-color: rgb(122 25 127 / var(--tw-bg-opacity)); - padding-bottom: 2.5rem; -} - -.columns.bg-color-right > div > div:nth-child(2) > p:not(.button-container) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 1.5rem; - padding-right: 1.5rem; - font-size: 1rem; - line-height: 1.75rem; - --tw-text-opacity: 1 !important; - color: rgb(255 255 255 / var(--tw-text-opacity)) !important; -} - -.columns.bg-color-right > div > div:nth-child(2) > h2, -.columns.bg-color-right > div > div:nth-child(2) > h3, -.columns.bg-color-right > div > div:nth-child(2) > h4 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 1.5rem; - padding-right: 1.5rem; - --tw-text-opacity: 1 !important; - color: rgb(255 255 255 / var(--tw-text-opacity)) !important; -} - -/* productdetail changes from here */ - -.productdetail main .columns p.embed-vimeo { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - -.productdetail main .columns.columns-2-cols .picdiv p:not(picture) + p:last-child, -.productdetail main .columns p.embed-vimeo~p { - font-size: 0.875rem; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -.productdetail main .columns p > strong { - font-size: 1.125rem !important; - font-weight: 500 !important; - line-height: 1.25rem !important; - --tw-text-opacity: 1 !important; - color: rgb(17 24 39 / var(--tw-text-opacity)) !important; -} - -.productdetail main .columns p { - padding-top: 0.5rem; - font-size: 1rem !important; - line-height: 1.5rem !important; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.productdetail main .columns.columns-2-cols .h-full { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-size: 1rem; - line-height: 1.5rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.productdetail main .columns.columns-2-cols .icon svg { - stroke: #fff; - stroke-width: 0; -} - -.productdetail main .columns.columns-3-cols { - margin-bottom: 0.75rem; - text-align: center; -} - -.productdetail main .default-content-wrapper > p { - width: 75%; -} - -.productdetail main .default-content-wrapper > h2:only-child { - text-align: center; -} - -.columns.features-card-left > div > div.h-full > .card { - display: flex; - flex-direction: row; - padding-bottom: 1.5rem; -} - -.columns.features-card-left > div > div.h-full > div.card > .left-content { - padding-right: 0.75rem; -} - -/* productdetail changes till here */ - -.blog main .section.default-content-wrapper > p { - margin-top: 0.75rem; - font-size: 1rem; - line-height: 1.75rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -@media (min-width: 1024px) { - .blog main > .section:first-child { - width: calc(100% - 25rem); - } -} - -.blog main .columns h2 { - display: inline-flex; - font-size: 1.25rem; - line-height: 1.75rem; - font-weight: 700; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.blog main .columns > div > div > p:not(.button-container) { - margin-top: 0.75rem; - font-size: 1rem; - line-height: 1.75rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.blog main > div.columns-container > div.columns-wrapper > div.columns > div { - padding-top: 0px; - padding-bottom: 0px; -} - -.blog main > div.columns-container > div.columns-wrapper { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} \ No newline at end of file diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js index 11f5eb7a3..5153c6e01 100644 --- a/blocks/columns/columns.js +++ b/blocks/columns/columns.js @@ -3,13 +3,41 @@ import { } from '../../scripts/dom-builder.js'; export default function decorate(block) { - if (block.parentElement.className.includes('columns-wrapper')) { - block.parentElement.classList - .add(...'max-w-7xl w-full mx-auto'.split(' ')); - } const cols = [...block.firstElementChild.children]; block.classList.add(`columns-${cols.length}-cols`); const imageAspectRatio = 1.7778; + block.querySelectorAll('div').forEach((ele, index) => { + ele.classList.add('w-full', 'order-1'); + if (index === 0) ele.classList.add(...'align-text-top pb-7 py-0 my-0'.split(' ')); + }); + block.querySelectorAll('h2').forEach((ele) => { + ele.classList.add(...'my-0 lg:my-4 font-medium text-4xl2 inline-flex leading-10 text-danahergray-900'.split(' ')); + }); + block.querySelectorAll('.button-container > a').forEach((ele) => { + ele.classList.add(...'bg-transparent no-underline text-lg px-5 py-3 text-danaherpurple-500 border border-danaherpurple-500 leading-5 rounded-full font-medium mt-6 ease-in-out duration-150 transition-all hover:bg-danaherpurple-500 hover:text-white'.split(' ')); + }); + + if (block.className.includes('bottom-border-right')) { + block.querySelectorAll('div > div:nth-child(2) > p > a').forEach((ele, index, arr) => { + if (index === arr.length - 1) ele.parentElement?.classList.add('border-0'); + else ele.parentElement?.classList.add(...'border-b border-solid border-black my-6'.split(' ')); + }); + } + + if (block.className.includes('bg-color-right')) { + const divEl = block.querySelector('div > div:nth-child(2)'); + divEl.classList.add('bg-danaherred-800', 'pb-10'); + divEl.querySelectorAll('p').forEach((ele, index, arr) => { + if (!ele.className.includes('.button-container')) ele.classList.add(...'py-2 px-6 leading-7 text-base !text-white'.split(' ')); + ele.classList.add('href-text'); + if (index === arr.length - 1) { + ele.querySelector('a')?.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline'.split(' ')); + } + }); + divEl.querySelectorAll('h2, h3, h4').forEach((ele) => { + ele.classList.add(...'py-2 px-6 !text-white'.split(' ')); + }); + } // setup image columns [...block.children].forEach((col) => { @@ -54,13 +82,19 @@ export default function decorate(block) { row.append(cardDiv); } else if (rightDiv) rightDiv.append(element); }); - } else if (block.className.includes('columns-2-cols')) { + } + if (block.className.includes('columns-2-cols')) { + block.firstElementChild?.classList.add(...'container max-w-7xl mx-auto grid grid-cols-1 gap-x-12 gap-y-4 lg:grid-cols-2 justify-items-center'.split(' ')); const pTags = row.querySelectorAll('p'); pTags.forEach((element) => { if (element?.firstElementChild?.nodeName?.toLowerCase() === 'picture') { element.parentElement.classList.add('picdiv'); } }); + } else if (block.className.includes('columns-3-cols')) { + block.firstElementChild?.classList.add(...'container max-w-7xl mx-auto grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-3 justify-items-center items-center'.split(' ')); + const heading = block.querySelector('h4'); + heading?.classList.add('font-bold'); } const anc = row.querySelectorAll('p > a'); @@ -80,6 +114,7 @@ export default function decorate(block) { if (picWrapper && picWrapper.children.length === 1) { // picture is only content in column picWrapper.classList.add('columns-img-col', 'order-none'); + pic.querySelector('img').classList.add('block'); } } }); diff --git a/styles/styles.css b/styles/styles.css index d3edab455..73e43c32b 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -722,6 +722,25 @@ body.appear { width: 1.5rem; } +.columns.features-card-left > div > div.icon svg > .card { + display: flex; + flex-direction: row; + padding-bottom: 1.5rem; +} + +.columns.features-card-left > div > div.icon svg > div.card > .left-content { + padding-right: 0.75rem; +} + +.productdetail main .columns.columns-2-cols .icon svg { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + .icon svg { height: 100%; width: 100%; @@ -1078,6 +1097,30 @@ header { } .\!timeline > *:not(:last-child) { + .columns.features-card-left > div > div > .card { + display: flex; + } + .columns.features-card-left > div > div > .card { + flex-direction: row; + } + .columns.features-card-left > div > div > .card { + padding-bottom: 1.5rem; + } + .columns.features-card-left > div > div > div.card > .left-content { + padding-right: 0.75rem; + } + .productdetail main .columns.columns-2-cols { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + .productdetail main .columns.columns-2-cols { + font-size: 1rem; + line-height: 1.5rem; + } + .productdetail main .columns.columns-2-cols { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); + } { position: absolute; } @@ -1117,6 +1160,30 @@ header { } .timeline > *:not(:last-child) { + .columns.features-card-left > div > div.t-line > .card::after { + display: flex; + } + .columns.features-card-left > div > div.t-line > .card::after { + flex-direction: row; + } + .columns.features-card-left > div > div.t-line > .card::after { + padding-bottom: 1.5rem; + } + .columns.features-card-left > div > div.t-line > div.card > .left-content::after { + padding-right: 0.75rem; + } + .productdetail main .columns.columns-2-cols .t-line::after { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + .productdetail main .columns.columns-2-cols .t-line::after { + font-size: 1rem; + line-height: 1.5rem; + } + .productdetail main .columns.columns-2-cols .t-line::after { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); + } .t-line::after { position: absolute; } @@ -1155,6 +1222,124 @@ header { } } +.columns:not(.columns-2-cols) > div div > p:not(.button-container) { + display: block; + font-size: 1.125rem; + line-height: 1.25rem; +} + +.columns.features-card-left > div > div.h-full > .card { + display: flex; + flex-direction: row; + padding-bottom: 1.5rem; +} + +.columns.features-card-left > div > div.h-full > div.card > .left-content { + padding-right: 0.75rem; +} + +main .top-border > div.columns-wrapper:first-child { + padding-top: 0px !important; + padding-bottom: 0px !important; +} + +.blog main .section.default-content-wrapper > p { + margin-top: 0.75rem; + font-size: 1rem; + line-height: 1.75rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +@media (min-width: 1024px) { + .blog main > .section:first-child { + width: calc(100% - 25rem); + } +} + +.blog main .columns h2 { + display: inline-flex; + font-size: 1.25rem; + line-height: 1.75rem; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.blog main .columns > div > div > p:not(.button-container) { + margin-top: 0.75rem; + font-size: 1rem; + line-height: 1.75rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.blog main > div.columns-container > div.columns-wrapper > div.columns > div { + padding-top: 0px; + padding-bottom: 0px; +} + +.blog main > div.columns-container > div.columns-wrapper { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.productdetail main .columns p.embed-vimeo { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.productdetail main .columns.columns-2-cols .picdiv p:not(picture) + p:last-child, + .productdetail main .columns p.embed-vimeo~p { + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + +.productdetail main .columns p > strong { + font-size: 1.125rem !important; + font-weight: 500 !important; + line-height: 1.25rem !important; + --tw-text-opacity: 1 !important; + color: rgb(17 24 39 / var(--tw-text-opacity)) !important; +} + +.productdetail main .columns p { + padding-top: 0.5rem; + font-size: 1rem !important; + line-height: 1.5rem !important; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.productdetail main .columns.columns-2-cols .h-full { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.productdetail main .columns.columns-2-cols .icon svg { + stroke: #fff; + stroke-width: 0; +} + +.productdetail main .columns.columns-3-cols { + margin-bottom: 0.75rem; + text-align: center; +} + +.productdetail main .default-content-wrapper > p { + width: 75%; +} + +.productdetail main .default-content-wrapper > h2:only-child { + text-align: center; +} + .sr-only { position: absolute; width: 1px; @@ -1288,6 +1473,10 @@ header { z-index: 9; } +.order-1 { + order: 1; +} + .order-last { order: 9999; } @@ -2199,6 +2388,11 @@ header { column-gap: 2.5rem; } +.gap-x-12 { + -moz-column-gap: 3rem; + column-gap: 3rem; +} + .gap-x-16 { -moz-column-gap: 4rem; column-gap: 4rem; @@ -2622,6 +2816,11 @@ header { background-color: rgb(64 0 165 / var(--tw-bg-opacity)); } +.bg-danaherred-800 { + --tw-bg-opacity: 1; + background-color: rgb(122 25 127 / var(--tw-bg-opacity)); +} + .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); @@ -2820,6 +3019,11 @@ header { padding-right: 2.25rem; } +.py-0 { + padding-top: 0px; + padding-bottom: 0px; +} + .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; @@ -2904,6 +3108,10 @@ header { padding-bottom: 1rem; } +.pb-7 { + padding-bottom: 1.75rem; +} + .pb-8 { padding-bottom: 2rem; } @@ -3020,6 +3228,10 @@ header { vertical-align: middle; } +.align-text-top { + vertical-align: text-top; +} + .font-sans { font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } @@ -3053,6 +3265,10 @@ header { line-height: 2.5rem; } +.text-4xl2 { + font-size: 2.5rem; +} + .text-6xl { font-size: 3.75rem; line-height: 1; @@ -3127,6 +3343,10 @@ header { font-style: normal; } +.leading-10 { + line-height: 2.5rem; +} + .leading-4 { line-height: 1rem; } @@ -3313,6 +3533,10 @@ header { text-decoration-line: none !important; } +.no-underline { + text-decoration-line: none; +} + .decoration-\[\#7523FF\] { text-decoration-color: #7523FF; } @@ -3433,6 +3657,10 @@ header { transition-duration: 150ms; } +.duration-150 { + transition-duration: 150ms; +} + .duration-300 { transition-duration: 300ms; } @@ -3478,6 +3706,44 @@ main .section.top-border { font-size: 1.125rem; line-height: 1.75rem; } + + .columns.features-card-left > div > div.md\:h-full > .card { + display: flex; + flex-direction: row; + padding-bottom: 1.5rem; + } + + .columns.features-card-left > div > div.md\:h-full > div.card > .left-content { + padding-right: 0.75rem; + } + + .productdetail main .columns.columns-2-cols .md\:h-full { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); + } +} + +.columns.features-card-left > div > .\[\&_ul\>li\>a\]\:h-full ul>li>adiv > .card { + display: flex; + flex-direction: row; + padding-bottom: 1.5rem; +} + +.columns.features-card-left > div > .\[\&_ul\>li\>a\]\:h-full ul>li>adiv > div.card > .left-content { + padding-right: 0.75rem; +} + +.productdetail main .columns.columns-2-cols .\[\&_ul\>li\>a\]\:h-full ul>li>a { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); } .focus-within\:ring:focus-within { diff --git a/styles/tailwind.css b/styles/tailwind.css index 1a3323b70..f3375262e 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -212,6 +212,86 @@ @apply content-[""] left-[38%] md:left-[18%] lg:left-[28%] w-px h-full absolute top-14 bottom-0 bg-danahergray-300; } } + .column-wrapper{ + @apply max-w-7xl w-full mx-auto; + } + + .columns:not(.columns-2-cols) > div div > p:not(.button-container) { + @apply text-lg block leading-5; + } + + .columns.features-card-left > div > div.h-full > .card { + @apply flex flex-row pb-6; + } + + .columns.features-card-left > div > div.h-full > div.card > .left-content { + @apply pr-3; + } + + main .top-border > div.columns-wrapper:first-child { + @apply !py-0; + } + + .blog main .section.default-content-wrapper > p { + @apply mt-3 leading-7 text-base text-danahergray-700; + } + + .blog main > .section:first-child { + @apply lg:w-recent-articles-left; + } + + .blog main .columns h2 { + @apply inline-flex font-semibold text-xl text-danahergray-900; + } + + .blog main .columns > div > div > p:not(.button-container) { + @apply mt-3 leading-7 text-base text-danahergray-700; + } + + .blog main > div.columns-container > div.columns-wrapper > div.columns > div { + @apply py-0; + } + + .blog main > div.columns-container > div.columns-wrapper { + @apply bg-white; + } + + .productdetail main .columns p.embed-vimeo { + @apply my-2; + } + + .productdetail main .columns.columns-2-cols .picdiv p:not(picture) + p:last-child, + .productdetail main .columns p.embed-vimeo~p { + @apply text-sm leading-5 text-gray-300; + } + + .productdetail main .columns p > strong{ + @apply !font-medium !text-lg !leading-5 !text-gray-900; + } + + .productdetail main .columns p { + @apply pt-2 !text-base text-danahergray-700; + } + + .productdetail main .columns.columns-2-cols .h-full { + @apply text-base text-danahergray-700 py-2; + } + + .productdetail main .columns.columns-2-cols .icon svg { + @apply stroke-white stroke-0; + } + + .productdetail main .columns.columns-3-cols { + @apply text-center mb-3; + } + + .productdetail main .default-content-wrapper > p { + @apply w-3/4; + } + + .productdetail main .default-content-wrapper > h2:only-child { + @apply text-center; + } } @layer utilities { From cc7e0f64f4725de85b7bef83c6c6fc249d3ba4c0 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 8 May 2024 18:39:39 +0530 Subject: [PATCH 28/88] Removed CSS --- blocks/columns/columns-dev.css | 3 --- blocks/columns/columns.css | 3 --- 2 files changed, 6 deletions(-) delete mode 100644 blocks/columns/columns-dev.css delete mode 100644 blocks/columns/columns.css diff --git a/blocks/columns/columns-dev.css b/blocks/columns/columns-dev.css deleted file mode 100644 index b28b04f64..000000000 --- a/blocks/columns/columns-dev.css +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css deleted file mode 100644 index b28b04f64..000000000 --- a/blocks/columns/columns.css +++ /dev/null @@ -1,3 +0,0 @@ - - - From 23d0b73b29678370f2f71992b3fa6851aa2ae7d8 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 8 May 2024 18:44:51 +0530 Subject: [PATCH 29/88] fixed lint issues --- styles/tailwind.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/tailwind.css b/styles/tailwind.css index f3375262e..fb41be2c3 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -212,6 +212,7 @@ @apply content-[""] left-[38%] md:left-[18%] lg:left-[28%] w-px h-full absolute top-14 bottom-0 bg-danahergray-300; } } + .column-wrapper{ @apply max-w-7xl w-full mx-auto; } From 8effc2d7107b016062fed46ebe3cf4300247f5f8 Mon Sep 17 00:00:00 2001 From: jckautzmann <jkautzma@adobe.com> Date: Wed, 8 May 2024 16:13:13 +0200 Subject: [PATCH 30/88] [UE support] 1083 ue config files (#1096) * [UE] Implement UE support for "topics" pages - add UE config files for the breadcrumb block --- component-definition.json | 112 +++++++++++++++++++++++++++ component-filters.json | 32 ++++++++ component-models.json | 156 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 300 insertions(+) create mode 100644 component-definition.json create mode 100644 component-filters.json create mode 100644 component-models.json diff --git a/component-definition.json b/component-definition.json new file mode 100644 index 000000000..ba5e0136a --- /dev/null +++ b/component-definition.json @@ -0,0 +1,112 @@ +{ + "groups": [ + { + "title": "Default Content", + "id": "default", + "components": [ + { + "title": "Text", + "id": "text", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/text/v1/text", + "template": {} + } + } + } + }, + { + "title": "Title", + "id": "title", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/title/v1/title", + "template": {} + } + } + } + }, + { + "title": "Image", + "id": "image", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/image/v1/image", + "template": {} + } + } + } + }, + { + "title": "Button", + "id": "button", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/button/v1/button", + "template": {} + } + } + } + } + ] + }, + { + "title": "Sections", + "id": "sections", + "components": [ + { + "title": "Section", + "id": "section", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/section/v1/section", + "template": {} + } + } + } + } + ] + }, + { + "title": "Blocks", + "id": "blocks", + "components": [ + { + "title": "Columns", + "id": "columns", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/columns/v1/columns", + "template": { + "columns": "2", + "rows": "1" + } + } + } + } + }, + { + "title": "Breadcrumb", + "id": "breadcrumb", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/block/v1/block", + "template": { + "name": "Breadcrumb", + "model": "breadcrumb" + } + } + } + } + } + ] + } + ] +} diff --git a/component-filters.json b/component-filters.json new file mode 100644 index 000000000..34e501c85 --- /dev/null +++ b/component-filters.json @@ -0,0 +1,32 @@ +[ + { + "id": "main", + "components": [ + "section", + "breadcrumb" + ] + }, + { + "id": "columns", + "components": [] + }, + { + "id": "column", + "components": [ + "text", + "image", + "button", + "title" + ] + }, + { + "id": "section", + "components": [ + "text", + "image", + "button", + "title", + "columns" + ] + } +] diff --git a/component-models.json b/component-models.json new file mode 100644 index 000000000..0dea0a3a0 --- /dev/null +++ b/component-models.json @@ -0,0 +1,156 @@ +[ + { + "id": "title", + "fields": [ + { + "component": "text", + "valueType": "string", + "name": "jcr:title", + "value": "", + "label": "Text" + }, + { + "component": "select", + "name": "type", + "value": "h1", + "label": "Type", + "valueType": "string", + "options": [ + { + "name": "h1", + "value": "h1" + }, + { + "name": "h2", + "value": "h2" + }, + { + "name": "h3", + "value": "h3" + }, + { + "name": "h4", + "value": "h4" + }, + { + "name": "h5", + "value": "h5" + }, + { + "name": "h6", + "value": "h6" + } + ] + } + ] + }, + { + "id": "image", + "fields": [ + { + "component": "reference", + "valueType": "string", + "name": "fileReference", + "label": "Image", + "multi": false + }, + { + "component": "text", + "valueType": "string", + "name": "alt", + "value": "Default alt", + "label": "Alt Text" + } + ] + }, + { + "id": "button", + "fields": [ + { + "component": "text", + "valueType": "string", + "name": "href", + "value": "", + "label": "Link" + }, + { + "component": "text", + "valueType": "string", + "name": "text", + "value": "", + "label": "Text" + }, + { + "component": "text", + "valueType": "string", + "name": "title", + "value": "", + "label": "Title" + }, + { + "component": "select", + "name": "type", + "value": "", + "label": "Type", + "valueType": "string", + "options": [ + { + "name": "default", + "value": "" + }, + { + "name": "primary", + "value": "primary" + }, + { + "name": "secondary", + "value": "secondary" + } + ] + } + ] + }, + { + "id": "columns", + "fields": [ + { + "component": "text", + "valueType": "number", + "name": "columns", + "value": "", + "label": "Columns" + }, + { + "component": "text", + "valueType": "number", + "name": "rows", + "value": "", + "label": "Rows" + } + ] + }, + { + "id": "section", + "fields": [ + { + "component": "text", + "name": "style", + "value": "", + "label": "Style", + "valueType": "string" + } + ] + }, + { + "id": "breadcrumb", + "fields": [ + { + "component": "richtext", + "name": "text", + "value": "", + "label": "Text", + "valueType": "string" + } + ] + } +] From c0f6ed8bdec39c28c199e0493b02381007175b1e Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 8 May 2024 21:25:07 +0530 Subject: [PATCH 31/88] Fixed hr issue for article list --- blocks/articles-list/articles-list.js | 2 +- build-css.js | 8 -------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/blocks/articles-list/articles-list.js b/blocks/articles-list/articles-list.js index 3e02e9af6..4246638b1 100644 --- a/blocks/articles-list/articles-list.js +++ b/blocks/articles-list/articles-list.js @@ -28,7 +28,7 @@ export default async function decorate(block) { }); const compHeading = block.querySelector('div')?.innerText; block.textContent = ''; - block.classList.add('space-y-6', 'border-t', 'border-solid', 'border-black'); + if(!block.parentElement?.parentElement.className.includes('top-border')) block.classList.add('space-y-6', 'border-t', 'border-solid', 'border-black'); let divEl; if (articles.length > 0) { divEl = div( diff --git a/build-css.js b/build-css.js index 0a07d7977..7257ff854 100644 --- a/build-css.js +++ b/build-css.js @@ -6,10 +6,6 @@ const fileMappings = [ input: './styles/tailwind.css', output: './styles/styles.css', }, - { - input: './blocks/columns/columns-dev.css', - output: './blocks/columns/columns.css', - }, { input: './blocks/product-hero/product-hero-dev.css', output: './blocks/product-hero/product-hero.css', @@ -18,10 +14,6 @@ const fileMappings = [ input: './blocks/page-tabs/page-tabs-dev.css', output: './blocks/page-tabs/page-tabs.css', }, - { - input: './blocks/workflow-carousel/workflow-carousel-dev.css', - output: './blocks/workflow-carousel/workflow-carousel.css', - }, { input: './blocks/product-category/product-category-dev.css', output: './blocks/product-category/product-category.css', From 69022f0cd7af4618d1cb79c39fede9a81007dd21 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 8 May 2024 21:28:03 +0530 Subject: [PATCH 32/88] fixed lint issues --- blocks/articles-list/articles-list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/articles-list/articles-list.js b/blocks/articles-list/articles-list.js index 4246638b1..52133a56c 100644 --- a/blocks/articles-list/articles-list.js +++ b/blocks/articles-list/articles-list.js @@ -28,7 +28,7 @@ export default async function decorate(block) { }); const compHeading = block.querySelector('div')?.innerText; block.textContent = ''; - if(!block.parentElement?.parentElement.className.includes('top-border')) block.classList.add('space-y-6', 'border-t', 'border-solid', 'border-black'); + if (!block.parentElement?.parentElement.className.includes('top-border')) block.classList.add('space-y-6', 'border-t', 'border-solid', 'border-black'); let divEl; if (articles.length > 0) { divEl = div( From 344deb117f842bc524ca188be58c24a130eed240 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 9 May 2024 10:41:51 +0530 Subject: [PATCH 33/88] Fixed Columns CSS --- blocks/columns/columns.css | 946 +++++++++++++++++++++++++++++++++++++ build-css.js | 2 +- 2 files changed, 947 insertions(+), 1 deletion(-) create mode 100644 blocks/columns/columns.css diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css new file mode 100644 index 000000000..991c9f27b --- /dev/null +++ b/blocks/columns/columns.css @@ -0,0 +1,946 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.href-text a { + position: relative; + z-index: 0; + text-decoration-line: underline; + text-decoration-color: #7523FF; + text-decoration-thickness: 2px; + text-underline-offset: 4px; + text-decoration-style: solid; + word-break: break-all; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-duration: 500ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.href-text a:hover { + color: rgb(255 255 255); + background-color: #7523FF; +} + +.btn-outline-trending-brand { + color: #7523FF; + background-color: rgb(255 255 255); + border-color: #7523FF; + border-width: 2px; +} + +.btn-outline-trending-brand:hover { + color: rgb(255 255 255); + background-color: #7523FF; +} + +.columns-wrapper :is(.relative) { + position: relative; +} + +.columns-wrapper :is(.order-1) { + order: 1; +} + +.columns-wrapper :is(.order-none) { + order: 0; +} + +.columns-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.columns-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.columns-wrapper :is(.my-6) { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + +.columns-wrapper :is(.mt-6) { + margin-top: 1.5rem; +} + +.columns-wrapper :is(.\!block) { + display: block !important; +} + +.columns-wrapper :is(.block) { + display: block; +} + +.columns-wrapper :is(.inline-flex) { + display: inline-flex; +} + +.columns-wrapper :is(.grid) { + display: grid; +} + +.columns-wrapper :is(.h-12) { + height: 3rem; +} + +.columns-wrapper :is(.h-4) { + height: 1rem; +} + +.columns-wrapper :is(.h-full) { + height: 100%; +} + +.columns-wrapper :is(.w-12) { + width: 3rem; +} + +.columns-wrapper :is(.w-4) { + width: 1rem; +} + +.columns-wrapper :is(.w-full) { + width: 100%; +} + +.columns-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.columns-wrapper :is(.shrink-0) { + flex-shrink: 0; +} + +.columns-wrapper :is(.list-disc) { + list-style-type: disc; +} + +.columns-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.columns-wrapper :is(.items-center) { + align-items: center; +} + +.columns-wrapper :is(.justify-items-center) { + justify-items: center; +} + +.columns-wrapper :is(.gap-x-12) { + -moz-column-gap: 3rem; + column-gap: 3rem; +} + +.columns-wrapper :is(.gap-x-8) { + -moz-column-gap: 2rem; + column-gap: 2rem; +} + +.columns-wrapper :is(.gap-y-4) { + row-gap: 1rem; +} + +.columns-wrapper :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} + +.columns-wrapper :is(.rounded) { + border-radius: 0.25rem; +} + +.columns-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.columns-wrapper :is(.rounded-md) { + border-radius: 0.375rem; +} + +.columns-wrapper :is(.border) { + border-width: 1px; +} + +.columns-wrapper :is(.border-0) { + border-width: 0px; +} + +.columns-wrapper :is(.border-b) { + border-bottom-width: 1px; +} + +.columns-wrapper :is(.border-solid) { + border-style: solid; +} + +.columns-wrapper :is(.border-black) { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); +} + +.columns-wrapper :is(.border-danaherpurple-500) { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +.columns-wrapper :is(.bg-danaherblue-900) { + --tw-bg-opacity: 1; + background-color: rgb(6 28 68 / var(--tw-bg-opacity)); +} + +.columns-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.columns-wrapper :is(.bg-danaherred-800) { + --tw-bg-opacity: 1; + background-color: rgb(122 25 127 / var(--tw-bg-opacity)); +} + +.columns-wrapper :is(.bg-transparent) { + background-color: transparent; +} + +.columns-wrapper :is(.px-5) { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.columns-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.columns-wrapper :is(.py-0) { + padding-top: 0px; + padding-bottom: 0px; +} + +.columns-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.columns-wrapper :is(.py-3) { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.columns-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.columns-wrapper :is(.pb-7) { + padding-bottom: 1.75rem; +} + +.columns-wrapper :is(.pb-8) { + padding-bottom: 2rem; +} + +.columns-wrapper :is(.pl-10) { + padding-left: 2.5rem; +} + +.columns-wrapper :is(.align-text-top) { + vertical-align: text-top; +} + +.columns-wrapper :is(.text-4xl2) { + font-size: 2.5rem; +} + +.columns-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.columns-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.columns-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.columns-wrapper :is(.font-bold) { + font-weight: 700; +} + +.columns-wrapper :is(.font-medium) { + font-weight: 500; +} + +.columns-wrapper :is(.leading-10) { + line-height: 2.5rem; +} + +.columns-wrapper :is(.leading-5) { + line-height: 1.25rem; +} + +.columns-wrapper :is(.leading-7) { + line-height: 1.75rem; +} + +.columns-wrapper :is(.\!text-white) { + --tw-text-opacity: 1 !important; + color: rgb(255 255 255 / var(--tw-text-opacity)) !important; +} + +.columns-wrapper :is(.text-danahergray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.columns-wrapper :is(.text-danahergray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.columns-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.columns-wrapper :is(.text-white) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.columns-wrapper :is(.\!no-underline) { + text-decoration-line: none !important; +} + +.columns-wrapper :is(.no-underline) { + text-decoration-line: none; +} + +.columns-wrapper :is(.shadow) { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.columns-wrapper :is(.brightness-0) { + --tw-brightness: brightness(0); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.columns-wrapper :is(.invert) { + --tw-invert: invert(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.columns-wrapper :is(.transition-all) { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.columns-wrapper :is(.duration-150) { + transition-duration: 150ms; +} + +.columns-wrapper :is(.ease-in-out) { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.columns-wrapper :is(.hover\:bg-danaherpurple-500:hover) { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +.columns-wrapper :is(.hover\:text-white:hover) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +@media (min-width: 1024px) { + .columns-wrapper :is(.lg\:my-4) { + margin-top: 1rem; + margin-bottom: 1rem; + } + + .columns-wrapper :is(.lg\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .columns-wrapper :is(.lg\:grid-cols-3) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} \ No newline at end of file diff --git a/build-css.js b/build-css.js index 3aa983924..93ea983cb 100644 --- a/build-css.js +++ b/build-css.js @@ -57,7 +57,7 @@ const fileMappings = [ wrapper: 'category-family-wrapper', }, { - input: './blocks/columns/columns-dev.css', + content: './blocks/columns/columns.js', output: './blocks/columns/columns.css', wrapper: 'columns-wrapper', }, From 9cc81d5b870344b682c8af70530eb69d5b63b454 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Thu, 9 May 2024 10:51:21 +0530 Subject: [PATCH 34/88] 1092 [Bug] Product Page Layout --- styles/styles.css | 2 +- styles/tailwind.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 73e43c32b..a44598660 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1327,7 +1327,7 @@ main .top-border > div.columns-wrapper:first-child { stroke-width: 0; } -.productdetail main .columns.columns-3-cols { +.productdetail main .columns.columns-3-cols > li { margin-bottom: 0.75rem; text-align: center; } diff --git a/styles/tailwind.css b/styles/tailwind.css index fb41be2c3..c5e25df57 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -282,7 +282,7 @@ @apply stroke-white stroke-0; } - .productdetail main .columns.columns-3-cols { + .productdetail main .columns.columns-3-cols > li { @apply text-center mb-3; } From 427dc211c063917228ea7bebda72e36b34744bc3 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Thu, 9 May 2024 13:24:39 +0530 Subject: [PATCH 35/88] Button hover colours in tags-list-wrapper --- styles/styles.css | 23 +++++++++++++++++++++++ styles/tailwind.css | 9 +++++++++ 2 files changed, 32 insertions(+) diff --git a/styles/styles.css b/styles/styles.css index dd13c0eb0..64da50194 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1330,6 +1330,29 @@ main .top-border > div.columns-wrapper:first-child { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.blog main > div.tags-list-container > div.tags-list-wrapper div > a { + background-color: #EADEFF; + display: inline-block; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + text-align: center; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.blog main > div.tags-list-container > div.tags-list-wrapper div > a:hover { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .productdetail main .columns p.embed-vimeo { margin-top: 0.5rem; margin-bottom: 0.5rem; diff --git a/styles/tailwind.css b/styles/tailwind.css index de6edb391..31e6c903a 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -327,6 +327,14 @@ .blog main > div.columns-container > div.columns-wrapper { @apply bg-white; } + + .blog main > div.tags-list-container > div.tags-list-wrapper div > a { + @apply text-center inline-block rounded-full px-4 py-1 font-semibold text-danaherpurple-500 bg-danaherpurple-50; + } + + .blog main > div.tags-list-container > div.tags-list-wrapper div > a:hover { + @apply bg-danaherpurple-500 text-white; + } .productdetail main .columns p.embed-vimeo { @apply my-2; @@ -364,6 +372,7 @@ .productdetail main .default-content-wrapper > h2:only-child { @apply text-center; } + } @layer utilities { From 5edefcb1eedbb7fa4c603a168f42d8315e182b93 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 9 May 2024 13:32:41 +0530 Subject: [PATCH 36/88] Merged CSS to JS for product hero --- blocks/product-hero/product-hero-dev.css | 91 --------- blocks/product-hero/product-hero.css | 244 ----------------------- blocks/product-hero/product-hero.js | 53 +++-- styles/styles.css | 115 +++++++++++ styles/tailwind.css | 4 + 5 files changed, 160 insertions(+), 347 deletions(-) delete mode 100644 blocks/product-hero/product-hero-dev.css delete mode 100644 blocks/product-hero/product-hero.css diff --git a/blocks/product-hero/product-hero-dev.css b/blocks/product-hero/product-hero-dev.css deleted file mode 100644 index 66e8aaead..000000000 --- a/blocks/product-hero/product-hero-dev.css +++ /dev/null @@ -1,91 +0,0 @@ -.product-hero-container { - @apply bg-gray-50 px-2 pt-2 pb-32; -} - -.product-hero { - @apply p-4; -} - -.product-hero .btn-outline-trending-brand { - @apply text-center; -} - -.product-hero .product-hero-content { - @apply flex flex-col md:flex-row lg:gap-16 md:gap-12 gap-2; -} - -.product-hero .hero-default-content { - @apply md:col-span-6; -} - -.product-hero .hero-default-content > div { - @apply w-full h-full text-left; -} - -.product-hero .hero-default-content > div .category-name { - @apply text-sm font-normal leading-5 text-danaherpurple-500; -} - -.product-hero .hero-default-content > div h1.title { - @apply mt-3 mb-3 text-gray-900 mb-3; -} - -.product-hero .hero-default-content > div h4 { - @apply font-bold; -} - -.product-hero .hero-default-content > div ul, -.product-hero .hero-default-content > div p { - @apply text-base; -} - -.product-hero .hero-default-content > div ul { - @apply list-disc ml-12 mt-3; -} - -.product-hero .hero-default-content > div ul li { - @apply mb-2.5; -} - -.product-hero .hero-default-content > div .basic-info { - @apply flex justify-between mt-8; -} - -.product-hero .hero-default-content > div .basic-info div > p:nth-child(1) { - @apply text-base font-bold; -} - -.product-hero .hero-default-content > div .basic-info a { - @apply border-b-2 border-danaherpurple-500; -} - -.product-hero .vertical-gallery-container { - @apply shrink-0 order-first; -} - -.product-hero .vertical-gallery-container > div { - @apply flex flex-col lg:flex-row gap-3 bg-transparent overflow-hidden; -} - -.product-hero .vertical-gallery-container > div div:nth-child(1) { - @apply relative bg-white shadow-lg md:shadow-none; -} - -.product-hero .vertical-gallery-container > div div:nth-child(1) img { - @apply w-[400px] h-[400px] max-w-[400px] mx-auto shadow-none md:shadow-lg object-contain transition duration-700; -} - -.product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) { - @apply w-full lg:w-20 flex flex-row lg:flex-col lg:order-first gap-2 overflow-auto bg-transparent scroll-pl-6 snap-x [&>picture]:w-max - [&>*.view-more]:w-[75px] [&>*.view-more]:h-[75px] [&>*.view-more]:cursor-pointer - [&>*>img]:w-[75px] [&>*>img]:h-[75px] [&>*>img]:cursor-pointer - [&>*.active>img]:opacity-80 [&>*.active>img]:border-2 [&>*.active>img]:border-danaherpurple-500; -} - -.product-hero .vertical-gallery-container .view-more { - @apply flex flex-col leading-tight text-danaherpurple-500 text-sm font-semibold px-3 py-2 hover:border hover:border-danaherpurple-500 bg-white; -} - -.product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) img { - @apply object-cover transition duration-500 hover:border hover:border-danaherpurple-500; -} \ No newline at end of file diff --git a/blocks/product-hero/product-hero.css b/blocks/product-hero/product-hero.css deleted file mode 100644 index a5626e16e..000000000 --- a/blocks/product-hero/product-hero.css +++ /dev/null @@ -1,244 +0,0 @@ -.product-hero-container { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); - padding-left: 0.5rem; - padding-right: 0.5rem; - padding-top: 0.5rem; - padding-bottom: 8rem -} - -.product-hero { - padding: 1rem -} - -.product-hero .btn-outline-trending-brand { - text-align: center -} - -.product-hero .product-hero-content { - display: flex; - flex-direction: column; - gap: 0.5rem -} - -@media (min-width: 768px) { - .product-hero .product-hero-content { - flex-direction: row; - gap: 3rem - } -} - -@media (min-width: 1024px) { - .product-hero .product-hero-content { - gap: 4rem - } -} - -@media (min-width: 768px) { - .product-hero .hero-default-content { - grid-column: span 6 / span 6 - } -} - -.product-hero .hero-default-content > div { - height: 100%; - width: 100%; - text-align: left -} - -.product-hero .hero-default-content > div .category-name { - font-size: 0.875rem; - font-weight: 200; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)) -} - -.product-hero .hero-default-content > div h1.title { - margin-top: 0.75rem; - margin-bottom: 0.75rem; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)) -} - -.product-hero .hero-default-content > div h4 { - font-weight: 700 -} - -.product-hero .hero-default-content > div ul, -.product-hero .hero-default-content > div p { - font-size: 1rem; - line-height: 1.5rem -} - -.product-hero .hero-default-content > div ul { - margin-left: 3rem; - margin-top: 0.75rem; - list-style-type: disc -} - -.product-hero .hero-default-content > div ul li { - margin-bottom: 0.625rem -} - -.product-hero .hero-default-content > div .basic-info { - margin-top: 2rem; - display: flex; - justify-content: space-between -} - -.product-hero .hero-default-content > div .basic-info div > p:nth-child(1) { - font-size: 1rem; - line-height: 1.5rem; - font-weight: 700 -} - -.product-hero .hero-default-content > div .basic-info a { - border-bottom-width: 2px; - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)) -} - -.product-hero .vertical-gallery-container { - order: -9999; - flex-shrink: 0 -} - -.product-hero .vertical-gallery-container > div { - display: flex; - flex-direction: column; - gap: 0.75rem; - overflow: hidden; - background-color: transparent -} - -@media (min-width: 1024px) { - .product-hero .vertical-gallery-container > div { - flex-direction: row - } -} - -.product-hero .vertical-gallery-container > div div:nth-child(1) { - position: relative; - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) -} - -@media (min-width: 768px) { - .product-hero .vertical-gallery-container > div div:nth-child(1) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) - } -} - -.product-hero .vertical-gallery-container > div div:nth-child(1) img { - margin-left: auto; - margin-right: auto; - height: 400px; - width: 400px; - max-width: 400px; - -o-object-fit: contain; - object-fit: contain; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 700ms -} - -@media (min-width: 768px) { - .product-hero .vertical-gallery-container > div div:nth-child(1) img { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) - } -} - -.product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) { - display: flex; - width: 100%; - scroll-snap-type: x var(--tw-scroll-snap-strictness); - scroll-padding-left: 1.5rem; - flex-direction: row; - gap: 0.5rem; - overflow: auto; - background-color: transparent -} - -@media (min-width: 1024px) { - .product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) { - order: -9999; - width: 5rem; - flex-direction: column - } -} - -.product-hero .vertical-gallery-container > div > div:not(:nth-child(1))>*.active>img { - border-width: 2px; - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); - opacity: 0.8 -} - -.product-hero .vertical-gallery-container > div > div:not(:nth-child(1))>*.view-more { - height: 75px; - width: 75px; - cursor: pointer -} - -.product-hero .vertical-gallery-container > div > div:not(:nth-child(1))>*>img { - height: 75px; - width: 75px; - cursor: pointer -} - -.product-hero .vertical-gallery-container > div > div:not(:nth-child(1))>picture { - width: -moz-max-content; - width: max-content -} - -.product-hero .vertical-gallery-container .view-more { - display: flex; - flex-direction: column; - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 700; - line-height: 1.25; - --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)) -} - -.product-hero .vertical-gallery-container .view-more:hover { - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)) -} - -.product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) img { - -o-object-fit: cover; - object-fit: cover; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 500ms -} - -.product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) img:hover { - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)) -} \ No newline at end of file diff --git a/blocks/product-hero/product-hero.js b/blocks/product-hero/product-hero.js index 7c1778a41..88236d87b 100644 --- a/blocks/product-hero/product-hero.js +++ b/blocks/product-hero/product-hero.js @@ -37,26 +37,36 @@ function loadMore() { } function imageSlider(allImages, productName = 'product') { - const slideContent = div({ class: 'image-content' }, createOptimizedS7Picture(allImages[0], `${productName} - image`, true)); - const verticalSlides = div(); + const slideImage = createOptimizedS7Picture(allImages[0], `${productName} - image`, true); + slideImage.classList.add(...'w-[400px] h-[400px] max-w-[400px] mx-auto shadow-none md:shadow-lg object-contain transition duration-700'.split(' ')); + const slideContent = div({ class: 'image-content relative bg-white shadow-lg md:shadow-none' }, slideImage); + const verticalSlides = div({ class: 'w-full lg:w-20 flex flex-row lg:flex-col lg:order-first gap-2 overflow-auto bg-transparent scroll-pl-6 snap-x [&>picture]:w-max [&>*.view-more]:w-[75px] [&>*.view-more]:h-[75px] [&>*.view-more]:cursor-pointer [&>*>img]:w-[75px] [&>*>img]:h-[75px] [&>*>img]:cursor-pointer [&>*.active>img]:opacity-80 [&>*.active>img]:border-2 [&>*.active>img]:border-danaherpurple-500' }); allImages.map((image, index) => { const imageElement = createOptimizedS7Picture(image, `${productName} - image ${index + 1}`, false); let imageClass = (index === 0) ? 'active' : ''; if (index > 2) imageClass += ' hidden'; if (imageClass !== '') imageElement.className = imageClass.trim(); imageElement.addEventListener('click', showImage); + imageElement.classList.add(...'object-cover transition duration-500 hover:border hover:border-danaherpurple-500'.split(' ')); verticalSlides.append(imageElement); return image; }); if (allImages.length > 3) { - const showMore = div({ class: 'view-more' }, 'View More'); + const showMore = div({ class: 'view-more flex flex-col leading-tight text-danaherpurple-500 text-sm font-semibold px-3 py-2 hover:border hover:border-danaherpurple-500 bg-white' }, 'View More'); showMore.innerHTML += `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-4 h-4" viewBox="0 0 12 12"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/> </svg>`; showMore.addEventListener('click', loadMore); verticalSlides.append(showMore); } - return div({ class: 'vertical-gallery-container' }, div(slideContent, verticalSlides)); + return div( + { class: 'vertical-gallery-container shrink-0 order-first' }, + div( + { class: 'flex flex-col lg:flex-row gap-3 bg-transparent overflow-hidden' }, + slideContent, + verticalSlides, + ), + ); } function addBundleDetails(title, bundleDetails) { @@ -169,16 +179,16 @@ export default async function decorate(block) { document.title = response[0].Title ? response[0].Title : 'Danaher Product'; const allImages = response[0]?.raw.images; const verticalImageGallery = imageSlider(allImages, response[0]?.Title); - const defaultContent = div(); + const defaultContent = div({ class: 'w-full h-full text-left' }); defaultContent.innerHTML = response[0]?.raw.richdescription; defaultContent.prepend(span({ class: 'sku hidden' }, response[0]?.raw.productid)); - defaultContent.prepend(titleEl || h1({ class: 'title' }, response[0]?.Title)); + defaultContent.prepend(titleEl || h1({ class: 'title mt-3 mb-3 text-gray-900 mb-3' }, response[0]?.Title)); defaultContent.prepend(span({ class: 'categories hidden' }, response[0]?.raw.categories)); - defaultContent.prepend(span({ class: 'category-name' }, response[0]?.raw?.defaultcategoryname ? response[0]?.raw?.defaultcategoryname : '')); + defaultContent.prepend(span({ class: 'category-name text-sm font-normal leading-5 text-danaherpurple-500' }, response[0]?.raw?.defaultcategoryname ? response[0]?.raw?.defaultcategoryname : '')); const rfqEl = block.querySelector(':scope > div:nth-child(1)'); if (rfqEl && rfqEl.textContent.includes('Request for Quote')) { let rfqParent; - rfqEl.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-4 py-2 !no-underline'.split(' ')); + rfqEl.classList.add(...'btn-outline-trending-brand text-center text-lg rounded-full px-4 py-2 !no-underline'.split(' ')); if (response[0]?.raw?.objecttype === 'Product' || response[0]?.raw?.objecttype === 'Bundle') { rfqParent = p({ class: 'lg:w-55 pt-6 cursor-pointer' }, rfqEl); rfqParent.addEventListener('click', () => { addToQuote(response[0]); }); @@ -193,7 +203,7 @@ export default async function decorate(block) { infoDiv.prepend( p('For additional information'), a( - { href: `${response[0]?.raw.externallink}?utm_source=dhls_website`, target: '_blank' }, + { class: 'border-b-2 border-danaherpurple-500', href: `${response[0]?.raw.externallink}?utm_source=dhls_website`, target: '_blank' }, span({ class: 'ext-link' }), ), ); @@ -214,14 +224,33 @@ export default async function decorate(block) { defaultContent.append( div( - { class: 'basic-info' }, - div(p('Brand'), p({ class: 'brand' }, response[0]?.raw.opco)), + { class: 'basic-info flex justify-between mt-8' }, + div(p({ class: 'text-base font-bold' }, 'Brand'), p({ class: 'brand' }, response[0]?.raw.opco)), infoDiv, ), ); block.parentElement.classList.add(...'stretch'.split(' ')); block.innerHTML = ''; - block.append(div({ class: 'product-hero-content' }, div({ class: 'hero-default-content w-full' }, defaultContent), verticalImageGallery)); + block.classList.add('p-4'); + block.append( + div( + { class: 'product-hero-content flex flex-col md:flex-row lg:gap-16 md:gap-12 gap-2' }, + div({ class: 'hero-default-content md:col-span-6 w-full' }, defaultContent), + verticalImageGallery, + ), + ); + block.querySelectorAll('.hero-default-content > div h4').forEach((h4El) => { + h4El.classList.add('font-bold'); + }); + block.querySelectorAll('.hero-default-content > div ul').forEach((ulEl) => { + ulEl.classList.add(...'text-base list-disc ml-12 mt-3'.split(' ')); + }); + block.querySelectorAll('.hero-default-content > div p').forEach((pEl) => { + pEl.classList.add('text-base'); + }); + block.querySelectorAll('.hero-default-content > div ul li').forEach((liEl) => { + liEl.classList.add('mb-2.5'); + }); decorateModals(block); } } diff --git a/styles/styles.css b/styles/styles.css index 73e43c32b..e8bef7351 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1477,6 +1477,10 @@ main .top-border > div.columns-wrapper:first-child { order: 1; } +.order-first { + order: -9999; +} + .order-last { order: 9999; } @@ -1626,6 +1630,10 @@ main .top-border > div.columns-wrapper:first-child { margin-bottom: 0.5rem; } +.mb-2\.5 { + margin-bottom: 0.625rem; +} + .mb-20 { margin-bottom: 5rem; } @@ -1662,6 +1670,10 @@ main .top-border > div.columns-wrapper:first-child { margin-left: 0.25rem; } +.ml-12 { + margin-left: 3rem; +} + .ml-2 { margin-left: 0.5rem; } @@ -1924,6 +1936,10 @@ main .top-border > div.columns-wrapper:first-child { height: 17rem; } +.h-\[400px\] { + height: 400px; +} + .h-auto { height: auto; } @@ -2061,6 +2077,10 @@ main .top-border > div.columns-wrapper:first-child { width: 360px; } +.w-\[400px\] { + width: 400px; +} + .w-\[47\%\] { width: 47%; } @@ -2114,6 +2134,10 @@ main .top-border > div.columns-wrapper:first-child { max-width: 80rem; } +.max-w-\[400px\] { + max-width: 400px; +} + .max-w-full { max-width: 100%; } @@ -2246,6 +2270,10 @@ main .top-border > div.columns-wrapper:first-child { scroll-snap-align: start; } +.scroll-pl-6 { + scroll-padding-left: 1.5rem; +} + .list-disc { list-style-type: disc; } @@ -2659,6 +2687,10 @@ main .top-border > div.columns-wrapper:first-child { border-bottom-width: 1px; } +.border-b-2 { + border-bottom-width: 2px; +} + .border-l { border-left-width: 1px; } @@ -3770,10 +3802,19 @@ main .section.top-border { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.hover\:border:hover { + border-width: 1px; +} + .hover\:border-t-2:hover { border-top-width: 2px; } +.hover\:border-danaherpurple-500:hover { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + .hover\:border-gray-300:hover { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); @@ -4118,6 +4159,10 @@ main .section.top-border { grid-column: span 2 / span 2; } + .md\:col-span-6 { + grid-column: span 6 / span 6; + } + .md\:mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; @@ -4278,6 +4323,10 @@ main .section.top-border { justify-content: space-between; } + .md\:gap-12 { + gap: 3rem; + } + .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); @@ -4355,6 +4404,18 @@ main .section.top-border { .md\:tracking-tight { letter-spacing: -0.025em; } + + .md\:shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .md\:shadow-none { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } } @media (min-width: 1024px) { @@ -4371,6 +4432,10 @@ main .section.top-border { right: 0px; } + .lg\:order-first { + order: -9999; + } + .lg\:col-span-1 { grid-column: span 1 / span 1; } @@ -4546,10 +4611,18 @@ main .section.top-border { flex-direction: row-reverse; } + .lg\:flex-col { + flex-direction: column; + } + .lg\:items-center { align-items: center; } + .lg\:gap-16 { + gap: 4rem; + } + .lg\:gap-8 { gap: 2rem; } @@ -4682,6 +4755,43 @@ main .section.top-border { opacity: 0.4; } +.\[\&\>\*\.active\>img\]\:border-2>*.active>img { + border-width: 2px; +} + +.\[\&\>\*\.active\>img\]\:border-danaherpurple-500>*.active>img { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +.\[\&\>\*\.active\>img\]\:opacity-80>*.active>img { + opacity: 0.8; +} + +.\[\&\>\*\.view-more\]\:h-\[75px\]>*.view-more { + height: 75px; +} + +.\[\&\>\*\.view-more\]\:w-\[75px\]>*.view-more { + width: 75px; +} + +.\[\&\>\*\.view-more\]\:cursor-pointer>*.view-more { + cursor: pointer; +} + +.\[\&\>\*\>img\]\:h-\[75px\]>*>img { + height: 75px; +} + +.\[\&\>\*\>img\]\:w-\[75px\]>*>img { + width: 75px; +} + +.\[\&\>\*\>img\]\:cursor-pointer>*>img { + cursor: pointer; +} + .\[\&\>a\]\:w-full>a { width: 100%; } @@ -4695,6 +4805,11 @@ main .section.top-border { font-weight: 700; } +.\[\&\>picture\]\:w-max>picture { + width: -moz-max-content; + width: max-content; +} + .peer:checked ~ .peer-checked\:\[\&_\*\]\:text-white * { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); diff --git a/styles/tailwind.css b/styles/tailwind.css index fb41be2c3..ea9845e64 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -293,6 +293,10 @@ .productdetail main .default-content-wrapper > h2:only-child { @apply text-center; } + + .product-hero-container { + @apply bg-gray-50 px-2 pt-2 pb-32; + } } @layer utilities { From 47cff4c356c2f59e0fdaf24f57a22826d6d91248 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 9 May 2024 14:25:08 +0530 Subject: [PATCH 37/88] Updared build CSS --- build-css.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/build-css.js b/build-css.js index 7257ff854..2060ec703 100644 --- a/build-css.js +++ b/build-css.js @@ -6,10 +6,6 @@ const fileMappings = [ input: './styles/tailwind.css', output: './styles/styles.css', }, - { - input: './blocks/product-hero/product-hero-dev.css', - output: './blocks/product-hero/product-hero.css', - }, { input: './blocks/page-tabs/page-tabs-dev.css', output: './blocks/page-tabs/page-tabs.css', From d8596dc59edbe60c26f37082b4cba8fd58b18d9e Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 9 May 2024 15:49:07 +0530 Subject: [PATCH 38/88] Added CSS for product hero --- blocks/product-hero/product-hero.css | 1039 ++++++++++++++++++++++++++ build-css.js | 2 +- 2 files changed, 1040 insertions(+), 1 deletion(-) create mode 100644 blocks/product-hero/product-hero.css diff --git a/blocks/product-hero/product-hero.css b/blocks/product-hero/product-hero.css new file mode 100644 index 000000000..b1d91cd23 --- /dev/null +++ b/blocks/product-hero/product-hero.css @@ -0,0 +1,1039 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.btn-outline-trending-brand { + color: #7523FF; + background-color: rgb(255 255 255); + border-color: #7523FF; + border-width: 2px; +} + +.btn-outline-trending-brand:hover { + color: rgb(255 255 255); + background-color: #7523FF; +} + +.product-hero-wrapper :is(.relative) { + position: relative; +} + +.product-hero-wrapper :is(.order-first) { + order: -9999; +} + +.product-hero-wrapper :is(.col-span-10) { + grid-column: span 10 / span 10; +} + +.product-hero-wrapper :is(.col-span-2) { + grid-column: span 2 / span 2; +} + +.product-hero-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.product-hero-wrapper :is(.-mt-\[21px\]) { + margin-top: -21px; +} + +.product-hero-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.product-hero-wrapper :is(.mb-2\.5) { + margin-bottom: 0.625rem; +} + +.product-hero-wrapper :is(.mb-3) { + margin-bottom: 0.75rem; +} + +.product-hero-wrapper :is(.ml-12) { + margin-left: 3rem; +} + +.product-hero-wrapper :is(.mt-3) { + margin-top: 0.75rem; +} + +.product-hero-wrapper :is(.mt-5) { + margin-top: 1.25rem; +} + +.product-hero-wrapper :is(.mt-8) { + margin-top: 2rem; +} + +.product-hero-wrapper :is(.mt-\[-256px\]) { + margin-top: -256px; +} + +.product-hero-wrapper :is(.block) { + display: block; +} + +.product-hero-wrapper :is(.inline-block) { + display: inline-block; +} + +.product-hero-wrapper :is(.flex) { + display: flex; +} + +.product-hero-wrapper :is(.hidden) { + display: none; +} + +.product-hero-wrapper :is(.h-16) { + height: 4rem; +} + +.product-hero-wrapper :is(.h-4) { + height: 1rem; +} + +.product-hero-wrapper :is(.h-5) { + height: 1.25rem; +} + +.product-hero-wrapper :is(.h-\[17rem\]) { + height: 17rem; +} + +.product-hero-wrapper :is(.h-\[400px\]) { + height: 400px; +} + +.product-hero-wrapper :is(.h-full) { + height: 100%; +} + +.product-hero-wrapper :is(.w-16) { + width: 4rem; +} + +.product-hero-wrapper :is(.w-4) { + width: 1rem; +} + +.product-hero-wrapper :is(.w-5) { + width: 1.25rem; +} + +.product-hero-wrapper :is(.w-\[400px\]) { + width: 400px; +} + +.product-hero-wrapper :is(.w-\[98\%\]) { + width: 98%; +} + +.product-hero-wrapper :is(.w-full) { + width: 100%; +} + +.product-hero-wrapper :is(.max-w-\[400px\]) { + max-width: 400px; +} + +.product-hero-wrapper :is(.shrink-0) { + flex-shrink: 0; +} + +.product-hero-wrapper :is(.cursor-pointer) { + cursor: pointer; +} + +.product-hero-wrapper :is(.snap-x) { + scroll-snap-type: x var(--tw-scroll-snap-strictness); +} + +.product-hero-wrapper :is(.scroll-pl-6) { + scroll-padding-left: 1.5rem; +} + +.product-hero-wrapper :is(.list-disc) { + list-style-type: disc; +} + +.product-hero-wrapper :is(.flex-row) { + flex-direction: row; +} + +.product-hero-wrapper :is(.flex-col) { + flex-direction: column; +} + +.product-hero-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + +.product-hero-wrapper :is(.items-start) { + align-items: flex-start; +} + +.product-hero-wrapper :is(.items-center) { + align-items: center; +} + +.product-hero-wrapper :is(.justify-center) { + justify-content: center; +} + +.product-hero-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.product-hero-wrapper :is(.gap-2) { + gap: 0.5rem; +} + +.product-hero-wrapper :is(.gap-3) { + gap: 0.75rem; +} + +.product-hero-wrapper :is(.gap-x-4) { + -moz-column-gap: 1rem; + column-gap: 1rem; +} + +.product-hero-wrapper :is(.overflow-auto) { + overflow: auto; +} + +.product-hero-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.product-hero-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.product-hero-wrapper :is(.rounded-md) { + border-radius: 0.375rem; +} + +.product-hero-wrapper :is(.border-b) { + border-bottom-width: 1px; +} + +.product-hero-wrapper :is(.border-b-2) { + border-bottom-width: 2px; +} + +.product-hero-wrapper :is(.border-danaherpurple-500) { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +.product-hero-wrapper :is(.border-gray-300) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.product-hero-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.product-hero-wrapper :is(.bg-transparent) { + background-color: transparent; +} + +.product-hero-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.product-hero-wrapper :is(.object-contain) { + -o-object-fit: contain; + object-fit: contain; +} + +.product-hero-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.product-hero-wrapper :is(.p-4) { + padding: 1rem; +} + +.product-hero-wrapper :is(.px-3) { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.product-hero-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.product-hero-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.product-hero-wrapper :is(.py-3) { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.product-hero-wrapper :is(.pb-1) { + padding-bottom: 0.25rem; +} + +.product-hero-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + +.product-hero-wrapper :is(.text-left) { + text-align: left; +} + +.product-hero-wrapper :is(.text-center) { + text-align: center; +} + +.product-hero-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.product-hero-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.product-hero-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.product-hero-wrapper :is(.font-bold) { + font-weight: 700; +} + +.product-hero-wrapper :is(.font-medium) { + font-weight: 500; +} + +.product-hero-wrapper :is(.font-normal) { + font-weight: 200; +} + +.product-hero-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.product-hero-wrapper :is(.leading-4) { + line-height: 1rem; +} + +.product-hero-wrapper :is(.leading-5) { + line-height: 1.25rem; +} + +.product-hero-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.product-hero-wrapper :is(.leading-tight) { + line-height: 1.25; +} + +.product-hero-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.product-hero-wrapper :is(.text-gray-400) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.product-hero-wrapper :is(.text-gray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.product-hero-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.product-hero-wrapper :is(.\!no-underline) { + text-decoration-line: none !important; +} + +.product-hero-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-hero-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-hero-wrapper :is(.shadow-sm) { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-hero-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.product-hero-wrapper :is(.duration-500) { + transition-duration: 500ms; +} + +.product-hero-wrapper :is(.duration-700) { + transition-duration: 700ms; +} + +.product-hero-wrapper :is(.hover\:border:hover) { + border-width: 1px; +} + +.product-hero-wrapper :is(.hover\:border-danaherpurple-500:hover) { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +@media (min-width: 768px) { + .product-hero-wrapper :is(.md\:col-span-6) { + grid-column: span 6 / span 6; + } + + .product-hero-wrapper :is(.md\:flex-row) { + flex-direction: row; + } + + .product-hero-wrapper :is(.md\:gap-12) { + gap: 3rem; + } + + .product-hero-wrapper :is(.md\:shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .product-hero-wrapper :is(.md\:shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } +} + +@media (min-width: 1024px) { + .product-hero-wrapper :is(.lg\:order-first) { + order: -9999; + } + + .product-hero-wrapper :is(.lg\:w-20) { + width: 5rem; + } + + .product-hero-wrapper :is(.lg\:w-55) { + width: 14rem; + } + + .product-hero-wrapper :is(.lg\:flex-row) { + flex-direction: row; + } + + .product-hero-wrapper :is(.lg\:flex-col) { + flex-direction: column; + } + + .product-hero-wrapper :is(.lg\:gap-16) { + gap: 4rem; + } +} + +.product-hero-wrapper :is(.\[\&\>\*\.active\>img\]\:border-2>*.active>img) { + border-width: 2px; +} + +.product-hero-wrapper :is(.\[\&\>\*\.active\>img\]\:border-danaherpurple-500>*.active>img) { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +.product-hero-wrapper :is(.\[\&\>\*\.active\>img\]\:opacity-80>*.active>img) { + opacity: 0.8; +} + +.product-hero-wrapper :is(.\[\&\>\*\.view-more\]\:h-\[75px\]>*.view-more) { + height: 75px; +} + +.product-hero-wrapper :is(.\[\&\>\*\.view-more\]\:w-\[75px\]>*.view-more) { + width: 75px; +} + +.product-hero-wrapper :is(.\[\&\>\*\.view-more\]\:cursor-pointer>*.view-more) { + cursor: pointer; +} + +.product-hero-wrapper :is(.\[\&\>\*\>img\]\:h-\[75px\]>*>img) { + height: 75px; +} + +.product-hero-wrapper :is(.\[\&\>\*\>img\]\:w-\[75px\]>*>img) { + width: 75px; +} + +.product-hero-wrapper :is(.\[\&\>\*\>img\]\:cursor-pointer>*>img) { + cursor: pointer; +} + +.product-hero-wrapper :is(.\[\&\>picture\]\:w-max>picture) { + width: -moz-max-content; + width: max-content; +} \ No newline at end of file diff --git a/build-css.js b/build-css.js index 93ea983cb..72138ff02 100644 --- a/build-css.js +++ b/build-css.js @@ -137,7 +137,7 @@ const fileMappings = [ wrapper: 'product-citations-wrapper', }, { - input: './blocks/product-hero/product-hero-dev.css', + content: './blocks/product-hero/product-hero.js', output: './blocks/product-hero/product-hero.css', wrapper: 'product-hero-wrapper', }, From d8ab93175355d56797efa859d31bc0c5c507469e Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 9 May 2024 16:10:11 +0530 Subject: [PATCH 39/88] Merged CSS to JS for Product Category --- .../product-category/product-category-dev.css | 15 ------ blocks/product-category/product-category.css | 21 -------- build-css.js | 4 -- styles/styles.css | 49 +++++++++++++++++++ styles/tailwind.css | 16 ++++++ 5 files changed, 65 insertions(+), 40 deletions(-) delete mode 100644 blocks/product-category/product-category-dev.css delete mode 100644 blocks/product-category/product-category.css diff --git a/blocks/product-category/product-category-dev.css b/blocks/product-category/product-category-dev.css deleted file mode 100644 index 102b1f889..000000000 --- a/blocks/product-category/product-category-dev.css +++ /dev/null @@ -1,15 +0,0 @@ -.category main .section { - @apply py-8; - } - - .category .container-two-col .col-right p { - @apply pb-6; - } - - .category .default-content-wrapper p { - @apply xl:w-3/4; - } - - .category .default-content-wrapper h2, .category .accordion-wrapper h2 { - @apply font-semibold text-2xl pt-4; - } \ No newline at end of file diff --git a/blocks/product-category/product-category.css b/blocks/product-category/product-category.css deleted file mode 100644 index e8d752796..000000000 --- a/blocks/product-category/product-category.css +++ /dev/null @@ -1,21 +0,0 @@ -.category main .section { - padding-top: 2rem; - padding-bottom: 2rem -} - -.category .container-two-col .col-right p { - padding-bottom: 1.5rem -} - -@media (min-width: 1280px) { - .category .default-content-wrapper p { - width: 75% - } -} - -.category .default-content-wrapper h2, .category .accordion-wrapper h2 { - padding-top: 1rem; - font-size: 1.5rem; - line-height: 2rem; - font-weight: 700 -} \ No newline at end of file diff --git a/build-css.js b/build-css.js index 2060ec703..d1f6f64a9 100644 --- a/build-css.js +++ b/build-css.js @@ -10,10 +10,6 @@ const fileMappings = [ input: './blocks/page-tabs/page-tabs-dev.css', output: './blocks/page-tabs/page-tabs.css', }, - { - input: './blocks/product-category/product-category-dev.css', - output: './blocks/product-category/product-category.css', - }, { input: './styles/coveo-atomic.css', output: './blocks/product-resources/product-resources.css', diff --git a/styles/styles.css b/styles/styles.css index cc2a975a7..6210b8b14 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1340,6 +1340,55 @@ main .top-border > div.columns-wrapper:first-child { text-align: center; } +.\!category main .section { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.category main .section { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.\!category .container-two-col .col-right p { + padding-bottom: 1.5rem; +} + +.category .container-two-col .col-right p { + padding-bottom: 1.5rem; +} + +@media (min-width: 1280px) { + .\!category .default-content-wrapper p { + width: 75%; + } + + .category .default-content-wrapper p { + width: 75%; + } +} + +.\!category .default-content-wrapper h2, .\!category .accordion-wrapper h2 { + padding-top: 1rem; + font-size: 1.5rem; + line-height: 2rem; + font-weight: 700; +} + +.category .default-content-wrapper h2, .category .accordion-wrapper h2 { + padding-top: 1rem; + font-size: 1.5rem; + line-height: 2rem; + font-weight: 700; +} + +.\!category .default-content-wrapper h2, .\!category .accordion-wrapper h2 { + padding-top: 1rem; + font-size: 1.5rem; + line-height: 2rem; + font-weight: 700; +} + .sr-only { position: absolute; width: 1px; diff --git a/styles/tailwind.css b/styles/tailwind.css index 5c44ed660..201a0c951 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -297,6 +297,22 @@ .product-hero-container { @apply bg-gray-50 px-2 pt-2 pb-32; } + + .category main .section { + @apply py-8; + } + + .category .container-two-col .col-right p { + @apply pb-6; + } + + .category .default-content-wrapper p { + @apply xl:w-3/4; + } + + .category .default-content-wrapper h2, .category .accordion-wrapper h2 { + @apply font-semibold text-2xl pt-4; + } } @layer utilities { From 562486efdc79759fe3881ec73688e62e2ceb2b56 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 9 May 2024 17:47:00 +0530 Subject: [PATCH 40/88] Added product category css --- blocks/product-category/product-category.css | 824 +++++++++++++++++++ build-css.js | 2 +- styles/styles.css | 80 ++ 3 files changed, 905 insertions(+), 1 deletion(-) create mode 100644 blocks/product-category/product-category.css diff --git a/blocks/product-category/product-category.css b/blocks/product-category/product-category.css new file mode 100644 index 000000000..12b1bda33 --- /dev/null +++ b/blocks/product-category/product-category.css @@ -0,0 +1,824 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.product-category-wrapper :is(.relative) { + position: relative; +} + +.product-category-wrapper :is(.col-span-1) { + grid-column: span 1 / span 1; +} + +.product-category-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.product-category-wrapper :is(.mb-3) { + margin-bottom: 0.75rem; +} + +.product-category-wrapper :is(.mb-4) { + margin-bottom: 1rem; +} + +.product-category-wrapper :is(.mt-3) { + margin-top: 0.75rem; +} + +.product-category-wrapper :is(.\!line-clamp-3) { + overflow: hidden !important; + display: -webkit-box !important; + -webkit-box-orient: vertical !important; + -webkit-line-clamp: 3 !important; +} + +.product-category-wrapper :is(.line-clamp-4) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; +} + +.product-category-wrapper :is(.block) { + display: block; +} + +.product-category-wrapper :is(.flex) { + display: flex; +} + +.product-category-wrapper :is(.inline-flex) { + display: inline-flex; +} + +.product-category-wrapper :is(.grid) { + display: grid; +} + +.product-category-wrapper :is(.\!h-14) { + height: 3.5rem !important; +} + +.product-category-wrapper :is(.\!h-20) { + height: 5rem !important; +} + +.product-category-wrapper :is(.w-full) { + width: 100%; +} + +.product-category-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.product-category-wrapper :is(.max-w-xl) { + max-width: 36rem; +} + +.product-category-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.product-category-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.product-category-wrapper :is(.flex-col) { + flex-direction: column; +} + +.product-category-wrapper :is(.items-center) { + align-items: center; +} + +.product-category-wrapper :is(.justify-center) { + justify-content: center; +} + +.product-category-wrapper :is(.justify-items-center) { + justify-items: center; +} + +.product-category-wrapper :is(.gap-6) { + gap: 1.5rem; +} + +.product-category-wrapper :is(.space-x-4 > :not([hidden]) ~ :not([hidden])) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + +.product-category-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.product-category-wrapper :is(.\!break-words) { + overflow-wrap: break-word !important; +} + +.product-category-wrapper :is(.break-words) { + overflow-wrap: break-word; +} + +.product-category-wrapper :is(.\!rounded-full) { + border-radius: 9999px !important; +} + +.product-category-wrapper :is(.rounded-lg) { + border-radius: 0.5rem; +} + +.product-category-wrapper :is(.border) { + border-width: 1px; +} + +.product-category-wrapper :is(.border-8) { + border-width: 8px; +} + +.product-category-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.product-category-wrapper :is(.bg-gray-100) { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.product-category-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.product-category-wrapper :is(.\!px-7) { + padding-left: 1.75rem !important; + padding-right: 1.75rem !important; +} + +.product-category-wrapper :is(.px-2) { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.product-category-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.product-category-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.product-category-wrapper :is(.py-4) { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.product-category-wrapper :is(.py-5) { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + +.product-category-wrapper :is(.\!pb-0) { + padding-bottom: 0px !important; +} + +.product-category-wrapper :is(.\!text-lg) { + font-size: 1.125rem !important; + line-height: 1.75rem !important; +} + +.product-category-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.product-category-wrapper :is(.\!font-semibold) { + font-weight: 700 !important; +} + +.product-category-wrapper :is(.\!text-danahergray-900) { + --tw-text-opacity: 1 !important; + color: rgb(17 24 39 / var(--tw-text-opacity)) !important; +} + +.product-category-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.product-category-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-category-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.product-category-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.product-category-wrapper :is(.duration-500) { + transition-duration: 500ms; +} + +.product-category-wrapper :is(.hover\:scale-105:hover) { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +@media (min-width: 640px) { + .product-category-wrapper :is(.sm\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .product-category-wrapper :is(.sm\:px-0) { + padding-left: 0px; + padding-right: 0px; + } +} + +@media (min-width: 1024px) { + .product-category-wrapper :is(.lg\:grid-cols-4) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} \ No newline at end of file diff --git a/build-css.js b/build-css.js index 72138ff02..9590f9652 100644 --- a/build-css.js +++ b/build-css.js @@ -122,7 +122,7 @@ const fileMappings = [ wrapper: 'product-card-wrapper', }, { - input: './blocks/product-category/product-category-dev.css', + content: './blocks/product-category/product-category.js', output: './blocks/product-category/product-category.css', wrapper: 'product-category-wrapper', }, diff --git a/styles/styles.css b/styles/styles.css index 9c9bc4a0a..65eed0f2b 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1443,6 +1443,10 @@ main .top-border > div.columns-wrapper:first-child { visibility: visible; } +.collapse { + visibility: collapse; +} + .static { position: static; } @@ -1475,6 +1479,10 @@ main .top-border > div.columns-wrapper:first-child { z-index: 9999; } +.col-span-1 { + grid-column: span 1 / span 1; +} + .m-0 { margin: 0px; } @@ -1534,6 +1542,14 @@ main .top-border > div.columns-wrapper:first-child { margin-top: 1.5rem; } +.mb-3 { + margin-bottom: 0.75rem; +} + +.mb-4 { + margin-bottom: 1rem; +} + .line-clamp-2 { overflow: hidden; display: -webkit-box; @@ -1541,6 +1557,13 @@ main .top-border > div.columns-wrapper:first-child { -webkit-line-clamp: 2; } +.line-clamp-4 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; +} + .block { display: block; } @@ -1637,6 +1660,10 @@ main .top-border > div.columns-wrapper:first-child { flex-shrink: 0; } +.border-collapse { + border-collapse: collapse; +} + .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @@ -1695,6 +1722,10 @@ main .top-border > div.columns-wrapper:first-child { justify-content: space-between; } +.justify-items-center { + justify-items: center; +} + .gap-2 { gap: 0.5rem; } @@ -1703,6 +1734,10 @@ main .top-border > div.columns-wrapper:first-child { gap: 1rem; } +.gap-6 { + gap: 1.5rem; +} + .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; @@ -1718,6 +1753,12 @@ main .top-border > div.columns-wrapper:first-child { margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } +.space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + .overflow-hidden { overflow: hidden; } @@ -1735,6 +1776,10 @@ main .top-border > div.columns-wrapper:first-child { word-break: normal; } +.break-words { + overflow-wrap: break-word; +} + .rounded { border-radius: 0.25rem; } @@ -1747,6 +1792,10 @@ main .top-border > div.columns-wrapper:first-child { border-radius: 0.375rem; } +.rounded-lg { + border-radius: 0.5rem; +} + .rounded-r { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; @@ -1760,6 +1809,10 @@ main .top-border > div.columns-wrapper:first-child { border-width: 2px; } +.border-8 { + border-width: 8px; +} + .border-danaherpurple-500 { --tw-border-opacity: 1; border-color: rgb(117 35 255 / var(--tw-border-opacity)); @@ -1805,6 +1858,11 @@ main .top-border > div.columns-wrapper:first-child { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + .bg-opacity-10 { --tw-bg-opacity: 0.1; } @@ -1870,6 +1928,16 @@ main .top-border > div.columns-wrapper:first-child { padding-bottom: 10rem; } +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + .pb-0 { padding-bottom: 0px; } @@ -2029,6 +2097,10 @@ main .top-border > div.columns-wrapper:first-child { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.underline { + text-decoration-line: underline; +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2053,6 +2125,10 @@ main .top-border > div.columns-wrapper:first-child { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.outline { + outline-style: solid; +} + .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -2076,6 +2152,10 @@ main .top-border > div.columns-wrapper:first-child { transition-duration: 150ms; } +.duration-500 { + transition-duration: 500ms; +} + main .section.top-border { margin: auto; margin-top: 2.5rem; From 0788fc03be81144fc9c3104dc09d08f0b028fb07 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Fri, 10 May 2024 13:53:12 +0530 Subject: [PATCH 41/88] 1106 [SEO] Merge CSS to js for page-tabs block --- blocks/page-tabs/page-tabs-dev.css | 33 ---------------------- blocks/page-tabs/page-tabs.css | 45 ------------------------------ blocks/page-tabs/page-tabs.js | 4 +-- styles/styles.css | 37 ++++++++++++++++++++++++ styles/tailwind.css | 31 ++++++++++++++++++++ 5 files changed, 70 insertions(+), 80 deletions(-) delete mode 100644 blocks/page-tabs/page-tabs-dev.css delete mode 100644 blocks/page-tabs/page-tabs.css diff --git a/blocks/page-tabs/page-tabs-dev.css b/blocks/page-tabs/page-tabs-dev.css deleted file mode 100644 index 21df60f00..000000000 --- a/blocks/page-tabs/page-tabs-dev.css +++ /dev/null @@ -1,33 +0,0 @@ -svg symbol path { - stroke: inherit; -} - -.page-tabs-container.fixed { - @apply mt-[-1px] bg-white shadow-lg; -} - -.page-tabs-container.fixed ul { - @apply shadow-none rounded-none; -} - -.page-tabs-container li[aria-selected="false"] > a { - @apply bg-white; -} - -.page-tabs-container li[aria-selected="true"] svg { - @apply stroke-white; -} - -.page-tabs-container.fixed li > a { - @apply rounded-full; -} - -.page-tabs-container li:hover > a, -.page-tabs-container li[aria-selected="true"] > a { - @apply text-white bg-danaherpurple-500; -} - -.page-tabs-container.fixed li:hover > a .icon svg > use, -.page-tabs-container.fixed li[aria-selected="true"] > a .icon svg > use { - @apply stroke-white; -} diff --git a/blocks/page-tabs/page-tabs.css b/blocks/page-tabs/page-tabs.css deleted file mode 100644 index 90ff24159..000000000 --- a/blocks/page-tabs/page-tabs.css +++ /dev/null @@ -1,45 +0,0 @@ -svg symbol path { - stroke: inherit; -} - -.page-tabs-container.fixed { - margin-top: -1px; - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.page-tabs-container.fixed ul { - border-radius: 0px; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.page-tabs-container li[aria-selected="false"] > a { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.page-tabs-container li[aria-selected="true"] svg { - stroke: #fff; -} - -.page-tabs-container.fixed li > a { - border-radius: 9999px; -} - -.page-tabs-container li:hover > a, -.page-tabs-container li[aria-selected="true"] > a { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.page-tabs-container.fixed li:hover > a .icon svg > use, -.page-tabs-container.fixed li[aria-selected="true"] > a .icon svg > use { - stroke: #fff; -} diff --git a/blocks/page-tabs/page-tabs.js b/blocks/page-tabs/page-tabs.js index 40089f1d0..cba44b58f 100644 --- a/blocks/page-tabs/page-tabs.js +++ b/blocks/page-tabs/page-tabs.js @@ -13,10 +13,10 @@ function scrollPageTabFixed(pageTabsContainer) { pageTabsOriginalOffset = rectPageTabs.top; } if (window.scrollY > pageTabsOriginalOffset) { - pageTabsContainer.classList.add(...'w-full fixed inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); + pageTabsContainer.classList.add(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); pageTabsContainer.classList.remove(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); } else { - pageTabsContainer.classList.remove(...'w-full fixed inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); + pageTabsContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); pageTabsContainer.classList.add(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); } } diff --git a/styles/styles.css b/styles/styles.css index 6210b8b14..fc2c8d874 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1389,6 +1389,43 @@ main .top-border > div.columns-wrapper:first-child { font-weight: 700; } +svg symbol path { + stroke: inherit; +} + +.page-tabs-container.fixed ul { + border-radius: 0px; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.page-tabs-container li[aria-selected="false"] > a { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.page-tabs-container li[aria-selected="true"] svg { + stroke: #fff; +} + +.page-tabs-container.fixed li > a { + border-radius: 9999px; +} + +.page-tabs-container li:hover > a, + .page-tabs-container li[aria-selected="true"] > a { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.page-tabs-container.fixed li:hover > a .icon svg > use, + .page-tabs-container.fixed li[aria-selected="true"] > a .icon svg > use { + stroke: #fff; +} + .sr-only { position: absolute; width: 1px; diff --git a/styles/tailwind.css b/styles/tailwind.css index 201a0c951..124c0a58f 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -313,6 +313,37 @@ .category .default-content-wrapper h2, .category .accordion-wrapper h2 { @apply font-semibold text-2xl pt-4; } + + svg symbol path { + stroke: inherit; + } + + .page-tabs-container.fixed ul { + @apply shadow-none rounded-none; + } + + .page-tabs-container li[aria-selected="false"] > a { + @apply bg-white; + } + + .page-tabs-container li[aria-selected="true"] svg { + @apply stroke-white; + } + + .page-tabs-container.fixed li > a { + @apply rounded-full; + } + + .page-tabs-container li:hover > a, + .page-tabs-container li[aria-selected="true"] > a { + @apply text-white bg-danaherpurple-500; + } + + .page-tabs-container.fixed li:hover > a .icon svg > use, + .page-tabs-container.fixed li[aria-selected="true"] > a .icon svg > use { + @apply stroke-white; + } + } @layer utilities { From 5d02845ade3eb9dff656444d8c1dbca9bf07bb75 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Fri, 10 May 2024 14:09:00 +0530 Subject: [PATCH 42/88] Fixed page jump menu --- blocks/page-jump-menu/page-jump-menu.css | 56 ----- blocks/page-jump-menu/page-jump-menu.js | 28 +-- scripts/scripts-dev.js | 23 ++ scripts/scripts.js | 2 +- styles/styles.css | 279 ++++++++++++++++------- styles/tailwind.css | 46 +++- 6 files changed, 269 insertions(+), 165 deletions(-) diff --git a/blocks/page-jump-menu/page-jump-menu.css b/blocks/page-jump-menu/page-jump-menu.css index f6a90ed24..6a254eff5 100644 --- a/blocks/page-jump-menu/page-jump-menu.css +++ b/blocks/page-jump-menu/page-jump-menu.css @@ -567,10 +567,6 @@ video { margin-top: 1rem; } -.page-jump-menu-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .page-jump-menu-wrapper :is(.block) { display: block; } @@ -608,19 +604,6 @@ video { overflow: hidden; } -.page-jump-menu-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.page-jump-menu-wrapper :is(.rounded-none) { - border-radius: 0px; -} - -.page-jump-menu-wrapper :is(.\!bg-danaherpurple-500) { - --tw-bg-opacity: 1 !important; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)) !important; -} - .page-jump-menu-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -635,14 +618,6 @@ video { stroke: #000; } -.page-jump-menu-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.page-jump-menu-wrapper :is(.stroke-white) { - stroke: #fff; -} - .page-jump-menu-wrapper :is(.stroke-1) { stroke-width: 1; } @@ -682,11 +657,6 @@ video { letter-spacing: 0.05em; } -.page-jump-menu-wrapper :is(.\!text-white) { - --tw-text-opacity: 1 !important; - color: rgb(255 255 255 / var(--tw-text-opacity)) !important; -} - .page-jump-menu-wrapper :is(.text-danaherblack-500) { --tw-text-opacity: 1; color: rgb(51 51 51 / var(--tw-text-opacity)); @@ -698,12 +668,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.page-jump-menu-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .page-jump-menu-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -740,26 +704,6 @@ video { } } -.page-jump-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:mx-auto .page-jump-menu-wrapper) { - margin-left: auto; - margin-right: auto; -} - -.page-jump-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:flex .page-jump-menu-wrapper) { - display: flex; -} - -@media (min-width: 768px) { - .page-jump-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .page-jump-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - .page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:mx-auto .page-tabs-wrapper) { margin-left: auto; margin-right: auto; diff --git a/blocks/page-jump-menu/page-jump-menu.js b/blocks/page-jump-menu/page-jump-menu.js index 06e2ff098..0ce76c5a8 100644 --- a/blocks/page-jump-menu/page-jump-menu.js +++ b/blocks/page-jump-menu/page-jump-menu.js @@ -1,31 +1,9 @@ import { createDropdownList, createTabList } from '../page-tabs/page-tabs.js'; - -let originalOffset = 0; - -function scrollJumpMenuFixed(pageJumpMenuContainer) { - if (!originalOffset) { - const rectPageTabs = pageJumpMenuContainer.getBoundingClientRect(); - originalOffset = rectPageTabs.top; - } - if (window.scrollY > originalOffset) { - pageJumpMenuContainer.classList.add(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); - document.querySelector('.page-jump-menu-container.fixed ul')?.classList.add('shadow-none', 'rounded-none'); - document.querySelectorAll('.page-jump-menu-container.fixed ul li')?.forEach((el) => { - el?.firstElementChild?.classList.add('rounded-full'); - el?.firstElementChild?.querySelector('span.icon svg use')?.classList.add('stroke-danaherpurple-500'); - }); - document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add('stroke-white'); - pageJumpMenuContainer.classList.remove(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); - } else { - pageJumpMenuContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); - document.querySelectorAll('.page-jump-menu-container ul li')?.forEach((el) => el?.firstElementChild?.classList.remove('rounded-full')); - pageJumpMenuContainer.classList.add(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); - } -} +import { scrollJumpMenuFixed } from '../../scripts/scripts.js'; export default async function decorate(block) { const main = block.closest('main'); - const pageJumpMenuContainer = block.closest('.page-jump-menu'); + const pageJumpMenuContainer = block.closest('.page-jump-menu-container'); const pageMenus = block.children; const currentTab = window.location.pathname.split('/').pop().replace('.html', ''); @@ -52,8 +30,6 @@ export default async function decorate(block) { block.innerHTML = ''; block.append(navList); - pageJumpMenuContainer.classList.add(...'hidden md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-jump-menu-wrapper]:flex [&_.page-jump-menu-wrapper]:mx-auto [&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); - document.querySelector('.page-jump-menu-container li[aria-selected="true"] a')?.classList.add('!text-white', '!bg-danaherpurple-500'); const selectEl = document.getElementById('selectedTabId'); selectEl.addEventListener('change', (event) => { window.location.replace(event.target.value); diff --git a/scripts/scripts-dev.js b/scripts/scripts-dev.js index 83d8df988..2554e054f 100644 --- a/scripts/scripts-dev.js +++ b/scripts/scripts-dev.js @@ -93,6 +93,29 @@ export function generateUUID() { return Math.floor(1000 + Math.random() * 9000); } +let originalOffset = 0; + +export function scrollJumpMenuFixed(pageJumpMenuContainer) { + if (!originalOffset) { + const rectPageTabs = pageJumpMenuContainer.getBoundingClientRect(); + originalOffset = rectPageTabs.top; + } + if (window.scrollY > originalOffset) { + pageJumpMenuContainer.classList.add(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); + document.querySelector('.page-jump-menu-container.fixed ul')?.classList.add('shadow-none', 'rounded-none'); + document.querySelectorAll('.page-jump-menu-container.fixed ul li')?.forEach((el) => { + el?.firstElementChild?.classList.add('rounded-full'); + el?.firstElementChild?.querySelector('span.icon svg use')?.classList.add('stroke-danaherpurple-500'); + }); + document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add('stroke-white'); + pageJumpMenuContainer.classList.remove(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + } else { + pageJumpMenuContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); + document.querySelectorAll('.page-jump-menu-container ul li')?.forEach((el) => el?.firstElementChild?.classList.remove('rounded-full')); + pageJumpMenuContainer.classList.add(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + } +} + /** * Returns the valid public url with or without .html extension * @param {string} url diff --git a/scripts/scripts.js b/scripts/scripts.js index 2b7c0bc6b..84a8ae4e0 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1 +1 @@ -import{sampleRUM,loadHeader,loadFooter,decorateButtons,decorateIcons,decorateSections,decorateBlocks,decorateTemplateAndTheme,waitForLCP,loadBlocks,loadCSS,toClassName,getMetadata,createOptimizedPicture,loadBlock,decorateBlock}from"./lib-franklin.js";import{div,domEl,img}from"./dom-builder.js";const LCP_BLOCKS=["breadcrumb","product-hero","carousel"],TEMPLATE_LIST={blog:"blog",news:"blog",productdetail:"productDetail",processstep:"processstep",topic:"topic",library:"library",info:"library"};function imageHelper(e,t,a=!1){return-1<e.indexOf(".scene7.com")?img({src:""+e,alt:t,loading:a?"eager":"lazy",class:"mb-2 h-48 w-full object-cover"}):((e=createOptimizedPicture(e,t,a,[{width:"500"}])).querySelector("img").className="mb-2 h-48 w-full object-cover",e)}function createOptimizedS7Picture(e,t="",a=!1){var o;return e.startsWith("/is/image")||-1<e.indexOf(".scene7.com")?((o=document.createElement("picture")).appendChild(img({src:e+"?$danaher-mobile$",alt:t,loading:a?"eager":"lazy"})),o):img({src:e,alt:t,loading:a?"eager":"lazy"})}function formatDateUTCSeconds(e,t={}){var a=new Date(0);return a.setUTCSeconds(e),a.toLocaleDateString("en-US",{month:"short",day:"2-digit",year:"numeric",...t})}function generateUUID(){return Math.floor(1e3+9e3*Math.random())}function makePublicUrl(t){var e=window.location.hostname.includes("lifesciences.danaher.com");try{var a=new URL(t,window.location.origin);return e?a.pathname.endsWith(".html")||(a.pathname+=".html"):a.pathname.endsWith(".html")&&(a.pathname=a.pathname.slice(0,-5)),a.pathname}catch(e){return console.error("Invalid URL:",e),t}}function setJsonLd(e,t){var a=document.head.querySelector(`script[data-name="${t}"]`);a?a.innerHTML=JSON.stringify(e):((a=document.createElement("script")).type="application/ld+json",a.innerHTML=JSON.stringify(e),a.dataset.name=t,document.head.appendChild(a))}function setFavicon(){var e=document.querySelector("link[rel*='icon']")||document.createElement("link");e.type="image/x-icon",e.rel="shortcut icon",e.href=`https://${window.location.hostname}/favicon.ico`,document.getElementsByTagName("head")[0].appendChild(e)}async function getFragmentFromFile(e){var t=await fetch(e);return t.ok?await t.text()||(console.error("fragment details empty",e),null):(console.error("error loading fragment details",t),null)}function getCookie(e){let t=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*"+encodeURIComponent(e).replace(/[\\-\\.\\+\\*]/g,"\\$&")+"\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"))||null;if(t&&("{"===t.substring(0,1)&&"}"===t.substring(t.length-1,t.length)||"["===t.substring(0,1)&&"]"===t.substring(t.length-1,t.length)))try{t=JSON.parse(t)}catch(e){}return t}function isOTEnabled(){var e=getCookie("OptanonConsent");return"string"!=typeof e||e.includes("C0002:1")}function setCookie(e,t,a=2592e6,o="/"){var n=new Date,a=(n.setTime(n.getTime()+a),"expires=".concat(n.toGMTString())),n=e.concat("=").concat(t).concat(";").concat(a).concat(";path=").concat(o);document.cookie=n}async function buildVideo(e){e=e.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"],a[href*="vidyard.com"]');if(0<e.length){const t=(await import("../blocks/embed/embed.js"))["default"];e.forEach(e=>{null==e.closest(".embed, .hero")&&t(e.parentNode)})}}async function loadFonts(){await loadCSS(window.hlx.codeBasePath+"/styles/fonts.css");try{window.location.hostname.includes("localhost")||sessionStorage.setItem("fonts-loaded","true")}catch(e){}}function buildAutoBlocks(e){try{buildVideo(e)}catch(e){console.error("Auto Blocking failed",e)}}function decorateModals(e){const t=e.querySelector(".show-modal-btn"),a=()=>t.getAttribute("data-dialog-message")?t.getAttribute("dialog-message"):"";t?.addEventListener("click",async e=>{e.preventDefault();e=(await import("./modal.js")).default;(await e("custom-modal",a,e=>{e.querySelector('p[name="close"]')?.addEventListener("click",()=>e.close())})).showModal()})}function decorateTwoColumnSection(e){e.querySelectorAll(".section.container-two-col").forEach(o=>{o.querySelectorAll(":scope > .default-content-wrapper").forEach(e=>{[...e.children].forEach(e=>{o.appendChild(e)});let t=e.nextSibling;for(var a=[];t;)t.className.includes("-wrapper")&&a.push(t),t=t.nextSibling;o.append(...a),o.removeChild(e)});const t=div();let a=null;[...o.children].forEach(e=>{"H1"===e.tagName&&(t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"})),a=div({class:"col-right w-full mt-0 md:mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-0 md:pb-10"}));e=e.cloneNode(!0);"H2"===e.tagName&&e.querySelector(":scope > strong")?(a?.classList.contains("col-right")&&t.appendChild(a),e.className="text-gray-900 text-base leading-6 font-bold pt-6 pb-4 my-0",t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"},e,domEl("hr",{style:"height: 10px; width: 54px; border-width: 0px; color: rgb(216, 244, 250); background-color: rgb(216, 244, 250);"}))),a=div({class:"col-right w-full mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-10"})):a?.classList.contains("col-right")&&a.appendChild(e)}),a&&t.appendChild(a),t.classList.add("w-full","flex","flex-wrap","break-normal"),o.innerHTML=t.outerHTML,o.classList.add("mx-auto","w-full","flex","flex-wrap","mb-5")})}function updateExternalLinks(l){const c=[window.location.origin];l.querySelectorAll("a[href]").forEach(t=>{try{var{origin:e,pathname:a,hash:o}=new URL(t.href,window.location.href),n=o&&o.startsWith("#_"),r="pdf"===a.split(".").pop();e&&e!==window.location.origin&&!n||r?(t.setAttribute("target","_blank"),c.includes(e)||t.setAttribute("rel","noopener")):n&&(t.setAttribute("target",o.replace("#","")),t.href=t.href.replace(o,""))}catch(e){console.warn(`Invalid link in ${l}: `+t.href)}})}function lazyLoadHiddenPageNavTabs(e,t){var a=window.location.hash;const n=a?a.substring(1,a.length).toLowerCase():t;e.forEach(t=>{if(!t.className.includes("breadcrumb-container")&&t.getAttribute("aria-labelledby")!==n){t.querySelectorAll(".block").forEach(e=>{e.setAttribute("data-block-status","loaded"),e.setAttribute("data-block-lazy-load",!0),e.parentElement.style.display="none"});const a=e=>{e.querySelectorAll(".block[data-block-lazy-load]").forEach(async e=>{e.removeAttribute("data-block-lazy-load"),e.setAttribute("data-block-status","initialized"),await loadBlock(e),e.parentElement.style.display=""}),t.setAttribute("data-section-status","loaded")},o=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(o.disconnect(),a(t))});o.observe(t),setTimeout(()=>{o.disconnect(),a(t)},5e3)}})}function decoratePageNav(t){var o=t.querySelector(".page-tabs");if(o){o=o.closest("div.section");let e=[...t.querySelectorAll("div.section")];const n=(e=e.slice(e.indexOf(o)+1)).filter(e=>e.hasAttribute("data-tabname"));let a=0;e.forEach(e=>{var t;a<n.length&&(e.classList.add("page-tab"),t=n[a].getAttribute("data-tabname")?.toLowerCase().replace(/\s+/g,"-"),e.setAttribute("aria-labelledby",t),e.hasAttribute("data-tabname"))&&(a+=1)}),lazyLoadHiddenPageNavTabs(e,n[0].getAttribute("aria-labelledby"))}}function decorateMain(e){decorateButtons(e),decorateIcons(e),buildAutoBlocks(e),decorateSections(e),decorateBlocks(e),loadHeader(document.querySelector("header")),decoratePageNav(e),decorateTwoColumnSection(e),updateExternalLinks(e)}async function decorateTemplates(e){try{var t,a,o=toClassName(getMetadata("template"));Object.keys(TEMPLATE_LIST).includes(o)&&(t=TEMPLATE_LIST[o],(a=await import(`../templates/${t}/${t}.js`)).default&&await a.default(e),document.body.classList.add(t))}catch(e){console.error("Auto Blocking failed",e)}}function decorateEmbeddedBlocks(e){e.querySelectorAll("div.section > div").forEach(decorateBlock)}async function processEmbedFragment(e){const t=div({class:"embed-fragment"});[...e.classList].forEach(e=>{t.classList.add(e)});var a=e.textContent;return a&&((a=await getFragmentFromFile(a+".plain.html"))?(t.innerHTML=a,[...t.querySelectorAll(".embed-fragment > div")].forEach(e=>{e.classList.add("section")}),decorateEmbeddedBlocks(t),decorateSections(t),loadBlocks(t)):(a=e.innerHTML,t.append(div({class:"section"})),t.querySelector(".section").innerHTML=a)),decorateButtons(t),decorateIcons(t),t}function loadATPageParams(){var e=window.location.pathname.replaceAll("/","_").replace(/\.html$/,"").substring(1),t=getMetadata("sku"),a=getMetadata("fullcategory").split("|").pop(),o=getMetadata("og:image"),n=getMetadata("og:title");return{id:e,skuId:t,categoryId:a,thumbnailURL:o,name:-1<n.indexOf("| Danaher Life Sciences")?n.split("| Danaher Life Sciences")[0]:n,message:getMetadata("og:description"),pageUrl:getMetadata("og:url"),brand:getMetadata("brand"),page:window.location.pathname.split("/")[3],tags:getMetadata("article:tag"),articleAuthor:getMetadata("authorname"),articlePostDate:getMetadata("publishdate"),articleReadTime:getMetadata("readingtime")}}function initATJS(t,e){return window.targetGlobalSettings=e,window.atPageParams=loadATPageParams(),window.targetPageParams=function(){return{at_property:"6aeb619e-92d9-f4cf-f209-6d88ff58af6a","entity.id":window.atPageParams?.id,"entity.skuId":window.atPageParams?.skuId,"entity.categoryId":window.atPageParams?.categoryId,"entity.thumbnailURL":window.atPageParams?.thumbnailURL,"entity.name":window.atPageParams?.name,"entity.message":window.atPageParams?.message,"entity.pageUrl":window.atPageParams?.pageUrl,"entity.brand":window.atPageParams?.brand,"entity.page":window.atPageParams?.page,"entity.tags":window.atPageParams?.tags,"entity.articleAuthor":window.atPageParams?.articleAuthor,"entity.articlePostDate":window.atPageParams?.articlePostDate,"entity.articleReadTime":window.atPageParams?.articleReadTime,danaherCompany:localStorage.getItem("danaher_company")?localStorage.getItem("danaher_company"):"",utmCampaign:localStorage.getItem("danaher_utm_campaign")?localStorage.getItem("danaher_utm_campaign"):"",utmSource:localStorage.getItem("danaher_utm_source")?localStorage.getItem("danaher_utm_source"):"",utmMedium:localStorage.getItem("danaher_utm_medium")?localStorage.getItem("danaher_utm_medium"):"",utmContent:localStorage.getItem("danaher_utm_content")?localStorage.getItem("danaher_utm_content"):""}},new Promise(e=>{import(t).then(e)})}function onDecoratedElement(t){document.querySelector('[data-block-status="loaded"],[data-section-status="loaded"]')&&t();var e=new MutationObserver(e=>{e.some(e=>"BODY"===e.target.tagName||"loaded"===e.target.dataset.sectionStatus||"loaded"===e.target.dataset.blockStatus)&&t()});e.observe(document.querySelector("main"),{subtree:!0,attributes:!0,attributeFilter:["data-block-status","data-section-status"]}),e.observe(document.querySelector("body"),{childList:!0})}function toCssSelector(e){return e.replace(/(\.\S+)?:eq\((\d+)\)/g,(e,t,a)=>":nth-child("+(Number(a)+1)+(t?` of ${t})`:""))}async function getElementForOffer(e){e=e.cssSelector||toCssSelector(e.selector);return document.querySelector(e)}async function getElementForMetric(e){e=toCssSelector(e.selector);return document.querySelector(e)}async function getAndApplyOffers(){const e=await window.adobe.target.getOffers({request:{execute:{pageLoad:{}}}}),{options:t=[],metrics:a=[]}=e.execute.pageLoad;onDecoratedElement(()=>{window.adobe.target.applyOffers({response:e}),t.forEach(e=>e.content=e.content.filter(e=>!getElementForOffer(e))),a.map((e,t)=>getElementForMetric(e)?t:-1).filter(e=>0<=e).reverse().map(e=>a.splice(e,1))})}let atjsPromise=Promise.resolve();const urlTarget=window.location.pathname,regex=/^\/(us\/en\/products\.html)?$/;async function loadEager(e){document.documentElement.lang="en",decorateTemplateAndTheme(),await window.hlx.plugins.run("loadEager");e=e.querySelector("main");e&&(await decorateTemplates(e),decorateMain(e),await atjsPromise,await new Promise(e=>{window.requestAnimationFrame(async()=>{document.body.classList.add("appear"),await waitForLCP(LCP_BLOCKS),e()})}));try{(900<=window.innerWidth||sessionStorage.getItem("fonts-loaded"))&&loadFonts()}catch(e){}}function getParameterByName(e,t=window.location.href){e=e.replace(/[[\]]/g,"$&"),e=new RegExp(`[?&]${e}(=([^&#]*)|&|#|$)`).exec(t);return e?e[2]?decodeURIComponent(e[2].replace(/\+/g," ")):"":null}function loadUTMprams(){["utm_campaign","utm_source","utm_medium","utm_content","utm_term","utm_previouspage"].forEach(e=>{var t=getParameterByName(e);null!==t&&window.localStorage.setItem("danaher_"+e,t)})}async function loadLazy(e){var t=e.querySelector("main"),a=(await loadBlocks(t),window.location)["hash"],o=!!a&&e.getElementById(a.substring(1));a&&o&&o.scrollIntoView(),loadFooter(e.querySelector("footer")),loadCSS(window.hlx.codeBasePath+"/styles/lazy-styles.css"),loadFonts(),window.hlx.plugins.run("loadLazy"),sampleRUM("lazy"),sampleRUM.observe(t.querySelectorAll("div[data-block-name]")),sampleRUM.observe(t.querySelectorAll("picture > img")),loadUTMprams()}function loadDelayed(){window.setTimeout(()=>(window.hlx.plugins.load("delayed"),window.hlx.plugins.run("loadDelayed"),import("./delayed.js")),4e3)}async function loadPage(){setFavicon(),await window.hlx.plugins.load("eager"),await loadEager(document),await window.hlx.plugins.load("lazy"),await loadLazy(document),loadDelayed()}function getDLPage(){var e={title:document.querySelector("title").textContent.replace(/[\n\t]/gm,""),language:"en",locale:"US",level:"top",type:"webpage",keywords:"",creationDate:getMetadata("creationdate"),updateDate:getMetadata("updatedate")},t=window.location.pathname;return"/"===t||"/us/en"===t||"/us/en.html"===t?(e.level="top",e.type="home"):t.includes("/us/en/news")?(e.level="top",e.type="news"):t.includes("/us/en/blog")?(e.level="middle",e.type="blog"):t.includes("/us/en/solutions")?(e.level="middle",e.type="solutions"):t.includes("/us/en/applications")?(e.level="middle",e.type="applications"):t.includes("/us/en/products")?t.includes("/us/en/products/family")?(e.level="bottom",e.type="family"):t.includes("/us/en/products/bundles")?(e.level="bottom",e.type="bundles"):t.includes("/us/en/products/sku")?(e.level="bottom",e.type="sku"):t.includes("/topics")?(e.level="other",e.type="topics"):(e.level="bottom",e.type="products"):t.includes("/us/en/library")?(e.level="other",e.type="library"):t.includes("/us/en/about-us")?(e.level="top",e.type="about-us"):t.includes("/us/en/expert")?(e.level="top",e.type="expert"):t.includes("/us/en/search")||t.includes("/us/en/danahersearch")?(e.level="top",e.type="search"):t.includes("/us/en/signin")?(e.level="top",e.type="signin"):t.includes("/us/en/legal")&&(e.level="top",e.type="legal"),e}regex.test(urlTarget)||(atjsPromise=initATJS("./at.js",{clientCode:"danaher",serverDomain:"danaher.tt.omtrdc.net",imsOrgId:"08333E7B636A2D4D0A495C34@AdobeOrg",bodyHidingEnabled:!1,cookieDomain:window.location.hostname,pageLoadEnabled:!1,secureOnly:!0,viewsEnabled:!1,withWebGLRenderer:!1}).catch(e=>{console.error("Error loading at.js",e)}),document.addEventListener("at-library-loaded",()=>getAndApplyOffers()));const urlParams=new URLSearchParams(window.location.search),useProd=urlParams.get("useProd");"lifesciences.danaher.com"===window.location.host||"true"===useProd?window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-THXPLCS",munchkinID:"306-EHG-641",marketoDomain:"//306-EHG-641.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danaherproductionrfl96bkr",searchKey:"xxf2f10385-5a54-4a18-bb48-fd8025d6b5d2",workflowProductKey:"xx3d1b8da5-d1e9-4989-bbed-264a248a9e22",workflowResourceKey:"xxf6a8b387-10f2-4660-af5d-6d304d0a789d",productKey:"xxfb161aa6-0fa0-419f-af37-9c6d7784bf76",familyProductKey:"xx1ecd2a4f-8391-4c70-b3c0-2d589bda56b7",familyResourceKey:"xx9dd85afc-64b6-4295-bc5d-eb8285f96d52",categoryProductKey:"xx2a299d60-2cf1-48ab-b9d5-94daeb25f1d6",categoryDetailKey:"xx61910369-c1ab-4df9-8d8a-3092b1323fcc",productRecommendationsKey:"xx107716c0-1ccd-4a61-8717-6ca36b6cdb0e",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"lifesciences.danaher.com"}:window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-KCBGM2N",munchkinID:"439-KNJ-322",marketoDomain:"//439-KNJ-322.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://stage.shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danahernonproduction1892f3fhz",searchKey:"xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b",workflowProductKey:"xx26ffc727-cc72-4bbd-98e3-34052f296382",workflowResourceKey:"xx14676f1d-cf4a-4a38-94f0-eda56e9920f1",productKey:"xx32da148e-dfd0-4725-a443-c05a7793afea",familyProductKey:"xx4e3989d6-93aa-4140-a227-19da35fcd1cc",familyResourceKey:"xx8274a91e-b29c-4267-8b3a-5022a2698605",categoryProductKey:"xxdf9d160d-f6e5-4c8c-969b-8570d7b81418",categoryDetailKey:"xxf2ea9bfd-bccb-4195-90fd-7757504fdc33",productRecommendationsKey:"xxea4d2c40-26e7-4e98-9377-d8ebe3f435ea",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"stage.lifesciences.danaher.com"},window.dataLayer=[],window.dataLayer.push({user:{customerID:"",accountType:"guest",marketCode:"",company:"",role:"",city:"",state:"",country:"",postalCode:"",lastVisit:""}}),window.dataLayer.push({page:getDLPage()}),loadPage();export{imageHelper,createOptimizedS7Picture,formatDateUTCSeconds,generateUUID,makePublicUrl,setJsonLd,getFragmentFromFile,getCookie,isOTEnabled,setCookie,decorateModals,decorateMain,processEmbedFragment}; \ No newline at end of file +import{sampleRUM,loadHeader,loadFooter,decorateButtons,decorateIcons,decorateSections,decorateBlocks,decorateTemplateAndTheme,waitForLCP,loadBlocks,loadCSS,toClassName,getMetadata,createOptimizedPicture,loadBlock,decorateBlock}from"./lib-franklin.js";import{div,domEl,img}from"./dom-builder.js";const LCP_BLOCKS=["breadcrumb","product-hero","carousel"],TEMPLATE_LIST={blog:"blog",news:"blog",productdetail:"productDetail",processstep:"processstep",topic:"topic",library:"library",info:"library"};function imageHelper(e,t,a=!1){return-1<e.indexOf(".scene7.com")?img({src:""+e,alt:t,loading:a?"eager":"lazy",class:"mb-2 h-48 w-full object-cover"}):((e=createOptimizedPicture(e,t,a,[{width:"500"}])).querySelector("img").className="mb-2 h-48 w-full object-cover",e)}function createOptimizedS7Picture(e,t="",a=!1){var o;return e.startsWith("/is/image")||-1<e.indexOf(".scene7.com")?((o=document.createElement("picture")).appendChild(img({src:e+"?$danaher-mobile$",alt:t,loading:a?"eager":"lazy"})),o):img({src:e,alt:t,loading:a?"eager":"lazy"})}function formatDateUTCSeconds(e,t={}){var a=new Date(0);return a.setUTCSeconds(e),a.toLocaleDateString("en-US",{month:"short",day:"2-digit",year:"numeric",...t})}function generateUUID(){return Math.floor(1e3+9e3*Math.random())}let originalOffset=0;function scrollJumpMenuFixed(e){var t;originalOffset||(t=e.getBoundingClientRect(),originalOffset=t.top),window.scrollY>originalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelector(".page-jump-menu-container.fixed ul")?.classList.add("shadow-none","rounded-none"),document.querySelectorAll(".page-jump-menu-container.fixed ul li")?.forEach(e=>{e?.firstElementChild?.classList.add("rounded-full"),e?.firstElementChild?.querySelector("span.icon svg use")?.classList.add("stroke-danaherpurple-500")}),document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add("stroke-white"),e.classList.remove(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelectorAll(".page-jump-menu-container ul li")?.forEach(e=>e?.firstElementChild?.classList.remove("rounded-full")),e.classList.add(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}function makePublicUrl(t){var e=window.location.hostname.includes("lifesciences.danaher.com");try{var a=new URL(t,window.location.origin);return e?a.pathname.endsWith(".html")||(a.pathname+=".html"):a.pathname.endsWith(".html")&&(a.pathname=a.pathname.slice(0,-5)),a.pathname}catch(e){return console.error("Invalid URL:",e),t}}function setJsonLd(e,t){var a=document.head.querySelector(`script[data-name="${t}"]`);a?a.innerHTML=JSON.stringify(e):((a=document.createElement("script")).type="application/ld+json",a.innerHTML=JSON.stringify(e),a.dataset.name=t,document.head.appendChild(a))}function setFavicon(){var e=document.querySelector("link[rel*='icon']")||document.createElement("link");e.type="image/x-icon",e.rel="shortcut icon",e.href=`https://${window.location.hostname}/favicon.ico`,document.getElementsByTagName("head")[0].appendChild(e)}async function getFragmentFromFile(e){var t=await fetch(e);return t.ok?await t.text()||(console.error("fragment details empty",e),null):(console.error("error loading fragment details",t),null)}function getCookie(e){let t=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*"+encodeURIComponent(e).replace(/[\\-\\.\\+\\*]/g,"\\$&")+"\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"))||null;if(t&&("{"===t.substring(0,1)&&"}"===t.substring(t.length-1,t.length)||"["===t.substring(0,1)&&"]"===t.substring(t.length-1,t.length)))try{t=JSON.parse(t)}catch(e){}return t}function isOTEnabled(){var e=getCookie("OptanonConsent");return"string"!=typeof e||e.includes("C0002:1")}function setCookie(e,t,a=2592e6,o="/"){var n=new Date,a=(n.setTime(n.getTime()+a),"expires=".concat(n.toGMTString())),n=e.concat("=").concat(t).concat(";").concat(a).concat(";path=").concat(o);document.cookie=n}async function buildVideo(e){e=e.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"],a[href*="vidyard.com"]');if(0<e.length){const t=(await import("../blocks/embed/embed.js"))["default"];e.forEach(e=>{null==e.closest(".embed, .hero")&&t(e.parentNode)})}}async function loadFonts(){await loadCSS(window.hlx.codeBasePath+"/styles/fonts.css");try{window.location.hostname.includes("localhost")||sessionStorage.setItem("fonts-loaded","true")}catch(e){}}function buildAutoBlocks(e){try{buildVideo(e)}catch(e){console.error("Auto Blocking failed",e)}}function decorateModals(e){const t=e.querySelector(".show-modal-btn"),a=()=>t.getAttribute("data-dialog-message")?t.getAttribute("dialog-message"):"";t?.addEventListener("click",async e=>{e.preventDefault();e=(await import("./modal.js")).default;(await e("custom-modal",a,e=>{e.querySelector('p[name="close"]')?.addEventListener("click",()=>e.close())})).showModal()})}function decorateTwoColumnSection(e){e.querySelectorAll(".section.container-two-col").forEach(o=>{o.querySelectorAll(":scope > .default-content-wrapper").forEach(e=>{[...e.children].forEach(e=>{o.appendChild(e)});let t=e.nextSibling;for(var a=[];t;)t.className.includes("-wrapper")&&a.push(t),t=t.nextSibling;o.append(...a),o.removeChild(e)});const t=div();let a=null;[...o.children].forEach(e=>{"H1"===e.tagName&&(t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"})),a=div({class:"col-right w-full mt-0 md:mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-0 md:pb-10"}));e=e.cloneNode(!0);"H2"===e.tagName&&e.querySelector(":scope > strong")?(a?.classList.contains("col-right")&&t.appendChild(a),e.className="text-gray-900 text-base leading-6 font-bold pt-6 pb-4 my-0",t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"},e,domEl("hr",{style:"height: 10px; width: 54px; border-width: 0px; color: rgb(216, 244, 250); background-color: rgb(216, 244, 250);"}))),a=div({class:"col-right w-full mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-10"})):a?.classList.contains("col-right")&&a.appendChild(e)}),a&&t.appendChild(a),t.classList.add("w-full","flex","flex-wrap","break-normal"),o.innerHTML=t.outerHTML,o.classList.add("mx-auto","w-full","flex","flex-wrap","mb-5")})}function updateExternalLinks(l){const i=[window.location.origin];l.querySelectorAll("a[href]").forEach(t=>{try{var{origin:e,pathname:a,hash:o}=new URL(t.href,window.location.href),n=o&&o.startsWith("#_"),r="pdf"===a.split(".").pop();e&&e!==window.location.origin&&!n||r?(t.setAttribute("target","_blank"),i.includes(e)||t.setAttribute("rel","noopener")):n&&(t.setAttribute("target",o.replace("#","")),t.href=t.href.replace(o,""))}catch(e){console.warn(`Invalid link in ${l}: `+t.href)}})}function lazyLoadHiddenPageNavTabs(e,t){var a=window.location.hash;const n=a?a.substring(1,a.length).toLowerCase():t;e.forEach(t=>{if(!t.className.includes("breadcrumb-container")&&t.getAttribute("aria-labelledby")!==n){t.querySelectorAll(".block").forEach(e=>{e.setAttribute("data-block-status","loaded"),e.setAttribute("data-block-lazy-load",!0),e.parentElement.style.display="none"});const a=e=>{e.querySelectorAll(".block[data-block-lazy-load]").forEach(async e=>{e.removeAttribute("data-block-lazy-load"),e.setAttribute("data-block-status","initialized"),await loadBlock(e),e.parentElement.style.display=""}),t.setAttribute("data-section-status","loaded")},o=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(o.disconnect(),a(t))});o.observe(t),setTimeout(()=>{o.disconnect(),a(t)},5e3)}})}function decoratePageNav(t){var o=t.querySelector(".page-tabs");if(o){o=o.closest("div.section");let e=[...t.querySelectorAll("div.section")];const n=(e=e.slice(e.indexOf(o)+1)).filter(e=>e.hasAttribute("data-tabname"));let a=0;e.forEach(e=>{var t;a<n.length&&(e.classList.add("page-tab"),t=n[a].getAttribute("data-tabname")?.toLowerCase().replace(/\s+/g,"-"),e.setAttribute("aria-labelledby",t),e.hasAttribute("data-tabname"))&&(a+=1)}),lazyLoadHiddenPageNavTabs(e,n[0].getAttribute("aria-labelledby"))}}function decorateMain(e){decorateButtons(e),decorateIcons(e),buildAutoBlocks(e),decorateSections(e),decorateBlocks(e),loadHeader(document.querySelector("header")),decoratePageNav(e),decorateTwoColumnSection(e),updateExternalLinks(e)}async function decorateTemplates(e){try{var t,a,o=toClassName(getMetadata("template"));Object.keys(TEMPLATE_LIST).includes(o)&&(t=TEMPLATE_LIST[o],(a=await import(`../templates/${t}/${t}.js`)).default&&await a.default(e),document.body.classList.add(t))}catch(e){console.error("Auto Blocking failed",e)}}function decorateEmbeddedBlocks(e){e.querySelectorAll("div.section > div").forEach(decorateBlock)}async function processEmbedFragment(e){const t=div({class:"embed-fragment"});[...e.classList].forEach(e=>{t.classList.add(e)});var a=e.textContent;return a&&((a=await getFragmentFromFile(a+".plain.html"))?(t.innerHTML=a,[...t.querySelectorAll(".embed-fragment > div")].forEach(e=>{e.classList.add("section")}),decorateEmbeddedBlocks(t),decorateSections(t),loadBlocks(t)):(a=e.innerHTML,t.append(div({class:"section"})),t.querySelector(".section").innerHTML=a)),decorateButtons(t),decorateIcons(t),t}function loadATPageParams(){var e=window.location.pathname.replaceAll("/","_").replace(/\.html$/,"").substring(1),t=getMetadata("sku"),a=getMetadata("fullcategory").split("|").pop(),o=getMetadata("og:image"),n=getMetadata("og:title");return{id:e,skuId:t,categoryId:a,thumbnailURL:o,name:-1<n.indexOf("| Danaher Life Sciences")?n.split("| Danaher Life Sciences")[0]:n,message:getMetadata("og:description"),pageUrl:getMetadata("og:url"),brand:getMetadata("brand"),page:window.location.pathname.split("/")[3],tags:getMetadata("article:tag"),articleAuthor:getMetadata("authorname"),articlePostDate:getMetadata("publishdate"),articleReadTime:getMetadata("readingtime")}}function initATJS(t,e){return window.targetGlobalSettings=e,window.atPageParams=loadATPageParams(),window.targetPageParams=function(){return{at_property:"6aeb619e-92d9-f4cf-f209-6d88ff58af6a","entity.id":window.atPageParams?.id,"entity.skuId":window.atPageParams?.skuId,"entity.categoryId":window.atPageParams?.categoryId,"entity.thumbnailURL":window.atPageParams?.thumbnailURL,"entity.name":window.atPageParams?.name,"entity.message":window.atPageParams?.message,"entity.pageUrl":window.atPageParams?.pageUrl,"entity.brand":window.atPageParams?.brand,"entity.page":window.atPageParams?.page,"entity.tags":window.atPageParams?.tags,"entity.articleAuthor":window.atPageParams?.articleAuthor,"entity.articlePostDate":window.atPageParams?.articlePostDate,"entity.articleReadTime":window.atPageParams?.articleReadTime,danaherCompany:localStorage.getItem("danaher_company")?localStorage.getItem("danaher_company"):"",utmCampaign:localStorage.getItem("danaher_utm_campaign")?localStorage.getItem("danaher_utm_campaign"):"",utmSource:localStorage.getItem("danaher_utm_source")?localStorage.getItem("danaher_utm_source"):"",utmMedium:localStorage.getItem("danaher_utm_medium")?localStorage.getItem("danaher_utm_medium"):"",utmContent:localStorage.getItem("danaher_utm_content")?localStorage.getItem("danaher_utm_content"):""}},new Promise(e=>{import(t).then(e)})}function onDecoratedElement(t){document.querySelector('[data-block-status="loaded"],[data-section-status="loaded"]')&&t();var e=new MutationObserver(e=>{e.some(e=>"BODY"===e.target.tagName||"loaded"===e.target.dataset.sectionStatus||"loaded"===e.target.dataset.blockStatus)&&t()});e.observe(document.querySelector("main"),{subtree:!0,attributes:!0,attributeFilter:["data-block-status","data-section-status"]}),e.observe(document.querySelector("body"),{childList:!0})}function toCssSelector(e){return e.replace(/(\.\S+)?:eq\((\d+)\)/g,(e,t,a)=>":nth-child("+(Number(a)+1)+(t?` of ${t})`:""))}async function getElementForOffer(e){e=e.cssSelector||toCssSelector(e.selector);return document.querySelector(e)}async function getElementForMetric(e){e=toCssSelector(e.selector);return document.querySelector(e)}async function getAndApplyOffers(){const e=await window.adobe.target.getOffers({request:{execute:{pageLoad:{}}}}),{options:t=[],metrics:a=[]}=e.execute.pageLoad;onDecoratedElement(()=>{window.adobe.target.applyOffers({response:e}),t.forEach(e=>e.content=e.content.filter(e=>!getElementForOffer(e))),a.map((e,t)=>getElementForMetric(e)?t:-1).filter(e=>0<=e).reverse().map(e=>a.splice(e,1))})}let atjsPromise=Promise.resolve();const urlTarget=window.location.pathname,regex=/^\/(us\/en\/products\.html)?$/;async function loadEager(e){document.documentElement.lang="en",decorateTemplateAndTheme(),await window.hlx.plugins.run("loadEager");e=e.querySelector("main");e&&(await decorateTemplates(e),decorateMain(e),await atjsPromise,await new Promise(e=>{window.requestAnimationFrame(async()=>{document.body.classList.add("appear"),await waitForLCP(LCP_BLOCKS),e()})}));try{(900<=window.innerWidth||sessionStorage.getItem("fonts-loaded"))&&loadFonts()}catch(e){}}function getParameterByName(e,t=window.location.href){e=e.replace(/[[\]]/g,"$&"),e=new RegExp(`[?&]${e}(=([^&#]*)|&|#|$)`).exec(t);return e?e[2]?decodeURIComponent(e[2].replace(/\+/g," ")):"":null}function loadUTMprams(){["utm_campaign","utm_source","utm_medium","utm_content","utm_term","utm_previouspage"].forEach(e=>{var t=getParameterByName(e);null!==t&&window.localStorage.setItem("danaher_"+e,t)})}async function loadLazy(e){var t=e.querySelector("main"),a=(await loadBlocks(t),window.location)["hash"],o=!!a&&e.getElementById(a.substring(1));a&&o&&o.scrollIntoView(),loadFooter(e.querySelector("footer")),loadCSS(window.hlx.codeBasePath+"/styles/lazy-styles.css"),loadFonts(),window.hlx.plugins.run("loadLazy"),sampleRUM("lazy"),sampleRUM.observe(t.querySelectorAll("div[data-block-name]")),sampleRUM.observe(t.querySelectorAll("picture > img")),loadUTMprams()}function loadDelayed(){window.setTimeout(()=>(window.hlx.plugins.load("delayed"),window.hlx.plugins.run("loadDelayed"),import("./delayed.js")),4e3)}async function loadPage(){setFavicon(),await window.hlx.plugins.load("eager"),await loadEager(document),await window.hlx.plugins.load("lazy"),await loadLazy(document),loadDelayed()}function getDLPage(){var e={title:document.querySelector("title").textContent.replace(/[\n\t]/gm,""),language:"en",locale:"US",level:"top",type:"webpage",keywords:"",creationDate:getMetadata("creationdate"),updateDate:getMetadata("updatedate")},t=window.location.pathname;return"/"===t||"/us/en"===t||"/us/en.html"===t?(e.level="top",e.type="home"):t.includes("/us/en/news")?(e.level="top",e.type="news"):t.includes("/us/en/blog")?(e.level="middle",e.type="blog"):t.includes("/us/en/solutions")?(e.level="middle",e.type="solutions"):t.includes("/us/en/applications")?(e.level="middle",e.type="applications"):t.includes("/us/en/products")?t.includes("/us/en/products/family")?(e.level="bottom",e.type="family"):t.includes("/us/en/products/bundles")?(e.level="bottom",e.type="bundles"):t.includes("/us/en/products/sku")?(e.level="bottom",e.type="sku"):t.includes("/topics")?(e.level="other",e.type="topics"):(e.level="bottom",e.type="products"):t.includes("/us/en/library")?(e.level="other",e.type="library"):t.includes("/us/en/about-us")?(e.level="top",e.type="about-us"):t.includes("/us/en/expert")?(e.level="top",e.type="expert"):t.includes("/us/en/search")||t.includes("/us/en/danahersearch")?(e.level="top",e.type="search"):t.includes("/us/en/signin")?(e.level="top",e.type="signin"):t.includes("/us/en/legal")&&(e.level="top",e.type="legal"),e}regex.test(urlTarget)||(atjsPromise=initATJS("./at.js",{clientCode:"danaher",serverDomain:"danaher.tt.omtrdc.net",imsOrgId:"08333E7B636A2D4D0A495C34@AdobeOrg",bodyHidingEnabled:!1,cookieDomain:window.location.hostname,pageLoadEnabled:!1,secureOnly:!0,viewsEnabled:!1,withWebGLRenderer:!1}).catch(e=>{console.error("Error loading at.js",e)}),document.addEventListener("at-library-loaded",()=>getAndApplyOffers()));const urlParams=new URLSearchParams(window.location.search),useProd=urlParams.get("useProd");"lifesciences.danaher.com"===window.location.host||"true"===useProd?window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-THXPLCS",munchkinID:"306-EHG-641",marketoDomain:"//306-EHG-641.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danaherproductionrfl96bkr",searchKey:"xxf2f10385-5a54-4a18-bb48-fd8025d6b5d2",workflowProductKey:"xx3d1b8da5-d1e9-4989-bbed-264a248a9e22",workflowResourceKey:"xxf6a8b387-10f2-4660-af5d-6d304d0a789d",productKey:"xxfb161aa6-0fa0-419f-af37-9c6d7784bf76",familyProductKey:"xx1ecd2a4f-8391-4c70-b3c0-2d589bda56b7",familyResourceKey:"xx9dd85afc-64b6-4295-bc5d-eb8285f96d52",categoryProductKey:"xx2a299d60-2cf1-48ab-b9d5-94daeb25f1d6",categoryDetailKey:"xx61910369-c1ab-4df9-8d8a-3092b1323fcc",productRecommendationsKey:"xx107716c0-1ccd-4a61-8717-6ca36b6cdb0e",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"lifesciences.danaher.com"}:window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-KCBGM2N",munchkinID:"439-KNJ-322",marketoDomain:"//439-KNJ-322.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://stage.shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danahernonproduction1892f3fhz",searchKey:"xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b",workflowProductKey:"xx26ffc727-cc72-4bbd-98e3-34052f296382",workflowResourceKey:"xx14676f1d-cf4a-4a38-94f0-eda56e9920f1",productKey:"xx32da148e-dfd0-4725-a443-c05a7793afea",familyProductKey:"xx4e3989d6-93aa-4140-a227-19da35fcd1cc",familyResourceKey:"xx8274a91e-b29c-4267-8b3a-5022a2698605",categoryProductKey:"xxdf9d160d-f6e5-4c8c-969b-8570d7b81418",categoryDetailKey:"xxf2ea9bfd-bccb-4195-90fd-7757504fdc33",productRecommendationsKey:"xxea4d2c40-26e7-4e98-9377-d8ebe3f435ea",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"stage.lifesciences.danaher.com"},window.dataLayer=[],window.dataLayer.push({user:{customerID:"",accountType:"guest",marketCode:"",company:"",role:"",city:"",state:"",country:"",postalCode:"",lastVisit:""}}),window.dataLayer.push({page:getDLPage()}),loadPage();export{imageHelper,createOptimizedS7Picture,formatDateUTCSeconds,generateUUID,scrollJumpMenuFixed,makePublicUrl,setJsonLd,getFragmentFromFile,getCookie,isOTEnabled,setCookie,decorateModals,decorateMain,processEmbedFragment}; \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 65eed0f2b..db4607a03 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1229,7 +1229,7 @@ header { } } -.appear > div.mobile-jump-menu { +.appear > main > div.mobile-jump-menu { order: 9999; display: block; width: 100%; @@ -1242,12 +1242,12 @@ header { } @media (min-width: 768px) { - .appear > div.mobile-jump-menu { + .appear > main > div.mobile-jump-menu { display: none; } } -.appear > div > select.selected-tab { +.appear > main > div > select.selected-tab { display: block; width: auto; border-radius: 0.25rem; @@ -1263,7 +1263,7 @@ header { color: rgb(13 49 114 / var(--tw-text-opacity)); } -.appear > div > select.selected-tab:focus { +.appear > main > div > select.selected-tab:focus { outline: 2px solid transparent; outline-offset: 2px; } @@ -1431,6 +1431,106 @@ main .top-border > div.columns-wrapper:first-child { font-weight: 700; } +.page-jump-menu-container.fixed { + margin-top: -1px; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.page-jump-menu-container.fixed ul { + border-radius: 0px; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.page-jump-menu-container li[aria-selected="false"] > a { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.page-jump-menu-container li[aria-selected="true"] > a { + --tw-bg-opacity: 1 !important; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)) !important; + --tw-text-opacity: 1 !important; + color: rgb(255 255 255 / var(--tw-text-opacity)) !important; +} + +.page-jump-menu-container li[aria-selected="true"] svg { + stroke: #fff; +} + +.page-jump-menu-container.fixed li > a { + border-radius: 9999px; +} + +.page-jump-menu-container li:hover > a, + .page-jump-menu-container li[aria-selected="true"] > a { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.page-jump-menu-container.fixed li a .icon svg > use { + stroke: #7523FF; +} + +.page-jump-menu-container.fixed li:hover > a .icon svg > use, + .page-jump-menu-container.fixed li[aria-selected="true"] > a .icon svg > use { + stroke: #fff; +} + +.page-jump-menu-container { + margin-top: -5rem; + display: none; + padding-left: 0px; + padding-right: 0px; +} + +@media (min-width: 768px) { + .page-jump-menu-container { + display: block; + padding-left: 1rem; + padding-right: 1rem; + } +} + +@media (min-width: 1024px) { + .page-jump-menu-container { + padding-left: 0px; + padding-right: 0px; + } +} + +.page-jump-menu-container .page-jump-menu-wrapper { + margin-left: auto; + margin-right: auto; + display: flex; +} + +@media (min-width: 768px) { + .page-jump-menu-container .page-jump-menu-wrapper { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.page-jump-menu-container ul>li>a { + height: 10rem; + flex-direction: column; + justify-content: center; +} + +.page-jump-menu-container ul > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); +} + .pointer-events-none { pointer-events: none; } @@ -1443,10 +1543,6 @@ main .top-border > div.columns-wrapper:first-child { visibility: visible; } -.collapse { - visibility: collapse; -} - .static { position: static; } @@ -1459,6 +1555,11 @@ main .top-border > div.columns-wrapper:first-child { position: relative; } +.inset-x-0 { + left: 0px; + right: 0px; +} + .bottom-0 { bottom: 0px; } @@ -1475,12 +1576,16 @@ main .top-border > div.columns-wrapper:first-child { top: 0px; } -.z-\[9999\] { - z-index: 9999; +.top-\[83px\] { + top: 83px; } -.col-span-1 { - grid-column: span 1 / span 1; +.z-10 { + z-index: 10; +} + +.z-\[9999\] { + z-index: 9999; } .m-0 { @@ -1542,12 +1647,8 @@ main .top-border > div.columns-wrapper:first-child { margin-top: 1.5rem; } -.mb-3 { - margin-bottom: 0.75rem; -} - -.mb-4 { - margin-bottom: 1rem; +.mt-\[-1px\] { + margin-top: -1px; } .line-clamp-2 { @@ -1557,13 +1658,6 @@ main .top-border > div.columns-wrapper:first-child { -webkit-line-clamp: 2; } -.line-clamp-4 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 4; -} - .block { display: block; } @@ -1660,10 +1754,6 @@ main .top-border > div.columns-wrapper:first-child { flex-shrink: 0; } -.border-collapse { - border-collapse: collapse; -} - .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @@ -1722,10 +1812,6 @@ main .top-border > div.columns-wrapper:first-child { justify-content: space-between; } -.justify-items-center { - justify-items: center; -} - .gap-2 { gap: 0.5rem; } @@ -1734,10 +1820,6 @@ main .top-border > div.columns-wrapper:first-child { gap: 1rem; } -.gap-6 { - gap: 1.5rem; -} - .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; @@ -1753,12 +1835,6 @@ main .top-border > div.columns-wrapper:first-child { margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } -.space-x-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); -} - .overflow-hidden { overflow: hidden; } @@ -1776,10 +1852,6 @@ main .top-border > div.columns-wrapper:first-child { word-break: normal; } -.break-words { - overflow-wrap: break-word; -} - .rounded { border-radius: 0.25rem; } @@ -1792,8 +1864,8 @@ main .top-border > div.columns-wrapper:first-child { border-radius: 0.375rem; } -.rounded-lg { - border-radius: 0.5rem; +.rounded-none { + border-radius: 0px; } .rounded-r { @@ -1809,10 +1881,6 @@ main .top-border > div.columns-wrapper:first-child { border-width: 2px; } -.border-8 { - border-width: 8px; -} - .border-danaherpurple-500 { --tw-border-opacity: 1; border-color: rgb(117 35 255 / var(--tw-border-opacity)); @@ -1858,15 +1926,18 @@ main .top-border > div.columns-wrapper:first-child { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - .bg-opacity-10 { --tw-bg-opacity: 0.1; } +.stroke-danaherpurple-500 { + stroke: #7523FF; +} + +.stroke-white { + stroke: #fff; +} + .object-cover { -o-object-fit: cover; object-fit: cover; @@ -1928,16 +1999,6 @@ main .top-border > div.columns-wrapper:first-child { padding-bottom: 10rem; } -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.py-5 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; -} - .pb-0 { padding-bottom: 0px; } @@ -2097,10 +2158,6 @@ main .top-border > div.columns-wrapper:first-child { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.underline { - text-decoration-line: underline; -} - .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2113,6 +2170,12 @@ main .top-border > div.columns-wrapper:first-child { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-none { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); @@ -2125,10 +2188,6 @@ main .top-border > div.columns-wrapper:first-child { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.outline { - outline-style: solid; -} - .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -2152,10 +2211,6 @@ main .top-border > div.columns-wrapper:first-child { transition-duration: 150ms; } -.duration-500 { - transition-duration: 500ms; -} - main .section.top-border { margin: auto; margin-top: 2.5rem; @@ -2166,6 +2221,25 @@ main .section.top-border { border-color: rgb(0 0 0 / var(--tw-border-opacity)); } +.columns.features-card-left > div > .\[\&_ul\>li\>a\]\:h-full ul>li>adiv > .card { + display: flex; + flex-direction: row; + padding-bottom: 1.5rem; +} + +.columns.features-card-left > div > .\[\&_ul\>li\>a\]\:h-full ul>li>adiv > div.card > .left-content { + padding-right: 0.75rem; +} + +.productdetail main .columns.columns-2-cols .\[\&_ul\>li\>a\]\:h-full ul>li>a { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + .hover\:bg-danaherpurple-800:hover { --tw-bg-opacity: 1; background-color: rgb(64 0 165 / var(--tw-bg-opacity)); @@ -2303,3 +2377,48 @@ main .section.top-border { width: 75%; } } + +@media (min-width: 768px) { + .\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper { + max-width: 80rem; + } + + .\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down { + display: none; +} + +.\[\&_ul\>li\>a\]\:h-40 ul>li>a { + height: 10rem; +} + +.\[\&_ul\>li\>a\]\:h-full ul>li>a { + height: 100%; +} + +.\[\&_ul\>li\>a\]\:flex-row ul>li>a { + flex-direction: row; +} + +.\[\&_ul\>li\>a\]\:flex-col ul>li>a { + flex-direction: column; +} + +.\[\&_ul\>li\>a\]\:items-center ul>li>a { + align-items: center; +} + +.\[\&_ul\>li\>a\]\:justify-center ul>li>a { + justify-content: center; +} + +.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); +} diff --git a/styles/tailwind.css b/styles/tailwind.css index d65db677f..f52de968a 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -276,11 +276,11 @@ } } - .appear > div.mobile-jump-menu { + .appear > main > div.mobile-jump-menu { @apply block w-full px-4 py-2 bg-white md:hidden order-last; } - .appear > div > select.selected-tab { + .appear > main > div > select.selected-tab { @apply block w-auto py-2 pl-4 text-base border border-gray-300 rounded text-danaherblue-600 focus:outline-none; } @@ -393,6 +393,48 @@ .category .default-content-wrapper h2, .category .accordion-wrapper h2 { @apply font-semibold text-2xl pt-4; } + + .page-jump-menu-container.fixed { + @apply mt-[-1px] bg-white shadow-lg; + } + + .page-jump-menu-container.fixed ul { + @apply shadow-none rounded-none; + } + + .page-jump-menu-container li[aria-selected="false"] > a { + @apply bg-white; + } + + .page-jump-menu-container li[aria-selected="true"] > a { + @apply !text-white !bg-danaherpurple-500; + } + + .page-jump-menu-container li[aria-selected="true"] svg { + @apply stroke-white; + } + + .page-jump-menu-container.fixed li > a { + @apply rounded-full; + } + + .page-jump-menu-container li:hover > a, + .page-jump-menu-container li[aria-selected="true"] > a { + @apply text-white bg-danaherpurple-500; + } + + .page-jump-menu-container.fixed li a .icon svg > use { + @apply stroke-danaherpurple-500; + } + + .page-jump-menu-container.fixed li:hover > a .icon svg > use, + .page-jump-menu-container.fixed li[aria-selected="true"] > a .icon svg > use { + @apply stroke-white; + } + + .page-jump-menu-container { + @apply hidden md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-jump-menu-wrapper]:flex [&_.page-jump-menu-wrapper]:mx-auto [&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center; + } } @layer utilities { From e202bd0ba6c4c1a1a0b943dedc35f1d937b255b3 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Fri, 10 May 2024 14:18:48 +0530 Subject: [PATCH 43/88] prod-hero on page-tabs overlap issue --- styles/styles.css | 9 +++++++++ styles/tailwind.css | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index fc2c8d874..ab2c28454 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1340,6 +1340,15 @@ main .top-border > div.columns-wrapper:first-child { text-align: center; } +main .section.product-hero-container { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 0.5rem; + padding-bottom: 8rem; +} + .\!category main .section { padding-top: 2rem; padding-bottom: 2rem; diff --git a/styles/tailwind.css b/styles/tailwind.css index 124c0a58f..ac63c913b 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -294,7 +294,7 @@ @apply text-center; } - .product-hero-container { + main .section.product-hero-container { @apply bg-gray-50 px-2 pt-2 pb-32; } From e9acddf117cbf76badb875ab8a89b03541a7b6f7 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Fri, 10 May 2024 14:31:52 +0530 Subject: [PATCH 44/88] Fixed workflow tabs --- blocks/workflow-tabs/workflow-tabs.css | 8 ++++++++ tailwind.config.js | 10 +++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/blocks/workflow-tabs/workflow-tabs.css b/blocks/workflow-tabs/workflow-tabs.css index 3b5998d2b..547062686 100644 --- a/blocks/workflow-tabs/workflow-tabs.css +++ b/blocks/workflow-tabs/workflow-tabs.css @@ -534,6 +534,14 @@ video { --tw-backdrop-sepia: ; } +.off-screen { + position: absolute; + visibility: hidden; + left: 0px; + right: 0px; + opacity: 0; +} + .workflow-tabs-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; diff --git a/tailwind.config.js b/tailwind.config.js index f1835a751..5b8923988 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ /** @type {import('tailwindcss').Config} */ -const plugin = require('tailwindcss/plugin') +const plugin = require('tailwindcss/plugin'); +const { vi } = require('vitest'); const wrapper = (process.env.IMPORTANT_WRAPPER && process.env.IMPORTANT_WRAPPER !== '.undefined') ? process.env.IMPORTANT_WRAPPER : false; module.exports = { important: wrapper, @@ -51,6 +52,13 @@ module.exports = { lineHeight: '1.25rem', opacity: '1', }, + '.off-screen': { + position: 'absolute', + visibility: 'hidden', + left: '0px', + right: '0px', + opacity: '0', + }, '.btn-outline-trending-brand': { color: theme('colors.danaherpurple.500'), backgroundColor: 'rgb(255 255 255)', From db5eed09b6320b8cc323b4a92a86e564744badb8 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Fri, 10 May 2024 15:48:30 +0530 Subject: [PATCH 45/88] Added page-tab CSS --- blocks/page-jump-menu/page-jump-menu.css | 102 ---- blocks/page-tabs/page-tabs.css | 682 +++++++++++++++++++++++ blocks/page-tabs/page-tabs.js | 17 +- build-css.js | 2 +- scripts/scripts-dev.js | 14 + scripts/scripts.js | 2 +- styles/styles.css | 9 + styles/tailwind.css | 4 + 8 files changed, 712 insertions(+), 120 deletions(-) create mode 100644 blocks/page-tabs/page-tabs.css diff --git a/blocks/page-jump-menu/page-jump-menu.css b/blocks/page-jump-menu/page-jump-menu.css index 2cb01a2e3..6020ba082 100644 --- a/blocks/page-jump-menu/page-jump-menu.css +++ b/blocks/page-jump-menu/page-jump-menu.css @@ -534,31 +534,14 @@ video { --tw-backdrop-sepia: ; } -.page-jump-menu-wrapper :is(.fixed) { - position: fixed; -} - .page-jump-menu-wrapper :is(.relative) { position: relative; } -.page-jump-menu-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.page-jump-menu-wrapper :is(.top-\[83px\]) { - top: 83px; -} - .page-jump-menu-wrapper :is(.z-10) { z-index: 10; } -.page-jump-menu-wrapper :is(.-mt-20) { - margin-top: -5rem; -} - .page-jump-menu-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -567,10 +550,6 @@ video { margin-top: 1rem; } -.page-jump-menu-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .page-jump-menu-wrapper :is(.block) { display: block; } @@ -595,10 +574,6 @@ video { width: 2rem; } -.page-jump-menu-wrapper :is(.w-full) { - width: 100%; -} - .page-jump-menu-wrapper :is(.gap-x-2) { -moz-column-gap: 0.5rem; column-gap: 0.5rem; @@ -626,11 +601,6 @@ video { stroke-width: 1; } -.page-jump-menu-wrapper :is(.px-0) { - padding-left: 0px; - padding-right: 0px; -} - .page-jump-menu-wrapper :is(.py-2) { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -690,48 +660,6 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -@media (min-width: 768px) { - .page-jump-menu-wrapper :is(.md\:block) { - display: block; - } - - .page-jump-menu-wrapper :is(.md\:px-4) { - padding-left: 1rem; - padding-right: 1rem; - } -} - -@media (min-width: 1024px) { - .page-jump-menu-wrapper :is(.lg\:px-0) { - padding-left: 0px; - padding-right: 0px; - } -} - -.page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:mx-auto .page-tabs-wrapper) { - margin-left: auto; - margin-right: auto; -} - -.page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:flex .page-tabs-wrapper) { - display: flex; -} - -@media (min-width: 768px) { - .page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.page-jump-menu-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - .page-jump-menu-wrapper :is(.\[\&_svg\]\:stroke-danaherpurple-500 svg) { stroke: #7523FF; } @@ -755,34 +683,4 @@ video { .page-jump-menu-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:stroke-white svg) { stroke: #fff; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/page-tabs/page-tabs.css b/blocks/page-tabs/page-tabs.css new file mode 100644 index 000000000..c62087afd --- /dev/null +++ b/blocks/page-tabs/page-tabs.css @@ -0,0 +1,682 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.page-tabs-wrapper :is(.z-10) { + z-index: 10; +} + +.page-tabs-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.page-tabs-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.page-tabs-wrapper :is(.block) { + display: block; +} + +.page-tabs-wrapper :is(.flex) { + display: flex; +} + +.page-tabs-wrapper :is(.hidden) { + display: none; +} + +.page-tabs-wrapper :is(.h-8) { + height: 2rem; +} + +.page-tabs-wrapper :is(.w-48) { + width: 12rem; +} + +.page-tabs-wrapper :is(.w-8) { + width: 2rem; +} + +.page-tabs-wrapper :is(.gap-x-2) { + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} + +.page-tabs-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.page-tabs-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.page-tabs-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.page-tabs-wrapper :is(.stroke-black) { + stroke: #000; +} + +.page-tabs-wrapper :is(.stroke-1) { + stroke-width: 1; +} + +.page-tabs-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.page-tabs-wrapper :is(.pl-3) { + padding-left: 0.75rem; +} + +.page-tabs-wrapper :is(.pr-2) { + padding-right: 0.5rem; +} + +.page-tabs-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.page-tabs-wrapper :is(.font-bold) { + font-weight: 700; +} + +.page-tabs-wrapper :is(.capitalize) { + text-transform: capitalize; +} + +.page-tabs-wrapper :is(.tracking-wider) { + letter-spacing: 0.05em; +} + +.page-tabs-wrapper :is(.text-danaherblack-500) { + --tw-text-opacity: 1; + color: rgb(51 51 51 / var(--tw-text-opacity)); +} + +.page-tabs-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.page-tabs-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.page-tabs-wrapper :is(.group:hover .group-hover\:bg-danaherpurple-500) { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +.page-tabs-wrapper :is(.group:hover .group-hover\:stroke-white) { + stroke: #fff; +} + +.page-tabs-wrapper :is(.group:hover .group-hover\:text-white) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.page-tabs-wrapper :is(.\[\&_svg\]\:stroke-danaherpurple-500 svg) { + stroke: #7523FF; +} + +.page-tabs-wrapper :is(.\[\&_svg\]\:stroke-white svg) { + stroke: #fff; +} + +.page-tabs-wrapper :is(.\[\&_svg\]\:stroke-1 svg) { + stroke-width: 1; +} + +.page-tabs-wrapper :is(.\[\&_svg\]\:duration-300 svg) { + transition-duration: 300ms; +} + +.page-tabs-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:translate-y-1 svg) { + --tw-translate-y: 0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.page-tabs-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:stroke-white svg) { + stroke: #fff; +} \ No newline at end of file diff --git a/blocks/page-tabs/page-tabs.js b/blocks/page-tabs/page-tabs.js index 76cc2f213..eca9660cd 100644 --- a/blocks/page-tabs/page-tabs.js +++ b/blocks/page-tabs/page-tabs.js @@ -3,24 +3,10 @@ import { } from '../../scripts/dom-builder.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; import { getProductResponse } from '../../scripts/commerce.js'; +import { scrollPageTabFixed } from '../../scripts/scripts.js'; -let pageTabsOriginalOffset = 0; const extractIconName = (path) => path.split('/').pop().split('.')[0]; -function scrollPageTabFixed(pageTabsContainer) { - if (!pageTabsOriginalOffset) { - const rectPageTabs = pageTabsContainer.getBoundingClientRect(); - pageTabsOriginalOffset = rectPageTabs.top; - } - if (window.scrollY > pageTabsOriginalOffset) { - pageTabsContainer.classList.add(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); - pageTabsContainer.classList.remove(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); - } else { - pageTabsContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); - pageTabsContainer.classList.add(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); - } -} - function openTab(target) { const parent = target.parentNode; const main = parent.closest('main'); @@ -184,7 +170,6 @@ export default async function decorate(block) { block.innerHTML = ''; block.append(navList); - pageTabsContainer.classList.add(...'hidden md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-tabs-wrapper]:flex [&_.page-tabs-wrapper]:mx-auto'.split(' ')); } const selectEl = document.getElementById('selectedTabId'); diff --git a/build-css.js b/build-css.js index 9590f9652..d502bcbc7 100644 --- a/build-css.js +++ b/build-css.js @@ -107,7 +107,7 @@ const fileMappings = [ wrapper: 'page-jump-menu-wrapper', }, { - input: './blocks/page-tabs/page-tabs-dev.css', + content: './blocks/page-tabs/page-tabs.js', output: './blocks/page-tabs/page-tabs.css', wrapper: 'page-tabs-wrapper', }, diff --git a/scripts/scripts-dev.js b/scripts/scripts-dev.js index 2554e054f..37bbd40fc 100644 --- a/scripts/scripts-dev.js +++ b/scripts/scripts-dev.js @@ -116,6 +116,20 @@ export function scrollJumpMenuFixed(pageJumpMenuContainer) { } } +let pageTabsOriginalOffset = 0; +export function scrollPageTabFixed(pageTabsContainer) { + if (!pageTabsOriginalOffset) { + const rectPageTabs = pageTabsContainer.getBoundingClientRect(); + pageTabsOriginalOffset = rectPageTabs.top; + } + if (window.scrollY > pageTabsOriginalOffset) { + pageTabsContainer.classList.add(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); + pageTabsContainer.classList.remove(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + } else { + pageTabsContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); + pageTabsContainer.classList.add(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + } +} /** * Returns the valid public url with or without .html extension * @param {string} url diff --git a/scripts/scripts.js b/scripts/scripts.js index 84a8ae4e0..c36524821 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1 +1 @@ -import{sampleRUM,loadHeader,loadFooter,decorateButtons,decorateIcons,decorateSections,decorateBlocks,decorateTemplateAndTheme,waitForLCP,loadBlocks,loadCSS,toClassName,getMetadata,createOptimizedPicture,loadBlock,decorateBlock}from"./lib-franklin.js";import{div,domEl,img}from"./dom-builder.js";const LCP_BLOCKS=["breadcrumb","product-hero","carousel"],TEMPLATE_LIST={blog:"blog",news:"blog",productdetail:"productDetail",processstep:"processstep",topic:"topic",library:"library",info:"library"};function imageHelper(e,t,a=!1){return-1<e.indexOf(".scene7.com")?img({src:""+e,alt:t,loading:a?"eager":"lazy",class:"mb-2 h-48 w-full object-cover"}):((e=createOptimizedPicture(e,t,a,[{width:"500"}])).querySelector("img").className="mb-2 h-48 w-full object-cover",e)}function createOptimizedS7Picture(e,t="",a=!1){var o;return e.startsWith("/is/image")||-1<e.indexOf(".scene7.com")?((o=document.createElement("picture")).appendChild(img({src:e+"?$danaher-mobile$",alt:t,loading:a?"eager":"lazy"})),o):img({src:e,alt:t,loading:a?"eager":"lazy"})}function formatDateUTCSeconds(e,t={}){var a=new Date(0);return a.setUTCSeconds(e),a.toLocaleDateString("en-US",{month:"short",day:"2-digit",year:"numeric",...t})}function generateUUID(){return Math.floor(1e3+9e3*Math.random())}let originalOffset=0;function scrollJumpMenuFixed(e){var t;originalOffset||(t=e.getBoundingClientRect(),originalOffset=t.top),window.scrollY>originalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelector(".page-jump-menu-container.fixed ul")?.classList.add("shadow-none","rounded-none"),document.querySelectorAll(".page-jump-menu-container.fixed ul li")?.forEach(e=>{e?.firstElementChild?.classList.add("rounded-full"),e?.firstElementChild?.querySelector("span.icon svg use")?.classList.add("stroke-danaherpurple-500")}),document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add("stroke-white"),e.classList.remove(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelectorAll(".page-jump-menu-container ul li")?.forEach(e=>e?.firstElementChild?.classList.remove("rounded-full")),e.classList.add(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}function makePublicUrl(t){var e=window.location.hostname.includes("lifesciences.danaher.com");try{var a=new URL(t,window.location.origin);return e?a.pathname.endsWith(".html")||(a.pathname+=".html"):a.pathname.endsWith(".html")&&(a.pathname=a.pathname.slice(0,-5)),a.pathname}catch(e){return console.error("Invalid URL:",e),t}}function setJsonLd(e,t){var a=document.head.querySelector(`script[data-name="${t}"]`);a?a.innerHTML=JSON.stringify(e):((a=document.createElement("script")).type="application/ld+json",a.innerHTML=JSON.stringify(e),a.dataset.name=t,document.head.appendChild(a))}function setFavicon(){var e=document.querySelector("link[rel*='icon']")||document.createElement("link");e.type="image/x-icon",e.rel="shortcut icon",e.href=`https://${window.location.hostname}/favicon.ico`,document.getElementsByTagName("head")[0].appendChild(e)}async function getFragmentFromFile(e){var t=await fetch(e);return t.ok?await t.text()||(console.error("fragment details empty",e),null):(console.error("error loading fragment details",t),null)}function getCookie(e){let t=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*"+encodeURIComponent(e).replace(/[\\-\\.\\+\\*]/g,"\\$&")+"\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"))||null;if(t&&("{"===t.substring(0,1)&&"}"===t.substring(t.length-1,t.length)||"["===t.substring(0,1)&&"]"===t.substring(t.length-1,t.length)))try{t=JSON.parse(t)}catch(e){}return t}function isOTEnabled(){var e=getCookie("OptanonConsent");return"string"!=typeof e||e.includes("C0002:1")}function setCookie(e,t,a=2592e6,o="/"){var n=new Date,a=(n.setTime(n.getTime()+a),"expires=".concat(n.toGMTString())),n=e.concat("=").concat(t).concat(";").concat(a).concat(";path=").concat(o);document.cookie=n}async function buildVideo(e){e=e.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"],a[href*="vidyard.com"]');if(0<e.length){const t=(await import("../blocks/embed/embed.js"))["default"];e.forEach(e=>{null==e.closest(".embed, .hero")&&t(e.parentNode)})}}async function loadFonts(){await loadCSS(window.hlx.codeBasePath+"/styles/fonts.css");try{window.location.hostname.includes("localhost")||sessionStorage.setItem("fonts-loaded","true")}catch(e){}}function buildAutoBlocks(e){try{buildVideo(e)}catch(e){console.error("Auto Blocking failed",e)}}function decorateModals(e){const t=e.querySelector(".show-modal-btn"),a=()=>t.getAttribute("data-dialog-message")?t.getAttribute("dialog-message"):"";t?.addEventListener("click",async e=>{e.preventDefault();e=(await import("./modal.js")).default;(await e("custom-modal",a,e=>{e.querySelector('p[name="close"]')?.addEventListener("click",()=>e.close())})).showModal()})}function decorateTwoColumnSection(e){e.querySelectorAll(".section.container-two-col").forEach(o=>{o.querySelectorAll(":scope > .default-content-wrapper").forEach(e=>{[...e.children].forEach(e=>{o.appendChild(e)});let t=e.nextSibling;for(var a=[];t;)t.className.includes("-wrapper")&&a.push(t),t=t.nextSibling;o.append(...a),o.removeChild(e)});const t=div();let a=null;[...o.children].forEach(e=>{"H1"===e.tagName&&(t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"})),a=div({class:"col-right w-full mt-0 md:mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-0 md:pb-10"}));e=e.cloneNode(!0);"H2"===e.tagName&&e.querySelector(":scope > strong")?(a?.classList.contains("col-right")&&t.appendChild(a),e.className="text-gray-900 text-base leading-6 font-bold pt-6 pb-4 my-0",t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"},e,domEl("hr",{style:"height: 10px; width: 54px; border-width: 0px; color: rgb(216, 244, 250); background-color: rgb(216, 244, 250);"}))),a=div({class:"col-right w-full mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-10"})):a?.classList.contains("col-right")&&a.appendChild(e)}),a&&t.appendChild(a),t.classList.add("w-full","flex","flex-wrap","break-normal"),o.innerHTML=t.outerHTML,o.classList.add("mx-auto","w-full","flex","flex-wrap","mb-5")})}function updateExternalLinks(l){const i=[window.location.origin];l.querySelectorAll("a[href]").forEach(t=>{try{var{origin:e,pathname:a,hash:o}=new URL(t.href,window.location.href),n=o&&o.startsWith("#_"),r="pdf"===a.split(".").pop();e&&e!==window.location.origin&&!n||r?(t.setAttribute("target","_blank"),i.includes(e)||t.setAttribute("rel","noopener")):n&&(t.setAttribute("target",o.replace("#","")),t.href=t.href.replace(o,""))}catch(e){console.warn(`Invalid link in ${l}: `+t.href)}})}function lazyLoadHiddenPageNavTabs(e,t){var a=window.location.hash;const n=a?a.substring(1,a.length).toLowerCase():t;e.forEach(t=>{if(!t.className.includes("breadcrumb-container")&&t.getAttribute("aria-labelledby")!==n){t.querySelectorAll(".block").forEach(e=>{e.setAttribute("data-block-status","loaded"),e.setAttribute("data-block-lazy-load",!0),e.parentElement.style.display="none"});const a=e=>{e.querySelectorAll(".block[data-block-lazy-load]").forEach(async e=>{e.removeAttribute("data-block-lazy-load"),e.setAttribute("data-block-status","initialized"),await loadBlock(e),e.parentElement.style.display=""}),t.setAttribute("data-section-status","loaded")},o=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(o.disconnect(),a(t))});o.observe(t),setTimeout(()=>{o.disconnect(),a(t)},5e3)}})}function decoratePageNav(t){var o=t.querySelector(".page-tabs");if(o){o=o.closest("div.section");let e=[...t.querySelectorAll("div.section")];const n=(e=e.slice(e.indexOf(o)+1)).filter(e=>e.hasAttribute("data-tabname"));let a=0;e.forEach(e=>{var t;a<n.length&&(e.classList.add("page-tab"),t=n[a].getAttribute("data-tabname")?.toLowerCase().replace(/\s+/g,"-"),e.setAttribute("aria-labelledby",t),e.hasAttribute("data-tabname"))&&(a+=1)}),lazyLoadHiddenPageNavTabs(e,n[0].getAttribute("aria-labelledby"))}}function decorateMain(e){decorateButtons(e),decorateIcons(e),buildAutoBlocks(e),decorateSections(e),decorateBlocks(e),loadHeader(document.querySelector("header")),decoratePageNav(e),decorateTwoColumnSection(e),updateExternalLinks(e)}async function decorateTemplates(e){try{var t,a,o=toClassName(getMetadata("template"));Object.keys(TEMPLATE_LIST).includes(o)&&(t=TEMPLATE_LIST[o],(a=await import(`../templates/${t}/${t}.js`)).default&&await a.default(e),document.body.classList.add(t))}catch(e){console.error("Auto Blocking failed",e)}}function decorateEmbeddedBlocks(e){e.querySelectorAll("div.section > div").forEach(decorateBlock)}async function processEmbedFragment(e){const t=div({class:"embed-fragment"});[...e.classList].forEach(e=>{t.classList.add(e)});var a=e.textContent;return a&&((a=await getFragmentFromFile(a+".plain.html"))?(t.innerHTML=a,[...t.querySelectorAll(".embed-fragment > div")].forEach(e=>{e.classList.add("section")}),decorateEmbeddedBlocks(t),decorateSections(t),loadBlocks(t)):(a=e.innerHTML,t.append(div({class:"section"})),t.querySelector(".section").innerHTML=a)),decorateButtons(t),decorateIcons(t),t}function loadATPageParams(){var e=window.location.pathname.replaceAll("/","_").replace(/\.html$/,"").substring(1),t=getMetadata("sku"),a=getMetadata("fullcategory").split("|").pop(),o=getMetadata("og:image"),n=getMetadata("og:title");return{id:e,skuId:t,categoryId:a,thumbnailURL:o,name:-1<n.indexOf("| Danaher Life Sciences")?n.split("| Danaher Life Sciences")[0]:n,message:getMetadata("og:description"),pageUrl:getMetadata("og:url"),brand:getMetadata("brand"),page:window.location.pathname.split("/")[3],tags:getMetadata("article:tag"),articleAuthor:getMetadata("authorname"),articlePostDate:getMetadata("publishdate"),articleReadTime:getMetadata("readingtime")}}function initATJS(t,e){return window.targetGlobalSettings=e,window.atPageParams=loadATPageParams(),window.targetPageParams=function(){return{at_property:"6aeb619e-92d9-f4cf-f209-6d88ff58af6a","entity.id":window.atPageParams?.id,"entity.skuId":window.atPageParams?.skuId,"entity.categoryId":window.atPageParams?.categoryId,"entity.thumbnailURL":window.atPageParams?.thumbnailURL,"entity.name":window.atPageParams?.name,"entity.message":window.atPageParams?.message,"entity.pageUrl":window.atPageParams?.pageUrl,"entity.brand":window.atPageParams?.brand,"entity.page":window.atPageParams?.page,"entity.tags":window.atPageParams?.tags,"entity.articleAuthor":window.atPageParams?.articleAuthor,"entity.articlePostDate":window.atPageParams?.articlePostDate,"entity.articleReadTime":window.atPageParams?.articleReadTime,danaherCompany:localStorage.getItem("danaher_company")?localStorage.getItem("danaher_company"):"",utmCampaign:localStorage.getItem("danaher_utm_campaign")?localStorage.getItem("danaher_utm_campaign"):"",utmSource:localStorage.getItem("danaher_utm_source")?localStorage.getItem("danaher_utm_source"):"",utmMedium:localStorage.getItem("danaher_utm_medium")?localStorage.getItem("danaher_utm_medium"):"",utmContent:localStorage.getItem("danaher_utm_content")?localStorage.getItem("danaher_utm_content"):""}},new Promise(e=>{import(t).then(e)})}function onDecoratedElement(t){document.querySelector('[data-block-status="loaded"],[data-section-status="loaded"]')&&t();var e=new MutationObserver(e=>{e.some(e=>"BODY"===e.target.tagName||"loaded"===e.target.dataset.sectionStatus||"loaded"===e.target.dataset.blockStatus)&&t()});e.observe(document.querySelector("main"),{subtree:!0,attributes:!0,attributeFilter:["data-block-status","data-section-status"]}),e.observe(document.querySelector("body"),{childList:!0})}function toCssSelector(e){return e.replace(/(\.\S+)?:eq\((\d+)\)/g,(e,t,a)=>":nth-child("+(Number(a)+1)+(t?` of ${t})`:""))}async function getElementForOffer(e){e=e.cssSelector||toCssSelector(e.selector);return document.querySelector(e)}async function getElementForMetric(e){e=toCssSelector(e.selector);return document.querySelector(e)}async function getAndApplyOffers(){const e=await window.adobe.target.getOffers({request:{execute:{pageLoad:{}}}}),{options:t=[],metrics:a=[]}=e.execute.pageLoad;onDecoratedElement(()=>{window.adobe.target.applyOffers({response:e}),t.forEach(e=>e.content=e.content.filter(e=>!getElementForOffer(e))),a.map((e,t)=>getElementForMetric(e)?t:-1).filter(e=>0<=e).reverse().map(e=>a.splice(e,1))})}let atjsPromise=Promise.resolve();const urlTarget=window.location.pathname,regex=/^\/(us\/en\/products\.html)?$/;async function loadEager(e){document.documentElement.lang="en",decorateTemplateAndTheme(),await window.hlx.plugins.run("loadEager");e=e.querySelector("main");e&&(await decorateTemplates(e),decorateMain(e),await atjsPromise,await new Promise(e=>{window.requestAnimationFrame(async()=>{document.body.classList.add("appear"),await waitForLCP(LCP_BLOCKS),e()})}));try{(900<=window.innerWidth||sessionStorage.getItem("fonts-loaded"))&&loadFonts()}catch(e){}}function getParameterByName(e,t=window.location.href){e=e.replace(/[[\]]/g,"$&"),e=new RegExp(`[?&]${e}(=([^&#]*)|&|#|$)`).exec(t);return e?e[2]?decodeURIComponent(e[2].replace(/\+/g," ")):"":null}function loadUTMprams(){["utm_campaign","utm_source","utm_medium","utm_content","utm_term","utm_previouspage"].forEach(e=>{var t=getParameterByName(e);null!==t&&window.localStorage.setItem("danaher_"+e,t)})}async function loadLazy(e){var t=e.querySelector("main"),a=(await loadBlocks(t),window.location)["hash"],o=!!a&&e.getElementById(a.substring(1));a&&o&&o.scrollIntoView(),loadFooter(e.querySelector("footer")),loadCSS(window.hlx.codeBasePath+"/styles/lazy-styles.css"),loadFonts(),window.hlx.plugins.run("loadLazy"),sampleRUM("lazy"),sampleRUM.observe(t.querySelectorAll("div[data-block-name]")),sampleRUM.observe(t.querySelectorAll("picture > img")),loadUTMprams()}function loadDelayed(){window.setTimeout(()=>(window.hlx.plugins.load("delayed"),window.hlx.plugins.run("loadDelayed"),import("./delayed.js")),4e3)}async function loadPage(){setFavicon(),await window.hlx.plugins.load("eager"),await loadEager(document),await window.hlx.plugins.load("lazy"),await loadLazy(document),loadDelayed()}function getDLPage(){var e={title:document.querySelector("title").textContent.replace(/[\n\t]/gm,""),language:"en",locale:"US",level:"top",type:"webpage",keywords:"",creationDate:getMetadata("creationdate"),updateDate:getMetadata("updatedate")},t=window.location.pathname;return"/"===t||"/us/en"===t||"/us/en.html"===t?(e.level="top",e.type="home"):t.includes("/us/en/news")?(e.level="top",e.type="news"):t.includes("/us/en/blog")?(e.level="middle",e.type="blog"):t.includes("/us/en/solutions")?(e.level="middle",e.type="solutions"):t.includes("/us/en/applications")?(e.level="middle",e.type="applications"):t.includes("/us/en/products")?t.includes("/us/en/products/family")?(e.level="bottom",e.type="family"):t.includes("/us/en/products/bundles")?(e.level="bottom",e.type="bundles"):t.includes("/us/en/products/sku")?(e.level="bottom",e.type="sku"):t.includes("/topics")?(e.level="other",e.type="topics"):(e.level="bottom",e.type="products"):t.includes("/us/en/library")?(e.level="other",e.type="library"):t.includes("/us/en/about-us")?(e.level="top",e.type="about-us"):t.includes("/us/en/expert")?(e.level="top",e.type="expert"):t.includes("/us/en/search")||t.includes("/us/en/danahersearch")?(e.level="top",e.type="search"):t.includes("/us/en/signin")?(e.level="top",e.type="signin"):t.includes("/us/en/legal")&&(e.level="top",e.type="legal"),e}regex.test(urlTarget)||(atjsPromise=initATJS("./at.js",{clientCode:"danaher",serverDomain:"danaher.tt.omtrdc.net",imsOrgId:"08333E7B636A2D4D0A495C34@AdobeOrg",bodyHidingEnabled:!1,cookieDomain:window.location.hostname,pageLoadEnabled:!1,secureOnly:!0,viewsEnabled:!1,withWebGLRenderer:!1}).catch(e=>{console.error("Error loading at.js",e)}),document.addEventListener("at-library-loaded",()=>getAndApplyOffers()));const urlParams=new URLSearchParams(window.location.search),useProd=urlParams.get("useProd");"lifesciences.danaher.com"===window.location.host||"true"===useProd?window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-THXPLCS",munchkinID:"306-EHG-641",marketoDomain:"//306-EHG-641.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danaherproductionrfl96bkr",searchKey:"xxf2f10385-5a54-4a18-bb48-fd8025d6b5d2",workflowProductKey:"xx3d1b8da5-d1e9-4989-bbed-264a248a9e22",workflowResourceKey:"xxf6a8b387-10f2-4660-af5d-6d304d0a789d",productKey:"xxfb161aa6-0fa0-419f-af37-9c6d7784bf76",familyProductKey:"xx1ecd2a4f-8391-4c70-b3c0-2d589bda56b7",familyResourceKey:"xx9dd85afc-64b6-4295-bc5d-eb8285f96d52",categoryProductKey:"xx2a299d60-2cf1-48ab-b9d5-94daeb25f1d6",categoryDetailKey:"xx61910369-c1ab-4df9-8d8a-3092b1323fcc",productRecommendationsKey:"xx107716c0-1ccd-4a61-8717-6ca36b6cdb0e",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"lifesciences.danaher.com"}:window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-KCBGM2N",munchkinID:"439-KNJ-322",marketoDomain:"//439-KNJ-322.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://stage.shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danahernonproduction1892f3fhz",searchKey:"xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b",workflowProductKey:"xx26ffc727-cc72-4bbd-98e3-34052f296382",workflowResourceKey:"xx14676f1d-cf4a-4a38-94f0-eda56e9920f1",productKey:"xx32da148e-dfd0-4725-a443-c05a7793afea",familyProductKey:"xx4e3989d6-93aa-4140-a227-19da35fcd1cc",familyResourceKey:"xx8274a91e-b29c-4267-8b3a-5022a2698605",categoryProductKey:"xxdf9d160d-f6e5-4c8c-969b-8570d7b81418",categoryDetailKey:"xxf2ea9bfd-bccb-4195-90fd-7757504fdc33",productRecommendationsKey:"xxea4d2c40-26e7-4e98-9377-d8ebe3f435ea",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"stage.lifesciences.danaher.com"},window.dataLayer=[],window.dataLayer.push({user:{customerID:"",accountType:"guest",marketCode:"",company:"",role:"",city:"",state:"",country:"",postalCode:"",lastVisit:""}}),window.dataLayer.push({page:getDLPage()}),loadPage();export{imageHelper,createOptimizedS7Picture,formatDateUTCSeconds,generateUUID,scrollJumpMenuFixed,makePublicUrl,setJsonLd,getFragmentFromFile,getCookie,isOTEnabled,setCookie,decorateModals,decorateMain,processEmbedFragment}; \ No newline at end of file +import{sampleRUM,loadHeader,loadFooter,decorateButtons,decorateIcons,decorateSections,decorateBlocks,decorateTemplateAndTheme,waitForLCP,loadBlocks,loadCSS,toClassName,getMetadata,createOptimizedPicture,loadBlock,decorateBlock}from"./lib-franklin.js";import{div,domEl,img}from"./dom-builder.js";const LCP_BLOCKS=["breadcrumb","product-hero","carousel"],TEMPLATE_LIST={blog:"blog",news:"blog",productdetail:"productDetail",processstep:"processstep",topic:"topic",library:"library",info:"library"};function imageHelper(e,t,a=!1){return-1<e.indexOf(".scene7.com")?img({src:""+e,alt:t,loading:a?"eager":"lazy",class:"mb-2 h-48 w-full object-cover"}):((e=createOptimizedPicture(e,t,a,[{width:"500"}])).querySelector("img").className="mb-2 h-48 w-full object-cover",e)}function createOptimizedS7Picture(e,t="",a=!1){var o;return e.startsWith("/is/image")||-1<e.indexOf(".scene7.com")?((o=document.createElement("picture")).appendChild(img({src:e+"?$danaher-mobile$",alt:t,loading:a?"eager":"lazy"})),o):img({src:e,alt:t,loading:a?"eager":"lazy"})}function formatDateUTCSeconds(e,t={}){var a=new Date(0);return a.setUTCSeconds(e),a.toLocaleDateString("en-US",{month:"short",day:"2-digit",year:"numeric",...t})}function generateUUID(){return Math.floor(1e3+9e3*Math.random())}let originalOffset=0;function scrollJumpMenuFixed(e){var t;originalOffset||(t=e.getBoundingClientRect(),originalOffset=t.top),window.scrollY>originalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelector(".page-jump-menu-container.fixed ul")?.classList.add("shadow-none","rounded-none"),document.querySelectorAll(".page-jump-menu-container.fixed ul li")?.forEach(e=>{e?.firstElementChild?.classList.add("rounded-full"),e?.firstElementChild?.querySelector("span.icon svg use")?.classList.add("stroke-danaherpurple-500")}),document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add("stroke-white"),e.classList.remove(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelectorAll(".page-jump-menu-container ul li")?.forEach(e=>e?.firstElementChild?.classList.remove("rounded-full")),e.classList.add(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}let pageTabsOriginalOffset=0;function scrollPageTabFixed(e){var t;pageTabsOriginalOffset||(t=e.getBoundingClientRect(),pageTabsOriginalOffset=t.top),window.scrollY>pageTabsOriginalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),e.classList.remove(..."[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),e.classList.add(..."[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}function makePublicUrl(t){var e=window.location.hostname.includes("lifesciences.danaher.com");try{var a=new URL(t,window.location.origin);return e?a.pathname.endsWith(".html")||(a.pathname+=".html"):a.pathname.endsWith(".html")&&(a.pathname=a.pathname.slice(0,-5)),a.pathname}catch(e){return console.error("Invalid URL:",e),t}}function setJsonLd(e,t){var a=document.head.querySelector(`script[data-name="${t}"]`);a?a.innerHTML=JSON.stringify(e):((a=document.createElement("script")).type="application/ld+json",a.innerHTML=JSON.stringify(e),a.dataset.name=t,document.head.appendChild(a))}function setFavicon(){var e=document.querySelector("link[rel*='icon']")||document.createElement("link");e.type="image/x-icon",e.rel="shortcut icon",e.href=`https://${window.location.hostname}/favicon.ico`,document.getElementsByTagName("head")[0].appendChild(e)}async function getFragmentFromFile(e){var t=await fetch(e);return t.ok?await t.text()||(console.error("fragment details empty",e),null):(console.error("error loading fragment details",t),null)}function getCookie(e){let t=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*"+encodeURIComponent(e).replace(/[\\-\\.\\+\\*]/g,"\\$&")+"\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"))||null;if(t&&("{"===t.substring(0,1)&&"}"===t.substring(t.length-1,t.length)||"["===t.substring(0,1)&&"]"===t.substring(t.length-1,t.length)))try{t=JSON.parse(t)}catch(e){}return t}function isOTEnabled(){var e=getCookie("OptanonConsent");return"string"!=typeof e||e.includes("C0002:1")}function setCookie(e,t,a=2592e6,o="/"){var n=new Date,a=(n.setTime(n.getTime()+a),"expires=".concat(n.toGMTString())),n=e.concat("=").concat(t).concat(";").concat(a).concat(";path=").concat(o);document.cookie=n}async function buildVideo(e){e=e.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"],a[href*="vidyard.com"]');if(0<e.length){const t=(await import("../blocks/embed/embed.js"))["default"];e.forEach(e=>{null==e.closest(".embed, .hero")&&t(e.parentNode)})}}async function loadFonts(){await loadCSS(window.hlx.codeBasePath+"/styles/fonts.css");try{window.location.hostname.includes("localhost")||sessionStorage.setItem("fonts-loaded","true")}catch(e){}}function buildAutoBlocks(e){try{buildVideo(e)}catch(e){console.error("Auto Blocking failed",e)}}function decorateModals(e){const t=e.querySelector(".show-modal-btn"),a=()=>t.getAttribute("data-dialog-message")?t.getAttribute("dialog-message"):"";t?.addEventListener("click",async e=>{e.preventDefault();e=(await import("./modal.js")).default;(await e("custom-modal",a,e=>{e.querySelector('p[name="close"]')?.addEventListener("click",()=>e.close())})).showModal()})}function decorateTwoColumnSection(e){e.querySelectorAll(".section.container-two-col").forEach(o=>{o.querySelectorAll(":scope > .default-content-wrapper").forEach(e=>{[...e.children].forEach(e=>{o.appendChild(e)});let t=e.nextSibling;for(var a=[];t;)t.className.includes("-wrapper")&&a.push(t),t=t.nextSibling;o.append(...a),o.removeChild(e)});const t=div();let a=null;[...o.children].forEach(e=>{"H1"===e.tagName&&(t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"})),a=div({class:"col-right w-full mt-0 md:mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-0 md:pb-10"}));e=e.cloneNode(!0);"H2"===e.tagName&&e.querySelector(":scope > strong")?(a?.classList.contains("col-right")&&t.appendChild(a),e.className="text-gray-900 text-base leading-6 font-bold pt-6 pb-4 my-0",t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"},e,domEl("hr",{style:"height: 10px; width: 54px; border-width: 0px; color: rgb(216, 244, 250); background-color: rgb(216, 244, 250);"}))),a=div({class:"col-right w-full mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-10"})):a?.classList.contains("col-right")&&a.appendChild(e)}),a&&t.appendChild(a),t.classList.add("w-full","flex","flex-wrap","break-normal"),o.innerHTML=t.outerHTML,o.classList.add("mx-auto","w-full","flex","flex-wrap","mb-5")})}function updateExternalLinks(r){const i=[window.location.origin];r.querySelectorAll("a[href]").forEach(t=>{try{var{origin:e,pathname:a,hash:o}=new URL(t.href,window.location.href),n=o&&o.startsWith("#_"),l="pdf"===a.split(".").pop();e&&e!==window.location.origin&&!n||l?(t.setAttribute("target","_blank"),i.includes(e)||t.setAttribute("rel","noopener")):n&&(t.setAttribute("target",o.replace("#","")),t.href=t.href.replace(o,""))}catch(e){console.warn(`Invalid link in ${r}: `+t.href)}})}function lazyLoadHiddenPageNavTabs(e,t){var a=window.location.hash;const n=a?a.substring(1,a.length).toLowerCase():t;e.forEach(t=>{if(!t.className.includes("breadcrumb-container")&&t.getAttribute("aria-labelledby")!==n){t.querySelectorAll(".block").forEach(e=>{e.setAttribute("data-block-status","loaded"),e.setAttribute("data-block-lazy-load",!0),e.parentElement.style.display="none"});const a=e=>{e.querySelectorAll(".block[data-block-lazy-load]").forEach(async e=>{e.removeAttribute("data-block-lazy-load"),e.setAttribute("data-block-status","initialized"),await loadBlock(e),e.parentElement.style.display=""}),t.setAttribute("data-section-status","loaded")},o=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(o.disconnect(),a(t))});o.observe(t),setTimeout(()=>{o.disconnect(),a(t)},5e3)}})}function decoratePageNav(t){var o=t.querySelector(".page-tabs");if(o){o=o.closest("div.section");let e=[...t.querySelectorAll("div.section")];const n=(e=e.slice(e.indexOf(o)+1)).filter(e=>e.hasAttribute("data-tabname"));let a=0;e.forEach(e=>{var t;a<n.length&&(e.classList.add("page-tab"),t=n[a].getAttribute("data-tabname")?.toLowerCase().replace(/\s+/g,"-"),e.setAttribute("aria-labelledby",t),e.hasAttribute("data-tabname"))&&(a+=1)}),lazyLoadHiddenPageNavTabs(e,n[0].getAttribute("aria-labelledby"))}}function decorateMain(e){decorateButtons(e),decorateIcons(e),buildAutoBlocks(e),decorateSections(e),decorateBlocks(e),loadHeader(document.querySelector("header")),decoratePageNav(e),decorateTwoColumnSection(e),updateExternalLinks(e)}async function decorateTemplates(e){try{var t,a,o=toClassName(getMetadata("template"));Object.keys(TEMPLATE_LIST).includes(o)&&(t=TEMPLATE_LIST[o],(a=await import(`../templates/${t}/${t}.js`)).default&&await a.default(e),document.body.classList.add(t))}catch(e){console.error("Auto Blocking failed",e)}}function decorateEmbeddedBlocks(e){e.querySelectorAll("div.section > div").forEach(decorateBlock)}async function processEmbedFragment(e){const t=div({class:"embed-fragment"});[...e.classList].forEach(e=>{t.classList.add(e)});var a=e.textContent;return a&&((a=await getFragmentFromFile(a+".plain.html"))?(t.innerHTML=a,[...t.querySelectorAll(".embed-fragment > div")].forEach(e=>{e.classList.add("section")}),decorateEmbeddedBlocks(t),decorateSections(t),loadBlocks(t)):(a=e.innerHTML,t.append(div({class:"section"})),t.querySelector(".section").innerHTML=a)),decorateButtons(t),decorateIcons(t),t}function loadATPageParams(){var e=window.location.pathname.replaceAll("/","_").replace(/\.html$/,"").substring(1),t=getMetadata("sku"),a=getMetadata("fullcategory").split("|").pop(),o=getMetadata("og:image"),n=getMetadata("og:title");return{id:e,skuId:t,categoryId:a,thumbnailURL:o,name:-1<n.indexOf("| Danaher Life Sciences")?n.split("| Danaher Life Sciences")[0]:n,message:getMetadata("og:description"),pageUrl:getMetadata("og:url"),brand:getMetadata("brand"),page:window.location.pathname.split("/")[3],tags:getMetadata("article:tag"),articleAuthor:getMetadata("authorname"),articlePostDate:getMetadata("publishdate"),articleReadTime:getMetadata("readingtime")}}function initATJS(t,e){return window.targetGlobalSettings=e,window.atPageParams=loadATPageParams(),window.targetPageParams=function(){return{at_property:"6aeb619e-92d9-f4cf-f209-6d88ff58af6a","entity.id":window.atPageParams?.id,"entity.skuId":window.atPageParams?.skuId,"entity.categoryId":window.atPageParams?.categoryId,"entity.thumbnailURL":window.atPageParams?.thumbnailURL,"entity.name":window.atPageParams?.name,"entity.message":window.atPageParams?.message,"entity.pageUrl":window.atPageParams?.pageUrl,"entity.brand":window.atPageParams?.brand,"entity.page":window.atPageParams?.page,"entity.tags":window.atPageParams?.tags,"entity.articleAuthor":window.atPageParams?.articleAuthor,"entity.articlePostDate":window.atPageParams?.articlePostDate,"entity.articleReadTime":window.atPageParams?.articleReadTime,danaherCompany:localStorage.getItem("danaher_company")?localStorage.getItem("danaher_company"):"",utmCampaign:localStorage.getItem("danaher_utm_campaign")?localStorage.getItem("danaher_utm_campaign"):"",utmSource:localStorage.getItem("danaher_utm_source")?localStorage.getItem("danaher_utm_source"):"",utmMedium:localStorage.getItem("danaher_utm_medium")?localStorage.getItem("danaher_utm_medium"):"",utmContent:localStorage.getItem("danaher_utm_content")?localStorage.getItem("danaher_utm_content"):""}},new Promise(e=>{import(t).then(e)})}function onDecoratedElement(t){document.querySelector('[data-block-status="loaded"],[data-section-status="loaded"]')&&t();var e=new MutationObserver(e=>{e.some(e=>"BODY"===e.target.tagName||"loaded"===e.target.dataset.sectionStatus||"loaded"===e.target.dataset.blockStatus)&&t()});e.observe(document.querySelector("main"),{subtree:!0,attributes:!0,attributeFilter:["data-block-status","data-section-status"]}),e.observe(document.querySelector("body"),{childList:!0})}function toCssSelector(e){return e.replace(/(\.\S+)?:eq\((\d+)\)/g,(e,t,a)=>":nth-child("+(Number(a)+1)+(t?` of ${t})`:""))}async function getElementForOffer(e){e=e.cssSelector||toCssSelector(e.selector);return document.querySelector(e)}async function getElementForMetric(e){e=toCssSelector(e.selector);return document.querySelector(e)}async function getAndApplyOffers(){const e=await window.adobe.target.getOffers({request:{execute:{pageLoad:{}}}}),{options:t=[],metrics:a=[]}=e.execute.pageLoad;onDecoratedElement(()=>{window.adobe.target.applyOffers({response:e}),t.forEach(e=>e.content=e.content.filter(e=>!getElementForOffer(e))),a.map((e,t)=>getElementForMetric(e)?t:-1).filter(e=>0<=e).reverse().map(e=>a.splice(e,1))})}let atjsPromise=Promise.resolve();const urlTarget=window.location.pathname,regex=/^\/(us\/en\/products\.html)?$/;async function loadEager(e){document.documentElement.lang="en",decorateTemplateAndTheme(),await window.hlx.plugins.run("loadEager");e=e.querySelector("main");e&&(await decorateTemplates(e),decorateMain(e),await atjsPromise,await new Promise(e=>{window.requestAnimationFrame(async()=>{document.body.classList.add("appear"),await waitForLCP(LCP_BLOCKS),e()})}));try{(900<=window.innerWidth||sessionStorage.getItem("fonts-loaded"))&&loadFonts()}catch(e){}}function getParameterByName(e,t=window.location.href){e=e.replace(/[[\]]/g,"$&"),e=new RegExp(`[?&]${e}(=([^&#]*)|&|#|$)`).exec(t);return e?e[2]?decodeURIComponent(e[2].replace(/\+/g," ")):"":null}function loadUTMprams(){["utm_campaign","utm_source","utm_medium","utm_content","utm_term","utm_previouspage"].forEach(e=>{var t=getParameterByName(e);null!==t&&window.localStorage.setItem("danaher_"+e,t)})}async function loadLazy(e){var t=e.querySelector("main"),a=(await loadBlocks(t),window.location)["hash"],o=!!a&&e.getElementById(a.substring(1));a&&o&&o.scrollIntoView(),loadFooter(e.querySelector("footer")),loadCSS(window.hlx.codeBasePath+"/styles/lazy-styles.css"),loadFonts(),window.hlx.plugins.run("loadLazy"),sampleRUM("lazy"),sampleRUM.observe(t.querySelectorAll("div[data-block-name]")),sampleRUM.observe(t.querySelectorAll("picture > img")),loadUTMprams()}function loadDelayed(){window.setTimeout(()=>(window.hlx.plugins.load("delayed"),window.hlx.plugins.run("loadDelayed"),import("./delayed.js")),4e3)}async function loadPage(){setFavicon(),await window.hlx.plugins.load("eager"),await loadEager(document),await window.hlx.plugins.load("lazy"),await loadLazy(document),loadDelayed()}function getDLPage(){var e={title:document.querySelector("title").textContent.replace(/[\n\t]/gm,""),language:"en",locale:"US",level:"top",type:"webpage",keywords:"",creationDate:getMetadata("creationdate"),updateDate:getMetadata("updatedate")},t=window.location.pathname;return"/"===t||"/us/en"===t||"/us/en.html"===t?(e.level="top",e.type="home"):t.includes("/us/en/news")?(e.level="top",e.type="news"):t.includes("/us/en/blog")?(e.level="middle",e.type="blog"):t.includes("/us/en/solutions")?(e.level="middle",e.type="solutions"):t.includes("/us/en/applications")?(e.level="middle",e.type="applications"):t.includes("/us/en/products")?t.includes("/us/en/products/family")?(e.level="bottom",e.type="family"):t.includes("/us/en/products/bundles")?(e.level="bottom",e.type="bundles"):t.includes("/us/en/products/sku")?(e.level="bottom",e.type="sku"):t.includes("/topics")?(e.level="other",e.type="topics"):(e.level="bottom",e.type="products"):t.includes("/us/en/library")?(e.level="other",e.type="library"):t.includes("/us/en/about-us")?(e.level="top",e.type="about-us"):t.includes("/us/en/expert")?(e.level="top",e.type="expert"):t.includes("/us/en/search")||t.includes("/us/en/danahersearch")?(e.level="top",e.type="search"):t.includes("/us/en/signin")?(e.level="top",e.type="signin"):t.includes("/us/en/legal")&&(e.level="top",e.type="legal"),e}regex.test(urlTarget)||(atjsPromise=initATJS("./at.js",{clientCode:"danaher",serverDomain:"danaher.tt.omtrdc.net",imsOrgId:"08333E7B636A2D4D0A495C34@AdobeOrg",bodyHidingEnabled:!1,cookieDomain:window.location.hostname,pageLoadEnabled:!1,secureOnly:!0,viewsEnabled:!1,withWebGLRenderer:!1}).catch(e=>{console.error("Error loading at.js",e)}),document.addEventListener("at-library-loaded",()=>getAndApplyOffers()));const urlParams=new URLSearchParams(window.location.search),useProd=urlParams.get("useProd");"lifesciences.danaher.com"===window.location.host||"true"===useProd?window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-THXPLCS",munchkinID:"306-EHG-641",marketoDomain:"//306-EHG-641.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danaherproductionrfl96bkr",searchKey:"xxf2f10385-5a54-4a18-bb48-fd8025d6b5d2",workflowProductKey:"xx3d1b8da5-d1e9-4989-bbed-264a248a9e22",workflowResourceKey:"xxf6a8b387-10f2-4660-af5d-6d304d0a789d",productKey:"xxfb161aa6-0fa0-419f-af37-9c6d7784bf76",familyProductKey:"xx1ecd2a4f-8391-4c70-b3c0-2d589bda56b7",familyResourceKey:"xx9dd85afc-64b6-4295-bc5d-eb8285f96d52",categoryProductKey:"xx2a299d60-2cf1-48ab-b9d5-94daeb25f1d6",categoryDetailKey:"xx61910369-c1ab-4df9-8d8a-3092b1323fcc",productRecommendationsKey:"xx107716c0-1ccd-4a61-8717-6ca36b6cdb0e",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"lifesciences.danaher.com"}:window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-KCBGM2N",munchkinID:"439-KNJ-322",marketoDomain:"//439-KNJ-322.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://stage.shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danahernonproduction1892f3fhz",searchKey:"xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b",workflowProductKey:"xx26ffc727-cc72-4bbd-98e3-34052f296382",workflowResourceKey:"xx14676f1d-cf4a-4a38-94f0-eda56e9920f1",productKey:"xx32da148e-dfd0-4725-a443-c05a7793afea",familyProductKey:"xx4e3989d6-93aa-4140-a227-19da35fcd1cc",familyResourceKey:"xx8274a91e-b29c-4267-8b3a-5022a2698605",categoryProductKey:"xxdf9d160d-f6e5-4c8c-969b-8570d7b81418",categoryDetailKey:"xxf2ea9bfd-bccb-4195-90fd-7757504fdc33",productRecommendationsKey:"xxea4d2c40-26e7-4e98-9377-d8ebe3f435ea",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"stage.lifesciences.danaher.com"},window.dataLayer=[],window.dataLayer.push({user:{customerID:"",accountType:"guest",marketCode:"",company:"",role:"",city:"",state:"",country:"",postalCode:"",lastVisit:""}}),window.dataLayer.push({page:getDLPage()}),loadPage();export{imageHelper,createOptimizedS7Picture,formatDateUTCSeconds,generateUUID,scrollJumpMenuFixed,scrollPageTabFixed,makePublicUrl,setJsonLd,getFragmentFromFile,getCookie,isOTEnabled,setCookie,decorateModals,decorateMain,processEmbedFragment}; \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 78e283a99..8fc20cb2d 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2416,6 +2416,15 @@ main .section.top-border { max-width: -moz-max-content; max-width: max-content; } + + .\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper { + max-width: 80rem; + } + + .\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper { + max-width: -moz-max-content; + max-width: max-content; + } } .\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down { diff --git a/styles/tailwind.css b/styles/tailwind.css index 6422f8a97..dfa001199 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -440,6 +440,10 @@ stroke: inherit; } + .page-tabs-container { + @apply hidden md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-tabs-wrapper]:flex [&_.page-tabs-wrapper]:mx-auto; + } + .page-tabs-container.fixed ul { @apply shadow-none rounded-none; } From 89292e00638c7baf277959bc5932edf12235470e Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Mon, 13 May 2024 12:44:21 +0530 Subject: [PATCH 46/88] 1108 [SEO] Merge CSS to js for process-steps block --- blocks/side-nav/side-nav.js | 8 +--- styles/styles.css | 49 +++++++++++++++++++++++ styles/tailwind.css | 12 ++++++ templates/processstep/processstep-dev.css | 11 ----- templates/processstep/processstep.css | 27 ------------- 5 files changed, 63 insertions(+), 44 deletions(-) delete mode 100644 templates/processstep/processstep-dev.css delete mode 100644 templates/processstep/processstep.css diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index 773361e8c..b881657ac 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -36,13 +36,9 @@ export default async function decorate(block) { let selectedNavItem = null; let sideNavElements = div(); const blockParent = block?.parentElement?.parentElement; - if (blockParent?.classList.contains('default-content-wrapper')) { - blockParent?.classList.add(...'grid px-4 lg:px-0 max-w-7xl mx-auto lg:grid-cols-12'.split(' ')); - blockParent?.children[0]?.classList.add(...'hidden lg:block lg:col-span-3 lg:col-start-1 lg:row-span-6 lg:pt-4 p-0'.split(' ')); - blockParent?.children[1]?.classList.add(...'lg:col-span-8 lg:col-start-5 space-y-4 mb-2 flex-1 p-0'.split(' ')); - } else { + if (!blockParent?.classList.contains('default-content-wrapper')) { blockParent?.parentElement?.classList.add(...'grid px-4 lg:px-0 max-w-7xl mx-auto lg:grid-cols-12'.split(' ')); - blockParent?.classList.add(...'hidden lg:block lg:col-span-3 lg:col-start-1 lg:row-span-6 lg:pt-4 p-0'.split(' ')); + blockParent?.classList.add(...'hidden lg:block lg:col-span-3 lg:col-start-1 lg:row-span-6 lg:pt-4'.split(' ')); } if (block.classList.contains('topics')) { const category = getMetadata('fullcategory'); diff --git a/styles/styles.css b/styles/styles.css index ab2c28454..a6b4d5046 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1435,6 +1435,55 @@ svg symbol path { stroke: #fff; } +.processstep main .default-content-wrapper.section.side-nav-container { + margin-left: auto; + margin-right: auto; + display: grid; + max-width: 80rem; + padding-left: 1rem; + padding-right: 1rem; +} + +@media (min-width: 1024px) { + .processstep main .default-content-wrapper.section.side-nav-container { + grid-template-columns: repeat(12, minmax(0, 1fr)); + padding-left: 0px; + padding-right: 0px; + } +} + +.processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper { + display: none; +} + +@media (min-width: 1024px) { + .processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper { + grid-column: span 3 / span 3; + grid-column-start: 1; + grid-row: span 6 / span 6; + display: block; + padding-top: 1rem; + } +} + +.processstep main .default-content-wrapper.section.side-nav-container > div { + margin-bottom: 0.5rem; + flex: 1 1 0%; +} + +.processstep main .default-content-wrapper.section.side-nav-container > div > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +@media (min-width: 1024px) { + .processstep main .default-content-wrapper.section.side-nav-container > div { + grid-column: span 8 / span 8; + grid-column-start: 5; + } +} + .sr-only { position: absolute; width: 1px; diff --git a/styles/tailwind.css b/styles/tailwind.css index ac63c913b..d83cbab55 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -344,6 +344,18 @@ @apply stroke-white; } + .processstep main .default-content-wrapper.section.side-nav-container { + @apply grid px-4 lg:px-0 max-w-7xl mx-auto lg:grid-cols-12; + } + + .processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper { + @apply hidden lg:block lg:col-span-3 lg:col-start-1 lg:row-span-6 lg:pt-4; + } + + .processstep main .default-content-wrapper.section.side-nav-container > div{ + @apply lg:col-span-8 lg:col-start-5 space-y-4 mb-2 flex-1; + } + } @layer utilities { diff --git a/templates/processstep/processstep-dev.css b/templates/processstep/processstep-dev.css deleted file mode 100644 index 4e118e63d..000000000 --- a/templates/processstep/processstep-dev.css +++ /dev/null @@ -1,11 +0,0 @@ -.processstep main .default-content-wrapper.section.side-nav-container { - @apply flex flex-col lg:flex-row px-6 lg:!pl-48 lg:!pr-40 mx-auto gap-4; -} - -.processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper{ - @apply !pl-36; -} - -.processstep main .default-content-wrapper.section.side-nav-container > div{ - @apply !max-w-5xl !mr-0 !ml-0; -} \ No newline at end of file diff --git a/templates/processstep/processstep.css b/templates/processstep/processstep.css deleted file mode 100644 index abca6f333..000000000 --- a/templates/processstep/processstep.css +++ /dev/null @@ -1,27 +0,0 @@ -.processstep main .default-content-wrapper.section.side-nav-container { - margin-left: auto; - margin-right: auto; - display: flex; - flex-direction: column; - gap: 1rem; - padding-left: 1.5rem; - padding-right: 1.5rem -} - -@media (min-width: 1024px) { - .processstep main .default-content-wrapper.section.side-nav-container { - flex-direction: row; - padding-left: 12rem !important; - padding-right: 10rem !important - } -} - -.processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper { - padding-left: 9rem !important -} - -.processstep main .default-content-wrapper.section.side-nav-container > div { - margin-right: 0px !important; - margin-left: 0px !important; - max-width: 64rem !important -} \ No newline at end of file From 116066a3ae45552bb3108f44a3000dc03aa8cfa0 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Mon, 13 May 2024 15:29:17 +0530 Subject: [PATCH 47/88] Fix: mobile jump menu dropdown displayed on desktop view --- styles/styles.css | 580 +++++++++++++++++++++++++++++++++++++++++++- styles/tailwind.css | 4 +- 2 files changed, 578 insertions(+), 6 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 8fc20cb2d..59b72262b 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -507,6 +507,13 @@ h6 { font-weight: 200; } +.eyebrow-sm { + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(64 0 165 / var(--tw-text-opacity)); +} + main .default-content-wrapper h1 { font-size: 2.25rem; line-height: 2.5rem; @@ -657,6 +664,17 @@ main .default-content-wrapper h2 { } } +.bg-danaherpurple-50 { + background-color: #EADEFF; +} + +.eyebrow-sm { + color: #4000A5; + font-size: 0.875rem; + line-height: 1.25rem; + opacity: 1; +} + .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } @@ -1229,7 +1247,7 @@ header { } } -.appear > main > div.mobile-jump-menu { +.appear div.mobile-jump-menu { order: 9999; display: block; width: 100%; @@ -1242,12 +1260,12 @@ header { } @media (min-width: 768px) { - .appear > main > div.mobile-jump-menu { + .appear div.mobile-jump-menu { display: none; } } -.appear > main > div > select.selected-tab { +.appear div.mobile-jump-menu select.selected-tab { display: block; width: auto; border-radius: 0.25rem; @@ -1263,7 +1281,7 @@ header { color: rgb(13 49 114 / var(--tw-text-opacity)); } -.appear > main > div > select.selected-tab:focus { +.appear div.mobile-jump-menu select.selected-tab:focus { outline: 2px solid transparent; outline-offset: 2px; } @@ -1544,6 +1562,34 @@ svg symbol path { stroke: inherit; } +.page-tabs-container { + margin-top: -5rem; + display: none; + padding-left: 0px; + padding-right: 0px; +} + +@media (min-width: 768px) { + .page-tabs-container { + display: block; + padding-left: 1rem; + padding-right: 1rem; + } +} + +@media (min-width: 1024px) { + .page-tabs-container { + padding-left: 0px; + padding-right: 0px; + } +} + +.page-tabs-container .page-tabs-wrapper { + margin-left: auto; + margin-right: auto; + display: flex; +} + .page-tabs-container.fixed ul { border-radius: 0px; --tw-shadow: 0 0 #0000; @@ -1551,10 +1597,27 @@ svg symbol path { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.page-tabs-container li[aria-selected="false"] > a { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.page-tabs-container li[aria-selected="true"] svg { + stroke: #fff; +} + .page-tabs-container.fixed li > a { border-radius: 9999px; } +.page-tabs-container li:hover > a, + .page-tabs-container li[aria-selected="true"] > a { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .page-tabs-container.fixed li:hover > a .icon svg > use, .page-tabs-container.fixed li[aria-selected="true"] > a .icon svg > use { stroke: #fff; @@ -1609,6 +1672,10 @@ svg symbol path { top: 83px; } +.bottom-3 { + bottom: 0.75rem; +} + .z-10 { z-index: 10; } @@ -1617,6 +1684,10 @@ svg symbol path { z-index: 9999; } +.col-span-1 { + grid-column: span 1 / span 1; +} + .m-0 { margin: 0px; } @@ -1636,6 +1707,21 @@ svg symbol path { margin-bottom: auto; } +.my-10 { + margin-top: 2.5rem; + margin-bottom: 2.5rem; +} + +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.my-6 { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + .mb-2 { margin-bottom: 0.5rem; } @@ -1680,6 +1766,26 @@ svg symbol path { margin-top: -1px; } +.mb-4 { + margin-bottom: 1rem; +} + +.mt-auto { + margin-top: auto; +} + +.mb-0 { + margin-bottom: 0px; +} + +.ml-0 { + margin-left: 0px; +} + +.ml-0\.5 { + margin-left: 0.125rem; +} + .line-clamp-2 { overflow: hidden; display: -webkit-box; @@ -1687,10 +1793,42 @@ svg symbol path { -webkit-line-clamp: 2; } +.line-clamp-3 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + +.\!line-clamp-2 { + overflow: hidden !important; + display: -webkit-box !important; + -webkit-box-orient: vertical !important; + -webkit-line-clamp: 2 !important; +} + +.\!line-clamp-3 { + overflow: hidden !important; + display: -webkit-box !important; + -webkit-box-orient: vertical !important; + -webkit-line-clamp: 3 !important; +} + +.\!line-clamp-4 { + overflow: hidden !important; + display: -webkit-box !important; + -webkit-box-orient: vertical !important; + -webkit-line-clamp: 4 !important; +} + .block { display: block; } +.\!block { + display: block !important; +} + .inline { display: inline; } @@ -1739,6 +1877,47 @@ svg symbol path { height: 100%; } +.\!h-20 { + height: 5rem !important; +} + +.h-max { + height: -moz-max-content; + height: max-content; +} + +.\!h-16 { + height: 4rem !important; +} + +.\!h-24 { + height: 6rem !important; +} + +.h-16 { + height: 4rem; +} + +.h-20 { + height: 5rem; +} + +.h-52 { + height: 13rem; +} + +.h-8 { + height: 2rem; +} + +.h-\[5\.5rem\] { + height: 5.5rem; +} + +.min-h-\[13rem\] { + min-height: 13rem; +} + .w-10 { width: 2.5rem; } @@ -1763,6 +1942,18 @@ svg symbol path { width: 100%; } +.w-16 { + width: 4rem; +} + +.w-48 { + width: 12rem; +} + +.w-8 { + width: 2rem; +} + .max-w-7xl { max-width: 80rem; } @@ -1813,6 +2004,10 @@ svg symbol path { --tw-scroll-snap-strictness: mandatory; } +.list-none { + list-style-type: none; +} + .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -1825,6 +2020,10 @@ svg symbol path { flex-wrap: wrap; } +.items-start { + align-items: flex-start; +} + .items-center { align-items: center; } @@ -1849,6 +2048,14 @@ svg symbol path { gap: 1rem; } +.gap-3 { + gap: 0.75rem; +} + +.gap-6 { + gap: 1.5rem; +} + .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; @@ -1858,12 +2065,42 @@ svg symbol path { row-gap: 3rem; } +.gap-x-1 { + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} + +.gap-x-2 { + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} + +.gap-x-8 { + -moz-column-gap: 2rem; + column-gap: 2rem; +} + +.gap-y-16 { + row-gap: 4rem; +} + .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } +.divide-y > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.divide-danaherpurple-500 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-divide-opacity)); +} + .overflow-hidden { overflow: hidden; } @@ -1881,6 +2118,14 @@ svg symbol path { word-break: normal; } +.break-words { + overflow-wrap: break-word; +} + +.\!break-words { + overflow-wrap: break-word !important; +} + .rounded { border-radius: 0.25rem; } @@ -1897,11 +2142,35 @@ svg symbol path { border-radius: 0px; } +.rounded-lg { + border-radius: 0.5rem; +} + .rounded-r { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } +.rounded-b { + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} + +.rounded-l-full { + border-top-left-radius: 9999px; + border-bottom-left-radius: 9999px; +} + +.rounded-r-full { + border-top-right-radius: 9999px; + border-bottom-right-radius: 9999px; +} + +.rounded-t { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + .border { border-width: 1px; } @@ -1910,6 +2179,22 @@ svg symbol path { border-width: 2px; } +.border-b { + border-bottom-width: 1px; +} + +.border-l-\[0\.5px\] { + border-left-width: 0.5px; +} + +.border-t { + border-top-width: 1px; +} + +.border-solid { + border-style: solid; +} + .border-danaherpurple-500 { --tw-border-opacity: 1; border-color: rgb(117 35 255 / var(--tw-border-opacity)); @@ -1925,6 +2210,11 @@ svg symbol path { border-color: rgb(239 68 68 / var(--tw-border-opacity)); } +.border-black { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); +} + .bg-danaherlightblue-50 { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -1955,10 +2245,29 @@ svg symbol path { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-danahergray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + +.bg-danaherpurple-25 { + --tw-bg-opacity: 1; + background-color: rgb(245 239 255 / var(--tw-bg-opacity)); +} + +.bg-danaherpurple-50 { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + .bg-opacity-10 { --tw-bg-opacity: 0.1; } +.fill-transparent { + fill: transparent; +} + .stroke-danaherpurple-500 { stroke: #7523FF; } @@ -1967,6 +2276,19 @@ svg symbol path { stroke: #fff; } +.stroke-black { + stroke: #000; +} + +.stroke-1 { + stroke-width: 1; +} + +.\!object-contain { + -o-object-fit: contain !important; + object-fit: contain !important; +} + .object-cover { -o-object-fit: cover; object-fit: cover; @@ -1988,6 +2310,14 @@ svg symbol path { padding: 1rem; } +.p-0 { + padding: 0px; +} + +.p-1\.5 { + padding: 0.375rem; +} + .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; @@ -2028,6 +2358,51 @@ svg symbol path { padding-bottom: 10rem; } +.py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + +.px-0 { + padding-left: 0px; + padding-right: 0px; +} + +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.px-2\.5 { + padding-left: 0.625rem; + padding-right: 0.625rem; +} + +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.px-3\.5 { + padding-left: 0.875rem; + padding-right: 0.875rem; +} + +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.py-2\.5 { + padding-top: 0.625rem; + padding-bottom: 0.625rem; +} + +.py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + .pb-0 { padding-bottom: 0px; } @@ -2056,6 +2431,42 @@ svg symbol path { padding-top: 1.5rem; } +.pl-2 { + padding-left: 0.5rem; +} + +.pb-2 { + padding-bottom: 0.5rem; +} + +.pl-3 { + padding-left: 0.75rem; +} + +.pl-8 { + padding-left: 2rem; +} + +.pr-2 { + padding-right: 0.5rem; +} + +.pt-0 { + padding-top: 0px; +} + +.pt-16 { + padding-top: 4rem; +} + +.pt-2 { + padding-top: 0.5rem; +} + +.pt-5 { + padding-top: 1.25rem; +} + .text-left { text-align: left; } @@ -2097,6 +2508,26 @@ svg symbol path { line-height: 1rem; } +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.\!text-2xl { + font-size: 1.5rem !important; + line-height: 2rem !important; +} + +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + .font-bold { font-weight: 700; } @@ -2117,10 +2548,22 @@ svg symbol path { font-weight: 700; } +.font-extralight { + font-weight: 200; +} + +.\!font-normal { + font-weight: 200 !important; +} + .uppercase { text-transform: uppercase; } +.capitalize { + text-transform: capitalize; +} + .leading-5 { line-height: 1.25rem; } @@ -2129,6 +2572,10 @@ svg symbol path { line-height: 1.5rem; } +.leading-7 { + line-height: 1.75rem; +} + .tracking-tight { letter-spacing: -0.025em; } @@ -2137,6 +2584,10 @@ svg symbol path { letter-spacing: 0.025em; } +.tracking-wider { + letter-spacing: 0.05em; +} + .text-danaherblue-600 { --tw-text-opacity: 1; color: rgb(13 49 114 / var(--tw-text-opacity)); @@ -2187,6 +2638,21 @@ svg symbol path { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.text-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.text-danaherblack-500 { + --tw-text-opacity: 1; + color: rgb(51 51 51 / var(--tw-text-opacity)); +} + +.text-danahergray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2240,6 +2706,16 @@ svg symbol path { transition-duration: 150ms; } +.transition-transform { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.duration-500 { + transition-duration: 500ms; +} + main .section.top-border { margin: auto; margin-top: 2.5rem; @@ -2250,6 +2726,10 @@ main .section.top-border { border-color: rgb(0 0 0 / var(--tw-border-opacity)); } +.hover\:bg-danaherpurple-50:hover { + background-color: #EADEFF; +} + .columns.features-card-left > div > .\[\&_ul\>li\>a\]\:h-full ul>li>adiv > .card { display: flex; flex-direction: row; @@ -2269,11 +2749,42 @@ main .section.top-border { color: rgb(55 65 81 / var(--tw-text-opacity)); } +.hover\:scale-105:hover { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.hover\:scale-\[\.99\]:hover { + --tw-scale-x: .99; + --tw-scale-y: .99; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .hover\:bg-danaherpurple-800:hover { --tw-bg-opacity: 1; background-color: rgb(64 0 165 / var(--tw-bg-opacity)); } +.hover\:bg-danaherpurple-25:hover { + --tw-bg-opacity: 1; + background-color: rgb(245 239 255 / var(--tw-bg-opacity)); +} + +.hover\:bg-danaherpurple-50:hover { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + +.hover\:bg-danaherpurple-500:hover { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +.hover\:font-bold:hover { + font-weight: 700; +} + .hover\:text-danaherblue-500:hover { --tw-text-opacity: 1; color: rgb(0 74 89 / var(--tw-text-opacity)); @@ -2299,6 +2810,15 @@ main .section.top-border { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.group:hover .group-hover\:bg-danaherpurple-500 { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); +} + +.group:hover .group-hover\:stroke-white { + stroke: #fff; +} + .group:hover .group-hover\:font-semibold { font-weight: 700; } @@ -2307,6 +2827,11 @@ main .section.top-border { letter-spacing: 0.025em; } +.group:hover .group-hover\:text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + @media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -2341,6 +2866,10 @@ main .section.top-border { margin-top: 1rem; } + .md\:w-3\/4 { + width: 75%; + } + .md\:pb-10 { padding-bottom: 2.5rem; } @@ -2363,6 +2892,10 @@ main .section.top-border { margin-top: 0px; } + .lg\:block { + display: block; + } + .lg\:w-1\/3 { width: 33.333333%; } @@ -2379,6 +2912,14 @@ main .section.top-border { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .lg\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; @@ -2407,6 +2948,12 @@ main .section.top-border { } } +@media print { + .print\:hidden { + display: none; + } +} + @media (min-width: 768px) { .\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper { max-width: 80rem; @@ -2431,6 +2978,31 @@ main .section.top-border { display: none; } +.\[\&_svg\]\:stroke-danaherpurple-500 svg { + stroke: #7523FF; +} + +.\[\&_svg\]\:stroke-white svg { + stroke: #fff; +} + +.\[\&_svg\]\:stroke-1 svg { + stroke-width: 1; +} + +.\[\&_svg\]\:duration-300 svg { + transition-duration: 300ms; +} + +.group:hover .\[\&_svg\]\:group-hover\:translate-y-1 svg { + --tw-translate-y: 0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.group:hover .\[\&_svg\]\:group-hover\:stroke-white svg { + stroke: #fff; +} + .\[\&_ul\>li\>a\]\:h-40 ul>li>a { height: 10rem; } diff --git a/styles/tailwind.css b/styles/tailwind.css index dfa001199..f954746c9 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -276,11 +276,11 @@ } } - .appear > main > div.mobile-jump-menu { + .appear div.mobile-jump-menu { @apply block w-full px-4 py-2 bg-white md:hidden order-last; } - .appear > main > div > select.selected-tab { + .appear div.mobile-jump-menu select.selected-tab { @apply block w-auto py-2 pl-4 text-base border border-gray-300 rounded text-danaherblue-600 focus:outline-none; } From a0f0235220af1e45fac56ea31b40b56d858188a5 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Mon, 13 May 2024 15:52:41 +0530 Subject: [PATCH 48/88] removed mapping of process-steps-dev and page-tabs-dev CSS --- build-css.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/build-css.js b/build-css.js index d1f6f64a9..5be56eeac 100644 --- a/build-css.js +++ b/build-css.js @@ -6,10 +6,6 @@ const fileMappings = [ input: './styles/tailwind.css', output: './styles/styles.css', }, - { - input: './blocks/page-tabs/page-tabs-dev.css', - output: './blocks/page-tabs/page-tabs.css', - }, { input: './styles/coveo-atomic.css', output: './blocks/product-resources/product-resources.css', @@ -18,10 +14,6 @@ const fileMappings = [ input: './styles/coveo-atomic.css', output: './blocks/product-children/product-children.css', }, - { - input: './templates/processStep/processStep-dev.css', - output: './templates/processStep/processStep.css', - }, { input: './templates/application/application-dev.css', output: './templates/application/application.css', From f84a058d3f198c578a4b38ada59597fb6af2bd91 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Mon, 13 May 2024 18:11:31 +0530 Subject: [PATCH 49/88] updated/build style.css --- styles/styles.css | 572 ---------------------------------------------- 1 file changed, 572 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 59b72262b..7a0e362f1 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -507,13 +507,6 @@ h6 { font-weight: 200; } -.eyebrow-sm { - font-size: 0.875rem; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(64 0 165 / var(--tw-text-opacity)); -} - main .default-content-wrapper h1 { font-size: 2.25rem; line-height: 2.5rem; @@ -664,17 +657,6 @@ main .default-content-wrapper h2 { } } -.bg-danaherpurple-50 { - background-color: #EADEFF; -} - -.eyebrow-sm { - color: #4000A5; - font-size: 0.875rem; - line-height: 1.25rem; - opacity: 1; -} - .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } @@ -1562,34 +1544,6 @@ svg symbol path { stroke: inherit; } -.page-tabs-container { - margin-top: -5rem; - display: none; - padding-left: 0px; - padding-right: 0px; -} - -@media (min-width: 768px) { - .page-tabs-container { - display: block; - padding-left: 1rem; - padding-right: 1rem; - } -} - -@media (min-width: 1024px) { - .page-tabs-container { - padding-left: 0px; - padding-right: 0px; - } -} - -.page-tabs-container .page-tabs-wrapper { - margin-left: auto; - margin-right: auto; - display: flex; -} - .page-tabs-container.fixed ul { border-radius: 0px; --tw-shadow: 0 0 #0000; @@ -1597,27 +1551,10 @@ svg symbol path { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.page-tabs-container li[aria-selected="false"] > a { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.page-tabs-container li[aria-selected="true"] svg { - stroke: #fff; -} - .page-tabs-container.fixed li > a { border-radius: 9999px; } -.page-tabs-container li:hover > a, - .page-tabs-container li[aria-selected="true"] > a { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - .page-tabs-container.fixed li:hover > a .icon svg > use, .page-tabs-container.fixed li[aria-selected="true"] > a .icon svg > use { stroke: #fff; @@ -1672,10 +1609,6 @@ svg symbol path { top: 83px; } -.bottom-3 { - bottom: 0.75rem; -} - .z-10 { z-index: 10; } @@ -1684,10 +1617,6 @@ svg symbol path { z-index: 9999; } -.col-span-1 { - grid-column: span 1 / span 1; -} - .m-0 { margin: 0px; } @@ -1707,21 +1636,6 @@ svg symbol path { margin-bottom: auto; } -.my-10 { - margin-top: 2.5rem; - margin-bottom: 2.5rem; -} - -.my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - -.my-6 { - margin-top: 1.5rem; - margin-bottom: 1.5rem; -} - .mb-2 { margin-bottom: 0.5rem; } @@ -1766,26 +1680,6 @@ svg symbol path { margin-top: -1px; } -.mb-4 { - margin-bottom: 1rem; -} - -.mt-auto { - margin-top: auto; -} - -.mb-0 { - margin-bottom: 0px; -} - -.ml-0 { - margin-left: 0px; -} - -.ml-0\.5 { - margin-left: 0.125rem; -} - .line-clamp-2 { overflow: hidden; display: -webkit-box; @@ -1793,42 +1687,10 @@ svg symbol path { -webkit-line-clamp: 2; } -.line-clamp-3 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; -} - -.\!line-clamp-2 { - overflow: hidden !important; - display: -webkit-box !important; - -webkit-box-orient: vertical !important; - -webkit-line-clamp: 2 !important; -} - -.\!line-clamp-3 { - overflow: hidden !important; - display: -webkit-box !important; - -webkit-box-orient: vertical !important; - -webkit-line-clamp: 3 !important; -} - -.\!line-clamp-4 { - overflow: hidden !important; - display: -webkit-box !important; - -webkit-box-orient: vertical !important; - -webkit-line-clamp: 4 !important; -} - .block { display: block; } -.\!block { - display: block !important; -} - .inline { display: inline; } @@ -1877,47 +1739,6 @@ svg symbol path { height: 100%; } -.\!h-20 { - height: 5rem !important; -} - -.h-max { - height: -moz-max-content; - height: max-content; -} - -.\!h-16 { - height: 4rem !important; -} - -.\!h-24 { - height: 6rem !important; -} - -.h-16 { - height: 4rem; -} - -.h-20 { - height: 5rem; -} - -.h-52 { - height: 13rem; -} - -.h-8 { - height: 2rem; -} - -.h-\[5\.5rem\] { - height: 5.5rem; -} - -.min-h-\[13rem\] { - min-height: 13rem; -} - .w-10 { width: 2.5rem; } @@ -1942,18 +1763,6 @@ svg symbol path { width: 100%; } -.w-16 { - width: 4rem; -} - -.w-48 { - width: 12rem; -} - -.w-8 { - width: 2rem; -} - .max-w-7xl { max-width: 80rem; } @@ -2004,10 +1813,6 @@ svg symbol path { --tw-scroll-snap-strictness: mandatory; } -.list-none { - list-style-type: none; -} - .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -2020,10 +1825,6 @@ svg symbol path { flex-wrap: wrap; } -.items-start { - align-items: flex-start; -} - .items-center { align-items: center; } @@ -2048,14 +1849,6 @@ svg symbol path { gap: 1rem; } -.gap-3 { - gap: 0.75rem; -} - -.gap-6 { - gap: 1.5rem; -} - .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; @@ -2065,42 +1858,12 @@ svg symbol path { row-gap: 3rem; } -.gap-x-1 { - -moz-column-gap: 0.25rem; - column-gap: 0.25rem; -} - -.gap-x-2 { - -moz-column-gap: 0.5rem; - column-gap: 0.5rem; -} - -.gap-x-8 { - -moz-column-gap: 2rem; - column-gap: 2rem; -} - -.gap-y-16 { - row-gap: 4rem; -} - .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } -.divide-y > :not([hidden]) ~ :not([hidden]) { - --tw-divide-y-reverse: 0; - border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); -} - -.divide-danaherpurple-500 > :not([hidden]) ~ :not([hidden]) { - --tw-divide-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-divide-opacity)); -} - .overflow-hidden { overflow: hidden; } @@ -2118,14 +1881,6 @@ svg symbol path { word-break: normal; } -.break-words { - overflow-wrap: break-word; -} - -.\!break-words { - overflow-wrap: break-word !important; -} - .rounded { border-radius: 0.25rem; } @@ -2142,35 +1897,11 @@ svg symbol path { border-radius: 0px; } -.rounded-lg { - border-radius: 0.5rem; -} - .rounded-r { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } -.rounded-b { - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; -} - -.rounded-l-full { - border-top-left-radius: 9999px; - border-bottom-left-radius: 9999px; -} - -.rounded-r-full { - border-top-right-radius: 9999px; - border-bottom-right-radius: 9999px; -} - -.rounded-t { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; -} - .border { border-width: 1px; } @@ -2179,22 +1910,6 @@ svg symbol path { border-width: 2px; } -.border-b { - border-bottom-width: 1px; -} - -.border-l-\[0\.5px\] { - border-left-width: 0.5px; -} - -.border-t { - border-top-width: 1px; -} - -.border-solid { - border-style: solid; -} - .border-danaherpurple-500 { --tw-border-opacity: 1; border-color: rgb(117 35 255 / var(--tw-border-opacity)); @@ -2210,11 +1925,6 @@ svg symbol path { border-color: rgb(239 68 68 / var(--tw-border-opacity)); } -.border-black { - --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); -} - .bg-danaherlightblue-50 { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -2245,29 +1955,10 @@ svg symbol path { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-danahergray-900 { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); -} - -.bg-danaherpurple-25 { - --tw-bg-opacity: 1; - background-color: rgb(245 239 255 / var(--tw-bg-opacity)); -} - -.bg-danaherpurple-50 { - --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); -} - .bg-opacity-10 { --tw-bg-opacity: 0.1; } -.fill-transparent { - fill: transparent; -} - .stroke-danaherpurple-500 { stroke: #7523FF; } @@ -2276,19 +1967,6 @@ svg symbol path { stroke: #fff; } -.stroke-black { - stroke: #000; -} - -.stroke-1 { - stroke-width: 1; -} - -.\!object-contain { - -o-object-fit: contain !important; - object-fit: contain !important; -} - .object-cover { -o-object-fit: cover; object-fit: cover; @@ -2310,14 +1988,6 @@ svg symbol path { padding: 1rem; } -.p-0 { - padding: 0px; -} - -.p-1\.5 { - padding: 0.375rem; -} - .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; @@ -2358,51 +2028,6 @@ svg symbol path { padding-bottom: 10rem; } -.py-5 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; -} - -.px-0 { - padding-left: 0px; - padding-right: 0px; -} - -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.px-2\.5 { - padding-left: 0.625rem; - padding-right: 0.625rem; -} - -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.px-3\.5 { - padding-left: 0.875rem; - padding-right: 0.875rem; -} - -.px-5 { - padding-left: 1.25rem; - padding-right: 1.25rem; -} - -.py-2\.5 { - padding-top: 0.625rem; - padding-bottom: 0.625rem; -} - -.py-6 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} - .pb-0 { padding-bottom: 0px; } @@ -2431,42 +2056,6 @@ svg symbol path { padding-top: 1.5rem; } -.pl-2 { - padding-left: 0.5rem; -} - -.pb-2 { - padding-bottom: 0.5rem; -} - -.pl-3 { - padding-left: 0.75rem; -} - -.pl-8 { - padding-left: 2rem; -} - -.pr-2 { - padding-right: 0.5rem; -} - -.pt-0 { - padding-top: 0px; -} - -.pt-16 { - padding-top: 4rem; -} - -.pt-2 { - padding-top: 0.5rem; -} - -.pt-5 { - padding-top: 1.25rem; -} - .text-left { text-align: left; } @@ -2508,26 +2097,6 @@ svg symbol path { line-height: 1rem; } -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - -.\!text-2xl { - font-size: 1.5rem !important; - line-height: 2rem !important; -} - -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - .font-bold { font-weight: 700; } @@ -2548,22 +2117,10 @@ svg symbol path { font-weight: 700; } -.font-extralight { - font-weight: 200; -} - -.\!font-normal { - font-weight: 200 !important; -} - .uppercase { text-transform: uppercase; } -.capitalize { - text-transform: capitalize; -} - .leading-5 { line-height: 1.25rem; } @@ -2572,10 +2129,6 @@ svg symbol path { line-height: 1.5rem; } -.leading-7 { - line-height: 1.75rem; -} - .tracking-tight { letter-spacing: -0.025em; } @@ -2584,10 +2137,6 @@ svg symbol path { letter-spacing: 0.025em; } -.tracking-wider { - letter-spacing: 0.05em; -} - .text-danaherblue-600 { --tw-text-opacity: 1; color: rgb(13 49 114 / var(--tw-text-opacity)); @@ -2638,21 +2187,6 @@ svg symbol path { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-black { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); -} - -.text-danaherblack-500 { - --tw-text-opacity: 1; - color: rgb(51 51 51 / var(--tw-text-opacity)); -} - -.text-danahergray-900 { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2706,16 +2240,6 @@ svg symbol path { transition-duration: 150ms; } -.transition-transform { - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.duration-500 { - transition-duration: 500ms; -} - main .section.top-border { margin: auto; margin-top: 2.5rem; @@ -2726,10 +2250,6 @@ main .section.top-border { border-color: rgb(0 0 0 / var(--tw-border-opacity)); } -.hover\:bg-danaherpurple-50:hover { - background-color: #EADEFF; -} - .columns.features-card-left > div > .\[\&_ul\>li\>a\]\:h-full ul>li>adiv > .card { display: flex; flex-direction: row; @@ -2749,42 +2269,11 @@ main .section.top-border { color: rgb(55 65 81 / var(--tw-text-opacity)); } -.hover\:scale-105:hover { - --tw-scale-x: 1.05; - --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:scale-\[\.99\]:hover { - --tw-scale-x: .99; - --tw-scale-y: .99; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .hover\:bg-danaherpurple-800:hover { --tw-bg-opacity: 1; background-color: rgb(64 0 165 / var(--tw-bg-opacity)); } -.hover\:bg-danaherpurple-25:hover { - --tw-bg-opacity: 1; - background-color: rgb(245 239 255 / var(--tw-bg-opacity)); -} - -.hover\:bg-danaherpurple-50:hover { - --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); -} - -.hover\:bg-danaherpurple-500:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); -} - -.hover\:font-bold:hover { - font-weight: 700; -} - .hover\:text-danaherblue-500:hover { --tw-text-opacity: 1; color: rgb(0 74 89 / var(--tw-text-opacity)); @@ -2810,15 +2299,6 @@ main .section.top-border { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.group:hover .group-hover\:bg-danaherpurple-500 { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); -} - -.group:hover .group-hover\:stroke-white { - stroke: #fff; -} - .group:hover .group-hover\:font-semibold { font-weight: 700; } @@ -2827,11 +2307,6 @@ main .section.top-border { letter-spacing: 0.025em; } -.group:hover .group-hover\:text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - @media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -2866,10 +2341,6 @@ main .section.top-border { margin-top: 1rem; } - .md\:w-3\/4 { - width: 75%; - } - .md\:pb-10 { padding-bottom: 2.5rem; } @@ -2892,10 +2363,6 @@ main .section.top-border { margin-top: 0px; } - .lg\:block { - display: block; - } - .lg\:w-1\/3 { width: 33.333333%; } @@ -2912,14 +2379,6 @@ main .section.top-border { grid-template-columns: repeat(7, minmax(0, 1fr)); } - .lg\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .lg\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; @@ -2948,12 +2407,6 @@ main .section.top-border { } } -@media print { - .print\:hidden { - display: none; - } -} - @media (min-width: 768px) { .\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper { max-width: 80rem; @@ -2978,31 +2431,6 @@ main .section.top-border { display: none; } -.\[\&_svg\]\:stroke-danaherpurple-500 svg { - stroke: #7523FF; -} - -.\[\&_svg\]\:stroke-white svg { - stroke: #fff; -} - -.\[\&_svg\]\:stroke-1 svg { - stroke-width: 1; -} - -.\[\&_svg\]\:duration-300 svg { - transition-duration: 300ms; -} - -.group:hover .\[\&_svg\]\:group-hover\:translate-y-1 svg { - --tw-translate-y: 0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .\[\&_svg\]\:group-hover\:stroke-white svg { - stroke: #fff; -} - .\[\&_ul\>li\>a\]\:h-40 ul>li>a { height: 10rem; } From cda08d7848c1dbe84d1683bcabd282ac982c200d Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Mon, 13 May 2024 18:25:15 +0530 Subject: [PATCH 50/88] updated style css --- styles/styles.css | 180 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 180 insertions(+) diff --git a/styles/styles.css b/styles/styles.css index 7a0e362f1..b8df12dce 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -657,6 +657,27 @@ main .default-content-wrapper h2 { } } +.bg-danaherpurple-50 { + background-color: #EADEFF; +} + +.btn-group { + display: inline-flex; + position: relative; +} + +.btn-outline-trending-brand { + color: #7523FF; + background-color: rgb(255 255 255); + border-color: #7523FF; + border-width: 2px; +} + +.btn-outline-trending-brand:hover { + color: rgb(255 255 255); + background-color: #7523FF; +} + .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } @@ -799,6 +820,11 @@ main .section.carousel-container { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.btn-group { + position: relative; + display: inline-flex; +} + /* START OF CORE STYLES */ .btn-primary-purple { @@ -851,6 +877,23 @@ main .section.carousel-container { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.btn-outline-trending-brand { + border-width: 2px; + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.btn-outline-trending-brand:hover { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .container-two-col .col-right { font-size: 1rem; line-height: 1.75rem; @@ -1560,6 +1603,18 @@ svg symbol path { stroke: #fff; } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + .pointer-events-none { pointer-events: none; } @@ -1572,6 +1627,10 @@ svg symbol path { visibility: visible; } +.collapse { + visibility: collapse; +} + .static { position: static; } @@ -1580,6 +1639,10 @@ svg symbol path { position: fixed; } +.absolute { + position: absolute; +} + .relative { position: relative; } @@ -1609,6 +1672,10 @@ svg symbol path { top: 83px; } +.bottom-3 { + bottom: 0.75rem; +} + .z-10 { z-index: 10; } @@ -1739,6 +1806,15 @@ svg symbol path { height: 100%; } +.h-5 { + height: 1.25rem; +} + +.h-max { + height: -moz-max-content; + height: max-content; +} + .w-10 { width: 2.5rem; } @@ -1763,6 +1839,10 @@ svg symbol path { width: 100%; } +.w-5 { + width: 1.25rem; +} + .max-w-7xl { max-width: 80rem; } @@ -1783,6 +1863,10 @@ svg symbol path { flex-shrink: 0; } +.border-collapse { + border-collapse: collapse; +} + .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @@ -1858,12 +1942,42 @@ svg symbol path { row-gap: 3rem; } +.gap-x-1 { + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} + +.gap-x-16 { + -moz-column-gap: 4rem; + column-gap: 4rem; +} + +.gap-x-2 { + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} + +.gap-y-8 { + row-gap: 2rem; +} + .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } +.divide-y > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.divide-danaherpurple-500 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-divide-opacity)); +} + .overflow-hidden { overflow: hidden; } @@ -1902,6 +2016,16 @@ svg symbol path { border-bottom-right-radius: 0.25rem; } +.rounded-l-full { + border-top-left-radius: 9999px; + border-bottom-left-radius: 9999px; +} + +.rounded-r-full { + border-top-right-radius: 9999px; + border-bottom-right-radius: 9999px; +} + .border { border-width: 1px; } @@ -1955,10 +2079,24 @@ svg symbol path { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-danahergray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + +.bg-danaherpurple-50 { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)); +} + .bg-opacity-10 { --tw-bg-opacity: 0.1; } +.fill-transparent { + fill: transparent; +} + .stroke-danaherpurple-500 { stroke: #7523FF; } @@ -2028,6 +2166,36 @@ svg symbol path { padding-bottom: 10rem; } +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.px-9 { + padding-left: 2.25rem; + padding-right: 2.25rem; +} + +.py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.py-8 { + padding-top: 2rem; + padding-bottom: 2rem; +} + .pb-0 { padding-bottom: 0px; } @@ -2060,6 +2228,10 @@ svg symbol path { text-align: left; } +.align-top { + vertical-align: top; +} + .align-middle { vertical-align: middle; } @@ -2187,6 +2359,10 @@ svg symbol path { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.underline { + text-decoration-line: underline; +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2217,6 +2393,10 @@ svg symbol path { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.outline { + outline-style: solid; +} + .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); From 169ce1569bb958bdb0bd0a881fb53728ce771f35 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Mon, 13 May 2024 18:32:01 +0530 Subject: [PATCH 51/88] updated styles --- styles/styles.css | 180 ---------------------------------------------- 1 file changed, 180 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index b8df12dce..7a0e362f1 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -657,27 +657,6 @@ main .default-content-wrapper h2 { } } -.bg-danaherpurple-50 { - background-color: #EADEFF; -} - -.btn-group { - display: inline-flex; - position: relative; -} - -.btn-outline-trending-brand { - color: #7523FF; - background-color: rgb(255 255 255); - border-color: #7523FF; - border-width: 2px; -} - -.btn-outline-trending-brand:hover { - color: rgb(255 255 255); - background-color: #7523FF; -} - .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } @@ -820,11 +799,6 @@ main .section.carousel-container { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.btn-group { - position: relative; - display: inline-flex; -} - /* START OF CORE STYLES */ .btn-primary-purple { @@ -877,23 +851,6 @@ main .section.carousel-container { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.btn-outline-trending-brand { - border-width: 2px; - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); -} - -.btn-outline-trending-brand:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - .container-two-col .col-right { font-size: 1rem; line-height: 1.75rem; @@ -1603,18 +1560,6 @@ svg symbol path { stroke: #fff; } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - .pointer-events-none { pointer-events: none; } @@ -1627,10 +1572,6 @@ svg symbol path { visibility: visible; } -.collapse { - visibility: collapse; -} - .static { position: static; } @@ -1639,10 +1580,6 @@ svg symbol path { position: fixed; } -.absolute { - position: absolute; -} - .relative { position: relative; } @@ -1672,10 +1609,6 @@ svg symbol path { top: 83px; } -.bottom-3 { - bottom: 0.75rem; -} - .z-10 { z-index: 10; } @@ -1806,15 +1739,6 @@ svg symbol path { height: 100%; } -.h-5 { - height: 1.25rem; -} - -.h-max { - height: -moz-max-content; - height: max-content; -} - .w-10 { width: 2.5rem; } @@ -1839,10 +1763,6 @@ svg symbol path { width: 100%; } -.w-5 { - width: 1.25rem; -} - .max-w-7xl { max-width: 80rem; } @@ -1863,10 +1783,6 @@ svg symbol path { flex-shrink: 0; } -.border-collapse { - border-collapse: collapse; -} - .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @@ -1942,42 +1858,12 @@ svg symbol path { row-gap: 3rem; } -.gap-x-1 { - -moz-column-gap: 0.25rem; - column-gap: 0.25rem; -} - -.gap-x-16 { - -moz-column-gap: 4rem; - column-gap: 4rem; -} - -.gap-x-2 { - -moz-column-gap: 0.5rem; - column-gap: 0.5rem; -} - -.gap-y-8 { - row-gap: 2rem; -} - .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } -.divide-y > :not([hidden]) ~ :not([hidden]) { - --tw-divide-y-reverse: 0; - border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); -} - -.divide-danaherpurple-500 > :not([hidden]) ~ :not([hidden]) { - --tw-divide-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-divide-opacity)); -} - .overflow-hidden { overflow: hidden; } @@ -2016,16 +1902,6 @@ svg symbol path { border-bottom-right-radius: 0.25rem; } -.rounded-l-full { - border-top-left-radius: 9999px; - border-bottom-left-radius: 9999px; -} - -.rounded-r-full { - border-top-right-radius: 9999px; - border-bottom-right-radius: 9999px; -} - .border { border-width: 1px; } @@ -2079,24 +1955,10 @@ svg symbol path { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-danahergray-900 { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); -} - -.bg-danaherpurple-50 { - --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); -} - .bg-opacity-10 { --tw-bg-opacity: 0.1; } -.fill-transparent { - fill: transparent; -} - .stroke-danaherpurple-500 { stroke: #7523FF; } @@ -2166,36 +2028,6 @@ svg symbol path { padding-bottom: 10rem; } -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.px-5 { - padding-left: 1.25rem; - padding-right: 1.25rem; -} - -.px-9 { - padding-left: 2.25rem; - padding-right: 2.25rem; -} - -.py-6 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} - -.py-8 { - padding-top: 2rem; - padding-bottom: 2rem; -} - .pb-0 { padding-bottom: 0px; } @@ -2228,10 +2060,6 @@ svg symbol path { text-align: left; } -.align-top { - vertical-align: top; -} - .align-middle { vertical-align: middle; } @@ -2359,10 +2187,6 @@ svg symbol path { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.underline { - text-decoration-line: underline; -} - .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2393,10 +2217,6 @@ svg symbol path { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.outline { - outline-style: solid; -} - .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); From 4df13dc393343bf1f7dc7b380700ee1e3d48552d Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Tue, 14 May 2024 10:49:56 +0530 Subject: [PATCH 52/88] side-nav with topic pages CSS changes --- blocks/side-nav/side-nav.js | 12 ---- styles/styles.css | 117 +++++++++++++++++++++++++++++------- styles/tailwind.css | 22 +++++-- 3 files changed, 112 insertions(+), 39 deletions(-) diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index b881657ac..454f86d9c 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -35,11 +35,6 @@ export default async function decorate(block) { let sideNavTitle = 'Side Navigation'; let selectedNavItem = null; let sideNavElements = div(); - const blockParent = block?.parentElement?.parentElement; - if (!blockParent?.classList.contains('default-content-wrapper')) { - blockParent?.parentElement?.classList.add(...'grid px-4 lg:px-0 max-w-7xl mx-auto lg:grid-cols-12'.split(' ')); - blockParent?.classList.add(...'hidden lg:block lg:col-span-3 lg:col-start-1 lg:row-span-6 lg:pt-4'.split(' ')); - } if (block.classList.contains('topics')) { const category = getMetadata('fullcategory'); sideNavItems = await fetchTopicsForCategory(category); @@ -65,14 +60,7 @@ export default async function decorate(block) { selectedNavItem = sideNavElements.querySelector(`.side-nav-item a[href="${window.location.pathname}"]`)?.closest('.side-nav-item'); if (selectedNavItem) selectedNavItem.classList.add(...'font-bold bg-danaherpurple-50 hover:bg-danaherpurple-50'.split(' ')); const navHeadingDiv = div({ class: 'text-lg' }, strong(sideNavTitle)); - if (blockParent?.classList.contains('default-content-wrapper')) { - navHeadingDiv.classList.add('pt-0'); - } else { - navHeadingDiv.classList.add('pt-16'); - } block.append(navHeadingDiv, sideNavElements); block.classList.add(...'pt-6 p-2'.split(' ')); - const topicsHub = blockParent?.parentElement?.querySelector(':scope > div:nth-child(2)'); - topicsHub?.classList.add(...'lg:col-span-8 lg:col-start-5 space-y-4 mb-2 flex-1 p-0'.split(' ')); return block; } diff --git a/styles/styles.css b/styles/styles.css index a6b4d5046..46a76cac0 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -495,6 +495,14 @@ h4 { line-height: 1.75rem; } +.topichub main .side-nav-wrapper > div.products > divh5 { + padding-top: 5rem; +} + +.topic main .side-nav-wrapper > div.topics > divh5 { + padding-top: 6rem; +} + h5 { font-size: 1.125rem; font-weight: 200; @@ -507,6 +515,14 @@ h6 { font-weight: 200; } +.topichub main .side-nav-wrapper > div.products > div.eyebrow { + padding-top: 5rem; +} + +.topic main .side-nav-wrapper > div.topics > div.eyebrow { + padding-top: 6rem; +} + .eyebrow { font-size: 1.125rem; line-height: 1.75rem; @@ -830,6 +846,14 @@ main .section.carousel-container { line-height: 1.25rem; } +.topichub main .side-nav-wrapper > div.products > div.btn-lg { + padding-top: 5rem; +} + +.topic main .side-nav-wrapper > div.topics > div.btn-lg { + padding-top: 6rem; +} + .btn-lg { padding-top: 0.625rem; padding-bottom: 0.625rem; @@ -991,6 +1015,14 @@ main .default-content-wrapper p { color: rgb(55 65 81 / var(--tw-text-opacity)); } +.topichub main .side-nav-wrapper > div.products > divmain .default-content-wrapper p.button-container>a { + padding-top: 5rem; +} + +.topic main .side-nav-wrapper > div.topics > divmain .default-content-wrapper p.button-container>a { + padding-top: 6rem; +} + main .default-content-wrapper p.button-container>a { margin-top: 1.5rem; border-radius: 9999px; @@ -1222,6 +1254,14 @@ header { } } +.topichub main .side-nav-wrapper > div.products > div.columns:not(.columns-2-cols) > div div > p:not(.button-container) { + padding-top: 5rem; +} + +.topic main .side-nav-wrapper > div.topics > div.columns:not(.columns-2-cols) > div div > p:not(.button-container) { + padding-top: 6rem; +} + .columns:not(.columns-2-cols) > div div > p:not(.button-container) { display: block; font-size: 1.125rem; @@ -1297,6 +1337,14 @@ main .top-border > div.columns-wrapper:first-child { color: rgb(209 213 219 / var(--tw-text-opacity)); } +.topichub main .side-nav-wrapper > div.products > div.productdetail main .columns p > strong { + padding-top: 5rem; +} + +.topic main .side-nav-wrapper > div.topics > div.productdetail main .columns p > strong { + padding-top: 6rem; +} + .productdetail main .columns p > strong { font-size: 1.125rem !important; font-weight: 500 !important; @@ -1435,7 +1483,9 @@ svg symbol path { stroke: #fff; } -.processstep main .default-content-wrapper.section.side-nav-container { +.processstep main .default-content-wrapper.section.side-nav-container, + .topic main, + .topichub main { margin-left: auto; margin-right: auto; display: grid; @@ -1445,19 +1495,26 @@ svg symbol path { } @media (min-width: 1024px) { - .processstep main .default-content-wrapper.section.side-nav-container { + .processstep main .default-content-wrapper.section.side-nav-container, + .topic main, + .topichub main { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-left: 0px; padding-right: 0px; } } -.processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper { +.processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper, + .topic main .side-nav-container, + .topichub main .side-nav-container { display: none; + padding: 0px; } @media (min-width: 1024px) { - .processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper { + .processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper, + .topic main .side-nav-container, + .topichub main .side-nav-container { grid-column: span 3 / span 3; grid-column-start: 1; grid-row: span 6 / span 6; @@ -1466,24 +1523,46 @@ svg symbol path { } } -.processstep main .default-content-wrapper.section.side-nav-container > div { +.processstep main .default-content-wrapper.section.side-nav-container > div, + .topic main div:nth-child(2), + .topichub main .section.topic-list-container { margin-bottom: 0.5rem; flex: 1 1 0%; } -.processstep main .default-content-wrapper.section.side-nav-container > div > :not([hidden]) ~ :not([hidden]) { +.processstep main .default-content-wrapper.section.side-nav-container > div > :not([hidden]) ~ :not([hidden]), + .topic main div:nth-child(2) > :not([hidden]) ~ :not([hidden]), + .topichub main .section.topic-list-container > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } @media (min-width: 1024px) { - .processstep main .default-content-wrapper.section.side-nav-container > div { + .processstep main .default-content-wrapper.section.side-nav-container > div, + .topic main div:nth-child(2), + .topichub main .section.topic-list-container { grid-column: span 8 / span 8; grid-column-start: 5; } } +.topichub main .side-nav-wrapper > div.products > div.text-lg { + padding-top: 5rem; +} + +.topichub main .side-nav-wrapper > div.products > div.\!text-lg { + padding-top: 5rem; +} + +.topic main .side-nav-wrapper > div.topics > div.text-lg { + padding-top: 6rem; +} + +.topic main .side-nav-wrapper > div.topics > div.\!text-lg { + padding-top: 6rem; +} + .sr-only { position: absolute; width: 1px; @@ -3360,10 +3439,6 @@ svg symbol path { padding-top: 3rem; } -.pt-16 { - padding-top: 4rem; -} - .pt-2 { padding-top: 0.5rem; } @@ -3876,6 +3951,14 @@ main .section.top-border { } @media (min-width: 768px) { + .topichub main .side-nav-wrapper > div.products > div.md\:btn-lg { + padding-top: 5rem; + } + + .topic main .side-nav-wrapper > div.topics > div.md\:btn-lg { + padding-top: 6rem; + } + .md\:btn-lg { padding-top: 0.625rem; padding-bottom: 0.625rem; @@ -4600,18 +4683,10 @@ main .section.top-border { grid-column: span 8 / span 8; } - .lg\:col-start-1 { - grid-column-start: 1; - } - .lg\:col-start-5 { grid-column-start: 5; } - .lg\:row-span-6 { - grid-row: span 6 / span 6; - } - .lg\:m-auto { margin: auto; } @@ -4709,10 +4784,6 @@ main .section.top-border { grid-auto-columns: calc((100% / 3) - 20px); } - .lg\:grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } diff --git a/styles/tailwind.css b/styles/tailwind.css index d83cbab55..74b712ef0 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -344,17 +344,31 @@ @apply stroke-white; } - .processstep main .default-content-wrapper.section.side-nav-container { + .processstep main .default-content-wrapper.section.side-nav-container, + .topic main, + .topichub main { @apply grid px-4 lg:px-0 max-w-7xl mx-auto lg:grid-cols-12; } - .processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper { - @apply hidden lg:block lg:col-span-3 lg:col-start-1 lg:row-span-6 lg:pt-4; + .processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper, + .topic main .side-nav-container, + .topichub main .side-nav-container { + @apply hidden lg:block lg:col-span-3 lg:col-start-1 lg:row-span-6 lg:pt-4 p-0; } - .processstep main .default-content-wrapper.section.side-nav-container > div{ + .processstep main .default-content-wrapper.section.side-nav-container > div, + .topic main div:nth-child(2), + .topichub main .section.topic-list-container { @apply lg:col-span-8 lg:col-start-5 space-y-4 mb-2 flex-1; } + + .topichub main .side-nav-wrapper > div.products > div.text-lg { + @apply pt-20; + } + + .topic main .side-nav-wrapper > div.topics > div.text-lg { + @apply pt-24; + } } From 158e9c531235e88b6449bf3c627c5a570585bbca Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 14 May 2024 12:37:34 +0530 Subject: [PATCH 53/88] Updated side nav --- blocks/side-nav/side-nav.css | 4 +- blocks/side-nav/side-nav.js | 3 +- styles/styles.css | 749 +++++++++++++++-------------------- styles/tailwind.css | 9 - 4 files changed, 318 insertions(+), 447 deletions(-) diff --git a/blocks/side-nav/side-nav.css b/blocks/side-nav/side-nav.css index fa1faf8ff..ebefdb0ca 100644 --- a/blocks/side-nav/side-nav.css +++ b/blocks/side-nav/side-nav.css @@ -599,8 +599,8 @@ video { padding-bottom: 1rem; } -.side-nav-wrapper :is(.pt-16) { - padding-top: 4rem; +.side-nav-wrapper :is(.pt-20) { + padding-top: 5rem; } .side-nav-wrapper :is(.pt-6) { diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index 9d0360786..d3f2d3a52 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -63,9 +63,8 @@ export default async function decorate(block) { sideNavElements = renderSideNav(sideNavItems); selectedNavItem = sideNavElements.querySelector(`.side-nav-item a[href="${window.location.pathname}"]`)?.closest('.side-nav-item'); if (selectedNavItem) selectedNavItem.classList.add(...'font-bold bg-danaherpurple-50 hover:bg-danaherpurple-50'.split(' ')); - const navHeadingDiv = div({ class: 'text-lg' }, strong(sideNavTitle)); + const navHeadingDiv = div({ class: 'text-lg pt-20' }, strong(sideNavTitle)); block.append(navHeadingDiv, sideNavElements); - block.append(div({ class: 'text-lg pt-16' }, strong(sideNavTitle)), sideNavElements); block.classList.add(...'pt-6 p-2'.split(' ')); return block; } diff --git a/styles/styles.css b/styles/styles.css index 72110c26f..68681aead 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -495,14 +495,6 @@ h4 { line-height: 1.75rem; } -.topichub main .side-nav-wrapper > div.products > divh5 { - padding-top: 5rem; -} - -.topic main .side-nav-wrapper > div.topics > divh5 { - padding-top: 6rem; -} - h5 { font-size: 1.125rem; font-weight: 200; @@ -515,28 +507,6 @@ h6 { font-weight: 200; } -.topichub main .side-nav-wrapper > div.products > div.eyebrow { - padding-top: 5rem; -} - -.topic main .side-nav-wrapper > div.topics > div.eyebrow { - padding-top: 6rem; -} - -.eyebrow { - font-size: 1.125rem; - line-height: 1.75rem; - --tw-text-opacity: 1; - color: rgb(64 0 165 / var(--tw-text-opacity)); -} - -.eyebrow-sm { - font-size: 0.875rem; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(64 0 165 / var(--tw-text-opacity)); -} - main .default-content-wrapper h1 { font-size: 2.25rem; line-height: 2.5rem; @@ -806,28 +776,6 @@ main .section.carousel-container { outline-offset: 2px; } -.btn-sm { - padding-top: 0.125rem; - padding-bottom: 0.125rem; - font-size: 0.875rem; - line-height: 1.25rem; -} - -.topichub main .side-nav-wrapper > div.products > div.btn-lg { - padding-top: 5rem; -} - -.topic main .side-nav-wrapper > div.topics > div.btn-lg { - padding-top: 6rem; -} - -.btn-lg { - padding-top: 0.625rem; - padding-bottom: 0.625rem; - font-size: 1.125rem; - line-height: 1.75rem; -} - .btn:disabled { cursor: not-allowed; opacity: 0.5; @@ -960,14 +908,6 @@ main .default-content-wrapper p { color: rgb(55 65 81 / var(--tw-text-opacity)); } -.topichub main .side-nav-wrapper > div.products > divmain .default-content-wrapper p.button-container>a { - padding-top: 5rem; -} - -.topic main .side-nav-wrapper > div.topics > divmain .default-content-wrapper p.button-container>a { - padding-top: 6rem; -} - main .default-content-wrapper p.button-container>a { margin-top: 1.5rem; border-radius: 9999px; @@ -1073,138 +1013,259 @@ header { } } -.\!timeline > *:not(:last-child) { - .columns.features-card-left > div > div > .card { - display: flex; - } - .columns.features-card-left > div > div > .card { - flex-direction: row; - } - .columns.features-card-left > div > div > .card { - padding-bottom: 1.5rem; - } - .columns.features-card-left > div > div > div.card > .left-content { - padding-right: 0.75rem; - } - .productdetail main .columns.columns-2-cols { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - } - .productdetail main .columns.columns-2-cols { - font-size: 1rem; - line-height: 1.5rem; - } - .productdetail main .columns.columns-2-cols { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); - } - { - position: absolute; - } - { - left: 38%; - } - { - top: 3.5rem; - } - { - bottom: 0px; - } - { - height: 100%; - } - { - width: 1px; - } - { - --tw-bg-opacity: 1; - background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +.topic main, .topichub main { + margin-left: auto; + margin-right: auto; + display: grid; + max-width: 80rem; + padding-left: 1rem; + padding-right: 1rem; +} + +@media (min-width: 1024px) { + .topic main, .topichub main { + grid-template-columns: repeat(12, minmax(0, 1fr)); + padding-left: 0px; + padding-right: 0px; } - { - --tw-content: ""; - content: var(--tw-content); +} + +.topic main > div, .topichub main > div { + margin-bottom: 0.5rem; + flex: 1 1 0%; +} + +.topic main > div > :not([hidden]) ~ :not([hidden]), .topichub main > div > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.topic main > div, .topichub main > div { + padding: 0px; +} + +@media (min-width: 1024px) { + .topic main > div, .topichub main > div { + grid-column: span 8 / span 8; + grid-column-start: 5; } - @media (min-width: 768px) { - { - left: 18%; - } +} + +.topic main > .side-nav-container, .topichub main > .side-nav-container { + display: none; + padding: 0px; +} + +@media (min-width: 1024px) { + .topic main > .side-nav-container, .topichub main > .side-nav-container { + grid-column: span 3 / span 3; + grid-column-start: 1; + grid-row: span 6 / span 6; + display: block; } - @media (min-width: 1024px) { - { - left: 28%; - } + + .topic main > .side-nav-container + .section, .topichub main > .side-nav-container + .section { + padding-top: 1rem; } } -.timeline > *:not(:last-child) { - .columns.features-card-left > div > div.t-line > .card::after { - display: flex; - } - .columns.features-card-left > div > div.t-line > .card::after { +.topic main p:not(.show-modal-btn) { + margin-bottom: 1rem; + font-size: 1.125rem; + line-height: 1.75rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.topic main .section.social-media-container, main .section.takeway-container, main .section.call-to-action-container { + padding: 0px; +} + +.processstep main .default-content-wrapper.section.side-nav-container { + margin-left: auto; + margin-right: auto; + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +@media (min-width: 1024px) { + .processstep main .default-content-wrapper.section.side-nav-container { flex-direction: row; } - .columns.features-card-left > div > div.t-line > .card::after { - padding-bottom: 1.5rem; - } - .columns.features-card-left > div > div.t-line > div.card > .left-content::after { - padding-right: 0.75rem; - } - .productdetail main .columns.columns-2-cols .t-line::after { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - } - .productdetail main .columns.columns-2-cols .t-line::after { - font-size: 1rem; - line-height: 1.5rem; - } - .productdetail main .columns.columns-2-cols .t-line::after { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); - } - .t-line::after { - position: absolute; - } - .t-line::after { - left: 38%; - } - .t-line::after { - top: 3.5rem; - } - .t-line::after { - bottom: 0px; +} + +.processstep main .default-content-wrapper.section.side-nav-container div:nth-child(2) { + width: 75% !important; +} + +.processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper { + width: 20rem !important; + padding-left: 1rem !important; +} + +.processstep main .default-content-wrapper.section.side-nav-container > div { + margin-right: 0px !important; + margin-left: 0px !important; + max-width: 64rem !important; +} + +.blog main { + margin-left: auto; + margin-right: auto; + display: flex; + width: 100%; + max-width: 80rem; + flex-direction: row; + gap: 2rem; +} + +.blog main > div { + padding-top: 2.5rem !important; + padding-bottom: 2.5rem !important; +} + +.blog main > div:empty { + display: none; +} + +@media (min-width: 640px) { + .blog main > div { + padding-top: 2rem !important; + padding-bottom: 2rem !important; } - .t-line::after { - height: 100%; +} + +@media (min-width: 768px) { + .blog main > div { + padding-left: 1.25rem !important; + padding-right: 1.25rem !important; } - .t-line::after { - width: 1px; +} + +.blog main .recent-articles-container { + display: none; + flex-shrink: 0; +} + +.blog main .recent-articles-container > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.blog main .recent-articles-container { + --tw-bg-opacity: 1; + background-color: rgb(245 239 255 / var(--tw-bg-opacity)); + padding-top: 7rem !important; + padding-bottom: 7rem !important; +} + +@media (min-width: 1024px) { + .blog main .recent-articles-container { + display: block; + width: 23rem; } - .t-line::after { - --tw-bg-opacity: 1; - background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +} + +.library main { + margin-left: auto; + margin-right: auto; + display: flex; + width: 100%; + max-width: 80rem; + flex-direction: row; + gap: 2rem; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.library main > div { + padding-top: 2.5rem !important; + padding-bottom: 2.5rem !important; +} + +.library main > div:empty { + display: none; +} + +@media (min-width: 640px) { + .library main > div { + padding-top: 2rem !important; + padding-bottom: 2rem !important; } - .t-line::after { - --tw-content: ""; - content: var(--tw-content); +} + +@media (min-width: 768px) { + .library main > div { + padding-left: 1.25rem !important; + padding-right: 1.25rem !important; } - @media (min-width: 768px) { - .t-line::after { - left: 18%; - } +} + +.library main .recent-articles-container { + display: none; + flex-shrink: 0; +} + +.library main .recent-articles-container > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.library main .recent-articles-container { + --tw-bg-opacity: 1; + background-color: rgb(245 239 255 / var(--tw-bg-opacity)); + padding-top: 7rem !important; + padding-bottom: 7rem !important; +} + +@media (min-width: 1024px) { + .library main .recent-articles-container { + display: block; + width: 23rem; } - @media (min-width: 1024px) { - .t-line::after { - left: 28%; - } +} + +.appear div.mobile-jump-menu { + order: 9999; + display: block; + width: 100%; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +@media (min-width: 768px) { + .appear div.mobile-jump-menu { + display: none; } } -.topichub main .side-nav-wrapper > div.products > div.columns:not(.columns-2-cols) > div div > p:not(.button-container) { - padding-top: 5rem; +.appear div.mobile-jump-menu select.selected-tab { + display: block; + width: auto; + border-radius: 0.25rem; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgb(13 49 114 / var(--tw-text-opacity)); } -.topic main .side-nav-wrapper > div.topics > div.columns:not(.columns-2-cols) > div div > p:not(.button-container) { - padding-top: 6rem; +.appear div.mobile-jump-menu select.selected-tab:focus { + outline: 2px solid transparent; + outline-offset: 2px; } .columns:not(.columns-2-cols) > div div > p:not(.button-container) { @@ -1305,14 +1366,6 @@ main .top-border > div.columns-wrapper:first-child { color: rgb(209 213 219 / var(--tw-text-opacity)); } -.topichub main .side-nav-wrapper > div.products > div.productdetail main .columns p > strong { - padding-top: 5rem; -} - -.topic main .side-nav-wrapper > div.topics > div.productdetail main .columns p > strong { - padding-top: 6rem; -} - .productdetail main .columns p > strong { font-size: 1.125rem !important; font-weight: 500 !important; @@ -1440,6 +1493,73 @@ main .section.product-hero-container { stroke: #fff; } +.page-jump-menu-container { + margin-top: -5rem; + display: none; + padding-left: 0px; + padding-right: 0px; +} + +@media (min-width: 768px) { + .page-jump-menu-container { + display: block; + padding-left: 1rem; + padding-right: 1rem; + } +} + +@media (min-width: 1024px) { + .page-jump-menu-container { + padding-left: 0px; + padding-right: 0px; + } +} + +.page-jump-menu-container .page-jump-menu-wrapper { + margin-left: auto; + margin-right: auto; + display: flex; +} + +@media (min-width: 768px) { + .page-jump-menu-container .page-jump-menu-wrapper { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.page-jump-menu-container ul>li>a { + height: 10rem; + flex-direction: column; + justify-content: center; +} + +.page-jump-menu-container ul > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); +} + +svg symbol path { + stroke: inherit; +} + +.page-tabs-container.fixed ul { + border-radius: 0px; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.page-tabs-container.fixed li > a { + border-radius: 9999px; +} + +.page-tabs-container.fixed li:hover > a .icon svg > use, + .page-tabs-container.fixed li[aria-selected="true"] > a .icon svg > use { + stroke: #fff; +} + .processstep main .default-content-wrapper.section.side-nav-container, .topic main, .topichub main { @@ -1504,103 +1624,41 @@ main .section.product-hero-container { } } -.topichub main .side-nav-wrapper > div.products > div.text-lg { - padding-top: 5rem; -} - -.topichub main .side-nav-wrapper > div.products > div.\!text-lg { - padding-top: 5rem; -} - -.topic main .side-nav-wrapper > div.topics > div.text-lg { - padding-top: 6rem; -} - -.topic main .side-nav-wrapper > div.topics > div.\!text-lg { - padding-top: 6rem; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; +.pointer-events-none { + pointer-events: none; } -.processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper, - .topic main .side-nav-container, - .topichub main .side-nav-container { - display: none; - padding: 0px; +.pointer-events-auto { + pointer-events: auto; } -@media (min-width: 1024px) { - .processstep main .default-content-wrapper.section.side-nav-container > div.side-nav-wrapper, - .topic main .side-nav-container, - .topichub main .side-nav-container { - grid-column: span 3 / span 3; - grid-column-start: 1; - grid-row: span 6 / span 6; - display: block; - padding-top: 1rem; - } +.visible { + visibility: visible; } -.processstep main .default-content-wrapper.section.side-nav-container > div, - .topic main div:nth-child(2), - .topichub main .section.topic-list-container { - margin-bottom: 0.5rem; - flex: 1 1 0%; +.static { + position: static; } -.absolute { - position: absolute; +.fixed { + position: fixed; } .relative { position: relative; } -.inset-0 { - inset: 0px; -} - .inset-x-0 { left: 0px; right: 0px; } -.topichub main .side-nav-wrapper > div.products > div.text-lg { - padding-top: 5rem; +.bottom-0 { + bottom: 0px; } -.bottom-3 { - bottom: 0.75rem; -} - -.bottom-4 { - bottom: 1rem; -} - -.topic main .side-nav-wrapper > div.topics > div.\!text-lg { - padding-top: 6rem; -} - -.left-28 { - left: 7rem; -} - -.left-4 { - left: 1rem; -} - -.left-6 { - left: 1.5rem; +.left-0 { + left: 0px; } .right-0 { @@ -1611,98 +1669,18 @@ main .section.product-hero-container { top: 0px; } -.top-14 { - top: 3.5rem; -} - -.top-16 { - top: 4rem; -} - -.top-4 { - top: 1rem; -} - .top-\[83px\] { top: 83px; } -.top-full { - top: 100%; -} - -.z-0 { - z-index: 0; -} - .z-10 { z-index: 10; } -.z-20 { - z-index: 20; -} - -.z-40 { - z-index: 40; -} - -.z-50 { - z-index: 50; -} - .z-\[9999\] { z-index: 9999; } -.z-\[9\] { - z-index: 9; -} - -.order-1 { - order: 1; -} - -.order-first { - order: -9999; -} - -.order-last { - order: 9999; -} - -.order-none { - order: 0; -} - -.col-span-1 { - grid-column: span 1 / span 1; -} - -.col-span-10 { - grid-column: span 10 / span 10; -} - -.col-span-2 { - grid-column: span 2 / span 2; -} - -.col-span-4 { - grid-column: span 4 / span 4; -} - -.col-span-8 { - grid-column: span 8 / span 8; -} - -.float-right { - float: right; -} - -.float-none { - float: none; -} - .m-0 { margin: 0px; } @@ -2134,14 +2112,6 @@ main .section.product-hero-container { padding-top: 3rem; } -.pt-2 { - padding-top: 0.5rem; -} - -.pt-2\.5 { - padding-top: 0.625rem; -} - .pt-4 { padding-top: 1rem; } @@ -2344,50 +2314,6 @@ main .section.top-border { border-color: rgb(0 0 0 / var(--tw-border-opacity)); } -.off-screen { - visibility: hidden; - position: absolute; - left: 0px; - right: 0px; - opacity: 0; -} - -@media (min-width: 768px) { - .topichub main .side-nav-wrapper > div.products > div.md\:btn-lg { - padding-top: 5rem; - } - - .topic main .side-nav-wrapper > div.topics > div.md\:btn-lg { - padding-top: 6rem; - } - - .md\:btn-lg { - padding-top: 0.625rem; - padding-bottom: 0.625rem; - font-size: 1.125rem; - line-height: 1.75rem; - } - - .columns.features-card-left > div > div.md\:h-full > .card { - display: flex; - flex-direction: row; - padding-bottom: 1.5rem; - } - - .columns.features-card-left > div > div.md\:h-full > div.card > .left-content { - padding-right: 0.75rem; - } - - .productdetail main .columns.columns-2-cols .md\:h-full { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-size: 1rem; - line-height: 1.5rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); - } -} - .columns.features-card-left > div > .\[\&_ul\>li\>a\]\:h-full ul>li>adiv > .card { display: flex; flex-direction: row; @@ -2497,27 +2423,6 @@ main .section.top-border { grid-column: span 4 / span 4; } - .lg\:col-span-8 { - grid-column: span 8 / span 8; - } - - .lg\:col-start-5 { - grid-column-start: 5; - } - - .lg\:m-auto { - margin: auto; - } - - .lg\:my-4 { - margin-top: 1rem; - margin-bottom: 1rem; - } - - .lg\:mb-8 { - margin-bottom: 2rem; - } - .lg\:mt-0 { margin-top: 0px; } @@ -2534,30 +2439,6 @@ main .section.top-border { max-width: 80rem; } - .lg\:flex-shrink-0 { - flex-shrink: 0; - } - - .lg\:auto-cols-\[calc\(\(100\%\/3\)-20px\)\] { - grid-auto-columns: calc((100% / 3) - 20px); - } - - .lg\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .lg\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .lg\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .lg\:grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } diff --git a/styles/tailwind.css b/styles/tailwind.css index dbd76afc5..34a60599e 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -487,15 +487,6 @@ .topichub main .section.topic-list-container { @apply lg:col-span-8 lg:col-start-5 space-y-4 mb-2 flex-1; } - - .topichub main .side-nav-wrapper > div.products > div.text-lg { - @apply pt-20; - } - - .topic main .side-nav-wrapper > div.topics > div.text-lg { - @apply pt-24; - } - } @layer utilities { From 54108c5b68f4e3c4bfa7ac0b22a36d65e7ac8992 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Tue, 14 May 2024 14:44:25 +0530 Subject: [PATCH 54/88] product page page-tabs fixes --- blocks/page-jump-menu/page-jump-menu.css | 4 +- blocks/page-tabs/page-tabs.css | 8 ++- blocks/page-tabs/page-tabs.js | 4 +- styles/styles.css | 81 ++++++++++++------------ styles/tailwind.css | 66 ++++++------------- 5 files changed, 67 insertions(+), 96 deletions(-) diff --git a/blocks/page-jump-menu/page-jump-menu.css b/blocks/page-jump-menu/page-jump-menu.css index 6020ba082..65e3dcb25 100644 --- a/blocks/page-jump-menu/page-jump-menu.css +++ b/blocks/page-jump-menu/page-jump-menu.css @@ -593,8 +593,8 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.page-jump-menu-wrapper :is(.stroke-black) { - stroke: #000; +.page-jump-menu-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; } .page-jump-menu-wrapper :is(.stroke-1) { diff --git a/blocks/page-tabs/page-tabs.css b/blocks/page-tabs/page-tabs.css index c62087afd..b99ab0e2a 100644 --- a/blocks/page-tabs/page-tabs.css +++ b/blocks/page-tabs/page-tabs.css @@ -534,6 +534,10 @@ video { --tw-backdrop-sepia: ; } +.page-tabs-wrapper :is(.relative) { + position: relative; +} + .page-tabs-wrapper :is(.z-10) { z-index: 10; } @@ -589,8 +593,8 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.page-tabs-wrapper :is(.stroke-black) { - stroke: #000; +.page-tabs-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; } .page-tabs-wrapper :is(.stroke-1) { diff --git a/blocks/page-tabs/page-tabs.js b/blocks/page-tabs/page-tabs.js index eca9660cd..34edc89b1 100644 --- a/blocks/page-tabs/page-tabs.js +++ b/blocks/page-tabs/page-tabs.js @@ -56,7 +56,7 @@ export function createTabList(tabs, currentTab, isJumpMenu) { href: ancHref, title: tab.name, }, - span({ class: `w-8 h-8 icon ${tabIcon} stroke-1 stroke-black group-hover:stroke-white ` }), + span({ class: `w-8 h-8 icon ${tabIcon} stroke-1 stroke-danaherpurple-500 group-hover:stroke-white` }), span({ class: 'py-2 text-sm tracking-wider font-bold' }, tab.name), span({ class: `icon icon-chevron-down mt-4 mb-2 [&_svg]:duration-300 [&_svg]:stroke-1 [&_svg]:group-hover:translate-y-1 [&_svg]:group-hover:stroke-white ${isSelectedTab ? '[&_svg]:stroke-white' : '[&_svg]:stroke-danaherpurple-500'}` }), ), @@ -201,6 +201,6 @@ export default async function decorate(block) { scrollPageTabFixed(pageTabsContainer); }); - block.classList.add('z-10'); + block.classList.add('z-10 relative'); return block; } diff --git a/styles/styles.css b/styles/styles.css index 68681aead..4cbd2e1a1 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1440,7 +1440,11 @@ main .section.product-hero-container { font-weight: 700; } -.page-jump-menu-container.fixed { +svg symbol path { + stroke: inherit; +} + +.page-jump-menu-container.fixed, .page-tabs-container.fixed { margin-top: -1px; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -1449,51 +1453,51 @@ main .section.product-hero-container { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.page-jump-menu-container.fixed ul { +.page-jump-menu-container.fixed ul, .page-tabs-container.fixed ul { border-radius: 0px; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.page-jump-menu-container li[aria-selected="false"] > a { +.page-jump-menu-container li[aria-selected="false"] > a, .page-tabs-container li[aria-selected="false"] > a { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.page-jump-menu-container li[aria-selected="true"] > a { - --tw-bg-opacity: 1 !important; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)) !important; - --tw-text-opacity: 1 !important; - color: rgb(255 255 255 / var(--tw-text-opacity)) !important; +.page-jump-menu-container li[aria-selected="true"] > a, .page-tabs-container li[aria-selected="true"] > a { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); } -.page-jump-menu-container li[aria-selected="true"] svg { +.page-jump-menu-container li[aria-selected="true"] svg, .page-tabs-container li[aria-selected="true"] svg { stroke: #fff; } -.page-jump-menu-container.fixed li > a { +.page-jump-menu-container.fixed li > a, .page-tabs-container.fixed li > a { border-radius: 9999px; } -.page-jump-menu-container li:hover > a, - .page-jump-menu-container li[aria-selected="true"] > a { +.page-jump-menu-container li:hover > a, .page-tabs-container li:hover > a, + .page-jump-menu-container li[aria-selected="true"] > a, .page-tabs-container li[aria-selected="true"] > a { --tw-bg-opacity: 1; background-color: rgb(117 35 255 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.page-jump-menu-container.fixed li a .icon svg > use { +.page-jump-menu-container.fixed li a .icon svg > use, .page-tabs-container.fixed li a .icon svg > use { stroke: #7523FF; } -.page-jump-menu-container.fixed li:hover > a .icon svg > use, - .page-jump-menu-container.fixed li[aria-selected="true"] > a .icon svg > use { +.page-jump-menu-container.fixed li:hover > a .icon svg > use, .page-tabs-container.fixed li:hover > a .icon svg > use, + .page-jump-menu-container.fixed li[aria-selected="true"] > a .icon svg > use, .page-tabs-container.fixed li[aria-selected="true"] > a .icon svg > use { stroke: #fff; } -.page-jump-menu-container { +.page-jump-menu-container, .page-tabs-container { margin-top: -5rem; display: none; padding-left: 0px; @@ -1501,7 +1505,7 @@ main .section.product-hero-container { } @media (min-width: 768px) { - .page-jump-menu-container { + .page-jump-menu-container, .page-tabs-container { display: block; padding-left: 1rem; padding-right: 1rem; @@ -1509,57 +1513,50 @@ main .section.product-hero-container { } @media (min-width: 1024px) { - .page-jump-menu-container { + .page-jump-menu-container, .page-tabs-container { padding-left: 0px; padding-right: 0px; } } -.page-jump-menu-container .page-jump-menu-wrapper { +.page-jump-menu-container .page-jump-menu-wrapper, .page-tabs-container .page-jump-menu-wrapper { + margin-left: auto; + margin-right: auto; + display: flex; +} + +@media (min-width: 768px) { + .page-jump-menu-container .page-jump-menu-wrapper, .page-tabs-container .page-jump-menu-wrapper { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.page-jump-menu-container .page-tabs-wrapper, .page-tabs-container .page-tabs-wrapper { margin-left: auto; margin-right: auto; display: flex; } @media (min-width: 768px) { - .page-jump-menu-container .page-jump-menu-wrapper { + .page-jump-menu-container .page-tabs-wrapper, .page-tabs-container .page-tabs-wrapper { max-width: -moz-max-content; max-width: max-content; } } -.page-jump-menu-container ul>li>a { +.page-jump-menu-container ul>li>a, .page-tabs-container ul>li>a { height: 10rem; flex-direction: column; justify-content: center; } -.page-jump-menu-container ul > :not([hidden]) ~ :not([hidden]) { +.page-jump-menu-container ul > :not([hidden]) ~ :not([hidden]), .page-tabs-container ul > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } -svg symbol path { - stroke: inherit; -} - -.page-tabs-container.fixed ul { - border-radius: 0px; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.page-tabs-container.fixed li > a { - border-radius: 9999px; -} - -.page-tabs-container.fixed li:hover > a .icon svg > use, - .page-tabs-container.fixed li[aria-selected="true"] > a .icon svg > use { - stroke: #fff; -} - .processstep main .default-content-wrapper.section.side-nav-container, .topic main, .topichub main { diff --git a/styles/tailwind.css b/styles/tailwind.css index 34a60599e..ddea4eee7 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -394,80 +394,50 @@ @apply font-semibold text-2xl pt-4; } - .page-jump-menu-container.fixed { + svg symbol path { + stroke: inherit; + } + + .page-jump-menu-container.fixed, .page-tabs-container.fixed { @apply mt-[-1px] bg-white shadow-lg; } - .page-jump-menu-container.fixed ul { + .page-jump-menu-container.fixed ul, .page-tabs-container.fixed ul { @apply shadow-none rounded-none; } - .page-jump-menu-container li[aria-selected="false"] > a { + .page-jump-menu-container li[aria-selected="false"] > a, .page-tabs-container li[aria-selected="false"] > a { @apply bg-white; } - .page-jump-menu-container li[aria-selected="true"] > a { - @apply !text-white !bg-danaherpurple-500; + .page-jump-menu-container li[aria-selected="true"] > a, .page-tabs-container li[aria-selected="true"] > a { + @apply text-white bg-danaherpurple-500; } - .page-jump-menu-container li[aria-selected="true"] svg { + .page-jump-menu-container li[aria-selected="true"] svg, .page-tabs-container li[aria-selected="true"] svg { @apply stroke-white; } - .page-jump-menu-container.fixed li > a { + .page-jump-menu-container.fixed li > a, .page-tabs-container.fixed li > a { @apply rounded-full; } - .page-jump-menu-container li:hover > a, - .page-jump-menu-container li[aria-selected="true"] > a { + .page-jump-menu-container li:hover > a, .page-tabs-container li:hover > a, + .page-jump-menu-container li[aria-selected="true"] > a, .page-tabs-container li[aria-selected="true"] > a { @apply text-white bg-danaherpurple-500; } - .page-jump-menu-container.fixed li a .icon svg > use { + .page-jump-menu-container.fixed li a .icon svg > use, .page-tabs-container.fixed li a .icon svg > use { @apply stroke-danaherpurple-500; } - .page-jump-menu-container.fixed li:hover > a .icon svg > use, - .page-jump-menu-container.fixed li[aria-selected="true"] > a .icon svg > use { + .page-jump-menu-container.fixed li:hover > a .icon svg > use, .page-tabs-container.fixed li:hover > a .icon svg > use, + .page-jump-menu-container.fixed li[aria-selected="true"] > a .icon svg > use, .page-tabs-container.fixed li[aria-selected="true"] > a .icon svg > use { @apply stroke-white; } - .page-jump-menu-container { - @apply hidden md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-jump-menu-wrapper]:flex [&_.page-jump-menu-wrapper]:mx-auto [&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center; - } - - svg symbol path { - stroke: inherit; - } - - .page-tabs-container { - @apply hidden md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-tabs-wrapper]:flex [&_.page-tabs-wrapper]:mx-auto; - } - - .page-tabs-container.fixed ul { - @apply shadow-none rounded-none; - } - - .page-tabs-container li[aria-selected="false"] > a { - @apply bg-white; - } - - .page-tabs-container li[aria-selected="true"] svg { - @apply stroke-white; - } - - .page-tabs-container.fixed li > a { - @apply rounded-full; - } - - .page-tabs-container li:hover > a, - .page-tabs-container li[aria-selected="true"] > a { - @apply text-white bg-danaherpurple-500; - } - - .page-tabs-container.fixed li:hover > a .icon svg > use, - .page-tabs-container.fixed li[aria-selected="true"] > a .icon svg > use { - @apply stroke-white; + .page-jump-menu-container, .page-tabs-container { + @apply hidden md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-jump-menu-wrapper]:flex [&_.page-tabs-wrapper]:flex [&_.page-jump-menu-wrapper]:mx-auto [&_.page-tabs-wrapper]:mx-auto [&_.page-jump-menu-wrapper]:md:max-w-max [&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center ; } .processstep main .default-content-wrapper.section.side-nav-container, From 6222fdb83c73296e19f73d534d7fa4bb78dc303c Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Tue, 14 May 2024 14:49:59 +0530 Subject: [PATCH 55/88] removed unwanted imports --- tailwind.config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 5b8923988..3a14efc7e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,5 @@ /** @type {import('tailwindcss').Config} */ const plugin = require('tailwindcss/plugin'); -const { vi } = require('vitest'); const wrapper = (process.env.IMPORTANT_WRAPPER && process.env.IMPORTANT_WRAPPER !== '.undefined') ? process.env.IMPORTANT_WRAPPER : false; module.exports = { important: wrapper, From 408f27b8d33140c5b6d81f131db4202b6c740cbc Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Wed, 15 May 2024 12:07:23 +0530 Subject: [PATCH 56/88] prod-recommendations UI broken --- blocks/page-tabs/page-tabs.css | 4 ---- blocks/page-tabs/page-tabs.js | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/blocks/page-tabs/page-tabs.css b/blocks/page-tabs/page-tabs.css index b99ab0e2a..72191b4cb 100644 --- a/blocks/page-tabs/page-tabs.css +++ b/blocks/page-tabs/page-tabs.css @@ -534,10 +534,6 @@ video { --tw-backdrop-sepia: ; } -.page-tabs-wrapper :is(.relative) { - position: relative; -} - .page-tabs-wrapper :is(.z-10) { z-index: 10; } diff --git a/blocks/page-tabs/page-tabs.js b/blocks/page-tabs/page-tabs.js index 34edc89b1..a5f4c0e30 100644 --- a/blocks/page-tabs/page-tabs.js +++ b/blocks/page-tabs/page-tabs.js @@ -201,6 +201,6 @@ export default async function decorate(block) { scrollPageTabFixed(pageTabsContainer); }); - block.classList.add('z-10 relative'); + block.classList.add('z-10'); return block; } From 431ae7c0e4756fff17655a852fed5cab1ea3799a Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Wed, 15 May 2024 12:35:46 +0530 Subject: [PATCH 57/88] product recommends CSS changes --- blocks/product-recommendations/product-recommendations.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/product-recommendations/product-recommendations.js b/blocks/product-recommendations/product-recommendations.js index bc0a3df2d..5848ea813 100644 --- a/blocks/product-recommendations/product-recommendations.js +++ b/blocks/product-recommendations/product-recommendations.js @@ -8,8 +8,8 @@ import { createCard } from '../product-card/product-card.js'; function createProdRecommendsCard(product, idx, firstCard = false) { const card = createCard(product, idx, firstCard); - card?.classList.remove('hover:scale-105'); - card?.classList.add('carousel-slider'); + if (card?.classList.contains('hover:scale-105')) card?.classList.remove('hover:scale-105'); + if (!card?.classList.contains('carousel-slider')) card?.classList.add('carousel-slider'); return card; } From 86819dd76558185e55eb4b2f4f2f216b3e002961 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Wed, 15 May 2024 16:20:00 +0530 Subject: [PATCH 58/88] prod-recommens build-css changes --- .../product-recommendations.css | 243 ++++++++++++++++++ .../product-recommendations.js | 4 +- build-css.js | 2 +- 3 files changed, 246 insertions(+), 3 deletions(-) diff --git a/blocks/product-recommendations/product-recommendations.css b/blocks/product-recommendations/product-recommendations.css index 695bd7263..3af4cd1b2 100644 --- a/blocks/product-recommendations/product-recommendations.css +++ b/blocks/product-recommendations/product-recommendations.css @@ -534,14 +534,87 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } +.product-recommendations-wrapper :is(.relative) { + position: relative; +} + +.product-recommendations-wrapper :is(.col-span-1) { + grid-column: span 1 / span 1; +} + +.product-recommendations-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.product-recommendations-wrapper :is(.mb-3) { + margin-bottom: 0.75rem; +} + +.product-recommendations-wrapper :is(.mb-4) { + margin-bottom: 1rem; +} + .product-recommendations-wrapper :is(.mt-12) { margin-top: 3rem; } +.product-recommendations-wrapper :is(.mt-3) { + margin-top: 0.75rem; +} + +.product-recommendations-wrapper :is(.\!line-clamp-3) { + overflow: hidden !important; + display: -webkit-box !important; + -webkit-box-orient: vertical !important; + -webkit-line-clamp: 3 !important; +} + +.product-recommendations-wrapper :is(.line-clamp-4) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; +} + .product-recommendations-wrapper :is(.block) { display: block; } @@ -562,6 +635,30 @@ video { display: none; } +.product-recommendations-wrapper :is(.\!h-14) { + height: 3.5rem !important; +} + +.product-recommendations-wrapper :is(.\!h-20) { + height: 5rem !important; +} + +.product-recommendations-wrapper :is(.w-full) { + width: 100%; +} + +.product-recommendations-wrapper :is(.max-w-7xl) { + max-width: 80rem; +} + +.product-recommendations-wrapper :is(.max-w-xl) { + max-width: 36rem; +} + +.product-recommendations-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .product-recommendations-wrapper :is(.snap-x) { scroll-snap-type: x var(--tw-scroll-snap-strictness); } @@ -578,14 +675,30 @@ video { grid-auto-flow: column; } +.product-recommendations-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.product-recommendations-wrapper :is(.flex-col) { + flex-direction: column; +} + .product-recommendations-wrapper :is(.items-center) { align-items: center; } +.product-recommendations-wrapper :is(.justify-center) { + justify-content: center; +} + .product-recommendations-wrapper :is(.justify-between) { justify-content: space-between; } +.product-recommendations-wrapper :is(.justify-items-center) { + justify-items: center; +} + .product-recommendations-wrapper :is(.gap-6) { gap: 1.5rem; } @@ -601,12 +714,22 @@ video { margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } +.product-recommendations-wrapper :is(.space-x-4 > :not([hidden]) ~ :not([hidden])) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + .product-recommendations-wrapper :is(.space-y-3 > :not([hidden]) ~ :not([hidden])) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } +.product-recommendations-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + .product-recommendations-wrapper :is(.overflow-x-auto) { overflow-x: auto; } @@ -615,39 +738,155 @@ video { scroll-behavior: smooth; } +.product-recommendations-wrapper :is(.\!break-words) { + overflow-wrap: break-word !important; +} + +.product-recommendations-wrapper :is(.break-words) { + overflow-wrap: break-word; +} + +.product-recommendations-wrapper :is(.\!rounded-full) { + border-radius: 9999px !important; +} + +.product-recommendations-wrapper :is(.rounded-lg) { + border-radius: 0.5rem; +} + .product-recommendations-wrapper :is(.rounded-md) { border-radius: 0.375rem; } +.product-recommendations-wrapper :is(.border) { + border-width: 1px; +} + +.product-recommendations-wrapper :is(.border-8) { + border-width: 8px; +} + .product-recommendations-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.product-recommendations-wrapper :is(.bg-gray-100) { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.product-recommendations-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.product-recommendations-wrapper :is(.\!px-7) { + padding-left: 1.75rem !important; + padding-right: 1.75rem !important; +} + +.product-recommendations-wrapper :is(.px-2) { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.product-recommendations-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.product-recommendations-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.product-recommendations-wrapper :is(.py-5) { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + .product-recommendations-wrapper :is(.pb-2) { padding-bottom: 0.5rem; } +.product-recommendations-wrapper :is(.pt-8) { + padding-top: 2rem; +} + +.product-recommendations-wrapper :is(.\!text-lg) { + font-size: 1.125rem !important; + line-height: 1.75rem !important; +} + .product-recommendations-wrapper :is(.text-base) { font-size: 1rem; line-height: 1.5rem; } +.product-recommendations-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.product-recommendations-wrapper :is(.\!font-semibold) { + font-weight: 700 !important; +} + .product-recommendations-wrapper :is(.font-bold) { font-weight: 700; } +.product-recommendations-wrapper :is(.\!text-danahergray-900) { + --tw-text-opacity: 1 !important; + color: rgb(17 24 39 / var(--tw-text-opacity)) !important; +} + .product-recommendations-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)); } +.product-recommendations-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.product-recommendations-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-recommendations-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.product-recommendations-wrapper :is(.duration-500) { + transition-duration: 500ms; +} + .product-recommendations-wrapper :is(.hover\:scale-105:hover) { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +@media (min-width: 640px) { + .product-recommendations-wrapper :is(.sm\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .product-recommendations-wrapper :is(.sm\:px-0) { + padding-left: 0px; + padding-right: 0px; + } +} + @media (min-width: 768px) { .product-recommendations-wrapper :is(.md\:auto-cols-\[calc\(100\%\/2\)\]) { grid-auto-columns: calc(100% / 2); @@ -658,6 +897,10 @@ video { .product-recommendations-wrapper :is(.lg\:auto-cols-\[calc\(\(100\%\/3\)-20px\)\]) { grid-auto-columns: calc((100% / 3) - 20px); } + + .product-recommendations-wrapper :is(.lg\:grid-cols-4) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } } @media (min-width: 1280px) { diff --git a/blocks/product-recommendations/product-recommendations.js b/blocks/product-recommendations/product-recommendations.js index 5848ea813..bc0a3df2d 100644 --- a/blocks/product-recommendations/product-recommendations.js +++ b/blocks/product-recommendations/product-recommendations.js @@ -8,8 +8,8 @@ import { createCard } from '../product-card/product-card.js'; function createProdRecommendsCard(product, idx, firstCard = false) { const card = createCard(product, idx, firstCard); - if (card?.classList.contains('hover:scale-105')) card?.classList.remove('hover:scale-105'); - if (!card?.classList.contains('carousel-slider')) card?.classList.add('carousel-slider'); + card?.classList.remove('hover:scale-105'); + card?.classList.add('carousel-slider'); return card; } diff --git a/build-css.js b/build-css.js index b1e216a9e..9e870410f 100644 --- a/build-css.js +++ b/build-css.js @@ -157,7 +157,7 @@ const fileMappings = [ wrapper: 'product-parts-wrapper', }, { - content: './blocks/product-recommendations/product-recommendations.js', + content: ['./blocks/product-recommendations/product-recommendations.js', './blocks/product-card/product-card.js'], output: './blocks/product-recommendations/product-recommendations.css', wrapper: 'product-recommendations-wrapper', }, From c1c7c71aecce974c502ddfe261f5f030e5a24700 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 17:47:08 +0530 Subject: [PATCH 59/88] Fixed heading issues --- styles/styles.css | 13 +++++++------ styles/tailwind.css | 8 ++++---- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 4cbd2e1a1..2e916a3a4 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -472,19 +472,19 @@ h1, h2, h3, h4, h5, h6 { } h1 { - font-size: 2.5rem; - font-weight: 500; - line-height: 3rem; + font-size: 2.5rem !important; + font-weight: 500 !important; + line-height: 3rem !important; } h2 { font-size: 1.875rem; - font-weight: 500; - line-height: 2.25rem; + font-weight: 500 !important; + line-height: 2.25rem !important; } h3 { - font-size: 1.5rem !important; + font-size: 1.5rem; font-weight: 500 !important; line-height: 2rem !important; } @@ -1232,6 +1232,7 @@ header { .appear div.mobile-jump-menu { order: 9999; display: block; + height: 3.5rem; width: 100%; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); diff --git a/styles/tailwind.css b/styles/tailwind.css index ddea4eee7..a9a8a272f 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -30,15 +30,15 @@ } h1 { - @apply leading-12 font-medium text-4xl2; + @apply !leading-12 !font-medium !text-4xl2; } h2 { - @apply leading-9 font-medium text-3xl; + @apply !leading-9 !font-medium text-3xl; } h3 { - @apply !leading-8 !font-medium !text-2xl; + @apply !leading-8 !font-medium text-2xl; } h4 { @@ -277,7 +277,7 @@ } .appear div.mobile-jump-menu { - @apply block w-full px-4 py-2 bg-white md:hidden order-last; + @apply block h-14 w-full px-4 py-2 bg-white md:hidden order-last; } .appear div.mobile-jump-menu select.selected-tab { From c167938caabfea3b9eecdfe06c5bbe5ed559365c Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 18:07:01 +0530 Subject: [PATCH 60/88] Height fixed for product hero --- styles/styles.css | 6 ++++++ styles/tailwind.css | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index 2e916a3a4..2d865c961 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1419,6 +1419,12 @@ main .section.product-hero-container { padding-bottom: 8rem; } +@media (min-width: 640px) { + main .section.product-hero-container { + height: 1140px; + } +} + .category main .section { padding-top: 2rem; padding-bottom: 2rem; diff --git a/styles/tailwind.css b/styles/tailwind.css index a9a8a272f..d7ff338a4 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -374,7 +374,7 @@ } main .section.product-hero-container { - @apply bg-gray-50 px-2 pt-2 pb-32; + @apply bg-gray-50 px-2 pt-2 pb-32 sm:h-[1140px]; } From 1bd23f854c059856c11dadfee3256fcaea87043e Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 18:28:01 +0530 Subject: [PATCH 61/88] Updated for CLS issue product page --- styles/styles.css | 11 +++++++++-- styles/tailwind.css | 5 ++++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 2d865c961..28f041e15 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1411,6 +1411,7 @@ main .top-border > div.columns-wrapper:first-child { } main .section.product-hero-container { + height: 1140px !important; --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); padding-left: 0.5rem; @@ -1419,9 +1420,15 @@ main .section.product-hero-container { padding-bottom: 8rem; } -@media (min-width: 640px) { +@media (min-width: 1024px) { main .section.product-hero-container { - height: 1140px; + height: auto; + } +} + +@media (min-width: 640px) { + main .section.product-hero-container > div.hero-default-content { + height: 400px !important; } } diff --git a/styles/tailwind.css b/styles/tailwind.css index d7ff338a4..b5b0ca8b2 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -374,9 +374,12 @@ } main .section.product-hero-container { - @apply bg-gray-50 px-2 pt-2 pb-32 sm:h-[1140px]; + @apply bg-gray-50 px-2 pt-2 pb-32 !h-[1140px] lg:h-auto; } + main .section.product-hero-container > div.hero-default-content { + @apply sm:!h-[400px]; + } .category main .section { @apply py-8; From eb911d32bb95e23050b52c04f5d1cd3580db7b74 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 19:17:10 +0530 Subject: [PATCH 62/88] updated for CLS --- blocks/product-hero/product-hero.css | 1039 -------------------------- build-css.js | 5 - styles/styles.css | 314 +++++++- styles/tailwind.css | 6 +- tailwind.config.js | 2 +- 5 files changed, 303 insertions(+), 1063 deletions(-) delete mode 100644 blocks/product-hero/product-hero.css diff --git a/blocks/product-hero/product-hero.css b/blocks/product-hero/product-hero.css deleted file mode 100644 index b1d91cd23..000000000 --- a/blocks/product-hero/product-hero.css +++ /dev/null @@ -1,1039 +0,0 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -.btn-outline-trending-brand { - color: #7523FF; - background-color: rgb(255 255 255); - border-color: #7523FF; - border-width: 2px; -} - -.btn-outline-trending-brand:hover { - color: rgb(255 255 255); - background-color: #7523FF; -} - -.product-hero-wrapper :is(.relative) { - position: relative; -} - -.product-hero-wrapper :is(.order-first) { - order: -9999; -} - -.product-hero-wrapper :is(.col-span-10) { - grid-column: span 10 / span 10; -} - -.product-hero-wrapper :is(.col-span-2) { - grid-column: span 2 / span 2; -} - -.product-hero-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.product-hero-wrapper :is(.-mt-\[21px\]) { - margin-top: -21px; -} - -.product-hero-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.product-hero-wrapper :is(.mb-2\.5) { - margin-bottom: 0.625rem; -} - -.product-hero-wrapper :is(.mb-3) { - margin-bottom: 0.75rem; -} - -.product-hero-wrapper :is(.ml-12) { - margin-left: 3rem; -} - -.product-hero-wrapper :is(.mt-3) { - margin-top: 0.75rem; -} - -.product-hero-wrapper :is(.mt-5) { - margin-top: 1.25rem; -} - -.product-hero-wrapper :is(.mt-8) { - margin-top: 2rem; -} - -.product-hero-wrapper :is(.mt-\[-256px\]) { - margin-top: -256px; -} - -.product-hero-wrapper :is(.block) { - display: block; -} - -.product-hero-wrapper :is(.inline-block) { - display: inline-block; -} - -.product-hero-wrapper :is(.flex) { - display: flex; -} - -.product-hero-wrapper :is(.hidden) { - display: none; -} - -.product-hero-wrapper :is(.h-16) { - height: 4rem; -} - -.product-hero-wrapper :is(.h-4) { - height: 1rem; -} - -.product-hero-wrapper :is(.h-5) { - height: 1.25rem; -} - -.product-hero-wrapper :is(.h-\[17rem\]) { - height: 17rem; -} - -.product-hero-wrapper :is(.h-\[400px\]) { - height: 400px; -} - -.product-hero-wrapper :is(.h-full) { - height: 100%; -} - -.product-hero-wrapper :is(.w-16) { - width: 4rem; -} - -.product-hero-wrapper :is(.w-4) { - width: 1rem; -} - -.product-hero-wrapper :is(.w-5) { - width: 1.25rem; -} - -.product-hero-wrapper :is(.w-\[400px\]) { - width: 400px; -} - -.product-hero-wrapper :is(.w-\[98\%\]) { - width: 98%; -} - -.product-hero-wrapper :is(.w-full) { - width: 100%; -} - -.product-hero-wrapper :is(.max-w-\[400px\]) { - max-width: 400px; -} - -.product-hero-wrapper :is(.shrink-0) { - flex-shrink: 0; -} - -.product-hero-wrapper :is(.cursor-pointer) { - cursor: pointer; -} - -.product-hero-wrapper :is(.snap-x) { - scroll-snap-type: x var(--tw-scroll-snap-strictness); -} - -.product-hero-wrapper :is(.scroll-pl-6) { - scroll-padding-left: 1.5rem; -} - -.product-hero-wrapper :is(.list-disc) { - list-style-type: disc; -} - -.product-hero-wrapper :is(.flex-row) { - flex-direction: row; -} - -.product-hero-wrapper :is(.flex-col) { - flex-direction: column; -} - -.product-hero-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - -.product-hero-wrapper :is(.items-start) { - align-items: flex-start; -} - -.product-hero-wrapper :is(.items-center) { - align-items: center; -} - -.product-hero-wrapper :is(.justify-center) { - justify-content: center; -} - -.product-hero-wrapper :is(.justify-between) { - justify-content: space-between; -} - -.product-hero-wrapper :is(.gap-2) { - gap: 0.5rem; -} - -.product-hero-wrapper :is(.gap-3) { - gap: 0.75rem; -} - -.product-hero-wrapper :is(.gap-x-4) { - -moz-column-gap: 1rem; - column-gap: 1rem; -} - -.product-hero-wrapper :is(.overflow-auto) { - overflow: auto; -} - -.product-hero-wrapper :is(.overflow-hidden) { - overflow: hidden; -} - -.product-hero-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.product-hero-wrapper :is(.rounded-md) { - border-radius: 0.375rem; -} - -.product-hero-wrapper :is(.border-b) { - border-bottom-width: 1px; -} - -.product-hero-wrapper :is(.border-b-2) { - border-bottom-width: 2px; -} - -.product-hero-wrapper :is(.border-danaherpurple-500) { - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); -} - -.product-hero-wrapper :is(.border-gray-300) { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - -.product-hero-wrapper :is(.bg-danaherlightblue-50) { - --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); -} - -.product-hero-wrapper :is(.bg-transparent) { - background-color: transparent; -} - -.product-hero-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.product-hero-wrapper :is(.object-contain) { - -o-object-fit: contain; - object-fit: contain; -} - -.product-hero-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - -.product-hero-wrapper :is(.p-4) { - padding: 1rem; -} - -.product-hero-wrapper :is(.px-3) { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.product-hero-wrapper :is(.px-4) { - padding-left: 1rem; - padding-right: 1rem; -} - -.product-hero-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.product-hero-wrapper :is(.py-3) { - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} - -.product-hero-wrapper :is(.pb-1) { - padding-bottom: 0.25rem; -} - -.product-hero-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - -.product-hero-wrapper :is(.text-left) { - text-align: left; -} - -.product-hero-wrapper :is(.text-center) { - text-align: center; -} - -.product-hero-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - -.product-hero-wrapper :is(.text-lg) { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.product-hero-wrapper :is(.text-sm) { - font-size: 0.875rem; - line-height: 1.25rem; -} - -.product-hero-wrapper :is(.font-bold) { - font-weight: 700; -} - -.product-hero-wrapper :is(.font-medium) { - font-weight: 500; -} - -.product-hero-wrapper :is(.font-normal) { - font-weight: 200; -} - -.product-hero-wrapper :is(.font-semibold) { - font-weight: 700; -} - -.product-hero-wrapper :is(.leading-4) { - line-height: 1rem; -} - -.product-hero-wrapper :is(.leading-5) { - line-height: 1.25rem; -} - -.product-hero-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - -.product-hero-wrapper :is(.leading-tight) { - line-height: 1.25; -} - -.product-hero-wrapper :is(.text-danaherpurple-500) { - --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); -} - -.product-hero-wrapper :is(.text-gray-400) { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -.product-hero-wrapper :is(.text-gray-700) { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.product-hero-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.product-hero-wrapper :is(.\!no-underline) { - text-decoration-line: none !important; -} - -.product-hero-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-hero-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-hero-wrapper :is(.shadow-sm) { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-hero-wrapper :is(.transition) { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.product-hero-wrapper :is(.duration-500) { - transition-duration: 500ms; -} - -.product-hero-wrapper :is(.duration-700) { - transition-duration: 700ms; -} - -.product-hero-wrapper :is(.hover\:border:hover) { - border-width: 1px; -} - -.product-hero-wrapper :is(.hover\:border-danaherpurple-500:hover) { - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); -} - -@media (min-width: 768px) { - .product-hero-wrapper :is(.md\:col-span-6) { - grid-column: span 6 / span 6; - } - - .product-hero-wrapper :is(.md\:flex-row) { - flex-direction: row; - } - - .product-hero-wrapper :is(.md\:gap-12) { - gap: 3rem; - } - - .product-hero-wrapper :is(.md\:shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - } - - .product-hero-wrapper :is(.md\:shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - } -} - -@media (min-width: 1024px) { - .product-hero-wrapper :is(.lg\:order-first) { - order: -9999; - } - - .product-hero-wrapper :is(.lg\:w-20) { - width: 5rem; - } - - .product-hero-wrapper :is(.lg\:w-55) { - width: 14rem; - } - - .product-hero-wrapper :is(.lg\:flex-row) { - flex-direction: row; - } - - .product-hero-wrapper :is(.lg\:flex-col) { - flex-direction: column; - } - - .product-hero-wrapper :is(.lg\:gap-16) { - gap: 4rem; - } -} - -.product-hero-wrapper :is(.\[\&\>\*\.active\>img\]\:border-2>*.active>img) { - border-width: 2px; -} - -.product-hero-wrapper :is(.\[\&\>\*\.active\>img\]\:border-danaherpurple-500>*.active>img) { - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); -} - -.product-hero-wrapper :is(.\[\&\>\*\.active\>img\]\:opacity-80>*.active>img) { - opacity: 0.8; -} - -.product-hero-wrapper :is(.\[\&\>\*\.view-more\]\:h-\[75px\]>*.view-more) { - height: 75px; -} - -.product-hero-wrapper :is(.\[\&\>\*\.view-more\]\:w-\[75px\]>*.view-more) { - width: 75px; -} - -.product-hero-wrapper :is(.\[\&\>\*\.view-more\]\:cursor-pointer>*.view-more) { - cursor: pointer; -} - -.product-hero-wrapper :is(.\[\&\>\*\>img\]\:h-\[75px\]>*>img) { - height: 75px; -} - -.product-hero-wrapper :is(.\[\&\>\*\>img\]\:w-\[75px\]>*>img) { - width: 75px; -} - -.product-hero-wrapper :is(.\[\&\>\*\>img\]\:cursor-pointer>*>img) { - cursor: pointer; -} - -.product-hero-wrapper :is(.\[\&\>picture\]\:w-max>picture) { - width: -moz-max-content; - width: max-content; -} \ No newline at end of file diff --git a/build-css.js b/build-css.js index 9e870410f..e73b66661 100644 --- a/build-css.js +++ b/build-css.js @@ -136,11 +136,6 @@ const fileMappings = [ output: './blocks/product-citations/product-citations.css', wrapper: 'product-citations-wrapper', }, - { - content: './blocks/product-hero/product-hero.js', - output: './blocks/product-hero/product-hero.css', - wrapper: 'product-hero-wrapper', - }, { content: './blocks/product-menu/product-menu.js', output: './blocks/product-menu/product-menu.css', diff --git a/styles/styles.css b/styles/styles.css index 28f041e15..9c08007b1 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -657,6 +657,18 @@ main .default-content-wrapper h2 { } } +.btn-outline-trending-brand { + color: #7523FF; + background-color: rgb(255 255 255); + border-color: #7523FF; + border-width: 2px; +} + +.btn-outline-trending-brand:hover { + color: rgb(255 255 255); + background-color: #7523FF; +} + .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } @@ -851,6 +863,23 @@ main .section.carousel-container { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.btn-outline-trending-brand { + border-width: 2px; + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.btn-outline-trending-brand:hover { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .container-two-col .col-right { font-size: 1rem; line-height: 1.75rem; @@ -1411,7 +1440,6 @@ main .top-border > div.columns-wrapper:first-child { } main .section.product-hero-container { - height: 1140px !important; --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); padding-left: 0.5rem; @@ -1420,18 +1448,6 @@ main .section.product-hero-container { padding-bottom: 8rem; } -@media (min-width: 1024px) { - main .section.product-hero-container { - height: auto; - } -} - -@media (min-width: 640px) { - main .section.product-hero-container > div.hero-default-content { - height: 400px !important; - } -} - .category main .section { padding-top: 2rem; padding-bottom: 2rem; @@ -1692,6 +1708,18 @@ svg symbol path { z-index: 9999; } +.order-first { + order: -9999; +} + +.col-span-10 { + grid-column: span 10 / span 10; +} + +.col-span-2 { + grid-column: span 2 / span 2; +} + .m-0 { margin: 0px; } @@ -1711,14 +1739,30 @@ svg symbol path { margin-bottom: auto; } +.-mt-\[21px\] { + margin-top: -21px; +} + .mb-2 { margin-bottom: 0.5rem; } +.mb-2\.5 { + margin-bottom: 0.625rem; +} + +.mb-3 { + margin-bottom: 0.75rem; +} + .mb-5 { margin-bottom: 1.25rem; } +.ml-12 { + margin-left: 3rem; +} + .ml-2 { margin-left: 0.5rem; } @@ -1747,14 +1791,26 @@ svg symbol path { margin-top: 1rem; } +.mt-5 { + margin-top: 1.25rem; +} + .mt-6 { margin-top: 1.5rem; } +.mt-8 { + margin-top: 2rem; +} + .mt-\[-1px\] { margin-top: -1px; } +.mt-\[-256px\] { + margin-top: -256px; +} + .line-clamp-2 { overflow: hidden; display: -webkit-box; @@ -1766,6 +1822,10 @@ svg symbol path { display: block; } +.inline-block { + display: inline-block; +} + .inline { display: inline; } @@ -1798,6 +1858,10 @@ svg symbol path { height: 2.5rem; } +.h-16 { + height: 4rem; +} + .h-24 { height: 6rem; } @@ -1810,6 +1874,18 @@ svg symbol path { height: 12rem; } +.h-5 { + height: 1.25rem; +} + +.h-\[17rem\] { + height: 17rem; +} + +.h-\[400px\] { + height: 400px; +} + .h-full { height: 100%; } @@ -1818,6 +1894,10 @@ svg symbol path { width: 2.5rem; } +.w-16 { + width: 4rem; +} + .w-24 { width: 6rem; } @@ -1826,10 +1906,22 @@ svg symbol path { width: 1rem; } +.w-5 { + width: 1.25rem; +} + .w-8\/12 { width: 66.666667%; } +.w-\[400px\] { + width: 400px; +} + +.w-\[98\%\] { + width: 98%; +} + .w-auto { width: auto; } @@ -1842,6 +1934,10 @@ svg symbol path { max-width: 80rem; } +.max-w-\[400px\] { + max-width: 400px; +} + .max-w-md { max-width: 28rem; } @@ -1858,6 +1954,10 @@ svg symbol path { flex-shrink: 0; } +.shrink-0 { + flex-shrink: 0; +} + .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @@ -1888,10 +1988,22 @@ svg symbol path { --tw-scroll-snap-strictness: mandatory; } +.scroll-pl-6 { + scroll-padding-left: 1.5rem; +} + +.list-disc { + list-style-type: disc; +} + .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } +.flex-row { + flex-direction: row; +} + .flex-col { flex-direction: column; } @@ -1900,6 +2012,10 @@ svg symbol path { flex-wrap: wrap; } +.items-start { + align-items: flex-start; +} + .items-center { align-items: center; } @@ -1920,10 +2036,19 @@ svg symbol path { gap: 0.5rem; } +.gap-3 { + gap: 0.75rem; +} + .gap-4 { gap: 1rem; } +.gap-x-4 { + -moz-column-gap: 1rem; + column-gap: 1rem; +} + .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; @@ -1939,6 +2064,10 @@ svg symbol path { margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } +.overflow-auto { + overflow: auto; +} + .overflow-hidden { overflow: hidden; } @@ -1985,6 +2114,14 @@ svg symbol path { border-width: 2px; } +.border-b { + border-bottom-width: 1px; +} + +.border-b-2 { + border-bottom-width: 2px; +} + .border-danaherpurple-500 { --tw-border-opacity: 1; border-color: rgb(117 35 255 / var(--tw-border-opacity)); @@ -2025,6 +2162,10 @@ svg symbol path { background-color: rgb(254 242 242 / var(--tw-bg-opacity)); } +.bg-transparent { + background-color: transparent; +} + .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -2042,6 +2183,11 @@ svg symbol path { stroke: #fff; } +.object-contain { + -o-object-fit: contain; + object-fit: contain; +} + .object-cover { -o-object-fit: cover; object-fit: cover; @@ -2068,6 +2214,11 @@ svg symbol path { padding-right: 0.25rem; } +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -2107,6 +2258,10 @@ svg symbol path { padding-bottom: 0px; } +.pb-1 { + padding-bottom: 0.25rem; +} + .pb-10 { padding-bottom: 2.5rem; } @@ -2135,6 +2290,10 @@ svg symbol path { text-align: left; } +.text-center { + text-align: center; +} + .align-middle { vertical-align: middle; } @@ -2162,6 +2321,11 @@ svg symbol path { line-height: 1.5rem; } +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + .text-sm { font-size: 0.875rem; line-height: 1.25rem; @@ -2196,6 +2360,10 @@ svg symbol path { text-transform: uppercase; } +.leading-4 { + line-height: 1rem; +} + .leading-5 { line-height: 1.25rem; } @@ -2204,6 +2372,10 @@ svg symbol path { line-height: 1.5rem; } +.leading-tight { + line-height: 1.25; +} + .tracking-tight { letter-spacing: -0.025em; } @@ -2222,6 +2394,11 @@ svg symbol path { color: rgb(117 35 255 / var(--tw-text-opacity)); } +.text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); @@ -2262,6 +2439,10 @@ svg symbol path { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.\!no-underline { + text-decoration-line: none !important; +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2315,6 +2496,14 @@ svg symbol path { transition-duration: 150ms; } +.duration-500 { + transition-duration: 500ms; +} + +.duration-700 { + transition-duration: 700ms; +} + main .section.top-border { margin: auto; margin-top: 2.5rem; @@ -2344,6 +2533,15 @@ main .section.top-border { color: rgb(55 65 81 / var(--tw-text-opacity)); } +.hover\:border:hover { + border-width: 1px; +} + +.hover\:border-danaherpurple-500:hover { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + .hover\:bg-danaherpurple-800:hover { --tw-bg-opacity: 1; background-color: rgb(64 0 165 / var(--tw-bg-opacity)); @@ -2412,10 +2610,22 @@ main .section.top-border { } @media (min-width: 768px) { + .md\:col-span-6 { + grid-column: span 6 / span 6; + } + .md\:mt-4 { margin-top: 1rem; } + .md\:flex-row { + flex-direction: row; + } + + .md\:gap-12 { + gap: 3rem; + } + .md\:pb-10 { padding-bottom: 2.5rem; } @@ -2423,9 +2633,25 @@ main .section.top-border { .md\:pb-24 { padding-bottom: 6rem; } + + .md\:shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .md\:shadow-none { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } } @media (min-width: 1024px) { + .lg\:order-first { + order: -9999; + } + .lg\:col-span-3 { grid-column: span 3 / span 3; } @@ -2446,6 +2672,14 @@ main .section.top-border { width: 66.666667%; } + .lg\:w-20 { + width: 5rem; + } + + .lg\:w-55 { + width: 14rem; + } + .lg\:max-w-7xl { max-width: 80rem; } @@ -2454,6 +2688,18 @@ main .section.top-border { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .lg\:flex-row { + flex-direction: row; + } + + .lg\:flex-col { + flex-direction: column; + } + + .lg\:gap-16 { + gap: 4rem; + } + .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; @@ -2482,6 +2728,48 @@ main .section.top-border { } } +.\[\&\>\*\.active\>img\]\:border-2>*.active>img { + border-width: 2px; +} + +.\[\&\>\*\.active\>img\]\:border-danaherpurple-500>*.active>img { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +.\[\&\>\*\.active\>img\]\:opacity-80>*.active>img { + opacity: 0.8; +} + +.\[\&\>\*\.view-more\]\:h-\[75px\]>*.view-more { + height: 75px; +} + +.\[\&\>\*\.view-more\]\:w-\[75px\]>*.view-more { + width: 75px; +} + +.\[\&\>\*\.view-more\]\:cursor-pointer>*.view-more { + cursor: pointer; +} + +.\[\&\>\*\>img\]\:h-\[75px\]>*>img { + height: 75px; +} + +.\[\&\>\*\>img\]\:w-\[75px\]>*>img { + width: 75px; +} + +.\[\&\>\*\>img\]\:cursor-pointer>*>img { + cursor: pointer; +} + +.\[\&\>picture\]\:w-max>picture { + width: -moz-max-content; + width: max-content; +} + @media (min-width: 768px) { .\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper { max-width: 80rem; diff --git a/styles/tailwind.css b/styles/tailwind.css index b5b0ca8b2..d7caca23f 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -374,11 +374,7 @@ } main .section.product-hero-container { - @apply bg-gray-50 px-2 pt-2 pb-32 !h-[1140px] lg:h-auto; - } - - main .section.product-hero-container > div.hero-default-content { - @apply sm:!h-[400px]; + @apply bg-gray-50 px-2 pt-2 pb-32; } .category main .section { diff --git a/tailwind.config.js b/tailwind.config.js index 3a14efc7e..941dad3c5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,7 +3,7 @@ const plugin = require('tailwindcss/plugin'); const wrapper = (process.env.IMPORTANT_WRAPPER && process.env.IMPORTANT_WRAPPER !== '.undefined') ? process.env.IMPORTANT_WRAPPER : false; module.exports = { important: wrapper, - content: ['./scripts/*.js', '!./scripts/at-lsig.js', './404.html'], // https://tailwindcss.com/docs/content-configuration#class-detection-in-depth + content: ['./blocks/product-hero/product-hero.js','./scripts/*.js', '!./scripts/at-lsig.js', './404.html'], // https://tailwindcss.com/docs/content-configuration#class-detection-in-depth darkMode: 'media', // or 'media' or 'class' plugins: [ plugin(function ({ addComponents, theme }) { From 56ba0854bd9e8df5fead5b45e498688ad38fc3e7 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 19:27:01 +0530 Subject: [PATCH 63/88] exception of css --- scripts/lib-franklin-dev.js | 6 +++++- scripts/lib-franklin.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/scripts/lib-franklin-dev.js b/scripts/lib-franklin-dev.js index e132722b3..2c7decdc8 100644 --- a/scripts/lib-franklin-dev.js +++ b/scripts/lib-franklin-dev.js @@ -534,6 +534,9 @@ function getBlockConfig(block) { .reduce((config, fn) => fn(config, original), { blockName, jsPath, cssPath }); } +const blockNames = new Set(); +blockNames.add('product-hero'); + /** * Loads JS and CSS for a block. * @param {Element} block The block element @@ -544,7 +547,8 @@ export async function loadBlock(block) { block.dataset.blockStatus = 'loading'; const { blockName, jsPath, cssPath } = getBlockConfig(block); try { - await loadModule(blockName, jsPath, cssPath, block); + if(blockNames.contains(blockName)) await loadModule(blockName, jsPath, undefined, block); + else await loadModule(blockName, jsPath, cssPath, block); } catch (error) { // eslint-disable-next-line no-console console.log(`failed to load block ${blockName}`, error); diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js index f8dabc640..c3fb6661f 100644 --- a/scripts/lib-franklin.js +++ b/scripts/lib-franklin.js @@ -1 +1 @@ -function sampleRUM(e,t={}){sampleRUM.defer=sampleRUM.defer||[];var a,o,n,l,s,r,i,c,d,u=t=>{sampleRUM[t]=sampleRUM[t]||((...e)=>sampleRUM.defer.push({fnname:t,args:e}))};sampleRUM.drain=sampleRUM.drain||((t,e)=>{sampleRUM[t]=e,sampleRUM.defer.filter(({fnname:e})=>t===e).forEach(({fnname:e,args:t})=>sampleRUM[e](...t))}),sampleRUM.always=sampleRUM.always||[],sampleRUM.always.on=(e,t)=>{sampleRUM.always[e]=t},sampleRUM.on=(e,t)=>{sampleRUM.cases[e]=t},u("observe"),u("cwv");try{window.hlx=window.hlx||{},window.hlx.rum||(a="on"===new URLSearchParams(window.location.search).get("rum")?1:20,o=Array.from({length:75},(e,t)=>String.fromCharCode(48+t)).filter(e=>/\d|[A-Z]/i.test(e)).filter(()=>70<75*Math.random()).join(""),l=(n=Math.random())*a<1,s=Date.now(),r={full:()=>window.location.href,origin:()=>window.location.origin,path:()=>window.location.href.replace(/\?.*$/,"")},window.hlx.rum={weight:a,id:o,random:n,isSelected:l,firstReadTime:s,sampleRUM:sampleRUM,sanitizeURL:r[window.hlx.RUM_MASK_URL||"path"]});const{weight:m,id:p,firstReadTime:h}=window.hlx.rum;if(window.hlx&&window.hlx.rum&&window.hlx.rum.isSelected){const w=["weight","id","referer","checkpoint","t","source","target","cwv","CLS","FID","LCP","INP"];sampleRUM.cases=sampleRUM.cases||{cwv:()=>sampleRUM.cwv(t)||!0,lazy:()=>{var e=document.createElement("script");return e.src="https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js",document.head.appendChild(e),!0}},[i=t]=[t],c=JSON.stringify({weight:m,id:p,referer:window.hlx.rum.sanitizeURL(),checkpoint:e,t:Date.now()-h,...t},w),d="https://rum.hlx.page/.rum/"+m,navigator.sendBeacon(d,c),console.debug("ping:"+e,i),sampleRUM.cases[e]&&sampleRUM.cases[e]()}sampleRUM.always[e]&&sampleRUM.always[e](t)}catch(e){}}async function loadCSS(o){return new Promise((e,t)=>{var a;document.querySelector(`head > link[href="${o}"]`)?e():((a=document.createElement("link")).rel="stylesheet",a.href=o,a.onload=e,a.onerror=t,document.head.append(a))})}async function loadScript(n,l){return new Promise((e,t)=>{if(document.querySelector(`head > script[src="${n}"]`))e();else{var a=document.createElement("script");if(a.src=n,l)for(const o in l)a.setAttribute(o,l[o]);a.onload=e,a.onerror=t,document.head.append(a)}})}function getMetadata(e){var t=e&&e.includes(":")?"property":"name";return[...document.head.querySelectorAll(`meta[${t}="${e}"]`)].map(e=>e.content).join(", ")||""}function toClassName(e){return"string"==typeof e?e.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}function toCamelCase(e){return toClassName(e).replace(/-([a-z])/g,e=>e[1].toUpperCase())}function getAllMetadata(a){return[...document.head.querySelectorAll(`meta[property^="${a}:"],meta[name^="${a}-"]`)].reduce((e,t)=>{return e[toClassName(t.name?t.name.substring(a.length+1):t.getAttribute("property").split(":")[1])]=t.getAttribute("content"),e},{})}const ICONS_CACHE={};async function decorateIcons(e){let t=document.getElementById("franklin-svg-sprite");t||((a=document.createElement("div")).innerHTML='<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>',t=a.firstElementChild,document.body.append(a.firstElementChild));var a=[...e.querySelectorAll("span.icon")],e=(await Promise.all(a.map(async t=>{t=Array.from(t.classList).find(e=>e.startsWith("icon-")).substring(5);if(!ICONS_CACHE[t]){ICONS_CACHE[t]=!0;try{let e=window.hlx.codeBasePath+`/icons/${t}.svg`;t.startsWith("dam-")&&(a=window.location.hostname.includes("lifesciences.danaher.com"),e=a?"":"https://lifesciences.danaher.com",e+=`/content/dam/danaher/system/icons/${t.substring(4).replace("_"," ")}.svg`);var a,o,n=await fetch(e);n.ok?(o=await n.text()).match(/(<style | class=)/)?ICONS_CACHE[t]={styled:!0,html:o}:ICONS_CACHE[t]={html:o.replace("<svg",`<symbol id="icons-sprite-${t}"`).replace(/ width=".*?"/,"").replace(/ height=".*?"/,"").replace("</svg>","</symbol>")}:ICONS_CACHE[t]=!1}catch(e){ICONS_CACHE[t]=!1,console.error(e)}}})),Object.keys(ICONS_CACHE).filter(e=>!t.querySelector("#icons-sprite-"+e)).map(e=>ICONS_CACHE[e]).filter(e=>!e.styled).map(e=>e.html).join("\n"));t.innerHTML+=e,a.forEach(e=>{var t=Array.from(e.classList).find(e=>e.startsWith("icon-")).substring(5),e="A"===e.firstElementChild?.tagName?e.firstElementChild:e;ICONS_CACHE[t].styled?e.innerHTML=ICONS_CACHE[t].html:e.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${t}"/></svg>`})}async function fetchPlaceholders(o="default"){return window.placeholders=window.placeholders||{},window.placeholders[o+"-loaded"]||(window.placeholders[o+"-loaded"]=new Promise((a,t)=>{fetch(`${"default"===o?"":o}/placeholders.json`).then(e=>{if(e.ok)return e.json();throw new Error(e.status+": "+e.statusText)}).then(e=>{const t={};e.data.filter(e=>e.Key).forEach(e=>{t[toCamelCase(e.Key)]=e.Text}),window.placeholders[o]=t,a()}).catch(e=>{window.placeholders[o]={},t(e)})})),await window.placeholders[o+"-loaded"],window.placeholders[o]}function decorateBlock(e){var t=e.classList[0];t&&(e.classList.add("block"),e.dataset.blockName=t,e.dataset.blockStatus="initialized",e.parentElement.classList.add(t+"-wrapper"),e=e.closest(".section"))&&e.classList.add(t+"-container")}function readBlockConfig(e){const l={};return e.querySelectorAll(":scope > div").forEach(t=>{if(t.children){var a=[...t.children];if(a[1]){var o,n=a[1],a=toClassName(a[0].textContent);let e="";e=n.querySelector("a")?1===(o=[...n.querySelectorAll("a")]).length?o[0].href:o.map(e=>e.href):n.querySelector("img")?1===(o=[...n.querySelectorAll("img")]).length?o[0].src:o.map(e=>e.src):n.querySelector("p")?1===(o=[...n.querySelectorAll("p")]).length?o[0].textContent:o.map(e=>e.textContent):t.children[1].textContent,l[a]=e}}}),l}function decorateSections(e){e.querySelectorAll(":scope > div").forEach(t=>{const a=[];let o=!1;[...t.children].forEach(e=>{var t;"DIV"!==e.tagName&&o||(t=document.createElement("div"),a.push(t),(o="DIV"!==e.tagName)&&t.classList.add("default-content-wrapper")),a[a.length-1].append(e)}),a.forEach(e=>t.append(e)),t.classList.add("section"),t.dataset.sectionStatus="initialized",t.style.display="none";var e=t.querySelector("div.section-metadata");if(e){const n=readBlockConfig(e);Object.keys(n).forEach(e=>{"style"===e?n.style.split(",").map(e=>toClassName(e.trim())).forEach(e=>t.classList.add(e)):t.dataset[toCamelCase(e)]=n[e]}),e.parentNode.remove()}})}function updateSectionsStatus(e){var t=[...e.querySelectorAll(":scope > div.section")];for(let e=0;e<t.length;e+=1){var a=t[e];if("loaded"!==a.dataset.sectionStatus){if(a.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]')){a.dataset.sectionStatus="loading";break}a.dataset.sectionStatus="loaded",a.style.display=null}}}function decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(decorateBlock)}function buildBlock(e,t){t=Array.isArray(t)?t:[[t]];const o=document.createElement("div");return o.classList.add(e),t.forEach(e=>{const a=document.createElement("div");e.forEach(e=>{const t=document.createElement("div");(e.elems||[e]).forEach(e=>{e&&("string"==typeof e?t.innerHTML+=e:t.appendChild(e))}),a.appendChild(t)}),o.appendChild(a)}),o}async function loadModule(a,o,e,...n){var e=e?loadCSS(e):Promise.resolve(),t=o?new Promise(t=>{(async()=>{let e;try{(e=await import(o)).default&&await e.default.apply(null,n)}catch(e){console.log("failed to load module for "+a,e)}t(e)})()}):Promise.resolve();return Promise.all([e,t]).then(([,e])=>e)}function getBlockConfig(e){var e=e.dataset["blockName"],t=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.js`:"",a=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.css`:"";const o={blockName:e,jsPath:t};return(window.hlx.patchBlockConfig||[]).filter(e=>"function"==typeof e).reduce((e,t)=>t(e,o),{blockName:e,jsPath:t,cssPath:a})}async function loadBlock(e){var t=e.dataset.blockStatus;if("loading"!==t&&"loaded"!==t){e.dataset.blockStatus="loading";var{blockName:t,jsPath:a,cssPath:o}=getBlockConfig(e);try{await loadModule(t,a,o,e)}catch(e){console.log("failed to load block "+t,e)}e.dataset.blockStatus="loaded"}}async function loadBlocks(t){updateSectionsStatus(t);var a=[...t.querySelectorAll("div.block")];for(let e=0;e<a.length;e+=1)await loadBlock(a[e]),updateSectionsStatus(t)}function createOptimizedPicture(e,a="",o=!1,n=[{media:"(min-width: 600px)",width:"2000"},{width:"750"}]){e=new URL(e,window.location.href);const l=document.createElement("picture"),s=e["pathname"],r=s.substring(s.lastIndexOf(".")+1);return n.forEach(e=>{var t=document.createElement("source");e.media&&t.setAttribute("media",e.media),t.setAttribute("type","image/webp"),t.setAttribute("srcset",`${s}?width=${e.width}&format=webply&optimize=medium`),l.appendChild(t)}),n.forEach((e,t)=>{t<n.length-1?(t=document.createElement("source"),e.media&&t.setAttribute("media",e.media),t.setAttribute("srcset",`${s}?width=${e.width}&format=${r}&optimize=medium`),l.appendChild(t)):((t=document.createElement("img")).setAttribute("loading",o?"eager":"lazy"),t.setAttribute("alt",a),l.appendChild(t),t.setAttribute("src",`${s}?width=${e.width}&format=${r}&optimize=medium`))}),l}function normalizeHeadings(e,t){const o=t.map(e=>e.toLowerCase());e.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(t=>{var a=t.tagName.toLowerCase();if(-1===o.indexOf(a)){let e=parseInt(a.charAt(1),10)-1;for(;-1===o.indexOf("h"+e)&&0<e;)--e;if(0===e)for(;-1===o.indexOf("h"+e)&&e<7;)e+=1;7!==e&&(t.outerHTML=`<h${e} id="${t.id}">${t.textContent}</h${e}>`)}})}function decorateTemplateAndTheme(){var e=(t,e)=>{e.split(",").forEach(e=>{t.classList.add(toClassName(e.trim()))})},t=getMetadata("template"),t=(t&&e(document.body,t),getMetadata("theme"));t&&e(document.body,t)}function decorateButtons(e){e.querySelectorAll("a").forEach(e=>{var t,a;e.title=e.title||e.textContent,e.href!==e.textContent&&"link"!==e.title&&(t=e.parentElement,a=e.parentElement.parentElement,e.querySelector("img")||"LI"===a.tagName||e.closest(".call-to-action")||e.closest(".mini-teasers")||e.closest(".bg-color-right")||(1!==t.childNodes.length||"P"!==t.tagName&&"DIV"!==t.tagName||(e.className="btn btn-outline-primary",t.classList.add("button-container")),1===t.childNodes.length&&"STRONG"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-primary",a.classList.add("button-container")),1===t.childNodes.length&&"EM"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-secondary",a.classList.add("button-container"))))})}async function waitForLCP(e){var t=document.querySelector(".block");t&&e.includes(t.dataset.blockName)&&await loadBlock(t),document.body.style.display=null;const a=document.querySelector("main img");await new Promise(e=>{a&&!a.complete?(a.setAttribute("loading","eager"),a.addEventListener("load",e),a.addEventListener("error",e)):e()})}function loadHeader(e){var t=buildBlock("header","");return e.append(t),decorateBlock(t),loadBlock(t)}function loadFooter(e){var t=buildBlock("footer","");return e.append(t),decorateBlock(t),loadBlock(t)}function parsePluginParams(e,t){var a=t?e:e.split("/").splice(e.endsWith("/")?-2:-1,1)[0].replace(/\.js/,""),t={load:"eager",..."string"!=typeof t&&t?t:{url:(t||e).replace(/\/$/,"")}};return t.options||={},{id:a,config:t}}const executionContext={createOptimizedPicture:createOptimizedPicture,getAllMetadata:getAllMetadata,getMetadata:getMetadata,decorateBlock:decorateBlock,decorateButtons:decorateButtons,decorateIcons:decorateIcons,loadBlock:loadBlock,loadCSS:loadCSS,loadScript:loadScript,sampleRUM:sampleRUM,toCamelCase:toCamelCase,toClassName:toClassName};class PluginsRegistry{#plugins;constructor(){this.#plugins=new Map}add(e,t){var{id:e,config:t}=parsePluginParams(e,t);this.#plugins.set(e,t)}get(e){return this.#plugins.get(e)}includes(e){return!!this.#plugins.has(e)}async load(t){return[...this.#plugins.entries()].filter(([,e])=>e.condition&&!e.condition(document,e.options,executionContext)).map(([e])=>this.#plugins.delete(e)),Promise.all([...this.#plugins.entries()].filter(([,e])=>(!e.condition||e.condition(document,e.options,executionContext))&&t===e.load&&e.url).map(async([t,e])=>{try{var a=await loadModule(t,e.url.endsWith(".js")?e.url:e.url+`/${t}.js`,e.url.endsWith(".js")?null:e.url+`/${t}.css`,document,e.options,executionContext)||{};this.#plugins.set(t,{...e,...a})}catch(e){console.error("Could not load specified plugin",t)}}))}async run(a){return[...this.#plugins.values()].reduce((e,t)=>!t[a]||t.condition&&!t.condition(document,t.options,executionContext)?e:e.then(()=>t[a](document,t.options,executionContext)),Promise.resolve())}}class TemplatesRegistry{add(e,t){if(Array.isArray(e))e.forEach(e=>window.hlx.templates.add(e));else{const{id:a,config:o}=parsePluginParams(e,t);o.condition=()=>toClassName(getMetadata("template"))===a,window.hlx.plugins.add(a,o)}}get(e){return window.hlx.plugins.get(e)}includes(e){return window.hlx.plugins.includes(e)}}function setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse="on"===new URLSearchParams(window.location.search).get("lighthouse"),window.hlx.patchBlockConfig=[],window.hlx.plugins=new PluginsRegistry,window.hlx.templates=new TemplatesRegistry;var e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(e){console.log(e)}}function init(){setup(),sampleRUM("top"),window.addEventListener("load",()=>sampleRUM("load")),window.addEventListener("unhandledrejection",e=>{sampleRUM("error",{source:e.reason.sourceURL,target:e.reason.line})}),window.addEventListener("error",e=>{sampleRUM("error",{source:e.filename,target:e.lineno})})}init();export{sampleRUM,loadCSS,loadScript,getMetadata,toClassName,toCamelCase,getAllMetadata,decorateIcons,fetchPlaceholders,decorateBlock,readBlockConfig,decorateSections,updateSectionsStatus,decorateBlocks,buildBlock,loadBlock,loadBlocks,createOptimizedPicture,normalizeHeadings,decorateTemplateAndTheme,decorateButtons,waitForLCP,loadHeader,loadFooter,executionContext,setup}; \ No newline at end of file +function sampleRUM(e,t={}){sampleRUM.defer=sampleRUM.defer||[];var a,o,n,l,s,r,i,c,d,u=t=>{sampleRUM[t]=sampleRUM[t]||((...e)=>sampleRUM.defer.push({fnname:t,args:e}))};sampleRUM.drain=sampleRUM.drain||((t,e)=>{sampleRUM[t]=e,sampleRUM.defer.filter(({fnname:e})=>t===e).forEach(({fnname:e,args:t})=>sampleRUM[e](...t))}),sampleRUM.always=sampleRUM.always||[],sampleRUM.always.on=(e,t)=>{sampleRUM.always[e]=t},sampleRUM.on=(e,t)=>{sampleRUM.cases[e]=t},u("observe"),u("cwv");try{window.hlx=window.hlx||{},window.hlx.rum||(a="on"===new URLSearchParams(window.location.search).get("rum")?1:20,o=Array.from({length:75},(e,t)=>String.fromCharCode(48+t)).filter(e=>/\d|[A-Z]/i.test(e)).filter(()=>70<75*Math.random()).join(""),l=(n=Math.random())*a<1,s=Date.now(),r={full:()=>window.location.href,origin:()=>window.location.origin,path:()=>window.location.href.replace(/\?.*$/,"")},window.hlx.rum={weight:a,id:o,random:n,isSelected:l,firstReadTime:s,sampleRUM:sampleRUM,sanitizeURL:r[window.hlx.RUM_MASK_URL||"path"]});const{weight:m,id:p,firstReadTime:h}=window.hlx.rum;if(window.hlx&&window.hlx.rum&&window.hlx.rum.isSelected){const w=["weight","id","referer","checkpoint","t","source","target","cwv","CLS","FID","LCP","INP"];sampleRUM.cases=sampleRUM.cases||{cwv:()=>sampleRUM.cwv(t)||!0,lazy:()=>{var e=document.createElement("script");return e.src="https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js",document.head.appendChild(e),!0}},[i=t]=[t],c=JSON.stringify({weight:m,id:p,referer:window.hlx.rum.sanitizeURL(),checkpoint:e,t:Date.now()-h,...t},w),d="https://rum.hlx.page/.rum/"+m,navigator.sendBeacon(d,c),console.debug("ping:"+e,i),sampleRUM.cases[e]&&sampleRUM.cases[e]()}sampleRUM.always[e]&&sampleRUM.always[e](t)}catch(e){}}async function loadCSS(o){return new Promise((e,t)=>{var a;document.querySelector(`head > link[href="${o}"]`)?e():((a=document.createElement("link")).rel="stylesheet",a.href=o,a.onload=e,a.onerror=t,document.head.append(a))})}async function loadScript(n,l){return new Promise((e,t)=>{if(document.querySelector(`head > script[src="${n}"]`))e();else{var a=document.createElement("script");if(a.src=n,l)for(const o in l)a.setAttribute(o,l[o]);a.onload=e,a.onerror=t,document.head.append(a)}})}function getMetadata(e){var t=e&&e.includes(":")?"property":"name";return[...document.head.querySelectorAll(`meta[${t}="${e}"]`)].map(e=>e.content).join(", ")||""}function toClassName(e){return"string"==typeof e?e.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}function toCamelCase(e){return toClassName(e).replace(/-([a-z])/g,e=>e[1].toUpperCase())}function getAllMetadata(a){return[...document.head.querySelectorAll(`meta[property^="${a}:"],meta[name^="${a}-"]`)].reduce((e,t)=>{return e[toClassName(t.name?t.name.substring(a.length+1):t.getAttribute("property").split(":")[1])]=t.getAttribute("content"),e},{})}const ICONS_CACHE={};async function decorateIcons(e){let t=document.getElementById("franklin-svg-sprite");t||((a=document.createElement("div")).innerHTML='<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>',t=a.firstElementChild,document.body.append(a.firstElementChild));var a=[...e.querySelectorAll("span.icon")],e=(await Promise.all(a.map(async t=>{t=Array.from(t.classList).find(e=>e.startsWith("icon-")).substring(5);if(!ICONS_CACHE[t]){ICONS_CACHE[t]=!0;try{let e=window.hlx.codeBasePath+`/icons/${t}.svg`;t.startsWith("dam-")&&(a=window.location.hostname.includes("lifesciences.danaher.com"),e=a?"":"https://lifesciences.danaher.com",e+=`/content/dam/danaher/system/icons/${t.substring(4).replace("_"," ")}.svg`);var a,o,n=await fetch(e);n.ok?(o=await n.text()).match(/(<style | class=)/)?ICONS_CACHE[t]={styled:!0,html:o}:ICONS_CACHE[t]={html:o.replace("<svg",`<symbol id="icons-sprite-${t}"`).replace(/ width=".*?"/,"").replace(/ height=".*?"/,"").replace("</svg>","</symbol>")}:ICONS_CACHE[t]=!1}catch(e){ICONS_CACHE[t]=!1,console.error(e)}}})),Object.keys(ICONS_CACHE).filter(e=>!t.querySelector("#icons-sprite-"+e)).map(e=>ICONS_CACHE[e]).filter(e=>!e.styled).map(e=>e.html).join("\n"));t.innerHTML+=e,a.forEach(e=>{var t=Array.from(e.classList).find(e=>e.startsWith("icon-")).substring(5),e="A"===e.firstElementChild?.tagName?e.firstElementChild:e;ICONS_CACHE[t].styled?e.innerHTML=ICONS_CACHE[t].html:e.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${t}"/></svg>`})}async function fetchPlaceholders(o="default"){return window.placeholders=window.placeholders||{},window.placeholders[o+"-loaded"]||(window.placeholders[o+"-loaded"]=new Promise((a,t)=>{fetch(`${"default"===o?"":o}/placeholders.json`).then(e=>{if(e.ok)return e.json();throw new Error(e.status+": "+e.statusText)}).then(e=>{const t={};e.data.filter(e=>e.Key).forEach(e=>{t[toCamelCase(e.Key)]=e.Text}),window.placeholders[o]=t,a()}).catch(e=>{window.placeholders[o]={},t(e)})})),await window.placeholders[o+"-loaded"],window.placeholders[o]}function decorateBlock(e){var t=e.classList[0];t&&(e.classList.add("block"),e.dataset.blockName=t,e.dataset.blockStatus="initialized",e.parentElement.classList.add(t+"-wrapper"),e=e.closest(".section"))&&e.classList.add(t+"-container")}function readBlockConfig(e){const l={};return e.querySelectorAll(":scope > div").forEach(t=>{if(t.children){var a=[...t.children];if(a[1]){var o,n=a[1],a=toClassName(a[0].textContent);let e="";e=n.querySelector("a")?1===(o=[...n.querySelectorAll("a")]).length?o[0].href:o.map(e=>e.href):n.querySelector("img")?1===(o=[...n.querySelectorAll("img")]).length?o[0].src:o.map(e=>e.src):n.querySelector("p")?1===(o=[...n.querySelectorAll("p")]).length?o[0].textContent:o.map(e=>e.textContent):t.children[1].textContent,l[a]=e}}}),l}function decorateSections(e){e.querySelectorAll(":scope > div").forEach(t=>{const a=[];let o=!1;[...t.children].forEach(e=>{var t;"DIV"!==e.tagName&&o||(t=document.createElement("div"),a.push(t),(o="DIV"!==e.tagName)&&t.classList.add("default-content-wrapper")),a[a.length-1].append(e)}),a.forEach(e=>t.append(e)),t.classList.add("section"),t.dataset.sectionStatus="initialized",t.style.display="none";var e=t.querySelector("div.section-metadata");if(e){const n=readBlockConfig(e);Object.keys(n).forEach(e=>{"style"===e?n.style.split(",").map(e=>toClassName(e.trim())).forEach(e=>t.classList.add(e)):t.dataset[toCamelCase(e)]=n[e]}),e.parentNode.remove()}})}function updateSectionsStatus(e){var t=[...e.querySelectorAll(":scope > div.section")];for(let e=0;e<t.length;e+=1){var a=t[e];if("loaded"!==a.dataset.sectionStatus){if(a.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]')){a.dataset.sectionStatus="loading";break}a.dataset.sectionStatus="loaded",a.style.display=null}}}function decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(decorateBlock)}function buildBlock(e,t){t=Array.isArray(t)?t:[[t]];const o=document.createElement("div");return o.classList.add(e),t.forEach(e=>{const a=document.createElement("div");e.forEach(e=>{const t=document.createElement("div");(e.elems||[e]).forEach(e=>{e&&("string"==typeof e?t.innerHTML+=e:t.appendChild(e))}),a.appendChild(t)}),o.appendChild(a)}),o}async function loadModule(a,o,e,...n){var e=e?loadCSS(e):Promise.resolve(),t=o?new Promise(t=>{(async()=>{let e;try{(e=await import(o)).default&&await e.default.apply(null,n)}catch(e){console.log("failed to load module for "+a,e)}t(e)})()}):Promise.resolve();return Promise.all([e,t]).then(([,e])=>e)}function getBlockConfig(e){var e=e.dataset["blockName"],t=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.js`:"",a=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.css`:"";const o={blockName:e,jsPath:t};return(window.hlx.patchBlockConfig||[]).filter(e=>"function"==typeof e).reduce((e,t)=>t(e,o),{blockName:e,jsPath:t,cssPath:a})}const blockNames=new Set;async function loadBlock(e){var t=e.dataset.blockStatus;if("loading"!==t&&"loaded"!==t){e.dataset.blockStatus="loading";var{blockName:t,jsPath:a,cssPath:o}=getBlockConfig(e);try{blockNames.contains(t)?await loadModule(t,a,void 0,e):await loadModule(t,a,o,e)}catch(e){console.log("failed to load block "+t,e)}e.dataset.blockStatus="loaded"}}async function loadBlocks(t){updateSectionsStatus(t);var a=[...t.querySelectorAll("div.block")];for(let e=0;e<a.length;e+=1)await loadBlock(a[e]),updateSectionsStatus(t)}function createOptimizedPicture(e,a="",o=!1,n=[{media:"(min-width: 600px)",width:"2000"},{width:"750"}]){e=new URL(e,window.location.href);const l=document.createElement("picture"),s=e["pathname"],r=s.substring(s.lastIndexOf(".")+1);return n.forEach(e=>{var t=document.createElement("source");e.media&&t.setAttribute("media",e.media),t.setAttribute("type","image/webp"),t.setAttribute("srcset",`${s}?width=${e.width}&format=webply&optimize=medium`),l.appendChild(t)}),n.forEach((e,t)=>{t<n.length-1?(t=document.createElement("source"),e.media&&t.setAttribute("media",e.media),t.setAttribute("srcset",`${s}?width=${e.width}&format=${r}&optimize=medium`),l.appendChild(t)):((t=document.createElement("img")).setAttribute("loading",o?"eager":"lazy"),t.setAttribute("alt",a),l.appendChild(t),t.setAttribute("src",`${s}?width=${e.width}&format=${r}&optimize=medium`))}),l}function normalizeHeadings(e,t){const o=t.map(e=>e.toLowerCase());e.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(t=>{var a=t.tagName.toLowerCase();if(-1===o.indexOf(a)){let e=parseInt(a.charAt(1),10)-1;for(;-1===o.indexOf("h"+e)&&0<e;)--e;if(0===e)for(;-1===o.indexOf("h"+e)&&e<7;)e+=1;7!==e&&(t.outerHTML=`<h${e} id="${t.id}">${t.textContent}</h${e}>`)}})}function decorateTemplateAndTheme(){var e=(t,e)=>{e.split(",").forEach(e=>{t.classList.add(toClassName(e.trim()))})},t=getMetadata("template"),t=(t&&e(document.body,t),getMetadata("theme"));t&&e(document.body,t)}function decorateButtons(e){e.querySelectorAll("a").forEach(e=>{var t,a;e.title=e.title||e.textContent,e.href!==e.textContent&&"link"!==e.title&&(t=e.parentElement,a=e.parentElement.parentElement,e.querySelector("img")||"LI"===a.tagName||e.closest(".call-to-action")||e.closest(".mini-teasers")||e.closest(".bg-color-right")||(1!==t.childNodes.length||"P"!==t.tagName&&"DIV"!==t.tagName||(e.className="btn btn-outline-primary",t.classList.add("button-container")),1===t.childNodes.length&&"STRONG"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-primary",a.classList.add("button-container")),1===t.childNodes.length&&"EM"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-secondary",a.classList.add("button-container"))))})}async function waitForLCP(e){var t=document.querySelector(".block");t&&e.includes(t.dataset.blockName)&&await loadBlock(t),document.body.style.display=null;const a=document.querySelector("main img");await new Promise(e=>{a&&!a.complete?(a.setAttribute("loading","eager"),a.addEventListener("load",e),a.addEventListener("error",e)):e()})}function loadHeader(e){var t=buildBlock("header","");return e.append(t),decorateBlock(t),loadBlock(t)}function loadFooter(e){var t=buildBlock("footer","");return e.append(t),decorateBlock(t),loadBlock(t)}function parsePluginParams(e,t){var a=t?e:e.split("/").splice(e.endsWith("/")?-2:-1,1)[0].replace(/\.js/,""),t={load:"eager",..."string"!=typeof t&&t?t:{url:(t||e).replace(/\/$/,"")}};return t.options||={},{id:a,config:t}}blockNames.add("product-hero");const executionContext={createOptimizedPicture:createOptimizedPicture,getAllMetadata:getAllMetadata,getMetadata:getMetadata,decorateBlock:decorateBlock,decorateButtons:decorateButtons,decorateIcons:decorateIcons,loadBlock:loadBlock,loadCSS:loadCSS,loadScript:loadScript,sampleRUM:sampleRUM,toCamelCase:toCamelCase,toClassName:toClassName};class PluginsRegistry{#plugins;constructor(){this.#plugins=new Map}add(e,t){var{id:e,config:t}=parsePluginParams(e,t);this.#plugins.set(e,t)}get(e){return this.#plugins.get(e)}includes(e){return!!this.#plugins.has(e)}async load(t){return[...this.#plugins.entries()].filter(([,e])=>e.condition&&!e.condition(document,e.options,executionContext)).map(([e])=>this.#plugins.delete(e)),Promise.all([...this.#plugins.entries()].filter(([,e])=>(!e.condition||e.condition(document,e.options,executionContext))&&t===e.load&&e.url).map(async([t,e])=>{try{var a=await loadModule(t,e.url.endsWith(".js")?e.url:e.url+`/${t}.js`,e.url.endsWith(".js")?null:e.url+`/${t}.css`,document,e.options,executionContext)||{};this.#plugins.set(t,{...e,...a})}catch(e){console.error("Could not load specified plugin",t)}}))}async run(a){return[...this.#plugins.values()].reduce((e,t)=>!t[a]||t.condition&&!t.condition(document,t.options,executionContext)?e:e.then(()=>t[a](document,t.options,executionContext)),Promise.resolve())}}class TemplatesRegistry{add(e,t){if(Array.isArray(e))e.forEach(e=>window.hlx.templates.add(e));else{const{id:a,config:o}=parsePluginParams(e,t);o.condition=()=>toClassName(getMetadata("template"))===a,window.hlx.plugins.add(a,o)}}get(e){return window.hlx.plugins.get(e)}includes(e){return window.hlx.plugins.includes(e)}}function setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse="on"===new URLSearchParams(window.location.search).get("lighthouse"),window.hlx.patchBlockConfig=[],window.hlx.plugins=new PluginsRegistry,window.hlx.templates=new TemplatesRegistry;var e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(e){console.log(e)}}function init(){setup(),sampleRUM("top"),window.addEventListener("load",()=>sampleRUM("load")),window.addEventListener("unhandledrejection",e=>{sampleRUM("error",{source:e.reason.sourceURL,target:e.reason.line})}),window.addEventListener("error",e=>{sampleRUM("error",{source:e.filename,target:e.lineno})})}init();export{sampleRUM,loadCSS,loadScript,getMetadata,toClassName,toCamelCase,getAllMetadata,decorateIcons,fetchPlaceholders,decorateBlock,readBlockConfig,decorateSections,updateSectionsStatus,decorateBlocks,buildBlock,loadBlock,loadBlocks,createOptimizedPicture,normalizeHeadings,decorateTemplateAndTheme,decorateButtons,waitForLCP,loadHeader,loadFooter,executionContext,setup}; \ No newline at end of file From ebf04d7eed7e2685e4093fd39065ce437573f345 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 19:30:27 +0530 Subject: [PATCH 64/88] fixed lint issues --- scripts/lib-franklin-dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/lib-franklin-dev.js b/scripts/lib-franklin-dev.js index 2c7decdc8..26efec993 100644 --- a/scripts/lib-franklin-dev.js +++ b/scripts/lib-franklin-dev.js @@ -547,7 +547,7 @@ export async function loadBlock(block) { block.dataset.blockStatus = 'loading'; const { blockName, jsPath, cssPath } = getBlockConfig(block); try { - if(blockNames.contains(blockName)) await loadModule(blockName, jsPath, undefined, block); + if (blockNames.contains(blockName)) await loadModule(blockName, jsPath, undefined, block); else await loadModule(blockName, jsPath, cssPath, block); } catch (error) { // eslint-disable-next-line no-console From 8ad94396f69a21371306278478b59a3de8432772 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 19:33:08 +0530 Subject: [PATCH 65/88] updated set --- scripts/lib-franklin-dev.js | 2 +- scripts/lib-franklin.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/lib-franklin-dev.js b/scripts/lib-franklin-dev.js index 26efec993..4b3b9970d 100644 --- a/scripts/lib-franklin-dev.js +++ b/scripts/lib-franklin-dev.js @@ -547,7 +547,7 @@ export async function loadBlock(block) { block.dataset.blockStatus = 'loading'; const { blockName, jsPath, cssPath } = getBlockConfig(block); try { - if (blockNames.contains(blockName)) await loadModule(blockName, jsPath, undefined, block); + if (blockNames.has(blockName)) await loadModule(blockName, jsPath, undefined, block); else await loadModule(blockName, jsPath, cssPath, block); } catch (error) { // eslint-disable-next-line no-console diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js index c3fb6661f..55146162d 100644 --- a/scripts/lib-franklin.js +++ b/scripts/lib-franklin.js @@ -1 +1 @@ -function sampleRUM(e,t={}){sampleRUM.defer=sampleRUM.defer||[];var a,o,n,l,s,r,i,c,d,u=t=>{sampleRUM[t]=sampleRUM[t]||((...e)=>sampleRUM.defer.push({fnname:t,args:e}))};sampleRUM.drain=sampleRUM.drain||((t,e)=>{sampleRUM[t]=e,sampleRUM.defer.filter(({fnname:e})=>t===e).forEach(({fnname:e,args:t})=>sampleRUM[e](...t))}),sampleRUM.always=sampleRUM.always||[],sampleRUM.always.on=(e,t)=>{sampleRUM.always[e]=t},sampleRUM.on=(e,t)=>{sampleRUM.cases[e]=t},u("observe"),u("cwv");try{window.hlx=window.hlx||{},window.hlx.rum||(a="on"===new URLSearchParams(window.location.search).get("rum")?1:20,o=Array.from({length:75},(e,t)=>String.fromCharCode(48+t)).filter(e=>/\d|[A-Z]/i.test(e)).filter(()=>70<75*Math.random()).join(""),l=(n=Math.random())*a<1,s=Date.now(),r={full:()=>window.location.href,origin:()=>window.location.origin,path:()=>window.location.href.replace(/\?.*$/,"")},window.hlx.rum={weight:a,id:o,random:n,isSelected:l,firstReadTime:s,sampleRUM:sampleRUM,sanitizeURL:r[window.hlx.RUM_MASK_URL||"path"]});const{weight:m,id:p,firstReadTime:h}=window.hlx.rum;if(window.hlx&&window.hlx.rum&&window.hlx.rum.isSelected){const w=["weight","id","referer","checkpoint","t","source","target","cwv","CLS","FID","LCP","INP"];sampleRUM.cases=sampleRUM.cases||{cwv:()=>sampleRUM.cwv(t)||!0,lazy:()=>{var e=document.createElement("script");return e.src="https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js",document.head.appendChild(e),!0}},[i=t]=[t],c=JSON.stringify({weight:m,id:p,referer:window.hlx.rum.sanitizeURL(),checkpoint:e,t:Date.now()-h,...t},w),d="https://rum.hlx.page/.rum/"+m,navigator.sendBeacon(d,c),console.debug("ping:"+e,i),sampleRUM.cases[e]&&sampleRUM.cases[e]()}sampleRUM.always[e]&&sampleRUM.always[e](t)}catch(e){}}async function loadCSS(o){return new Promise((e,t)=>{var a;document.querySelector(`head > link[href="${o}"]`)?e():((a=document.createElement("link")).rel="stylesheet",a.href=o,a.onload=e,a.onerror=t,document.head.append(a))})}async function loadScript(n,l){return new Promise((e,t)=>{if(document.querySelector(`head > script[src="${n}"]`))e();else{var a=document.createElement("script");if(a.src=n,l)for(const o in l)a.setAttribute(o,l[o]);a.onload=e,a.onerror=t,document.head.append(a)}})}function getMetadata(e){var t=e&&e.includes(":")?"property":"name";return[...document.head.querySelectorAll(`meta[${t}="${e}"]`)].map(e=>e.content).join(", ")||""}function toClassName(e){return"string"==typeof e?e.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}function toCamelCase(e){return toClassName(e).replace(/-([a-z])/g,e=>e[1].toUpperCase())}function getAllMetadata(a){return[...document.head.querySelectorAll(`meta[property^="${a}:"],meta[name^="${a}-"]`)].reduce((e,t)=>{return e[toClassName(t.name?t.name.substring(a.length+1):t.getAttribute("property").split(":")[1])]=t.getAttribute("content"),e},{})}const ICONS_CACHE={};async function decorateIcons(e){let t=document.getElementById("franklin-svg-sprite");t||((a=document.createElement("div")).innerHTML='<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>',t=a.firstElementChild,document.body.append(a.firstElementChild));var a=[...e.querySelectorAll("span.icon")],e=(await Promise.all(a.map(async t=>{t=Array.from(t.classList).find(e=>e.startsWith("icon-")).substring(5);if(!ICONS_CACHE[t]){ICONS_CACHE[t]=!0;try{let e=window.hlx.codeBasePath+`/icons/${t}.svg`;t.startsWith("dam-")&&(a=window.location.hostname.includes("lifesciences.danaher.com"),e=a?"":"https://lifesciences.danaher.com",e+=`/content/dam/danaher/system/icons/${t.substring(4).replace("_"," ")}.svg`);var a,o,n=await fetch(e);n.ok?(o=await n.text()).match(/(<style | class=)/)?ICONS_CACHE[t]={styled:!0,html:o}:ICONS_CACHE[t]={html:o.replace("<svg",`<symbol id="icons-sprite-${t}"`).replace(/ width=".*?"/,"").replace(/ height=".*?"/,"").replace("</svg>","</symbol>")}:ICONS_CACHE[t]=!1}catch(e){ICONS_CACHE[t]=!1,console.error(e)}}})),Object.keys(ICONS_CACHE).filter(e=>!t.querySelector("#icons-sprite-"+e)).map(e=>ICONS_CACHE[e]).filter(e=>!e.styled).map(e=>e.html).join("\n"));t.innerHTML+=e,a.forEach(e=>{var t=Array.from(e.classList).find(e=>e.startsWith("icon-")).substring(5),e="A"===e.firstElementChild?.tagName?e.firstElementChild:e;ICONS_CACHE[t].styled?e.innerHTML=ICONS_CACHE[t].html:e.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${t}"/></svg>`})}async function fetchPlaceholders(o="default"){return window.placeholders=window.placeholders||{},window.placeholders[o+"-loaded"]||(window.placeholders[o+"-loaded"]=new Promise((a,t)=>{fetch(`${"default"===o?"":o}/placeholders.json`).then(e=>{if(e.ok)return e.json();throw new Error(e.status+": "+e.statusText)}).then(e=>{const t={};e.data.filter(e=>e.Key).forEach(e=>{t[toCamelCase(e.Key)]=e.Text}),window.placeholders[o]=t,a()}).catch(e=>{window.placeholders[o]={},t(e)})})),await window.placeholders[o+"-loaded"],window.placeholders[o]}function decorateBlock(e){var t=e.classList[0];t&&(e.classList.add("block"),e.dataset.blockName=t,e.dataset.blockStatus="initialized",e.parentElement.classList.add(t+"-wrapper"),e=e.closest(".section"))&&e.classList.add(t+"-container")}function readBlockConfig(e){const l={};return e.querySelectorAll(":scope > div").forEach(t=>{if(t.children){var a=[...t.children];if(a[1]){var o,n=a[1],a=toClassName(a[0].textContent);let e="";e=n.querySelector("a")?1===(o=[...n.querySelectorAll("a")]).length?o[0].href:o.map(e=>e.href):n.querySelector("img")?1===(o=[...n.querySelectorAll("img")]).length?o[0].src:o.map(e=>e.src):n.querySelector("p")?1===(o=[...n.querySelectorAll("p")]).length?o[0].textContent:o.map(e=>e.textContent):t.children[1].textContent,l[a]=e}}}),l}function decorateSections(e){e.querySelectorAll(":scope > div").forEach(t=>{const a=[];let o=!1;[...t.children].forEach(e=>{var t;"DIV"!==e.tagName&&o||(t=document.createElement("div"),a.push(t),(o="DIV"!==e.tagName)&&t.classList.add("default-content-wrapper")),a[a.length-1].append(e)}),a.forEach(e=>t.append(e)),t.classList.add("section"),t.dataset.sectionStatus="initialized",t.style.display="none";var e=t.querySelector("div.section-metadata");if(e){const n=readBlockConfig(e);Object.keys(n).forEach(e=>{"style"===e?n.style.split(",").map(e=>toClassName(e.trim())).forEach(e=>t.classList.add(e)):t.dataset[toCamelCase(e)]=n[e]}),e.parentNode.remove()}})}function updateSectionsStatus(e){var t=[...e.querySelectorAll(":scope > div.section")];for(let e=0;e<t.length;e+=1){var a=t[e];if("loaded"!==a.dataset.sectionStatus){if(a.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]')){a.dataset.sectionStatus="loading";break}a.dataset.sectionStatus="loaded",a.style.display=null}}}function decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(decorateBlock)}function buildBlock(e,t){t=Array.isArray(t)?t:[[t]];const o=document.createElement("div");return o.classList.add(e),t.forEach(e=>{const a=document.createElement("div");e.forEach(e=>{const t=document.createElement("div");(e.elems||[e]).forEach(e=>{e&&("string"==typeof e?t.innerHTML+=e:t.appendChild(e))}),a.appendChild(t)}),o.appendChild(a)}),o}async function loadModule(a,o,e,...n){var e=e?loadCSS(e):Promise.resolve(),t=o?new Promise(t=>{(async()=>{let e;try{(e=await import(o)).default&&await e.default.apply(null,n)}catch(e){console.log("failed to load module for "+a,e)}t(e)})()}):Promise.resolve();return Promise.all([e,t]).then(([,e])=>e)}function getBlockConfig(e){var e=e.dataset["blockName"],t=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.js`:"",a=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.css`:"";const o={blockName:e,jsPath:t};return(window.hlx.patchBlockConfig||[]).filter(e=>"function"==typeof e).reduce((e,t)=>t(e,o),{blockName:e,jsPath:t,cssPath:a})}const blockNames=new Set;async function loadBlock(e){var t=e.dataset.blockStatus;if("loading"!==t&&"loaded"!==t){e.dataset.blockStatus="loading";var{blockName:t,jsPath:a,cssPath:o}=getBlockConfig(e);try{blockNames.contains(t)?await loadModule(t,a,void 0,e):await loadModule(t,a,o,e)}catch(e){console.log("failed to load block "+t,e)}e.dataset.blockStatus="loaded"}}async function loadBlocks(t){updateSectionsStatus(t);var a=[...t.querySelectorAll("div.block")];for(let e=0;e<a.length;e+=1)await loadBlock(a[e]),updateSectionsStatus(t)}function createOptimizedPicture(e,a="",o=!1,n=[{media:"(min-width: 600px)",width:"2000"},{width:"750"}]){e=new URL(e,window.location.href);const l=document.createElement("picture"),s=e["pathname"],r=s.substring(s.lastIndexOf(".")+1);return n.forEach(e=>{var t=document.createElement("source");e.media&&t.setAttribute("media",e.media),t.setAttribute("type","image/webp"),t.setAttribute("srcset",`${s}?width=${e.width}&format=webply&optimize=medium`),l.appendChild(t)}),n.forEach((e,t)=>{t<n.length-1?(t=document.createElement("source"),e.media&&t.setAttribute("media",e.media),t.setAttribute("srcset",`${s}?width=${e.width}&format=${r}&optimize=medium`),l.appendChild(t)):((t=document.createElement("img")).setAttribute("loading",o?"eager":"lazy"),t.setAttribute("alt",a),l.appendChild(t),t.setAttribute("src",`${s}?width=${e.width}&format=${r}&optimize=medium`))}),l}function normalizeHeadings(e,t){const o=t.map(e=>e.toLowerCase());e.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(t=>{var a=t.tagName.toLowerCase();if(-1===o.indexOf(a)){let e=parseInt(a.charAt(1),10)-1;for(;-1===o.indexOf("h"+e)&&0<e;)--e;if(0===e)for(;-1===o.indexOf("h"+e)&&e<7;)e+=1;7!==e&&(t.outerHTML=`<h${e} id="${t.id}">${t.textContent}</h${e}>`)}})}function decorateTemplateAndTheme(){var e=(t,e)=>{e.split(",").forEach(e=>{t.classList.add(toClassName(e.trim()))})},t=getMetadata("template"),t=(t&&e(document.body,t),getMetadata("theme"));t&&e(document.body,t)}function decorateButtons(e){e.querySelectorAll("a").forEach(e=>{var t,a;e.title=e.title||e.textContent,e.href!==e.textContent&&"link"!==e.title&&(t=e.parentElement,a=e.parentElement.parentElement,e.querySelector("img")||"LI"===a.tagName||e.closest(".call-to-action")||e.closest(".mini-teasers")||e.closest(".bg-color-right")||(1!==t.childNodes.length||"P"!==t.tagName&&"DIV"!==t.tagName||(e.className="btn btn-outline-primary",t.classList.add("button-container")),1===t.childNodes.length&&"STRONG"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-primary",a.classList.add("button-container")),1===t.childNodes.length&&"EM"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-secondary",a.classList.add("button-container"))))})}async function waitForLCP(e){var t=document.querySelector(".block");t&&e.includes(t.dataset.blockName)&&await loadBlock(t),document.body.style.display=null;const a=document.querySelector("main img");await new Promise(e=>{a&&!a.complete?(a.setAttribute("loading","eager"),a.addEventListener("load",e),a.addEventListener("error",e)):e()})}function loadHeader(e){var t=buildBlock("header","");return e.append(t),decorateBlock(t),loadBlock(t)}function loadFooter(e){var t=buildBlock("footer","");return e.append(t),decorateBlock(t),loadBlock(t)}function parsePluginParams(e,t){var a=t?e:e.split("/").splice(e.endsWith("/")?-2:-1,1)[0].replace(/\.js/,""),t={load:"eager",..."string"!=typeof t&&t?t:{url:(t||e).replace(/\/$/,"")}};return t.options||={},{id:a,config:t}}blockNames.add("product-hero");const executionContext={createOptimizedPicture:createOptimizedPicture,getAllMetadata:getAllMetadata,getMetadata:getMetadata,decorateBlock:decorateBlock,decorateButtons:decorateButtons,decorateIcons:decorateIcons,loadBlock:loadBlock,loadCSS:loadCSS,loadScript:loadScript,sampleRUM:sampleRUM,toCamelCase:toCamelCase,toClassName:toClassName};class PluginsRegistry{#plugins;constructor(){this.#plugins=new Map}add(e,t){var{id:e,config:t}=parsePluginParams(e,t);this.#plugins.set(e,t)}get(e){return this.#plugins.get(e)}includes(e){return!!this.#plugins.has(e)}async load(t){return[...this.#plugins.entries()].filter(([,e])=>e.condition&&!e.condition(document,e.options,executionContext)).map(([e])=>this.#plugins.delete(e)),Promise.all([...this.#plugins.entries()].filter(([,e])=>(!e.condition||e.condition(document,e.options,executionContext))&&t===e.load&&e.url).map(async([t,e])=>{try{var a=await loadModule(t,e.url.endsWith(".js")?e.url:e.url+`/${t}.js`,e.url.endsWith(".js")?null:e.url+`/${t}.css`,document,e.options,executionContext)||{};this.#plugins.set(t,{...e,...a})}catch(e){console.error("Could not load specified plugin",t)}}))}async run(a){return[...this.#plugins.values()].reduce((e,t)=>!t[a]||t.condition&&!t.condition(document,t.options,executionContext)?e:e.then(()=>t[a](document,t.options,executionContext)),Promise.resolve())}}class TemplatesRegistry{add(e,t){if(Array.isArray(e))e.forEach(e=>window.hlx.templates.add(e));else{const{id:a,config:o}=parsePluginParams(e,t);o.condition=()=>toClassName(getMetadata("template"))===a,window.hlx.plugins.add(a,o)}}get(e){return window.hlx.plugins.get(e)}includes(e){return window.hlx.plugins.includes(e)}}function setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse="on"===new URLSearchParams(window.location.search).get("lighthouse"),window.hlx.patchBlockConfig=[],window.hlx.plugins=new PluginsRegistry,window.hlx.templates=new TemplatesRegistry;var e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(e){console.log(e)}}function init(){setup(),sampleRUM("top"),window.addEventListener("load",()=>sampleRUM("load")),window.addEventListener("unhandledrejection",e=>{sampleRUM("error",{source:e.reason.sourceURL,target:e.reason.line})}),window.addEventListener("error",e=>{sampleRUM("error",{source:e.filename,target:e.lineno})})}init();export{sampleRUM,loadCSS,loadScript,getMetadata,toClassName,toCamelCase,getAllMetadata,decorateIcons,fetchPlaceholders,decorateBlock,readBlockConfig,decorateSections,updateSectionsStatus,decorateBlocks,buildBlock,loadBlock,loadBlocks,createOptimizedPicture,normalizeHeadings,decorateTemplateAndTheme,decorateButtons,waitForLCP,loadHeader,loadFooter,executionContext,setup}; \ No newline at end of file +function sampleRUM(e,t={}){sampleRUM.defer=sampleRUM.defer||[];var a,o,n,l,s,r,i,c,d,u=t=>{sampleRUM[t]=sampleRUM[t]||((...e)=>sampleRUM.defer.push({fnname:t,args:e}))};sampleRUM.drain=sampleRUM.drain||((t,e)=>{sampleRUM[t]=e,sampleRUM.defer.filter(({fnname:e})=>t===e).forEach(({fnname:e,args:t})=>sampleRUM[e](...t))}),sampleRUM.always=sampleRUM.always||[],sampleRUM.always.on=(e,t)=>{sampleRUM.always[e]=t},sampleRUM.on=(e,t)=>{sampleRUM.cases[e]=t},u("observe"),u("cwv");try{window.hlx=window.hlx||{},window.hlx.rum||(a="on"===new URLSearchParams(window.location.search).get("rum")?1:20,o=Array.from({length:75},(e,t)=>String.fromCharCode(48+t)).filter(e=>/\d|[A-Z]/i.test(e)).filter(()=>70<75*Math.random()).join(""),l=(n=Math.random())*a<1,s=Date.now(),r={full:()=>window.location.href,origin:()=>window.location.origin,path:()=>window.location.href.replace(/\?.*$/,"")},window.hlx.rum={weight:a,id:o,random:n,isSelected:l,firstReadTime:s,sampleRUM:sampleRUM,sanitizeURL:r[window.hlx.RUM_MASK_URL||"path"]});const{weight:m,id:p,firstReadTime:h}=window.hlx.rum;if(window.hlx&&window.hlx.rum&&window.hlx.rum.isSelected){const w=["weight","id","referer","checkpoint","t","source","target","cwv","CLS","FID","LCP","INP"];sampleRUM.cases=sampleRUM.cases||{cwv:()=>sampleRUM.cwv(t)||!0,lazy:()=>{var e=document.createElement("script");return e.src="https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js",document.head.appendChild(e),!0}},[i=t]=[t],c=JSON.stringify({weight:m,id:p,referer:window.hlx.rum.sanitizeURL(),checkpoint:e,t:Date.now()-h,...t},w),d="https://rum.hlx.page/.rum/"+m,navigator.sendBeacon(d,c),console.debug("ping:"+e,i),sampleRUM.cases[e]&&sampleRUM.cases[e]()}sampleRUM.always[e]&&sampleRUM.always[e](t)}catch(e){}}async function loadCSS(o){return new Promise((e,t)=>{var a;document.querySelector(`head > link[href="${o}"]`)?e():((a=document.createElement("link")).rel="stylesheet",a.href=o,a.onload=e,a.onerror=t,document.head.append(a))})}async function loadScript(n,l){return new Promise((e,t)=>{if(document.querySelector(`head > script[src="${n}"]`))e();else{var a=document.createElement("script");if(a.src=n,l)for(const o in l)a.setAttribute(o,l[o]);a.onload=e,a.onerror=t,document.head.append(a)}})}function getMetadata(e){var t=e&&e.includes(":")?"property":"name";return[...document.head.querySelectorAll(`meta[${t}="${e}"]`)].map(e=>e.content).join(", ")||""}function toClassName(e){return"string"==typeof e?e.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}function toCamelCase(e){return toClassName(e).replace(/-([a-z])/g,e=>e[1].toUpperCase())}function getAllMetadata(a){return[...document.head.querySelectorAll(`meta[property^="${a}:"],meta[name^="${a}-"]`)].reduce((e,t)=>{return e[toClassName(t.name?t.name.substring(a.length+1):t.getAttribute("property").split(":")[1])]=t.getAttribute("content"),e},{})}const ICONS_CACHE={};async function decorateIcons(e){let t=document.getElementById("franklin-svg-sprite");t||((a=document.createElement("div")).innerHTML='<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>',t=a.firstElementChild,document.body.append(a.firstElementChild));var a=[...e.querySelectorAll("span.icon")],e=(await Promise.all(a.map(async t=>{t=Array.from(t.classList).find(e=>e.startsWith("icon-")).substring(5);if(!ICONS_CACHE[t]){ICONS_CACHE[t]=!0;try{let e=window.hlx.codeBasePath+`/icons/${t}.svg`;t.startsWith("dam-")&&(a=window.location.hostname.includes("lifesciences.danaher.com"),e=a?"":"https://lifesciences.danaher.com",e+=`/content/dam/danaher/system/icons/${t.substring(4).replace("_"," ")}.svg`);var a,o,n=await fetch(e);n.ok?(o=await n.text()).match(/(<style | class=)/)?ICONS_CACHE[t]={styled:!0,html:o}:ICONS_CACHE[t]={html:o.replace("<svg",`<symbol id="icons-sprite-${t}"`).replace(/ width=".*?"/,"").replace(/ height=".*?"/,"").replace("</svg>","</symbol>")}:ICONS_CACHE[t]=!1}catch(e){ICONS_CACHE[t]=!1,console.error(e)}}})),Object.keys(ICONS_CACHE).filter(e=>!t.querySelector("#icons-sprite-"+e)).map(e=>ICONS_CACHE[e]).filter(e=>!e.styled).map(e=>e.html).join("\n"));t.innerHTML+=e,a.forEach(e=>{var t=Array.from(e.classList).find(e=>e.startsWith("icon-")).substring(5),e="A"===e.firstElementChild?.tagName?e.firstElementChild:e;ICONS_CACHE[t].styled?e.innerHTML=ICONS_CACHE[t].html:e.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${t}"/></svg>`})}async function fetchPlaceholders(o="default"){return window.placeholders=window.placeholders||{},window.placeholders[o+"-loaded"]||(window.placeholders[o+"-loaded"]=new Promise((a,t)=>{fetch(`${"default"===o?"":o}/placeholders.json`).then(e=>{if(e.ok)return e.json();throw new Error(e.status+": "+e.statusText)}).then(e=>{const t={};e.data.filter(e=>e.Key).forEach(e=>{t[toCamelCase(e.Key)]=e.Text}),window.placeholders[o]=t,a()}).catch(e=>{window.placeholders[o]={},t(e)})})),await window.placeholders[o+"-loaded"],window.placeholders[o]}function decorateBlock(e){var t=e.classList[0];t&&(e.classList.add("block"),e.dataset.blockName=t,e.dataset.blockStatus="initialized",e.parentElement.classList.add(t+"-wrapper"),e=e.closest(".section"))&&e.classList.add(t+"-container")}function readBlockConfig(e){const l={};return e.querySelectorAll(":scope > div").forEach(t=>{if(t.children){var a=[...t.children];if(a[1]){var o,n=a[1],a=toClassName(a[0].textContent);let e="";e=n.querySelector("a")?1===(o=[...n.querySelectorAll("a")]).length?o[0].href:o.map(e=>e.href):n.querySelector("img")?1===(o=[...n.querySelectorAll("img")]).length?o[0].src:o.map(e=>e.src):n.querySelector("p")?1===(o=[...n.querySelectorAll("p")]).length?o[0].textContent:o.map(e=>e.textContent):t.children[1].textContent,l[a]=e}}}),l}function decorateSections(e){e.querySelectorAll(":scope > div").forEach(t=>{const a=[];let o=!1;[...t.children].forEach(e=>{var t;"DIV"!==e.tagName&&o||(t=document.createElement("div"),a.push(t),(o="DIV"!==e.tagName)&&t.classList.add("default-content-wrapper")),a[a.length-1].append(e)}),a.forEach(e=>t.append(e)),t.classList.add("section"),t.dataset.sectionStatus="initialized",t.style.display="none";var e=t.querySelector("div.section-metadata");if(e){const n=readBlockConfig(e);Object.keys(n).forEach(e=>{"style"===e?n.style.split(",").map(e=>toClassName(e.trim())).forEach(e=>t.classList.add(e)):t.dataset[toCamelCase(e)]=n[e]}),e.parentNode.remove()}})}function updateSectionsStatus(e){var t=[...e.querySelectorAll(":scope > div.section")];for(let e=0;e<t.length;e+=1){var a=t[e];if("loaded"!==a.dataset.sectionStatus){if(a.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]')){a.dataset.sectionStatus="loading";break}a.dataset.sectionStatus="loaded",a.style.display=null}}}function decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(decorateBlock)}function buildBlock(e,t){t=Array.isArray(t)?t:[[t]];const o=document.createElement("div");return o.classList.add(e),t.forEach(e=>{const a=document.createElement("div");e.forEach(e=>{const t=document.createElement("div");(e.elems||[e]).forEach(e=>{e&&("string"==typeof e?t.innerHTML+=e:t.appendChild(e))}),a.appendChild(t)}),o.appendChild(a)}),o}async function loadModule(a,o,e,...n){var e=e?loadCSS(e):Promise.resolve(),t=o?new Promise(t=>{(async()=>{let e;try{(e=await import(o)).default&&await e.default.apply(null,n)}catch(e){console.log("failed to load module for "+a,e)}t(e)})()}):Promise.resolve();return Promise.all([e,t]).then(([,e])=>e)}function getBlockConfig(e){var e=e.dataset["blockName"],t=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.js`:"",a=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.css`:"";const o={blockName:e,jsPath:t};return(window.hlx.patchBlockConfig||[]).filter(e=>"function"==typeof e).reduce((e,t)=>t(e,o),{blockName:e,jsPath:t,cssPath:a})}const blockNames=new Set;async function loadBlock(e){var t=e.dataset.blockStatus;if("loading"!==t&&"loaded"!==t){e.dataset.blockStatus="loading";var{blockName:t,jsPath:a,cssPath:o}=getBlockConfig(e);try{blockNames.has(t)?await loadModule(t,a,void 0,e):await loadModule(t,a,o,e)}catch(e){console.log("failed to load block "+t,e)}e.dataset.blockStatus="loaded"}}async function loadBlocks(t){updateSectionsStatus(t);var a=[...t.querySelectorAll("div.block")];for(let e=0;e<a.length;e+=1)await loadBlock(a[e]),updateSectionsStatus(t)}function createOptimizedPicture(e,a="",o=!1,n=[{media:"(min-width: 600px)",width:"2000"},{width:"750"}]){e=new URL(e,window.location.href);const l=document.createElement("picture"),s=e["pathname"],r=s.substring(s.lastIndexOf(".")+1);return n.forEach(e=>{var t=document.createElement("source");e.media&&t.setAttribute("media",e.media),t.setAttribute("type","image/webp"),t.setAttribute("srcset",`${s}?width=${e.width}&format=webply&optimize=medium`),l.appendChild(t)}),n.forEach((e,t)=>{t<n.length-1?(t=document.createElement("source"),e.media&&t.setAttribute("media",e.media),t.setAttribute("srcset",`${s}?width=${e.width}&format=${r}&optimize=medium`),l.appendChild(t)):((t=document.createElement("img")).setAttribute("loading",o?"eager":"lazy"),t.setAttribute("alt",a),l.appendChild(t),t.setAttribute("src",`${s}?width=${e.width}&format=${r}&optimize=medium`))}),l}function normalizeHeadings(e,t){const o=t.map(e=>e.toLowerCase());e.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(t=>{var a=t.tagName.toLowerCase();if(-1===o.indexOf(a)){let e=parseInt(a.charAt(1),10)-1;for(;-1===o.indexOf("h"+e)&&0<e;)--e;if(0===e)for(;-1===o.indexOf("h"+e)&&e<7;)e+=1;7!==e&&(t.outerHTML=`<h${e} id="${t.id}">${t.textContent}</h${e}>`)}})}function decorateTemplateAndTheme(){var e=(t,e)=>{e.split(",").forEach(e=>{t.classList.add(toClassName(e.trim()))})},t=getMetadata("template"),t=(t&&e(document.body,t),getMetadata("theme"));t&&e(document.body,t)}function decorateButtons(e){e.querySelectorAll("a").forEach(e=>{var t,a;e.title=e.title||e.textContent,e.href!==e.textContent&&"link"!==e.title&&(t=e.parentElement,a=e.parentElement.parentElement,e.querySelector("img")||"LI"===a.tagName||e.closest(".call-to-action")||e.closest(".mini-teasers")||e.closest(".bg-color-right")||(1!==t.childNodes.length||"P"!==t.tagName&&"DIV"!==t.tagName||(e.className="btn btn-outline-primary",t.classList.add("button-container")),1===t.childNodes.length&&"STRONG"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-primary",a.classList.add("button-container")),1===t.childNodes.length&&"EM"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-secondary",a.classList.add("button-container"))))})}async function waitForLCP(e){var t=document.querySelector(".block");t&&e.includes(t.dataset.blockName)&&await loadBlock(t),document.body.style.display=null;const a=document.querySelector("main img");await new Promise(e=>{a&&!a.complete?(a.setAttribute("loading","eager"),a.addEventListener("load",e),a.addEventListener("error",e)):e()})}function loadHeader(e){var t=buildBlock("header","");return e.append(t),decorateBlock(t),loadBlock(t)}function loadFooter(e){var t=buildBlock("footer","");return e.append(t),decorateBlock(t),loadBlock(t)}function parsePluginParams(e,t){var a=t?e:e.split("/").splice(e.endsWith("/")?-2:-1,1)[0].replace(/\.js/,""),t={load:"eager",..."string"!=typeof t&&t?t:{url:(t||e).replace(/\/$/,"")}};return t.options||={},{id:a,config:t}}blockNames.add("product-hero");const executionContext={createOptimizedPicture:createOptimizedPicture,getAllMetadata:getAllMetadata,getMetadata:getMetadata,decorateBlock:decorateBlock,decorateButtons:decorateButtons,decorateIcons:decorateIcons,loadBlock:loadBlock,loadCSS:loadCSS,loadScript:loadScript,sampleRUM:sampleRUM,toCamelCase:toCamelCase,toClassName:toClassName};class PluginsRegistry{#plugins;constructor(){this.#plugins=new Map}add(e,t){var{id:e,config:t}=parsePluginParams(e,t);this.#plugins.set(e,t)}get(e){return this.#plugins.get(e)}includes(e){return!!this.#plugins.has(e)}async load(t){return[...this.#plugins.entries()].filter(([,e])=>e.condition&&!e.condition(document,e.options,executionContext)).map(([e])=>this.#plugins.delete(e)),Promise.all([...this.#plugins.entries()].filter(([,e])=>(!e.condition||e.condition(document,e.options,executionContext))&&t===e.load&&e.url).map(async([t,e])=>{try{var a=await loadModule(t,e.url.endsWith(".js")?e.url:e.url+`/${t}.js`,e.url.endsWith(".js")?null:e.url+`/${t}.css`,document,e.options,executionContext)||{};this.#plugins.set(t,{...e,...a})}catch(e){console.error("Could not load specified plugin",t)}}))}async run(a){return[...this.#plugins.values()].reduce((e,t)=>!t[a]||t.condition&&!t.condition(document,t.options,executionContext)?e:e.then(()=>t[a](document,t.options,executionContext)),Promise.resolve())}}class TemplatesRegistry{add(e,t){if(Array.isArray(e))e.forEach(e=>window.hlx.templates.add(e));else{const{id:a,config:o}=parsePluginParams(e,t);o.condition=()=>toClassName(getMetadata("template"))===a,window.hlx.plugins.add(a,o)}}get(e){return window.hlx.plugins.get(e)}includes(e){return window.hlx.plugins.includes(e)}}function setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse="on"===new URLSearchParams(window.location.search).get("lighthouse"),window.hlx.patchBlockConfig=[],window.hlx.plugins=new PluginsRegistry,window.hlx.templates=new TemplatesRegistry;var e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(e){console.log(e)}}function init(){setup(),sampleRUM("top"),window.addEventListener("load",()=>sampleRUM("load")),window.addEventListener("unhandledrejection",e=>{sampleRUM("error",{source:e.reason.sourceURL,target:e.reason.line})}),window.addEventListener("error",e=>{sampleRUM("error",{source:e.filename,target:e.lineno})})}init();export{sampleRUM,loadCSS,loadScript,getMetadata,toClassName,toCamelCase,getAllMetadata,decorateIcons,fetchPlaceholders,decorateBlock,readBlockConfig,decorateSections,updateSectionsStatus,decorateBlocks,buildBlock,loadBlock,loadBlocks,createOptimizedPicture,normalizeHeadings,decorateTemplateAndTheme,decorateButtons,waitForLCP,loadHeader,loadFooter,executionContext,setup}; \ No newline at end of file From f6f0a620512038eef99ff28535aad0ac2bfa8e6a Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 21:15:04 +0530 Subject: [PATCH 66/88] reverted the changes --- blocks/accordion/accordion.css | 237 ++++ blocks/articles-list/articles-list.css | 214 ++++ blocks/banner/banner.css | 264 +++++ blocks/blog-hero/blog-hero.css | 243 ++++ blocks/breadcrumb/breadcrumb.css | 259 ++++ blocks/call-to-action/call-to-action.css | 253 ++++ blocks/card-list/card-list.css | 184 +++ blocks/cards/cards.css | 234 ++++ blocks/carousel/carousel.css | 217 ++++ blocks/category-family/category-family.css | 175 +++ blocks/columns/columns.css | 207 ++++ blocks/download/download.css | 250 ++++ blocks/embed/embed.css | 266 +++++ blocks/footer/footer.css | 224 ++++ blocks/header/header.css | 195 ++++ blocks/hero/hero.css | 245 ++++ blocks/logo-clouds/logo-clouds.css | 253 ++++ blocks/marketo-form/marketo-form.css | 255 ++++ blocks/mini-teasers/mini-teasers.css | 256 ++++ blocks/page-jump-menu/page-jump-menu.css | 235 ++++ blocks/page-tabs/page-tabs.css | 235 ++++ blocks/popular-articles/popular-articles.css | 283 +++++ blocks/product-card/product-card.css | 214 ++++ .../product-category-list.css | 191 +++ blocks/product-category/product-category.css | 210 ++++ .../product-citations/product-citations.css | 267 +++++ blocks/product-hero/product-hero.css | 1039 +++++++++++++++++ blocks/product-menu/product-menu.css | 263 +++++ blocks/product-overview/product-overview.css | 273 +++++ blocks/product-parts/product-parts.css | 244 ++++ .../product-recommendations.css | 197 ++++ .../product-specifications.css | 256 ++++ blocks/recent-articles/recent-articles.css | 249 ++++ blocks/related-articles/related-articles.css | 230 ++++ blocks/side-nav/side-nav.css | 252 ++++ blocks/social-feeds/social-feeds.css | 283 +++++ blocks/social-media/social-media.css | 262 +++++ blocks/stats/stats.css | 267 +++++ build-css.js | 5 + scripts/lib-franklin-dev.js | 5 +- scripts/lib-franklin.js | 2 +- styles/styles.css | 301 ----- tailwind.config.js | 2 +- 43 files changed, 9890 insertions(+), 306 deletions(-) create mode 100644 blocks/product-hero/product-hero.css diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index 035ffab80..5f7dc5cdb 100644 --- a/blocks/accordion/accordion.css +++ b/blocks/accordion/accordion.css @@ -534,6 +534,40 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + .eyebrow { color: #4000A5; font-size: 1.125rem; @@ -541,6 +575,14 @@ video { line-height: 1.75rem; } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.accordion-wrapper :is(.fixed) { + position: fixed; +} + .accordion-wrapper :is(.absolute) { position: absolute; } @@ -549,10 +591,23 @@ video { position: relative; } +.accordion-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + .accordion-wrapper :is(.right-0) { right: 0px; } +.accordion-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.accordion-wrapper :is(.z-10) { + z-index: 10; +} + .accordion-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; @@ -567,6 +622,26 @@ video { margin-right: 3rem; } +.accordion-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.accordion-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.accordion-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.accordion-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.accordion-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .accordion-wrapper :is(.block) { display: block; } @@ -591,6 +666,10 @@ video { height: 100%; } +.accordion-wrapper :is(.h-48) { + height: 12rem; +} + .accordion-wrapper :is(.w-6) { width: 1.5rem; } @@ -624,6 +703,10 @@ video { grid-template-rows: 0fr; } +.accordion-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .accordion-wrapper :is(.items-center) { align-items: center; } @@ -650,15 +733,46 @@ video { overflow: hidden; } +.accordion-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.accordion-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.accordion-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .accordion-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.accordion-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + .accordion-wrapper :is(.fill-current) { fill: currentColor; } +.accordion-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.accordion-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.accordion-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .accordion-wrapper :is(.py-2) { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -668,6 +782,22 @@ video { padding-top: 1rem; } +.accordion-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.accordion-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.accordion-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.accordion-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .accordion-wrapper :is(.text-left) { text-align: left; } @@ -707,6 +837,10 @@ video { line-height: 1.75rem; } +.accordion-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .accordion-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)); @@ -717,6 +851,11 @@ video { color: rgb(156 163 175 / var(--tw-text-opacity)); } +.accordion-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .accordion-wrapper :is(.\!no-underline) { text-decoration-line: none !important; } @@ -725,6 +864,18 @@ video { opacity: 0; } +.accordion-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.accordion-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .accordion-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -769,11 +920,33 @@ video { opacity: 1; } +@media (min-width: 768px) { + .accordion-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .accordion-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + @media (min-width: 1024px) { + .accordion-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + .accordion-wrapper :is(.lg\:block) { display: block; } + .accordion-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .accordion-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .accordion-wrapper :is(.lg\:grid-cols-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -787,6 +960,40 @@ video { } } +@media (min-width: 1280px) { + .accordion-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .accordion-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .accordion-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .accordion-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .accordion-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .accordion-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.accordion-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + .accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.minus\]\:rotate-180 span.minus) { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -807,4 +1014,34 @@ video { .accordion-wrapper :is(.\[\&_svg\>use\]\:stroke-black svg>use) { stroke: #000; +} + +.accordion-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.accordion-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.accordion-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.accordion-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.accordion-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.accordion-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.accordion-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/articles-list/articles-list.css b/blocks/articles-list/articles-list.css index 9f8a525da..23ac74569 100644 --- a/blocks/articles-list/articles-list.css +++ b/blocks/articles-list/articles-list.css @@ -568,15 +568,57 @@ video { } } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.articles-list-wrapper :is(.fixed) { + position: fixed; +} + +.articles-list-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.articles-list-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.articles-list-wrapper :is(.z-10) { + z-index: 10; +} + .articles-list-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; } +.articles-list-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .articles-list-wrapper :is(.mt-4) { margin-top: 1rem; } +.articles-list-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.articles-list-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.articles-list-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.articles-list-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .articles-list-wrapper :is(.\!block) { display: block !important; } @@ -593,6 +635,10 @@ video { display: grid; } +.articles-list-wrapper :is(.h-48) { + height: 12rem; +} + .articles-list-wrapper :is(.w-full) { width: 100%; } @@ -605,6 +651,10 @@ video { grid-template-columns: repeat(1, minmax(0, 1fr)); } +.articles-list-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .articles-list-wrapper :is(.items-center) { align-items: center; } @@ -627,6 +677,19 @@ video { margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } +.articles-list-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.articles-list-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.articles-list-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .articles-list-wrapper :is(.border-t) { border-top-width: 1px; } @@ -645,29 +708,94 @@ video { background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.articles-list-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.articles-list-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.articles-list-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.articles-list-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .articles-list-wrapper :is(.px-3) { padding-left: 0.75rem; padding-right: 0.75rem; } +.articles-list-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .articles-list-wrapper :is(.pt-4) { padding-top: 1rem; } +.articles-list-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.articles-list-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.articles-list-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.articles-list-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .articles-list-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; } +.articles-list-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .articles-list-wrapper :is(.font-bold) { font-weight: 700; } +.articles-list-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .articles-list-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)); } +.articles-list-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.articles-list-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.articles-list-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .articles-list-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -683,8 +811,94 @@ video { } } +@media (min-width: 768px) { + .articles-list-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .articles-list-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + @media (min-width: 1024px) { + .articles-list-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .articles-list-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .articles-list-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .articles-list-wrapper :is(.lg\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } +} + +@media (min-width: 1280px) { + .articles-list-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .articles-list-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .articles-list-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .articles-list-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .articles-list-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .articles-list-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.articles-list-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.articles-list-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.articles-list-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.articles-list-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.articles-list-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.articles-list-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.articles-list-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.articles-list-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css index a73293d96..eed2ddbc6 100644 --- a/blocks/banner/banner.css +++ b/blocks/banner/banner.css @@ -534,15 +534,95 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.banner :is(.fixed) { + position: fixed; +} + .banner :is(.relative) { position: relative; } +.banner :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.banner :is(.top-\[83px\]) { + top: 83px; +} + +.banner :is(.z-10) { + z-index: 10; +} + .banner :is(.mx-auto) { margin-left: auto; margin-right: auto; } +.banner :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.banner :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.banner :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.banner :is(.mt-0) { + margin-top: 0px; +} + +.banner :is(.mt-4) { + margin-top: 1rem; +} + +.banner :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .banner :is(.block) { display: block; } @@ -556,6 +636,10 @@ video { height: max-content; } +.banner :is(.h-48) { + height: 12rem; +} + .banner :is(.min-h-\[13rem\]) { min-height: 13rem; } @@ -568,6 +652,10 @@ video { max-width: 80rem; } +.banner :is(.flex-wrap) { + flex-wrap: wrap; +} + .banner :is(.items-center) { align-items: center; } @@ -576,11 +664,42 @@ video { justify-content: flex-start; } +.banner :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.banner :is(.rounded-full) { + border-radius: 9999px; +} + +.banner :is(.rounded-none) { + border-radius: 0px; +} + .banner :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.banner :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.banner :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.banner :is(.stroke-white) { + stroke: #fff; +} + +.banner :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .banner :is(.p-4) { padding: 1rem; } @@ -590,6 +709,31 @@ video { padding-right: 1.5rem; } +.banner :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.banner :is(.pb-0) { + padding-bottom: 0px; +} + +.banner :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.banner :is(.pb-4) { + padding-bottom: 1rem; +} + +.banner :is(.pt-4) { + padding-top: 1rem; +} + +.banner :is(.pt-6) { + padding-top: 1.5rem; +} + .banner :is(.text-4xl) { font-size: 2.25rem; line-height: 2.5rem; @@ -600,6 +744,11 @@ video { line-height: 1.75rem; } +.banner :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .banner :is(.font-extrabold) { font-weight: 800; } @@ -608,6 +757,14 @@ video { font-weight: 200; } +.banner :is(.font-bold) { + font-weight: 700; +} + +.banner :is(.leading-6) { + line-height: 1.5rem; +} + .banner :is(.tracking-tight) { letter-spacing: -0.025em; } @@ -617,8 +774,115 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.banner :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.banner :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.banner :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.banner :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + @media (min-width: 768px) { + .banner :is(.md\:mt-4) { + margin-top: 1rem; + } + .banner :is(.md\:w-3\/4) { width: 75%; } + + .banner :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .banner :is(.lg\:mt-0) { + margin-top: 0px; + } + + .banner :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .banner :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .banner :is(.xl\:w-1\/4) { + width: 25%; + } + + .banner :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .banner :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .banner :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .banner :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .banner :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.banner :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.banner :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.banner :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.banner :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.banner :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.banner :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.banner :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.banner :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/blog-hero/blog-hero.css b/blocks/blog-hero/blog-hero.css index d5485cbbc..557e66269 100644 --- a/blocks/blog-hero/blog-hero.css +++ b/blocks/blog-hero/blog-hero.css @@ -534,6 +534,61 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.blog-hero-wrapper :is(.fixed) { + position: fixed; +} + +.blog-hero-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.blog-hero-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.blog-hero-wrapper :is(.z-10) { + z-index: 10; +} + .blog-hero-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -557,6 +612,11 @@ video { margin-bottom: 1rem; } +.blog-hero-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .blog-hero-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -585,6 +645,18 @@ video { margin-top: 2rem; } +.blog-hero-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.blog-hero-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.blog-hero-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .blog-hero-wrapper :is(.block) { display: block; } @@ -605,6 +677,10 @@ video { height: 4rem; } +.blog-hero-wrapper :is(.h-48) { + height: 12rem; +} + .blog-hero-wrapper :is(.w-16) { width: 4rem; } @@ -626,6 +702,10 @@ video { grid-template-columns: repeat(2, minmax(0, 1fr)); } +.blog-hero-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .blog-hero-wrapper :is(.items-center) { align-items: center; } @@ -649,24 +729,76 @@ video { margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } +.blog-hero-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .blog-hero-wrapper :is(.rounded-full) { border-radius: 9999px; } +.blog-hero-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .blog-hero-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.blog-hero-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.blog-hero-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.blog-hero-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.blog-hero-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .blog-hero-wrapper :is(.px-2) { padding-left: 0.5rem; padding-right: 0.5rem; } +.blog-hero-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .blog-hero-wrapper :is(.pl-1) { padding-left: 0.25rem; } +.blog-hero-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.blog-hero-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.blog-hero-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.blog-hero-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.blog-hero-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .blog-hero-wrapper :is(.text-lg) { font-size: 1.125rem; line-height: 1.75rem; @@ -682,10 +814,19 @@ video { line-height: 1.75rem; } +.blog-hero-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .blog-hero-wrapper :is(.font-medium) { font-weight: 500; } +.blog-hero-wrapper :is(.font-bold) { + font-weight: 700; +} + .blog-hero-wrapper :is(.leading-6) { line-height: 1.5rem; } @@ -719,7 +860,37 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } +.blog-hero-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.blog-hero-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.blog-hero-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +@media (min-width: 768px) { + .blog-hero-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .blog-hero-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + @media (min-width: 1024px) { + .blog-hero-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + .blog-hero-wrapper :is(.lg\:h-20) { height: 5rem; } @@ -728,7 +899,79 @@ video { width: 5rem; } + .blog-hero-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .blog-hero-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .blog-hero-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } +} + +@media (min-width: 1280px) { + .blog-hero-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .blog-hero-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .blog-hero-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .blog-hero-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .blog-hero-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .blog-hero-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.blog-hero-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.blog-hero-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.blog-hero-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.blog-hero-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.blog-hero-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.blog-hero-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.blog-hero-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.blog-hero-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/breadcrumb/breadcrumb.css b/blocks/breadcrumb/breadcrumb.css index 2558607e9..b352c66a3 100644 --- a/blocks/breadcrumb/breadcrumb.css +++ b/blocks/breadcrumb/breadcrumb.css @@ -534,11 +534,91 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.breadcrumb-wrapper :is(.fixed) { + position: fixed; +} + +.breadcrumb-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.breadcrumb-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.breadcrumb-wrapper :is(.z-10) { + z-index: 10; +} + .breadcrumb-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; } +.breadcrumb-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.breadcrumb-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.breadcrumb-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.breadcrumb-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.breadcrumb-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.breadcrumb-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .breadcrumb-wrapper :is(.block) { display: block; } @@ -555,6 +635,10 @@ video { height: 83.333333%; } +.breadcrumb-wrapper :is(.h-48) { + height: 12rem; +} + .breadcrumb-wrapper :is(.w-5) { width: 1.25rem; } @@ -575,6 +659,10 @@ video { flex-shrink: 0; } +.breadcrumb-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .breadcrumb-wrapper :is(.items-center) { align-items: center; } @@ -596,6 +684,19 @@ video { white-space: nowrap; } +.breadcrumb-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.breadcrumb-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.breadcrumb-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .breadcrumb-wrapper :is(.border-b) { border-bottom-width: 1px; } @@ -615,20 +716,71 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.breadcrumb-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.breadcrumb-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.breadcrumb-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .breadcrumb-wrapper :is(.px-4) { padding-left: 1rem; padding-right: 1rem; } +.breadcrumb-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.breadcrumb-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.breadcrumb-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.breadcrumb-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.breadcrumb-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.breadcrumb-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .breadcrumb-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; } +.breadcrumb-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .breadcrumb-wrapper :is(.font-medium) { font-weight: 500; } +.breadcrumb-wrapper :is(.font-bold) { + font-weight: 700; +} + +.breadcrumb-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .breadcrumb-wrapper :is(.text-gray-300) { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); @@ -639,6 +791,27 @@ video { color: rgb(107 114 128 / var(--tw-text-opacity)); } +.breadcrumb-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.breadcrumb-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.breadcrumb-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.breadcrumb-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .breadcrumb-wrapper :is(.hover\:text-gray-700:hover) { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); @@ -651,9 +824,95 @@ video { } } +@media (min-width: 768px) { + .breadcrumb-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .breadcrumb-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + @media (min-width: 1024px) { + .breadcrumb-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .breadcrumb-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .breadcrumb-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .breadcrumb-wrapper :is(.lg\:px-7) { padding-left: 1.75rem; padding-right: 1.75rem; } +} + +@media (min-width: 1280px) { + .breadcrumb-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .breadcrumb-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .breadcrumb-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .breadcrumb-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .breadcrumb-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .breadcrumb-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.breadcrumb-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.breadcrumb-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.breadcrumb-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.breadcrumb-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.breadcrumb-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.breadcrumb-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.breadcrumb-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.breadcrumb-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/call-to-action/call-to-action.css b/blocks/call-to-action/call-to-action.css index 4a0cd37d6..aa32ac694 100644 --- a/blocks/call-to-action/call-to-action.css +++ b/blocks/call-to-action/call-to-action.css @@ -534,6 +534,40 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); @@ -546,6 +580,27 @@ video { background-color: #7523FF; } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.call-to-action-wrapper :is(.fixed) { + position: fixed; +} + +.call-to-action-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.call-to-action-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.call-to-action-wrapper :is(.z-10) { + z-index: 10; +} + .call-to-action-wrapper :is(.m-0) { margin: 0px; } @@ -555,10 +610,43 @@ video { margin-right: auto; } +.call-to-action-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.call-to-action-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.call-to-action-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.call-to-action-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.call-to-action-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.call-to-action-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .call-to-action-wrapper :is(.block) { display: block; } +.call-to-action-wrapper :is(.flex) { + display: flex; +} + +.call-to-action-wrapper :is(.h-48) { + height: 12rem; +} + .call-to-action-wrapper :is(.w-full) { width: 100%; } @@ -575,6 +663,10 @@ video { flex-shrink: 0; } +.call-to-action-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .call-to-action-wrapper :is(.items-center) { align-items: center; } @@ -585,10 +677,19 @@ video { margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } +.call-to-action-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .call-to-action-wrapper :is(.rounded-full) { border-radius: 9999px; } +.call-to-action-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .call-to-action-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -599,6 +700,24 @@ video { background-color: rgb(64 0 165 / var(--tw-bg-opacity)); } +.call-to-action-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.call-to-action-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.call-to-action-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.call-to-action-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .call-to-action-wrapper :is(.p-0) { padding: 0px; } @@ -618,10 +737,31 @@ video { padding-bottom: 2rem; } +.call-to-action-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .call-to-action-wrapper :is(.pt-6) { padding-top: 1.5rem; } +.call-to-action-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.call-to-action-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.call-to-action-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.call-to-action-wrapper :is(.pt-4) { + padding-top: 1rem; +} + .call-to-action-wrapper :is(.text-2xl) { font-size: 1.5rem; line-height: 2rem; @@ -645,6 +785,14 @@ video { font-weight: 700; } +.call-to-action-wrapper :is(.font-bold) { + font-weight: 700; +} + +.call-to-action-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .call-to-action-wrapper :is(.tracking-tight) { letter-spacing: -0.025em; } @@ -663,10 +811,31 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.call-to-action-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .call-to-action-wrapper :is(.\!no-underline) { text-decoration-line: none !important; } +.call-to-action-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.call-to-action-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.call-to-action-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + @media (min-width: 640px) { .call-to-action-wrapper :is(.sm\:text-3xl) { font-size: 1.875rem; @@ -675,6 +844,10 @@ video { } @media (min-width: 768px) { + .call-to-action-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .call-to-action-wrapper :is(.md\:flex) { display: flex; } @@ -702,9 +875,25 @@ video { padding-top: 4rem; padding-bottom: 4rem; } + + .call-to-action-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } } @media (min-width: 1024px) { + .call-to-action-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .call-to-action-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .call-to-action-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .call-to-action-wrapper :is(.lg\:max-w-2xl) { max-width: 42rem; } @@ -713,4 +902,68 @@ video { padding-top: 2rem; padding-bottom: 2rem; } +} + +@media (min-width: 1280px) { + .call-to-action-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .call-to-action-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .call-to-action-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .call-to-action-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .call-to-action-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .call-to-action-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.call-to-action-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.call-to-action-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.call-to-action-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.call-to-action-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.call-to-action-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.call-to-action-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.call-to-action-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.call-to-action-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index c66618b6c..81abe1d47 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -579,10 +579,31 @@ video { opacity: 1; } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.card-list-wrapper :is(.fixed) { + position: fixed; +} + .card-list-wrapper :is(.relative) { position: relative; } +.card-list-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.card-list-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.card-list-wrapper :is(.z-10) { + z-index: 10; +} + .card-list-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -597,6 +618,11 @@ video { margin-bottom: 0.5rem; } +.card-list-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .card-list-wrapper :is(.\!mb-4) { margin-bottom: 1rem !important; } @@ -629,6 +655,22 @@ video { margin-top: auto; } +.card-list-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.card-list-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.card-list-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.card-list-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .card-list-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; @@ -686,6 +728,10 @@ video { height: 100%; } +.card-list-wrapper :is(.h-48) { + height: 12rem; +} + .card-list-wrapper :is(.w-0) { width: 0px; } @@ -758,6 +804,11 @@ video { overflow: hidden; } +.card-list-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .card-list-wrapper :is(.\!break-words) { overflow-wrap: break-word !important; } @@ -774,6 +825,10 @@ video { border-radius: 0.5rem; } +.card-list-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .card-list-wrapper :is(.border) { border-width: 1px; } @@ -811,6 +866,19 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.card-list-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.card-list-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.card-list-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .card-list-wrapper :is(.\!px-6) { padding-left: 1.5rem !important; padding-right: 1.5rem !important; @@ -841,6 +909,11 @@ video { padding-bottom: 1.25rem; } +.card-list-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .card-list-wrapper :is(.pb-0) { padding-bottom: 0px; } @@ -861,6 +934,14 @@ video { padding-top: 1rem; } +.card-list-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.card-list-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .card-list-wrapper :is(.text-center) { text-align: center; } @@ -901,10 +982,18 @@ video { font-weight: 700; } +.card-list-wrapper :is(.font-bold) { + font-weight: 700; +} + .card-list-wrapper :is(.leading-5) { line-height: 1.25rem; } +.card-list-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .card-list-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; color: rgb(17 24 39 / var(--tw-text-opacity)) !important; @@ -940,12 +1029,23 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.card-list-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .card-list-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.card-list-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .card-list-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -1008,6 +1108,10 @@ video { margin-top: 3rem; } + .card-list-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .card-list-wrapper :is(.md\:flex) { display: flex; } @@ -1020,9 +1124,25 @@ video { padding-top: 0px; padding-bottom: 0px; } + + .card-list-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } } @media (min-width: 1024px) { + .card-list-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .card-list-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .card-list-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .card-list-wrapper :is(.lg\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -1030,4 +1150,68 @@ video { .card-list-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } +} + +@media (min-width: 1280px) { + .card-list-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .card-list-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .card-list-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .card-list-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .card-list-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .card-list-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.card-list-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.card-list-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.card-list-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.card-list-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.card-list-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.card-list-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.card-list-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.card-list-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 25ebb4656..1a25229c0 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -534,10 +534,65 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.cards-wrapper :is(.fixed) { + position: fixed; +} + .cards-wrapper :is(.relative) { position: relative; } +.cards-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.cards-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.cards-wrapper :is(.z-10) { + z-index: 10; +} + .cards-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -556,10 +611,35 @@ video { margin-bottom: 0.5rem; } +.cards-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .cards-wrapper :is(.mb-4) { margin-bottom: 1rem; } +.cards-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.cards-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.cards-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.cards-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.cards-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .cards-wrapper :is(.\!line-clamp-2) { overflow: hidden !important; display: -webkit-box !important; @@ -649,6 +729,10 @@ video { flex-direction: column; } +.cards-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .cards-wrapper :is(.justify-center) { justify-content: center; } @@ -666,6 +750,11 @@ video { overflow: hidden; } +.cards-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .cards-wrapper :is(.\!break-words) { overflow-wrap: break-word !important; } @@ -674,6 +763,14 @@ video { border-radius: 0.5rem; } +.cards-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.cards-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .cards-wrapper :is(.rounded-b) { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; @@ -707,11 +804,24 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.cards-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.cards-wrapper :is(.stroke-white) { + stroke: #fff; +} + .cards-wrapper :is(.\!object-contain) { -o-object-fit: contain !important; object-fit: contain !important; } +.cards-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .cards-wrapper :is(.p-0) { padding: 0px; } @@ -746,6 +856,26 @@ video { padding-top: 1.25rem; } +.cards-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.cards-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.cards-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.cards-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.cards-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .cards-wrapper :is(.\!text-2xl) { font-size: 1.5rem !important; line-height: 2rem !important; @@ -783,10 +913,18 @@ video { font-weight: 700; } +.cards-wrapper :is(.font-bold) { + font-weight: 700; +} + .cards-wrapper :is(.leading-5) { line-height: 1.25rem; } +.cards-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .cards-wrapper :is(.text-danahergray-900) { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); @@ -813,6 +951,16 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.cards-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.cards-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .cards-wrapper :is(.transition) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -837,7 +985,29 @@ video { } } +@media (min-width: 768px) { + .cards-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .cards-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + @media (min-width: 1024px) { + .cards-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .cards-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .cards-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .cards-wrapper :is(.lg\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -845,4 +1015,68 @@ video { .cards-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } +} + +@media (min-width: 1280px) { + .cards-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .cards-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .cards-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .cards-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .cards-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .cards-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.cards-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.cards-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.cards-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.cards-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.cards-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.cards-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.cards-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.cards-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index ed336f95e..be80283d0 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -534,6 +534,40 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + .bg-danaherpurple-50 { background-color: #EADEFF; } @@ -580,6 +614,10 @@ video { border-width: 0; } +.carousel-wrapper :is(.fixed) { + position: fixed; +} + .carousel-wrapper :is(.absolute) { position: absolute; } @@ -592,10 +630,19 @@ video { inset: 0px; } +.carousel-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + .carousel-wrapper :is(.bottom-0) { bottom: 0px; } +.carousel-wrapper :is(.top-\[83px\]) { + top: 83px; +} + .carousel-wrapper :is(.z-10) { z-index: 10; } @@ -609,6 +656,11 @@ video { margin-right: auto; } +.carousel-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .carousel-wrapper :is(.mt-10) { margin-top: 2.5rem; } @@ -617,6 +669,26 @@ video { margin-top: 1.5rem; } +.carousel-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.carousel-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.carousel-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.carousel-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.carousel-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .carousel-wrapper :is(.block) { display: block; } @@ -717,6 +789,10 @@ video { flex-direction: column; } +.carousel-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .carousel-wrapper :is(.items-center) { align-items: center; } @@ -767,6 +843,11 @@ video { scroll-behavior: smooth; } +.carousel-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .carousel-wrapper :is(.rounded-full) { border-radius: 9999px; } @@ -775,6 +856,10 @@ video { border-radius: 0.375rem; } +.carousel-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .carousel-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -790,6 +875,14 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.carousel-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.carousel-wrapper :is(.stroke-white) { + stroke: #fff; +} + .carousel-wrapper :is(.object-cover) { -o-object-fit: cover; object-fit: cover; @@ -820,6 +913,31 @@ video { padding-bottom: 2rem; } +.carousel-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.carousel-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.carousel-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.carousel-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.carousel-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.carousel-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .carousel-wrapper :is(.text-2xl) { font-size: 1.5rem; line-height: 2rem; @@ -868,6 +986,23 @@ video { color: rgb(117 35 255 / var(--tw-text-opacity)); } +.carousel-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.carousel-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.carousel-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .carousel-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -909,6 +1044,10 @@ video { bottom: 4rem; } + .carousel-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .carousel-wrapper :is(.md\:h-\[35rem\]) { height: 35rem; } @@ -921,6 +1060,10 @@ video { flex-direction: row; } + .carousel-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } + .carousel-wrapper :is(.md\:text-4xl) { font-size: 2.25rem; line-height: 2.5rem; @@ -953,10 +1096,22 @@ video { margin: auto; } + .carousel-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + .carousel-wrapper :is(.lg\:w-1\/2) { width: 50%; } + .carousel-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .carousel-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .carousel-wrapper :is(.lg\:px-8) { padding-left: 2rem; padding-right: 2rem; @@ -973,7 +1128,69 @@ video { } @media (min-width: 1280px) { + .carousel-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .carousel-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } + .carousel-wrapper :is(.xl\:pr-10) { padding-right: 2.5rem; } +} + +@media (min-width: 768px) { + .carousel-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .carousel-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .carousel-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .carousel-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.carousel-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.carousel-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.carousel-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.carousel-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.carousel-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.carousel-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.carousel-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.carousel-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/category-family/category-family.css b/blocks/category-family/category-family.css index c9306a220..60b0b9679 100644 --- a/blocks/category-family/category-family.css +++ b/blocks/category-family/category-family.css @@ -568,10 +568,18 @@ video { } } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + .category-family-wrapper :is(.pointer-events-none) { pointer-events: none; } +.category-family-wrapper :is(.fixed) { + position: fixed; +} + .category-family-wrapper :is(.absolute) { position: absolute; } @@ -580,10 +588,19 @@ video { position: relative; } +.category-family-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + .category-family-wrapper :is(.left-0) { left: 0px; } +.category-family-wrapper :is(.top-\[83px\]) { + top: 83px; +} + .category-family-wrapper :is(.z-10) { z-index: 10; } @@ -609,6 +626,11 @@ video { margin-right: auto; } +.category-family-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .category-family-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -629,6 +651,18 @@ video { margin-top: 1.5rem; } +.category-family-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.category-family-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.category-family-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .category-family-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; @@ -813,6 +847,10 @@ video { flex-direction: column; } +.category-family-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .category-family-wrapper :is(.items-start) { align-items: flex-start; } @@ -890,6 +928,11 @@ video { white-space: nowrap; } +.category-family-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .category-family-wrapper :is(.\!break-words) { overflow-wrap: break-word !important; } @@ -964,6 +1007,14 @@ video { fill: currentColor !important; } +.category-family-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.category-family-wrapper :is(.stroke-white) { + stroke: #fff; +} + .category-family-wrapper :is(.object-cover) { -o-object-fit: cover; object-fit: cover; @@ -1025,6 +1076,11 @@ video { padding-bottom: 0.625rem; } +.category-family-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .category-family-wrapper :is(.pl-0) { padding-left: 0px; } @@ -1037,6 +1093,26 @@ video { padding-top: 2.5rem; } +.category-family-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.category-family-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.category-family-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.category-family-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.category-family-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .category-family-wrapper :is(.text-left) { text-align: left; } @@ -1065,6 +1141,11 @@ video { line-height: 1rem; } +.category-family-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .category-family-wrapper :is(.\!font-semibold) { font-weight: 700 !important; } @@ -1073,6 +1154,10 @@ video { font-weight: 700; } +.category-family-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .category-family-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; color: rgb(17 24 39 / var(--tw-text-opacity)) !important; @@ -1095,6 +1180,12 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.category-family-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .category-family-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -1123,6 +1214,10 @@ video { } @media (min-width: 768px) { + .category-family-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .category-family-wrapper :is(.md\:h-6) { height: 1.5rem; } @@ -1134,9 +1229,25 @@ video { .category-family-wrapper :is(.md\:flex-row) { flex-direction: row; } + + .category-family-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } } @media (min-width: 1024px) { + .category-family-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .category-family-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .category-family-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .category-family-wrapper :is(.lg\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -1150,6 +1261,16 @@ video { } } +@media (min-width: 1280px) { + .category-family-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .category-family-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + .category-family-wrapper :is(.\[\&\:not\(\:first-child\)\:even\]\:opacity-40:not(:first-child):even) { opacity: 0.4; } @@ -1164,4 +1285,58 @@ video { .category-family-wrapper :is(.\[\&\:not\(\:first-child\)\]\:opacity-40:not(:first-child)) { opacity: 0.4; +} + +@media (min-width: 768px) { + .category-family-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .category-family-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .category-family-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .category-family-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.category-family-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.category-family-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.category-family-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.category-family-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.category-family-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.category-family-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.category-family-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.category-family-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 991c9f27b..2a99b3542 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -601,10 +601,31 @@ video { background-color: #7523FF; } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.columns-wrapper :is(.fixed) { + position: fixed; +} + .columns-wrapper :is(.relative) { position: relative; } +.columns-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.columns-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.columns-wrapper :is(.z-10) { + z-index: 10; +} + .columns-wrapper :is(.order-1) { order: 1; } @@ -632,6 +653,26 @@ video { margin-top: 1.5rem; } +.columns-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.columns-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.columns-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.columns-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.columns-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .columns-wrapper :is(.\!block) { display: block !important; } @@ -640,6 +681,10 @@ video { display: block; } +.columns-wrapper :is(.flex) { + display: flex; +} + .columns-wrapper :is(.inline-flex) { display: inline-flex; } @@ -660,6 +705,10 @@ video { height: 100%; } +.columns-wrapper :is(.h-48) { + height: 12rem; +} + .columns-wrapper :is(.w-12) { width: 3rem; } @@ -688,6 +737,10 @@ video { grid-template-columns: repeat(1, minmax(0, 1fr)); } +.columns-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .columns-wrapper :is(.items-center) { align-items: center; } @@ -716,6 +769,11 @@ video { margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } +.columns-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .columns-wrapper :is(.rounded) { border-radius: 0.25rem; } @@ -728,6 +786,10 @@ video { border-radius: 0.375rem; } +.columns-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .columns-wrapper :is(.border) { border-width: 1px; } @@ -773,6 +835,24 @@ video { background-color: transparent; } +.columns-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.columns-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.columns-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.columns-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .columns-wrapper :is(.px-5) { padding-left: 1.25rem; padding-right: 1.25rem; @@ -814,6 +894,22 @@ video { padding-left: 2.5rem; } +.columns-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.columns-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.columns-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.columns-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .columns-wrapper :is(.align-text-top) { vertical-align: text-top; } @@ -857,6 +953,10 @@ video { line-height: 1.75rem; } +.columns-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .columns-wrapper :is(.\!text-white) { --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity)) !important; @@ -882,6 +982,11 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.columns-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .columns-wrapper :is(.\!no-underline) { text-decoration-line: none !important; } @@ -896,6 +1001,18 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.columns-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.columns-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .columns-wrapper :is(.brightness-0) { --tw-brightness: brightness(0); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -906,6 +1023,10 @@ video { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.columns-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .columns-wrapper :is(.transition-all) { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -930,12 +1051,34 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +@media (min-width: 768px) { + .columns-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .columns-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + @media (min-width: 1024px) { .columns-wrapper :is(.lg\:my-4) { margin-top: 1rem; margin-bottom: 1rem; } + .columns-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .columns-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .columns-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .columns-wrapper :is(.lg\:grid-cols-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -943,4 +1086,68 @@ video { .columns-wrapper :is(.lg\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } +} + +@media (min-width: 1280px) { + .columns-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .columns-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .columns-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .columns-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .columns-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .columns-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.columns-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.columns-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.columns-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.columns-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.columns-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.columns-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.columns-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.columns-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/download/download.css b/blocks/download/download.css index a0c03787f..dfb2a25f6 100644 --- a/blocks/download/download.css +++ b/blocks/download/download.css @@ -534,10 +534,95 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.download-wrapper :is(.fixed) { + position: fixed; +} + +.download-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.download-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.download-wrapper :is(.z-10) { + z-index: 10; +} + +.download-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.download-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .download-wrapper :is(.mb-3) { margin-bottom: 0.75rem; } +.download-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.download-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.download-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.download-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.download-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .download-wrapper :is(.block) { display: block; } @@ -554,6 +639,10 @@ video { height: 16rem; } +.download-wrapper :is(.h-48) { + height: 12rem; +} + .download-wrapper :is(.w-64) { width: 16rem; } @@ -570,6 +659,10 @@ video { flex-direction: column; } +.download-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .download-wrapper :is(.items-start) { align-items: flex-start; } @@ -605,6 +698,11 @@ video { border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } +.download-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .download-wrapper :is(.break-words) { overflow-wrap: break-word; } @@ -617,11 +715,28 @@ video { border-radius: 0.375rem; } +.download-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .download-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.download-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.download-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.download-wrapper :is(.stroke-white) { + stroke: #fff; +} + .download-wrapper :is(.object-cover) { -o-object-fit: cover; object-fit: cover; @@ -647,6 +762,31 @@ video { padding-bottom: 1rem; } +.download-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.download-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.download-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.download-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.download-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.download-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .download-wrapper :is(.font-sans) { font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } @@ -670,6 +810,14 @@ video { font-weight: 700; } +.download-wrapper :is(.font-bold) { + font-weight: 700; +} + +.download-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .download-wrapper :is(.tracking-tight) { letter-spacing: -0.025em; } @@ -692,11 +840,31 @@ video { text-decoration-line: none !important; } +.download-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.download-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.download-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + @media (min-width: 768px) { .download-wrapper :is(.md\:mb-0) { margin-bottom: 0px; } + .download-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .download-wrapper :is(.md\:h-36) { height: 9rem; } @@ -712,4 +880,86 @@ video { .download-wrapper :is(.md\:items-center) { align-items: center; } + + .download-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .download-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .download-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .download-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .download-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .download-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .download-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .download-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .download-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .download-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.download-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.download-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.download-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.download-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.download-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.download-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.download-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.download-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css index 9f4f30bba..b134ebca6 100644 --- a/blocks/embed/embed.css +++ b/blocks/embed/embed.css @@ -534,6 +534,48 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.embed-wrapper :is(.fixed) { + position: fixed; +} + .embed-wrapper :is(.absolute) { position: absolute; } @@ -542,6 +584,19 @@ video { position: relative; } +.embed-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.embed-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.embed-wrapper :is(.z-10) { + z-index: 10; +} + .embed-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; @@ -552,6 +607,31 @@ video { margin-bottom: 2rem; } +.embed-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.embed-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.embed-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.embed-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.embed-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.embed-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .embed-wrapper :is(.block) { display: block; } @@ -560,14 +640,39 @@ video { display: flex; } +.embed-wrapper :is(.h-48) { + height: 12rem; +} + +.embed-wrapper :is(.w-full) { + width: 100%; +} + .embed-wrapper :is(.max-w-3xl) { max-width: 48rem; } +.embed-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .embed-wrapper :is(.justify-center) { justify-content: center; } +.embed-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.embed-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.embed-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .embed-wrapper :is(.border) { border-width: 1px; } @@ -577,10 +682,171 @@ video { background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.embed-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.embed-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.embed-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.embed-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.embed-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.embed-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.embed-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.embed-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.embed-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.embed-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .embed-wrapper :is(.text-center) { text-align: center; } +.embed-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.embed-wrapper :is(.font-bold) { + font-weight: 700; +} + +.embed-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.embed-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.embed-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.embed-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .embed-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +@media (min-width: 768px) { + .embed-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .embed-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .embed-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .embed-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .embed-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .embed-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .embed-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .embed-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .embed-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .embed-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .embed-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.embed-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.embed-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.embed-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.embed-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.embed-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.embed-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.embed-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.embed-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 3cd0165a6..09bbcf6b8 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -534,6 +534,40 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + .bg-danaherpurple-50 { background-color: #EADEFF; } @@ -555,6 +589,10 @@ video { background-color: #7523FF; } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + .footer-wrapper :is(.sr-only) { position: absolute; width: 1px; @@ -571,10 +609,19 @@ video { position: fixed; } +.footer-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + .footer-wrapper :is(.bottom-3) { bottom: 0.75rem; } +.footer-wrapper :is(.top-\[83px\]) { + top: 83px; +} + .footer-wrapper :is(.z-10) { z-index: 10; } @@ -593,6 +640,11 @@ video { margin-bottom: auto; } +.footer-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .footer-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -601,6 +653,18 @@ video { margin-top: 1rem; } +.footer-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.footer-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.footer-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .footer-wrapper :is(.block) { display: block; } @@ -626,6 +690,10 @@ video { height: max-content; } +.footer-wrapper :is(.h-48) { + height: 12rem; +} + .footer-wrapper :is(.w-5) { width: 1.25rem; } @@ -690,10 +758,19 @@ video { border-color: rgb(117 35 255 / var(--tw-divide-opacity)); } +.footer-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .footer-wrapper :is(.rounded-full) { border-radius: 9999px; } +.footer-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .footer-wrapper :is(.rounded-l-full) { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; @@ -719,10 +796,28 @@ video { background-color: rgb(234 222 255 / var(--tw-bg-opacity)); } +.footer-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + .footer-wrapper :is(.fill-transparent) { fill: transparent; } +.footer-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.footer-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.footer-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .footer-wrapper :is(.px-2) { padding-left: 0.5rem; padding-right: 0.5rem; @@ -778,6 +873,26 @@ video { padding-bottom: 2rem; } +.footer-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.footer-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.footer-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.footer-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.footer-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .footer-wrapper :is(.align-top) { vertical-align: top; } @@ -799,11 +914,36 @@ video { font-weight: 700; } +.footer-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .footer-wrapper :is(.text-white) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } +.footer-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.footer-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.footer-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.footer-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .footer-wrapper :is(.transition) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -838,6 +978,10 @@ video { } @media (min-width: 768px) { + .footer-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .footer-wrapper :is(.md\:block) { display: block; } @@ -857,17 +1001,97 @@ video { .footer-wrapper :is(.md\:flex-wrap) { flex-wrap: wrap; } + + .footer-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } } @media (min-width: 1024px) { + .footer-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .footer-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .footer-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .footer-wrapper :is(.lg\:px-8) { padding-left: 2rem; padding-right: 2rem; } } +@media (min-width: 1280px) { + .footer-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .footer-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + @media print { .footer-wrapper :is(.print\:hidden) { display: none; } +} + +@media (min-width: 768px) { + .footer-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .footer-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .footer-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .footer-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.footer-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.footer-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.footer-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.footer-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.footer-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.footer-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.footer-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.footer-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/header/header.css b/blocks/header/header.css index d81a35912..21a54e299 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -534,6 +534,44 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + .header-wrapper :is(.fixed) { position: fixed; } @@ -575,6 +613,10 @@ video { top: 100%; } +.header-wrapper :is(.top-\[83px\]) { + top: 83px; +} + .header-wrapper :is(.z-10) { z-index: 10; } @@ -629,6 +671,11 @@ video { margin-bottom: auto; } +.header-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .header-wrapper :is(.-mr-px) { margin-right: -1px; } @@ -665,6 +712,18 @@ video { margin-top: 0.75rem; } +.header-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.header-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.header-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .header-wrapper :is(.line-clamp-2) { overflow: hidden; display: -webkit-box; @@ -736,6 +795,10 @@ video { height: 100vh; } +.header-wrapper :is(.h-48) { + height: 12rem; +} + .header-wrapper :is(.min-h-\[40px\]) { min-height: 40px; } @@ -901,6 +964,11 @@ video { overflow: hidden; } +.header-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .header-wrapper :is(.break-all) { word-break: break-all; } @@ -921,6 +989,10 @@ video { border-radius: 0.375rem; } +.header-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .header-wrapper :is(.border) { border-width: 1px; } @@ -1001,11 +1073,24 @@ video { fill: currentColor; } +.header-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.header-wrapper :is(.stroke-white) { + stroke: #fff; +} + .header-wrapper :is(.object-contain) { -o-object-fit: contain; object-fit: contain; } +.header-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .header-wrapper :is(.p-1) { padding: 0.25rem; } @@ -1069,6 +1154,22 @@ video { padding-top: 0px; } +.header-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.header-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.header-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.header-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .header-wrapper :is(.text-left) { text-align: left; } @@ -1114,6 +1215,10 @@ video { font-weight: 700; } +.header-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .header-wrapper :is(.tracking-wider) { letter-spacing: 0.05em; } @@ -1149,6 +1254,12 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.header-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .header-wrapper :is(.outline-none) { outline: 2px solid transparent; outline-offset: 2px; @@ -1310,6 +1421,10 @@ video { margin-right: 1rem; } + .header-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .header-wrapper :is(.md\:block) { display: block; } @@ -1338,6 +1453,10 @@ video { padding-top: 1rem; padding-bottom: 1rem; } + + .header-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } } @media (min-width: 1024px) { @@ -1346,6 +1465,10 @@ video { margin-bottom: 1rem; } + .header-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + .header-wrapper :is(.lg\:block) { display: block; } @@ -1370,6 +1493,14 @@ video { width: 11rem; } + .header-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .header-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .header-wrapper :is(.lg\:grid-rows-2) { grid-template-rows: repeat(2, minmax(0, 1fr)); } @@ -1406,6 +1537,16 @@ video { } } +@media (min-width: 1280px) { + .header-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .header-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + .header-wrapper :is(.\[\&\>a\]\:w-full>a) { width: 100%; } @@ -1419,6 +1560,30 @@ video { font-weight: 700; } +@media (min-width: 768px) { + .header-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .header-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .header-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .header-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.header-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + .header-wrapper :is(.\[\&_svg\>use\]\:stroke-black svg>use) { stroke: #000; } @@ -1445,4 +1610,34 @@ video { .header-wrapper :is(.\[\&_svg\]\:stroke-white svg) { stroke: #fff; +} + +.header-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.header-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.header-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.header-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.header-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.header-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.header-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 5a7f6595d..45cfad996 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -534,6 +534,44 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + .hero-wrapper :is(.fixed) { position: fixed; } @@ -550,6 +588,11 @@ video { inset: 0px; } +.hero-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + .hero-wrapper :is(.left-0) { left: 0px; } @@ -558,15 +601,28 @@ video { top: 0px; } +.hero-wrapper :is(.top-\[83px\]) { + top: 83px; +} + .hero-wrapper :is(.z-50) { z-index: 50; } +.hero-wrapper :is(.z-10) { + z-index: 10; +} + .hero-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; } +.hero-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .hero-wrapper :is(.mb-1) { margin-bottom: 0.25rem; } @@ -583,6 +639,18 @@ video { margin-top: 2rem; } +.hero-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.hero-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.hero-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .hero-wrapper :is(.block) { display: block; } @@ -603,6 +671,10 @@ video { height: 20rem; } +.hero-wrapper :is(.h-48) { + height: 12rem; +} + .hero-wrapper :is(.w-12) { width: 3rem; } @@ -631,6 +703,10 @@ video { flex-direction: column; } +.hero-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .hero-wrapper :is(.justify-center) { justify-content: center; } @@ -643,6 +719,11 @@ video { overflow: hidden; } +.hero-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .hero-wrapper :is(.rounded) { border-radius: 0.25rem; } @@ -655,6 +736,14 @@ video { border-radius: 0.75rem; } +.hero-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.hero-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .hero-wrapper :is(.border) { border-width: 1px; } @@ -677,6 +766,19 @@ video { background-color: transparent; } +.hero-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.hero-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.hero-wrapper :is(.stroke-white) { + stroke: #fff; +} + .hero-wrapper :is(.object-cover) { -o-object-fit: cover; object-fit: cover; @@ -694,10 +796,35 @@ video { padding: 1rem; } +.hero-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .hero-wrapper :is(.pb-\[56\.25\%\]) { padding-bottom: 56.25%; } +.hero-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.hero-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.hero-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.hero-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.hero-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .hero-wrapper :is(.text-2xl) { font-size: 1.5rem; line-height: 2rem; @@ -708,6 +835,11 @@ video { line-height: 1; } +.hero-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .hero-wrapper :is(.font-extrabold) { font-weight: 800; } @@ -720,10 +852,18 @@ video { font-weight: 700; } +.hero-wrapper :is(.font-bold) { + font-weight: 700; +} + .hero-wrapper :is(.leading-none) { line-height: 1; } +.hero-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .hero-wrapper :is(.tracking-wide) { letter-spacing: 0.025em; } @@ -743,6 +883,27 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.hero-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.hero-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.hero-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.hero-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .hero-wrapper :is(.backdrop-brightness-50) { --tw-backdrop-brightness: brightness(.5); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -773,6 +934,10 @@ video { margin-top: 4rem; } + .hero-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .hero-wrapper :is(.md\:h-full) { height: 100%; } @@ -785,6 +950,10 @@ video { padding-left: 2rem; padding-right: 2rem; } + + .hero-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } } @media (min-width: 1024px) { @@ -792,7 +961,83 @@ video { margin-bottom: 2rem; } + .hero-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .hero-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .hero-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .hero-wrapper :is(.lg\:text-\[11rem\]) { font-size: 11rem; } +} + +@media (min-width: 1280px) { + .hero-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .hero-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .hero-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .hero-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .hero-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .hero-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.hero-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.hero-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.hero-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.hero-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.hero-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.hero-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.hero-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.hero-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/logo-clouds/logo-clouds.css b/blocks/logo-clouds/logo-clouds.css index 0ffd77bc5..8360238eb 100644 --- a/blocks/logo-clouds/logo-clouds.css +++ b/blocks/logo-clouds/logo-clouds.css @@ -534,10 +534,65 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.logo-clouds-wrapper :is(.fixed) { + position: fixed; +} + .logo-clouds-wrapper :is(.relative) { position: relative; } +.logo-clouds-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.logo-clouds-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.logo-clouds-wrapper :is(.z-10) { + z-index: 10; +} + .logo-clouds-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -552,10 +607,35 @@ video { margin-bottom: 0.5rem; } +.logo-clouds-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .logo-clouds-wrapper :is(.mt-8) { margin-top: 2rem; } +.logo-clouds-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.logo-clouds-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.logo-clouds-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.logo-clouds-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.logo-clouds-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .logo-clouds-wrapper :is(.block) { display: block; } @@ -576,6 +656,10 @@ video { height: 100%; } +.logo-clouds-wrapper :is(.h-48) { + height: 12rem; +} + .logo-clouds-wrapper :is(.w-60) { width: 15rem; } @@ -600,6 +684,10 @@ video { grid-template-columns: repeat(2, minmax(0, 1fr)); } +.logo-clouds-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .logo-clouds-wrapper :is(.items-center) { align-items: center; } @@ -621,10 +709,23 @@ video { column-gap: 1.5rem; } +.logo-clouds-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .logo-clouds-wrapper :is(.rounded-xl) { border-radius: 0.75rem; } +.logo-clouds-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.logo-clouds-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .logo-clouds-wrapper :is(.border-2) { border-width: 2px; } @@ -648,6 +749,19 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.logo-clouds-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.logo-clouds-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.logo-clouds-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .logo-clouds-wrapper :is(.px-8) { padding-left: 2rem; padding-right: 2rem; @@ -658,6 +772,31 @@ video { padding-bottom: 2rem; } +.logo-clouds-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.logo-clouds-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.logo-clouds-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.logo-clouds-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.logo-clouds-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.logo-clouds-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .logo-clouds-wrapper :is(.text-3xl) { font-size: 1.875rem; line-height: 2.25rem; @@ -668,6 +807,11 @@ video { line-height: 1.75rem; } +.logo-clouds-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .logo-clouds-wrapper :is(.font-medium) { font-weight: 500; } @@ -676,6 +820,35 @@ video { font-weight: 700; } +.logo-clouds-wrapper :is(.font-bold) { + font-weight: 700; +} + +.logo-clouds-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.logo-clouds-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.logo-clouds-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.logo-clouds-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.logo-clouds-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .logo-clouds-wrapper :is(.transition) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -695,9 +868,17 @@ video { } @media (min-width: 768px) { + .logo-clouds-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .logo-clouds-wrapper :is(.md\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } + + .logo-clouds-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } } @media (min-width: 1024px) { @@ -709,6 +890,14 @@ video { display: grid; } + .logo-clouds-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .logo-clouds-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .logo-clouds-wrapper :is(.lg\:grid-cols-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -720,4 +909,68 @@ video { .logo-clouds-wrapper :is(.lg\:gap-8) { gap: 2rem; } +} + +@media (min-width: 1280px) { + .logo-clouds-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .logo-clouds-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .logo-clouds-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .logo-clouds-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .logo-clouds-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .logo-clouds-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.logo-clouds-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.logo-clouds-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.logo-clouds-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.logo-clouds-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.logo-clouds-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.logo-clouds-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.logo-clouds-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.logo-clouds-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/marketo-form/marketo-form.css b/blocks/marketo-form/marketo-form.css index eaebbd91c..efd8b27dc 100644 --- a/blocks/marketo-form/marketo-form.css +++ b/blocks/marketo-form/marketo-form.css @@ -534,10 +534,61 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.marketo-form-wrapper :is(.fixed) { + position: fixed; +} + .marketo-form-wrapper :is(.relative) { position: relative; } +.marketo-form-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.marketo-form-wrapper :is(.top-\[83px\]) { + top: 83px; +} + .marketo-form-wrapper :is(.z-0) { z-index: 0; } @@ -546,11 +597,20 @@ video { z-index: 9; } +.marketo-form-wrapper :is(.z-10) { + z-index: 10; +} + .marketo-form-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; } +.marketo-form-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .marketo-form-wrapper :is(.mb-0) { margin-bottom: 0px; } @@ -575,6 +635,22 @@ video { margin-top: 0px; } +.marketo-form-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.marketo-form-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.marketo-form-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.marketo-form-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .marketo-form-wrapper :is(.block) { display: block; } @@ -587,6 +663,14 @@ video { height: 20rem; } +.marketo-form-wrapper :is(.h-48) { + height: 12rem; +} + +.marketo-form-wrapper :is(.w-full) { + width: 100%; +} + .marketo-form-wrapper :is(.max-w-7xl) { max-width: 80rem; } @@ -595,6 +679,10 @@ video { flex-direction: column; } +.marketo-form-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .marketo-form-wrapper :is(.items-center) { align-items: center; } @@ -603,10 +691,23 @@ video { justify-content: center; } +.marketo-form-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .marketo-form-wrapper :is(.break-all) { word-break: break-all; } +.marketo-form-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.marketo-form-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .marketo-form-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -617,6 +718,44 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.marketo-form-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.marketo-form-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.marketo-form-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.marketo-form-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.marketo-form-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.marketo-form-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.marketo-form-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.marketo-form-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.marketo-form-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .marketo-form-wrapper :is(.text-3xl) { font-size: 1.875rem; line-height: 2.25rem; @@ -627,6 +766,11 @@ video { line-height: 1.75rem; } +.marketo-form-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .marketo-form-wrapper :is(.font-bold) { font-weight: 700; } @@ -635,11 +779,20 @@ video { font-weight: 200; } +.marketo-form-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .marketo-form-wrapper :is(.text-gray-700) { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } +.marketo-form-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .marketo-form-wrapper :is(.underline) { text-decoration-line: underline; } @@ -652,6 +805,22 @@ video { text-decoration-thickness: 3px; } +.marketo-form-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.marketo-form-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.marketo-form-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .marketo-form-wrapper :is(.transition) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -683,8 +852,94 @@ video { margin-bottom: 4rem; } + .marketo-form-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .marketo-form-wrapper :is(.md\:break-normal) { overflow-wrap: normal; word-break: normal; } + + .marketo-form-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .marketo-form-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .marketo-form-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .marketo-form-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .marketo-form-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .marketo-form-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .marketo-form-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .marketo-form-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .marketo-form-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .marketo-form-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.marketo-form-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.marketo-form-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.marketo-form-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.marketo-form-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.marketo-form-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.marketo-form-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.marketo-form-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.marketo-form-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/mini-teasers/mini-teasers.css b/blocks/mini-teasers/mini-teasers.css index 7dd16b9e4..f58e24da8 100644 --- a/blocks/mini-teasers/mini-teasers.css +++ b/blocks/mini-teasers/mini-teasers.css @@ -534,6 +534,61 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.mini-teasers-wrapper :is(.fixed) { + position: fixed; +} + +.mini-teasers-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.mini-teasers-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.mini-teasers-wrapper :is(.z-10) { + z-index: 10; +} + .mini-teasers-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; @@ -549,6 +604,11 @@ video { margin-bottom: 1.5rem; } +.mini-teasers-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .mini-teasers-wrapper :is(.mb-0) { margin-bottom: 0px; } @@ -557,6 +617,22 @@ video { margin-top: 1rem; } +.mini-teasers-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.mini-teasers-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.mini-teasers-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.mini-teasers-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .mini-teasers-wrapper :is(.line-clamp-2) { overflow: hidden; display: -webkit-box; @@ -579,6 +655,10 @@ video { display: block; } +.mini-teasers-wrapper :is(.flex) { + display: flex; +} + .mini-teasers-wrapper :is(.grid) { display: grid; } @@ -595,6 +675,10 @@ video { height: 5.5rem; } +.mini-teasers-wrapper :is(.h-48) { + height: 12rem; +} + .mini-teasers-wrapper :is(.w-16) { width: 4rem; } @@ -611,6 +695,10 @@ video { grid-template-columns: repeat(1, minmax(0, 1fr)); } +.mini-teasers-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .mini-teasers-wrapper :is(.items-center) { align-items: center; } @@ -619,10 +707,23 @@ video { gap: 1.5rem; } +.mini-teasers-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .mini-teasers-wrapper :is(.break-words) { overflow-wrap: break-word; } +.mini-teasers-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.mini-teasers-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .mini-teasers-wrapper :is(.border-b) { border-bottom-width: 1px; } @@ -645,36 +746,127 @@ video { background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.mini-teasers-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.mini-teasers-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.mini-teasers-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.mini-teasers-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .mini-teasers-wrapper :is(.px-2) { padding-left: 0.5rem; padding-right: 0.5rem; } +.mini-teasers-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .mini-teasers-wrapper :is(.pt-4) { padding-top: 1rem; } +.mini-teasers-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.mini-teasers-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.mini-teasers-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.mini-teasers-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .mini-teasers-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; } +.mini-teasers-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .mini-teasers-wrapper :is(.font-bold) { font-weight: 700; } +.mini-teasers-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .mini-teasers-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)); } +.mini-teasers-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.mini-teasers-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.mini-teasers-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.mini-teasers-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + @media (min-width: 640px) { .mini-teasers-wrapper :is(.sm\:grid-cols-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } +@media (min-width: 768px) { + .mini-teasers-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .mini-teasers-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + @media (min-width: 1024px) { + .mini-teasers-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .mini-teasers-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .mini-teasers-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .mini-teasers-wrapper :is(.lg\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -682,4 +874,68 @@ video { .mini-teasers-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } +} + +@media (min-width: 1280px) { + .mini-teasers-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .mini-teasers-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .mini-teasers-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .mini-teasers-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .mini-teasers-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .mini-teasers-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.mini-teasers-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.mini-teasers-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.mini-teasers-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.mini-teasers-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.mini-teasers-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.mini-teasers-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.mini-teasers-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.mini-teasers-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/page-jump-menu/page-jump-menu.css b/blocks/page-jump-menu/page-jump-menu.css index 65e3dcb25..2a7457aa1 100644 --- a/blocks/page-jump-menu/page-jump-menu.css +++ b/blocks/page-jump-menu/page-jump-menu.css @@ -534,14 +534,75 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.page-jump-menu-wrapper :is(.fixed) { + position: fixed; +} + .page-jump-menu-wrapper :is(.relative) { position: relative; } +.page-jump-menu-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.page-jump-menu-wrapper :is(.top-\[83px\]) { + top: 83px; +} + .page-jump-menu-wrapper :is(.z-10) { z-index: 10; } +.page-jump-menu-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.page-jump-menu-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .page-jump-menu-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -550,6 +611,18 @@ video { margin-top: 1rem; } +.page-jump-menu-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.page-jump-menu-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.page-jump-menu-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .page-jump-menu-wrapper :is(.block) { display: block; } @@ -566,6 +639,10 @@ video { height: 2rem; } +.page-jump-menu-wrapper :is(.h-48) { + height: 12rem; +} + .page-jump-menu-wrapper :is(.w-48) { width: 12rem; } @@ -574,6 +651,14 @@ video { width: 2rem; } +.page-jump-menu-wrapper :is(.w-full) { + width: 100%; +} + +.page-jump-menu-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .page-jump-menu-wrapper :is(.gap-x-2) { -moz-column-gap: 0.5rem; column-gap: 0.5rem; @@ -583,6 +668,19 @@ video { overflow: hidden; } +.page-jump-menu-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.page-jump-menu-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.page-jump-menu-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .page-jump-menu-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -597,10 +695,19 @@ video { stroke: #7523FF; } +.page-jump-menu-wrapper :is(.stroke-white) { + stroke: #fff; +} + .page-jump-menu-wrapper :is(.stroke-1) { stroke-width: 1; } +.page-jump-menu-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .page-jump-menu-wrapper :is(.py-2) { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -614,11 +721,36 @@ video { padding-right: 0.5rem; } +.page-jump-menu-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.page-jump-menu-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.page-jump-menu-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.page-jump-menu-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.page-jump-menu-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .page-jump-menu-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; } +.page-jump-menu-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .page-jump-menu-wrapper :is(.font-bold) { font-weight: 700; } @@ -627,6 +759,10 @@ video { text-transform: capitalize; } +.page-jump-menu-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .page-jump-menu-wrapper :is(.tracking-wider) { letter-spacing: 0.05em; } @@ -636,12 +772,23 @@ video { color: rgb(51 51 51 / var(--tw-text-opacity)); } +.page-jump-menu-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .page-jump-menu-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.page-jump-menu-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .page-jump-menu-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -660,6 +807,64 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +@media (min-width: 768px) { + .page-jump-menu-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .page-jump-menu-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .page-jump-menu-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .page-jump-menu-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .page-jump-menu-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .page-jump-menu-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .page-jump-menu-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .page-jump-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .page-jump-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.page-jump-menu-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + .page-jump-menu-wrapper :is(.\[\&_svg\]\:stroke-danaherpurple-500 svg) { stroke: #7523FF; } @@ -683,4 +888,34 @@ video { .page-jump-menu-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:stroke-white svg) { stroke: #fff; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.page-jump-menu-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/page-tabs/page-tabs.css b/blocks/page-tabs/page-tabs.css index 72191b4cb..83cfdcb3b 100644 --- a/blocks/page-tabs/page-tabs.css +++ b/blocks/page-tabs/page-tabs.css @@ -534,10 +534,71 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.page-tabs-wrapper :is(.fixed) { + position: fixed; +} + +.page-tabs-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.page-tabs-wrapper :is(.top-\[83px\]) { + top: 83px; +} + .page-tabs-wrapper :is(.z-10) { z-index: 10; } +.page-tabs-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.page-tabs-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .page-tabs-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -546,6 +607,18 @@ video { margin-top: 1rem; } +.page-tabs-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.page-tabs-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.page-tabs-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .page-tabs-wrapper :is(.block) { display: block; } @@ -562,6 +635,10 @@ video { height: 2rem; } +.page-tabs-wrapper :is(.h-48) { + height: 12rem; +} + .page-tabs-wrapper :is(.w-48) { width: 12rem; } @@ -570,6 +647,14 @@ video { width: 2rem; } +.page-tabs-wrapper :is(.w-full) { + width: 100%; +} + +.page-tabs-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .page-tabs-wrapper :is(.gap-x-2) { -moz-column-gap: 0.5rem; column-gap: 0.5rem; @@ -579,6 +664,19 @@ video { overflow: hidden; } +.page-tabs-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.page-tabs-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.page-tabs-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .page-tabs-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -593,10 +691,19 @@ video { stroke: #7523FF; } +.page-tabs-wrapper :is(.stroke-white) { + stroke: #fff; +} + .page-tabs-wrapper :is(.stroke-1) { stroke-width: 1; } +.page-tabs-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .page-tabs-wrapper :is(.py-2) { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -610,11 +717,36 @@ video { padding-right: 0.5rem; } +.page-tabs-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.page-tabs-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.page-tabs-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.page-tabs-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.page-tabs-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .page-tabs-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; } +.page-tabs-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .page-tabs-wrapper :is(.font-bold) { font-weight: 700; } @@ -623,6 +755,10 @@ video { text-transform: capitalize; } +.page-tabs-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .page-tabs-wrapper :is(.tracking-wider) { letter-spacing: 0.05em; } @@ -632,12 +768,23 @@ video { color: rgb(51 51 51 / var(--tw-text-opacity)); } +.page-tabs-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .page-tabs-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.page-tabs-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .page-tabs-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -656,6 +803,64 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +@media (min-width: 768px) { + .page-tabs-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .page-tabs-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .page-tabs-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .page-tabs-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .page-tabs-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .page-tabs-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .page-tabs-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .page-tabs-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .page-tabs-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .page-tabs-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .page-tabs-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.page-tabs-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + .page-tabs-wrapper :is(.\[\&_svg\]\:stroke-danaherpurple-500 svg) { stroke: #7523FF; } @@ -679,4 +884,34 @@ video { .page-tabs-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:stroke-white svg) { stroke: #fff; +} + +.page-tabs-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.page-tabs-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.page-tabs-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.page-tabs-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.page-tabs-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.page-tabs-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.page-tabs-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/popular-articles/popular-articles.css b/blocks/popular-articles/popular-articles.css index fdf55a346..fee0b8503 100644 --- a/blocks/popular-articles/popular-articles.css +++ b/blocks/popular-articles/popular-articles.css @@ -534,7 +534,290 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.popular-articles-wrapper :is(.fixed) { + position: fixed; +} + +.popular-articles-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.popular-articles-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.popular-articles-wrapper :is(.z-10) { + z-index: 10; +} + +.popular-articles-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.popular-articles-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.popular-articles-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.popular-articles-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.popular-articles-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.popular-articles-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.popular-articles-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + +.popular-articles-wrapper :is(.block) { + display: block; +} + +.popular-articles-wrapper :is(.flex) { + display: flex; +} + +.popular-articles-wrapper :is(.h-48) { + height: 12rem; +} + +.popular-articles-wrapper :is(.w-full) { + width: 100%; +} + +.popular-articles-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + +.popular-articles-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.popular-articles-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.popular-articles-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .popular-articles-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.popular-articles-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.popular-articles-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.popular-articles-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.popular-articles-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.popular-articles-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.popular-articles-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.popular-articles-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.popular-articles-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.popular-articles-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.popular-articles-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + +.popular-articles-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.popular-articles-wrapper :is(.font-bold) { + font-weight: 700; +} + +.popular-articles-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.popular-articles-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.popular-articles-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.popular-articles-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.popular-articles-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +@media (min-width: 768px) { + .popular-articles-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .popular-articles-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .popular-articles-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .popular-articles-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .popular-articles-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .popular-articles-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .popular-articles-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .popular-articles-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .popular-articles-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .popular-articles-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .popular-articles-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.popular-articles-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.popular-articles-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.popular-articles-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.popular-articles-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.popular-articles-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.popular-articles-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.popular-articles-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.popular-articles-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-card/product-card.css b/blocks/product-card/product-card.css index 304082b4b..12c820ef0 100644 --- a/blocks/product-card/product-card.css +++ b/blocks/product-card/product-card.css @@ -568,10 +568,31 @@ video { } } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.product-card-wrapper :is(.fixed) { + position: fixed; +} + .product-card-wrapper :is(.relative) { position: relative; } +.product-card-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.product-card-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.product-card-wrapper :is(.z-10) { + z-index: 10; +} + .product-card-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -581,6 +602,11 @@ video { margin-right: auto; } +.product-card-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .product-card-wrapper :is(.mb-3) { margin-bottom: 0.75rem; } @@ -593,6 +619,26 @@ video { margin-top: 0.75rem; } +.product-card-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.product-card-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.product-card-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.product-card-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.product-card-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .product-card-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; @@ -631,6 +677,10 @@ video { height: 5rem !important; } +.product-card-wrapper :is(.h-48) { + height: 12rem; +} + .product-card-wrapper :is(.w-full) { width: 100%; } @@ -655,6 +705,10 @@ video { flex-direction: column; } +.product-card-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .product-card-wrapper :is(.items-center) { align-items: center; } @@ -681,6 +735,11 @@ video { overflow: hidden; } +.product-card-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .product-card-wrapper :is(.\!break-words) { overflow-wrap: break-word !important; } @@ -697,6 +756,14 @@ video { border-radius: 0.5rem; } +.product-card-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.product-card-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .product-card-wrapper :is(.border) { border-width: 1px; } @@ -720,6 +787,19 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.product-card-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.product-card-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.product-card-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .product-card-wrapper :is(.\!px-7) { padding-left: 1.75rem !important; padding-right: 1.75rem !important; @@ -745,10 +825,35 @@ video { padding-bottom: 1.25rem; } +.product-card-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .product-card-wrapper :is(.pt-8) { padding-top: 2rem; } +.product-card-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.product-card-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.product-card-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.product-card-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.product-card-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .product-card-wrapper :is(.\!text-lg) { font-size: 1.125rem !important; line-height: 1.75rem !important; @@ -759,10 +864,23 @@ video { line-height: 1.25rem; } +.product-card-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .product-card-wrapper :is(.\!font-semibold) { font-weight: 700 !important; } +.product-card-wrapper :is(.font-bold) { + font-weight: 700; +} + +.product-card-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .product-card-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; color: rgb(17 24 39 / var(--tw-text-opacity)) !important; @@ -779,6 +897,16 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.product-card-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-card-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .product-card-wrapper :is(.transition) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -808,8 +936,94 @@ video { } } +@media (min-width: 768px) { + .product-card-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .product-card-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + @media (min-width: 1024px) { + .product-card-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .product-card-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .product-card-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .product-card-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } +} + +@media (min-width: 1280px) { + .product-card-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .product-card-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .product-card-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .product-card-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .product-card-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .product-card-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.product-card-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.product-card-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.product-card-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.product-card-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.product-card-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.product-card-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.product-card-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.product-card-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-category-list/product-category-list.css b/blocks/product-category-list/product-category-list.css index 9f7626939..b62a7909d 100644 --- a/blocks/product-category-list/product-category-list.css +++ b/blocks/product-category-list/product-category-list.css @@ -572,10 +572,31 @@ video { background-color: #EADEFF; } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.product-category-list-wrapper :is(.fixed) { + position: fixed; +} + .product-category-list-wrapper :is(.relative) { position: relative; } +.product-category-list-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.product-category-list-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.product-category-list-wrapper :is(.z-10) { + z-index: 10; +} + .product-category-list-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -590,6 +611,11 @@ video { margin-bottom: 0.5rem; } +.product-category-list-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .product-category-list-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -610,6 +636,22 @@ video { margin-top: 0.75rem; } +.product-category-list-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.product-category-list-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.product-category-list-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.product-category-list-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .product-category-list-wrapper :is(.block) { display: block; } @@ -638,6 +680,10 @@ video { height: 13rem; } +.product-category-list-wrapper :is(.h-48) { + height: 12rem; +} + .product-category-list-wrapper :is(.w-48) { width: 12rem; } @@ -690,6 +736,11 @@ video { overflow: hidden; } +.product-category-list-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .product-category-list-wrapper :is(.break-words) { overflow-wrap: break-word; } @@ -698,6 +749,10 @@ video { border-radius: 9999px; } +.product-category-list-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .product-category-list-wrapper :is(.border-l) { border-left-width: 1px; } @@ -727,6 +782,14 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.product-category-list-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.product-category-list-wrapper :is(.stroke-white) { + stroke: #fff; +} + .product-category-list-wrapper :is(.object-cover) { -o-object-fit: cover; object-fit: cover; @@ -752,6 +815,11 @@ video { padding-bottom: 1rem; } +.product-category-list-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .product-category-list-wrapper :is(.\!pb-0) { padding-bottom: 0px !important; } @@ -768,6 +836,26 @@ video { padding-right: 2rem; } +.product-category-list-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.product-category-list-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.product-category-list-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.product-category-list-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.product-category-list-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .product-category-list-wrapper :is(.text-center) { text-align: center; } @@ -794,6 +882,10 @@ video { font-weight: 700; } +.product-category-list-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .product-category-list-wrapper :is(.text-danahergray-900) { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); @@ -809,6 +901,23 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.product-category-list-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.product-category-list-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-category-list-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .product-category-list-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -849,16 +958,36 @@ video { } @media (min-width: 768px) { + .product-category-list-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .product-category-list-wrapper :is(.md\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } + + .product-category-list-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } } @media (min-width: 1024px) { + .product-category-list-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + .product-category-list-wrapper :is(.lg\:w-44) { width: 11rem; } + .product-category-list-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .product-category-list-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .product-category-list-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } @@ -874,7 +1003,69 @@ video { } @media (min-width: 1280px) { + .product-category-list-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .product-category-list-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } + .product-category-list-wrapper :is(.xl\:grid-cols-6) { grid-template-columns: repeat(6, minmax(0, 1fr)); } +} + +@media (min-width: 768px) { + .product-category-list-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .product-category-list-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .product-category-list-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .product-category-list-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.product-category-list-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.product-category-list-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.product-category-list-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.product-category-list-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.product-category-list-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.product-category-list-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.product-category-list-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.product-category-list-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-category/product-category.css b/blocks/product-category/product-category.css index 12b1bda33..c12daedd3 100644 --- a/blocks/product-category/product-category.css +++ b/blocks/product-category/product-category.css @@ -568,10 +568,31 @@ video { } } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.product-category-wrapper :is(.fixed) { + position: fixed; +} + .product-category-wrapper :is(.relative) { position: relative; } +.product-category-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.product-category-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.product-category-wrapper :is(.z-10) { + z-index: 10; +} + .product-category-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -581,6 +602,11 @@ video { margin-right: auto; } +.product-category-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .product-category-wrapper :is(.mb-3) { margin-bottom: 0.75rem; } @@ -593,6 +619,26 @@ video { margin-top: 0.75rem; } +.product-category-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.product-category-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.product-category-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.product-category-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.product-category-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .product-category-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; @@ -631,6 +677,10 @@ video { height: 5rem !important; } +.product-category-wrapper :is(.h-48) { + height: 12rem; +} + .product-category-wrapper :is(.w-full) { width: 100%; } @@ -655,6 +705,10 @@ video { flex-direction: column; } +.product-category-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .product-category-wrapper :is(.items-center) { align-items: center; } @@ -681,6 +735,11 @@ video { overflow: hidden; } +.product-category-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .product-category-wrapper :is(.\!break-words) { overflow-wrap: break-word !important; } @@ -697,6 +756,14 @@ video { border-radius: 0.5rem; } +.product-category-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.product-category-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .product-category-wrapper :is(.border) { border-width: 1px; } @@ -720,6 +787,19 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.product-category-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.product-category-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.product-category-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .product-category-wrapper :is(.\!px-7) { padding-left: 1.75rem !important; padding-right: 1.75rem !important; @@ -750,10 +830,35 @@ video { padding-bottom: 1.25rem; } +.product-category-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .product-category-wrapper :is(.\!pb-0) { padding-bottom: 0px !important; } +.product-category-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.product-category-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.product-category-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.product-category-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.product-category-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .product-category-wrapper :is(.\!text-lg) { font-size: 1.125rem !important; line-height: 1.75rem !important; @@ -764,10 +869,23 @@ video { line-height: 1.25rem; } +.product-category-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .product-category-wrapper :is(.\!font-semibold) { font-weight: 700 !important; } +.product-category-wrapper :is(.font-bold) { + font-weight: 700; +} + +.product-category-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .product-category-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; color: rgb(17 24 39 / var(--tw-text-opacity)) !important; @@ -784,6 +902,12 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.product-category-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .product-category-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -817,8 +941,94 @@ video { } } +@media (min-width: 768px) { + .product-category-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .product-category-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + @media (min-width: 1024px) { + .product-category-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .product-category-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .product-category-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .product-category-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } +} + +@media (min-width: 1280px) { + .product-category-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .product-category-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .product-category-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .product-category-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .product-category-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .product-category-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.product-category-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.product-category-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.product-category-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.product-category-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.product-category-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.product-category-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.product-category-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.product-category-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-citations/product-citations.css b/blocks/product-citations/product-citations.css index 1c97d4786..ee12ea442 100644 --- a/blocks/product-citations/product-citations.css +++ b/blocks/product-citations/product-citations.css @@ -534,10 +534,75 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.product-citations-wrapper :is(.fixed) { + position: fixed; +} + +.product-citations-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.product-citations-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.product-citations-wrapper :is(.z-10) { + z-index: 10; +} + .product-citations-wrapper :is(.float-none) { float: none; } +.product-citations-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.product-citations-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .product-citations-wrapper :is(.mb-0) { margin-bottom: 0px; } @@ -546,10 +611,34 @@ video { margin-left: 0px; } +.product-citations-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.product-citations-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.product-citations-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.product-citations-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.product-citations-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .product-citations-wrapper :is(.block) { display: block; } +.product-citations-wrapper :is(.flex) { + display: flex; +} + .product-citations-wrapper :is(.h-3) { height: 0.75rem; } @@ -566,15 +655,71 @@ video { width: 100%; } +.product-citations-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + +.product-citations-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.product-citations-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.product-citations-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .product-citations-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.product-citations-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.product-citations-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.product-citations-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.product-citations-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.product-citations-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .product-citations-wrapper :is(.pb-0) { padding-bottom: 0px; } +.product-citations-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.product-citations-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.product-citations-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.product-citations-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .product-citations-wrapper :is(.align-top) { vertical-align: top; } @@ -584,7 +729,129 @@ video { line-height: 1rem; } +.product-citations-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.product-citations-wrapper :is(.font-bold) { + font-weight: 700; +} + +.product-citations-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .product-citations-wrapper :is(.text-danaherblue-900) { --tw-text-opacity: 1; color: rgb(6 28 68 / var(--tw-text-opacity)); +} + +.product-citations-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.product-citations-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-citations-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-citations-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +@media (min-width: 768px) { + .product-citations-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .product-citations-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .product-citations-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .product-citations-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .product-citations-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .product-citations-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .product-citations-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .product-citations-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .product-citations-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .product-citations-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .product-citations-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.product-citations-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.product-citations-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.product-citations-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.product-citations-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.product-citations-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.product-citations-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.product-citations-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.product-citations-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-hero/product-hero.css b/blocks/product-hero/product-hero.css new file mode 100644 index 000000000..b1d91cd23 --- /dev/null +++ b/blocks/product-hero/product-hero.css @@ -0,0 +1,1039 @@ +/* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.btn-outline-trending-brand { + color: #7523FF; + background-color: rgb(255 255 255); + border-color: #7523FF; + border-width: 2px; +} + +.btn-outline-trending-brand:hover { + color: rgb(255 255 255); + background-color: #7523FF; +} + +.product-hero-wrapper :is(.relative) { + position: relative; +} + +.product-hero-wrapper :is(.order-first) { + order: -9999; +} + +.product-hero-wrapper :is(.col-span-10) { + grid-column: span 10 / span 10; +} + +.product-hero-wrapper :is(.col-span-2) { + grid-column: span 2 / span 2; +} + +.product-hero-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.product-hero-wrapper :is(.-mt-\[21px\]) { + margin-top: -21px; +} + +.product-hero-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.product-hero-wrapper :is(.mb-2\.5) { + margin-bottom: 0.625rem; +} + +.product-hero-wrapper :is(.mb-3) { + margin-bottom: 0.75rem; +} + +.product-hero-wrapper :is(.ml-12) { + margin-left: 3rem; +} + +.product-hero-wrapper :is(.mt-3) { + margin-top: 0.75rem; +} + +.product-hero-wrapper :is(.mt-5) { + margin-top: 1.25rem; +} + +.product-hero-wrapper :is(.mt-8) { + margin-top: 2rem; +} + +.product-hero-wrapper :is(.mt-\[-256px\]) { + margin-top: -256px; +} + +.product-hero-wrapper :is(.block) { + display: block; +} + +.product-hero-wrapper :is(.inline-block) { + display: inline-block; +} + +.product-hero-wrapper :is(.flex) { + display: flex; +} + +.product-hero-wrapper :is(.hidden) { + display: none; +} + +.product-hero-wrapper :is(.h-16) { + height: 4rem; +} + +.product-hero-wrapper :is(.h-4) { + height: 1rem; +} + +.product-hero-wrapper :is(.h-5) { + height: 1.25rem; +} + +.product-hero-wrapper :is(.h-\[17rem\]) { + height: 17rem; +} + +.product-hero-wrapper :is(.h-\[400px\]) { + height: 400px; +} + +.product-hero-wrapper :is(.h-full) { + height: 100%; +} + +.product-hero-wrapper :is(.w-16) { + width: 4rem; +} + +.product-hero-wrapper :is(.w-4) { + width: 1rem; +} + +.product-hero-wrapper :is(.w-5) { + width: 1.25rem; +} + +.product-hero-wrapper :is(.w-\[400px\]) { + width: 400px; +} + +.product-hero-wrapper :is(.w-\[98\%\]) { + width: 98%; +} + +.product-hero-wrapper :is(.w-full) { + width: 100%; +} + +.product-hero-wrapper :is(.max-w-\[400px\]) { + max-width: 400px; +} + +.product-hero-wrapper :is(.shrink-0) { + flex-shrink: 0; +} + +.product-hero-wrapper :is(.cursor-pointer) { + cursor: pointer; +} + +.product-hero-wrapper :is(.snap-x) { + scroll-snap-type: x var(--tw-scroll-snap-strictness); +} + +.product-hero-wrapper :is(.scroll-pl-6) { + scroll-padding-left: 1.5rem; +} + +.product-hero-wrapper :is(.list-disc) { + list-style-type: disc; +} + +.product-hero-wrapper :is(.flex-row) { + flex-direction: row; +} + +.product-hero-wrapper :is(.flex-col) { + flex-direction: column; +} + +.product-hero-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + +.product-hero-wrapper :is(.items-start) { + align-items: flex-start; +} + +.product-hero-wrapper :is(.items-center) { + align-items: center; +} + +.product-hero-wrapper :is(.justify-center) { + justify-content: center; +} + +.product-hero-wrapper :is(.justify-between) { + justify-content: space-between; +} + +.product-hero-wrapper :is(.gap-2) { + gap: 0.5rem; +} + +.product-hero-wrapper :is(.gap-3) { + gap: 0.75rem; +} + +.product-hero-wrapper :is(.gap-x-4) { + -moz-column-gap: 1rem; + column-gap: 1rem; +} + +.product-hero-wrapper :is(.overflow-auto) { + overflow: auto; +} + +.product-hero-wrapper :is(.overflow-hidden) { + overflow: hidden; +} + +.product-hero-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.product-hero-wrapper :is(.rounded-md) { + border-radius: 0.375rem; +} + +.product-hero-wrapper :is(.border-b) { + border-bottom-width: 1px; +} + +.product-hero-wrapper :is(.border-b-2) { + border-bottom-width: 2px; +} + +.product-hero-wrapper :is(.border-danaherpurple-500) { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +.product-hero-wrapper :is(.border-gray-300) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.product-hero-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.product-hero-wrapper :is(.bg-transparent) { + background-color: transparent; +} + +.product-hero-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.product-hero-wrapper :is(.object-contain) { + -o-object-fit: contain; + object-fit: contain; +} + +.product-hero-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.product-hero-wrapper :is(.p-4) { + padding: 1rem; +} + +.product-hero-wrapper :is(.px-3) { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.product-hero-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem; +} + +.product-hero-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.product-hero-wrapper :is(.py-3) { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.product-hero-wrapper :is(.pb-1) { + padding-bottom: 0.25rem; +} + +.product-hero-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + +.product-hero-wrapper :is(.text-left) { + text-align: left; +} + +.product-hero-wrapper :is(.text-center) { + text-align: center; +} + +.product-hero-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.product-hero-wrapper :is(.text-lg) { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.product-hero-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.product-hero-wrapper :is(.font-bold) { + font-weight: 700; +} + +.product-hero-wrapper :is(.font-medium) { + font-weight: 500; +} + +.product-hero-wrapper :is(.font-normal) { + font-weight: 200; +} + +.product-hero-wrapper :is(.font-semibold) { + font-weight: 700; +} + +.product-hero-wrapper :is(.leading-4) { + line-height: 1rem; +} + +.product-hero-wrapper :is(.leading-5) { + line-height: 1.25rem; +} + +.product-hero-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.product-hero-wrapper :is(.leading-tight) { + line-height: 1.25; +} + +.product-hero-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.product-hero-wrapper :is(.text-gray-400) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.product-hero-wrapper :is(.text-gray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.product-hero-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.product-hero-wrapper :is(.\!no-underline) { + text-decoration-line: none !important; +} + +.product-hero-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-hero-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-hero-wrapper :is(.shadow-sm) { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-hero-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.product-hero-wrapper :is(.duration-500) { + transition-duration: 500ms; +} + +.product-hero-wrapper :is(.duration-700) { + transition-duration: 700ms; +} + +.product-hero-wrapper :is(.hover\:border:hover) { + border-width: 1px; +} + +.product-hero-wrapper :is(.hover\:border-danaherpurple-500:hover) { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +@media (min-width: 768px) { + .product-hero-wrapper :is(.md\:col-span-6) { + grid-column: span 6 / span 6; + } + + .product-hero-wrapper :is(.md\:flex-row) { + flex-direction: row; + } + + .product-hero-wrapper :is(.md\:gap-12) { + gap: 3rem; + } + + .product-hero-wrapper :is(.md\:shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .product-hero-wrapper :is(.md\:shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } +} + +@media (min-width: 1024px) { + .product-hero-wrapper :is(.lg\:order-first) { + order: -9999; + } + + .product-hero-wrapper :is(.lg\:w-20) { + width: 5rem; + } + + .product-hero-wrapper :is(.lg\:w-55) { + width: 14rem; + } + + .product-hero-wrapper :is(.lg\:flex-row) { + flex-direction: row; + } + + .product-hero-wrapper :is(.lg\:flex-col) { + flex-direction: column; + } + + .product-hero-wrapper :is(.lg\:gap-16) { + gap: 4rem; + } +} + +.product-hero-wrapper :is(.\[\&\>\*\.active\>img\]\:border-2>*.active>img) { + border-width: 2px; +} + +.product-hero-wrapper :is(.\[\&\>\*\.active\>img\]\:border-danaherpurple-500>*.active>img) { + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +.product-hero-wrapper :is(.\[\&\>\*\.active\>img\]\:opacity-80>*.active>img) { + opacity: 0.8; +} + +.product-hero-wrapper :is(.\[\&\>\*\.view-more\]\:h-\[75px\]>*.view-more) { + height: 75px; +} + +.product-hero-wrapper :is(.\[\&\>\*\.view-more\]\:w-\[75px\]>*.view-more) { + width: 75px; +} + +.product-hero-wrapper :is(.\[\&\>\*\.view-more\]\:cursor-pointer>*.view-more) { + cursor: pointer; +} + +.product-hero-wrapper :is(.\[\&\>\*\>img\]\:h-\[75px\]>*>img) { + height: 75px; +} + +.product-hero-wrapper :is(.\[\&\>\*\>img\]\:w-\[75px\]>*>img) { + width: 75px; +} + +.product-hero-wrapper :is(.\[\&\>\*\>img\]\:cursor-pointer>*>img) { + cursor: pointer; +} + +.product-hero-wrapper :is(.\[\&\>picture\]\:w-max>picture) { + width: -moz-max-content; + width: max-content; +} \ No newline at end of file diff --git a/blocks/product-menu/product-menu.css b/blocks/product-menu/product-menu.css index faf14b45f..fa226e012 100644 --- a/blocks/product-menu/product-menu.css +++ b/blocks/product-menu/product-menu.css @@ -534,6 +534,91 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.product-menu-wrapper :is(.fixed) { + position: fixed; +} + +.product-menu-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.product-menu-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.product-menu-wrapper :is(.z-10) { + z-index: 10; +} + +.product-menu-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.product-menu-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.product-menu-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.product-menu-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.product-menu-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.product-menu-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.product-menu-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .product-menu-wrapper :is(.block) { display: block; } @@ -550,6 +635,10 @@ video { height: 5rem; } +.product-menu-wrapper :is(.h-48) { + height: 12rem; +} + .product-menu-wrapper :is(.\!w-full) { width: 100% !important; } @@ -580,6 +669,10 @@ video { flex-direction: column; } +.product-menu-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .product-menu-wrapper :is(.items-center) { align-items: center; } @@ -606,10 +699,23 @@ video { align-self: center; } +.product-menu-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .product-menu-wrapper :is(.rounded-md) { border-radius: 0.375rem; } +.product-menu-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.product-menu-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .product-menu-wrapper :is(.border-2) { border-width: 2px; } @@ -624,11 +730,29 @@ video { background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.product-menu-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.product-menu-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.product-menu-wrapper :is(.stroke-white) { + stroke: #fff; +} + .product-menu-wrapper :is(.object-contain) { -o-object-fit: contain; object-fit: contain; } +.product-menu-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .product-menu-wrapper :is(.object-center) { -o-object-position: center; object-position: center; @@ -643,25 +767,80 @@ video { padding-bottom: 1rem; } +.product-menu-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.product-menu-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.product-menu-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.product-menu-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.product-menu-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.product-menu-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .product-menu-wrapper :is(.text-lg) { font-size: 1.125rem; line-height: 1.75rem; } +.product-menu-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .product-menu-wrapper :is(.font-semibold) { font-weight: 700; } +.product-menu-wrapper :is(.font-bold) { + font-weight: 700; +} + .product-menu-wrapper :is(.leading-6) { line-height: 1.5rem; } +.product-menu-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .product-menu-wrapper :is(.shadow-md) { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.product-menu-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-menu-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-menu-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .product-menu-wrapper :is(.duration-300) { transition-duration: 300ms; } @@ -678,6 +857,10 @@ video { } @media (min-width: 768px) { + .product-menu-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .product-menu-wrapper :is(.md\:w-1\/3) { width: 33.333333%; } @@ -685,10 +868,90 @@ video { .product-menu-wrapper :is(.md\:flex-row) { flex-direction: row; } + + .product-menu-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } } @media (min-width: 1024px) { + .product-menu-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .product-menu-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .product-menu-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .product-menu-wrapper :is(.lg\:flex-shrink-0) { flex-shrink: 0; } +} + +@media (min-width: 1280px) { + .product-menu-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .product-menu-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .product-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .product-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .product-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .product-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.product-menu-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.product-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.product-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.product-menu-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.product-menu-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.product-menu-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.product-menu-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.product-menu-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-overview/product-overview.css b/blocks/product-overview/product-overview.css index 591dcadd3..c49014ca8 100644 --- a/blocks/product-overview/product-overview.css +++ b/blocks/product-overview/product-overview.css @@ -534,6 +534,40 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + .href-text a { position: relative; z-index: 0; @@ -555,19 +589,122 @@ video { background-color: #7523FF; } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.product-overview-wrapper :is(.fixed) { + position: fixed; +} + +.product-overview-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.product-overview-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.product-overview-wrapper :is(.z-10) { + z-index: 10; +} + +.product-overview-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.product-overview-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.product-overview-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.product-overview-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.product-overview-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.product-overview-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.product-overview-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .product-overview-wrapper :is(.block) { display: block; } +.product-overview-wrapper :is(.flex) { + display: flex; +} + +.product-overview-wrapper :is(.h-48) { + height: 12rem; +} + +.product-overview-wrapper :is(.w-full) { + width: 100%; +} + .product-overview-wrapper :is(.list-disc) { list-style-type: disc; } +.product-overview-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + +.product-overview-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.product-overview-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.product-overview-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .product-overview-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.product-overview-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.product-overview-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.product-overview-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.product-overview-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.product-overview-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .product-overview-wrapper :is(.pl-12) { padding-left: 3rem; } @@ -580,22 +717,158 @@ video { padding-top: 0.625rem; } +.product-overview-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.product-overview-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.product-overview-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.product-overview-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.product-overview-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .product-overview-wrapper :is(.text-lg) { font-size: 1.125rem; line-height: 1.75rem; } +.product-overview-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.product-overview-wrapper :is(.font-bold) { + font-weight: 700; +} + .product-overview-wrapper :is(.leading-7) { line-height: 1.75rem; } +.product-overview-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .product-overview-wrapper :is(.text-danahergray-700) { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } +.product-overview-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.product-overview-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-overview-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-overview-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +@media (min-width: 768px) { + .product-overview-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .product-overview-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .product-overview-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .product-overview-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .product-overview-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + @media (min-width: 1280px) { .product-overview-wrapper :is(.xl\:w-3\/4) { width: 75%; } + + .product-overview-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } +} + +@media (min-width: 768px) { + .product-overview-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .product-overview-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .product-overview-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .product-overview-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.product-overview-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.product-overview-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.product-overview-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.product-overview-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.product-overview-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.product-overview-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.product-overview-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.product-overview-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-parts/product-parts.css b/blocks/product-parts/product-parts.css index 2b27a59dc..3d8993afe 100644 --- a/blocks/product-parts/product-parts.css +++ b/blocks/product-parts/product-parts.css @@ -534,6 +534,61 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.product-parts-wrapper :is(.fixed) { + position: fixed; +} + +.product-parts-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.product-parts-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.product-parts-wrapper :is(.z-10) { + z-index: 10; +} + .product-parts-wrapper :is(.col-span-2) { grid-column: span 2 / span 2; } @@ -546,6 +601,36 @@ video { grid-column: span 8 / span 8; } +.product-parts-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.product-parts-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.product-parts-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.product-parts-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.product-parts-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.product-parts-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.product-parts-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .product-parts-wrapper :is(.block) { display: block; } @@ -566,10 +651,18 @@ video { height: 4rem; } +.product-parts-wrapper :is(.h-48) { + height: 12rem; +} + .product-parts-wrapper :is(.w-16) { width: 4rem; } +.product-parts-wrapper :is(.w-full) { + width: 100%; +} + .product-parts-wrapper :is(.grid-cols-12) { grid-template-columns: repeat(12, minmax(0, 1fr)); } @@ -582,6 +675,10 @@ video { flex-direction: column; } +.product-parts-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .product-parts-wrapper :is(.\!content-center) { align-content: center !important; } @@ -598,10 +695,23 @@ video { row-gap: 1rem; } +.product-parts-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .product-parts-wrapper :is(.rounded-md) { border-radius: 0.375rem; } +.product-parts-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.product-parts-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .product-parts-wrapper :is(.border-b) { border-bottom-width: 1px; } @@ -611,6 +721,29 @@ video { background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.product-parts-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.product-parts-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.product-parts-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.product-parts-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.product-parts-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .product-parts-wrapper :is(.pb-2) { padding-bottom: 0.5rem; } @@ -627,6 +760,18 @@ video { padding-top: 1rem; } +.product-parts-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.product-parts-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.product-parts-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .product-parts-wrapper :is(.text-base) { font-size: 1rem; line-height: 1.5rem; @@ -655,20 +800,43 @@ video { color: rgb(0 0 0 / var(--tw-text-opacity)); } +.product-parts-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .product-parts-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.product-parts-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-parts-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + @media (min-width: 768px) { .product-parts-wrapper :is(.md\:col-span-2) { grid-column: span 2 / span 2; } + .product-parts-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .product-parts-wrapper :is(.md\:flex) { display: flex; } + + .product-parts-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } } @media (min-width: 1024px) { @@ -679,4 +847,80 @@ video { .product-parts-wrapper :is(.lg\:col-span-10) { grid-column: span 10 / span 10; } + + .product-parts-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .product-parts-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .product-parts-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .product-parts-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .product-parts-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .product-parts-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .product-parts-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .product-parts-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .product-parts-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.product-parts-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.product-parts-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.product-parts-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.product-parts-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.product-parts-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.product-parts-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.product-parts-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.product-parts-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-recommendations/product-recommendations.css b/blocks/product-recommendations/product-recommendations.css index 3af4cd1b2..3b560ccf1 100644 --- a/blocks/product-recommendations/product-recommendations.css +++ b/blocks/product-recommendations/product-recommendations.css @@ -572,10 +572,27 @@ video { scrollbar-width: none; } +.product-recommendations-wrapper :is(.fixed) { + position: fixed; +} + .product-recommendations-wrapper :is(.relative) { position: relative; } +.product-recommendations-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.product-recommendations-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.product-recommendations-wrapper :is(.z-10) { + z-index: 10; +} + .product-recommendations-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -585,6 +602,11 @@ video { margin-right: auto; } +.product-recommendations-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .product-recommendations-wrapper :is(.mb-3) { margin-bottom: 0.75rem; } @@ -601,6 +623,26 @@ video { margin-top: 0.75rem; } +.product-recommendations-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.product-recommendations-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.product-recommendations-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.product-recommendations-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.product-recommendations-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .product-recommendations-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; @@ -643,6 +685,10 @@ video { height: 5rem !important; } +.product-recommendations-wrapper :is(.h-48) { + height: 12rem; +} + .product-recommendations-wrapper :is(.w-full) { width: 100%; } @@ -683,6 +729,10 @@ video { flex-direction: column; } +.product-recommendations-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .product-recommendations-wrapper :is(.items-center) { align-items: center; } @@ -738,6 +788,11 @@ video { scroll-behavior: smooth; } +.product-recommendations-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .product-recommendations-wrapper :is(.\!break-words) { overflow-wrap: break-word !important; } @@ -758,6 +813,14 @@ video { border-radius: 0.375rem; } +.product-recommendations-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.product-recommendations-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .product-recommendations-wrapper :is(.border) { border-width: 1px; } @@ -781,6 +844,19 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.product-recommendations-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.product-recommendations-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.product-recommendations-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .product-recommendations-wrapper :is(.\!px-7) { padding-left: 1.75rem !important; padding-right: 1.75rem !important; @@ -806,6 +882,11 @@ video { padding-bottom: 1.25rem; } +.product-recommendations-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .product-recommendations-wrapper :is(.pb-2) { padding-bottom: 0.5rem; } @@ -814,6 +895,26 @@ video { padding-top: 2rem; } +.product-recommendations-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.product-recommendations-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.product-recommendations-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.product-recommendations-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.product-recommendations-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .product-recommendations-wrapper :is(.\!text-lg) { font-size: 1.125rem !important; line-height: 1.75rem !important; @@ -837,6 +938,10 @@ video { font-weight: 700; } +.product-recommendations-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .product-recommendations-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; color: rgb(17 24 39 / var(--tw-text-opacity)) !important; @@ -858,6 +963,16 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.product-recommendations-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-recommendations-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .product-recommendations-wrapper :is(.transition) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -888,12 +1003,32 @@ video { } @media (min-width: 768px) { + .product-recommendations-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .product-recommendations-wrapper :is(.md\:auto-cols-\[calc\(100\%\/2\)\]) { grid-auto-columns: calc(100% / 2); } + + .product-recommendations-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } } @media (min-width: 1024px) { + .product-recommendations-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .product-recommendations-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .product-recommendations-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .product-recommendations-wrapper :is(.lg\:auto-cols-\[calc\(\(100\%\/3\)-20px\)\]) { grid-auto-columns: calc((100% / 3) - 20px); } @@ -904,7 +1039,69 @@ video { } @media (min-width: 1280px) { + .product-recommendations-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .product-recommendations-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } + .product-recommendations-wrapper :is(.xl\:auto-cols-\[calc\(\(100\%\/4\)-20px\)\]) { grid-auto-columns: calc((100% / 4) - 20px); } +} + +@media (min-width: 768px) { + .product-recommendations-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .product-recommendations-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .product-recommendations-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .product-recommendations-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.product-recommendations-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.product-recommendations-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.product-recommendations-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.product-recommendations-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.product-recommendations-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.product-recommendations-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.product-recommendations-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.product-recommendations-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-specifications/product-specifications.css b/blocks/product-specifications/product-specifications.css index 9422907cc..01927d1cd 100644 --- a/blocks/product-specifications/product-specifications.css +++ b/blocks/product-specifications/product-specifications.css @@ -534,15 +534,100 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.product-specifications-wrapper :is(.fixed) { + position: fixed; +} + +.product-specifications-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.product-specifications-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.product-specifications-wrapper :is(.z-10) { + z-index: 10; +} + .product-specifications-wrapper :is(.my-auto) { margin-top: auto; margin-bottom: auto; } +.product-specifications-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.product-specifications-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .product-specifications-wrapper :is(.mt-2) { margin-top: 0.5rem; } +.product-specifications-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.product-specifications-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.product-specifications-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.product-specifications-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.product-specifications-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .product-specifications-wrapper :is(.block) { display: block; } @@ -555,6 +640,10 @@ video { height: 100%; } +.product-specifications-wrapper :is(.h-48) { + height: 12rem; +} + .product-specifications-wrapper :is(.w-full) { width: 100%; } @@ -582,6 +671,11 @@ video { border-color: rgb(209 213 219 / var(--tw-divide-opacity)); } +.product-specifications-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .product-specifications-wrapper :is(.break-words) { overflow-wrap: break-word; } @@ -590,6 +684,14 @@ video { border-radius: 0.5rem; } +.product-specifications-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.product-specifications-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .product-specifications-wrapper :is(.border) { border-width: 1px; } @@ -604,6 +706,24 @@ video { background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } +.product-specifications-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.product-specifications-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.product-specifications-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.product-specifications-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .product-specifications-wrapper :is(.p-4) { padding: 1rem; } @@ -613,10 +733,35 @@ video { padding-right: 0.25rem; } +.product-specifications-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .product-specifications-wrapper :is(.pt-12) { padding-top: 3rem; } +.product-specifications-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.product-specifications-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.product-specifications-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.product-specifications-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.product-specifications-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .product-specifications-wrapper :is(.align-middle) { vertical-align: middle; } @@ -631,6 +776,11 @@ video { line-height: 1.75rem; } +.product-specifications-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .product-specifications-wrapper :is(.font-medium) { font-weight: 500; } @@ -639,6 +789,10 @@ video { font-weight: 200; } +.product-specifications-wrapper :is(.font-bold) { + font-weight: 700; +} + .product-specifications-wrapper :is(.leading-6) { line-height: 1.5rem; } @@ -658,6 +812,22 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } +.product-specifications-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-specifications-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.product-specifications-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + @media (min-width: 640px) { .product-specifications-wrapper :is(.sm\:flex) { display: flex; @@ -673,6 +843,10 @@ video { } @media (min-width: 768px) { + .product-specifications-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + .product-specifications-wrapper :is(.md\:w-1\/4) { width: 25%; } @@ -680,4 +854,86 @@ video { .product-specifications-wrapper :is(.md\:w-2\/4) { width: 50%; } + + .product-specifications-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .product-specifications-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .product-specifications-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .product-specifications-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .product-specifications-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .product-specifications-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .product-specifications-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .product-specifications-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .product-specifications-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .product-specifications-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.product-specifications-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.product-specifications-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.product-specifications-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.product-specifications-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.product-specifications-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.product-specifications-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.product-specifications-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.product-specifications-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/recent-articles/recent-articles.css b/blocks/recent-articles/recent-articles.css index 23969df4f..0049c054f 100644 --- a/blocks/recent-articles/recent-articles.css +++ b/blocks/recent-articles/recent-articles.css @@ -534,11 +534,71 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.recent-articles-wrapper :is(.fixed) { + position: fixed; +} + +.recent-articles-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.recent-articles-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.recent-articles-wrapper :is(.z-10) { + z-index: 10; +} + .recent-articles-wrapper :is(.my-0) { margin-top: 0px; margin-bottom: 0px; } +.recent-articles-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + .recent-articles-wrapper :is(.mb-0) { margin-bottom: 0px; } @@ -555,6 +615,26 @@ video { margin-top: 0.5rem; } +.recent-articles-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.recent-articles-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.recent-articles-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.recent-articles-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.recent-articles-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .recent-articles-wrapper :is(.block) { display: block; } @@ -567,14 +647,26 @@ video { height: 1rem; } +.recent-articles-wrapper :is(.h-48) { + height: 12rem; +} + .recent-articles-wrapper :is(.w-4) { width: 1rem; } +.recent-articles-wrapper :is(.w-full) { + width: 100%; +} + .recent-articles-wrapper :is(.flex-shrink-0) { flex-shrink: 0; } +.recent-articles-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .recent-articles-wrapper :is(.items-center) { align-items: center; } @@ -589,10 +681,23 @@ video { border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } +.recent-articles-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + .recent-articles-wrapper :is(.rounded) { border-radius: 0.25rem; } +.recent-articles-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.recent-articles-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .recent-articles-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -603,6 +708,24 @@ video { background-color: rgb(245 239 255 / var(--tw-bg-opacity)); } +.recent-articles-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.recent-articles-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.recent-articles-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.recent-articles-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .recent-articles-wrapper :is(.p-1) { padding: 0.25rem; } @@ -621,6 +744,11 @@ video { padding-right: 1rem; } +.recent-articles-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .recent-articles-wrapper :is(.pb-0) { padding-bottom: 0px; } @@ -641,6 +769,18 @@ video { padding-top: 0.5rem; } +.recent-articles-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.recent-articles-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.recent-articles-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .recent-articles-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; @@ -656,6 +796,11 @@ video { line-height: 1rem; } +.recent-articles-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .recent-articles-wrapper :is(.\!font-normal) { font-weight: 200 !important; } @@ -684,6 +829,10 @@ video { line-height: 1.75rem; } +.recent-articles-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .recent-articles-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)); @@ -694,6 +843,18 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } +.recent-articles-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.recent-articles-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .recent-articles-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -721,4 +882,92 @@ video { .recent-articles-wrapper :is(.hover\:font-bold:hover) { font-weight: 700; +} + +@media (min-width: 768px) { + .recent-articles-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .recent-articles-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .recent-articles-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .recent-articles-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .recent-articles-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .recent-articles-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .recent-articles-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .recent-articles-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .recent-articles-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .recent-articles-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .recent-articles-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.recent-articles-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.recent-articles-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.recent-articles-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.recent-articles-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.recent-articles-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.recent-articles-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.recent-articles-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.recent-articles-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/related-articles/related-articles.css b/blocks/related-articles/related-articles.css index 940d75ffa..4d7706fdd 100644 --- a/blocks/related-articles/related-articles.css +++ b/blocks/related-articles/related-articles.css @@ -568,11 +568,37 @@ video { } } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.related-articles-wrapper :is(.fixed) { + position: fixed; +} + +.related-articles-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.related-articles-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.related-articles-wrapper :is(.z-10) { + z-index: 10; +} + .related-articles-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; } +.related-articles-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .related-articles-wrapper :is(.mb-3) { margin-bottom: 0.75rem; } @@ -581,14 +607,42 @@ video { margin-top: 0.75rem; } +.related-articles-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.related-articles-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.related-articles-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.related-articles-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.related-articles-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .related-articles-wrapper :is(.block) { display: block; } +.related-articles-wrapper :is(.flex) { + display: flex; +} + .related-articles-wrapper :is(.grid) { display: grid; } +.related-articles-wrapper :is(.h-48) { + height: 12rem; +} + .related-articles-wrapper :is(.w-full) { width: 100%; } @@ -601,6 +655,10 @@ video { grid-template-columns: repeat(1, minmax(0, 1fr)); } +.related-articles-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .related-articles-wrapper :is(.justify-items-center) { justify-items: center; } @@ -609,25 +667,111 @@ video { gap: 1.5rem; } +.related-articles-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.related-articles-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.related-articles-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .related-articles-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.related-articles-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.related-articles-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.related-articles-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.related-articles-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .related-articles-wrapper :is(.px-3) { padding-left: 0.75rem; padding-right: 0.75rem; } +.related-articles-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.related-articles-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.related-articles-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.related-articles-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.related-articles-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.related-articles-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .related-articles-wrapper :is(.text-lg) { font-size: 1.125rem; line-height: 1.75rem; } +.related-articles-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .related-articles-wrapper :is(.font-semibold) { font-weight: 700; } +.related-articles-wrapper :is(.font-bold) { + font-weight: 700; +} + +.related-articles-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.related-articles-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.related-articles-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.related-articles-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .related-articles-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -643,8 +787,94 @@ video { } } +@media (min-width: 768px) { + .related-articles-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .related-articles-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + @media (min-width: 1024px) { + .related-articles-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .related-articles-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .related-articles-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .related-articles-wrapper :is(.lg\:grid-cols-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} + +@media (min-width: 1280px) { + .related-articles-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .related-articles-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .related-articles-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .related-articles-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .related-articles-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .related-articles-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.related-articles-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.related-articles-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.related-articles-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.related-articles-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.related-articles-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.related-articles-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.related-articles-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.related-articles-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/side-nav/side-nav.css b/blocks/side-nav/side-nav.css index ebefdb0ca..2408a37d7 100644 --- a/blocks/side-nav/side-nav.css +++ b/blocks/side-nav/side-nav.css @@ -534,10 +534,95 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + .bg-danaherpurple-50 { background-color: #EADEFF; } +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.side-nav-wrapper :is(.fixed) { + position: fixed; +} + +.side-nav-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.side-nav-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.side-nav-wrapper :is(.z-10) { + z-index: 10; +} + +.side-nav-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.side-nav-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.side-nav-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.side-nav-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.side-nav-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.side-nav-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.side-nav-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .side-nav-wrapper :is(.block) { display: block; } @@ -550,6 +635,10 @@ video { display: none; } +.side-nav-wrapper :is(.h-48) { + height: 12rem; +} + .side-nav-wrapper :is(.w-full) { width: 100%; } @@ -558,6 +647,10 @@ video { flex-direction: column; } +.side-nav-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .side-nav-wrapper :is(.items-start) { align-items: flex-start; } @@ -566,6 +659,19 @@ video { gap: 0.75rem; } +.side-nav-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.side-nav-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.side-nav-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .side-nav-wrapper :is(.border-b) { border-bottom-width: 1px; } @@ -585,6 +691,24 @@ video { background-color: rgb(234 222 255 / var(--tw-bg-opacity)); } +.side-nav-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.side-nav-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.side-nav-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.side-nav-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .side-nav-wrapper :is(.p-2) { padding: 0.5rem; } @@ -599,6 +723,11 @@ video { padding-bottom: 1rem; } +.side-nav-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .side-nav-wrapper :is(.pt-20) { padding-top: 5rem; } @@ -607,6 +736,22 @@ video { padding-top: 1.5rem; } +.side-nav-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.side-nav-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.side-nav-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.side-nav-wrapper :is(.pt-4) { + padding-top: 1rem; +} + .side-nav-wrapper :is(.text-base) { font-size: 1rem; line-height: 1.5rem; @@ -621,6 +766,27 @@ video { font-weight: 700; } +.side-nav-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.side-nav-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.side-nav-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.side-nav-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .side-nav-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -639,8 +805,94 @@ video { background-color: rgb(234 222 255 / var(--tw-bg-opacity)); } +@media (min-width: 768px) { + .side-nav-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .side-nav-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + @media (min-width: 1024px) { + .side-nav-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + .side-nav-wrapper :is(.lg\:block) { display: block; } + + .side-nav-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .side-nav-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .side-nav-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .side-nav-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .side-nav-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .side-nav-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .side-nav-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .side-nav-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.side-nav-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.side-nav-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.side-nav-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.side-nav-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.side-nav-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.side-nav-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.side-nav-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.side-nav-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/social-feeds/social-feeds.css b/blocks/social-feeds/social-feeds.css index 1f2239f3a..d59dc4704 100644 --- a/blocks/social-feeds/social-feeds.css +++ b/blocks/social-feeds/social-feeds.css @@ -534,7 +534,290 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.social-feeds-wrapper :is(.fixed) { + position: fixed; +} + +.social-feeds-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.social-feeds-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.social-feeds-wrapper :is(.z-10) { + z-index: 10; +} + +.social-feeds-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.social-feeds-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + +.social-feeds-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.social-feeds-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.social-feeds-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.social-feeds-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.social-feeds-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + +.social-feeds-wrapper :is(.block) { + display: block; +} + +.social-feeds-wrapper :is(.flex) { + display: flex; +} + +.social-feeds-wrapper :is(.h-48) { + height: 12rem; +} + +.social-feeds-wrapper :is(.w-full) { + width: 100%; +} + +.social-feeds-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + +.social-feeds-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.social-feeds-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.social-feeds-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .social-feeds-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); +} + +.social-feeds-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.social-feeds-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.social-feeds-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.social-feeds-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.social-feeds-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.social-feeds-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.social-feeds-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.social-feeds-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.social-feeds-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.social-feeds-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + +.social-feeds-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + +.social-feeds-wrapper :is(.font-bold) { + font-weight: 700; +} + +.social-feeds-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + +.social-feeds-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.social-feeds-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.social-feeds-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.social-feeds-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +@media (min-width: 768px) { + .social-feeds-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .social-feeds-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .social-feeds-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .social-feeds-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .social-feeds-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .social-feeds-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .social-feeds-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .social-feeds-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .social-feeds-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .social-feeds-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .social-feeds-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.social-feeds-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.social-feeds-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.social-feeds-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.social-feeds-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.social-feeds-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.social-feeds-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.social-feeds-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.social-feeds-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/social-media/social-media.css b/blocks/social-media/social-media.css index 3d3c717cc..09e82ebab 100644 --- a/blocks/social-media/social-media.css +++ b/blocks/social-media/social-media.css @@ -534,10 +534,61 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.social-media-wrapper :is(.fixed) { + position: fixed; +} + .social-media-wrapper :is(.relative) { position: relative; } +.social-media-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.social-media-wrapper :is(.top-\[83px\]) { + top: 83px; +} + .social-media-wrapper :is(.z-10) { z-index: 10; } @@ -547,10 +598,40 @@ video { margin-bottom: auto; } +.social-media-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto; +} + +.social-media-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .social-media-wrapper :is(.mb-4) { margin-bottom: 1rem; } +.social-media-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.social-media-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.social-media-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.social-media-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.social-media-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .social-media-wrapper :is(.block) { display: block; } @@ -559,6 +640,18 @@ video { display: flex; } +.social-media-wrapper :is(.h-48) { + height: 12rem; +} + +.social-media-wrapper :is(.w-full) { + width: 100%; +} + +.social-media-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + .social-media-wrapper :is(.items-center) { align-items: center; } @@ -567,11 +660,47 @@ video { justify-content: space-between; } +.social-media-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.social-media-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.social-media-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .social-media-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.social-media-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.social-media-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.social-media-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.social-media-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + +.social-media-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .social-media-wrapper :is(.pb-2) { padding-bottom: 0.5rem; } @@ -580,6 +709,22 @@ video { padding-top: 1.5rem; } +.social-media-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.social-media-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.social-media-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.social-media-wrapper :is(.pt-4) { + padding-top: 1rem; +} + .social-media-wrapper :is(.text-base) { font-size: 1rem; line-height: 1.5rem; @@ -589,6 +734,14 @@ video { font-weight: 700; } +.social-media-wrapper :is(.font-bold) { + font-weight: 700; +} + +.social-media-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .social-media-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)); @@ -597,4 +750,113 @@ video { .social-media-wrapper :is(.text-gray-600) { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity)); +} + +.social-media-wrapper :is(.text-gray-900) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.social-media-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.social-media-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.social-media-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +@media (min-width: 768px) { + .social-media-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .social-media-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + +@media (min-width: 1024px) { + .social-media-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .social-media-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .social-media-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } +} + +@media (min-width: 1280px) { + .social-media-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .social-media-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .social-media-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .social-media-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .social-media-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .social-media-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.social-media-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.social-media-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.social-media-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.social-media-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.social-media-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.social-media-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.social-media-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.social-media-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/stats/stats.css b/blocks/stats/stats.css index ceabedd33..c3078b166 100644 --- a/blocks/stats/stats.css +++ b/blocks/stats/stats.css @@ -534,19 +534,111 @@ video { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { + scrollbar-width: none; +} + +.stats-wrapper :is(.fixed) { + position: fixed; +} + +.stats-wrapper :is(.inset-x-0) { + left: 0px; + right: 0px; +} + +.stats-wrapper :is(.top-\[83px\]) { + top: 83px; +} + +.stats-wrapper :is(.z-10) { + z-index: 10; +} + .stats-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; } +.stats-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px; +} + .stats-wrapper :is(.mt-3) { margin-top: 0.75rem; } +.stats-wrapper :is(.mb-2) { + margin-bottom: 0.5rem; +} + +.stats-wrapper :is(.mb-5) { + margin-bottom: 1.25rem; +} + +.stats-wrapper :is(.mt-0) { + margin-top: 0px; +} + +.stats-wrapper :is(.mt-4) { + margin-top: 1rem; +} + +.stats-wrapper :is(.mt-\[-1px\]) { + margin-top: -1px; +} + .stats-wrapper :is(.block) { display: block; } +.stats-wrapper :is(.flex) { + display: flex; +} + +.stats-wrapper :is(.h-48) { + height: 12rem; +} + +.stats-wrapper :is(.w-full) { + width: 100%; +} + .stats-wrapper :is(.max-w-4xl) { max-width: 56rem; } @@ -555,20 +647,80 @@ video { max-width: 80rem; } +.stats-wrapper :is(.flex-wrap) { + flex-wrap: wrap; +} + +.stats-wrapper :is(.break-normal) { + overflow-wrap: normal; + word-break: normal; +} + +.stats-wrapper :is(.rounded-full) { + border-radius: 9999px; +} + +.stats-wrapper :is(.rounded-none) { + border-radius: 0px; +} + .stats-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } +.stats-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.stats-wrapper :is(.stroke-danaherpurple-500) { + stroke: #7523FF; +} + +.stats-wrapper :is(.stroke-white) { + stroke: #fff; +} + +.stats-wrapper :is(.object-cover) { + -o-object-fit: cover; + object-fit: cover; +} + .stats-wrapper :is(.px-4) { padding-left: 1rem; padding-right: 1rem; } +.stats-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .stats-wrapper :is(.pt-12) { padding-top: 3rem; } +.stats-wrapper :is(.pb-0) { + padding-bottom: 0px; +} + +.stats-wrapper :is(.pb-10) { + padding-bottom: 2.5rem; +} + +.stats-wrapper :is(.pb-4) { + padding-bottom: 1rem; +} + +.stats-wrapper :is(.pt-4) { + padding-top: 1rem; +} + +.stats-wrapper :is(.pt-6) { + padding-top: 1.5rem; +} + .stats-wrapper :is(.text-center) { text-align: center; } @@ -583,10 +735,23 @@ video { line-height: 1.75rem; } +.stats-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem; +} + .stats-wrapper :is(.font-extrabold) { font-weight: 800; } +.stats-wrapper :is(.font-bold) { + font-weight: 700; +} + +.stats-wrapper :is(.leading-6) { + line-height: 1.5rem; +} + .stats-wrapper :is(.tracking-tight) { letter-spacing: -0.025em; } @@ -601,6 +766,22 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } +.stats-wrapper :is(.shadow-lg) { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.stats-wrapper :is(.shadow-none) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.stats-wrapper :is(.filter) { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + @media (min-width: 640px) { .stats-wrapper :is(.sm\:mt-4) { margin-top: 1rem; @@ -621,9 +802,95 @@ video { } } +@media (min-width: 768px) { + .stats-wrapper :is(.md\:mt-4) { + margin-top: 1rem; + } + + .stats-wrapper :is(.md\:pb-10) { + padding-bottom: 2.5rem; + } +} + @media (min-width: 1024px) { + .stats-wrapper :is(.lg\:mt-0) { + margin-top: 0px; + } + + .stats-wrapper :is(.lg\:w-1\/3) { + width: 33.333333%; + } + + .stats-wrapper :is(.lg\:w-2\/3) { + width: 66.666667%; + } + .stats-wrapper :is(.lg\:px-8) { padding-left: 2rem; padding-right: 2rem; } +} + +@media (min-width: 1280px) { + .stats-wrapper :is(.xl\:w-1\/4) { + width: 25%; + } + + .stats-wrapper :is(.xl\:w-3\/4) { + width: 75%; + } +} + +@media (min-width: 768px) { + .stats-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { + max-width: 80rem; + } + + .stats-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } + + .stats-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { + max-width: 80rem; + } + + .stats-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { + max-width: -moz-max-content; + max-width: max-content; + } +} + +.stats-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { + display: none; +} + +.stats-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { + height: 10rem; +} + +.stats-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { + height: 100%; +} + +.stats-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { + flex-direction: row; +} + +.stats-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { + flex-direction: column; +} + +.stats-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { + align-items: center; +} + +.stats-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { + justify-content: center; +} + +.stats-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/build-css.js b/build-css.js index e73b66661..9e870410f 100644 --- a/build-css.js +++ b/build-css.js @@ -136,6 +136,11 @@ const fileMappings = [ output: './blocks/product-citations/product-citations.css', wrapper: 'product-citations-wrapper', }, + { + content: './blocks/product-hero/product-hero.js', + output: './blocks/product-hero/product-hero.css', + wrapper: 'product-hero-wrapper', + }, { content: './blocks/product-menu/product-menu.js', output: './blocks/product-menu/product-menu.css', diff --git a/scripts/lib-franklin-dev.js b/scripts/lib-franklin-dev.js index 4b3b9970d..c931787e2 100644 --- a/scripts/lib-franklin-dev.js +++ b/scripts/lib-franklin-dev.js @@ -534,8 +534,7 @@ function getBlockConfig(block) { .reduce((config, fn) => fn(config, original), { blockName, jsPath, cssPath }); } -const blockNames = new Set(); -blockNames.add('product-hero'); +const cssExpectionalBlocks = []; /** * Loads JS and CSS for a block. @@ -547,7 +546,7 @@ export async function loadBlock(block) { block.dataset.blockStatus = 'loading'; const { blockName, jsPath, cssPath } = getBlockConfig(block); try { - if (blockNames.has(blockName)) await loadModule(blockName, jsPath, undefined, block); + if (cssExpectionalBlocks.contains(blockName)) await loadModule(blockName, jsPath, undefined, block); else await loadModule(blockName, jsPath, cssPath, block); } catch (error) { // eslint-disable-next-line no-console diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js index 55146162d..f2d5b176e 100644 --- a/scripts/lib-franklin.js +++ b/scripts/lib-franklin.js @@ -1 +1 @@ -function sampleRUM(e,t={}){sampleRUM.defer=sampleRUM.defer||[];var a,o,n,l,s,r,i,c,d,u=t=>{sampleRUM[t]=sampleRUM[t]||((...e)=>sampleRUM.defer.push({fnname:t,args:e}))};sampleRUM.drain=sampleRUM.drain||((t,e)=>{sampleRUM[t]=e,sampleRUM.defer.filter(({fnname:e})=>t===e).forEach(({fnname:e,args:t})=>sampleRUM[e](...t))}),sampleRUM.always=sampleRUM.always||[],sampleRUM.always.on=(e,t)=>{sampleRUM.always[e]=t},sampleRUM.on=(e,t)=>{sampleRUM.cases[e]=t},u("observe"),u("cwv");try{window.hlx=window.hlx||{},window.hlx.rum||(a="on"===new URLSearchParams(window.location.search).get("rum")?1:20,o=Array.from({length:75},(e,t)=>String.fromCharCode(48+t)).filter(e=>/\d|[A-Z]/i.test(e)).filter(()=>70<75*Math.random()).join(""),l=(n=Math.random())*a<1,s=Date.now(),r={full:()=>window.location.href,origin:()=>window.location.origin,path:()=>window.location.href.replace(/\?.*$/,"")},window.hlx.rum={weight:a,id:o,random:n,isSelected:l,firstReadTime:s,sampleRUM:sampleRUM,sanitizeURL:r[window.hlx.RUM_MASK_URL||"path"]});const{weight:m,id:p,firstReadTime:h}=window.hlx.rum;if(window.hlx&&window.hlx.rum&&window.hlx.rum.isSelected){const w=["weight","id","referer","checkpoint","t","source","target","cwv","CLS","FID","LCP","INP"];sampleRUM.cases=sampleRUM.cases||{cwv:()=>sampleRUM.cwv(t)||!0,lazy:()=>{var e=document.createElement("script");return e.src="https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js",document.head.appendChild(e),!0}},[i=t]=[t],c=JSON.stringify({weight:m,id:p,referer:window.hlx.rum.sanitizeURL(),checkpoint:e,t:Date.now()-h,...t},w),d="https://rum.hlx.page/.rum/"+m,navigator.sendBeacon(d,c),console.debug("ping:"+e,i),sampleRUM.cases[e]&&sampleRUM.cases[e]()}sampleRUM.always[e]&&sampleRUM.always[e](t)}catch(e){}}async function loadCSS(o){return new Promise((e,t)=>{var a;document.querySelector(`head > link[href="${o}"]`)?e():((a=document.createElement("link")).rel="stylesheet",a.href=o,a.onload=e,a.onerror=t,document.head.append(a))})}async function loadScript(n,l){return new Promise((e,t)=>{if(document.querySelector(`head > script[src="${n}"]`))e();else{var a=document.createElement("script");if(a.src=n,l)for(const o in l)a.setAttribute(o,l[o]);a.onload=e,a.onerror=t,document.head.append(a)}})}function getMetadata(e){var t=e&&e.includes(":")?"property":"name";return[...document.head.querySelectorAll(`meta[${t}="${e}"]`)].map(e=>e.content).join(", ")||""}function toClassName(e){return"string"==typeof e?e.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}function toCamelCase(e){return toClassName(e).replace(/-([a-z])/g,e=>e[1].toUpperCase())}function getAllMetadata(a){return[...document.head.querySelectorAll(`meta[property^="${a}:"],meta[name^="${a}-"]`)].reduce((e,t)=>{return e[toClassName(t.name?t.name.substring(a.length+1):t.getAttribute("property").split(":")[1])]=t.getAttribute("content"),e},{})}const ICONS_CACHE={};async function decorateIcons(e){let t=document.getElementById("franklin-svg-sprite");t||((a=document.createElement("div")).innerHTML='<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>',t=a.firstElementChild,document.body.append(a.firstElementChild));var a=[...e.querySelectorAll("span.icon")],e=(await Promise.all(a.map(async t=>{t=Array.from(t.classList).find(e=>e.startsWith("icon-")).substring(5);if(!ICONS_CACHE[t]){ICONS_CACHE[t]=!0;try{let e=window.hlx.codeBasePath+`/icons/${t}.svg`;t.startsWith("dam-")&&(a=window.location.hostname.includes("lifesciences.danaher.com"),e=a?"":"https://lifesciences.danaher.com",e+=`/content/dam/danaher/system/icons/${t.substring(4).replace("_"," ")}.svg`);var a,o,n=await fetch(e);n.ok?(o=await n.text()).match(/(<style | class=)/)?ICONS_CACHE[t]={styled:!0,html:o}:ICONS_CACHE[t]={html:o.replace("<svg",`<symbol id="icons-sprite-${t}"`).replace(/ width=".*?"/,"").replace(/ height=".*?"/,"").replace("</svg>","</symbol>")}:ICONS_CACHE[t]=!1}catch(e){ICONS_CACHE[t]=!1,console.error(e)}}})),Object.keys(ICONS_CACHE).filter(e=>!t.querySelector("#icons-sprite-"+e)).map(e=>ICONS_CACHE[e]).filter(e=>!e.styled).map(e=>e.html).join("\n"));t.innerHTML+=e,a.forEach(e=>{var t=Array.from(e.classList).find(e=>e.startsWith("icon-")).substring(5),e="A"===e.firstElementChild?.tagName?e.firstElementChild:e;ICONS_CACHE[t].styled?e.innerHTML=ICONS_CACHE[t].html:e.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${t}"/></svg>`})}async function fetchPlaceholders(o="default"){return window.placeholders=window.placeholders||{},window.placeholders[o+"-loaded"]||(window.placeholders[o+"-loaded"]=new Promise((a,t)=>{fetch(`${"default"===o?"":o}/placeholders.json`).then(e=>{if(e.ok)return e.json();throw new Error(e.status+": "+e.statusText)}).then(e=>{const t={};e.data.filter(e=>e.Key).forEach(e=>{t[toCamelCase(e.Key)]=e.Text}),window.placeholders[o]=t,a()}).catch(e=>{window.placeholders[o]={},t(e)})})),await window.placeholders[o+"-loaded"],window.placeholders[o]}function decorateBlock(e){var t=e.classList[0];t&&(e.classList.add("block"),e.dataset.blockName=t,e.dataset.blockStatus="initialized",e.parentElement.classList.add(t+"-wrapper"),e=e.closest(".section"))&&e.classList.add(t+"-container")}function readBlockConfig(e){const l={};return e.querySelectorAll(":scope > div").forEach(t=>{if(t.children){var a=[...t.children];if(a[1]){var o,n=a[1],a=toClassName(a[0].textContent);let e="";e=n.querySelector("a")?1===(o=[...n.querySelectorAll("a")]).length?o[0].href:o.map(e=>e.href):n.querySelector("img")?1===(o=[...n.querySelectorAll("img")]).length?o[0].src:o.map(e=>e.src):n.querySelector("p")?1===(o=[...n.querySelectorAll("p")]).length?o[0].textContent:o.map(e=>e.textContent):t.children[1].textContent,l[a]=e}}}),l}function decorateSections(e){e.querySelectorAll(":scope > div").forEach(t=>{const a=[];let o=!1;[...t.children].forEach(e=>{var t;"DIV"!==e.tagName&&o||(t=document.createElement("div"),a.push(t),(o="DIV"!==e.tagName)&&t.classList.add("default-content-wrapper")),a[a.length-1].append(e)}),a.forEach(e=>t.append(e)),t.classList.add("section"),t.dataset.sectionStatus="initialized",t.style.display="none";var e=t.querySelector("div.section-metadata");if(e){const n=readBlockConfig(e);Object.keys(n).forEach(e=>{"style"===e?n.style.split(",").map(e=>toClassName(e.trim())).forEach(e=>t.classList.add(e)):t.dataset[toCamelCase(e)]=n[e]}),e.parentNode.remove()}})}function updateSectionsStatus(e){var t=[...e.querySelectorAll(":scope > div.section")];for(let e=0;e<t.length;e+=1){var a=t[e];if("loaded"!==a.dataset.sectionStatus){if(a.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]')){a.dataset.sectionStatus="loading";break}a.dataset.sectionStatus="loaded",a.style.display=null}}}function decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(decorateBlock)}function buildBlock(e,t){t=Array.isArray(t)?t:[[t]];const o=document.createElement("div");return o.classList.add(e),t.forEach(e=>{const a=document.createElement("div");e.forEach(e=>{const t=document.createElement("div");(e.elems||[e]).forEach(e=>{e&&("string"==typeof e?t.innerHTML+=e:t.appendChild(e))}),a.appendChild(t)}),o.appendChild(a)}),o}async function loadModule(a,o,e,...n){var e=e?loadCSS(e):Promise.resolve(),t=o?new Promise(t=>{(async()=>{let e;try{(e=await import(o)).default&&await e.default.apply(null,n)}catch(e){console.log("failed to load module for "+a,e)}t(e)})()}):Promise.resolve();return Promise.all([e,t]).then(([,e])=>e)}function getBlockConfig(e){var e=e.dataset["blockName"],t=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.js`:"",a=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.css`:"";const o={blockName:e,jsPath:t};return(window.hlx.patchBlockConfig||[]).filter(e=>"function"==typeof e).reduce((e,t)=>t(e,o),{blockName:e,jsPath:t,cssPath:a})}const blockNames=new Set;async function loadBlock(e){var t=e.dataset.blockStatus;if("loading"!==t&&"loaded"!==t){e.dataset.blockStatus="loading";var{blockName:t,jsPath:a,cssPath:o}=getBlockConfig(e);try{blockNames.has(t)?await loadModule(t,a,void 0,e):await loadModule(t,a,o,e)}catch(e){console.log("failed to load block "+t,e)}e.dataset.blockStatus="loaded"}}async function loadBlocks(t){updateSectionsStatus(t);var a=[...t.querySelectorAll("div.block")];for(let e=0;e<a.length;e+=1)await loadBlock(a[e]),updateSectionsStatus(t)}function createOptimizedPicture(e,a="",o=!1,n=[{media:"(min-width: 600px)",width:"2000"},{width:"750"}]){e=new URL(e,window.location.href);const l=document.createElement("picture"),s=e["pathname"],r=s.substring(s.lastIndexOf(".")+1);return n.forEach(e=>{var t=document.createElement("source");e.media&&t.setAttribute("media",e.media),t.setAttribute("type","image/webp"),t.setAttribute("srcset",`${s}?width=${e.width}&format=webply&optimize=medium`),l.appendChild(t)}),n.forEach((e,t)=>{t<n.length-1?(t=document.createElement("source"),e.media&&t.setAttribute("media",e.media),t.setAttribute("srcset",`${s}?width=${e.width}&format=${r}&optimize=medium`),l.appendChild(t)):((t=document.createElement("img")).setAttribute("loading",o?"eager":"lazy"),t.setAttribute("alt",a),l.appendChild(t),t.setAttribute("src",`${s}?width=${e.width}&format=${r}&optimize=medium`))}),l}function normalizeHeadings(e,t){const o=t.map(e=>e.toLowerCase());e.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(t=>{var a=t.tagName.toLowerCase();if(-1===o.indexOf(a)){let e=parseInt(a.charAt(1),10)-1;for(;-1===o.indexOf("h"+e)&&0<e;)--e;if(0===e)for(;-1===o.indexOf("h"+e)&&e<7;)e+=1;7!==e&&(t.outerHTML=`<h${e} id="${t.id}">${t.textContent}</h${e}>`)}})}function decorateTemplateAndTheme(){var e=(t,e)=>{e.split(",").forEach(e=>{t.classList.add(toClassName(e.trim()))})},t=getMetadata("template"),t=(t&&e(document.body,t),getMetadata("theme"));t&&e(document.body,t)}function decorateButtons(e){e.querySelectorAll("a").forEach(e=>{var t,a;e.title=e.title||e.textContent,e.href!==e.textContent&&"link"!==e.title&&(t=e.parentElement,a=e.parentElement.parentElement,e.querySelector("img")||"LI"===a.tagName||e.closest(".call-to-action")||e.closest(".mini-teasers")||e.closest(".bg-color-right")||(1!==t.childNodes.length||"P"!==t.tagName&&"DIV"!==t.tagName||(e.className="btn btn-outline-primary",t.classList.add("button-container")),1===t.childNodes.length&&"STRONG"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-primary",a.classList.add("button-container")),1===t.childNodes.length&&"EM"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-secondary",a.classList.add("button-container"))))})}async function waitForLCP(e){var t=document.querySelector(".block");t&&e.includes(t.dataset.blockName)&&await loadBlock(t),document.body.style.display=null;const a=document.querySelector("main img");await new Promise(e=>{a&&!a.complete?(a.setAttribute("loading","eager"),a.addEventListener("load",e),a.addEventListener("error",e)):e()})}function loadHeader(e){var t=buildBlock("header","");return e.append(t),decorateBlock(t),loadBlock(t)}function loadFooter(e){var t=buildBlock("footer","");return e.append(t),decorateBlock(t),loadBlock(t)}function parsePluginParams(e,t){var a=t?e:e.split("/").splice(e.endsWith("/")?-2:-1,1)[0].replace(/\.js/,""),t={load:"eager",..."string"!=typeof t&&t?t:{url:(t||e).replace(/\/$/,"")}};return t.options||={},{id:a,config:t}}blockNames.add("product-hero");const executionContext={createOptimizedPicture:createOptimizedPicture,getAllMetadata:getAllMetadata,getMetadata:getMetadata,decorateBlock:decorateBlock,decorateButtons:decorateButtons,decorateIcons:decorateIcons,loadBlock:loadBlock,loadCSS:loadCSS,loadScript:loadScript,sampleRUM:sampleRUM,toCamelCase:toCamelCase,toClassName:toClassName};class PluginsRegistry{#plugins;constructor(){this.#plugins=new Map}add(e,t){var{id:e,config:t}=parsePluginParams(e,t);this.#plugins.set(e,t)}get(e){return this.#plugins.get(e)}includes(e){return!!this.#plugins.has(e)}async load(t){return[...this.#plugins.entries()].filter(([,e])=>e.condition&&!e.condition(document,e.options,executionContext)).map(([e])=>this.#plugins.delete(e)),Promise.all([...this.#plugins.entries()].filter(([,e])=>(!e.condition||e.condition(document,e.options,executionContext))&&t===e.load&&e.url).map(async([t,e])=>{try{var a=await loadModule(t,e.url.endsWith(".js")?e.url:e.url+`/${t}.js`,e.url.endsWith(".js")?null:e.url+`/${t}.css`,document,e.options,executionContext)||{};this.#plugins.set(t,{...e,...a})}catch(e){console.error("Could not load specified plugin",t)}}))}async run(a){return[...this.#plugins.values()].reduce((e,t)=>!t[a]||t.condition&&!t.condition(document,t.options,executionContext)?e:e.then(()=>t[a](document,t.options,executionContext)),Promise.resolve())}}class TemplatesRegistry{add(e,t){if(Array.isArray(e))e.forEach(e=>window.hlx.templates.add(e));else{const{id:a,config:o}=parsePluginParams(e,t);o.condition=()=>toClassName(getMetadata("template"))===a,window.hlx.plugins.add(a,o)}}get(e){return window.hlx.plugins.get(e)}includes(e){return window.hlx.plugins.includes(e)}}function setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse="on"===new URLSearchParams(window.location.search).get("lighthouse"),window.hlx.patchBlockConfig=[],window.hlx.plugins=new PluginsRegistry,window.hlx.templates=new TemplatesRegistry;var e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(e){console.log(e)}}function init(){setup(),sampleRUM("top"),window.addEventListener("load",()=>sampleRUM("load")),window.addEventListener("unhandledrejection",e=>{sampleRUM("error",{source:e.reason.sourceURL,target:e.reason.line})}),window.addEventListener("error",e=>{sampleRUM("error",{source:e.filename,target:e.lineno})})}init();export{sampleRUM,loadCSS,loadScript,getMetadata,toClassName,toCamelCase,getAllMetadata,decorateIcons,fetchPlaceholders,decorateBlock,readBlockConfig,decorateSections,updateSectionsStatus,decorateBlocks,buildBlock,loadBlock,loadBlocks,createOptimizedPicture,normalizeHeadings,decorateTemplateAndTheme,decorateButtons,waitForLCP,loadHeader,loadFooter,executionContext,setup}; \ No newline at end of file +function sampleRUM(e,t={}){sampleRUM.defer=sampleRUM.defer||[];var a,o,n,l,s,r,i,c,d,u=t=>{sampleRUM[t]=sampleRUM[t]||((...e)=>sampleRUM.defer.push({fnname:t,args:e}))};sampleRUM.drain=sampleRUM.drain||((t,e)=>{sampleRUM[t]=e,sampleRUM.defer.filter(({fnname:e})=>t===e).forEach(({fnname:e,args:t})=>sampleRUM[e](...t))}),sampleRUM.always=sampleRUM.always||[],sampleRUM.always.on=(e,t)=>{sampleRUM.always[e]=t},sampleRUM.on=(e,t)=>{sampleRUM.cases[e]=t},u("observe"),u("cwv");try{window.hlx=window.hlx||{},window.hlx.rum||(a="on"===new URLSearchParams(window.location.search).get("rum")?1:20,o=Array.from({length:75},(e,t)=>String.fromCharCode(48+t)).filter(e=>/\d|[A-Z]/i.test(e)).filter(()=>70<75*Math.random()).join(""),l=(n=Math.random())*a<1,s=Date.now(),r={full:()=>window.location.href,origin:()=>window.location.origin,path:()=>window.location.href.replace(/\?.*$/,"")},window.hlx.rum={weight:a,id:o,random:n,isSelected:l,firstReadTime:s,sampleRUM:sampleRUM,sanitizeURL:r[window.hlx.RUM_MASK_URL||"path"]});const{weight:m,id:p,firstReadTime:h}=window.hlx.rum;if(window.hlx&&window.hlx.rum&&window.hlx.rum.isSelected){const w=["weight","id","referer","checkpoint","t","source","target","cwv","CLS","FID","LCP","INP"];sampleRUM.cases=sampleRUM.cases||{cwv:()=>sampleRUM.cwv(t)||!0,lazy:()=>{var e=document.createElement("script");return e.src="https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js",document.head.appendChild(e),!0}},[i=t]=[t],c=JSON.stringify({weight:m,id:p,referer:window.hlx.rum.sanitizeURL(),checkpoint:e,t:Date.now()-h,...t},w),d="https://rum.hlx.page/.rum/"+m,navigator.sendBeacon(d,c),console.debug("ping:"+e,i),sampleRUM.cases[e]&&sampleRUM.cases[e]()}sampleRUM.always[e]&&sampleRUM.always[e](t)}catch(e){}}async function loadCSS(o){return new Promise((e,t)=>{var a;document.querySelector(`head > link[href="${o}"]`)?e():((a=document.createElement("link")).rel="stylesheet",a.href=o,a.onload=e,a.onerror=t,document.head.append(a))})}async function loadScript(n,l){return new Promise((e,t)=>{if(document.querySelector(`head > script[src="${n}"]`))e();else{var a=document.createElement("script");if(a.src=n,l)for(const o in l)a.setAttribute(o,l[o]);a.onload=e,a.onerror=t,document.head.append(a)}})}function getMetadata(e){var t=e&&e.includes(":")?"property":"name";return[...document.head.querySelectorAll(`meta[${t}="${e}"]`)].map(e=>e.content).join(", ")||""}function toClassName(e){return"string"==typeof e?e.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}function toCamelCase(e){return toClassName(e).replace(/-([a-z])/g,e=>e[1].toUpperCase())}function getAllMetadata(a){return[...document.head.querySelectorAll(`meta[property^="${a}:"],meta[name^="${a}-"]`)].reduce((e,t)=>{return e[toClassName(t.name?t.name.substring(a.length+1):t.getAttribute("property").split(":")[1])]=t.getAttribute("content"),e},{})}const ICONS_CACHE={};async function decorateIcons(e){let t=document.getElementById("franklin-svg-sprite");t||((a=document.createElement("div")).innerHTML='<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>',t=a.firstElementChild,document.body.append(a.firstElementChild));var a=[...e.querySelectorAll("span.icon")],e=(await Promise.all(a.map(async t=>{t=Array.from(t.classList).find(e=>e.startsWith("icon-")).substring(5);if(!ICONS_CACHE[t]){ICONS_CACHE[t]=!0;try{let e=window.hlx.codeBasePath+`/icons/${t}.svg`;t.startsWith("dam-")&&(a=window.location.hostname.includes("lifesciences.danaher.com"),e=a?"":"https://lifesciences.danaher.com",e+=`/content/dam/danaher/system/icons/${t.substring(4).replace("_"," ")}.svg`);var a,o,n=await fetch(e);n.ok?(o=await n.text()).match(/(<style | class=)/)?ICONS_CACHE[t]={styled:!0,html:o}:ICONS_CACHE[t]={html:o.replace("<svg",`<symbol id="icons-sprite-${t}"`).replace(/ width=".*?"/,"").replace(/ height=".*?"/,"").replace("</svg>","</symbol>")}:ICONS_CACHE[t]=!1}catch(e){ICONS_CACHE[t]=!1,console.error(e)}}})),Object.keys(ICONS_CACHE).filter(e=>!t.querySelector("#icons-sprite-"+e)).map(e=>ICONS_CACHE[e]).filter(e=>!e.styled).map(e=>e.html).join("\n"));t.innerHTML+=e,a.forEach(e=>{var t=Array.from(e.classList).find(e=>e.startsWith("icon-")).substring(5),e="A"===e.firstElementChild?.tagName?e.firstElementChild:e;ICONS_CACHE[t].styled?e.innerHTML=ICONS_CACHE[t].html:e.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${t}"/></svg>`})}async function fetchPlaceholders(o="default"){return window.placeholders=window.placeholders||{},window.placeholders[o+"-loaded"]||(window.placeholders[o+"-loaded"]=new Promise((a,t)=>{fetch(`${"default"===o?"":o}/placeholders.json`).then(e=>{if(e.ok)return e.json();throw new Error(e.status+": "+e.statusText)}).then(e=>{const t={};e.data.filter(e=>e.Key).forEach(e=>{t[toCamelCase(e.Key)]=e.Text}),window.placeholders[o]=t,a()}).catch(e=>{window.placeholders[o]={},t(e)})})),await window.placeholders[o+"-loaded"],window.placeholders[o]}function decorateBlock(e){var t=e.classList[0];t&&(e.classList.add("block"),e.dataset.blockName=t,e.dataset.blockStatus="initialized",e.parentElement.classList.add(t+"-wrapper"),e=e.closest(".section"))&&e.classList.add(t+"-container")}function readBlockConfig(e){const l={};return e.querySelectorAll(":scope > div").forEach(t=>{if(t.children){var a=[...t.children];if(a[1]){var o,n=a[1],a=toClassName(a[0].textContent);let e="";e=n.querySelector("a")?1===(o=[...n.querySelectorAll("a")]).length?o[0].href:o.map(e=>e.href):n.querySelector("img")?1===(o=[...n.querySelectorAll("img")]).length?o[0].src:o.map(e=>e.src):n.querySelector("p")?1===(o=[...n.querySelectorAll("p")]).length?o[0].textContent:o.map(e=>e.textContent):t.children[1].textContent,l[a]=e}}}),l}function decorateSections(e){e.querySelectorAll(":scope > div").forEach(t=>{const a=[];let o=!1;[...t.children].forEach(e=>{var t;"DIV"!==e.tagName&&o||(t=document.createElement("div"),a.push(t),(o="DIV"!==e.tagName)&&t.classList.add("default-content-wrapper")),a[a.length-1].append(e)}),a.forEach(e=>t.append(e)),t.classList.add("section"),t.dataset.sectionStatus="initialized",t.style.display="none";var e=t.querySelector("div.section-metadata");if(e){const n=readBlockConfig(e);Object.keys(n).forEach(e=>{"style"===e?n.style.split(",").map(e=>toClassName(e.trim())).forEach(e=>t.classList.add(e)):t.dataset[toCamelCase(e)]=n[e]}),e.parentNode.remove()}})}function updateSectionsStatus(e){var t=[...e.querySelectorAll(":scope > div.section")];for(let e=0;e<t.length;e+=1){var a=t[e];if("loaded"!==a.dataset.sectionStatus){if(a.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]')){a.dataset.sectionStatus="loading";break}a.dataset.sectionStatus="loaded",a.style.display=null}}}function decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(decorateBlock)}function buildBlock(e,t){t=Array.isArray(t)?t:[[t]];const o=document.createElement("div");return o.classList.add(e),t.forEach(e=>{const a=document.createElement("div");e.forEach(e=>{const t=document.createElement("div");(e.elems||[e]).forEach(e=>{e&&("string"==typeof e?t.innerHTML+=e:t.appendChild(e))}),a.appendChild(t)}),o.appendChild(a)}),o}async function loadModule(a,o,e,...n){var e=e?loadCSS(e):Promise.resolve(),t=o?new Promise(t=>{(async()=>{let e;try{(e=await import(o)).default&&await e.default.apply(null,n)}catch(e){console.log("failed to load module for "+a,e)}t(e)})()}):Promise.resolve();return Promise.all([e,t]).then(([,e])=>e)}function getBlockConfig(e){var e=e.dataset["blockName"],t=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.js`:"",a=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.css`:"";const o={blockName:e,jsPath:t};return(window.hlx.patchBlockConfig||[]).filter(e=>"function"==typeof e).reduce((e,t)=>t(e,o),{blockName:e,jsPath:t,cssPath:a})}const cssExpectionalBlocks=[];async function loadBlock(e){var t=e.dataset.blockStatus;if("loading"!==t&&"loaded"!==t){e.dataset.blockStatus="loading";var{blockName:t,jsPath:a,cssPath:o}=getBlockConfig(e);try{cssExpectionalBlocks.contains(t)?await loadModule(t,a,void 0,e):await loadModule(t,a,o,e)}catch(e){console.log("failed to load block "+t,e)}e.dataset.blockStatus="loaded"}}async function loadBlocks(t){updateSectionsStatus(t);var a=[...t.querySelectorAll("div.block")];for(let e=0;e<a.length;e+=1)await loadBlock(a[e]),updateSectionsStatus(t)}function createOptimizedPicture(e,a="",o=!1,n=[{media:"(min-width: 600px)",width:"2000"},{width:"750"}]){e=new URL(e,window.location.href);const l=document.createElement("picture"),s=e["pathname"],r=s.substring(s.lastIndexOf(".")+1);return n.forEach(e=>{var t=document.createElement("source");e.media&&t.setAttribute("media",e.media),t.setAttribute("type","image/webp"),t.setAttribute("srcset",`${s}?width=${e.width}&format=webply&optimize=medium`),l.appendChild(t)}),n.forEach((e,t)=>{t<n.length-1?(t=document.createElement("source"),e.media&&t.setAttribute("media",e.media),t.setAttribute("srcset",`${s}?width=${e.width}&format=${r}&optimize=medium`),l.appendChild(t)):((t=document.createElement("img")).setAttribute("loading",o?"eager":"lazy"),t.setAttribute("alt",a),l.appendChild(t),t.setAttribute("src",`${s}?width=${e.width}&format=${r}&optimize=medium`))}),l}function normalizeHeadings(e,t){const o=t.map(e=>e.toLowerCase());e.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(t=>{var a=t.tagName.toLowerCase();if(-1===o.indexOf(a)){let e=parseInt(a.charAt(1),10)-1;for(;-1===o.indexOf("h"+e)&&0<e;)--e;if(0===e)for(;-1===o.indexOf("h"+e)&&e<7;)e+=1;7!==e&&(t.outerHTML=`<h${e} id="${t.id}">${t.textContent}</h${e}>`)}})}function decorateTemplateAndTheme(){var e=(t,e)=>{e.split(",").forEach(e=>{t.classList.add(toClassName(e.trim()))})},t=getMetadata("template"),t=(t&&e(document.body,t),getMetadata("theme"));t&&e(document.body,t)}function decorateButtons(e){e.querySelectorAll("a").forEach(e=>{var t,a;e.title=e.title||e.textContent,e.href!==e.textContent&&"link"!==e.title&&(t=e.parentElement,a=e.parentElement.parentElement,e.querySelector("img")||"LI"===a.tagName||e.closest(".call-to-action")||e.closest(".mini-teasers")||e.closest(".bg-color-right")||(1!==t.childNodes.length||"P"!==t.tagName&&"DIV"!==t.tagName||(e.className="btn btn-outline-primary",t.classList.add("button-container")),1===t.childNodes.length&&"STRONG"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-primary",a.classList.add("button-container")),1===t.childNodes.length&&"EM"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-secondary",a.classList.add("button-container"))))})}async function waitForLCP(e){var t=document.querySelector(".block");t&&e.includes(t.dataset.blockName)&&await loadBlock(t),document.body.style.display=null;const a=document.querySelector("main img");await new Promise(e=>{a&&!a.complete?(a.setAttribute("loading","eager"),a.addEventListener("load",e),a.addEventListener("error",e)):e()})}function loadHeader(e){var t=buildBlock("header","");return e.append(t),decorateBlock(t),loadBlock(t)}function loadFooter(e){var t=buildBlock("footer","");return e.append(t),decorateBlock(t),loadBlock(t)}function parsePluginParams(e,t){var a=t?e:e.split("/").splice(e.endsWith("/")?-2:-1,1)[0].replace(/\.js/,""),t={load:"eager",..."string"!=typeof t&&t?t:{url:(t||e).replace(/\/$/,"")}};return t.options||={},{id:a,config:t}}const executionContext={createOptimizedPicture:createOptimizedPicture,getAllMetadata:getAllMetadata,getMetadata:getMetadata,decorateBlock:decorateBlock,decorateButtons:decorateButtons,decorateIcons:decorateIcons,loadBlock:loadBlock,loadCSS:loadCSS,loadScript:loadScript,sampleRUM:sampleRUM,toCamelCase:toCamelCase,toClassName:toClassName};class PluginsRegistry{#plugins;constructor(){this.#plugins=new Map}add(e,t){var{id:e,config:t}=parsePluginParams(e,t);this.#plugins.set(e,t)}get(e){return this.#plugins.get(e)}includes(e){return!!this.#plugins.has(e)}async load(t){return[...this.#plugins.entries()].filter(([,e])=>e.condition&&!e.condition(document,e.options,executionContext)).map(([e])=>this.#plugins.delete(e)),Promise.all([...this.#plugins.entries()].filter(([,e])=>(!e.condition||e.condition(document,e.options,executionContext))&&t===e.load&&e.url).map(async([t,e])=>{try{var a=await loadModule(t,e.url.endsWith(".js")?e.url:e.url+`/${t}.js`,e.url.endsWith(".js")?null:e.url+`/${t}.css`,document,e.options,executionContext)||{};this.#plugins.set(t,{...e,...a})}catch(e){console.error("Could not load specified plugin",t)}}))}async run(a){return[...this.#plugins.values()].reduce((e,t)=>!t[a]||t.condition&&!t.condition(document,t.options,executionContext)?e:e.then(()=>t[a](document,t.options,executionContext)),Promise.resolve())}}class TemplatesRegistry{add(e,t){if(Array.isArray(e))e.forEach(e=>window.hlx.templates.add(e));else{const{id:a,config:o}=parsePluginParams(e,t);o.condition=()=>toClassName(getMetadata("template"))===a,window.hlx.plugins.add(a,o)}}get(e){return window.hlx.plugins.get(e)}includes(e){return window.hlx.plugins.includes(e)}}function setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse="on"===new URLSearchParams(window.location.search).get("lighthouse"),window.hlx.patchBlockConfig=[],window.hlx.plugins=new PluginsRegistry,window.hlx.templates=new TemplatesRegistry;var e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(e){console.log(e)}}function init(){setup(),sampleRUM("top"),window.addEventListener("load",()=>sampleRUM("load")),window.addEventListener("unhandledrejection",e=>{sampleRUM("error",{source:e.reason.sourceURL,target:e.reason.line})}),window.addEventListener("error",e=>{sampleRUM("error",{source:e.filename,target:e.lineno})})}init();export{sampleRUM,loadCSS,loadScript,getMetadata,toClassName,toCamelCase,getAllMetadata,decorateIcons,fetchPlaceholders,decorateBlock,readBlockConfig,decorateSections,updateSectionsStatus,decorateBlocks,buildBlock,loadBlock,loadBlocks,createOptimizedPicture,normalizeHeadings,decorateTemplateAndTheme,decorateButtons,waitForLCP,loadHeader,loadFooter,executionContext,setup}; \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 9c08007b1..2e916a3a4 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -657,18 +657,6 @@ main .default-content-wrapper h2 { } } -.btn-outline-trending-brand { - color: #7523FF; - background-color: rgb(255 255 255); - border-color: #7523FF; - border-width: 2px; -} - -.btn-outline-trending-brand:hover { - color: rgb(255 255 255); - background-color: #7523FF; -} - .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } @@ -863,23 +851,6 @@ main .section.carousel-container { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.btn-outline-trending-brand { - border-width: 2px; - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); -} - -.btn-outline-trending-brand:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - .container-two-col .col-right { font-size: 1rem; line-height: 1.75rem; @@ -1708,18 +1679,6 @@ svg symbol path { z-index: 9999; } -.order-first { - order: -9999; -} - -.col-span-10 { - grid-column: span 10 / span 10; -} - -.col-span-2 { - grid-column: span 2 / span 2; -} - .m-0 { margin: 0px; } @@ -1739,30 +1698,14 @@ svg symbol path { margin-bottom: auto; } -.-mt-\[21px\] { - margin-top: -21px; -} - .mb-2 { margin-bottom: 0.5rem; } -.mb-2\.5 { - margin-bottom: 0.625rem; -} - -.mb-3 { - margin-bottom: 0.75rem; -} - .mb-5 { margin-bottom: 1.25rem; } -.ml-12 { - margin-left: 3rem; -} - .ml-2 { margin-left: 0.5rem; } @@ -1791,26 +1734,14 @@ svg symbol path { margin-top: 1rem; } -.mt-5 { - margin-top: 1.25rem; -} - .mt-6 { margin-top: 1.5rem; } -.mt-8 { - margin-top: 2rem; -} - .mt-\[-1px\] { margin-top: -1px; } -.mt-\[-256px\] { - margin-top: -256px; -} - .line-clamp-2 { overflow: hidden; display: -webkit-box; @@ -1822,10 +1753,6 @@ svg symbol path { display: block; } -.inline-block { - display: inline-block; -} - .inline { display: inline; } @@ -1858,10 +1785,6 @@ svg symbol path { height: 2.5rem; } -.h-16 { - height: 4rem; -} - .h-24 { height: 6rem; } @@ -1874,18 +1797,6 @@ svg symbol path { height: 12rem; } -.h-5 { - height: 1.25rem; -} - -.h-\[17rem\] { - height: 17rem; -} - -.h-\[400px\] { - height: 400px; -} - .h-full { height: 100%; } @@ -1894,10 +1805,6 @@ svg symbol path { width: 2.5rem; } -.w-16 { - width: 4rem; -} - .w-24 { width: 6rem; } @@ -1906,22 +1813,10 @@ svg symbol path { width: 1rem; } -.w-5 { - width: 1.25rem; -} - .w-8\/12 { width: 66.666667%; } -.w-\[400px\] { - width: 400px; -} - -.w-\[98\%\] { - width: 98%; -} - .w-auto { width: auto; } @@ -1934,10 +1829,6 @@ svg symbol path { max-width: 80rem; } -.max-w-\[400px\] { - max-width: 400px; -} - .max-w-md { max-width: 28rem; } @@ -1954,10 +1845,6 @@ svg symbol path { flex-shrink: 0; } -.shrink-0 { - flex-shrink: 0; -} - .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @@ -1988,22 +1875,10 @@ svg symbol path { --tw-scroll-snap-strictness: mandatory; } -.scroll-pl-6 { - scroll-padding-left: 1.5rem; -} - -.list-disc { - list-style-type: disc; -} - .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } -.flex-row { - flex-direction: row; -} - .flex-col { flex-direction: column; } @@ -2012,10 +1887,6 @@ svg symbol path { flex-wrap: wrap; } -.items-start { - align-items: flex-start; -} - .items-center { align-items: center; } @@ -2036,19 +1907,10 @@ svg symbol path { gap: 0.5rem; } -.gap-3 { - gap: 0.75rem; -} - .gap-4 { gap: 1rem; } -.gap-x-4 { - -moz-column-gap: 1rem; - column-gap: 1rem; -} - .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; @@ -2064,10 +1926,6 @@ svg symbol path { margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } -.overflow-auto { - overflow: auto; -} - .overflow-hidden { overflow: hidden; } @@ -2114,14 +1972,6 @@ svg symbol path { border-width: 2px; } -.border-b { - border-bottom-width: 1px; -} - -.border-b-2 { - border-bottom-width: 2px; -} - .border-danaherpurple-500 { --tw-border-opacity: 1; border-color: rgb(117 35 255 / var(--tw-border-opacity)); @@ -2162,10 +2012,6 @@ svg symbol path { background-color: rgb(254 242 242 / var(--tw-bg-opacity)); } -.bg-transparent { - background-color: transparent; -} - .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -2183,11 +2029,6 @@ svg symbol path { stroke: #fff; } -.object-contain { - -o-object-fit: contain; - object-fit: contain; -} - .object-cover { -o-object-fit: cover; object-fit: cover; @@ -2214,11 +2055,6 @@ svg symbol path { padding-right: 0.25rem; } -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -2258,10 +2094,6 @@ svg symbol path { padding-bottom: 0px; } -.pb-1 { - padding-bottom: 0.25rem; -} - .pb-10 { padding-bottom: 2.5rem; } @@ -2290,10 +2122,6 @@ svg symbol path { text-align: left; } -.text-center { - text-align: center; -} - .align-middle { vertical-align: middle; } @@ -2321,11 +2149,6 @@ svg symbol path { line-height: 1.5rem; } -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - .text-sm { font-size: 0.875rem; line-height: 1.25rem; @@ -2360,10 +2183,6 @@ svg symbol path { text-transform: uppercase; } -.leading-4 { - line-height: 1rem; -} - .leading-5 { line-height: 1.25rem; } @@ -2372,10 +2191,6 @@ svg symbol path { line-height: 1.5rem; } -.leading-tight { - line-height: 1.25; -} - .tracking-tight { letter-spacing: -0.025em; } @@ -2394,11 +2209,6 @@ svg symbol path { color: rgb(117 35 255 / var(--tw-text-opacity)); } -.text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); @@ -2439,10 +2249,6 @@ svg symbol path { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.\!no-underline { - text-decoration-line: none !important; -} - .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2496,14 +2302,6 @@ svg symbol path { transition-duration: 150ms; } -.duration-500 { - transition-duration: 500ms; -} - -.duration-700 { - transition-duration: 700ms; -} - main .section.top-border { margin: auto; margin-top: 2.5rem; @@ -2533,15 +2331,6 @@ main .section.top-border { color: rgb(55 65 81 / var(--tw-text-opacity)); } -.hover\:border:hover { - border-width: 1px; -} - -.hover\:border-danaherpurple-500:hover { - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); -} - .hover\:bg-danaherpurple-800:hover { --tw-bg-opacity: 1; background-color: rgb(64 0 165 / var(--tw-bg-opacity)); @@ -2610,22 +2399,10 @@ main .section.top-border { } @media (min-width: 768px) { - .md\:col-span-6 { - grid-column: span 6 / span 6; - } - .md\:mt-4 { margin-top: 1rem; } - .md\:flex-row { - flex-direction: row; - } - - .md\:gap-12 { - gap: 3rem; - } - .md\:pb-10 { padding-bottom: 2.5rem; } @@ -2633,25 +2410,9 @@ main .section.top-border { .md\:pb-24 { padding-bottom: 6rem; } - - .md\:shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - } - - .md\:shadow-none { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - } } @media (min-width: 1024px) { - .lg\:order-first { - order: -9999; - } - .lg\:col-span-3 { grid-column: span 3 / span 3; } @@ -2672,14 +2433,6 @@ main .section.top-border { width: 66.666667%; } - .lg\:w-20 { - width: 5rem; - } - - .lg\:w-55 { - width: 14rem; - } - .lg\:max-w-7xl { max-width: 80rem; } @@ -2688,18 +2441,6 @@ main .section.top-border { grid-template-columns: repeat(7, minmax(0, 1fr)); } - .lg\:flex-row { - flex-direction: row; - } - - .lg\:flex-col { - flex-direction: column; - } - - .lg\:gap-16 { - gap: 4rem; - } - .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; @@ -2728,48 +2469,6 @@ main .section.top-border { } } -.\[\&\>\*\.active\>img\]\:border-2>*.active>img { - border-width: 2px; -} - -.\[\&\>\*\.active\>img\]\:border-danaherpurple-500>*.active>img { - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); -} - -.\[\&\>\*\.active\>img\]\:opacity-80>*.active>img { - opacity: 0.8; -} - -.\[\&\>\*\.view-more\]\:h-\[75px\]>*.view-more { - height: 75px; -} - -.\[\&\>\*\.view-more\]\:w-\[75px\]>*.view-more { - width: 75px; -} - -.\[\&\>\*\.view-more\]\:cursor-pointer>*.view-more { - cursor: pointer; -} - -.\[\&\>\*\>img\]\:h-\[75px\]>*>img { - height: 75px; -} - -.\[\&\>\*\>img\]\:w-\[75px\]>*>img { - width: 75px; -} - -.\[\&\>\*\>img\]\:cursor-pointer>*>img { - cursor: pointer; -} - -.\[\&\>picture\]\:w-max>picture { - width: -moz-max-content; - width: max-content; -} - @media (min-width: 768px) { .\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper { max-width: 80rem; diff --git a/tailwind.config.js b/tailwind.config.js index 941dad3c5..3a14efc7e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,7 +3,7 @@ const plugin = require('tailwindcss/plugin'); const wrapper = (process.env.IMPORTANT_WRAPPER && process.env.IMPORTANT_WRAPPER !== '.undefined') ? process.env.IMPORTANT_WRAPPER : false; module.exports = { important: wrapper, - content: ['./blocks/product-hero/product-hero.js','./scripts/*.js', '!./scripts/at-lsig.js', './404.html'], // https://tailwindcss.com/docs/content-configuration#class-detection-in-depth + content: ['./scripts/*.js', '!./scripts/at-lsig.js', './404.html'], // https://tailwindcss.com/docs/content-configuration#class-detection-in-depth darkMode: 'media', // or 'media' or 'class' plugins: [ plugin(function ({ addComponents, theme }) { From acdc3f0ab4674fe070af2430999f33f4502f4b26 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 21:18:54 +0530 Subject: [PATCH 67/88] Fixed lint issues --- scripts/lib-franklin-dev.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/scripts/lib-franklin-dev.js b/scripts/lib-franklin-dev.js index c931787e2..5e8bc37d5 100644 --- a/scripts/lib-franklin-dev.js +++ b/scripts/lib-franklin-dev.js @@ -546,8 +546,9 @@ export async function loadBlock(block) { block.dataset.blockStatus = 'loading'; const { blockName, jsPath, cssPath } = getBlockConfig(block); try { - if (cssExpectionalBlocks.contains(blockName)) await loadModule(blockName, jsPath, undefined, block); - else await loadModule(blockName, jsPath, cssPath, block); + if (cssExpectionalBlocks.contains(blockName)) { + await loadModule(blockName, jsPath, undefined, block); + } else { await loadModule(blockName, jsPath, cssPath, block); } } catch (error) { // eslint-disable-next-line no-console console.log(`failed to load block ${blockName}`, error); From e9633d34cbe65ee1bbef087266a5213d866f7a1c Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 21:24:07 +0530 Subject: [PATCH 68/88] updated array checks --- scripts/lib-franklin-dev.js | 2 +- scripts/lib-franklin.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/lib-franklin-dev.js b/scripts/lib-franklin-dev.js index 5e8bc37d5..83f81ebb5 100644 --- a/scripts/lib-franklin-dev.js +++ b/scripts/lib-franklin-dev.js @@ -546,7 +546,7 @@ export async function loadBlock(block) { block.dataset.blockStatus = 'loading'; const { blockName, jsPath, cssPath } = getBlockConfig(block); try { - if (cssExpectionalBlocks.contains(blockName)) { + if (cssExpectionalBlocks.includes(blockName)) { await loadModule(blockName, jsPath, undefined, block); } else { await loadModule(blockName, jsPath, cssPath, block); } } catch (error) { diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js index f2d5b176e..abaaa2e15 100644 --- a/scripts/lib-franklin.js +++ b/scripts/lib-franklin.js @@ -1 +1 @@ -function sampleRUM(e,t={}){sampleRUM.defer=sampleRUM.defer||[];var a,o,n,l,s,r,i,c,d,u=t=>{sampleRUM[t]=sampleRUM[t]||((...e)=>sampleRUM.defer.push({fnname:t,args:e}))};sampleRUM.drain=sampleRUM.drain||((t,e)=>{sampleRUM[t]=e,sampleRUM.defer.filter(({fnname:e})=>t===e).forEach(({fnname:e,args:t})=>sampleRUM[e](...t))}),sampleRUM.always=sampleRUM.always||[],sampleRUM.always.on=(e,t)=>{sampleRUM.always[e]=t},sampleRUM.on=(e,t)=>{sampleRUM.cases[e]=t},u("observe"),u("cwv");try{window.hlx=window.hlx||{},window.hlx.rum||(a="on"===new URLSearchParams(window.location.search).get("rum")?1:20,o=Array.from({length:75},(e,t)=>String.fromCharCode(48+t)).filter(e=>/\d|[A-Z]/i.test(e)).filter(()=>70<75*Math.random()).join(""),l=(n=Math.random())*a<1,s=Date.now(),r={full:()=>window.location.href,origin:()=>window.location.origin,path:()=>window.location.href.replace(/\?.*$/,"")},window.hlx.rum={weight:a,id:o,random:n,isSelected:l,firstReadTime:s,sampleRUM:sampleRUM,sanitizeURL:r[window.hlx.RUM_MASK_URL||"path"]});const{weight:m,id:p,firstReadTime:h}=window.hlx.rum;if(window.hlx&&window.hlx.rum&&window.hlx.rum.isSelected){const w=["weight","id","referer","checkpoint","t","source","target","cwv","CLS","FID","LCP","INP"];sampleRUM.cases=sampleRUM.cases||{cwv:()=>sampleRUM.cwv(t)||!0,lazy:()=>{var e=document.createElement("script");return e.src="https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js",document.head.appendChild(e),!0}},[i=t]=[t],c=JSON.stringify({weight:m,id:p,referer:window.hlx.rum.sanitizeURL(),checkpoint:e,t:Date.now()-h,...t},w),d="https://rum.hlx.page/.rum/"+m,navigator.sendBeacon(d,c),console.debug("ping:"+e,i),sampleRUM.cases[e]&&sampleRUM.cases[e]()}sampleRUM.always[e]&&sampleRUM.always[e](t)}catch(e){}}async function loadCSS(o){return new Promise((e,t)=>{var a;document.querySelector(`head > link[href="${o}"]`)?e():((a=document.createElement("link")).rel="stylesheet",a.href=o,a.onload=e,a.onerror=t,document.head.append(a))})}async function loadScript(n,l){return new Promise((e,t)=>{if(document.querySelector(`head > script[src="${n}"]`))e();else{var a=document.createElement("script");if(a.src=n,l)for(const o in l)a.setAttribute(o,l[o]);a.onload=e,a.onerror=t,document.head.append(a)}})}function getMetadata(e){var t=e&&e.includes(":")?"property":"name";return[...document.head.querySelectorAll(`meta[${t}="${e}"]`)].map(e=>e.content).join(", ")||""}function toClassName(e){return"string"==typeof e?e.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}function toCamelCase(e){return toClassName(e).replace(/-([a-z])/g,e=>e[1].toUpperCase())}function getAllMetadata(a){return[...document.head.querySelectorAll(`meta[property^="${a}:"],meta[name^="${a}-"]`)].reduce((e,t)=>{return e[toClassName(t.name?t.name.substring(a.length+1):t.getAttribute("property").split(":")[1])]=t.getAttribute("content"),e},{})}const ICONS_CACHE={};async function decorateIcons(e){let t=document.getElementById("franklin-svg-sprite");t||((a=document.createElement("div")).innerHTML='<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>',t=a.firstElementChild,document.body.append(a.firstElementChild));var a=[...e.querySelectorAll("span.icon")],e=(await Promise.all(a.map(async t=>{t=Array.from(t.classList).find(e=>e.startsWith("icon-")).substring(5);if(!ICONS_CACHE[t]){ICONS_CACHE[t]=!0;try{let e=window.hlx.codeBasePath+`/icons/${t}.svg`;t.startsWith("dam-")&&(a=window.location.hostname.includes("lifesciences.danaher.com"),e=a?"":"https://lifesciences.danaher.com",e+=`/content/dam/danaher/system/icons/${t.substring(4).replace("_"," ")}.svg`);var a,o,n=await fetch(e);n.ok?(o=await n.text()).match(/(<style | class=)/)?ICONS_CACHE[t]={styled:!0,html:o}:ICONS_CACHE[t]={html:o.replace("<svg",`<symbol id="icons-sprite-${t}"`).replace(/ width=".*?"/,"").replace(/ height=".*?"/,"").replace("</svg>","</symbol>")}:ICONS_CACHE[t]=!1}catch(e){ICONS_CACHE[t]=!1,console.error(e)}}})),Object.keys(ICONS_CACHE).filter(e=>!t.querySelector("#icons-sprite-"+e)).map(e=>ICONS_CACHE[e]).filter(e=>!e.styled).map(e=>e.html).join("\n"));t.innerHTML+=e,a.forEach(e=>{var t=Array.from(e.classList).find(e=>e.startsWith("icon-")).substring(5),e="A"===e.firstElementChild?.tagName?e.firstElementChild:e;ICONS_CACHE[t].styled?e.innerHTML=ICONS_CACHE[t].html:e.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${t}"/></svg>`})}async function fetchPlaceholders(o="default"){return window.placeholders=window.placeholders||{},window.placeholders[o+"-loaded"]||(window.placeholders[o+"-loaded"]=new Promise((a,t)=>{fetch(`${"default"===o?"":o}/placeholders.json`).then(e=>{if(e.ok)return e.json();throw new Error(e.status+": "+e.statusText)}).then(e=>{const t={};e.data.filter(e=>e.Key).forEach(e=>{t[toCamelCase(e.Key)]=e.Text}),window.placeholders[o]=t,a()}).catch(e=>{window.placeholders[o]={},t(e)})})),await window.placeholders[o+"-loaded"],window.placeholders[o]}function decorateBlock(e){var t=e.classList[0];t&&(e.classList.add("block"),e.dataset.blockName=t,e.dataset.blockStatus="initialized",e.parentElement.classList.add(t+"-wrapper"),e=e.closest(".section"))&&e.classList.add(t+"-container")}function readBlockConfig(e){const l={};return e.querySelectorAll(":scope > div").forEach(t=>{if(t.children){var a=[...t.children];if(a[1]){var o,n=a[1],a=toClassName(a[0].textContent);let e="";e=n.querySelector("a")?1===(o=[...n.querySelectorAll("a")]).length?o[0].href:o.map(e=>e.href):n.querySelector("img")?1===(o=[...n.querySelectorAll("img")]).length?o[0].src:o.map(e=>e.src):n.querySelector("p")?1===(o=[...n.querySelectorAll("p")]).length?o[0].textContent:o.map(e=>e.textContent):t.children[1].textContent,l[a]=e}}}),l}function decorateSections(e){e.querySelectorAll(":scope > div").forEach(t=>{const a=[];let o=!1;[...t.children].forEach(e=>{var t;"DIV"!==e.tagName&&o||(t=document.createElement("div"),a.push(t),(o="DIV"!==e.tagName)&&t.classList.add("default-content-wrapper")),a[a.length-1].append(e)}),a.forEach(e=>t.append(e)),t.classList.add("section"),t.dataset.sectionStatus="initialized",t.style.display="none";var e=t.querySelector("div.section-metadata");if(e){const n=readBlockConfig(e);Object.keys(n).forEach(e=>{"style"===e?n.style.split(",").map(e=>toClassName(e.trim())).forEach(e=>t.classList.add(e)):t.dataset[toCamelCase(e)]=n[e]}),e.parentNode.remove()}})}function updateSectionsStatus(e){var t=[...e.querySelectorAll(":scope > div.section")];for(let e=0;e<t.length;e+=1){var a=t[e];if("loaded"!==a.dataset.sectionStatus){if(a.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]')){a.dataset.sectionStatus="loading";break}a.dataset.sectionStatus="loaded",a.style.display=null}}}function decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(decorateBlock)}function buildBlock(e,t){t=Array.isArray(t)?t:[[t]];const o=document.createElement("div");return o.classList.add(e),t.forEach(e=>{const a=document.createElement("div");e.forEach(e=>{const t=document.createElement("div");(e.elems||[e]).forEach(e=>{e&&("string"==typeof e?t.innerHTML+=e:t.appendChild(e))}),a.appendChild(t)}),o.appendChild(a)}),o}async function loadModule(a,o,e,...n){var e=e?loadCSS(e):Promise.resolve(),t=o?new Promise(t=>{(async()=>{let e;try{(e=await import(o)).default&&await e.default.apply(null,n)}catch(e){console.log("failed to load module for "+a,e)}t(e)})()}):Promise.resolve();return Promise.all([e,t]).then(([,e])=>e)}function getBlockConfig(e){var e=e.dataset["blockName"],t=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.js`:"",a=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.css`:"";const o={blockName:e,jsPath:t};return(window.hlx.patchBlockConfig||[]).filter(e=>"function"==typeof e).reduce((e,t)=>t(e,o),{blockName:e,jsPath:t,cssPath:a})}const cssExpectionalBlocks=[];async function loadBlock(e){var t=e.dataset.blockStatus;if("loading"!==t&&"loaded"!==t){e.dataset.blockStatus="loading";var{blockName:t,jsPath:a,cssPath:o}=getBlockConfig(e);try{cssExpectionalBlocks.contains(t)?await loadModule(t,a,void 0,e):await loadModule(t,a,o,e)}catch(e){console.log("failed to load block "+t,e)}e.dataset.blockStatus="loaded"}}async function loadBlocks(t){updateSectionsStatus(t);var a=[...t.querySelectorAll("div.block")];for(let e=0;e<a.length;e+=1)await loadBlock(a[e]),updateSectionsStatus(t)}function createOptimizedPicture(e,a="",o=!1,n=[{media:"(min-width: 600px)",width:"2000"},{width:"750"}]){e=new URL(e,window.location.href);const l=document.createElement("picture"),s=e["pathname"],r=s.substring(s.lastIndexOf(".")+1);return n.forEach(e=>{var t=document.createElement("source");e.media&&t.setAttribute("media",e.media),t.setAttribute("type","image/webp"),t.setAttribute("srcset",`${s}?width=${e.width}&format=webply&optimize=medium`),l.appendChild(t)}),n.forEach((e,t)=>{t<n.length-1?(t=document.createElement("source"),e.media&&t.setAttribute("media",e.media),t.setAttribute("srcset",`${s}?width=${e.width}&format=${r}&optimize=medium`),l.appendChild(t)):((t=document.createElement("img")).setAttribute("loading",o?"eager":"lazy"),t.setAttribute("alt",a),l.appendChild(t),t.setAttribute("src",`${s}?width=${e.width}&format=${r}&optimize=medium`))}),l}function normalizeHeadings(e,t){const o=t.map(e=>e.toLowerCase());e.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(t=>{var a=t.tagName.toLowerCase();if(-1===o.indexOf(a)){let e=parseInt(a.charAt(1),10)-1;for(;-1===o.indexOf("h"+e)&&0<e;)--e;if(0===e)for(;-1===o.indexOf("h"+e)&&e<7;)e+=1;7!==e&&(t.outerHTML=`<h${e} id="${t.id}">${t.textContent}</h${e}>`)}})}function decorateTemplateAndTheme(){var e=(t,e)=>{e.split(",").forEach(e=>{t.classList.add(toClassName(e.trim()))})},t=getMetadata("template"),t=(t&&e(document.body,t),getMetadata("theme"));t&&e(document.body,t)}function decorateButtons(e){e.querySelectorAll("a").forEach(e=>{var t,a;e.title=e.title||e.textContent,e.href!==e.textContent&&"link"!==e.title&&(t=e.parentElement,a=e.parentElement.parentElement,e.querySelector("img")||"LI"===a.tagName||e.closest(".call-to-action")||e.closest(".mini-teasers")||e.closest(".bg-color-right")||(1!==t.childNodes.length||"P"!==t.tagName&&"DIV"!==t.tagName||(e.className="btn btn-outline-primary",t.classList.add("button-container")),1===t.childNodes.length&&"STRONG"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-primary",a.classList.add("button-container")),1===t.childNodes.length&&"EM"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-secondary",a.classList.add("button-container"))))})}async function waitForLCP(e){var t=document.querySelector(".block");t&&e.includes(t.dataset.blockName)&&await loadBlock(t),document.body.style.display=null;const a=document.querySelector("main img");await new Promise(e=>{a&&!a.complete?(a.setAttribute("loading","eager"),a.addEventListener("load",e),a.addEventListener("error",e)):e()})}function loadHeader(e){var t=buildBlock("header","");return e.append(t),decorateBlock(t),loadBlock(t)}function loadFooter(e){var t=buildBlock("footer","");return e.append(t),decorateBlock(t),loadBlock(t)}function parsePluginParams(e,t){var a=t?e:e.split("/").splice(e.endsWith("/")?-2:-1,1)[0].replace(/\.js/,""),t={load:"eager",..."string"!=typeof t&&t?t:{url:(t||e).replace(/\/$/,"")}};return t.options||={},{id:a,config:t}}const executionContext={createOptimizedPicture:createOptimizedPicture,getAllMetadata:getAllMetadata,getMetadata:getMetadata,decorateBlock:decorateBlock,decorateButtons:decorateButtons,decorateIcons:decorateIcons,loadBlock:loadBlock,loadCSS:loadCSS,loadScript:loadScript,sampleRUM:sampleRUM,toCamelCase:toCamelCase,toClassName:toClassName};class PluginsRegistry{#plugins;constructor(){this.#plugins=new Map}add(e,t){var{id:e,config:t}=parsePluginParams(e,t);this.#plugins.set(e,t)}get(e){return this.#plugins.get(e)}includes(e){return!!this.#plugins.has(e)}async load(t){return[...this.#plugins.entries()].filter(([,e])=>e.condition&&!e.condition(document,e.options,executionContext)).map(([e])=>this.#plugins.delete(e)),Promise.all([...this.#plugins.entries()].filter(([,e])=>(!e.condition||e.condition(document,e.options,executionContext))&&t===e.load&&e.url).map(async([t,e])=>{try{var a=await loadModule(t,e.url.endsWith(".js")?e.url:e.url+`/${t}.js`,e.url.endsWith(".js")?null:e.url+`/${t}.css`,document,e.options,executionContext)||{};this.#plugins.set(t,{...e,...a})}catch(e){console.error("Could not load specified plugin",t)}}))}async run(a){return[...this.#plugins.values()].reduce((e,t)=>!t[a]||t.condition&&!t.condition(document,t.options,executionContext)?e:e.then(()=>t[a](document,t.options,executionContext)),Promise.resolve())}}class TemplatesRegistry{add(e,t){if(Array.isArray(e))e.forEach(e=>window.hlx.templates.add(e));else{const{id:a,config:o}=parsePluginParams(e,t);o.condition=()=>toClassName(getMetadata("template"))===a,window.hlx.plugins.add(a,o)}}get(e){return window.hlx.plugins.get(e)}includes(e){return window.hlx.plugins.includes(e)}}function setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse="on"===new URLSearchParams(window.location.search).get("lighthouse"),window.hlx.patchBlockConfig=[],window.hlx.plugins=new PluginsRegistry,window.hlx.templates=new TemplatesRegistry;var e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(e){console.log(e)}}function init(){setup(),sampleRUM("top"),window.addEventListener("load",()=>sampleRUM("load")),window.addEventListener("unhandledrejection",e=>{sampleRUM("error",{source:e.reason.sourceURL,target:e.reason.line})}),window.addEventListener("error",e=>{sampleRUM("error",{source:e.filename,target:e.lineno})})}init();export{sampleRUM,loadCSS,loadScript,getMetadata,toClassName,toCamelCase,getAllMetadata,decorateIcons,fetchPlaceholders,decorateBlock,readBlockConfig,decorateSections,updateSectionsStatus,decorateBlocks,buildBlock,loadBlock,loadBlocks,createOptimizedPicture,normalizeHeadings,decorateTemplateAndTheme,decorateButtons,waitForLCP,loadHeader,loadFooter,executionContext,setup}; \ No newline at end of file +function sampleRUM(e,t={}){sampleRUM.defer=sampleRUM.defer||[];var a,o,n,l,s,r,i,c,d,u=t=>{sampleRUM[t]=sampleRUM[t]||((...e)=>sampleRUM.defer.push({fnname:t,args:e}))};sampleRUM.drain=sampleRUM.drain||((t,e)=>{sampleRUM[t]=e,sampleRUM.defer.filter(({fnname:e})=>t===e).forEach(({fnname:e,args:t})=>sampleRUM[e](...t))}),sampleRUM.always=sampleRUM.always||[],sampleRUM.always.on=(e,t)=>{sampleRUM.always[e]=t},sampleRUM.on=(e,t)=>{sampleRUM.cases[e]=t},u("observe"),u("cwv");try{window.hlx=window.hlx||{},window.hlx.rum||(a="on"===new URLSearchParams(window.location.search).get("rum")?1:20,o=Array.from({length:75},(e,t)=>String.fromCharCode(48+t)).filter(e=>/\d|[A-Z]/i.test(e)).filter(()=>70<75*Math.random()).join(""),l=(n=Math.random())*a<1,s=Date.now(),r={full:()=>window.location.href,origin:()=>window.location.origin,path:()=>window.location.href.replace(/\?.*$/,"")},window.hlx.rum={weight:a,id:o,random:n,isSelected:l,firstReadTime:s,sampleRUM:sampleRUM,sanitizeURL:r[window.hlx.RUM_MASK_URL||"path"]});const{weight:m,id:p,firstReadTime:h}=window.hlx.rum;if(window.hlx&&window.hlx.rum&&window.hlx.rum.isSelected){const w=["weight","id","referer","checkpoint","t","source","target","cwv","CLS","FID","LCP","INP"];sampleRUM.cases=sampleRUM.cases||{cwv:()=>sampleRUM.cwv(t)||!0,lazy:()=>{var e=document.createElement("script");return e.src="https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js",document.head.appendChild(e),!0}},[i=t]=[t],c=JSON.stringify({weight:m,id:p,referer:window.hlx.rum.sanitizeURL(),checkpoint:e,t:Date.now()-h,...t},w),d="https://rum.hlx.page/.rum/"+m,navigator.sendBeacon(d,c),console.debug("ping:"+e,i),sampleRUM.cases[e]&&sampleRUM.cases[e]()}sampleRUM.always[e]&&sampleRUM.always[e](t)}catch(e){}}async function loadCSS(o){return new Promise((e,t)=>{var a;document.querySelector(`head > link[href="${o}"]`)?e():((a=document.createElement("link")).rel="stylesheet",a.href=o,a.onload=e,a.onerror=t,document.head.append(a))})}async function loadScript(n,l){return new Promise((e,t)=>{if(document.querySelector(`head > script[src="${n}"]`))e();else{var a=document.createElement("script");if(a.src=n,l)for(const o in l)a.setAttribute(o,l[o]);a.onload=e,a.onerror=t,document.head.append(a)}})}function getMetadata(e){var t=e&&e.includes(":")?"property":"name";return[...document.head.querySelectorAll(`meta[${t}="${e}"]`)].map(e=>e.content).join(", ")||""}function toClassName(e){return"string"==typeof e?e.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}function toCamelCase(e){return toClassName(e).replace(/-([a-z])/g,e=>e[1].toUpperCase())}function getAllMetadata(a){return[...document.head.querySelectorAll(`meta[property^="${a}:"],meta[name^="${a}-"]`)].reduce((e,t)=>{return e[toClassName(t.name?t.name.substring(a.length+1):t.getAttribute("property").split(":")[1])]=t.getAttribute("content"),e},{})}const ICONS_CACHE={};async function decorateIcons(e){let t=document.getElementById("franklin-svg-sprite");t||((a=document.createElement("div")).innerHTML='<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>',t=a.firstElementChild,document.body.append(a.firstElementChild));var a=[...e.querySelectorAll("span.icon")],e=(await Promise.all(a.map(async t=>{t=Array.from(t.classList).find(e=>e.startsWith("icon-")).substring(5);if(!ICONS_CACHE[t]){ICONS_CACHE[t]=!0;try{let e=window.hlx.codeBasePath+`/icons/${t}.svg`;t.startsWith("dam-")&&(a=window.location.hostname.includes("lifesciences.danaher.com"),e=a?"":"https://lifesciences.danaher.com",e+=`/content/dam/danaher/system/icons/${t.substring(4).replace("_"," ")}.svg`);var a,o,n=await fetch(e);n.ok?(o=await n.text()).match(/(<style | class=)/)?ICONS_CACHE[t]={styled:!0,html:o}:ICONS_CACHE[t]={html:o.replace("<svg",`<symbol id="icons-sprite-${t}"`).replace(/ width=".*?"/,"").replace(/ height=".*?"/,"").replace("</svg>","</symbol>")}:ICONS_CACHE[t]=!1}catch(e){ICONS_CACHE[t]=!1,console.error(e)}}})),Object.keys(ICONS_CACHE).filter(e=>!t.querySelector("#icons-sprite-"+e)).map(e=>ICONS_CACHE[e]).filter(e=>!e.styled).map(e=>e.html).join("\n"));t.innerHTML+=e,a.forEach(e=>{var t=Array.from(e.classList).find(e=>e.startsWith("icon-")).substring(5),e="A"===e.firstElementChild?.tagName?e.firstElementChild:e;ICONS_CACHE[t].styled?e.innerHTML=ICONS_CACHE[t].html:e.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${t}"/></svg>`})}async function fetchPlaceholders(o="default"){return window.placeholders=window.placeholders||{},window.placeholders[o+"-loaded"]||(window.placeholders[o+"-loaded"]=new Promise((a,t)=>{fetch(`${"default"===o?"":o}/placeholders.json`).then(e=>{if(e.ok)return e.json();throw new Error(e.status+": "+e.statusText)}).then(e=>{const t={};e.data.filter(e=>e.Key).forEach(e=>{t[toCamelCase(e.Key)]=e.Text}),window.placeholders[o]=t,a()}).catch(e=>{window.placeholders[o]={},t(e)})})),await window.placeholders[o+"-loaded"],window.placeholders[o]}function decorateBlock(e){var t=e.classList[0];t&&(e.classList.add("block"),e.dataset.blockName=t,e.dataset.blockStatus="initialized",e.parentElement.classList.add(t+"-wrapper"),e=e.closest(".section"))&&e.classList.add(t+"-container")}function readBlockConfig(e){const l={};return e.querySelectorAll(":scope > div").forEach(t=>{if(t.children){var a=[...t.children];if(a[1]){var o,n=a[1],a=toClassName(a[0].textContent);let e="";e=n.querySelector("a")?1===(o=[...n.querySelectorAll("a")]).length?o[0].href:o.map(e=>e.href):n.querySelector("img")?1===(o=[...n.querySelectorAll("img")]).length?o[0].src:o.map(e=>e.src):n.querySelector("p")?1===(o=[...n.querySelectorAll("p")]).length?o[0].textContent:o.map(e=>e.textContent):t.children[1].textContent,l[a]=e}}}),l}function decorateSections(e){e.querySelectorAll(":scope > div").forEach(t=>{const a=[];let o=!1;[...t.children].forEach(e=>{var t;"DIV"!==e.tagName&&o||(t=document.createElement("div"),a.push(t),(o="DIV"!==e.tagName)&&t.classList.add("default-content-wrapper")),a[a.length-1].append(e)}),a.forEach(e=>t.append(e)),t.classList.add("section"),t.dataset.sectionStatus="initialized",t.style.display="none";var e=t.querySelector("div.section-metadata");if(e){const n=readBlockConfig(e);Object.keys(n).forEach(e=>{"style"===e?n.style.split(",").map(e=>toClassName(e.trim())).forEach(e=>t.classList.add(e)):t.dataset[toCamelCase(e)]=n[e]}),e.parentNode.remove()}})}function updateSectionsStatus(e){var t=[...e.querySelectorAll(":scope > div.section")];for(let e=0;e<t.length;e+=1){var a=t[e];if("loaded"!==a.dataset.sectionStatus){if(a.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]')){a.dataset.sectionStatus="loading";break}a.dataset.sectionStatus="loaded",a.style.display=null}}}function decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(decorateBlock)}function buildBlock(e,t){t=Array.isArray(t)?t:[[t]];const o=document.createElement("div");return o.classList.add(e),t.forEach(e=>{const a=document.createElement("div");e.forEach(e=>{const t=document.createElement("div");(e.elems||[e]).forEach(e=>{e&&("string"==typeof e?t.innerHTML+=e:t.appendChild(e))}),a.appendChild(t)}),o.appendChild(a)}),o}async function loadModule(a,o,e,...n){var e=e?loadCSS(e):Promise.resolve(),t=o?new Promise(t=>{(async()=>{let e;try{(e=await import(o)).default&&await e.default.apply(null,n)}catch(e){console.log("failed to load module for "+a,e)}t(e)})()}):Promise.resolve();return Promise.all([e,t]).then(([,e])=>e)}function getBlockConfig(e){var e=e.dataset["blockName"],t=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.js`:"",a=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.css`:"";const o={blockName:e,jsPath:t};return(window.hlx.patchBlockConfig||[]).filter(e=>"function"==typeof e).reduce((e,t)=>t(e,o),{blockName:e,jsPath:t,cssPath:a})}const cssExpectionalBlocks=[];async function loadBlock(e){var t=e.dataset.blockStatus;if("loading"!==t&&"loaded"!==t){e.dataset.blockStatus="loading";var{blockName:t,jsPath:a,cssPath:o}=getBlockConfig(e);try{cssExpectionalBlocks.includes(t)?await loadModule(t,a,void 0,e):await loadModule(t,a,o,e)}catch(e){console.log("failed to load block "+t,e)}e.dataset.blockStatus="loaded"}}async function loadBlocks(t){updateSectionsStatus(t);var a=[...t.querySelectorAll("div.block")];for(let e=0;e<a.length;e+=1)await loadBlock(a[e]),updateSectionsStatus(t)}function createOptimizedPicture(e,a="",o=!1,n=[{media:"(min-width: 600px)",width:"2000"},{width:"750"}]){e=new URL(e,window.location.href);const l=document.createElement("picture"),s=e["pathname"],r=s.substring(s.lastIndexOf(".")+1);return n.forEach(e=>{var t=document.createElement("source");e.media&&t.setAttribute("media",e.media),t.setAttribute("type","image/webp"),t.setAttribute("srcset",`${s}?width=${e.width}&format=webply&optimize=medium`),l.appendChild(t)}),n.forEach((e,t)=>{t<n.length-1?(t=document.createElement("source"),e.media&&t.setAttribute("media",e.media),t.setAttribute("srcset",`${s}?width=${e.width}&format=${r}&optimize=medium`),l.appendChild(t)):((t=document.createElement("img")).setAttribute("loading",o?"eager":"lazy"),t.setAttribute("alt",a),l.appendChild(t),t.setAttribute("src",`${s}?width=${e.width}&format=${r}&optimize=medium`))}),l}function normalizeHeadings(e,t){const o=t.map(e=>e.toLowerCase());e.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(t=>{var a=t.tagName.toLowerCase();if(-1===o.indexOf(a)){let e=parseInt(a.charAt(1),10)-1;for(;-1===o.indexOf("h"+e)&&0<e;)--e;if(0===e)for(;-1===o.indexOf("h"+e)&&e<7;)e+=1;7!==e&&(t.outerHTML=`<h${e} id="${t.id}">${t.textContent}</h${e}>`)}})}function decorateTemplateAndTheme(){var e=(t,e)=>{e.split(",").forEach(e=>{t.classList.add(toClassName(e.trim()))})},t=getMetadata("template"),t=(t&&e(document.body,t),getMetadata("theme"));t&&e(document.body,t)}function decorateButtons(e){e.querySelectorAll("a").forEach(e=>{var t,a;e.title=e.title||e.textContent,e.href!==e.textContent&&"link"!==e.title&&(t=e.parentElement,a=e.parentElement.parentElement,e.querySelector("img")||"LI"===a.tagName||e.closest(".call-to-action")||e.closest(".mini-teasers")||e.closest(".bg-color-right")||(1!==t.childNodes.length||"P"!==t.tagName&&"DIV"!==t.tagName||(e.className="btn btn-outline-primary",t.classList.add("button-container")),1===t.childNodes.length&&"STRONG"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-primary",a.classList.add("button-container")),1===t.childNodes.length&&"EM"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-secondary",a.classList.add("button-container"))))})}async function waitForLCP(e){var t=document.querySelector(".block");t&&e.includes(t.dataset.blockName)&&await loadBlock(t),document.body.style.display=null;const a=document.querySelector("main img");await new Promise(e=>{a&&!a.complete?(a.setAttribute("loading","eager"),a.addEventListener("load",e),a.addEventListener("error",e)):e()})}function loadHeader(e){var t=buildBlock("header","");return e.append(t),decorateBlock(t),loadBlock(t)}function loadFooter(e){var t=buildBlock("footer","");return e.append(t),decorateBlock(t),loadBlock(t)}function parsePluginParams(e,t){var a=t?e:e.split("/").splice(e.endsWith("/")?-2:-1,1)[0].replace(/\.js/,""),t={load:"eager",..."string"!=typeof t&&t?t:{url:(t||e).replace(/\/$/,"")}};return t.options||={},{id:a,config:t}}const executionContext={createOptimizedPicture:createOptimizedPicture,getAllMetadata:getAllMetadata,getMetadata:getMetadata,decorateBlock:decorateBlock,decorateButtons:decorateButtons,decorateIcons:decorateIcons,loadBlock:loadBlock,loadCSS:loadCSS,loadScript:loadScript,sampleRUM:sampleRUM,toCamelCase:toCamelCase,toClassName:toClassName};class PluginsRegistry{#plugins;constructor(){this.#plugins=new Map}add(e,t){var{id:e,config:t}=parsePluginParams(e,t);this.#plugins.set(e,t)}get(e){return this.#plugins.get(e)}includes(e){return!!this.#plugins.has(e)}async load(t){return[...this.#plugins.entries()].filter(([,e])=>e.condition&&!e.condition(document,e.options,executionContext)).map(([e])=>this.#plugins.delete(e)),Promise.all([...this.#plugins.entries()].filter(([,e])=>(!e.condition||e.condition(document,e.options,executionContext))&&t===e.load&&e.url).map(async([t,e])=>{try{var a=await loadModule(t,e.url.endsWith(".js")?e.url:e.url+`/${t}.js`,e.url.endsWith(".js")?null:e.url+`/${t}.css`,document,e.options,executionContext)||{};this.#plugins.set(t,{...e,...a})}catch(e){console.error("Could not load specified plugin",t)}}))}async run(a){return[...this.#plugins.values()].reduce((e,t)=>!t[a]||t.condition&&!t.condition(document,t.options,executionContext)?e:e.then(()=>t[a](document,t.options,executionContext)),Promise.resolve())}}class TemplatesRegistry{add(e,t){if(Array.isArray(e))e.forEach(e=>window.hlx.templates.add(e));else{const{id:a,config:o}=parsePluginParams(e,t);o.condition=()=>toClassName(getMetadata("template"))===a,window.hlx.plugins.add(a,o)}}get(e){return window.hlx.plugins.get(e)}includes(e){return window.hlx.plugins.includes(e)}}function setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse="on"===new URLSearchParams(window.location.search).get("lighthouse"),window.hlx.patchBlockConfig=[],window.hlx.plugins=new PluginsRegistry,window.hlx.templates=new TemplatesRegistry;var e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(e){console.log(e)}}function init(){setup(),sampleRUM("top"),window.addEventListener("load",()=>sampleRUM("load")),window.addEventListener("unhandledrejection",e=>{sampleRUM("error",{source:e.reason.sourceURL,target:e.reason.line})}),window.addEventListener("error",e=>{sampleRUM("error",{source:e.filename,target:e.lineno})})}init();export{sampleRUM,loadCSS,loadScript,getMetadata,toClassName,toCamelCase,getAllMetadata,decorateIcons,fetchPlaceholders,decorateBlock,readBlockConfig,decorateSections,updateSectionsStatus,decorateBlocks,buildBlock,loadBlock,loadBlocks,createOptimizedPicture,normalizeHeadings,decorateTemplateAndTheme,decorateButtons,waitForLCP,loadHeader,loadFooter,executionContext,setup}; \ No newline at end of file From 15a0ddcab1aefebb190b8362281b9864b2f28830 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 21:46:48 +0530 Subject: [PATCH 69/88] auto generated css updated --- blocks/accordion/accordion.css | 237 --------------- blocks/articles-list/articles-list.css | 214 ------------- blocks/banner/banner.css | 264 ---------------- blocks/blog-hero/blog-hero.css | 243 --------------- blocks/breadcrumb/breadcrumb.css | 259 ---------------- blocks/call-to-action/call-to-action.css | 253 ---------------- blocks/card-list/card-list.css | 184 ------------ blocks/cards/cards.css | 234 --------------- blocks/carousel/carousel.css | 217 -------------- blocks/category-family/category-family.css | 175 ----------- blocks/columns/columns.css | 207 ------------- blocks/download/download.css | 250 ---------------- blocks/embed/embed.css | 266 ---------------- blocks/footer/footer.css | 224 -------------- blocks/header/header.css | 195 ------------ blocks/hero/hero.css | 245 --------------- blocks/logo-clouds/logo-clouds.css | 253 ---------------- blocks/marketo-form/marketo-form.css | 255 ---------------- blocks/mini-teasers/mini-teasers.css | 256 ---------------- blocks/page-jump-menu/page-jump-menu.css | 235 --------------- blocks/page-tabs/page-tabs.css | 235 --------------- blocks/popular-articles/popular-articles.css | 283 ------------------ blocks/product-card/product-card.css | 214 ------------- .../product-category-list.css | 191 ------------ blocks/product-category/product-category.css | 210 ------------- .../product-citations/product-citations.css | 267 ----------------- blocks/product-menu/product-menu.css | 263 ---------------- blocks/product-overview/product-overview.css | 273 ----------------- blocks/product-parts/product-parts.css | 244 --------------- .../product-recommendations.css | 197 ------------ .../product-specifications.css | 256 ---------------- blocks/recent-articles/recent-articles.css | 249 --------------- blocks/related-articles/related-articles.css | 230 -------------- blocks/side-nav/side-nav.css | 252 ---------------- blocks/social-feeds/social-feeds.css | 283 ------------------ blocks/social-media/social-media.css | 262 ---------------- blocks/stats/stats.css | 267 ----------------- 37 files changed, 8842 deletions(-) diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index 5f7dc5cdb..035ffab80 100644 --- a/blocks/accordion/accordion.css +++ b/blocks/accordion/accordion.css @@ -534,40 +534,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - .eyebrow { color: #4000A5; font-size: 1.125rem; @@ -575,14 +541,6 @@ video { line-height: 1.75rem; } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.accordion-wrapper :is(.fixed) { - position: fixed; -} - .accordion-wrapper :is(.absolute) { position: absolute; } @@ -591,23 +549,10 @@ video { position: relative; } -.accordion-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - .accordion-wrapper :is(.right-0) { right: 0px; } -.accordion-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.accordion-wrapper :is(.z-10) { - z-index: 10; -} - .accordion-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; @@ -622,26 +567,6 @@ video { margin-right: 3rem; } -.accordion-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.accordion-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.accordion-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.accordion-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.accordion-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .accordion-wrapper :is(.block) { display: block; } @@ -666,10 +591,6 @@ video { height: 100%; } -.accordion-wrapper :is(.h-48) { - height: 12rem; -} - .accordion-wrapper :is(.w-6) { width: 1.5rem; } @@ -703,10 +624,6 @@ video { grid-template-rows: 0fr; } -.accordion-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .accordion-wrapper :is(.items-center) { align-items: center; } @@ -733,46 +650,15 @@ video { overflow: hidden; } -.accordion-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.accordion-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.accordion-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .accordion-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.accordion-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - .accordion-wrapper :is(.fill-current) { fill: currentColor; } -.accordion-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.accordion-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.accordion-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .accordion-wrapper :is(.py-2) { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -782,22 +668,6 @@ video { padding-top: 1rem; } -.accordion-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.accordion-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.accordion-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.accordion-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .accordion-wrapper :is(.text-left) { text-align: left; } @@ -837,10 +707,6 @@ video { line-height: 1.75rem; } -.accordion-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .accordion-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)); @@ -851,11 +717,6 @@ video { color: rgb(156 163 175 / var(--tw-text-opacity)); } -.accordion-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .accordion-wrapper :is(.\!no-underline) { text-decoration-line: none !important; } @@ -864,18 +725,6 @@ video { opacity: 0; } -.accordion-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.accordion-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .accordion-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -920,33 +769,11 @@ video { opacity: 1; } -@media (min-width: 768px) { - .accordion-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .accordion-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - @media (min-width: 1024px) { - .accordion-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - .accordion-wrapper :is(.lg\:block) { display: block; } - .accordion-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .accordion-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .accordion-wrapper :is(.lg\:grid-cols-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -960,40 +787,6 @@ video { } } -@media (min-width: 1280px) { - .accordion-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .accordion-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .accordion-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .accordion-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .accordion-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .accordion-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.accordion-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - .accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.minus\]\:rotate-180 span.minus) { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1014,34 +807,4 @@ video { .accordion-wrapper :is(.\[\&_svg\>use\]\:stroke-black svg>use) { stroke: #000; -} - -.accordion-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.accordion-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.accordion-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.accordion-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.accordion-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.accordion-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.accordion-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/articles-list/articles-list.css b/blocks/articles-list/articles-list.css index 23ac74569..9f8a525da 100644 --- a/blocks/articles-list/articles-list.css +++ b/blocks/articles-list/articles-list.css @@ -568,57 +568,15 @@ video { } } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.articles-list-wrapper :is(.fixed) { - position: fixed; -} - -.articles-list-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.articles-list-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.articles-list-wrapper :is(.z-10) { - z-index: 10; -} - .articles-list-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; } -.articles-list-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .articles-list-wrapper :is(.mt-4) { margin-top: 1rem; } -.articles-list-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.articles-list-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.articles-list-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.articles-list-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .articles-list-wrapper :is(.\!block) { display: block !important; } @@ -635,10 +593,6 @@ video { display: grid; } -.articles-list-wrapper :is(.h-48) { - height: 12rem; -} - .articles-list-wrapper :is(.w-full) { width: 100%; } @@ -651,10 +605,6 @@ video { grid-template-columns: repeat(1, minmax(0, 1fr)); } -.articles-list-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .articles-list-wrapper :is(.items-center) { align-items: center; } @@ -677,19 +627,6 @@ video { margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } -.articles-list-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.articles-list-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.articles-list-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .articles-list-wrapper :is(.border-t) { border-top-width: 1px; } @@ -708,94 +645,29 @@ video { background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.articles-list-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.articles-list-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.articles-list-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.articles-list-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .articles-list-wrapper :is(.px-3) { padding-left: 0.75rem; padding-right: 0.75rem; } -.articles-list-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .articles-list-wrapper :is(.pt-4) { padding-top: 1rem; } -.articles-list-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.articles-list-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.articles-list-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.articles-list-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .articles-list-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; } -.articles-list-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .articles-list-wrapper :is(.font-bold) { font-weight: 700; } -.articles-list-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .articles-list-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)); } -.articles-list-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.articles-list-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.articles-list-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .articles-list-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -811,94 +683,8 @@ video { } } -@media (min-width: 768px) { - .articles-list-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .articles-list-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - @media (min-width: 1024px) { - .articles-list-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .articles-list-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .articles-list-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .articles-list-wrapper :is(.lg\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } -} - -@media (min-width: 1280px) { - .articles-list-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .articles-list-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .articles-list-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .articles-list-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .articles-list-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .articles-list-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.articles-list-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.articles-list-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.articles-list-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.articles-list-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.articles-list-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.articles-list-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.articles-list-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.articles-list-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css index eed2ddbc6..a73293d96 100644 --- a/blocks/banner/banner.css +++ b/blocks/banner/banner.css @@ -534,95 +534,15 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.banner :is(.fixed) { - position: fixed; -} - .banner :is(.relative) { position: relative; } -.banner :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.banner :is(.top-\[83px\]) { - top: 83px; -} - -.banner :is(.z-10) { - z-index: 10; -} - .banner :is(.mx-auto) { margin-left: auto; margin-right: auto; } -.banner :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - -.banner :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.banner :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.banner :is(.mt-0) { - margin-top: 0px; -} - -.banner :is(.mt-4) { - margin-top: 1rem; -} - -.banner :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .banner :is(.block) { display: block; } @@ -636,10 +556,6 @@ video { height: max-content; } -.banner :is(.h-48) { - height: 12rem; -} - .banner :is(.min-h-\[13rem\]) { min-height: 13rem; } @@ -652,10 +568,6 @@ video { max-width: 80rem; } -.banner :is(.flex-wrap) { - flex-wrap: wrap; -} - .banner :is(.items-center) { align-items: center; } @@ -664,42 +576,11 @@ video { justify-content: flex-start; } -.banner :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.banner :is(.rounded-full) { - border-radius: 9999px; -} - -.banner :is(.rounded-none) { - border-radius: 0px; -} - .banner :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.banner :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.banner :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.banner :is(.stroke-white) { - stroke: #fff; -} - -.banner :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .banner :is(.p-4) { padding: 1rem; } @@ -709,31 +590,6 @@ video { padding-right: 1.5rem; } -.banner :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.banner :is(.pb-0) { - padding-bottom: 0px; -} - -.banner :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.banner :is(.pb-4) { - padding-bottom: 1rem; -} - -.banner :is(.pt-4) { - padding-top: 1rem; -} - -.banner :is(.pt-6) { - padding-top: 1.5rem; -} - .banner :is(.text-4xl) { font-size: 2.25rem; line-height: 2.5rem; @@ -744,11 +600,6 @@ video { line-height: 1.75rem; } -.banner :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .banner :is(.font-extrabold) { font-weight: 800; } @@ -757,14 +608,6 @@ video { font-weight: 200; } -.banner :is(.font-bold) { - font-weight: 700; -} - -.banner :is(.leading-6) { - line-height: 1.5rem; -} - .banner :is(.tracking-tight) { letter-spacing: -0.025em; } @@ -774,115 +617,8 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.banner :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.banner :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.banner :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.banner :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - @media (min-width: 768px) { - .banner :is(.md\:mt-4) { - margin-top: 1rem; - } - .banner :is(.md\:w-3\/4) { width: 75%; } - - .banner :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .banner :is(.lg\:mt-0) { - margin-top: 0px; - } - - .banner :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .banner :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .banner :is(.xl\:w-1\/4) { - width: 25%; - } - - .banner :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .banner :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .banner :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .banner :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .banner :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.banner :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.banner :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.banner :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.banner :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.banner :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.banner :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.banner :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.banner :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/blog-hero/blog-hero.css b/blocks/blog-hero/blog-hero.css index 557e66269..d5485cbbc 100644 --- a/blocks/blog-hero/blog-hero.css +++ b/blocks/blog-hero/blog-hero.css @@ -534,61 +534,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.blog-hero-wrapper :is(.fixed) { - position: fixed; -} - -.blog-hero-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.blog-hero-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.blog-hero-wrapper :is(.z-10) { - z-index: 10; -} - .blog-hero-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -612,11 +557,6 @@ video { margin-bottom: 1rem; } -.blog-hero-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .blog-hero-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -645,18 +585,6 @@ video { margin-top: 2rem; } -.blog-hero-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.blog-hero-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.blog-hero-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .blog-hero-wrapper :is(.block) { display: block; } @@ -677,10 +605,6 @@ video { height: 4rem; } -.blog-hero-wrapper :is(.h-48) { - height: 12rem; -} - .blog-hero-wrapper :is(.w-16) { width: 4rem; } @@ -702,10 +626,6 @@ video { grid-template-columns: repeat(2, minmax(0, 1fr)); } -.blog-hero-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .blog-hero-wrapper :is(.items-center) { align-items: center; } @@ -729,76 +649,24 @@ video { margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } -.blog-hero-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .blog-hero-wrapper :is(.rounded-full) { border-radius: 9999px; } -.blog-hero-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .blog-hero-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.blog-hero-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.blog-hero-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.blog-hero-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.blog-hero-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .blog-hero-wrapper :is(.px-2) { padding-left: 0.5rem; padding-right: 0.5rem; } -.blog-hero-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .blog-hero-wrapper :is(.pl-1) { padding-left: 0.25rem; } -.blog-hero-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.blog-hero-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.blog-hero-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.blog-hero-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.blog-hero-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .blog-hero-wrapper :is(.text-lg) { font-size: 1.125rem; line-height: 1.75rem; @@ -814,19 +682,10 @@ video { line-height: 1.75rem; } -.blog-hero-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .blog-hero-wrapper :is(.font-medium) { font-weight: 500; } -.blog-hero-wrapper :is(.font-bold) { - font-weight: 700; -} - .blog-hero-wrapper :is(.leading-6) { line-height: 1.5rem; } @@ -860,37 +719,7 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } -.blog-hero-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.blog-hero-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.blog-hero-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -@media (min-width: 768px) { - .blog-hero-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .blog-hero-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - @media (min-width: 1024px) { - .blog-hero-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - .blog-hero-wrapper :is(.lg\:h-20) { height: 5rem; } @@ -899,79 +728,7 @@ video { width: 5rem; } - .blog-hero-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .blog-hero-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .blog-hero-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } -} - -@media (min-width: 1280px) { - .blog-hero-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .blog-hero-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .blog-hero-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .blog-hero-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .blog-hero-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .blog-hero-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.blog-hero-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.blog-hero-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.blog-hero-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.blog-hero-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.blog-hero-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.blog-hero-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.blog-hero-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.blog-hero-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/breadcrumb/breadcrumb.css b/blocks/breadcrumb/breadcrumb.css index b352c66a3..2558607e9 100644 --- a/blocks/breadcrumb/breadcrumb.css +++ b/blocks/breadcrumb/breadcrumb.css @@ -534,91 +534,11 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.breadcrumb-wrapper :is(.fixed) { - position: fixed; -} - -.breadcrumb-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.breadcrumb-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.breadcrumb-wrapper :is(.z-10) { - z-index: 10; -} - .breadcrumb-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; } -.breadcrumb-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - -.breadcrumb-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.breadcrumb-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.breadcrumb-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.breadcrumb-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.breadcrumb-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .breadcrumb-wrapper :is(.block) { display: block; } @@ -635,10 +555,6 @@ video { height: 83.333333%; } -.breadcrumb-wrapper :is(.h-48) { - height: 12rem; -} - .breadcrumb-wrapper :is(.w-5) { width: 1.25rem; } @@ -659,10 +575,6 @@ video { flex-shrink: 0; } -.breadcrumb-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .breadcrumb-wrapper :is(.items-center) { align-items: center; } @@ -684,19 +596,6 @@ video { white-space: nowrap; } -.breadcrumb-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.breadcrumb-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.breadcrumb-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .breadcrumb-wrapper :is(.border-b) { border-bottom-width: 1px; } @@ -716,71 +615,20 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.breadcrumb-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.breadcrumb-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.breadcrumb-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .breadcrumb-wrapper :is(.px-4) { padding-left: 1rem; padding-right: 1rem; } -.breadcrumb-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.breadcrumb-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.breadcrumb-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.breadcrumb-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.breadcrumb-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.breadcrumb-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .breadcrumb-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; } -.breadcrumb-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .breadcrumb-wrapper :is(.font-medium) { font-weight: 500; } -.breadcrumb-wrapper :is(.font-bold) { - font-weight: 700; -} - -.breadcrumb-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .breadcrumb-wrapper :is(.text-gray-300) { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); @@ -791,27 +639,6 @@ video { color: rgb(107 114 128 / var(--tw-text-opacity)); } -.breadcrumb-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.breadcrumb-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.breadcrumb-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.breadcrumb-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .breadcrumb-wrapper :is(.hover\:text-gray-700:hover) { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); @@ -824,95 +651,9 @@ video { } } -@media (min-width: 768px) { - .breadcrumb-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .breadcrumb-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - @media (min-width: 1024px) { - .breadcrumb-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .breadcrumb-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .breadcrumb-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .breadcrumb-wrapper :is(.lg\:px-7) { padding-left: 1.75rem; padding-right: 1.75rem; } -} - -@media (min-width: 1280px) { - .breadcrumb-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .breadcrumb-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .breadcrumb-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .breadcrumb-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .breadcrumb-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .breadcrumb-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.breadcrumb-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.breadcrumb-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.breadcrumb-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.breadcrumb-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.breadcrumb-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.breadcrumb-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.breadcrumb-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.breadcrumb-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/call-to-action/call-to-action.css b/blocks/call-to-action/call-to-action.css index aa32ac694..4a0cd37d6 100644 --- a/blocks/call-to-action/call-to-action.css +++ b/blocks/call-to-action/call-to-action.css @@ -534,40 +534,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); @@ -580,27 +546,6 @@ video { background-color: #7523FF; } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.call-to-action-wrapper :is(.fixed) { - position: fixed; -} - -.call-to-action-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.call-to-action-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.call-to-action-wrapper :is(.z-10) { - z-index: 10; -} - .call-to-action-wrapper :is(.m-0) { margin: 0px; } @@ -610,43 +555,10 @@ video { margin-right: auto; } -.call-to-action-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - -.call-to-action-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.call-to-action-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.call-to-action-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.call-to-action-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.call-to-action-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .call-to-action-wrapper :is(.block) { display: block; } -.call-to-action-wrapper :is(.flex) { - display: flex; -} - -.call-to-action-wrapper :is(.h-48) { - height: 12rem; -} - .call-to-action-wrapper :is(.w-full) { width: 100%; } @@ -663,10 +575,6 @@ video { flex-shrink: 0; } -.call-to-action-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .call-to-action-wrapper :is(.items-center) { align-items: center; } @@ -677,19 +585,10 @@ video { margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } -.call-to-action-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .call-to-action-wrapper :is(.rounded-full) { border-radius: 9999px; } -.call-to-action-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .call-to-action-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -700,24 +599,6 @@ video { background-color: rgb(64 0 165 / var(--tw-bg-opacity)); } -.call-to-action-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.call-to-action-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.call-to-action-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.call-to-action-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .call-to-action-wrapper :is(.p-0) { padding: 0px; } @@ -737,31 +618,10 @@ video { padding-bottom: 2rem; } -.call-to-action-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .call-to-action-wrapper :is(.pt-6) { padding-top: 1.5rem; } -.call-to-action-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.call-to-action-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.call-to-action-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.call-to-action-wrapper :is(.pt-4) { - padding-top: 1rem; -} - .call-to-action-wrapper :is(.text-2xl) { font-size: 1.5rem; line-height: 2rem; @@ -785,14 +645,6 @@ video { font-weight: 700; } -.call-to-action-wrapper :is(.font-bold) { - font-weight: 700; -} - -.call-to-action-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .call-to-action-wrapper :is(.tracking-tight) { letter-spacing: -0.025em; } @@ -811,31 +663,10 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.call-to-action-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .call-to-action-wrapper :is(.\!no-underline) { text-decoration-line: none !important; } -.call-to-action-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.call-to-action-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.call-to-action-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - @media (min-width: 640px) { .call-to-action-wrapper :is(.sm\:text-3xl) { font-size: 1.875rem; @@ -844,10 +675,6 @@ video { } @media (min-width: 768px) { - .call-to-action-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .call-to-action-wrapper :is(.md\:flex) { display: flex; } @@ -875,25 +702,9 @@ video { padding-top: 4rem; padding-bottom: 4rem; } - - .call-to-action-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } } @media (min-width: 1024px) { - .call-to-action-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .call-to-action-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .call-to-action-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .call-to-action-wrapper :is(.lg\:max-w-2xl) { max-width: 42rem; } @@ -902,68 +713,4 @@ video { padding-top: 2rem; padding-bottom: 2rem; } -} - -@media (min-width: 1280px) { - .call-to-action-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .call-to-action-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .call-to-action-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .call-to-action-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .call-to-action-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .call-to-action-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.call-to-action-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.call-to-action-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.call-to-action-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.call-to-action-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.call-to-action-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.call-to-action-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.call-to-action-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.call-to-action-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index 81abe1d47..c66618b6c 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -579,31 +579,10 @@ video { opacity: 1; } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.card-list-wrapper :is(.fixed) { - position: fixed; -} - .card-list-wrapper :is(.relative) { position: relative; } -.card-list-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.card-list-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.card-list-wrapper :is(.z-10) { - z-index: 10; -} - .card-list-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -618,11 +597,6 @@ video { margin-bottom: 0.5rem; } -.card-list-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .card-list-wrapper :is(.\!mb-4) { margin-bottom: 1rem !important; } @@ -655,22 +629,6 @@ video { margin-top: auto; } -.card-list-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.card-list-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.card-list-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.card-list-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .card-list-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; @@ -728,10 +686,6 @@ video { height: 100%; } -.card-list-wrapper :is(.h-48) { - height: 12rem; -} - .card-list-wrapper :is(.w-0) { width: 0px; } @@ -804,11 +758,6 @@ video { overflow: hidden; } -.card-list-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .card-list-wrapper :is(.\!break-words) { overflow-wrap: break-word !important; } @@ -825,10 +774,6 @@ video { border-radius: 0.5rem; } -.card-list-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .card-list-wrapper :is(.border) { border-width: 1px; } @@ -866,19 +811,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.card-list-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.card-list-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.card-list-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .card-list-wrapper :is(.\!px-6) { padding-left: 1.5rem !important; padding-right: 1.5rem !important; @@ -909,11 +841,6 @@ video { padding-bottom: 1.25rem; } -.card-list-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .card-list-wrapper :is(.pb-0) { padding-bottom: 0px; } @@ -934,14 +861,6 @@ video { padding-top: 1rem; } -.card-list-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.card-list-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .card-list-wrapper :is(.text-center) { text-align: center; } @@ -982,18 +901,10 @@ video { font-weight: 700; } -.card-list-wrapper :is(.font-bold) { - font-weight: 700; -} - .card-list-wrapper :is(.leading-5) { line-height: 1.25rem; } -.card-list-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .card-list-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; color: rgb(17 24 39 / var(--tw-text-opacity)) !important; @@ -1029,23 +940,12 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.card-list-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .card-list-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.card-list-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .card-list-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -1108,10 +1008,6 @@ video { margin-top: 3rem; } - .card-list-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .card-list-wrapper :is(.md\:flex) { display: flex; } @@ -1124,25 +1020,9 @@ video { padding-top: 0px; padding-bottom: 0px; } - - .card-list-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } } @media (min-width: 1024px) { - .card-list-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .card-list-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .card-list-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .card-list-wrapper :is(.lg\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -1150,68 +1030,4 @@ video { .card-list-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } -} - -@media (min-width: 1280px) { - .card-list-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .card-list-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .card-list-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .card-list-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .card-list-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .card-list-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.card-list-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.card-list-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.card-list-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.card-list-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.card-list-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.card-list-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.card-list-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.card-list-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 1a25229c0..25ebb4656 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -534,65 +534,10 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.cards-wrapper :is(.fixed) { - position: fixed; -} - .cards-wrapper :is(.relative) { position: relative; } -.cards-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.cards-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.cards-wrapper :is(.z-10) { - z-index: 10; -} - .cards-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -611,35 +556,10 @@ video { margin-bottom: 0.5rem; } -.cards-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .cards-wrapper :is(.mb-4) { margin-bottom: 1rem; } -.cards-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.cards-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.cards-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.cards-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.cards-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .cards-wrapper :is(.\!line-clamp-2) { overflow: hidden !important; display: -webkit-box !important; @@ -729,10 +649,6 @@ video { flex-direction: column; } -.cards-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .cards-wrapper :is(.justify-center) { justify-content: center; } @@ -750,11 +666,6 @@ video { overflow: hidden; } -.cards-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .cards-wrapper :is(.\!break-words) { overflow-wrap: break-word !important; } @@ -763,14 +674,6 @@ video { border-radius: 0.5rem; } -.cards-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.cards-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .cards-wrapper :is(.rounded-b) { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; @@ -804,24 +707,11 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.cards-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.cards-wrapper :is(.stroke-white) { - stroke: #fff; -} - .cards-wrapper :is(.\!object-contain) { -o-object-fit: contain !important; object-fit: contain !important; } -.cards-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .cards-wrapper :is(.p-0) { padding: 0px; } @@ -856,26 +746,6 @@ video { padding-top: 1.25rem; } -.cards-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.cards-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.cards-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.cards-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.cards-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .cards-wrapper :is(.\!text-2xl) { font-size: 1.5rem !important; line-height: 2rem !important; @@ -913,18 +783,10 @@ video { font-weight: 700; } -.cards-wrapper :is(.font-bold) { - font-weight: 700; -} - .cards-wrapper :is(.leading-5) { line-height: 1.25rem; } -.cards-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .cards-wrapper :is(.text-danahergray-900) { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); @@ -951,16 +813,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.cards-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.cards-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .cards-wrapper :is(.transition) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -985,29 +837,7 @@ video { } } -@media (min-width: 768px) { - .cards-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .cards-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - @media (min-width: 1024px) { - .cards-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .cards-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .cards-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .cards-wrapper :is(.lg\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -1015,68 +845,4 @@ video { .cards-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } -} - -@media (min-width: 1280px) { - .cards-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .cards-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .cards-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .cards-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .cards-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .cards-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.cards-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.cards-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.cards-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.cards-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.cards-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.cards-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.cards-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.cards-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index be80283d0..ed336f95e 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -534,40 +534,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - .bg-danaherpurple-50 { background-color: #EADEFF; } @@ -614,10 +580,6 @@ video { border-width: 0; } -.carousel-wrapper :is(.fixed) { - position: fixed; -} - .carousel-wrapper :is(.absolute) { position: absolute; } @@ -630,19 +592,10 @@ video { inset: 0px; } -.carousel-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - .carousel-wrapper :is(.bottom-0) { bottom: 0px; } -.carousel-wrapper :is(.top-\[83px\]) { - top: 83px; -} - .carousel-wrapper :is(.z-10) { z-index: 10; } @@ -656,11 +609,6 @@ video { margin-right: auto; } -.carousel-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .carousel-wrapper :is(.mt-10) { margin-top: 2.5rem; } @@ -669,26 +617,6 @@ video { margin-top: 1.5rem; } -.carousel-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.carousel-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.carousel-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.carousel-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.carousel-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .carousel-wrapper :is(.block) { display: block; } @@ -789,10 +717,6 @@ video { flex-direction: column; } -.carousel-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .carousel-wrapper :is(.items-center) { align-items: center; } @@ -843,11 +767,6 @@ video { scroll-behavior: smooth; } -.carousel-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .carousel-wrapper :is(.rounded-full) { border-radius: 9999px; } @@ -856,10 +775,6 @@ video { border-radius: 0.375rem; } -.carousel-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .carousel-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -875,14 +790,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.carousel-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.carousel-wrapper :is(.stroke-white) { - stroke: #fff; -} - .carousel-wrapper :is(.object-cover) { -o-object-fit: cover; object-fit: cover; @@ -913,31 +820,6 @@ video { padding-bottom: 2rem; } -.carousel-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.carousel-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.carousel-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.carousel-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.carousel-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.carousel-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .carousel-wrapper :is(.text-2xl) { font-size: 1.5rem; line-height: 2rem; @@ -986,23 +868,6 @@ video { color: rgb(117 35 255 / var(--tw-text-opacity)); } -.carousel-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.carousel-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.carousel-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .carousel-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -1044,10 +909,6 @@ video { bottom: 4rem; } - .carousel-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .carousel-wrapper :is(.md\:h-\[35rem\]) { height: 35rem; } @@ -1060,10 +921,6 @@ video { flex-direction: row; } - .carousel-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } - .carousel-wrapper :is(.md\:text-4xl) { font-size: 2.25rem; line-height: 2.5rem; @@ -1096,22 +953,10 @@ video { margin: auto; } - .carousel-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - .carousel-wrapper :is(.lg\:w-1\/2) { width: 50%; } - .carousel-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .carousel-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .carousel-wrapper :is(.lg\:px-8) { padding-left: 2rem; padding-right: 2rem; @@ -1128,69 +973,7 @@ video { } @media (min-width: 1280px) { - .carousel-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .carousel-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } - .carousel-wrapper :is(.xl\:pr-10) { padding-right: 2.5rem; } -} - -@media (min-width: 768px) { - .carousel-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .carousel-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .carousel-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .carousel-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.carousel-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.carousel-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.carousel-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.carousel-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.carousel-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.carousel-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.carousel-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.carousel-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/category-family/category-family.css b/blocks/category-family/category-family.css index 60b0b9679..c9306a220 100644 --- a/blocks/category-family/category-family.css +++ b/blocks/category-family/category-family.css @@ -568,18 +568,10 @@ video { } } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - .category-family-wrapper :is(.pointer-events-none) { pointer-events: none; } -.category-family-wrapper :is(.fixed) { - position: fixed; -} - .category-family-wrapper :is(.absolute) { position: absolute; } @@ -588,19 +580,10 @@ video { position: relative; } -.category-family-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - .category-family-wrapper :is(.left-0) { left: 0px; } -.category-family-wrapper :is(.top-\[83px\]) { - top: 83px; -} - .category-family-wrapper :is(.z-10) { z-index: 10; } @@ -626,11 +609,6 @@ video { margin-right: auto; } -.category-family-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .category-family-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -651,18 +629,6 @@ video { margin-top: 1.5rem; } -.category-family-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.category-family-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.category-family-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .category-family-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; @@ -847,10 +813,6 @@ video { flex-direction: column; } -.category-family-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .category-family-wrapper :is(.items-start) { align-items: flex-start; } @@ -928,11 +890,6 @@ video { white-space: nowrap; } -.category-family-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .category-family-wrapper :is(.\!break-words) { overflow-wrap: break-word !important; } @@ -1007,14 +964,6 @@ video { fill: currentColor !important; } -.category-family-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.category-family-wrapper :is(.stroke-white) { - stroke: #fff; -} - .category-family-wrapper :is(.object-cover) { -o-object-fit: cover; object-fit: cover; @@ -1076,11 +1025,6 @@ video { padding-bottom: 0.625rem; } -.category-family-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .category-family-wrapper :is(.pl-0) { padding-left: 0px; } @@ -1093,26 +1037,6 @@ video { padding-top: 2.5rem; } -.category-family-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.category-family-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.category-family-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.category-family-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.category-family-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .category-family-wrapper :is(.text-left) { text-align: left; } @@ -1141,11 +1065,6 @@ video { line-height: 1rem; } -.category-family-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .category-family-wrapper :is(.\!font-semibold) { font-weight: 700 !important; } @@ -1154,10 +1073,6 @@ video { font-weight: 700; } -.category-family-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .category-family-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; color: rgb(17 24 39 / var(--tw-text-opacity)) !important; @@ -1180,12 +1095,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.category-family-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .category-family-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -1214,10 +1123,6 @@ video { } @media (min-width: 768px) { - .category-family-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .category-family-wrapper :is(.md\:h-6) { height: 1.5rem; } @@ -1229,25 +1134,9 @@ video { .category-family-wrapper :is(.md\:flex-row) { flex-direction: row; } - - .category-family-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } } @media (min-width: 1024px) { - .category-family-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .category-family-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .category-family-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .category-family-wrapper :is(.lg\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -1261,16 +1150,6 @@ video { } } -@media (min-width: 1280px) { - .category-family-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .category-family-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - .category-family-wrapper :is(.\[\&\:not\(\:first-child\)\:even\]\:opacity-40:not(:first-child):even) { opacity: 0.4; } @@ -1285,58 +1164,4 @@ video { .category-family-wrapper :is(.\[\&\:not\(\:first-child\)\]\:opacity-40:not(:first-child)) { opacity: 0.4; -} - -@media (min-width: 768px) { - .category-family-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .category-family-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .category-family-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .category-family-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.category-family-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.category-family-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.category-family-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.category-family-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.category-family-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.category-family-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.category-family-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.category-family-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 2a99b3542..991c9f27b 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -601,31 +601,10 @@ video { background-color: #7523FF; } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.columns-wrapper :is(.fixed) { - position: fixed; -} - .columns-wrapper :is(.relative) { position: relative; } -.columns-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.columns-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.columns-wrapper :is(.z-10) { - z-index: 10; -} - .columns-wrapper :is(.order-1) { order: 1; } @@ -653,26 +632,6 @@ video { margin-top: 1.5rem; } -.columns-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.columns-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.columns-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.columns-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.columns-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .columns-wrapper :is(.\!block) { display: block !important; } @@ -681,10 +640,6 @@ video { display: block; } -.columns-wrapper :is(.flex) { - display: flex; -} - .columns-wrapper :is(.inline-flex) { display: inline-flex; } @@ -705,10 +660,6 @@ video { height: 100%; } -.columns-wrapper :is(.h-48) { - height: 12rem; -} - .columns-wrapper :is(.w-12) { width: 3rem; } @@ -737,10 +688,6 @@ video { grid-template-columns: repeat(1, minmax(0, 1fr)); } -.columns-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .columns-wrapper :is(.items-center) { align-items: center; } @@ -769,11 +716,6 @@ video { margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } -.columns-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .columns-wrapper :is(.rounded) { border-radius: 0.25rem; } @@ -786,10 +728,6 @@ video { border-radius: 0.375rem; } -.columns-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .columns-wrapper :is(.border) { border-width: 1px; } @@ -835,24 +773,6 @@ video { background-color: transparent; } -.columns-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.columns-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.columns-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.columns-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .columns-wrapper :is(.px-5) { padding-left: 1.25rem; padding-right: 1.25rem; @@ -894,22 +814,6 @@ video { padding-left: 2.5rem; } -.columns-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.columns-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.columns-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.columns-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .columns-wrapper :is(.align-text-top) { vertical-align: text-top; } @@ -953,10 +857,6 @@ video { line-height: 1.75rem; } -.columns-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .columns-wrapper :is(.\!text-white) { --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity)) !important; @@ -982,11 +882,6 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.columns-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .columns-wrapper :is(.\!no-underline) { text-decoration-line: none !important; } @@ -1001,18 +896,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.columns-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.columns-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .columns-wrapper :is(.brightness-0) { --tw-brightness: brightness(0); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -1023,10 +906,6 @@ video { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.columns-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .columns-wrapper :is(.transition-all) { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -1051,34 +930,12 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -@media (min-width: 768px) { - .columns-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .columns-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - @media (min-width: 1024px) { .columns-wrapper :is(.lg\:my-4) { margin-top: 1rem; margin-bottom: 1rem; } - .columns-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .columns-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .columns-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .columns-wrapper :is(.lg\:grid-cols-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -1086,68 +943,4 @@ video { .columns-wrapper :is(.lg\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } -} - -@media (min-width: 1280px) { - .columns-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .columns-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .columns-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .columns-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .columns-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .columns-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.columns-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.columns-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.columns-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.columns-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.columns-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.columns-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.columns-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.columns-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/download/download.css b/blocks/download/download.css index dfb2a25f6..a0c03787f 100644 --- a/blocks/download/download.css +++ b/blocks/download/download.css @@ -534,95 +534,10 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.download-wrapper :is(.fixed) { - position: fixed; -} - -.download-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.download-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.download-wrapper :is(.z-10) { - z-index: 10; -} - -.download-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.download-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .download-wrapper :is(.mb-3) { margin-bottom: 0.75rem; } -.download-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.download-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.download-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.download-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.download-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .download-wrapper :is(.block) { display: block; } @@ -639,10 +554,6 @@ video { height: 16rem; } -.download-wrapper :is(.h-48) { - height: 12rem; -} - .download-wrapper :is(.w-64) { width: 16rem; } @@ -659,10 +570,6 @@ video { flex-direction: column; } -.download-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .download-wrapper :is(.items-start) { align-items: flex-start; } @@ -698,11 +605,6 @@ video { border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } -.download-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .download-wrapper :is(.break-words) { overflow-wrap: break-word; } @@ -715,28 +617,11 @@ video { border-radius: 0.375rem; } -.download-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .download-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.download-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.download-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.download-wrapper :is(.stroke-white) { - stroke: #fff; -} - .download-wrapper :is(.object-cover) { -o-object-fit: cover; object-fit: cover; @@ -762,31 +647,6 @@ video { padding-bottom: 1rem; } -.download-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.download-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.download-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.download-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.download-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.download-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .download-wrapper :is(.font-sans) { font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } @@ -810,14 +670,6 @@ video { font-weight: 700; } -.download-wrapper :is(.font-bold) { - font-weight: 700; -} - -.download-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .download-wrapper :is(.tracking-tight) { letter-spacing: -0.025em; } @@ -840,31 +692,11 @@ video { text-decoration-line: none !important; } -.download-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.download-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.download-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - @media (min-width: 768px) { .download-wrapper :is(.md\:mb-0) { margin-bottom: 0px; } - .download-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .download-wrapper :is(.md\:h-36) { height: 9rem; } @@ -880,86 +712,4 @@ video { .download-wrapper :is(.md\:items-center) { align-items: center; } - - .download-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .download-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .download-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .download-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .download-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .download-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .download-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .download-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .download-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .download-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.download-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.download-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.download-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.download-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.download-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.download-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.download-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.download-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css index b134ebca6..9f4f30bba 100644 --- a/blocks/embed/embed.css +++ b/blocks/embed/embed.css @@ -534,48 +534,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.embed-wrapper :is(.fixed) { - position: fixed; -} - .embed-wrapper :is(.absolute) { position: absolute; } @@ -584,19 +542,6 @@ video { position: relative; } -.embed-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.embed-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.embed-wrapper :is(.z-10) { - z-index: 10; -} - .embed-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; @@ -607,31 +552,6 @@ video { margin-bottom: 2rem; } -.embed-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - -.embed-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.embed-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.embed-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.embed-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.embed-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .embed-wrapper :is(.block) { display: block; } @@ -640,39 +560,14 @@ video { display: flex; } -.embed-wrapper :is(.h-48) { - height: 12rem; -} - -.embed-wrapper :is(.w-full) { - width: 100%; -} - .embed-wrapper :is(.max-w-3xl) { max-width: 48rem; } -.embed-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .embed-wrapper :is(.justify-center) { justify-content: center; } -.embed-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.embed-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.embed-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .embed-wrapper :is(.border) { border-width: 1px; } @@ -682,171 +577,10 @@ video { background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.embed-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.embed-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.embed-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.embed-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - -.embed-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.embed-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.embed-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.embed-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.embed-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.embed-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .embed-wrapper :is(.text-center) { text-align: center; } -.embed-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - -.embed-wrapper :is(.font-bold) { - font-weight: 700; -} - -.embed-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - -.embed-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.embed-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.embed-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .embed-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -@media (min-width: 768px) { - .embed-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .embed-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .embed-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .embed-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .embed-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .embed-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .embed-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .embed-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .embed-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .embed-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .embed-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.embed-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.embed-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.embed-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.embed-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.embed-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.embed-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.embed-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.embed-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 09bbcf6b8..3cd0165a6 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -534,40 +534,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - .bg-danaherpurple-50 { background-color: #EADEFF; } @@ -589,10 +555,6 @@ video { background-color: #7523FF; } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - .footer-wrapper :is(.sr-only) { position: absolute; width: 1px; @@ -609,19 +571,10 @@ video { position: fixed; } -.footer-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - .footer-wrapper :is(.bottom-3) { bottom: 0.75rem; } -.footer-wrapper :is(.top-\[83px\]) { - top: 83px; -} - .footer-wrapper :is(.z-10) { z-index: 10; } @@ -640,11 +593,6 @@ video { margin-bottom: auto; } -.footer-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .footer-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -653,18 +601,6 @@ video { margin-top: 1rem; } -.footer-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.footer-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.footer-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .footer-wrapper :is(.block) { display: block; } @@ -690,10 +626,6 @@ video { height: max-content; } -.footer-wrapper :is(.h-48) { - height: 12rem; -} - .footer-wrapper :is(.w-5) { width: 1.25rem; } @@ -758,19 +690,10 @@ video { border-color: rgb(117 35 255 / var(--tw-divide-opacity)); } -.footer-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .footer-wrapper :is(.rounded-full) { border-radius: 9999px; } -.footer-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .footer-wrapper :is(.rounded-l-full) { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; @@ -796,28 +719,10 @@ video { background-color: rgb(234 222 255 / var(--tw-bg-opacity)); } -.footer-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - .footer-wrapper :is(.fill-transparent) { fill: transparent; } -.footer-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.footer-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.footer-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .footer-wrapper :is(.px-2) { padding-left: 0.5rem; padding-right: 0.5rem; @@ -873,26 +778,6 @@ video { padding-bottom: 2rem; } -.footer-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.footer-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.footer-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.footer-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.footer-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .footer-wrapper :is(.align-top) { vertical-align: top; } @@ -914,36 +799,11 @@ video { font-weight: 700; } -.footer-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .footer-wrapper :is(.text-white) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.footer-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.footer-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.footer-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.footer-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .footer-wrapper :is(.transition) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -978,10 +838,6 @@ video { } @media (min-width: 768px) { - .footer-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .footer-wrapper :is(.md\:block) { display: block; } @@ -1001,97 +857,17 @@ video { .footer-wrapper :is(.md\:flex-wrap) { flex-wrap: wrap; } - - .footer-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } } @media (min-width: 1024px) { - .footer-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .footer-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .footer-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .footer-wrapper :is(.lg\:px-8) { padding-left: 2rem; padding-right: 2rem; } } -@media (min-width: 1280px) { - .footer-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .footer-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - @media print { .footer-wrapper :is(.print\:hidden) { display: none; } -} - -@media (min-width: 768px) { - .footer-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .footer-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .footer-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .footer-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.footer-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.footer-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.footer-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.footer-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.footer-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.footer-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.footer-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.footer-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/header/header.css b/blocks/header/header.css index 21a54e299..d81a35912 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -534,44 +534,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - .header-wrapper :is(.fixed) { position: fixed; } @@ -613,10 +575,6 @@ video { top: 100%; } -.header-wrapper :is(.top-\[83px\]) { - top: 83px; -} - .header-wrapper :is(.z-10) { z-index: 10; } @@ -671,11 +629,6 @@ video { margin-bottom: auto; } -.header-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .header-wrapper :is(.-mr-px) { margin-right: -1px; } @@ -712,18 +665,6 @@ video { margin-top: 0.75rem; } -.header-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.header-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.header-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .header-wrapper :is(.line-clamp-2) { overflow: hidden; display: -webkit-box; @@ -795,10 +736,6 @@ video { height: 100vh; } -.header-wrapper :is(.h-48) { - height: 12rem; -} - .header-wrapper :is(.min-h-\[40px\]) { min-height: 40px; } @@ -964,11 +901,6 @@ video { overflow: hidden; } -.header-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .header-wrapper :is(.break-all) { word-break: break-all; } @@ -989,10 +921,6 @@ video { border-radius: 0.375rem; } -.header-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .header-wrapper :is(.border) { border-width: 1px; } @@ -1073,24 +1001,11 @@ video { fill: currentColor; } -.header-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.header-wrapper :is(.stroke-white) { - stroke: #fff; -} - .header-wrapper :is(.object-contain) { -o-object-fit: contain; object-fit: contain; } -.header-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .header-wrapper :is(.p-1) { padding: 0.25rem; } @@ -1154,22 +1069,6 @@ video { padding-top: 0px; } -.header-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.header-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.header-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.header-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .header-wrapper :is(.text-left) { text-align: left; } @@ -1215,10 +1114,6 @@ video { font-weight: 700; } -.header-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .header-wrapper :is(.tracking-wider) { letter-spacing: 0.05em; } @@ -1254,12 +1149,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.header-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .header-wrapper :is(.outline-none) { outline: 2px solid transparent; outline-offset: 2px; @@ -1421,10 +1310,6 @@ video { margin-right: 1rem; } - .header-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .header-wrapper :is(.md\:block) { display: block; } @@ -1453,10 +1338,6 @@ video { padding-top: 1rem; padding-bottom: 1rem; } - - .header-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } } @media (min-width: 1024px) { @@ -1465,10 +1346,6 @@ video { margin-bottom: 1rem; } - .header-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - .header-wrapper :is(.lg\:block) { display: block; } @@ -1493,14 +1370,6 @@ video { width: 11rem; } - .header-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .header-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .header-wrapper :is(.lg\:grid-rows-2) { grid-template-rows: repeat(2, minmax(0, 1fr)); } @@ -1537,16 +1406,6 @@ video { } } -@media (min-width: 1280px) { - .header-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .header-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - .header-wrapper :is(.\[\&\>a\]\:w-full>a) { width: 100%; } @@ -1560,30 +1419,6 @@ video { font-weight: 700; } -@media (min-width: 768px) { - .header-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .header-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .header-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .header-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.header-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - .header-wrapper :is(.\[\&_svg\>use\]\:stroke-black svg>use) { stroke: #000; } @@ -1610,34 +1445,4 @@ video { .header-wrapper :is(.\[\&_svg\]\:stroke-white svg) { stroke: #fff; -} - -.header-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.header-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.header-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.header-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.header-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.header-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.header-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 45cfad996..5a7f6595d 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -534,44 +534,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - .hero-wrapper :is(.fixed) { position: fixed; } @@ -588,11 +550,6 @@ video { inset: 0px; } -.hero-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - .hero-wrapper :is(.left-0) { left: 0px; } @@ -601,28 +558,15 @@ video { top: 0px; } -.hero-wrapper :is(.top-\[83px\]) { - top: 83px; -} - .hero-wrapper :is(.z-50) { z-index: 50; } -.hero-wrapper :is(.z-10) { - z-index: 10; -} - .hero-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; } -.hero-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .hero-wrapper :is(.mb-1) { margin-bottom: 0.25rem; } @@ -639,18 +583,6 @@ video { margin-top: 2rem; } -.hero-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.hero-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.hero-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .hero-wrapper :is(.block) { display: block; } @@ -671,10 +603,6 @@ video { height: 20rem; } -.hero-wrapper :is(.h-48) { - height: 12rem; -} - .hero-wrapper :is(.w-12) { width: 3rem; } @@ -703,10 +631,6 @@ video { flex-direction: column; } -.hero-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .hero-wrapper :is(.justify-center) { justify-content: center; } @@ -719,11 +643,6 @@ video { overflow: hidden; } -.hero-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .hero-wrapper :is(.rounded) { border-radius: 0.25rem; } @@ -736,14 +655,6 @@ video { border-radius: 0.75rem; } -.hero-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.hero-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .hero-wrapper :is(.border) { border-width: 1px; } @@ -766,19 +677,6 @@ video { background-color: transparent; } -.hero-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.hero-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.hero-wrapper :is(.stroke-white) { - stroke: #fff; -} - .hero-wrapper :is(.object-cover) { -o-object-fit: cover; object-fit: cover; @@ -796,35 +694,10 @@ video { padding: 1rem; } -.hero-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .hero-wrapper :is(.pb-\[56\.25\%\]) { padding-bottom: 56.25%; } -.hero-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.hero-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.hero-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.hero-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.hero-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .hero-wrapper :is(.text-2xl) { font-size: 1.5rem; line-height: 2rem; @@ -835,11 +708,6 @@ video { line-height: 1; } -.hero-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .hero-wrapper :is(.font-extrabold) { font-weight: 800; } @@ -852,18 +720,10 @@ video { font-weight: 700; } -.hero-wrapper :is(.font-bold) { - font-weight: 700; -} - .hero-wrapper :is(.leading-none) { line-height: 1; } -.hero-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .hero-wrapper :is(.tracking-wide) { letter-spacing: 0.025em; } @@ -883,27 +743,6 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.hero-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.hero-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.hero-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.hero-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .hero-wrapper :is(.backdrop-brightness-50) { --tw-backdrop-brightness: brightness(.5); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -934,10 +773,6 @@ video { margin-top: 4rem; } - .hero-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .hero-wrapper :is(.md\:h-full) { height: 100%; } @@ -950,10 +785,6 @@ video { padding-left: 2rem; padding-right: 2rem; } - - .hero-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } } @media (min-width: 1024px) { @@ -961,83 +792,7 @@ video { margin-bottom: 2rem; } - .hero-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .hero-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .hero-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .hero-wrapper :is(.lg\:text-\[11rem\]) { font-size: 11rem; } -} - -@media (min-width: 1280px) { - .hero-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .hero-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .hero-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .hero-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .hero-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .hero-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.hero-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.hero-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.hero-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.hero-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.hero-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.hero-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.hero-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.hero-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/logo-clouds/logo-clouds.css b/blocks/logo-clouds/logo-clouds.css index 8360238eb..0ffd77bc5 100644 --- a/blocks/logo-clouds/logo-clouds.css +++ b/blocks/logo-clouds/logo-clouds.css @@ -534,65 +534,10 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.logo-clouds-wrapper :is(.fixed) { - position: fixed; -} - .logo-clouds-wrapper :is(.relative) { position: relative; } -.logo-clouds-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.logo-clouds-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.logo-clouds-wrapper :is(.z-10) { - z-index: 10; -} - .logo-clouds-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -607,35 +552,10 @@ video { margin-bottom: 0.5rem; } -.logo-clouds-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .logo-clouds-wrapper :is(.mt-8) { margin-top: 2rem; } -.logo-clouds-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.logo-clouds-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.logo-clouds-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.logo-clouds-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.logo-clouds-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .logo-clouds-wrapper :is(.block) { display: block; } @@ -656,10 +576,6 @@ video { height: 100%; } -.logo-clouds-wrapper :is(.h-48) { - height: 12rem; -} - .logo-clouds-wrapper :is(.w-60) { width: 15rem; } @@ -684,10 +600,6 @@ video { grid-template-columns: repeat(2, minmax(0, 1fr)); } -.logo-clouds-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .logo-clouds-wrapper :is(.items-center) { align-items: center; } @@ -709,23 +621,10 @@ video { column-gap: 1.5rem; } -.logo-clouds-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .logo-clouds-wrapper :is(.rounded-xl) { border-radius: 0.75rem; } -.logo-clouds-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.logo-clouds-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .logo-clouds-wrapper :is(.border-2) { border-width: 2px; } @@ -749,19 +648,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.logo-clouds-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.logo-clouds-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.logo-clouds-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .logo-clouds-wrapper :is(.px-8) { padding-left: 2rem; padding-right: 2rem; @@ -772,31 +658,6 @@ video { padding-bottom: 2rem; } -.logo-clouds-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.logo-clouds-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.logo-clouds-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.logo-clouds-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.logo-clouds-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.logo-clouds-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .logo-clouds-wrapper :is(.text-3xl) { font-size: 1.875rem; line-height: 2.25rem; @@ -807,11 +668,6 @@ video { line-height: 1.75rem; } -.logo-clouds-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .logo-clouds-wrapper :is(.font-medium) { font-weight: 500; } @@ -820,35 +676,6 @@ video { font-weight: 700; } -.logo-clouds-wrapper :is(.font-bold) { - font-weight: 700; -} - -.logo-clouds-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - -.logo-clouds-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.logo-clouds-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.logo-clouds-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.logo-clouds-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .logo-clouds-wrapper :is(.transition) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -868,17 +695,9 @@ video { } @media (min-width: 768px) { - .logo-clouds-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .logo-clouds-wrapper :is(.md\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } - - .logo-clouds-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } } @media (min-width: 1024px) { @@ -890,14 +709,6 @@ video { display: grid; } - .logo-clouds-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .logo-clouds-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .logo-clouds-wrapper :is(.lg\:grid-cols-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -909,68 +720,4 @@ video { .logo-clouds-wrapper :is(.lg\:gap-8) { gap: 2rem; } -} - -@media (min-width: 1280px) { - .logo-clouds-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .logo-clouds-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .logo-clouds-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .logo-clouds-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .logo-clouds-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .logo-clouds-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.logo-clouds-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.logo-clouds-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.logo-clouds-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.logo-clouds-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.logo-clouds-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.logo-clouds-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.logo-clouds-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.logo-clouds-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/marketo-form/marketo-form.css b/blocks/marketo-form/marketo-form.css index efd8b27dc..eaebbd91c 100644 --- a/blocks/marketo-form/marketo-form.css +++ b/blocks/marketo-form/marketo-form.css @@ -534,61 +534,10 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.marketo-form-wrapper :is(.fixed) { - position: fixed; -} - .marketo-form-wrapper :is(.relative) { position: relative; } -.marketo-form-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.marketo-form-wrapper :is(.top-\[83px\]) { - top: 83px; -} - .marketo-form-wrapper :is(.z-0) { z-index: 0; } @@ -597,20 +546,11 @@ video { z-index: 9; } -.marketo-form-wrapper :is(.z-10) { - z-index: 10; -} - .marketo-form-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; } -.marketo-form-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .marketo-form-wrapper :is(.mb-0) { margin-bottom: 0px; } @@ -635,22 +575,6 @@ video { margin-top: 0px; } -.marketo-form-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.marketo-form-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.marketo-form-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.marketo-form-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .marketo-form-wrapper :is(.block) { display: block; } @@ -663,14 +587,6 @@ video { height: 20rem; } -.marketo-form-wrapper :is(.h-48) { - height: 12rem; -} - -.marketo-form-wrapper :is(.w-full) { - width: 100%; -} - .marketo-form-wrapper :is(.max-w-7xl) { max-width: 80rem; } @@ -679,10 +595,6 @@ video { flex-direction: column; } -.marketo-form-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .marketo-form-wrapper :is(.items-center) { align-items: center; } @@ -691,23 +603,10 @@ video { justify-content: center; } -.marketo-form-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .marketo-form-wrapper :is(.break-all) { word-break: break-all; } -.marketo-form-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.marketo-form-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .marketo-form-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -718,44 +617,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.marketo-form-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.marketo-form-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.marketo-form-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - -.marketo-form-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.marketo-form-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.marketo-form-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.marketo-form-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.marketo-form-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.marketo-form-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .marketo-form-wrapper :is(.text-3xl) { font-size: 1.875rem; line-height: 2.25rem; @@ -766,11 +627,6 @@ video { line-height: 1.75rem; } -.marketo-form-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .marketo-form-wrapper :is(.font-bold) { font-weight: 700; } @@ -779,20 +635,11 @@ video { font-weight: 200; } -.marketo-form-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .marketo-form-wrapper :is(.text-gray-700) { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } -.marketo-form-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .marketo-form-wrapper :is(.underline) { text-decoration-line: underline; } @@ -805,22 +652,6 @@ video { text-decoration-thickness: 3px; } -.marketo-form-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.marketo-form-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.marketo-form-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .marketo-form-wrapper :is(.transition) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -852,94 +683,8 @@ video { margin-bottom: 4rem; } - .marketo-form-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .marketo-form-wrapper :is(.md\:break-normal) { overflow-wrap: normal; word-break: normal; } - - .marketo-form-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .marketo-form-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .marketo-form-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .marketo-form-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .marketo-form-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .marketo-form-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .marketo-form-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .marketo-form-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .marketo-form-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .marketo-form-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.marketo-form-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.marketo-form-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.marketo-form-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.marketo-form-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.marketo-form-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.marketo-form-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.marketo-form-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.marketo-form-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/mini-teasers/mini-teasers.css b/blocks/mini-teasers/mini-teasers.css index f58e24da8..7dd16b9e4 100644 --- a/blocks/mini-teasers/mini-teasers.css +++ b/blocks/mini-teasers/mini-teasers.css @@ -534,61 +534,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.mini-teasers-wrapper :is(.fixed) { - position: fixed; -} - -.mini-teasers-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.mini-teasers-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.mini-teasers-wrapper :is(.z-10) { - z-index: 10; -} - .mini-teasers-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; @@ -604,11 +549,6 @@ video { margin-bottom: 1.5rem; } -.mini-teasers-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .mini-teasers-wrapper :is(.mb-0) { margin-bottom: 0px; } @@ -617,22 +557,6 @@ video { margin-top: 1rem; } -.mini-teasers-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.mini-teasers-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.mini-teasers-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.mini-teasers-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .mini-teasers-wrapper :is(.line-clamp-2) { overflow: hidden; display: -webkit-box; @@ -655,10 +579,6 @@ video { display: block; } -.mini-teasers-wrapper :is(.flex) { - display: flex; -} - .mini-teasers-wrapper :is(.grid) { display: grid; } @@ -675,10 +595,6 @@ video { height: 5.5rem; } -.mini-teasers-wrapper :is(.h-48) { - height: 12rem; -} - .mini-teasers-wrapper :is(.w-16) { width: 4rem; } @@ -695,10 +611,6 @@ video { grid-template-columns: repeat(1, minmax(0, 1fr)); } -.mini-teasers-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .mini-teasers-wrapper :is(.items-center) { align-items: center; } @@ -707,23 +619,10 @@ video { gap: 1.5rem; } -.mini-teasers-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .mini-teasers-wrapper :is(.break-words) { overflow-wrap: break-word; } -.mini-teasers-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.mini-teasers-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .mini-teasers-wrapper :is(.border-b) { border-bottom-width: 1px; } @@ -746,127 +645,36 @@ video { background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.mini-teasers-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.mini-teasers-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.mini-teasers-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.mini-teasers-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .mini-teasers-wrapper :is(.px-2) { padding-left: 0.5rem; padding-right: 0.5rem; } -.mini-teasers-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .mini-teasers-wrapper :is(.pt-4) { padding-top: 1rem; } -.mini-teasers-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.mini-teasers-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.mini-teasers-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.mini-teasers-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .mini-teasers-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; } -.mini-teasers-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .mini-teasers-wrapper :is(.font-bold) { font-weight: 700; } -.mini-teasers-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .mini-teasers-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)); } -.mini-teasers-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.mini-teasers-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.mini-teasers-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.mini-teasers-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - @media (min-width: 640px) { .mini-teasers-wrapper :is(.sm\:grid-cols-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } -@media (min-width: 768px) { - .mini-teasers-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .mini-teasers-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - @media (min-width: 1024px) { - .mini-teasers-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .mini-teasers-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .mini-teasers-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .mini-teasers-wrapper :is(.lg\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -874,68 +682,4 @@ video { .mini-teasers-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } -} - -@media (min-width: 1280px) { - .mini-teasers-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .mini-teasers-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .mini-teasers-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .mini-teasers-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .mini-teasers-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .mini-teasers-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.mini-teasers-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.mini-teasers-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.mini-teasers-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.mini-teasers-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.mini-teasers-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.mini-teasers-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.mini-teasers-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.mini-teasers-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/page-jump-menu/page-jump-menu.css b/blocks/page-jump-menu/page-jump-menu.css index 2a7457aa1..65e3dcb25 100644 --- a/blocks/page-jump-menu/page-jump-menu.css +++ b/blocks/page-jump-menu/page-jump-menu.css @@ -534,75 +534,14 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.page-jump-menu-wrapper :is(.fixed) { - position: fixed; -} - .page-jump-menu-wrapper :is(.relative) { position: relative; } -.page-jump-menu-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.page-jump-menu-wrapper :is(.top-\[83px\]) { - top: 83px; -} - .page-jump-menu-wrapper :is(.z-10) { z-index: 10; } -.page-jump-menu-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.page-jump-menu-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .page-jump-menu-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -611,18 +550,6 @@ video { margin-top: 1rem; } -.page-jump-menu-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.page-jump-menu-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.page-jump-menu-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .page-jump-menu-wrapper :is(.block) { display: block; } @@ -639,10 +566,6 @@ video { height: 2rem; } -.page-jump-menu-wrapper :is(.h-48) { - height: 12rem; -} - .page-jump-menu-wrapper :is(.w-48) { width: 12rem; } @@ -651,14 +574,6 @@ video { width: 2rem; } -.page-jump-menu-wrapper :is(.w-full) { - width: 100%; -} - -.page-jump-menu-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .page-jump-menu-wrapper :is(.gap-x-2) { -moz-column-gap: 0.5rem; column-gap: 0.5rem; @@ -668,19 +583,6 @@ video { overflow: hidden; } -.page-jump-menu-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.page-jump-menu-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.page-jump-menu-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .page-jump-menu-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -695,19 +597,10 @@ video { stroke: #7523FF; } -.page-jump-menu-wrapper :is(.stroke-white) { - stroke: #fff; -} - .page-jump-menu-wrapper :is(.stroke-1) { stroke-width: 1; } -.page-jump-menu-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .page-jump-menu-wrapper :is(.py-2) { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -721,36 +614,11 @@ video { padding-right: 0.5rem; } -.page-jump-menu-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.page-jump-menu-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.page-jump-menu-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.page-jump-menu-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.page-jump-menu-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .page-jump-menu-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; } -.page-jump-menu-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .page-jump-menu-wrapper :is(.font-bold) { font-weight: 700; } @@ -759,10 +627,6 @@ video { text-transform: capitalize; } -.page-jump-menu-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .page-jump-menu-wrapper :is(.tracking-wider) { letter-spacing: 0.05em; } @@ -772,23 +636,12 @@ video { color: rgb(51 51 51 / var(--tw-text-opacity)); } -.page-jump-menu-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .page-jump-menu-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.page-jump-menu-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .page-jump-menu-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -807,64 +660,6 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -@media (min-width: 768px) { - .page-jump-menu-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .page-jump-menu-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .page-jump-menu-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .page-jump-menu-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .page-jump-menu-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .page-jump-menu-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .page-jump-menu-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .page-jump-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .page-jump-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .page-jump-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.page-jump-menu-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - .page-jump-menu-wrapper :is(.\[\&_svg\]\:stroke-danaherpurple-500 svg) { stroke: #7523FF; } @@ -888,34 +683,4 @@ video { .page-jump-menu-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:stroke-white svg) { stroke: #fff; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.page-jump-menu-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/page-tabs/page-tabs.css b/blocks/page-tabs/page-tabs.css index 83cfdcb3b..72191b4cb 100644 --- a/blocks/page-tabs/page-tabs.css +++ b/blocks/page-tabs/page-tabs.css @@ -534,71 +534,10 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.page-tabs-wrapper :is(.fixed) { - position: fixed; -} - -.page-tabs-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.page-tabs-wrapper :is(.top-\[83px\]) { - top: 83px; -} - .page-tabs-wrapper :is(.z-10) { z-index: 10; } -.page-tabs-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.page-tabs-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .page-tabs-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -607,18 +546,6 @@ video { margin-top: 1rem; } -.page-tabs-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.page-tabs-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.page-tabs-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .page-tabs-wrapper :is(.block) { display: block; } @@ -635,10 +562,6 @@ video { height: 2rem; } -.page-tabs-wrapper :is(.h-48) { - height: 12rem; -} - .page-tabs-wrapper :is(.w-48) { width: 12rem; } @@ -647,14 +570,6 @@ video { width: 2rem; } -.page-tabs-wrapper :is(.w-full) { - width: 100%; -} - -.page-tabs-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .page-tabs-wrapper :is(.gap-x-2) { -moz-column-gap: 0.5rem; column-gap: 0.5rem; @@ -664,19 +579,6 @@ video { overflow: hidden; } -.page-tabs-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.page-tabs-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.page-tabs-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .page-tabs-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -691,19 +593,10 @@ video { stroke: #7523FF; } -.page-tabs-wrapper :is(.stroke-white) { - stroke: #fff; -} - .page-tabs-wrapper :is(.stroke-1) { stroke-width: 1; } -.page-tabs-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .page-tabs-wrapper :is(.py-2) { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -717,36 +610,11 @@ video { padding-right: 0.5rem; } -.page-tabs-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.page-tabs-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.page-tabs-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.page-tabs-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.page-tabs-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .page-tabs-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; } -.page-tabs-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .page-tabs-wrapper :is(.font-bold) { font-weight: 700; } @@ -755,10 +623,6 @@ video { text-transform: capitalize; } -.page-tabs-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .page-tabs-wrapper :is(.tracking-wider) { letter-spacing: 0.05em; } @@ -768,23 +632,12 @@ video { color: rgb(51 51 51 / var(--tw-text-opacity)); } -.page-tabs-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .page-tabs-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.page-tabs-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .page-tabs-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -803,64 +656,6 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -@media (min-width: 768px) { - .page-tabs-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .page-tabs-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .page-tabs-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .page-tabs-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .page-tabs-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .page-tabs-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .page-tabs-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .page-tabs-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .page-tabs-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .page-tabs-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .page-tabs-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.page-tabs-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - .page-tabs-wrapper :is(.\[\&_svg\]\:stroke-danaherpurple-500 svg) { stroke: #7523FF; } @@ -884,34 +679,4 @@ video { .page-tabs-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:stroke-white svg) { stroke: #fff; -} - -.page-tabs-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.page-tabs-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.page-tabs-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.page-tabs-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.page-tabs-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.page-tabs-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.page-tabs-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/popular-articles/popular-articles.css b/blocks/popular-articles/popular-articles.css index fee0b8503..fdf55a346 100644 --- a/blocks/popular-articles/popular-articles.css +++ b/blocks/popular-articles/popular-articles.css @@ -534,290 +534,7 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.popular-articles-wrapper :is(.fixed) { - position: fixed; -} - -.popular-articles-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.popular-articles-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.popular-articles-wrapper :is(.z-10) { - z-index: 10; -} - -.popular-articles-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.popular-articles-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - -.popular-articles-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.popular-articles-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.popular-articles-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.popular-articles-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.popular-articles-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - -.popular-articles-wrapper :is(.block) { - display: block; -} - -.popular-articles-wrapper :is(.flex) { - display: flex; -} - -.popular-articles-wrapper :is(.h-48) { - height: 12rem; -} - -.popular-articles-wrapper :is(.w-full) { - width: 100%; -} - -.popular-articles-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - -.popular-articles-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.popular-articles-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.popular-articles-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .popular-articles-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); -} - -.popular-articles-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.popular-articles-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.popular-articles-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.popular-articles-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - -.popular-articles-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.popular-articles-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.popular-articles-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.popular-articles-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.popular-articles-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.popular-articles-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - -.popular-articles-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - -.popular-articles-wrapper :is(.font-bold) { - font-weight: 700; -} - -.popular-articles-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - -.popular-articles-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.popular-articles-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.popular-articles-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.popular-articles-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -@media (min-width: 768px) { - .popular-articles-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .popular-articles-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .popular-articles-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .popular-articles-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .popular-articles-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .popular-articles-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .popular-articles-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .popular-articles-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .popular-articles-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .popular-articles-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .popular-articles-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.popular-articles-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.popular-articles-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.popular-articles-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.popular-articles-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.popular-articles-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.popular-articles-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.popular-articles-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.popular-articles-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-card/product-card.css b/blocks/product-card/product-card.css index 12c820ef0..304082b4b 100644 --- a/blocks/product-card/product-card.css +++ b/blocks/product-card/product-card.css @@ -568,31 +568,10 @@ video { } } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.product-card-wrapper :is(.fixed) { - position: fixed; -} - .product-card-wrapper :is(.relative) { position: relative; } -.product-card-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.product-card-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.product-card-wrapper :is(.z-10) { - z-index: 10; -} - .product-card-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -602,11 +581,6 @@ video { margin-right: auto; } -.product-card-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .product-card-wrapper :is(.mb-3) { margin-bottom: 0.75rem; } @@ -619,26 +593,6 @@ video { margin-top: 0.75rem; } -.product-card-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.product-card-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.product-card-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.product-card-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.product-card-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .product-card-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; @@ -677,10 +631,6 @@ video { height: 5rem !important; } -.product-card-wrapper :is(.h-48) { - height: 12rem; -} - .product-card-wrapper :is(.w-full) { width: 100%; } @@ -705,10 +655,6 @@ video { flex-direction: column; } -.product-card-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .product-card-wrapper :is(.items-center) { align-items: center; } @@ -735,11 +681,6 @@ video { overflow: hidden; } -.product-card-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .product-card-wrapper :is(.\!break-words) { overflow-wrap: break-word !important; } @@ -756,14 +697,6 @@ video { border-radius: 0.5rem; } -.product-card-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.product-card-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .product-card-wrapper :is(.border) { border-width: 1px; } @@ -787,19 +720,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.product-card-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.product-card-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.product-card-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .product-card-wrapper :is(.\!px-7) { padding-left: 1.75rem !important; padding-right: 1.75rem !important; @@ -825,35 +745,10 @@ video { padding-bottom: 1.25rem; } -.product-card-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .product-card-wrapper :is(.pt-8) { padding-top: 2rem; } -.product-card-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.product-card-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.product-card-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.product-card-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.product-card-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .product-card-wrapper :is(.\!text-lg) { font-size: 1.125rem !important; line-height: 1.75rem !important; @@ -864,23 +759,10 @@ video { line-height: 1.25rem; } -.product-card-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .product-card-wrapper :is(.\!font-semibold) { font-weight: 700 !important; } -.product-card-wrapper :is(.font-bold) { - font-weight: 700; -} - -.product-card-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .product-card-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; color: rgb(17 24 39 / var(--tw-text-opacity)) !important; @@ -897,16 +779,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.product-card-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-card-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .product-card-wrapper :is(.transition) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -936,94 +808,8 @@ video { } } -@media (min-width: 768px) { - .product-card-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .product-card-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - @media (min-width: 1024px) { - .product-card-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .product-card-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .product-card-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .product-card-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } -} - -@media (min-width: 1280px) { - .product-card-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .product-card-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .product-card-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .product-card-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .product-card-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .product-card-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.product-card-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.product-card-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.product-card-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.product-card-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.product-card-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.product-card-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.product-card-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.product-card-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-category-list/product-category-list.css b/blocks/product-category-list/product-category-list.css index b62a7909d..9f7626939 100644 --- a/blocks/product-category-list/product-category-list.css +++ b/blocks/product-category-list/product-category-list.css @@ -572,31 +572,10 @@ video { background-color: #EADEFF; } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.product-category-list-wrapper :is(.fixed) { - position: fixed; -} - .product-category-list-wrapper :is(.relative) { position: relative; } -.product-category-list-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.product-category-list-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.product-category-list-wrapper :is(.z-10) { - z-index: 10; -} - .product-category-list-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -611,11 +590,6 @@ video { margin-bottom: 0.5rem; } -.product-category-list-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .product-category-list-wrapper :is(.mb-2) { margin-bottom: 0.5rem; } @@ -636,22 +610,6 @@ video { margin-top: 0.75rem; } -.product-category-list-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.product-category-list-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.product-category-list-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.product-category-list-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .product-category-list-wrapper :is(.block) { display: block; } @@ -680,10 +638,6 @@ video { height: 13rem; } -.product-category-list-wrapper :is(.h-48) { - height: 12rem; -} - .product-category-list-wrapper :is(.w-48) { width: 12rem; } @@ -736,11 +690,6 @@ video { overflow: hidden; } -.product-category-list-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .product-category-list-wrapper :is(.break-words) { overflow-wrap: break-word; } @@ -749,10 +698,6 @@ video { border-radius: 9999px; } -.product-category-list-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .product-category-list-wrapper :is(.border-l) { border-left-width: 1px; } @@ -782,14 +727,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.product-category-list-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.product-category-list-wrapper :is(.stroke-white) { - stroke: #fff; -} - .product-category-list-wrapper :is(.object-cover) { -o-object-fit: cover; object-fit: cover; @@ -815,11 +752,6 @@ video { padding-bottom: 1rem; } -.product-category-list-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .product-category-list-wrapper :is(.\!pb-0) { padding-bottom: 0px !important; } @@ -836,26 +768,6 @@ video { padding-right: 2rem; } -.product-category-list-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.product-category-list-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.product-category-list-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.product-category-list-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.product-category-list-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .product-category-list-wrapper :is(.text-center) { text-align: center; } @@ -882,10 +794,6 @@ video { font-weight: 700; } -.product-category-list-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .product-category-list-wrapper :is(.text-danahergray-900) { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); @@ -901,23 +809,6 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.product-category-list-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.product-category-list-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-category-list-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .product-category-list-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -958,36 +849,16 @@ video { } @media (min-width: 768px) { - .product-category-list-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .product-category-list-wrapper :is(.md\:grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } - - .product-category-list-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } } @media (min-width: 1024px) { - .product-category-list-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - .product-category-list-wrapper :is(.lg\:w-44) { width: 11rem; } - .product-category-list-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .product-category-list-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .product-category-list-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } @@ -1003,69 +874,7 @@ video { } @media (min-width: 1280px) { - .product-category-list-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .product-category-list-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } - .product-category-list-wrapper :is(.xl\:grid-cols-6) { grid-template-columns: repeat(6, minmax(0, 1fr)); } -} - -@media (min-width: 768px) { - .product-category-list-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .product-category-list-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .product-category-list-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .product-category-list-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.product-category-list-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.product-category-list-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.product-category-list-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.product-category-list-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.product-category-list-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.product-category-list-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.product-category-list-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.product-category-list-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-category/product-category.css b/blocks/product-category/product-category.css index c12daedd3..12b1bda33 100644 --- a/blocks/product-category/product-category.css +++ b/blocks/product-category/product-category.css @@ -568,31 +568,10 @@ video { } } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.product-category-wrapper :is(.fixed) { - position: fixed; -} - .product-category-wrapper :is(.relative) { position: relative; } -.product-category-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.product-category-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.product-category-wrapper :is(.z-10) { - z-index: 10; -} - .product-category-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -602,11 +581,6 @@ video { margin-right: auto; } -.product-category-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .product-category-wrapper :is(.mb-3) { margin-bottom: 0.75rem; } @@ -619,26 +593,6 @@ video { margin-top: 0.75rem; } -.product-category-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.product-category-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.product-category-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.product-category-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.product-category-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .product-category-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; @@ -677,10 +631,6 @@ video { height: 5rem !important; } -.product-category-wrapper :is(.h-48) { - height: 12rem; -} - .product-category-wrapper :is(.w-full) { width: 100%; } @@ -705,10 +655,6 @@ video { flex-direction: column; } -.product-category-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .product-category-wrapper :is(.items-center) { align-items: center; } @@ -735,11 +681,6 @@ video { overflow: hidden; } -.product-category-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .product-category-wrapper :is(.\!break-words) { overflow-wrap: break-word !important; } @@ -756,14 +697,6 @@ video { border-radius: 0.5rem; } -.product-category-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.product-category-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .product-category-wrapper :is(.border) { border-width: 1px; } @@ -787,19 +720,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.product-category-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.product-category-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.product-category-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .product-category-wrapper :is(.\!px-7) { padding-left: 1.75rem !important; padding-right: 1.75rem !important; @@ -830,35 +750,10 @@ video { padding-bottom: 1.25rem; } -.product-category-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .product-category-wrapper :is(.\!pb-0) { padding-bottom: 0px !important; } -.product-category-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.product-category-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.product-category-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.product-category-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.product-category-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .product-category-wrapper :is(.\!text-lg) { font-size: 1.125rem !important; line-height: 1.75rem !important; @@ -869,23 +764,10 @@ video { line-height: 1.25rem; } -.product-category-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .product-category-wrapper :is(.\!font-semibold) { font-weight: 700 !important; } -.product-category-wrapper :is(.font-bold) { - font-weight: 700; -} - -.product-category-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .product-category-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; color: rgb(17 24 39 / var(--tw-text-opacity)) !important; @@ -902,12 +784,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.product-category-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .product-category-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -941,94 +817,8 @@ video { } } -@media (min-width: 768px) { - .product-category-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .product-category-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - @media (min-width: 1024px) { - .product-category-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .product-category-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .product-category-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .product-category-wrapper :is(.lg\:grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } -} - -@media (min-width: 1280px) { - .product-category-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .product-category-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .product-category-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .product-category-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .product-category-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .product-category-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.product-category-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.product-category-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.product-category-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.product-category-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.product-category-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.product-category-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.product-category-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.product-category-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-citations/product-citations.css b/blocks/product-citations/product-citations.css index ee12ea442..1c97d4786 100644 --- a/blocks/product-citations/product-citations.css +++ b/blocks/product-citations/product-citations.css @@ -534,75 +534,10 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.product-citations-wrapper :is(.fixed) { - position: fixed; -} - -.product-citations-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.product-citations-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.product-citations-wrapper :is(.z-10) { - z-index: 10; -} - .product-citations-wrapper :is(.float-none) { float: none; } -.product-citations-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.product-citations-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .product-citations-wrapper :is(.mb-0) { margin-bottom: 0px; } @@ -611,34 +546,10 @@ video { margin-left: 0px; } -.product-citations-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.product-citations-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.product-citations-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.product-citations-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.product-citations-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .product-citations-wrapper :is(.block) { display: block; } -.product-citations-wrapper :is(.flex) { - display: flex; -} - .product-citations-wrapper :is(.h-3) { height: 0.75rem; } @@ -655,71 +566,15 @@ video { width: 100%; } -.product-citations-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - -.product-citations-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.product-citations-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.product-citations-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .product-citations-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.product-citations-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.product-citations-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.product-citations-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.product-citations-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - -.product-citations-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .product-citations-wrapper :is(.pb-0) { padding-bottom: 0px; } -.product-citations-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.product-citations-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.product-citations-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.product-citations-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .product-citations-wrapper :is(.align-top) { vertical-align: top; } @@ -729,129 +584,7 @@ video { line-height: 1rem; } -.product-citations-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - -.product-citations-wrapper :is(.font-bold) { - font-weight: 700; -} - -.product-citations-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .product-citations-wrapper :is(.text-danaherblue-900) { --tw-text-opacity: 1; color: rgb(6 28 68 / var(--tw-text-opacity)); -} - -.product-citations-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.product-citations-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-citations-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-citations-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -@media (min-width: 768px) { - .product-citations-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .product-citations-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .product-citations-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .product-citations-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .product-citations-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .product-citations-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .product-citations-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .product-citations-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .product-citations-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .product-citations-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .product-citations-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.product-citations-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.product-citations-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.product-citations-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.product-citations-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.product-citations-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.product-citations-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.product-citations-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.product-citations-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-menu/product-menu.css b/blocks/product-menu/product-menu.css index fa226e012..faf14b45f 100644 --- a/blocks/product-menu/product-menu.css +++ b/blocks/product-menu/product-menu.css @@ -534,91 +534,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.product-menu-wrapper :is(.fixed) { - position: fixed; -} - -.product-menu-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.product-menu-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.product-menu-wrapper :is(.z-10) { - z-index: 10; -} - -.product-menu-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.product-menu-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - -.product-menu-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.product-menu-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.product-menu-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.product-menu-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.product-menu-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .product-menu-wrapper :is(.block) { display: block; } @@ -635,10 +550,6 @@ video { height: 5rem; } -.product-menu-wrapper :is(.h-48) { - height: 12rem; -} - .product-menu-wrapper :is(.\!w-full) { width: 100% !important; } @@ -669,10 +580,6 @@ video { flex-direction: column; } -.product-menu-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .product-menu-wrapper :is(.items-center) { align-items: center; } @@ -699,23 +606,10 @@ video { align-self: center; } -.product-menu-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .product-menu-wrapper :is(.rounded-md) { border-radius: 0.375rem; } -.product-menu-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.product-menu-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .product-menu-wrapper :is(.border-2) { border-width: 2px; } @@ -730,29 +624,11 @@ video { background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.product-menu-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.product-menu-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.product-menu-wrapper :is(.stroke-white) { - stroke: #fff; -} - .product-menu-wrapper :is(.object-contain) { -o-object-fit: contain; object-fit: contain; } -.product-menu-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .product-menu-wrapper :is(.object-center) { -o-object-position: center; object-position: center; @@ -767,80 +643,25 @@ video { padding-bottom: 1rem; } -.product-menu-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.product-menu-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.product-menu-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.product-menu-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.product-menu-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.product-menu-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .product-menu-wrapper :is(.text-lg) { font-size: 1.125rem; line-height: 1.75rem; } -.product-menu-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .product-menu-wrapper :is(.font-semibold) { font-weight: 700; } -.product-menu-wrapper :is(.font-bold) { - font-weight: 700; -} - .product-menu-wrapper :is(.leading-6) { line-height: 1.5rem; } -.product-menu-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .product-menu-wrapper :is(.shadow-md) { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.product-menu-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-menu-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-menu-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .product-menu-wrapper :is(.duration-300) { transition-duration: 300ms; } @@ -857,10 +678,6 @@ video { } @media (min-width: 768px) { - .product-menu-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .product-menu-wrapper :is(.md\:w-1\/3) { width: 33.333333%; } @@ -868,90 +685,10 @@ video { .product-menu-wrapper :is(.md\:flex-row) { flex-direction: row; } - - .product-menu-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } } @media (min-width: 1024px) { - .product-menu-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .product-menu-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .product-menu-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .product-menu-wrapper :is(.lg\:flex-shrink-0) { flex-shrink: 0; } -} - -@media (min-width: 1280px) { - .product-menu-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .product-menu-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .product-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .product-menu-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .product-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .product-menu-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.product-menu-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.product-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.product-menu-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.product-menu-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.product-menu-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.product-menu-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.product-menu-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.product-menu-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-overview/product-overview.css b/blocks/product-overview/product-overview.css index c49014ca8..591dcadd3 100644 --- a/blocks/product-overview/product-overview.css +++ b/blocks/product-overview/product-overview.css @@ -534,40 +534,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - .href-text a { position: relative; z-index: 0; @@ -589,122 +555,19 @@ video { background-color: #7523FF; } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.product-overview-wrapper :is(.fixed) { - position: fixed; -} - -.product-overview-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.product-overview-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.product-overview-wrapper :is(.z-10) { - z-index: 10; -} - -.product-overview-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.product-overview-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - -.product-overview-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.product-overview-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.product-overview-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.product-overview-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.product-overview-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .product-overview-wrapper :is(.block) { display: block; } -.product-overview-wrapper :is(.flex) { - display: flex; -} - -.product-overview-wrapper :is(.h-48) { - height: 12rem; -} - -.product-overview-wrapper :is(.w-full) { - width: 100%; -} - .product-overview-wrapper :is(.list-disc) { list-style-type: disc; } -.product-overview-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - -.product-overview-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.product-overview-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.product-overview-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .product-overview-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.product-overview-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.product-overview-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.product-overview-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.product-overview-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - -.product-overview-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .product-overview-wrapper :is(.pl-12) { padding-left: 3rem; } @@ -717,158 +580,22 @@ video { padding-top: 0.625rem; } -.product-overview-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.product-overview-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.product-overview-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.product-overview-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.product-overview-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .product-overview-wrapper :is(.text-lg) { font-size: 1.125rem; line-height: 1.75rem; } -.product-overview-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - -.product-overview-wrapper :is(.font-bold) { - font-weight: 700; -} - .product-overview-wrapper :is(.leading-7) { line-height: 1.75rem; } -.product-overview-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .product-overview-wrapper :is(.text-danahergray-700) { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } -.product-overview-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.product-overview-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-overview-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-overview-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -@media (min-width: 768px) { - .product-overview-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .product-overview-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .product-overview-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .product-overview-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .product-overview-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - @media (min-width: 1280px) { .product-overview-wrapper :is(.xl\:w-3\/4) { width: 75%; } - - .product-overview-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } -} - -@media (min-width: 768px) { - .product-overview-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .product-overview-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .product-overview-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .product-overview-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.product-overview-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.product-overview-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.product-overview-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.product-overview-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.product-overview-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.product-overview-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.product-overview-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.product-overview-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-parts/product-parts.css b/blocks/product-parts/product-parts.css index 3d8993afe..2b27a59dc 100644 --- a/blocks/product-parts/product-parts.css +++ b/blocks/product-parts/product-parts.css @@ -534,61 +534,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.product-parts-wrapper :is(.fixed) { - position: fixed; -} - -.product-parts-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.product-parts-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.product-parts-wrapper :is(.z-10) { - z-index: 10; -} - .product-parts-wrapper :is(.col-span-2) { grid-column: span 2 / span 2; } @@ -601,36 +546,6 @@ video { grid-column: span 8 / span 8; } -.product-parts-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.product-parts-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - -.product-parts-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.product-parts-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.product-parts-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.product-parts-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.product-parts-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .product-parts-wrapper :is(.block) { display: block; } @@ -651,18 +566,10 @@ video { height: 4rem; } -.product-parts-wrapper :is(.h-48) { - height: 12rem; -} - .product-parts-wrapper :is(.w-16) { width: 4rem; } -.product-parts-wrapper :is(.w-full) { - width: 100%; -} - .product-parts-wrapper :is(.grid-cols-12) { grid-template-columns: repeat(12, minmax(0, 1fr)); } @@ -675,10 +582,6 @@ video { flex-direction: column; } -.product-parts-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .product-parts-wrapper :is(.\!content-center) { align-content: center !important; } @@ -695,23 +598,10 @@ video { row-gap: 1rem; } -.product-parts-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .product-parts-wrapper :is(.rounded-md) { border-radius: 0.375rem; } -.product-parts-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.product-parts-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .product-parts-wrapper :is(.border-b) { border-bottom-width: 1px; } @@ -721,29 +611,6 @@ video { background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.product-parts-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.product-parts-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.product-parts-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.product-parts-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - -.product-parts-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .product-parts-wrapper :is(.pb-2) { padding-bottom: 0.5rem; } @@ -760,18 +627,6 @@ video { padding-top: 1rem; } -.product-parts-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.product-parts-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.product-parts-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .product-parts-wrapper :is(.text-base) { font-size: 1rem; line-height: 1.5rem; @@ -800,43 +655,20 @@ video { color: rgb(0 0 0 / var(--tw-text-opacity)); } -.product-parts-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .product-parts-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.product-parts-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-parts-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - @media (min-width: 768px) { .product-parts-wrapper :is(.md\:col-span-2) { grid-column: span 2 / span 2; } - .product-parts-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .product-parts-wrapper :is(.md\:flex) { display: flex; } - - .product-parts-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } } @media (min-width: 1024px) { @@ -847,80 +679,4 @@ video { .product-parts-wrapper :is(.lg\:col-span-10) { grid-column: span 10 / span 10; } - - .product-parts-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .product-parts-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .product-parts-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .product-parts-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .product-parts-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .product-parts-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .product-parts-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .product-parts-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .product-parts-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.product-parts-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.product-parts-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.product-parts-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.product-parts-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.product-parts-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.product-parts-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.product-parts-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.product-parts-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-recommendations/product-recommendations.css b/blocks/product-recommendations/product-recommendations.css index 3b560ccf1..3af4cd1b2 100644 --- a/blocks/product-recommendations/product-recommendations.css +++ b/blocks/product-recommendations/product-recommendations.css @@ -572,27 +572,10 @@ video { scrollbar-width: none; } -.product-recommendations-wrapper :is(.fixed) { - position: fixed; -} - .product-recommendations-wrapper :is(.relative) { position: relative; } -.product-recommendations-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.product-recommendations-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.product-recommendations-wrapper :is(.z-10) { - z-index: 10; -} - .product-recommendations-wrapper :is(.col-span-1) { grid-column: span 1 / span 1; } @@ -602,11 +585,6 @@ video { margin-right: auto; } -.product-recommendations-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .product-recommendations-wrapper :is(.mb-3) { margin-bottom: 0.75rem; } @@ -623,26 +601,6 @@ video { margin-top: 0.75rem; } -.product-recommendations-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.product-recommendations-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.product-recommendations-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.product-recommendations-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.product-recommendations-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .product-recommendations-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; @@ -685,10 +643,6 @@ video { height: 5rem !important; } -.product-recommendations-wrapper :is(.h-48) { - height: 12rem; -} - .product-recommendations-wrapper :is(.w-full) { width: 100%; } @@ -729,10 +683,6 @@ video { flex-direction: column; } -.product-recommendations-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .product-recommendations-wrapper :is(.items-center) { align-items: center; } @@ -788,11 +738,6 @@ video { scroll-behavior: smooth; } -.product-recommendations-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .product-recommendations-wrapper :is(.\!break-words) { overflow-wrap: break-word !important; } @@ -813,14 +758,6 @@ video { border-radius: 0.375rem; } -.product-recommendations-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.product-recommendations-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .product-recommendations-wrapper :is(.border) { border-width: 1px; } @@ -844,19 +781,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.product-recommendations-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.product-recommendations-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.product-recommendations-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .product-recommendations-wrapper :is(.\!px-7) { padding-left: 1.75rem !important; padding-right: 1.75rem !important; @@ -882,11 +806,6 @@ video { padding-bottom: 1.25rem; } -.product-recommendations-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .product-recommendations-wrapper :is(.pb-2) { padding-bottom: 0.5rem; } @@ -895,26 +814,6 @@ video { padding-top: 2rem; } -.product-recommendations-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.product-recommendations-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.product-recommendations-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.product-recommendations-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.product-recommendations-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .product-recommendations-wrapper :is(.\!text-lg) { font-size: 1.125rem !important; line-height: 1.75rem !important; @@ -938,10 +837,6 @@ video { font-weight: 700; } -.product-recommendations-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .product-recommendations-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; color: rgb(17 24 39 / var(--tw-text-opacity)) !important; @@ -963,16 +858,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.product-recommendations-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-recommendations-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .product-recommendations-wrapper :is(.transition) { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -1003,32 +888,12 @@ video { } @media (min-width: 768px) { - .product-recommendations-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .product-recommendations-wrapper :is(.md\:auto-cols-\[calc\(100\%\/2\)\]) { grid-auto-columns: calc(100% / 2); } - - .product-recommendations-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } } @media (min-width: 1024px) { - .product-recommendations-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .product-recommendations-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .product-recommendations-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .product-recommendations-wrapper :is(.lg\:auto-cols-\[calc\(\(100\%\/3\)-20px\)\]) { grid-auto-columns: calc((100% / 3) - 20px); } @@ -1039,69 +904,7 @@ video { } @media (min-width: 1280px) { - .product-recommendations-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .product-recommendations-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } - .product-recommendations-wrapper :is(.xl\:auto-cols-\[calc\(\(100\%\/4\)-20px\)\]) { grid-auto-columns: calc((100% / 4) - 20px); } -} - -@media (min-width: 768px) { - .product-recommendations-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .product-recommendations-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .product-recommendations-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .product-recommendations-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.product-recommendations-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.product-recommendations-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.product-recommendations-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.product-recommendations-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.product-recommendations-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.product-recommendations-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.product-recommendations-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.product-recommendations-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/product-specifications/product-specifications.css b/blocks/product-specifications/product-specifications.css index 01927d1cd..9422907cc 100644 --- a/blocks/product-specifications/product-specifications.css +++ b/blocks/product-specifications/product-specifications.css @@ -534,100 +534,15 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.product-specifications-wrapper :is(.fixed) { - position: fixed; -} - -.product-specifications-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.product-specifications-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.product-specifications-wrapper :is(.z-10) { - z-index: 10; -} - .product-specifications-wrapper :is(.my-auto) { margin-top: auto; margin-bottom: auto; } -.product-specifications-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.product-specifications-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .product-specifications-wrapper :is(.mt-2) { margin-top: 0.5rem; } -.product-specifications-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.product-specifications-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.product-specifications-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.product-specifications-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.product-specifications-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .product-specifications-wrapper :is(.block) { display: block; } @@ -640,10 +555,6 @@ video { height: 100%; } -.product-specifications-wrapper :is(.h-48) { - height: 12rem; -} - .product-specifications-wrapper :is(.w-full) { width: 100%; } @@ -671,11 +582,6 @@ video { border-color: rgb(209 213 219 / var(--tw-divide-opacity)); } -.product-specifications-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .product-specifications-wrapper :is(.break-words) { overflow-wrap: break-word; } @@ -684,14 +590,6 @@ video { border-radius: 0.5rem; } -.product-specifications-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.product-specifications-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .product-specifications-wrapper :is(.border) { border-width: 1px; } @@ -706,24 +604,6 @@ video { background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } -.product-specifications-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.product-specifications-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.product-specifications-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.product-specifications-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .product-specifications-wrapper :is(.p-4) { padding: 1rem; } @@ -733,35 +613,10 @@ video { padding-right: 0.25rem; } -.product-specifications-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .product-specifications-wrapper :is(.pt-12) { padding-top: 3rem; } -.product-specifications-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.product-specifications-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.product-specifications-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.product-specifications-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.product-specifications-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .product-specifications-wrapper :is(.align-middle) { vertical-align: middle; } @@ -776,11 +631,6 @@ video { line-height: 1.75rem; } -.product-specifications-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .product-specifications-wrapper :is(.font-medium) { font-weight: 500; } @@ -789,10 +639,6 @@ video { font-weight: 200; } -.product-specifications-wrapper :is(.font-bold) { - font-weight: 700; -} - .product-specifications-wrapper :is(.leading-6) { line-height: 1.5rem; } @@ -812,22 +658,6 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } -.product-specifications-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-specifications-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.product-specifications-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - @media (min-width: 640px) { .product-specifications-wrapper :is(.sm\:flex) { display: flex; @@ -843,10 +673,6 @@ video { } @media (min-width: 768px) { - .product-specifications-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - .product-specifications-wrapper :is(.md\:w-1\/4) { width: 25%; } @@ -854,86 +680,4 @@ video { .product-specifications-wrapper :is(.md\:w-2\/4) { width: 50%; } - - .product-specifications-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .product-specifications-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .product-specifications-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .product-specifications-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .product-specifications-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .product-specifications-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .product-specifications-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .product-specifications-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .product-specifications-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .product-specifications-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.product-specifications-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.product-specifications-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.product-specifications-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.product-specifications-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.product-specifications-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.product-specifications-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.product-specifications-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.product-specifications-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/recent-articles/recent-articles.css b/blocks/recent-articles/recent-articles.css index 0049c054f..23969df4f 100644 --- a/blocks/recent-articles/recent-articles.css +++ b/blocks/recent-articles/recent-articles.css @@ -534,71 +534,11 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.recent-articles-wrapper :is(.fixed) { - position: fixed; -} - -.recent-articles-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.recent-articles-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.recent-articles-wrapper :is(.z-10) { - z-index: 10; -} - .recent-articles-wrapper :is(.my-0) { margin-top: 0px; margin-bottom: 0px; } -.recent-articles-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - .recent-articles-wrapper :is(.mb-0) { margin-bottom: 0px; } @@ -615,26 +555,6 @@ video { margin-top: 0.5rem; } -.recent-articles-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.recent-articles-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.recent-articles-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.recent-articles-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.recent-articles-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .recent-articles-wrapper :is(.block) { display: block; } @@ -647,26 +567,14 @@ video { height: 1rem; } -.recent-articles-wrapper :is(.h-48) { - height: 12rem; -} - .recent-articles-wrapper :is(.w-4) { width: 1rem; } -.recent-articles-wrapper :is(.w-full) { - width: 100%; -} - .recent-articles-wrapper :is(.flex-shrink-0) { flex-shrink: 0; } -.recent-articles-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .recent-articles-wrapper :is(.items-center) { align-items: center; } @@ -681,23 +589,10 @@ video { border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } -.recent-articles-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - .recent-articles-wrapper :is(.rounded) { border-radius: 0.25rem; } -.recent-articles-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.recent-articles-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .recent-articles-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); @@ -708,24 +603,6 @@ video { background-color: rgb(245 239 255 / var(--tw-bg-opacity)); } -.recent-articles-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.recent-articles-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.recent-articles-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.recent-articles-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .recent-articles-wrapper :is(.p-1) { padding: 0.25rem; } @@ -744,11 +621,6 @@ video { padding-right: 1rem; } -.recent-articles-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .recent-articles-wrapper :is(.pb-0) { padding-bottom: 0px; } @@ -769,18 +641,6 @@ video { padding-top: 0.5rem; } -.recent-articles-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.recent-articles-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.recent-articles-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .recent-articles-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem; @@ -796,11 +656,6 @@ video { line-height: 1rem; } -.recent-articles-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .recent-articles-wrapper :is(.\!font-normal) { font-weight: 200 !important; } @@ -829,10 +684,6 @@ video { line-height: 1.75rem; } -.recent-articles-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .recent-articles-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)); @@ -843,18 +694,6 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } -.recent-articles-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.recent-articles-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .recent-articles-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -882,92 +721,4 @@ video { .recent-articles-wrapper :is(.hover\:font-bold:hover) { font-weight: 700; -} - -@media (min-width: 768px) { - .recent-articles-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .recent-articles-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .recent-articles-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .recent-articles-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .recent-articles-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .recent-articles-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .recent-articles-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .recent-articles-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .recent-articles-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .recent-articles-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .recent-articles-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.recent-articles-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.recent-articles-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.recent-articles-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.recent-articles-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.recent-articles-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.recent-articles-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.recent-articles-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.recent-articles-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/related-articles/related-articles.css b/blocks/related-articles/related-articles.css index 4d7706fdd..940d75ffa 100644 --- a/blocks/related-articles/related-articles.css +++ b/blocks/related-articles/related-articles.css @@ -568,37 +568,11 @@ video { } } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.related-articles-wrapper :is(.fixed) { - position: fixed; -} - -.related-articles-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.related-articles-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.related-articles-wrapper :is(.z-10) { - z-index: 10; -} - .related-articles-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; } -.related-articles-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .related-articles-wrapper :is(.mb-3) { margin-bottom: 0.75rem; } @@ -607,42 +581,14 @@ video { margin-top: 0.75rem; } -.related-articles-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.related-articles-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.related-articles-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.related-articles-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.related-articles-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .related-articles-wrapper :is(.block) { display: block; } -.related-articles-wrapper :is(.flex) { - display: flex; -} - .related-articles-wrapper :is(.grid) { display: grid; } -.related-articles-wrapper :is(.h-48) { - height: 12rem; -} - .related-articles-wrapper :is(.w-full) { width: 100%; } @@ -655,10 +601,6 @@ video { grid-template-columns: repeat(1, minmax(0, 1fr)); } -.related-articles-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .related-articles-wrapper :is(.justify-items-center) { justify-items: center; } @@ -667,111 +609,25 @@ video { gap: 1.5rem; } -.related-articles-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.related-articles-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.related-articles-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .related-articles-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.related-articles-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.related-articles-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.related-articles-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.related-articles-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .related-articles-wrapper :is(.px-3) { padding-left: 0.75rem; padding-right: 0.75rem; } -.related-articles-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.related-articles-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.related-articles-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.related-articles-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.related-articles-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.related-articles-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .related-articles-wrapper :is(.text-lg) { font-size: 1.125rem; line-height: 1.75rem; } -.related-articles-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .related-articles-wrapper :is(.font-semibold) { font-weight: 700; } -.related-articles-wrapper :is(.font-bold) { - font-weight: 700; -} - -.related-articles-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - -.related-articles-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.related-articles-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.related-articles-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .related-articles-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -787,94 +643,8 @@ video { } } -@media (min-width: 768px) { - .related-articles-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .related-articles-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - @media (min-width: 1024px) { - .related-articles-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .related-articles-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .related-articles-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .related-articles-wrapper :is(.lg\:grid-cols-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } -} - -@media (min-width: 1280px) { - .related-articles-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .related-articles-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .related-articles-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .related-articles-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .related-articles-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .related-articles-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.related-articles-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.related-articles-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.related-articles-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.related-articles-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.related-articles-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.related-articles-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.related-articles-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.related-articles-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/side-nav/side-nav.css b/blocks/side-nav/side-nav.css index 2408a37d7..ebefdb0ca 100644 --- a/blocks/side-nav/side-nav.css +++ b/blocks/side-nav/side-nav.css @@ -534,95 +534,10 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - .bg-danaherpurple-50 { background-color: #EADEFF; } -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.side-nav-wrapper :is(.fixed) { - position: fixed; -} - -.side-nav-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.side-nav-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.side-nav-wrapper :is(.z-10) { - z-index: 10; -} - -.side-nav-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.side-nav-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - -.side-nav-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.side-nav-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.side-nav-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.side-nav-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.side-nav-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .side-nav-wrapper :is(.block) { display: block; } @@ -635,10 +550,6 @@ video { display: none; } -.side-nav-wrapper :is(.h-48) { - height: 12rem; -} - .side-nav-wrapper :is(.w-full) { width: 100%; } @@ -647,10 +558,6 @@ video { flex-direction: column; } -.side-nav-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .side-nav-wrapper :is(.items-start) { align-items: flex-start; } @@ -659,19 +566,6 @@ video { gap: 0.75rem; } -.side-nav-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.side-nav-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.side-nav-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .side-nav-wrapper :is(.border-b) { border-bottom-width: 1px; } @@ -691,24 +585,6 @@ video { background-color: rgb(234 222 255 / var(--tw-bg-opacity)); } -.side-nav-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.side-nav-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.side-nav-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.side-nav-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .side-nav-wrapper :is(.p-2) { padding: 0.5rem; } @@ -723,11 +599,6 @@ video { padding-bottom: 1rem; } -.side-nav-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .side-nav-wrapper :is(.pt-20) { padding-top: 5rem; } @@ -736,22 +607,6 @@ video { padding-top: 1.5rem; } -.side-nav-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.side-nav-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.side-nav-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.side-nav-wrapper :is(.pt-4) { - padding-top: 1rem; -} - .side-nav-wrapper :is(.text-base) { font-size: 1rem; line-height: 1.5rem; @@ -766,27 +621,6 @@ video { font-weight: 700; } -.side-nav-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - -.side-nav-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.side-nav-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.side-nav-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .side-nav-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -805,94 +639,8 @@ video { background-color: rgb(234 222 255 / var(--tw-bg-opacity)); } -@media (min-width: 768px) { - .side-nav-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .side-nav-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - @media (min-width: 1024px) { - .side-nav-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - .side-nav-wrapper :is(.lg\:block) { display: block; } - - .side-nav-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .side-nav-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .side-nav-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .side-nav-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .side-nav-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .side-nav-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .side-nav-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .side-nav-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.side-nav-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.side-nav-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.side-nav-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.side-nav-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.side-nav-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.side-nav-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.side-nav-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.side-nav-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/social-feeds/social-feeds.css b/blocks/social-feeds/social-feeds.css index d59dc4704..1f2239f3a 100644 --- a/blocks/social-feeds/social-feeds.css +++ b/blocks/social-feeds/social-feeds.css @@ -534,290 +534,7 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.social-feeds-wrapper :is(.fixed) { - position: fixed; -} - -.social-feeds-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.social-feeds-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.social-feeds-wrapper :is(.z-10) { - z-index: 10; -} - -.social-feeds-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.social-feeds-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - -.social-feeds-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.social-feeds-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.social-feeds-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.social-feeds-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.social-feeds-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - -.social-feeds-wrapper :is(.block) { - display: block; -} - -.social-feeds-wrapper :is(.flex) { - display: flex; -} - -.social-feeds-wrapper :is(.h-48) { - height: 12rem; -} - -.social-feeds-wrapper :is(.w-full) { - width: 100%; -} - -.social-feeds-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - -.social-feeds-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.social-feeds-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.social-feeds-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .social-feeds-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); -} - -.social-feeds-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.social-feeds-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.social-feeds-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.social-feeds-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - -.social-feeds-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.social-feeds-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.social-feeds-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.social-feeds-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.social-feeds-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.social-feeds-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - -.social-feeds-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - -.social-feeds-wrapper :is(.font-bold) { - font-weight: 700; -} - -.social-feeds-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - -.social-feeds-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.social-feeds-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.social-feeds-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.social-feeds-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -@media (min-width: 768px) { - .social-feeds-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .social-feeds-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .social-feeds-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .social-feeds-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .social-feeds-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .social-feeds-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .social-feeds-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .social-feeds-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .social-feeds-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .social-feeds-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .social-feeds-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.social-feeds-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.social-feeds-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.social-feeds-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.social-feeds-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.social-feeds-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.social-feeds-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.social-feeds-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.social-feeds-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/social-media/social-media.css b/blocks/social-media/social-media.css index 09e82ebab..3d3c717cc 100644 --- a/blocks/social-media/social-media.css +++ b/blocks/social-media/social-media.css @@ -534,61 +534,10 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.social-media-wrapper :is(.fixed) { - position: fixed; -} - .social-media-wrapper :is(.relative) { position: relative; } -.social-media-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.social-media-wrapper :is(.top-\[83px\]) { - top: 83px; -} - .social-media-wrapper :is(.z-10) { z-index: 10; } @@ -598,40 +547,10 @@ video { margin-bottom: auto; } -.social-media-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - -.social-media-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .social-media-wrapper :is(.mb-4) { margin-bottom: 1rem; } -.social-media-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.social-media-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.social-media-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.social-media-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.social-media-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .social-media-wrapper :is(.block) { display: block; } @@ -640,18 +559,6 @@ video { display: flex; } -.social-media-wrapper :is(.h-48) { - height: 12rem; -} - -.social-media-wrapper :is(.w-full) { - width: 100%; -} - -.social-media-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - .social-media-wrapper :is(.items-center) { align-items: center; } @@ -660,47 +567,11 @@ video { justify-content: space-between; } -.social-media-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.social-media-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.social-media-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .social-media-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.social-media-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.social-media-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.social-media-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.social-media-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - -.social-media-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .social-media-wrapper :is(.pb-2) { padding-bottom: 0.5rem; } @@ -709,22 +580,6 @@ video { padding-top: 1.5rem; } -.social-media-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.social-media-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.social-media-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.social-media-wrapper :is(.pt-4) { - padding-top: 1rem; -} - .social-media-wrapper :is(.text-base) { font-size: 1rem; line-height: 1.5rem; @@ -734,14 +589,6 @@ video { font-weight: 700; } -.social-media-wrapper :is(.font-bold) { - font-weight: 700; -} - -.social-media-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .social-media-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)); @@ -750,113 +597,4 @@ video { .social-media-wrapper :is(.text-gray-600) { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.social-media-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.social-media-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.social-media-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.social-media-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -@media (min-width: 768px) { - .social-media-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .social-media-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - -@media (min-width: 1024px) { - .social-media-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .social-media-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .social-media-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } -} - -@media (min-width: 1280px) { - .social-media-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .social-media-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .social-media-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .social-media-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .social-media-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .social-media-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.social-media-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.social-media-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.social-media-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.social-media-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.social-media-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.social-media-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.social-media-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.social-media-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file diff --git a/blocks/stats/stats.css b/blocks/stats/stats.css index c3078b166..ceabedd33 100644 --- a/blocks/stats/stats.css +++ b/blocks/stats/stats.css @@ -534,111 +534,19 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; -} - -.stats-wrapper :is(.fixed) { - position: fixed; -} - -.stats-wrapper :is(.inset-x-0) { - left: 0px; - right: 0px; -} - -.stats-wrapper :is(.top-\[83px\]) { - top: 83px; -} - -.stats-wrapper :is(.z-10) { - z-index: 10; -} - .stats-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto; } -.stats-wrapper :is(.my-0) { - margin-top: 0px; - margin-bottom: 0px; -} - .stats-wrapper :is(.mt-3) { margin-top: 0.75rem; } -.stats-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; -} - -.stats-wrapper :is(.mb-5) { - margin-bottom: 1.25rem; -} - -.stats-wrapper :is(.mt-0) { - margin-top: 0px; -} - -.stats-wrapper :is(.mt-4) { - margin-top: 1rem; -} - -.stats-wrapper :is(.mt-\[-1px\]) { - margin-top: -1px; -} - .stats-wrapper :is(.block) { display: block; } -.stats-wrapper :is(.flex) { - display: flex; -} - -.stats-wrapper :is(.h-48) { - height: 12rem; -} - -.stats-wrapper :is(.w-full) { - width: 100%; -} - .stats-wrapper :is(.max-w-4xl) { max-width: 56rem; } @@ -647,80 +555,20 @@ video { max-width: 80rem; } -.stats-wrapper :is(.flex-wrap) { - flex-wrap: wrap; -} - -.stats-wrapper :is(.break-normal) { - overflow-wrap: normal; - word-break: normal; -} - -.stats-wrapper :is(.rounded-full) { - border-radius: 9999px; -} - -.stats-wrapper :is(.rounded-none) { - border-radius: 0px; -} - .stats-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.stats-wrapper :is(.bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.stats-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; -} - -.stats-wrapper :is(.stroke-white) { - stroke: #fff; -} - -.stats-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - .stats-wrapper :is(.px-4) { padding-left: 1rem; padding-right: 1rem; } -.stats-wrapper :is(.py-2) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .stats-wrapper :is(.pt-12) { padding-top: 3rem; } -.stats-wrapper :is(.pb-0) { - padding-bottom: 0px; -} - -.stats-wrapper :is(.pb-10) { - padding-bottom: 2.5rem; -} - -.stats-wrapper :is(.pb-4) { - padding-bottom: 1rem; -} - -.stats-wrapper :is(.pt-4) { - padding-top: 1rem; -} - -.stats-wrapper :is(.pt-6) { - padding-top: 1.5rem; -} - .stats-wrapper :is(.text-center) { text-align: center; } @@ -735,23 +583,10 @@ video { line-height: 1.75rem; } -.stats-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; -} - .stats-wrapper :is(.font-extrabold) { font-weight: 800; } -.stats-wrapper :is(.font-bold) { - font-weight: 700; -} - -.stats-wrapper :is(.leading-6) { - line-height: 1.5rem; -} - .stats-wrapper :is(.tracking-tight) { letter-spacing: -0.025em; } @@ -766,22 +601,6 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } -.stats-wrapper :is(.shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.stats-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.stats-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - @media (min-width: 640px) { .stats-wrapper :is(.sm\:mt-4) { margin-top: 1rem; @@ -802,95 +621,9 @@ video { } } -@media (min-width: 768px) { - .stats-wrapper :is(.md\:mt-4) { - margin-top: 1rem; - } - - .stats-wrapper :is(.md\:pb-10) { - padding-bottom: 2.5rem; - } -} - @media (min-width: 1024px) { - .stats-wrapper :is(.lg\:mt-0) { - margin-top: 0px; - } - - .stats-wrapper :is(.lg\:w-1\/3) { - width: 33.333333%; - } - - .stats-wrapper :is(.lg\:w-2\/3) { - width: 66.666667%; - } - .stats-wrapper :is(.lg\:px-8) { padding-left: 2rem; padding-right: 2rem; } -} - -@media (min-width: 1280px) { - .stats-wrapper :is(.xl\:w-1\/4) { - width: 25%; - } - - .stats-wrapper :is(.xl\:w-3\/4) { - width: 75%; - } -} - -@media (min-width: 768px) { - .stats-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-7xl .page-jump-menu-wrapper) { - max-width: 80rem; - } - - .stats-wrapper :is(.\[\&_\.page-jump-menu-wrapper\]\:md\:max-w-max .page-jump-menu-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } - - .stats-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-7xl .page-tabs-wrapper) { - max-width: 80rem; - } - - .stats-wrapper :is(.\[\&_\.page-tabs-wrapper\]\:md\:max-w-max .page-tabs-wrapper) { - max-width: -moz-max-content; - max-width: max-content; - } -} - -.stats-wrapper :is(.\[\&_li\>a\>span\.icon-chevron-down\]\:hidden li>a>span.icon-chevron-down) { - display: none; -} - -.stats-wrapper :is(.\[\&_ul\>li\>a\]\:h-40 ul>li>a) { - height: 10rem; -} - -.stats-wrapper :is(.\[\&_ul\>li\>a\]\:h-full ul>li>a) { - height: 100%; -} - -.stats-wrapper :is(.\[\&_ul\>li\>a\]\:flex-row ul>li>a) { - flex-direction: row; -} - -.stats-wrapper :is(.\[\&_ul\>li\>a\]\:flex-col ul>li>a) { - flex-direction: column; -} - -.stats-wrapper :is(.\[\&_ul\>li\>a\]\:items-center ul>li>a) { - align-items: center; -} - -.stats-wrapper :is(.\[\&_ul\>li\>a\]\:justify-center ul>li>a) { - justify-content: center; -} - -.stats-wrapper :is(.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden])) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } \ No newline at end of file From c95166d05095efc571bedfbbdb99f4a85ea08c1c Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 22:08:52 +0530 Subject: [PATCH 70/88] CLS height set --- styles/styles.css | 28 ++++++++++++++++++++++++++++ styles/tailwind.css | 10 +++++++++- 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index 2e916a3a4..9da8527b5 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1013,6 +1013,17 @@ header { } } +body.productdetail > div.breadcrumb-wrapper { + height: 45px; + padding-top: 1.25rem; +} + +@media (min-width: 1024px) { + body.productdetail > div.breadcrumb-wrapper { + padding-top: 0px; + } +} + .topic main, .topichub main { margin-left: auto; margin-right: auto; @@ -1410,7 +1421,18 @@ main .top-border > div.columns-wrapper:first-child { text-align: center; } +.product-hero-content .hero-default-content { + min-height: 400px; +} + +@media (min-width: 1024px) { + .product-hero-content .hero-default-content { + min-height: 600px; + } +} + main .section.product-hero-container { + height: 1140px; --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); padding-left: 0.5rem; @@ -1419,6 +1441,12 @@ main .section.product-hero-container { padding-bottom: 8rem; } +@media (min-width: 1024px) { + main .section.product-hero-container { + height: 664px; + } +} + .category main .section { padding-top: 2rem; padding-bottom: 2rem; diff --git a/styles/tailwind.css b/styles/tailwind.css index d7caca23f..977a351a3 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -206,6 +206,10 @@ @apply h-[52px] md:h-[80px] lg:h-[179px] bg-white print:hidden; } + body.productdetail > div.breadcrumb-wrapper { + @apply h-[45px] pt-5 lg:pt-0; + } + .topic main, .topichub main { @apply grid px-4 lg:px-0 max-w-7xl mx-auto lg:grid-cols-12; } @@ -373,8 +377,12 @@ @apply text-center; } + .product-hero-content .hero-default-content { + @apply min-h-[400px] lg:min-h-[600px]; + } + main .section.product-hero-container { - @apply bg-gray-50 px-2 pt-2 pb-32; + @apply bg-gray-50 px-2 pt-2 pb-32 h-[1140px] lg:h-[664px]; } .category main .section { From 81102811b5fbf5f191bda268ef393d60e398650e Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Wed, 15 May 2024 22:31:29 +0530 Subject: [PATCH 71/88] Heading updated --- blocks/accordion/accordion.css | 10 +++++----- blocks/accordion/accordion.js | 2 +- blocks/card-list/articleCard.js | 2 +- blocks/card-list/card-list.css | 5 +++++ scripts/scripts-dev.js | 2 +- scripts/scripts.js | 2 +- styles/styles.css | 13 +++++++++---- styles/tailwind.css | 6 +++--- 8 files changed, 26 insertions(+), 16 deletions(-) diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index 035ffab80..8cddf2750 100644 --- a/blocks/accordion/accordion.css +++ b/blocks/accordion/accordion.css @@ -676,6 +676,11 @@ video { vertical-align: middle; } +.accordion-wrapper :is(.\!text-xl) { + font-size: 1.25rem !important; + line-height: 1.75rem !important; +} + .accordion-wrapper :is(.text-base) { font-size: 1rem; line-height: 1.5rem; @@ -686,11 +691,6 @@ video { line-height: 1.25rem; } -.accordion-wrapper :is(.text-xl) { - font-size: 1.25rem; - line-height: 1.75rem; -} - .accordion-wrapper :is(.font-bold) { font-weight: 700; } diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js index 085268697..6e4049727 100644 --- a/blocks/accordion/accordion.js +++ b/blocks/accordion/accordion.js @@ -38,7 +38,7 @@ function createAccordionBlock(question, answer, image, uuid, index, customUUID) 'aria-controls': `accordion-${uuid}-${index}`, class: 'flex items-center justify-between w-full text-left font-semibold py-2 cursor-pointer peer-[&_span.plus]:opacity-100 peer-checked:[&_span.plus]:opacity-0 peer-checked:[&_span.plus]:rotate-45 peer-[&_span.minus]:opacity-0 peer-[&_span.minus]:rotate-90 peer-checked:[&_span.minus]:rotate-180 peer-checked:[&_span.minus]:opacity-100 peer-checked:[&_span.minus]:opacity-100', }, - h3({ class: 'text-xl font-medium leading-7 my-0 mr-12', title: question }, question), + h3({ class: '!text-xl font-medium leading-7 my-0 mr-12', title: question }, question), span({ class: 'icon icon-dam-Plus w-6 h-6 absolute right-0 fill-current text-gray-400 rotate-0 transform transition-all ease-in-out plus [&_svg>use]:stroke-black' }), span({ class: 'icon icon-dam-Minus w-6 h-6 absolute right-0 fill-current text-gray-400 rotate-0 transform transition-all ease-in-out minus [&_svg>use]:stroke-black' }), ); diff --git a/blocks/card-list/articleCard.js b/blocks/card-list/articleCard.js index 7d5f6a4fb..a6f1cbf7d 100644 --- a/blocks/card-list/articleCard.js +++ b/blocks/card-list/articleCard.js @@ -28,7 +28,7 @@ export default function createCard(article, firstCard = false) { h2( { class: - 'text-xl text-black font-medium mb-4 mt-4 line-clamp-3 break-words !h-20', + '!text-xl text-black font-medium mb-4 mt-4 line-clamp-3 break-words !h-20', }, cardTitle, ), diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index c66618b6c..778bc3971 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -870,6 +870,11 @@ video { line-height: 1.75rem !important; } +.card-list-wrapper :is(.\!text-xl) { + font-size: 1.25rem !important; + line-height: 1.75rem !important; +} + .card-list-wrapper :is(.text-base) { font-size: 1rem; line-height: 1.5rem; diff --git a/scripts/scripts-dev.js b/scripts/scripts-dev.js index 37bbd40fc..cad5dfb5d 100644 --- a/scripts/scripts-dev.js +++ b/scripts/scripts-dev.js @@ -351,7 +351,7 @@ function decorateTwoColumnSection(main) { if (currentDiv?.classList.contains('col-right')) { newSection.appendChild(currentDiv); } - childClone.className = 'text-gray-900 text-base leading-6 font-bold pt-6 pb-4 my-0'; + childClone.className = 'text-gray-900 !text-base leading-6 font-bold pt-6 pb-4 my-0'; newSection.appendChild( div( { class: 'col-left lg:w-1/3 xl:w-1/4 pt-4' }, diff --git a/scripts/scripts.js b/scripts/scripts.js index c36524821..e3b04b6f0 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1 +1 @@ -import{sampleRUM,loadHeader,loadFooter,decorateButtons,decorateIcons,decorateSections,decorateBlocks,decorateTemplateAndTheme,waitForLCP,loadBlocks,loadCSS,toClassName,getMetadata,createOptimizedPicture,loadBlock,decorateBlock}from"./lib-franklin.js";import{div,domEl,img}from"./dom-builder.js";const LCP_BLOCKS=["breadcrumb","product-hero","carousel"],TEMPLATE_LIST={blog:"blog",news:"blog",productdetail:"productDetail",processstep:"processstep",topic:"topic",library:"library",info:"library"};function imageHelper(e,t,a=!1){return-1<e.indexOf(".scene7.com")?img({src:""+e,alt:t,loading:a?"eager":"lazy",class:"mb-2 h-48 w-full object-cover"}):((e=createOptimizedPicture(e,t,a,[{width:"500"}])).querySelector("img").className="mb-2 h-48 w-full object-cover",e)}function createOptimizedS7Picture(e,t="",a=!1){var o;return e.startsWith("/is/image")||-1<e.indexOf(".scene7.com")?((o=document.createElement("picture")).appendChild(img({src:e+"?$danaher-mobile$",alt:t,loading:a?"eager":"lazy"})),o):img({src:e,alt:t,loading:a?"eager":"lazy"})}function formatDateUTCSeconds(e,t={}){var a=new Date(0);return a.setUTCSeconds(e),a.toLocaleDateString("en-US",{month:"short",day:"2-digit",year:"numeric",...t})}function generateUUID(){return Math.floor(1e3+9e3*Math.random())}let originalOffset=0;function scrollJumpMenuFixed(e){var t;originalOffset||(t=e.getBoundingClientRect(),originalOffset=t.top),window.scrollY>originalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelector(".page-jump-menu-container.fixed ul")?.classList.add("shadow-none","rounded-none"),document.querySelectorAll(".page-jump-menu-container.fixed ul li")?.forEach(e=>{e?.firstElementChild?.classList.add("rounded-full"),e?.firstElementChild?.querySelector("span.icon svg use")?.classList.add("stroke-danaherpurple-500")}),document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add("stroke-white"),e.classList.remove(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelectorAll(".page-jump-menu-container ul li")?.forEach(e=>e?.firstElementChild?.classList.remove("rounded-full")),e.classList.add(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}let pageTabsOriginalOffset=0;function scrollPageTabFixed(e){var t;pageTabsOriginalOffset||(t=e.getBoundingClientRect(),pageTabsOriginalOffset=t.top),window.scrollY>pageTabsOriginalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),e.classList.remove(..."[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),e.classList.add(..."[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}function makePublicUrl(t){var e=window.location.hostname.includes("lifesciences.danaher.com");try{var a=new URL(t,window.location.origin);return e?a.pathname.endsWith(".html")||(a.pathname+=".html"):a.pathname.endsWith(".html")&&(a.pathname=a.pathname.slice(0,-5)),a.pathname}catch(e){return console.error("Invalid URL:",e),t}}function setJsonLd(e,t){var a=document.head.querySelector(`script[data-name="${t}"]`);a?a.innerHTML=JSON.stringify(e):((a=document.createElement("script")).type="application/ld+json",a.innerHTML=JSON.stringify(e),a.dataset.name=t,document.head.appendChild(a))}function setFavicon(){var e=document.querySelector("link[rel*='icon']")||document.createElement("link");e.type="image/x-icon",e.rel="shortcut icon",e.href=`https://${window.location.hostname}/favicon.ico`,document.getElementsByTagName("head")[0].appendChild(e)}async function getFragmentFromFile(e){var t=await fetch(e);return t.ok?await t.text()||(console.error("fragment details empty",e),null):(console.error("error loading fragment details",t),null)}function getCookie(e){let t=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*"+encodeURIComponent(e).replace(/[\\-\\.\\+\\*]/g,"\\$&")+"\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"))||null;if(t&&("{"===t.substring(0,1)&&"}"===t.substring(t.length-1,t.length)||"["===t.substring(0,1)&&"]"===t.substring(t.length-1,t.length)))try{t=JSON.parse(t)}catch(e){}return t}function isOTEnabled(){var e=getCookie("OptanonConsent");return"string"!=typeof e||e.includes("C0002:1")}function setCookie(e,t,a=2592e6,o="/"){var n=new Date,a=(n.setTime(n.getTime()+a),"expires=".concat(n.toGMTString())),n=e.concat("=").concat(t).concat(";").concat(a).concat(";path=").concat(o);document.cookie=n}async function buildVideo(e){e=e.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"],a[href*="vidyard.com"]');if(0<e.length){const t=(await import("../blocks/embed/embed.js"))["default"];e.forEach(e=>{null==e.closest(".embed, .hero")&&t(e.parentNode)})}}async function loadFonts(){await loadCSS(window.hlx.codeBasePath+"/styles/fonts.css");try{window.location.hostname.includes("localhost")||sessionStorage.setItem("fonts-loaded","true")}catch(e){}}function buildAutoBlocks(e){try{buildVideo(e)}catch(e){console.error("Auto Blocking failed",e)}}function decorateModals(e){const t=e.querySelector(".show-modal-btn"),a=()=>t.getAttribute("data-dialog-message")?t.getAttribute("dialog-message"):"";t?.addEventListener("click",async e=>{e.preventDefault();e=(await import("./modal.js")).default;(await e("custom-modal",a,e=>{e.querySelector('p[name="close"]')?.addEventListener("click",()=>e.close())})).showModal()})}function decorateTwoColumnSection(e){e.querySelectorAll(".section.container-two-col").forEach(o=>{o.querySelectorAll(":scope > .default-content-wrapper").forEach(e=>{[...e.children].forEach(e=>{o.appendChild(e)});let t=e.nextSibling;for(var a=[];t;)t.className.includes("-wrapper")&&a.push(t),t=t.nextSibling;o.append(...a),o.removeChild(e)});const t=div();let a=null;[...o.children].forEach(e=>{"H1"===e.tagName&&(t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"})),a=div({class:"col-right w-full mt-0 md:mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-0 md:pb-10"}));e=e.cloneNode(!0);"H2"===e.tagName&&e.querySelector(":scope > strong")?(a?.classList.contains("col-right")&&t.appendChild(a),e.className="text-gray-900 text-base leading-6 font-bold pt-6 pb-4 my-0",t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"},e,domEl("hr",{style:"height: 10px; width: 54px; border-width: 0px; color: rgb(216, 244, 250); background-color: rgb(216, 244, 250);"}))),a=div({class:"col-right w-full mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-10"})):a?.classList.contains("col-right")&&a.appendChild(e)}),a&&t.appendChild(a),t.classList.add("w-full","flex","flex-wrap","break-normal"),o.innerHTML=t.outerHTML,o.classList.add("mx-auto","w-full","flex","flex-wrap","mb-5")})}function updateExternalLinks(r){const i=[window.location.origin];r.querySelectorAll("a[href]").forEach(t=>{try{var{origin:e,pathname:a,hash:o}=new URL(t.href,window.location.href),n=o&&o.startsWith("#_"),l="pdf"===a.split(".").pop();e&&e!==window.location.origin&&!n||l?(t.setAttribute("target","_blank"),i.includes(e)||t.setAttribute("rel","noopener")):n&&(t.setAttribute("target",o.replace("#","")),t.href=t.href.replace(o,""))}catch(e){console.warn(`Invalid link in ${r}: `+t.href)}})}function lazyLoadHiddenPageNavTabs(e,t){var a=window.location.hash;const n=a?a.substring(1,a.length).toLowerCase():t;e.forEach(t=>{if(!t.className.includes("breadcrumb-container")&&t.getAttribute("aria-labelledby")!==n){t.querySelectorAll(".block").forEach(e=>{e.setAttribute("data-block-status","loaded"),e.setAttribute("data-block-lazy-load",!0),e.parentElement.style.display="none"});const a=e=>{e.querySelectorAll(".block[data-block-lazy-load]").forEach(async e=>{e.removeAttribute("data-block-lazy-load"),e.setAttribute("data-block-status","initialized"),await loadBlock(e),e.parentElement.style.display=""}),t.setAttribute("data-section-status","loaded")},o=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(o.disconnect(),a(t))});o.observe(t),setTimeout(()=>{o.disconnect(),a(t)},5e3)}})}function decoratePageNav(t){var o=t.querySelector(".page-tabs");if(o){o=o.closest("div.section");let e=[...t.querySelectorAll("div.section")];const n=(e=e.slice(e.indexOf(o)+1)).filter(e=>e.hasAttribute("data-tabname"));let a=0;e.forEach(e=>{var t;a<n.length&&(e.classList.add("page-tab"),t=n[a].getAttribute("data-tabname")?.toLowerCase().replace(/\s+/g,"-"),e.setAttribute("aria-labelledby",t),e.hasAttribute("data-tabname"))&&(a+=1)}),lazyLoadHiddenPageNavTabs(e,n[0].getAttribute("aria-labelledby"))}}function decorateMain(e){decorateButtons(e),decorateIcons(e),buildAutoBlocks(e),decorateSections(e),decorateBlocks(e),loadHeader(document.querySelector("header")),decoratePageNav(e),decorateTwoColumnSection(e),updateExternalLinks(e)}async function decorateTemplates(e){try{var t,a,o=toClassName(getMetadata("template"));Object.keys(TEMPLATE_LIST).includes(o)&&(t=TEMPLATE_LIST[o],(a=await import(`../templates/${t}/${t}.js`)).default&&await a.default(e),document.body.classList.add(t))}catch(e){console.error("Auto Blocking failed",e)}}function decorateEmbeddedBlocks(e){e.querySelectorAll("div.section > div").forEach(decorateBlock)}async function processEmbedFragment(e){const t=div({class:"embed-fragment"});[...e.classList].forEach(e=>{t.classList.add(e)});var a=e.textContent;return a&&((a=await getFragmentFromFile(a+".plain.html"))?(t.innerHTML=a,[...t.querySelectorAll(".embed-fragment > div")].forEach(e=>{e.classList.add("section")}),decorateEmbeddedBlocks(t),decorateSections(t),loadBlocks(t)):(a=e.innerHTML,t.append(div({class:"section"})),t.querySelector(".section").innerHTML=a)),decorateButtons(t),decorateIcons(t),t}function loadATPageParams(){var e=window.location.pathname.replaceAll("/","_").replace(/\.html$/,"").substring(1),t=getMetadata("sku"),a=getMetadata("fullcategory").split("|").pop(),o=getMetadata("og:image"),n=getMetadata("og:title");return{id:e,skuId:t,categoryId:a,thumbnailURL:o,name:-1<n.indexOf("| Danaher Life Sciences")?n.split("| Danaher Life Sciences")[0]:n,message:getMetadata("og:description"),pageUrl:getMetadata("og:url"),brand:getMetadata("brand"),page:window.location.pathname.split("/")[3],tags:getMetadata("article:tag"),articleAuthor:getMetadata("authorname"),articlePostDate:getMetadata("publishdate"),articleReadTime:getMetadata("readingtime")}}function initATJS(t,e){return window.targetGlobalSettings=e,window.atPageParams=loadATPageParams(),window.targetPageParams=function(){return{at_property:"6aeb619e-92d9-f4cf-f209-6d88ff58af6a","entity.id":window.atPageParams?.id,"entity.skuId":window.atPageParams?.skuId,"entity.categoryId":window.atPageParams?.categoryId,"entity.thumbnailURL":window.atPageParams?.thumbnailURL,"entity.name":window.atPageParams?.name,"entity.message":window.atPageParams?.message,"entity.pageUrl":window.atPageParams?.pageUrl,"entity.brand":window.atPageParams?.brand,"entity.page":window.atPageParams?.page,"entity.tags":window.atPageParams?.tags,"entity.articleAuthor":window.atPageParams?.articleAuthor,"entity.articlePostDate":window.atPageParams?.articlePostDate,"entity.articleReadTime":window.atPageParams?.articleReadTime,danaherCompany:localStorage.getItem("danaher_company")?localStorage.getItem("danaher_company"):"",utmCampaign:localStorage.getItem("danaher_utm_campaign")?localStorage.getItem("danaher_utm_campaign"):"",utmSource:localStorage.getItem("danaher_utm_source")?localStorage.getItem("danaher_utm_source"):"",utmMedium:localStorage.getItem("danaher_utm_medium")?localStorage.getItem("danaher_utm_medium"):"",utmContent:localStorage.getItem("danaher_utm_content")?localStorage.getItem("danaher_utm_content"):""}},new Promise(e=>{import(t).then(e)})}function onDecoratedElement(t){document.querySelector('[data-block-status="loaded"],[data-section-status="loaded"]')&&t();var e=new MutationObserver(e=>{e.some(e=>"BODY"===e.target.tagName||"loaded"===e.target.dataset.sectionStatus||"loaded"===e.target.dataset.blockStatus)&&t()});e.observe(document.querySelector("main"),{subtree:!0,attributes:!0,attributeFilter:["data-block-status","data-section-status"]}),e.observe(document.querySelector("body"),{childList:!0})}function toCssSelector(e){return e.replace(/(\.\S+)?:eq\((\d+)\)/g,(e,t,a)=>":nth-child("+(Number(a)+1)+(t?` of ${t})`:""))}async function getElementForOffer(e){e=e.cssSelector||toCssSelector(e.selector);return document.querySelector(e)}async function getElementForMetric(e){e=toCssSelector(e.selector);return document.querySelector(e)}async function getAndApplyOffers(){const e=await window.adobe.target.getOffers({request:{execute:{pageLoad:{}}}}),{options:t=[],metrics:a=[]}=e.execute.pageLoad;onDecoratedElement(()=>{window.adobe.target.applyOffers({response:e}),t.forEach(e=>e.content=e.content.filter(e=>!getElementForOffer(e))),a.map((e,t)=>getElementForMetric(e)?t:-1).filter(e=>0<=e).reverse().map(e=>a.splice(e,1))})}let atjsPromise=Promise.resolve();const urlTarget=window.location.pathname,regex=/^\/(us\/en\/products\.html)?$/;async function loadEager(e){document.documentElement.lang="en",decorateTemplateAndTheme(),await window.hlx.plugins.run("loadEager");e=e.querySelector("main");e&&(await decorateTemplates(e),decorateMain(e),await atjsPromise,await new Promise(e=>{window.requestAnimationFrame(async()=>{document.body.classList.add("appear"),await waitForLCP(LCP_BLOCKS),e()})}));try{(900<=window.innerWidth||sessionStorage.getItem("fonts-loaded"))&&loadFonts()}catch(e){}}function getParameterByName(e,t=window.location.href){e=e.replace(/[[\]]/g,"$&"),e=new RegExp(`[?&]${e}(=([^&#]*)|&|#|$)`).exec(t);return e?e[2]?decodeURIComponent(e[2].replace(/\+/g," ")):"":null}function loadUTMprams(){["utm_campaign","utm_source","utm_medium","utm_content","utm_term","utm_previouspage"].forEach(e=>{var t=getParameterByName(e);null!==t&&window.localStorage.setItem("danaher_"+e,t)})}async function loadLazy(e){var t=e.querySelector("main"),a=(await loadBlocks(t),window.location)["hash"],o=!!a&&e.getElementById(a.substring(1));a&&o&&o.scrollIntoView(),loadFooter(e.querySelector("footer")),loadCSS(window.hlx.codeBasePath+"/styles/lazy-styles.css"),loadFonts(),window.hlx.plugins.run("loadLazy"),sampleRUM("lazy"),sampleRUM.observe(t.querySelectorAll("div[data-block-name]")),sampleRUM.observe(t.querySelectorAll("picture > img")),loadUTMprams()}function loadDelayed(){window.setTimeout(()=>(window.hlx.plugins.load("delayed"),window.hlx.plugins.run("loadDelayed"),import("./delayed.js")),4e3)}async function loadPage(){setFavicon(),await window.hlx.plugins.load("eager"),await loadEager(document),await window.hlx.plugins.load("lazy"),await loadLazy(document),loadDelayed()}function getDLPage(){var e={title:document.querySelector("title").textContent.replace(/[\n\t]/gm,""),language:"en",locale:"US",level:"top",type:"webpage",keywords:"",creationDate:getMetadata("creationdate"),updateDate:getMetadata("updatedate")},t=window.location.pathname;return"/"===t||"/us/en"===t||"/us/en.html"===t?(e.level="top",e.type="home"):t.includes("/us/en/news")?(e.level="top",e.type="news"):t.includes("/us/en/blog")?(e.level="middle",e.type="blog"):t.includes("/us/en/solutions")?(e.level="middle",e.type="solutions"):t.includes("/us/en/applications")?(e.level="middle",e.type="applications"):t.includes("/us/en/products")?t.includes("/us/en/products/family")?(e.level="bottom",e.type="family"):t.includes("/us/en/products/bundles")?(e.level="bottom",e.type="bundles"):t.includes("/us/en/products/sku")?(e.level="bottom",e.type="sku"):t.includes("/topics")?(e.level="other",e.type="topics"):(e.level="bottom",e.type="products"):t.includes("/us/en/library")?(e.level="other",e.type="library"):t.includes("/us/en/about-us")?(e.level="top",e.type="about-us"):t.includes("/us/en/expert")?(e.level="top",e.type="expert"):t.includes("/us/en/search")||t.includes("/us/en/danahersearch")?(e.level="top",e.type="search"):t.includes("/us/en/signin")?(e.level="top",e.type="signin"):t.includes("/us/en/legal")&&(e.level="top",e.type="legal"),e}regex.test(urlTarget)||(atjsPromise=initATJS("./at.js",{clientCode:"danaher",serverDomain:"danaher.tt.omtrdc.net",imsOrgId:"08333E7B636A2D4D0A495C34@AdobeOrg",bodyHidingEnabled:!1,cookieDomain:window.location.hostname,pageLoadEnabled:!1,secureOnly:!0,viewsEnabled:!1,withWebGLRenderer:!1}).catch(e=>{console.error("Error loading at.js",e)}),document.addEventListener("at-library-loaded",()=>getAndApplyOffers()));const urlParams=new URLSearchParams(window.location.search),useProd=urlParams.get("useProd");"lifesciences.danaher.com"===window.location.host||"true"===useProd?window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-THXPLCS",munchkinID:"306-EHG-641",marketoDomain:"//306-EHG-641.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danaherproductionrfl96bkr",searchKey:"xxf2f10385-5a54-4a18-bb48-fd8025d6b5d2",workflowProductKey:"xx3d1b8da5-d1e9-4989-bbed-264a248a9e22",workflowResourceKey:"xxf6a8b387-10f2-4660-af5d-6d304d0a789d",productKey:"xxfb161aa6-0fa0-419f-af37-9c6d7784bf76",familyProductKey:"xx1ecd2a4f-8391-4c70-b3c0-2d589bda56b7",familyResourceKey:"xx9dd85afc-64b6-4295-bc5d-eb8285f96d52",categoryProductKey:"xx2a299d60-2cf1-48ab-b9d5-94daeb25f1d6",categoryDetailKey:"xx61910369-c1ab-4df9-8d8a-3092b1323fcc",productRecommendationsKey:"xx107716c0-1ccd-4a61-8717-6ca36b6cdb0e",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"lifesciences.danaher.com"}:window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-KCBGM2N",munchkinID:"439-KNJ-322",marketoDomain:"//439-KNJ-322.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://stage.shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danahernonproduction1892f3fhz",searchKey:"xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b",workflowProductKey:"xx26ffc727-cc72-4bbd-98e3-34052f296382",workflowResourceKey:"xx14676f1d-cf4a-4a38-94f0-eda56e9920f1",productKey:"xx32da148e-dfd0-4725-a443-c05a7793afea",familyProductKey:"xx4e3989d6-93aa-4140-a227-19da35fcd1cc",familyResourceKey:"xx8274a91e-b29c-4267-8b3a-5022a2698605",categoryProductKey:"xxdf9d160d-f6e5-4c8c-969b-8570d7b81418",categoryDetailKey:"xxf2ea9bfd-bccb-4195-90fd-7757504fdc33",productRecommendationsKey:"xxea4d2c40-26e7-4e98-9377-d8ebe3f435ea",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"stage.lifesciences.danaher.com"},window.dataLayer=[],window.dataLayer.push({user:{customerID:"",accountType:"guest",marketCode:"",company:"",role:"",city:"",state:"",country:"",postalCode:"",lastVisit:""}}),window.dataLayer.push({page:getDLPage()}),loadPage();export{imageHelper,createOptimizedS7Picture,formatDateUTCSeconds,generateUUID,scrollJumpMenuFixed,scrollPageTabFixed,makePublicUrl,setJsonLd,getFragmentFromFile,getCookie,isOTEnabled,setCookie,decorateModals,decorateMain,processEmbedFragment}; \ No newline at end of file +import{sampleRUM,loadHeader,loadFooter,decorateButtons,decorateIcons,decorateSections,decorateBlocks,decorateTemplateAndTheme,waitForLCP,loadBlocks,loadCSS,toClassName,getMetadata,createOptimizedPicture,loadBlock,decorateBlock}from"./lib-franklin.js";import{div,domEl,img}from"./dom-builder.js";const LCP_BLOCKS=["breadcrumb","product-hero","carousel"],TEMPLATE_LIST={blog:"blog",news:"blog",productdetail:"productDetail",processstep:"processstep",topic:"topic",library:"library",info:"library"};function imageHelper(e,t,a=!1){return-1<e.indexOf(".scene7.com")?img({src:""+e,alt:t,loading:a?"eager":"lazy",class:"mb-2 h-48 w-full object-cover"}):((e=createOptimizedPicture(e,t,a,[{width:"500"}])).querySelector("img").className="mb-2 h-48 w-full object-cover",e)}function createOptimizedS7Picture(e,t="",a=!1){var o;return e.startsWith("/is/image")||-1<e.indexOf(".scene7.com")?((o=document.createElement("picture")).appendChild(img({src:e+"?$danaher-mobile$",alt:t,loading:a?"eager":"lazy"})),o):img({src:e,alt:t,loading:a?"eager":"lazy"})}function formatDateUTCSeconds(e,t={}){var a=new Date(0);return a.setUTCSeconds(e),a.toLocaleDateString("en-US",{month:"short",day:"2-digit",year:"numeric",...t})}function generateUUID(){return Math.floor(1e3+9e3*Math.random())}let originalOffset=0;function scrollJumpMenuFixed(e){var t;originalOffset||(t=e.getBoundingClientRect(),originalOffset=t.top),window.scrollY>originalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelector(".page-jump-menu-container.fixed ul")?.classList.add("shadow-none","rounded-none"),document.querySelectorAll(".page-jump-menu-container.fixed ul li")?.forEach(e=>{e?.firstElementChild?.classList.add("rounded-full"),e?.firstElementChild?.querySelector("span.icon svg use")?.classList.add("stroke-danaherpurple-500")}),document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add("stroke-white"),e.classList.remove(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelectorAll(".page-jump-menu-container ul li")?.forEach(e=>e?.firstElementChild?.classList.remove("rounded-full")),e.classList.add(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}let pageTabsOriginalOffset=0;function scrollPageTabFixed(e){var t;pageTabsOriginalOffset||(t=e.getBoundingClientRect(),pageTabsOriginalOffset=t.top),window.scrollY>pageTabsOriginalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),e.classList.remove(..."[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),e.classList.add(..."[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}function makePublicUrl(t){var e=window.location.hostname.includes("lifesciences.danaher.com");try{var a=new URL(t,window.location.origin);return e?a.pathname.endsWith(".html")||(a.pathname+=".html"):a.pathname.endsWith(".html")&&(a.pathname=a.pathname.slice(0,-5)),a.pathname}catch(e){return console.error("Invalid URL:",e),t}}function setJsonLd(e,t){var a=document.head.querySelector(`script[data-name="${t}"]`);a?a.innerHTML=JSON.stringify(e):((a=document.createElement("script")).type="application/ld+json",a.innerHTML=JSON.stringify(e),a.dataset.name=t,document.head.appendChild(a))}function setFavicon(){var e=document.querySelector("link[rel*='icon']")||document.createElement("link");e.type="image/x-icon",e.rel="shortcut icon",e.href=`https://${window.location.hostname}/favicon.ico`,document.getElementsByTagName("head")[0].appendChild(e)}async function getFragmentFromFile(e){var t=await fetch(e);return t.ok?await t.text()||(console.error("fragment details empty",e),null):(console.error("error loading fragment details",t),null)}function getCookie(e){let t=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*"+encodeURIComponent(e).replace(/[\\-\\.\\+\\*]/g,"\\$&")+"\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"))||null;if(t&&("{"===t.substring(0,1)&&"}"===t.substring(t.length-1,t.length)||"["===t.substring(0,1)&&"]"===t.substring(t.length-1,t.length)))try{t=JSON.parse(t)}catch(e){}return t}function isOTEnabled(){var e=getCookie("OptanonConsent");return"string"!=typeof e||e.includes("C0002:1")}function setCookie(e,t,a=2592e6,o="/"){var n=new Date,a=(n.setTime(n.getTime()+a),"expires=".concat(n.toGMTString())),n=e.concat("=").concat(t).concat(";").concat(a).concat(";path=").concat(o);document.cookie=n}async function buildVideo(e){e=e.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"],a[href*="vidyard.com"]');if(0<e.length){const t=(await import("../blocks/embed/embed.js"))["default"];e.forEach(e=>{null==e.closest(".embed, .hero")&&t(e.parentNode)})}}async function loadFonts(){await loadCSS(window.hlx.codeBasePath+"/styles/fonts.css");try{window.location.hostname.includes("localhost")||sessionStorage.setItem("fonts-loaded","true")}catch(e){}}function buildAutoBlocks(e){try{buildVideo(e)}catch(e){console.error("Auto Blocking failed",e)}}function decorateModals(e){const t=e.querySelector(".show-modal-btn"),a=()=>t.getAttribute("data-dialog-message")?t.getAttribute("dialog-message"):"";t?.addEventListener("click",async e=>{e.preventDefault();e=(await import("./modal.js")).default;(await e("custom-modal",a,e=>{e.querySelector('p[name="close"]')?.addEventListener("click",()=>e.close())})).showModal()})}function decorateTwoColumnSection(e){e.querySelectorAll(".section.container-two-col").forEach(o=>{o.querySelectorAll(":scope > .default-content-wrapper").forEach(e=>{[...e.children].forEach(e=>{o.appendChild(e)});let t=e.nextSibling;for(var a=[];t;)t.className.includes("-wrapper")&&a.push(t),t=t.nextSibling;o.append(...a),o.removeChild(e)});const t=div();let a=null;[...o.children].forEach(e=>{"H1"===e.tagName&&(t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"})),a=div({class:"col-right w-full mt-0 md:mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-0 md:pb-10"}));e=e.cloneNode(!0);"H2"===e.tagName&&e.querySelector(":scope > strong")?(a?.classList.contains("col-right")&&t.appendChild(a),e.className="text-gray-900 !text-base leading-6 font-bold pt-6 pb-4 my-0",t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"},e,domEl("hr",{style:"height: 10px; width: 54px; border-width: 0px; color: rgb(216, 244, 250); background-color: rgb(216, 244, 250);"}))),a=div({class:"col-right w-full mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-10"})):a?.classList.contains("col-right")&&a.appendChild(e)}),a&&t.appendChild(a),t.classList.add("w-full","flex","flex-wrap","break-normal"),o.innerHTML=t.outerHTML,o.classList.add("mx-auto","w-full","flex","flex-wrap","mb-5")})}function updateExternalLinks(r){const i=[window.location.origin];r.querySelectorAll("a[href]").forEach(t=>{try{var{origin:e,pathname:a,hash:o}=new URL(t.href,window.location.href),n=o&&o.startsWith("#_"),l="pdf"===a.split(".").pop();e&&e!==window.location.origin&&!n||l?(t.setAttribute("target","_blank"),i.includes(e)||t.setAttribute("rel","noopener")):n&&(t.setAttribute("target",o.replace("#","")),t.href=t.href.replace(o,""))}catch(e){console.warn(`Invalid link in ${r}: `+t.href)}})}function lazyLoadHiddenPageNavTabs(e,t){var a=window.location.hash;const n=a?a.substring(1,a.length).toLowerCase():t;e.forEach(t=>{if(!t.className.includes("breadcrumb-container")&&t.getAttribute("aria-labelledby")!==n){t.querySelectorAll(".block").forEach(e=>{e.setAttribute("data-block-status","loaded"),e.setAttribute("data-block-lazy-load",!0),e.parentElement.style.display="none"});const a=e=>{e.querySelectorAll(".block[data-block-lazy-load]").forEach(async e=>{e.removeAttribute("data-block-lazy-load"),e.setAttribute("data-block-status","initialized"),await loadBlock(e),e.parentElement.style.display=""}),t.setAttribute("data-section-status","loaded")},o=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(o.disconnect(),a(t))});o.observe(t),setTimeout(()=>{o.disconnect(),a(t)},5e3)}})}function decoratePageNav(t){var o=t.querySelector(".page-tabs");if(o){o=o.closest("div.section");let e=[...t.querySelectorAll("div.section")];const n=(e=e.slice(e.indexOf(o)+1)).filter(e=>e.hasAttribute("data-tabname"));let a=0;e.forEach(e=>{var t;a<n.length&&(e.classList.add("page-tab"),t=n[a].getAttribute("data-tabname")?.toLowerCase().replace(/\s+/g,"-"),e.setAttribute("aria-labelledby",t),e.hasAttribute("data-tabname"))&&(a+=1)}),lazyLoadHiddenPageNavTabs(e,n[0].getAttribute("aria-labelledby"))}}function decorateMain(e){decorateButtons(e),decorateIcons(e),buildAutoBlocks(e),decorateSections(e),decorateBlocks(e),loadHeader(document.querySelector("header")),decoratePageNav(e),decorateTwoColumnSection(e),updateExternalLinks(e)}async function decorateTemplates(e){try{var t,a,o=toClassName(getMetadata("template"));Object.keys(TEMPLATE_LIST).includes(o)&&(t=TEMPLATE_LIST[o],(a=await import(`../templates/${t}/${t}.js`)).default&&await a.default(e),document.body.classList.add(t))}catch(e){console.error("Auto Blocking failed",e)}}function decorateEmbeddedBlocks(e){e.querySelectorAll("div.section > div").forEach(decorateBlock)}async function processEmbedFragment(e){const t=div({class:"embed-fragment"});[...e.classList].forEach(e=>{t.classList.add(e)});var a=e.textContent;return a&&((a=await getFragmentFromFile(a+".plain.html"))?(t.innerHTML=a,[...t.querySelectorAll(".embed-fragment > div")].forEach(e=>{e.classList.add("section")}),decorateEmbeddedBlocks(t),decorateSections(t),loadBlocks(t)):(a=e.innerHTML,t.append(div({class:"section"})),t.querySelector(".section").innerHTML=a)),decorateButtons(t),decorateIcons(t),t}function loadATPageParams(){var e=window.location.pathname.replaceAll("/","_").replace(/\.html$/,"").substring(1),t=getMetadata("sku"),a=getMetadata("fullcategory").split("|").pop(),o=getMetadata("og:image"),n=getMetadata("og:title");return{id:e,skuId:t,categoryId:a,thumbnailURL:o,name:-1<n.indexOf("| Danaher Life Sciences")?n.split("| Danaher Life Sciences")[0]:n,message:getMetadata("og:description"),pageUrl:getMetadata("og:url"),brand:getMetadata("brand"),page:window.location.pathname.split("/")[3],tags:getMetadata("article:tag"),articleAuthor:getMetadata("authorname"),articlePostDate:getMetadata("publishdate"),articleReadTime:getMetadata("readingtime")}}function initATJS(t,e){return window.targetGlobalSettings=e,window.atPageParams=loadATPageParams(),window.targetPageParams=function(){return{at_property:"6aeb619e-92d9-f4cf-f209-6d88ff58af6a","entity.id":window.atPageParams?.id,"entity.skuId":window.atPageParams?.skuId,"entity.categoryId":window.atPageParams?.categoryId,"entity.thumbnailURL":window.atPageParams?.thumbnailURL,"entity.name":window.atPageParams?.name,"entity.message":window.atPageParams?.message,"entity.pageUrl":window.atPageParams?.pageUrl,"entity.brand":window.atPageParams?.brand,"entity.page":window.atPageParams?.page,"entity.tags":window.atPageParams?.tags,"entity.articleAuthor":window.atPageParams?.articleAuthor,"entity.articlePostDate":window.atPageParams?.articlePostDate,"entity.articleReadTime":window.atPageParams?.articleReadTime,danaherCompany:localStorage.getItem("danaher_company")?localStorage.getItem("danaher_company"):"",utmCampaign:localStorage.getItem("danaher_utm_campaign")?localStorage.getItem("danaher_utm_campaign"):"",utmSource:localStorage.getItem("danaher_utm_source")?localStorage.getItem("danaher_utm_source"):"",utmMedium:localStorage.getItem("danaher_utm_medium")?localStorage.getItem("danaher_utm_medium"):"",utmContent:localStorage.getItem("danaher_utm_content")?localStorage.getItem("danaher_utm_content"):""}},new Promise(e=>{import(t).then(e)})}function onDecoratedElement(t){document.querySelector('[data-block-status="loaded"],[data-section-status="loaded"]')&&t();var e=new MutationObserver(e=>{e.some(e=>"BODY"===e.target.tagName||"loaded"===e.target.dataset.sectionStatus||"loaded"===e.target.dataset.blockStatus)&&t()});e.observe(document.querySelector("main"),{subtree:!0,attributes:!0,attributeFilter:["data-block-status","data-section-status"]}),e.observe(document.querySelector("body"),{childList:!0})}function toCssSelector(e){return e.replace(/(\.\S+)?:eq\((\d+)\)/g,(e,t,a)=>":nth-child("+(Number(a)+1)+(t?` of ${t})`:""))}async function getElementForOffer(e){e=e.cssSelector||toCssSelector(e.selector);return document.querySelector(e)}async function getElementForMetric(e){e=toCssSelector(e.selector);return document.querySelector(e)}async function getAndApplyOffers(){const e=await window.adobe.target.getOffers({request:{execute:{pageLoad:{}}}}),{options:t=[],metrics:a=[]}=e.execute.pageLoad;onDecoratedElement(()=>{window.adobe.target.applyOffers({response:e}),t.forEach(e=>e.content=e.content.filter(e=>!getElementForOffer(e))),a.map((e,t)=>getElementForMetric(e)?t:-1).filter(e=>0<=e).reverse().map(e=>a.splice(e,1))})}let atjsPromise=Promise.resolve();const urlTarget=window.location.pathname,regex=/^\/(us\/en\/products\.html)?$/;async function loadEager(e){document.documentElement.lang="en",decorateTemplateAndTheme(),await window.hlx.plugins.run("loadEager");e=e.querySelector("main");e&&(await decorateTemplates(e),decorateMain(e),await atjsPromise,await new Promise(e=>{window.requestAnimationFrame(async()=>{document.body.classList.add("appear"),await waitForLCP(LCP_BLOCKS),e()})}));try{(900<=window.innerWidth||sessionStorage.getItem("fonts-loaded"))&&loadFonts()}catch(e){}}function getParameterByName(e,t=window.location.href){e=e.replace(/[[\]]/g,"$&"),e=new RegExp(`[?&]${e}(=([^&#]*)|&|#|$)`).exec(t);return e?e[2]?decodeURIComponent(e[2].replace(/\+/g," ")):"":null}function loadUTMprams(){["utm_campaign","utm_source","utm_medium","utm_content","utm_term","utm_previouspage"].forEach(e=>{var t=getParameterByName(e);null!==t&&window.localStorage.setItem("danaher_"+e,t)})}async function loadLazy(e){var t=e.querySelector("main"),a=(await loadBlocks(t),window.location)["hash"],o=!!a&&e.getElementById(a.substring(1));a&&o&&o.scrollIntoView(),loadFooter(e.querySelector("footer")),loadCSS(window.hlx.codeBasePath+"/styles/lazy-styles.css"),loadFonts(),window.hlx.plugins.run("loadLazy"),sampleRUM("lazy"),sampleRUM.observe(t.querySelectorAll("div[data-block-name]")),sampleRUM.observe(t.querySelectorAll("picture > img")),loadUTMprams()}function loadDelayed(){window.setTimeout(()=>(window.hlx.plugins.load("delayed"),window.hlx.plugins.run("loadDelayed"),import("./delayed.js")),4e3)}async function loadPage(){setFavicon(),await window.hlx.plugins.load("eager"),await loadEager(document),await window.hlx.plugins.load("lazy"),await loadLazy(document),loadDelayed()}function getDLPage(){var e={title:document.querySelector("title").textContent.replace(/[\n\t]/gm,""),language:"en",locale:"US",level:"top",type:"webpage",keywords:"",creationDate:getMetadata("creationdate"),updateDate:getMetadata("updatedate")},t=window.location.pathname;return"/"===t||"/us/en"===t||"/us/en.html"===t?(e.level="top",e.type="home"):t.includes("/us/en/news")?(e.level="top",e.type="news"):t.includes("/us/en/blog")?(e.level="middle",e.type="blog"):t.includes("/us/en/solutions")?(e.level="middle",e.type="solutions"):t.includes("/us/en/applications")?(e.level="middle",e.type="applications"):t.includes("/us/en/products")?t.includes("/us/en/products/family")?(e.level="bottom",e.type="family"):t.includes("/us/en/products/bundles")?(e.level="bottom",e.type="bundles"):t.includes("/us/en/products/sku")?(e.level="bottom",e.type="sku"):t.includes("/topics")?(e.level="other",e.type="topics"):(e.level="bottom",e.type="products"):t.includes("/us/en/library")?(e.level="other",e.type="library"):t.includes("/us/en/about-us")?(e.level="top",e.type="about-us"):t.includes("/us/en/expert")?(e.level="top",e.type="expert"):t.includes("/us/en/search")||t.includes("/us/en/danahersearch")?(e.level="top",e.type="search"):t.includes("/us/en/signin")?(e.level="top",e.type="signin"):t.includes("/us/en/legal")&&(e.level="top",e.type="legal"),e}regex.test(urlTarget)||(atjsPromise=initATJS("./at.js",{clientCode:"danaher",serverDomain:"danaher.tt.omtrdc.net",imsOrgId:"08333E7B636A2D4D0A495C34@AdobeOrg",bodyHidingEnabled:!1,cookieDomain:window.location.hostname,pageLoadEnabled:!1,secureOnly:!0,viewsEnabled:!1,withWebGLRenderer:!1}).catch(e=>{console.error("Error loading at.js",e)}),document.addEventListener("at-library-loaded",()=>getAndApplyOffers()));const urlParams=new URLSearchParams(window.location.search),useProd=urlParams.get("useProd");"lifesciences.danaher.com"===window.location.host||"true"===useProd?window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-THXPLCS",munchkinID:"306-EHG-641",marketoDomain:"//306-EHG-641.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danaherproductionrfl96bkr",searchKey:"xxf2f10385-5a54-4a18-bb48-fd8025d6b5d2",workflowProductKey:"xx3d1b8da5-d1e9-4989-bbed-264a248a9e22",workflowResourceKey:"xxf6a8b387-10f2-4660-af5d-6d304d0a789d",productKey:"xxfb161aa6-0fa0-419f-af37-9c6d7784bf76",familyProductKey:"xx1ecd2a4f-8391-4c70-b3c0-2d589bda56b7",familyResourceKey:"xx9dd85afc-64b6-4295-bc5d-eb8285f96d52",categoryProductKey:"xx2a299d60-2cf1-48ab-b9d5-94daeb25f1d6",categoryDetailKey:"xx61910369-c1ab-4df9-8d8a-3092b1323fcc",productRecommendationsKey:"xx107716c0-1ccd-4a61-8717-6ca36b6cdb0e",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"lifesciences.danaher.com"}:window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-KCBGM2N",munchkinID:"439-KNJ-322",marketoDomain:"//439-KNJ-322.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://stage.shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danahernonproduction1892f3fhz",searchKey:"xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b",workflowProductKey:"xx26ffc727-cc72-4bbd-98e3-34052f296382",workflowResourceKey:"xx14676f1d-cf4a-4a38-94f0-eda56e9920f1",productKey:"xx32da148e-dfd0-4725-a443-c05a7793afea",familyProductKey:"xx4e3989d6-93aa-4140-a227-19da35fcd1cc",familyResourceKey:"xx8274a91e-b29c-4267-8b3a-5022a2698605",categoryProductKey:"xxdf9d160d-f6e5-4c8c-969b-8570d7b81418",categoryDetailKey:"xxf2ea9bfd-bccb-4195-90fd-7757504fdc33",productRecommendationsKey:"xxea4d2c40-26e7-4e98-9377-d8ebe3f435ea",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"stage.lifesciences.danaher.com"},window.dataLayer=[],window.dataLayer.push({user:{customerID:"",accountType:"guest",marketCode:"",company:"",role:"",city:"",state:"",country:"",postalCode:"",lastVisit:""}}),window.dataLayer.push({page:getDLPage()}),loadPage();export{imageHelper,createOptimizedS7Picture,formatDateUTCSeconds,generateUUID,scrollJumpMenuFixed,scrollPageTabFixed,makePublicUrl,setJsonLd,getFragmentFromFile,getCookie,isOTEnabled,setCookie,decorateModals,decorateMain,processEmbedFragment}; \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 9da8527b5..363321e55 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -478,13 +478,13 @@ h1 { } h2 { - font-size: 1.875rem; + font-size: 1.875rem !important; font-weight: 500 !important; line-height: 2.25rem !important; } h3 { - font-size: 1.5rem; + font-size: 1.5rem !important; font-weight: 500 !important; line-height: 2rem !important; } @@ -860,8 +860,8 @@ main .section.carousel-container { .container-two-col .col-right h2 { display: inline-flex; - font-size: 1.25rem; - line-height: 1.75rem; + font-size: 1.25rem !important; + line-height: 1.75rem !important; font-weight: 700; --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); @@ -2187,6 +2187,11 @@ svg symbol path { line-height: 1rem; } +.\!text-base { + font-size: 1rem !important; + line-height: 1.5rem !important; +} + .font-bold { font-weight: 700; } diff --git a/styles/tailwind.css b/styles/tailwind.css index 977a351a3..2f0c74133 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -34,11 +34,11 @@ } h2 { - @apply !leading-9 !font-medium text-3xl; + @apply !leading-9 !font-medium !text-3xl; } h3 { - @apply !leading-8 !font-medium text-2xl; + @apply !leading-8 !font-medium !text-2xl; } h4 { @@ -159,7 +159,7 @@ } .container-two-col .col-right h2 { - @apply inline-flex font-semibold text-xl text-danahergray-900; + @apply inline-flex font-semibold !text-xl text-danahergray-900; } .container-two-col .col-right ul, .accordion-answer ul { From 6708b64fa830da3f024a075197ac876123e721ca Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 16 May 2024 10:31:39 +0530 Subject: [PATCH 72/88] fixed for product detail page --- blocks/product-hero/product-hero.css | 266 ------------------------- blocks/product-hero/product-hero.js | 55 ++---- styles/styles.css | 285 ++++++++++++++++++++++++--- styles/tailwind.css | 96 ++++++++- 4 files changed, 357 insertions(+), 345 deletions(-) diff --git a/blocks/product-hero/product-hero.css b/blocks/product-hero/product-hero.css index b1d91cd23..b7319c66b 100644 --- a/blocks/product-hero/product-hero.css +++ b/blocks/product-hero/product-hero.css @@ -550,10 +550,6 @@ video { position: relative; } -.product-hero-wrapper :is(.order-first) { - order: -9999; -} - .product-hero-wrapper :is(.col-span-10) { grid-column: span 10 / span 10; } @@ -562,11 +558,6 @@ video { grid-column: span 2 / span 2; } -.product-hero-wrapper :is(.mx-auto) { - margin-left: auto; - margin-right: auto; -} - .product-hero-wrapper :is(.-mt-\[21px\]) { margin-top: -21px; } @@ -575,30 +566,10 @@ video { margin-bottom: 0.5rem; } -.product-hero-wrapper :is(.mb-2\.5) { - margin-bottom: 0.625rem; -} - -.product-hero-wrapper :is(.mb-3) { - margin-bottom: 0.75rem; -} - -.product-hero-wrapper :is(.ml-12) { - margin-left: 3rem; -} - -.product-hero-wrapper :is(.mt-3) { - margin-top: 0.75rem; -} - .product-hero-wrapper :is(.mt-5) { margin-top: 1.25rem; } -.product-hero-wrapper :is(.mt-8) { - margin-top: 2rem; -} - .product-hero-wrapper :is(.mt-\[-256px\]) { margin-top: -256px; } @@ -635,14 +606,6 @@ video { height: 17rem; } -.product-hero-wrapper :is(.h-\[400px\]) { - height: 400px; -} - -.product-hero-wrapper :is(.h-full) { - height: 100%; -} - .product-hero-wrapper :is(.w-16) { width: 4rem; } @@ -655,10 +618,6 @@ video { width: 1.25rem; } -.product-hero-wrapper :is(.w-\[400px\]) { - width: 400px; -} - .product-hero-wrapper :is(.w-\[98\%\]) { width: 98%; } @@ -667,34 +626,10 @@ video { width: 100%; } -.product-hero-wrapper :is(.max-w-\[400px\]) { - max-width: 400px; -} - -.product-hero-wrapper :is(.shrink-0) { - flex-shrink: 0; -} - .product-hero-wrapper :is(.cursor-pointer) { cursor: pointer; } -.product-hero-wrapper :is(.snap-x) { - scroll-snap-type: x var(--tw-scroll-snap-strictness); -} - -.product-hero-wrapper :is(.scroll-pl-6) { - scroll-padding-left: 1.5rem; -} - -.product-hero-wrapper :is(.list-disc) { - list-style-type: disc; -} - -.product-hero-wrapper :is(.flex-row) { - flex-direction: row; -} - .product-hero-wrapper :is(.flex-col) { flex-direction: column; } @@ -719,27 +654,11 @@ video { justify-content: space-between; } -.product-hero-wrapper :is(.gap-2) { - gap: 0.5rem; -} - -.product-hero-wrapper :is(.gap-3) { - gap: 0.75rem; -} - .product-hero-wrapper :is(.gap-x-4) { -moz-column-gap: 1rem; column-gap: 1rem; } -.product-hero-wrapper :is(.overflow-auto) { - overflow: auto; -} - -.product-hero-wrapper :is(.overflow-hidden) { - overflow: hidden; -} - .product-hero-wrapper :is(.rounded-full) { border-radius: 9999px; } @@ -752,15 +671,6 @@ video { border-bottom-width: 1px; } -.product-hero-wrapper :is(.border-b-2) { - border-bottom-width: 2px; -} - -.product-hero-wrapper :is(.border-danaherpurple-500) { - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); -} - .product-hero-wrapper :is(.border-gray-300) { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); @@ -771,34 +681,11 @@ video { background-color: rgb(239 251 253 / var(--tw-bg-opacity)); } -.product-hero-wrapper :is(.bg-transparent) { - background-color: transparent; -} - .product-hero-wrapper :is(.bg-white) { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.product-hero-wrapper :is(.object-contain) { - -o-object-fit: contain; - object-fit: contain; -} - -.product-hero-wrapper :is(.object-cover) { - -o-object-fit: cover; - object-fit: cover; -} - -.product-hero-wrapper :is(.p-4) { - padding: 1rem; -} - -.product-hero-wrapper :is(.px-3) { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - .product-hero-wrapper :is(.px-4) { padding-left: 1rem; padding-right: 1rem; @@ -822,14 +709,6 @@ video { padding-top: 1.5rem; } -.product-hero-wrapper :is(.text-left) { - text-align: left; -} - -.product-hero-wrapper :is(.text-center) { - text-align: center; -} - .product-hero-wrapper :is(.text-base) { font-size: 1rem; line-height: 1.5rem; @@ -853,35 +732,14 @@ video { font-weight: 500; } -.product-hero-wrapper :is(.font-normal) { - font-weight: 200; -} - -.product-hero-wrapper :is(.font-semibold) { - font-weight: 700; -} - .product-hero-wrapper :is(.leading-4) { line-height: 1rem; } -.product-hero-wrapper :is(.leading-5) { - line-height: 1.25rem; -} - .product-hero-wrapper :is(.leading-6) { line-height: 1.5rem; } -.product-hero-wrapper :is(.leading-tight) { - line-height: 1.25; -} - -.product-hero-wrapper :is(.text-danaherpurple-500) { - --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); -} - .product-hero-wrapper :is(.text-gray-400) { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); @@ -892,11 +750,6 @@ video { color: rgb(55 65 81 / var(--tw-text-opacity)); } -.product-hero-wrapper :is(.text-gray-900) { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .product-hero-wrapper :is(.\!no-underline) { text-decoration-line: none !important; } @@ -907,133 +760,14 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.product-hero-wrapper :is(.shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .product-hero-wrapper :is(.shadow-sm) { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.product-hero-wrapper :is(.transition) { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.product-hero-wrapper :is(.duration-500) { - transition-duration: 500ms; -} - -.product-hero-wrapper :is(.duration-700) { - transition-duration: 700ms; -} - -.product-hero-wrapper :is(.hover\:border:hover) { - border-width: 1px; -} - -.product-hero-wrapper :is(.hover\:border-danaherpurple-500:hover) { - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); -} - -@media (min-width: 768px) { - .product-hero-wrapper :is(.md\:col-span-6) { - grid-column: span 6 / span 6; - } - - .product-hero-wrapper :is(.md\:flex-row) { - flex-direction: row; - } - - .product-hero-wrapper :is(.md\:gap-12) { - gap: 3rem; - } - - .product-hero-wrapper :is(.md\:shadow-lg) { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - } - - .product-hero-wrapper :is(.md\:shadow-none) { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - } -} - @media (min-width: 1024px) { - .product-hero-wrapper :is(.lg\:order-first) { - order: -9999; - } - - .product-hero-wrapper :is(.lg\:w-20) { - width: 5rem; - } - .product-hero-wrapper :is(.lg\:w-55) { width: 14rem; } - - .product-hero-wrapper :is(.lg\:flex-row) { - flex-direction: row; - } - - .product-hero-wrapper :is(.lg\:flex-col) { - flex-direction: column; - } - - .product-hero-wrapper :is(.lg\:gap-16) { - gap: 4rem; - } -} - -.product-hero-wrapper :is(.\[\&\>\*\.active\>img\]\:border-2>*.active>img) { - border-width: 2px; -} - -.product-hero-wrapper :is(.\[\&\>\*\.active\>img\]\:border-danaherpurple-500>*.active>img) { - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); -} - -.product-hero-wrapper :is(.\[\&\>\*\.active\>img\]\:opacity-80>*.active>img) { - opacity: 0.8; -} - -.product-hero-wrapper :is(.\[\&\>\*\.view-more\]\:h-\[75px\]>*.view-more) { - height: 75px; -} - -.product-hero-wrapper :is(.\[\&\>\*\.view-more\]\:w-\[75px\]>*.view-more) { - width: 75px; -} - -.product-hero-wrapper :is(.\[\&\>\*\.view-more\]\:cursor-pointer>*.view-more) { - cursor: pointer; -} - -.product-hero-wrapper :is(.\[\&\>\*\>img\]\:h-\[75px\]>*>img) { - height: 75px; -} - -.product-hero-wrapper :is(.\[\&\>\*\>img\]\:w-\[75px\]>*>img) { - width: 75px; -} - -.product-hero-wrapper :is(.\[\&\>\*\>img\]\:cursor-pointer>*>img) { - cursor: pointer; -} - -.product-hero-wrapper :is(.\[\&\>picture\]\:w-max>picture) { - width: -moz-max-content; - width: max-content; } \ No newline at end of file diff --git a/blocks/product-hero/product-hero.js b/blocks/product-hero/product-hero.js index 88236d87b..b29d1970e 100644 --- a/blocks/product-hero/product-hero.js +++ b/blocks/product-hero/product-hero.js @@ -37,36 +37,26 @@ function loadMore() { } function imageSlider(allImages, productName = 'product') { - const slideImage = createOptimizedS7Picture(allImages[0], `${productName} - image`, true); - slideImage.classList.add(...'w-[400px] h-[400px] max-w-[400px] mx-auto shadow-none md:shadow-lg object-contain transition duration-700'.split(' ')); - const slideContent = div({ class: 'image-content relative bg-white shadow-lg md:shadow-none' }, slideImage); - const verticalSlides = div({ class: 'w-full lg:w-20 flex flex-row lg:flex-col lg:order-first gap-2 overflow-auto bg-transparent scroll-pl-6 snap-x [&>picture]:w-max [&>*.view-more]:w-[75px] [&>*.view-more]:h-[75px] [&>*.view-more]:cursor-pointer [&>*>img]:w-[75px] [&>*>img]:h-[75px] [&>*>img]:cursor-pointer [&>*.active>img]:opacity-80 [&>*.active>img]:border-2 [&>*.active>img]:border-danaherpurple-500' }); + const slideContent = div({ class: 'image-content' }, createOptimizedS7Picture(allImages[0], `${productName} - image`, true)); + const verticalSlides = div(); allImages.map((image, index) => { const imageElement = createOptimizedS7Picture(image, `${productName} - image ${index + 1}`, false); let imageClass = (index === 0) ? 'active' : ''; if (index > 2) imageClass += ' hidden'; if (imageClass !== '') imageElement.className = imageClass.trim(); imageElement.addEventListener('click', showImage); - imageElement.classList.add(...'object-cover transition duration-500 hover:border hover:border-danaherpurple-500'.split(' ')); verticalSlides.append(imageElement); return image; }); if (allImages.length > 3) { - const showMore = div({ class: 'view-more flex flex-col leading-tight text-danaherpurple-500 text-sm font-semibold px-3 py-2 hover:border hover:border-danaherpurple-500 bg-white' }, 'View More'); + const showMore = div({ class: 'view-more' }, 'View More'); showMore.innerHTML += `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-4 h-4" viewBox="0 0 12 12"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/> </svg>`; showMore.addEventListener('click', loadMore); verticalSlides.append(showMore); } - return div( - { class: 'vertical-gallery-container shrink-0 order-first' }, - div( - { class: 'flex flex-col lg:flex-row gap-3 bg-transparent overflow-hidden' }, - slideContent, - verticalSlides, - ), - ); + return div({ class: 'vertical-gallery-container' }, div(slideContent, verticalSlides)); } function addBundleDetails(title, bundleDetails) { @@ -179,16 +169,16 @@ export default async function decorate(block) { document.title = response[0].Title ? response[0].Title : 'Danaher Product'; const allImages = response[0]?.raw.images; const verticalImageGallery = imageSlider(allImages, response[0]?.Title); - const defaultContent = div({ class: 'w-full h-full text-left' }); + const defaultContent = div(); defaultContent.innerHTML = response[0]?.raw.richdescription; defaultContent.prepend(span({ class: 'sku hidden' }, response[0]?.raw.productid)); - defaultContent.prepend(titleEl || h1({ class: 'title mt-3 mb-3 text-gray-900 mb-3' }, response[0]?.Title)); + defaultContent.prepend(titleEl || h1({ class: 'title' }, response[0]?.Title)); defaultContent.prepend(span({ class: 'categories hidden' }, response[0]?.raw.categories)); - defaultContent.prepend(span({ class: 'category-name text-sm font-normal leading-5 text-danaherpurple-500' }, response[0]?.raw?.defaultcategoryname ? response[0]?.raw?.defaultcategoryname : '')); + defaultContent.prepend(span({ class: 'category-name' }, response[0]?.raw?.defaultcategoryname ? response[0]?.raw?.defaultcategoryname : '')); const rfqEl = block.querySelector(':scope > div:nth-child(1)'); if (rfqEl && rfqEl.textContent.includes('Request for Quote')) { let rfqParent; - rfqEl.classList.add(...'btn-outline-trending-brand text-center text-lg rounded-full px-4 py-2 !no-underline'.split(' ')); + rfqEl.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-4 py-2 !no-underline'.split(' ')); if (response[0]?.raw?.objecttype === 'Product' || response[0]?.raw?.objecttype === 'Bundle') { rfqParent = p({ class: 'lg:w-55 pt-6 cursor-pointer' }, rfqEl); rfqParent.addEventListener('click', () => { addToQuote(response[0]); }); @@ -203,7 +193,7 @@ export default async function decorate(block) { infoDiv.prepend( p('For additional information'), a( - { class: 'border-b-2 border-danaherpurple-500', href: `${response[0]?.raw.externallink}?utm_source=dhls_website`, target: '_blank' }, + { href: `${response[0]?.raw.externallink}?utm_source=dhls_website`, target: '_blank' }, span({ class: 'ext-link' }), ), ); @@ -224,33 +214,14 @@ export default async function decorate(block) { defaultContent.append( div( - { class: 'basic-info flex justify-between mt-8' }, - div(p({ class: 'text-base font-bold' }, 'Brand'), p({ class: 'brand' }, response[0]?.raw.opco)), + { class: 'basic-info' }, + div(p('Brand'), p({ class: 'brand' }, response[0]?.raw.opco)), infoDiv, ), ); block.parentElement.classList.add(...'stretch'.split(' ')); block.innerHTML = ''; - block.classList.add('p-4'); - block.append( - div( - { class: 'product-hero-content flex flex-col md:flex-row lg:gap-16 md:gap-12 gap-2' }, - div({ class: 'hero-default-content md:col-span-6 w-full' }, defaultContent), - verticalImageGallery, - ), - ); - block.querySelectorAll('.hero-default-content > div h4').forEach((h4El) => { - h4El.classList.add('font-bold'); - }); - block.querySelectorAll('.hero-default-content > div ul').forEach((ulEl) => { - ulEl.classList.add(...'text-base list-disc ml-12 mt-3'.split(' ')); - }); - block.querySelectorAll('.hero-default-content > div p').forEach((pEl) => { - pEl.classList.add('text-base'); - }); - block.querySelectorAll('.hero-default-content > div ul li').forEach((liEl) => { - liEl.classList.add('mb-2.5'); - }); + block.append(div({ class: 'product-hero-content' }, div({ class: 'hero-default-content w-full' }, defaultContent), verticalImageGallery)); decorateModals(block); } -} +} \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 363321e55..ccb16ac35 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1013,17 +1013,6 @@ header { } } -body.productdetail > div.breadcrumb-wrapper { - height: 45px; - padding-top: 1.25rem; -} - -@media (min-width: 1024px) { - body.productdetail > div.breadcrumb-wrapper { - padding-top: 0px; - } -} - .topic main, .topichub main { margin-left: auto; margin-right: auto; @@ -1421,18 +1410,7 @@ main .top-border > div.columns-wrapper:first-child { text-align: center; } -.product-hero-content .hero-default-content { - min-height: 400px; -} - -@media (min-width: 1024px) { - .product-hero-content .hero-default-content { - min-height: 600px; - } -} - main .section.product-hero-container { - height: 1140px; --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); padding-left: 0.5rem; @@ -1441,12 +1419,261 @@ main .section.product-hero-container { padding-bottom: 8rem; } +.product-hero { + padding: 1rem; +} + +.product-hero .btn-outline-trending-brand { + text-align: center; +} + +.product-hero .product-hero-content { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +@media (min-width: 768px) { + .product-hero .product-hero-content { + flex-direction: row; + gap: 3rem; + } +} + @media (min-width: 1024px) { - main .section.product-hero-container { - height: 664px; + .product-hero .product-hero-content { + gap: 4rem; } } +@media (min-width: 768px) { + .product-hero .hero-default-content { + grid-column: span 6 / span 6; + } +} + +.columns.features-card-left > div > div.product-hero .hero-default-content > div > .card { + display: flex; + flex-direction: row; + padding-bottom: 1.5rem; +} + +.columns.features-card-left > div > div.product-hero .hero-default-content > div > div.card > .left-content { + padding-right: 0.75rem; +} + +.productdetail main .columns.columns-2-cols .product-hero .hero-default-content > div { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.product-hero .hero-default-content > div { + height: 100%; + width: 100%; + text-align: left; +} + +.product-hero .hero-default-content > div .category-name { + font-size: 0.875rem; + font-weight: 200; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.product-hero .hero-default-content > div h1.title { + margin-top: 0.75rem; + margin-bottom: 0.75rem; + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.product-hero .hero-default-content > div h4 { + font-weight: 700; +} + +.product-hero .hero-default-content > div ul, + .product-hero .hero-default-content > div p { + font-size: 1rem; + line-height: 1.5rem; +} + +.product-hero .hero-default-content > div ul { + margin-left: 3rem; + margin-top: 0.75rem; + list-style-type: disc; +} + +.product-hero .hero-default-content > div ul li { + margin-bottom: 0.625rem; +} + +.product-hero .hero-default-content > div .basic-info { + margin-top: 2rem; + display: flex; + justify-content: space-between; +} + +.product-hero .hero-default-content > div .basic-info div > p:nth-child(1) { + font-size: 1rem; + line-height: 1.5rem; + font-weight: 700; +} + +.product-hero .hero-default-content > div .basic-info a { + border-bottom-width: 2px; + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +.product-hero .vertical-gallery-container { + order: -9999; + flex-shrink: 0; +} + +.product-hero .vertical-gallery-container > div { + display: flex; + flex-direction: column; + gap: 0.75rem; + overflow: hidden; + background-color: transparent; +} + +@media (min-width: 1024px) { + .product-hero .vertical-gallery-container > div { + flex-direction: row; + } +} + +.product-hero .vertical-gallery-container > div div:nth-child(1) { + position: relative; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +@media (min-width: 768px) { + .product-hero .vertical-gallery-container > div div:nth-child(1) { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } +} + +.product-hero .vertical-gallery-container > div div:nth-child(1) img { + margin-left: auto; + margin-right: auto; + height: 400px; + width: 400px; + max-width: 400px; + -o-object-fit: contain; + object-fit: contain; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 700ms; +} + +@media (min-width: 768px) { + .product-hero .vertical-gallery-container > div div:nth-child(1) img { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } +} + +.product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) { + display: flex; + width: 100%; + scroll-snap-type: x var(--tw-scroll-snap-strictness); + scroll-padding-left: 1.5rem; + flex-direction: row; + gap: 0.5rem; + overflow: auto; + background-color: transparent; +} + +@media (min-width: 1024px) { + .product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) { + order: -9999; + width: 5rem; + flex-direction: column; + } +} + +.product-hero .vertical-gallery-container > div > div:not(:nth-child(1))>*.active>img { + border-width: 2px; + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); + opacity: 0.8; +} + +.product-hero .vertical-gallery-container > div > div:not(:nth-child(1))>*.view-more { + height: 75px; + width: 75px; + cursor: pointer; +} + +.product-hero .vertical-gallery-container > div > div:not(:nth-child(1))>*>img { + height: 75px; + width: 75px; + cursor: pointer; +} + +.product-hero .vertical-gallery-container > div > div:not(:nth-child(1))>picture { + width: -moz-max-content; + width: max-content; +} + +.product-hero .vertical-gallery-container .view-more { + display: flex; + flex-direction: column; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 700; + line-height: 1.25; + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.product-hero .vertical-gallery-container .view-more:hover { + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + +.product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) img { + -o-object-fit: cover; + object-fit: cover; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; +} + +.product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) img:hover { + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); +} + .category main .section { padding-top: 2rem; padding-bottom: 2rem; @@ -2162,6 +2389,11 @@ svg symbol path { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } +.\!text-base { + font-size: 1rem !important; + line-height: 1.5rem !important; +} + .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -2187,11 +2419,6 @@ svg symbol path { line-height: 1rem; } -.\!text-base { - font-size: 1rem !important; - line-height: 1.5rem !important; -} - .font-bold { font-weight: 700; } diff --git a/styles/tailwind.css b/styles/tailwind.css index 2f0c74133..62e11be55 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -206,10 +206,6 @@ @apply h-[52px] md:h-[80px] lg:h-[179px] bg-white print:hidden; } - body.productdetail > div.breadcrumb-wrapper { - @apply h-[45px] pt-5 lg:pt-0; - } - .topic main, .topichub main { @apply grid px-4 lg:px-0 max-w-7xl mx-auto lg:grid-cols-12; } @@ -377,12 +373,96 @@ @apply text-center; } - .product-hero-content .hero-default-content { - @apply min-h-[400px] lg:min-h-[600px]; + main .section.product-hero-container { + @apply bg-gray-50 px-2 pt-2 pb-32; + } + + .product-hero { + @apply p-4; } - main .section.product-hero-container { - @apply bg-gray-50 px-2 pt-2 pb-32 h-[1140px] lg:h-[664px]; + .product-hero .btn-outline-trending-brand { + @apply text-center; + } + + .product-hero .product-hero-content { + @apply flex flex-col md:flex-row lg:gap-16 md:gap-12 gap-2; + } + + .product-hero .hero-default-content { + @apply md:col-span-6; + } + + .product-hero .hero-default-content > div { + @apply w-full h-full text-left; + } + + .product-hero .hero-default-content > div .category-name { + @apply text-sm font-normal leading-5 text-danaherpurple-500; + } + + .product-hero .hero-default-content > div h1.title { + @apply mt-3 mb-3 text-gray-900 mb-3; + } + + .product-hero .hero-default-content > div h4 { + @apply font-bold; + } + + .product-hero .hero-default-content > div ul, + .product-hero .hero-default-content > div p { + @apply text-base; + } + + .product-hero .hero-default-content > div ul { + @apply list-disc ml-12 mt-3; + } + + .product-hero .hero-default-content > div ul li { + @apply mb-2.5; + } + + .product-hero .hero-default-content > div .basic-info { + @apply flex justify-between mt-8; + } + + .product-hero .hero-default-content > div .basic-info div > p:nth-child(1) { + @apply text-base font-bold; + } + + .product-hero .hero-default-content > div .basic-info a { + @apply border-b-2 border-danaherpurple-500; + } + + .product-hero .vertical-gallery-container { + @apply shrink-0 order-first; + } + + .product-hero .vertical-gallery-container > div { + @apply flex flex-col lg:flex-row gap-3 bg-transparent overflow-hidden; + } + + .product-hero .vertical-gallery-container > div div:nth-child(1) { + @apply relative bg-white shadow-lg md:shadow-none; + } + + .product-hero .vertical-gallery-container > div div:nth-child(1) img { + @apply w-[400px] h-[400px] max-w-[400px] mx-auto shadow-none md:shadow-lg object-contain transition duration-700; + } + + .product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) { + @apply w-full lg:w-20 flex flex-row lg:flex-col lg:order-first gap-2 overflow-auto bg-transparent scroll-pl-6 snap-x [&>picture]:w-max + [&>*.view-more]:w-[75px] [&>*.view-more]:h-[75px] [&>*.view-more]:cursor-pointer + [&>*>img]:w-[75px] [&>*>img]:h-[75px] [&>*>img]:cursor-pointer + [&>*.active>img]:opacity-80 [&>*.active>img]:border-2 [&>*.active>img]:border-danaherpurple-500; + } + + .product-hero .vertical-gallery-container .view-more { + @apply flex flex-col leading-tight text-danaherpurple-500 text-sm font-semibold px-3 py-2 hover:border hover:border-danaherpurple-500 bg-white; + } + + .product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) img { + @apply object-cover transition duration-500 hover:border hover:border-danaherpurple-500; } .category main .section { From aec6e3deb53c0407e159488ca36dade54e74e493 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 16 May 2024 10:39:31 +0530 Subject: [PATCH 73/88] fixed lint issues --- blocks/product-hero/product-hero.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/product-hero/product-hero.js b/blocks/product-hero/product-hero.js index b29d1970e..7c1778a41 100644 --- a/blocks/product-hero/product-hero.js +++ b/blocks/product-hero/product-hero.js @@ -224,4 +224,4 @@ export default async function decorate(block) { block.append(div({ class: 'product-hero-content' }, div({ class: 'hero-default-content w-full' }, defaultContent), verticalImageGallery)); decorateModals(block); } -} \ No newline at end of file +} From d86c6d1e6e0d9b7746587f6f3973125a5a4f5aaf Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 16 May 2024 11:06:58 +0530 Subject: [PATCH 74/88] footer icon fixed --- blocks/footer/footer.js | 2 +- fragments/footer.html | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 6f34caa6b..36cb919e9 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -26,7 +26,7 @@ function generateStickyFooter(stickyFooter) { stickyFooter[0].remove(); accessibeBtn.addEventListener('click', loadAccessibe); stickyFooterClone.append(accessibeBtn); - decorateIcons(stickyFooterClone); + decorateIcons(stickyFooterClone.querySelector('button.accessibility')?.firstElementChild); document.querySelector('footer').appendChild(stickyFooterClone); } diff --git a/fragments/footer.html b/fragments/footer.html index faae1142a..d94e47d65 100644 --- a/fragments/footer.html +++ b/fragments/footer.html @@ -75,8 +75,9 @@ </div> <button class="accessibility" aria-label="users" data-acsb-custom-trigger="true"> <span class="icon icon-accessibe block w-5 md:w-6 h-5 md:h-6"> - <svg xmlns="http://www.w3.org/2000/svg"> - <use href="#icons-sprite-accessibe"></use> + <svg viewBox="0 0 22 27" xmlns="http://www.w3.org/2000/svg"> + <path d="M10.6019 4.99946C11.7063 4.99946 12.6016 4.10415 12.6016 2.99973C12.6016 1.89531 11.7063 1 10.6019 1C9.49748 1 8.60217 1.89531 8.60217 2.99973C8.60217 4.10415 9.49748 4.99946 10.6019 4.99946Z" stroke="white" stroke-width="2" stroke-linejoin="round"/> + <path d="M8.01355 13.9217C8.15836 13.0188 8.22333 12.1455 7.98878 11.5421C7.78891 11.0229 7.35395 10.7327 6.82869 10.5345L2.20211 9.03747C1.60197 8.83761 1.04147 8.5023 1.00238 7.84049C0.952275 6.99039 1.70217 6.44035 2.45262 6.64077C2.45262 6.64077 6.85236 8.19783 10.6024 8.19783C14.3525 8.19783 18.7021 6.64792 18.7021 6.64792C19.6023 6.39796 20.2019 7.09775 20.2019 7.83719C20.2019 8.57663 19.6519 8.79741 19.0022 9.03417L14.6024 10.6298C14.2027 10.7795 13.5525 11.0796 13.3025 11.5388C13.0024 12.0762 13.0525 13.0155 13.1973 13.9184L13.4924 15.4001L15.3628 23.595C15.5026 24.2524 15.0478 24.8668 14.3927 24.9819C13.7375 25.097 13.2023 24.6499 13.0079 24.014L11.1299 18.2174C11.0396 17.9394 10.9597 17.658 10.8898 17.3739L10.6019 16.2001L10.337 17.2825C10.2528 17.6277 10.1564 17.9691 10.0469 18.3066L8.20185 24.009C8.00199 24.6516 7.47673 25.0964 6.82208 24.9819C6.16688 24.8674 5.70219 24.2023 5.84919 23.595L7.71844 15.4034L8.01355 13.9217Z" stroke="white" stroke-width="2" stroke-linejoin="round"/> </svg> </span> </button> From 3af7d1b1d1fbdfe9bba8976cd69a2f0ec59f8a54 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 16 May 2024 11:09:14 +0530 Subject: [PATCH 75/88] updated icon --- fragments/footer.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fragments/footer.html b/fragments/footer.html index d94e47d65..258f6b006 100644 --- a/fragments/footer.html +++ b/fragments/footer.html @@ -75,7 +75,7 @@ </div> <button class="accessibility" aria-label="users" data-acsb-custom-trigger="true"> <span class="icon icon-accessibe block w-5 md:w-6 h-5 md:h-6"> - <svg viewBox="0 0 22 27" xmlns="http://www.w3.org/2000/svg"> + <svg viewBox="0 0 22 27" xmlns="http://www.w3.org/2000/svg" fill="none"> <path d="M10.6019 4.99946C11.7063 4.99946 12.6016 4.10415 12.6016 2.99973C12.6016 1.89531 11.7063 1 10.6019 1C9.49748 1 8.60217 1.89531 8.60217 2.99973C8.60217 4.10415 9.49748 4.99946 10.6019 4.99946Z" stroke="white" stroke-width="2" stroke-linejoin="round"/> <path d="M8.01355 13.9217C8.15836 13.0188 8.22333 12.1455 7.98878 11.5421C7.78891 11.0229 7.35395 10.7327 6.82869 10.5345L2.20211 9.03747C1.60197 8.83761 1.04147 8.5023 1.00238 7.84049C0.952275 6.99039 1.70217 6.44035 2.45262 6.64077C2.45262 6.64077 6.85236 8.19783 10.6024 8.19783C14.3525 8.19783 18.7021 6.64792 18.7021 6.64792C19.6023 6.39796 20.2019 7.09775 20.2019 7.83719C20.2019 8.57663 19.6519 8.79741 19.0022 9.03417L14.6024 10.6298C14.2027 10.7795 13.5525 11.0796 13.3025 11.5388C13.0024 12.0762 13.0525 13.0155 13.1973 13.9184L13.4924 15.4001L15.3628 23.595C15.5026 24.2524 15.0478 24.8668 14.3927 24.9819C13.7375 25.097 13.2023 24.6499 13.0079 24.014L11.1299 18.2174C11.0396 17.9394 10.9597 17.658 10.8898 17.3739L10.6019 16.2001L10.337 17.2825C10.2528 17.6277 10.1564 17.9691 10.0469 18.3066L8.20185 24.009C8.00199 24.6516 7.47673 25.0964 6.82208 24.9819C6.16688 24.8674 5.70219 24.2023 5.84919 23.595L7.71844 15.4034L8.01355 13.9217Z" stroke="white" stroke-width="2" stroke-linejoin="round"/> </svg> From 462d54378b82ae588a3d87c5360db17d6a5fe980 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 16 May 2024 14:07:58 +0530 Subject: [PATCH 76/88] Updated library heading --- blocks/card-list/card-list.css | 5 ----- blocks/card-list/libraryCard.js | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index 778bc3971..d8565186a 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -885,11 +885,6 @@ video { line-height: 1.25rem; } -.card-list-wrapper :is(.text-xl) { - font-size: 1.25rem; - line-height: 1.75rem; -} - .card-list-wrapper :is(.\!font-semibold) { font-weight: 700 !important; } diff --git a/blocks/card-list/libraryCard.js b/blocks/card-list/libraryCard.js index 92f80aa26..8d2ce3604 100644 --- a/blocks/card-list/libraryCard.js +++ b/blocks/card-list/libraryCard.js @@ -20,7 +20,7 @@ export default function createCard(article, firstCard = false) { h2( { class: - 'text-xl text-black font-medium mb-4 mt-4 line-clamp-3 break-words !h-20', + '!text-xl text-black font-medium mb-4 mt-4 line-clamp-3 break-words !h-20', }, cardTitle, ), From 84c6f25eb80afe05e42ec077c178d4d8ee618525 Mon Sep 17 00:00:00 2001 From: jckautzmann <jkautzma@adobe.com> Date: Thu, 16 May 2024 12:07:43 +0200 Subject: [PATCH 77/88] [UE] Implement UE support for "topics" pages (#1110) * [UE] Implement UE support for "topics" pages - add support for page metadata, accordion, takeaway and call-to-action blocks --------- Co-authored-by: Dirk Rudolph <drudolph@adobe.com> --- component-definition.json | 60 ++++++++++++++++ component-filters.json | 14 +++- component-models.json | 145 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 216 insertions(+), 3 deletions(-) diff --git a/component-definition.json b/component-definition.json index ba5e0136a..46e7fbc25 100644 --- a/component-definition.json +++ b/component-definition.json @@ -105,6 +105,66 @@ } } } + }, + { + "title": "Takeway", + "id": "takeway", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/block/v1/block", + "template": { + "name": "Takeway", + "model": "takeway" + } + } + } + } + }, + { + "title": "Call to Action", + "id": "call-to-action", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/block/v1/block", + "template": { + "name": "Call to Action", + "model": "call-to-action" + } + } + } + } + }, + { + "title": "Accordion", + "id": "accordion", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/block/v1/block", + "template": { + "name": "Accordion", + "filter": "accordion" + } + } + } + } + }, + { + "title": "Accordion Item", + "id": "accordion-item", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/block/v1/block/item", + "template": { + "name": "Accordion Item", + "model": "accordion-item" + } + } + } + } } ] } diff --git a/component-filters.json b/component-filters.json index 34e501c85..569513211 100644 --- a/component-filters.json +++ b/component-filters.json @@ -26,7 +26,15 @@ "image", "button", "title", - "columns" + "columns", + "takeway", + "call-to-action", + "accordion" ] - } -] + }, + { + "id": "accordion", + "components": [ + "accordion-item" + ] + }] diff --git a/component-models.json b/component-models.json index 0dea0a3a0..310522dcc 100644 --- a/component-models.json +++ b/component-models.json @@ -1,4 +1,30 @@ [ + { + "id": "page-metadata", + "fields": [ + { + "component": "container", + "label": "Fieldset", + "fields": [ + { + "component": "date-time", + "name": "creationDate", + "label": "Creation Date" + }, + { + "component": "date-time", + "name": "updateDate", + "label": "Update Date" + }, + { + "component": "text", + "name": "FullCategory", + "label": "FullCategory" + } + ] + } + ] + }, { "id": "title", "fields": [ @@ -152,5 +178,124 @@ "valueType": "string" } ] + }, + { + "id": "takeway", + "fields": [ + { + "component": "richtext", + "name": "text", + "value": "", + "label": "Text", + "valueType": "string" + } + ] + }, + { + "id": "call-to-action", + "fields": [ + { + "component": "text", + "valueType": "string", + "name": "content_heading", + "value": "", + "label": "Text" + }, + { + "component": "select", + "name": "content_headingType", + "value": "h1", + "label": "Type", + "valueType": "string", + "options": [ + { + "name": "h2", + "value": "h2" + }, + { + "name": "h3", + "value": "h3" + }, + { + "name": "h4", + "value": "h4" + }, + { + "name": "h5", + "value": "h5" + }, + { + "name": "h6", + "value": "h6" + } + ] + }, + { + "component": "aem-content", + "valueType": "string", + "name": "content_link", + "value": "", + "label": "Link" + }, + { + "component": "text", + "valueType": "string", + "name": "content_linkText", + "value": "", + "label": "Text" + } + ] + }, + { + "id": "accordion-item", + "fields": [ + { + "component": "text", + "valueType": "string", + "name": "content_heading", + "value": "", + "label": "Text" + }, + { + "component": "select", + "name": "content_headingType", + "value": "h1", + "label": "Type", + "valueType": "string", + "options": [ + { + "name": "h1", + "value": "h1" + }, + { + "name": "h2", + "value": "h2" + }, + { + "name": "h3", + "value": "h3" + }, + { + "name": "h4", + "value": "h4" + }, + { + "name": "h5", + "value": "h5" + }, + { + "name": "h6", + "value": "h6" + } + ] + }, + { + "component": "richtext", + "valueType": "string", + "name": "content_text", + "value": "", + "label": "Text" + } + ] } ] From 63eb0491f3a72178285dd68ca20f02951435e97b Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 16 May 2024 16:41:55 +0530 Subject: [PATCH 78/88] Cleaned up all build CSS --- blocks/accordion/accordion.css | 662 ++---------- blocks/articles-list/articles-list.css | 602 +---------- blocks/banner/banner.css | 576 +---------- blocks/blog-hero/blog-hero.css | 626 +----------- blocks/breadcrumb/breadcrumb.css | 590 +---------- blocks/call-to-action/call-to-action.css | 536 ---------- blocks/card-list/card-list.css | 752 ++------------ blocks/cards/cards.css | 672 ++----------- blocks/carousel/carousel.css | 536 ---------- blocks/category-family/category-family.css | 820 +++------------ blocks/columns/columns.css | 536 ---------- blocks/download/download.css | 616 +----------- blocks/embed/embed.css | 560 +---------- blocks/footer/footer.css | 536 ---------- blocks/header/header.css | 948 ++++-------------- blocks/hero/hero.css | 656 ++---------- blocks/logo-clouds/logo-clouds.css | 620 +----------- blocks/marketo-form/marketo-form.css | 606 +---------- blocks/mini-teasers/mini-teasers.css | 602 +---------- blocks/page-jump-menu/page-jump-menu.css | 606 +---------- blocks/page-tabs/page-tabs.css | 604 +---------- blocks/popular-articles/popular-articles.css | 538 +--------- blocks/product-card/product-card.css | 654 ++---------- .../product-category-list.css | 686 ++----------- blocks/product-category/product-category.css | 658 ++---------- .../product-citations/product-citations.css | 562 +---------- blocks/product-hero/product-hero.css | 536 ---------- blocks/product-menu/product-menu.css | 606 +---------- blocks/product-overview/product-overview.css | 536 ---------- blocks/product-parts/product-parts.css | 604 +---------- .../product-recommendations.css | 696 ++----------- .../product-specifications.css | 602 +---------- blocks/recent-articles/recent-articles.css | 622 +----------- blocks/related-articles/related-articles.css | 584 +---------- blocks/side-nav/side-nav.css | 586 +---------- blocks/social-feeds/social-feeds.css | 538 +--------- blocks/social-media/social-media.css | 566 +---------- blocks/stats/stats.css | 576 +---------- build-css.js | 2 +- styles/proxy-tailwind.css | 2 + styles/styles.css | 114 +++ 41 files changed, 1639 insertions(+), 21891 deletions(-) create mode 100644 styles/proxy-tailwind.css diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index 8cddf2750..6ac7557af 100644 --- a/blocks/accordion/accordion.css +++ b/blocks/accordion/accordion.css @@ -1,810 +1,274 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .eyebrow { color: #4000A5; font-size: 1.125rem; font-weight: 500; - line-height: 1.75rem; + line-height: 1.75rem } .accordion-wrapper :is(.absolute) { - position: absolute; + position: absolute } .accordion-wrapper :is(.relative) { - position: relative; + position: relative } .accordion-wrapper :is(.right-0) { - right: 0px; + right: 0px } .accordion-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .accordion-wrapper :is(.my-0) { margin-top: 0px; - margin-bottom: 0px; + margin-bottom: 0px } .accordion-wrapper :is(.mr-12) { - margin-right: 3rem; + margin-right: 3rem } .accordion-wrapper :is(.block) { - display: block; + display: block } .accordion-wrapper :is(.flex) { - display: flex; + display: flex } .accordion-wrapper :is(.grid) { - display: grid; + display: grid } .accordion-wrapper :is(.hidden) { - display: none; + display: none } .accordion-wrapper :is(.h-6) { - height: 1.5rem; + height: 1.5rem } .accordion-wrapper :is(.h-full) { - height: 100%; + height: 100% } .accordion-wrapper :is(.w-6) { - width: 1.5rem; + width: 1.5rem } .accordion-wrapper :is(.w-full) { - width: 100%; + width: 100% } .accordion-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .accordion-wrapper :is(.rotate-0) { --tw-rotate: 0deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .accordion-wrapper :is(.transform) { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .accordion-wrapper :is(.cursor-pointer) { - cursor: pointer; + cursor: pointer } .accordion-wrapper :is(.grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .accordion-wrapper :is(.grid-rows-\[0fr\]) { - grid-template-rows: 0fr; + grid-template-rows: 0fr } .accordion-wrapper :is(.items-center) { - align-items: center; + align-items: center } .accordion-wrapper :is(.justify-between) { - justify-content: space-between; + justify-content: space-between } .accordion-wrapper :is(.gap-16) { - gap: 4rem; + gap: 4rem } .accordion-wrapper :is(.divide-y > :not([hidden]) ~ :not([hidden])) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) } .accordion-wrapper :is(.divide-gray-900\/10 > :not([hidden]) ~ :not([hidden])) { - border-color: rgb(17 24 39 / 0.1); + border-color: rgb(17 24 39 / 0.1) } .accordion-wrapper :is(.overflow-hidden) { - overflow: hidden; + overflow: hidden } .accordion-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .accordion-wrapper :is(.fill-current) { - fill: currentColor; + fill: currentColor } .accordion-wrapper :is(.py-2) { padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } .accordion-wrapper :is(.pt-4) { - padding-top: 1rem; + padding-top: 1rem } .accordion-wrapper :is(.text-left) { - text-align: left; + text-align: left } .accordion-wrapper :is(.align-middle) { - vertical-align: middle; + vertical-align: middle } .accordion-wrapper :is(.\!text-xl) { font-size: 1.25rem !important; - line-height: 1.75rem !important; + line-height: 1.75rem !important } .accordion-wrapper :is(.text-base) { font-size: 1rem; - line-height: 1.5rem; + line-height: 1.5rem } .accordion-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .accordion-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .accordion-wrapper :is(.font-medium) { - font-weight: 500; + font-weight: 500 } .accordion-wrapper :is(.font-semibold) { - font-weight: 700; + font-weight: 700 } .accordion-wrapper :is(.leading-7) { - line-height: 1.75rem; + line-height: 1.75rem } .accordion-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); + color: rgb(117 35 255 / var(--tw-text-opacity)) } .accordion-wrapper :is(.text-gray-400) { --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); + color: rgb(156 163 175 / var(--tw-text-opacity)) } .accordion-wrapper :is(.\!no-underline) { - text-decoration-line: none !important; + text-decoration-line: none !important } .accordion-wrapper :is(.opacity-0) { - opacity: 0; + opacity: 0 } .accordion-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .accordion-wrapper :is(.transition-all) { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .accordion-wrapper :is(.duration-300) { - transition-duration: 300ms; + transition-duration: 300ms } .accordion-wrapper :is(.ease-in-out) { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) } .accordion-wrapper :is(.peer:checked ~ .peer-checked\:grid-rows-\[1fr\]) { - grid-template-rows: 1fr; + grid-template-rows: 1fr } .accordion-wrapper :is(.peer:checked ~ .peer-checked\:py-2) { padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } .accordion-wrapper :is(.peer:checked ~ .peer-checked\:opacity-100) { - opacity: 1; + opacity: 1 } .accordion-wrapper :is(.peer ~ .peer-\[\&_span\.minus\]\:rotate-90 span.minus) { --tw-rotate: 90deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .accordion-wrapper :is(.peer ~ .peer-\[\&_span\.minus\]\:opacity-0 span.minus) { - opacity: 0; + opacity: 0 } .accordion-wrapper :is(.peer ~ .peer-\[\&_span\.plus\]\:opacity-100 span.plus) { - opacity: 1; + opacity: 1 } @media (min-width: 1024px) { .accordion-wrapper :is(.lg\:block) { - display: block; + display: block } .accordion-wrapper :is(.lg\:grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } .accordion-wrapper :is(.lg\:pl-44) { - padding-left: 11rem; + padding-left: 11rem } .accordion-wrapper :is(.lg\:text-center) { - text-align: center; + text-align: center } } .accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.minus\]\:rotate-180 span.minus) { --tw-rotate: 180deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.minus\]\:opacity-100 span.minus) { - opacity: 1; + opacity: 1 } .accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.plus\]\:rotate-45 span.plus) { --tw-rotate: 45deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.plus\]\:opacity-0 span.plus) { - opacity: 0; + opacity: 0 } .accordion-wrapper :is(.\[\&_svg\>use\]\:stroke-black svg>use) { - stroke: #000; + stroke: #000 } \ No newline at end of file diff --git a/blocks/articles-list/articles-list.css b/blocks/articles-list/articles-list.css index 9f8a525da..fbb3e0b71 100644 --- a/blocks/articles-list/articles-list.css +++ b/blocks/articles-list/articles-list.css @@ -1,690 +1,154 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .container { - width: 100%; + width: 100% } @media (min-width: 640px) { .container { - max-width: 640px; + max-width: 640px } } @media (min-width: 768px) { .container { - max-width: 768px; + max-width: 768px } } @media (min-width: 1024px) { .container { - max-width: 1024px; + max-width: 1024px } } @media (min-width: 1280px) { .container { - max-width: 1280px; + max-width: 1280px } } @media (min-width: 1536px) { .container { - max-width: 1536px; + max-width: 1536px } } .articles-list-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .articles-list-wrapper :is(.mt-4) { - margin-top: 1rem; + margin-top: 1rem } .articles-list-wrapper :is(.\!block) { - display: block !important; + display: block !important } .articles-list-wrapper :is(.block) { - display: block; + display: block } .articles-list-wrapper :is(.flex) { - display: flex; + display: flex } .articles-list-wrapper :is(.grid) { - display: grid; + display: grid } .articles-list-wrapper :is(.w-full) { - width: 100%; + width: 100% } .articles-list-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .articles-list-wrapper :is(.grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .articles-list-wrapper :is(.items-center) { - align-items: center; + align-items: center } .articles-list-wrapper :is(.justify-between) { - justify-content: space-between; + justify-content: space-between } .articles-list-wrapper :is(.justify-items-center) { - justify-items: center; + justify-items: center } .articles-list-wrapper :is(.gap-6) { - gap: 1.5rem; + gap: 1.5rem } .articles-list-wrapper :is(.space-y-6 > :not([hidden]) ~ :not([hidden])) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)) } .articles-list-wrapper :is(.border-t) { - border-top-width: 1px; + border-top-width: 1px } .articles-list-wrapper :is(.border-solid) { - border-style: solid; + border-style: solid } .articles-list-wrapper :is(.border-black) { --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-color: rgb(0 0 0 / var(--tw-border-opacity)) } .articles-list-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .articles-list-wrapper :is(.px-3) { padding-left: 0.75rem; - padding-right: 0.75rem; + padding-right: 0.75rem } .articles-list-wrapper :is(.pt-4) { - padding-top: 1rem; + padding-top: 1rem } .articles-list-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .articles-list-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .articles-list-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); + color: rgb(117 35 255 / var(--tw-text-opacity)) } .articles-list-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } @media (min-width: 640px) { .articles-list-wrapper :is(.sm\:grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .articles-list-wrapper :is(.sm\:px-0) { padding-left: 0px; - padding-right: 0px; + padding-right: 0px } } @media (min-width: 1024px) { .articles-list-wrapper :is(.lg\:grid-cols-3) { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)) } } \ No newline at end of file diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css index a73293d96..2876c72c9 100644 --- a/blocks/banner/banner.css +++ b/blocks/banner/banner.css @@ -1,624 +1,88 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .banner :is(.relative) { - position: relative; + position: relative } .banner :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .banner :is(.block) { - display: block; + display: block } .banner :is(.flex) { - display: flex; + display: flex } .banner :is(.h-max) { height: -moz-max-content; - height: max-content; + height: max-content } .banner :is(.min-h-\[13rem\]) { - min-height: 13rem; + min-height: 13rem } .banner :is(.w-full) { - width: 100%; + width: 100% } .banner :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .banner :is(.items-center) { - align-items: center; + align-items: center } .banner :is(.justify-start) { - justify-content: flex-start; + justify-content: flex-start } .banner :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .banner :is(.p-4) { - padding: 1rem; + padding: 1rem } .banner :is(.px-6) { padding-left: 1.5rem; - padding-right: 1.5rem; + padding-right: 1.5rem } .banner :is(.text-4xl) { font-size: 2.25rem; - line-height: 2.5rem; + line-height: 2.5rem } .banner :is(.text-lg) { font-size: 1.125rem; - line-height: 1.75rem; + line-height: 1.75rem } .banner :is(.font-extrabold) { - font-weight: 800; + font-weight: 800 } .banner :is(.font-normal) { - font-weight: 200; + font-weight: 200 } .banner :is(.tracking-tight) { - letter-spacing: -0.025em; + letter-spacing: -0.025em } .banner :is(.text-white) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)) } @media (min-width: 768px) { .banner :is(.md\:w-3\/4) { - width: 75%; + width: 75% } } \ No newline at end of file diff --git a/blocks/blog-hero/blog-hero.css b/blocks/blog-hero/blog-hero.css index d5485cbbc..87f8000ed 100644 --- a/blocks/blog-hero/blog-hero.css +++ b/blocks/blog-hero/blog-hero.css @@ -1,734 +1,198 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .blog-hero-wrapper :is(.col-span-1) { - grid-column: span 1 / span 1; + grid-column: span 1 / span 1 } .blog-hero-wrapper :is(.col-span-2) { - grid-column: span 2 / span 2; + grid-column: span 2 / span 2 } .blog-hero-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .blog-hero-wrapper :is(.my-2) { margin-top: 0.5rem; - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .blog-hero-wrapper :is(.my-4) { margin-top: 1rem; - margin-bottom: 1rem; + margin-bottom: 1rem } .blog-hero-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .blog-hero-wrapper :is(.ml-2) { - margin-left: 0.5rem; + margin-left: 0.5rem } .blog-hero-wrapper :is(.ml-4) { - margin-left: 1rem; + margin-left: 1rem } .blog-hero-wrapper :is(.mr-4) { - margin-right: 1rem; + margin-right: 1rem } .blog-hero-wrapper :is(.mr-7) { - margin-right: 1.75rem; + margin-right: 1.75rem } .blog-hero-wrapper :is(.mt-4) { - margin-top: 1rem; + margin-top: 1rem } .blog-hero-wrapper :is(.mt-8) { - margin-top: 2rem; + margin-top: 2rem } .blog-hero-wrapper :is(.block) { - display: block; + display: block } .blog-hero-wrapper :is(.flex) { - display: flex; + display: flex } .blog-hero-wrapper :is(.grid) { - display: grid; + display: grid } .blog-hero-wrapper :is(.hidden) { - display: none; + display: none } .blog-hero-wrapper :is(.h-16) { - height: 4rem; + height: 4rem } .blog-hero-wrapper :is(.w-16) { - width: 4rem; + width: 4rem } .blog-hero-wrapper :is(.w-full) { - width: 100%; + width: 100% } .blog-hero-wrapper :is(.w-max) { width: -moz-max-content; - width: max-content; + width: max-content } .blog-hero-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .blog-hero-wrapper :is(.grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } .blog-hero-wrapper :is(.items-center) { - align-items: center; + align-items: center } .blog-hero-wrapper :is(.justify-start) { - justify-content: flex-start; + justify-content: flex-start } .blog-hero-wrapper :is(.justify-end) { - justify-content: flex-end; + justify-content: flex-end } .blog-hero-wrapper :is(.gap-x-20) { -moz-column-gap: 5rem; - column-gap: 5rem; + column-gap: 5rem } .blog-hero-wrapper :is(.space-y-1 > :not([hidden]) ~ :not([hidden])) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)) } .blog-hero-wrapper :is(.rounded-full) { - border-radius: 9999px; + border-radius: 9999px } .blog-hero-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .blog-hero-wrapper :is(.px-2) { padding-left: 0.5rem; - padding-right: 0.5rem; + padding-right: 0.5rem } .blog-hero-wrapper :is(.pl-1) { - padding-left: 0.25rem; + padding-left: 0.25rem } .blog-hero-wrapper :is(.text-lg) { font-size: 1.125rem; - line-height: 1.75rem; + line-height: 1.75rem } .blog-hero-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .blog-hero-wrapper :is(.text-xl) { font-size: 1.25rem; - line-height: 1.75rem; + line-height: 1.75rem } .blog-hero-wrapper :is(.font-medium) { - font-weight: 500; + font-weight: 500 } .blog-hero-wrapper :is(.leading-6) { - line-height: 1.5rem; + line-height: 1.5rem } .blog-hero-wrapper :is(.leading-8) { - line-height: 2rem; + line-height: 2rem } .blog-hero-wrapper :is(.text-danaherblack-500) { --tw-text-opacity: 1; - color: rgb(51 51 51 / var(--tw-text-opacity)); + color: rgb(51 51 51 / var(--tw-text-opacity)) } .blog-hero-wrapper :is(.text-danahergray-500) { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity)) } .blog-hero-wrapper :is(.text-danaherpurple-800) { --tw-text-opacity: 1; - color: rgb(64 0 165 / var(--tw-text-opacity)); + color: rgb(64 0 165 / var(--tw-text-opacity)) } .blog-hero-wrapper :is(.text-gray-500) { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity)) } .blog-hero-wrapper :is(.text-gray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } @media (min-width: 1024px) { .blog-hero-wrapper :is(.lg\:h-20) { - height: 5rem; + height: 5rem } .blog-hero-wrapper :is(.lg\:w-20) { - width: 5rem; + width: 5rem } .blog-hero-wrapper :is(.lg\:grid-cols-4) { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)) } } \ No newline at end of file diff --git a/blocks/breadcrumb/breadcrumb.css b/blocks/breadcrumb/breadcrumb.css index 2558607e9..77705712c 100644 --- a/blocks/breadcrumb/breadcrumb.css +++ b/blocks/breadcrumb/breadcrumb.css @@ -1,659 +1,123 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .breadcrumb-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .breadcrumb-wrapper :is(.block) { - display: block; + display: block } .breadcrumb-wrapper :is(.flex) { - display: flex; + display: flex } .breadcrumb-wrapper :is(.h-5) { - height: 1.25rem; + height: 1.25rem } .breadcrumb-wrapper :is(.h-5\/6) { - height: 83.333333%; + height: 83.333333% } .breadcrumb-wrapper :is(.w-5) { - width: 1.25rem; + width: 1.25rem } .breadcrumb-wrapper :is(.w-6) { - width: 1.5rem; + width: 1.5rem } .breadcrumb-wrapper :is(.w-full) { - width: 100%; + width: 100% } .breadcrumb-wrapper :is(.max-w-screen-xl) { - max-width: 1280px; + max-width: 1280px } .breadcrumb-wrapper :is(.flex-shrink-0) { - flex-shrink: 0; + flex-shrink: 0 } .breadcrumb-wrapper :is(.items-center) { - align-items: center; + align-items: center } .breadcrumb-wrapper :is(.gap-4) { - gap: 1rem; + gap: 1rem } .breadcrumb-wrapper :is(.gap-x-3) { -moz-column-gap: 0.75rem; - column-gap: 0.75rem; + column-gap: 0.75rem } .breadcrumb-wrapper :is(.overflow-x-auto) { - overflow-x: auto; + overflow-x: auto } .breadcrumb-wrapper :is(.whitespace-nowrap) { - white-space: nowrap; + white-space: nowrap } .breadcrumb-wrapper :is(.border-b) { - border-bottom-width: 1px; + border-bottom-width: 1px } .breadcrumb-wrapper :is(.border-gray-200) { --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); + border-color: rgb(229 231 235 / var(--tw-border-opacity)) } .breadcrumb-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .breadcrumb-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .breadcrumb-wrapper :is(.px-4) { padding-left: 1rem; - padding-right: 1rem; + padding-right: 1rem } .breadcrumb-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .breadcrumb-wrapper :is(.font-medium) { - font-weight: 500; + font-weight: 500 } .breadcrumb-wrapper :is(.text-gray-300) { --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); + color: rgb(209 213 219 / var(--tw-text-opacity)) } .breadcrumb-wrapper :is(.text-gray-500) { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity)) } .breadcrumb-wrapper :is(.hover\:text-gray-700:hover) { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)) } @media (min-width: 640px) { .breadcrumb-wrapper :is(.sm\:px-6) { padding-left: 1.5rem; - padding-right: 1.5rem; + padding-right: 1.5rem } } @media (min-width: 1024px) { .breadcrumb-wrapper :is(.lg\:px-7) { padding-left: 1.75rem; - padding-right: 1.75rem; + padding-right: 1.75rem } } \ No newline at end of file diff --git a/blocks/call-to-action/call-to-action.css b/blocks/call-to-action/call-to-action.css index 4a0cd37d6..95f09d045 100644 --- a/blocks/call-to-action/call-to-action.css +++ b/blocks/call-to-action/call-to-action.css @@ -1,539 +1,3 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index d8565186a..0fa2dbb70 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -1,953 +1,417 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .container { - width: 100%; + width: 100% } @media (min-width: 640px) { .container { - max-width: 640px; + max-width: 640px } } @media (min-width: 768px) { .container { - max-width: 768px; + max-width: 768px } } @media (min-width: 1024px) { .container { - max-width: 1024px; + max-width: 1024px } } @media (min-width: 1280px) { .container { - max-width: 1280px; + max-width: 1280px } } @media (min-width: 1536px) { .container { - max-width: 1536px; + max-width: 1536px } } .bg-danaherpurple-50 { - background-color: #EADEFF; + background-color: #EADEFF } .eyebrow-sm { color: #4000A5; font-size: 0.875rem; line-height: 1.25rem; - opacity: 1; + opacity: 1 } .card-list-wrapper :is(.relative) { - position: relative; + position: relative } .card-list-wrapper :is(.col-span-1) { - grid-column: span 1 / span 1; + grid-column: span 1 / span 1 } .card-list-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .card-list-wrapper :is(.my-2) { margin-top: 0.5rem; - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .card-list-wrapper :is(.\!mb-4) { - margin-bottom: 1rem !important; + margin-bottom: 1rem !important } .card-list-wrapper :is(.-mt-px) { - margin-top: -1px; + margin-top: -1px } .card-list-wrapper :is(.mb-3) { - margin-bottom: 0.75rem; + margin-bottom: 0.75rem } .card-list-wrapper :is(.mb-4) { - margin-bottom: 1rem; + margin-bottom: 1rem } .card-list-wrapper :is(.mt-3) { - margin-top: 0.75rem; + margin-top: 0.75rem } .card-list-wrapper :is(.mt-4) { - margin-top: 1rem; + margin-top: 1rem } .card-list-wrapper :is(.mt-8) { - margin-top: 2rem; + margin-top: 2rem } .card-list-wrapper :is(.mt-auto) { - margin-top: auto; + margin-top: auto } .card-list-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; - -webkit-line-clamp: 3 !important; + -webkit-line-clamp: 3 !important } .card-list-wrapper :is(.line-clamp-3) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 3; + -webkit-line-clamp: 3 } .card-list-wrapper :is(.line-clamp-4) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 4; + -webkit-line-clamp: 4 } .card-list-wrapper :is(.block) { - display: block; + display: block } .card-list-wrapper :is(.inline-block) { - display: inline-block; + display: inline-block } .card-list-wrapper :is(.flex) { - display: flex; + display: flex } .card-list-wrapper :is(.inline-flex) { - display: inline-flex; + display: inline-flex } .card-list-wrapper :is(.grid) { - display: grid; + display: grid } .card-list-wrapper :is(.hidden) { - display: none; + display: none } .card-list-wrapper :is(.\!h-20) { - height: 5rem !important; + height: 5rem !important } .card-list-wrapper :is(.h-20) { - height: 5rem; + height: 5rem } .card-list-wrapper :is(.h-full) { - height: 100%; + height: 100% } .card-list-wrapper :is(.w-0) { - width: 0px; + width: 0px } .card-list-wrapper :is(.w-full) { - width: 100%; + width: 100% } .card-list-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .card-list-wrapper :is(.max-w-xl) { - max-width: 36rem; + max-width: 36rem } .card-list-wrapper :is(.flex-1) { - flex: 1 1 0%; + flex: 1 1 0% } .card-list-wrapper :is(.grow) { - flex-grow: 1; + flex-grow: 1 } .card-list-wrapper :is(.transform) { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .card-list-wrapper :is(.grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .card-list-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .card-list-wrapper :is(.flex-wrap) { - flex-wrap: wrap; + flex-wrap: wrap } .card-list-wrapper :is(.items-center) { - align-items: center; + align-items: center } .card-list-wrapper :is(.justify-end) { - justify-content: flex-end; + justify-content: flex-end } .card-list-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .card-list-wrapper :is(.justify-between) { - justify-content: space-between; + justify-content: space-between } .card-list-wrapper :is(.justify-items-center) { - justify-items: center; + justify-items: center } .card-list-wrapper :is(.gap-2) { - gap: 0.5rem; + gap: 0.5rem } .card-list-wrapper :is(.gap-6) { - gap: 1.5rem; + gap: 1.5rem } .card-list-wrapper :is(.overflow-hidden) { - overflow: hidden; + overflow: hidden } .card-list-wrapper :is(.\!break-words) { - overflow-wrap: break-word !important; + overflow-wrap: break-word !important } .card-list-wrapper :is(.break-words) { - overflow-wrap: break-word; + overflow-wrap: break-word } .card-list-wrapper :is(.rounded-full) { - border-radius: 9999px; + border-radius: 9999px } .card-list-wrapper :is(.rounded-lg) { - border-radius: 0.5rem; + border-radius: 0.5rem } .card-list-wrapper :is(.border) { - border-width: 1px; + border-width: 1px } .card-list-wrapper :is(.border-t) { - border-top-width: 1px; + border-top-width: 1px } .card-list-wrapper :is(.border-t-2) { - border-top-width: 2px; + border-top-width: 2px } .card-list-wrapper :is(.border-danaherpurple-500) { --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); + border-color: rgb(117 35 255 / var(--tw-border-opacity)) } .card-list-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .card-list-wrapper :is(.bg-danaherpurple-50) { --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); + background-color: rgb(234 222 255 / var(--tw-bg-opacity)) } .card-list-wrapper :is(.bg-danaherpurple-500) { --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + background-color: rgb(117 35 255 / var(--tw-bg-opacity)) } .card-list-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .card-list-wrapper :is(.\!px-6) { padding-left: 1.5rem !important; - padding-right: 1.5rem !important; + padding-right: 1.5rem !important } .card-list-wrapper :is(.px-4) { padding-left: 1rem; - padding-right: 1rem; + padding-right: 1rem } .card-list-wrapper :is(.px-6) { padding-left: 1.5rem; - padding-right: 1.5rem; + padding-right: 1.5rem } .card-list-wrapper :is(.py-1) { padding-top: 0.25rem; - padding-bottom: 0.25rem; + padding-bottom: 0.25rem } .card-list-wrapper :is(.py-4) { padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 1rem } .card-list-wrapper :is(.py-5) { padding-top: 1.25rem; - padding-bottom: 1.25rem; + padding-bottom: 1.25rem } .card-list-wrapper :is(.pb-0) { - padding-bottom: 0px; + padding-bottom: 0px } .card-list-wrapper :is(.pb-4) { - padding-bottom: 1rem; + padding-bottom: 1rem } .card-list-wrapper :is(.pl-2) { - padding-left: 0.5rem; + padding-left: 0.5rem } .card-list-wrapper :is(.pt-0) { - padding-top: 0px; + padding-top: 0px } .card-list-wrapper :is(.pt-4) { - padding-top: 1rem; + padding-top: 1rem } .card-list-wrapper :is(.text-center) { - text-align: center; + text-align: center } .card-list-wrapper :is(.\!text-lg) { font-size: 1.125rem !important; - line-height: 1.75rem !important; + line-height: 1.75rem !important } .card-list-wrapper :is(.\!text-xl) { font-size: 1.25rem !important; - line-height: 1.75rem !important; + line-height: 1.75rem !important } .card-list-wrapper :is(.text-base) { font-size: 1rem; - line-height: 1.5rem; + line-height: 1.5rem } .card-list-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .card-list-wrapper :is(.\!font-semibold) { - font-weight: 700 !important; + font-weight: 700 !important } .card-list-wrapper :is(.font-extralight) { - font-weight: 200; + font-weight: 200 } .card-list-wrapper :is(.font-medium) { - font-weight: 500; + font-weight: 500 } .card-list-wrapper :is(.font-semibold) { - font-weight: 700; + font-weight: 700 } .card-list-wrapper :is(.leading-5) { - line-height: 1.25rem; + line-height: 1.25rem } .card-list-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; - color: rgb(17 24 39 / var(--tw-text-opacity)) !important; + color: rgb(17 24 39 / var(--tw-text-opacity)) !important } .card-list-wrapper :is(.text-black) { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity)) } .card-list-wrapper :is(.text-danaherblue-600) { --tw-text-opacity: 1; - color: rgb(13 49 114 / var(--tw-text-opacity)); + color: rgb(13 49 114 / var(--tw-text-opacity)) } .card-list-wrapper :is(.text-danahergray-700) { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)) } .card-list-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); + color: rgb(117 35 255 / var(--tw-text-opacity)) } .card-list-wrapper :is(.text-gray-500) { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity)) } .card-list-wrapper :is(.text-white) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)) } .card-list-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .card-list-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .card-list-wrapper :is(.transition) { @@ -955,79 +419,79 @@ video { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .card-list-wrapper :is(.duration-500) { - transition-duration: 500ms; + transition-duration: 500ms } .card-list-wrapper :is(.hover\:scale-105:hover) { --tw-scale-x: 1.05; --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .card-list-wrapper :is(.hover\:border-t-2:hover) { - border-top-width: 2px; + border-top-width: 2px } .card-list-wrapper :is(.hover\:border-gray-300:hover) { --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); + border-color: rgb(209 213 219 / var(--tw-border-opacity)) } .card-list-wrapper :is(.hover\:bg-danaherpurple-500:hover) { --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + background-color: rgb(117 35 255 / var(--tw-bg-opacity)) } .card-list-wrapper :is(.hover\:text-gray-700:hover) { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)) } .card-list-wrapper :is(.hover\:text-white:hover) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)) } @media (min-width: 640px) { .card-list-wrapper :is(.sm\:grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } .card-list-wrapper :is(.sm\:px-0) { padding-left: 0px; - padding-right: 0px; + padding-right: 0px } } @media (min-width: 768px) { .card-list-wrapper :is(.md\:mt-12) { - margin-top: 3rem; + margin-top: 3rem } .card-list-wrapper :is(.md\:flex) { - display: flex; + display: flex } .card-list-wrapper :is(.md\:grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } .card-list-wrapper :is(.md\:py-0) { padding-top: 0px; - padding-bottom: 0px; + padding-bottom: 0px } } @media (min-width: 1024px) { .card-list-wrapper :is(.lg\:grid-cols-3) { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)) } .card-list-wrapper :is(.lg\:grid-cols-4) { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)) } } \ No newline at end of file diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 25ebb4656..7bd3498d7 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -1,816 +1,280 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .cards-wrapper :is(.relative) { - position: relative; + position: relative } .cards-wrapper :is(.col-span-1) { - grid-column: span 1 / span 1; + grid-column: span 1 / span 1 } .cards-wrapper :is(.m-0) { - margin: 0px; + margin: 0px } .cards-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .cards-wrapper :is(.my-2) { margin-top: 0.5rem; - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .cards-wrapper :is(.mb-4) { - margin-bottom: 1rem; + margin-bottom: 1rem } .cards-wrapper :is(.\!line-clamp-2) { overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; - -webkit-line-clamp: 2 !important; + -webkit-line-clamp: 2 !important } .cards-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; - -webkit-line-clamp: 3 !important; + -webkit-line-clamp: 3 !important } .cards-wrapper :is(.\!line-clamp-4) { overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; - -webkit-line-clamp: 4 !important; + -webkit-line-clamp: 4 !important } .cards-wrapper :is(.\!block) { - display: block !important; + display: block !important } .cards-wrapper :is(.block) { - display: block; + display: block } .cards-wrapper :is(.flex) { - display: flex; + display: flex } .cards-wrapper :is(.inline-flex) { - display: inline-flex; + display: inline-flex } .cards-wrapper :is(.grid) { - display: grid; + display: grid } .cards-wrapper :is(.\!h-16) { - height: 4rem !important; + height: 4rem !important } .cards-wrapper :is(.\!h-20) { - height: 5rem !important; + height: 5rem !important } .cards-wrapper :is(.\!h-24) { - height: 6rem !important; + height: 6rem !important } .cards-wrapper :is(.h-48) { - height: 12rem; + height: 12rem } .cards-wrapper :is(.h-52) { - height: 13rem; + height: 13rem } .cards-wrapper :is(.w-full) { - width: 100%; + width: 100% } .cards-wrapper :is(.max-w-xl) { - max-width: 36rem; + max-width: 36rem } .cards-wrapper :is(.transform) { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .cards-wrapper :is(.cursor-pointer) { - cursor: pointer; + cursor: pointer } .cards-wrapper :is(.list-none) { - list-style-type: none; + list-style-type: none } .cards-wrapper :is(.grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .cards-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .cards-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .cards-wrapper :is(.gap-x-8) { -moz-column-gap: 2rem; - column-gap: 2rem; + column-gap: 2rem } .cards-wrapper :is(.gap-y-16) { - row-gap: 4rem; + row-gap: 4rem } .cards-wrapper :is(.overflow-hidden) { - overflow: hidden; + overflow: hidden } .cards-wrapper :is(.\!break-words) { - overflow-wrap: break-word !important; + overflow-wrap: break-word !important } .cards-wrapper :is(.rounded-lg) { - border-radius: 0.5rem; + border-radius: 0.5rem } .cards-wrapper :is(.rounded-b) { border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem } .cards-wrapper :is(.rounded-t) { border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; + border-top-right-radius: 0.25rem } .cards-wrapper :is(.border) { - border-width: 1px; + border-width: 1px } .cards-wrapper :is(.border-l-\[0\.5px\]) { - border-left-width: 0.5px; + border-left-width: 0.5px } .cards-wrapper :is(.border-gray-300) { --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); + border-color: rgb(209 213 219 / var(--tw-border-opacity)) } .cards-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .cards-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .cards-wrapper :is(.\!object-contain) { -o-object-fit: contain !important; - object-fit: contain !important; + object-fit: contain !important } .cards-wrapper :is(.p-0) { - padding: 0px; + padding: 0px } .cards-wrapper :is(.p-4) { - padding: 1rem; + padding: 1rem } .cards-wrapper :is(.px-0) { padding-left: 0px; - padding-right: 0px; + padding-right: 0px } .cards-wrapper :is(.py-2) { padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } .cards-wrapper :is(.pl-2) { - padding-left: 0.5rem; + padding-left: 0.5rem } .cards-wrapper :is(.pl-8) { - padding-left: 2rem; + padding-left: 2rem } .cards-wrapper :is(.pr-2) { - padding-right: 0.5rem; + padding-right: 0.5rem } .cards-wrapper :is(.pt-5) { - padding-top: 1.25rem; + padding-top: 1.25rem } .cards-wrapper :is(.\!text-2xl) { font-size: 1.5rem !important; - line-height: 2rem !important; + line-height: 2rem !important } .cards-wrapper :is(.text-3xl) { font-size: 1.875rem; - line-height: 2.25rem; + line-height: 2.25rem } .cards-wrapper :is(.text-base) { font-size: 1rem; - line-height: 1.5rem; + line-height: 1.5rem } .cards-wrapper :is(.text-lg) { font-size: 1.125rem; - line-height: 1.75rem; + line-height: 1.75rem } .cards-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .cards-wrapper :is(.\!font-normal) { - font-weight: 200 !important; + font-weight: 200 !important } .cards-wrapper :is(.font-extrabold) { - font-weight: 800; + font-weight: 800 } .cards-wrapper :is(.font-semibold) { - font-weight: 700; + font-weight: 700 } .cards-wrapper :is(.leading-5) { - line-height: 1.25rem; + line-height: 1.25rem } .cards-wrapper :is(.text-danahergray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } .cards-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); + color: rgb(117 35 255 / var(--tw-text-opacity)) } .cards-wrapper :is(.text-gray-500) { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity)) } .cards-wrapper :is(.text-gray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } .cards-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .cards-wrapper :is(.transition) { @@ -818,31 +282,31 @@ video { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .cards-wrapper :is(.duration-500) { - transition-duration: 500ms; + transition-duration: 500ms } .cards-wrapper :is(.hover\:scale-105:hover) { --tw-scale-x: 1.05; --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } @media (min-width: 640px) { .cards-wrapper :is(.sm\:grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 1024px) { .cards-wrapper :is(.lg\:grid-cols-3) { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)) } .cards-wrapper :is(.lg\:grid-cols-4) { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)) } } \ No newline at end of file diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index ed336f95e..c1229e091 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -1,539 +1,3 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .bg-danaherpurple-50 { background-color: #EADEFF; } diff --git a/blocks/category-family/category-family.css b/blocks/category-family/category-family.css index c9306a220..fd28c8871 100644 --- a/blocks/category-family/category-family.css +++ b/blocks/category-family/category-family.css @@ -1,1102 +1,566 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .container { - width: 100%; + width: 100% } @media (min-width: 640px) { .container { - max-width: 640px; + max-width: 640px } } @media (min-width: 768px) { .container { - max-width: 768px; + max-width: 768px } } @media (min-width: 1024px) { .container { - max-width: 1024px; + max-width: 1024px } } @media (min-width: 1280px) { .container { - max-width: 1280px; + max-width: 1280px } } @media (min-width: 1536px) { .container { - max-width: 1536px; + max-width: 1536px } } .category-family-wrapper :is(.pointer-events-none) { - pointer-events: none; + pointer-events: none } .category-family-wrapper :is(.absolute) { - position: absolute; + position: absolute } .category-family-wrapper :is(.relative) { - position: relative; + position: relative } .category-family-wrapper :is(.left-0) { - left: 0px; + left: 0px } .category-family-wrapper :is(.z-10) { - z-index: 10; + z-index: 10 } .category-family-wrapper :is(.col-span-1) { - grid-column: span 1 / span 1; + grid-column: span 1 / span 1 } .category-family-wrapper :is(.col-span-2) { - grid-column: span 2 / span 2; + grid-column: span 2 / span 2 } .category-family-wrapper :is(.col-span-4) { - grid-column: span 4 / span 4; + grid-column: span 4 / span 4 } .category-family-wrapper :is(.m-1) { - margin: 0.25rem; + margin: 0.25rem } .category-family-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .category-family-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .category-family-wrapper :is(.mb-4) { - margin-bottom: 1rem; + margin-bottom: 1rem } .category-family-wrapper :is(.mt-3) { - margin-top: 0.75rem; + margin-top: 0.75rem } .category-family-wrapper :is(.mt-4) { - margin-top: 1rem; + margin-top: 1rem } .category-family-wrapper :is(.mt-6) { - margin-top: 1.5rem; + margin-top: 1.5rem } .category-family-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; - -webkit-line-clamp: 3 !important; + -webkit-line-clamp: 3 !important } .category-family-wrapper :is(.line-clamp-4) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 4; + -webkit-line-clamp: 4 } .category-family-wrapper :is(.block) { - display: block; + display: block } .category-family-wrapper :is(.flex) { - display: flex; + display: flex } .category-family-wrapper :is(.inline-flex) { - display: inline-flex; + display: inline-flex } .category-family-wrapper :is(.grid) { - display: grid; + display: grid } .category-family-wrapper :is(.contents) { - display: contents; + display: contents } .category-family-wrapper :is(.hidden) { - display: none; + display: none } .category-family-wrapper :is(.\!h-14) { - height: 3.5rem !important; + height: 3.5rem !important } .category-family-wrapper :is(.\!h-20) { - height: 5rem !important; + height: 5rem !important } .category-family-wrapper :is(.h-10) { - height: 2.5rem; + height: 2.5rem } .category-family-wrapper :is(.h-2) { - height: 0.5rem; + height: 0.5rem } .category-family-wrapper :is(.h-24) { - height: 6rem; + height: 6rem } .category-family-wrapper :is(.h-3) { - height: 0.75rem; + height: 0.75rem } .category-family-wrapper :is(.h-4) { - height: 1rem; + height: 1rem } .category-family-wrapper :is(.h-48) { - height: 12rem; + height: 12rem } .category-family-wrapper :is(.h-5) { - height: 1.25rem; + height: 1.25rem } .category-family-wrapper :is(.h-7) { - height: 1.75rem; + height: 1.75rem } .category-family-wrapper :is(.h-72) { - height: 18rem; + height: 18rem } .category-family-wrapper :is(.h-8) { - height: 2rem; + height: 2rem } .category-family-wrapper :is(.h-full) { - height: 100%; + height: 100% } .category-family-wrapper :is(.w-2\/4) { - width: 50%; + width: 50% } .category-family-wrapper :is(.w-2\/5) { - width: 40%; + width: 40% } .category-family-wrapper :is(.w-3\/4) { - width: 75%; + width: 75% } .category-family-wrapper :is(.w-4) { - width: 1rem; + width: 1rem } .category-family-wrapper :is(.w-4\/5) { - width: 80%; + width: 80% } .category-family-wrapper :is(.w-64) { - width: 16rem; + width: 16rem } .category-family-wrapper :is(.w-9) { - width: 2.25rem; + width: 2.25rem } .category-family-wrapper :is(.w-\[15rem\]) { - width: 15rem; + width: 15rem } .category-family-wrapper :is(.w-full) { - width: 100%; + width: 100% } .category-family-wrapper :is(.max-w-5xl) { - max-width: 64rem; + max-width: 64rem } .category-family-wrapper :is(.max-w-sm) { - max-width: 24rem; + max-width: 24rem } .category-family-wrapper :is(.max-w-xl) { - max-width: 36rem; + max-width: 36rem } .category-family-wrapper :is(.max-w-xs) { - max-width: 20rem; + max-width: 20rem } .category-family-wrapper :is(.grow) { - flex-grow: 1; + flex-grow: 1 } .category-family-wrapper :is(.transform) { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } @keyframes pulse { 50% { - opacity: .5; + opacity: .5 } } .category-family-wrapper :is(.animate-pulse) { - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite } .category-family-wrapper :is(.cursor-pointer) { - cursor: pointer; + cursor: pointer } .category-family-wrapper :is(.grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .category-family-wrapper :is(.grid-cols-3) { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)) } .category-family-wrapper :is(.grid-rows-1) { - grid-template-rows: repeat(1, minmax(0, 1fr)); + grid-template-rows: repeat(1, minmax(0, 1fr)) } .category-family-wrapper :is(.flex-row) { - flex-direction: row; + flex-direction: row } .category-family-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .category-family-wrapper :is(.items-start) { - align-items: flex-start; + align-items: flex-start } .category-family-wrapper :is(.items-center) { - align-items: center; + align-items: center } .category-family-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .category-family-wrapper :is(.justify-between) { - justify-content: space-between; + justify-content: space-between } .category-family-wrapper :is(.gap-1) { - gap: 0.25rem; + gap: 0.25rem } .category-family-wrapper :is(.gap-2) { - gap: 0.5rem; + gap: 0.5rem } .category-family-wrapper :is(.gap-4) { - gap: 1rem; + gap: 1rem } .category-family-wrapper :is(.gap-5) { - gap: 1.25rem; + gap: 1.25rem } .category-family-wrapper :is(.gap-6) { - gap: 1.5rem; + gap: 1.5rem } .category-family-wrapper :is(.gap-x-10) { -moz-column-gap: 2.5rem; - column-gap: 2.5rem; + column-gap: 2.5rem } .category-family-wrapper :is(.gap-y-2) { - row-gap: 0.5rem; + row-gap: 0.5rem } .category-family-wrapper :is(.gap-y-4) { - row-gap: 1rem; + row-gap: 1rem } .category-family-wrapper :is(.space-x-2 > :not([hidden]) ~ :not([hidden])) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))) } .category-family-wrapper :is(.space-x-4 > :not([hidden]) ~ :not([hidden])) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))) } .category-family-wrapper :is(.space-y-1 > :not([hidden]) ~ :not([hidden])) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)) } .category-family-wrapper :is(.overflow-hidden) { - overflow: hidden; + overflow: hidden } .category-family-wrapper :is(.truncate) { overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; + white-space: nowrap } .category-family-wrapper :is(.\!break-words) { - overflow-wrap: break-word !important; + overflow-wrap: break-word !important } .category-family-wrapper :is(.break-words) { - overflow-wrap: break-word; + overflow-wrap: break-word } .category-family-wrapper :is(.\!rounded-full) { - border-radius: 9999px !important; + border-radius: 9999px !important } .category-family-wrapper :is(.rounded) { - border-radius: 0.25rem; + border-radius: 0.25rem } .category-family-wrapper :is(.rounded-full) { - border-radius: 9999px; + border-radius: 9999px } .category-family-wrapper :is(.rounded-lg) { - border-radius: 0.5rem; + border-radius: 0.5rem } .category-family-wrapper :is(.rounded-md) { - border-radius: 0.375rem; + border-radius: 0.375rem } .category-family-wrapper :is(.rounded-none) { - border-radius: 0px; + border-radius: 0px } .category-family-wrapper :is(.border) { - border-width: 1px; + border-width: 1px } .category-family-wrapper :is(.border-8) { - border-width: 8px; + border-width: 8px } .category-family-wrapper :is(.\!border-gray-300) { --tw-border-opacity: 1 !important; - border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important; + border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important } .category-family-wrapper :is(.bg-danaheratomicgrey-200) { --tw-bg-opacity: 1; - background-color: rgb(229 232 232 / var(--tw-bg-opacity)); + background-color: rgb(229 232 232 / var(--tw-bg-opacity)) } .category-family-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .category-family-wrapper :is(.bg-gray-100) { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(243 244 246 / var(--tw-bg-opacity)) } .category-family-wrapper :is(.bg-neutral-300) { --tw-bg-opacity: 1; - background-color: rgb(212 212 212 / var(--tw-bg-opacity)); + background-color: rgb(212 212 212 / var(--tw-bg-opacity)) } .category-family-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .category-family-wrapper :is(.\!fill-current) { - fill: currentColor !important; + fill: currentColor !important } .category-family-wrapper :is(.object-cover) { -o-object-fit: cover; - object-fit: cover; + object-fit: cover } .category-family-wrapper :is(.p-0) { - padding: 0px; + padding: 0px } .category-family-wrapper :is(.p-0\.5) { - padding: 0.125rem; + padding: 0.125rem } .category-family-wrapper :is(.p-1) { - padding: 0.25rem; + padding: 0.25rem } .category-family-wrapper :is(.p-4) { - padding: 1rem; + padding: 1rem } .category-family-wrapper :is(.\!px-7) { padding-left: 1.75rem !important; - padding-right: 1.75rem !important; + padding-right: 1.75rem !important } .category-family-wrapper :is(.px-2) { padding-left: 0.5rem; - padding-right: 0.5rem; + padding-right: 0.5rem } .category-family-wrapper :is(.px-6) { padding-left: 1.5rem; - padding-right: 1.5rem; + padding-right: 1.5rem } .category-family-wrapper :is(.px-9) { padding-left: 2.25rem; - padding-right: 2.25rem; + padding-right: 2.25rem } .category-family-wrapper :is(.py-1) { padding-top: 0.25rem; - padding-bottom: 0.25rem; + padding-bottom: 0.25rem } .category-family-wrapper :is(.py-4) { padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 1rem } .category-family-wrapper :is(.py-5) { padding-top: 1.25rem; - padding-bottom: 1.25rem; + padding-bottom: 1.25rem } .category-family-wrapper :is(.py-\[0\.625rem\]) { padding-top: 0.625rem; - padding-bottom: 0.625rem; + padding-bottom: 0.625rem } .category-family-wrapper :is(.pl-0) { - padding-left: 0px; + padding-left: 0px } .category-family-wrapper :is(.pr-2) { - padding-right: 0.5rem; + padding-right: 0.5rem } .category-family-wrapper :is(.pt-10) { - padding-top: 2.5rem; + padding-top: 2.5rem } .category-family-wrapper :is(.text-left) { - text-align: left; + text-align: left } .category-family-wrapper :is(.align-middle) { - vertical-align: middle; + vertical-align: middle } .category-family-wrapper :is(.\!text-lg) { font-size: 1.125rem !important; - line-height: 1.75rem !important; + line-height: 1.75rem !important } .category-family-wrapper :is(.text-lg) { font-size: 1.125rem; - line-height: 1.75rem; + line-height: 1.75rem } .category-family-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .category-family-wrapper :is(.text-xs) { font-size: 0.75rem; - line-height: 1rem; + line-height: 1rem } .category-family-wrapper :is(.\!font-semibold) { - font-weight: 700 !important; + font-weight: 700 !important } .category-family-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .category-family-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; - color: rgb(17 24 39 / var(--tw-text-opacity)) !important; + color: rgb(17 24 39 / var(--tw-text-opacity)) !important } .category-family-wrapper :is(.text-gray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } .category-family-wrapper :is(.shadow) { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .category-family-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .category-family-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .category-family-wrapper :is(.transition) { @@ -1104,64 +568,64 @@ video { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .category-family-wrapper :is(.duration-500) { - transition-duration: 500ms; + transition-duration: 500ms } .category-family-wrapper :is(.hover\:scale-105:hover) { --tw-scale-x: 1.05; --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .category-family-wrapper :is(.hover\:bg-gray-100:hover) { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(243 244 246 / var(--tw-bg-opacity)) } @media (min-width: 768px) { .category-family-wrapper :is(.md\:h-6) { - height: 1.5rem; + height: 1.5rem } .category-family-wrapper :is(.md\:grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } .category-family-wrapper :is(.md\:flex-row) { - flex-direction: row; + flex-direction: row } } @media (min-width: 1024px) { .category-family-wrapper :is(.lg\:grid-cols-3) { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)) } .category-family-wrapper :is(.lg\:grid-cols-5) { - grid-template-columns: repeat(5, minmax(0, 1fr)); + grid-template-columns: repeat(5, minmax(0, 1fr)) } .category-family-wrapper :is(.lg\:flex-row) { - flex-direction: row; + flex-direction: row } } .category-family-wrapper :is(.\[\&\:not\(\:first-child\)\:even\]\:opacity-40:not(:first-child):even) { - opacity: 0.4; + opacity: 0.4 } .category-family-wrapper :is(.\[\&\:not\(\:first-child\)\:odd\]\:opacity-20:not(:first-child):odd) { - opacity: 0.2; + opacity: 0.2 } .category-family-wrapper :is(.\[\&\:not\(\:first-child\)\]\:opacity-20:not(:first-child)) { - opacity: 0.2; + opacity: 0.2 } .category-family-wrapper :is(.\[\&\:not\(\:first-child\)\]\:opacity-40:not(:first-child)) { - opacity: 0.4; + opacity: 0.4 } \ No newline at end of file diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 991c9f27b..c6bbe3a7f 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -1,539 +1,3 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .container { width: 100%; } diff --git a/blocks/download/download.css b/blocks/download/download.css index a0c03787f..bdcc0bcc6 100644 --- a/blocks/download/download.css +++ b/blocks/download/download.css @@ -1,715 +1,179 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .download-wrapper :is(.mb-3) { - margin-bottom: 0.75rem; + margin-bottom: 0.75rem } .download-wrapper :is(.block) { - display: block; + display: block } .download-wrapper :is(.flex) { - display: flex; + display: flex } .download-wrapper :is(.aspect-video) { - aspect-ratio: 16 / 9; + aspect-ratio: 16 / 9 } .download-wrapper :is(.h-64) { - height: 16rem; + height: 16rem } .download-wrapper :is(.w-64) { - width: 16rem; + width: 16rem } .download-wrapper :is(.w-full) { - width: 100%; + width: 100% } .download-wrapper :is(.shrink-0) { - flex-shrink: 0; + flex-shrink: 0 } .download-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .download-wrapper :is(.items-start) { - align-items: flex-start; + align-items: flex-start } .download-wrapper :is(.gap-5) { - gap: 1.25rem; + gap: 1.25rem } .download-wrapper :is(.gap-x-2) { -moz-column-gap: 0.5rem; - column-gap: 0.5rem; + column-gap: 0.5rem } .download-wrapper :is(.gap-y-4) { - row-gap: 1rem; + row-gap: 1rem } .download-wrapper :is(.space-x-2 > :not([hidden]) ~ :not([hidden])) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))) } .download-wrapper :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)) } .download-wrapper :is(.divide-y > :not([hidden]) ~ :not([hidden])) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) } .download-wrapper :is(.break-words) { - overflow-wrap: break-word; + overflow-wrap: break-word } .download-wrapper :is(.rounded-full) { - border-radius: 9999px; + border-radius: 9999px } .download-wrapper :is(.rounded-md) { - border-radius: 0.375rem; + border-radius: 0.375rem } .download-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .download-wrapper :is(.object-cover) { -o-object-fit: cover; - object-fit: cover; + object-fit: cover } .download-wrapper :is(.px-3) { padding-left: 0.75rem; - padding-right: 0.75rem; + padding-right: 0.75rem } .download-wrapper :is(.px-6) { padding-left: 1.5rem; - padding-right: 1.5rem; + padding-right: 1.5rem } .download-wrapper :is(.py-1) { padding-top: 0.25rem; - padding-bottom: 0.25rem; + padding-bottom: 0.25rem } .download-wrapper :is(.py-4) { padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 1rem } .download-wrapper :is(.font-sans) { - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" } .download-wrapper :is(.text-base) { font-size: 1rem; - line-height: 1.5rem; + line-height: 1.5rem } .download-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .download-wrapper :is(.text-xs) { font-size: 0.75rem; - line-height: 1rem; + line-height: 1rem } .download-wrapper :is(.font-semibold) { - font-weight: 700; + font-weight: 700 } .download-wrapper :is(.tracking-tight) { - letter-spacing: -0.025em; + letter-spacing: -0.025em } .download-wrapper :is(.tracking-wide) { - letter-spacing: 0.025em; + letter-spacing: 0.025em } .download-wrapper :is(.text-danaherlightblue-500) { --tw-text-opacity: 1; - color: rgb(59 199 229 / var(--tw-text-opacity)); + color: rgb(59 199 229 / var(--tw-text-opacity)) } .download-wrapper :is(.text-gray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } .download-wrapper :is(.\!no-underline) { - text-decoration-line: none !important; + text-decoration-line: none !important } @media (min-width: 768px) { .download-wrapper :is(.md\:mb-0) { - margin-bottom: 0px; + margin-bottom: 0px } .download-wrapper :is(.md\:h-36) { - height: 9rem; + height: 9rem } .download-wrapper :is(.md\:w-52) { - width: 13rem; + width: 13rem } .download-wrapper :is(.md\:flex-row) { - flex-direction: row; + flex-direction: row } .download-wrapper :is(.md\:items-center) { - align-items: center; + align-items: center } } \ No newline at end of file diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css index 9f4f30bba..5aa64cb6f 100644 --- a/blocks/embed/embed.css +++ b/blocks/embed/embed.css @@ -1,586 +1,50 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .embed-wrapper :is(.absolute) { - position: absolute; + position: absolute } .embed-wrapper :is(.relative) { - position: relative; + position: relative } .embed-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .embed-wrapper :is(.my-8) { margin-top: 2rem; - margin-bottom: 2rem; + margin-bottom: 2rem } .embed-wrapper :is(.block) { - display: block; + display: block } .embed-wrapper :is(.flex) { - display: flex; + display: flex } .embed-wrapper :is(.max-w-3xl) { - max-width: 48rem; + max-width: 48rem } .embed-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .embed-wrapper :is(.border) { - border-width: 1px; + border-width: 1px } .embed-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .embed-wrapper :is(.text-center) { - text-align: center; + text-align: center } .embed-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } \ No newline at end of file diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 3cd0165a6..7cafb8735 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,539 +1,3 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .bg-danaherpurple-50 { background-color: #EADEFF; } diff --git a/blocks/header/header.css b/blocks/header/header.css index d81a35912..3e3baa629 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -1,1182 +1,646 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .header-wrapper :is(.fixed) { - position: fixed; + position: fixed } .header-wrapper :is(.absolute) { - position: absolute; + position: absolute } .header-wrapper :is(.relative) { - position: relative; + position: relative } .header-wrapper :is(.inset-x-0) { left: 0px; - right: 0px; + right: 0px } .header-wrapper :is(.left-0) { - left: 0px; + left: 0px } .header-wrapper :is(.left-4) { - left: 1rem; + left: 1rem } .header-wrapper :is(.left-6) { - left: 1.5rem; + left: 1.5rem } .header-wrapper :is(.top-0) { - top: 0px; + top: 0px } .header-wrapper :is(.top-4) { - top: 1rem; + top: 1rem } .header-wrapper :is(.top-full) { - top: 100%; + top: 100% } .header-wrapper :is(.z-10) { - z-index: 10; + z-index: 10 } .header-wrapper :is(.z-20) { - z-index: 20; + z-index: 20 } .header-wrapper :is(.z-40) { - z-index: 40; + z-index: 40 } .header-wrapper :is(.z-50) { - z-index: 50; + z-index: 50 } .header-wrapper :is(.order-last) { - order: 9999; + order: 9999 } .header-wrapper :is(.order-none) { - order: 0; + order: 0 } .header-wrapper :is(.-my-px) { margin-top: -1px; - margin-bottom: -1px; + margin-bottom: -1px } .header-wrapper :is(.mx-10) { margin-left: 2.5rem; - margin-right: 2.5rem; + margin-right: 2.5rem } .header-wrapper :is(.mx-2) { margin-left: 0.5rem; - margin-right: 0.5rem; + margin-right: 0.5rem } .header-wrapper :is(.mx-6) { margin-left: 1.5rem; - margin-right: 1.5rem; + margin-right: 1.5rem } .header-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .header-wrapper :is(.my-auto) { margin-top: auto; - margin-bottom: auto; + margin-bottom: auto } .header-wrapper :is(.-mr-px) { - margin-right: -1px; + margin-right: -1px } .header-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .header-wrapper :is(.mb-\[2px\]) { - margin-bottom: 2px; + margin-bottom: 2px } .header-wrapper :is(.ml-1) { - margin-left: 0.25rem; + margin-left: 0.25rem } .header-wrapper :is(.ml-2) { - margin-left: 0.5rem; + margin-left: 0.5rem } .header-wrapper :is(.ml-auto) { - margin-left: auto; + margin-left: auto } .header-wrapper :is(.mr-2) { - margin-right: 0.5rem; + margin-right: 0.5rem } .header-wrapper :is(.mt-0) { - margin-top: 0px; + margin-top: 0px } .header-wrapper :is(.mt-3) { - margin-top: 0.75rem; + margin-top: 0.75rem } .header-wrapper :is(.line-clamp-2) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + -webkit-line-clamp: 2 } .header-wrapper :is(.block) { - display: block; + display: block } .header-wrapper :is(.flex) { - display: flex; + display: flex } .header-wrapper :is(.inline-flex) { - display: inline-flex; + display: inline-flex } .header-wrapper :is(.grid) { - display: grid; + display: grid } .header-wrapper :is(.hidden) { - display: none; + display: none } .header-wrapper :is(.h-10) { - height: 2.5rem; + height: 2.5rem } .header-wrapper :is(.h-12) { - height: 3rem; + height: 3rem } .header-wrapper :is(.h-14) { - height: 3.5rem; + height: 3.5rem } .header-wrapper :is(.h-2) { - height: 0.5rem; + height: 0.5rem } .header-wrapper :is(.h-3) { - height: 0.75rem; + height: 0.75rem } .header-wrapper :is(.h-4) { - height: 1rem; + height: 1rem } .header-wrapper :is(.h-6) { - height: 1.5rem; + height: 1.5rem } .header-wrapper :is(.h-7) { - height: 1.75rem; + height: 1.75rem } .header-wrapper :is(.h-8) { - height: 2rem; + height: 2rem } .header-wrapper :is(.h-full) { - height: 100%; + height: 100% } .header-wrapper :is(.h-screen) { - height: 100vh; + height: 100vh } .header-wrapper :is(.min-h-\[40px\]) { - min-height: 40px; + min-height: 40px } .header-wrapper :is(.w-12) { - width: 3rem; + width: 3rem } .header-wrapper :is(.w-14) { - width: 3.5rem; + width: 3.5rem } .header-wrapper :is(.w-2) { - width: 0.5rem; + width: 0.5rem } .header-wrapper :is(.w-3) { - width: 0.75rem; + width: 0.75rem } .header-wrapper :is(.w-4) { - width: 1rem; + width: 1rem } .header-wrapper :is(.w-6) { - width: 1.5rem; + width: 1.5rem } .header-wrapper :is(.w-8) { - width: 2rem; + width: 2rem } .header-wrapper :is(.w-9) { - width: 2.25rem; + width: 2.25rem } .header-wrapper :is(.w-\[360px\]) { - width: 360px; + width: 360px } .header-wrapper :is(.w-auto) { - width: auto; + width: auto } .header-wrapper :is(.w-full) { - width: 100%; + width: 100% } .header-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .header-wrapper :is(.max-w-full) { - max-width: 100%; + max-width: 100% } .header-wrapper :is(.max-w-sm) { - max-width: 24rem; + max-width: 24rem } .header-wrapper :is(.shrink-0) { - flex-shrink: 0; + flex-shrink: 0 } .header-wrapper :is(.flex-grow) { - flex-grow: 1; + flex-grow: 1 } .header-wrapper :is(.grow) { - flex-grow: 1; + flex-grow: 1 } .header-wrapper :is(.basis-1\/2) { - flex-basis: 50%; + flex-basis: 50% } @keyframes ping { 75%, 100% { transform: scale(2); - opacity: 0; + opacity: 0 } } .header-wrapper :is(.animate-ping) { - animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite } .header-wrapper :is(.cursor-pointer) { - cursor: pointer; + cursor: pointer } .header-wrapper :is(.select-none) { -webkit-user-select: none; -moz-user-select: none; - user-select: none; + user-select: none } .header-wrapper :is(.grid-rows-1) { - grid-template-rows: repeat(1, minmax(0, 1fr)); + grid-template-rows: repeat(1, minmax(0, 1fr)) } .header-wrapper :is(.flex-row) { - flex-direction: row; + flex-direction: row } .header-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .header-wrapper :is(.flex-wrap) { - flex-wrap: wrap; + flex-wrap: wrap } .header-wrapper :is(.items-center) { - align-items: center; + align-items: center } .header-wrapper :is(.justify-end) { - justify-content: flex-end; + justify-content: flex-end } .header-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .header-wrapper :is(.justify-between) { - justify-content: space-between; + justify-content: space-between } .header-wrapper :is(.gap-2) { - gap: 0.5rem; + gap: 0.5rem } .header-wrapper :is(.gap-5) { - gap: 1.25rem; + gap: 1.25rem } .header-wrapper :is(.gap-x-1) { -moz-column-gap: 0.25rem; - column-gap: 0.25rem; + column-gap: 0.25rem } .header-wrapper :is(.gap-x-4) { -moz-column-gap: 1rem; - column-gap: 1rem; + column-gap: 1rem } .header-wrapper :is(.gap-y-2) { - row-gap: 0.5rem; + row-gap: 0.5rem } .header-wrapper :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)) } .header-wrapper :is(.overflow-auto) { - overflow: auto; + overflow: auto } .header-wrapper :is(.overflow-hidden) { - overflow: hidden; + overflow: hidden } .header-wrapper :is(.break-all) { - word-break: break-all; + word-break: break-all } .header-wrapper :is(.rounded) { - border-radius: 0.25rem; + border-radius: 0.25rem } .header-wrapper :is(.rounded-full) { - border-radius: 9999px; + border-radius: 9999px } .header-wrapper :is(.rounded-lg) { - border-radius: 0.5rem; + border-radius: 0.5rem } .header-wrapper :is(.rounded-md) { - border-radius: 0.375rem; + border-radius: 0.375rem } .header-wrapper :is(.border) { - border-width: 1px; + border-width: 1px } .header-wrapper :is(.border-0) { - border-width: 0px; + border-width: 0px } .header-wrapper :is(.border-b) { - border-bottom-width: 1px; + border-bottom-width: 1px } .header-wrapper :is(.border-black) { --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-color: rgb(0 0 0 / var(--tw-border-opacity)) } .header-wrapper :is(.border-gray-600) { --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); + border-color: rgb(75 85 99 / var(--tw-border-opacity)) } .header-wrapper :is(.bg-black) { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity)) } .header-wrapper :is(.bg-danaherblue-600) { --tw-bg-opacity: 1; - background-color: rgb(13 49 114 / var(--tw-bg-opacity)); + background-color: rgb(13 49 114 / var(--tw-bg-opacity)) } .header-wrapper :is(.bg-danahergray-150) { --tw-bg-opacity: 1; - background-color: rgb(118 118 118 / var(--tw-bg-opacity)); + background-color: rgb(118 118 118 / var(--tw-bg-opacity)) } .header-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .header-wrapper :is(.bg-danaherlightblue-500) { --tw-bg-opacity: 1; - background-color: rgb(59 199 229 / var(--tw-bg-opacity)); + background-color: rgb(59 199 229 / var(--tw-bg-opacity)) } .header-wrapper :is(.bg-danaherorange-500) { --tw-bg-opacity: 1; - background-color: rgb(220 96 22 / var(--tw-bg-opacity)); + background-color: rgb(220 96 22 / var(--tw-bg-opacity)) } .header-wrapper :is(.bg-danaherpurple-500) { --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + background-color: rgb(117 35 255 / var(--tw-bg-opacity)) } .header-wrapper :is(.bg-danaherpurple-800) { --tw-bg-opacity: 1; - background-color: rgb(64 0 165 / var(--tw-bg-opacity)); + background-color: rgb(64 0 165 / var(--tw-bg-opacity)) } .header-wrapper :is(.bg-gray-50) { --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); + background-color: rgb(249 250 251 / var(--tw-bg-opacity)) } .header-wrapper :is(.bg-transparent) { - background-color: transparent; + background-color: transparent } .header-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .header-wrapper :is(.fill-current) { - fill: currentColor; + fill: currentColor } .header-wrapper :is(.object-contain) { -o-object-fit: contain; - object-fit: contain; + object-fit: contain } .header-wrapper :is(.p-1) { - padding: 0.25rem; + padding: 0.25rem } .header-wrapper :is(.p-2) { - padding: 0.5rem; + padding: 0.5rem } .header-wrapper :is(.px-2) { padding-left: 0.5rem; - padding-right: 0.5rem; + padding-right: 0.5rem } .header-wrapper :is(.px-3) { padding-left: 0.75rem; - padding-right: 0.75rem; + padding-right: 0.75rem } .header-wrapper :is(.px-4) { padding-left: 1rem; - padding-right: 1rem; + padding-right: 1rem } .header-wrapper :is(.py-2) { padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } .header-wrapper :is(.py-3) { padding-top: 0.75rem; - padding-bottom: 0.75rem; + padding-bottom: 0.75rem } .header-wrapper :is(.py-3\.5) { padding-top: 0.875rem; - padding-bottom: 0.875rem; + padding-bottom: 0.875rem } .header-wrapper :is(.py-4) { padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 1rem } .header-wrapper :is(.pb-0) { - padding-bottom: 0px; + padding-bottom: 0px } .header-wrapper :is(.pl-1) { - padding-left: 0.25rem; + padding-left: 0.25rem } .header-wrapper :is(.pl-2) { - padding-left: 0.5rem; + padding-left: 0.5rem } .header-wrapper :is(.pr-3) { - padding-right: 0.75rem; + padding-right: 0.75rem } .header-wrapper :is(.pt-0) { - padding-top: 0px; + padding-top: 0px } .header-wrapper :is(.text-left) { - text-align: left; + text-align: left } .header-wrapper :is(.text-2xl) { font-size: 1.5rem; - line-height: 2rem; + line-height: 2rem } .header-wrapper :is(.text-base) { font-size: 1rem; - line-height: 1.5rem; + line-height: 1.5rem } .header-wrapper :is(.text-lg) { font-size: 1.125rem; - line-height: 1.75rem; + line-height: 1.75rem } .header-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .header-wrapper :is(.text-xs) { font-size: 0.75rem; - line-height: 1rem; + line-height: 1rem } .header-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .header-wrapper :is(.font-extralight) { - font-weight: 200; + font-weight: 200 } .header-wrapper :is(.font-medium) { - font-weight: 500; + font-weight: 500 } .header-wrapper :is(.font-semibold) { - font-weight: 700; + font-weight: 700 } .header-wrapper :is(.tracking-wider) { - letter-spacing: 0.05em; + letter-spacing: 0.05em } .header-wrapper :is(.text-black) { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity)) } .header-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); + color: rgb(117 35 255 / var(--tw-text-opacity)) } .header-wrapper :is(.text-gray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } .header-wrapper :is(.opacity-75) { - opacity: 0.75; + opacity: 0.75 } .header-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .header-wrapper :is(.shadow-sm) { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .header-wrapper :is(.outline-none) { outline: 2px solid transparent; - outline-offset: 2px; + outline-offset: 2px } .header-wrapper :is(.ring-0) { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) } .header-wrapper :is(.ring-offset-0) { - --tw-ring-offset-width: 0px; + --tw-ring-offset-width: 0px } .header-wrapper :is(.invert) { --tw-invert: invert(100%); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .header-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .header-wrapper :is(.backdrop-brightness-50) { --tw-backdrop-brightness: brightness(.5); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) } .header-wrapper :is(.transition) { @@ -1184,265 +648,265 @@ video { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .header-wrapper :is(.transition-all) { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .header-wrapper :is(.transition-transform) { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .header-wrapper :is(.ease-out) { - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-timing-function: cubic-bezier(0, 0, 0.2, 1) } .hover\:bg-danaherpurple-50:hover { - background-color: #EADEFF; + background-color: #EADEFF } .\[\&\>li\.active\]\:bg-danaherpurple-50>li.active { - background-color: #EADEFF; + background-color: #EADEFF } .header-wrapper :is(.focus-within\:ring:focus-within) { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) } .header-wrapper :is(.hover\:bg-danahergray-100:hover) { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(243 244 246 / var(--tw-bg-opacity)) } .header-wrapper :is(.hover\:bg-danaherpurple-50:hover) { --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); + background-color: rgb(234 222 255 / var(--tw-bg-opacity)) } .header-wrapper :is(.hover\:bg-gray-200\/30:hover) { - background-color: rgb(229 231 235 / 0.3); + background-color: rgb(229 231 235 / 0.3) } .header-wrapper :is(.hover\:bg-transparent:hover) { - background-color: transparent; + background-color: transparent } .header-wrapper :is(.hover\:fill-cyan-600:hover) { - fill: #0891b2; + fill: #0891b2 } .header-wrapper :is(.hover\:font-medium:hover) { - font-weight: 500; + font-weight: 500 } .header-wrapper :is(.hover\:text-black:hover) { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity)) } .header-wrapper :is(.hover\:text-cyan-600:hover) { --tw-text-opacity: 1; - color: rgb(8 145 178 / var(--tw-text-opacity)); + color: rgb(8 145 178 / var(--tw-text-opacity)) } .header-wrapper :is(.hover\:text-danaherpurple-800:hover) { --tw-text-opacity: 1; - color: rgb(64 0 165 / var(--tw-text-opacity)); + color: rgb(64 0 165 / var(--tw-text-opacity)) } .header-wrapper :is(.group:hover .group-hover\:-translate-x-0) { --tw-translate-x: -0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .header-wrapper :is(.group:hover .group-hover\:-translate-x-0\.5) { --tw-translate-x: -0.125rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .header-wrapper :is(.group:hover .group-hover\:translate-x-0) { --tw-translate-x: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .header-wrapper :is(.group:hover .group-hover\:translate-x-0\.5) { --tw-translate-x: 0.125rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .header-wrapper :is(.group:hover .group-hover\:rotate-180) { --tw-rotate: 180deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .header-wrapper :is(.group:hover .group-hover\:bg-danahergray-200) { --tw-bg-opacity: 1; - background-color: rgb(97 97 97 / var(--tw-bg-opacity)); + background-color: rgb(97 97 97 / var(--tw-bg-opacity)) } @media (min-width: 768px) { .header-wrapper :is(.md\:order-last) { - order: 9999; + order: 9999 } .header-wrapper :is(.md\:order-none) { - order: 0; + order: 0 } .header-wrapper :is(.md\:mx-5) { margin-left: 1.25rem; - margin-right: 1.25rem; + margin-right: 1.25rem } .header-wrapper :is(.md\:ml-14) { - margin-left: 3.5rem; + margin-left: 3.5rem } .header-wrapper :is(.md\:mr-4) { - margin-right: 1rem; + margin-right: 1rem } .header-wrapper :is(.md\:block) { - display: block; + display: block } .header-wrapper :is(.md\:hidden) { - display: none; + display: none } .header-wrapper :is(.md\:w-20) { - width: 5rem; + width: 5rem } .header-wrapper :is(.md\:w-3\/5) { - width: 60%; + width: 60% } .header-wrapper :is(.md\:w-full) { - width: 100%; + width: 100% } .header-wrapper :is(.md\:p-0) { - padding: 0px; + padding: 0px } .header-wrapper :is(.md\:py-4) { padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 1rem } } @media (min-width: 1024px) { .header-wrapper :is(.lg\:my-4) { margin-top: 1rem; - margin-bottom: 1rem; + margin-bottom: 1rem } .header-wrapper :is(.lg\:block) { - display: block; + display: block } .header-wrapper :is(.lg\:inline) { - display: inline; + display: inline } .header-wrapper :is(.lg\:flex) { - display: flex; + display: flex } .header-wrapper :is(.lg\:inline-flex) { - display: inline-flex; + display: inline-flex } .header-wrapper :is(.lg\:hidden) { - display: none; + display: none } .header-wrapper :is(.lg\:w-44) { - width: 11rem; + width: 11rem } .header-wrapper :is(.lg\:grid-rows-2) { - grid-template-rows: repeat(2, minmax(0, 1fr)); + grid-template-rows: repeat(2, minmax(0, 1fr)) } @media (min-width: 1024px) { .header-wrapper :is(.lg\:lg\:grid-rows-1) { - grid-template-rows: repeat(1, minmax(0, 1fr)); + grid-template-rows: repeat(1, minmax(0, 1fr)) } .header-wrapper :is(.lg\:lg\:grid-rows-2) { - grid-template-rows: repeat(2, minmax(0, 1fr)); + grid-template-rows: repeat(2, minmax(0, 1fr)) } } .header-wrapper :is(.lg\:px-8) { padding-left: 2rem; - padding-right: 2rem; + padding-right: 2rem } .header-wrapper :is(.lg\:\!pb-4) { - padding-bottom: 1rem !important; + padding-bottom: 1rem !important } .header-wrapper :is(.lg\:pb-1) { - padding-bottom: 0.25rem; + padding-bottom: 0.25rem } .header-wrapper :is(.lg\:pl-2) { - padding-left: 0.5rem; + padding-left: 0.5rem } .header-wrapper :is(.lg\:pt-4) { - padding-top: 1rem; + padding-top: 1rem } } .header-wrapper :is(.\[\&\>a\]\:w-full>a) { - width: 100%; + width: 100% } .header-wrapper :is(.\[\&\>li\.active\]\:bg-danaherpurple-50>li.active) { --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); + background-color: rgb(234 222 255 / var(--tw-bg-opacity)) } .header-wrapper :is(.\[\&\>li\.active\]\:font-bold>li.active) { - font-weight: 700; + font-weight: 700 } .header-wrapper :is(.\[\&_svg\>use\]\:stroke-black svg>use) { - stroke: #000; + stroke: #000 } .header-wrapper :is(.\[\&_svg\>use\]\:stroke-danaherpurple-500 svg>use) { - stroke: #7523FF; + stroke: #7523FF } .header-wrapper :is(.\[\&_svg\>use\]\:stroke-gray-500\/70 svg>use) { - stroke: rgb(107 114 128 / 0.7); + stroke: rgb(107 114 128 / 0.7) } .header-wrapper :is(.\[\&_svg\>use\]\:stroke-2 svg>use) { - stroke-width: 2; + stroke-width: 2 } .header-wrapper :is(.\[\&_svg\>use\]\:hover\:stroke-black:hover svg>use) { - stroke: #000; + stroke: #000 } .header-wrapper :is(.\[\&_svg\>use\]\:hover\:stroke-danaherpurple-800:hover svg>use) { - stroke: #4000A5; + stroke: #4000A5 } .header-wrapper :is(.\[\&_svg\]\:stroke-white svg) { - stroke: #fff; + stroke: #fff } \ No newline at end of file diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 5a7f6595d..760841952 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -1,752 +1,216 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .hero-wrapper :is(.fixed) { - position: fixed; + position: fixed } .hero-wrapper :is(.absolute) { - position: absolute; + position: absolute } .hero-wrapper :is(.relative) { - position: relative; + position: relative } .hero-wrapper :is(.inset-0) { - inset: 0px; + inset: 0px } .hero-wrapper :is(.left-0) { - left: 0px; + left: 0px } .hero-wrapper :is(.top-0) { - top: 0px; + top: 0px } .hero-wrapper :is(.z-50) { - z-index: 50; + z-index: 50 } .hero-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .hero-wrapper :is(.mb-1) { - margin-bottom: 0.25rem; + margin-bottom: 0.25rem } .hero-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .hero-wrapper :is(.mt-0) { - margin-top: 0px; + margin-top: 0px } .hero-wrapper :is(.mt-8) { - margin-top: 2rem; + margin-top: 2rem } .hero-wrapper :is(.block) { - display: block; + display: block } .hero-wrapper :is(.flex) { - display: flex; + display: flex } .hero-wrapper :is(.hidden) { - display: none; + display: none } .hero-wrapper :is(.h-12) { - height: 3rem; + height: 3rem } .hero-wrapper :is(.h-80) { - height: 20rem; + height: 20rem } .hero-wrapper :is(.w-12) { - width: 3rem; + width: 3rem } .hero-wrapper :is(.w-full) { - width: 100%; + width: 100% } .hero-wrapper :is(.\!max-w-\[unset\]) { - max-width: unset !important; + max-width: unset !important } .hero-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .hero-wrapper :is(.max-w-full) { - max-width: 100%; + max-width: 100% } .hero-wrapper :is(.max-w-sm) { - max-width: 24rem; + max-width: 24rem } .hero-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .hero-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .hero-wrapper :is(.place-self-end) { - place-self: end; + place-self: end } .hero-wrapper :is(.overflow-hidden) { - overflow: hidden; + overflow: hidden } .hero-wrapper :is(.rounded) { - border-radius: 0.25rem; + border-radius: 0.25rem } .hero-wrapper :is(.rounded-lg) { - border-radius: 0.5rem; + border-radius: 0.5rem } .hero-wrapper :is(.rounded-xl) { - border-radius: 0.75rem; + border-radius: 0.75rem } .hero-wrapper :is(.border) { - border-width: 1px; + border-width: 1px } .hero-wrapper :is(.border-purple-200) { --tw-border-opacity: 1; - border-color: rgb(125 86 164 / var(--tw-border-opacity)); + border-color: rgb(125 86 164 / var(--tw-border-opacity)) } .hero-wrapper :is(.bg-black\/25) { - background-color: rgb(0 0 0 / 0.25); + background-color: rgb(0 0 0 / 0.25) } .hero-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .hero-wrapper :is(.bg-transparent) { - background-color: transparent; + background-color: transparent } .hero-wrapper :is(.object-cover) { -o-object-fit: cover; - object-fit: cover; + object-fit: cover } .hero-wrapper :is(.\!p-0) { - padding: 0px !important; + padding: 0px !important } .hero-wrapper :is(.p-2) { - padding: 0.5rem; + padding: 0.5rem } .hero-wrapper :is(.p-4) { - padding: 1rem; + padding: 1rem } .hero-wrapper :is(.pb-\[56\.25\%\]) { - padding-bottom: 56.25%; + padding-bottom: 56.25% } .hero-wrapper :is(.text-2xl) { font-size: 1.5rem; - line-height: 2rem; + line-height: 2rem } .hero-wrapper :is(.text-6xl) { font-size: 3.75rem; - line-height: 1; + line-height: 1 } .hero-wrapper :is(.font-extrabold) { - font-weight: 800; + font-weight: 800 } .hero-wrapper :is(.font-normal) { - font-weight: 200; + font-weight: 200 } .hero-wrapper :is(.font-semibold) { - font-weight: 700; + font-weight: 700 } .hero-wrapper :is(.leading-none) { - line-height: 1; + line-height: 1 } .hero-wrapper :is(.tracking-wide) { - letter-spacing: 0.025em; + letter-spacing: 0.025em } .hero-wrapper :is(.text-gray-600) { --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); + color: rgb(75 85 99 / var(--tw-text-opacity)) } .hero-wrapper :is(.text-purple-200) { --tw-text-opacity: 1; - color: rgb(125 86 164 / var(--tw-text-opacity)); + color: rgb(125 86 164 / var(--tw-text-opacity)) } .hero-wrapper :is(.text-white) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)) } .hero-wrapper :is(.backdrop-brightness-50) { --tw-backdrop-brightness: brightness(.5); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) } @media (min-width: 768px) { @@ -754,45 +218,45 @@ video { padding-top: .625rem; padding-bottom: .625rem; font-size: 1.125rem; - line-height: 1.75rem; + line-height: 1.75rem } } .hero-wrapper :is(.hover\:bg-purple-200:hover) { --tw-bg-opacity: 1; - background-color: rgb(125 86 164 / var(--tw-bg-opacity)); + background-color: rgb(125 86 164 / var(--tw-bg-opacity)) } .hero-wrapper :is(.hover\:text-white:hover) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)) } @media (min-width: 768px) { .hero-wrapper :is(.md\:mt-16) { - margin-top: 4rem; + margin-top: 4rem } .hero-wrapper :is(.md\:h-full) { - height: 100%; + height: 100% } .hero-wrapper :is(.md\:p-6) { - padding: 1.5rem; + padding: 1.5rem } .hero-wrapper :is(.md\:px-8) { padding-left: 2rem; - padding-right: 2rem; + padding-right: 2rem } } @media (min-width: 1024px) { .hero-wrapper :is(.lg\:mb-8) { - margin-bottom: 2rem; + margin-bottom: 2rem } .hero-wrapper :is(.lg\:text-\[11rem\]) { - font-size: 11rem; + font-size: 11rem } } \ No newline at end of file diff --git a/blocks/logo-clouds/logo-clouds.css b/blocks/logo-clouds/logo-clouds.css index 0ffd77bc5..96e66bc97 100644 --- a/blocks/logo-clouds/logo-clouds.css +++ b/blocks/logo-clouds/logo-clouds.css @@ -1,679 +1,143 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .logo-clouds-wrapper :is(.relative) { - position: relative; + position: relative } .logo-clouds-wrapper :is(.col-span-1) { - grid-column: span 1 / span 1; + grid-column: span 1 / span 1 } .logo-clouds-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .logo-clouds-wrapper :is(.my-2) { margin-top: 0.5rem; - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .logo-clouds-wrapper :is(.mt-8) { - margin-top: 2rem; + margin-top: 2rem } .logo-clouds-wrapper :is(.block) { - display: block; + display: block } .logo-clouds-wrapper :is(.flex) { - display: flex; + display: flex } .logo-clouds-wrapper :is(.grid) { - display: grid; + display: grid } .logo-clouds-wrapper :is(.h-12) { - height: 3rem; + height: 3rem } .logo-clouds-wrapper :is(.h-full) { - height: 100%; + height: 100% } .logo-clouds-wrapper :is(.w-60) { - width: 15rem; + width: 15rem } .logo-clouds-wrapper :is(.w-full) { - width: 100%; + width: 100% } .logo-clouds-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .logo-clouds-wrapper :is(.transform) { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .logo-clouds-wrapper :is(.grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .logo-clouds-wrapper :is(.grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } .logo-clouds-wrapper :is(.items-center) { - align-items: center; + align-items: center } .logo-clouds-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .logo-clouds-wrapper :is(.gap-0) { - gap: 0px; + gap: 0px } .logo-clouds-wrapper :is(.gap-0\.5) { - gap: 0.125rem; + gap: 0.125rem } .logo-clouds-wrapper :is(.gap-x-6) { -moz-column-gap: 1.5rem; - column-gap: 1.5rem; + column-gap: 1.5rem } .logo-clouds-wrapper :is(.rounded-xl) { - border-radius: 0.75rem; + border-radius: 0.75rem } .logo-clouds-wrapper :is(.border-2) { - border-width: 2px; + border-width: 2px } .logo-clouds-wrapper :is(.border-transparent) { - border-color: transparent; + border-color: transparent } .logo-clouds-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .logo-clouds-wrapper :is(.bg-gray-200) { --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); + background-color: rgb(229 231 235 / var(--tw-bg-opacity)) } .logo-clouds-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .logo-clouds-wrapper :is(.px-8) { padding-left: 2rem; - padding-right: 2rem; + padding-right: 2rem } .logo-clouds-wrapper :is(.py-8) { padding-top: 2rem; - padding-bottom: 2rem; + padding-bottom: 2rem } .logo-clouds-wrapper :is(.text-3xl) { font-size: 1.875rem; - line-height: 2.25rem; + line-height: 2.25rem } .logo-clouds-wrapper :is(.text-lg) { font-size: 1.125rem; - line-height: 1.75rem; + line-height: 1.75rem } .logo-clouds-wrapper :is(.font-medium) { - font-weight: 500; + font-weight: 500 } .logo-clouds-wrapper :is(.font-semibold) { - font-weight: 700; + font-weight: 700 } .logo-clouds-wrapper :is(.transition) { @@ -681,43 +145,43 @@ video { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .logo-clouds-wrapper :is(.duration-500) { - transition-duration: 500ms; + transition-duration: 500ms } .logo-clouds-wrapper :is(.hover\:scale-105:hover) { --tw-scale-x: 1.05; --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } @media (min-width: 768px) { .logo-clouds-wrapper :is(.md\:grid-cols-3) { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)) } } @media (min-width: 1024px) { .logo-clouds-wrapper :is(.lg\:mt-0) { - margin-top: 0px; + margin-top: 0px } .logo-clouds-wrapper :is(.lg\:grid) { - display: grid; + display: grid } .logo-clouds-wrapper :is(.lg\:grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } .logo-clouds-wrapper :is(.lg\:items-center) { - align-items: center; + align-items: center } .logo-clouds-wrapper :is(.lg\:gap-8) { - gap: 2rem; + gap: 2rem } } \ No newline at end of file diff --git a/blocks/marketo-form/marketo-form.css b/blocks/marketo-form/marketo-form.css index eaebbd91c..a7612dc30 100644 --- a/blocks/marketo-form/marketo-form.css +++ b/blocks/marketo-form/marketo-form.css @@ -1,655 +1,119 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .marketo-form-wrapper :is(.relative) { - position: relative; + position: relative } .marketo-form-wrapper :is(.z-0) { - z-index: 0; + z-index: 0 } .marketo-form-wrapper :is(.z-\[9\]) { - z-index: 9; + z-index: 9 } .marketo-form-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .marketo-form-wrapper :is(.mb-0) { - margin-bottom: 0px; + margin-bottom: 0px } .marketo-form-wrapper :is(.mb-4) { - margin-bottom: 1rem; + margin-bottom: 1rem } .marketo-form-wrapper :is(.mb-8) { - margin-bottom: 2rem; + margin-bottom: 2rem } .marketo-form-wrapper :is(.ml-0) { - margin-left: 0px; + margin-left: 0px } .marketo-form-wrapper :is(.mr-4) { - margin-right: 1rem; + margin-right: 1rem } .marketo-form-wrapper :is(.mt-0) { - margin-top: 0px; + margin-top: 0px } .marketo-form-wrapper :is(.block) { - display: block; + display: block } .marketo-form-wrapper :is(.flex) { - display: flex; + display: flex } .marketo-form-wrapper :is(.h-80) { - height: 20rem; + height: 20rem } .marketo-form-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .marketo-form-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .marketo-form-wrapper :is(.items-center) { - align-items: center; + align-items: center } .marketo-form-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .marketo-form-wrapper :is(.break-all) { - word-break: break-all; + word-break: break-all } .marketo-form-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .marketo-form-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .marketo-form-wrapper :is(.text-3xl) { font-size: 1.875rem; - line-height: 2.25rem; + line-height: 2.25rem } .marketo-form-wrapper :is(.text-lg) { font-size: 1.125rem; - line-height: 1.75rem; + line-height: 1.75rem } .marketo-form-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .marketo-form-wrapper :is(.font-normal) { - font-weight: 200; + font-weight: 200 } .marketo-form-wrapper :is(.text-gray-700) { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)) } .marketo-form-wrapper :is(.underline) { - text-decoration-line: underline; + text-decoration-line: underline } .marketo-form-wrapper :is(.decoration-\[\#7523FF\]) { - text-decoration-color: #7523FF; + text-decoration-color: #7523FF } .marketo-form-wrapper :is(.decoration-\[3px\]) { - text-decoration-thickness: 3px; + text-decoration-thickness: 3px } .marketo-form-wrapper :is(.transition) { @@ -657,34 +121,34 @@ video { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .marketo-form-wrapper :is(.duration-700) { - transition-duration: 700ms; + transition-duration: 700ms } .marketo-form-wrapper :is(.ease-in-out) { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) } .marketo-form-wrapper :is(.hover\:bg-\[\#7523FF\]:hover) { --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + background-color: rgb(117 35 255 / var(--tw-bg-opacity)) } .marketo-form-wrapper :is(.hover\:text-white:hover) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)) } @media (min-width: 768px) { .marketo-form-wrapper :is(.md\:mb-16) { - margin-bottom: 4rem; + margin-bottom: 4rem } .marketo-form-wrapper :is(.md\:break-normal) { overflow-wrap: normal; - word-break: normal; + word-break: normal } } \ No newline at end of file diff --git a/blocks/mini-teasers/mini-teasers.css b/blocks/mini-teasers/mini-teasers.css index 7dd16b9e4..44432852a 100644 --- a/blocks/mini-teasers/mini-teasers.css +++ b/blocks/mini-teasers/mini-teasers.css @@ -1,685 +1,149 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .mini-teasers-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .mini-teasers-wrapper :is(.my-10) { margin-top: 2.5rem; - margin-bottom: 2.5rem; + margin-bottom: 2.5rem } .mini-teasers-wrapper :is(.my-6) { margin-top: 1.5rem; - margin-bottom: 1.5rem; + margin-bottom: 1.5rem } .mini-teasers-wrapper :is(.mb-0) { - margin-bottom: 0px; + margin-bottom: 0px } .mini-teasers-wrapper :is(.mt-4) { - margin-top: 1rem; + margin-top: 1rem } .mini-teasers-wrapper :is(.line-clamp-2) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + -webkit-line-clamp: 2 } .mini-teasers-wrapper :is(.line-clamp-3) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 3; + -webkit-line-clamp: 3 } .mini-teasers-wrapper :is(.\!block) { - display: block !important; + display: block !important } .mini-teasers-wrapper :is(.block) { - display: block; + display: block } .mini-teasers-wrapper :is(.grid) { - display: grid; + display: grid } .mini-teasers-wrapper :is(.h-16) { - height: 4rem; + height: 4rem } .mini-teasers-wrapper :is(.h-20) { - height: 5rem; + height: 5rem } .mini-teasers-wrapper :is(.h-\[5\.5rem\]) { - height: 5.5rem; + height: 5.5rem } .mini-teasers-wrapper :is(.w-16) { - width: 4rem; + width: 4rem } .mini-teasers-wrapper :is(.w-full) { - width: 100%; + width: 100% } .mini-teasers-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .mini-teasers-wrapper :is(.grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .mini-teasers-wrapper :is(.items-center) { - align-items: center; + align-items: center } .mini-teasers-wrapper :is(.gap-6) { - gap: 1.5rem; + gap: 1.5rem } .mini-teasers-wrapper :is(.break-words) { - overflow-wrap: break-word; + overflow-wrap: break-word } .mini-teasers-wrapper :is(.border-b) { - border-bottom-width: 1px; + border-bottom-width: 1px } .mini-teasers-wrapper :is(.border-t) { - border-top-width: 1px; + border-top-width: 1px } .mini-teasers-wrapper :is(.border-solid) { - border-style: solid; + border-style: solid } .mini-teasers-wrapper :is(.border-black) { --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-color: rgb(0 0 0 / var(--tw-border-opacity)) } .mini-teasers-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .mini-teasers-wrapper :is(.px-2) { padding-left: 0.5rem; - padding-right: 0.5rem; + padding-right: 0.5rem } .mini-teasers-wrapper :is(.pt-4) { - padding-top: 1rem; + padding-top: 1rem } .mini-teasers-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .mini-teasers-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .mini-teasers-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); + color: rgb(117 35 255 / var(--tw-text-opacity)) } @media (min-width: 640px) { .mini-teasers-wrapper :is(.sm\:grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 1024px) { .mini-teasers-wrapper :is(.lg\:grid-cols-3) { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)) } .mini-teasers-wrapper :is(.lg\:grid-cols-4) { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)) } } \ No newline at end of file diff --git a/blocks/page-jump-menu/page-jump-menu.css b/blocks/page-jump-menu/page-jump-menu.css index 65e3dcb25..afb59f8f3 100644 --- a/blocks/page-jump-menu/page-jump-menu.css +++ b/blocks/page-jump-menu/page-jump-menu.css @@ -1,686 +1,150 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .page-jump-menu-wrapper :is(.relative) { - position: relative; + position: relative } .page-jump-menu-wrapper :is(.z-10) { - z-index: 10; + z-index: 10 } .page-jump-menu-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .page-jump-menu-wrapper :is(.mt-4) { - margin-top: 1rem; + margin-top: 1rem } .page-jump-menu-wrapper :is(.block) { - display: block; + display: block } .page-jump-menu-wrapper :is(.flex) { - display: flex; + display: flex } .page-jump-menu-wrapper :is(.hidden) { - display: none; + display: none } .page-jump-menu-wrapper :is(.h-8) { - height: 2rem; + height: 2rem } .page-jump-menu-wrapper :is(.w-48) { - width: 12rem; + width: 12rem } .page-jump-menu-wrapper :is(.w-8) { - width: 2rem; + width: 2rem } .page-jump-menu-wrapper :is(.gap-x-2) { -moz-column-gap: 0.5rem; - column-gap: 0.5rem; + column-gap: 0.5rem } .page-jump-menu-wrapper :is(.overflow-hidden) { - overflow: hidden; + overflow: hidden } .page-jump-menu-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .page-jump-menu-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .page-jump-menu-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; + stroke: #7523FF } .page-jump-menu-wrapper :is(.stroke-1) { - stroke-width: 1; + stroke-width: 1 } .page-jump-menu-wrapper :is(.py-2) { padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } .page-jump-menu-wrapper :is(.pl-3) { - padding-left: 0.75rem; + padding-left: 0.75rem } .page-jump-menu-wrapper :is(.pr-2) { - padding-right: 0.5rem; + padding-right: 0.5rem } .page-jump-menu-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .page-jump-menu-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .page-jump-menu-wrapper :is(.capitalize) { - text-transform: capitalize; + text-transform: capitalize } .page-jump-menu-wrapper :is(.tracking-wider) { - letter-spacing: 0.05em; + letter-spacing: 0.05em } .page-jump-menu-wrapper :is(.text-danaherblack-500) { --tw-text-opacity: 1; - color: rgb(51 51 51 / var(--tw-text-opacity)); + color: rgb(51 51 51 / var(--tw-text-opacity)) } .page-jump-menu-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .page-jump-menu-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .page-jump-menu-wrapper :is(.group:hover .group-hover\:bg-danaherpurple-500) { --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + background-color: rgb(117 35 255 / var(--tw-bg-opacity)) } .page-jump-menu-wrapper :is(.group:hover .group-hover\:stroke-white) { - stroke: #fff; + stroke: #fff } .page-jump-menu-wrapper :is(.group:hover .group-hover\:text-white) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)) } .page-jump-menu-wrapper :is(.\[\&_svg\]\:stroke-danaherpurple-500 svg) { - stroke: #7523FF; + stroke: #7523FF } .page-jump-menu-wrapper :is(.\[\&_svg\]\:stroke-white svg) { - stroke: #fff; + stroke: #fff } .page-jump-menu-wrapper :is(.\[\&_svg\]\:stroke-1 svg) { - stroke-width: 1; + stroke-width: 1 } .page-jump-menu-wrapper :is(.\[\&_svg\]\:duration-300 svg) { - transition-duration: 300ms; + transition-duration: 300ms } .page-jump-menu-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:translate-y-1 svg) { --tw-translate-y: 0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .page-jump-menu-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:stroke-white svg) { - stroke: #fff; + stroke: #fff } \ No newline at end of file diff --git a/blocks/page-tabs/page-tabs.css b/blocks/page-tabs/page-tabs.css index 72191b4cb..e56f0e5d4 100644 --- a/blocks/page-tabs/page-tabs.css +++ b/blocks/page-tabs/page-tabs.css @@ -1,682 +1,146 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .page-tabs-wrapper :is(.z-10) { - z-index: 10; + z-index: 10 } .page-tabs-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .page-tabs-wrapper :is(.mt-4) { - margin-top: 1rem; + margin-top: 1rem } .page-tabs-wrapper :is(.block) { - display: block; + display: block } .page-tabs-wrapper :is(.flex) { - display: flex; + display: flex } .page-tabs-wrapper :is(.hidden) { - display: none; + display: none } .page-tabs-wrapper :is(.h-8) { - height: 2rem; + height: 2rem } .page-tabs-wrapper :is(.w-48) { - width: 12rem; + width: 12rem } .page-tabs-wrapper :is(.w-8) { - width: 2rem; + width: 2rem } .page-tabs-wrapper :is(.gap-x-2) { -moz-column-gap: 0.5rem; - column-gap: 0.5rem; + column-gap: 0.5rem } .page-tabs-wrapper :is(.overflow-hidden) { - overflow: hidden; + overflow: hidden } .page-tabs-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .page-tabs-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .page-tabs-wrapper :is(.stroke-danaherpurple-500) { - stroke: #7523FF; + stroke: #7523FF } .page-tabs-wrapper :is(.stroke-1) { - stroke-width: 1; + stroke-width: 1 } .page-tabs-wrapper :is(.py-2) { padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } .page-tabs-wrapper :is(.pl-3) { - padding-left: 0.75rem; + padding-left: 0.75rem } .page-tabs-wrapper :is(.pr-2) { - padding-right: 0.5rem; + padding-right: 0.5rem } .page-tabs-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .page-tabs-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .page-tabs-wrapper :is(.capitalize) { - text-transform: capitalize; + text-transform: capitalize } .page-tabs-wrapper :is(.tracking-wider) { - letter-spacing: 0.05em; + letter-spacing: 0.05em } .page-tabs-wrapper :is(.text-danaherblack-500) { --tw-text-opacity: 1; - color: rgb(51 51 51 / var(--tw-text-opacity)); + color: rgb(51 51 51 / var(--tw-text-opacity)) } .page-tabs-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .page-tabs-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .page-tabs-wrapper :is(.group:hover .group-hover\:bg-danaherpurple-500) { --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + background-color: rgb(117 35 255 / var(--tw-bg-opacity)) } .page-tabs-wrapper :is(.group:hover .group-hover\:stroke-white) { - stroke: #fff; + stroke: #fff } .page-tabs-wrapper :is(.group:hover .group-hover\:text-white) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)) } .page-tabs-wrapper :is(.\[\&_svg\]\:stroke-danaherpurple-500 svg) { - stroke: #7523FF; + stroke: #7523FF } .page-tabs-wrapper :is(.\[\&_svg\]\:stroke-white svg) { - stroke: #fff; + stroke: #fff } .page-tabs-wrapper :is(.\[\&_svg\]\:stroke-1 svg) { - stroke-width: 1; + stroke-width: 1 } .page-tabs-wrapper :is(.\[\&_svg\]\:duration-300 svg) { - transition-duration: 300ms; + transition-duration: 300ms } .page-tabs-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:translate-y-1 svg) { --tw-translate-y: 0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .page-tabs-wrapper :is(.group:hover .\[\&_svg\]\:group-hover\:stroke-white svg) { - stroke: #fff; + stroke: #fff } \ No newline at end of file diff --git a/blocks/popular-articles/popular-articles.css b/blocks/popular-articles/popular-articles.css index fdf55a346..9b3f184c4 100644 --- a/blocks/popular-articles/popular-articles.css +++ b/blocks/popular-articles/popular-articles.css @@ -1,540 +1,4 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .popular-articles-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } \ No newline at end of file diff --git a/blocks/product-card/product-card.css b/blocks/product-card/product-card.css index 304082b4b..0fff18f2e 100644 --- a/blocks/product-card/product-card.css +++ b/blocks/product-card/product-card.css @@ -1,782 +1,246 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .container { - width: 100%; + width: 100% } @media (min-width: 640px) { .container { - max-width: 640px; + max-width: 640px } } @media (min-width: 768px) { .container { - max-width: 768px; + max-width: 768px } } @media (min-width: 1024px) { .container { - max-width: 1024px; + max-width: 1024px } } @media (min-width: 1280px) { .container { - max-width: 1280px; + max-width: 1280px } } @media (min-width: 1536px) { .container { - max-width: 1536px; + max-width: 1536px } } .product-card-wrapper :is(.relative) { - position: relative; + position: relative } .product-card-wrapper :is(.col-span-1) { - grid-column: span 1 / span 1; + grid-column: span 1 / span 1 } .product-card-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .product-card-wrapper :is(.mb-3) { - margin-bottom: 0.75rem; + margin-bottom: 0.75rem } .product-card-wrapper :is(.mb-4) { - margin-bottom: 1rem; + margin-bottom: 1rem } .product-card-wrapper :is(.mt-3) { - margin-top: 0.75rem; + margin-top: 0.75rem } .product-card-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; - -webkit-line-clamp: 3 !important; + -webkit-line-clamp: 3 !important } .product-card-wrapper :is(.line-clamp-4) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 4; + -webkit-line-clamp: 4 } .product-card-wrapper :is(.block) { - display: block; + display: block } .product-card-wrapper :is(.flex) { - display: flex; + display: flex } .product-card-wrapper :is(.inline-flex) { - display: inline-flex; + display: inline-flex } .product-card-wrapper :is(.grid) { - display: grid; + display: grid } .product-card-wrapper :is(.\!h-14) { - height: 3.5rem !important; + height: 3.5rem !important } .product-card-wrapper :is(.\!h-20) { - height: 5rem !important; + height: 5rem !important } .product-card-wrapper :is(.w-full) { - width: 100%; + width: 100% } .product-card-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .product-card-wrapper :is(.max-w-xl) { - max-width: 36rem; + max-width: 36rem } .product-card-wrapper :is(.transform) { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .product-card-wrapper :is(.grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .product-card-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .product-card-wrapper :is(.items-center) { - align-items: center; + align-items: center } .product-card-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .product-card-wrapper :is(.justify-items-center) { - justify-items: center; + justify-items: center } .product-card-wrapper :is(.gap-6) { - gap: 1.5rem; + gap: 1.5rem } .product-card-wrapper :is(.space-x-4 > :not([hidden]) ~ :not([hidden])) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))) } .product-card-wrapper :is(.overflow-hidden) { - overflow: hidden; + overflow: hidden } .product-card-wrapper :is(.\!break-words) { - overflow-wrap: break-word !important; + overflow-wrap: break-word !important } .product-card-wrapper :is(.break-words) { - overflow-wrap: break-word; + overflow-wrap: break-word } .product-card-wrapper :is(.\!rounded-full) { - border-radius: 9999px !important; + border-radius: 9999px !important } .product-card-wrapper :is(.rounded-lg) { - border-radius: 0.5rem; + border-radius: 0.5rem } .product-card-wrapper :is(.border) { - border-width: 1px; + border-width: 1px } .product-card-wrapper :is(.border-8) { - border-width: 8px; + border-width: 8px } .product-card-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .product-card-wrapper :is(.bg-gray-100) { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(243 244 246 / var(--tw-bg-opacity)) } .product-card-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .product-card-wrapper :is(.\!px-7) { padding-left: 1.75rem !important; - padding-right: 1.75rem !important; + padding-right: 1.75rem !important } .product-card-wrapper :is(.px-2) { padding-left: 0.5rem; - padding-right: 0.5rem; + padding-right: 0.5rem } .product-card-wrapper :is(.px-4) { padding-left: 1rem; - padding-right: 1rem; + padding-right: 1rem } .product-card-wrapper :is(.px-6) { padding-left: 1.5rem; - padding-right: 1.5rem; + padding-right: 1.5rem } .product-card-wrapper :is(.py-5) { padding-top: 1.25rem; - padding-bottom: 1.25rem; + padding-bottom: 1.25rem } .product-card-wrapper :is(.pt-8) { - padding-top: 2rem; + padding-top: 2rem } .product-card-wrapper :is(.\!text-lg) { font-size: 1.125rem !important; - line-height: 1.75rem !important; + line-height: 1.75rem !important } .product-card-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .product-card-wrapper :is(.\!font-semibold) { - font-weight: 700 !important; + font-weight: 700 !important } .product-card-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; - color: rgb(17 24 39 / var(--tw-text-opacity)) !important; + color: rgb(17 24 39 / var(--tw-text-opacity)) !important } .product-card-wrapper :is(.text-gray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } .product-card-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .product-card-wrapper :is(.transition) { @@ -784,32 +248,32 @@ video { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .product-card-wrapper :is(.duration-500) { - transition-duration: 500ms; + transition-duration: 500ms } .product-card-wrapper :is(.hover\:scale-105:hover) { --tw-scale-x: 1.05; --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } @media (min-width: 640px) { .product-card-wrapper :is(.sm\:grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } .product-card-wrapper :is(.sm\:px-0) { padding-left: 0px; - padding-right: 0px; + padding-right: 0px } } @media (min-width: 1024px) { .product-card-wrapper :is(.lg\:grid-cols-4) { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)) } } \ No newline at end of file diff --git a/blocks/product-category-list/product-category-list.css b/blocks/product-category-list/product-category-list.css index 9f7626939..fd6af5fe9 100644 --- a/blocks/product-category-list/product-category-list.css +++ b/blocks/product-category-list/product-category-list.css @@ -1,816 +1,280 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .container { - width: 100%; + width: 100% } @media (min-width: 640px) { .container { - max-width: 640px; + max-width: 640px } } @media (min-width: 768px) { .container { - max-width: 768px; + max-width: 768px } } @media (min-width: 1024px) { .container { - max-width: 1024px; + max-width: 1024px } } @media (min-width: 1280px) { .container { - max-width: 1280px; + max-width: 1280px } } @media (min-width: 1536px) { .container { - max-width: 1536px; + max-width: 1536px } } .bg-danaherpurple-50 { - background-color: #EADEFF; + background-color: #EADEFF } .product-category-list-wrapper :is(.relative) { - position: relative; + position: relative } .product-category-list-wrapper :is(.col-span-1) { - grid-column: span 1 / span 1; + grid-column: span 1 / span 1 } .product-category-list-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .product-category-list-wrapper :is(.my-2) { margin-top: 0.5rem; - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .product-category-list-wrapper :is(.mb-2) { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem } .product-category-list-wrapper :is(.mb-3) { - margin-bottom: 0.75rem; + margin-bottom: 0.75rem } .product-category-list-wrapper :is(.mb-4) { - margin-bottom: 1rem; + margin-bottom: 1rem } .product-category-list-wrapper :is(.mt-2) { - margin-top: 0.5rem; + margin-top: 0.5rem } .product-category-list-wrapper :is(.mt-3) { - margin-top: 0.75rem; + margin-top: 0.75rem } .product-category-list-wrapper :is(.block) { - display: block; + display: block } .product-category-list-wrapper :is(.inline-block) { - display: inline-block; + display: inline-block } .product-category-list-wrapper :is(.flex) { - display: flex; + display: flex } .product-category-list-wrapper :is(.grid) { - display: grid; + display: grid } .product-category-list-wrapper :is(.h-16) { - height: 4rem; + height: 4rem } .product-category-list-wrapper :is(.h-24) { - height: 6rem; + height: 6rem } .product-category-list-wrapper :is(.h-52) { - height: 13rem; + height: 13rem } .product-category-list-wrapper :is(.w-48) { - width: 12rem; + width: 12rem } .product-category-list-wrapper :is(.w-full) { - width: 100%; + width: 100% } .product-category-list-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .product-category-list-wrapper :is(.max-w-xl) { - max-width: 36rem; + max-width: 36rem } .product-category-list-wrapper :is(.transform) { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .product-category-list-wrapper :is(.grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } .product-category-list-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .product-category-list-wrapper :is(.flex-wrap) { - flex-wrap: wrap; + flex-wrap: wrap } .product-category-list-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .product-category-list-wrapper :is(.justify-items-center) { - justify-items: center; + justify-items: center } .product-category-list-wrapper :is(.gap-2) { - gap: 0.5rem; + gap: 0.5rem } .product-category-list-wrapper :is(.gap-6) { - gap: 1.5rem; + gap: 1.5rem } .product-category-list-wrapper :is(.overflow-hidden) { - overflow: hidden; + overflow: hidden } .product-category-list-wrapper :is(.break-words) { - overflow-wrap: break-word; + overflow-wrap: break-word } .product-category-list-wrapper :is(.rounded-full) { - border-radius: 9999px; + border-radius: 9999px } .product-category-list-wrapper :is(.border-l) { - border-left-width: 1px; + border-left-width: 1px } .product-category-list-wrapper :is(.border-danahergray-300) { --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); + border-color: rgb(209 213 219 / var(--tw-border-opacity)) } .product-category-list-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .product-category-list-wrapper :is(.bg-danaherpurple-50) { --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); + background-color: rgb(234 222 255 / var(--tw-bg-opacity)) } .product-category-list-wrapper :is(.bg-danaherpurple-500) { --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + background-color: rgb(117 35 255 / var(--tw-bg-opacity)) } .product-category-list-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .product-category-list-wrapper :is(.object-cover) { -o-object-fit: cover; - object-fit: cover; + object-fit: cover } .product-category-list-wrapper :is(.px-1) { padding-left: 0.25rem; - padding-right: 0.25rem; + padding-right: 0.25rem } .product-category-list-wrapper :is(.px-4) { padding-left: 1rem; - padding-right: 1rem; + padding-right: 1rem } .product-category-list-wrapper :is(.py-1) { padding-top: 0.25rem; - padding-bottom: 0.25rem; + padding-bottom: 0.25rem } .product-category-list-wrapper :is(.py-4) { padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 1rem } .product-category-list-wrapper :is(.\!pb-0) { - padding-bottom: 0px !important; + padding-bottom: 0px !important } .product-category-list-wrapper :is(.pl-6) { - padding-left: 1.5rem; + padding-left: 1.5rem } .product-category-list-wrapper :is(.pr-6) { - padding-right: 1.5rem; + padding-right: 1.5rem } .product-category-list-wrapper :is(.pr-8) { - padding-right: 2rem; + padding-right: 2rem } .product-category-list-wrapper :is(.text-center) { - text-align: center; + text-align: center } .product-category-list-wrapper :is(.text-base) { font-size: 1rem; - line-height: 1.5rem; + line-height: 1.5rem } .product-category-list-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .product-category-list-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .product-category-list-wrapper :is(.font-normal) { - font-weight: 200; + font-weight: 200 } .product-category-list-wrapper :is(.font-semibold) { - font-weight: 700; + font-weight: 700 } .product-category-list-wrapper :is(.text-danahergray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } .product-category-list-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); + color: rgb(117 35 255 / var(--tw-text-opacity)) } .product-category-list-wrapper :is(.text-white) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)) } .product-category-list-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .product-category-list-wrapper :is(.transition) { @@ -818,63 +282,63 @@ video { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .product-category-list-wrapper :is(.duration-500) { - transition-duration: 500ms; + transition-duration: 500ms } .product-category-list-wrapper :is(.hover\:scale-105:hover) { --tw-scale-x: 1.05; --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .product-category-list-wrapper :is(.hover\:bg-gray-100:hover) { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(243 244 246 / var(--tw-bg-opacity)) } .product-category-list-wrapper :is(.hover\:text-gray-500:hover) { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity)) } @media (min-width: 640px) { .product-category-list-wrapper :is(.sm\:px-0) { padding-left: 0px; - padding-right: 0px; + padding-right: 0px } } @media (min-width: 768px) { .product-category-list-wrapper :is(.md\:grid-cols-3) { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)) } } @media (min-width: 1024px) { .product-category-list-wrapper :is(.lg\:w-44) { - width: 11rem; + width: 11rem } .product-category-list-wrapper :is(.lg\:grid-cols-4) { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)) } .product-category-list-wrapper :is(.lg\:px-4) { padding-left: 1rem; - padding-right: 1rem; + padding-right: 1rem } .product-category-list-wrapper :is(.lg\:pr-0) { - padding-right: 0px; + padding-right: 0px } } @media (min-width: 1280px) { .product-category-list-wrapper :is(.xl\:grid-cols-6) { - grid-template-columns: repeat(6, minmax(0, 1fr)); + grid-template-columns: repeat(6, minmax(0, 1fr)) } } \ No newline at end of file diff --git a/blocks/product-category/product-category.css b/blocks/product-category/product-category.css index 12b1bda33..a3f65e26c 100644 --- a/blocks/product-category/product-category.css +++ b/blocks/product-category/product-category.css @@ -1,791 +1,255 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .container { - width: 100%; + width: 100% } @media (min-width: 640px) { .container { - max-width: 640px; + max-width: 640px } } @media (min-width: 768px) { .container { - max-width: 768px; + max-width: 768px } } @media (min-width: 1024px) { .container { - max-width: 1024px; + max-width: 1024px } } @media (min-width: 1280px) { .container { - max-width: 1280px; + max-width: 1280px } } @media (min-width: 1536px) { .container { - max-width: 1536px; + max-width: 1536px } } .product-category-wrapper :is(.relative) { - position: relative; + position: relative } .product-category-wrapper :is(.col-span-1) { - grid-column: span 1 / span 1; + grid-column: span 1 / span 1 } .product-category-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .product-category-wrapper :is(.mb-3) { - margin-bottom: 0.75rem; + margin-bottom: 0.75rem } .product-category-wrapper :is(.mb-4) { - margin-bottom: 1rem; + margin-bottom: 1rem } .product-category-wrapper :is(.mt-3) { - margin-top: 0.75rem; + margin-top: 0.75rem } .product-category-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; - -webkit-line-clamp: 3 !important; + -webkit-line-clamp: 3 !important } .product-category-wrapper :is(.line-clamp-4) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 4; + -webkit-line-clamp: 4 } .product-category-wrapper :is(.block) { - display: block; + display: block } .product-category-wrapper :is(.flex) { - display: flex; + display: flex } .product-category-wrapper :is(.inline-flex) { - display: inline-flex; + display: inline-flex } .product-category-wrapper :is(.grid) { - display: grid; + display: grid } .product-category-wrapper :is(.\!h-14) { - height: 3.5rem !important; + height: 3.5rem !important } .product-category-wrapper :is(.\!h-20) { - height: 5rem !important; + height: 5rem !important } .product-category-wrapper :is(.w-full) { - width: 100%; + width: 100% } .product-category-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .product-category-wrapper :is(.max-w-xl) { - max-width: 36rem; + max-width: 36rem } .product-category-wrapper :is(.transform) { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .product-category-wrapper :is(.grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .product-category-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .product-category-wrapper :is(.items-center) { - align-items: center; + align-items: center } .product-category-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .product-category-wrapper :is(.justify-items-center) { - justify-items: center; + justify-items: center } .product-category-wrapper :is(.gap-6) { - gap: 1.5rem; + gap: 1.5rem } .product-category-wrapper :is(.space-x-4 > :not([hidden]) ~ :not([hidden])) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))) } .product-category-wrapper :is(.overflow-hidden) { - overflow: hidden; + overflow: hidden } .product-category-wrapper :is(.\!break-words) { - overflow-wrap: break-word !important; + overflow-wrap: break-word !important } .product-category-wrapper :is(.break-words) { - overflow-wrap: break-word; + overflow-wrap: break-word } .product-category-wrapper :is(.\!rounded-full) { - border-radius: 9999px !important; + border-radius: 9999px !important } .product-category-wrapper :is(.rounded-lg) { - border-radius: 0.5rem; + border-radius: 0.5rem } .product-category-wrapper :is(.border) { - border-width: 1px; + border-width: 1px } .product-category-wrapper :is(.border-8) { - border-width: 8px; + border-width: 8px } .product-category-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .product-category-wrapper :is(.bg-gray-100) { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(243 244 246 / var(--tw-bg-opacity)) } .product-category-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .product-category-wrapper :is(.\!px-7) { padding-left: 1.75rem !important; - padding-right: 1.75rem !important; + padding-right: 1.75rem !important } .product-category-wrapper :is(.px-2) { padding-left: 0.5rem; - padding-right: 0.5rem; + padding-right: 0.5rem } .product-category-wrapper :is(.px-4) { padding-left: 1rem; - padding-right: 1rem; + padding-right: 1rem } .product-category-wrapper :is(.px-6) { padding-left: 1.5rem; - padding-right: 1.5rem; + padding-right: 1.5rem } .product-category-wrapper :is(.py-4) { padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 1rem } .product-category-wrapper :is(.py-5) { padding-top: 1.25rem; - padding-bottom: 1.25rem; + padding-bottom: 1.25rem } .product-category-wrapper :is(.\!pb-0) { - padding-bottom: 0px !important; + padding-bottom: 0px !important } .product-category-wrapper :is(.\!text-lg) { font-size: 1.125rem !important; - line-height: 1.75rem !important; + line-height: 1.75rem !important } .product-category-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .product-category-wrapper :is(.\!font-semibold) { - font-weight: 700 !important; + font-weight: 700 !important } .product-category-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; - color: rgb(17 24 39 / var(--tw-text-opacity)) !important; + color: rgb(17 24 39 / var(--tw-text-opacity)) !important } .product-category-wrapper :is(.text-gray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } .product-category-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .product-category-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .product-category-wrapper :is(.transition) { @@ -793,32 +257,32 @@ video { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .product-category-wrapper :is(.duration-500) { - transition-duration: 500ms; + transition-duration: 500ms } .product-category-wrapper :is(.hover\:scale-105:hover) { --tw-scale-x: 1.05; --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } @media (min-width: 640px) { .product-category-wrapper :is(.sm\:grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } .product-category-wrapper :is(.sm\:px-0) { padding-left: 0px; - padding-right: 0px; + padding-right: 0px } } @media (min-width: 1024px) { .product-category-wrapper :is(.lg\:grid-cols-4) { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)) } } \ No newline at end of file diff --git a/blocks/product-citations/product-citations.css b/blocks/product-citations/product-citations.css index 1c97d4786..947d51450 100644 --- a/blocks/product-citations/product-citations.css +++ b/blocks/product-citations/product-citations.css @@ -1,590 +1,54 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .product-citations-wrapper :is(.float-none) { - float: none; + float: none } .product-citations-wrapper :is(.mb-0) { - margin-bottom: 0px; + margin-bottom: 0px } .product-citations-wrapper :is(.ml-0) { - margin-left: 0px; + margin-left: 0px } .product-citations-wrapper :is(.block) { - display: block; + display: block } .product-citations-wrapper :is(.h-3) { - height: 0.75rem; + height: 0.75rem } .product-citations-wrapper :is(.h-48) { - height: 12rem; + height: 12rem } .product-citations-wrapper :is(.w-3) { - width: 0.75rem; + width: 0.75rem } .product-citations-wrapper :is(.w-full) { - width: 100%; + width: 100% } .product-citations-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .product-citations-wrapper :is(.pb-0) { - padding-bottom: 0px; + padding-bottom: 0px } .product-citations-wrapper :is(.align-top) { - vertical-align: top; + vertical-align: top } .product-citations-wrapper :is(.text-xs) { font-size: 0.75rem; - line-height: 1rem; + line-height: 1rem } .product-citations-wrapper :is(.text-danaherblue-900) { --tw-text-opacity: 1; - color: rgb(6 28 68 / var(--tw-text-opacity)); + color: rgb(6 28 68 / var(--tw-text-opacity)) } \ No newline at end of file diff --git a/blocks/product-hero/product-hero.css b/blocks/product-hero/product-hero.css index b7319c66b..0c39bb15b 100644 --- a/blocks/product-hero/product-hero.css +++ b/blocks/product-hero/product-hero.css @@ -1,539 +1,3 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .btn-outline-trending-brand { color: #7523FF; background-color: rgb(255 255 255); diff --git a/blocks/product-menu/product-menu.css b/blocks/product-menu/product-menu.css index faf14b45f..1c77122cf 100644 --- a/blocks/product-menu/product-menu.css +++ b/blocks/product-menu/product-menu.css @@ -1,694 +1,158 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .product-menu-wrapper :is(.block) { - display: block; + display: block } .product-menu-wrapper :is(.flex) { - display: flex; + display: flex } .product-menu-wrapper :is(.hidden) { - display: none; + display: none } .product-menu-wrapper :is(.h-20) { - height: 5rem; + height: 5rem } .product-menu-wrapper :is(.\!w-full) { - width: 100% !important; + width: 100% !important } .product-menu-wrapper :is(.w-20) { - width: 5rem; + width: 5rem } .product-menu-wrapper :is(.w-full) { - width: 100%; + width: 100% } .product-menu-wrapper :is(.scale-95) { --tw-scale-x: .95; --tw-scale-y: .95; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .product-menu-wrapper :is(.transform) { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .product-menu-wrapper :is(.cursor-pointer) { - cursor: pointer; + cursor: pointer } .product-menu-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .product-menu-wrapper :is(.items-center) { - align-items: center; + align-items: center } .product-menu-wrapper :is(.justify-between) { - justify-content: space-between; + justify-content: space-between } .product-menu-wrapper :is(.gap-10) { - gap: 2.5rem; + gap: 2.5rem } .product-menu-wrapper :is(.gap-2) { - gap: 0.5rem; + gap: 0.5rem } .product-menu-wrapper :is(.space-x-3 > :not([hidden]) ~ :not([hidden])) { --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); - margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))) } .product-menu-wrapper :is(.self-center) { - align-self: center; + align-self: center } .product-menu-wrapper :is(.rounded-md) { - border-radius: 0.375rem; + border-radius: 0.375rem } .product-menu-wrapper :is(.border-2) { - border-width: 2px; + border-width: 2px } .product-menu-wrapper :is(.border-white) { --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); + border-color: rgb(255 255 255 / var(--tw-border-opacity)) } .product-menu-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .product-menu-wrapper :is(.object-contain) { -o-object-fit: contain; - object-fit: contain; + object-fit: contain } .product-menu-wrapper :is(.object-center) { -o-object-position: center; - object-position: center; + object-position: center } .product-menu-wrapper :is(.p-3) { - padding: 0.75rem; + padding: 0.75rem } .product-menu-wrapper :is(.py-4) { padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 1rem } .product-menu-wrapper :is(.text-lg) { font-size: 1.125rem; - line-height: 1.75rem; + line-height: 1.75rem } .product-menu-wrapper :is(.font-semibold) { - font-weight: 700; + font-weight: 700 } .product-menu-wrapper :is(.leading-6) { - line-height: 1.5rem; + line-height: 1.5rem } .product-menu-wrapper :is(.shadow-md) { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .product-menu-wrapper :is(.duration-300) { - transition-duration: 300ms; + transition-duration: 300ms } .product-menu-wrapper :is(.hover\:scale-95:hover) { --tw-scale-x: .95; --tw-scale-y: .95; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .product-menu-wrapper :is(.hover\:bg-danaherlightblue-50:hover) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } @media (min-width: 768px) { .product-menu-wrapper :is(.md\:w-1\/3) { - width: 33.333333%; + width: 33.333333% } .product-menu-wrapper :is(.md\:flex-row) { - flex-direction: row; + flex-direction: row } } @media (min-width: 1024px) { .product-menu-wrapper :is(.lg\:flex-shrink-0) { - flex-shrink: 0; + flex-shrink: 0 } } \ No newline at end of file diff --git a/blocks/product-overview/product-overview.css b/blocks/product-overview/product-overview.css index 591dcadd3..8fee50c4f 100644 --- a/blocks/product-overview/product-overview.css +++ b/blocks/product-overview/product-overview.css @@ -1,539 +1,3 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .href-text a { position: relative; z-index: 0; diff --git a/blocks/product-parts/product-parts.css b/blocks/product-parts/product-parts.css index 2b27a59dc..2266b4429 100644 --- a/blocks/product-parts/product-parts.css +++ b/blocks/product-parts/product-parts.css @@ -1,682 +1,146 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .product-parts-wrapper :is(.col-span-2) { - grid-column: span 2 / span 2; + grid-column: span 2 / span 2 } .product-parts-wrapper :is(.col-span-4) { - grid-column: span 4 / span 4; + grid-column: span 4 / span 4 } .product-parts-wrapper :is(.col-span-8) { - grid-column: span 8 / span 8; + grid-column: span 8 / span 8 } .product-parts-wrapper :is(.block) { - display: block; + display: block } .product-parts-wrapper :is(.flex) { - display: flex; + display: flex } .product-parts-wrapper :is(.grid) { - display: grid; + display: grid } .product-parts-wrapper :is(.hidden) { - display: none; + display: none } .product-parts-wrapper :is(.h-16) { - height: 4rem; + height: 4rem } .product-parts-wrapper :is(.w-16) { - width: 4rem; + width: 4rem } .product-parts-wrapper :is(.grid-cols-12) { - grid-template-columns: repeat(12, minmax(0, 1fr)); + grid-template-columns: repeat(12, minmax(0, 1fr)) } .product-parts-wrapper :is(.flex-row) { - flex-direction: row; + flex-direction: row } .product-parts-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .product-parts-wrapper :is(.\!content-center) { - align-content: center !important; + align-content: center !important } .product-parts-wrapper :is(.items-start) { - align-items: flex-start; + align-items: flex-start } .product-parts-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .product-parts-wrapper :is(.gap-y-4) { - row-gap: 1rem; + row-gap: 1rem } .product-parts-wrapper :is(.rounded-md) { - border-radius: 0.375rem; + border-radius: 0.375rem } .product-parts-wrapper :is(.border-b) { - border-bottom-width: 1px; + border-bottom-width: 1px } .product-parts-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .product-parts-wrapper :is(.pb-2) { - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } .product-parts-wrapper :is(.pb-4) { - padding-bottom: 1rem; + padding-bottom: 1rem } .product-parts-wrapper :is(.pl-4) { - padding-left: 1rem; + padding-left: 1rem } .product-parts-wrapper :is(.pt-4) { - padding-top: 1rem; + padding-top: 1rem } .product-parts-wrapper :is(.text-base) { font-size: 1rem; - line-height: 1.5rem; + line-height: 1.5rem } .product-parts-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .product-parts-wrapper :is(.text-xs) { font-size: 0.75rem; - line-height: 1rem; + line-height: 1rem } .product-parts-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .product-parts-wrapper :is(.leading-6) { - line-height: 1.5rem; + line-height: 1.5rem } .product-parts-wrapper :is(.text-black) { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity)) } .product-parts-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } @media (min-width: 768px) { .product-parts-wrapper :is(.md\:col-span-2) { - grid-column: span 2 / span 2; + grid-column: span 2 / span 2 } .product-parts-wrapper :is(.md\:flex) { - display: flex; + display: flex } } @media (min-width: 1024px) { .product-parts-wrapper :is(.lg\:col-span-1) { - grid-column: span 1 / span 1; + grid-column: span 1 / span 1 } .product-parts-wrapper :is(.lg\:col-span-10) { - grid-column: span 10 / span 10; + grid-column: span 10 / span 10 } } \ No newline at end of file diff --git a/blocks/product-recommendations/product-recommendations.css b/blocks/product-recommendations/product-recommendations.css index 3af4cd1b2..89cab1e1a 100644 --- a/blocks/product-recommendations/product-recommendations.css +++ b/blocks/product-recommendations/product-recommendations.css @@ -1,861 +1,325 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .container { - width: 100%; + width: 100% } @media (min-width: 640px) { .container { - max-width: 640px; + max-width: 640px } } @media (min-width: 768px) { .container { - max-width: 768px; + max-width: 768px } } @media (min-width: 1024px) { .container { - max-width: 1024px; + max-width: 1024px } } @media (min-width: 1280px) { .container { - max-width: 1280px; + max-width: 1280px } } @media (min-width: 1536px) { .container { - max-width: 1536px; + max-width: 1536px } } .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { - scrollbar-width: none; + scrollbar-width: none } .product-recommendations-wrapper :is(.relative) { - position: relative; + position: relative } .product-recommendations-wrapper :is(.col-span-1) { - grid-column: span 1 / span 1; + grid-column: span 1 / span 1 } .product-recommendations-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .product-recommendations-wrapper :is(.mb-3) { - margin-bottom: 0.75rem; + margin-bottom: 0.75rem } .product-recommendations-wrapper :is(.mb-4) { - margin-bottom: 1rem; + margin-bottom: 1rem } .product-recommendations-wrapper :is(.mt-12) { - margin-top: 3rem; + margin-top: 3rem } .product-recommendations-wrapper :is(.mt-3) { - margin-top: 0.75rem; + margin-top: 0.75rem } .product-recommendations-wrapper :is(.\!line-clamp-3) { overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; - -webkit-line-clamp: 3 !important; + -webkit-line-clamp: 3 !important } .product-recommendations-wrapper :is(.line-clamp-4) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 4; + -webkit-line-clamp: 4 } .product-recommendations-wrapper :is(.block) { - display: block; + display: block } .product-recommendations-wrapper :is(.flex) { - display: flex; + display: flex } .product-recommendations-wrapper :is(.inline-flex) { - display: inline-flex; + display: inline-flex } .product-recommendations-wrapper :is(.grid) { - display: grid; + display: grid } .product-recommendations-wrapper :is(.hidden) { - display: none; + display: none } .product-recommendations-wrapper :is(.\!h-14) { - height: 3.5rem !important; + height: 3.5rem !important } .product-recommendations-wrapper :is(.\!h-20) { - height: 5rem !important; + height: 5rem !important } .product-recommendations-wrapper :is(.w-full) { - width: 100%; + width: 100% } .product-recommendations-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .product-recommendations-wrapper :is(.max-w-xl) { - max-width: 36rem; + max-width: 36rem } .product-recommendations-wrapper :is(.transform) { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .product-recommendations-wrapper :is(.snap-x) { - scroll-snap-type: x var(--tw-scroll-snap-strictness); + scroll-snap-type: x var(--tw-scroll-snap-strictness) } .product-recommendations-wrapper :is(.snap-mandatory) { - --tw-scroll-snap-strictness: mandatory; + --tw-scroll-snap-strictness: mandatory } .product-recommendations-wrapper :is(.auto-cols-\[calc\(100\%\)\]) { - grid-auto-columns: calc(100%); + grid-auto-columns: calc(100%) } .product-recommendations-wrapper :is(.grid-flow-col) { - grid-auto-flow: column; + grid-auto-flow: column } .product-recommendations-wrapper :is(.grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .product-recommendations-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .product-recommendations-wrapper :is(.items-center) { - align-items: center; + align-items: center } .product-recommendations-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .product-recommendations-wrapper :is(.justify-between) { - justify-content: space-between; + justify-content: space-between } .product-recommendations-wrapper :is(.justify-items-center) { - justify-items: center; + justify-items: center } .product-recommendations-wrapper :is(.gap-6) { - gap: 1.5rem; + gap: 1.5rem } .product-recommendations-wrapper :is(.gap-x-4) { -moz-column-gap: 1rem; - column-gap: 1rem; + column-gap: 1rem } .product-recommendations-wrapper :is(.space-x-2 > :not([hidden]) ~ :not([hidden])) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))) } .product-recommendations-wrapper :is(.space-x-4 > :not([hidden]) ~ :not([hidden])) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))) } .product-recommendations-wrapper :is(.space-y-3 > :not([hidden]) ~ :not([hidden])) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); + margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)) } .product-recommendations-wrapper :is(.overflow-hidden) { - overflow: hidden; + overflow: hidden } .product-recommendations-wrapper :is(.overflow-x-auto) { - overflow-x: auto; + overflow-x: auto } .product-recommendations-wrapper :is(.scroll-smooth) { - scroll-behavior: smooth; + scroll-behavior: smooth } .product-recommendations-wrapper :is(.\!break-words) { - overflow-wrap: break-word !important; + overflow-wrap: break-word !important } .product-recommendations-wrapper :is(.break-words) { - overflow-wrap: break-word; + overflow-wrap: break-word } .product-recommendations-wrapper :is(.\!rounded-full) { - border-radius: 9999px !important; + border-radius: 9999px !important } .product-recommendations-wrapper :is(.rounded-lg) { - border-radius: 0.5rem; + border-radius: 0.5rem } .product-recommendations-wrapper :is(.rounded-md) { - border-radius: 0.375rem; + border-radius: 0.375rem } .product-recommendations-wrapper :is(.border) { - border-width: 1px; + border-width: 1px } .product-recommendations-wrapper :is(.border-8) { - border-width: 8px; + border-width: 8px } .product-recommendations-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .product-recommendations-wrapper :is(.bg-gray-100) { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(243 244 246 / var(--tw-bg-opacity)) } .product-recommendations-wrapper :is(.bg-white) { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } .product-recommendations-wrapper :is(.\!px-7) { padding-left: 1.75rem !important; - padding-right: 1.75rem !important; + padding-right: 1.75rem !important } .product-recommendations-wrapper :is(.px-2) { padding-left: 0.5rem; - padding-right: 0.5rem; + padding-right: 0.5rem } .product-recommendations-wrapper :is(.px-4) { padding-left: 1rem; - padding-right: 1rem; + padding-right: 1rem } .product-recommendations-wrapper :is(.px-6) { padding-left: 1.5rem; - padding-right: 1.5rem; + padding-right: 1.5rem } .product-recommendations-wrapper :is(.py-5) { padding-top: 1.25rem; - padding-bottom: 1.25rem; + padding-bottom: 1.25rem } .product-recommendations-wrapper :is(.pb-2) { - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } .product-recommendations-wrapper :is(.pt-8) { - padding-top: 2rem; + padding-top: 2rem } .product-recommendations-wrapper :is(.\!text-lg) { font-size: 1.125rem !important; - line-height: 1.75rem !important; + line-height: 1.75rem !important } .product-recommendations-wrapper :is(.text-base) { font-size: 1rem; - line-height: 1.5rem; + line-height: 1.5rem } .product-recommendations-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .product-recommendations-wrapper :is(.\!font-semibold) { - font-weight: 700 !important; + font-weight: 700 !important } .product-recommendations-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .product-recommendations-wrapper :is(.\!text-danahergray-900) { --tw-text-opacity: 1 !important; - color: rgb(17 24 39 / var(--tw-text-opacity)) !important; + color: rgb(17 24 39 / var(--tw-text-opacity)) !important } .product-recommendations-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); + color: rgb(117 35 255 / var(--tw-text-opacity)) } .product-recommendations-wrapper :is(.text-gray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } .product-recommendations-wrapper :is(.shadow-lg) { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .product-recommendations-wrapper :is(.transition) { @@ -863,48 +327,48 @@ video { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .product-recommendations-wrapper :is(.duration-500) { - transition-duration: 500ms; + transition-duration: 500ms } .product-recommendations-wrapper :is(.hover\:scale-105:hover) { --tw-scale-x: 1.05; --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } @media (min-width: 640px) { .product-recommendations-wrapper :is(.sm\:grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } .product-recommendations-wrapper :is(.sm\:px-0) { padding-left: 0px; - padding-right: 0px; + padding-right: 0px } } @media (min-width: 768px) { .product-recommendations-wrapper :is(.md\:auto-cols-\[calc\(100\%\/2\)\]) { - grid-auto-columns: calc(100% / 2); + grid-auto-columns: calc(100% / 2) } } @media (min-width: 1024px) { .product-recommendations-wrapper :is(.lg\:auto-cols-\[calc\(\(100\%\/3\)-20px\)\]) { - grid-auto-columns: calc((100% / 3) - 20px); + grid-auto-columns: calc((100% / 3) - 20px) } .product-recommendations-wrapper :is(.lg\:grid-cols-4) { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)) } } @media (min-width: 1280px) { .product-recommendations-wrapper :is(.xl\:auto-cols-\[calc\(\(100\%\/4\)-20px\)\]) { - grid-auto-columns: calc((100% / 4) - 20px); + grid-auto-columns: calc((100% / 4) - 20px) } } \ No newline at end of file diff --git a/blocks/product-specifications/product-specifications.css b/blocks/product-specifications/product-specifications.css index 9422907cc..c99a714c4 100644 --- a/blocks/product-specifications/product-specifications.css +++ b/blocks/product-specifications/product-specifications.css @@ -1,683 +1,147 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .product-specifications-wrapper :is(.my-auto) { margin-top: auto; - margin-bottom: auto; + margin-bottom: auto } .product-specifications-wrapper :is(.mt-2) { - margin-top: 0.5rem; + margin-top: 0.5rem } .product-specifications-wrapper :is(.block) { - display: block; + display: block } .product-specifications-wrapper :is(.flex) { - display: flex; + display: flex } .product-specifications-wrapper :is(.h-full) { - height: 100%; + height: 100% } .product-specifications-wrapper :is(.w-full) { - width: 100%; + width: 100% } .product-specifications-wrapper :is(.min-w-full) { - min-width: 100%; + min-width: 100% } .product-specifications-wrapper :is(.flex-row) { - flex-direction: row; + flex-direction: row } .product-specifications-wrapper :is(.flex-wrap) { - flex-wrap: wrap; + flex-wrap: wrap } .product-specifications-wrapper :is(.divide-y > :not([hidden]) ~ :not([hidden])) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) } .product-specifications-wrapper :is(.divide-gray-300 > :not([hidden]) ~ :not([hidden])) { --tw-divide-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-divide-opacity)); + border-color: rgb(209 213 219 / var(--tw-divide-opacity)) } .product-specifications-wrapper :is(.break-words) { - overflow-wrap: break-word; + overflow-wrap: break-word } .product-specifications-wrapper :is(.rounded-lg) { - border-radius: 0.5rem; + border-radius: 0.5rem } .product-specifications-wrapper :is(.border) { - border-width: 1px; + border-width: 1px } .product-specifications-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .product-specifications-wrapper :is(.bg-gray-100) { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(243 244 246 / var(--tw-bg-opacity)) } .product-specifications-wrapper :is(.p-4) { - padding: 1rem; + padding: 1rem } .product-specifications-wrapper :is(.px-1) { padding-left: 0.25rem; - padding-right: 0.25rem; + padding-right: 0.25rem } .product-specifications-wrapper :is(.pt-12) { - padding-top: 3rem; + padding-top: 3rem } .product-specifications-wrapper :is(.align-middle) { - vertical-align: middle; + vertical-align: middle } .product-specifications-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .product-specifications-wrapper :is(.text-xl) { font-size: 1.25rem; - line-height: 1.75rem; + line-height: 1.75rem } .product-specifications-wrapper :is(.font-medium) { - font-weight: 500; + font-weight: 500 } .product-specifications-wrapper :is(.font-normal) { - font-weight: 200; + font-weight: 200 } .product-specifications-wrapper :is(.leading-6) { - line-height: 1.5rem; + line-height: 1.5rem } .product-specifications-wrapper :is(.text-black) { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity)) } .product-specifications-wrapper :is(.text-gray-700) { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)) } .product-specifications-wrapper :is(.text-gray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } @media (min-width: 640px) { .product-specifications-wrapper :is(.sm\:flex) { - display: flex; + display: flex } .product-specifications-wrapper :is(.sm\:flex-auto) { - flex: 1 1 auto; + flex: 1 1 auto } .product-specifications-wrapper :is(.sm\:items-center) { - align-items: center; + align-items: center } } @media (min-width: 768px) { .product-specifications-wrapper :is(.md\:w-1\/4) { - width: 25%; + width: 25% } .product-specifications-wrapper :is(.md\:w-2\/4) { - width: 50%; + width: 50% } } \ No newline at end of file diff --git a/blocks/recent-articles/recent-articles.css b/blocks/recent-articles/recent-articles.css index 23969df4f..5e28dd21e 100644 --- a/blocks/recent-articles/recent-articles.css +++ b/blocks/recent-articles/recent-articles.css @@ -1,724 +1,188 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .recent-articles-wrapper :is(.my-0) { margin-top: 0px; - margin-bottom: 0px; + margin-bottom: 0px } .recent-articles-wrapper :is(.mb-0) { - margin-bottom: 0px; + margin-bottom: 0px } .recent-articles-wrapper :is(.ml-0) { - margin-left: 0px; + margin-left: 0px } .recent-articles-wrapper :is(.ml-0\.5) { - margin-left: 0.125rem; + margin-left: 0.125rem } .recent-articles-wrapper :is(.mt-2) { - margin-top: 0.5rem; + margin-top: 0.5rem } .recent-articles-wrapper :is(.block) { - display: block; + display: block } .recent-articles-wrapper :is(.flex) { - display: flex; + display: flex } .recent-articles-wrapper :is(.h-4) { - height: 1rem; + height: 1rem } .recent-articles-wrapper :is(.w-4) { - width: 1rem; + width: 1rem } .recent-articles-wrapper :is(.flex-shrink-0) { - flex-shrink: 0; + flex-shrink: 0 } .recent-articles-wrapper :is(.items-center) { - align-items: center; + align-items: center } .recent-articles-wrapper :is(.justify-between) { - justify-content: space-between; + justify-content: space-between } .recent-articles-wrapper :is(.divide-y > :not([hidden]) ~ :not([hidden])) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) } .recent-articles-wrapper :is(.rounded) { - border-radius: 0.25rem; + border-radius: 0.25rem } .recent-articles-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .recent-articles-wrapper :is(.bg-danaherpurple-25) { --tw-bg-opacity: 1; - background-color: rgb(245 239 255 / var(--tw-bg-opacity)); + background-color: rgb(245 239 255 / var(--tw-bg-opacity)) } .recent-articles-wrapper :is(.p-1) { - padding: 0.25rem; + padding: 0.25rem } .recent-articles-wrapper :is(.p-1\.5) { - padding: 0.375rem; + padding: 0.375rem } .recent-articles-wrapper :is(.px-2) { padding-left: 0.5rem; - padding-right: 0.5rem; + padding-right: 0.5rem } .recent-articles-wrapper :is(.px-4) { padding-left: 1rem; - padding-right: 1rem; + padding-right: 1rem } .recent-articles-wrapper :is(.pb-0) { - padding-bottom: 0px; + padding-bottom: 0px } .recent-articles-wrapper :is(.pb-2) { - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } .recent-articles-wrapper :is(.pb-4) { - padding-bottom: 1rem; + padding-bottom: 1rem } .recent-articles-wrapper :is(.pt-0) { - padding-top: 0px; + padding-top: 0px } .recent-articles-wrapper :is(.pt-2) { - padding-top: 0.5rem; + padding-top: 0.5rem } .recent-articles-wrapper :is(.text-sm) { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.25rem } .recent-articles-wrapper :is(.text-xl) { font-size: 1.25rem; - line-height: 1.75rem; + line-height: 1.75rem } .recent-articles-wrapper :is(.text-xs) { font-size: 0.75rem; - line-height: 1rem; + line-height: 1rem } .recent-articles-wrapper :is(.\!font-normal) { - font-weight: 200 !important; + font-weight: 200 !important } .recent-articles-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .recent-articles-wrapper :is(.font-medium) { - font-weight: 500; + font-weight: 500 } .recent-articles-wrapper :is(.font-normal) { - font-weight: 200; + font-weight: 200 } .recent-articles-wrapper :is(.font-semibold) { - font-weight: 700; + font-weight: 700 } .recent-articles-wrapper :is(.leading-5) { - line-height: 1.25rem; + line-height: 1.25rem } .recent-articles-wrapper :is(.leading-7) { - line-height: 1.75rem; + line-height: 1.75rem } .recent-articles-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); + color: rgb(117 35 255 / var(--tw-text-opacity)) } .recent-articles-wrapper :is(.text-gray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } .recent-articles-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .recent-articles-wrapper :is(.transition-transform) { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 150ms } .hover\:bg-danaherpurple-50:hover { - background-color: #EADEFF; + background-color: #EADEFF } .recent-articles-wrapper :is(.hover\:scale-\[\.99\]:hover) { --tw-scale-x: .99; --tw-scale-y: .99; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .recent-articles-wrapper :is(.hover\:bg-danaherpurple-50:hover) { --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); + background-color: rgb(234 222 255 / var(--tw-bg-opacity)) } .recent-articles-wrapper :is(.hover\:font-bold:hover) { - font-weight: 700; + font-weight: 700 } \ No newline at end of file diff --git a/blocks/related-articles/related-articles.css b/blocks/related-articles/related-articles.css index 940d75ffa..1d9f49f45 100644 --- a/blocks/related-articles/related-articles.css +++ b/blocks/related-articles/related-articles.css @@ -1,650 +1,114 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .container { - width: 100%; + width: 100% } @media (min-width: 640px) { .container { - max-width: 640px; + max-width: 640px } } @media (min-width: 768px) { .container { - max-width: 768px; + max-width: 768px } } @media (min-width: 1024px) { .container { - max-width: 1024px; + max-width: 1024px } } @media (min-width: 1280px) { .container { - max-width: 1280px; + max-width: 1280px } } @media (min-width: 1536px) { .container { - max-width: 1536px; + max-width: 1536px } } .related-articles-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .related-articles-wrapper :is(.mb-3) { - margin-bottom: 0.75rem; + margin-bottom: 0.75rem } .related-articles-wrapper :is(.mt-3) { - margin-top: 0.75rem; + margin-top: 0.75rem } .related-articles-wrapper :is(.block) { - display: block; + display: block } .related-articles-wrapper :is(.grid) { - display: grid; + display: grid } .related-articles-wrapper :is(.w-full) { - width: 100%; + width: 100% } .related-articles-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .related-articles-wrapper :is(.grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .related-articles-wrapper :is(.justify-items-center) { - justify-items: center; + justify-items: center } .related-articles-wrapper :is(.gap-6) { - gap: 1.5rem; + gap: 1.5rem } .related-articles-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .related-articles-wrapper :is(.px-3) { padding-left: 0.75rem; - padding-right: 0.75rem; + padding-right: 0.75rem } .related-articles-wrapper :is(.text-lg) { font-size: 1.125rem; - line-height: 1.75rem; + line-height: 1.75rem } .related-articles-wrapper :is(.font-semibold) { - font-weight: 700; + font-weight: 700 } .related-articles-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } @media (min-width: 640px) { .related-articles-wrapper :is(.sm\:grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .related-articles-wrapper :is(.sm\:px-0) { padding-left: 0px; - padding-right: 0px; + padding-right: 0px } } @media (min-width: 1024px) { .related-articles-wrapper :is(.lg\:grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } } \ No newline at end of file diff --git a/blocks/side-nav/side-nav.css b/blocks/side-nav/side-nav.css index ebefdb0ca..08738be0e 100644 --- a/blocks/side-nav/side-nav.css +++ b/blocks/side-nav/side-nav.css @@ -1,646 +1,110 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .bg-danaherpurple-50 { - background-color: #EADEFF; + background-color: #EADEFF } .side-nav-wrapper :is(.block) { - display: block; + display: block } .side-nav-wrapper :is(.flex) { - display: flex; + display: flex } .side-nav-wrapper :is(.hidden) { - display: none; + display: none } .side-nav-wrapper :is(.w-full) { - width: 100%; + width: 100% } .side-nav-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .side-nav-wrapper :is(.items-start) { - align-items: flex-start; + align-items: flex-start } .side-nav-wrapper :is(.gap-3) { - gap: 0.75rem; + gap: 0.75rem } .side-nav-wrapper :is(.border-b) { - border-bottom-width: 1px; + border-bottom-width: 1px } .side-nav-wrapper :is(.border-gray-300) { --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); + border-color: rgb(209 213 219 / var(--tw-border-opacity)) } .side-nav-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .side-nav-wrapper :is(.bg-danaherpurple-50) { --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); + background-color: rgb(234 222 255 / var(--tw-bg-opacity)) } .side-nav-wrapper :is(.p-2) { - padding: 0.5rem; + padding: 0.5rem } .side-nav-wrapper :is(.px-2) { padding-left: 0.5rem; - padding-right: 0.5rem; + padding-right: 0.5rem } .side-nav-wrapper :is(.py-4) { padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 1rem } .side-nav-wrapper :is(.pt-20) { - padding-top: 5rem; + padding-top: 5rem } .side-nav-wrapper :is(.pt-6) { - padding-top: 1.5rem; + padding-top: 1.5rem } .side-nav-wrapper :is(.text-base) { font-size: 1rem; - line-height: 1.5rem; + line-height: 1.5rem } .side-nav-wrapper :is(.text-lg) { font-size: 1.125rem; - line-height: 1.75rem; + line-height: 1.75rem } .side-nav-wrapper :is(.font-bold) { - font-weight: 700; + font-weight: 700 } .side-nav-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .hover\:bg-danaherpurple-50:hover { - background-color: #EADEFF; + background-color: #EADEFF } .side-nav-wrapper :is(.hover\:bg-danaherpurple-25:hover) { --tw-bg-opacity: 1; - background-color: rgb(245 239 255 / var(--tw-bg-opacity)); + background-color: rgb(245 239 255 / var(--tw-bg-opacity)) } .side-nav-wrapper :is(.hover\:bg-danaherpurple-50:hover) { --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); + background-color: rgb(234 222 255 / var(--tw-bg-opacity)) } @media (min-width: 1024px) { .side-nav-wrapper :is(.lg\:block) { - display: block; + display: block } } \ No newline at end of file diff --git a/blocks/social-feeds/social-feeds.css b/blocks/social-feeds/social-feeds.css index 1f2239f3a..50df417db 100644 --- a/blocks/social-feeds/social-feeds.css +++ b/blocks/social-feeds/social-feeds.css @@ -1,540 +1,4 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .social-feeds-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } \ No newline at end of file diff --git a/blocks/social-media/social-media.css b/blocks/social-media/social-media.css index 3d3c717cc..414c7d8ee 100644 --- a/blocks/social-media/social-media.css +++ b/blocks/social-media/social-media.css @@ -1,600 +1,64 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .social-media-wrapper :is(.relative) { - position: relative; + position: relative } .social-media-wrapper :is(.z-10) { - z-index: 10; + z-index: 10 } .social-media-wrapper :is(.my-auto) { margin-top: auto; - margin-bottom: auto; + margin-bottom: auto } .social-media-wrapper :is(.mb-4) { - margin-bottom: 1rem; + margin-bottom: 1rem } .social-media-wrapper :is(.block) { - display: block; + display: block } .social-media-wrapper :is(.flex) { - display: flex; + display: flex } .social-media-wrapper :is(.items-center) { - align-items: center; + align-items: center } .social-media-wrapper :is(.justify-between) { - justify-content: space-between; + justify-content: space-between } .social-media-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .social-media-wrapper :is(.pb-2) { - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } .social-media-wrapper :is(.pt-6) { - padding-top: 1.5rem; + padding-top: 1.5rem } .social-media-wrapper :is(.text-base) { font-size: 1rem; - line-height: 1.5rem; + line-height: 1.5rem } .social-media-wrapper :is(.font-semibold) { - font-weight: 700; + font-weight: 700 } .social-media-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); + color: rgb(117 35 255 / var(--tw-text-opacity)) } .social-media-wrapper :is(.text-gray-600) { --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); + color: rgb(75 85 99 / var(--tw-text-opacity)) } \ No newline at end of file diff --git a/blocks/stats/stats.css b/blocks/stats/stats.css index ceabedd33..58f11aec7 100644 --- a/blocks/stats/stats.css +++ b/blocks/stats/stats.css @@ -1,629 +1,93 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .stats-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .stats-wrapper :is(.mt-3) { - margin-top: 0.75rem; + margin-top: 0.75rem } .stats-wrapper :is(.block) { - display: block; + display: block } .stats-wrapper :is(.max-w-4xl) { - max-width: 56rem; + max-width: 56rem } .stats-wrapper :is(.max-w-7xl) { - max-width: 80rem; + max-width: 80rem } .stats-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .stats-wrapper :is(.px-4) { padding-left: 1rem; - padding-right: 1rem; + padding-right: 1rem } .stats-wrapper :is(.pt-12) { - padding-top: 3rem; + padding-top: 3rem } .stats-wrapper :is(.text-center) { - text-align: center; + text-align: center } .stats-wrapper :is(.text-3xl) { font-size: 1.875rem; - line-height: 2.25rem; + line-height: 2.25rem } .stats-wrapper :is(.text-xl) { font-size: 1.25rem; - line-height: 1.75rem; + line-height: 1.75rem } .stats-wrapper :is(.font-extrabold) { - font-weight: 800; + font-weight: 800 } .stats-wrapper :is(.tracking-tight) { - letter-spacing: -0.025em; + letter-spacing: -0.025em } .stats-wrapper :is(.text-gray-500) { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity)) } .stats-wrapper :is(.text-gray-900) { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)) } @media (min-width: 640px) { .stats-wrapper :is(.sm\:mt-4) { - margin-top: 1rem; + margin-top: 1rem } .stats-wrapper :is(.sm\:px-6) { padding-left: 1.5rem; - padding-right: 1.5rem; + padding-right: 1.5rem } .stats-wrapper :is(.sm\:pt-16) { - padding-top: 4rem; + padding-top: 4rem } .stats-wrapper :is(.sm\:text-4xl) { font-size: 2.25rem; - line-height: 2.5rem; + line-height: 2.5rem } } @media (min-width: 1024px) { .stats-wrapper :is(.lg\:px-8) { padding-left: 2rem; - padding-right: 2rem; + padding-right: 2rem } } \ No newline at end of file diff --git a/build-css.js b/build-css.js index 9e870410f..672a620e2 100644 --- a/build-css.js +++ b/build-css.js @@ -213,7 +213,7 @@ fileMappings.forEach(({ content, input, output, wrapper, }) => { process.env.IMPORTANT_WRAPPER = `.${wrapper}`; - const command = `npx tailwindcss ${input ? `-i ${input}` : ''} ${content ? `--content ${content}` : ''} -o ${output} ${watch ? '--watch' : ''}`; + const command = `npx tailwindcss ${input ? `-i ${input}` : './styles/proxy-tailwind.css'} ${content ? `--content ${content}` : ''} -o ${output} ${watch ? '--watch' : ''}`; exec(command, (error, stdout, stderr) => { if (error) { // eslint-disable-next-line no-console diff --git a/styles/proxy-tailwind.css b/styles/proxy-tailwind.css new file mode 100644 index 000000000..5b0ba61d4 --- /dev/null +++ b/styles/proxy-tailwind.css @@ -0,0 +1,2 @@ +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index ccb16ac35..b6ff1f149 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -507,6 +507,13 @@ h6 { font-weight: 200; } +.eyebrow { + font-size: 1.125rem; + line-height: 1.75rem; + --tw-text-opacity: 1; + color: rgb(64 0 165 / var(--tw-text-opacity)); +} + main .default-content-wrapper h1 { font-size: 2.25rem; line-height: 2.5rem; @@ -657,6 +664,13 @@ main .default-content-wrapper h2 { } } +.eyebrow { + color: #4000A5; + font-size: 1.125rem; + font-weight: 500; + line-height: 1.75rem; +} + .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } @@ -1889,6 +1903,10 @@ svg symbol path { visibility: visible; } +.collapse { + visibility: collapse; +} + .static { position: static; } @@ -1897,6 +1915,10 @@ svg symbol path { position: fixed; } +.absolute { + position: absolute; +} + .relative { position: relative; } @@ -1997,6 +2019,10 @@ svg symbol path { margin-top: -1px; } +.mr-12 { + margin-right: 3rem; +} + .line-clamp-2 { overflow: hidden; display: -webkit-box; @@ -2056,6 +2082,10 @@ svg symbol path { height: 100%; } +.h-6 { + height: 1.5rem; +} + .w-10 { width: 2.5rem; } @@ -2080,6 +2110,10 @@ svg symbol path { width: 100%; } +.w-6 { + width: 1.5rem; +} + .max-w-7xl { max-width: 80rem; } @@ -2100,6 +2134,30 @@ svg symbol path { flex-shrink: 0; } +.border-collapse { + border-collapse: collapse; +} + +.rotate-0 { + --tw-rotate: 0deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.rotate-180 { + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.rotate-45 { + --tw-rotate: 45deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.rotate-90 { + --tw-rotate: 90deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @@ -2166,6 +2224,10 @@ svg symbol path { gap: 1rem; } +.gap-16 { + gap: 4rem; +} + .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; @@ -2181,6 +2243,17 @@ svg symbol path { margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } +.divide-y > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.divide-gray-900 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(17 24 39 / var(--tw-divide-opacity)); +} + .overflow-hidden { overflow: hidden; } @@ -2276,6 +2349,10 @@ svg symbol path { --tw-bg-opacity: 0.1; } +.fill-current { + fill: currentColor; +} + .stroke-danaherpurple-500 { stroke: #7523FF; } @@ -2284,6 +2361,10 @@ svg symbol path { stroke: #fff; } +.stroke-black { + stroke: #000; +} + .object-cover { -o-object-fit: cover; object-fit: cover; @@ -2451,6 +2532,10 @@ svg symbol path { line-height: 1.5rem; } +.leading-7 { + line-height: 1.75rem; +} + .tracking-tight { letter-spacing: -0.025em; } @@ -2509,6 +2594,23 @@ svg symbol path { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.underline { + text-decoration-line: underline; +} + +.opacity-0 { + opacity: 0; +} + +.opacity-100 { + opacity: 1; +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2539,6 +2641,10 @@ svg symbol path { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.outline { + outline-style: solid; +} + .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -2562,6 +2668,14 @@ svg symbol path { transition-duration: 150ms; } +.duration-300 { + transition-duration: 300ms; +} + +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + main .section.top-border { margin: auto; margin-top: 2.5rem; From 1127930cb9f3b238864dc6ddb22b245b28541bd6 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 16 May 2024 16:54:13 +0530 Subject: [PATCH 79/88] Fixed banner headings --- blocks/banner/banner.css | 12 ++--- blocks/banner/banner.js | 4 +- styles/styles.css | 114 --------------------------------------- 3 files changed, 8 insertions(+), 122 deletions(-) diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css index 2876c72c9..78ab8a4ce 100644 --- a/blocks/banner/banner.css +++ b/blocks/banner/banner.css @@ -54,14 +54,14 @@ padding-right: 1.5rem } -.banner :is(.text-4xl) { - font-size: 2.25rem; - line-height: 2.5rem +.banner :is(.\!text-4xl) { + font-size: 2.25rem !important; + line-height: 2.5rem !important } -.banner :is(.text-lg) { - font-size: 1.125rem; - line-height: 1.75rem +.banner :is(.\!text-lg) { + font-size: 1.125rem !important; + line-height: 1.75rem !important } .banner :is(.font-extrabold) { diff --git a/blocks/banner/banner.js b/blocks/banner/banner.js index e6a289c17..77215d1d6 100644 --- a/blocks/banner/banner.js +++ b/blocks/banner/banner.js @@ -7,10 +7,10 @@ export default function decorate(block) { const innerContent = content?.querySelector('div'); innerContent.classList.add(...'relative max-w-7xl mx-auto w-full p-4 text-white'.split(' ')); const contentH1 = innerContent?.querySelector('h1'); - contentH1.classList.add(...'text-4xl font-extrabold tracking-tight text-white'.split(' ')); + contentH1.classList.add(...'!text-4xl font-extrabold tracking-tight text-white'.split(' ')); if (innerContent?.querySelector('h2')) { const contentH2 = innerContent?.querySelector('h2'); - contentH2.classList.add(...'w-full md:w-3/4 text-lg font-normal tracking-tight text-white'.split(' ')); + contentH2.classList.add(...'w-full md:w-3/4 !text-lg font-normal tracking-tight text-white'.split(' ')); } main.parentNode.insertBefore(block, main); } diff --git a/styles/styles.css b/styles/styles.css index b6ff1f149..ccb16ac35 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -507,13 +507,6 @@ h6 { font-weight: 200; } -.eyebrow { - font-size: 1.125rem; - line-height: 1.75rem; - --tw-text-opacity: 1; - color: rgb(64 0 165 / var(--tw-text-opacity)); -} - main .default-content-wrapper h1 { font-size: 2.25rem; line-height: 2.5rem; @@ -664,13 +657,6 @@ main .default-content-wrapper h2 { } } -.eyebrow { - color: #4000A5; - font-size: 1.125rem; - font-weight: 500; - line-height: 1.75rem; -} - .carousel-wrapper .carousel, .product-recommendations-wrapper .product-recommendations { scrollbar-width: none; } @@ -1903,10 +1889,6 @@ svg symbol path { visibility: visible; } -.collapse { - visibility: collapse; -} - .static { position: static; } @@ -1915,10 +1897,6 @@ svg symbol path { position: fixed; } -.absolute { - position: absolute; -} - .relative { position: relative; } @@ -2019,10 +1997,6 @@ svg symbol path { margin-top: -1px; } -.mr-12 { - margin-right: 3rem; -} - .line-clamp-2 { overflow: hidden; display: -webkit-box; @@ -2082,10 +2056,6 @@ svg symbol path { height: 100%; } -.h-6 { - height: 1.5rem; -} - .w-10 { width: 2.5rem; } @@ -2110,10 +2080,6 @@ svg symbol path { width: 100%; } -.w-6 { - width: 1.5rem; -} - .max-w-7xl { max-width: 80rem; } @@ -2134,30 +2100,6 @@ svg symbol path { flex-shrink: 0; } -.border-collapse { - border-collapse: collapse; -} - -.rotate-0 { - --tw-rotate: 0deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.rotate-180 { - --tw-rotate: 180deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.rotate-45 { - --tw-rotate: 45deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.rotate-90 { - --tw-rotate: 90deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @@ -2224,10 +2166,6 @@ svg symbol path { gap: 1rem; } -.gap-16 { - gap: 4rem; -} - .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; @@ -2243,17 +2181,6 @@ svg symbol path { margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } -.divide-y > :not([hidden]) ~ :not([hidden]) { - --tw-divide-y-reverse: 0; - border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); -} - -.divide-gray-900 > :not([hidden]) ~ :not([hidden]) { - --tw-divide-opacity: 1; - border-color: rgb(17 24 39 / var(--tw-divide-opacity)); -} - .overflow-hidden { overflow: hidden; } @@ -2349,10 +2276,6 @@ svg symbol path { --tw-bg-opacity: 0.1; } -.fill-current { - fill: currentColor; -} - .stroke-danaherpurple-500 { stroke: #7523FF; } @@ -2361,10 +2284,6 @@ svg symbol path { stroke: #fff; } -.stroke-black { - stroke: #000; -} - .object-cover { -o-object-fit: cover; object-fit: cover; @@ -2532,10 +2451,6 @@ svg symbol path { line-height: 1.5rem; } -.leading-7 { - line-height: 1.75rem; -} - .tracking-tight { letter-spacing: -0.025em; } @@ -2594,23 +2509,6 @@ svg symbol path { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -.underline { - text-decoration-line: underline; -} - -.opacity-0 { - opacity: 0; -} - -.opacity-100 { - opacity: 1; -} - .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2641,10 +2539,6 @@ svg symbol path { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.outline { - outline-style: solid; -} - .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -2668,14 +2562,6 @@ svg symbol path { transition-duration: 150ms; } -.duration-300 { - transition-duration: 300ms; -} - -.ease-in-out { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - main .section.top-border { margin: auto; margin-top: 2.5rem; From c75a2fb8fc7de057ef4f5b84ee268607782a5b1d Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 16 May 2024 17:06:43 +0530 Subject: [PATCH 80/88] Article list heading fixed --- blocks/articles-list/articles-list.css | 126 +++++++++++++++++++++++++ build-css.js | 2 +- 2 files changed, 127 insertions(+), 1 deletion(-) diff --git a/blocks/articles-list/articles-list.css b/blocks/articles-list/articles-list.css index fbb3e0b71..916d7fbf5 100644 --- a/blocks/articles-list/articles-list.css +++ b/blocks/articles-list/articles-list.css @@ -32,15 +32,45 @@ } } +.eyebrow-sm { + color: #4000A5; + font-size: 0.875rem; + line-height: 1.25rem; + opacity: 1 +} + +.articles-list-wrapper :is(.relative) { + position: relative +} + +.articles-list-wrapper :is(.col-span-1) { + grid-column: span 1 / span 1 +} + .articles-list-wrapper :is(.mx-auto) { margin-left: auto; margin-right: auto } +.articles-list-wrapper :is(.mb-4) { + margin-bottom: 1rem +} + .articles-list-wrapper :is(.mt-4) { margin-top: 1rem } +.articles-list-wrapper :is(.mt-auto) { + margin-top: auto +} + +.articles-list-wrapper :is(.line-clamp-3) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3 +} + .articles-list-wrapper :is(.\!block) { display: block !important } @@ -53,10 +83,22 @@ display: flex } +.articles-list-wrapper :is(.inline-flex) { + display: inline-flex +} + .articles-list-wrapper :is(.grid) { display: grid } +.articles-list-wrapper :is(.\!h-20) { + height: 5rem !important +} + +.articles-list-wrapper :is(.h-full) { + height: 100% +} + .articles-list-wrapper :is(.w-full) { width: 100% } @@ -65,14 +107,26 @@ max-width: 80rem } +.articles-list-wrapper :is(.transform) { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) +} + .articles-list-wrapper :is(.grid-cols-1) { grid-template-columns: repeat(1, minmax(0, 1fr)) } +.articles-list-wrapper :is(.flex-col) { + flex-direction: column +} + .articles-list-wrapper :is(.items-center) { align-items: center } +.articles-list-wrapper :is(.justify-center) { + justify-content: center +} + .articles-list-wrapper :is(.justify-between) { justify-content: space-between } @@ -91,6 +145,14 @@ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)) } +.articles-list-wrapper :is(.overflow-hidden) { + overflow: hidden +} + +.articles-list-wrapper :is(.break-words) { + overflow-wrap: break-word +} + .articles-list-wrapper :is(.border-t) { border-top-width: 1px } @@ -109,15 +171,39 @@ background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } +.articles-list-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) +} + .articles-list-wrapper :is(.px-3) { padding-left: 0.75rem; padding-right: 0.75rem } +.articles-list-wrapper :is(.py-5) { + padding-top: 1.25rem; + padding-bottom: 1.25rem +} + +.articles-list-wrapper :is(.pl-2) { + padding-left: 0.5rem +} + .articles-list-wrapper :is(.pt-4) { padding-top: 1rem } +.articles-list-wrapper :is(.\!text-xl) { + font-size: 1.25rem !important; + line-height: 1.75rem !important +} + +.articles-list-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem +} + .articles-list-wrapper :is(.text-sm) { font-size: 0.875rem; line-height: 1.25rem @@ -127,15 +213,55 @@ font-weight: 700 } +.articles-list-wrapper :is(.font-extralight) { + font-weight: 200 +} + +.articles-list-wrapper :is(.font-medium) { + font-weight: 500 +} + +.articles-list-wrapper :is(.font-semibold) { + font-weight: 700 +} + +.articles-list-wrapper :is(.text-black) { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)) +} + .articles-list-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; color: rgb(117 35 255 / var(--tw-text-opacity)) } +.articles-list-wrapper :is(.text-gray-500) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)) +} + .articles-list-wrapper :is(.filter) { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } +.articles-list-wrapper :is(.transition) { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms +} + +.articles-list-wrapper :is(.duration-500) { + transition-duration: 500ms +} + +.articles-list-wrapper :is(.hover\:scale-105:hover) { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) +} + @media (min-width: 640px) { .articles-list-wrapper :is(.sm\:grid-cols-1) { grid-template-columns: repeat(1, minmax(0, 1fr)) diff --git a/build-css.js b/build-css.js index 672a620e2..2a0f53372 100644 --- a/build-css.js +++ b/build-css.js @@ -12,7 +12,7 @@ const fileMappings = [ wrapper: 'accordion-wrapper', }, { - content: './blocks/articles-list/articles-list.js', + content: ['./blocks/articles-list/articles-list.js', './blocks/card-list/articleCard.js'], output: './blocks/articles-list/articles-list.css', wrapper: 'articles-list-wrapper', }, From 8c3ac77a7f7aae97e63131ac5c4a02035490cdb2 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Thu, 16 May 2024 19:02:52 +0530 Subject: [PATCH 81/88] [FIX] Home page nav bar CLS issue --- blocks/header/header.css | 4 ++++ blocks/header/header.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 3e3baa629..bc6c6d53d 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -830,6 +830,10 @@ display: none } + .header-wrapper :is(.lg\:h-\[100px\]) { + height: 100px + } + .header-wrapper :is(.lg\:w-44) { width: 11rem } diff --git a/blocks/header/header.js b/blocks/header/header.js index 1cfd142e7..1c402bdd8 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -427,7 +427,7 @@ function buildLoggedInUserBlock(loginLink, user) { function buildSearchBlock(headerBlock) { const searchHtmlBlock = headerBlock.children[1]; - searchHtmlBlock.className = 'navbar-wrapper bg-white z-50 py-2 md:py-4 lg:pt-4 lg:pb-1 mb-[2px] space-y-2 shadow-sm'; + searchHtmlBlock.className = 'navbar-wrapper lg:h-[100px] bg-white z-50 py-2 md:py-4 lg:pt-4 lg:pb-1 mb-[2px] space-y-2 shadow-sm'; searchHtmlBlock.id = 'sticky-header'; const searchHtmlBlockInner = div({ class: 'w-full flex flex-row flex-wrap justify-between' }); const searchNewBlock = div({ class: 'bg-white flex items-center mx-auto max-w-7xl flex-row lg:px-8' }); From 7c37e95ef170d41a7f8c8984634481a850c28f28 Mon Sep 17 00:00:00 2001 From: jckautzmann <jkautzma@adobe.com> Date: Fri, 17 May 2024 10:12:56 +0200 Subject: [PATCH 82/88] [UE] Implement UE support for "topics" pages (#1118) - support CTA with 2 buttons --- component-models.json | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/component-models.json b/component-models.json index 310522dcc..224a316b8 100644 --- a/component-models.json +++ b/component-models.json @@ -233,14 +233,28 @@ { "component": "aem-content", "valueType": "string", - "name": "content_link", + "name": "content_link1", "value": "", "label": "Link" }, { "component": "text", "valueType": "string", - "name": "content_linkText", + "name": "content_link1Text", + "value": "", + "label": "Text" + }, + { + "component": "reference", + "valueType": "string", + "name": "content_link2", + "value": "", + "label": "Link" + }, + { + "component": "text", + "valueType": "string", + "name": "content_link2Text", "value": "", "label": "Text" } From 7ae0d9ae6a9411768b6de69554e2739145720054 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Fri, 17 May 2024 14:42:37 +0530 Subject: [PATCH 83/88] [Bug] Timeline block h2 element broken --- blocks/timeline/timeline.css | 734 +++++------------------------------ blocks/timeline/timeline.js | 4 +- build-css.js | 5 + 3 files changed, 105 insertions(+), 638 deletions(-) diff --git a/blocks/timeline/timeline.css b/blocks/timeline/timeline.css index a7357067c..22d404661 100644 --- a/blocks/timeline/timeline.css +++ b/blocks/timeline/timeline.css @@ -1,858 +1,322 @@ -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -*/ - -html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: TWK Lausanne, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} - .timeline-wrapper :is(.pointer-events-none) { - pointer-events: none; + pointer-events: none } .timeline-wrapper :is(.relative) { - position: relative; + position: relative } .timeline-wrapper :is(.bottom-0) { - bottom: 0px; + bottom: 0px } .timeline-wrapper :is(.bottom-4) { - bottom: 1rem; + bottom: 1rem } .timeline-wrapper :is(.top-14) { - top: 3.5rem; + top: 3.5rem } .timeline-wrapper :is(.float-right) { - float: right; + float: right } .timeline-wrapper :is(.m-0) { - margin: 0px; + margin: 0px } .timeline-wrapper :is(.mx-auto) { margin-left: auto; - margin-right: auto; + margin-right: auto } .timeline-wrapper :is(.my-0) { margin-top: 0px; - margin-bottom: 0px; + margin-bottom: 0px } .timeline-wrapper :is(.mb-8) { - margin-bottom: 2rem; + margin-bottom: 2rem } .timeline-wrapper :is(.mt-4) { - margin-top: 1rem; + margin-top: 1rem } .timeline-wrapper :is(.mt-auto) { - margin-top: auto; + margin-top: auto } .timeline-wrapper :is(.line-clamp-2) { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + -webkit-line-clamp: 2 } .timeline-wrapper :is(.block) { - display: block; + display: block } .timeline-wrapper :is(.flex) { - display: flex; + display: flex } .timeline-wrapper :is(.inline-flex) { - display: inline-flex; + display: inline-flex } .timeline-wrapper :is(.grid) { - display: grid; + display: grid } .timeline-wrapper :is(.hidden) { - display: none; + display: none } .timeline-wrapper :is(.h-10) { - height: 2.5rem; + height: 2.5rem } .timeline-wrapper :is(.h-full) { - height: 100%; + height: 100% } .timeline-wrapper :is(.\!w-\[15\%\]) { - width: 15% !important; + width: 15% !important } .timeline-wrapper :is(.w-9) { - width: 2.25rem; + width: 2.25rem } .timeline-wrapper :is(.w-\[47\%\]) { - width: 47%; + width: 47% } .timeline-wrapper :is(.w-\[85\%\]) { - width: 85%; + width: 85% } .timeline-wrapper :is(.w-full) { - width: 100%; + width: 100% } .timeline-wrapper :is(.cursor-pointer) { - cursor: pointer; + cursor: pointer } .timeline-wrapper :is(.grid-cols-1) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)) } .timeline-wrapper :is(.flex-row) { - flex-direction: row; + flex-direction: row } .timeline-wrapper :is(.flex-col) { - flex-direction: column; + flex-direction: column } .timeline-wrapper :is(.items-center) { - align-items: center; + align-items: center } .timeline-wrapper :is(.items-stretch) { - align-items: stretch; + align-items: stretch } .timeline-wrapper :is(.justify-center) { - justify-content: center; + justify-content: center } .timeline-wrapper :is(.justify-between) { - justify-content: space-between; + justify-content: space-between } .timeline-wrapper :is(.gap-1) { - gap: 0.25rem; + gap: 0.25rem } .timeline-wrapper :is(.gap-3) { - gap: 0.75rem; + gap: 0.75rem } .timeline-wrapper :is(.gap-4) { - gap: 1rem; + gap: 1rem } .timeline-wrapper :is(.\!rounded-full) { - border-radius: 9999px !important; + border-radius: 9999px !important } .timeline-wrapper :is(.rounded) { - border-radius: 0.25rem; + border-radius: 0.25rem } .timeline-wrapper :is(.border) { - border-width: 1px; + border-width: 1px } .timeline-wrapper :is(.border-black) { --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-color: rgb(0 0 0 / var(--tw-border-opacity)) } .timeline-wrapper :is(.bg-danaherblue-600) { --tw-bg-opacity: 1; - background-color: rgb(13 49 114 / var(--tw-bg-opacity)); + background-color: rgb(13 49 114 / var(--tw-bg-opacity)) } .timeline-wrapper :is(.bg-danaherlightblue-50) { --tw-bg-opacity: 1; - background-color: rgb(239 251 253 / var(--tw-bg-opacity)); + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) } .timeline-wrapper :is(.bg-gray-50) { --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); + background-color: rgb(249 250 251 / var(--tw-bg-opacity)) } .timeline-wrapper :is(.p-4) { - padding: 1rem; + padding: 1rem } .timeline-wrapper :is(.px-2) { padding-left: 0.5rem; - padding-right: 0.5rem; + padding-right: 0.5rem } .timeline-wrapper :is(.px-4) { padding-left: 1rem; - padding-right: 1rem; + padding-right: 1rem } .timeline-wrapper :is(.py-4) { padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 1rem } .timeline-wrapper :is(.py-8) { padding-top: 2rem; - padding-bottom: 2rem; + padding-bottom: 2rem } .timeline-wrapper :is(.pb-0) { - padding-bottom: 0px; + padding-bottom: 0px } .timeline-wrapper :is(.pb-2) { - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } -.timeline-wrapper :is(.text-base) { - font-size: 1rem; - line-height: 1.5rem; +.timeline-wrapper :is(.\!text-xl) { + font-size: 1.25rem !important; + line-height: 1.75rem !important } -.timeline-wrapper :is(.text-xl) { - font-size: 1.25rem; - line-height: 1.75rem; +.timeline-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem } .timeline-wrapper :is(.text-xs) { font-size: 0.75rem; - line-height: 1rem; + line-height: 1rem } -.timeline-wrapper :is(.font-bold) { - font-weight: 700; +.timeline-wrapper :is(.\!font-normal) { + font-weight: 200 !important } -.timeline-wrapper :is(.font-extralight) { - font-weight: 200; +.timeline-wrapper :is(.font-bold) { + font-weight: 700 } -.timeline-wrapper :is(.font-normal) { - font-weight: 200; +.timeline-wrapper :is(.font-extralight) { + font-weight: 200 } .timeline-wrapper :is(.not-italic) { - font-style: normal; + font-style: normal } -.timeline-wrapper :is(.leading-4) { - line-height: 1rem; +.timeline-wrapper :is(.\!leading-4) { + line-height: 1rem !important } .timeline-wrapper :is(.leading-6) { - line-height: 1.5rem; + line-height: 1.5rem } .timeline-wrapper :is(.tracking-wider) { - letter-spacing: 0.05em; + letter-spacing: 0.05em } .timeline-wrapper :is(.text-danahergray-700) { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)) } .timeline-wrapper :is(.text-danaherpurple-500) { --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); + color: rgb(117 35 255 / var(--tw-text-opacity)) } .timeline-wrapper :is(.text-gray-400) { --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); + color: rgb(156 163 175 / var(--tw-text-opacity)) } .timeline-wrapper :is(.text-white) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)) } .timeline-wrapper :is(.shadow-md) { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .timeline-wrapper :is(.filter) { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .timeline-wrapper :is(.hover\:shadow-sm:hover) { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .timeline-wrapper :is(.peer:checked ~ .peer-checked\:border-0) { - border-width: 0px; + border-width: 0px } .timeline-wrapper :is(.peer:checked ~ .peer-checked\:bg-danaherpurple-500) { --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + background-color: rgb(117 35 255 / var(--tw-bg-opacity)) } .timeline-wrapper :is(.peer:checked ~ .peer-checked\:shadow-sm) { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .timeline-wrapper :is(.peer:hover ~ .peer-hover\:border-0) { - border-width: 0px; + border-width: 0px } .timeline-wrapper :is(.peer:hover ~ .peer-hover\:bg-danaherpurple-500) { --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + background-color: rgb(117 35 255 / var(--tw-bg-opacity)) } @media (min-width: 640px) { .timeline-wrapper :is(.sm\:grid-cols-2) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)) } } @@ -861,74 +325,74 @@ video { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 3; + -webkit-line-clamp: 3 } .timeline-wrapper :is(.md\:inline-flex) { - display: inline-flex; + display: inline-flex } .timeline-wrapper :is(.md\:h-20) { - height: 5rem; + height: 5rem } .timeline-wrapper :is(.md\:w-10) { - width: 2.5rem; + width: 2.5rem } .timeline-wrapper :is(.md\:flex-row) { - flex-direction: row; + flex-direction: row } .timeline-wrapper :is(.md\:pb-2) { - padding-bottom: 0.5rem; + padding-bottom: 0.5rem } - .timeline-wrapper :is(.md\:leading-7) { - line-height: 1.75rem; + .timeline-wrapper :is(.md\:\!leading-7) { + line-height: 1.75rem !important } } @media (min-width: 1024px) { .timeline-wrapper :is(.lg\:block) { - display: block; + display: block } .timeline-wrapper :is(.lg\:\!w-\[47\%\]) { - width: 47% !important; + width: 47% !important } .timeline-wrapper :is(.lg\:\!w-\[6\%\]) { - width: 6% !important; + width: 6% !important } .timeline-wrapper :is(.lg\:grid-cols-4) { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)) } .timeline-wrapper :is(.lg\:flex-row-reverse) { - flex-direction: row-reverse; + flex-direction: row-reverse } } .timeline-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_\*\]\:text-white *) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)) } .timeline-wrapper :is(.peer:hover ~ .peer-hover\:\[\&_\*\]\:text-white *) { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)) } .timeline-wrapper :is(.\[\&_svg\]\:h-6 svg) { - height: 1.5rem; + height: 1.5rem } .timeline-wrapper :is(.\[\&_svg\]\:w-6 svg) { - width: 1.5rem; + width: 1.5rem } .timeline-wrapper :is(.\[\&_svg\]\:fill-white svg) { - fill: #fff; + fill: #fff } \ No newline at end of file diff --git a/blocks/timeline/timeline.js b/blocks/timeline/timeline.js index e11acd964..d77a6b681 100644 --- a/blocks/timeline/timeline.js +++ b/blocks/timeline/timeline.js @@ -119,11 +119,9 @@ export default function decorate(block) { [...menus].forEach((menu, menuIndex) => { menu.classList.add(...'menu-item'.split(' ')); const title = menu.querySelector('div > h2'); - title.classList.add(...'w-full inline-flex items-center justify-between my-0 pb-0 md:pb-2 text-xl font-normal leading-4 md:leading-7'.split(' ')); - + title.classList.add(...'w-full inline-flex items-center justify-between my-0 pb-0 md:pb-2 !text-xl !font-normal !leading-4 md:!leading-7'.split(' ')); const description = menu.querySelector('div > p:first-child'); description.classList.add(...'h-full md:h-20 line-clamp-2 md:line-clamp-3 text-base font-extralight'.split(' ')); - const link = menu.querySelector('div > p > a'); link.textContent += ' -->'; link.parentElement.classList.remove('button-container'); diff --git a/build-css.js b/build-css.js index 2a0f53372..7f341a614 100644 --- a/build-css.js +++ b/build-css.js @@ -196,6 +196,11 @@ const fileMappings = [ output: './blocks/stats/stats.css', wrapper: 'stats-wrapper', }, + { + content: './blocks/timeline/timeline.js', + output: './blocks/timeline/timeline.css', + wrapper: 'timeline-wrapper', + }, { input: './templates/application/application-dev.css', output: './templates/application/application.css', From fb9461616ef211ebbc92a62f7e90087eac37d1ac Mon Sep 17 00:00:00 2001 From: jckautzmann <jkautzma@adobe.com> Date: Fri, 17 May 2024 12:33:11 +0200 Subject: [PATCH 84/88] [UE] cta fix (#1121) - use aem-content instead of reference (as reference is used for images) --- component-models.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/component-models.json b/component-models.json index 224a316b8..39c79c092 100644 --- a/component-models.json +++ b/component-models.json @@ -245,7 +245,7 @@ "label": "Text" }, { - "component": "reference", + "component": "aem-content", "valueType": "string", "name": "content_link2", "value": "", From 4ab63cf77c2893073a2d61f34be9e01dc73dbdec Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Mon, 20 May 2024 11:19:49 +0530 Subject: [PATCH 85/88] vertical line in between numbers --- styles/styles.css | 63 +++++++++++++++++++++++++++++++++++++++++++++ styles/tailwind.css | 2 +- 2 files changed, 64 insertions(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index ccb16ac35..b11c94bbd 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1229,6 +1229,69 @@ header { } } +.appear div.timeline > div:not(:last-child) { + .columns.features-card-left > div > div.t-line > .card::after { + display: flex; + } + .columns.features-card-left > div > div.t-line > .card::after { + flex-direction: row; + } + .columns.features-card-left > div > div.t-line > .card::after { + padding-bottom: 1.5rem; + } + .columns.features-card-left > div > div.t-line > div.card > .left-content::after { + padding-right: 0.75rem; + } + .productdetail main .columns.columns-2-cols .t-line::after { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + .productdetail main .columns.columns-2-cols .t-line::after { + font-size: 1rem; + line-height: 1.5rem; + } + .productdetail main .columns.columns-2-cols .t-line::after { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); + } + .t-line::after { + position: absolute; + } + .t-line::after { + left: 38%; + } + .t-line::after { + top: 3.5rem; + } + .t-line::after { + bottom: 0px; + } + .t-line::after { + height: 100%; + } + .t-line::after { + width: 1px; + } + .t-line::after { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); + } + .t-line::after { + --tw-content: ""; + content: var(--tw-content); + } + @media (min-width: 768px) { + .t-line::after { + left: 18%; + } + } + @media (min-width: 1024px) { + .t-line::after { + left: 28%; + } + } +} + .appear div.mobile-jump-menu { order: 9999; display: block; diff --git a/styles/tailwind.css b/styles/tailwind.css index 62e11be55..b8c16f678 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -270,7 +270,7 @@ @apply hidden lg:block lg:w-recent-articles bg-danaherpurple-25 space-y-4 !py-28 shrink-0; } - .timeline > *:not(:last-child) { + .appear div.timeline > div:not(:last-child) { .t-line::after { @apply content-[""] left-[38%] md:left-[18%] lg:left-[28%] w-px h-full absolute top-14 bottom-0 bg-danahergray-300; } From aae4da55f73afdce000c73c0b4ccd6525a800955 Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Mon, 20 May 2024 13:56:48 +0530 Subject: [PATCH 86/88] 1122 [Bug] Jump-Menu and Page-Tabs UI broken when scroll down --- scripts/scripts-dev.js | 8 ++++---- scripts/scripts.js | 2 +- styles/styles.css | 10 ++++------ styles/tailwind.css | 2 +- 4 files changed, 10 insertions(+), 12 deletions(-) diff --git a/scripts/scripts-dev.js b/scripts/scripts-dev.js index cad5dfb5d..59ab516f7 100644 --- a/scripts/scripts-dev.js +++ b/scripts/scripts-dev.js @@ -108,11 +108,11 @@ export function scrollJumpMenuFixed(pageJumpMenuContainer) { el?.firstElementChild?.querySelector('span.icon svg use')?.classList.add('stroke-danaherpurple-500'); }); document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add('stroke-white'); - pageJumpMenuContainer.classList.remove(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + pageJumpMenuContainer.classList.remove(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); } else { pageJumpMenuContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); document.querySelectorAll('.page-jump-menu-container ul li')?.forEach((el) => el?.firstElementChild?.classList.remove('rounded-full')); - pageJumpMenuContainer.classList.add(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + pageJumpMenuContainer.classList.add(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); } } @@ -124,10 +124,10 @@ export function scrollPageTabFixed(pageTabsContainer) { } if (window.scrollY > pageTabsOriginalOffset) { pageTabsContainer.classList.add(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); - pageTabsContainer.classList.remove(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + pageTabsContainer.classList.remove(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); } else { pageTabsContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); - pageTabsContainer.classList.add(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + pageTabsContainer.classList.add(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); } } /** diff --git a/scripts/scripts.js b/scripts/scripts.js index e3b04b6f0..a83f0ff06 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1 +1 @@ -import{sampleRUM,loadHeader,loadFooter,decorateButtons,decorateIcons,decorateSections,decorateBlocks,decorateTemplateAndTheme,waitForLCP,loadBlocks,loadCSS,toClassName,getMetadata,createOptimizedPicture,loadBlock,decorateBlock}from"./lib-franklin.js";import{div,domEl,img}from"./dom-builder.js";const LCP_BLOCKS=["breadcrumb","product-hero","carousel"],TEMPLATE_LIST={blog:"blog",news:"blog",productdetail:"productDetail",processstep:"processstep",topic:"topic",library:"library",info:"library"};function imageHelper(e,t,a=!1){return-1<e.indexOf(".scene7.com")?img({src:""+e,alt:t,loading:a?"eager":"lazy",class:"mb-2 h-48 w-full object-cover"}):((e=createOptimizedPicture(e,t,a,[{width:"500"}])).querySelector("img").className="mb-2 h-48 w-full object-cover",e)}function createOptimizedS7Picture(e,t="",a=!1){var o;return e.startsWith("/is/image")||-1<e.indexOf(".scene7.com")?((o=document.createElement("picture")).appendChild(img({src:e+"?$danaher-mobile$",alt:t,loading:a?"eager":"lazy"})),o):img({src:e,alt:t,loading:a?"eager":"lazy"})}function formatDateUTCSeconds(e,t={}){var a=new Date(0);return a.setUTCSeconds(e),a.toLocaleDateString("en-US",{month:"short",day:"2-digit",year:"numeric",...t})}function generateUUID(){return Math.floor(1e3+9e3*Math.random())}let originalOffset=0;function scrollJumpMenuFixed(e){var t;originalOffset||(t=e.getBoundingClientRect(),originalOffset=t.top),window.scrollY>originalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelector(".page-jump-menu-container.fixed ul")?.classList.add("shadow-none","rounded-none"),document.querySelectorAll(".page-jump-menu-container.fixed ul li")?.forEach(e=>{e?.firstElementChild?.classList.add("rounded-full"),e?.firstElementChild?.querySelector("span.icon svg use")?.classList.add("stroke-danaherpurple-500")}),document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add("stroke-white"),e.classList.remove(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelectorAll(".page-jump-menu-container ul li")?.forEach(e=>e?.firstElementChild?.classList.remove("rounded-full")),e.classList.add(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}let pageTabsOriginalOffset=0;function scrollPageTabFixed(e){var t;pageTabsOriginalOffset||(t=e.getBoundingClientRect(),pageTabsOriginalOffset=t.top),window.scrollY>pageTabsOriginalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),e.classList.remove(..."[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),e.classList.add(..."[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}function makePublicUrl(t){var e=window.location.hostname.includes("lifesciences.danaher.com");try{var a=new URL(t,window.location.origin);return e?a.pathname.endsWith(".html")||(a.pathname+=".html"):a.pathname.endsWith(".html")&&(a.pathname=a.pathname.slice(0,-5)),a.pathname}catch(e){return console.error("Invalid URL:",e),t}}function setJsonLd(e,t){var a=document.head.querySelector(`script[data-name="${t}"]`);a?a.innerHTML=JSON.stringify(e):((a=document.createElement("script")).type="application/ld+json",a.innerHTML=JSON.stringify(e),a.dataset.name=t,document.head.appendChild(a))}function setFavicon(){var e=document.querySelector("link[rel*='icon']")||document.createElement("link");e.type="image/x-icon",e.rel="shortcut icon",e.href=`https://${window.location.hostname}/favicon.ico`,document.getElementsByTagName("head")[0].appendChild(e)}async function getFragmentFromFile(e){var t=await fetch(e);return t.ok?await t.text()||(console.error("fragment details empty",e),null):(console.error("error loading fragment details",t),null)}function getCookie(e){let t=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*"+encodeURIComponent(e).replace(/[\\-\\.\\+\\*]/g,"\\$&")+"\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"))||null;if(t&&("{"===t.substring(0,1)&&"}"===t.substring(t.length-1,t.length)||"["===t.substring(0,1)&&"]"===t.substring(t.length-1,t.length)))try{t=JSON.parse(t)}catch(e){}return t}function isOTEnabled(){var e=getCookie("OptanonConsent");return"string"!=typeof e||e.includes("C0002:1")}function setCookie(e,t,a=2592e6,o="/"){var n=new Date,a=(n.setTime(n.getTime()+a),"expires=".concat(n.toGMTString())),n=e.concat("=").concat(t).concat(";").concat(a).concat(";path=").concat(o);document.cookie=n}async function buildVideo(e){e=e.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"],a[href*="vidyard.com"]');if(0<e.length){const t=(await import("../blocks/embed/embed.js"))["default"];e.forEach(e=>{null==e.closest(".embed, .hero")&&t(e.parentNode)})}}async function loadFonts(){await loadCSS(window.hlx.codeBasePath+"/styles/fonts.css");try{window.location.hostname.includes("localhost")||sessionStorage.setItem("fonts-loaded","true")}catch(e){}}function buildAutoBlocks(e){try{buildVideo(e)}catch(e){console.error("Auto Blocking failed",e)}}function decorateModals(e){const t=e.querySelector(".show-modal-btn"),a=()=>t.getAttribute("data-dialog-message")?t.getAttribute("dialog-message"):"";t?.addEventListener("click",async e=>{e.preventDefault();e=(await import("./modal.js")).default;(await e("custom-modal",a,e=>{e.querySelector('p[name="close"]')?.addEventListener("click",()=>e.close())})).showModal()})}function decorateTwoColumnSection(e){e.querySelectorAll(".section.container-two-col").forEach(o=>{o.querySelectorAll(":scope > .default-content-wrapper").forEach(e=>{[...e.children].forEach(e=>{o.appendChild(e)});let t=e.nextSibling;for(var a=[];t;)t.className.includes("-wrapper")&&a.push(t),t=t.nextSibling;o.append(...a),o.removeChild(e)});const t=div();let a=null;[...o.children].forEach(e=>{"H1"===e.tagName&&(t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"})),a=div({class:"col-right w-full mt-0 md:mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-0 md:pb-10"}));e=e.cloneNode(!0);"H2"===e.tagName&&e.querySelector(":scope > strong")?(a?.classList.contains("col-right")&&t.appendChild(a),e.className="text-gray-900 !text-base leading-6 font-bold pt-6 pb-4 my-0",t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"},e,domEl("hr",{style:"height: 10px; width: 54px; border-width: 0px; color: rgb(216, 244, 250); background-color: rgb(216, 244, 250);"}))),a=div({class:"col-right w-full mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-10"})):a?.classList.contains("col-right")&&a.appendChild(e)}),a&&t.appendChild(a),t.classList.add("w-full","flex","flex-wrap","break-normal"),o.innerHTML=t.outerHTML,o.classList.add("mx-auto","w-full","flex","flex-wrap","mb-5")})}function updateExternalLinks(r){const i=[window.location.origin];r.querySelectorAll("a[href]").forEach(t=>{try{var{origin:e,pathname:a,hash:o}=new URL(t.href,window.location.href),n=o&&o.startsWith("#_"),l="pdf"===a.split(".").pop();e&&e!==window.location.origin&&!n||l?(t.setAttribute("target","_blank"),i.includes(e)||t.setAttribute("rel","noopener")):n&&(t.setAttribute("target",o.replace("#","")),t.href=t.href.replace(o,""))}catch(e){console.warn(`Invalid link in ${r}: `+t.href)}})}function lazyLoadHiddenPageNavTabs(e,t){var a=window.location.hash;const n=a?a.substring(1,a.length).toLowerCase():t;e.forEach(t=>{if(!t.className.includes("breadcrumb-container")&&t.getAttribute("aria-labelledby")!==n){t.querySelectorAll(".block").forEach(e=>{e.setAttribute("data-block-status","loaded"),e.setAttribute("data-block-lazy-load",!0),e.parentElement.style.display="none"});const a=e=>{e.querySelectorAll(".block[data-block-lazy-load]").forEach(async e=>{e.removeAttribute("data-block-lazy-load"),e.setAttribute("data-block-status","initialized"),await loadBlock(e),e.parentElement.style.display=""}),t.setAttribute("data-section-status","loaded")},o=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(o.disconnect(),a(t))});o.observe(t),setTimeout(()=>{o.disconnect(),a(t)},5e3)}})}function decoratePageNav(t){var o=t.querySelector(".page-tabs");if(o){o=o.closest("div.section");let e=[...t.querySelectorAll("div.section")];const n=(e=e.slice(e.indexOf(o)+1)).filter(e=>e.hasAttribute("data-tabname"));let a=0;e.forEach(e=>{var t;a<n.length&&(e.classList.add("page-tab"),t=n[a].getAttribute("data-tabname")?.toLowerCase().replace(/\s+/g,"-"),e.setAttribute("aria-labelledby",t),e.hasAttribute("data-tabname"))&&(a+=1)}),lazyLoadHiddenPageNavTabs(e,n[0].getAttribute("aria-labelledby"))}}function decorateMain(e){decorateButtons(e),decorateIcons(e),buildAutoBlocks(e),decorateSections(e),decorateBlocks(e),loadHeader(document.querySelector("header")),decoratePageNav(e),decorateTwoColumnSection(e),updateExternalLinks(e)}async function decorateTemplates(e){try{var t,a,o=toClassName(getMetadata("template"));Object.keys(TEMPLATE_LIST).includes(o)&&(t=TEMPLATE_LIST[o],(a=await import(`../templates/${t}/${t}.js`)).default&&await a.default(e),document.body.classList.add(t))}catch(e){console.error("Auto Blocking failed",e)}}function decorateEmbeddedBlocks(e){e.querySelectorAll("div.section > div").forEach(decorateBlock)}async function processEmbedFragment(e){const t=div({class:"embed-fragment"});[...e.classList].forEach(e=>{t.classList.add(e)});var a=e.textContent;return a&&((a=await getFragmentFromFile(a+".plain.html"))?(t.innerHTML=a,[...t.querySelectorAll(".embed-fragment > div")].forEach(e=>{e.classList.add("section")}),decorateEmbeddedBlocks(t),decorateSections(t),loadBlocks(t)):(a=e.innerHTML,t.append(div({class:"section"})),t.querySelector(".section").innerHTML=a)),decorateButtons(t),decorateIcons(t),t}function loadATPageParams(){var e=window.location.pathname.replaceAll("/","_").replace(/\.html$/,"").substring(1),t=getMetadata("sku"),a=getMetadata("fullcategory").split("|").pop(),o=getMetadata("og:image"),n=getMetadata("og:title");return{id:e,skuId:t,categoryId:a,thumbnailURL:o,name:-1<n.indexOf("| Danaher Life Sciences")?n.split("| Danaher Life Sciences")[0]:n,message:getMetadata("og:description"),pageUrl:getMetadata("og:url"),brand:getMetadata("brand"),page:window.location.pathname.split("/")[3],tags:getMetadata("article:tag"),articleAuthor:getMetadata("authorname"),articlePostDate:getMetadata("publishdate"),articleReadTime:getMetadata("readingtime")}}function initATJS(t,e){return window.targetGlobalSettings=e,window.atPageParams=loadATPageParams(),window.targetPageParams=function(){return{at_property:"6aeb619e-92d9-f4cf-f209-6d88ff58af6a","entity.id":window.atPageParams?.id,"entity.skuId":window.atPageParams?.skuId,"entity.categoryId":window.atPageParams?.categoryId,"entity.thumbnailURL":window.atPageParams?.thumbnailURL,"entity.name":window.atPageParams?.name,"entity.message":window.atPageParams?.message,"entity.pageUrl":window.atPageParams?.pageUrl,"entity.brand":window.atPageParams?.brand,"entity.page":window.atPageParams?.page,"entity.tags":window.atPageParams?.tags,"entity.articleAuthor":window.atPageParams?.articleAuthor,"entity.articlePostDate":window.atPageParams?.articlePostDate,"entity.articleReadTime":window.atPageParams?.articleReadTime,danaherCompany:localStorage.getItem("danaher_company")?localStorage.getItem("danaher_company"):"",utmCampaign:localStorage.getItem("danaher_utm_campaign")?localStorage.getItem("danaher_utm_campaign"):"",utmSource:localStorage.getItem("danaher_utm_source")?localStorage.getItem("danaher_utm_source"):"",utmMedium:localStorage.getItem("danaher_utm_medium")?localStorage.getItem("danaher_utm_medium"):"",utmContent:localStorage.getItem("danaher_utm_content")?localStorage.getItem("danaher_utm_content"):""}},new Promise(e=>{import(t).then(e)})}function onDecoratedElement(t){document.querySelector('[data-block-status="loaded"],[data-section-status="loaded"]')&&t();var e=new MutationObserver(e=>{e.some(e=>"BODY"===e.target.tagName||"loaded"===e.target.dataset.sectionStatus||"loaded"===e.target.dataset.blockStatus)&&t()});e.observe(document.querySelector("main"),{subtree:!0,attributes:!0,attributeFilter:["data-block-status","data-section-status"]}),e.observe(document.querySelector("body"),{childList:!0})}function toCssSelector(e){return e.replace(/(\.\S+)?:eq\((\d+)\)/g,(e,t,a)=>":nth-child("+(Number(a)+1)+(t?` of ${t})`:""))}async function getElementForOffer(e){e=e.cssSelector||toCssSelector(e.selector);return document.querySelector(e)}async function getElementForMetric(e){e=toCssSelector(e.selector);return document.querySelector(e)}async function getAndApplyOffers(){const e=await window.adobe.target.getOffers({request:{execute:{pageLoad:{}}}}),{options:t=[],metrics:a=[]}=e.execute.pageLoad;onDecoratedElement(()=>{window.adobe.target.applyOffers({response:e}),t.forEach(e=>e.content=e.content.filter(e=>!getElementForOffer(e))),a.map((e,t)=>getElementForMetric(e)?t:-1).filter(e=>0<=e).reverse().map(e=>a.splice(e,1))})}let atjsPromise=Promise.resolve();const urlTarget=window.location.pathname,regex=/^\/(us\/en\/products\.html)?$/;async function loadEager(e){document.documentElement.lang="en",decorateTemplateAndTheme(),await window.hlx.plugins.run("loadEager");e=e.querySelector("main");e&&(await decorateTemplates(e),decorateMain(e),await atjsPromise,await new Promise(e=>{window.requestAnimationFrame(async()=>{document.body.classList.add("appear"),await waitForLCP(LCP_BLOCKS),e()})}));try{(900<=window.innerWidth||sessionStorage.getItem("fonts-loaded"))&&loadFonts()}catch(e){}}function getParameterByName(e,t=window.location.href){e=e.replace(/[[\]]/g,"$&"),e=new RegExp(`[?&]${e}(=([^&#]*)|&|#|$)`).exec(t);return e?e[2]?decodeURIComponent(e[2].replace(/\+/g," ")):"":null}function loadUTMprams(){["utm_campaign","utm_source","utm_medium","utm_content","utm_term","utm_previouspage"].forEach(e=>{var t=getParameterByName(e);null!==t&&window.localStorage.setItem("danaher_"+e,t)})}async function loadLazy(e){var t=e.querySelector("main"),a=(await loadBlocks(t),window.location)["hash"],o=!!a&&e.getElementById(a.substring(1));a&&o&&o.scrollIntoView(),loadFooter(e.querySelector("footer")),loadCSS(window.hlx.codeBasePath+"/styles/lazy-styles.css"),loadFonts(),window.hlx.plugins.run("loadLazy"),sampleRUM("lazy"),sampleRUM.observe(t.querySelectorAll("div[data-block-name]")),sampleRUM.observe(t.querySelectorAll("picture > img")),loadUTMprams()}function loadDelayed(){window.setTimeout(()=>(window.hlx.plugins.load("delayed"),window.hlx.plugins.run("loadDelayed"),import("./delayed.js")),4e3)}async function loadPage(){setFavicon(),await window.hlx.plugins.load("eager"),await loadEager(document),await window.hlx.plugins.load("lazy"),await loadLazy(document),loadDelayed()}function getDLPage(){var e={title:document.querySelector("title").textContent.replace(/[\n\t]/gm,""),language:"en",locale:"US",level:"top",type:"webpage",keywords:"",creationDate:getMetadata("creationdate"),updateDate:getMetadata("updatedate")},t=window.location.pathname;return"/"===t||"/us/en"===t||"/us/en.html"===t?(e.level="top",e.type="home"):t.includes("/us/en/news")?(e.level="top",e.type="news"):t.includes("/us/en/blog")?(e.level="middle",e.type="blog"):t.includes("/us/en/solutions")?(e.level="middle",e.type="solutions"):t.includes("/us/en/applications")?(e.level="middle",e.type="applications"):t.includes("/us/en/products")?t.includes("/us/en/products/family")?(e.level="bottom",e.type="family"):t.includes("/us/en/products/bundles")?(e.level="bottom",e.type="bundles"):t.includes("/us/en/products/sku")?(e.level="bottom",e.type="sku"):t.includes("/topics")?(e.level="other",e.type="topics"):(e.level="bottom",e.type="products"):t.includes("/us/en/library")?(e.level="other",e.type="library"):t.includes("/us/en/about-us")?(e.level="top",e.type="about-us"):t.includes("/us/en/expert")?(e.level="top",e.type="expert"):t.includes("/us/en/search")||t.includes("/us/en/danahersearch")?(e.level="top",e.type="search"):t.includes("/us/en/signin")?(e.level="top",e.type="signin"):t.includes("/us/en/legal")&&(e.level="top",e.type="legal"),e}regex.test(urlTarget)||(atjsPromise=initATJS("./at.js",{clientCode:"danaher",serverDomain:"danaher.tt.omtrdc.net",imsOrgId:"08333E7B636A2D4D0A495C34@AdobeOrg",bodyHidingEnabled:!1,cookieDomain:window.location.hostname,pageLoadEnabled:!1,secureOnly:!0,viewsEnabled:!1,withWebGLRenderer:!1}).catch(e=>{console.error("Error loading at.js",e)}),document.addEventListener("at-library-loaded",()=>getAndApplyOffers()));const urlParams=new URLSearchParams(window.location.search),useProd=urlParams.get("useProd");"lifesciences.danaher.com"===window.location.host||"true"===useProd?window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-THXPLCS",munchkinID:"306-EHG-641",marketoDomain:"//306-EHG-641.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danaherproductionrfl96bkr",searchKey:"xxf2f10385-5a54-4a18-bb48-fd8025d6b5d2",workflowProductKey:"xx3d1b8da5-d1e9-4989-bbed-264a248a9e22",workflowResourceKey:"xxf6a8b387-10f2-4660-af5d-6d304d0a789d",productKey:"xxfb161aa6-0fa0-419f-af37-9c6d7784bf76",familyProductKey:"xx1ecd2a4f-8391-4c70-b3c0-2d589bda56b7",familyResourceKey:"xx9dd85afc-64b6-4295-bc5d-eb8285f96d52",categoryProductKey:"xx2a299d60-2cf1-48ab-b9d5-94daeb25f1d6",categoryDetailKey:"xx61910369-c1ab-4df9-8d8a-3092b1323fcc",productRecommendationsKey:"xx107716c0-1ccd-4a61-8717-6ca36b6cdb0e",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"lifesciences.danaher.com"}:window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-KCBGM2N",munchkinID:"439-KNJ-322",marketoDomain:"//439-KNJ-322.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://stage.shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danahernonproduction1892f3fhz",searchKey:"xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b",workflowProductKey:"xx26ffc727-cc72-4bbd-98e3-34052f296382",workflowResourceKey:"xx14676f1d-cf4a-4a38-94f0-eda56e9920f1",productKey:"xx32da148e-dfd0-4725-a443-c05a7793afea",familyProductKey:"xx4e3989d6-93aa-4140-a227-19da35fcd1cc",familyResourceKey:"xx8274a91e-b29c-4267-8b3a-5022a2698605",categoryProductKey:"xxdf9d160d-f6e5-4c8c-969b-8570d7b81418",categoryDetailKey:"xxf2ea9bfd-bccb-4195-90fd-7757504fdc33",productRecommendationsKey:"xxea4d2c40-26e7-4e98-9377-d8ebe3f435ea",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"stage.lifesciences.danaher.com"},window.dataLayer=[],window.dataLayer.push({user:{customerID:"",accountType:"guest",marketCode:"",company:"",role:"",city:"",state:"",country:"",postalCode:"",lastVisit:""}}),window.dataLayer.push({page:getDLPage()}),loadPage();export{imageHelper,createOptimizedS7Picture,formatDateUTCSeconds,generateUUID,scrollJumpMenuFixed,scrollPageTabFixed,makePublicUrl,setJsonLd,getFragmentFromFile,getCookie,isOTEnabled,setCookie,decorateModals,decorateMain,processEmbedFragment}; \ No newline at end of file +import{sampleRUM,loadHeader,loadFooter,decorateButtons,decorateIcons,decorateSections,decorateBlocks,decorateTemplateAndTheme,waitForLCP,loadBlocks,loadCSS,toClassName,getMetadata,createOptimizedPicture,loadBlock,decorateBlock}from"./lib-franklin.js";import{div,domEl,img}from"./dom-builder.js";const LCP_BLOCKS=["breadcrumb","product-hero","carousel"],TEMPLATE_LIST={blog:"blog",news:"blog",productdetail:"productDetail",processstep:"processstep",topic:"topic",library:"library",info:"library"};function imageHelper(e,t,a=!1){return-1<e.indexOf(".scene7.com")?img({src:""+e,alt:t,loading:a?"eager":"lazy",class:"mb-2 h-48 w-full object-cover"}):((e=createOptimizedPicture(e,t,a,[{width:"500"}])).querySelector("img").className="mb-2 h-48 w-full object-cover",e)}function createOptimizedS7Picture(e,t="",a=!1){var o;return e.startsWith("/is/image")||-1<e.indexOf(".scene7.com")?((o=document.createElement("picture")).appendChild(img({src:e+"?$danaher-mobile$",alt:t,loading:a?"eager":"lazy"})),o):img({src:e,alt:t,loading:a?"eager":"lazy"})}function formatDateUTCSeconds(e,t={}){var a=new Date(0);return a.setUTCSeconds(e),a.toLocaleDateString("en-US",{month:"short",day:"2-digit",year:"numeric",...t})}function generateUUID(){return Math.floor(1e3+9e3*Math.random())}let originalOffset=0;function scrollJumpMenuFixed(e){var t;originalOffset||(t=e.getBoundingClientRect(),originalOffset=t.top),window.scrollY>originalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelector(".page-jump-menu-container.fixed ul")?.classList.add("shadow-none","rounded-none"),document.querySelectorAll(".page-jump-menu-container.fixed ul li")?.forEach(e=>{e?.firstElementChild?.classList.add("rounded-full"),e?.firstElementChild?.querySelector("span.icon svg use")?.classList.add("stroke-danaherpurple-500")}),document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add("stroke-white"),e.classList.remove(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelectorAll(".page-jump-menu-container ul li")?.forEach(e=>e?.firstElementChild?.classList.remove("rounded-full")),e.classList.add(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}let pageTabsOriginalOffset=0;function scrollPageTabFixed(e){var t;pageTabsOriginalOffset||(t=e.getBoundingClientRect(),pageTabsOriginalOffset=t.top),window.scrollY>pageTabsOriginalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),e.classList.remove(..."[&_.page-tabs-wrapper]:md:max-w-max [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),e.classList.add(..."[&_.page-tabs-wrapper]:md:max-w-max [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}function makePublicUrl(t){var e=window.location.hostname.includes("lifesciences.danaher.com");try{var a=new URL(t,window.location.origin);return e?a.pathname.endsWith(".html")||(a.pathname+=".html"):a.pathname.endsWith(".html")&&(a.pathname=a.pathname.slice(0,-5)),a.pathname}catch(e){return console.error("Invalid URL:",e),t}}function setJsonLd(e,t){var a=document.head.querySelector(`script[data-name="${t}"]`);a?a.innerHTML=JSON.stringify(e):((a=document.createElement("script")).type="application/ld+json",a.innerHTML=JSON.stringify(e),a.dataset.name=t,document.head.appendChild(a))}function setFavicon(){var e=document.querySelector("link[rel*='icon']")||document.createElement("link");e.type="image/x-icon",e.rel="shortcut icon",e.href=`https://${window.location.hostname}/favicon.ico`,document.getElementsByTagName("head")[0].appendChild(e)}async function getFragmentFromFile(e){var t=await fetch(e);return t.ok?await t.text()||(console.error("fragment details empty",e),null):(console.error("error loading fragment details",t),null)}function getCookie(e){let t=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*"+encodeURIComponent(e).replace(/[\\-\\.\\+\\*]/g,"\\$&")+"\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"))||null;if(t&&("{"===t.substring(0,1)&&"}"===t.substring(t.length-1,t.length)||"["===t.substring(0,1)&&"]"===t.substring(t.length-1,t.length)))try{t=JSON.parse(t)}catch(e){}return t}function isOTEnabled(){var e=getCookie("OptanonConsent");return"string"!=typeof e||e.includes("C0002:1")}function setCookie(e,t,a=2592e6,o="/"){var n=new Date,a=(n.setTime(n.getTime()+a),"expires=".concat(n.toGMTString())),n=e.concat("=").concat(t).concat(";").concat(a).concat(";path=").concat(o);document.cookie=n}async function buildVideo(e){e=e.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"],a[href*="vidyard.com"]');if(0<e.length){const t=(await import("../blocks/embed/embed.js"))["default"];e.forEach(e=>{null==e.closest(".embed, .hero")&&t(e.parentNode)})}}async function loadFonts(){await loadCSS(window.hlx.codeBasePath+"/styles/fonts.css");try{window.location.hostname.includes("localhost")||sessionStorage.setItem("fonts-loaded","true")}catch(e){}}function buildAutoBlocks(e){try{buildVideo(e)}catch(e){console.error("Auto Blocking failed",e)}}function decorateModals(e){const t=e.querySelector(".show-modal-btn"),a=()=>t.getAttribute("data-dialog-message")?t.getAttribute("dialog-message"):"";t?.addEventListener("click",async e=>{e.preventDefault();e=(await import("./modal.js")).default;(await e("custom-modal",a,e=>{e.querySelector('p[name="close"]')?.addEventListener("click",()=>e.close())})).showModal()})}function decorateTwoColumnSection(e){e.querySelectorAll(".section.container-two-col").forEach(o=>{o.querySelectorAll(":scope > .default-content-wrapper").forEach(e=>{[...e.children].forEach(e=>{o.appendChild(e)});let t=e.nextSibling;for(var a=[];t;)t.className.includes("-wrapper")&&a.push(t),t=t.nextSibling;o.append(...a),o.removeChild(e)});const t=div();let a=null;[...o.children].forEach(e=>{"H1"===e.tagName&&(t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"})),a=div({class:"col-right w-full mt-0 md:mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-0 md:pb-10"}));e=e.cloneNode(!0);"H2"===e.tagName&&e.querySelector(":scope > strong")?(a?.classList.contains("col-right")&&t.appendChild(a),e.className="text-gray-900 !text-base leading-6 font-bold pt-6 pb-4 my-0",t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"},e,domEl("hr",{style:"height: 10px; width: 54px; border-width: 0px; color: rgb(216, 244, 250); background-color: rgb(216, 244, 250);"}))),a=div({class:"col-right w-full mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-10"})):a?.classList.contains("col-right")&&a.appendChild(e)}),a&&t.appendChild(a),t.classList.add("w-full","flex","flex-wrap","break-normal"),o.innerHTML=t.outerHTML,o.classList.add("mx-auto","w-full","flex","flex-wrap","mb-5")})}function updateExternalLinks(r){const i=[window.location.origin];r.querySelectorAll("a[href]").forEach(t=>{try{var{origin:e,pathname:a,hash:o}=new URL(t.href,window.location.href),n=o&&o.startsWith("#_"),l="pdf"===a.split(".").pop();e&&e!==window.location.origin&&!n||l?(t.setAttribute("target","_blank"),i.includes(e)||t.setAttribute("rel","noopener")):n&&(t.setAttribute("target",o.replace("#","")),t.href=t.href.replace(o,""))}catch(e){console.warn(`Invalid link in ${r}: `+t.href)}})}function lazyLoadHiddenPageNavTabs(e,t){var a=window.location.hash;const n=a?a.substring(1,a.length).toLowerCase():t;e.forEach(t=>{if(!t.className.includes("breadcrumb-container")&&t.getAttribute("aria-labelledby")!==n){t.querySelectorAll(".block").forEach(e=>{e.setAttribute("data-block-status","loaded"),e.setAttribute("data-block-lazy-load",!0),e.parentElement.style.display="none"});const a=e=>{e.querySelectorAll(".block[data-block-lazy-load]").forEach(async e=>{e.removeAttribute("data-block-lazy-load"),e.setAttribute("data-block-status","initialized"),await loadBlock(e),e.parentElement.style.display=""}),t.setAttribute("data-section-status","loaded")},o=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(o.disconnect(),a(t))});o.observe(t),setTimeout(()=>{o.disconnect(),a(t)},5e3)}})}function decoratePageNav(t){var o=t.querySelector(".page-tabs");if(o){o=o.closest("div.section");let e=[...t.querySelectorAll("div.section")];const n=(e=e.slice(e.indexOf(o)+1)).filter(e=>e.hasAttribute("data-tabname"));let a=0;e.forEach(e=>{var t;a<n.length&&(e.classList.add("page-tab"),t=n[a].getAttribute("data-tabname")?.toLowerCase().replace(/\s+/g,"-"),e.setAttribute("aria-labelledby",t),e.hasAttribute("data-tabname"))&&(a+=1)}),lazyLoadHiddenPageNavTabs(e,n[0].getAttribute("aria-labelledby"))}}function decorateMain(e){decorateButtons(e),decorateIcons(e),buildAutoBlocks(e),decorateSections(e),decorateBlocks(e),loadHeader(document.querySelector("header")),decoratePageNav(e),decorateTwoColumnSection(e),updateExternalLinks(e)}async function decorateTemplates(e){try{var t,a,o=toClassName(getMetadata("template"));Object.keys(TEMPLATE_LIST).includes(o)&&(t=TEMPLATE_LIST[o],(a=await import(`../templates/${t}/${t}.js`)).default&&await a.default(e),document.body.classList.add(t))}catch(e){console.error("Auto Blocking failed",e)}}function decorateEmbeddedBlocks(e){e.querySelectorAll("div.section > div").forEach(decorateBlock)}async function processEmbedFragment(e){const t=div({class:"embed-fragment"});[...e.classList].forEach(e=>{t.classList.add(e)});var a=e.textContent;return a&&((a=await getFragmentFromFile(a+".plain.html"))?(t.innerHTML=a,[...t.querySelectorAll(".embed-fragment > div")].forEach(e=>{e.classList.add("section")}),decorateEmbeddedBlocks(t),decorateSections(t),loadBlocks(t)):(a=e.innerHTML,t.append(div({class:"section"})),t.querySelector(".section").innerHTML=a)),decorateButtons(t),decorateIcons(t),t}function loadATPageParams(){var e=window.location.pathname.replaceAll("/","_").replace(/\.html$/,"").substring(1),t=getMetadata("sku"),a=getMetadata("fullcategory").split("|").pop(),o=getMetadata("og:image"),n=getMetadata("og:title");return{id:e,skuId:t,categoryId:a,thumbnailURL:o,name:-1<n.indexOf("| Danaher Life Sciences")?n.split("| Danaher Life Sciences")[0]:n,message:getMetadata("og:description"),pageUrl:getMetadata("og:url"),brand:getMetadata("brand"),page:window.location.pathname.split("/")[3],tags:getMetadata("article:tag"),articleAuthor:getMetadata("authorname"),articlePostDate:getMetadata("publishdate"),articleReadTime:getMetadata("readingtime")}}function initATJS(t,e){return window.targetGlobalSettings=e,window.atPageParams=loadATPageParams(),window.targetPageParams=function(){return{at_property:"6aeb619e-92d9-f4cf-f209-6d88ff58af6a","entity.id":window.atPageParams?.id,"entity.skuId":window.atPageParams?.skuId,"entity.categoryId":window.atPageParams?.categoryId,"entity.thumbnailURL":window.atPageParams?.thumbnailURL,"entity.name":window.atPageParams?.name,"entity.message":window.atPageParams?.message,"entity.pageUrl":window.atPageParams?.pageUrl,"entity.brand":window.atPageParams?.brand,"entity.page":window.atPageParams?.page,"entity.tags":window.atPageParams?.tags,"entity.articleAuthor":window.atPageParams?.articleAuthor,"entity.articlePostDate":window.atPageParams?.articlePostDate,"entity.articleReadTime":window.atPageParams?.articleReadTime,danaherCompany:localStorage.getItem("danaher_company")?localStorage.getItem("danaher_company"):"",utmCampaign:localStorage.getItem("danaher_utm_campaign")?localStorage.getItem("danaher_utm_campaign"):"",utmSource:localStorage.getItem("danaher_utm_source")?localStorage.getItem("danaher_utm_source"):"",utmMedium:localStorage.getItem("danaher_utm_medium")?localStorage.getItem("danaher_utm_medium"):"",utmContent:localStorage.getItem("danaher_utm_content")?localStorage.getItem("danaher_utm_content"):""}},new Promise(e=>{import(t).then(e)})}function onDecoratedElement(t){document.querySelector('[data-block-status="loaded"],[data-section-status="loaded"]')&&t();var e=new MutationObserver(e=>{e.some(e=>"BODY"===e.target.tagName||"loaded"===e.target.dataset.sectionStatus||"loaded"===e.target.dataset.blockStatus)&&t()});e.observe(document.querySelector("main"),{subtree:!0,attributes:!0,attributeFilter:["data-block-status","data-section-status"]}),e.observe(document.querySelector("body"),{childList:!0})}function toCssSelector(e){return e.replace(/(\.\S+)?:eq\((\d+)\)/g,(e,t,a)=>":nth-child("+(Number(a)+1)+(t?` of ${t})`:""))}async function getElementForOffer(e){e=e.cssSelector||toCssSelector(e.selector);return document.querySelector(e)}async function getElementForMetric(e){e=toCssSelector(e.selector);return document.querySelector(e)}async function getAndApplyOffers(){const e=await window.adobe.target.getOffers({request:{execute:{pageLoad:{}}}}),{options:t=[],metrics:a=[]}=e.execute.pageLoad;onDecoratedElement(()=>{window.adobe.target.applyOffers({response:e}),t.forEach(e=>e.content=e.content.filter(e=>!getElementForOffer(e))),a.map((e,t)=>getElementForMetric(e)?t:-1).filter(e=>0<=e).reverse().map(e=>a.splice(e,1))})}let atjsPromise=Promise.resolve();const urlTarget=window.location.pathname,regex=/^\/(us\/en\/products\.html)?$/;async function loadEager(e){document.documentElement.lang="en",decorateTemplateAndTheme(),await window.hlx.plugins.run("loadEager");e=e.querySelector("main");e&&(await decorateTemplates(e),decorateMain(e),await atjsPromise,await new Promise(e=>{window.requestAnimationFrame(async()=>{document.body.classList.add("appear"),await waitForLCP(LCP_BLOCKS),e()})}));try{(900<=window.innerWidth||sessionStorage.getItem("fonts-loaded"))&&loadFonts()}catch(e){}}function getParameterByName(e,t=window.location.href){e=e.replace(/[[\]]/g,"$&"),e=new RegExp(`[?&]${e}(=([^&#]*)|&|#|$)`).exec(t);return e?e[2]?decodeURIComponent(e[2].replace(/\+/g," ")):"":null}function loadUTMprams(){["utm_campaign","utm_source","utm_medium","utm_content","utm_term","utm_previouspage"].forEach(e=>{var t=getParameterByName(e);null!==t&&window.localStorage.setItem("danaher_"+e,t)})}async function loadLazy(e){var t=e.querySelector("main"),a=(await loadBlocks(t),window.location)["hash"],o=!!a&&e.getElementById(a.substring(1));a&&o&&o.scrollIntoView(),loadFooter(e.querySelector("footer")),loadCSS(window.hlx.codeBasePath+"/styles/lazy-styles.css"),loadFonts(),window.hlx.plugins.run("loadLazy"),sampleRUM("lazy"),sampleRUM.observe(t.querySelectorAll("div[data-block-name]")),sampleRUM.observe(t.querySelectorAll("picture > img")),loadUTMprams()}function loadDelayed(){window.setTimeout(()=>(window.hlx.plugins.load("delayed"),window.hlx.plugins.run("loadDelayed"),import("./delayed.js")),4e3)}async function loadPage(){setFavicon(),await window.hlx.plugins.load("eager"),await loadEager(document),await window.hlx.plugins.load("lazy"),await loadLazy(document),loadDelayed()}function getDLPage(){var e={title:document.querySelector("title").textContent.replace(/[\n\t]/gm,""),language:"en",locale:"US",level:"top",type:"webpage",keywords:"",creationDate:getMetadata("creationdate"),updateDate:getMetadata("updatedate")},t=window.location.pathname;return"/"===t||"/us/en"===t||"/us/en.html"===t?(e.level="top",e.type="home"):t.includes("/us/en/news")?(e.level="top",e.type="news"):t.includes("/us/en/blog")?(e.level="middle",e.type="blog"):t.includes("/us/en/solutions")?(e.level="middle",e.type="solutions"):t.includes("/us/en/applications")?(e.level="middle",e.type="applications"):t.includes("/us/en/products")?t.includes("/us/en/products/family")?(e.level="bottom",e.type="family"):t.includes("/us/en/products/bundles")?(e.level="bottom",e.type="bundles"):t.includes("/us/en/products/sku")?(e.level="bottom",e.type="sku"):t.includes("/topics")?(e.level="other",e.type="topics"):(e.level="bottom",e.type="products"):t.includes("/us/en/library")?(e.level="other",e.type="library"):t.includes("/us/en/about-us")?(e.level="top",e.type="about-us"):t.includes("/us/en/expert")?(e.level="top",e.type="expert"):t.includes("/us/en/search")||t.includes("/us/en/danahersearch")?(e.level="top",e.type="search"):t.includes("/us/en/signin")?(e.level="top",e.type="signin"):t.includes("/us/en/legal")&&(e.level="top",e.type="legal"),e}regex.test(urlTarget)||(atjsPromise=initATJS("./at.js",{clientCode:"danaher",serverDomain:"danaher.tt.omtrdc.net",imsOrgId:"08333E7B636A2D4D0A495C34@AdobeOrg",bodyHidingEnabled:!1,cookieDomain:window.location.hostname,pageLoadEnabled:!1,secureOnly:!0,viewsEnabled:!1,withWebGLRenderer:!1}).catch(e=>{console.error("Error loading at.js",e)}),document.addEventListener("at-library-loaded",()=>getAndApplyOffers()));const urlParams=new URLSearchParams(window.location.search),useProd=urlParams.get("useProd");"lifesciences.danaher.com"===window.location.host||"true"===useProd?window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-THXPLCS",munchkinID:"306-EHG-641",marketoDomain:"//306-EHG-641.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danaherproductionrfl96bkr",searchKey:"xxf2f10385-5a54-4a18-bb48-fd8025d6b5d2",workflowProductKey:"xx3d1b8da5-d1e9-4989-bbed-264a248a9e22",workflowResourceKey:"xxf6a8b387-10f2-4660-af5d-6d304d0a789d",productKey:"xxfb161aa6-0fa0-419f-af37-9c6d7784bf76",familyProductKey:"xx1ecd2a4f-8391-4c70-b3c0-2d589bda56b7",familyResourceKey:"xx9dd85afc-64b6-4295-bc5d-eb8285f96d52",categoryProductKey:"xx2a299d60-2cf1-48ab-b9d5-94daeb25f1d6",categoryDetailKey:"xx61910369-c1ab-4df9-8d8a-3092b1323fcc",productRecommendationsKey:"xx107716c0-1ccd-4a61-8717-6ca36b6cdb0e",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"lifesciences.danaher.com"}:window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-KCBGM2N",munchkinID:"439-KNJ-322",marketoDomain:"//439-KNJ-322.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://stage.shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danahernonproduction1892f3fhz",searchKey:"xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b",workflowProductKey:"xx26ffc727-cc72-4bbd-98e3-34052f296382",workflowResourceKey:"xx14676f1d-cf4a-4a38-94f0-eda56e9920f1",productKey:"xx32da148e-dfd0-4725-a443-c05a7793afea",familyProductKey:"xx4e3989d6-93aa-4140-a227-19da35fcd1cc",familyResourceKey:"xx8274a91e-b29c-4267-8b3a-5022a2698605",categoryProductKey:"xxdf9d160d-f6e5-4c8c-969b-8570d7b81418",categoryDetailKey:"xxf2ea9bfd-bccb-4195-90fd-7757504fdc33",productRecommendationsKey:"xxea4d2c40-26e7-4e98-9377-d8ebe3f435ea",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"stage.lifesciences.danaher.com"},window.dataLayer=[],window.dataLayer.push({user:{customerID:"",accountType:"guest",marketCode:"",company:"",role:"",city:"",state:"",country:"",postalCode:"",lastVisit:""}}),window.dataLayer.push({page:getDLPage()}),loadPage();export{imageHelper,createOptimizedS7Picture,formatDateUTCSeconds,generateUUID,scrollJumpMenuFixed,scrollPageTabFixed,makePublicUrl,setJsonLd,getFragmentFromFile,getCookie,isOTEnabled,setCookie,decorateModals,decorateMain,processEmbedFragment}; \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index ccb16ac35..63c704608 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1779,6 +1779,8 @@ svg symbol path { margin-left: auto; margin-right: auto; display: flex; + padding-top: 1rem; + padding-bottom: 0px; } @media (min-width: 768px) { @@ -1792,6 +1794,8 @@ svg symbol path { margin-left: auto; margin-right: auto; display: flex; + padding-top: 1rem; + padding-bottom: 0px; } @media (min-width: 768px) { @@ -1807,12 +1811,6 @@ svg symbol path { justify-content: center; } -.page-jump-menu-container ul > :not([hidden]) ~ :not([hidden]), .page-tabs-container ul > :not([hidden]) ~ :not([hidden]) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); -} - .processstep main .default-content-wrapper.section.side-nav-container, .topic main, .topichub main { diff --git a/styles/tailwind.css b/styles/tailwind.css index 62e11be55..01bbd30df 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -524,7 +524,7 @@ } .page-jump-menu-container, .page-tabs-container { - @apply hidden md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-jump-menu-wrapper]:flex [&_.page-tabs-wrapper]:flex [&_.page-jump-menu-wrapper]:mx-auto [&_.page-tabs-wrapper]:mx-auto [&_.page-jump-menu-wrapper]:md:max-w-max [&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center ; + @apply hidden md:block -mt-20 px-0 md:px-4 lg:px-0 [&_.page-jump-menu-wrapper]:flex [&_.page-tabs-wrapper]:flex [&_.page-jump-menu-wrapper]:mx-auto [&_.page-tabs-wrapper]:mx-auto [&_.page-jump-menu-wrapper]:md:max-w-max [&_.page-tabs-wrapper]:md:max-w-max [&_.page-jump-menu-wrapper]:pt-4 [&_.page-jump-menu-wrapper]:pb-0 [&_.page-tabs-wrapper]:pt-4 [&_.page-tabs-wrapper]:pb-0 [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center ; } .processstep main .default-content-wrapper.section.side-nav-container, From 7ecf63b81fb39342c78089654a725a9951b64d51 Mon Sep 17 00:00:00 2001 From: rgravitvl <ravitvl83@gmail.com> Date: Mon, 20 May 2024 14:42:30 +0530 Subject: [PATCH 87/88] Removed javascript minification --- package.json | 4 +- scripts/lib-franklin-dev.js | 891 -------------------------------- scripts/lib-franklin.js | 892 +++++++++++++++++++++++++++++++- scripts/scripts-dev.js | 997 ----------------------------------- scripts/scripts.js | 998 +++++++++++++++++++++++++++++++++++- 5 files changed, 1889 insertions(+), 1893 deletions(-) delete mode 100644 scripts/lib-franklin-dev.js delete mode 100644 scripts/scripts-dev.js diff --git a/package.json b/package.json index cda1bd914..98c12495a 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,7 @@ "lint:js": "eslint .", "lint:css": "stylelint blocks/**/*-dev.css styles/*.css", "lint": "npm run lint:js && npm run lint:css", - "build": "npm-run-all build:css build:franklin:js build:script:js", - "build:franklin:js": "uglifyjs ./scripts/lib-franklin-dev.js -o ./scripts/lib-franklin.js -c -m", - "build:script:js": "uglifyjs ./scripts/scripts-dev.js -o ./scripts/scripts.js -c -m", + "build": "npm-run-all build:css", "build:css": "node ./build-css.js", "dev": "concurrently --kill-others \"node ./build-css.js --watch\" \"aem up --print-index\"", "semantic-release": "semantic-release --debug", diff --git a/scripts/lib-franklin-dev.js b/scripts/lib-franklin-dev.js deleted file mode 100644 index 83f81ebb5..000000000 --- a/scripts/lib-franklin-dev.js +++ /dev/null @@ -1,891 +0,0 @@ -/* eslint-disable max-classes-per-file */ -/* - * Copyright 2022 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/** - * log RUM if part of the sample. - * @param {string} checkpoint identifies the checkpoint in funnel - * @param {Object} data additional data for RUM sample - */ -export function sampleRUM(checkpoint, data = {}) { - sampleRUM.defer = sampleRUM.defer || []; - const defer = (fnname) => { - sampleRUM[fnname] = sampleRUM[fnname] || ((...args) => sampleRUM.defer.push({ fnname, args })); - }; - sampleRUM.drain = sampleRUM.drain - || ((dfnname, fn) => { - sampleRUM[dfnname] = fn; - sampleRUM.defer - .filter(({ fnname }) => dfnname === fnname) - .forEach(({ fnname, args }) => sampleRUM[fnname](...args)); - }); - sampleRUM.always = sampleRUM.always || []; - sampleRUM.always.on = (chkpnt, fn) => { - sampleRUM.always[chkpnt] = fn; - }; - sampleRUM.on = (chkpnt, fn) => { - sampleRUM.cases[chkpnt] = fn; - }; - defer('observe'); - defer('cwv'); - try { - window.hlx = window.hlx || {}; - if (!window.hlx.rum) { - const usp = new URLSearchParams(window.location.search); - const weight = usp.get('rum') === 'on' ? 1 : 20; // with parameter, weight is 1. Defaults to 100. - const id = Array.from({ length: 75 }, (_, i) => String.fromCharCode(48 + i)) - .filter((a) => /\d|[A-Z]/i.test(a)) - .filter(() => Math.random() * 75 > 70) - .join(''); - const random = Math.random(); - const isSelected = random * weight < 1; - const firstReadTime = Date.now(); - const urlSanitizers = { - full: () => window.location.href, - origin: () => window.location.origin, - path: () => window.location.href.replace(/\?.*$/, ''), - }; - // eslint-disable-next-line object-curly-newline, max-len - window.hlx.rum = { - weight, - id, - random, - isSelected, - firstReadTime, - sampleRUM, - sanitizeURL: urlSanitizers[window.hlx.RUM_MASK_URL || 'path'], - }; - } - const { weight, id, firstReadTime } = window.hlx.rum; - if (window.hlx && window.hlx.rum && window.hlx.rum.isSelected) { - const knownProperties = [ - 'weight', - 'id', - 'referer', - 'checkpoint', - 't', - 'source', - 'target', - 'cwv', - 'CLS', - 'FID', - 'LCP', - 'INP', - ]; - const sendPing = (pdata = data) => { - // eslint-disable-next-line object-curly-newline, max-len, no-use-before-define - const body = JSON.stringify( - { - weight, - id, - referer: window.hlx.rum.sanitizeURL(), - checkpoint, - t: Date.now() - firstReadTime, - ...data, - }, - knownProperties, - ); - const url = `https://rum.hlx.page/.rum/${weight}`; - // eslint-disable-next-line no-unused-expressions - navigator.sendBeacon(url, body); - // eslint-disable-next-line no-console - console.debug(`ping:${checkpoint}`, pdata); - }; - sampleRUM.cases = sampleRUM.cases || { - cwv: () => sampleRUM.cwv(data) || true, - lazy: () => { - // use classic script to avoid CORS issues - const script = document.createElement('script'); - script.src = 'https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js'; - document.head.appendChild(script); - return true; - }, - }; - sendPing(data); - if (sampleRUM.cases[checkpoint]) { - sampleRUM.cases[checkpoint](); - } - } - if (sampleRUM.always[checkpoint]) { - sampleRUM.always[checkpoint](data); - } - } catch (error) { - // something went wrong - } -} - -/** - * Loads a CSS file. - * @param {string} href URL to the CSS file - */ -export async function loadCSS(href) { - return new Promise((resolve, reject) => { - if (!document.querySelector(`head > link[href="${href}"]`)) { - const link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = href; - link.onload = resolve; - link.onerror = reject; - document.head.append(link); - } else { - resolve(); - } - }); -} - -/** - * Loads a non module JS file. - * @param {string} src URL to the JS file - * @param {Object} attrs additional optional attributes - */ - -export async function loadScript(src, attrs) { - return new Promise((resolve, reject) => { - if (!document.querySelector(`head > script[src="${src}"]`)) { - const script = document.createElement('script'); - script.src = src; - if (attrs) { - // eslint-disable-next-line no-restricted-syntax, guard-for-in - for (const attr in attrs) { - script.setAttribute(attr, attrs[attr]); - } - } - script.onload = resolve; - script.onerror = reject; - document.head.append(script); - } else { - resolve(); - } - }); -} - -/** - * Retrieves the content of metadata tags. - * @param {string} name The metadata name (or property) - * @returns {string} The metadata value(s) - */ -export function getMetadata(name) { - const attr = name && name.includes(':') ? 'property' : 'name'; - const meta = [...document.head.querySelectorAll(`meta[${attr}="${name}"]`)].map((m) => m.content).join(', '); - return meta || ''; -} - -/** - * Sanitizes a string for use as class name. - * @param {string} name The unsanitized string - * @returns {string} The class name - */ -export function toClassName(name) { - return typeof name === 'string' - ? name.toLowerCase().replace(/[^0-9a-z]/gi, '-').replace(/-+/g, '-').replace(/^-|-$/g, '') - : ''; -} - -/** - * Sanitizes a string for use as a js property name. - * @param {string} name The unsanitized string - * @returns {string} The camelCased name - */ -export function toCamelCase(name) { - return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase()); -} - -/** - * Gets all the metadata elements that are in the given scope. - * @param {String} scope The scope/prefix for the metadata - * @returns an array of HTMLElement nodes that match the given scope - */ -export function getAllMetadata(scope) { - return [...document.head.querySelectorAll(`meta[property^="${scope}:"],meta[name^="${scope}-"]`)] - .reduce((res, meta) => { - const id = toClassName(meta.name - ? meta.name.substring(scope.length + 1) - : meta.getAttribute('property').split(':')[1]); - res[id] = meta.getAttribute('content'); - return res; - }, {}); -} - -const ICONS_CACHE = {}; -/** - * Replace icons with inline SVG and prefix with codeBasePath. - * @param {Element} [element] Element containing icons - */ -export async function decorateIcons(element) { - // Prepare the inline sprite - let svgSprite = document.getElementById('franklin-svg-sprite'); - if (!svgSprite) { - const div = document.createElement('div'); - div.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>'; - svgSprite = div.firstElementChild; - document.body.append(div.firstElementChild); - } - - // Download all new icons - const icons = [...element.querySelectorAll('span.icon')]; - await Promise.all(icons.map(async (span) => { - const iconName = Array.from(span.classList).find((c) => c.startsWith('icon-')).substring(5); - if (!ICONS_CACHE[iconName]) { - ICONS_CACHE[iconName] = true; - try { - let iconSource = `${window.hlx.codeBasePath}/icons/${iconName}.svg`; - if (iconName.startsWith('dam-')) { - const isPublicDomain = window.location.hostname.includes('lifesciences.danaher.com'); - iconSource = isPublicDomain ? '' : 'https://lifesciences.danaher.com'; - iconSource += `/content/dam/danaher/system/icons/${iconName.substring(4).replace('_', ' ')}.svg`; - } - const response = await fetch(iconSource); - if (!response.ok) { - ICONS_CACHE[iconName] = false; - return; - } - // Styled icons don't play nice with the sprite approach because of shadow dom isolation - const svg = await response.text(); - if (svg.match(/(<style | class=)/)) { - ICONS_CACHE[iconName] = { styled: true, html: svg }; - } else { - ICONS_CACHE[iconName] = { - html: svg - .replace('<svg', `<symbol id="icons-sprite-${iconName}"`) - .replace(/ width=".*?"/, '') - .replace(/ height=".*?"/, '') - .replace('</svg>', '</symbol>'), - }; - } - } catch (error) { - ICONS_CACHE[iconName] = false; - // eslint-disable-next-line no-console - console.error(error); - } - } - })); - - const symbols = Object - .keys(ICONS_CACHE).filter((k) => !svgSprite.querySelector(`#icons-sprite-${k}`)) - .map((k) => ICONS_CACHE[k]) - .filter((v) => !v.styled) - .map((v) => v.html) - .join('\n'); - svgSprite.innerHTML += symbols; - - icons.forEach((span) => { - const iconName = Array.from(span.classList).find((c) => c.startsWith('icon-')).substring(5); - const parent = span.firstElementChild?.tagName === 'A' ? span.firstElementChild : span; - // Styled icons need to be inlined as-is, while unstyled ones can leverage the sprite - if (ICONS_CACHE[iconName].styled) { - parent.innerHTML = ICONS_CACHE[iconName].html; - } else { - parent.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${iconName}"/></svg>`; - } - }); -} - -/** - * Gets placeholders object. - * @param {string} [prefix] Location of placeholders - * @returns {object} Window placeholders object - */ -export async function fetchPlaceholders(prefix = 'default') { - window.placeholders = window.placeholders || {}; - const loaded = window.placeholders[`${prefix}-loaded`]; - if (!loaded) { - window.placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => { - fetch(`${prefix === 'default' ? '' : prefix}/placeholders.json`) - .then((resp) => { - if (resp.ok) { - return resp.json(); - } - throw new Error(`${resp.status}: ${resp.statusText}`); - }).then((json) => { - const placeholders = {}; - json.data - .filter((placeholder) => placeholder.Key) - .forEach((placeholder) => { - placeholders[toCamelCase(placeholder.Key)] = placeholder.Text; - }); - window.placeholders[prefix] = placeholders; - resolve(); - }).catch((error) => { - // error loading placeholders - window.placeholders[prefix] = {}; - reject(error); - }); - }); - } - await window.placeholders[`${prefix}-loaded`]; - return window.placeholders[prefix]; -} - -/** - * Decorates a block. - * @param {Element} block The block element - */ -export function decorateBlock(block) { - const shortBlockName = block.classList[0]; - if (shortBlockName) { - block.classList.add('block'); - block.dataset.blockName = shortBlockName; - block.dataset.blockStatus = 'initialized'; - const blockWrapper = block.parentElement; - blockWrapper.classList.add(`${shortBlockName}-wrapper`); - const section = block.closest('.section'); - if (section) section.classList.add(`${shortBlockName}-container`); - } -} - -/** - * Extracts the config from a block. - * @param {Element} block The block element - * @returns {object} The block config - */ -export function readBlockConfig(block) { - const config = {}; - block.querySelectorAll(':scope > div').forEach((row) => { - if (row.children) { - const cols = [...row.children]; - if (cols[1]) { - const col = cols[1]; - const name = toClassName(cols[0].textContent); - let value = ''; - if (col.querySelector('a')) { - const as = [...col.querySelectorAll('a')]; - if (as.length === 1) { - value = as[0].href; - } else { - value = as.map((a) => a.href); - } - } else if (col.querySelector('img')) { - const imgs = [...col.querySelectorAll('img')]; - if (imgs.length === 1) { - value = imgs[0].src; - } else { - value = imgs.map((img) => img.src); - } - } else if (col.querySelector('p')) { - const ps = [...col.querySelectorAll('p')]; - if (ps.length === 1) { - value = ps[0].textContent; - } else { - value = ps.map((p) => p.textContent); - } - } else value = row.children[1].textContent; - config[name] = value; - } - } - }); - return config; -} - -/** - * Decorates all sections in a container element. - * @param {Element} main The container element - */ -export function decorateSections(main) { - main.querySelectorAll(':scope > div').forEach((section) => { - const wrappers = []; - let defaultContent = false; - [...section.children].forEach((e) => { - if (e.tagName === 'DIV' || !defaultContent) { - const wrapper = document.createElement('div'); - wrappers.push(wrapper); - defaultContent = e.tagName !== 'DIV'; - if (defaultContent) wrapper.classList.add('default-content-wrapper'); - } - wrappers[wrappers.length - 1].append(e); - }); - wrappers.forEach((wrapper) => section.append(wrapper)); - section.classList.add('section'); - section.dataset.sectionStatus = 'initialized'; - section.style.display = 'none'; - - /* process section metadata */ - const sectionMeta = section.querySelector('div.section-metadata'); - if (sectionMeta) { - const meta = readBlockConfig(sectionMeta); - Object.keys(meta).forEach((key) => { - if (key === 'style') { - const styles = meta.style.split(',').map((style) => toClassName(style.trim())); - styles.forEach((style) => section.classList.add(style)); - } else { - section.dataset[toCamelCase(key)] = meta[key]; - } - }); - sectionMeta.parentNode.remove(); - } - }); -} - -/** - * Updates all section status in a container element. - * @param {Element} main The container element - */ -export function updateSectionsStatus(main) { - const sections = [...main.querySelectorAll(':scope > div.section')]; - for (let i = 0; i < sections.length; i += 1) { - const section = sections[i]; - const status = section.dataset.sectionStatus; - if (status !== 'loaded') { - const loadingBlock = section.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]'); - if (loadingBlock) { - section.dataset.sectionStatus = 'loading'; - break; - } else { - section.dataset.sectionStatus = 'loaded'; - section.style.display = null; - } - } - } -} - -/** - * Decorates all blocks in a container element. - * @param {Element} main The container element - */ -export function decorateBlocks(main) { - main - .querySelectorAll('div.section > div > div') - .forEach(decorateBlock); -} - -/** - * Builds a block DOM Element from a two dimensional array, string, or object - * @param {string} blockName name of the block - * @param {*} content two dimensional array or string or object of content - */ -export function buildBlock(blockName, content) { - const table = Array.isArray(content) ? content : [[content]]; - const blockEl = document.createElement('div'); - // build image block nested div structure - blockEl.classList.add(blockName); - table.forEach((row) => { - const rowEl = document.createElement('div'); - row.forEach((col) => { - const colEl = document.createElement('div'); - const vals = col.elems ? col.elems : [col]; - vals.forEach((val) => { - if (val) { - if (typeof val === 'string') { - colEl.innerHTML += val; - } else { - colEl.appendChild(val); - } - } - }); - rowEl.appendChild(colEl); - }); - blockEl.appendChild(rowEl); - }); - return (blockEl); -} - -/** - * Loads JS and CSS for a module and executes it's default export. - * @param {string} name The module name - * @param {string} jsPath The JS file to load - * @param {string} [cssPath] An optional CSS file to load - * @param {object[]} [args] Parameters to be passed to the default export when it is called - */ -async function loadModule(name, jsPath, cssPath, ...args) { - const cssLoaded = cssPath ? loadCSS(cssPath) : Promise.resolve(); - const decorationComplete = jsPath - ? new Promise((resolve) => { - (async () => { - let mod; - try { - mod = await import(jsPath); - if (mod.default) { - await mod.default.apply(null, args); - } - } catch (error) { - // eslint-disable-next-line no-console - console.log(`failed to load module for ${name}`, error); - } - resolve(mod); - })(); - }) - : Promise.resolve(); - return Promise.all([cssLoaded, decorationComplete]) - .then(([, api]) => api); -} - -/** - * Gets the configuration for the given block, and also passes - * the config through all custom patching helpers added to the project. - * - * @param {Element} block The block element - * @returns {Object} The block config (blockName, cssPath and jsPath) - */ -function getBlockConfig(block) { - const { blockName } = block.dataset; - const jsPath = blockName ? `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js` : ''; - const cssPath = blockName ? `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css` : ''; - const original = { blockName, jsPath }; - return (window.hlx.patchBlockConfig || []) - .filter((fn) => typeof fn === 'function') - .reduce((config, fn) => fn(config, original), { blockName, jsPath, cssPath }); -} - -const cssExpectionalBlocks = []; - -/** - * Loads JS and CSS for a block. - * @param {Element} block The block element - */ -export async function loadBlock(block) { - const status = block.dataset.blockStatus; - if (status !== 'loading' && status !== 'loaded') { - block.dataset.blockStatus = 'loading'; - const { blockName, jsPath, cssPath } = getBlockConfig(block); - try { - if (cssExpectionalBlocks.includes(blockName)) { - await loadModule(blockName, jsPath, undefined, block); - } else { await loadModule(blockName, jsPath, cssPath, block); } - } catch (error) { - // eslint-disable-next-line no-console - console.log(`failed to load block ${blockName}`, error); - } - block.dataset.blockStatus = 'loaded'; - } -} - -/** - * Loads JS and CSS for all blocks in a container element. - * @param {Element} main The container element - */ -export async function loadBlocks(main) { - updateSectionsStatus(main); - const blocks = [...main.querySelectorAll('div.block')]; - for (let i = 0; i < blocks.length; i += 1) { - // eslint-disable-next-line no-await-in-loop - await loadBlock(blocks[i]); - updateSectionsStatus(main); - } -} - -/** - * Returns a picture element with webp and fallbacks - * @param {string} src The image URL - * @param {string} [alt] The image alternative text - * @param {boolean} [eager] Set loading attribute to eager - * @param {Array} [breakpoints] Breakpoints and corresponding params (eg. width) - * @returns {Element} The picture element - */ -export function createOptimizedPicture(src, alt = '', eager = false, breakpoints = [{ media: '(min-width: 600px)', width: '2000' }, { width: '750' }]) { - const url = new URL(src, window.location.href); - const picture = document.createElement('picture'); - const { pathname } = url; - const ext = pathname.substring(pathname.lastIndexOf('.') + 1); - - // webp - breakpoints.forEach((br) => { - const source = document.createElement('source'); - if (br.media) source.setAttribute('media', br.media); - source.setAttribute('type', 'image/webp'); - source.setAttribute('srcset', `${pathname}?width=${br.width}&format=webply&optimize=medium`); - picture.appendChild(source); - }); - - // fallback - breakpoints.forEach((br, i) => { - if (i < breakpoints.length - 1) { - const source = document.createElement('source'); - if (br.media) source.setAttribute('media', br.media); - source.setAttribute('srcset', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`); - picture.appendChild(source); - } else { - const img = document.createElement('img'); - img.setAttribute('loading', eager ? 'eager' : 'lazy'); - img.setAttribute('alt', alt); - picture.appendChild(img); - img.setAttribute('src', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`); - } - }); - - return picture; -} - -/** - * Normalizes all headings within a container element. - * @param {Element} el The container element - * @param {string} allowedHeadings The list of allowed headings (h1 ... h6) - */ -export function normalizeHeadings(el, allowedHeadings) { - const allowed = allowedHeadings.map((h) => h.toLowerCase()); - el.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((tag) => { - const h = tag.tagName.toLowerCase(); - if (allowed.indexOf(h) === -1) { - // current heading is not in the allowed list -> try first to "promote" the heading - let level = parseInt(h.charAt(1), 10) - 1; - while (allowed.indexOf(`h${level}`) === -1 && level > 0) { - level -= 1; - } - if (level === 0) { - // did not find a match -> try to "downgrade" the heading - while (allowed.indexOf(`h${level}`) === -1 && level < 7) { - level += 1; - } - } - if (level !== 7) { - tag.outerHTML = `<h${level} id="${tag.id}">${tag.textContent}</h${level}>`; - } - } - }); -} - -/** - * Set template (page structure) and theme (page styles). - */ -export function decorateTemplateAndTheme() { - const addClasses = (element, classes) => { - classes.split(',').forEach((c) => { - element.classList.add(toClassName(c.trim())); - }); - }; - const template = getMetadata('template'); - if (template) addClasses(document.body, template); - const theme = getMetadata('theme'); - if (theme) addClasses(document.body, theme); -} - -/** - * Decorates paragraphs containing a single link as buttons. - * @param {Element} element container element - */ -export function decorateButtons(element) { - element.querySelectorAll('a').forEach((a) => { - a.title = a.title || a.textContent; - if (a.href !== a.textContent && a.title !== 'link') { - const up = a.parentElement; - const twoup = a.parentElement.parentElement; - if (!a.querySelector('img') && twoup.tagName !== 'LI' && !a.closest('.call-to-action') - && !a.closest('.mini-teasers') && !a.closest('.bg-color-right')) { - if (up.childNodes.length === 1 && (up.tagName === 'P' || up.tagName === 'DIV')) { - a.className = 'btn btn-outline-primary'; // default - up.classList.add('button-container'); - } - if (up.childNodes.length === 1 && up.tagName === 'STRONG' - && twoup.childNodes.length === 1 && twoup.tagName === 'P') { - a.className = 'btn btn-outline-primary'; - twoup.classList.add('button-container'); - } - if (up.childNodes.length === 1 && up.tagName === 'EM' - && twoup.childNodes.length === 1 && twoup.tagName === 'P') { - a.className = 'btn btn-outline-secondary'; - twoup.classList.add('button-container'); - } - } - } - }); -} - -/** - * Load LCP block and/or wait for LCP in default content. - */ -export async function waitForLCP(lcpBlocks) { - const block = document.querySelector('.block'); - const hasLCPBlock = (block && lcpBlocks.includes(block.dataset.blockName)); - if (hasLCPBlock) await loadBlock(block); - - document.body.style.display = null; - const lcpCandidate = document.querySelector('main img'); - await new Promise((resolve) => { - if (lcpCandidate && !lcpCandidate.complete) { - lcpCandidate.setAttribute('loading', 'eager'); - lcpCandidate.addEventListener('load', resolve); - lcpCandidate.addEventListener('error', resolve); - } else { - resolve(); - } - }); -} - -/** - * Loads a block named 'header' into header - * @param {Element} header header element - * @returns {Promise} - */ -export function loadHeader(header) { - const headerBlock = buildBlock('header', ''); - header.append(headerBlock); - decorateBlock(headerBlock); - return loadBlock(headerBlock); -} - -/** - * Loads a block named 'footer' into footer - * @param footer footer element - * @returns {Promise} - */ -export function loadFooter(footer) { - const footerBlock = buildBlock('footer', ''); - footer.append(footerBlock); - decorateBlock(footerBlock); - return loadBlock(footerBlock); -} - -function parsePluginParams(id, config) { - const pluginId = !config - ? id.split('/').splice(id.endsWith('/') ? -2 : -1, 1)[0].replace(/\.js/, '') - : id; - const pluginConfig = { - load: 'eager', - ...(typeof config === 'string' || !config - ? { url: (config || id).replace(/\/$/, '') } - : config), - }; - pluginConfig.options ||= {}; - return { id: pluginId, config: pluginConfig }; -} - -// Define an execution context for plugins -export const executionContext = { - createOptimizedPicture, - getAllMetadata, - getMetadata, - decorateBlock, - decorateButtons, - decorateIcons, - loadBlock, - loadCSS, - loadScript, - sampleRUM, - toCamelCase, - toClassName, -}; - -class PluginsRegistry { - #plugins; - - constructor() { - this.#plugins = new Map(); - } - - // Register a new plugin - add(id, config) { - const { id: pluginId, config: pluginConfig } = parsePluginParams(id, config); - this.#plugins.set(pluginId, pluginConfig); - } - - // Get the plugin - get(id) { return this.#plugins.get(id); } - - // Check if the plugin exists - includes(id) { return !!this.#plugins.has(id); } - - // Load all plugins that are referenced by URL, and updated their configuration with the - // actual API they expose - async load(phase) { - [...this.#plugins.entries()] - .filter(([, plugin]) => plugin.condition - && !plugin.condition(document, plugin.options, executionContext)) - .map(([id]) => this.#plugins.delete(id)); - return Promise.all([...this.#plugins.entries()] - // Filter plugins that don't match the execution conditions - .filter(([, plugin]) => ( - (!plugin.condition || plugin.condition(document, plugin.options, executionContext)) - && phase === plugin.load && plugin.url - )) - .map(async ([key, plugin]) => { - try { - // If the plugin has a default export, it will be executed immediately - const pluginApi = (await loadModule( - key, - !plugin.url.endsWith('.js') ? `${plugin.url}/${key}.js` : plugin.url, - !plugin.url.endsWith('.js') ? `${plugin.url}/${key}.css` : null, - document, - plugin.options, - executionContext, - )) || {}; - this.#plugins.set(key, { ...plugin, ...pluginApi }); - } catch (err) { - // eslint-disable-next-line no-console - console.error('Could not load specified plugin', key); - } - })); - } - - // Run a specific phase in the plugin - async run(phase) { - return [...this.#plugins.values()] - .reduce((promise, plugin) => ( // Using reduce to execute plugins sequencially - plugin[phase] && (!plugin.condition - || plugin.condition(document, plugin.options, executionContext)) - ? promise.then(() => plugin[phase](document, plugin.options, executionContext)) - : promise - ), Promise.resolve()); - } -} - -class TemplatesRegistry { - // Register a new template - // eslint-disable-next-line class-methods-use-this - add(id, url) { - if (Array.isArray(id)) { - id.forEach((i) => window.hlx.templates.add(i)); - return; - } - const { id: templateId, config: templateConfig } = parsePluginParams(id, url); - templateConfig.condition = () => toClassName(getMetadata('template')) === templateId; - window.hlx.plugins.add(templateId, templateConfig); - } - - // Get the template - // eslint-disable-next-line class-methods-use-this - get(id) { return window.hlx.plugins.get(id); } - - // Check if the template exists - // eslint-disable-next-line class-methods-use-this - includes(id) { return window.hlx.plugins.includes(id); } -} - -/** - * Setup block utils. - */ -export function setup() { - window.hlx = window.hlx || {}; - window.hlx.RUM_MASK_URL = 'full'; - window.hlx.codeBasePath = ''; - window.hlx.lighthouse = new URLSearchParams(window.location.search).get('lighthouse') === 'on'; - window.hlx.patchBlockConfig = []; - window.hlx.plugins = new PluginsRegistry(); - window.hlx.templates = new TemplatesRegistry(); - - const scriptEl = document.querySelector('script[src$="/scripts/scripts.js"]'); - if (scriptEl) { - try { - [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js'); - } catch (error) { - // eslint-disable-next-line no-console - console.log(error); - } - } -} - -/** - * Auto initializiation. - */ -function init() { - setup(); - sampleRUM('top'); - - window.addEventListener('load', () => sampleRUM('load')); - - window.addEventListener('unhandledrejection', (event) => { - sampleRUM('error', { source: event.reason.sourceURL, target: event.reason.line }); - }); - - window.addEventListener('error', (event) => { - sampleRUM('error', { source: event.filename, target: event.lineno }); - }); -} - -init(); diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js index abaaa2e15..83f81ebb5 100644 --- a/scripts/lib-franklin.js +++ b/scripts/lib-franklin.js @@ -1 +1,891 @@ -function sampleRUM(e,t={}){sampleRUM.defer=sampleRUM.defer||[];var a,o,n,l,s,r,i,c,d,u=t=>{sampleRUM[t]=sampleRUM[t]||((...e)=>sampleRUM.defer.push({fnname:t,args:e}))};sampleRUM.drain=sampleRUM.drain||((t,e)=>{sampleRUM[t]=e,sampleRUM.defer.filter(({fnname:e})=>t===e).forEach(({fnname:e,args:t})=>sampleRUM[e](...t))}),sampleRUM.always=sampleRUM.always||[],sampleRUM.always.on=(e,t)=>{sampleRUM.always[e]=t},sampleRUM.on=(e,t)=>{sampleRUM.cases[e]=t},u("observe"),u("cwv");try{window.hlx=window.hlx||{},window.hlx.rum||(a="on"===new URLSearchParams(window.location.search).get("rum")?1:20,o=Array.from({length:75},(e,t)=>String.fromCharCode(48+t)).filter(e=>/\d|[A-Z]/i.test(e)).filter(()=>70<75*Math.random()).join(""),l=(n=Math.random())*a<1,s=Date.now(),r={full:()=>window.location.href,origin:()=>window.location.origin,path:()=>window.location.href.replace(/\?.*$/,"")},window.hlx.rum={weight:a,id:o,random:n,isSelected:l,firstReadTime:s,sampleRUM:sampleRUM,sanitizeURL:r[window.hlx.RUM_MASK_URL||"path"]});const{weight:m,id:p,firstReadTime:h}=window.hlx.rum;if(window.hlx&&window.hlx.rum&&window.hlx.rum.isSelected){const w=["weight","id","referer","checkpoint","t","source","target","cwv","CLS","FID","LCP","INP"];sampleRUM.cases=sampleRUM.cases||{cwv:()=>sampleRUM.cwv(t)||!0,lazy:()=>{var e=document.createElement("script");return e.src="https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js",document.head.appendChild(e),!0}},[i=t]=[t],c=JSON.stringify({weight:m,id:p,referer:window.hlx.rum.sanitizeURL(),checkpoint:e,t:Date.now()-h,...t},w),d="https://rum.hlx.page/.rum/"+m,navigator.sendBeacon(d,c),console.debug("ping:"+e,i),sampleRUM.cases[e]&&sampleRUM.cases[e]()}sampleRUM.always[e]&&sampleRUM.always[e](t)}catch(e){}}async function loadCSS(o){return new Promise((e,t)=>{var a;document.querySelector(`head > link[href="${o}"]`)?e():((a=document.createElement("link")).rel="stylesheet",a.href=o,a.onload=e,a.onerror=t,document.head.append(a))})}async function loadScript(n,l){return new Promise((e,t)=>{if(document.querySelector(`head > script[src="${n}"]`))e();else{var a=document.createElement("script");if(a.src=n,l)for(const o in l)a.setAttribute(o,l[o]);a.onload=e,a.onerror=t,document.head.append(a)}})}function getMetadata(e){var t=e&&e.includes(":")?"property":"name";return[...document.head.querySelectorAll(`meta[${t}="${e}"]`)].map(e=>e.content).join(", ")||""}function toClassName(e){return"string"==typeof e?e.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}function toCamelCase(e){return toClassName(e).replace(/-([a-z])/g,e=>e[1].toUpperCase())}function getAllMetadata(a){return[...document.head.querySelectorAll(`meta[property^="${a}:"],meta[name^="${a}-"]`)].reduce((e,t)=>{return e[toClassName(t.name?t.name.substring(a.length+1):t.getAttribute("property").split(":")[1])]=t.getAttribute("content"),e},{})}const ICONS_CACHE={};async function decorateIcons(e){let t=document.getElementById("franklin-svg-sprite");t||((a=document.createElement("div")).innerHTML='<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>',t=a.firstElementChild,document.body.append(a.firstElementChild));var a=[...e.querySelectorAll("span.icon")],e=(await Promise.all(a.map(async t=>{t=Array.from(t.classList).find(e=>e.startsWith("icon-")).substring(5);if(!ICONS_CACHE[t]){ICONS_CACHE[t]=!0;try{let e=window.hlx.codeBasePath+`/icons/${t}.svg`;t.startsWith("dam-")&&(a=window.location.hostname.includes("lifesciences.danaher.com"),e=a?"":"https://lifesciences.danaher.com",e+=`/content/dam/danaher/system/icons/${t.substring(4).replace("_"," ")}.svg`);var a,o,n=await fetch(e);n.ok?(o=await n.text()).match(/(<style | class=)/)?ICONS_CACHE[t]={styled:!0,html:o}:ICONS_CACHE[t]={html:o.replace("<svg",`<symbol id="icons-sprite-${t}"`).replace(/ width=".*?"/,"").replace(/ height=".*?"/,"").replace("</svg>","</symbol>")}:ICONS_CACHE[t]=!1}catch(e){ICONS_CACHE[t]=!1,console.error(e)}}})),Object.keys(ICONS_CACHE).filter(e=>!t.querySelector("#icons-sprite-"+e)).map(e=>ICONS_CACHE[e]).filter(e=>!e.styled).map(e=>e.html).join("\n"));t.innerHTML+=e,a.forEach(e=>{var t=Array.from(e.classList).find(e=>e.startsWith("icon-")).substring(5),e="A"===e.firstElementChild?.tagName?e.firstElementChild:e;ICONS_CACHE[t].styled?e.innerHTML=ICONS_CACHE[t].html:e.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${t}"/></svg>`})}async function fetchPlaceholders(o="default"){return window.placeholders=window.placeholders||{},window.placeholders[o+"-loaded"]||(window.placeholders[o+"-loaded"]=new Promise((a,t)=>{fetch(`${"default"===o?"":o}/placeholders.json`).then(e=>{if(e.ok)return e.json();throw new Error(e.status+": "+e.statusText)}).then(e=>{const t={};e.data.filter(e=>e.Key).forEach(e=>{t[toCamelCase(e.Key)]=e.Text}),window.placeholders[o]=t,a()}).catch(e=>{window.placeholders[o]={},t(e)})})),await window.placeholders[o+"-loaded"],window.placeholders[o]}function decorateBlock(e){var t=e.classList[0];t&&(e.classList.add("block"),e.dataset.blockName=t,e.dataset.blockStatus="initialized",e.parentElement.classList.add(t+"-wrapper"),e=e.closest(".section"))&&e.classList.add(t+"-container")}function readBlockConfig(e){const l={};return e.querySelectorAll(":scope > div").forEach(t=>{if(t.children){var a=[...t.children];if(a[1]){var o,n=a[1],a=toClassName(a[0].textContent);let e="";e=n.querySelector("a")?1===(o=[...n.querySelectorAll("a")]).length?o[0].href:o.map(e=>e.href):n.querySelector("img")?1===(o=[...n.querySelectorAll("img")]).length?o[0].src:o.map(e=>e.src):n.querySelector("p")?1===(o=[...n.querySelectorAll("p")]).length?o[0].textContent:o.map(e=>e.textContent):t.children[1].textContent,l[a]=e}}}),l}function decorateSections(e){e.querySelectorAll(":scope > div").forEach(t=>{const a=[];let o=!1;[...t.children].forEach(e=>{var t;"DIV"!==e.tagName&&o||(t=document.createElement("div"),a.push(t),(o="DIV"!==e.tagName)&&t.classList.add("default-content-wrapper")),a[a.length-1].append(e)}),a.forEach(e=>t.append(e)),t.classList.add("section"),t.dataset.sectionStatus="initialized",t.style.display="none";var e=t.querySelector("div.section-metadata");if(e){const n=readBlockConfig(e);Object.keys(n).forEach(e=>{"style"===e?n.style.split(",").map(e=>toClassName(e.trim())).forEach(e=>t.classList.add(e)):t.dataset[toCamelCase(e)]=n[e]}),e.parentNode.remove()}})}function updateSectionsStatus(e){var t=[...e.querySelectorAll(":scope > div.section")];for(let e=0;e<t.length;e+=1){var a=t[e];if("loaded"!==a.dataset.sectionStatus){if(a.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]')){a.dataset.sectionStatus="loading";break}a.dataset.sectionStatus="loaded",a.style.display=null}}}function decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(decorateBlock)}function buildBlock(e,t){t=Array.isArray(t)?t:[[t]];const o=document.createElement("div");return o.classList.add(e),t.forEach(e=>{const a=document.createElement("div");e.forEach(e=>{const t=document.createElement("div");(e.elems||[e]).forEach(e=>{e&&("string"==typeof e?t.innerHTML+=e:t.appendChild(e))}),a.appendChild(t)}),o.appendChild(a)}),o}async function loadModule(a,o,e,...n){var e=e?loadCSS(e):Promise.resolve(),t=o?new Promise(t=>{(async()=>{let e;try{(e=await import(o)).default&&await e.default.apply(null,n)}catch(e){console.log("failed to load module for "+a,e)}t(e)})()}):Promise.resolve();return Promise.all([e,t]).then(([,e])=>e)}function getBlockConfig(e){var e=e.dataset["blockName"],t=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.js`:"",a=e?window.hlx.codeBasePath+`/blocks/${e}/${e}.css`:"";const o={blockName:e,jsPath:t};return(window.hlx.patchBlockConfig||[]).filter(e=>"function"==typeof e).reduce((e,t)=>t(e,o),{blockName:e,jsPath:t,cssPath:a})}const cssExpectionalBlocks=[];async function loadBlock(e){var t=e.dataset.blockStatus;if("loading"!==t&&"loaded"!==t){e.dataset.blockStatus="loading";var{blockName:t,jsPath:a,cssPath:o}=getBlockConfig(e);try{cssExpectionalBlocks.includes(t)?await loadModule(t,a,void 0,e):await loadModule(t,a,o,e)}catch(e){console.log("failed to load block "+t,e)}e.dataset.blockStatus="loaded"}}async function loadBlocks(t){updateSectionsStatus(t);var a=[...t.querySelectorAll("div.block")];for(let e=0;e<a.length;e+=1)await loadBlock(a[e]),updateSectionsStatus(t)}function createOptimizedPicture(e,a="",o=!1,n=[{media:"(min-width: 600px)",width:"2000"},{width:"750"}]){e=new URL(e,window.location.href);const l=document.createElement("picture"),s=e["pathname"],r=s.substring(s.lastIndexOf(".")+1);return n.forEach(e=>{var t=document.createElement("source");e.media&&t.setAttribute("media",e.media),t.setAttribute("type","image/webp"),t.setAttribute("srcset",`${s}?width=${e.width}&format=webply&optimize=medium`),l.appendChild(t)}),n.forEach((e,t)=>{t<n.length-1?(t=document.createElement("source"),e.media&&t.setAttribute("media",e.media),t.setAttribute("srcset",`${s}?width=${e.width}&format=${r}&optimize=medium`),l.appendChild(t)):((t=document.createElement("img")).setAttribute("loading",o?"eager":"lazy"),t.setAttribute("alt",a),l.appendChild(t),t.setAttribute("src",`${s}?width=${e.width}&format=${r}&optimize=medium`))}),l}function normalizeHeadings(e,t){const o=t.map(e=>e.toLowerCase());e.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(t=>{var a=t.tagName.toLowerCase();if(-1===o.indexOf(a)){let e=parseInt(a.charAt(1),10)-1;for(;-1===o.indexOf("h"+e)&&0<e;)--e;if(0===e)for(;-1===o.indexOf("h"+e)&&e<7;)e+=1;7!==e&&(t.outerHTML=`<h${e} id="${t.id}">${t.textContent}</h${e}>`)}})}function decorateTemplateAndTheme(){var e=(t,e)=>{e.split(",").forEach(e=>{t.classList.add(toClassName(e.trim()))})},t=getMetadata("template"),t=(t&&e(document.body,t),getMetadata("theme"));t&&e(document.body,t)}function decorateButtons(e){e.querySelectorAll("a").forEach(e=>{var t,a;e.title=e.title||e.textContent,e.href!==e.textContent&&"link"!==e.title&&(t=e.parentElement,a=e.parentElement.parentElement,e.querySelector("img")||"LI"===a.tagName||e.closest(".call-to-action")||e.closest(".mini-teasers")||e.closest(".bg-color-right")||(1!==t.childNodes.length||"P"!==t.tagName&&"DIV"!==t.tagName||(e.className="btn btn-outline-primary",t.classList.add("button-container")),1===t.childNodes.length&&"STRONG"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-primary",a.classList.add("button-container")),1===t.childNodes.length&&"EM"===t.tagName&&1===a.childNodes.length&&"P"===a.tagName&&(e.className="btn btn-outline-secondary",a.classList.add("button-container"))))})}async function waitForLCP(e){var t=document.querySelector(".block");t&&e.includes(t.dataset.blockName)&&await loadBlock(t),document.body.style.display=null;const a=document.querySelector("main img");await new Promise(e=>{a&&!a.complete?(a.setAttribute("loading","eager"),a.addEventListener("load",e),a.addEventListener("error",e)):e()})}function loadHeader(e){var t=buildBlock("header","");return e.append(t),decorateBlock(t),loadBlock(t)}function loadFooter(e){var t=buildBlock("footer","");return e.append(t),decorateBlock(t),loadBlock(t)}function parsePluginParams(e,t){var a=t?e:e.split("/").splice(e.endsWith("/")?-2:-1,1)[0].replace(/\.js/,""),t={load:"eager",..."string"!=typeof t&&t?t:{url:(t||e).replace(/\/$/,"")}};return t.options||={},{id:a,config:t}}const executionContext={createOptimizedPicture:createOptimizedPicture,getAllMetadata:getAllMetadata,getMetadata:getMetadata,decorateBlock:decorateBlock,decorateButtons:decorateButtons,decorateIcons:decorateIcons,loadBlock:loadBlock,loadCSS:loadCSS,loadScript:loadScript,sampleRUM:sampleRUM,toCamelCase:toCamelCase,toClassName:toClassName};class PluginsRegistry{#plugins;constructor(){this.#plugins=new Map}add(e,t){var{id:e,config:t}=parsePluginParams(e,t);this.#plugins.set(e,t)}get(e){return this.#plugins.get(e)}includes(e){return!!this.#plugins.has(e)}async load(t){return[...this.#plugins.entries()].filter(([,e])=>e.condition&&!e.condition(document,e.options,executionContext)).map(([e])=>this.#plugins.delete(e)),Promise.all([...this.#plugins.entries()].filter(([,e])=>(!e.condition||e.condition(document,e.options,executionContext))&&t===e.load&&e.url).map(async([t,e])=>{try{var a=await loadModule(t,e.url.endsWith(".js")?e.url:e.url+`/${t}.js`,e.url.endsWith(".js")?null:e.url+`/${t}.css`,document,e.options,executionContext)||{};this.#plugins.set(t,{...e,...a})}catch(e){console.error("Could not load specified plugin",t)}}))}async run(a){return[...this.#plugins.values()].reduce((e,t)=>!t[a]||t.condition&&!t.condition(document,t.options,executionContext)?e:e.then(()=>t[a](document,t.options,executionContext)),Promise.resolve())}}class TemplatesRegistry{add(e,t){if(Array.isArray(e))e.forEach(e=>window.hlx.templates.add(e));else{const{id:a,config:o}=parsePluginParams(e,t);o.condition=()=>toClassName(getMetadata("template"))===a,window.hlx.plugins.add(a,o)}}get(e){return window.hlx.plugins.get(e)}includes(e){return window.hlx.plugins.includes(e)}}function setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse="on"===new URLSearchParams(window.location.search).get("lighthouse"),window.hlx.patchBlockConfig=[],window.hlx.plugins=new PluginsRegistry,window.hlx.templates=new TemplatesRegistry;var e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(e){console.log(e)}}function init(){setup(),sampleRUM("top"),window.addEventListener("load",()=>sampleRUM("load")),window.addEventListener("unhandledrejection",e=>{sampleRUM("error",{source:e.reason.sourceURL,target:e.reason.line})}),window.addEventListener("error",e=>{sampleRUM("error",{source:e.filename,target:e.lineno})})}init();export{sampleRUM,loadCSS,loadScript,getMetadata,toClassName,toCamelCase,getAllMetadata,decorateIcons,fetchPlaceholders,decorateBlock,readBlockConfig,decorateSections,updateSectionsStatus,decorateBlocks,buildBlock,loadBlock,loadBlocks,createOptimizedPicture,normalizeHeadings,decorateTemplateAndTheme,decorateButtons,waitForLCP,loadHeader,loadFooter,executionContext,setup}; \ No newline at end of file +/* eslint-disable max-classes-per-file */ +/* + * Copyright 2022 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +/** + * log RUM if part of the sample. + * @param {string} checkpoint identifies the checkpoint in funnel + * @param {Object} data additional data for RUM sample + */ +export function sampleRUM(checkpoint, data = {}) { + sampleRUM.defer = sampleRUM.defer || []; + const defer = (fnname) => { + sampleRUM[fnname] = sampleRUM[fnname] || ((...args) => sampleRUM.defer.push({ fnname, args })); + }; + sampleRUM.drain = sampleRUM.drain + || ((dfnname, fn) => { + sampleRUM[dfnname] = fn; + sampleRUM.defer + .filter(({ fnname }) => dfnname === fnname) + .forEach(({ fnname, args }) => sampleRUM[fnname](...args)); + }); + sampleRUM.always = sampleRUM.always || []; + sampleRUM.always.on = (chkpnt, fn) => { + sampleRUM.always[chkpnt] = fn; + }; + sampleRUM.on = (chkpnt, fn) => { + sampleRUM.cases[chkpnt] = fn; + }; + defer('observe'); + defer('cwv'); + try { + window.hlx = window.hlx || {}; + if (!window.hlx.rum) { + const usp = new URLSearchParams(window.location.search); + const weight = usp.get('rum') === 'on' ? 1 : 20; // with parameter, weight is 1. Defaults to 100. + const id = Array.from({ length: 75 }, (_, i) => String.fromCharCode(48 + i)) + .filter((a) => /\d|[A-Z]/i.test(a)) + .filter(() => Math.random() * 75 > 70) + .join(''); + const random = Math.random(); + const isSelected = random * weight < 1; + const firstReadTime = Date.now(); + const urlSanitizers = { + full: () => window.location.href, + origin: () => window.location.origin, + path: () => window.location.href.replace(/\?.*$/, ''), + }; + // eslint-disable-next-line object-curly-newline, max-len + window.hlx.rum = { + weight, + id, + random, + isSelected, + firstReadTime, + sampleRUM, + sanitizeURL: urlSanitizers[window.hlx.RUM_MASK_URL || 'path'], + }; + } + const { weight, id, firstReadTime } = window.hlx.rum; + if (window.hlx && window.hlx.rum && window.hlx.rum.isSelected) { + const knownProperties = [ + 'weight', + 'id', + 'referer', + 'checkpoint', + 't', + 'source', + 'target', + 'cwv', + 'CLS', + 'FID', + 'LCP', + 'INP', + ]; + const sendPing = (pdata = data) => { + // eslint-disable-next-line object-curly-newline, max-len, no-use-before-define + const body = JSON.stringify( + { + weight, + id, + referer: window.hlx.rum.sanitizeURL(), + checkpoint, + t: Date.now() - firstReadTime, + ...data, + }, + knownProperties, + ); + const url = `https://rum.hlx.page/.rum/${weight}`; + // eslint-disable-next-line no-unused-expressions + navigator.sendBeacon(url, body); + // eslint-disable-next-line no-console + console.debug(`ping:${checkpoint}`, pdata); + }; + sampleRUM.cases = sampleRUM.cases || { + cwv: () => sampleRUM.cwv(data) || true, + lazy: () => { + // use classic script to avoid CORS issues + const script = document.createElement('script'); + script.src = 'https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js'; + document.head.appendChild(script); + return true; + }, + }; + sendPing(data); + if (sampleRUM.cases[checkpoint]) { + sampleRUM.cases[checkpoint](); + } + } + if (sampleRUM.always[checkpoint]) { + sampleRUM.always[checkpoint](data); + } + } catch (error) { + // something went wrong + } +} + +/** + * Loads a CSS file. + * @param {string} href URL to the CSS file + */ +export async function loadCSS(href) { + return new Promise((resolve, reject) => { + if (!document.querySelector(`head > link[href="${href}"]`)) { + const link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = href; + link.onload = resolve; + link.onerror = reject; + document.head.append(link); + } else { + resolve(); + } + }); +} + +/** + * Loads a non module JS file. + * @param {string} src URL to the JS file + * @param {Object} attrs additional optional attributes + */ + +export async function loadScript(src, attrs) { + return new Promise((resolve, reject) => { + if (!document.querySelector(`head > script[src="${src}"]`)) { + const script = document.createElement('script'); + script.src = src; + if (attrs) { + // eslint-disable-next-line no-restricted-syntax, guard-for-in + for (const attr in attrs) { + script.setAttribute(attr, attrs[attr]); + } + } + script.onload = resolve; + script.onerror = reject; + document.head.append(script); + } else { + resolve(); + } + }); +} + +/** + * Retrieves the content of metadata tags. + * @param {string} name The metadata name (or property) + * @returns {string} The metadata value(s) + */ +export function getMetadata(name) { + const attr = name && name.includes(':') ? 'property' : 'name'; + const meta = [...document.head.querySelectorAll(`meta[${attr}="${name}"]`)].map((m) => m.content).join(', '); + return meta || ''; +} + +/** + * Sanitizes a string for use as class name. + * @param {string} name The unsanitized string + * @returns {string} The class name + */ +export function toClassName(name) { + return typeof name === 'string' + ? name.toLowerCase().replace(/[^0-9a-z]/gi, '-').replace(/-+/g, '-').replace(/^-|-$/g, '') + : ''; +} + +/** + * Sanitizes a string for use as a js property name. + * @param {string} name The unsanitized string + * @returns {string} The camelCased name + */ +export function toCamelCase(name) { + return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase()); +} + +/** + * Gets all the metadata elements that are in the given scope. + * @param {String} scope The scope/prefix for the metadata + * @returns an array of HTMLElement nodes that match the given scope + */ +export function getAllMetadata(scope) { + return [...document.head.querySelectorAll(`meta[property^="${scope}:"],meta[name^="${scope}-"]`)] + .reduce((res, meta) => { + const id = toClassName(meta.name + ? meta.name.substring(scope.length + 1) + : meta.getAttribute('property').split(':')[1]); + res[id] = meta.getAttribute('content'); + return res; + }, {}); +} + +const ICONS_CACHE = {}; +/** + * Replace icons with inline SVG and prefix with codeBasePath. + * @param {Element} [element] Element containing icons + */ +export async function decorateIcons(element) { + // Prepare the inline sprite + let svgSprite = document.getElementById('franklin-svg-sprite'); + if (!svgSprite) { + const div = document.createElement('div'); + div.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>'; + svgSprite = div.firstElementChild; + document.body.append(div.firstElementChild); + } + + // Download all new icons + const icons = [...element.querySelectorAll('span.icon')]; + await Promise.all(icons.map(async (span) => { + const iconName = Array.from(span.classList).find((c) => c.startsWith('icon-')).substring(5); + if (!ICONS_CACHE[iconName]) { + ICONS_CACHE[iconName] = true; + try { + let iconSource = `${window.hlx.codeBasePath}/icons/${iconName}.svg`; + if (iconName.startsWith('dam-')) { + const isPublicDomain = window.location.hostname.includes('lifesciences.danaher.com'); + iconSource = isPublicDomain ? '' : 'https://lifesciences.danaher.com'; + iconSource += `/content/dam/danaher/system/icons/${iconName.substring(4).replace('_', ' ')}.svg`; + } + const response = await fetch(iconSource); + if (!response.ok) { + ICONS_CACHE[iconName] = false; + return; + } + // Styled icons don't play nice with the sprite approach because of shadow dom isolation + const svg = await response.text(); + if (svg.match(/(<style | class=)/)) { + ICONS_CACHE[iconName] = { styled: true, html: svg }; + } else { + ICONS_CACHE[iconName] = { + html: svg + .replace('<svg', `<symbol id="icons-sprite-${iconName}"`) + .replace(/ width=".*?"/, '') + .replace(/ height=".*?"/, '') + .replace('</svg>', '</symbol>'), + }; + } + } catch (error) { + ICONS_CACHE[iconName] = false; + // eslint-disable-next-line no-console + console.error(error); + } + } + })); + + const symbols = Object + .keys(ICONS_CACHE).filter((k) => !svgSprite.querySelector(`#icons-sprite-${k}`)) + .map((k) => ICONS_CACHE[k]) + .filter((v) => !v.styled) + .map((v) => v.html) + .join('\n'); + svgSprite.innerHTML += symbols; + + icons.forEach((span) => { + const iconName = Array.from(span.classList).find((c) => c.startsWith('icon-')).substring(5); + const parent = span.firstElementChild?.tagName === 'A' ? span.firstElementChild : span; + // Styled icons need to be inlined as-is, while unstyled ones can leverage the sprite + if (ICONS_CACHE[iconName].styled) { + parent.innerHTML = ICONS_CACHE[iconName].html; + } else { + parent.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${iconName}"/></svg>`; + } + }); +} + +/** + * Gets placeholders object. + * @param {string} [prefix] Location of placeholders + * @returns {object} Window placeholders object + */ +export async function fetchPlaceholders(prefix = 'default') { + window.placeholders = window.placeholders || {}; + const loaded = window.placeholders[`${prefix}-loaded`]; + if (!loaded) { + window.placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => { + fetch(`${prefix === 'default' ? '' : prefix}/placeholders.json`) + .then((resp) => { + if (resp.ok) { + return resp.json(); + } + throw new Error(`${resp.status}: ${resp.statusText}`); + }).then((json) => { + const placeholders = {}; + json.data + .filter((placeholder) => placeholder.Key) + .forEach((placeholder) => { + placeholders[toCamelCase(placeholder.Key)] = placeholder.Text; + }); + window.placeholders[prefix] = placeholders; + resolve(); + }).catch((error) => { + // error loading placeholders + window.placeholders[prefix] = {}; + reject(error); + }); + }); + } + await window.placeholders[`${prefix}-loaded`]; + return window.placeholders[prefix]; +} + +/** + * Decorates a block. + * @param {Element} block The block element + */ +export function decorateBlock(block) { + const shortBlockName = block.classList[0]; + if (shortBlockName) { + block.classList.add('block'); + block.dataset.blockName = shortBlockName; + block.dataset.blockStatus = 'initialized'; + const blockWrapper = block.parentElement; + blockWrapper.classList.add(`${shortBlockName}-wrapper`); + const section = block.closest('.section'); + if (section) section.classList.add(`${shortBlockName}-container`); + } +} + +/** + * Extracts the config from a block. + * @param {Element} block The block element + * @returns {object} The block config + */ +export function readBlockConfig(block) { + const config = {}; + block.querySelectorAll(':scope > div').forEach((row) => { + if (row.children) { + const cols = [...row.children]; + if (cols[1]) { + const col = cols[1]; + const name = toClassName(cols[0].textContent); + let value = ''; + if (col.querySelector('a')) { + const as = [...col.querySelectorAll('a')]; + if (as.length === 1) { + value = as[0].href; + } else { + value = as.map((a) => a.href); + } + } else if (col.querySelector('img')) { + const imgs = [...col.querySelectorAll('img')]; + if (imgs.length === 1) { + value = imgs[0].src; + } else { + value = imgs.map((img) => img.src); + } + } else if (col.querySelector('p')) { + const ps = [...col.querySelectorAll('p')]; + if (ps.length === 1) { + value = ps[0].textContent; + } else { + value = ps.map((p) => p.textContent); + } + } else value = row.children[1].textContent; + config[name] = value; + } + } + }); + return config; +} + +/** + * Decorates all sections in a container element. + * @param {Element} main The container element + */ +export function decorateSections(main) { + main.querySelectorAll(':scope > div').forEach((section) => { + const wrappers = []; + let defaultContent = false; + [...section.children].forEach((e) => { + if (e.tagName === 'DIV' || !defaultContent) { + const wrapper = document.createElement('div'); + wrappers.push(wrapper); + defaultContent = e.tagName !== 'DIV'; + if (defaultContent) wrapper.classList.add('default-content-wrapper'); + } + wrappers[wrappers.length - 1].append(e); + }); + wrappers.forEach((wrapper) => section.append(wrapper)); + section.classList.add('section'); + section.dataset.sectionStatus = 'initialized'; + section.style.display = 'none'; + + /* process section metadata */ + const sectionMeta = section.querySelector('div.section-metadata'); + if (sectionMeta) { + const meta = readBlockConfig(sectionMeta); + Object.keys(meta).forEach((key) => { + if (key === 'style') { + const styles = meta.style.split(',').map((style) => toClassName(style.trim())); + styles.forEach((style) => section.classList.add(style)); + } else { + section.dataset[toCamelCase(key)] = meta[key]; + } + }); + sectionMeta.parentNode.remove(); + } + }); +} + +/** + * Updates all section status in a container element. + * @param {Element} main The container element + */ +export function updateSectionsStatus(main) { + const sections = [...main.querySelectorAll(':scope > div.section')]; + for (let i = 0; i < sections.length; i += 1) { + const section = sections[i]; + const status = section.dataset.sectionStatus; + if (status !== 'loaded') { + const loadingBlock = section.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]'); + if (loadingBlock) { + section.dataset.sectionStatus = 'loading'; + break; + } else { + section.dataset.sectionStatus = 'loaded'; + section.style.display = null; + } + } + } +} + +/** + * Decorates all blocks in a container element. + * @param {Element} main The container element + */ +export function decorateBlocks(main) { + main + .querySelectorAll('div.section > div > div') + .forEach(decorateBlock); +} + +/** + * Builds a block DOM Element from a two dimensional array, string, or object + * @param {string} blockName name of the block + * @param {*} content two dimensional array or string or object of content + */ +export function buildBlock(blockName, content) { + const table = Array.isArray(content) ? content : [[content]]; + const blockEl = document.createElement('div'); + // build image block nested div structure + blockEl.classList.add(blockName); + table.forEach((row) => { + const rowEl = document.createElement('div'); + row.forEach((col) => { + const colEl = document.createElement('div'); + const vals = col.elems ? col.elems : [col]; + vals.forEach((val) => { + if (val) { + if (typeof val === 'string') { + colEl.innerHTML += val; + } else { + colEl.appendChild(val); + } + } + }); + rowEl.appendChild(colEl); + }); + blockEl.appendChild(rowEl); + }); + return (blockEl); +} + +/** + * Loads JS and CSS for a module and executes it's default export. + * @param {string} name The module name + * @param {string} jsPath The JS file to load + * @param {string} [cssPath] An optional CSS file to load + * @param {object[]} [args] Parameters to be passed to the default export when it is called + */ +async function loadModule(name, jsPath, cssPath, ...args) { + const cssLoaded = cssPath ? loadCSS(cssPath) : Promise.resolve(); + const decorationComplete = jsPath + ? new Promise((resolve) => { + (async () => { + let mod; + try { + mod = await import(jsPath); + if (mod.default) { + await mod.default.apply(null, args); + } + } catch (error) { + // eslint-disable-next-line no-console + console.log(`failed to load module for ${name}`, error); + } + resolve(mod); + })(); + }) + : Promise.resolve(); + return Promise.all([cssLoaded, decorationComplete]) + .then(([, api]) => api); +} + +/** + * Gets the configuration for the given block, and also passes + * the config through all custom patching helpers added to the project. + * + * @param {Element} block The block element + * @returns {Object} The block config (blockName, cssPath and jsPath) + */ +function getBlockConfig(block) { + const { blockName } = block.dataset; + const jsPath = blockName ? `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js` : ''; + const cssPath = blockName ? `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css` : ''; + const original = { blockName, jsPath }; + return (window.hlx.patchBlockConfig || []) + .filter((fn) => typeof fn === 'function') + .reduce((config, fn) => fn(config, original), { blockName, jsPath, cssPath }); +} + +const cssExpectionalBlocks = []; + +/** + * Loads JS and CSS for a block. + * @param {Element} block The block element + */ +export async function loadBlock(block) { + const status = block.dataset.blockStatus; + if (status !== 'loading' && status !== 'loaded') { + block.dataset.blockStatus = 'loading'; + const { blockName, jsPath, cssPath } = getBlockConfig(block); + try { + if (cssExpectionalBlocks.includes(blockName)) { + await loadModule(blockName, jsPath, undefined, block); + } else { await loadModule(blockName, jsPath, cssPath, block); } + } catch (error) { + // eslint-disable-next-line no-console + console.log(`failed to load block ${blockName}`, error); + } + block.dataset.blockStatus = 'loaded'; + } +} + +/** + * Loads JS and CSS for all blocks in a container element. + * @param {Element} main The container element + */ +export async function loadBlocks(main) { + updateSectionsStatus(main); + const blocks = [...main.querySelectorAll('div.block')]; + for (let i = 0; i < blocks.length; i += 1) { + // eslint-disable-next-line no-await-in-loop + await loadBlock(blocks[i]); + updateSectionsStatus(main); + } +} + +/** + * Returns a picture element with webp and fallbacks + * @param {string} src The image URL + * @param {string} [alt] The image alternative text + * @param {boolean} [eager] Set loading attribute to eager + * @param {Array} [breakpoints] Breakpoints and corresponding params (eg. width) + * @returns {Element} The picture element + */ +export function createOptimizedPicture(src, alt = '', eager = false, breakpoints = [{ media: '(min-width: 600px)', width: '2000' }, { width: '750' }]) { + const url = new URL(src, window.location.href); + const picture = document.createElement('picture'); + const { pathname } = url; + const ext = pathname.substring(pathname.lastIndexOf('.') + 1); + + // webp + breakpoints.forEach((br) => { + const source = document.createElement('source'); + if (br.media) source.setAttribute('media', br.media); + source.setAttribute('type', 'image/webp'); + source.setAttribute('srcset', `${pathname}?width=${br.width}&format=webply&optimize=medium`); + picture.appendChild(source); + }); + + // fallback + breakpoints.forEach((br, i) => { + if (i < breakpoints.length - 1) { + const source = document.createElement('source'); + if (br.media) source.setAttribute('media', br.media); + source.setAttribute('srcset', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`); + picture.appendChild(source); + } else { + const img = document.createElement('img'); + img.setAttribute('loading', eager ? 'eager' : 'lazy'); + img.setAttribute('alt', alt); + picture.appendChild(img); + img.setAttribute('src', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`); + } + }); + + return picture; +} + +/** + * Normalizes all headings within a container element. + * @param {Element} el The container element + * @param {string} allowedHeadings The list of allowed headings (h1 ... h6) + */ +export function normalizeHeadings(el, allowedHeadings) { + const allowed = allowedHeadings.map((h) => h.toLowerCase()); + el.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((tag) => { + const h = tag.tagName.toLowerCase(); + if (allowed.indexOf(h) === -1) { + // current heading is not in the allowed list -> try first to "promote" the heading + let level = parseInt(h.charAt(1), 10) - 1; + while (allowed.indexOf(`h${level}`) === -1 && level > 0) { + level -= 1; + } + if (level === 0) { + // did not find a match -> try to "downgrade" the heading + while (allowed.indexOf(`h${level}`) === -1 && level < 7) { + level += 1; + } + } + if (level !== 7) { + tag.outerHTML = `<h${level} id="${tag.id}">${tag.textContent}</h${level}>`; + } + } + }); +} + +/** + * Set template (page structure) and theme (page styles). + */ +export function decorateTemplateAndTheme() { + const addClasses = (element, classes) => { + classes.split(',').forEach((c) => { + element.classList.add(toClassName(c.trim())); + }); + }; + const template = getMetadata('template'); + if (template) addClasses(document.body, template); + const theme = getMetadata('theme'); + if (theme) addClasses(document.body, theme); +} + +/** + * Decorates paragraphs containing a single link as buttons. + * @param {Element} element container element + */ +export function decorateButtons(element) { + element.querySelectorAll('a').forEach((a) => { + a.title = a.title || a.textContent; + if (a.href !== a.textContent && a.title !== 'link') { + const up = a.parentElement; + const twoup = a.parentElement.parentElement; + if (!a.querySelector('img') && twoup.tagName !== 'LI' && !a.closest('.call-to-action') + && !a.closest('.mini-teasers') && !a.closest('.bg-color-right')) { + if (up.childNodes.length === 1 && (up.tagName === 'P' || up.tagName === 'DIV')) { + a.className = 'btn btn-outline-primary'; // default + up.classList.add('button-container'); + } + if (up.childNodes.length === 1 && up.tagName === 'STRONG' + && twoup.childNodes.length === 1 && twoup.tagName === 'P') { + a.className = 'btn btn-outline-primary'; + twoup.classList.add('button-container'); + } + if (up.childNodes.length === 1 && up.tagName === 'EM' + && twoup.childNodes.length === 1 && twoup.tagName === 'P') { + a.className = 'btn btn-outline-secondary'; + twoup.classList.add('button-container'); + } + } + } + }); +} + +/** + * Load LCP block and/or wait for LCP in default content. + */ +export async function waitForLCP(lcpBlocks) { + const block = document.querySelector('.block'); + const hasLCPBlock = (block && lcpBlocks.includes(block.dataset.blockName)); + if (hasLCPBlock) await loadBlock(block); + + document.body.style.display = null; + const lcpCandidate = document.querySelector('main img'); + await new Promise((resolve) => { + if (lcpCandidate && !lcpCandidate.complete) { + lcpCandidate.setAttribute('loading', 'eager'); + lcpCandidate.addEventListener('load', resolve); + lcpCandidate.addEventListener('error', resolve); + } else { + resolve(); + } + }); +} + +/** + * Loads a block named 'header' into header + * @param {Element} header header element + * @returns {Promise} + */ +export function loadHeader(header) { + const headerBlock = buildBlock('header', ''); + header.append(headerBlock); + decorateBlock(headerBlock); + return loadBlock(headerBlock); +} + +/** + * Loads a block named 'footer' into footer + * @param footer footer element + * @returns {Promise} + */ +export function loadFooter(footer) { + const footerBlock = buildBlock('footer', ''); + footer.append(footerBlock); + decorateBlock(footerBlock); + return loadBlock(footerBlock); +} + +function parsePluginParams(id, config) { + const pluginId = !config + ? id.split('/').splice(id.endsWith('/') ? -2 : -1, 1)[0].replace(/\.js/, '') + : id; + const pluginConfig = { + load: 'eager', + ...(typeof config === 'string' || !config + ? { url: (config || id).replace(/\/$/, '') } + : config), + }; + pluginConfig.options ||= {}; + return { id: pluginId, config: pluginConfig }; +} + +// Define an execution context for plugins +export const executionContext = { + createOptimizedPicture, + getAllMetadata, + getMetadata, + decorateBlock, + decorateButtons, + decorateIcons, + loadBlock, + loadCSS, + loadScript, + sampleRUM, + toCamelCase, + toClassName, +}; + +class PluginsRegistry { + #plugins; + + constructor() { + this.#plugins = new Map(); + } + + // Register a new plugin + add(id, config) { + const { id: pluginId, config: pluginConfig } = parsePluginParams(id, config); + this.#plugins.set(pluginId, pluginConfig); + } + + // Get the plugin + get(id) { return this.#plugins.get(id); } + + // Check if the plugin exists + includes(id) { return !!this.#plugins.has(id); } + + // Load all plugins that are referenced by URL, and updated their configuration with the + // actual API they expose + async load(phase) { + [...this.#plugins.entries()] + .filter(([, plugin]) => plugin.condition + && !plugin.condition(document, plugin.options, executionContext)) + .map(([id]) => this.#plugins.delete(id)); + return Promise.all([...this.#plugins.entries()] + // Filter plugins that don't match the execution conditions + .filter(([, plugin]) => ( + (!plugin.condition || plugin.condition(document, plugin.options, executionContext)) + && phase === plugin.load && plugin.url + )) + .map(async ([key, plugin]) => { + try { + // If the plugin has a default export, it will be executed immediately + const pluginApi = (await loadModule( + key, + !plugin.url.endsWith('.js') ? `${plugin.url}/${key}.js` : plugin.url, + !plugin.url.endsWith('.js') ? `${plugin.url}/${key}.css` : null, + document, + plugin.options, + executionContext, + )) || {}; + this.#plugins.set(key, { ...plugin, ...pluginApi }); + } catch (err) { + // eslint-disable-next-line no-console + console.error('Could not load specified plugin', key); + } + })); + } + + // Run a specific phase in the plugin + async run(phase) { + return [...this.#plugins.values()] + .reduce((promise, plugin) => ( // Using reduce to execute plugins sequencially + plugin[phase] && (!plugin.condition + || plugin.condition(document, plugin.options, executionContext)) + ? promise.then(() => plugin[phase](document, plugin.options, executionContext)) + : promise + ), Promise.resolve()); + } +} + +class TemplatesRegistry { + // Register a new template + // eslint-disable-next-line class-methods-use-this + add(id, url) { + if (Array.isArray(id)) { + id.forEach((i) => window.hlx.templates.add(i)); + return; + } + const { id: templateId, config: templateConfig } = parsePluginParams(id, url); + templateConfig.condition = () => toClassName(getMetadata('template')) === templateId; + window.hlx.plugins.add(templateId, templateConfig); + } + + // Get the template + // eslint-disable-next-line class-methods-use-this + get(id) { return window.hlx.plugins.get(id); } + + // Check if the template exists + // eslint-disable-next-line class-methods-use-this + includes(id) { return window.hlx.plugins.includes(id); } +} + +/** + * Setup block utils. + */ +export function setup() { + window.hlx = window.hlx || {}; + window.hlx.RUM_MASK_URL = 'full'; + window.hlx.codeBasePath = ''; + window.hlx.lighthouse = new URLSearchParams(window.location.search).get('lighthouse') === 'on'; + window.hlx.patchBlockConfig = []; + window.hlx.plugins = new PluginsRegistry(); + window.hlx.templates = new TemplatesRegistry(); + + const scriptEl = document.querySelector('script[src$="/scripts/scripts.js"]'); + if (scriptEl) { + try { + [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js'); + } catch (error) { + // eslint-disable-next-line no-console + console.log(error); + } + } +} + +/** + * Auto initializiation. + */ +function init() { + setup(); + sampleRUM('top'); + + window.addEventListener('load', () => sampleRUM('load')); + + window.addEventListener('unhandledrejection', (event) => { + sampleRUM('error', { source: event.reason.sourceURL, target: event.reason.line }); + }); + + window.addEventListener('error', (event) => { + sampleRUM('error', { source: event.filename, target: event.lineno }); + }); +} + +init(); diff --git a/scripts/scripts-dev.js b/scripts/scripts-dev.js deleted file mode 100644 index cad5dfb5d..000000000 --- a/scripts/scripts-dev.js +++ /dev/null @@ -1,997 +0,0 @@ -import { - sampleRUM, - loadHeader, - loadFooter, - decorateButtons, - decorateIcons, - decorateSections, - decorateBlocks, - decorateTemplateAndTheme, - waitForLCP, - loadBlocks, - loadCSS, - toClassName, - getMetadata, - createOptimizedPicture, - loadBlock, - decorateBlock, -} from './lib-franklin.js'; - -import { - div, - domEl, - img, -} from './dom-builder.js'; - -const LCP_BLOCKS = ['breadcrumb', 'product-hero', 'carousel']; // add your LCP blocks to the list -const TEMPLATE_LIST = { - blog: 'blog', - news: 'blog', - productdetail: 'productDetail', - processstep: 'processstep', - topic: 'topic', - library: 'library', - info: 'library', -}; - -/** - * Get the Image URL from Scene7 and Optimize the picture - * @param {string} imageUrl - * @param {string} imageAlt - * @param {boolean} eager - * @returns Optimized image - */ -export function imageHelper(imageUrl, imageAlt, eager = false) { - if (imageUrl.indexOf('.scene7.com') > -1) { - return img({ - src: `${imageUrl}`, - alt: imageAlt, - loading: eager ? 'eager' : 'lazy', - class: 'mb-2 h-48 w-full object-cover', - }); - } - const cardImage = createOptimizedPicture(imageUrl, imageAlt, eager, [{ width: '500' }]); - cardImage.querySelector('img').className = 'mb-2 h-48 w-full object-cover'; - return cardImage; -} - -export function createOptimizedS7Picture(src, alt = '', eager = false) { - if (src.startsWith('/is/image') || src.indexOf('.scene7.com') > -1) { - const picture = document.createElement('picture'); - picture.appendChild(img({ src: `${src}?$danaher-mobile$`, alt, loading: eager ? 'eager' : 'lazy' })); - return picture; - } - return img({ - src, - alt, - loading: eager ? 'eager' : 'lazy', - }); -} - -/** - * Format date expressed in UTC seconds - * @param {number} date - * @returns new string with the formatted date - */ -export function formatDateUTCSeconds(date, options = {}) { - const dateObj = new Date(0); - dateObj.setUTCSeconds(date); - - return dateObj.toLocaleDateString('en-US', { - month: 'short', - day: '2-digit', - year: 'numeric', - ...options, - }); -} - -/** - * It will used generate random number to use in ID - * @returns 4 digit random numbers - */ -export function generateUUID() { - return Math.floor(1000 + Math.random() * 9000); -} - -let originalOffset = 0; - -export function scrollJumpMenuFixed(pageJumpMenuContainer) { - if (!originalOffset) { - const rectPageTabs = pageJumpMenuContainer.getBoundingClientRect(); - originalOffset = rectPageTabs.top; - } - if (window.scrollY > originalOffset) { - pageJumpMenuContainer.classList.add(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); - document.querySelector('.page-jump-menu-container.fixed ul')?.classList.add('shadow-none', 'rounded-none'); - document.querySelectorAll('.page-jump-menu-container.fixed ul li')?.forEach((el) => { - el?.firstElementChild?.classList.add('rounded-full'); - el?.firstElementChild?.querySelector('span.icon svg use')?.classList.add('stroke-danaherpurple-500'); - }); - document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add('stroke-white'); - pageJumpMenuContainer.classList.remove(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); - } else { - pageJumpMenuContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); - document.querySelectorAll('.page-jump-menu-container ul li')?.forEach((el) => el?.firstElementChild?.classList.remove('rounded-full')); - pageJumpMenuContainer.classList.add(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); - } -} - -let pageTabsOriginalOffset = 0; -export function scrollPageTabFixed(pageTabsContainer) { - if (!pageTabsOriginalOffset) { - const rectPageTabs = pageTabsContainer.getBoundingClientRect(); - pageTabsOriginalOffset = rectPageTabs.top; - } - if (window.scrollY > pageTabsOriginalOffset) { - pageTabsContainer.classList.add(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); - pageTabsContainer.classList.remove(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); - } else { - pageTabsContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); - pageTabsContainer.classList.add(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); - } -} -/** - * Returns the valid public url with or without .html extension - * @param {string} url - * @returns new string with the formatted url - */ -export function makePublicUrl(url) { - const isProd = window.location.hostname.includes('lifesciences.danaher.com'); - try { - const newURL = new URL(url, window.location.origin); - if (isProd) { - if (newURL.pathname.endsWith('.html')) { - return newURL.pathname; - } - newURL.pathname += '.html'; - return newURL.pathname; - } - if (newURL.pathname.endsWith('.html')) { - newURL.pathname = newURL.pathname.slice(0, -5); - return newURL.pathname; - } - return newURL.pathname; - } catch (error) { - // eslint-disable-next-line no-console - console.error('Invalid URL:', error); - return url; - } -} - -/** - * Set the JSON-LD script in the head - * @param {*} data - * @param {string} name - */ -export function setJsonLd(data, name) { - const existingScript = document.head.querySelector(`script[data-name="${name}"]`); - if (existingScript) { - existingScript.innerHTML = JSON.stringify(data); - return; - } - - const script = document.createElement('script'); - script.type = 'application/ld+json'; - - script.innerHTML = JSON.stringify(data); - script.dataset.name = name; - document.head.appendChild(script); -} - -// Set the favicon -function setFavicon() { - const faviconLink = document.querySelector("link[rel*='icon']") || document.createElement('link'); - faviconLink.type = 'image/x-icon'; - faviconLink.rel = 'shortcut icon'; - faviconLink.href = `https://${window.location.hostname}/favicon.ico`; - document.getElementsByTagName('head')[0].appendChild(faviconLink); -} - -/** - * Fetches an HTML fragment from the given URL - * @param {string} url - * @returns the HTML text of the fragment - */ -export async function getFragmentFromFile(url) { - const response = await fetch(url); - if (!response.ok) { - // eslint-disable-next-line no-console - console.error('error loading fragment details', response); - return null; - } - const text = await response.text(); - if (!text) { - // eslint-disable-next-line no-console - console.error('fragment details empty', url); - return null; - } - return text; -} - -/** - * Get a cookie - * @param cname the name of the cookie - */ -export function getCookie(cname) { - let value = decodeURIComponent( - // eslint-disable-next-line prefer-template - document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s*' + encodeURIComponent(cname).replace(/[\\-\\.\\+\\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1'), - ) || null; - if (value && ((value.substring(0, 1) === '{' && value.substring(value.length - 1, value.length) === '}') || (value.substring(0, 1) === '[' && value.substring(value.length - 1, value.length) === ']'))) { - try { - value = JSON.parse(value); - } catch (e) { - return value; - } - } - return value; -} - -/** - * Find whether OT enabled - * @returns boolean - */ -export function isOTEnabled() { - const otCookie = getCookie('OptanonConsent'); - if (typeof otCookie === 'string') { - return otCookie.includes('C0002:1'); - } - return true; -} - -/** -* Set the content of a cookie -* @param {string} cname The cookie name (or property) -* @param {string} cvalue The cookie value -* @param {number} expTime The cookie expiry time (default 30 days) -* @param {string} path The cookie path (optional) -* -*/ -export function setCookie(cname, cvalue, expTime = 30 * 1000 * 60 * 60 * 24, path = '/') { - const today = new Date(); - today.setTime(today.getTime() + (expTime)); - const expires = 'expires='.concat(today.toGMTString()); - const cookieString = cname.concat('=') - .concat(cvalue) - .concat(';') - .concat(expires) - .concat(';path=') - .concat(path); - document.cookie = cookieString; // cname + '=' + cvalue + ';' + expires + ';path=' + path; -} - -/** - * Builds embeds for video links - * @param {Element} main The container element - */ -async function buildVideo(main) { - const videoLinks = main.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"],a[href*="vidyard.com"]'); - if (videoLinks.length > 0) { - const { default: decorateEmbed } = await import('../blocks/embed/embed.js'); - videoLinks.forEach((link) => { - if (link.closest('.embed, .hero') == null) { - decorateEmbed(link.parentNode); - } - }); - } -} - -/** - * load fonts.css and set a session storage flag - */ -async function loadFonts() { - await loadCSS(`${window.hlx.codeBasePath}/styles/fonts.css`); - try { - if (!window.location.hostname.includes('localhost')) sessionStorage.setItem('fonts-loaded', 'true'); - } catch (e) { - // do nothing - } -} - -/** - * Builds all synthetic blocks in a container element. - * @param {Element} main The container element - */ -function buildAutoBlocks(main) { - try { - buildVideo(main); - } catch (error) { - // eslint-disable-next-line no-console - console.error('Auto Blocking failed', error); - } -} - -export function decorateModals(main) { - const ctaModalButton = main.querySelector('.show-modal-btn'); - const content = () => (ctaModalButton.getAttribute('data-dialog-message') ? ctaModalButton.getAttribute('dialog-message') : ''); - // Listens to the custom modal button - ctaModalButton?.addEventListener('click', async (e) => { - e.preventDefault(); - // eslint-disable-next-line import/no-cycle - const { default: getModal } = await import('./modal.js'); - const customModal = await getModal('custom-modal', content, (modal) => { - modal.querySelector('p[name="close"]')?.addEventListener('click', () => modal.close()); - }); - customModal.showModal(); - }); -} - -/** - * Decorates the section with 2 columns style. - * @param {Element} main The main element - */ -function decorateTwoColumnSection(main) { - main.querySelectorAll('.section.container-two-col').forEach((section) => { - const defaultContentWrappers = section.querySelectorAll(':scope > .default-content-wrapper'); - defaultContentWrappers.forEach((contentWrapper) => { - [...contentWrapper.children].forEach((child) => { - section.appendChild(child); - }); - let nextElement = contentWrapper.nextSibling; - const allBlocks = []; - while (nextElement) { - if (nextElement.className.includes('-wrapper')) allBlocks.push(nextElement); - nextElement = nextElement.nextSibling; - } - section.append(...allBlocks); - section.removeChild(contentWrapper); - }); - - const newSection = div(); - let currentDiv = null; - [...section.children].forEach((child) => { - if (child.tagName === 'H1') { - newSection.appendChild( - div({ class: 'col-left lg:w-1/3 xl:w-1/4 pt-4' }), - ); - currentDiv = div({ class: 'col-right w-full mt-0 md:mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-0 md:pb-10' }); - } - const childClone = child.cloneNode(true); - if (childClone.tagName === 'H2' && childClone.querySelector(':scope > strong')) { - if (currentDiv?.classList.contains('col-right')) { - newSection.appendChild(currentDiv); - } - childClone.className = 'text-gray-900 !text-base leading-6 font-bold pt-6 pb-4 my-0'; - newSection.appendChild( - div( - { class: 'col-left lg:w-1/3 xl:w-1/4 pt-4' }, - childClone, - domEl('hr', { - style: 'height: 10px; width: 54px; border-width: 0px; color: rgb(216, 244, 250); background-color: rgb(216, 244, 250);', - }), - ), - ); - currentDiv = div({ class: 'col-right w-full mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-10' }); - } else if (currentDiv?.classList.contains('col-right')) { - currentDiv.appendChild(childClone); - } - }); - if (currentDiv) { - newSection.appendChild(currentDiv); - } - newSection.classList.add('w-full', 'flex', 'flex-wrap', 'break-normal'); - section.innerHTML = newSection.outerHTML; - section.classList.add('mx-auto', 'w-full', 'flex', 'flex-wrap', 'mb-5'); - }); -} - -/** - * Sets external target and rel for links in a main element. - * @param {Element} main The main element - */ -function updateExternalLinks(main) { - const REFERERS = [ - window.location.origin, - ]; - main.querySelectorAll('a[href]').forEach((a) => { - try { - const { origin, pathname, hash } = new URL(a.href, window.location.href); - const targetHash = hash && hash.startsWith('#_'); - const isPDF = pathname.split('.').pop() === 'pdf'; - if ((origin && origin !== window.location.origin && !targetHash) || isPDF) { - a.setAttribute('target', '_blank'); - if (!REFERERS.includes(origin)) a.setAttribute('rel', 'noopener'); - } else if (targetHash) { - a.setAttribute('target', hash.replace('#', '')); - a.href = a.href.replace(hash, ''); - } - } catch (e) { - // eslint-disable-next-line no-console - console.warn(`Invalid link in ${main}: ${a.href}`); - } - }); -} - -/** - * Lazy loads all the blocks in the tabs, except for the visible/active one - * @param {[Element]} sections All sections which belong to the Page Nav - * @param {string} nameOfFirstSection Exact name of the first section, in case there is no hash - */ -function lazyLoadHiddenPageNavTabs(sections, nameOfFirstSection) { - const activeHash = window.location.hash; - const active = activeHash - ? activeHash.substring(1, activeHash.length).toLowerCase() - : nameOfFirstSection; - - sections.forEach((section) => { - const hasBreadCrumb = section.className.includes('breadcrumb-container'); - if (!hasBreadCrumb && section.getAttribute('aria-labelledby') !== active) { - /* - It marks all the blocks inside the hidden sections as loaded, - so Franklin lib will skip them. - This means that the decorate functions of these blocks will not be executed - and the CSS will not be downloaded - */ - section.querySelectorAll('.block').forEach((block) => { - // make the Franklin rendering skip this block - block.setAttribute('data-block-status', 'loaded'); - // mark them as lazy load, so we can identify them later - block.setAttribute('data-block-lazy-load', true); - // hide them, to avoid CLS during lazy load - block.parentElement.style.display = 'none'; - }); - - const loadLazyBlocks = (lazySection) => { - lazySection.querySelectorAll('.block[data-block-lazy-load]').forEach(async (block) => { - block.removeAttribute('data-block-lazy-load'); - // Mark them back in the initialised status - block.setAttribute('data-block-status', 'initialized'); - // Manually load each block: Download CSS, JS, execute the decorate - await loadBlock(block); - // Show the block only when everything is ready to avoid CLS - block.parentElement.style.display = ''; - }); - - // force the loaded status of the section - section.setAttribute('data-section-status', 'loaded'); - }; - - // In case the user clicks on the section, quickly render it on the spot, - // if it happens before the timeout below - const observer = new IntersectionObserver((entries) => { - if (entries.some((e) => e.isIntersecting)) { - observer.disconnect(); - loadLazyBlocks(section); - } - }); - observer.observe(section); - - // Render the section with a delay - setTimeout(() => { - observer.disconnect(); - loadLazyBlocks(section); - }, 5000); - } - }); -} - -/** - * Builds all synthetic blocks in a container element. - * Run named sections for in page navigation. - * Decorate named sections for in page navigation. - * @param {Element} main The container element - */ -function decoratePageNav(main) { - const pageTabsBlock = main.querySelector('.page-tabs'); - if (!pageTabsBlock) return; - - const pageTabSection = pageTabsBlock.closest('div.section'); - let sections = [...main.querySelectorAll('div.section')]; - sections = sections.slice(sections.indexOf(pageTabSection) + 1); - - const namedSections = sections.filter((section) => section.hasAttribute('data-tabname')); - let index = 0; - sections.forEach((section) => { - if (index < namedSections.length) { - section.classList.add('page-tab'); - const tabName = namedSections[index].getAttribute('data-tabname'); - const tabId = tabName?.toLowerCase().replace(/\s+/g, '-'); - section.setAttribute('aria-labelledby', tabId); - if (section.hasAttribute('data-tabname')) { - index += 1; - } - } - }); - - lazyLoadHiddenPageNavTabs(sections, namedSections[0].getAttribute('aria-labelledby')); -} - -/** - * Decorates the main element. - * @param {Element} main The main element - */ -// eslint-disable-next-line import/prefer-default-export -export function decorateMain(main) { - // hopefully forward compatible button decoration - decorateButtons(main); - decorateIcons(main); - buildAutoBlocks(main); - decorateSections(main); - decorateBlocks(main); - loadHeader(document.querySelector('header')); - decoratePageNav(main); - decorateTwoColumnSection(main); - updateExternalLinks(main); -} - -/** - * Run template specific decoration code. - * @param {Element} main The container element - */ -async function decorateTemplates(main) { - try { - const template = toClassName(getMetadata('template')); - const templates = Object.keys(TEMPLATE_LIST); - if (templates.includes(template)) { - const templateName = TEMPLATE_LIST[template]; - const mod = await import(`../templates/${templateName}/${templateName}.js`); - if (mod.default) { - await mod.default(main); - } - document.body.classList.add(templateName); - } - } catch (error) { - // eslint-disable-next-line no-console - console.error('Auto Blocking failed', error); - } -} - -/** - * Decorate blocks in an embed fragment. - */ -function decorateEmbeddedBlocks(container) { - container - .querySelectorAll('div.section > div') - .forEach(decorateBlock); -} - -export async function processEmbedFragment(element) { - const block = div({ class: 'embed-fragment' }); - [...element.classList].forEach((className) => { block.classList.add(className); }); - const link = element.textContent; - if (link) { - const fragment = await getFragmentFromFile(`${link}.plain.html`); - if (fragment) { - block.innerHTML = fragment; - const sections = block.querySelectorAll('.embed-fragment > div'); - [...sections].forEach((section) => { - section.classList.add('section'); - }); - decorateEmbeddedBlocks(block); - decorateSections(block); - loadBlocks(block); - } else { - const elementInner = element.innerHTML; - block.append(div({ class: 'section' })); - block.querySelector('.section').innerHTML = elementInner; - } - } - decorateButtons(block); - decorateIcons(block); - - return block; -} - -/** - * Loads the page parameters for Adobe Target. - * @returns {Object} The target parameters object. - */ -function loadATPageParams() { - const id = window.location.pathname.replaceAll('/', '_').replace(/\.html$/, '').substring(1); - const skuId = getMetadata('sku'); - const categoryId = getMetadata('fullcategory').split('|').pop(); - const thumbnailURL = getMetadata('og:image'); - const title = getMetadata('og:title'); - const name = title.indexOf('| Danaher Life Sciences') > -1 ? title.split('| Danaher Life Sciences')[0] : title; - const message = getMetadata('og:description'); - const pageUrl = getMetadata('og:url'); - const brand = getMetadata('brand'); - const page = window.location.pathname.split('/')[3]; - const tags = getMetadata('article:tag'); - const articleAuthor = getMetadata('authorname'); - const articlePostDate = getMetadata('publishdate'); - const articleReadTime = getMetadata('readingtime'); - - const targetParams = { - id, - skuId, - categoryId, - thumbnailURL, - name, - message, - pageUrl, - brand, - page, - tags, - articleAuthor, - articlePostDate, - articleReadTime, - }; - - return targetParams; -} - -/** - * at.js implementation - */ - -function initATJS(path, config) { - window.targetGlobalSettings = config; - window.atPageParams = loadATPageParams(); - window.targetPageParams = function getTargetPageParams() { - return { - at_property: '6aeb619e-92d9-f4cf-f209-6d88ff58af6a', - 'entity.id': window.atPageParams?.id, - 'entity.skuId': window.atPageParams?.skuId, - 'entity.categoryId': window.atPageParams?.categoryId, - 'entity.thumbnailURL': window.atPageParams?.thumbnailURL, - 'entity.name': window.atPageParams?.name, - 'entity.message': window.atPageParams?.message, - 'entity.pageUrl': window.atPageParams?.pageUrl, - 'entity.brand': window.atPageParams?.brand, - 'entity.page': window.atPageParams?.page, - 'entity.tags': window.atPageParams?.tags, - 'entity.articleAuthor': window.atPageParams?.articleAuthor, - 'entity.articlePostDate': window.atPageParams?.articlePostDate, - 'entity.articleReadTime': window.atPageParams?.articleReadTime, - danaherCompany: localStorage.getItem('danaher_company') ? localStorage.getItem('danaher_company') : '', - utmCampaign: localStorage.getItem('danaher_utm_campaign') ? localStorage.getItem('danaher_utm_campaign') : '', - utmSource: localStorage.getItem('danaher_utm_source') ? localStorage.getItem('danaher_utm_source') : '', - utmMedium: localStorage.getItem('danaher_utm_medium') ? localStorage.getItem('danaher_utm_medium') : '', - utmContent: localStorage.getItem('danaher_utm_content') ? localStorage.getItem('danaher_utm_content') : '', - }; - }; - return new Promise((resolve) => { - import(path).then(resolve); - }); -} - -function onDecoratedElement(fn) { - // Apply propositions to all already decorated blocks/sections - if (document.querySelector('[data-block-status="loaded"],[data-section-status="loaded"]')) { - fn(); - } - - const observer = new MutationObserver((mutations) => { - if (mutations.some((m) => m.target.tagName === 'BODY' - || m.target.dataset.sectionStatus === 'loaded' - || m.target.dataset.blockStatus === 'loaded')) { - fn(); - } - }); - // Watch sections and blocks being decorated async - observer.observe(document.querySelector('main'), { - subtree: true, - attributes: true, - attributeFilter: ['data-block-status', 'data-section-status'], - }); - // Watch anything else added to the body - observer.observe(document.querySelector('body'), { childList: true }); -} - -function toCssSelector(selector) { - return selector.replace(/(\.\S+)?:eq\((\d+)\)/g, (_, clss, i) => `:nth-child(${Number(i) + 1}${clss ? ` of ${clss})` : ''}`); -} - -async function getElementForOffer(offer) { - const selector = offer.cssSelector || toCssSelector(offer.selector); - return document.querySelector(selector); -} - -async function getElementForMetric(metric) { - const selector = toCssSelector(metric.selector); - return document.querySelector(selector); -} - -async function getAndApplyOffers() { - const response = await window.adobe.target.getOffers({ request: { execute: { pageLoad: {} } } }); - const { options = [], metrics = [] } = response.execute.pageLoad; - onDecoratedElement(() => { - window.adobe.target.applyOffers({ response }); - // keeping track of offers that were already applied - // eslint-disable-next-line no-return-assign - options.forEach((o) => o.content = o.content.filter((c) => !getElementForOffer(c))); - // keeping track of metrics that were already applied - metrics.map((m, i) => (getElementForMetric(m) ? i : -1)) - .filter((i) => i >= 0) - .reverse() - .map((i) => metrics.splice(i, 1)); - }); -} - -let atjsPromise = Promise.resolve(); -const urlTarget = window.location.pathname; -const regex = /^\/(us\/en\/products\.html)?$/; // matches only the homepage and /us/en/products.html -if (!regex.test(urlTarget)) { - atjsPromise = initATJS('./at.js', { - clientCode: 'danaher', - serverDomain: 'danaher.tt.omtrdc.net', - imsOrgId: '08333E7B636A2D4D0A495C34@AdobeOrg', - bodyHidingEnabled: false, - cookieDomain: window.location.hostname, - pageLoadEnabled: false, - secureOnly: true, - viewsEnabled: false, - withWebGLRenderer: false, - }).catch((e) => { - // eslint-disable-next-line no-console - console.error('Error loading at.js', e); - }); - document.addEventListener('at-library-loaded', () => getAndApplyOffers()); -} - -/** - * Loads everything needed to get to LCP. - * @param {Element} doc The container element - */ -async function loadEager(doc) { - document.documentElement.lang = 'en'; - decorateTemplateAndTheme(); - - await window.hlx.plugins.run('loadEager'); - - const main = doc.querySelector('main'); - if (main) { - await decorateTemplates(main); - decorateMain(main); - - await atjsPromise; - - await new Promise((resolve) => { - window.requestAnimationFrame(async () => { - document.body.classList.add('appear'); - await waitForLCP(LCP_BLOCKS); - resolve(); - }); - }); - } - - try { - /* if desktop (proxy for fast connection) or fonts already loaded, load fonts.css */ - if (window.innerWidth >= 900 || sessionStorage.getItem('fonts-loaded')) { - loadFonts(); - } - } catch (e) { - // do nothing - } -} - -// UTM Paramaters check - start -function getParameterByName(parameter, url = window.location.href) { - /* eslint-disable no-eval */ - const modifiedParameter = parameter.replace(/[[\]]/g, '$&'); - const paramRegex = new RegExp(`[?&]${modifiedParameter}(=([^&#]*)|&|#|$)`); - const results = paramRegex.exec(url); - if (!results) return null; - if (!results[2]) return ''; - return decodeURIComponent(results[2].replace(/\+/g, ' ')); -} - -function loadUTMprams() { - /* eslint-disable no-eval */ - const utmParameters = [ - 'utm_campaign', - 'utm_source', - 'utm_medium', - 'utm_content', - 'utm_term', - 'utm_previouspage', - ]; - - utmParameters.forEach((param) => { - const value = getParameterByName(param); - if (value !== null) { - window.localStorage.setItem(`danaher_${param}`, value); - } - }); -} -// UTM Paramaters check - end - -/** - * Loads everything that doesn't need to be delayed. - * @param {Element} doc The container element - */ -async function loadLazy(doc) { - const main = doc.querySelector('main'); - await loadBlocks(main); - - const { hash } = window.location; - const element = hash ? doc.getElementById(hash.substring(1)) : false; - if (hash && element) element.scrollIntoView(); - - // loadHeader(doc.querySelector('header')); - loadFooter(doc.querySelector('footer')); - - loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`); - loadFonts(); - - window.hlx.plugins.run('loadLazy'); - - sampleRUM('lazy'); - sampleRUM.observe(main.querySelectorAll('div[data-block-name]')); - sampleRUM.observe(main.querySelectorAll('picture > img')); - - loadUTMprams(); -} - -/** - * Loads everything that happens a lot later, - * without impacting the user experience. - */ -function loadDelayed() { - window.setTimeout(() => { - window.hlx.plugins.load('delayed'); - window.hlx.plugins.run('loadDelayed'); - // eslint-disable-next-line import/no-cycle - return import('./delayed.js'); - }, 4000); - // load anything that can be postponed to the latest here -} - -async function loadPage() { - setFavicon(); - await window.hlx.plugins.load('eager'); - await loadEager(document); - await window.hlx.plugins.load('lazy'); - await loadLazy(document); - loadDelayed(); -} - -/** - * Datalayer Function to get the 'page' object - */ -function getDLPage() { - const page = { - title: document.querySelector('title').textContent.replace(/[\n\t]/gm, ''), - language: 'en', - locale: 'US', - level: 'top', - type: 'webpage', - keywords: '', - creationDate: getMetadata('creationdate'), - updateDate: getMetadata('updatedate'), - }; - - const path = window.location.pathname; - if (path === '/' || path === '/us/en' || path === '/us/en.html') { - page.level = 'top'; - page.type = 'home'; - } else if (path.includes('/us/en/news')) { - page.level = 'top'; - page.type = 'news'; - } else if (path.includes('/us/en/blog')) { - page.level = 'middle'; - page.type = 'blog'; - } else if (path.includes('/us/en/solutions')) { - page.level = 'middle'; - page.type = 'solutions'; - } else if (path.includes('/us/en/applications')) { - page.level = 'middle'; - page.type = 'applications'; - } else if (path.includes('/us/en/products')) { - if (path.includes('/us/en/products/family')) { - page.level = 'bottom'; - page.type = 'family'; - } else if (path.includes('/us/en/products/bundles')) { - page.level = 'bottom'; - page.type = 'bundles'; - } else if (path.includes('/us/en/products/sku')) { - page.level = 'bottom'; - page.type = 'sku'; - } else if (path.includes('/topics')) { - page.level = 'other'; - page.type = 'topics'; - } else { - page.level = 'bottom'; - page.type = 'products'; - } - } else if (path.includes('/us/en/library')) { - page.level = 'other'; - page.type = 'library'; - } else if (path.includes('/us/en/about-us')) { - page.level = 'top'; - page.type = 'about-us'; - } else if (path.includes('/us/en/expert')) { - page.level = 'top'; - page.type = 'expert'; - } else if (path.includes('/us/en/search') || path.includes('/us/en/danahersearch')) { - page.level = 'top'; - page.type = 'search'; - } else if (path.includes('/us/en/signin')) { - page.level = 'top'; - page.type = 'signin'; - } else if (path.includes('/us/en/legal')) { - page.level = 'top'; - page.type = 'legal'; - } - return page; -} - -// Danaher Config - Start -const urlParams = new URLSearchParams(window.location.search); -const useProd = urlParams.get('useProd'); -if (window.location.host === 'lifesciences.danaher.com' || useProd === 'true') { - window.DanaherConfig = { - siteID: 'ls-us-en', - gtmID: 'GTM-THXPLCS', - munchkinID: '306-EHG-641', - marketoDomain: '//306-EHG-641.mktoweb.com', - quoteCartPath: '/us/en/quote-cart.html', - cartPath: '/us/en/cart.html', - addressesPath: '/us/en/addresses.html', - shippingPath: '/us/en/shipping.html', - paymentPath: '/us/en/payment.html', - receiptPath: '/us/en/receipt.html', - quoteSubmitPath: '/us/en/submit-quote.html', - intershopDomain: 'https://shop.lifesciences.danaher.com', - intershopPath: '/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-', - searchOrg: 'danaherproductionrfl96bkr', - searchKey: 'xxf2f10385-5a54-4a18-bb48-fd8025d6b5d2', - workflowProductKey: 'xx3d1b8da5-d1e9-4989-bbed-264a248a9e22', - workflowResourceKey: 'xxf6a8b387-10f2-4660-af5d-6d304d0a789d', - productKey: 'xxfb161aa6-0fa0-419f-af37-9c6d7784bf76', - familyProductKey: 'xx1ecd2a4f-8391-4c70-b3c0-2d589bda56b7', - familyResourceKey: 'xx9dd85afc-64b6-4295-bc5d-eb8285f96d52', - categoryProductKey: 'xx2a299d60-2cf1-48ab-b9d5-94daeb25f1d6', - categoryDetailKey: 'xx61910369-c1ab-4df9-8d8a-3092b1323fcc', - productRecommendationsKey: 'xx107716c0-1ccd-4a61-8717-6ca36b6cdb0e', - megaMenuPath: '/content/dam/danaher/system/navigation/megamenu_items_us.json', - coveoProductPageTitle: 'Product Page', - pdfEmbedKey: '4a472c386025439d8a4ce2493557f6e7', - host: 'lifesciences.danaher.com', - }; -} else { - window.DanaherConfig = { - siteID: 'ls-us-en', - gtmID: 'GTM-KCBGM2N', - munchkinID: '439-KNJ-322', - marketoDomain: '//439-KNJ-322.mktoweb.com', - quoteCartPath: '/us/en/quote-cart.html', - cartPath: '/us/en/cart.html', - addressesPath: '/us/en/addresses.html', - shippingPath: '/us/en/shipping.html', - paymentPath: '/us/en/payment.html', - receiptPath: '/us/en/receipt.html', - quoteSubmitPath: '/us/en/submit-quote.html', - intershopDomain: 'https://stage.shop.lifesciences.danaher.com', - intershopPath: '/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-', - searchOrg: 'danahernonproduction1892f3fhz', - searchKey: 'xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b', - workflowProductKey: 'xx26ffc727-cc72-4bbd-98e3-34052f296382', - workflowResourceKey: 'xx14676f1d-cf4a-4a38-94f0-eda56e9920f1', - productKey: 'xx32da148e-dfd0-4725-a443-c05a7793afea', - familyProductKey: 'xx4e3989d6-93aa-4140-a227-19da35fcd1cc', - familyResourceKey: 'xx8274a91e-b29c-4267-8b3a-5022a2698605', - categoryProductKey: 'xxdf9d160d-f6e5-4c8c-969b-8570d7b81418', - categoryDetailKey: 'xxf2ea9bfd-bccb-4195-90fd-7757504fdc33', - productRecommendationsKey: 'xxea4d2c40-26e7-4e98-9377-d8ebe3f435ea', - megaMenuPath: '/content/dam/danaher/system/navigation/megamenu_items_us.json', - coveoProductPageTitle: 'Product Page', - pdfEmbedKey: '4a472c386025439d8a4ce2493557f6e7', - host: 'stage.lifesciences.danaher.com', - }; -} -// Danaher Config - End - -// Datalayer Init - Start -window.dataLayer = []; -window.dataLayer.push({ - user: { - customerID: '', - accountType: 'guest', - marketCode: '', - company: '', - role: '', - city: '', - state: '', - country: '', - postalCode: '', - lastVisit: '', - }, -}); -window.dataLayer.push({ - page: getDLPage(), -}); -// Datalayer Init - End - -loadPage(); diff --git a/scripts/scripts.js b/scripts/scripts.js index e3b04b6f0..cad5dfb5d 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1 +1,997 @@ -import{sampleRUM,loadHeader,loadFooter,decorateButtons,decorateIcons,decorateSections,decorateBlocks,decorateTemplateAndTheme,waitForLCP,loadBlocks,loadCSS,toClassName,getMetadata,createOptimizedPicture,loadBlock,decorateBlock}from"./lib-franklin.js";import{div,domEl,img}from"./dom-builder.js";const LCP_BLOCKS=["breadcrumb","product-hero","carousel"],TEMPLATE_LIST={blog:"blog",news:"blog",productdetail:"productDetail",processstep:"processstep",topic:"topic",library:"library",info:"library"};function imageHelper(e,t,a=!1){return-1<e.indexOf(".scene7.com")?img({src:""+e,alt:t,loading:a?"eager":"lazy",class:"mb-2 h-48 w-full object-cover"}):((e=createOptimizedPicture(e,t,a,[{width:"500"}])).querySelector("img").className="mb-2 h-48 w-full object-cover",e)}function createOptimizedS7Picture(e,t="",a=!1){var o;return e.startsWith("/is/image")||-1<e.indexOf(".scene7.com")?((o=document.createElement("picture")).appendChild(img({src:e+"?$danaher-mobile$",alt:t,loading:a?"eager":"lazy"})),o):img({src:e,alt:t,loading:a?"eager":"lazy"})}function formatDateUTCSeconds(e,t={}){var a=new Date(0);return a.setUTCSeconds(e),a.toLocaleDateString("en-US",{month:"short",day:"2-digit",year:"numeric",...t})}function generateUUID(){return Math.floor(1e3+9e3*Math.random())}let originalOffset=0;function scrollJumpMenuFixed(e){var t;originalOffset||(t=e.getBoundingClientRect(),originalOffset=t.top),window.scrollY>originalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelector(".page-jump-menu-container.fixed ul")?.classList.add("shadow-none","rounded-none"),document.querySelectorAll(".page-jump-menu-container.fixed ul li")?.forEach(e=>{e?.firstElementChild?.classList.add("rounded-full"),e?.firstElementChild?.querySelector("span.icon svg use")?.classList.add("stroke-danaherpurple-500")}),document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add("stroke-white"),e.classList.remove(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),document.querySelectorAll(".page-jump-menu-container ul li")?.forEach(e=>e?.firstElementChild?.classList.remove("rounded-full")),e.classList.add(..."[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}let pageTabsOriginalOffset=0;function scrollPageTabFixed(e){var t;pageTabsOriginalOffset||(t=e.getBoundingClientRect(),pageTabsOriginalOffset=t.top),window.scrollY>pageTabsOriginalOffset?(e.classList.add(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),e.classList.remove(..."[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" "))):(e.classList.remove(..."w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden".split(" ")),e.classList.add(..."[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center".split(" ")))}function makePublicUrl(t){var e=window.location.hostname.includes("lifesciences.danaher.com");try{var a=new URL(t,window.location.origin);return e?a.pathname.endsWith(".html")||(a.pathname+=".html"):a.pathname.endsWith(".html")&&(a.pathname=a.pathname.slice(0,-5)),a.pathname}catch(e){return console.error("Invalid URL:",e),t}}function setJsonLd(e,t){var a=document.head.querySelector(`script[data-name="${t}"]`);a?a.innerHTML=JSON.stringify(e):((a=document.createElement("script")).type="application/ld+json",a.innerHTML=JSON.stringify(e),a.dataset.name=t,document.head.appendChild(a))}function setFavicon(){var e=document.querySelector("link[rel*='icon']")||document.createElement("link");e.type="image/x-icon",e.rel="shortcut icon",e.href=`https://${window.location.hostname}/favicon.ico`,document.getElementsByTagName("head")[0].appendChild(e)}async function getFragmentFromFile(e){var t=await fetch(e);return t.ok?await t.text()||(console.error("fragment details empty",e),null):(console.error("error loading fragment details",t),null)}function getCookie(e){let t=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*"+encodeURIComponent(e).replace(/[\\-\\.\\+\\*]/g,"\\$&")+"\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"))||null;if(t&&("{"===t.substring(0,1)&&"}"===t.substring(t.length-1,t.length)||"["===t.substring(0,1)&&"]"===t.substring(t.length-1,t.length)))try{t=JSON.parse(t)}catch(e){}return t}function isOTEnabled(){var e=getCookie("OptanonConsent");return"string"!=typeof e||e.includes("C0002:1")}function setCookie(e,t,a=2592e6,o="/"){var n=new Date,a=(n.setTime(n.getTime()+a),"expires=".concat(n.toGMTString())),n=e.concat("=").concat(t).concat(";").concat(a).concat(";path=").concat(o);document.cookie=n}async function buildVideo(e){e=e.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"],a[href*="vidyard.com"]');if(0<e.length){const t=(await import("../blocks/embed/embed.js"))["default"];e.forEach(e=>{null==e.closest(".embed, .hero")&&t(e.parentNode)})}}async function loadFonts(){await loadCSS(window.hlx.codeBasePath+"/styles/fonts.css");try{window.location.hostname.includes("localhost")||sessionStorage.setItem("fonts-loaded","true")}catch(e){}}function buildAutoBlocks(e){try{buildVideo(e)}catch(e){console.error("Auto Blocking failed",e)}}function decorateModals(e){const t=e.querySelector(".show-modal-btn"),a=()=>t.getAttribute("data-dialog-message")?t.getAttribute("dialog-message"):"";t?.addEventListener("click",async e=>{e.preventDefault();e=(await import("./modal.js")).default;(await e("custom-modal",a,e=>{e.querySelector('p[name="close"]')?.addEventListener("click",()=>e.close())})).showModal()})}function decorateTwoColumnSection(e){e.querySelectorAll(".section.container-two-col").forEach(o=>{o.querySelectorAll(":scope > .default-content-wrapper").forEach(e=>{[...e.children].forEach(e=>{o.appendChild(e)});let t=e.nextSibling;for(var a=[];t;)t.className.includes("-wrapper")&&a.push(t),t=t.nextSibling;o.append(...a),o.removeChild(e)});const t=div();let a=null;[...o.children].forEach(e=>{"H1"===e.tagName&&(t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"})),a=div({class:"col-right w-full mt-0 md:mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-0 md:pb-10"}));e=e.cloneNode(!0);"H2"===e.tagName&&e.querySelector(":scope > strong")?(a?.classList.contains("col-right")&&t.appendChild(a),e.className="text-gray-900 !text-base leading-6 font-bold pt-6 pb-4 my-0",t.appendChild(div({class:"col-left lg:w-1/3 xl:w-1/4 pt-4"},e,domEl("hr",{style:"height: 10px; width: 54px; border-width: 0px; color: rgb(216, 244, 250); background-color: rgb(216, 244, 250);"}))),a=div({class:"col-right w-full mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-10"})):a?.classList.contains("col-right")&&a.appendChild(e)}),a&&t.appendChild(a),t.classList.add("w-full","flex","flex-wrap","break-normal"),o.innerHTML=t.outerHTML,o.classList.add("mx-auto","w-full","flex","flex-wrap","mb-5")})}function updateExternalLinks(r){const i=[window.location.origin];r.querySelectorAll("a[href]").forEach(t=>{try{var{origin:e,pathname:a,hash:o}=new URL(t.href,window.location.href),n=o&&o.startsWith("#_"),l="pdf"===a.split(".").pop();e&&e!==window.location.origin&&!n||l?(t.setAttribute("target","_blank"),i.includes(e)||t.setAttribute("rel","noopener")):n&&(t.setAttribute("target",o.replace("#","")),t.href=t.href.replace(o,""))}catch(e){console.warn(`Invalid link in ${r}: `+t.href)}})}function lazyLoadHiddenPageNavTabs(e,t){var a=window.location.hash;const n=a?a.substring(1,a.length).toLowerCase():t;e.forEach(t=>{if(!t.className.includes("breadcrumb-container")&&t.getAttribute("aria-labelledby")!==n){t.querySelectorAll(".block").forEach(e=>{e.setAttribute("data-block-status","loaded"),e.setAttribute("data-block-lazy-load",!0),e.parentElement.style.display="none"});const a=e=>{e.querySelectorAll(".block[data-block-lazy-load]").forEach(async e=>{e.removeAttribute("data-block-lazy-load"),e.setAttribute("data-block-status","initialized"),await loadBlock(e),e.parentElement.style.display=""}),t.setAttribute("data-section-status","loaded")},o=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(o.disconnect(),a(t))});o.observe(t),setTimeout(()=>{o.disconnect(),a(t)},5e3)}})}function decoratePageNav(t){var o=t.querySelector(".page-tabs");if(o){o=o.closest("div.section");let e=[...t.querySelectorAll("div.section")];const n=(e=e.slice(e.indexOf(o)+1)).filter(e=>e.hasAttribute("data-tabname"));let a=0;e.forEach(e=>{var t;a<n.length&&(e.classList.add("page-tab"),t=n[a].getAttribute("data-tabname")?.toLowerCase().replace(/\s+/g,"-"),e.setAttribute("aria-labelledby",t),e.hasAttribute("data-tabname"))&&(a+=1)}),lazyLoadHiddenPageNavTabs(e,n[0].getAttribute("aria-labelledby"))}}function decorateMain(e){decorateButtons(e),decorateIcons(e),buildAutoBlocks(e),decorateSections(e),decorateBlocks(e),loadHeader(document.querySelector("header")),decoratePageNav(e),decorateTwoColumnSection(e),updateExternalLinks(e)}async function decorateTemplates(e){try{var t,a,o=toClassName(getMetadata("template"));Object.keys(TEMPLATE_LIST).includes(o)&&(t=TEMPLATE_LIST[o],(a=await import(`../templates/${t}/${t}.js`)).default&&await a.default(e),document.body.classList.add(t))}catch(e){console.error("Auto Blocking failed",e)}}function decorateEmbeddedBlocks(e){e.querySelectorAll("div.section > div").forEach(decorateBlock)}async function processEmbedFragment(e){const t=div({class:"embed-fragment"});[...e.classList].forEach(e=>{t.classList.add(e)});var a=e.textContent;return a&&((a=await getFragmentFromFile(a+".plain.html"))?(t.innerHTML=a,[...t.querySelectorAll(".embed-fragment > div")].forEach(e=>{e.classList.add("section")}),decorateEmbeddedBlocks(t),decorateSections(t),loadBlocks(t)):(a=e.innerHTML,t.append(div({class:"section"})),t.querySelector(".section").innerHTML=a)),decorateButtons(t),decorateIcons(t),t}function loadATPageParams(){var e=window.location.pathname.replaceAll("/","_").replace(/\.html$/,"").substring(1),t=getMetadata("sku"),a=getMetadata("fullcategory").split("|").pop(),o=getMetadata("og:image"),n=getMetadata("og:title");return{id:e,skuId:t,categoryId:a,thumbnailURL:o,name:-1<n.indexOf("| Danaher Life Sciences")?n.split("| Danaher Life Sciences")[0]:n,message:getMetadata("og:description"),pageUrl:getMetadata("og:url"),brand:getMetadata("brand"),page:window.location.pathname.split("/")[3],tags:getMetadata("article:tag"),articleAuthor:getMetadata("authorname"),articlePostDate:getMetadata("publishdate"),articleReadTime:getMetadata("readingtime")}}function initATJS(t,e){return window.targetGlobalSettings=e,window.atPageParams=loadATPageParams(),window.targetPageParams=function(){return{at_property:"6aeb619e-92d9-f4cf-f209-6d88ff58af6a","entity.id":window.atPageParams?.id,"entity.skuId":window.atPageParams?.skuId,"entity.categoryId":window.atPageParams?.categoryId,"entity.thumbnailURL":window.atPageParams?.thumbnailURL,"entity.name":window.atPageParams?.name,"entity.message":window.atPageParams?.message,"entity.pageUrl":window.atPageParams?.pageUrl,"entity.brand":window.atPageParams?.brand,"entity.page":window.atPageParams?.page,"entity.tags":window.atPageParams?.tags,"entity.articleAuthor":window.atPageParams?.articleAuthor,"entity.articlePostDate":window.atPageParams?.articlePostDate,"entity.articleReadTime":window.atPageParams?.articleReadTime,danaherCompany:localStorage.getItem("danaher_company")?localStorage.getItem("danaher_company"):"",utmCampaign:localStorage.getItem("danaher_utm_campaign")?localStorage.getItem("danaher_utm_campaign"):"",utmSource:localStorage.getItem("danaher_utm_source")?localStorage.getItem("danaher_utm_source"):"",utmMedium:localStorage.getItem("danaher_utm_medium")?localStorage.getItem("danaher_utm_medium"):"",utmContent:localStorage.getItem("danaher_utm_content")?localStorage.getItem("danaher_utm_content"):""}},new Promise(e=>{import(t).then(e)})}function onDecoratedElement(t){document.querySelector('[data-block-status="loaded"],[data-section-status="loaded"]')&&t();var e=new MutationObserver(e=>{e.some(e=>"BODY"===e.target.tagName||"loaded"===e.target.dataset.sectionStatus||"loaded"===e.target.dataset.blockStatus)&&t()});e.observe(document.querySelector("main"),{subtree:!0,attributes:!0,attributeFilter:["data-block-status","data-section-status"]}),e.observe(document.querySelector("body"),{childList:!0})}function toCssSelector(e){return e.replace(/(\.\S+)?:eq\((\d+)\)/g,(e,t,a)=>":nth-child("+(Number(a)+1)+(t?` of ${t})`:""))}async function getElementForOffer(e){e=e.cssSelector||toCssSelector(e.selector);return document.querySelector(e)}async function getElementForMetric(e){e=toCssSelector(e.selector);return document.querySelector(e)}async function getAndApplyOffers(){const e=await window.adobe.target.getOffers({request:{execute:{pageLoad:{}}}}),{options:t=[],metrics:a=[]}=e.execute.pageLoad;onDecoratedElement(()=>{window.adobe.target.applyOffers({response:e}),t.forEach(e=>e.content=e.content.filter(e=>!getElementForOffer(e))),a.map((e,t)=>getElementForMetric(e)?t:-1).filter(e=>0<=e).reverse().map(e=>a.splice(e,1))})}let atjsPromise=Promise.resolve();const urlTarget=window.location.pathname,regex=/^\/(us\/en\/products\.html)?$/;async function loadEager(e){document.documentElement.lang="en",decorateTemplateAndTheme(),await window.hlx.plugins.run("loadEager");e=e.querySelector("main");e&&(await decorateTemplates(e),decorateMain(e),await atjsPromise,await new Promise(e=>{window.requestAnimationFrame(async()=>{document.body.classList.add("appear"),await waitForLCP(LCP_BLOCKS),e()})}));try{(900<=window.innerWidth||sessionStorage.getItem("fonts-loaded"))&&loadFonts()}catch(e){}}function getParameterByName(e,t=window.location.href){e=e.replace(/[[\]]/g,"$&"),e=new RegExp(`[?&]${e}(=([^&#]*)|&|#|$)`).exec(t);return e?e[2]?decodeURIComponent(e[2].replace(/\+/g," ")):"":null}function loadUTMprams(){["utm_campaign","utm_source","utm_medium","utm_content","utm_term","utm_previouspage"].forEach(e=>{var t=getParameterByName(e);null!==t&&window.localStorage.setItem("danaher_"+e,t)})}async function loadLazy(e){var t=e.querySelector("main"),a=(await loadBlocks(t),window.location)["hash"],o=!!a&&e.getElementById(a.substring(1));a&&o&&o.scrollIntoView(),loadFooter(e.querySelector("footer")),loadCSS(window.hlx.codeBasePath+"/styles/lazy-styles.css"),loadFonts(),window.hlx.plugins.run("loadLazy"),sampleRUM("lazy"),sampleRUM.observe(t.querySelectorAll("div[data-block-name]")),sampleRUM.observe(t.querySelectorAll("picture > img")),loadUTMprams()}function loadDelayed(){window.setTimeout(()=>(window.hlx.plugins.load("delayed"),window.hlx.plugins.run("loadDelayed"),import("./delayed.js")),4e3)}async function loadPage(){setFavicon(),await window.hlx.plugins.load("eager"),await loadEager(document),await window.hlx.plugins.load("lazy"),await loadLazy(document),loadDelayed()}function getDLPage(){var e={title:document.querySelector("title").textContent.replace(/[\n\t]/gm,""),language:"en",locale:"US",level:"top",type:"webpage",keywords:"",creationDate:getMetadata("creationdate"),updateDate:getMetadata("updatedate")},t=window.location.pathname;return"/"===t||"/us/en"===t||"/us/en.html"===t?(e.level="top",e.type="home"):t.includes("/us/en/news")?(e.level="top",e.type="news"):t.includes("/us/en/blog")?(e.level="middle",e.type="blog"):t.includes("/us/en/solutions")?(e.level="middle",e.type="solutions"):t.includes("/us/en/applications")?(e.level="middle",e.type="applications"):t.includes("/us/en/products")?t.includes("/us/en/products/family")?(e.level="bottom",e.type="family"):t.includes("/us/en/products/bundles")?(e.level="bottom",e.type="bundles"):t.includes("/us/en/products/sku")?(e.level="bottom",e.type="sku"):t.includes("/topics")?(e.level="other",e.type="topics"):(e.level="bottom",e.type="products"):t.includes("/us/en/library")?(e.level="other",e.type="library"):t.includes("/us/en/about-us")?(e.level="top",e.type="about-us"):t.includes("/us/en/expert")?(e.level="top",e.type="expert"):t.includes("/us/en/search")||t.includes("/us/en/danahersearch")?(e.level="top",e.type="search"):t.includes("/us/en/signin")?(e.level="top",e.type="signin"):t.includes("/us/en/legal")&&(e.level="top",e.type="legal"),e}regex.test(urlTarget)||(atjsPromise=initATJS("./at.js",{clientCode:"danaher",serverDomain:"danaher.tt.omtrdc.net",imsOrgId:"08333E7B636A2D4D0A495C34@AdobeOrg",bodyHidingEnabled:!1,cookieDomain:window.location.hostname,pageLoadEnabled:!1,secureOnly:!0,viewsEnabled:!1,withWebGLRenderer:!1}).catch(e=>{console.error("Error loading at.js",e)}),document.addEventListener("at-library-loaded",()=>getAndApplyOffers()));const urlParams=new URLSearchParams(window.location.search),useProd=urlParams.get("useProd");"lifesciences.danaher.com"===window.location.host||"true"===useProd?window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-THXPLCS",munchkinID:"306-EHG-641",marketoDomain:"//306-EHG-641.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danaherproductionrfl96bkr",searchKey:"xxf2f10385-5a54-4a18-bb48-fd8025d6b5d2",workflowProductKey:"xx3d1b8da5-d1e9-4989-bbed-264a248a9e22",workflowResourceKey:"xxf6a8b387-10f2-4660-af5d-6d304d0a789d",productKey:"xxfb161aa6-0fa0-419f-af37-9c6d7784bf76",familyProductKey:"xx1ecd2a4f-8391-4c70-b3c0-2d589bda56b7",familyResourceKey:"xx9dd85afc-64b6-4295-bc5d-eb8285f96d52",categoryProductKey:"xx2a299d60-2cf1-48ab-b9d5-94daeb25f1d6",categoryDetailKey:"xx61910369-c1ab-4df9-8d8a-3092b1323fcc",productRecommendationsKey:"xx107716c0-1ccd-4a61-8717-6ca36b6cdb0e",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"lifesciences.danaher.com"}:window.DanaherConfig={siteID:"ls-us-en",gtmID:"GTM-KCBGM2N",munchkinID:"439-KNJ-322",marketoDomain:"//439-KNJ-322.mktoweb.com",quoteCartPath:"/us/en/quote-cart.html",cartPath:"/us/en/cart.html",addressesPath:"/us/en/addresses.html",shippingPath:"/us/en/shipping.html",paymentPath:"/us/en/payment.html",receiptPath:"/us/en/receipt.html",quoteSubmitPath:"/us/en/submit-quote.html",intershopDomain:"https://stage.shop.lifesciences.danaher.com",intershopPath:"/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-",searchOrg:"danahernonproduction1892f3fhz",searchKey:"xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b",workflowProductKey:"xx26ffc727-cc72-4bbd-98e3-34052f296382",workflowResourceKey:"xx14676f1d-cf4a-4a38-94f0-eda56e9920f1",productKey:"xx32da148e-dfd0-4725-a443-c05a7793afea",familyProductKey:"xx4e3989d6-93aa-4140-a227-19da35fcd1cc",familyResourceKey:"xx8274a91e-b29c-4267-8b3a-5022a2698605",categoryProductKey:"xxdf9d160d-f6e5-4c8c-969b-8570d7b81418",categoryDetailKey:"xxf2ea9bfd-bccb-4195-90fd-7757504fdc33",productRecommendationsKey:"xxea4d2c40-26e7-4e98-9377-d8ebe3f435ea",megaMenuPath:"/content/dam/danaher/system/navigation/megamenu_items_us.json",coveoProductPageTitle:"Product Page",pdfEmbedKey:"4a472c386025439d8a4ce2493557f6e7",host:"stage.lifesciences.danaher.com"},window.dataLayer=[],window.dataLayer.push({user:{customerID:"",accountType:"guest",marketCode:"",company:"",role:"",city:"",state:"",country:"",postalCode:"",lastVisit:""}}),window.dataLayer.push({page:getDLPage()}),loadPage();export{imageHelper,createOptimizedS7Picture,formatDateUTCSeconds,generateUUID,scrollJumpMenuFixed,scrollPageTabFixed,makePublicUrl,setJsonLd,getFragmentFromFile,getCookie,isOTEnabled,setCookie,decorateModals,decorateMain,processEmbedFragment}; \ No newline at end of file +import { + sampleRUM, + loadHeader, + loadFooter, + decorateButtons, + decorateIcons, + decorateSections, + decorateBlocks, + decorateTemplateAndTheme, + waitForLCP, + loadBlocks, + loadCSS, + toClassName, + getMetadata, + createOptimizedPicture, + loadBlock, + decorateBlock, +} from './lib-franklin.js'; + +import { + div, + domEl, + img, +} from './dom-builder.js'; + +const LCP_BLOCKS = ['breadcrumb', 'product-hero', 'carousel']; // add your LCP blocks to the list +const TEMPLATE_LIST = { + blog: 'blog', + news: 'blog', + productdetail: 'productDetail', + processstep: 'processstep', + topic: 'topic', + library: 'library', + info: 'library', +}; + +/** + * Get the Image URL from Scene7 and Optimize the picture + * @param {string} imageUrl + * @param {string} imageAlt + * @param {boolean} eager + * @returns Optimized image + */ +export function imageHelper(imageUrl, imageAlt, eager = false) { + if (imageUrl.indexOf('.scene7.com') > -1) { + return img({ + src: `${imageUrl}`, + alt: imageAlt, + loading: eager ? 'eager' : 'lazy', + class: 'mb-2 h-48 w-full object-cover', + }); + } + const cardImage = createOptimizedPicture(imageUrl, imageAlt, eager, [{ width: '500' }]); + cardImage.querySelector('img').className = 'mb-2 h-48 w-full object-cover'; + return cardImage; +} + +export function createOptimizedS7Picture(src, alt = '', eager = false) { + if (src.startsWith('/is/image') || src.indexOf('.scene7.com') > -1) { + const picture = document.createElement('picture'); + picture.appendChild(img({ src: `${src}?$danaher-mobile$`, alt, loading: eager ? 'eager' : 'lazy' })); + return picture; + } + return img({ + src, + alt, + loading: eager ? 'eager' : 'lazy', + }); +} + +/** + * Format date expressed in UTC seconds + * @param {number} date + * @returns new string with the formatted date + */ +export function formatDateUTCSeconds(date, options = {}) { + const dateObj = new Date(0); + dateObj.setUTCSeconds(date); + + return dateObj.toLocaleDateString('en-US', { + month: 'short', + day: '2-digit', + year: 'numeric', + ...options, + }); +} + +/** + * It will used generate random number to use in ID + * @returns 4 digit random numbers + */ +export function generateUUID() { + return Math.floor(1000 + Math.random() * 9000); +} + +let originalOffset = 0; + +export function scrollJumpMenuFixed(pageJumpMenuContainer) { + if (!originalOffset) { + const rectPageTabs = pageJumpMenuContainer.getBoundingClientRect(); + originalOffset = rectPageTabs.top; + } + if (window.scrollY > originalOffset) { + pageJumpMenuContainer.classList.add(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); + document.querySelector('.page-jump-menu-container.fixed ul')?.classList.add('shadow-none', 'rounded-none'); + document.querySelectorAll('.page-jump-menu-container.fixed ul li')?.forEach((el) => { + el?.firstElementChild?.classList.add('rounded-full'); + el?.firstElementChild?.querySelector('span.icon svg use')?.classList.add('stroke-danaherpurple-500'); + }); + document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add('stroke-white'); + pageJumpMenuContainer.classList.remove(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + } else { + pageJumpMenuContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); + document.querySelectorAll('.page-jump-menu-container ul li')?.forEach((el) => el?.firstElementChild?.classList.remove('rounded-full')); + pageJumpMenuContainer.classList.add(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + } +} + +let pageTabsOriginalOffset = 0; +export function scrollPageTabFixed(pageTabsContainer) { + if (!pageTabsOriginalOffset) { + const rectPageTabs = pageTabsContainer.getBoundingClientRect(); + pageTabsOriginalOffset = rectPageTabs.top; + } + if (window.scrollY > pageTabsOriginalOffset) { + pageTabsContainer.classList.add(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); + pageTabsContainer.classList.remove(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + } else { + pageTabsContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); + pageTabsContainer.classList.add(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + } +} +/** + * Returns the valid public url with or without .html extension + * @param {string} url + * @returns new string with the formatted url + */ +export function makePublicUrl(url) { + const isProd = window.location.hostname.includes('lifesciences.danaher.com'); + try { + const newURL = new URL(url, window.location.origin); + if (isProd) { + if (newURL.pathname.endsWith('.html')) { + return newURL.pathname; + } + newURL.pathname += '.html'; + return newURL.pathname; + } + if (newURL.pathname.endsWith('.html')) { + newURL.pathname = newURL.pathname.slice(0, -5); + return newURL.pathname; + } + return newURL.pathname; + } catch (error) { + // eslint-disable-next-line no-console + console.error('Invalid URL:', error); + return url; + } +} + +/** + * Set the JSON-LD script in the head + * @param {*} data + * @param {string} name + */ +export function setJsonLd(data, name) { + const existingScript = document.head.querySelector(`script[data-name="${name}"]`); + if (existingScript) { + existingScript.innerHTML = JSON.stringify(data); + return; + } + + const script = document.createElement('script'); + script.type = 'application/ld+json'; + + script.innerHTML = JSON.stringify(data); + script.dataset.name = name; + document.head.appendChild(script); +} + +// Set the favicon +function setFavicon() { + const faviconLink = document.querySelector("link[rel*='icon']") || document.createElement('link'); + faviconLink.type = 'image/x-icon'; + faviconLink.rel = 'shortcut icon'; + faviconLink.href = `https://${window.location.hostname}/favicon.ico`; + document.getElementsByTagName('head')[0].appendChild(faviconLink); +} + +/** + * Fetches an HTML fragment from the given URL + * @param {string} url + * @returns the HTML text of the fragment + */ +export async function getFragmentFromFile(url) { + const response = await fetch(url); + if (!response.ok) { + // eslint-disable-next-line no-console + console.error('error loading fragment details', response); + return null; + } + const text = await response.text(); + if (!text) { + // eslint-disable-next-line no-console + console.error('fragment details empty', url); + return null; + } + return text; +} + +/** + * Get a cookie + * @param cname the name of the cookie + */ +export function getCookie(cname) { + let value = decodeURIComponent( + // eslint-disable-next-line prefer-template + document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s*' + encodeURIComponent(cname).replace(/[\\-\\.\\+\\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1'), + ) || null; + if (value && ((value.substring(0, 1) === '{' && value.substring(value.length - 1, value.length) === '}') || (value.substring(0, 1) === '[' && value.substring(value.length - 1, value.length) === ']'))) { + try { + value = JSON.parse(value); + } catch (e) { + return value; + } + } + return value; +} + +/** + * Find whether OT enabled + * @returns boolean + */ +export function isOTEnabled() { + const otCookie = getCookie('OptanonConsent'); + if (typeof otCookie === 'string') { + return otCookie.includes('C0002:1'); + } + return true; +} + +/** +* Set the content of a cookie +* @param {string} cname The cookie name (or property) +* @param {string} cvalue The cookie value +* @param {number} expTime The cookie expiry time (default 30 days) +* @param {string} path The cookie path (optional) +* +*/ +export function setCookie(cname, cvalue, expTime = 30 * 1000 * 60 * 60 * 24, path = '/') { + const today = new Date(); + today.setTime(today.getTime() + (expTime)); + const expires = 'expires='.concat(today.toGMTString()); + const cookieString = cname.concat('=') + .concat(cvalue) + .concat(';') + .concat(expires) + .concat(';path=') + .concat(path); + document.cookie = cookieString; // cname + '=' + cvalue + ';' + expires + ';path=' + path; +} + +/** + * Builds embeds for video links + * @param {Element} main The container element + */ +async function buildVideo(main) { + const videoLinks = main.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"],a[href*="vidyard.com"]'); + if (videoLinks.length > 0) { + const { default: decorateEmbed } = await import('../blocks/embed/embed.js'); + videoLinks.forEach((link) => { + if (link.closest('.embed, .hero') == null) { + decorateEmbed(link.parentNode); + } + }); + } +} + +/** + * load fonts.css and set a session storage flag + */ +async function loadFonts() { + await loadCSS(`${window.hlx.codeBasePath}/styles/fonts.css`); + try { + if (!window.location.hostname.includes('localhost')) sessionStorage.setItem('fonts-loaded', 'true'); + } catch (e) { + // do nothing + } +} + +/** + * Builds all synthetic blocks in a container element. + * @param {Element} main The container element + */ +function buildAutoBlocks(main) { + try { + buildVideo(main); + } catch (error) { + // eslint-disable-next-line no-console + console.error('Auto Blocking failed', error); + } +} + +export function decorateModals(main) { + const ctaModalButton = main.querySelector('.show-modal-btn'); + const content = () => (ctaModalButton.getAttribute('data-dialog-message') ? ctaModalButton.getAttribute('dialog-message') : ''); + // Listens to the custom modal button + ctaModalButton?.addEventListener('click', async (e) => { + e.preventDefault(); + // eslint-disable-next-line import/no-cycle + const { default: getModal } = await import('./modal.js'); + const customModal = await getModal('custom-modal', content, (modal) => { + modal.querySelector('p[name="close"]')?.addEventListener('click', () => modal.close()); + }); + customModal.showModal(); + }); +} + +/** + * Decorates the section with 2 columns style. + * @param {Element} main The main element + */ +function decorateTwoColumnSection(main) { + main.querySelectorAll('.section.container-two-col').forEach((section) => { + const defaultContentWrappers = section.querySelectorAll(':scope > .default-content-wrapper'); + defaultContentWrappers.forEach((contentWrapper) => { + [...contentWrapper.children].forEach((child) => { + section.appendChild(child); + }); + let nextElement = contentWrapper.nextSibling; + const allBlocks = []; + while (nextElement) { + if (nextElement.className.includes('-wrapper')) allBlocks.push(nextElement); + nextElement = nextElement.nextSibling; + } + section.append(...allBlocks); + section.removeChild(contentWrapper); + }); + + const newSection = div(); + let currentDiv = null; + [...section.children].forEach((child) => { + if (child.tagName === 'H1') { + newSection.appendChild( + div({ class: 'col-left lg:w-1/3 xl:w-1/4 pt-4' }), + ); + currentDiv = div({ class: 'col-right w-full mt-0 md:mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-0 md:pb-10' }); + } + const childClone = child.cloneNode(true); + if (childClone.tagName === 'H2' && childClone.querySelector(':scope > strong')) { + if (currentDiv?.classList.contains('col-right')) { + newSection.appendChild(currentDiv); + } + childClone.className = 'text-gray-900 !text-base leading-6 font-bold pt-6 pb-4 my-0'; + newSection.appendChild( + div( + { class: 'col-left lg:w-1/3 xl:w-1/4 pt-4' }, + childClone, + domEl('hr', { + style: 'height: 10px; width: 54px; border-width: 0px; color: rgb(216, 244, 250); background-color: rgb(216, 244, 250);', + }), + ), + ); + currentDiv = div({ class: 'col-right w-full mt-4 lg:mt-0 lg:w-2/3 xl:w-3/4 pt-6 pb-10' }); + } else if (currentDiv?.classList.contains('col-right')) { + currentDiv.appendChild(childClone); + } + }); + if (currentDiv) { + newSection.appendChild(currentDiv); + } + newSection.classList.add('w-full', 'flex', 'flex-wrap', 'break-normal'); + section.innerHTML = newSection.outerHTML; + section.classList.add('mx-auto', 'w-full', 'flex', 'flex-wrap', 'mb-5'); + }); +} + +/** + * Sets external target and rel for links in a main element. + * @param {Element} main The main element + */ +function updateExternalLinks(main) { + const REFERERS = [ + window.location.origin, + ]; + main.querySelectorAll('a[href]').forEach((a) => { + try { + const { origin, pathname, hash } = new URL(a.href, window.location.href); + const targetHash = hash && hash.startsWith('#_'); + const isPDF = pathname.split('.').pop() === 'pdf'; + if ((origin && origin !== window.location.origin && !targetHash) || isPDF) { + a.setAttribute('target', '_blank'); + if (!REFERERS.includes(origin)) a.setAttribute('rel', 'noopener'); + } else if (targetHash) { + a.setAttribute('target', hash.replace('#', '')); + a.href = a.href.replace(hash, ''); + } + } catch (e) { + // eslint-disable-next-line no-console + console.warn(`Invalid link in ${main}: ${a.href}`); + } + }); +} + +/** + * Lazy loads all the blocks in the tabs, except for the visible/active one + * @param {[Element]} sections All sections which belong to the Page Nav + * @param {string} nameOfFirstSection Exact name of the first section, in case there is no hash + */ +function lazyLoadHiddenPageNavTabs(sections, nameOfFirstSection) { + const activeHash = window.location.hash; + const active = activeHash + ? activeHash.substring(1, activeHash.length).toLowerCase() + : nameOfFirstSection; + + sections.forEach((section) => { + const hasBreadCrumb = section.className.includes('breadcrumb-container'); + if (!hasBreadCrumb && section.getAttribute('aria-labelledby') !== active) { + /* + It marks all the blocks inside the hidden sections as loaded, + so Franklin lib will skip them. + This means that the decorate functions of these blocks will not be executed + and the CSS will not be downloaded + */ + section.querySelectorAll('.block').forEach((block) => { + // make the Franklin rendering skip this block + block.setAttribute('data-block-status', 'loaded'); + // mark them as lazy load, so we can identify them later + block.setAttribute('data-block-lazy-load', true); + // hide them, to avoid CLS during lazy load + block.parentElement.style.display = 'none'; + }); + + const loadLazyBlocks = (lazySection) => { + lazySection.querySelectorAll('.block[data-block-lazy-load]').forEach(async (block) => { + block.removeAttribute('data-block-lazy-load'); + // Mark them back in the initialised status + block.setAttribute('data-block-status', 'initialized'); + // Manually load each block: Download CSS, JS, execute the decorate + await loadBlock(block); + // Show the block only when everything is ready to avoid CLS + block.parentElement.style.display = ''; + }); + + // force the loaded status of the section + section.setAttribute('data-section-status', 'loaded'); + }; + + // In case the user clicks on the section, quickly render it on the spot, + // if it happens before the timeout below + const observer = new IntersectionObserver((entries) => { + if (entries.some((e) => e.isIntersecting)) { + observer.disconnect(); + loadLazyBlocks(section); + } + }); + observer.observe(section); + + // Render the section with a delay + setTimeout(() => { + observer.disconnect(); + loadLazyBlocks(section); + }, 5000); + } + }); +} + +/** + * Builds all synthetic blocks in a container element. + * Run named sections for in page navigation. + * Decorate named sections for in page navigation. + * @param {Element} main The container element + */ +function decoratePageNav(main) { + const pageTabsBlock = main.querySelector('.page-tabs'); + if (!pageTabsBlock) return; + + const pageTabSection = pageTabsBlock.closest('div.section'); + let sections = [...main.querySelectorAll('div.section')]; + sections = sections.slice(sections.indexOf(pageTabSection) + 1); + + const namedSections = sections.filter((section) => section.hasAttribute('data-tabname')); + let index = 0; + sections.forEach((section) => { + if (index < namedSections.length) { + section.classList.add('page-tab'); + const tabName = namedSections[index].getAttribute('data-tabname'); + const tabId = tabName?.toLowerCase().replace(/\s+/g, '-'); + section.setAttribute('aria-labelledby', tabId); + if (section.hasAttribute('data-tabname')) { + index += 1; + } + } + }); + + lazyLoadHiddenPageNavTabs(sections, namedSections[0].getAttribute('aria-labelledby')); +} + +/** + * Decorates the main element. + * @param {Element} main The main element + */ +// eslint-disable-next-line import/prefer-default-export +export function decorateMain(main) { + // hopefully forward compatible button decoration + decorateButtons(main); + decorateIcons(main); + buildAutoBlocks(main); + decorateSections(main); + decorateBlocks(main); + loadHeader(document.querySelector('header')); + decoratePageNav(main); + decorateTwoColumnSection(main); + updateExternalLinks(main); +} + +/** + * Run template specific decoration code. + * @param {Element} main The container element + */ +async function decorateTemplates(main) { + try { + const template = toClassName(getMetadata('template')); + const templates = Object.keys(TEMPLATE_LIST); + if (templates.includes(template)) { + const templateName = TEMPLATE_LIST[template]; + const mod = await import(`../templates/${templateName}/${templateName}.js`); + if (mod.default) { + await mod.default(main); + } + document.body.classList.add(templateName); + } + } catch (error) { + // eslint-disable-next-line no-console + console.error('Auto Blocking failed', error); + } +} + +/** + * Decorate blocks in an embed fragment. + */ +function decorateEmbeddedBlocks(container) { + container + .querySelectorAll('div.section > div') + .forEach(decorateBlock); +} + +export async function processEmbedFragment(element) { + const block = div({ class: 'embed-fragment' }); + [...element.classList].forEach((className) => { block.classList.add(className); }); + const link = element.textContent; + if (link) { + const fragment = await getFragmentFromFile(`${link}.plain.html`); + if (fragment) { + block.innerHTML = fragment; + const sections = block.querySelectorAll('.embed-fragment > div'); + [...sections].forEach((section) => { + section.classList.add('section'); + }); + decorateEmbeddedBlocks(block); + decorateSections(block); + loadBlocks(block); + } else { + const elementInner = element.innerHTML; + block.append(div({ class: 'section' })); + block.querySelector('.section').innerHTML = elementInner; + } + } + decorateButtons(block); + decorateIcons(block); + + return block; +} + +/** + * Loads the page parameters for Adobe Target. + * @returns {Object} The target parameters object. + */ +function loadATPageParams() { + const id = window.location.pathname.replaceAll('/', '_').replace(/\.html$/, '').substring(1); + const skuId = getMetadata('sku'); + const categoryId = getMetadata('fullcategory').split('|').pop(); + const thumbnailURL = getMetadata('og:image'); + const title = getMetadata('og:title'); + const name = title.indexOf('| Danaher Life Sciences') > -1 ? title.split('| Danaher Life Sciences')[0] : title; + const message = getMetadata('og:description'); + const pageUrl = getMetadata('og:url'); + const brand = getMetadata('brand'); + const page = window.location.pathname.split('/')[3]; + const tags = getMetadata('article:tag'); + const articleAuthor = getMetadata('authorname'); + const articlePostDate = getMetadata('publishdate'); + const articleReadTime = getMetadata('readingtime'); + + const targetParams = { + id, + skuId, + categoryId, + thumbnailURL, + name, + message, + pageUrl, + brand, + page, + tags, + articleAuthor, + articlePostDate, + articleReadTime, + }; + + return targetParams; +} + +/** + * at.js implementation + */ + +function initATJS(path, config) { + window.targetGlobalSettings = config; + window.atPageParams = loadATPageParams(); + window.targetPageParams = function getTargetPageParams() { + return { + at_property: '6aeb619e-92d9-f4cf-f209-6d88ff58af6a', + 'entity.id': window.atPageParams?.id, + 'entity.skuId': window.atPageParams?.skuId, + 'entity.categoryId': window.atPageParams?.categoryId, + 'entity.thumbnailURL': window.atPageParams?.thumbnailURL, + 'entity.name': window.atPageParams?.name, + 'entity.message': window.atPageParams?.message, + 'entity.pageUrl': window.atPageParams?.pageUrl, + 'entity.brand': window.atPageParams?.brand, + 'entity.page': window.atPageParams?.page, + 'entity.tags': window.atPageParams?.tags, + 'entity.articleAuthor': window.atPageParams?.articleAuthor, + 'entity.articlePostDate': window.atPageParams?.articlePostDate, + 'entity.articleReadTime': window.atPageParams?.articleReadTime, + danaherCompany: localStorage.getItem('danaher_company') ? localStorage.getItem('danaher_company') : '', + utmCampaign: localStorage.getItem('danaher_utm_campaign') ? localStorage.getItem('danaher_utm_campaign') : '', + utmSource: localStorage.getItem('danaher_utm_source') ? localStorage.getItem('danaher_utm_source') : '', + utmMedium: localStorage.getItem('danaher_utm_medium') ? localStorage.getItem('danaher_utm_medium') : '', + utmContent: localStorage.getItem('danaher_utm_content') ? localStorage.getItem('danaher_utm_content') : '', + }; + }; + return new Promise((resolve) => { + import(path).then(resolve); + }); +} + +function onDecoratedElement(fn) { + // Apply propositions to all already decorated blocks/sections + if (document.querySelector('[data-block-status="loaded"],[data-section-status="loaded"]')) { + fn(); + } + + const observer = new MutationObserver((mutations) => { + if (mutations.some((m) => m.target.tagName === 'BODY' + || m.target.dataset.sectionStatus === 'loaded' + || m.target.dataset.blockStatus === 'loaded')) { + fn(); + } + }); + // Watch sections and blocks being decorated async + observer.observe(document.querySelector('main'), { + subtree: true, + attributes: true, + attributeFilter: ['data-block-status', 'data-section-status'], + }); + // Watch anything else added to the body + observer.observe(document.querySelector('body'), { childList: true }); +} + +function toCssSelector(selector) { + return selector.replace(/(\.\S+)?:eq\((\d+)\)/g, (_, clss, i) => `:nth-child(${Number(i) + 1}${clss ? ` of ${clss})` : ''}`); +} + +async function getElementForOffer(offer) { + const selector = offer.cssSelector || toCssSelector(offer.selector); + return document.querySelector(selector); +} + +async function getElementForMetric(metric) { + const selector = toCssSelector(metric.selector); + return document.querySelector(selector); +} + +async function getAndApplyOffers() { + const response = await window.adobe.target.getOffers({ request: { execute: { pageLoad: {} } } }); + const { options = [], metrics = [] } = response.execute.pageLoad; + onDecoratedElement(() => { + window.adobe.target.applyOffers({ response }); + // keeping track of offers that were already applied + // eslint-disable-next-line no-return-assign + options.forEach((o) => o.content = o.content.filter((c) => !getElementForOffer(c))); + // keeping track of metrics that were already applied + metrics.map((m, i) => (getElementForMetric(m) ? i : -1)) + .filter((i) => i >= 0) + .reverse() + .map((i) => metrics.splice(i, 1)); + }); +} + +let atjsPromise = Promise.resolve(); +const urlTarget = window.location.pathname; +const regex = /^\/(us\/en\/products\.html)?$/; // matches only the homepage and /us/en/products.html +if (!regex.test(urlTarget)) { + atjsPromise = initATJS('./at.js', { + clientCode: 'danaher', + serverDomain: 'danaher.tt.omtrdc.net', + imsOrgId: '08333E7B636A2D4D0A495C34@AdobeOrg', + bodyHidingEnabled: false, + cookieDomain: window.location.hostname, + pageLoadEnabled: false, + secureOnly: true, + viewsEnabled: false, + withWebGLRenderer: false, + }).catch((e) => { + // eslint-disable-next-line no-console + console.error('Error loading at.js', e); + }); + document.addEventListener('at-library-loaded', () => getAndApplyOffers()); +} + +/** + * Loads everything needed to get to LCP. + * @param {Element} doc The container element + */ +async function loadEager(doc) { + document.documentElement.lang = 'en'; + decorateTemplateAndTheme(); + + await window.hlx.plugins.run('loadEager'); + + const main = doc.querySelector('main'); + if (main) { + await decorateTemplates(main); + decorateMain(main); + + await atjsPromise; + + await new Promise((resolve) => { + window.requestAnimationFrame(async () => { + document.body.classList.add('appear'); + await waitForLCP(LCP_BLOCKS); + resolve(); + }); + }); + } + + try { + /* if desktop (proxy for fast connection) or fonts already loaded, load fonts.css */ + if (window.innerWidth >= 900 || sessionStorage.getItem('fonts-loaded')) { + loadFonts(); + } + } catch (e) { + // do nothing + } +} + +// UTM Paramaters check - start +function getParameterByName(parameter, url = window.location.href) { + /* eslint-disable no-eval */ + const modifiedParameter = parameter.replace(/[[\]]/g, '$&'); + const paramRegex = new RegExp(`[?&]${modifiedParameter}(=([^&#]*)|&|#|$)`); + const results = paramRegex.exec(url); + if (!results) return null; + if (!results[2]) return ''; + return decodeURIComponent(results[2].replace(/\+/g, ' ')); +} + +function loadUTMprams() { + /* eslint-disable no-eval */ + const utmParameters = [ + 'utm_campaign', + 'utm_source', + 'utm_medium', + 'utm_content', + 'utm_term', + 'utm_previouspage', + ]; + + utmParameters.forEach((param) => { + const value = getParameterByName(param); + if (value !== null) { + window.localStorage.setItem(`danaher_${param}`, value); + } + }); +} +// UTM Paramaters check - end + +/** + * Loads everything that doesn't need to be delayed. + * @param {Element} doc The container element + */ +async function loadLazy(doc) { + const main = doc.querySelector('main'); + await loadBlocks(main); + + const { hash } = window.location; + const element = hash ? doc.getElementById(hash.substring(1)) : false; + if (hash && element) element.scrollIntoView(); + + // loadHeader(doc.querySelector('header')); + loadFooter(doc.querySelector('footer')); + + loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`); + loadFonts(); + + window.hlx.plugins.run('loadLazy'); + + sampleRUM('lazy'); + sampleRUM.observe(main.querySelectorAll('div[data-block-name]')); + sampleRUM.observe(main.querySelectorAll('picture > img')); + + loadUTMprams(); +} + +/** + * Loads everything that happens a lot later, + * without impacting the user experience. + */ +function loadDelayed() { + window.setTimeout(() => { + window.hlx.plugins.load('delayed'); + window.hlx.plugins.run('loadDelayed'); + // eslint-disable-next-line import/no-cycle + return import('./delayed.js'); + }, 4000); + // load anything that can be postponed to the latest here +} + +async function loadPage() { + setFavicon(); + await window.hlx.plugins.load('eager'); + await loadEager(document); + await window.hlx.plugins.load('lazy'); + await loadLazy(document); + loadDelayed(); +} + +/** + * Datalayer Function to get the 'page' object + */ +function getDLPage() { + const page = { + title: document.querySelector('title').textContent.replace(/[\n\t]/gm, ''), + language: 'en', + locale: 'US', + level: 'top', + type: 'webpage', + keywords: '', + creationDate: getMetadata('creationdate'), + updateDate: getMetadata('updatedate'), + }; + + const path = window.location.pathname; + if (path === '/' || path === '/us/en' || path === '/us/en.html') { + page.level = 'top'; + page.type = 'home'; + } else if (path.includes('/us/en/news')) { + page.level = 'top'; + page.type = 'news'; + } else if (path.includes('/us/en/blog')) { + page.level = 'middle'; + page.type = 'blog'; + } else if (path.includes('/us/en/solutions')) { + page.level = 'middle'; + page.type = 'solutions'; + } else if (path.includes('/us/en/applications')) { + page.level = 'middle'; + page.type = 'applications'; + } else if (path.includes('/us/en/products')) { + if (path.includes('/us/en/products/family')) { + page.level = 'bottom'; + page.type = 'family'; + } else if (path.includes('/us/en/products/bundles')) { + page.level = 'bottom'; + page.type = 'bundles'; + } else if (path.includes('/us/en/products/sku')) { + page.level = 'bottom'; + page.type = 'sku'; + } else if (path.includes('/topics')) { + page.level = 'other'; + page.type = 'topics'; + } else { + page.level = 'bottom'; + page.type = 'products'; + } + } else if (path.includes('/us/en/library')) { + page.level = 'other'; + page.type = 'library'; + } else if (path.includes('/us/en/about-us')) { + page.level = 'top'; + page.type = 'about-us'; + } else if (path.includes('/us/en/expert')) { + page.level = 'top'; + page.type = 'expert'; + } else if (path.includes('/us/en/search') || path.includes('/us/en/danahersearch')) { + page.level = 'top'; + page.type = 'search'; + } else if (path.includes('/us/en/signin')) { + page.level = 'top'; + page.type = 'signin'; + } else if (path.includes('/us/en/legal')) { + page.level = 'top'; + page.type = 'legal'; + } + return page; +} + +// Danaher Config - Start +const urlParams = new URLSearchParams(window.location.search); +const useProd = urlParams.get('useProd'); +if (window.location.host === 'lifesciences.danaher.com' || useProd === 'true') { + window.DanaherConfig = { + siteID: 'ls-us-en', + gtmID: 'GTM-THXPLCS', + munchkinID: '306-EHG-641', + marketoDomain: '//306-EHG-641.mktoweb.com', + quoteCartPath: '/us/en/quote-cart.html', + cartPath: '/us/en/cart.html', + addressesPath: '/us/en/addresses.html', + shippingPath: '/us/en/shipping.html', + paymentPath: '/us/en/payment.html', + receiptPath: '/us/en/receipt.html', + quoteSubmitPath: '/us/en/submit-quote.html', + intershopDomain: 'https://shop.lifesciences.danaher.com', + intershopPath: '/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-', + searchOrg: 'danaherproductionrfl96bkr', + searchKey: 'xxf2f10385-5a54-4a18-bb48-fd8025d6b5d2', + workflowProductKey: 'xx3d1b8da5-d1e9-4989-bbed-264a248a9e22', + workflowResourceKey: 'xxf6a8b387-10f2-4660-af5d-6d304d0a789d', + productKey: 'xxfb161aa6-0fa0-419f-af37-9c6d7784bf76', + familyProductKey: 'xx1ecd2a4f-8391-4c70-b3c0-2d589bda56b7', + familyResourceKey: 'xx9dd85afc-64b6-4295-bc5d-eb8285f96d52', + categoryProductKey: 'xx2a299d60-2cf1-48ab-b9d5-94daeb25f1d6', + categoryDetailKey: 'xx61910369-c1ab-4df9-8d8a-3092b1323fcc', + productRecommendationsKey: 'xx107716c0-1ccd-4a61-8717-6ca36b6cdb0e', + megaMenuPath: '/content/dam/danaher/system/navigation/megamenu_items_us.json', + coveoProductPageTitle: 'Product Page', + pdfEmbedKey: '4a472c386025439d8a4ce2493557f6e7', + host: 'lifesciences.danaher.com', + }; +} else { + window.DanaherConfig = { + siteID: 'ls-us-en', + gtmID: 'GTM-KCBGM2N', + munchkinID: '439-KNJ-322', + marketoDomain: '//439-KNJ-322.mktoweb.com', + quoteCartPath: '/us/en/quote-cart.html', + cartPath: '/us/en/cart.html', + addressesPath: '/us/en/addresses.html', + shippingPath: '/us/en/shipping.html', + paymentPath: '/us/en/payment.html', + receiptPath: '/us/en/receipt.html', + quoteSubmitPath: '/us/en/submit-quote.html', + intershopDomain: 'https://stage.shop.lifesciences.danaher.com', + intershopPath: '/INTERSHOP/rest/WFS/DANAHERLS-LSIG-Site/-', + searchOrg: 'danahernonproduction1892f3fhz', + searchKey: 'xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b', + workflowProductKey: 'xx26ffc727-cc72-4bbd-98e3-34052f296382', + workflowResourceKey: 'xx14676f1d-cf4a-4a38-94f0-eda56e9920f1', + productKey: 'xx32da148e-dfd0-4725-a443-c05a7793afea', + familyProductKey: 'xx4e3989d6-93aa-4140-a227-19da35fcd1cc', + familyResourceKey: 'xx8274a91e-b29c-4267-8b3a-5022a2698605', + categoryProductKey: 'xxdf9d160d-f6e5-4c8c-969b-8570d7b81418', + categoryDetailKey: 'xxf2ea9bfd-bccb-4195-90fd-7757504fdc33', + productRecommendationsKey: 'xxea4d2c40-26e7-4e98-9377-d8ebe3f435ea', + megaMenuPath: '/content/dam/danaher/system/navigation/megamenu_items_us.json', + coveoProductPageTitle: 'Product Page', + pdfEmbedKey: '4a472c386025439d8a4ce2493557f6e7', + host: 'stage.lifesciences.danaher.com', + }; +} +// Danaher Config - End + +// Datalayer Init - Start +window.dataLayer = []; +window.dataLayer.push({ + user: { + customerID: '', + accountType: 'guest', + marketCode: '', + company: '', + role: '', + city: '', + state: '', + country: '', + postalCode: '', + lastVisit: '', + }, +}); +window.dataLayer.push({ + page: getDLPage(), +}); +// Datalayer Init - End + +loadPage(); From b9a2a9b79dcec110626a88322f3eb6abe296578a Mon Sep 17 00:00:00 2001 From: wz914876 <sharanagouda_patil@pall.com> Date: Mon, 20 May 2024 16:14:58 +0530 Subject: [PATCH 88/88] vertical line fix --- scripts/scripts.js | 8 ++++---- styles/styles.css | 6 ++++++ 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index 59ab516f7..cad5dfb5d 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -108,11 +108,11 @@ export function scrollJumpMenuFixed(pageJumpMenuContainer) { el?.firstElementChild?.querySelector('span.icon svg use')?.classList.add('stroke-danaherpurple-500'); }); document.querySelector('.page-jump-menu-container.fixed li[aria-selected="true"] a span.icon svg')?.classList.add('stroke-white'); - pageJumpMenuContainer.classList.remove(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + pageJumpMenuContainer.classList.remove(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); } else { pageJumpMenuContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-jump-menu-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); document.querySelectorAll('.page-jump-menu-container ul li')?.forEach((el) => el?.firstElementChild?.classList.remove('rounded-full')); - pageJumpMenuContainer.classList.add(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + pageJumpMenuContainer.classList.add(...'[&_.page-jump-menu-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); } } @@ -124,10 +124,10 @@ export function scrollPageTabFixed(pageTabsContainer) { } if (window.scrollY > pageTabsOriginalOffset) { pageTabsContainer.classList.add(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); - pageTabsContainer.classList.remove(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + pageTabsContainer.classList.remove(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); } else { pageTabsContainer.classList.remove(...'w-full fixed mt-[-1px] bg-white shadow-lg inset-x-0 top-[83px] py-2 z-10 [&_.page-tabs-wrapper]:md:max-w-7xl [&_ul>li>a]:flex-row [&_ul>li>a]:items-center [&_ul>li>a]:h-full [&_li>a>span.icon-chevron-down]:hidden'.split(' ')); - pageTabsContainer.classList.add(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); + pageTabsContainer.classList.add(...'[&_.page-tabs-wrapper]:md:max-w-max [&_ul]:divide-x [&_ul>li>a]:h-40 [&_ul>li>a]:flex-col [&_ul>li>a]:justify-center'.split(' ')); } } /** diff --git a/styles/styles.css b/styles/styles.css index 7f04218a3..63c704608 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2774,3 +2774,9 @@ main .section.top-border { .\[\&_ul\>li\>a\]\:justify-center ul>li>a { justify-content: center; } + +.\[\&_ul\]\:divide-x ul > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); +}