PR ahead of 1.8.1

css/base/base.css

@@ -13,7 +13,7 @@ html {
 *::before,
 *::after {
   box-sizing: border-box;
-  margin-top: 0; /* Removing top margin, for better vertical rhythm layout */
+  margin-block-start: 0; /* Removing top margin, for better vertical rhythm layout */
 }
 
 dialog {
@@ -43,7 +43,7 @@ body {
 
 main {
   /* To give us a sticky footer. */
-  margin-bottom: auto;
+  margin-block-end: auto;
 }
 
 a {
@@ -78,7 +78,7 @@ h5,
 h6,
 .h6,
 .heading {
-  margin-bottom: var(--vertical-rhythm-spacing);
+  margin-block-end: var(--vertical-rhythm-spacing);
   font-family: var(--font-secondary);
 }
 
@@ -152,19 +152,19 @@ ol,
 pre,
 table,
 blockquote {
-  margin-bottom: var(--vertical-rhythm-spacing);
+  margin-block-end: var(--vertical-rhythm-spacing);
 }
 
 ul ul,
 ol ol,
 ul ol,
 ol ul {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 blockquote:not(.pull-out-quote__content) {
   padding-inline-start: var(--quote-padding);
-  padding-left: var(--quote-padding-left);
+  padding-inline-start: var(--quote-padding-inline-start);
   border-inline-start: var(--quote-border);
   border-color: var(--color-accent);
 }
@@ -202,6 +202,15 @@ th {
   background-color: var(--table-bg-color);
 }
 
+/* Responsive tables for table field tables */
+.field--name-localgov-table {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+.tablefield-wrapper {
+  overflow-x: auto;
+}
+
 input,
 select,
 option,

css/base/ckeditor.css

@@ -50,7 +50,7 @@
 
 .btn.btn-start::after {
   top: -2px;
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
   content: "\203A";
   font-size: 2.875rem;
 }

css/base/ckeditor5.css

@@ -51,7 +51,7 @@
 .btn.btn-start::after {
   position: relative;
   top: 7px;
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
   content: "\203A" / "";
   font-size: 2.875rem;
 }
@@ -67,7 +67,7 @@
 
 /* Call out */
 .callout {
-  padding-left: 0.5rem;
+  padding-inline-start: 0.5rem;
   color: white;
   font-size: 1.3125rem;
   line-height: 2;

css/base/variables.css

@@ -234,8 +234,8 @@ body {
   --input-text-color-hover: var(--color-accent);
   --input-icon-color: var(--input-text-color);
   --input-icon-color-hover: var(--color-accent);
-  --input-border-color: var(--color-grey-medium);
-  --input-border-color-hover: var(--color-grey-medium);
+  --input-border-color: var(--color-grey-dark);
+  --input-border-color-hover: var(--color-grey-dark);
   --input-bg-color: var(--color-white);
   --input-bg-color-hover: var(--color-grey-light);
   --input-border-radius: 0;
@@ -264,7 +264,8 @@ body {
 
   /* File Upload Items */
   --file-upload-border: var(--border);
-  --file-upload-border-left-size: var(--border-width-large);
+  --file-upload-border-left-size: var(--border-width-large); /* Deprecated */
+  --file-upload-border-inline-start-size: var(--border-width-large);
   --file-upload-border-color: var(--color-accent);
   --file-upload-bg-hover-color: var(--color-accent);
   --file-upload-text-hover-color: var(--color-white);
@@ -328,7 +329,8 @@ body {
 
   /* Quote */
   --quote-padding: var(--spacing-larger);
-  --quote-padding-left: var(--spacing-larger);
+  --quote-padding-left: var(--spacing-larger); /* Deprecated */
+  --quote-padding-inline-start: var(--spacing-larger);
   --quote-border: var(--border-large);
   --quote-border-color: var(--color-accent);
   --quote-bg-color: var(--color-grey-lighter);

css/components/add-to-calendar.css

@@ -1,5 +1,5 @@
 .localgov-add-to-calendar:has(+ *) {
-  margin-bottom: var(--vertical-rhythm-spacing);
+  margin-block-end: var(--vertical-rhythm-spacing);
 }
 
 .localgov-add-to-calendar__trigger {
@@ -48,5 +48,5 @@
 }
 
 .localgov-add-to-calendar__item + .localgov-add-to-calendar__item {
-  margin-top: var(--spacing);
+  margin-block-start: var(--spacing);
 }

css/components/blog.css

@@ -6,12 +6,12 @@
 
 .field--name-localgov-blog-related-posts > .field__items > .field__item,
 .field--name-localgov-blog-related-posts > .field__item {
-  margin-bottom: var(--vertical-rhythm-spacing);
+  margin-block-end: var(--vertical-rhythm-spacing);
 }
 
 /* Featured posts */
 .lgd-blog__featured {
-  margin-bottom: var(--vertical-rhythm-spacing);
+  margin-block-end: var(--vertical-rhythm-spacing);
 }
 
 .field--name-localgov-blog-channel-featured > .field__items {
@@ -28,6 +28,6 @@
 }
 
 .view-localgov-blog-list .view-content {
-  padding-top: var(--vertical-rhythm-spacing);
-  border-top: var(--border);
+  padding-block-start: var(--vertical-rhythm-spacing);
+  border-block-start: var(--border);
 }

css/components/box-links.css

@@ -1,14 +1,14 @@
 .box-links-listing {
-  margin-bottom: var(--vertical-rhythm-spacing);
+  margin-block-end: var(--vertical-rhythm-spacing);
 }
 
 .box-links-listing__list {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .box-links-listing--boxes .box-links-listing__list-item,
 .box-links-listing__list .box-links-listing__list-item {
-  margin-bottom: var(--vertical-rhythm-spacing);
+  margin-block-end: var(--vertical-rhythm-spacing);
 }
 
 .box-links-listing__list-item::marker {
@@ -21,22 +21,20 @@
 }
 
 .box-link > * {
-  margin-bottom: var(--box-link-content-spacing);
-  padding-right: var(--box-link-content-spacing);
-  padding-left: var(--box-link-content-spacing);
+  margin-block-end: var(--box-link-content-spacing);
+  padding-inline: var(--box-link-content-spacing);
 }
 
 .box-link__image {
-  padding-right: 0;
-  padding-left: 0;
+  padding-inline: 0;
 }
 
 .box-link__title {
-  margin-top: var(--box-link-content-spacing);
+  margin-block-start: var(--box-link-content-spacing);
 }
 
 .box-link__image + .box-link__title {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 .box-link__link::after {

css/components/breadcrumbs.css

@@ -8,30 +8,30 @@
 */
 
 .lgd-region--breadcrumb {
-  margin-bottom: var(--breadcrumbs-spacing-bottom);
+  margin-block-end: var(--breadcrumbs-spacing-bottom);
   background-color: var(--breadcrumbs-background-color);
 }
 
 .breadcrumbs {
   padding: var(--breadcrumbs-padding-vertical) var(--breadcrumbs-padding-horizontal);
-  border-bottom: var(--breadcrumbs-border);
+  border-block-end: var(--breadcrumbs-border);
 }
 
 .breadcrumbs__list {
-  margin-bottom: 0;
-  padding-left: 0;
+  margin-block-end: 0;
+  padding-inline-start: 0;
   list-style: none;
 }
 
 .breadcrumbs__item {
   display: inline-block;
-  margin-right: 0.25rem;
+  margin-inline-end: 0.25rem;
   font-size: var(--breadcrumbs-font-size);
 }
 
 .breadcrumbs__item + .breadcrumbs__item::before {
   display: inline-block;
-  margin-right: 0.25rem;
+  margin-inline-end: 0.25rem;
   content: var(--breadcrumbs-divider);
   color: var(--breadcrumbs-link-color);
 }

css/components/callout-box.css

@@ -27,7 +27,7 @@
 @media screen and (min-width: 48rem) {
   .call-out-box--has-image .call-out-box__content {
     width: 75%;
-    padding-right: 20%;
+    padding-inline-end: 20%;
     background: linear-gradient(to right, var(--call-out-box-bg-color) 75%, transparent);
   }
 }

css/components/directories.css

@@ -6,7 +6,7 @@
 
 .localgov-directories-venue legend,
 .localgov-directories-page legend {
-  margin-bottom: var(--vertical-rhythm-spacing);
+  margin-block-end: var(--vertical-rhythm-spacing);
   font-size: var(--font-size-large);
   font-weight: bold;
 }
@@ -17,13 +17,13 @@
 }
 
 .localgov-directories-page fieldset .field + .field {
-  margin-top: var(--vertical-rhythm-spacing);
+  margin-block-start: var(--vertical-rhythm-spacing);
 }
 
 .localgov-directories-venue .field--name-location {
-  margin-bottom: var(--vertical-rhythm-spacing);
+  margin-block-end: var(--vertical-rhythm-spacing);
 }
 
 .localgov-directory__content .views-element-container + .views-element-container {
-  margin-top: var(--vertical-rhythm-spacing);
+  margin-block-start: var(--vertical-rhythm-spacing);
 }

css/components/embedded-views.css

@@ -1,3 +1,3 @@
 .embedded-views__heading {
-  margin-bottom: var(--spacing-large);
+  margin-block-end: var(--spacing-large);
 }

css/components/events.css

@@ -3,14 +3,14 @@
 }
 
 .field--name-localgov-event-image + .field--name-localgov-event-date {
-  margin-top: var(--vertical-rhythm-spacing);
+  margin-block-start: var(--vertical-rhythm-spacing);
 }
 
 .localgov-event .date-recur-date,
 .field--name-localgov-event-provider,
 .field--name-localgov-event-venue,
 .localgov-event .field--name-location > * {
-  margin-bottom: var(--vertical-rhythm-spacing);
+  margin-block-end: var(--vertical-rhythm-spacing);
 }
 
 .field--name-localgov-event-call-to-action a {

css/components/facets.css

@@ -1,13 +1,13 @@
 .facets-widget__list {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .facets-widget__list + * {
-  margin-top: var(--vertical-rhythm-spacing);
+  margin-block-start: var(--vertical-rhythm-spacing);
 }
 
 .facet-item + .facet-item {
-  margin-top: var(--vertical-rhythm-spacing);
+  margin-block-start: var(--vertical-rhythm-spacing);
 }
 
 .facet-item::marker {

css/components/fact-box.css

@@ -1,5 +1,5 @@
 .fact-box {
-  margin-bottom: var(--vertical-rhythm-spacing);
+  margin-block-end: var(--vertical-rhythm-spacing);
   text-align: center;
   border: var(--fact-box-border);
   border-color: var(--fact-box-border-color);

css/components/featured-subsite.css

@@ -1,14 +1,13 @@
 .featured-subsite {
-  padding-bottom: var(--spacing);
+  padding-block-end: var(--spacing);
   background-color: var(--featured-subsite-bg-color);
 }
 .featured-subsite > * {
-  margin-bottom: var(--vertical-rhythm-spacing);
+  margin-block-end: var(--vertical-rhythm-spacing);
 }
 
 .featured-subsite > *:not(.featured-subsite__image) {
-  margin-right: var(--spacing-larger);
-  margin-left: var(--spacing-larger);
+  margin-inline: var(--spacing-larger);
 }
 
 .featured-subsite__image img {

css/components/featured-teasers.css

@@ -3,7 +3,7 @@
 }
 
 .featured-teasers__teasers > .field__items > .field__item + .field__item {
-  margin-top: var(--vertical-rhythm-spacing);
+  margin-block-start: var(--vertical-rhythm-spacing);
 }
 
 .featured-teaser__content {

css/components/footer.css

@@ -1,10 +1,9 @@
 .lgd-footer {
-  margin-top: clamp(1rem, 10vw, var(--section-spacing-vertical-footer));
+  margin-block-start: clamp(1rem, 10vw, var(--section-spacing-vertical-footer));
 }
 
 .lgd-footer__pre-footer {
-  padding-top: clamp(1rem, 10vw, var(--section-spacing-vertical-pre-footer));
-  padding-bottom: clamp(1rem, 10vw, var(--section-spacing-vertical-pre-footer));
+  padding-block: clamp(1rem, 10vw, var(--section-spacing-vertical-pre-footer));
   color: var(--color-pre-footer-text);
   background-color: var(--color-section-pre-footer-bg);
 }
@@ -14,8 +13,7 @@
 }
 
 .lgd-footer__footer {
-  padding-top: clamp(1rem, 10vw, var(--section-spacing-vertical-footer));
-  padding-bottom: clamp(1rem, 10vw, var(--section-spacing-vertical-footer));
+  padding-block: clamp(1rem, 10vw, var(--section-spacing-vertical-footer));
   color: var(--color-footer-text);
   background-color: var(--color-section-footer-bg);
 }
@@ -25,8 +23,7 @@
 }
 
 .lgd-footer__post-footer {
-  padding-top: clamp(1rem, 10vw, var(--section-spacing-vertical-post-footer));
-  padding-bottom: clamp(1rem, 10vw, var(--section-spacing-vertical-post-footer));
+  padding-block: clamp(1rem, 10vw, var(--section-spacing-vertical-post-footer));
   color: var(--color-post-footer-text);
   background-color: var(--color-section-post-footer-bg);
 }