diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index 6538e4be0..77e0c64ab 100644 --- a/blocks/accordion/accordion.css +++ b/blocks/accordion/accordion.css @@ -1,45 +1,45 @@ .accordion { - background: #EFEFEF; - border: 1px solid #ddd; - border-radius: 6px; + background: #efefef; + border: 1px solid #ddd; + border-radius: 6px; } .item-title { - cursor: pointer; - padding: 12px; - border-bottom: 1px solid #ddd; - display: flex; - justify-content: space-between; - align-items: center; + cursor: pointer; + padding: 12px; + border-bottom: 1px solid #ddd; + display: flex; + justify-content: space-between; + align-items: center; } .item-title::after { - width: 10px; - height: 10px; - border-bottom: 2px solid #a7a7a7; - border-right: 2px solid #a7a7a7; - transform-origin: 75% 75%; - transform: rotate(-45deg) translateY(-50%); - transition: transform .1s ease; - content: ''; + width: 10px; + height: 10px; + border-bottom: 2px solid #a7a7a7; + border-right: 2px solid #a7a7a7; + transform-origin: 75% 75%; + transform: rotate(-45deg) translateY(-50%); + transition: transform 0.1s ease; + content: ""; } .item-title.open { - background: #ddd; + background: #ddd; } .item-title.open::after { - transform: rotate(-135deg) translateX(50%); + transform: rotate(-135deg) translateX(50%); } .item-content { - display: none; - grid-template-columns: 1fr 1fr; - gap: 12px; - padding: 12px; - border-bottom: 1px solid #ddd; + display: none; + grid-template-columns: 1fr 1fr; + gap: 12px; + padding: 12px; + border-bottom: 1px solid #ddd; } .item-title.open + .item-content { - display: grid; -} \ No newline at end of file + display: grid; +} diff --git a/blocks/author-box/author-box.css b/blocks/author-box/author-box.css index 36a01ac3b..45ccc9688 100644 --- a/blocks/author-box/author-box.css +++ b/blocks/author-box/author-box.css @@ -1,122 +1,122 @@ /* author box */ main .author-box-container { - padding-top: 0; + padding-top: 0; } main .author-box-container > div { - max-width: unset; - padding: 0; - margin: 0 auto; - } - - main .author-box { - visibility: unset; - max-width: unset; - } + max-width: unset; + padding: 0; + margin: 0 auto; +} - main .author-box-info { - display: flex; - flex-wrap: wrap; - align-items: center; - margin-top: 40px; - margin-bottom: 40px; - padding: 0 2rem; - } +main .author-box { + visibility: unset; + max-width: unset; +} - main .author-box-info .sharing-details { - margin-left: auto; - } - - main .author-box-info .blog-author-image, - main .author-box-info .blog-author-image img { - flex: 0 0 64px; - margin: 0; - margin-right: 16px; - height: 64px; - width: 64px; - border-radius: 50%; - object-fit: cover; - } +main .author-box-info { + display: flex; + flex-wrap: wrap; + align-items: center; + margin-top: 40px; + margin-bottom: 40px; + padding: 0 2rem; +} - main .author-box-info .blog-author-name { - margin-bottom: 0; - } +main .author-box-info .sharing-details { + margin-left: auto; +} - main .author-box-info a { - text-decoration: none; - cursor: pointer; - } +main .author-box-info .blog-author-image, +main .author-box-info .blog-author-image img { + flex: 0 0 64px; + margin: 0; + margin-right: 16px; + height: 64px; + width: 64px; + border-radius: 50%; + object-fit: cover; +} + +main .author-box-info .blog-author-name { + margin-bottom: 0; +} + +main .author-box-info a { + text-decoration: none; + cursor: pointer; +} - main .author-box-info p, - main .author-box-info p a { - margin: 0; +main .author-box-info p, +main .author-box-info p a { + margin: 0; +} + +main .author-box-info .sharing-details svg { + width: 40px; + height: 40px; +} + +main .author-box-info .blog-author-blurb { + font-style: italic; + color: grey; + padding-left: 15px; + display: none; +} + +main .author-box-info .publication-date-invalid { + display: none; +} + +@media (width >= 600px) { + main .author-box { + margin-left: auto; + margin-right: auto; + padding-left: 0; + padding-right: 0; } - main .author-box-info .sharing-details svg { - width: 40px; - height: 40px; + main .author-box .author-box-info { + max-width: 900px; + margin-left: auto; + margin-right: auto; } main .author-box-info .blog-author-blurb { - font-style: italic; - color: grey; - padding-left: 15px; - display: none; + max-width: 290px; + margin-left: 10px; + border-left: 1px solid grey; + display: block; + font-size: 15px; } - main .author-box-info .publication-date-invalid { - display: none; + main .author-box-info .blog-author-details { + font-size: 16px; } +} - @media (width >= 600px) { - main .author-box { - margin-left: auto; - margin-right: auto; - padding-left: 0; - padding-right: 0; - } - - main .author-box .author-box-info { - max-width: 900px; - margin-left: auto; - margin-right: auto; - } - - main .author-box-info .blog-author-blurb { - max-width: 290px; - margin-left: 10px; - border-left: 1px solid grey; - display: block; - font-size: 15px; - } - - main .author-box-info .blog-author-details { - font-size: 16px; - } +@media (width >= 768px) { + main .author-box-info .blog-author-blurb { + max-width: 380px; + margin-left: 20px; + font-size: 18px; } - @media (width >= 768px) { - main .author-box-info .blog-author-blurb { - max-width: 380px; - margin-left: 20px; - font-size: 18px; - } - - main .author-box-info .blog-author-details { - font-size: 18px; - } + main .author-box-info .blog-author-details { + font-size: 18px; } +} - @media (width >= 900px) { - main .author-box-info .blog-author-blurb { - max-width: 450px; - font-size: 20px; - margin-left: 30px; - padding-left: 30px; - } - - main .author-box-info .blog-author-details { - font-size: 20px; - } +@media (width >= 900px) { + main .author-box-info .blog-author-blurb { + max-width: 450px; + font-size: 20px; + margin-left: 30px; + padding-left: 30px; + } + + main .author-box-info .blog-author-details { + font-size: 20px; } +} diff --git a/blocks/availability/availability.css b/blocks/availability/availability.css index 8893497bc..1fe6244f1 100644 --- a/blocks/availability/availability.css +++ b/blocks/availability/availability.css @@ -37,7 +37,7 @@ stroke: var(--brand-color-purple); stroke-width: 0; fill: var(--brand-color-purple); - transition: fill .2s, stroke .2s, stroke-width .2s; + transition: fill 0.2s, stroke 0.2s, stroke-width 0.2s; cursor: context-menu; } @@ -60,7 +60,7 @@ font-size: var(--type-detail-m-size); line-height: var(--type-detail-m-lh); opacity: 1; - transition: opacity .4s; + transition: opacity 0.4s; } @media (width >= 900px) { @@ -86,7 +86,7 @@ } .availability .tooltip::after { - content: ''; + content: ""; position: absolute; left: 50%; bottom: -6px; @@ -116,6 +116,6 @@ border-right: 0; } -.availability .tooltip[aria-hidden='true'] { +.availability .tooltip[aria-hidden="true"] { opacity: 0; } diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css index fe94f8145..22321e1ae 100644 --- a/blocks/card-list/card-list.css +++ b/blocks/card-list/card-list.css @@ -1,58 +1,58 @@ .card-list > ul { - list-style: none; - margin: 0; - padding: 24px 0; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - grid-gap: 16px; - } - - .card-list > ul > li { - border: 1px solid var(--highlight-background-color); - background-color: var(--background-color) - } + list-style: none; + margin: 0; + padding: 24px 0; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-gap: 16px; +} - .card-list > ul > li > a { - text-decoration: none; - display: block; - } - - .card-list .cards-card-body { - font-size: var(--body-font-size-s); - } - - .card-list .cards-card-image { - width: 100%; - aspect-ratio: 4 / 3; - line-height: 0; - border-radius: var(--image-border-radius-l); - overflow: hidden; - - /* fix for safari overflow with border-radius not working */ - isolation: isolate; - } - - .card-list.cards-card-body > *:first-child { - margin-top: 0; - } - - .card-list > ul > li img { - width: 100%; - height: 100%; - object-fit: cover; - transition: var(--transition-ease-in-out); - } +.card-list > ul > li { + border: 1px solid var(--highlight-background-color); + background-color: var(--background-color); +} - .card-list .card-wrapper:hover img{ - transform: scale(1.07); - } +.card-list > ul > li > a { + text-decoration: none; + display: block; +} - .card-list .cards-card-body h3 { - font-size: var(--type-heading-m-size); - line-height: var(--type-heading-m-lh); - margin-top: var(--spacing-s); - margin-bottom: var(--spacing-xs); - } +.card-list .cards-card-body { + font-size: var(--body-font-size-s); +} + +.card-list .cards-card-image { + width: 100%; + aspect-ratio: 4 / 3; + line-height: 0; + border-radius: var(--image-border-radius-l); + overflow: hidden; + + /* fix for safari overflow with border-radius not working */ + isolation: isolate; +} + +.card-list.cards-card-body > *:first-child { + margin-top: 0; +} + +.card-list > ul > li img { + width: 100%; + height: 100%; + object-fit: cover; + transition: var(--transition-ease-in-out); +} + +.card-list .card-wrapper:hover img { + transform: scale(1.07); +} + +.card-list .cards-card-body h3 { + font-size: var(--type-heading-m-size); + line-height: var(--type-heading-m-lh); + margin-top: var(--spacing-s); + margin-bottom: var(--spacing-xs); +} @media screen and (width >= 768px) { .card-list .cards-card-body h3 { @@ -69,12 +69,12 @@ } /* block party card list style */ -.card-list-wrapper .cards .cards-card-details p.description:not(.noextra){ +.card-list-wrapper .cards .cards-card-details p.description:not(.noextra) { cursor: pointer; } .card-list-wrapper .cards .cards-card-details p.description:not([aria-expanded="true"], .noextra)::after { - content: '...'; + content: "..."; } .card-list-wrapper .cards .cards-card-details span.extra:not([aria-expanded="true"]) { @@ -102,4 +102,4 @@ .cards-wrapper .category-filter-wrapper select { font-size: var(--type-body-l-size); max-width: 20rem; -} \ No newline at end of file +} diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index c906aabb5..69b6b862b 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -1,121 +1,122 @@ .cards { - padding: 0; - margin: 2rem 0; + padding: 0; + margin: 2rem 0; } .cards > div { - display: flex; - flex-wrap: wrap; - max-width: 1200px; - justify-content: center; - margin: 0 auto; - text-align: left; + display: flex; + flex-wrap: wrap; + max-width: 1200px; + justify-content: center; + margin: 0 auto; + text-align: left; } .cards.four > div { - justify-content: left; + justify-content: left; } .cards > div:last-of-type { - justify-content: left; + justify-content: left; } .cards a:any-link { - color: currentcolor; - font-size: var(--type-heading-m-size); - line-height: var(--type-heading-m-lh); - text-decoration: none; - display: block; - position: relative; + color: currentcolor; + font-size: var(--type-heading-m-size); + line-height: var(--type-heading-m-lh); + text-decoration: none; + display: block; + position: relative; } .cards a:any-link::after { - content: '❯'; - position: absolute; - right: 0; - transition: all 0.3s ease-in-out; + content: "❯"; + position: absolute; + right: 0; + transition: all 0.3s ease-in-out; } .cards a:hover:any-link::after { - color: var(--spectrum-blue); - transform: translateX(3px); + color: var(--spectrum-blue); + transform: translateX(3px); } .cards .cards-card { - width: 100%; - box-sizing: border-box; - margin: 0.5rem; - background: var(--bg-color-lightgrey); - min-height: 160px; - opacity: 0; - transform: translate(0, 50px); - transition: transform 0.5s ease-out, opacity 1s; - position: relative; + width: 100%; + box-sizing: border-box; + margin: 0.5rem; + background: var(--bg-color-lightgrey); + min-height: 160px; + opacity: 0; + transform: translate(0, 50px); + transition: transform 0.5s ease-out, opacity 1s; + position: relative; } .cards .cards-card::after { - content: ''; - position: absolute; - z-index: -1; - inset: 0; - opacity: 0; - box-shadow: 0 2px 6px rgb(0 0 0 / 20%); - transition: opacity 0.3s ease-in-out; + content: ""; + position: absolute; + z-index: -1; + inset: 0; + opacity: 0; + box-shadow: 0 2px 6px rgb(0 0 0 / 20%); + transition: opacity 0.3s ease-in-out; } .cards .cards-card.enter { - opacity: 1; - transform: translate(0, 0); + opacity: 1; + transform: translate(0, 0); } .cards .cards-card.enter:hover { - transform: scale(calc(100% + 1rem), calc(100% + 1rem)) translate(0, 0); + transform: scale(calc(100% + 1rem), calc(100% + 1rem)) translate(0, 0); } /* Fade in the pseudo-element with the bigger shadow */ .cards .cards-card:hover::after { - opacity: 1; + opacity: 1; } - .section.dark .cards .cards-card { - background-color: #555; + background-color: #555; } .section.light .cards .cards-card { - background-color: #ddd; + background-color: #ddd; } .cards .cards-card-highlight { - background: var(--highlight-gradient); + background: var(--highlight-gradient); } .cards .cards-card-details { - padding: 1rem 1rem 1.5rem; + padding: 1rem 1rem 1.5rem; } .cards .cards-card-details p:last-of-type { - margin-bottom: 0; + margin-bottom: 0; } .cards .block-party-card-title { - display: flex; - flex-direction: row; - justify-content: space-between; + display: flex; + flex-direction: row; + justify-content: space-between; } @media (width >= 900px) { - .cards.two .cards-card, .cards.three .cards-card, .cards.four .cards-card { - width: calc(50% - 1rem); - } + .cards.two .cards-card, + .cards.three .cards-card, + .cards.four .cards-card { + width: calc(50% - 1rem); + } } @media (width >= 1200px) { - .cards.three .cards-card { - width: calc(33% - 1rem); - } + .cards.three .cards-card { + width: calc(33% - 1rem); + } - .cards.four .cards-card { - width: calc(25% - 1rem); - } + .cards.four .cards-card { + width: calc(25% - 1rem); + } } diff --git a/blocks/copy/copy.css b/blocks/copy/copy.css index 04321ef3f..3898f27f2 100644 --- a/blocks/copy/copy.css +++ b/blocks/copy/copy.css @@ -1,64 +1,64 @@ .copy { - background: var(--highlight-gradient); - border-radius: 25px; - padding: 20px 30px; - color: white; - margin: 64px 0; + background: var(--highlight-gradient); + border-radius: 25px; + padding: 20px 30px; + color: white; + margin: 64px 0; } .copy:empty { - display: none; + display: none; } .copy p { - margin: 0; - line-height: 1em; - font-size: var(--type-body-xxs-size); + margin: 0; + line-height: 1em; + font-size: var(--type-body-xxs-size); } .copy > div { - display: flex; - flex-direction: column; - margin: 30px 0; + display: flex; + flex-direction: column; + margin: 30px 0; } .copy > div > span { - font-size: var(--type-body-xs-size); + font-size: var(--type-body-xs-size); } .copy > div > input { - border-radius: 5px; - padding: 5px 10px; - border: 0; - margin: 0 0 10px; + border-radius: 5px; + padding: 5px 10px; + border: 0; + margin: 0 0 10px; } .copy > div > button { - color: white; - border-radius: 20px; - background-color: unset; - border: 2px solid white; - padding: 5px 20px; + color: white; + border-radius: 20px; + background-color: unset; + border: 2px solid white; + padding: 5px 20px; } @media (width >= 900px) { - .copy > div { - flex-direction: unset; - justify-content: stretch; - margin: 30px 0; - } + .copy > div { + flex-direction: unset; + justify-content: stretch; + margin: 30px 0; + } + + .copy > div > span { + flex: 1 1 200px; + } - .copy > div > span { - flex: 1 1 200px; - } - - .copy > div > input { - flex: 1 1 100%; - margin: unset; - } - - .copy > div > button { - margin-left: 40px; - flex: 1 1 60px; - } -} \ No newline at end of file + .copy > div > input { + flex: 1 1 100%; + margin: unset; + } + + .copy > div > button { + margin-left: 40px; + flex: 1 1 60px; + } +} diff --git a/blocks/deprecation/deprecation.css b/blocks/deprecation/deprecation.css index 871da38e3..90af8a422 100644 --- a/blocks/deprecation/deprecation.css +++ b/blocks/deprecation/deprecation.css @@ -23,4 +23,4 @@ .deprecation code { background-color: rgba(255 255 255 / 20%); border: none; -} \ No newline at end of file +} diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css index 299031752..9792ea29c 100644 --- a/blocks/embed/embed.css +++ b/blocks/embed/embed.css @@ -1,14 +1,14 @@ .gist .gist-file.gist-file { - margin: 12px 0; + margin: 12px 0; } .youtube-wrapper { - width: 100%; - height: 0; - position: relative; - padding-bottom: 56.25%; + width: 100%; + height: 0; + position: relative; + padding-bottom: 56.25%; } .gist .gist-meta a { - font-size: 12px; -} \ No newline at end of file + font-size: 12px; +} diff --git a/blocks/faq/faq.css b/blocks/faq/faq.css index cbe6d8a54..7f0ecff82 100644 --- a/blocks/faq/faq.css +++ b/blocks/faq/faq.css @@ -1,20 +1,20 @@ main .faq dt { - margin-top: var(--spacing-m); - font-weight: 700; - margin-bottom: var(--spacing-xxs); - scroll-margin: calc(var(--nav-height) + var(--breadcrumb-height)); + margin-top: var(--spacing-m); + font-weight: 700; + margin-bottom: var(--spacing-xxs); + scroll-margin: calc(var(--nav-height) + var(--breadcrumb-height)); } main .faq dt > a { - font-size: var(--type-heading-s-size); - line-height: var(--type-heading-s-lh); + font-size: var(--type-heading-s-size); + line-height: var(--type-heading-s-lh); } main .faq dd { - font-size: var(--type-body-s-size); - line-height: var(--type-body-s-lh); + font-size: var(--type-body-s-size); + line-height: var(--type-body-s-lh); } body.guides-template main .faq dt a.anchor-link:any-link::before { - top: 0; -} \ No newline at end of file + top: 0; +} diff --git a/blocks/feature-list/feature-list.css b/blocks/feature-list/feature-list.css index 6cbfd4b82..d26a378ca 100644 --- a/blocks/feature-list/feature-list.css +++ b/blocks/feature-list/feature-list.css @@ -1,64 +1,65 @@ .feature-list { - background: #F5F5F5; - padding: var(--spacing-xxl) 0; - color: rgb(63 63 63); + background: #f5f5f5; + padding: var(--spacing-xxl) 0; + color: rgb(63 63 63); } .feature-list.contained > div { - max-width: var(--grid-mobile-container-width); - margin: 0 auto; + max-width: var(--grid-mobile-container-width); + margin: 0 auto; } .feature-list > div:last-of-type { - display: grid; - grid-template-columns: 1fr; - grid-template-areas: "image" - "copy"; - grid-gap: var(--spacing-s); - align-items: center; + display: grid; + grid-template-columns: 1fr; + grid-template-areas: + "image" + "copy"; + grid-gap: var(--spacing-s); + align-items: center; } .feature-list h2 { - text-align: center; - margin-bottom: var(--spacing-s); + text-align: center; + margin-bottom: var(--spacing-s); } .feature-list > div:last-of-type > div:first-of-type { - grid-area: copy; + grid-area: copy; } .feature-list > div:last-of-type > div:last-of-type { - grid-area: image; + grid-area: image; } .feature-list ul { - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } .feature-list li { - padding-bottom: var(--spacing-xs); + padding-bottom: var(--spacing-xs); } .feature-list li:last-of-type { - padding-bottom: 0; + padding-bottom: 0; } .feature-list img { - max-width: 100%; + max-width: 100%; } @media screen and (width >= 1200px) { - .feature-list > div:last-of-type { - grid-template-columns: 1fr 1fr; - grid-template-areas: "copy image"; - grid-gap: var(--spacing-xxl); - } + .feature-list > div:last-of-type { + grid-template-columns: 1fr 1fr; + grid-template-areas: "copy image"; + grid-gap: var(--spacing-xxl); + } } @media screen and (width >= 1440px) { - .feature-list.contained > div { - max-width: var(--grid-desktop-container-width); - } -} \ No newline at end of file + .feature-list.contained > div { + max-width: var(--grid-desktop-container-width); + } +} diff --git a/blocks/form/form.css b/blocks/form/form.css index 62bfb259e..6a1e2137c 100644 --- a/blocks/form/form.css +++ b/blocks/form/form.css @@ -63,7 +63,7 @@ main .form .form-checkbox-wrapper { margin: var(--spacing-xs) 0; } -main .form .form-checkbox-wrapper input[type='checkbox'] { +main .form .form-checkbox-wrapper input[type="checkbox"] { appearance: none; /* stylelint-disable */ @@ -80,22 +80,22 @@ main .form .form-checkbox-wrapper input[type='checkbox'] { margin-left: 0; } -main .form .form-checkbox-wrapper input[type='checkbox']::after { +main .form .form-checkbox-wrapper input[type="checkbox"]::after { display: block; position: absolute; top: 0; left: 0; height: 20px; width: 20px; - content: ' '; - background: url('./checkbox.svg'); + content: " "; + background: url("./checkbox.svg"); background-size: contain; } -main .form .form-checkbox-wrapper input[type='checkbox']:checked::after { - background: url('./checkbox-checked.svg'); +main .form .form-checkbox-wrapper input[type="checkbox"]:checked::after { + background: url("./checkbox-checked.svg"); background-size: contain; - content: ' '; + content: " "; } main .form .form-checkbox-wrapper label { @@ -119,7 +119,7 @@ main .form button { main .form { padding: var(--spacing-ml); } - + main .form .field-wrapper { display: flex; } @@ -127,4 +127,4 @@ main .form button { main .form label { width: 72%; } -} \ No newline at end of file +} diff --git a/blocks/get-started/get-started.css b/blocks/get-started/get-started.css index 041eff291..e09db9e14 100644 --- a/blocks/get-started/get-started.css +++ b/blocks/get-started/get-started.css @@ -1,13 +1,13 @@ .get-started { - background: linear-gradient(45deg, rgb(0 0 0 / 100%) 0%, rgb(38 18 57 / 100%) 42%, rgb(154 26 10 / 100%) 100%); - color: #FFF; - padding: var(--spacing-xxl) 0; - text-align: center; + background: linear-gradient(45deg, rgb(0 0 0 / 100%) 0%, rgb(38 18 57 / 100%) 42%, rgb(154 26 10 / 100%) 100%); + color: white; + padding: var(--spacing-xxl) 0; + text-align: center; } .get-started > div { - max-width: 83.4%; - margin: 0 auto; + max-width: 83.4%; + margin: 0 auto; } .get-started > div + div > div:not(:last-of-type) { @@ -15,39 +15,39 @@ } .get-started h2 { - margin-bottom: var(--spacing-l); + margin-bottom: var(--spacing-l); } .get-started h3 { - margin-bottom: var(--spacing-s); + margin-bottom: var(--spacing-s); } .get-started p { - margin: 0 0 6px; + margin: 0 0 6px; } .get-started a { - color: #FFF; + color: white; } .get-started img, .get-started svg { - max-width: 128px; + max-width: 128px; } @media (width >= 900px) { - .get-started > div:last-of-type { - display: grid; - grid-template-columns: 1fr 1fr; - } + .get-started > div:last-of-type { + display: grid; + grid-template-columns: 1fr 1fr; + } - .get-started > div + div > div:not(:last-of-type) { - margin: 0; - } + .get-started > div + div > div:not(:last-of-type) { + margin: 0; + } } @media (width >= 1440px) { - .get-started > div { - max-width: 1200px; - } -} \ No newline at end of file + .get-started > div { + max-width: 1200px; + } +} diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 5d5481315..513df2467 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -1,258 +1,258 @@ .hero { - width: 100%; - position: relative; - overflow: hidden; - padding: var(--spacing-xxl) 0; - padding-bottom: 0; - max-height: 800px; + width: 100%; + position: relative; + overflow: hidden; + padding: var(--spacing-xxl) 0; + padding-bottom: 0; + max-height: 800px; } .hero .checker-board-guide { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - background: var(--checkerboard-background); - background-size: var(--checkerboard-background-size); - z-index: 0; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + background: var(--checkerboard-background); + background-size: var(--checkerboard-background-size); + z-index: 0; } /* background image */ .background-image-wrapper { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - z-index: -1; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + z-index: -1; } .background-image-wrapper img { - width: 100%; - height: 100%; - object-fit: cover; + width: 100%; + height: 100%; + object-fit: cover; } /* text content */ .inner-content { - position: relative; - margin: 0 auto; - width: 100%; - max-width: var(--content-width); - text-align: center; - z-index: 2; + position: relative; + margin: 0 auto; + width: 100%; + max-width: var(--content-width); + text-align: center; + z-index: 2; } .inner-content h3 { - font-size: var(--type-body-l-size); - font-weight: 700; - letter-spacing: 1; - margin-bottom: var(--spacing-s); - color: var(--color-accent-blue); - text-transform: uppercase; - line-height: 100%; + font-size: var(--type-body-l-size); + font-weight: 700; + letter-spacing: 1; + margin-bottom: var(--spacing-s); + color: var(--color-accent-blue); + text-transform: uppercase; + line-height: 100%; } .inner-content h3.icon-eyebrow { - padding-bottom: 0; + padding-bottom: 0; } .inner-content h1 { - font-size: var(--type-heading-xxxl-size); - line-height: var(--type-heading-xxxl-lh); - margin-bottom: 0; + font-size: var(--type-heading-xxxl-size); + line-height: var(--type-heading-xxxl-lh); + margin-bottom: 0; } .inner-content > h1:last-of-type { - margin-bottom: var(--spacing-s); + margin-bottom: var(--spacing-s); } .inner-content p { - display: none; - width: 90vw; - max-width: 600px; - margin: var(--spacing-xs) auto; - line-height: 1.25; - font-size: var(--type-body-xs-size); + display: none; + width: 90vw; + max-width: 600px; + margin: var(--spacing-xs) auto; + line-height: 1.25; + font-size: var(--type-body-xs-size); } .inner-content strong { - background: var(--color-accent-highlight-yellow); + background: var(--color-accent-highlight-yellow); } .inner-content a.button:any-link { - margin-top: 0; - margin-bottom: max(var(--spacing-xl), 10vh); + margin-top: 0; + margin-bottom: max(var(--spacing-xl), 10vh); } /* default: image at bottom */ .image-wrapper { - position: relative; - z-index: 1; + position: relative; + z-index: 1; } .image-wrapper img { - display: block; - width: 80vw; - height: auto; - max-width: 800px; - margin: 0 auto; - margin-bottom: -10px; + display: block; + width: 80vw; + height: auto; + max-width: 800px; + margin: 0 auto; + margin-bottom: -10px; } @media screen and (width >= 600px) { - .inner-content p { - display: block; - line-height: 1.5; - font-size: var(--type-body-l-size); - } + .inner-content p { + display: block; + line-height: 1.5; + font-size: var(--type-body-l-size); + } - .inner-content a.button:any-link { - margin-bottom: var(--spacing-s); - } + .inner-content a.button:any-link { + margin-bottom: var(--spacing-s); + } } @media screen and (width >= 900px) { - .inner-content p { - margin-bottom: var(--spacing-m); - } + .inner-content p { + margin-bottom: var(--spacing-m); + } - .inner-content a.button:any-link { - margin-bottom: 0; - } + .inner-content a.button:any-link { + margin-bottom: 0; + } - .image-wrapper img { - margin-top: -2.5%; - } + .image-wrapper img { + margin-top: -2.5%; + } } /* - hero.side-by-side - */ .hero.side-by-side { - padding: var(--spacing-xxl) 0; + padding: var(--spacing-xxl) 0; } .hero.side-by-side .contained-wrapper { - display: grid; - grid-template-columns: 1fr; - width: 100%; - max-width: var(--grid-mobile-container-width); - margin: 0 auto; + display: grid; + grid-template-columns: 1fr; + width: 100%; + max-width: var(--grid-mobile-container-width); + margin: 0 auto; } .hero.side-by-side .inner-content { - text-align: left; - padding: var(--spacing-xl) 0; - padding-top: 0; + text-align: left; + padding: var(--spacing-xl) 0; + padding-top: 0; } .hero.side-by-side .inner-content h3 { - display: flex; - align-items: center; - margin-bottom: var(--spacing-xs); - color: var(--color-black); + display: flex; + align-items: center; + margin-bottom: var(--spacing-xs); + color: var(--color-black); } .hero.side-by-side .inner-content h3 span { - display: flex; - align-items: center; - margin-right: var(--spacing-xxs); + display: flex; + align-items: center; + margin-right: var(--spacing-xxs); } .hero.side-by-side .inner-content h1 { - width: 90%; - max-width: 500px; - line-height: 1; + width: 90%; + max-width: 500px; + line-height: 1; } .hero.side-by-side .image-wrapper img { - width: 100%; - height: auto; + width: 100%; + height: auto; } @media screen and (width >= 768px) { - .hero.side-by-side .contained-wrapper{ - width: 90vw; - grid-template-columns: 1fr 1fr; - max-width: var(--grid-desktop-container-width); - padding: 0 var(--spacing-s); - } - - .hero.side-by-side .inner-content { - display: flex; - flex-direction: column; - justify-content: center; - padding: var(--spacing-xxl) 0; - } - - .hero.side-by-side .image-wrapper { - display: flex; - flex-direction: column; - justify-content: center; - } - - .hero.side-by-side .inner-content h3 { - margin-bottom: var(--spacing-s); - } + .hero.side-by-side .contained-wrapper { + width: 90vw; + grid-template-columns: 1fr 1fr; + max-width: var(--grid-desktop-container-width); + padding: 0 var(--spacing-s); + } + + .hero.side-by-side .inner-content { + display: flex; + flex-direction: column; + justify-content: center; + padding: var(--spacing-xxl) 0; + } + + .hero.side-by-side .image-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + } + + .hero.side-by-side .inner-content h3 { + margin-bottom: var(--spacing-s); + } } @media screen and (width >= 900px) { - .hero.side-by-side .inner-content h1 { - font-size: var(--type-heading-xxl-size); - margin: var(--spacing-s) 0; - } + .hero.side-by-side .inner-content h1 { + font-size: var(--type-heading-xxl-size); + margin: var(--spacing-s) 0; + } } /* - hero.square-image - */ -.hero.square-image .image-wrapper img{ - width: 100%; - height: auto; - aspect-ratio: 1 / 1; - object-fit: cover; +.hero.square-image .image-wrapper img { + width: 100%; + height: auto; + aspect-ratio: 1 / 1; + object-fit: cover; } /* - hero.multiple-cta - */ .hero.multiple-cta ul.cta-button-list { - display: flex; - list-style: none; - padding-left: 0; - margin-top: 30px; + display: flex; + list-style: none; + padding-left: 0; + margin-top: 30px; } -.hero.multiple-cta ul.cta-button-list .button{ - margin-left: 0; - margin-bottom: 0; +.hero.multiple-cta ul.cta-button-list .button { + margin-left: 0; + margin-bottom: 0; } @media screen and (width >= 600px) { - .hero.multiple-cta ul.cta-button-list { - margin-top: 8px; - } + .hero.multiple-cta ul.cta-button-list { + margin-top: 8px; + } } @media screen and (width >= 900px) { - .hero.multiple-cta ul.cta-button-list { - margin-top: 16px; - } + .hero.multiple-cta ul.cta-button-list { + margin-top: 16px; + } } /* - hero.page-not-found */ .hero.page-not-found { - padding-bottom: var(--spacing-xxl); - min-height: 80vh; - max-height: 900px; - display: flex; - align-items: center; - justify-content: center; + padding-bottom: var(--spacing-xxl); + min-height: 80vh; + max-height: 900px; + display: flex; + align-items: center; + justify-content: center; } -.hero.page-not-found a.button:any-link{ - margin-bottom: var(--spacing-l); +.hero.page-not-found a.button:any-link { + margin-bottom: var(--spacing-l); } -.hero.page-not-found h2{ - font-size: var(--type-heading-xl-size); - line-height: var(--type-heading-xl-lh); - padding-bottom: var(--spacing-l); - width: 88vw; - max-width: 480px; - margin: 0 auto; -} \ No newline at end of file +.hero.page-not-found h2 { + font-size: var(--type-heading-xl-size); + line-height: var(--type-heading-xl-lh); + padding-bottom: var(--spacing-l); + width: 88vw; + max-width: 480px; + margin: 0 auto; +} diff --git a/blocks/labs/labs.css b/blocks/labs/labs.css index f13529215..1870ed0c5 100644 --- a/blocks/labs/labs.css +++ b/blocks/labs/labs.css @@ -27,4 +27,4 @@ z-index: 10; position: relative; text-align: center; -} \ No newline at end of file +} diff --git a/blocks/logo-wall/logo-wall.css b/blocks/logo-wall/logo-wall.css index 47679d0ab..0d858b409 100644 --- a/blocks/logo-wall/logo-wall.css +++ b/blocks/logo-wall/logo-wall.css @@ -1,83 +1,83 @@ .logo-wall { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: var(--spacing-xl) 0; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: var(--spacing-xl) 0; } .logo-wall .logo-wall-title { - max-width: 75vw; - text-align: center; - padding-bottom: var(--spacing-s); + max-width: 75vw; + text-align: center; + padding-bottom: var(--spacing-s); } .logo-wall .logo-wall-list { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: var(--spacing-s); - width: 100%; - max-width: 740px; - padding-inline-start: 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--spacing-s); + width: 100%; + max-width: 740px; + padding-inline-start: 0; } .logo-wall .logo-wall-list-item { - list-style-type: none; - display: flex; - justify-content: center; - align-items: center; - align-self: center; - height: 100%; + list-style-type: none; + display: flex; + justify-content: center; + align-items: center; + align-self: center; + height: 100%; } .logo-wall .logo-wall-list-item a { - transition: opacity .3s ease; + transition: opacity 0.3s ease; } .logo-wall .logo-wall-list-item a:hover { - opacity: 0.7; + opacity: 0.7; } .logo-wall .logo-wall-list-item img { - margin: 0 auto; - display: block; - width: 100%; - height: 100%; - max-width: 150px; - max-height: 54px; - object-fit: contain; + margin: 0 auto; + display: block; + width: 100%; + height: 100%; + max-width: 150px; + max-height: 54px; + object-fit: contain; } .logo-wall.meriative-height-adjustment .logo-wall-list-item img { - max-height: 80px; + max-height: 80px; } @media (width >= 900px) { - .logo-wall { - padding: var(--spacing-xxl) 0; - } + .logo-wall { + padding: var(--spacing-xxl) 0; + } - .logo-wall .logo-wall-title { - padding-bottom: var(--spacing-xl); - } + .logo-wall .logo-wall-title { + padding-bottom: var(--spacing-xl); + } - .logo-wall .logo-wall-list { - gap: var(--spacing-l) var(--spacing-xl); - max-width: 1200px; - } + .logo-wall .logo-wall-list { + gap: var(--spacing-l) var(--spacing-xl); + max-width: 1200px; + } - .logo-wall.technology .logo-wall-list { - max-width: 970px; - } + .logo-wall.technology .logo-wall-list { + max-width: 970px; + } - .logo-wall .logo-wall-list-item img { - max-width: clamp(180px, 20vw, 280px); - max-height: 63px; - } + .logo-wall .logo-wall-list-item img { + max-width: clamp(180px, 20vw, 280px); + max-height: 63px; + } - .logo-wall.meriative-height-adjustment .logo-wall-list-item img { - max-height: 96px; - } -} \ No newline at end of file + .logo-wall.meriative-height-adjustment .logo-wall-list-item img { + max-height: 96px; + } +} diff --git a/blocks/pagination/pagination.css b/blocks/pagination/pagination.css index f3059ed81..ba74e56b3 100644 --- a/blocks/pagination/pagination.css +++ b/blocks/pagination/pagination.css @@ -21,12 +21,12 @@ transition: all 0.3s ease-in-out; } -.pagination .column:hover{ +.pagination .column:hover { cursor: pointer; box-shadow: 0 0 15px var(--bg-color-grey); } -.pagination .column svg{ +.pagination .column svg { color: var(--spectrum-blue); } @@ -53,7 +53,7 @@ } .pagination .column p:first-of-type span { - display: flex; + display: flex; } .pagination .column p:last-of-type span { @@ -114,4 +114,4 @@ .pagination .column p a { font-size: var(--type-body-l-size); } -} \ No newline at end of file +} diff --git a/blocks/publication-time/publication-time.css b/blocks/publication-time/publication-time.css index 45e9434fd..4b6481218 100644 --- a/blocks/publication-time/publication-time.css +++ b/blocks/publication-time/publication-time.css @@ -2,4 +2,4 @@ margin-left: 1em; width: max-content; background-color: yellow; -} \ No newline at end of file +} diff --git a/blocks/questionnaire/questionnaire.css b/blocks/questionnaire/questionnaire.css index 5f9fd868e..8bdcff718 100644 --- a/blocks/questionnaire/questionnaire.css +++ b/blocks/questionnaire/questionnaire.css @@ -36,7 +36,7 @@ overflow: hidden; white-space: nowrap; cursor: pointer; - transition: background-color 0.3s, color 0.3s + transition: background-color 0.3s, color 0.3s; } .questionnaire button:hover { @@ -100,7 +100,7 @@ /* results */ .questionnaire .result { - margin: .5rem 0; + margin: 0.5rem 0; } .questionnaire details { @@ -119,7 +119,7 @@ gap: 1rem; padding-right: calc((1rem + 7px) * 2); cursor: pointer; - transition: background-color .2s; + transition: background-color 0.2s; } .questionnaire details summary::-webkit-details-marker { @@ -164,7 +164,7 @@ line-height: var(--type-detail-m-lh); text-align: center; background-color: var(--spectrum-blue); - opacity: .8; + opacity: 0.8; } @media (width >= 1200px) { @@ -193,7 +193,7 @@ .questionnaire details .has-logo .logo { text-align: center; } - + .questionnaire details .has-logo .logo img { height: 100px; } @@ -205,7 +205,7 @@ gap: 1rem; margin-top: 1rem; } - + .questionnaire details .has-logo p { grid-column: 2; margin: 0; @@ -220,7 +220,7 @@ grid-column: 1; grid-row: 1 / span 2; } - + .questionnaire details .has-logo .logo img { position: absolute; top: 0; diff --git a/blocks/releases/releases.css b/blocks/releases/releases.css index 4caf0b702..860f6a245 100644 --- a/blocks/releases/releases.css +++ b/blocks/releases/releases.css @@ -1,73 +1,72 @@ .releases .releases-controls input[type="checkbox"] { - pointer-events: none; + pointer-events: none; } .releases .release-helix-admin { - background-color: #FFD4F1; + background-color: #ffd4f1; } .releases .release-helix-pipeline-service { - background-color: #D1FFED; + background-color: #d1ffed; } .releases .release-helix-importer-ui { - background-color: #E8E8E8; + background-color: #e8e8e8; } .releases .release-aem-sidekick, .releases .release-helix-sidekick-extension { - background-color: #E4E8BF; + background-color: #e4e8bf; } .releases .release-franklin-sidekick-library { - background-color: #F4F8CF; + background-color: #f4f8cf; } .releases .release-helix-cli { - background-color: #FFEBD4; + background-color: #ffebd4; } .releases .release-aem-lib { - background-color: #CFEBF8; + background-color: #cfebf8; } .releases .release-helix-config-service { - background-color: #EDD1FF; + background-color: #edd1ff; } .releases .release { - padding: 16px 32px 32px; - margin: 16px 0; - border-radius: 16px; - display: none; + padding: 16px 32px 32px; + margin: 16px 0; + border-radius: 16px; + display: none; } .releases .releases-controls { - display: flex; - gap: 8px; - flex-wrap: wrap; + display: flex; + gap: 8px; + flex-wrap: wrap; } .releases .releases-control { - padding: 4px 16px; - border-radius: 8px; - font-size: 14px; - display: flex; - align-items: top; + padding: 4px 16px; + border-radius: 8px; + font-size: 14px; + display: flex; + align-items: top; } - .releases-date { - font-weight: 700; - margin-bottom: 0; + font-weight: 700; + margin-bottom: 0; } .releases .release h2 { - margin-top: 0; + margin-top: 0; } .releases .releases-results[aria-hidden="true"] { - display: none; + display: none; } .releases .helix-admin .release-helix-admin, @@ -79,5 +78,5 @@ .releases .helix-config-service .release-helix-config-service, .releases .aem-lib .release-aem-lib, .releases .franklin-sidekick-library .release-franklin-sidekick-library { - display: block; -} \ No newline at end of file + display: block; +} diff --git a/blocks/roi-calculator/roi-calculator.css b/blocks/roi-calculator/roi-calculator.css index 79cb62e15..f48b12c94 100644 --- a/blocks/roi-calculator/roi-calculator.css +++ b/blocks/roi-calculator/roi-calculator.css @@ -1,63 +1,63 @@ .section.roi-calulator-outer-wrapper { - padding: 0; + padding: 0; } .roi-calculator { - width: 100%; - position: relative; - overflow: hidden; - padding: var(--spacing-xxl) 0; - display: flex; - justify-content: center; - align-items: center; + width: 100%; + position: relative; + overflow: hidden; + padding: var(--spacing-xxl) 0; + display: flex; + justify-content: center; + align-items: center; } .roi-calculator .inner-content { - position: relative; - margin: 0 auto; - width: 100%; - text-align: center; - z-index: 2; + position: relative; + margin: 0 auto; + width: 100%; + text-align: center; + z-index: 2; } .roi-calculator .upper-content { - margin: 0 auto; - width: 100%; - max-width: 600px; - text-align: center; - z-index: 2; + margin: 0 auto; + width: 100%; + max-width: 600px; + text-align: center; + z-index: 2; } .roi-calculator .upper-content h2 { - font-size: var(--type-heading-xxl-size); - line-height: var(--type-heading-xxxl-lh); - text-align: center; - font-weight: 700; - margin: 0 auto var(--spacing-s); - max-width: 300px; + font-size: var(--type-heading-xxl-size); + line-height: var(--type-heading-xxxl-lh); + text-align: center; + font-weight: 700; + margin: 0 auto var(--spacing-s); + max-width: 300px; } .roi-calculator .inner-content a.button:any-link { - margin-bottom: 0; - margin-top: 0; + margin-bottom: 0; + margin-top: 0; } @media screen and (width >= 900px) { - .section.roi-calulator-outer-wrapper { - padding-top: var(--spacing-ml); - } - - .roi-calculator { - min-height: 480px; - } - - .roi-calculator .upper-content h2 { - font-size: var(--type-heading-xxxl-size); - margin-bottom: var(--spacing-ml); - max-width: 560px; - } - - .roi-calculator .inner-content a.button:any-link { - margin-bottom: 0; - } + .section.roi-calulator-outer-wrapper { + padding-top: var(--spacing-ml); + } + + .roi-calculator { + min-height: 480px; + } + + .roi-calculator .upper-content h2 { + font-size: var(--type-heading-xxxl-size); + margin-bottom: var(--spacing-ml); + max-width: 560px; + } + + .roi-calculator .inner-content a.button:any-link { + margin-bottom: 0; + } } diff --git a/blocks/service-status/service-status.css b/blocks/service-status/service-status.css index 6301c29ac..312b62300 100644 --- a/blocks/service-status/service-status.css +++ b/blocks/service-status/service-status.css @@ -1,9 +1,9 @@ .service-status { - background: aliceblue; - padding: var(--spacing-xl) 0; - text-align: center; + background: aliceblue; + padding: var(--spacing-xl) 0; + text-align: center; } .service-status statuspage-widget { margin: var(--spacing-s) 0; -} \ No newline at end of file +} diff --git a/blocks/side-navigation/side-navigation.css b/blocks/side-navigation/side-navigation.css index 1123ce91f..b9b37f8bd 100644 --- a/blocks/side-navigation/side-navigation.css +++ b/blocks/side-navigation/side-navigation.css @@ -200,10 +200,7 @@ } /* with arrow toggle list layer */ -.side-navigation - .list-section:last-of-type - .list-section-inner - > li.side-navigation-nested-target { +.side-navigation .list-section:last-of-type .list-section-inner > li.side-navigation-nested-target { padding: 2px var(--nav-sidebar-indent-spacing); width: 100%; cursor: pointer; @@ -237,17 +234,11 @@ background: var(--bg-color-grey-2); } -.side-navigation - .list-section - .side-navigation-nested-target - .icon.icon-icon-caret-down { +.side-navigation .list-section .side-navigation-nested-target .icon.icon-icon-caret-down { transition: all 0.2s ease-in-out; } -.side-navigation - .list-section - .side-navigation-nested-target:not(.collapse) - .icon.icon-icon-caret-down { +.side-navigation .list-section .side-navigation-nested-target:not(.collapse) .icon.icon-icon-caret-down { transform: rotate(180deg); } diff --git a/blocks/sidekick-generator/sidekick-generator.css b/blocks/sidekick-generator/sidekick-generator.css index 78725b3f0..1e6184014 100644 --- a/blocks/sidekick-generator/sidekick-generator.css +++ b/blocks/sidekick-generator/sidekick-generator.css @@ -1,11 +1,11 @@ .sidekick-generator form { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } .sidekick-generator form label { - width: 100%; - font-weight: 700; + width: 100%; + font-weight: 700; } .sidekick-generator a.back-link::before { @@ -16,20 +16,20 @@ .sidekick-generator input[type="text"], .sidekick-generator input[type="password"] { - display: block; - width: 100%; - line-height: 30px; - border: 1px solid; - border-color: rgb(202 202 202); - border-radius: 4px; - padding: 0 8px; - font-size: 14px; - font-family: adobe-clean, sans-serif; - outline: none !important; - appearance: none; - box-sizing: border-box; - transition: border-color 130ms ease-in-out, box-shadow 130ms ease-in-out; - flex: 1 1 0%; + display: block; + width: 100%; + line-height: 30px; + border: 1px solid; + border-color: rgb(202 202 202); + border-radius: 4px; + padding: 0 8px; + font-size: 14px; + font-family: adobe-clean, sans-serif; + outline: none !important; + appearance: none; + box-sizing: border-box; + transition: border-color 130ms ease-in-out, box-shadow 130ms ease-in-out; + flex: 1 1 0%; } .sidekick-generator input[type="checkbox"] { @@ -40,9 +40,9 @@ } .sidekick-generator input[type="text"]::placeholder { - font-weight: 400; - color: #8e8e8e; - transition: color 130ms ease-in-out; + font-weight: 400; + color: #8e8e8e; + transition: color 130ms ease-in-out; } .sidekick-generator input[type="text"]:focus::placeholder, @@ -52,7 +52,7 @@ .sidekick-generator input[type="text"]:focus, .sidekick-generator input[type="password"]:focus { - border-color: rgb(42 124 223); + border-color: rgb(42 124 223); } .sidekick-generator button { @@ -64,7 +64,7 @@ font-weight: 600; padding: 0 16px; border: none; - font-family: adobe-clean, 'Trebuchet MS', sans-serif; + font-family: adobe-clean, "Trebuchet MS", sans-serif; flex: 0 1 auto; } diff --git a/blocks/sidekick-library/sidekick-library.css b/blocks/sidekick-library/sidekick-library.css index 286b2b8ec..eecbcb557 100644 --- a/blocks/sidekick-library/sidekick-library.css +++ b/blocks/sidekick-library/sidekick-library.css @@ -1,4 +1,4 @@ body.docs-template main .section:has(.sidekick-library-wrapper) { - padding: 0; - max-width: 100%; -} \ No newline at end of file + padding: 0; + max-width: 100%; +} diff --git a/blocks/svg-doctor/svg-doctor.css b/blocks/svg-doctor/svg-doctor.css index 11e1df615..955354e95 100644 --- a/blocks/svg-doctor/svg-doctor.css +++ b/blocks/svg-doctor/svg-doctor.css @@ -3,7 +3,7 @@ position: relative; } -.svg-doctor form input[name='upload'] { +.svg-doctor form input[name="upload"] { display: block; cursor: pointer; position: absolute; @@ -11,17 +11,17 @@ opacity: 0; } -.svg-doctor form input[name='upload']:disabled, -.svg-doctor form label[for='upload'][aria-hidden="true"] { +.svg-doctor form input[name="upload"]:disabled, +.svg-doctor form label[for="upload"][aria-hidden="true"] { display: none; visibility: hidden; } .svg-doctor form label { - transition: color .3s; + transition: color 0.3s; } -.svg-doctor form .viewbox[data-mode='dark'] label { +.svg-doctor form .viewbox[data-mode="dark"] label { color: white; } @@ -32,7 +32,7 @@ } .svg-doctor form label span + p { - margin-top: .5em; + margin-top: 0.5em; } .svg-doctor .form .form-number-wrapper, @@ -60,10 +60,11 @@ } .svg-doctor .viewbox, -.svg-doctor .viewbox [data-mode='light'] { +.svg-doctor .viewbox [data-mode="light"] { --color-checkerboard-bg-fill: #fefefe; --color-checkerboard-bg-border: rgb(214 213 213 / 40%); - --checkerboard-background: linear-gradient( + --checkerboard-background: + linear-gradient( var(--color-checkerboard-bg-border) 1px, transparent 1px ), @@ -79,24 +80,24 @@ ); } -.svg-doctor .viewbox[data-mode='dark'] { +.svg-doctor .viewbox[data-mode="dark"] { --color-checkerboard-bg-border: rgb(41 42 42 / 40%); --color-checkerboard-bg-fill: #010101; } -.svg-doctor .viewbox[data-status='upload'] { - transition: background-color .3s, outline .3s; +.svg-doctor .viewbox[data-status="upload"] { + transition: background-color 0.3s, outline 0.3s; } -.svg-doctor .viewbox[data-status='upload'].hover, -.svg-doctor .viewbox[data-status='upload']:hover { +.svg-doctor .viewbox[data-status="upload"].hover, +.svg-doctor .viewbox[data-status="upload"]:hover { --color-checkerboard-bg-fill: var(--bg-color-lightgrey); outline: 2px solid var(--spectrum-blue); } -.svg-doctor .viewbox[data-status='upload'][data-mode='dark'].hover, -.svg-doctor .viewbox[data-status='upload'][data-mode='dark']:hover { +.svg-doctor .viewbox[data-status="upload"][data-mode="dark"].hover, +.svg-doctor .viewbox[data-status="upload"][data-mode="dark"]:hover { --color-checkerboard-bg-fill: #070707; } @@ -121,9 +122,9 @@ display: flex; align-items: flex-start; flex-wrap: wrap; - gap: .5rem; + gap: 0.5rem; border-radius: 0 0 var(--card-border-radius-l) var(--card-border-radius-l); - padding: .5rem var(--card-border-radius-l); + padding: 0.5rem var(--card-border-radius-l); background-color: var(--bg-color-grey); } @@ -138,12 +139,12 @@ flex-shrink: 0; display: flex; flex-wrap: wrap; - gap: .5rem; + gap: 0.5rem; max-width: 100%; } .svg-doctor .controls-buttons > div::after { - content: ''; + content: ""; width: 1px; height: 100%; background-color: var(--bg-color-grey-2); @@ -153,11 +154,11 @@ position: relative; border: 0; border-radius: var(--input-border-radius); - padding: .2rem .5rem; + padding: 0.2rem 0.5rem; background-color: transparent; font-size: var(--type-detail-m-size); cursor: pointer; - transition: background-color .3s; + transition: background-color 0.3s; } .svg-doctor .controls-buttons button[aria-checked="true"], @@ -169,11 +170,11 @@ .svg-doctor .controls-buttons button:hover::after { content: attr(aria-label); position: absolute; - top: calc(100% + .2rem); + top: calc(100% + 0.2rem); left: 50%; transform: translateX(-50%); width: max-content; - padding: .2rem .5rem; + padding: 0.2rem 0.5rem; border: 1px solid var(--bg-color-lightgrey); border-radius: var(--input-border-radius); background-color: #070707; @@ -185,24 +186,24 @@ .svg-doctor .controls-palette { display: flex; flex-wrap: wrap; - gap: .2rem; + gap: 0.2rem; } .svg-doctor .controls-palette .swatch { position: relative; margin: 0; padding: 0; - width: calc(24px + .3em); - height: calc(24px + .3em); + width: calc(24px + 0.3em); + height: calc(24px + 0.3em); outline: 1px solid black; border: 1px solid white; background-color: black; - transition: background-color .2s; + transition: background-color 0.2s; cursor: pointer; } .svg-doctor .controls-palette .swatch.icon::after { - content: ''; + content: ""; position: absolute; top: 50%; left: 50%; @@ -211,22 +212,22 @@ height: 12px; border-radius: 50%; background-color: white; - transition: background-color .2s; + transition: background-color 0.2s; } -.svg-doctor .viewbox[data-mode='dark'] + .controls .controls-palette .swatch { +.svg-doctor .viewbox[data-mode="dark"] + .controls .controls-palette .swatch { background-color: white; } -.svg-doctor .viewbox[data-mode='dark'] + .controls .controls-palette .swatch.icon::after { +.svg-doctor .viewbox[data-mode="dark"] + .controls .controls-palette .swatch.icon::after { background-color: black; } -.svg-doctor .viewbox[data-display='button'] + .controls .controls-palette .swatch { +.svg-doctor .viewbox[data-display="button"] + .controls .controls-palette .swatch { background-color: var(--spectrum-blue); } -.svg-doctor .viewbox[data-display='button'] + .controls .controls-palette .swatch.icon::after { +.svg-doctor .viewbox[data-display="button"] + .controls .controls-palette .swatch.icon::after { background-color: white; } @@ -237,7 +238,7 @@ width: 100%; height: 100%; border: 0; - padding: 0; + padding: 0; } /* specs */ @@ -252,11 +253,11 @@ color: black; } -.svg-doctor .viewbox[data-mode='dark'] .preview { +.svg-doctor .viewbox[data-mode="dark"] .preview { color: white; } -.svg-doctor .viewbox[data-display='button'] .preview { +.svg-doctor .viewbox[data-display="button"] .preview { width: max-content; border-radius: 32px; padding: 13px 1.5em; @@ -273,18 +274,18 @@ transition: background-color 0.3s, color 0.3s, border 0.3s; } -.svg-doctor .viewbox[data-display='button'] .preview:hover { +.svg-doctor .viewbox[data-display="button"] .preview:hover { border-color: var(--spectrum-blue); background-color: var(--color-white); color: var(--spectrum-blue); } -.svg-doctor .viewbox[data-display='button'] .preview::after { - content: 'Call to Action'; +.svg-doctor .viewbox[data-display="button"] .preview::after { + content: "Call to Action"; vertical-align: 5px; } -.svg-doctor .viewbox[data-display='button'] .preview svg { +.svg-doctor .viewbox[data-display="button"] .preview svg { width: auto; height: var(--type-body-l-lh); margin-right: 1ch; @@ -301,7 +302,7 @@ .svg-doctor .glyph::before, .svg-doctor .glyph::after { - content: ''; + content: ""; position: absolute; } @@ -381,11 +382,11 @@ } .svg-doctor .glyph-light::before { - transform: rotate(-45deg) + transform: rotate(-45deg); } .svg-doctor .glyph-light::after { - transform: rotate(45deg) + transform: rotate(45deg); } .svg-doctor .glyph-button { diff --git a/blocks/tabs/tabs.css b/blocks/tabs/tabs.css index 34c4c1509..5e65928f5 100644 --- a/blocks/tabs/tabs.css +++ b/blocks/tabs/tabs.css @@ -7,10 +7,11 @@ --tabs-active-text-color: #2c2c2c; --tabs-bg-color: rgb(250 250 250); --tabs-active-bg-color: #fff; - --tabs-list-bg-gradient: linear-gradient( - rgba(255 255 255 0%) 60%, - rgba(245 245 245 80%) - ); + --tabs-list-bg-gradient: + linear-gradient( + rgba(255 255 255 0%) 60%, + rgba(245 245 245 80%) + ); /* redesign */ --tabs-image-based-border-color: #e8e8e8; @@ -108,17 +109,11 @@ .tabs-background-transparent .tabs, .tabs-background-transparent .tabs div[role="tablist"], -.tabs-background-transparent - .tabs - div[role="tablist"] - button[aria-selected="true"] { +.tabs-background-transparent .tabs div[role="tablist"] button[aria-selected="true"] { background: transparent; } -.tabs-background-transparent - .tabs - div[role="tablist"] - button[aria-selected="true"] { +.tabs-background-transparent .tabs div[role="tablist"] button[aria-selected="true"] { border-bottom-color: var(--tabs-active-bg-color); } diff --git a/blocks/testimonials/testimonials.css b/blocks/testimonials/testimonials.css index 0d1b593b3..bf989ccf1 100644 --- a/blocks/testimonials/testimonials.css +++ b/blocks/testimonials/testimonials.css @@ -7,10 +7,11 @@ --tabs-active-text-color: #2c2c2c; --tabs-bg-color: rgb(250 250 250); --tabs-active-bg-color: #fff; - --tabs-list-bg-gradient: linear-gradient( - rgba(255 255 255 0%) 60%, - rgba(245 245 245 80%) - ); + --tabs-list-bg-gradient: + linear-gradient( + rgba(255 255 255 0%) 60%, + rgba(245 245 245 80%) + ); /* redesign */ --tabs-image-based-border-color: #e8e8e8; @@ -69,11 +70,7 @@ } .testimonials .tab-list .tablist-container button:hover picture, -.testimonials - .tab-list - .tablist-container - button[aria-selected="true"] - picture { +.testimonials .tab-list .tablist-container button[aria-selected="true"] picture { opacity: 1; } @@ -158,12 +155,7 @@ margin-right: auto; } -.testimonials - .testimonial - .tabcontent-container - .tabpanel - .customer-info - picture { +.testimonials .testimonial .tabcontent-container .tabpanel .customer-info picture { margin-top: var(--spacing-xxs); } diff --git a/blocks/venn/venn.css b/blocks/venn/venn.css index 17f09ee93..3f991d5ad 100644 --- a/blocks/venn/venn.css +++ b/blocks/venn/venn.css @@ -17,7 +17,7 @@ } .venn .venn-content .venn-content-left { - background-color: #F4FADE; + background-color: #f4fade; border: 2px solid var(--color-accent-lightgreen-content); border-bottom: 0; border-radius: 50vw 50vw 0 0; @@ -72,7 +72,13 @@ } .venn .venn-content li.in-range { - background: linear-gradient(105deg, var(--color-accent-pink-bg), #f0b2f244 var(--venn-progress), #fff6 var(--venn-progress)); + background: + linear-gradient( + 105deg, + var(--color-accent-pink-bg), + #f0b2f244 var(--venn-progress), + #fff6 var(--venn-progress) + ); } .venn .venn-content li.exceeds-range { @@ -93,7 +99,7 @@ font-style: normal; font-weight: 600; text-decoration: none; - transition: background-color .2s; + transition: background-color 0.2s; } .venn .venn-content a:hover { @@ -111,7 +117,7 @@ border-radius: var(--image-border-radius-xxl); padding: var(--image-border-radius-xxl); } - + .venn .venn-content .venn-content-left { border: 2px solid var(--color-accent-lightgreen-content); border-right-width: 1px; @@ -119,7 +125,7 @@ padding-top: var(--image-border-radius-xxl); padding-right: calc(33% + var(--image-border-radius-xl)); } - + .venn .venn-content .venn-content-right { border: 2px solid var(--color-accent-purple-bg); border-left-width: 1px; diff --git a/blocks/video/video.css b/blocks/video/video.css index 9386bd1a7..f59011aa3 100644 --- a/blocks/video/video.css +++ b/blocks/video/video.css @@ -1,12 +1,12 @@ .video-wrapper { - width: 100%; - overflow: hidden; + width: 100%; + overflow: hidden; } .video { - margin: 32px 0; + margin: 32px 0; } .video video { - width: 100%; -} \ No newline at end of file + width: 100%; +} diff --git a/blocks/videotext/videotext.css b/blocks/videotext/videotext.css index b35194996..d28163c37 100644 --- a/blocks/videotext/videotext.css +++ b/blocks/videotext/videotext.css @@ -1,5 +1,5 @@ /* default rule for mobile */ -.videotext>div { +.videotext > div { display: grid; padding-top: var(--spacing-xxs); } @@ -11,4 +11,4 @@ .videotext .text { font-size: var(--type-body-xs-size); padding-top: var(--spacing-xxs); -} \ No newline at end of file +} diff --git a/blocks/z-pattern/z-pattern.css b/blocks/z-pattern/z-pattern.css index 9f5288242..1b62290c0 100644 --- a/blocks/z-pattern/z-pattern.css +++ b/blocks/z-pattern/z-pattern.css @@ -33,7 +33,7 @@ flex-direction: column; align-items: center; justify-content: center; - gap: var(--spacing-s); + gap: var(--spacing-s); margin-bottom: var(--spacing-s); } @@ -101,7 +101,7 @@ .z-pattern.value-props .z-pattern-heading > div { width: 100%; } - + .z-pattern.value-props .z-pattern-heading h2 { display: block; } @@ -117,7 +117,7 @@ .z-pattern.value-props .icon-eyebrow { justify-content: inherit; } - + .z-pattern.value-props .main-headline { width: 100%; font-size: var(--type-heading-xl-size); diff --git a/styles/lazy-styles.css b/styles/lazy-styles.css index 0e65c141c..792edc0f8 100644 --- a/styles/lazy-styles.css +++ b/styles/lazy-styles.css @@ -1,73 +1,73 @@ /* adobe clean */ @font-face { - font-family: adobe-clean; - src: url("/fonts/adobe-clean-400.woff2") format("woff2"); - font-display: swap; - font-style: normal; - font-weight: 400; + font-family: adobe-clean; + src: url("/fonts/adobe-clean-400.woff2") format("woff2"); + font-display: swap; + font-style: normal; + font-weight: 400; } @font-face { - font-family: adobe-clean; - src:url("/fonts/adobe-clean-400-italic.woff2") format("woff2"); - font-display: swap; - font-style: italic; - font-weight: 400; + font-family: adobe-clean; + src: url("/fonts/adobe-clean-400-italic.woff2") format("woff2"); + font-display: swap; + font-style: italic; + font-weight: 400; } @font-face { - font-family: adobe-clean; - src: url("/fonts/adobe-clean-700.woff2") format("woff2"); - font-display: swap; - font-style: normal; - font-weight: 700; + font-family: adobe-clean; + src: url("/fonts/adobe-clean-700.woff2") format("woff2"); + font-display: swap; + font-style: normal; + font-weight: 700; } @font-face { - font-family: adobe-clean; - src: url("/fonts/adobe-clean-900.woff2") format("woff2"); - font-display: swap; - font-style: normal; - font-weight: 900; + font-family: adobe-clean; + src: url("/fonts/adobe-clean-900.woff2") format("woff2"); + font-display: swap; + font-style: normal; + font-weight: 900; } /* source code pro */ @font-face { - font-family: source-code-pro; - src: url("/fonts/source-code-pro-900.otf.woff2") format("woff2"); - font-display: swap; - font-style: normal; - font-weight: 900; + font-family: source-code-pro; + src: url("/fonts/source-code-pro-900.otf.woff2") format("woff2"); + font-display: swap; + font-style: normal; + font-weight: 900; } @font-face { - font-family: source-code-pro; - src: url("/fonts/source-code-pro-400.otf.woff2") format("woff2"); - font-display: swap; - font-style: normal; - font-weight: 400; + font-family: source-code-pro; + src: url("/fonts/source-code-pro-400.otf.woff2") format("woff2"); + font-display: swap; + font-style: normal; + font-weight: 400; } @font-face { - font-family: source-code-pro; - src:url("/fonts/source-code-pro-400-italic.otf.woff2") format("woff2"); - font-display: swap; - font-style: italic; - font-weight: 400; + font-family: source-code-pro; + src: url("/fonts/source-code-pro-400-italic.otf.woff2") format("woff2"); + font-display: swap; + font-style: italic; + font-weight: 400; } @font-face { - font-family: source-code-pro; - src: url("/fonts/source-code-pro-700.otf.woff2") format("woff2"); - font-display: swap; - font-style: normal; - font-weight: 700; + font-family: source-code-pro; + src: url("/fonts/source-code-pro-700.otf.woff2") format("woff2"); + font-display: swap; + font-style: normal; + font-weight: 700; } @font-face { - font-family: source-code-pro; - src: url("/fonts/source-code-pro-900.otf.woff2") format("woff2"); - font-display: swap; - font-style: normal; - font-weight: 900; -} \ No newline at end of file + font-family: source-code-pro; + src: url("/fonts/source-code-pro-900.otf.woff2") format("woff2"); + font-display: swap; + font-style: normal; + font-weight: 900; +} diff --git a/tools/oversight/charts/piechart.js b/tools/oversight/charts/piechart.js index d94138ceb..59b080c5b 100644 --- a/tools/oversight/charts/piechart.js +++ b/tools/oversight/charts/piechart.js @@ -47,6 +47,7 @@ function colorFor(value, allValues, ringIndex) { const valueShade = (100 * sameBaseIndex) % 500; const shade = baseShade + ringShade + valueShade; + // eslint-disable-next-line no-console console.log('colorFor', value, basecolor, baseShade, ringShade, valueShade, shade); return cssVariable(`--spectrum-${basecolor}-${shade}`); } diff --git a/tools/oversight/slicer.js b/tools/oversight/slicer.js index 890300b2a..6a6c1fce4 100644 --- a/tools/oversight/slicer.js +++ b/tools/oversight/slicer.js @@ -245,6 +245,7 @@ function updateDataFacets(filterText, params, checkpoint) { )); if (cp === 'loadresource') { + // eslint-disable-next-line no-console console.log('adding histogram facet'); // loadresource.target are not discrete values, but the number // of milliseconds it took to load the resource, so the best way diff --git a/tools/rum/admin/store.js b/tools/rum/admin/store.js index 9a71d09ea..41f7bf320 100644 --- a/tools/rum/admin/store.js +++ b/tools/rum/admin/store.js @@ -51,6 +51,7 @@ const store = new (class { token = localStorage.getItem('rum-bundler-token'); } if (!token) { + // eslint-disable-next-line no-alert token = prompt('Please enter your key'); if (!token) { this.denied = true;