Start to use CSS logical properties for docs pages. (#954)

This transition to logical properties and values (as opposed to
physical/dimensional ones) will allow for UI elements and associated
spacing to better accomodate languages with a right-to-left writing
direction.

Although DocC doesn't yet support right-to-left localized content, this
change will better future-proof the renderer if it does, allowing it to
do things like flip the orientation of the sidebar and strings of text
for languages that read from right to left instead of left to right.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values

Resolves: rdar://138952234

Author: mportiz08

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;
   }
 }