@bloom-housing/ui-components 12.7.6 → 12.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "12.7.6",
+  "version": "12.7.7",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/ui-components",

package/src/global/forms.scss

@@ -38,9 +38,9 @@
   .field-border {
     label {
       background-color: var(--bloom-color-white);
-      padding-top: var(--bordered-vertical-padding);
-      padding-bottom: var(--bordered-vertical-padding);
-      padding-left: var(--bordered-leftward-padding);
+      padding-block-start: var(--bordered-vertical-padding);
+      padding-block-end: var(--bordered-vertical-padding);
+      padding-inline-start: var(--bordered-leftward-padding);
       border-width: var(--bordered-border-width);
       border-radius: var(--bordered-border-radius);
       border-color: var(--bloom-color-gray-450);
@@ -80,8 +80,8 @@
     }
 
     select.input {
-      @apply pl-3;
-      @apply pr-8;
+      @apply ps-3;
+      @apply pe-8;
     }
 
     input.input {
@@ -98,11 +98,11 @@
     }
 
     .prepend + input[aria-invalid="false"] {
-      @apply pl-8;
+      @apply ps-8;
     }
 
     .prepend + input[aria-invalid="true"] {
-      @apply pl-12;
+      @apply ps-12;
     }
 
     &.control-narrower {
@@ -114,7 +114,7 @@
   input[type="radio"] {
     opacity: 0;
     position: absolute;
-    margin-left: -20px;
+    margin-inline-start: -20px;
 
     &:focus {
       text-decoration: none;
@@ -287,7 +287,7 @@ input[type="number"] {
   @apply flex;
 
   .field {
-    @apply mr-5;
+    @apply me-5;
     @apply mb-0;
   }
 }
@@ -303,23 +303,23 @@ input[type="number"] {
 }
 
 .field--inline + .field--inline {
-  margin-left: 1.5rem;
+  margin-inline-start: 1.5rem;
 }
 
 .flex > .field,
 .field-group--date .field {
   @apply flex-auto;
-  margin-left: 0.325rem;
-  margin-right: 0.325rem;
+  margin-inline-start: 0.325rem;
+  margin-inline-end: 0.325rem;
 }
 
 .flex > .field,
 .field-group--date .field {
   &:first-of-type {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   &:last-of-type {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }
 

package/src/global/lists.scss

@@ -13,8 +13,7 @@
 
   .header-hidden {
     @screen md {
-      @apply pt-0;
-      @apply pb-0;
+      padding-block: 0;
     }
   }
 }
@@ -28,13 +27,16 @@
   position: relative;
   display: block;
   counter-increment: list;
-  margin: 0 0 1rem 2rem;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-block-end: 1rem;
+  margin-inline-start: 2rem;
 }
 .numbered-list li:before {
   display: inline-block;
   position: absolute;
-  top: 0;
-  left: -2rem;
+  inset-block-start: 0;
+  inset-inline-start: -2rem;
   text-align: center;
   content: counter(list);
   border-radius: 50%;
@@ -49,7 +51,10 @@
 }
 @screen md {
   .numbered-list li {
-    margin: 0 0 1.5rem 2.5rem;
+    margin-block-start: 0;
+    margin-inline-end: 0;
+    margin-block-end: 1.5rem;
+    margin-inline-start: 2.5rem;
   }
   .numbered-list li:before {
     font-size: 1rem;
@@ -57,7 +62,7 @@
     width: 2rem;
     height: 2rem;
     line-height: 2rem;
-    top: -0.25rem;
-    left: -2.5rem;
+    inset-block-start: -0.25rem;
+    inset-inline-start: -2.5rem;
   }
 }

package/src/headers/StepHeader.scss

@@ -33,11 +33,11 @@
     height: var(--circle-desktop-size);
   }
   padding: 0rem var(--circle-x-padding);
-  margin-right: var(--title-spacing);
+  margin-inline-end: var(--title-spacing);
   border-radius: 50%;
 }
 
 .step-header__title {
-  margin-left: var(--title-spacing);
+  margin-inline-start: var(--title-spacing);
   font-weight: var(--label-font-weight);
 }

package/src/navigation/ProgressNav.scss

@@ -47,8 +47,8 @@
     width: var(--dot-size);
     background-color: var(--completed-step-color);
     border-radius: 50%;
-    top: 0;
-    left: 0.5rem;
+    inset-block-start: 0;
+    inset-inline-start: 0.5rem;
     content: "";
     transform: translateX(-50%);
     z-index: 2;
@@ -58,34 +58,34 @@
     position: absolute;
     background-color: var(--completed-step-color);
     width: 100%;
-    left: 0.5rem;
-    top: 0.4rem;
+    inset-inline-start: 0.9rem;
+    inset-block-start: 0.4rem;
     content: "";
     height: 1px;
   }
 
   &:first-of-type {
     &:after {
-      left: 20%;
+      inset-inline-start: 32%;
     }
   }
 
   &:last-of-type {
     &:after {
-      left: auto;
-      right: 80%;
+      inset-inline-start: auto;
+      inset-inline-end: 80%;
     }
   }
   .progress-nav__item-container {
-    padding-top: var(--dot-label-padding-top);
-    padding-left: var(--dot-label-padding-left);
+    padding-block-start: var(--dot-label-padding-top);
+    padding-inline-start: var(--dot-label-padding-left);
     color: var(--completed-step-font-color);
     display: block;
     position: relative;
     pointer-events: none;
     cursor: default;
     z-index: 3;
-    padding-right: var(--dot-label-padding-right);
+    padding-inline-end: var(--dot-label-padding-right);
   }
 
   &.is-active {
@@ -129,8 +129,8 @@
 .progress-nav__bar-item {
   // drop the labels on mobile view
   font-size: 0;
-  padding-top: var(--bar-label-padding-top);
-  padding-left: var(--bar-label-padding-left);
+  padding-block-start: var(--bar-label-padding-top);
+  padding-inline-start: var(--bar-label-padding-left);
   position: relative;
   display: table-cell;
   white-space: normal;

package/src/notifications/AlertBox.scss

@@ -102,7 +102,7 @@
 
 .alert-box__close {
   font-size: var(--body-close-font-size);
-  right: var(--horizontal-padding);
+  inset-inline-end: var(--horizontal-padding);
   margin-inline-start: var(--bloom-s3);
   padding: 0;
   line-height: var(--bloom-s4);
@@ -119,11 +119,11 @@
 
 .alert-box__sticky {
   position: sticky;
-  top: var(--bloom-s3);
+  inset-block-start: var(--bloom-s3);
   margin-block-start: var(--bloom-s3);
   margin-inline-end: var(--bloom-s3);
   z-index: 10;
-  margin-left: auto;
+  margin-inline-start: auto;
   width: fit-content;
 }
 

package/src/page_components/ApplicationTimeline.scss

@@ -1,6 +1,6 @@
 .markdown ul.application-timeline {
   @apply mb-8;
-  @apply ml-0;
+  @apply ms-0;
 }
 
 .application-timeline {
@@ -11,9 +11,9 @@
     text-transform: unset;
 
     .absolute {
-      margin-top: 0.25rem;
+      margin-block-start: 0.25rem;
       z-index: 2;
-      margin-left: -0.4rem;
+      margin-inline-start: -0.4rem;
     }
 
     p {
@@ -21,23 +21,23 @@
     }
 
     &:before {
-      left: 50%;
+      inset-inline-start: 50%;
     }
 
     &:after {
-      left: 0;
+      inset-inline-start: 0;
     }
 
     &:first-of-type {
       &:after {
-        left: 50%;
+        inset-inline-start: 50%;
       }
     }
 
     &:last-of-type {
       &:after {
-        left: auto;
-        right: 50%;
+        inset-inline-start: auto;
+        inset-inline-end: 50%;
       }
     }
 
@@ -67,6 +67,6 @@
   }
 
   .progress-nav__dot-item::after {
-    top: 1rem;
+    inset-block-start: 1rem;
   }
 }