From 9831f39112b3197d9caa67bf4a3bb15b40e05210 Mon Sep 17 00:00:00 2001 From: Lee Mills Date: Thu, 23 Jan 2025 15:05:56 +0000 Subject: [PATCH 1/2] fix: stylelint errors --- components/prev-next/prev-next.css | 3 +- css/base/variables.css | 259 ++++++------------------ css/components/alert-banner.css | 9 +- css/components/banner.css | 5 +- css/components/blog.css | 4 +- css/components/breadcrumbs.css | 3 +- css/components/callout-box.css | 6 +- css/components/directories.css | 4 +- css/components/events.css | 3 +- css/components/fact-box.css | 3 +- css/components/form-items.css | 20 +- css/components/guide-nav.css | 3 +- css/components/link.css | 3 +- css/components/page-sections.css | 240 ++++++---------------- css/components/service-landing-page.css | 6 +- css/components/service-statuses.css | 12 +- css/components/sidebar.css | 3 +- css/components/sitewide-search.css | 3 +- css/components/step-by-step.css | 3 +- css/components/sticky-header.css | 4 +- css/components/wysiwyg-styles.css | 4 +- 21 files changed, 153 insertions(+), 447 deletions(-) diff --git a/components/prev-next/prev-next.css b/components/prev-next/prev-next.css index 4d712046..08e9649e 100644 --- a/components/prev-next/prev-next.css +++ b/components/prev-next/prev-next.css @@ -15,8 +15,7 @@ ul.lgd-prev-next__list li.lgd-prev-next__list-item { display: flex; flex-wrap: wrap; align-items: center; - padding: var(--button-padding-vertical) var(--button-padding-horizontal) - var(--button-padding-vertical) var(--button-padding-horizontal); + padding: var(--button-padding-vertical) var(--button-padding-horizontal) var(--button-padding-vertical) var(--button-padding-horizontal); text-decoration: none; color: var(--button-text-color); border: var(--border); diff --git a/css/base/variables.css b/css/base/variables.css index f3138fc2..84210576 100644 --- a/css/base/variables.css +++ b/css/base/variables.css @@ -71,8 +71,7 @@ body { We choose basic fonts that most people have in browser cache from visiting other websites. This will help with page speed, rather than calling fonts from Google Fonts or somewhere. */ - --font-primary: roboto, oxygen, ubuntu, cantarell, "Open Sans", - "Helvetica Neue", sans-serif; + --font-primary: roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-secondary: georgia, "Times New Roman", times, serif; --font-heading-1: var(--font-secondary); --font-heading-2: var(--font-secondary); @@ -94,11 +93,7 @@ body { --font-size-large: calc(var(--font-size) * 1.3125); --font-size-larger: calc(var(--font-size) * 1.6875); --font-size-largest: calc(var(--font-size) * 2.875); - --font-size-h1: clamp( - var(--font-size-larger), - 10vw, - var(--font-size-largest) - ); + --font-size-h1: clamp(var(--font-size-larger), 10vw, var(--font-size-largest)); --font-size-h2: clamp(var(--font-size-large), 8vw, var(--font-size-larger)); --font-size-h3: clamp(var(--font-size-medium), 6vw, var(--font-size-large)); --font-size-h4: var(--font-size-medium); @@ -140,10 +135,8 @@ body { --border-style: solid; --border-radius: var(--spacing-smallest); --border: var(--border-width) var(--border-style) var(--border-color); - --border-large: var(--border-width-large) var(--border-style) - var(--border-color); - --border-dark: var(--border-width) var(--border-style) - var(--border-color-dark); + --border-large: var(--border-width-large) var(--border-style) var(--border-color); + --border-dark: var(--border-width) var(--border-style) var(--border-color-dark); --border-transparent: var(--border-width) var(--border-style) transparent; /* Animation */ @@ -292,9 +285,7 @@ body { --sidebar-exposed-form-item-spacing: var(--spacing); /* Guide Navigation */ - --section-spacing-vertical-guide-nav: calc( - var(--spacing-large) + 1rem - ); /* 1rem to account for padding on left of bullets */ + --section-spacing-vertical-guide-nav: calc(var(--spacing-large) + 1rem); /* 1rem to account for padding on left of bullets */ --section-spacing-horizontal-guide-nav: var(--spacing-large); --guide-nav-column-count: 3; @@ -501,188 +492,68 @@ body { --color-page-section-background-color-6-text-color: var(--color-white); --color-page-section-background-color-6-link-color: var(--color-white); /* Page Sections - Newsroom Teasers */ - --color-page-section-background-color-1-newsroom-teaser-background-color: var( - --color-white - ); - --color-page-section-background-color-1-newsroom-teaser-text-color: var( - --color-black - ); - --color-page-section-background-color-1-newsroom-teaser-link-color: var( - --color-black - ); - --color-page-section-background-color-2-newsroom-teaser-background-color: var( - --color-white - ); - --color-page-section-background-color-2-newsroom-teaser-text-color: var( - --color-black - ); - --color-page-section-background-color-2-newsroom-teaser-link-color: var( - --color-black - ); - --color-page-section-background-color-3-newsroom-teaser-background-color: var( - --color-black - ); - --color-page-section-background-color-3-newsroom-teaser-text-color: var( - --color-white - ); - --color-page-section-background-color-3-newsroom-teaser-link-color: var( - --color-white - ); - --color-page-section-background-color-4-newsroom-teaser-background-color: var( - --color-white - ); - --color-page-section-background-color-4-newsroom-teaser-text-color: var( - --color-black - ); - --color-page-section-background-color-4-newsroom-teaser-link-color: var( - --color-black - ); - --color-page-section-background-color-5-newsroom-teaser-background-color: var( - --color-white - ); - --color-page-section-background-color-5-newsroom-teaser-text-color: var( - --color-black - ); - --color-page-section-background-color-5-newsroom-teaser-link-color: var( - --color-black - ); - --color-page-section-background-color-6-newsroom-teaser-background-color: var( - --color-white - ); - --color-page-section-background-color-6-newsroom-teaser-text-color: var( - --color-black - ); - --color-page-section-background-color-6-newsroom-teaser-link-color: var( - --color-black - ); + --color-page-section-background-color-1-newsroom-teaser-background-color: var(--color-white); + --color-page-section-background-color-1-newsroom-teaser-text-color: var(--color-black); + --color-page-section-background-color-1-newsroom-teaser-link-color: var(--color-black); + --color-page-section-background-color-2-newsroom-teaser-background-color: var(--color-white); + --color-page-section-background-color-2-newsroom-teaser-text-color: var(--color-black); + --color-page-section-background-color-2-newsroom-teaser-link-color: var(--color-black); + --color-page-section-background-color-3-newsroom-teaser-background-color: var(--color-black); + --color-page-section-background-color-3-newsroom-teaser-text-color: var(--color-white); + --color-page-section-background-color-3-newsroom-teaser-link-color: var(--color-white); + --color-page-section-background-color-4-newsroom-teaser-background-color: var(--color-white); + --color-page-section-background-color-4-newsroom-teaser-text-color: var(--color-black); + --color-page-section-background-color-4-newsroom-teaser-link-color: var(--color-black); + --color-page-section-background-color-5-newsroom-teaser-background-color: var(--color-white); + --color-page-section-background-color-5-newsroom-teaser-text-color: var(--color-black); + --color-page-section-background-color-5-newsroom-teaser-link-color: var(--color-black); + --color-page-section-background-color-6-newsroom-teaser-background-color: var(--color-white); + --color-page-section-background-color-6-newsroom-teaser-text-color: var(--color-black); + --color-page-section-background-color-6-newsroom-teaser-link-color: var(--color-black); /* Page Sections - Box Links */ - --color-page-section-background-color-1-box-link-border-color: var( - --color-white - ); - --color-page-section-background-color-1-box-link-background-color: var( - --color-white - ); - --color-page-section-background-color-1-box-link-text-color: var( - --color-black - ); - --color-page-section-background-color-1-box-link-link-color: var( - --color-black - ); - --color-page-section-background-color-2-box-link-border-color: var( - --color-white - ); - --color-page-section-background-color-2-box-link-background-color: var( - --color-white - ); - --color-page-section-background-color-2-box-link-text-color: var( - --color-black - ); - --color-page-section-background-color-2-box-link-link-color: var( - --color-black - ); - --color-page-section-background-color-3-box-link-border-color: var( - --color-black - ); - --color-page-section-background-color-3-box-link-background-color: var( - --color-black - ); - --color-page-section-background-color-3-box-link-text-color: var( - --color-white - ); - --color-page-section-background-color-3-box-link-link-color: var( - --color-white - ); - --color-page-section-background-color-4-box-link-border-color: var( - --color-white - ); - --color-page-section-background-color-4-box-link-background-color: var( - --color-white - ); - --color-page-section-background-color-4-box-link-text-color: var( - --color-black - ); - --color-page-section-background-color-4-box-link-link-color: var( - --color-black - ); - --color-page-section-background-color-5-box-link-border-color: var( - --color-white - ); - --color-page-section-background-color-5-box-link-background-color: var( - --color-white - ); - --color-page-section-background-color-5-box-link-text-color: var( - --color-black - ); - --color-page-section-background-color-5-box-link-link-color: var( - --color-black - ); - --color-page-section-background-color-6-box-link-border-color: var( - --color-white - ); - --color-page-section-background-color-6-box-link-background-color: var( - --color-white - ); - --color-page-section-background-color-6-box-link-text-color: var( - --color-black - ); - --color-page-section-background-color-6-box-link-link-color: var( - --color-black - ); + --color-page-section-background-color-1-box-link-border-color: var(--color-white); + --color-page-section-background-color-1-box-link-background-color: var(--color-white); + --color-page-section-background-color-1-box-link-text-color: var(--color-black); + --color-page-section-background-color-1-box-link-link-color: var(--color-black); + --color-page-section-background-color-2-box-link-border-color: var(--color-white); + --color-page-section-background-color-2-box-link-background-color: var(--color-white); + --color-page-section-background-color-2-box-link-text-color: var(--color-black); + --color-page-section-background-color-2-box-link-link-color: var(--color-black); + --color-page-section-background-color-3-box-link-border-color: var(--color-black); + --color-page-section-background-color-3-box-link-background-color: var(--color-black); + --color-page-section-background-color-3-box-link-text-color: var(--color-white); + --color-page-section-background-color-3-box-link-link-color: var(--color-white); + --color-page-section-background-color-4-box-link-border-color: var(--color-white); + --color-page-section-background-color-4-box-link-background-color: var(--color-white); + --color-page-section-background-color-4-box-link-text-color: var(--color-black); + --color-page-section-background-color-4-box-link-link-color: var(--color-black); + --color-page-section-background-color-5-box-link-border-color: var(--color-white); + --color-page-section-background-color-5-box-link-background-color: var(--color-white); + --color-page-section-background-color-5-box-link-text-color: var(--color-black); + --color-page-section-background-color-5-box-link-link-color: var(--color-black); + --color-page-section-background-color-6-box-link-border-color: var(--color-white); + --color-page-section-background-color-6-box-link-background-color: var(--color-white); + --color-page-section-background-color-6-box-link-text-color: var(--color-black); + --color-page-section-background-color-6-box-link-link-color: var(--color-black); /* Page Sections - Featured Subsites */ - --color-page-section-background-color-1-featured-subsite-background-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-1-featured-subsite-text-color: var( - --color-black - ); - --color-page-section-background-color-1-featured-subsite-link-color: var( - --color-black - ); - --color-page-section-background-color-2-featured-subsite-background-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-2-featured-subsite-text-color: var( - --color-black - ); - --color-page-section-background-color-2-featured-subsite-link-color: var( - --color-black - ); - --color-page-section-background-color-3-featured-subsite-background-color: var( - --color-black - ); - --color-page-section-background-color-3-featured-subsite-text-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-3-featured-subsite-link-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-4-featured-subsite-background-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-4-featured-subsite-text-color: var( - --color-black - ); - --color-page-section-background-color-4-featured-subsite-link-color: var( - --color-black - ); - --color-page-section-background-color-5-featured-subsite-background-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-5-featured-subsite-text-color: var( - --color-black - ); - --color-page-section-background-color-5-featured-subsite-link-color: var( - --color-black - ); - --color-page-section-background-color-6-featured-subsite-background-color: var( - --color-grey-lightest - ); - --color-page-section-background-color-6-featured-subsite-text-color: var( - --color-black - ); - --color-page-section-background-color-6-featured-subsite-link-color: var( - --color-black - ); + --color-page-section-background-color-1-featured-subsite-background-color: var(--color-grey-lightest); + --color-page-section-background-color-1-featured-subsite-text-color: var(--color-black); + --color-page-section-background-color-1-featured-subsite-link-color: var(--color-black); + --color-page-section-background-color-2-featured-subsite-background-color: var(--color-grey-lightest); + --color-page-section-background-color-2-featured-subsite-text-color: var(--color-black); + --color-page-section-background-color-2-featured-subsite-link-color: var(--color-black); + --color-page-section-background-color-3-featured-subsite-background-color: var(--color-black); + --color-page-section-background-color-3-featured-subsite-text-color: var(--color-grey-lightest); + --color-page-section-background-color-3-featured-subsite-link-color: var(--color-grey-lightest); + --color-page-section-background-color-4-featured-subsite-background-color: var(--color-grey-lightest); + --color-page-section-background-color-4-featured-subsite-text-color: var(--color-black); + --color-page-section-background-color-4-featured-subsite-link-color: var(--color-black); + --color-page-section-background-color-5-featured-subsite-background-color: var(--color-grey-lightest); + --color-page-section-background-color-5-featured-subsite-text-color: var(--color-black); + --color-page-section-background-color-5-featured-subsite-link-color: var(--color-black); + --color-page-section-background-color-6-featured-subsite-background-color: var(--color-grey-lightest); + --color-page-section-background-color-6-featured-subsite-text-color: var(--color-black); + --color-page-section-background-color-6-featured-subsite-link-color: var(--color-black); /* Add to Calendar */ --add-to-calendar-dialog-max-width: 80%; diff --git a/css/components/alert-banner.css b/css/components/alert-banner.css index 0081b2d4..abb69446 100644 --- a/css/components/alert-banner.css +++ b/css/components/alert-banner.css @@ -26,8 +26,7 @@ dialog.localgov-alert-banner::backdrop { } .localgov-alert-banner__close { - padding: var(--alert-banner-close-padding-vertical) - var(--alert-banner-close-padding-horizontal); + padding: var(--alert-banner-close-padding-vertical) var(--alert-banner-close-padding-horizontal); color: var(--alert-banner-color); border: var(--alert-banner-close-border); border-color: var(--alert-banner-close-border-color); @@ -75,10 +74,8 @@ dialog.localgov-alert-banner::backdrop { } .localgov-alert-banner__inner { - margin: var(--alert-banner-inner-margin-vertical) - var(--alert-banner-inner-margin-horizontal); - padding: var(--alert-banner-inner-padding-vertical) - var(--alert-banner-inner-padding-horizontal); + margin: var(--alert-banner-inner-margin-vertical) var(--alert-banner-inner-margin-horizontal); + padding: var(--alert-banner-inner-padding-vertical) var(--alert-banner-inner-padding-horizontal); } .localgov-alert-banner--announcement .localgov-alert-banner__title { diff --git a/css/components/banner.css b/css/components/banner.css index 20af15c6..4732322b 100644 --- a/css/components/banner.css +++ b/css/components/banner.css @@ -11,8 +11,7 @@ .banner--primary .banner__content { position: relative; max-width: var(--banner-content-width); - margin: calc(var(--banner-content-margin) * -1) auto - var(--banner-content-margin); + margin: calc(var(--banner-content-margin) * -1) auto var(--banner-content-margin); padding: var(--banner-content-padding); color: var(--banner-content-text-color); background-color: var(--banner-content-bg-color); @@ -34,6 +33,6 @@ color: var(--color-banner-title-link-hover); } .banner__link.banner__link:focus-visible { - outline-offset: 2px; outline: 2px dashed var(--color-banner-title-link-hover); + outline-offset: 2px; } diff --git a/css/components/blog.css b/css/components/blog.css index 489cdd93..f5002d9a 100644 --- a/css/components/blog.css +++ b/css/components/blog.css @@ -20,9 +20,7 @@ gap: var(--vertical-rhythm-spacing); } -.field--name-localgov-blog-channel-featured - > .field__items - > .field__item:first-of-type { +.field--name-localgov-blog-channel-featured > .field__items > .field__item:first-of-type { grid-column-start: 1; grid-column-end: 3; padding: var(--vertical-rhythm-spacing); diff --git a/css/components/breadcrumbs.css b/css/components/breadcrumbs.css index bbd065e3..bab3bbae 100644 --- a/css/components/breadcrumbs.css +++ b/css/components/breadcrumbs.css @@ -13,8 +13,7 @@ } .breadcrumbs { - padding: var(--breadcrumbs-padding-vertical) - var(--breadcrumbs-padding-horizontal); + padding: var(--breadcrumbs-padding-vertical) var(--breadcrumbs-padding-horizontal); border-block-end: var(--breadcrumbs-border); } diff --git a/css/components/callout-box.css b/css/components/callout-box.css index 2e2fa901..12acd930 100644 --- a/css/components/callout-box.css +++ b/css/components/callout-box.css @@ -28,10 +28,6 @@ .call-out-box--has-image .call-out-box__content { width: 75%; padding-inline-end: 20%; - background: linear-gradient( - to right, - var(--call-out-box-bg-color) 75%, - transparent - ); + background: linear-gradient(to right, var(--call-out-box-bg-color) 75%, transparent); } } diff --git a/css/components/directories.css b/css/components/directories.css index a56b8ce7..77419ba0 100644 --- a/css/components/directories.css +++ b/css/components/directories.css @@ -24,8 +24,6 @@ margin-block-end: var(--vertical-rhythm-spacing); } -.localgov-directory__content - .views-element-container - + .views-element-container { +.localgov-directory__content .views-element-container + .views-element-container { margin-block-start: var(--vertical-rhythm-spacing); } diff --git a/css/components/events.css b/css/components/events.css index 7c212dc9..b0ed3907 100644 --- a/css/components/events.css +++ b/css/components/events.css @@ -15,8 +15,7 @@ .field--name-localgov-event-call-to-action a { display: inline-block; - padding: var(--button-padding-vertical) var(--button-padding-horizontal) - var(--button-padding-vertical) var(--button-padding-horizontal); + padding: var(--button-padding-vertical) var(--button-padding-horizontal) var(--button-padding-vertical) var(--button-padding-horizontal); color: var(--button-text-color); border: var(--border); border-color: var(--button-border-color); diff --git a/css/components/fact-box.css b/css/components/fact-box.css index 1994e00e..2db6801c 100644 --- a/css/components/fact-box.css +++ b/css/components/fact-box.css @@ -6,8 +6,7 @@ } .fact-box--has-bg { - padding: var(--fact-box-padding-vertical) var(--fact-box-padding-horizontal) - calc(var(--fact-box-padding-vertical) - var(--vertical-rhythm-spacing)); + padding: var(--fact-box-padding-vertical) var(--fact-box-padding-horizontal) calc(var(--fact-box-padding-vertical) - var(--vertical-rhythm-spacing)); } .fact-box--fact-box-light { diff --git a/css/components/form-items.css b/css/components/form-items.css index b9d31aa2..54b5187d 100644 --- a/css/components/form-items.css +++ b/css/components/form-items.css @@ -87,17 +87,14 @@ select:focus { padding-inline-start: 0; } -.select2-container--default - .select2-selection--single - .select2-selection__arrow { +.select2-container--default .select2-selection--single .select2-selection__arrow { top: 13px; } /* Buttons */ button, input[type="submit"] { - padding: var(--button-padding-vertical) var(--button-padding-horizontal) - var(--button-padding-vertical) var(--button-padding-horizontal); + padding: var(--button-padding-vertical) var(--button-padding-horizontal) var(--button-padding-vertical) var(--button-padding-horizontal); cursor: pointer; color: var(--button-text-color); border: var(--border); @@ -193,9 +190,7 @@ input[type="submit"]:hover { .form-item input[type="checkbox"]:focus + label::before, .form-checkboxes input[type="checkbox"]:focus + label::before, .facet-item input[type="checkbox"]:focus + label::before, -.form-item-webform-terms-of-service - input[type="checkbox"]:focus - + label::before { +.form-item-webform-terms-of-service input[type="checkbox"]:focus + label::before { border-width: 4px; box-shadow: 0 0 0 3px var(--checkbox-select-focus-color); } @@ -214,9 +209,7 @@ input[type="submit"]:hover { .form-item input[type="checkbox"]:checked + label::after, .form-checkboxes input[type="checkbox"]:checked + label::after, .facet-item input[type="checkbox"]:checked + label::after, -.form-item-webform-terms-of-service - input[type="checkbox"]:checked - + label::after { +.form-item-webform-terms-of-service input[type="checkbox"]:checked + label::after { opacity: 1; } @@ -287,10 +280,7 @@ input[type="submit"]:hover { background: currentColor; } .webform-type-radios .form-item [type="radio"]:focus + label::before, -.webform-type-webform-radios-other - .form-item - [type="radio"]:focus - + label::before { +.webform-type-webform-radios-other .form-item [type="radio"]:focus + label::before { border-width: 4px; box-shadow: 0 0 0 4px var(--radio-select-focus-color); } diff --git a/css/components/guide-nav.css b/css/components/guide-nav.css index 36cf3bca..d17e7674 100644 --- a/css/components/guide-nav.css +++ b/css/components/guide-nav.css @@ -1,7 +1,6 @@ .lgd-guide-nav { margin-block-end: var(--vertical-rhythm-spacing); - padding: var(--section-spacing-vertical-guide-nav) - var(--section-spacing-horizontal-guide-nav); + padding: var(--section-spacing-vertical-guide-nav) var(--section-spacing-horizontal-guide-nav); background-color: var(--color-grey-lighter); } diff --git a/css/components/link.css b/css/components/link.css index 33ad107c..767c6077 100644 --- a/css/components/link.css +++ b/css/components/link.css @@ -9,8 +9,7 @@ } .link--button-style .link-wrapper { - padding: var(--button-padding-vertical) var(--button-padding-horizontal) - var(--button-padding-vertical) var(--button-padding-horizontal); + padding: var(--button-padding-vertical) var(--button-padding-horizontal) var(--button-padding-vertical) var(--button-padding-horizontal); color: var(--button-text-color); border: var(--border); border-color: var(--button-border-color); diff --git a/css/components/page-sections.css b/css/components/page-sections.css index c7c0905c..94cbb8dd 100644 --- a/css/components/page-sections.css +++ b/css/components/page-sections.css @@ -3,56 +3,32 @@ background-color: var(--color-page-section-background-color); } .lgd-page-section--bg-colour-1 { - --color-page-section-background-color: var( - --color-page-section-background-color-1 - ); - --color-page-section-text-color: var( - --color-page-section-background-color-1-text-color - ); + --color-page-section-background-color: var(--color-page-section-background-color-1); + --color-page-section-text-color: var(--color-page-section-background-color-1-text-color); } .lgd-page-section--bg-colour-2 { - --color-page-section-background-color: var( - --color-page-section-background-color-2 - ); - --color-page-section-text-color: var( - --color-page-section-background-color-2-text-color - ); + --color-page-section-background-color: var(--color-page-section-background-color-2); + --color-page-section-text-color: var(--color-page-section-background-color-2-text-color); } .lgd-page-section--bg-colour-3 { - --color-page-section-background-color: var( - --color-page-section-background-color-3 - ); - --color-page-section-text-color: var( - --color-page-section-background-color-3-text-color - ); + --color-page-section-background-color: var(--color-page-section-background-color-3); + --color-page-section-text-color: var(--color-page-section-background-color-3-text-color); } /* Adding 3 extra colour options here, so they are available if other subthemes/sites need them. */ .lgd-page-section--bg-colour-4 { - --color-page-section-background-color: var( - --color-page-section-background-color-4 - ); - --color-page-section-text-color: var( - --color-page-section-background-color-4-text-color - ); + --color-page-section-background-color: var(--color-page-section-background-color-4); + --color-page-section-text-color: var(--color-page-section-background-color-4-text-color); } .lgd-page-section--bg-colour-5 { - --color-page-section-background-color: var( - --color-page-section-background-color-5 - ); - --color-page-section-text-color: var( - --color-page-section-background-color-5-text-color - ); + --color-page-section-background-color: var(--color-page-section-background-color-5); + --color-page-section-text-color: var(--color-page-section-background-color-5-text-color); } .lgd-page-section--bg-colour-6 { - --color-page-section-background-color: var( - --color-page-section-background-color-6 - ); - --color-page-section-text-color: var( - --color-page-section-background-color-6-text-color - ); + --color-page-section-background-color: var(--color-page-section-background-color-6); + --color-page-section-text-color: var(--color-page-section-background-color-6-text-color); } .lgd-page-section--padding-top-small { @@ -192,153 +168,93 @@ /* Newsroom Teasers */ .lgd-page-section--bg-colour-1 .newsroom-teaser { - color: var( - --color-page-section-background-color-1-newsroom-teaser-text-color - ); - background-color: var( - --color-page-section-background-color-1-newsroom-teaser-background-color - ); + color: var(--color-page-section-background-color-1-newsroom-teaser-text-color); + background-color: var(--color-page-section-background-color-1-newsroom-teaser-background-color); } .lgd-page-section--bg-colour-1 .newsroom-teaser a { - color: var( - --color-page-section-background-color-1-newsroom-teaser-link-color - ); + color: var(--color-page-section-background-color-1-newsroom-teaser-link-color); } .lgd-page-section--bg-colour-2 .newsroom-teaser { - color: var( - --color-page-section-background-color-2-newsroom-teaser-text-color - ); - background-color: var( - --color-page-section-background-color-2-newsroom-teaser-background-color - ); + color: var(--color-page-section-background-color-2-newsroom-teaser-text-color); + background-color: var(--color-page-section-background-color-2-newsroom-teaser-background-color); } .lgd-page-section--bg-colour-2 .newsroom-teaser a { - color: var( - --color-page-section-background-color-2-newsroom-teaser-link-color - ); + color: var(--color-page-section-background-color-2-newsroom-teaser-link-color); } .lgd-page-section--bg-colour-3 .newsroom-teaser { - color: var( - --color-page-section-background-color-3-newsroom-teaser-text-color - ); - background-color: var( - --color-page-section-background-color-3-newsroom-teaser-background-color - ); + color: var(--color-page-section-background-color-3-newsroom-teaser-text-color); + background-color: var(--color-page-section-background-color-3-newsroom-teaser-background-color); } .lgd-page-section--bg-colour-3 .newsroom-teaser a { - color: var( - --color-page-section-background-color-3-newsroom-teaser-link-color - ); + color: var(--color-page-section-background-color-3-newsroom-teaser-link-color); } .lgd-page-section--bg-colour-4 .newsroom-teaser { - color: var( - --color-page-section-background-color-4-newsroom-teaser-text-color - ); - background-color: var( - --color-page-section-background-color-4-newsroom-teaser-background-color - ); + color: var(--color-page-section-background-color-4-newsroom-teaser-text-color); + background-color: var(--color-page-section-background-color-4-newsroom-teaser-background-color); } .lgd-page-section--bg-colour-4 .newsroom-teaser a { - color: var( - --color-page-section-background-color-4-newsroom-teaser-link-color - ); + color: var(--color-page-section-background-color-4-newsroom-teaser-link-color); } .lgd-page-section--bg-colour-5 .newsroom-teaser { - color: var( - --color-page-section-background-color-5-newsroom-teaser-text-color - ); - background-color: var( - --color-page-section-background-color-5-newsroom-teaser-background-color - ); + color: var(--color-page-section-background-color-5-newsroom-teaser-text-color); + background-color: var(--color-page-section-background-color-5-newsroom-teaser-background-color); } .lgd-page-section--bg-colour-5 .newsroom-teaser a { - color: var( - --color-page-section-background-color-5-newsroom-teaser-link-color - ); + color: var(--color-page-section-background-color-5-newsroom-teaser-link-color); } .lgd-page-section--bg-colour-6 .newsroom-teaser { - color: var( - --color-page-section-background-color-6-newsroom-teaser-text-color - ); - background-color: var( - --color-page-section-background-color-6-newsroom-teaser-background-color - ); + color: var(--color-page-section-background-color-6-newsroom-teaser-text-color); + background-color: var(--color-page-section-background-color-6-newsroom-teaser-background-color); } .lgd-page-section--bg-colour-6 .newsroom-teaser a { - color: var( - --color-page-section-background-color-6-newsroom-teaser-link-color - ); + color: var(--color-page-section-background-color-6-newsroom-teaser-link-color); } /* Box Links */ .lgd-page-section--bg-colour-1 .box-link { color: var(--color-page-section-background-color-1-box-link-text-color); - border-color: var( - --color-page-section-background-color-1-box-link-border-color - ); - background-color: var( - --color-page-section-background-color-1-box-link-background-color - ); + border-color: var(--color-page-section-background-color-1-box-link-border-color); + background-color: var(--color-page-section-background-color-1-box-link-background-color); } .lgd-page-section--bg-colour-1 .box-link a { color: var(--color-page-section-background-color-1-box-link-link-color); } .lgd-page-section--bg-colour-2 .box-link { color: var(--color-page-section-background-color-2-box-link-text-color); - border-color: var( - --color-page-section-background-color-2-box-link-border-color - ); - background-color: var( - --color-page-section-background-color-2-box-link-background-color - ); + border-color: var(--color-page-section-background-color-2-box-link-border-color); + background-color: var(--color-page-section-background-color-2-box-link-background-color); } .lgd-page-section--bg-colour-2 .box-link a { color: var(--color-page-section-background-color-2-box-link-link-color); } .lgd-page-section--bg-colour-3 .box-link { color: var(--color-page-section-background-color-3-box-link-text-color); - border-color: var( - --color-page-section-background-color-3-box-link-border-color - ); - background-color: var( - --color-page-section-background-color-3-box-link-background-color - ); + border-color: var(--color-page-section-background-color-3-box-link-border-color); + background-color: var(--color-page-section-background-color-3-box-link-background-color); } .lgd-page-section--bg-colour-3 .box-link a { color: var(--color-page-section-background-color-3-box-link-link-color); } .lgd-page-section--bg-colour-4 .box-link { color: var(--color-page-section-background-color-4-box-link-text-color); - border-color: var( - --color-page-section-background-color-4-box-link-border-color - ); - background-color: var( - --color-page-section-background-color-4-box-link-background-color - ); + border-color: var(--color-page-section-background-color-4-box-link-border-color); + background-color: var(--color-page-section-background-color-4-box-link-background-color); } .lgd-page-section--bg-colour-4 .box-link a { color: var(--color-page-section-background-color-4-box-link-link-color); } .lgd-page-section--bg-colour-5 .box-link { color: var(--color-page-section-background-color-5-box-link-text-color); - border-color: var( - --color-page-section-background-color-5-box-link-border-color - ); - background-color: var( - --color-page-section-background-color-5-box-link-background-color - ); + border-color: var(--color-page-section-background-color-5-box-link-border-color); + background-color: var(--color-page-section-background-color-5-box-link-background-color); } .lgd-page-section--bg-colour-5 .box-link a { color: var(--color-page-section-background-color-5-box-link-link-color); } .lgd-page-section--bg-colour-6 .box-link { color: var(--color-page-section-background-color-6-box-link-text-color); - border-color: var( - --color-page-section-background-color-6-box-link-border-color - ); - background-color: var( - --color-page-section-background-color-6-box-link-background-color - ); + border-color: var(--color-page-section-background-color-6-box-link-border-color); + background-color: var(--color-page-section-background-color-6-box-link-background-color); } .lgd-page-section--bg-colour-6 .box-link a { color: var(--color-page-section-background-color-6-box-link-link-color); @@ -346,80 +262,44 @@ /* Featured Subsites */ .lgd-page-section--bg-colour-1 .featured-subsite { - color: var( - --color-page-section-background-color-1-featured-subsite-text-color - ); - background-color: var( - --color-page-section-background-color-1-featured-subsite-background-color - ); + color: var(--color-page-section-background-color-1-featured-subsite-text-color); + background-color: var(--color-page-section-background-color-1-featured-subsite-background-color); } .lgd-page-section--bg-colour-1 .featured-subsite a { - color: var( - --color-page-section-background-color-1-featured-subsite-link-color - ); + color: var(--color-page-section-background-color-1-featured-subsite-link-color); } .lgd-page-section--bg-colour-2 .featured-subsite { - color: var( - --color-page-section-background-color-2-featured-subsite-text-color - ); - background-color: var( - --color-page-section-background-color-2-featured-subsite-background-color - ); + color: var(--color-page-section-background-color-2-featured-subsite-text-color); + background-color: var(--color-page-section-background-color-2-featured-subsite-background-color); } .lgd-page-section--bg-colour-2 .featured-subsite a { - color: var( - --color-page-section-background-color-2-featured-subsite-link-color - ); + color: var(--color-page-section-background-color-2-featured-subsite-link-color); } .lgd-page-section--bg-colour-3 .featured-subsite { - color: var( - --color-page-section-background-color-3-featured-subsite-text-color - ); - background-color: var( - --color-page-section-background-color-3-featured-subsite-background-color - ); + color: var(--color-page-section-background-color-3-featured-subsite-text-color); + background-color: var(--color-page-section-background-color-3-featured-subsite-background-color); } .lgd-page-section--bg-colour-3 .featured-subsite a { - color: var( - --color-page-section-background-color-3-featured-subsite-link-color - ); + color: var(--color-page-section-background-color-3-featured-subsite-link-color); } .lgd-page-section--bg-colour-4 .featured-subsite { - color: var( - --color-page-section-background-color-4-featured-subsite-text-color - ); - background-color: var( - --color-page-section-background-color-4-featured-subsite-background-color - ); + color: var(--color-page-section-background-color-4-featured-subsite-text-color); + background-color: var(--color-page-section-background-color-4-featured-subsite-background-color); } .lgd-page-section--bg-colour-4 .featured-subsite a { - color: var( - --color-page-section-background-color-4-featured-subsite-link-color - ); + color: var(--color-page-section-background-color-4-featured-subsite-link-color); } .lgd-page-section--bg-colour-5 .featured-subsite { - color: var( - --color-page-section-background-color-5-featured-subsite-text-color - ); - background-color: var( - --color-page-section-background-color-5-featured-subsite-background-color - ); + color: var(--color-page-section-background-color-5-featured-subsite-text-color); + background-color: var(--color-page-section-background-color-5-featured-subsite-background-color); } .lgd-page-section--bg-colour-5 .featured-subsite a { - color: var( - --color-page-section-background-color-5-featured-subsite-link-color - ); + color: var(--color-page-section-background-color-5-featured-subsite-link-color); } .lgd-page-section--bg-colour-6 .featured-subsite { - color: var( - --color-page-section-background-color-6-featured-subsite-text-color - ); - background-color: var( - --color-page-section-background-color-6-featured-subsite-background-color - ); + color: var(--color-page-section-background-color-6-featured-subsite-text-color); + background-color: var(--color-page-section-background-color-6-featured-subsite-background-color); } .lgd-page-section--bg-colour-6 .featured-subsite a { - color: var( - --color-page-section-background-color-6-featured-subsite-link-color - ); + color: var(--color-page-section-background-color-6-featured-subsite-link-color); } diff --git a/css/components/service-landing-page.css b/css/components/service-landing-page.css index a20197a7..c8b6b69f 100644 --- a/css/components/service-landing-page.css +++ b/css/components/service-landing-page.css @@ -1,8 +1,7 @@ .service-landing-page__contact { margin-block-end: var(--vertical-rhythm-spacing); padding: var(--spacing); - border-inline-start: var(--border-width-large) var(--border-style) - var(--color-accent); + border-inline-start: var(--border-width-large) var(--border-style) var(--color-accent); background-color: var(--color-grey-lighter); } @@ -16,8 +15,7 @@ align-items: center; } -.service-landing-page__contact-list-item - + .service-landing-page__contact-list-item { +.service-landing-page__contact-list-item + .service-landing-page__contact-list-item { margin-block-start: var(--spacing-smaller); } diff --git a/css/components/service-statuses.css b/css/components/service-statuses.css index bfdb7a8a..7f4f96d9 100644 --- a/css/components/service-statuses.css +++ b/css/components/service-statuses.css @@ -70,16 +70,8 @@ background-color: var(--color-focus); } -.service-status - .nav-tabs - .nav-item - .nav-link.active:hover - .service-status-title, -.service-status - .nav-tabs - .nav-item - .nav-link.active:focus - .service-status-title { +.service-status .nav-tabs .nav-item .nav-link.active:hover .service-status-title, +.service-status .nav-tabs .nav-item .nav-link.active:focus .service-status-title { text-decoration: underline; } diff --git a/css/components/sidebar.css b/css/components/sidebar.css index 5553db2d..80ab80f5 100644 --- a/css/components/sidebar.css +++ b/css/components/sidebar.css @@ -9,8 +9,7 @@ .sidebar .lgd-region__inner > *, .blog-channel__sidebar > *, .newsroom__sidebar > * { - padding: var(--sidebar-exposed-form-padding-vertical) - var(--sidebar-exposed-form-padding-horizontal); + padding: var(--sidebar-exposed-form-padding-vertical) var(--sidebar-exposed-form-padding-horizontal); background-color: var(--sidebar-exposed-form-bg-color); } diff --git a/css/components/sitewide-search.css b/css/components/sitewide-search.css index 40d2e156..134c22ee 100644 --- a/css/components/sitewide-search.css +++ b/css/components/sitewide-search.css @@ -1,6 +1,5 @@ .lgd-search-results-list__header-container { - padding: var(--sitewide-search-header-container-padding-vertical) - var(--sitewide-search-header-container-padding-horizontal); + padding: var(--sitewide-search-header-container-padding-vertical) var(--sitewide-search-header-container-padding-horizontal); border: var(--border); border-radius: var(--border-radius); } diff --git a/css/components/step-by-step.css b/css/components/step-by-step.css index 96f03412..60ee5bf0 100644 --- a/css/components/step-by-step.css +++ b/css/components/step-by-step.css @@ -5,8 +5,7 @@ /* Sidebar Block Header */ @media screen and (min-width: 48rem) { - .block-views-blocklocalgov-step-by-step-navigation-steps - .step-by-step-pages__relationship { + .block-views-blocklocalgov-step-by-step-navigation-steps .step-by-step-pages__relationship { display: none; } } diff --git a/css/components/sticky-header.css b/css/components/sticky-header.css index 4c655868..07bfa6d1 100644 --- a/css/components/sticky-header.css +++ b/css/components/sticky-header.css @@ -5,9 +5,7 @@ } .sticky-header--sticky .lgd-header + * { - margin-block-start: calc( - var(--lgd-sticky-header-position) + var(--lgd-sticky-header-height) - ); + margin-block-start: calc(var(--lgd-sticky-header-position) + var(--lgd-sticky-header-height)); scroll-padding: var(--lgd-sticky-header-height); } diff --git a/css/components/wysiwyg-styles.css b/css/components/wysiwyg-styles.css index 1596d16c..49f19d37 100644 --- a/css/components/wysiwyg-styles.css +++ b/css/components/wysiwyg-styles.css @@ -65,9 +65,7 @@ height: 0.75rem; margin-inline-start: 0.25rem; content: ""; - background-color: var( - --external-link-icon-color - ); /* https://stackoverflow.com/questions/51395179/svg-fill-with-css-variables#58536915 */ + background-color: var(--external-link-icon-color); /* https://stackoverflow.com/questions/51395179/svg-fill-with-css-variables#58536915 */ -webkit-mask-image: url("../../templates/includes/icons/external-link.svg"); mask-image: url("../../templates/includes/icons/external-link.svg"); From a16993c00e5b3f0a90a9861029e68c8289ddc504 Mon Sep 17 00:00:00 2001 From: Lee Mills Date: Thu, 23 Jan 2025 15:12:21 +0000 Subject: [PATCH 2/2] fix: stylelint errors --- css/base/variables.css | 1 - css/components/wysiwyg-styles.css | 1 - 2 files changed, 2 deletions(-) diff --git a/css/base/variables.css b/css/base/variables.css index 84210576..ad85ced9 100644 --- a/css/base/variables.css +++ b/css/base/variables.css @@ -286,7 +286,6 @@ body { /* Guide Navigation */ --section-spacing-vertical-guide-nav: calc(var(--spacing-large) + 1rem); /* 1rem to account for padding on left of bullets */ - --section-spacing-horizontal-guide-nav: var(--spacing-large); --guide-nav-column-count: 3; diff --git a/css/components/wysiwyg-styles.css b/css/components/wysiwyg-styles.css index 49f19d37..89582271 100644 --- a/css/components/wysiwyg-styles.css +++ b/css/components/wysiwyg-styles.css @@ -66,7 +66,6 @@ margin-inline-start: 0.25rem; content: ""; background-color: var(--external-link-icon-color); /* https://stackoverflow.com/questions/51395179/svg-fill-with-css-variables#58536915 */ - -webkit-mask-image: url("../../templates/includes/icons/external-link.svg"); mask-image: url("../../templates/includes/icons/external-link.svg"); }