Refactoring margin and padding mixins

4 files changed, 35 insertions, 13 deletions

diff --git a/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss b/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
index bb5902ec9..dfe6f9050 100644
--- a/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
+++ b/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
@@ -4,5 +4,5 @@
 // Font sizes
 
 .fs-5-5 {
-  @include font-size(1.125rem);
+  @include font-size(18px);
 }
diff --git a/client/src/sass/include/_account-channel-page.scss b/client/src/sass/include/_account-channel-page.scss
index ab6c772c1..c47acb7b7 100644
--- a/client/src/sass/include/_account-channel-page.scss
+++ b/client/src/sass/include/_account-channel-page.scss
@@ -16,7 +16,7 @@
 }
 
 @mixin show-more-description {
-  @include rfs(10px auto 45px, margin);
+  @include margin(10px, auto, 45px);
   
   color: pvar(--mainColor);
   cursor: pointer;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index bd467a0ed..3941cf374 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -919,20 +919,25 @@
   }
 }
 
-@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
+@mixin margin ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
+  @if $arg2 ==null and $arg3 ==null and $arg4 ==null {
+    @include margin-original($arg1, $arg1, $arg1, $arg1);
+  } @else if $arg3 ==null and $arg4 ==null {
+    @include margin-original($arg1, $arg2, $arg1, $arg2);
+  } @else if $arg4 ==null {
+    @include margin-original($arg1, $arg2, $arg3, $arg2);
+  } @else {
+    @include margin-original($arg1, $arg2, $arg3, $arg4);
+  }
+}
+
+@mixin margin-original ($block-start, $inline-end, $block-end, $inline-start) {
   @include margin-left($inline-start);
   @include margin-right($inline-end);
   @include margin-top($block-start);
   @include margin-bottom($block-end);
 }
 
-@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
-  @include padding-left($inline-start);
-  @include padding-right($inline-end);
-  @include padding-top($block-start);
-  @include padding-bottom($block-end);
-}
-
 @mixin margin-left ($value) {
   @supports (margin-inline-start: $value) {
     @include rfs($value, margin-inline-start);
@@ -953,6 +958,26 @@
   }
 }
 
+@mixin padding-original ($block-start, $inline-end, $block-end, $inline-start) {
+  @include padding-left($inline-start);
+  @include padding-right($inline-end);
+  @include padding-top($block-start);
+  @include padding-bottom($block-end);
+}
+
+
+@mixin padding ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
+  @if $arg2 ==null and $arg3 ==null and $arg4 ==null {
+    @include padding-original($arg1, $arg1, $arg1, $arg1);
+  } @else if $arg3 ==null and $arg4 ==null {
+    @include padding-original($arg1, $arg2, $arg1, $arg2);
+  } @else if $arg4 ==null {
+    @include padding-original($arg1, $arg2, $arg3, $arg2);
+  } @else {
+    @include padding-original($arg1, $arg2, $arg3, $arg4);
+  }
+}
+
 @mixin padding-left ($value) {
   @supports (padding-inline-start: $value) {
     @include rfs($value, padding-inline-start);
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 1243854ec..8358270da 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -10,9 +10,6 @@ $font-semibold: 600;
 $font-bold: 700;
 $line-height-normal: 1.2;
 
-$font-size-rem-13px: 0.8125rem;
-$font-size-rem-14px: 0.875rem;
-
 $grey-background-color: #E5E5E5;
 $grey-background-hover-color: #EFEFEF;
 $grey-foreground-color: #585858;