fix: add logical properties to components (#1979)

* fix: update physical properties to logical properties * fix: to logical border radius * style: add override to body * style: update inset values back to physical values * fix: update input js * style: update property * fix: remove rtl call * fix: add rtl spacer styles * fix: update input group padding * fix: update rtl tooltip arrow positioning * fix: update variable name * fix: added missing logical props * fix: remove icon flex reverse * fix: linter fix
Kajabi · Oct 28, 2024 · 17885ab · 17885ab
1 parent 703bfab
commit 17885ab
Show file tree

Hide file tree

Showing 101 changed files with 792 additions and 704 deletions.
diff --git a/docs/app/views/lockup/lockup/unlock.erb b/docs/app/views/lockup/lockup/unlock.erb
@@ -1,4 +1,4 @@
-<%= sage_component SageContainer, { size: "md", html_attributes: { style: "padding-top: 200px;"}} do %>
+<%= sage_component SageContainer, { size: "md", html_attributes: { style: "padding-block-start: 200px;"}} do %>
   <%= image_tag("media/images/sage.svg", width: 100) %>
   <h1 class="t-sage-heading-1">Sage Design System</h1>
   <h2 class="t-sage-heading-6">SCSS Based Component Library for our applications UI</h2>
@@ -13,7 +13,7 @@
     </div>
   <% end %>
 
-  <%= form_for :lockup, url: { action: 'unlock' }, html: {style: "padding-top: 50px"} do |form| %>
+  <%= form_for :lockup, url: { action: 'unlock' }, html: {style: "padding-block-start: 50px"} do |form| %>
     <% if params[:return_to].present? %>
       <%= form.hidden_field "return_to", value: params[:return_to] %>
     <% elsif @return_to.present? %>

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_assistant.scss b/docs/lib/sage-frontend/stylesheets/docs/_assistant.scss
@@ -27,7 +27,7 @@
 }
 
 .sage-theme-switch {
-  margin-bottom: 0;
+  margin-block-end: 0;
 
   .sage-switch__label {
     color: sage-color(white);

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss
@@ -11,8 +11,8 @@
 // color block groupings
 .colors {
   overflow: hidden;
-  margin-top: sage-spacing();
-  margin-bottom: sage-spacing();
+  margin-block-start: sage-spacing();
+  margin-block-end: sage-spacing();
   border-radius: sage-border(radius);
 }
 
@@ -99,7 +99,7 @@
 
       &::after {
         content: "#{$hex}";
-        padding-left: sage-spacing(xs);
+        padding-inline-start: sage-spacing(xs);
         font-weight: sage-font-weight(semibold);
         text-transform: uppercase;
       }

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_docs_container.scss b/docs/lib/sage-frontend/stylesheets/docs/_docs_container.scss
@@ -5,8 +5,8 @@
 ================================================== */
 
 .docs-container {
-  margin-top: sage-spacing();
-  margin-bottom: sage-spacing();
+  margin-block-start: sage-spacing();
+  margin-block-end: sage-spacing();
 
   @include sage-panel;
 }

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_example.scss b/docs/lib/sage-frontend/stylesheets/docs/_example.scss
@@ -62,26 +62,26 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
 }
 
 .example__block {
-  margin-top: sage-spacing(sm);
-  margin-bottom: sage-spacing(sm);
+  margin-block-start: sage-spacing(sm);
+  margin-block-end: sage-spacing(sm);
 }
 
 .example__block--md {
-  margin-top: sage-spacing(md);
-  margin-bottom: sage-spacing(md);
+  margin-block-start: sage-spacing(md);
+  margin-block-end: sage-spacing(md);
 }
 
 .example__block--lg {
-  margin-top: sage-spacing(lg);
-  margin-bottom: sage-spacing(lg);
+  margin-block-start: sage-spacing(lg);
+  margin-block-end: sage-spacing(lg);
 }
 
 .example__expand-btn {
   @include sage-button-style-reset();
   position: absolute;
   z-index: sage-z_index(raised);
-  bottom: sage-spacing(xs);
-  left: 0;
+  inset-block-end: sage-spacing(xs);
+  inset-inline-start: 0;
   width: 100%;
   padding: sage-spacing(xs);
   color: $-example-code-preview-button-color;
@@ -131,18 +131,18 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
   max-height: $-example-code-preview-height;
 
   .prettyprint {
-    margin-bottom: 0;
-    padding-bottom: sage-spacing(xl);
+    margin-block-end: 0;
+    padding-block-end: sage-spacing(xl);
   }
 
   &::before {
     content: "";
     display: block;
     z-index: sage-z-index(default, 100);
     position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
     height: 100%;
     background-image: linear-gradient(to bottom, rgba($docs-code-editor-background, 0) 0%, rgba($docs-code-editor-background, 0.9) 100%);
     transition: map-get($sage-transitions, default);
@@ -168,7 +168,7 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
   }
   .sage-card__header {
     padding: sage-spacing();
-    padding-bottom: sage-spacing(xs);
+    padding-block-end: sage-spacing(xs);
     code {
       background: sage-color(grey, 300);
     }

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss
@@ -6,7 +6,7 @@
 
 .grid-item {
   width: 100%;
-  margin-bottom: sage-spacing(md);
+  margin-block-end: sage-spacing(md);
   padding: sage-spacing(xs) sage-spacing(md);
   text-align: center;
   background: sage-color(grey, 200);

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_home.scss b/docs/lib/sage-frontend/stylesheets/docs/_home.scss
@@ -14,7 +14,7 @@
   background-color: sage-color(primary, 500);
 
   @media (max-width: sage-breakpoint(md-min)) {
-    padding-bottom: sage-spacing(xl);
+    padding-block-end: sage-spacing(xl);
   }
 
   .sage-btn--subtle.sage-btn--secondary {
@@ -32,8 +32,8 @@
 
 .docs-hero__background {
   position: absolute;
-  left: 0;
-  top: 0;
+  inset-inline-start: 0;
+  inset-block-start: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -44,8 +44,8 @@
 }
 
 .docs-hero__title {
-  margin-bottom: sage-spacing(sm);
-  margin-top: sage-spacing();
+  margin-block-end: sage-spacing(sm);
+  margin-block-start: sage-spacing();
   font-size: 4rem;
   line-height: 1;
   color: inherit;
@@ -64,20 +64,20 @@
 }
 
 .docs-section__title {
-  margin-bottom: sage-spacing(2xl);
+  margin-block-end: sage-spacing(2xl);
 
   @media (max-width: sage-breakpoint(md-min)) {
-    margin-bottom: sage-spacing();
+    margin-block-end: sage-spacing();
   }
 }
 
 .docs-section__icon {
-  margin-bottom: sage-spacing();
+  margin-block-end: sage-spacing();
 }
 
 .docs-section__platform-icon {
   width: rem(48px);
-  margin-bottom: sage-spacing();
+  margin-block-end: sage-spacing();
 }
 
 .docs-iframe {
@@ -90,8 +90,8 @@
     content: "";
     position: absolute;
     z-index: sage-z-index(default, 1);
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     height: 100%;
     width: 100%;
     backdrop-filter: blur(70px);

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_icon.scss b/docs/lib/sage-frontend/stylesheets/docs/_icon.scss
@@ -9,7 +9,7 @@
   flex-direction: column;
   flex-wrap: wrap;
   align-items: center;
-  margin-bottom: sage-spacing();
+  margin-block-end: sage-spacing();
   padding: sage-spacing(lg) sage-spacing(sm);
   text-align: center;
   background: sage-color(grey, 150);
@@ -18,15 +18,15 @@
 }
 
 .docs-icon-block__label {
-  margin-top: sage-spacing(xs);
-  margin-bottom: 0;
+  margin-block-start: sage-spacing(xs);
+  margin-block-end: 0;
   font-size: sage-font-size(body-xs);
   font-weight: sage-font-weight(semibold);
 }
 
 
 .docs-icon-inline {
-  margin-bottom: sage-spacing(sm);
+  margin-block-end: sage-spacing(sm);
   padding: sage-spacing(sm);
   text-align: right;
   background: sage-color(grey, 150);

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_nav.scss b/docs/lib/sage-frontend/stylesheets/docs/_nav.scss
@@ -20,7 +20,7 @@
   }
 
   .docs-hero & {
-    margin-bottom: rem(100px);
+    margin-block-end: rem(100px);
   }
 }
 

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_panel.scss b/docs/lib/sage-frontend/stylesheets/docs/_panel.scss
@@ -11,6 +11,6 @@
   }
 
   p + p {
-    margin-top: 1.5rem;
+    margin-block-start: 1.5rem;
   }
 }
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss b/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss
@@ -10,7 +10,7 @@ $-quick-links-color-background: sage-color(primary, 200);
 
 .quick-links {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   overflow: hidden;
   padding: sage-spacing(2xs) sage-spacing();
   background-color: #fff;
@@ -29,14 +29,14 @@ $-quick-links-color-background: sage-color(primary, 200);
   list-style: none;
 
   &:not(:last-child) {
-    margin-bottom: sage-spacing(2xs);
+    margin-block-end: sage-spacing(2xs);
   }
 }
 
 .quick-links__link {
   display: flex;
   align-items: center;
-  margin-bottom: rem(2px);
+  margin-block-end: rem(2px);
   padding: sage-spacing(2xs) sage-spacing(xs);
   color: $-quick-links-color-text;
   border-radius: sage-border(radius);
@@ -58,7 +58,7 @@ $-quick-links-color-background: sage-color(primary, 200);
 }
 
 .quick-links__link--secondary {
-  margin-left: sage-spacing(sm);
+  margin-inline-start: sage-spacing(sm);
 }
 
 .quick-links__title {

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss b/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss
@@ -8,8 +8,8 @@
   .example__preview & {
     z-index: sage-z-index();
     position: relative;
-    top: auto;
-    left: auto;
+    inset-block-start: auto;
+    inset-inline-start: auto;
     transform: none;
     height: auto;
     box-shadow: none;

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_snippet.scss b/docs/lib/sage-frontend/stylesheets/docs/_snippet.scss
@@ -11,8 +11,8 @@
     content: "";
     display: block;
     position: absolute;
-    right: 0;
-    top: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
     height: 100%;
     width: sage-spacing(lg);
     background: linear-gradient(

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss
@@ -8,18 +8,18 @@
   th {
     padding: 4px;
     color: sage-color(grey, 700);
-    border-bottom: 1px solid sage-color(grey, 300);
+    border-block-end: 1px solid sage-color(grey, 300);
   }
 
   td {
     padding: 4px;
     font-size: sage-font-size(body-xs);
     vertical-align: middle;
-    border-bottom: 1px solid sage-color(grey, 200);
+    border-block-end: 1px solid sage-color(grey, 200);
   }
 
   tfoot td {
-    padding-top: 12px;
+    padding-block-start: 12px;
     border-bottom-color: transparent;
   }
 }
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss b/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss
@@ -9,12 +9,12 @@
   align-items: center;
   flex-wrap: wrap;
   flex-grow: 1;
-  margin-right: sage-spacing(sm);
+  margin-inline-end: sage-spacing(sm);
 
   &__wrapper {
     display: flex;
     flex-wrap: wrap;
-    margin-bottom: sage-spacing();
+    margin-block-end: sage-spacing();
   }
 
   &__icon {
@@ -49,7 +49,7 @@
   }
 
   &__text {
-    margin-left: sage-spacing(xs);
+    margin-inline-start: sage-spacing(xs);
     font-size: sage-font-size(body-sm);
     font-weight: sage-font-weight(semibold);
     color: sage-color(grey, 700);
@@ -60,6 +60,6 @@
   }
 
   @media screen and (min-width: sage-breakpoint(xl-min)) {
-    margin-right: sage-spacing(lg);
+    margin-inline-end: sage-spacing(lg);
   }
 }
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss b/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss
@@ -20,21 +20,21 @@ $-status-table-heading-padding: sage-spacing(xs) sage-spacing(sm);
 
   tbody {
     tr {
-      border-bottom: 0;
+      border-block-end: 0;
     }
 
     tr:last-child {
-      border-bottom: 0;
+      border-block-end: 0;
     }
   }
 
   th {
     padding: $-status-table-heading-padding;
     text-align: center;
-    border-bottom: $-status-table-border;
+    border-block-end: $-status-table-border;
 
     &:first-child {
-      padding-left: 0;
+      padding-inline-start: 0;
       text-align: left;
       text-align: inline-start;
     }
@@ -44,7 +44,7 @@ $-status-table-heading-padding: sage-spacing(xs) sage-spacing(sm);
     padding: $-status-table-cell-padding;
     vertical-align: middle;
     text-align: center;
-    border-bottom: sage-border();
+    border-block-end: sage-border();
 
     &:first-child {
       font-weight: sage-font-weight(semibold);

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_table.scss b/docs/lib/sage-frontend/stylesheets/docs/_table.scss
@@ -6,7 +6,7 @@
 
 .sage-table {
   .example__preview & {
-    margin-bottom: sage-spacing();
+    margin-block-end: sage-spacing();
   }
 
   table {