Update: RTL styling (#481)

adaptlearning · Dec 19, 2023 · 14b2bf9 · 14b2bf9
1 parent cb5fc98
commit 14b2bf9
Show file tree

Hide file tree

Showing 12 changed files with 29 additions and 92 deletions.
diff --git a/less/core/button.less b/less/core/button.less
@@ -50,11 +50,6 @@
 
   .can-show-marking &__action.is-full-width,
   .can-show-marking &__feedback.is-full-width {
-    margin-right: @icon-size + (@item-margin * 2) + ((@item-padding * 0.75) * 2);
-
-    .dir-rtl & {
-      margin-right: inherit;
-      margin-left: @icon-size + (@item-margin * 2) + ((@item-padding * 0.75) * 2);
-    }
+    margin-inline-end: @icon-size + (@item-margin * 2) + ((@item-padding * 0.75) * 2);
   }
 }
diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less
@@ -26,20 +26,12 @@
   &__item-title {
     margin-bottom: @drawer-title-margin;
     .drawer-item-title;
-    text-align: left;
-
-    .dir-rtl & {
-      text-align: right;
-    }
+    text-align: start;
   }
 
   &__item-body {
     margin-bottom: @drawer-body-margin;
     .drawer-item-body;
-    text-align: left;
-
-    .dir-rtl & {
-      text-align: right;
-    }
+    text-align: start;
   }
 }
diff --git a/less/core/notify.less b/less/core/notify.less
@@ -20,19 +20,10 @@
 
     // Converted media query to use min width to sync responsive trigger with js
     // https://github.com/adaptlearning/adapt_framework/issues/2865
-    padding-right: unit(@icon-size + @btn-margin + @btn-padding, rem);
-
-    .dir-rtl & {
-      padding-right: inherit;
-      padding-left: unit(@icon-size + @btn-margin + @btn-padding, rem);
-    }
+    padding-inline-end: unit(@icon-size + @btn-margin + @btn-padding, rem);
 
     @media (min-width: @device-width-medium) {
-      padding-right: inherit;
-
-      .dir-rtl & {
-        padding-left: inherit;
-      }
+      padding-inline-end: inherit;
     }
   }
 

diff --git a/less/core/notifyPush.less b/less/core/notifyPush.less
@@ -9,13 +9,9 @@
   }
 
   &__inner {
-    padding: @item-padding;
-    padding-right: unit(@icon-size + @btn-margin + @btn-padding + @item-padding, rem);
-
-    .dir-rtl & {
-      padding-right: @item-padding;
-      padding-left: unit(@icon-size + @btn-margin + @btn-padding + @item-padding, rem);
-    }
+    padding-top: @item-padding;
+    padding-bottom: @item-padding;
+    padding-inline: @item-padding unit(@icon-size + @btn-margin + @btn-padding + @item-padding, rem);
   }
 
   &__title {

diff --git a/less/plugins/adapt-contrib-accordion/accordion.less b/less/plugins/adapt-contrib-accordion/accordion.less
@@ -3,9 +3,10 @@
 
   &__btn {
     position: relative;
-    padding: @item-padding;
-    padding-right: @icon-size + (@item-padding * 2);
-    text-align: left;
+    padding-top: @item-padding;
+    padding-bottom: @item-padding;
+    padding-inline: @item-padding (@icon-size + (@item-padding * 2));
+    text-align: start;
     background-color: @item-color;
     color: @item-color-inverted;
     border-radius: @item-border-radius;
@@ -15,12 +16,6 @@
       color: @item-color-inverted-hover;
       .transition(background-color @duration ease-in, color @duration ease-in;);
     }
-
-    .dir-rtl & {
-      padding-right: @item-padding;
-      padding-left: @icon-size + (@item-padding * 2);
-      text-align: right;
-    }
   }
 
   &__btn.is-visited {

diff --git a/less/plugins/adapt-contrib-glossary/glossary.less b/less/plugins/adapt-contrib-glossary/glossary.less
@@ -17,13 +17,8 @@
   }
 
   &__checkbox-label {
-    margin-left: @item-margin;
+    margin-inline-start: @item-margin;
     color: @drawer-item-inverted;
-
-    .dir-rtl & {
-      margin-left: inherit;
-      margin-right: @item-margin;
-    }
   }
 
   &__search-container,

diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less
@@ -1,9 +1,11 @@
 .dropdown {
   &__btn {
     position: relative;
-    padding: @item-padding (@icon-size + (@item-padding * 2)) @item-padding @item-padding;
+    padding-top: @item-padding;
+    padding-bottom: @item-padding;
+    padding-inline: @item-padding (@icon-size + (@item-padding * 2));
     line-height: @body-line-height;
-    text-align: left;
+    text-align: start;
     background-color: @item-color;
     color: @item-color-inverted;
 
@@ -13,12 +15,6 @@
       color: @item-color-inverted-hover;
       .transition(background-color @duration ease-in, color @duration ease-in;);
     }
-
-    .dir-rtl & {
-      padding-right: @item-padding;
-      padding-left: @icon-size + (@item-padding * 2);
-      text-align: right;
-    }
   }
 
   &__btn.is-disabled {

diff --git a/less/plugins/adapt-contrib-mcq/mcq.less b/less/plugins/adapt-contrib-mcq/mcq.less
@@ -40,11 +40,8 @@
   }
 
   &__text {
-    padding: @item-padding @item-padding @item-padding (@icon-size + (@item-padding * 2));
-
-    .dir-rtl & {
-      padding-left: @item-padding;
-      padding-right: @icon-size + (@item-padding * 2);
-    }
+    padding-top: @item-padding;
+    padding-bottom: @item-padding;
+    padding-inline: (@icon-size + (@item-padding * 2)) @item-padding;
   }
 }
diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less
@@ -33,13 +33,9 @@
   }
 
   &__strapline-btn {
-    text-align: left;
+    text-align: start;
     background-color: @item-color;
     color: @item-color-inverted;
-
-    .dir-rtl & {
-      text-align: right;
-    }
   }
 
   // set icon background color to transparent to 'inherit' strapline styling

diff --git a/less/plugins/adapt-contrib-textInput/textinput.less b/less/plugins/adapt-contrib-textInput/textinput.less
@@ -23,13 +23,10 @@
   }
 
   &__textbox {
-    padding: @item-padding (@icon-size + (@item-padding * 2)) @item-padding @item-padding;
+    padding-top: @item-padding;
+    padding-bottom: @item-padding;
+    padding-inline: @item-padding (@icon-size + (@item-padding * 2));
     line-height: @body-line-height;
-
-    .dir-rtl & {
-      padding-left: @icon-size + (@item-padding * 2);
-      padding-right: @item-padding;
-    }
   }
 
   &__state {

diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less
@@ -29,12 +29,7 @@
   }
 
   &-type-overlay &__title {
-    padding-right: @icon-size + @icon-padding;
-
-    .dir-rtl & {
-      padding-right: inherit;
-      padding-left: @icon-size + @icon-padding;
-    }
+    padding-inline-end: @icon-size + @icon-padding;
   }
 
   &-type-overlay &__body a {
@@ -56,11 +51,11 @@
       color: @notify-btn-inverted-hover;
       .transition(background-color @duration ease-in, color @duration ease-in;);
     }
-     
+
      &-icon {
       background-color: @notify-icon;
       color: @notify-icon-inverted;
-  
+
       .no-touch &:hover {
         background-color: @notify-icon-hover;
         color: @notify-icon-inverted-hover;

diff --git a/less/project/theme-common.less b/less/project/theme-common.less
@@ -66,11 +66,7 @@
   &.title-align-left &__title,
   &.body-align-left &__body,
   &.instruction-align-left &__instruction {
-    text-align: left;
-
-    .dir-rtl & {
-      text-align: right;
-    }
+    text-align: start;
   }
 
   &.title-align-center &__title,
@@ -82,11 +78,7 @@
   &.title-align-right &__title,
   &.body-align-right &__body,
   &.instruction-align-right &__instruction {
-    text-align: right;
-
-    .dir-rtl & {
-      text-align: left;
-    }
+    text-align: end;
   }
 }