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

---
 client/src/sass/application.scss          | 34 +++++------
 client/src/sass/bootstrap.scss            | 29 ++++++++--
 client/src/sass/include/_actor.scss       |  3 +-
 client/src/sass/include/_miniature.scss   | 11 ++--
 client/src/sass/include/_mixins.scss      | 95 +++++++++++++++++++++++++------
 client/src/sass/ng-select.scss            |  6 +-
 client/src/sass/player/bezels.scss        |  3 +-
 client/src/sass/player/context-menu.scss  |  5 +-
 client/src/sass/player/peertube-skin.scss | 41 +++++++------
 client/src/sass/player/settings-menu.scss | 16 +++---
 client/src/sass/player/stats.scss         |  2 +-
 client/src/sass/player/upnext.scss        |  6 +-
 client/src/sass/primeng-custom.scss       | 43 +++++++-------
 13 files changed, 193 insertions(+), 101 deletions(-)

(limited to 'client/src/sass')

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index ae511aa02..799b8c881 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -65,6 +65,9 @@ body {
   // Allow to disable the scrollbar instead of hide it when the content fit the body
   // And not move the content and header horizontally sticked to right when the content is updating
   overflow-y: scroll;
+
+  // Fix "reboot" style that set text-align: left
+  text-align: start;
 }
 
 ::selection {
@@ -130,8 +133,7 @@ my-input-toggle-hidden ::ng-deep input {
 
 .full-width {
   width: 100%;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
   max-width: initial;
 }
 
@@ -144,13 +146,13 @@ my-input-toggle-hidden ::ng-deep input {
 }
 
 .main-col {
-  margin-left: $menu-width;
+  @include margin-left($menu-width);
+
   width: calc(100% - #{$menu-width});
   outline: none;
 
   .margin-content {
-    margin-left: pvar(--horizontalMarginContent);
-    margin-right: pvar(--horizontalMarginContent);
+    margin: 0 pvar(--horizontalMarginContent);
     flex-grow: 1;
   }
 
@@ -159,8 +161,7 @@ my-input-toggle-hidden ::ng-deep input {
     width: 100%;
     display: flex;
     align-items: center;
-    padding-left: pvar(--horizontalMarginContent);
-    padding-right: pvar(--horizontalMarginContent);
+    padding: 0 pvar(--horizontalMarginContent);
     height: $sub-menu-height;
     margin-bottom: $sub-menu-margin-bottom;
     overflow-x: auto;
@@ -182,7 +183,7 @@ my-input-toggle-hidden ::ng-deep input {
     --horizontalMarginContent: #{$expanded-horizontal-margins};
     --mainColWidth: 100vw;
 
-    margin-left: 0;
+    @include margin-left(0);
     width: 100%;
   }
 
@@ -199,12 +200,12 @@ my-input-toggle-hidden ::ng-deep input {
 
 .title-page {
   @include disable-default-a-behaviour;
+  @include margin-right(55px);
 
   opacity: 0.6;
   color: pvar(--mainForegroundColor);
   font-size: 16px;
   display: inline-block;
-  margin-right: 55px;
   font-weight: $font-semibold;
   border-bottom: 2px solid transparent;
 
@@ -237,7 +238,7 @@ my-input-toggle-hidden ::ng-deep input {
   }
 
   @media screen and (max-width: $mobile-view) {
-    margin-right: 15px;
+    @include margin-left(15px);
   }
 }
 
@@ -365,8 +366,7 @@ ngx-loading-bar {
     --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
 
     .sub-menu {
-      padding-left: 50px;
-      padding-right: 50px;
+      padding: 0 50px;
 
       .title-page {
         font-size: 17px;
@@ -386,12 +386,11 @@ ngx-loading-bar {
   .main-col.expanded {
     --horizontalMarginContent: 15px;
 
-    margin-left: 0;
+    @include margin-left(0);
 
     .sub-menu {
       width: 100vw;
-      padding-left: 15px;
-      padding-right: 15px;
+      padding: 0 15px;
       margin-bottom: $sub-menu-margin-bottom-small-view;
       overflow-x: auto;
     }
@@ -405,7 +404,8 @@ ngx-loading-bar {
       flex-direction: column;
 
       .form-sub-title {
-        margin-right: 0 !important;
+        @include margin-right(0 !important);
+
         margin-bottom: 10px;
         text-align: center;
       }
@@ -419,7 +419,7 @@ ngx-loading-bar {
         width: 100%;
 
         a {
-          margin-left: 5px;
+          @include margin-left(5px);
         }
       }
     }
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 548e55e1e..501587eb2 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -62,7 +62,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   font-size: 15px;
 
   .dropdown-header {
-    padding-left: 1rem;
+    @include padding-left(1rem);
   }
 
   .dropdown-item {
@@ -105,7 +105,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   }
 
   .modal-dialog {
-    text-align: left;
+    text-align: start;
 
     &:not(.modal-lg):not(.modal-xl) {
       min-width: 500px;
@@ -153,10 +153,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
   .inputs {
     margin-bottom: 0;
-    text-align: right;
+    text-align: end;
 
     > .peertube-button:not(:first-child) {
-      margin-left: 10px;
+      @include margin-left(10px);
     }
   }
 }
@@ -342,7 +342,7 @@ ngb-tooltip-window {
   position: relative;
 
   input {
-    padding-right: 1.5rem !important;
+    @include padding-right(1.5rem !important);
   }
 
   .form-control-clear {
@@ -392,3 +392,22 @@ ngb-tooltip-window {
     border-left-color: pvar(--mainColor);
   }
 }
+
+// Override these properties for Bidi support
+@each $size, $length in $spacers {
+  .ml-#{$size} {
+    @include margin-left($length);
+  }
+
+  .mr-#{$size} {
+    @include margin-right($length);
+  }
+
+  .pl-#{$size} {
+    @include padding-left($length);
+  }
+
+  .pr-#{$size} {
+    @include padding-right($length);
+  }
+}
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index 372e7bd24..ab2038dde 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -30,7 +30,8 @@
   }
 
   > div {
-    margin-left: $img-margin;
+    @include margin-left($img-margin);
+
     min-width: 1px;
   }
 
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 070aa3398..f782d374a 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -14,8 +14,9 @@
   }
 
   &.blur-filter {
+    @include padding-left(4px);
+
     filter: blur(3px);
-    padding-left: 4px;
   }
 }
 
@@ -102,11 +103,11 @@
   --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
 
   @if $margin {
-    margin-left: var(--gridVideosMiniatureMargins) !important;
-    margin-right: var(--gridVideosMiniatureMargins) !important;
+    @include margin-left(var(--gridVideosMiniatureMargins) !important);
+    @include margin-right(var(--gridVideosMiniatureMargins) !important);
   } @else {
-    padding-left: var(--gridVideosMiniatureMargins) !important;
-    padding-right: var(--gridVideosMiniatureMargins) !important;
+    @include padding-left(var(--gridVideosMiniatureMargins) !important);
+    @include padding-right(var(--gridVideosMiniatureMargins) !important);
   }
 
   @media screen and (max-width: $mobile-view) {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 4f2421aea..19454cdb2 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -84,6 +84,7 @@
 }
 
 @mixin peertube-input-text($width) {
+  padding: 0 15px;
   display: inline-block;
   height: $button-height;
   width: $width;
@@ -91,8 +92,6 @@
   background-color: pvar(--inputBackgroundColor);
   border: 1px solid #C6C6C6;
   border-radius: 3px;
-  padding-left: 15px;
-  padding-right: 15px;
   font-size: 15px;
 
   &::placeholder {
@@ -257,6 +256,8 @@
 }
 
 @mixin peertube-button {
+  @include padding(0, 17px, 0, 13px);
+
   border: 0;
   font-weight: $font-semibold;
   font-size: 15px;
@@ -265,7 +266,6 @@
   // FIXME: because of primeng that redefines border-radius of all input[type="..."]
   border-radius: 3px !important;
   text-align: center;
-  padding: 0 17px 0 13px;
   cursor: pointer;
 }
 
@@ -290,9 +290,10 @@
   line-height: normal !important;
 
   my-global-icon {
+    @include margin-right($margin-right);
+
     position: relative;
     width: $width;
-    margin-right: $margin-right;
     top: $top;
   }
 }
@@ -310,7 +311,7 @@
     width: 100%;
     height: 100%;
     font-size: 100px;
-    text-align: right;
+    text-align: end;
     filter: alpha(opacity=0);
     opacity: 0;
     outline: none;
@@ -428,6 +429,8 @@
       cursor: pointer;
 
       &::before {
+        @include margin-right(10px);
+
         position: relative;
         top: -2px;
         content: '';
@@ -440,7 +443,6 @@
         vertical-align: middle;
         cursor: pointer;
         text-align: center;
-        margin-right: 10px;
       }
     }
 
@@ -500,9 +502,10 @@
   }
 
   + span + span {
+    @include margin-left(5px);
+
     font-size: 15px;
     font-weight: $font-regular;
-    margin-left: 5px;
     cursor: pointer;
     display: inline;
   }
@@ -635,10 +638,10 @@
   padding: 6px 15px;
 
   my-global-icon {
+    @include margin-right(10px);
+
     width: 22px;
     opacity: .7;
-
-    margin-right: 10px;
     position: relative;
     top: -2px;
   }
@@ -705,10 +708,12 @@
     }
 
     + .breadcrumb-item {
-      padding-left: 0.5rem;
+      @include padding-left(0.5rem);
+
       &::before {
+        @include padding-right(0.5rem);
+
         display: inline-block;
-        padding-right: 0.5rem;
         color: #6c757d;
         content: '/';
       }
@@ -822,8 +827,8 @@
   }
 
   my-actor-avatar {
-    margin-left: -.4rem;
-    margin-right: .2rem;
+    @include margin-left(-.4rem);
+    @include margin-right(.2rem);
   }
 
   &.two-lines {
@@ -836,11 +841,11 @@
     }
 
     div {
+      margin: 0 .1rem;
+
       display: flex;
       flex-direction: column;
       height: $avatar-height;
-      margin-left: .1rem;
-      margin-right: .1rem;
       justify-content: center;
     }
   }
@@ -875,14 +880,14 @@
 
     > span > my-global-icon,
     > my-global-icon {
-      margin-right: 10px;
+      @include margin-right(10px);
       width: 24px;
       height: 24px;
       vertical-align: top;
     }
 
     .badge {
-      margin-left: 7px;
+      @include margin-left(7px);
       vertical-align: top;
     }
   }
@@ -930,3 +935,59 @@
     }
   }
 }
