sets up variables for contact component CSS

localgovdrupal · Dec 19, 2024 · 481523d · 481523d
1 parent 8e61f4d
commit 481523d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/css/base/variables.css b/css/base/variables.css
@@ -472,6 +472,12 @@ body {
   --alert-banner-inner-padding-vertical: var(--spacing);
   --alert-banner-inner-padding-horizontal: 0;
 
+  /* Contact */
+  --contact-border: var(--border);
+  --contact-accent-color: var(--color-accent);
+  --contact-spacing: var(--spacing);
+  --contact-accent-color-contrast: var(--color-white);
+
   /* Leaflet Mapping */
   --leaflet-map-outline-stroke-colour: #38f;
 

diff --git a/css/components/contact.css b/css/components/contact.css
@@ -1,31 +1,31 @@
 .lgd-contact__headings,
 .lgd-contact__content {
-  border: var(--border);
-  border-color: var(--color-accent);
-  padding: var(--spacing);
+  border: var(--contact-border);
+  border-color: var(--contact-accent-color);
+  padding: var(--contact-spacing);
 }
 
 .lgd-contact__headings {
   border-block-end: 0;
-  background-color: var(--color-accent);
-  color: var(--color-white);
+  background-color: var(--contact-accent-color);
+  color: var(--contact-accent-color-contrast);
 }
 
 .lgd-contact__headings h2 {
   margin-block-end: 0;
-  color: var(--color-white);
+  color: var(--contact-accent-color-contrast);
 }
 
 .lgd-contact__content {
   display: grid;
-  gap: var(--spacing);
+  gap: var(--contact-spacing);
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 }
 
 .lgd-contact__group {
-  padding-block-end: var(--spacing);
-  border-block-end: var(--border);
-  border-color: var(--color-accent);
+  padding-block-end: var(--contact-spacing);
+  border-block-end: var(--contact-border);
+  border-color: var(--contact-accent-color);
 }
 
 .lgd-contact__group > h3 {
@@ -35,21 +35,21 @@
 .lgd-contact__group > * + *,
 .lgd-contact__group .field--name-localgov-contact-other-social > .field__item + .field__item,
 .lgd-contact__group .office-hours__item + .office-hours__item {
-  margin-block-start: var(--spacing);
+  margin-block-start: var(--contact-spacing);
 }
 
 .lgd-contact__group .field__label {
   float: none;
 }
 
 .lgd-contact__group + .lgd-contact__group {
-  margin-block-start: var(--spacing);
+  margin-block-start: var(--contact-spacing);
 }
 
 .lgd-contact__group .office-hours__item-label {
   display: block;
 }
 
 .lgd-contact__location {
-  margin-block-start: var(--spacing);
+  margin-block-start: var(--contact-spacing);
 }