Start to use CSS logical properties for docs pages

src/components/AdjustableSidebarWidth.vue

@@ -461,11 +461,10 @@ export default {
     position: fixed;
     top: var(--top-offset-mobile);
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
     z-index: $nav-z-index + 1;
     transform: translateX(-100%);
     transition: transform var(--nav-transition-duration) ease-in;
-    left: 0;
 
     :deep(.aside-animated-child) {
       opacity: 0;
@@ -502,7 +501,7 @@ export default {
   cursor: col-resize;
   top: 0;
   bottom: 0;
-  right: 0;
+  inset-inline-end: 0;
   width: 5px;
   height: 100%;
   user-select: none;

src/components/Badge.vue

@@ -59,7 +59,7 @@ export default {
   border-style: var(--badge-border-style, none);
   border-width: var(--badge-border-width, 1px);
   margin: auto;
-  margin-left: 5px;
+  margin-inline-start: 5px;
   color: var(--colors-badge-text, var(--color-badge-text));
   background-color: var(--badge-color);
   @include prefers-dark {

src/components/CodeBlock.vue

@@ -29,6 +29,10 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 code {
+  /* enforce "ltr" direction for text in code blocks right now since code is
+     likely to remain as English and not translated */
+  direction: ltr;
+
   &::before {
     content: attr(data-before-code);
   }

src/components/ContentNode/Aside.vue

@@ -53,11 +53,13 @@ aside {
   break-inside: avoid;
   border-radius: var(--aside-border-radius, $border-radius);
   border-style: var(--aside-border-style, solid);
-  border-width: var(--aside-border-width,
+  /*border-width: var(--aside-border-width,
     $aside-width-border
     $aside-width-border
     $aside-width-border
-    $aside-width-left-border);
+    $aside-width-left-border);*/
+  border-block-width: $aside-width-border;
+  border-inline-width: $aside-width-left-border 0;
   padding: rem(16px);
   text-align: start;
 

src/components/ContentNode/LinkableHeading.vue

@@ -78,7 +78,7 @@ $icon-margin: 7px;
   color: inherit;
   text-decoration: none;
   position: relative;
-  padding-right: $icon-size-default + $icon-margin;
+  padding-inline-end: $icon-size-default + $icon-margin;
   display: inline-block;
 
   &::after {
@@ -88,11 +88,11 @@ $icon-margin: 7px;
 
   .icon {
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: .2em;
     display: none;
     height: $icon-size-default;
-    margin-left: $icon-margin;
+    margin-inline-start: $icon-margin;
   }
 
   &:hover, &:focus {

src/components/ContentNode/TabNavigator.vue

@@ -130,9 +130,9 @@ export default {
   .tabs-content {
     flex: 1 1 auto;
     min-width: 0;
-    padding-right: var(--spacing-stacked-margin-xlarge);
+    padding-inline-end: var(--spacing-stacked-margin-xlarge);
     @include breakpoint(small) {
-      padding-right: 0;
+      padding-inline-end: 0;
       padding-bottom: var(--spacing-stacked-margin-large);
     }
   }

src/components/DocumentationLayout.vue

@@ -248,7 +248,7 @@ export default {
   }
 
   .navigator-filter .quick-navigation-open {
-    margin-left: var(--nav-filter-horizontal-padding);
+    margin-inline-start: var(--nav-filter-horizontal-padding);
     width: calc(var(--nav-filter-horizontal-padding) * 2);
   }
 }
@@ -268,14 +268,14 @@ export default {
 .documentation-layout-aside {
   height: 100%;
   box-sizing: border-box;
-  border-right: $generic-border-style;
+  border-inline-end: $generic-border-style;
 
   @include breakpoint(medium, nav) {
     background: var(--color-fill);
-    border-right: none;
+    border-inline-end: none;
 
     .sidebar-transitioning & {
-      border-right: $generic-border-style;
+      border-inline-end: $generic-border-style;
     }
   }
 }
@@ -293,8 +293,7 @@ export default {
   @include inTargetWeb {
     @include breakpoint-full-width-container();
     @include breakpoints-from(xlarge) {
-      border-left: $generic-border-style;
-      border-right: $generic-border-style;
+      border-inline: $generic-border-style;
       box-sizing: border-box;
     }
   }

src/components/DocumentationTopic.vue

@@ -816,7 +816,7 @@ $space-size: 15px;
 
   small {
     font-size: 1rem;
-    padding-left: 0.416rem;
+    padding-inline-start: 0.416rem;
   }
 }
 

src/components/DocumentationTopic/DecoratedTopicTitle.vue

@@ -75,6 +75,12 @@ export default {
 <style scoped lang="scss">
 @import 'docc-render/styles/_core.scss';
 
+.decorated-title {
+  /* enforce "ltr" direction for text in code blocks right now since code is
+     likely to remain as English and not translated */
+  direction: ltr;
+}
+
 .decorator, .label {
   color: var(--colors-secondary-label, var(--color-secondary-label));
 }

src/components/DocumentationTopic/DocumentationNav.vue

@@ -146,14 +146,14 @@ $sidenav-icon-padding-size: 5px;
     @include font-styles(nav-toggles);
 
     @include breakpoint-only-largenav() {
-      margin-left: $nav-space-between-elements;
+      margin-inline-start: $nav-space-between-elements;
     }
 
     .nav-menu-setting {
       display: flex;
       align-items: center;
       color: var(--color-nav-current-link);
-      margin-left: 0;
+      margin-inline-start: 0;
       min-width: 0;
 
       .nav-menu-link {
@@ -187,7 +187,7 @@ $sidenav-icon-padding-size: 5px;
 .sidenav-toggle-wrapper {
   display: flex;
   margin-top: 1px;
-  margin-right: $nav-padding / 2;
+  margin-inline-end: $nav-padding / 2;
 
   // This is a hack to enforce the toggle to be visible when in breakpoint,
   // even if already toggled off on desktop. Conditionally checking the current breakpoint,
@@ -204,7 +204,7 @@ $sidenav-icon-padding-size: 5px;
   }
   .sidenav-toggle-enter, .sidenav-toggle-leave-to {
     // 2x the nav padding, 1px border, and the size of the icon
-    margin-left: (rem($sidenav-icon-size + 1px) + $nav-padding * 2) * -1;
+    margin-inline-start: (rem($sidenav-icon-size + 1px) + $nav-padding * 2) * -1;
   }
 }
 

src/components/DocumentationTopic/DocumentationNav/LanguageToggle.vue

@@ -230,7 +230,7 @@ $nav-menu-toggle-label-margin: 6px;
 
 .nav-menu-setting-label {
   display: inline-block;
-  margin-right: $nav-menu-label-margin;
+  margin-inline-end: $nav-menu-label-margin;
   white-space: nowrap;
 }
 
@@ -247,8 +247,8 @@ $nav-menu-toggle-label-margin: 6px;
     background-color: transparent;
     box-sizing: inherit;
     // add left padding, but then nudge it back, so we have a consistent spacing with the label.
-    padding: 0 $dropdown-icon-padding 0 4px;
-    margin-left: -4px;
+    padding-inline: 4px $dropdown-icon-padding;
+    margin-inline-start: -4px;
     @include font-styles(nav-toggles);
     cursor: pointer;
     position: relative;
@@ -275,7 +275,7 @@ $nav-menu-toggle-label-margin: 6px;
     &-container {
       display: flex;
       align-items: center;
-      padding-right: rem(3px);
+      padding-inline-end: rem(3px);
       position: relative;
 
       @include nav-in-breakpoint() {
@@ -286,16 +286,16 @@ $nav-menu-toggle-label-margin: 6px;
         width: 0.6em;
         height: 0.6em;
         position: absolute;
-        right: 7px;
+        inset-inline-end: 7px;
       }
     }
 
     &-label {
-      margin-right: 2px;
+      margin-inline-end: 2px;
     }
 
     &.nav-menu-toggle-label {
-      margin-right: $nav-menu-toggle-label-margin;
+      margin-inline-end: $nav-menu-toggle-label-margin;
     }
   }
 }
@@ -316,9 +316,9 @@ $nav-menu-toggle-label-margin: 6px;
     display: inline-block;
 
     &:not(:first-child) {
-      border-left: $generic-border-style;
-      margin-left: $nav-menu-toggle-label-margin;
-      padding-left: $nav-menu-toggle-label-margin;
+      border-inline-start: $generic-border-style;
+      margin-inline-start: $nav-menu-toggle-label-margin;
+      padding-inline-start: $nav-menu-toggle-label-margin;
     }
   }
 }

src/components/DocumentationTopic/Hero/DocumentationHero.vue

@@ -134,10 +134,9 @@ $doc-hero-icon-dimension: 250px;
 .documentation-hero {
   color: $doc-hero-text-color;
   overflow: hidden;
-  text-align: left;
   position: relative;
   // extra offset applied when OnThisPage component is rendered
-  padding-right: var(--doc-hero-right-offset);
+  padding-inline-end: var(--doc-hero-right-offset);
 
   // gradient
   &:before {
@@ -156,7 +155,7 @@ $doc-hero-icon-dimension: 250px;
     position: absolute;
     content: '';
     height: 100%;
-    left: 0;
+    inset-inline-start: 0;
     top: 0;
 
     @include prefers-dark {
@@ -167,8 +166,8 @@ $doc-hero-icon-dimension: 250px;
   .icon {
     position: absolute;
     margin-top: $doc-hero-icon-vertical-spacing;
-    margin-right: $doc-hero-icon-spacing;
-    right: 0;
+    margin-inline-end: $doc-hero-icon-spacing;
+    inset-inline-end: 0;
     width: $doc-hero-icon-dimension;
     // create icon box with spacing in hero section
     height: calc(100% - #{$doc-hero-icon-vertical-spacing * 2});
@@ -189,7 +188,7 @@ $doc-hero-icon-dimension: 250px;
     position: absolute;
     // center in icon box
     top: 50%;
-    left: 0;
+    inset-inline-start: 0;
     transform: translateY(-50%);
     max-height: 100%;
 

src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue

@@ -231,7 +231,7 @@ $dropdown-vertical-offset: rem(7px);
     border-right-style: $border-style;
     border-right-width: $tail-width;
     content: '';
-    left: $tail-offset;
+    inset-inline-start: $tail-offset;
     position: absolute;
     top: rem($border-width) - $tail-width;
 

src/components/DocumentationTopic/Hero/HierarchyItem.vue

@@ -51,12 +51,13 @@ export default {
   &:not(:first-child):before{
     content: '/';
     width: $nav-space-hierarchy-elements;
-    margin: 0 $nav-space-hierarchy-elements;
+    margin-block: 0;
+    margin-inline: $nav-space-hierarchy-elements;
   }
 
   display: flex;
   align-items: center;
-  margin-left: 0;
+  margin-inline-start: 0;
 
   @include nav-in-breakpoint() {
     border-top: 1px solid var(--color-nav-hierarchy-item-borders);

src/components/DocumentationTopic/Hero/Title.vue

@@ -61,7 +61,7 @@ export default {
 
 small {
   @include font-styles(eyebrow);
-  padding-left: 10px;
+  padding-inline-start: 10px;
 
   &::before {
     content: attr(data-tag-name);

src/components/DocumentationTopic/OnThisPageStickyContainer.vue

@@ -31,14 +31,14 @@ export default {
   align-self: flex-start;
   flex: 0 0 auto;
   width: $on-this-page-aside-width;
-  padding-right: $nav-padding;
+  padding-inline-end: $nav-padding;
   box-sizing: border-box;
   padding-bottom: var(--spacing-stacked-margin-small);
   max-height: calc(100vh - #{$top});
   overflow: auto;
 
   @include inTargetIde {
-    margin-left: $nav-padding;
+    margin-inline-start: $nav-padding;
   }
 
   @media print {

src/components/DocumentationTopic/PrimaryContent/Mention.vue

@@ -73,7 +73,7 @@ export default {
 }
 
 .mention-icon {
-    margin-right: 0.25rem;
+    margin-inline-end: 0.25rem;
 }
 
 </style>

src/components/DocumentationTopic/PrimaryContent/Parameters.vue

@@ -55,31 +55,31 @@ export default {
 
 .param-name {
   font-weight: $font-weight-semibold;
-  padding-left: 1rem;
+  padding-inline-start: 1rem;
   padding-top: var(--spacing-param);
 
   &:first-child {
     padding-top: 0;
   }
 
   @include breakpoint(small) {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 }
 
 .param-content {
-  padding-left: 2rem;
+  padding-inline-start: 2rem;
 
   @include breakpoint(small) {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   :deep(dt) {
     font-weight: $font-weight-semibold;
   }
 
   :deep(dd) {
-    margin-left: 1em;
+    margin-inline-start: 1em;
   }
 }
 </style>