From 4158e67c8d7eb39712e598d3f409c6739eef5f0b Mon Sep 17 00:00:00 2001 From: Wicklow Date: Mon, 20 Feb 2023 11:32:48 +0100 Subject: Refactoring margin and padding mixins --- .../class-helpers/_custom-bootstrap-helpers.scss | 2 +- client/src/sass/include/_account-channel-page.scss | 2 +- client/src/sass/include/_mixins.scss | 41 +++++++++++++++++----- client/src/sass/include/_variables.scss | 3 -- 4 files changed, 35 insertions(+), 13 deletions(-) (limited to 'client/src/sass') 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; -- cgit v1.2.3