From 27bc95867442c772841fb183a625bbda61dede51 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 7 Jun 2021 17:38:31 +0200
Subject: Bidi support

---
 .../shared-forms/input-toggle-hidden.component.scss  |  4 ++--
 .../shared-forms/markdown-textarea.component.scss    | 20 +++++++++++---------
 .../shared-forms/peertube-checkbox.component.scss    |  3 ++-
 .../shared/shared-forms/reactive-file.component.scss |  3 ++-
 .../shared-forms/select/select-shared.component.scss |  4 ++--
 5 files changed, 19 insertions(+), 15 deletions(-)

(limited to 'client/src/app/shared/shared-forms')

diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
index d2f68e2a4..e03e9b19f 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
@@ -3,11 +3,11 @@
 
 input {
   @include peertube-input-text(auto);
+  @include padding-left(15px !important);
+  @include padding-right(15px !important);
 
   // set again properties of peertube-input-text that are overriden by .input-group
   font-size: 15px !important;
-  padding-left: 15px !important;
-  padding-right: 15px !important;
 }
 
 .eye-button {
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index 1f72dbc32..a34d9ebea 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -24,12 +24,13 @@ $input-border-radius: 3px;
     }
 
     .nav-preview {
+      @include padding-left(10px);
+      @include padding-right(10px);
+
       display: block;
-      text-align: right;
+      text-align: end;
       padding-top: 10px;
       padding-bottom: 10px;
-      padding-left: 10px;
-      padding-right: 10px;
       border-top: 1px dashed $input-border-color;
       border-left: 1px solid $input-border-color;
       border-right: 1px solid $input-border-color;
@@ -77,7 +78,7 @@ $input-border-radius: 3px;
   border-bottom: 2px solid pvar(--mainColor);
 
   :first-child {
-    margin-left: auto;
+    @include margin-left(auto);
   }
 
   ::ng-deep {
@@ -91,7 +92,7 @@ $input-border-radius: 3px;
     }
 
     .maximize-button {
-      margin-left: 5px;
+      @include margin-left(5px);
     }
   }
 }
@@ -120,10 +121,11 @@ $input-border-radius: 3px;
 
   .nav-preview {
     @include nav-preview-medium();
+    @include padding-right(0);
+    @include padding-left(0);
+
     padding-top: #{$nav-preview-vertical-padding / 2};
     padding-bottom: #{$nav-preview-vertical-padding / 2};
-    padding-left: 0;
-    padding-right: 0;
     position: absolute;
     background-color: pvar(--mainBackgroundColor);
     width: 100% !important;
@@ -132,7 +134,7 @@ $input-border-radius: 3px;
     border-right: 0;
 
     :last-child {
-      margin-right: pvar(--horizontalMarginContent);
+      @include margin-right(pvar(--horizontalMarginContent));
     }
   }
 
@@ -181,11 +183,11 @@ $input-border-radius: 3px;
     .nav-preview {
       ::ng-deep .nav-link {
         @include ellipsis();
+        @include margin-right(10px !important);
 
         display: block !important;
         max-width: 45% !important;
         padding: 5px 0 !important;
-        margin-right: 10px !important;
         text-align: center;
 
         &:not(.active) {
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
index 203b82d0b..54479fed7 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -36,7 +36,8 @@
   }
 
   .recommended {
-    margin-left: .5rem;
+    @include margin-left(.5rem);
+
     align-self: baseline;
     display: inline-block;
     padding: 4px 6px;
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.scss b/client/src/app/shared/shared-forms/reactive-file.component.scss
index 84c23c1d6..a23b28147 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.scss
+++ b/client/src/app/shared/shared-forms/reactive-file.component.scss
@@ -16,7 +16,8 @@
   }
 
   .filename {
+    @include margin-left(5px);
+
     font-weight: $font-semibold;
-    margin-left: 5px;
   }
 }
diff --git a/client/src/app/shared/shared-forms/select/select-shared.component.scss b/client/src/app/shared/shared-forms/select/select-shared.component.scss
index 7006adab1..9a796f545 100644
--- a/client/src/app/shared/shared-forms/select/select-shared.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss
@@ -43,10 +43,10 @@ ng-select ::ng-deep {
 my-select-options + input {
   @include peertube-input-text($form-base-input-width);
 
-  margin-left: 5px;
+  @include margin-left(5px);
   display: block;
 }
 
 .input-suffix {
-  margin-left: 5px;
+  @include margin-left(5px);
 }
-- 
cgit v1.2.3