Move to sass @use

[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / +video-watch / comment / video-comment-add.component.scss

diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
index 7743bd41d1f365979e49fcfe3d5214849babfc90..6202ed05b1c5d0b3a0dc24717be2b163f8eee63d 100644 (file)
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 $markdown-icon-height: 18px;
 $markdown-icon-width: 30px;
@@ -14,7 +14,7 @@ form {
   margin-bottom: 10px;
 
   my-actor-avatar {
-    margin-right: 10px;
+    @include margin-right(10px);
   }
 
   .form-group {
@@ -26,12 +26,12 @@ form {
   textarea {
     @include peertube-textarea(100%, $peertube-textarea-height);
     @include button-focus(pvar(--mainColorLightest));
+    @include padding-right($markdown-icon-width + 15px !important);
 
     min-height: calc(#{$peertube-textarea-height} - 15px * 2);
-    padding-right: $markdown-icon-width + 15px !important;
 
     @media screen and (max-width: 600px) {
-      padding-right: $markdown-icon-width + 19px !important;
+      @include padding-right($markdown-icon-width + 19px !important);
     }
 
     &:focus::placeholder {
@@ -45,6 +45,12 @@ form {
   top: 5px;
   right: 9px;
 
+  // inset-inline is not well supported by web browsers
+  &.is-rtl {
+    right: unset;
+    left: 9px;
+  }
+
   ::ng-deep .help-tooltip-button {
     my-global-icon {
       height: $markdown-icon-height;
@@ -86,9 +92,10 @@ form {
     flex: 1;
 
     code {
+      @include margin-left(5px);
+
       display: inline-block;
       vertical-align: middle;
-      margin-left: 5px;
     }
   }
 }