Replace margin physical properties with logical

CHANGELOG.md

@@ -59,7 +59,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
-- Replace physical properties with logical values (#699)
+- Replace physical properties with logical values - margin (#717)
+- Replace physical properties with logical values - position (#699)
 - Moved web component custom events from the `editor-wc` element to the `document` (#710)
 - Renamed web component custom events to be prefixed with `editor-` (#710)
 - Switch props of `WebComponentLoader` from `snake_case` to `camelCase` (#712)

src/assets/stylesheets/AstroPiModel.scss

@@ -1,7 +1,7 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 .sense-hat {
   width: 100%;
@@ -48,7 +48,7 @@
       &__reset-btn {
         flex: 1;
         display: flex;
-        margin-left: auto;
+        margin-inline-start: auto;
         svg {
           padding: $space-0-5;
           border-radius: 5px;
@@ -69,8 +69,8 @@
     &-heading {
       @include font-size-1(regular);
       font-weight: $font-weight-regular;
-      margin: 0;
-      margin-bottom: $space-0-5;
+      margin-block: 0 $space-0-5;
+      margin-inline: 0;
     }
 
     &-panel {
@@ -93,17 +93,17 @@
         &-reading {
           width: 100%;
           border-radius: 5px;
-          margin-top: $space-0-25;
+          margin-block-start: $space-0-25;
           padding: $space-0-25;
           box-sizing: border-box;
           display: flex;
           align-items: center;
           justify-content: center;
-          font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+          font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
             monospace;
 
           &-timer {
-            margin-top: 0;
+            margin-block-start: 0;
             padding: $space-0-5 0;
             width: 100%;
           }
@@ -129,7 +129,7 @@
           transform: rotate(270deg);
         }
 
-        input[type='color'] {
+        input[type="color"] {
           border-radius: 5px;
           flex: 1;
           width: 100%;
@@ -143,11 +143,11 @@
         }
 
         &-value {
-          margin-left: $space-0-25;
+          margin-inline-start: $space-0-25;
         }
 
         &-last {
-          margin-top: $space-0-5;
+          margin-block-start: $space-0-5;
           flex-flow: row;
           width: 100%;
           align-items: inherit;
@@ -201,7 +201,7 @@
             border: 1px solid $rpf-grey-500;
           }
 
-          input[type='color'] {
+          input[type="color"] {
             background-color: $rpf-grey-800;
             border: 1px solid $rpf-grey-500;
           }
@@ -255,7 +255,7 @@
             border: 2px solid $rpf-grey-300;
           }
 
-          input[type='color'] {
+          input[type="color"] {
             background-color: $rpf-white;
             border: 2px solid $rpf-grey-300;
           }

src/assets/stylesheets/BetaBanner.scss

@@ -21,7 +21,7 @@
     border-radius: 8px;
     background-color: $rpf-teal-200;
     font-weight: $font-weight-bold;
-    margin-right: $space-1-5;
+    margin-inline-end: $space-1-5;
   }
 }
 
@@ -51,12 +51,12 @@
 }
 
 .editor-banner__close-button {
-  margin-left: auto;
+  margin-inline-start: auto;
 
   &.btn--tertiary {
     svg {
       fill: $rpf-text-primary;
-      margin-right: 0;
+      margin-inline-end: 0;
     }
 
     &:hover {

src/assets/stylesheets/Button.scss

@@ -1,11 +1,19 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
-
-@mixin button-styling($bg, $active-bg, $dis-bg, $dis-c, $focus-bg, $hover-bg, $c: default) {
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
+
+@mixin button-styling(
+  $bg,
+  $active-bg,
+  $dis-bg,
+  $dis-c,
+  $focus-bg,
+  $hover-bg,
+  $c: default
+) {
   background-color: $bg;
 
-  @if $c == 'default' {
+  @if $c == "default" {
     color: $rpf-text-primary;
 
     svg {
@@ -19,17 +27,20 @@
     }
   }
 
-  &:active, .btn-outer:active & {
+  &:active,
+  .btn-outer:active & {
     background-color: $active-bg;
     @content;
   }
 
+
   &:focus-visible, .btn-outer:focus-visible & {
     background-color: $focus-bg;
     @content;
   }
-
-  &:hover, .btn-outer:hover & {
+
+  &:hover,
+  .btn-outer:hover & {
     background-color: $hover-bg;
     @content;
   }
@@ -87,7 +98,8 @@
 
   // Variants
   &--primary {
-    $colours: $rpf-teal-800, $rpf-teal-600, $rpf-teal-200, $rpf-grey-600, $rpf-teal-800, $rpf-teal-900;
+    $colours: $rpf-teal-800, $rpf-teal-600, $rpf-teal-200, $rpf-grey-600,
+      $rpf-teal-800, $rpf-teal-900;
     @include button-styling($colours...);
   }
 
@@ -115,7 +127,8 @@
   }
 
   &--tertiary {
-    $colours: inherit, inherit, inherit, $rpf-grey-600, inherit, inherit, inherit;
+    $colours: inherit, inherit, inherit, $rpf-grey-600, inherit, inherit,
+      inherit;
     @include button-styling($colours...);
     margin: 0;
 
@@ -137,7 +150,8 @@
   }
 
   &--danger {
-    $colours:  $rpf-alert-error, $rpf-alert-error, $rpf-alert-error, $rpf-white, $rpf-alert-error, $rpf-alerts-error-tint, $rpf-white;
+    $colours: $rpf-alert-error, $rpf-alert-error, $rpf-alert-error, $rpf-white,
+      $rpf-alert-error, $rpf-alerts-error-tint, $rpf-white;
     @include button-styling($colours...);
 
     &:focus-visible {
@@ -226,12 +240,14 @@
   }
 
   .btn--primary {
-    $colours: $rpf-teal-400, $rpf-teal-200, $rpf-grey-200, $rpf-grey-700, $rpf-teal-400, $rpf-teal-600;
+    $colours: $rpf-teal-400, $rpf-teal-200, $rpf-grey-200, $rpf-grey-700,
+      $rpf-teal-400, $rpf-teal-600;
     @include button-styling($colours...);
   }
 
   .btn--secondary {
-    $colours: inherit, inherit, $rpf-grey-700, $rpf-grey-100, inherit, inherit, $rpf-white;
+    $colours: inherit, inherit, $rpf-grey-700, $rpf-grey-100, inherit, inherit,
+      $rpf-white;
     @include button-styling($colours...);
 
     border: 2px solid $rpf-teal-400;
@@ -254,7 +270,8 @@
   }
 
   .btn--tertiary {
-    $colours: inherit, inherit, inherit, $rpf-grey-100, inherit, inherit, $rpf-white;
+    $colours: inherit, inherit, inherit, $rpf-grey-100, inherit, inherit,
+      $rpf-white;
     @include button-styling($colours...);
 
     &:active {
@@ -274,4 +291,3 @@
     }
   }
 }
-

src/assets/stylesheets/ContextMenu.scss

@@ -13,9 +13,9 @@
 
 .context-menu {
   list-style-type: none;
-  margin: 0;
   padding: 0;
-  margin-inline-start: $space-0-5;
+  margin-inline: $space-0-5 0;
+	margin-block: 0;
   border-radius: 5px;
   display: flex;
   flex-direction: column;

src/assets/stylesheets/Dropdown.scss

@@ -25,7 +25,7 @@
     position: absolute;
     padding: $space-0-5;
     border-radius: 10px;
-    margin-top: $space-1-5;
+    margin-block-start: $space-1-5;
 
     &--bottom {
       inset-block-start: 100%;
@@ -38,7 +38,7 @@
         position: absolute;
         inset-block-end: 100%;
         inset-inline-start: 50%;
-        margin-left: -15px;
+        margin-inline-start: -15px;
         content: '';
       }
     }

src/assets/stylesheets/EditorPanel.scss

@@ -22,11 +22,11 @@
       .cm-content {
         flex: 1;
         padding-top: $space-0-5;
-        margin-right: $space-0-5;
+        margin-inline-end: $space-0-5;
       }
     }
   }
-  
+
   &--small {
     @include font-size-1(regular);
   }

src/assets/stylesheets/ErrorMessage.scss

@@ -1,9 +1,9 @@
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/spacing' as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/spacing" as *;
 
 .error-message {
   color: #7e0305;
-  background-color: #FDE2E1;
+  background-color: #fde2e1;
   padding: $space-0-75 $space-1-25;
 
   &__content {

src/assets/stylesheets/FilePanel.scss

@@ -1,6 +1,6 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 .files-list-item-wrapper {
   display: flex;
@@ -35,7 +35,8 @@
 }
 
 .--light {
-  .files-list-item, .files-list-item__menu {
+  .files-list-item,
+  .files-list-item__menu {
     &:hover {
       background-color: $rpf-teal-secondary-tertiary-hover;
     }
@@ -47,7 +48,8 @@
 }
 
 .--dark {
-  .files-list-item, .files-list-item__menu {
+  .files-list-item,
+  .files-list-item__menu {
     &:hover {
       background-color: $rpf-grey-secondary-tertiary-hover;
     }

src/assets/stylesheets/FontSizeSelector.scss

@@ -12,7 +12,7 @@
       border-radius: 5px;
       display: block;
       width: 100%;
-      margin-bottom: $space-0-75;
+      margin-block-end: $space-0-75;
       color: inherit;
 
       .--dark & {

src/assets/stylesheets/GlobalNav.scss

@@ -1,7 +1,7 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
-@use './rpf_design_system/mixins' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
+@use "./rpf_design_system/mixins" as *;
 
 .editor-global-nav-wrapper {
   flex: 0 1 auto;
@@ -16,13 +16,14 @@
   z-index: 2;
 
   &__account {
-    margin-left: auto;
-    margin-right: $space-2;
+    margin-inline-start: auto;
+    margin-inline-end: $space-2;
     height: 100%;
 
     svg {
-      fill:  $rpf-white;
-      margin: 0 0 0 $space-0-5;
+      fill: $rpf-white;
+      margin-block: 0;
+      margin-inline: 0 $space-0-5;
     }
 
     .dropdown-button {
@@ -44,22 +45,22 @@
   &__home {
     display: flex;
     align-items: center;
-    margin-left: $space-2;
+    margin-inline-start: $space-2;
     padding: $space-0-5 0;
     font-weight: $font-weight-bold;
     text-decoration: none;
     color: $rpf-white;
 
     span {
-      margin-left: $space-1-5;
+      margin-inline-start: $space-1-5;
     }
 
     &:visited {
       color: $rpf-white;
     }
 
     @include md-width {
-      margin-left: $space-3;
+      margin-inline-start: $space-3;
     }
   }
 }