@ptcwebops/ptcw-design 6.2.12 → 6.2.13-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/blog-detail-content_2.cjs.entry.js +1 -1
- package/dist/cjs/blog-detail-layout.cjs.entry.js +1 -1
- package/dist/cjs/blogs-search-section.cjs.entry.js +1 -1
- package/dist/cjs/{component-06dda623.js → component-4dd13907.js} +2643 -832
- package/dist/cjs/{event-jumbotron-example_16.cjs.entry.js → event-jumbotron-example_15.cjs.entry.js} +105 -45
- package/dist/cjs/featured-list.cjs.entry.js +1 -1
- package/dist/cjs/homepage-jumbotron.cjs.entry.js +1 -1
- package/dist/cjs/homepage-toggled-content.cjs.entry.js +1 -1
- package/dist/cjs/innovator-toggle-container.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/modal-form-example.cjs.entry.js +94 -0
- package/dist/cjs/most-popular-news.cjs.entry.js +1 -1
- package/dist/cjs/my-component.cjs.entry.js +1 -1
- package/dist/cjs/ptc-accordion-item.cjs.entry.js +1 -1
- package/dist/cjs/ptc-background-video.cjs.entry.js +1 -1
- package/dist/cjs/ptc-bio-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-case-studies-slider.cjs.entry.js +1 -1
- package/dist/cjs/ptc-collapse-list.cjs.entry.js +14 -1
- package/dist/cjs/ptc-data-lookup.cjs.entry.js +1 -2
- package/dist/cjs/ptc-featured-list.cjs.entry.js +1 -1
- package/dist/cjs/ptc-filter-level-theater.cjs.entry.js +1 -1
- package/dist/cjs/ptc-footer.cjs.entry.js +1 -1
- package/dist/cjs/{ptc-form-checkbox_2.cjs.entry.js → ptc-form-checkbox_4.cjs.entry.js} +787 -5
- package/dist/cjs/ptc-homepage-image-feature.cjs.entry.js +1 -1
- package/dist/cjs/ptc-homepage-video-background.cjs.entry.js +1 -1
- package/dist/cjs/ptc-icon-card.cjs.entry.js +8 -2
- package/dist/cjs/ptc-icon-minimize.cjs.entry.js +1 -1
- package/dist/cjs/ptc-jumbotron.cjs.entry.js +1 -1
- package/dist/cjs/ptc-media-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-nav-submenu.cjs.entry.js +1 -1
- package/dist/cjs/ptc-overlay.cjs.entry.js +34 -0
- package/dist/cjs/ptc-podcast-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-previous-url.cjs.entry.js +10 -2
- package/dist/cjs/ptc-pricing-packaging-table.cjs.entry.js +1 -1
- package/dist/cjs/ptc-pricing-tabs.cjs.entry.js +1 -1
- package/dist/cjs/ptc-product-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-product-category.cjs.entry.js +1 -1
- package/dist/cjs/ptc-product-highlight-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-readmore-char.cjs.entry.js +1 -1
- package/dist/cjs/ptc-readmore-v3.cjs.entry.js +1 -1
- package/dist/cjs/ptc-social-icons-footer.cjs.entry.js +7 -2
- package/dist/cjs/ptc-tooltip-v2.cjs.entry.js +1 -1
- package/dist/cjs/ptc-value-led-speed-bump.cjs.entry.js +1 -1
- package/dist/cjs/ptc-white-paper.cjs.entry.js +1 -1
- package/dist/cjs/ptcw-design.cjs.js +1 -1
- package/dist/cjs/{utils-87d7b99f.js → utils-ad441b07.js} +9 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/icon-asset/media/designer-v6.0.6.svg +30 -2
- package/dist/collection/components/innovator-toggle-container/innovator-toggle-container.css +20 -5
- package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css +19 -1
- package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.css +31 -17
- package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.js +48 -8
- package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.css +26 -0
- package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.js +99 -0
- package/dist/collection/components/ptc-bio-card/ptc-bio-card.css +20 -5
- package/dist/collection/components/ptc-button/ptc-button.js +4 -1
- package/dist/collection/components/ptc-card-wrapper/ptc-card-wrapper.css +6 -0
- package/dist/collection/components/ptc-card-wrapper/ptc-card-wrapper.js +20 -0
- package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.css +20 -5
- package/dist/collection/components/ptc-collapse-list/ptc-collapse-list.js +31 -0
- package/dist/collection/components/ptc-featured-list/ptc-featured-list.css +20 -5
- package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css +20 -5
- package/dist/collection/components/ptc-footer/ptc-footer-v2.css +14 -1
- package/dist/collection/components/ptc-icon-card/ptc-icon-card.css +10 -0
- package/dist/collection/components/ptc-icon-card/ptc-icon-card.js +25 -1
- package/dist/collection/components/ptc-icon-minimize/ptc-icon-minimize.css +0 -17
- package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +20 -5
- package/dist/collection/components/ptc-link/ptc-link.css +8 -0
- package/dist/collection/components/ptc-link/ptc-link.js +4 -1
- package/dist/collection/components/ptc-modal/ptc-modal.css +66 -0
- package/dist/collection/components/ptc-modal/ptc-modal.js +81 -4
- package/dist/collection/components/ptc-para/ptc-para.css +3 -0
- package/dist/collection/components/ptc-para/ptc-para.js +2 -2
- package/dist/collection/components/ptc-podcast-card/ptc-podcast-card.css +20 -5
- package/dist/collection/components/ptc-previous-url/ptc-previous-url.css +16 -0
- package/dist/collection/components/ptc-previous-url/ptc-previous-url.js +27 -1
- package/dist/collection/components/ptc-product-card/ptc-product-card.css +20 -5
- package/dist/collection/components/ptc-product-category/ptc-product-category.css +20 -5
- package/dist/collection/components/ptc-product-highlight-card/ptc-product-highlight-card.css +20 -5
- package/dist/collection/components/ptc-readmore-char/ptc-readmore-char.css +20 -5
- package/dist/collection/components/ptc-readmore-v3/ptc-readmore-v3.css +20 -5
- package/dist/collection/components/ptc-scroll-button/ptc-scroll-button.js +94 -3
- package/dist/collection/components/ptc-social-icons-footer/ptc-social-icons-footer.css +10 -0
- package/dist/collection/components/ptc-social-icons-footer/ptc-social-icons-footer.js +24 -1
- package/dist/collection/components/ptc-tooltip-v2/ptc-tooltip-v2.css +20 -5
- package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.css +20 -5
- package/dist/collection/components/ptc-white-paper/ptc-white-paper.css +20 -5
- package/dist/collection/components/subnav/ptc-nav-submenu/ptc-nav-submenu.css +7 -0
- package/dist/collection/stories/organisms/eSupport/CaseTracker/preview.stories.js +45 -0
- package/dist/collection/stories/organisms/eSupport/SupportArticle/preview.stories.js +47 -0
- package/dist/collection/stories/organisms/eSupport/SupportPage/preview.stories.js +157 -0
- package/dist/collection/utils/utils.js +8 -0
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +266 -50
- package/dist/esm/blog-detail-content_2.entry.js +1 -1
- package/dist/esm/blog-detail-layout.entry.js +1 -1
- package/dist/esm/blogs-search-section.entry.js +1 -1
- package/dist/esm/{component-274da230.js → component-9c921cc6.js} +2592 -793
- package/dist/esm/{event-jumbotron-example_16.entry.js → event-jumbotron-example_15.entry.js} +106 -45
- package/dist/esm/featured-list.entry.js +1 -1
- package/dist/esm/homepage-jumbotron.entry.js +1 -1
- package/dist/esm/homepage-toggled-content.entry.js +1 -1
- package/dist/esm/innovator-toggle-container.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/modal-form-example.entry.js +90 -0
- package/dist/esm/most-popular-news.entry.js +1 -1
- package/dist/esm/my-component.entry.js +1 -1
- package/dist/esm/ptc-accordion-item.entry.js +1 -1
- package/dist/esm/ptc-background-video.entry.js +1 -1
- package/dist/esm/ptc-bio-card.entry.js +1 -1
- package/dist/esm/ptc-case-studies-slider.entry.js +1 -1
- package/dist/esm/ptc-collapse-list.entry.js +14 -1
- package/dist/esm/ptc-data-lookup.entry.js +1 -2
- package/dist/esm/ptc-featured-list.entry.js +1 -1
- package/dist/esm/ptc-filter-level-theater.entry.js +1 -1
- package/dist/esm/ptc-footer.entry.js +1 -1
- package/dist/esm/{ptc-form-checkbox_2.entry.js → ptc-form-checkbox_4.entry.js} +784 -4
- package/dist/esm/ptc-homepage-image-feature.entry.js +1 -1
- package/dist/esm/ptc-homepage-video-background.entry.js +1 -1
- package/dist/esm/ptc-icon-card.entry.js +9 -3
- package/dist/esm/ptc-icon-minimize.entry.js +1 -1
- package/dist/esm/ptc-jumbotron.entry.js +1 -1
- package/dist/esm/ptc-media-card.entry.js +1 -1
- package/dist/esm/ptc-nav-submenu.entry.js +1 -1
- package/dist/esm/ptc-overlay.entry.js +30 -0
- package/dist/esm/ptc-podcast-card.entry.js +1 -1
- package/dist/esm/ptc-previous-url.entry.js +10 -2
- package/dist/esm/ptc-pricing-packaging-table.entry.js +1 -1
- package/dist/esm/ptc-pricing-tabs.entry.js +1 -1
- package/dist/esm/ptc-product-card.entry.js +1 -1
- package/dist/esm/ptc-product-category.entry.js +1 -1
- package/dist/esm/ptc-product-highlight-card.entry.js +1 -1
- package/dist/esm/ptc-readmore-char.entry.js +1 -1
- package/dist/esm/ptc-readmore-v3.entry.js +1 -1
- package/dist/esm/ptc-social-icons-footer.entry.js +7 -2
- package/dist/esm/ptc-tooltip-v2.entry.js +1 -1
- package/dist/esm/ptc-value-led-speed-bump.entry.js +1 -1
- package/dist/esm/ptc-white-paper.entry.js +1 -1
- package/dist/esm/ptcw-design.js +1 -1
- package/dist/esm/{utils-b7c6422e.js → utils-ff65c75b.js} +9 -1
- package/dist/ptcw-design/media/designer-v6.0.6.svg +30 -2
- package/dist/ptcw-design/{p-1cff585f.entry.js → p-0d806031.entry.js} +1 -1
- package/dist/ptcw-design/p-0de8e37e.entry.js +1 -0
- package/dist/ptcw-design/{p-760507e1.entry.js → p-11e0edaf.entry.js} +1 -1
- package/dist/ptcw-design/{p-69686408.entry.js → p-139a02e6.entry.js} +1 -1
- package/dist/ptcw-design/p-1b257420.entry.js +1 -0
- package/dist/ptcw-design/p-257deac0.entry.js +1 -0
- package/dist/ptcw-design/{p-fce2bd81.entry.js → p-2749c178.entry.js} +1 -1
- package/dist/ptcw-design/p-2ac5ed9c.entry.js +1 -0
- package/dist/ptcw-design/{p-eab1042e.entry.js → p-2c6fc745.entry.js} +1 -1
- package/dist/ptcw-design/p-34c50b3e.entry.js +1 -0
- package/dist/ptcw-design/p-36007a57.entry.js +1 -0
- package/dist/ptcw-design/p-50d68602.entry.js +1 -0
- package/dist/ptcw-design/p-58f138a3.entry.js +1 -0
- package/dist/ptcw-design/p-5ef23b5c.entry.js +1 -0
- package/dist/ptcw-design/{p-cffebefe.entry.js → p-6d3326da.entry.js} +1 -1
- package/dist/ptcw-design/{p-085e82b8.entry.js → p-72df6678.entry.js} +1 -1
- package/dist/ptcw-design/{p-d1857ada.entry.js → p-77cad16c.entry.js} +1 -1
- package/dist/ptcw-design/p-799afee5.entry.js +1 -0
- package/dist/ptcw-design/{p-52b82ac5.entry.js → p-7a9611b4.entry.js} +1 -1
- package/dist/ptcw-design/{p-e38ed0e3.entry.js → p-808ec62a.entry.js} +1 -1
- package/dist/ptcw-design/p-8872161f.js +1 -0
- package/dist/ptcw-design/p-90c4f08b.entry.js +1 -0
- package/dist/ptcw-design/p-95187918.entry.js +1 -0
- package/dist/ptcw-design/p-a2caf246.entry.js +68 -0
- package/dist/ptcw-design/p-a3b57ede.entry.js +1 -0
- package/dist/ptcw-design/{p-999d1c9f.entry.js → p-ae970a60.entry.js} +1 -1
- package/dist/ptcw-design/p-b1ebac6f.entry.js +1 -0
- package/dist/ptcw-design/p-ba8c58a7.entry.js +1 -0
- package/dist/ptcw-design/{p-a3a04f4e.entry.js → p-bb902570.entry.js} +1 -1
- package/dist/ptcw-design/p-bcab66bf.js +336 -0
- package/dist/ptcw-design/{p-29639cd4.entry.js → p-c37a3bd2.entry.js} +1 -1
- package/dist/ptcw-design/{p-2335d57c.entry.js → p-c66b8926.entry.js} +1 -1
- package/dist/ptcw-design/{p-4c096997.entry.js → p-c95f423e.entry.js} +1 -1
- package/dist/ptcw-design/{p-103ec637.entry.js → p-d10cb999.entry.js} +1 -1
- package/dist/ptcw-design/p-d2e26642.entry.js +1 -0
- package/dist/ptcw-design/{p-48183365.entry.js → p-d756db27.entry.js} +1 -1
- package/dist/ptcw-design/{p-34610052.entry.js → p-d9abe7e8.entry.js} +1 -1
- package/dist/ptcw-design/{p-df8526a2.entry.js → p-da82dc93.entry.js} +1 -1
- package/dist/ptcw-design/p-de960790.entry.js +1 -0
- package/dist/ptcw-design/{p-7e7ebf0a.entry.js → p-e3f8e5d5.entry.js} +1 -1
- package/dist/ptcw-design/{p-34b270c1.entry.js → p-e4000363.entry.js} +1 -1
- package/dist/ptcw-design/p-e90fbbad.entry.js +1 -0
- package/dist/ptcw-design/{p-d3e5b65c.entry.js → p-ea7369e9.entry.js} +1 -1
- package/dist/ptcw-design/p-f8512dc9.entry.js +1 -0
- package/dist/ptcw-design/ptcw-design.css +2 -2
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/dist/types/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.d.ts +5 -3
- package/dist/types/components/organism-bundles/form/modal-from-example/modal-form-example.d.ts +25 -0
- package/dist/types/components/ptc-button/ptc-button.d.ts +1 -0
- package/dist/types/components/ptc-card-wrapper/ptc-card-wrapper.d.ts +2 -0
- package/dist/types/components/ptc-collapse-list/ptc-collapse-list.d.ts +2 -0
- package/dist/types/components/ptc-icon-card/ptc-icon-card.d.ts +6 -0
- package/dist/types/components/ptc-link/ptc-link.d.ts +1 -0
- package/dist/types/components/ptc-modal/ptc-modal.d.ts +5 -1
- package/dist/types/components/ptc-para/ptc-para.d.ts +1 -1
- package/dist/types/components/ptc-previous-url/ptc-previous-url.d.ts +2 -0
- package/dist/types/components/ptc-scroll-button/ptc-scroll-button.d.ts +12 -0
- package/dist/types/components/ptc-social-icons-footer/ptc-social-icons-footer.d.ts +5 -0
- package/dist/types/components.d.ts +58 -4
- package/dist/types/utils/utils.d.ts +1 -0
- package/package.json +1 -1
- package/readme.md +5 -1
- package/dist/cjs/component-5b5b6a98.js +0 -1819
- package/dist/cjs/ptc-multi-select_2.cjs.entry.js +0 -670
- package/dist/cjs/validation-messages-33a4f26b.js +0 -126
- package/dist/esm/component-341e4eaa.js +0 -1802
- package/dist/esm/ptc-multi-select_2.entry.js +0 -665
- package/dist/esm/validation-messages-adbb6518.js +0 -124
- package/dist/ptcw-design/p-00e21489.entry.js +0 -1
- package/dist/ptcw-design/p-1022ad8b.entry.js +0 -1
- package/dist/ptcw-design/p-136a91bf.entry.js +0 -1
- package/dist/ptcw-design/p-14e53256.entry.js +0 -1
- package/dist/ptcw-design/p-18a5a338.js +0 -1
- package/dist/ptcw-design/p-18f59395.entry.js +0 -1
- package/dist/ptcw-design/p-1b7087e7.entry.js +0 -1
- package/dist/ptcw-design/p-1ca8a5bf.entry.js +0 -1
- package/dist/ptcw-design/p-3f71553e.entry.js +0 -1
- package/dist/ptcw-design/p-4a5f7fd0.entry.js +0 -68
- package/dist/ptcw-design/p-4e2bb0e0.entry.js +0 -1
- package/dist/ptcw-design/p-583608d9.entry.js +0 -1
- package/dist/ptcw-design/p-710de12d.entry.js +0 -1
- package/dist/ptcw-design/p-841b807d.js +0 -1
- package/dist/ptcw-design/p-8daf00ae.entry.js +0 -1
- package/dist/ptcw-design/p-be533f0d.js +0 -134
- package/dist/ptcw-design/p-c1513c3f.js +0 -203
- package/dist/ptcw-design/p-d734b373.entry.js +0 -1
- package/dist/ptcw-design/p-dc488936.entry.js +0 -1
- package/dist/ptcw-design/p-dd73c4d1.entry.js +0 -1
- package/dist/ptcw-design/p-e7937ac1.entry.js +0 -1
- package/dist/ptcw-design/p-e9a7475b.entry.js +0 -1
- package/dist/ptcw-design/p-f05fec22.entry.js +0 -1
|
@@ -82,23 +82,38 @@ a:focus-visible {
|
|
|
82
82
|
border-radius: var(--ptc-border-radius-standard);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
85
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
|
|
86
86
|
color: var(--color-blue-04);
|
|
87
|
+
margin: -2px;
|
|
88
|
+
border: 2px solid transparent;
|
|
87
89
|
}
|
|
88
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
90
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
|
|
89
91
|
color: var(--color-blue-06);
|
|
90
92
|
}
|
|
91
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
93
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
92
94
|
transition: none;
|
|
93
95
|
color: var(--color-blue-07);
|
|
94
96
|
}
|
|
95
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
97
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
96
98
|
color: var(--color-blue-05);
|
|
97
99
|
}
|
|
98
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
100
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
|
|
99
101
|
color: var(--color-gray-04) !important;
|
|
100
102
|
cursor: not-allowed;
|
|
101
103
|
}
|
|
104
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
|
|
105
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
106
|
+
border: 2px solid white;
|
|
107
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
108
|
+
}
|
|
109
|
+
.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
|
|
110
|
+
border: 2px solid transparent;
|
|
111
|
+
}
|
|
112
|
+
.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
|
|
113
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
114
|
+
border: 2px solid white;
|
|
115
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
116
|
+
}
|
|
102
117
|
|
|
103
118
|
.ptc-link {
|
|
104
119
|
color: var(--color-gray-10);
|
package/dist/collection/components/ptc-product-highlight-card/ptc-product-highlight-card.css
CHANGED
|
@@ -82,23 +82,38 @@ a:focus-visible {
|
|
|
82
82
|
border-radius: var(--ptc-border-radius-standard);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
85
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
|
|
86
86
|
color: var(--color-blue-04);
|
|
87
|
+
margin: -2px;
|
|
88
|
+
border: 2px solid transparent;
|
|
87
89
|
}
|
|
88
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
90
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
|
|
89
91
|
color: var(--color-blue-06);
|
|
90
92
|
}
|
|
91
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
93
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
92
94
|
transition: none;
|
|
93
95
|
color: var(--color-blue-07);
|
|
94
96
|
}
|
|
95
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
97
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
96
98
|
color: var(--color-blue-05);
|
|
97
99
|
}
|
|
98
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
100
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
|
|
99
101
|
color: var(--color-gray-04) !important;
|
|
100
102
|
cursor: not-allowed;
|
|
101
103
|
}
|
|
104
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
|
|
105
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
106
|
+
border: 2px solid white;
|
|
107
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
108
|
+
}
|
|
109
|
+
.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
|
|
110
|
+
border: 2px solid transparent;
|
|
111
|
+
}
|
|
112
|
+
.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
|
|
113
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
114
|
+
border: 2px solid white;
|
|
115
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
116
|
+
}
|
|
102
117
|
|
|
103
118
|
.ptc-link {
|
|
104
119
|
color: var(--color-gray-10);
|
|
@@ -82,23 +82,38 @@ a:focus-visible {
|
|
|
82
82
|
border-radius: var(--ptc-border-radius-standard);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
85
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
|
|
86
86
|
color: var(--color-blue-04);
|
|
87
|
+
margin: -2px;
|
|
88
|
+
border: 2px solid transparent;
|
|
87
89
|
}
|
|
88
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
90
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
|
|
89
91
|
color: var(--color-blue-06);
|
|
90
92
|
}
|
|
91
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
93
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
92
94
|
transition: none;
|
|
93
95
|
color: var(--color-blue-07);
|
|
94
96
|
}
|
|
95
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
97
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
96
98
|
color: var(--color-blue-05);
|
|
97
99
|
}
|
|
98
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
100
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
|
|
99
101
|
color: var(--color-gray-04) !important;
|
|
100
102
|
cursor: not-allowed;
|
|
101
103
|
}
|
|
104
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
|
|
105
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
106
|
+
border: 2px solid white;
|
|
107
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
108
|
+
}
|
|
109
|
+
.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
|
|
110
|
+
border: 2px solid transparent;
|
|
111
|
+
}
|
|
112
|
+
.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
|
|
113
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
114
|
+
border: 2px solid white;
|
|
115
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
116
|
+
}
|
|
102
117
|
|
|
103
118
|
.ptc-link {
|
|
104
119
|
color: var(--color-gray-10);
|
|
@@ -82,23 +82,38 @@ a:focus-visible {
|
|
|
82
82
|
border-radius: var(--ptc-border-radius-standard);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
85
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
|
|
86
86
|
color: var(--color-blue-04);
|
|
87
|
+
margin: -2px;
|
|
88
|
+
border: 2px solid transparent;
|
|
87
89
|
}
|
|
88
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
90
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
|
|
89
91
|
color: var(--color-blue-06);
|
|
90
92
|
}
|
|
91
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
93
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
92
94
|
transition: none;
|
|
93
95
|
color: var(--color-blue-07);
|
|
94
96
|
}
|
|
95
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
97
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
96
98
|
color: var(--color-blue-05);
|
|
97
99
|
}
|
|
98
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
100
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
|
|
99
101
|
color: var(--color-gray-04) !important;
|
|
100
102
|
cursor: not-allowed;
|
|
101
103
|
}
|
|
104
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
|
|
105
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
106
|
+
border: 2px solid white;
|
|
107
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
108
|
+
}
|
|
109
|
+
.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
|
|
110
|
+
border: 2px solid transparent;
|
|
111
|
+
}
|
|
112
|
+
.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
|
|
113
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
114
|
+
border: 2px solid white;
|
|
115
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
116
|
+
}
|
|
102
117
|
|
|
103
118
|
.ptc-link {
|
|
104
119
|
color: var(--color-gray-10);
|
|
@@ -1,6 +1,35 @@
|
|
|
1
1
|
import { Host, h } from '@stencil/core';
|
|
2
2
|
export class PtcScrollButton {
|
|
3
3
|
constructor() {
|
|
4
|
+
//slider!: HTMLElement;
|
|
5
|
+
this.startX = 0;
|
|
6
|
+
this.scrollLeft = 0;
|
|
7
|
+
this.startDragging = (e) => {
|
|
8
|
+
this.isMouseDown = true;
|
|
9
|
+
this.isDragging = false;
|
|
10
|
+
this.containerCards.forEach((card) => {
|
|
11
|
+
card.disabled = false;
|
|
12
|
+
});
|
|
13
|
+
this.startX = e.pageX;
|
|
14
|
+
this.scrollLeft = this.scrollContainer.scrollLeft;
|
|
15
|
+
};
|
|
16
|
+
this.performDragging = (e) => {
|
|
17
|
+
if (!this.isMouseDown)
|
|
18
|
+
return;
|
|
19
|
+
const x = e.pageX - this.scrollContainer.offsetLeft;
|
|
20
|
+
const walk = x - this.startX;
|
|
21
|
+
this.isDragging = Math.abs(walk) > 5;
|
|
22
|
+
this.scrollContainer.scrollLeft = this.scrollLeft - walk;
|
|
23
|
+
this.containerCards.forEach((card) => {
|
|
24
|
+
card.disabled = true;
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
this.stopDragging = () => {
|
|
28
|
+
this.isMouseDown = false;
|
|
29
|
+
this.containerCards.forEach((card) => {
|
|
30
|
+
card.disabled = false;
|
|
31
|
+
});
|
|
32
|
+
};
|
|
4
33
|
this.handleScroll = () => {
|
|
5
34
|
this.updateVisibility();
|
|
6
35
|
};
|
|
@@ -29,6 +58,8 @@ export class PtcScrollButton {
|
|
|
29
58
|
this.trackerId = undefined;
|
|
30
59
|
this.styles = undefined;
|
|
31
60
|
this.isVisible = true;
|
|
61
|
+
this.isDragging = false;
|
|
62
|
+
this.isMouseDown = false;
|
|
32
63
|
}
|
|
33
64
|
componentWillLoad() {
|
|
34
65
|
this.scrollContainer = document.querySelector(`.${this.scrollContainerClass}`);
|
|
@@ -41,11 +72,31 @@ export class PtcScrollButton {
|
|
|
41
72
|
console.error('scrollContainer ele not found');
|
|
42
73
|
}
|
|
43
74
|
}
|
|
75
|
+
componentDidLoad() {
|
|
76
|
+
this.containerCards = document.querySelectorAll(`.${this.scrollContainerClass} ptc-card-wrapper`);
|
|
77
|
+
if (this.scrollContainer) {
|
|
78
|
+
this.enableDragging();
|
|
79
|
+
}
|
|
80
|
+
}
|
|
44
81
|
disconnectedCallback() {
|
|
45
82
|
if (this.scrollContainer) {
|
|
46
83
|
this.scrollContainer.removeEventListener('scroll', this.handleScroll);
|
|
84
|
+
this.disableDragging();
|
|
47
85
|
}
|
|
48
86
|
}
|
|
87
|
+
async checkVisibility() {
|
|
88
|
+
this.updateVisibility();
|
|
89
|
+
}
|
|
90
|
+
enableDragging() {
|
|
91
|
+
this.scrollContainer.addEventListener('mousedown', this.startDragging);
|
|
92
|
+
this.scrollContainer.addEventListener('mousemove', this.performDragging);
|
|
93
|
+
['mouseup', 'mouseleave'].forEach(event => this.scrollContainer.addEventListener(event, this.stopDragging));
|
|
94
|
+
}
|
|
95
|
+
disableDragging() {
|
|
96
|
+
this.scrollContainer.removeEventListener('mousedown', this.startDragging);
|
|
97
|
+
this.scrollContainer.removeEventListener('mousemove', this.performDragging);
|
|
98
|
+
['mouseup', 'mouseleave'].forEach(event => this.scrollContainer.removeEventListener(event, this.stopDragging));
|
|
99
|
+
}
|
|
49
100
|
updateVisibility() {
|
|
50
101
|
if (!this.scrollContainer)
|
|
51
102
|
return;
|
|
@@ -55,7 +106,8 @@ export class PtcScrollButton {
|
|
|
55
106
|
this.isVisible = scrollLeft > 0;
|
|
56
107
|
}
|
|
57
108
|
else if (this.direction === 'right') {
|
|
58
|
-
this.isVisible = scrollLeft + clientWidth < scrollWidth;
|
|
109
|
+
this.isVisible = scrollLeft + clientWidth + 1 < scrollWidth; // "+1" adjustments after adding margin-right 40px
|
|
110
|
+
// console.log('scorllLeft: ' + scrollLeft + ", scrollWidth: " + scrollWidth + ", clientWidth: " + clientWidth);
|
|
59
111
|
}
|
|
60
112
|
}
|
|
61
113
|
else if (this.orientation === 'vertical') {
|
|
@@ -68,7 +120,7 @@ export class PtcScrollButton {
|
|
|
68
120
|
}
|
|
69
121
|
}
|
|
70
122
|
render() {
|
|
71
|
-
return (h(Host,
|
|
123
|
+
return (h(Host, { "is-dragging": this.isDragging }, this.styles && h("style", null, this.styles), this.isVisible && (h("button", { id: this.trackerId, onClick: this.handleClick, class: `scroll-btn ${this.direction}`, "aria-label": this.direction, tabindex: "0" }, this.direction === 'left' && h("icon-asset", { name: "left-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'right' && h("icon-asset", { name: "right-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'up' && '▲', this.direction === 'down' && '▼'))));
|
|
72
124
|
}
|
|
73
125
|
static get is() { return "ptc-scroll-button"; }
|
|
74
126
|
static get encapsulation() { return "shadow"; }
|
|
@@ -187,12 +239,51 @@ export class PtcScrollButton {
|
|
|
187
239
|
},
|
|
188
240
|
"attribute": "styles",
|
|
189
241
|
"reflect": false
|
|
242
|
+
},
|
|
243
|
+
"isDragging": {
|
|
244
|
+
"type": "boolean",
|
|
245
|
+
"mutable": true,
|
|
246
|
+
"complexType": {
|
|
247
|
+
"original": "boolean",
|
|
248
|
+
"resolved": "boolean",
|
|
249
|
+
"references": {}
|
|
250
|
+
},
|
|
251
|
+
"required": false,
|
|
252
|
+
"optional": false,
|
|
253
|
+
"docs": {
|
|
254
|
+
"tags": [],
|
|
255
|
+
"text": ""
|
|
256
|
+
},
|
|
257
|
+
"attribute": "is-dragging",
|
|
258
|
+
"reflect": false,
|
|
259
|
+
"defaultValue": "false"
|
|
190
260
|
}
|
|
191
261
|
};
|
|
192
262
|
}
|
|
193
263
|
static get states() {
|
|
194
264
|
return {
|
|
195
|
-
"isVisible": {}
|
|
265
|
+
"isVisible": {},
|
|
266
|
+
"isMouseDown": {}
|
|
267
|
+
};
|
|
268
|
+
}
|
|
269
|
+
static get methods() {
|
|
270
|
+
return {
|
|
271
|
+
"checkVisibility": {
|
|
272
|
+
"complexType": {
|
|
273
|
+
"signature": "() => Promise<void>",
|
|
274
|
+
"parameters": [],
|
|
275
|
+
"references": {
|
|
276
|
+
"Promise": {
|
|
277
|
+
"location": "global"
|
|
278
|
+
}
|
|
279
|
+
},
|
|
280
|
+
"return": "Promise<void>"
|
|
281
|
+
},
|
|
282
|
+
"docs": {
|
|
283
|
+
"text": "",
|
|
284
|
+
"tags": []
|
|
285
|
+
}
|
|
286
|
+
}
|
|
196
287
|
};
|
|
197
288
|
}
|
|
198
289
|
}
|
|
@@ -109,10 +109,20 @@ ptc-link, ptc-square-card,
|
|
|
109
109
|
background-color: var(--color-gray-09);
|
|
110
110
|
transition: none;
|
|
111
111
|
}
|
|
112
|
+
:host ul li a:focus-visible {
|
|
113
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
114
|
+
border: 2px solid white;
|
|
115
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
116
|
+
}
|
|
112
117
|
@media only screen and (min-width: 992px) {
|
|
113
118
|
:host ul li a {
|
|
114
119
|
padding: 4px;
|
|
115
120
|
width: 36px;
|
|
116
121
|
height: 36px;
|
|
117
122
|
}
|
|
123
|
+
}
|
|
124
|
+
:host ul.dark-bg a:focus-visible {
|
|
125
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
126
|
+
border: 2px solid white;
|
|
127
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
118
128
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Host, h } from '@stencil/core';
|
|
2
|
+
import { CheckDarkFocusState } from '../../utils/utils';
|
|
2
3
|
import instagramSVG from '../../media/svg-imgs/instagram.svg';
|
|
3
4
|
import facebookSVG from '../../media/svg-imgs/facebook.svg';
|
|
4
5
|
import linkedinSVG from '../../media/svg-imgs/linkedin.svg';
|
|
@@ -35,14 +36,18 @@ export class PtcSocialIconsFooter {
|
|
|
35
36
|
this.weiboImageAlt = undefined;
|
|
36
37
|
this.youkuImageAlt = undefined;
|
|
37
38
|
this.target = undefined;
|
|
39
|
+
this.darkFocusState = false;
|
|
38
40
|
}
|
|
39
41
|
openModal(e) {
|
|
40
42
|
e.preventDefault();
|
|
41
43
|
const modal = this.hostElement.shadowRoot.querySelector('#QRModal');
|
|
42
44
|
modal.show = true;
|
|
43
45
|
}
|
|
46
|
+
componentWillLoad() {
|
|
47
|
+
CheckDarkFocusState(this, this.hostElement);
|
|
48
|
+
}
|
|
44
49
|
render() {
|
|
45
|
-
return (h(Host, null, h("slot", null), h("ul",
|
|
50
|
+
return (h(Host, null, h("slot", null), h("ul", { class: this.darkFocusState ? `dark-bg` : `standard-bg` }, this.instagramUrl && h("li", { id: "footerInstagramIconID" }, " ", h("a", { href: this.instagramUrl, title: this.instagramImageAlt, innerHTML: this.instagramImageUrl == "" ? instagramSVG : "", target: this.target }, this.instagramImageUrl != "" && h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt })), " "), this.facebookUrl && h("li", { id: "footerFacebookIconID" }, " ", h("a", { href: this.facebookUrl, title: this.facebookImageAlt, innerHTML: this.facebookImageUrl == "" ? facebookSVG : "", target: this.target }, this.facebookImageUrl != "" && h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt })), " "), this.linkedinUrl && h("li", { id: "footerLinkedInIconID" }, " ", h("a", { href: this.linkedinUrl, title: this.linkedinImageAlt, innerHTML: this.linkedinImageUrl == "" ? linkedinSVG : "", target: this.target }, this.linkedinImageUrl != "" && h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt })), " "), this.xUrl && h("li", { id: "footerXIconID" }, " ", h("a", { href: this.xUrl, title: this.xImageAlt, innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && h("img", { src: this.xImageUrl, alt: this.xImageAlt, "aria-label": "X, formerly Twitter" })), " "), this.youtubeUrl && h("li", { id: "footerYouTubeIconID" }, " ", h("a", { href: this.youtubeUrl, title: this.youtubeImageAlt, innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt })), " "), this.weiboUrl && h("li", { id: "footerWeiboIconID" }, " ", h("a", { href: this.weiboUrl, title: this.weiboImageAlt, innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && h("img", { src: this.weiboImageUrl, alt: this.weiboImageAlt })), " "), this.youkuUrl && h("li", { id: "footerYouKuIconID" }, " ", h("a", { href: this.youkuUrl, title: this.youkuImageAlt, innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt })), " "), this.wechatQrImageUrl && h("li", { id: "footerWeChatIconID" }, " ", h("a", { href: "#", onClick: (Event) => { this.openModal(Event); }, title: this.wechatImageAlt != "" ? this.wechatImageAlt : "WeChat", innerHTML: this.wechatImageUrl == "" ? wechatSVG : "" }, this.wechatImageUrl != "" && h("img", { src: this.wechatImageUrl, alt: this.wechatImageAlt })), " ")), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: '.wrapper .modal-popup .modal-body { padding-bottom: 40px}' }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": '250', "image-alignment": 'center', styles: 'img{margin:auto}' }))));
|
|
46
51
|
}
|
|
47
52
|
static get is() { return "ptc-social-icons-footer"; }
|
|
48
53
|
static get encapsulation() { return "shadow"; }
|
|
@@ -499,6 +504,24 @@ export class PtcSocialIconsFooter {
|
|
|
499
504
|
},
|
|
500
505
|
"attribute": "target",
|
|
501
506
|
"reflect": false
|
|
507
|
+
},
|
|
508
|
+
"darkFocusState": {
|
|
509
|
+
"type": "boolean",
|
|
510
|
+
"mutable": false,
|
|
511
|
+
"complexType": {
|
|
512
|
+
"original": "boolean",
|
|
513
|
+
"resolved": "boolean",
|
|
514
|
+
"references": {}
|
|
515
|
+
},
|
|
516
|
+
"required": false,
|
|
517
|
+
"optional": false,
|
|
518
|
+
"docs": {
|
|
519
|
+
"tags": [],
|
|
520
|
+
"text": "Add dark-focus-state property where button is present on dark backgrounds"
|
|
521
|
+
},
|
|
522
|
+
"attribute": "dark-focus-state",
|
|
523
|
+
"reflect": false,
|
|
524
|
+
"defaultValue": "false"
|
|
502
525
|
}
|
|
503
526
|
};
|
|
504
527
|
}
|
|
@@ -82,23 +82,38 @@ a:focus-visible {
|
|
|
82
82
|
border-radius: var(--ptc-border-radius-standard);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
85
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
|
|
86
86
|
color: var(--color-blue-04);
|
|
87
|
+
margin: -2px;
|
|
88
|
+
border: 2px solid transparent;
|
|
87
89
|
}
|
|
88
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
90
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
|
|
89
91
|
color: var(--color-blue-06);
|
|
90
92
|
}
|
|
91
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
93
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
92
94
|
transition: none;
|
|
93
95
|
color: var(--color-blue-07);
|
|
94
96
|
}
|
|
95
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
97
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
96
98
|
color: var(--color-blue-05);
|
|
97
99
|
}
|
|
98
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
100
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
|
|
99
101
|
color: var(--color-gray-04) !important;
|
|
100
102
|
cursor: not-allowed;
|
|
101
103
|
}
|
|
104
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
|
|
105
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
106
|
+
border: 2px solid white;
|
|
107
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
108
|
+
}
|
|
109
|
+
.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
|
|
110
|
+
border: 2px solid transparent;
|
|
111
|
+
}
|
|
112
|
+
.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
|
|
113
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
114
|
+
border: 2px solid white;
|
|
115
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
116
|
+
}
|
|
102
117
|
|
|
103
118
|
.ptc-link {
|
|
104
119
|
color: var(--color-gray-10);
|
|
@@ -82,23 +82,38 @@ a:focus-visible {
|
|
|
82
82
|
border-radius: var(--ptc-border-radius-standard);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
85
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
|
|
86
86
|
color: var(--color-blue-04);
|
|
87
|
+
margin: -2px;
|
|
88
|
+
border: 2px solid transparent;
|
|
87
89
|
}
|
|
88
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
90
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
|
|
89
91
|
color: var(--color-blue-06);
|
|
90
92
|
}
|
|
91
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
93
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
92
94
|
transition: none;
|
|
93
95
|
color: var(--color-blue-07);
|
|
94
96
|
}
|
|
95
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
97
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
96
98
|
color: var(--color-blue-05);
|
|
97
99
|
}
|
|
98
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
100
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
|
|
99
101
|
color: var(--color-gray-04) !important;
|
|
100
102
|
cursor: not-allowed;
|
|
101
103
|
}
|
|
104
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
|
|
105
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
106
|
+
border: 2px solid white;
|
|
107
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
108
|
+
}
|
|
109
|
+
.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
|
|
110
|
+
border: 2px solid transparent;
|
|
111
|
+
}
|
|
112
|
+
.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
|
|
113
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
114
|
+
border: 2px solid white;
|
|
115
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
116
|
+
}
|
|
102
117
|
|
|
103
118
|
.ptc-link {
|
|
104
119
|
color: var(--color-gray-10);
|
|
@@ -5659,23 +5659,38 @@ a:focus-visible {
|
|
|
5659
5659
|
border-radius: var(--ptc-border-radius-standard);
|
|
5660
5660
|
}
|
|
5661
5661
|
|
|
5662
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
|
|
5662
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
|
|
5663
5663
|
color: var(--color-blue-04);
|
|
5664
|
+
margin: -2px;
|
|
5665
|
+
border: 2px solid transparent;
|
|
5664
5666
|
}
|
|
5665
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
|
|
5667
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
|
|
5666
5668
|
color: var(--color-blue-06);
|
|
5667
5669
|
}
|
|
5668
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
5670
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
|
|
5669
5671
|
transition: none;
|
|
5670
5672
|
color: var(--color-blue-07);
|
|
5671
5673
|
}
|
|
5672
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
5674
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
|
|
5673
5675
|
color: var(--color-blue-05);
|
|
5674
5676
|
}
|
|
5675
|
-
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
|
|
5677
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
|
|
5676
5678
|
color: var(--color-gray-04) !important;
|
|
5677
5679
|
cursor: not-allowed;
|
|
5678
5680
|
}
|
|
5681
|
+
.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
|
|
5682
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
5683
|
+
border: 2px solid white;
|
|
5684
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
5685
|
+
}
|
|
5686
|
+
.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
|
|
5687
|
+
border: 2px solid transparent;
|
|
5688
|
+
}
|
|
5689
|
+
.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
|
|
5690
|
+
border-radius: var(--ptc-border-radius-standard);
|
|
5691
|
+
border: 2px solid white;
|
|
5692
|
+
outline: 5px solid var(--keyboard-nav-outline);
|
|
5693
|
+
}
|
|
5679
5694
|
|
|
5680
5695
|
.ptc-link {
|
|
5681
5696
|
color: var(--color-gray-10);
|