+
+@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
+  @include margin-left($inline-start);
+  @include margin-right($inline-end);
+
+  margin-top: $block-start;
+  margin-bottom: $block-end;
+}
+
+@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
+  @include padding-left($inline-start);
+  @include padding-right($inline-end);
+
+  padding-top: $block-start;
+  padding-bottom: $block-end;
+}
+
+@mixin margin-left ($value) {
+  @supports (margin-inline-start: $value) {
+    margin-inline-start: $value;
+  }
+
+  @supports not (margin-inline-start: $value) {
+    margin-left: $value;
+  }
+}
+
+@mixin margin-right ($value) {
+  @supports (margin-inline-end: $value) {
+    margin-inline-end: $value;
+  }
+
+  @supports not (margin-inline-end: $value) {
+    margin-right: $value;
+  }
+}
+
+@mixin padding-left ($value) {
+  @supports (padding-inline-start: $value) {
+    padding-inline-start: $value;
+  }
+
+  @supports not (padding-inline-start: $value) {
+    padding-left: $value;
+  }
+}
+
+@mixin padding-right ($value) {
+  @supports (padding-inline-end: $value) {
+    padding-inline-end: $value;
+  }
+
+  @supports not (padding-inline-end: $value) {
+    padding-right: $value;
+  }
+}
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 13b2012b2..ecd33babe 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -31,7 +31,7 @@ $ng-select-value-font-size: 15px;
   }
 
   .ng-arrow-wrapper {
-    padding-right: 12px;
+    @include padding-right(12px);
   }
 
   &.ng-select-single .ng-value-container .ng-value {
@@ -44,10 +44,10 @@ $ng-select-value-font-size: 15px;
   }
 
   &.ng-select-multiple .ng-select-container .ng-value-container {
-    padding-left: 12px;
+    @include padding-left(12px);
 
     .ng-value { /* stylelint-disable-line */
-      margin-left: 3px;
+      @include margin-left(12px);
     }
   }
 }
diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
index 853a030a3..b8c3325d0 100644
--- a/client/src/sass/player/bezels.scss
+++ b/client/src/sass/player/bezels.scss
@@ -9,13 +9,14 @@
 }
 
 .vjs-bezel {
+  @include margin-left(-26px);
+
   position: absolute;
   left: 50%;
   top: 50%;
   width: 52px;
   height: 52px;
   z-index: 19;
-  margin-left: -26px;
   margin-top: -26px;
   background: rgba(0, 0, 0, .5);
   border-radius: 26px;
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 1653dd2c4..501c68ffd 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -25,7 +25,7 @@ $context-menu-width: 350px;
     cursor: pointer;
     font-size: 1em;
     padding: 8px 16px;
-    text-align: left;
+    text-align: start;
     text-transform: none;
 
     &:hover {
@@ -35,6 +35,8 @@ $context-menu-width: 350px;
     [class^='vjs-icon-'] {
       $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
 
+      @include margin-right(0.8rem !important);
+
       display: inline-flex;
       position: relative;
       top: 2px;
@@ -43,7 +45,6 @@ $context-menu-width: 350px;
       height: 14px;
       background-color: #fff;
       mask-size: cover;
-      margin-right: 0.8rem !important;
 
       @each $icon in $icons {
         &[class$="-#{$icon}"] {
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index c010f7297..148992089 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -20,8 +20,9 @@ body {
   color: pvar(--embedForegroundColor);
 
   .vjs-dock-text {
+    @include padding-right(60px);
+
     padding: $dock-padding;
-    padding-right: 60px;
     background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
   }
 
@@ -34,11 +35,11 @@ body {
     font-size: 11px;
 
     .text::before {
-      margin-right: 4px;
+      @include margin-right(4px);
     }
 
     .text::after {
-      margin-left: 4px;
+      @include margin-left(4px);
       transform: scale(-1, 1);
     }
   }
@@ -55,6 +56,8 @@ body {
     $big-play-width: 1.2em;
     $big-play-height: 1.2em;
 
+    @include margin-left(-($big-play-width / 2));
+
     outline: 0;
     font-size: 6em;
 
@@ -66,7 +69,6 @@ body {
     width: $big-play-width;
     height: $big-play-height;
     line-height: $big-play-height;
-    margin-left: -($big-play-width / 2);
     margin-top: -($big-play-height / 2);
     transition: 0.4s opacity;
 
@@ -157,7 +159,7 @@ body {
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
 
     > button:first-child {
-      margin-left: $first-control-bar-element-margin-left;
+      @include margin-left($first-control-bar-element-margin-left);
     }
 
     .vjs-progress-control,
@@ -188,11 +190,12 @@ body {
     }
 
     .vjs-progress-control {
+      @include margin-left($progress-margin);
+
       position: absolute;
       z-index: 100; // On top of the progress bar
       bottom: 29px;
       width: calc(100% - (2 * #{$progress-margin}));
-      margin-left: $progress-margin;
       height: 14px;
 
       .vjs-slider {
@@ -261,17 +264,19 @@ body {
       line-height: inherit;
 
       &.vjs-current-time {
+        @include margin-left(.5em);
+
         font-size: $font-size;
         display: inline-block;
         padding: 0;
-        margin-left: .5em;
 
         .vjs-current-time-display {
           line-height: calc(#{$control-bar-height} - 1px);
 
           &::after {
+            @include margin(0, 1px, 0, 2px);
+
             content: '/';
-            margin: 0 1px 0 2px;
           }
         }
       }
@@ -298,10 +303,11 @@ body {
     }
 
     .vjs-peertube {
+      @include margin-right(6px);
+
       width: 100%;
       line-height: $control-bar-height;
-      text-align: right;
-      margin-right: 6px;
+      text-align: end;
       overflow: hidden;
 
       .vjs-peertube-displayed {
@@ -323,7 +329,7 @@ body {
       .upload-speed-text,
       .peers-text,
       .http-fallback {
-        margin-right: 15px;
+        @include margin-right(15px);
       }
 
       .icon {
@@ -340,7 +346,7 @@ body {
     .vjs-next-video,
     .vjs-previous-video {
       line-height: $control-bar-height;
-      text-align: right;
+      text-align: end;
 
       .icon {
         &.icon-next,
@@ -415,8 +421,9 @@ body {
     }
 
     .vjs-volume-control {
+      @include margin(0, 5px, 0, 0);
+
       width: 30px;
-      margin: 0 5px 0 0;
     }
 
     .vjs-volume-bar {
@@ -490,9 +497,9 @@ body {
 
     .vjs-theater-control {
       @include disable-outline;
+      @include margin-right(1px);
 
       width: 37px;
-      margin-right: 1px;
       cursor: pointer;
 
       .vjs-icon-placeholder {
@@ -512,9 +519,9 @@ body {
 
     .vjs-fullscreen-control {
       @include disable-outline;
+      @include margin-left($first-control-bar-element-margin-left);
 
       width: 37px;
-      margin-right: $first-control-bar-element-margin-left;
 
       .vjs-icon-placeholder {
         display: inline-block;
@@ -641,12 +648,12 @@ body {
 
     .vjs-control-bar {
       > button:first-child {
-        margin-left: $first-control-bar-element-margin-left-small-width;
+        @include margin-left($first-control-bar-element-margin-left-small-width);
       }
     }
 
     .vjs-fullscreen-control {
-      margin-right: $first-control-bar-element-margin-left-small-width;
+      @include margin-right($first-control-bar-element-margin-left-small-width);
     }
 
     &.vjs-live {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 74eee7d64..2183a7dbc 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -56,13 +56,13 @@ $setting-transition-easing: ease-out;
     }
 
     .vjs-settings-sub-menu-title {
-      text-align: left;
+      text-align: start;
       font-weight: $font-semibold;
     }
 
     .vjs-settings-sub-menu-value {
       width: 100%;
-      text-align: right;
+      text-align: end;
 
       small {
         font-size: 0.85em;
@@ -132,7 +132,7 @@ $setting-transition-easing: ease-out;
         .vjs-settings-sub-menu-value::after {
           @include chevron-right(9px, 2px);
 
-          margin-left: 5px;
+          @include margin-left(5px);
         }
       }
 
@@ -142,7 +142,7 @@ $setting-transition-easing: ease-out;
         .vjs-menu-item {
           outline: 0;
           font-weight: $font-semibold;
-          text-align: right;
+          text-align: end;
           padding: 5px 8px;
 
           &.vjs-back-button {
@@ -150,12 +150,12 @@ $setting-transition-easing: ease-out;
             padding: 8px 8px 13px 12px;
             margin-bottom: 5px;
             border-bottom: 1px solid #808080;
-            text-align: left;
+            text-align: start;
 
             &::before {
               @include chevron-left(9px, 2px);
 
-              margin-right: 5px;
+              @include margin-right(5px);
             }
           }
 
@@ -182,10 +182,10 @@ $setting-transition-easing: ease-out;
           width: 200px;
 
           .vjs-menu-item {
-            text-align: left;
+            text-align: start;
 
             .vjs-menu-item-text {
-              margin-left: 25px;
+              @include margin-left(25px);
               text-transform: capitalize;
             }
           }
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss
index 6fcbcd969..c6388ed13 100644
--- a/client/src/sass/player/stats.scss
+++ b/client/src/sass/player/stats.scss
@@ -34,7 +34,7 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
     display: inline-block;
     font-weight: 600;
     padding: 0 .5em;
-    text-align: right;
+    text-align: end;
     width: 11.5em;
     white-space: nowrap;
   }
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index 8c9a6f784..922a9674d 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -23,19 +23,17 @@ $browser-context: 16;
   }
 
   .vjs-upnext-top {
+    margin: 0 auto;
     width: 100%;
     position: absolute;
-    margin-left: auto;
-    margin-right: auto;
     bottom: 50%;
     margin-bottom: 60px;
   }
 
   .vjs-upnext-bottom {
+    margin: 0 auto;
     width: 100%;
     position: absolute;
-    margin-left: auto;
-    margin-right: auto;
     top: 50%;
     margin-top: 52px;
   }
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 6a4d89dff..4cd27bea8 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -139,7 +139,8 @@ body .p-paginator .p-paginator-pages .p-paginator-page:focus {
   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 }
 body .p-paginator .p-dropdown {
-  margin-left: 0.5em;
+  @include margin-left(0.5em);
+
   height: 2.286em;
   min-width: auto;
 }
@@ -161,7 +162,7 @@ body .p-dropdown:not(.p-disabled).p-focus {
   border-color: pvar(--mainColor);
 }
 body .p-dropdown .p-dropdown-label {
-  padding-right: 2em;
+  @include padding-right(2em);
 }
 body .p-dropdown .p-dropdown-trigger {
   background-color: #ffffff;
@@ -175,7 +176,7 @@ body .p-dropdown .p-dropdown-clear-icon {
   color: #848484;
 }
 body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
-  padding-right: 4em;
+  @include padding-right(4em);
 }
 body .p-dropdown-panel {
   padding: 0;
@@ -191,8 +192,9 @@ body .p-dropdown-panel .p-dropdown-filter-container {
   margin: 0;
 }
 body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
+  @include padding-right(2em);
+
   width: 100%;
-  padding-right: 2em;
 }
 body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
   top: 50%;
@@ -368,17 +370,18 @@ body .p-datepicker.p-datepicker-timeonly .p-timepicker {
   border-top: 0 none;
 }
 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+  @include padding-right(0.857em);
+  @include padding-left(0.857em);
+
   border-right: 1px solid #d8dae2;
-  padding-right: 0.857em;
-  padding-left: 0.857em;
   padding-top: 0;
   padding-bottom: 0;
 }
 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-  padding-left: 0;
+  @include padding-left(0);
 }
 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-  padding-right: 0;
+  @include padding-right(0);
   border-right: 0 none;
 }
 body .p-calendar.p-calendar-w-btn .p-inputtext {
@@ -402,7 +405,7 @@ body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border: 1px solid #a80000;
 }
 body .p-timepicker .p-separator {
-  margin-left: 0;
+  @include margin-left(0);
   min-width: 0.75rem;
 }
 
@@ -514,7 +517,7 @@ p-table {
       align-items: center;
 
       .left-buttons {
-        padding-left: 15px;
+        @include padding-left(15px);
       }
     }
   }
@@ -534,7 +537,7 @@ p-table {
   }
 
   td {
-    padding-left: 15px !important;
+    @include padding-left(15px !important);
 
     &.expand-cell {
       padding: 10px 15px;
@@ -646,10 +649,10 @@ p-table {
     my-delete-button,
     my-button {
       display: inline-block !important;
-      margin-left: 5px;
+      @include margin-left(5px);
 
       &:first-child {
-        margin-left: 0
+        @include margin-left(0)
       }
     }
   }
@@ -714,13 +717,13 @@ p-table {
         &.p-paginator-prev {
           @extend .glyphicon-chevron-left;
 
-          margin-right: 10px;
+          @include margin-right(10px);
         }
 
         &.p-paginator-next {
           @extend .glyphicon-chevron-right;
 
-          margin-left: 10px;
+          @include margin-left(10px);
         }
 
         &.p-paginator-last {
@@ -799,7 +802,7 @@ p-calendar .p-datepicker {
   .p-datepicker-header {
 
     .p-datepicker-year {
-      margin-left: 5px;
+      @include margin-left(5px);
     }
 
     .p-datepicker-next {
@@ -807,7 +810,7 @@ p-calendar .p-datepicker {
       @include glyphicon-light;
 
       color: #000 !important;
-      text-align: right;
+      text-align: end;
 
       .pi.pi-chevron-right {
         display: none !important;
@@ -819,7 +822,7 @@ p-calendar .p-datepicker {
       @include glyphicon-light;
 
       color: #000 !important;
-      text-align: left;
+      text-align: start;
 
       .pi.pi-chevron-left {
         display: none !important;
@@ -945,7 +948,7 @@ p-toast {
 
       .message {
         flex-grow: 1;
-        margin-right: 20px;
+        @include margin-right(20px);
 
         h3 {
           font-size: 21px;
@@ -959,7 +962,7 @@ p-toast {
 
       .glyphicon {
         font-size: 32px;
-        margin-right: 5px;
+        @include margin-right(5px);
       }
     }
   }
-- 
cgit v1.2.3