From e79495563cd7206ee718bf83f8d97c7171e80136 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Tue, 6 Feb 2024 16:02:03 +0530 Subject: [PATCH] CSS split by block - social-media --- blocks/social-media/social-media.css | 15 -- blocks/social-media/social-media.js | 20 +- icons/back.svg | 1 + styles/styles.css | 386 --------------------------- styles/tailwind.css | 1 - 5 files changed, 18 insertions(+), 405 deletions(-) delete mode 100644 blocks/social-media/social-media.css create mode 100644 icons/back.svg diff --git a/blocks/social-media/social-media.css b/blocks/social-media/social-media.css deleted file mode 100644 index da5b5a884..000000000 --- a/blocks/social-media/social-media.css +++ /dev/null @@ -1,15 +0,0 @@ -.block.social-media { - @apply relative z-10 flex items-center justify-between mb-4 text-gray-600 pt-6 pb-2; -} - -.block.social-media .back-btn, .block.social-media .social-links > a { - @apply font-normal inline-flex items-center gap-4 transition leading-6 py-1 px-1.5 rounded-lg hover:bg-slate-900/[0.03]; -} - -.block.social-media .back-btn > a > span { - @apply my-auto; -} - -.block.social-media .social-links { - @apply flex items-center gap-3; -} \ No newline at end of file diff --git a/blocks/social-media/social-media.js b/blocks/social-media/social-media.js index 904af698b..b1682e0fe 100644 --- a/blocks/social-media/social-media.js +++ b/blocks/social-media/social-media.js @@ -1,4 +1,6 @@ -import { button } from '../../scripts/dom-builder.js'; +import { + button, span, +} from '../../scripts/dom-builder.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; function goBack() { @@ -22,10 +24,22 @@ const social = ` `; export default function decorate(block) { - const goParentBack = button({ 'aria-label': 'back', class: 'back-btn', title: 'Back' }); - goParentBack.innerHTML = ' Back'; + block.classList.add(...'relative z-10 flex items-center justify-between mb-4 text-gray-600 pt-6 pb-2'.split(' ')); + const goParentBack = button({ 'aria-label': 'back', class: 'back-btn', title: 'Back' }, span({ class: 'icon icon-back' }), span({ class: 'my-auto' }, 'Back')); goParentBack.addEventListener('click', goBack); block.innerHTML = social; + const childDivs = block.childNodes; + childDivs.forEach((divs, index) => { + if (index === 1) divs.remove(); //to remove empty divs + }); + if (goParentBack.className.includes('back-btn')) { + goParentBack.classList.add(...'font-normal inline-flex items-center gap-4 transition leading-6 py-1 px-1.5 rounded-lg hover:bg-slate-900/[0.03]'.split(' ')); + } + block.querySelectorAll('div.social-links').forEach((item) => { + item?.classList?.add(...'flex items-center gap-3'.split(' ')); + const ancs = item?.querySelector('a'); + ancs?.classList?.add(...'font-normal inline-flex items-center gap-4 transition leading-6 py-1 px-1.5 rounded-lg hover:bg-slate-900/[0.03]'.split(' ')); + }); block.prepend(goParentBack); decorateIcons(block); } diff --git a/icons/back.svg b/icons/back.svg new file mode 100644 index 000000000..473c76543 --- /dev/null +++ b/icons/back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 286e4323a..2b59da2cf 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -408,74 +408,6 @@ border-radius: 9999px; } -.testimonial .testimonial-footer img.social-media { - position: relative; - z-index: 10; - margin-bottom: 1rem; - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 1.5rem; - padding-bottom: 0.5rem; - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.testimonial .testimonial-footer img.social-media .back-btn,.testimonial .testimonial-footer img.social-media .social-links > a { - display: inline-flex; - align-items: center; - gap: 1rem; - border-radius: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.375rem; - padding-right: 0.375rem; - font-weight: 400; - line-height: 1.5rem; - 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; -} - -.testimonial .testimonial-footer img.social-media .back-btn:hover,.testimonial .testimonial-footer img.social-media .social-links > a:hover { - background-color: rgb(15 23 42 / 0.03); -} - -.testimonial .testimonial-footer img.social-media .back-btn,.testimonial .testimonial-footer img.social-media .social-links > a { - display: inline-flex; - align-items: center; - gap: 1rem; - border-radius: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.375rem; - padding-right: 0.375rem; - font-weight: 400; - line-height: 1.5rem; - 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; -} - -.testimonial .testimonial-footer img.social-media .back-btn:hover,.testimonial .testimonial-footer img.social-media .social-links > a:hover { - background-color: rgb(15 23 42 / 0.03); -} - -.testimonial .testimonial-footer img.social-media .back-btn > a > span { - margin-top: auto; - margin-bottom: auto; -} - -.testimonial .testimonial-footer img.social-media .social-links { - display: flex; - align-items: center; - gap: 0.75rem; -} - @media (min-width: 1024px) { .testimonial .testimonial-footer img { @@ -765,74 +697,6 @@ line-height: 1.25rem; } -.columns:not(.columns-2-cols) > div div > p:not(.button-container).social-media { - position: relative; - z-index: 10; - margin-bottom: 1rem; - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 1.5rem; - padding-bottom: 0.5rem; - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.columns:not(.columns-2-cols) > div div > p:not(.button-container).social-media .back-btn,.columns:not(.columns-2-cols) > div div > p:not(.button-container).social-media .social-links > a { - display: inline-flex; - align-items: center; - gap: 1rem; - border-radius: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.375rem; - padding-right: 0.375rem; - font-weight: 400; - line-height: 1.5rem; - 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; -} - -.columns:not(.columns-2-cols) > div div > p:not(.button-container).social-media .back-btn:hover,.columns:not(.columns-2-cols) > div div > p:not(.button-container).social-media .social-links > a:hover { - background-color: rgb(15 23 42 / 0.03); -} - -.columns:not(.columns-2-cols) > div div > p:not(.button-container).social-media .back-btn,.columns:not(.columns-2-cols) > div div > p:not(.button-container).social-media .social-links > a { - display: inline-flex; - align-items: center; - gap: 1rem; - border-radius: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.375rem; - padding-right: 0.375rem; - font-weight: 400; - line-height: 1.5rem; - 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; -} - -.columns:not(.columns-2-cols) > div div > p:not(.button-container).social-media .back-btn:hover,.columns:not(.columns-2-cols) > div div > p:not(.button-container).social-media .social-links > a:hover { - background-color: rgb(15 23 42 / 0.03); -} - -.columns:not(.columns-2-cols) > div div > p:not(.button-container).social-media .back-btn > a > span { - margin-top: auto; - margin-bottom: auto; -} - -.columns:not(.columns-2-cols) > div div > p:not(.button-container).social-media .social-links { - display: flex; - align-items: center; - gap: 0.75rem; -} - .columns > div > div .button-container > a { margin-top: 1.5rem; border-radius: 9999px; @@ -866,74 +730,6 @@ display: block; } -.columns > div > .columns-img-col img.social-media { - position: relative; - z-index: 10; - margin-bottom: 1rem; - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 1.5rem; - padding-bottom: 0.5rem; - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.columns > div > .columns-img-col img.social-media .back-btn,.columns > div > .columns-img-col img.social-media .social-links > a { - display: inline-flex; - align-items: center; - gap: 1rem; - border-radius: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.375rem; - padding-right: 0.375rem; - font-weight: 400; - line-height: 1.5rem; - 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; -} - -.columns > div > .columns-img-col img.social-media .back-btn:hover,.columns > div > .columns-img-col img.social-media .social-links > a:hover { - background-color: rgb(15 23 42 / 0.03); -} - -.columns > div > .columns-img-col img.social-media .back-btn,.columns > div > .columns-img-col img.social-media .social-links > a { - display: inline-flex; - align-items: center; - gap: 1rem; - border-radius: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.375rem; - padding-right: 0.375rem; - font-weight: 400; - line-height: 1.5rem; - 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; -} - -.columns > div > .columns-img-col img.social-media .back-btn:hover,.columns > div > .columns-img-col img.social-media .social-links > a:hover { - background-color: rgb(15 23 42 / 0.03); -} - -.columns > div > .columns-img-col img.social-media .back-btn > a > span { - margin-top: auto; - margin-bottom: auto; -} - -.columns > div > .columns-img-col img.social-media .social-links { - display: flex; - align-items: center; - gap: 0.75rem; -} - .columns.bottom-border-right > div > div > p.link { margin-top: 1.5rem; margin-bottom: 1.5rem; @@ -1196,52 +992,6 @@ button.suggestion.selected { background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } -.block.social-media { - position: relative; - z-index: 10; - margin-bottom: 1rem; - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 1.5rem; - padding-bottom: 0.5rem; - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.block.social-media .back-btn, .block.social-media .social-links > a { - display: inline-flex; - align-items: center; - gap: 1rem; - border-radius: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.375rem; - padding-right: 0.375rem; - font-weight: 400; - line-height: 1.5rem; - 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; -} - -.block.social-media .back-btn:hover, .block.social-media .social-links > a:hover { - background-color: rgb(15 23 42 / 0.03); -} - -.block.social-media .back-btn > a > span { - margin-top: auto; - margin-bottom: auto; -} - -.block.social-media .social-links { - display: flex; - align-items: center; - gap: 0.75rem; -} - .topic main .takeway li p { margin-bottom: 0px; } @@ -1681,74 +1431,6 @@ svg symbol path { display: block; } -.product-menu .tab-pane.active.social-media { - position: relative; - z-index: 10; - margin-bottom: 1rem; - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 1.5rem; - padding-bottom: 0.5rem; - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.product-menu .tab-pane.active.social-media .back-btn,.product-menu .tab-pane.active.social-media .social-links > a { - display: inline-flex; - align-items: center; - gap: 1rem; - border-radius: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.375rem; - padding-right: 0.375rem; - font-weight: 400; - line-height: 1.5rem; - 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-menu .tab-pane.active.social-media .back-btn:hover,.product-menu .tab-pane.active.social-media .social-links > a:hover { - background-color: rgb(15 23 42 / 0.03); -} - -.product-menu .tab-pane.active.social-media .back-btn,.product-menu .tab-pane.active.social-media .social-links > a { - display: inline-flex; - align-items: center; - gap: 1rem; - border-radius: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.375rem; - padding-right: 0.375rem; - font-weight: 400; - line-height: 1.5rem; - 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-menu .tab-pane.active.social-media .back-btn:hover,.product-menu .tab-pane.active.social-media .social-links > a:hover { - background-color: rgb(15 23 42 / 0.03); -} - -.product-menu .tab-pane.active.social-media .back-btn > a > span { - margin-top: auto; - margin-bottom: auto; -} - -.product-menu .tab-pane.active.social-media .social-links { - display: flex; - align-items: center; - gap: 0.75rem; -} - .product-menu .tab-pane .section { padding-top: 1rem; } @@ -2509,74 +2191,6 @@ body.appear { display: block; } -body.appear.social-media { - position: relative; - z-index: 10; - margin-bottom: 1rem; - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 1.5rem; - padding-bottom: 0.5rem; - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -body.appear.social-media .back-btn,body.appear.social-media .social-links > a { - display: inline-flex; - align-items: center; - gap: 1rem; - border-radius: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.375rem; - padding-right: 0.375rem; - font-weight: 400; - line-height: 1.5rem; - 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; -} - -body.appear.social-media .back-btn:hover,body.appear.social-media .social-links > a:hover { - background-color: rgb(15 23 42 / 0.03); -} - -body.appear.social-media .back-btn,body.appear.social-media .social-links > a { - display: inline-flex; - align-items: center; - gap: 1rem; - border-radius: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.375rem; - padding-right: 0.375rem; - font-weight: 400; - line-height: 1.5rem; - 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; -} - -body.appear.social-media .back-btn:hover,body.appear.social-media .social-links > a:hover { - background-color: rgb(15 23 42 / 0.03); -} - -body.appear.social-media .back-btn > a > span { - margin-top: auto; - margin-bottom: auto; -} - -body.appear.social-media .social-links { - display: flex; - align-items: center; - gap: 0.75rem; -} - #categories { margin-top: 4rem; } diff --git a/styles/tailwind.css b/styles/tailwind.css index cadef8149..f410f65e2 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -19,7 +19,6 @@ @import '../blocks/cards/cards.css'; @import '../blocks/columns/columns.css'; @import '../blocks/header/header.css'; -@import '../blocks/social-media/social-media.css'; @import '../blocks/takeway/takeway.css'; @import '../blocks/product-hero/product-hero.css'; @import '../blocks/page-tabs/page-tabs.css';